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

[MediaEmby1968 62]

Thank you

[Aleas 60]

Here we go, an idea that sounded simple caused a lot of headaches along the way, but we eventually got there.

Updates:

• More color variable options, a few variables to fine tune colors in specific areas.  (See Section 1 updates for more details)
• Table grid header colors moved from h1-color to h5-color
• Video titles, music now playing in the OSD us now using h3-color instead of h1-color
• Changed custom CSS box to use 500 lines instead of 1000
• Fixed icon hover shadows in the sidebar and dialogs popups.
• Fixed table view play buttons.
• Fixed the (3 dots ...) in table views to have a hover color.
• Removed the media bade effect from dialog popups
• Fixed the halo effect that happened with watched/favorite indicators in media cards.
• Fixed audio full screen image hover bugs
• Updated seasons to not use background images if they are set. (There's already enough animation going on, and it looked awful) (Some seasonal fixes still need to be done.)
• Updated seasons to reflect various changes.
• More image backdrop animation options (See section 1 updates for more details)
• Fixed various areas in the music suggestions page
• Submit/Action buttons will no longer be in all uppercase.
• Any many more fixes.

Section 1 Changes:

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. 

• A lot of areas were re-organized; colors options were placed more closely together. And some moved into more appropriate areas. (No real change needs to happen here if you wish to keep your section 1)
• New header icon color variables (This affects the main pages, not the headers inside the OSD):

    --header-icon-color: var(--my-gold);                             /* Header icon color */
    --header-icon-hover-color: var(--my-gold-light);                 /* Header icon color in a hover state */

• New sidebar icon color variables:

    --sidebar-icon-color: var(--my-gold);                            /* Sidebar icon colors */
    --sidebar-icon-hover-color: var(--my-gold-light);                /* Sidebar icon colors in a hover state */

• New OSD icon color variables:

    --osd-icon-color: var(--pure-white);                                /* Icon colors for the OSD display */
    --osd-icon-hover-color: var(--my-gold-light);                    /* OSD Icon colors in a hover state */

  (Pay attention to the OSD one @MediaEmby1968, if you loved those orange buttons in the OSD, you would want to change that, as white will be the default.)

• New Dialog icon color variables:

    --dialog-icon-color: var(--my-gold);                             /* Dialog popup icon color */
    --dialog-icon-hover-color: var(--my-gold-light);                 /* Dialog popup icon color in a hovered state */

• Various comments were updated but I did not really keep track of those.
• This comment is to note though as more options were created

  --backdrop-anim-toggle: imgZoomFadeIn;                           /* Options are: 'imgZoomFadeIn', 'imgPanRight', 'imgCinematicDrift', 'imgFadeOnly' to ENABLE the backdrop animation, or 'none' to DISABLE it */

   

Some of these default colors may change in time, I'm still experimenting with them to see what I actually prefer.

I Think that's It, hope I did not miss anything on my notes here.

 

Emby Navy and Gold v5.0.css

Enjoy!

 

Edited 1 hour ago by Aleas

[MediaEmby1968 62]

I will be attentive... because also now I have to go over all those changes I made again.

I'll have to write them down separately to have them on hand.

Thanks,... downloaded and will try it tomorrow

[Aleas 60]

1 hour ago, MediaEmby1968 said:

I will be attentive... because also now I have to go over all those changes I made again.

I'll have to write them down separately to have them on hand.

Thanks,... downloaded and will try it tomorrow

Hopefully it should not be bad, try the logic in the section 1 update notes, keep your section 1 and just add in the new stuff.

I don't expect many more updates coming, it's at a really good steady state.  There is only 1 item on my want list, and some fixes to seasonal content. that's about all that's left on my bucket list.

Edited 33 minutes ago by Aleas

[Aleas 60]

And this always happens, just 1 quick important fix. (I forgot something on a last minute fix before I uploaded it.)

Updates:

• Fixed header icons not respecting their hover color state
• Updated some of the new variables, the colors were too close to each other to notice.

Section 1 Changes:

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. 

• Changed defaults of these new variables

    --header-icon-color: var(--my-gold);                                /* Header icon color */
    --header-icon-hover-color: color-mix(in srgb, var(--my-gold-light) 40%, white); /* Header icon color in a hover state */
  
    --sidebar-icon-color: var(--my-gold);                               /* Sidebar icon colors */
    --sidebar-icon-hover-color: color-mix(in srgb, var(--my-gold-light) 40%, white); /* Sidebar icon colors in a hover state */
  
    --osd-icon-color: var(--pure-white);                                /* Icon colors for the OSD display */
    --osd-icon-hover-color: var(--my-gold);                             /* OSD Icon colors in a hover state */
  
    --dialog-icon-color: var(--my-gold);                                /* Dialog popup icon color */
    --dialog-icon-hover-color: color-mix(in srgb, var(--my-gold-light) 40%, white); /* Dialog popup icon color in a hovered state */

 

And just a side note: Using the user accent color option, with the accent color set to blue with the dimmed background option using the image provided. man is it looking good! That will not be the default but it's nice.

 

Emby Navy and Gold v5.1.css

Edited 5 minutes ago by Aleas