Applied itemsContainer styling from desktop to mobile as well

andromeda.css

@@ -1,3 +1,4 @@
+/* Set size of logo, depending on orientation */
 @media (orientation: landscape) {
     :root {
         --logo-width: clamp(34.08em, 40vw, 56.89em);
@@ -12,83 +13,111 @@
     }
 }
 
-/* ============================== */
+/* Set size of background, depending on screen width */
-/*  Add fonts
+@media (max-width: 100em) {
-/* ============================== */
+    /* Set static graphic width on smaller screens */
-@font-face {
+    :root {
-    font-display: swap;
+        --background-width: 100rem;
-    font-family: "Quicksand";
+    }
-    font-style: normal;
+}
-    font-weight: 700;
+@media (min-width: 100em) {
-    src: url("../web/assets/fonts/quicksand-latin-700.woff2") format("woff2");
+    /* Set graphic to width of screen */
+    :root {
+        --background-width: 100%;
+    }
 }
 
 /* ============================== */
-/*  Generate library "images"
+/*  Global
 /* ============================== */
-.card[data-type="CollectionFolder"] .cardImageContainer.coveredImage,
+/* Enable rem to match media queries */
-.card[data-type="UserView"] .cardImageContainer.coveredImage,
+html {
-.card[data-type="CollectionFolder"] .cardImageContainer.defaultCardBackground,
+    font-size: unset !important;
-.card[data-type="UserView"] .cardImageContainer.defaultCardBackground {
-    container-type: size;
-    background-color: transparent;
-    background-image: none !important; /* Remove fallback image when custom CSS is used */
-    opacity: 1 !important; /* Disable blink because of lazy loading */
 }
-.card[data-type="CollectionFolder"] .cardImageContainer.coveredImage::before,
+body {
-.card[data-type="UserView"] .cardImageContainer.coveredImage::before,
+    font-size: 93% !important;
-.card[data-type="CollectionFolder"] .cardImageContainer.defaultCardBackground::before,
-.card[data-type="UserView"] .cardImageContainer.defaultCardBackground::before {
-    /* Get library name */
-    content: attr(aria-label);
-
-    /* Set font */
-    font-family: "Quicksand";
-    font-weight: 700;
-
-    /* Fill card */
-    font-size: 3.5em; /* Fallback (for Media Player) */
-    font-size: 30cqmin; /* Preferred */
-
-    /* Add gradient */
-    background: linear-gradient(90deg, #9757ae 0%, #2396d4 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    -webkit-text-fill-color: transparent;
-    text-fill-color: transparent;
-}
-/* Hide icon when no fallback image is used */
-.card[data-type="CollectionFolder"] .cardImageIcon,
-.card[data-type="UserView"] .cardImageIcon {
-    display: none;
-}
-/* Hide blur because of lazy loading */
-.card[data-type="CollectionFolder"] .blurhash-canvas,
-.card[data-type="UserView"] .blurhash-canvas {
-    display: none;
-}
-/* Hide library card titles */
-.card[data-type="CollectionFolder"] .cardText,
-.card[data-type="UserView"] .cardText {
-    display: none;
 }
 
-/* ============================== */
+/* Add Milky Way graphic to header */
-/*  Header
-/* ============================== */
 .skinHeader {
+    /* Position graphic behind header */
+    margin-top: calc(-1 * (0.2202 * var(--background-width)));
+    height: 100%;
+    padding-top: calc(0.2202 * var(--background-width));
+    /* Add graphic */
     backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgba(0, 0, 0, 0) !important;
+    background-image: url("https://static.zomerkoningin.nl/andromeda/images/milkyway_header.webp");
+    background-repeat: no-repeat;
+    background-size: var(--background-width) auto;
+    background-position-x: center;
+    background-position-y: top;
+    /* Pass-through clicks */
+    pointer-events: none;
+    /* Keep header visible when scrolling on phone */
+    transform: unset !important;
+}
+.skinHeader > .headerTop {
+    flex-grow: 0 !important;
+}
+.skinHeader > * {
+    /* Limit pass-through to graphic only */
+    pointer-events: auto;
+}
+@media (min-width: 100em) {
+    /* Push content down from under graphic on wider screens */
+    div.skinBody > div.page {
+        padding-top: 15rem !important;
+    }
+}
+
+/* Add starry background */
+.backdropContainer {
+    background-image: url("https://static.zomerkoningin.nl/andromeda/images/nightsky.webp");
+    background-size: var(--background-width) auto;
+    background-position: center center;
+}
+.backgroundContainer {
+    display: none;
+}
+
+/* Add fade-out to scrollable lists */
+div:has(> div > .emby-scroller-container) {
+    mask: linear-gradient(90deg, transparent 0, black 12.5%), linear-gradient(270deg, transparent 0, black 12.5%);
+    mask-composite: intersect;
 }
 
 /* ============================== */
-/*  Library page
+/*  Homepage
 /* ============================== */
-/* Background */
+/* Center sections on desktop */
+.layout-desktop .sections > div {
+    margin-left: auto;
+    margin-right: auto;
+    width: 75%;
+    padding-left: unset !important;
+    padding-right: unset !important;
+}
+
+/* Match padding to other pages on mobile */
+.layout-mobile .verticalSection > * {
+    padding-left: 5% !important;
+    padding-right: 5% !important;
+}
+
+/* Remove margin in favour of flex gap */
+.itemsContainer > * {
+    margin: unset !important;
+}
+
+/* ============================== */
+/*  Media detail page
+/* ============================== */
+/* Remove backdrop used as padding on desktop */
 .layout-desktop .itemBackdrop {
     display: none;
 }
+/* Position backdrop on mobile */
 .layout-mobile .itemBackdrop {
     margin-top: unset;
 
@@ -99,24 +128,39 @@
     width: 100%;
     height: 100%;
 }
-.layout-mobile .backgroundContainer {
+
-    background-color: rgba(0, 0, 0, 0.86);
+/* Remove shadow in favour of starry background */
+.detailPagePrimaryContainer {
+    background-color: transparent !important;
 }
 
-/* Logo */
+/* Show stars in background */
-.libraryPage.itemDetailPage::before {
+.layout-desktop .backdropContainer > .backdropImage {
-    display: block;
+    opacity: 0.14 !important;
-    height: calc(30vw - var(--logo-height));
-    max-height: 13.35em;
-    content: "";
 }
+.layout-mobile .itemBackdrop {
+    opacity: 0.14 !important;
+}
+
+/* Instead of an element as padding, use a pseudo-element */
 .layout-desktop .libraryPage.itemDetailPage::before {
+    /* Increase padding along screen width */
     height: calc(30vw - var(--logo-height));
     max-height: 13.35em;
 }
 .layout-mobile .libraryPage.itemDetailPage::before {
+    /* Use static padding on mobile */
     height: 10.3em;
 }
+.libraryPage.itemDetailPage::before {
+    display: block;
+    content: "";
+}
+
+/* Position logo after padding */
+.layout-mobile .detailLogo {
+    display: block;
+}
 .detailLogo {
     top: unset;
     right: unset;
@@ -131,16 +175,16 @@
 
     background-position: bottom;
 }
-.layout-mobile .detailLogo {
-    display: block;
-}
 
-/* Poster */
+/* Hide poster */
 .detailImageContainer {
     display: none;
 }
 
 /* Detail ribbon */
+.layout-mobile .infoWrapper {
+    padding-left: unset !important;
+}
 .detailRibbon {
     height: unset !important;
     padding: unset !important;
@@ -153,8 +197,11 @@
 
     background: rgba(0,0,0,0) !important;
 }
-.layout-mobile .infoWrapper {
+
-    padding-left: unset !important;
+/* Add padding to titles on mobile */
+.layout-mobile .nameContainer > * {
+    padding-left: 5% !important;
+    padding-right: 5% !important;
 }
 
 /* Media title */
@@ -183,6 +230,26 @@
     font-size: var(--logo-height);
 }
 
+/* Episode title */
+.nameContainer h3.itemName.infoText.subtitle bdi {
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    gap: 1em;
+    font-size: larger;
+
+    /* Hide characters left by moving around season title */
+    text-indent: -1ch;
+    overflow: hidden;
+}
+
+/* Season title */
+.nameContainer h3.itemName.infoText.subtitle bdi [data-type="Season"] {
+    text-indent: 0;
+    font-size: .72em;
+    font-weight: normal;
+}
+
 /* Original title */
 .nameContainer h4 {
     text-align: center;
@@ -190,12 +257,12 @@
 }
 
 /* Buttons */
-.mainDetailButtons {
-    margin-top: 1em;
-}
 .layout-mobile .mainDetailButtons {
     padding-left: unset !important;
 }
+.mainDetailButtons {
+    margin-top: 1em;
+}
 
 /* Primary info (e.g. year, rating, etc.) */
 .itemMiscInfo.itemMiscInfo-primary {
@@ -209,12 +276,17 @@
     background: rgba(0,0,0,0);
 }
 .layout-desktop .detailPageContent {
-    padding: unset !important;
-
     width: 75%;
     margin-left: auto;
     margin-right: auto;
 }
+.layout-mobile .detailPageContent > div > * {
+    padding-left: 5% !important;
+    padding-right: 5% !important;
+}
+.detailPageContent {
+    padding: unset !important;
+}
 
 /* Disable right padding */
 .layout-desktop .detailPageContent .padded-right {
@@ -264,27 +336,38 @@
 }
 
 /* Next Up */
+.layout-mobile .nextUpSection .nextUpItems .overflowBackdropCard {
+    width: 72vw !important;
+    max-width: 27.95em !important;
+}
 .nextUpSection {
     margin-top: 1.8em;
     margin-left: auto;
     margin-right: auto;
     width: unset !important;
 }
-.layout-mobile .nextUpSection .nextUpItems .overflowBackdropCard {
-    width: 72vw !important;
-    max-width: 27.95em !important;
-}
 
-/* Seasons */
+/* List of seasons */
-.layout-desktop .childrenItemsContainer {
+/* Replace margin with gap */
-    padding: unset !important;
+.itemsContainer {
-
+    display: flex;
-    justify-content: center;
     gap: 1.2em;
 }
-.layout-desktop .childrenItemsContainer > .card > .cardBox {
+.itemsContainer > .card > .cardBox {
     margin-right: unset !important;
 }
+.itemsContainer.padded-right:not(.padded-left) {
+    padding: unset !important; /* Remove right padding if left padding is not present */
+}
+.itemsContainer.vertical-wrap {
+    justify-content: center; /* Only center if wrapping is enabled */
+}
+
+@media (min-width: 87.5em) {
+    .overflowPortraitCard, .overflowSquareCard {
+        width: 12.5vw !important;
+    }
+}
 
 /* Scrollable lists */
 .layout-desktop .detailVerticalSection {
@@ -293,15 +376,26 @@
 
 /* Resize episode view */
 .listItem-content {
+    position: relative;
     height: 7.73em; /* Set height of container */
+    --poster-margin: .75em;
+    --poster-width: 19.5vw;
 }
-/* Fit content to container */
+
+/* Resize episode poster */
 .listItem-content .listItemImage.listItemImage-large {
+    margin-right: var(--poster-margin);
+    width: var(--poster-width);
     height: 100%;
+    background-position: 50%;
 }
+
+/* Resize episode body */
 .listItem-content .listItemBody {
-    padding: 0 .75em;
+    position: absolute;
+    left: calc(var(--poster-width) + var(--poster-margin));
     height: 100%;
+    padding: 0 .75em;
     display: flex;
     flex-flow: column;
 }
@@ -317,7 +411,7 @@
     padding-top: .5em;
 }
 
-/* Add fade-out on overflow */
+/* Add fade-out on episode body overflow */
 .listItem-content .listItemBody .listItem-overview p {
     margin: 0;
     height: 100%;
@@ -329,6 +423,30 @@
     ) 100% 50% / 100% 100% repeat-x;
 }
 
+/* Position episode buttons */
+.listItem-content .listViewUserDataButtons {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+/* Only show user data buttons on hover */
+.layout-desktop .listItem-content .listViewUserDataButtons {
+    opacity: 0;
+}
+.layout-desktop .listItem:hover .listItem-content .listViewUserDataButtons {
+    opacity: 1;
+    transition: .2s ease-out;
+}
+
+/* Only show play button on hover */
+.layout-desktop .listItemImageButton.itemAction[data-action="resume"] {
+    opacity: 0;
+}
+.layout-desktop .listItem:hover .listItemImageButton.itemAction[data-action="resume"] {
+    opacity: 1;
+}
+
 /* Floating indicator */
 .innerCardFooter {
     margin: .5em;

library-logos.css

@@ -0,0 +1,61 @@
+/* ============================== */
+/*  Add fonts
+/* ============================== */
+@font-face {
+    font-display: swap;
+    font-family: "Quicksand";
+    font-style: normal;
+    font-weight: 700;
+    src: url("../web/assets/fonts/quicksand-latin-700.woff2") format("woff2");
+}
+
+/* ============================== */
+/*  Generate library logos
+/* ============================== */
+.card[data-type="CollectionFolder"] .cardImageContainer.coveredImage,
+.card[data-type="UserView"] .cardImageContainer.coveredImage,
+.card[data-type="CollectionFolder"] .cardImageContainer.defaultCardBackground,
+.card[data-type="UserView"] .cardImageContainer.defaultCardBackground {
+    container-type: size;
+    background-color: transparent;
+    background-image: none !important; /* Remove fallback image when custom CSS is used */
+    opacity: 1 !important; /* Disable blink because of lazy loading */
+}
+.card[data-type="CollectionFolder"] .cardImageContainer.coveredImage::before,
+.card[data-type="UserView"] .cardImageContainer.coveredImage::before,
+.card[data-type="CollectionFolder"] .cardImageContainer.defaultCardBackground::before,
+.card[data-type="UserView"] .cardImageContainer.defaultCardBackground::before {
+    /* Get library name */
+    content: attr(aria-label);
+
+    /* Set font */
+    font-family: "Quicksand";
+    font-weight: 700;
+
+    /* Fill card */
+    font-size: 3.5em; /* Fallback (for Media Player) */
+    font-size: 30cqmin; /* Preferred */
+
+    /* Add gradient */
+    background: linear-gradient(90deg, #9757ae 0%, #2396d4 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+}
+/* Hide icon when no fallback image is used */
+.card[data-type="CollectionFolder"] .cardImageIcon,
+.card[data-type="UserView"] .cardImageIcon {
+    display: none;
+}
+/* Hide blur because of lazy loading */
+.card[data-type="CollectionFolder"] .blurhash-canvas,
+.card[data-type="UserView"] .blurhash-canvas {
+    display: none;
+}
+/* Hide library card titles */
+.card[data-type="CollectionFolder"] .cardText,
+.card[data-type="UserView"] .cardText {
+    display: none;
+}