id/styles/colours.css

157 lines
2.7 KiB
CSS

:root {
--black: #000000;
--white: #ffffff;
/* ByeCorps colour scheme. Use sparsely on this site. */
--byecorps-blue: #1b5652;
--byecorps-white: #e6feff;
/* ByeCorps ID colour scheme. Use on this site. */
--black-bean: #330f0a;
--dark-slate-gray: #394f49;
--fern-green: #65743a;
--flax: #efdd8d;
--mindaro: #f4fdaf;
/* open colors: used for debugging */
--red-5: #ff6b6b;
--red-5-transparent: #ff6b6b3a;
--red-8: #e03131;
--green-5: #51cf66;
--green-8: #2f9e44;
--grey-0: #f8f9fa;
--grey-2: #e9ecef;
--grey-8: #343a40;
--grey-9: #212529;
--background: white;
--background-dark: #121212;
--foreground: black;
--foreground-dark: white;
--chip-background: var(--grey-0);
color-scheme: light dark;
}
html {
background: var(--background, white);
}
button, .button {
background-color: #1f302b40;
color: var(--white);
}
button.primary, .button.primary {
color: var(--black-bean);
background-color: var(--flax);
}
button.danger, .button.danger {
color: var(--white);
background-color: var(--red-5);
}
header {
background-color: var(--flax);
color: var(--dark-slate-gray);
}
header a {
color: var(--dark-slate-gray);
}
input, textarea {
all: unset;
padding: 1em;
text-align: start;
border-radius: 1em;
background-color: #c0c0c077;
}
input[data-com-onepassword-filled="light"] {
background-color: var(--byecorps-white) !important;
}
input[data-com-onepassword-filled="dark"] {
background-color: var(--byecorps-blue) !important;
}
.icon-true {
color: var(--green-8);
}
.icon-false {
color: var(--red-8);
}
.dangerzone {
background-color: var(--red-5-transparent);
color: var(--white);
padding: 0.5rem 1em;
border-radius: 1em;
}
.dangerzone h2 {
margin: 0;
}
.dangerzone p {
margin: 0;
}
.flash {
background: var(--red-5);
color: black;
}
@media screen and (prefers-color-scheme: dark) {
:root {
--background: #121212;
--foreground: white;
--chip-background: var(--grey-9);
color-scheme: light dark;
}
html {
background: var(--background, #121212);
}
button.primary, .button.primary {
color: var(--flax);
background-color: var(--dark-slate-gray);
}
header {
background-color: var(--dark-slate-gray);
color: var(--flax);
}
header a {
color: var(--flax);
}
input, textarea {
background-color: #2c2c2c77;
}
.icon-true {
color: var(--green-5);
}
.icon-false {
color: var(--red-5);
}
a, a:visited, a:link {
color: var(--flax);
}
}