New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x]

[Tom K]

I LOVE,LOVE, LOVE the theme! Using it with iOS on my iPad and the cast photos cover up the actors names. Can that be fixed?

[alexyle]

I LOVE,LOVE, LOVE the theme! Using it with iOS on my iPad and the cast photos cover up the actors names. Can that be fixed?

Hello, could you screen the bug? I wasn’t able to reproduce it.

[lolish]

Love this theme thx i changed it a bit so if someone wants to try this version you're welcome


/* 1. IMPORTERA LIQUID GLASS TEMAT */
@import 'https://cdn.jsdelivr.net/gh/alexyle/jellyfin-theme@liquid-glass/glassmorphism/theme.css';

/* 2. DISKRETA GULD ACCENTER */
:root {
/* Sätter accentfärgen till guld, men används försiktigt */
--theme-primary-color: #d4af37 !important;
--theme-text-color-highlight: #d4af37 !important;
--progressbar-fill: #d4af37 !important;
--selection-background: rgba(212, 175, 55, 0.2) !important;
}

/* --- ELEGANT KNAPP-STIL (OUTLINE ISTÄLLET FÖR SOLID) --- */
/* Gäller Play-knappar, Login, Spara etc */
.emby-button-submit,
.emby-button-primary,
.raised,
.fab,
.button-accent {
background: rgba(0, 0, 0, 0.3) !important; /* Mörk glas-bakgrund */
border: 1px solid rgba(212, 175, 55, 0.6) !important; /* Tunn guldram */
color: #d4af37 !important; /* Guld text */
box-shadow: none !important;
backdrop-filter: blur(4px) !important;
transition: all 0.2s ease !important;
}

/* När du håller musen över knappen */
.emby-button-submit:hover,
.emby-button-primary:hover,
.raised:hover,
.fab:hover,
.button-accent:hover {
background: rgba(212, 175, 55, 0.15) !important; /* Svag guldfyllning */
border-color: #d4af37 !important;
color: #fff !important; /* Texten blir vit för kontrast vid hover */
box-shadow: 0 0 15px rgba(212, 175, 55, 0.2) !important;
}

/* Play-knappen mitt på filmomslag (Overlay) */
.cardOverlayButton {
background-color: rgba(0, 0, 0, 0.6) !important;
border: 1px solid #d4af37 !important;
color: #d4af37 !important;
}
.cardOverlayButton:hover {
background-color: rgba(212, 175, 55, 0.2) !important;
color: #ffffff !important;
transform: scale(1.1) !important;
}

/* --- ACCENTER & DETALJER --- */
/* Progress bars (Tidslinjen) */
.itemProgressBarForeground,
.mdc-slider__thumb {
background-color: #d4af37 !important;
}
.mdc-slider__track--active_fill {
border-color: #d4af37 !important;
}

/* Ikoner i sidomenyn vid hover */
.sidebarNavItem:hover .sidebarNavItemIcon {
color: #d4af37 !important;
}

/* Aktivt val i menyn (bara textfärg och en liten kant) */
.navMenuOption-selected, .sidebarNavItem.active {
color: #d4af37 !important;
background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent) !important;
border-left: 3px solid #d4af37 !important;
border-right: none !important;
}

/* Bocken för "Spelad" (Behålls solid för tydlighet, men liten) */
.playedIndicator {
background: #d4af37 !important;
color: #000 !important;
box-shadow: 0 0 5px #d4af37 !important;
}

/* Stjärnor */
.starIcon {
color: #d4af37 !important;
}

/* Fokus (när man använder tangentbord/fjärrkontroll) */
.item-focus .cardBox, :focus-visible {
border-color: #d4af37 !important;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
}

[Sleazyslim]

Got a photo of build