steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-10-16 05:37:28 +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
No known key found for this signature in database
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..."
lessc "$base.less" "$base.css"
echo "Compiling $base.min.css..."
lessc "$base.less" --clean-css "$base.min.css"
done
done

491
dist/base.module.css vendored
View file

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

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

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-outer-shadow: none;
}
:where(body):is(:where(body)) h1,
:where(body):is(:where(body)) h2,
:where(body):is(:where(body)) h3,
:where(body):is(:where(body)) h4,
:where(body):is(:where(body)) h5,
:where(body):is(:where(body)) h6 {
: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: white;
text-shadow: 2px 2px 0 #9832ce;
}
:where(body):is(:where(body)) .panel h1,
:where(body):is(:where(body)) .panel h2,
:where(body):is(:where(body)) .panel h3,
:where(body):is(:where(body)) .panel h4,
:where(body):is(:where(body)) .panel h5,
:where(body):is(:where(body)) .panel h6 {
: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-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;
}
}
.animation-rainbow {
:where(.animation-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;
}
}
.rainbow {
:where(.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;
}
@supports (backdrop-filter: blur(var(--b-panel-blur))) {
:where(.bluelib) .panel,
:where(.bluelib) .table.panel > .table-caption {
: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) .panel .panel,
:where(.bluelib) .table.panel > .table-caption .panel {
: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) .modifier-mark,
:where(.bluelib) .element-mark,
:where(.bluelib) .panel.modifier-mark {
: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) .modifier-mark .modifier-mark,
:where(.bluelib) .element-mark .modifier-mark,
:where(.bluelib) .panel.modifier-mark .modifier-mark,
:where(.bluelib) .modifier-mark .element-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 {
:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) :where(.modifier-mark) :where(.panel):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) .modifier-mark .modifier-mark .modifier-mark,
:where(.bluelib) .element-mark .modifier-mark .modifier-mark,
:where(.bluelib) .panel.modifier-mark .modifier-mark .modifier-mark,
:where(.bluelib) .modifier-mark .element-mark .modifier-mark,
:where(.bluelib) .element-mark .element-mark .modifier-mark,
:where(.bluelib) .panel.modifier-mark .element-mark .modifier-mark,
:where(.bluelib) .modifier-mark .panel.modifier-mark .modifier-mark,
:where(.bluelib) .element-mark .panel.modifier-mark .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 {
:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.panel):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(.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) .modifier-todo,
:where(.bluelib) .panel.modifier-todo {
: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) .modifier-todo .panel,
:where(.bluelib) .panel.modifier-todo .panel {
: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) .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);
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));
}
}

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;
}
@supports (backdrop-filter: blur(var(--b-panel-blur))) {
:where(body) .panel,
:where(body) table.panel > caption {
: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) .panel .panel,
:where(body) table.panel > caption .panel {
: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) .mark,
:where(body) mark,
:where(body) .panel.mark {
:where(body) :where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
backdrop-filter: none;
}
:where(body) .mark .mark,
:where(body) mark .mark,
:where(body) .panel.mark .mark,
:where(body) .mark mark,
:where(body) mark mark,
:where(body) .panel.mark mark,
:where(body) .mark .panel.mark,
:where(body) mark .panel.mark,
:where(body) .panel.mark .panel.mark {
:where(body) :where(mark, .mark) :where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(mark, .mark),
:where(body) :where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
}
:where(body) .mark .mark .mark,
:where(body) mark .mark .mark,
:where(body) .panel.mark .mark .mark,
:where(body) .mark mark .mark,
:where(body) mark mark .mark,
:where(body) .panel.mark mark .mark,
:where(body) .mark .panel.mark .mark,
:where(body) mark .panel.mark .mark,
:where(body) .panel.mark .panel.mark .mark,
:where(body) .mark .mark mark,
:where(body) mark .mark mark,
:where(body) .panel.mark .mark mark,
:where(body) .mark mark mark,
:where(body) mark mark mark,
:where(body) .panel.mark mark mark,
:where(body) .mark .panel.mark mark,
:where(body) mark .panel.mark mark,
:where(body) .panel.mark .panel.mark mark,
:where(body) .mark .mark .panel.mark,
:where(body) mark .mark .panel.mark,
:where(body) .panel.mark .mark .panel.mark,
:where(body) .mark mark .panel.mark,
:where(body) mark mark .panel.mark,
:where(body) .panel.mark mark .panel.mark,
:where(body) .mark .panel.mark .panel.mark,
:where(body) mark .panel.mark .panel.mark,
:where(body) .panel.mark .panel.mark .panel.mark {
:where(body) :where(mark, .mark) :where(mark, .mark) :where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(mark, .mark) :where(mark, .mark),
:where(body) :where(mark, .mark) :where(.panel):where(mark, .mark) :where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) :where(mark, .mark),
:where(body) :where(mark, .mark) :where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) :where(mark, .mark) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark),
:where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) {
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
}
:where(body) .todo,
:where(body) .panel.todo {
:where(body) :where(.todo),
:where(body) :where(.panel):where(.todo) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
}
:where(body) .todo .panel,
:where(body) .panel.todo .panel {
:where(body) :where(.todo) :where(.panel),
:where(body) :where(.panel):where(.todo) :where(.panel) {
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
backdrop-filter: none;
}
: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);
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));
}
}

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 .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 {
#body :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
min-width: 360px;
}
#body .panel .chapter-1 > .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 {
#body .panel :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
min-width: unset;
}

8
examples/index.html
View file

@ -222,7 +222,7 @@
</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>
<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>
</dl>
</dd>
@ -270,6 +270,12 @@
<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>
</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 class="panel box todo" id="panel-installtbd">
<h3>

5
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@steffo/bluelib",
"version": "7.2.0",
"version": "8.0.0",
"description": "A stylesheet that supports fast dynamic recoloring via CSS variables",
"scripts": {
"dev": "web-dev-server --watch",
@ -56,6 +56,7 @@
"private": false,
"devDependencies": {
"@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">
@{page-header}, @{page-footer} {
text-align: center;
}
@{page-footer} {
margin: 1rem 0;
text-align: center;
font-size: x-small;
}
@ -123,7 +126,7 @@
font-size: 1.75em;
}
@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
@{header} {
text-align: center;
.map-hsl-group(current; primary);
@ -194,33 +197,6 @@
//<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-0} {
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>
/// ===== Separators =====
@ -513,7 +516,7 @@
opacity: 0.3;
}
@{modifier-mark}, @{element-mark} {
@{modifier-mark} {
// Assign marks to their own font group
.use-font-group(mark);
@ -522,12 +525,12 @@
.map-hsl-group(current; mark-foreground);
// If applied twice, go back to "normality"
@{modifier-mark}, @{element-mark} {
@{modifier-mark} {
background-color: .hsl-group(background)[@c];
.map-hsl-group(current; foreground);
// If applied thrice, mark again and not anymore
@{modifier-mark}, @{element-mark} {
@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
.map-hsl-group(current; mark-foreground);
}
@ -710,30 +713,28 @@
@{input-range} {
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];
}
&::-moz-range-track {
height: 0.125em;
background-color: .hsl-group(current)[@c];
}
&::-moz-range-progress {
height: 0.5em;
background-color: .hsl-group(current)[@c];
}
*/
// 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];
// }
//
// &::-moz-range-track {
// height: 0.125em;
// background-color: .hsl-group(current)[@c];
// }
//
// &::-moz-range-progress {
// height: 0.5em;
// background-color: .hsl-group(current)[@c];
// }
}
@{input-button} {
@ -900,6 +901,4 @@
}
//</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
@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
@{header} {
text-shadow: var(--b-outer-shadow);
}
// But do not give it to headers inside panels
@{panel} {
@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
@{header} {
text-shadow: none;
}
}
@ -45,15 +45,15 @@
}
// 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];
// Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
@{modifier-mark}, @{panel}@{modifier-mark} {
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
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
backdrop-filter: none;
// Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly
@{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
}
}

211
src/selectorsets/module.less
View file

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