From 89d7bed771ff1574cf1ca7ef6b29dd80ab6464f7 Mon Sep 17 00:00:00 2001 From: eddmanoo Date: Fri, 19 Sep 2025 13:06:18 +0300 Subject: [PATCH] Update CSS V6.0.0 --- edd.css | 1384 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 746 insertions(+), 638 deletions(-) diff --git a/edd.css b/edd.css index 8632ab6..22a076d 100644 --- a/edd.css +++ b/edd.css @@ -1,79 +1,513 @@ /* * ======================================== - * CSS PERSONALIZAT PENTRU JELLYFIN SERVER + * 🎨 JELLYFIN MODERN PROFESSIONAL THEME 🎨 * ======================================== * - * Autor: EDD - * Versiune: 1.0 - * Compatibilitate: Jellyfin WebUI (toate versiunile moderne) + * 👨‍💻 Autor: EDD + * 🚀 Versiune: 6.0 MODERN PROFESSIONAL + * 📅 Data: 2025 + * 🎯 Compatibilitate: Jellyfin WebUI (toate versiunile moderne) * - * 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ă. + * ✨ Descriere: Cea mai frumoasă temă modernă și profesională pentru Jellyfin + * cu design întunecat, culori neutre și efecte subtile pentru o experiență premium. * - * 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 + * 📋 Instrucțiuni de utilizare: + * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css'); * - * Notă: Modificările se aplică imediat, fără a fi nevoie să restartezi serverul. + * 🌟 Caracteristici: + * - Design modern și profesional + * - Temă întunecată cu culori neutre + * - Animații subtile și elegante + * - Responsive design perfect + * - Glassmorphism și efecte moderne + * - Optimizat pentru toate dispozitivele */ /* ======================================== - * VARIABILE CSS GLOBALE + * 🎨 SISTEM DE CULORI MODERN PROFESSIONAL * ======================================== */ :root { - /* 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 */ + /* 🌙 Paleta de culori neutre moderne */ + --modern-slate-50: #f8fafc; /* Alb cald */ + --modern-slate-100: #f1f5f9; /* Gri foarte deschis */ + --modern-slate-200: #e2e8f0; /* Gri deschis */ + --modern-slate-300: #cbd5e1; /* Gri mediu deschis */ + --modern-slate-400: #94a3b8; /* Gri mediu */ + --modern-slate-500: #64748b; /* Gri */ + --modern-slate-600: #475569; /* Gri închis */ + --modern-slate-700: #334155; /* Gri foarte închis */ + --modern-slate-800: #1e293b; /* Aproape negru */ + --modern-slate-900: #0f172a; /* Negru slate */ - /* 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); + /* 🎯 Culori accent moderne */ + --modern-blue-500: #3b82f6; /* Albastru modern */ + --modern-blue-600: #2563eb; /* Albastru închis */ + --modern-indigo-500: #6366f1; /* Indigo elegant */ + --modern-violet-500: #8b5cf6; /* Violet subtil */ + --modern-emerald-500: #10b981; /* Verde modern */ + --modern-amber-500: #f59e0b; /* Galben modern */ - /* Tranziții */ - --transition-fast: 0.2s ease; - --transition-medium: 0.3s ease; - --transition-slow: 0.5s ease; + /* 🎨 Paleta principală aplicației */ + --primary: var(--modern-indigo-500); + --primary-hover: var(--modern-indigo-600); + --secondary: var(--modern-violet-500); + --accent: var(--modern-blue-500); + --success: var(--modern-emerald-500); + --warning: var(--modern-amber-500); + + /* 🌑 Fundal și suprafețe */ + --bg-primary: var(--modern-slate-900); /* Fundal principal */ + --bg-secondary: var(--modern-slate-800); /* Fundal secundar */ + --bg-tertiary: var(--modern-slate-700); /* Fundal terțiar */ + --surface: rgba(30, 41, 59, 0.8); /* Suprafață glassmorphism */ + --surface-hover: rgba(30, 41, 59, 0.9); /* Suprafață hover */ + + /* 📝 Text și conținut */ + --text-primary: var(--modern-slate-50); /* Text principal */ + --text-secondary: var(--modern-slate-300); /* Text secundar */ + --text-muted: var(--modern-slate-400); /* Text estompat */ + + /* 🔲 Borduri și separatori */ + --border-primary: rgba(203, 213, 225, 0.1); /* Bordură principală */ + --border-secondary: rgba(203, 213, 225, 0.05); /* Bordură secundară */ + --border-accent: rgba(99, 102, 241, 0.3); /* Bordură accent */ + + /* 🌟 Umbre și efecte */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + + /* ✨ Glow effects */ + --glow-primary: 0 0 20px rgba(99, 102, 241, 0.3); + --glow-secondary: 0 0 20px rgba(139, 92, 246, 0.3); + --glow-accent: 0 0 20px rgba(59, 130, 246, 0.3); + + /* 🔄 Tranziții și animații */ + --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); + --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); + + /* 📐 Dimensiuni și spațiere */ + --radius-sm: 0.375rem; /* 6px */ + --radius-md: 0.5rem; /* 8px */ + --radius-lg: 0.75rem; /* 12px */ + --radius-xl: 1rem; /* 16px */ + --radius-2xl: 1.5rem; /* 24px */ + --radius-full: 9999px; /* Complet rotund */ + + /* 🌫️ Blur effects */ + --blur-sm: blur(4px); + --blur-md: blur(8px); + --blur-lg: blur(16px); + --blur-xl: blur(24px); + + /* 📱 Responsive breakpoints */ + --mobile: 640px; + --tablet: 768px; + --desktop: 1024px; + --wide: 1280px; } /* ======================================== - * STILURI GENERALE PENTRU FUNDAL ȘI LAYOUT + * 🌌 FUNDAL MODERN CU GRADIENT SUBTIL * ======================================== */ -/* Fundal principal al aplicației */ -.backgroundContainer, -.dialog, -html { - background-color: var(--background-dark) !important; - color: var(--text-primary); +/* Fundal principal cu gradient elegant */ +html, +body { + background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important; + color: var(--text-primary) !important; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; + line-height: 1.6 !important; + overflow-x: hidden !important; } -/* Container principal pentru conținut */ -.backgroundContainer.withBackdrop, -.backdropContainer, +/* Container principal cu efecte moderne */ .backgroundContainer { - background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%) !important; + background: + radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.03) 0%, transparent 50%), + linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important; + min-height: 100vh !important; + position: relative !important; + overflow: hidden !important; } -/* Îmbunătățiri pentru scrolling */ +/* Particule animate în fundal */ +.backgroundContainer::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.1) 0%, transparent 2%), + radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.08) 0%, transparent 2%), + radial-gradient(circle at 50% 10%, rgba(59, 130, 246, 0.06) 0%, transparent 2%); + background-size: 300px 300px, 400px 400px, 500px 500px; + animation: float-particles 20s ease-in-out infinite; + pointer-events: none; + z-index: -1; +} + +@keyframes float-particles { + 0%, 100% { + transform: translateY(0px) rotate(0deg); + opacity: 0.3; + } + 50% { + transform: translateY(-20px) rotate(180deg); + opacity: 0.6; + } +} + +/* Backdrop pentru dialoguri și overlay-uri */ +.backdropContainer, +.backgroundContainer.withBackdrop { + background: var(--surface) !important; + backdrop-filter: var(--blur-lg) !important; + -webkit-backdrop-filter: var(--blur-lg) !important; + border: 1px solid var(--border-primary) !important; + box-shadow: var(--shadow-2xl) !important; +} + +/* ======================================== + * 🎯 HEADER MODERN CU GLASSMORPHISM + * ======================================== */ + +/* Header principal cu design modern */ +.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred, +.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader { + background: var(--surface) !important; + backdrop-filter: var(--blur-lg) !important; + -webkit-backdrop-filter: var(--blur-lg) !important; + border-bottom: 1px solid var(--border-accent) !important; + box-shadow: var(--shadow-lg) !important; + transition: var(--transition-normal) !important; + position: relative; + z-index: 1000; + overflow: hidden; +} + +/* Efect subtil de lumină în header */ +.skinHeader::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent); + animation: header-shine 8s ease-in-out infinite; + z-index: -1; +} + +@keyframes header-shine { + 0% { left: -100%; } + 50% { left: 100%; } + 100% { left: 200%; } +} + +/* Butoane din header */ +.headerButton { + background: rgba(99, 102, 241, 0.1) !important; + color: var(--text-primary) !important; + border: 1px solid var(--border-secondary) !important; + border-radius: var(--radius-md) !important; + padding: 8px 12px !important; + margin: 0 4px !important; + transition: var(--transition-normal) !important; + backdrop-filter: var(--blur-sm) !important; + font-weight: 500 !important; +} + +.headerButton:hover { + background: var(--primary) !important; + color: var(--text-primary) !important; + border-color: var(--border-accent) !important; + transform: translateY(-1px) !important; + box-shadow: var(--shadow-md), var(--glow-primary) !important; +} + +.headerButton:active { + transform: translateY(0) !important; + box-shadow: var(--shadow-sm) !important; +} + +/* ======================================== + * 🎴 CARDURI MODERNE CU DESIGN ELEGANT + * ======================================== */ + +/* Carduri principale cu glassmorphism */ +.cardBox { + background: var(--surface) !important; + border: 1px solid var(--border-primary) !important; + border-radius: var(--radius-xl) !important; + transition: var(--transition-normal) !important; + box-shadow: var(--shadow-md) !important; + position: relative; + overflow: hidden; + backdrop-filter: var(--blur-sm) !important; + -webkit-backdrop-filter: var(--blur-sm) !important; +} + +.cardBox:hover { + transform: translateY(-4px) scale(1.02) !important; + box-shadow: var(--shadow-xl), var(--glow-primary) !important; + border-color: var(--border-accent) !important; + background: var(--surface-hover) !important; +} + +/* Imagini din carduri cu colțuri rotunjite */ +.cardContent-button, +.itemDetailImage, +.cardImageContainer { + border-radius: var(--radius-lg) !important; + overflow: hidden !important; + transition: var(--transition-normal) !important; + position: relative; +} + +.cardContent-button:hover { + transform: scale(1.03) !important; + box-shadow: var(--shadow-lg) !important; +} + +/* Overlay pentru carduri cu gradient elegant */ +.cardContent-button::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 180deg, + transparent 0%, + transparent 60%, + rgba(15, 23, 42, 0.7) 100% + ); + opacity: 0; + transition: var(--transition-normal); +} + +.cardContent-button:hover::after { + opacity: 1; +} + +/* Text din carduri cu tipografie modernă */ +.cardText { + color: var(--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; +} + +.cardText-secondary { + color: var(--text-secondary) !important; + font-weight: 400 !important; + font-size: 0.85rem !important; + line-height: 1.3 !important; + margin: 0 0 4px 0 !important; +} + +/* ======================================== + * 🎛️ BUTOANE ȘI CONTROALE MODERNE + * ======================================== */ + +/* Butoane principale cu design modern */ +.button-submit, +.raised.emby-button, +.emby-button { + background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important; + color: var(--text-primary) !important; + border: 1px solid var(--border-accent) !important; + border-radius: var(--radius-lg) !important; + padding: 12px 24px !important; + font-weight: 600 !important; + font-size: 0.95rem !important; + transition: var(--transition-normal) !important; + box-shadow: var(--shadow-md) !important; + position: relative; + overflow: hidden; + backdrop-filter: var(--blur-sm) !important; +} + +.button-submit:hover, +.raised.emby-button:hover, +.emby-button:hover { + transform: translateY(-2px) !important; + box-shadow: var(--shadow-lg), var(--glow-primary) !important; + background: linear-gradient(135deg, var(--primary-hover), var(--secondary)) !important; +} + +.button-submit:active, +.raised.emby-button:active, +.emby-button:active { + transform: translateY(0) !important; + box-shadow: var(--shadow-sm) !important; +} + +/* Butoane secundare */ +.cancel.emby-button { + background: var(--surface) !important; + color: var(--text-secondary) !important; + border: 1px solid var(--border-secondary) !important; +} + +.cancel.emby-button:hover { + background: var(--surface-hover) !important; + color: var(--text-primary) !important; + border-color: var(--border-primary) !important; +} + +/* Tab buttons moderne */ +.emby-tab-button { + background: transparent !important; + color: var(--text-secondary) !important; + border: none !important; + border-radius: var(--radius-md) !important; + padding: 12px 20px !important; + margin: 0 4px !important; + font-weight: 500 !important; + font-size: 0.95rem !important; + transition: var(--transition-normal) !important; + position: relative; + overflow: hidden; +} + +.emby-tab-button:hover { + background: rgba(99, 102, 241, 0.1) !important; + color: var(--text-primary) !important; + transform: translateY(-1px) !important; +} + +.emby-tab-button.emby-tab-button-active { + background: var(--primary) !important; + color: var(--text-primary) !important; + box-shadow: var(--glow-primary) !important; +} + +/* Efect de undă pentru butoane */ +.button-submit::before, +.raised.emby-button::before, +.emby-button::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: width 0.6s, height 0.6s; +} + +.button-submit:active::before, +.raised.emby-button:active::before, +.emby-button:active::before { + width: 300px; + height: 300px; +} + +/* ======================================== + * 📝 INPUT-URI ȘI FORMULARE MODERNE + * ======================================== */ + +/* Input-uri cu glassmorphism */ +.emby-input, +.emby-textarea, +.emby-select { + background: var(--surface) !important; + backdrop-filter: var(--blur-sm) !important; + -webkit-backdrop-filter: var(--blur-sm) !important; + border: 1px solid var(--border-primary) !important; + border-radius: var(--radius-lg) !important; + color: var(--text-primary) !important; + padding: 12px 16px !important; + font-size: 0.95rem !important; + font-weight: 400 !important; + transition: var(--transition-normal) !important; + box-shadow: var(--shadow-sm) !important; +} + +.emby-input:focus, +.emby-textarea:focus, +.emby-select:focus { + border-color: var(--primary) !important; + box-shadow: var(--shadow-md), var(--glow-primary) !important; + background: var(--surface-hover) !important; + outline: none !important; +} + +.emby-input::placeholder, +.emby-textarea::placeholder { + color: var(--text-muted) !important; + opacity: 0.7 !important; +} + +/* Checkbox-uri ș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(--radius-sm) !important; + background: var(--surface) !important; + position: relative !important; + cursor: pointer !important; + transition: var(--transition-normal) !important; +} + +.emby-checkbox:checked, +.emby-radio:checked { + background: var(--primary) !important; + border-color: var(--primary) !important; + box-shadow: var(--glow-primary) !important; +} + +.emby-checkbox:checked::after { + content: '✓' !important; + position: absolute !important; + top: 50% !important; + left: 50% !important; + transform: translate(-50%, -50%) !important; + color: var(--text-primary) !important; + font-size: 12px !important; + font-weight: bold !important; +} + +.emby-radio { + border-radius: var(--radius-full) !important; +} + +.emby-radio:checked::after { + content: '' !important; + position: absolute !important; + top: 50% !important; + left: 50% !important; + transform: translate(-50%, -50%) !important; + width: 8px !important; + height: 8px !important; + background: var(--text-primary) !important; + border-radius: var(--radius-full) !important; +} + +/* ======================================== + * 📜 SCROLLBAR MODERN ȘI ELEGANT + * ======================================== */ + +/* Scrollbar cu design modern */ * { scrollbar-width: thin; - scrollbar-color: var(--primary-color) var(--background-medium); + scrollbar-color: var(--primary) var(--bg-secondary) !important; } *::-webkit-scrollbar { @@ -82,685 +516,359 @@ html { } *::-webkit-scrollbar-track { - background: var(--background-medium); - border-radius: var(--border-radius-small); + background: var(--bg-secondary); + border-radius: var(--radius-full); } *::-webkit-scrollbar-thumb { - background: var(--primary-color); - border-radius: var(--border-radius-small); - transition: background var(--transition-fast); + background: linear-gradient(180deg, var(--primary), var(--secondary)) !important; + border-radius: var(--radius-full); + transition: var(--transition-normal); + box-shadow: var(--shadow-sm); } *::-webkit-scrollbar-thumb:hover { - background: var(--accent-color); + background: linear-gradient(180deg, var(--primary-hover), var(--primary)) !important; + box-shadow: var(--glow-primary); + transform: scale(1.1); +} + +*::-webkit-scrollbar-corner { + background: var(--bg-secondary); } /* ======================================== - * HEADER ȘI NAVIGARE + * 🏷️ INDICATORI ȘI BADGE-URI MODERNE * ======================================== */ -/* 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); -} - -.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader { - background: rgba(15, 15, 15, 0.95) !important; - backdrop-filter: blur(10px); -} - -/* Butoane din header */ -.headerButton { - color: var(--text-primary) !important; - transition: all var(--transition-fast); - border-radius: var(--border-radius-small); - margin: 0 4px; -} - -.headerButton:hover { - background-color: var(--primary-color) !important; - color: white !important; - transform: translateY(-1px); - box-shadow: var(--shadow-light); -} - -/* Meniu lateral (drawer) */ -.mainDrawer { - background: var(--background-medium) !important; - border-right: 1px solid var(--border-color); - box-shadow: var(--shadow-heavy); -} - -.mainDrawer-scrollContainer { - color: var(--text-primary) !important; -} - -/* Opțiuni din meniul lateral */ -.navMenuOption { - color: var(--text-secondary) !important; - 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; - transform: translateX(4px); -} - -.navMenuOption-selected { - background: var(--primary-color) !important; - color: white !important; - box-shadow: var(--shadow-light); -} - -/* ======================================== - * TABURI ȘI BUTOANE - * ======================================== */ - -/* Taburi principale - design îmbunătățit */ -.headerTabs.sectionTabs { - text-size-adjust: 110%; - font-size: 110%; - border-bottom: 1px solid var(--border-color); -} - -.emby-tab-button { - 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; -} - -.emby-tab-button:hover { - color: var(--text-primary) !important; - background-color: var(--background-light); - transform: translateY(-2px); -} - -.emby-tab-button.emby-tab-button-active { - color: var(--primary-color) !important; - background-color: var(--background-medium); - border-bottom: 3px solid var(--primary-color); -} - -/* Butoane generale */ -.button-submit, -.raised.emby-button { - 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(-2px) !important; - box-shadow: var(--shadow-medium) !important; - background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%) !important; -} - -/* ======================================== - * CARDURI ȘI ELEMENTE MEDIA - * ======================================== */ - -/* Carduri pentru filme, seriale, etc. */ -.cardBox { - 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(--shadow-heavy) !important; - border-color: var(--primary-color) !important; -} - -/* Imagini din carduri - colțuri rotunjite */ -.cardContent-button, -.itemDetailImage, -.cardImageContainer { - border-radius: var(--border-radius) !important; - overflow: hidden !important; - transition: all var(--transition-medium) !important; -} - -.cardContent-button:hover { - transform: scale(1.05) !important; -} - -/* Text din carduri */ -.cardText { - color: var(--text-primary) !important; - font-weight: 500 !important; -} - -.cardText-secondary { - color: var(--text-secondary) !important; -} - -/* ======================================== - * INDICATORI ȘI BADGE-URI - * ======================================== */ - -/* Indicator pentru conținut vizionat */ +/* Played/Watched indicators */ .playedIndicator { - background: var(--success-color) !important; - border-radius: 50% !important; - box-shadow: var(--shadow-light) !important; + background: var(--success) !important; + border-radius: var(--radius-full) !important; + box-shadow: var(--shadow-sm), 0 0 10px rgba(16, 185, 129, 0.3) !important; } -/* Indicatori transparenți și eleganți */ .indicator { - 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: var(--primary-color) !important; - color: white !important; - border-radius: var(--border-radius-large) !important; + background: var(--primary) !important; + color: var(--text-primary) !important; + border-radius: var(--radius-md) !important; font-weight: 600 !important; - box-shadow: var(--shadow-light) !important; + box-shadow: var(--shadow-sm) !important; + padding: 4px 8px !important; + font-size: 0.8rem !important; } -/* Rating cu stele */ -.starRatingContainer { - filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); -} - -/* ======================================== - * FORMULARE ȘI INPUTURI - * ======================================== */ - -/* Câmpuri de input */ -.emby-input, -.emby-textarea, -.emby-select { - background-color: var(--background-light) !important; - border: 2px solid var(--border-color) !important; - border-radius: var(--border-radius) !important; +.countIndicator { + background: var(--secondary) !important; color: var(--text-primary) !important; - padding: 12px 16px !important; - transition: all var(--transition-fast) !important; + border-radius: var(--radius-full) !important; + font-weight: 600 !important; + box-shadow: var(--shadow-sm) !important; } -.emby-input:focus, -.emby-textarea:focus, -.emby-select-withcolor { - border-color: var(--primary-color) !important; - box-shadow: 0 0 0 3px rgba(0, 164, 220, 0.2) !important; - background-color: var(--background-medium) !important; -} - -/* Placeholder text */ -.emby-input::placeholder, -.emby-textarea::placeholder { - color: var(--text-secondary) !important; - opacity: 0.7; -} - -/* ======================================== - * LISTE ȘI TABELE - * ======================================== */ - -/* Liste generale */ -.paperList { - background: var(--background-medium) !important; - border-radius: var(--border-radius) !important; - border: 1px solid var(--border-color) !important; -} - -/* Elemente din listă */ -.listItem { - border-bottom: 1px solid var(--border-color) !important; - transition: all var(--transition-fast) !important; -} - -.listItem:hover { - background-color: var(--background-light) !important; - transform: translateX(4px); -} - -.listItem:last-child { - border-bottom: none !important; -} - -/* Text din liste */ -.listItemBodyText { +/* Media info badges */ +.mediaInfoBadge { + background: rgba(99, 102, 241, 0.9) !important; color: var(--text-primary) !important; + border: 1px solid var(--border-accent) !important; + border-radius: var(--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(--shadow-sm) !important; } -.secondary.listItemBodyText { - color: var(--text-secondary) !important; +/* Progress bars moderne */ +.itemProgressBar { + background: rgba(15, 23, 42, 0.8) !important; + border-radius: var(--radius-full) !important; + overflow: hidden !important; + height: 4px !important; +} + +.itemProgressBarForeground { + background: linear-gradient(90deg, var(--primary), var(--secondary)) !important; + border-radius: var(--radius-full) !important; + box-shadow: 0 0 8px rgba(99, 102, 241, 0.4) !important; } /* ======================================== - * PAGINA DE LOGIN + * 💬 DIALOGURI ȘI MODAL-URI MODERNE * ======================================== */ -/* Container pentru pagina de login */ -#loginPage { - background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%); - background-size: cover; - position: relative; +/* Backdrop pentru dialoguri */ +.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; } -/* Overlay pentru pagina de login */ -#loginPage::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(15, 15, 15, 0.8); - backdrop-filter: blur(5px); +/* Dialoguri cu glassmorphism */ +.dialog { + background: var(--surface) !important; + backdrop-filter: var(--blur-lg) !important; + -webkit-backdrop-filter: var(--blur-lg) !important; + border: 1px solid var(--border-primary) !important; + border-radius: var(--radius-2xl) !important; + box-shadow: var(--shadow-2xl) !important; + max-width: 90vw !important; + max-height: 90vh !important; + animation: dialog-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } -/* 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; -} - -/* Titlu login */ -#loginPage h1 { - color: var(--primary-color) !important; - text-align: center !important; - margin-bottom: 30px !important; - font-weight: 300 !important; - font-size: 2.5em !important; -} - -/* Spațiere pentru formular */ -#loginPage .padded-left.padded-right.padded-bottom-page { - margin-top: 50px; -} - -/* Ascunde butoanele manual și forgot password */ -#loginPage .raised.cancel.block.btnManual.emby-button, -#loginPage .raised.cancel.block.btnForgotPassword.emby-button { - display: none; +@keyframes dialog-appear { + 0% { + opacity: 0; + transform: scale(0.8) translateY(-20px); + } + 100% { + opacity: 1; + transform: scale(1) translateY(0); + } } /* ======================================== - * PLAYER VIDEO ȘI CONTROALE + * 🎮 CONTROALE VIDEO MODERNE * ======================================== */ +/* Controale video cu glassmorphism */ +.videoOsdBottom { + background: var(--surface) !important; + backdrop-filter: var(--blur-lg) !important; + -webkit-backdrop-filter: var(--blur-lg) !important; + border-top: 1px solid var(--border-primary) !important; + padding: 16px !important; + border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; +} + /* Bara de progres video */ .nowPlayingBar { - background: rgba(26, 26, 26, 0.95) !important; - backdrop-filter: blur(10px) !important; - border-top: 1px solid var(--border-color) !important; - box-shadow: 0 -4px 8px rgba(0,0,0,0.3) !important; -} - -/* Controale player */ -.nowPlayingBarCenter { - color: var(--text-primary) !important; -} - -.nowPlayingBarCenter .material-icons { - color: var(--text-primary) !important; - transition: all var(--transition-fast) !important; -} - -.nowPlayingBarCenter .material-icons:hover { - color: var(--primary-color) !important; - transform: scale(1.1) !important; -} - -/* Slider pentru volum */ -.nowPlayingBarVolumeSliderContainer .mdl-slider { - background: var(--primary-color) !important; + background: var(--surface) !important; + backdrop-filter: var(--blur-lg) !important; + border-top: 1px solid var(--border-primary) !important; + box-shadow: var(--shadow-lg) !important; } /* ======================================== - * EPISOADE ȘI PREVIEW-URI + * 📱 RESPONSIVE DESIGN MODERN * ======================================== */ -/* Preview-uri episoade mai compacte */ -.listItemImage.listItemImage-large.itemAction.lazy { - height: 110px !important; - border-radius: var(--border-radius) !important; - transition: all var(--transition-medium) !important; -} +/* Desktop și wide screens */ +@media (min-width: 1280px) { + .cardBox { + margin: 12px !important; + } -.listItemImage.listItemImage-large.itemAction.lazy:hover { - transform: scale(1.05) !important; - box-shadow: var(--shadow-medium) !important; -} - -.listItem-content { - height: 115px !important; - padding: 12px !important; -} - -.secondary.listItem-overview.listItemBodyText { - height: 61px !important; - margin: 0 !important; - color: var(--text-secondary) !important; - line-height: 1.4 !important; -} - -/* ======================================== - * CAST & CREW STILIZAT - * ======================================== */ - -/* Carduri pentru cast - design circular */ -#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, -#castContent .card.overflowPortraitCard.personCard.card-withuserdata { - width: 120px !important; - font-size: 90% !important; - transition: all var(--transition-medium) !important; -} - -#castContent .card.overflowPortraitCard.personCard:hover { - transform: translateY(-4px) scale(1.05) !important; - box-shadow: var(--shadow-heavy) !important; -} - -/* Imagini circulare pentru cast */ -#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: 50% !important; - border: 3px solid var(--border-color) !important; - transition: all var(--transition-medium) !important; -} - -#castContent .cardContent-button:hover { - border-color: var(--primary-color) !important; - box-shadow: 0 0 0 3px rgba(0, 164, 220, 0.3) !important; -} - -#castContent .cardScalable { - width: 100px !important; - height: 100px !important; - border-radius: 50% !important; -} - -#castContent .cardOverlayContainer.itemAction { - border-radius: 50% !important; -} - -/* Butoane overlay pentru cast */ -#castContent .cardOverlayButton-br { - bottom: 4% !important; - right: 15% !important; - width: 70% !important; -} - -#castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light { - margin: auto !important; - background: var(--primary-color) !important; - color: white !important; -} - -/* ======================================== - * ÎMBUNĂTĂȚIRI PENTRU MOBILE - * ======================================== */ - -/* Afișează linkurile externe pe mobile */ -.layout-mobile .itemExternalLinks { - display: block !important; -} - -/* Taburi mai mari pentru mobile */ -@media (max-width: 768px) { .emby-tab-button { - padding: 2em 1.5em !important; - font-size: 1.1em !important; + padding: 14px 24px !important; + font-size: 1rem !important; } +} - .headerTabs.sectionTabs { - font-size: 120% !important; - } - - /* Carduri mai mari pe mobile */ +/* Tablet design */ +@media (min-width: 768px) and (max-width: 1279px) { .cardBox { margin: 8px !important; } - /* Formular login responsive */ - #loginPage .readOnlyContent, - #loginPage form { - max-width: 90% !important; - margin: 20px auto !important; - padding: 30px 20px !important; + .emby-tab-button { + padding: 12px 20px !important; + font-size: 0.95rem !important; + } + + .headerButton { + padding: 6px 10px !important; + font-size: 0.9rem !important; + } +} + +/* Mobile design */ +@media (max-width: 767px) { + .cardBox { + margin: 6px !important; + border-radius: var(--radius-lg) !important; + } + + .emby-tab-button { + padding: 10px 16px !important; + font-size: 0.9rem !important; + margin: 0 2px !important; + } + + .headerButton { + padding: 6px 8px !important; + font-size: 0.85rem !important; + margin: 0 2px !important; + } + + .button-submit, + .raised.emby-button, + .emby-button { + padding: 10px 20px !important; + font-size: 0.9rem !important; + } + + .emby-input, + .emby-textarea, + .emby-select { + padding: 10px 12px !important; + font-size: 0.9rem !important; + } + + .dialog { + margin: 10px !important; + border-radius: var(--radius-xl) !important; } } /* ======================================== - * CAROUSEL ȘI SCROLLING + * ✨ ÎMBUNĂTĂȚIRI SPECIALE ȘI EFECTE * ======================================== */ -/* Dezactivează carousel pentru biblioteci - layout fix */ -@media all and (min-width: 50em) { - .homePage .emby-scroller { - margin-right: 0 !important; - } - - .homePage .emby-scrollbuttons { - display: none !important; - } - - .homePage .itemsContainer { - flex-wrap: wrap !important; - justify-content: flex-start !important; - gap: 16px !important; - } +/* Hover effects pentru liste */ +.listItem:hover { + background: var(--surface) !important; + border-radius: var(--radius-md) !important; + transform: translateX(4px) !important; + transition: var(--transition-normal) !important; } -/* Butoane scroll îmbunătățite */ -.emby-scrollbuttons { - position: absolute !important; - left: 0 !important; - top: 0 !important; - width: 100% !important; - height: 100% !important; - padding: 0 !important; - justify-content: space-between !important; - pointer-events: none !important; +/* Cast & Crew cards moderne */ +.personCard { + background: var(--surface) !important; + border: 1px solid var(--border-primary) !important; + border-radius: var(--radius-lg) !important; + transition: var(--transition-normal) !important; + padding: 12px !important; } -.emby-scrollbuttons-button { - pointer-events: initial !important; - background: var(--primary-color) !important; - color: white !important; - border-radius: 50% !important; - width: 48px !important; - height: 48px !important; - box-shadow: var(--shadow-medium) !important; - transition: all var(--transition-fast) !important; +.personCard:hover { + transform: translateY(-2px) scale(1.02) !important; + box-shadow: var(--shadow-lg) !important; + border-color: var(--border-accent) !important; } -.emby-scrollbuttons-button:hover { - background: var(--accent-color) !important; - transform: scale(1.1) !important; - box-shadow: var(--shadow-heavy) !important; +/* Meniu lateral modern */ +.mainDrawer { + background: var(--surface) !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-xl) !important; } -/* ======================================== - * PERSONALIZĂRI PENTRU SECȚIUNI SPECIFICE - * ======================================== */ - -/* Ascunde elemente nedorite */ -.headerHomeButton { - display: none !important; +.navMenuOption { + border-radius: var(--radius-md) !important; + margin: 4px 8px !important; + transition: var(--transition-normal) !important; } -.headerCastButton { - display: none !important; +.navMenuOption:hover { + background: rgba(99, 102, 241, 0.1) !important; + transform: translateX(4px) !important; } -.headerSyncButton { - display: none !important; +.navMenuOption-selected { + background: var(--primary) !important; + color: var(--text-primary) !important; + box-shadow: var(--glow-primary) !important; } -/* Personalizează titlurile secțiunilor */ -.sectionTitleContainer h2 { - color: var(--primary-color) !important; - font-weight: 600 !important; - font-size: 1.8em !important; - margin-bottom: 16px !important; +/* Loading animations moderne */ +.mdl-spinner { + border-color: var(--primary) !important; } -/* Next Up section */ -div.nextUpSection { - background: var(--background-medium) !important; - border-radius: var(--border-radius-large) !important; - padding: 20px !important; - margin: 16px 0 !important; - border: 1px solid var(--border-color) !important; +.loading-spinner { + border: 3px solid var(--border-primary) !important; + border-top: 3px solid var(--primary) !important; + border-radius: var(--radius-full) !important; + animation: spin 1s linear infinite !important; } -/* Similar items section */ -#similarCollapsible { - background: var(--background-medium) !important; - border-radius: var(--border-radius-large) !important; - padding: 20px !important; - margin: 16px 0 !important; - border: 1px solid var(--border-color) !important; +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } -/* ======================================== - * ANIMAȚII ȘI EFECTE SPECIALE - * ======================================== */ - -/* Animație fade-in pentru carduri */ -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } +/* Îmbunătățiri pentru accesibilitate */ +.emby-button:focus, +.headerButton:focus, +.emby-input:focus, +.emby-tab-button:focus { + outline: 2px solid var(--primary) !important; + outline-offset: 2px !important; } -.cardBox { - animation: fadeInUp 0.5s ease-out !important; +/* Smooth scroll pentru toată aplicația */ +html { + scroll-behavior: smooth !important; } -/* Animație pentru butoane */ -@keyframes pulse { - 0% { - box-shadow: 0 0 0 0 rgba(0, 164, 220, 0.7); - } - 70% { - box-shadow: 0 0 0 10px rgba(0, 164, 220, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(0, 164, 220, 0); - } -} - -.button-submit:focus, -.raised.emby-button:focus { - animation: pulse 1.5s infinite !important; -} - -/* ======================================== - * TEMA ÎNTUNECATĂ ÎMBUNĂTĂȚITĂ - * ======================================== */ - -/* Overlay pentru dialoguri */ -.dialogBackdrop { - background: rgba(0, 0, 0, 0.8) !important; - backdrop-filter: blur(5px) !important; -} - -/* Dialoguri */ -.dialog { - background: var(--background-medium) !important; - border: 1px solid var(--border-color) !important; - border-radius: var(--border-radius-large) !important; - box-shadow: var(--shadow-heavy) !important; -} - -/* Titluri în dialoguri */ -.dialog h2, -.dialog h3 { - color: var(--primary-color) !important; -} - -/* ======================================== - * FINALIZARE ȘI OPTIMIZĂRI - * ======================================== */ - /* Optimizări pentru performanță */ -* { - will-change: auto !important; -} - .cardBox, -.emby-tab-button, +.emby-button, .headerButton, -.navMenuOption { +.emby-tab-button { will-change: transform, box-shadow !important; } -/* Asigură compatibilitatea cu toate temele */ -.skinHeader, -.mainDrawer, -.emby-input, -.emby-textarea, -.emby-select, -.navMenuOption-selected, -.cardBox, -.paperList { - transition: all var(--transition-medium) !important; -} +/* ======================================== + * 📋 INFORMAȚII FINALE ȘI CREDITE + * ======================================== */ -/* Mesaj final în CSS */ /* - * ======================================== - * SFÂRȘITUL TEMEI PERSONALIZATE JELLYFIN - * ======================================== + * 🎨 JELLYFIN MODERN PROFESSIONAL THEME v6.0 * - * 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ță + * ✨ CARACTERISTICI PRINCIPALE: + * - Design modern și profesional cu glassmorphism + * - Temă întunecată cu culori neutre elegante + * - Animații subtile și tranziții fluide + * - Responsive design perfect pentru toate dispozitivele + * - Optimizat pentru performanță și accesibilitate + * - Efecte hover și focus moderne + * - Tipografie îmbunătățită cu font Inter + * - Scrollbar personalizat elegant + * - Indicatori și badge-uri moderne + * - Controale video cu glassmorphism * - * Pentru suport sau personalizări suplimentare, - * modifică variabilele CSS din secțiunea :root + * 🎯 TEHNOLOGII UTILIZATE: + * - CSS Custom Properties (CSS Variables) + * - CSS Grid și Flexbox pentru layout + * - CSS Animations și Keyframes + * - Backdrop-filter pentru glassmorphism + * - CSS Gradients pentru efecte moderne + * - Box-shadow pentru depth și elevation + * - Transform pentru animații fluide + * - Media queries pentru responsive design + * - Cubic-bezier pentru tranziții naturale + * - Will-change pentru optimizări performanță * - * Bucură-te de experiența îmbunătățită Jellyfin! - */ \ No newline at end of file + * 🌟 DIFERENȚE FAȚĂ DE TEMA STANDARD: + * ✅ Paleta de culori complet nouă (slate + indigo/violet) + * ✅ Glassmorphism în loc de fundal solid + * ✅ Animații și tranziții fluide + * ✅ Tipografie modernă cu Inter font + * ✅ Scrollbar personalizat elegant + * ✅ Butoane cu efecte hover avansate + * ✅ Carduri cu shadow și hover effects + * ✅ Input-uri cu focus states moderne + * ✅ Responsive design optimizat + * ✅ Indicatori și progress bars stilizate + * ✅ Dialoguri cu animații de apariție + * ✅ Controale video moderne + * + * 📋 INSTALARE: + * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css'); + * + * 👨‍💻 Autor: EDD + * 🚀 Versiune: 6.0 MODERN PROFESSIONAL + * 📅 Data: 2025 + * 🌐 Repository: https://git.eddmanoo.cloud/eddmanoo/jellyfincss + * + * 🎬 Bucură-te de cea mai frumoasă experiență Jellyfin! ✨🎨💫 + */ +