From 7b3f03fb0f07b2497b2ccb73659e967025557fda Mon Sep 17 00:00:00 2001
From: lscambo13 <ls.cambo13@gmail.com>
Date: Tue, 3 Dec 2024 13:38:01 -0800
Subject: [PATCH] Dev: Start versioning

---
 ...201.css => ElegantFin-theme-v24.12.01.css} | 1285 +++++++++--------
 1 file changed, 648 insertions(+), 637 deletions(-)
 rename Theme/{ElegantFin-jellyfin-theme-build-241201.css => ElegantFin-theme-v24.12.01.css} (94%)

diff --git a/Theme/ElegantFin-jellyfin-theme-build-241201.css b/Theme/ElegantFin-theme-v24.12.01.css
similarity index 94%
rename from Theme/ElegantFin-jellyfin-theme-build-241201.css
rename to Theme/ElegantFin-theme-v24.12.01.css
index e41e005..30070f2 100644
--- a/Theme/ElegantFin-jellyfin-theme-build-241201.css
+++ b/Theme/ElegantFin-theme-v24.12.01.css
@@ -1,637 +1,648 @@
-@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");
-
-* {
-    outline: 0px dotted red !important;
-    --darkerGradientPoint: rgb(17, 24, 39);
-    --lighterGradientPoint: rgb(30, 40, 54);
-    --borderColor: rgba(75, 85, 99, 0.9);
-    --headerColor: rgba(30, 40, 54, 0.8);
-    --drawerColor: rgba(30, 40, 54, 0.9);
-    --lighterBorderColor: rgb(255 255 255 / 20%);
-    --selectorBackgroundColor: rgb(55, 65, 81);
-    --btnSubmitColor: rgb(61, 54, 178);
-    --btnSubmitBorderColor: rgb(117 111 226);
-    --checkboxCheckedBgColor: rgb(79, 70, 229);
-    --hoverGradient: linear-gradient(130deg, rgb(255 255 255 / 20%) 20%, rgb(255 255 255 / 10%) 40%);
-}
-
-html {
-    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-}
-
-.itemsContainer,
-.vertical-list {
-    gap: .75em;
-}
-
-[dir=ltr] .itemsContainer>.card>.cardBox {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.vertical-wrap {
-    justify-content: flex-start !important;
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.mediaSourceIndicator {
-    background: rgb(31, 80, 189);
-    border: var(--lighterBorderColor) solid 1px;
-}
-
-.playedIndicator {
-    background: rgb(34, 197, 94);
-    border: var(--lighterBorderColor) solid 1px;
-}
-
-.cardScalable {
-    border-radius: 1em;
-    border: var(--borderColor) solid 1px !important;
-    overflow: hidden !important;
-    transition: 125ms transform;
-}
-
-.card:hover .cardScalable {
-    /* transform: translateY(-4px); */
-    box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 4px 0px;
-}
-
-.cardImageContainer {
-    border-radius: 1em !important
-}
-
-.cardOverlayContainer {
-    border-radius: 1em !important;
-    border: solid rgb(255 255 255 / 65%) .1em;
-    mix-blend-mode: plus-lighter;
-    background: var(--hoverGradient);
-}
-
-.cardBox:not(.visualCardBox) .cardPadder {
-    border-radius: 1em;
-}
-
-.cardOverlayContainer>.cardOverlayFab-primary {
-    display: none;
-}
-
-
-@media (min-width: 31.25em) {
-
-    .portraitCard,
-    .smallBackdropCard,
-    .squareCard {
-        /* width: 33.3333333333% !important; */
-        width: 30% !important;
-    }
-}
-
-@media (min-width: 43.75em) {
-
-    .portraitCard,
-    .squareCard {
-        /* width: 25% !important; */
-        width: 23% !important;
-    }
-}
-
-@media (min-width: 50em) {
-
-    .portraitCard,
-    .squareCard {
-        /* width: 20% !important; */
-        width: 23% !important;
-    }
-}
-
-@media (min-width: 25em) {
-    .backdropCard {
-        /* width: 50%; */
-        width: 49%;
-    }
-}
-
-@media (min-width: 48.125em) {
-    .backdropCard {
-        /* width: 33.3333333333%; */
-        width: 32%;
-    }
-}
-
-.detailLogo {
-    display: none;
-}
-
-h1 {
-    font-size: 3em;
-}
-
-.detailPagePrimaryContainer {
-    align-content: space-between;
-    align-items: stretch;
-    justify-content: end;
-    flex-direction: column;
-}
-
-.portraitCard {
-    min-width: 5em;
-    width: 30%;
-    max-width: 15em;
-}
-
-.headerHomeButton,
-.headerSyncButton,
-.cardOverlayButton {
-    display: none;
-}
-
-.pageTitle {
-    height: 1.5em;
-}
-
-.paper-icon-button-light>.material-icons {
-    font-size: 1.25em;
-}
-
-.detailRibbon {
-    background-color: transparent;
-}
-
-.detailPageWrapperContainer {
-    padding-top: 30vh;
-    background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent);
-    margin-top: -40vh;
-}
-
-@media (orientation: portrait) and (max-width: 40em) {
-    .layout-mobile .itemBackdrop {
-        height: 40vh;
-        opacity: .35;
-    }
-}
-
-.itemBackdrop {
-    height: 45vh;
-}
-
-h2 {
-    font-size: 1.25em;
-}
-
-h1,
-h2 {
-    font-weight: 600;
-}
-
-.tagline {
-    font-size: 1.3em;
-    font-style: italic;
-    font-weight: 400;
-    margin-bottom: 0;
-}
-
-.backgroundContainer,
-.nowPlayingPlaylist,
-.nowPlayingContextMenu,
-html {
-    background: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint));
-}
-
-.skinHeader-blurred:not(.osdHeader) {
-    background-color: var(--headerColor) !important;
-    backdrop-filter: blur(5px) !important;
-}
-
-.headroom--unpinned {
-    -webkit-transform: translateY(-3.5em);
-    transform: translateY(-3.5em);
-}
-
-.skinHeader:not(.osdHeader) {
-    border-style: solid;
-    border-width: 0 0 1px 0;
-    border-color: var(--borderColor);
-    transition: all .375s ease-in-out;
-}
-
-.itemProgressBar {
-    background-color: rgb(123 123 123 / 30%) !important;
-    height: .2em;
-    overflow: hidden;
-    border-radius: 1em;
-}
-
-.itemProgressBarForeground {
-    border-radius: 1em;
-    background-color: rgb(214 144 255 / 65%)
-}
-
-.selectLabel {
-    max-height: 2em;
-}
-
-.detailsGroupItem,
-.trackSelections .selectContainer {
-    /*flex-direction: column;*/
-    align-items: center;
-}
-
-.layout-mobile .mainDetailButtons {
-    margin-top: 2em;
-}
-
-.emby-select-withcolor,
-.emby-select,
-.emby-input,
-.emby-textarea {
-    background-color: var(--selectorBackgroundColor);
-    border: var(--lighterBorderColor) solid 1px;
-    border-radius: .5em;
-    padding: .5em !important;
-}
-
-.trackSelections .selectContainer .detailTrackSelect {
-    /* padding: inherit; */
-}
-
-.selectArrowContainer {
-    top: .5em;
-    opacity: .5;
-}
-
-.btnPlay {
-    background-color: rgba(255, 255, 255, 0.05);
-    /* border-radius: .5em 0em 0em .5em; */
-    border: solid var(--lighterBorderColor) 1px;
-}
-
-.searchfields-icon {
-    padding: .125em;
-    /* margin: 0 !important; */
-    margin-right: .25em;
-    margin-bottom: 0;
-    border-radius: .25em;
-    background-color: rgba(255, 255, 255, 0.05);
-    /* border-radius: .5em 0em 0em .5em; */
-    border: solid var(--lighterBorderColor) 1px;
-}
-
-.btnPlay>.detailButton-content {
-    -webkit-align-items: unset;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: unset;
-    flex-direction: unset;
-    -webkit-justify-content: unset;
-    align-content: unset;
-    justify-content: flex-start;
-}
-
-
-.btnPlay>.detailButton-content::after {
-    padding-left: .25em;
-    content: "Play";
-}
-
-
-/* 
-.btnMoreCommands{
-    border-radius: 0em .5em .5em 0em;
-    border: solid var(--lighterBorderColor) 1px;
-}
-
-.btnUserRating,.btnCancelSeriesTimer,.btnShuffle,.btnInstantMix,.btnPlayTrailer,.btnPlaystate,.btnReplay{
-    border-radius: 0em 0em 0em 0em;
-    border: solid var(--lighterBorderColor) 1px;
-} */
-
-
-.mainDrawer,
-.drawer-open {
-    background-color: var(--drawerColor);
-    border-right: solid var(--borderColor) 1px;
-    backdrop-filter: blur(8px);
-}
-
-.mediaInfoOfficialRating {
-    border-radius: .5em;
-    font-size: 66%;
-    margin: 0em 1em .25em 0em !important;
-    padding: 0em 0.5em;
-    background: transparent !important;
-    border: solid 1px var(--borderColor);
-}
-
-.detailButton {
-    border-radius: .5em;
-    border: solid var(--lighterBorderColor) 1px;
-    padding: .5em .5em !important;
-    margin: 0.125em !important;
-}
-
-.button-flat:hover {
-    color: unset;
-}
-
-.playstatebutton-icon-played {
-    color: rgb(34, 197, 94);
-}
-
-.itemDetailsGroup {
-    border: solid var(--borderColor) 1px;
-    margin-top: 1.5em;
-    border-radius: .5em;
-    /* margin: .5em 1em; */
-}
-
-.itemDetailsGroup>div:not(:last-child) {
-    border-bottom: solid var(--borderColor) 1px;
-}
-
-.detailsGroupItem {
-    margin: 0 !important;
-    justify-content: space-between;
-    padding: 0.5em 0.9em;
-    align-items: baseline;
-}
-
-.detailsGroupItem>.label {
-    font-weight: 600;
-    flex-basis: 6em;
-}
-
-.detailsGroupItem>.content>a {
-    font-weight: 400;
-    text-align: end;
-}
-
-.detailsGroupItem>.content {
-    text-align: end;
-}
-
-.genresGroup,
-.directorsGroup,
-.writersGroup {
-    /* border-bottom: solid var(--borderColor) 1px; */
-}
-
-.itemTags,
-.itemTags>a {
-    display: none;
-    font-size: unset !important;
-    font-weight: 200;
-}
-
-.detail-clamp-text {
-    text-align: start;
-}
-
-.itemMiscInfo {
-    align-items: flex-end !important;
-}
-
-.innerCardFooter,.chapterThumbTextContainer {
-    background: transparent;
-    /* display: flex; */
-    font-weight: 500;
-    text-shadow: 1px 1px 0px black;
-    padding: 1em;
-    width: auto;
-}
-
-.centerMessage {
-    width: unset;
-}
-
-
-.dialogContainer {
-    /* backdrop-filter: blur(5px);
-    background-color: rgb(0 0 0 / 60%); */
-}
-
-.dialog {
-    backdrop-filter: blur(5px);
-    background-color: var(--drawerColor);
-    border-radius: .75em !important;
-    border: solid var(--borderColor) 1px;
-}
-
-.collapseContent {
-    background-color: unset !important;
-    backdrop-filter: unset !important;
-}
-
-.selectionCommandsPanel {
-    background: var(--lighterGradientPoint);
-    border-bottom: solid var(--borderColor) 1px;
-    backdrop-filter: blur(10px);
-}
-
-.itemSelectionPanel {
-    border: unset;
-    background-color: transparent;
-}
-
-/* .emby-checkbox:checked+span+.checkboxOutline {
-    background-color: var(--checkboxCheckedBgColor);
-    border-color: var(--checkboxCheckedBgColor);
-} */
-
-.emby-checkbox:checked+span+.checkboxOutline {
-    border-radius: .375em !important;
-    box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, 0.8);
-    background: transparent;
-    border-color: white;
-    border-style: groove;
-    border-width: 2px;
-}
-
-.checkboxOutline {
-    /* background-color: rgb(255, 255, 255); */
-    top: unset;
-    height: 1.3em;
-    width: 1.3em;
-    border-radius: .375em;
-}
-
-
-.itemSelectionPanel .material-icons.check:before {
-    font-size: 4em;
-    color: #ffffff;
-    padding: .25em;
-}
-
-.cardText-first+.itemSelectionPanel>.checkboxContainer {
-    /* height: calc(100% - 3em); */
-    height: calc(100% - 1.75em);
-}
-
-.cardText-first+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
-    border-radius: 1em !important;
-}
-
-.cardText-secondary+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
-    border-radius: 1em !important;
-}
-
-.cardText-secondary+.itemSelectionPanel>.checkboxContainer {
-    /* height: calc(100% - 3em); */
-    height: calc(100% - 3.125em);
-}
-
-.cardScalable+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
-    border-radius: 1em !important;
-}
-
-.cardScalable+.itemSelectionPanel>.checkboxContainer {
-    /* height: calc(100% - 3em); */
-    height: calc(100% - 0em);
-}
-
-.checkboxOutline.multiSelectCheckboxOutline {
-    border-radius: 1em;
-    border-width: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.cardIndicators {
-    -webkit-align-items: center;
-    /* padding: 1em; */
-    top: .2em;
-}
-
-.indicator {
-    /* background: rgb(146 146 146 / 20%); */
-    border: solid rgb(124 124 124 / 50%) 1px;
-    /* padding: .1em; */
-    border-radius: 100em;
-}
-
-.defaultCardBackground {
-    background: var(--lighterGradientPoint) !important;
-}
-
-.listItemImage {
-    border-radius: .5em;
-}
-
-.emby-button.block,
-#btnDeleteImage,
-.dashboardActionsContainer>.emby-button {
-    color: #fff;
-    border-radius: .5em;
-    background: var(--lighterGradientPoint);
-    border: solid var(--borderColor) 1px;
-}
-
-#btnDeleteImage {
-    background: rgb(169, 29, 29);
-    border: solid rgb(217, 84, 84) 1px;
-}
-
-.button-submit {
-    background: var(--btnSubmitColor) !important;
-    border: solid var(--btnSubmitBorderColor) 1px !important;
-}
-
-.collapseContent,
-.formDialogFooter:not(.formDialogFooter-clear),
-.formDialogHeader:not(.formDialogHeader-clear) {
-    background-color: var(--headerColor);
-    backdrop-filter: blur(5px);
-}
-
-.visualCardBox,
-.paperList {
-    background-color: var(--headerColor) !important;
-    border-radius: 1em !important;
-    border: solid var(--borderColor) 1px !important;
-    box-shadow: unset !important;
-    /* backdrop-filter: blur(5px); */
-}
-
-.listItemIcon:not(.listItemIcon-transparent) {
-    background-color: var(--lighterGradientPoint) !important;
-}
-
-.readOnlyContent {
-    flex-direction: column !important;
-}
-
-.MuiAppBar-root {
-    background: var(--headerColor);
-    backdrop-filter: blur(5px);
-    border-bottom: solid var(--borderColor) 1px;
-}
-
-.MuiDrawer-paper {
-    background: var(--drawerColor);
-    backdrop-filter: blur(5px);
-    border-right: solid var(--borderColor) 1px;
-}
-
-[dir=ltr] .navMenuOption {
-    padding: .75em 1em !important;
-    /* padding: 1.25em 0.25em 0.25em 1.5em !important; */
-}
-
-[dir=ltr] .listItem {
-    /* padding: .75em 1em !important; */
-    padding: 0.25em 0.25em 0.25em 1.5em !important;
-}
-
-.navMenuOption {
-    border-radius: .5em !important;
-    margin: .5em 1em !important;
-}
-
-.listItem:hover,.navMenuOption:hover {
-    background: rgba(255, 255, 255, 0.125);
-    border-radius: .8em;
-}
-
-.navMenuOption-selected {
-    background-color: rgb(201 143 255 / 42%) !important;
-    border: solid rgb(255 255 255 / 20%) 1px;
-}
-
-.noBackdropTransparency .detailPageSecondaryContainer {
-    background-color: transparent;
-}
-
-.detailSection {
-    display: flex;
-    flex-direction: column;
-    gap: 1em;
-    max-width: unset !important;
-}
-
-.trackSelections {
-    order: 2;
-    max-width: unset !important;
-}
-
-.detailsGroupItem,
-.trackSelections .selectContainer {
-    max-width: unset !important;
-}
-
-.detailSectionContent {
-    order: 1;
-}
-
-.itemDetailsGroup {
-    order: 3;
-}
-
-.sliderBubble{
-    border-radius: 1em;
-    border: solid 1px var(--borderColor);
-    overflow: hidden;
-}
-
-.listItem-border {
-    border-color: transparent !important;
-}
+/* ElegantFin Theme for Jellyfin by lscambo13 */
+
+@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");
+
+* {
+    outline: 0px dotted red !important;
+    --darkerGradientPoint: rgb(17, 24, 39);
+    --lighterGradientPoint: rgb(30, 40, 54);
+    --borderColor: rgba(75, 85, 99, 0.9);
+    --headerColor: rgba(30, 40, 54, 0.8);
+    --drawerColor: rgba(30, 40, 54, 0.9);
+    --lighterBorderColor: rgb(255 255 255 / 20%);
+    --selectorBackgroundColor: rgb(55, 65, 81);
+    --btnSubmitColor: rgb(61, 54, 178);
+    --btnSubmitBorderColor: rgb(117 111 226);
+    --checkboxCheckedBgColor: rgb(79, 70, 229);
+    --hoverGradient: linear-gradient(130deg, rgb(255 255 255 / 20%) 20%, rgb(255 255 255 / 10%) 40%);
+}
+
+html {
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+.itemsContainer,
+.vertical-list {
+    gap: .75em;
+}
+
+[dir=ltr] .itemsContainer>.card>.cardBox {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.vertical-wrap {
+    justify-content: flex-start !important;
+}
+
+.countIndicator,
+.fullSyncIndicator,
+.mediaSourceIndicator {
+    background: rgb(31, 80, 189);
+    border: var(--lighterBorderColor) solid 1px;
+}
+
+.playedIndicator {
+    background: rgb(34, 197, 94);
+    border: var(--lighterBorderColor) solid 1px;
+}
+
+.cardScalable {
+    border-radius: 1em;
+    border: var(--borderColor) solid 1px !important;
+    overflow: hidden !important;
+    transition: 125ms transform;
+}
+
+.card:hover .cardScalable {
+    /* transform: translateY(-4px); */
+    box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 4px 0px;
+}
+
+.cardImageContainer {
+    border-radius: 1em !important
+}
+
+.cardOverlayContainer {
+    border-radius: 1em !important;
+    border: solid rgb(255 255 255 / 65%) .1em;
+    mix-blend-mode: plus-lighter;
+    background: var(--hoverGradient);
+}
+
+.cardBox:not(.visualCardBox) .cardPadder {
+    border-radius: 1em;
+}
+
+.cardOverlayContainer>.cardOverlayFab-primary {
+    display: none;
+}
+
+
+@media (min-width: 31.25em) {
+
+    .portraitCard,
+    .smallBackdropCard,
+    .squareCard {
+        /* width: 33.3333333333% !important; */
+        width: 30% !important;
+    }
+}
+
+@media (min-width: 43.75em) {
+
+    .portraitCard,
+    .squareCard {
+        /* width: 25% !important; */
+        width: 23% !important;
+    }
+}
+
+@media (min-width: 50em) {
+
+    .portraitCard,
+    .squareCard {
+        /* width: 20% !important; */
+        width: 23% !important;
+    }
+}
+
+@media (min-width: 25em) {
+    .backdropCard {
+        /* width: 50%; */
+        width: 49%;
+    }
+}
+
+@media (min-width: 48.125em) {
+    .backdropCard {
+        /* width: 33.3333333333%; */
+        width: 32%;
+    }
+}
+
+.detailLogo {
+    display: none;
+}
+
+h1 {
+    font-size: 3em;
+}
+
+.detailPagePrimaryContainer {
+    align-content: space-between;
+    align-items: stretch;
+    justify-content: end;
+    flex-direction: column;
+}
+
+.portraitCard {
+    min-width: 5em;
+    width: 30%;
+    max-width: 15em;
+}
+
+.headerHomeButton,
+.headerSyncButton,
+.cardOverlayButton {
+    display: none;
+}
+
+.pageTitle {
+    height: 1.5em;
+}
+
+.paper-icon-button-light>.material-icons {
+    font-size: 1.25em;
+}
+
+.detailRibbon {
+    background-color: transparent;
+}
+
+.detailPageWrapperContainer {
+    padding-top: 30vh;
+    background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent);
+    margin-top: -40vh;
+}
+
+@media (orientation: portrait) and (max-width: 40em) {
+    .layout-mobile .itemBackdrop {
+        height: 40vh;
+        opacity: .35;
+    }
+}
+
+.itemBackdrop {
+    height: 45vh;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+h1,
+h2 {
+    font-weight: 600;
+}
+
+.tagline {
+    font-size: 1.3em;
+    font-style: italic;
+    font-weight: 400;
+    margin-bottom: 0;
+}
+
+.backgroundContainer,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
+html {
+    background: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint));
+}
+
+.skinHeader-blurred:not(.osdHeader) {
+    background-color: var(--headerColor) !important;
+    backdrop-filter: blur(5px) !important;
+}
+
+.headroom--unpinned {
+    -webkit-transform: translateY(-3.5em);
+    transform: translateY(-3.5em);
+}
+
+.skinHeader:not(.osdHeader) {
+    border-style: solid;
+    border-width: 0 0 1px 0;
+    border-color: var(--borderColor);
+    transition: all .375s ease-in-out;
+}
+
+.itemProgressBar {
+    background-color: rgb(123 123 123 / 30%) !important;
+    height: .2em;
+    overflow: hidden;
+    border-radius: 1em;
+}
+
+.itemProgressBarForeground {
+    border-radius: 1em;
+    background-color: rgb(214 144 255 / 65%)
+}
+
+.selectLabel {
+    max-height: 2em;
+}
+
+.detailsGroupItem,
+.trackSelections .selectContainer {
+    /*flex-direction: column;*/
+    align-items: center;
+}
+
+.layout-mobile .mainDetailButtons {
+    margin-top: 2em;
+}
+
+.emby-select-withcolor,
+.emby-select,
+.emby-input,
+.emby-textarea {
+    background-color: var(--selectorBackgroundColor);
+    border: var(--lighterBorderColor) solid 1px;
+    border-radius: .5em;
+    padding: .5em !important;
+}
+
+.trackSelections .selectContainer .detailTrackSelect {
+    /* padding: inherit; */
+}
+
+.selectArrowContainer {
+    top: .5em;
+    opacity: .5;
+}
+
+.btnPlay {
+    background-color: rgba(255, 255, 255, 0.05);
+    /* border-radius: .5em 0em 0em .5em; */
+    border: solid var(--lighterBorderColor) 1px;
+}
+
+.searchfields-icon {
+    padding: .125em;
+    /* margin: 0 !important; */
+    margin-right: .25em;
+    margin-bottom: 0;
+    border-radius: .25em;
+    background-color: rgba(255, 255, 255, 0.05);
+    /* border-radius: .5em 0em 0em .5em; */
+    border: solid var(--lighterBorderColor) 1px;
+}
+
+.btnPlay>.detailButton-content {
+    -webkit-align-items: unset;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: unset;
+    flex-direction: unset;
+    -webkit-justify-content: unset;
+    align-content: unset;
+    justify-content: flex-start;
+}
+
+
+.btnPlay>.detailButton-content::after {
+    padding-left: .25em;
+    content: "Play";
+}
+
+
+/* 
+.btnMoreCommands{
+    border-radius: 0em .5em .5em 0em;
+    border: solid var(--lighterBorderColor) 1px;
+}
+
+.btnUserRating,.btnCancelSeriesTimer,.btnShuffle,.btnInstantMix,.btnPlayTrailer,.btnPlaystate,.btnReplay{
+    border-radius: 0em 0em 0em 0em;
+    border: solid var(--lighterBorderColor) 1px;
+} */
+
+
+.mainDrawer,
+.drawer-open {
+    background-color: var(--drawerColor);
+    border-right: solid var(--borderColor) 1px;
+    backdrop-filter: blur(8px);
+}
+
+.mediaInfoOfficialRating {
+    border-radius: .5em;
+    font-size: 66%;
+    margin: 0em 1em .25em 0em !important;
+    padding: 0em 0.5em;
+    background: transparent !important;
+    border: solid 1px var(--borderColor);
+}
+
+.detailButton {
+    border-radius: .5em;
+    border: solid var(--lighterBorderColor) 1px;
+    padding: .5em .5em !important;
+    margin: 0.125em !important;
+}
+
+.button-flat:hover {
+    color: unset;
+}
+
+.playstatebutton-icon-played {
+    color: rgb(34, 197, 94);
+}
+
+.itemDetailsGroup {
+    border: solid var(--borderColor) 1px;
+    margin-top: 1.5em;
+    border-radius: .5em;
+    /* margin: .5em 1em; */
+}
+
+.itemDetailsGroup>div:not(:last-child) {
+    border-bottom: solid var(--borderColor) 1px;
+}
+
+.detailsGroupItem {
+    margin: 0 !important;
+    justify-content: space-between;
+    padding: 0.5em 0.9em;
+    align-items: baseline;
+}
+
+.detailsGroupItem>.label {
+    font-weight: 600;
+    flex-basis: 6em;
+}
+
+.detailsGroupItem>.content>a {
+    font-weight: 400;
+    text-align: end;
+}
+
+.detailsGroupItem>.content {
+    text-align: end;
+}
+
+.genresGroup,
+.directorsGroup,
+.writersGroup {
+    /* border-bottom: solid var(--borderColor) 1px; */
+}
+
+.itemTags,
+.itemTags>a {
+    display: none;
+    font-size: unset !important;
+    font-weight: 200;
+}
+
+.detail-clamp-text {
+    text-align: start;
+}
+
+.itemMiscInfo {
+    align-items: flex-end !important;
+}
+
+.innerCardFooter,
+.chapterThumbTextContainer {
+    background: transparent;
+    /* display: flex; */
+    font-weight: 500;
+    text-shadow: 1px 1px 0px black;
+    padding: 1em;
+    width: auto;
+}
+
+.centerMessage {
+    width: unset;
+}
+
+
+.dialogContainer {
+    /* backdrop-filter: blur(5px);
+    background-color: rgb(0 0 0 / 60%); */
+}
+
+.dialog {
+    backdrop-filter: blur(5px);
+    background-color: var(--drawerColor);
+    border-radius: .75em !important;
+    border: solid var(--borderColor) 1px;
+}
+
+.collapseContent {
+    background-color: unset !important;
+    backdrop-filter: unset !important;
+}
+
+.selectionCommandsPanel {
+    background: var(--lighterGradientPoint);
+    border-bottom: solid var(--borderColor) 1px;
+    backdrop-filter: blur(10px);
+}
+
+.itemSelectionPanel {
+    border: unset;
+    background-color: transparent;
+}
+
+/* .emby-checkbox:checked+span+.checkboxOutline {
+    background-color: var(--checkboxCheckedBgColor);
+    border-color: var(--checkboxCheckedBgColor);
+} */
+
+.emby-checkbox:checked+span+.checkboxOutline {
+    border-radius: .375em !important;
+    box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, 0.8);
+    background: transparent;
+    border-color: white;
+    border-style: groove;
+    border-width: 2px;
+}
+
+.checkboxOutline {
+    /* background-color: rgb(255, 255, 255); */
+    top: unset;
+    height: 1.3em;
+    width: 1.3em;
+    border-radius: .375em;
+}
+
+
+.itemSelectionPanel .material-icons.check:before {
+    font-size: 4em;
+    color: #ffffff;
+    padding: .25em;
+}
+
+.cardText-first+.itemSelectionPanel>.checkboxContainer {
+    /* height: calc(100% - 3em); */
+    height: calc(100% - 1.75em);
+}
+
+.cardText-first+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
+    border-radius: 1em !important;
+}
+
+.cardText-secondary+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
+    border-radius: 1em !important;
+}
+
+.cardText-secondary+.itemSelectionPanel>.checkboxContainer {
+    /* height: calc(100% - 3em); */
+    height: calc(100% - 3.125em);
+}
+
+.cardScalable+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
+    border-radius: 1em !important;
+}
+
+.cardScalable+.itemSelectionPanel>.checkboxContainer {
+    /* height: calc(100% - 3em); */
+    height: calc(100% - 0em);
+}
+
+.checkboxOutline.multiSelectCheckboxOutline {
+    border-radius: 1em;
+    border-width: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.cardIndicators {
+    -webkit-align-items: center;
+    /* padding: 1em; */
+    top: .2em;
+}
+
+.indicator {
+    /* background: rgb(146 146 146 / 20%); */
+    border: solid rgb(124 124 124 / 50%) 1px;
+    /* padding: .1em; */
+    border-radius: 100em;
+}
+
+.defaultCardBackground {
+    background: var(--lighterGradientPoint) !important;
+}
+
+.listItemImage {
+    border-radius: .5em;
+}
+
+.emby-button.block,
+#btnDeleteImage,
+.dashboardActionsContainer>.emby-button {
+    color: #fff;
+    border-radius: .5em;
+    background: var(--lighterGradientPoint);
+    border: solid var(--borderColor) 1px;
+}
+
+#btnDeleteImage {
+    background: rgb(169, 29, 29);
+    border: solid rgb(217, 84, 84) 1px;
+}
+
+.button-submit {
+    background: var(--btnSubmitColor) !important;
+    border: solid var(--btnSubmitBorderColor) 1px !important;
+}
+
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear) {
+    background-color: var(--headerColor);
+    backdrop-filter: blur(5px);
+}
+
+.visualCardBox,
+.paperList {
+    background-color: var(--headerColor) !important;
+    border-radius: 1em !important;
+    border: solid var(--borderColor) 1px !important;
+    box-shadow: unset !important;
+    /* backdrop-filter: blur(5px); */
+}
+
+.listItemIcon:not(.listItemIcon-transparent) {
+    background-color: var(--lighterGradientPoint) !important;
+}
+
+.readOnlyContent {
+    flex-direction: column !important;
+}
+
+.MuiAppBar-root {
+    background: var(--headerColor);
+    backdrop-filter: blur(5px);
+    border-bottom: solid var(--borderColor) 1px;
+}
+
+.MuiDrawer-paper {
+    background: var(--drawerColor);
+    backdrop-filter: blur(5px);
+    border-right: solid var(--borderColor) 1px;
+}
+
+[dir=ltr] .navMenuOption {
+    padding: .75em 1em !important;
+    /* padding: 1.25em 0.25em 0.25em 1.5em !important; */
+}
+
+[dir=ltr] .listItem {
+    /* padding: .75em 1em !important; */
+    padding: 0.25em 0.25em 0.25em 1.5em !important;
+}
+
+.navMenuOption {
+    border-radius: .5em !important;
+    margin: .5em 1em !important;
+}
+
+.listItem:hover,
+.navMenuOption:hover {
+    background: rgba(255, 255, 255, 0.125);
+    border-radius: .8em;
+}
+
+.navMenuOption-selected {
+    background-color: rgb(201 143 255 / 42%) !important;
+    border: solid rgb(255 255 255 / 20%) 1px;
+}
+
+.noBackdropTransparency .detailPageSecondaryContainer {
+    background-color: transparent;
+}
+
+.detailSection {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    max-width: unset !important;
+}
+
+.trackSelections {
+    order: 2;
+    max-width: unset !important;
+}
+
+.detailsGroupItem,
+.trackSelections .selectContainer {
+    max-width: unset !important;
+}
+
+.detailSectionContent {
+    order: 1;
+}
+
+.itemDetailsGroup {
+    order: 3;
+}
+
+.sliderBubble {
+    border-radius: 1em;
+    border: solid 1px var(--borderColor);
+    overflow: hidden;
+}
+
+.listItem-border {
+    border-color: transparent !important;
+}
+
+.dashboardFooter::after {
+    content: "ElegantFin v24.12.01";
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: .6em;
+    opacity: .5;
+}
\ No newline at end of file