Blue & Orange Theme

[Veector 1]

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 31]

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 16 hours ago by Aleas

[Aleas 31]

Another day, another update.

Changes include, but not limited to:

• Loads more variables for you to control
• 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);
    */

   

Enjoy!

Emby Navy and Gold v2.15.css

 

Edited 41 minutes ago by Aleas