Removed black background from primary container

andromeda.css

@@ -12,68 +12,6 @@
     }
 }
 
-/* ============================== */
-/*  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 "images"
-/* ============================== */
-.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;
-}
-
 /* ============================== */
 /*  Header
 /* ============================== */
@@ -83,7 +21,7 @@
 }
 
 /* ============================== */
-/*  Library page
+/*  Media detail page
 /* ============================== */
 /* Background */
 .layout-desktop .itemBackdrop {
@@ -103,13 +41,11 @@
     background-color: rgba(0, 0, 0, 0.86);
 }
 
-/* Logo */
-.libraryPage.itemDetailPage::before {
-    display: block;
-    height: calc(30vw - var(--logo-height));
-    max-height: 13.35em;
-    content: "";
+.detailPagePrimaryContainer {
+    background-color: transparent;
 }
+
+/* Logo */
 .layout-desktop .libraryPage.itemDetailPage::before {
     height: calc(30vw - var(--logo-height));
     max-height: 13.35em;
@@ -117,6 +53,16 @@
 .layout-mobile .libraryPage.itemDetailPage::before {
     height: 10.3em;
 }
+.libraryPage.itemDetailPage::before {
+    display: block;
+    height: calc(30vw - var(--logo-height));
+    max-height: 13.35em;
+    content: "";
+}
+
+.layout-mobile .detailLogo {
+    display: block;
+}
 .detailLogo {
     top: unset;
     right: unset;
@@ -131,9 +77,6 @@
 
     background-position: bottom;
 }
-.layout-mobile .detailLogo {
-    display: block;
-}
 
 /* Poster */
 .detailImageContainer {
@@ -141,6 +84,9 @@
 }
 
 /* Detail ribbon */
+.layout-mobile .infoWrapper {
+    padding-left: unset !important;
+}
 .detailRibbon {
     height: unset !important;
     padding: unset !important;
@@ -153,9 +99,6 @@
 
     background: rgba(0,0,0,0) !important;
 }
-.layout-mobile .infoWrapper {
-    padding-left: unset !important;
-}
 
 /* Media title */
 .nameContainer h1 {
@@ -190,12 +133,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 {
@@ -264,16 +207,16 @@
 }
 
 /* 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 */
 .layout-desktop .childrenItemsContainer {

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;
+}