fix: styling of audio player on chrome browsers

This commit is contained in:
Luis Pereira 2025-11-13 22:44:11 +00:00 committed by Brian O'Reilly
parent 8b0e494da9
commit 355655e8eb
2 changed files with 56 additions and 0 deletions

View File

@ -270,6 +270,34 @@ body .audio-player{
text-align: center; text-align: center;
} }
body audio::-webkit-media-controls-panel{
background-color: #1a1a1a;
}
body audio::-webkit-media-controls-current-time-display,
body audio::-webkit-media-controls-time-remaining-display{
color: #fff;
}
body audio::-webkit-media-controls-enclosure{
border-radius: 0;
}
body audio::-webkit-media-controls-mute-button,
body audio::-webkit-media-controls-play-button,
body audio::-webkit-media-controls-volume-slider,
body audio::-webkit-media-controls-timeline,
body audio::-webkit-media-controls-toggle-closed-captions-button,
body audio::-webkit-media-controls-fullscreen-button,
body audio::-webkit-media-controls-timeline,
body audio::-webkit-media-controls-overlay-enclosure{
-moz-filter: invert(1);
-o-filter: invert(1);
-webkit-filter: invert(1);
-ms-filter: invert(1);
filter: invert(1);
}
body .track-art{ body .track-art{
font-size: 3em; font-size: 3em;
margin-right: 20px; margin-right: 20px;

View File

@ -218,6 +218,34 @@
(.audio-player (.audio-player
:text-align center) :text-align center)
((:and audio |::-webkit-media-controls-panel|)
:background-color "#1a1a1a")
;; ((:and audio (:or |::-webkit-media-controls-mute-button|
;; |::-webkit-media-controls-play-button|
;; |::-webkit-media-controls-current-time-display|
;; |::-webkit-media-controls-time-remaining-display|
;; ))
;; :height "20px"
;; :line-height "20px")
((:and audio (:or |::-webkit-media-controls-current-time-display|
|::-webkit-media-controls-time-remaining-display|))
:color "#fff")
((:and audio |::-webkit-media-controls-enclosure|)
:border-radius 0)
((:and audio (:or |::-webkit-media-controls-mute-button|
|::-webkit-media-controls-play-button|
|::-webkit-media-controls-volume-slider|
|::-webkit-media-controls-timeline|
|::-webkit-media-controls-toggle-closed-captions-button|
|::-webkit-media-controls-fullscreen-button|
|::-webkit-media-controls-timeline|
|::-webkit-media-controls-overlay-enclosure|))
:filter "invert(1)")
(.track-art (.track-art
:font-size "3em" :font-size "3em"
:margin-right "20px" :margin-right "20px"