Fix: Reduced top padding on some pages to allow more content to be seen

Fix: Corrected some other alignment issues
This commit is contained in:
lscambo13
2025-07-11 12:33:50 -07:00
parent 3847c13bb3
commit da745a0fdc

View File

@@ -54,7 +54,7 @@
/* textures */ /* textures */
--backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint)); --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
--cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), 25%, var(--lighterGradientPoint)); --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), 25%, var(--lighterGradientPoint));
--headerColorGradient: linear-gradient(180deg, rgba(30, 40, 54, .95) 35%, 55%, transparent 90%); --headerColorGradient: linear-gradient(180deg, rgba(30, 40, 54, .95) 30%, 55%, transparent 90%);
--headerBlurMask: linear-gradient(180deg, white 50%, 85%, transparent); --headerBlurMask: linear-gradient(180deg, white 50%, 85%, transparent);
--cardFooterGradient: linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent); --cardFooterGradient: linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent);
@@ -931,7 +931,7 @@ html {
@supports (aspect-ratio: 1 / 1) { @supports (aspect-ratio: 1 / 1) {
.detailLogo { .detailLogo {
display: block; display: block;
top: calc(100vh - 9em - var(--itemPageNegativeSpace)); top: calc(100vh - 10em - var(--itemPageNegativeSpace));
left: 0; left: 0;
width: 40%; width: 40%;
transform: translateY(-100%); transform: translateY(-100%);
@@ -958,7 +958,7 @@ html {
} }
.layout-desktop .itemBackdrop { .layout-desktop .itemBackdrop {
height: calc(100vh - 31vh - var(--itemPageNegativeSpace)) !important; height: calc(100vh - 32vh - var(--itemPageNegativeSpace)) !important;
} }
.layout-mobile .itemBackdrop { .layout-mobile .itemBackdrop {
@@ -999,6 +999,7 @@ html {
.detailImageContainer .card.backdropCard { .detailImageContainer .card.backdropCard {
width: 40vh !important; width: 40vh !important;
max-width: 50vw; max-width: 50vw;
margin-bottom: 2em;
} }
.detailImageContainer .card { .detailImageContainer .card {
@@ -1033,9 +1034,13 @@ html {
padding-left: 0 !important; padding-left: 0 !important;
} }
.layout-mobile .detailImageContainer:has(.card:not(.portraitCard)) {
height: 0;
}
.layout-mobile .detailImageContainer .card { .layout-mobile .detailImageContainer .card {
position: inherit !important; position: inherit !important;
margin-top: -70%; margin-top: -150%;
max-width: 60vw; max-width: 60vw;
/* width: 40vw !important; */ /* width: 40vw !important; */
} }
@@ -1087,8 +1092,12 @@ html {
} }
/* This reduces the top padding in the cast page */ /* This reduces the top padding in the cast page */
#itemDetailPage:has(.btnPlay.hide) .itemBackdrop { #itemDetailPage:has(.detailImageContainer .cardImageIcon.person, .detailImageContainer .cardImageIcon.book) .itemBackdrop {
height: calc(100vh - 25em - var(--itemPageNegativeSpace)) !important; height: calc(100vh - 50vh - var(--itemPageNegativeSpace)) !important;
}
#itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .itemBackdrop {
height: calc(100vh - 45vh - var(--itemPageNegativeSpace)) !important;
} }
.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard, .detailImageContainer .card.squareCard) .itemBackdrop { .layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard, .detailImageContainer .card.squareCard) .itemBackdrop {