1050 lines
29 KiB
CSS
1050 lines
29 KiB
CSS
/*
|
|
* ========================================
|
|
* 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 modernă și profesională */
|
|
--primary-color: #6366f1; /* Indigo modern */
|
|
--primary-light: #818cf8; /* Indigo deschis */
|
|
--primary-dark: #4f46e5; /* Indigo închis */
|
|
--secondary-color: #1f2937; /* Gri închis modern */
|
|
--accent-color: #f59e0b; /* Amber accent */
|
|
--accent-secondary: #10b981; /* Emerald accent */
|
|
|
|
/* Fundaluri cu gradient modern */
|
|
--background-dark: #0f172a; /* Slate foarte închis */
|
|
--background-medium: #1e293b; /* Slate mediu */
|
|
--background-light: #334155; /* Slate deschis */
|
|
--background-card: #1e293b; /* Fundal carduri */
|
|
--background-overlay: rgba(15, 23, 42, 0.95); /* Overlay cu transparență */
|
|
|
|
/* Text cu contrast îmbunătățit */
|
|
--text-primary: #f8fafc; /* Alb cald */
|
|
--text-secondary: #cbd5e1; /* Gri deschis */
|
|
--text-muted: #94a3b8; /* Gri mediu */
|
|
--border-color: #475569; /* Borduri subtile */
|
|
|
|
/* Culori de stare moderne */
|
|
--success-color: #10b981; /* Emerald */
|
|
--warning-color: #f59e0b; /* Amber */
|
|
--error-color: #ef4444; /* Red modern */
|
|
--info-color: #3b82f6; /* Blue modern */
|
|
|
|
/* Dimensiuni și spațiere moderne */
|
|
--border-radius: 12px;
|
|
--border-radius-small: 6px;
|
|
--border-radius-large: 16px;
|
|
--border-radius-xl: 24px;
|
|
|
|
/* Umbre moderne cu blur */
|
|
--shadow-light: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
|
--shadow-medium: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
|
|
--shadow-heavy: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
|
|
--shadow-xl: 0 20px 25px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.04);
|
|
|
|
/* Efecte de blur moderne */
|
|
--blur-light: blur(8px);
|
|
--blur-medium: blur(12px);
|
|
--blur-heavy: blur(16px);
|
|
--blur-xl: blur(24px);
|
|
|
|
/* Tranziții fluide */
|
|
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Gradienturi moderne */
|
|
--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
|
--gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
|
|
--gradient-background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%);
|
|
}
|
|
|
|
/* ========================================
|
|
* STILURI GENERALE - FOLOSEȘTE FUNDALUL NATIV JELLYFIN
|
|
* ======================================== */
|
|
|
|
/* Elimină fundalurile personalizate - lasă Jellyfin să gestioneze */
|
|
.backgroundContainer,
|
|
.dialog,
|
|
html {
|
|
background: unset !important;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Elimină overlay-urile personalizate */
|
|
.backgroundContainer.withBackdrop,
|
|
.backdropContainer,
|
|
.backgroundContainer {
|
|
background: unset !important;
|
|
position: relative;
|
|
}
|
|
|
|
/* ELIMINĂ COMPLET BLUR-UL DE PE TOATE IMAGINILE DE CONȚINUT */
|
|
.cardImageContainer img,
|
|
.itemDetailImage img,
|
|
.listItemImage img,
|
|
.cardContent-button img,
|
|
.cardImage,
|
|
.listItemImage,
|
|
.itemDetailImage,
|
|
.cardContent img,
|
|
.listItem img,
|
|
.lazy,
|
|
img,
|
|
.cardScalable img,
|
|
.cardOverlayContainer img,
|
|
.listItemImageButton img,
|
|
.userImage,
|
|
.headerUserImage,
|
|
.headerUserButton img {
|
|
filter: none !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
display: block !important;
|
|
border-radius: var(--border-radius) !important;
|
|
transition: transform var(--transition-medium) !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-filter: none !important;
|
|
-webkit-backdrop-filter: none !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 modern fără blur de fundal */
|
|
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
|
|
background: rgba(30, 41, 59, 0.95) !important;
|
|
border-bottom: 1px solid var(--border-color);
|
|
box-shadow: var(--shadow-heavy);
|
|
transition: all var(--transition-medium);
|
|
border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
|
|
}
|
|
|
|
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
|
|
background: rgba(30, 41, 59, 0.95) !important;
|
|
border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
|
|
}
|
|
|
|
/* Butoane din header cu design modern - FĂRĂ BLUR */
|
|
.headerButton {
|
|
color: var(--text-primary) !important;
|
|
transition: all var(--transition-fast);
|
|
border-radius: var(--border-radius);
|
|
margin: 0 6px;
|
|
padding: 8px 12px !important;
|
|
background: rgba(255, 255, 255, 0.05) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.headerButton:hover {
|
|
background: var(--gradient-primary) !important;
|
|
color: white !important;
|
|
transform: translateY(-2px) scale(1.05);
|
|
box-shadow: var(--shadow-medium);
|
|
border-color: var(--primary-light);
|
|
}
|
|
|
|
/* Meniu lateral (drawer) fără blur */
|
|
.mainDrawer {
|
|
background: rgba(30, 41, 59, 0.95) !important;
|
|
border-right: 1px solid var(--border-color);
|
|
box-shadow: var(--shadow-xl);
|
|
border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
|
|
}
|
|
|
|
.mainDrawer-scrollContainer {
|
|
color: var(--text-primary) !important;
|
|
padding: 16px 8px;
|
|
}
|
|
|
|
/* 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 cu design modern */
|
|
.button-submit,
|
|
.raised.emby-button {
|
|
background: var(--gradient-primary) !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
border-radius: var(--border-radius-large) !important;
|
|
padding: 14px 28px !important;
|
|
font-weight: 600 !important;
|
|
transition: all var(--transition-fast) !important;
|
|
box-shadow: var(--shadow-medium) !important;
|
|
text-transform: none;
|
|
letter-spacing: 0.3px;
|
|
font-size: 0.95rem !important;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.button-submit::before,
|
|
.raised.emby-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: left var(--transition-medium);
|
|
}
|
|
|
|
.button-submit:hover::before,
|
|
.raised.emby-button:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.button-submit:hover,
|
|
.raised.emby-button:hover {
|
|
transform: translateY(-3px) scale(1.02) !important;
|
|
box-shadow: var(--shadow-heavy) !important;
|
|
background: var(--gradient-accent) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
* CARDURI ȘI ELEMENTE MEDIA
|
|
* ======================================== */
|
|
|
|
/* Carduri pentru filme, seriale, etc. cu design modern - FĂRĂ BLUR */
|
|
.cardBox {
|
|
background: var(--background-card) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
border-radius: var(--border-radius-large) !important;
|
|
transition: all var(--transition-medium) !important;
|
|
box-shadow: var(--shadow-medium) !important;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cardBox::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cardBox:hover {
|
|
transform: translateY(-6px) scale(1.03) !important;
|
|
box-shadow: var(--shadow-xl) !important;
|
|
border-color: var(--primary-light) !important;
|
|
background: var(--background-light) !important;
|
|
}
|
|
|
|
/* Imagini din carduri - design îmbunătățit */
|
|
.cardContent-button,
|
|
.itemDetailImage,
|
|
.cardImageContainer {
|
|
border-radius: var(--border-radius-large) !important;
|
|
overflow: hidden !important;
|
|
transition: all var(--transition-medium) !important;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.cardContent-button:hover {
|
|
transform: scale(1.05) !important;
|
|
box-shadow: var(--shadow-medium) !important;
|
|
}
|
|
|
|
/* Asigură vizibilitatea COMPLETĂ a imaginilor - FĂRĂ BLUR */
|
|
.cardImageContainer img,
|
|
.cardContent-button img,
|
|
.itemDetailImage img,
|
|
.cardImage,
|
|
.listItemImage img,
|
|
.lazy img {
|
|
filter: none !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-filter: none !important;
|
|
transition: transform var(--transition-medium) !important;
|
|
}
|
|
|
|
.cardImageContainer:hover img,
|
|
.cardContent-button:hover img,
|
|
.listItemImage:hover img {
|
|
filter: none !important;
|
|
transform: scale(1.02) !important;
|
|
opacity: 1 !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 - folosește fundalul nativ */
|
|
#loginPage {
|
|
background: unset !important;
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Formular de login - design simplu fără blur */
|
|
#loginPage .readOnlyContent,
|
|
#loginPage form {
|
|
max-width: 420px !important;
|
|
background: rgba(30, 41, 59, 0.95) !important;
|
|
border-radius: var(--border-radius-xl) !important;
|
|
padding: 48px !important;
|
|
box-shadow: var(--shadow-xl) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 20px;
|
|
}
|
|
|
|
/* 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 fără blur */
|
|
.nowPlayingBar {
|
|
background: rgba(30, 41, 59, 0.95) !important;
|
|
border-top: 1px solid var(--border-color) !important;
|
|
box-shadow: var(--shadow-xl) !important;
|
|
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
|
|
}
|
|
|
|
/* 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 fără blur */
|
|
.dialogBackdrop {
|
|
background: rgba(15, 23, 42, 0.9) !important;
|
|
}
|
|
|
|
/* Dialoguri fără blur */
|
|
.dialog {
|
|
background: rgba(30, 41, 59, 0.95) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
border-radius: var(--border-radius-xl) !important;
|
|
box-shadow: var(--shadow-xl) !important;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* ========================================
|
|
* ÎMBUNĂTĂȚIRI FINALE PENTRU IMAGINI
|
|
* ======================================== */
|
|
|
|
/* ELIMINĂ COMPLET BLUR-UL - Asigură vizibilitatea maximă pentru toate imaginile */
|
|
.cardImage,
|
|
.cardImageContainer .cardImage,
|
|
.listItemImage,
|
|
.itemDetailImage,
|
|
.cardContent img,
|
|
.listItem img,
|
|
.cardImageContainer img,
|
|
.cardContent-button img,
|
|
.listItemImage img,
|
|
.itemDetailImage img,
|
|
.lazy,
|
|
img:not(.backdropImage):not(.backdrop):not(.itemBackdrop) {
|
|
filter: none !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
display: block !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-filter: none !important;
|
|
}
|
|
|
|
/* Hover effects pentru imagini - FĂRĂ FILTRE */
|
|
.cardImageContainer:hover .cardImage,
|
|
.listItemImage:hover,
|
|
.itemDetailImage:hover,
|
|
.cardImageContainer:hover img,
|
|
.cardContent-button:hover img {
|
|
filter: none !important;
|
|
transform: scale(1.02) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Îmbunătățiri pentru thumbnail-uri */
|
|
.listItemImageButton,
|
|
.cardContent-button {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: var(--border-radius-large) !important;
|
|
}
|
|
|
|
.listItemImageButton::after,
|
|
.cardContent-button::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
|
|
opacity: 0;
|
|
transition: opacity var(--transition-fast);
|
|
}
|
|
|
|
.listItemImageButton:hover::after,
|
|
.cardContent-button:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ========================================
|
|
* EFECTE SPECIALE PENTRU PROFESIONALISM
|
|
* ======================================== */
|
|
|
|
/* Animație subtilă pentru loading */
|
|
@keyframes shimmer {
|
|
0% { background-position: -200px 0; }
|
|
100% { background-position: calc(200px + 100%) 0; }
|
|
}
|
|
|
|
.lazy:not([src]) {
|
|
background: linear-gradient(90deg, var(--background-light) 0%, var(--background-medium) 50%, var(--background-light) 100%);
|
|
background-size: 200px 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
/* REGULĂ FINALĂ - ELIMINĂ COMPLET BLUR-UL DE PE TOATE IMAGINILE */
|
|
img,
|
|
.cardImage,
|
|
.cardImageContainer *,
|
|
.cardContent-button *,
|
|
.listItemImage *,
|
|
.itemDetailImage *,
|
|
.lazy,
|
|
.userImage,
|
|
.headerUserImage,
|
|
.headerUserButton img,
|
|
.cardScalable *,
|
|
.cardOverlayContainer *,
|
|
.listItemImageButton *,
|
|
.cardContent img,
|
|
.listItem img,
|
|
.itemAction img,
|
|
.coveredImage,
|
|
.defaultCardBackground {
|
|
filter: none !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-filter: none !important;
|
|
-webkit-backdrop-filter: none !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Elimină blur-ul și de pe fundaluri - lasă Jellyfin să gestioneze */
|
|
.backdropImage,
|
|
.backdrop,
|
|
.itemBackdrop,
|
|
.backgroundContainer .backdropImage {
|
|
filter: none !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-filter: none !important;
|
|
}
|
|
|
|
/* CORECȚII SPECIFICE PENTRU IMAGINI DE PROFIL ȘI CARDURI */
|
|
.headerUserButton,
|
|
.headerUserButton img,
|
|
.userImage,
|
|
.headerUserImage,
|
|
.userImageContainer,
|
|
.userImageContainer img {
|
|
filter: none !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-filter: none !important;
|
|
-webkit-backdrop-filter: none !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Corecții pentru carduri - elimină orice blur */
|
|
.card,
|
|
.cardBox,
|
|
.cardContent,
|
|
.cardContent-button,
|
|
.cardImageContainer,
|
|
.cardScalable,
|
|
.cardOverlayContainer {
|
|
filter: none !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-filter: none !important;
|
|
-webkit-backdrop-filter: none !important;
|
|
}
|
|
|
|
/* Elimină blur-ul de pe toate elementele cu clasa lazy */
|
|
.lazy {
|
|
filter: none !important;
|
|
backdrop-filter: none !important;
|
|
-webkit-filter: none !important;
|
|
-webkit-backdrop-filter: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Îmbunătățiri pentru focus și accesibilitate */
|
|
*:focus-visible {
|
|
outline: 2px solid var(--primary-color) !important;
|
|
outline-offset: 2px !important;
|
|
border-radius: var(--border-radius-small) !important;
|
|
}
|
|
|
|
/* Mesaj final în CSS */
|
|
/*
|
|
* ========================================
|
|
* SFÂRȘITUL TEMEI PERSONALIZATE JELLYFIN
|
|
* ========================================
|
|
*
|
|
* Această temă modernă oferă:
|
|
* ✓ Design glassmorphism profesional
|
|
* ✓ Imagini complet vizibile și optimizate
|
|
* ✓ Fundaluri cu blur elegant
|
|
* ✓ Animații fluide și moderne
|
|
* ✓ Compatibilitate cu toate dispozitivele
|
|
* ✓ Îmbunătățiri pentru accesibilitate
|
|
* ✓ Optimizări pentru performanță
|
|
* ✓ Paletă de culori contemporană
|
|
*
|
|
* Pentru personalizări suplimentare,
|
|
* modifică variabilele CSS din secțiunea :root
|
|
*
|
|
* Bucură-te de experiența îmbunătățită Jellyfin!
|
|
* Versiune: 2.0 - Modern & Professional
|
|
*/ |