diff --git a/static/asteroid.css b/static/asteroid.css index a914007..1f03f15 100644 --- a/static/asteroid.css +++ b/static/asteroid.css @@ -270,6 +270,34 @@ body .audio-player{ 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{ font-size: 3em; margin-right: 20px; diff --git a/static/asteroid.lass b/static/asteroid.lass index 8afab3b..f828d0f 100644 --- a/static/asteroid.lass +++ b/static/asteroid.lass @@ -218,6 +218,34 @@ (.audio-player :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 :font-size "3em" :margin-right "20px"