From f811637519cfb8deb090ac79e0d94732686a270a Mon Sep 17 00:00:00 2001 From: eddmanoo Date: Fri, 19 Sep 2025 14:33:13 +0300 Subject: [PATCH] Updat CSS V1.0.0 --- edd.css | 622 +++++++++++++------------------------------------------- 1 file changed, 143 insertions(+), 479 deletions(-) diff --git a/edd.css b/edd.css index 2ab7e49..8632ab6 100644 --- a/edd.css +++ b/edd.css @@ -23,116 +23,51 @@ * VARIABILE CSS GLOBALE * ======================================== */ :root { - /* 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 */ + /* 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 */ - /* 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ță */ + /* 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); - /* 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%); + /* Tranziții */ + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; } /* ======================================== - * ELIMINĂ TOATE MODIFICĂRILE DE FUNDAL - LASĂ JELLYFIN SĂ GESTIONEZE + * STILURI GENERALE PENTRU FUNDAL ȘI LAYOUT * ======================================== */ -/* NU modifica fundalul deloc - lasă Jellyfin să-l gestioneze */ - -/* ======================================== - * FORȚEAZĂ VIZIBILITATEA IMAGINILOR - REGULI PUTERNICE - * ======================================== */ - -/* Toate imaginile trebuie să fie vizibile */ -img, -.cardImage, -.cardImageContainer img, -.cardContent-button img, -.itemDetailImage img, -.listItemImage img, -.cardContent img, -.listItem img, -.cardScalable img, -.cardOverlayContainer img, -.listItemImageButton img, -.userImage, -.headerUserImage, -.headerUserButton img, -.lazy { - filter: none !important; - opacity: 1 !important; - visibility: visible !important; - display: none !important; - backdrop-filter: none !important; - -webkit-filter: none !important; - -webkit-backdrop-filter: none !important; - max-width: 100% !important; - height: auto !important; +/* Fundal principal al aplicației */ +.backgroundContainer, +.dialog, +html { + background-color: var(--background-dark) !important; + color: var(--text-primary); } -/* Elimină orice overlay care ar putea ascunde imaginile */ -.cardImageContainer::before, -.cardContent-button::before, -.cardOverlayContainer::before { - display: none !important; -} - -/* Asigură că containerele imaginilor nu au probleme */ -.cardImageContainer, -.cardContent-button, -.cardScalable, -.cardOverlayContainer, -.listItemImageButton { - overflow: visible !important; - background: transparent !important; - filter: none !important; - backdrop-filter: none !important; +/* Container principal pentru conținut */ +.backgroundContainer.withBackdrop, +.backdropContainer, +.backgroundContainer { + background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%) !important; } /* Îmbunătățiri pentru scrolling */ @@ -165,25 +100,45 @@ img, * HEADER ȘI NAVIGARE * ======================================== */ -/* Header - NU modifica fundalul, lasă Jellyfin să gestioneze */ +/* Header principal - design transparent modern */ +.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred { + background: rgba(15, 15, 15, 0.95) !important; + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border-color); + box-shadow: var(--shadow-medium); + transition: all var(--transition-medium); +} -/* Butoane din header - design simplu */ +.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader { + background: rgba(15, 15, 15, 0.95) !important; + backdrop-filter: blur(10px); +} + +/* Butoane din header */ .headerButton { + color: var(--text-primary) !important; transition: all var(--transition-fast); - border-radius: var(--border-radius); - margin: 0 6px; - padding: 8px 12px !important; + border-radius: var(--border-radius-small); + margin: 0 4px; } .headerButton:hover { - background: var(--gradient-primary) !important; + background-color: var(--primary-color) !important; color: white !important; - transform: translateY(-2px) scale(1.05); - box-shadow: var(--shadow-medium); - border-color: var(--primary-light); + transform: translateY(-1px); + box-shadow: var(--shadow-light); } -/* Meniu lateral - NU modifica fundalul */ +/* Meniu lateral (drawer) */ +.mainDrawer { + background: var(--background-medium) !important; + border-right: 1px solid var(--border-color); + box-shadow: var(--shadow-heavy); +} + +.mainDrawer-scrollContainer { + color: var(--text-primary) !important; +} /* Opțiuni din meniul lateral */ .navMenuOption { @@ -237,105 +192,58 @@ img, border-bottom: 3px solid var(--primary-color); } -/* Butoane generale cu design modern */ +/* Butoane generale */ .button-submit, .raised.emby-button { - background: var(--gradient-primary) !important; + background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important; color: white !important; border: none !important; - border-radius: var(--border-radius-large) !important; - padding: 14px 28px !important; + border-radius: var(--border-radius) !important; + padding: 12px 24px !important; font-weight: 600 !important; transition: all var(--transition-fast) !important; - 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%; + box-shadow: var(--shadow-light) !important; + text-transform: uppercase; + letter-spacing: 0.5px; } .button-submit:hover, .raised.emby-button:hover { - transform: translateY(-3px) scale(1.02) !important; - box-shadow: var(--shadow-heavy) !important; - background: var(--gradient-accent) !important; + transform: translateY(-2px) !important; + box-shadow: var(--shadow-medium) !important; + background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%) !important; } /* ======================================== * CARDURI ȘI ELEMENTE MEDIA * ======================================== */ -/* Carduri - design simplu fără modificări de fundal */ +/* Carduri pentru filme, seriale, etc. */ .cardBox { - border-radius: var(--border-radius-large) !important; + background: var(--background-medium) !important; + border: 1px solid var(--border-color) !important; + border-radius: var(--border-radius) !important; transition: all var(--transition-medium) !important; - position: relative; + box-shadow: var(--shadow-light) !important; } -/* Elimină overlay-ul care poate ascunde imaginile */ - .cardBox:hover { - transform: translateY(-6px) scale(1.03) !important; - box-shadow: var(--shadow-xl) !important; - border-color: var(--primary-light) !important; - background: var(--background-light) !important; + transform: translateY(-4px) scale(1.02) !important; + box-shadow: var(--shadow-heavy) !important; + border-color: var(--primary-color) !important; } -/* Imagini din carduri - design îmbunătățit */ +/* Imagini din carduri - colțuri rotunjite */ .cardContent-button, .itemDetailImage, .cardImageContainer { - border-radius: var(--border-radius-large) !important; + border-radius: var(--border-radius) !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 - FĂRĂ BLUR */ -.cardImageContainer img, -.cardContent-button img, -.itemDetailImage img, -.cardImage, -.listItemImage img, -.lazy img { - filter: none !important; - opacity: 1 !important; - visibility: visible !important; - backdrop-filter: none !important; - -webkit-filter: none !important; - transition: transform var(--transition-medium) !important; -} - -.cardImageContainer:hover img, -.cardContent-button:hover img, -.listItemImage:hover img { - filter: none !important; - transform: scale(1.02) !important; - opacity: 1 !important; } /* Text din carduri */ @@ -359,11 +267,12 @@ img, box-shadow: var(--shadow-light) !important; } -/* Indicatori transparenți și eleganți - FĂRĂ BLUR */ +/* Indicatori transparenți și eleganți */ .indicator { background: rgba(0, 0, 0, 0.7) !important; color: white !important; border-radius: var(--border-radius-small) !important; + backdrop-filter: blur(5px) !important; } /* Indicatori pentru numărul de episoade */ @@ -450,7 +359,37 @@ img, * PAGINA DE LOGIN * ======================================== */ -/* Login - NU modifica fundalul */ +/* Container pentru pagina de login */ +#loginPage { + background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%); + background-size: cover; + position: relative; +} + +/* Overlay pentru pagina de login */ +#loginPage::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(15, 15, 15, 0.8); + backdrop-filter: blur(5px); +} + +/* Formular de login - design minimalist */ +#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; + position: relative; + z-index: 1; +} /* Titlu login */ #loginPage h1 { @@ -476,7 +415,13 @@ img, * PLAYER VIDEO ȘI CONTROALE * ======================================== */ -/* Player - NU modifica fundalul */ +/* Bara de progres video */ +.nowPlayingBar { + background: rgba(26, 26, 26, 0.95) !important; + backdrop-filter: blur(10px) !important; + border-top: 1px solid var(--border-color) !important; + box-shadow: 0 -4px 8px rgba(0,0,0,0.3) !important; +} /* Controale player */ .nowPlayingBarCenter { @@ -753,7 +698,19 @@ div.nextUpSection { * TEMA ÎNTUNECATĂ ÎMBUNĂTĂȚITĂ * ======================================== */ -/* Dialoguri - NU modifica fundalul */ +/* Overlay pentru dialoguri */ +.dialogBackdrop { + background: rgba(0, 0, 0, 0.8) !important; + backdrop-filter: blur(5px) !important; +} + +/* Dialoguri */ +.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; +} /* Titluri în dialoguri */ .dialog h2, @@ -789,314 +746,21 @@ div.nextUpSection { transition: all var(--transition-medium) !important; } -/* ======================================== - * ÎMBUNĂTĂȚIRI FINALE PENTRU IMAGINI - * ======================================== */ - -/* ELIMINĂ COMPLET BLUR-UL - Asigură vizibilitatea maximă pentru toate imaginile */ -.cardImage, -.cardImageContainer .cardImage, -.listItemImage, -.itemDetailImage, -.cardContent img, -.listItem img, -.cardImageContainer img, -.cardContent-button img, -.listItemImage img, -.itemDetailImage img, -.lazy, -img:not(.backdropImage):not(.backdrop):not(.itemBackdrop) { - filter: none !important; - opacity: 1 !important; - visibility: visible !important; - display: block !important; - backdrop-filter: none !important; - -webkit-filter: none !important; -} - -/* Hover effects pentru imagini - FĂRĂ FILTRE */ -.cardImageContainer:hover .cardImage, -.listItemImage:hover, -.itemDetailImage:hover, -.cardImageContainer:hover img, -.cardContent-button:hover img { - filter: none !important; - transform: scale(1.02) !important; - opacity: 1 !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; -} - -/* ======================================== - * ELIMINĂ COMPLET BLUR-UL DE PE IMAGINI - REGULI FOARTE PUTERNICE - * ======================================== */ - -/* TOATE imaginile - ZERO blur, ZERO filtre */ -img, -.cardImage, -.cardImageContainer img, -.cardContent-button img, -.listItemImage img, -.itemDetailImage img, -.lazy img, -.userImage, -.headerUserImage, -.headerUserButton img, -.cardScalable img, -.cardOverlayContainer img, -.listItemImageButton img, -.cardContent img, -.listItem img, -.itemAction img, -.coveredImage, -.defaultCardBackground, -.lazy, -.cardContent-button, -.cardImageContainer, -.listItemImageButton, -.cardBox img, -.card img { - filter: none !important; - backdrop-filter: none !important; - -webkit-filter: none !important; - -webkit-backdrop-filter: none !important; - opacity: 1 !important; - visibility: visible !important; - display: block !important; - background: none !important; - box-shadow: none !important; -} - -/* ELIMINĂ BLUR-UL DE PE TOATE CONTAINERELE DE IMAGINI */ -.cardImageContainer, -.cardContent-button, -.cardScalable, -.listItemImageButton, -.cardBox, -.card, -.cardContent, -.itemDetailImage, -.listItemImage { - filter: none !important; - backdrop-filter: none !important; - -webkit-filter: none !important; - -webkit-backdrop-filter: none !important; -} - -/* Elimină orice pseudo-elemente care ar putea ascunde imaginile */ -.cardImageContainer::before, -.cardImageContainer::after, -.cardContent-button::before, -.cardContent-button::after, -.cardOverlayContainer::before, -.cardOverlayContainer::after, -.listItemImageButton::before, -.listItemImageButton::after { - display: none !important; - content: none !important; -} - -/* Asigură că imaginile au dimensiuni corecte */ -.cardImageContainer img, -.cardContent-button img, -.listItemImage img { - width: 100% !important; - height: 100% !important; - object-fit: cover !important; -} - -/* Elimină orice transformări care ar putea afecta imaginile */ -.cardImageContainer, -.cardContent-button, -.cardScalable, -.listItemImageButton { - transform: none !important; - filter: none !important; - backdrop-filter: none !important; -} - -/* ======================================== - * REGULI ANTI-BLUR FOARTE SPECIFICE PENTRU JELLYFIN - * ======================================== */ - -/* Elimină blur-ul aplicat de Jellyfin pe imagini */ -.cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy, -.cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.cardContent.cardContent-shadow.itemAction, -.listItemImage.listItemImage-large.itemAction.lazy, -.itemDetailImage, -.cardImage.lazy { - filter: none !important; - backdrop-filter: none !important; - -webkit-filter: none !important; - -webkit-backdrop-filter: none !important; -} - -/* Forțează eliminarea blur-ului pe toate clasele Jellyfin */ -.lazy[style*="filter"], -.cardImageContainer[style*="filter"], -.cardContent-button[style*="filter"], -img[style*="filter"], -.cardImage[style*="filter"] { - filter: none !important; -} - -/* Elimină blur-ul din stilurile inline */ -*[style*="blur"] { - filter: none !important; - backdrop-filter: none !important; -} - -/* Reguli pentru toate tipurile de carduri Jellyfin */ -.portraitCard img, -.squareCard img, -.backdropCard img, -.bannerCard img, -.thumbCard img { - filter: none !important; - backdrop-filter: none !important; - -webkit-filter: none !important; -} - -/* Elimină blur-ul de pe cardurile cu hover */ -.card-hoverable img, -.card-withuserdata img, -.overflowPortraitCard img, -.overflowSquareCard img, -.overflowBackdropCard img { - filter: none !important; - backdrop-filter: none !important; -} - -/* CORECȚII SPECIFICE PENTRU IMAGINI DE PROFIL ȘI CARDURI */ -.headerUserButton, -.headerUserButton img, -.userImage, -.headerUserImage, -.userImageContainer, -.userImageContainer img { - filter: none !important; - backdrop-filter: none !important; - -webkit-filter: none !important; - -webkit-backdrop-filter: none !important; - opacity: 1 !important; - visibility: visible !important; - display: block !important; -} - -/* Corecții pentru carduri - elimină orice blur */ -.card, -.cardBox, -.cardContent, -.cardContent-button, -.cardImageContainer, -.cardScalable, -.cardOverlayContainer { - filter: none !important; - backdrop-filter: none !important; - -webkit-filter: none !important; - -webkit-backdrop-filter: none !important; -} - -/* Elimină blur-ul de pe toate elementele cu clasa lazy */ -.lazy { - filter: none !important; - backdrop-filter: none !important; - -webkit-filter: none !important; - -webkit-backdrop-filter: none !important; - opacity: 1 !important; -} - -/* Î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; -} - -/* ======================================== - * REGULĂ FINALĂ ANTI-BLUR - PRIORITATE MAXIMĂ - * ======================================== */ - -/* SUPRASCRIE ORICE BLUR DIN ORICE SURSĂ */ -* img, -* .cardImage, -* .cardImageContainer, -* .cardContent-button, -* .lazy { - filter: none !important; - backdrop-filter: none !important; - -webkit-filter: none !important; - -webkit-backdrop-filter: none !important; -} - -/* Elimină blur-ul chiar și din JavaScript sau stiluri inline */ -img[style], -.cardImage[style], -.cardImageContainer[style], -.cardContent-button[style] { - filter: none !important; - backdrop-filter: none !important; -} - /* Mesaj final în CSS */ /* * ======================================== * SFÂRȘITUL TEMEI PERSONALIZATE JELLYFIN * ======================================== * - * Această temă modernă oferă: - * ✓ Design modern și profesional - * ✓ Imagini COMPLET CLARE - ZERO blur - * ✓ Fundal nativ Jellyfin păstrat - * ✓ Animații fluide și moderne + * Această temă oferă: + * ✓ Design modern și elegant + * ✓ Animații fluide și responsive * ✓ Compatibilitate cu toate dispozitivele * ✓ Îmbunătățiri pentru accesibilitate * ✓ Optimizări pentru performanță - * ✓ Paletă de culori contemporană * - * Pentru personalizări suplimentare, + * Pentru suport sau personalizări suplimentare, * modifică variabilele CSS din secțiunea :root * * Bucură-te de experiența îmbunătățită Jellyfin! - * Versiune: 2.1 - Anti-Blur Edition */ \ No newline at end of file