Update css

edd.css

@@ -84,7 +84,7 @@
     --inferno-radius-apocalypse: 75px;
     --inferno-radius-infinite: 9999px;
 
-    /* 💥 UMBRE EXPLOZIVE INFERNO */
+    /* 💥 UMBRE EXPLOZIVE INFERNO (îmbunătățite cu ElegantFin) */
     --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);
@@ -98,6 +98,15 @@
     --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);
 
+    /* 🔥 VARIABILE ELEGANTFIN ADAPTATE PENTRU INFERNO */
+    --inferno-blur-small: blur(2px);
+    --inferno-blur-default: blur(8px);
+    --inferno-blur-large: blur(15px);
+    --inferno-blur-largest: blur(25px);
+    --inferno-transition-fast: all 0.125s ease;
+    --inferno-transition-normal: all 0.25s ease;
+    --inferno-transition-slow: all 0.5s ease;
+
     /* 🌊 TRANZIȚII CINEMATICE */
     --nexus-transition-instant: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     --nexus-transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -1137,6 +1146,81 @@ progress::-webkit-progress-value {
     opacity: 1;
 }
 
+/* ========================================
+ * 🔥 SISTEM CARDURI RESPONSIVE INFERNO (inspirat din ElegantFin)
+ * ======================================== */
+
+/* Carduri cu dimensiuni responsive */
+.card {
+    --effectiveWidth: calc(99vw - 6.6%);
+    --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - 1em);
+    box-sizing: border-box;
+    width: var(--cardWidth) !important;
+    padding: 0.375em !important;
+    transition: var(--inferno-transition-fast) !important;
+}
+
+/* Carduri portrait și square */
+.portraitCard, .squareCard {
+    --cardCount: 8;
+    min-width: 5em;
+}
+
+.overflowPortraitCard, .overflowSquareCard {
+    --cardCount: 7;
+}
+
+/* Carduri backdrop */
+.backdropCard {
+    --cardCount: 6;
+}
+
+.overflowBackdropCard {
+    --cardCount: 5;
+}
+
+/* Banner cards */
+.bannerCard {
+    --cardCount: 2;
+}
+
+/* Media queries pentru responsive design */
+@media (max-width: 80em) {
+    .portraitCard, .squareCard, .overflowPortraitCard, .overflowSquareCard {
+        --cardCount: 6;
+    }
+    .backdropCard, .overflowBackdropCard {
+        --cardCount: 4;
+    }
+}
+
+@media (max-width: 62em) {
+    .portraitCard, .squareCard, .overflowPortraitCard, .overflowSquareCard {
+        --cardCount: 5;
+    }
+    .backdropCard, .overflowBackdropCard {
+        --cardCount: 4;
+    }
+}
+
+@media (max-width: 48.125em) {
+    .portraitCard, .squareCard, .overflowPortraitCard, .overflowSquareCard {
+        --cardCount: 4;
+    }
+    .backdropCard, .overflowBackdropCard {
+        --cardCount: 3;
+    }
+}
+
+@media (max-width: 30em) {
+    .portraitCard, .squareCard, .overflowPortraitCard, .overflowSquareCard {
+        --cardCount: 3;
+    }
+    .backdropCard, .overflowBackdropCard {
+        --cardCount: 2;
+    }
+}
+
 /* Imagini din carduri cu efecte moderne */
 .cardContent-button,
 .itemDetailImage,
@@ -1173,6 +1257,59 @@ progress::-webkit-progress-value {
     opacity: 1;
 }
 
+/* ========================================
+ * 🔥 EFECTE HOVER AVANSATE INFERNO (inspirat din ElegantFin)
+ * ======================================== */
+
+/* Carduri cu efecte hover dramatice */
+.card.card-hoverable:hover .cardScalable {
+    border-color: var(--inferno-explosion) !important;
+    transform: scale(1.08) !important;
+    box-shadow: var(--inferno-glow-hell) !important;
+    animation: card-hover-explosion 0.3s ease-out !important;
+}
+
+@keyframes card-hover-explosion {
+    0% { transform: scale(1.08); }
+    50% { transform: scale(1.12); }
+    100% { transform: scale(1.08); }
+}
+
+.card.card-hoverable:hover .cardImageContainer {
+    transform: scale(1.05) !important;
+    filter: brightness(1.2) saturate(1.3) !important;
+}
+
+.card.card-hoverable .cardScalable:active {
+    transition: var(--inferno-transition-fast) !important;
+    transform: scale(1.02) !important;
+    box-shadow: var(--inferno-shadow-fire) !important;
+}
+
+/* Overlay effects pentru carduri */
+.cardOverlayContainer {
+    transition: var(--inferno-transition-normal) !important;
+    background: rgba(255, 69, 0, 0.1) !important;
+}
+
+.card.card-hoverable .cardOverlayContainer:after {
+    content: '';
+    transition: var(--inferno-transition-normal) !important;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%) translateX(0);
+    background: linear-gradient(0deg, transparent, var(--inferno-flame) 45%, var(--inferno-explosion) 55%, transparent);
+    opacity: 0;
+}
+
+.card.card-hoverable:hover .cardOverlayContainer:after {
+    transform: translateY(50%) translateX(0);
+    opacity: 0.3;
+}
+
 /* 🔥 TEXT DIN CARDURI CU EFECTE DE FOC */
 .cardText {
     color: var(--inferno-text-primary) !important;
@@ -1207,6 +1344,257 @@ progress::-webkit-progress-value {
     text-transform: uppercase !important;
 }
 
+/* ========================================
+ * 🔥 BUTOANE OVERLAY INFERNALE (inspirat din ElegantFin)
+ * ======================================== */
+
+/* Buton play principal cu efecte de foc */
+.cardOverlayContainer > .cardOverlayFab-primary,
+.listItemImageButton {
+    background: linear-gradient(135deg, var(--inferno-fire), var(--inferno-lava)) !important;
+    color: var(--inferno-text-primary) !important;
+    border: 2px solid var(--inferno-flame) !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+    font-size: 85% !important;
+    z-index: 2 !important;
+    transition: var(--inferno-transition-fast) !important;
+    animation: button-pulse 2s ease-in-out infinite !important;
+}
+
+@keyframes button-pulse {
+    0%, 100% {
+        background: linear-gradient(135deg, var(--inferno-fire), var(--inferno-lava));
+        box-shadow: var(--inferno-glow-fire);
+    }
+    50% {
+        background: linear-gradient(135deg, var(--inferno-explosion), var(--inferno-flame));
+        box-shadow: var(--inferno-glow-explosion);
+    }
+}
+
+.cardOverlayContainer > .cardOverlayFab-primary:hover,
+.listItemImageButton:hover {
+    background: linear-gradient(135deg, var(--inferno-explosion), var(--inferno-flame), var(--inferno-fire)) !important;
+    transform: scale(1.2) !important;
+    box-shadow: var(--inferno-glow-hell) !important;
+    animation: button-explosion-hover 0.3s ease-out !important;
+}
+
+@keyframes button-explosion-hover {
+    0% { transform: scale(1.2); }
+    50% { transform: scale(1.3); }
+    100% { transform: scale(1.2); }
+}
+
+/* Butoane overlay secundare */
+.cardOverlayButton-br button {
+    color: var(--inferno-text-primary) !important;
+    text-shadow: 0 0 10px var(--inferno-fire) !important;
+    background: rgba(255, 69, 0, 0.3) !important;
+    border-radius: var(--inferno-radius-flame) !important;
+    backdrop-filter: var(--inferno-blur-default) !important;
+    transition: var(--inferno-transition-fast) !important;
+}
+
+.cardOverlayButton-br button:hover {
+    background: var(--inferno-fire) !important;
+    transform: scale(1.1) !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+}
+
+/* Overlay container cu blur infernal */
+.cardOverlayContainer:has(.cardOverlayButton:hover) {
+    backdrop-filter: var(--inferno-blur-large) !important;
+    background: rgba(255, 69, 0, 0.2) !important;
+}
+
+/* ========================================
+ * 🔥 PROGRESS BARS INFERNALE (inspirat din ElegantFin)
+ * ======================================== */
+
+/* Progress bar pentru carduri */
+.itemProgressBar:not(.backgroundProgress):not(.playbackProgress):not(.transcodingProgress) {
+    backdrop-filter: var(--inferno-blur-large) !important;
+    background: linear-gradient(90deg, var(--inferno-shadow), var(--inferno-darkness)) !important;
+    height: 0.4em !important;
+    overflow: hidden !important;
+    border-radius: var(--inferno-radius-infinite) !important;
+    border: 1px solid var(--inferno-border-fire) !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+    position: absolute !important;
+    margin: 8% !important;
+}
+
+.itemProgressBarForeground {
+    border-radius: 0 var(--inferno-radius-infinite) var(--inferno-radius-infinite) 0 !important;
+    background: var(--inferno-border-energy) !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+    animation: progress-burn 2s ease-in-out infinite !important;
+}
+
+@keyframes progress-burn {
+    0%, 100% {
+        background: linear-gradient(90deg, var(--inferno-fire), var(--inferno-lava));
+    }
+    50% {
+        background: linear-gradient(90deg, var(--inferno-explosion), var(--inferno-flame));
+    }
+}
+
+/* Progress bars generale */
+progress, ::-webkit-progress-bar {
+    background: linear-gradient(90deg, var(--inferno-shadow), var(--inferno-darkness)) !important;
+    border: 2px solid var(--inferno-border-fire) !important;
+    border-radius: var(--inferno-radius-flame) !important;
+    overflow: hidden !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+}
+
+::-webkit-progress-value {
+    background: var(--inferno-border-energy) !important;
+    border-radius: var(--inferno-radius-flame) inherit var(--inferno-radius-flame) 0 !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+}
+
+::-moz-progress-bar {
+    background: var(--inferno-border-energy) !important;
+    border-radius: var(--inferno-radius-flame) inherit var(--inferno-radius-flame) 0 !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+}
+
+/* Slider controls cu efecte de foc */
+.mdl-slider-background-flex {
+    border-radius: var(--inferno-radius-flame) !important;
+    height: 0.5em !important;
+    margin-top: -0.25em !important;
+    background: linear-gradient(90deg, var(--inferno-shadow), var(--inferno-darkness)) !important;
+    transition: var(--inferno-transition-normal) !important;
+    border: 1px solid var(--inferno-border-fire) !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+}
+
+.mdl-slider-background-lower {
+    background: var(--inferno-border-energy) !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+}
+
+.mdl-slider::-webkit-slider-thumb {
+    background: var(--inferno-explosion) !important;
+    width: 6px !important;
+    height: 0.5em !important;
+    border-radius: var(--inferno-radius-flame) !important;
+    box-shadow: var(--inferno-glow-explosion) !important;
+    border: 2px solid var(--inferno-flame) !important;
+}
+
+.sliderContainer:hover .mdl-slider::-webkit-slider-thumb {
+    width: 0.3em !important;
+    height: 1em !important;
+    border-radius: var(--inferno-radius-flame) !important;
+    transform: scale(1.2) !important;
+    box-shadow: var(--inferno-glow-hell) !important;
+}
+
+/* ========================================
+ * 🔥 DIALOGURI ȘI FORMULARE INFERNALE (inspirat din ElegantFin)
+ * ======================================== */
+
+/* Dialoguri cu efecte dramatice */
+.dialog {
+    backdrop-filter: var(--inferno-blur-large) !important;
+    background: linear-gradient(135deg, var(--inferno-shadow), var(--inferno-darkness)) !important;
+    border: 3px solid var(--inferno-border-fire) !important;
+    border-radius: var(--inferno-radius-fire) !important;
+    box-shadow: var(--inferno-shadow-apocalypse), var(--inferno-glow-hell) !important;
+    min-width: 12em !important;
+    animation: dialog-appear 0.5s ease-out !important;
+}
+
+@keyframes dialog-appear {
+    0% {
+        transform: scale(0.8) translateY(-50px);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+    }
+}
+
+.dialog:not(.dialog-fullscreen) {
+    border-radius: var(--inferno-radius-fire) !important;
+    border: 3px solid var(--inferno-border-fire) !important;
+    box-shadow: var(--inferno-glow-hell) !important;
+}
+
+/* Input fields cu efecte de foc */
+.emby-select-withcolor,
+.emby-select,
+.emby-input,
+.emby-textarea {
+    background: linear-gradient(135deg, var(--inferno-shadow), var(--inferno-darkness)) !important;
+    border: 2px solid var(--inferno-border-fire) !important;
+    border-radius: var(--inferno-radius-flame) !important;
+    padding: 0.6em !important;
+    color: var(--inferno-text-primary) !important;
+    transition: var(--inferno-transition-normal) !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+}
+
+.emby-select-withcolor:focus,
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: var(--inferno-explosion) !important;
+    box-shadow: var(--inferno-glow-explosion) !important;
+    background: linear-gradient(135deg, var(--inferno-darkness), var(--inferno-glow)) !important;
+    outline: none !important;
+}
+
+.emby-select-withcolor:hover:not(:focus),
+.emby-input:hover:not(:focus),
+.emby-textarea:hover:not(:focus) {
+    border-color: var(--inferno-flame) !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+}
+
+/* Labels cu efecte de text */
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: var(--inferno-text-fire) !important;
+    text-shadow: 0 0 10px var(--inferno-flame) !important;
+    font-weight: bold !important;
+}
+
+/* Butoane cu design infernal */
+.emby-button.block,
+.button-alt,
+.raised {
+    color: var(--inferno-text-primary) !important;
+    border-radius: var(--inferno-radius-flame) !important;
+    background: linear-gradient(135deg, var(--inferno-fire), var(--inferno-lava)) !important;
+    border: 2px solid var(--inferno-flame) !important;
+    transition: var(--inferno-transition-fast) !important;
+    box-shadow: var(--inferno-glow-fire) !important;
+    font-weight: bold !important;
+    text-shadow: 0 0 5px var(--inferno-flame) !important;
+}
+
+.emby-button.block:hover,
+.button-alt:hover,
+.raised:hover {
+    background: linear-gradient(135deg, var(--inferno-explosion), var(--inferno-flame)) !important;
+    transform: scale(1.05) !important;
+    box-shadow: var(--inferno-glow-explosion) !important;
+}
+
+.emby-button.block:active,
+.button-alt:active,
+.raised:active {
+    transform: scale(0.98) !important;
+    box-shadow: var(--inferno-shadow-fire) !important;
+}
+
 /* Carduri pentru episoade cu design special */
 .listItemImage.listItemImage-large.itemAction.lazy {
     height: 120px !important;
@@ -2358,7 +2746,7 @@ html {
  * 🎯 Micro-interacțiuni cu feedback haptic
  * 🎭 Tema cosmic-futuristă unică și distinctă
  *
- * 🔥 TEHNOLOGII INFERNO EXTREME:
+ * 🔥 TEHNOLOGII INFERNO EXTREME + ELEGANTFIN:
  * - CSS Custom Properties cu sistem Inferno
  * - Gradient-uri de foc cu multiple culori
  * - CSS Animations cu efecte explozive
@@ -2370,8 +2758,13 @@ html {
  * - Sistem de culori roșu-portocaliu-galben agresiv
  * - Efecte hover cu explozii și impact
  * - Scrollbar animat cu flăcări
+ * - Sistem carduri responsive din ElegantFin
+ * - Progress bars cu efecte de ardere
+ * - Butoane overlay cu animații dramatice
+ * - Dialoguri cu efecte de apariție
+ * - Input fields cu focus infernal
  *
- * 🔥 DIFERENȚE RADICALE FAȚĂ DE TEMA DE BAZĂ:
+ * 🔥 DIFERENȚE RADICALE FAȚĂ DE TEMA DE BAZĂ + ELEGANTFIN:
  * 💥 Paleta de culori COMPLET DIFERITĂ (Inferno vs Standard)
  * 🌋 Fundal cu flăcări animate vs gradient static
  * ⚡ Efecte explozive vs efecte simple
@@ -2385,6 +2778,11 @@ html {
  * 🔥 Scrollbar animat cu flăcări
  * 💀 Header cu gradient de foc și efecte dramatice
  * 🌪️ Hover effects cu rotație și scale extreme
+ * 📱 Sistem responsive din ElegantFin adaptat pentru Inferno
+ * 💥 Progress bars cu efecte de ardere animate
+ * 🔥 Overlay buttons cu pulse și explosion effects
+ * ⚡ Dialoguri cu animații de apariție dramatice
+ * 🌋 Input fields cu focus effects infernale
  *
  * 💡 PERSONALIZARE NEXUS:
  * Modifică variabilele --nexus-* din secțiunea :root