html-testing/base.css

/*
	Source: https://www.freecodecamp.org/news/css-units-when-to-use-each-one/
	
	rem - standards for "root em" and is equal to the font size of the root element (16px in many browsers).
	em - "is relative to the font size of the parent element or the font-size of the nearest parent with a defined font size."
*/
:root {
	--default-font-size: 16px;
	--default-spacing: 10px;
	--default-border-thickness: 0.15rem;
	--default-border-style: solid var(--default-border-thickness) black;
}
body {
	line-height: 1.5;
}

p, h1, h2, h3, h4, h5, textarea, input, fieldset {
	margin: var(--default-spacing);
}

legend {
	padding: 5px;
	font-size: 18px;
	font-weight: bold;
}

textarea, input {
	padding: var(--default-spacing);
	font-size: var(--default-font-size);
	font: inherit;
	color: currentColor;
	border-radius: 0.20em; /* Slightly round the edges */
}

.flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
}

header {
	grid-area: header;
	border: var(--default-border-style);
}

article {
	grid-area: content;
	border: var(--default-border-style);
}

aside {
	grid-area: sidebar;
	border: var(--default-border-style);
}

.details {
	grid-area: details;
	border: var(--default-border-style);
}

footer {
	grid-area: 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 === */
/* Source: Checkbox - https://moderncss.dev/pure-css-custom-checkbox-style */
/* Source: Radio Button - https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */

input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
	/* Make this :before element visible when it is checked */
 	transform: scale(1);
}

/* 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*/
	margin: 0; /* Not removed by appearance */
	width: 1.15rem;
	height: 1.15rem;
	border: var(--default-border-style);
	/* Set the control to grid so the :before element is centered in the box, assuming the button is checked */
	display: grid;
  	place-content: center;
}

/* Sets the size and animation of the check mark */
input[type=checkbox]::before {
	content: "";
	width: 0.80rem;
	height: 0.80rem;
	transform: scale(0); /* Hide this :before element until it is checked */
	transition: 120ms transform ease-in-out;
	
	transform-origin: bottom left;
	/* A site to draw shapes or grab common ones: https://bennettfeely.com/clippy */
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	/* CSS support for "forced colors", which may be refered to as Windows High Contrast Mode (WHCM) */
	/* 
		When the OS is in high contrast the box-shadow is completely removed preventing the user from seeing that the
	   	control is checked.
	*/
	/* More details at: https://moderncss.dev/pure-css-custom-checkbox-style/#step-4-the-focus-state titled "High Contrast Themes and Forced Colors" */
	background-color: CanvasText;
	/* shadow-box is setup by the theme CSS pages */
}
/* === END CHECKBOX  === */

/* === BEGIN RADIO BUTTON === */
/* Set the size and properties of the circle that represents the radio button */
input[type=radio] {
	appearance: none; /* Hide the default OS provided control */
	margin: 0; /* Not removed by appearance */
	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;
	/* Set the control to grid so the :before element is centered in the circle, assuming the button is checked */
	display: grid;
  	place-content: center;
	/* Override the default paddingto prevent too thick of a border around the inner circle in the radio button */
	padding: 5px;
}

/* Inner circle to indicate a checked radio button */
input[type="radio"]::before {
	content: "";
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	transform: scale(0); /* Hide this :before element until it is checked */
	transition: 120ms transform ease-in-out;
	/* CSS support for "forced colors", which may be refered to as Windows High Contrast Mode (WHCM) */
	/* 
		When the OS is in high contrast the box-shadow is completely removed preventing the user from seeing that the
	   	control is checked.
	*/
	/* More details at: https://moderncss.dev/pure-css-custom-styled-radio-buttons/#step-4-the-checked-state titled "High Contrast Themes and Forced Colors" */
	background-color: CanvasText;
	/* shadow-box is setup by the theme CSS pages */
}
/* === END RADIO BUTTON === */