first commit

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!
+ */

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!
+*/