nimiq-vitepress-theme
Version:
Nimiq UI theme for VitePress
1,542 lines (1,348 loc) • 117 kB
CSS
/* layer: theme */
:root { --spacing: 0.25rem; --font-weight-semibold: 600; --colors-neutral-700: rgb(var(--nq-neutral-700)); --colors-white: #fff; --defaults-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --defaults-transition-duration: 150ms; --colors-neutral-300: rgb(var(--nq-neutral-300)); --colors-neutral-800: rgb(var(--nq-neutral-800)); --colors-neutral-200: rgb(var(--nq-neutral-200)); --colors-neutral-400: rgb(var(--nq-neutral-400)); --colors-neutral-100: rgb(var(--nq-neutral-100)); --colors-neutral-500: rgb(var(--nq-neutral-500)); --font-weight-light: 300; --tracking-wide: 0.025em; --font-weight-normal: 400; --colors-blue-400: rgb(var(--nq-blue-400)); --font-weight-bold: 700; --colors-neutral-900: rgb(var(--nq-neutral-900)); --ease-in: cubic-bezier(0.4, 0, 1, 1); --font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --defaults-font-family: var(--font-sans); --defaults-font-feature-settings: var(--font-sans--font-feature-settings); --defaults-font-variation-settings: var(--font-sans--font-variation-settings); --defaults-mono-font-family: var(--font-mono); --defaults-mono-font-feature-settings: var(--font-mono--font-feature-settings); --defaults-mono-font-variation-settings: var(--font-mono--font-variation-settings); }
/* layer: nq-layer-definition */
@layer nq-reset, nq-colors, nq-preflight, nq-typography, nq-utilities, nq-variants;
/* layer: nq-reset */
@layer nq-reset {
/*
Please read: https://github.com/unocss/unocss/blob/main/packages-presets/reset/tailwind-compat.md
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: var(--un-default-border-color, #e5e7eb); /* 2 */
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS.
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
/* Will affect the button style of most component libraries, so disable it */
/* https://github.com/unocss/unocss/issues/2127 */
/* background-color: transparent; !* 2 *! */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/*
Make elements with the HTML hidden attribute stay hidden by default.
*/
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
}
/* layer: preflights */
*, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var( --defaults-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' ); font-feature-settings: var(--defaults-font-feature-settings, normal); font-variation-settings: var(--defaults-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } body { line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var( --defaults-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace ); font-feature-settings: var(--defaults-mono-font-feature-settings, normal); font-variation-settings: var(--defaults-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; color: color-mix(in oklab, currentColor 50%, transparent); } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden='until-found'])) { display: none !important; }
@property --un-gradient-fn-from {
syntax: "<color>";
inherits: false;
initial-value: #000
}
@property --un-gradient-fn-to {
syntax: "<color>";
inherits: false;
initial-value: #000
}
@keyframes reka-down { from{ height: 0 } to { height: var(--reka-accordion-content-height)} }
@keyframes reka-up { from{ height: var(--reka-accordion-content-height)} to { height: 0 } }
@keyframes reka-collapsible-down { from{ height: 0 } to { height: var(--reka-collapsible-content-height)} }
@keyframes reka-collapsible-up { from{ height: var(--reka-collapsible-content-height)} to { height: 0 } }
@layer nq-typography {
:root {
/* Base font sizes */
--nq-m-min: 0;
--nq-m-max: 0;
/* Viewport widths */
--nq-screen-width-min: 320;
--nq-screen-width-max: 1152;
/* Base font sizes */
--font-size-min: 16;
--font-size-max: 16;
}
/**
* Make sure to import also nimiq-colors layer found in this package
**/
.nq-prose,
[nq-prose],
.nq-prose-compact,
[nq-prose-compact] {
margin-trim: block;
&:not(:where(.nq-prose-compact, [nq-prose-compact])) {
> *:not(:where(.nq-raw, .nq-raw *, .nq-not-prose, .nq-not-prose *, .shiki *)) {
padding-right: 2rem;
padding-left: 2rem;
&:last-child {
padding-bottom: 6rem;
@media (min-width: 1153px) {
padding-bottom: 8rem;
}
}
}
}
* {
/* Margin calculation */
--nq-margin-width-range: calc(var(--nq-screen-width-max) - var(--nq-screen-width-min));
--nq-margin-scale-factor: calc((100vw - (1px * var(--nq-screen-width-min))) / var(--nq-margin-width-range));
--nq-m-range: calc(var(--nq-m-max) - var(--nq-m-min));
--nq-m-fluid: calc(1px * var(--nq-m-min) + var(--nq-m-range) * var(--nq-margin-scale-factor));
--nq-m-size: clamp(calc(1px * var(--nq-m-min)), var(--nq-m-fluid), calc(var(--nq-m-max) * 1px));
}
> *:first-child {
margin-top: 0;
/* TODO Remove margin-top and margin-bottom on last element when margin-trim is widely supported */
}
> *:last-child {
margin-bottom: 0;
}
*:not(:where(.nq-raw, .nq-raw *, .nq-not-prose, .nq-not-prose *, .shiki *)) {
line-height: 1.5;
max-width: var(--nq-prose-max-width, 780px);
margin-left: auto;
margin-right: auto;
font-family: var(--nq-font-sans, 'Mulish');
&:where(h1) {
--font-size-min: 44;
--font-size-max: 48;
font-size: var(--font-size);
line-height: 1.5;
font-weight: 700;
}
&:where(h1 + *:not(:where(h1, h2, h3, h4))) {
--nq-m-min: 112;
--nq-m-max: 120;
margin-top: var(--nq-m-size);
}
&:where(h2) {
--font-size-min: 32;
--font-size-max: 38;
font-size: var(--font-size);
line-height: 1.3;
font-weight: 700;
margin-top: var(--nq-m-size);
margin-bottom: 24px;
--nq-m-min: 88;
--nq-m-max: 96;
&:where(h1 + h2) {
--nq-m-min: 40;
--nq-m-max: 48;
}
}
&:where(h3) {
--font-size-min: 26;
--font-size-max: 30;
font-size: var(--font-size);
line-height: 1.3;
font-weight: 700;
margin-bottom: 24px;
margin-top: var(--nq-m-size);
--nq-m-min: 88;
--nq-m-max: 96;
&:where(h2 + h3) {
--nq-m-min: 32;
--nq-m-max: 36;
}
}
&:where(h4) {
--font-size-min: 22;
--font-size-max: 26;
font-size: var(--font-size);
line-height: 1.3;
font-weight: 700;
margin-top: var(--nq-m-size);
margin-bottom: 24px;
--nq-m-min: 88;
--nq-m-max: 96;
}
&:where(h3 + h4) {
--nq-m-min: 32;
--nq-m-max: 36;
}
/* Anchors in headings */
&:where(h1, h2, h3, h4, h5, h6)[id] {
position: relative;
margin-left: -1.25rem;
padding-left: 1rem;
padding-right: 1rem;
width: 100%;
min-height: 1em;
color: rgb(var(--nq-neutral) / 1);
&::after {
content: '#';
opacity: 0;
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
transition: 50ms opacity var(--nq-ease, ease-in-out);
pointer-events: none;
}
@media (min-width: 769px) {
:where(&, &::after):hover {
&::after {
opacity: 0.5;
}
}
}
&:has(a:focus-visible) {
outline: 0.125rem solid rgb(var(--nq-blue));
outline-offset: 0.125rem;
}
> a {
position: absolute;
inset: 0;
padding-left: 20px;
font-size: inherit;
font-weight: inherit;
top: -6px;
color: rgb(var(--nq-neutral) / 1);
&::after {
position: absolute;
inset: 0;
}
}
}
&:where(p) {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
& + p {
margin-top: 16px;
}
}
&:where(figure) {
figcaption {
color: rgb(var(--nq-neutral-700));
font-size: 0.875em;
font-weight: 700;
line-height: 1.3125;
:where(.dark, [data-theme='dark']) & {
color: rgb(var(--nq-white) / 0.8);
}
}
}
&:where(blockquote) {
background: rgb(var(--nq-green-400));
--nq-m-min: 14;
--nq-m-max: 16;
padding: var(--nq-m-size);
border-radius: 6px;
box-shadow: 0 0 0 1.5px rgb(var(--nq-green-600));
font-weight: 600;
transform: translateX(-8px);
width: calc(100% + 16px);
--font-size-min: 12;
--font-size-max: 14;
font-size: var(--font-size);
}
&:where(img, video, iframe) {
border-radius: 6px;
--nq-m-min: 18;
--nq-m-max: 22;
margin-top: var(--nq-m-size);
&:has(+ figcaption) {
--nq-m-min: 12;
--nq-m-max: 16;
margin-bottom: var(--nq-m-size);
}
&:not(:has(+ figcaption)) {
--nq-m-min: 18;
--nq-m-max: 22;
margin-bottom: var(--nq-m-size);
}
}
/* Rules to use a wider container (8px on the sides). Mainly for phones */
&:where(img, video, iframe, table),
/* Select code and pre that are not child of p,ul,ol... */
&:where(code, pre):not(:where(:where(p, ul, ol, pre, code, table) :where(pre, code))) {
margin-left: -1.5rem;
width: min(calc(100% + 3rem), 700px);
@media (min-width: 768px) {
margin-left: 0;
width: 100%;
max-width: 100%;
}
}
&:where(ul) {
list-style: none;
margin-top: 24px;
margin-bottom: 24px;
li {
display: block;
position: relative;
margin: 16px 0 16px 20px;
@media screen and (min-width: 769px) {
margin-left: 32px;
}
@media screen and (min-width: 1153px) {
margin-left: 40px;
}
> ol li {
margin-left: 0;
}
:not(ul ol) &::before {
content: '';
width: 6px;
height: 6px;
border-radius: 3px;
background-color: currentColor;
opacity: 0.2;
display: inline-block;
margin-right: 12px;
position: absolute;
left: -20px;
top: 8px;
}
}
}
&:where(ol) {
list-style: none;
counter-reset: item;
margin-top: 24px;
margin-bottom: 24px;
li {
counter-increment: item;
position: relative;
margin: 16px 0 16px 20px;
@media screen and (min-width: 769px) {
margin-left: 32px;
}
@media screen and (min-width: 1153px) {
margin-left: 40px;
}
&::before {
content: counters(item, '.');
font-weight: 700;
display: inline-block;
margin-right: 12px;
position: absolute;
left: -20px;
color: currentColor;
opacity: 0.5;
top: 2px;
}
> ol {
counter-reset: subitem;
li {
counter-increment: subitem;
&::before {
content: counters(item, '.') '.' counter(subitem);
top: 0;
left: -32px;
}
}
}
}
}
:where(ol, ul) ol,
ul ul {
margin-top: 8px;
margin-bottom: 16px;
padding-left: 20px;
li {
margin-top: 0;
margin-left: 12px;
}
}
&:where(code, pre, kbd, pre *, code *) {
font-family: var(--nq-font-mono, 'Fira Code');
/* font-size-adjust: from-font;
TODO
Remove all font-sizes for Fira Code and instead using font-size-adjust to adjust the font-size to the parent element.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust
*/
}
&:where(code) {
font-size: 0.875em;
border-radius: 4px;
}
:where(:where(h1, h2, h3, h4, h5, h6, p, li, span, a) > code) {
padding: 0 0.25em;
}
&:where(pre) {
width: 100%;
font-size: 0.875em;
--nq-m-min: 20;
--nq-m-max: 24;
margin-top: var(--nq-m-size);
margin-bottom: var(--nq-m-size);
padding: 20px 24px;
border-radius: 6px;
outline: 1.5px solid rgb(var(--nq-neutral) / 0.08);
}
kbd {
padding: 0.25em 0.125em;
font-size: 0.875em;
color: rgba(var(--nq-neutral-800) / 1);
background-color: rgba(var(--nq-neutral-200) / 1);
border-radius: 0.25em;
box-shadow: 0 0 0 1px rgba(var(--nq-neutral-400) / 1);
margin: 0 0.25em -0.25em 0.25em;
white-space: nowrap;
line-height: 1;
}
&:where(pre, code):where(h1, h2, h3, h4 &) {
font-size: 0.8em;
padding: 2px 0.5rem;
position: relative;
top: -1px;
}
&:where(a) {
font-weight: 600;
text-decoration: none;
color: rgb(var(--nq-blue) / 1);
}
table {
--nq-m-min: 24;
--nq-m-max: 32;
margin-bottom: var(--nq-m-size);
margin-top: var(--nq-m-size);
display: block;
overflow-x: auto;
border-spacing: 0;
border-collapse: separate;
border-radius: 6px;
border: 1px solid rgb(var(--nq-neutral-300));
max-height: 90dvh;
max-width: max-content;
scroll-behavior: smooth;
code,
pre {
--line-height: 1.3;
padding: 4px 0.25rem;
position: relative;
}
th,
td {
padding: 12px 0.75rem;
}
thead th {
z-index: 1;
position: sticky;
top: -1px;
text-wrap: balance;
white-space: nowrap;
font-weight: 400;
color: rgb(var(--nq-neutral-800));
background-color: rgb(var(--nq-neutral-100));
}
tbody {
td {
vertical-align: initial;
text-wrap: balance;
}
> tr:not(:last-child) td {
border-bottom: 1px solid rgb(var(--nq-neutral-300));
}
}
/* Apply a border to the right of all but the last column */
th:not(:last-child),
td:not(:last-child) {
border-right: 1px solid rgb(var(--nq-neutral-300));
}
}
hr {
--nq-m-min: 20;
--nq-m-max: 24;
margin: var(--nq-m-size) auto;
width: 128px;
border-color: rgb(var(--nq-neutral-500));
}
details {
/* TODO Animate open/closing https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_the_details_element */
border-radius: 6px;
background-color: rgb(var(--nq-neutral-200));
--nq-m-min: 18;
--nq-m-max: 22;
margin-top: var(--nq-m-size);
margin-bottom: var(--nq-m-size);
color: rgb(var(--nq-neutral-900));
box-shadow: 0 0 0 1.5px rgb(var(--nq-neutral) / 0.1);
::marker {
color: transparent;
}
summary {
padding: 14px 2rem 14px calc(0.7rem + 2.3em);
font-size: 1em;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
&::before {
content: '';
--icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTIgMS40MTNBLjguOCAwIDAxMy4yMTIuNzI3bDcuNjQ1IDQuNTg3YS44LjggMCAwMTAgMS4zNzJsLTcuNjQ1IDQuNTg3QS44LjggMCAwMTIgMTAuNTg3eiIvPjwvc3ZnPg==);
-webkit-mask: var(--icon) no-repeat;
mask: var(--icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
background-color: currentColor;
color: inherit;
width: 0.622em;
height: 0.622em;
transition: transform 100ms ease-out;
display: inline-block;
position: absolute;
left: 0;
padding-left: 4rem;
}
}
&[open] summary {
&::before {
transform: rotate(90deg);
}
}
> *:not(summary) {
padding: 0 1rem 14px 1rem;
}
}
}
}
}
/* layer: nq-colors */
@layer nq-colors {
:root {
/* Background gradients */
--nq-darkblue: 31 35 72;
--nq-darkerblue: 23 24 43;
--nq-white: 255 255 255;
--nq-blue-sss: 44 114 199;
--nq-neutral-on-light: var(--nq-darkblue);
--nq-neutral-on-light-0: var(--nq-white);
--nq-neutral-on-light-50: 251 251 251;
--nq-neutral-on-light-100: 248 248 248;
--nq-neutral-on-light-200: 244 244 246;
--nq-neutral-on-light-300: 238 238 241;
--nq-neutral-on-light-400: 228 228 233;
--nq-neutral-on-light-500: 210 211 218;
--nq-neutral-on-light-600: 199 200 209;
--nq-neutral-on-light-700: 143 145 164;
--nq-neutral-on-light-800: 121 123 145;
--nq-neutral-on-light-900: 76 79 109;
--nq-neutral-on-dark: var(--nq-white);
--nq-neutral-on-dark-0: var(--nq-darkerblue);
--nq-neutral-on-dark-50: 28 29 47;
--nq-neutral-on-dark-100: 30 31 49;
--nq-neutral-on-dark-200: 35 36 54;
--nq-neutral-on-dark-300: 39 40 58;
--nq-neutral-on-dark-400: 46 47 64;
--nq-neutral-on-dark-500: 69 70 85;
--nq-neutral-on-dark-600: 81 82 96;
--nq-neutral-on-dark-700: 139 139 149;
--nq-neutral-on-dark-800: 162 163 170;
--nq-neutral-on-dark-900: 209 209 213;
--nq-neutral-on-light-gradient-from: oklch(27.37% 0.068 276.29);
--nq-neutral-on-light-gradient-to: oklch(20.18% 0.0962 315.41);
--nq-neutral-on-light-gradient: radial-gradient(
100% 100% at 100% 100%,
var(--nq-neutral-on-light-gradient-from) 0%,
var(--nq-neutral-on-light-gradient-to) 100%
);
--nq-neutral-on-dark-gradient-from: oklch(15.53% 0.075 316.25);
--nq-neutral-on-dark-gradient-to: oklch(22.21% 0.0524 276.47);
--nq-neutral-on-dark-gradient: radial-gradient(
at 100% 100%,
var(--nq-neutral-on-dark-gradient-from) 0%,
var(--nq-neutral-on-dark-gradient-to) 100%
);
--nq-neutral-on-dark-gradient: radial-gradient(
100% 100% at 100% 100%,
var(--nq-neutral-on-dark-gradient-from) 0%,
var(--nq-neutral-on-dark-gradient-to) 100%
);
--nq-blue-on-light: 5 130 202;
--nq-blue-on-light-400: 230 242 250;
--nq-blue-on-light-500: 205 230 244;
--nq-blue-on-light-600: 191 224 242;
--nq-blue-on-light-1100: 4 99 154;
--nq-blue-on-dark: 12 166 254;
--nq-blue-on-dark-400: 22 39 64;
--nq-blue-on-dark-500: 20 52 85;
--nq-blue-on-dark-600: 20 60 96;
--nq-blue-on-dark-1100: 12 166 254;
--nq-blue-on-light-gradient-from: oklch(51.82% 0.1965 263.04);
--nq-blue-on-light-gradient-to: oklch(58.49% 0.1438 244.29);
--nq-blue-on-light-gradient: radial-gradient(
at 100% 100%,
var(--nq-blue-on-light-gradient-from) 0%,
var(--nq-blue-on-light-gradient-to) 100%
);
--nq-blue-on-light-gradient-darkened-from: oklch(48.57% 0.182 263.07);
--nq-blue-on-light-gradient-darkened-to: oklch(54.04% 0.153 250.02);
--nq-blue-on-light-gradient-darkened: radial-gradient(
at 100% 100%,
var(--nq-blue-on-light-gradient-darkened-from),
var(--nq-blue-on-light-gradient-darkened-to)
);
--nq-blue-on-dark-gradient-from: oklch(60.45% 0.1951 255.01);
--nq-blue-on-dark-gradient-to: oklch(69.82% 0.1694 243.83);
--nq-blue-on-dark-gradient: radial-gradient(
at 100% 100%,
var(--nq-blue-on-dark-gradient-from) 0%,
var(--nq-blue-on-dark-gradient-to) 100%
);
--nq-blue-on-dark-gradient-darkened-from: oklch(57.55% 0.1828 254.79);
--nq-blue-on-dark-gradient-darkened-to: oklch(65.46% 0.1583 243.94);
--nq-blue-on-dark-gradient-darkened: radial-gradient(
at 100% 100%,
var(--nq-blue-on-dark-gradient-darkened-from) 0%,
var(--nq-blue-on-dark-gradient-darkened-to) 100%
);
--nq-green-on-light: 19 181 157;
--nq-green-on-light-400: 231 247 245;
--nq-green-on-light-500: 208 240 235;
--nq-green-on-light-600: 196 237 231;
--nq-green-on-light-1100: 14 134 116;
--nq-green-on-dark: 36 204 162;
--nq-green-on-dark-400: 25 42 55;
--nq-green-on-dark-500: 25 60 66;
--nq-green-on-dark-600: 26 69 73;
--nq-green-on-dark-1100: 36 204 162;
--nq-green-on-light-gradient-from: oklch(65.17% 0.0971 176.55);
--nq-green-on-light-gradient-to: rgb(var(--nq-green-on-light));
--nq-green-on-light-gradient: radial-gradient(
at 100% 100%,
var(--nq-green-on-light-gradient-from) 0%,
var(--nq-green-on-light-gradient-to) 100%
);
--nq-green-on-light-gradient-darkened-from: oklch(62.31% 0.0909 178.94);
--nq-green-on-light-gradient-darkened-to: oklch(68.73% 0.1184 180.55);
--nq-green-on-light-gradient-darkened: radial-gradient(
at 100% 100%,
var(--nq-green-on-light-gradient-darkened-from),
var(--nq-green-on-light-gradient-darkened-to)
);
--nq-green-on-dark-gradient-from: oklch(71.42% 0.1457 167.35);
--nq-green-on-dark-gradient-to: oklch(75.5% 0.1426 170.23);
--nq-green-on-dark-gradient: radial-gradient(
at 100% 100%,
var(--nq-green-on-dark-gradient-from) 0%,
var(--nq-green-on-dark-gradient-to) 100%
);
--nq-green-on-dark-gradient-darkened-from: oklch(71.42% 0.1457 167.35);
--nq-green-on-dark-gradient-darkened-to: oklch(69.71% 0.1299 170.59);
--nq-green-on-dark-gradient-darkened: radial-gradient(
at 100% 100%,
var(--nq-green-on-dark-gradient-darkened-from) 0%,
var(--nq-green-on-dark-gradient-darkened-to) 100%
);
--nq-orange-on-light: 252 135 2;
--nq-orange-on-light-400: 248 237 223;
--nq-orange-on-light-500: 254 231 204;
--nq-orange-on-light-600: 254 225 191;
--nq-orange-on-light-1100: 224 120 2;
--nq-orange-on-dark: 255 153 0;
--nq-orange-on-dark-400: 46 37 39;
--nq-orange-on-dark-500: 69 50 34;
--nq-orange-on-dark-600: 81 56 32;
--nq-orange-on-dark-1100: 255 153 0;
--nq-orange-on-light-gradient: radial-gradient(at 100% 100%, #fd6216, rgb(var(--nq-orange-on-light)));
--nq-orange-on-light-gradient-darkened: radial-gradient(at 100% 100%, #ea5200, #fc7500);
--nq-orange-on-dark-gradient: radial-gradient(at 100% 100%, #ff8800 0%, #ff9900 100%);
--nq-orange-on-dark-gradient-darkened: radial-gradient(at 100% 100%, #ff8800 0%, #f29202 100%);
--nq-orange-on-light-gradient-from: oklch(68.83% 0.2036 41.13);
--nq-orange-on-light-gradient-to: rgb(var(--nq-orange-on-light));
--nq-orange-on-light-gradient: radial-gradient(
at 100% 100%,
var(--nq-orange-on-light-gradient-from) 0%,
var(--nq-orange-on-light-gradient-to) 100%
);
--nq-orange-on-light-gradient-darkened-from: oklch(63.87% 0.2 40.09);
--nq-orange-on-light-gradient-darkened-to: oklch(71.15% 0.1903 49.18);
--nq-orange-on-light-gradient-darkened: radial-gradient(
at 100% 100%,
var(--nq-orange-on-light-gradient-darkened-from),
var(--nq-orange-on-light-gradient-darkened-to)
);
--nq-orange-on-dark-gradient-from: oklch(74.42% 0.1811 56.46);
--nq-orange-on-dark-gradient-to: oklch(77.2% 0.1737 64.55);
--nq-orange-on-dark-gradient: radial-gradient(
at 100% 100%,
var(--nq-orange-on-dark-gradient-from) 0%,
var(--nq-orange-on-dark-gradient-to) 100%
);
--nq-orange-on-dark-gradient-darkened-from: oklch(74.42% 0.1811 56.46);
--nq-orange-on-dark-gradient-darkened-to: oklch(74.38% 0.1665 65.03);
--nq-orange-on-dark-gradient-darkened: radial-gradient(
at 100% 100%,
var(--nq-orange-on-dark-gradient-darkened-from) 0%,
var(--nq-orange-on-dark-gradient-darkened-to) 100%
);
--nq-red-on-light: 217 68 50;
--nq-red-on-light-400: 251 236 234;
--nq-red-on-light-500: 247 218 214;
--nq-red-on-light-600: 245 208 204;
--nq-red-on-light-1100: 181 49 33;
--nq-red-on-dark: 255 92 72;
--nq-red-on-dark-400: 47 31 46;
--nq-red-on-dark-500: 69 37 48;
--nq-red-on-dark-600: 81 41 50;
--nq-red-on-dark-1100: 255 92 72;
--nq-red-on-light-gradient-from: oklch(55.99% 0.1909 18.32);
--nq-red-on-light-gradient-to: oklch(59.8% 0.1886 30.3);
--nq-red-on-light-gradient: radial-gradient(
at 100% 100%,
var(--nq-red-on-light-gradient-from) 0%,
var(--nq-red-on-light-gradient-to) 100%
);
--nq-red-on-light-gradient-darkened-from: oklch(53.44% 0.1811 16.77);
--nq-red-on-light-gradient-darkened-to: oklch(56.53% 0.1974 26.27);
--nq-red-on-light-gradient-darkened: radial-gradient(
at 100% 100%,
var(--nq-red-on-light-gradient-darkened-from),
var(--nq-red-on-light-gradient-darkened-to)
);
--nq-red-on-dark-gradient-from: oklch(65.15% 0.2353 31.02);
--nq-red-on-dark-gradient-to: oklch(68.81% 0.201 30.028);
--nq-red-on-dark-gradient: radial-gradient(
at 100% 100%,
var(--nq-red-on-dark-gradient-from) 0%,
var(--nq-red-on-dark-gradient-to) 100%
);
--nq-red-on-dark-gradient-darkened-from: oklch(65.15% 0.2353 31.02);
--nq-red-on-dark-gradient-darkened-to: oklch(66.33% 0.1852 30.4);
--nq-red-on-dark-gradient-darkened: radial-gradient(
at 100% 100%,
var(--nq-red-on-dark-gradient-darkened-from) 0%,
var(--nq-red-on-dark-gradient-darkened-to) 100%
);
--nq-gold-on-light: 233 178 19;
--nq-gold-on-light-400: 253 247 231;
--nq-gold-on-light-500: 251 240 208;
--nq-gold-on-light-600: 249 236 196;
--nq-gold-on-light-1100: 184 140 15;
--nq-gold-on-dark: 255 196 59;
--nq-gold-on-dark-400: 47 42 45;
--nq-gold-on-dark-500: 69 58 46;
--nq-gold-on-dark-600: 81 67 47;
--nq-gold-on-dark-1100: 255 196 59;
--nq-gold-on-light-gradient-from: oklch(74.94% 0.1565 69.51);
--nq-gold-on-light-gradient-to: rgb(var(--nq-gold-on-light));
--nq-gold-on-light-gradient: radial-gradient(
at 100% 100%,
var(--nq-gold-on-light-gradient-from) 0%,
var(--nq-gold-on-light-gradient-to) 100%
);
--nq-gold-on-light-gradient-darkened-from: oklch(71.43% 0.1554 63.42);
--nq-gold-on-light-gradient-darkened-to: oklch(75.75% 0.1547 78.24);
--nq-gold-on-light-gradient-darkened: radial-gradient(
at 100% 100%,
var(--nq-gold-on-light-gradient-darkened-from),
var(--nq-gold-on-light-gradient-darkened-to)
);
--nq-gold-on-dark-gradient-from: oklch(81.63% 0.1548 72.79);
--nq-gold-on-dark-gradient-to: oklch(85.17% 0.15 83.76);
--nq-gold-on-dark-gradient: radial-gradient(
at 100% 100%,
var(--nq-gold-on-dark-gradient-from) 0%,
var(--nq-gold-on-dark-gradient-to) 100%
);
--nq-gold-on-dark-gradient-darkened-from: oklch(81.63% 0.1548 72.79);
--nq-gold-on-dark-gradient-darkened-to: oklch(82.21% 0.1507 83.64);
--nq-gold-on-dark-gradient-darkened: radial-gradient(
at 100% 100%,
var(--nq-gold-on-dark-gradient-darkened-from) 0%,
var(--nq-gold-on-dark-gradient-darkened-to) 100%
);
--nq-purple-on-light: 95 75 139;
--nq-purple-on-light-400: 239 237 243;
--nq-purple-on-light-500: 223 219 232;
--nq-purple-on-light-600: 215 210 226;
--nq-purple-on-light-1100: 72 57 106;
--nq-purple-on-dark: 143 63 213;
--nq-purple-on-dark-400: 35 28 60;
--nq-purple-on-dark-500: 47 32 77;
--nq-purple-on-dark-600: 53 34 85;
--nq-purple-on-dark-1100: 143 63 213;
--nq-neutral: var(--nq-neutral-on-light);
--nq-neutral-0: var(--nq-neutral-on-light-0);
--nq-neutral-50: var(--nq-neutral-on-light-50);
--nq-neutral-100: var(--nq-neutral-on-light-100);
--nq-neutral-200: var(--nq-neutral-on-light-200);
--nq-neutral-300: var(--nq-neutral-on-light-300);
--nq-neutral-400: var(--nq-neutral-on-light-400);
--nq-neutral-500: var(--nq-neutral-on-light-500);
--nq-neutral-600: var(--nq-neutral-on-light-600);
--nq-neutral-700: var(--nq-neutral-on-light-700);
--nq-neutral-800: var(--nq-neutral-on-light-800);
--nq-neutral-900: var(--nq-neutral-on-light-900);
--nq-neutral-1100: var(--nq-neutral-on-light-1100);
--nq-neutral-gradient: var(--nq-neutral-on-light-gradient);
--nq-blue: var(--nq-blue-on-light);
--nq-blue-400: var(--nq-blue-on-light-400);
--nq-blue-500: var(--nq-blue-on-light-500);
--nq-blue-600: var(--nq-blue-on-light-600);
--nq-blue-1100: var(--nq-blue-on-light-1100);
--nq-blue-gradient: var(--nq-blue-on-light-gradient);
--nq-blue-gradient-from: var(--nq-blue-on-light-gradient-from);
--nq-blue-gradient-to: var(--nq-blue-on-light-gradient-to);
--nq-blue-gradient-darkened: var(--nq-blue-on-light-gradient-darkened);
--nq-blue-gradient-darkened-from: var(--nq-blue-on-light-gradient-darkened-from);
--nq-blue-gradient-darkened-to: var(--nq-blue-on-light-gradient-darkened-to);
--nq-green: var(--nq-green-on-light);
--nq-green-400: var(--nq-green-on-light-400);
--nq-green-500: var(--nq-green-on-light-500);
--nq-green-600: var(--nq-green-on-light-600);
--nq-green-1100: var(--nq-green-on-light-1100);
--nq-green-gradient: var(--nq-green-on-light-gradient);
--nq-green-gradient-from: var(--nq-green-on-light-gradient-from);
--nq-green-gradient-to: var(--nq-green-on-light-gradient-to);
--nq-green-gradient-darkened: var(--nq-green-on-light-gradient-darkened);
--nq-green-gradient-darkened-from: var(--nq-green-on-light-gradient-darkened-from);
--nq-green-gradient-darkened-to: var(--nq-green-on-light-gradient-darkened-to);
--nq-orange: var(--nq-orange-on-light);
--nq-orange-400: var(--nq-orange-on-light-400);
--nq-orange-500: var(--nq-orange-on-light-500);
--nq-orange-600: var(--nq-orange-on-light-600);
--nq-orange-1100: var(--nq-orange-on-light-1100);
--nq-orange-gradient: var(--nq-orange-on-light-gradient);
--nq-orange-gradient-from: var(--nq-orange-on-light-gradient-from);
--nq-orange-gradient-to: var(--nq-orange-on-light-gradient-to);
--nq-orange-gradient-darkened: var(--nq-orange-on-light-gradient-darkened);
--nq-orange-gradient-darkened-from: var(--nq-orange-on-light-gradient-darkened-from);
--nq-orange-gradient-darkened-to: var(--nq-orange-on-light-gradient-darkened-to);
--nq-red: var(--nq-red-on-light);
--nq-red-400: var(--nq-red-on-light-400);
--nq-red-500: var(--nq-red-on-light-500);
--nq-red-600: var(--nq-red-on-light-600);
--nq-red-1100: var(--nq-red-on-light-1100);
--nq-red-gradient: var(--nq-red-on-light-gradient);
--nq-red-gradient-from: var(--nq-red-on-light-gradient-from);
--nq-red-gradient-to: var(--nq-red-on-light-gradient-to);
--nq-red-gradient-darkened: var(--nq-red-on-light-gradient-darkened);
--nq-red-gradient-darkened-from: var(--nq-red-on-light-gradient-darkened-from);
--nq-red-gradient-darkened-to: var(--nq-red-on-light-gradient-darkened-to);
--nq-gold: var(--nq-gold-on-light);
--nq-gold-400: var(--nq-gold-on-light-400);
--nq-gold-500: var(--nq-gold-on-light-500);
--nq-gold-600: var(--nq-gold-on-light-600);
--nq-gold-1100: var(--nq-gold-on-light-1100);
--nq-gold-gradient: var(--nq-gold-on-light-gradient);
--nq-gold-gradient-from: var(--nq-gold-on-light-gradient-from);
--nq-gold-gradient-to: var(--nq-gold-on-light-gradient-to);
--nq-gold-gradient-darkened: var(--nq-gold-on-light-gradient-darkened);
--nq-gold-gradient-darkened-from: var(--nq-gold-on-light-gradient-darkened-from);
--nq-gold-gradient-darkened-to: var(--nq-gold-on-light-gradient-darkened-to);
--nq-purple: var(--nq-purple-on-light);
--nq-purple-400: var(--nq-purple-on-light-400);
--nq-purple-500: var(--nq-purple-on-light-500);
--nq-purple-600: var(--nq-purple-on-light-600);
}
.dark,
&[data-theme='dark'],
:where(.bg-darkblue &, &:where(.bg-darkblue, [bg-darkblue])),
:where(.bg-neutral &, &:where(.bg-neutral, [bg-neutral])),
:where(.bg-darkerblue &, &:where(.bg-darkerblue, [bg-darkerblue])) {
--nq-neutral: var(--nq-neutral-on-dark);
--nq-neutral-0: var(--nq-neutral-on-dark-0);
--nq-neutral-50: var(--nq-neutral-on-dark-50);
--nq-neutral-100: var(--nq-neutral-on-dark-100);
--nq-neutral-200: var(--nq-neutral-on-dark-200);
--nq-neutral-300: var(--nq-neutral-on-dark-300);
--nq-neutral-400: var(--nq-neutral-on-dark-400);
--nq-neutral-500: var(--nq-neutral-on-dark-500);
--nq-neutral-600: var(--nq-neutral-on-dark-600);
--nq-neutral-700: var(--nq-neutral-on-dark-700);
--nq-neutral-800: var(--nq-neutral-on-dark-800);
--nq-neutral-900: var(--nq-neutral-on-dark-900);
--nq-neutral-1100: var(--nq-neutral-on-dark-1100);
--nq-neutral-gradient: var(--nq-neutral-on-dark-gradient);
--nq-blue: var(--nq-blue-on-dark);
--nq-blue-400: var(--nq-blue-on-dark-400);
--nq-blue-500: var(--nq-blue-on-dark-500);
--nq-blue-600: var(--nq-blue-on-dark-600);
--nq-blue-1100: var(--nq-blue-on-dark-1100);
--nq-blue-gradient-from: var(--nq-blue-on-dark-gradient-from);
--nq-blue-gradient-to: var(--nq-blue-on-dark-gradient-to);
--nq-blue-gradient: var(--nq-blue-on-dark-gradient);
--nq-blue-gradient-darkened-from: var(--nq-blue-on-dark-gradient-darkened-from);
--nq-blue-gradient-darkened-to: var(--nq-blue-on-dark-gradient-darkened-to);
--nq-blue-gradient-darkened: var(--nq-blue-on-dark-gradient-darkened);
--nq-green: var(--nq-green-on-dark);
--nq-green-400: var(--nq-green-on-dark-400);
--nq-green-500: var(--nq-green-on-dark-500);
--nq-green-600: var(--nq-green-on-dark-600);
--nq-green-1100: var(--nq-green-on-dark-1100);
--nq-green-gradient: var(--nq-green-on-dark-gradient);
--nq-green-gradient-from: var(--nq-green-on-dark-gradient-from);
--nq-green-gradient-to: var(--nq-green-on-dark-gradient-to);
--nq-green-gradient-darkened: var(--nq-green-on-dark-gradient-darkened);
--nq-green-gradient-darkened-from: var(--nq-green-on-dark-gradient-darkened-from);
--nq-green-gradient-darkened-to: var(--nq-green-on-dark-gradient-darkened-to);
--nq-orange: var(--nq-orange-on-dark);
--nq-orange-400: var(--nq-orange-on-dark-400);
--nq-orange-500: var(--nq-orange-on-dark-500);
--nq-orange-600: var(--nq-orange-on-dark-600);
--nq-orange-1100: var(--nq-orange-on-dark-1100);
--nq-orange-gradient: var(--nq-orange-on-dark-gradient);
--nq-orange-gradient-from: var(--nq-orange-on-dark-gradient-from);
--nq-orange-gradient-to: var(--nq-orange-on-dark-gradient-to);
--nq-orange-gradient-darkened: var(--nq-orange-on-dark-gradient-darkened);
--nq-orange-gradient-darkened-from: var(--nq-orange-on-dark-gradient-darkened-from);
--nq-orange-gradient-darkened-to: var(--nq-orange-on-dark-gradient-darkened-to);
--nq-red: var(--nq-red-on-dark);
--nq-red-400: var(--nq-red-on-dark-400);
--nq-red-500: var(--nq-red-on-dark-500);
--nq-red-600: var(--nq-red-on-dark-600);
--nq-red-1100: var(--nq-red-on-dark-1100);
--nq-red-gradient: var(--nq-red-on-dark-gradient);
--nq-red-gradient-from: var(--nq-red-on-dark-gradient-from);
--nq-red-gradient-to: var(--nq-red-on-dark-gradient-to);
--nq-red-gradient-darkened: var(--nq-red-on-dark-gradient-darkened);
--nq-red-gradient-darkened-from: var(--nq-red-on-dark-gradient-darkened-from);
--nq-red-gradient-darkened-to: var(--nq-red-on-dark-gradient-darkened-to);
--nq-gold: var(--nq-gold-on-dark);
--nq-gold-400: var(--nq-gold-on-dark-400);
--nq-gold-500: var(--nq-gold-on-dark-500);
--nq-gold-600: var(--nq-gold-on-dark-600);
--nq-gold-1100: var(--nq-gold-on-dark-1100);
--nq-gold-gradient: var(--nq-gold-on-dark-gradient);
--nq-gold-gradient-from: var(--nq-gold-on-dark-gradient-from);
--nq-gold-gradient-to: var(--nq-gold-on-dark-gradient-to);
--nq-gold-gradient-darkened: var(--nq-gold-on-dark-gradient-darkened);
--nq-gold-gradient-darkened-from: var(--nq-gold-on-dark-gradient-darkened-from);
--nq-gold-gradient-darkened-to: var(--nq-gold-on-dark-gradient-darkened-to);
--nq-purple: var(--nq-purple-on-dark);
--nq-purple-400: var(--nq-purple-on-dark-400);
--nq-purple-500: var(--nq-purple-on-dark-500);
--nq-purple-600: var(--nq-purple-on-dark-600);
--nq-purple-1100: var(--nq-purple-on-dark-1100);
}
}
/* layer: nq-preflight */
@layer nq-preflight {
:root {
--nq-ease: cubic-bezier(0.25, 0, 0, 1);
--nq-shadow:
0px 18px 38px rgba(31 35 72 / 0.07), 0px 7px 8.5px rgba(31 35 72 / 0.04), 0px 2px 2.5px rgba(31 35 72 / 0.02);
--nq-shadow-lg:
0px 6px 20px rgba(59 76 106 / 0.13), 0px 1.34018px 4.46726px rgba(59 76 106 / 0.0774939),
0px 0.399006px 1.33002px rgba(59 76 106 / 0.0525061);
/* This is the old box-shadox from nimiq-style framework. It stays here for reference */
/* box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15); */
/* box-shadow: 0 0.5rem 2.5rem rgba(0, 0, 0, 0.15); */
--nq-track: rgb(var(--nq-neutral-200));
--nq-thumb: rgb(var(--nq-neutral-600));
--nq-font-sans:
'Mulish', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
--nq-font-mono:
'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
:where(*:not(:where(.nq-raw *, [nq-raw] *))) {
/* Font size calculation */
--f-font-width-range: calc(var(--nq-screen-width-max) - var(--nq-screen-width-min));
--f-font-scale-factor: calc((100vw - (1px * var(--nq-screen-width-min))) / var(--f-font-width-range));
--font-size-range: calc(var(--font-size-max) - var(--font-size-min));
--font-size-fluid: calc(1px * var(--font-size-min) + var(--font-size-range) * var(--f-font-scale-factor));
--font-size: clamp(calc(1px * var(--font-size-min)), var(--font-size-fluid), calc(var(--font-size-max) * 1px));
border-color: rgb(var(--nq-neutral-400));
outline-color: rgb(var(--nq-blue));
outline-width: 1.5px;
overscroll-behavior-x: contain;
&:where(:not(:where(code, pre))) {
font-family: var(--nq-font-sans, 'Mulish');
}
&:where(code, pre, pre *, code *) {
font-family: var(--nq-font-mono, 'Fira Code');
/* font-size-adjust: from-font;
TODO
Remove all font-sizes for Fira Code and instead using font-size-adjust to adjust the font-size to the parent element.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust
*/
}
&:where(*, *:before, *:after) {
box-sizing: inherit;
}
&:where(body) {
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
min-width: 300px;
min-height: 100vh;
min-height: 100dvh;
color: rgb(var(--nq-neutral-900));
background-color: rgb(var(--nq-neutral-0));
:where([data-inverted] *) & {
color: rgb(var(--nq-neutral-0) / 0.8);
}
}
&:where(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
width: 100%;
max-width: 100%;
font-weight: bold;
font-size: var(--font-size);
line-height: 1.2;
/* We change the color except if there is parent that change the color */
:where(:not(.nq-no-color, [nq-no-color])):not(:has(.nq-no-color, [nq-no-color])) {
color: rgb(var(--nq-neutral));
}
/* margin: 1em 0; */
/* text-box-trim: both;
text-box-edge: cap alphabetic; */
}
&:where(h1) {
--font-size-min: 24;
--font-size-max: 32;
}
&:where(h2) {
--font-size-max: 20;
--font-size-min: 24;
}
&:where(p) {
--line-height: 1.3125;
}
small {
--font-size-min: 12;
--font-size-max: 14;
font-size: var(--font-size);
line-height: 1.2;
font-weight: 600;
}
&:where(p, li) {
text-wrap: pretty;
}
/* Hide empty paragraphs. This is mostly for the markdown */
&:where(p, span):empty {
display: none;
}
&:where(a) {
cursor: pointer;
}
&:where(blockquote p, blockquote p > :where(em, b)) {
color: rgb(var(--nq-green));
}
&:not(:where(.shiki *)):where(code, pre) {
color: rgb(var(--nq-neutral-900));
--font-size-min: 14;
--font-size-max: 16;
font-size: var(--font-size);
overflow-x: auto;
/* Scroll colors */
--nq-track: rgb(var(--nq-neutral-500));
--nq-thumb: rgb(var(--nq-neutral-700) / 0.75);
}
&:where(code) {
line-height: 1.875rem;
}
:where(:where(h1, h2, h3, h4, h5, h6, p, li, span, a) > code) {
background-color: rgb(var(--nq-neutral-200));
}
&:where(pre) {
background-color: rgb(var(--nq-neutral-50));
}
/* Links & buttons clickable */
&:where(a, button:not([disabled])) {
position: relative;
@media not all and (hover: hover) {
&::before {
content: '';
position: absolute;
left: -1rem;
top: -1rem;
right: -1rem;
bottom: -1rem;
}
}
}
&:where(input[type='text'], textarea) {
caret-color: rgb(var(--nq-blue));
}
}
}
/* layer: icons */
.i-tabler\:align-left,
[i-tabler\:align-left=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' %3E%3Cpath fill='none' stroke='c