From c66f4c144f8a7db68484e224195823c7e3edb219 Mon Sep 17 00:00:00 2001 From: eddmanoo Date: Fri, 19 Sep 2025 10:46:27 +0300 Subject: [PATCH] first commit --- edd.css | 766 +++++++++++++++++++++++++++++++++++++++++++ teme-alternative.css | 262 +++++++++++++++ 2 files changed, 1028 insertions(+) create mode 100644 edd.css create mode 100644 teme-alternative.css diff --git a/edd.css b/edd.css new file mode 100644 index 0000000..8632ab6 --- /dev/null +++ b/edd.css @@ -0,0 +1,766 @@ +/* + * ======================================== + * CSS PERSONALIZAT PENTRU JELLYFIN SERVER + * ======================================== + * + * Autor: EDD + * Versiune: 1.0 + * Compatibilitate: Jellyfin WebUI (toate versiunile moderne) + * + * Descriere: Acest fișier CSS oferă o temă personalizată pentru interfața web + * Jellyfin, cu îmbunătățiri vizuale și funcționale pentru o experiență mai bună. + * + * Instrucțiuni de utilizare: + * 1. Copiază conținutul acestui fișier + * 2. Mergi în Dashboard > General > Custom CSS + * 3. Lipește codul în câmpul "Custom CSS" + * 4. Salvează setările + * + * Notă: Modificările se aplică imediat, fără a fi nevoie să restartezi serverul. + */ + +/* ======================================== + * 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 */ + + /* 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); + + /* Tranziții */ + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; +} + +/* ======================================== + * STILURI GENERALE PENTRU FUNDAL ȘI LAYOUT + * ======================================== */ + +/* Fundal principal al aplicației */ +.backgroundContainer, +.dialog, +html { + background-color: var(--background-dark) !important; + color: var(--text-primary); +} + +/* 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 */ +* { + scrollbar-width: thin; + scrollbar-color: var(--primary-color) var(--background-medium); +} + +*::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +*::-webkit-scrollbar-track { + background: var(--background-medium); + border-radius: var(--border-radius-small); +} + +*::-webkit-scrollbar-thumb { + background: var(--primary-color); + border-radius: var(--border-radius-small); + transition: background var(--transition-fast); +} + +*::-webkit-scrollbar-thumb:hover { + background: var(--accent-color); +} + +/* ======================================== + * HEADER ȘI NAVIGARE + * ======================================== */ + +/* 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); +} + +.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-small); + margin: 0 4px; +} + +.headerButton:hover { + background-color: var(--primary-color) !important; + color: white !important; + transform: translateY(-1px); + box-shadow: var(--shadow-light); +} + +/* 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 { + color: var(--text-secondary) !important; + transition: all var(--transition-fast); + border-radius: var(--border-radius-small); + margin: 2px 8px; +} + +.navMenuOption:hover { + background-color: var(--background-light) !important; + color: var(--text-primary) !important; + transform: translateX(4px); +} + +.navMenuOption-selected { + background: var(--primary-color) !important; + color: white !important; + box-shadow: var(--shadow-light); +} + +/* ======================================== + * TABURI ȘI BUTOANE + * ======================================== */ + +/* Taburi principale - design îmbunătățit */ +.headerTabs.sectionTabs { + text-size-adjust: 110%; + font-size: 110%; + border-bottom: 1px solid var(--border-color); +} + +.emby-tab-button { + padding: 1.75em 1.7em; + color: var(--text-secondary) !important; + transition: all var(--transition-fast); + border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; + margin: 0 2px; + position: relative; +} + +.emby-tab-button:hover { + color: var(--text-primary) !important; + background-color: var(--background-light); + transform: translateY(-2px); +} + +.emby-tab-button.emby-tab-button-active { + color: var(--primary-color) !important; + background-color: var(--background-medium); + border-bottom: 3px solid var(--primary-color); +} + +/* Butoane generale */ +.button-submit, +.raised.emby-button { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important; + color: white !important; + border: none !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-light) !important; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.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; +} + +/* ======================================== + * CARDURI ȘI ELEMENTE MEDIA + * ======================================== */ + +/* Carduri pentru filme, seriale, etc. */ +.cardBox { + background: var(--background-medium) !important; + border: 1px solid var(--border-color) !important; + border-radius: var(--border-radius) !important; + transition: all var(--transition-medium) !important; + box-shadow: var(--shadow-light) !important; +} + +.cardBox:hover { + transform: translateY(-4px) scale(1.02) !important; + box-shadow: var(--shadow-heavy) !important; + border-color: var(--primary-color) !important; +} + +/* Imagini din carduri - colțuri rotunjite */ +.cardContent-button, +.itemDetailImage, +.cardImageContainer { + border-radius: var(--border-radius) !important; + overflow: hidden !important; + transition: all var(--transition-medium) !important; +} + +.cardContent-button:hover { + transform: scale(1.05) !important; +} + +/* Text din carduri */ +.cardText { + color: var(--text-primary) !important; + font-weight: 500 !important; +} + +.cardText-secondary { + color: var(--text-secondary) !important; +} + +/* ======================================== + * INDICATORI ȘI BADGE-URI + * ======================================== */ + +/* Indicator pentru conținut vizionat */ +.playedIndicator { + background: var(--success-color) !important; + border-radius: 50% !important; + box-shadow: var(--shadow-light) !important; +} + +/* 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 */ +.countIndicator { + background: var(--primary-color) !important; + color: white !important; + border-radius: var(--border-radius-large) !important; + font-weight: 600 !important; + box-shadow: var(--shadow-light) !important; +} + +/* Rating cu stele */ +.starRatingContainer { + filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); +} + +/* ======================================== + * FORMULARE ȘI INPUTURI + * ======================================== */ + +/* Câmpuri de input */ +.emby-input, +.emby-textarea, +.emby-select { + background-color: var(--background-light) !important; + border: 2px solid var(--border-color) !important; + border-radius: var(--border-radius) !important; + color: var(--text-primary) !important; + padding: 12px 16px !important; + transition: all var(--transition-fast) !important; +} + +.emby-input:focus, +.emby-textarea:focus, +.emby-select-withcolor { + border-color: var(--primary-color) !important; + box-shadow: 0 0 0 3px rgba(0, 164, 220, 0.2) !important; + background-color: var(--background-medium) !important; +} + +/* Placeholder text */ +.emby-input::placeholder, +.emby-textarea::placeholder { + color: var(--text-secondary) !important; + opacity: 0.7; +} + +/* ======================================== + * LISTE ȘI TABELE + * ======================================== */ + +/* Liste generale */ +.paperList { + background: var(--background-medium) !important; + border-radius: var(--border-radius) !important; + border: 1px solid var(--border-color) !important; +} + +/* Elemente din listă */ +.listItem { + border-bottom: 1px solid var(--border-color) !important; + transition: all var(--transition-fast) !important; +} + +.listItem:hover { + background-color: var(--background-light) !important; + transform: translateX(4px); +} + +.listItem:last-child { + border-bottom: none !important; +} + +/* Text din liste */ +.listItemBodyText { + color: var(--text-primary) !important; +} + +.secondary.listItemBodyText { + color: var(--text-secondary) !important; +} + +/* ======================================== + * PAGINA DE LOGIN + * ======================================== */ + +/* 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 { + color: var(--primary-color) !important; + text-align: center !important; + margin-bottom: 30px !important; + font-weight: 300 !important; + font-size: 2.5em !important; +} + +/* Spațiere pentru formular */ +#loginPage .padded-left.padded-right.padded-bottom-page { + margin-top: 50px; +} + +/* Ascunde butoanele manual și forgot password */ +#loginPage .raised.cancel.block.btnManual.emby-button, +#loginPage .raised.cancel.block.btnForgotPassword.emby-button { + display: none; +} + +/* ======================================== + * PLAYER VIDEO ȘI CONTROALE + * ======================================== */ + +/* 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 { + color: var(--text-primary) !important; +} + +.nowPlayingBarCenter .material-icons { + color: var(--text-primary) !important; + transition: all var(--transition-fast) !important; +} + +.nowPlayingBarCenter .material-icons:hover { + color: var(--primary-color) !important; + transform: scale(1.1) !important; +} + +/* Slider pentru volum */ +.nowPlayingBarVolumeSliderContainer .mdl-slider { + background: var(--primary-color) !important; +} + +/* ======================================== + * EPISOADE ȘI PREVIEW-URI + * ======================================== */ + +/* Preview-uri episoade mai compacte */ +.listItemImage.listItemImage-large.itemAction.lazy { + height: 110px !important; + border-radius: var(--border-radius) !important; + transition: all var(--transition-medium) !important; +} + +.listItemImage.listItemImage-large.itemAction.lazy:hover { + transform: scale(1.05) !important; + box-shadow: var(--shadow-medium) !important; +} + +.listItem-content { + height: 115px !important; + padding: 12px !important; +} + +.secondary.listItem-overview.listItemBodyText { + height: 61px !important; + margin: 0 !important; + color: var(--text-secondary) !important; + line-height: 1.4 !important; +} + +/* ======================================== + * CAST & CREW STILIZAT + * ======================================== */ + +/* Carduri pentru cast - design circular */ +#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, +#castContent .card.overflowPortraitCard.personCard.card-withuserdata { + width: 120px !important; + font-size: 90% !important; + transition: all var(--transition-medium) !important; +} + +#castContent .card.overflowPortraitCard.personCard:hover { + transform: translateY(-4px) scale(1.05) !important; + box-shadow: var(--shadow-heavy) !important; +} + +/* Imagini circulare pentru cast */ +#castContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy, +#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.cardContent-shadow.itemAction, +#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardContent-shadow.itemAction, +#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAction, +#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground4.cardContent.cardContent-shadow.itemAction, +#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground5.cardContent.cardContent-shadow.itemAction { + background-size: cover !important; + border-radius: 50% !important; + border: 3px solid var(--border-color) !important; + transition: all var(--transition-medium) !important; +} + +#castContent .cardContent-button:hover { + border-color: var(--primary-color) !important; + box-shadow: 0 0 0 3px rgba(0, 164, 220, 0.3) !important; +} + +#castContent .cardScalable { + width: 100px !important; + height: 100px !important; + border-radius: 50% !important; +} + +#castContent .cardOverlayContainer.itemAction { + border-radius: 50% !important; +} + +/* Butoane overlay pentru cast */ +#castContent .cardOverlayButton-br { + bottom: 4% !important; + right: 15% !important; + width: 70% !important; +} + +#castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light { + margin: auto !important; + background: var(--primary-color) !important; + color: white !important; +} + +/* ======================================== + * ÎMBUNĂTĂȚIRI PENTRU MOBILE + * ======================================== */ + +/* Afișează linkurile externe pe mobile */ +.layout-mobile .itemExternalLinks { + display: block !important; +} + +/* Taburi mai mari pentru mobile */ +@media (max-width: 768px) { + .emby-tab-button { + padding: 2em 1.5em !important; + font-size: 1.1em !important; + } + + .headerTabs.sectionTabs { + font-size: 120% !important; + } + + /* Carduri mai mari pe mobile */ + .cardBox { + margin: 8px !important; + } + + /* Formular login responsive */ + #loginPage .readOnlyContent, + #loginPage form { + max-width: 90% !important; + margin: 20px auto !important; + padding: 30px 20px !important; + } +} + +/* ======================================== + * CAROUSEL ȘI SCROLLING + * ======================================== */ + +/* Dezactivează carousel pentru biblioteci - layout fix */ +@media all and (min-width: 50em) { + .homePage .emby-scroller { + margin-right: 0 !important; + } + + .homePage .emby-scrollbuttons { + display: none !important; + } + + .homePage .itemsContainer { + flex-wrap: wrap !important; + justify-content: flex-start !important; + gap: 16px !important; + } +} + +/* Butoane scroll îmbunătățite */ +.emby-scrollbuttons { + position: absolute !important; + left: 0 !important; + top: 0 !important; + width: 100% !important; + height: 100% !important; + padding: 0 !important; + justify-content: space-between !important; + pointer-events: none !important; +} + +.emby-scrollbuttons-button { + pointer-events: initial !important; + background: var(--primary-color) !important; + color: white !important; + border-radius: 50% !important; + width: 48px !important; + height: 48px !important; + box-shadow: var(--shadow-medium) !important; + transition: all var(--transition-fast) !important; +} + +.emby-scrollbuttons-button:hover { + background: var(--accent-color) !important; + transform: scale(1.1) !important; + box-shadow: var(--shadow-heavy) !important; +} + +/* ======================================== + * PERSONALIZĂRI PENTRU SECȚIUNI SPECIFICE + * ======================================== */ + +/* Ascunde elemente nedorite */ +.headerHomeButton { + display: none !important; +} + +.headerCastButton { + display: none !important; +} + +.headerSyncButton { + display: none !important; +} + +/* Personalizează titlurile secțiunilor */ +.sectionTitleContainer h2 { + color: var(--primary-color) !important; + font-weight: 600 !important; + font-size: 1.8em !important; + margin-bottom: 16px !important; +} + +/* Next Up section */ +div.nextUpSection { + background: var(--background-medium) !important; + border-radius: var(--border-radius-large) !important; + padding: 20px !important; + margin: 16px 0 !important; + border: 1px solid var(--border-color) !important; +} + +/* Similar items section */ +#similarCollapsible { + background: var(--background-medium) !important; + border-radius: var(--border-radius-large) !important; + padding: 20px !important; + margin: 16px 0 !important; + border: 1px solid var(--border-color) !important; +} + +/* ======================================== + * ANIMAȚII ȘI EFECTE SPECIALE + * ======================================== */ + +/* Animație fade-in pentru carduri */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.cardBox { + animation: fadeInUp 0.5s ease-out !important; +} + +/* Animație pentru butoane */ +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(0, 164, 220, 0.7); + } + 70% { + box-shadow: 0 0 0 10px rgba(0, 164, 220, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(0, 164, 220, 0); + } +} + +.button-submit:focus, +.raised.emby-button:focus { + animation: pulse 1.5s infinite !important; +} + +/* ======================================== + * TEMA ÎNTUNECATĂ ÎMBUNĂTĂȚITĂ + * ======================================== */ + +/* 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, +.dialog h3 { + color: var(--primary-color) !important; +} + +/* ======================================== + * FINALIZARE ȘI OPTIMIZĂRI + * ======================================== */ + +/* Optimizări pentru performanță */ +* { + will-change: auto !important; +} + +.cardBox, +.emby-tab-button, +.headerButton, +.navMenuOption { + will-change: transform, box-shadow !important; +} + +/* Asigură compatibilitatea cu toate temele */ +.skinHeader, +.mainDrawer, +.emby-input, +.emby-textarea, +.emby-select, +.navMenuOption-selected, +.cardBox, +.paperList { + transition: all var(--transition-medium) !important; +} + +/* Mesaj final în CSS */ +/* + * ======================================== + * SFÂRȘITUL TEMEI PERSONALIZATE JELLYFIN + * ======================================== + * + * 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ță + * + * Pentru suport sau personalizări suplimentare, + * modifică variabilele CSS din secțiunea :root + * + * Bucură-te de experiența îmbunătățită Jellyfin! + */ \ No newline at end of file diff --git a/teme-alternative.css b/teme-alternative.css new file mode 100644 index 0000000..a017fff --- /dev/null +++ b/teme-alternative.css @@ -0,0 +1,262 @@ +/* + * ======================================== + * TEME ALTERNATIVE PENTRU JELLYFIN + * ======================================== + * + * Acest fișier conține variante de culori pentru tema principală. + * Pentru a folosi o temă alternativă, copiază variabilele dorite + * și înlocuiește secțiunea :root din fișierul principal edd.css + */ + +/* ======================================== + * TEMĂ VERDE NATURA + * ======================================== */ +/* +:root { + --primary-color: #28a745; + --secondary-color: #1e1e1e; + --accent-color: #20c997; + --background-dark: #0a1a0a; + --background-medium: #1a2a1a; + --background-light: #2a3a2a; + --text-primary: #ffffff; + --text-secondary: #b3d4b3; + --border-color: #334433; + --success-color: #28a745; + --warning-color: #ffc107; + --error-color: #dc3545; + + --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); + + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; +} +*/ + +/* ======================================== + * TEMĂ VIOLET COSMIC + * ======================================== */ +/* +:root { + --primary-color: #6f42c1; + --secondary-color: #1e1e1e; + --accent-color: #e83e8c; + --background-dark: #1a0a1a; + --background-medium: #2a1a2a; + --background-light: #3a2a3a; + --text-primary: #ffffff; + --text-secondary: #d4b3d4; + --border-color: #443344; + --success-color: #28a745; + --warning-color: #ffc107; + --error-color: #dc3545; + + --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); + + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; +} +*/ + +/* ======================================== + * TEMĂ ROȘIE CINEMA + * ======================================== */ +/* +:root { + --primary-color: #dc3545; + --secondary-color: #1e1e1e; + --accent-color: #fd7e14; + --background-dark: #1a0a0a; + --background-medium: #2a1a1a; + --background-light: #3a2a2a; + --text-primary: #ffffff; + --text-secondary: #d4b3b3; + --border-color: #443333; + --success-color: #28a745; + --warning-color: #ffc107; + --error-color: #dc3545; + + --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); + + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; +} +*/ + +/* ======================================== + * TEMĂ ALBASTRU OCEAN + * ======================================== */ +/* +:root { + --primary-color: #007bff; + --secondary-color: #1e1e1e; + --accent-color: #17a2b8; + --background-dark: #0a0a1a; + --background-medium: #1a1a2a; + --background-light: #2a2a3a; + --text-primary: #ffffff; + --text-secondary: #b3b3d4; + --border-color: #333344; + --success-color: #28a745; + --warning-color: #ffc107; + --error-color: #dc3545; + + --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); + + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; +} +*/ + +/* ======================================== + * TEMĂ PORTOCALIU SUNSET + * ======================================== */ +/* +:root { + --primary-color: #fd7e14; + --secondary-color: #1e1e1e; + --accent-color: #ffc107; + --background-dark: #1a1a0a; + --background-medium: #2a2a1a; + --background-light: #3a3a2a; + --text-primary: #ffffff; + --text-secondary: #d4d4b3; + --border-color: #444433; + --success-color: #28a745; + --warning-color: #ffc107; + --error-color: #dc3545; + + --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); + + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; +} +*/ + +/* ======================================== + * TEMĂ CYAN TECH + * ======================================== */ +/* +:root { + --primary-color: #17a2b8; + --secondary-color: #1e1e1e; + --accent-color: #20c997; + --background-dark: #0a1a1a; + --background-medium: #1a2a2a; + --background-light: #2a3a3a; + --text-primary: #ffffff; + --text-secondary: #b3d4d4; + --border-color: #334444; + --success-color: #28a745; + --warning-color: #ffc107; + --error-color: #dc3545; + + --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); + + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; +} +*/ + +/* ======================================== + * TEMĂ MONOCROM ELEGANT + * ======================================== */ +/* +:root { + --primary-color: #6c757d; + --secondary-color: #1e1e1e; + --accent-color: #adb5bd; + --background-dark: #0f0f0f; + --background-medium: #1a1a1a; + --background-light: #2a2a2a; + --text-primary: #ffffff; + --text-secondary: #b3b3b3; + --border-color: #333333; + --success-color: #28a745; + --warning-color: #ffc107; + --error-color: #dc3545; + + --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); + + --transition-fast: 0.2s ease; + --transition-medium: 0.3s ease; + --transition-slow: 0.5s ease; +} +*/ + +/* ======================================== + * INSTRUCȚIUNI DE UTILIZARE + * ======================================== */ + +/* +PENTRU A FOLOSI O TEMĂ ALTERNATIVĂ: + +1. Alege una dintre temele de mai sus +2. Copiază variabilele :root (fără comentariile /* */) +3. Deschide fișierul edd.css +4. Înlocuiește secțiunea :root existentă cu noile variabile +5. Salvează și aplică în Jellyfin Dashboard > General > Custom CSS + +EXEMPLU: +Dacă vrei tema verde, copiază doar partea: + +:root { + --primary-color: #28a745; + --secondary-color: #1e1e1e; + ... (restul variabilelor) +} + +Și înlocuiește secțiunea :root din edd.css cu aceasta. + +PERSONALIZARE AVANSATĂ: +Poți crea propria paletă de culori modificând valorile hex: +- #28a745 = Verde +- #6f42c1 = Violet +- #dc3545 = Roșu +- #007bff = Albastru +- #fd7e14 = Portocaliu +- #17a2b8 = Cyan + +Folosește un color picker online pentru a găsi codurile hex perfecte! +*/