| [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: 10px; |
| background-color: var(--pico-form-element-background-color); |
| width: 100%; |
| } |
| |
| input { |
| 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:-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-autofill::first-line { |
| font-family: var(--pico-font-family) !important; |
| } |
| |
| 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; |
| } |