/* * Bluelib Classic * by */ :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"], 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); }