432 lines
16 KiB
SCSS
432 lines
16 KiB
SCSS
@use "tokens";
|
|
|
|
html {
|
|
--ui-accent-text-color: var(--ui-accent-color);
|
|
--highlight-color: rgba(255, 255, 0, 0.5);
|
|
--link-color: #0330cb;
|
|
--link-missing-color: #9e4705;
|
|
--link-invalid-color: #bb08e7;
|
|
--meta-color: #650007;
|
|
--meta-subtle-color: #959595;
|
|
--subtle-color: #676767;
|
|
--subtle-background-color: rgba(72, 72, 72, 0.1);
|
|
|
|
/* Shared panel-surface palette — chrome colors for plug panels (e.g.
|
|
Configuration Manager, Object Graph). Bundled into components.css, so
|
|
panels consume these instead of hardcoding their own light/dark values. */
|
|
--ui-surface-background-color: var(--root-background-color);
|
|
--ui-surface-color: var(--root-color);
|
|
--ui-surface-subtle-color: var(--subtle-color);
|
|
--ui-surface-border-color: #ddd;
|
|
--ui-surface-section-background-color: var(--subtle-background-color);
|
|
--ui-surface-hover-background-color: var(--subtle-background-color);
|
|
|
|
--root-background-color: #fff;
|
|
--root-color: inherit;
|
|
|
|
--top-color: inherit;
|
|
--top-background-color: #e1e1e1;
|
|
--top-border-color: #cacaca;
|
|
--top-sync-error-color: var(--top-color);
|
|
--top-sync-error-background-color: #fdf8cb;
|
|
--top-saved-color: #111;
|
|
--top-unsaved-color: #5e5e5e;
|
|
--top-loading-color: #7a7a7a;
|
|
|
|
--panel-background-color: #fff;
|
|
--panel-border-color: #fff;
|
|
|
|
--bhs-background-color: #fff;
|
|
--bhs-border-color: rgb(193, 193, 193);
|
|
|
|
--modal-color: inherit;
|
|
--modal-background-color: #fff;
|
|
--modal-border-color: rgb(108, 108, 108);
|
|
--modal-backdrop-color: rgba(0, 0, 0, 0.15);
|
|
--modal-header-label-color: var(--ui-accent-text-color);
|
|
--modal-help-background-color: #eee;
|
|
--modal-help-color: #555;
|
|
--modal-selected-option-background-color: var(--ui-accent-color);
|
|
--modal-selected-option-color: var(--ui-accent-contrast-color);
|
|
--modal-hint-background-color: #212476;
|
|
--modal-hint-color: #eee;
|
|
--modal-hint-inactive-background-color: #e1e1e1;
|
|
--modal-hint-inactive-color: #111;
|
|
--modal-description-color: #6b6b6b;
|
|
--modal-selected-option-description-color: #e6e6e6;
|
|
|
|
--notifications-background-color: inherit;
|
|
--notifications-border-color: rgb(41, 41, 41);
|
|
--notification-info-background-color: rgb(187, 221, 247);
|
|
--notification-error-background-color: rgb(255, 84, 84);
|
|
--notification-warning-background-color: rgb(255, 213, 79);
|
|
|
|
--button-background-color: #eee;
|
|
--button-hover-background-color: #e0e0e0;
|
|
--button-color: black;
|
|
--button-border-color: #6c6c6c;
|
|
--primary-button-background-color: var(--ui-accent-color);
|
|
--primary-button-hover-background-color: color-mix(
|
|
in srgb,
|
|
var(--ui-accent-color),
|
|
black 35%
|
|
);
|
|
--primary-button-color: var(--ui-accent-contrast-color);
|
|
--primary-button-border-color: transparent;
|
|
|
|
--text-field-background-color: var(--button-background-color);
|
|
|
|
--progress-background-color: #eee;
|
|
--progress-sync-color: black;
|
|
--progress-index-color: #0772be;
|
|
|
|
--action-button-background-color: transparent;
|
|
--action-button-color: #292929;
|
|
--action-button-hover-color: #0772be;
|
|
--action-button-active-color: #0772be;
|
|
|
|
--editor-caret-color: black;
|
|
--editor-selection-background-color: #d7e1f6;
|
|
--editor-panels-bottom-color: inherit;
|
|
--editor-panels-bottom-background-color: #e1e1e1;
|
|
--editor-panels-bottom-border-color: #cacaca;
|
|
--editor-completion-detail-color: #555;
|
|
--editor-completion-detail-selected-color: #d2d2d2;
|
|
--editor-list-bullet-color: rgb(150, 150, 150);
|
|
--editor-heading-color: #333;
|
|
--editor-heading-meta-color: var(--meta-subtle-color);
|
|
--editor-hashtag-background-color: #002b6aad;
|
|
--editor-hashtag-color: #e2e9ff;
|
|
--editor-hashtag-border-color: #0120416b;
|
|
--editor-ruler-color: rgb(76, 75, 75);
|
|
--editor-naked-url-color: var(--link-color);
|
|
--editor-code-color: #7c828e;
|
|
--editor-link-color: var(--link-color);
|
|
--editor-link-url-color: var(--link-color);
|
|
--editor-link-meta-color: var(--meta-subtle-color);
|
|
--editor-wiki-link-page-background-color: rgba(77, 141, 255, 0.07);
|
|
--editor-wiki-link-page-color: var(--link-color);
|
|
--editor-wiki-link-page-missing-color: var(--link-missing-color);
|
|
--editor-wiki-link-page-invalid-color: var(--link-invalid-color);
|
|
--editor-wiki-link-color: #8f96c2;
|
|
--editor-command-button-color: inherit;
|
|
--editor-command-button-background-color: #e3dfdf;
|
|
--editor-command-button-hover-background-color: inherit;
|
|
--editor-command-button-meta-color: var(--meta-subtle-color);
|
|
--editor-command-button-border-color: gray;
|
|
--editor-line-meta-color: var(--meta-subtle-color);
|
|
--editor-meta-color: var(--meta-color);
|
|
--editor-table-head-background-color: #333;
|
|
--editor-table-head-color: #eee;
|
|
--editor-table-even-background-color: #f3f3f3;
|
|
--editor-blockquote-background-color: var(--subtle-background-color);
|
|
--editor-blockquote-color: var(--subtle-color);
|
|
--editor-blockquote-border-color: rgb(74, 74, 74);
|
|
--editor-code-background-color: var(--subtle-background-color);
|
|
--editor-struct-color: darkred;
|
|
--editor-highlight-background-color: var(--highlight-color);
|
|
--editor-code-comment-color: var(--meta-subtle-color);
|
|
--editor-code-variable-color: #024866;
|
|
--editor-code-typename-color: #038138;
|
|
--editor-code-string-color: #540293;
|
|
--editor-code-number-color: #01833c;
|
|
--editor-code-operator-color: #808080;
|
|
--editor-code-info-color: var(--subtle-color);
|
|
--editor-code-atom-color: #5a0000;
|
|
--editor-frontmatter-background-color: rgba(255, 246, 189, 0.3);
|
|
--editor-frontmatter-color: var(--subtle-color);
|
|
--editor-frontmatter-marker-color: #89000080;
|
|
--editor-widget-background-color: rgb(238, 238, 238);
|
|
--editor-task-marker-color: var(--subtle-color);
|
|
--editor-task-state-color: var(--subtle-color);
|
|
|
|
--editor-directive-mark-color: #6c0101;
|
|
--editor-directive-color: #696969;
|
|
--editor-directive-background-color: #ebebeb7d;
|
|
|
|
--editor-panels-bottom-input-background-color: #fff;
|
|
--editor-panels-bottom-button-background-image: linear-gradient(
|
|
#eff1f5,
|
|
#d9d9df
|
|
);
|
|
--editor-panels-bottom-button-active-background-image: linear-gradient(
|
|
#b4b4b4,
|
|
#d0d3d6
|
|
);
|
|
|
|
--ui-font:
|
|
-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";
|
|
--editor-font: "iA-Mono", "Menlo";
|
|
--editor-width: 800px;
|
|
|
|
/* Shared component tokens */
|
|
--danger-color: #dc3545;
|
|
--danger-contrast-color: #fff;
|
|
--success-color: #16a34a;
|
|
--alert-error-background-color: #fef2f2;
|
|
--alert-error-color: #dc3545;
|
|
--alert-error-border-color: #fecaca;
|
|
--alert-warning-background-color: #fffbeb;
|
|
--alert-warning-color: #b45309;
|
|
--alert-warning-border-color: #fde68a;
|
|
--alert-info-background-color: #eaf4fd;
|
|
--alert-info-color: #0b4a7a;
|
|
--alert-info-border-color: #cfe6fb;
|
|
--badge-background-color: #e8e8ff;
|
|
--badge-color: #464cfc;
|
|
}
|
|
|
|
html[data-theme="light"] {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
|
|
--ui-accent-color: #464cfc;
|
|
--ui-accent-text-color: var(--ui-accent-color);
|
|
--ui-accent-text-color: color-mix(
|
|
in srgb,
|
|
var(--ui-accent-color),
|
|
white 50%
|
|
);
|
|
--highlight-color: rgba(255, 255, 0, 0.5);
|
|
--link-color: #7e99fc;
|
|
--link-missing-color: #9e4705;
|
|
--link-invalid-color: #d444f8;
|
|
--meta-color: #d6222e;
|
|
--meta-subtle-color: #959595;
|
|
--subtle-color: #959595;
|
|
--subtle-background-color: rgba(105, 105, 105, 0.1);
|
|
|
|
// Shared panel-surface palette (dark). Only the concrete border needs a
|
|
// dark value; the rest reference tokens that already flip with the theme.
|
|
--ui-surface-border-color: #444;
|
|
|
|
--root-background-color: #111;
|
|
--root-color: #fff;
|
|
|
|
--top-color: #fff;
|
|
--top-background-color: #262626;
|
|
--top-border-color: rgb(62, 62, 62);
|
|
--top-sync-error-color: var(--top-color);
|
|
--top-sync-error-background-color: #622626;
|
|
--top-saved-color: #fff;
|
|
--top-unsaved-color: #c7c7c7;
|
|
--top-loading-color: #c7c7c7;
|
|
|
|
--panel-background-color: #111;
|
|
--panel-border-color: rgb(62, 62, 62);
|
|
|
|
--bhs-background-color: #111;
|
|
--bhs-border-color: rgb(62, 62, 62);
|
|
|
|
--modal-color: #ccc;
|
|
--modal-background-color: #262626;
|
|
--modal-border-color: #6c6c6c;
|
|
--modal-backdrop-color: rgba(0, 0, 0, 0.45);
|
|
--modal-header-label-color: var(--ui-accent-text-color);
|
|
--modal-help-background-color: #333;
|
|
--modal-help-color: #ccc;
|
|
--modal-selected-option-background-color: var(--ui-accent-color);
|
|
--modal-selected-option-color: #eee;
|
|
--modal-hint-background-color: #212476;
|
|
--modal-hint-color: #eee;
|
|
--modal-hint-inactive-background-color: #353535;
|
|
--modal-hint-inactive-color: #ccc;
|
|
--modal-description-color: #969696;
|
|
--modal-selected-option-description-color: #e6e6e6;
|
|
|
|
--notifications-background-color: #333;
|
|
--notifications-border-color: rgb(197, 197, 197);
|
|
--notification-info-background-color: #1b76bb;
|
|
--notification-error-background-color: #a32121;
|
|
--notification-warning-background-color: #b8860b;
|
|
|
|
--button-background-color: #555;
|
|
--button-hover-background-color: #777;
|
|
--button-color: white;
|
|
--button-border-color: #666;
|
|
--primary-button-background-color: var(--ui-accent-color);
|
|
--primary-button-hover-background-color: color-mix(
|
|
in srgb,
|
|
var(--ui-accent-color),
|
|
black 35%
|
|
);
|
|
--primary-button-color: var(--ui-accent-contrast-color);
|
|
--primary-button-border-color: transparent;
|
|
|
|
--progress-background-color: #555;
|
|
--progress-sync-color: white;
|
|
--progress-index-color: yellow;
|
|
|
|
--text-field-background-color: var(--button-background-color);
|
|
|
|
--action-button-background-color: transparent;
|
|
--action-button-color: #adadad;
|
|
--action-button-hover-color: #37a1ed;
|
|
--action-button-active-color: #37a1ed;
|
|
|
|
--editor-caret-color: #fff;
|
|
--editor-selection-background-color: #d7e1f630;
|
|
--editor-panels-bottom-color: #fff;
|
|
--editor-panels-bottom-background-color: #262626;
|
|
--editor-panels-bottom-border-color: rgb(62, 62, 62);
|
|
--editor-completion-detail-color: #aaa;
|
|
--editor-completion-detail-selected-color: #d2d2d2;
|
|
--editor-list-bullet-color: rgb(150, 150, 150);
|
|
--editor-heading-color: #d1d1d1;
|
|
--editor-heading-meta-color: var(--meta-subtle-color);
|
|
--editor-hashtag-background-color: #004bbb;
|
|
--editor-hashtag-color: #e2e9ff;
|
|
--editor-hashtag-border-color: #007bff6b;
|
|
--editor-ruler-color: rgb(76, 75, 75);
|
|
--editor-naked-url-color: var(--link-color);
|
|
--editor-link-color: var(--link-color);
|
|
--editor-link-url-color: var(--link-color);
|
|
--editor-link-meta-color: var(--meta-subtle-color);
|
|
--editor-wiki-link-page-background-color: #a3bce712;
|
|
--editor-wiki-link-page-color: var(--link-color);
|
|
--editor-wiki-link-page-missing-color: var(--link-missing-color);
|
|
--editor-wiki-link-page-invalid-color: var(--link-invalid-color);
|
|
--editor-wiki-link-color: #8f96c2;
|
|
--editor-command-button-color: #fff;
|
|
--editor-command-button-background-color: #555;
|
|
--editor-command-button-hover-background-color: #777;
|
|
--editor-command-button-meta-color: var(--meta-subtle-color);
|
|
--editor-command-button-border-color: #666;
|
|
--editor-line-meta-color: var(--meta-subtle-color);
|
|
--editor-meta-color: var(--meta-color);
|
|
--editor-table-head-background-color: rgba(72, 72, 72, 0.4);
|
|
--editor-table-head-color: #eee;
|
|
--editor-table-even-background-color: rgba(72, 72, 72, 0.3);
|
|
--editor-blockquote-background-color: var(--subtle-background-color);
|
|
--editor-blockquote-color: var(--subtle-color);
|
|
--editor-blockquote-border-color: rgb(74, 74, 74);
|
|
--editor-code-background-color: var(--subtle-background-color);
|
|
--editor-struct-color: #d6222e;
|
|
--editor-highlight-background-color: var(--highlight-color);
|
|
--editor-code-comment-color: var(--meta-subtle-color);
|
|
--editor-code-variable-color: #41a3ce;
|
|
--editor-code-typename-color: #038138;
|
|
--editor-code-string-color: #986db9;
|
|
--editor-code-number-color: #986db9;
|
|
--editor-code-info-color: var(--subtle-color);
|
|
--editor-code-atom-color: #d6222e;
|
|
--editor-frontmatter-background-color: rgb(41, 40, 35, 0.5);
|
|
--editor-frontmatter-color: var(--subtle-color);
|
|
--editor-frontmatter-marker-color: #fff;
|
|
--editor-widget-background-color: rgba(72, 72, 72, 0.5);
|
|
--editor-task-marker-color: var(--subtle-color);
|
|
--editor-task-state-color: var(--subtle-color);
|
|
|
|
--editor-directive-mark-color: #ba0303;
|
|
--editor-directive-color: #898989;
|
|
--editor-directive-background-color: #4c4c4c7d;
|
|
|
|
--editor-panels-bottom-input-background-color: inherit;
|
|
--editor-panels-bottom-button-background-image: linear-gradient(
|
|
#393939,
|
|
#111
|
|
);
|
|
--editor-panels-bottom-button-active-background-image: linear-gradient(
|
|
#111,
|
|
#333
|
|
);
|
|
|
|
/* Shared component tokens */
|
|
--danger-color: #f87171;
|
|
--danger-contrast-color: #fff;
|
|
--success-color: #4ade80;
|
|
--alert-error-background-color: rgba(220, 53, 69, 0.1);
|
|
--alert-error-color: #f87171;
|
|
--alert-error-border-color: rgba(220, 53, 69, 0.3);
|
|
--alert-warning-background-color: rgba(180, 83, 9, 0.1);
|
|
--alert-warning-color: #fbbf24;
|
|
--alert-warning-border-color: rgba(180, 83, 9, 0.3);
|
|
--alert-info-background-color: #14324f;
|
|
--alert-info-color: #8fc4ef;
|
|
--alert-info-border-color: rgba(143, 196, 239, 0.3);
|
|
--badge-background-color: rgba(70, 76, 252, 0.2);
|
|
--badge-color: #8b8eff;
|
|
}
|
|
|
|
html[data-markdown-syntax-rendering="on"] {
|
|
--editor-meta-color: unset;
|
|
--editor-directive-mark-color: unset;
|
|
|
|
#sb-main
|
|
.cm-editor
|
|
.sb-lua-directive-block:not(
|
|
.sb-lua-top-widget
|
|
):not(
|
|
.sb-lua-bottom-widget
|
|
):not(
|
|
.sb-inline-content
|
|
) {
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
.sb-admonition[admonition="note" i] {
|
|
.sb-admonition-type {
|
|
&::before {
|
|
width: var(--admonition-width) !important;
|
|
}
|
|
|
|
* {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
--admonition-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>');
|
|
--admonition-color: #00b8d4;
|
|
}
|
|
|
|
.sb-admonition[admonition="warning" i] {
|
|
.sb-admonition-type {
|
|
&::before {
|
|
width: var(--admonition-width) !important;
|
|
}
|
|
|
|
* {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
--admonition-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
|
|
--admonition-color: #ff9100;
|
|
}
|
|
|
|
.sb-admonition[admonition="danger" i] {
|
|
.sb-admonition-type {
|
|
&::before {
|
|
width: var(--admonition-width) !important;
|
|
}
|
|
|
|
* {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
--admonition-icon: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>');
|
|
--admonition-color: #d50000;
|
|
}
|
|
|
|
.sb-admonition[admonition="success" i] {
|
|
.sb-admonition-type {
|
|
&::before {
|
|
width: var(--admonition-width) !important;
|
|
}
|
|
|
|
* {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
--admonition-icon: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
|
|
--admonition-color: #00c853;
|
|
}
|