Jump to content

Emby Dark Themes in different accent colors

Ben Z

By Ben Z
in Web App CSS

 Share

Recommended Posts

CarlosLima

CarlosLima   148

Posted
Posted (edited)

Remove Posters Play Button

 

/* Hide Play button on general posters */

.cardOverlayButton {display:none !important;}

 

58f119fe3464f_a.png

Edited by CarlosLima
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
Posted

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

 

58f120e3380bd_a.png

Link to comment
Share on other sites
arrbee99

arrbee99   1561

Posted
Posted

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;
}
 
58f166f1485ec_EmbyCSSAlphaPicker1.jpg
 
58f167411a2a0_EmbyCSSAlphaPicker2.jpg
 
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%; }

 

58f167b6c0ba8_EmbyCSSMyMedia.jpg

 

If anyone has any ideas please ?

Link to comment
Share on other sites
Happy2Play

Happy2Play   8326

Posted
Posted

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;
}
 
58f166f1485ec_EmbyCSSAlphaPicker1.jpg
 
58f167411a2a0_EmbyCSSAlphaPicker2.jpg
 
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%; }

 

58f167b6c0ba8_EmbyCSSMyMedia.jpg

 

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;}
Link to comment
Share on other sites
arrbee99

arrbee99   1561

Posted
Posted

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

 

58f1704aca372_EmbyCSS15Apr17.jpg

 

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...

Link to comment
Share on other sites
Happy2Play

Happy2Play   8326

Posted
Posted

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

 

58f1704aca372_EmbyCSS15Apr17.jpg

 

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.

Link to comment
Share on other sites
  • 3 weeks later...
Ben Z

Ben Z   86

Posted
  • Author
Posted

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. 590576b6d0efc_fixneeded.png

 

 

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

Link to comment
Share on other sites
Happy2Play

Happy2Play   8326

Posted
Posted (edited)

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. 590576b6d0efc_fixneeded.png

 

 

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.

 

5905c3a445563_focus.jpg

/*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 by Happy2Play
  • Like 1
Link to comment
Share on other sites
PenkethBoy

PenkethBoy   2063

Posted
Posted

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

Link to comment
Share on other sites
Ben Z

Ben Z   86

Posted
  • Author
Posted (edited)

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 by Ben Z
Link to comment
Share on other sites
PenkethBoy

PenkethBoy   2063

Posted
Posted

Sorry was not clear

 

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

 

590628a1c7622_Capture.jpg

 

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

Link to comment
Share on other sites
Ben Z

Ben Z   86

Posted
  • Author
Posted

Sorry was not clear

 

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

 

590628a1c7622_Capture.jpg

 

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.

Link to comment
Share on other sites
Ben Z

Ben Z   86

Posted
  • Author
Posted (edited)

@@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 by Ben Z
  • Like 1
Link to comment
Share on other sites
PenkethBoy

PenkethBoy   2063

Posted
Posted

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

Link to comment
Share on other sites
Ben Z

Ben Z   86

Posted
  • Author
Posted

@@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.

  • Like 1
Link to comment
Share on other sites
Happy2Play

Happy2Play   8326

Posted
Posted

@@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;
}
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
Posted (edited)
...

Edited by CarlosLima
Link to comment
Share on other sites
  • 4 weeks later...
arrbee99

arrbee99   1561

Posted
Posted

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

 

592944f1826ae_EmbyImageSize.jpg

 

5929462d4a881_EmbyMyMedia.jpg

Link to comment
Share on other sites
Happy2Play

Happy2Play   8326

Posted
Posted (edited)

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

 

592944f1826ae_EmbyImageSize.jpg

 

5929462d4a881_EmbyMyMedia.jpg

 

Here is what I am currently using.

/* My Media Image Size */
#homeTab .smallBackdropCard-scalable {width: 16.5%;}
Edited by Happy2Play
3.2.17.17
Link to comment
Share on other sites
arrbee99

arrbee99   1561

Posted
Posted

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.

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
 Share
Go to topic listing
×
×
  • Create New...