Spaces:
Running
Running
UI fix: tape reels spin continuously while powered + spokes
Browse files- radio.html +7 -4
radio.html
CHANGED
|
@@ -346,7 +346,9 @@ body.broadcasting .onair .label{
|
|
| 346 |
.reels{display:flex;gap:18px;align-items:center;justify-content:center}
|
| 347 |
.reel{
|
| 348 |
position:relative;width:46px;height:46px;border-radius:50%;
|
| 349 |
-
background:
|
|
|
|
|
|
|
| 350 |
border:1px solid rgba(255,214,154,.12);
|
| 351 |
box-shadow:0 4px 10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,200,140,0.06) inset;
|
| 352 |
}
|
|
@@ -357,8 +359,9 @@ body.broadcasting .onair .label{
|
|
| 357 |
position:absolute;inset:17px;border-radius:50%;
|
| 358 |
background:radial-gradient(circle at 40% 35%, var(--metal-hi), var(--metal-lo));
|
| 359 |
}
|
| 360 |
-
|
| 361 |
-
.
|
|
|
|
| 362 |
@keyframes spin{to{transform:rotate(360deg)}}
|
| 363 |
|
| 364 |
/* power knob — the ritual object */
|
|
@@ -483,7 +486,7 @@ body.locked .gauge .fill{
|
|
| 483 |
}
|
| 484 |
@media (prefers-reduced-motion:reduce){
|
| 485 |
.cabinet{transform:none}
|
| 486 |
-
.
|
| 487 |
.handset.recording{animation:none}
|
| 488 |
.room-lamp{transition:none}
|
| 489 |
.line, .line .w{transition:none}
|
|
|
|
| 346 |
.reels{display:flex;gap:18px;align-items:center;justify-content:center}
|
| 347 |
.reel{
|
| 348 |
position:relative;width:46px;height:46px;border-radius:50%;
|
| 349 |
+
background:
|
| 350 |
+
repeating-conic-gradient(from 0deg, rgba(255,220,160,.22) 0 2.5deg, transparent 2.5deg 120deg),
|
| 351 |
+
radial-gradient(circle at 50% 50%, #20140c 0 10px, #3a2616 11px 13px, #18100a 14px);
|
| 352 |
border:1px solid rgba(255,214,154,.12);
|
| 353 |
box-shadow:0 4px 10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,200,140,0.06) inset;
|
| 354 |
}
|
|
|
|
| 359 |
position:absolute;inset:17px;border-radius:50%;
|
| 360 |
background:radial-gradient(circle at 40% 35%, var(--metal-hi), var(--metal-lo));
|
| 361 |
}
|
| 362 |
+
/* tape reels turn the whole time the deck is on (powered), not just over voice */
|
| 363 |
+
body.broadcasting .reel{animation:spin 3.2s linear infinite}
|
| 364 |
+
body.broadcasting .reel.rev{animation-direction:reverse}
|
| 365 |
@keyframes spin{to{transform:rotate(360deg)}}
|
| 366 |
|
| 367 |
/* power knob — the ritual object */
|
|
|
|
| 486 |
}
|
| 487 |
@media (prefers-reduced-motion:reduce){
|
| 488 |
.cabinet{transform:none}
|
| 489 |
+
body.broadcasting .reel{animation:none}
|
| 490 |
.handset.recording{animation:none}
|
| 491 |
.room-lamp{transition:none}
|
| 492 |
.line, .line .w{transition:none}
|