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

[MediaEmby1968 56]

Thank you, this update makes it look fantastic!

[Aleas 43]

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

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

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 16 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 43]

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

[Aleas 43]

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

[Aleas 43]

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 1 hour ago by Aleas

[MediaEmby1968 56]

Olvidé mencionar que no tengo Emby Premiere, por eso no cambia. En esta captura de pantalla, cuando abro cualquiera de esos menús desplegables, aparece un fondo que no coincide con el tema. Sería fantástico si se pudiera cambiar. He adjuntado la captura de pantalla.

Y estos íconos en la esquina superior derecha donde están las configuraciones, ¿cómo puedo cambiarlos al mismo color dorado u otro color?

¿Cómo puedo aumentar el tamaño de fuente del texto en la configuración?

¡Gracias, el tema se ve genial!

Edited 48 minutes ago by MediaEmby1968