ratandeep commited on
Commit
5b815d3
·
verified ·
1 Parent(s): fe67bfa

UI fix: tape reels spin continuously while powered + spokes

Browse files
Files changed (1) hide show
  1. 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:radial-gradient(circle at 50% 50%, #20140c 0 10px, #3a2616 11px 13px, #18100a 14px);
 
 
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
- .reel.spin{animation:spin 2.6s linear infinite}
361
- .reel.spin.rev{animation-direction:reverse}
 
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
- .reel.spin{animation:none}
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}