From 1a16c72a6a85c96c33ac24e815315c0a48cf4e4b Mon Sep 17 00:00:00 2001 From: eddmanoo Date: Fri, 19 Sep 2025 11:26:21 +0300 Subject: [PATCH] Update CSS cod --- edd.css | 306 +++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 283 insertions(+), 23 deletions(-) diff --git a/edd.css b/edd.css index 89c94f0..0387c01 100644 --- a/edd.css +++ b/edd.css @@ -131,6 +131,18 @@ --nexus-space-16: 4rem; /* 64px - 4XL */ --nexus-space-20: 5rem; /* 80px - 5XL */ --nexus-space-24: 6rem; /* 96px - 6XL */ + + /* 🎯 SISTEM ACCENT DINAMIC (inspirat din Ultrachromic) */ + --nexus-accent-rgb: 0, 212, 255; /* RGB pentru transparențe */ + --nexus-accent-alpha-10: rgba(var(--nexus-accent-rgb), 0.1); + --nexus-accent-alpha-25: rgba(var(--nexus-accent-rgb), 0.25); + --nexus-accent-alpha-50: rgba(var(--nexus-accent-rgb), 0.5); + --nexus-accent-alpha-75: rgba(var(--nexus-accent-rgb), 0.75); + --nexus-accent-alpha-90: rgba(var(--nexus-accent-rgb), 0.9); + + /* 🔧 OPTIMIZĂRI PERFORMANȚĂ */ + --nexus-rounding: 8px; /* Rounding global */ + --nexus-backdrop-filter: blur(60px) saturate(200%) contrast(160%) brightness(25%); } /* ======================================== @@ -267,18 +279,19 @@ body::after { box-shadow: var(--nexus-glow-primary) !important; } -/* Backdrop image cu efect holografic */ +/* 🎬 BACKDROP IMAGE NEXUS (inspirat din Ultrachromic) */ .backdropImage { - opacity: 0.08 !important; - filter: blur(3px) saturate(1.5) hue-rotate(15deg) !important; + opacity: 0.15 !important; + filter: var(--nexus-backdrop-filter) !important; transition: var(--nexus-transition-dramatic) !important; mix-blend-mode: screen !important; + transform: scale(1.1) !important; } -/* 🌈 SCROLLBAR HOLOGRAFIC NEXUS */ +/* 🌈 SCROLLBAR HOLOGRAFIC NEXUS (îmbunătățit cu Ultrachromic) */ * { scrollbar-width: thin; - scrollbar-color: var(--nexus-primary) transparent; + scrollbar-color: var(--nexus-accent-alpha-75) transparent !important; } *::-webkit-scrollbar { @@ -293,7 +306,7 @@ body::after { } *::-webkit-scrollbar-thumb { - background: var(--nexus-border-energy); + background: var(--nexus-accent-alpha-75) !important; border-radius: var(--nexus-radius-infinite); transition: var(--nexus-transition-smooth); border: 1px solid var(--nexus-primary); @@ -301,12 +314,7 @@ body::after { } *::-webkit-scrollbar-thumb:hover { - background: linear-gradient( - 45deg, - var(--nexus-primary) 0%, - var(--nexus-secondary) 50%, - var(--nexus-accent) 100% - ); + background: var(--nexus-border-energy) !important; box-shadow: var(--nexus-glow-rainbow); transform: scale(1.1); } @@ -337,6 +345,102 @@ body::after { box-shadow: var(--nexus-glow-primary) !important; } +/* ======================================== + * 🚀 OPTIMIZĂRI PERFORMANȚĂ NEXUS (inspirat din Monochromic) + * ======================================== */ + +/* Eliminarea mask-image pentru performanță mai bună */ +#dashboardPage, +#dashboardGeneralPage, +#userProfilesPage, +#devicesPage, +#serverActivityPage, +#liveTvStatusPage, +#liveTvSettingsPage, +#networkingPage, +#apiKeysPage, +#logPage, +#notificationSettingsPage, +#scheduledTasksPage, +#itemDetailPage, +#userImagePage, +#displayPreferencesPage, +#homeScreenPreferencesPage, +#languagePreferencesPage, +#quickConnectPreferencesPage, +#indexPage, +#moviesPage, +#tvRecommendedPage, +#encodingSettingsPage, +#mediaLibraryPage, +#dlnaSettingsPage, +#pluginsPage, +#musicRecommendedPage { + mask-image: none !important; + -webkit-mask-image: none !important; + will-change: transform, opacity !important; + contain: layout style paint !important; +} + +/* Optimizări pentru pagini mari */ +@media all and (min-width: 100em) { + #indexPage, + #moviesPage, + #tvRecommendedPage, + #musicRecommendedPage { + margin-top: 70px !important; + padding-top: 0px !important; + overflow: auto !important; + scroll-behavior: smooth !important; + } + + #encodingSettingsPage, + #mediaLibraryPage, + #dlnaSettingsPage, + #pluginsPage { + margin-top: 60px !important; + padding-top: 0px !important; + overflow: auto !important; + } +} + +/* Optimizări pentru ecrane mici */ +@media all and (max-width: 100em) { + #indexPage, + #moviesPage, + #tvRecommendedPage, + #encodingSettingsPage, + #mediaLibraryPage, + #dlnaSettingsPage, + #pluginsPage, + #musicRecommendedPage { + margin-top: 130px !important; + padding-top: 0px !important; + overflow: auto !important; + scroll-behavior: smooth !important; + } +} + +/* Optimizări generale pentru toate paginile */ +#dashboardPage, +#dashboardGeneralPage, +#userProfilesPage, +#devicesPage, +#serverActivityPage, +#liveTvStatusPage, +#liveTvSettingsPage, +#networkingPage, +#apiKeysPage, +#logPage, +#notificationSettingsPage, +#scheduledTasksPage, +#itemDetailPage { + margin-top: 60px !important; + padding-top: 0px !important; + overflow: auto !important; + scroll-behavior: smooth !important; +} + /* ======================================== * 🚀 HEADER NEXUS CU EFECTE HOLOGRAFICE * ======================================== */ @@ -631,6 +735,60 @@ body::after { border-radius: var(--border-radius-full); } +/* ======================================== + * 🎨 SISTEM ACCENT DINAMIC NEXUS (inspirat din Ultrachromic) + * ======================================== */ + +/* Butoane cu hover accent dinamic */ +.raised:hover, +.fab:hover, +a[data-role="button"]:hover { + background: var(--nexus-accent-alpha-50) !important; + box-shadow: var(--nexus-glow-primary) !important; + transform: translateY(-2px) scale(1.02) !important; +} + +/* Elemente de navigare cu accent */ +.navMenuOption-selected { + color: var(--nexus-primary) !important; + background: var(--nexus-accent-alpha-25) !important; + box-shadow: var(--nexus-glow-primary) !important; +} + +.navMenuOption:hover, +.actionSheetMenuItem:hover { + background-color: var(--nexus-accent-alpha-50) !important; + transform: translateX(var(--nexus-space-2)) !important; +} + +/* Progres bars cu accent */ +.mdl-slider-background-lower, +.playbackProgress > div, +.taskProgressInner, +.iconOsdProgressInner { + background: var(--nexus-border-energy) !important; + box-shadow: var(--nexus-glow-primary) !important; +} + +progress::-moz-progress-bar, +progress::-webkit-progress-value { + background: var(--nexus-border-energy) !important; +} + +.transcodingProgress > div, +.itemProgressBarForeground { + background: var(--nexus-accent-alpha-50) !important; +} + +/* Slider controls cu accent */ +.mdl-slider::-moz-range-thumb, +.mdl-slider::-ms-thumb, +.mdl-slider::-webkit-slider-thumb { + background: var(--nexus-primary) !important; + box-shadow: var(--nexus-glow-primary) !important; + border: 2px solid var(--nexus-text-primary) !important; +} + /* 💎 BUTOANE PRINCIPALE NEXUS PREMIUM */ .button-submit, .raised.emby-button { @@ -710,6 +868,81 @@ body::after { box-shadow: var(--nexus-shadow-medium) !important; } +/* ======================================== + * 🎯 ELEMENTE INTERACTIVE CU ACCENT DINAMIC + * ======================================== */ + +/* Butoane și linkuri interactive */ +.paper-icon-button-light:hover, +.raised.homeLibraryButton:hover, +.button-flat:hover, +.playstatebutton-icon-played, +.ratingbutton-icon-withrating, +.paper-icon-button-light:hover:not(:disabled), +.emby-tab-button:hover, +.selectLabelFocused, +.inputLabelFocused, +.textareaLabelFocused, +.buttonActive, +.button-link { + color: var(--nexus-primary) !important; + text-shadow: 0 0 10px var(--nexus-primary) !important; + transition: var(--nexus-transition-smooth) !important; +} + +/* Excepție pentru pagina de detalii */ +#itemDetailPage .button-link { + color: inherit !important; + text-shadow: none !important; +} + +/* Checkbox și input focus */ +.emby-checkbox:checked + span + .checkboxOutline, +.emby-textarea:focus, +.emby-select-withcolor:focus, +.emby-input:focus, +.itemSelectionPanel { + border: 2px solid var(--nexus-accent-alpha-75) !important; + box-shadow: var(--nexus-glow-primary) !important; +} + +/* Text countdown și loading */ +.upNextDialog-countdownText { + color: var(--nexus-primary) !important; + text-shadow: 0 0 15px var(--nexus-primary) !important; +} + +.mdl-spinner__layer-1 { + border-color: var(--nexus-primary) !important; +} + +/* Switch controls */ +.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { + background: var(--nexus-accent-alpha-50) !important; +} + +.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { + background: var(--nexus-primary) !important; + box-shadow: var(--nexus-glow-primary) !important; +} + +/* Syncplay theming */ +.syncPlayIconCircle { + color: var(--nexus-primary) !important; + text-shadow: 0 0 20px var(--nexus-primary) !important; + background: var(--nexus-accent-alpha-25) !important; + border-radius: var(--nexus-radius-infinite) !important; + padding: var(--nexus-space-2) !important; +} + +/* Subtitle preview cu gradient */ +.subtitleappearance-preview { + background: linear-gradient(140deg, var(--nexus-primary), var(--nexus-dark)) !important; + border: 1px solid var(--nexus-border-glow) !important; + border-radius: var(--nexus-radius-large) !important; + box-shadow: var(--nexus-glow-primary) !important; +} + /* Butoane secundare */ .cancel.emby-button { background: var(--background-tertiary) !important; @@ -872,21 +1105,39 @@ body::after { font-size: 0.9rem !important; } +/* ======================================== + * 🎭 CARDURI CAST ÎMBUNĂTĂȚITE (inspirat din Ultrachromic) + * ======================================== */ + /* Carduri pentru cast cu design circular modern */ .personCard { - background: var(--background-overlay) !important; - backdrop-filter: var(--blur-xs) !important; - border: 1px solid var(--border-primary) !important; - border-radius: var(--border-radius-2xl) !important; - transition: var(--transition-normal) !important; - padding: var(--space-3) !important; + background: var(--nexus-overlay) !important; + backdrop-filter: var(--nexus-blur-soft) !important; + border: 1px solid var(--nexus-border-primary) !important; + border-radius: var(--nexus-rounding) !important; + transition: var(--nexus-transition-smooth) !important; + padding: var(--nexus-space-3) !important; + will-change: transform, box-shadow !important; } .personCard:hover { - transform: translateY(-4px) !important; - box-shadow: var(--shadow-lg) !important; - border-color: var(--primary-color) !important; - background: var(--background-secondary) !important; + transform: translateY(-6px) scale(1.03) !important; + box-shadow: var(--nexus-shadow-xl), var(--nexus-glow-primary) !important; + border-color: var(--nexus-primary) !important; + background: var(--nexus-accent-alpha-10) !important; +} + +/* Cast thumbnails mai mici și rotunde (inspirat din Ultrachromic) */ +#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, +#castContent .card.overflowPortraitCard.personCard.card-withuserdata { + width: 110px !important; + font-size: 85% !important; + transition: var(--nexus-transition-smooth) !important; +} + +#castContent .card.overflowPortraitCard.personCard:hover { + transform: translateY(-6px) scale(1.08) !important; + box-shadow: var(--nexus-shadow-xl), var(--nexus-glow-primary) !important; } /* ======================================== @@ -1978,8 +2229,11 @@ html { * - Transform și scale pentru efecte 3D * - Mix-blend-mode pentru efecte vizuale * - CSS Grid și Flexbox pentru layout fluid + * - Sistem accent dinamic inspirat din Ultrachromic + * - Optimizări performanță din Monochromic + * - Rounding system și backdrop filters avansate * - * 🎯 DIFERENȚE FAȚĂ DE TEMA DE BAZĂ: + * 🎯 DIFERENȚE FAȚĂ DE TEMA DE BAZĂ + INTEGRĂRI: * ✓ Paleta de culori complet diferită (Nexus vs Standard) * ✓ Fundal cosmic animat vs gradient static * ✓ Efecte holografice vs efecte simple @@ -1987,6 +2241,12 @@ html { * ✓ Design futuristic vs design modern clasic * ✓ Glow effects vs shadow effects * ✓ Particule animate vs fundal static + * ✓ Sistem accent dinamic (inspirat din Ultrachromic) + * ✓ Optimizări performanță (inspirat din Monochromic) + * ✓ Cast thumbnails mai mici și rotunde + * ✓ Backdrop filters avansate pentru imagini + * ✓ Scrollbar cu accent dinamic + * ✓ Progres bars cu efecte energetice * * 💡 PERSONALIZARE NEXUS: * Modifică variabilele --nexus-* din secțiunea :root