/* * Bluelib Base * by */ body { --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); } body, body * { 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)); } body, body *, body::before, body *::before, body::after, body *::after { box-sizing: border-box; } body:focus-visible, body *: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); } body footer { margin: 1rem 0; text-align: center; font-size: x-small; } body .float-top { margin-bottom: auto; } body .float-right { margin-left: auto; } body .float-bottom { margin-top: auto; } body .float-left { margin-right: auto; } body .float-hcenter { margin-left: auto; margin-right: auto; } body .float-vcenter { margin-top: auto; margin-bottom: auto; } body h1 { font-size: 2.5em; } body h2 { font-size: 1.75em; } body h1, body h2, body h3, body h4, body h5, body h6 { 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); } body .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)); } body .panel.border-top, body .panel.panel-box { border-top-width: 2px; padding-top: calc(0.5em - 2px); } body .panel.border-right, body .panel.panel-box { border-right-width: 2px; padding-right: calc(0.5em - 2px); } body .panel.border-left, body .panel.panel-box, body .panel.panel-dialog { border-left-width: 2px; padding-left: calc(0.5em - 2px); } body .panel.border-bottom, body .panel.panel-box { border-bottom-width: 2px; padding-bottom: calc(0.5em - 2px); } body .panel.panel-parenthesis { font-size: smaller; } body .chapter-0, body .chapter-1, body .chapter-2, body .chapter-3, body .chapter-4, body .chapter-5, body .chapter-6, body .chapter-7, body .chapter-8, body .chapter-9 { display: flex; flex-wrap: wrap; flex-direction: row; gap: 0.5em; justify-content: stretch; align-items: stretch; margin: 0.5em; } body .chapter-0 > *, body .chapter-1 > *, body .chapter-2 > *, body .chapter-3 > *, body .chapter-4 > *, body .chapter-5 > *, body .chapter-6 > *, body .chapter-7 > *, body .chapter-8 > *, body .chapter-9 > * { flex-grow: 1; flex-shrink: 0; } body .chapter-0 > h1, body .chapter-1 > h1, body .chapter-2 > h1, body .chapter-3 > h1, body .chapter-4 > h1, body .chapter-5 > h1, body .chapter-6 > h1, body .chapter-7 > h1, body .chapter-8 > h1, body .chapter-9 > h1, body .chapter-0 > h2, body .chapter-1 > h2, body .chapter-2 > h2, body .chapter-3 > h2, body .chapter-4 > h2, body .chapter-5 > h2, body .chapter-6 > h2, body .chapter-7 > h2, body .chapter-8 > h2, body .chapter-9 > h2, body .chapter-0 > h3, body .chapter-1 > h3, body .chapter-2 > h3, body .chapter-3 > h3, body .chapter-4 > h3, body .chapter-5 > h3, body .chapter-6 > h3, body .chapter-7 > h3, body .chapter-8 > h3, body .chapter-9 > h3, body .chapter-0 > h4, body .chapter-1 > h4, body .chapter-2 > h4, body .chapter-3 > h4, body .chapter-4 > h4, body .chapter-5 > h4, body .chapter-6 > h4, body .chapter-7 > h4, body .chapter-8 > h4, body .chapter-9 > h4, body .chapter-0 > h5, body .chapter-1 > h5, body .chapter-2 > h5, body .chapter-3 > h5, body .chapter-4 > h5, body .chapter-5 > h5, body .chapter-6 > h5, body .chapter-7 > h5, body .chapter-8 > h5, body .chapter-9 > h5, body .chapter-0 > h6, body .chapter-1 > h6, body .chapter-2 > h6, body .chapter-3 > h6, body .chapter-4 > h6, body .chapter-5 > h6, body .chapter-6 > h6, body .chapter-7 > h6, body .chapter-8 > h6, body .chapter-9 > h6 { flex-basis: 100%; margin-top: 1.2em; } body .chapter-0 { flex-wrap: nowrap; } body .chapter-0 > * { flex-shrink: 1; } body .chapter-1 > * { flex-basis: calc(100% / 2); } body .chapter-2 > * { flex-basis: calc(100% / 3); } body .chapter-3 > * { flex-basis: calc(100% / 4); } body .chapter-4 > * { flex-basis: calc(100% / 5); } body .chapter-5 > * { flex-basis: calc(100% / 6); } body .chapter-6 > * { flex-basis: calc(100% / 7); } body .chapter-7 > * { flex-basis: calc(100% / 8); } body .chapter-8 > * { flex-basis: calc(100% / 9); } body .chapter-9 > * { flex-basis: calc(100% / 10); } body hr { border-width: 1px; border-style: dashed; } body .separator-light { border-style: dotted; } body .separator-heavy { border-style: solid; } body img { display: block; max-width: 100%; object-fit: contain; } body .image-limit-half { max-height: max(28.2vw, 50vh); } body .image-limit-quarter { max-height: max(14.1vw, 25vh); } body table { border-collapse: collapse; } body table th, body table td { padding: 3px 7px; border-width: 1px; } body 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); } body table caption.table-caption-top { caption-side: top; border-bottom-width: 0; } body table caption.table-caption-bottom { caption-side: bottom; border-top-width: 0; } body table.panel { display: table; } body table.panel th, body table.panel td { padding: 8px; } body table.panel caption { text-align: inherit; background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); padding: 8px; } body table.panel caption * { margin-top: 8px; margin-bottom: 8px; } body table.panel caption *:first-child { margin-top: 0; } body table.panel caption *:last-child { margin-bottom: 0; } body table.panel-box tr { border-width: 1px; } body table.panel-box th, body table.panel-box td { border-width: 1px; padding: 7px; } body table.panel-box caption { border-width: 2px; padding: 6px; } body table.panel-box caption.table-caption-top { border-bottom-width: 0; } body table.panel-box caption.table-caption-bottom { border-top-width: 0; } body table.panel-dialog thead > tr { border-bottom-width: 1px; } body table.panel-dialog tbody > tr { border-width: 0; } body table.panel-dialog tfoot > tr { border-top-width: 1px; } body table.panel-dialog th, body table.panel-dialog td { border-width: 0 0 0 1px; padding: 8px 8px 8px 7px; } body table.panel-dialog caption { border-width: 0 0 0 2px; padding: 8px 8px 8px 6px; } body .panel > ul, body .panel > ol { margin-left: 6ex; } body dt { 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); } body dd { margin-left: 4.5ex; margin-bottom: 0.5em; } body details { margin-left: 4.5ex; } body 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; } body .fade { opacity: 0.3; } body .mark, body 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); } body .mark .mark, body mark .mark, body .mark mark, body 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); } body .mark .mark .mark, body mark .mark .mark, body .mark mark .mark, body mark mark .mark, body .mark .mark mark, body mark .mark mark, body .mark mark mark, body mark 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); } body .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); } body .todo, body .todo .panel { border-style: dashed; background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); } body .red { --bhsl-current-hue: var(--bhsl-red-hue); --bhsl-current-saturation: var(--bhsl-red-saturation); --bhsl-current-lightness: var(--bhsl-red-lightness); } body .yellow { --bhsl-current-hue: var(--bhsl-yellow-hue); --bhsl-current-saturation: var(--bhsl-yellow-saturation); --bhsl-current-lightness: var(--bhsl-yellow-lightness); } body .green { --bhsl-current-hue: var(--bhsl-green-hue); --bhsl-current-saturation: var(--bhsl-green-saturation); --bhsl-current-lightness: var(--bhsl-green-lightness); } body .cyan { --bhsl-current-hue: var(--bhsl-cyan-hue); --bhsl-current-saturation: var(--bhsl-cyan-saturation); --bhsl-current-lightness: var(--bhsl-cyan-lightness); } body .blue { --bhsl-current-hue: var(--bhsl-blue-hue); --bhsl-current-saturation: var(--bhsl-blue-saturation); --bhsl-current-lightness: var(--bhsl-blue-lightness); } body .magenta { --bhsl-current-hue: var(--bhsl-magenta-hue); --bhsl-current-saturation: var(--bhsl-magenta-saturation); --bhsl-current-lightness: var(--bhsl-magenta-lightness); } body input, body textarea, body select, body button { 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); } body input::placeholder, body textarea::placeholder, body select::placeholder, body button::placeholder { opacity: 1; color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4); } body input:hover, body textarea:hover, body select:hover, body button:hover { border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); } body input:hover::placeholder, body textarea:hover::placeholder, body select:hover::placeholder, body button:hover::placeholder { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); } body input:active, body textarea:active, body select:active, body button:active, body input:focus, body textarea:focus, body select:focus, body button:focus { border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); } body textarea { resize: vertical; } body input[type="text"], body input[type="password"], body input[type="email"], body input[type="number"], body input[type="search"], body input[type="tel"], body input[type="datetime-local"], body input[type="date"], body input[type="time"], body select:not([multiple]) { border-bottom-width: 2px; } body textarea, body select[multiple] { border-left-width: 2px; } body input[type="text"], body input[type="password"], body input[type="email"], body input[type="number"], body input[type="search"], body input[type="tel"], body input[type="datetime-local"], body input[type="date"], body input[type="time"], body textarea { cursor: text; } body select:not([multiple]), body select[multiple] { cursor: vertical-text; } body input[type="range"] { cursor: ew-resize; } body select:not([multiple]) optgroup, body select[multiple] 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); } body select:not([multiple]) optgroup option, body select[multiple] optgroup option { padding: 0.125em 0 0.125em 2ex; } body select:not([multiple]) option, body select[multiple] 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); } body input[type="radio"], body input[type="checkbox"] { appearance: none; cursor: pointer; width: 1em; height: 1em; padding: 2px; border-width: 2px; display: inline-flex; justify-content: center; align-items: center; } body input[type="radio"]::before, body input[type="checkbox"]::before { display: block; content: ""; width: 100%; height: 100%; } body input[type="radio"]:checked::before, body input[type="checkbox"]:checked::before { background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); } body input[type="radio"] { border-radius: 100%; } body input[type="radio"]::before { border-radius: 100%; } body 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]; } */ } body input[type="button"], body button { border-width: 2px; border-style: outset; } body input[type="button"]:active, body button:active { border-style: inset; } body input[type="file"], body input[type="color"] { padding: 0; } @media screen and (-webkit-min-device-pixel-ratio: 0) { body input[type="text"]::-webkit-calendar-picker-indicator, body input[type="password"]::-webkit-calendar-picker-indicator, body input[type="email"]::-webkit-calendar-picker-indicator, body input[type="number"]::-webkit-calendar-picker-indicator, body input[type="search"]::-webkit-calendar-picker-indicator, body input[type="tel"]::-webkit-calendar-picker-indicator, body input[type="datetime-local"]::-webkit-calendar-picker-indicator, body input[type="date"]::-webkit-calendar-picker-indicator, body input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000)); } body select:not([multiple]) optgroup, body select:not([multiple]) option { background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); } body select:not([multiple]) optgroup::before, body select:not([multiple]) option::before { content: ""; } } body .form-flex { display: flex; flex-direction: column; justify-content: stretch; } body .form-flex > p { margin: 0.5em 0; } body .form-flex > label { display: flex; gap: 1ex; } body .form-flex > label > span:first-child, body .form-flex > label > 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); } body .form-flex > label > span:first-child { text-align: right; } body .form-flex > label > span:last-child { text-align: left; } body .form-flex > label > input, body .form-flex > label textarea, body .form-flex > label select, body .form-flex > label button { flex-grow: 1; } body a { --bhsl-current-hue: var(--bhsl-link-hue); --bhsl-current-saturation: var(--bhsl-link-saturation); --bhsl-current-lightness: var(--bhsl-link-lightness); } body i { 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); } body em { 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); } body b { 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); } body 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); } body ins { --bhsl-current-hue: var(--bhsl-inserted-hue); --bhsl-current-saturation: var(--bhsl-inserted-saturation); --bhsl-current-lightness: var(--bhsl-inserted-lightness); } body del { --bhsl-current-hue: var(--bhsl-deleted-hue); --bhsl-current-saturation: var(--bhsl-deleted-saturation); --bhsl-current-lightness: var(--bhsl-deleted-lightness); } body code, body pre, body kbd, body samp { 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); } body pre { overflow-x: scroll; } body kbd, body samp { padding: 0 0.25ex; } body 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); } body kbd kbd { 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); } body 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); } body samp samp { 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); } body var { 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); } body cite { 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); } body dfn { 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); } body abbr { cursor: help; }