diff --git a/.changeset/rude-pots-sort.md b/.changeset/rude-pots-sort.md new file mode 100644 index 0000000..568261e --- /dev/null +++ b/.changeset/rude-pots-sort.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Added Contrast to the Buttons diff --git a/src/parts/_forms.css b/src/parts/_forms.css index a8a5793..ad5742a 100644 --- a/src/parts/_forms.css +++ b/src/parts/_forms.css @@ -29,6 +29,14 @@ select { outline: none; } +button, +input[type='submit'], +input[type='button'] { + background-color: var(--background-btn); + padding-right: 30px; + padding-left: 30px; +} + input[type='color'] { min-height: 2rem; padding: 8px; @@ -94,17 +102,12 @@ select[multiple] { overflow-y: auto; } -button, -input[type='submit'], -input[type='button'] { - padding-right: 30px; - padding-left: 30px; -} - button:hover, input[type='submit']:hover, input[type='button']:hover { background: var(--button-hover); + + /* transform: scale(1.03); */ } input:focus, diff --git a/src/variables-dark.css b/src/variables-dark.css index 3f1f966..a3e2925 100755 --- a/src/variables-dark.css +++ b/src/variables-dark.css @@ -1,6 +1,7 @@ :root { --background-body: #202b38; --background: #161f27; + --background-btn: #0c151c; --background-alt: #1a242f; --selection: #1c76c5; --text-main: #dbdbdb; diff --git a/src/variables-light.css b/src/variables-light.css index 74069c3..84cc0b3 100755 --- a/src/variables-light.css +++ b/src/variables-light.css @@ -1,6 +1,7 @@ :root { --background-body: #fff; - --background: #efefef; + --background: #e2e2e2; + --background-btn: #d0cfcf; --background-alt: #f7f7f7; --selection: #9e9e9e; --text-main: #363636; @@ -11,11 +12,11 @@ --border: #dbdbdb; --code: #000; --animation-duration: 0.1s; - --button-hover: #ddd; + --button-hover: rgb(170, 170, 170); --scrollbar-thumb: color-mod(var(--button-hover) lightness(-3%)); --scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%)); --form-placeholder: #949494; - --form-text: #000; + --form-text: rgb(29, 29, 29); --variable: #39a33c; --highlight: #ff0; --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);