Cleaned up the main page to show the various controls and their states. Refactored the CSS a bit.

This commit is contained in:
2025-01-24 20:21:05 -06:00
parent 211388643b
commit d9d193c06e
3 changed files with 89 additions and 58 deletions
+13 -5
View File
@@ -29,6 +29,7 @@ textarea, input {
font-size: var(--default-font-size);
font: inherit;
color: currentColor;
border-radius: 0.20em; /* Slightly round the edges */
}
.flex {
@@ -63,6 +64,17 @@ footer {
border: var(--default-border-style);
}
*:disabled, input:disabled {
/*
Note: The pointerenter and pointerleave events are fired when a pointing device is moved into an element or
one of its descendants. So, even if pointer-events: none is set on the parent and not set on children,
the events are triggered on the parent after the pointer is moved in or out of a descendant.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
*/
pointer-events: none;
}
/* Override default OS provided checkboxes and radio buttons */
/* === CHECKBOX === */
@@ -74,9 +86,6 @@ input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
transform: scale(1);
}
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] {
@@ -85,7 +94,6 @@ input[type=checkbox] {
width: 1.15rem;
height: 1.15rem;
border: var(--default-border-style);
border-radius: 0.15em; /* Slightly round the edges */
/* Set the control to grid so the :before element is centered in the box, assuming the button is checked */
display: grid;
place-content: center;
@@ -116,7 +124,7 @@ input[type=checkbox]::before {
/* === BEGIN RADIO BUTTON === */
/* Set the size and properties of the circle that represents the radio button */
input[type=radio] {
appearance: none; /* Hide the defualt OS provided control */
appearance: none; /* Hide the default OS provided control */
margin: 0; /* Not removed by appearance */
width: 1.65rem;
height: 1.65rem;