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

[MediaEmby1968 57]

Thank you, this update makes it look fantastic!

[Aleas 50]

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

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

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 Tuesday at 12:36 AM by Aleas

[MediaEmby1968 57]

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

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 Tuesday at 11:12 AM by Aleas

[Aleas 50]

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 Tuesday 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 Tuesday at 02:49 PM by visproduction

[Aleas 50]

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 Tuesday at 03:27 PM by Aleas

[MediaEmby1968 57]

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 Tuesday at 06:51 PM by MediaEmby1968

[Aleas 50]

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 Tuesday at 10:03 PM by Aleas

[MediaEmby1968 57]

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

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 yesterday at 07:26 PM by Aleas

[Aleas 50]

6 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.85.css

Edited 22 hours ago by Aleas

[Aleas 50]

Updates:

• Dialog popups now have the gold for their icons
• OSD Players now has the gold buttons
• FIX: Some primary table types did not receive the golden border hover effect.
• Added a slight gradient to backdrops
• Updated typography so some areas, pill bars, about sections, etc will no longer be in all uppercase (Open for discussion if you prefer all uppercase)
• Added variables to control to show or hide Collections or Playlists on the sidebar. (Look under sidebar options)
• A frosted glass effect added to the sidebar and dialog popups.  This can be controlled through the new Frost Effects variables.
• FIX: Issue where the header would not appear after logging in without a page refresh.

Emby Navy and Gold v4.90.css

Edited 3 hours ago by Aleas

[MediaEmby1968 57]

The browser I use is Brave Browser. What I mean is, in this image, the red text is headings or main text, and the yellow text is the same but not the same color. That's what I mean; it looks odd that some are one color and others are another.

[Aleas 50]

45 minutes ago, MediaEmby1968 said:

The browser I use is Brave Browser. What I mean is, in this image, the red text is headings or main text, and the yellow text is the same but not the same color. That's what I mean; it looks odd that some are one color and others are another.

 

I see what you mean,  give this a try. I'm sorta debating if those should be gold or white.  thoughts?

Emby Navy and Gold v4.91.css

 

Edited 2 hours ago by Aleas

[MediaEmby1968 57]

Thanks, it works.

One question: if I wanted the background images of the cards or movies to appear fully blurred, and not partially like this, what would I need to edit?

[Aleas 50]

2 minutes ago, MediaEmby1968 said:

Thanks, it works.

One question: if I wanted the background images of the cards or movies to appear fully blurred, and not partially like this, what would I need to edit?

Do you mean when a dialog pops up to blur the background behind it?

[MediaEmby1968 57]

I'm referring to the background image that appears on a movie's information page. I've attached a screenshot.

 

[Aleas 50]

2 hours ago, MediaEmby1968 said:

I'm referring to the background image that appears on a movie's information page. I've attached a screenshot.

 

Gotcha, if you wanted to blur the backdrop posters at this to the end of Section 12. (I'll add a variable to enable this in the next update)

/* ============================================================
   HOTFIX: CUSTOM BACKDROP BLUR
   ============================================================ */
html[class*="theme-"] body .backdropImage {
    filter: var(--blur-heavy) !important; /* Options: var(--blur-light), var(--blur-heavy), var(--blur-extreme), or blur(15px) */
}

I also noticed since I added in the gradients a bit was also fixed, so it's a bit brighter than they should be. (I forgot to update the variable)  you may want to adjust this variable to 0.5, That will be adjusted in the next update.

  /* BACKDROP & FANART STYLE */
  --backdrop-opacity: 0.5;                                         /* DIMMING (Traditional full-screen dark overlay) */

And right now, I'm trying to map out all those text colors h1-h6 into variables.  I'll post an update whenever I'm done with that.

Edited 9 minutes ago by Aleas