Jump to content


Photo

Whats the CSS For Changing the play interface colors?

color play resume

  • Please log in to reply
8 replies to this topic

#1 zastin17 OFFLINE  

zastin17

    Newbie

  • Members
  • 5 posts
  • Local time: 03:03 PM

Posted 21 June 2016 - 02:13 AM

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?



#2 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19204 posts
  • Local time: 03:03 PM
  • LocationWashington State

Posted 21 June 2016 - 03:21 AM

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/co...ights/?p=313099


Edited by Happy2Play, 21 June 2016 - 03:36 AM.


#3 Oxide OFFLINE  

Oxide

    Advanced Member

  • Alpha Testers
  • 194 posts
  • Local time: 12:03 AM
  • LocationDarkest Africa

Posted 02 July 2016 - 11:24 AM

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, 02 July 2016 - 11:24 AM.


#4 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 190 posts
  • Local time: 06:03 PM
  • LocationCanada

Posted 14 July 2016 - 03:24 PM

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



#5 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19204 posts
  • Local time: 03:03 PM
  • LocationWashington State

Posted 14 July 2016 - 04:36 PM

@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, 14 July 2016 - 04:44 PM.

  • Oxide and Ben Z like this

#6 CarterFLIX OFFLINE  

CarterFLIX

    Newbie

  • Members
  • 4 posts
  • Local time: 06:03 PM

Posted 20 February 2017 - 12:55 AM

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



#7 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19204 posts
  • Local time: 03:03 PM
  • LocationWashington State

Posted 20 February 2017 - 05:42 AM

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.


  • CarterFLIX likes this

#8 CarterFLIX OFFLINE  

CarterFLIX

    Newbie

  • Members
  • 4 posts
  • Local time: 06:03 PM

Posted 06 April 2017 - 09:24 PM

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

Thanks friend!



#9 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19204 posts
  • Local time: 03:03 PM
  • LocationWashington State

Posted 25 November 2018 - 09:10 PM

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, 04 December 2018 - 03:06 PM.

  • Lyfesaver likes this





Also tagged with one or more of these keywords: color, play, resume

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users