From b99c3f046f7b153642ccfb967575913a67fa080b Mon Sep 17 00:00:00 2001 From: eddmanoo Date: Fri, 19 Sep 2025 13:11:36 +0300 Subject: [PATCH] Update CSS V60.0 --- edd.css | 458 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 458 insertions(+) diff --git a/edd.css b/edd.css index 22a076d..f7714a2 100644 --- a/edd.css +++ b/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ă! ✨ + */ +