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

[MediaEmby1968 64]

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 Wednesday at 03:42 PM by Aleas

[MediaEmby1968 64]

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 Wednesday at 04:57 PM 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 Wednesday at 05:31 PM by Aleas

[MediaEmby1968 64]

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 Wednesday at 06:29 PM by Aleas

[MediaEmby1968 64]

I've noticed that in this version the Home icon (the one that appears in the top left when you open a library) doesn't change color, whereas it did in version 4.115.

How can I change it, since the other icons have changed color?

[Aleas 60]

35 minutes ago, MediaEmby1968 said:

I've noticed that in this version the Home icon (the one that appears in the top left when you open a library) doesn't change color, whereas it did in version 4.115.

How can I change it, since the other icons have changed color?

I have that corrected for the next update. Thanks!

Edited yesterday at 04:13 PM by Aleas

[Aleas 60]

Updates:

• Re-did the text-transforms. (It was sort of broken) (See section 1 updates)
• Fixed the header home button and admin help button not receiving the header-icon-colors
• Fixed certain table rows/cells not respecting the --table-row-hover-bg variable. Also updated the variable comment, if you prefer gold on hover instead of a blue
• Removed zebra striping when inside a TV Season, added episode image to popout shield
• Removed old test code
• Resolved issues with popout shadows (See section 1 updates)
• Removed year badge above the title in the video OSD. (It's already in the info panel)
• Fixed an issue where the dialog-icon-hover colors snuck its way into table grids.
• Fixed an issue where the header was not stretching to the right because of the scrollbar, or lack of.
• Various icons all around will now have some color in various states.
• Fixed a couple issues w/ seasonal content w/ all the changes.
• Fixed an issue with the header in a non-maximized window.
• And more...

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. 

• Removed commented out flat button options in the variables. And removed references to pop-out for the active variables.
• Removed the section "TYPOGRAPHY BUTTON TOGGLES (PILLBARS)"
• Created new section "TYPOGRAPHY TEXT CASE TOGGLES" With these options.

    --text-transform-pillbar: uppercase;            /* Pillbars - Set to 'uppercase' for all-caps, or 'none' for title-case */
    --text-transform-primaryHeaders: uppercase;     /* Section Titles (Header and Pages)  - Set to 'uppercase' for all-caps, or 'none' for title-case */
    --text-transform-dialogHeaders: none;           /* Header text in dialogs - Set to 'uppercase' for all-caps, or 'none' for title-case */

• Updated variable values and comments for --shadow-glow-standard, --popout-shadow
• Updated variable values and comments for --table-row-hover-bg
• Updated all the season section variables
• Renamed variable title "DANGER / CANCEL BUTTONS" to "DANGER / CANCEL / REMOVE ITEM BUTTONS

I would say this version is very well polished, I haven't really seen any real issues "yet".  So, I'm hopeful with this we are at a steady state.

 

Emby Navy and Gold v5.3.css

 

Edited 5 hours ago by Aleas

[MediaEmby1968 64]

Downloaded and testing.

If there are any issues, I'll let you know.

[HUNCO 0]

Thanks again for the great work. No glitches or issues have been detected so far, but I'd like to clarify a few details.

1. Is it possible to make the blur disappear after scrolling to the top of the page, as is the default. So, when we scroll the page, the header remains blurred, but when we scroll all the way up, it disappears? (Screenshot 1)
2. Currently, when a show has multiple seasons, they are selected via a drop-down list. Is it possible to make this selection like it is in the TV version, in a row (screenshot 2)?
3. This question is more for the EMBY developers, but I'll ask anyway, maybe you know a solution. Is there a way or possibility to add aliases for movie titles and place them, say, under the main title, so that in addition to the localized title, the original and alternate titles are displayed?
4. This question is more for the developers, but is it possible to display episodes not through horizontal scrolling but through vertical scrolling, as is already done, for example, on the home screen? (Screenshot 3)

[Aleas 60]

2 hours ago, HUNCO said:

Thanks again for the great work. No glitches or issues have been detected so far, but I'd like to clarify a few details.

1. Is it possible to make the blur disappear after scrolling to the top of the page, as is the default. So, when we scroll the page, the header remains blurred, but when we scroll all the way up, it disappears? (Screenshot 1)
2. Currently, when a show has multiple seasons, they are selected via a drop-down list. Is it possible to make this selection like it is in the TV version, in a row (screenshot 2)?
3. This question is more for the EMBY developers, but I'll ask anyway, maybe you know a solution. Is there a way or possibility to add aliases for movie titles and place them, say, under the main title, so that in addition to the localized title, the original and alternate titles are displayed?
4. This question is more for the developers, but is it possible to display episodes not through horizontal scrolling but through vertical scrolling, as is already done, for example, on the home screen? (Screenshot 3)

 

 

 

#1 Blur on the header is an all or nothing sort of thing.  Maybe try playing around or add a new variable here to find a neutral ground.

  /* --- EFFECTS & ANIMATIONS --- */
  --blur-light: blur(10px);                                        /* Soft background blur */
  --blur-heavy: blur(20px);                                        /* Strong background blur */
  --blur-extreme: blur(30px);                                      /* Maximum depth blur */

#2 I think this is the setting you are looking for:

 

Edited 6 minutes ago by Aleas