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

Tweaked radio button size and colors.

Browse Source
This commit is contained in:
glm94
2025-01-24 01:03:04 -06:00
parent 231949c4dd
commit 445002ae89
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
base.css
+3 -3
View File
@@ -77,7 +77,7 @@ input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
input[type="checkbox"]:disabled, input[type="radio"]:disabled { input[type="checkbox"]:disabled, input[type="radio"]:disabled {
cursor: not-allowed; cursor: not-allowed;
} }
/* TODO: These controls should probably have their sizes relative to their parent, so "em" instead of "rem" */
/* Set the size and properties of the box that represents the checkbox */ /* Set the size and properties of the box that represents the checkbox */
input[type=checkbox] { input[type=checkbox] {
appearance: none; /*Hide the defualt OS provided control*/ appearance: none; /*Hide the defualt OS provided control*/
@@ -118,8 +118,8 @@ input[type=checkbox]::before {
input[type=radio] { input[type=radio] {
appearance: none; /* Hide the defualt OS provided control */ appearance: none; /* Hide the defualt OS provided control */
margin: 0; /* Not removed by appearance */ margin: 0; /* Not removed by appearance */
width: 1.75rem; width: 1.65rem;
height: 1.75rem; height: 1.65rem;
border-radius: 50%; /* Round the edges of the box so they appear as a circle */ border-radius: 50%; /* Round the edges of the box so they appear as a circle */
border: var(--default-border-style); border: var(--default-border-style);
transition: 0.2s all linear; transition: 0.2s all linear;
low-contrast.css
+11 -4
View File
@@ -6,9 +6,12 @@
--alt-bg-color: #e6e6e6; --alt-bg-color: #e6e6e6;
--main-font-color: #134e13; --main-font-color: #134e13;
--disabled-bg-color: #666666; --disabled-bg-color: #666666;
--border-style: var(--default-border-thickness) outset pink;
--border-focus-style: var(--default-border-thickness) solid var(--main-font-color);
--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-focus-style: var(--default-border-thickness) solid var(--main-font-color);
--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);
@@ -37,10 +40,10 @@ input[type="checkbox"]:focus {
} }
input[type="checkbox"]:disabled { input[type="checkbox"]:disabled {
color: var(--control-disabled); border: var(--border-disabled-style);
} }
input[type=radio] { input[type="radio"] {
border: var(--border-style); border: var(--border-style);
} }
@@ -54,6 +57,10 @@ input[type=radio]:checked {
border: var(--border-focus-style); border: var(--border-focus-style);
} }
input[type="radio"]:disabled {
border: var(--border-disabled-style);
}
input[type=button] { input[type=button] {
border: var(--border-style); border: var(--border-style);
} }