New: Login screen supports slideshows now

Fix: Reduced padding on these card buttons on the bottom-right

Theme/ElegantFin-theme-nightly.css

@@ -7,6 +7,7 @@
     --darkerGradientPoint: #111827;
     --darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
     --lighterGradientPoint: #1d2635;
+    --lighterGradientPointAlpha: rgba(29, 38, 53, 0.5);
     --borderColor: rgb(71, 80, 92);
     --headerColor: rgba(30, 40, 54, 0.8);
     --drawerColor: rgba(30, 40, 54, 0.9);
@@ -32,6 +33,10 @@
     --smallRadius: .5em;
     --smallerRadius: .375em;
     --borderWidth: 0.075em;
+    /* --loginPageBgUrl: url("https://image.tmdb.org/t/p/original/fVsy8Z646SZUP6qLJrQCAwi0jhq.jpg"); */
+    /* --loginPageBgUrl: url(""); */
+    /* --loginPageBackground: linear-gradient(var(--lighterGradientPointAlpha) 10%, var(--lighterGradientPoint)), var(--loginPageBgUrl); */
+    --loginPageText: "\A\A\A\A\ASign in to continue";
 }
 
 html {
@@ -105,7 +110,7 @@ html {
     border-radius: var(--largeRadius);
     border: var(--borderColor) solid calc(2 * var(--borderWidth)) !important;
     overflow: hidden !important;
-    transition: 125ms transform;
+    transition: transform 125ms;
 }
 
 .layout-mobile .cardScalable {
@@ -124,8 +129,22 @@ html {
     transform: scale(1.025);
 }
 
+.card.card-hoverable .itemSelectionPanel {
+    transition: transform .125s;
+}
+
+.card.card-hoverable:hover .cardScalable,
 .card.card-hoverable:hover .itemSelectionPanel {
-    transform: scale(1.025);
+    transform: scale(1.02);
+}
+
+.card.card-hoverable .cardScalable:active {
+    transition: transform .075s;
+    transform: scale(1);
+}
+
+.cardScalable:has(.cardOverlayContainer .cardOverlayButton:hover)>.cardImageContainer {
+    transform: scale(1);
 }
 
 .cardOverlayContainer {
@@ -169,8 +188,17 @@ html {
     display: none;
 }
 
+.layout-mobile .cardOverlayButton {
+    padding: .425em;
+}
+
+.layout-mobile .cardOverlayButton-br>.cardOverlayButtonIcon {
+    border: solid var(--borderColor) var(--borderWidth);
+}
+
 .layout-mobile .portraitCard .cardOverlayButton-br,
-.layout-mobile .backdropCard .cardOverlayButton-br {
+.layout-mobile .backdropCard .cardOverlayButton-br,
+.layout-mobile .cardOverlayButton-br[data-action="menu"] {
     display: none;
 }
 
@@ -178,14 +206,6 @@ html {
     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;
@@ -242,7 +262,7 @@ html {
 }
 
 h1 {
-    font-size: 3em;
+    /* font-size: 3em; */
 }
 
 .detailPageWrapperContainer {
@@ -723,6 +743,11 @@ progress+span {
     padding: 0 0.5em !important;
 }
 
+.formDialogFooter:not(.formDialogFooter-clear.formDialogFooter-flex)>.formDialogFooterItem {
+    -webkit-flex-basis: 6em;
+    flex-basis: 6em;
+}
+
 .collapseContent {
     background-color: unset !important;
     backdrop-filter: unset !important;
@@ -748,8 +773,9 @@ progress+span {
     box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, 0.8);
     background: transparent;
     border-color: white;
-    border-style: groove;
+    border-style: solid;
-    border-width: 2px;
+    border-width: calc(2 * var(--borderWidth));
+    outline: solid var(--borderWidth) white;
 }
 
 .checkboxOutline {
@@ -776,7 +802,7 @@ progress+span {
 
 .cardText-secondary+.itemSelectionPanel>.checkboxContainer,
 .cardText.cardTextCentered:not(.cardText-secondary, .cardText-first)+.itemSelectionPanel>.checkboxContainer {
-    height: calc(100% - 3.125em);
+    height: calc(100% - 3em);
 }
 
 .cardFooter+.itemSelectionPanel>.checkboxContainer {
@@ -787,11 +813,6 @@ progress+span {
     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;
@@ -1209,6 +1230,17 @@ div[data-role=controlgroup] a.ui-btn-active {
         color: #fff;
         background-color: rgb(255 255 255 / 5%);
     }
+
+    .emby-select-withcolor:hover:not(.emby-select[disabled], :focus),
+    .emby-input:hover:not(:focus),
+    .emby-textarea:hover:not(:focus) {
+        border-color: var(--dimTextColor) !important;
+    }
+
+    .checkboxContainer:hover .checkboxOutline:not(.multiSelectCheckboxOutline) {
+        border-color: var(--checkboxCheckedBgColor);
+        border-width: calc(2 * var(--borderWidth));
+    }
 }
 
 .paper-icon-button-light:active:not(:disabled) {
@@ -1239,12 +1271,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     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);
@@ -1352,4 +1378,158 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 
 .progressring-spiner {
     border-color: var(--btnSubmitBorderColor);
+}
+
+.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.semiTransparent.noHeaderRight {
+    display: none;
+}
+
+#loginPage {
+    /* --loginPageBgUrl: url(""); */
+    --loginPageBgUrl: url("https://image.tmdb.org/t/p/original/fVsy8Z646SZUP6qLJrQCAwi0jhq.jpg");
+    --loginPageBackground: linear-gradient(var(--lighterGradientPointAlpha) 10%, var(--lighterGradientPoint)), var(--loginPageBgUrl);
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 100vh;
+    min-height: 100svh;
+    min-height: calc(100dvh - 4em);
+    background: var(--loginPageBackground);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    animation: slideshow 1s infinite;
+}
+
+@keyframes slideshow {
+    0% {
+        --loginPageBgUrl: url("https: //artworks.thetvdb.com/banners/v4/movie/355641/backgrounds/670008ff9a98b.jpg");
+    }
+
+    33% {
+        --loginPageBgUrl: url("https://artworks.thetvdb.com/banners/v4/movie/355641/backgrounds/664df612c7c31.jpg");
+    }
+
+    66% {
+        --loginPageBgUrl: url("https://artworks.thetvdb.com/banners/v4/movie/355641/backgrounds/67479e1c49c20.jpg");
+    }
+
+    100% {
+        --loginPageBgUrl: url("https://artworks.thetvdb.com/banners/v4/movie/355641/backgrounds/670008dd9f571.jpg");
+    }
+}
+
+#loginPage .padded-left.padded-right.padded-bottom-page {
+    background: var(--headerColor);
+    border-radius: var(--largeRadius);
+    backdrop-filter: blur(5px);
+    margin-top: 13em;
+}
+
+#loginPage::before {
+    content: var(--loginPageText);
+    position: absolute;
+    width: 100%;
+    width: 100svw;
+    max-width: 28em;
+    display: block;
+    margin: auto;
+    top: -1em;
+    line-height: 2em;
+    font-size: 1.5em;
+    font-weight: 800;
+    color: white;
+    text-align: center;
+    background: url(./assets/img/banner-light.png);
+    white-space: pre;
+    background-size: 70%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+#loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm.hide) {
+    width: 24em;
+    padding: 2em 2em 1em 2em !important;
+    margin-inline: 1em !important;
+}
+
+#loginPage .padded-left.padded-right.padded-bottom-page:has(.manualLoginForm.hide) {
+    width: 100%;
+    max-width: 35em;
+    padding: 2em 1em 1em 1em !important;
+    margin-inline: 1em !important;
+}
+
+#loginPage .padded-left.padded-right.padded-bottom-page:has(.manualLoginForm.hide) .readOnlyContent {
+    max-width: 24em;
+    padding: 0em 1em 0em 1em !important;
+}
+
+@media (max-width: 50em) {
+    #divUsers {
+        max-height: 16em;
+        max-height: 35svh;
+        overflow-y: auto;
+    }
+}
+
+#divUsers {
+    padding-block: 2em;
+}
+
+#divUsers .cardBox.cardBox-bottompadded {
+    margin: auto !important;
+}
+
+#divUsers .cardScalable {
+    border-radius: 50% !important;
+    border-width: var(--borderWidth) !important;
+    transition: transform .125s;
+}
+
+#divUsers button:hover .cardScalable {
+    transform: scale(1.06);
+    filter: brightness(1.1);
+}
+
+.manualLoginForm .sectionTitle,
+.visualLoginForm>h1 {
+    display: none;
+}
+
+#loginPage .readOnlyContent {
+    margin: .5em auto 0em !important;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+        "row1-1 row1-2"
+        "row2-1 row2-2"
+        "row3-1 row3-2"
+        "row4-1 row4-2";
+    gap: .5em .75em;
+}
+
+/* .btnForgotPassword {
+    font-size: .8em;
+}
+
+.btnQuick {
+    font-size: .8em;
+} */
+
+.btnManual {
+    grid-area: row1-1 / span 2;
+}
+
+.btnSelectServer {
+    grid-area: row3-1 / span 2;
+}
+
+.loginDisclaimerContainer {
+    grid-area: row4-1 / span 2;
+}
+
+#txtLoginDisclaimer {
+    resize: none;
 }