cochize1 41 Posted January 25, 2021 Share Posted January 25, 2021 I was trying to do it by myself but failed. How do I change the volume slider, bubble and background color? And optionally how do I change the text showing the volume to be different color then the text showing the current position of the movie? Link to comment Share on other sites More sharing options...
cochize1 41 Posted January 27, 2021 Author Share Posted January 27, 2021 @Happy2Play @chef please help, I can't seem to target that slider Link to comment Share on other sites More sharing options...
Solution Happy2Play 8296 Posted January 27, 2021 Solution Share Posted January 27, 2021 Have you seen this? But to make them different you target each /* Google Now Playing Bar & Now Playing Page */ div.videoOsdVolumeControls .emby-slider-background-lower, div.videoOsdVolumeControls .emby-slider::-webkit-slider-thumb { background: purple !important; } div.videoOsdVolumeControls div.sliderBubble {background: transparent; color: green;} div.videoOsdPositionContainer .emby-slider-background-lower, div.videoOsdPositionContainer .emby-slider::-webkit-slider-thumb { background: orange !important; } div.videoOsdPositionContainer div.sliderBubble {background: transparent; color: yellow;} You will have to add FF. 1 Link to comment Share on other sites More sharing options...
cochize1 41 Posted January 27, 2021 Author Share Posted January 27, 2021 I must have missed that topic, will take a look and play around, thanks Link to comment Share on other sites More sharing options...
cochize1 41 Posted January 29, 2021 Author Share Posted January 29, 2021 so I played around and finally got to where I wanted, I am pasting my bit of code redesinging the OSD, maybe somenone will find it helpfull: /*change OSD button colors*/ button.videoOsd-btnPause {color: #52b54b} button.videoOsd-btnPause:focus, button.videoOsd-btnPause:active {color: #52b54b; background-color: rgba(82, 181, 75, 0.2);} button.btnOsdFastForward {color: #D4AF37} button.btnOsdFastForward:focus, button.btnOsdFastForward:active {color: #D4AF37; background-color: rgba(212, 175, 55, 0.2);} button.btnRewind {color: #D4AF37} button.btnRewind:focus, button.btnRewind:active {color: #D4AF37; background-color: rgba(212, 175, 55, 0.2);} div.videoOsdVolumeControls {color: #1D87D0} div.videoOsdVolumeControls:focus, div.videoOsdVolumeControls:active {color: #1D87D0; background-color: rgba(29, 135, 208, 0.2);} button.buttonMute {color: #1D87D0} button.buttonMute:focus, button.buttonMute:active {color: #1D87D0; background-color: rgba(29, 135, 208, 0.2);} button.btnNextTrack {color: #E0B0E8} button.btnNextTrack:focus, button.btnNextTrack:active {color: #E0B0E8; background-color: rgba(224, 176, 232, 0.2);} button.btnRecord {color: #ee998c} button.btnRecord:focus, button.btnRecord:active {color: #ff130f; background-color: rgba(255, 19, 15, 0.2);} i.md-icon.btnPinNavDrawerIcon {color: #52b54b} button.btnAudio {color: #52b54b} button.btnAudio:focus, button.btnAudio:active {color: #52b54b; background-color: rgba(82, 181, 75, 0.2);} button.btnSubtitles {color: #52b54b} button.btnSubtitles:focus, button.btnSubtitles:active {color: #52b54b; background-color: rgba(82, 181, 75, 0.2);} /*Change OSD slider colors*/ div.videoOsdVolumeControls .emby-slider-background-lower, div.videoOsdVolumeControls .emby-slider::-webkit-slider-thumb { background: #1D87D0 !important; } div.videoOsdPositionContainer .emby-slider-background-lower, div.videoOsdPositionContainer .emby-slider::-webkit-slider-thumb { background: #52b54b !important; } div.videoOsdVolumeControls .emby-slider-background-lower, div.videoOsdVolumeControls .emby-slider::-moz-range-progress { background: #1D87D0 !important; } div.videoOsdPositionContainer .emby-slider-background-lower, div.videoOsdPositionContainer .emby-slider::-moz-range-progress { background: #52b54b !important; } div.videoOsdVolumeControls .emby-slider-background-lower, div.videoOsdVolumeControls .emby-slider::-moz-range-thumb { background: #1D87D0 !important; } div.videoOsdPositionContainer .emby-slider-background-lower, div.videoOsdPositionContainer .emby-slider::-moz-range-thumb { background: #52b54b !important; } /*Change volume progress bar*/ div.videoOsdVolumeSliderWrapper2 {background-color: rgba(0, 0, 0, 0.8)!important; } div.videoOsdVolumeControls .emby-slider-background {background-color: rgba(29, 135, 208, 0.2);} /*Change position progress bar color*/ div.videoOsdPositionContainer .emby-slider-background {background-color: rgba(212, 175, 55, 0.2);} div.videoOsdPositionContainer .emby-slider-background-upper {background-color: rgba(82, 181, 75, 0.4);} div.videoOsdPositionContainer div.sliderBubble {background: transparent!important; color: #ffffff; -webkit-text-stroke: 1px #52b54b; text-shadow: 0px 5px 5px #52b54b; } div.videoOsdVolumeControls div.sliderBubble {background: transparent!important; color: #ffffff; -webkit-text-stroke: 1px #1D87D0; text-shadow: 0px 5px 5px #1D87D0; } /*Change OSD title size*/ h2.videoOsdParentTitle { font-size: 200%; } h3.videoOsdTitle { font-size: 200%; } div.videoOsdMediaInfo { font-size: 200%; } /*change OSD volume upper icon*/ div.iconOsd.volumeOsd {color: #1D87D0} div.iconOsd .iconOsdProgressInner {background-color: #1D87D0!important;} 1 Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted January 30, 2021 Share Posted January 30, 2021 Am liking the multi colour effect. Wish I was so adventurous Link to comment Share on other sites More sharing options...
cochize1 41 Posted January 30, 2021 Author Share Posted January 30, 2021 If by 'adventurous' you mean 'with too much time on your hands' than I wish that for you too. I mostly like the small detail of changing the background of the slider and buffer color, though probably noone will notice. Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted January 30, 2021 Share Posted January 30, 2021 The too much time on your (well my) hands bit is true. But I will admit if someone had said they were going to have all these icons different colours I would have said (how can I put this politely - yuk), but you've picked a really nice combination. Personally, I've just changed all the green bits to a kind of powder blue, and that was mostly with HappyPlays help. Link to comment Share on other sites More sharing options...
cochize1 41 Posted January 30, 2021 Author Share Posted January 30, 2021 90% of my code is of his doing, as I once called him, he's a css-Yoda 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now