Change volume slider color

[cochize1 40]

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?

[cochize1 40]

@Happy2Play @chef please help, I can't seem to target that slider

[Happy2Play 8281]

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.

[cochize1 40]

I must have missed that topic, will take a look and play around, thanks

[cochize1 40]

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;}

 

[arrbee99 1559]

Am liking the multi colour effect. Wish I was so adventurous

[cochize1 40]

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.

 

[arrbee99 1559]

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.

[cochize1 40]

90% of my code is of his doing, as I once called him, he's a css-Yoda