forked from GitHub/quartz
1469 lines
49 KiB
SCSS
1469 lines
49 KiB
SCSS
@use "sass:map";
|
|
@use "sass:meta";
|
|
@use "sass:string";
|
|
@use "sass:list";
|
|
@use "sass:color";
|
|
@use "fonts";
|
|
|
|
@use "overrides";
|
|
|
|
/* Get an option from a set. */
|
|
@function get($collection, $value, $sub: false) {
|
|
@if $sub {
|
|
@return map-get(#{$collection}, #{$value});
|
|
} @else {
|
|
@return map-get(#{$collection}, #{$sub}, #{$value});
|
|
}
|
|
}
|
|
|
|
/* Color converter*/
|
|
@function color_convert($color, $opacity: 0%) {
|
|
@return color-mix(in srgb, #{$color}, #0000 calc(100% - #{$opacity}));
|
|
}
|
|
|
|
/* Callouts */
|
|
$callout-types: "note", "abstract", "info", "todo", "tip", "success", "question", "warning",
|
|
"failure", "danger", "bug", "example", "quote";
|
|
|
|
:root {
|
|
--anim-duration-none: 0;
|
|
--anim-duration-superfast: 70ms;
|
|
--anim-duration-fast: 140ms;
|
|
--anim-duration-moderate: 300ms;
|
|
--anim-duration-slow: 560ms;
|
|
--anim-motion-smooth: cubic-bezier(0.45, 0.05, 0.55, 0.95);
|
|
--anim-motion-delay: cubic-bezier(0.65, 0.05, 0.36, 1);
|
|
--anim-motion-jumpy: cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
|
--anim-motion-swing: cubic-bezier(0, 0.55, 0.45, 1);
|
|
--blockquote-border-thickness: 2px;
|
|
--blockquote-border-color: var(--interactive-accent);
|
|
--blockquote-font-style: normal;
|
|
--blockquote-color: inherit;
|
|
--blockquote-background-color: transparent;
|
|
--bold-modifier: 200;
|
|
--bold-color: inherit;
|
|
--bold-weight: calc(var(--font-weight) + var(--bold-modifier));
|
|
--border-width: 1px;
|
|
--button-radius: var(--input-radius);
|
|
--callout-border-width: 0px;
|
|
--callout-border-opacity: 0.25;
|
|
--callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6);
|
|
--callout-radius: var(--radius-s);
|
|
--callout-blend-mode: var(--highlight-mix-blend-mode);
|
|
--callout-title-color: inherit;
|
|
--callout-title-padding: 0;
|
|
--callout-title-size: inherit;
|
|
--callout-title-weight: calc(var(--font-weight) + var(--bold-modifier));
|
|
--callout-content-padding: 0;
|
|
--callout-content-background: transparent;
|
|
--callout-bug: var(--color-red-rgb);
|
|
--callout-default: var(--color-blue-rgb);
|
|
--callout-error: var(--color-red-rgb);
|
|
--callout-example: var(--color-purple-rgb);
|
|
--callout-fail: var(--color-red-rgb);
|
|
--callout-important: var(--color-cyan-rgb);
|
|
--callout-info: var(--color-blue-rgb);
|
|
--callout-question: var(--color-orange-rgb);
|
|
--callout-success: var(--color-green-rgb);
|
|
--callout-summary: var(--color-cyan-rgb);
|
|
--callout-tip: var(--color-cyan-rgb);
|
|
--callout-todo: var(--color-blue-rgb);
|
|
--callout-warning: var(--color-orange-rgb);
|
|
--callout-quote: 158, 158, 158;
|
|
--callout-abstract: var(--callout-summary);
|
|
--callout-note: var(--callout-default);
|
|
--callout-failure: var(--callout-fail);
|
|
--callout-danger: var(--callout-error);
|
|
--canvas-background: var(--background-primary);
|
|
--canvas-card-label-color: var(--text-faint);
|
|
--canvas-color-1: var(--color-red-rgb);
|
|
--canvas-color-2: var(--color-orange-rgb);
|
|
--canvas-color-3: var(--color-yellow-rgb);
|
|
--canvas-color-4: var(--color-green-rgb);
|
|
--canvas-color-5: var(--color-cyan-rgb);
|
|
--canvas-color-6: var(--color-purple-rgb);
|
|
--canvas-dot-pattern: var(--color-base-30);
|
|
--caret-color: var(--text-normal);
|
|
--checkbox-radius: var(--radius-s);
|
|
--checkbox-size: var(--font-text-size);
|
|
--checkbox-marker-color: var(--background-primary);
|
|
--checkbox-color: var(--interactive-accent);
|
|
--checkbox-color-hover: var(--interactive-accent-hover);
|
|
--checkbox-border-color: var(--text-faint);
|
|
--checkbox-border-color-hover: var(--text-muted);
|
|
--checkbox-margin-inline-start: 0.85em;
|
|
--checklist-done-decoration: line-through;
|
|
--checklist-done-color: var(--text-muted);
|
|
--code-white-space: pre-wrap;
|
|
--code-radius: var(--radius-s);
|
|
--code-size: var(--font-smaller);
|
|
--code-background: var(--background-primary-alt);
|
|
--code-normal: var(--text-muted);
|
|
--code-comment: var(--text-faint);
|
|
--code-function: var(--color-yellow);
|
|
--code-important: var(--color-orange);
|
|
--code-keyword: var(--color-pink);
|
|
--code-operator: var(--color-red);
|
|
--code-property: var(--color-cyan);
|
|
--code-punctuation: var(--text-muted);
|
|
--code-string: var(--color-green);
|
|
--code-tag: var(--color-red);
|
|
--code-value: var(--color-purple);
|
|
--collapse-icon-color: var(--text-faint);
|
|
--collapse-icon-color-collapsed: var(--text-accent);
|
|
--cursor: default;
|
|
--cursor-link: pointer;
|
|
--divider-color: var(--background-modifier-border);
|
|
--divider-color-hover: var(--interactive-accent);
|
|
--font-weight: var(--font-normal);
|
|
--font-thin: 100;
|
|
--font-extralight: 200;
|
|
--font-light: 300;
|
|
--font-normal: 400;
|
|
--font-medium: 500;
|
|
--font-semibold: 600;
|
|
--font-bold: 700;
|
|
--font-extrabold: 800;
|
|
--font-black: 900;
|
|
--footnote-size: var(--font-smaller);
|
|
--graph-text: var(--text-normal);
|
|
--graph-line: var(--color-base-35, var(--background-modifier-border-focus));
|
|
--graph-node: var(--text-muted);
|
|
--graph-node-unresolved: var(--text-faint);
|
|
--graph-node-focused: var(--text-accent);
|
|
--graph-node-tag: var(--color-green);
|
|
--graph-node-attachment: var(--color-yellow);
|
|
--h1-color: var(--text-normal);
|
|
--h2-color: var(--text-normal);
|
|
--h3-color: var(--text-normal);
|
|
--h4-color: var(--text-normal);
|
|
--h5-color: var(--text-normal);
|
|
--h6-color: var(--text-normal);
|
|
--h1-font: inherit;
|
|
--h2-font: inherit;
|
|
--h3-font: inherit;
|
|
--h4-font: inherit;
|
|
--h5-font: inherit;
|
|
--h6-font: inherit;
|
|
--h1-line-height: 1.2;
|
|
--h2-line-height: 1.2;
|
|
--h3-line-height: 1.3;
|
|
--h4-line-height: 1.4;
|
|
--h5-line-height: var(--line-height-normal);
|
|
--h6-line-height: var(--line-height-normal);
|
|
--h1-size: 1.802em;
|
|
--h2-size: 1.602em;
|
|
--h3-size: 1.424em;
|
|
--h4-size: 1.266em;
|
|
--h5-size: 1.125em;
|
|
--h6-size: 1em;
|
|
--h1-style: normal;
|
|
--h2-style: normal;
|
|
--h3-style: normal;
|
|
--h4-style: normal;
|
|
--h5-style: normal;
|
|
--h6-style: normal;
|
|
--h1-variant: normal;
|
|
--h2-variant: normal;
|
|
--h3-variant: normal;
|
|
--h4-variant: normal;
|
|
--h5-variant: normal;
|
|
--h6-variant: normal;
|
|
--h1-weight: 700;
|
|
--h2-weight: 600;
|
|
--h3-weight: 600;
|
|
--h4-weight: 600;
|
|
--h5-weight: 600;
|
|
--h6-weight: 600;
|
|
--header-height: 40px;
|
|
--hr-color: var(--background-modifier-border);
|
|
--hr-thickness: 2px;
|
|
--icon-color: var(--text-muted);
|
|
--icon-color-hover: var(--text-muted);
|
|
--icon-color-active: var(--text-accent);
|
|
--icon-color-focused: var(--text-normal);
|
|
--indentation-guide-color: rgba(var(--mono-rgb-100), 0.12);
|
|
--indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3);
|
|
--inline-title-color: var(--h1-color);
|
|
--inline-title-font: var(--h1-font);
|
|
--inline-title-line-height: var(--h1-line-height);
|
|
--inline-title-size: var(--h1-size);
|
|
--inline-title-style: var(--h1-style);
|
|
--inline-title-variant: var(--h1-variant);
|
|
--inline-title-weight: var(--h1-weight);
|
|
--input-font-weight: var(--font-normal);
|
|
--input-border-width: 1px;
|
|
--italic-color: inherit;
|
|
--italic-weight: inherit;
|
|
--nav-item-color: var(--text-muted);
|
|
--nav-item-color-hover: var(--text-normal);
|
|
--nav-item-color-active: var(--text-normal);
|
|
--nav-item-color-selected: var(--text-normal);
|
|
--nav-item-color-highlighted: var(--text-accent);
|
|
--nav-item-background-hover: var(--background-modifier-hover);
|
|
--nav-item-background-active: var(--background-modifier-hover);
|
|
--nav-item-background-selected: hsla(var(--color-accent-hsl), 0.15);
|
|
--nav-item-weight: inherit;
|
|
--nav-item-weight-hover: inherit;
|
|
--nav-item-weight-active: inherit;
|
|
--nav-item-white-space: pre;
|
|
--nav-collapse-icon-color: var(--collapse-icon-color);
|
|
--nav-collapse-icon-color-collapsed: var(--text-faint);
|
|
--nav-heading-color: var(--text-normal);
|
|
--nav-heading-color-hover: var(--text-normal);
|
|
--nav-heading-color-collapsed: var(--text-faint);
|
|
--nav-heading-color-collapsed-hover: var(--text-muted);
|
|
--nav-heading-weight: var(--font-medium);
|
|
--nav-heading-weight-hover: var(--font-medium);
|
|
--pill-color: var(--text-muted);
|
|
--pill-color-hover: var(--text-normal);
|
|
--pill-color-remove: var(--text-faint);
|
|
--pill-color-remove-hover: var(--text-accent);
|
|
--pill-decoration: none;
|
|
--pill-decoration-hover: none;
|
|
--pill-background: transparent;
|
|
--pill-background-hover: transparent;
|
|
--pill-border-color: var(--background-modifier-border);
|
|
--pill-border-color-hover: var(--background-modifier-border-hover);
|
|
--pill-border-width: var(--border-width);
|
|
--pill-padding-x: 0.65em;
|
|
--pill-padding-y: 0.25em;
|
|
--pill-radius: 2em;
|
|
--pill-weight: inherit;
|
|
--radius-s: 4px;
|
|
--radius-m: 8px;
|
|
--radius-l: 12px;
|
|
--radius-xl: 16px;
|
|
--scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.2);
|
|
--scrollbar-bg: rgba(var(--mono-rgb-100), 0.05);
|
|
--scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.1);
|
|
--search-clear-button-color: var(--text-muted);
|
|
--search-clear-button-size: 13px;
|
|
--search-icon-color: var(--text-muted);
|
|
--search-icon-size: 18px;
|
|
--search-result-background: var(--background-primary);
|
|
--size-2-1: 2px;
|
|
--size-2-2: 4px;
|
|
--size-2-3: 6px;
|
|
--size-4-1: 4px;
|
|
--size-4-2: 8px;
|
|
--size-4-3: 12px;
|
|
--size-4-4: 16px;
|
|
--size-4-5: 20px;
|
|
--size-4-6: 24px;
|
|
--size-4-8: 32px;
|
|
--size-4-9: 36px;
|
|
--size-4-10: 40px;
|
|
--size-4-12: 48px;
|
|
--size-4-16: 64px;
|
|
--size-4-18: 72px;
|
|
--tag-size: var(--font-smaller);
|
|
--tag-color: var(--text-accent);
|
|
--tag-color-hover: var(--text-accent);
|
|
--tag-decoration: none;
|
|
--tag-decoration-hover: none;
|
|
--tag-background: hsla(var(--interactive-accent-hsl), 0.1);
|
|
--tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2);
|
|
--tag-border-color: hsla(var(--interactive-accent-hsl), 0.15);
|
|
--tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15);
|
|
--tag-border-width: 0px;
|
|
--tag-padding-x: 0.65em;
|
|
--tag-padding-y: 0.25em;
|
|
--tag-radius: 2em;
|
|
--tag-weight: inherit;
|
|
--titlebar-background: var(--background-secondary);
|
|
--titlebar-background-focused: var(--background-secondary-alt);
|
|
--titlebar-border-width: 0px;
|
|
--titlebar-border-color: var(--background-modifier-border);
|
|
--titlebar-text-color: var(--text-muted);
|
|
--titlebar-text-color-focused: var(--text-normal);
|
|
--titlebar-text-weight: var(--font-bold);
|
|
--accent-h: 258;
|
|
--accent-s: 88%;
|
|
--accent-l: 66%;
|
|
--background-primary: var(--color-base-00);
|
|
--background-primary-alt: var(--color-base-10);
|
|
--background-secondary: var(--color-base-20);
|
|
--background-modifier-hover: rgba(var(--mono-rgb-100), 0.075);
|
|
--background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15);
|
|
--background-modifier-border: var(--color-base-30);
|
|
--background-modifier-border-hover: var(--color-base-35);
|
|
--background-modifier-border-focus: var(--color-base-40);
|
|
--background-modifier-error-rgb: var(--color-red-rgb);
|
|
--background-modifier-error: var(--color-red);
|
|
--background-modifier-error-hover: var(--color-red);
|
|
--background-modifier-success-rgb: var(--color-green-rgb);
|
|
--background-modifier-success: var(--color-green);
|
|
--background-modifier-message: rgba(0, 0, 0, 0.9);
|
|
--background-modifier-form-field: var(--color-base-00);
|
|
--text-normal: var(--color-base-100);
|
|
--text-muted: var(--color-base-70);
|
|
--text-faint: var(--color-base-50);
|
|
--text-on-accent: white;
|
|
--text-on-accent-inverted: black;
|
|
--text-error: var(--color-red);
|
|
--text-warning: var(--color-orange);
|
|
--text-success: var(--color-green);
|
|
--text-selection: hsla(var(--color-accent-hsl), 0.2);
|
|
--text-highlight-bg-rgb: 255, 208, 0;
|
|
--text-highlight-bg: rgba(var(--text-highlight-bg-rgb), 0.4);
|
|
--text-accent: var(--color-accent);
|
|
--text-accent-hover: var(--color-accent-2);
|
|
--interactive-normal: var(--color-base-00);
|
|
--interactive-hover: var(--color-base-10);
|
|
--interactive-accent-hsl: var(--color-accent-hsl);
|
|
--interactive-accent: var(--color-accent-1);
|
|
--interactive-accent-hover: var(--color-accent-2);
|
|
--font-default: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter",
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
|
|
--font-monospace-default: ui-monospace, SFMono-Regular, "Cascadia Mono", "Roboto Mono",
|
|
"DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace;
|
|
--font-interface-override: "??";
|
|
--font-interface-theme: "??";
|
|
--font-interface: var(--font-interface-override), var(--font-interface-theme),
|
|
var(--default-font, "??"), var(--font-default);
|
|
--font-text-override: "??";
|
|
--font-text-theme: "??";
|
|
--font-text: var(--font-text-override), var(--font-text-theme), var(--font-default);
|
|
--font-print-override: "??";
|
|
--font-print: var(--font-print-override), var(--font-text-override), var(--font-text-theme),
|
|
"Arial";
|
|
--font-monospace-override: "??";
|
|
--font-monospace-theme: "??";
|
|
--font-monospace: var(--font-monospace-override), var(--font-monospace-theme),
|
|
var(--font-monospace-default);
|
|
--font-text-size: 16px;
|
|
--font-mermaid: var(--font-text);
|
|
--icon-color: var(--interactive-accent);
|
|
--icon-color-hover: var(--interactive-accent);
|
|
--icon-color-active: var(--interactive-accent-hover);
|
|
--icon-color-focus: var(--interactive-accent-hover);
|
|
--icon-stroke: var(--icon-l-stroke-width);
|
|
|
|
--default-font: '"JetBrains Mono", monospace, "Inter", sans-serif';
|
|
--font-monospace: '"JetBrains Mono", monospace, "Source Code Pro", monospace';
|
|
|
|
--table-width: 88cqw;
|
|
}
|
|
|
|
body {
|
|
/* Links */
|
|
--link-color: var(--text-accent);
|
|
--link-color-hover: var(--text-accent-hover);
|
|
--link-decoration: underline;
|
|
--link-decoration-hover: underline;
|
|
--link-decoration-thickness: auto;
|
|
--link-weight: var(--font-weight);
|
|
--link-external-color: var(--text-accent);
|
|
--link-external-color-hover: var(--text-accent-hover);
|
|
--link-external-decoration: underline;
|
|
--link-external-decoration-hover: underline;
|
|
--link-external-filter: none;
|
|
--link-unresolved-color: var(--text-accent);
|
|
--link-unresolved-opacity: 0.7;
|
|
--link-unresolved-filter: none;
|
|
--link-unresolved-decoration-style: solid;
|
|
--link-unresolved-decoration-color: hsla(var(--interactive-accent-hsl), 0.3);
|
|
/* Metadata */
|
|
--metadata-background: transparent;
|
|
--metadata-display-reading: block;
|
|
--metadata-display-editing: block;
|
|
--metadata-max-width: none;
|
|
--metadata-padding: var(--size-4-2) 0;
|
|
--metadata-border-color: var(--background-modifier-border);
|
|
--metadata-border-radius: 0;
|
|
--metadata-border-width: 0;
|
|
--metadata-divider-color: var(--background-modifier-border);
|
|
--metadata-divider-color-hover: transparent;
|
|
--metadata-divider-color-focus: transparent;
|
|
--metadata-divider-width: 0;
|
|
--metadata-gap: 3px;
|
|
--metadata-property-padding: 0;
|
|
--metadata-property-radius: 6px;
|
|
--metadata-property-radius-hover: 6px;
|
|
--metadata-property-radius-focus: 6px;
|
|
--metadata-property-background: transparent;
|
|
--metadata-property-background-hover: transparent;
|
|
--metadata-property-background-active: var(--background-modifier-hover);
|
|
--metadata-label-background-hover: transparent;
|
|
--metadata-label-background-active: var(--background-modifier-hover);
|
|
--metadata-label-font: var(--font-interface);
|
|
--metadata-label-font-size: var(--font-smaller);
|
|
--metadata-label-font-weight: inherit;
|
|
--metadata-label-text-color: var(--text-muted);
|
|
--metadata-label-text-color-hover: var(--text-muted);
|
|
--metadata-label-width: 9em;
|
|
--metadata-input-height: calc(var(--font-text-size) * 1.75);
|
|
--metadata-input-text-color: var(--text-normal);
|
|
--metadata-input-font: var(--font-interface);
|
|
--metadata-input-font-size: var(--font-smaller);
|
|
--metadata-input-background: transparent;
|
|
--metadata-input-background-hover: transparent;
|
|
--metadata-input-background-active: var(--background-modifier-hover);
|
|
--metadata-sidebar-label-font-size: var(--font-ui-small);
|
|
--metadata-sidebar-input-font-size: var(--font-ui-small);
|
|
}
|
|
|
|
:root[saved-theme="dark"],
|
|
html[saved-theme="dark"] {
|
|
--highlight-mix-blend-mode: lighten;
|
|
--mono-rgb-0: 0, 0, 0;
|
|
--mono-rgb-100: 255, 255, 255;
|
|
--color-red-rgb: 251, 70, 76;
|
|
--color-red: #fb464c;
|
|
--color-orange-rgb: 233, 151, 63;
|
|
--color-orange: #e9973f;
|
|
--color-yellow-rgb: 224, 222, 113;
|
|
--color-yellow: #e0de71;
|
|
--color-green-rgb: 68, 207, 110;
|
|
--color-green: #44cf6e;
|
|
--color-cyan-rgb: 83, 223, 221;
|
|
--color-cyan: #53dfdd;
|
|
--color-blue-rgb: 2, 122, 255;
|
|
--color-blue: #027aff;
|
|
--color-purple-rgb: 168, 130, 255;
|
|
--color-purple: #a882ff;
|
|
--color-pink-rgb: 250, 153, 205;
|
|
--color-pink: #fa99cd;
|
|
--color-base-00: #1e1e1e;
|
|
--color-base-05: #212121;
|
|
--color-base-10: #242424;
|
|
--color-base-20: #262626;
|
|
--color-base-25: #2a2a2a;
|
|
--color-base-30: #363636;
|
|
--color-base-35: #3f3f3f;
|
|
--color-base-40: #555555;
|
|
--color-base-50: #666666;
|
|
--color-base-60: #999999;
|
|
--color-base-70: #b3b3b3;
|
|
--color-base-100: #dadada;
|
|
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--color-accent-1: hsl(
|
|
calc(var(--accent-h) - 3),
|
|
calc(var(--accent-s) * 1.02),
|
|
calc(var(--accent-l) * 1.15)
|
|
);
|
|
--color-accent-2: hsl(
|
|
calc(var(--accent-h) - 5),
|
|
calc(var(--accent-s) * 1.05),
|
|
calc(var(--accent-l) * 1.29)
|
|
);
|
|
--background-modifier-form-field: var(--color-base-25);
|
|
--background-secondary-alt: var(--color-base-30);
|
|
--interactive-normal: var(--color-base-30);
|
|
--interactive-hover: var(--color-base-35);
|
|
--text-accent: var(--color-accent-1);
|
|
--interactive-accent: var(--color-accent);
|
|
--interactive-accent-hover: var(--color-accent-1);
|
|
--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
|
|
--background-modifier-cover: rgba(10, 10, 10, 0.4);
|
|
--text-selection: hsla(var(--interactive-accent-hsl), 0.25);
|
|
--pdf-shadow: 0 0 0 1px var(--background-modifier-border);
|
|
--pdf-thumbnail-shadow: 0 0 0 1px var(--background-modifier-border);
|
|
|
|
--accent-h: 202;
|
|
--accent-s: 100%;
|
|
--accent-l: 75%;
|
|
--bg_dark2_x: 18, 18, 24;
|
|
--bg_dark2: rgb(var(--bg_dark2_x));
|
|
--bg_dark_x: 22, 22, 30;
|
|
--bg_dark: rgb(var(--bg_dark_x));
|
|
--bg_x: 26, 27, 38;
|
|
--bg: rgb(var(--bg_x));
|
|
--bg_highlight_x: 41, 46, 66;
|
|
--bg_highlight: rgb(var(--bg_highlight_x));
|
|
--bg_highlight_dark_x: 36, 40, 59;
|
|
--bg_highlight_dark: rgb(var(--bg_highlight_dark_x));
|
|
--terminal_black_x: 65, 72, 104;
|
|
--terminal_black: rgb(var(--terminal_black_x));
|
|
--fg_x: 192, 202, 245;
|
|
--fg: rgb(var(--fg_x));
|
|
--fg_dark_x: 169, 177, 214;
|
|
--fg_dark: rgb(var(--fg_dark_x));
|
|
--comment_x: 86, 95, 137;
|
|
--comment: rgb(var(--comment_x));
|
|
--blue0_x: 61, 89, 161;
|
|
--blue0: rgb(var(--blue0_x));
|
|
--blue_x: 122, 162, 247;
|
|
--blue: rgb(var(--blue_x));
|
|
--cyan_hsl: 202 100% 75%;
|
|
--cyan_x: 125, 207, 255;
|
|
--cyan: rgb(var(--cyan_x));
|
|
--magent_hsl: 261 85% 79%;
|
|
--magenta_x: 187, 154, 247;
|
|
--magenta: rgb(var(--magenta_x));
|
|
--orange_x: 255, 158, 100;
|
|
--orange: rgb(var(--orange_x));
|
|
--yellow_x: 224, 175, 104;
|
|
--yellow: rgb(var(--yellow_x));
|
|
--green_x: 158, 206, 106;
|
|
--green: rgb(var(--green_x));
|
|
--teal_x: 26, 188, 156;
|
|
--teal: rgb(var(--teal_x));
|
|
--red_x: 255, 117, 127;
|
|
--red: rgb(var(--red_x));
|
|
--red1_x: 219, 75, 75;
|
|
--red1: rgb(var(--red1_x));
|
|
--unknown: #ffffff;
|
|
--color_red_rgb: var(--red_x);
|
|
--color-red: var(--red);
|
|
--color_purple_rgb: var(--magenta_x);
|
|
--color-purple: var(--magenta);
|
|
--color_green_rgb: var(--green_x);
|
|
--color-green: var(--green);
|
|
--color_cyan_rgb: var(--cyan_x);
|
|
--color-cyan: var(--cyan);
|
|
--color_blue_rgb: var(--blue_x);
|
|
--color-blue: var(--blue);
|
|
--color_yellow_rgb: var(--yellow_x);
|
|
--color-yellow: var(--yellow);
|
|
--color_orange_rgb: var(--orange_x);
|
|
--color-orange: var(--orange);
|
|
--color_pink_rgb: var(--magenta_x);
|
|
--color-pink: var(--magenta);
|
|
--background-primary: var(--bg);
|
|
--background-primary-alt: var(--bg);
|
|
--background-secondary: var(--bg_dark);
|
|
--background-secondary-alt: var(--bg_dark);
|
|
--background-modifier-border: var(--bg_highlight);
|
|
--background-modifier-border-focus: var(--bg_highlight);
|
|
--background-modifier-border-hover: var(--bg_highlight);
|
|
--background-modifier-form-field: var(--bg_dark);
|
|
--background-modifier-form-field-highlighted: var(--bg_dark);
|
|
--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
|
|
--background-modifier-success: var(--green);
|
|
--background-modifier-error: var(--red1);
|
|
--background-modifier-error-hover: var(--red);
|
|
--background-modifier-cover: rgba(var(--bg_dark_x), 0.8);
|
|
--background-modifier-hover: var(--bg_highlight);
|
|
--background-modifier-message: rgba(var(--bg_highlight_x), 0.9);
|
|
--background-modifier-active-hover: var(--bg_highlight);
|
|
--text-normal: var(--fg);
|
|
--text-faint: var(--comment);
|
|
--text-muted: var(--fg_dark);
|
|
--text-error: var(--red);
|
|
--text-accent: var(--magenta);
|
|
--text-accent-hover: var(--cyan);
|
|
--text-error: var(--red1);
|
|
--text-error-hover: var(--red);
|
|
--text-selection: var(--unknown);
|
|
--text-on-accent: var(--bg);
|
|
--text-highlight-bg: rgba(var(--orange_x), 0.4);
|
|
--text-selection: rgba(var(--blue0_x), 0.6);
|
|
--bold-color: var(--cyan);
|
|
--italic-color: var(--cyan);
|
|
--interactive-normal: var(--bg_dark);
|
|
--interactive-hover: var(--bg);
|
|
--interactive-success: var(--green);
|
|
--interactive-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--interactive-accent-hover: var(--blue);
|
|
--scrollbar-bg: var(--bg_dark2);
|
|
--scrollbar-thumb-bg: var(--comment);
|
|
--scrollbar-active-thumb-bg: var(--bg_dark);
|
|
--scrollbar-width: 0px;
|
|
--h1-color: var(--red);
|
|
--h2-color: var(--yellow);
|
|
--h3-color: var(--green);
|
|
--h4-color: var(--cyan);
|
|
--h5-color: var(--blue);
|
|
--h6-color: var(--magenta);
|
|
--border-width: 2px;
|
|
--tag-color: var(--magenta);
|
|
--tag-background: rgba(var(--magenta_x), 0.15);
|
|
--tag-color-hover: var(--cyan);
|
|
--tag-background-hover: rgba(var(--cyan_x), 0.15);
|
|
--link-color: var(--magenta);
|
|
--link-color-hover: var(--cyan);
|
|
--link-external-color: var(--magenta);
|
|
--link-external-color-hover: var(--cyan);
|
|
--checkbox-radius: var(--radius-l);
|
|
--checkbox-color: var(--green);
|
|
--checkbox-color-hover: var(--green);
|
|
--checkbox-marker-color: var(--bg);
|
|
--checkbox-border-color: var(--comment);
|
|
--checkbox-border-color-hover: var(--comment);
|
|
--table-header-background: var(--bg_dark2);
|
|
--table-header-background-hover: var(--bg_dark2);
|
|
--flashing-background: rgba(var(--blue0_x), 0.3);
|
|
--code-normal: var(--fg);
|
|
--code-background: var(--bg_highlight_dark);
|
|
--mermaid-note: var(--blue0);
|
|
--mermaid-actor: var(--fg_dark);
|
|
--mermaid-loopline: var(--blue);
|
|
--blockquote-background-color: var(--bg_dark);
|
|
--callout-default: var(--blue_x);
|
|
--callout-info: var(--blue_x);
|
|
--callout-summary: var(--cyan_x);
|
|
--callout-tip: var(--cyan_x);
|
|
--callout-todo: var(--cyan_x);
|
|
--callout-bug: var(--red_x);
|
|
--callout-error: var(--red1_x);
|
|
--callout-fail: var(--red1_x);
|
|
--callout-example: var(--magenta_x);
|
|
--callout-important: var(--green_x);
|
|
--callout-success: var(--teal_x);
|
|
--callout-question: var(--yellow_x);
|
|
--callout-warning: var(--orange_x);
|
|
--callout-quote: var(--fg_dark_x);
|
|
--icon-color-hover: var(--blue);
|
|
--icon-color-focused: var(--magenta);
|
|
--icon-color-active: var(--magenta);
|
|
--nav-item-color-hover: var(--fg);
|
|
--nav-item-background-hover: var(--bg_highlight);
|
|
--nav-item-color-active: var(--red);
|
|
--nav-item-background-active: var(--bg_highlight);
|
|
--nav-file-tag: rgba(var(--yellow_x), 0.9);
|
|
--nav-indentation-guide-color: var(--bg_highlight);
|
|
--indentation-guide-color: var(--comment);
|
|
--indentation-guide-color-active: var(--comment);
|
|
--graph-line: var(--comment);
|
|
--graph-node: var(--fg);
|
|
--graph-node-tag: var(--orange);
|
|
--graph-node-attachment: var(--blue);
|
|
--tab-text-color-focused-active: rgba(var(--red_x), 0.8);
|
|
--tab-text-color-focused-active-current: var(--red);
|
|
--modal-border-color: var(--bg_highlight);
|
|
--prompt-border-color: var(--bg_highlight);
|
|
--slider-track-background: var(--bg_highlight);
|
|
--embed-background: var(--bg_dark);
|
|
--embed-padding: 1.5rem 1.5rem 0.5rem;
|
|
--canvas-color: var(--bg_highlight_x);
|
|
--toggle-thumb-color: var(--bg);
|
|
|
|
/*--light: var(--background-primary);
|
|
--lightgray: var(--background-modifier-border);
|
|
--gray: var(--checkbox-border-color);
|
|
--darkgray: var(--text-normal);
|
|
--dark: var(--h1-color);
|
|
--secondary: var(--link-color);
|
|
--tertiary: var(--link-color-hover);
|
|
--highlight: var(--tag-background);
|
|
--textHighlight: var(--text-highlight-bg);*/
|
|
.callout {
|
|
@each $type in $callout-types {
|
|
&[data-callout="#{$type}"] {
|
|
--color: rgb(var(#{"--callout-#{$type}"}));
|
|
--border: rgba(var(#{"--callout-#{$type}"}), 0.267);
|
|
--bg: rgba(var(#{"--callout-#{$type}"}), 0.063);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:root[saved-theme="light"],
|
|
html[saved-theme="light"] {
|
|
--highlight-mix-blend-mode: darken;
|
|
--mono-rgb-0: 255, 255, 255;
|
|
--mono-rgb-100: 0, 0, 0;
|
|
--color-red-rgb: 233, 49, 71;
|
|
--color-red: #e93147;
|
|
--color-orange-rgb: 236, 117, 0;
|
|
--color-orange: #ec7500;
|
|
--color-yellow-rgb: 224, 172, 0;
|
|
--color-yellow: #e0ac00;
|
|
--color-green-rgb: 8, 185, 78;
|
|
--color-green: #08b94e;
|
|
--color-cyan-rgb: 0, 191, 188;
|
|
--color-cyan: #00bfbc;
|
|
--color-blue-rgb: 8, 109, 221;
|
|
--color-blue: #086ddd;
|
|
--color-purple-rgb: 120, 82, 238;
|
|
--color-purple: #7852ee;
|
|
--color-pink-rgb: 213, 57, 132;
|
|
--color-pink: #d53984;
|
|
--color-base-00: #ffffff;
|
|
--color-base-05: #fcfcfc;
|
|
--color-base-10: #fafafa;
|
|
--color-base-20: #f6f6f6;
|
|
--color-base-25: #e3e3e3;
|
|
--color-base-30: #e0e0e0;
|
|
--color-base-35: #d4d4d4;
|
|
--color-base-40: #bdbdbd;
|
|
--color-base-50: #ababab;
|
|
--color-base-60: #707070;
|
|
--color-base-70: #5c5c5c;
|
|
--color-base-100: #222222;
|
|
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--color-accent-1: hsl(
|
|
calc(var(--accent-h) - 1),
|
|
calc(var(--accent-s) * 1.01),
|
|
calc(var(--accent-l) * 1.075)
|
|
);
|
|
--color-accent-2: hsl(
|
|
calc(var(--accent-h) - 3),
|
|
calc(var(--accent-s) * 1.02),
|
|
calc(var(--accent-l) * 1.15)
|
|
);
|
|
--background-secondary-alt: var(--color-base-05);
|
|
--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
|
|
--background-modifier-cover: rgba(220, 220, 220, 0.4);
|
|
|
|
--accent-h: 202;
|
|
--accent-s: 86%;
|
|
--accent-l: 43%;
|
|
--bg_dark2_x: 188, 189, 194;
|
|
--bg_dark2: rgb(var(--bg_dark2_x));
|
|
--bg_dark_x: 203, 204, 209;
|
|
--bg_dark: rgb(var(--bg_dark_x));
|
|
--bg_x: 213, 214, 219;
|
|
--bg: rgb(var(--bg_x));
|
|
--bg_highlight_x: 220, 222, 226;
|
|
--bg_highlight: rgb(var(--bg_highlight_x));
|
|
--bg_highlight_dark_x: 195, 197, 201;
|
|
--bg_highlight_dark: rgb(var(--bg_highlight_dark_x));
|
|
--terminal_black_x: 15, 15, 20;
|
|
--terminal_black: rgb(var(--terminal_black_x));
|
|
--fg_x: 52, 59, 88;
|
|
--fg: rgb(var(--fg_x));
|
|
--fg_dark_x: 39, 46, 75;
|
|
--fg_dark: rgb(var(--fg_dark_x));
|
|
--comment_x: 150, 153, 163;
|
|
--comment: rgb(var(--comment_x));
|
|
--blue0_x: 39, 71, 125;
|
|
--blue0: rgb(var(--blue0_x));
|
|
--blue_x: 52, 84, 138;
|
|
--blue: rgb(var(--blue_x));
|
|
--cyan_x: 15, 75, 110;
|
|
--cyan: rgb(var(--cyan_x));
|
|
--magent_hsl: 261 24% 38%;
|
|
--magenta_x: 90, 74, 120;
|
|
--magenta: rgb(var(--magenta_x));
|
|
--orange_x: 150, 80, 39;
|
|
--orange: rgb(var(--orange_x));
|
|
--yellow_x: 143, 94, 21;
|
|
--yellow: rgb(var(--yellow_x));
|
|
--green_x: 51, 99, 92;
|
|
--green: rgb(var(--green_x));
|
|
--teal_x: 22, 103, 117;
|
|
--teal: rgb(var(--teal_x));
|
|
--red_x: 140, 67, 81;
|
|
--red: rgb(var(--red_x));
|
|
--red1_x: 115, 42, 56;
|
|
--red1: rgb(var(--red1_x));
|
|
--unknown: #000000;
|
|
--color_red_rgb: var(--red_x);
|
|
--color-red: var(--red);
|
|
--color_purple_rgb: var(--magenta_x);
|
|
--color-purple: var(--magenta);
|
|
--color_green_rgb: var(--green_x);
|
|
--color-green: var(--green);
|
|
--color_cyan_rgb: var(--cyan_x);
|
|
--color-cyan: var(--cyan);
|
|
--color_blue_rgb: var(--blue_x);
|
|
--color-blue: var(--blue);
|
|
--color_yellow_rgb: var(--yellow_x);
|
|
--color-yellow: var(--yellow);
|
|
--color_orange_rgb: var(--orange_x);
|
|
--color-orange: var(--orange);
|
|
--color_pink_rgb: var(--magenta_x);
|
|
--color-pink: var(--magenta);
|
|
--background-primary: var(--bg);
|
|
--background-primary-alt: var(--bg);
|
|
--background-secondary: var(--bg_dark);
|
|
--background-secondary-alt: var(--bg_dark);
|
|
--background-modifier-border: var(--bg_highlight);
|
|
--background-modifier-border-focus: var(--bg_highlight);
|
|
--background-modifier-border-hover: var(--bg_highlight);
|
|
--background-modifier-form-field: var(--bg_dark);
|
|
--background-modifier-form-field-highlighted: var(--bg_dark);
|
|
--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
|
|
--background-modifier-success: var(--green);
|
|
--background-modifier-error: var(--red1);
|
|
--background-modifier-error-hover: var(--red);
|
|
--background-modifier-cover: rgba(var(--bg_dark_x), 0.8);
|
|
--background-modifier-hover: var(--bg_highlight);
|
|
--background-modifier-message: rgba(var(--bg_highlight_x), 0.9);
|
|
--background-modifier-active-hover: var(--bg_highlight);
|
|
--text-normal: var(--fg);
|
|
--text-faint: var(--comment);
|
|
--text-muted: var(--fg_dark);
|
|
--text-error: var(--red);
|
|
--text-accent: var(--magenta);
|
|
--text-accent-hover: var(--cyan);
|
|
--text-error: var(--red1);
|
|
--text-error-hover: var(--red);
|
|
--text-selection: var(--unknown);
|
|
--text-on-accent: var(--bg);
|
|
--text-highlight-bg: rgba(var(--orange_x), 0.4);
|
|
--text-selection: rgba(var(--blue0_x), 0.6);
|
|
--bold-color: var(--cyan);
|
|
--italic-color: var(--cyan);
|
|
--interactive-normal: var(--bg_dark);
|
|
--interactive-hover: var(--bg);
|
|
--interactive-success: var(--green);
|
|
--interactive-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--interactive-accent-hover: var(--blue);
|
|
--scrollbar-bg: var(--bg_dark2);
|
|
--scrollbar-thumb-bg: var(--comment);
|
|
--scrollbar-active-thumb-bg: var(--bg_dark);
|
|
--scrollbar-width: 0px;
|
|
--h1-color: var(--red);
|
|
--h2-color: var(--yellow);
|
|
--h3-color: var(--green);
|
|
--h4-color: var(--cyan);
|
|
--h5-color: var(--blue);
|
|
--h6-color: var(--magenta);
|
|
--border-width: 2px;
|
|
--tag-color: var(--magenta);
|
|
--tag-background: rgba(var(--magenta_x), 0.15);
|
|
--tag-color-hover: var(--cyan);
|
|
--tag-background-hover: rgba(var(--cyan_x), 0.15);
|
|
--link-color: var(--magenta);
|
|
--link-color-hover: var(--cyan);
|
|
--link-external-color: var(--magenta);
|
|
--link-external-color-hover: var(--cyan);
|
|
--checkbox-radius: var(--radius-l);
|
|
--checkbox-color: var(--green);
|
|
--checkbox-color-hover: var(--green);
|
|
--checkbox-marker-color: var(--bg);
|
|
--checkbox-border-color: var(--comment);
|
|
--checkbox-border-color-hover: var(--comment);
|
|
--table-header-background: var(--bg_dark2);
|
|
--table-header-background-hover: var(--bg_dark2);
|
|
--flashing-background: rgba(var(--blue0_x), 0.3);
|
|
--code-normal: var(--fg);
|
|
--code-background: var(--bg_highlight_dark);
|
|
--mermaid-note: var(--blue0);
|
|
--mermaid-actor: var(--fg_dark);
|
|
--mermaid-loopline: var(--blue);
|
|
--blockquote-background-color: var(--bg_dark);
|
|
--callout-default: var(--blue_x);
|
|
--callout-info: var(--blue_x);
|
|
--callout-summary: var(--cyan_x);
|
|
--callout-tip: var(--cyan_x);
|
|
--callout-todo: var(--cyan_x);
|
|
--callout-bug: var(--red_x);
|
|
--callout-error: var(--red1_x);
|
|
--callout-fail: var(--red1_x);
|
|
--callout-example: var(--magenta_x);
|
|
--callout-important: var(--green_x);
|
|
--callout-success: var(--teal_x);
|
|
--callout-question: var(--yellow_x);
|
|
--callout-warning: var(--orange_x);
|
|
--callout-quote: var(--fg_dark_x);
|
|
--icon-color-hover: var(--blue);
|
|
--icon-color-focused: var(--magenta);
|
|
--icon-color-active: var(--magenta);
|
|
--nav-item-color-hover: var(--fg);
|
|
--nav-item-background-hover: var(--bg_highlight);
|
|
--nav-item-color-active: var(--red);
|
|
--nav-item-background-active: var(--bg_highlight);
|
|
--nav-file-tag: rgba(var(--yellow_x), 0.9);
|
|
--nav-indentation-guide-color: var(--bg_highlight);
|
|
--indentation-guide-color: var(--comment);
|
|
--indentation-guide-color-active: var(--comment);
|
|
--graph-line: var(--comment);
|
|
--graph-node: var(--fg);
|
|
--graph-node-tag: var(--orange);
|
|
--graph-node-attachment: var(--blue);
|
|
--tab-text-color-focused-active: rgba(var(--red_x), 0.8);
|
|
--tab-text-color-focused-active-current: var(--red);
|
|
--modal-border-color: var(--bg_highlight);
|
|
--prompt-border-color: var(--bg_highlight);
|
|
--slider-track-background: var(--bg_highlight);
|
|
--embed-background: var(--bg_dark);
|
|
--embed-padding: 1.5rem 1.5rem 0.5rem;
|
|
--canvas-color: var(--bg_highlight_x);
|
|
--toggle-thumb-color: var(--bg);
|
|
|
|
/*--light: var(--background-primary);
|
|
--lightgray: var(--background-modifier-border);
|
|
--gray: var(--checkbox-border-color);
|
|
--darkgray: var(--text-normal);
|
|
--dark: var(--h1-color);
|
|
--secondary: var(--link-color);
|
|
--tertiary: var(--link-color-hover);
|
|
--highlight: var(--tag-background);
|
|
--textHighlight: var(--text-highlight-bg);*/
|
|
.callout {
|
|
@each $type in $callout-types {
|
|
&[data-callout="#{$type}"] {
|
|
--color: rgb(var(#{"--callout-#{$type}"}));
|
|
--border: rgba(var(#{"--callout-#{$type}"}), 0.267);
|
|
--bg: rgba(var(#{"--callout-#{$type}"}), 0.063);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-primary);
|
|
|
|
.callout {
|
|
border: 1px solid var(--border);
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
/* LINKS */
|
|
a {
|
|
--font-weight: var(--link-weight);
|
|
color: var(--text-a, var(--link-color));
|
|
font-weight: var(--link-weight);
|
|
outline: none;
|
|
/* text-decoration-line: var(--link-decoration); */
|
|
/* text-decoration-thickness: var(--link-decoration-thickness); */
|
|
cursor: var(--cursor-link);
|
|
transition: opacity 0.15s ease-in-out;
|
|
background-position: center right;
|
|
background-repeat: no-repeat;
|
|
&:hover {
|
|
color: var(--text-a-hover, var(--link-color-hover));
|
|
/* text-decoration-line: var(--link-decoration-hover); */
|
|
}
|
|
&.internal {
|
|
color: var(--text-a, var(--link-color));
|
|
background-color: color_convert(var(--text-a, var(--link-color)), 15%);
|
|
&.tag-link {
|
|
--highlight-fallback: 258, 88%, 66%;
|
|
--textHighlight-fallback: 255, 208, 0;
|
|
color: var(--tag-color, var(--text-accent));
|
|
text-decoration: var(--tag-decoration, none);
|
|
background-color: var(
|
|
--tag-background,
|
|
hsla(
|
|
var(--interactive-accent-hsl, var(--color-accent-hsl, var(--highlight-fallback))),
|
|
0.1
|
|
)
|
|
);
|
|
&:hover {
|
|
color: var(--tag-color-hover, var(--text-accent));
|
|
text-decoration: var(--tag-decoration-hover, none);
|
|
background-color: var(
|
|
--tag-background-hover,
|
|
hsla(var(--interactive-accent-hsl, var(--highlight-fallback)), 0.2)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
&.external {
|
|
color: var(--link-external-color);
|
|
/* text-decoration-line: var(--link-external-decoration); */
|
|
background-position: center right;
|
|
background-repeat: no-repeat;
|
|
background-image: linear-gradient(transparent, transparent);
|
|
background-color: transparent;
|
|
/* background-size: 13px; */
|
|
/* padding-inline-end: 16px; */
|
|
/* background-position-y: 4px; */
|
|
cursor: var(--cursor-link);
|
|
filter: var(--link-external-filter);
|
|
transition: opacity 0.15s ease-in-out;
|
|
&:hover {
|
|
color: var(--link-external-color-hover);
|
|
/* text-decoration-line: var(--link-external-decoration-hover); */
|
|
}
|
|
}
|
|
}
|
|
|
|
/* TAGS */
|
|
a.tag {
|
|
background-color: var(--tag-background);
|
|
border: var(--tag-border-width) solid var(--tag-border-color);
|
|
border-radius: var(--tag-radius);
|
|
color: var(--tag-color);
|
|
/* font-size: var(--tag-size); */
|
|
font-weight: var(--tag-weight);
|
|
/* text-decoration: var(--tag-decoration); */
|
|
/* padding: var(--tag-padding-y) var(--tag-padding-x); */
|
|
/* line-height: 1; */
|
|
&:hover {
|
|
background-color: var(--tag-background-hover);
|
|
border: var(--tag-border-width) solid var(--tag-border-color-hover);
|
|
color: var(--tag-color-hover);
|
|
text-decoration: var(--tag-decoration-hover);
|
|
}
|
|
}
|
|
input[type="checkbox"] {
|
|
appearance: none;
|
|
appearance: none;
|
|
border-radius: var(--checkbox-radius);
|
|
border: 1px solid var(--checkbox-border-color);
|
|
flex-shrink: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-inline-end: 6px;
|
|
width: var(--checkbox-size);
|
|
height: var(--checkbox-size);
|
|
position: relative;
|
|
transition: box-shadow 0.15s ease-in-out;
|
|
}
|
|
input[type="checkbox"]:hover,
|
|
input[type="checkbox"]:active,
|
|
input[type="checkbox"]:focus {
|
|
outline: 0;
|
|
border-color: var(--checkbox-border-color-hover);
|
|
}
|
|
input[type="checkbox"]:focus-visible {
|
|
box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
|
|
}
|
|
input[type="checkbox"]:checked:after {
|
|
content: "";
|
|
top: -1px;
|
|
inset-inline-start: -1px;
|
|
position: absolute;
|
|
width: var(--checkbox-size);
|
|
height: var(--checkbox-size);
|
|
display: block;
|
|
background-color: var(--checkbox-marker-color);
|
|
mask-position: 52% 52%;
|
|
mask-size: 65%;
|
|
mask-repeat: no-repeat;
|
|
mask-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23000000"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
|
|
}
|
|
input[type="checkbox"]:checked {
|
|
background-color: var(--checkbox-color);
|
|
border-color: var(--checkbox-color);
|
|
}
|
|
@media (hover: hover) {
|
|
input[type="checkbox"]:checked:hover {
|
|
background-color: var(--checkbox-color-hover);
|
|
border-color: var(--checkbox-color-hover);
|
|
}
|
|
}
|
|
input[type="checkbox"][data-indeterminate="true"]:not(:checked):after {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(var(--checkbox-size) / 2 - 2px);
|
|
width: calc(var(--checkbox-size) - 6px);
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
height: 2px;
|
|
display: block;
|
|
border-radius: 2px;
|
|
background-color: var(--text-normal);
|
|
}
|
|
|
|
/* HEADINGS */
|
|
h1 {
|
|
--font-weight: var(--h1-weight);
|
|
font-variant: var(--h1-variant);
|
|
/* letter-spacing: -0.015em; */
|
|
/* line-height: var(--h1-line-height); */
|
|
/* font-size: var(--h1-size); */
|
|
color: var(--text-title-h1, var(--h1-color));
|
|
font-weight: var(--font-weight);
|
|
font-style: var(--h1-style);
|
|
/* font-family: var(--h1-font); */
|
|
/* margin-block-start: var(--p-spacing); */
|
|
/* margin-block-end: var(--p-spacing); */
|
|
}
|
|
h1 a {
|
|
--link-weight: var(--h1-weight);
|
|
}
|
|
h2 {
|
|
--font-weight: var(--h2-weight);
|
|
font-variant: var(--h2-variant);
|
|
/* letter-spacing: -0.015em; */
|
|
/* line-height: var(--h2-line-height); */
|
|
/* font-size: var(--h2-size); */
|
|
color: var(--text-title-h2, var(--h2-color));
|
|
font-weight: var(--font-weight);
|
|
font-style: var(--h2-style);
|
|
/* font-family: var(--h2-font); */
|
|
/* margin-block-start: var(--p-spacing); */
|
|
/* margin-block-end: var(--p-spacing); */
|
|
}
|
|
h2 a {
|
|
--link-weight: var(--h2-weight);
|
|
}
|
|
h3 {
|
|
--font-weight: var(--h3-weight);
|
|
font-variant: var(--h3-variant);
|
|
/* letter-spacing: -0.015em; */
|
|
/* line-height: var(--h3-line-height); */
|
|
/* font-size: var(--h3-size); */
|
|
color: var(--text-title-h3, var(--h3-color));
|
|
font-weight: var(--font-weight);
|
|
font-style: var(--h3-style);
|
|
/* font-family: var(--h3-font); */
|
|
/* margin-block-start: var(--p-spacing); */
|
|
/* margin-block-end: var(--p-spacing); */
|
|
}
|
|
h3 a {
|
|
--link-weight: var(--h3-weight);
|
|
}
|
|
h4 {
|
|
--font-weight: var(--h4-weight);
|
|
font-variant: var(--h4-variant);
|
|
/* letter-spacing: 0.015em; */
|
|
/* line-height: var(--h4-line-height); */
|
|
/* font-size: var(--h4-size); */
|
|
color: var(--text-title-h4, var(--h4-color));
|
|
font-weight: var(--font-weight);
|
|
font-style: var(--h4-style);
|
|
/* font-family: var(--h4-font); */
|
|
/* margin-block-start: var(--p-spacing); */
|
|
/* margin-block-end: var(--p-spacing); */
|
|
}
|
|
h4 a {
|
|
--link-weight: var(--h4-weight);
|
|
}
|
|
h5 {
|
|
--font-weight: var(--h5-weight);
|
|
font-variant: var(--h5-variant);
|
|
/* letter-spacing: 0.015em; */
|
|
/* font-size: var(--h5-size); */
|
|
/* line-height: var(--h5-line-height); */
|
|
color: var(--text-title-h5, var(--h5-color));
|
|
font-weight: var(--font-weight);
|
|
font-style: var(--h5-style);
|
|
/* font-family: var(--h5-font); */
|
|
/* margin-block-start: var(--p-spacing); */
|
|
/* margin-block-end: var(--p-spacing); */
|
|
}
|
|
h5 a {
|
|
--link-weight: var(--h5-weight);
|
|
}
|
|
h6 {
|
|
--font-weight: var(--h6-weight);
|
|
font-variant: var(--h6-variant);
|
|
/* letter-spacing: 0.015em; */
|
|
/* font-size: var(--h6-size); */
|
|
/* line-height: var(--h6-line-height); */
|
|
color: var(--text-title-h6, var(--h6-color));
|
|
font-weight: var(--font-weight);
|
|
font-style: var(--h6-style);
|
|
/* font-family: var(--h6-font); */
|
|
/* margin-block-start: var(--p-spacing); */
|
|
/* margin-block-end: var(--p-spacing); */
|
|
}
|
|
h6 a {
|
|
--link-weight: var(--h6-weight);
|
|
}
|
|
|
|
/* CODE */
|
|
pre {
|
|
border: 1px solid var(--background-modifier-border, var(--border));
|
|
}
|
|
code {
|
|
color: var(--code-normal);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
*:is(:not(pre)) > code {
|
|
color: var(--markup-code, var(--code-normal));
|
|
background-color: var(--code-background);
|
|
}
|
|
|
|
/* EXPLORER, TOC, BACKLINKS */
|
|
.toc-content,
|
|
.explorer-content,
|
|
.backlinks {
|
|
ul {
|
|
li > a {
|
|
color: var(--nav-item-color, var(--text-muted, var(--dark)));
|
|
&:hover {
|
|
color: var(--nav-item-color-hover, var(--text-normal, var(--tertiary)));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.backlinks:after {
|
|
background: unset;
|
|
}
|
|
|
|
.explorer {
|
|
&:after {
|
|
background: unset;
|
|
}
|
|
button.explorer {
|
|
color: var(--collapse-icon-color-collapsed, var(--nav-heading-color-collapsed));
|
|
}
|
|
.explorer-content {
|
|
background-color: var(--background-primary);
|
|
& ul {
|
|
& li a {
|
|
color: var(--nav-item-color, var(--nav-heading-color-collapsed));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.folder-container {
|
|
.folder-icon {
|
|
color: var(--collapse-icon-color-collapsed, var(--nav-heading-color-collapsed));
|
|
&:hover {
|
|
.folder-icon {
|
|
color: var(--collapse-icon-color-collapsed, var(--nav-heading-color-collapsed-hover));
|
|
}
|
|
}
|
|
}
|
|
div > a,
|
|
div > button,
|
|
div > button > span {
|
|
color: var(--nav-item-color, var(--nav-heading-color-collapsed));
|
|
&:hover {
|
|
color: var(--nav-item-color-hover, var(--nav-heading-color-collapsed-hover));
|
|
}
|
|
}
|
|
&:has(+ div.folder-outer.open) {
|
|
.folder-icon {
|
|
color: var(--collapse-icon-color, var(--nav-heading-color));
|
|
&:hover {
|
|
color: var(--collapse-icon-color, var(--nav-heading-color-hover));
|
|
}
|
|
}
|
|
div > a,
|
|
div > button,
|
|
div > button > span {
|
|
color: var(--nav-heading-color);
|
|
&:hover {
|
|
color: var(--nav-heading-color-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* SEARCH */
|
|
.search .search-button {
|
|
background-color: var(
|
|
--background-modifier-form-field,
|
|
var(--search-result-background, var(--background-primary, var(--lightgray)))
|
|
);
|
|
color: var(--search-clear-button-color, var(--text-muted, var(--darkgray)));
|
|
svg {
|
|
color: var(--search-icon-color, var(--text-muted, var(--darkgray)));
|
|
stroke: var(--search-icon-color, var(--text-muted, var(--darkgray)));
|
|
}
|
|
}
|
|
|
|
/* DARKMODE */
|
|
.darkmode {
|
|
& svg {
|
|
color: var(--search-icon-color, var(--text-muted, var(--darkgray)));
|
|
fill: var(--search-icon-color, var(--text-muted, var(--darkgray)));
|
|
}
|
|
}
|
|
|
|
/* PAGE TITLE */
|
|
.page-title a {
|
|
color: var(--h2-color, var(--link-color, var(--darkgray)));
|
|
}
|
|
|
|
/* METADATA */
|
|
.content-meta {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* GRAPH */
|
|
.graph {
|
|
& > .graph-outer {
|
|
border: 1px solid var(--background-modifier-border-hover, var(--color-base-35));
|
|
--background-modifier-border-focus: var(--color-base-40);
|
|
& > .global-graph-icon {
|
|
color: var(--search-icon-color, var(--text-muted, var(--darkgray)));
|
|
&:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
}
|
|
}
|
|
& > .global-graph-outer {
|
|
& > .global-graph-container {
|
|
border: 1px solid var(--background-modifier-border-hover, var(--color-base-35));
|
|
background-color: var(--background-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* MISC */
|
|
hr {
|
|
border: none;
|
|
border-top: var(--hr-thickness, 2px) solid;
|
|
border-color: var(--hr-color, var(--background-modifier-border, var(--lightgray)));
|
|
}
|
|
|
|
.clipboard-button {
|
|
color: var(--text-muted);
|
|
border-color: var(--checkbox-border-color, var(--text-faint));
|
|
background-color: transparent;
|
|
&:hover {
|
|
border-color: var(--checkbox-border-color-hover, var(--text-muted));
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
& > svg {
|
|
fill: var(--search-icon-color, var(--text-muted, var(--darkgray)));
|
|
}
|
|
}
|
|
|
|
details.toc {
|
|
& summary {
|
|
cursor: pointer;
|
|
|
|
&::marker {
|
|
color: var(--text-muted);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* POPOVER */
|
|
.popover {
|
|
& .popover-inner {
|
|
border: var(--background-modifier-border, var(--color-base-30));
|
|
background-color: var(--background-primary);
|
|
}
|
|
}
|
|
|
|
/* BACKGROUNDS */
|
|
section {
|
|
background-color: var(--background-primary);
|
|
}
|
|
.page > #quartz-body {
|
|
.sidebar {
|
|
background-color: var(--background-primary);
|
|
&.left:has(.explorer) {
|
|
background-color: var(--background-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search > .search-container > .search-space > * {
|
|
background-color: var(--background-secondary, var(--background-primary));
|
|
}
|
|
|
|
/* TEXT */
|
|
strong {
|
|
color: var(--bold-color);
|
|
}
|
|
i,
|
|
em {
|
|
color: var(--italic-color);
|
|
}
|
|
p,
|
|
ul,
|
|
text,
|
|
a,
|
|
tr,
|
|
td,
|
|
li,
|
|
ol,
|
|
ul,
|
|
.katex,
|
|
.math {
|
|
color: var(--text-normal);
|
|
}
|
|
}
|
|
|
|
/* START CANVAS GRAPH WORKAROUND */
|
|
:root:root {
|
|
--highlight-fallback: 258, 88%, 66%;
|
|
--textHighlight-fallback: 255, 208, 0;
|
|
--light: var(
|
|
--graph-node,
|
|
var(--text-muted, var(--background-primary, var(--color-base-00, #ffffff)))
|
|
) !important;
|
|
--lightgray: var(
|
|
--graph-line,
|
|
var(
|
|
--color-base-35,
|
|
var(
|
|
--background-modifier-border-focus,
|
|
var(--background-modifier-border, var(--color-base-30, #e0e0e0))
|
|
)
|
|
)
|
|
) !important;
|
|
--gray: var(
|
|
--graph-node,
|
|
var(
|
|
--text-muted,
|
|
var(
|
|
--graph-text,
|
|
var(--text-normal, var(--checkbox-border-color, var(--text-faint, #ababab)))
|
|
)
|
|
)
|
|
) !important;
|
|
--darkgray: var(
|
|
--graph-node-unresolved,
|
|
var(--text-faint, var(--text-normal, var(--color-base-100, #222222)))
|
|
) !important;
|
|
--dark: var(--h1-color, var(--text-faint, #ababab)) !important;
|
|
--secondary: var(
|
|
--graph-node-focused,
|
|
var(
|
|
--text-accent,
|
|
var(--link-color, var(--text-accent, var(--color-accent, hsl(258, 88%, 66%))))
|
|
)
|
|
) !important;
|
|
--tertiary: var(
|
|
--graph-node-tag,
|
|
var(
|
|
--color-green,
|
|
var(
|
|
--link-color-hover,
|
|
var(--text-accent-hover, var(--color-accent-2, hsl(258 - 3, 88% * 1.02, 66% * 1.15)))
|
|
)
|
|
)
|
|
) !important;
|
|
--highlight: var(
|
|
--tag-background,
|
|
hsla(var(--interactive-accent-hsl, var(--color-accent-hsl, var(--highlight-fallback))), 0.1)
|
|
) !important;
|
|
--textHighlight: var(
|
|
--text-highlight-bg,
|
|
rgba(var(--text-highlight-bg-rgb, var(--textHighlight-fallback)), 0.4)
|
|
) !important;
|
|
}
|
|
|
|
:root:root[saved-theme="dark"] {
|
|
--highlight-fallback: 258, 88%, 66%;
|
|
--textHighlight-fallback: 255, 208, 0;
|
|
--light: var(
|
|
--graph-node,
|
|
var(--text-muted, var(--background-primary, var(--color-base-00, #1e1e1e)))
|
|
) !important;
|
|
--lightgray: var(
|
|
--graph-line,
|
|
var(
|
|
--color-base-35,
|
|
var(
|
|
--background-modifier-border-focus,
|
|
var(--background-modifier-border, var(--color-base-30, #363636))
|
|
)
|
|
)
|
|
) !important;
|
|
--gray: var(
|
|
--graph-node,
|
|
var(
|
|
--text-muted,
|
|
var(
|
|
--graph-text,
|
|
var(--text-normal, var(--checkbox-border-color, var(--text-faint, #666666)))
|
|
)
|
|
)
|
|
) !important;
|
|
--darkgray: var(
|
|
--graph-node-unresolved,
|
|
var(--text-faint, var(--text-normal, var(--color-base-100, #dadada)))
|
|
) !important;
|
|
--dark: var(--h1-color, var(--text-faint, #666666)) !important;
|
|
--secondary: var(
|
|
--graph-node-focused,
|
|
var(
|
|
--text-accent,
|
|
var(
|
|
--link-color,
|
|
var(--text-accent, var(--color-accent-1, hsl(258 - 3, 88% * 1.02, 66% * 1.15)))
|
|
)
|
|
)
|
|
) !important;
|
|
--tertiary: var(
|
|
--graph-node-tag,
|
|
var(
|
|
--color-green,
|
|
var(
|
|
--link-color-hover,
|
|
var(--text-accent-hover, var(--color-accent-2, hsl(258 - 5, 88% * 1.05, 66% * 1.29)))
|
|
)
|
|
)
|
|
) !important;
|
|
--highlight: var(
|
|
--tag-background,
|
|
hsla(var(--interactive-accent-hsl, var(--color-accent-hsl, var(--highlight-fallback))), 0.2)
|
|
) !important;
|
|
--textHighlight: var(
|
|
--text-highlight-bg,
|
|
rgba(var(--text-highlight-bg-rgb, var(--textHighlight-fallback)), 0.4)
|
|
) !important;
|
|
}
|
|
/* END CANVAS GRAPH WORKAROUND */
|