steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00
Code Activity

v8.0.0 (#62)

Browse source
This commit is contained in:
Steffo 2023-04-07 02:19:56 +02:00 committed by GitHub
parent d22f394d8a
commit 890d3675d1
Signed by: github
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 898 additions and 1264 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/_build.sh vendored
View file

@ -48,6 +48,8 @@ echo >> "$base.less"
echo "Compiling $base.css..." echo "Compiling $base.css..."
lessc "$base.less" "$base.css" lessc "$base.less" "$base.css"
echo "Compiling $base.min.css..."
lessc "$base.less" --clean-css "$base.min.css"
done done
done done

491
dist/base.module.css vendored
View file

@ -17,7 +17,7 @@
font-family: var(--bfont-text-family); font-family: var(--bfont-text-family);
} }
:where(.bluelib), :where(.bluelib),
:where(.bluelib) * { :where(.bluelib) :where(*) {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
@ -27,56 +27,51 @@
scrollbar-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)) hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); scrollbar-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)) hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
:where(.bluelib), :where(.bluelib),
:where(.bluelib) *, :where(.bluelib) :where(*),
:where(.bluelib)::before, :where(.bluelib)::before,
:where(.bluelib) *::before, :where(.bluelib) :where(*)::before,
:where(.bluelib)::after, :where(.bluelib)::after,
:where(.bluelib) *::after { :where(.bluelib) :where(*)::after {
box-sizing: border-box; box-sizing: border-box;
} }
:where(.bluelib):focus-visible, :where(.bluelib):focus-visible,
:where(.bluelib) *:focus-visible { :where(.bluelib) :where(*):focus-visible {
outline-width: 4px; outline-width: 4px;
outline-style: solid; outline-style: solid;
outline-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.3); outline-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.3);
} }
:where(.bluelib) .page-footer { :where(.bluelib) :where(.page-footer) {
margin: 1rem 0; margin: 1rem 0;
text-align: center; text-align: center;
font-size: x-small; font-size: x-small;
} }
:where(.bluelib) .float-top { :where(.bluelib) :where(.float-top) {
margin-bottom: auto; margin-bottom: auto;
} }
:where(.bluelib) .float-right { :where(.bluelib) :where(.float-right) {
margin-left: auto; margin-left: auto;
} }
:where(.bluelib) .float-bottom { :where(.bluelib) :where(.float-bottom) {
margin-top: auto; margin-top: auto;
} }
:where(.bluelib) .float-left { :where(.bluelib) :where(.float-left) {
margin-right: auto; margin-right: auto;
} }
:where(.bluelib) .float-hcenter { :where(.bluelib) :where(.float-hcenter) {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
:where(.bluelib) .float-vcenter { :where(.bluelib) :where(.float-vcenter) {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
} }
:where(.bluelib) .header-1 { :where(.bluelib) :where(.header-1) {
font-size: 2.5em; font-size: 2.5em;
} }
:where(.bluelib) .header-2 { :where(.bluelib) :where(.header-2) {
font-size: 1.75em; font-size: 1.75em;
} }
:where(.bluelib) .header-1, :where(.bluelib) :where(h1, h2, h3, h4, h5, h6) {
:where(.bluelib) .header-2,
:where(.bluelib) .header-3,
:where(.bluelib) .header-4,
:where(.bluelib) .header-5,
:where(.bluelib) .header-6 {
text-align: center; text-align: center;
--bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-hue: var(--bhsl-primary-hue);
--bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-saturation: var(--bhsl-primary-saturation);
@ -88,7 +83,7 @@
line-height: var(--bfont-header-height); line-height: var(--bfont-header-height);
font-family: var(--bfont-header-family); font-family: var(--bfont-header-family);
} }
:where(.bluelib) .panel { :where(.bluelib) :where(.panel) {
padding-top: 8px; padding-top: 8px;
padding-right: 8px; padding-right: 8px;
padding-left: 8px; padding-left: 8px;
@ -101,40 +96,64 @@
gap: 8px; gap: 8px;
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
:where(.bluelib) .panel.border-top, :where(.bluelib) :where(.panel):where(.border-top),
:where(.bluelib) .panel.panel-box { :where(.bluelib) :where(.panel):where(.panel-box) {
border-top-width: 2px; border-top-width: 2px;
padding-top: 6px; padding-top: 6px;
} }
:where(.bluelib) .panel.border-right, :where(.bluelib) :where(.panel):where(.border-right),
:where(.bluelib) .panel.panel-box { :where(.bluelib) :where(.panel):where(.panel-box) {
border-right-width: 2px; border-right-width: 2px;
padding-right: 6px; padding-right: 6px;
} }
:where(.bluelib) .panel.border-left, :where(.bluelib) :where(.panel):where(.border-left),
:where(.bluelib) .panel.panel-box, :where(.bluelib) :where(.panel):where(.panel-box),
:where(.bluelib) .panel.panel-dialog { :where(.bluelib) :where(.panel):where(.panel-dialog) {
border-left-width: 2px; border-left-width: 2px;
padding-left: 6px; padding-left: 6px;
} }
:where(.bluelib) .panel.border-bottom, :where(.bluelib) :where(.panel):where(.border-bottom),
:where(.bluelib) .panel.panel-box { :where(.bluelib) :where(.panel):where(.panel-box) {
border-bottom-width: 2px; border-bottom-width: 2px;
padding-bottom: 6px; padding-bottom: 6px;
} }
:where(.bluelib) .panel.panel-parenthesis { :where(.bluelib) :where(.panel):where(.panel-parenthesis) {
font-size: smaller; font-size: smaller;
} }
:where(.bluelib) .chapter-0, :where(.bluelib) :where(.chapter-0) {
:where(.bluelib) .chapter-1, flex-wrap: nowrap;
:where(.bluelib) .chapter-2, }
:where(.bluelib) .chapter-3, :where(.bluelib) :where(.chapter-0) > :where(*) {
:where(.bluelib) .chapter-4, flex-shrink: 1;
:where(.bluelib) .chapter-5, }
:where(.bluelib) .chapter-6, :where(.bluelib) :where(.chapter-1) > :where(*) {
:where(.bluelib) .chapter-7, flex-basis: calc(100% / 2);
:where(.bluelib) .chapter-8, }
:where(.bluelib) .chapter-9 { :where(.bluelib) :where(.chapter-2) > :where(*) {
flex-basis: calc(100% / 3);
}
:where(.bluelib) :where(.chapter-3) > :where(*) {
flex-basis: calc(100% / 4);
}
:where(.bluelib) :where(.chapter-4) > :where(*) {
flex-basis: calc(100% / 5);
}
:where(.bluelib) :where(.chapter-5) > :where(*) {
flex-basis: calc(100% / 6);
}
:where(.bluelib) :where(.chapter-6) > :where(*) {
flex-basis: calc(100% / 7);
}
:where(.bluelib) :where(.chapter-7) > :where(*) {
flex-basis: calc(100% / 8);
}
:where(.bluelib) :where(.chapter-8) > :where(*) {
flex-basis: calc(100% / 9);
}
:where(.bluelib) :where(.chapter-9) > :where(*) {
flex-basis: calc(100% / 10);
}
:where(.bluelib) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
@ -143,145 +162,44 @@
align-items: stretch; align-items: stretch;
margin: 8px 0; margin: 8px 0;
} }
:where(.bluelib) .chapter-0 > *, :where(.bluelib) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > :where(*) {
:where(.bluelib) .chapter-1 > *,
:where(.bluelib) .chapter-2 > *,
:where(.bluelib) .chapter-3 > *,
:where(.bluelib) .chapter-4 > *,
:where(.bluelib) .chapter-5 > *,
:where(.bluelib) .chapter-6 > *,
:where(.bluelib) .chapter-7 > *,
:where(.bluelib) .chapter-8 > *,
:where(.bluelib) .chapter-9 > * {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
} }
:where(.bluelib) .chapter-0 > .header-1, :where(.bluelib) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > :where(h1, h2, h3, h4, h5, h6) {
:where(.bluelib) .chapter-1 > .header-1,
:where(.bluelib) .chapter-2 > .header-1,
:where(.bluelib) .chapter-3 > .header-1,
:where(.bluelib) .chapter-4 > .header-1,
:where(.bluelib) .chapter-5 > .header-1,
:where(.bluelib) .chapter-6 > .header-1,
:where(.bluelib) .chapter-7 > .header-1,
:where(.bluelib) .chapter-8 > .header-1,
:where(.bluelib) .chapter-9 > .header-1,
:where(.bluelib) .chapter-0 > .header-2,
:where(.bluelib) .chapter-1 > .header-2,
:where(.bluelib) .chapter-2 > .header-2,
:where(.bluelib) .chapter-3 > .header-2,
:where(.bluelib) .chapter-4 > .header-2,
:where(.bluelib) .chapter-5 > .header-2,
:where(.bluelib) .chapter-6 > .header-2,
:where(.bluelib) .chapter-7 > .header-2,
:where(.bluelib) .chapter-8 > .header-2,
:where(.bluelib) .chapter-9 > .header-2,
:where(.bluelib) .chapter-0 > .header-3,
:where(.bluelib) .chapter-1 > .header-3,
:where(.bluelib) .chapter-2 > .header-3,
:where(.bluelib) .chapter-3 > .header-3,
:where(.bluelib) .chapter-4 > .header-3,
:where(.bluelib) .chapter-5 > .header-3,
:where(.bluelib) .chapter-6 > .header-3,
:where(.bluelib) .chapter-7 > .header-3,
:where(.bluelib) .chapter-8 > .header-3,
:where(.bluelib) .chapter-9 > .header-3,
:where(.bluelib) .chapter-0 > .header-4,
:where(.bluelib) .chapter-1 > .header-4,
:where(.bluelib) .chapter-2 > .header-4,
:where(.bluelib) .chapter-3 > .header-4,
:where(.bluelib) .chapter-4 > .header-4,
:where(.bluelib) .chapter-5 > .header-4,
:where(.bluelib) .chapter-6 > .header-4,
:where(.bluelib) .chapter-7 > .header-4,
:where(.bluelib) .chapter-8 > .header-4,
:where(.bluelib) .chapter-9 > .header-4,
:where(.bluelib) .chapter-0 > .header-5,
:where(.bluelib) .chapter-1 > .header-5,
:where(.bluelib) .chapter-2 > .header-5,
:where(.bluelib) .chapter-3 > .header-5,
:where(.bluelib) .chapter-4 > .header-5,
:where(.bluelib) .chapter-5 > .header-5,
:where(.bluelib) .chapter-6 > .header-5,
:where(.bluelib) .chapter-7 > .header-5,
:where(.bluelib) .chapter-8 > .header-5,
:where(.bluelib) .chapter-9 > .header-5,
:where(.bluelib) .chapter-0 > .header-6,
:where(.bluelib) .chapter-1 > .header-6,
:where(.bluelib) .chapter-2 > .header-6,
:where(.bluelib) .chapter-3 > .header-6,
:where(.bluelib) .chapter-4 > .header-6,
:where(.bluelib) .chapter-5 > .header-6,
:where(.bluelib) .chapter-6 > .header-6,
:where(.bluelib) .chapter-7 > .header-6,
:where(.bluelib) .chapter-8 > .header-6,
:where(.bluelib) .chapter-9 > .header-6 {
flex-basis: 100%; flex-basis: 100%;
margin-top: 1.2em; margin-top: 1.2em;
} }
:where(.bluelib) .chapter-0 { :where(.bluelib) :where(.separator) {
flex-wrap: nowrap;
}
:where(.bluelib) .chapter-0 > * {
flex-shrink: 1;
}
:where(.bluelib) .chapter-1 > * {
flex-basis: calc(100% / 2);
}
:where(.bluelib) .chapter-2 > * {
flex-basis: calc(100% / 3);
}
:where(.bluelib) .chapter-3 > * {
flex-basis: calc(100% / 4);
}
:where(.bluelib) .chapter-4 > * {
flex-basis: calc(100% / 5);
}
:where(.bluelib) .chapter-5 > * {
flex-basis: calc(100% / 6);
}
:where(.bluelib) .chapter-6 > * {
flex-basis: calc(100% / 7);
}
:where(.bluelib) .chapter-7 > * {
flex-basis: calc(100% / 8);
}
:where(.bluelib) .chapter-8 > * {
flex-basis: calc(100% / 9);
}
:where(.bluelib) .chapter-9 > * {
flex-basis: calc(100% / 10);
}
:where(.bluelib) .separator {
border-width: 1px; border-width: 1px;
border-style: dashed; border-style: dashed;
} }
:where(.bluelib) .separator-light { :where(.bluelib) :where(.separator-light) {
border-style: dotted; border-style: dotted;
} }
:where(.bluelib) .separator-heavy { :where(.bluelib) :where(.separator-heavy) {
border-style: solid; border-style: solid;
} }
:where(.bluelib) .image { :where(.bluelib) :where(.image) {
display: block; display: block;
max-width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
} }
:where(.bluelib) .image-limit-half { :where(.bluelib) :where(.image-limit-half) {
max-height: max(28.2vw, 50vh); max-height: max(28.2vw, 50vh);
} }
:where(.bluelib) .image-limit-quarter { :where(.bluelib) :where(.image-limit-quarter) {
max-height: max(14.1vw, 25vh); max-height: max(14.1vw, 25vh);
} }
:where(.bluelib) .table { :where(.bluelib) :where(.table) {
border-collapse: collapse; border-collapse: collapse;
} }
:where(.bluelib) .table .table-head, :where(.bluelib) :where(.table) :where(.table-head),
:where(.bluelib) .table .table-data { :where(.bluelib) :where(.table) :where(.table-data) {
padding: 3px 7px; padding: 3px 7px;
border-width: 1px; border-width: 1px;
} }
:where(.bluelib) .table .table-caption { :where(.bluelib) :where(.table) :where(.table-caption) {
border-width: 1px; border-width: 1px;
font-style: var(--bfont-caption-style); font-style: var(--bfont-caption-style);
font-variant: var(--bfont-caption-variant); font-variant: var(--bfont-caption-variant);
@ -290,77 +208,77 @@
line-height: var(--bfont-caption-height); line-height: var(--bfont-caption-height);
font-family: var(--bfont-caption-family); font-family: var(--bfont-caption-family);
} }
:where(.bluelib) .table .table-caption.table-caption-top { :where(.bluelib) :where(.table) :where(.table-caption):where(.table-caption-top) {
caption-side: top; caption-side: top;
border-bottom-width: 0; border-bottom-width: 0;
} }
:where(.bluelib) .table .table-caption.table-caption-bottom { :where(.bluelib) :where(.table) :where(.table-caption):where(.table-caption-bottom) {
caption-side: bottom; caption-side: bottom;
border-top-width: 0; border-top-width: 0;
} }
:where(.bluelib) .table.panel { :where(.bluelib) :where(.table):where(.panel) {
display: table; display: table;
} }
:where(.bluelib) .table.panel .table-head, :where(.bluelib) :where(.table):where(.panel) :where(.table-head),
:where(.bluelib) .table.panel .table-data { :where(.bluelib) :where(.table):where(.panel) :where(.table-data) {
padding: 8px; padding: 8px;
} }
:where(.bluelib) .table.panel .table-caption { :where(.bluelib) :where(.table):where(.panel) :where(.table-caption) {
text-align: inherit; text-align: inherit;
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
padding: 8px; padding: 8px;
} }
:where(.bluelib) .table.panel .table-caption * { :where(.bluelib) :where(.table):where(.panel) :where(.table-caption) :where(*) {
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
:where(.bluelib) .table.panel .table-caption *:first-child { :where(.bluelib) :where(.table):where(.panel) :where(.table-caption) :where(*):first-child {
margin-top: 0; margin-top: 0;
} }
:where(.bluelib) .table.panel .table-caption *:last-child { :where(.bluelib) :where(.table):where(.panel) :where(.table-caption) :where(*):last-child {
margin-bottom: 0; margin-bottom: 0;
} }
:where(.bluelib) .table.panel-box .table-row { :where(.bluelib) :where(.table):where(.panel-box) :where(.table-row) {
border-width: 1px; border-width: 1px;
} }
:where(.bluelib) .table.panel-box .table-head, :where(.bluelib) :where(.table):where(.panel-box) :where(.table-head),
:where(.bluelib) .table.panel-box .table-data { :where(.bluelib) :where(.table):where(.panel-box) :where(.table-data) {
border-width: 1px; border-width: 1px;
padding: 7px; padding: 7px;
} }
:where(.bluelib) .table.panel-box .table-caption { :where(.bluelib) :where(.table):where(.panel-box) :where(.table-caption) {
border-width: 2px; border-width: 2px;
padding: 6px; padding: 6px;
} }
:where(.bluelib) .table.panel-box .table-caption.table-caption-top { :where(.bluelib) :where(.table):where(.panel-box) :where(.table-caption):where(.table-caption-top) {
border-bottom-width: 0; border-bottom-width: 0;
} }
:where(.bluelib) .table.panel-box .table-caption.table-caption-bottom { :where(.bluelib) :where(.table):where(.panel-box) :where(.table-caption):where(.table-caption-bottom) {
border-top-width: 0; border-top-width: 0;
} }
:where(.bluelib) .table.panel-dialog .table-header > .table-row { :where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-header) > :where(.table-row) {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
:where(.bluelib) .table.panel-dialog .table-body > .table-row { :where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-body) > :where(.table-row) {
border-width: 0; border-width: 0;
} }
:where(.bluelib) .table.panel-dialog .table-footer > .table-row { :where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-footer) > :where(.table-row) {
border-top-width: 1px; border-top-width: 1px;
} }
:where(.bluelib) .table.panel-dialog .table-head, :where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-head),
:where(.bluelib) .table.panel-dialog .table-data { :where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-data) {
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
padding: 8px 8px 8px 7px; padding: 8px 8px 8px 7px;
} }
:where(.bluelib) .table.panel-dialog .table-caption { :where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-caption) {
border-width: 0 0 0 2px; border-width: 0 0 0 2px;
padding: 8px 8px 8px 6px; padding: 8px 8px 8px 6px;
} }
:where(.bluelib) .panel > .list-unordered, :where(.bluelib) :where(.panel) > :where(.list-unordered),
:where(.bluelib) .panel > .list-ordered { :where(.bluelib) :where(.panel) > :where(.list-ordered) {
margin-left: 6ex; margin-left: 6ex;
} }
:where(.bluelib) .glossary-term { :where(.bluelib) :where(.glossary-term) {
margin-top: 0.5em; margin-top: 0.5em;
padding: 0.2em 0; padding: 0.2em 0;
--bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-hue: var(--bhsl-primary-hue);
@ -373,14 +291,14 @@
line-height: var(--bfont-term-height); line-height: var(--bfont-term-height);
font-family: var(--bfont-term-family); font-family: var(--bfont-term-family);
} }
:where(.bluelib) .glossary-description { :where(.bluelib) :where(.glossary-description) {
margin-left: 4.5ex; margin-left: 4.5ex;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
:where(.bluelib) .glossary-details { :where(.bluelib) :where(.glossary-details) {
margin-left: 4.5ex; margin-left: 4.5ex;
} }
:where(.bluelib) .glossary-summary { :where(.bluelib) :where(.glossary-summary) {
cursor: pointer; cursor: pointer;
margin-left: -4ex; margin-left: -4ex;
padding: 0.2em 0; padding: 0.2em 0;
@ -392,11 +310,10 @@
font-family: var(--bfont-summary-family); font-family: var(--bfont-summary-family);
user-select: none; user-select: none;
} }
:where(.bluelib) .modifier-fade { :where(.bluelib) :where(.modifier-fade) {
opacity: 0.3; opacity: 0.3;
} }
:where(.bluelib) .modifier-mark, :where(.bluelib) :where(.modifier-mark) {
:where(.bluelib) .element-mark {
font-style: var(--bfont-mark-style); font-style: var(--bfont-mark-style);
font-variant: var(--bfont-mark-variant); font-variant: var(--bfont-mark-variant);
font-weight: var(--bfont-mark-weight); font-weight: var(--bfont-mark-weight);
@ -408,73 +325,63 @@
--bhsl-current-saturation: var(--bhsl-mark-foreground-saturation); --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation);
--bhsl-current-lightness: var(--bhsl-mark-foreground-lightness); --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness);
} }
:where(.bluelib) .modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) {
:where(.bluelib) .element-mark .modifier-mark,
:where(.bluelib) .modifier-mark .element-mark,
:where(.bluelib) .element-mark .element-mark {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
--bhsl-current-hue: var(--bhsl-foreground-hue); --bhsl-current-hue: var(--bhsl-foreground-hue);
--bhsl-current-saturation: var(--bhsl-foreground-saturation); --bhsl-current-saturation: var(--bhsl-foreground-saturation);
--bhsl-current-lightness: var(--bhsl-foreground-lightness); --bhsl-current-lightness: var(--bhsl-foreground-lightness);
} }
:where(.bluelib) .modifier-mark .modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark) {
:where(.bluelib) .element-mark .modifier-mark .modifier-mark,
:where(.bluelib) .modifier-mark .element-mark .modifier-mark,
:where(.bluelib) .element-mark .element-mark .modifier-mark,
:where(.bluelib) .modifier-mark .modifier-mark .element-mark,
:where(.bluelib) .element-mark .modifier-mark .element-mark,
:where(.bluelib) .modifier-mark .element-mark .element-mark,
:where(.bluelib) .element-mark .element-mark .element-mark {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
--bhsl-current-hue: var(--bhsl-mark-foreground-hue); --bhsl-current-hue: var(--bhsl-mark-foreground-hue);
--bhsl-current-saturation: var(--bhsl-mark-foreground-saturation); --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation);
--bhsl-current-lightness: var(--bhsl-mark-foreground-lightness); --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness);
} }
:where(.bluelib) .modifier-todo { :where(.bluelib) :where(.modifier-todo) {
--bhsl-current-hue: var(--bhsl-todo-foreground-hue); --bhsl-current-hue: var(--bhsl-todo-foreground-hue);
--bhsl-current-saturation: var(--bhsl-todo-foreground-saturation); --bhsl-current-saturation: var(--bhsl-todo-foreground-saturation);
--bhsl-current-lightness: var(--bhsl-todo-foreground-lightness); --bhsl-current-lightness: var(--bhsl-todo-foreground-lightness);
} }
:where(.bluelib) .modifier-todo, :where(.bluelib) :where(.modifier-todo),
:where(.bluelib) .modifier-todo .panel { :where(.bluelib) :where(.modifier-todo) :where(.panel) {
border-style: dashed; border-style: dashed;
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
} }
:where(.bluelib) .property-disabled { :where(.bluelib) :where(.property-disabled) {
border-style: dashed; border-style: dashed;
cursor: not-allowed; cursor: not-allowed;
} }
:where(.bluelib) .modifier-red { :where(.bluelib) :where(.modifier-red) {
--bhsl-current-hue: var(--bhsl-red-hue); --bhsl-current-hue: var(--bhsl-red-hue);
--bhsl-current-saturation: var(--bhsl-red-saturation); --bhsl-current-saturation: var(--bhsl-red-saturation);
--bhsl-current-lightness: var(--bhsl-red-lightness); --bhsl-current-lightness: var(--bhsl-red-lightness);
} }
:where(.bluelib) .modifier-yellow { :where(.bluelib) :where(.modifier-yellow) {
--bhsl-current-hue: var(--bhsl-yellow-hue); --bhsl-current-hue: var(--bhsl-yellow-hue);
--bhsl-current-saturation: var(--bhsl-yellow-saturation); --bhsl-current-saturation: var(--bhsl-yellow-saturation);
--bhsl-current-lightness: var(--bhsl-yellow-lightness); --bhsl-current-lightness: var(--bhsl-yellow-lightness);
} }
:where(.bluelib) .modifier-green { :where(.bluelib) :where(.modifier-green) {
--bhsl-current-hue: var(--bhsl-green-hue); --bhsl-current-hue: var(--bhsl-green-hue);
--bhsl-current-saturation: var(--bhsl-green-saturation); --bhsl-current-saturation: var(--bhsl-green-saturation);
--bhsl-current-lightness: var(--bhsl-green-lightness); --bhsl-current-lightness: var(--bhsl-green-lightness);
} }
:where(.bluelib) .modifier-cyan { :where(.bluelib) :where(.modifier-cyan) {
--bhsl-current-hue: var(--bhsl-cyan-hue); --bhsl-current-hue: var(--bhsl-cyan-hue);
--bhsl-current-saturation: var(--bhsl-cyan-saturation); --bhsl-current-saturation: var(--bhsl-cyan-saturation);
--bhsl-current-lightness: var(--bhsl-cyan-lightness); --bhsl-current-lightness: var(--bhsl-cyan-lightness);
} }
:where(.bluelib) .modifier-blue { :where(.bluelib) :where(.modifier-blue) {
--bhsl-current-hue: var(--bhsl-blue-hue); --bhsl-current-hue: var(--bhsl-blue-hue);
--bhsl-current-saturation: var(--bhsl-blue-saturation); --bhsl-current-saturation: var(--bhsl-blue-saturation);
--bhsl-current-lightness: var(--bhsl-blue-lightness); --bhsl-current-lightness: var(--bhsl-blue-lightness);
} }
:where(.bluelib) .modifier-magenta { :where(.bluelib) :where(.modifier-magenta) {
--bhsl-current-hue: var(--bhsl-magenta-hue); --bhsl-current-hue: var(--bhsl-magenta-hue);
--bhsl-current-saturation: var(--bhsl-magenta-saturation); --bhsl-current-saturation: var(--bhsl-magenta-saturation);
--bhsl-current-lightness: var(--bhsl-magenta-lightness); --bhsl-current-lightness: var(--bhsl-magenta-lightness);
} }
:where(.bluelib) .input { :where(.bluelib) :where(.input) {
font: inherit; font: inherit;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
@ -484,50 +391,50 @@
border-width: 0; border-width: 0;
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4);
} }
:where(.bluelib) .input::placeholder { :where(.bluelib) :where(.input)::placeholder {
opacity: 1; opacity: 1;
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4);
} }
:where(.bluelib) .input:hover:not(.property-disabled) { :where(.bluelib) :where(.input):hover:not(:where(.property-disabled)) {
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
} }
:where(.bluelib) .input:hover:not(.property-disabled)::placeholder { :where(.bluelib) :where(.input):hover:not(:where(.property-disabled))::placeholder {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
} }
:where(.bluelib) .input:active:not(.property-disabled), :where(.bluelib) :where(.input):active:not(:where(.property-disabled)),
:where(.bluelib) .input:focus:not(.property-disabled) { :where(.bluelib) :where(.input):focus:not(:where(.property-disabled)) {
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
} }
:where(.bluelib) .input-area { :where(.bluelib) :where(.input-area) {
resize: vertical; resize: vertical;
} }
:where(.bluelib) .input-field, :where(.bluelib) :where(.input-field),
:where(.bluelib) .input-select { :where(.bluelib) :where(.input-select) {
border-bottom-width: 2px; border-bottom-width: 2px;
} }
:where(.bluelib) .input-area, :where(.bluelib) :where(.input-area),
:where(.bluelib) .input-multiselect { :where(.bluelib) :where(.input-multiselect) {
border-left-width: 2px; border-left-width: 2px;
} }
:where(.bluelib) .input-field:not(.property-disabled), :where(.bluelib) :where(.input-field):not(:where(.property-disabled)),
:where(.bluelib) .input-area:not(.property-disabled) { :where(.bluelib) :where(.input-area):not(:where(.property-disabled)) {
cursor: text; cursor: text;
} }
:where(.bluelib) .input-select:not(.property-disabled), :where(.bluelib) :where(.input-select):not(:where(.property-disabled)),
:where(.bluelib) .input-multiselect:not(.property-disabled) { :where(.bluelib) :where(.input-multiselect):not(:where(.property-disabled)) {
cursor: vertical-text; cursor: vertical-text;
} }
:where(.bluelib) .input-range:not(.property-disabled) { :where(.bluelib) :where(.input-range):not(:where(.property-disabled)) {
cursor: ew-resize; cursor: ew-resize;
} }
:where(.bluelib) .input-radio:not(.property-disabled), :where(.bluelib) :where(.input-radio):not(:where(.property-disabled)),
:where(.bluelib) .input-checkbox:not(.property-disabled), :where(.bluelib) :where(.input-checkbox):not(:where(.property-disabled)),
:where(.bluelib) .input-button:not(.property-disabled), :where(.bluelib) :where(.input-button):not(:where(.property-disabled)),
:where(.bluelib) .input-color:not(.property-disabled) { :where(.bluelib) :where(.input-color):not(:where(.property-disabled)) {
cursor: pointer; cursor: pointer;
} }
:where(.bluelib) .input-select optgroup, :where(.bluelib) :where(.input-select) optgroup,
:where(.bluelib) .input-multiselect optgroup { :where(.bluelib) :where(.input-multiselect) optgroup {
padding-bottom: 0.25em; padding-bottom: 0.25em;
font-style: var(--bfont-header-style); font-style: var(--bfont-header-style);
font-variant: var(--bfont-header-variant); font-variant: var(--bfont-header-variant);
@ -536,12 +443,12 @@
line-height: var(--bfont-header-height); line-height: var(--bfont-header-height);
font-family: var(--bfont-header-family); font-family: var(--bfont-header-family);
} }
:where(.bluelib) .input-select optgroup option, :where(.bluelib) :where(.input-select) optgroup option,
:where(.bluelib) .input-multiselect optgroup option { :where(.bluelib) :where(.input-multiselect) optgroup option {
padding: 0.125em 0 0.125em 2ex; padding: 0.125em 0 0.125em 2ex;
} }
:where(.bluelib) .input-select option, :where(.bluelib) :where(.input-select) option,
:where(.bluelib) .input-multiselect option { :where(.bluelib) :where(.input-multiselect) option {
font-style: var(--bfont-text-style); font-style: var(--bfont-text-style);
font-variant: var(--bfont-text-variant); font-variant: var(--bfont-text-variant);
font-weight: var(--bfont-text-weight); font-weight: var(--bfont-text-weight);
@ -549,8 +456,8 @@
line-height: var(--bfont-text-height); line-height: var(--bfont-text-height);
font-family: var(--bfont-text-family); font-family: var(--bfont-text-family);
} }
:where(.bluelib) .input-radio, :where(.bluelib) :where(.input-radio),
:where(.bluelib) .input-checkbox { :where(.bluelib) :where(.input-checkbox) {
appearance: none; appearance: none;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -560,89 +467,65 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
:where(.bluelib) .input-radio::before, :where(.bluelib) :where(.input-radio)::before,
:where(.bluelib) .input-checkbox::before { :where(.bluelib) :where(.input-checkbox)::before {
display: block; display: block;
content: ""; content: "";
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
:where(.bluelib) .input-radio:checked::before, :where(.bluelib) :where(.input-radio):checked::before,
:where(.bluelib) .input-checkbox:checked::before { :where(.bluelib) :where(.input-checkbox):checked::before {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
} }
:where(.bluelib) .input-radio { :where(.bluelib) :where(.input-radio) {
border-radius: 100%; border-radius: 100%;
} }
:where(.bluelib) .input-radio::before { :where(.bluelib) :where(.input-radio)::before {
border-radius: 100%; border-radius: 100%;
} }
:where(.bluelib) .input-range { :where(.bluelib) :where(.input-range) {
padding: 0; padding: 0;
/*
appearance: none;
&::-moz-range-thumb {
width: 0;
border-radius: 0;
border-style: outset;
border-color: .hsl-group(current)[@c];
border-width: 4px;
background-color: .hsl-group(primary)[@c];
} }
:where(.bluelib) :where(.input-button) {
&::-moz-range-track {
height: 0.125em;
background-color: .hsl-group(current)[@c];
}
&::-moz-range-progress {
height: 0.5em;
background-color: .hsl-group(current)[@c];
}
*/
}
:where(.bluelib) .input-button {
border-width: 2px; border-width: 2px;
border-style: outset; border-style: outset;
} }
:where(.bluelib) .input-button:active { :where(.bluelib) :where(.input-button):active {
border-style: inset; border-style: inset;
} }
:where(.bluelib) .input-file, :where(.bluelib) :where(.input-file),
:where(.bluelib) .input-color { :where(.bluelib) :where(.input-color) {
padding: 0; padding: 0;
} }
@media screen and (-webkit-min-device-pixel-ratio: 0) { @media screen and (-webkit-min-device-pixel-ratio: 0) {
:where(.bluelib) .input-field::-webkit-calendar-picker-indicator { :where(.bluelib) :where(.input-field)::-webkit-calendar-picker-indicator {
filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000)); filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000));
} }
:where(.bluelib) .input-select optgroup, :where(.bluelib) :where(.input-select) optgroup,
:where(.bluelib) .input-select option { :where(.bluelib) :where(.input-select) option {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
:where(.bluelib) .input-select optgroup::before, :where(.bluelib) :where(.input-select) optgroup::before,
:where(.bluelib) .input-select option::before { :where(.bluelib) :where(.input-select) option::before {
content: ""; content: "";
} }
} }
:where(.bluelib) .form-flex { :where(.bluelib) :where(.form-flex) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: stretch; justify-content: stretch;
} }
:where(.bluelib) .form-flex > .form-flex-content { :where(.bluelib) :where(.form-flex) > :where(.form-flex-content) {
margin: 0.5em 0; margin: 0.5em 0;
} }
:where(.bluelib) .form-flex > .form-flex-choice { :where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) {
display: flex; display: flex;
gap: 1ex; gap: 1ex;
min-height: 1.675em; min-height: 1.675em;
} }
:where(.bluelib) .form-flex > .form-flex-choice > *:first-child, :where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) > :where(*):first-child,
:where(.bluelib) .form-flex > .form-flex-choice > *:last-child { :where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) > :where(*):last-child {
margin: auto 0; margin: auto 0;
flex-basis: 15%; flex-basis: 15%;
flex-grow: 0; flex-grow: 0;
@ -657,7 +540,7 @@
--bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-saturation: var(--bhsl-primary-saturation);
--bhsl-current-lightness: var(--bhsl-primary-lightness); --bhsl-current-lightness: var(--bhsl-primary-lightness);
} }
:where(.bluelib) .form-flex > .form-flex-choice > * { :where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) > :where(*) {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -665,20 +548,20 @@
align-items: stretch; align-items: stretch;
gap: 1ex; gap: 1ex;
} }
:where(.bluelib) .form-flex > .form-flex-choice > *:first-child { :where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) > :where(*):first-child {
text-align: right; text-align: right;
display: block; display: block;
} }
:where(.bluelib) .form-flex > .form-flex-choice > *:last-child { :where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) > :where(*):last-child {
text-align: left; text-align: left;
display: block; display: block;
} }
:where(.bluelib) .text-anchor { :where(.bluelib) :where(.text-anchor) {
--bhsl-current-hue: var(--bhsl-link-hue); --bhsl-current-hue: var(--bhsl-link-hue);
--bhsl-current-saturation: var(--bhsl-link-saturation); --bhsl-current-saturation: var(--bhsl-link-saturation);
--bhsl-current-lightness: var(--bhsl-link-lightness); --bhsl-current-lightness: var(--bhsl-link-lightness);
} }
:where(.bluelib) .text-idiomatic { :where(.bluelib) :where(.text-idiomatic) {
font-style: var(--bfont-idiomatic-style); font-style: var(--bfont-idiomatic-style);
font-variant: var(--bfont-idiomatic-variant); font-variant: var(--bfont-idiomatic-variant);
font-weight: var(--bfont-idiomatic-weight); font-weight: var(--bfont-idiomatic-weight);
@ -686,7 +569,7 @@
line-height: var(--bfont-idiomatic-height); line-height: var(--bfont-idiomatic-height);
font-family: var(--bfont-idiomatic-family); font-family: var(--bfont-idiomatic-family);
} }
:where(.bluelib) .text-emphasis { :where(.bluelib) :where(.text-emphasis) {
font-style: var(--bfont-emphasis-style); font-style: var(--bfont-emphasis-style);
font-variant: var(--bfont-emphasis-variant); font-variant: var(--bfont-emphasis-variant);
font-weight: var(--bfont-emphasis-weight); font-weight: var(--bfont-emphasis-weight);
@ -694,7 +577,7 @@
line-height: var(--bfont-emphasis-height); line-height: var(--bfont-emphasis-height);
font-family: var(--bfont-emphasis-family); font-family: var(--bfont-emphasis-family);
} }
:where(.bluelib) .text-attention { :where(.bluelib) :where(.text-attention) {
font-style: var(--bfont-attention-style); font-style: var(--bfont-attention-style);
font-variant: var(--bfont-attention-variant); font-variant: var(--bfont-attention-variant);
font-weight: var(--bfont-attention-weight); font-weight: var(--bfont-attention-weight);
@ -702,7 +585,7 @@
line-height: var(--bfont-attention-height); line-height: var(--bfont-attention-height);
font-family: var(--bfont-attention-family); font-family: var(--bfont-attention-family);
} }
:where(.bluelib) .text-strong { :where(.bluelib) :where(.text-strong) {
font-style: var(--bfont-strong-style); font-style: var(--bfont-strong-style);
font-variant: var(--bfont-strong-variant); font-variant: var(--bfont-strong-variant);
font-weight: var(--bfont-strong-weight); font-weight: var(--bfont-strong-weight);
@ -710,20 +593,20 @@
line-height: var(--bfont-strong-height); line-height: var(--bfont-strong-height);
font-family: var(--bfont-strong-family); font-family: var(--bfont-strong-family);
} }
:where(.bluelib) .text-inserted { :where(.bluelib) :where(.text-inserted) {
--bhsl-current-hue: var(--bhsl-inserted-hue); --bhsl-current-hue: var(--bhsl-inserted-hue);
--bhsl-current-saturation: var(--bhsl-inserted-saturation); --bhsl-current-saturation: var(--bhsl-inserted-saturation);
--bhsl-current-lightness: var(--bhsl-inserted-lightness); --bhsl-current-lightness: var(--bhsl-inserted-lightness);
} }
:where(.bluelib) .text-deleted { :where(.bluelib) :where(.text-deleted) {
--bhsl-current-hue: var(--bhsl-deleted-hue); --bhsl-current-hue: var(--bhsl-deleted-hue);
--bhsl-current-saturation: var(--bhsl-deleted-saturation); --bhsl-current-saturation: var(--bhsl-deleted-saturation);
--bhsl-current-lightness: var(--bhsl-deleted-lightness); --bhsl-current-lightness: var(--bhsl-deleted-lightness);
} }
:where(.bluelib) .text-code, :where(.bluelib) :where(.text-code),
:where(.bluelib) .text-preformatted, :where(.bluelib) :where(.text-preformatted),
:where(.bluelib) .text-input, :where(.bluelib) :where(.text-input),
:where(.bluelib) .text-output { :where(.bluelib) :where(.text-output) {
font-style: var(--bfont-code-style); font-style: var(--bfont-code-style);
font-variant: var(--bfont-code-variant); font-variant: var(--bfont-code-variant);
font-weight: var(--bfont-code-weight); font-weight: var(--bfont-code-weight);
@ -731,20 +614,20 @@
line-height: var(--bfont-code-height); line-height: var(--bfont-code-height);
font-family: var(--bfont-code-family); font-family: var(--bfont-code-family);
} }
:where(.bluelib) .text-preformatted { :where(.bluelib) :where(.text-preformatted) {
overflow-x: scroll; overflow-x: scroll;
} }
:where(.bluelib) .text-input, :where(.bluelib) :where(.text-input),
:where(.bluelib) .text-output { :where(.bluelib) :where(.text-output) {
padding: 0 0.25ex; padding: 0 0.25ex;
} }
:where(.bluelib) .text-input { :where(.bluelib) :where(.text-input) {
background-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness)); background-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness));
--bhsl-current-hue: var(--bhsl-sample-input-hue); --bhsl-current-hue: var(--bhsl-sample-input-hue);
--bhsl-current-saturation: var(--bhsl-sample-input-saturation); --bhsl-current-saturation: var(--bhsl-sample-input-saturation);
--bhsl-current-lightness: var(--bhsl-sample-input-lightness); --bhsl-current-lightness: var(--bhsl-sample-input-lightness);
} }
:where(.bluelib) .text-input .text-input { :where(.bluelib) :where(.text-input) :where(.text-input) {
font-style: var(--bfont-boldcode-style); font-style: var(--bfont-boldcode-style);
font-variant: var(--bfont-boldcode-variant); font-variant: var(--bfont-boldcode-variant);
font-weight: var(--bfont-boldcode-weight); font-weight: var(--bfont-boldcode-weight);
@ -752,13 +635,13 @@
line-height: var(--bfont-boldcode-height); line-height: var(--bfont-boldcode-height);
font-family: var(--bfont-boldcode-family); font-family: var(--bfont-boldcode-family);
} }
:where(.bluelib) .text-output { :where(.bluelib) :where(.text-output) {
background-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness)); background-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness));
--bhsl-current-hue: var(--bhsl-sample-output-hue); --bhsl-current-hue: var(--bhsl-sample-output-hue);
--bhsl-current-saturation: var(--bhsl-sample-output-saturation); --bhsl-current-saturation: var(--bhsl-sample-output-saturation);
--bhsl-current-lightness: var(--bhsl-sample-output-lightness); --bhsl-current-lightness: var(--bhsl-sample-output-lightness);
} }
:where(.bluelib) .text-output .text-output { :where(.bluelib) :where(.text-output) :where(.text-output) {
font-style: var(--bfont-boldcode-style); font-style: var(--bfont-boldcode-style);
font-variant: var(--bfont-boldcode-variant); font-variant: var(--bfont-boldcode-variant);
font-weight: var(--bfont-boldcode-weight); font-weight: var(--bfont-boldcode-weight);
@ -766,7 +649,7 @@
line-height: var(--bfont-boldcode-height); line-height: var(--bfont-boldcode-height);
font-family: var(--bfont-boldcode-family); font-family: var(--bfont-boldcode-family);
} }
:where(.bluelib) .text-variable { :where(.bluelib) :where(.text-variable) {
font-style: var(--bfont-variable-style); font-style: var(--bfont-variable-style);
font-variant: var(--bfont-variable-variant); font-variant: var(--bfont-variable-variant);
font-weight: var(--bfont-variable-weight); font-weight: var(--bfont-variable-weight);
@ -774,7 +657,7 @@
line-height: var(--bfont-variable-height); line-height: var(--bfont-variable-height);
font-family: var(--bfont-variable-family); font-family: var(--bfont-variable-family);
} }
:where(.bluelib) .text-citation { :where(.bluelib) :where(.text-citation) {
font-style: var(--bfont-citation-style); font-style: var(--bfont-citation-style);
font-variant: var(--bfont-citation-variant); font-variant: var(--bfont-citation-variant);
font-weight: var(--bfont-citation-weight); font-weight: var(--bfont-citation-weight);
@ -782,7 +665,7 @@
line-height: var(--bfont-citation-height); line-height: var(--bfont-citation-height);
font-family: var(--bfont-citation-family); font-family: var(--bfont-citation-family);
} }
:where(.bluelib) .text-definition { :where(.bluelib) :where(.text-definition) {
font-style: var(--bfont-term-style); font-style: var(--bfont-term-style);
font-variant: var(--bfont-term-variant); font-variant: var(--bfont-term-variant);
font-weight: var(--bfont-term-weight); font-weight: var(--bfont-term-weight);
@ -793,6 +676,6 @@
--bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-saturation: var(--bhsl-primary-saturation);
--bhsl-current-lightness: var(--bhsl-primary-lightness); --bhsl-current-lightness: var(--bhsl-primary-lightness);
} }
:where(.bluelib) .text-abbreviation { :where(.bluelib) :where(.text-abbreviation) {
cursor: help; cursor: help;
} }

1
dist/base.module.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

536
dist/base.root.css vendored
View file

@ -17,7 +17,7 @@
font-family: var(--bfont-text-family); font-family: var(--bfont-text-family);
} }
:where(body), :where(body),
:where(body) * { :where(body) :where(*) {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
@ -27,56 +27,51 @@
scrollbar-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)) hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); scrollbar-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)) hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
:where(body), :where(body),
:where(body) *, :where(body) :where(*),
:where(body)::before, :where(body)::before,
:where(body) *::before, :where(body) :where(*)::before,
:where(body)::after, :where(body)::after,
:where(body) *::after { :where(body) :where(*)::after {
box-sizing: border-box; box-sizing: border-box;
} }
:where(body):focus-visible, :where(body):focus-visible,
:where(body) *:focus-visible { :where(body) :where(*):focus-visible {
outline-width: 4px; outline-width: 4px;
outline-style: solid; outline-style: solid;
outline-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.3); outline-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.3);
} }
:where(body) footer { :where(body) :where(footer) {
margin: 1rem 0; margin: 1rem 0;
text-align: center; text-align: center;
font-size: x-small; font-size: x-small;
} }
:where(body) .float-top { :where(body) :where(.float-top) {
margin-bottom: auto; margin-bottom: auto;
} }
:where(body) .float-right { :where(body) :where(.float-right) {
margin-left: auto; margin-left: auto;
} }
:where(body) .float-bottom { :where(body) :where(.float-bottom) {
margin-top: auto; margin-top: auto;
} }
:where(body) .float-left { :where(body) :where(.float-left) {
margin-right: auto; margin-right: auto;
} }
:where(body) .float-hcenter { :where(body) :where(.float-hcenter) {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
:where(body) .float-vcenter { :where(body) :where(.float-vcenter) {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
} }
:where(body) h1 { :where(body) :where(h1) {
font-size: 2.5em; font-size: 2.5em;
} }
:where(body) h2 { :where(body) :where(h2) {
font-size: 1.75em; font-size: 1.75em;
} }
:where(body) h1, :where(body) :where(h1, h2, h3, h4, h5, h6) {
:where(body) h2,
:where(body) h3,
:where(body) h4,
:where(body) h5,
:where(body) h6 {
text-align: center; text-align: center;
--bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-hue: var(--bhsl-primary-hue);
--bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-saturation: var(--bhsl-primary-saturation);
@ -88,7 +83,7 @@
line-height: var(--bfont-header-height); line-height: var(--bfont-header-height);
font-family: var(--bfont-header-family); font-family: var(--bfont-header-family);
} }
:where(body) .panel { :where(body) :where(.panel) {
padding-top: 8px; padding-top: 8px;
padding-right: 8px; padding-right: 8px;
padding-left: 8px; padding-left: 8px;
@ -101,40 +96,64 @@
gap: 8px; gap: 8px;
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
:where(body) .panel.border-top, :where(body) :where(.panel):where(.border-top),
:where(body) .panel.box { :where(body) :where(.panel):where(.box) {
border-top-width: 2px; border-top-width: 2px;
padding-top: 6px; padding-top: 6px;
} }
:where(body) .panel.border-right, :where(body) :where(.panel):where(.border-right),
:where(body) .panel.box { :where(body) :where(.panel):where(.box) {
border-right-width: 2px; border-right-width: 2px;
padding-right: 6px; padding-right: 6px;
} }
:where(body) .panel.border-left, :where(body) :where(.panel):where(.border-left),
:where(body) .panel.box, :where(body) :where(.panel):where(.box),
:where(body) .panel.dialog { :where(body) :where(.panel):where(.dialog) {
border-left-width: 2px; border-left-width: 2px;
padding-left: 6px; padding-left: 6px;
} }
:where(body) .panel.border-bottom, :where(body) :where(.panel):where(.border-bottom),
:where(body) .panel.box { :where(body) :where(.panel):where(.box) {
border-bottom-width: 2px; border-bottom-width: 2px;
padding-bottom: 6px; padding-bottom: 6px;
} }
:where(body) .panel.parenthesis { :where(body) :where(.panel):where(.parenthesis) {
font-size: smaller; font-size: smaller;
} }
:where(body) .chapter-0, :where(body) :where(.chapter-0) {
:where(body) .chapter-1, flex-wrap: nowrap;
:where(body) .chapter-2, }
:where(body) .chapter-3, :where(body) :where(.chapter-0) > :where(*) {
:where(body) .chapter-4, flex-shrink: 1;
:where(body) .chapter-5, }
:where(body) .chapter-6, :where(body) :where(.chapter-1) > :where(*) {
:where(body) .chapter-7, flex-basis: calc(100% / 2);
:where(body) .chapter-8, }
:where(body) .chapter-9 { :where(body) :where(.chapter-2) > :where(*) {
flex-basis: calc(100% / 3);
}
:where(body) :where(.chapter-3) > :where(*) {
flex-basis: calc(100% / 4);
}
:where(body) :where(.chapter-4) > :where(*) {
flex-basis: calc(100% / 5);
}
:where(body) :where(.chapter-5) > :where(*) {
flex-basis: calc(100% / 6);
}
:where(body) :where(.chapter-6) > :where(*) {
flex-basis: calc(100% / 7);
}
:where(body) :where(.chapter-7) > :where(*) {
flex-basis: calc(100% / 8);
}
:where(body) :where(.chapter-8) > :where(*) {
flex-basis: calc(100% / 9);
}
:where(body) :where(.chapter-9) > :where(*) {
flex-basis: calc(100% / 10);
}
:where(body) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
@ -143,145 +162,44 @@
align-items: stretch; align-items: stretch;
margin: 8px 0; margin: 8px 0;
} }
:where(body) .chapter-0 > *, :where(body) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > :where(*) {
:where(body) .chapter-1 > *,
:where(body) .chapter-2 > *,
:where(body) .chapter-3 > *,
:where(body) .chapter-4 > *,
:where(body) .chapter-5 > *,
:where(body) .chapter-6 > *,
:where(body) .chapter-7 > *,
:where(body) .chapter-8 > *,
:where(body) .chapter-9 > * {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
} }
:where(body) .chapter-0 > h1, :where(body) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > :where(h1, h2, h3, h4, h5, h6) {
:where(body) .chapter-1 > h1,
:where(body) .chapter-2 > h1,
:where(body) .chapter-3 > h1,
:where(body) .chapter-4 > h1,
:where(body) .chapter-5 > h1,
:where(body) .chapter-6 > h1,
:where(body) .chapter-7 > h1,
:where(body) .chapter-8 > h1,
:where(body) .chapter-9 > h1,
:where(body) .chapter-0 > h2,
:where(body) .chapter-1 > h2,
:where(body) .chapter-2 > h2,
:where(body) .chapter-3 > h2,
:where(body) .chapter-4 > h2,
:where(body) .chapter-5 > h2,
:where(body) .chapter-6 > h2,
:where(body) .chapter-7 > h2,
:where(body) .chapter-8 > h2,
:where(body) .chapter-9 > h2,
:where(body) .chapter-0 > h3,
:where(body) .chapter-1 > h3,
:where(body) .chapter-2 > h3,
:where(body) .chapter-3 > h3,
:where(body) .chapter-4 > h3,
:where(body) .chapter-5 > h3,
:where(body) .chapter-6 > h3,
:where(body) .chapter-7 > h3,
:where(body) .chapter-8 > h3,
:where(body) .chapter-9 > h3,
:where(body) .chapter-0 > h4,
:where(body) .chapter-1 > h4,
:where(body) .chapter-2 > h4,
:where(body) .chapter-3 > h4,
:where(body) .chapter-4 > h4,
:where(body) .chapter-5 > h4,
:where(body) .chapter-6 > h4,
:where(body) .chapter-7 > h4,
:where(body) .chapter-8 > h4,
:where(body) .chapter-9 > h4,
:where(body) .chapter-0 > h5,
:where(body) .chapter-1 > h5,
:where(body) .chapter-2 > h5,
:where(body) .chapter-3 > h5,
:where(body) .chapter-4 > h5,
:where(body) .chapter-5 > h5,
:where(body) .chapter-6 > h5,
:where(body) .chapter-7 > h5,
:where(body) .chapter-8 > h5,
:where(body) .chapter-9 > h5,
:where(body) .chapter-0 > h6,
:where(body) .chapter-1 > h6,
:where(body) .chapter-2 > h6,
:where(body) .chapter-3 > h6,
:where(body) .chapter-4 > h6,
:where(body) .chapter-5 > h6,
:where(body) .chapter-6 > h6,
:where(body) .chapter-7 > h6,
:where(body) .chapter-8 > h6,
:where(body) .chapter-9 > h6 {
flex-basis: 100%; flex-basis: 100%;
margin-top: 1.2em; margin-top: 1.2em;
} }
:where(body) .chapter-0 { :where(body) :where(hr) {
flex-wrap: nowrap;
}
:where(body) .chapter-0 > * {
flex-shrink: 1;
}
:where(body) .chapter-1 > * {
flex-basis: calc(100% / 2);
}
:where(body) .chapter-2 > * {
flex-basis: calc(100% / 3);
}
:where(body) .chapter-3 > * {
flex-basis: calc(100% / 4);
}
:where(body) .chapter-4 > * {
flex-basis: calc(100% / 5);
}
:where(body) .chapter-5 > * {
flex-basis: calc(100% / 6);
}
:where(body) .chapter-6 > * {
flex-basis: calc(100% / 7);
}
:where(body) .chapter-7 > * {
flex-basis: calc(100% / 8);
}
:where(body) .chapter-8 > * {
flex-basis: calc(100% / 9);
}
:where(body) .chapter-9 > * {
flex-basis: calc(100% / 10);
}
:where(body) hr {
border-width: 1px; border-width: 1px;
border-style: dashed; border-style: dashed;
} }
:where(body) .separator-light { :where(body) :where(.separator-light) {
border-style: dotted; border-style: dotted;
} }
:where(body) .separator-heavy { :where(body) :where(.separator-heavy) {
border-style: solid; border-style: solid;
} }
:where(body) img { :where(body) :where(img) {
display: block; display: block;
max-width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
} }
:where(body) .image-limit-half { :where(body) :where(.image-limit-half) {
max-height: max(28.2vw, 50vh); max-height: max(28.2vw, 50vh);
} }
:where(body) .image-limit-quarter { :where(body) :where(.image-limit-quarter) {
max-height: max(14.1vw, 25vh); max-height: max(14.1vw, 25vh);
} }
:where(body) table { :where(body) :where(table) {
border-collapse: collapse; border-collapse: collapse;
} }
:where(body) table th, :where(body) :where(table) :where(th),
:where(body) table td { :where(body) :where(table) :where(td) {
padding: 3px 7px; padding: 3px 7px;
border-width: 1px; border-width: 1px;
} }
:where(body) table caption { :where(body) :where(table) :where(caption) {
border-width: 1px; border-width: 1px;
font-style: var(--bfont-caption-style); font-style: var(--bfont-caption-style);
font-variant: var(--bfont-caption-variant); font-variant: var(--bfont-caption-variant);
@ -290,77 +208,77 @@
line-height: var(--bfont-caption-height); line-height: var(--bfont-caption-height);
font-family: var(--bfont-caption-family); font-family: var(--bfont-caption-family);
} }
:where(body) table caption.table-caption-top { :where(body) :where(table) :where(caption):where(.table-caption-top) {
caption-side: top; caption-side: top;
border-bottom-width: 0; border-bottom-width: 0;
} }
:where(body) table caption.table-caption-bottom { :where(body) :where(table) :where(caption):where(.table-caption-bottom) {
caption-side: bottom; caption-side: bottom;
border-top-width: 0; border-top-width: 0;
} }
:where(body) table.panel { :where(body) :where(table):where(.panel) {
display: table; display: table;
} }
:where(body) table.panel th, :where(body) :where(table):where(.panel) :where(th),
:where(body) table.panel td { :where(body) :where(table):where(.panel) :where(td) {
padding: 8px; padding: 8px;
} }
:where(body) table.panel caption { :where(body) :where(table):where(.panel) :where(caption) {
text-align: inherit; text-align: inherit;
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
padding: 8px; padding: 8px;
} }
:where(body) table.panel caption * { :where(body) :where(table):where(.panel) :where(caption) :where(*) {
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
:where(body) table.panel caption *:first-child { :where(body) :where(table):where(.panel) :where(caption) :where(*):first-child {
margin-top: 0; margin-top: 0;
} }
:where(body) table.panel caption *:last-child { :where(body) :where(table):where(.panel) :where(caption) :where(*):last-child {
margin-bottom: 0; margin-bottom: 0;
} }
:where(body) table.box tr { :where(body) :where(table):where(.box) :where(tr) {
border-width: 1px; border-width: 1px;
} }
:where(body) table.box th, :where(body) :where(table):where(.box) :where(th),
:where(body) table.box td { :where(body) :where(table):where(.box) :where(td) {
border-width: 1px; border-width: 1px;
padding: 7px; padding: 7px;
} }
:where(body) table.box caption { :where(body) :where(table):where(.box) :where(caption) {
border-width: 2px; border-width: 2px;
padding: 6px; padding: 6px;
} }
:where(body) table.box caption.table-caption-top { :where(body) :where(table):where(.box) :where(caption):where(.table-caption-top) {
border-bottom-width: 0; border-bottom-width: 0;
} }
:where(body) table.box caption.table-caption-bottom { :where(body) :where(table):where(.box) :where(caption):where(.table-caption-bottom) {
border-top-width: 0; border-top-width: 0;
} }
:where(body) table.dialog thead > tr { :where(body) :where(table):where(.dialog) :where(thead) > :where(tr) {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
:where(body) table.dialog tbody > tr { :where(body) :where(table):where(.dialog) :where(tbody) > :where(tr) {
border-width: 0; border-width: 0;
} }
:where(body) table.dialog tfoot > tr { :where(body) :where(table):where(.dialog) :where(tfoot) > :where(tr) {
border-top-width: 1px; border-top-width: 1px;
} }
:where(body) table.dialog th, :where(body) :where(table):where(.dialog) :where(th),
:where(body) table.dialog td { :where(body) :where(table):where(.dialog) :where(td) {
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
padding: 8px 8px 8px 7px; padding: 8px 8px 8px 7px;
} }
:where(body) table.dialog caption { :where(body) :where(table):where(.dialog) :where(caption) {
border-width: 0 0 0 2px; border-width: 0 0 0 2px;
padding: 8px 8px 8px 6px; padding: 8px 8px 8px 6px;
} }
:where(body) .panel > ul, :where(body) :where(.panel) > :where(ul),
:where(body) .panel > ol { :where(body) :where(.panel) > :where(ol) {
margin-left: 6ex; margin-left: 6ex;
} }
:where(body) dt { :where(body) :where(dt) {
margin-top: 0.5em; margin-top: 0.5em;
padding: 0.2em 0; padding: 0.2em 0;
--bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-hue: var(--bhsl-primary-hue);
@ -373,14 +291,14 @@
line-height: var(--bfont-term-height); line-height: var(--bfont-term-height);
font-family: var(--bfont-term-family); font-family: var(--bfont-term-family);
} }
:where(body) dd { :where(body) :where(dd) {
margin-left: 4.5ex; margin-left: 4.5ex;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
:where(body) details { :where(body) :where(details) {
margin-left: 4.5ex; margin-left: 4.5ex;
} }
:where(body) summary { :where(body) :where(summary) {
cursor: pointer; cursor: pointer;
margin-left: -4ex; margin-left: -4ex;
padding: 0.2em 0; padding: 0.2em 0;
@ -392,11 +310,10 @@
font-family: var(--bfont-summary-family); font-family: var(--bfont-summary-family);
user-select: none; user-select: none;
} }
:where(body) .fade { :where(body) :where(.fade) {
opacity: 0.3; opacity: 0.3;
} }
:where(body) .mark, :where(body) :where(mark, .mark) {
:where(body) mark {
font-style: var(--bfont-mark-style); font-style: var(--bfont-mark-style);
font-variant: var(--bfont-mark-variant); font-variant: var(--bfont-mark-variant);
font-weight: var(--bfont-mark-weight); font-weight: var(--bfont-mark-weight);
@ -408,76 +325,63 @@
--bhsl-current-saturation: var(--bhsl-mark-foreground-saturation); --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation);
--bhsl-current-lightness: var(--bhsl-mark-foreground-lightness); --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness);
} }
:where(body) .mark .mark, :where(body) :where(mark, .mark) :where(mark, .mark) {
:where(body) mark .mark,
:where(body) .mark mark,
:where(body) mark mark {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
--bhsl-current-hue: var(--bhsl-foreground-hue); --bhsl-current-hue: var(--bhsl-foreground-hue);
--bhsl-current-saturation: var(--bhsl-foreground-saturation); --bhsl-current-saturation: var(--bhsl-foreground-saturation);
--bhsl-current-lightness: var(--bhsl-foreground-lightness); --bhsl-current-lightness: var(--bhsl-foreground-lightness);
} }
:where(body) .mark .mark .mark, :where(body) :where(mark, .mark) :where(mark, .mark) :where(mark, .mark) {
:where(body) mark .mark .mark,
:where(body) .mark mark .mark,
:where(body) mark mark .mark,
:where(body) .mark .mark mark,
:where(body) mark .mark mark,
:where(body) .mark mark mark,
:where(body) mark mark mark {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
--bhsl-current-hue: var(--bhsl-mark-foreground-hue); --bhsl-current-hue: var(--bhsl-mark-foreground-hue);
--bhsl-current-saturation: var(--bhsl-mark-foreground-saturation); --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation);
--bhsl-current-lightness: var(--bhsl-mark-foreground-lightness); --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness);
} }
:where(body) .todo { :where(body) :where(.todo) {
--bhsl-current-hue: var(--bhsl-todo-foreground-hue); --bhsl-current-hue: var(--bhsl-todo-foreground-hue);
--bhsl-current-saturation: var(--bhsl-todo-foreground-saturation); --bhsl-current-saturation: var(--bhsl-todo-foreground-saturation);
--bhsl-current-lightness: var(--bhsl-todo-foreground-lightness); --bhsl-current-lightness: var(--bhsl-todo-foreground-lightness);
} }
:where(body) .todo, :where(body) :where(.todo),
:where(body) .todo .panel { :where(body) :where(.todo) :where(.panel) {
border-style: dashed; border-style: dashed;
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
} }
:where(body) [disabled] { :where(body) :where([disabled]) {
border-style: dashed; border-style: dashed;
cursor: not-allowed; cursor: not-allowed;
} }
:where(body) .red { :where(body) :where(.red) {
--bhsl-current-hue: var(--bhsl-red-hue); --bhsl-current-hue: var(--bhsl-red-hue);
--bhsl-current-saturation: var(--bhsl-red-saturation); --bhsl-current-saturation: var(--bhsl-red-saturation);
--bhsl-current-lightness: var(--bhsl-red-lightness); --bhsl-current-lightness: var(--bhsl-red-lightness);
} }
:where(body) .yellow { :where(body) :where(.yellow) {
--bhsl-current-hue: var(--bhsl-yellow-hue); --bhsl-current-hue: var(--bhsl-yellow-hue);
--bhsl-current-saturation: var(--bhsl-yellow-saturation); --bhsl-current-saturation: var(--bhsl-yellow-saturation);
--bhsl-current-lightness: var(--bhsl-yellow-lightness); --bhsl-current-lightness: var(--bhsl-yellow-lightness);
} }
:where(body) .green { :where(body) :where(.green) {
--bhsl-current-hue: var(--bhsl-green-hue); --bhsl-current-hue: var(--bhsl-green-hue);
--bhsl-current-saturation: var(--bhsl-green-saturation); --bhsl-current-saturation: var(--bhsl-green-saturation);
--bhsl-current-lightness: var(--bhsl-green-lightness); --bhsl-current-lightness: var(--bhsl-green-lightness);
} }
:where(body) .cyan { :where(body) :where(.cyan) {
--bhsl-current-hue: var(--bhsl-cyan-hue); --bhsl-current-hue: var(--bhsl-cyan-hue);
--bhsl-current-saturation: var(--bhsl-cyan-saturation); --bhsl-current-saturation: var(--bhsl-cyan-saturation);
--bhsl-current-lightness: var(--bhsl-cyan-lightness); --bhsl-current-lightness: var(--bhsl-cyan-lightness);
} }
:where(body) .blue { :where(body) :where(.blue) {
--bhsl-current-hue: var(--bhsl-blue-hue); --bhsl-current-hue: var(--bhsl-blue-hue);
--bhsl-current-saturation: var(--bhsl-blue-saturation); --bhsl-current-saturation: var(--bhsl-blue-saturation);
--bhsl-current-lightness: var(--bhsl-blue-lightness); --bhsl-current-lightness: var(--bhsl-blue-lightness);
} }
:where(body) .magenta { :where(body) :where(.magenta) {
--bhsl-current-hue: var(--bhsl-magenta-hue); --bhsl-current-hue: var(--bhsl-magenta-hue);
--bhsl-current-saturation: var(--bhsl-magenta-saturation); --bhsl-current-saturation: var(--bhsl-magenta-saturation);
--bhsl-current-lightness: var(--bhsl-magenta-lightness); --bhsl-current-lightness: var(--bhsl-magenta-lightness);
} }
:where(body) input, :where(body) :where(input, textarea, select, button) {
:where(body) textarea,
:where(body) select,
:where(body) button {
font: inherit; font: inherit;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
@ -487,82 +391,50 @@
border-width: 0; border-width: 0;
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4);
} }
:where(body) input::placeholder, :where(body) :where(input, textarea, select, button)::placeholder {
:where(body) textarea::placeholder,
:where(body) select::placeholder,
:where(body) button::placeholder {
opacity: 1; opacity: 1;
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4);
} }
:where(body) input:hover:not([disabled]), :where(body) :where(input, textarea, select, button):hover:not(:where([disabled])) {
:where(body) textarea:hover:not([disabled]),
:where(body) select:hover:not([disabled]),
:where(body) button:hover:not([disabled]) {
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
} }
:where(body) input:hover:not([disabled])::placeholder, :where(body) :where(input, textarea, select, button):hover:not(:where([disabled]))::placeholder {
:where(body) textarea:hover:not([disabled])::placeholder,
:where(body) select:hover:not([disabled])::placeholder,
:where(body) button:hover:not([disabled])::placeholder {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
} }
:where(body) input:active:not([disabled]), :where(body) :where(input, textarea, select, button):active:not(:where([disabled])),
:where(body) textarea:active:not([disabled]), :where(body) :where(input, textarea, select, button):focus:not(:where([disabled])) {
:where(body) select:active:not([disabled]),
:where(body) button:active:not([disabled]),
:where(body) input:focus:not([disabled]),
:where(body) textarea:focus:not([disabled]),
:where(body) select:focus:not([disabled]),
:where(body) button:focus:not([disabled]) {
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
} }
:where(body) textarea { :where(body) :where(textarea) {
resize: vertical; resize: vertical;
} }
:where(body) input[type="text"], :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) input[type="password"], :where(body) :where(select:not([multiple])) {
: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-bottom-width: 2px; border-bottom-width: 2px;
} }
:where(body) textarea, :where(body) :where(textarea),
:where(body) select[multiple] { :where(body) :where(select[multiple]) {
border-left-width: 2px; border-left-width: 2px;
} }
:where(body) input[type="text"], :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"]):not(:where([disabled])),
:where(body) input[type="password"], :where(body) :where(textarea):not(:where([disabled])) {
: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"]:not([disabled]),
:where(body) textarea:not([disabled]) {
cursor: text; cursor: text;
} }
:where(body) select:not([multiple]):not([disabled]), :where(body) :where(select:not([multiple])):not(:where([disabled])),
:where(body) select[multiple]:not([disabled]) { :where(body) :where(select[multiple]):not(:where([disabled])) {
cursor: vertical-text; cursor: vertical-text;
} }
:where(body) input[type="range"]:not([disabled]) { :where(body) :where(input[type="range"]):not(:where([disabled])) {
cursor: ew-resize; cursor: ew-resize;
} }
:where(body) input[type="radio"]:not([disabled]), :where(body) :where(input[type="radio"]):not(:where([disabled])),
:where(body) input[type="checkbox"]:not([disabled]), :where(body) :where(input[type="checkbox"]):not(:where([disabled])),
:where(body) input[type="button"], :where(body) :where(input[type="button"], button):not(:where([disabled])),
:where(body) button:not([disabled]), :where(body) :where(input[type="color"]):not(:where([disabled])) {
:where(body) input[type="color"]:not([disabled]) {
cursor: pointer; cursor: pointer;
} }
:where(body) select:not([multiple]) optgroup, :where(body) :where(select:not([multiple])) optgroup,
:where(body) select[multiple] optgroup { :where(body) :where(select[multiple]) optgroup {
padding-bottom: 0.25em; padding-bottom: 0.25em;
font-style: var(--bfont-header-style); font-style: var(--bfont-header-style);
font-variant: var(--bfont-header-variant); font-variant: var(--bfont-header-variant);
@ -571,12 +443,12 @@
line-height: var(--bfont-header-height); line-height: var(--bfont-header-height);
font-family: var(--bfont-header-family); font-family: var(--bfont-header-family);
} }
:where(body) select:not([multiple]) optgroup option, :where(body) :where(select:not([multiple])) optgroup option,
:where(body) select[multiple] optgroup option { :where(body) :where(select[multiple]) optgroup option {
padding: 0.125em 0 0.125em 2ex; padding: 0.125em 0 0.125em 2ex;
} }
:where(body) select:not([multiple]) option, :where(body) :where(select:not([multiple])) option,
:where(body) select[multiple] option { :where(body) :where(select[multiple]) option {
font-style: var(--bfont-text-style); font-style: var(--bfont-text-style);
font-variant: var(--bfont-text-variant); font-variant: var(--bfont-text-variant);
font-weight: var(--bfont-text-weight); font-weight: var(--bfont-text-weight);
@ -584,8 +456,8 @@
line-height: var(--bfont-text-height); line-height: var(--bfont-text-height);
font-family: var(--bfont-text-family); font-family: var(--bfont-text-family);
} }
:where(body) input[type="radio"], :where(body) :where(input[type="radio"]),
:where(body) input[type="checkbox"] { :where(body) :where(input[type="checkbox"]) {
appearance: none; appearance: none;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -595,99 +467,65 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
:where(body) input[type="radio"]::before, :where(body) :where(input[type="radio"])::before,
:where(body) input[type="checkbox"]::before { :where(body) :where(input[type="checkbox"])::before {
display: block; display: block;
content: ""; content: "";
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
:where(body) input[type="radio"]:checked::before, :where(body) :where(input[type="radio"]):checked::before,
:where(body) input[type="checkbox"]:checked::before { :where(body) :where(input[type="checkbox"]):checked::before {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
} }
:where(body) input[type="radio"] { :where(body) :where(input[type="radio"]) {
border-radius: 100%; border-radius: 100%;
} }
:where(body) input[type="radio"]::before { :where(body) :where(input[type="radio"])::before {
border-radius: 100%; border-radius: 100%;
} }
:where(body) input[type="range"] { :where(body) :where(input[type="range"]) {
padding: 0; padding: 0;
/*
appearance: none;
&::-moz-range-thumb {
width: 0;
border-radius: 0;
border-style: outset;
border-color: .hsl-group(current)[@c];
border-width: 4px;
background-color: .hsl-group(primary)[@c];
} }
:where(body) :where(input[type="button"], button) {
&::-moz-range-track {
height: 0.125em;
background-color: .hsl-group(current)[@c];
}
&::-moz-range-progress {
height: 0.5em;
background-color: .hsl-group(current)[@c];
}
*/
}
:where(body) input[type="button"],
:where(body) button {
border-width: 2px; border-width: 2px;
border-style: outset; border-style: outset;
} }
:where(body) input[type="button"]:active, :where(body) :where(input[type="button"], button):active {
:where(body) button:active {
border-style: inset; border-style: inset;
} }
:where(body) input[type="file"], :where(body) :where(input[type="file"]),
:where(body) input[type="color"] { :where(body) :where(input[type="color"]) {
padding: 0; padding: 0;
} }
@media screen and (-webkit-min-device-pixel-ratio: 0) { @media screen and (-webkit-min-device-pixel-ratio: 0) {
:where(body) input[type="text"]::-webkit-calendar-picker-indicator, :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"])::-webkit-calendar-picker-indicator {
:where(body) input[type="password"]::-webkit-calendar-picker-indicator,
:where(body) input[type="email"]::-webkit-calendar-picker-indicator,
:where(body) input[type="number"]::-webkit-calendar-picker-indicator,
:where(body) input[type="search"]::-webkit-calendar-picker-indicator,
:where(body) input[type="tel"]::-webkit-calendar-picker-indicator,
:where(body) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:where(body) input[type="date"]::-webkit-calendar-picker-indicator,
:where(body) input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000)); filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000));
} }
:where(body) select:not([multiple]) optgroup, :where(body) :where(select:not([multiple])) optgroup,
:where(body) select:not([multiple]) option { :where(body) :where(select:not([multiple])) option {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
:where(body) select:not([multiple]) optgroup::before, :where(body) :where(select:not([multiple])) optgroup::before,
:where(body) select:not([multiple]) option::before { :where(body) :where(select:not([multiple])) option::before {
content: ""; content: "";
} }
} }
:where(body) .form-flex { :where(body) :where(.form-flex) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: stretch; justify-content: stretch;
} }
:where(body) .form-flex > :is(.form-flex-content, p) { :where(body) :where(.form-flex) > :where(.form-flex-content, p) {
margin: 0.5em 0; margin: 0.5em 0;
} }
:where(body) .form-flex > :is(.form-flex-choice, label) { :where(body) :where(.form-flex) > :where(.form-flex-choice, label) {
display: flex; display: flex;
gap: 1ex; gap: 1ex;
min-height: 1.675em; min-height: 1.675em;
} }
:where(body) .form-flex > :is(.form-flex-choice, label) > *:first-child, :where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):first-child,
:where(body) .form-flex > :is(.form-flex-choice, label) > *:last-child { :where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):last-child {
margin: auto 0; margin: auto 0;
flex-basis: 15%; flex-basis: 15%;
flex-grow: 0; flex-grow: 0;
@ -702,7 +540,7 @@
--bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-saturation: var(--bhsl-primary-saturation);
--bhsl-current-lightness: var(--bhsl-primary-lightness); --bhsl-current-lightness: var(--bhsl-primary-lightness);
} }
:where(body) .form-flex > :is(.form-flex-choice, label) > * { :where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*) {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -710,20 +548,20 @@
align-items: stretch; align-items: stretch;
gap: 1ex; gap: 1ex;
} }
:where(body) .form-flex > :is(.form-flex-choice, label) > *:first-child { :where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):first-child {
text-align: right; text-align: right;
display: block; display: block;
} }
:where(body) .form-flex > :is(.form-flex-choice, label) > *:last-child { :where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):last-child {
text-align: left; text-align: left;
display: block; display: block;
} }
:where(body) a { :where(body) :where(a) {
--bhsl-current-hue: var(--bhsl-link-hue); --bhsl-current-hue: var(--bhsl-link-hue);
--bhsl-current-saturation: var(--bhsl-link-saturation); --bhsl-current-saturation: var(--bhsl-link-saturation);
--bhsl-current-lightness: var(--bhsl-link-lightness); --bhsl-current-lightness: var(--bhsl-link-lightness);
} }
:where(body) i { :where(body) :where(i) {
font-style: var(--bfont-idiomatic-style); font-style: var(--bfont-idiomatic-style);
font-variant: var(--bfont-idiomatic-variant); font-variant: var(--bfont-idiomatic-variant);
font-weight: var(--bfont-idiomatic-weight); font-weight: var(--bfont-idiomatic-weight);
@ -731,7 +569,7 @@
line-height: var(--bfont-idiomatic-height); line-height: var(--bfont-idiomatic-height);
font-family: var(--bfont-idiomatic-family); font-family: var(--bfont-idiomatic-family);
} }
:where(body) em { :where(body) :where(em) {
font-style: var(--bfont-emphasis-style); font-style: var(--bfont-emphasis-style);
font-variant: var(--bfont-emphasis-variant); font-variant: var(--bfont-emphasis-variant);
font-weight: var(--bfont-emphasis-weight); font-weight: var(--bfont-emphasis-weight);
@ -739,7 +577,7 @@
line-height: var(--bfont-emphasis-height); line-height: var(--bfont-emphasis-height);
font-family: var(--bfont-emphasis-family); font-family: var(--bfont-emphasis-family);
} }
:where(body) b { :where(body) :where(b) {
font-style: var(--bfont-attention-style); font-style: var(--bfont-attention-style);
font-variant: var(--bfont-attention-variant); font-variant: var(--bfont-attention-variant);
font-weight: var(--bfont-attention-weight); font-weight: var(--bfont-attention-weight);
@ -747,7 +585,7 @@
line-height: var(--bfont-attention-height); line-height: var(--bfont-attention-height);
font-family: var(--bfont-attention-family); font-family: var(--bfont-attention-family);
} }
:where(body) strong { :where(body) :where(strong) {
font-style: var(--bfont-strong-style); font-style: var(--bfont-strong-style);
font-variant: var(--bfont-strong-variant); font-variant: var(--bfont-strong-variant);
font-weight: var(--bfont-strong-weight); font-weight: var(--bfont-strong-weight);
@ -755,20 +593,20 @@
line-height: var(--bfont-strong-height); line-height: var(--bfont-strong-height);
font-family: var(--bfont-strong-family); font-family: var(--bfont-strong-family);
} }
:where(body) ins { :where(body) :where(ins) {
--bhsl-current-hue: var(--bhsl-inserted-hue); --bhsl-current-hue: var(--bhsl-inserted-hue);
--bhsl-current-saturation: var(--bhsl-inserted-saturation); --bhsl-current-saturation: var(--bhsl-inserted-saturation);
--bhsl-current-lightness: var(--bhsl-inserted-lightness); --bhsl-current-lightness: var(--bhsl-inserted-lightness);
} }
:where(body) del { :where(body) :where(del) {
--bhsl-current-hue: var(--bhsl-deleted-hue); --bhsl-current-hue: var(--bhsl-deleted-hue);
--bhsl-current-saturation: var(--bhsl-deleted-saturation); --bhsl-current-saturation: var(--bhsl-deleted-saturation);
--bhsl-current-lightness: var(--bhsl-deleted-lightness); --bhsl-current-lightness: var(--bhsl-deleted-lightness);
} }
:where(body) code, :where(body) :where(code),
:where(body) pre, :where(body) :where(pre),
:where(body) kbd, :where(body) :where(kbd),
:where(body) samp { :where(body) :where(samp) {
font-style: var(--bfont-code-style); font-style: var(--bfont-code-style);
font-variant: var(--bfont-code-variant); font-variant: var(--bfont-code-variant);
font-weight: var(--bfont-code-weight); font-weight: var(--bfont-code-weight);
@ -776,20 +614,20 @@
line-height: var(--bfont-code-height); line-height: var(--bfont-code-height);
font-family: var(--bfont-code-family); font-family: var(--bfont-code-family);
} }
:where(body) pre { :where(body) :where(pre) {
overflow-x: scroll; overflow-x: scroll;
} }
:where(body) kbd, :where(body) :where(kbd),
:where(body) samp { :where(body) :where(samp) {
padding: 0 0.25ex; padding: 0 0.25ex;
} }
:where(body) kbd { :where(body) :where(kbd) {
background-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness)); background-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness));
--bhsl-current-hue: var(--bhsl-sample-input-hue); --bhsl-current-hue: var(--bhsl-sample-input-hue);
--bhsl-current-saturation: var(--bhsl-sample-input-saturation); --bhsl-current-saturation: var(--bhsl-sample-input-saturation);
--bhsl-current-lightness: var(--bhsl-sample-input-lightness); --bhsl-current-lightness: var(--bhsl-sample-input-lightness);
} }
:where(body) kbd kbd { :where(body) :where(kbd) :where(kbd) {
font-style: var(--bfont-boldcode-style); font-style: var(--bfont-boldcode-style);
font-variant: var(--bfont-boldcode-variant); font-variant: var(--bfont-boldcode-variant);
font-weight: var(--bfont-boldcode-weight); font-weight: var(--bfont-boldcode-weight);
@ -797,13 +635,13 @@
line-height: var(--bfont-boldcode-height); line-height: var(--bfont-boldcode-height);
font-family: var(--bfont-boldcode-family); font-family: var(--bfont-boldcode-family);
} }
:where(body) samp { :where(body) :where(samp) {
background-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness)); background-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness));
--bhsl-current-hue: var(--bhsl-sample-output-hue); --bhsl-current-hue: var(--bhsl-sample-output-hue);
--bhsl-current-saturation: var(--bhsl-sample-output-saturation); --bhsl-current-saturation: var(--bhsl-sample-output-saturation);
--bhsl-current-lightness: var(--bhsl-sample-output-lightness); --bhsl-current-lightness: var(--bhsl-sample-output-lightness);
} }
:where(body) samp samp { :where(body) :where(samp) :where(samp) {
font-style: var(--bfont-boldcode-style); font-style: var(--bfont-boldcode-style);
font-variant: var(--bfont-boldcode-variant); font-variant: var(--bfont-boldcode-variant);
font-weight: var(--bfont-boldcode-weight); font-weight: var(--bfont-boldcode-weight);
@ -811,7 +649,7 @@
line-height: var(--bfont-boldcode-height); line-height: var(--bfont-boldcode-height);
font-family: var(--bfont-boldcode-family); font-family: var(--bfont-boldcode-family);
} }
:where(body) var { :where(body) :where(var) {
font-style: var(--bfont-variable-style); font-style: var(--bfont-variable-style);
font-variant: var(--bfont-variable-variant); font-variant: var(--bfont-variable-variant);
font-weight: var(--bfont-variable-weight); font-weight: var(--bfont-variable-weight);
@ -819,7 +657,7 @@
line-height: var(--bfont-variable-height); line-height: var(--bfont-variable-height);
font-family: var(--bfont-variable-family); font-family: var(--bfont-variable-family);
} }
:where(body) cite { :where(body) :where(cite) {
font-style: var(--bfont-citation-style); font-style: var(--bfont-citation-style);
font-variant: var(--bfont-citation-variant); font-variant: var(--bfont-citation-variant);
font-weight: var(--bfont-citation-weight); font-weight: var(--bfont-citation-weight);
@ -827,7 +665,7 @@
line-height: var(--bfont-citation-height); line-height: var(--bfont-citation-height);
font-family: var(--bfont-citation-family); font-family: var(--bfont-citation-family);
} }
:where(body) dfn { :where(body) :where(dfn) {
font-style: var(--bfont-term-style); font-style: var(--bfont-term-style);
font-variant: var(--bfont-term-variant); font-variant: var(--bfont-term-variant);
font-weight: var(--bfont-term-weight); font-weight: var(--bfont-term-weight);
@ -838,6 +676,6 @@
--bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-saturation: var(--bhsl-primary-saturation);
--bhsl-current-lightness: var(--bhsl-primary-lightness); --bhsl-current-lightness: var(--bhsl-primary-lightness);
} }
:where(body) abbr { :where(body) :where(abbr) {
cursor: help; cursor: help;
} }

1
dist/base.root.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

137
dist/classic.module.css vendored
View file

@ -7,157 +7,122 @@
--b-outer-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); --b-outer-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
:where(.bluelib), :where(.bluelib),
:where(.bluelib) * { :where(.bluelib) :where(*) {
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15);
} }
:where(.bluelib) .header-1, :where(.bluelib) :where(h1, h2, h3, h4, h5, h6) {
:where(.bluelib) .header-2,
:where(.bluelib) .header-3,
:where(.bluelib) .header-4,
:where(.bluelib) .header-5,
:where(.bluelib) .header-6 {
text-shadow: var(--b-outer-shadow); text-shadow: var(--b-outer-shadow);
} }
:where(.bluelib) .panel .header-1, :where(.bluelib) :where(.panel) :where(h1, h2, h3, h4, h5, h6) {
:where(.bluelib) .panel .header-2,
:where(.bluelib) .panel .header-3,
:where(.bluelib) .panel .header-4,
:where(.bluelib) .panel .header-5,
:where(.bluelib) .panel .header-6 {
text-shadow: none; text-shadow: none;
} }
:where(.bluelib) .panel, :where(.bluelib) :where(.panel),
:where(.bluelib) .table.panel > .table-caption { :where(.bluelib) :where(.table):where(.panel) > :where(.table-caption) {
border-radius: var(--b-border-radius); border-radius: var(--b-border-radius);
box-shadow: var(--b-outer-shadow); box-shadow: var(--b-outer-shadow);
} }
:where(.bluelib) .panel .panel, :where(.bluelib) :where(.panel) :where(.panel),
:where(.bluelib) .table.panel > .table-caption .panel { :where(.bluelib) :where(.table):where(.panel) > :where(.table-caption) :where(.panel) {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075); background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
backdrop-filter: none; backdrop-filter: none;
box-shadow: none; box-shadow: none;
} }
:where(.bluelib) .modifier-mark, :where(.bluelib) :where(.modifier-mark),
:where(.bluelib) .element-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) {
:where(.bluelib) .panel.modifier-mark {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
} }
:where(.bluelib) .modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .element-mark .modifier-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .panel.modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
:where(.bluelib) .modifier-mark .element-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) {
:where(.bluelib) .element-mark .element-mark,
:where(.bluelib) .panel.modifier-mark .element-mark,
:where(.bluelib) .modifier-mark .panel.modifier-mark,
:where(.bluelib) .element-mark .panel.modifier-mark,
:where(.bluelib) .panel.modifier-mark .panel.modifier-mark {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
:where(.bluelib) .modifier-mark .modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .element-mark .modifier-mark .modifier-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .panel.modifier-mark .modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .modifier-mark .element-mark .modifier-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .element-mark .element-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
:where(.bluelib) .panel.modifier-mark .element-mark .modifier-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
:where(.bluelib) .modifier-mark .panel.modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark),
:where(.bluelib) .element-mark .panel.modifier-mark .modifier-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) {
:where(.bluelib) .panel.modifier-mark .panel.modifier-mark .modifier-mark,
:where(.bluelib) .modifier-mark .modifier-mark .element-mark,
:where(.bluelib) .element-mark .modifier-mark .element-mark,
:where(.bluelib) .panel.modifier-mark .modifier-mark .element-mark,
:where(.bluelib) .modifier-mark .element-mark .element-mark,
:where(.bluelib) .element-mark .element-mark .element-mark,
:where(.bluelib) .panel.modifier-mark .element-mark .element-mark,
:where(.bluelib) .modifier-mark .panel.modifier-mark .element-mark,
:where(.bluelib) .element-mark .panel.modifier-mark .element-mark,
:where(.bluelib) .panel.modifier-mark .panel.modifier-mark .element-mark,
:where(.bluelib) .modifier-mark .modifier-mark .panel.modifier-mark,
:where(.bluelib) .element-mark .modifier-mark .panel.modifier-mark,
:where(.bluelib) .panel.modifier-mark .modifier-mark .panel.modifier-mark,
:where(.bluelib) .modifier-mark .element-mark .panel.modifier-mark,
:where(.bluelib) .element-mark .element-mark .panel.modifier-mark,
:where(.bluelib) .panel.modifier-mark .element-mark .panel.modifier-mark,
:where(.bluelib) .modifier-mark .panel.modifier-mark .panel.modifier-mark,
:where(.bluelib) .element-mark .panel.modifier-mark .panel.modifier-mark,
:where(.bluelib) .panel.modifier-mark .panel.modifier-mark .panel.modifier-mark {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
} }
:where(.bluelib) .modifier-todo, :where(.bluelib) :where(.modifier-todo),
:where(.bluelib) .panel.modifier-todo { :where(.bluelib) :where(.panel):where(.modifier-todo) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); 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)); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
} }
:where(.bluelib) .modifier-todo .panel, :where(.bluelib) :where(.modifier-todo) :where(.panel),
:where(.bluelib) .panel.modifier-todo .panel { :where(.bluelib) :where(.panel):where(.modifier-todo) :where(.panel) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); 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)); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
} }
:where(.bluelib) .table.panel { :where(.bluelib) :where(.table):where(.panel) {
border-radius: 0; border-radius: 0;
} }
:where(.bluelib) .table.panel > .table-caption { :where(.bluelib) :where(.table):where(.panel) > :where(.table-caption) {
border-radius: 0; border-radius: 0;
box-shadow: var(--b-outer-shadow); box-shadow: var(--b-outer-shadow);
} }
:where(.bluelib) .table.panel-dialog > .table-caption { :where(.bluelib) :where(.table):where(.panel-dialog) > :where(.table-caption) {
border-bottom-width: 2px; border-bottom-width: 2px;
} }
:where(.bluelib) .input { :where(.bluelib) :where(.input) {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.025); background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.025);
} }
:where(.bluelib) .input:hover { :where(.bluelib) :where(.input):hover {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.05); background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.05);
} }
:where(.bluelib) .input:active { :where(.bluelib) :where(.input):active {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075); background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
} }
:where(.bluelib) .input-field, :where(.bluelib) :where(.input-field),
:where(.bluelib) .input-select { :where(.bluelib) :where(.input-select) {
border-radius: var(--b-border-radius) var(--b-border-radius) 0 0; border-radius: var(--b-border-radius) var(--b-border-radius) 0 0;
} }
:where(.bluelib) .input-area, :where(.bluelib) :where(.input-area),
:where(.bluelib) .input-multiselect { :where(.bluelib) :where(.input-multiselect) {
border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0; border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
} }
:where(.bluelib) .input-button { :where(.bluelib) :where(.input-button) {
border-radius: var(--b-border-radius); border-radius: var(--b-border-radius);
} }
:where(.bluelib) .list-unordered > *::marker, :where(.bluelib) :where(.list-unordered) > *::marker,
:where(.bluelib) .list-ordered > *::marker { :where(.bluelib) :where(.list-ordered) > *::marker {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5);
} }
:where(.bluelib) .glossary-summary { :where(.bluelib) :where(.glossary-summary) {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
} }
:where(.bluelib) .glossary-summary::marker { :where(.bluelib) :where(.glossary-summary)::marker {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5);
} }
:where(.bluelib) .glossary-summary:hover { :where(.bluelib) :where(.glossary-summary):hover {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
} }
:where(.bluelib) .glossary-summary:hover::marker { :where(.bluelib) :where(.glossary-summary):hover::marker {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
} }
:where(.bluelib) .glossary-summary:active::marker { :where(.bluelib) :where(.glossary-summary):active::marker {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
} }
:where(.bluelib) .text-anchor:hover { :where(.bluelib) :where(.text-anchor):hover {
color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 20%) / 1); color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 20%) / 1);
} }
:where(.bluelib) .text-anchor:active { :where(.bluelib) :where(.text-anchor):active {
color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 40%) / 1); color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 40%) / 1);
} }
:where(.bluelib) .text-input, :where(.bluelib) :where(.text-input),
:where(.bluelib) .text-output { :where(.bluelib) :where(.text-output) {
border-radius: calc(var(--b-border-radius) / 4); border-radius: calc(var(--b-border-radius) / 4);
} }
:where(.bluelib) .text-variable { :where(.bluelib) :where(.text-variable) {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
} }
:where(.bluelib) .text-quote::before, :where(.bluelib) :where(.text-quote)::before,
:where(.bluelib) .text-quote::after { :where(.bluelib) :where(.text-quote)::after {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
} }
:where(.bluelib) .text-ruby-annotation { :where(.bluelib) :where(.text-ruby-annotation) {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
} }

1
dist/classic.module.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

155
dist/classic.root.css vendored
View file

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

1
dist/classic.root.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
dist/colors-amber.module.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(.bluelib){--bhsl-background-hue:0deg;--bhsl-background-saturation:8%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:19deg;--bhsl-foreground-saturation:91%;--bhsl-foreground-lightness:46%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:42%;--bhsl-primary-lightness:94%;--bhsl-link-hue:50deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:80%;--bhsl-mark-foreground-hue:19deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:19deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:66%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:66%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:66%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:66%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:66%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:66%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

1
dist/colors-amber.root.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(body){--bhsl-background-hue:0deg;--bhsl-background-saturation:8%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:19deg;--bhsl-foreground-saturation:91%;--bhsl-foreground-lightness:46%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:42%;--bhsl-primary-lightness:94%;--bhsl-link-hue:50deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:80%;--bhsl-mark-foreground-hue:19deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:19deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:66%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:66%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:66%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:66%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:66%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:66%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

24
dist/colors-pixeldawn.module.css vendored
View file

@ -75,21 +75,21 @@
--b-border-radius: 0; --b-border-radius: 0;
--b-outer-shadow: none; --b-outer-shadow: none;
} }
:where(.bluelib):is(:where(.bluelib)) .header-1, :where(.bluelib):is(:where(.bluelib)) :where(.header-1),
:where(.bluelib):is(:where(.bluelib)) .header-2, :where(.bluelib):is(:where(.bluelib)) :where(.header-2),
:where(.bluelib):is(:where(.bluelib)) .header-3, :where(.bluelib):is(:where(.bluelib)) :where(.header-3),
:where(.bluelib):is(:where(.bluelib)) .header-4, :where(.bluelib):is(:where(.bluelib)) :where(.header-4),
:where(.bluelib):is(:where(.bluelib)) .header-5, :where(.bluelib):is(:where(.bluelib)) :where(.header-5),
:where(.bluelib):is(:where(.bluelib)) .header-6 { :where(.bluelib):is(:where(.bluelib)) :where(.header-6) {
color: white; color: white;
text-shadow: 2px 2px 0 #9832ce; text-shadow: 2px 2px 0 #9832ce;
} }
:where(.bluelib):is(:where(.bluelib)) .panel .header-1, :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-1),
:where(.bluelib):is(:where(.bluelib)) .panel .header-2, :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-2),
:where(.bluelib):is(:where(.bluelib)) .panel .header-3, :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-3),
:where(.bluelib):is(:where(.bluelib)) .panel .header-4, :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-4),
:where(.bluelib):is(:where(.bluelib)) .panel .header-5, :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-5),
:where(.bluelib):is(:where(.bluelib)) .panel .header-6 { :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-6) {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
text-shadow: none; text-shadow: none;
} }

1
dist/colors-pixeldawn.module.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(.bluelib){--bhsl-background-hue:14deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:74%;--bhsl-foreground-hue:340deg;--bhsl-foreground-saturation:40%;--bhsl-foreground-lightness:20%;--bhsl-primary-hue:220deg;--bhsl-primary-saturation:92%;--bhsl-primary-lightness:11%;--bhsl-link-hue:237deg;--bhsl-link-saturation:80%;--bhsl-link-lightness:41%;--bhsl-mark-foreground-hue:194deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:194deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:15%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:15%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:15%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:15%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:15%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:15%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}:where(.bluelib):is(:where(.bluelib)){--b-panel-initial-opacity:0.5;--b-border-radius:0;--b-outer-shadow:none}:where(.bluelib):is(:where(.bluelib)) :where(.header-1),:where(.bluelib):is(:where(.bluelib)) :where(.header-2),:where(.bluelib):is(:where(.bluelib)) :where(.header-3),:where(.bluelib):is(:where(.bluelib)) :where(.header-4),:where(.bluelib):is(:where(.bluelib)) :where(.header-5),:where(.bluelib):is(:where(.bluelib)) :where(.header-6){color:#fff;text-shadow:2px 2px 0 #9832ce}:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-1),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-2),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-3),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-4),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-5),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-6){color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));text-shadow:none}

24
dist/colors-pixeldawn.root.css vendored
View file

@ -75,21 +75,21 @@
--b-border-radius: 0; --b-border-radius: 0;
--b-outer-shadow: none; --b-outer-shadow: none;
} }
:where(body):is(:where(body)) h1, :where(body):is(:where(body)) :where(h1),
:where(body):is(:where(body)) h2, :where(body):is(:where(body)) :where(h2),
:where(body):is(:where(body)) h3, :where(body):is(:where(body)) :where(h3),
:where(body):is(:where(body)) h4, :where(body):is(:where(body)) :where(h4),
:where(body):is(:where(body)) h5, :where(body):is(:where(body)) :where(h5),
:where(body):is(:where(body)) h6 { :where(body):is(:where(body)) :where(h6) {
color: white; color: white;
text-shadow: 2px 2px 0 #9832ce; text-shadow: 2px 2px 0 #9832ce;
} }
:where(body):is(:where(body)) .panel h1, :where(body):is(:where(body)) :where(.panel) :where(h1),
:where(body):is(:where(body)) .panel h2, :where(body):is(:where(body)) :where(.panel) :where(h2),
:where(body):is(:where(body)) .panel h3, :where(body):is(:where(body)) :where(.panel) :where(h3),
:where(body):is(:where(body)) .panel h4, :where(body):is(:where(body)) :where(.panel) :where(h4),
:where(body):is(:where(body)) .panel h5, :where(body):is(:where(body)) :where(.panel) :where(h5),
:where(body):is(:where(body)) .panel h6 { :where(body):is(:where(body)) :where(.panel) :where(h6) {
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
text-shadow: none; text-shadow: none;
} }

1
dist/colors-pixeldawn.root.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(body){--bhsl-background-hue:14deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:74%;--bhsl-foreground-hue:340deg;--bhsl-foreground-saturation:40%;--bhsl-foreground-lightness:20%;--bhsl-primary-hue:220deg;--bhsl-primary-saturation:92%;--bhsl-primary-lightness:11%;--bhsl-link-hue:237deg;--bhsl-link-saturation:80%;--bhsl-link-lightness:41%;--bhsl-mark-foreground-hue:194deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:194deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:15%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:15%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:15%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:15%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:15%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:15%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}:where(body):is(:where(body)){--b-panel-initial-opacity:0.5;--b-border-radius:0;--b-outer-shadow:none}:where(body):is(:where(body)) :where(h1),:where(body):is(:where(body)) :where(h2),:where(body):is(:where(body)) :where(h3),:where(body):is(:where(body)) :where(h4),:where(body):is(:where(body)) :where(h5),:where(body):is(:where(body)) :where(h6){color:#fff;text-shadow:2px 2px 0 #9832ce}:where(body):is(:where(body)) :where(.panel) :where(h1),:where(body):is(:where(body)) :where(.panel) :where(h2),:where(body):is(:where(body)) :where(.panel) :where(h3),:where(body):is(:where(body)) :where(.panel) :where(h4),:where(body):is(:where(body)) :where(.panel) :where(h5),:where(body):is(:where(body)) :where(.panel) :where(h6){color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));text-shadow:none}

1
dist/colors-purplestar.module.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(.bluelib){--bhsl-background-hue:262deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:13%;--bhsl-foreground-hue:262deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:78%;--bhsl-primary-hue:53deg;--bhsl-primary-saturation:100%;--bhsl-primary-lightness:100%;--bhsl-link-hue:53deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:72%;--bhsl-mark-foreground-hue:53deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:53deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:72%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

1
dist/colors-purplestar.root.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(body){--bhsl-background-hue:262deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:13%;--bhsl-foreground-hue:262deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:78%;--bhsl-primary-hue:53deg;--bhsl-primary-saturation:100%;--bhsl-primary-lightness:100%;--bhsl-link-hue:53deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:72%;--bhsl-mark-foreground-hue:53deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:53deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:72%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

1
dist/colors-royalblue.module.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(.bluelib){--bhsl-background-hue:224deg;--bhsl-background-saturation:64%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:212deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:81%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:0%;--bhsl-primary-lightness:100%;--bhsl-link-hue:180deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:40%;--bhsl-mark-foreground-hue:32deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:32deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

1
dist/colors-royalblue.root.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(body){--bhsl-background-hue:224deg;--bhsl-background-saturation:64%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:212deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:81%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:0%;--bhsl-primary-lightness:100%;--bhsl-link-hue:180deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:40%;--bhsl-mark-foreground-hue:32deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:32deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

1
dist/fonts-fira-ghpages.module.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
dist/fonts-fira-ghpages.root.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
dist/fun.module.css vendored
View file

@ -15,6 +15,6 @@
--bhsl-current-hue: 360deg; --bhsl-current-hue: 360deg;
} }
} }
.animation-rainbow { :where(.animation-rainbow) {
animation: 2s linear infinite rainbow; animation: 2s linear infinite rainbow;
} }

1
dist/fun.module.min.css vendored Normal file
View file

@ -0,0 +1 @@
@keyframes rainbow{0%{--bhsl-current-hue:0deg}100%{--bhsl-current-hue:360deg}}:where(.animation-rainbow){animation:2s linear infinite rainbow}

2
dist/fun.root.css vendored
View file

@ -15,6 +15,6 @@
--bhsl-current-hue: 360deg; --bhsl-current-hue: 360deg;
} }
} }
.rainbow { :where(.rainbow) {
animation: 2s linear infinite rainbow; animation: 2s linear infinite rainbow;
} }

1
dist/fun.root.min.css vendored Normal file
View file

@ -0,0 +1 @@
@keyframes rainbow{0%{--bhsl-current-hue:0deg}100%{--bhsl-current-hue:360deg}}:where(.rainbow){animation:2s linear infinite rainbow}

73
dist/glass.module.css vendored
View file

@ -8,76 +8,51 @@
--b-panel-nested-opacity: 0.075; --b-panel-nested-opacity: 0.075;
} }
@supports (backdrop-filter: blur(var(--b-panel-blur))) { @supports (backdrop-filter: blur(var(--b-panel-blur))) {
:where(.bluelib) .panel, :where(.bluelib) :where(.panel),
:where(.bluelib) .table.panel > .table-caption { :where(.bluelib) :where(.table):where(.panel) > :where(.table-caption) {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity)); 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))); backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
} }
:where(.bluelib) .panel .panel, :where(.bluelib) :where(.panel) :where(.panel),
:where(.bluelib) .table.panel > .table-caption .panel { :where(.bluelib) :where(.table):where(.panel) > :where(.table-caption) :where(.panel) {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity)); background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
backdrop-filter: none; backdrop-filter: none;
} }
:where(.bluelib) .modifier-mark, :where(.bluelib) :where(.modifier-mark),
:where(.bluelib) .element-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) {
:where(.bluelib) .panel.modifier-mark {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
backdrop-filter: none; backdrop-filter: none;
} }
:where(.bluelib) .modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .element-mark .modifier-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .panel.modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
:where(.bluelib) .modifier-mark .element-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) {
:where(.bluelib) .element-mark .element-mark,
:where(.bluelib) .panel.modifier-mark .element-mark,
:where(.bluelib) .modifier-mark .panel.modifier-mark,
:where(.bluelib) .element-mark .panel.modifier-mark,
:where(.bluelib) .panel.modifier-mark .panel.modifier-mark {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
:where(.bluelib) .modifier-mark .modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .element-mark .modifier-mark .modifier-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .panel.modifier-mark .modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .modifier-mark .element-mark .modifier-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) .element-mark .element-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
:where(.bluelib) .panel.modifier-mark .element-mark .modifier-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
:where(.bluelib) .modifier-mark .panel.modifier-mark .modifier-mark, :where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark),
:where(.bluelib) .element-mark .panel.modifier-mark .modifier-mark, :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) {
:where(.bluelib) .panel.modifier-mark .panel.modifier-mark .modifier-mark,
:where(.bluelib) .modifier-mark .modifier-mark .element-mark,
:where(.bluelib) .element-mark .modifier-mark .element-mark,
:where(.bluelib) .panel.modifier-mark .modifier-mark .element-mark,
:where(.bluelib) .modifier-mark .element-mark .element-mark,
:where(.bluelib) .element-mark .element-mark .element-mark,
:where(.bluelib) .panel.modifier-mark .element-mark .element-mark,
:where(.bluelib) .modifier-mark .panel.modifier-mark .element-mark,
:where(.bluelib) .element-mark .panel.modifier-mark .element-mark,
:where(.bluelib) .panel.modifier-mark .panel.modifier-mark .element-mark,
:where(.bluelib) .modifier-mark .modifier-mark .panel.modifier-mark,
:where(.bluelib) .element-mark .modifier-mark .panel.modifier-mark,
:where(.bluelib) .panel.modifier-mark .modifier-mark .panel.modifier-mark,
:where(.bluelib) .modifier-mark .element-mark .panel.modifier-mark,
:where(.bluelib) .element-mark .element-mark .panel.modifier-mark,
:where(.bluelib) .panel.modifier-mark .element-mark .panel.modifier-mark,
:where(.bluelib) .modifier-mark .panel.modifier-mark .panel.modifier-mark,
:where(.bluelib) .element-mark .panel.modifier-mark .panel.modifier-mark,
:where(.bluelib) .panel.modifier-mark .panel.modifier-mark .panel.modifier-mark {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
} }
:where(.bluelib) .modifier-todo, :where(.bluelib) :where(.modifier-todo),
:where(.bluelib) .panel.modifier-todo { :where(.bluelib) :where(.panel):where(.modifier-todo) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
} }
:where(.bluelib) .modifier-todo .panel, :where(.bluelib) :where(.modifier-todo) :where(.panel),
:where(.bluelib) .panel.modifier-todo .panel { :where(.bluelib) :where(.panel):where(.modifier-todo) :where(.panel) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
backdrop-filter: none; backdrop-filter: none;
} }
:where(.bluelib) .panel.modifier-todo { :where(.bluelib) :where(.panel):where(.modifier-todo) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / 0.3); background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / 0.3);
backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%); backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
} }
:where(.bluelib) .panel .panel.modifier-todo { :where(.bluelib) :where(.panel) :where(.panel):where(.modifier-todo) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
} }
} }

1
dist/glass.module.min.css vendored Normal file
View file

@ -0,0 +1 @@
:where(.bluelib){--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(.bluelib) :where(.panel),:where(.bluelib) :where(.table):where(.panel)>:where(.table-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(.bluelib) :where(.panel) :where(.panel),:where(.bluelib) :where(.table):where(.panel)>:where(.table-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(.bluelib) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));backdrop-filter:none}:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness))}:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness))}:where(.bluelib) :where(.modifier-todo),:where(.bluelib) :where(.panel):where(.modifier-todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}:where(.bluelib) :where(.modifier-todo) :where(.panel),:where(.bluelib) :where(.panel):where(.modifier-todo) :where(.panel){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));backdrop-filter:none}:where(.bluelib) :where(.panel):where(.modifier-todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / .3);backdrop-filter:blur(var(--b-panel-blur)) grayscale(100%)}:where(.bluelib) :where(.panel) :where(.panel):where(.modifier-todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}}

73
dist/glass.root.css vendored
View file

@ -8,76 +8,51 @@
--b-panel-nested-opacity: 0.075; --b-panel-nested-opacity: 0.075;
} }
@supports (backdrop-filter: blur(var(--b-panel-blur))) { @supports (backdrop-filter: blur(var(--b-panel-blur))) {
:where(body) .panel, :where(body) :where(.panel),
:where(body) table.panel > caption { :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)); 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))); backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
} }
:where(body) .panel .panel, :where(body) :where(.panel) :where(.panel),
:where(body) table.panel > caption .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)); background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
backdrop-filter: none; backdrop-filter: none;
} }
:where(body) .mark, :where(body) :where(mark, .mark),
:where(body) mark, :where(body) :where(.panel):where(mark, .mark) {
:where(body) .panel.mark {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
backdrop-filter: none; backdrop-filter: none;
} }
:where(body) .mark .mark, :where(body) :where(mark, .mark) :where(mark, .mark),
:where(body) mark .mark, :where(body) :where(.panel):where(mark, .mark) :where(mark, .mark),
:where(body) .panel.mark .mark, :where(body) :where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) .mark mark, :where(body) :where(.panel):where(mark, .mark) :where(.panel):where(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)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
:where(body) .mark .mark .mark, :where(body) :where(mark, .mark) :where(mark, .mark) :where(mark, .mark),
:where(body) mark .mark .mark, :where(body) :where(.panel):where(mark, .mark) :where(mark, .mark) :where(mark, .mark),
:where(body) .panel.mark .mark .mark, :where(body) :where(mark, .mark) :where(.panel):where(mark, .mark) :where(mark, .mark),
:where(body) .mark mark .mark, :where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) :where(mark, .mark),
:where(body) mark mark .mark, :where(body) :where(mark, .mark) :where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) .panel.mark mark .mark, :where(body) :where(.panel):where(mark, .mark) :where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) .mark .panel.mark .mark, :where(body) :where(mark, .mark) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) mark .panel.mark .mark, :where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) :where(.panel):where(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)); background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
} }
:where(body) .todo, :where(body) :where(.todo),
:where(body) .panel.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)); background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
} }
:where(body) .todo .panel, :where(body) :where(.todo) :where(.panel),
:where(body) .panel.todo .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)); background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
backdrop-filter: none; backdrop-filter: none;
} }
:where(body) .panel.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) / 0.3); background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / 0.3);
backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%); backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
} }
:where(body) .panel .panel.todo { :where(body) :where(.panel) :where(.panel):where(.todo) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
} }
} }

1
dist/glass.root.min.css vendored Normal file
View file

@ -0,0 +1 @@
: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(.panel):where(mark,.mark),:where(body) :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(.panel):where(mark,.mark) :where(.panel):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(mark,.mark) :where(mark,.mark){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness))}:where(body) :where(.panel):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(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(mark,.mark) :where(.panel):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(.panel):where(mark,.mark),:where(body) :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(mark,.mark) :where(mark,.mark) :where(mark,.mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness))}:where(body) :where(.panel):where(.todo),:where(body) :where(.todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}:where(body) :where(.panel):where(.todo) :where(.panel),:where(body) :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}:where(body) :where(.panel):where(.todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / .3);backdrop-filter:blur(var(--b-panel-blur)) grayscale(100%)}:where(body) :where(.panel) :where(.panel):where(.todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}}

20
examples/index.css
View file

@ -37,27 +37,11 @@
} }
} }
#body .chapter-1 > .panel, #body :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
#body .chapter-2 > .panel,
#body .chapter-3 > .panel,
#body .chapter-4 > .panel,
#body .chapter-5 > .panel,
#body .chapter-6 > .panel,
#body .chapter-7 > .panel,
#body .chapter-8 > .panel,
#body .chapter-9 > .panel {
min-width: 360px; min-width: 360px;
} }
#body .panel .chapter-1 > .panel, #body .panel :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
#body .panel .chapter-2 > .panel,
#body .panel .chapter-3 > .panel,
#body .panel .chapter-4 > .panel,
#body .panel .chapter-5 > .panel,
#body .panel .chapter-6 > .panel,
#body .panel .chapter-7 > .panel,
#body .panel .chapter-8 > .panel,
#body .panel .chapter-9 > .panel {
min-width: unset; min-width: unset;
} }

8
examples/index.html
View file

@ -222,7 +222,7 @@
</dd> </dd>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-purplestar:root', 'kazuend-2KXEb_8G5vo-unsplash-edited.jpg')"> Purple Star</label></dt> <dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-purplestar:root', 'kazuend-2KXEb_8G5vo-unsplash-edited.jpg')"> Purple Star</label></dt>
<dd> <dd>
<mark>Experimental.</mark> A purple-ish theme for <a href="https://www.starshard.studio">Star Shard Studio</a>. A purple-ish theme for <a href="https://www.starshard.studio">Star Shard Studio</a>.
</dd> </dd>
</dl> </dl>
</dd> </dd>
@ -270,6 +270,12 @@
<div class="panel"> <div class="panel">
<code>&lt;link<wbr> rel=&quot;stylesheet&quot;<wbr> href=&quot;https://unpkg.com/@steffo/bluelib<wbr>@<var>VERSION</var><wbr>/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.css&quot;<wbr> type=&quot;text/css&quot;<wbr>/&gt;</code> <code>&lt;link<wbr> rel=&quot;stylesheet&quot;<wbr> href=&quot;https://unpkg.com/@steffo/bluelib<wbr>@<var>VERSION</var><wbr>/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.css&quot;<wbr> type=&quot;text/css&quot;<wbr>/&gt;</code>
</div> </div>
<p>
To save a bit extra bandwidth, at the cost of harder-to-read stylesheets, you can use minified stylesheets, like this:
</p>
<div class="panel">
<code>&lt;link<wbr> rel=&quot;stylesheet&quot;<wbr> href=&quot;https://unpkg.com/@steffo/bluelib<wbr>@<var>VERSION</var><wbr>/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.min.css&quot;<wbr> type=&quot;text/css&quot;<wbr>/&gt;</code>
</div>
</section> </section>
<section class="panel box todo" id="panel-installtbd"> <section class="panel box todo" id="panel-installtbd">
<h3> <h3>

5
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@steffo/bluelib", "name": "@steffo/bluelib",
"version": "7.2.0", "version": "8.0.0",
"description": "A stylesheet that supports fast dynamic recoloring via CSS variables", "description": "A stylesheet that supports fast dynamic recoloring via CSS variables",
"scripts": { "scripts": {
"dev": "web-dev-server --watch", "dev": "web-dev-server --watch",
@ -56,6 +56,7 @@
"private": false, "private": false,
"devDependencies": { "devDependencies": {
"@web/dev-server": "^0.1.34", "@web/dev-server": "^0.1.34",
"less": "^4.1.3" "less": "^4.1.3",
"less-plugin-clean-css": "^1.5.1"
} }
} }

115
src/rulesets/base.less
View file

@ -71,9 +71,12 @@
//<editor-fold desc="Rules: Page"> //<editor-fold desc="Rules: Page">
@{page-header}, @{page-footer} {
text-align: center;
}
@{page-footer} { @{page-footer} {
margin: 1rem 0; margin: 1rem 0;
text-align: center;
font-size: x-small; font-size: x-small;
} }
@ -123,7 +126,7 @@
font-size: 1.75em; font-size: 1.75em;
} }
@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} { @{header} {
text-align: center; text-align: center;
.map-hsl-group(current; primary); .map-hsl-group(current; primary);
@ -194,33 +197,6 @@
//<editor-fold desc="Rules: Chapters"> //<editor-fold desc="Rules: Chapters">
@{chapter-0}, @{chapter-1}, @{chapter-2}, @{chapter-3}, @{chapter-4}, @{chapter-5}, @{chapter-6}, @{chapter-7}, @{chapter-8}, @{chapter-9} {
// Be a row flexbox to separate elements in columns
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 8px;
justify-content: center;
align-items: stretch;
// Add the gap as a vertical margin, so that multiple chapters can be placed next to each other
margin: 8px 0;
> @{all} {
// Allow all children to grow
flex-grow: 1;
// But not to shrink
flex-shrink: 0;
}
> @{header-1}, > @{header-2}, > @{header-3}, > @{header-4}, > @{header-5}, > @{header-6} {
// Headings should fill up all horizontal space available and force a wrap
flex-basis: 100%;
margin-top: 1.2em;
}
}
// Chapter zero means that the number of panels is not set and they should not be wrapped // Chapter zero means that the number of panels is not set and they should not be wrapped
@{chapter-0} { @{chapter-0} {
flex-wrap: nowrap; flex-wrap: nowrap;
@ -278,6 +254,33 @@
} }
} }
@{chapter} {
// Be a row flexbox to separate elements in columns
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 8px;
justify-content: center;
align-items: stretch;
// Add the gap as a vertical margin, so that multiple chapters can be placed next to each other
margin: 8px 0;
> @{all} {
// Allow all children to grow
flex-grow: 1;
// But not to shrink
flex-shrink: 0;
}
> @{header} {
// Headings should fill up all horizontal space available and force a wrap
flex-basis: 100%;
margin-top: 1.2em;
}
}
//</editor-fold> //</editor-fold>
/// ===== Separators ===== /// ===== Separators =====
@ -513,7 +516,7 @@
opacity: 0.3; opacity: 0.3;
} }
@{modifier-mark}, @{element-mark} { @{modifier-mark} {
// Assign marks to their own font group // Assign marks to their own font group
.use-font-group(mark); .use-font-group(mark);
@ -522,12 +525,12 @@
.map-hsl-group(current; mark-foreground); .map-hsl-group(current; mark-foreground);
// If applied twice, go back to "normality" // If applied twice, go back to "normality"
@{modifier-mark}, @{element-mark} { @{modifier-mark} {
background-color: .hsl-group(background)[@c]; background-color: .hsl-group(background)[@c];
.map-hsl-group(current; foreground); .map-hsl-group(current; foreground);
// If applied thrice, mark again and not anymore // If applied thrice, mark again and not anymore
@{modifier-mark}, @{element-mark} { @{modifier-mark} {
background-color: .hsl-group(mark-background)[@c]; background-color: .hsl-group(mark-background)[@c];
.map-hsl-group(current; mark-foreground); .map-hsl-group(current; mark-foreground);
} }
@ -710,30 +713,28 @@
@{input-range} { @{input-range} {
padding: 0; padding: 0;
/* // appearance: none;
appearance: none; //
// &::-moz-range-thumb {
&::-moz-range-thumb { // width: 0;
width: 0; // border-radius: 0;
border-radius: 0; // border-style: outset;
border-style: outset; //
// border-color: .hsl-group(current)[@c];
border-color: .hsl-group(current)[@c]; // border-width: 4px;
border-width: 4px; //
// background-color: .hsl-group(primary)[@c];
background-color: .hsl-group(primary)[@c]; // }
} //
// &::-moz-range-track {
&::-moz-range-track { // height: 0.125em;
height: 0.125em; // background-color: .hsl-group(current)[@c];
background-color: .hsl-group(current)[@c]; // }
} //
// &::-moz-range-progress {
&::-moz-range-progress { // height: 0.5em;
height: 0.5em; // background-color: .hsl-group(current)[@c];
background-color: .hsl-group(current)[@c]; // }
}
*/
} }
@{input-button} { @{input-button} {
@ -900,6 +901,4 @@
} }
//</editor-fold> //</editor-fold>
} }

10
src/rulesets/classic.less
View file

@ -19,13 +19,13 @@
} }
// Give headers a slight shadow so they are easier to read outside of panels // Give headers a slight shadow so they are easier to read outside of panels
@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} { @{header} {
text-shadow: var(--b-outer-shadow); text-shadow: var(--b-outer-shadow);
} }
// But do not give it to headers inside panels // But do not give it to headers inside panels
@{panel} { @{panel} {
@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} { @{header} {
text-shadow: none; text-shadow: none;
} }
} }
@ -45,15 +45,15 @@
} }
// Make sure mark still works, even considering specificity // Make sure mark still works, even considering specificity
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c]; background-color: .hsl-group(mark-background)[@c];
// Make the modifier toggle properly // Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c]; background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly // Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c]; background-color: .hsl-group(mark-background)[@c];
} }
} }

6
src/rulesets/glass.less
View file

@ -30,16 +30,16 @@
} }
// Make sure mark still works, even considering specificity // Make sure mark still works, even considering specificity
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c]; background-color: .hsl-group(mark-background)[@c];
backdrop-filter: none; backdrop-filter: none;
// Make the modifier toggle properly // Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c]; background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly // Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c]; background-color: .hsl-group(mark-background)[@c];
} }
} }

211
src/selectorsets/module.less
View file

@ -1,123 +1,124 @@
@bluelib: ~":where(.bluelib)"; @bluelib: ~":where(.bluelib)";
@all: ~"*"; @all: ~":where(*)";
@page-main: ~".page-main"; @page-main: ~":where(.page-main)";
@page-aside: ~".page-aside"; @page-aside: ~":where(.page-aside)";
@page-header: ~".page-header"; @page-header: ~":where(.page-header)";
@page-footer: ~".page-footer"; @page-footer: ~":where(.page-footer)";
@border-top: ~".border-top"; @border-top: ~":where(.border-top)";
@border-right: ~".border-right"; @border-right: ~":where(.border-right)";
@border-bottom: ~".border-bottom"; @border-bottom: ~":where(.border-bottom)";
@border-left: ~".border-left"; @border-left: ~":where(.border-left)";
@float-top: ~".float-top"; @float-top: ~":where(.float-top)";
@float-right: ~".float-right"; @float-right: ~":where(.float-right)";
@float-bottom: ~".float-bottom"; @float-bottom: ~":where(.float-bottom)";
@float-left: ~".float-left"; @float-left: ~":where(.float-left)";
@float-hcenter: ~".float-hcenter"; @float-hcenter: ~":where(.float-hcenter)";
@float-vcenter: ~".float-vcenter"; @float-vcenter: ~":where(.float-vcenter)";
@header-1: ~".header-1"; @header: ~":where(h1, h2, h3, h4, h5, h6)";
@header-2: ~".header-2"; @header-1: ~":where(.header-1)";
@header-3: ~".header-3"; @header-2: ~":where(.header-2)";
@header-4: ~".header-4"; @header-3: ~":where(.header-3)";
@header-5: ~".header-5"; @header-4: ~":where(.header-4)";
@header-6: ~".header-6"; @header-5: ~":where(.header-5)";
@header-6: ~":where(.header-6)";
@panel: ~".panel"; @panel: ~":where(.panel)";
@panel-box: ~".panel-box"; @panel-box: ~":where(.panel-box)";
@panel-dialog: ~".panel-dialog"; @panel-dialog: ~":where(.panel-dialog)";
@panel-parenthesis: ~".panel-parenthesis"; @panel-parenthesis: ~":where(.panel-parenthesis)";
@chapter-0: ~".chapter-0"; @chapter: ~":where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9)";
@chapter-1: ~".chapter-1"; @chapter-0: ~":where(.chapter-0)";
@chapter-2: ~".chapter-2"; @chapter-1: ~":where(.chapter-1)";
@chapter-3: ~".chapter-3"; @chapter-2: ~":where(.chapter-2)";
@chapter-4: ~".chapter-4"; @chapter-3: ~":where(.chapter-3)";
@chapter-5: ~".chapter-5"; @chapter-4: ~":where(.chapter-4)";
@chapter-6: ~".chapter-6"; @chapter-5: ~":where(.chapter-5)";
@chapter-7: ~".chapter-7"; @chapter-6: ~":where(.chapter-6)";
@chapter-8: ~".chapter-8"; @chapter-7: ~":where(.chapter-7)";
@chapter-9: ~".chapter-9"; @chapter-8: ~":where(.chapter-8)";
@chapter-9: ~":where(.chapter-9)";
@separator: ~".separator"; @separator: ~":where(.separator)";
@separator-light: ~".separator-light"; @separator-light: ~":where(.separator-light)";
@separator-heavy: ~".separator-heavy"; @separator-heavy: ~":where(.separator-heavy)";
@image: ~".image"; @image: ~":where(.image)";
@image-limit-half: ~".image-limit-half"; @image-limit-half: ~":where(.image-limit-half)";
@image-limit-quarter: ~".image-limit-quarter"; @image-limit-quarter: ~":where(.image-limit-quarter)";
@figure: ~".figure"; @figure: ~":where(.figure)";
@figure-caption: ~".figure-caption"; @figure-caption: ~":where(.figure-caption)";
@table: ~".table"; @table: ~":where(.table)";
@table-caption: ~".table-caption"; @table-caption: ~":where(.table-caption)";
@table-caption-top: ~".table-caption-top"; @table-caption-top: ~":where(.table-caption-top)";
@table-caption-bottom: ~".table-caption-bottom"; @table-caption-bottom: ~":where(.table-caption-bottom)";
@table-header: ~".table-header"; @table-header: ~":where(.table-header)";
@table-body: ~".table-body"; @table-body: ~":where(.table-body)";
@table-footer: ~".table-footer"; @table-footer: ~":where(.table-footer)";
@table-row: ~".table-row"; @table-row: ~":where(.table-row)";
@table-head: ~".table-head"; @table-head: ~":where(.table-head)";
@table-data: ~".table-data"; @table-data: ~":where(.table-data)";
@list-unordered: ~".list-unordered"; @list-unordered: ~":where(.list-unordered)";
@list-ordered: ~".list-ordered"; @list-ordered: ~":where(.list-ordered)";
@glossary-term: ~".glossary-term"; @glossary-term: ~":where(.glossary-term)";
@glossary-description: ~".glossary-description"; @glossary-description: ~":where(.glossary-description)";
@glossary-details: ~".glossary-details"; @glossary-details: ~":where(.glossary-details)";
@glossary-summary: ~".glossary-summary"; @glossary-summary: ~":where(.glossary-summary)";
@modifier-fade: ~".modifier-fade"; @modifier-fade: ~":where(.modifier-fade)";
@modifier-mark: ~".modifier-mark"; @modifier-mark: ~":where(.modifier-mark)";
@element-mark: ~".element-mark"; @modifier-todo: ~":where(.modifier-todo)";
@modifier-todo: ~".modifier-todo"; @property-disabled: ~":where(.property-disabled)";
@property-disabled: ~".property-disabled"; @modifier-red: ~":where(.modifier-red)";
@modifier-red: ~".modifier-red"; @modifier-yellow: ~":where(.modifier-yellow)";
@modifier-yellow: ~".modifier-yellow"; @modifier-green: ~":where(.modifier-green)";
@modifier-green: ~".modifier-green"; @modifier-cyan: ~":where(.modifier-cyan)";
@modifier-cyan: ~".modifier-cyan"; @modifier-blue: ~":where(.modifier-blue)";
@modifier-blue: ~".modifier-blue"; @modifier-magenta: ~":where(.modifier-magenta)";
@modifier-magenta: ~".modifier-magenta";
@input: ~".input"; @input: ~":where(.input)";
@input-field: ~".input-field"; @input-field: ~":where(.input-field)";
@input-area: ~".input-area"; @input-area: ~":where(.input-area)";
@input-select: ~".input-select"; @input-select: ~":where(.input-select)";
@input-multiselect: ~".input-multiselect"; @input-multiselect: ~":where(.input-multiselect)";
@input-radio: ~".input-radio"; @input-radio: ~":where(.input-radio)";
@input-checkbox: ~".input-checkbox"; @input-checkbox: ~":where(.input-checkbox)";
@input-color: ~".input-color"; @input-color: ~":where(.input-color)";
@input-file: ~".input-file"; @input-file: ~":where(.input-file)";
@input-range: ~".input-range"; @input-range: ~":where(.input-range)";
@input-button: ~".input-button"; @input-button: ~":where(.input-button)";
@form-flex: ~'.form-flex'; @form-flex: ~":where(.form-flex)";
@form-flex-content: ~'.form-flex-content'; @form-flex-content: ~":where(.form-flex-content)";
@form-flex-choice: ~'.form-flex-choice'; @form-flex-choice: ~":where(.form-flex-choice)";
@text-anchor: ~".text-anchor"; @text-anchor: ~":where(.text-anchor)";
@text-idiomatic: ~".text-idiomatic"; @text-idiomatic: ~":where(.text-idiomatic)";
@text-emphasis: ~".text-emphasis"; @text-emphasis: ~":where(.text-emphasis)";
@text-attention: ~".text-attention"; @text-attention: ~":where(.text-attention)";
@text-strong: ~".text-strong"; @text-strong: ~":where(.text-strong)";
@text-annotation: ~".text-annotation"; @text-annotation: ~":where(.text-annotation)";
@text-strike: ~".text-strike"; @text-strike: ~":where(.text-strike)";
@text-inserted: ~".text-inserted"; @text-inserted: ~":where(.text-inserted)";
@text-deleted: ~".text-deleted"; @text-deleted: ~":where(.text-deleted)";
@text-preformatted: ~".text-preformatted"; @text-preformatted: ~":where(.text-preformatted)";
@text-code: ~".text-code"; @text-code: ~":where(.text-code)";
@text-input: ~".text-input"; @text-input: ~":where(.text-input)";
@text-output: ~".text-output"; @text-output: ~":where(.text-output)";
@text-variable: ~".text-variable"; @text-variable: ~":where(.text-variable)";
@text-quote: ~".text-quote"; @text-quote: ~":where(.text-quote)";
@text-citation: ~".text-citation"; @text-citation: ~":where(.text-citation)";
@text-definition: ~".text-definition"; @text-definition: ~":where(.text-definition)";
@text-abbreviation: ~".text-abbreviation"; @text-abbreviation: ~":where(.text-abbreviation)";
@text-ruby: ~".text-ruby"; @text-ruby: ~":where(.text-ruby)";
@text-ruby-annotation: ~".text-ruby-annotation"; @text-ruby-annotation: ~":where(.text-ruby-annotation)";
@animation-rainbow: ~".animation-rainbow"; @animation-rainbow: ~":where(.animation-rainbow)";

211
src/selectorsets/root.less
View file

@ -1,123 +1,124 @@
@bluelib: ~":where(body)"; @bluelib: ~":where(body)";
@all: ~"*"; @all: ~":where(*)";
@page-main: ~"main"; @page-main: ~":where(main)";
@page-aside: ~"aside"; @page-aside: ~":where(aside)";
@page-header: ~"header"; @page-header: ~":where(header)";
@page-footer: ~"footer"; @page-footer: ~":where(footer)";
@border-top: ~".border-top"; @border-top: ~":where(.border-top)";
@border-right: ~".border-right"; @border-right: ~":where(.border-right)";
@border-bottom: ~".border-bottom"; @border-bottom: ~":where(.border-bottom)";
@border-left: ~".border-left"; @border-left: ~":where(.border-left)";
@float-top: ~".float-top"; @float-top: ~":where(.float-top)";
@float-right: ~".float-right"; @float-right: ~":where(.float-right)";
@float-bottom: ~".float-bottom"; @float-bottom: ~":where(.float-bottom)";
@float-left: ~".float-left"; @float-left: ~":where(.float-left)";
@float-hcenter: ~".float-hcenter"; @float-hcenter: ~":where(.float-hcenter)";
@float-vcenter: ~".float-vcenter"; @float-vcenter: ~":where(.float-vcenter)";
@header-1: ~"h1"; @header: ~":where(h1, h2, h3, h4, h5, h6)";
@header-2: ~"h2"; @header-1: ~":where(h1)";
@header-3: ~"h3"; @header-2: ~":where(h2)";
@header-4: ~"h4"; @header-3: ~":where(h3)";
@header-5: ~"h5"; @header-4: ~":where(h4)";
@header-6: ~"h6"; @header-5: ~":where(h5)";
@header-6: ~":where(h6)";
@panel: ~".panel"; @panel: ~":where(.panel)";
@panel-box: ~".box"; @panel-box: ~":where(.box)";
@panel-dialog: ~".dialog"; @panel-dialog: ~":where(.dialog)";
@panel-parenthesis: ~".parenthesis"; @panel-parenthesis: ~":where(.parenthesis)";
@chapter-0: ~".chapter-0"; @chapter: ~":where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9)";
@chapter-1: ~".chapter-1"; @chapter-0: ~":where(.chapter-0)";
@chapter-2: ~".chapter-2"; @chapter-1: ~":where(.chapter-1)";
@chapter-3: ~".chapter-3"; @chapter-2: ~":where(.chapter-2)";
@chapter-4: ~".chapter-4"; @chapter-3: ~":where(.chapter-3)";
@chapter-5: ~".chapter-5"; @chapter-4: ~":where(.chapter-4)";
@chapter-6: ~".chapter-6"; @chapter-5: ~":where(.chapter-5)";
@chapter-7: ~".chapter-7"; @chapter-6: ~":where(.chapter-6)";
@chapter-8: ~".chapter-8"; @chapter-7: ~":where(.chapter-7)";
@chapter-9: ~".chapter-9"; @chapter-8: ~":where(.chapter-8)";
@chapter-9: ~":where(.chapter-9)";
@separator: ~"hr"; @separator: ~":where(hr)";
@separator-light: ~".separator-light"; @separator-light: ~":where(.separator-light)";
@separator-heavy: ~".separator-heavy"; @separator-heavy: ~":where(.separator-heavy)";
@image: ~"img"; @image: ~":where(img)";
@image-limit-half: ~".image-limit-half"; @image-limit-half: ~":where(.image-limit-half)";
@image-limit-quarter: ~".image-limit-quarter"; @image-limit-quarter: ~":where(.image-limit-quarter)";
@figure: ~"figure"; @figure: ~":where(figure)";
@figure-caption: ~"figcaption"; @figure-caption: ~":where(figcaption)";
@table: ~"table"; @table: ~":where(table)";
@table-caption: ~"caption"; @table-caption: ~":where(caption)";
@table-caption-top: ~".table-caption-top"; @table-caption-top: ~":where(.table-caption-top)";
@table-caption-bottom: ~".table-caption-bottom"; @table-caption-bottom: ~":where(.table-caption-bottom)";
@table-header: ~"thead"; @table-header: ~":where(thead)";
@table-body: ~"tbody"; @table-body: ~":where(tbody)";
@table-footer: ~"tfoot"; @table-footer: ~":where(tfoot)";
@table-row: ~"tr"; @table-row: ~":where(tr)";
@table-head: ~"th"; @table-head: ~":where(th)";
@table-data: ~"td"; @table-data: ~":where(td)";
@list-unordered: ~"ul"; @list-unordered: ~":where(ul)";
@list-ordered: ~"ol"; @list-ordered: ~":where(ol)";
@glossary-term: ~"dt"; @glossary-term: ~":where(dt)";
@glossary-description: ~"dd"; @glossary-description: ~":where(dd)";
@glossary-details: ~"details"; @glossary-details: ~":where(details)";
@glossary-summary: ~"summary"; @glossary-summary: ~":where(summary)";
@modifier-fade: ~".fade"; @modifier-fade: ~":where(.fade)";
@modifier-mark: ~".mark"; @modifier-mark: ~":where(mark, .mark)";
@element-mark: ~"mark"; @modifier-todo: ~":where(.todo)";
@modifier-todo: ~".todo"; @property-disabled: ~":where([disabled])";
@property-disabled: ~"[disabled]"; @modifier-red: ~":where(.red)";
@modifier-red: ~".red"; @modifier-yellow: ~":where(.yellow)";
@modifier-yellow: ~".yellow"; @modifier-green: ~":where(.green)";
@modifier-green: ~".green"; @modifier-cyan: ~":where(.cyan)";
@modifier-cyan: ~".cyan"; @modifier-blue: ~":where(.blue)";
@modifier-blue: ~".blue"; @modifier-magenta: ~":where(.magenta)";
@modifier-magenta: ~".magenta";
@input: ~"input, textarea, select, button"; @input: ~":where(input, textarea, select, button)";
@input-field: ~'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"]'; @input-field: ~':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"])';
@input-area: ~"textarea"; @input-area: ~":where(textarea)";
@input-select: ~"select:not([multiple])"; @input-select: ~":where(select:not([multiple]))";
@input-multiselect: ~"select[multiple]"; @input-multiselect: ~":where(select[multiple])";
@input-radio: ~'input[type="radio"]'; @input-radio: ~':where(input[type="radio"])';
@input-checkbox: ~'input[type="checkbox"]'; @input-checkbox: ~':where(input[type="checkbox"])';
@input-color: ~'input[type="color"]'; @input-color: ~':where(input[type="color"])';
@input-file: ~'input[type="file"]'; @input-file: ~':where(input[type="file"])';
@input-range: ~'input[type="range"]'; @input-range: ~':where(input[type="range"])';
@input-button: ~'input[type="button"], button'; @input-button: ~':where(input[type="button"], button)';
@form-flex: ~'.form-flex'; @form-flex: ~':where(.form-flex)';
@form-flex-content: ~':is(.form-flex-content, p)'; @form-flex-content: ~':where(.form-flex-content, p)';
@form-flex-choice: ~':is(.form-flex-choice, label)'; @form-flex-choice: ~':where(.form-flex-choice, label)';
@text-anchor: ~"a"; @text-anchor: ~":where(a)";
@text-idiomatic: ~"i"; @text-idiomatic: ~":where(i)";
@text-emphasis: ~"em"; @text-emphasis: ~":where(em)";
@text-attention: ~"b"; @text-attention: ~":where(b)";
@text-strong: ~"strong"; @text-strong: ~":where(strong)";
@text-annotation: ~"u"; @text-annotation: ~":where(u)";
@text-strike: ~"s"; @text-strike: ~":where(s)";
@text-inserted: ~"ins"; @text-inserted: ~":where(ins)";
@text-deleted: ~"del"; @text-deleted: ~":where(del)";
@text-preformatted: ~"pre"; @text-preformatted: ~":where(pre)";
@text-code: ~"code"; @text-code: ~":where(code)";
@text-input: ~"kbd"; @text-input: ~":where(kbd)";
@text-output: ~"samp"; @text-output: ~":where(samp)";
@text-variable: ~"var"; @text-variable: ~":where(var)";
@text-quote: ~"q"; @text-quote: ~":where(q)";
@text-citation: ~"cite"; @text-citation: ~":where(cite)";
@text-definition: ~"dfn"; @text-definition: ~":where(dfn)";
@text-abbreviation: ~"abbr"; @text-abbreviation: ~":where(abbr)";
@text-ruby: ~"ruby"; @text-ruby: ~":where(ruby)";
@text-ruby-annotation: ~"rt"; @text-ruby-annotation: ~":where(rt)";
@animation-rainbow: ~".rainbow"; @animation-rainbow: ~":where(.rainbow)";

39
yarn.lock
View file

@ -272,6 +272,11 @@ accepts@^1.3.5:
mime-types "~2.1.34" mime-types "~2.1.34"
negotiator "0.6.3" negotiator "0.6.3"
amdefine@>=0.0.4:
version "1.0.1"
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
integrity sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==
ansi-styles@^3.2.1: ansi-styles@^3.2.1:
version "3.2.1" version "3.2.1"
resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@ -358,6 +363,14 @@ chokidar@^3.4.3:
optionalDependencies: optionalDependencies:
fsevents "~2.3.2" fsevents "~2.3.2"
clean-css@^3.0.1:
version "3.4.28"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.28.tgz#bf1945e82fc808f55695e6ddeaec01400efd03ff"
integrity sha512-aTWyttSdI2mYi07kWqHi24NUU9YlELFKGOAgFzZjDN1064DMAOy2FBuoyGmkKRlXkbpXd0EVHmiVkbKhKoirTw==
dependencies:
commander "2.8.x"
source-map "0.4.x"
clone@^2.1.2: clone@^2.1.2:
version "2.1.2" version "2.1.2"
resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
@ -400,6 +413,13 @@ command-line-usage@^6.1.1:
table-layout "^1.0.2" table-layout "^1.0.2"
typical "^5.2.0" typical "^5.2.0"
commander@2.8.x:
version "2.8.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
integrity sha512-+pJLBFVk+9ZZdlAOB5WuIElVPPth47hILFkmGym57aq8kwxsowvByvB0DHs1vQAhyMZzdcpTtF0VDKGkSDR4ZQ==
dependencies:
graceful-readlink ">= 1.0.0"
content-disposition@~0.5.2: content-disposition@~0.5.2:
version "0.5.4" version "0.5.4"
resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe" resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
@ -574,6 +594,11 @@ graceful-fs@^4.1.2:
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA== integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
"graceful-readlink@>= 1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
integrity sha512-8tLu60LgxF6XpdbK8OW3FA+IfTNBn1ZHGHKF4KQbEeSkajYw5PlYJcKluntgegDPTg8UkHjpet1T82vk6TQ68w==
has-flag@^3.0.0: has-flag@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@ -809,6 +834,13 @@ koa@^2.13.0:
type-is "^1.6.16" type-is "^1.6.16"
vary "^1.1.2" vary "^1.1.2"
less-plugin-clean-css@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/less-plugin-clean-css/-/less-plugin-clean-css-1.5.1.tgz#cc57af7aa3398957e56decebe63cb60c23429703"
integrity sha512-Pc68AFHAEJO3aAoRvnUTW5iAiAv6y+TQsWLTTwVNqjiDno6xCvxz1AtfQl7Y0MZSpHPalFajM1EU4RB5UVINpw==
dependencies:
clean-css "^3.0.1"
less@^4.1.3: less@^4.1.3:
version "4.1.3" version "4.1.3"
resolved "https://registry.yarnpkg.com/less/-/less-4.1.3.tgz#175be9ddcbf9b250173e0a00b4d6920a5b770246" resolved "https://registry.yarnpkg.com/less/-/less-4.1.3.tgz#175be9ddcbf9b250173e0a00b4d6920a5b770246"
@ -1067,6 +1099,13 @@ setprototypeof@1.2.0:
resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424" resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw== integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
source-map@0.4.x:
version "0.4.4"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
integrity sha512-Y8nIfcb1s/7DcobUz1yOO1GSp7gyL+D9zLHDehT7iRESqGSxjJ448Sg7rvfgsRJCnKLdSl11uGf0s9X80cH0/A==
dependencies:
amdefine ">=0.0.4"
source-map@~0.6.0: source-map@~0.6.0:
version "0.6.1" version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"