From 1048ff3ce9ae83c827073e72f51f4e96346c9ac2 Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Fri, 13 Jun 2025 11:25:33 -0700 Subject: [PATCH] New: Added gap between cards on desktop and TV Fix: Calculated the card sizes precisely Fix: Aligned the cards more evenly Fix: Set Consistent side paddings dev: Made the code more readable and manageable --- Theme/ElegantFin-theme-nightly.css | 171 +++++++++++++++++++++-------- 1 file changed, 124 insertions(+), 47 deletions(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 26719ee..20cbc12 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -80,6 +80,8 @@ --borderWidth: .06em; --borderWidthDouble: .12em; + --sidePadding: 3.3%; + --itemColumnGap: 1em; --itemPageNegativeSpace: max(17vh, 10em); /* Set to 50% to center the play button in the overlay. */ @@ -108,6 +110,11 @@ html { -webkit-tap-highlight-color: transparent !important; } +.layout-mobile { + --itemColumnGap: 0em; + --sidePadding: 5%; +} + /* Material Icons Round */ /* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */ @font-face { @@ -435,28 +442,35 @@ html { font-size: small; } -.smallBackdropCard, -.squareCard, -.backdropCard, -.bannerCard { - width: 46%; -} - .portraitCard { min-width: 5em; } +.bannerCard { + --cardCount: 2; +} + /* if the window width is equal to or more than (at minimum) 150em then the code in the query will trigger */ /* 14 posters, 10 thumbs */ @media (min-width: 150em) { .portraitCard, .squareCard { - width: 6.6% !important; + --cardCount: 14; } + .overflowPortraitCard, + .overflowSquareCard { + --cardCount: 13; + } + + .squareCard:has(.cardFooter), .backdropCard { - width: 9.5%; + --cardCount: 10; + } + + .overflowBackdropCard { + --cardCount: 9; } } @@ -466,11 +480,21 @@ html { .portraitCard, .squareCard { - width: 10.4% !important; + --cardCount: 9; } + .overflowPortraitCard, + .overflowSquareCard { + --cardCount: 8; + } + + .squareCard:has(.cardFooter), .backdropCard { - width: 13.6%; + --cardCount: 7; + } + + .overflowBackdropCard { + --cardCount: 6; } } @@ -479,11 +503,18 @@ html { .portraitCard, .squareCard { - width: 13.5% !important; + --cardCount: 7; } + .overflowPortraitCard, + .overflowSquareCard, + .squareCard:has(.cardFooter), .backdropCard { - width: 15.8%; + --cardCount: 6; + } + + .overflowBackdropCard { + --cardCount: 5; } } @@ -492,11 +523,18 @@ html { .portraitCard, .squareCard { - width: 15.2% !important; + --cardCount: 6; } + .overflowPortraitCard, + .overflowSquareCard, + .squareCard:has(.cardFooter), .backdropCard { - width: 18.4%; + --cardCount: 5; + } + + .overflowBackdropCard { + --cardCount: 4; } } @@ -505,15 +543,18 @@ html { .portraitCard, .squareCard { - width: 17.9% !important; - } - - .squareCard:has(.cardFooter) { - width: 23% !important; + --cardCount: 5; } + .overflowPortraitCard, + .overflowSquareCard, + .squareCard:has(.cardFooter), .backdropCard { - width: 23.3%; + --cardCount: 4; + } + + .overflowBackdropCard { + --cardCount: 3; } } @@ -522,15 +563,18 @@ html { .portraitCard, .squareCard { - width: 22.3% !important; - } - - .squareCard:has(.cardFooter) { - width: 30.2% !important; + --cardCount: 4; } + .overflowPortraitCard, + .overflowSquareCard, + .squareCard:has(.cardFooter), .backdropCard { - width: 30.7%; + --cardCount: 3; + } + + .overflowBackdropCard { + --cardCount: 2; } } @@ -538,22 +582,30 @@ html { @media (max-width: 30em) { .portraitCard, - .squareCard { - width: 28.8% !important; + .squareCard, + .overflowPortraitCard, + .overflowSquareCard { + --cardCount: 3; } .layout-mobile .portraitCard, - .layout-mobile .squareCard { - width: 29.8% !important; + .layout-mobile .squareCard, + .layout-mobile .overflowPortraitCard, + .layout-mobile .overflowSquareCard { + --cardCount: 3; } - .squareCard:has(.cardFooter) { - width: 46.5% !important; + .squareCard:has(.cardFooter), + .backdropCard, + .overflowBackdropCard { + --cardCount: 2; } +} - .backdropCard { - width: 46%; - } +.card { + box-sizing: border-box; + width: var(--cardWidth) !important; + --cardWidth: calc((99vw - (var(--sidePadding) * 2)) / var(--cardCount) - var(--itemColumnGap)); } .detailPageWrapperContainer { @@ -624,6 +676,16 @@ html { padding-inline: 5%; } +.layout-desktop .emby-scroller-container, +.layout-desktop .emby-scroller, +.layout-desktop .scrollX { + --itemColumnGap: 0.5em; +} + +.itemsContainer { + column-gap: var(--itemColumnGap); +} + .layout-desktop .sectionTitle, .layout-tv .sectionTitle { font-size: 1.5rem !important; @@ -691,7 +753,11 @@ html { .layout-desktop .detailRibbon { height: auto !important; margin-top: unset !important; - /* padding-left: max(env(safe-area-inset-right), 3.3%) !important; */ +} + +.layout-desktop [dir=ltr] .detailPagePrimaryContainer, +.layout-tv [dir=ltr] .detailPagePrimaryContainer { + padding-left: var(--sidePadding); } @keyframes animMoveDown { @@ -888,19 +954,19 @@ html { } - .layout-mobile .overflowSquareCard { + /* .layout-mobile .overflowSquareCard { width: 27vw; - } + } */ /* two portrait cards and three backdrop cards in cast page */ - .layout-mobile .overflowPortraitCard { + /* .layout-mobile .overflowPortraitCard { width: 27vw; - } + } */ - .layout-mobile .overflowBackdropCard, + /* .layout-mobile .overflowBackdropCard, .layout-mobile .overflowSmallBackdropCard { width: 42vw; - } + } */ /* .layout-mobile #homeTab .overflowPortraitCard { width: 40vw; @@ -926,7 +992,12 @@ html { @media (orientation: landscape) and (max-height: 40em) { - .overflowPortraitCard, + .card { + --cardWidth: calc((60vw - (var(--sidePadding) * 2)) / var(--cardCount) - var(--itemColumnGap)); + } + + + /* .overflowPortraitCard, .overflowSquareCard { width: 13vw; } @@ -944,7 +1015,7 @@ html { .backdropCard { width: 23%; - } + } */ } h2 { @@ -2216,11 +2287,17 @@ div[data-role=controlgroup] a.ui-btn-active { } [dir=ltr] .padded-left.vertical-wrap:not(div:has(.homeLibraryButton)) { - padding-left: 5% !important; + padding-left: var(--sidePadding) !important; } [dir=ltr] .padded-right.vertical-wrap:not(div:has(.homeLibraryButton)) { - padding-right: 5% !important; + padding-right: var(--sidePadding) !important; +} + +[dir=ltr] .detailPageContent, +.content-primary { + padding-left: var(--sidePadding) !important; + padding-right: var(--sidePadding) !important; } /* this removes right padding from cast page sections to place cards evenly*/