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 4 hours 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 3 hours 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 or purple 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 2 hours ago by Aleas

[MediaEmby1968 62]

I think some changes aren't just in section 1, but it doesn't matter. When the final version is out, as you say, and there are no more updates, I'll have it ready.

I've realized that I don't care about the OSD. As I mentioned, I don't watch the videos on the PC (server), I watch them on the TV.

So it doesn't matter. It would be wonderful if it could be viewed on the TV as well.

Regards

[Aleas 60]

22 minutes ago, MediaEmby1968 said:

I think some changes aren't just in section 1, but it doesn't matter. When the final version is out, as you say, and there are no more updates, I'll have it ready.

I've realized that I don't care about the OSD. As I mentioned, I don't watch the videos on the PC (server), I watch them on the TV.

So it doesn't matter. It would be wonderful if it could be viewed on the TV as well.

Regards

The point is you just update season 1 with the notes but apply all the changes section 2 downwards.  Of course, things below section 1 will change, that's where the magic happens.

I don't know if I would ever say "This is the final version" as Emby devs are constantly adjusting tags and adding in new stuff.

But as far as the TV apps, each have their own presentation styles (Android, Roku, Apple TV, etc...), it would be a nightmare for everybody if that was controlled though custom CSS. When I'm working, I use my 2nd display to watch movies, listen to music, etc. though the web interface. Outside of that I mainly use the Android App. The web interface I felt was lacking so that's why this project was born. It's only for web, and not the apps. But yes, that would be epic if the apps had a standard and I could apply the say the Halloween season theme to them. But that will never happen. 

Edited 1 hour ago by Aleas