From ff1d4117443a2494196998764b222cc187ed7d4b Mon Sep 17 00:00:00 2001 From: Casper Talvio Date: Sun, 1 Aug 2021 13:53:18 +0300 Subject: [PATCH] Huge hopefully final update --- .../indicator_corner.css | 0 .../indicator_light.css | 0 .../indicator_separate.css | 0 effects/glassy.css | 6 + hoverglow.css => effects/hoverglow.css | 0 effects/scrollfade.css | 88 +++++++++++ .../episodes_compactlist.css | 0 episodelist/episodes_grid.css | 144 ++++++++++++++++++ fields_1.css => fields/fields_border.css | 0 fields_2.css => fields/fields_noborder.css | 0 .../header_transparent-dashboard.css | 4 +- .../header_transparent.css | 4 +- login/login_frame.css | 35 +++++ .../login_minimalistic.css | 4 +- presets/kaleidochromic_preset.css | 16 +- presets/monochromic_preset.css | 15 +- presets/novachromic_preset.css | 14 +- ...irclehover.css => rounding_circlehover.css | 0 titlepage/title_banner-logo.css | 49 ++++++ title_2.css => titlepage/title_banner.css | 2 +- titlepage/title_simple-logo.css | 60 ++++++++ title_1.css => titlepage/title_simple.css | 0 type/colorful.css | 16 +- type/dark.css | 6 +- ...ark-withaccent.css => dark_withaccent.css} | 6 +- type/light.css | 10 +- 26 files changed, 445 insertions(+), 34 deletions(-) rename cardindicator_2.css => cornerindicator/indicator_corner.css (100%) rename cardindicator_light.css => cornerindicator/indicator_light.css (100%) rename cardindicator_1.css => cornerindicator/indicator_separate.css (100%) create mode 100644 effects/glassy.css rename hoverglow.css => effects/hoverglow.css (100%) create mode 100644 effects/scrollfade.css rename compactepisodes.css => episodelist/episodes_compactlist.css (100%) create mode 100644 episodelist/episodes_grid.css rename fields_1.css => fields/fields_border.css (100%) rename fields_2.css => fields/fields_noborder.css (100%) rename transparentbanner-dashboard.css => header/header_transparent-dashboard.css (97%) rename transparentbanner.css => header/header_transparent.css (96%) create mode 100644 login/login_frame.css rename minimalisticlogin.css => login/login_minimalistic.css (95%) rename rounding-circlehover.css => rounding_circlehover.css (100%) create mode 100644 titlepage/title_banner-logo.css rename title_2.css => titlepage/title_banner.css (99%) create mode 100644 titlepage/title_simple-logo.css rename title_1.css => titlepage/title_simple.css (100%) rename type/{dark-withaccent.css => dark_withaccent.css} (99%) diff --git a/cardindicator_2.css b/cornerindicator/indicator_corner.css similarity index 100% rename from cardindicator_2.css rename to cornerindicator/indicator_corner.css diff --git a/cardindicator_light.css b/cornerindicator/indicator_light.css similarity index 100% rename from cardindicator_light.css rename to cornerindicator/indicator_light.css diff --git a/cardindicator_1.css b/cornerindicator/indicator_separate.css similarity index 100% rename from cardindicator_1.css rename to cornerindicator/indicator_separate.css diff --git a/effects/glassy.css b/effects/glassy.css new file mode 100644 index 0000000..4eaf6ad --- /dev/null +++ b/effects/glassy.css @@ -0,0 +1,6 @@ +@supports (backdrop-filter: blur(15px)) { + .dialog, .mainDrawer, .toast, .appfooter { + backdrop-filter: blur(15px); + background-color: rgba(0, 0, 0, 0.35); + } +} diff --git a/hoverglow.css b/effects/hoverglow.css similarity index 100% rename from hoverglow.css rename to effects/hoverglow.css diff --git a/effects/scrollfade.css b/effects/scrollfade.css new file mode 100644 index 0000000..75a809e --- /dev/null +++ b/effects/scrollfade.css @@ -0,0 +1,88 @@ +body.force-scroll { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: stretch; + justify-content: flex-start; + overflow: hidden; +} + +.skinHeader { + position: static; + width: 100%; + align-self: flex-start; +} + +.mainAnimatedPages { + height: 100vh; + position: relative !important; + overflow: hidden; +} + +.libraryPage:not(.noSecondaryNavPage) { + padding: 1em !important; +} + +div#itemDetailPage { + display: flex; + flex-direction: column; + flex-wrap: nowrap; +} + +@media (min-width: 40em) { + .dashboardDocument .skinBody { + left: 20em; + width: calc(100vw - 20em); + } +} + +div#loginPage { + margin-top: 0 !important; + position: fixed; +} + +div[data-role=page] { + margin: 0 !important; + padding: 0 !important; + position: static; + width: 100%; + height: 100%; + overflow-y: scroll; + -webkit-mask: linear-gradient(to bottom, transparent, black 25px calc(100% - 15px), transparent); + mask: linear-gradient(to bottom, transparent, black 25px calc(100% - 15px), transparent); +} + +.layout-tv .mainAnimatedPages { + overflow: visible; + mask: none; + -webkit-mask: none; +} + +div#videoOsdPage { + overflow: hidden !important; + margin-top: 1em !important; + -webkit-mask: none !important; + mask: none !important; +} + +div[data-role=page]:not(.withTabs) { + margin-top: 1em !important; +} + +div#itemBackdrop { + display: none; +} + +.layout-desktop .detailRibbon { + margin-top: 7.2em; +} + +.layout-mobile #itemDetailPage { + position: fixed; + -webkit-mask: none; + mask: none; + margin-top: 4em !important; + height: calc(100vh - 4em); +} + + diff --git a/compactepisodes.css b/episodelist/episodes_compactlist.css similarity index 100% rename from compactepisodes.css rename to episodelist/episodes_compactlist.css diff --git a/episodelist/episodes_grid.css b/episodelist/episodes_grid.css new file mode 100644 index 0000000..a9a6977 --- /dev/null +++ b/episodelist/episodes_grid.css @@ -0,0 +1,144 @@ +/*Size episode preview images in a more compact way*/ + +.childrenItemsContainer.itemsContainer.padded-right.vertical-list { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +@media all and (max-width: 1001px) { + .childrenItemsContainer.itemsContainer.padded-right.vertical-list { + grid-template-columns: 1fr 1fr; + } +} + +.layout-mobile + .childrenItemsContainer.itemsContainer.padded-right.vertical-list { + grid-template-columns: 1fr; +} + +#itemDetailPage .listItem-content { + border-radius: var(--rounding); + overflow: hidden; + transition: background 0.15s ease-in-out; + flex-flow: column; + -webkit-transition: background 0.15s ease-in-out; + -moz-transition: background 0.15s ease-in-out; + -ms-transition: background 0.15s ease-in-out; + -o-transition: background 0.15s ease-in-out; +} + +.listItemImage.listItemImage-large { + width: 100%; + margin: 0; +} + +.listItem-overview.listItemBodyText { + height: 5.5em !important; + font-size: 1em !important; +} + +.listItemImageButton-icon { + padding: 0; +} + +#itemDetailPage .listItem { + position: relative; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + overflow: hidden; + margin-bottom: 1.5rem; + border-radius: var(--rounding); + padding: .5em; +} + +#itemDetailPage .secondary.listItem-overview.listItemBodyText { + height: 100%; + margin: 0; +} + +.listItem[data-mediatype="Audio"] { + padding: 0 1em; + border-radius: var(--rounding) !important; + -webkit-border-radius: var(--rounding) !important; + -moz-border-radius: var(--rounding) !important; + -ms-border-radius: var(--rounding) !important; + -o-border-radius: var(--rounding) !important; +} + +.layout-mobile #itemDetailPage .listItemImageButton { + font-size: 0 !important; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.72); + z-index: -1; + -webkit-backdrop-filter: blur(4px); + backdrop-filter: blur(4px); +} + +.layout-mobile .listItemIndicators { + right: 0; + top: 0; + width: 100%; + height: 100%; +} + +.layout-mobile .playedIndicator { + width: 100%; + height: 100%; + font-size: 1.2rem; +} + +.layout-mobile .listItemIndicators .indicatorIcon.check { + position: absolute; + top: .55em; + right: 4em; +} + +.layout-mobile .listItemBodyText { + max-width: 10rem; +} + +.layout-mobile .listItem .playedIndicator { + background: transparent !important; +} + +.layout-mobile .listItemImage { + height: 100% !important; + width: 100% !important; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + overflow: hidden; + border-radius: var(--rounding) !important; + z-index: -1; +} + +.layout-mobile .listViewUserDataButtons { + position: absolute; + right: 0; + top: 1.25em; + padding-right: 1em; +} + +.layout-mobile .listItemButton { + padding: 0 0.556em !important; +} + +.layout-mobile #itemDetailPage .listItem-content { + -webkit-backdrop-filter: none; + backdrop-filter: none; + align-items: flex-start; +} + +.layout-mobile #itemDetailPage .listItem-content { + background: none !important; + position: unset; + color: white; +} + +.listItemImageButton { + margin: auto; + font-size: 1.6em !important; +} diff --git a/fields_1.css b/fields/fields_border.css similarity index 100% rename from fields_1.css rename to fields/fields_border.css diff --git a/fields_2.css b/fields/fields_noborder.css similarity index 100% rename from fields_2.css rename to fields/fields_noborder.css diff --git a/transparentbanner-dashboard.css b/header/header_transparent-dashboard.css similarity index 97% rename from transparentbanner-dashboard.css rename to header/header_transparent-dashboard.css index 8393607..32989e2 100644 --- a/transparentbanner-dashboard.css +++ b/header/header_transparent-dashboard.css @@ -57,7 +57,7 @@ #pluginsPage, #musicRecommendedPage { margin-top: 130px; - padding-top: 0px !important; + padding-top: 0.5em !important; overflow: scroll; } -} \ No newline at end of file +} diff --git a/transparentbanner.css b/header/header_transparent.css similarity index 96% rename from transparentbanner.css rename to header/header_transparent.css index 21b4bba..a67dab0 100644 --- a/transparentbanner.css +++ b/header/header_transparent.css @@ -39,7 +39,7 @@ #tvRecommendedPage, #musicRecommendedPage { margin-top: 130px; - padding-top: 0px !important; + padding-top: 0.5em !important; overflow: scroll; } -} \ No newline at end of file +} diff --git a/login/login_frame.css b/login/login_frame.css new file mode 100644 index 0000000..40ef4c3 --- /dev/null +++ b/login/login_frame.css @@ -0,0 +1,35 @@ +/*Narrow the login form, size according to display size (bigger on mobile)*/ +#loginPage .readOnlyContent, +#loginPage form { + max-width: 22em; +} + +#loginPage .padded-left.padded-right.padded-bottom-page { + margin-top: 8em +} + +/*Hide "manual" and "forgot" buttons}*/ +#loginPage .raised.cancel.block.btnForgotPassword.emby-button { + display: none +} + +#loginPage .padded-left.padded-right.padded-bottom-page { + margin-left: auto; + margin-right: auto; + background: rgba(0, 0, 0, 0.35); + width: 24em; + border-radius: var(--rounding); +} +#loginPage form { + padding-top: 4em; +} + +#loginPage .sectionTitle{ + margin-left: auto !important; + margin-right: auto !important; + margin-bottom: 1.2em !important; +} +#loginPage { + background: url(https://i.imgur.com/9vL4iNf.png) !important; + background-size: cover !important; +} diff --git a/minimalisticlogin.css b/login/login_minimalistic.css similarity index 95% rename from minimalisticlogin.css rename to login/login_minimalistic.css index e5117e3..40ddc3e 100644 --- a/minimalisticlogin.css +++ b/login/login_minimalistic.css @@ -9,10 +9,10 @@ display: none } #loginPage .padded-left.padded-right.padded-bottom-page { - margin-top: 50px + margin-top: 8em } /*Hide "manual" and "forgot" buttons}*/ #loginPage .raised.cancel.block.btnForgotPassword.emby-button { display: none -} \ No newline at end of file +} diff --git a/presets/kaleidochromic_preset.css b/presets/kaleidochromic_preset.css index e5e4a30..fbad276 100644 --- a/presets/kaleidochromic_preset.css +++ b/presets/kaleidochromic_preset.css @@ -4,16 +4,16 @@ @import url('https://ctalvio.github.io/Ultrachromic/accentlist.css'); @import url('https://ctalvio.github.io/Ultrachromic/rounding.css'); @import url('https://ctalvio.github.io/Ultrachromic/smallercast.css'); -@import url('https://ctalvio.github.io/Ultrachromic/compactepisodes.css'); -@import url('https://ctalvio.github.io/Ultrachromic/transparentbanner-dashboard.css'); -@import url('https://ctalvio.github.io/Ultrachromic/minimalisticlogin.css'); -@import url('https://ctalvio.github.io/Ultrachromic/fields_2.css'); +@import url('https://ctalvio.github.io/Ultrachromic/episodelist/episodes_compactlist.css'); +@import url('https://ctalvio.github.io/Ultrachromic/header/header_transparent-dashboard.css'); +@import url('https://ctalvio.github.io/Ultrachromic/login/login_frame.css'); +@import url('https://ctalvio.github.io/Ultrachromic/fields/fields_noborder.css'); @import url('https://ctalvio.github.io/Ultrachromic/dialogues.css'); -@import url('https://ctalvio.github.io/Ultrachromic/cardindicator_2.css'); -@import url('https://ctalvio.github.io/Ultrachromic/title_1.css'); +@import url('https://ctalvio.github.io/Ultrachromic/cornerindicator/indicator_corner.css'); +@import url('https://ctalvio.github.io/Ultrachromic/titlepage/title_simple.css'); @import url('https://ctalvio.github.io/Ultrachromic/type/colorful.css'); @import url('https://ctalvio.github.io/Ultrachromic/overlayprogress.css'); -@import url('https://ctalvio.github.io/Ultrachromic/hoverglow.css'); +@import url('https://ctalvio.github.io/Ultrachromic/effects/hoverglow.css'); :root {--rounding: 12px;} @@ -21,4 +21,4 @@ /*Style backdrop*/ .backdropImage { filter: blur(18px) saturate(120%) contrast(120%) brightness(40%); -} \ No newline at end of file +} diff --git a/presets/monochromic_preset.css b/presets/monochromic_preset.css index 95f08f3..ba024b5 100644 --- a/presets/monochromic_preset.css +++ b/presets/monochromic_preset.css @@ -1,16 +1,15 @@ -@import url('https://ctalvio.github.io/Ultrachromic/presets/monochromic_values.css'); @import url('https://ctalvio.github.io/Ultrachromic/jf_font.css'); @import url('https://ctalvio.github.io/Ultrachromic/fixes.css'); @import url('https://ctalvio.github.io/Ultrachromic/base.css'); @import url('https://ctalvio.github.io/Ultrachromic/rounding.css'); @import url('https://ctalvio.github.io/Ultrachromic/smallercast.css'); -@import url('https://ctalvio.github.io/Ultrachromic/compactepisodes.css'); -@import url('https://ctalvio.github.io/Ultrachromic/transparentbanner-dashboard.css'); -@import url('https://ctalvio.github.io/Ultrachromic/minimalisticlogin.css'); -@import url('https://ctalvio.github.io/Ultrachromic/fields_1.css'); +@import url('https://ctalvio.github.io/Ultrachromic/episodelist/episodes_compactlist.css'); +@import url('https://ctalvio.github.io/Ultrachromic/header/header_transparent-dashboard.css'); +@import url('https://ctalvio.github.io/Ultrachromic/login/login_minimalistic.css'); +@import url('https://ctalvio.github.io/Ultrachromic/fields/fields_border.css'); @import url('https://ctalvio.github.io/Ultrachromic/dialogues.css'); -@import url('https://ctalvio.github.io/Ultrachromic/cardindicator_1.css'); -@import url('https://ctalvio.github.io/Ultrachromic/title_1.css'); +@import url('https://ctalvio.github.io/Ultrachromic/cornerindicator/indicator_separate.css'); +@import url('https://ctalvio.github.io/Ultrachromic/titlepage/title_simple.css'); @import url('https://ctalvio.github.io/Ultrachromic/type/dark.css'); @import url('https://ctalvio.github.io/Ultrachromic/overlayprogress.css'); @@ -19,4 +18,4 @@ /*Style backdrop*/ .backdropImage { filter: blur(60px) saturate(200%) contrast(160%) brightness(25%); -} \ No newline at end of file +} diff --git a/presets/novachromic_preset.css b/presets/novachromic_preset.css index 6543f87..cfb5644 100644 --- a/presets/novachromic_preset.css +++ b/presets/novachromic_preset.css @@ -4,13 +4,13 @@ @import url('https://ctalvio.github.io/Ultrachromic/accentlist.css'); @import url('https://ctalvio.github.io/Ultrachromic/rounding.css'); @import url('https://ctalvio.github.io/Ultrachromic/smallercast.css'); -@import url('https://ctalvio.github.io/Ultrachromic/compactepisodes.css'); -@import url('https://ctalvio.github.io/Ultrachromic/transparentbanner-dashboard.css'); -@import url('https://ctalvio.github.io/Ultrachromic/minimalisticlogin.css'); -@import url('https://ctalvio.github.io/Ultrachromic/fields_1.css'); +@import url('https://ctalvio.github.io/Ultrachromic/episodelist/episodes_compactlist.css'); +@import url('https://ctalvio.github.io/Ultrachromic/header/header_transparent-dashboard.css'); +@import url('https://ctalvio.github.io/Ultrachromic/login/login_minimalistic.css'); +@import url('https://ctalvio.github.io/Ultrachromic/fields/fields_noborder.css'); @import url('https://ctalvio.github.io/Ultrachromic/dialogues.css'); -@import url('https://ctalvio.github.io/Ultrachromic/cardindicator_2.css'); -@import url('https://ctalvio.github.io/Ultrachromic/title_1.css'); +@import url('https://ctalvio.github.io/Ultrachromic/cornerindicator/indicator_light.css'); +@import url('https://ctalvio.github.io/Ultrachromic/titlepage/title_simple.css'); @import url('https://ctalvio.github.io/Ultrachromic/type/light.css'); @import url('https://ctalvio.github.io/Ultrachromic/overlayprogress.css'); @@ -19,4 +19,4 @@ /*Style backdrop*/ .backdropImage { filter: blur(22px) saturate(95%) contrast(15%) brightness(155%); -} \ No newline at end of file +} diff --git a/rounding-circlehover.css b/rounding_circlehover.css similarity index 100% rename from rounding-circlehover.css rename to rounding_circlehover.css diff --git a/titlepage/title_banner-logo.css b/titlepage/title_banner-logo.css new file mode 100644 index 0000000..340ae0b --- /dev/null +++ b/titlepage/title_banner-logo.css @@ -0,0 +1,49 @@ +/*Alternate itempage*/ +.itemBackdrop { + height: 31vh !important; + display: inherit; +} +.detailLogo { + display: none; +} +.layout-desktop .detailRibbon { + margin-top: 0; + padding-top: .5em; + padding-bottom: .5em; +} +.detailImageContainer .card.backdropCard { + top: 40vh; +} + +#itemDetailPage .detailLogo { + position: static; + margin-left: 32.5%; + display: block; + -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); + /*! filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); */ + flex-shrink: 0; + background-position: 0 50%; + margin-top: -18vh; + margin-bottom: 2vh; +} + +.layout-mobile .detailLogo { + display: none !important; +} + +#itemDetailPage .itemName.infoText.parentNameLast { + display: none; +} + +.hide+.detailPageWrapperContainer .itemName { + display: block !important; +} + +.itemName { + margin: .5em 0 !important; +} + +.layout-mobile #itemDetailPage .itemName.infoText.parentNameLast { + display: block; +} + diff --git a/title_2.css b/titlepage/title_banner.css similarity index 99% rename from title_2.css rename to titlepage/title_banner.css index 432e305..9b84935 100644 --- a/title_2.css +++ b/titlepage/title_banner.css @@ -13,4 +13,4 @@ } .detailImageContainer .card.backdropCard { top: 40vh; -} \ No newline at end of file +} diff --git a/titlepage/title_simple-logo.css b/titlepage/title_simple-logo.css new file mode 100644 index 0000000..4b60f01 --- /dev/null +++ b/titlepage/title_simple-logo.css @@ -0,0 +1,60 @@ +/*Tweak series/movie/album title screen*/ +.detailImageContainer .card { + position:fixed; +} +.detailSectionContent { + max-width: 66em; +} +.trackSelections { + max-width: 22em; +} +.detailLogo { + display: none; +} +.detailPagePrimaryContainer { + background: rgba(0,0,0,0) !important; +} +.layout-desktop .detailRibbon { + background: rgba(0,0,0,0) !important; +} +@media all and (min-width: 32em){ + .itemBackdrop { + display: none; + } + .layout-desktop .detailRibbon { + margin-top: 13vh; + } +} + +#itemDetailPage .detailLogo { + position: static; + margin-left: 32.5%; + display: block; + -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); + /*! filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); */ + flex-shrink: 0; + background-position: 0 50%; + margin-top: 8vh; + margin-bottom: -10em; +} + +.layout-mobile .detailLogo { + display: none !important; +} + +#itemDetailPage .itemName.infoText.parentNameLast { + display: none; +} + +.hide+.detailPageWrapperContainer .itemName { + display: block !important; +} + +.itemName { + margin: .5em 0 !important; +} + +.layout-mobile #itemDetailPage .itemName.infoText.parentNameLast { + display: block; +} + diff --git a/title_1.css b/titlepage/title_simple.css similarity index 100% rename from title_1.css rename to titlepage/title_simple.css diff --git a/type/colorful.css b/type/colorful.css index cf0dd0c..864b9f9 100644 --- a/type/colorful.css +++ b/type/colorful.css @@ -10,6 +10,20 @@ background-color: rgba(8, 8, 8, 0.85); } +/*Login background*/ +#loginPage { + background: url(https://i.imgur.com/9vL4iNf.png) !important; + background-size: cover !important; +} + +/*Colors for title_2*/ +.layout-desktop .detailRibbon { + background: rgba(0, 0, 0, 0.2); +} +.itemBackdrop::after { + background: rgba(0,0,0,.26) !important; +} + /*Accenting*/ .drawer-open { box-shadow: 0px 0px 5px rgba(var(--accent), 1) !important; @@ -93,4 +107,4 @@ progress { } .defaultCardBackground5 { background-color: rgba(var(--accent), .6); -} \ No newline at end of file +} diff --git a/type/dark.css b/type/dark.css index 1199cdf..629a963 100644 --- a/type/dark.css +++ b/type/dark.css @@ -7,6 +7,10 @@ .playbackProgress > div { background-color: rgba(255,255,255,0.75); } +.backgroundContainer.withBackdrop { + background-color: rgba(0, 0, 0, 0); +} + /*Some themeing for the dashboard*/ @@ -309,4 +313,4 @@ progress { } .defaultCardBackground5 { background-color: #666666; -} \ No newline at end of file +} diff --git a/type/dark-withaccent.css b/type/dark_withaccent.css similarity index 99% rename from type/dark-withaccent.css rename to type/dark_withaccent.css index 87652d9..9f72986 100644 --- a/type/dark-withaccent.css +++ b/type/dark_withaccent.css @@ -1,6 +1,10 @@ /*This file contains color and style changes for the dark theme type*/ :root {--selection: 120, 120, 120;} +.backgroundContainer.withBackdrop { + background-color: rgba(0, 0, 0, 0); +} + /*Some themeing for the dashboard*/ #user_usage_report_table, @@ -411,4 +415,4 @@ progress::-webkit-progress-value { .syncPlayIconCircle { color: rgba(var(--accent),1) !important; text-shadow: none !important; -} \ No newline at end of file +} diff --git a/type/light.css b/type/light.css index 0b3db2d..543067e 100644 --- a/type/light.css +++ b/type/light.css @@ -3,6 +3,14 @@ :root {--indicator: var(--accent);} :root {--selection: var(--accent);} +/*Colors for title_2*/ +.layout-desktop .detailRibbon { + background: rgba(255,255,255,.2) !important; +} +.itemBackdrop::after { + background: rgba(0,0,0,.2) !important; +} + /*Various themeing*/ #itemDetailPage .emby-select-withcolor { background-color: rgba(255, 255, 255, 0.2); @@ -369,4 +377,4 @@ h4, } .defaultCardBackground5 { background-color: rgba(var(--accent), .6); -} \ No newline at end of file +}