Last active
April 10, 2026 22:56
-
-
Save HBIDamian/74a333f776c1ed6aedfb9dd4e91705b2 to your computer and use it in GitHub Desktop.
Standalone modern Jellyfin theme for Jellyfin Web 10.11+
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| ================================================================================ | |
| @ TITLE: OceanFin - JELLYFIN OCEAN THEME | |
| @ AUTHOR: HBIDamian (github.com/hbidamian) | |
| @ DESCRIPTION: Standalone modern Jellyfin theme for Jellyfin Web 10.11+ | |
| @ LICENSE: APACHE LICENSE 2.0 (https://www.apache.org/licenses/LICENSE-2.0) | |
| @ NOTES: | |
| - Designed for 10.11+ but may be compatible with earlier versions (untested). | |
| - Loosly based on https://github.com/loof2736/scyfin but with a more vibrant, ocean-inspired palette and a focus on smooth animations and visual polish. | |
| - Updates will only happen when I feel like it. or unless an update is suggested. It's mainly vibecoded anyway. | |
| - I may move this project onto actual github if I feel like it needs it. | |
| ================================================================================ | |
| */ | |
| @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap'); | |
| :root { | |
| /* Typography */ | |
| --font-body: 'Manrope', 'Segoe UI', sans-serif; | |
| --font-display: 'Sora', 'Manrope', sans-serif; | |
| /* Core palette */ | |
| --bg-0: #04090f; | |
| --bg-1: #08131c; | |
| --bg-2: #0d1d29; | |
| --bg-3: #132b3d; | |
| --app-bg-gradient: | |
| radial-gradient(140% 95% at 8% -22%, rgba(37, 240, 220, 0.18) 0%, rgba(37, 240, 220, 0) 62%), | |
| radial-gradient(130% 92% at 92% -18%, rgba(79, 143, 255, 0.16) 0%, rgba(79, 143, 255, 0) 60%), | |
| linear-gradient(165deg, var(--bg-0) 0%, var(--bg-1) 44%, var(--bg-2) 100%); | |
| --surface-0: rgba(7, 16, 24, 0.70); | |
| --surface-1: rgba(11, 24, 35, 0.74); | |
| --surface-2: rgba(16, 33, 47, 0.79); | |
| --surface-3: rgba(24, 45, 63, 0.56); | |
| --accent-1: #3fd6ff; | |
| --accent-2: #25f0dc; | |
| --accent-3: #4f8fff; | |
| --accent-4: #9ceaff; | |
| --text-main: #e9f7ff; | |
| --text-strong: #ffffff; | |
| --text-muted: #9dbcd0; | |
| --text-faint: #6d899d; | |
| --border-soft: rgba(136, 216, 255, 0.14); | |
| --border-mid: rgba(110, 219, 255, 0.28); | |
| --border-strong: rgba(68, 222, 255, 0.44); | |
| --shadow-soft: 0 8px 18px rgba(1, 7, 13, 0.28); | |
| --shadow-card: 0 12px 24px rgba(0, 9, 17, 0.38); | |
| --shadow-glow: 0 0 0 1px rgba(66, 209, 255, 0.30), 0 0 14px rgba(46, 193, 255, 0.20); | |
| --radius-xs: 8px; | |
| --radius-sm: 12px; | |
| --radius-md: 16px; | |
| --radius-lg: 22px; | |
| --radius-pill: 999px; | |
| --blur-low: 6px; | |
| --blur-mid: 10px; | |
| --blur-high: 14px; | |
| --anim-fast: 160ms; | |
| --anim-base: 280ms; | |
| --anim-slow: 560ms; | |
| --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); | |
| --header-height: 62px; | |
| --header-control-size: 44px; | |
| --drawer-width: 292px; | |
| --nav-shell-1: rgba(6, 18, 30, 0.94); | |
| --nav-shell-2: rgba(10, 31, 47, 0.82); | |
| --nav-shell-3: rgba(6, 16, 29, 0.96); | |
| --nav-circuit-line: rgba(112, 228, 255, 0.09); | |
| --nav-chip: rgba(13, 33, 46, 0.78); | |
| --nav-chip-hot: rgba(32, 72, 97, 0.92); | |
| --nav-edge: rgba(120, 227, 255, 0.30); | |
| --brand-banner-url: url('/web/banner-light.b113d4d1c6c07fcb73f0.png'); | |
| /* Compatibility aliases */ | |
| --theme-white: #ffffff; | |
| --theme-black: #000000; | |
| --rounded-cards: var(--radius-md); | |
| --header-font: var(--font-display); | |
| --primary-accent-color: var(--accent-1); | |
| --secondary-accent-color: rgba(37, 240, 220, 0.24); | |
| --outline-color: var(--border-mid); | |
| --skip-hide-duration: 8s; | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Animations | |
| ---------------------------------------------------------------------------- */ | |
| @keyframes tab-dot { | |
| 0%, | |
| 100% { | |
| transform: translateX(-50%) scale(0.7); | |
| opacity: 0.35; | |
| } | |
| 50% { | |
| transform: translateX(-50%) scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes nav-circuit-scroll { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 220px 0; } | |
| } | |
| @keyframes nav-edge-glow { | |
| 0%, | |
| 100% { | |
| opacity: 0.56; | |
| filter: saturate(1); | |
| } | |
| 50% { | |
| opacity: 1; | |
| filter: saturate(1.22); | |
| } | |
| } | |
| @keyframes osd-volume-glow { | |
| 0%, | |
| 100% { | |
| box-shadow: | |
| 0 0 12px rgba(63, 214, 255, 0.24), | |
| 0 0 24px rgba(79, 143, 255, 0.16); | |
| } | |
| 50% { | |
| box-shadow: | |
| 0 0 18px rgba(63, 214, 255, 0.35), | |
| 0 0 34px rgba(79, 143, 255, 0.22); | |
| } | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Global foundations | |
| ---------------------------------------------------------------------------- */ | |
| html, | |
| body { | |
| font-family: var(--font-body) !important; | |
| color: var(--text-main); | |
| background: var(--bg-0); | |
| min-height: 100%; | |
| height: auto; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| html { | |
| color-scheme: dark; | |
| scroll-behavior: smooth; | |
| background-color: var(--bg-0) !important; | |
| background-image: var(--app-bg-gradient) !important; | |
| background-repeat: no-repeat !important; | |
| background-attachment: fixed !important; | |
| overscroll-behavior-y: none; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| min-height: 100dvh; | |
| background: transparent !important; | |
| overscroll-behavior-y: none; | |
| } | |
| /* Ambient grid + vignette layers. */ | |
| body::before, | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| display: none; | |
| } | |
| body::before { | |
| background: | |
| repeating-linear-gradient(90deg, rgba(111, 173, 201, 0.06) 0 1px, transparent 1px 80px), | |
| repeating-linear-gradient(180deg, rgba(111, 173, 201, 0.04) 0 1px, transparent 1px 80px); | |
| opacity: 0.10; | |
| } | |
| body::after { | |
| background: radial-gradient(120% 80% at 50% 120%, transparent 50%, rgba(0, 0, 0, 0.56) 100%); | |
| } | |
| .backgroundContainer:not(.withBackdrop):not(.backgroundContainer-transparent), | |
| .noBackdropTransparency .detailPageSecondaryContainer { | |
| background: transparent !important; | |
| } | |
| .skinBody, | |
| .skinBody-withoutHeader, | |
| .mainAnimatedPage, | |
| .libraryPage, | |
| .page { | |
| background-color: transparent !important; | |
| } | |
| .backgroundContainer.withBackdrop .backgroundImage { | |
| filter: brightness(0.72) contrast(1.06) saturate(1.04); | |
| } | |
| .darkenContent { | |
| backdrop-filter: none !important; | |
| -webkit-backdrop-filter: none !important; | |
| background: linear-gradient(180deg, transparent 5%, rgba(5, 10, 16, 0.84) 92%) !important; | |
| } | |
| /* Performance mode for weaker clients: remove expensive real-time blur layers. */ | |
| .skinHeader, | |
| .skinHeader-withBackground, | |
| .skinHeader.semiTransparent, | |
| .headerTabs.sectionTabs, | |
| .mainDrawer, | |
| .drawer-open, | |
| .cardOverlayButton, | |
| .cardOverlayFab-primary, | |
| .dialog, | |
| .actionSheetContent, | |
| .paperList, | |
| .itemSelectionPanel, | |
| .toast.toastVisible, | |
| .upNextContainer, | |
| .selectionCommandsPanel, | |
| .videoOsdBottom, | |
| .iconOsd, | |
| .sliderBubble { | |
| backdrop-filter: none !important; | |
| -webkit-backdrop-filter: none !important; | |
| } | |
| .page, | |
| .skinHeader, | |
| .dialog, | |
| .toast { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| .sectionTitle, | |
| .headerSection, | |
| .sidebarHeader { | |
| font-family: var(--font-display) !important; | |
| color: var(--text-strong); | |
| letter-spacing: 0.02em; | |
| } | |
| h1, | |
| h2, | |
| .sectionTitle { | |
| background: linear-gradient(92deg, var(--accent-4), var(--accent-1), var(--accent-3)); | |
| background-size: 170% auto; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| animation: none; | |
| } | |
| p, | |
| .listItemBody, | |
| .itemOverview, | |
| .itemMiscInfo, | |
| .mediaInfoText { | |
| color: var(--text-muted); | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Header and top navigation | |
| ---------------------------------------------------------------------------- */ | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) { | |
| position: relative; | |
| isolation: isolate; | |
| overflow: visible; | |
| background: | |
| linear-gradient(112deg, var(--nav-shell-1) 0%, var(--nav-shell-2) 48%, var(--nav-shell-3) 100%), | |
| linear-gradient(180deg, rgba(56, 186, 235, 0.16), rgba(56, 186, 235, 0.02) 52%, rgba(56, 186, 235, 0)) !important; | |
| border-bottom: 1px solid var(--nav-edge); | |
| box-shadow: | |
| 0 14px 32px rgba(0, 5, 13, 0.46), | |
| inset 0 1px 0 rgba(181, 236, 255, 0.14); | |
| backdrop-filter: blur(var(--blur-mid)); | |
| -webkit-backdrop-filter: blur(var(--blur-mid)); | |
| } | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent)::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| background: | |
| repeating-linear-gradient( | |
| 116deg, | |
| rgba(112, 228, 255, 0) 0 14px, | |
| var(--nav-circuit-line) 14px 16px, | |
| rgba(112, 228, 255, 0) 16px 30px | |
| ); | |
| mix-blend-mode: screen; | |
| opacity: 0.55; | |
| animation: nav-circuit-scroll 14s linear infinite; | |
| } | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent)::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| height: 2px; | |
| pointer-events: none; | |
| z-index: 1; | |
| background: linear-gradient(90deg, transparent 2%, var(--accent-2) 22%, var(--accent-4) 52%, var(--accent-3) 84%, transparent 98%); | |
| box-shadow: 0 0 15px rgba(74, 206, 255, 0.36); | |
| animation: nav-edge-glow 3.4s ease-in-out infinite; | |
| } | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) > * { | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .headerTop { | |
| min-height: calc(var(--header-height) + 2px); | |
| padding-inline: clamp(0.4rem, 1vw, 1rem); | |
| position: relative; | |
| overflow: visible !important; | |
| } | |
| .headerTop::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| height: 1px; | |
| pointer-events: none; | |
| background: linear-gradient(90deg, transparent 2%, rgba(122, 228, 255, 0.45) 16%, rgba(122, 228, 255, 0.45) 84%, transparent 98%); | |
| opacity: 0.62; | |
| } | |
| .headerLeft, | |
| .headerRight { | |
| gap: 8px; | |
| } | |
| .headerLeft { | |
| overflow: visible !important; | |
| } | |
| .headerLeft .pageTitle { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) | |
| :is(.headerButton, .paper-icon-button-light, button.emby-input-iconbutton):not(.headerUserButton):not(.headerUserButtonRound) { | |
| border-radius: 14px !important; | |
| transition: | |
| transform var(--anim-fast) var(--ease-smooth), | |
| border-color var(--anim-fast) ease, | |
| background-color var(--anim-fast) ease, | |
| box-shadow var(--anim-fast) ease, | |
| color var(--anim-fast) ease; | |
| } | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) | |
| :is(.paper-icon-button-light, button.emby-input-iconbutton):not(:disabled):not(.headerUserButton):not(.headerUserButtonRound) { | |
| position: relative; | |
| overflow: hidden; | |
| background: linear-gradient(170deg, rgba(20, 47, 65, 0.78), rgba(13, 30, 43, 0.86)) !important; | |
| border: 1px solid rgba(130, 223, 255, 0.22); | |
| box-shadow: inset 0 1px 0 rgba(188, 239, 255, 0.16); | |
| color: var(--text-main) !important; | |
| } | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) | |
| :is(.paper-icon-button-light, button.emby-input-iconbutton):not(:disabled):not(.headerUserButton):not(.headerUserButtonRound)::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: -130%; | |
| width: 56%; | |
| pointer-events: none; | |
| background: linear-gradient(110deg, rgba(196, 240, 255, 0), rgba(196, 240, 255, 0.48), rgba(196, 240, 255, 0)); | |
| transform: skewX(-18deg); | |
| transition: left var(--anim-base) var(--ease-smooth); | |
| } | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) | |
| :is(.paper-icon-button-light, button.emby-input-iconbutton):hover:not(:disabled):not(.headerUserButton):not(.headerUserButtonRound) { | |
| transform: scale(1.02); | |
| border-color: rgba(130, 233, 255, 0.56); | |
| color: var(--accent-4) !important; | |
| box-shadow: | |
| 0 0 0 1px rgba(113, 225, 255, 0.26), | |
| 0 8px 16px rgba(0, 7, 16, 0.46), | |
| 0 0 18px rgba(56, 194, 255, 0.25); | |
| } | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) | |
| :is(.paper-icon-button-light, button.emby-input-iconbutton):hover:not(:disabled):not(.headerUserButton):not(.headerUserButtonRound)::before { | |
| left: 128%; | |
| } | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) | |
| :is(.headerButton, .paper-icon-button-light) .material-icons { | |
| transition: transform var(--anim-fast) var(--ease-smooth), color var(--anim-fast) ease; | |
| } | |
| :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) | |
| :is(.headerButton, .paper-icon-button-light):hover .material-icons { | |
| transform: translateY(-1px) scale(1.09); | |
| } | |
| .headerTabs.sectionTabs { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 52px; | |
| padding: 6px clamp(0.45rem, 1.1vw, 1.1rem) 8px; | |
| background: linear-gradient(180deg, rgba(8, 20, 31, 0.88), rgba(8, 19, 30, 0.72) 62%, rgba(8, 19, 30, 0.90)) !important; | |
| border-top: 1px solid rgba(120, 227, 255, 0.12); | |
| border-bottom: 1px solid rgba(120, 227, 255, 0.22); | |
| backdrop-filter: blur(var(--blur-mid)); | |
| -webkit-backdrop-filter: blur(var(--blur-mid)); | |
| box-shadow: | |
| inset 0 1px 0 rgba(185, 238, 255, 0.12), | |
| 0 10px 24px rgba(0, 5, 12, 0.34); | |
| } | |
| .headerTabs.sectionTabs::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| background: radial-gradient(120% 150% at 50% -42%, rgba(79, 143, 255, 0.20), rgba(79, 143, 255, 0) 56%); | |
| opacity: 0.9; | |
| } | |
| .headerTabs.sectionTabs::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: -1px; | |
| height: 2px; | |
| pointer-events: none; | |
| background: linear-gradient(90deg, transparent 2%, var(--accent-2) 22%, var(--accent-4) 52%, var(--accent-3) 84%, transparent 98%); | |
| box-shadow: 0 0 14px rgba(74, 206, 255, 0.38); | |
| opacity: 0.94; | |
| } | |
| .emby-tabs-slider { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: fit-content; | |
| max-width: 100%; | |
| margin: 0 auto; | |
| padding: 6px; | |
| border-radius: 18px; | |
| border: 1px solid rgba(120, 227, 255, 0.22); | |
| background: linear-gradient(180deg, var(--nav-chip), rgba(10, 25, 37, 0.92)); | |
| box-shadow: | |
| inset 0 1px 0 rgba(196, 240, 255, 0.14), | |
| 0 10px 20px rgba(0, 8, 18, 0.48); | |
| } | |
| .emby-tabs-slider::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: inherit; | |
| pointer-events: none; | |
| background: linear-gradient(120deg, rgba(162, 234, 255, 0.16), transparent 38%, transparent 62%, rgba(162, 234, 255, 0.12)); | |
| opacity: 0.62; | |
| } | |
| .emby-tab-button { | |
| margin: 0; | |
| border-radius: 14px !important; | |
| padding: 8px 15px !important; | |
| border: 1px solid rgba(128, 224, 255, 0.12); | |
| background: linear-gradient(180deg, rgba(12, 30, 43, 0.80), rgba(8, 21, 32, 0.84)) !important; | |
| position: relative; | |
| overflow: hidden; | |
| transition: | |
| transform var(--anim-fast) var(--ease-smooth), | |
| border-color var(--anim-fast) ease, | |
| background-color var(--anim-fast) ease, | |
| box-shadow var(--anim-fast) ease; | |
| } | |
| .emby-tab-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: -125%; | |
| width: 50%; | |
| pointer-events: none; | |
| background: linear-gradient(112deg, rgba(196, 240, 255, 0), rgba(196, 240, 255, 0.5), rgba(196, 240, 255, 0)); | |
| transform: skewX(-18deg); | |
| transition: left var(--anim-base) var(--ease-smooth); | |
| } | |
| .emby-tab-button .emby-button-foreground { | |
| position: relative; | |
| z-index: 1; | |
| color: rgba(195, 224, 240, 0.86); | |
| font-family: var(--font-display); | |
| letter-spacing: 0.045em; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| font-size: 0.74rem; | |
| } | |
| .emby-tab-button:hover { | |
| transform: translateY(-2px); | |
| border-color: rgba(127, 228, 255, 0.45); | |
| background: linear-gradient(180deg, rgba(23, 50, 68, 0.80), rgba(14, 32, 45, 0.90)) !important; | |
| box-shadow: | |
| 0 8px 18px rgba(0, 8, 17, 0.46), | |
| inset 0 0 0 1px rgba(159, 237, 255, 0.16); | |
| } | |
| .emby-tab-button:hover::before { | |
| left: 128%; | |
| } | |
| .emby-tab-button:hover .emby-button-foreground { | |
| color: var(--text-strong); | |
| } | |
| .emby-tab-button.emby-tab-button-active { | |
| border-color: rgba(107, 229, 255, 0.64); | |
| background: | |
| linear-gradient(180deg, var(--nav-chip-hot), rgba(20, 50, 71, 0.92)), | |
| linear-gradient(105deg, rgba(37, 240, 220, 0.32), rgba(79, 143, 255, 0.32)) !important; | |
| box-shadow: | |
| 0 0 0 1px rgba(145, 237, 255, 0.18), | |
| 0 10px 22px rgba(0, 10, 20, 0.52), | |
| 0 0 24px rgba(48, 198, 255, 0.25); | |
| } | |
| .emby-tab-button.emby-tab-button-active .emby-button-foreground { | |
| color: var(--text-strong); | |
| text-shadow: 0 0 8px rgba(73, 210, 255, 0.40); | |
| } | |
| .emby-tab-button.emby-tab-button-active .emby-button-foreground::after { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| bottom: -0.7rem; | |
| width: clamp(10px, 1vw, 14px); | |
| height: 3px; | |
| border-radius: var(--radius-pill); | |
| background: linear-gradient(90deg, var(--accent-2), var(--accent-4), var(--accent-3)); | |
| box-shadow: 0 0 12px rgba(37, 240, 220, 0.52); | |
| transform: translateX(-50%); | |
| animation: tab-dot 3.4s ease-in-out infinite; | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Drawer and side navigation | |
| ---------------------------------------------------------------------------- */ | |
| .mainDrawer, | |
| .drawer-open { | |
| background: | |
| linear-gradient(160deg, rgba(9, 22, 33, 0.74) 0%, rgba(12, 31, 45, 0.66) 54%, rgba(8, 19, 31, 0.80) 100%), | |
| linear-gradient(180deg, rgba(176, 236, 255, 0.10) 0%, rgba(176, 236, 255, 0.02) 38%, rgba(89, 163, 255, 0.08) 100%) !important; | |
| border-right: 1px solid rgba(136, 220, 250, 0.34); | |
| box-shadow: | |
| 14px 0 32px rgba(0, 6, 14, 0.46), | |
| inset 0 1px 0 rgba(203, 245, 255, 0.20), | |
| inset 0 0 0 1px rgba(120, 207, 240, 0.10); | |
| backdrop-filter: blur(18px) saturate(1.24) !important; | |
| -webkit-backdrop-filter: blur(18px) saturate(1.24) !important; | |
| } | |
| .layout-desktop .mainDrawer { | |
| width: var(--drawer-width) !important; | |
| min-width: var(--drawer-width) !important; | |
| z-index: 1099 !important; | |
| border-top-right-radius: var(--radius-md) !important; | |
| border-bottom-right-radius: var(--radius-md) !important; | |
| } | |
| .mainDrawer.touch-menu-la { | |
| position: fixed !important; | |
| top: 0 !important; | |
| bottom: 0 !important; | |
| display: flex !important; | |
| } | |
| .mainDrawer.drawer-open { | |
| display: flex !important; | |
| } | |
| .layout-desktop body:not(.hideMainDrawer) .mainDrawerButton { | |
| display: inline-flex !important; | |
| visibility: visible !important; | |
| opacity: 1 !important; | |
| } | |
| .layout-desktop body:not(.hideMainDrawer) .skinHeader:not(.noHomeButtonHeader) .headerHomeButton { | |
| display: block !important; | |
| } | |
| .layout-desktop .libraryPage, | |
| .layout-desktop .libraryPage:not(.noSecondaryNavPage) { | |
| margin-left: 0 !important; | |
| padding-left: 0 !important; | |
| } | |
| .layout-desktop .headerTabs { | |
| margin-left: 0 !important; | |
| } | |
| .mainDrawer::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 1px; | |
| height: 100%; | |
| background: linear-gradient(180deg, transparent, rgba(77, 223, 255, 0.52), transparent); | |
| } | |
| .mainDrawer .sidebarHeader { | |
| margin-top: 0.72em; | |
| margin-bottom: 0.62em; | |
| padding-top: 0.2rem; | |
| padding-bottom: 0.2rem; | |
| position: relative; | |
| padding-left: 0; | |
| text-align: center; | |
| font-size: 1.02rem; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| } | |
| .mainDrawer .sidebarHeader::before, | |
| .MuiDrawer-paper .sidebarHeader::before { | |
| content: ''; | |
| display: block; | |
| width: min(100%, calc(var(--drawer-width) - 24px)); | |
| height: clamp(56px, 7.6vh, 72px); | |
| margin: 0 auto 0.28rem; | |
| background-image: | |
| linear-gradient(90deg, transparent 2%, var(--accent-2) 22%, var(--accent-4) 52%, var(--accent-3) 84%, transparent 98%), | |
| var(--brand-banner-url); | |
| background-repeat: no-repeat, no-repeat; | |
| background-size: | |
| 100% 2px, | |
| min(152px, calc(var(--drawer-width) - 116px)) auto; | |
| background-position: center top, center calc(50% + 8px); | |
| filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.42)); | |
| opacity: 0.95; | |
| } | |
| .mainDrawer .sidebarHeader::after, | |
| .MuiDrawer-paper .sidebarHeader::after { | |
| content: ''; | |
| display: block; | |
| width: min(100%, calc(var(--drawer-width) - 24px)); | |
| height: 2px; | |
| margin: 0.36rem auto 0; | |
| background: linear-gradient(90deg, transparent 2%, var(--accent-2) 22%, var(--accent-4) 52%, var(--accent-3) 84%, transparent 98%); | |
| box-shadow: 0 0 10px rgba(74, 206, 255, 0.28); | |
| opacity: 0.92; | |
| } | |
| .mainDrawer-scrollContainer { | |
| padding-top: 8px; | |
| padding-bottom: 12px; | |
| -webkit-mask-image: none !important; | |
| mask-image: none !important; | |
| } | |
| .mainDrawer .scrollContainer, | |
| .mainDrawer .mainDrawer-scrollContainer, | |
| .mainDrawer .navMenuOption, | |
| .mainDrawer .navMenuOptionText, | |
| .mainDrawer .navMenuOptionIcon { | |
| opacity: 1 !important; | |
| visibility: visible !important; | |
| } | |
| .MuiDrawer-paper { | |
| background: | |
| linear-gradient(160deg, rgba(9, 22, 33, 0.80) 0%, rgba(12, 30, 44, 0.72) 58%, rgba(9, 21, 34, 0.84) 100%), | |
| linear-gradient(180deg, rgba(176, 236, 255, 0.12) 0%, rgba(176, 236, 255, 0.03) 38%, rgba(89, 163, 255, 0.10) 100%) !important; | |
| color: var(--text-main) !important; | |
| border-right: 1px solid rgba(136, 220, 250, 0.34) !important; | |
| box-shadow: | |
| 14px 0 32px rgba(0, 6, 14, 0.46), | |
| inset 0 1px 0 rgba(203, 245, 255, 0.20), | |
| inset 0 0 0 1px rgba(120, 207, 240, 0.10); | |
| backdrop-filter: blur(18px) saturate(1.24) !important; | |
| -webkit-backdrop-filter: blur(18px) saturate(1.24) !important; | |
| } | |
| .MuiDrawer-paper .MuiListItemText-primary, | |
| .MuiDrawer-paper .MuiListItemText-secondary, | |
| .MuiDrawer-paper .MuiSvgIcon-root, | |
| .MuiDrawer-paper .material-icons, | |
| .MuiDrawer-paper a { | |
| color: var(--text-main) !important; | |
| opacity: 1 !important; | |
| } | |
| .MuiDrawer-paper .MuiListSubheader-root { | |
| color: var(--text-muted) !important; | |
| opacity: 1 !important; | |
| } | |
| .navMenuOption { | |
| position: relative; | |
| margin: 6px 10px !important; | |
| border-radius: var(--radius-pill) !important; | |
| border: 1px solid transparent; | |
| transition: | |
| transform var(--anim-base) var(--ease-smooth), | |
| border-color var(--anim-fast) ease, | |
| background-color var(--anim-fast) ease, | |
| box-shadow var(--anim-fast) ease; | |
| animation: none; | |
| } | |
| .navMenuOption:nth-child(2) { animation-delay: 20ms; } | |
| .navMenuOption:nth-child(3) { animation-delay: 40ms; } | |
| .navMenuOption:nth-child(4) { animation-delay: 60ms; } | |
| .navMenuOption:nth-child(5) { animation-delay: 80ms; } | |
| .navMenuOption:nth-child(6) { animation-delay: 100ms; } | |
| .navMenuOption:nth-child(7) { animation-delay: 120ms; } | |
| .navMenuOption::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 12%; | |
| width: 3px; | |
| height: 76%; | |
| border-radius: var(--radius-pill); | |
| background: linear-gradient(180deg, var(--accent-2), var(--accent-1), var(--accent-3)); | |
| opacity: 0; | |
| transition: opacity var(--anim-fast) ease; | |
| } | |
| .navMenuOption:hover { | |
| transform: translateX(4px); | |
| border-color: var(--border-mid); | |
| background: rgba(25, 50, 69, 0.46); | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .navMenuOption:hover::before { | |
| opacity: 1; | |
| } | |
| a.navMenuOption-selected { | |
| border-color: var(--border-strong); | |
| background: | |
| linear-gradient(180deg, rgba(30, 65, 88, 0.68), rgba(23, 52, 74, 0.64)), | |
| linear-gradient(100deg, rgba(63, 214, 255, 0.22), rgba(79, 143, 255, 0.20)) !important; | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .navMenuOptionIcon { | |
| color: var(--accent-1) !important; | |
| transition: transform var(--anim-fast) var(--ease-smooth), color var(--anim-fast) ease; | |
| } | |
| .navMenuOptionText { | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| transition: color var(--anim-fast) ease; | |
| } | |
| .navMenuOption:hover .navMenuOptionIcon { | |
| color: var(--accent-4) !important; | |
| transform: scale(1.08); | |
| } | |
| .navMenuOption:hover .navMenuOptionText, | |
| a.navMenuOption-selected .navMenuOptionText { | |
| color: var(--text-main) !important; | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Card system and content rows | |
| ---------------------------------------------------------------------------- */ | |
| .cardBox, | |
| .cardContent, | |
| .cardPadder, | |
| .cardOverlayContainer, | |
| .blurhash-canvas, | |
| .defaultCardBackground, | |
| .visualCardBox { | |
| border-radius: var(--radius-md) !important; | |
| } | |
| .cardBox, | |
| .cardContent { | |
| transition: | |
| transform var(--anim-base) var(--ease-smooth), | |
| box-shadow var(--anim-base) ease, | |
| border-color var(--anim-base) ease, | |
| filter var(--anim-base) ease; | |
| } | |
| .cardBox:not(.visualCardBox) .cardPadder, | |
| .cardContent-shadow { | |
| border: 1px solid var(--border-soft); | |
| box-shadow: | |
| inset 0 1px 0 rgba(180, 230, 255, 0.10), | |
| var(--shadow-card) !important; | |
| background: | |
| linear-gradient(180deg, rgba(16, 33, 47, 0.72), rgba(10, 23, 34, 0.86)) !important; | |
| } | |
| /* Keep Jellyfin-provided card images visible (chapters/profiles can use this class). */ | |
| .defaultCardBackground { | |
| border: 1px solid var(--border-soft); | |
| box-shadow: | |
| inset 0 1px 0 rgba(180, 230, 255, 0.10), | |
| var(--shadow-card) !important; | |
| background-color: rgba(16, 33, 47, 0.72) !important; | |
| background-position: center center !important; | |
| background-repeat: no-repeat !important; | |
| background-size: cover !important; | |
| } | |
| /* Defensive visibility fixes for chapter and profile imagery. */ | |
| .chapterThumb img, | |
| .chapterThumbImage, | |
| .chapterThumbContainer img, | |
| .userImage, | |
| .userProfileImage, | |
| .headerUserButton img, | |
| .headerUserButtonRound img { | |
| opacity: 1 !important; | |
| visibility: visible !important; | |
| } | |
| .cardScalable { | |
| position: relative; | |
| } | |
| .cardScalable .cardOverlayContainer { | |
| position: absolute !important; | |
| inset: 0 !important; | |
| width: 100% !important; | |
| height: 100% !important; | |
| } | |
| .cardOverlayContainer:hover { | |
| transform: none; | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .cardOverlayContainer:hover .cardImage, | |
| .cardOverlayContainer:hover .blurhash-canvas { | |
| filter: saturate(1.15) brightness(1.04); | |
| } | |
| .cardOverlayButton, | |
| .cardOverlayFab-primary { | |
| border-radius: var(--radius-pill) !important; | |
| border: 1px solid var(--border-soft); | |
| background: rgba(8, 20, 29, 0.64) !important; | |
| backdrop-filter: blur(var(--blur-low)); | |
| -webkit-backdrop-filter: blur(var(--blur-low)); | |
| transition: | |
| transform var(--anim-fast) var(--ease-smooth), | |
| background-color var(--anim-fast) ease, | |
| border-color var(--anim-fast) ease; | |
| } | |
| .cardOverlayContainer > .cardOverlayFab-primary { | |
| position: absolute !important; | |
| top: 50% !important; | |
| left: 50% !important; | |
| width: 3em !important; | |
| height: 3em !important; | |
| margin-left: -1.5em !important; | |
| margin-top: -1.5em !important; | |
| padding: 0 !important; | |
| margin-right: 0 !important; | |
| margin-bottom: 0 !important; | |
| transform: none !important; | |
| box-sizing: border-box; | |
| z-index: 3; | |
| pointer-events: auto !important; | |
| } | |
| [dir='ltr'] .itemsContainer > .card > .cardBox, | |
| [dir='rtl'] .itemsContainer > .card > .cardBox { | |
| margin-left: 0.6em !important; | |
| margin-right: 0.6em !important; | |
| } | |
| .cardOverlayButton-br { | |
| gap: 4px; | |
| } | |
| .cardOverlayButton:hover { | |
| transform: scale(1.08); | |
| border-color: var(--border-mid); | |
| background: rgba(15, 35, 49, 0.82) !important; | |
| } | |
| .cardOverlayFab-primary:hover { | |
| transform: scale(1.08) !important; | |
| border-color: var(--border-mid); | |
| background: rgba(15, 35, 49, 0.82) !important; | |
| } | |
| .cardText, | |
| .cardText-secondary, | |
| .cardText-first { | |
| color: var(--text-main); | |
| } | |
| .cardText-secondary { | |
| color: var(--text-muted); | |
| } | |
| /* Keep overlay behavior vanilla; only visual styling is customized. */ | |
| .emby-scrollbuttons { | |
| display: inline-flex !important; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| flex: 0 0 fit-content !important; | |
| width: fit-content !important; | |
| max-width: fit-content !important; | |
| inline-size: fit-content !important; | |
| min-width: fit-content !important; | |
| flex-shrink: 0 !important; | |
| flex-grow: 0 !important; | |
| min-height: 0; | |
| margin: 0 !important; | |
| padding: 2px; | |
| line-height: 1; | |
| border-radius: var(--radius-pill); | |
| background: rgba(14, 28, 41, 0.62); | |
| border: 1px solid var(--border-soft); | |
| } | |
| .emby-scrollbuttons.padded-right { | |
| padding-right: 2px; | |
| } | |
| .emby-scrollbuttons > * { | |
| flex: 0 0 auto !important; | |
| } | |
| .emby-scrollbuttons .paper-icon-button-light, | |
| .emby-scrollbuttons button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex: 0 0 30px !important; | |
| width: 30px; | |
| height: 30px; | |
| min-width: 30px; | |
| min-height: 30px; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| .emby-scrollbuttons:empty, | |
| .emby-scrollbuttons:not(:has(.paper-icon-button-light:not(:disabled))):not(:has(button:not(:disabled))) { | |
| display: none !important; | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Detail pages and hero hierarchy | |
| ---------------------------------------------------------------------------- */ | |
| .layout-desktop .detailPagePrimaryContainer, | |
| .layout-desktop .detailPageContent { | |
| padding-left: 0 !important; | |
| } | |
| .layout-desktop #itemDetailPage .detailPageContent { | |
| width: 100%; | |
| max-width: min(1520px, 100%); | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| #itemDetailPage .detailPageWrapperContainer { | |
| position: relative; | |
| } | |
| .layout-desktop #itemDetailPage { | |
| --detail-shell-x: clamp(2.2%, 3.2vw, 4.2%); | |
| --detail-poster-col: clamp(218px, 17vw, 276px); | |
| --detail-col-gap: clamp(1rem, 2.2vw, 2rem); | |
| --detail-backdrop-height: clamp(88px, 14vh, 132px); | |
| --detail-logo-space: clamp(160px, 16vw, 252px); | |
| --detail-section-max-width: min(1240px, 100%); | |
| --detail-logo-offset-right: clamp(0.55rem, 1.3vw, 1rem); | |
| --detail-logo-top: calc(var(--detail-backdrop-height) + clamp(0.52rem, 0.9vw, 0.88rem)); | |
| --series-section-gap: clamp(0.42rem, 0.9vw, 0.78rem); | |
| } | |
| .layout-desktop #itemDetailPage .detailPageWrapperContainer { | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: var(--detail-poster-col) minmax(0, 1fr); | |
| column-gap: var(--detail-col-gap); | |
| row-gap: var(--series-section-gap); | |
| padding-left: var(--detail-shell-x) !important; | |
| padding-right: var(--detail-shell-x) !important; | |
| align-items: start; | |
| isolation: isolate; | |
| } | |
| .layout-desktop .detailPagePrimaryContent { | |
| padding-top: 0.4rem; | |
| padding-bottom: 0 !important; | |
| min-height: 0; | |
| grid-column: 2; | |
| grid-row: 2; | |
| padding-left: 0 !important; | |
| margin-bottom: 0 !important; | |
| position: relative; | |
| z-index: 4; | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .layout-desktop #itemDetailPage .detailPagePrimaryContent > :last-child { | |
| margin-bottom: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .layout-desktop #itemDetailPage .detailPagePrimaryContainer { | |
| position: relative; | |
| display: contents; | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| } | |
| #itemDetailPage .itemBackdrop { | |
| height: var(--detail-backdrop-height) !important; | |
| min-height: 0 !important; | |
| max-height: none; | |
| overflow: hidden; | |
| } | |
| .itemBackdrop::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(180deg, transparent 0%, rgba(5, 10, 16, 0.70) 64%, rgba(5, 10, 16, 0.96) 100%); | |
| pointer-events: none; | |
| } | |
| .layout-desktop .detailImageContainer .card { | |
| width: 248px; | |
| max-width: unset; | |
| margin: 0 !important; | |
| border-radius: var(--radius-lg) !important; | |
| border: 1px solid var(--border-soft); | |
| box-shadow: var(--shadow-card); | |
| } | |
| .layout-desktop #itemDetailPage .detailRibbon { | |
| grid-column: 2; | |
| grid-row: 1; | |
| position: relative; | |
| display: flex !important; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| margin: 0 !important; | |
| padding: 0.1rem 0 0 !important; | |
| border: 0; | |
| border-radius: 0; | |
| background: transparent !important; | |
| box-shadow: none; | |
| height: auto !important; | |
| min-height: 0; | |
| width: 100%; | |
| backdrop-filter: none; | |
| -webkit-backdrop-filter: none; | |
| align-items: center !important; | |
| align-content: flex-start !important; | |
| justify-content: space-between; | |
| } | |
| .layout-desktop #itemDetailPage .detailRibbon::before { | |
| content: none; | |
| } | |
| .layout-desktop #itemDetailPage .detailRibbon::after { | |
| content: none; | |
| } | |
| .layout-desktop #itemDetailPage .detailImageContainer.hide-mobile { | |
| grid-column: 1; | |
| grid-row: 1 / span 3; | |
| width: 100%; | |
| z-index: 1; | |
| align-self: stretch; | |
| } | |
| .layout-desktop #itemDetailPage .detailImageContainer.hide-mobile .card { | |
| position: sticky !important; | |
| top: calc(var(--header-height) + 0.95rem) !important; | |
| bottom: auto !important; | |
| width: 100% !important; | |
| max-width: none !important; | |
| left: 0 !important; | |
| float: none !important; | |
| margin: 0 !important; | |
| -webkit-backdrop-filter: none; | |
| backdrop-filter: none; | |
| } | |
| .layout-desktop #itemDetailPage .detailImageContainer.hide-mobile .cardBox { | |
| border-radius: var(--radius-lg) !important; | |
| overflow: hidden; | |
| box-shadow: 0 18px 40px rgba(0, 8, 18, 0.58), 0 0 0 1px rgba(157, 229, 255, 0.14); | |
| } | |
| .layout-desktop #itemDetailPage .infoWrapper { | |
| padding: 0.92rem calc(var(--detail-logo-space) + 0.55rem) 0.82rem 1.06rem; | |
| border: 1px solid var(--border-soft); | |
| border-left: 4px solid rgba(63, 214, 255, 0.42); | |
| border-radius: var(--radius-md); | |
| background: | |
| linear-gradient(112deg, rgba(10, 23, 35, 0.84), rgba(10, 23, 35, 0.66) 68%, rgba(11, 28, 41, 0.52)); | |
| box-shadow: var(--shadow-soft); | |
| max-width: 100%; | |
| display: block !important; | |
| gap: 0.5rem; | |
| width: 100%; | |
| box-sizing: border-box; | |
| min-height: 0; | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-bottom: 0.45rem; | |
| position: relative; | |
| } | |
| .layout-desktop #itemDetailPage .nameContainer { | |
| max-width: min(72ch, 100%); | |
| margin: 0; | |
| } | |
| #itemDetailPage .nameContainer .itemName, | |
| #itemDetailPage .nameContainer .parentName, | |
| #itemDetailPage .nameContainer .subtitle { | |
| background: none !important; | |
| -webkit-background-clip: border-box !important; | |
| background-clip: border-box !important; | |
| color: var(--text-strong) !important; | |
| } | |
| #itemDetailPage .nameContainer .parentName, | |
| #itemDetailPage .nameContainer .subtitle { | |
| color: var(--text-muted) !important; | |
| margin: 0; | |
| line-height: 1.3; | |
| } | |
| #itemDetailPage .nameContainer h1.itemName { | |
| margin: 0 0 0.24rem; | |
| font-size: clamp(1.72rem, 2.75vw, 2.58rem); | |
| line-height: 1.12; | |
| letter-spacing: 0.01em; | |
| color: var(--text-strong) !important; | |
| text-shadow: 0 2px 14px rgba(0, 0, 0, 0.56); | |
| } | |
| #itemDetailPage .nameContainer h4.itemName.originalTitle { | |
| margin: 0.06rem 0 0.14rem; | |
| font-size: clamp(0.92rem, 1.3vw, 1.04rem); | |
| letter-spacing: 0.03em; | |
| color: var(--text-faint) !important; | |
| } | |
| #itemDetailPage .itemMiscInfo-primary { | |
| margin-top: 0.2rem; | |
| } | |
| #itemDetailPage .itemMiscInfo-secondary { | |
| margin-top: 0.28rem; | |
| } | |
| .layout-desktop #itemDetailPage .detailLogo { | |
| display: block !important; | |
| position: absolute; | |
| top: var(--detail-logo-top); | |
| right: calc(var(--detail-shell-x) + var(--detail-logo-offset-right)); | |
| left: auto; | |
| transform: none; | |
| width: clamp(156px, 14.2vw, 264px); | |
| height: clamp(52px, 8.4vh, 94px); | |
| z-index: 6; | |
| opacity: 0.97; | |
| pointer-events: none; | |
| } | |
| .layout-desktop #itemDetailPage .detailLogo.hide { | |
| display: none !important; | |
| } | |
| .detailLogo { | |
| filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.48)); | |
| } | |
| .detailRibbon { | |
| background: transparent; | |
| padding-left: 0 !important; | |
| } | |
| .layout-desktop #itemDetailPage .mainDetailButtons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.52rem; | |
| margin-top: 0.54rem; | |
| margin-bottom: 0; | |
| width: 100%; | |
| padding: 0; | |
| border-radius: 0; | |
| border: 0; | |
| background: transparent; | |
| box-shadow: none; | |
| } | |
| .mainDetailButtons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 1rem; | |
| } | |
| .mainDetailButtons .detailButton, | |
| .sessionCardButton, | |
| .raised { | |
| border-radius: var(--radius-pill) !important; | |
| border: 1px solid var(--border-soft); | |
| background: linear-gradient(180deg, rgba(16, 33, 46, 0.84), rgba(12, 25, 36, 0.78)) !important; | |
| color: var(--text-main) !important; | |
| box-shadow: inset 0 1px 0 rgba(162, 228, 255, 0.10); | |
| transition: | |
| transform var(--anim-fast) var(--ease-smooth), | |
| border-color var(--anim-fast) ease, | |
| box-shadow var(--anim-fast) ease, | |
| background-color var(--anim-fast) ease; | |
| } | |
| .mainDetailButtons .detailButton:hover, | |
| .sessionCardButton:hover, | |
| .raised:hover { | |
| transform: translateY(-1px); | |
| border-color: var(--border-mid); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .layout-desktop #itemDetailPage .mainDetailButtons .detailButton { | |
| min-width: 44px; | |
| min-height: 44px; | |
| padding: 0.55rem !important; | |
| } | |
| .btnPlay, | |
| .button-submit { | |
| background: | |
| linear-gradient(110deg, rgba(37, 240, 220, 0.95), rgba(63, 214, 255, 0.94), rgba(79, 143, 255, 0.92)) !important; | |
| color: #021019 !important; | |
| font-weight: 800 !important; | |
| border-color: rgba(175, 245, 255, 0.58) !important; | |
| background-size: 170% 170%; | |
| } | |
| .btnPlay:hover, | |
| .button-submit:hover { | |
| animation: none; | |
| } | |
| .detailPageSecondaryContainer { | |
| border-top: 1px solid var(--border-soft); | |
| background: linear-gradient(180deg, rgba(8, 17, 24, 0.50), rgba(8, 17, 24, 0.20)); | |
| } | |
| #itemDetailPage .detailPageSecondaryContainer { | |
| position: relative; | |
| border-top: 0 !important; | |
| margin-top: -1px; | |
| padding-top: 0 !important; | |
| z-index: 5; | |
| isolation: isolate; | |
| background: linear-gradient(180deg, rgba(6, 14, 20, 0.70), rgba(5, 12, 18, 0.88)); | |
| } | |
| #itemDetailPage .detailPageSecondaryContainer::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(180deg, rgba(6, 14, 20, 0.70), rgba(5, 12, 18, 0.88)); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| #itemDetailPage .detailPageSecondaryContainer > :first-child { | |
| margin-top: 0 !important; | |
| padding-top: 0 !important; | |
| } | |
| #itemDetailPage .detailPageSecondaryContainer > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Apply consistent spacing at the top of the secondary wrapper for all detail pages. */ | |
| .layout-desktop #itemDetailPage .detailPageSecondaryContainer { | |
| grid-column: 2; | |
| grid-row: 3; | |
| padding-top: 0 !important; | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .itemMiscInfo, | |
| .mediaInfoText, | |
| .itemName.infoText.parentNameLast, | |
| .itemName.originalTitle { | |
| color: var(--text-muted) !important; | |
| } | |
| #itemDetailPage .itemMiscInfo-primary, | |
| #itemDetailPage .itemMiscInfo-secondary { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.42rem; | |
| } | |
| #itemDetailPage .itemMiscInfo .mediaInfoItem, | |
| #itemDetailPage .itemMiscInfo > span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| padding: 0.22rem 0.56rem; | |
| border-radius: var(--radius-pill); | |
| border: 1px solid rgba(132, 211, 245, 0.2); | |
| background: rgba(9, 21, 31, 0.58); | |
| color: var(--text-main) !important; | |
| line-height: 1.25; | |
| } | |
| #itemDetailPage .detailSectionContent { | |
| position: relative; | |
| margin-top: 0.7rem; | |
| padding: 0.95rem 1rem; | |
| border: 1px solid var(--border-soft); | |
| border-left: 2px solid rgba(63, 214, 255, 0.42); | |
| border-radius: var(--radius-md); | |
| background: rgba(11, 24, 36, 0.58); | |
| box-shadow: var(--shadow-soft); | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| #itemDetailPage .detailSectionContent .overview { | |
| color: var(--text-main); | |
| line-height: 1.62; | |
| max-width: 72ch; | |
| } | |
| #itemDetailPage .detailSectionContent .tagline { | |
| color: var(--accent-4); | |
| opacity: 0.92; | |
| font-weight: 600; | |
| } | |
| #itemDetailPage .overview-expand { | |
| color: var(--accent-4) !important; | |
| font-weight: 700; | |
| } | |
| #itemDetailPage .itemTags, | |
| #itemDetailPage .itemExternalLinks { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.42rem; | |
| margin-top: 0.78rem !important; | |
| } | |
| #itemDetailPage .itemTags .button-link, | |
| #itemDetailPage .itemExternalLinks .button-link { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.22rem 0.56rem; | |
| border-radius: var(--radius-pill); | |
| border: 1px solid rgba(132, 211, 245, 0.26); | |
| background: rgba(9, 21, 31, 0.56); | |
| color: var(--text-main) !important; | |
| text-decoration: none; | |
| transition: border-color var(--anim-fast) ease, background-color var(--anim-fast) ease; | |
| } | |
| #itemDetailPage .itemTags .button-link:hover, | |
| #itemDetailPage .itemExternalLinks .button-link:hover { | |
| border-color: var(--border-mid); | |
| background: rgba(17, 36, 50, 0.74); | |
| } | |
| #itemDetailPage .itemDetailsGroup { | |
| margin-top: 0.75rem; | |
| display: grid; | |
| gap: 0.3rem; | |
| width: 100%; | |
| max-width: var(--detail-section-max-width, min(920px, 100%)); | |
| } | |
| #itemDetailPage .trackSelections { | |
| margin-top: 0.72rem; | |
| } | |
| #itemDetailPage .itemDetailsGroup > div { | |
| display: grid; | |
| grid-template-columns: clamp(74px, 8vw, 112px) minmax(0, 1fr); | |
| gap: 0.7rem; | |
| align-items: start; | |
| padding: 0.38rem 0.1rem; | |
| border-bottom: 1px dashed rgba(132, 211, 245, 0.22); | |
| } | |
| #itemDetailPage .itemDetailsGroup > div:last-child { | |
| border-bottom: 0; | |
| } | |
| #itemDetailPage .itemDetailsGroup h5, | |
| #itemDetailPage .itemDetailsGroup .MuiTypography-root { | |
| margin: 0; | |
| color: var(--text-faint) !important; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| } | |
| #itemDetailPage .itemDetailsGroup .button-link { | |
| color: var(--text-main) !important; | |
| text-decoration: none; | |
| } | |
| #itemDetailPage .itemDetailsGroup .button-link:hover { | |
| color: var(--accent-4) !important; | |
| } | |
| .trackSelections, | |
| .itemDetailsGroup { | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-soft); | |
| background: rgba(12, 26, 38, 0.58); | |
| box-shadow: var(--shadow-soft); | |
| } | |
| /* Detail lower area and cast/crew cleanup. Keep layout stable and readable. */ | |
| #itemDetailPage .detailSection { | |
| display: block !important; | |
| margin-bottom: 1.25rem; | |
| } | |
| #itemDetailPage .detailSection > * { | |
| margin-bottom: 1rem; | |
| } | |
| .layout-desktop #itemDetailPage .detailPagePrimaryContent .detailSection { | |
| margin-bottom: 0 !important; | |
| } | |
| .layout-desktop #itemDetailPage .detailPagePrimaryContent .detailSection > *:last-child { | |
| margin-bottom: 0 !important; | |
| } | |
| #itemDetailPage .trackSelections, | |
| #itemDetailPage .itemDetailsGroup, | |
| #itemDetailPage .detailVerticalSection, | |
| #itemDetailPage .nextUpSection, | |
| #itemDetailPage #childrenCollapsible, | |
| #itemDetailPage #listChildrenCollapsible, | |
| #itemDetailPage .programGuideSection { | |
| border: 1px solid var(--border-soft); | |
| border-radius: var(--radius-md); | |
| background: rgba(13, 27, 40, 0.64); | |
| padding: 0.82rem; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .layout-desktop #itemDetailPage .detailSectionContent, | |
| .layout-desktop #itemDetailPage .trackSelections, | |
| .layout-desktop #itemDetailPage .itemDetailsGroup, | |
| .layout-desktop #itemDetailPage .detailVerticalSection, | |
| .layout-desktop #itemDetailPage .nextUpSection, | |
| .layout-desktop #itemDetailPage #childrenCollapsible, | |
| .layout-desktop #itemDetailPage #listChildrenCollapsible, | |
| .layout-desktop #itemDetailPage .programGuideSection { | |
| width: 100%; | |
| max-width: var(--detail-section-max-width); | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #itemDetailPage .detailVerticalSection .sectionTitle, | |
| #itemDetailPage .nextUpSection .sectionTitle { | |
| margin-bottom: 0.55rem; | |
| } | |
| /* Clip card hover overflow in all detail rows (e.g., More Like This, children, cast). */ | |
| #itemDetailPage .detailVerticalSection, | |
| #itemDetailPage .nextUpSection, | |
| #itemDetailPage .detailSection [id$='Collapsible'] { | |
| position: relative; | |
| overflow: hidden; | |
| contain: paint; | |
| } | |
| #itemDetailPage .detailVerticalSection .itemsContainer, | |
| #itemDetailPage .nextUpSection .itemsContainer, | |
| #itemDetailPage .detailSection [id$='Collapsible'] .itemsContainer { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| #castCollapsible, | |
| #guestCastCollapsible { | |
| border-radius: var(--radius-md); | |
| position: relative; | |
| overflow: hidden; | |
| contain: paint; | |
| } | |
| #castCollapsible .itemsContainer, | |
| #guestCastCollapsible .itemsContainer, | |
| #castContent, | |
| #guestCastContent { | |
| gap: 0.72rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| #castContent .cardScalable, | |
| #guestCastContent .cardScalable { | |
| flex: 0 0 clamp(132px, 10.4vw, 166px); | |
| max-width: clamp(132px, 10.4vw, 166px); | |
| border: 1px solid var(--border-soft) !important; | |
| border-radius: var(--radius-md) !important; | |
| overflow: hidden !important; | |
| box-shadow: var(--shadow-soft); | |
| background: rgba(10, 22, 33, 0.72); | |
| } | |
| #castContent .cardImageContainer, | |
| #guestCastContent .cardImageContainer { | |
| background-position: center center !important; | |
| border-bottom: 1px solid rgba(132, 211, 245, 0.18); | |
| } | |
| #castContent .cardText, | |
| #guestCastContent .cardText { | |
| text-align: left; | |
| color: var(--text-main) !important; | |
| font-weight: 600; | |
| line-height: 1.25; | |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); | |
| } | |
| #castContent .cardText-secondary, | |
| #guestCastContent .cardText-secondary { | |
| color: var(--text-muted) !important; | |
| font-size: 0.9rem; | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Forms, dialogs, lists | |
| ---------------------------------------------------------------------------- */ | |
| textarea, | |
| input, | |
| select, | |
| .emby-input, | |
| .emby-textarea, | |
| .emby-select-withcolor, | |
| .emby-select { | |
| color: var(--text-main) !important; | |
| background: rgba(12, 24, 36, 0.78) !important; | |
| border: 1px solid var(--border-soft) !important; | |
| border-radius: var(--radius-sm) !important; | |
| box-shadow: inset 0 1px 0 rgba(157, 228, 255, 0.08); | |
| transition: | |
| border-color var(--anim-fast) ease, | |
| box-shadow var(--anim-fast) ease, | |
| background-color var(--anim-fast) ease; | |
| } | |
| .emby-input:focus, | |
| .emby-textarea:focus, | |
| .emby-select-withcolor:focus, | |
| select:focus, | |
| textarea:focus, | |
| input:focus { | |
| border-color: var(--border-strong) !important; | |
| box-shadow: 0 0 0 3px rgba(63, 214, 255, 0.18) !important; | |
| } | |
| .checkboxOutline, | |
| .multiSelectCheckboxOutline { | |
| border-radius: var(--radius-xs) !important; | |
| border-color: var(--border-mid) !important; | |
| } | |
| .emby-checkbox:checked + span + .checkboxOutline { | |
| background: rgba(63, 214, 255, 0.22); | |
| } | |
| .dialog, | |
| .actionSheetContent, | |
| .paperList, | |
| .itemSelectionPanel, | |
| .toast.toastVisible, | |
| .upNextContainer, | |
| .selectionCommandsPanel { | |
| border: 1px solid var(--border-soft) !important; | |
| border-radius: var(--radius-lg) !important; | |
| background: | |
| linear-gradient(180deg, rgba(13, 28, 40, 0.90), rgba(9, 20, 30, 0.88)) !important; | |
| backdrop-filter: blur(var(--blur-low)); | |
| -webkit-backdrop-filter: blur(var(--blur-low)); | |
| box-shadow: var(--shadow-card); | |
| } | |
| .formDialogHeader, | |
| .formDialogFooter { | |
| border-color: var(--border-soft) !important; | |
| } | |
| .formDialogFooterItem { | |
| border-radius: var(--radius-pill) !important; | |
| } | |
| .listItem, | |
| .listItem-border, | |
| .MuiButtonBase-root, | |
| .MuiListItemButton-root { | |
| border-radius: var(--radius-md) !important; | |
| transition: | |
| transform var(--anim-fast) var(--ease-smooth), | |
| background-color var(--anim-fast) ease, | |
| border-color var(--anim-fast) ease; | |
| } | |
| .listItem { | |
| border: 1px solid transparent; | |
| } | |
| .listItem:hover, | |
| .MuiButtonBase-root:hover, | |
| .MuiListItemButton-root:hover { | |
| transform: translateX(4px); | |
| border-color: var(--border-soft); | |
| background: rgba(25, 49, 68, 0.42); | |
| } | |
| .MuiListItemButton-root.Mui-selected, | |
| .Mui-selected { | |
| border: 1px solid var(--border-mid); | |
| background: rgba(42, 88, 120, 0.42) !important; | |
| } | |
| .listItem-overview p { | |
| display: -webkit-box; | |
| line-clamp: 3; | |
| box-orient: vertical; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .listItemImage { | |
| background-size: cover !important; | |
| border-radius: var(--radius-sm) !important; | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Progress bars, sliders, indicators | |
| ---------------------------------------------------------------------------- */ | |
| progress, | |
| .itemProgressBar, | |
| .taskProgressOuter, | |
| .mdl-slider-background-flex, | |
| .iconOsdProgressOuter, | |
| .playbackProgress, | |
| .backgroundProgress > div { | |
| border-radius: var(--radius-pill) !important; | |
| background: rgba(25, 45, 61, 0.62) !important; | |
| } | |
| progress::-webkit-progress-bar { | |
| background: rgba(25, 45, 61, 0.62); | |
| border-radius: var(--radius-pill); | |
| } | |
| progress::-webkit-progress-value, | |
| progress::-moz-progress-bar, | |
| .itemProgressBarForeground, | |
| .taskProgressInner, | |
| .iconOsdProgressInner, | |
| .playbackProgress > div, | |
| .mdl-slider-background-lower { | |
| background: | |
| linear-gradient(92deg, var(--accent-2), var(--accent-1), var(--accent-3)) !important; | |
| background-size: 180% 180%; | |
| border-radius: var(--radius-pill) !important; | |
| animation: none; | |
| } | |
| .mdl-slider::-webkit-slider-thumb { | |
| background: linear-gradient(140deg, var(--accent-2), var(--accent-1), var(--accent-3)) !important; | |
| border: 1px solid rgba(197, 243, 255, 0.75) !important; | |
| border-radius: 50% !important; | |
| box-shadow: 0 0 0 2px rgba(7, 17, 24, 0.72); | |
| } | |
| .mdl-slider-hoverthumb:hover::-moz-range-thumb, | |
| .mdl-slider::-moz-range-thumb { | |
| background: linear-gradient(140deg, var(--accent-2), var(--accent-1), var(--accent-3)) !important; | |
| border: 1px solid rgba(197, 243, 255, 0.75) !important; | |
| border-radius: 50% !important; | |
| } | |
| .sliderBubble { | |
| border-radius: var(--radius-pill); | |
| border: 1px solid var(--border-soft); | |
| background: rgba(10, 24, 35, 0.84); | |
| backdrop-filter: blur(var(--blur-low)); | |
| -webkit-backdrop-filter: blur(var(--blur-low)); | |
| } | |
| .countIndicator, | |
| .playedIndicator, | |
| .fullSyncIndicator, | |
| .mediaSourceIndicator, | |
| .notification_important { | |
| border-radius: var(--radius-pill); | |
| border: 1px solid var(--border-mid); | |
| background: linear-gradient(92deg, rgba(37, 240, 220, 0.36), rgba(79, 143, 255, 0.36)); | |
| color: var(--text-strong) !important; | |
| font-weight: 700; | |
| animation: none; | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Web player / OSD | |
| ---------------------------------------------------------------------------- */ | |
| .videoOsdBottom, | |
| .iconOsd { | |
| position: relative; | |
| overflow: visible; | |
| border: 1px solid rgba(138, 219, 250, 0.30) !important; | |
| border-radius: calc(var(--radius-lg) + 2px) !important; | |
| background: | |
| linear-gradient(165deg, rgba(9, 22, 33, 0.88) 0%, rgba(8, 20, 30, 0.82) 58%, rgba(6, 15, 25, 0.90) 100%), | |
| linear-gradient(180deg, rgba(185, 240, 255, 0.14) 0%, rgba(185, 240, 255, 0.02) 34%, rgba(87, 163, 255, 0.10) 100%) !important; | |
| backdrop-filter: blur(16px) saturate(1.18) !important; | |
| -webkit-backdrop-filter: blur(16px) saturate(1.18) !important; | |
| box-shadow: | |
| 0 14px 30px rgba(0, 5, 13, 0.56), | |
| inset 0 1px 0 rgba(201, 245, 255, 0.18), | |
| inset 0 -1px 0 rgba(73, 172, 240, 0.12); | |
| } | |
| .videoOsdBottom::before, | |
| .iconOsd::before { | |
| content: ''; | |
| position: absolute; | |
| left: 10px; | |
| right: 10px; | |
| top: 0; | |
| height: 1px; | |
| pointer-events: none; | |
| background: linear-gradient(90deg, transparent, rgba(156, 228, 255, 0.78), transparent); | |
| } | |
| .videoOsdBottom::after, | |
| .iconOsd::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| background: radial-gradient(120% 90% at 50% -20%, rgba(63, 214, 255, 0.14), rgba(63, 214, 255, 0) 60%); | |
| } | |
| .videoOsdBottom { | |
| position: fixed !important; | |
| width: min(98%, 1420px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| bottom: 0 !important; | |
| margin: 0 !important; | |
| padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); | |
| z-index: 30; | |
| } | |
| .videoOsdBottom .mdl-slider, | |
| .videoOsdBottom .mdl-slider-background-flex, | |
| .videoOsdBottom .sliderBubble { | |
| overflow: visible !important; | |
| } | |
| .videoOsdBottom .mdl-slider-background-flex, | |
| .videoOsdBottom .iconOsdProgressOuter, | |
| .videoOsdBottom .playbackProgress, | |
| .videoOsdBottom .backgroundProgress > div { | |
| height: 7px; | |
| border-radius: var(--radius-pill) !important; | |
| background: linear-gradient(180deg, rgba(21, 44, 61, 0.88), rgba(14, 32, 46, 0.82)) !important; | |
| box-shadow: inset 0 1px 0 rgba(176, 233, 255, 0.10); | |
| } | |
| .videoOsdBottom .mdl-slider-background-lower, | |
| .videoOsdBottom .iconOsdProgressInner, | |
| .videoOsdBottom .playbackProgress > div { | |
| box-shadow: | |
| 0 0 10px rgba(63, 214, 255, 0.30), | |
| 0 0 22px rgba(79, 143, 255, 0.20); | |
| } | |
| .iconOsdButton, | |
| .videoOsdBottom .paper-icon-button-light { | |
| width: 34px; | |
| height: 34px; | |
| min-width: 34px; | |
| min-height: 34px; | |
| border-radius: 12px !important; | |
| border: 1px solid rgba(129, 219, 252, 0.24); | |
| background: linear-gradient(180deg, rgba(15, 35, 49, 0.78), rgba(10, 25, 36, 0.92)) !important; | |
| color: var(--text-main) !important; | |
| box-shadow: inset 0 1px 0 rgba(188, 239, 255, 0.14); | |
| transition: | |
| transform var(--anim-fast) var(--ease-smooth), | |
| border-color var(--anim-fast) ease, | |
| box-shadow var(--anim-fast) ease, | |
| background-color var(--anim-fast) ease; | |
| } | |
| .iconOsdButton:hover, | |
| .videoOsdBottom .paper-icon-button-light:hover { | |
| transform: translateY(-1px); | |
| border-color: rgba(136, 233, 255, 0.55); | |
| box-shadow: | |
| 0 0 0 1px rgba(136, 233, 255, 0.16), | |
| 0 8px 14px rgba(0, 8, 18, 0.44), | |
| 0 0 14px rgba(63, 214, 255, 0.22); | |
| } | |
| .iconOsdProgressOuter { | |
| background: rgba(28, 52, 70, 0.72) !important; | |
| } | |
| .iconOsdProgressInner { | |
| box-shadow: 0 0 16px rgba(63, 214, 255, 0.32); | |
| } | |
| .volumeOsd, | |
| .iconOsd.volumeOsd { | |
| width: min(340px, calc(100vw - 2rem)) !important; | |
| max-width: min(340px, calc(100vw - 2rem)) !important; | |
| min-width: 0 !important; | |
| left: 50% !important; | |
| right: auto !important; | |
| transform: translateX(-50%) !important; | |
| margin: 0 auto !important; | |
| padding: 6px 10px !important; | |
| border-radius: var(--radius-lg) !important; | |
| border: 1px solid rgba(142, 226, 255, 0.42) !important; | |
| background: | |
| linear-gradient(160deg, rgba(7, 19, 30, 0.94) 0%, rgba(8, 21, 33, 0.90) 52%, rgba(6, 16, 28, 0.96) 100%), | |
| radial-gradient(115% 92% at 12% 0%, rgba(37, 240, 220, 0.16) 0%, rgba(37, 240, 220, 0) 62%), | |
| radial-gradient(110% 88% at 96% -8%, rgba(79, 143, 255, 0.20) 0%, rgba(79, 143, 255, 0) 66%) !important; | |
| box-shadow: | |
| 0 16px 32px rgba(0, 5, 14, 0.58), | |
| inset 0 1px 0 rgba(192, 241, 255, 0.2), | |
| inset 0 -1px 0 rgba(65, 165, 236, 0.14), | |
| 0 0 0 1px rgba(104, 223, 255, 0.14); | |
| } | |
| .volumeOsd::before, | |
| .iconOsd.volumeOsd::before { | |
| background: linear-gradient(90deg, transparent 3%, rgba(148, 229, 255, 0.88) 50%, transparent 97%); | |
| } | |
| .volumeOsd .mdl-slider-background-flex, | |
| .volumeOsd .iconOsdProgressOuter, | |
| .iconOsd.volumeOsd .mdl-slider-background-flex, | |
| .iconOsd.volumeOsd .iconOsdProgressOuter { | |
| height: 6px; | |
| border: 1px solid rgba(111, 213, 247, 0.18); | |
| background: linear-gradient(180deg, rgba(16, 38, 54, 0.9), rgba(11, 28, 42, 0.88)) !important; | |
| box-shadow: inset 0 1px 0 rgba(183, 236, 255, 0.13); | |
| } | |
| .volumeOsd .mdl-slider-background-lower, | |
| .volumeOsd .iconOsdProgressInner, | |
| .iconOsd.volumeOsd .mdl-slider-background-lower, | |
| .iconOsd.volumeOsd .iconOsdProgressInner { | |
| background: linear-gradient(95deg, var(--accent-2), var(--accent-1), var(--accent-3)) !important; | |
| background-size: 180% 180%; | |
| animation: osd-volume-glow 2.6s ease-in-out infinite; | |
| } | |
| .volumeOsd .mdl-slider::-webkit-slider-thumb, | |
| .iconOsd.volumeOsd .mdl-slider::-webkit-slider-thumb { | |
| width: 14px; | |
| height: 14px; | |
| border: 1px solid rgba(216, 247, 255, 0.92) !important; | |
| box-shadow: | |
| 0 0 0 2px rgba(8, 20, 30, 0.86), | |
| 0 0 12px rgba(63, 214, 255, 0.4); | |
| } | |
| .volumeOsd .mdl-slider-hoverthumb:hover::-moz-range-thumb, | |
| .volumeOsd .mdl-slider::-moz-range-thumb, | |
| .iconOsd.volumeOsd .mdl-slider-hoverthumb:hover::-moz-range-thumb, | |
| .iconOsd.volumeOsd .mdl-slider::-moz-range-thumb { | |
| width: 14px; | |
| height: 14px; | |
| border: 1px solid rgba(216, 247, 255, 0.92) !important; | |
| box-shadow: 0 0 12px rgba(63, 214, 255, 0.4); | |
| } | |
| .volumeOsd .iconOsdButton, | |
| .volumeOsd .paper-icon-button-light, | |
| .iconOsd.volumeOsd .iconOsdButton, | |
| .iconOsd.volumeOsd .paper-icon-button-light { | |
| width: 28px; | |
| height: 28px; | |
| min-width: 28px; | |
| min-height: 28px; | |
| border-radius: 10px !important; | |
| } | |
| .volumeOsd .sliderBubble, | |
| .iconOsd.volumeOsd .sliderBubble { | |
| border-color: rgba(139, 227, 255, 0.4); | |
| background: | |
| linear-gradient(165deg, rgba(13, 32, 46, 0.95), rgba(10, 25, 38, 0.92)), | |
| linear-gradient(180deg, rgba(180, 240, 255, 0.12), rgba(180, 240, 255, 0)) !important; | |
| color: var(--text-strong) !important; | |
| box-shadow: | |
| 0 8px 16px rgba(0, 7, 17, 0.5), | |
| 0 0 12px rgba(79, 143, 255, 0.22); | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Live TV and guide | |
| ---------------------------------------------------------------------------- */ | |
| .guideDateTabsSlider, | |
| .guide-headerTimeslots, | |
| .guideProgramCell, | |
| .guideChannelHeaderCell, | |
| .programCell { | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-soft); | |
| background: rgba(12, 25, 37, 0.70); | |
| } | |
| .guideProgramCell:focus, | |
| .programCell:focus { | |
| border-color: var(--border-strong); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| [dir='ltr'] .guideChannelName { | |
| margin-left: unset !important; | |
| } | |
| .guideChannelName, | |
| .guideChannelNumber { | |
| color: var(--text-main) !important; | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Plugin-aware styling | |
| ---------------------------------------------------------------------------- */ | |
| button.skip-button { | |
| border: 1px solid var(--border-mid) !important; | |
| border-radius: var(--radius-pill) !important; | |
| background: | |
| linear-gradient(110deg, rgba(37, 240, 220, 0.88), rgba(63, 214, 255, 0.88), rgba(79, 143, 255, 0.85)) !important; | |
| color: #03141e !important; | |
| font-weight: 800 !important; | |
| box-shadow: var(--shadow-glow); | |
| transition: transform var(--anim-fast) var(--ease-smooth), box-shadow var(--anim-fast) ease; | |
| } | |
| button.skip-button:hover, | |
| button.skip-button:focus { | |
| transform: scale(1.04); | |
| } | |
| #jellyfin-enhanced-panel, | |
| #jellyfin-enhanced-panel .tab-button, | |
| #je-osd-rating-container .je-chip.tmdb { | |
| border-radius: var(--radius-sm) !important; | |
| border: 1px solid var(--border-soft) !important; | |
| background: rgba(12, 24, 34, 0.74) !important; | |
| color: var(--text-main) !important; | |
| } | |
| #jellyfin-enhanced-panel .tab-button.active { | |
| border-color: var(--border-mid) !important; | |
| background: rgba(41, 83, 112, 0.48) !important; | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Responsive behavior | |
| ---------------------------------------------------------------------------- */ | |
| body:has(.libraryPage) .headerLeft .pageTitleWithLogo, | |
| body:has(.libraryPage) .headerLeft .pageTitleWithDefaultLogo { | |
| display: none !important; | |
| } | |
| /* Mobile layout devices can still be wide (e.g., tablets in landscape). */ | |
| .layout-mobile .headerTop { | |
| display: grid !important; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| grid-template-areas: 'left right'; | |
| align-items: center; | |
| column-gap: clamp(4px, 0.9vw, 8px); | |
| width: 100%; | |
| box-sizing: border-box; | |
| overflow: visible !important; | |
| } | |
| .layout-mobile .headerLeft, | |
| .layout-mobile .headerRight { | |
| display: flex !important; | |
| align-items: center; | |
| min-height: 40px; | |
| } | |
| .layout-mobile .headerLeft .pageTitleWithLogo, | |
| .layout-mobile .headerLeft .pageTitleWithDefaultLogo { | |
| display: none !important; | |
| } | |
| .layout-mobile .headerLeft { | |
| grid-area: left; | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| overflow: visible !important; | |
| } | |
| .layout-mobile .headerLeft .pageTitle, | |
| .layout-mobile .headerLeft .pageTitleWithLogo, | |
| .layout-mobile .headerLeft .pageTitleWithDefaultLogo { | |
| min-width: 0; | |
| width: auto; | |
| max-width: clamp(88px, 31vw, 196px); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .layout-mobile .headerRight { | |
| grid-area: right; | |
| flex: 0 0 auto; | |
| justify-self: end; | |
| justify-content: flex-end; | |
| gap: clamp(4px, 0.8vw, 6px); | |
| margin-left: 0; | |
| overflow: visible !important; | |
| } | |
| .layout-mobile .headerRight > * { | |
| flex: 0 0 auto; | |
| } | |
| .layout-mobile .headerRight .headerButton, | |
| .layout-mobile .headerRight .paper-icon-button-light, | |
| .layout-mobile .headerRight button.emby-input-iconbutton, | |
| .layout-mobile .headerUserButton, | |
| .layout-mobile .headerUserButtonRound { | |
| display: inline-flex !important; | |
| visibility: visible !important; | |
| opacity: 1 !important; | |
| width: clamp(32px, 4vw, 36px); | |
| height: clamp(32px, 4vw, 36px); | |
| min-width: clamp(32px, 4vw, 36px); | |
| min-height: clamp(32px, 4vw, 36px); | |
| padding: 0 !important; | |
| } | |
| .layout-mobile .headerSelectedPlayer, | |
| .layout-mobile .headerArrowImage { | |
| display: none !important; | |
| } | |
| /* Move mobile detail poster into the details flow for a cleaner top area. */ | |
| .layout-mobile #itemDetailPage .detailPagePrimaryContainer { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.45rem; | |
| } | |
| .layout-mobile #itemDetailPage .detailRibbon { | |
| order: 1; | |
| } | |
| .layout-mobile #itemDetailPage .detailImageContainer { | |
| order: 2; | |
| align-self: center; | |
| width: min(52vw, 192px); | |
| margin: 0.35rem auto 0.75rem !important; | |
| } | |
| .layout-mobile #itemDetailPage .detailImageContainer .card { | |
| width: 100% !important; | |
| max-width: none !important; | |
| margin: 0 !important; | |
| float: none !important; | |
| } | |
| .layout-mobile #itemDetailPage .detailImageContainer .cardBox { | |
| border-radius: var(--radius-md) !important; | |
| overflow: hidden !important; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| @media (min-width: 901px) { | |
| .layout-desktop :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .layout-desktop :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) | |
| :is(.headerButton, .paper-icon-button-light, button.emby-input-iconbutton):not(.headerUserButton):not(.headerUserButtonRound) { | |
| width: var(--header-control-size); | |
| height: var(--header-control-size); | |
| min-width: var(--header-control-size); | |
| min-height: var(--header-control-size); | |
| padding: 0 !important; | |
| } | |
| .layout-desktop :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) .headerHomeButton { | |
| display: inline-flex !important; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .layout-desktop :is(.skinHeader, .skinHeader-withBackground, .skinHeader.semiTransparent) .headerHomeButton :is(img, svg) { | |
| width: calc(var(--header-control-size) - 10px); | |
| height: calc(var(--header-control-size) - 10px); | |
| object-fit: contain; | |
| } | |
| .layout-desktop .headerTop { | |
| min-height: clamp(64px, 6.6vh, 74px); | |
| padding-inline: clamp(0.7rem, 1.6vw, 1.8rem); | |
| flex: 0 0 auto; | |
| border-bottom: 1px solid rgba(122, 228, 255, 0.18); | |
| overflow: visible !important; | |
| } | |
| .layout-desktop .headerTabs.sectionTabs { | |
| position: static !important; | |
| width: 100%; | |
| min-height: clamp(58px, 6.2vh, 70px); | |
| padding: 8px clamp(0.7rem, 1.5vw, 1.5rem) 10px; | |
| flex: 0 0 auto; | |
| margin: 4px 0 0 !important; | |
| } | |
| .layout-desktop .headerTop > .headerTabs.sectionTabs { | |
| width: 100% !important; | |
| margin-top: 6px !important; | |
| } | |
| .layout-desktop .emby-tabs-slider { | |
| padding: 6px; | |
| } | |
| } | |
| @media (max-width: 1200px) { | |
| .layout-desktop #itemDetailPage { | |
| --detail-poster-col: clamp(198px, 19vw, 246px); | |
| --detail-col-gap: clamp(0.8rem, 1.6vw, 1.3rem); | |
| --detail-backdrop-height: clamp(78px, 12.5vh, 116px); | |
| --detail-logo-space: clamp(136px, 15.8vw, 218px); | |
| --detail-logo-top: calc(var(--detail-backdrop-height) + clamp(0.44rem, 0.8vw, 0.72rem)); | |
| --series-section-gap: clamp(0.34rem, 0.75vw, 0.62rem); | |
| } | |
| .layout-desktop .detailPagePrimaryContent { | |
| padding-top: 0.34rem; | |
| } | |
| .layout-desktop .mainDrawer { | |
| width: 274px !important; | |
| } | |
| .layout-desktop #itemDetailPage .detailLogo { | |
| width: clamp(142px, 13.8vw, 220px); | |
| height: clamp(50px, 7.7vh, 80px); | |
| } | |
| .layout-desktop #itemDetailPage .detailImageContainer.hide-mobile .card { | |
| top: calc(var(--header-height) + 0.8rem) !important; | |
| } | |
| #itemDetailPage .nameContainer h1.itemName { | |
| font-size: clamp(1.62rem, 2.3vw, 2.25rem); | |
| } | |
| .emby-tab-button { | |
| padding: 8px 12px !important; | |
| } | |
| } | |
| @media (max-width: 1100px) { | |
| .layout-desktop #itemDetailPage { | |
| --detail-poster-col: clamp(184px, 18vw, 226px); | |
| --detail-logo-space: clamp(124px, 14.2vw, 180px); | |
| } | |
| .layout-desktop #itemDetailPage .detailLogo { | |
| width: clamp(126px, 12vw, 178px); | |
| height: clamp(46px, 7.2vh, 70px); | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| body { | |
| background-attachment: scroll !important; | |
| } | |
| /* Force poster into vertical detail flow on narrow screens, even if layout-desktop is active. */ | |
| #itemDetailPage .detailPagePrimaryContainer { | |
| display: flex !important; | |
| flex-direction: column !important; | |
| grid-template-columns: none !important; | |
| grid-template-areas: none !important; | |
| row-gap: 0.45rem !important; | |
| column-gap: 0 !important; | |
| padding-left: 0 !important; | |
| padding-right: 0 !important; | |
| } | |
| #itemDetailPage .detailRibbon { | |
| order: 1; | |
| width: 100%; | |
| margin: 0 !important; | |
| } | |
| #itemDetailPage .detailImageContainer, | |
| #itemDetailPage .detailImageContainer.hide-mobile { | |
| order: 2; | |
| align-self: center; | |
| width: min(52vw, 192px) !important; | |
| margin: 0.25rem auto 0.55rem !important; | |
| } | |
| #itemDetailPage .detailImageContainer .card, | |
| #itemDetailPage .detailImageContainer.hide-mobile .card { | |
| position: static !important; | |
| top: auto !important; | |
| width: 100% !important; | |
| max-width: none !important; | |
| margin: 0 !important; | |
| float: none !important; | |
| } | |
| #itemDetailPage .detailPagePrimaryContent { | |
| order: 3; | |
| width: 100%; | |
| max-width: 100% !important; | |
| box-sizing: border-box !important; | |
| padding-top: 0 !important; | |
| padding-inline: clamp(0.4rem, 2.8vw, 0.7rem) !important; | |
| } | |
| #itemDetailPage .infoWrapper, | |
| #itemDetailPage .detailSectionContent, | |
| #itemDetailPage .trackSelections, | |
| #itemDetailPage .itemDetailsGroup, | |
| #itemDetailPage .detailVerticalSection, | |
| #itemDetailPage .nextUpSection, | |
| #itemDetailPage #childrenCollapsible, | |
| #itemDetailPage #listChildrenCollapsible, | |
| #itemDetailPage .programGuideSection { | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| box-sizing: border-box !important; | |
| margin-left: 0 !important; | |
| margin-right: 0 !important; | |
| } | |
| .layout-mobile .headerTop { | |
| display: grid !important; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| grid-template-areas: 'left right'; | |
| align-items: center; | |
| column-gap: 6px; | |
| min-height: 54px; | |
| padding-inline: clamp(0.35rem, 2.8vw, 0.7rem); | |
| overflow: visible !important; | |
| } | |
| .layout-mobile .headerLeft, | |
| .layout-mobile .headerRight { | |
| display: flex !important; | |
| align-items: center; | |
| min-height: 40px; | |
| } | |
| .layout-mobile .headerLeft { | |
| grid-area: left; | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| gap: 6px; | |
| overflow: visible !important; | |
| } | |
| .layout-mobile .headerLeft .pageTitle, | |
| .layout-mobile .headerLeft .pageTitleWithLogo, | |
| .layout-mobile .headerLeft .pageTitleWithDefaultLogo { | |
| min-width: 0; | |
| width: auto; | |
| max-width: clamp(102px, 42vw, 220px); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .layout-mobile .headerRight { | |
| grid-area: right; | |
| flex: 0 0 auto; | |
| justify-self: end; | |
| justify-content: flex-end; | |
| gap: 6px; | |
| margin-left: 0; | |
| overflow: visible !important; | |
| } | |
| .layout-mobile .headerRight .headerButton, | |
| .layout-mobile .headerRight .paper-icon-button-light, | |
| .layout-mobile .headerRight button.emby-input-iconbutton, | |
| .layout-mobile .headerSearchButton, | |
| .layout-mobile .headerUserButton, | |
| .layout-mobile .headerUserButtonRound { | |
| width: clamp(34px, 9.8vw, 38px); | |
| height: clamp(34px, 9.8vw, 38px); | |
| min-width: clamp(34px, 9.8vw, 38px); | |
| min-height: clamp(34px, 9.8vw, 38px); | |
| padding: 0 !important; | |
| } | |
| #itemDetailPage .itemBackdrop { | |
| height: clamp(64px, 10.5vh, 92px) !important; | |
| max-height: 92px; | |
| } | |
| .layout-mobile .headerTabs, | |
| .layout-mobile .emby-tabs-slider, | |
| .layout-mobile .headerRight { | |
| height: auto; | |
| min-height: 40px; | |
| } | |
| .layout-mobile .headerTabs.sectionTabs { | |
| padding: 4px 8px 6px; | |
| } | |
| .layout-mobile .emby-tabs-slider { | |
| gap: 6px; | |
| padding: 4px; | |
| border-radius: 15px; | |
| } | |
| .layout-mobile .emby-tab-button { | |
| padding: 6px 10px !important; | |
| } | |
| .layout-mobile .mainDrawer { | |
| width: min(86vw, 320px) !important; | |
| } | |
| .layout-mobile .libraryPage:not(.noSecondaryNavPage) { | |
| padding-top: 8.1em !important; | |
| } | |
| .layout-mobile .emby-tabs-slider { | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .layout-mobile .emby-tabs-slider::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .layout-mobile .detailImageContainer .card { | |
| filter: none; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .layout-mobile .mainDetailButtons { | |
| gap: 8px; | |
| } | |
| .layout-mobile #itemDetailPage .detailRibbon { | |
| margin-top: 0.12rem; | |
| padding: 0.44rem clamp(0.4rem, 2.8vw, 0.72rem) 0.08rem !important; | |
| border: 0 !important; | |
| background: transparent !important; | |
| box-shadow: none !important; | |
| min-height: 0; | |
| } | |
| .layout-mobile #itemDetailPage .infoWrapper { | |
| gap: 0.42rem; | |
| margin-bottom: 0.3rem; | |
| padding: 0.72rem clamp(0.5rem, 2.8vw, 0.8rem) 0.62rem !important; | |
| } | |
| .layout-mobile #itemDetailPage .mainDetailButtons { | |
| margin-top: 0.45rem; | |
| } | |
| .layout-mobile #itemDetailPage .nameContainer h1.itemName { | |
| font-size: clamp(1.5rem, 7.2vw, 2rem); | |
| line-height: 1.15; | |
| } | |
| .layout-mobile #itemDetailPage .itemDetailsGroup > div { | |
| grid-template-columns: 1fr; | |
| gap: 0.3rem; | |
| padding: 0.3rem 0.1rem; | |
| } | |
| .layout-mobile #itemDetailPage .detailSectionContent, | |
| .layout-mobile #itemDetailPage .detailVerticalSection, | |
| .layout-mobile #itemDetailPage .nextUpSection, | |
| .layout-mobile #itemDetailPage #childrenCollapsible, | |
| .layout-mobile #itemDetailPage #listChildrenCollapsible { | |
| padding: clamp(0.58rem, 2.2vw, 0.8rem); | |
| } | |
| .layout-mobile #castContent .cardScalable, | |
| .layout-mobile #guestCastContent .cardScalable { | |
| flex: 0 0 124px; | |
| max-width: 124px; | |
| } | |
| .cardOverlayContainer:hover { | |
| transform: none; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .skinHeader, | |
| .skinHeader-withBackground, | |
| .skinHeader.semiTransparent { | |
| backdrop-filter: blur(var(--blur-mid)); | |
| -webkit-backdrop-filter: blur(var(--blur-mid)); | |
| } | |
| .layout-mobile .headerTop { | |
| column-gap: 4px; | |
| padding-inline: clamp(0.2rem, 2.2vw, 0.45rem); | |
| } | |
| .layout-mobile .headerLeft, | |
| .layout-mobile .headerRight { | |
| gap: 4px; | |
| } | |
| .layout-mobile .headerLeft .pageTitle, | |
| .layout-mobile .headerLeft .pageTitleWithLogo, | |
| .layout-mobile .headerLeft .pageTitleWithDefaultLogo { | |
| max-width: clamp(74px, 34vw, 136px); | |
| } | |
| .headerRight .paper-icon-button-light, | |
| .headerButton, | |
| .paper-icon-button-light { | |
| min-width: 34px; | |
| min-height: 34px; | |
| } | |
| .emby-tab-button { | |
| padding: 6px 9px !important; | |
| border-radius: 12px !important; | |
| } | |
| .emby-tab-button .emby-button-foreground { | |
| font-size: 0.68rem; | |
| letter-spacing: 0.035em; | |
| } | |
| .layout-mobile #itemDetailPage .itemMiscInfo-primary, | |
| .layout-mobile #itemDetailPage .itemMiscInfo-secondary { | |
| justify-content: center; | |
| } | |
| .layout-mobile #itemDetailPage .detailSectionContent { | |
| border-left-width: 1px; | |
| } | |
| .sectionTitle { | |
| font-size: 1.14rem; | |
| } | |
| .itemMiscInfo, | |
| .mediaInfoText, | |
| .listItemBody { | |
| font-size: 0.96rem; | |
| } | |
| } | |
| /* TV mode leans readable and less animated. */ | |
| @media (min-width: 100em) { | |
| .layout-tv .emby-tab-button, | |
| .layout-tv .navMenuOption, | |
| .layout-tv .detailButton, | |
| .layout-tv .paper-icon-button-light { | |
| transition-duration: var(--anim-fast); | |
| } | |
| .layout-tv .sectionTabs { | |
| font-size: 116%; | |
| } | |
| .layout-tv .itemMiscInfo, | |
| .layout-tv .mediaInfoText { | |
| font-size: 1.03rem; | |
| } | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Cross-device compatibility hardening | |
| ---------------------------------------------------------------------------- */ | |
| /* Keep core page spacing close to Jellyfin defaults on non-desktop layouts. */ | |
| .layout-mobile .libraryPage, | |
| .layout-mobile .libraryPage:not(.noSecondaryNavPage) { | |
| padding-top: 7.5em !important; | |
| } | |
| .layout-tv .libraryPage, | |
| .layout-tv .libraryPage:not(.noSecondaryNavPage) { | |
| padding-top: 8em !important; | |
| } | |
| /* Experimental app uses a fixed app bar stack; avoid legacy top padding clashes. */ | |
| .layout-experimental .mainAnimatedPage.libraryPage, | |
| .layout-experimental .libraryPage, | |
| .layout-experimental .content-primary { | |
| padding-top: 3.25rem !important; | |
| } | |
| .layout-experimental .withTabs .content-primary, | |
| .layout-experimental .pageWithAbsoluteTabs .content-primary { | |
| padding-top: 6.5rem !important; | |
| } | |
| /* Stabilize header/tab geometry on TV and mobile. */ | |
| .layout-mobile .skinHeader, | |
| .layout-mobile .skinHeader-withBackground, | |
| .layout-mobile .skinHeader.semiTransparent, | |
| .layout-tv .skinHeader, | |
| .layout-tv .skinHeader-withBackground, | |
| .layout-tv .skinHeader.semiTransparent { | |
| min-height: 0; | |
| } | |
| .layout-tv .headerTop { | |
| padding-inline: clamp(0.6rem, 1.5vw, 1.2rem); | |
| } | |
| .layout-mobile .headerTabs.sectionTabs, | |
| .layout-tv .headerTabs.sectionTabs { | |
| width: 100% !important; | |
| margin: 0 !important; | |
| padding-inline: clamp(0.35rem, 1.8vw, 0.8rem); | |
| } | |
| .layout-mobile .emby-tabs-slider, | |
| .layout-tv .emby-tabs-slider { | |
| width: 100%; | |
| max-width: 100%; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .layout-mobile .emby-tabs-slider::-webkit-scrollbar, | |
| .layout-tv .emby-tabs-slider::-webkit-scrollbar { | |
| display: none; | |
| } | |
| /* Prevent detail-page desktop geometry from leaking into TV/mobile. */ | |
| .layout-tv #itemDetailPage .detailPageWrapperContainer, | |
| .layout-mobile #itemDetailPage .detailPageWrapperContainer, | |
| .layout-tv #itemDetailPage .detailPagePrimaryContainer, | |
| .layout-mobile #itemDetailPage .detailPagePrimaryContainer { | |
| display: block !important; | |
| padding-left: clamp(0.5rem, 2.2vw, 1rem) !important; | |
| padding-right: clamp(0.5rem, 2.2vw, 1rem) !important; | |
| } | |
| .layout-tv #itemDetailPage .detailPagePrimaryContent, | |
| .layout-mobile #itemDetailPage .detailPagePrimaryContent, | |
| .layout-tv #itemDetailPage .detailPageSecondaryContainer, | |
| .layout-mobile #itemDetailPage .detailPageSecondaryContainer { | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| padding-left: 0 !important; | |
| padding-right: 0 !important; | |
| } | |
| .layout-tv #itemDetailPage .detailImageContainer .card, | |
| .layout-mobile #itemDetailPage .detailImageContainer .card { | |
| position: static !important; | |
| top: auto !important; | |
| left: auto !important; | |
| right: auto !important; | |
| width: min(44vw, 230px) !important; | |
| margin: 0 auto 0.7rem !important; | |
| } | |
| .layout-tv #itemDetailPage .infoWrapper, | |
| .layout-mobile #itemDetailPage .infoWrapper { | |
| padding-right: 1rem !important; | |
| text-align: center; | |
| } | |
| .layout-tv #itemDetailPage .detailLogo, | |
| .layout-mobile #itemDetailPage .detailLogo { | |
| position: static !important; | |
| width: min(62vw, 250px); | |
| height: auto; | |
| margin: 0 auto 0.6rem; | |
| display: block; | |
| } | |
| /* Keep drawers and OSD usable on TVs and narrow screens. */ | |
| .layout-tv .mainDrawer { | |
| width: min(320px, 32vw) !important; | |
| } | |
| @media (max-width: 900px) { | |
| .volumeOsd, | |
| .iconOsd.volumeOsd { | |
| width: min(300px, calc(100vw - 1.25rem)) !important; | |
| max-width: min(300px, calc(100vw - 1.25rem)) !important; | |
| padding: 5px 8px !important; | |
| } | |
| } | |
| /* ---------------------------------------------------------------------------- | |
| Accessibility and safety | |
| ---------------------------------------------------------------------------- */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.01ms !important; | |
| animation-iteration-count: 1 !important; | |
| transition-duration: 0.01ms !important; | |
| scroll-behavior: auto !important; | |
| } | |
| .cardOverlayContainer:hover, | |
| .navMenuOption:hover, | |
| .paper-icon-button-light:hover { | |
| transform: none !important; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment