diff options
Diffstat (limited to 'templates/typora/udt.css.in')
| -rw-r--r-- | templates/typora/udt.css.in | 1868 |
1 files changed, 1868 insertions, 0 deletions
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); +} |