glm94/html-testing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored the CSS a bit.

Browse Source
This commit is contained in:
glm94
2025-01-24 01:18:01 -06:00
parent 51a57ca809
commit 211388643b
1 changed files with 6 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
low-contrast.css
+6 -14
View File
@@ -8,11 +8,11 @@
--disabled-bg-color: #666666; --disabled-bg-color: #666666;
--control-disabled: #000000; --control-disabled: #000000;
/* --border-style: var(--default-border-thickness) outset pink; */
--border-style: var(--default-border-thickness) solid var(--alt-bg-color); --border-style: var(--default-border-thickness) solid var(--alt-bg-color);
--border-focus-style: var(--default-border-thickness) solid var(--main-font-color); --border-focus-style: var(--default-border-thickness) solid var(--main-font-color);
--border-disabled-style: var(--default-border-thickness) solid var(--control-disabled); --border-disabled-style: var(--default-border-thickness) solid var(--control-disabled);
} }
body { body {
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
color: var(--main-font-color); color: var(--main-font-color);
@@ -23,10 +23,14 @@ textarea, input {
color: var(--main-font-color); color: var(--main-font-color);
} }
input[type=checkbox] { input[type="radio"], input[type="checkbox"] {
border: var(--border-style); border: var(--border-style);
} }
input[type="radio"]:focus, input[type="checkbox"]:focus {
border: var(--border-focus-style);
}
/* Color the check mark in the checkbox */ /* Color the check mark in the checkbox */
input[type=checkbox]::before { input[type=checkbox]::before {
/* Using shadow-box instead of background-color will enable the state of the radio button to be visible when printed. */ /* Using shadow-box instead of background-color will enable the state of the radio button to be visible when printed. */
@@ -35,23 +39,11 @@ input[type=checkbox]::before {
box-shadow: inset 1em 1em var(--main-font-color); box-shadow: inset 1em 1em var(--main-font-color);
} }
input[type="checkbox"]:focus, input[type="radio"]:focus {
border: var(--border-focus-style);
}
input[type="radio"] {
border: var(--border-style);
}
/* Inner circle to indicate a checked radio button */ /* Inner circle to indicate a checked radio button */
input[type="radio"]::before { input[type="radio"]::before {
box-shadow: inset 1rem 1rem var(--main-font-color); box-shadow: inset 1rem 1rem var(--main-font-color);
} }
input[type="button"] {
border: var(--border-style);
}
/*On button press / hold*/ /*On button press / hold*/
input[type="button"]:active { input[type="button"]:active {
border: 3px solid var(--alt-bg-color); border: 3px solid var(--alt-bg-color);