first commit
This commit is contained in:
766
edd.css
Normal file
766
edd.css
Normal file
@@ -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!
|
||||
*/
|
||||
Reference in New Issue
Block a user