766 lines
21 KiB
CSS
766 lines
21 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 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: 10px;
|
|
--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 single-animation !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!
|
|
*/ |