login improvements

web/css/pages/app-login.css

@@ -415,6 +415,7 @@
     height: 100%;
     z-index: -1;
     pointer-events: none;
+    opacity: 0.85;
   }
 
   html[data-theme="light"] #gradient {
@@ -451,6 +452,7 @@
         transparent 40%
       );
     background-blend-mode: normal, normal, normal, normal, normal, normal;
+    opacity: 0.62;
   }
 
   html[data-theme="dark"] #gradient {
@@ -536,7 +538,7 @@
         var(--c-9) var(--s-start-9),
         transparent var(--s-end-9)
       );
-    animation: ani-gradient 10s linear infinite alternate;
+    animation: ani-gradient 24s linear infinite alternate;
     background-blend-mode:
       normal, normal, normal, normal, normal, normal, normal, normal, normal,
       normal;
@@ -544,6 +546,38 @@
     contain: paint;
   }
 
+  .login-card header {
+    background: transparent;
+  }
+
+  main.login-main {
+    min-height: 100dvh;
+    display: grid;
+    align-content: center;
+    gap: 0.75rem;
+    padding-block: 1rem 2rem;
+  }
+
+  .login-flash-container:empty {
+    display: none;
+  }
+
+  .login-content-container.container-small,
+  .login-flash-container.container-small {
+    width: min(370px, calc(100vw - 2rem));
+    max-width: none;
+  }
+
+  .login-content-container {
+    position: relative;
+    z-index: 1;
+  }
+
+  .login-card {
+    border: 1px solid color-mix(in srgb, var(--app-border) 75%, transparent);
+    box-shadow: none;
+  }
+
   .back_to_login {
     margin-bottom: 1rem;
   }
@@ -616,8 +650,8 @@
   }
 
   .login-tenant-choice-avatar {
-    width: 8rem;
-    height: 3rem;
+    width: 5rem;
+    height: 2rem;
     display: block;
     object-fit: contain;
     object-position: left center;
@@ -637,13 +671,6 @@
     color: var(--app-contrast);
   }
 
-  .login-tenant-choice-text {
-    color: var(--app-color);
-    font-weight: 600;
-    overflow-wrap: anywhere;
-    text-align: right;
-  }
-
   .login-alt-separator {
     position: relative;
     margin: 1rem 0;
@@ -667,7 +694,7 @@
     padding: 0 0.75rem;
     font-size: 0.875rem;
     color: var(--app-muted);
-    background: var(--app-surface);
+    background: var(--app-card-background-color);
   }
 
   .login-microsoft-link {
@@ -676,14 +703,148 @@
     text-align: center;
   }
 
+  .login-methods-stack {
+    display: grid;
+    gap: 0.625rem;
+  }
+
+  .login-password-form {
+    margin-top: 0.25rem;
+  }
+
+  .login-password-form > p:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .login-tenant-context {
+    border: 1px solid color-mix(in srgb, var(--app-border) 80%, transparent);
+    border-radius: var(--app-border-radius);
+    background: color-mix(
+      in srgb,
+      var(--app-primary) 6%,
+      var(--app-card-background-color)
+    );
+    padding: 0.75rem;
+    margin-bottom: 1rem;
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .login-tenant-context-main {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .login-tenant-context-avatar,
+  .login-tenant-context-avatar-placeholder {
+    width: 3.5rem;
+    height: 2.25rem;
+    border-radius: calc(var(--app-border-radius) * 0.7);
+    object-fit: contain;
+    object-position: left center;
+    background: color-mix(
+      in srgb,
+      var(--app-card-background-color) 80%,
+      var(--app-primary) 20%
+    );
+  }
+
+  .login-tenant-context-avatar-placeholder {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--app-primary);
+  }
+
+  .login-tenant-context-text {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .login-tenant-context-title {
+    margin: 0;
+    font-size: 0.78rem;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: var(--app-muted);
+  }
+
+  .login-tenant-context-name {
+    margin: 0;
+    font-size: 11px;
+  }
+
+  .login-tenant-context-form {
+    margin: 0;
+  }
+
+  .login-tenant-context-form button {
+    width: 100%;
+  }
+
+  .login-help-links {
+    margin: 1.75rem 0 0.25rem;
+    padding-top: 0.35rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    column-gap: 0.95rem;
+    row-gap: 0.45rem;
+    font-size: 0.72rem;
+    line-height: 1.25;
+  }
+
+  .login-security-note {
+    font-size: 0.74rem;
+    text-align: center;
+    margin-bottom: 1px;
+  }
+
+  .login-security-note i {
+    color: var(--app-primary);
+    font-size: 0.85rem;
+  }
+
+  .login-security-note-detail {
+    width: 100%;
+    text-align: center;
+    display: block;
+    font-size: 9px;
+  }
+
+  form[aria-busy="true"] button[type="submit"],
+  button[data-submit-state="loading"] {
+    opacity: 0.75;
+    cursor: wait;
+  }
+
   .login-secondary-action {
     margin-top: 1rem;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    html[data-theme="dark"] #gradient {
+      animation: none;
+    }
+  }
+
   @media (min-width: 600px) {
-    main {
+    main.login-main {
       min-height: 90vh;
       place-content: center;
     }
+
+    .login-tenant-context {
+      grid-template-columns: 1fr auto;
+      align-items: center;
+    }
+
+    .login-tenant-context-form button {
+      width: auto;
+    }
   }
 }