72 lines
1.8 KiB
CSS
72 lines
1.8 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;
|
|
--border-style: var(--default-border-thickness) outset pink;
|
|
--border-focus-style: var(--default-border-thickness) solid var(--main-font-color);
|
|
--control-disabled: #000000;
|
|
}
|
|
body {
|
|
background-color: var(--main-bg-color);
|
|
color: var(--main-font-color);
|
|
}
|
|
|
|
textarea, input {
|
|
background-color: #a6a6a6;
|
|
color: var(--main-font-color);
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
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);
|
|
}
|
|
|
|
input[type="checkbox"]:focus {
|
|
border: var(--border-focus-style);
|
|
}
|
|
|
|
input[type="checkbox"]:disabled {
|
|
color: var(--control-disabled);
|
|
}
|
|
|
|
input[type=radio] {
|
|
border: var(--border-style);
|
|
}
|
|
|
|
/* Inner circle to indicate a checked radio button */
|
|
input[type="radio"]::before {
|
|
box-shadow: inset 1rem 1rem var(--main-font-color);
|
|
}
|
|
|
|
input[type=radio]:checked {
|
|
background-color: var(--main-bg-color);
|
|
border: var(--border-focus-style);
|
|
}
|
|
|
|
input[type=button] {
|
|
border: var(--border-style);
|
|
}
|
|
|
|
/*On button press / hold*/
|
|
input[type=button]:active {
|
|
border: 3px solid var(--alt-bg-color);
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--main-font-color);
|
|
}
|
|
|
|
*:disabled {
|
|
background-color: var(--disabled-bg-color);
|
|
} |