Update CSS cod
This commit is contained in:
306
edd.css
306
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
|
||||
|
||||
Reference in New Issue
Block a user