remove bloat css change of them toggle

This commit is contained in:
samantha42
2026-05-31 10:19:23 +02:00
parent 8d4e523b3e
commit 2c1997ed6e
12 changed files with 59 additions and 191 deletions
+12 -93
View File
@@ -436,99 +436,7 @@ a{
gap: 1rem;
font-family: var(--font-sans);
}
.toggle-wrap {
position: relative;
width: 50px;
height: 25px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.track {
position: absolute;
inset: 0;
width: 50px;
height: 25px;
border-radius: 12.5px;
transition: background 0.5s ease;
overflow: hidden;
}
.track.day { background: #87CEEB; }
.track.night { background: #1a1a3e; }
.stars {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.4s ease;
}
.night .stars { opacity: 1; }
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 2s infinite;
}
.star:nth-child(1) { width:2px; height:2px; top:4px; left:6px; animation-delay:0s; }
.star:nth-child(2) { width:1px; height:1px; top:10px; left:14px; animation-delay:0.4s; }
.star:nth-child(3) { width:1px; height:1px; top:5px; left:22px; animation-delay:0.8s; }
.star:nth-child(4) { width:2px; height:2px; top:14px; left:10px; animation-delay:1.2s; }
.star:nth-child(5) { width:1px; height:1px; top:8px; left:30px; animation-delay:0.2s; }
@keyframes twinkle {
0%,100% { opacity:1; } 50% { opacity:0.3; }
}
.knob {
position: absolute;
top: 3px;
width: 19px;
height: 19px;
border-radius: 50%;
transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.knob.night {
left: 3px;
background: radial-gradient(circle at 35% 35%, #e8e8ff, #c8c8f8);
box-shadow:
0 0 0 2px rgba(180,180,255,0.18),
0 0 7px 4px rgba(140,140,255,0.35),
0 0 14px 6px rgba(100,100,220,0.18);
}
.knob.day {
left: 28px;
background: radial-gradient(circle at 40% 40%, #fff8c5, #FFD700);
box-shadow:
0 0 0 3px rgba(255,220,0,0.25),
0 0 8px 4px rgba(255,200,0,0.45),
0 0 16px 6px rgba(255,160,0,0.2);
}
.sun-rays {
position: absolute;
inset: -7px;
opacity: 0;
transition: opacity 0.3s ease 0.15s;
pointer-events: none;
}
.knob.day .sun-rays { opacity: 1; }
.ray {
position: absolute;
width: 1.5px;
height: 4px;
background: rgba(255,220,0,0.9);
border-radius: 1px;
left: 50%;
transform-origin: 50% 16px;
margin-left: -0.75px;
}
.moon-crater {
position: absolute;
border-radius: 50%;
background: rgba(140,140,200,0.4);
transition: opacity 0.3s ease;
}
.knob.day .moon-crater { opacity: 0; }
.knob.night .moon-crater { opacity: 1; }
.label {
font-size: 13px;
font-weight: 500;
@@ -667,3 +575,14 @@ button:hover {
}
.cta-btn:hover { opacity: 0.85; }
.available {
background:rgba(65, 219, 26, 0.07);color:var(--green);
border:1px solid var(--green);
padding:2px 8px;border-radius:3px;
}
.busy {
background:rgba(219, 26, 26, 0.07);color:var(--red);
border:1px solid var(--red);
padding:2px 8px;border-radius:3px;
}