Player-css-5

CSS ParaNerd 1 Views Size: 25.57 KB Posted on: Dec 10, 25 @ 9:14 PM

1/* Font imports */  
2@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');  
3
4/* Reset and base styles */  
5* {  
6    box-sizing: border-box;  
7}  
8
9/* Main radio player styles */  
10.radio-player {  
11    font-family: 'Poppins', sans-serif;  
12    position: relative;  
13    width: 100%;  
14    height: 15%;  
15    background: rgba(0, 0, 0, 0.8);  
16    border-radius: 2px;  
17    border: 0px solid rgba(0, 0, 0, 0.8);  
18    padding: 10px;  
19    margin: 10px;  
20    box-sizing: border-box;  
21    box-shadow: -2.82842712474619px 2.8284271247461903px 15px rgba(0, 0, 0, 0.2);  
22    color: #ffffff;  
23    overflow: hidden;  
24}  
25
26.player-content {  
27    display: flex;  
28    flex-direction: column;  
29    flex: 1;  
30}  
31
32.album-artwork {  
33    width: 100%;  
34    aspect-ratio: 1;  
35    position: relative;  
36    overflow: hidden;  
37}  
38
39.artwork-image {  
40    width: 100%;  
41    height: 100%;  
42    object-fit: cover;  
43    border-radius: 4px;  
44}  
45
46.artwork-placeholder {  
47    position: absolute;  
48    top: 0;  
49    left: 0;  
50    width: 100%;  
51    height: 100%;  
52    display: flex;  
53    align-items: center;  
54    justify-content: center;  
55    background: rgba(51, 51, 51, 0.2);  
56    color: #ffffff;  
57    font-size: 2rem;  
58    border-radius: 4px;  
59}  
60
61/* Time bar styles */  
62.time-bar-container {  
63    width: 100%;  
64    padding: 5px 0;  
65    position: relative;  
66}  
67
68.time-bar {  
69    width: 100%;  
70    height: 4px;  
71    background: #ffffff33;  
72    border-radius: 2px;  
73    overflow: hidden;  
74    position: relative;  
75}  
76
77.time-bar-progress {  
78    height: 100%;  
79    background: #ffffff;  
80    width: 0;  
81    border-radius: 2px;  
82    transition: width 0.1s linear;  
83}  
84
85.time-info {  
86    display: flex;  
87    justify-content: space-between;  
88    padding: 5px 0;  
89    font-size: 12px;  
90    color: #ffffff !important;  
91    width: 100%;  
92}  
93
94.elapsed-time {  
95    text-align: left;  
96}  
97
98.duration-time {  
99    text-align: right;  
100}  
101
102/* Station info styles */  
103.station-info {  
104    display: flex;  
105    justify-content: space-between;  
106    align-items: center;  
107    width: 100%;  
108    padding: 10px 0;  
109}  
110
111.radio-name {  
112    font-size: 12px;  
113    font-weight: 600;  
114    color: #ffffff !important;  
115    letter-spacing: .2px;  
116    line-height: 1.5em;  
117    word-spacing: 1px;  
118}  
119
120/* Live indicator styles */  
121.live-container {  
122    display: flex;  
123    align-items: center;  
124    gap: 5px;  
125}  
126
127.live-indicator {  
128    width: 8px;  
129    height: 8px;  
130    border-radius: 50%;  
131    background: #FF0000;  
132    animation: pulse 2s infinite;  
133}  
134
135.live-text {  
136    font-size: 12px;  
137    color: #ffffff !important;  
138    letter-spacing: .2px;  
139    line-height: 1.5em;  
140    word-spacing: 1px;  
141}  
142
143/* Song info styles */  
144.song-info {  
145    width: 100%;  
146    padding: 15px 0;  
147    text-align: left;  
148}  
149
150.song-name {  
151    font-size: 14px;  
152    font-weight: bold;  
153    margin-bottom: 5px;  
154    color: #ffffff !important;  
155    letter-spacing: .2px;  
156    line-height: 1.5em;  
157    word-spacing: 1px;  
158}  
159
160.artist-name {  
161    font-size: 12px;  
162    opacity: 0.8;  
163    color: #ffffff !important;  
164    letter-spacing: .2px;  
165    line-height: 1.5em;  
166    word-spacing: 1px;  
167}  
168
169/* Controls styles */  
170.controls-container {  
171    position: relative;  
172    width: 100%;  
173}  
174
175.controls {  
176    display: flex;  
177    align-items: center;  
178    justify-content: center;  
179    gap: 30px;  
180    padding: 15px 20px;  
181}  
182
183.control-button {  
184    background: transparent;  
185    border: none;  
186    color: #ffffff !important;  
187    cursor: pointer;  
188    padding: 0.25rem;  
189    display: flex;  
190    align-items: center;  
191    justify-content: center;  
192    font-size: 1rem;  
193    font-weight: normal;  
194    box-shadow: none;  
195    border-radius: 0;  
196    min-width: auto;  
197    width: auto;  
198    height: auto;  
199    aspect-ratio: auto;  
200    text-transform: none;  
201    transition: color 0.1s ease, transform 0.2s ease;  
202}  
203
204.control-button:hover {  
205    color: #ff6b6b !important;  
206    transform: scale(1.1);  
207}  
208
209.control-button:active {  
210    transform: scale(0.95);  
211}  
212
213.control-button:disabled {  
214    opacity: 0.5;  
215    cursor: not-allowed;  
216}  
217
218/* Volume control styles */  
219.volume-bar-container {  
220    position: absolute;  
221    bottom: calc(100% + 5px);  
222    left: 50%;  
223    transform: translate(170%, 15px);  
224    background: rgba(0, 0, 0, 0.9);  
225    padding: 12px 8px;  
226    border-radius: 8px;  
227    opacity: 0;  
228    visibility: hidden;  
229    transition: all 0.2s ease;  
230    z-index: 100;  
231    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  
232    cursor: default;  
233    height: 100px;  
234    width: 32px;  
235    display: flex;  
236    align-items: center;  
237    justify-content: center;  
238    backdrop-filter: blur(10px);  
239}  
240
241.volume-bar-container:before {  
242    content: '';  
243    position: absolute;  
244    bottom: -5px;  
245    left: 50%;  
246    transform: translateX(-50%);  
247    width: 0;  
248    height: 0;  
249    border-left: 5px solid transparent;  
250    border-right: 5px solid transparent;  
251    border-top: 5px solid rgba(0, 0, 0, 0.9);  
252}  
253
254.volume-bar-container.show {  
255    opacity: 1;  
256    visibility: visible;  
257}  
258
259.volume-slider {  
260    -webkit-appearance: none !important;  
261    appearance: none !important;  
262    width: 80px !important;  
263    height: 4px !important;  
264    background: #ffffff40 !important;  
265    border-radius: 2px !important;  
266    outline: none !important;  
267    transform: rotate(-90deg) !important;  
268    transform-origin: center !important;  
269    margin: 0 !important;  
270    cursor: pointer !important;  
271    position: absolute !important;  
272    border: none !important;  
273    box-shadow: none !important;  
274}  
275
276.volume-slider::-webkit-slider-thumb {  
277    -webkit-appearance: none !important;  
278    appearance: none !important;  
279    width: 12px !important;  
280    height: 12px !important;  
281    background: #ffffff !important;  
282    border-radius: 50% !important;  
283    cursor: pointer !important;  
284    transition: transform 0.2s ease !important;  
285    transform-origin: center !important;  
286    border: none !important;  
287    margin-top: -4px !important;  
288    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;  
289}  
290
291.volume-slider::-moz-range-thumb {  
292    width: 12px !important;  
293    height: 12px !important;  
294    background: #ffffff !important;  
295    border-radius: 50% !important;  
296    cursor: pointer !important;  
297    transition: transform 0.2s ease !important;  
298    transform-origin: center !important;  
299    border: none !important;  
300    margin-top: -4px !important;  
301    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;  
302}  
303
304.volume-slider::-webkit-slider-runnable-track {  
305    height: 4px !important;  
306    border-radius: 2px !important;  
307    background: inherit !important;  
308    border: none !important;  
309    box-shadow: none !important;  
310}  
311
312.volume-slider::-moz-range-track {  
313    height: 4px !important;  
314    border-radius: 2px !important;  
315    background: inherit !important;  
316    border: none !important;  
317    box-shadow: none !important;  
318}  
319
320.volume-slider::-webkit-slider-thumb:hover {  
321    transform: scale(1.2) !important;  
322}  
323
324.volume-slider::-moz-range-thumb:hover {  
325    transform: scale(1.2) !important;  
326}  
327
328.volume-button:hover .volume-bar-container,  
329.volume-bar-container:hover {  
330    opacity: 1;  
331    visibility: visible;  
332}  
333
334/* History Modal Styles */  
335.history-modal {  
336    position: fixed;  
337    top: 0;  
338    left: 0;  
339    right: 0;  
340    bottom: 0;  
341    z-index: 9999;  
342    display: none;  
343}  
344
345.history-modal-overlay {  
346    position: fixed;  
347    top: 0;  
348    left: 0;  
349    right: 0;  
350    bottom: 0;  
351    background: rgba(0, 0, 0, 0.7);  
352    z-index: 10000;  
353    backdrop-filter: blur(5px);  
354}  
355
356.history-modal-content {  
357    position: fixed;  
358    top: 50%;  
359    left: 50%;  
360    transform: translate(-50%, -50%);  
361    background: rgba(0, 0, 0, 0.95);  
362    padding: 1.5rem;  
363    border-radius: 12px;  
364    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.04);  
365    z-index: 10001;  
366    max-width: 500px;  
367    width: 90%;  
368    max-height: 80vh;  
369    overflow-y: auto;  
370    font-family: 'Poppins', sans-serif;  
371    scrollbar-width: thin;  
372    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;  
373    border: 1px solid rgba(255, 255, 255, 0.1);  
374    backdrop-filter: blur(20px);  
375}  
376
377/* WebKit scrollbar styles */  
378.history-modal-content::-webkit-scrollbar {  
379    width: 6px;  
380    height: 6px;  
381}  
382
383.history-modal-content::-webkit-scrollbar-track {  
384    background: transparent;  
385    border-radius: 3px;  
386}  
387
388.history-modal-content::-webkit-scrollbar-thumb {  
389    background: rgba(255, 255, 255, 0.3);  
390    border-radius: 3px;  
391    transition: background 0.2s;  
392}  
393
394.history-modal-content::-webkit-scrollbar-thumb:hover {  
395    background: rgba(255, 255, 255, 0.5);  
396}  
397
398.history-modal-title {  
399    font-size: 1.125rem;  
400    font-weight: 600;  
401    color: #ffffff !important;  
402    margin: 0 0 1rem 0;  
403    padding-right: 1.5rem;  
404    letter-spacing: .2px;  
405    line-height: 1.5em;  
406    word-spacing: 1px;  
407}  
408
409.history-modal-close {  
410    position: absolute;  
411    top: 1rem;  
412    right: 1rem;  
413    background: none;  
414    border: none;  
415    color: #ffffff !important;  
416    cursor: pointer;  
417    padding: 0.5rem;  
418    display: flex;  
419    align-items: center;  
420    justify-content: center;  
421    border-radius: 7px;  
422    transition: background 0.2s ease;  
423}  
424
425.history-modal-close:hover {  
426    background: rgba(255, 255, 255, 0.1);  
427}  
428
429.history-list {  
430    display: flex;  
431    flex-direction: column;  
432    gap: 1rem;  
433}  
434
435.history-item {  
436    display: flex;  
437    gap: 1rem;  
438    align-items: center;  
439    padding: 0.5rem;  
440    border-radius: 8px;  
441    transition: background-color 0.2s;  
442}  
443
444.history-item:hover {  
445    background: rgba(255, 255, 255, 0.05);  
446}  
447
448.history-artwork {  
449    width: 50px;  
450    height: 50px;  
451    border-radius: 4px;  
452    overflow: hidden;  
453    flex-shrink: 0;  
454    background: rgba(255, 255, 255, 0.1);  
455}  
456
457.history-artwork img {  
458    width: 100%;  
459    height: 100%;  
460    object-fit: cover;  
461}  
462
463.history-song-info {  
464    display: flex;  
465    flex-direction: column;  
466    gap: 0.25rem;  
467    flex: 1;  
468    min-width: 0;  
469}  
470
471.history-song-title {  
472    font-size: 0.875rem;  
473    font-weight: 500;  
474    color: #ffffff !important;  
475    letter-spacing: .2px;  
476    line-height: 1.5em;  
477    word-spacing: 1px;  
478    overflow: hidden;  
479    text-overflow: ellipsis;  
480    white-space: nowrap;  
481}  
482
483.history-artist-name {  
484    font-size: 0.75rem;  
485    color: #ffffff99 !important;  
486    letter-spacing: .2px;  
487    line-height: 1.5em;  
488    word-spacing: 1px;  
489    overflow: hidden;  
490    text-overflow: ellipsis;  
491    white-space: nowrap;  
492}  
493
494/* Button styles for different sizes */  
495.radio-player .control-button {  
496    padding: 5px;  
497    width: 36px;  
498    height: 36px;  
499    display: flex;  
500    align-items: center;  
501    justify-content: center;  
502    font-size: 1rem;  
503}  
504
505.radio-player .control-button.play-button {  
506    width: calc(36px * 1.3);  
507    height: calc(36px * 1.3);  
508    font-size: 1.5rem;  
509}  
510
511.radio-player .control-button .fa-play {  
512    margin-left: 2px;  
513    font-size: inherit;  
514}  
515
516.radio-player .control-button .fa-pause {  
517    font-size: inherit;  
518}  
519
520/* Footer layout styles */  
521.radio-player.footer {  
522    position: fixed;  
523    bottom: 0;  
524    left: 0;  
525    right: 0;  
526    width: 100%;  
527    margin: 0;  
528    border-radius: 0;  
529    z-index: 9999;  
530    padding: 15px 20px;  
531    overflow: visible;  
532    backdrop-filter: blur(10px);  
533    border-top: 1px solid rgba(255, 255, 255, 0.1);  
534}  
535
536.radio-player.footer .player-content {  
537    display: flex;  
538    flex-direction: row;  
539    align-items: center;  
540    justify-content: space-between;  
541    gap: 20px;  
542    margin-bottom: 10px;  
543    position: relative;  
544    overflow: visible;  
545}  
546
547.radio-player.footer .player-left {  
548    display: flex;  
549    align-items: center;  
550    gap: 15px;  
551    position: relative;  
552    overflow: visible;  
553}  
554
555.radio-player.footer .controls {  
556    display: flex;  
557    align-items: center;  
558    gap: 15px;  
559    padding: 0;  
560    position: relative;  
561    overflow: visible;  
562}  
563
564.radio-player.footer .player-center {  
565    display: flex;  
566    align-items: center;  
567    gap: 15px;  
568    flex: 1;  
569    min-width: 0;  
570}  
571
572.radio-player.footer .album-artwork {  
573    width: 63px;  
574    height: 63px;  
575    flex-shrink: 0;  
576    border-radius: 8px;  
577    overflow: hidden;  
578    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  
579}  
580
581.radio-player.footer .player-info {  
582    flex: 1;  
583    min-width: 0;  
584}  
585
586.radio-player.footer .song-info {  
587    padding: 0;  
588}  
589
590.radio-player.footer .song-name {  
591    font-size: 16px;  
592    margin-bottom: 4px;  
593    white-space: nowrap;  
594    overflow: hidden;  
595    text-overflow: ellipsis;  
596    color: #ffffff !important;  
597    letter-spacing: .2px;  
598    line-height: 1.5em;  
599    word-spacing: 1px;  
600    font-weight: 600;  
601}  
602
603.radio-player.footer .artist-name {  
604    font-size: 14px;  
605    white-space: nowrap;  
606    overflow: hidden;  
607    text-overflow: ellipsis;  
608    opacity: 0.8;  
609    color: #ffffff !important;  
610    letter-spacing: .2px;  
611    line-height: 1.5em;  
612    word-spacing: 1px;  
613}  
614
615.radio-player.footer .player-right {  
616    display: flex;  
617    align-items: center;  
618    gap: 15px;  
619}  
620
621.radio-player.footer .time-info {  
622    display: flex;  
623    align-items: center;  
624    max-width: fit-content;  
625    font-size: 14px;  
626    justify-content: left;  
627    color: #ffffff !important;  
628    font-weight: 500;  
629}  
630
631.radio-player.footer .radio-name {  
632    font-size: 14px;  
633    max-width: fit-content;  
634    color: #ffffff !important;  
635    letter-spacing: .2px;  
636    line-height: 1.5em;  
637    word-spacing: 1px;  
638}  
639
640.radio-player.footer .live-container {  
641    display: flex;  
642    align-items: center;  
643    gap: 5px;  
644    max-width: fit-content;  
645    padding: 4px 8px;  
646    border-radius: 12px;  
647    background: rgba(255, 0, 0, 0.2);  
648    border: 1px solid rgba(255, 0, 0, 0.3);  
649}  
650
651.radio-player.footer .live-text {  
652    font-size: 12px;  
653    color: #ffffff !important;  
654    letter-spacing: .2px;  
655    line-height: 1.5em;  
656    word-spacing: 1px;  
657    font-weight: 600;  
658}  
659
660.radio-player.footer .time-bar-container {  
661    position: absolute;  
662    bottom: 0;  
663    left: 0;  
664    width: 100%;  
665    height: 4px;  
666}  
667
668.radio-player.footer .time-bar {  
669    width: 100%;  
670    height: 100%;  
671    background: #ffffff33;  
672    border-radius: 0;  
673}  
674
675.radio-player.footer .time-bar-progress {  
676    height: 100%;  
677    background: linear-gradient(90deg, #ff6b6b 0%, #ffffff 100%);  
678}  
679
680.radio-player.footer .volume-bar-container {  
681    position: absolute;  
682    bottom: calc(100% + 5px);  
683    left: 50%;  
684    transform: translateX(-40%);  
685    background: rgba(0, 0, 0, 0.9);  
686    padding: 12px 8px;  
687    border-radius: 8px;  
688    opacity: 0;  
689    visibility: hidden;  
690    transition: all 0.2s ease;  
691    z-index: 10000;  
692    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  
693    cursor: default;  
694    height: 100px;  
695    width: 32px;  
696    display: flex;  
697    align-items: center;  
698    justify-content: center;  
699    backdrop-filter: blur(10px);  
700    border: 1px solid rgba(255, 255, 255, 0.1);  
701}  
702
703.radio-player.footer .volume-bar-container:before {  
704    content: '';  
705    position: absolute;  
706    bottom: -5px;  
707    left: 50%;  
708    transform: translateX(-50%);  
709    width: 0;  
710    height: 0;  
711    border-left: 5px solid transparent;  
712    border-right: 5px solid transparent;  
713    border-top: 5px solid rgba(0, 0, 0, 0.9);  
714}  
715
716.radio-player.footer .volume-bar-container.show {  
717    opacity: 1;  
718    visibility: visible;  
719}  
720
721.radio-player.footer .volume-slider {  
722    -webkit-appearance: none;  
723    width: 80px;  
724    height: 4px;  
725    background: #ffffff40;  
726    border-radius: 2px;  
727    outline: none;  
728    transform: rotate(-90deg);  
729    transform-origin: center;  
730    margin: 0;  
731    cursor: pointer;  
732    position: absolute;  
733}  
734
735.radio-player.footer .volume-button {  
736    position: relative;  
737    overflow: visible;  
738}  
739
740/* PWA-specific styles */  
741.pwa-mode .radio-player.footer {  
742    padding-bottom: 20px;  
743}  
744
745/* Install Banner Styles */  
746.install-banner {  
747    position: absolute;  
748    top: -80px;  
749    left: 0;  
750    right: 0;  
751    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);  
752    border: 1px solid rgba(255, 255, 255, 0.1);  
753    border-radius: 8px 8px 0 0;  
754    padding: 12px 20px;  
755    animation: slideDown 0.3s ease-out;  
756    z-index: 10001;  
757    backdrop-filter: blur(10px);  
758}  
759
760.install-banner-content {  
761    display: flex;  
762    align-items: center;  
763    gap: 12px;  
764}  
765
766.install-banner-icon {  
767    font-size: 1.5rem;  
768}  
769
770.install-banner-text {  
771    flex: 1;  
772}  
773
774.install-banner-title {  
775    font-weight: 600;  
776    color: #ffffff;  
777    margin-bottom: 2px;  
778    font-size: 14px;  
779}  
780
781.install-banner-description {  
782    font-size: 12px;  
783    color: rgba(255, 255, 255, 0.7);  
784}  
785
786.install-banner-actions {  
787    display: flex;  
788    gap: 8px;  
789}  
790
791.install-banner-button {  
792    padding: 6px 12px;  
793    border: none;  
794    border-radius: 4px;  
795    font-size: 12px;  
796    font-weight: 500;  
797    cursor: pointer;  
798    transition: all 0.2s ease;  
799}  
800
801.install-banner-button.install-now {  
802    background: #ffffff;  
803    color: #000000;  
804}  
805
806.install-banner-button.install-now:hover {  
807    background: #f0f0f0;  
808    transform: translateY(-1px);  
809}  
810
811.install-banner-button.install-later {  
812    background: transparent;  
813    color: rgba(255, 255, 255, 0.7);  
814    border: 1px solid rgba(255, 255, 255, 0.3);  
815}  
816
817.install-banner-button.install-later:hover {  
818    background: rgba(255, 255, 255, 0.1);  
819    color: #ffffff;  
820}  
821
822/* Update Banner Styles */  
823.update-banner {  
824    position: absolute;  
825    top: -60px;  
826    left: 0;  
827    right: 0;  
828    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);  
829    border-radius: 8px 8px 0 0;  
830    padding: 12px 20px;  
831    animation: slideDown 0.3s ease-out;  
832    z-index: 10001;  
833    backdrop-filter: blur(10px);  
834}  
835
836.update-banner-content {  
837    display: flex;  
838    align-items: center;  
839    justify-content: space-between;  
840    gap: 12px;  
841}  
842
843.update-banner-text {  
844    flex: 1;  
845}  
846
847.update-banner-title {  
848    font-weight: 600;  
849    color: #ffffff;  
850    margin-bottom: 2px;  
851    font-size: 14px;  
852}  
853
854.update-banner-description {  
855    font-size: 12px;  
856    color: rgba(255, 255, 255, 0.8);  
857}  
858
859.update-banner-button {  
860    padding: 6px 16px;  
861    border: none;  
862    border-radius: 4px;  
863    font-size: 12px;  
864    font-weight: 500;  
865    cursor: pointer;  
866    background: #ffffff;  
867    color: #1e3a8a;  
868    transition: all 0.2s ease;  
869}  
870
871.update-banner-button:hover {  
872    background: #f0f0f0;  
873    transform: translateY(-1px);  
874}  
875
876/* PWA Toast Notifications */  
877.pwa-toast {  
878    position: fixed;  
879    top: 20px;  
880    right: 20px;  
881    background: rgba(45, 45, 45, 0.95);  
882    border: 1px solid rgba(255, 255, 255, 0.1);  
883    border-radius: 8px;  
884    padding: 12px 16px;  
885    color: #ffffff;  
886    z-index: 10002;  
887    transform: translateX(100%);  
888    transition: transform 0.3s ease;  
889    max-width: 300px;  
890    backdrop-filter: blur(10px);  
891    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  
892}  
893
894.pwa-toast.show {  
895    transform: translateX(0);  
896}  
897
898.pwa-toast-success {  
899    background: linear-gradient(135deg, rgba(6, 95, 70, 0.95) 0%, rgba(16, 185, 129, 0.95) 100%);  
900    border-color: rgba(16, 185, 129, 0.3);  
901}  
902
903.pwa-toast-content {  
904    display: flex;  
905    align-items: center;  
906    gap: 8px;  
907}  
908
909.pwa-toast-content i {  
910    font-size: 1.2rem;  
911}  
912
913/* Install Button Styling */  
914.install-button {  
915    position: relative;  
916    overflow: visible;  
917}  
918
919.install-button::after {  
920    content: '';  
921    position: absolute;  
922    top: -2px;  
923    right: -2px;  
924    width: 8px;  
925    height: 8px;  
926    background: #10b981;  
927    border-radius: 50%;  
928    animation: pulse 2s infinite;  
929}  
930
931/* Loading states */  
932.control-button .fa-spinner {  
933    animation: spin 1s linear infinite;  
934}  
935
936/* Animations */  
937@keyframes pulse {  
938    0%, 100% {  
939        opacity: 1;  
940        transform: scale(1);  
941    }  
942    50% {  
943        opacity: 0.5;  
944        transform: scale(1.2);  
945    }  
946}  
947
948@keyframes slideDown {  
949    from {  
950        transform: translateY(-100%);  
951        opacity: 0;  
952    }  
953    to {  
954        transform: translateY(0);  
955        opacity: 1;  
956    }  
957}  
958
959@keyframes spin {  
960    from {  
961        transform: rotate(0deg);  
962    }  
963    to {  
964        transform: rotate(360deg);  
965    }  
966}  
967
968/* PWA Mode Adjustments */  
969@media (display-mode: standalone) {  
970    body {  
971        padding-top: env(safe-area-inset-top);  
972        padding-bottom: env(safe-area-inset-bottom);  
973    }  
974    
975    .radio-player.footer {  
976        bottom: env(safe-area-inset-bottom);  
977    }  
978}  
979
980/* Mobile optimizations */  
981@media (max-width: 768px) {  
982    .radio-player.footer {  
983        padding: 12px 15px;  
984    }  
985    
986    .radio-player.footer .player-content {  
987        gap: 15px;  
988    }  
989    
990    .radio-player.footer .album-artwork {  
991        width: 50px;  
992        height: 50px;  
993    }  
994    
995    .radio-player.footer .song-name {  
996        font-size: 14px;  
997    }  
998    
999    .radio-player.footer .artist-name {  
1000        font-size: 12px;  
1001    }  
1002    
1003    .radio-player.footer .time-info {  
1004        font-size: 12px;  
1005    }  
1006    
1007    .radio-player.footer .radio-name {  
1008        font-size: 12px;  
1009    }  
1010    
1011    .radio-player.footer .live-text {  
1012        font-size: 10px;  
1013    }  
1014    
1015    .radio-player.footer .controls {  
1016        gap: 10px;  
1017    }  
1018    
1019    .radio-player.footer .control-button {  
1020        width: 32px;  
1021        height: 32px;  
1022        font-size: 0.9rem;  
1023    }  
1024    
1025    .radio-player.footer .control-button.play-button {  
1026        width: calc(32px * 1.3);  
1027        height: calc(32px * 1.3);  
1028        font-size: 1.3rem;  
1029    }  
1030    
1031    .install-banner {  
1032        top: -70px;  
1033        padding: 10px 15px;  
1034    }  
1035    
1036    .install-banner-title {  
1037        font-size: 13px;  
1038    }  
1039    
1040    .install-banner-description {  
1041        font-size: 11px;  
1042    }  
1043    
1044    .install-banner-button {  
1045        padding: 5px 10px;  
1046        font-size: 11px;  
1047    }  
1048    
1049    .pwa-toast {  
1050        top: 10px;  
1051        right: 10px;  
1052        left: 10px;  
1053        max-width: none;  
1054    }  
1055    
1056    .history-modal-content {  
1057        width: 95%;  
1058        padding: 1rem;  
1059        max-height: 85vh;  
1060    }  
1061    
1062    .history-item {  
1063        padding: 0.75rem;  
1064    }  
1065    
1066    .history-artwork {  
1067        width: 40px;  
1068        height: 40px;  
1069    }  
1070}  
1071
1072/* Small mobile devices */  
1073@media (max-width: 480px) {  
1074    .radio-player.footer .player-right {  
1075        display: none;  
1076    }  
1077    
1078    .radio-player.footer .player-content {  
1079        flex-direction: column;  
1080        align-items: stretch;  
1081        gap: 10px;  
1082    }  
1083    
1084    .radio-player.footer .player-center {  
1085        order: -1;  
1086    }  
1087    
1088    .radio-player.footer .controls {  
1089        justify-content: center;  
1090        gap: 20px;  
1091    }  
1092    
1093    .radio-player.footer {  
1094        padding: 10px;  
1095    }  
1096}  
1097
1098/* High DPI displays */  
1099@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {  
1100    .artwork-image {  
1101        image-rendering: -webkit-optimize-contrast;  
1102        image-rendering: crisp-edges;  
1103    }  
1104}  
1105
1106/* Dark theme support */  
1107@media (prefers-color-scheme: dark) {  
1108    .radio-player {  
1109        background: rgba(0, 0, 0, 0.9);  
1110    }  
1111    
1112    .volume-bar-container {  
1113        background: rgba(0, 0, 0, 0.95);  
1114    }  
1115    
1116    .history-modal-content {  
1117        background: rgba(0, 0, 0, 0.98);  
1118    }  
1119}  
1120
1121/* Reduced motion support */  
1122@media (prefers-reduced-motion: reduce) {  
1123    .control-button,  
1124    .volume-slider::-webkit-slider-thumb,  
1125    .volume-slider::-moz-range-thumb,  
1126    .time-bar-progress,  
1127    .pwa-toast,  
1128    .install-banner,  
1129    .update-banner {  
1130        transition: none;  
1131    }  
1132    
1133    .live-indicator,  
1134    .install-button::after {  
1135        animation: none;  
1136    }  
1137}  
1138
1139/* Focus states for accessibility */  
1140.control-button:focus,  
1141.volume-slider:focus,  
1142.history-modal-close:focus,  
1143.install-banner-button:focus,  
1144.update-banner-button:focus {  
1145    outline: 2px solid #ffffff;  
1146    outline-offset: 2px;  
1147}  
1148
1149/* Print styles */  
1150@media print {  
1151    .radio-player {  
1152        display: none;  
1153    }  
1154}

Raw Paste

/* Font imports */  
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');  

/* Reset and base styles */  
* {  
    box-sizing: border-box;  
}  

/* Main radio player styles */  
.radio-player {  
    font-family: 'Poppins', sans-serif;  
    position: relative;  
    width: 100%;  
    height: 15%;  
    background: rgba(0, 0, 0, 0.8);  
    border-radius: 2px;  
    border: 0px solid rgba(0, 0, 0, 0.8);  
    padding: 10px;  
    margin: 10px;  
    box-sizing: border-box;  
    box-shadow: -2.82842712474619px 2.8284271247461903px 15px rgba(0, 0, 0, 0.2);  
    color: #ffffff;  
    overflow: hidden;  
}  

.player-content {  
    display: flex;  
    flex-direction: column;  
    flex: 1;  
}  

.album-artwork {  
    width: 100%;  
    aspect-ratio: 1;  
    position: relative;  
    overflow: hidden;  
}  

.artwork-image {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    border-radius: 4px;  
}  

.artwork-placeholder {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    background: rgba(51, 51, 51, 0.2);  
    color: #ffffff;  
    font-size: 2rem;  
    border-radius: 4px;  
}  

/* Time bar styles */  
.time-bar-container {  
    width: 100%;  
    padding: 5px 0;  
    position: relative;  
}  

.time-bar {  
    width: 100%;  
    height: 4px;  
    background: #ffffff33;  
    border-radius: 2px;  
    overflow: hidden;  
    position: relative;  
}  

.time-bar-progress {  
    height: 100%;  
    background: #ffffff;  
    width: 0;  
    border-radius: 2px;  
    transition: width 0.1s linear;  
}  

.time-info {  
    display: flex;  
    justify-content: space-between;  
    padding: 5px 0;  
    font-size: 12px;  
    color: #ffffff !important;  
    width: 100%;  
}  

.elapsed-time {  
    text-align: left;  
}  

.duration-time {  
    text-align: right;  
}  

/* Station info styles */  
.station-info {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    width: 100%;  
    padding: 10px 0;  
}  

.radio-name {  
    font-size: 12px;  
    font-weight: 600;  
    color: #ffffff !important;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
}  

/* Live indicator styles */  
.live-container {  
    display: flex;  
    align-items: center;  
    gap: 5px;  
}  

.live-indicator {  
    width: 8px;  
    height: 8px;  
    border-radius: 50%;  
    background: #FF0000;  
    animation: pulse 2s infinite;  
}  

.live-text {  
    font-size: 12px;  
    color: #ffffff !important;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
}  

/* Song info styles */  
.song-info {  
    width: 100%;  
    padding: 15px 0;  
    text-align: left;  
}  

.song-name {  
    font-size: 14px;  
    font-weight: bold;  
    margin-bottom: 5px;  
    color: #ffffff !important;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
}  

.artist-name {  
    font-size: 12px;  
    opacity: 0.8;  
    color: #ffffff !important;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
}  

/* Controls styles */  
.controls-container {  
    position: relative;  
    width: 100%;  
}  

.controls {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    gap: 30px;  
    padding: 15px 20px;  
}  

.control-button {  
    background: transparent;  
    border: none;  
    color: #ffffff !important;  
    cursor: pointer;  
    padding: 0.25rem;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 1rem;  
    font-weight: normal;  
    box-shadow: none;  
    border-radius: 0;  
    min-width: auto;  
    width: auto;  
    height: auto;  
    aspect-ratio: auto;  
    text-transform: none;  
    transition: color 0.1s ease, transform 0.2s ease;  
}  

.control-button:hover {  
    color: #ff6b6b !important;  
    transform: scale(1.1);  
}  

.control-button:active {  
    transform: scale(0.95);  
}  

.control-button:disabled {  
    opacity: 0.5;  
    cursor: not-allowed;  
}  

/* Volume control styles */  
.volume-bar-container {  
    position: absolute;  
    bottom: calc(100% + 5px);  
    left: 50%;  
    transform: translate(170%, 15px);  
    background: rgba(0, 0, 0, 0.9);  
    padding: 12px 8px;  
    border-radius: 8px;  
    opacity: 0;  
    visibility: hidden;  
    transition: all 0.2s ease;  
    z-index: 100;  
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  
    cursor: default;  
    height: 100px;  
    width: 32px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    backdrop-filter: blur(10px);  
}  

.volume-bar-container:before {  
    content: '';  
    position: absolute;  
    bottom: -5px;  
    left: 50%;  
    transform: translateX(-50%);  
    width: 0;  
    height: 0;  
    border-left: 5px solid transparent;  
    border-right: 5px solid transparent;  
    border-top: 5px solid rgba(0, 0, 0, 0.9);  
}  

.volume-bar-container.show {  
    opacity: 1;  
    visibility: visible;  
}  

.volume-slider {  
    -webkit-appearance: none !important;  
    appearance: none !important;  
    width: 80px !important;  
    height: 4px !important;  
    background: #ffffff40 !important;  
    border-radius: 2px !important;  
    outline: none !important;  
    transform: rotate(-90deg) !important;  
    transform-origin: center !important;  
    margin: 0 !important;  
    cursor: pointer !important;  
    position: absolute !important;  
    border: none !important;  
    box-shadow: none !important;  
}  

.volume-slider::-webkit-slider-thumb {  
    -webkit-appearance: none !important;  
    appearance: none !important;  
    width: 12px !important;  
    height: 12px !important;  
    background: #ffffff !important;  
    border-radius: 50% !important;  
    cursor: pointer !important;  
    transition: transform 0.2s ease !important;  
    transform-origin: center !important;  
    border: none !important;  
    margin-top: -4px !important;  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;  
}  

.volume-slider::-moz-range-thumb {  
    width: 12px !important;  
    height: 12px !important;  
    background: #ffffff !important;  
    border-radius: 50% !important;  
    cursor: pointer !important;  
    transition: transform 0.2s ease !important;  
    transform-origin: center !important;  
    border: none !important;  
    margin-top: -4px !important;  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;  
}  

.volume-slider::-webkit-slider-runnable-track {  
    height: 4px !important;  
    border-radius: 2px !important;  
    background: inherit !important;  
    border: none !important;  
    box-shadow: none !important;  
}  

.volume-slider::-moz-range-track {  
    height: 4px !important;  
    border-radius: 2px !important;  
    background: inherit !important;  
    border: none !important;  
    box-shadow: none !important;  
}  

.volume-slider::-webkit-slider-thumb:hover {  
    transform: scale(1.2) !important;  
}  

.volume-slider::-moz-range-thumb:hover {  
    transform: scale(1.2) !important;  
}  

.volume-button:hover .volume-bar-container,  
.volume-bar-container:hover {  
    opacity: 1;  
    visibility: visible;  
}  

/* History Modal Styles */  
.history-modal {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    z-index: 9999;  
    display: none;  
}  

.history-modal-overlay {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background: rgba(0, 0, 0, 0.7);  
    z-index: 10000;  
    backdrop-filter: blur(5px);  
}  

.history-modal-content {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    background: rgba(0, 0, 0, 0.95);  
    padding: 1.5rem;  
    border-radius: 12px;  
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.04);  
    z-index: 10001;  
    max-width: 500px;  
    width: 90%;  
    max-height: 80vh;  
    overflow-y: auto;  
    font-family: 'Poppins', sans-serif;  
    scrollbar-width: thin;  
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;  
    border: 1px solid rgba(255, 255, 255, 0.1);  
    backdrop-filter: blur(20px);  
}  

/* WebKit scrollbar styles */  
.history-modal-content::-webkit-scrollbar {  
    width: 6px;  
    height: 6px;  
}  

.history-modal-content::-webkit-scrollbar-track {  
    background: transparent;  
    border-radius: 3px;  
}  

.history-modal-content::-webkit-scrollbar-thumb {  
    background: rgba(255, 255, 255, 0.3);  
    border-radius: 3px;  
    transition: background 0.2s;  
}  

.history-modal-content::-webkit-scrollbar-thumb:hover {  
    background: rgba(255, 255, 255, 0.5);  
}  

.history-modal-title {  
    font-size: 1.125rem;  
    font-weight: 600;  
    color: #ffffff !important;  
    margin: 0 0 1rem 0;  
    padding-right: 1.5rem;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
}  

.history-modal-close {  
    position: absolute;  
    top: 1rem;  
    right: 1rem;  
    background: none;  
    border: none;  
    color: #ffffff !important;  
    cursor: pointer;  
    padding: 0.5rem;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    border-radius: 7px;  
    transition: background 0.2s ease;  
}  

.history-modal-close:hover {  
    background: rgba(255, 255, 255, 0.1);  
}  

.history-list {  
    display: flex;  
    flex-direction: column;  
    gap: 1rem;  
}  

.history-item {  
    display: flex;  
    gap: 1rem;  
    align-items: center;  
    padding: 0.5rem;  
    border-radius: 8px;  
    transition: background-color 0.2s;  
}  

.history-item:hover {  
    background: rgba(255, 255, 255, 0.05);  
}  

.history-artwork {  
    width: 50px;  
    height: 50px;  
    border-radius: 4px;  
    overflow: hidden;  
    flex-shrink: 0;  
    background: rgba(255, 255, 255, 0.1);  
}  

.history-artwork img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  

.history-song-info {  
    display: flex;  
    flex-direction: column;  
    gap: 0.25rem;  
    flex: 1;  
    min-width: 0;  
}  

.history-song-title {  
    font-size: 0.875rem;  
    font-weight: 500;  
    color: #ffffff !important;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    white-space: nowrap;  
}  

.history-artist-name {  
    font-size: 0.75rem;  
    color: #ffffff99 !important;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    white-space: nowrap;  
}  

/* Button styles for different sizes */  
.radio-player .control-button {  
    padding: 5px;  
    width: 36px;  
    height: 36px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 1rem;  
}  

.radio-player .control-button.play-button {  
    width: calc(36px * 1.3);  
    height: calc(36px * 1.3);  
    font-size: 1.5rem;  
}  

.radio-player .control-button .fa-play {  
    margin-left: 2px;  
    font-size: inherit;  
}  

.radio-player .control-button .fa-pause {  
    font-size: inherit;  
}  

/* Footer layout styles */  
.radio-player.footer {  
    position: fixed;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    width: 100%;  
    margin: 0;  
    border-radius: 0;  
    z-index: 9999;  
    padding: 15px 20px;  
    overflow: visible;  
    backdrop-filter: blur(10px);  
    border-top: 1px solid rgba(255, 255, 255, 0.1);  
}  

.radio-player.footer .player-content {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    justify-content: space-between;  
    gap: 20px;  
    margin-bottom: 10px;  
    position: relative;  
    overflow: visible;  
}  

.radio-player.footer .player-left {  
    display: flex;  
    align-items: center;  
    gap: 15px;  
    position: relative;  
    overflow: visible;  
}  

.radio-player.footer .controls {  
    display: flex;  
    align-items: center;  
    gap: 15px;  
    padding: 0;  
    position: relative;  
    overflow: visible;  
}  

.radio-player.footer .player-center {  
    display: flex;  
    align-items: center;  
    gap: 15px;  
    flex: 1;  
    min-width: 0;  
}  

.radio-player.footer .album-artwork {  
    width: 63px;  
    height: 63px;  
    flex-shrink: 0;  
    border-radius: 8px;  
    overflow: hidden;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  
}  

.radio-player.footer .player-info {  
    flex: 1;  
    min-width: 0;  
}  

.radio-player.footer .song-info {  
    padding: 0;  
}  

.radio-player.footer .song-name {  
    font-size: 16px;  
    margin-bottom: 4px;  
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    color: #ffffff !important;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
    font-weight: 600;  
}  

.radio-player.footer .artist-name {  
    font-size: 14px;  
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    opacity: 0.8;  
    color: #ffffff !important;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
}  

.radio-player.footer .player-right {  
    display: flex;  
    align-items: center;  
    gap: 15px;  
}  

.radio-player.footer .time-info {  
    display: flex;  
    align-items: center;  
    max-width: fit-content;  
    font-size: 14px;  
    justify-content: left;  
    color: #ffffff !important;  
    font-weight: 500;  
}  

.radio-player.footer .radio-name {  
    font-size: 14px;  
    max-width: fit-content;  
    color: #ffffff !important;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
}  

.radio-player.footer .live-container {  
    display: flex;  
    align-items: center;  
    gap: 5px;  
    max-width: fit-content;  
    padding: 4px 8px;  
    border-radius: 12px;  
    background: rgba(255, 0, 0, 0.2);  
    border: 1px solid rgba(255, 0, 0, 0.3);  
}  

.radio-player.footer .live-text {  
    font-size: 12px;  
    color: #ffffff !important;  
    letter-spacing: .2px;  
    line-height: 1.5em;  
    word-spacing: 1px;  
    font-weight: 600;  
}  

.radio-player.footer .time-bar-container {  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    height: 4px;  
}  

.radio-player.footer .time-bar {  
    width: 100%;  
    height: 100%;  
    background: #ffffff33;  
    border-radius: 0;  
}  

.radio-player.footer .time-bar-progress {  
    height: 100%;  
    background: linear-gradient(90deg, #ff6b6b 0%, #ffffff 100%);  
}  

.radio-player.footer .volume-bar-container {  
    position: absolute;  
    bottom: calc(100% + 5px);  
    left: 50%;  
    transform: translateX(-40%);  
    background: rgba(0, 0, 0, 0.9);  
    padding: 12px 8px;  
    border-radius: 8px;  
    opacity: 0;  
    visibility: hidden;  
    transition: all 0.2s ease;  
    z-index: 10000;  
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  
    cursor: default;  
    height: 100px;  
    width: 32px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    backdrop-filter: blur(10px);  
    border: 1px solid rgba(255, 255, 255, 0.1);  
}  

.radio-player.footer .volume-bar-container:before {  
    content: '';  
    position: absolute;  
    bottom: -5px;  
    left: 50%;  
    transform: translateX(-50%);  
    width: 0;  
    height: 0;  
    border-left: 5px solid transparent;  
    border-right: 5px solid transparent;  
    border-top: 5px solid rgba(0, 0, 0, 0.9);  
}  

.radio-player.footer .volume-bar-container.show {  
    opacity: 1;  
    visibility: visible;  
}  

.radio-player.footer .volume-slider {  
    -webkit-appearance: none;  
    width: 80px;  
    height: 4px;  
    background: #ffffff40;  
    border-radius: 2px;  
    outline: none;  
    transform: rotate(-90deg);  
    transform-origin: center;  
    margin: 0;  
    cursor: pointer;  
    position: absolute;  
}  

.radio-player.footer .volume-button {  
    position: relative;  
    overflow: visible;  
}  

/* PWA-specific styles */  
.pwa-mode .radio-player.footer {  
    padding-bottom: 20px;  
}  

/* Install Banner Styles */  
.install-banner {  
    position: absolute;  
    top: -80px;  
    left: 0;  
    right: 0;  
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);  
    border: 1px solid rgba(255, 255, 255, 0.1);  
    border-radius: 8px 8px 0 0;  
    padding: 12px 20px;  
    animation: slideDown 0.3s ease-out;  
    z-index: 10001;  
    backdrop-filter: blur(10px);  
}  

.install-banner-content {  
    display: flex;  
    align-items: center;  
    gap: 12px;  
}  

.install-banner-icon {  
    font-size: 1.5rem;  
}  

.install-banner-text {  
    flex: 1;  
}  

.install-banner-title {  
    font-weight: 600;  
    color: #ffffff;  
    margin-bottom: 2px;  
    font-size: 14px;  
}  

.install-banner-description {  
    font-size: 12px;  
    color: rgba(255, 255, 255, 0.7);  
}  

.install-banner-actions {  
    display: flex;  
    gap: 8px;  
}  

.install-banner-button {  
    padding: 6px 12px;  
    border: none;  
    border-radius: 4px;  
    font-size: 12px;  
    font-weight: 500;  
    cursor: pointer;  
    transition: all 0.2s ease;  
}  

.install-banner-button.install-now {  
    background: #ffffff;  
    color: #000000;  
}  

.install-banner-button.install-now:hover {  
    background: #f0f0f0;  
    transform: translateY(-1px);  
}  

.install-banner-button.install-later {  
    background: transparent;  
    color: rgba(255, 255, 255, 0.7);  
    border: 1px solid rgba(255, 255, 255, 0.3);  
}  

.install-banner-button.install-later:hover {  
    background: rgba(255, 255, 255, 0.1);  
    color: #ffffff;  
}  

/* Update Banner Styles */  
.update-banner {  
    position: absolute;  
    top: -60px;  
    left: 0;  
    right: 0;  
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);  
    border-radius: 8px 8px 0 0;  
    padding: 12px 20px;  
    animation: slideDown 0.3s ease-out;  
    z-index: 10001;  
    backdrop-filter: blur(10px);  
}  

.update-banner-content {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    gap: 12px;  
}  

.update-banner-text {  
    flex: 1;  
}  

.update-banner-title {  
    font-weight: 600;  
    color: #ffffff;  
    margin-bottom: 2px;  
    font-size: 14px;  
}  

.update-banner-description {  
    font-size: 12px;  
    color: rgba(255, 255, 255, 0.8);  
}  

.update-banner-button {  
    padding: 6px 16px;  
    border: none;  
    border-radius: 4px;  
    font-size: 12px;  
    font-weight: 500;  
    cursor: pointer;  
    background: #ffffff;  
    color: #1e3a8a;  
    transition: all 0.2s ease;  
}  

.update-banner-button:hover {  
    background: #f0f0f0;  
    transform: translateY(-1px);  
}  

/* PWA Toast Notifications */  
.pwa-toast {  
    position: fixed;  
    top: 20px;  
    right: 20px;  
    background: rgba(45, 45, 45, 0.95);  
    border: 1px solid rgba(255, 255, 255, 0.1);  
    border-radius: 8px;  
    padding: 12px 16px;  
    color: #ffffff;  
    z-index: 10002;  
    transform: translateX(100%);  
    transition: transform 0.3s ease;  
    max-width: 300px;  
    backdrop-filter: blur(10px);  
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  
}  

.pwa-toast.show {  
    transform: translateX(0);  
}  

.pwa-toast-success {  
    background: linear-gradient(135deg, rgba(6, 95, 70, 0.95) 0%, rgba(16, 185, 129, 0.95) 100%);  
    border-color: rgba(16, 185, 129, 0.3);  
}  

.pwa-toast-content {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
}  

.pwa-toast-content i {  
    font-size: 1.2rem;  
}  

/* Install Button Styling */  
.install-button {  
    position: relative;  
    overflow: visible;  
}  

.install-button::after {  
    content: '';  
    position: absolute;  
    top: -2px;  
    right: -2px;  
    width: 8px;  
    height: 8px;  
    background: #10b981;  
    border-radius: 50%;  
    animation: pulse 2s infinite;  
}  

/* Loading states */  
.control-button .fa-spinner {  
    animation: spin 1s linear infinite;  
}  

/* Animations */  
@keyframes pulse {  
    0%, 100% {  
        opacity: 1;  
        transform: scale(1);  
    }  
    50% {  
        opacity: 0.5;  
        transform: scale(1.2);  
    }  
}  

@keyframes slideDown {  
    from {  
        transform: translateY(-100%);  
        opacity: 0;  
    }  
    to {  
        transform: translateY(0);  
        opacity: 1;  
    }  
}  

@keyframes spin {  
    from {  
        transform: rotate(0deg);  
    }  
    to {  
        transform: rotate(360deg);  
    }  
}  

/* PWA Mode Adjustments */  
@media (display-mode: standalone) {  
    body {  
        padding-top: env(safe-area-inset-top);  
        padding-bottom: env(safe-area-inset-bottom);  
    }  
    
    .radio-player.footer {  
        bottom: env(safe-area-inset-bottom);  
    }  
}  

/* Mobile optimizations */  
@media (max-width: 768px) {  
    .radio-player.footer {  
        padding: 12px 15px;  
    }  
    
    .radio-player.footer .player-content {  
        gap: 15px;  
    }  
    
    .radio-player.footer .album-artwork {  
        width: 50px;  
        height: 50px;  
    }  
    
    .radio-player.footer .song-name {  
        font-size: 14px;  
    }  
    
    .radio-player.footer .artist-name {  
        font-size: 12px;  
    }  
    
    .radio-player.footer .time-info {  
        font-size: 12px;  
    }  
    
    .radio-player.footer .radio-name {  
        font-size: 12px;  
    }  
    
    .radio-player.footer .live-text {  
        font-size: 10px;  
    }  
    
    .radio-player.footer .controls {  
        gap: 10px;  
    }  
    
    .radio-player.footer .control-button {  
        width: 32px;  
        height: 32px;  
        font-size: 0.9rem;  
    }  
    
    .radio-player.footer .control-button.play-button {  
        width: calc(32px * 1.3);  
        height: calc(32px * 1.3);  
        font-size: 1.3rem;  
    }  
    
    .install-banner {  
        top: -70px;  
        padding: 10px 15px;  
    }  
    
    .install-banner-title {  
        font-size: 13px;  
    }  
    
    .install-banner-description {  
        font-size: 11px;  
    }  
    
    .install-banner-button {  
        padding: 5px 10px;  
        font-size: 11px;  
    }  
    
    .pwa-toast {  
        top: 10px;  
        right: 10px;  
        left: 10px;  
        max-width: none;  
    }  
    
    .history-modal-content {  
        width: 95%;  
        padding: 1rem;  
        max-height: 85vh;  
    }  
    
    .history-item {  
        padding: 0.75rem;  
    }  
    
    .history-artwork {  
        width: 40px;  
        height: 40px;  
    }  
}  

/* Small mobile devices */  
@media (max-width: 480px) {  
    .radio-player.footer .player-right {  
        display: none;  
    }  
    
    .radio-player.footer .player-content {  
        flex-direction: column;  
        align-items: stretch;  
        gap: 10px;  
    }  
    
    .radio-player.footer .player-center {  
        order: -1;  
    }  
    
    .radio-player.footer .controls {  
        justify-content: center;  
        gap: 20px;  
    }  
    
    .radio-player.footer {  
        padding: 10px;  
    }  
}  

/* High DPI displays */  
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {  
    .artwork-image {  
        image-rendering: -webkit-optimize-contrast;  
        image-rendering: crisp-edges;  
    }  
}  

/* Dark theme support */  
@media (prefers-color-scheme: dark) {  
    .radio-player {  
        background: rgba(0, 0, 0, 0.9);  
    }  
    
    .volume-bar-container {  
        background: rgba(0, 0, 0, 0.95);  
    }  
    
    .history-modal-content {  
        background: rgba(0, 0, 0, 0.98);  
    }  
}  

/* Reduced motion support */  
@media (prefers-reduced-motion: reduce) {  
    .control-button,  
    .volume-slider::-webkit-slider-thumb,  
    .volume-slider::-moz-range-thumb,  
    .time-bar-progress,  
    .pwa-toast,  
    .install-banner,  
    .update-banner {  
        transition: none;  
    }  
    
    .live-indicator,  
    .install-button::after {  
        animation: none;  
    }  
}  

/* Focus states for accessibility */  
.control-button:focus,  
.volume-slider:focus,  
.history-modal-close:focus,  
.install-banner-button:focus,  
.update-banner-button:focus {  
    outline: 2px solid #ffffff;  
    outline-offset: 2px;  
}  

/* Print styles */  
@media print {  
    .radio-player {  
        display: none;  
    }  
}

Fork Edit