mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 19:44:21 +00:00
Stefano Pigozzi
d603f0ab1f
* Work on improving examples * Fix toggles * Create the `unpkgTargets` and `yarnTargets` variables * Allow interaction again * Add media screen to color rules * Configure default colors and fonts * Configure panel min-width in the example page * Remove the need for a examples index.css * Place selectorsets in the same chapter as rulesets * Rework images and build script * Tweak todo rendering * Do not bother styling range * Create layouts and fix bold code * Update text and readme
51 lines
2.9 KiB
CSS
51 lines
2.9 KiB
CSS
/*
|
|
* Bluelib Glass
|
|
* by <me@steffo.eu>
|
|
*/
|
|
:where(body) {
|
|
--b-panel-blur: 16px;
|
|
--b-panel-initial-opacity: 0.3;
|
|
--b-panel-nested-opacity: 0.075;
|
|
}
|
|
@supports (backdrop-filter: blur(var(--b-panel-blur))) {
|
|
:where(body) :where(.panel),
|
|
:where(body) :where(table):where(.panel) > :where(caption) {
|
|
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));
|
|
backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
|
|
}
|
|
: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) / var(--b-panel-nested-opacity));
|
|
backdrop-filter: 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));
|
|
backdrop-filter: none;
|
|
}
|
|
: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));
|
|
}
|
|
: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));
|
|
backdrop-filter: none;
|
|
}
|
|
}
|