Update login template.

viewer/static/css/old_styles.css

@@ -1,128 +0,0 @@
-/****************************************************************************
- * Specific elements.                                                       *
- ****************************************************************************/
-
-html {
-    height:100%;
-}
-
-body {
-    height: 100%;
-    margin: 0px;
-}
-
-#id_username {
-width: 100%;
-}
-
-#id_password {
-width: 100%;
-}
-
-a:link {
-    color: #ffff00;
-}
-
-a:visited {
-    color: #009CD9;
-}
-
-/****************************************************************************
- * Containers.                                                              *
- ****************************************************************************/
-
-.centered-container {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 0.5em;
-}
-
-.background {
-    background-color: darkslategray;
-    color: lightgray;
-}
-
-.image-container {
-    max-width: 900px;
-    max-height: 600px;
-}
-
-.fc {
-    width: fit-content;
-}
-
-.h90 {
-    height: 90%;
-}
-
-.full-width {
-    width: 100%;
-}
-
-.fixed-width {
-    width: 300px;
-}
-
-/****************************************************************************
- * Content.                                                                 *
- ****************************************************************************/
-
-.image {
-    max-width: 100%;
-    max-height: 600px;
-    width: auto;
-}
-
-.mauto {
-    margin: auto;
-}
-
-.mauto-top {
-    margin: 200px auto;
-}
-
-.navigation-icon {
-    width: 100px;
-}
-
-.small-nav-icon {
-    width: 3em;
-}
-
-.mb-2 {
-    margin-bottom: 2em;
-}
-
-.mr-2 {
-    margin-right: 2em;
-}
-
-.ml-4 {
-    margin-left: 4em;
-}
-
-.ml-2 {
-    margin-left: 2em;
-}
-
-.clear-btn {
-    border: none;
-    background-color: #00000000;
-}
-
-.search-box {
-    height: 2.5em;
-}
-
-.float-right {
-    float: right;
-}
-
-/****************************************************************************
- * Grid.                                                                    *
- ****************************************************************************/
-
-.column {
-    text-align: center;
-    border: black 1px solid;
-}

viewer/static/css/styles.css

@@ -378,7 +378,16 @@ body.theme-dark .small.text-muted {
     background: transparent;
 }
 
-@media (max-width: 991.98px) {
+.login-form {
+    background: var(--panel-strong);
+    border-radius: 0 1rem 1rem 0;
+}
+
+.card {
+    background: var(--bg);
+}
+
+media (max-width: 991.98px) {
     .app-shell {
         padding: 0px;
         gap: 12px;
@@ -405,6 +414,12 @@ body.theme-dark .small.text-muted {
         padding-right: 16px;
     }
 }
+@media (max-width: 767px) {
+    .login-form {
+        background: var(--panel-strong);
+        border-radius: 1rem 1rem 1rem 1rem;
+    }
+}
 
 @media (max-width: 575.98px) {
     /* On narrow viewports keep the fixed 128px thumbnails but allow the