150 lines
4.6 KiB
CSS
150 lines
4.6 KiB
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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 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);
|
|
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;
|
|
}
|
|
|
|
/* 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 defualt OS provided control */
|
|
margin: 0; /* Not removed by appearance */
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
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 === */ |