Emby Theme: Retro Navy & Gold (W/ Seasonal Themes)

[MediaEmby1968 56]

Thank you, this update makes it look fantastic!

[Aleas 48]

2 hours ago, MediaEmby1968 said:

Thank you, this update makes it look fantastic!

You are most welcome.  Also, I discovered a tiny bug, and looking at your screenshot you seem to prefer the blue colors. So, I had a little fun, I think you might enjoy this option.

Updates: 

• Fix table hover backgrounds (was using user accent theme colors)
• New Option: you can say nope to the gold and have everything use a user accent color.  Look for this option in the variables:

Being easter I didn't have time to fully test it, but on the surface it looks good.

  /* --- CUSTOM MASTER PALETTE --- */

  /* OPTION 1 - USE THE THEMES GOLD COLOR */
  --my-gold: rgb(var(--my-gold-rgb));           /* Solid gold fallback for borders and text accents */
  --my-gold-light: rgb(var(--my-gold-light-rgb)); /* Brighter gold fallback for highlight gradients */
  --retro-navy: rgb(var(--navy-base-rgb));      /* Darkest navy fallback for main backgrounds */
  --retro-navy-light: rgb(var(--navy-mid-rgb)); /* Mid-tone navy fallback for panels and cards */  

  /* OPTION 2 - USE THE USERS ACCENT COLOR PREFERENCES */
  /* --my-gold: hsl(var(--theme-primary-color-hue, 204), var(--theme-primary-color-saturation, 100%), var(--theme-primary-color-lightness, 50%)); 
  /* --my-gold-light: color-mix(in srgb, var(--my-gold) 70%, white);    /* Solid gold fallback for borders and text accents */
  /* --retro-navy: rgb(var(--navy-base-rgb));         /* Brighter gold fallback for highlight gradients */
  /* --retro-navy-light: rgb(var(--navy-mid-rgb));    /* Mid-tone navy fallback for panels and cards */  

Maybe we should harass Luke now to add in more accent colors

Emby Navy and Gold v4.60.css

 

Edited Sunday at 04:26 PM by Aleas

[Aleas 48]

Update:

• Updated Accent comment to include the term experimental.
• Control the IMDB ratings star color in the master pallet for both options.
• Dimmed down the active sidebar pill so you can see the active state icon when accent colors were enabled.
• Default gold colors made the active state pill a gold color instead of accent color.

 

Emby Navy and Gold v4.62.css

Edited Sunday at 08:19 PM by Aleas

[Aleas 48]

Updates:

• Fixed some compatibility issues with mobile web browsers
  • Fixed sidebar issue
  • Pill bars you can scroll now.
• Re-arranged some variables around and dropped the term season from certain ones.
• Link color changes in admin area footers to use the theme colors and not white.
• styling on the Filmography area (Emby 4.10-Beta feature) 

 

Emby Navy and Gold v4.66.css

 

Edited yesterday at 12:36 AM by Aleas

[MediaEmby1968 56]

Updated and installed. I use the theme in sky blue, for a change I previously had one that predominated golden tones. I have tried the part that you mention of accent color Option 2. but it does not change, it is always the same color. I have left it as I had it.

One question, if I wanted to change the font, how do I do it?

[Aleas 48]

3 hours ago, MediaEmby1968 said:

Updated and installed. I use the theme in sky blue, for a change I previously had one that predominated golden tones. I have tried the part that you mention of accent color Option 2. but it does not change, it is always the same color. I have left it as I had it.

Just in case make sure the options are exactly like this to enable that option.

  /* --- CUSTOM MASTER PALETTE --- */

  /* OPTION 1 - USE THE THEMES GOLD COLOR */
  /* --my-gold: rgb(var(--my-gold-rgb));                             /* Solid gold fallback for borders and text accents */
  /* --my-gold-light: rgb(var(--my-gold-light-rgb));                 /* Brighter gold fallback for highlight gradients */
  /* --retro-navy: rgb(var(--navy-base-rgb));                        /* Darkest navy fallback for main backgrounds */
  /* --retro-navy-light: rgb(var(--navy-mid-rgb));                   /* Mid-tone navy fallback for panels and cards */  
  /* --star-color: var(--retro-navy-light);                          /* Media info badge rating star color */
  /* --star-glow: drop-shadow(0 0 5px rgba(7, 5, 0, 0));           /* Media info badge rating star glow */

  /* OPTION 2 - USE THE USERS ACCENT COLOR PREFERENCES */
  /* NOTE: KEEP IN MIND EVERY USER HAS THEIR OWN ACCENT COLOR OPTION */
  --my-gold: hsl(var(--theme-primary-color-hue, 204), var(--theme-primary-color-saturation, 100%), var(--theme-primary-color-lightness, 50%));   /* Theme primary color set by User Accent Color */
  --my-gold-light: color-mix(in srgb, var(--my-gold) 70%, white);    /* Solid gold fallback for borders and text accents */
  --retro-navy: rgb(var(--navy-base-rgb));                     /* Brighter gold fallback for highlight gradients */
  --retro-navy-light: rgb(var(--navy-mid-rgb));                /* Mid-tone navy fallback for panels and cards */  
  --star-color: rgb(255, 185, 0);                              /* Media info badge rating star color */
  --star-glow: drop-shadow(0 0 5px rgba(255, 185, 0, 0.4));    /* Media info badge rating star glow */

 

3 hours ago, MediaEmby1968 said:

One question, if I wanted to change the font, how do I do it?

Look for this at the top of the CSS:

  /* --- GLOBAL TYPOGRAPHY --- */
  --font-header: 'Oswald', sans-serif;                            /* Primary cinematic header font */
  --font-body: 'Sofia Sans', sans-serif;                          /* Standard readable body font */

 

If that does not correct it, could you paste in your Section1 just down to where the Seasonal event stuff begins inside a code block?

Edited yesterday at 11:12 AM by Aleas

[Aleas 48]

Updates:

• Mobile browser compatibility 
  • Fixed app footers in the admin area with light themes enabled
  • Adjusted min-sidebar size to accommodate landscape mode
  • Action buttons display fixes
• Navigation bar fix to removed artifact around the hover.
• Fixed Dialog box hover where the icon was not changing colors
• Small Filmography fix
• Fix for the edit button in admin libraries not showing up.
• Updated search results pill bar to match the theme.
• Music artist table grid fixes, to match other grid styles
• Music suggestion footer fixes

 

Emby Navy and Gold v4.69.css

Edited yesterday at 02:43 PM by Aleas

[visproduction 338]

Color changes using variables in css.  rgb does not work, as expected, with var.

Either use Hex colors codes #47ed43, or use rgba instead. 

:root {
  --color: 240, 240, 240;
  --alpha: 0.8;
}
#element {
  background-color: rgba(var(--color), var(--alpha));
}

See: https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable

Edited yesterday at 02:49 PM by visproduction

[Aleas 48]

43 minutes ago, visproduction said:

Color changes using variables in css.  rgb does not work, as expected, with var.

Use rgba instead.  This works:

#element {
  background-color: rgba(var(--color), 0.8);
}

See: https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable

Thank you, I did not know that. should have a fix out in a few

 

Edited yesterday at 03:27 PM by Aleas

[MediaEmby1968 56]

I forgot to mention that I don't have Emby Premiere, so it doesn't change. In this screenshot, when I open any of those dropdown menus, I get a background that doesn't match the theme. It would be great if it could be changed. I have attached the screenshot.

And these icons in the top right corner where the settings are, how can I change them to the same gold color or another color?

How can I increase the text font size in settings?

Thanks, the theme looks great!

Edited yesterday at 06:51 PM by MediaEmby1968

[Aleas 48]

5 hours ago, MediaEmby1968 said:

I forgot to mention that I don't have Emby Premiere, so it doesn't change. In this screenshot, when I open any of those dropdown menus, I get a background that doesn't match the theme. It would be great if it could be changed. I have attached the screenshot.

And these icons in the top right corner where the settings are, how can I change them to the same gold color or another color?

How can I increase the text font size in settings?

Thanks, the theme looks great!

 

 

 

Updates:

• Corrected variables to use rgba instead of rgb, thanks @visproduction
• Fixed multi select banner
• Fix season view play indicators, checkboxes, etc..etc..  (I swear I've fixed this one like 4 times now)
• Fixed the favorite icon in in the music mini-osd player
• Fixed some missing hover borders missing.
• Fixed filmography inactive pill background.
• Updated search results page to have our pill button styles
• Made chromecast & settings buttons use the gold color
• Removed get Emby premier button from the top header.  (But you should still totally get it, it's worth every penny!)
• Added a variable in typography to adjust the font size.
• Changed Select dropdown colors
• Fix to select checkmarks color
• Fixed a light theme bug where when you would use drag grab handles the background would turn white.  (ie: reordering in a playlist)

I think run out of bugs, so hopefully this should be it unless there are enhancement requests or issues people find.

Enjoy!

 

Emby Navy and Gold v4.75.css

Edited 23 hours ago by Aleas

[MediaEmby1968 56]

The buttons in the upper right corner, the user button, are still blank; it hasn't changed. I've attached a screenshot.

When I go into settings, some of the main text is still blank, unlike other text that's gold. I've attached a screenshot.

And in the settings, the text in the dropdown menus is overlapping with other text, which looks bad. I've attached a screenshot.

Regards

[Aleas 48]

3 hours ago, MediaEmby1968 said:

When I go into settings, some of the main text is still blank, unlike other text that's gold. I've attached a screenshot.

I'm not really seeing what you are talking about there.  All the text is there, what exactly is blank? 

 

3 hours ago, MediaEmby1968 said:

The buttons in the upper right corner, the user button, are still blank; it hasn't changed. I've attached a screenshot.

All my users have icons, so I did not notice that.  the version below should have that addressed.

3 hours ago, MediaEmby1968 said:

And in the settings, the text in the dropdown menus is overlapping with other text, which looks bad. I've attached a screenshot.

Try the version below I made a slight change w/ multi select dropdowns, also what web browser are you using?  I didn't see that issue, even when I selected Spanish for my language.

 

Updates:

• Fixed transcoding bar color from now playing in the admin dashboard, and other Now playing fixes
• Navigation bar icons are now gold
• User profile icon is now gold (If the user has no profile picture)
• Toggle switch effect
• Adjustment to media progress bar on media cards.
• Changed the loading spinner to have a new look.
• Multi-select dropdown text color fix (was gold when it should have been white)
• Fixed where editing a library part of the dialog would have the incorrect text colors.
• Hid collections from the side navigation bar

Emby Navy and Gold v4.82.css

 

EDIT: Found the dropdown glitch you pointed to.  It's odd this only affects the 4.9-Stable version, When I tested this, I was using my dev server that's the 4.10-Beta and it does not have the issue.  Give me a few and I'll have that fixed.

 

Edited 1 hour ago by Aleas

[Aleas 48]

5 hours ago, MediaEmby1968 said:

And in the settings, the text in the dropdown menus is overlapping with other text, which looks bad. I've attached a screenshot.

Here's the fix for that one. This issue only affected the 4.9-Stable branch, 4.10-Beta did not have the issue.

Updates:

• Created Hotfix for Muli-Select dropdown double-text glitch. (I'll remove the hotfix when 4.10 is released.)

Emby Navy and Gold v4.84.css

 

Edited 4 minutes ago by Aleas