New: Login screen supports slideshows now

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,8 +33,10 @@
     --smallRadius: .5em;
     --smallerRadius: .375em;
     --borderWidth: 0.075em;
-    --loginPageBgUrl: url("");
-    --loginPageText: "Sign in to continue";
+    /* --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 {
@@ -1382,65 +1385,111 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 }
 
 #loginPage {
-    padding-top: 20em !important;
-}
-
-@media (max-height: 890px) {
-    #loginPage {
-        padding-top: 6.5em !important;
-    }
-}
-
-@media (max-height: 1300px) {
-    #loginPage:has(.padded-left.padded-right.padded-bottom-page .visualLoginForm:not(.hide)) {
-        padding-top: 6.5em !important;
-    }
-}
-
-#loginPage .readOnlyContent {
-    margin: .5em auto 0em !important;
-}
-
-#loginPage .padded-left.padded-right.padded-bottom-page {
-    margin: 2em auto 0;
-    width: 28em;
-    background: rgba(30, 40, 54, 0.7);
-    padding: 2em 2em 1em 2em !important;
-    border-radius: var(--largerRadius);
-    backdrop-filter: blur(5px);
-    box-sizing: border-box;
-}
-
-#loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) {
-    width: 80em;
-}
-
-@media (max-width: 640px) {
-    #loginPage .padded-left.padded-right.padded-bottom-page {
-        width: 100%;
-        margin: 2em;
-    }
-}
-
-@media (max-width: 1300px) {
-    #loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) {
-        width: 100%;
-        margin: 2em;
-    }
-}
-
-#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;
-    padding: 2em 0;
-    overflow-y: auto;
-    background:
-        var(--loginPageBgUrl, linear-gradient(to bottom, var(--darkerGradientPointAlpha), var(--lighterGradientPoint)));
+    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,
@@ -1448,22 +1497,37 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     display: none;
 }
 
-.manualLoginForm::before,
-.visualLoginForm::before {
-    content: var(--loginPageText);
-    position: relative;
-    display: block;
-    top: -3.5em;
-    margin-bottom: -1em;
-    font-size: 1.875em;
-    font-weight: 800;
-    color: white;
-    text-align: center;
+#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;
 }
 
-.manualLoginForm,
-.visualLoginForm {
-    position: relative;
+/* .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 {