From 1984926c7ff09ab5bda893aad91b657177724bc6 Mon Sep 17 00:00:00 2001 From: koningin_samira Date: Sat, 18 Apr 2026 22:38:12 +0200 Subject: [PATCH] Added original css from dashboard --- andromeda.css | 367 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 367 insertions(+) create mode 100644 andromeda.css diff --git a/andromeda.css b/andromeda.css new file mode 100644 index 0000000..27be7b7 --- /dev/null +++ b/andromeda.css @@ -0,0 +1,367 @@ +@media (orientation: landscape) { + :root { + --logo-width: clamp(34.08em, 40vw, 56.89em); + --logo-height: clamp(15.15em, 15vw, 25.28em); + } +} + +@media (orientation: portrait) { + :root { + --logo-width: clamp(0px, 90.78vw, 56.89em); + --logo-height: clamp(0px, 34vw, 56.89em); + } +} + +/* ============================== */ +/* 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 +/* ============================== */ +.skinHeader { + backdrop-filter: none !important; + background-color: rgba(0, 0, 0, 0.4); +} + +/* ============================== */ +/* Library page +/* ============================== */ +/* Background */ +.layout-desktop .itemBackdrop { + display: none; +} +.layout-mobile .itemBackdrop { + margin-top: unset; + + position: fixed; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; +} +.layout-mobile .backgroundContainer { + 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: ""; +} +.layout-desktop .libraryPage.itemDetailPage::before { + height: calc(30vw - var(--logo-height)); + max-height: 13.35em; +} +.layout-mobile .libraryPage.itemDetailPage::before { + height: 10.3em; +} +.detailLogo { + top: unset; + right: unset; + + /* Center horizontally */ + position: relative; + left: 50%; + transform: translate(-50%, 0); + + width: var(--logo-width); + height: var(--logo-height); + + background-position: bottom; +} +.layout-mobile .detailLogo { + display: block; +} + +/* Poster */ +.detailImageContainer { + display: none; +} + +/* Detail ribbon */ +.detailRibbon { + height: unset !important; + padding: unset !important; + + margin-top: 0.5em !important; + + /* Stack items */ + display: flex; + flex-direction: column; + + background: rgba(0,0,0,0) !important; +} +.layout-mobile .infoWrapper { + padding-left: unset !important; +} + +/* Media title */ +.nameContainer h1 { + /* Position on top of logo to keep link */ + position: absolute; + top: calc(-1 * (0.50 * 14.4px) - var(--logo-height)); + left: 0; + right: 0; + margin-left: auto !important; + margin-right: auto !important; + + /* Give it the same size as the logo */ + font-size: unset !important; + width: var(--logo-width); + height: var(--logo-height); + overflow: hidden !important; + + /* Make it invisible while keeping it clickable */ + opacity: 0; + + /* Disable select */ + user-select: none; +} +.nameContainer h1 > * { + font-size: var(--logo-height); +} + +/* Original title */ +.nameContainer h4 { + text-align: center; + opacity: 0.5; +} + +/* Buttons */ +.mainDetailButtons { + margin-top: 1em; +} +.layout-mobile .mainDetailButtons { + padding-left: unset !important; +} + +/* Primary info (e.g. year, rating, etc.) */ +.itemMiscInfo.itemMiscInfo-primary { + margin-top: 0.5em; + justify-content: center; +} + +/* Media content */ +.layout-desktop .detailPageSecondaryContainer { + padding-top: 0; + background: rgba(0,0,0,0); +} +.layout-desktop .detailPageContent { + padding: unset !important; + + width: 75%; + margin-left: auto; + margin-right: auto; +} + +/* Disable right padding */ +.layout-desktop .detailPageContent .padded-right { + padding-right: unset !important; +} + +/* Description and info */ +.layout-desktop .detailPagePrimaryContent { + padding-left: 0; + padding-right: 0; + margin-left: auto; + margin-right: auto; + width: var(--logo-width); + text-align: center; +} +.layout-desktop .detailSectionContent { + padding-top: 1em; +} + +/* Tables (e.g. audio, subtitles, genres, writers, etc.) */ +.layout-desktop .detailPagePrimaryContent .itemDetailsGroup, +.layout-desktop .detailPagePrimaryContent .trackSelections { + margin-left: auto; + margin-right: auto; + width: fit-content; + text-align: left; +} +.layout-desktop .detailPagePrimaryContent .itemDetailsGroup .detailsGroupItem, +.layout-desktop .detailPagePrimaryContent .trackSelections .selectContainer { + width: fit-content; +} +.layout-desktop .detailPagePrimaryContent .itemDetailsGroup .detailsGroupItem .label, +.layout-desktop .detailPagePrimaryContent .trackSelections .selectContainer label { + min-width: 6.25em; + width: fit-content; +} +.layout-desktop .detailPagePrimaryContent .itemDetailsGroup .detailsGroupItem .content, +.layout-desktop .detailPagePrimaryContent .trackSelections .selectContainer select { + width: fit-content; +} +.layout-desktop .detailPagePrimaryContent .trackSelections .selectContainer select { + padding-left: 0.5em; +} +.layout-desktop .detailPagePrimaryContent .trackSelections .selectContainer select:enabled { + padding-left: 1em !important; + padding-right: 2em; +} + +/* Next Up */ +.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 { + padding: unset !important; + + justify-content: center; + gap: 1.2em; +} +.layout-desktop .childrenItemsContainer > .card > .cardBox { + margin-right: unset !important; +} + +/* Scrollable lists */ +.layout-desktop .detailVerticalSection { + width: 100%; +} + +/* Hide second merged movie */ +.card[data-type="Movie"]:has(.mediaSourceIndicator):nth-child(odd) { + display: none; +} +/* Hardcoded fallback for Media Player */ +@supports not selector(:has(.mediaSourceIndicator)) { + .card[data-type="Movie"][data-id="db4b50606515c52da9d175dcc7e8bec3"], + .card[data-type="Movie"][data-id="a3b4d05ccb835f952744019be1a9b181"], + .card[data-type="Movie"][data-id="1b87a264aeeb2cef43d66b68a3ae548c"], + .card[data-type="Movie"][data-id="a6fad08f3efcaaec5755fa476e791118"], + .card[data-type="Movie"][data-id="ef8581bf04ef54f83fdbf6b3cdd84a82"], + .card[data-type="Movie"][data-id="0f681ce8080644cd8079a27e573a7bbd"], + .card[data-type="Movie"][data-id="2c5a0c1a9dd50ea4b0df526d8d204d9e"] { + display: none; + } +} + +/* Resize episode view */ +.listItem-content { + height: 7.73em; /* Set height of container */ +} +/* Fit content to container */ +.listItem-content .listItemImage.listItemImage-large { + height: 100%; +} +.listItem-content .listItemBody { + padding: 0 .75em; + height: 100%; + display: flex; + flex-flow: column; +} +.listItem-content .listItemBody .listItemBodyText:not(.listItem-overview) { + flex-grow: 0; + flex-shrink: 0; + flex-basis: auto; +} +.listItem-content .listItemBody .listItem-overview { + flex-grow: 1; + flex-shrink: 1; + flex-basis: auto; + padding-top: .5em; +} + +/* Add fade-out on overflow */ +.listItem-content .listItemBody .listItem-overview p { + margin: 0; + height: 100%; + + overflow: hidden; + mask: linear-gradient(to bottom, + rgba(0,0,0, 1) 0, rgba(0,0,0, 1) 40%, + rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0 + ) 100% 50% / 100% 100% repeat-x; +} + +/* Floating indicator */ +.innerCardFooter { + margin: .5em; +} + +.countIndicator { + background: rgba(0, 164, 220, 0.8); + box-shadow: none; +} +.indicator, .innerCardFooter { + background: rgba(0,0,0,0.4); + box-shadow: none; +} + +.mediaSourceIndicator { + background: rgba(0,0,0,0.4); + box-shadow: none; + border-radius: calc(infinity * 1px); +} \ No newline at end of file