RELEASE: ElegantFin v25.01.03

dev: Finalize v25.01.03
Fix: Scroll buttons were too close to the cards in My Media section on the home screen
2025-09-23 10:39:37 +00:00 · 2025-01-04 07:30:57 -08:00 · 2025-01-02 11:45:23 -08:00 · 2025-01-02 11:34:12 -08:00 · 2025-01-02 10:09:31 -08:00 · 2025-01-02 10:08:04 -08:00
4 changed files with 1789 additions and 87 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+/tmp.txt
--- a/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css
+++ b/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css
--- a/Theme/ElegantFin-theme-nightly.css
+++ b/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%);
-    --activeColor: rgb(201 143 255 / 40%);
+    --hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 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;
-    border: solid rgb(255 255 255 / 65%) var(--borderWidth);
-    mix-blend-mode: plus-lighter;
-    background: var(--hoverGradient);
+    transition: .25s;
+    background: var(--hoverGradientA);
+    background-size: 200%;
+    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,
-.cardOverlayButton {
+.headerHomeButton {
    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) {
-    .itemBackdrop {
-        height: 62vh;
+@media (orientation: landscape) and (max-height: 40em) {
+
+    .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 {
-    border-radius: var(--largeRadius) !important;
-}
-
-.cardText-secondary+.itemSelectionPanel>.checkboxContainer {
+.cardText-secondary+.itemSelectionPanel>.checkboxContainer,
+.cardText.cardTextCentered:not(.cardText-secondary, .cardText-first)+.itemSelectionPanel>.checkboxContainer {
    height: calc(100% - 3.125em);
 }

-.cardScalable+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
-    border-radius: var(--largeRadius) !important;
+.cardFooter+.itemSelectionPanel>.checkboxContainer {
+    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);
-    border: solid rgb(217, 84, 84) var(--borderWidth);
+    background: var(--btnDeleteColor);
+    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);
-    border-radius: var(--largeRadius);
-    font-size: .85em;
-    line-height: unset;
-    font-weight: 600;
-    margin-inline-start: .5em;
+    display: none;
+}
+
+.sectionTitleTextButton>.material-icons.chevron_right {
+    margin-left: .5rem !important;
+    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 {
-    color: inherit;
-    background-color: var(--selectorBackgroundColor);
+.layout-tv .headerLeft {
+    overflow: unset;
+}
+
+.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);
 }
--- a/Theme/ElegantFin-theme-v25.01.03.css
+++ b/Theme/ElegantFin-theme-v25.01.03.css
Author	SHA1	Message	Date
lscambo13	cfd2811bb5	RELEASE: ElegantFin v25.01.03	2025-01-04 07:30:57 -08:00
lscambo13	ea4fe17e61	dev: Finalize v25.01.03	2025-01-02 11:45:23 -08:00
lscambo13	039eb70ae6	Fix: Scroll buttons were too close to the cards in My Media section on the home screen	2025-01-02 11:34:12 -08:00
lscambo13	ba38dc5d4d	Fix: Prevent styles from applying to list icons with transparent backgrounds	2025-01-02 10:09:31 -08:00
lscambo13	0bf21ae4a0	Fix: Prevent early list wrapping in some cases	2025-01-02 10:08:04 -08:00
lscambo13	f7843b9cb5	New: Added colored outline to input boxes that are in focus	2025-01-02 10:06:51 -08:00
lscambo13	d763c5d8f2	Fix: Updated Continue Watching section's progress bar color	2025-01-02 08:58:19 -08:00
lscambo13	90344ea57e	Merge pull request #28 from Tormak9970/dashboard-icons Feat: Styled Additional Dashboard icons & Metadata Save Button	2025-01-02 22:22:50 +05:30
lscambo13	1c7c9236aa	Merge pull request #27 from KeyboardDabbler/replace-chevronRight update: replace chevron_right with svg	2025-01-02 22:09:13 +05:30
Travis Lane	8277988cb6	chore: removed unrelated change	2025-01-01 23:09:55 -06:00
Travis Lane	341e8bc381	fix: scoped styles to apply to more icons and themed metadata save button	2025-01-01 23:09:39 -06:00
keyboarddabbler	8eccecfceb	update: replace chevron_right with svg	2025-01-02 16:54:23 +13:00
lscambo13	646dae0b7b	Fix: Adjusted the width of My Media (Small) buttons to prevent wrapping on small screens	2025-01-01 11:42:30 -08:00
lscambo13	41468099fc	New: Themed the Up Next dialog box	2025-01-01 11:26:17 -08:00
lscambo13	5245f3a8e5	New: Refreshed the hover effect on media cards on desktop Fix: Reworkd how borders on cards are styled to aliasing around the edges Fix: Adjusted the width of thumb cards on phones	2025-01-01 10:12:03 -08:00
lscambo13	11a19d4689	Fix: Item selection checkbox height was not set in some cases	2025-01-01 10:00:19 -08:00
lscambo13	379062d92d	Fix: Removed excess bottom padding from side navigation panel to prevent oveflow	2024-12-30 09:30:38 -08:00
lscambo13	03a0246173	dev: Removed redundant code	2024-12-28 10:43:54 -08:00
lscambo13	8ffa28de7e	dev: Modified activeColor to be opaque	2024-12-28 10:40:22 -08:00
lscambo13	8ac698929b	Fix: Prevent slight misalignment in text below media title	2024-12-28 10:28:51 -08:00
lscambo13	e883ebde72	New: Camouflaged progress bar in active device card when media is not playing New: Updated colors dev: Rearranged code	2024-12-28 10:20:21 -08:00
lscambo13	130ad3a35b	Fix: Removed excess padding on check icons in context menus Fix: Adjusted min-width even more	2024-12-28 08:30:00 -08:00
lscambo13	005264f1a4	Fix: Adjusted min-width of dialog boxes to avoid overflow and clipping	2024-12-28 08:25:53 -08:00
lscambo13	651ceacb48	Fix: Progress bar styling was not applying correctly on Chromium-based browsers	2024-12-28 08:03:05 -08:00
lscambo13	165cf7634a	Merge pull request #20 from Tormak9970/progress-bar chore: added background styling to progress bar in edge	2024-12-28 20:30:46 +05:30
Travis Lane	80e01f6494	chore: added background styling to progress bar in edge	2024-12-27 17:01:49 -05:00
lscambo13	022552d620	Fix: Prevent overflow on the progress bar	2024-12-27 10:15:42 -08:00
lscambo13	5347a360b9	Merge pull request #19 from Tormak9970/progress-bar Add Progress Bar (#16)	2024-12-27 22:54:17 +05:30
lscambo13	37b67dead1	Fix: Workaround for missing progress bars on active device card in Dashboard	2024-12-27 09:09:52 -08:00
lscambo13	e17e918e09	Fix: Prevent hover effect on disabled drop-down menus	2024-12-27 08:40:37 -08:00
lscambo13	841393f1bd	Fix: Reduced the size of mini play button on desktop dev: Code cleanup	2024-12-27 08:11:03 -08:00
Travis Lane	02dae71880	fix: address progress bar styling, #16	2024-12-26 20:46:02 -05:00
Travis Lane	17cf180851	fix: made padding the same on top, left, and bottom of episodes	2024-12-26 20:13:14 -05:00
lscambo13	f9fe918fda	Fixed: Show thumb cards in landscape mode on phones dev: Reorganised some entries	2024-12-26 10:53:54 -08:00
lscambo13	ba6f376173	New: Added hover effects to chapter cards and checkboxes dev: Reorganised some entries	2024-12-26 10:22:54 -08:00
lscambo13	23ad03be9f	Fix: Prevent overlapping of mini buttons	2024-12-26 09:13:32 -08:00
lscambo13	32f877bed6	New: Mini play buttons on cards are back with a fresh coat of paint	2024-12-26 09:07:33 -08:00
lscambo13	7ec5c4a35e	Fix: Made hover overlay slightly brighter to compensate for the lack of blend mode	2024-12-26 09:02:07 -08:00
lscambo13	33f9b007f6	Fix: Disabled blend effect to fix non-working blur effect Fix: Made overlay slightly brighter to compensate for the lack of blend mode	2024-12-26 09:01:15 -08:00
lscambo13	d8e026e227	New: Added rounded corners to playback statistics box Fix: Adjusted border color of itemProgressBar	2024-12-26 06:25:09 -08:00
lscambo13	b47314e482	Fix: Updated progress bars in Continue Watching section on the home screen They were too faded and transluscent in my original design	2024-12-24 09:16:52 -08:00
lscambo13	44b04a5392	New: Styled the focus states of checkboxes, particularly noticeable in TV layout New: Styled the checkbox colors and outlines by taking cues from Jellyseerr dev: Reorganised the file to place similar code blocks together and to avoid code repetition in some areas	2024-12-24 08:42:51 -08:00
lscambo13	c8ed881184	Fix: Reduced right side content padding on Play button	2024-12-24 08:37:28 -08:00
lscambo13	80fd3026ed	dev: Performed formatting	2024-12-24 08:34:23 -08:00
Travis Lane	fa2dcc9cab	Feat: Second Batch of Fixes / Changes (#14 ) * fix: subtitles section label now has rounded corners * fix: select font family is now applied properly There has to be a better solution than using !important, but I can't figure out what's overriding it without !important * fix: added right side padding to the play button on the media details page * chore: tweaked centering of play button * fix: added jellyseer color gradient to info banner The infoBanner class is used on the file path selection modal * fix: changed the size of the slider tooltips to not be comically large * chore: added text-shadow I forgot * fix: checkbox icon no longer overlays borders * fix: adjusted checkbox background and borders * fix: networking section outlines now match the rest of the theme * fix: added appearance of padding to section title buttons that are left-aligned * fix: section title buttons now match Jellyseer * feat: added styling for activity table * feat: added styles for mui modals * chore: first batch of pr adjustments * fix: scoped checkboxes to not include library multi select * chore: addressed playBtn feedback * chore: removed long font def from select options * chore: fixed infoBanner * chore: switched margin-top to place-content	2024-12-24 08:28:49 -08:00
lscambo13	93ca788eea	New: Themed the loading spinner slightly	2024-12-22 21:29:18 +05:30
lscambo13	a175b1e738	Fix: Extra padding in some elements was unintended	2024-12-22 21:28:40 +05:30
lscambo13	e7ff77eaf3	Fix: Some dialog box headings were not centered	2024-12-22 21:26:59 +05:30
lscambo13	944eb4e461	Fix: Restored styling on notification icons in Dashboard	2024-12-22 21:25:40 +05:30
lscambo13	00df125088	New: Subtle font color changes in the media page for better design hierarchy	2024-12-22 20:09:37 +05:30
lscambo13	86043467de	New: Tagline is in italics, again	2024-12-22 19:53:44 +05:30
lscambo13	c3108fab74	Fix: enforce the back button clipping fix only on TV layout	2024-12-21 21:58:58 +05:30
lscambo13	d30ab165fe	Fixes: Readjusted the main media page layout for mobile and desktop separately - backdrop image was flickering on open the media page on mobile phones - styles were not applying in landscape mode and tablet screen sizes - visual glitches while loading on desktop - as a bonus, you can see more of the backdrop on desktop now which looks nicer	2024-12-21 21:39:32 +05:30
lscambo13	8b0a341c52	New :Added a slight background blur on main media buttons	2024-12-21 21:23:57 +05:30
lscambo13	20ec8f131d	Fix: Prevent the expanded header from overlapping page content in TV layout on some resolutions	2024-12-21 21:21:32 +05:30
lscambo13	8b60a8d3c4	Fix: Back button was being clipped in focus state in TV layout	2024-12-21 21:18:13 +05:30
lscambo13	7ff5766cee	Fix: Reduce card size if the screen is landscape and short in height	2024-12-20 12:57:29 -08:00