Jump to content

Blue & Orange Theme

Aleas

By Aleas
in Web App CSS

 Share

Recommended Posts

Veector

Veector 1

Posted
Posted
10 minutes ago, Aleas said:

I wonder if that's the font import on the top line. 

I was a web developer in my past job so I know a little about this. The font used in the CSS is not the issue. When emby loads the page, it runs some javascript in the browser that loads the disclaimer and the CSS code you use in the "custom css code" box. If you're loading the page from a url that isn't the same as the url of the server, then this can happen.

In my case, I have my emby server running on my unRaid box and so I can reach it from http://myipaddress. However, if I login via the https://app.emby.media url, then it is still referencing http://myipaddress for the the content relevant to the custom css and because the url is different, that's why it doesn't load.

Aleas

Aleas 33

Posted
  • Author
Posted (edited)
3 minutes ago, Veector said:

I was a web developer in my past job so I know a little about this. The font used in the CSS is not the issue. When emby loads the page, it runs some javascript in the browser that loads the disclaimer and the CSS code you use in the "custom css code" box. If you're loading the page from a url that isn't the same as the url of the server, then this can happen.

In my case, I have my emby server running on my unRaid box and so I can reach it from http://myipaddress. However, if I login via the https://app.emby.media url, then it is still referencing http://myipaddress for the the content relevant to the custom css and because the url is different, that's why it doesn't load.

I have the same setup mostly as you, with a reverse proxy.  I'll check that out tomorrow and see if I can replicate the issue. Internal is http to ip and external is https to domain name. Gotta love unraid 😁

Edited by Aleas
Aleas

Aleas 33

Posted
  • Author
Posted (edited)

Another day, another update.

Changes include, but not limited to:

  • Loads more variables for you to control
  • Accent theme overrides
  • Option to control how Cast & Crew is displayed.  Options are Oval, Circle, or Default.  Look here to control the effect 
    /* ============================================================
  CAST & CREW PORTRAIT SHAPES
  Uncomment ONE of the blocks below to change the portrait shapes.
  ============================================================ 
  */

  /* OPTION 1: OVAL (Theme Default) */
  --portrait-radius: 50% / 40%;
  --portrait-ratio: 2 / 3;

  /* OPTION 2: CIRCLE */
  /*
  --portrait-radius: 50%;
  --portrait-ratio: 1 / 1;
  */

  /* OPTION 3: DEFAULT RECTANGLE (Matches your other media cards) */
  /*
  --portrait-radius: var(--border-radius-lg);
  --portrait-ratio: 2 / 3;
  */
  • Glow shadows to progress bars.  you can control the intensity via the variables also 
      /* --- Glow & Shadow Presets --- */
  --retro-glow: rgba(255, 185, 0, 0.4);           			       /* Color and opacity of the glowing drop shadows */
  --glow-none: none;                                                           /* Option to completely disable box-glow */
  --glow-light: 0 0 5px var(--retro-glow);                                     /* Subtle box-glow for small highlights */
  --glow-medium: 0 0 10px var(--retro-glow);                                   /* Standard box-glow for play buttons and badges */
  --shadow-glow-standard: 0 0 15px var(--retro-glow);                          /* Core box-glow for active tabs, card hovers, and selections */
  --glow-heavy: 0 0 20px var(--retro-glow);                                    /* Intense box-glow for login cards and skip buttons */
  --glow-extreme: 0 0 30px var(--retro-glow);                                  /* Massive box-glow used behind fullscreen album art */
  
  --glow-slider-track: 0 0 12px var(--my-gold), var(--shadow-glow-standard);   /* Complex multi-layer glow for progress tracks */
  --glow-slider-thumb: 0 0 15px var(--my-gold), 0 0 25px var(--retro-glow);    /* Complex multi-layer glow for slider handles */
  --glow-progress-bar: var(--glow-medium), 0 0 5px var(--theme-primary-color); /* Compound glow for card progress bars */
  
  --filter-glow-none: none;                                                    /* Option to completely disable CSS filter glow */
  --filter-glow-light: drop-shadow(0 0 5px var(--retro-glow));                 /* CSS filter equivalent of glow-light (for icons/images) */
  --filter-glow-medium: drop-shadow(0 0 8px var(--retro-glow));                /* CSS filter equivalent for hovered control buttons */
  --filter-glow-gold-solid: drop-shadow(0 0 5px var(--my-gold));               /* Solid gold CSS filter for active audio states (like repeat/shuffle) */

  /* ============================================================
  THE "NO GLOW" KILL SWITCH
  To instantly remove all glow effects from the entire theme, 
  remove the /* and */ /* wrapping the block below to uncomment it.
  ============================================================ 
  */
  
  /*
  --glow-light: var(--glow-none);
  --glow-medium: var(--glow-none);
  --shadow-glow-standard: var(--glow-none);
  --glow-heavy: var(--glow-none);
  --glow-extreme: var(--glow-none);
  --glow-slider-track: var(--glow-none);
  --glow-slider-thumb: var(--glow-none);
  --glow-progress-bar: var(--glow-none);
  --filter-glow-light: var(--filter-glow-none);
  --filter-glow-medium: var(--filter-glow-none);
  --filter-glow-gold-solid: var(--filter-glow-none);
  */

    Emby Navy and Gold v2.18.css

Enjoy!

 

 

Edited by Aleas
Aleas

Aleas 33

Posted
  • Author
Posted (edited)

Loads and loads up updates here:

Some include but not limited to:

- Fixed table view to reflect the theme.

- Option to control play button visibility on the home page, disabled by default (you can control  in the variable section.)

- New popout buttons, enabled by default (you can control  in the variable section.)

- Popout media artwork, disabled by default (you can control  in the variable section.)

- Active tab style popout, enabled by default (you can control  in the variable section.)

- Unwatched count style popout, enabled by default (you can control  in the variable section.)

- played indicator style popout, enabled by default (you can control  in the variable section.)

- media info badge style, disabled by default right now. (you can control  in the variable section.)

- Seasonal Event Toggles!  Right now, I've only done Easter, but it will completely transform your experience, I guess you could say there's a lot of easter eggs to find with this enabled.  (I would love to hear what you think about this. and suggestions for other holidays)

- And lots more...

 

Emby Navy and Gold v2.39.css

Edited by Aleas
  • Like 1
Aleas

Aleas 33

Posted
  • Author
Posted (edited)

Updates:

  • Changed showing play buttons over media cards the default now.
  • More seasonal/Holiday themes added in.  Each holiday is very unique in their own way, from colors to animations. Holiday options are:
    • Valentines Day
    • St. Patrick's Day
    • Easter
    • 4th of July
    • Halloween (My favorite one)
    • Thanksgiving / Autum Harvest
    • Christmas
    • New Year's Eve

Enjoy!

(Note: it's best right now to have your personal theme set to black or dark for it to display properly)

Emby Navy and Gold v3.0.css

Edited by Aleas
  • Like 1
Aleas

Aleas 33

Posted
  • Author
Posted (edited)

Updates:

  • Spinner Fix: Resolved issues with multicolored loading spinners.

  • Media Badges: Refined the styling of media pop-out badges; the pop-out style is now set as the default.

  • Visual Cleanup: Removed glow effects from seasonal media card hover effects to improve UI consistency.

  • Code Refactoring: Successfully migrated all hard-coded colors to CSS variables for easier customization.

  • SVG Rendering: Resolved image encoding issues to ensure SVG assets display correctly in Firefox.

  • Firefox Compatibility: Added a critical notice regarding Firefox compatibility above the seasonal toggles. To maintain a pure-CSS approach and avoid JavaScript or index file edits, certain container statements must be commented out until a native CSS workaround is identified. 

    BROWSER COMPATIBILITY NOTE: Firefox does not currently support 
    CSS Style Container Queries (@container style). To enable seasonal 
    themes for Firefox, you must manually comment out the @container wrapper 
    line and its corresponding closing bracket within the seasonal CSS section.

So, unless there's some big issue I find, or request; I'm pretty happy with the state of the theme. the @container() compatibility issue I think will resolve itself in time. It is sort of a bleeding edge feature.  Some seasons will be improved; I'm going to use easter and Halloween as my benchmarks.  I'll post updates to those in time. or follow the GitHub link inside the CSS.

Enjoy!

Emby Navy and Gold v3.5.css

Edited by Aleas
Aleas

Aleas 33

Posted
  • Author
Posted (edited)

Updates:

  • Each season was significantly updated, new effects, better animations, and changed visuals all around. Every season has some big changes!  Seasons are special 1 time a year events, so let's make them special as they are rarely seen.
  • Fix for seasonal background animations happening when backdrops or video backdrops were present.
  • Seasonal submit button fixes.
  • Added variables background controls to control background animations for the seasonal areas, I know the background animations are not for everybody.  Look for this block: 
  /* ============================================================
      THE "SEASONAL BACKGROUND" TOGGLES (DEFAULT: ON)
      Controls the heavy background layers (snow, petals, fireworks).
      Uncomment ONE of the blocks below to change the behavior.
      ============================================================ */

  /* OPTION 1: FULLY ENABLED (Default) */
  --seasonal-bg-visibility: visible;
  --seasonal-bg-anim-state: running;

  /* OPTION 2: PAUSE ANIMATIONS (Keeps the art, stops the motion) */
  /*
  --seasonal-bg-anim-state: paused !important;
  */

  /* OPTION 3: HIDE COMPLETELY (Removes the art and animations entirely) */
  /*
  --seasonal-bg-visibility: hidden !important;
  --seasonal-bg-anim-state: paused !important;
  */
  • A lot of variable and hardcoded cleanups.
  • And a lot of other fixes that I can't remember., and fixes to those fixes.

This is still very much a work in progress, so there might be many updates.

As this has now turned from 1 theme into 9 themes in 1.  

Be sure to follow this thread so you can know when updates occur :) . Also, what would you like to see, changed, added or modified; what do you like or dislike.  feedback is golden. Also be sure to activate that Easter theme, it's that time of year...

Enjoy!

Emby Navy and Gold v3.15.css

Edited by Aleas
MediaEmby1968

MediaEmby1968 53

Posted
Posted

Nice theme, it looks good, I just installed it. I'll try it out for a while. I'll keep an eye on any improvements you make.

  • Like 1

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...