treehouse/static/css/base.css
2025-10-06 14:43:06 +02:00

93 lines
1.9 KiB
CSS

/* Color scheme */
:root {
--accent-red: #fb4c9e;
--accent-yellow: #ffac0c;
--accent-green: #0dd292;
--accent-blue: #0577f0;
--accent-purple: #c952f5;
--accent-pink: #ffa8f3;
--background-color: #faeaff;
--background-color-tooltip: color-mix(
in lab,
var(--background-color),
var(--shading-base) 10%
);
--text-color: #302859;
--link-color: #004ec8;
--link-color-visited: #6c2380;
--error-color: #d94141;
--shading-base: #592782;
--shaded-background: rgb(from var(--shading-base) r g b / 5%);
--border-1: rgb(from var(--shading-base) r g b / 15%);
--border-2: rgb(from var(--shading-base) r g b / 30%);
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: rgb(31, 30, 53);
--text-color: #f7ece5;
--link-color: #93cce8;
--link-color-visited: #f7afde;
--error-color: #e39393;
--shading-base: #e4d2ff;
}
}
/* Animations */
:root {
--transition-duration: 0.15s;
--ease-out-quintic: cubic-bezier(0.17, 0.84, 0.44, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--transition-duration: 0;
}
}
/* Reset things to more sensible sizing rules */
* {
box-sizing: border-box;
}
/* Colors */
body {
background-color: var(--background-color);
color: var(--text-color);
}
:root {
scrollbar-color: var(--border-2) var(--shaded-background);
scrollbar-width: auto;
scrollbar-gutter: stable;
}
:focus-visible {
outline: 0.1rem solid var(--accent-blue);
outline-offset: 0.2rem;
}
::selection {
background-color: color-mix(
in srgb,
var(--background-color),
var(--accent-pink) 75%
);
color: var(--text-color);
}
@media (prefers-color-scheme: dark) {
::selection {
background-color: var(--accent-pink);
color: var(--background-color);
}
}