mingzailao
/
silverbullet
mirror of https://github.com/silverbulletmd/silverbullet.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
silverbullet/web/styles/theme.scss

234 lines
9.6 KiB
SCSS
Raw Normal View History

Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
html {
--ui-accent-color: #464cfc;
--highlight-color: rgba(255, 255, 0, 0.5);
--link-color: #0330cb;
--link-missing-color: #9e4705;
--meta-color: #650007;
--meta-subtle-color: #959595;
--subtle-color: #676767;
--subtle-background-color: rgba(72, 72, 72, 0.1);
Give docked Safari PWA the proper title bar color
2023-11-07 22:21:53 +08:00
--root-background-color: #fff;
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--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-header-label-color: var(--ui-accent-color);
--modal-help-background-color: #eee;
--modal-help-color: #555;
--modal-selected-option-background-color: var(--ui-accent-color);
--modal-selected-option-color: #eee;
--modal-hint-background-color: #212476;
--modal-hint-color: #eee;
Work on #587: revamped templates
2023-12-22 01:37:50 +08:00
--modal-description-color: #aaa;
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--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);
--action-button-background-color: transparent;
--action-button-color: #292929;
--action-button-hover-color: #0772be;
Work on client modes
2023-08-30 03:17:29 +08:00
--action-button-active-color: #0772be;
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--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;
New font and css fixes (#831)
2024-04-04 04:09:47 +08:00
--editor-completion-detail-color: #d2d2d2;
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--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);
Custom template parser (#672) New template engine 🤯
2024-02-03 02:19:07 +08:00
--editor-code-color: #7c828e;
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--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-color: #8f96c2;
--editor-named-anchor-color: var(--meta-subtle-color);
--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;
Custom template parser (#672) New template engine 🤯
2024-02-03 02:19:07 +08:00
--editor-code-string-color: #540293;
--editor-code-number-color: #01833c;
--editor-code-operator-color: #808080;
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--editor-code-info-color: var(--subtle-color);
Fixes #583 by making YAML keys slightly darker
2023-11-27 23:04:14 +08:00
--editor-code-atom-color: #5a0000;
Awesome frontmatter (#617) Live Frontmatter Templates
2024-01-05 03:08:12 +08:00
--editor-frontmatter-background-color: rgba(255, 246, 189, 0.3);
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--editor-frontmatter-color: var(--subtle-color);
--editor-frontmatter-marker-color: #89000080;
Fixes #529 by removing directives (#613) * Fixes #529 by removing directives * Load builtin tags on space reindex
2024-01-02 21:47:02 +08:00
--editor-widget-background-color: rgb(238, 238, 238);
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--editor-task-marker-color: var(--subtle-color);
Custom task statuses plus various fixes
2023-09-01 22:57:29 +08:00
--editor-task-state-color: var(--subtle-color);
Custom template parser (#672) New template engine 🤯
2024-02-03 02:19:07 +08:00
--editor-directive-mark-color: #6c0101;
--editor-directive-color: #696969;
--editor-directive-background-color: #ebebeb7d;
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--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";
New font and css fixes (#831)
2024-04-04 04:09:47 +08:00
--editor-font: "JetBrains Mono", "Menlo";
Added support for overriding CSS styles with STYLES page
2023-02-28 17:07:20 +08:00
--editor-width: 800px;
Work on #10 theming
2022-08-02 20:40:04 +08:00
}
feat: dark theme
2022-08-27 06:32:40 +08:00
html[data-theme="dark"] {
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--ui-accent-color: #464cfc;
--highlight-color: rgba(255, 255, 0, 0.5);
--link-color: #7e99fc;
--link-missing-color: #9e4705;
--meta-color: #d6222e;
--meta-subtle-color: #959595;
--subtle-color: #959595;
--subtle-background-color: rgba(105, 105, 105, 0.1);
--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: #fff;
--panel-border-color: #fff;
--bhs-background-color: #fff;
--bhs-border-color: rgb(193, 193, 193);
--modal-color: #ccc;
--modal-background-color: #262626;
--modal-border-color: #6c6c6c;
--modal-header-label-color: var(--ui-accent-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;
Work on #587: revamped templates
2023-12-22 01:37:50 +08:00
--modal-description-color: #aaa;
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--notifications-background-color: #333;
--notifications-border-color: rgb(197, 197, 197);
--notification-info-background-color: #1b76bb;
--notification-error-background-color: #a32121;
--action-button-background-color: transparent;
--action-button-color: #adadad;
--action-button-hover-color: #37a1ed;
Work on client modes
2023-08-30 03:17:29 +08:00
--action-button-active-color: #37a1ed;
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--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: #555;
--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-color: #8f96c2;
--editor-named-anchor-color: var(--meta-subtle-color);
--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;
Fixes #529 by removing directives (#613) * Fixes #529 by removing directives * Load builtin tags on space reindex
2024-01-02 21:47:02 +08:00
--editor-widget-background-color: rgba(72, 72, 72, 0.5);
Refactor SCSS to use CSS variables (#455) * refactor: start using css variables for theming * refactor: finish defining all currently used css vars * refactor: create dark mode with css vars * refactor: move color vars to own file * fix: switch order of style tags to priorize custom styles over main.css --------- Co-authored-by: TheLD <lars@adornis.de>
2023-07-10 14:44:37 +08:00
--editor-task-marker-color: var(--subtle-color);
GH-683: Fix template dark mode (#698)
2024-02-14 01:32:55 +08:00
--editor-task-state-color: var(--subtle-color);
--editor-directive-mark-color: #ba0303;
--editor-directive-color: #898989;
--editor-directive-background-color: #4c4c4c7d;
Custom admonitions (#786)
2024-03-05 01:35:02 +08:00
}
.sb-admonition[admonition="note"] {
--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"] {
--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;
Manual merge of #452
2023-07-10 19:16:22 +08:00
}