body { /* Animations */ --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); /* Blockquotes */ --blockquote-border-thickness: 2px; --blockquote-border-color: var(--interactive-accent); --blockquote-font-style: normal; --blockquote-color: inherit; --blockquote-background-color: transparent; /* Bold */ --bold-modifier: 200; --bold-color: inherit; --bold-weight: calc(var(--font-weight) + var(--bold-modifier)); /* Borders */ --border-width: 1px; /* Buttons */ --button-radius: var(--input-radius); /* Callouts */ --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-cite: 87, 61, 132; --text-cite: 87, 161, 132; /* Canvas */ --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-accent); /* Caret (text entry cursor) */ --caret-color: var(--text-normal); /* Checkboxes */ --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 */ --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 icons */ --collapse-icon-color: var(--text-faint); --collapse-icon-color-collapsed: var(--color-accent); /* Cursor */ --cursor: default; --cursor-link: pointer; /* Dialogs - e.g. small modals, confirmations */ --dialog-width: 560px; --dialog-max-width: 80vw; --dialog-max-height: 85vh; /* Dividers — between panes */ --divider-color: var(--background-modifier-border); --divider-color-hover: var(--interactive-accent); --divider-width: 1px; --divider-width-hover: 3px; --divider-vertical-height: calc(100% - var(--header-height)); /* Dragging */ --drag-ghost-background: rgba(0, 0, 0, 0.85); --drag-ghost-text-color: #fff; /* Dropdowns */ --dropdown-background: var(--interactive-normal); --dropdown-background-blend-mode: hard-light; --dropdown-background-hover: var(--interactive-hover); --dropdown-background-position: right 0.5em top 50%, 0 0; --dropdown-background-size: 1em auto, 100%; --dropdown-padding: 0 1.9em 0 0.8em; /* Embeds */ --embed-max-height: 4000px; --embed-canvas-max-height: 400px; --embed-background: inherit; --embed-border-start: 2px solid var(--interactive-accent); --embed-border-end: none; --embed-border-top: none; --embed-border-bottom: none; --embed-padding: 0 0 0 var(--size-4-6); --embed-font-style: inherit; /* Blocks */ --embed-block-shadow-hover: 0 0 0 1px var(--background-modifier-border), inset 0 0 0 1px var(--background-modifier-border); /* File layout */ --file-line-width: 700px; --file-folding-offset: 24px; --file-margins: var(--size-4-8); --file-header-font-size: var(--font-ui-small); --file-header-font-weight: 400; --file-header-border: var(--border-width) solid transparent; --file-header-justify: center; /* Relative font sizes */ --font-smallest: 0.8em; --font-smaller: 0.875em; --font-small: 0.933em; /* UI font sizes */ --font-ui-smaller: 12px; --font-ui-small: 14px; --font-ui-medium: 16px; --font-ui-large: 20px; /* Font weights */ --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; /* Footnotes */ --footnote-size: var(--font-smaller); /* Graphs */ --graph-controls-width: 240px; --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(--background-modifier-border-focus); --graph-node-tag: var(--color-accent); --graph-node-attachment: var(--color-accent-1); /* Headings */ --heading-formatting: var(--text-faint); --heading-spacing: calc(var(--p-spacing) * 2.5); --h1-color: var(--color-base-100); --h2-color: inherit; --h3-color: inherit; --h4-color: inherit; --h5-color: inherit; --h6-color: inherit; --h1-font: var(--font-title); --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: 3.5em; --h2-size: 1.842em; --h3-size: 1.3572em; --h4-size: 1.250em; --h5-size: 1em; --h6-size: 0.7368em; --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: 900; --h2-weight: 800; --h3-weight: 700; --h4-weight: 600; --h5-weight: 600; --h6-weight: 500; /* View header */ --header-height: 40px; /* Horizontal rules */ --hr-color: var(--background-modifier-border); --hr-thickness: 2px; /* Icons */ --icon-size: var(--icon-m); --icon-stroke: var(--icon-m-stroke-width); --icon-xs: 14px; --icon-s: 16px; --icon-m: 18px; --icon-l: 18px; --icon-xl: 32px; --icon-xs-stroke-width: 2px; --icon-s-stroke-width: 2px; --icon-m-stroke-width: 1.75px; --icon-l-stroke-width: 1.75px; --icon-xl-stroke-width: 1.25px; --icon-color: var(--text-muted); --icon-color-hover: var(--text-muted); --icon-color-active: var(--color-accent); --icon-color-focused: var(--text-normal); --icon-opacity: 0.85; --icon-opacity-hover: 1; --icon-opacity-active: 1; --clickable-icon-radius: var(--radius-s); /* Indentation guide */ --indentation-guide-width: 1px; --indentation-guide-width-active: 1px; --indentation-guide-color: rgba(var(--mono-rgb-100), 0.12); --indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3); --indentation-guide-editing-indent: 0.85em; --indentation-guide-reading-indent: -0.85em; --indentation-guide-source-indent: 0.25em; /* Inline title */ --inline-title-color: var(--h1-color); --inline-title-font: var(--h1-font); --inline-title-line-height: var(--h1-line-height); --inline-title-size: clamp(2.5rem, 8vw - 4rem, 5rem); --inline-title-style: var(--h1-style); --inline-title-variant: var(--h1-variant); --inline-title-weight: var(--h1-weight); --inline-title-margin-bottom: 0.5em; /* Inputs */ --input-height: 30px; --input-radius: 5px; --input-font-weight: var(--font-normal); --input-border-width: 1px; /* Italic */ --italic-color: inherit; --italic-weight: inherit; /* Z-index */ --layer-cover: 5; --layer-sidedock: 10; --layer-status-bar: 15; --layer-popover: 30; --layer-slides: 45; --layer-modal: 50; --layer-notice: 60; --layer-menu: 65; --layer-tooltip: 70; --layer-dragged-item: 80; /* Line heights */ --line-height-normal: 1.5; --line-height-tight: 1.3; /* 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); /* Lists */ --list-indent: 2.25em; --list-indent-editing: 0.75em; --list-indent-source: 0; --list-spacing: 0.075em; --list-marker-color: var(--text-faint); --list-marker-color-hover: var(--text-muted); --list-marker-color-collapsed: var(--text-accent); --list-bullet-border: none; --list-bullet-radius: 50%; --list-bullet-size: 0.3em; --list-bullet-transform: none; --list-numbered-style: decimal; --list-bullet-end-padding: 1.3rem; /* File navigator */ --nav-item-size: var(--font-ui-small); --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-padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-6); --nav-item-parent-padding: var(--nav-item-padding); --nav-item-children-padding-start: var(--size-2-2); --nav-item-children-margin-start: var(--size-4-3); --nav-item-weight: inherit; --nav-item-weight-hover: inherit; --nav-item-weight-active: inherit; --nav-item-white-space: pre; --nav-indentation-guide-width: var(--indentation-guide-width); --nav-indentation-guide-color: var(--indentation-guide-color); --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); /* 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-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-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); /* Modals - e.g. settings, community themes, community plugins */ --modal-background: var(--background-primary); --modal-width: 90vw; --modal-height: 85vh; --modal-max-width: 1100px; --modal-max-height: 1000px; --modal-max-width-narrow: 800px; --modal-border-width: var(--border-width); --modal-border-color: var(--color-base-40, var(--background-modifier-border-focus)); --modal-radius: var(--radius-l); --modal-community-sidebar-width: 280px; /* Multi-select pills */ --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; /* Paragraphs */ --p-spacing: 1rem; --p-spacing-empty: 0rem; /* PDF view */ --pdf-background: var(--background-primary); --pdf-page-background: var(--background-primary); --pdf-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.1); --pdf-spread-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); --pdf-sidebar-background: var(--background-primary); --pdf-thumbnail-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.2); /* Popovers - file previews */ --popover-width: 450px; --popover-height: 400px; --popover-max-height: 95vh; --popover-pdf-width: 450px; --popover-pdf-height: 400px; --popover-font-size: var(--font-text-size); /* Prompts - e.g. quick switcher, command palette */ --prompt-input-height: 40px; --prompt-width: 700px; --prompt-max-width: 80vw; --prompt-max-height: 70vh; --prompt-border-width: var(--border-width); --prompt-border-color: var(--color-base-40, var(--background-modifier-border-focus)); /* Radiuses */ --radius-s: 4px; --radius-m: 8px; --radius-l: 12px; --radius-xl: 16px; /* Ribbon */ --ribbon-background: var(--background-secondary); --ribbon-background-collapsed: var(--background-primary); --ribbon-width: 44px; --ribbon-padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); /* Scrollbars */ --scrollbar-active-thumb-bg: hsla(var(--color-accent-hsl), 0.2); --scrollbar-bg: rgba(var(--mono-rgb-100), 0.05); --scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.05); /* Search */ --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); /* Layout sizing - for padding and margins */ --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; /* Sidebar */ --sidebar-markdown-font-size: calc(var(--font-text-size) * 0.9); --sidebar-tab-text-display: none; /* Sliders */ --slider-thumb-border-width: 1px; --slider-thumb-border-color: var(--background-modifier-border-hover); --slider-thumb-height: 18px; --slider-thumb-width: 18px; --slider-thumb-y: -6px; --slider-thumb-radius: 50%; --slider-s-thumb-size: 15px; --slider-s-thumb-position: -5px; --slider-track-background: var(--background-modifier-border); --slider-track-height: 3px; /* Status bar */ --status-bar-background: var(--background-secondary); --status-bar-border-color: var(--divider-color); --status-bar-border-width: 1px 0 0 1px; --status-bar-font-size: var(--font-ui-smaller); --status-bar-text-color: var(--text-muted); --status-bar-position: fixed; --status-bar-radius: var(--radius-m) 0 0 0; --status-bar-scroll-padding: calc(var(--status-bar-font-size) + 18px); /* Sync */ --sync-avatar-color-current-user: transparent; --sync-avatar-color-1: var(--color-red); --sync-avatar-color-2: var(--color-orange); --sync-avatar-color-3: var(--color-yellow); --sync-avatar-color-4: var(--color-green); --sync-avatar-color-5: var(--color-cyan); --sync-avatar-color-6: var(--color-blue); --sync-avatar-color-7: var(--color-purple); --sync-avatar-color-8: var(--color-pink); /* Swatch for color inputs */ --swatch-radius: 14px; --swatch-height: 24px; --swatch-width: 24px; --swatch-shadow: inset 0 0 0 1px rgba(var(--mono-rgb-100), 0.15); /* Tabs */ --tab-background-active: var(--background-primary); --tab-text-color: var(--text-faint); --tab-text-color-active: var(--text-muted); --tab-text-color-focused: var(--text-muted); --tab-text-color-focused-active: var(--text-muted); --tab-text-color-focused-highlighted: var(--text-accent); --tab-text-color-focused-active-current: var(--text-normal); --tab-font-size: var(--font-ui-small); --tab-font-weight: inherit; --tab-container-background: var(--background-secondary); --tab-divider-color: var(--background-modifier-border-hover); --tab-outline-color: var(--divider-color); --tab-outline-width: 1px; --tab-curve: 6px; --tab-radius: var(--radius-s); --tab-radius-active: 6px 6px 0 0; --tab-width: 200px; --tab-max-width: 320px; /* Stacked tabs */ --tab-stacked-pane-width: 700px; --tab-stacked-header-width: var(--header-height); --tab-stacked-font-size: var(--font-ui-small); --tab-stacked-font-weight: 400; --tab-stacked-text-align: start; --tab-stacked-text-transform: rotate(0deg); --tab-stacked-text-writing-mode: vertical-lr; --tab-stacked-shadow: -8px 0 8px 0 rgba(0, 0, 0, 0.05); /* Tables */ --table-background: transparent; --table-border-width: 1px; --table-border-color: var(--background-modifier-border); --table-white-space: break-spaces; --table-header-background: var(--table-background); --table-header-background-hover: inherit; --table-header-border-width: var(--table-border-width); --table-header-border-color: var(--table-border-color); --table-header-font: inherit; --table-header-size: var(--table-text-size); --table-header-weight: calc(var(--font-weight) + var(--bold-modifier)); --table-header-color: var(--text-normal); --table-line-height: var(--line-height-tight); --table-text-size: var(--font-text-size); --table-text-color: inherit; --table-column-min-width: 6ch; --table-column-max-width: none; --table-column-alt-background: var(--table-background); --table-column-first-border-width: var(--table-border-width); --table-column-last-border-width: var(--table-border-width); --table-row-background-hover: var(--table-background); --table-row-alt-background: var(--table-background); --table-row-alt-background-hover: var(--table-background); --table-row-last-border-width: var(--table-border-width); --table-selection: hsla(var(--color-accent-hsl), 0.1); --table-selection-blend-mode: var(--highlight-mix-blend-mode); --table-selection-border-color: var(--interactive-accent); --table-selection-border-width: 2px; --table-selection-border-radius: 4px; --table-cell-vertical-alignment: top; --table-drag-handle-background: transparent; --table-drag-handle-background-active: var(--table-selection-border-color); --table-drag-handle-color: var(--text-faint); --table-drag-handle-color-active: var(--text-on-accent); --table-add-button-background: transparent; --table-add-button-border-width: var(--table-border-width); --table-add-button-border-color: var(--background-modifier-border); /* Tags */ --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; /* Window frame */ --titlebar-background: var(--background-secondary); --titlebar-background-focused: transparent; --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); /* Toggles */ --toggle-border-width: 2px; --toggle-width: 40px; --toggle-radius: 18px; --toggle-thumb-color: white; --toggle-thumb-radius: 18px; --toggle-thumb-height: 18px; --toggle-thumb-width: 18px; --toggle-s-border-width: 2px; --toggle-s-width: 34px; --toggle-s-thumb-height: 15px; --toggle-s-thumb-width: 15px; /* Vault profile */ --vault-profile-font-size: var(--font-ui-small); --vault-profile-font-weight: var(--font-medium); --vault-profile-color: var(--text-normal); --vault-profile-color-hover: var(--vault-profile-color); /* Vault name */ --vault-name-font-size: var(--font-ui-small); --vault-name-font-weight: var(--font-medium); --vault-name-color: var(--text-normal); /* Workspace */ --workspace-background-translucent: rgba(var(--mono-rgb-0), 0.6); /* Color mappings ------------------------ */ /* Accent HSL values */ --accent-h: 258; --accent-s: 88%; --accent-l: 66%; /* Backgrounds */ --background-primary: var(--color-base-00); --background-primary-pre-alt: var(--color-base-05); --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); /* Inputs */ --background-modifier-form-field: var(--color-base-00); /* Text */ --text-normal: var(--color-base-70); --text-muted: var(--color-base-60); --text-faint: var(--color-base-50); --text-on-accent: var(--color-base-100); --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) !important; --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); /* custom vars */ --bb-border: 1px solid var(--color-base-30); --bb-border-alt: 1px solid var(--color-base-25); --bb-border-dashed: 1px dashed var(--color-base-30); --bb-border-transparent: 1px solid transparent; --bb-border-high-contrast: 1px solid var(--color-base-60); --bb-shadow: -33px 24px 64px -8px hsla(var(--color-accent-hsl), 0.1), 33px 12px 64px -8px hsla(calc(var(--accent-h) - 175), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.29), 0.1); --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); /* --color-accent-1: hsl(calc(var(--accent-h) - 175), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.29)); --color-accent-1-hsl: calc(var(--accent-h) - 175), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.29); */ --color-accent-2: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.15)); --font-title: "Fraunces", sans-serif; --font-interface-theme: "Aspekta", sans-serif; --font-text-theme: "IAWriter", sans-serif; --font-monospace: "Monaspace", monospace; --transition-duration: 700ms; --transition-duration-short: 350ms; --transition-ease: ease; --transition-props: background var(--transition-duration), border var(--transition-duration), color var(--transition-duration); } .serif { --font-text: "Fraunces", sans-serif; }.o-shark-d.theme-dark { color-scheme: dark; --highlight-mix-blend-mode: lighten; --mono-rgb-0: 0, 0, 0; --mono-rgb-100: 255, 255, 255; --color-red-rgb: 104, 52, 43; --color-red: #FF5000; --color-red-hsl: 9, 41%, 29%; --color-orange-rgb: 225, 162, 97; --color-orange: #ED7614; --color-orange-hsl: 30, 68%, 63%; --color-yellow-rgb: 137, 116, 74; --color-yellow: #EDAB50; --color-yellow-hsl: 40, 30%, 41%; --color-green-rgb: 70, 80, 55; --color-green: #99E65F; --color-green-hsl: 84, 19%, 26%; --color-cyan-rgb: 135, 178, 184; --color-cyan: #94FDFF; --color-cyan-hsl: 187, 26%, 63%; --color-blue-rgb: 0, 132, 255; --color-blue: #0084ff --color-blue-hsl: 209, 100%, 50%; --color-purple-rgb: 77, 65, 89; --color-purple-hsl: 270, 16%, 30%; --color-purple: #93388F; --color-pink-rgb: 125, 76, 74; --color-pink: #F68187; --color-pink-hsl: 2, 26%, 39%; --canvas-color: 245, 245, 245; --color-base-00: #221a1f; --color-base-05: #1d2433; --color-base-10: #263042; --color-base-20: #5b4a5c; --color-base-25: #786779; --color-base-30: #384258; --color-base-35: #919191; --color-base-40: #485069; --color-base-50: #856772; --color-base-60: #9e809e; --color-base-70: #c8e0ee; --color-base-100: #FFF; --accent-h: 210 !important; --accent-s: 92% !important; --accent-l: 71% !important; --color-accent-rgb: 112, 180, 249 !important; --color-accent-hsl: 210, 92%, 71% !important; --h1-color: #70B4F9; --h2-color: #ffc8dd; } .theme-dark.o-shark-d .mod-left-split .workspace-tabs .workspace-leaf { background: #1c2431 !important; } .theme-dark.o-shark-d .workspace-tabs.mod-top-left-space .workspace-tab-header-container, .theme-dark.o-shark-d .workspace-tabs.mod-top-right-space .workspace-tab-header-container { background: #1c2431; } .theme-dark.o-shark-d .workspace .mod-root .workspace-tab-header:not(.is-active) { font-weight: 600; background: #3e333f !important; } .theme-dark.o-shark-d .mod-right-split .workspace-tabs .workspace-leaf { background: #1c2431 !important; } /* overrides for header lines */ .theme-dark.o-shark-d.o-header-lapel .markdown-reading-view h1:not(.embedded-note-title)::before, .theme-dark.o-shark-d.o-header-lapel :nth-child(1 of .cm-header-1)::before { background: #70B4F9 !important; } .theme-dark.o-shark-d.o-header-lapel .markdown-reading-view h2:not(.embedded-note-title)::before, .theme-dark.o-shark-d.o-header-lapel :nth-child(1 of .cm-header-2)::before { background: #ffc8dd; }