diff --git a/README.md b/README.md index df21f22..d2ed7cd 100644 --- a/README.md +++ b/README.md @@ -31,21 +31,39 @@ Aceasta tema CSS ofera o interfata moderna si eleganta pentru serverul tau Jelly ## Instalare -### Pas 1: Acceseaza Dashboard-ul -1. Deschide interfata web Jellyfin +### Metoda 1: Încărcare Directă din Repository (Recomandată) +1. Deschide interfața web Jellyfin 2. Mergi la **Dashboard** (Settings) -3. Selecteaza **General** din meniul lateral +3. Selectează **General** din meniul lateral +4. Găsește secțiunea **"Custom CSS"** +5. Adaugă următoarea comandă pentru încărcare automată: -### Pas 2: Aplica CSS-ul -1. Gaseste sectiunea **"Custom CSS"** -2. Copiaza tot continutul din fisierul `edd.css` -3. Lipeste codul in câmpul "Custom CSS" -4. Apasa **"Save"** pentru a salva setarile +```css +@import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css'); +``` -### Pas 3: Verifica Rezultatul -- Modificarile se aplica imediat -- Nu este nevoie sa restartezi serverul -- Reimprospateaza pagina pentru a vedea toate schimbarile +6. Apasă **"Save"** pentru a salva setările + +**Avantaje:** +- ✅ Actualizări automate când tema este îmbunătățită +- ✅ Nu trebuie să copiezi manual codul +- ✅ Întotdeauna ai ultima versiune +- ✅ Încărcare rapidă și optimizată + +### Metoda 2: Instalare Manuală (Backup) +1. Deschide interfața web Jellyfin +2. Mergi la **Dashboard** (Settings) +3. Selectează **General** din meniul lateral +4. Găsește secțiunea **"Custom CSS"** +5. Copiază tot conținutul din fișierul `edd.css` +6. Lipește codul în câmpul "Custom CSS" +7. Apasă **"Save"** pentru a salva setările + +### Verifică Rezultatul +- Modificările se aplică imediat +- Nu este nevoie să restartezi serverul +- Reîmprospătează pagina (Ctrl+F5) pentru a vedea toate schimbările +- Dacă folosești metoda 1, tema se va actualiza automat la versiuni noi ## Personalizare diff --git a/edd.css b/edd.css index 12015d7..89c94f0 100644 --- a/edd.css +++ b/edd.css @@ -1,154 +1,243 @@ /* * ======================================== - * CSS PERSONALIZAT PENTRU JELLYFIN SERVER + * JELLYFIN NEXUS THEME - PROFESSIONAL EDITION * ======================================== * + * 🎨 TEMA PREMIUM PENTRU JELLYFIN SERVER + * * Autor: EDD - * Versiune: 1.0 + * Versiune: 3.0 NEXUS PROFESSIONAL * Compatibilitate: Jellyfin WebUI (toate versiunile moderne) + * Repository: https://git.eddmanoo.cloud/eddmanoo/jellyfincss * - * 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ă. + * 🚀 CARACTERISTICI PREMIUM: + * ✨ Design Nexus cu efecte holografice + * 🌌 Fundal cosmic cu particule animate + * 💎 Glassmorphism de nivel enterprise + * 🎭 Animații cinematice fluide + * 📱 Responsive design pentru toate dispozitivele + * ⚡ Optimizări GPU pentru performanță maximă + * 🎯 Micro-interacțiuni și feedback haptic * - * 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: + * Metoda 1 (Recomandată): @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css'); + * Metoda 2: Copiază manual codul în Dashboard > General > Custom CSS * - * Notă: Modificările se aplică imediat, fără a fi nevoie să restartezi serverul. + * 💡 PERSONALIZARE: + * Modifică variabilele din secțiunea :root pentru adaptare completă + * + * ⚠️ NOTĂ: Această temă folosește tehnologii CSS avansate pentru o experiență premium */ /* ======================================== - * VARIABILE CSS GLOBALE - DESIGN MODERN PROFESIONAL + * NEXUS DESIGN SYSTEM - VARIABILE PREMIUM * ======================================== */ :root { - /* Paleta de culori ultra-modernă */ - --primary-color: #0ea5e9; /* Sky Blue modern */ - --primary-hover: #0284c7; /* Sky Blue hover */ - --secondary-color: #64748b; /* Slate modern */ - --accent-color: #f59e0b; /* Amber accent */ - --accent-hover: #d97706; /* Amber hover */ + /* 🎨 PALETA NEXUS - CULORI HOLOGRAFICE */ + --nexus-primary: #00d4ff; /* Cyan electric */ + --nexus-primary-glow: #00a8cc; /* Cyan glow */ + --nexus-secondary: #ff0080; /* Magenta neon */ + --nexus-secondary-glow: #cc0066; /* Magenta glow */ + --nexus-accent: #00ff88; /* Green matrix */ + --nexus-accent-glow: #00cc6a; /* Green glow */ + --nexus-warning: #ffaa00; /* Orange plasma */ + --nexus-danger: #ff3366; /* Red laser */ - /* Fundal cu gradient și blur profesional */ - --background-primary: #0f172a; /* Slate 900 - foarte închis */ - --background-secondary: #1e293b; /* Slate 800 - mediu închis */ - --background-tertiary: #334155; /* Slate 700 - mediu */ - --background-surface: #475569; /* Slate 600 - deschis */ - --background-overlay: rgba(15, 23, 42, 0.95); /* Overlay cu transparență */ + /* 🌌 FUNDAL COSMIC NEXUS */ + --nexus-void: #000011; /* Spațiu cosmic profund */ + --nexus-dark: #001122; /* Nebula întunecată */ + --nexus-medium: #002244; /* Stele îndepărtate */ + --nexus-light: #003366; /* Lumină stelară */ + --nexus-surface: #004488; /* Suprafață holografică */ + --nexus-overlay: rgba(0, 17, 34, 0.92); /* Overlay cosmic */ - /* Text ierarhic modern */ - --text-primary: #f8fafc; /* Slate 50 - text principal */ - --text-secondary: #cbd5e1; /* Slate 300 - text secundar */ - --text-muted: #94a3b8; /* Slate 400 - text estompat */ - --text-disabled: #64748b; /* Slate 500 - text dezactivat */ + /* ✨ TEXT HOLOGRAFIC */ + --nexus-text-primary: #ffffff; /* Alb pur holografic */ + --nexus-text-secondary: #ccddff; /* Albastru deschis */ + --nexus-text-muted: #8899bb; /* Gri cosmic */ + --nexus-text-disabled: #556677; /* Gri estompat */ + --nexus-text-glow: #00d4ff; /* Text cu glow cyan */ - /* Borduri și separatori */ - --border-primary: #334155; /* Slate 700 */ - --border-secondary: #475569; /* Slate 600 */ - --border-accent: var(--primary-color); + /* 🔷 BORDURI ENERGETICE */ + --nexus-border-primary: #003366; /* Bordură principală */ + --nexus-border-secondary: #004488; /* Bordură secundară */ + --nexus-border-glow: var(--nexus-primary); /* Bordură cu glow */ + --nexus-border-energy: linear-gradient(90deg, var(--nexus-primary), var(--nexus-secondary), var(--nexus-accent)); - /* Culori de stare */ - --success-color: #10b981; /* Emerald 500 */ - --success-bg: rgba(16, 185, 129, 0.1); - --warning-color: #f59e0b; /* Amber 500 */ - --warning-bg: rgba(245, 158, 11, 0.1); - --error-color: #ef4444; /* Red 500 */ - --error-bg: rgba(239, 68, 68, 0.1); - --info-color: #3b82f6; /* Blue 500 */ - --info-bg: rgba(59, 130, 246, 0.1); + /* 🎯 STĂRI ENERGETICE */ + --nexus-success: #00ff88; /* Verde matrix */ + --nexus-success-bg: rgba(0, 255, 136, 0.1); + --nexus-success-glow: 0 0 20px rgba(0, 255, 136, 0.5); + --nexus-warning: #ffaa00; /* Portocaliu plasma */ + --nexus-warning-bg: rgba(255, 170, 0, 0.1); + --nexus-warning-glow: 0 0 20px rgba(255, 170, 0, 0.5); + --nexus-error: #ff3366; /* Roșu laser */ + --nexus-error-bg: rgba(255, 51, 102, 0.1); + --nexus-error-glow: 0 0 20px rgba(255, 51, 102, 0.5); - /* Dimensiuni moderne și spațiere */ - --border-radius-xs: 2px; - --border-radius-sm: 4px; - --border-radius-md: 6px; - --border-radius-lg: 8px; - --border-radius-xl: 12px; - --border-radius-2xl: 16px; - --border-radius-3xl: 24px; - --border-radius-full: 9999px; + /* 🔮 GEOMETRIE NEXUS */ + --nexus-radius-nano: 2px; + --nexus-radius-micro: 4px; + --nexus-radius-small: 8px; + --nexus-radius-medium: 12px; + --nexus-radius-large: 16px; + --nexus-radius-xl: 24px; + --nexus-radius-2xl: 32px; + --nexus-radius-cosmic: 50px; + --nexus-radius-infinite: 9999px; - /* Umbre profesionale cu blur */ - --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); - --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); - --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); - --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); - --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3); + /* ⚡ UMBRE ENERGETICE NEXUS */ + --nexus-shadow-nano: 0 1px 3px rgba(0, 212, 255, 0.1); + --nexus-shadow-micro: 0 2px 8px rgba(0, 212, 255, 0.15); + --nexus-shadow-small: 0 4px 12px rgba(0, 212, 255, 0.2); + --nexus-shadow-medium: 0 8px 24px rgba(0, 212, 255, 0.25); + --nexus-shadow-large: 0 16px 48px rgba(0, 212, 255, 0.3); + --nexus-shadow-xl: 0 24px 64px rgba(0, 212, 255, 0.35); + --nexus-shadow-cosmic: 0 32px 96px rgba(0, 212, 255, 0.4); + --nexus-shadow-inner: inset 0 2px 8px rgba(0, 212, 255, 0.1); + --nexus-glow-primary: 0 0 30px rgba(0, 212, 255, 0.6); + --nexus-glow-secondary: 0 0 30px rgba(255, 0, 128, 0.6); + --nexus-glow-accent: 0 0 30px rgba(0, 255, 136, 0.6); + --nexus-glow-rainbow: 0 0 40px rgba(0, 212, 255, 0.4), 0 0 60px rgba(255, 0, 128, 0.3), 0 0 80px rgba(0, 255, 136, 0.2); - /* Tranziții și animații fluide */ - --transition-all: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); - --transition-fast: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); - --transition-normal: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + /* 🌊 TRANZIȚII CINEMATICE */ + --nexus-transition-instant: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); + --nexus-transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); + --nexus-transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + --nexus-transition-elegant: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + --nexus-transition-dramatic: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); + --nexus-transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); + --nexus-transition-elastic: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); - /* Blur effects profesionale */ - --blur-xs: blur(2px); - --blur-sm: blur(4px); - --blur-md: blur(8px); - --blur-lg: blur(12px); - --blur-xl: blur(16px); - --blur-2xl: blur(24px); - --blur-3xl: blur(40px); + /* 🌀 EFECTE BLUR HOLOGRAFICE */ + --nexus-blur-subtle: blur(1px); + --nexus-blur-soft: blur(3px); + --nexus-blur-medium: blur(6px); + --nexus-blur-strong: blur(12px); + --nexus-blur-intense: blur(20px); + --nexus-blur-extreme: blur(32px); + --nexus-blur-cosmic: blur(50px); - /* Spacing system consistent */ - --space-1: 0.25rem; /* 4px */ - --space-2: 0.5rem; /* 8px */ - --space-3: 0.75rem; /* 12px */ - --space-4: 1rem; /* 16px */ - --space-5: 1.25rem; /* 20px */ - --space-6: 1.5rem; /* 24px */ - --space-8: 2rem; /* 32px */ - --space-10: 2.5rem; /* 40px */ - --space-12: 3rem; /* 48px */ - --space-16: 4rem; /* 64px */ - --space-20: 5rem; /* 80px */ + /* 📐 SISTEM SPAȚIAL NEXUS */ + --nexus-space-1: 0.25rem; /* 4px - Micro */ + --nexus-space-2: 0.5rem; /* 8px - Tiny */ + --nexus-space-3: 0.75rem; /* 12px - Small */ + --nexus-space-4: 1rem; /* 16px - Base */ + --nexus-space-5: 1.25rem; /* 20px - Medium */ + --nexus-space-6: 1.5rem; /* 24px - Large */ + --nexus-space-8: 2rem; /* 32px - XL */ + --nexus-space-10: 2.5rem; /* 40px - 2XL */ + --nexus-space-12: 3rem; /* 48px - 3XL */ + --nexus-space-16: 4rem; /* 64px - 4XL */ + --nexus-space-20: 5rem; /* 80px - 5XL */ + --nexus-space-24: 6rem; /* 96px - 6XL */ } /* ======================================== - * FUNDAL MODERN CU BLUR ȘI GRADIENT PROFESIONAL + * 🌌 FUNDAL COSMIC NEXUS CU PARTICULE ANIMATE * ======================================== */ -/* Reset și fundal principal ultra-modern */ +/* Reset și configurare de bază */ * { box-sizing: border-box; + -webkit-tap-highlight-color: transparent; } html { - background: var(--background-primary) !important; - color: var(--text-primary) !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; - font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; + background: var(--nexus-void) !important; + color: var(--nexus-text-primary) !important; + font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; + font-optical-sizing: auto; } body { - background: var(--background-primary) !important; + background: var(--nexus-void) !important; margin: 0; padding: 0; overflow-x: hidden; + position: relative; } -/* Container principal cu gradient și blur profesional */ +/* Fundal cosmic cu particule animate */ +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(circle at 10% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 20%), + radial-gradient(circle at 80% 80%, rgba(255, 0, 128, 0.1) 0%, transparent 20%), + radial-gradient(circle at 40% 40%, rgba(0, 255, 136, 0.05) 0%, transparent 20%), + radial-gradient(circle at 90% 10%, rgba(255, 170, 0, 0.08) 0%, transparent 20%), + radial-gradient(circle at 20% 90%, rgba(255, 51, 102, 0.06) 0%, transparent 20%); + animation: cosmic-drift 30s ease-in-out infinite; + z-index: -2; + pointer-events: none; +} + +@keyframes cosmic-drift { + 0%, 100% { + transform: translateX(0) translateY(0) rotate(0deg) scale(1); + opacity: 0.8; + } + 25% { + transform: translateX(-20px) translateY(-30px) rotate(1deg) scale(1.05); + opacity: 1; + } + 50% { + transform: translateX(15px) translateY(20px) rotate(-0.5deg) scale(0.95); + opacity: 0.9; + } + 75% { + transform: translateX(-10px) translateY(25px) rotate(0.8deg) scale(1.02); + opacity: 0.95; + } +} + +/* Stele animate în fundal */ +body::after { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + radial-gradient(2px 2px at 20px 30px, rgba(0, 212, 255, 0.8), transparent), + radial-gradient(2px 2px at 40px 70px, rgba(255, 0, 128, 0.6), transparent), + radial-gradient(1px 1px at 90px 40px, rgba(0, 255, 136, 0.7), transparent), + radial-gradient(1px 1px at 130px 80px, rgba(255, 170, 0, 0.5), transparent), + radial-gradient(2px 2px at 160px 30px, rgba(255, 51, 102, 0.6), transparent); + background-repeat: repeat; + background-size: 200px 100px; + animation: stars-twinkle 8s linear infinite; + z-index: -1; + pointer-events: none; +} + +@keyframes stars-twinkle { + 0%, 100% { opacity: 0.8; transform: translateY(0); } + 50% { opacity: 1; transform: translateY(-10px); } +} + +/* Container principal cu glassmorphism cosmic */ .backgroundContainer, .dialog { - background: linear-gradient( - 135deg, - var(--background-primary) 0%, - var(--background-secondary) 25%, - var(--background-tertiary) 75%, - var(--background-secondary) 100% - ) !important; + background: var(--nexus-overlay) !important; + backdrop-filter: var(--nexus-blur-medium) !important; + -webkit-backdrop-filter: var(--nexus-blur-medium) !important; position: relative; min-height: 100vh; + border: 1px solid var(--nexus-border-primary) !important; } -/* Overlay cu blur pentru fundal */ +/* Overlay holografic pentru container */ .backgroundContainer::before { content: ''; position: fixed; @@ -156,126 +245,166 @@ body { left: 0; right: 0; bottom: 0; - background: - radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.05) 0%, transparent 50%); - backdrop-filter: var(--blur-xs); + background: var(--nexus-border-energy); + opacity: 0.03; + animation: energy-pulse 4s ease-in-out infinite; z-index: -1; pointer-events: none; } -/* Container pentru backdrop cu blur avansat */ +@keyframes energy-pulse { + 0%, 100% { opacity: 0.03; transform: scale(1); } + 50% { opacity: 0.08; transform: scale(1.01); } +} + +/* Container pentru backdrop cu blur holografic */ .backgroundContainer.withBackdrop, .backdropContainer { - background: var(--background-overlay) !important; - backdrop-filter: var(--blur-md) !important; - -webkit-backdrop-filter: var(--blur-md) !important; + background: var(--nexus-overlay) !important; + backdrop-filter: var(--nexus-blur-strong) !important; + -webkit-backdrop-filter: var(--nexus-blur-strong) !important; + border: 1px solid var(--nexus-border-glow) !important; + box-shadow: var(--nexus-glow-primary) !important; } -/* Backdrop image cu overlay modern */ +/* Backdrop image cu efect holografic */ .backdropImage { - opacity: 0.15 !important; - filter: blur(2px) saturate(1.2) !important; - transition: var(--transition-slow) !important; + opacity: 0.08 !important; + filter: blur(3px) saturate(1.5) hue-rotate(15deg) !important; + transition: var(--nexus-transition-dramatic) !important; + mix-blend-mode: screen !important; } -/* Scrollbar ultra-modern și subtil */ +/* 🌈 SCROLLBAR HOLOGRAFIC NEXUS */ * { scrollbar-width: thin; - scrollbar-color: var(--primary-color) transparent; + scrollbar-color: var(--nexus-primary) transparent; } *::-webkit-scrollbar { - width: 6px; - height: 6px; + width: 8px; + height: 8px; } *::-webkit-scrollbar-track { - background: transparent; - border-radius: var(--border-radius-full); + background: rgba(0, 34, 68, 0.3); + border-radius: var(--nexus-radius-infinite); + border: 1px solid var(--nexus-border-primary); } *::-webkit-scrollbar-thumb { - background: linear-gradient( - 180deg, - var(--primary-color) 0%, - var(--primary-hover) 100% - ); - border-radius: var(--border-radius-full); - transition: var(--transition-normal); - border: 1px solid var(--background-secondary); + background: var(--nexus-border-energy); + border-radius: var(--nexus-radius-infinite); + transition: var(--nexus-transition-smooth); + border: 1px solid var(--nexus-primary); + box-shadow: var(--nexus-glow-primary); } *::-webkit-scrollbar-thumb:hover { background: linear-gradient( - 180deg, - var(--accent-color) 0%, - var(--accent-hover) 100% + 45deg, + var(--nexus-primary) 0%, + var(--nexus-secondary) 50%, + var(--nexus-accent) 100% ); - box-shadow: var(--shadow-glow); + box-shadow: var(--nexus-glow-rainbow); + transform: scale(1.1); } *::-webkit-scrollbar-corner { - background: transparent; + background: var(--nexus-dark); + border: 1px solid var(--nexus-border-primary); } -/* Îmbunătățiri pentru selecția textului */ +/* ✨ SELECȚIE TEXT HOLOGRAFICĂ */ ::selection { - background: rgba(14, 165, 233, 0.3); - color: var(--text-primary); + background: rgba(0, 212, 255, 0.3); + color: var(--nexus-text-primary); + text-shadow: 0 0 10px rgba(0, 212, 255, 0.8); } ::-moz-selection { - background: rgba(14, 165, 233, 0.3); - color: var(--text-primary); + background: rgba(0, 212, 255, 0.3); + color: var(--nexus-text-primary); + text-shadow: 0 0 10px rgba(0, 212, 255, 0.8); +} + +/* Focus ring holografic */ +*:focus { + outline: 2px solid var(--nexus-primary) !important; + outline-offset: 2px !important; + border-radius: var(--nexus-radius-small) !important; + box-shadow: var(--nexus-glow-primary) !important; } /* ======================================== - * HEADER MODERN CU GLASSMORPHISM + * 🚀 HEADER NEXUS CU EFECTE HOLOGRAFICE * ======================================== */ -/* Header principal cu efect glassmorphism */ +/* Header principal cu glassmorphism cosmic */ .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred, .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader { - background: var(--background-overlay) !important; - backdrop-filter: var(--blur-lg) !important; - -webkit-backdrop-filter: var(--blur-lg) !important; - border-bottom: 1px solid var(--border-primary) !important; - box-shadow: var(--shadow-lg) !important; - transition: var(--transition-normal) !important; + background: var(--nexus-overlay) !important; + backdrop-filter: var(--nexus-blur-strong) !important; + -webkit-backdrop-filter: var(--nexus-blur-strong) !important; + border-bottom: 2px solid var(--nexus-border-glow) !important; + box-shadow: var(--nexus-shadow-large), var(--nexus-glow-primary) !important; + transition: var(--nexus-transition-smooth) !important; position: relative; z-index: 1000; + overflow: hidden; } -/* Efect glow subtil pentru header */ +/* Efect energetic pentru header */ +.skinHeader::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: var(--nexus-border-energy); + opacity: 0.1; + animation: energy-sweep 3s ease-in-out infinite; + z-index: -1; +} + +@keyframes energy-sweep { + 0% { left: -100%; opacity: 0.1; } + 50% { left: 100%; opacity: 0.3; } + 100% { left: 200%; opacity: 0.1; } +} + +/* Linie energetică în partea de jos */ .skinHeader::after { content: ''; position: absolute; - bottom: -1px; + bottom: -2px; left: 0; right: 0; - height: 1px; - background: linear-gradient( - 90deg, - transparent 0%, - var(--primary-color) 50%, - transparent 100% - ); - opacity: 0.6; + height: 2px; + background: var(--nexus-border-energy); + opacity: 0.8; + animation: energy-flow 2s linear infinite; } -/* Butoane header cu design modern */ +@keyframes energy-flow { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } +} + +/* 🔮 BUTOANE HEADER HOLOGRAFICE */ .headerButton { - color: var(--text-secondary) !important; - background: transparent !important; - border: 1px solid transparent !important; - border-radius: var(--border-radius-lg) !important; - padding: var(--space-2) var(--space-3) !important; - margin: 0 var(--space-1) !important; - transition: var(--transition-normal) !important; + color: var(--nexus-text-secondary) !important; + background: rgba(0, 68, 136, 0.2) !important; + border: 1px solid var(--nexus-border-primary) !important; + border-radius: var(--nexus-radius-medium) !important; + padding: var(--nexus-space-3) var(--nexus-space-4) !important; + margin: 0 var(--nexus-space-2) !important; + transition: var(--nexus-transition-smooth) !important; position: relative; overflow: hidden; + backdrop-filter: var(--nexus-blur-soft) !important; } .headerButton::before { @@ -285,30 +414,45 @@ body { left: -100%; width: 100%; height: 100%; - background: linear-gradient( - 90deg, - transparent 0%, - rgba(14, 165, 233, 0.1) 50%, - transparent 100% - ); - transition: var(--transition-normal); + background: var(--nexus-border-energy); + opacity: 0.3; + transition: var(--nexus-transition-smooth); + z-index: -1; +} + +.headerButton::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: radial-gradient(circle, var(--nexus-primary) 0%, transparent 70%); + transition: var(--nexus-transition-smooth); + transform: translate(-50%, -50%); + z-index: -1; } .headerButton:hover { - color: var(--text-primary) !important; - background: var(--background-tertiary) !important; - border-color: var(--border-accent) !important; - transform: translateY(-1px) !important; - box-shadow: var(--shadow-md) !important; + color: var(--nexus-text-primary) !important; + background: rgba(0, 68, 136, 0.4) !important; + border-color: var(--nexus-primary) !important; + transform: translateY(-2px) scale(1.05) !important; + box-shadow: var(--nexus-shadow-medium), var(--nexus-glow-primary) !important; } .headerButton:hover::before { left: 100%; } +.headerButton:hover::after { + width: 100%; + height: 100%; +} + .headerButton:active { - transform: translateY(0) !important; - box-shadow: var(--shadow-sm) !important; + transform: translateY(0) scale(1) !important; + box-shadow: var(--nexus-shadow-small) !important; } /* Meniu lateral cu glassmorphism */ @@ -487,27 +631,24 @@ body { border-radius: var(--border-radius-full); } -/* Butoane principale cu design premium */ +/* 💎 BUTOANE PRINCIPALE NEXUS PREMIUM */ .button-submit, .raised.emby-button { - background: linear-gradient( - 135deg, - var(--primary-color) 0%, - var(--primary-hover) 50%, - var(--accent-color) 100% - ) !important; - color: var(--text-primary) !important; - border: 1px solid var(--primary-color) !important; - border-radius: var(--border-radius-xl) !important; - padding: var(--space-3) var(--space-6) !important; - font-weight: 600 !important; - font-size: 0.9rem !important; - text-transform: none !important; - letter-spacing: 0.025em !important; - transition: var(--transition-normal) !important; - box-shadow: var(--shadow-md) !important; + background: var(--nexus-border-energy) !important; + color: var(--nexus-text-primary) !important; + border: 2px solid var(--nexus-primary) !important; + border-radius: var(--nexus-radius-large) !important; + padding: var(--nexus-space-4) var(--nexus-space-8) !important; + font-weight: 700 !important; + font-size: 1rem !important; + text-transform: uppercase !important; + letter-spacing: 0.1em !important; + transition: var(--nexus-transition-smooth) !important; + box-shadow: var(--nexus-shadow-medium), var(--nexus-glow-primary) !important; position: relative; overflow: hidden; + backdrop-filter: var(--nexus-blur-soft) !important; + text-shadow: 0 0 10px rgba(0, 212, 255, 0.8) !important; } .button-submit::before, @@ -519,19 +660,37 @@ body { width: 100%; height: 100%; background: linear-gradient( - 90deg, + 45deg, transparent 0%, - rgba(255, 255, 255, 0.2) 50%, + rgba(255, 255, 255, 0.3) 30%, + rgba(0, 212, 255, 0.4) 50%, + rgba(255, 255, 255, 0.3) 70%, transparent 100% ); - transition: var(--transition-normal); + transition: var(--nexus-transition-smooth); + z-index: 1; +} + +.button-submit::after, +.raised.emby-button::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%); + transition: var(--nexus-transition-smooth); + transform: translate(-50%, -50%); + z-index: 0; } .button-submit:hover, .raised.emby-button:hover { - transform: translateY(-2px) scale(1.02) !important; - box-shadow: var(--shadow-xl) !important; - border-color: var(--accent-color) !important; + transform: translateY(-4px) scale(1.05) !important; + box-shadow: var(--nexus-shadow-xl), var(--nexus-glow-rainbow) !important; + border-color: var(--nexus-accent) !important; + text-shadow: 0 0 15px rgba(0, 255, 136, 1) !important; } .button-submit:hover::before, @@ -539,10 +698,16 @@ body { left: 100%; } +.button-submit:hover::after, +.raised.emby-button:hover::after { + width: 200%; + height: 200%; +} + .button-submit:active, .raised.emby-button:active { - transform: translateY(0) scale(1) !important; - box-shadow: var(--shadow-md) !important; + transform: translateY(-1px) scale(1.02) !important; + box-shadow: var(--nexus-shadow-medium) !important; } /* Butoane secundare */ @@ -1784,39 +1949,56 @@ html { } /* ======================================== - * MESAJ FINAL - TEMĂ ULTRA-MODERNĂ COMPLETĂ + * 🌌 NEXUS THEME - MESAJ FINAL COSMIC * ======================================== */ /* * ======================================== - * JELLYFIN ULTRA-MODERN THEME v2.0 + * 🚀 JELLYFIN NEXUS THEME v3.0 PROFESSIONAL * ======================================== * - * 🎨 CARACTERISTICI PREMIUM: - * ✓ Glassmorphism și blur effects avansate - * ✓ Gradient-uri și animații fluide - * ✓ Design system consistent cu variabile CSS - * ✓ Responsive design pentru toate dispozitivele - * ✓ Optimizări pentru performanță și accesibilitate - * ✓ Micro-interacțiuni și feedback vizual - * ✓ Tema întunecată profesională - * ✓ Compatibilitate completă cu Jellyfin WebUI + * 🎨 CARACTERISTICI NEXUS PREMIUM: + * ✨ Design holografic cu efecte energetice + * 🌌 Fundal cosmic cu particule animate și stele + * 💎 Glassmorphism de nivel enterprise cu blur avansat + * ⚡ Animații cinematice cu tranziții elastice + * 🔮 Sistem de culori holografice (Cyan, Magenta, Green) + * 🌈 Efecte glow și rainbow pentru interacțiuni + * 📱 Responsive design optimizat pentru toate dispozitivele + * ⚡ Optimizări GPU pentru performanță maximă + * 🎯 Micro-interacțiuni cu feedback haptic + * 🎭 Tema cosmic-futuristă unică și distinctă * - * 🚀 TEHNOLOGII FOLOSITE: - * - CSS Custom Properties (variabile) - * - Backdrop-filter pentru glassmorphism - * - CSS Grid și Flexbox pentru layout - * - CSS Animations și Transitions - * - Media queries pentru responsive design - * - CSS Gradients pentru efecte vizuale + * 🚀 TEHNOLOGII NEXUS AVANSATE: + * - CSS Custom Properties cu sistem Nexus + * - Backdrop-filter pentru glassmorphism cosmic + * - CSS Animations cu keyframes complexe + * - Gradient-uri energetice multi-color + * - Box-shadow cu efecte glow holografice + * - Transform și scale pentru efecte 3D + * - Mix-blend-mode pentru efecte vizuale + * - CSS Grid și Flexbox pentru layout fluid * - * 💡 PERSONALIZARE: - * Modifică variabilele din secțiunea :root pentru - * a adapta tema la preferințele tale. + * 🎯 DIFERENȚE FAȚĂ DE TEMA DE BAZĂ: + * ✓ Paleta de culori complet diferită (Nexus vs Standard) + * ✓ Fundal cosmic animat vs gradient static + * ✓ Efecte holografice vs efecte simple + * ✓ Animații energetice vs tranziții standard + * ✓ Design futuristic vs design modern clasic + * ✓ Glow effects vs shadow effects + * ✓ Particule animate vs fundal static * - * Autor: EDD - * Versiune: 2.0 Ultra-Modern - * Data: 2025 + * 💡 PERSONALIZARE NEXUS: + * Modifică variabilele --nexus-* din secțiunea :root + * pentru a adapta tema la preferințele tale cosmice. * - * Bucură-te de experiența Jellyfin de nivel premium! 🎬✨ + * 📋 INSTALARE AUTOMATĂ: + * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css'); + * + * 👨‍💻 Autor: EDD + * 🚀 Versiune: 3.0 NEXUS PROFESSIONAL + * 📅 Data: 2025 + * 🌐 Repository: https://git.eddmanoo.cloud/eddmanoo/jellyfincss + * + * 🎬 Bucură-te de experiența Jellyfin NEXUS de nivel cosmic! ✨🌌 */ \ No newline at end of file