auth-ui: rewrite ui
Change-Id: I6f00867015ec77aa7e336e89da4dc1b081e330c6
diff --git a/core/auth/ui/static/main.css b/core/auth/ui/static/main.css
index a261094..fa297ec 100644
--- a/core/auth/ui/static/main.css
+++ b/core/auth/ui/static/main.css
@@ -1,89 +1,207 @@
-[data-theme="light"],
-:root:not([data-theme="dark"]) {
- --pico-font-family: Hack, monospace;
- --pico-font-size: 14px;
- --pico-background-color: #d6d6d6;
- --pico-border-radius: 0;
- --pico-form-element-border-color: #ffffff;
- --pico-form-element-active-border-color: #7f9f7f;
- --pico-form-element-focus-color: #7f9f7f;
- --pico-form-element-background-color: #3a3a3a;
- --pico-form-element-active-background-color: #3a3a3a;
- --pico-form-element-selected-background-color: #3a3a3a;
- --pico-primary: #7f9f7f;
- --pico-primary-background: #7f9f7f;
- --pico-primary-hover: #d4888d;
- --pico-primary-hover-background: #d4888d;
- --pico-grid-spacing-horizontal: 0;
-}
-
body {
- width: 100%;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
+ font-size: 14px;
}
.container {
- max-width: 500px !important;
+ display: flex;
width: 100%;
+ min-width: 0;
+ min-height: 100vh;
+ min-height: 100dvh;
+ padding: var(--space-4);
+ align-items: center;
+ justify-content: center;
+}
+
+.terminal {
+ width: min(100%, 500px);
+ min-width: 0;
+ padding: var(--space-5);
+ border-left: 4px solid var(--color-action);
+ background: var(--color-ink);
+ color: var(--color-surface);
+}
+
+.terminal > :first-child {
+ margin-top: 0;
+}
+
+.terminal > :last-child {
+ margin-bottom: 0;
+}
+
+.logo {
+ display: flex;
+ min-width: 0;
+ margin: 0 0 var(--space-3);
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1;
+}
+
+.logo span:last-child {
+ color: var(--color-identity);
+}
+
+h1 {
+ margin: 0 0 var(--space-4);
+ padding-bottom: var(--space-2);
+ border-bottom: 1px solid var(--color-action);
+ font-size: 22px;
+ line-height: 1.2;
+}
+
+p,
+ul {
+ margin-top: 0;
+ margin-bottom: var(--space-3);
}
form {
- padding: 10px;
- background-color: var(--pico-form-element-background-color);
- width: 100%;
+ display: grid;
+ min-width: 0;
+ gap: var(--space-2);
+ margin: 0;
}
-input {
- background: var(--pico-form-element-background-color);
- color: white;
- padding: 10px;
- /* border: 1px solid var(--pico-form-element-border-color); */
+label {
+ display: block;
+ min-width: 0;
+ margin-top: var(--space-1);
+ font-weight: 700;
+}
+
+input:not([type="hidden"]) {
+ min-width: 0;
+ padding: var(--space-2) var(--space-3);
+ border: 2px solid var(--color-surface);
+ background: var(--color-surface);
+ color: var(--color-ink);
+ caret-color: var(--color-ink);
text-align: left;
- font-family: var(--pico-font-family) !important;
+}
+
+input[aria-invalid="true"] {
+ border-left: 8px solid var(--color-identity);
+}
+
+button {
+ display: inline-flex;
+ width: fit-content;
+ max-width: 100%;
+ margin-top: var(--space-2);
+ padding: var(--space-2) var(--space-4);
+ align-items: center;
+ justify-content: center;
+ border: 2px solid var(--color-surface);
+ background: var(--color-surface);
+ color: var(--color-ink);
+ font-weight: 700;
+ overflow-wrap: anywhere;
+ text-align: center;
+}
+
+button:hover {
+ border-color: var(--color-action);
+ text-decoration: underline;
+ text-decoration-thickness: 0.15em;
+ text-underline-offset: 0.18em;
+}
+
+.terminal :focus-visible {
+ outline-color: var(--color-surface);
+}
+
+input:focus-visible,
+button:focus-visible {
+ outline-offset: 3px;
+}
+
+[role="alert"],
+[role="status"] {
+ min-width: 0;
+ margin: 0 0 var(--space-2);
+ padding: var(--space-2) 0 var(--space-2) var(--space-3);
+ border-left: 4px solid var(--color-identity);
+}
+
+[role="status"] {
+ border-left-color: var(--color-action);
+}
+
+[role="alert"] > :last-child,
+[role="status"]:last-child {
+ margin-bottom: 0;
+}
+
+form > p[id$="-policy"],
+form > p[id$="-symbols"],
+.error-message {
+ margin: 0;
+ font-size: 0.9rem;
+}
+
+.error-message {
+ padding-left: var(--space-2);
+ border-left: 4px solid var(--color-identity);
+ font-weight: 700;
+}
+
+nav {
+ min-width: 0;
+ margin-top: var(--space-3);
+}
+
+nav ul {
+ display: flex;
+ min-width: 0;
+ margin: 0;
+ padding: 0;
+ flex-wrap: wrap;
+ gap: var(--space-2) var(--space-4);
+ list-style: none;
+}
+
+nav li {
+ min-width: 0;
+}
+
+nav a,
+.terminal > a {
+ display: inline-flex;
+ max-width: 100%;
+ padding: var(--space-2) 0;
+ align-items: center;
+ font-weight: 700;
+}
+
+strong {
+ min-width: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
- -webkit-text-fill-color: white !important;
- transition: background-color 5000s ease-in-out 0s;
- background-color: var(--pico-form-element-background-color) !important;
- /* font-size: var(--pico-font-size) !important;
- font-family: var(--pico-font-family) !important; */
+ -webkit-text-fill-color: var(--color-ink);
+ caret-color: var(--color-ink);
+ font: inherit;
}
-&:-webkit-autofill::first-line {
- font-family: var(--pico-font-family) !important;
+@media (max-width: 360px) {
+ .container {
+ padding: var(--space-2);
+ }
+
+ .terminal {
+ padding: var(--space-3);
+ }
}
-p {
- color: white;
-}
-
-.logo span:first-child {
- color: white;
- font-size: 24px;
- padding-left: 10px;
-}
-
-.logo span:nth-child(2) {
- color: var(--pico-primary-hover);
- font-size: 24px;
-}
-
-.logo {
- padding-top: var(--pico-spacing);
- background-color: var(--pico-form-element-background-color);
-}
-
-label {
- color: white;
-}
-
-.error-message {
- color: var(--pico-primary-hover);
+@media (max-height: 480px) {
+ .container {
+ padding-top: var(--space-2);
+ padding-bottom: var(--space-2);
+ align-items: flex-start;
+ }
}