boris/ElegantFin
1
0
Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2025-11-07 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

New: Refined the layout of horizontal scrollers

Browse Source 
Aligned the horizontal lists with their container heading, and reduced the margin between the list and title for a tighter, more cohesive layout.
This commit is contained in:
lscambo13
2025-10-25 12:58:12 -07:00
parent 5ab39dd7e2
commit 2ea0f55e6c
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Theme/ElegantFin-theme-nightly.css
View File

@@ -140,7 +140,6 @@ html {
.layout-mobile { .layout-mobile {
--itemColumnGap: 0; --itemColumnGap: 0;
--sidePadding: 5%;
--headerColorGradient: var(--headerColorGradientAlt); --headerColorGradient: var(--headerColorGradientAlt);
--blurLargest: blur(12px); --blurLargest: blur(12px);
--headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent); --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
@@ -844,6 +843,10 @@ html {
} }
} }
.layout-mobile .card {
--sidePadding: 5%;
}
.card { .card {
--effectiveWidth: calc((99vw - (var(--sidePadding) * 2))); --effectiveWidth: calc((99vw - (var(--sidePadding) * 2)));
--cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap)); --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap));
@@ -967,6 +970,7 @@ html {
.verticalSection.emby-scroller-container>h2.sectionTitle.sectionTitle-cards { .verticalSection.emby-scroller-container>h2.sectionTitle.sectionTitle-cards {
padding-top: 1.25em !important; padding-top: 1.25em !important;
margin: 0 0 -.5em 0;
} }
#itemDetailPage .emby-scroller-container, #itemDetailPage .emby-scroller-container,
@@ -974,6 +978,7 @@ html {
#itemDetailPage .scrollX { #itemDetailPage .scrollX {
margin: 0 calc(-1 * var(--sidePadding)); margin: 0 calc(-1 * var(--sidePadding));
padding: 0 var(--sidePadding); padding: 0 var(--sidePadding);
padding-left: calc(var(--sidePadding) - .375em);
} }
.layout-desktop .emby-scroller-container, .layout-desktop .emby-scroller-container,
@@ -982,6 +987,11 @@ html {
--itemColumnGap: 0.5em; --itemColumnGap: 0.5em;
} }
.emby-scroller,
.hiddenScrollX.scrollX {
padding-left: calc(var(--sidePadding) - .375em);
}
.itemsContainer:not(.editorsChoiceItemsContainer) { .itemsContainer:not(.editorsChoiceItemsContainer) {
column-gap: var(--itemColumnGap); column-gap: var(--itemColumnGap);
} }
@@ -993,14 +1003,16 @@ html {
.sectionTitleContainer-cards { .sectionTitleContainer-cards {
padding-top: 0; padding-top: 0;
} margin: .75em 0 -.75em 0;
.sectionTitleContainer+.emby-scrollbuttons {
padding-top: 0;
} }
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { .layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
text-align: left; text-align: left;
margin: .75em 0 -.75em 0;
}
.sectionTitleContainer+.emby-scrollbuttons {
padding-top: 0;
} }
.emby-scrollbuttons-button.paper-icon-button-light>.material-icons { .emby-scrollbuttons-button.paper-icon-button-light>.material-icons {