1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 03:24:20 +00:00
bluelib/dist/classic.root.css
2023-05-25 01:27:16 +02:00

128 lines
6.2 KiB
CSS

/*
* Bluelib Classic
* by <me@steffo.eu>
*/
:where(body) {
--b-border-radius: 8px;
--b-outer-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
}
:where(body),
:where(body) :where(*) {
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15);
}
:where(body) :where(h1, h2, h3, h4, h5, h6) {
text-shadow: var(--b-outer-shadow);
}
:where(body) :where(.panel) :where(h1, h2, h3, h4, h5, h6) {
text-shadow: none;
}
:where(body) :where(.panel),
:where(body) :where(table):where(.panel) > :where(caption) {
border-radius: var(--b-border-radius);
box-shadow: var(--b-outer-shadow);
}
:where(body) :where(.panel) :where(.panel),
:where(body) :where(table):where(.panel) > :where(caption) :where(.panel) {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
backdrop-filter: none;
box-shadow: none;
}
:where(body) :where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
}
:where(body) :where(mark, .mark) :where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(mark, .mark),
:where(body) :where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
}
:where(body) :where(mark, .mark) :where(mark, .mark) :where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(mark, .mark) :where(mark, .mark),
:where(body) :where(mark, .mark) :where(.panel):where(mark, .mark) :where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) :where(mark, .mark),
:where(body) :where(mark, .mark) :where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) :where(mark, .mark) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
}
:where(body) :where(.todo),
:where(body) :where(.panel):where(.todo) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
}
:where(body) :where(.todo) :where(.panel),
:where(body) :where(.panel):where(.todo) :where(.panel) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
}
:where(body) :where(table):where(.panel) {
border-radius: 0;
}
:where(body) :where(table):where(.panel) > :where(caption) {
border-radius: 0;
box-shadow: var(--b-outer-shadow);
}
:where(body) :where(table):where(.dialog) > :where(caption) {
border-bottom-width: 2px;
}
:where(body) :where(input, textarea, select, button) {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.025);
}
:where(body) :where(input, textarea, select, button):hover {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.05);
}
:where(body) :where(input, textarea, select, button):active {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
}
:where(body) :where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"]),
:where(body) :where(select:not([multiple])) {
border-radius: var(--b-border-radius) var(--b-border-radius) 0 0;
}
:where(body) :where(textarea),
:where(body) :where(select[multiple]) {
border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
}
:where(body) :where(input[type="button"], .input[type="submit"], .input[type="reset"], button) {
border-radius: var(--b-border-radius);
}
:where(body) :where(ul) > *::marker,
:where(body) :where(ol) > *::marker {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5);
}
:where(body) :where(summary) {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
}
:where(body) :where(summary)::marker {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5);
}
:where(body) :where(summary):hover {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
}
:where(body) :where(summary):hover::marker {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
}
:where(body) :where(summary):active::marker {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
}
:where(body) :where(a):hover {
color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 20%) / 1);
}
:where(body) :where(a):active {
color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 40%) / 1);
}
:where(body) :where(kbd),
:where(body) :where(samp) {
border-radius: calc(var(--b-border-radius) / 4);
}
:where(body) :where(var) {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
}
:where(body) :where(q)::before,
:where(body) :where(q)::after {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
}
:where(body) :where(rt) {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
}