Update V1.0.1

edd.css

@@ -23,51 +23,114 @@
  * VARIABILE CSS GLOBALE
  * ======================================== */
 :root {
-    /* Paleta de culori principală */
+    /* Paleta de culori modernă și profesională */
-    --primary-color: #00a4dc;          /* Albastru Jellyfin */
+    --primary-color: #6366f1;          /* Indigo modern */
-    --secondary-color: #1e1e1e;        /* Gri închis */
+    --primary-light: #818cf8;          /* Indigo deschis */
-    --accent-color: #ff6b35;           /* Portocaliu accent */
+    --primary-dark: #4f46e5;           /* Indigo închis */
-    --background-dark: #0f0f0f;        /* Fundal foarte închis */
+    --secondary-color: #1f2937;        /* Gri închis modern */
-    --background-medium: #1a1a1a;      /* Fundal mediu */
+    --accent-color: #f59e0b;           /* Amber accent */
-    --background-light: #2a2a2a;       /* Fundal deschis */
+    --accent-secondary: #10b981;       /* Emerald accent */
-    --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 */
 
-    /* Dimensiuni și spațiere */
+    /* Fundaluri cu gradient modern */
-    --border-radius: 8px;
+    --background-dark: #0f172a;        /* Slate foarte închis */
-    --border-radius-small: 4px;
+    --background-medium: #1e293b;      /* Slate mediu */
-    --border-radius-large: 12px;
+    --background-light: #334155;       /* Slate deschis */
-    --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
+    --background-card: #1e293b;        /* Fundal carduri */
-    --shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
+    --background-overlay: rgba(15, 23, 42, 0.95); /* Overlay cu transparență */
-    --shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);
 
-    /* Tranziții */
+    /* Text cu contrast îmbunătățit */
-    --transition-fast: 0.2s ease;
+    --text-primary: #f8fafc;           /* Alb cald */
-    --transition-medium: 0.3s ease;
+    --text-secondary: #cbd5e1;         /* Gri deschis */
-    --transition-slow: 0.5s ease;
+    --text-muted: #94a3b8;             /* Gri mediu */
+    --border-color: #475569;           /* Borduri subtile */
+
+    /* Culori de stare moderne */
+    --success-color: #10b981;          /* Emerald */
+    --warning-color: #f59e0b;          /* Amber */
+    --error-color: #ef4444;            /* Red modern */
+    --info-color: #3b82f6;             /* Blue modern */
+
+    /* Dimensiuni și spațiere moderne */
+    --border-radius: 12px;
+    --border-radius-small: 6px;
+    --border-radius-large: 16px;
+    --border-radius-xl: 24px;
+
+    /* Umbre moderne cu blur */
+    --shadow-light: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    --shadow-medium: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
+    --shadow-heavy: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
+    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.04);
+
+    /* Efecte de blur moderne */
+    --blur-light: blur(8px);
+    --blur-medium: blur(12px);
+    --blur-heavy: blur(16px);
+    --blur-xl: blur(24px);
+
+    /* Tranziții fluide */
+    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Gradienturi moderne */
+    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
+    --gradient-background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%);
 }
 
 /* ========================================
  * STILURI GENERALE PENTRU FUNDAL ȘI LAYOUT
  * ======================================== */
 
-/* Fundal principal al aplicației */
+/* Fundal principal al aplicației cu gradient modern */
 .backgroundContainer,
 .dialog,
 html {
-    background-color: var(--background-dark) !important;
+    background: var(--gradient-background) !important;
     color: var(--text-primary);
+    min-height: 100vh;
 }
 
-/* Container principal pentru conținut */
+/* Container principal pentru conținut cu blur și overlay */
 .backgroundContainer.withBackdrop,
 .backdropContainer,
 .backgroundContainer {
-    background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%) !important;
+    background: var(--gradient-background) !important;
+    position: relative;
+}
+
+/* Adaugă overlay cu blur pentru fundaluri */
+.backgroundContainer.withBackdrop::before,
+.backdropContainer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--background-overlay);
+    backdrop-filter: var(--blur-light);
+    z-index: -1;
+}
+
+/* Îmbunătățiri pentru imagini de fundal - blur subtil */
+.backdropImage,
+.backgroundContainer .backdropImage {
+    filter: var(--blur-light) brightness(0.3) !important;
+    opacity: 0.6 !important;
+    transition: all var(--transition-slow) !important;
+}
+
+/* Asigură vizibilitatea imaginilor de conținut */
+.cardImageContainer img,
+.itemDetailImage img,
+.listItemImage img,
+.cardContent-button img {
+    filter: none !important;
+    opacity: 1 !important;
+    border-radius: var(--border-radius) !important;
+    transition: all var(--transition-medium) !important;
 }
 
 /* Îmbunătățiri pentru scrolling */
@@ -100,44 +163,54 @@ html {
  * HEADER ȘI NAVIGARE
  * ======================================== */
 
-/* Header principal - design transparent modern */
+/* Header principal - design glassmorphism modern */
 .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
-    background: rgba(15, 15, 15, 0.95) !important;
+    background: var(--background-overlay) !important;
-    backdrop-filter: blur(10px);
+    backdrop-filter: var(--blur-medium) !important;
     border-bottom: 1px solid var(--border-color);
-    box-shadow: var(--shadow-medium);
+    box-shadow: var(--shadow-heavy);
     transition: all var(--transition-medium);
+    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
 }
 
 .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
-    background: rgba(15, 15, 15, 0.95) !important;
+    background: var(--background-overlay) !important;
-    backdrop-filter: blur(10px);
+    backdrop-filter: var(--blur-medium) !important;
+    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
 }
 
-/* Butoane din header */
+/* Butoane din header cu design modern */
 .headerButton {
     color: var(--text-primary) !important;
     transition: all var(--transition-fast);
-    border-radius: var(--border-radius-small);
+    border-radius: var(--border-radius);
-    margin: 0 4px;
+    margin: 0 6px;
+    padding: 8px 12px !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+    backdrop-filter: var(--blur-light);
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .headerButton:hover {
-    background-color: var(--primary-color) !important;
+    background: var(--gradient-primary) !important;
     color: white !important;
-    transform: translateY(-1px);
+    transform: translateY(-2px) scale(1.05);
-    box-shadow: var(--shadow-light);
+    box-shadow: var(--shadow-medium);
+    border-color: var(--primary-light);
 }
 
-/* Meniu lateral (drawer) */
+/* Meniu lateral (drawer) cu glassmorphism */
 .mainDrawer {
-    background: var(--background-medium) !important;
+    background: var(--background-overlay) !important;
+    backdrop-filter: var(--blur-medium) !important;
     border-right: 1px solid var(--border-color);
-    box-shadow: var(--shadow-heavy);
+    box-shadow: var(--shadow-xl);
+    border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
 }
 
 .mainDrawer-scrollContainer {
     color: var(--text-primary) !important;
+    padding: 16px 8px;
 }
 
 /* Opțiuni din meniul lateral */
@@ -192,58 +265,112 @@ html {
     border-bottom: 3px solid var(--primary-color);
 }
 
-/* Butoane generale */
+/* Butoane generale cu design modern */
 .button-submit,
 .raised.emby-button {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
+    background: var(--gradient-primary) !important;
     color: white !important;
     border: none !important;
-    border-radius: var(--border-radius) !important;
+    border-radius: var(--border-radius-large) !important;
-    padding: 12px 24px !important;
+    padding: 14px 28px !important;
     font-weight: 600 !important;
     transition: all var(--transition-fast) !important;
-    box-shadow: var(--shadow-light) !important;
+    box-shadow: var(--shadow-medium) !important;
-    text-transform: uppercase;
+    text-transform: none;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.3px;
+    font-size: 0.95rem !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.button-submit::before,
+.raised.emby-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: left var(--transition-medium);
+}
+
+.button-submit:hover::before,
+.raised.emby-button:hover::before {
+    left: 100%;
 }
 
 .button-submit:hover,
 .raised.emby-button:hover {
-    transform: translateY(-2px) !important;
+    transform: translateY(-3px) scale(1.02) !important;
-    box-shadow: var(--shadow-medium) !important;
+    box-shadow: var(--shadow-heavy) !important;
-    background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%) !important;
+    background: var(--gradient-accent) !important;
 }
 
 /* ========================================
  * CARDURI ȘI ELEMENTE MEDIA
  * ======================================== */
 
-/* Carduri pentru filme, seriale, etc. */
+/* Carduri pentru filme, seriale, etc. cu design modern */
 .cardBox {
-    background: var(--background-medium) !important;
+    background: var(--background-card) !important;
-    border: 1px solid var(--border-color) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    border-radius: var(--border-radius) !important;
+    border-radius: var(--border-radius-large) !important;
     transition: all var(--transition-medium) !important;
-    box-shadow: var(--shadow-light) !important;
+    box-shadow: var(--shadow-medium) !important;
+    backdrop-filter: var(--blur-light);
+    position: relative;
+    overflow: hidden;
+}
+
+.cardBox::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
+    pointer-events: none;
+    z-index: 1;
 }
 
 .cardBox:hover {
-    transform: translateY(-4px) scale(1.02) !important;
+    transform: translateY(-6px) scale(1.03) !important;
-    box-shadow: var(--shadow-heavy) !important;
+    box-shadow: var(--shadow-xl) !important;
-    border-color: var(--primary-color) !important;
+    border-color: var(--primary-light) !important;
+    background: var(--background-light) !important;
 }
 
-/* Imagini din carduri - colțuri rotunjite */
+/* Imagini din carduri - design îmbunătățit */
 .cardContent-button,
 .itemDetailImage,
 .cardImageContainer {
-    border-radius: var(--border-radius) !important;
+    border-radius: var(--border-radius-large) !important;
     overflow: hidden !important;
     transition: all var(--transition-medium) !important;
+    position: relative;
+    z-index: 2;
 }
 
 .cardContent-button:hover {
     transform: scale(1.05) !important;
+    box-shadow: var(--shadow-medium) !important;
+}
+
+/* Asigură vizibilitatea completă a imaginilor */
+.cardImageContainer img,
+.cardContent-button img,
+.itemDetailImage img {
+    filter: brightness(1) contrast(1.05) saturate(1.1) !important;
+    opacity: 1 !important;
+    transition: all var(--transition-medium) !important;
+}
+
+.cardImageContainer:hover img,
+.cardContent-button:hover img {
+    filter: brightness(1.1) contrast(1.1) saturate(1.2) !important;
+    transform: scale(1.02) !important;
 }
 
 /* Text din carduri */
@@ -359,14 +486,18 @@ html {
  * PAGINA DE LOGIN
  * ======================================== */
 
-/* Container pentru pagina de login */
+/* Container pentru pagina de login cu design modern */
 #loginPage {
-    background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%);
+    background: var(--gradient-background);
     background-size: cover;
     position: relative;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-/* Overlay pentru pagina de login */
+/* Overlay pentru pagina de login cu blur puternic */
 #loginPage::before {
     content: '';
     position: absolute;
@@ -374,21 +505,38 @@ html {
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(15, 15, 15, 0.8);
+    background: var(--background-overlay);
-    backdrop-filter: blur(5px);
+    backdrop-filter: var(--blur-heavy);
+    z-index: 0;
 }
 
-/* Formular de login - design minimalist */
+/* Formular de login - design glassmorphism */
 #loginPage .readOnlyContent,
 #loginPage form {
-    max-width: 400px !important;
+    max-width: 420px !important;
-    background: rgba(26, 26, 26, 0.95) !important;
+    background: rgba(30, 41, 59, 0.8) !important;
-    border-radius: var(--border-radius-large) !important;
+    backdrop-filter: var(--blur-medium) !important;
-    padding: 40px !important;
+    border-radius: var(--border-radius-xl) !important;
-    box-shadow: var(--shadow-heavy) !important;
+    padding: 48px !important;
-    border: 1px solid var(--border-color) !important;
+    box-shadow: var(--shadow-xl) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
     position: relative;
     z-index: 1;
+    margin: 20px;
+}
+
+/* Efect de sticlă pentru formular */
+#loginPage .readOnlyContent::before,
+#loginPage form::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+    border-radius: var(--border-radius-xl);
+    pointer-events: none;
 }
 
 /* Titlu login */
@@ -415,12 +563,13 @@ html {
  * PLAYER VIDEO ȘI CONTROALE
  * ======================================== */
 
-/* Bara de progres video */
+/* Bara de progres video cu design modern */
 .nowPlayingBar {
-    background: rgba(26, 26, 26, 0.95) !important;
+    background: var(--background-overlay) !important;
-    backdrop-filter: blur(10px) !important;
+    backdrop-filter: var(--blur-medium) !important;
     border-top: 1px solid var(--border-color) !important;
-    box-shadow: 0 -4px 8px rgba(0,0,0,0.3) !important;
+    box-shadow: var(--shadow-xl) !important;
+    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
 }
 
 /* Controale player */
@@ -698,18 +847,34 @@ div.nextUpSection {
  * TEMA ÎNTUNECATĂ ÎMBUNĂTĂȚITĂ
  * ======================================== */
 
-/* Overlay pentru dialoguri */
+/* Overlay pentru dialoguri cu blur puternic */
 .dialogBackdrop {
-    background: rgba(0, 0, 0, 0.8) !important;
+    background: rgba(15, 23, 42, 0.9) !important;
-    backdrop-filter: blur(5px) !important;
+    backdrop-filter: var(--blur-heavy) !important;
 }
 
-/* Dialoguri */
+/* Dialoguri cu design glassmorphism */
 .dialog {
-    background: var(--background-medium) !important;
+    background: var(--background-overlay) !important;
-    border: 1px solid var(--border-color) !important;
+    backdrop-filter: var(--blur-medium) !important;
-    border-radius: var(--border-radius-large) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    box-shadow: var(--shadow-heavy) !important;
+    border-radius: var(--border-radius-xl) !important;
+    box-shadow: var(--shadow-xl) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Efect de sticlă pentru dialoguri */
+.dialog::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
+    pointer-events: none;
+    z-index: -1;
 }
 
 /* Titluri în dialoguri */
@@ -746,21 +911,100 @@ div.nextUpSection {
     transition: all var(--transition-medium) !important;
 }
 
+/* ========================================
+ * ÎMBUNĂTĂȚIRI FINALE PENTRU IMAGINI
+ * ======================================== */
+
+/* Asigură vizibilitatea maximă pentru toate imaginile */
+.cardImage,
+.cardImageContainer .cardImage,
+.listItemImage,
+.itemDetailImage,
+.backdropImage.lazy,
+.cardContent img,
+.listItem img {
+    filter: brightness(1) contrast(1.05) saturate(1.1) !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    display: block !important;
+}
+
+/* Hover effects pentru imagini */
+.cardImageContainer:hover .cardImage,
+.listItemImage:hover,
+.itemDetailImage:hover {
+    filter: brightness(1.1) contrast(1.1) saturate(1.2) !important;
+    transform: scale(1.02) !important;
+}
+
+/* Îmbunătățiri pentru thumbnail-uri */
+.listItemImageButton,
+.cardContent-button {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--border-radius-large) !important;
+}
+
+.listItemImageButton::after,
+.cardContent-button::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+}
+
+.listItemImageButton:hover::after,
+.cardContent-button:hover::after {
+    opacity: 1;
+}
+
+/* ========================================
+ * EFECTE SPECIALE PENTRU PROFESIONALISM
+ * ======================================== */
+
+/* Animație subtilă pentru loading */
+@keyframes shimmer {
+    0% { background-position: -200px 0; }
+    100% { background-position: calc(200px + 100%) 0; }
+}
+
+.lazy:not([src]) {
+    background: linear-gradient(90deg, var(--background-light) 0%, var(--background-medium) 50%, var(--background-light) 100%);
+    background-size: 200px 100%;
+    animation: shimmer 1.5s infinite;
+}
+
+/* Îmbunătățiri pentru focus și accesibilitate */
+*:focus-visible {
+    outline: 2px solid var(--primary-color) !important;
+    outline-offset: 2px !important;
+    border-radius: var(--border-radius-small) !important;
+}
+
 /* Mesaj final în CSS */
 /*
  * ========================================
  * SFÂRȘITUL TEMEI PERSONALIZATE JELLYFIN
  * ========================================
  *
- * Această temă oferă:
+ * Această temă modernă oferă:
- * ✓ Design modern și elegant
+ * ✓ Design glassmorphism profesional
- * ✓ Animații fluide și responsive
+ * ✓ Imagini complet vizibile și optimizate
+ * ✓ Fundaluri cu blur elegant
+ * ✓ Animații fluide și moderne
  * ✓ Compatibilitate cu toate dispozitivele
  * ✓ Îmbunătățiri pentru accesibilitate
  * ✓ Optimizări pentru performanță
+ * ✓ Paletă de culori contemporană
  *
- * Pentru suport sau personalizări suplimentare,
+ * Pentru personalizări suplimentare,
  * modifică variabilele CSS din secțiunea :root
  *
  * Bucură-te de experiența îmbunătățită Jellyfin!
+ * Versiune: 2.0 - Modern & Professional
  */