diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 093b353..11effac 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -325,7 +325,7 @@ html { background: transparent; } -.layout-desktop .card.card-hoverable .cardOverlayContainer:after { +.card.card-hoverable .cardOverlayContainer:after { content: ""; transition: .5s; position: absolute; @@ -334,19 +334,19 @@ html { background: var(--hoverGradientV); } -.layout-desktop .card.card-hoverable:hover .cardOverlayContainer:after { +.card.card-hoverable:hover .cardOverlayContainer:after { transform: translateY(50%) translateX(0); opacity: 0; } -.layout-desktop .backdropCard.card-hoverable .cardOverlayContainer:after, -.layout-desktop .overflowBackdropCard.card-hoverable .cardOverlayContainer:after { +.backdropCard.card-hoverable .cardOverlayContainer:after, +.overflowBackdropCard.card-hoverable .cardOverlayContainer:after { transform: translateY(0) translateX(-50%); background: var(--hoverGradientH); } -.layout-desktop .backdropCard.card-hoverable:hover .cardOverlayContainer:after, -.layout-desktop .overflowBackdropCard.card-hoverable:hover .cardOverlayContainer:after { +.backdropCard.card-hoverable:hover .cardOverlayContainer:after, +.overflowBackdropCard.card-hoverable:hover .cardOverlayContainer:after { transform: translateY(0) translateX(50%); opacity: 0; } @@ -846,8 +846,8 @@ html { } .layout-mobile .detailImageContainer .card { - -webkit-filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, 0.25)); - filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, 0.25)); + -webkit-filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, .25)); + filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, .25)); } /* this brings the buttons and title to the center in main media page */ @@ -902,15 +902,11 @@ html { display: block; } -.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop::after { - content: ""; - position: absolute; - inset: 0; - backdrop-filter: brightness(.5); - /* mask: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, transparent 35%); */ +#itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop { + filter: brightness(.5); } -.layout-mobile .overflowBackdropCard .cardImageContainer .cardImageIcon { +.layout-mobile .cardImageIcon { font-size: 3.5em; } @@ -1079,8 +1075,12 @@ html { } .backgroundContainer.withBackdrop { - opacity: 1; - background: linear-gradient(0deg, var(--darkerGradientPoint), transparent 100%); + opacity: .9; + background: linear-gradient(0deg, var(--darkerGradientPoint), 45%, rgba(17, 24, 39, .25)); +} + +.withSectionTabs .backgroundContainer.withBackdrop { + background: var(--darkerGradientPoint); } @keyframes animScaleUp { @@ -2890,7 +2890,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { background: var(--activeColor); } -#indexPage:not(.hide) .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardPadder-overflowBackdrop { +#homeTab .overflowBackdropCard[data-isfolder="true"] .cardPadder-overflowBackdrop { padding-bottom: 50%; } @@ -3152,13 +3152,11 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { background-color: transparent; background: none; border: none; - /* transition: .5s ease-in-out; */ - /* transition-property: background-color, backdrop-filter, transform, border-width; */ } .skinHeader-withBackground.semiTransparent .headerButton, -.layout-mobile .skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) .headerButton { - text-shadow: 1px 1px 0px #00000080; +.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) .headerButton { + text-shadow: 1px 1px 0 #00000080; } /* this keeps the header elements aligned when its height is modified */