Emby Dark Themes in different accent colors

[Guest]

Remove Posters Play Button

 

/* Hide Play button on general posters */

.cardOverlayButton {display:none !important;}

 

Edited April 14, 2017 by CarlosLima

[Guest]

Move the subtitles up  (Tested Chrome only)

 

/* Move the subtitles up */

::cue {font-size: 125%;}

video::-webkit-media-text-track-container {bottom:50px;}

video::-moz-media-text-track-container {bottom:50px;}

 

[Luke 40122]

Don't forget to test mobile too.

[Guest]

Don't forget to test mobile too.

Okay, tks.

[arrbee99 1712]

Just updated from 3.2.12.0 to 3.2.12.5 and these stopped working properly -

 

This one, I think, makes the vertical alpha picker bigger. It still does that but it seems to have moved up so it starts at the top and now the first few letters can be obscured (until I move the top menu out of the way) - can it be lowered or vertically centred ?

 

.alphaPicker-vertical {

    font-size: 150% !important;

}

 

 

 

This makes the My Media icons bigger to match the Continue Watching etc sections, but doesn't work any more

 

/* --- Increase Home Page folder size --- */

div.homePageSection.section0 .smallBackdropCard-scalable {

  width: 20%; }

 

 

div.homePageSection.section2 .card {

  width: 20.0%; }

 

 

If anyone has any ideas please ?

[Happy2Play 9452]

Just updated from 3.2.12.0 to 3.2.12.5 and these stopped working properly -

 

This one, I think, makes the vertical alpha picker bigger. It still does that but it seems to have moved up so it starts at the top and now the first few letters can be obscured (until I move the top menu out of the way) - can it be lowered or vertically centred ?

 

.alphaPicker-vertical {

    font-size: 150% !important;

}

 

 

 

This makes the My Media icons bigger to match the Continue Watching etc sections, but doesn't work any more

 

/* --- Increase Home Page folder size --- */

div.homePageSection.section0 .smallBackdropCard-scalable {

  width: 20%; }

 

 

div.homePageSection.section2 .card {

  width: 20.0%; }

 

 

If anyone has any ideas please ?

 

For Alpha picker adjust here

.alphabetPicker {
    bottom: 70px !important;
}

My Media cards, I use this.

/* My Media Image Size */
.smallBackdropCard {width: 16.5% !important;}

[arrbee99 1712]

Thanks Happy2Play, the My Media cards thing worked, the Alpha Picker didn't seem to do anything. My CSS stuff looks like this...

 

 

Anyway, dropping the font size from 150% to 125% makes everything fit. Don't know what changed, maybe the default letters were more spread out or increased in size or something. One of the mysteries of the age no doubt...

[Happy2Play 9452]

Thanks Happy2Play, the My Media cards thing worked, the Alpha Picker didn't seem to do anything. My CSS stuff looks like this...

 

 

Anyway, dropping the font size from 150% to 125% makes everything fit. Don't know what changed, maybe the default letters were more spread out or increased in size or something. One of the mysteries of the age no doubt...

 

Did you try lowering the 70px?  I would try 0px then work your way up.

[arrbee99 1712]

That's a thought, I'll give it a go.

[Ben Z 86]

Just to let you know that I just did a big update.

 

I cleaned up everything (deleting obsolete lines, etc). About 200 useless lines has been removed. It's not a big deal for you as users but I slightly changed the theme also. It might need additional overlooked fixes.

 

There is ONE thing that I still have never been able to fix.

 

That kind of circle focus active thing from the slider thumb.

 

 

I CAN'T find how to change to the proper accent color.

[Happy2Play 9452]

Just to let you know that I just did a big update.

 

I cleaned up everything (deleting obsolete lines, etc). About 200 useless lines has been removed. It's not a big deal for you as users but I slightly changed the theme also. It might need additional overlooked fixes.

 

There is ONE thing that I still have never been able to fix.

 

That kind of circle focus active thing from the slider thumb.

 

 

I CAN'T find how to change to the proper accent color.

 

Have you looked at the "Emby-Slider.css"?  New code works in Chrome but issues in FF and Edge.  Will look at it more later today but here is what I got so far.

 

 

You will need to figure out the accents you want or hide focus altogether.

 

/*Firefox Focus*/
.mdl-slider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 10px rgba(153,204,255,.26) !important; 
}
/*Chrome Focus*/
.mdl-slider:focus::-webkit-slider-thumb{-webkit-box-shadow:0 0 0 10px rgba(153,204,255,.26); box-shadow:0 0 0 10px rgba(153,204,255,.26) !important;
}
/*FireFox*/
.mdl-slider::-moz-range-thumb {
    background: #4285F4 !important;
}
.mdl-slider::-moz-range-progress {
    background: #4285F4 !important;
}

Edited April 30, 2017 by Happy2Play

[PenkethBoy 2066]

One thing i noticed is that the three dot menu has lost the accent colour - only showing as white for me

[Ben Z 86]

One thing i noticed is that the three dot menu has lost the accent colour - only showing as white for me

 

Do you mean the hamburger button (3 lines)? It's been like that for quite a while. Now, the gear button (dashboard button) and the home button are the only ones accented. I feel it's cleaner, isn't it?

 

Add this if you really want it accented :

button.headerButton.mainDrawerButton.barsMenuButton.headerButtonLeft.paper-icon-button-light {
  color: #E81123 !important; }

@@Happy2Play

 

As always, you're the best. Thanks!

Edited April 30, 2017 by Ben Z

[PenkethBoy 2066]

Sorry was not clear

 

the text on the three dot menu used to be coloured the same as the theme you had loaded

 

 

for me the text was blue as the text in the background in the above image now its white

[Ben Z 86]

Sorry was not clear

 

the text on the three dot menu used to be coloured the same as the theme you had loaded

 

 

for me the text was blue as the text in the background in the above image now its white

 

Oh ok, yeah I removed the accent color here. I think white is much clearer, no? The default theme is like that and I also like it.

[Ben Z 86]

@@PenkethBoy

 

Use this from the old version if you wish :

 

    RED      : #E81123 & (232, 17, 35)
    DARK COLOR : #94131E

    ORANGE : #FF8000 & (255, 128, 0)
    DARK COLOR : #BF6000

    ORANGE PLEX : #CC7B19 & (204, 123, 25)
    DARK COLOR : #B35A00

    YELLOW : #BDBD00 & (189, 189, 0)
    DARK COLOR : #757500

    GREEN : #52B54B & (82, 181, 75)
    DARK COLOR : #3E8437

    BLUE     : #4285F4 & (66, 133, 244)
    DARK COLOR : #0C57D6

    PURPLE : #673AB7 & (103, 58, 183)
    DARK COLOR : #3F2471

    GRAY     : #7F7F7F & (127, 127, 127)
    DARK COLOR : #535353

    PINK     : #F707DF & (247, 7, 223)
    PINK (DARK) : #C604B3

/* Pop-up Dialogs */
.promptDialogButton, .actionSheetScroller, button.btnPromptExit.emby-button, 
button.btnSubmit.emby-button, button.btnCancel.emby-button {
    color: #E81123 !important; /* Accent color here */
	background: transparent !important; }

button.actionSheetMenuItem[is="emby-button"]:hover {
    color: #9b9b9b !important;
background-color: transparent !important; }

.promptDialogButton:active, button.actionSheetMenuItem[is="emby-button"]:active,
button.btnPromptExit.emby-button:active, button.btnSubmit.emby-button:active,
button.btnCancel.emby-button:active {
    color: #94131E !important; } /* Dark accent color here */

Edited April 30, 2017 by Ben Z

[PenkethBoy 2066]

@@Ben Z

 

works fine thanks - have got used to the coloured menu

 

One question what colour is the #9b9b9b  and which menu is it applied to??

 

button.actionSheetMenuItem[is="emby-button"]:hover {
color: #9b9b9b !important;
background-color: transparent !important; }

[Ben Z 86]

@@Ben Z

 

works fine thanks - have got used to the coloured menu

 

One question what colour is the #9b9b9b  and which menu is it applied to??

 

button.actionSheetMenuItem[is="emby-button"]:hover {

color: #9b9b9b !important;

background-color: transparent !important; }

 

It's the light gray that appears when you hover over it.

[PenkethBoy 2066]

ah ok thanks

[Happy2Play 9452]

@@Ben Z

 

Two more update to progress indicators, FF and Edge.

progress::-moz-progress-bar {
    background: #4285F4 !important;
}
.mdl-slider::-ms-fill-lower {
    background: #4285F4 !important;
}

[Guest]

...

Edited May 1, 2017 by CarlosLima

[arrbee99 1712]

Sorry to ask again, but this has stopped working for increasing the size of My Media icons, if anyone has any ideas please...

 

 

[PenkethBoy 2066]

what server version has it stopped working on?

[Happy2Play 9452]

Sorry to ask again, but this has stopped working for increasing the size of My Media icons, if anyone has any ideas please...

 

 

 

Here is what I am currently using.

/* My Media Image Size */
#homeTab .smallBackdropCard-scalable {width: 16.5%;}

Edited May 27, 2017 by Happy2Play
3.2.17.17

[arrbee99 1712]

Thanks very much but unfortunately doesn't work for me. Forgot to mention am using Chrome (whatever its updated to and server 3.2.17.17 though was 17.16 when I asked. Also zoom in to 110% in Chrome, Windows scaling is standard 100%. Think it might be something to do with Creators update ? Also did a fresh install of Windows 10 for the Creators update and it didn't work after that, (neither did this though I don't use that episode thing that often https://emby.media/community/index.php?/topic/47043-episode-image-size/page-2#entry453416 ),coincidence maybe ?

 

Weird but its not exactly life / sanity threatening.