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 {
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 */
input[type=checkbox] {
appearance: none; /*Hide the defualt OS provided control*/
@@ -118,8 +118,8 @@ input[type=checkbox]::before {
input[type=radio] {
appearance: none; /* Hide the defualt OS provided control */
margin: 0; /* Not removed by appearance */
width: 1.75rem;
height: 1.75rem;
width: 1.65rem;
height: 1.65rem;
border-radius: 50%; /* Round the edges of the box so they appear as a circle */
border: var(--default-border-style);
transition: 0.2s all linear;
low-contrast.css
+11 -4
View File
@@ -6,9 +6,12 @@
--alt-bg-color: #e6e6e6;
--main-font-color: #134e13;
--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;
/* --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 {
background-color: var(--main-bg-color);
@@ -37,10 +40,10 @@ input[type="checkbox"]:focus {
}
input[type="checkbox"]:disabled {
color: var(--control-disabled);
border: var(--border-disabled-style);
}
input[type=radio] {
input[type="radio"] {
border: var(--border-style);
}
@@ -54,6 +57,10 @@ input[type=radio]:checked {
border: var(--border-focus-style);
}
input[type="radio"]:disabled {
border: var(--border-disabled-style);
}
input[type=button] {
border: var(--border-style);
}