Update CSS V60.0

edd.css

@@ -872,3 +872,461 @@ html {
  * 🎬 Bucură-te de cea mai frumoasă experiență Jellyfin! ✨🎨💫
  */
 
+/* ========================================
+ * 🖼️ BACKDROP IMAGES ȘI FUNDAL
+ * ======================================== */
+
+/* Backdrop image pentru pagini */
+.backdropImage {
+    opacity: 0.3 !important;
+    filter: blur(3px) brightness(0.4) !important;
+    transition: var(--transition-slow) !important;
+}
+
+/* Container pentru backdrop */
+.backdropContainer {
+    position: relative !important;
+    overflow: hidden !important;
+}
+
+/* ========================================
+ * 🎴 IMAGINI DIN CARDURI - VIZIBILE
+ * ======================================== */
+
+/* Asigură că imaginile din carduri sunt vizibile */
+.cardContent-button img,
+.cardImageContainer img,
+.itemDetailImage img,
+.cardImage img,
+.listItemImage img,
+.lazy {
+    opacity: 1 !important;
+    visibility: visible !important;
+    display: block !important;
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover !important;
+}
+
+/* Container pentru imagini */
+.cardImageContainer,
+.cardContent-button,
+.itemDetailImage {
+    position: relative !important;
+    overflow: hidden !important;
+    display: block !important;
+}
+
+/* ========================================
+ * 🧭 NAVIGARE ȘI BUTOANE HEADER
+ * ======================================== */
+
+/* Meniu lateral (drawer) */
+.mainDrawer {
+    background: var(--surface) !important;
+    backdrop-filter: var(--blur-lg) !important;
+    -webkit-backdrop-filter: var(--blur-lg) !important;
+    border-right: 1px solid var(--border-primary) !important;
+    box-shadow: var(--shadow-xl) !important;
+    transition: var(--transition-normal) !important;
+}
+
+.mainDrawer-scrollContainer {
+    color: var(--text-primary) !important;
+}
+
+/* Opțiuni din meniul lateral */
+.navMenuOption {
+    color: var(--text-secondary) !important;
+    border-radius: var(--radius-md) !important;
+    margin: 4px 8px !important;
+    padding: 12px 16px !important;
+    transition: var(--transition-normal) !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+.navMenuOption:hover {
+    background: rgba(99, 102, 241, 0.1) !important;
+    color: var(--text-primary) !important;
+    transform: translateX(4px) !important;
+}
+
+.navMenuOption-selected {
+    background: var(--primary) !important;
+    color: var(--text-primary) !important;
+    box-shadow: var(--glow-primary) !important;
+}
+
+/* Iconițe în meniu */
+.navMenuOption .material-icons,
+.navMenuOption .md-icon {
+    margin-right: 12px !important;
+    opacity: 0.8 !important;
+}
+
+/* Butoane utilizator în header */
+.headerUserButton,
+.headerButton {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-width: 40px !important;
+    height: 40px !important;
+    border-radius: var(--radius-md) !important;
+    transition: var(--transition-normal) !important;
+}
+
+.headerUserButton:hover,
+.headerButton:hover {
+    background: rgba(99, 102, 241, 0.1) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* Avatar utilizator */
+.headerUserButton img {
+    width: 32px !important;
+    height: 32px !important;
+    border-radius: var(--radius-full) !important;
+    border: 2px solid var(--border-accent) !important;
+}
+
+/* ========================================
+ * 📋 LISTE ȘI ELEMENTE
+ * ======================================== */
+
+/* Liste generale */
+.paperList {
+    background: var(--surface) !important;
+    border-radius: var(--radius-xl) !important;
+    border: 1px solid var(--border-primary) !important;
+    backdrop-filter: var(--blur-sm) !important;
+    -webkit-backdrop-filter: var(--blur-sm) !important;
+}
+
+/* Elemente din listă */
+.listItem {
+    border-bottom: 1px solid var(--border-secondary) !important;
+    transition: var(--transition-normal) !important;
+    padding: 12px 16px !important;
+}
+
+.listItem:hover {
+    background: rgba(99, 102, 241, 0.05) !important;
+    transform: translateX(4px) !important;
+}
+
+.listItem:last-child {
+    border-bottom: none !important;
+}
+
+/* Text din liste */
+.listItemBodyText {
+    color: var(--text-primary) !important;
+    font-weight: 500 !important;
+}
+
+.secondary.listItemBodyText {
+    color: var(--text-secondary) !important;
+    font-weight: 400 !important;
+}
+
+/* ========================================
+ * 🎮 CONTROALE VIDEO ȘI PLAYER
+ * ======================================== */
+
+/* Bara de progres video */
+.nowPlayingBar {
+    background: var(--surface) !important;
+    backdrop-filter: var(--blur-lg) !important;
+    -webkit-backdrop-filter: var(--blur-lg) !important;
+    border-top: 1px solid var(--border-primary) !important;
+    box-shadow: var(--shadow-lg) !important;
+}
+
+/* Controale player */
+.nowPlayingBarCenter {
+    color: var(--text-primary) !important;
+}
+
+.nowPlayingBarCenter .material-icons {
+    color: var(--text-primary) !important;
+    transition: var(--transition-normal) !important;
+}
+
+.nowPlayingBarCenter .material-icons:hover {
+    color: var(--primary) !important;
+    transform: scale(1.1) !important;
+}
+
+/* Controale video cu glassmorphism */
+.videoOsdBottom {
+    background: var(--surface) !important;
+    backdrop-filter: var(--blur-lg) !important;
+    -webkit-backdrop-filter: var(--blur-lg) !important;
+    border-top: 1px solid var(--border-primary) !important;
+    padding: 16px !important;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
+}
+
+/* ========================================
+ * 📄 PAGINA DE LOGIN
+ * ======================================== */
+
+/* Container pentru pagina de login */
+#loginPage {
+    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
+    position: relative !important;
+    min-height: 100vh !important;
+}
+
+/* Overlay pentru pagina de login */
+#loginPage::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(15, 23, 42, 0.8);
+    backdrop-filter: var(--blur-sm);
+    -webkit-backdrop-filter: var(--blur-sm);
+    z-index: 1;
+}
+
+/* Formular de login cu glassmorphism */
+#loginPage .readOnlyContent,
+#loginPage form {
+    max-width: 420px !important;
+    width: 90% !important;
+    background: var(--surface) !important;
+    backdrop-filter: var(--blur-lg) !important;
+    -webkit-backdrop-filter: var(--blur-lg) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-2xl) !important;
+    padding: 48px 32px !important;
+    box-shadow: var(--shadow-2xl) !important;
+    position: relative;
+    z-index: 2;
+    animation: dialog-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+}
+
+/* Titlu login */
+#loginPage h1 {
+    color: var(--primary) !important;
+    text-align: center !important;
+    margin-bottom: 32px !important;
+    font-weight: 600 !important;
+    font-size: 2rem !important;
+}
+
+/* Ascunde butoanele nedorite */
+#loginPage .raised.cancel.block.btnManual.emby-button,
+#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
+    display: none !important;
+}
+
+/* ========================================
+ * 🎯 ÎMBUNĂTĂȚIRI PENTRU ACCESIBILITATE
+ * ======================================== */
+
+/* Focus states pentru accesibilitate */
+.emby-button:focus,
+.headerButton:focus,
+.emby-input:focus,
+.emby-tab-button:focus,
+.navMenuOption:focus {
+    outline: 2px solid var(--primary) !important;
+    outline-offset: 2px !important;
+}
+
+/* Smooth scroll pentru toată aplicația */
+html {
+    scroll-behavior: smooth !important;
+}
+
+/* Reduce motion pentru utilizatorii sensibili */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* ========================================
+ * 📱 ÎMBUNĂTĂȚIRI PENTRU MOBILE
+ * ======================================== */
+
+/* Afișează linkurile externe pe mobile */
+.layout-mobile .itemExternalLinks {
+    display: block !important;
+}
+
+/* Link-uri externe stilizate */
+.itemExternalLinks a {
+    background: rgba(99, 102, 241, 0.1) !important;
+    color: var(--primary) !important;
+    border: 1px solid var(--border-accent) !important;
+    border-radius: var(--radius-md) !important;
+    padding: 8px 12px !important;
+    margin: 4px !important;
+    transition: var(--transition-normal) !important;
+    text-decoration: none !important;
+    font-weight: 500 !important;
+    display: inline-block !important;
+}
+
+.itemExternalLinks a:hover {
+    background: var(--primary) !important;
+    color: var(--text-primary) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: var(--shadow-md) !important;
+}
+
+/* ========================================
+ * 🔧 OPTIMIZĂRI PENTRU PERFORMANȚĂ
+ * ======================================== */
+
+/* Optimizări GPU pentru animații */
+.cardBox,
+.emby-button,
+.headerButton,
+.emby-tab-button,
+.navMenuOption {
+    will-change: transform, box-shadow !important;
+}
+
+/* Optimizări pentru scroll */
+.backgroundContainer,
+.mainDrawer,
+.skinHeader {
+    will-change: transform !important;
+}
+
+/* ========================================
+ * 🎨 ÎMBUNĂTĂȚIRI FINALE
+ * ======================================== */
+
+/* Asigură că toate elementele au tranziții */
+* {
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
+}
+
+/* Îmbunătățiri pentru hover pe liste */
+.listItem:hover {
+    background: var(--surface-hover) !important;
+    border-radius: var(--radius-md) !important;
+}
+
+/* Cast & Crew cards moderne */
+.personCard {
+    background: var(--surface) !important;
+    border: 1px solid var(--border-primary) !important;
+    border-radius: var(--radius-lg) !important;
+    transition: var(--transition-normal) !important;
+    padding: 12px !important;
+}
+
+.personCard:hover {
+    transform: translateY(-2px) scale(1.02) !important;
+    box-shadow: var(--shadow-lg) !important;
+    border-color: var(--border-accent) !important;
+}
+
+/* Îmbunătățiri pentru secțiuni */
+.sectionTitleContainer h2 {
+    color: var(--primary) !important;
+    font-weight: 600 !important;
+    font-size: 1.5rem !important;
+    margin-bottom: 16px !important;
+}
+
+/* Next Up și Similar sections */
+div.nextUpSection,
+#similarCollapsible {
+    background: var(--surface) !important;
+    border-radius: var(--radius-xl) !important;
+    padding: 20px !important;
+    margin: 16px 0 !important;
+    border: 1px solid var(--border-primary) !important;
+    backdrop-filter: var(--blur-sm) !important;
+    -webkit-backdrop-filter: var(--blur-sm) !important;
+}
+
+/* Carousel și scrolling îmbunătățit */
+@media all and (min-width: 50em) {
+    .homePage .emby-scroller {
+        margin-right: 0;
+    }
+
+    .homePage .emby-scrollbuttons {
+        display: none;
+    }
+
+    .homePage .itemsContainer {
+        flex-wrap: wrap;
+    }
+}
+
+/* Butoane scroll stilizate */
+.emby-scrollbuttons-button {
+    background: var(--primary) !important;
+    color: var(--text-primary) !important;
+    border-radius: var(--radius-full) !important;
+    transition: var(--transition-normal) !important;
+}
+
+.emby-scrollbuttons-button:hover {
+    background: var(--primary-hover) !important;
+    transform: scale(1.1) !important;
+    box-shadow: var(--glow-primary) !important;
+}
+
+/* Loading animations moderne */
+.mdl-spinner {
+    border-color: var(--primary) !important;
+}
+
+.loading-spinner {
+    border: 3px solid var(--border-primary) !important;
+    border-top: 3px solid var(--primary) !important;
+    border-radius: var(--radius-full) !important;
+    animation: spin 1s linear infinite !important;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* ========================================
+ * 📋 INFORMAȚII FINALE
+ * ======================================== */
+
+/*
+ * 🎨 JELLYFIN MODERN PROFESSIONAL THEME v6.0 - FIXED
+ *
+ * ✅ PROBLEME REZOLVATE:
+ * - Imaginile din carduri sunt acum vizibile
+ * - Backdrop images funcționează corect
+ * - Butoanele de navigare sunt restaurate
+ * - Avatar utilizator este vizibil
+ * - Meniul lateral funcționează complet
+ *
+ * ✨ CARACTERISTICI:
+ * - Design modern cu glassmorphism
+ * - Culori neutre elegante
+ * - Animații subtile și fluide
+ * - Responsive design perfect
+ * - Optimizat pentru performanță
+ * - Accesibilitate îmbunătățită
+ *
+ * 📋 INSTALARE:
+ * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css');
+ *
+ * 🎬 Bucură-te de experiența Jellyfin modernă și profesională! ✨
+ */
+