Fix: Reduced the sizes of preview images in README.md file. You can click to view enlarged versions.

Fix: Adjustments to gradient points

README.md

@@ -26,15 +26,15 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 <details>
   <summary><i>Click here to reveal</i></summary>
   
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/1.%20Homepage.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/1.%20Homepage.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/2.%20Movies%20Library.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/2.%20Movies%20Library.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/3.%20Sidebar.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/3.%20Sidebar.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/4.%20Movie%20Page.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/4.%20Movie%20Page.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/5.%20Extra%20Dialog.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/5.%20Extra%20Dialog.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/6.%20Settings%20Page.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/6.%20Settings%20Page.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/7.%20Metadata%20Menu.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/7.%20Metadata%20Menu.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/8.%20Dashboard%20Settings.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/8.%20Dashboard%20Settings.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/9.%20Web%20Player.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/9.%20Web%20Player.png" style="width:360px;height:auto;"></img>
 
 </details>
 
@@ -74,5 +74,50 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 
 <hr>
 
+### 🛠️ Troubleshooting 
+<details>
+  <summary>1️⃣ - <i>How do I check if I am using the latest version on ElegantFin?</i></summary>
+
+- To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen. 
+- I should be something like ElegantFin v24.12.XX
+</details>
+
+<details>
+  <summary>2️⃣ - <i>I see that a newer version is available, but I have not received it yet. Why?</i></summary>
+
+- If Dashboard footer shows an old version, it means that your app is still using an old cache.
+- Once that cache is updated, the new version will be loaded. 
+- To get the latest version, you will need to clear cache. There are multiple ways to do it.
+- On web version, force a hard refresh of the page using CTRL + F5.
+- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder. That should definitely pull the latest version.
+</details>
+
+<details>
+  <summary>3️⃣ - <i>Why do I notice many visual bugs and inconsistencies where other users seem to have no problem?</i></summary>
+
+- Are you using Jellyfin Media Player? That is why. JMP seems to be using a different or probably an older version of web engine. I am working on adding workarounds, but the progress is slow.
+- Are you not using JMP and still facing issues? See the 4th point below.
+</details>
+
+<details>
+  <summary>4️⃣ - <i>How do I report bugs/issues?</i></summary>
+
+First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know. Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new) and include the following information: 
+- [A] Problem description, 
+- [B] ElegantFin version, 
+- [C] Jellyfin client's platform and version, 
+- [D] Client's resolution, and 
+- [E] any accompanying screenshot.
+
+
+</details>
+<details>
+  <summary>5️⃣ - <i>When can I expect another update?</i></summary>
+
+- 🤷
+</details>
+
+<hr>
+
 
 ## 🙏 FEEDBACK APPRECIATED

Theme/ElegantFin-theme-nightly.css

@@ -0,0 +1,837 @@
+/* ElegantFin Theme for Jellyfin by lscambo13 */
+
+@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");
+
+:root {
+    /* outline: 0px dotted red !important; */
+    --darkerGradientPoint: #111827;
+    --lighterGradientPoint: #1d2635;
+    --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);
+    --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
+    --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
+    --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;
+}
+
+.dashboardFooter::after {
+    content: "ElegantFin Nightly";
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: .6em;
+    opacity: .5;
+}
+
+.itemsContainer,
+.vertical-list {
+    /* gap: .75em; */
+}
+
+.card {
+    margin: .375em;
+}
+
+[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 {
+    background-color: var(--lighterGradientPoint);
+    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,
+.cardOverlayButton {
+    display: none;
+}
+
+/* hide sync button on home screen */
+.skinHeader.noHomeButtonHeader .headerSyncButton {
+    display: none;
+}
+
+/* display sync button when not on home screen */
+.skinHeader:not(.noHomeButtonHeader) .headerSyncButton {
+    /* display: block; */
+}
+
+/* hide search button when not on home screen */
+.skinHeader:not(.noHomeButtonHeader) .headerSearchButton {
+    /* 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;
+}
+
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
+html {
+    background: var(--backgroundGradient)
+}
+
+.backgroundContainer:not(.withBackdrop) {
+    background: var(--backgroundGradient)
+}
+
+.backgroundContainer.withBackdrop {
+    opacity: .9375;
+    background: var(--backgroundGradient)
+}
+
+.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;
+}
+
+.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;
+}
+
+.searchfields-txtSearch {
+    border-radius: 4em;
+}
+
+.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: 1em;
+    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;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.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 {
+    margin: .33em;
+}
+
+.dialog {
+    backdrop-filter: blur(5px);
+    background-color: var(--drawerColor);
+    border-radius: 1em !important;
+    border: solid var(--borderColor) 1px;
+}
+
+.dialogBackdropOpened {
+    opacity: .66;
+}
+
+.actionSheetContent>h1 {
+    font-size: unset;
+}
+
+.collapseContent {
+    background-color: unset !important;
+    backdrop-filter: unset !important;
+}
+
+.selectionCommandsPanel {
+    background: var(--lighterGradientPoint);
+    border-bottom: solid var(--borderColor) 1px;
+    backdrop-filter: blur(10px);
+}
+
+.selectionCommandsPanel>h1 {
+    font-size: large;
+}
+
+.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,
+.cardScalable {
+    background: var(--cardBackgroundGradient) !important;
+}
+
+.listItemImage {
+    border-radius: .5em;
+}
+
+.emby-button.block,
+.button-alt,
+.raised,
+#btnDeleteImage,
+.dashboardActionsContainer>.emby-button {
+    color: #fff;
+    border-radius: .5em;
+    background: var(--lighterGradientPoint);
+    border: solid var(--borderColor) 1px;
+}
+
+.fab {
+    color: #fff;
+    background: var(--lighterGradientPoint);
+    border: solid var(--borderColor) 1px;
+}
+
+.raised:focus {
+    background: var(--lighterGradientPoint);
+    filter: brightness(1.25);
+}
+
+.raised:hover,
+.emby-button:hover {
+    filter: brightness(1.2) !important;
+}
+
+.localnav>.emby-button {
+    background: var(--lighterGradientPoint) !important;
+    color: #fff;
+    padding: .8em .8em;
+}
+
+div[data-role=controlgroup] a.ui-btn-active {
+    background: var(--selectorBackgroundColor) !important;
+    color: #fff !important;
+}
+
+#btnDeleteImage,
+.button-delete {
+    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); */
+}
+
+.paperList {
+    padding: .4em;
+}
+
+.serverInfo {
+    padding: 1em;
+}
+
+.serverInfo>:nth-child(2n) {
+    -webkit-flex: 1 0 60%;
+    flex: 1 0 60%;
+}
+
+.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:not(.actionSheetMenuItem) {
+    /* padding: .75em 1em !important; */
+    padding: 0.25em 0.25em 0.25em 1.5em !important;
+}
+
+.actionSheetContent {
+    padding: .4em !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;
+}
+
+.detailPageContent {
+    gap: 1em;
+}
+
+.trackSelections {
+    order: 2;
+    max-width: unset !important;
+}
+
+.detailsGroupItem,
+.trackSelections .selectContainer {
+    /*flex-direction: column;*/
+    max-width: unset !important;
+    align-items: center;
+}
+
+.trackSelectionFieldContainer>.selectArrowContainer {
+    top: .5em;
+}
+
+.selectArrowContainer {
+    /* top: .5em; */
+    opacity: .5;
+}
+
+.detailSectionContent {
+    order: 1;
+}
+
+.itemDetailsGroup {
+    order: 3;
+}
+
+.sliderBubble {
+    border-radius: 1em;
+    border: solid 1px var(--borderColor);
+    overflow: hidden;
+}
+
+.listItem-border {
+    border-color: transparent !important;
+}
+
+.alphaPickerButton {
+    font-family: monospace;
+    margin: .15em;
+    color: rgba(255, 255, 255, 0.25);
+}
+
+.alphaPickerButton-selected {
+    color: rgba(255, 255, 255, 1);
+}
+
+.alphaPicker-vertical {
+    height: 70%;
+}
+
+.alphaPicker {
+    justify-content: center;
+}
+
+[dir=ltr] .padded-left.vertical-wrap {
+    padding-left: 5% !important;
+}
+
+[dir=ltr] .padded-right.vertical-wrap {
+    padding-right: 5% !important;
+}
+
+.paging {
+    padding-inline: 1em;
+}
+
+.smallBackdropCard,
+.squareCard {
+    width: 47%;
+}
+
+.layout-mobile #myPreferencesMenuPage {
+    padding-top: 3.75em !important;
+}
+
+.headerUserButton {
+    width: 2em;
+    height: 2em;
+    margin-inline-end: 1em;
+    border: solid var(--borderColor) 1px;
+}
+
+.MuiAvatar-circular {
+    width: 1.5em;
+    height: 1.5em;
+    /* margin-inline-end: .5em; */
+    border: solid var(--borderColor) 1px;
+}
+
+.dashboardDocument .content-primary {
+    padding-top: 4.25rem;
+}
+
+.editorNode {
+    display: flex;
+    align-items: center;
+}
+
+.metadataSidebarIcon {
+    color: #6c7bab;
+}
+
+.sectionTitleTextButton {
+    padding-inline: .5em;
+}
+
+.sectionTitleTextButton>* {
+    padding: .3em 0 !important;
+    margin: 0 0 !important;
+}
+
+.sectionTitleTextButton>.material-icons::before {
+    border: solid 1px;
+    border-radius: 1em;
+    font-size: .7em;
+    line-height: 1.4em;
+    font-weight: 600;
+    margin-inline-start: .5em;
+}
+
+.backdropCard,
+.bannerCard {
+    width: 46%;
+}
+
+.toast {
+    background: var(--headerColor);
+    border: solid 1px var(--borderColor);
+    border-radius: .5em;
+    backdrop-filter: blur(1em);
+}

Theme/ElegantFin-theme-v24.12.11.css

@@ -0,0 +1,837 @@
+/* ElegantFin Theme for Jellyfin by lscambo13 */
+
+@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");
+
+:root {
+    /* outline: 0px dotted red !important; */
+    --darkerGradientPoint: #111827;
+    --lighterGradientPoint: #1d2635;
+    --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);
+    --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
+    --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
+    --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;
+}
+
+.dashboardFooter::after {
+    content: "ElegantFin v24.12.11";
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: .6em;
+    opacity: .5;
+}
+
+.itemsContainer,
+.vertical-list {
+    /* gap: .75em; */
+}
+
+.card {
+    margin: .375em;
+}
+
+[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 {
+    background-color: var(--lighterGradientPoint);
+    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,
+.cardOverlayButton {
+    display: none;
+}
+
+/* hide sync button on home screen */
+.skinHeader.noHomeButtonHeader .headerSyncButton {
+    display: none;
+}
+
+/* display sync button when not on home screen */
+.skinHeader:not(.noHomeButtonHeader) .headerSyncButton {
+    /* display: block; */
+}
+
+/* hide search button when not on home screen */
+.skinHeader:not(.noHomeButtonHeader) .headerSearchButton {
+    /* 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;
+}
+
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
+html {
+    background: var(--backgroundGradient)
+}
+
+.backgroundContainer:not(.withBackdrop) {
+    background: var(--backgroundGradient)
+}
+
+.backgroundContainer.withBackdrop {
+    opacity: .9375;
+    background: var(--backgroundGradient)
+}
+
+.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;
+}
+
+.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;
+}
+
+.searchfields-txtSearch {
+    border-radius: 4em;
+}
+
+.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: 1em;
+    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;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.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 {
+    margin: .33em;
+}
+
+.dialog {
+    backdrop-filter: blur(5px);
+    background-color: var(--drawerColor);
+    border-radius: 1em !important;
+    border: solid var(--borderColor) 1px;
+}
+
+.dialogBackdropOpened {
+    opacity: .66;
+}
+
+.actionSheetContent>h1 {
+    font-size: unset;
+}
+
+.collapseContent {
+    background-color: unset !important;
+    backdrop-filter: unset !important;
+}
+
+.selectionCommandsPanel {
+    background: var(--lighterGradientPoint);
+    border-bottom: solid var(--borderColor) 1px;
+    backdrop-filter: blur(10px);
+}
+
+.selectionCommandsPanel>h1 {
+    font-size: large;
+}
+
+.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,
+.cardScalable {
+    background: var(--cardBackgroundGradient) !important;
+}
+
+.listItemImage {
+    border-radius: .5em;
+}
+
+.emby-button.block,
+.button-alt,
+.raised,
+#btnDeleteImage,
+.dashboardActionsContainer>.emby-button {
+    color: #fff;
+    border-radius: .5em;
+    background: var(--lighterGradientPoint);
+    border: solid var(--borderColor) 1px;
+}
+
+.fab {
+    color: #fff;
+    background: var(--lighterGradientPoint);
+    border: solid var(--borderColor) 1px;
+}
+
+.raised:focus {
+    background: var(--lighterGradientPoint);
+    filter: brightness(1.25);
+}
+
+.raised:hover,
+.emby-button:hover {
+    filter: brightness(1.2) !important;
+}
+
+.localnav>.emby-button {
+    background: var(--lighterGradientPoint) !important;
+    color: #fff;
+    padding: .8em .8em;
+}
+
+div[data-role=controlgroup] a.ui-btn-active {
+    background: var(--selectorBackgroundColor) !important;
+    color: #fff !important;
+}
+
+#btnDeleteImage,
+.button-delete {
+    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); */
+}
+
+.paperList {
+    padding: .4em;
+}
+
+.serverInfo {
+    padding: 1em;
+}
+
+.serverInfo>:nth-child(2n) {
+    -webkit-flex: 1 0 60%;
+    flex: 1 0 60%;
+}
+
+.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:not(.actionSheetMenuItem) {
+    /* padding: .75em 1em !important; */
+    padding: 0.25em 0.25em 0.25em 1.5em !important;
+}
+
+.actionSheetContent {
+    padding: .4em !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;
+}
+
+.detailPageContent {
+    gap: 1em;
+}
+
+.trackSelections {
+    order: 2;
+    max-width: unset !important;
+}
+
+.detailsGroupItem,
+.trackSelections .selectContainer {
+    /*flex-direction: column;*/
+    max-width: unset !important;
+    align-items: center;
+}
+
+.trackSelectionFieldContainer>.selectArrowContainer {
+    top: .5em;
+}
+
+.selectArrowContainer {
+    /* top: .5em; */
+    opacity: .5;
+}
+
+.detailSectionContent {
+    order: 1;
+}
+
+.itemDetailsGroup {
+    order: 3;
+}
+
+.sliderBubble {
+    border-radius: 1em;
+    border: solid 1px var(--borderColor);
+    overflow: hidden;
+}
+
+.listItem-border {
+    border-color: transparent !important;
+}
+
+.alphaPickerButton {
+    font-family: monospace;
+    margin: .15em;
+    color: rgba(255, 255, 255, 0.25);
+}
+
+.alphaPickerButton-selected {
+    color: rgba(255, 255, 255, 1);
+}
+
+.alphaPicker-vertical {
+    height: 70%;
+}
+
+.alphaPicker {
+    justify-content: center;
+}
+
+[dir=ltr] .padded-left.vertical-wrap {
+    padding-left: 5% !important;
+}
+
+[dir=ltr] .padded-right.vertical-wrap {
+    padding-right: 5% !important;
+}
+
+.paging {
+    padding-inline: 1em;
+}
+
+.smallBackdropCard,
+.squareCard {
+    width: 47%;
+}
+
+.layout-mobile #myPreferencesMenuPage {
+    padding-top: 3.75em !important;
+}
+
+.headerUserButton {
+    width: 2em;
+    height: 2em;
+    margin-inline-end: 1em;
+    border: solid var(--borderColor) 1px;
+}
+
+.MuiAvatar-circular {
+    width: 1.5em;
+    height: 1.5em;
+    /* margin-inline-end: .5em; */
+    border: solid var(--borderColor) 1px;
+}
+
+.dashboardDocument .content-primary {
+    padding-top: 4.25rem;
+}
+
+.editorNode {
+    display: flex;
+    align-items: center;
+}
+
+.metadataSidebarIcon {
+    color: #6c7bab;
+}
+
+.sectionTitleTextButton {
+    padding-inline: .5em;
+}
+
+.sectionTitleTextButton>* {
+    padding: .3em 0 !important;
+    margin: 0 0 !important;
+}
+
+.sectionTitleTextButton>.material-icons::before {
+    border: solid 1px;
+    border-radius: 1em;
+    font-size: .7em;
+    line-height: 1.4em;
+    font-weight: 600;
+    margin-inline-start: .5em;
+}
+
+.backdropCard,
+.bannerCard {
+    width: 46%;
+}
+
+.toast {
+    background: var(--headerColor);
+    border: solid 1px var(--borderColor);
+    border-radius: .5em;
+    backdrop-filter: blur(1em);
+}