diff options
Diffstat (limited to 'src/styles/input.css')
| -rw-r--r-- | src/styles/input.css | 162 |
1 files changed, 81 insertions, 81 deletions
diff --git a/src/styles/input.css b/src/styles/input.css index a66eb009..41b8af06 100644 --- a/src/styles/input.css +++ b/src/styles/input.css @@ -1,53 +1,53 @@ input, select, textarea { - cursor: pointer; - position: relative; - background-color: var(--base01); - /* margin: 0; */ - /* width: 1.15em; + cursor: pointer; + position: relative; + background-color: var(--base01); + /* margin: 0; */ + /* width: 1.15em; height: 1.15em; */ - padding: 0.25em; - border: none; - border-radius: 4px; - place-content: center; - transition: - background-color 0.15s ease-in-out, - transform 0.15s ease-in-out; - /* box-shadow: 0 4px 30px var(--base01); */ - box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px; + padding: 0.25em; + border: none; + border-radius: 4px; + place-content: center; + transition: + background-color 0.15s ease-in-out, + transform 0.15s ease-in-out; + /* box-shadow: 0 4px 30px var(--base01); */ + box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px; } input, select, textarea, button { - vertical-align: middle; - transform: translateY(-0.125em); - margin-top: 0.25em; + vertical-align: middle; + transform: translateY(-0.125em); + margin-top: 0.25em; } @media (prefers-color-scheme: dark) { - input, - select, - textarea { - background-color: var(--base07); - /* color: var(--base05); */ - } + input, + select, + textarea { + background-color: var(--base07); + /* color: var(--base05); */ + } - input[type="number"]::-webkit-inner-spin-button, - input[type="number"]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } + input[type="number"]::-webkit-inner-spin-button, + input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } - input[type="number"] { - appearance: textfield; - } + input[type="number"] { + appearance: textfield; + } - input[type="file"] { - color: var(--base02); - } + input[type="file"] { + color: var(--base02); + } } input[type="text"], @@ -56,122 +56,122 @@ input[type="date"], input[type="time"], input[type="file"], button { - padding: 0.25em 0.5em; + padding: 0.25em 0.5em; } input, button, select { - height: 2em; + height: 2em; } select { - padding: 0.25em 0.5em; + padding: 0.25em 0.5em; } input[type="checkbox"] { - -webkit-appearance: none; - appearance: none; - margin: 0; - width: 1.15em; - height: 1.15em; - transition: - background-color 0.15s ease-in-out, - transform 0.15s ease-in-out; + -webkit-appearance: none; + appearance: none; + margin: 0; + width: 1.15em; + height: 1.15em; + transition: + background-color 0.15s ease-in-out, + transform 0.15s ease-in-out; } input[type="checkbox"]:checked { - background-color: var(--base0C); + background-color: var(--base0C); } input[type="checkbox"]:checked:before { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } input[type="checkbox"]:active { - transform: scale(1); - transition: transform 0.15s ease-in-out; + transform: scale(1); + transition: transform 0.15s ease-in-out; } input[type="checkbox"]:hover { - background-color: var(--base0A); + background-color: var(--base0A); } button { - cursor: pointer; - position: relative; - background-color: var(--base0C); - color: var(--base00); - border: none; - border-radius: 4px; - transition: - background-color 0.15s ease-in-out, - transform 0.15s ease-in-out; - /* box-shadow: 0 4px 30px var(--base01); */ - box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px; + cursor: pointer; + position: relative; + background-color: var(--base0C); + color: var(--base00); + border: none; + border-radius: 4px; + transition: + background-color 0.15s ease-in-out, + transform 0.15s ease-in-out; + /* box-shadow: 0 4px 30px var(--base01); */ + box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px; } button:hover { - background-color: var(--base0A); + background-color: var(--base0A); } button:active { - transform: scale(0.975); + transform: scale(0.975); } input:disabled, select:disabled, button:disabled { - cursor: not-allowed; - opacity: 0.5; + cursor: not-allowed; + opacity: 0.5; } input:disabled:hover, select:disabled:hover, button:disabled:hover { - background-color: var(--base0C); + background-color: var(--base0C); } input:disabled:active, select:disabled:active, button:disabled:active { - transform: scale(1); + transform: scale(1); } .small-button { - transform: scale(0.875); + transform: scale(0.875); } .small-button:active { - transform: scale(0.75); + transform: scale(0.75); } .unclickable-button { - transform: scale(1); + transform: scale(1); } .unclickable-button:active { - transform: scale(1) !important; + transform: scale(1) !important; } .smaller-button { - background-color: var(--base0C); - transform: scale(0.75); + background-color: var(--base0C); + transform: scale(0.75); } .button-square { - background-color: var(--base0C); - transform: scale(0.75); - padding: 0.125em 0.575em; + background-color: var(--base0C); + transform: scale(0.75); + padding: 0.125em 0.575em; } .button-action { - background-color: var(--base0E); + background-color: var(--base0E); } .no-shadow { - box-shadow: none; + box-shadow: none; } |