From 928393ca41615639da9768cf34d174dd1f333611 Mon Sep 17 00:00:00 2001 From: eddmanoo Date: Fri, 19 Sep 2025 11:52:29 +0300 Subject: [PATCH] Update CSS --- edd.css | 618 ++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 378 insertions(+), 240 deletions(-) diff --git a/edd.css b/edd.css index 0387c01..01767ad 100644 --- a/edd.css +++ b/edd.css @@ -1,104 +1,102 @@ /* * ======================================== - * JELLYFIN NEXUS THEME - PROFESSIONAL EDITION + * 🔥 JELLYFIN INFERNO THEME - RADICAL EDITION 🔥 * ======================================== * - * 🎨 TEMA PREMIUM PENTRU JELLYFIN SERVER + * 💀 TEMA EXTREMĂ PENTRU JELLYFIN SERVER 💀 * * Autor: EDD - * Versiune: 3.0 NEXUS PROFESSIONAL + * Versiune: 4.0 INFERNO RADICAL * Compatibilitate: Jellyfin WebUI (toate versiunile moderne) * Repository: https://git.eddmanoo.cloud/eddmanoo/jellyfincss * - * 🚀 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 + * 🔥 CARACTERISTICI EXTREME: + * 💀 Design apocaliptic cu flăcări animate + * 🌋 Fundal lava cu particule de foc + * ⚡ Lightning effects și explozii vizuale + * 🎭 Animații dramatice și intense + * 🔴 Paleta roșu-portocaliu-galben agresivă + * 💥 Efecte de explozie la hover + * 🌪️ Vortex și tornado effects + * 📱 Design responsiv cu efecte extreme * * 📋 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 + * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css'); * - * 💡 PERSONALIZARE: - * Modifică variabilele din secțiunea :root pentru adaptare completă - * - * ⚠️ NOTĂ: Această temă folosește tehnologii CSS avansate pentru o experiență premium + * ⚠️ ATENȚIE: Această temă este EXTREM DE VIZIBILĂ și RADICALĂ! + * Nu este pentru cei cu inima slabă! 🔥💀⚡ */ /* ======================================== - * NEXUS DESIGN SYSTEM - VARIABILE PREMIUM + * 🔥 INFERNO DESIGN SYSTEM - VARIABILE EXTREME 🔥 * ======================================== */ :root { - /* 🎨 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 */ + /* 🔥 PALETA INFERNO - CULORI DE FOC */ + --inferno-fire: #ff4500; /* Portocaliu flacără */ + --inferno-lava: #ff6600; /* Portocaliu lava */ + --inferno-ember: #ff8800; /* Portocaliu scânteie */ + --inferno-flame: #ffaa00; /* Galben flacără */ + --inferno-explosion: #ff0000; /* Roșu explozie */ + --inferno-blood: #cc0000; /* Roșu sânge */ + --inferno-magma: #990000; /* Roșu magma */ + --inferno-hell: #660000; /* Roșu iad */ - /* 🌌 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 */ + /* 🌋 FUNDAL APOCALIPTIC INFERNO */ + --inferno-abyss: #110000; /* Abis întunecat */ + --inferno-shadow: #220000; /* Umbră de foc */ + --inferno-darkness: #330000; /* Întuneric aprins */ + --inferno-glow: #440000; /* Strălucire roșie */ + --inferno-surface: #550000; /* Suprafață fierbinte */ + --inferno-overlay: rgba(17, 0, 0, 0.95); /* Overlay infernal */ - /* ✨ 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 */ + /* 💀 TEXT APOCALIPTIC */ + --inferno-text-primary: #ffffff; /* Alb pur */ + --inferno-text-fire: #ffaa00; /* Text de foc */ + --inferno-text-ember: #ff8800; /* Text scânteie */ + --inferno-text-flame: #ff6600; /* Text flacără */ + --inferno-text-blood: #ff0000; /* Text sânge */ - /* 🔷 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)); + /* ⚡ BORDURI DE FOC */ + --inferno-border-fire: #ff4500; /* Bordură foc */ + --inferno-border-lava: #ff6600; /* Bordură lava */ + --inferno-border-flame: var(--inferno-fire); /* Bordură flacără */ + --inferno-border-energy: linear-gradient(45deg, var(--inferno-fire), var(--inferno-lava), var(--inferno-flame), var(--inferno-explosion)); - /* 🎯 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); + /* 💥 STĂRI EXPLOZIVE */ + --inferno-success: #ffaa00; /* Galben explozie */ + --inferno-success-bg: rgba(255, 170, 0, 0.2); + --inferno-success-glow: 0 0 30px rgba(255, 170, 0, 0.8); + --inferno-warning: #ff6600; /* Portocaliu pericol */ + --inferno-warning-bg: rgba(255, 102, 0, 0.2); + --inferno-warning-glow: 0 0 30px rgba(255, 102, 0, 0.8); + --inferno-error: #ff0000; /* Roșu catastrofă */ + --inferno-error-bg: rgba(255, 0, 0, 0.2); + --inferno-error-glow: 0 0 30px rgba(255, 0, 0, 0.8); - /* 🔮 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; + /* 🔥 GEOMETRIE INFERNALĂ */ + --inferno-radius-spark: 3px; + --inferno-radius-ember: 6px; + --inferno-radius-flame: 12px; + --inferno-radius-fire: 18px; + --inferno-radius-explosion: 25px; + --inferno-radius-volcano: 35px; + --inferno-radius-hell: 50px; + --inferno-radius-apocalypse: 75px; + --inferno-radius-infinite: 9999px; - /* ⚡ 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); + /* 💥 UMBRE EXPLOZIVE INFERNO */ + --inferno-shadow-spark: 0 2px 6px rgba(255, 69, 0, 0.3); + --inferno-shadow-ember: 0 4px 12px rgba(255, 69, 0, 0.4); + --inferno-shadow-flame: 0 8px 24px rgba(255, 69, 0, 0.5); + --inferno-shadow-fire: 0 12px 36px rgba(255, 69, 0, 0.6); + --inferno-shadow-explosion: 0 20px 60px rgba(255, 69, 0, 0.7); + --inferno-shadow-volcano: 0 30px 90px rgba(255, 69, 0, 0.8); + --inferno-shadow-apocalypse: 0 40px 120px rgba(255, 69, 0, 0.9); + --inferno-shadow-inner: inset 0 3px 12px rgba(255, 69, 0, 0.3); + --inferno-glow-fire: 0 0 40px rgba(255, 69, 0, 0.9); + --inferno-glow-lava: 0 0 40px rgba(255, 102, 0, 0.9); + --inferno-glow-explosion: 0 0 40px rgba(255, 0, 0, 0.9); + --inferno-glow-hell: 0 0 60px rgba(255, 69, 0, 0.7), 0 0 80px rgba(255, 102, 0, 0.5), 0 0 100px rgba(255, 0, 0, 0.3); /* 🌊 TRANZIȚII CINEMATICE */ --nexus-transition-instant: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); @@ -146,7 +144,7 @@ } /* ======================================== - * 🌌 FUNDAL COSMIC NEXUS CU PARTICULE ANIMATE + * 🔥 FUNDAL APOCALIPTIC INFERNO CU FLĂCĂRI ANIMATE 🔥 * ======================================== */ /* Reset și configurare de bază */ @@ -156,25 +154,25 @@ } html { - 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; + background: var(--inferno-abyss) !important; + color: var(--inferno-text-primary) !important; + font-family: 'Impact', 'Arial Black', 'Helvetica Neue', Arial, sans-serif !important; + font-weight: bold !important; + text-shadow: 0 0 10px var(--inferno-fire) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; - font-optical-sizing: auto; } body { - background: var(--nexus-void) !important; + background: var(--inferno-abyss) !important; margin: 0; padding: 0; overflow-x: hidden; position: relative; } -/* Fundal cosmic cu particule animate */ +/* 🔥 FLĂCĂRI ANIMATE ÎN FUNDAL */ body::before { content: ''; position: fixed; @@ -183,36 +181,36 @@ body::before { 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; + radial-gradient(ellipse at 10% 90%, rgba(255, 69, 0, 0.4) 0%, transparent 30%), + radial-gradient(ellipse at 30% 85%, rgba(255, 102, 0, 0.3) 0%, transparent 25%), + radial-gradient(ellipse at 50% 80%, rgba(255, 170, 0, 0.4) 0%, transparent 35%), + radial-gradient(ellipse at 70% 85%, rgba(255, 0, 0, 0.3) 0%, transparent 25%), + radial-gradient(ellipse at 90% 90%, rgba(255, 69, 0, 0.4) 0%, transparent 30%); + animation: inferno-flames 8s ease-in-out infinite; z-index: -2; pointer-events: none; } -@keyframes cosmic-drift { +@keyframes inferno-flames { 0%, 100% { - transform: translateX(0) translateY(0) rotate(0deg) scale(1); - opacity: 0.8; + transform: translateY(0) scaleY(1) scaleX(1); + opacity: 0.6; } 25% { - transform: translateX(-20px) translateY(-30px) rotate(1deg) scale(1.05); - opacity: 1; + transform: translateY(-15px) scaleY(1.2) scaleX(0.9); + opacity: 0.8; } 50% { - transform: translateX(15px) translateY(20px) rotate(-0.5deg) scale(0.95); - opacity: 0.9; + transform: translateY(-30px) scaleY(1.5) scaleX(0.8); + opacity: 1; } 75% { - transform: translateX(-10px) translateY(25px) rotate(0.8deg) scale(1.02); - opacity: 0.95; + transform: translateY(-20px) scaleY(1.3) scaleX(0.85); + opacity: 0.9; } } -/* Stele animate în fundal */ +/* 💥 SCÂNTEI ȘI EXPLOZII ÎN FUNDAL */ body::after { content: ''; position: fixed; @@ -221,35 +219,62 @@ body::after { 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); + radial-gradient(3px 3px at 25px 40px, rgba(255, 170, 0, 0.9), transparent), + radial-gradient(2px 2px at 60px 80px, rgba(255, 69, 0, 0.8), transparent), + radial-gradient(4px 4px at 120px 50px, rgba(255, 0, 0, 0.7), transparent), + radial-gradient(2px 2px at 180px 90px, rgba(255, 102, 0, 0.8), transparent), + radial-gradient(3px 3px at 220px 40px, rgba(255, 170, 0, 0.9), transparent); background-repeat: repeat; - background-size: 200px 100px; - animation: stars-twinkle 8s linear infinite; + background-size: 250px 120px; + animation: sparks-explosion 4s 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); } +@keyframes sparks-explosion { + 0%, 100% { + opacity: 0.6; + transform: translateY(0) scale(1); + } + 25% { + opacity: 1; + transform: translateY(-5px) scale(1.2); + } + 50% { + opacity: 0.8; + transform: translateY(-15px) scale(0.8); + } + 75% { + opacity: 1; + transform: translateY(-8px) scale(1.1); + } } -/* Container principal cu glassmorphism cosmic */ +/* 🌋 CONTAINER PRINCIPAL APOCALIPTIC */ .backgroundContainer, .dialog { - background: var(--nexus-overlay) !important; - backdrop-filter: var(--nexus-blur-medium) !important; - -webkit-backdrop-filter: var(--nexus-blur-medium) !important; + background: var(--inferno-overlay) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; position: relative; min-height: 100vh; - border: 1px solid var(--nexus-border-primary) !important; + border: 3px solid var(--inferno-border-fire) !important; + box-shadow: var(--inferno-glow-fire) !important; + animation: container-pulse 3s ease-in-out infinite !important; } -/* Overlay holografic pentru container */ +@keyframes container-pulse { + 0%, 100% { + border-color: var(--inferno-fire); + box-shadow: var(--inferno-glow-fire); + } + 50% { + border-color: var(--inferno-explosion); + box-shadow: var(--inferno-glow-explosion); + } +} + +/* 💥 OVERLAY EXPLOZIV PENTRU CONTAINER */ .backgroundContainer::before { content: ''; position: fixed; @@ -257,16 +282,22 @@ body::after { left: 0; right: 0; bottom: 0; - background: var(--nexus-border-energy); - opacity: 0.03; - animation: energy-pulse 4s ease-in-out infinite; + background: var(--inferno-border-energy); + opacity: 0.1; + animation: explosion-pulse 2s ease-in-out infinite; z-index: -1; pointer-events: none; } -@keyframes energy-pulse { - 0%, 100% { opacity: 0.03; transform: scale(1); } - 50% { opacity: 0.08; transform: scale(1.01); } +@keyframes explosion-pulse { + 0%, 100% { + opacity: 0.1; + transform: scale(1); + } + 50% { + opacity: 0.3; + transform: scale(1.02); + } } /* Container pentru backdrop cu blur holografic */ @@ -288,40 +319,61 @@ body::after { transform: scale(1.1) !important; } -/* 🌈 SCROLLBAR HOLOGRAFIC NEXUS (îmbunătățit cu Ultrachromic) */ +/* 🔥 SCROLLBAR INFERNAL EXTREM */ * { - scrollbar-width: thin; - scrollbar-color: var(--nexus-accent-alpha-75) transparent !important; + scrollbar-width: thick; + scrollbar-color: var(--inferno-fire) var(--inferno-shadow) !important; } *::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 12px; + height: 12px; } *::-webkit-scrollbar-track { - background: rgba(0, 34, 68, 0.3); - border-radius: var(--nexus-radius-infinite); - border: 1px solid var(--nexus-border-primary); + background: linear-gradient(180deg, var(--inferno-shadow), var(--inferno-darkness)); + border-radius: var(--inferno-radius-infinite); + border: 2px solid var(--inferno-border-fire); + box-shadow: var(--inferno-glow-fire); } *::-webkit-scrollbar-thumb { - background: var(--nexus-accent-alpha-75) !important; - border-radius: var(--nexus-radius-infinite); - transition: var(--nexus-transition-smooth); - border: 1px solid var(--nexus-primary); - box-shadow: var(--nexus-glow-primary); + background: var(--inferno-border-energy) !important; + border-radius: var(--inferno-radius-infinite); + transition: all 0.2s ease; + border: 2px solid var(--inferno-explosion); + box-shadow: var(--inferno-glow-fire); + animation: scrollbar-burn 3s ease-in-out infinite; +} + +@keyframes scrollbar-burn { + 0%, 100% { + background: linear-gradient(180deg, var(--inferno-fire), var(--inferno-lava)); + box-shadow: var(--inferno-glow-fire); + } + 50% { + background: linear-gradient(180deg, var(--inferno-explosion), var(--inferno-flame)); + box-shadow: var(--inferno-glow-explosion); + } } *::-webkit-scrollbar-thumb:hover { - background: var(--nexus-border-energy) !important; - box-shadow: var(--nexus-glow-rainbow); - transform: scale(1.1); + background: linear-gradient(45deg, var(--inferno-explosion), var(--inferno-flame), var(--inferno-fire)) !important; + box-shadow: var(--inferno-glow-hell); + transform: scale(1.2); + animation: scrollbar-explosion 0.5s ease-out; +} + +@keyframes scrollbar-explosion { + 0% { transform: scale(1.2); } + 50% { transform: scale(1.4); } + 100% { transform: scale(1.2); } } *::-webkit-scrollbar-corner { - background: var(--nexus-dark); - border: 1px solid var(--nexus-border-primary); + background: var(--inferno-darkness); + border: 2px solid var(--inferno-border-fire); + box-shadow: var(--inferno-glow-fire); } /* ✨ SELECȚIE TEXT HOLOGRAFICĂ */ @@ -442,24 +494,36 @@ body::after { } /* ======================================== - * 🚀 HEADER NEXUS CU EFECTE HOLOGRAFICE + * 🔥 HEADER INFERNO CU EFECTE EXPLOZIVE 🔥 * ======================================== */ -/* Header principal cu glassmorphism cosmic */ +/* Header principal cu efecte de foc */ .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred, .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader { - 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; + background: linear-gradient(135deg, var(--inferno-fire), var(--inferno-lava), var(--inferno-explosion)) !important; + backdrop-filter: blur(5px) !important; + -webkit-backdrop-filter: blur(5px) !important; + border-bottom: 4px solid var(--inferno-flame) !important; + box-shadow: var(--inferno-shadow-explosion), var(--inferno-glow-hell) !important; + transition: all 0.3s ease !important; position: relative; z-index: 1000; overflow: hidden; + animation: header-inferno 4s ease-in-out infinite !important; } -/* Efect energetic pentru header */ +@keyframes header-inferno { + 0%, 100% { + background: linear-gradient(135deg, var(--inferno-fire), var(--inferno-lava), var(--inferno-explosion)); + box-shadow: var(--inferno-shadow-explosion), var(--inferno-glow-fire); + } + 50% { + background: linear-gradient(135deg, var(--inferno-explosion), var(--inferno-flame), var(--inferno-fire)); + box-shadow: var(--inferno-shadow-apocalypse), var(--inferno-glow-hell); + } +} + +/* 💥 EFECT EXPLOZIV PENTRU HEADER */ .skinHeader::before { content: ''; position: absolute; @@ -467,48 +531,70 @@ body::after { left: -100%; width: 100%; height: 100%; - background: var(--nexus-border-energy); - opacity: 0.1; - animation: energy-sweep 3s ease-in-out infinite; + background: linear-gradient(90deg, transparent, var(--inferno-flame), var(--inferno-explosion), var(--inferno-flame), transparent); + opacity: 0.4; + animation: fire-sweep 2s 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; } +@keyframes fire-sweep { + 0% { left: -100%; opacity: 0.4; } + 50% { left: 100%; opacity: 0.8; } + 100% { left: 200%; opacity: 0.4; } } -/* Linie energetică în partea de jos */ +/* 🔥 LINIE DE FOC ÎN PARTEA DE JOS */ .skinHeader::after { content: ''; position: absolute; - bottom: -2px; + bottom: -4px; left: 0; right: 0; - height: 2px; - background: var(--nexus-border-energy); - opacity: 0.8; - animation: energy-flow 2s linear infinite; + height: 4px; + background: var(--inferno-border-energy); + opacity: 1; + animation: fire-flow 1s linear infinite; + box-shadow: var(--inferno-glow-fire); } -@keyframes energy-flow { - 0% { background-position: 0% 50%; } - 100% { background-position: 100% 50%; } +@keyframes fire-flow { + 0% { + background: linear-gradient(90deg, var(--inferno-fire), var(--inferno-lava), var(--inferno-flame), var(--inferno-explosion)); + background-size: 200% 100%; + background-position: 0% 50%; + } + 100% { + background-position: 200% 50%; + } } -/* 🔮 BUTOANE HEADER HOLOGRAFICE */ +/* 💥 BUTOANE HEADER EXPLOZIVE */ .headerButton { - 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; + color: var(--inferno-text-primary) !important; + background: linear-gradient(45deg, var(--inferno-fire), var(--inferno-lava)) !important; + border: 2px solid var(--inferno-flame) !important; + border-radius: var(--inferno-radius-flame) !important; + padding: 12px 16px !important; + margin: 0 8px !important; + transition: all 0.2s ease !important; position: relative; overflow: hidden; - backdrop-filter: var(--nexus-blur-soft) !important; + backdrop-filter: blur(3px) !important; + box-shadow: var(--inferno-glow-fire) !important; + font-weight: bold !important; + text-shadow: 0 0 10px var(--inferno-flame) !important; + animation: button-flicker 3s ease-in-out infinite !important; +} + +@keyframes button-flicker { + 0%, 100% { + background: linear-gradient(45deg, var(--inferno-fire), var(--inferno-lava)); + box-shadow: var(--inferno-glow-fire); + } + 50% { + background: linear-gradient(45deg, var(--inferno-explosion), var(--inferno-flame)); + box-shadow: var(--inferno-glow-explosion); + } } .headerButton::before { @@ -538,11 +624,18 @@ body::after { } .headerButton:hover { - 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; + color: var(--inferno-text-primary) !important; + background: linear-gradient(45deg, var(--inferno-explosion), var(--inferno-flame), var(--inferno-fire)) !important; + border-color: var(--inferno-explosion) !important; + transform: translateY(-4px) scale(1.15) !important; + box-shadow: var(--inferno-shadow-apocalypse), var(--inferno-glow-hell) !important; + animation: button-explosion 0.5s ease-out !important; +} + +@keyframes button-explosion { + 0% { transform: translateY(-4px) scale(1.15); } + 50% { transform: translateY(-6px) scale(1.2); } + 100% { transform: translateY(-4px) scale(1.15); } } .headerButton:hover::before { @@ -550,13 +643,20 @@ body::after { } .headerButton:hover::after { - width: 100%; - height: 100%; + width: 150%; + height: 150%; } .headerButton:active { - transform: translateY(0) scale(1) !important; - box-shadow: var(--nexus-shadow-small) !important; + transform: translateY(-2px) scale(1.1) !important; + box-shadow: var(--inferno-shadow-fire) !important; + animation: button-impact 0.1s ease-out !important; +} + +@keyframes button-impact { + 0% { transform: translateY(-2px) scale(1.1); } + 50% { transform: translateY(0) scale(1.05); } + 100% { transform: translateY(-2px) scale(1.1); } } /* Meniu lateral cu glassmorphism */ @@ -970,17 +1070,31 @@ progress::-webkit-progress-value { padding: var(--space-4) !important; } -/* Carduri principale cu efect glassmorphism */ +/* 🔥 CARDURI PRINCIPALE INFERNALE */ .cardBox { - background: var(--background-overlay) !important; - backdrop-filter: var(--blur-sm) !important; - -webkit-backdrop-filter: var(--blur-sm) !important; - border: 1px solid var(--border-primary) !important; - border-radius: var(--border-radius-2xl) !important; - transition: var(--transition-normal) !important; - box-shadow: var(--shadow-md) !important; + background: linear-gradient(135deg, var(--inferno-fire), var(--inferno-lava), var(--inferno-ember)) !important; + backdrop-filter: blur(4px) !important; + -webkit-backdrop-filter: blur(4px) !important; + border: 3px solid var(--inferno-flame) !important; + border-radius: var(--inferno-radius-fire) !important; + transition: all 0.3s ease !important; + box-shadow: var(--inferno-shadow-fire), var(--inferno-glow-fire) !important; position: relative; overflow: hidden; + animation: card-burn 4s ease-in-out infinite !important; +} + +@keyframes card-burn { + 0%, 100% { + background: linear-gradient(135deg, var(--inferno-fire), var(--inferno-lava), var(--inferno-ember)); + border-color: var(--inferno-flame); + box-shadow: var(--inferno-shadow-fire), var(--inferno-glow-fire); + } + 50% { + background: linear-gradient(135deg, var(--inferno-explosion), var(--inferno-flame), var(--inferno-fire)); + border-color: var(--inferno-explosion); + box-shadow: var(--inferno-shadow-explosion), var(--inferno-glow-explosion); + } } .cardBox::before { @@ -999,20 +1113,28 @@ progress::-webkit-progress-value { } .cardBox:hover { - transform: translateY(-8px) scale(1.03) !important; - box-shadow: var(--shadow-2xl) !important; - border-color: var(--primary-color) !important; - background: var(--background-secondary) !important; + transform: translateY(-12px) scale(1.08) rotate(2deg) !important; + box-shadow: var(--inferno-shadow-apocalypse), var(--inferno-glow-hell) !important; + border-color: var(--inferno-explosion) !important; + background: linear-gradient(135deg, var(--inferno-explosion), var(--inferno-flame), var(--inferno-fire)) !important; + animation: card-explosion 0.5s ease-out !important; +} + +@keyframes card-explosion { + 0% { transform: translateY(-12px) scale(1.08) rotate(2deg); } + 50% { transform: translateY(-16px) scale(1.12) rotate(-1deg); } + 100% { transform: translateY(-12px) scale(1.08) rotate(2deg); } } .cardBox:hover::before { background: linear-gradient( - 90deg, - transparent 0%, - var(--primary-color) 50%, - transparent 100% + 45deg, + var(--inferno-explosion), + var(--inferno-flame), + var(--inferno-fire), + var(--inferno-lava) ); - opacity: 0.8; + opacity: 1; } /* Imagini din carduri cu efecte moderne */ @@ -1051,22 +1173,38 @@ progress::-webkit-progress-value { opacity: 1; } -/* Text din carduri cu tipografie modernă */ +/* 🔥 TEXT DIN CARDURI CU EFECTE DE FOC */ .cardText { - color: var(--text-primary) !important; - font-weight: 600 !important; - font-size: 0.95rem !important; - line-height: 1.4 !important; - margin: var(--space-3) 0 var(--space-1) 0 !important; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; + color: var(--inferno-text-primary) !important; + font-weight: 900 !important; + font-size: 1.1rem !important; + line-height: 1.3 !important; + margin: 12px 0 8px 0 !important; + text-shadow: 0 0 15px var(--inferno-flame), 0 0 25px var(--inferno-fire) !important; + text-transform: uppercase !important; + letter-spacing: 1px !important; + animation: text-flicker 3s ease-in-out infinite !important; +} + +@keyframes text-flicker { + 0%, 100% { + text-shadow: 0 0 15px var(--inferno-flame), 0 0 25px var(--inferno-fire); + color: var(--inferno-text-primary); + } + 50% { + text-shadow: 0 0 20px var(--inferno-explosion), 0 0 35px var(--inferno-flame); + color: var(--inferno-text-fire); + } } .cardText-secondary { - color: var(--text-muted) !important; - font-weight: 400 !important; - font-size: 0.85rem !important; - line-height: 1.3 !important; - margin: 0 0 var(--space-2) 0 !important; + color: var(--inferno-text-ember) !important; + font-weight: 700 !important; + font-size: 0.9rem !important; + line-height: 1.2 !important; + margin: 0 0 8px 0 !important; + text-shadow: 0 0 10px var(--inferno-ember) !important; + text-transform: uppercase !important; } /* Carduri pentru episoade cu design special */ @@ -2220,33 +2358,33 @@ html { * 🎯 Micro-interacțiuni cu feedback haptic * 🎭 Tema cosmic-futuristă unică și distinctă * - * 🚀 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 - * - Sistem accent dinamic inspirat din Ultrachromic - * - Optimizări performanță din Monochromic - * - Rounding system și backdrop filters avansate + * 🔥 TEHNOLOGII INFERNO EXTREME: + * - CSS Custom Properties cu sistem Inferno + * - Gradient-uri de foc cu multiple culori + * - CSS Animations cu efecte explozive + * - Box-shadow cu efecte glow infernale + * - Transform, scale și rotate pentru efecte dramatice + * - Text-shadow cu efecte de flăcări + * - Backdrop-filter pentru efecte de fum + * - Keyframes complexe pentru animații de foc + * - Sistem de culori roșu-portocaliu-galben agresiv + * - Efecte hover cu explozii și impact + * - Scrollbar animat cu flăcări * - * 🎯 DIFERENȚE FAȚĂ DE TEMA DE BAZĂ + INTEGRĂRI: - * ✓ 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 - * ✓ Sistem accent dinamic (inspirat din Ultrachromic) - * ✓ Optimizări performanță (inspirat din Monochromic) - * ✓ Cast thumbnails mai mici și rotunde - * ✓ Backdrop filters avansate pentru imagini - * ✓ Scrollbar cu accent dinamic - * ✓ Progres bars cu efecte energetice + * 🔥 DIFERENȚE RADICALE FAȚĂ DE TEMA DE BAZĂ: + * 💥 Paleta de culori COMPLET DIFERITĂ (Inferno vs Standard) + * 🌋 Fundal cu flăcări animate vs gradient static + * ⚡ Efecte explozive vs efecte simple + * 🔥 Animații dramatice vs tranziții standard + * 💀 Design apocaliptic vs design modern clasic + * 🌪️ Efecte de foc vs shadow effects normale + * 💥 Scântei și explozii vs fundal static + * 🔴 Text cu efecte de flăcări și text-shadow intens + * ⚡ Butoane cu animații de explozie la hover + * 🌋 Carduri cu efecte de ardere continuă + * 🔥 Scrollbar animat cu flăcări + * 💀 Header cu gradient de foc și efecte dramatice + * 🌪️ Hover effects cu rotație și scale extreme * * 💡 PERSONALIZARE NEXUS: * Modifică variabilele --nexus-* din secțiunea :root