Update CSS V60.0
This commit is contained in:
458
edd.css
458
edd.css
@@ -872,3 +872,461 @@ html {
|
||||
* 🎬 Bucură-te de cea mai frumoasă experiență Jellyfin! ✨🎨💫
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
* 🖼️ BACKDROP IMAGES ȘI FUNDAL
|
||||
* ======================================== */
|
||||
|
||||
/* Backdrop image pentru pagini */
|
||||
.backdropImage {
|
||||
opacity: 0.3 !important;
|
||||
filter: blur(3px) brightness(0.4) !important;
|
||||
transition: var(--transition-slow) !important;
|
||||
}
|
||||
|
||||
/* Container pentru backdrop */
|
||||
.backdropContainer {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
* 🎴 IMAGINI DIN CARDURI - VIZIBILE
|
||||
* ======================================== */
|
||||
|
||||
/* Asigură că imaginile din carduri sunt vizibile */
|
||||
.cardContent-button img,
|
||||
.cardImageContainer img,
|
||||
.itemDetailImage img,
|
||||
.cardImage img,
|
||||
.listItemImage img,
|
||||
.lazy {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
/* Container pentru imagini */
|
||||
.cardImageContainer,
|
||||
.cardContent-button,
|
||||
.itemDetailImage {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
* 🧭 NAVIGARE ȘI BUTOANE HEADER
|
||||
* ======================================== */
|
||||
|
||||
/* Meniu lateral (drawer) */
|
||||
.mainDrawer {
|
||||
background: var(--surface) !important;
|
||||
backdrop-filter: var(--blur-lg) !important;
|
||||
-webkit-backdrop-filter: var(--blur-lg) !important;
|
||||
border-right: 1px solid var(--border-primary) !important;
|
||||
box-shadow: var(--shadow-xl) !important;
|
||||
transition: var(--transition-normal) !important;
|
||||
}
|
||||
|
||||
.mainDrawer-scrollContainer {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Opțiuni din meniul lateral */
|
||||
.navMenuOption {
|
||||
color: var(--text-secondary) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
margin: 4px 8px !important;
|
||||
padding: 12px 16px !important;
|
||||
transition: var(--transition-normal) !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.navMenuOption:hover {
|
||||
background: rgba(99, 102, 241, 0.1) !important;
|
||||
color: var(--text-primary) !important;
|
||||
transform: translateX(4px) !important;
|
||||
}
|
||||
|
||||
.navMenuOption-selected {
|
||||
background: var(--primary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
box-shadow: var(--glow-primary) !important;
|
||||
}
|
||||
|
||||
/* Iconițe în meniu */
|
||||
.navMenuOption .material-icons,
|
||||
.navMenuOption .md-icon {
|
||||
margin-right: 12px !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
/* Butoane utilizator în header */
|
||||
.headerUserButton,
|
||||
.headerButton {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
min-width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
transition: var(--transition-normal) !important;
|
||||
}
|
||||
|
||||
.headerUserButton:hover,
|
||||
.headerButton:hover {
|
||||
background: rgba(99, 102, 241, 0.1) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
/* Avatar utilizator */
|
||||
.headerUserButton img {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
border-radius: var(--radius-full) !important;
|
||||
border: 2px solid var(--border-accent) !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
* 📋 LISTE ȘI ELEMENTE
|
||||
* ======================================== */
|
||||
|
||||
/* Liste generale */
|
||||
.paperList {
|
||||
background: var(--surface) !important;
|
||||
border-radius: var(--radius-xl) !important;
|
||||
border: 1px solid var(--border-primary) !important;
|
||||
backdrop-filter: var(--blur-sm) !important;
|
||||
-webkit-backdrop-filter: var(--blur-sm) !important;
|
||||
}
|
||||
|
||||
/* Elemente din listă */
|
||||
.listItem {
|
||||
border-bottom: 1px solid var(--border-secondary) !important;
|
||||
transition: var(--transition-normal) !important;
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
|
||||
.listItem:hover {
|
||||
background: rgba(99, 102, 241, 0.05) !important;
|
||||
transform: translateX(4px) !important;
|
||||
}
|
||||
|
||||
.listItem:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* Text din liste */
|
||||
.listItemBodyText {
|
||||
color: var(--text-primary) !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.secondary.listItemBodyText {
|
||||
color: var(--text-secondary) !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
* 🎮 CONTROALE VIDEO ȘI PLAYER
|
||||
* ======================================== */
|
||||
|
||||
/* Bara de progres video */
|
||||
.nowPlayingBar {
|
||||
background: var(--surface) !important;
|
||||
backdrop-filter: var(--blur-lg) !important;
|
||||
-webkit-backdrop-filter: var(--blur-lg) !important;
|
||||
border-top: 1px solid var(--border-primary) !important;
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
}
|
||||
|
||||
/* Controale player */
|
||||
.nowPlayingBarCenter {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.nowPlayingBarCenter .material-icons {
|
||||
color: var(--text-primary) !important;
|
||||
transition: var(--transition-normal) !important;
|
||||
}
|
||||
|
||||
.nowPlayingBarCenter .material-icons:hover {
|
||||
color: var(--primary) !important;
|
||||
transform: scale(1.1) !important;
|
||||
}
|
||||
|
||||
/* Controale video cu glassmorphism */
|
||||
.videoOsdBottom {
|
||||
background: var(--surface) !important;
|
||||
backdrop-filter: var(--blur-lg) !important;
|
||||
-webkit-backdrop-filter: var(--blur-lg) !important;
|
||||
border-top: 1px solid var(--border-primary) !important;
|
||||
padding: 16px !important;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
* 📄 PAGINA DE LOGIN
|
||||
* ======================================== */
|
||||
|
||||
/* Container pentru pagina de login */
|
||||
#loginPage {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
|
||||
position: relative !important;
|
||||
min-height: 100vh !important;
|
||||
}
|
||||
|
||||
/* Overlay pentru pagina de login */
|
||||
#loginPage::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
backdrop-filter: var(--blur-sm);
|
||||
-webkit-backdrop-filter: var(--blur-sm);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Formular de login cu glassmorphism */
|
||||
#loginPage .readOnlyContent,
|
||||
#loginPage form {
|
||||
max-width: 420px !important;
|
||||
width: 90% !important;
|
||||
background: var(--surface) !important;
|
||||
backdrop-filter: var(--blur-lg) !important;
|
||||
-webkit-backdrop-filter: var(--blur-lg) !important;
|
||||
border: 1px solid var(--border-primary) !important;
|
||||
border-radius: var(--radius-2xl) !important;
|
||||
padding: 48px 32px !important;
|
||||
box-shadow: var(--shadow-2xl) !important;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
animation: dialog-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
|
||||
}
|
||||
|
||||
/* Titlu login */
|
||||
#loginPage h1 {
|
||||
color: var(--primary) !important;
|
||||
text-align: center !important;
|
||||
margin-bottom: 32px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
/* Ascunde butoanele nedorite */
|
||||
#loginPage .raised.cancel.block.btnManual.emby-button,
|
||||
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
* 🎯 ÎMBUNĂTĂȚIRI PENTRU ACCESIBILITATE
|
||||
* ======================================== */
|
||||
|
||||
/* Focus states pentru accesibilitate */
|
||||
.emby-button:focus,
|
||||
.headerButton:focus,
|
||||
.emby-input:focus,
|
||||
.emby-tab-button:focus,
|
||||
.navMenuOption:focus {
|
||||
outline: 2px solid var(--primary) !important;
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
/* Smooth scroll pentru toată aplicația */
|
||||
html {
|
||||
scroll-behavior: smooth !important;
|
||||
}
|
||||
|
||||
/* Reduce motion pentru utilizatorii sensibili */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
* 📱 ÎMBUNĂTĂȚIRI PENTRU MOBILE
|
||||
* ======================================== */
|
||||
|
||||
/* Afișează linkurile externe pe mobile */
|
||||
.layout-mobile .itemExternalLinks {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Link-uri externe stilizate */
|
||||
.itemExternalLinks a {
|
||||
background: rgba(99, 102, 241, 0.1) !important;
|
||||
color: var(--primary) !important;
|
||||
border: 1px solid var(--border-accent) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
padding: 8px 12px !important;
|
||||
margin: 4px !important;
|
||||
transition: var(--transition-normal) !important;
|
||||
text-decoration: none !important;
|
||||
font-weight: 500 !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.itemExternalLinks a:hover {
|
||||
background: var(--primary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
* 🔧 OPTIMIZĂRI PENTRU PERFORMANȚĂ
|
||||
* ======================================== */
|
||||
|
||||
/* Optimizări GPU pentru animații */
|
||||
.cardBox,
|
||||
.emby-button,
|
||||
.headerButton,
|
||||
.emby-tab-button,
|
||||
.navMenuOption {
|
||||
will-change: transform, box-shadow !important;
|
||||
}
|
||||
|
||||
/* Optimizări pentru scroll */
|
||||
.backgroundContainer,
|
||||
.mainDrawer,
|
||||
.skinHeader {
|
||||
will-change: transform !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
* 🎨 ÎMBUNĂTĂȚIRI FINALE
|
||||
* ======================================== */
|
||||
|
||||
/* Asigură că toate elementele au tranziții */
|
||||
* {
|
||||
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
|
||||
}
|
||||
|
||||
/* Îmbunătățiri pentru hover pe liste */
|
||||
.listItem:hover {
|
||||
background: var(--surface-hover) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
}
|
||||
|
||||
/* Cast & Crew cards moderne */
|
||||
.personCard {
|
||||
background: var(--surface) !important;
|
||||
border: 1px solid var(--border-primary) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
transition: var(--transition-normal) !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
.personCard:hover {
|
||||
transform: translateY(-2px) scale(1.02) !important;
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
border-color: var(--border-accent) !important;
|
||||
}
|
||||
|
||||
/* Îmbunătățiri pentru secțiuni */
|
||||
.sectionTitleContainer h2 {
|
||||
color: var(--primary) !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
|
||||
/* Next Up și Similar sections */
|
||||
div.nextUpSection,
|
||||
#similarCollapsible {
|
||||
background: var(--surface) !important;
|
||||
border-radius: var(--radius-xl) !important;
|
||||
padding: 20px !important;
|
||||
margin: 16px 0 !important;
|
||||
border: 1px solid var(--border-primary) !important;
|
||||
backdrop-filter: var(--blur-sm) !important;
|
||||
-webkit-backdrop-filter: var(--blur-sm) !important;
|
||||
}
|
||||
|
||||
/* Carousel și scrolling îmbunătățit */
|
||||
@media all and (min-width: 50em) {
|
||||
.homePage .emby-scroller {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.homePage .emby-scrollbuttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homePage .itemsContainer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Butoane scroll stilizate */
|
||||
.emby-scrollbuttons-button {
|
||||
background: var(--primary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
border-radius: var(--radius-full) !important;
|
||||
transition: var(--transition-normal) !important;
|
||||
}
|
||||
|
||||
.emby-scrollbuttons-button:hover {
|
||||
background: var(--primary-hover) !important;
|
||||
transform: scale(1.1) !important;
|
||||
box-shadow: var(--glow-primary) !important;
|
||||
}
|
||||
|
||||
/* Loading animations moderne */
|
||||
.mdl-spinner {
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 3px solid var(--border-primary) !important;
|
||||
border-top: 3px solid var(--primary) !important;
|
||||
border-radius: var(--radius-full) !important;
|
||||
animation: spin 1s linear infinite !important;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
* 📋 INFORMAȚII FINALE
|
||||
* ======================================== */
|
||||
|
||||
/*
|
||||
* 🎨 JELLYFIN MODERN PROFESSIONAL THEME v6.0 - FIXED
|
||||
*
|
||||
* ✅ PROBLEME REZOLVATE:
|
||||
* - Imaginile din carduri sunt acum vizibile
|
||||
* - Backdrop images funcționează corect
|
||||
* - Butoanele de navigare sunt restaurate
|
||||
* - Avatar utilizator este vizibil
|
||||
* - Meniul lateral funcționează complet
|
||||
*
|
||||
* ✨ CARACTERISTICI:
|
||||
* - Design modern cu glassmorphism
|
||||
* - Culori neutre elegante
|
||||
* - Animații subtile și fluide
|
||||
* - Responsive design perfect
|
||||
* - Optimizat pentru performanță
|
||||
* - Accesibilitate îmbunătățită
|
||||
*
|
||||
* 📋 INSTALARE:
|
||||
* @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css');
|
||||
*
|
||||
* 🎬 Bucură-te de experiența Jellyfin modernă și profesională! ✨
|
||||
*/
|
||||
|
||||
|
||||
Reference in New Issue
Block a user