Last active
October 24, 2025 14:20
-
-
Save HBIDamian/879079dcd6c5679549ea803479e69230 to your computer and use it in GitHub Desktop.
Retrowave/Magenta theme (with oled) for the Scyfin Jellyfin theme
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
| /* | |
| ═══════════════════════════════════════════════════════════════════════════════ | |
| JELLYFIN RETROWAVE THEME | |
| Based on Scyfin theme with custom retrowave enhancements | |
| Author: HBIDamian | |
| Compatible with: Jellyfin Web 10.9+ | |
| ═══════════════════════════════════════════════════════════════════════════════ | |
| */ | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| IMPORTS - Base themes and fonts | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* Scyfin base theme - provides foundation styling for Jellyfin */ | |
| @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css'); | |
| /* Scyfin drawer behavior - handles navigation drawer positioning */ | |
| @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css'); | |
| /* Scyfin OLED theme - provides dark color scheme with true blacks */ | |
| @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-oled.css'); | |
| /* Google Fonts - Orbitron for futuristic header styling */ | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap'); | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| CSS CUSTOM PROPERTIES - Theme variables and configuration | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| /* ── Retrowave Color Palette ────────────────────────────────────────── */ | |
| --retrowave-accent-color-1: #ff37ee; /* Bright magenta - primary accent */ | |
| --retrowave-accent-color-2: #8E78FD; /* Electric purple - secondary accent */ | |
| --retrowave-accent-color-3: #F7E900; /* Neon yellow - highlight color */ | |
| --retrowave-accent-color-4: #e837ff; /* Hot pink - variant accent */ | |
| /* ── Base Colors ────────────────────────────────────────────────────── */ | |
| --theme-white: #ffffff; /* Pure white */ | |
| --theme-black: #000000; /* Pure black */ | |
| --theme-transparent: transparent; /* Transparent value */ | |
| /* ── Retrowave Specific Colors ──────────────────────────────────────── */ | |
| --retrowave-pink: rgb(255, 55, 212); /* Specific pink used in glows */ | |
| --retrowave-accent-1-rgba: rgba(255, 55, 238, 1); /* Primary accent as rgba */ | |
| --retrowave-accent-2-rgba: rgba(142, 120, 253, 1); /* Secondary accent as rgba */ | |
| /* ── Alpha Variations ───────────────────────────────────────────────── */ | |
| --black-alpha-90: rgba(0, 0, 0, 0.9); /* 90% opacity black */ | |
| --black-alpha-85: rgba(0, 0, 0, 0.85); /* 85% opacity black */ | |
| --black-alpha-80: rgba(0, 0, 0, 0.8); /* 80% opacity black */ | |
| --black-alpha-75: rgba(0, 0, 0, 0.75); /* 75% opacity black */ | |
| --black-alpha-70: rgba(0, 0, 0, 0.7); /* 70% opacity black */ | |
| --black-alpha-69: rgba(0, 0, 0, 0.69); /* 69% opacity black */ | |
| --black-alpha-60: rgba(0, 0, 0, 0.6); /* 60% opacity black */ | |
| --black-alpha-50: rgba(0, 0, 0, 0.5); /* 50% opacity black */ | |
| --black-alpha-40: rgba(0, 0, 0, 0.4); /* 40% opacity black */ | |
| --white-alpha-10: rgba(255, 255, 255, 0.1); /* 10% opacity white */ | |
| --primary-glow-60: rgba(255, 55, 238, 0.6); /* Primary glow 60% */ | |
| --primary-glow-70: rgba(255, 55, 238, 0.7); /* Primary glow 70% */ | |
| --primary-glow-90: rgba(255, 55, 238, 0.9); /* Primary glow 90% */ | |
| --primary-glow-50: rgba(255, 55, 238, 0.5); /* Primary glow 50% */ | |
| --primary-glow-30: rgba(255, 55, 238, 0.3); /* Primary glow 30% */ | |
| --primary-glow-20: rgba(255, 55, 238, 0.2); /* Primary glow 20% */ | |
| --primary-glow-15: rgba(255, 55, 238, 0.15);/* Primary glow 15% */ | |
| --primary-glow-00: rgba(255, 55, 238, 0); /* Primary glow transparent */ | |
| --secondary-glow-90: rgba(142, 120, 253, 0.9); /* Secondary glow 90% */ | |
| /* ── Slider Border Colors ───────────────────────────────────────────── */ | |
| --slider-border: 1px solid var(--theme-black); /* Border for slider thumbs */ | |
| --slider-shadow: 0 0 1px 1px var(--theme-black), 0 0 3px 1px rgba(0, 0, 0, 0.31); /* Slider thumb shadow */ | |
| --slider-shadow-moz: 0 0 1px 0px var(--theme-black), 0 0 2px 0px rgba(0, 0, 0, 0.31); /* Mozilla slider shadow */ | |
| /* ── Theme Integration ──────────────────────────────────────────────── */ | |
| --primary-accent-color: var(--retrowave-accent-color-1); | |
| --secondary-accent-color: rgba(161, 12, 223, 0.25); | |
| /* ── Gradient Definitions ───────────────────────────────────────────── */ | |
| /* Vertical gradients for backgrounds and overlays */ | |
| --retrowave-fade: linear-gradient(180deg, var(--retrowave-accent-color-1) 0%, var(--retrowave-accent-color-2) 100%); | |
| --retrowave-fade-5: linear-gradient(0deg, var(--retrowave-accent-color-1) 0%, var(--retrowave-accent-color-2) 100%); | |
| /* Horizontal gradients for headers and text effects */ | |
| --retrowave-fade-2: linear-gradient(90deg, var(--retrowave-accent-color-1) 0%, var(--retrowave-accent-color-2) 100%); | |
| --retrowave-fade-4: linear-gradient(270deg, var(--retrowave-accent-color-1) 0%, var(--retrowave-accent-color-2) 100%); | |
| /* Diagonal gradient for special effects */ | |
| --retrowave-fade-3: linear-gradient(135deg, var(--retrowave-accent-color-1) 0%, var(--retrowave-accent-color-2) 100%); | |
| /* Sunset gradients for special text and progress bars */ | |
| --retrowave-sunset: linear-gradient(0deg, var(--retrowave-accent-color-1) 0%, var(--retrowave-accent-color-1) 20%, var(--retrowave-accent-color-3) 100%); | |
| --retrowave-sunset-2: linear-gradient(0deg, var(--retrowave-accent-color-1) 0%, var(--retrowave-accent-color-3) 100%); | |
| --retrowave-sunset-2-90deg: linear-gradient(75deg, var(--retrowave-accent-color-1), var(--retrowave-accent-color-3)); | |
| /* ── Visual Assets ──────────────────────────────────────────────────── */ | |
| --retrowave-image: url('https://miro.medium.com/v2/resize:fit:2000/format:webp/1*QHzHZjzk0ZNgujT6G7oSug.png'); | |
| /* ── Layout & Typography ────────────────────────────────────────────── */ | |
| --rounded-cards: 20px; /* Border radius for cards and UI elements */ | |
| --header-font: 'Orbitron', sans-serif; /* Futuristic font for headers */ | |
| /* ── Animation Timing ───────────────────────────────────────────────── */ | |
| --glow-animation-duration: 2s; /* Duration for glow effects */ | |
| --card-transition-duration: 0.3s; /* Hover transition speed for cards */ | |
| --nav-item-animation-delay: 0.05s; /* Staggered animation delay for nav items */ | |
| --tab-animation-duration: 0.4s; /* Tab animation duration */ | |
| --tab-animation-delay: 0.08s; /* Staggered delay for tab animations */ | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| KEYFRAME ANIMATIONS - Reusable animation definitions | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Gradient Animation ─────────────────────────────────────────────────── */ | |
| /* Smooth color transition animation for gradients */ | |
| @keyframes gradient { | |
| 0% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| 100% { | |
| background-position: 0% 50%; | |
| } | |
| } | |
| /* ── Glow Animation ─────────────────────────────────────────────────────── */ | |
| /* Pulsing glow effect for selected elements */ | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 4px 1px var(--retrowave-accent-color-1), | |
| 0 0 3px 2px var(--retrowave-accent-color-4), | |
| 0 0 2px 3px var(--retrowave-pink), | |
| 0 0 1px 4px var(--retrowave-accent-color-2); | |
| } | |
| to { | |
| box-shadow: 0 0 8px 2px var(--retrowave-accent-color-1), | |
| 0 0 6px 3px var(--retrowave-accent-color-4), | |
| 0 0 4px 4px var(--retrowave-pink), | |
| 0 0 2px 5px var(--retrowave-accent-color-2); | |
| } | |
| } | |
| /* ── Slide In Animation ─────────────────────────────────────────────────── */ | |
| /* Entry animation for navigation items */ | |
| @keyframes slideIn { | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| /* ── Tab Fade In Animation ──────────────────────────────────────────────── */ | |
| /* Staggered fade-in for tab buttons */ | |
| @keyframes fadeTabIn { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ── Pulse Glow Animation ───────────────────────────────────────────────── */ | |
| /* Subtle pulsing effect for indicators */ | |
| @keyframes pulse-glow { | |
| from { box-shadow: 0 0 0px var(--primary-glow-60); } | |
| to { box-shadow: 0 0 10px var(--primary-glow-90); } | |
| } | |
| /* ── Tab Dot Pulse Animation ────────────────────────────────────────────── */ | |
| /* Dot indicator animation for active tabs */ | |
| @keyframes pulseTabDot { | |
| 0%, 100% { transform: translateX(-50%) scale(0); opacity: 0; } | |
| 50% { transform: translateX(-50%) scale(1); opacity: 1; } | |
| } | |
| /* ── Progress Animation ─────────────────────────────────────────────────── */ | |
| /* Animated progress bar movement */ | |
| @keyframes progress-animation { | |
| from { background-position: 0% 50%; } | |
| to { background-position: 100% 50%; } | |
| } | |
| /* ── Gradient Shadow Animation ──────────────────────────────────────────── */ | |
| /* Color-shifting shadow effect */ | |
| @keyframes gradient-shadow { | |
| 0% { | |
| box-shadow: 0 0 4px 2px var(--retrowave-accent-color-1), 0 0 3px 3px var(--retrowave-accent-color-2); | |
| } | |
| 50% { | |
| box-shadow: 0 0 4px 2px var(--retrowave-accent-color-2), 0 0 3px 3px var(--retrowave-accent-color-1); | |
| } | |
| 100% { | |
| box-shadow: 0 0 4px 2px var(--retrowave-accent-color-1), 0 0 3px 3px var(--retrowave-accent-color-2); | |
| } | |
| } | |
| /* ── Spinning Animation ─────────────────────────────────────────────────── */ | |
| /* Continuous rotation for decorative elements */ | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 50% { transform: rotate(180deg) scale(1.2); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* ── Shine Animation ────────────────────────────────────────────────────── */ | |
| /* Light sweep effect for buttons */ | |
| @keyframes shine { | |
| 0% { transform: translateX(-100%) rotate(30deg); } | |
| 100% { transform: translateX(100%) rotate(30deg); } | |
| } | |
| /* ── Logo Pulse Animation ───────────────────────────────────────────────── */ | |
| /* Breathing glow effect for logos */ | |
| @keyframes logo-pulse { | |
| 0% { filter: drop-shadow(0 0 2px var(--primary-glow-70)); } | |
| 50% { filter: drop-shadow(0 0 5px var(--secondary-glow-90)); } | |
| 100% { filter: drop-shadow(0 0 2px var(--primary-glow-70)); } | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| DECORATIVE OVERLAYS - Background visual elements | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Spinning Vinyl Disc Overlay ────────────────────────────────────────── */ | |
| /* Animated retro vinyl disc that spins continuously in the background */ | |
| #overlay-disc { | |
| position: absolute !important; | |
| top: calc(50vh - (26vw / 2)) !important; /* Vertically center the disc */ | |
| right: 7% !important; /* Position on right side */ | |
| width: 26vw !important; /* Responsive width */ | |
| height: auto !important; /* Maintain aspect ratio */ | |
| display: block !important; | |
| animation: 30s linear infinite spin !important; /* Continuous slow spin */ | |
| z-index: -1 !important; /* Behind other content */ | |
| filter: brightness(80%) !important; /* Subtle dimming */ | |
| } | |
| /* ── Plot/Graph Overlay ─────────────────────────────────────────────────── */ | |
| /* Decorative plot or chart overlay for data visualization aesthetic */ | |
| #overlay-plot { | |
| position: absolute !important; | |
| top: 61% !important; /* Lower portion of viewport */ | |
| right: 41vw !important; /* Centered horizontally */ | |
| max-width: 54% !important; /* Responsive width constraint */ | |
| height: 50vh !important; /* Half viewport height */ | |
| display: block !important; | |
| font-size: 21px !important; /* Text size for any labels */ | |
| } | |
| /* ── Logo Overlay ───────────────────────────────────────────────────────── */ | |
| /* Brand logo overlay with precise positioning and responsive scaling */ | |
| #overlay-logo { | |
| position: absolute !important; | |
| top: 25vh !important; /* Quarter viewport from top */ | |
| left: 19vw !important; /* Left side positioning */ | |
| transform: translateX(-50%) !important; /* Center on left position */ | |
| margin-left: 12vw !important; /* Additional offset */ | |
| max-width: 50vw !important; /* Max half viewport width */ | |
| max-height: 23vh !important; /* Height constraint */ | |
| width: auto !important; /* Preserve aspect ratio */ | |
| height: auto !important; /* Preserve aspect ratio */ | |
| display: block !important; | |
| object-fit: contain; /* Prevent distortion */ | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| BACKGROUND SYSTEMS - Page backgrounds and backdrop handling | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Primary Background Container ────────────────────────────────────────── */ | |
| /* Main background for pages without custom backdrops */ | |
| .backgroundContainer:not(.withBackdrop):not(.backgroundContainer-transparent), | |
| .noBackdropTransparency .detailPageSecondaryContainer { | |
| /* Retrowave cityscape background with dark overlay for readability */ | |
| background: linear-gradient(var(--black-alpha-80), var(--black-alpha-80)), var(--retrowave-image) !important; | |
| background-size: cover !important; /* Scale to cover entire container */ | |
| background-position: center !important; /* Center the image */ | |
| background-attachment: fixed !important; /* Create parallax effect */ | |
| background-repeat: no-repeat !important; /* Prevent tiling */ | |
| background-color: var(--theme-black); /* Fallback solid color */ | |
| } | |
| .detailPagePrimaryContainer { | |
| background: unset !important; /* Ensure transparency over main background */ | |
| } | |
| .noBackdropTransparency .detailPageSecondaryContainer { | |
| background: unset !important; /* Maintain transparency */ | |
| } | |
| .noBackdropTransparency .detailPageSecondaryContainer { | |
| background: unset !important; /* Maintain transparency */ | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| TYPOGRAPHY - Font styling and text treatments | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Header Typography ──────────────────────────────────────────────────── */ | |
| /* Apply futuristic Orbitron font to all headers and section titles */ | |
| h1, h2, h3, .sectionTitle { | |
| font-family: var(--header-font); /* Orbitron for sci-fi aesthetic */ | |
| letter-spacing: 1px; /* Slight spacing for readability */ | |
| } | |
| /* ── Animated Section Headers ───────────────────────────────────────────── */ | |
| /* Gradient text effect for main headers with color animation */ | |
| h1, h2, .sectionTitle { | |
| background: linear-gradient(90deg, | |
| var(--retrowave-accent-color-1) 0%, | |
| var(--retrowave-accent-color-2) 50%, | |
| var(--retrowave-accent-color-1) 100%); | |
| background-size: 150% auto !important; /* Oversized for animation effect */ | |
| color: transparent; /* Hide original text color */ | |
| -webkit-background-clip: text !important; /* Clip background to text shape */ | |
| -moz-background-clip: text !important; | |
| -ms-background-clip: text !important; | |
| -o-background-clip: text !important; | |
| background-clip: text !important; | |
| animation: gradient 6s linear infinite !important; /* Smooth color shift */ | |
| } | |
| /* ── Media Info Text Styling ────────────────────────────────────────────── */ | |
| /* Special treatment for media information text with sunset gradient */ | |
| .mediaInfoText { | |
| background: var(--retrowave-sunset) !important; | |
| background-size: 200% auto !important; /* Oversized for animation */ | |
| color: transparent !important; /* Make text transparent for gradient */ | |
| -webkit-background-clip: text !important; | |
| background-clip: text !important; | |
| animation: gradient 8s linear infinite !important; /* Slower animation */ | |
| font-family: var(--header-font); /* Futuristic font */ | |
| font-size: 1.2em; /* Slightly larger */ | |
| font-weight: 500; /* Medium weight */ | |
| letter-spacing: 1px; /* Letter spacing for readability */ | |
| text-transform: uppercase; /* All caps for impact */ | |
| text-align: center; /* Center alignment */ | |
| margin: 0.5em 0; /* Vertical spacing */ | |
| padding: 0.5em 0; /* Internal padding */ | |
| text-shadow: 0 0 10px var(--primary-glow-50); /* Subtle glow */ | |
| border-radius: var(--rounded-cards); /* Rounded corners */ | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| CARD SYSTEM - Media cards, posters, and thumbnails | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Card Base Transitions ──────────────────────────────────────────────── */ | |
| /* Smooth animations for all card interactions */ | |
| .cardBox, .cardContent { | |
| transition: transform var(--card-transition-duration) ease, /* Scale effects */ | |
| box-shadow var(--card-transition-duration) ease, /* Shadow changes */ | |
| filter var(--card-transition-duration) ease; /* Brightness/contrast */ | |
| } | |
| /* ── Card Hover Effects ─────────────────────────────────────────────────── */ | |
| /* Enhanced interaction feedback for media cards */ | |
| .cardOverlayContainer { | |
| transition: transform 0.3s ease, filter 0.3s ease; | |
| } | |
| .cardOverlayContainer:hover { | |
| transform: scale(1.03); /* Slight scale increase */ | |
| filter: brightness(1.1) contrast(1.05); /* Enhanced visual pop */ | |
| } | |
| /* ── Card Button Interactions ───────────────────────────────────────────── */ | |
| /* Overlay buttons with enhanced hover states */ | |
| .cardOverlayButton { | |
| transition: all 0.2s ease-out; | |
| } | |
| .cardOverlayButton:hover { | |
| transform: scale(1.15); /* Prominent button scaling */ | |
| } | |
| /* ── Default Card Backgrounds ───────────────────────────────────────────── */ | |
| /* Gradient background for cards without cover art */ | |
| .defaultCardBackground { | |
| background: linear-gradient(var(--black-alpha-60), var(--black-alpha-60)), var(--retrowave-fade-3); | |
| transition: background 0.3s ease; | |
| } | |
| .defaultCardBackground:hover { | |
| background: linear-gradient(var(--black-alpha-50), var(--black-alpha-50)), var(--retrowave-fade-3); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| MOBILE HEADER SYSTEM - Responsive header behavior and styling | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Mobile Header with Tabs ────────────────────────────────────────────── */ | |
| /* Enhanced mobile header when section tabs are present */ | |
| .layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)) { | |
| transform: unset !important; /* Override default transform */ | |
| background: var(--black-alpha-40) !important; /* Semi-transparent background */ | |
| box-shadow: 0 4px 12px -8px var(--primary-glow-50) !important; /* Subtle glow */ | |
| z-index: 1 !important; /* Ensure proper stacking */ | |
| border-bottom: 1px solid var(--primary-glow-15) !important; /* Bottom accent */ | |
| backdrop-filter: blur(10px) !important; /* Blur effect for depth */ | |
| -webkit-backdrop-filter: blur(10px) !important; /* Safari support */ | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| NAVIGATION DRAWER - Main sidebar navigation styling | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Main Drawer Container ──────────────────────────────────────────────── */ | |
| /* Primary navigation drawer with retrowave background and smooth transitions */ | |
| .mainDrawer { | |
| /* Layered background: gradient overlay + retrowave cityscape */ | |
| background: linear-gradient(to bottom, var(--black-alpha-90), var(--black-alpha-85)), | |
| var(--retrowave-image) !important; | |
| background-size: cover !important; /* Scale background to cover */ | |
| background-position: center !important; /* Center background image */ | |
| background-attachment: fixed !important; /* Parallax effect */ | |
| border-right: 1px solid var(--primary-glow-30); /* Subtle accent border */ | |
| transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Smooth animations */ | |
| } | |
| /* ── Drawer Background Overlay ──────────────────────────────────────────── */ | |
| /* Additional depth layer for the drawer */ | |
| .mainDrawer:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, var(--theme-transparent), var(--black-alpha-70)); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| /* ── Drawer Header Styling ──────────────────────────────────────────────── */ | |
| /* Animated header text with gradient effect */ | |
| .mainDrawer .sidebarHeader { | |
| background: linear-gradient(90deg, | |
| var(--retrowave-accent-color-1) 0%, | |
| var(--retrowave-accent-color-2) 50%, | |
| var(--retrowave-accent-color-1) 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -moz-background-clip: text; | |
| -ms-background-clip: text; | |
| -o-background-clip: text; | |
| background-size: 150% auto !important; | |
| color: transparent; | |
| font-family: var(--header-font); | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| margin-top: 1.5em; | |
| text-align: center; | |
| text-transform: uppercase; | |
| position: relative; | |
| padding-bottom: 0.5em; | |
| animation: gradient 6s linear infinite !important; | |
| } | |
| /* ── Drawer Header Underline ────────────────────────────────────────────── */ | |
| /* Animated underline accent for header */ | |
| .mainDrawer .sidebarHeader:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 60%; | |
| height: 2px; | |
| background: linear-gradient(90deg, | |
| var(--retrowave-accent-color-1) 0%, | |
| var(--retrowave-accent-color-2) 50%, | |
| var(--retrowave-accent-color-1) 100%); | |
| background-size: 150% auto !important; | |
| border-radius: 2px; | |
| box-shadow: 0 0 8px var(--primary-accent-color); | |
| animation: gradient 6s linear infinite !important; | |
| } | |
| /* ── Desktop Drawer Width ───────────────────────────────────────────────── */ | |
| /* Consistent drawer width for desktop layout */ | |
| .layout-desktop .mainDrawer { | |
| width: 300px !important; | |
| } | |
| /* ── Navigation Menu Options ────────────────────────────────────────────── */ | |
| /* Individual navigation items with staggered animations */ | |
| .navMenuOption { | |
| margin: 8px 12px; | |
| border-radius: var(--rounded-cards); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| transform: translateX(-10px); /* Start position for animation */ | |
| opacity: 0.8; /* Start opacity for animation */ | |
| animation: slideIn 0.4s forwards; /* Slide-in entrance */ | |
| } | |
| /* ── Staggered Navigation Animation ─────────────────────────────────────── */ | |
| /* Progressive delays for smooth entrance effects */ | |
| .mainDrawer .navMenuOption:nth-child(2) { animation-delay: calc(var(--nav-item-animation-delay) * 1); } | |
| .mainDrawer .navMenuOption:nth-child(3) { animation-delay: calc(var(--nav-item-animation-delay) * 2); } | |
| .mainDrawer .navMenuOption:nth-child(4) { animation-delay: calc(var(--nav-item-animation-delay) * 3); } | |
| .mainDrawer .navMenuOption:nth-child(5) { animation-delay: calc(var(--nav-item-animation-delay) * 4); } | |
| .mainDrawer .navMenuOption:nth-child(6) { animation-delay: calc(var(--nav-item-animation-delay) * 5); } | |
| .mainDrawer .navMenuOption:nth-child(7) { animation-delay: calc(var(--nav-item-animation-delay) * 6); } | |
| .mainDrawer .navMenuOption:nth-child(8) { animation-delay: calc(var(--nav-item-animation-delay) * 7); } | |
| /* ── Navigation Hover Effects ───────────────────────────────────────────── */ | |
| /* Enhanced hover states for non-selected items */ | |
| .navMenuOption:not(.navMenuOption-selected):hover { | |
| transform: translateX(5px) scale(1.03); /* Slight movement and scale */ | |
| background: var(--primary-glow-15); /* Subtle background highlight */ | |
| box-shadow: 0 0 10px var(--primary-glow-30); /* Glow effect */ | |
| } | |
| /* ── Navigation Hover Accent Line ───────────────────────────────────────── */ | |
| /* Left accent line that grows on hover */ | |
| .navMenuOption:not(.navMenuOption-selected):before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 3px; | |
| height: 0; | |
| background: var(--retrowave-sunset); | |
| transition: height 0.3s ease; | |
| } | |
| .navMenuOption:not(.navMenuOption-selected):hover:before { | |
| height: 100%; /* Grow to full height */ | |
| } | |
| /* ── Navigation Active State ────────────────────────────────────────────── */ | |
| /* Pressed state feedback */ | |
| .navMenuOption:active { | |
| transform: translateX(5px) scale(0.98); /* Slight compression */ | |
| } | |
| /* ── Navigation Icon Styling ────────────────────────────────────────────── */ | |
| /* Gradient text effect for navigation icons */ | |
| .navMenuOptionIcon { | |
| background: linear-gradient(90deg, | |
| var(--retrowave-accent-color-1) 0%, | |
| var(--retrowave-accent-color-2) 50%, | |
| var(--retrowave-accent-color-1) 100%); | |
| -webkit-background-clip: text !important; | |
| background-clip: text !important; | |
| -moz-background-clip: text !important; | |
| -ms-background-clip: text !important; | |
| -o-background-clip: text !important; | |
| background-size: 150% auto !important; | |
| color: transparent !important; | |
| transition: all 0.3s ease; | |
| animation: gradient 6s linear infinite !important; | |
| } | |
| .navMenuOption:hover .navMenuOptionIcon { | |
| transform: scale(1.2); /* Scale up on hover */ | |
| text-shadow: 0 0 10px var(--primary-accent-color); | |
| } | |
| /* ── Navigation Text Styling ────────────────────────────────────────────── */ | |
| /* Text transitions for navigation labels */ | |
| .navMenuOptionText { | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .navMenuOption:hover .navMenuOptionText { | |
| color: var(--primary-accent-color) !important; | |
| letter-spacing: 0.5px; /* Slight letter expansion */ | |
| } | |
| /* ── Navigation Scroll Container ────────────────────────────────────────── */ | |
| /* Gradient mask for smooth scroll edges */ | |
| .mainDrawer-scrollContainer { | |
| -webkit-mask-image: linear-gradient(to bottom, var(--theme-transparent) 0%, var(--theme-black) 5%, var(--theme-black) 95%, var(--theme-transparent) 100%); | |
| mask-image: linear-gradient(to bottom, var(--theme-transparent) 0%, var(--theme-black) 5%, var(--theme-black) 95%, var(--theme-transparent) 100%); | |
| padding: 10px 0; | |
| } | |
| /* ── Selected Navigation Item ───────────────────────────────────────────── */ | |
| /* Active/current page styling with animated glow */ | |
| a.navMenuOption-selected { | |
| background: linear-gradient(var(--black-alpha-69), var(--black-alpha-69)), var(--retrowave-fade) !important; | |
| color: var(--theme-white) !important; | |
| border-radius: var(--rounded-cards) !important; | |
| box-shadow: 0 0 4px 1px var(--retrowave-accent-color-1), | |
| 0 0 3px 2px var(--retrowave-accent-color-4), | |
| 0 0 2px 3px var(--retrowave-pink), | |
| 0 0 1px 4px var(--retrowave-accent-color-2); | |
| animation: glow var(--glow-animation-duration) infinite alternate; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| HEADER TABS & SECTION NAVIGATION - Tab system styling | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Section Tabs Container ─────────────────────────────────────────────── */ | |
| /* Main container for section navigation tabs */ | |
| .headerTabs.sectionTabs { | |
| display: none; | |
| position: relative; | |
| background: var(--black-alpha-40); | |
| border-bottom: 1px solid var(--primary-glow-15); | |
| box-shadow: 0 4px 12px -8px var(--primary-glow-50); | |
| z-index: 1; | |
| padding: 0 8px; | |
| } | |
| /* ── Section Tabs Animated Underline ────────────────────────────────────── */ | |
| /* Growing underline effect on hover */ | |
| .headerTabs.sectionTabs:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: var(--retrowave-fade-2); | |
| transform: scaleX(0); | |
| transform-origin: right; | |
| transition: transform 1.2s ease-in-out; | |
| z-index: -1; | |
| opacity: 0.6; | |
| } | |
| .headerTabs.sectionTabs:hover:after { | |
| transform: scaleX(1); | |
| transform-origin: left; | |
| } | |
| /* ── Tab Slider Container ───────────────────────────────────────────────── */ | |
| /* Container for tab button scrolling */ | |
| .emby-tabs-slider { | |
| position: relative; | |
| overflow: visible; | |
| } | |
| /* ── Individual Tab Buttons ─────────────────────────────────────────────── */ | |
| /* Styling for each tab with staggered animations */ | |
| .emby-tab-button { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all var(--tab-animation-duration) ease; | |
| background: transparent !important; | |
| font-family: var(--header-font); | |
| letter-spacing: 1px; | |
| margin: 0 4px; | |
| opacity: 0; /* Start hidden for animation */ | |
| transform: translateY(-10px); /* Start position for animation */ | |
| animation: fadeTabIn var(--tab-animation-duration) forwards; | |
| } | |
| /* ── Staggered Tab Animations ───────────────────────────────────────────── */ | |
| /* Progressive entrance delays for smooth appearance */ | |
| .emby-tab-button:nth-child(1) { animation-delay: calc(var(--tab-animation-delay) * 1); } | |
| .emby-tab-button:nth-child(2) { animation-delay: calc(var(--tab-animation-delay) * 2); } | |
| .emby-tab-button:nth-child(3) { animation-delay: calc(var(--tab-animation-delay) * 3); } | |
| .emby-tab-button:nth-child(4) { animation-delay: calc(var(--tab-animation-delay) * 4); } | |
| .emby-tab-button:nth-child(5) { animation-delay: calc(var(--tab-animation-delay) * 5); } | |
| .emby-tab-button:nth-child(6) { animation-delay: calc(var(--tab-animation-delay) * 6); } | |
| .emby-tab-button:nth-child(7) { animation-delay: calc(var(--tab-animation-delay) * 7); } | |
| .emby-tab-button:nth-child(8) { animation-delay: calc(var(--tab-animation-delay) * 8); } | |
| /* ── Tab Button Text ────────────────────────────────────────────────────── */ | |
| /* Tab text styling with smooth transitions */ | |
| .emby-tab-button .emby-button-foreground { | |
| position: relative; | |
| z-index: 2; | |
| transition: all 0.3s ease; | |
| background: linear-gradient(90deg, var(--theme-white), var(--theme-white)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: var(--theme-white); | |
| } | |
| /* ── Tab Button Hover Effect ────────────────────────────────────────────── */ | |
| /* Enhanced hover state for tab buttons */ | |
| .emby-tab-button:hover .emby-button-foreground { | |
| color: var(--primary-accent-color) !important; | |
| letter-spacing: 1px; | |
| transform: scale(1.05); | |
| background: var(--retrowave-fade-2); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| /* ── Tab Underline Indicator ────────────────────────────────────────────── */ | |
| /* Bottom line that appears on hover */ | |
| .emby-tab-button:before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| width: 0; | |
| height: 3px; | |
| background: var(--retrowave-fade-2); | |
| transform: translateX(-50%); | |
| transition: width 0.3s ease, box-shadow 0.3s ease; | |
| box-shadow: 0 0 0px var(--primary-glow-00); | |
| z-index: 2; | |
| border-radius: 4px 4px 0 0; | |
| } | |
| .emby-tab-button:hover:before { | |
| width: 70%; | |
| box-shadow: 0 0 8px var(--primary-glow-70); | |
| } | |
| /* ── Tab Background Animation ───────────────────────────────────────────── */ | |
| /* Sliding background effect */ | |
| .emby-tab-button:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--primary-glow-00); | |
| transition: all 0.3s ease; | |
| z-index: 1; | |
| transform: skewX(-10deg) translateX(-120%); | |
| } | |
| .emby-tab-button:hover:after { | |
| transform: skewX(-10deg) translateX(0); | |
| } | |
| /* ── Active Tab Styling ─────────────────────────────────────────────────── */ | |
| /* Styling for currently selected tab */ | |
| .emby-tab-button.emby-tab-button-active { | |
| background: unset !important; | |
| } | |
| .emby-tab-button.emby-tab-button-active:before { | |
| width: 90%; | |
| height: 3px; | |
| box-shadow: 0 0 12px var(--primary-glow-90); | |
| } | |
| .emby-tab-button.emby-tab-button-active .emby-button-foreground { | |
| background: var(--retrowave-fade-2); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-weight: 500; | |
| letter-spacing: 1px; | |
| position: relative; | |
| } | |
| /* ── Active Tab Dot Indicator ───────────────────────────────────────────── */ | |
| /* Pulsing dot for active tab */ | |
| .emby-tab-button.emby-tab-button-active .emby-button-foreground:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -6px; | |
| left: 50%; | |
| width: 6px; | |
| height: 6px; | |
| background: var(--primary-accent-color); | |
| border-radius: 50%; | |
| transform: translateX(-50%) scale(0); | |
| animation: pulseTabDot 2s infinite; | |
| } | |
| /* ── Tab Slider Base Line ───────────────────────────────────────────────── */ | |
| /* Subtle base line under all tabs */ | |
| .emby-tabs-slider:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 1px; | |
| background: var(--primary-glow-20); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| HEADER BUTTONS - Navigation and action buttons | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Header Button Base ─────────────────────────────────────────────────── */ | |
| /* Ripple effect container for header buttons */ | |
| .headerButton { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* ── Header Button Ripple Effect ────────────────────────────────────────── */ | |
| /* Expanding circle animation on interaction */ | |
| .headerButton:after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| background: var(--white-alpha-10); | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| transition: width 0.4s ease, height 0.4s ease; | |
| } | |
| .headerButton:hover:after { | |
| width: 150%; | |
| height: 150%; | |
| } | |
| /* ── Header Button Icons ────────────────────────────────────────────────── */ | |
| /* Icon styling with proper layering */ | |
| .headerButton .material-icons { | |
| position: relative; | |
| z-index: 1; | |
| transition: all 0.3s ease; | |
| } | |
| /* ── Header Button Hover States ─────────────────────────────────────────── */ | |
| /* Enhanced hover effects for paper icon buttons */ | |
| .paper-icon-button-light:hover:not(:disabled):not(.headerUserButton):not(.headerUserButtonRound) { | |
| background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--retrowave-fade) !important; | |
| color: var(--primary-accent-color) !important; | |
| transform: scale(1.1); | |
| } | |
| /* ── Header Button Icon Hover ───────────────────────────────────────────── */ | |
| /* Gradient text effect on icon hover */ | |
| .headerButton:hover .material-icons { | |
| color: transparent !important; | |
| background: linear-gradient(90deg, | |
| var(--retrowave-accent-color-1) 0%, | |
| var(--retrowave-accent-color-2) 50%, | |
| var(--retrowave-accent-color-1) 100%); | |
| -webkit-background-clip: text !important; | |
| background-clip: text !important; | |
| -moz-background-clip: text !important; | |
| -ms-background-clip: text !important; | |
| -o-background-clip: text !important; | |
| background-size: 150% auto !important; | |
| transform: scale(1.1); | |
| animation: gradient 6s linear infinite !important; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| FORM CONTROLS - Input fields, buttons, and form elements | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Input Field Styling ────────────────────────────────────────────────── */ | |
| /* Base styling for text inputs and form controls */ | |
| textarea, | |
| input, | |
| select { | |
| color: var(--theme-white) !important; | |
| } | |
| /* ── Form Control Borders ───────────────────────────────────────────────── */ | |
| /* Consistent border styling for form elements */ | |
| .emby-checkbox+span+.checkboxOutline, | |
| .emby-checkbox:checked+span+.checkboxOutline, | |
| .emby-textarea, | |
| .emby-input, | |
| .emby-select-withcolor { | |
| border-radius: var(--rounded-cards) !important; | |
| border: 1px solid var(--outline-color) !important; | |
| } | |
| /* ── Override Default Borders ───────────────────────────────────────────── */ | |
| /* Remove default focus borders */ | |
| .emby-checkbox:checked + span + .checkboxOutline, | |
| .emby-checkbox:focus:not(:checked) + span + .checkboxOutline, | |
| .emby-input:focus, | |
| .emby-textarea:focus, | |
| .emby-select-withcolor:focus, | |
| .mdl-spinner__layer-1, | |
| .mdl-spinner__layer-2, | |
| .mdl-spinner__layer-3, | |
| .mdl-spinner__layer-4, | |
| .progressring-spiner { | |
| border: unset !important; | |
| } | |
| /* ── Focus State Styling ────────────────────────────────────────────────── */ | |
| /* Glowing border effect for focused form elements */ | |
| .emby-checkbox:focus:not(:checked)+span+.checkboxOutline, | |
| .emby-checkbox:checked+span+.checkboxOutline, | |
| .emby-input:focus, | |
| .emby-textarea:focus, | |
| .emby-select-withcolor:focus { | |
| border: 2px solid transparent; | |
| border-radius: var(--rounded-cards) !important; | |
| box-shadow: 0 0 4px 1px var(--retrowave-accent-color-1), | |
| 0 0 3px 2px var(--retrowave-accent-color-4), | |
| 0 0 2px 3px rgb(255, 55, 212), | |
| 0 0 1px 4px var(--retrowave-accent-color-2); | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| animation: gradient-shadow 1s linear infinite !important; | |
| } | |
| /* ── Button Base Styling ────────────────────────────────────────────────── */ | |
| /* Enhanced button appearances with gradient backgrounds */ | |
| button.emby-input-iconbutton, | |
| .button-submit, | |
| button.paper-icon-button-light:focus, | |
| .emby-button.show-focus:focus, | |
| .paper-icon-button-light:active:not(:disabled), | |
| .MuiListItemButton-root.Mui-selected { | |
| color: var(--theme-white) !important; | |
| background: linear-gradient(var(--black-alpha-75), var(--black-alpha-75)), var(--retrowave-fade) !important; | |
| transition: all 0.3s ease; | |
| } | |
| /* ── Button Hover States ────────────────────────────────────────────────── */ | |
| /* Enhanced hover effects for interactive buttons */ | |
| button.emby-input-iconbutton:hover, | |
| .button-submit:hover, | |
| button.paper-icon-button-light:hover, | |
| .cardOverlayButton:hover, | |
| .paper-icon-button-light:active:not(:disabled):hover, | |
| .MuiListItemButton-root.Mui-selected:hover { | |
| background: linear-gradient(var(--black-alpha-60), var(--black-alpha-60)), var(--retrowave-fade-5) !important; | |
| color: var(--primary-accent-color) !important; | |
| transform: translateY(-2px); /* Subtle lift effect */ | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| PROGRESS INDICATORS - Progress bars, sliders, and loading elements | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── HTML5 Progress Element ─────────────────────────────────────────────── */ | |
| /* Custom styling for native progress elements */ | |
| progress { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: unset !important; | |
| } | |
| /* ── Progress Bar Fill ──────────────────────────────────────────────────── */ | |
| /* Animated gradient fill for progress bars */ | |
| progress::-webkit-progress-value { | |
| background: var(--retrowave-fade-4) !important; | |
| border-radius: 20px; | |
| height: 20px; | |
| animation: progress-animation 1s ease-in-out infinite alternate; | |
| } | |
| /* ── Progress Bar Track ─────────────────────────────────────────────────── */ | |
| /* Background track styling */ | |
| progress::-webkit-progress-bar { | |
| background: var(--secondary-accent-color) !important; | |
| border-radius: 20px; | |
| height: 20px; | |
| } | |
| /* ── Task Progress Styling ──────────────────────────────────────────────── */ | |
| /* Dashboard task progress indicators */ | |
| .taskProgressInner { | |
| background: var(--retrowave-fade-4) !important; | |
| border-radius: 20px; | |
| height: 20px; | |
| background-size: 200% 100%; | |
| animation: progress-animation 1s ease-in-out infinite alternate; | |
| } | |
| .taskProgressOuter { | |
| background-color: var(--secondary-accent-color); | |
| border-radius: 20px; | |
| height: 20px; | |
| } | |
| /* ── Task Progress Text ─────────────────────────────────────────────────── */ | |
| /* Colored text for task progress */ | |
| div[id^="taskProgress"] div span { | |
| color: var(--primary-accent-color) !important; | |
| border-radius: 20px; | |
| } | |
| /* ── Item Progress Bars ─────────────────────────────────────────────────── */ | |
| /* Progress bars for media items (watch progress, etc.) */ | |
| .itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground), | |
| .playbackProgress div { | |
| background: var(--retrowave-fade-2) !important; | |
| border-radius: 20px; | |
| background-size: 200% 100%; | |
| animation: progress-animation 1s ease-in-out infinite alternate; | |
| } | |
| .itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) { | |
| background: var(--secondary-accent-color) !important; | |
| border-radius: 20px; | |
| } | |
| /* ── Media Slider Styling ───────────────────────────────────────────────── */ | |
| /* Custom slider appearance for media controls */ | |
| .mdl-slider-background-lower { | |
| background: var(--retrowave-fade-4) !important; | |
| border-radius: 20px; | |
| } | |
| .mdl-slider-background-flex, | |
| .iconOsdProgressOuter { | |
| background: var(--secondary-accent-color) !important; | |
| border-radius: 20px; | |
| } | |
| .iconOsdProgressInner { | |
| background: var(--retrowave-fade-4) !important; | |
| border-radius: 20px; | |
| background-size: 200% 100%; | |
| animation: progress-animation 1s ease-in-out infinite alternate; | |
| } | |
| /* ── Slider Thumb Styling ───────────────────────────────────────────────── */ | |
| /* Custom slider handle appearance */ | |
| .mdl-slider::-webkit-slider-thumb { | |
| background: var(--retrowave-sunset-2) !important; | |
| border: var(--slider-border) !important; | |
| border-radius: 50% !important; | |
| box-shadow: var(--slider-shadow) inset !important; | |
| transition: transform 0.2s ease; | |
| } | |
| .mdl-slider::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| } | |
| /* ── Firefox Slider Styling ─────────────────────────────────────────────── */ | |
| /* Firefox-specific slider thumb styling */ | |
| .mdl-slider-hoverthumb:hover::-moz-range-thumb { | |
| transform: scaleY(1.2) !important; | |
| height: 24px !important; | |
| width: 24px !important; | |
| background: var(--retrowave-sunset) !important; | |
| border: var(--slider-border) !important; | |
| border-radius: 50% !important; | |
| box-shadow: var(--slider-shadow-moz) inset !important; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| INDICATORS & COUNTERS - Status indicators and count badges | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Entry Info and Icon Buttons ────────────────────────────────────────── */ | |
| /* Styled buttons and icons throughout the interface */ | |
| .btnEntryInfo, | |
| .listItemIcon.notification_important, | |
| .listItemIcon:not(.listItemIcon-transparent):not(.notification_important) { | |
| background: linear-gradient(var(--black-alpha-69), var(--black-alpha-69)), var(--retrowave-fade) !important; | |
| color: var(--theme-white) !important; | |
| } | |
| /* ── List Item Hover Effects ────────────────────────────────────────────── */ | |
| /* Smooth slide animation for list items */ | |
| .listItem:hover { | |
| background: linear-gradient(var(--black-alpha-69), var(--black-alpha-69)), var(--retrowave-fade) !important; | |
| transform: translateX(5px); | |
| transition: transform 0.2s ease; | |
| } | |
| /* ── Count and Status Indicators ────────────────────────────────────────── */ | |
| /* Badges showing item counts or watched status */ | |
| .countIndicator, | |
| .playedIndicator { | |
| background: var(--retrowave-sunset) !important; | |
| color: var(--theme-black) !important; | |
| font-weight: bolder; | |
| font-size: large; | |
| animation: pulse-glow 2s infinite alternate; | |
| } | |
| /* ── List Item Text Overflow ────────────────────────────────────────────── */ | |
| /* Clean text truncation for list item descriptions */ | |
| .listItem-overview p { | |
| display: -webkit-box; | |
| line-clamp: 3; /* Show 3 lines max */ | |
| box-orient: vertical; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| /* ── List Item Image Sizing ─────────────────────────────────────────────── */ | |
| /* Consistent sizing for list item thumbnails */ | |
| .listItemImage { | |
| background-size: cover !important; | |
| height: 10vw !important; | |
| width: 15vw !important; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| LOADING & SPINNER ELEMENTS - Loading animations and spinners | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Custom Spinner Styling ─────────────────────────────────────────────── */ | |
| /* Enhanced spinner with gradient background */ | |
| .docspinner.mdl-spinner .mdl-spinner__circle { | |
| border: 4px solid transparent; | |
| background: var(--retrowave-sunset) 0 0 / 75% 75% repeat !important; | |
| border-radius: 50%; | |
| -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); | |
| mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: destination-out; | |
| mask-composite: exclude; | |
| animation: spin 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; | |
| } | |
| /* ── Logo Pulse Animation ───────────────────────────────────────────────── */ | |
| /* Breathing effect for logos */ | |
| .pageTitleWithDefaultLogo, | |
| .spashLogo { | |
| animation: logo-pulse 3s infinite alternate; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| SKIP BUTTONS & SPECIAL BUTTONS - IntroSkipper and special action buttons | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Skip Button Base Styling ───────────────────────────────────────────── */ | |
| /* IntroSkipper plugin button styling */ | |
| button.skip-button { | |
| background: linear-gradient(var(--black-alpha-60), var(--black-alpha-60)), var(--retrowave-fade) !important; | |
| border: unset !important; | |
| border-radius: var(--rounded-cards) !important; | |
| box-shadow: 0 0 4px 1px var(--retrowave-accent-color-1), 0 0 3px 2px var(--retrowave-accent-color-4), 0 0 2px 3px var(--retrowave-pink), 0 0 1px 4px var(--retrowave-accent-color-2); | |
| opacity: 0; | |
| transition: border-color 0.2s, box-shadow 0.2s, opacity 0.3s ease-in, transform 0.3s ease-out; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* ── Skip Button Shine Effect ───────────────────────────────────────────── */ | |
| /* Subtle light sweep animation */ | |
| button.skip-button::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); | |
| transform: rotate(30deg); | |
| animation: shine 3s infinite; | |
| opacity: 0; | |
| } | |
| button.skip-button:hover::after { | |
| opacity: 1; | |
| } | |
| /* ── Skip Button Hover States ───────────────────────────────────────────── */ | |
| /* Enhanced interaction feedback */ | |
| button.skip-button:hover, | |
| button.skip-button:focus { | |
| background: linear-gradient(var(--black-alpha-69), var(--black-alpha-69)), var(--retrowave-fade) !important; | |
| transform: scale(1.05); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| TV GUIDE & LIVE TV - Television guide and channel styling | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── TV Guide Channel Fixes ─────────────────────────────────────────────── */ | |
| /* Adjustments for Live TV guide channel name display */ | |
| [dir="ltr"] .guideChannelName { | |
| margin-left: unset !important; /* Reset left-to-right margin */ | |
| } | |
| .guideChannelName, | |
| .guideChannelNumber { | |
| overflow: unset !important; /* Allow text to display fully */ | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| RESPONSIVE DESIGN - Media queries and responsive adjustments | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* This section would contain media queries for different screen sizes */ | |
| /* Currently using viewport units (vw, vh) for responsive design throughout */ | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| CLEANUP & UTILITY CLASSES - Final adjustments and utility styles | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Text and Input Styling ─────────────────────────────────────────────── */ | |
| /* Ensure proper text colors across all inputs */ | |
| textarea, | |
| input, | |
| select { | |
| color: var(--theme-white) !important; | |
| } | |
| /* ── Debug and Development ──────────────────────────────────────────────── */ | |
| /* Uncomment for debugging layout issues */ | |
| /* | |
| * { | |
| outline: 1px solid red !important; | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment