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

[MediaEmby1968 56]

Thank you, this update makes it look fantastic!

[Aleas 46]

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 46]

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 46]

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 20 hours ago 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 46]

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 10 hours ago by Aleas

[Aleas 46]

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 6 hours ago 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 6 hours ago by visproduction

[Aleas 46]

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 5 hours ago 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 2 hours ago by MediaEmby1968

[Aleas 46]

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
• Fix to a white background when using a drag indicator. (ie: dragging things around in a playlist)

 

Enjoy!

Emby Navy and Gold v4.74.css

 

Edited 2 minutes ago by Aleas