diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index dd7f1ee77..8456d5a18 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -32,8 +32,16 @@ --muted-text-color: #bbb; - --input-text-color: #ccc; - --input-background-color: #333; + --input-background-color: #ffffff12; + --input-text-color: #ffffff52; + --input-placeholder-color: #b7b7b782; + --input-selection-background: gray; + --input-selection-text-color: white; + --input-hover-background: #ffffff1f; + --input-hover-color: var(--input-text-color); + --input-focus-outline-color: #80808095; + --input-focus-background: #ffffff1f; + --input-focus-color: white; --hover-item-text-color: #efefef; --hover-item-background-color: #ffffff24; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 0bed73460..c034322a4 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -32,8 +32,16 @@ --muted-text-color: #666; + --input-background-color: #00000012; --input-text-color: black; - --input-background-color: transparent; + --input-placeholder-color: #06060682; + --input-selection-background: gray; + --input-selection-text-color: white; + --input-hover-background: #00000020; + --input-hover-color: black; + --input-focus-outline-color: #00000063; + --input-focus-background: #ffffff80; + --input-focus-color: #000; --hover-item-text-color: black; --hover-item-background-color: #0000001a; diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index e69de29bb..5f966bcce 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -0,0 +1,49 @@ +/* + * Input boxes + */ + +input:disabled { + opacity: .33; +} + +/* Text boxes */ + +input:not([type]), +input[type="text"], +input[type="number"], +input[type="password"] { + outline: 3px solid transparent; + border: unset; + outline-offset: 6px; +} + +input:not([type]):hover, +input[type="text"]:hover, +input[type="number"]:hover, +input[type="password"]:hover { + --input-background-color: var(--input-hover-background); + --input-text-color: var(--input-hover-color); +} + +input:not([type]):focus, +input[type="text"]:focus, +input[type="number"]:focus, +input[type="password"]:focus { + --input-background-color: var(--input-focus-background); + --input-text-color: var(--input-focus-color); + + outline: 3px solid var(--input-focus-outline-color); + outline-offset: 0; + box-shadow: unset; + transition: outline-color 50ms linear, + outline-offset 200ms ease-out; +} + +input::placeholder { + --muted-text-color: var(--input-placeholder-color); +} + +input::selection { + background: var(--input-selection-background); + color: var(--input-selection-text-color); +} \ No newline at end of file