Jump to content

Whats the CSS For Changing the play interface colors?


zastin17

Recommended Posts

zastin17

So I have bean messing around the the custom css function and i'm wondering what the code is for changing the play interface color from green to whatever color. Like the scrubber or the volume bar?

Link to comment
Share on other sites

Happy2Play

Can you provide a specific example (screenshot) of what you would like to change.  There are a few topics that have full themes like this one.

 

http://emby.media/community/index.php?/topic/28743-dark-theme-and-colored-highlights/?p=313099

Edited by Happy2Play
Link to comment
Share on other sites

  • 2 weeks later...
Oxide

I presume it's the green in the play bar

 

5777db026e971_PlayBar.jpg

 

I've also been trying to figure this out, thought this may work but no luck, possibly as I'm on the latest alpha?

 

Black progressbar for Darker Theme thanks to @@rthomas

.nowPlayingBar {
    border-top: 1px solid #3b3b3b !important;
	color: #e8e8e8 !important;
    background-color: rgba(0,0,0,.90) !important;
    /*box-shadow: 0 0 8px rgba(232,232,232,.4);*/
}
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
    color: #e8e8e8;
}
.nowPlayingBarText {
    font-size: 15px;
}
.nowPlayingBarPositionSlider #progressContainer {
    background-color: transparent !important;
}

56ec39e29b998_progressbar.png

 
Edited by Oxide
Link to comment
Share on other sites

  • 2 weeks later...
Ben Z

Did you find a solution for this? I can only do this

5787e668876f5_nowplayingbar.png

.mdl-slider__background-lower, .sliderBubble {background: #E81123 !important;}

I no longer know how to change the ball slider color. If anyone know, it would be appreciated.

 

I'm on 3.0.5985

Link to comment
Share on other sites

Happy2Play

@@Ben Z It is browser prevalent, each browser has a different setting.  Firefox actually pointed me in the right direction (Emby-Server\System\dashboard-ui\bower_components\emby-webcomponents\emby-slider\emby-slider.css)

 

 

.mdl-slider__background-lower, .sliderBubble, .mdl-slider::-webkit-slider-thumb {background:#E81123 !important;} /*Chrome*/

.mdl-slider::-moz-range-progress, .mdl-slider:active::-moz-range-thumb, .mdl-slider::-moz-range-thumb, .sliderBubble {background: #E81123 !important;} /*FireFox*/
Edited by Happy2Play
  • Like 2
Link to comment
Share on other sites

  • 7 months later...
CarterFLIX

Hope this helps someone. From dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css

:root .mdl-slider,_:-ms-input-placeholder{-ms-appearance:none;height:32px;margin:0}.mdl-slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.15em;background:0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0;padding:1em 0;color:#B9090B;-webkit-align-self:center;align-self:center;z-index:1;cursor:pointer;margin:0;-webkit-tap-highlight-color:transparent;display:block}.mdl-slider::-moz-focus-outer{border:0}.mdl-slider::-ms-tooltip{display:none}.mdl-slider::-webkit-slider-runnable-track{background:0 0}.mdl-slider::-moz-range-track{background:#444;border:none}.mdl-slider::-moz-range-progress{background:#B9090B}.mdl-slider::-ms-track{background:0 0;color:transparent;height:.15em;width:100%;border:none}.mdl-slider::-ms-fill-lower{padding:0;background:linear-gradient(to right,transparent,transparent 16px,#B9090B 16px,#B9090B 0)}.mdl-slider::-ms-fill-upper{padding:0;background:linear-gradient(to left,transparent,transparent 16px,#444 16px,#444 0)}.mdl-slider::-webkit-slider-thumb{-webkit-appearance:none;width:1em;height:1em;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:50%;border-radius:50%;background:#B9090B;border:none;-webkit-transition:-webkit-transform .18s cubic-bezier(.4,0,.2,1),border .18s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .18s cubic-bezier(.4,0,.2,1),background .28s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1),border .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1),background .28s cubic-bezier(.4,0,.2,1)}.slider-no-webkit-thumb::-webkit-slider-thumb{opacity:0!important}.mdl-slider::-moz-range-thumb{-moz-appearance:none;width:1em;height:1em;box-sizing:border-box;border-radius:50%;background:#B9090B;border:none}.mdl-slider:active::-webkit-slider-thumb{background:#B9090B;-webkit-transform:scale(1.5);transform:scale(1.5)}.mdl-slider:active::-moz-range-thumb{background:#B9090B;transform:scale(1.5)}.mdl-slider:focus::-webkit-slider-thumb{-webkit-box-shadow:0 0 0 10px rgba(82,181,75,.26);box-shadow:0 0 0 10px rgba(82,181,75,.26)}.mdl-slider:focus::-moz-range-thumb{box-shadow:0 0 0 10px rgba(82,181,75,.26)}.mdl-slider::-ms-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#B9090B}.mdl-slider[disabled]::-ms-thumb{background:gray}.mdl-slider:disabled::-webkit-slider-thumb,.mdl-slider:disabled:active::-webkit-slider-thumb,.mdl-slider:disabled:focus::-webkit-slider-thumb{-webkit-transform:scale(.667);transform:scale(.667);background:rgba(0,0,0,.26)}.mdl-slider:disabled::-moz-range-thumb,.mdl-slider:disabled:active::-moz-range-thumb,.mdl-slider:disabled:focus::-moz-range-thumb{transform:scale(.667);background:rgba(0,0,0,.26)}.mdl-slider:disabled+.mdl-slider__background-flex>.mdl-slider__background-lower{background-color:#444;left:-6px}.mdl-slider:disabled+.mdl-slider__background-flex>.mdl-slider__background-upper{left:6px}.mdl-slider:disabled::-ms-fill-lower{margin-right:6px;background:linear-gradient(to right,transparent,transparent 25px,rgba(30,30,30,.7) 25px,rgba(30,30,30,.7) 0)}.mdl-slider__background-flex,.mdl-slider__container{background:0 0;display:-webkit-flex;display:-webkit-box}.mdl-slider:disabled::-ms-fill-upper{margin-left:6px}.mdl-slider__ie-container{height:18px;overflow:visible;border:none;margin:none;padding:none}.mdl-slider__container{height:18px;position:relative;display:flex;-webkit-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.mdl-slider__background-flex{position:absolute;height:.15em;width:100%;top:50%;left:0;display:flex;overflow:hidden;border:0;padding:0;-webkit-transform:translate(0,-1px);transform:translate(0,-1px)}.mdl-slider__background-lower{background:#B9090B;-webkit-flex:0;-webkit-box-flex:0;flex:0;position:relative;border:0;padding:0}.mdl-slider__background-upper{background:#444;-webkit-flex:0;-webkit-box-flex:0;flex:0;position:relative;border:0;padding:0;-webkit-transition:left .18s cubic-bezier(.4,0,.2,1);-o-transition:left .18s cubic-bezier(.4,0,.2,1);transition:left .18s cubic-bezier(.4,0,.2,1)}.sliderBubble{position:absolute;top:0;left:0;-webkit-transform:translate3d(-48%,-120%,0);transform:translate3d(-48%,-120%,0);background:#282828;color:#fff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.sliderBubbleText{margin:0;padding:.5em .75em}

58aa76c09b224_Slider_CSS.jpg

Link to comment
Share on other sites

Happy2Play

Hope this helps someone. From dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css

:root .mdl-slider,_:-ms-input-placeholder{-ms-appearance:none;height:32px;margin:0}.mdl-slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.15em;background:0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0;padding:1em 0;color:#B9090B;-webkit-align-self:center;align-self:center;z-index:1;cursor:pointer;margin:0;-webkit-tap-highlight-color:transparent;display:block}.mdl-slider::-moz-focus-outer{border:0}.mdl-slider::-ms-tooltip{display:none}.mdl-slider::-webkit-slider-runnable-track{background:0 0}.mdl-slider::-moz-range-track{background:#444;border:none}.mdl-slider::-moz-range-progress{background:#B9090B}.mdl-slider::-ms-track{background:0 0;color:transparent;height:.15em;width:100%;border:none}.mdl-slider::-ms-fill-lower{padding:0;background:linear-gradient(to right,transparent,transparent 16px,#B9090B 16px,#B9090B 0)}.mdl-slider::-ms-fill-upper{padding:0;background:linear-gradient(to left,transparent,transparent 16px,#444 16px,#444 0)}.mdl-slider::-webkit-slider-thumb{-webkit-appearance:none;width:1em;height:1em;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:50%;border-radius:50%;background:#B9090B;border:none;-webkit-transition:-webkit-transform .18s cubic-bezier(.4,0,.2,1),border .18s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .18s cubic-bezier(.4,0,.2,1),background .28s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1),border .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1),background .28s cubic-bezier(.4,0,.2,1)}.slider-no-webkit-thumb::-webkit-slider-thumb{opacity:0!important}.mdl-slider::-moz-range-thumb{-moz-appearance:none;width:1em;height:1em;box-sizing:border-box;border-radius:50%;background:#B9090B;border:none}.mdl-slider:active::-webkit-slider-thumb{background:#B9090B;-webkit-transform:scale(1.5);transform:scale(1.5)}.mdl-slider:active::-moz-range-thumb{background:#B9090B;transform:scale(1.5)}.mdl-slider:focus::-webkit-slider-thumb{-webkit-box-shadow:0 0 0 10px rgba(82,181,75,.26);box-shadow:0 0 0 10px rgba(82,181,75,.26)}.mdl-slider:focus::-moz-range-thumb{box-shadow:0 0 0 10px rgba(82,181,75,.26)}.mdl-slider::-ms-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#B9090B}.mdl-slider[disabled]::-ms-thumb{background:gray}.mdl-slider:disabled::-webkit-slider-thumb,.mdl-slider:disabled:active::-webkit-slider-thumb,.mdl-slider:disabled:focus::-webkit-slider-thumb{-webkit-transform:scale(.667);transform:scale(.667);background:rgba(0,0,0,.26)}.mdl-slider:disabled::-moz-range-thumb,.mdl-slider:disabled:active::-moz-range-thumb,.mdl-slider:disabled:focus::-moz-range-thumb{transform:scale(.667);background:rgba(0,0,0,.26)}.mdl-slider:disabled+.mdl-slider__background-flex>.mdl-slider__background-lower{background-color:#444;left:-6px}.mdl-slider:disabled+.mdl-slider__background-flex>.mdl-slider__background-upper{left:6px}.mdl-slider:disabled::-ms-fill-lower{margin-right:6px;background:linear-gradient(to right,transparent,transparent 25px,rgba(30,30,30,.7) 25px,rgba(30,30,30,.7) 0)}.mdl-slider__background-flex,.mdl-slider__container{background:0 0;display:-webkit-flex;display:-webkit-box}.mdl-slider:disabled::-ms-fill-upper{margin-left:6px}.mdl-slider__ie-container{height:18px;overflow:visible;border:none;margin:none;padding:none}.mdl-slider__container{height:18px;position:relative;display:flex;-webkit-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.mdl-slider__background-flex{position:absolute;height:.15em;width:100%;top:50%;left:0;display:flex;overflow:hidden;border:0;padding:0;-webkit-transform:translate(0,-1px);transform:translate(0,-1px)}.mdl-slider__background-lower{background:#B9090B;-webkit-flex:0;-webkit-box-flex:0;flex:0;position:relative;border:0;padding:0}.mdl-slider__background-upper{background:#444;-webkit-flex:0;-webkit-box-flex:0;flex:0;position:relative;border:0;padding:0;-webkit-transition:left .18s cubic-bezier(.4,0,.2,1);-o-transition:left .18s cubic-bezier(.4,0,.2,1);transition:left .18s cubic-bezier(.4,0,.2,1)}.sliderBubble{position:absolute;top:0;left:0;-webkit-transform:translate3d(-48%,-120%,0);transform:translate3d(-48%,-120%,0);background:#282828;color:#fff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.sliderBubbleText{margin:0;padding:.5em .75em}

58aa76c09b224_Slider_CSS.jpg

 

You should modify via Custom CSS box and not that actual files as they are reset with every install.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
CarterFLIX

You should modify via Custom CSS box and not that actual files as they are reset with every install.

Thanks friend!

Link to comment
Share on other sites

  • 1 year later...
Happy2Play

Ben Z It is browser prevalent, each browser has a different setting. Firefox actually pointed me in the right direction (Emby-Server\System\dashboard-ui\bower_components\emby-webcomponents\emby-slider\emby-slider.css)

 

 

.mdl-slider__background-lower, .sliderBubble, .mdl-slider::-webkit-slider-thumb {background:#E81123 !important;} /*Chrome*/

.mdl-slider::-moz-range-progress, .mdl-slider:active::-moz-range-thumb, .mdl-slider::-moz-range-thumb, .sliderBubble {background: #E81123 !important;} /*FireFox*/

This changed in 3.6.x.x beta

 

.emby-slider-background-lower, .sliderBubble, .emby-slider::-webkit-slider-thumb {background:#E81123 !important;} /*Chrome*/

.emby-slider::-moz-range-thumb, .mdl-slider:active::-moz-range-thumb, .emby-slider::-moz-range-progress, .sliderBubble {background: #E81123 !important;} /*FireFox*/
Edited by Happy2Play
  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...