Apdate CSS
This commit is contained in:
270
edd.css
270
edd.css
@@ -2579,7 +2579,270 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
/* 💡 PERSONALIZARE NEXUS:
|
||||
/* ========================================
|
||||
* ✨ ÎMBUNĂTĂȚIRI INSPIRATE DIN DOCUMENTAȚIA JELLYFIN ✨
|
||||
* ======================================== */
|
||||
|
||||
/* Played/Watched Indicators cu culori elegante */
|
||||
.playedIndicator {
|
||||
background: var(--elegant-success) !important;
|
||||
border-radius: var(--elegant-radius-full) !important;
|
||||
box-shadow: var(--elegant-glow-subtle) !important;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background: rgba(99, 102, 241, 0.8) !important;
|
||||
color: var(--elegant-text-primary) !important;
|
||||
border-radius: var(--elegant-radius-md) !important;
|
||||
font-weight: 600 !important;
|
||||
box-shadow: var(--elegant-shadow-sm) !important;
|
||||
}
|
||||
|
||||
.countIndicator {
|
||||
background: rgba(139, 92, 246, 0.8) !important;
|
||||
color: var(--elegant-text-primary) !important;
|
||||
border-radius: var(--elegant-radius-full) !important;
|
||||
font-weight: 600 !important;
|
||||
box-shadow: var(--elegant-shadow-sm) !important;
|
||||
}
|
||||
|
||||
/* Imagini cu colțuri rotunjite elegante */
|
||||
.cardContent-button,
|
||||
.itemDetailImage {
|
||||
border-radius: var(--elegant-radius-lg) !important;
|
||||
transition: var(--elegant-transition-normal) !important;
|
||||
}
|
||||
|
||||
/* Tab buttons mărite pentru accesibilitate mai bună */
|
||||
.headerTabs.sectionTabs {
|
||||
text-size-adjust: 110%;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
padding: 1.2em 1.4em !important;
|
||||
border-radius: var(--elegant-radius-md) !important;
|
||||
transition: var(--elegant-transition-normal) !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.emby-tab-button:hover {
|
||||
background: rgba(99, 102, 241, 0.1) !important;
|
||||
color: var(--elegant-primary) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.emby-tab-button.emby-tab-button-active {
|
||||
background: var(--elegant-primary) !important;
|
||||
color: var(--elegant-text-primary) !important;
|
||||
box-shadow: var(--elegant-glow-primary) !important;
|
||||
}
|
||||
|
||||
/* Episode previews mai compacte și elegante */
|
||||
.listItemImage.listItemImage-large.itemAction.lazy {
|
||||
height: 110px !important;
|
||||
border-radius: var(--elegant-radius-md) !important;
|
||||
transition: var(--elegant-transition-normal) !important;
|
||||
}
|
||||
|
||||
.listItem-content {
|
||||
height: 115px !important;
|
||||
}
|
||||
|
||||
.secondary.listItem-overview.listItemBodyText {
|
||||
height: 61px !important;
|
||||
margin: 0 !important;
|
||||
color: var(--elegant-text-muted) !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
.listItemImage.listItemImage-large.itemAction.lazy:hover {
|
||||
transform: scale(1.02) !important;
|
||||
box-shadow: var(--elegant-shadow-lg) !important;
|
||||
}
|
||||
|
||||
/* Cast & Crew stilizat și compact */
|
||||
#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata,
|
||||
#castContent .card.overflowPortraitCard.personCard.card-withuserdata {
|
||||
width: 4.2cm !important;
|
||||
font-size: 90% !important;
|
||||
transition: var(--elegant-transition-normal) !important;
|
||||
}
|
||||
|
||||
#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: var(--elegant-radius-lg) !important;
|
||||
}
|
||||
|
||||
#castContent .cardScalable {
|
||||
width: 3.8cm !important;
|
||||
height: 3.8cm !important;
|
||||
border-radius: var(--elegant-radius-lg) !important;
|
||||
}
|
||||
|
||||
#castContent .cardOverlayContainer.itemAction {
|
||||
border-radius: var(--elegant-radius-lg) !important;
|
||||
}
|
||||
|
||||
#castContent .cardOverlayButton-br {
|
||||
bottom: 4%;
|
||||
right: 15%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Îmbunătățiri pentru accesibilitate și responsive design */
|
||||
@media all and (min-width: 50em) {
|
||||
.homePage .emby-scroller {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.homePage .emby-scrollbuttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homePage .itemsContainer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Butoane de scroll poziționare îmbunătățită */
|
||||
.emby-scrollbuttons {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.emby-scrollbuttons-button {
|
||||
pointer-events: initial;
|
||||
background: rgba(99, 102, 241, 0.8) !important;
|
||||
color: var(--elegant-text-primary) !important;
|
||||
border-radius: var(--elegant-radius-full) !important;
|
||||
transition: var(--elegant-transition-normal) !important;
|
||||
}
|
||||
|
||||
.emby-scrollbuttons-button:hover {
|
||||
background: var(--elegant-primary) !important;
|
||||
transform: scale(1.1) !important;
|
||||
box-shadow: var(--elegant-glow-primary) !important;
|
||||
}
|
||||
|
||||
/* External links vizibile pe mobile */
|
||||
.layout-mobile .itemExternalLinks {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Link-uri externe stilizate elegant */
|
||||
.itemExternalLinks a {
|
||||
background: rgba(99, 102, 241, 0.1) !important;
|
||||
color: var(--elegant-primary) !important;
|
||||
border: 1px solid var(--elegant-border-accent) !important;
|
||||
border-radius: var(--elegant-radius-md) !important;
|
||||
padding: 8px 12px !important;
|
||||
margin: 4px !important;
|
||||
transition: var(--elegant-transition-normal) !important;
|
||||
text-decoration: none !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.itemExternalLinks a:hover {
|
||||
background: var(--elegant-primary) !important;
|
||||
color: var(--elegant-text-primary) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: var(--elegant-shadow-md) !important;
|
||||
}
|
||||
|
||||
/* Îmbunătățiri pentru Star Ratings */
|
||||
div.starRatingContainer {
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
.starRating {
|
||||
color: var(--elegant-accent) !important;
|
||||
filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.3)) !important;
|
||||
}
|
||||
|
||||
/* Îmbunătățiri pentru Progress Bars în liste */
|
||||
.itemProgressBar {
|
||||
background: rgba(15, 23, 42, 0.6) !important;
|
||||
border-radius: var(--elegant-radius-full) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.itemProgressBarForeground {
|
||||
background: linear-gradient(90deg, var(--elegant-primary), var(--elegant-secondary)) !important;
|
||||
border-radius: var(--elegant-radius-full) !important;
|
||||
box-shadow: 0 0 8px rgba(99, 102, 241, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Îmbunătățiri pentru Media Info Badges */
|
||||
.mediaInfoBadge {
|
||||
background: rgba(99, 102, 241, 0.8) !important;
|
||||
color: var(--elegant-text-primary) !important;
|
||||
border: 1px solid var(--elegant-border-accent) !important;
|
||||
border-radius: var(--elegant-radius-md) !important;
|
||||
padding: 4px 8px !important;
|
||||
font-size: 0.7rem !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
box-shadow: var(--elegant-shadow-sm) !important;
|
||||
}
|
||||
|
||||
/* Responsive design pentru tablete */
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.cardBox {
|
||||
margin: 8px !important;
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
padding: 1em 1.2em !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.headerTabs.sectionTabs {
|
||||
font-size: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive design pentru mobile */
|
||||
@media (max-width: 767px) {
|
||||
.cardBox {
|
||||
margin: 4px !important;
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
padding: 0.8em 1em !important;
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.headerTabs.sectionTabs {
|
||||
font-size: 95% !important;
|
||||
}
|
||||
|
||||
.listItemImage.listItemImage-large.itemAction.lazy {
|
||||
height: 90px !important;
|
||||
}
|
||||
|
||||
.listItem-content {
|
||||
height: 95px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 💡 PERSONALIZARE ELEGANT:
|
||||
* Modifică variabilele --nexus-* din secțiunea :root
|
||||
* pentru a adapta tema la preferințele tale cosmice.
|
||||
*
|
||||
@@ -2587,9 +2850,10 @@ html {
|
||||
* @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css');
|
||||
*
|
||||
* 👨💻 Autor: EDD
|
||||
* 🚀 Versiune: 3.0 NEXUS PROFESSIONAL
|
||||
* 🚀 Versiune: 5.0 ELEGANT REFINED + JELLYFIN DOCS
|
||||
* 📅 Data: 2025
|
||||
* 🌐 Repository: https://git.eddmanoo.cloud/eddmanoo/jellyfincss
|
||||
* 📚 Inspirat din: Documentația oficială Jellyfin CSS Customization
|
||||
*
|
||||
* 🎬 Bucură-te de experiența Jellyfin NEXUS de nivel cosmic! ✨🌌
|
||||
* ✨ Bucură-te de experiența Jellyfin ELEGANT cu imagini clare și design rafinat! <20>💫
|
||||
*/
|
||||
Reference in New Issue
Block a user