/* ================================================================ */ /* Themeable - Common /* ================================================================ */ :root { /* Colors */ /* Names: red, orange, amber, yellow, lime, green, emerald, */ /* teal, cyan, sky,blue, indigo, violet, purple, */ /* fuchsia, pink, rose */ /* Range: 50 (light), 100, 200 ... 900 (dark) */ --color-primary : var(--sky-600); --color-secondary : var(--violet-500); --marked-background : var(--yellow-300); --search-match-background : var(--pink-100); --search-match-border-color: var(--pink-500); --selection-background : var(--sky-100); /* Monochrome */ /* Names: slate, gray, zinc, neutral, stone */ /* Range: 50 (light), 100, 200 ... 900 (dark) */ --mono-50 : var(--neutral-50); --mono-100: var(--neutral-100); --mono-200: var(--neutral-200); --mono-300: var(--neutral-300); --mono-400: var(--neutral-400); --mono-500: var(--neutral-500); --mono-600: var(--neutral-600); --mono-700: var(--neutral-700); --mono-800: var(--neutral-800); --mono-900: var(--neutral-900); /* Typography */ --font-family : "InterVariable", "Inter", system, -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-size : 16px; --font-size-mono : 0.9375em; --font-size-ui : 14px; --font-weight : 400; --font-weight-mono: 500; } /* ================================================================ */ /* Themeable - Advanced /* ================================================================ */ :root { /* Colors */ --color-hover : var(--mono-200); --color-hover-content : inherit; --color-primary-content: #fff; --color-status : var(--mono-500); --color-status-content : #fff; /* Typography */ --font-family-diagram: var(--font-family); --font-family-ui : var(--font-family); --font-size-xxl : calc(var(--font-size-xl) * var(--modular-scale)); /* 47px (33 * 1.414) */ --font-size-xl : calc(var(--font-size-l) * var(--modular-scale)); /* 33px (23 * 1.414) */ --font-size-l : calc(1rem * var(--modular-scale)); /* 23px (16 * 1.414) */ --font-size-m : 1rem; /* 16px */ --font-size-s : max(0.75rem, calc(1rem / var(--modular-scale))); /* 12px ((16 * 0.75 = 12) > (16 / 1.414 = 11) */ --font-size-xs : max(0.6875rem, calc(var(--font-size-s) / var(--modular-scale))); /* 11px ((16 * 0.6875 = 11) > (12 / 1.414 = 8) */ --font-size-ui-xl : calc(var(--font-size-ui-l) * var(--modular-scale)); /* 28px */ --font-size-ui-l : calc(var(--font-size-ui) * var(--modular-scale)); /* 20px */ --font-size-ui-s : max(12px, calc(var(--font-size-ui) * 0.857)); /* 12px */ --line-height : 1.6; --modular-scale : 1.414; /* 1.067, 1.125, 1.200, 1.250, 1.333, 1.414, 1.500, 1.618 */ /* App */ --background-color : var(--mono-50); --border-color : var(--mono-200); --border-radius : 6px; --border-radius-s : 3px; --border-radius-xs : 1px; --btn-toggle-active-background: ; --btn-toggle-active-color : var(--color-primary); --btn-toggle-background : ; --btn-toggle-color : var(--mono-400); --btn-toggle-hover-background : var(--color-hover); --btn-toggle-hover-color : var(--color-hover-content); --drop-shadow : drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15)); --input-background : #fff; --input-border-color : var(--border-color); --input-focus-color : var(--color-primary); --input-color : var(--text-color); --input-placeholder-color : var(--mono-400); --kbd-background : var(--mono-600); --kbd-border-color : transparent; --kbd-color : #fff; --max-width : 75ch; --md-brackets : var(--mono-400); --md-brackets-expanded : var(--color-secondary); --md-tags : var(--md-brackets); --md-tags-expanded : var(--md-brackets-expanded); --menu-background : #fff; --menu-border-width : 0; --menu-color : inherit; --scrollbar-thumb-color : var(--mono-300); --scrollbar-width : 6px; --search-match-color : var(--text-color); --selection-color : ; --sidebar-active-background : var(--color-hover); --sidebar-active-color : var(--color-hover-content); --sidebar-background : var(--mono-100); --sidebar-border-color : var(--mono-200); --sidebar-border-width : 1px; --sidebar-color : var(--mono-700); --sidebar-hover-background : var(--color-hover); --sidebar-hover-color : var(--color-hover-content); --text-color : var(--mono-700); --tooltip-background : var(--mono-50); --tooltip-text-color : var(--mono-800); /* Elements */ --blockquote-background : var(--mono-100); --blockquote-border-color : var(--color-primary); --blockquote-border-width : 0 0 0 4px; --blockquote-color : inherit; --blockquote-padding : 1rem 1.5rem 1rem 1.5rem; --code-inline-background : var(--mono-200); --code-inline-color : var(--strong-color); --code-padding-tb : 1.5em; --code-padding-lr : 1.5em; --checkbox-background : var(--mono-100); --checkbox-border-color : var(--mono-300); --checkbox-border-radius : var(--border-radius-s); --checkbox-check-color : var(--color-primary-content); --checkbox-size : 1.2rem; --counter-color : inherit; --h1-font-size : var(--font-size-xxl); --h1-letter-spacing : -0.03em; --h2-font-size : var(--font-size-xl); --h2-letter-spacing : -0.02em; --h3-font-size : var(--font-size-l); --h3-letter-spacing : -0.01em; --h4-font-size : var(--font-size-m); --h5-font-size : var(--font-size-m); --h6-font-size : var(--font-size-s); --heading-color : var(--mono-800); --heading-font-weight : 800; --hr-color : var(--mono-300); --hr-height : 2px; --link-color : var(--color-primary); --marked-color : inherit; --marker-color : inherit; --strong-color : var(--mono-800); --strong-font-weight : 600; --table-edit-active-background: var(--mono-500); --table-edit-active-color : var(--mono-50); --table-edit-background : var(--mono-200); --table-edit-color : var(--mono-600); --table-edit-hover-background : var(--mono-300); --table-edit-hover-color : var(--table-edit-color); --tbody-border-color : unset; --tbody-border-width : unset; --td-border-color : unset; --td-border-width : unset; --td-padding : 0.5rem 0.75rem; --th-border-color : unset; --th-border-width : unset; --th-color : var(--strong-color); --th-font-weight : var(--strong-font-weight); --th-padding : 0 0.75rem 0.5rem 0.75rem; --thead-border-color : var(--mono-300); --thead-border-width : 0 0 2px 0; --tr-alt-background : var(--mono-100); --tr-border-color : var(--mono-200); --tr-border-width : 0 0 1px 0; /* Syntax Highlighting */ /* NOTE: Typora uses CodeMirror for syntax highlight */ /* See https://codemirror.net for details and themes */ --code-activeline-background: var(--mono-200); --code-atom-color : var(--amber-600); --code-attribute-color : var(--sky-600); --code-background : var(--mono-100); --code-bracket-color : var(--mono-400); --code-builtin-color : var(--emerald-600); --code-comment-color : var(--mono-400); --code-cursor-border : 2px solid var(--color-primary); --code-def-color : var(--violet-600); --code-error-color : var(--red-600); --code-gutter-border-color : var(--mono-200); --code-keyword-color : var(--sky-600); --code-language-background : var(--code-activeline-background); --code-language-color : var(--code-text-color); --code-linenumber-color : var(--mono-400); --code-link-color : ; --code-meta-color : var(--rose-600); --code-number-color : ; --code-operator-color : var(--rose-600); --code-property-color : var(--sky-600); --code-qualifier-color : var(--emerald-600); --code-selected-background : var(--selection-background); --code-string-color : ; --code-string-2-color : ; --code-tag-color : var(--violet-600); --code-text-color : var(--mono-700); --code-type-color : var(--rose-600); --code-variable-color : var(--cyan-600); --code-variable-2-color : var(--cyan-600); --code-variable-3-color : var(--emerald-600); /* Mermaid*/ --mermaid-theme : neutral; /* base, dark, forest, neutral, night */ --mermaid-font-family : ; --mermaid-flowchart-curve : basis; /* basis, linear, natural, step */ --mermaid-sequence-numbers : off; /* off, on */ --mermaid--gantt-left-padding: 75; /* Sequence */ --sequence-theme: simple; /* hand, simple */ } /* ================================================================ */ /* Print */ /* ================================================================ */ @media print { :root { --background-color: #fff; } }