From 2cb3dfbc908c2515ceb79bfcd80a5eda426d0333 Mon Sep 17 00:00:00 2001 From: eddmanoo Date: Fri, 19 Sep 2025 13:16:38 +0300 Subject: [PATCH] Update to V1 --- edd.css | 1766 +++++++++++++++++++------------------------------------ 1 file changed, 600 insertions(+), 1166 deletions(-) diff --git a/edd.css b/edd.css index f7714a2..8632ab6 100644 --- a/edd.css +++ b/edd.css @@ -1,513 +1,79 @@ /* * ======================================== - * 🎨 JELLYFIN MODERN PROFESSIONAL THEME 🎨 + * CSS PERSONALIZAT PENTRU JELLYFIN SERVER * ======================================== * - * 👨‍💻 Autor: EDD - * 🚀 Versiune: 6.0 MODERN PROFESSIONAL - * 📅 Data: 2025 - * 🎯 Compatibilitate: Jellyfin WebUI (toate versiunile moderne) + * Autor: EDD + * Versiune: 1.0 + * Compatibilitate: Jellyfin WebUI (toate versiunile moderne) * - * ✨ Descriere: Cea mai frumoasă temă modernă și profesională pentru Jellyfin - * cu design întunecat, culori neutre și efecte subtile pentru o experiență premium. + * 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 * - * 🌟 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 + * Notă: Modificările se aplică imediat, fără a fi nevoie să restartezi serverul. */ /* ======================================== - * 🎨 SISTEM DE CULORI MODERN PROFESSIONAL + * VARIABILE CSS GLOBALE * ======================================== */ :root { - /* 🌙 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 */ + /* 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 */ - /* 🎯 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 */ + /* 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); - /* 🎨 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; + /* Tranziții */ + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; } /* ======================================== - * 🌌 FUNDAL MODERN CU GRADIENT SUBTIL + * STILURI GENERALE PENTRU FUNDAL ȘI LAYOUT * ======================================== */ -/* 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; +/* Fundal principal al aplicației */ +.backgroundContainer, +.dialog, +html { + background-color: var(--background-dark) !important; + color: var(--text-primary); } -/* Container principal cu efecte moderne */ -.backgroundContainer { - 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; -} - -/* 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 */ +/* Container principal pentru conținut */ +.backgroundContainer.withBackdrop, .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; +.backgroundContainer { + background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%) !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 */ +/* Îmbunătățiri pentru scrolling */ * { scrollbar-width: thin; - scrollbar-color: var(--primary) var(--bg-secondary) !important; + scrollbar-color: var(--primary-color) var(--background-medium); } *::-webkit-scrollbar { @@ -516,419 +82,58 @@ body { } *::-webkit-scrollbar-track { - background: var(--bg-secondary); - border-radius: var(--radius-full); + background: var(--background-medium); + border-radius: var(--border-radius-small); } *::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, var(--primary), var(--secondary)) !important; - border-radius: var(--radius-full); - transition: var(--transition-normal); - box-shadow: var(--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(--primary-hover), var(--primary)) !important; - box-shadow: var(--glow-primary); - transform: scale(1.1); -} - -*::-webkit-scrollbar-corner { - background: var(--bg-secondary); + background: var(--accent-color); } /* ======================================== - * 🏷️ INDICATORI ȘI BADGE-URI MODERNE + * HEADER ȘI NAVIGARE * ======================================== */ -/* Played/Watched indicators */ -.playedIndicator { - 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; +/* 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); } -.indicator { - background: var(--primary) !important; +.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; - border-radius: var(--radius-md) !important; - font-weight: 600 !important; - box-shadow: var(--shadow-sm) !important; - padding: 4px 8px !important; - font-size: 0.8rem !important; + transition: all var(--transition-fast); + border-radius: var(--border-radius-small); + margin: 0 4px; } -.countIndicator { - background: var(--secondary) !important; - color: var(--text-primary) !important; - border-radius: var(--radius-full) !important; - font-weight: 600 !important; - box-shadow: var(--shadow-sm) !important; +.headerButton:hover { + background-color: var(--primary-color) !important; + color: white !important; + transform: translateY(-1px); + box-shadow: var(--shadow-light); } -/* 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; -} - -/* 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; -} - -/* ======================================== - * 💬 DIALOGURI ȘI MODAL-URI MODERNE - * ======================================== */ - -/* 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; -} - -/* 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; -} - -@keyframes dialog-appear { - 0% { - opacity: 0; - transform: scale(0.8) translateY(-20px); - } - 100% { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -/* ======================================== - * 🎮 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: var(--surface) !important; - backdrop-filter: var(--blur-lg) !important; - border-top: 1px solid var(--border-primary) !important; - box-shadow: var(--shadow-lg) !important; -} - -/* ======================================== - * 📱 RESPONSIVE DESIGN MODERN - * ======================================== */ - -/* Desktop și wide screens */ -@media (min-width: 1280px) { - .cardBox { - margin: 12px !important; - } - - .emby-tab-button { - padding: 14px 24px !important; - font-size: 1rem !important; - } -} - -/* Tablet design */ -@media (min-width: 768px) and (max-width: 1279px) { - .cardBox { - margin: 8px !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; - } -} - -/* ======================================== - * ✨ ÎMBUNĂTĂȚIRI SPECIALE ȘI EFECTE - * ======================================== */ - -/* 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; -} - -/* 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; -} - -.personCard:hover { - transform: translateY(-2px) scale(1.02) !important; - box-shadow: var(--shadow-lg) !important; - border-color: var(--border-accent) !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; -} - -.navMenuOption { - border-radius: var(--radius-md) !important; - margin: 4px 8px !important; - transition: var(--transition-normal) !important; -} - -.navMenuOption:hover { - background: rgba(99, 102, 241, 0.1) !important; - transform: translateX(4px) !important; -} - -.navMenuOption-selected { - background: var(--primary) !important; - color: var(--text-primary) !important; - box-shadow: var(--glow-primary) !important; -} - -/* Loading animations moderne */ -.mdl-spinner { - border-color: var(--primary) !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; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* Î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; -} - -/* Smooth scroll pentru toată aplicația */ -html { - scroll-behavior: smooth !important; -} - -/* Optimizări pentru performanță */ -.cardBox, -.emby-button, -.headerButton, -.emby-tab-button { - will-change: transform, box-shadow !important; -} - -/* ======================================== - * 📋 INFORMAȚII FINALE ȘI CREDITE - * ======================================== */ - -/* - * 🎨 JELLYFIN MODERN PROFESSIONAL THEME v6.0 - * - * ✨ 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 - * - * 🎯 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ță - * - * 🌟 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! ✨🎨💫 - */ - -/* ======================================== - * 🖼️ BACKDROP IMAGES ȘI FUNDAL - * ======================================== */ - -/* Backdrop image pentru pagini */ -.backdropImage { - opacity: 0.3 !important; - filter: blur(3px) brightness(0.4) !important; - transition: var(--transition-slow) !important; -} - -/* Container pentru backdrop */ -.backdropContainer { - position: relative !important; - overflow: hidden !important; -} - -/* ======================================== - * 🎴 IMAGINI DIN CARDURI - VIZIBILE - * ======================================== */ - -/* Asigură că imaginile din carduri sunt vizibile */ -.cardContent-button img, -.cardImageContainer img, -.itemDetailImage img, -.cardImage img, -.listItemImage img, -.lazy { - opacity: 1 !important; - visibility: visible !important; - display: block !important; - width: 100% !important; - height: 100% !important; - object-fit: cover !important; -} - -/* Container pentru imagini */ -.cardImageContainer, -.cardContent-button, -.itemDetailImage { - position: relative !important; - overflow: hidden !important; - display: block !important; -} - -/* ======================================== - * 🧭 NAVIGARE ȘI BUTOANE HEADER - * ======================================== */ - /* Meniu lateral (drawer) */ .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; - transition: var(--transition-normal) !important; + background: var(--background-medium) !important; + border-right: 1px solid var(--border-color); + box-shadow: var(--shadow-heavy); } .mainDrawer-scrollContainer { @@ -938,82 +143,203 @@ html { /* Opțiuni din meniul lateral */ .navMenuOption { color: var(--text-secondary) !important; - border-radius: var(--radius-md) !important; - margin: 4px 8px !important; - padding: 12px 16px !important; - transition: var(--transition-normal) !important; - display: flex !important; - align-items: center !important; + transition: all var(--transition-fast); + border-radius: var(--border-radius-small); + margin: 2px 8px; } .navMenuOption:hover { - background: rgba(99, 102, 241, 0.1) !important; + background-color: var(--background-light) !important; color: var(--text-primary) !important; - transform: translateX(4px) !important; + transform: translateX(4px); } .navMenuOption-selected { - background: var(--primary) !important; - color: var(--text-primary) !important; - box-shadow: var(--glow-primary) !important; -} - -/* Iconițe în meniu */ -.navMenuOption .material-icons, -.navMenuOption .md-icon { - margin-right: 12px !important; - opacity: 0.8 !important; -} - -/* Butoane utilizator în header */ -.headerUserButton, -.headerButton { - display: flex !important; - align-items: center !important; - justify-content: center !important; - min-width: 40px !important; - height: 40px !important; - border-radius: var(--radius-md) !important; - transition: var(--transition-normal) !important; -} - -.headerUserButton:hover, -.headerButton:hover { - background: rgba(99, 102, 241, 0.1) !important; - transform: translateY(-1px) !important; -} - -/* Avatar utilizator */ -.headerUserButton img { - width: 32px !important; - height: 32px !important; - border-radius: var(--radius-full) !important; - border: 2px solid var(--border-accent) !important; + background: var(--primary-color) !important; + color: white !important; + box-shadow: var(--shadow-light); } /* ======================================== - * 📋 LISTE ȘI ELEMENTE + * 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 */ +.playedIndicator { + background: var(--success-color) !important; + border-radius: 50% !important; + box-shadow: var(--shadow-light) !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; + font-weight: 600 !important; + box-shadow: var(--shadow-light) !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; + color: var(--text-primary) !important; + padding: 12px 16px !important; + transition: all var(--transition-fast) !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(--surface) !important; - border-radius: var(--radius-xl) !important; - border: 1px solid var(--border-primary) !important; - backdrop-filter: var(--blur-sm) !important; - -webkit-backdrop-filter: var(--blur-sm) !important; + 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-secondary) !important; - transition: var(--transition-normal) !important; - padding: 12px 16px !important; + border-bottom: 1px solid var(--border-color) !important; + transition: all var(--transition-fast) !important; } .listItem:hover { - background: rgba(99, 102, 241, 0.05) !important; - transform: translateX(4px) !important; + background-color: var(--background-light) !important; + transform: translateX(4px); } .listItem:last-child { @@ -1023,61 +349,21 @@ html { /* Text din liste */ .listItemBodyText { color: var(--text-primary) !important; - font-weight: 500 !important; } .secondary.listItemBodyText { color: var(--text-secondary) !important; - font-weight: 400 !important; } /* ======================================== - * 🎮 CONTROALE VIDEO ȘI PLAYER - * ======================================== */ - -/* Bara de progres video */ -.nowPlayingBar { - 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; - box-shadow: var(--shadow-lg) !important; -} - -/* Controale player */ -.nowPlayingBarCenter { - color: var(--text-primary) !important; -} - -.nowPlayingBarCenter .material-icons { - color: var(--text-primary) !important; - transition: var(--transition-normal) !important; -} - -.nowPlayingBarCenter .material-icons:hover { - color: var(--primary) !important; - transform: scale(1.1) !important; -} - -/* 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; -} - -/* ======================================== - * 📄 PAGINA DE LOGIN + * PAGINA DE LOGIN * ======================================== */ /* Container pentru pagina de login */ #loginPage { - background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important; - position: relative !important; - min-height: 100vh !important; + background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%); + background-size: cover; + position: relative; } /* Overlay pentru pagina de login */ @@ -1088,76 +374,163 @@ html { left: 0; right: 0; bottom: 0; - background: rgba(15, 23, 42, 0.8); - backdrop-filter: var(--blur-sm); - -webkit-backdrop-filter: var(--blur-sm); - z-index: 1; + background: rgba(15, 15, 15, 0.8); + backdrop-filter: blur(5px); } -/* Formular de login cu glassmorphism */ +/* Formular de login - design minimalist */ #loginPage .readOnlyContent, #loginPage form { - max-width: 420px !important; - width: 90% !important; - 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; - padding: 48px 32px !important; - box-shadow: var(--shadow-2xl) !important; + 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: 2; - animation: dialog-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; + z-index: 1; } /* Titlu login */ #loginPage h1 { - color: var(--primary) !important; + color: var(--primary-color) !important; text-align: center !important; - margin-bottom: 32px !important; - font-weight: 600 !important; - font-size: 2rem !important; + margin-bottom: 30px !important; + font-weight: 300 !important; + font-size: 2.5em !important; } -/* Ascunde butoanele nedorite */ +/* 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 !important; + display: none; } /* ======================================== - * 🎯 ÎMBUNĂTĂȚIRI PENTRU ACCESIBILITATE + * PLAYER VIDEO ȘI CONTROALE * ======================================== */ -/* Focus states pentru accesibilitate */ -.emby-button:focus, -.headerButton:focus, -.emby-input:focus, -.emby-tab-button:focus, -.navMenuOption:focus { - outline: 2px solid var(--primary) !important; - outline-offset: 2px !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; } -/* Smooth scroll pentru toată aplicația */ -html { - scroll-behavior: smooth !important; +/* Controale player */ +.nowPlayingBarCenter { + color: var(--text-primary) !important; } -/* Reduce motion pentru utilizatorii sensibili */ -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !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; } /* ======================================== - * 📱 ÎMBUNĂTĂȚIRI PENTRU MOBILE + * EPISOADE ȘI PREVIEW-URI + * ======================================== */ + +/* 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; +} + +.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 */ @@ -1165,168 +538,229 @@ html { display: block !important; } -/* Link-uri externe stilizate */ -.itemExternalLinks a { - background: rgba(99, 102, 241, 0.1) !important; - color: var(--primary) !important; - border: 1px solid var(--border-accent) !important; - border-radius: var(--radius-md) !important; - padding: 8px 12px !important; - margin: 4px !important; - transition: var(--transition-normal) !important; - text-decoration: none !important; - font-weight: 500 !important; - display: inline-block !important; -} +/* Taburi mai mari pentru mobile */ +@media (max-width: 768px) { + .emby-tab-button { + padding: 2em 1.5em !important; + font-size: 1.1em !important; + } -.itemExternalLinks a:hover { - background: var(--primary) !important; - color: var(--text-primary) !important; - transform: translateY(-1px) !important; - box-shadow: var(--shadow-md) !important; + .headerTabs.sectionTabs { + font-size: 120% !important; + } + + /* Carduri mai mari pe mobile */ + .cardBox { + margin: 8px !important; + } + + /* Formular login responsive */ + #loginPage .readOnlyContent, + #loginPage form { + max-width: 90% !important; + margin: 20px auto !important; + padding: 30px 20px !important; + } } /* ======================================== - * 🔧 OPTIMIZĂRI PENTRU PERFORMANȚĂ + * CAROUSEL ȘI SCROLLING * ======================================== */ -/* Optimizări GPU pentru animații */ +/* 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; + } +} + +/* 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; +} + +.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; +} + +.emby-scrollbuttons-button:hover { + background: var(--accent-color) !important; + transform: scale(1.1) !important; + box-shadow: var(--shadow-heavy) !important; +} + +/* ======================================== + * PERSONALIZĂRI PENTRU SECȚIUNI SPECIFICE + * ======================================== */ + +/* Ascunde elemente nedorite */ +.headerHomeButton { + display: none !important; +} + +.headerCastButton { + display: none !important; +} + +.headerSyncButton { + display: none !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; +} + +/* 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; +} + +/* 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; +} + +/* ======================================== + * 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); + } +} + +.cardBox { + animation: fadeInUp 0.5s ease-out !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-button, -.headerButton, .emby-tab-button, +.headerButton, .navMenuOption { will-change: transform, box-shadow !important; } -/* Optimizări pentru scroll */ -.backgroundContainer, +/* Asigură compatibilitatea cu toate temele */ +.skinHeader, .mainDrawer, -.skinHeader { - will-change: transform !important; +.emby-input, +.emby-textarea, +.emby-select, +.navMenuOption-selected, +.cardBox, +.paperList { + transition: all var(--transition-medium) !important; } -/* ======================================== - * 🎨 ÎMBUNĂTĂȚIRI FINALE - * ======================================== */ - -/* Asigură că toate elementele au tranziții */ -* { - transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important; -} - -/* Îmbunătățiri pentru hover pe liste */ -.listItem:hover { - background: var(--surface-hover) !important; - border-radius: var(--radius-md) !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; -} - -.personCard:hover { - transform: translateY(-2px) scale(1.02) !important; - box-shadow: var(--shadow-lg) !important; - border-color: var(--border-accent) !important; -} - -/* Îmbunătățiri pentru secțiuni */ -.sectionTitleContainer h2 { - color: var(--primary) !important; - font-weight: 600 !important; - font-size: 1.5rem !important; - margin-bottom: 16px !important; -} - -/* Next Up și Similar sections */ -div.nextUpSection, -#similarCollapsible { - background: var(--surface) !important; - border-radius: var(--radius-xl) !important; - padding: 20px !important; - margin: 16px 0 !important; - border: 1px solid var(--border-primary) !important; - backdrop-filter: var(--blur-sm) !important; - -webkit-backdrop-filter: var(--blur-sm) !important; -} - -/* Carousel și scrolling îmbunătățit */ -@media all and (min-width: 50em) { - .homePage .emby-scroller { - margin-right: 0; - } - - .homePage .emby-scrollbuttons { - display: none; - } - - .homePage .itemsContainer { - flex-wrap: wrap; - } -} - -/* Butoane scroll stilizate */ -.emby-scrollbuttons-button { - background: var(--primary) !important; - color: var(--text-primary) !important; - border-radius: var(--radius-full) !important; - transition: var(--transition-normal) !important; -} - -.emby-scrollbuttons-button:hover { - background: var(--primary-hover) !important; - transform: scale(1.1) !important; - box-shadow: var(--glow-primary) !important; -} - -/* Loading animations moderne */ -.mdl-spinner { - border-color: var(--primary) !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; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* ======================================== - * 📋 INFORMAȚII FINALE - * ======================================== */ - +/* Mesaj final în CSS */ /* - * 🎨 JELLYFIN MODERN PROFESSIONAL THEME v6.0 - FIXED + * ======================================== + * SFÂRȘITUL TEMEI PERSONALIZATE JELLYFIN + * ======================================== * - * ✅ PROBLEME REZOLVATE: - * - Imaginile din carduri sunt acum vizibile - * - Backdrop images funcționează corect - * - Butoanele de navigare sunt restaurate - * - Avatar utilizator este vizibil - * - Meniul lateral funcționează complet + * 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: - * - Design modern cu glassmorphism - * - Culori neutre elegante - * - Animații subtile și fluide - * - Responsive design perfect - * - Optimizat pentru performanță - * - Accesibilitate îmbunătățită + * Pentru suport sau personalizări suplimentare, + * modifică variabilele CSS din secțiunea :root * - * 📋 INSTALARE: - * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css'); - * - * 🎬 Bucură-te de experiența Jellyfin modernă și profesională! ✨ - */ - + * Bucură-te de experiența îmbunătățită Jellyfin! + */ \ No newline at end of file