diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 0312f4f..bada84c 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -423,11 +423,6 @@ html { margin-top: unset; } -/* This adds a light tint on the backdrop on phones */ -.layout-mobile .detailPageWrapperContainer { - background: rgb(17 24 39 / 40%); -} - .layout-desktop .detailPageWrapperContainer { background: transparent; min-height: calc(100vh - 13em); @@ -496,10 +491,6 @@ html { background-color: transparent; } -.itemBackdrop { - height: 13em; -} - .mediaInfoItem { border-radius: var(--smallRadius); font-weight: 500; @@ -580,7 +571,6 @@ html { @media (orientation: landscape) and (min-width: 40em) { .layout-mobile .itemBackdrop { height: 40vh; - opacity: .10; } .layout-mobile .detailPageWrapperContainer { @@ -636,18 +626,6 @@ html { } } -.layout-mobile .itemBackdrop { - margin-top: 0; - position: sticky; - top: -30%; - mask: linear-gradient(180deg, black 50%, transparent); -} - -.layout-tv .itemBackdrop { - display: block; - height: 13vh; -} - h2 { font-size: 1.25em; } @@ -714,6 +692,12 @@ html { } } +.backdropImageFadeIn +{ + transform-origin: bottom left; + animation: scaleUp 3s ease-out forwards; +} + @keyframes moveDown { from { transform: translateY(-2em) ; @@ -726,15 +710,6 @@ html { } } -.backdropImageFadeIn -{ - transform-origin: bottom left; - animation: scaleUp 3s ease-out forwards; -} - -.layout-mobile .itemBackdrop{ - animation: moveDown 1s ease-out forwards; -} .detailLogo { display: none; @@ -745,7 +720,6 @@ html { transform: translateY(-90%); opacity: 0; } - to { transform: translateY(-100%); opacity: 1; @@ -764,6 +738,23 @@ html { animation: moveUp 1s ease-out forwards; } +.layout-mobile .itemBackdrop { + margin-top: 0; + position: sticky; + top: -30%; + mask: linear-gradient(180deg, rgba(0,0,0,.75) 50%, transparent); + animation: moveDown 1s ease-out forwards; +} + +.layout-desktop .itemBackdrop{ + height: 13em; +} + +.layout-tv .itemBackdrop { + display: block; + height: 13vh; +} + .appfooter { background-color: var(--headerColor) !important; backdrop-filter: var(--blurDefault) !important;