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

[MediaEmby1968 59]

The text headings h1 to h6 are not working now; they all appear blank. The background image is working perfectly now.

[Aleas 56]

And s orry, fix to the blue on the backdrop. Sometimes I rush things.

Emby Navy and Gold v4.97.css

 

Edited Thursday at 09:58 PM by Aleas

[MediaEmby1968 59]

Don't worry, I'm just mentioning it to help, don't rush things. Haste makes waste. The theme you created is very nice, and regardless of personal taste, I have to say I prefer blue to gold, as it gives it a different touch. Besides, the other theme I was using, from here, also has gold tones.

Thanks for your help.

I installed this latest version 96 and it looks the same; everything is still white in the settings options. I've attached a screenshot.

 

[Aleas 56]

23 minutes ago, MediaEmby1968 said:

Don't worry, I'm just mentioning it to help, don't rush things. Haste makes waste. The theme you created is very nice, and regardless of personal taste, I have to say I prefer blue to gold, as it gives it a different touch. Besides, the other theme I was using, from here, also has gold tones.

Thanks for your help.

I installed this latest version 96 and it looks the same; everything is still white in the settings options. I've attached a screenshot.

 

 

Update the H5 variable to this:

I kinda prefer the white, so right now that's the default

  --h5-color: var(--my-gold);                                   /* Setting Titles, Deep Metadata & Plugins */

Also just to be sure you are on the latest version here it is again.  And I have not really found everything that's using H5, so you might find gold text where it should not be modifying that.  If you find something let me know, I might need to remap additional stuff.

Emby Navy and Gold v4.97.css

Edited Thursday at 10:12 PM by Aleas

[Aleas 56]

Updates:

• Remapped some heading colors to fix some text issues
• Pillbar text will be uppercase by default, added in new variables to control that.

    /* --- TYPOGRAPHY BUTTON TOGGLES (PILLBARS, SUBMIT) --- */
    --button-text-transform: uppercase;                              /* Set to 'uppercase' for all-caps, or 'none' for title-case */
    --button-text-weight: 700;                                       /* Set to 700 for uppercase, or 600 for title-case */
    --button-letter-spacing: 1px;                                  /* Set to 1px for uppercase, or 0.5px for title-case */

   

• Removed the variable backdrop-opacity. since we moved to rgba with --backdrop-bg-color it was pulling double duty. 
• Removed that backdrop blur option. (it was a misunderstanding, it was ugly, and I don't ever see anybody doing that)

Emby Navy and Gold v4.100.css

Edited Friday at 01:38 AM by Aleas

[MediaEmby1968 59]

Thank you. Everything is fine.

[HUNCO 0]

Thank you very much for your work. The theme looks absolutely wonderful, although the CSS code seems overloaded due to the large number of seasonal features. However, it's great that you bring something new to the theme with each update. In this regard, I have a few questions and suggestions that you could perhaps implement in future revisions.

1. Is it possible to restore the background animation as it was in the first revisions? This animation gave the theme more life and looked very stylish.
2. Is there a way to change the opacity of the header? In the default theme, the header background was gray. Now, when you scroll the page, the buttons and logos overlap other elements.
3. Is there a way to change the display of the seasons? So that they are displayed in a single line instead of a drop-down list?

Otherwise, I rely on your ideas and solutions. Thank you very much again.

[Aleas 56]

4 hours ago, HUNCO said:

Thank you very much for your work. The theme looks absolutely wonderful, although the CSS code seems overloaded due to the large number of seasonal features. However, it's great that you bring something new to the theme with each update.

Yeah, with seasons it's sort of many themes in 1, so bloat is unavoidable. I do have an idea in mind that I might try out later, where we just activate the seasons by doing an import off my GitHub to an active theme. But I'm still undecided on that approach.

4 hours ago, HUNCO said:

1. Is it possible to restore the background animation as it was in the first revisions? This animation gave the theme more life and looked very stylish.

You got it! I think you are referring to the backdrop posters? 

4 hours ago, HUNCO said:

2. Is there a way to change the opacity of the header? In the default theme, the header background was gray. Now, when you scroll the page, the buttons and logos overlap other elements.

I will add that option in, no problem.

4 hours ago, HUNCO said:

3. Is there a way to change the display of the seasons? So that they are displayed in a single line instead of a drop-down list?

I'll see what I can do there to clean it up some, recently I did reduce the number of variables in those.

Edited Friday at 02:50 PM by Aleas

[Aleas 56]

Updates:

• Return of the header, you can change the frost, disable it, etc. from this area in the variables, I also added in a variable for padding in the media details areas, so it does not sit right up against it.

    /* EFFECTS (SIDEBAR, HEADER, AND DIALOG POPUPS*/
    --sidebar-blur: var(--blur-heavy);                               /* Frost blur intensity: var(--blur-heavy), var(--blur-light), or none */
    --sidebar-bg: var(--navy-base-alpha-75);                         /* Frost transparency intensity: var(--navy-base-alpha-75), var(--black-alpha-80), var(--black-alpha-95), etc, or var(--retro-navy) to disable */
    --header-blur: var(--blur-heavy);                                /* Set to 'none' for a completely clear header, or var(--blur-heavy) / var(--blur-light) to enable frost */
    --header-bg: var(--navy-base-alpha-75);                          /* Set to 'transparent' for a completely clear header, or use a translucent color to enable frost */
    --header-border: var(--standard-border-thickness) solid var(--gold-alpha-15);  /* Set to 'none' to disable, or var(--standard-border-thickness) solid var(--gold-alpha-15) to enable */
    --header-content-padding: 20px;                                  /* Media details header padding, push the content down from the header */

• Fixed more random icons that did not receive the gold color
• If a filter is applied the filter icon will now have the gold color around it indicating a filter is in use.
• Backdrop poster animations, and new variables added for that

    --backdrop-anim-toggle: imgZoomFadeIn;                           /* Set to 'imgZoomFadeIn' to ENABLE the backdrop animation, or 'none' to DISABLE it */
    --anim-backdrop-mask: linear-gradient(to right, transparent 0%, var(--pure-black) 40%), linear-gradient(to top, transparent 0%, var(--pure-black) 40%);
    --backdrop-image-scale: 80%;                                     /* Percentage of screen to use for backdrop posters (It will always pin to the top right of the screen) */ 

• Bugfix for the list view star hover
• Media card hover shadow fix
• Reduced seasonal variable lines to easily enable/disable. 
• Some Live TV fixes
• And many more bug fixes.

I know the variables have been changing a lot lately, I'll try to be better on showing section 1 changes going forward, so you can just update section 2 downwards.

Got an idea or found an issue?  I'm always listening. Feedback is always welcome.

Emby Navy and Gold v4.108.css

Edited Friday at 11:30 PM by Aleas

[MediaEmby1968 59]

I've downloaded the latest version and I'll try it out.

But I wanted to ask you a question.

At the end of a movie's information page, for example, in the multimedia section.

How can I change the font size in that specific area?

I've attached a screenshot with the text circled, and I'm referring to the part that's in blue.

Thanks

 

[Aleas 56]

2 hours ago, MediaEmby1968 said:

How can I change the font size in that specific area?

I Agree, the font size is too small,

I'll push out an update hopefully tomorrow (If I don't find anything else), the update addresses a bunch of things, typical bug fixes, some enhancements, return of disabled features that needed refinements, etc.

I've pretty much completed it, but need to QA check it, then I want to do another round of QA checks tomorrow when I haven't been drinking

[Aleas 56]

Updates:

• Re-enabled media card popouts, this needed a lot of refinements, it was overkill before. so now certain items/areas will no longer receive this effect. (@HUNCO I think this another animation you were missing) This is enabled by default now, see section 1 updates on how to disable it if you prefer it that way.
• Fixed a hover issue with the ratings star in the table view
• Cleaned up seasonal variable lines just a little bit.
• Changed the opacity of the LiveTV guide timeline indicator
• Removed hover effect on media descriptions, in the media details page and the OSD
• Added note on top of section 1 about enabling/disabling variables.
• Music mini-OSD gets the frost/transparency effect (new variables for that)
• Fix for popout effect borders on cast & crew picture shapes not respecting the shape of the picture
• Softened up shadows, removed shadows in a hover state (variable updated)
• Shadows should be better at respecting the media-card-radius variable
• Fix for Cast & crew and music artists "More" button being hidden in a non-rectangular state. (It's now centered on the bottom)
• Unknown actor images have a better look now.
• Fixed the play button in the OSD
• Increased the media stream information font size @MediaEmby1968
• Fixed the triangle color of "Play from Beginning" in the OSD on a hovered state
• Fixed the "Played" indicator in a list view in a hover state
• Make the "More" and Directors links in the media details page gold.
• Added the ability to hide the Emby logo on the sidebar in a docked state (new variable for that)
• Fixed the Emby logo when the user theme is set to a Light theme.
• When a filter is applied, that filter button will now be gold to reflect it's in an active state.

Section 1 Updates:

If you customized your CSS, you could keep your section 1 and just update section 2 on down. but here are the important things that were added or changed so you can modify accordingly. 

• The Note at the top about enabling/disabling variables
• Trimmed the seasonal variables to use the logic the note says.
• Popout variables changes to enable by default

    /* MEDIA CARD POPOUT EFFECTS --- */
    --popout-perspective: 1000px;                                      /* Effects can be made when hovering over media cards to disable use "none" or to enable use "1000px" */
    --popout-transform: scale(1.05) rotateX(4deg) translateY(-5px);   /* Effects can be made when hovering over media cards to disable use "none" or to enable use "scale(1.05) rotateX(4deg) translateY(-5px)" */
    --popout-shadow: 0px 20px 30px var(--black-alpha-90), var(--shadow-glow-standard);  /* Effects can be made when hovering over media cards to disable use "none" or to enable use "0px 20px 30px var(--black-alpha-90), var(--shadow-glow-standard)" */

• Effects area changed for showing/hiding the Emby logo and mini-OSD for music frost treatments.

    /* EFFECTS (SIDEBAR, HEADER, DIALOG POPUPS, MINI-OSD */
    --sidebar-blur: var(--blur-heavy);                               /* Frost blur intensity: var(--blur-heavy), var(--blur-light), or none */
    --sidebar-bg: var(--navy-base-alpha-75);                         /* Frost transparency intensity: var(--navy-base-alpha-75), var(--black-alpha-80), var(--black-alpha-95), etc, or var(--retro-navy) to disable */
    --header-blur: var(--blur-heavy);                                /* Set to 'none' for a completely clear header, or var(--blur-heavy) / var(--blur-light) to enable frost */
    --header-bg: var(--navy-base-alpha-75);                          /* Set to 'transparent' for a completely clear header, or use a translucent color to enable frost */
    --header-border: var(--standard-border-thickness) solid var(--gold-alpha-15);  /* Set to 'none' to disable, or var(--standard-border-thickness) solid var(--gold-alpha-15) to enable */
    --header-content-padding: 20px;                                  /* Media details header padding, push the content down from the header */
    --header-logo-display: block;                                     /* Set to 'block' to show the top left Emby logo, or 'none' to hide it */
    --osd-mini-blur: var(--blur-heavy);                              /* Frost blur intensity for the bottom mini music player */
    --osd-mini-bg: var(--navy-base-alpha-75);                        /* Background transparency for the bottom mini music player */

• Shadow hover state disabled via this variable

  --shadow-glow-standard: transparent;                             /* The primary gold glow seen on hovered media cards */

 

Enjoy!

 

Emby Navy and Gold v4.112.css

EDIT: Just snuck in a quick fix for the double logo.

EDIT2: Snuck in another fix for S00:E00 text in the media details page.

 

Edited 43 minutes ago by Aleas