Login: UI rework
Change-Id: I9646272476c097c7a90b170fc35a38ec58a86020
diff --git a/core/auth/ui/static/main.css b/core/auth/ui/static/main.css
index 05a6db8..454eb2d 100644
--- a/core/auth/ui/static/main.css
+++ b/core/auth/ui/static/main.css
@@ -1,54 +1,85 @@
-.main {
- width: 400px;
- height: 400px;
- margin: 7em auto;
+[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;
+}
+
+.container {
+ max-width: 500px !important;
+ width: 100%;
}
form {
- padding-top: 40px;
+ padding: 10px;
+ background-color: var(--pico-form-element-background-color);
+ width: 100%;
}
input {
- width: 76%;
- font-weight: 700;
- font-size: 14px;
- letter-spacing: 1px;
- background: rgba(136, 126, 126, 0.04);
- padding: 10px 20px;
- border: none;
- outline: none;
- box-sizing: border-box;
- border: 2px solid rgba(0, 0, 0, 0.02);
- margin-bottom: 50px;
- margin-left: 46px;
- text-align: left;
- margin-bottom: 27px;
+ background: var(--pico-form-element-background-color);
+ color: white;
+ padding: 10px;
+ /* border: 1px solid var(--pico-form-element-border-color); */
+ text-align: left;
+ font-family: var(--pico-font-family) !important;
}
-input[type="checkbox"] {
- width: 20%;
+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; */
}
-input[type="submit"] {
- background: rgba(136, 126, 126, 0.5);
- text-align: center;
+&:-webkit-autofill::first-line {
+ font-family: var(--pico-font-family) !important;
}
-input:focus {
- border: 2px solid rgba(0, 0, 0, 0.18) !important;
+p {
+ color: white;
}
-a {
- width: 76%;
- font-weight: 700;
- font-size: 14px;
- letter-spacing: 1px;
- padding: 10px 20px;
- border: none;
- outline: none;
- box-sizing: border-box;
- margin-bottom: 50px;
- margin-left: 46px;
- text-align: left;
- margin-bottom: 27px;
-}
\ No newline at end of file
+.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;
+}