mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-23 21:33:01 +02:00
Code Issues Releases Wiki Activity

Align better with main branch and update changesets

Browse Source
This commit is contained in:
Kognise
2021-08-11 14:39:22 -04:00
parent 50bdf23e69
commit 5f66486244
6 changed files with 25 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/dirty-beans-wonder.md
View File

@@ -1,5 +0,0 @@
---
"water.css": patch
---
changed hover color close to base color

2
.changeset/rude-pots-sort.md
View File

@@ -2,4 +2,4 @@
"water.css": patch "water.css": patch
--- ---
Added Contrast to the Buttons Update button colors for better contrast, especially in tables

5
.changeset/stale-dodos-chew.md
View File

@@ -1,5 +0,0 @@
---
"water.css": patch
---
Better button color inside table.

27
src/parts/_forms.css
View File

@@ -1,6 +1,7 @@
button, button,
select, select,
input[type='submit'], input[type='submit'],
input[type='reset'],
input[type='button'], input[type='button'],
input[type='checkbox'], input[type='checkbox'],
input[type='range'], input[type='range'],
@@ -8,11 +9,16 @@ input[type='radio'] {
cursor: pointer; cursor: pointer;
} }
input:not([type='checkbox']):not([type='radio']), input,
select { select {
display: block; display: block;
} }
[type='checkbox'],
[type='radio'] {
display: initial;
}
input, input,
button, button,
textarea, textarea,
@@ -31,12 +37,20 @@ select {
button, button,
input[type='submit'], input[type='submit'],
input[type='reset'],
input[type='button'] { input[type='button'] {
background-color: var(--background-btn); background-color: var(--button-base);
padding-right: 30px; padding-right: 30px;
padding-left: 30px; padding-left: 30px;
} }
button:hover,
input[type='submit']:hover,
input[type='reset']:hover,
input[type='button']:hover {
background: var(--button-hover);
}
input[type='color'] { input[type='color'] {
min-height: 2rem; min-height: 2rem;
padding: 8px; padding: 8px;
@@ -102,14 +116,6 @@ select[multiple] {
overflow-y: auto; overflow-y: auto;
} }
button:hover,
input[type='submit']:hover,
input[type='button']:hover {
background: var(--button-hover);
/* transform: scale(1.03); */
}
input:focus, input:focus,
select:focus, select:focus,
button:focus, button:focus,
@@ -120,6 +126,7 @@ textarea:focus {
input[type='checkbox']:active, input[type='checkbox']:active,
input[type='radio']:active, input[type='radio']:active,
input[type='submit']:active, input[type='submit']:active,
input[type='reset']:active,
input[type='button']:active, input[type='button']:active,
input[type='range']:active, input[type='range']:active,
button:active { button:active {

6
src/variables-dark.css
View File

@@ -1,7 +1,6 @@
:root { :root {
--background-body: #202b38; --background-body: #202b38;
--background: #161f27; --background: #161f27;
--background-btn: #0c151c;
--background-alt: #1a242f; --background-alt: #1a242f;
--selection: #1c76c5; --selection: #1c76c5;
--text-main: #dbdbdb; --text-main: #dbdbdb;
@@ -12,9 +11,10 @@
--border: #526980; --border: #526980;
--code: #ffbe85; --code: #ffbe85;
--animation-duration: 0.1s; --animation-duration: 0.1s;
--button-hover: #0a121a; --button-base: #0c151c;
--button-hover: #040a0f;
--scrollbar-thumb: var(--button-hover); --scrollbar-thumb: var(--button-hover);
--scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%)); --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%));
--form-placeholder: #a9a9a9; --form-placeholder: #a9a9a9;
--form-text: #fff; --form-text: #fff;
--variable: #d941e2; --variable: #d941e2;

8
src/variables-light.css
View File

@@ -1,7 +1,6 @@
:root { :root {
--background-body: #fff; --background-body: #fff;
--background: #e2e2e2; --background: #e2e2e2;
--background-btn: #d0cfcf;
--background-alt: #f7f7f7; --background-alt: #f7f7f7;
--selection: #9e9e9e; --selection: #9e9e9e;
--text-main: #363636; --text-main: #363636;
@@ -12,9 +11,10 @@
--border: #dbdbdb; --border: #dbdbdb;
--code: #000; --code: #000;
--animation-duration: 0.1s; --animation-duration: 0.1s;
--button-hover: rgb(170, 170, 170); --button-base: #d0cfcf;
--scrollbar-thumb: color-mod(var(--button-hover) lightness(-3%)); --button-hover: #9b9b9b;
--scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%)); --scrollbar-thumb: color-mod(var(--button-hover) lightness(+6%));
--scrollbar-thumb-hover: var(--button-hover);
--form-placeholder: #949494; --form-placeholder: #949494;
--form-text: rgb(29, 29, 29); --form-text: rgb(29, 29, 29);
--variable: #39a33c; --variable: #39a33c;