73 lines
2.0 KiB
CSS
73 lines
2.0 KiB
CSS
:root {
|
|
/*Fallback is a thing with the var() function
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#defining_fallbacks_in_the_var_function
|
|
*/
|
|
--main-bg-color: #adadad;
|
|
--alt-bg-color: #e6e6e6;
|
|
--main-font-color: #134e13;
|
|
--disabled-bg-color: #666666;
|
|
--control-disabled: #000000;
|
|
|
|
--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);
|
|
color: var(--main-font-color);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color:maroon;
|
|
}
|
|
|
|
fieldset > legend {
|
|
color: darkblue;
|
|
}
|
|
|
|
textarea, input {
|
|
background-color: var(--main-bg-color);
|
|
color: var(--main-font-color);
|
|
}
|
|
|
|
input[type="radio"], input[type="checkbox"], input, textarea {
|
|
border: var(--border-style);
|
|
}
|
|
|
|
input[type="radio"]:focus, input[type="checkbox"]:focus, input:focus, textarea:focus {
|
|
border: var(--border-focus-style);
|
|
}
|
|
|
|
input[type="button"]:focus {
|
|
border: var(--border-style);
|
|
}
|
|
|
|
/* Color the check mark in the checkbox */
|
|
input[type=checkbox]::before {
|
|
/* Using shadow-box instead of background-color will enable the state of the radio button to be visible when printed. */
|
|
/* Source: https://moderncss.dev/pure-css-custom-styled-radio-buttons/#step-4-the-checked-state */
|
|
/* Which references this link: https://dev.to/alvaromontoro/comment/1214h */
|
|
box-shadow: inset 1em 1em var(--main-font-color);
|
|
}
|
|
|
|
/* Inner circle to indicate a checked radio button */
|
|
input[type="radio"]::before {
|
|
box-shadow: inset 1rem 1rem var(--main-font-color);
|
|
}
|
|
|
|
/* On button press / hold */
|
|
input[type="button"]:active {
|
|
border: var(--border-style);
|
|
color: var(--main-bg-color);
|
|
background-color: var(--main-font-color);
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--main-font-color);
|
|
}
|
|
|
|
*:disabled, input:disabled {
|
|
background-color: var(--disabled-bg-color);
|
|
border: var(--border-disabled-style);
|
|
} |