61 lines
1.2 KiB
CSS
61 lines
1.2 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: 0.25rem outset pink;
|
|
}
|
|
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] {
|
|
appearance: none;
|
|
|
|
border: 2px solid black;
|
|
}
|
|
|
|
input[type=checkbox]:checked {
|
|
content: 'X';
|
|
}
|
|
|
|
/*Override the default radio button*/
|
|
input[type=radio] {
|
|
appearance: none;
|
|
|
|
border-radius: 50%;
|
|
border: 2px solid var(--main-bg-color);
|
|
transition: 0.2s all linear;
|
|
}
|
|
|
|
input[type=radio]:checked {
|
|
background-color: black;
|
|
border: 2px solid var(--main-bg-color);
|
|
}
|
|
/*End Override the default radio button*/
|
|
|
|
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);
|
|
} |