RELEASE: ElegantFin v24.12.20

chore: bring up to  date with remote

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,36 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**ElegantFin:**
+ - Version [e.g. 24.12.11]
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+ - Screen Resolution [e.g. 1920x1080]
+
+**Smartphone or TV (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/pull_request_template.md

@@ -0,0 +1,28 @@
+# Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.
+
+Fixes # (issue)
+
+## Type of change
+
+- [ ] Bug fix
+- [ ] New feature 
+
+# How Has This Been Tested?
+
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.
+
+**Test Configuration**:
+* Jellyfin server version:
+* Jellyfin client:
+* Client browser name and version:
+* Device:
+
+# Checklist:
+
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code in hard-to-understand areas
+- [ ] I have included relevant comparison screenshots where nececssary
+- [ ] I have tested my changes on the TV layout and Default layout of Jellyfin
+- [ ] I have also tested my changes on multiple devices and screen sizes

README.md

@@ -79,7 +79,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
   <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
+- It should be something like ElegantFin v24.12.XX
 </details>
 
 <details>
@@ -93,21 +93,17 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 </details>
 
 <details>
-  <summary>3️⃣ - <i>Why do I notice many visual bugs and inconsistencies where other users seem to have no problem?</i></summary>
+  <summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</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.
+- Currently JMP uses Qt 5.x which uses an outdated web engine, so many new CSS features do not work. Once they release a new version based on Qt 6.x, most issues should automatically be resolved. Until then, I advise using the web app instead.
 - 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: 
+- 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. 
-- [A] Problem description, 
+- Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
-- [B] ElegantFin version, 
-- [C] Jellyfin client's platform and version, 
-- [D] Client's resolution, and 
-- [E] any accompanying screenshot.
 
 
 </details>

Theme/ElegantFin-theme-nightly.css

@@ -1,12 +1,12 @@
 /* ElegantFin Theme for Jellyfin by lscambo13 */
 
 @import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 :root {
-    /* outline: 0px dotted red !important; */
     --darkerGradientPoint: #111827;
     --lighterGradientPoint: #1d2635;
-    --borderColor: rgba(75, 85, 99, 0.9);
+    --borderColor: rgb(71, 80, 92);
     --headerColor: rgba(30, 40, 54, 0.8);
     --drawerColor: rgba(30, 40, 54, 0.9);
     --lighterBorderColor: rgb(255 255 255 / 20%);
@@ -17,26 +17,59 @@
     --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%);
+    --activeColor: rgb(201 143 255 / 40%);
+    --largerRadius: 1.25em;
+    --largeRadius: 1em;
+    --smallRadius: .5em;
+    --smallerRadius: .375em;
+    --borderWidth: 0.075em;
 }
 
 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;
+    font-family: "Inter", serif;
+    font-optical-sizing: auto;
+    font-weight: 425;
+    font-style: normal;
+}
+
+.dashboardFooter {
+    font-family: Noto Sans;
+    transition: transform 50ms;
 }
 
 .dashboardFooter::after {
     content: "ElegantFin Nightly";
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: .8em;
-    font-size: .6em;
+    color: #4e4e60;
-    opacity: .5;
-}
-
-.itemsContainer,
-.vertical-list {
-    /* gap: .75em; */
 }
 
 .card {
-    margin: .375em;
+    padding: .375em;
+}
+
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    border-radius: var(--largerRadius) !important;
+    border: solid rgba(0, 0, 0, 1) var(--borderWidth) !important;
+    outline: var(--borderWidth) rgba(255, 255, 255, 1) solid;
+    transition: border .1s;
+    filter: brightness(1.125);
+}
+
+.emby-button.show-focus:focus,
+.paper-icon-button-light.show-focus:focus {
+    background: #2f3a53;
+    /* border-radius: var(--smallRadius); */
+    outline: var(--borderWidth) rgb(255 255 255) solid !important;
+    outline-offset: calc(-1*var(--borderWidth));
+    color: #fff;
+    transition: outline 0s, border 0s;
+}
+
+.emby-tabs .emby-button.show-focus:focus {
+    outline: .05em rgb(255 255 255) solid !important;
+    outline-offset: -1em;
+    color: #fff;
+    border-radius: var(--largerRadius);
 }
 
 [dir=ltr] .itemsContainer>.card>.cardBox {
@@ -44,7 +77,7 @@ html {
     margin-right: auto;
 }
 
-.vertical-wrap {
+.vertical-wrap:not(.centered) {
     justify-content: flex-start !important;
 }
 
@@ -52,40 +85,36 @@ html {
 .fullSyncIndicator,
 .mediaSourceIndicator {
     background: rgb(31, 80, 189);
-    border: var(--lighterBorderColor) solid 1px;
+    border: var(--lighterBorderColor) solid var(--borderWidth);
 }
 
 .playedIndicator {
     background: rgb(34, 197, 94);
-    border: var(--lighterBorderColor) solid 1px;
+    border: var(--lighterBorderColor) solid var(--borderWidth);
 }
 
 .cardScalable {
-    border-radius: 1em;
+    border-radius: var(--largeRadius);
-    border: var(--borderColor) solid 1px !important;
+    border: var(--borderColor) solid var(--borderWidth) !important;
     overflow: hidden !important;
     transition: 125ms transform;
-}
+    /* box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); */
-
-.card:hover .cardScalable {
-    /* transform: translateY(-4px); */
-    /* box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 4px 0px; */
 }
 
 .cardImageContainer {
-    border-radius: 1em !important
+    border-radius: var(--largeRadius) !important
 }
 
 .cardOverlayContainer {
-    border-radius: 1em !important;
+    border-radius: var(--largeRadius) !important;
-    border: solid rgb(255 255 255 / 65%) .1em;
+    border: solid rgb(255 255 255 / 65%) var(--borderWidth);
     mix-blend-mode: plus-lighter;
     background: var(--hoverGradient);
 }
 
 .cardBox:not(.visualCardBox) .cardPadder {
     background-color: var(--lighterGradientPoint);
-    border-radius: 1em;
+    border-radius: var(--largeRadius);
 }
 
 .cardOverlayContainer>.cardOverlayFab-primary {
@@ -98,7 +127,6 @@ html {
     .portraitCard,
     .smallBackdropCard,
     .squareCard {
-        /* width: 33.3333333333% !important; */
         width: 30% !important;
     }
 }
@@ -107,7 +135,6 @@ html {
 
     .portraitCard,
     .squareCard {
-        /* width: 25% !important; */
         width: 23% !important;
     }
 }
@@ -116,21 +143,18 @@ html {
 
     .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%;
     }
 }
@@ -152,8 +176,8 @@ h1 {
 
 .portraitCard {
     min-width: 5em;
-    width: 30%;
+    width: 29.5%;
-    max-width: 15em;
+    max-width: 12.9em;
 }
 
 .headerHomeButton,
@@ -166,16 +190,6 @@ h1 {
     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;
 }
@@ -184,14 +198,50 @@ h1 {
     font-size: 1.25em;
 }
 
+.emby-scrollbuttons-button.paper-icon-button-light>.material-icons {
+    font-size: 1.5em;
+    place-content: center;
+}
+
 .detailRibbon {
     background-color: transparent;
 }
 
+.itemBackdrop {
+    height: 13em;
+}
+
+.mediaInfoOfficialRating {
+    border-radius: var(--smallRadius);
+    font-size: 66%;
+    line-height: 1em;
+    margin: 0em 0.5em .15em 0em !important;
+    padding-inline: .5em;
+    padding-block-start: .4em;
+    font-weight: 600;
+    background: transparent !important;
+    border: solid var(--borderWidth) var(--borderColor);
+}
+
+.layout-desktop .detailRibbon {
+    height: auto !important;
+    margin-top: unset !important;
+}
+
+.layout-desktop .detailImageContainer .card {
+    top: unset !important;
+}
+
 .detailPageWrapperContainer {
-    padding-top: 30vh;
+    padding-top: unset;
+    margin-top: unset;
     background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent);
-    margin-top: -40vh;
+}
+
+@media (max-width: 62.5em) {
+    .layout-desktop .itemBackdrop {
+        height: 7em !important;
+    }
 }
 
 @media (orientation: portrait) and (max-width: 40em) {
@@ -199,10 +249,27 @@ h1 {
         height: 40vh;
         opacity: .35;
     }
+
+    .mediaInfoOfficialRating {
+        padding-inline-start: .5em;
+        padding-inline-end: .475em;
+        padding-block-start: 0.470em;
+    }
+
+    .detailPageWrapperContainer {
+        padding-top: 35vh;
+        margin-top: -45vh;
+    }
 }
 
-.itemBackdrop {
+@media (max-height: 31.25em) {
-    height: 45vh;
+    .itemBackdrop {
+        height: 62vh;
+    }
+}
+
+.layout-mobile .itemBackdrop {
+    margin-top: 3.5em;
 }
 
 h2 {
@@ -216,7 +283,6 @@ h2 {
 
 .tagline {
     font-size: 1.3em;
-    font-style: italic;
     font-weight: 400;
     margin-bottom: 0;
 }
@@ -248,7 +314,7 @@ html {
 
 .skinHeader:not(.osdHeader) {
     border-style: solid;
-    border-width: 0 0 1px 0;
+    border-width: 0 0 var(--borderWidth) 0;
     border-color: var(--borderColor);
     transition: all .375s ease-in-out;
 }
@@ -257,12 +323,12 @@ html {
     background-color: rgb(123 123 123 / 30%) !important;
     height: .2em;
     overflow: hidden;
-    border-radius: 1em;
+    border-radius: var(--largeRadius);
 }
 
 .itemProgressBarForeground {
-    border-radius: 1em;
+    border-radius: var(--largeRadius);
-    background-color: rgb(214 144 255 / 65%)
+    background-color: var(--activeColor);
 }
 
 .selectLabel {
@@ -278,34 +344,58 @@ html {
 .emby-input,
 .emby-textarea {
     background-color: var(--selectorBackgroundColor);
-    border: var(--lighterBorderColor) solid 1px;
+    border: var(--lighterBorderColor) solid var(--borderWidth);
-    border-radius: .5em;
+    border-radius: var(--smallRadius);
     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) var(--borderWidth);
-    border: solid var(--lighterBorderColor) 1px;
+}
+
+.inputContainer .emby-input-iconbutton {
+    color: rgba(255, 255, 255, 0.5);
+    margin-left: -2.5em;
+    background-color: transparent !important;
+}
+
+.searchfields-txtSearch {
+    padding: .75em 1.5em !important;
+    border-radius: 4em;
 }
 
 .searchfields-icon {
-    padding: .125em;
+    padding: .25em;
-    /* margin: 0 !important; */
+    margin-left: -1.75em;
-    margin-right: .25em;
     margin-bottom: 0;
-    border-radius: 1em;
+    border-radius: var(--largeRadius);
-    background-color: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.5);
-    /* border-radius: .5em 0em 0em .5em; */
+}
-    border: solid var(--lighterBorderColor) 1px;
+
+.searchfields-icon:hover,
+.searchfields-icon:active,
+.inputContainer .emby-input-iconbutton:hover,
+.inputContainer .emby-input-iconbutton:active {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.searchFields>.searchFieldsInner {
+    flex-direction: row-reverse;
+}
+
+.button-link {
+    color: rgb(200, 200, 200);
+}
+
+.button-link:hover {
+    color: rgb(243, 243, 243) !important;
+    text-decoration: none;
 }
 
 .btnPlay>.detailButton-content {
     -webkit-align-items: unset;
+    align-items: unset;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: unset;
@@ -318,41 +408,20 @@ html {
 
 .btnPlay>.detailButton-content::after {
     padding-left: .25em;
+    margin-top: .1em;
     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;
+    border-right: solid var(--borderColor) var(--borderWidth);
     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-radius: var(--smallRadius);
-    border: solid var(--lighterBorderColor) 1px;
+    border: solid var(--lighterBorderColor) var(--borderWidth);
     padding: .5em .5em !important;
     margin: 0.125em !important;
 }
@@ -367,14 +436,15 @@ html {
 }
 
 .itemDetailsGroup {
-    border: solid var(--borderColor) 1px;
+    outline: var(--borderWidth) solid var(--borderColor);
+    outline-offset: calc(-1*var(--borderWidth));
+    overflow: hidden;
     margin-top: 1.5em;
-    border-radius: .5em;
+    border-radius: var(--smallRadius);
-    /* margin: .5em 1em; */
 }
 
 .itemDetailsGroup>div:not(:last-child) {
-    border-bottom: solid var(--borderColor) 1px;
+    border-bottom: solid var(--borderColor) var(--borderWidth);
 }
 
 .detailsGroupItem {
@@ -398,12 +468,6 @@ html {
     text-align: end;
 }
 
-.genresGroup,
-.directorsGroup,
-.writersGroup {
-    /* border-bottom: solid var(--borderColor) 1px; */
-}
-
 .itemTags,
 .itemTags>a {
     display: none;
@@ -422,9 +486,8 @@ html {
 .innerCardFooter,
 .chapterThumbTextContainer {
     background: transparent;
-    /* display: flex; */
     font-weight: 500;
-    text-shadow: 1px 1px 0px black;
+    text-shadow: .1em .1em 0px black;
     padding: 1em;
     width: auto;
 }
@@ -433,7 +496,6 @@ html {
     width: unset;
 }
 
-
 .dialogContainer {
     margin: .33em;
 }
@@ -441,18 +503,28 @@ html {
 .dialog {
     backdrop-filter: blur(5px);
     background-color: var(--drawerColor);
-    border-radius: 1em !important;
+    border-radius: var(--largeRadius) !important;
-    border: solid var(--borderColor) 1px;
+    border: solid var(--borderColor) var(--borderWidth);
+    min-width: 15em;
 }
 
 .dialogBackdropOpened {
     opacity: .66;
 }
 
+.subtitleEditor-dropZone,
+.imageEditor-dropZone {
+    border-radius: var(--largeRadius);
+}
+
 .actionSheetContent>h1 {
     font-size: unset;
 }
 
+.formDialogHeader>h1 {
+    margin-inline: 0 !important;
+}
+
 .collapseContent {
     background-color: unset !important;
     backdrop-filter: unset !important;
@@ -460,7 +532,7 @@ html {
 
 .selectionCommandsPanel {
     background: var(--lighterGradientPoint);
-    border-bottom: solid var(--borderColor) 1px;
+    border-bottom: solid var(--borderColor) var(--borderWidth);
     backdrop-filter: blur(10px);
 }
 
@@ -473,13 +545,8 @@ html {
     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;
+    border-radius: var(--smallerRadius) !important;
     box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, 0.8);
     background: transparent;
     border-color: white;
@@ -488,11 +555,10 @@ html {
 }
 
 .checkboxOutline {
-    /* background-color: rgb(255, 255, 255); */
     top: unset;
     height: 1.3em;
     width: 1.3em;
-    border-radius: .375em;
+    border-radius: var(--smallerRadius);
 }
 
 
@@ -503,34 +569,31 @@ html {
 }
 
 .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;
+    border-radius: var(--largeRadius) !important;
 }
 
 .cardText-secondary+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
-    border-radius: 1em !important;
+    border-radius: var(--largeRadius) !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;
+    border-radius: var(--largeRadius) !important;
 }
 
 .cardScalable+.itemSelectionPanel>.checkboxContainer {
-    /* height: calc(100% - 3em); */
     height: calc(100% - 0em);
 }
 
 .checkboxOutline.multiSelectCheckboxOutline {
-    border-radius: 1em;
+    border-radius: var(--largeRadius);
     border-width: 0;
     width: 100%;
     height: 100%;
@@ -538,14 +601,12 @@ html {
 
 .cardIndicators {
     -webkit-align-items: center;
-    /* padding: 1em; */
+    align-items: center;
     top: .2em;
 }
 
 .indicator {
-    /* background: rgb(146 146 146 / 20%); */
+    border: solid rgb(124 124 124 / 50%) var(--borderWidth);
-    border: solid rgb(124 124 124 / 50%) 1px;
-    /* padding: .1em; */
     border-radius: 100em;
 }
 
@@ -555,7 +616,7 @@ html {
 }
 
 .listItemImage {
-    border-radius: .5em;
+    border-radius: var(--smallRadius);
 }
 
 .emby-button.block,
@@ -564,23 +625,33 @@ html {
 #btnDeleteImage,
 .dashboardActionsContainer>.emby-button {
     color: #fff;
-    border-radius: .5em;
+    border-radius: var(--smallRadius);
     background: var(--lighterGradientPoint);
-    border: solid var(--borderColor) 1px;
+    border: solid var(--borderColor) var(--borderWidth);
+}
+
+.btnBrowse>.folder {
+    margin-inline-end: .5em;
 }
 
 .fab {
     color: #fff;
     background: var(--lighterGradientPoint);
-    border: solid var(--borderColor) 1px;
+    border: solid var(--borderColor) var(--borderWidth);
+}
+
+.fab:focus {
+    background: var(--lighterGradientPoint) !important;
+    filter: brightness(1.35);
 }
 
 .raised:focus {
-    background: var(--lighterGradientPoint);
+    background: inherit;
-    filter: brightness(1.25);
+    filter: brightness(1.35);
 }
 
 .raised:hover,
+.fab:hover,
 .emby-button:hover {
     filter: brightness(1.2) !important;
 }
@@ -599,12 +670,12 @@ div[data-role=controlgroup] a.ui-btn-active {
 #btnDeleteImage,
 .button-delete {
     background: rgb(169, 29, 29);
-    border: solid rgb(217, 84, 84) 1px;
+    border: solid rgb(217, 84, 84) var(--borderWidth);
 }
 
 .button-submit {
     background: var(--btnSubmitColor) !important;
-    border: solid var(--btnSubmitBorderColor) 1px !important;
+    border: solid var(--btnSubmitBorderColor) var(--borderWidth) !important;
 }
 
 .collapseContent,
@@ -617,10 +688,9 @@ div[data-role=controlgroup] a.ui-btn-active {
 .visualCardBox,
 .paperList {
     background-color: var(--headerColor) !important;
-    border-radius: 1em !important;
+    border-radius: var(--largeRadius) !important;
-    border: solid var(--borderColor) 1px !important;
+    border: solid var(--borderColor) var(--borderWidth) !important;
     box-shadow: unset !important;
-    /* backdrop-filter: blur(5px); */
 }
 
 .paperList {
@@ -647,22 +717,24 @@ div[data-role=controlgroup] a.ui-btn-active {
 .MuiAppBar-root {
     background: var(--headerColor);
     backdrop-filter: blur(5px);
-    border-bottom: solid var(--borderColor) 1px;
+    border-bottom: solid var(--borderColor) var(--borderWidth);
 }
 
 .MuiDrawer-paper {
     background: var(--drawerColor);
     backdrop-filter: blur(5px);
-    border-right: solid var(--borderColor) 1px;
+    border-right: solid var(--borderColor) var(--borderWidth);
+}
+
+.MuiDrawer-paper:first-child {
+    margin-block-start: .25em;
 }
 
 [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;
 }
 
@@ -671,19 +743,33 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .navMenuOption {
-    border-radius: .5em !important;
+    border-radius: var(--smallRadius) !important;
     margin: .5em 1em !important;
 }
 
 .listItem:hover,
 .navMenuOption:hover {
     background: rgba(255, 255, 255, 0.125);
-    border-radius: .8em;
+    border-radius: .7em;
 }
 
 .navMenuOption-selected {
-    background-color: rgb(201 143 255 / 42%) !important;
+    background-color: var(--activeColor) !important;
-    border: solid rgb(255 255 255 / 20%) 1px;
+    border: solid var(--lighterBorderColor) var(--borderWidth);
+}
+
+.MuiListItem-root>a,
+.MuiList-root>a,
+.MuiListItem-root>div {
+    border: solid transparent var(--borderWidth);
+    border-radius: .7em;
+    margin-inline: .5em !important;
+    margin-block: .25em !important;
+}
+
+.Mui-selected {
+    background-color: var(--activeColor) !important;
+    border: solid var(--lighterBorderColor) var(--borderWidth) !important;
 }
 
 .noBackdropTransparency .detailPageSecondaryContainer {
@@ -708,18 +794,17 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .detailsGroupItem,
 .trackSelections .selectContainer {
-    /*flex-direction: column;*/
     max-width: unset !important;
     align-items: center;
 }
 
-.trackSelectionFieldContainer>.selectArrowContainer {
+.selectArrowContainer {
-    top: .5em;
+    top: 0em;
+    opacity: .5;
 }
 
-.selectArrowContainer {
+.trackSelectionFieldContainer>.selectArrowContainer {
-    /* top: .5em; */
+    top: .5em;
-    opacity: .5;
 }
 
 .detailSectionContent {
@@ -731,8 +816,8 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sliderBubble {
-    border-radius: 1em;
+    border-radius: var(--largeRadius);
-    border: solid 1px var(--borderColor);
+    border: solid var(--borderWidth) var(--borderColor);
     overflow: hidden;
 }
 
@@ -746,7 +831,8 @@ div[data-role=controlgroup] a.ui-btn-active {
     color: rgba(255, 255, 255, 0.25);
 }
 
-.alphaPickerButton-selected {
+.alphaPickerButton-selected,
+.alphaPickerButton:hover {
     color: rgba(255, 255, 255, 1);
 }
 
@@ -771,8 +857,11 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .smallBackdropCard,
-.squareCard {
+.squareCard,
-    width: 47%;
+.backdropCard,
+.bannerCard {
+    width: 46%;
+    max-width: 18em;
 }
 
 .layout-mobile #myPreferencesMenuPage {
@@ -783,14 +872,13 @@ div[data-role=controlgroup] a.ui-btn-active {
     width: 2em;
     height: 2em;
     margin-inline-end: 1em;
-    border: solid var(--borderColor) 1px;
+    border: solid var(--borderColor) var(--borderWidth);
 }
 
 .MuiAvatar-circular {
     width: 1.5em;
     height: 1.5em;
-    /* margin-inline-end: .5em; */
+    border: solid var(--borderColor) var(--borderWidth);
-    border: solid var(--borderColor) 1px;
 }
 
 .dashboardDocument .content-primary {
@@ -815,23 +903,107 @@ div[data-role=controlgroup] a.ui-btn-active {
     margin: 0 0 !important;
 }
 
+.dashboardSection .sectionTitleTextButton>.material-icons,
+.sectionTitleTextButton>.material-icons,
+.dashboardSection .sectionTitleTextButton>.material-icons.material-icons {
+    font-size: unset;
+}
+
 .sectionTitleTextButton>.material-icons::before {
-    border: solid 1px;
+    border: solid var(--borderWidth);
-    border-radius: 1em;
+    border-radius: var(--largeRadius);
-    font-size: .7em;
+    font-size: .85em;
-    line-height: 1.4em;
+    line-height: unset;
     font-weight: 600;
     margin-inline-start: .5em;
 }
 
-.backdropCard,
-.bannerCard {
-    width: 46%;
-}
-
 .toast {
     background: var(--headerColor);
-    border: solid 1px var(--borderColor);
+    border: solid var(--borderWidth) var(--borderColor);
-    border-radius: .5em;
+    border-radius: var(--smallRadius);
     backdrop-filter: blur(1em);
 }
+
+.activeSession {
+    width: 98% !important;
+    max-width: 27rem !important;
+}
+
+.layout-tv .itemBackdrop {
+    display: block;
+    height: 13vh;
+}
+
+.emby-tab-button:hover {
+    color: #c1c1c1;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .paper-icon-button-light:hover:not(:disabled) {
+        color: #fff;
+        background-color: rgb(255 255 255 / 5%);
+    }
+}
+
+.paper-icon-button-light:active:not(:disabled) {
+    color: #fff;
+    background-color: rgb(255 255 255 / 5%);
+}
+
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #fff;
+}
+
+.emby-select-withcolor:focus,
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #c1c1c1 !important;
+}
+
+.layout-mobile [dir=ltr] .infoWrapper {
+    padding-left: 34%;
+}
+
+[dir=ltr] .mediaInfoItem {
+    transform: scale(.85);
+    margin: 0 .4em 0 0;
+}
+
+.programCell-active {
+    background-color: var(--activeColor) !important;
+    border-radius: .5em;
+    margin-block: .5em !important;
+}
+
+.emby-select-iconbutton {
+    background-color: var(--selectorBackgroundColor);
+    border: var(--lighterBorderColor) solid var(--borderWidth);
+    border-radius: var(--smallRadius);
+    margin-inline-start: 1em;
+}
+
+@media (min-width: 62em) {
+    .sectionTabs:not(.layout-tv .sectionTabs) {
+        -webkit-align-items: center;
+        align-items: center;
+        -webkit-align-self: center;
+        align-self: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        margin-top: -4.3em;
+        position: relative;
+        width: auto;
+    }
+
+    .libraryPage:not(.noSecondaryNavPage) {
+        padding-top: 4.8em !important;
+    }
+}
+
+.emby-select-withcolor>option {
+    color: inherit;
+    background-color: var(--selectorBackgroundColor);
+}