/* * Bluelib Base * by */ .bluelib { --bhsl-current-hue: var(--bhsl-foreground-hue); --bhsl-current-saturation: var(--bhsl-foreground-saturation); --bhsl-current-lightness: var(--bhsl-foreground-lightness); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); width: 100%; height: 100%; margin: 0; font-style: var(--bfont-text-style); font-variant: var(--bfont-text-variant); font-weight: var(--bfont-text-weight); font-stretch: var(--bfont-text-stretch); line-height: var(--bfont-text-height); font-family: var(--bfont-text-family); } .bluelib, .bluelib * { margin: 0; padding: 0; color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); border-width: 0; border-style: solid; 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)); } .bluelib, .bluelib *, .bluelib::before, .bluelib *::before, .bluelib::after, .bluelib *::after { box-sizing: border-box; } .bluelib:focus-visible, .bluelib *: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); } .bluelib .page-footer { margin: 1rem 0; text-align: center; font-size: x-small; } .bluelib .float-top { margin-bottom: auto; } .bluelib .float-right { margin-left: auto; } .bluelib .float-bottom { margin-top: auto; } .bluelib .float-left { margin-right: auto; } .bluelib .float-hcenter { margin-left: auto; margin-right: auto; } .bluelib .float-vcenter { margin-top: auto; margin-bottom: auto; } .bluelib .header-1 { font-size: 2.5em; } .bluelib .header-2 { font-size: 1.75em; } .bluelib .header-1, .bluelib .header-2, .bluelib .header-3, .bluelib .header-4, .bluelib .header-5, .bluelib .header-6 { text-align: center; --bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-lightness: var(--bhsl-primary-lightness); font-style: var(--bfont-header-style); font-variant: var(--bfont-header-variant); font-weight: var(--bfont-header-weight); font-stretch: var(--bfont-header-stretch); line-height: var(--bfont-header-height); font-family: var(--bfont-header-family); } .bluelib .panel { padding-top: 0.5em; padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 0.5em; border-width: 0; border-style: solid; width: 100%; display: flex; flex-direction: column; gap: 8px; background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); } .bluelib .panel.border-top, .bluelib .panel.panel-box { border-top-width: 2px; padding-top: calc(0.5em - 2px); } .bluelib .panel.border-right, .bluelib .panel.panel-box { border-right-width: 2px; padding-right: calc(0.5em - 2px); } .bluelib .panel.border-left, .bluelib .panel.panel-box, .bluelib .panel.panel-dialog { border-left-width: 2px; padding-left: calc(0.5em - 2px); } .bluelib .panel.border-bottom, .bluelib .panel.panel-box { border-bottom-width: 2px; padding-bottom: calc(0.5em - 2px); } .bluelib .panel.panel-parenthesis { font-size: smaller; } .bluelib .chapter-0, .bluelib .chapter-1, .bluelib .chapter-2, .bluelib .chapter-3, .bluelib .chapter-4, .bluelib .chapter-5, .bluelib .chapter-6, .bluelib .chapter-7, .bluelib .chapter-8, .bluelib .chapter-9 { display: flex; flex-wrap: wrap; flex-direction: row; gap: 0.5em; justify-content: stretch; align-items: stretch; margin: 0.5em; } .bluelib .chapter-0 > *, .bluelib .chapter-1 > *, .bluelib .chapter-2 > *, .bluelib .chapter-3 > *, .bluelib .chapter-4 > *, .bluelib .chapter-5 > *, .bluelib .chapter-6 > *, .bluelib .chapter-7 > *, .bluelib .chapter-8 > *, .bluelib .chapter-9 > * { flex-grow: 1; flex-shrink: 0; } .bluelib .chapter-0 > .header-1, .bluelib .chapter-1 > .header-1, .bluelib .chapter-2 > .header-1, .bluelib .chapter-3 > .header-1, .bluelib .chapter-4 > .header-1, .bluelib .chapter-5 > .header-1, .bluelib .chapter-6 > .header-1, .bluelib .chapter-7 > .header-1, .bluelib .chapter-8 > .header-1, .bluelib .chapter-9 > .header-1, .bluelib .chapter-0 > .header-2, .bluelib .chapter-1 > .header-2, .bluelib .chapter-2 > .header-2, .bluelib .chapter-3 > .header-2, .bluelib .chapter-4 > .header-2, .bluelib .chapter-5 > .header-2, .bluelib .chapter-6 > .header-2, .bluelib .chapter-7 > .header-2, .bluelib .chapter-8 > .header-2, .bluelib .chapter-9 > .header-2, .bluelib .chapter-0 > .header-3, .bluelib .chapter-1 > .header-3, .bluelib .chapter-2 > .header-3, .bluelib .chapter-3 > .header-3, .bluelib .chapter-4 > .header-3, .bluelib .chapter-5 > .header-3, .bluelib .chapter-6 > .header-3, .bluelib .chapter-7 > .header-3, .bluelib .chapter-8 > .header-3, .bluelib .chapter-9 > .header-3, .bluelib .chapter-0 > .header-4, .bluelib .chapter-1 > .header-4, .bluelib .chapter-2 > .header-4, .bluelib .chapter-3 > .header-4, .bluelib .chapter-4 > .header-4, .bluelib .chapter-5 > .header-4, .bluelib .chapter-6 > .header-4, .bluelib .chapter-7 > .header-4, .bluelib .chapter-8 > .header-4, .bluelib .chapter-9 > .header-4, .bluelib .chapter-0 > .header-5, .bluelib .chapter-1 > .header-5, .bluelib .chapter-2 > .header-5, .bluelib .chapter-3 > .header-5, .bluelib .chapter-4 > .header-5, .bluelib .chapter-5 > .header-5, .bluelib .chapter-6 > .header-5, .bluelib .chapter-7 > .header-5, .bluelib .chapter-8 > .header-5, .bluelib .chapter-9 > .header-5, .bluelib .chapter-0 > .header-6, .bluelib .chapter-1 > .header-6, .bluelib .chapter-2 > .header-6, .bluelib .chapter-3 > .header-6, .bluelib .chapter-4 > .header-6, .bluelib .chapter-5 > .header-6, .bluelib .chapter-6 > .header-6, .bluelib .chapter-7 > .header-6, .bluelib .chapter-8 > .header-6, .bluelib .chapter-9 > .header-6 { flex-basis: 100%; margin-top: 1.2em; } .bluelib .chapter-0 { flex-wrap: nowrap; } .bluelib .chapter-0 > * { flex-shrink: 1; } .bluelib .chapter-1 > * { flex-basis: calc(100% / 2); } .bluelib .chapter-2 > * { flex-basis: calc(100% / 3); } .bluelib .chapter-3 > * { flex-basis: calc(100% / 4); } .bluelib .chapter-4 > * { flex-basis: calc(100% / 5); } .bluelib .chapter-5 > * { flex-basis: calc(100% / 6); } .bluelib .chapter-6 > * { flex-basis: calc(100% / 7); } .bluelib .chapter-7 > * { flex-basis: calc(100% / 8); } .bluelib .chapter-8 > * { flex-basis: calc(100% / 9); } .bluelib .chapter-9 > * { flex-basis: calc(100% / 10); } .bluelib .separator { border-width: 1px; border-style: dashed; } .bluelib .separator-light { border-style: dotted; } .bluelib .separator-heavy { border-style: solid; } .bluelib .image { display: block; max-width: 100%; object-fit: contain; } .bluelib .image-limit-half { max-height: max(28.2vw, 50vh); } .bluelib .image-limit-quarter { max-height: max(14.1vw, 25vh); } .bluelib .table { border-collapse: collapse; } .bluelib .table .table-head, .bluelib .table .table-data { padding: 3px 7px; border-width: 1px; } .bluelib .table .table-caption { border-width: 1px; font-style: var(--bfont-caption-style); font-variant: var(--bfont-caption-variant); font-weight: var(--bfont-caption-weight); font-stretch: var(--bfont-caption-stretch); line-height: var(--bfont-caption-height); font-family: var(--bfont-caption-family); } .bluelib .table .table-caption.table-caption-top { caption-side: top; border-bottom-width: 0; } .bluelib .table .table-caption.table-caption-bottom { caption-side: bottom; border-top-width: 0; } .bluelib .table.panel { display: table; } .bluelib .table.panel .table-head, .bluelib .table.panel .table-data { padding: 8px; } .bluelib .table.panel .table-caption { text-align: inherit; background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); padding: 8px; } .bluelib .table.panel .table-caption * { margin-top: 8px; margin-bottom: 8px; } .bluelib .table.panel .table-caption *:first-child { margin-top: 0; } .bluelib .table.panel .table-caption *:last-child { margin-bottom: 0; } .bluelib .table.panel-box .table-row { border-width: 1px; } .bluelib .table.panel-box .table-head, .bluelib .table.panel-box .table-data { border-width: 1px; padding: 7px; } .bluelib .table.panel-box .table-caption { border-width: 2px; padding: 6px; } .bluelib .table.panel-box .table-caption.table-caption-top { border-bottom-width: 0; } .bluelib .table.panel-box .table-caption.table-caption-bottom { border-top-width: 0; } .bluelib .table.panel-dialog .table-header > .table-row { border-bottom-width: 1px; } .bluelib .table.panel-dialog .table-body > .table-row { border-width: 0; } .bluelib .table.panel-dialog .table-footer > .table-row { border-top-width: 1px; } .bluelib .table.panel-dialog .table-head, .bluelib .table.panel-dialog .table-data { border-width: 0 0 0 1px; padding: 8px 8px 8px 7px; } .bluelib .table.panel-dialog .table-caption { border-width: 0 0 0 2px; padding: 8px 8px 8px 6px; } .bluelib .panel > .list-unordered, .bluelib .panel > .list-ordered { margin-left: 6ex; } .bluelib .glossary-term { margin-top: 0.5em; padding: 0.2em 0; --bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-lightness: var(--bhsl-primary-lightness); font-style: var(--bfont-term-style); font-variant: var(--bfont-term-variant); font-weight: var(--bfont-term-weight); font-stretch: var(--bfont-term-stretch); line-height: var(--bfont-term-height); font-family: var(--bfont-term-family); } .bluelib .glossary-description { margin-left: 4.5ex; margin-bottom: 0.5em; } .bluelib .glossary-details { margin-left: 4.5ex; } .bluelib .glossary-summary { cursor: pointer; margin-left: -4ex; padding: 0.2em 0; font-style: var(--bfont-summary-style); font-variant: var(--bfont-summary-variant); font-weight: var(--bfont-summary-weight); font-stretch: var(--bfont-summary-stretch); line-height: var(--bfont-summary-height); font-family: var(--bfont-summary-family); user-select: none; } .bluelib .modifier-fade { opacity: 0.3; } .bluelib .modifier-mark, .bluelib .element-mark { font-style: var(--bfont-mark-style); font-variant: var(--bfont-mark-variant); font-weight: var(--bfont-mark-weight); font-stretch: var(--bfont-mark-stretch); line-height: var(--bfont-mark-height); font-family: var(--bfont-mark-family); 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); } .bluelib .modifier-mark .modifier-mark, .bluelib .element-mark .modifier-mark, .bluelib .modifier-mark .element-mark, .bluelib .element-mark .element-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); } .bluelib .modifier-mark .modifier-mark .modifier-mark, .bluelib .element-mark .modifier-mark .modifier-mark, .bluelib .modifier-mark .element-mark .modifier-mark, .bluelib .element-mark .element-mark .modifier-mark, .bluelib .modifier-mark .modifier-mark .element-mark, .bluelib .element-mark .modifier-mark .element-mark, .bluelib .modifier-mark .element-mark .element-mark, .bluelib .element-mark .element-mark .element-mark { background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); --bhsl-current-hue: var(--bhsl-mark-foreground-hue); --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation); --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness); } .bluelib .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); } .bluelib .modifier-todo, .bluelib .modifier-todo .panel { border-style: dashed; background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); } .bluelib .modifier-red { --bhsl-current-hue: var(--bhsl-red-hue); --bhsl-current-saturation: var(--bhsl-red-saturation); --bhsl-current-lightness: var(--bhsl-red-lightness); } .bluelib .modifier-yellow { --bhsl-current-hue: var(--bhsl-yellow-hue); --bhsl-current-saturation: var(--bhsl-yellow-saturation); --bhsl-current-lightness: var(--bhsl-yellow-lightness); } .bluelib .modifier-green { --bhsl-current-hue: var(--bhsl-green-hue); --bhsl-current-saturation: var(--bhsl-green-saturation); --bhsl-current-lightness: var(--bhsl-green-lightness); } .bluelib .modifier-cyan { --bhsl-current-hue: var(--bhsl-cyan-hue); --bhsl-current-saturation: var(--bhsl-cyan-saturation); --bhsl-current-lightness: var(--bhsl-cyan-lightness); } .bluelib .modifier-blue { --bhsl-current-hue: var(--bhsl-blue-hue); --bhsl-current-saturation: var(--bhsl-blue-saturation); --bhsl-current-lightness: var(--bhsl-blue-lightness); } .bluelib .modifier-magenta { --bhsl-current-hue: var(--bhsl-magenta-hue); --bhsl-current-saturation: var(--bhsl-magenta-saturation); --bhsl-current-lightness: var(--bhsl-magenta-lightness); } .bluelib .input { font: inherit; cursor: pointer; background-color: transparent; padding: 0.125em 0.75ex; vertical-align: middle; border-width: 0; border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4); } .bluelib .input::placeholder { opacity: 1; color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4); } .bluelib .input:hover { border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); } .bluelib .input:hover::placeholder { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); } .bluelib .input:active, .bluelib .input:focus { border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); } .bluelib .input-area { resize: vertical; } .bluelib .input-field, .bluelib .input-select { border-bottom-width: 2px; } .bluelib .input-area, .bluelib .input-multiselect { border-left-width: 2px; } .bluelib .input-field, .bluelib .input-area { cursor: text; } .bluelib .input-select, .bluelib .input-multiselect { cursor: vertical-text; } .bluelib .input-range { cursor: ew-resize; } .bluelib .input-select optgroup, .bluelib .input-multiselect optgroup { padding-bottom: 0.25em; font-style: var(--bfont-header-style); font-variant: var(--bfont-header-variant); font-weight: var(--bfont-header-weight); font-stretch: var(--bfont-header-stretch); line-height: var(--bfont-header-height); font-family: var(--bfont-header-family); } .bluelib .input-select optgroup option, .bluelib .input-multiselect optgroup option { padding: 0.125em 0 0.125em 2ex; } .bluelib .input-select option, .bluelib .input-multiselect option { font-style: var(--bfont-text-style); font-variant: var(--bfont-text-variant); font-weight: var(--bfont-text-weight); font-stretch: var(--bfont-text-stretch); line-height: var(--bfont-text-height); font-family: var(--bfont-text-family); } .bluelib .input-radio, .bluelib .input-checkbox { appearance: none; cursor: pointer; width: 1em; height: 1em; padding: 2px; border-width: 2px; display: inline-flex; justify-content: center; align-items: center; } .bluelib .input-radio::before, .bluelib .input-checkbox::before { display: block; content: ""; width: 100%; height: 100%; } .bluelib .input-radio:checked::before, .bluelib .input-checkbox:checked::before { background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); } .bluelib .input-radio { border-radius: 100%; } .bluelib .input-radio::before { border-radius: 100%; } .bluelib .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]; } */ } .bluelib .input-button { border-width: 2px; border-style: outset; } .bluelib .input-button:active { border-style: inset; } .bluelib .input-file, .bluelib .input-color { padding: 0; } @media screen and (-webkit-min-device-pixel-ratio: 0) { .bluelib .input-field::-webkit-calendar-picker-indicator { filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000)); } .bluelib .input-select optgroup, .bluelib .input-select option { background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); } .bluelib .input-select optgroup::before, .bluelib .input-select option::before { content: ""; } } .bluelib .form-flex { display: flex; flex-direction: column; justify-content: stretch; } .bluelib .form-flex > .element-paragraph { margin: 0.5em 0; } .bluelib .form-flex > .element-label { display: flex; gap: 1ex; } .bluelib .form-flex > .element-label > .element-span:first-child, .bluelib .form-flex > .element-label > .element-span:last-child { margin: auto 0; flex-basis: 15%; font-style: var(--bfont-label-style); font-variant: var(--bfont-label-variant); font-weight: var(--bfont-label-weight); font-stretch: var(--bfont-label-stretch); line-height: var(--bfont-label-height); font-family: var(--bfont-label-family); --bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-lightness: var(--bhsl-primary-lightness); } .bluelib .form-flex > .element-label > .element-span:first-child { text-align: right; } .bluelib .form-flex > .element-label > .element-span:last-child { text-align: left; } .bluelib .form-flex > .element-label > .input { flex-grow: 1; } .bluelib .text-anchor { --bhsl-current-hue: var(--bhsl-link-hue); --bhsl-current-saturation: var(--bhsl-link-saturation); --bhsl-current-lightness: var(--bhsl-link-lightness); } .bluelib .text-idiomatic { font-style: var(--bfont-idiomatic-style); font-variant: var(--bfont-idiomatic-variant); font-weight: var(--bfont-idiomatic-weight); font-stretch: var(--bfont-idiomatic-stretch); line-height: var(--bfont-idiomatic-height); font-family: var(--bfont-idiomatic-family); } .bluelib .text-emphasis { font-style: var(--bfont-emphasis-style); font-variant: var(--bfont-emphasis-variant); font-weight: var(--bfont-emphasis-weight); font-stretch: var(--bfont-emphasis-stretch); line-height: var(--bfont-emphasis-height); font-family: var(--bfont-emphasis-family); } .bluelib .text-attention { font-style: var(--bfont-attention-style); font-variant: var(--bfont-attention-variant); font-weight: var(--bfont-attention-weight); font-stretch: var(--bfont-attention-stretch); line-height: var(--bfont-attention-height); font-family: var(--bfont-attention-family); } .bluelib .text-strong { font-style: var(--bfont-strong-style); font-variant: var(--bfont-strong-variant); font-weight: var(--bfont-strong-weight); font-stretch: var(--bfont-strong-stretch); line-height: var(--bfont-strong-height); font-family: var(--bfont-strong-family); } .bluelib .text-inserted { --bhsl-current-hue: var(--bhsl-inserted-hue); --bhsl-current-saturation: var(--bhsl-inserted-saturation); --bhsl-current-lightness: var(--bhsl-inserted-lightness); } .bluelib .text-deleted { --bhsl-current-hue: var(--bhsl-deleted-hue); --bhsl-current-saturation: var(--bhsl-deleted-saturation); --bhsl-current-lightness: var(--bhsl-deleted-lightness); } .bluelib .text-code, .bluelib .text-preformatted, .bluelib .text-input, .bluelib .text-output { font-style: var(--bfont-code-style); font-variant: var(--bfont-code-variant); font-weight: var(--bfont-code-weight); font-stretch: var(--bfont-code-stretch); line-height: var(--bfont-code-height); font-family: var(--bfont-code-family); } .bluelib .text-preformatted { overflow-x: scroll; } .bluelib .text-input, .bluelib .text-output { padding: 0 0.25ex; } .bluelib .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); } .bluelib .text-input .text-input { font-style: var(--bfont-boldcode-style); font-variant: var(--bfont-boldcode-variant); font-weight: var(--bfont-boldcode-weight); font-stretch: var(--bfont-boldcode-stretch); line-height: var(--bfont-boldcode-height); font-family: var(--bfont-boldcode-family); } .bluelib .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); } .bluelib .text-output .text-output { font-style: var(--bfont-boldcode-style); font-variant: var(--bfont-boldcode-variant); font-weight: var(--bfont-boldcode-weight); font-stretch: var(--bfont-boldcode-stretch); line-height: var(--bfont-boldcode-height); font-family: var(--bfont-boldcode-family); } .bluelib .text-variable { font-style: var(--bfont-variable-style); font-variant: var(--bfont-variable-variant); font-weight: var(--bfont-variable-weight); font-stretch: var(--bfont-variable-stretch); line-height: var(--bfont-variable-height); font-family: var(--bfont-variable-family); } .bluelib .text-citation { font-style: var(--bfont-citation-style); font-variant: var(--bfont-citation-variant); font-weight: var(--bfont-citation-weight); font-stretch: var(--bfont-citation-stretch); line-height: var(--bfont-citation-height); font-family: var(--bfont-citation-family); } .bluelib .text-definition { font-style: var(--bfont-term-style); font-variant: var(--bfont-term-variant); font-weight: var(--bfont-term-weight); font-stretch: var(--bfont-term-stretch); line-height: var(--bfont-term-height); font-family: var(--bfont-term-family); --bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-lightness: var(--bhsl-primary-lightness); } .bluelib .text-abbreviation { cursor: help; }