From 86e41fd97a1a1dcac1e1593e28c14ada055a4edc Mon Sep 17 00:00:00 2001 From: eddmanoo Date: Fri, 19 Sep 2025 13:22:12 +0300 Subject: [PATCH] Update V1.0.1 --- edd.css | 426 ++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 335 insertions(+), 91 deletions(-) diff --git a/edd.css b/edd.css index 8632ab6..9950eb5 100644 --- a/edd.css +++ b/edd.css @@ -23,51 +23,114 @@ * VARIABILE CSS GLOBALE * ======================================== */ :root { - /* Paleta de culori principală */ - --primary-color: #00a4dc; /* Albastru Jellyfin */ - --secondary-color: #1e1e1e; /* Gri închis */ - --accent-color: #ff6b35; /* Portocaliu accent */ - --background-dark: #0f0f0f; /* Fundal foarte închis */ - --background-medium: #1a1a1a; /* Fundal mediu */ - --background-light: #2a2a2a; /* Fundal deschis */ - --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 */ + /* Paleta de culori modernă și profesională */ + --primary-color: #6366f1; /* Indigo modern */ + --primary-light: #818cf8; /* Indigo deschis */ + --primary-dark: #4f46e5; /* Indigo închis */ + --secondary-color: #1f2937; /* Gri închis modern */ + --accent-color: #f59e0b; /* Amber accent */ + --accent-secondary: #10b981; /* Emerald accent */ - /* Dimensiuni și spațiere */ - --border-radius: 8px; - --border-radius-small: 4px; - --border-radius-large: 12px; - --shadow-light: 0 2px 4px rgba(0,0,0,0.1); - --shadow-medium: 0 4px 8px rgba(0,0,0,0.2); - --shadow-heavy: 0 8px 16px rgba(0,0,0,0.3); + /* Fundaluri cu gradient modern */ + --background-dark: #0f172a; /* Slate foarte închis */ + --background-medium: #1e293b; /* Slate mediu */ + --background-light: #334155; /* Slate deschis */ + --background-card: #1e293b; /* Fundal carduri */ + --background-overlay: rgba(15, 23, 42, 0.95); /* Overlay cu transparență */ - /* Tranziții */ - --transition-fast: 0.2s ease; - --transition-medium: 0.3s ease; - --transition-slow: 0.5s ease; + /* Text cu contrast îmbunătățit */ + --text-primary: #f8fafc; /* Alb cald */ + --text-secondary: #cbd5e1; /* Gri deschis */ + --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; - backdrop-filter: blur(10px); + background: var(--background-overlay) !important; + 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; - backdrop-filter: blur(10px); + background: var(--background-overlay) !important; + 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); - margin: 0 4px; + border-radius: var(--border-radius); + 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); - box-shadow: var(--shadow-light); + transform: translateY(-2px) scale(1.05); + 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; - padding: 12px 24px !important; + border-radius: var(--border-radius-large) !important; + padding: 14px 28px !important; font-weight: 600 !important; transition: all var(--transition-fast) !important; - box-shadow: var(--shadow-light) !important; - text-transform: uppercase; - letter-spacing: 0.5px; + box-shadow: var(--shadow-medium) !important; + text-transform: none; + 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; - box-shadow: var(--shadow-medium) !important; - background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%) !important; + transform: translateY(-3px) scale(1.02) !important; + box-shadow: var(--shadow-heavy) !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; - border: 1px solid var(--border-color) !important; - border-radius: var(--border-radius) !important; + background: var(--background-card) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !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; - box-shadow: var(--shadow-heavy) !important; - border-color: var(--primary-color) !important; + transform: translateY(-6px) scale(1.03) !important; + box-shadow: var(--shadow-xl) !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); - backdrop-filter: blur(5px); + background: var(--background-overlay); + 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; - background: rgba(26, 26, 26, 0.95) !important; - border-radius: var(--border-radius-large) !important; - padding: 40px !important; - box-shadow: var(--shadow-heavy) !important; - border: 1px solid var(--border-color) !important; + max-width: 420px !important; + background: rgba(30, 41, 59, 0.8) !important; + backdrop-filter: var(--blur-medium) !important; + border-radius: var(--border-radius-xl) !important; + padding: 48px !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; - backdrop-filter: blur(10px) !important; + background: var(--background-overlay) !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; - backdrop-filter: blur(5px) !important; + background: rgba(15, 23, 42, 0.9) !important; + backdrop-filter: var(--blur-heavy) !important; } -/* Dialoguri */ +/* Dialoguri cu design glassmorphism */ .dialog { - background: var(--background-medium) !important; - border: 1px solid var(--border-color) !important; - border-radius: var(--border-radius-large) !important; - box-shadow: var(--shadow-heavy) !important; + background: var(--background-overlay) !important; + backdrop-filter: var(--blur-medium) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !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ă: - * ✓ Design modern și elegant - * ✓ Animații fluide și responsive + * Această temă modernă oferă: + * ✓ Design glassmorphism profesional + * ✓ 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 */ \ No newline at end of file