auth-ui: rewrite ui
Change-Id: I6f00867015ec77aa7e336e89da4dc1b081e330c6
diff --git a/core/auth/ui/static/base.css b/core/auth/ui/static/base.css
new file mode 100644
index 0000000..0df1916
--- /dev/null
+++ b/core/auth/ui/static/base.css
@@ -0,0 +1,129 @@
+:root {
+ --color-surface: #d6d6d6;
+ --color-ink: #3a3a3a;
+ --color-action: #7f9f7f;
+ --color-identity: #d4888d;
+ --space-1: 4px;
+ --space-2: 8px;
+ --space-3: 12px;
+ --space-4: 16px;
+ --space-5: 24px;
+ --space-6: 32px;
+ --font-mono: "Hack", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
+ color: var(--color-ink);
+ background: var(--color-surface);
+ font-family: var(--font-mono);
+ font-size: 14px;
+ line-height: 1.5;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html {
+ min-width: 0;
+ margin: 0;
+ padding: 0;
+ background: var(--color-surface);
+ color: var(--color-ink);
+ scroll-behavior: smooth;
+}
+
+body {
+ min-width: 0;
+ min-height: 100vh;
+ min-height: 100dvh;
+ margin: 0;
+ background: var(--color-surface);
+ color: var(--color-ink);
+}
+
+button,
+input,
+select,
+textarea {
+ max-width: 100%;
+ border-radius: 0;
+ color: inherit;
+ font: inherit;
+}
+
+button,
+input,
+select,
+textarea,
+a {
+ min-height: 44px;
+}
+
+button,
+a {
+ min-width: 44px;
+}
+
+button {
+ cursor: pointer;
+}
+
+input,
+select,
+textarea {
+ width: 100%;
+}
+
+a {
+ color: inherit;
+ overflow-wrap: anywhere;
+ text-decoration-thickness: 0.12em;
+ text-underline-offset: 0.18em;
+}
+
+a:hover {
+ text-decoration-thickness: 0.2em;
+}
+
+:focus-visible {
+ outline: 2px solid var(--color-ink);
+ outline-offset: 2px;
+}
+
+h1,
+h2,
+p,
+li,
+label,
+strong,
+code {
+ overflow-wrap: anywhere;
+}
+
+code {
+ color: inherit;
+ font-family: inherit;
+}
+
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ scroll-behavior: auto !important;
+ transition-duration: 0s !important;
+ animation-duration: 0s !important;
+ animation-iteration-count: 1 !important;
+ }
+}