diff options
| -rw-r--r-- | .gitignore | 2 | ||||
| -rw-r--r-- | AGENTS.md | 12 | ||||
| -rwxr-xr-x | bin/udt-appthemes | 88 | ||||
| -rwxr-xr-x | bin/udt-palette | 85 | ||||
| -rwxr-xr-x | install.sh | 5 | ||||
| -rw-r--r-- | templates/typora/udt.css.in | 1868 |
6 files changed, 2060 insertions, 0 deletions
@@ -12,3 +12,5 @@ __pycache__/ /bin/udt_colors.py /templates/kvantum/theme.kvconfig /templates/kvantum/theme.svg +/templates/obsidian/udt.css +/templates/typora/udt.css @@ -54,6 +54,18 @@ desktop was already running by hand. **Qt apps only read a theme at startup**, so a running one keeps the old colours until restarted. `install.sh` cannot signal them and does not try. +Obsidian and Typora are installed by `bin/udt-appthemes`, not by a copy. +Obsidian gets a **snippet**, not a theme, so it layers over whatever theme a +vault uses; enabling it means appending to `enabledCssSnippets` in that vault's +`appearance.json`, never rewriting the list, or the vault loses the snippets it +already had. Every vault under `~/Documents/Obsidian` is found by looking for +`.obsidian` directories, nested ones included. Typora's theme is derived from +its Dracula theme, whose 350 rules all route through `:root` variables, so only +that block is templated. + +Signal, Discord and Spotify cannot be consumers: they ship closed bundles with +no user-CSS hook, and patching a signed app bundle breaks on every update. + The homepage stylesheet is the one output that leaves this machine. `install.sh` scp's it to `homepage:hp-stage/`, with a five second timeout and a warning rather than a failure when the host is down, so installing the local diff --git a/bin/udt-appthemes b/bin/udt-appthemes new file mode 100755 index 0000000..eedc144 --- /dev/null +++ b/bin/udt-appthemes @@ -0,0 +1,88 @@ +#!/usr/bin/env python3 +# udt-appthemes: install the generated app themes that need more than a copy. +# Copyright (C) 2026 Danilo M. <danix@danix.xyz> +# Licensed under the GNU General Public License v2 only. +"""Install the Obsidian snippet into every vault, and the Typora theme. + +Separate from install.sh because enabling an Obsidian snippet means editing +JSON that the user also owns: appearance.json lists every enabled snippet, so +the entry has to be appended rather than the file rewritten, or a vault loses +whatever layout snippets it had. +""" + +import json +import shutil +import sys +from pathlib import Path + +REPO = Path(__file__).resolve().parent.parent +SNIPPET = "udt" +VAULT_ROOT = Path.home() / "Documents" / "Obsidian" +TYPORA_THEMES = Path.home() / ".config" / "Typora" / "themes" + + +def vaults(): + """Every Obsidian vault under the vault root. + + A vault is any directory holding a .obsidian config dir. Nested vaults are + real: a vault inside another vault's folder is still its own vault. + """ + if not VAULT_ROOT.is_dir(): + return [] + return sorted(p for p in VAULT_ROOT.rglob(".obsidian") if p.is_dir()) + + +def install_obsidian(source): + """Copy the snippet into each vault and enable it, preserving the rest.""" + done = [] + for config in vaults(): + snippets = config / "snippets" + snippets.mkdir(exist_ok=True) + shutil.copyfile(source, snippets / f"{SNIPPET}.css") + + appearance = config / "appearance.json" + try: + data = json.loads(appearance.read_text()) + except (OSError, json.JSONDecodeError): + data = {} + + enabled = data.get("enabledCssSnippets", []) + if SNIPPET not in enabled: + # Append: a vault may already have snippets on, and replacing the + # list would silently switch them off. + enabled.append(SNIPPET) + data["enabledCssSnippets"] = enabled + appearance.write_text(json.dumps(data, indent=2) + "\n") + + done.append(config.parent.name or str(config.parent)) + return done + + +def install_typora(source): + """Drop the theme in. Typora picks it from Themes once the file exists.""" + if not TYPORA_THEMES.is_dir(): + return False + shutil.copyfile(source, TYPORA_THEMES / "udt.css") + return True + + +def main(): + obsidian = REPO / "templates" / "obsidian" / "udt.css" + typora = REPO / "templates" / "typora" / "udt.css" + + if not obsidian.exists() or not typora.exists(): + print("udt-appthemes: run udt-palette first", file=sys.stderr) + return 1 + + names = install_obsidian(obsidian) + if names: + print(f"obsidian: {len(names)} vaults ({', '.join(names)})") + + if install_typora(typora): + print("typora: udt.css installed (select it in Themes)") + + return 0 + + +if __name__ == "__main__": + sys.exit(main()) diff --git a/bin/udt-palette b/bin/udt-palette index edde7f3..f2807af 100755 --- a/bin/udt-palette +++ b/bin/udt-palette @@ -223,6 +223,89 @@ def gen_kitty(res, scheme, palette): return "\n".join(lines) + "\n" +def gen_obsidian(res, scheme, palette): + """Obsidian: a CSS snippet overriding the theme variables. + + A snippet rather than a theme, because a theme replaces the user's choice + outright while a snippet layers over whatever they have enabled. Obsidian + loads snippets after the theme, so these win without the theme having to go. + + The variables are Obsidian's documented public API for this. Only colour is + set: spacing and typography belong to whatever theme the vault uses. + """ + def c(role): + return hex6(res[role]) + + return f"""/* {BANNER.format(scheme=scheme)} + * + * Enabled per vault in Appearance > CSS snippets. install.sh writes this into + * every vault it finds and enables it without disturbing the snippets already + * on, so a vault keeps its layout snippets and gains these colours. + */ + +.theme-dark {{ + --background-primary: {c('bg')}; + --background-primary-alt: {c('bg_alt')}; + --background-secondary: {c('bg_alt')}; + --background-secondary-alt: {c('bg_deep')}; + --background-modifier-border: {c('border')}; + --background-modifier-hover: {c('surface')}; + --background-modifier-error: {c('critical')}; + --background-modifier-success:{c('success')}; + + --text-normal: {c('fg')}; + --text-muted: {c('fg_dim')}; + --text-faint: {c('fg_faint')}; + --text-error: {c('critical')}; + --text-success: {c('success')}; + --text-accent: {c('accent')}; + --text-accent-hover:{c('accent_bright')}; + --text-on-accent: {c('bg')}; + --text-selection: {hex8((*res['accent'][:3], 30))}; + --text-highlight-bg:{hex8((*res['warning'][:3], 40))}; + + --interactive-normal: {c('surface')}; + --interactive-hover: {c('surface_alt')}; + --interactive-accent: {c('accent')}; + --interactive-accent-hover: {c('accent_bright')}; + + --h1-color: {c('accent')}; + --h2-color: {c('accent')}; + --h3-color: {c('info')}; + --h4-color: {c('info')}; + --h5-color: {c('fg_dim')}; + --h6-color: {c('fg_dim')}; + + --code-normal: {c('warning')}; + --code-background: {c('bg_alt')}; + --blockquote-border-color: {c('accent')}; + --hr-color: {c('border')}; + --checkbox-color: {c('accent')}; + --tag-color: {c('info')}; + --tag-background: {hex8((*res['info'][:3], 20))}; +}} +""" + + +def gen_typora(res, scheme, palette, template): + """Typora: substitute the palette into the theme's :root block. + + Typora themes are one self-contained stylesheet, but this one routes all + 350 of its rules through variables in :root, so only that block is a + template. Derived from the dracula theme already installed here. + """ + out = template + for role in TYPORA_ROLES: + out = out.replace(f"@{role.upper()}@", hex6(res[role])) + return out + + +# Exactly the placeholders templates/typora/udt.css.in carries. +TYPORA_ROLES = ["bg", "bg_deep", "surface_alt", "fg", "fg_dim", "fg_faint", + "accent", "accent_bright", "critical", "warning", "success", + "info", "highlight"] + + KVANTUM_ROLES = ["bg", "bg_alt", "surface", "surface_alt", "surface_high", "fg", "fg_dim", "fg_faint", "mid_high", "accent", "accent_dim", "accent_bright", "highlight", "critical"] @@ -436,6 +519,8 @@ TARGETS = [ ("templates/conky.conf", gen_conky, "templates/conky.conf.in"), ("bin/udt_colors.py", gen_accent_py, None), ("templates/homepage/custom.css", gen_homepage, None), + ("templates/obsidian/udt.css", gen_obsidian, None), + ("templates/typora/udt.css", gen_typora, "templates/typora/udt.css.in"), ("templates/kvantum/theme.kvconfig", gen_kvantum, "templates/kvantum/theme.kvconfig.in"), ("templates/kvantum/theme.svg", gen_kvantum, "templates/kvantum/theme.svg.in"), ] @@ -70,6 +70,11 @@ install -Dm644 "$repo/templates/kvantum/theme.kvconfig" "$kv/udt.kvconfig" install -Dm644 "$repo/templates/kvantum/theme.svg" "$kv/udt.svg" printf '[General]\ntheme=udt\n' > "$HOME/.config/Kvantum/kvantum.kvconfig" +# Obsidian and Typora need more than a copy: the Obsidian snippet has to be +# enabled in each vault's appearance.json without disturbing the snippets +# already listed there. Skipped silently when neither app is installed. +"$repo/bin/udt-appthemes" || true + # Stage the homepage stylesheet on the dashboard host. Staged, not installed: # /opt/homepage/config is root-owned and this script does not hold root there. # Never fatal, and never slow: a laptop away from that network must still be diff --git a/templates/typora/udt.css.in b/templates/typora/udt.css.in new file mode 100644 index 0000000..0744d77 --- /dev/null +++ b/templates/typora/udt.css.in @@ -0,0 +1,1868 @@ +/* Generated from templates/typora/udt.css.in by udt-palette. + * Derived from the Dracula theme for Typora; the :root scheme colours + * are placeholders and the 350 rules below them are untouched. */ +:root { + /*dracula official spec colors */ + --dracula-background: @BG@; + --dracula-current-line: @SURFACE_ALT@; + --dracula-foreground: @FG@; + --dracula-comment: @FG_FAINT@; + --dracula-cyan: @INFO@; + --dracula-green: @SUCCESS@; + --dracula-orange: @WARNING@; + --dracula-pink: @HIGHLIGHT@; + --dracula-purple: @ACCENT@; + --dracula-red: @CRITICAL@; + --dracula-yellow: @ACCENT_BRIGHT@; + + /* dracula custom colors for typora */ + --dracula-foreground-fade: @FG_DIM@; + --dracula-background-dark: @BG_DEEP@; + + /* dark color for background*/ + /* default color */ + --bg-color1: var(--dracula-background); + /* for most panel, context, header, etc */ + --bg-color2: var(--dracula-background-dark); + /* for toc and table edit panel */ + --bg-color3: var(--dracula-background-dark); + /* for tips */ + --bg-color4: var(--dracula-current-line); + + /* for blockquote, codeblock, input, etc */ + --bg-color5: var(--dracula-background-dark); + /* light color for text and icon*/ + /* default color */ + --text-color1: var(--dracula-foreground); + /* for text on panel */ + --text-color2: var(--dracula-foreground); + /* for checkbox and radio */ + --text-color3: var(--dracula-current-line); + + /* for tips */ + --text-color4: var(--dracula-foreground); + /* for focus mode */ + --text-color5: var(--dracula-foreground-fade); + /* link color */ + --link-color: var(--dracula-cyan); + /* table color */ + --table-border-color: var(--dracula-foreground); + --table-thead-color: var(--dracula-current-line); + --table-bg-color: var(--dracula-background); + --table-bg-darker-color: var(--dracula-background-dark); + /* hover color */ + /* default hover background color */ + --hover-bg-color1: var(--dracula-current-line); + /* for input item */ + --hover-bg-color2: var(--dracula-current-line); + /* for button on toc and table edit panel */ + --hover-bg-color3: var(--dracula-current-line); + /* default hover text color */ + --hover-text-color: var(--dracula-pink); + /* active color */ + --active-color: var(--hover-bg-color1); + /* input color */ + --input-color: var(--dracula-current-line); + /* menu divider color */ + --menu-divider-color: var(--dracula-foreground); + /* scrollbar color */ + --scrollbar-thumb-color: var(--menu-divider-color); + --scrollbar-track-color: var(--dracula-background); + /* theme select color */ + --theme-select-color: var(--dracula-current-line); + --button-color: var(--dracula-comment); + --select-color: var(--dracula-background); + /* focus color */ + --focus-color: var(--dracula-cyan); + --focus-ring-color: var(--focus-color); + /* codeblock color */ + --code-red-color: var(--dracula-pink); + --code-yellow-color: var(--dracula-yellow); + --code-cyan-color: var(--dracula-cyan); + --code-blue-color: var(--dracula-cyan); + --code-purple-color: var(--dracula-purple); + --code-orange-color: var(--dracula-yellow); + --code-green-color: var(--dracula-green); + --code-grey-color: var(--dracula-comment); + + --code-select-bg-color: var(--dracula-comment); + --code-cursor-color: var(--dracula-current-line); + /* implicit selection text bg color */ + --select-text-bg-color: var(--dracula-comment); + /* implicit button color */ + --primary-color: var(--button-color); + --primary-btn-border-color: transparent; + --primary-btn-text-color: var(--text-color2); + /* implicit sidebar color */ + --side-bar-bg-color: var(--bg-color1); + --control-text-color: var(--text-color2); + /* implicit text color */ + --text-color: var(--text-color1); + /* implicit background color for setting menu */ + --bg-color: var(--bg-color1); + /* implicit hover color */ + --item-hover-bg-color: var(--hover-bg-color1); + --item-hover-text-color: var(--hover-text-color); + /* implicit active color */ + --active-file-bg-color: var(--hover-bg-color); + /* implicit mathjax edit panel background color */ + --rawblock-edit-panel-bd: var(--bg-color5); + /* implicit focus mode color */ + --blur-text-color: var(--text-color5); + /* implicit search result select color */ + --search-select-bg-color: var(--select-text-bg-color); + --search-select-bg-color: var(--dracula-comment); + + --control-text-hover-color: var(--dracula-current-line); + /* implicit active file color in sidebar file menu tree view */ + --active-file-text-color: var(--text-color1); + --active-file-border-color: var(--dracula-pink); + + --node-border: var(--menu-divider-color); + --node-fill: var(--bg-color2); + + --monospace: Menlo, Monaco, 'Courier New', monospace; +} + +/* font */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: normal; + src: local("Open Sans Regular"), url("./dracula/400.woff") format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: italic; + font-weight: normal; + src: local("Open Sans Italic"), url("./dracula/400i.woff") format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: bold; + src: local("Open Sans Bold"), url("./dracula/700.woff") format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: italic; + font-weight: bold; + src: local("Open Sans Bold Italic"), url("./dracula/700i.woff") format("woff"); +} + +/* basic style */ +html { + font-size: 16px; +} + +body { + font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, + sans-serif; + color: var(--text-color1); + background: var(--bg-color1); + line-height: 1.6; +} + +a { + color: var(--dracula-cyan); +} + +a:hover { + color: var(--dracula-pink); +} + +/* text selection background color */ +.in-text-selection { + background-color: var(--dracula-current-line); +} + +/* link */ +#write a:not([role="menuitem"]) { + color: var(--link-color) !important; +} + +#write a:not([role="menuitem"]):hover { + color: var(--hover-text-color) !important; +} + +/* h1-h6 */ +#write h1, +#write h2, +#write h3, +#write h4, +#write h5, +#write h6 { + margin-top: 0.5em; + margin-bottom: 0em; + line-height: 1em; + padding-top: 0.3em; +} + +#write h1 { + font-size: 2em; + padding-bottom: 0.3em; + border-bottom: 1px solid var(--text-color3); + +} + +#write h2 { + font-size: 1.5em; + padding-bottom: 0.3em; + border-bottom: 1px solid var(--text-color3); +} + +#write h3 { + font-size: 1.25em; +} + +#write h4 { + font-size: 1em; +} + +#write h5 { + font-size: .875em; +} + +#write h6 { + font-size: .85em; +} + +/* horizontal divider */ +hr { + height: 1px; + background-color: var(--text-color5); + border: 0px; +} + +/* list */ +ul, +ol { + padding-left: 30px; +} + +/* blockquote */ +blockquote { + border-left: 4px solid var(--text-color1); + padding: 4px 15px; + color: var(--text-color1); + background-color: var(--bg-color5); +} + +blockquote blockquote { + padding-right: 0em; +} + +table thead tr { + background-color: var(--table-thead-color); +} + +table tr th { + font-weight: bold; + border-left: 1px solid var(--table-border-color); + border-right: 1px solid var(--table-border-color); + text-align: left; + margin: 0; + padding: 6px 13px; +} + +table tbody tr { + border-top: 1px solid var(--table-border-color); + margin: 0; + padding: 0; +} + +table tbody tr:nth-child(2n) { + background-color: var(--table-bg-darker-color); +} + +table tbody tr:nth-child(2n + 1) { + background-color: var(--table-bg-color); +} + +table tr td { + border-left: 1px solid var(--table-border-color); + border-right: 1px solid var(--table-border-color); + text-align: left; + margin: 0; + padding: 6px 13px; +} + +table tr th:first-child, +table tr td:first-child { + border-left-width: 0px; +} + +table tr th:last-child, +table tr td:last-child { + border-right-width: 0px; +} + +/* table edit panel */ +.ty-table-edit { + background-color: var(--bg-color3); + border: 0px; + border-radius: 6px; + padding-top: 2px; + padding-bottom: 2px; + padding-left: 6px; + padding-right: 6px; + margin-top: -29px !important; +} + +/* button on table edit panel */ +.ty-table-edit button { + background-color: transparent; + color: var(--text-color2); + border: 0px; + margin-left: 0px !important; +} + +/* button hover on table edit panel */ +.ty-table-edit button:hover { + background-color: var(--hover-bg-color3); + color: var(--hover-text-color); +} + +/* adjusting table panel */ +.popover { + background-color: var(--bg-color2); +} + +/* arrow of adjusting table panel */ +.popover.bottom>.arrow:after { + border-bottom-color: var(--bg-color2); +} + +/* divider in adjust table panel */ +.md-grid-board-wrap .popover-title { + border-top-color: var(--menu-divider-color); +} + +/* grid size */ +.md-grid-board a { + width: 15px; + height: 15px; +} + +/* existing thread grid */ +.md-grid-board tr[row="1"] .md-grid-ext { + background-color: var(--dracula-current-line); +} + +/* not existing thread grid */ +.md-grid-board tr[row="1"] { + background-color: var(--dracula-current-line); +} + +/* existing grid */ +.md-grid-board .md-grid-ext { + background-color: var(--dracula-current-line); +} + +/* selected thread grid */ +.md-grid-board tr[row="1"] a.md-active, +.md-grid-board tr[row="1"] a:hover { + background-color: var(--dracula-current-line); +} + +/* selected grid */ +.md-grid-board a.md-active, +.md-grid-board a:hover { + border-color: var(--menu-divider-color); + background-color: var(--dracula-current-line); +} + +/* task */ +.md-task-list-item>input { + margin-left: -1.3em; +} + +/* footnote */ +sup.md-footnote { + color: var(--text-color1); + background-color: var(--bg-color2); +} + +/* mathjax */ +.md-inline-math script { + color: var(--text-color1); +} + +.on-focus-mode #write svg { + opacity: 1; +} + +.md-rawblock>.md-rawblock-container { + transition: 0.5s; +} + +.md-rawblock>.md-rawblock-tooltip { + transition: 0.5s; + display: block; + visibility: hidden; + opacity: 0; +} + +.md-rawblock:hover>.md-rawblock-tooltip { + transition: 0.5s; + visibility: visible; + opacity: 1; + animation: none; +} + +/* meta information of image */ +.md-image>.md-meta { + border: 0px; + padding: 2px 0px 0px 4px; + font-size: 0.9em; + color: var(--text-color1); +} + +/* input */ +input { + background-color: var(--input-color) !important; + border: 0px !important; +} + +/* checkbox */ +input[type="checkbox"]:before { + content: ""; + display: inline-block; + width: 1.2rem; + height: 1.2rem; + vertical-align: middle; + text-align: center; + border: 0px; + border-radius: 3px; + background-color: var(--input-color); + margin-top: -0.5rem; + margin-left: -0.2rem; +} + +/* checkbox hover */ +input[type="checkbox"]:not([disabled]):not(:checked):hover:before { + content: "\2713"; + font-size: 0.9rem; + line-height: 1.2rem; + color: var(--text-color3); +} + +/* checkbox checked*/ +input[type="checkbox"]:checked:before { + content: "\2713"; + font-size: 0.9rem; + line-height: 1.2rem; + color: var(--text-color2); +} + +/* checkbox checked hover*/ +input[type="checkbox"]:checked:hover:before { + content: "\2713"; + font-size: 0.9rem; + line-height: 1.2rem; + color: var(--hover-text-color); +} + +/* radio */ +input[type="radio"]:before { + content: ""; + display: inline-block; + width: 1.2rem; + height: 1.2rem; + vertical-align: middle; + text-align: center; + border: 0px; + border-radius: 0.55rem; + background-color: var(--input-color); + margin-top: -0.4rem; + margin-left: -0.1rem; +} + +/* radio hover */ +input[type="radio"]:not([disabled]):not(:checked):hover:before { + content: "\25CF"; + font-size: 1rem; + line-height: 1rem; + color: var(--text-color3); +} + +/* radio checked */ +input[type="radio"]:checked:before { + content: "\25CF"; + font-size: 1rem; + line-height: 1rem; + color: var(--text-color2); +} + +/* radio checked hover*/ +input[type="radio"]:checked:before { + content: "\25CF"; + font-size: 1rem; + line-height: 1rem; + color: var(--hover-text-color); +} + +/* default focus style */ +:focus { + outline-color: var(--focus-color); +} + +/* exit source view button */ +.typora-sourceview-on #toggle-sourceview-btn { + background-color: var(--bg-color2); +} + +.typora-sourceview-on #toggle-sourceview-btn:hover { + background-color: var(--hover-bg-color1); +} + +/* toc */ +.md-toc { + background-color: var(--bg-color3); + border-radius: 6px; + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; + border: 0px; +} + +/* toc content */ +.md-toc-content { + padding-top: 5px; + padding-bottom: 8px; + margin-top: 15px; + margin-bottom: 0px; +} + +/* remove outline when toc is selected */ +.md-toc:focus .md-toc-content { + border: 0px; + margin: 0px; +} + +/* toc item */ +.md-toc-item { + margin: 2px; +} + +/* toc edit panel */ +#write div.md-toc-tooltip { + border: 0px; + padding-left: 10px; + padding-right: 10px; + background-color: var(--bg-color3); + border-top-left-radius: 6px; + border-top-right-radius: 6px; + opacity: 0; + visibility: hidden; + display: block !important; + transition: 0.3s; +} + +#write .md-toc:focus div.md-toc-tooltip { + visibility: visible; + opacity: 1; +} + +#write .md-toc:focus { + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} + +/* toc delete button */ +.md-delete-toc { + background-color: transparent; +} + +/* html block */ +.md-htmlblock:hover .md-htmlblock-container { + border-radius: 6px; + border-top-right-radius: 0px; +} + +/* search panel */ +#md-searchpanel { + background-color: var(--bg-color2); + color: var(--text-color2); +} + +/* ignore case button and find whole word button */ +.searchpanel-search-option-btn { + border: 0px; +} + +/* button on search panel */ +#md-searchpanel .btn:hover { + color: var(--hover-text-color); + background-color: var(--hover-bg-color1) !important; +} + +/* search option button hover */ +.searchpanel-search-option-btn:not(.active):hover { + color: var(--hover-text-color); + background-color: var(--hover-bg-color1); +} + +/* close button in search panel */ +#md-searchpanel .input-group-addon.close-btn { + padding-left: 16px; + padding-right: 16px; +} + +/* replaceall button */ +.ty-replace-panel-row #search-panel-replaceall-btn { + padding-left: 8px; + padding-right: 6px !important; +} + +/* replace button */ +.ty-replace-panel-row #search-panel-replace-btn { + padding-left: 16px; + padding-right: 16px; +} + +/* sidebar */ +.sidebar-menu { + color: var(--text-color2); +} + +/* divider between file item and search */ +.ty-sidebar-search-panel { + border-color: var(--menu-divider-color); +} + +/* file item in sidebar */ +#file-library .file-list-item { + border-bottom: 0px; + opacity: 1; + border-left: 4px solid; + border-color: var(--bg-color2); +} + +/* file item hover */ +#file-library .file-list-item:hover { + background-color: var(--hover-bg-color1); + color: var(--text-color1); + border-color: var(--hover-bg-color1); +} + +/* file item active */ +#file-library .file-list-item.active { + background-color: var(--hover-bg-color1); + color: var(--text-color1); + border-color: var(--dracula-pink); +} + +/* suffix of file item*/ +.file-list-item-file-ext-part { + opacity: 0.8; +} + +/* sidebar file menu */ +#sidebar-files-menu { + border: 0px; +} + +/* sidebar file menu item */ +.dropdown-menu>li>a { + color: var(--text-color2); +} + +.dropdown-menu>li>a:hover { + color: var(--hover-text-color); +} + +/* sidebar file menu close button */ +#close-sidebar-menu-btn:hover { + color: var(--hover-text-color); +} + +/* sidebar file menu divider */ +#sidebar-files-menu>.show+.menuitem-group-label.show { + border-color: var(--menu-divider-color); +} + +/* sidebar osx tab */ +.html-for-mac .sidebar-osx-tab>.sidebar-tabs { + border: 0px; +} + +/* sidebar footer */ +.sidebar-footer { + border: 0px; +} + +/* remove outline when file item in treeview is selected*/ +.file-library-node:not(.file-node-root):focus>.file-node-content { + outline: none; +} + +/* sort button on sidebar file menu */ +.ty-side-sort-btn.active, +.ty-side-sort-btn:hover { + color: var(--hover-text-color); +} + +/* sidebar in setting */ +.sidebar { + background-color: var(--bg-color2) !important; +} + +.list-group-content { + margin-left: 10px !important; +} + +/* sidebar button in setting menu */ +.nav-group-item { + color: var(--text-color2) !important; + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; +} + +/* sidebar button hover in setting menu */ +.nav-group-item:hover, +.nav-group-item:active, +.nav-group-item.active { + background-color: var(--hover-bg-color1) !important; + color: var(--hover-text-color) !important; +} + +/* remove up and down button from number type input*/ +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none !important; +} + +/* the indent example in setting.editor */ +div[data-index="2"] .label-input-group td:last-child div { + border: 0px !important; + border-radius: 6px; + background-color: var(--bg-color5); + margin: 10px !important; +} + +/* button in setting menu */ +.ty-preferences button.btn-default { + border: 0px; + background-color: var(--bg-color5); + border-radius: 6px; +} + +/* button hover in setting menu */ +.ty-preferences .btn-default:not([disabled]):hover { + background-color: var(--hover-bg-color1) !important; +} + +/* return button in setting menu */ +.window-header button:hover { + color: var(--text-color2) !important; +} + +/* search input in setting menu */ +.search-input { + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + margin-top: 10px !important; + margin-bottom: 10px !important; + margin-left: 10px !important; +} + +.search-input:focus { + border: none !important; +} + +/* select item (mostly in setting menu) */ +select { + border: 0px; + border-radius: 6px; + background-color: var(--input-color) !important; + padding-top: 5px !important; + padding-bottom: 5px !important; +} + +/* enabled select item hover */ +select:not([disabled]):hover { + color: var(--text-color2); + opacity: 1; +} + +/* disabled select item hover */ +select[disabled]:hover { + opacity: 0.5; +} + +/* mega menu */ +.megamenu-content, +.megamenu-opened header { + background: var(--bg-color1); +} + +.megamenu-content { + display: block; + visibility: hidden; + opacity: 0; + transition: 0.3s; +} + +.megamenu-opened .megamenu-content { + visibility: visible; + opacity: 1; + animation: none; +} + +/* mega menu sidebar*/ +.megamenu-menu { + background-color: var(--bg-color2); +} + +/* return button in mega menu */ +#megamenu-menu-sidebar .menu-style-btn { + border: 0px; +} + +.megamenu-menu-panel table td:nth-child(1) { + color: var(--dracula-foreground); +} + +.megamenu-menu-panel tbody tr:hover td:nth-child(1) { + color: var(--dracula-foreground-fade) +} + +/* remove divider in mega menu */ +.megamenu-menu-header { + border-color: var(--menu-divider-color); +} + +/* return button color in mega menu */ +.megamenu-menu-header #megamenu-menu-header-title { + color: var(--text-color2); +} + +/* return button hover in mega menu */ +.megamenu-menu-header:hover { + background-color: var(--hover-bg-color1); +} + +/* return button hover in mega menu */ +.megamenu-menu-header:hover #megamenu-menu-header-title { + color: var(--hover-text-color); +} + +/* long button in mega menu */ +.long-btn { + border: 0px; + background-color: var(--bg-color5); + color: var(--text-color1); + margin-bottom: 10px; + margin-left: 10px; +} + +/* recent file in mega menu */ +#recent-file-panel { + padding: 10px; +} + +#recent-file-panel-action-btn { + background: var(--bg-color5); + border: 0px; +} + +#recent-file-panel thead tr { + background-color: var(--table-thead-color); +} + +#recent-file-panel tbody tr:nth-child(2n) { + background-color: var(--table-bg-darker-color); +} + +#recent-file-panel tbody tr:nth-child(2n + 1) { + background-color: var(--table-bg-color); +} + +#recent-file-panel-action-btn:hover { + background-color: var(--hover-bg-color1); + color: var(--text-color2); +} + +/* theme preview hover */ +.theme-preview-div:hover { + border-color: var(--theme-select-color); +} + +/* context menu and spell check panel */ +.dropdown-menu:not(.megamenu-menu-list) { + background-color: var(--bg-color2); + color: var(--text-color2); +} + +/* divider in context menu and spell check panel */ +.dropdown-menu .divider { + border-color: var(--menu-divider-color); +} + +/* remove divider outline */ +.dropdown-menu { + border: 0px; +} + +/* footer */ +footer.ty-footer { + border-top: 0px !important; + background-color: var(--bg-color2) !important; +} + +/* footer item */ +.footer-item, +#outline-btn, +#footer-word-count { + color: var(--text-color2); + opacity: 1; +} + +/* footer item hover */ +.footer-item:hover, +#outline-btn:hover { + background-color: var(--hover-bg-color1); + color: var(--hover-text-color); +} + +/* button on some panel */ +.btn { + border: 0px; + outline-width: 0px !important; +} + +.btn:hover { + background-color: var(--hover-bg-color1); + color: var(--hover-text-color); +} + +/* traffic button hover */ +#top-titlebar .toolbar-icon.btn:hover { + color: var(--text-color2); + background-color: var(--hover-bg-color1); +} + +/* traffic button hover */ +#top-titlebar #w-close:hover { + background-color: #e81123 !important; +} + +/* adjust maxmize restore button height */ +.typora-maxmized #w-restore { + height: 24px; +} + +/* left upper button hover */ +.ty-menu-btn-area:hover .ty-menu-btn-area-sub { + color: var(--text-color2) !important; +} + +/* scrollbar */ +::-webkit-scrollbar { + width: 8px; + padding-right: 10px; + background-color: var(--scrollbar-track-color); +} + +/* scrollbar track */ +::-webkit-scrollbar-track:hover { + background-color: var(--scrollbar-track-color) !important; + border-radius: 4px; +} + +/* scrollbar thumb */ +::-webkit-scrollbar-thumb, +::-webkit-scrollbar-thumb:active { + background-color: var(--scrollbar-thumb-color) !important; + border-radius: 4px; +} + +/* tip when hover on a button */ +#ty-tooltip { + background-color: var(--bg-color4); + color: var(--text-color4); +} + +/* item container hover in context menu */ +.menu-item-container:hover { + background-color: var(--bg-color2); +} + +/* item in context menu */ +.menu-item-container .menu-style-btn { + border-color: var(--menu-divider-color); +} + +/* mathjax edit panel*/ +.md-rawblock-before { + border-top-left-radius: 6px; +} + +.md-rawblock-after { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} + +/* mathjax focus */ +.MathJax_SVG:focus { + outline: none; + background-color: transparent; +} + +/* notification panel */ +#md-notification { + background-color: var(--dracula-red) !important; + color: var(--text-color2); +} + +#ty-surpress-mode-warning-close-btn { + float: unset !important; + margin: 0px !important; +} + +.unibody-window #md-notification p { + bottom: -4px !important; +} + +/* inline codeblock */ +code { + font-size: 0.9em; + background-color: var(--bg-color5); + border-radius: 6px; + padding: 4px 4px 4px 4px; + margin: 0px 0px 0px 0px; +} + +/* codeblock */ +.md-fences, +.md-fences:active { + background-color: var(--bg-color5); + border-radius: 6px; + padding: 8px 4px 8px 4px !important; + margin-top: 15px; + margin-bottom: 15px; +} + +.md-fences .code-tooltip { + display: block !important; + visibility: hidden; + opacity: 0; + transition: 0.3s; + background-color: var(--bg-color3); +} + +.md-fences.md-focus .code-tooltip { + opacity: 1; + visibility: visible; +} + +.CodeMirror-lines { + padding-left: 4px; +} + +/* selected text and cursor */ +.CodeMirror-selected, +.CodeMirror-selectedtext { + background: var(--code-select-bg-color) !important; +} + +.CodeMirror div.CodeMirror-cursor { + border-left: 2px solid var(--code-cursor-color); + z-index: 3; +} + +.CodeMirror.cm-s-typora-default div.CodeMirror-cursor { + border-left: 3px solid var(--code-cursor-color); +} + +/* highlight */ +.cm-s-inner .cm-property { + color: var(--code-blue-color) !important; +} + +.cm-s-inner .cm-operator { + color: var(--code-cyan-color) !important; +} + +.cm-s-inner .cm-keyword { + color: var(--code-purple-color) !important; +} + +.cm-s-inner .cm-tag { + color: var(--code-red-color) !important; +} + +.cm-s-inner .cm-attribute { + color: var(--code-orange-color) !important; +} + +.cm-s-inner .cm-string { + color: var(--code-green-color) !important; +} + +.cm-s-inner .cm-comment, +.cm-s-inner.cm-comment { + color: var(--code-grey-color) !important; + font-style: italic; +} + +.cm-s-inner .cm-header, +.cm-s-inner .cm-def, +.cm-s-inner.cm-header, +.cm-s-inner.cm-def { + color: var(--code-blue-color) !important; +} + +.cm-s-inner .cm-meta, +.cm-s-inner .cm-qualifier { + color: var(--code-red-color) !important; +} + +.cm-s-inner .cm-builtin { + color: var(--code-cyan-color) !important; +} + +.cm-s-inner .cm-bracket { + color: var(--text-color1) !important; +} + +.cm-s-inner .cm-number { + color: var(--code-orange-color) !important; +} + +.cm-s-inner .cm-variable { + color: var(--text-color1) !important; +} + +.cm-s-inner .cm-variable-2 { + color: var(--code-yellow-color) !important; +} + +.cm-s-typora-default .cm-header, +.cm-s-typora-default .cm-property { + color: var(--code-red-color) !important; +} + +.cm-s-typora-default .cm-string { + color: var(--code-purple-color); +} + +.cm-s-typora-default .cm-atom { + color: var(--code-grey-color); + font-style: italic; +} + +.cm-s-typora-default .cm-number { + color: var(--code-orange-color); + font-style: normal !important; +} + +.cm-s-typora-default .cm-link { + color: var(--code-blue-color); +} + +.cm-s-typora-default .CodeMirror-activeline-background { + background: var(--hover-bg-color1); +} + +.cm-s-typora-default .cm-comment, +.cm-s-typora-default .cm-code { + color: var(--code-purple-color); +} + +.cm-s-typora-default .cm-tag { + color: var(--code-blue-color); +} + +.cm-s-typora-default .cm-strong, +.cm-s-typora-default .cm-em, +.cm-s-typora-default .cm-del { + color: var(--code-orange-color); +} + +.cm-s-typora-default .cm-block-start.cm-variable-2 { + color: var(--code-red-color); +} + +.cm-formatting-task .cm-formatting-task { + color: var(--code-red-color); +} + +/* math formula tag */ +.cm-s-inner .cm-atom, +.cm-s-inner.cm-atom { + color: var(--code-blue-color); +} + +/* inline codeblock in source mode */ +.cm-s-typora-default .cm-comment { + color: var(--code-green-color); +} + +/* horizontal divider when language is markdown */ +.cm-s-inner .cm-hr { + color: var(--text-color1); +} + +/* variable type when language is c/cpp */ +.cm-s-inner .cm-variable-3 { + color: var(--code-purple-color); +} + +/* in pie chart and flowchart */ +.cm-s-inner .cm-quote, +.cm-s-inner.cm-quote { + color: var(--code-green-color); +} + +/* unknown highlight keyword */ +.cm-s-inner .cm-link { + color: var(--code-blue-color); +} + +.cm-s-inner .cm-negative { + color: var(--dracula-red); +} + +.cm-s-inner .cm-positive { + color: var(--dracula-green); +} + +.cm-s-inner .cm-string-2 { + color: var(--dracula-orange); +} + +.CodeMirror-gutters { + border-right: none; +} + +/* focus mode */ +.on-focus-mode .md-end-block:not(.md-focus) .md-toc-item { + opacity: 0.5; +} + +.on-focus-mode #write h1:not(.md-focus):before { + opacity: 0.5; +} + +.on-focus-mode #write h2:not(.md-focus):before { + opacity: 0.5; +} + +.on-focus-mode #write h1:not(.md-focus) { + border-color: var(--text-color5); +} + +.on-focus-mode #write h2:not(.md-focus) { + border-color: var(--text-color5); +} + +.on-focus-mode #write h3:not(.md-focus) { + border-color: var(--text-color5); +} + +/* YAML block */ +pre.md-meta-block, +pre.md-meta-block:active { + background-color: var(--bg-color5); + border-radius: 6px; + padding: 10px; + padding-left: 20px; + padding-right: 20px; +} + +/* switch between different mode */ +#typora-source { + display: block !important; + visibility: hidden; + opacity: 0; + transition: 0.3s; +} + +.typora-sourceview-on #typora-source { + visibility: visible; + opacity: 1; +} + +#typora-source .CodeMirror-lines { + max-width: 1200px; + padding-left: 70px; + padding-right: 70px; +} + +#write { + display: block !important; + visibility: visible; + opacity: 1; + transition: 0.3s; + max-width: 1200px; + padding-left: 70px; + padding-right: 70px; +} + +.typora-sourceview-on #write { + visibility: hidden; + opacity: 0; +} + +.uni-preference-panel { + display: block; + visibility: hidden; + opacity: 0; + transition: 0.3s; +} + +.show-preference-panel .uni-preference-panel { + visibility: visible; + opacity: 1; +} + +/* quick open menu */ +.typora-quick-open-item:hover { + background-color: var(--hover-bg-color1); + color: var(--hover-text-color); +} + +/* insert table panel */ +.modal-content { + border: 0px; + border-radius: 6px; +} + +.modal-content .btn-primary { + background-color: var(--hover-bg-color1); + color: var(--text-color1); + outline-width: 0px; +} + +.modal-content .btn-primary:hover { + color: var(--hover-text-color); +} + +.modal-backdrop { + background-color: black; + opacity: 0.3 !important; +} + +/* zoom */ +#zoom-hint #zoom-hint-reset { + color: var(--text-color1); +} + +#zoom-hint .zoom-hint-button:hover { + color: var(--hover-text-color) !important; +} + +/* word count */ +#footer-word-count-info { + display: block; + visibility: hidden; + opacity: 0; + transition: 0.3s; +} + +.ty-show-word-count #footer-word-count-info { + visibility: visible; + opacity: 1; +} + +/* spell check */ +#spell-check-panel { + display: block; + visibility: hidden; + opacity: 0; + transition: 0.3s; +} + +.ty-show-spell-check #spell-check-panel { + visibility: visible; + opacity: 1; +} + +/* search result */ +.md-search-select { + border: 2px solid var(--dracula-cyan); + box-sizing: content-box; + color: var(--text-color1) !important; +} + +.md-search-hit { + background-color: var(--search-select-bg-color); +} + +/* search panel message */ +#searchpanel-msg { + background-color: var(--bg-color2); + color: var(--text-color2); +} + +.searchpanel-msg-btn:hover { + background-color: var(--hover-bg-color1); + color: var(--hover-text-color); +} + +/* language selection for codeblock */ +.auto-suggest-container { + border: 0px; + background-color: var(--bg-color2); +} + +/* sidebar outline item hover and active */ +.outline-item:hover { + color: var(--hover-text-color); +} + +.outline-label:hover { + text-decoration: none; +} + +.pin-outline .outline-active { + color: var(--hover-text-color); +} + +/* sidebar title hover */ +.info-panel-tab:hover { + color: var(--hover-text-color) !important; +} + +/* active file in sidebar file menu tree view */ +.file-tree-node.active>.file-node-background { + background-color: var(--hover-bg-color1); +} + +/* hover file in sidebar file menu tree view */ +.file-node-content:hover { + cursor: pointer; +} + +/* saved button in megamenu */ +#m-saved:hover { + background-color: var(--bg-color2); + color: var(--text-color2); + cursor: default; +} + +/* mermaid flowchart */ +.node rect, +.node circle, +.node ellipse, +.node polygon, +.node path { + fill: var(--bg-color2) !important; + stroke: var(--menu-divider-color) !important; +} + +.edgePath .path { + stroke: var(--menu-divider-color) !important; +} + +.label { + color: var(--text-color1) !important; +} + +.edgeLabel rect { + fill: transparent !important; +} + +.cluster rect { + fill: var(--bg-color5) !important; + stroke: var(--menu-divider-color) !important; +} + +/* mermaid sequence*/ +text.actor { + fill: var(--text-color1) !important; +} + +.messageLine0, +.messageLine1 { + stroke: var(--menu-divider-color) !important; +} + +rect[class*="activation"] { + fill: var(--bg-color2) !important; +} + +.actor-line { + stroke-width: 1px !important; +} + +.labelBox { + stroke: var(--dracula-current-line) !important; +} + +.labelText { + fill: var(--text-color1) !important; +} + +.loopText { + fill: var(--text-color1) !important; +} + +.loopLine { + stroke: var(--dracula-current-line) !important; +} + +.note { + fill: var(--bg-color2) !important; + stroke: var(--menu-divider-color) !important; +} + +.noteText { + fill: var(--text-color1) !important; +} + +/* mermaid class */ +g.classGroup text { + fill: var(--text-color) !important; +} + +g.classGroup rect { + stroke: var(--menu-divider-color) !important; + fill: var(--bg-color2) !important; +} + +g.classGroup line { + stroke: var(--menu-divider-color) !important; +} + +.classLabel .label { + fill: var(--text-color1) !important; +} + +.relation { + stroke: var(--menu-divider-color) !important; +} + +#compositionStart, +#compositionEnd, +#aggregationStart, +#aggregationEnd, +#dependencyStart, +#dependencyStart, +#extensionStart, +#extensionEnd { + fill: var(--menu-divider-color) !important; + stroke: var(--menu-divider-color) !important; +} + +.cardinality text { + fill: var(--text-color) !important; +} + +/* mermaid state v1 */ +.stateGroup rect, +.stateGroup line { + fill: var(--bg-color2) !important; + stroke: var(--menu-divider-color) !important; +} + +.stateGroup text { + fill: var(--text-color) !important; +} + +.stateGroup circle { + fill: var(--bg-color4) !important; + stroke: var(--menu-divider-color) !important; +} + +.stateGroup .composit { + fill: var(--dracula-background-dark) !important; +} + +.stateGroup .alt-composit { + fill: var(--dracula-background-dark) !important; +} + +.state-note rect { + fill: var(--bg-color2) !important; + stroke: var(--menu-divider-color) !important; +} + +.state-note text { + fill: var(--text-color) !important; +} + +.stateLabel text { + fill: var(--text-color) !important; +} + +#dependencyEnd { + fill: var(--menu-divider-color) !important; + stroke: var(--menu-divider-color) !important; +} + +/* mermaid state v2*/ +.state-start { + fill: var(--bg-color4) !important; + stroke: var(--menu-divider-color) !important; +} + +.state-end { + stroke: var(--menu-divider-color) !important; + fill: var(--bg-color4) !important; +} + +.divider { + stroke: var(--menu-divider-color) !important; + fill: var(--bg-color5) !important; + fill: var(--dracula-background-dark) !important; +} + +.fork-join { + fill: var(--bg-color2) !important; + stroke: var(--menu-divider-color) !important; +} + +.title-state { + fill: var(--bg-color2) !important; +} + +.statediagram-cluster .outer { + stroke: var(--menu-divider-color) !important; +} + +.statediagram-cluster .inner { + fill: var(--dracula-background-dark) !important; + stroke: var(--menu-divider-color) !important; +} + +.statediagram-cluster-alt .inner { + fill: var(--dracula-background-dark) !important; + stroke: var(--menu-divider-color) !important; +} + +.transition { + stroke: var(--menu-divider-color) !important; +} + +#statediagram-barbEnd { + fill: var(--menu-divider-color) !important; +} + +/* mermaid journey */ +.journey-section { + fill: var(--bg-color5) !important; + stroke: var(--menu-divider-color) !important; +} + +.journey-section div { + color: var(--text-color) !important; +} + +.task { + fill: var(--bg-color2) !important; + stroke: var(--menu-divider-color) !important; + stroke-width: 1px !important; +} + +.task div { + color: var(--text-color) !important; +} + +#arrowhead { + fill: var(--menu-divider-color) !important; + stroke: var(--menu-divider-color) !important; + stroke-width: 0.3px !important; +} + +pre[mermaid-type="journey"] line { + stroke: var(--menu-divider-color) !important; + stroke-width: 2px !important; +} + +pre[mermaid-type="journey"] text { + fill: var(--text-color1) !important; +} + +pre[mermaid-type="journey"] g path, +pre[mermaid-type="journey"] g line { + fill: var(--dracula-comment) !important; + stroke: var(--text-color) !important; +} + +.task-line { + stroke: var(--menu-divider-color) !important; +} + +/* mermaid erDiagram */ +pre[mermaid-type="erDiagram"] rect { + fill: var(--bg-color2) !important; +} + +pre[mermaid-type="erDiagram"] text { + fill: var(--text-color) !important; +} + +pre[mermaid-type="erDiagram"] path { + stroke: var(--menu-divider-color) !important; +} + +#ZERO_OR_ONE_START circle, +#ZERO_OR_ONE_END circle, +#ZERO_OR_MORE_START circle, +#ZERO_OR_MORE_END circle { + fill: var(--bg-color) !important; +} + +/* mermaid gantt */ +.titleText { + fill: var(--text-color1) !important; +} + +.section0, +.section2 { + fill: var(--table-thread-color) !important; +} + +.section1, +.section3 { + fill: var(--table-bg-color) !important; +} + +.task0, +.task1, +.task2, +.task3 { + fill: var(--dracula-current-line) !important; + stroke: var(--dracula-current-line) !important; +} + +.taskText0, +.taskText1, +.taskText2, +.taskText3 { + fill: var(--text-color2) !important; +} + +.active0, +.active1, +.active2, +.active3 { + fill: var(--dracula-current-line) !important; + stroke: var(--dracula-current-line) !important; +} + +.activeText0, +.activeText1, +.activeText2, +.activeText3 { + fill: var(--text-color2) !important; +} + +.done0, +.done1, +.done2, +.done3 { + fill: var(--dracula-background-dark) !important; + stroke: var(--dracula-background-dark) !important; +} + +.crit0, +.crit1, +.crit2, +.crit3 { + fill: var(--dracula-current-line) !important; + stroke: var(--text-color1) !important; +} + +.activeCrit0, +.activeCrit1, +.activeCrit2, +.activeCrit3 { + fill: var(--dracula-current-line) !important; + stroke: var(--text-color1) !important; +} + +.doneCrit0, +.doneCrit1, +.doneCrit2, +.doneCrit3 { + fill: var(--dracula-background-dark) !important; + stroke: var(--text-color1) !important; +} + +.taskTextOutside0, +.taskTextOutside2, +.taskTextOutside1, +.taskTextOutside3 { + fill: var(--text-color1) !important; +} + +.grid text { + fill: var(--dracula-foreground) !important; +} + +.today { + stroke: var(--text-color1) !important; +} + +/* mermaid pie chart */ +g.legend>text { + fill: var(--text-color1) !important; +} + +g.legend>rect { + stroke: var(--bg-color) !important; +} + +g>path { + stroke: var(--bg-color) !important; +} + +g>text.slice { + fill: var(--bg-color) !important; +} + +/* flow diagram */ +.md-fences[lang="flow"] .md-diagram-panel-preview rect { + fill: var(--bg-color2) !important; + stroke: var(--menu-divider-color) !important; + stroke-width: 1.2 !important; +} + +.md-fences[lang="flow"] .md-diagram-panel-preview path { + stroke: var(--menu-divider-color) !important; + stroke-width: 1.2 !important; +} + +.md-fences[lang="flow"] #cond { + fill: var(--bg-color2) !important; +} + +/* sequence diagram */ +.md-fences[lang="sequence"] .md-diagram-panel-preview rect:not([fill="none"]) { + fill: var(--bg-color2) !important; + stroke: var(--menu-divider-color) !important; + stroke-width: 1.2 !important; +} + +.md-fences[lang="sequence"] .md-diagram-panel-preview path { + fill: var(--menu-divider-color) !important; + stroke: var(--menu-divider-color) !important; + stroke-width: 1.2 !important; +} + +.md-fences[lang="sequence"] text, +.md-fences[lang="flow"] text { + font-family: "Consolas" !important; +} + +/* remove border when edit graph */ +.md-diagram-panel { + border: none !important; +} + +kbd { + background: var(--bg-color5); + color: var(--text-color1); + font-family: "Lucida Console"; + border-color: var(--menu-divider-color); +} |