RELEASE: ElegantFin v25.01.03

Feat: Styled Additional Dashboard icons & Metadata Save Button

.gitignore

@@ -0,0 +1 @@
+/tmp.txt

Theme/ElegantFin-theme-nightly.css

@@ -5,19 +5,28 @@
 
 :root {
     --darkerGradientPoint: #111827;
+    --darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
     --lighterGradientPoint: #1d2635;
     --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%);
     --selectorBackgroundColor: rgb(55, 65, 81);
+    --btnDeleteColor: rgb(169, 29, 29);
+    --btnDeleteBorderColor: rgb(217, 84, 84);
     --btnSubmitColor: rgb(61, 54, 178);
     --btnSubmitBorderColor: rgb(117 111 226);
     --checkboxCheckedBgColor: rgb(79, 70, 229);
+    --highlightOutlineColor: rgb(37, 99, 235);
+    --textColor: rgb(209, 213, 219);
+    --dimTextColor: rgb(156, 163, 175);
+    --activeColorAlpha: rgb(201 143 255 / 40%);
+    --activeColor: rgb(119 82 153);
+    --tableBodyColor: rgb(31 41 55 / 1);
     --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%);
+    --hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 40%);
-    --activeColor: rgb(201 143 255 / 40%);
+    --hoverGradientB: radial-gradient(100% 250% at 90% 190%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.33) 100%);
     --largerRadius: 1.25em;
     --largeRadius: 1em;
     --smallRadius: .5em;
@@ -58,7 +67,6 @@ html {
 .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;
@@ -95,32 +103,102 @@ html {
 
 .cardScalable {
     border-radius: var(--largeRadius);
-    border: var(--borderColor) solid var(--borderWidth) !important;
+    border: var(--borderColor) solid calc(2 * var(--borderWidth)) !important;
     overflow: hidden !important;
     transition: 125ms transform;
-    /* box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); */
+}
+
+.layout-mobile .cardScalable {
+    border: var(--borderColor) solid var(--borderWidth) !important;
 }
 
 .cardImageContainer {
-    border-radius: var(--largeRadius) !important
+    transition: transform .375s;
+}
+
+.card.card-hoverable:hover .cardScalable {
+    border-color: var(--textColor) !important;
+}
+
+.card.card-hoverable:hover .cardImageContainer {
+    transform: scale(1.025);
+}
+
+.card.card-hoverable:hover .itemSelectionPanel {
+    transform: scale(1.025);
 }
 
 .cardOverlayContainer {
-    border-radius: var(--largeRadius) !important;
+    transition: .25s;
-    border: solid rgb(255 255 255 / 65%) var(--borderWidth);
+    background: var(--hoverGradientA);
-    mix-blend-mode: plus-lighter;
+    background-size: 200%;
-    background: var(--hoverGradient);
+    background-position-x: 100%;
+}
+
+.layout-desktop .card.card-hoverable:hover .cardOverlayContainer {
+    background-position-x: 0%;
 }
 
 .cardBox:not(.visualCardBox) .cardPadder {
     background-color: var(--lighterGradientPoint);
-    border-radius: var(--largeRadius);
 }
 
 .cardOverlayContainer>.cardOverlayFab-primary {
+    left: unset;
+    margin-left: unset;
+    margin-top: unset;
+    top: unset;
+    right: 1.25em;
+    bottom: 1.25em;
+}
+
+.cardOverlayContainer>.cardOverlayFab-primary,
+.listItemImageButton {
+    background-color: rgba(0, 0, 0, 0.9);
+    color: var(--textColor);
+    border: solid var(--borderColor) var(--borderWidth);
+    font-size: 75%;
+}
+
+.cardOverlayContainer>.cardOverlayFab-primary:hover,
+.listItemImageButton:hover {
+    background-color: rgba(0, 0, 0, 0.75) !important;
+}
+
+.layout-desktop .cardOverlayButton-br {
     display: none;
 }
 
+.layout-mobile .portraitCard .cardOverlayButton-br,
+.layout-mobile .backdropCard .cardOverlayButton-br {
+    display: none;
+}
+
+.cardOverlayContainer:has(.cardOverlayButton:hover) {
+    backdrop-filter: blur(.25em);
+}
+
+.cardScalable:has(.cardOverlayContainer .cardOverlayButton:hover)>.cardImageContainer {
+    transform: scale(1);
+}
+
+.card.card-hoverable:hover .cardScalable {
+    transform: scale(1.02);
+}
+
+.listViewUserDataButtons {
+    flex-direction: column;
+    padding-inline-end: .75em;
+    padding-inline-start: 1em;
+}
+
+.smallBackdropCard,
+.squareCard,
+.backdropCard,
+.bannerCard {
+    width: 46%;
+    max-width: 18em;
+}
 
 @media (min-width: 31.25em) {
 
@@ -149,13 +227,13 @@ html {
 
 @media (min-width: 25em) {
     .backdropCard {
-        width: 49%;
+        width: 46%;
     }
 }
 
 @media (min-width: 48.125em) {
     .backdropCard {
-        width: 32%;
+        width: 31%;
     }
 }
 
@@ -167,6 +245,20 @@ h1 {
     font-size: 3em;
 }
 
+.detailPageWrapperContainer {
+    padding-top: unset;
+    margin-top: unset;
+}
+
+.layout-mobile .detailPageWrapperContainer {
+    background: var(--darkerGradientPointAlpha);
+}
+
+.layout-desktop .detailPageWrapperContainer {
+    background: linear-gradient(0deg, var(--darkerGradientPoint) 80%, transparent);
+    min-height: calc(100vh - 13em);
+}
+
 .detailPagePrimaryContainer {
     align-content: space-between;
     align-items: stretch;
@@ -174,14 +266,33 @@ h1 {
     flex-direction: column;
 }
 
+[dir=ltr] .detailPagePrimaryContent {
+    padding-right: 0;
+}
+
+.layout-mobile .detailPagePrimaryContainer {
+    background: linear-gradient(0deg, var(--darkerGradientPoint) 70%, transparent);
+}
+
+.layout-desktop .detailPagePrimaryContainer {
+    background: transparent;
+}
+
+.layout-mobile .detailPageSecondaryContainer {
+    background-color: var(--darkerGradientPoint);
+}
+
+.layout-desktop .detailPageSecondaryContainer {
+    background-color: transparent;
+}
+
 .portraitCard {
     min-width: 5em;
     width: 29.5%;
     max-width: 12.9em;
 }
 
-.headerHomeButton,
+.headerHomeButton {
-.cardOverlayButton {
     display: none;
 }
 
@@ -198,6 +309,10 @@ h1 {
     font-size: 1.25em;
 }
 
+.verticalSection.emby-scroller-container>h2.sectionTitle.sectionTitle-cards {
+    padding-top: 1.25em !important;
+}
+
 .emby-scrollbuttons-button.paper-icon-button-light>.material-icons {
     font-size: 1.5em;
     place-content: center;
@@ -232,22 +347,41 @@ h1 {
     top: unset !important;
 }
 
-.detailPageWrapperContainer {
-    padding-top: unset;
-    margin-top: unset;
-    background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent);
-}
-
 @media (max-width: 62.5em) {
     .layout-desktop .itemBackdrop {
         height: 7em !important;
     }
+
+    .layout-desktop .detailPageWrapperContainer {
+        min-height: calc(100vh - 7em);
+    }
+}
+
+@media (max-width: 50em) {
+    .homeLibraryButton {
+        width: 45% !important;
+    }
+}
+
+.homeLibraryButton {
+    min-width: 15%;
+}
+
+@media (orientation: landscape) and (min-width: 40em) {
+    .layout-mobile .itemBackdrop {
+        height: 40vh;
+        opacity: .10;
+    }
+
+    .layout-mobile .detailPageWrapperContainer {
+        padding-top: 35vh;
+        margin-top: -47vh;
+    }
 }
 
 @media (orientation: portrait) and (max-width: 40em) {
     .layout-mobile .itemBackdrop {
         height: 40vh;
-        opacity: .35;
     }
 
     .mediaInfoOfficialRating {
@@ -256,15 +390,22 @@ h1 {
         padding-block-start: 0.470em;
     }
 
-    .detailPageWrapperContainer {
+    .layout-mobile .detailPageWrapperContainer {
         padding-top: 35vh;
-        margin-top: -45vh;
+        margin-top: -47vh;
     }
 }
 
-@media (max-height: 31.25em) {
+@media (orientation: landscape) and (max-height: 40em) {
-    .itemBackdrop {
+
-        height: 62vh;
+    .portraitCard {
+        min-width: 2em;
+        width: 8.5%;
+        max-width: 6.5em;
+    }
+
+    .backdropCard {
+        width: 23%;
     }
 }
 
@@ -272,6 +413,11 @@ h1 {
     margin-top: 3.5em;
 }
 
+.layout-tv .itemBackdrop {
+    display: block;
+    height: 13vh;
+}
+
 h2 {
     font-size: 1.25em;
 }
@@ -285,6 +431,8 @@ h2 {
     font-size: 1.3em;
     font-weight: 400;
     margin-bottom: 0;
+    font-style: italic;
+    color: var(--textColor);
 }
 
 .nowPlayingPlaylist,
@@ -319,16 +467,48 @@ html {
     transition: all .375s ease-in-out;
 }
 
-.itemProgressBar {
+.itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
+    backdrop-filter: blur(.1em);
     background-color: rgb(123 123 123 / 30%) !important;
-    height: .2em;
+    height: .3em;
+    box-shadow: inset 0px 0px 0.01em .01em #969696;
     overflow: hidden;
     border-radius: var(--largeRadius);
 }
 
 .itemProgressBarForeground {
     border-radius: var(--largeRadius);
-    background-color: var(--activeColor);
+    background-color: var(--btnSubmitBorderColor);
+}
+
+.backgroundProgress>div {
+    background-color: var(--darkerGradientPoint);
+}
+
+.playbackProgress>div {
+    background-color: var(--btnSubmitBorderColor);
+}
+
+::-moz-progress-bar {
+    background: var(--btnSubmitBorderColor) !important;
+    border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
+}
+
+::-webkit-progress-value {
+    background: var(--btnSubmitBorderColor) !important;
+    border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
+}
+
+progress,
+::-webkit-progress-bar {
+    background: var(--darkerGradientPoint) !important;
+    border: solid var(--borderColor) var(--borderWidth) !important;
+    border-radius: var(--smallRadius);
+    overflow: hidden;
+}
+
+progress+span {
+    color: var(--btnSubmitBorderColor) !important;
 }
 
 .selectLabel {
@@ -339,16 +519,6 @@ html {
     margin-top: 2em;
 }
 
-.emby-select-withcolor,
-.emby-select,
-.emby-input,
-.emby-textarea {
-    background-color: var(--selectorBackgroundColor);
-    border: var(--lighterBorderColor) solid var(--borderWidth);
-    border-radius: var(--smallRadius);
-    padding: .5em !important;
-}
-
 .btnPlay {
     background-color: rgba(255, 255, 255, 0.05);
     border: solid var(--lighterBorderColor) var(--borderWidth);
@@ -408,7 +578,8 @@ html {
 
 .btnPlay>.detailButton-content::after {
     padding-left: .25em;
-    margin-top: .1em;
+    padding-right: .5em;
+    place-content: center;
     content: "Play";
 }
 
@@ -419,11 +590,22 @@ html {
     backdrop-filter: blur(8px);
 }
 
+.mainDrawer-scrollContainer {
+    padding-bottom: 5vh;
+}
+
 .detailButton {
     border-radius: var(--smallRadius);
     border: solid var(--lighterBorderColor) var(--borderWidth);
     padding: .5em .5em !important;
     margin: 0.125em !important;
+    backdrop-filter: blur(.1em);
+}
+
+.btnHeaderSave.button-flat {
+    color: var(--btnSubmitBorderColor) !important;
+    gap: 0.3em;
+    border-radius: var(--smallRadius);
 }
 
 .button-flat:hover {
@@ -466,6 +648,15 @@ html {
 
 .detailsGroupItem>.content {
     text-align: end;
+    color: var(--dimTextColor);
+}
+
+.detailsGroupItem>.label {
+    color: var(--textColor);
+}
+
+.itemExternalLinks {
+    color: var(--textColor);
 }
 
 .itemTags,
@@ -477,6 +668,7 @@ html {
 
 .detail-clamp-text {
     text-align: start;
+    color: var(--dimTextColor);
 }
 
 .itemMiscInfo {
@@ -505,13 +697,17 @@ html {
     background-color: var(--drawerColor);
     border-radius: var(--largeRadius) !important;
     border: solid var(--borderColor) var(--borderWidth);
-    min-width: 15em;
+    min-width: 11em;
 }
 
 .dialogBackdropOpened {
     opacity: .66;
 }
 
+[dir=ltr] .actionsheetMenuItemIcon.check {
+    margin: 0 .45em 0 .45em !important;
+}
+
 .subtitleEditor-dropZone,
 .imageEditor-dropZone {
     border-radius: var(--largeRadius);
@@ -521,8 +717,10 @@ html {
     font-size: unset;
 }
 
-.formDialogHeader>h1 {
+.formDialogHeaderTitle {
     margin-inline: 0 !important;
+    text-align: center;
+    padding: 0 0.5em !important;
 }
 
 .collapseContent {
@@ -572,26 +770,28 @@ html {
     height: calc(100% - 1.75em);
 }
 
-.cardText-first+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
+.checkboxContainer .emby-checkbox:checked+span+.checkboxOutline.multiSelectCheckboxOutline {
     border-radius: var(--largeRadius) !important;
 }
 
-.cardText-secondary+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
+.cardText-secondary+.itemSelectionPanel>.checkboxContainer,
-    border-radius: var(--largeRadius) !important;
+.cardText.cardTextCentered:not(.cardText-secondary, .cardText-first)+.itemSelectionPanel>.checkboxContainer {
-}
-
-.cardText-secondary+.itemSelectionPanel>.checkboxContainer {
     height: calc(100% - 3.125em);
 }
 
-.cardScalable+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
+.cardFooter+.itemSelectionPanel>.checkboxContainer {
-    border-radius: var(--largeRadius) !important;
+    height: calc(100% - 3.75em);
 }
 
 .cardScalable+.itemSelectionPanel>.checkboxContainer {
     height: calc(100% - 0em);
 }
 
+.checkboxContainer:hover .checkboxOutline:not(.multiSelectCheckboxOutline) {
+    border-color: var(--checkboxCheckedBgColor);
+    border-width: calc(2 * var(--borderWidth));
+}
+
 .checkboxOutline.multiSelectCheckboxOutline {
     border-radius: var(--largeRadius);
     border-width: 0;
@@ -599,12 +799,49 @@ html {
     height: 100%;
 }
 
+.checkboxOutline:not(.multiSelectCheckboxOutline) .checkboxIcon {
+    font-size: .9em;
+    font-weight: 900;
+}
+
+.checkboxOutline:not(.multiSelectCheckboxOutline) {
+    border: solid gray var(--borderWidth);
+    background-color: white;
+}
+
+.emby-checkbox:checked+span+.checkboxOutline:not(.multiSelectCheckboxOutline) {
+    box-shadow: none;
+    background: var(--checkboxCheckedBgColor);
+    border: var(--lighterBorderColor) solid var(--borderWidth);
+}
+
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border-color: var(--highlightOutlineColor) !important;
+    outline: var(--borderWidth) solid gray;
+    outline-offset: calc(-2.5*var(--borderWidth));
+}
+
+.emby-checkbox:focus+span+.checkboxOutline {
+    border-color: white !important;
+    outline: var(--borderWidth) solid var(--highlightOutlineColor);
+}
+
 .cardIndicators {
     -webkit-align-items: center;
     align-items: center;
-    top: .2em;
+    top: .5em;
 }
 
+[dir=ltr] .cardIndicators {
+    right: .5em;
+}
+
+.layout-mobile .cardIndicators {
+    top: .2em;
+    right: .2em;
+}
+
+
 .indicator {
     border: solid rgb(124 124 124 / 50%) var(--borderWidth);
     border-radius: 100em;
@@ -669,8 +906,8 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 #btnDeleteImage,
 .button-delete {
-    background: rgb(169, 29, 29);
+    background: var(--btnDeleteColor);
-    border: solid rgb(217, 84, 84) var(--borderWidth);
+    border: solid var(--btnDeleteBorderColor) var(--borderWidth);
 }
 
 .button-submit {
@@ -710,6 +947,20 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-color: var(--lighterGradientPoint) !important;
 }
 
+.listItemIcon.notification_important {
+    background-color: var(--btnDeleteColor) !important;
+    border: solid var(--btnDeleteBorderColor) var(--borderWidth);
+}
+
+.listItemIcon.notifications:not(.listItemIcon-transparent),
+.listItemIcon.schedule:not(.listItemIcon-transparent),
+.listItemIcon.person:not(.listItemIcon-transparent),
+.listItemIcon.live_tv:not(.listItemIcon-transparent) {
+    background-color: rgb(41, 49, 83) !important;
+    border: solid var(--borderColor) var(--borderWidth);
+}
+
+
 .readOnlyContent {
     flex-direction: column !important;
 }
@@ -734,10 +985,14 @@ div[data-role=controlgroup] a.ui-btn-active {
     padding: .75em 1em !important;
 }
 
-[dir=ltr] .listItem:not(.actionSheetMenuItem) {
+[dir=ltr] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem) {
     padding: 0.25em 0.25em 0.25em 1.5em !important;
 }
 
+[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] {
+    padding: .5em 0.25em 0.5em 0.5em !important;
+}
+
 .actionSheetContent {
     padding: .4em !important;
 }
@@ -772,10 +1027,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     border: solid var(--lighterBorderColor) var(--borderWidth) !important;
 }
 
-.noBackdropTransparency .detailPageSecondaryContainer {
-    background-color: transparent;
-}
-
 .detailSection {
     display: flex;
     flex-direction: column;
@@ -856,14 +1107,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     padding-inline: 1em;
 }
 
-.smallBackdropCard,
-.squareCard,
-.backdropCard,
-.bannerCard {
-    width: 46%;
-    max-width: 18em;
-}
-
 .layout-mobile #myPreferencesMenuPage {
     padding-top: 3.75em !important;
 }
@@ -898,6 +1141,11 @@ div[data-role=controlgroup] a.ui-btn-active {
     padding-inline: .5em;
 }
 
+.sectionTitleTextButton:hover {
+    background: transparent !important;
+    color: white !important;
+}
+
 .sectionTitleTextButton>* {
     padding: .3em 0 !important;
     margin: 0 0 !important;
@@ -910,18 +1158,40 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sectionTitleTextButton>.material-icons::before {
-    border: solid var(--borderWidth);
+    display: none;
-    border-radius: var(--largeRadius);
+}
-    font-size: .85em;
+
-    line-height: unset;
+.sectionTitleTextButton>.material-icons.chevron_right {
-    font-weight: 600;
+    margin-left: .5rem !important;
-    margin-inline-start: .5em;
+    height: 1.5rem;
+    width: 1.5rem;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23D1D5DB' aria-hidden='true'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
+    background-size: contain;
+    /* Stops miscalculating the size on hover effect */
 }
 
 .toast {
-    background: var(--headerColor);
-    border: solid var(--borderWidth) var(--borderColor);
     border-radius: var(--smallRadius);
+}
+
+.upNextContainer {
+    border-radius: var(--largeRadius);
+    color: var(--textColor);
+}
+
+.upNextContainer .btnStartNow {
+    background-color: var(--btnSubmitColor);
+    border-color: var(--btnSubmitBorderColor);
+}
+
+.upNextContainer .upNextDialog-countdownText {
+    color: white;
+}
+
+.toast,
+.upNextContainer {
+    background: var(--headerColor) !important;
+    border: solid var(--borderWidth) var(--borderColor) !important;
     backdrop-filter: blur(1em);
 }
 
@@ -930,11 +1200,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     max-width: 27rem !important;
 }
 
-.layout-tv .itemBackdrop {
-    display: block;
-    height: 13vh;
-}
-
 .emby-tab-button:hover {
     color: #c1c1c1;
 }
@@ -951,6 +1216,16 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-color: rgb(255 255 255 / 5%);
 }
 
+.emby-select-withcolor,
+.emby-select,
+.emby-input,
+.emby-textarea {
+    background-color: var(--selectorBackgroundColor);
+    border: var(--lighterBorderColor) solid var(--borderWidth);
+    border-radius: var(--smallRadius);
+    padding: .5em !important;
+}
+
 .inputLabelFocused,
 .selectLabelFocused,
 .textareaLabelFocused {
@@ -960,7 +1235,19 @@ div[data-role=controlgroup] a.ui-btn-active {
 .emby-select-withcolor:focus,
 .emby-input:focus,
 .emby-textarea:focus {
-    border-color: #c1c1c1 !important;
+    border-color: var(--highlightOutlineColor) !important;
+    outline: thin solid var(--highlightOutlineColor) !important;
+}
+
+.emby-select-withcolor:hover:not(.emby-select[disabled], :focus),
+.emby-input:hover:not(:focus),
+.emby-textarea:hover:not(:focus) {
+    border-color: var(--dimTextColor) !important;
+}
+
+.emby-select-withcolor>option {
+    color: inherit;
+    background-color: var(--selectorBackgroundColor);
 }
 
 .layout-mobile [dir=ltr] .infoWrapper {
@@ -968,6 +1255,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 [dir=ltr] .mediaInfoItem {
+    transform-origin: left;
     transform: scale(.85);
     margin: 0 .4em 0 0;
 }
@@ -998,12 +1286,70 @@ div[data-role=controlgroup] a.ui-btn-active {
         width: auto;
     }
 
-    .libraryPage:not(.noSecondaryNavPage) {
+    .libraryPage:not(.noSecondaryNavPage):not(.layout-tv .libraryPage) {
         padding-top: 4.8em !important;
     }
 }
 
-.emby-select-withcolor>option {
+.layout-tv .headerLeft {
-    color: inherit;
+    overflow: unset;
-    background-color: var(--selectorBackgroundColor);
+}
+
+.mdl-spinner__circle {
+    border-color: var(--dimTextColor);
+    border-style: inset;
+}
+
+.subtitleappearance-preview {
+    border-radius: var(--smallRadius);
+}
+
+.infoBanner {
+    display: flex;
+    place-content: center;
+    background-color: var(--headerColor) !important;
+    border-radius: var(--largeRadius) !important;
+    border: solid var(--borderColor) var(--borderWidth) !important;
+}
+
+.sliderBubbleText {
+    font-size: 1.5em;
+}
+
+fieldset {
+    border-radius: var(--smallRadius);
+    border-color: var(--borderColor) solid var(--borderWidth);
+}
+
+#serverActivityPage .MuiPaper-elevation2 {
+    border: solid var(--borderColor) var(--borderWidth) !important;
+    box-shadow: unset !important;
+    background-color: var(--tableBodyColor);
+}
+
+#serverActivityPage .MuiPaper-elevation2>.MuiBox-root,
+#serverActivityPage .MuiTableRow-root.MuiTableRow-head,
+#serverActivityPage .MuiTableRow-root {
+    background-color: var(--tableBodyColor) !important;
+}
+
+.MuiList-root.MuiMenu-list {
+    background-color: var(--drawerColor);
+}
+
+ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
+    /* ! Don't change these units. They are rem because that is standard for MUI */
+    gap: 0.5rem;
+}
+
+.playerStats {
+    border-radius: var(--largeRadius);
+}
+
+#scenesContent .cardScalable:hover {
+    border-color: var(--dimTextColor) !important;
+}
+
+.progressring-spiner {
+    border-color: var(--btnSubmitBorderColor);
 }