/* * 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) * { border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15); } :where(body) h1, :where(body) h2, :where(body) h3, :where(body) h4, :where(body) h5, :where(body) h6 { text-shadow: var(--b-outer-shadow); } :where(body) .panel h1, :where(body) .panel h2, :where(body) .panel h3, :where(body) .panel h4, :where(body) .panel h5, :where(body) .panel h6 { text-shadow: none; } :where(body) .panel, :where(body) table.panel > caption { border-radius: var(--b-border-radius); box-shadow: var(--b-outer-shadow); } :where(body) .panel .panel, :where(body) table.panel > caption .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) .mark, :where(body) mark, :where(body) .panel.mark { background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); } :where(body) .mark .mark, :where(body) mark .mark, :where(body) .panel.mark .mark, :where(body) .mark mark, :where(body) mark mark, :where(body) .panel.mark mark, :where(body) .mark .panel.mark, :where(body) mark .panel.mark, :where(body) .panel.mark .panel.mark { background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); } :where(body) .mark .mark .mark, :where(body) mark .mark .mark, :where(body) .panel.mark .mark .mark, :where(body) .mark mark .mark, :where(body) mark mark .mark, :where(body) .panel.mark mark .mark, :where(body) .mark .panel.mark .mark, :where(body) mark .panel.mark .mark, :where(body) .panel.mark .panel.mark .mark, :where(body) .mark .mark mark, :where(body) mark .mark mark, :where(body) .panel.mark .mark mark, :where(body) .mark mark mark, :where(body) mark mark mark, :where(body) .panel.mark mark mark, :where(body) .mark .panel.mark mark, :where(body) mark .panel.mark mark, :where(body) .panel.mark .panel.mark mark, :where(body) .mark .mark .panel.mark, :where(body) mark .mark .panel.mark, :where(body) .panel.mark .mark .panel.mark, :where(body) .mark mark .panel.mark, :where(body) mark mark .panel.mark, :where(body) .panel.mark mark .panel.mark, :where(body) .mark .panel.mark .panel.mark, :where(body) mark .panel.mark .panel.mark, :where(body) .panel.mark .panel.mark .panel.mark { background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); } :where(body) .todo, :where(body) .panel.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) .todo .panel, :where(body) .panel.todo .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) table.panel { border-radius: 0; } :where(body) table.panel > caption { border-radius: 0; box-shadow: var(--b-outer-shadow); } :where(body) table.dialog > caption { border-bottom-width: 2px; } :where(body) input, :where(body) textarea, :where(body) select, :where(body) button { background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.025); } :where(body) input:hover, :where(body) textarea:hover, :where(body) select:hover, :where(body) button:hover { background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.05); } :where(body) input:active, :where(body) textarea:active, :where(body) select:active, :where(body) button:active { background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075); } :where(body) input[type="text"], :where(body) input[type="password"], :where(body) input[type="email"], :where(body) input[type="number"], :where(body) input[type="search"], :where(body) input[type="tel"], :where(body) input[type="datetime-local"], :where(body) input[type="date"], :where(body) input[type="time"], :where(body) select:not([multiple]) { border-radius: var(--b-border-radius) var(--b-border-radius) 0 0; } :where(body) textarea, :where(body) select[multiple] { border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0; } :where(body) input[type="button"], :where(body) button { border-radius: var(--b-border-radius); } :where(body) ul > *::marker, :where(body) ol > *::marker { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5); } :where(body) summary { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); } :where(body) summary::marker { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5); } :where(body) summary:hover { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); } :where(body) summary:hover::marker { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); } :where(body) summary:active::marker { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); } :where(body) 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) 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) kbd, :where(body) samp { border-radius: calc(var(--b-border-radius) / 4); } :where(body) var { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); } :where(body) q::before, :where(body) q::after { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); } :where(body) rt { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); }