diff --git a/edd.css b/edd.css index 26905a5..8632ab6 100644 --- a/edd.css +++ b/edd.css @@ -1,311 +1,79 @@ /* * ======================================== - * ✨ JELLYFIN ELEGANT THEME - REFINED EDITION ✨ + * CSS PERSONALIZAT PENTRU JELLYFIN SERVER * ======================================== * - * 🎨 TEMA ELEGANTĂ PENTRU JELLYFIN SERVER 🎨 - * * Autor: EDD - * Versiune: 5.0 ELEGANT REFINED + * Versiune: 1.0 * Compatibilitate: Jellyfin WebUI (toate versiunile moderne) - * Repository: https://git.eddmanoo.cloud/eddmanoo/jellyfincss * - * ✨ CARACTERISTICI ELEGANTE: - * 🎨 Design modern cu culori neutre plăcute - * 🌙 Fundal subtil cu gradient lin - * ✨ Efecte delicate și rafinate - * 🎭 Animații fluide și relaxante - * 🎯 Paleta gri-albastru-violet elegantă - * 💫 Efecte hover subtile și plăcute - * 🌊 Tranziții liniștitoare - * 📱 Design responsiv elegant + * Descriere: Acest fișier CSS oferă o temă personalizată pentru interfața web + * Jellyfin, cu îmbunătățiri vizuale și funcționale pentru o experiență mai bună. * - * 📋 INSTRUCȚIUNI DE UTILIZARE: - * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css'); + * Instrucțiuni de utilizare: + * 1. Copiază conținutul acestui fișier + * 2. Mergi în Dashboard > General > Custom CSS + * 3. Lipește codul în câmpul "Custom CSS" + * 4. Salvează setările * - * ✨ Această temă este elegantă și plăcută pentru ochi! - * Perfect pentru vizionare relaxantă! 🎨💫✨ + * Notă: Modificările se aplică imediat, fără a fi nevoie să restartezi serverul. */ /* ======================================== - * ✨ ELEGANT DESIGN SYSTEM - VARIABILE RAFINATE ✨ + * VARIABILE CSS GLOBALE * ======================================== */ :root { - /* 🎨 PALETA ELEGANTĂ - CULORI NEUTRE */ - --elegant-primary: #6366f1; /* Indigo elegant */ - --elegant-secondary: #8b5cf6; /* Violet subtil */ - --elegant-accent: #06b6d4; /* Cyan plăcut */ - --elegant-success: #10b981; /* Verde liniștitor */ - --elegant-warning: #f59e0b; /* Amber cald */ - --elegant-info: #3b82f6; /* Albastru calm */ - --elegant-muted: #6b7280; /* Gri neutru */ - --elegant-soft: #9ca3af; /* Gri deschis */ + /* Paleta de culori principală */ + --primary-color: #00a4dc; /* Albastru Jellyfin */ + --secondary-color: #1e1e1e; /* Gri închis */ + --accent-color: #ff6b35; /* Portocaliu accent */ + --background-dark: #0f0f0f; /* Fundal foarte închis */ + --background-medium: #1a1a1a; /* Fundal mediu */ + --background-light: #2a2a2a; /* Fundal deschis */ + --text-primary: #ffffff; /* Text principal */ + --text-secondary: #b3b3b3; /* Text secundar */ + --border-color: #333333; /* Culoare borduri */ + --success-color: #28a745; /* Verde pentru succes */ + --warning-color: #ffc107; /* Galben pentru avertismente */ + --error-color: #dc3545; /* Roșu pentru erori */ - /* 🌙 FUNDAL ELEGANT */ - --elegant-dark: #0f172a; /* Albastru întunecat */ - --elegant-darker: #1e293b; /* Slate întunecat */ - --elegant-medium: #334155; /* Slate mediu */ - --elegant-light: #475569; /* Slate deschis */ - --elegant-surface: #64748b; /* Suprafață elegantă */ - --elegant-overlay: rgba(15, 23, 42, 0.95); /* Overlay subtil */ + /* Dimensiuni și spațiere */ + --border-radius: 8px; + --border-radius-small: 4px; + --border-radius-large: 12px; + --shadow-light: 0 2px 4px rgba(0,0,0,0.1); + --shadow-medium: 0 4px 8px rgba(0,0,0,0.2); + --shadow-heavy: 0 8px 16px rgba(0,0,0,0.3); - /* ✨ TEXT ELEGANT */ - --elegant-text-primary: #f8fafc; /* Alb cald */ - --elegant-text-secondary: #e2e8f0; /* Gri foarte deschis */ - --elegant-text-muted: #cbd5e1; /* Gri deschis */ - --elegant-text-subtle: #94a3b8; /* Gri mediu */ - --elegant-text-disabled: #64748b; /* Gri întunecat */ - - /* 🎨 BORDURI ELEGANTE */ - --elegant-border-primary: #334155; /* Bordură principală */ - --elegant-border-secondary: #475569; /* Bordură secundară */ - --elegant-border-accent: var(--elegant-primary); /* Bordură accent */ - --elegant-border-subtle: linear-gradient(90deg, var(--elegant-primary), var(--elegant-secondary), var(--elegant-accent)); - - /* 💫 STĂRI ELEGANTE */ - --elegant-success-bg: rgba(16, 185, 129, 0.1); - --elegant-success-glow: 0 0 20px rgba(16, 185, 129, 0.3); - --elegant-warning-bg: rgba(245, 158, 11, 0.1); - --elegant-warning-glow: 0 0 20px rgba(245, 158, 11, 0.3); - --elegant-error: #ef4444; /* Roșu elegant */ - --elegant-error-bg: rgba(239, 68, 68, 0.1); - --elegant-error-glow: 0 0 20px rgba(239, 68, 68, 0.3); - - /* ✨ GEOMETRIE ELEGANTĂ */ - --elegant-radius-xs: 4px; - --elegant-radius-sm: 6px; - --elegant-radius-md: 8px; - --elegant-radius-lg: 12px; - --elegant-radius-xl: 16px; - --elegant-radius-2xl: 20px; - --elegant-radius-3xl: 24px; - --elegant-radius-full: 9999px; - - /* ✨ UMBRE ELEGANTE */ - --elegant-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); - --elegant-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); - --elegant-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); - --elegant-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); - --elegant-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); - --elegant-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15); - --elegant-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); - --elegant-glow-primary: 0 0 20px rgba(99, 102, 241, 0.3); - --elegant-glow-secondary: 0 0 20px rgba(139, 92, 246, 0.3); - --elegant-glow-accent: 0 0 20px rgba(6, 182, 212, 0.3); - --elegant-glow-subtle: 0 0 15px rgba(99, 102, 241, 0.2); - - /* 🎨 VARIABILE ELEGANTE */ - --elegant-blur-xs: blur(2px); - --elegant-blur-sm: blur(4px); - --elegant-blur-md: blur(8px); - --elegant-blur-lg: blur(12px); - --elegant-blur-xl: blur(16px); - --elegant-transition-fast: all 0.15s ease; - --elegant-transition-normal: all 0.3s ease; - --elegant-transition-slow: all 0.5s ease; - - /* 🌊 TRANZIȚII CINEMATICE */ - --nexus-transition-instant: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); - --nexus-transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); - --nexus-transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - --nexus-transition-elegant: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - --nexus-transition-dramatic: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); - --nexus-transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); - --nexus-transition-elastic: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); - - /* 🌀 EFECTE BLUR HOLOGRAFICE */ - --nexus-blur-subtle: blur(1px); - --nexus-blur-soft: blur(3px); - --nexus-blur-medium: blur(6px); - --nexus-blur-strong: blur(12px); - --nexus-blur-intense: blur(20px); - --nexus-blur-extreme: blur(32px); - --nexus-blur-cosmic: blur(50px); - - /* 📐 SISTEM SPAȚIAL NEXUS */ - --nexus-space-1: 0.25rem; /* 4px - Micro */ - --nexus-space-2: 0.5rem; /* 8px - Tiny */ - --nexus-space-3: 0.75rem; /* 12px - Small */ - --nexus-space-4: 1rem; /* 16px - Base */ - --nexus-space-5: 1.25rem; /* 20px - Medium */ - --nexus-space-6: 1.5rem; /* 24px - Large */ - --nexus-space-8: 2rem; /* 32px - XL */ - --nexus-space-10: 2.5rem; /* 40px - 2XL */ - --nexus-space-12: 3rem; /* 48px - 3XL */ - --nexus-space-16: 4rem; /* 64px - 4XL */ - --nexus-space-20: 5rem; /* 80px - 5XL */ - --nexus-space-24: 6rem; /* 96px - 6XL */ - - /* 🎯 SISTEM ACCENT DINAMIC (inspirat din Ultrachromic) */ - --nexus-accent-rgb: 0, 212, 255; /* RGB pentru transparențe */ - --nexus-accent-alpha-10: rgba(var(--nexus-accent-rgb), 0.1); - --nexus-accent-alpha-25: rgba(var(--nexus-accent-rgb), 0.25); - --nexus-accent-alpha-50: rgba(var(--nexus-accent-rgb), 0.5); - --nexus-accent-alpha-75: rgba(var(--nexus-accent-rgb), 0.75); - --nexus-accent-alpha-90: rgba(var(--nexus-accent-rgb), 0.9); - - /* 🔧 OPTIMIZĂRI PERFORMANȚĂ */ - --nexus-rounding: 8px; /* Rounding global */ - --nexus-backdrop-filter: blur(60px) saturate(200%) contrast(160%) brightness(25%); + /* Tranziții */ + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; } /* ======================================== - * 🔥 FUNDAL APOCALIPTIC INFERNO CU FLĂCĂRI ANIMATE 🔥 + * STILURI GENERALE PENTRU FUNDAL ȘI LAYOUT * ======================================== */ -/* Reset și configurare de bază */ -* { - box-sizing: border-box; - -webkit-tap-highlight-color: transparent; -} - +/* Fundal principal al aplicației */ +.backgroundContainer, +.dialog, html { - background: var(--elegant-dark) !important; - color: var(--elegant-text-primary) !important; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; - font-weight: 400 !important; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; + background-color: var(--background-dark) !important; + color: var(--text-primary); } -body { - background: linear-gradient(135deg, var(--elegant-dark) 0%, var(--elegant-darker) 100%) !important; - margin: 0; - padding: 0; - overflow-x: hidden; - position: relative; -} - -/* ✨ FUNDAL ELEGANT CU PARTICULE SUBTILE */ -body::before { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: - radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%), - radial-gradient(circle at 40% 60%, rgba(6, 182, 212, 0.06) 0%, transparent 50%); - animation: elegant-drift 20s ease-in-out infinite; - z-index: -2; - pointer-events: none; -} - -@keyframes elegant-drift { - 0%, 100% { - transform: translateX(0) translateY(0); - opacity: 0.8; - } - 33% { - transform: translateX(-10px) translateY(-15px); - opacity: 1; - } - 66% { - transform: translateX(10px) translateY(10px); - opacity: 0.9; - } -} - -/* 💫 STELE SUBTILE ÎN FUNDAL */ -body::after { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-image: - radial-gradient(1px 1px at 30px 50px, rgba(99, 102, 241, 0.4), transparent), - radial-gradient(1px 1px at 80px 30px, rgba(139, 92, 246, 0.3), transparent), - radial-gradient(1px 1px at 150px 80px, rgba(6, 182, 212, 0.3), transparent), - radial-gradient(1px 1px at 200px 40px, rgba(99, 102, 241, 0.2), transparent); - background-repeat: repeat; - background-size: 300px 200px; - animation: elegant-twinkle 15s linear infinite; - z-index: -1; - pointer-events: none; -} - -@keyframes elegant-twinkle { - 0%, 100% { - opacity: 0.6; - transform: translateY(0); - } - 50% { - opacity: 1; - transform: translateY(-5px); - } -} - -/* ✨ CONTAINER PRINCIPAL ELEGANT - FĂRĂ BLUR PE IMAGINI */ -.backgroundContainer { - background: var(--elegant-overlay) !important; - position: relative; - min-height: 100vh; - border: 1px solid var(--elegant-border-primary) !important; - box-shadow: var(--elegant-shadow-lg) !important; -} - -/* Dialog-urile păstrează blur-ul pentru focus */ -.dialog { - background: var(--elegant-overlay) !important; - backdrop-filter: var(--elegant-blur-md) !important; - -webkit-backdrop-filter: var(--elegant-blur-md) !important; - position: relative; - border: 1px solid var(--elegant-border-primary) !important; - box-shadow: var(--elegant-shadow-lg) !important; -} - -/* ✨ OVERLAY ELEGANT PENTRU CONTAINER */ -.backgroundContainer::before { - content: ''; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--elegant-border-subtle); - opacity: 0.03; - animation: elegant-pulse 8s ease-in-out infinite; - z-index: -1; - pointer-events: none; -} - -@keyframes elegant-pulse { - 0%, 100% { - opacity: 0.03; - transform: scale(1); - } - 50% { - opacity: 0.06; - transform: scale(1.005); - } -} - -/* Container pentru backdrop - FĂRĂ BLUR PE IMAGINI */ +/* Container principal pentru conținut */ .backgroundContainer.withBackdrop, -.backdropContainer { - background: var(--elegant-overlay) !important; - border: 1px solid var(--elegant-border-primary) !important; - box-shadow: var(--elegant-shadow-lg) !important; +.backdropContainer, +.backgroundContainer { + background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%) !important; } -/* 🎬 BACKDROP IMAGE NEXUS (inspirat din Ultrachromic) */ -.backdropImage { - opacity: 0.15 !important; - filter: var(--nexus-backdrop-filter) !important; - transition: var(--nexus-transition-dramatic) !important; - mix-blend-mode: screen !important; - transform: scale(1.1) !important; -} - -/* ✨ SCROLLBAR ELEGANT */ +/* Îmbunătățiri pentru scrolling */ * { scrollbar-width: thin; - scrollbar-color: var(--elegant-primary) var(--elegant-darker) !important; + scrollbar-color: var(--primary-color) var(--background-medium); } *::-webkit-scrollbar { @@ -314,1542 +82,242 @@ body::after { } *::-webkit-scrollbar-track { - background: var(--elegant-darker); - border-radius: var(--elegant-radius-full); - border: 1px solid var(--elegant-border-primary); + background: var(--background-medium); + border-radius: var(--border-radius-small); } *::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, var(--elegant-primary), var(--elegant-secondary)) !important; - border-radius: var(--elegant-radius-full); - transition: var(--elegant-transition-normal); - border: 1px solid var(--elegant-border-accent); - box-shadow: var(--elegant-shadow-sm); + background: var(--primary-color); + border-radius: var(--border-radius-small); + transition: background var(--transition-fast); } *::-webkit-scrollbar-thumb:hover { - background: linear-gradient(180deg, var(--elegant-secondary), var(--elegant-accent)) !important; - box-shadow: var(--elegant-glow-primary); - transform: scale(1.1); -} - -*::-webkit-scrollbar-corner { - background: var(--elegant-darker); - border: 1px solid var(--elegant-border-primary); -} - -/* ✨ SELECȚIE TEXT HOLOGRAFICĂ */ -::selection { - background: rgba(0, 212, 255, 0.3); - color: var(--nexus-text-primary); - text-shadow: 0 0 10px rgba(0, 212, 255, 0.8); -} - -::-moz-selection { - background: rgba(0, 212, 255, 0.3); - color: var(--nexus-text-primary); - text-shadow: 0 0 10px rgba(0, 212, 255, 0.8); -} - -/* Focus ring holografic */ -*:focus { - outline: 2px solid var(--nexus-primary) !important; - outline-offset: 2px !important; - border-radius: var(--nexus-radius-small) !important; - box-shadow: var(--nexus-glow-primary) !important; + background: var(--accent-color); } /* ======================================== - * 🚀 OPTIMIZĂRI PERFORMANȚĂ NEXUS (inspirat din Monochromic) + * HEADER ȘI NAVIGARE * ======================================== */ -/* Eliminarea mask-image pentru performanță mai bună */ -#dashboardPage, -#dashboardGeneralPage, -#userProfilesPage, -#devicesPage, -#serverActivityPage, -#liveTvStatusPage, -#liveTvSettingsPage, -#networkingPage, -#apiKeysPage, -#logPage, -#notificationSettingsPage, -#scheduledTasksPage, -#itemDetailPage, -#userImagePage, -#displayPreferencesPage, -#homeScreenPreferencesPage, -#languagePreferencesPage, -#quickConnectPreferencesPage, -#indexPage, -#moviesPage, -#tvRecommendedPage, -#encodingSettingsPage, -#mediaLibraryPage, -#dlnaSettingsPage, -#pluginsPage, -#musicRecommendedPage { - mask-image: none !important; - -webkit-mask-image: none !important; - will-change: transform, opacity !important; - contain: layout style paint !important; +/* Header principal - design transparent modern */ +.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred { + background: rgba(15, 15, 15, 0.95) !important; + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border-color); + box-shadow: var(--shadow-medium); + transition: all var(--transition-medium); } -/* Optimizări pentru pagini mari */ -@media all and (min-width: 100em) { - #indexPage, - #moviesPage, - #tvRecommendedPage, - #musicRecommendedPage { - margin-top: 70px !important; - padding-top: 0px !important; - overflow: auto !important; - scroll-behavior: smooth !important; - } - - #encodingSettingsPage, - #mediaLibraryPage, - #dlnaSettingsPage, - #pluginsPage { - margin-top: 60px !important; - padding-top: 0px !important; - overflow: auto !important; - } -} - -/* Optimizări pentru ecrane mici */ -@media all and (max-width: 100em) { - #indexPage, - #moviesPage, - #tvRecommendedPage, - #encodingSettingsPage, - #mediaLibraryPage, - #dlnaSettingsPage, - #pluginsPage, - #musicRecommendedPage { - margin-top: 130px !important; - padding-top: 0px !important; - overflow: auto !important; - scroll-behavior: smooth !important; - } -} - -/* Optimizări generale pentru toate paginile */ -#dashboardPage, -#dashboardGeneralPage, -#userProfilesPage, -#devicesPage, -#serverActivityPage, -#liveTvStatusPage, -#liveTvSettingsPage, -#networkingPage, -#apiKeysPage, -#logPage, -#notificationSettingsPage, -#scheduledTasksPage, -#itemDetailPage { - margin-top: 60px !important; - padding-top: 0px !important; - overflow: auto !important; - scroll-behavior: smooth !important; -} - -/* ======================================== - * ✨ HEADER ELEGANT CU EFECTE SUBTILE ✨ - * ======================================== */ - -/* Header principal cu design elegant */ -.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred, .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader { - background: linear-gradient(135deg, var(--elegant-darker), var(--elegant-medium)) !important; - backdrop-filter: var(--elegant-blur-lg) !important; - -webkit-backdrop-filter: var(--elegant-blur-lg) !important; - border-bottom: 1px solid var(--elegant-border-accent) !important; - box-shadow: var(--elegant-shadow-lg), var(--elegant-glow-subtle) !important; - transition: var(--elegant-transition-normal) !important; - position: relative; - z-index: 1000; - overflow: hidden; + background: rgba(15, 15, 15, 0.95) !important; + backdrop-filter: blur(10px); } -/* ✨ EFECT ELEGANT PENTRU HEADER */ -.skinHeader::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, var(--elegant-primary), var(--elegant-secondary), var(--elegant-accent), transparent); - opacity: 0.1; - animation: elegant-sweep 6s ease-in-out infinite; - z-index: -1; -} - -@keyframes elegant-sweep { - 0% { left: -100%; opacity: 0.1; } - 50% { left: 100%; opacity: 0.2; } - 100% { left: 200%; opacity: 0.1; } -} - -/* ✨ LINIE ELEGANTĂ ÎN PARTEA DE JOS */ -.skinHeader::after { - content: ''; - position: absolute; - bottom: -1px; - left: 0; - right: 0; - height: 1px; - background: var(--elegant-border-subtle); - opacity: 0.8; - animation: elegant-flow 4s linear infinite; - box-shadow: var(--elegant-glow-subtle); -} - -@keyframes elegant-flow { - 0% { - background: linear-gradient(90deg, var(--elegant-primary), var(--elegant-secondary), var(--elegant-accent)); - background-size: 200% 100%; - background-position: 0% 50%; - } - 100% { - background-position: 200% 50%; - } -} - -/* ✨ BUTOANE HEADER ELEGANTE */ +/* Butoane din header */ .headerButton { - color: var(--elegant-text-primary) !important; - background: linear-gradient(135deg, var(--elegant-medium), var(--elegant-light)) !important; - border: 1px solid var(--elegant-border-secondary) !important; - border-radius: var(--elegant-radius-md) !important; - padding: 8px 12px !important; - margin: 0 4px !important; - transition: var(--elegant-transition-normal) !important; - position: relative; - overflow: hidden; - backdrop-filter: var(--elegant-blur-sm) !important; - box-shadow: var(--elegant-shadow-sm) !important; - font-weight: 500 !important; -} - -.headerButton::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--nexus-border-energy); - opacity: 0.3; - transition: var(--nexus-transition-smooth); - z-index: -1; -} - -.headerButton::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - background: radial-gradient(circle, var(--nexus-primary) 0%, transparent 70%); - transition: var(--nexus-transition-smooth); - transform: translate(-50%, -50%); - z-index: -1; + color: var(--text-primary) !important; + transition: all var(--transition-fast); + border-radius: var(--border-radius-small); + margin: 0 4px; } .headerButton:hover { - color: var(--elegant-text-primary) !important; - background: linear-gradient(135deg, var(--elegant-primary), var(--elegant-secondary)) !important; - border-color: var(--elegant-border-accent) !important; - transform: translateY(-2px) scale(1.05) !important; - box-shadow: var(--elegant-shadow-lg), var(--elegant-glow-primary) !important; + background-color: var(--primary-color) !important; + color: white !important; + transform: translateY(-1px); + box-shadow: var(--shadow-light); } -.headerButton:active { - transform: translateY(0) scale(1.02) !important; - box-shadow: var(--elegant-shadow-sm) !important; -} - -/* Meniu lateral cu glassmorphism */ +/* Meniu lateral (drawer) */ .mainDrawer { - background: var(--background-overlay) !important; - backdrop-filter: var(--blur-lg) !important; - -webkit-backdrop-filter: var(--blur-lg) !important; - border-right: 1px solid var(--border-primary) !important; - box-shadow: var(--shadow-2xl) !important; - transition: var(--transition-normal) !important; + background: var(--background-medium) !important; + border-right: 1px solid var(--border-color); + box-shadow: var(--shadow-heavy); } .mainDrawer-scrollContainer { color: var(--text-primary) !important; - padding: var(--space-4) !important; } -/* Opțiuni meniu lateral moderne */ +/* Opțiuni din meniul lateral */ .navMenuOption { color: var(--text-secondary) !important; - background: transparent !important; - border: 1px solid transparent !important; - border-radius: var(--border-radius-lg) !important; - padding: var(--space-3) var(--space-4) !important; - margin: var(--space-1) 0 !important; - transition: var(--transition-normal) !important; - position: relative; - overflow: hidden; -} - -.navMenuOption::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent 0%, - rgba(14, 165, 233, 0.05) 50%, - transparent 100% - ); - transition: var(--transition-normal); + transition: all var(--transition-fast); + border-radius: var(--border-radius-small); + margin: 2px 8px; } .navMenuOption:hover { + background-color: var(--background-light) !important; color: var(--text-primary) !important; - background: var(--background-tertiary) !important; - border-color: var(--border-secondary) !important; - transform: translateX(var(--space-1)) !important; - box-shadow: var(--shadow-sm) !important; -} - -.navMenuOption:hover::before { - left: 100%; + transform: translateX(4px); } .navMenuOption-selected { - color: var(--text-primary) !important; - background: linear-gradient( - 135deg, - var(--primary-color) 0%, - var(--primary-hover) 100% - ) !important; - border-color: var(--primary-color) !important; - box-shadow: var(--shadow-glow) !important; - font-weight: 600 !important; -} - -.navMenuOption-selected::before { - display: none; + background: var(--primary-color) !important; + color: white !important; + box-shadow: var(--shadow-light); } /* ======================================== - * TABURI ȘI BUTOANE ULTRA-MODERNE + * TABURI ȘI BUTOANE * ======================================== */ -/* Container taburi cu design modern */ +/* Taburi principale - design îmbunătățit */ .headerTabs.sectionTabs { - background: var(--background-secondary) !important; - border-bottom: 1px solid var(--border-primary) !important; - border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0 !important; - padding: var(--space-2) var(--space-4) !important; - margin: 0 !important; - position: relative; - overflow: hidden; + text-size-adjust: 110%; + font-size: 110%; + border-bottom: 1px solid var(--border-color); } -.headerTabs.sectionTabs::before { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient( - 90deg, - transparent 0%, - var(--primary-color) 50%, - transparent 100% - ); - opacity: 0.5; -} - -/* Taburi individuale cu efect glassmorphism */ .emby-tab-button { - background: transparent !important; - color: var(--text-muted) !important; - border: 1px solid transparent !important; - border-radius: var(--border-radius-xl) !important; - padding: var(--space-4) var(--space-6) !important; - margin: 0 var(--space-1) !important; - font-weight: 500 !important; - font-size: 0.95rem !important; - transition: var(--transition-normal) !important; + padding: 1.75em 1.7em; + color: var(--text-secondary) !important; + transition: all var(--transition-fast); + border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; + margin: 0 2px; position: relative; - overflow: hidden; - backdrop-filter: var(--blur-xs) !important; -} - -.emby-tab-button::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent 0%, - rgba(14, 165, 233, 0.1) 50%, - transparent 100% - ); - transition: var(--transition-normal); } .emby-tab-button:hover { - color: var(--text-secondary) !important; - background: var(--background-tertiary) !important; - border-color: var(--border-secondary) !important; - transform: translateY(-2px) !important; - box-shadow: var(--shadow-md) !important; -} - -.emby-tab-button:hover::before { - left: 100%; + color: var(--text-primary) !important; + background-color: var(--background-light); + transform: translateY(-2px); } .emby-tab-button.emby-tab-button-active { - color: var(--text-primary) !important; - background: linear-gradient( - 135deg, - var(--primary-color) 0%, - var(--primary-hover) 100% - ) !important; - border-color: var(--primary-color) !important; - box-shadow: var(--shadow-glow) !important; - font-weight: 600 !important; - transform: translateY(-1px) !important; + color: var(--primary-color) !important; + background-color: var(--background-medium); + border-bottom: 3px solid var(--primary-color); } -.emby-tab-button.emby-tab-button-active::before { - display: none; -} - -.emby-tab-button.emby-tab-button-active::after { - content: ''; - position: absolute; - bottom: -1px; - left: 50%; - transform: translateX(-50%); - width: 60%; - height: 2px; - background: var(--accent-color); - border-radius: var(--border-radius-full); -} - -/* ======================================== - * 🎨 SISTEM ACCENT DINAMIC NEXUS (inspirat din Ultrachromic) - * ======================================== */ - -/* Butoane cu hover accent dinamic */ -.raised:hover, -.fab:hover, -a[data-role="button"]:hover { - background: var(--nexus-accent-alpha-50) !important; - box-shadow: var(--nexus-glow-primary) !important; - transform: translateY(-2px) scale(1.02) !important; -} - -/* Elemente de navigare cu accent */ -.navMenuOption-selected { - color: var(--nexus-primary) !important; - background: var(--nexus-accent-alpha-25) !important; - box-shadow: var(--nexus-glow-primary) !important; -} - -.navMenuOption:hover, -.actionSheetMenuItem:hover { - background-color: var(--nexus-accent-alpha-50) !important; - transform: translateX(var(--nexus-space-2)) !important; -} - -/* Progres bars cu accent */ -.mdl-slider-background-lower, -.playbackProgress > div, -.taskProgressInner, -.iconOsdProgressInner { - background: var(--nexus-border-energy) !important; - box-shadow: var(--nexus-glow-primary) !important; -} - -progress::-moz-progress-bar, -progress::-webkit-progress-value { - background: var(--nexus-border-energy) !important; -} - -.transcodingProgress > div, -.itemProgressBarForeground { - background: var(--nexus-accent-alpha-50) !important; -} - -/* Slider controls cu accent */ -.mdl-slider::-moz-range-thumb, -.mdl-slider::-ms-thumb, -.mdl-slider::-webkit-slider-thumb { - background: var(--nexus-primary) !important; - box-shadow: var(--nexus-glow-primary) !important; - border: 2px solid var(--nexus-text-primary) !important; -} - -/* 💎 BUTOANE PRINCIPALE NEXUS PREMIUM */ +/* Butoane generale */ .button-submit, .raised.emby-button { - background: var(--nexus-border-energy) !important; - color: var(--nexus-text-primary) !important; - border: 2px solid var(--nexus-primary) !important; - border-radius: var(--nexus-radius-large) !important; - padding: var(--nexus-space-4) var(--nexus-space-8) !important; - font-weight: 700 !important; - font-size: 1rem !important; - text-transform: uppercase !important; - letter-spacing: 0.1em !important; - transition: var(--nexus-transition-smooth) !important; - box-shadow: var(--nexus-shadow-medium), var(--nexus-glow-primary) !important; - position: relative; - overflow: hidden; - backdrop-filter: var(--nexus-blur-soft) !important; - text-shadow: 0 0 10px rgba(0, 212, 255, 0.8) !important; -} - -.button-submit::before, -.raised.emby-button::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 45deg, - transparent 0%, - rgba(255, 255, 255, 0.3) 30%, - rgba(0, 212, 255, 0.4) 50%, - rgba(255, 255, 255, 0.3) 70%, - transparent 100% - ); - transition: var(--nexus-transition-smooth); - z-index: 1; -} - -.button-submit::after, -.raised.emby-button::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%); - transition: var(--nexus-transition-smooth); - transform: translate(-50%, -50%); - z-index: 0; + background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important; + color: white !important; + border: none !important; + border-radius: var(--border-radius) !important; + padding: 12px 24px !important; + font-weight: 600 !important; + transition: all var(--transition-fast) !important; + box-shadow: var(--shadow-light) !important; + text-transform: uppercase; + letter-spacing: 0.5px; } .button-submit:hover, .raised.emby-button:hover { - transform: translateY(-4px) scale(1.05) !important; - box-shadow: var(--nexus-shadow-xl), var(--nexus-glow-rainbow) !important; - border-color: var(--nexus-accent) !important; - text-shadow: 0 0 15px rgba(0, 255, 136, 1) !important; -} - -.button-submit:hover::before, -.raised.emby-button:hover::before { - left: 100%; -} - -.button-submit:hover::after, -.raised.emby-button:hover::after { - width: 200%; - height: 200%; -} - -.button-submit:active, -.raised.emby-button:active { - transform: translateY(-1px) scale(1.02) !important; - box-shadow: var(--nexus-shadow-medium) !important; + transform: translateY(-2px) !important; + box-shadow: var(--shadow-medium) !important; + background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%) !important; } /* ======================================== - * 🎯 ELEMENTE INTERACTIVE CU ACCENT DINAMIC + * CARDURI ȘI ELEMENTE MEDIA * ======================================== */ -/* Butoane și linkuri interactive */ -.paper-icon-button-light:hover, -.raised.homeLibraryButton:hover, -.button-flat:hover, -.playstatebutton-icon-played, -.ratingbutton-icon-withrating, -.paper-icon-button-light:hover:not(:disabled), -.emby-tab-button:hover, -.selectLabelFocused, -.inputLabelFocused, -.textareaLabelFocused, -.buttonActive, -.button-link { - color: var(--nexus-primary) !important; - text-shadow: 0 0 10px var(--nexus-primary) !important; - transition: var(--nexus-transition-smooth) !important; -} - -/* Excepție pentru pagina de detalii */ -#itemDetailPage .button-link { - color: inherit !important; - text-shadow: none !important; -} - -/* Checkbox și input focus */ -.emby-checkbox:checked + span + .checkboxOutline, -.emby-textarea:focus, -.emby-select-withcolor:focus, -.emby-input:focus, -.itemSelectionPanel { - border: 2px solid var(--nexus-accent-alpha-75) !important; - box-shadow: var(--nexus-glow-primary) !important; -} - -/* Text countdown și loading */ -.upNextDialog-countdownText { - color: var(--nexus-primary) !important; - text-shadow: 0 0 15px var(--nexus-primary) !important; -} - -.mdl-spinner__layer-1 { - border-color: var(--nexus-primary) !important; -} - -/* Switch controls */ -.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { - background: var(--nexus-accent-alpha-50) !important; -} - -.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { - background: var(--nexus-primary) !important; - box-shadow: var(--nexus-glow-primary) !important; -} - -/* Syncplay theming */ -.syncPlayIconCircle { - color: var(--nexus-primary) !important; - text-shadow: 0 0 20px var(--nexus-primary) !important; - background: var(--nexus-accent-alpha-25) !important; - border-radius: var(--nexus-radius-infinite) !important; - padding: var(--nexus-space-2) !important; -} - -/* Subtitle preview cu gradient */ -.subtitleappearance-preview { - background: linear-gradient(140deg, var(--nexus-primary), var(--nexus-dark)) !important; - border: 1px solid var(--nexus-border-glow) !important; - border-radius: var(--nexus-radius-large) !important; - box-shadow: var(--nexus-glow-primary) !important; -} - -/* Butoane secundare */ -.cancel.emby-button { - background: var(--background-tertiary) !important; - color: var(--text-secondary) !important; - border: 1px solid var(--border-secondary) !important; - border-radius: var(--border-radius-xl) !important; - transition: var(--transition-normal) !important; -} - -.cancel.emby-button:hover { - background: var(--background-surface) !important; - color: var(--text-primary) !important; - border-color: var(--border-accent) !important; - transform: translateY(-1px) !important; - box-shadow: var(--shadow-sm) !important; -} - -/* ======================================== - * CARDURI MEDIA CU GLASSMORPHISM AVANSAT - * ======================================== */ - -/* Container pentru carduri cu layout modern */ -.itemsContainer { - gap: var(--space-4) !important; - padding: var(--space-4) !important; -} - -/* ✨ CARDURI PRINCIPALE ELEGANTE - FĂRĂ BLUR PE IMAGINI */ +/* Carduri pentru filme, seriale, etc. */ .cardBox { - background: rgba(30, 41, 59, 0.3) !important; - border: 1px solid var(--elegant-border-primary) !important; - border-radius: var(--elegant-radius-lg) !important; - transition: var(--elegant-transition-normal) !important; - box-shadow: var(--elegant-shadow-md) !important; - position: relative; - overflow: hidden; -} - -.cardBox::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient( - 90deg, - transparent 0%, - rgba(248, 250, 252, 0.1) 50%, - transparent 100% - ); + background: var(--background-medium) !important; + border: 1px solid var(--border-color) !important; + border-radius: var(--border-radius) !important; + transition: all var(--transition-medium) !important; + box-shadow: var(--shadow-light) !important; } .cardBox:hover { transform: translateY(-4px) scale(1.02) !important; - box-shadow: var(--elegant-shadow-xl), var(--elegant-glow-primary) !important; - border-color: var(--elegant-border-accent) !important; - background: rgba(30, 41, 59, 0.6) !important; + box-shadow: var(--shadow-heavy) !important; + border-color: var(--primary-color) !important; } -.cardBox:hover::before { - background: var(--elegant-border-subtle); - opacity: 0.1; -} - -/* ======================================== - * 🔥 SISTEM CARDURI RESPONSIVE INFERNO (inspirat din ElegantFin) - * ======================================== */ - -/* Carduri cu dimensiuni responsive */ -.card { - --effectiveWidth: calc(99vw - 6.6%); - --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - 1em); - box-sizing: border-box; - width: var(--cardWidth) !important; - padding: 0.375em !important; - transition: var(--inferno-transition-fast) !important; -} - -/* Carduri portrait și square */ -.portraitCard, .squareCard { - --cardCount: 8; - min-width: 5em; -} - -.overflowPortraitCard, .overflowSquareCard { - --cardCount: 7; -} - -/* Carduri backdrop */ -.backdropCard { - --cardCount: 6; -} - -.overflowBackdropCard { - --cardCount: 5; -} - -/* Banner cards */ -.bannerCard { - --cardCount: 2; -} - -/* Media queries pentru responsive design */ -@media (max-width: 80em) { - .portraitCard, .squareCard, .overflowPortraitCard, .overflowSquareCard { - --cardCount: 6; - } - .backdropCard, .overflowBackdropCard { - --cardCount: 4; - } -} - -@media (max-width: 62em) { - .portraitCard, .squareCard, .overflowPortraitCard, .overflowSquareCard { - --cardCount: 5; - } - .backdropCard, .overflowBackdropCard { - --cardCount: 4; - } -} - -@media (max-width: 48.125em) { - .portraitCard, .squareCard, .overflowPortraitCard, .overflowSquareCard { - --cardCount: 4; - } - .backdropCard, .overflowBackdropCard { - --cardCount: 3; - } -} - -@media (max-width: 30em) { - .portraitCard, .squareCard, .overflowPortraitCard, .overflowSquareCard { - --cardCount: 3; - } - .backdropCard, .overflowBackdropCard { - --cardCount: 2; - } -} - -/* ✨ IMAGINI DIN CARDURI CLARE - FĂRĂ BLUR */ +/* Imagini din carduri - colțuri rotunjite */ .cardContent-button, .itemDetailImage, -.cardImageContainer, -.cardImage, -.cardContent, -.cardScalable, -.listItemImage, -.itemAction, -.lazy { - border-radius: var(--elegant-radius-lg) !important; +.cardImageContainer { + border-radius: var(--border-radius) !important; overflow: hidden !important; - transition: var(--elegant-transition-normal) !important; - position: relative; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; - filter: none !important; -} - -/* Forțează eliminarea blur-ului de la toate imaginile */ -img, -.cardContent-button img, -.cardImageContainer img, -.itemDetailImage img, -.cardImage img, -.listItemImage img { - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; - filter: none !important; -} - -/* Elimină blur-ul de la toate overlay-urile care afectează imaginile */ -.cardOverlayContainer, -.cardOverlayButton, -.cardOverlayButton-br, -.itemProgressBar, -.playedIndicator, -.countIndicator, -.mediaInfoBadge { - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; -} - -/* Elimină blur-ul de la containere care pot afecta imaginile */ -.itemsContainer, -.cardBox-bottompadded, -.cardBox, -.card, -.portraitCard, -.squareCard, -.backdropCard { - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; -} - -.cardContent-button::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 180deg, - transparent 0%, - transparent 70%, - rgba(15, 23, 42, 0.6) 100% - ); - opacity: 0; - transition: var(--elegant-transition-normal); + transition: all var(--transition-medium) !important; } .cardContent-button:hover { - transform: scale(1.02) !important; - box-shadow: var(--elegant-shadow-lg) !important; -} - -.cardContent-button:hover::after { - opacity: 0.8; -} - -/* ======================================== - * 🔥 EFECTE HOVER AVANSATE INFERNO (inspirat din ElegantFin) - * ======================================== */ - -/* Carduri cu efecte hover dramatice */ -.card.card-hoverable:hover .cardScalable { - border-color: var(--inferno-explosion) !important; - transform: scale(1.08) !important; - box-shadow: var(--inferno-glow-hell) !important; - animation: card-hover-explosion 0.3s ease-out !important; -} - -@keyframes card-hover-explosion { - 0% { transform: scale(1.08); } - 50% { transform: scale(1.12); } - 100% { transform: scale(1.08); } -} - -.card.card-hoverable:hover .cardImageContainer { transform: scale(1.05) !important; - filter: brightness(1.2) saturate(1.3) !important; } -.card.card-hoverable .cardScalable:active { - transition: var(--inferno-transition-fast) !important; - transform: scale(1.02) !important; - box-shadow: var(--inferno-shadow-fire) !important; -} - -/* Overlay effects pentru carduri */ -.cardOverlayContainer { - transition: var(--inferno-transition-normal) !important; - background: rgba(255, 69, 0, 0.1) !important; -} - -.card.card-hoverable .cardOverlayContainer:after { - content: ''; - transition: var(--inferno-transition-normal) !important; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - transform: translateY(-50%) translateX(0); - background: linear-gradient(0deg, transparent, var(--inferno-flame) 45%, var(--inferno-explosion) 55%, transparent); - opacity: 0; -} - -.card.card-hoverable:hover .cardOverlayContainer:after { - transform: translateY(50%) translateX(0); - opacity: 0.3; -} - -/* ✨ TEXT DIN CARDURI ELEGANT */ +/* Text din carduri */ .cardText { - color: var(--elegant-text-primary) !important; - font-weight: 600 !important; - font-size: 0.95rem !important; - line-height: 1.4 !important; - margin: 8px 0 4px 0 !important; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; + color: var(--text-primary) !important; + font-weight: 500 !important; } .cardText-secondary { - color: var(--elegant-text-muted) !important; - font-weight: 400 !important; - font-size: 0.85rem !important; - line-height: 1.3 !important; - margin: 0 0 4px 0 !important; + color: var(--text-secondary) !important; } /* ======================================== - * 🔥 BUTOANE OVERLAY INFERNALE (inspirat din ElegantFin) + * INDICATORI ȘI BADGE-URI * ======================================== */ -/* Buton play principal cu efecte de foc */ -.cardOverlayContainer > .cardOverlayFab-primary, -.listItemImageButton { - background: linear-gradient(135deg, var(--inferno-fire), var(--inferno-lava)) !important; - color: var(--inferno-text-primary) !important; - border: 2px solid var(--inferno-flame) !important; - box-shadow: var(--inferno-glow-fire) !important; - font-size: 85% !important; - z-index: 2 !important; - transition: var(--inferno-transition-fast) !important; - animation: button-pulse 2s ease-in-out infinite !important; -} - -@keyframes button-pulse { - 0%, 100% { - background: linear-gradient(135deg, var(--inferno-fire), var(--inferno-lava)); - box-shadow: var(--inferno-glow-fire); - } - 50% { - background: linear-gradient(135deg, var(--inferno-explosion), var(--inferno-flame)); - box-shadow: var(--inferno-glow-explosion); - } -} - -.cardOverlayContainer > .cardOverlayFab-primary:hover, -.listItemImageButton:hover { - background: linear-gradient(135deg, var(--inferno-explosion), var(--inferno-flame), var(--inferno-fire)) !important; - transform: scale(1.2) !important; - box-shadow: var(--inferno-glow-hell) !important; - animation: button-explosion-hover 0.3s ease-out !important; -} - -@keyframes button-explosion-hover { - 0% { transform: scale(1.2); } - 50% { transform: scale(1.3); } - 100% { transform: scale(1.2); } -} - -/* ✨ Butoane overlay secundare - FĂRĂ BLUR PE IMAGINI */ -.cardOverlayButton-br button { - color: var(--elegant-text-primary) !important; - background: rgba(15, 23, 42, 0.7) !important; - border-radius: var(--elegant-radius-md) !important; - transition: var(--elegant-transition-fast) !important; - border: 1px solid var(--elegant-border-accent) !important; -} - -.cardOverlayButton-br button:hover { - background: var(--elegant-primary) !important; - transform: scale(1.05) !important; - box-shadow: var(--elegant-glow-primary) !important; -} - -/* ✨ Overlay container elegant - FĂRĂ BLUR PE IMAGINI */ -.cardOverlayContainer:has(.cardOverlayButton:hover) { - background: rgba(15, 23, 42, 0.3) !important; -} - -/* ======================================== - * 🔥 PROGRESS BARS INFERNALE (inspirat din ElegantFin) - * ======================================== */ - -/* ✨ Progress bar pentru carduri - FĂRĂ BLUR PE IMAGINI */ -.itemProgressBar:not(.backgroundProgress):not(.playbackProgress):not(.transcodingProgress) { - background: rgba(15, 23, 42, 0.8) !important; - height: 0.35em !important; - overflow: hidden !important; - border-radius: var(--elegant-radius-full) !important; - border: 1px solid var(--elegant-border-accent) !important; - box-shadow: var(--elegant-shadow-sm) !important; - position: absolute !important; - margin: 8% !important; -} - -.itemProgressBarForeground { - border-radius: 0 var(--inferno-radius-infinite) var(--inferno-radius-infinite) 0 !important; - background: var(--inferno-border-energy) !important; - box-shadow: var(--inferno-glow-fire) !important; - animation: progress-burn 2s ease-in-out infinite !important; -} - -@keyframes progress-burn { - 0%, 100% { - background: linear-gradient(90deg, var(--inferno-fire), var(--inferno-lava)); - } - 50% { - background: linear-gradient(90deg, var(--inferno-explosion), var(--inferno-flame)); - } -} - -/* Progress bars generale */ -progress, ::-webkit-progress-bar { - background: linear-gradient(90deg, var(--inferno-shadow), var(--inferno-darkness)) !important; - border: 2px solid var(--inferno-border-fire) !important; - border-radius: var(--inferno-radius-flame) !important; - overflow: hidden !important; - box-shadow: var(--inferno-glow-fire) !important; -} - -::-webkit-progress-value { - background: var(--inferno-border-energy) !important; - border-radius: var(--inferno-radius-flame) inherit var(--inferno-radius-flame) 0 !important; - box-shadow: var(--inferno-glow-fire) !important; -} - -::-moz-progress-bar { - background: var(--inferno-border-energy) !important; - border-radius: var(--inferno-radius-flame) inherit var(--inferno-radius-flame) 0 !important; - box-shadow: var(--inferno-glow-fire) !important; -} - -/* Slider controls cu efecte de foc */ -.mdl-slider-background-flex { - border-radius: var(--inferno-radius-flame) !important; - height: 0.5em !important; - margin-top: -0.25em !important; - background: linear-gradient(90deg, var(--inferno-shadow), var(--inferno-darkness)) !important; - transition: var(--inferno-transition-normal) !important; - border: 1px solid var(--inferno-border-fire) !important; - box-shadow: var(--inferno-glow-fire) !important; -} - -.mdl-slider-background-lower { - background: var(--inferno-border-energy) !important; - box-shadow: var(--inferno-glow-fire) !important; -} - -.mdl-slider::-webkit-slider-thumb { - background: var(--inferno-explosion) !important; - width: 6px !important; - height: 0.5em !important; - border-radius: var(--inferno-radius-flame) !important; - box-shadow: var(--inferno-glow-explosion) !important; - border: 2px solid var(--inferno-flame) !important; -} - -.sliderContainer:hover .mdl-slider::-webkit-slider-thumb { - width: 0.3em !important; - height: 1em !important; - border-radius: var(--inferno-radius-flame) !important; - transform: scale(1.2) !important; - box-shadow: var(--inferno-glow-hell) !important; -} - -/* ======================================== - * 🔥 DIALOGURI ȘI FORMULARE INFERNALE (inspirat din ElegantFin) - * ======================================== */ - -/* Dialoguri cu efecte dramatice */ -.dialog { - backdrop-filter: var(--inferno-blur-large) !important; - background: linear-gradient(135deg, var(--inferno-shadow), var(--inferno-darkness)) !important; - border: 3px solid var(--inferno-border-fire) !important; - border-radius: var(--inferno-radius-fire) !important; - box-shadow: var(--inferno-shadow-apocalypse), var(--inferno-glow-hell) !important; - min-width: 12em !important; - animation: dialog-appear 0.5s ease-out !important; -} - -@keyframes dialog-appear { - 0% { - transform: scale(0.8) translateY(-50px); - opacity: 0; - } - 100% { - transform: scale(1) translateY(0); - opacity: 1; - } -} - -.dialog:not(.dialog-fullscreen) { - border-radius: var(--inferno-radius-fire) !important; - border: 3px solid var(--inferno-border-fire) !important; - box-shadow: var(--inferno-glow-hell) !important; -} - -/* Input fields cu efecte de foc */ -.emby-select-withcolor, -.emby-select, -.emby-input, -.emby-textarea { - background: linear-gradient(135deg, var(--inferno-shadow), var(--inferno-darkness)) !important; - border: 2px solid var(--inferno-border-fire) !important; - border-radius: var(--inferno-radius-flame) !important; - padding: 0.6em !important; - color: var(--inferno-text-primary) !important; - transition: var(--inferno-transition-normal) !important; - box-shadow: var(--inferno-glow-fire) !important; -} - -.emby-select-withcolor:focus, -.emby-input:focus, -.emby-textarea:focus { - border-color: var(--inferno-explosion) !important; - box-shadow: var(--inferno-glow-explosion) !important; - background: linear-gradient(135deg, var(--inferno-darkness), var(--inferno-glow)) !important; - outline: none !important; -} - -.emby-select-withcolor:hover:not(:focus), -.emby-input:hover:not(:focus), -.emby-textarea:hover:not(:focus) { - border-color: var(--inferno-flame) !important; - box-shadow: var(--inferno-glow-fire) !important; -} - -/* Labels cu efecte de text */ -.inputLabelFocused, -.selectLabelFocused, -.textareaLabelFocused { - color: var(--inferno-text-fire) !important; - text-shadow: 0 0 10px var(--inferno-flame) !important; - font-weight: bold !important; -} - -/* Butoane cu design infernal */ -.emby-button.block, -.button-alt, -.raised { - color: var(--inferno-text-primary) !important; - border-radius: var(--inferno-radius-flame) !important; - background: linear-gradient(135deg, var(--inferno-fire), var(--inferno-lava)) !important; - border: 2px solid var(--inferno-flame) !important; - transition: var(--inferno-transition-fast) !important; - box-shadow: var(--inferno-glow-fire) !important; - font-weight: bold !important; - text-shadow: 0 0 5px var(--inferno-flame) !important; -} - -.emby-button.block:hover, -.button-alt:hover, -.raised:hover { - background: linear-gradient(135deg, var(--inferno-explosion), var(--inferno-flame)) !important; - transform: scale(1.05) !important; - box-shadow: var(--inferno-glow-explosion) !important; -} - -.emby-button.block:active, -.button-alt:active, -.raised:active { - transform: scale(0.98) !important; - box-shadow: var(--inferno-shadow-fire) !important; -} - -/* Carduri pentru episoade cu design special */ -.listItemImage.listItemImage-large.itemAction.lazy { - height: 120px !important; - border-radius: var(--border-radius-xl) !important; - transition: var(--transition-normal) !important; - box-shadow: var(--shadow-sm) !important; -} - -.listItemImage.listItemImage-large.itemAction.lazy:hover { - transform: scale(1.05) !important; - box-shadow: var(--shadow-lg) !important; -} - -.listItem-content { - height: auto !important; - padding: var(--space-4) !important; - background: var(--background-secondary) !important; - border-radius: var(--border-radius-xl) !important; - margin: var(--space-2) 0 !important; - border: 1px solid var(--border-primary) !important; - transition: var(--transition-normal) !important; -} - -.listItem-content:hover { - background: var(--background-tertiary) !important; - border-color: var(--border-secondary) !important; - transform: translateX(var(--space-2)) !important; -} - -.secondary.listItem-overview.listItemBodyText { - color: var(--text-muted) !important; - line-height: 1.5 !important; - margin: var(--space-2) 0 0 0 !important; - font-size: 0.9rem !important; -} - -/* ======================================== - * 🎭 CARDURI CAST ÎMBUNĂTĂȚITE (inspirat din Ultrachromic) - * ======================================== */ - -/* Carduri pentru cast - FĂRĂ BLUR PE IMAGINI */ -.personCard { - background: rgba(30, 41, 59, 0.3) !important; - border: 1px solid var(--elegant-border-primary) !important; - border-radius: var(--elegant-radius-lg) !important; - transition: var(--elegant-transition-normal) !important; - padding: 8px !important; - will-change: transform, box-shadow !important; -} - -.personCard:hover { - transform: translateY(-6px) scale(1.03) !important; - box-shadow: var(--nexus-shadow-xl), var(--nexus-glow-primary) !important; - border-color: var(--nexus-primary) !important; - background: var(--nexus-accent-alpha-10) !important; -} - -/* Cast thumbnails mai mici și rotunde (inspirat din Ultrachromic) */ -#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, -#castContent .card.overflowPortraitCard.personCard.card-withuserdata { - width: 110px !important; - font-size: 85% !important; - transition: var(--nexus-transition-smooth) !important; -} - -#castContent .card.overflowPortraitCard.personCard:hover { - transform: translateY(-6px) scale(1.08) !important; - box-shadow: var(--nexus-shadow-xl), var(--nexus-glow-primary) !important; -} - -/* ======================================== - * INDICATORI ȘI BADGE-URI MODERNE - * ======================================== */ - -/* Indicator pentru conținut vizionat cu design modern */ +/* Indicator pentru conținut vizionat */ .playedIndicator { - background: linear-gradient( - 135deg, - var(--success-color) 0%, - #059669 100% - ) !important; - border: 2px solid var(--background-primary) !important; - border-radius: var(--border-radius-full) !important; - box-shadow: var(--shadow-md), 0 0 0 2px rgba(16, 185, 129, 0.3) !important; - width: 24px !important; - height: 24px !important; - position: relative; + background: var(--success-color) !important; + border-radius: 50% !important; + box-shadow: var(--shadow-light) !important; } -.playedIndicator::before { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-size: 12px; - font-weight: bold; -} - -/* Indicatori - FĂRĂ BLUR PE IMAGINI */ +/* Indicatori transparenți și eleganți */ .indicator { - background: rgba(99, 102, 241, 0.8) !important; - color: var(--elegant-text-primary) !important; - border: 1px solid var(--elegant-border-accent) !important; - border-radius: var(--elegant-radius-md) !important; - box-shadow: var(--elegant-shadow-sm) !important; - font-weight: 600 !important; - padding: 4px 8px !important; - font-size: 0.8rem !important; + background: rgba(0, 0, 0, 0.7) !important; + color: white !important; + border-radius: var(--border-radius-small) !important; + backdrop-filter: blur(5px) !important; } /* Indicatori pentru numărul de episoade */ .countIndicator { - background: linear-gradient( - 135deg, - var(--primary-color) 0%, - var(--primary-hover) 100% - ) !important; - color: var(--text-primary) !important; - border: 1px solid var(--primary-color) !important; - border-radius: var(--border-radius-full) !important; - font-weight: 700 !important; - font-size: 0.75rem !important; - padding: var(--space-1) var(--space-2) !important; - box-shadow: var(--shadow-md), var(--shadow-glow) !important; - min-width: 24px !important; - height: 24px !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; -} - -/* Badge pentru progres */ -.progressIndicator { - background: linear-gradient( - 90deg, - var(--accent-color) 0%, - var(--accent-hover) 100% - ) !important; - border-radius: var(--border-radius-full) !important; - height: 4px !important; - box-shadow: var(--shadow-sm) !important; - position: relative; - overflow: hidden; -} - -.progressIndicator::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - transparent 0%, - rgba(255, 255, 255, 0.3) 50%, - transparent 100% - ); - animation: shimmer 2s infinite; -} - -@keyframes shimmer { - 0% { transform: translateX(-100%); } - 100% { transform: translateX(100%); } -} - -/* Rating cu stele îmbunătățit */ -.starRatingContainer { - filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); - padding: var(--space-1) !important; -} - -.starRatingContainer .material-icons { - color: var(--accent-color) !important; - text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; - transition: var(--transition-fast) !important; -} - -.starRatingContainer .material-icons:hover { - color: var(--accent-hover) !important; - transform: scale(1.1) !important; -} - -/* Badge-uri pentru genuri */ -.genreChip { - background: var(--background-tertiary) !important; - color: var(--text-secondary) !important; - border: 1px solid var(--border-secondary) !important; - border-radius: var(--border-radius-full) !important; - padding: var(--space-1) var(--space-3) !important; - font-size: 0.8rem !important; - font-weight: 500 !important; - transition: var(--transition-normal) !important; - margin: var(--space-1) !important; -} - -.genreChip:hover { background: var(--primary-color) !important; - color: var(--text-primary) !important; - border-color: var(--primary-color) !important; - transform: translateY(-1px) !important; - box-shadow: var(--shadow-sm) !important; + color: white !important; + border-radius: var(--border-radius-large) !important; + font-weight: 600 !important; + box-shadow: var(--shadow-light) !important; } -/* Indicator pentru calitate video */ -.mediaInfoBadge { - background: rgba(99, 102, 241, 0.8) !important; - color: var(--elegant-text-primary) !important; - border: 1px solid var(--elegant-border-accent) !important; - border-radius: var(--elegant-radius-md) !important; - padding: 4px 8px !important; - font-size: 0.7rem !important; - font-weight: 600 !important; - text-transform: uppercase !important; - letter-spacing: 0.5px !important; - box-shadow: var(--elegant-shadow-sm) !important; +/* Rating cu stele */ +.starRatingContainer { + filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } /* ======================================== - * FORMULARE ȘI INPUTURI MODERNE + * FORMULARE ȘI INPUTURI * ======================================== */ -/* Câmpuri de input cu glassmorphism */ +/* Câmpuri de input */ .emby-input, .emby-textarea, .emby-select { - background: rgba(30, 41, 59, 0.8) !important; - border: 1px solid var(--elegant-border-primary) !important; - border-radius: var(--elegant-radius-lg) !important; - color: var(--elegant-text-primary) !important; + background-color: var(--background-light) !important; + border: 2px solid var(--border-color) !important; + border-radius: var(--border-radius) !important; + color: var(--text-primary) !important; padding: 12px 16px !important; - font-size: 0.95rem !important; - font-weight: 400 !important; - transition: var(--elegant-transition-normal) !important; - box-shadow: var(--elegant-shadow-sm) !important; - position: relative; + transition: all var(--transition-fast) !important; } .emby-input:focus, .emby-textarea:focus, .emby-select-withcolor { border-color: var(--primary-color) !important; - box-shadow: - var(--shadow-md), - 0 0 0 3px rgba(14, 165, 233, 0.1) !important; - background: var(--background-secondary) !important; - transform: translateY(-1px) !important; + box-shadow: 0 0 0 3px rgba(0, 164, 220, 0.2) !important; + background-color: var(--background-medium) !important; } -.emby-input:hover, -.emby-textarea:hover, -.emby-select:hover { - border-color: var(--border-secondary) !important; - background: var(--background-secondary) !important; -} - -/* Placeholder text modern */ +/* Placeholder text */ .emby-input::placeholder, .emby-textarea::placeholder { - color: var(--text-muted) !important; - opacity: 0.8 !important; - font-weight: 400 !important; -} - -/* Labels pentru formulare */ -.inputLabel, -.fieldDescription { color: var(--text-secondary) !important; - font-weight: 500 !important; - font-size: 0.9rem !important; - margin-bottom: var(--space-2) !important; -} - -/* Checkbox și radio buttons moderne */ -.emby-checkbox, -.emby-radio { - appearance: none !important; - width: 20px !important; - height: 20px !important; - border: 2px solid var(--border-primary) !important; - border-radius: var(--border-radius-sm) !important; - background: var(--background-tertiary) !important; - transition: var(--transition-normal) !important; - position: relative !important; - cursor: pointer !important; -} - -.emby-radio { - border-radius: var(--border-radius-full) !important; -} - -.emby-checkbox:checked, -.emby-radio:checked { - background: var(--primary-color) !important; - border-color: var(--primary-color) !important; - box-shadow: var(--shadow-glow) !important; -} - -.emby-checkbox:checked::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-size: 12px; - font-weight: bold; -} - -.emby-radio:checked::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 8px; - height: 8px; - background: white; - border-radius: var(--border-radius-full); -} - -/* Select dropdown modern */ -.emby-select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important; - background-position: right var(--space-3) center !important; - background-repeat: no-repeat !important; - background-size: 16px 16px !important; - padding-right: var(--space-10) !important; -} - -/* Slider modern */ -.mdl-slider { - background: var(--border-primary) !important; - height: 6px !important; - border-radius: var(--border-radius-full) !important; -} - -.mdl-slider::-webkit-slider-thumb { - background: var(--primary-color) !important; - border: 2px solid white !important; - border-radius: var(--border-radius-full) !important; - box-shadow: var(--shadow-md) !important; - width: 20px !important; - height: 20px !important; - transition: var(--transition-normal) !important; -} - -.mdl-slider::-webkit-slider-thumb:hover { - background: var(--primary-hover) !important; - transform: scale(1.1) !important; - box-shadow: var(--shadow-lg) !important; + opacity: 0.7; } /* ======================================== @@ -1888,21 +356,17 @@ progress, ::-webkit-progress-bar { } /* ======================================== - * PAGINA DE LOGIN ULTRA-MODERNĂ + * PAGINA DE LOGIN * ======================================== */ -/* Container principal pentru login cu fundal animat */ +/* Container pentru pagina de login */ #loginPage { - background: var(--background-primary) !important; + background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%); + background-size: cover; position: relative; - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; } -/* Fundal animat cu particule */ +/* Overlay pentru pagina de login */ #loginPage::before { content: ''; position: absolute; @@ -1910,178 +374,41 @@ progress, ::-webkit-progress-bar { left: 0; right: 0; bottom: 0; - background: - radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.15) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.15) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.1) 0%, transparent 50%); - animation: float 20s ease-in-out infinite; + background: rgba(15, 15, 15, 0.8); + backdrop-filter: blur(5px); } -@keyframes float { - 0%, 100% { transform: translateY(0px) rotate(0deg); } - 33% { transform: translateY(-20px) rotate(1deg); } - 66% { transform: translateY(10px) rotate(-1deg); } -} - -/* Overlay cu blur pentru login */ -#loginPage::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - backdrop-filter: var(--blur-sm); - -webkit-backdrop-filter: var(--blur-sm); +/* Formular de login - design minimalist */ +#loginPage .readOnlyContent, +#loginPage form { + max-width: 400px !important; + background: rgba(26, 26, 26, 0.95) !important; + border-radius: var(--border-radius-large) !important; + padding: 40px !important; + box-shadow: var(--shadow-heavy) !important; + border: 1px solid var(--border-color) !important; + position: relative; z-index: 1; } -/* Formular de login cu glassmorphism premium */ -#loginPage .readOnlyContent, -#loginPage form { - max-width: 420px !important; - width: 90% !important; - background: var(--background-overlay) !important; - backdrop-filter: var(--blur-lg) !important; - -webkit-backdrop-filter: var(--blur-lg) !important; - border: 1px solid var(--border-primary) !important; - border-radius: var(--border-radius-3xl) !important; - padding: var(--space-12) var(--space-8) !important; - box-shadow: var(--shadow-2xl) !important; - position: relative; - z-index: 2; - margin: var(--space-8); -} - -/* Efect glow pentru formular */ -#loginPage .readOnlyContent::before, -#loginPage form::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient( - 90deg, - transparent 0%, - var(--primary-color) 50%, - transparent 100% - ); - opacity: 0.6; -} - -/* Logo și titlu login */ +/* Titlu login */ #loginPage h1 { - color: var(--text-primary) !important; + color: var(--primary-color) !important; text-align: center !important; - margin-bottom: var(--space-8) !important; + margin-bottom: 30px !important; font-weight: 300 !important; - font-size: 2.5rem !important; - background: linear-gradient( - 135deg, - var(--text-primary) 0%, - var(--primary-color) 100% - ); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -/* Subtitle pentru login */ -#loginPage .readOnlyContent p, -#loginPage form p { - color: var(--text-muted) !important; - text-align: center !important; - margin-bottom: var(--space-6) !important; - font-size: 0.95rem !important; -} - -/* Inputuri în formular login */ -#loginPage .emby-input { - background: var(--background-secondary) !important; - border: 1px solid var(--border-primary) !important; - border-radius: var(--border-radius-xl) !important; - padding: var(--space-4) var(--space-5) !important; - margin-bottom: var(--space-4) !important; - font-size: 1rem !important; - transition: var(--transition-normal) !important; -} - -#loginPage .emby-input:focus { - border-color: var(--primary-color) !important; - box-shadow: - var(--shadow-md), - 0 0 0 3px rgba(14, 165, 233, 0.1) !important; - background: var(--background-tertiary) !important; -} - -/* Buton login premium */ -#loginPage .raised.emby-button { - width: 100% !important; - background: linear-gradient( - 135deg, - var(--primary-color) 0%, - var(--primary-hover) 50%, - var(--accent-color) 100% - ) !important; - border: none !important; - border-radius: var(--border-radius-xl) !important; - padding: var(--space-4) !important; - font-size: 1.1rem !important; - font-weight: 600 !important; - margin-top: var(--space-6) !important; - transition: var(--transition-normal) !important; - position: relative; - overflow: hidden; -} - -#loginPage .raised.emby-button::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent 0%, - rgba(255, 255, 255, 0.2) 50%, - transparent 100% - ); - transition: var(--transition-normal); -} - -#loginPage .raised.emby-button:hover { - transform: translateY(-2px) !important; - box-shadow: var(--shadow-xl) !important; -} - -#loginPage .raised.emby-button:hover::before { - left: 100%; + font-size: 2.5em !important; } /* Spațiere pentru formular */ #loginPage .padded-left.padded-right.padded-bottom-page { - margin-top: 0 !important; - padding: 0 !important; + margin-top: 50px; } -/* Ascunde butoanele nedorite */ +/* Ascunde butoanele manual și forgot password */ #loginPage .raised.cancel.block.btnManual.emby-button, #loginPage .raised.cancel.block.btnForgotPassword.emby-button { - display: none !important; -} - -/* Link-uri în footer login */ -#loginPage a { - color: var(--text-muted) !important; - text-decoration: none !important; - transition: var(--transition-fast) !important; -} - -#loginPage a:hover { - color: var(--primary-color) !important; + display: none; } /* ======================================== @@ -2392,511 +719,48 @@ div.nextUpSection { } /* ======================================== - * DIALOGURI ȘI MODALE MODERNE + * FINALIZARE ȘI OPTIMIZĂRI * ======================================== */ -/* Backdrop pentru dialoguri cu blur */ -.dialogBackdrop { - background: rgba(15, 23, 42, 0.8) !important; - backdrop-filter: var(--blur-md) !important; - -webkit-backdrop-filter: var(--blur-md) !important; - transition: var(--transition-normal) !important; +/* Optimizări pentru performanță */ +* { + will-change: auto !important; } -/* Dialoguri cu glassmorphism */ -.dialog { - background: var(--background-overlay) !important; - backdrop-filter: var(--blur-lg) !important; - -webkit-backdrop-filter: var(--blur-lg) !important; - border: 1px solid var(--border-primary) !important; - border-radius: var(--border-radius-3xl) !important; - box-shadow: var(--shadow-2xl) !important; - max-width: 90vw !important; - max-height: 90vh !important; - overflow: hidden !important; -} - -/* Header dialoguri */ -.dialog h2, -.dialog h3 { - color: var(--text-primary) !important; - font-weight: 600 !important; - margin-bottom: var(--space-4) !important; - padding-bottom: var(--space-2) !important; - border-bottom: 1px solid var(--border-primary) !important; -} - -/* Conținut dialoguri */ -.dialog .dialogContent { - padding: var(--space-6) !important; - color: var(--text-secondary) !important; - line-height: 1.6 !important; -} - -/* ======================================== - * PLAYER VIDEO MODERN - * ======================================== */ - -/* Controale video cu glassmorphism */ -.videoOsdBottom { - background: var(--background-overlay) !important; - backdrop-filter: var(--blur-lg) !important; - -webkit-backdrop-filter: var(--blur-lg) !important; - border-top: 1px solid var(--border-primary) !important; - padding: var(--space-4) !important; -} - -/* Bara de progres video modernă */ -.osdProgressBar { - background: var(--border-primary) !important; - height: 6px !important; - border-radius: var(--border-radius-full) !important; - overflow: hidden !important; -} - -.osdProgressBarForeground { - background: linear-gradient( - 90deg, - var(--primary-color) 0%, - var(--accent-color) 100% - ) !important; - border-radius: var(--border-radius-full) !important; - box-shadow: 0 0 10px rgba(14, 165, 233, 0.5) !important; -} - -/* Butoane player moderne */ -.videoOsdBottom .material-icons { - color: var(--text-primary) !important; - background: var(--background-tertiary) !important; - border-radius: var(--border-radius-full) !important; - padding: var(--space-2) !important; - margin: 0 var(--space-1) !important; - transition: var(--transition-normal) !important; -} - -.videoOsdBottom .material-icons:hover { - color: var(--primary-color) !important; - background: var(--background-surface) !important; - transform: scale(1.1) !important; - box-shadow: var(--shadow-md) !important; -} - -/* ======================================== - * RESPONSIVE DESIGN AVANSAT - * ======================================== */ - -/* Mobile optimizations */ -@media (max-width: 768px) { - :root { - --space-4: 0.75rem; - --space-6: 1rem; - --space-8: 1.5rem; - } - - .emby-tab-button { - padding: var(--space-4) var(--space-3) !important; - font-size: 0.9rem !important; - } - - .cardBox { - margin: var(--space-2) !important; - border-radius: var(--border-radius-xl) !important; - } - - #loginPage .readOnlyContent, - #loginPage form { - padding: var(--space-8) var(--space-6) !important; - margin: var(--space-4) !important; - } - - .headerButton { - padding: var(--space-2) !important; - margin: 0 var(--space-1) !important; - } -} - -/* Tablet optimizations */ -@media (min-width: 769px) and (max-width: 1024px) { - .itemsContainer { - gap: var(--space-3) !important; - } - - .cardBox { - margin: var(--space-2) !important; - } -} - -/* Desktop large screens */ -@media (min-width: 1440px) { - .itemsContainer { - gap: var(--space-6) !important; - padding: var(--space-6) !important; - } - - .cardBox { - margin: var(--space-3) !important; - } -} - -/* ======================================== - * ANIMAȚII ȘI MICRO-INTERACȚIUNI - * ======================================== */ - -/* Animație pentru încărcare */ -@keyframes pulse-glow { - 0%, 100% { - opacity: 1; - box-shadow: 0 0 5px rgba(14, 165, 233, 0.5); - } - 50% { - opacity: 0.8; - box-shadow: 0 0 20px rgba(14, 165, 233, 0.8); - } -} - -.loading { - animation: pulse-glow 2s ease-in-out infinite !important; -} - -/* Animație pentru carduri noi */ -@keyframes slideInUp { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.cardBox { - animation: slideInUp 0.6s ease-out !important; -} - -/* Animație pentru butoane active */ -@keyframes buttonPress { - 0% { transform: scale(1); } - 50% { transform: scale(0.95); } - 100% { transform: scale(1); } -} - -.button-submit:active, -.raised.emby-button:active { - animation: buttonPress 0.1s ease-out !important; -} - -/* ======================================== - * OPTIMIZĂRI FINALE ȘI PERFORMANȚĂ - * ======================================== */ - -/* Optimizări GPU pentru animații */ .cardBox, .emby-tab-button, .headerButton, -.navMenuOption, -.button-submit, -.raised.emby-button { - will-change: transform, opacity, box-shadow !important; - transform: translateZ(0) !important; +.navMenuOption { + will-change: transform, box-shadow !important; } -/* Smooth scrolling pentru întreaga pagină */ -html { - scroll-behavior: smooth !important; +/* Asigură compatibilitatea cu toate temele */ +.skinHeader, +.mainDrawer, +.emby-input, +.emby-textarea, +.emby-select, +.navMenuOption-selected, +.cardBox, +.paperList { + transition: all var(--transition-medium) !important; } -/* Optimizări pentru focus și accesibilitate */ -*:focus { - outline: 2px solid var(--primary-color) !important; - outline-offset: 2px !important; - border-radius: var(--border-radius-sm) !important; -} - -/* Reduce motion pentru utilizatorii sensibili */ -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} - -/* ======================================== - * ✨ ÎMBUNĂTĂȚIRI INSPIRATE DIN DOCUMENTAȚIA JELLYFIN ✨ - * ======================================== */ - -/* Played/Watched Indicators cu culori elegante */ -.playedIndicator { - background: var(--elegant-success) !important; - border-radius: var(--elegant-radius-full) !important; - box-shadow: var(--elegant-glow-subtle) !important; -} - -.indicator { - background: rgba(99, 102, 241, 0.8) !important; - color: var(--elegant-text-primary) !important; - border-radius: var(--elegant-radius-md) !important; - font-weight: 600 !important; - box-shadow: var(--elegant-shadow-sm) !important; -} - -.countIndicator { - background: rgba(139, 92, 246, 0.8) !important; - color: var(--elegant-text-primary) !important; - border-radius: var(--elegant-radius-full) !important; - font-weight: 600 !important; - box-shadow: var(--elegant-shadow-sm) !important; -} - -/* Imagini cu colțuri rotunjite elegante */ -.cardContent-button, -.itemDetailImage { - border-radius: var(--elegant-radius-lg) !important; - transition: var(--elegant-transition-normal) !important; -} - -/* Tab buttons mărite pentru accesibilitate mai bună */ -.headerTabs.sectionTabs { - text-size-adjust: 110%; - font-size: 110%; -} - -.emby-tab-button { - padding: 1.2em 1.4em !important; - border-radius: var(--elegant-radius-md) !important; - transition: var(--elegant-transition-normal) !important; - font-weight: 500 !important; -} - -.emby-tab-button:hover { - background: rgba(99, 102, 241, 0.1) !important; - color: var(--elegant-primary) !important; - transform: translateY(-1px) !important; -} - -.emby-tab-button.emby-tab-button-active { - background: var(--elegant-primary) !important; - color: var(--elegant-text-primary) !important; - box-shadow: var(--elegant-glow-primary) !important; -} - -/* Episode previews mai compacte și elegante */ -.listItemImage.listItemImage-large.itemAction.lazy { - height: 110px !important; - border-radius: var(--elegant-radius-md) !important; - transition: var(--elegant-transition-normal) !important; -} - -.listItem-content { - height: 115px !important; -} - -.secondary.listItem-overview.listItemBodyText { - height: 61px !important; - margin: 0 !important; - color: var(--elegant-text-muted) !important; - line-height: 1.4 !important; -} - -.listItemImage.listItemImage-large.itemAction.lazy:hover { - transform: scale(1.02) !important; - box-shadow: var(--elegant-shadow-lg) !important; -} - -/* Cast & Crew stilizat și compact */ -#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, -#castContent .card.overflowPortraitCard.personCard.card-withuserdata { - width: 4.2cm !important; - font-size: 90% !important; - transition: var(--elegant-transition-normal) !important; -} - -#castContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy, -#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.cardContent-shadow.itemAction, -#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardContent-shadow.itemAction, -#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAction, -#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground4.cardContent.cardContent-shadow.itemAction, -#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground5.cardContent.cardContent-shadow.itemAction { - background-size: cover !important; - border-radius: var(--elegant-radius-lg) !important; -} - -#castContent .cardScalable { - width: 3.8cm !important; - height: 3.8cm !important; - border-radius: var(--elegant-radius-lg) !important; -} - -#castContent .cardOverlayContainer.itemAction { - border-radius: var(--elegant-radius-lg) !important; -} - -#castContent .cardOverlayButton-br { - bottom: 4%; - right: 15%; - width: 70%; -} - -#castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light { - margin: auto; -} - -/* Îmbunătățiri pentru accesibilitate și responsive design */ -@media all and (min-width: 50em) { - .homePage .emby-scroller { - margin-right: 0; - } - - .homePage .emby-scrollbuttons { - display: none; - } - - .homePage .itemsContainer { - flex-wrap: wrap; - } -} - -/* Butoane de scroll poziționare îmbunătățită */ -.emby-scrollbuttons { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - padding: 0; - justify-content: space-between; - pointer-events: none; -} - -.emby-scrollbuttons-button { - pointer-events: initial; - background: rgba(99, 102, 241, 0.8) !important; - color: var(--elegant-text-primary) !important; - border-radius: var(--elegant-radius-full) !important; - transition: var(--elegant-transition-normal) !important; -} - -.emby-scrollbuttons-button:hover { - background: var(--elegant-primary) !important; - transform: scale(1.1) !important; - box-shadow: var(--elegant-glow-primary) !important; -} - -/* External links vizibile pe mobile */ -.layout-mobile .itemExternalLinks { - display: block !important; -} - -/* Link-uri externe stilizate elegant */ -.itemExternalLinks a { - background: rgba(99, 102, 241, 0.1) !important; - color: var(--elegant-primary) !important; - border: 1px solid var(--elegant-border-accent) !important; - border-radius: var(--elegant-radius-md) !important; - padding: 8px 12px !important; - margin: 4px !important; - transition: var(--elegant-transition-normal) !important; - text-decoration: none !important; - font-weight: 500 !important; -} - -.itemExternalLinks a:hover { - background: var(--elegant-primary) !important; - color: var(--elegant-text-primary) !important; - transform: translateY(-1px) !important; - box-shadow: var(--elegant-shadow-md) !important; -} - -/* Îmbunătățiri pentru Star Ratings */ -div.starRatingContainer { - margin: 8px 0 !important; -} - -.starRating { - color: var(--elegant-accent) !important; - filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.3)) !important; -} - -/* Îmbunătățiri pentru Progress Bars în liste */ -.itemProgressBar { - background: rgba(15, 23, 42, 0.6) !important; - border-radius: var(--elegant-radius-full) !important; - overflow: hidden !important; -} - -.itemProgressBarForeground { - background: linear-gradient(90deg, var(--elegant-primary), var(--elegant-secondary)) !important; - border-radius: var(--elegant-radius-full) !important; - box-shadow: 0 0 8px rgba(99, 102, 241, 0.4) !important; -} - -/* Îmbunătățiri pentru Media Info Badges */ -.mediaInfoBadge { - background: rgba(99, 102, 241, 0.8) !important; - color: var(--elegant-text-primary) !important; - border: 1px solid var(--elegant-border-accent) !important; - border-radius: var(--elegant-radius-md) !important; - padding: 4px 8px !important; - font-size: 0.7rem !important; - font-weight: 600 !important; - text-transform: uppercase !important; - letter-spacing: 0.5px !important; - box-shadow: var(--elegant-shadow-sm) !important; -} - -/* Responsive design pentru tablete */ -@media (min-width: 768px) and (max-width: 1024px) { - .cardBox { - margin: 8px !important; - } - - .emby-tab-button { - padding: 1em 1.2em !important; - font-size: 0.9rem !important; - } - - .headerTabs.sectionTabs { - font-size: 100% !important; - } -} - -/* Responsive design pentru mobile */ -@media (max-width: 767px) { - .cardBox { - margin: 4px !important; - } - - .emby-tab-button { - padding: 0.8em 1em !important; - font-size: 0.85rem !important; - } - - .headerTabs.sectionTabs { - font-size: 95% !important; - } - - .listItemImage.listItemImage-large.itemAction.lazy { - height: 90px !important; - } - - .listItem-content { - height: 95px !important; - } -} - -/* 💡 PERSONALIZARE ELEGANT: - * Modifică variabilele --nexus-* din secțiunea :root - * pentru a adapta tema la preferințele tale cosmice. +/* Mesaj final în CSS */ +/* + * ======================================== + * SFÂRȘITUL TEMEI PERSONALIZATE JELLYFIN + * ======================================== * - * 📋 INSTALARE AUTOMATĂ: - * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css'); + * Această temă oferă: + * ✓ Design modern și elegant + * ✓ Animații fluide și responsive + * ✓ Compatibilitate cu toate dispozitivele + * ✓ Îmbunătățiri pentru accesibilitate + * ✓ Optimizări pentru performanță * - * 👨‍💻 Autor: EDD - * 🚀 Versiune: 5.0 ELEGANT REFINED + JELLYFIN DOCS - * 📅 Data: 2025 - * 🌐 Repository: https://git.eddmanoo.cloud/eddmanoo/jellyfincss - * 📚 Inspirat din: Documentația oficială Jellyfin CSS Customization + * Pentru suport sau personalizări suplimentare, + * modifică variabilele CSS din secțiunea :root * - * ✨ Bucură-te de experiența Jellyfin ELEGANT cu imagini clare și design rafinat! �💫 + * Bucură-te de experiența îmbunătățită Jellyfin! */ \ No newline at end of file