/* * Copyright (C) 2018 Drake, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ @import url(./drake/font.css); :root { --monospace: "JetBrainsMono NF", "Fira Code", Menlo, "Ubuntu Mono", Consolas; /*code font*/ --text-font: var(--monospace); /*default font*/ --title-font: var(--monospace); /*title font*/ --text-color: #b3bec4; --bg-color: #212121; --control-text-color: var(--text-color); --meta-content-color: var(--text-color); --active-file-border-color: var(--drake-accent); --rawblock-edit-panel-bd: var(--code-block-bg-color); --item-hover-bg-color: #323232; --active-file-bg-color: var(--item-hover-bg-color); --mermaid-theme: night; --blur-text-color: rgba(179, 190, 196, 0.5); --md-char-color: #535455; --side-bar-bg-color: var(--bg-color); --search-select-bg-color: #ffffff; --search-select-text-color: var(--bg-color); --select-text-bg-color: #3473B068; --window-border: 1px solid #282828; --drake-accent: #ff9800; --drake-highlight: #ff9800; --a-color: var(--drake-highlight); --variable-color: var(--drake-highlight); --outline-active-color: var(--a-color); --code-block-bg-color: #1b1b1b; --code-block-color: var(--text-color); --title-color: #bbc6d2; --blockquote-border-color: var(--drake-accent); --blockquote-color: var(--text-color); --blockquote-bg-color: rgba(255, 185, 82, 0.05); --strong-color: var(--title-color); --h2-underline-color: var(--title-color); --horizontal-divider-color: var(--title-color); --height-light-color: var(--drake-highlight); --height-light-border-color: var(--drake-highlight); --yaml-color: #676773; --yaml-bg-color: var(--code-block-bg-color); --footnotes-bg-color: var(--item-hover-bg-color); --footnotes-highlight: #FFD760; --table-border-color: var(--item-hover-bg-color); --table-header-bg-color: #292929; --table-bg-color: var(--bg-color); --table-n2-bg-color: var(--table-header-bg-color); --input-bg-color: var(--item-hover-bg-color); --btn-hover-bg-color: var(--item-hover-bg-color); --checkbox-checked: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M425.984 726.016l384-384-59.99-61.995-324.01 324.011-152.021-152.021L213.973 512zm384-598.016q36.01 0 61.013 25.984T896 213.974v596.01q0 34.005-25.003 59.99t-61.013 25.983h-596.01q-36.011 0-61.014-25.984t-25.003-59.989v-596.01q0-34.006 25.003-59.99T213.973 128h596.011z' fill='%2365b73b'/%3E%3C/svg%3E"); --checkbox-unchecked: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M810.667 213.333v597.334H213.333V213.333h597.334m0-85.333H213.333C166.4 128 128 166.4 128 213.333v597.334C128 857.6 166.4 896 213.333 896h597.334C857.6 896 896 857.6 896 810.667V213.333C896 166.4 857.6 128 810.667 128z' fill='%23acb7c4'/%3E%3C/svg%3E"); } html { font-size: 16px; } body { font-family: var(--text-font) !important; color: var(--text-color); -webkit-font-feature-settings: "liga" on, "calt" on; -webkit-font-smoothing: subpixel-antialiased; text-rendering: optimizeLegibility; letter-spacing: 0; margin: 0; overflow-x: hidden; } /*code block*/ .md-fences { font-size: 1rem; padding: 0.5rem !important; border-radius: 2px; word-wrap: normal; background-color: var(--code-block-bg-color); color: var(--code-block-color); border: none; } /*mermaid*/ .md-diagram-panel-preview text.actor > tspan { /*方块文字*/ fill: var(--code-block-color) !important; stroke: none !important; font-family: var(--text-font) !important; font-size: 1rem !important; } .md-diagram-panel-preview .actor { /*方块*/ stroke: var(--table-border-color) !important; fill: var(--code-block-bg-color) !important; } .md-diagram-panel-preview .actor-line { /*竖线*/ stroke: var(--text-color) !important; stroke-width: 1px; } .md-diagram-panel-preview .messageLine0 { /*横线*/ stroke-width: 1.5; stroke-dasharray: none; stroke: var(--text-color) !important; } .md-diagram-panel-preview .messageLine1 { /*虚线*/ stroke-width: 1.5 !important; stroke-dasharray: 2, 2 !important; stroke: var(--text-color) !important; } .md-diagram-panel-preview .messageText { /*描述文字*/ fill: var(--text-color) !important; font-family: var(--text-font) !important; font-size: 1rem !important; } .md-diagram-panel-preview .activation0 { /*长方形*/ fill: rgba(141, 141, 141, 0.22) !important; stroke: var(--text-color) !important; } .md-diagram-panel-preview .labelText, .md-diagram-panel-preview .labelText > tspan { /*循环标记*/ fill: var(--code-block-color) !important; font-family: var(--text-font) !important; font-size: 1rem !important; dominant-baseline: unset; alignment-baseline: unset; } .md-diagram-panel-preview .labelBox { /*循环标记背景*/ stroke: var(--table-border-color) !important; fill: var(--code-block-bg-color) !important; } .md-diagram-panel-preview .loopLine { /*循环标记虚线*/ stroke: var(--text-color) !important; } .md-diagram-panel-preview .loopText, .md-diagram-panel-preview .loopText > tspan { /*循环名称*/ fill: var(--text-color) !important; font-size: 1rem !important; } .md-diagram-panel-preview .sequenceNumber { /*序号*/ fill: var(--bg-color) !important; } pre.md-fences-advanced.md-focus .md-fences-adv-panel { border: none; } .md-diagram-panel-preview .edgePath .path { /*箭头*/ stroke: var(--text-color) !important; } .md-diagram-panel-preview .edgeLabel rect { /*条件文字背景*/ fill: var(--bg-color) !important; } .md-diagram-panel-preview .edgeLabel span { /*条件文字*/ color: var(--text-color); } .md-diagram-panel-preview .node rect, .md-diagram-panel-preview .node circle, .md-diagram-panel-preview .node ellipse, .md-diagram-panel-preview .node polygon, .md-diagram-panel-preview .node path { /*形状*/ stroke: var(--table-border-color) !important; fill: var(--code-block-bg-color) !important; } #write .md-diagram-panel .md-diagram-panel-preview div { /*形状内文字*/ color: var(--code-block-color) !important; font-family: var(--text-font) !important; font-size: 1rem !important; } /*code snippet*/ #write code, tt { margin: 0 2px; color: var(--drake-highlight); } /*variable*/ var { color: var(--variable-color); font-weight: bold; } /*raw block*/ .md-rawblock-control:not(.md-rawblock-tooltip) { border-radius: 2px 0 2px 2px; padding: 0.2rem !important; } .md-rawblock:hover > .md-rawblock-container { background: none; } .md-rawblock-input { font-size: 1rem; } .md-rawblock-tooltip-btn:hover { background: none; } .md-rawblock:hover > .md-rawblock-tooltip { border-radius: 2px 2px 0 0; margin-bottom: 2px !important; } .md-rawblock-tooltip.md-rawblock-control { border-radius: 2px 2px 0 0; color: var(--code-block-color); } .md-rawblock-tooltip-name { color: var(--code-block-color); opacity: 1; } /*quote block*/ blockquote:before { display: block; position: absolute; content: ''; width: 4px; left: 0; top: 0; height: 100%; background-color: var(--blockquote-border-color); border-radius: 2px; } blockquote { color: var(--blockquote-color); border-radius: 2px; padding: 10px 16px; background-color: var(--blockquote-bg-color); position: relative; border-left: none; } #write strong { color: var(--strong-color); font-weight: bold; } #write blockquote strong { color: var(--blockquote-color); } /*link*/ #write a { color: var(--a-color); text-decoration: none; } .on-focus-mode #write a .md-plain, .on-focus-mode .md-htmlblock-container a:hover { border-bottom: .1rem solid var(--blur-text-color); } #write a .md-plain, .md-htmlblock-container a:hover, .on-focus-mode #write .md-focus a .md-plain, .md-focus .md-htmlblock-container a:hover { border-bottom: .1rem solid var(--a-color); } [md-inline=link] a { margin: 0 .2rem; } a:any-link { color: var(--a-color); } img { border-left: none; border-right: none; vertical-align: baseline; border-radius: 2px; } #write { max-width: 1200px; margin: 0 auto; padding: 20px 30px 100px; } #typora-source .CodeMirror-lines { max-width: 1200px; } #write > ul:first-child, #write > ol:first-child { margin-top: 30px; } body > *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } h1, h2, h3, h4, h5, h6 { font-family: var(--title-font); position: relative; margin-top: 2rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text; color: var(--title-color); } h3.md-focus:before, h4.md-focus:before, h5.md-focus:before, h6.md-focus:before { visibility: hidden; } h1 { font-size: 2rem; text-align: center; margin-top: 0; } h2.md-end-block.md-heading { font-size: 1.6rem; display: inline-block; } h2.md-end-block.md-heading:after { display: block; content: ''; height: 2px; margin-top: 4px; background-color: var(--h2-underline-color); border-radius: 2px; } .on-focus-mode h2.md-end-block.md-heading:not(.md-focus):not(.md-focus-container):after { background-color: var(--blur-text-color) !important; } h3 { font-size: 1.4rem; } h4 { font-size: 1.2rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; } h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { text-decoration: none; } h1 tt, h1 code { font-size: inherit !important; } h2 tt, h2 code { font-size: inherit !important; } h3 tt, h3 code { font-size: inherit !important; } h4 tt, h4 code { font-size: inherit !important; } h5 tt, h5 code { font-size: inherit !important; } h6 tt, h6 code { font-size: inherit !important; } p, blockquote, ul, ol, dl, table { margin: 0.8em 0; } li > ol, li > ul { margin: 0 0; } hr { height: 2px; padding: 0; margin: 16px 0; background-color: var(--horizontal-divider-color); border: 0 none; overflow: hidden; box-sizing: content-box; } body > h2:first-child { margin-top: 0; padding-top: 0; } body > h1:first-child { margin-top: 0; padding-top: 0; } body > h1:first-child + h2 { margin-top: 0; padding-top: 0; } body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child { margin-top: 0; padding-top: 0; } a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { margin-top: 0; padding-top: 0; } h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin-top: 0; } li p.first { display: inline-block; } ul, ol { padding-inline-start: 2em; } ul:first-child, ol:first-child { margin-top: 0; } ul:last-child, ol:last-child { margin-bottom: 0; } table { padding: 0; word-break: initial; background-color: var(--table-bg-color); } table tr { border-top: .1em solid var(--table-border-color); margin: 0; padding: 0; } table th { font-weight: bold; border: .1em solid var(--table-border-color); border-bottom: 0; margin: 0; padding: 6px 13px; } table td { border: .1em solid var(--table-border-color); margin: 0; padding: 6px 13px; } table thead { background-color: var(--table-header-bg-color); } table tr:nth-child(2n) { background-color: var(--table-n2-bg-color); } table tr th:first-child, table tr td:first-child { margin-top: 0; } table tr th:last-child, table tr td:last-child { margin-bottom: 0; } #write em { padding: 0 5px 0 2px; } #write table thead th { background-color: var(--table-header-bg-color); } /* height light */ #write mark { border: .1em solid var(--height-light-border-color); color: var(--height-light-color); background-color: transparent; padding: .1rem .5rem; border-radius: 2rem; margin: 0 .2rem; font-size: .95rem; } /*shortcut*/ kbd { border: .1em solid #5b5b5e; background: transparent; color: var(--text-color); margin: 0 .4rem; font-size: .95rem; padding: .3em .4em; border-radius: .4em; vertical-align: top; box-shadow: .1em .1em .2em rgba(0, 0, 0, 0.3); } #write del { padding: 1px 2px; } .md-task-list-item > input { margin-left: -1.3em; } @media print { html { font-size: 12px; } table, pre { page-break-inside: avoid; } pre { word-wrap: break-word; } } /*YAML*/ #write pre.md-meta-block { padding: 1rem; font-size: 1rem; line-height: 1.45; background-color: var(--yaml-bg-color); border: 0; border-radius: 2px; color: var(--yaml-color); margin-top: 0 !important; } .mathjax-block > .code-tooltip { bottom: .375rem; } #write > h3.md-focus:before { left: -1.5625rem; top: .375rem; } #write > h4.md-focus:before { left: -1.5625rem; top: .285714286rem; } #write > h5.md-focus:before { left: -1.5625rem; top: .285714286rem; } #write > h6.md-focus:before { left: -1.5625rem; top: .285714286rem; } .md-image > .md-meta { border-radius: 2px; font-family: initial; padding: 2px 0 0 4px; color: inherit; } .md-tag { color: inherit; } .md-toc { margin-top: 20px; padding-bottom: 20px; } .typora-quick-open-item { font-size: 1rem !important; height: 50px; padding-left: 8px; padding-top: 4px; padding-bottom: 4px; } #typora-quick-open { box-shadow: 0 0 8px #00000045; padding: 0; } .ty-quick-open-category.ty-has-prev .ty-quick-open-category-title { border-top: none; } #typora-quick-open-input { margin: 8px; box-shadow: none; border-radius: 2px; } #typora-quick-open-input input { font-size: 1rem; box-shadow: none; padding-top: 2px; padding-left: 10px; padding-right: 10px; line-height: 32px; max-height: 32px; border: none; } .modal-dialog#typora-quick-open { border-radius: 8px; } .ty-quick-open-category-title { padding-left: 8px; color: #BEBEBE; font-size: 0.8rem; margin-bottom: 4px; } .typora-quick-open-item-path { font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } /*search input*/ .form-control { border: none; border-radius: 2px; box-shadow: none; } #md-searchpanel .btn { border-radius: 2px; } #search-panel-replaceall-btn { padding-right: 5px !important; text-align: center !important; } #search-panel-replace-btn { text-align: center !important; } #md-searchpanel input { background: var(--input-bg-color); border-radius: 2px; } .searchpanel-search-option-btn { border-radius: 2px; border: none; background: transparent; color: var(--text-color); } .searchpanel-search-option-btn.active { background: var(--text-color); color: var(--bg-color); } .form-control:focus { box-shadow: none; } #md-notification:before { top: 10px; } /** focus mode */ .on-focus-mode blockquote { border-left-color: rgba(85, 85, 85, 0.12); } header, .context-menu, .megamenu-content, footer { font-family: initial; } /*sidebar*/ .file-node-content:hover .file-node-icon, .file-node-content:hover .file-node-open-state { visibility: visible; } #typora-sidebar { font-size: 1.1rem; } .sidebar-tabs { border-bottom: none; } .file-list-item-summary, .file-list-item-parent-loc, .file-list-item-time, .file-list-item-summary { font-size: 0.9rem !important; font-family: var(--text-font); } .file-list-item-file-ext-part { display: none; } .outline-item { font-size: 1rem; } /*footnotes mark*/ #write .md-footnote { background-color: inherit; color: var(--drake-highlight); font-size: 0.9rem; border-radius: 0.9rem; padding-left: 0; } #write .md-footnote:before { content: "["; } #write .md-footnote:after { content: "]"; } /*footnotes content*/ .md-hover-tip .code-tooltip-content { border-radius: 2px; } /*footnotes title*/ span.md-def-name { padding-right: 3ch; padding-left: 0; position: relative; font-weight: normal; } /*footnotes desc*/ .footnotes { font-size: 1rem; font-weight: normal; color: var(--text-color); position: relative; } /*footnotes tooltip text*/ .code-tooltip-content .md-plain { font-size: 0.9rem; font-family: inherit; } .code-tooltip-content code { padding: 0 2px; font-family: inherit; color: var(--footnotes-highlight); background-color: inherit; } .code-tooltip-content a { color: var(--footnotes-highlight); } div.code-tooltip-content { box-shadow: 0 0 8px #00000045; background: var(--footnotes-bg-color); } .footnotes { opacity: 1; } .md-def-name:after { content: ". ^"; color: var(--text-color); } .md-def-footnote .md-def-name:before { content: ""; color: var(--text-color); position: absolute; } .md-def-name:before { content: ""; color: var(--text-color); position: absolute; } .md-content.md-url, .md-def-content.md-def-url.md-auto-disp { text-decoration: none; border-bottom: .1rem solid var(--text-color); } .CodeMirror-scroll::-webkit-scrollbar { display: none; } .file-list-item-summary { font-size: 1em; } .pin-outline #outline-content .outline-active strong, .pin-outline .outline-active { font-weight: 500; color: var(--outline-active-color); } .file-list-item.active { border-left: 4px solid var(--drake-accent); } #md-searchpanel .btn:not(.close-btn):hover { box-shadow: none; background: var(--btn-hover-bg-color); } /*checkbox*/ #write input[type=checkbox] { opacity: 0; height: 1.6rem; width: 1.6rem; margin-left: -2em; margin-top: 0; top: 0; } #write .ul-list li.md-task-list-item.task-list-done::before { content: ""; background: var(--checkbox-checked) 0 0 no-repeat; background-size: 100%; display: inline-block; position: absolute; height: 1.6rem; width: 1.6rem; margin-left: -2em; } #write .ul-list li.md-task-list-item.task-list-not-done::before { content: ""; background: var(--checkbox-unchecked) 0 0 no-repeat; background-size: 100%; display: inline-block; position: absolute; height: 1.6rem; width: 1.6rem; margin-left: -2em; } /*insert table*/ .btn { border-radius: 2px; } .modal-content { border-radius: 8px; } .btn-primary:hover, .btn-primary:active { background-color: var(--btn-hover-bg-color); color: var(--drake-highlight); } .btn-primary { background-color: transparent; color: var(--drake-highlight); } .btn-default { background-color: transparent; } .btn:active { box-shadow: none; border-color: transparent; } .modal-footer { border-top: none; } #table-insert-col, #table-insert-row { background: var(--input-bg-color); border-radius: 2px; } /*preference panel*/ #megamenu-content { background-image: none !important; background-color: var(--bg-color); } #top-titlebar { height: inherit; background-color: var(--bg-color); } #megamenu-menu-sidebar { background-color: var(--bg-color); color: var(--text-color); } .long-btn { width: inherit; min-width: 300px; border: 1px solid var(--text-color); border-radius: 6px; } .megamenu-menu-panel h1 { margin-bottom: 3rem; text-align: left; } .megamenu-menu-panel h1, .megamenu-menu-panel h2 { font-weight: normal; } #recent-file-panel-search-input { height: 45px; border: none; border-bottom: 1px solid var(--text-color); padding-left: 8px; } #recent-file-panel-search-input::placeholder { color: var(--text-color); opacity: .5; } .megamenu-menu-header { border-bottom: none; } #recent-file-panel-action-btn { background: none; border: none; } #recent-file-panel-action-btn-container { float: none; display: inline-block; } #top-titlebar .toolbar-icon.btn.hover, #top-titlebar .toolbar-icon.btn:hover { background-color: var(--btn-hover-bg-color); color: var(--text-color); } .megamenu-menu-panel .btn:hover { background-color: var(--btn-hover-bg-color) !important; color: var(--text-color); } #recent-file-panel tbody tr:nth-child(2n-1), .megamenu-menu-panel table thead, .megamenu-menu-panel table tr { background-color: transparent; } .megamenu-menu-panel table { font-weight: normal; } #megamenu-back-btn { color: var(--text-color); border: 1px solid var(--text-color); } .megamenu-menu-header #megamenu-menu-header-title { color: var(--text-color); } header, .context-menu, .megamenu-content, footer { font-family: var(--text-font); } .ty-preferences select { padding-left: 2px; } .preference-item-hint { font-size: 14px; } a.ty-link { color: var(--a-color); margin: 0 .2rem; } /* Name: material Author: Mattia Astorino (http://github.com/equinusocio) Website: https://material-theme.site/ */ .cm-s-inner.CodeMirror { background: none; color: var(--code-block-color); } .cm-s-inner .CodeMirror-gutters { border-right: none; border-radius: 2px; padding-left: 0.5rem; background: #212121; color: #545454; } .cm-s-inner .CodeMirror-guttermarker, .cm-s-inner .CodeMirror-guttermarker-subtle, .cm-s-inner .CodeMirror-linenumber { color: #545454; } .cm-s-inner .CodeMirror-line::selection, .cm-s-inner .CodeMirror-line>span::selection, .cm-s-inner .CodeMirror-line>span>span::selection { background: rgba(128, 203, 196, 0.2); } .cm-s-inner .CodeMirror-line::-moz-selection, .cm-s-inner .CodeMirror-line>span::-moz-selection, .cm-s-inner .CodeMirror-line>span>span::-moz-selection { background: rgba(128, 203, 196, 0.2); } .cm-s-inner .cm-keyword { color: #C792EA; } .cm-s-inner .cm-operator { color: #89DDFF; } .cm-s-inner .cm-variable-2 { color: var(--code-block-color); } .cm-s-inner .cm-variable-3, .cm-s-inner .cm-type { color: #f07178; } .cm-s-inner .cm-builtin { color: #FFCB6B; } .cm-s-inner .cm-atom { color: #F78C6C; } .cm-s-inner .cm-number { color: #FF5370; } .cm-s-inner .cm-def { color: #82AAFF; } .cm-s-inner .cm-string { color: #C3E88D; } .cm-s-inner .cm-string-2 { color: #f07178; } .cm-s-inner .cm-comment { color: #545454; } .cm-s-inner .cm-variable { color: var(--code-block-color); } .cm-s-inner .cm-tag { color: #FF5370; } .cm-s-inner .cm-meta { color: #FFCB6B; } .cm-s-inner .cm-attribute { color: #C792EA; } .cm-s-inner .cm-property { color: #C792EA; } .cm-s-inner .cm-qualifier { color: #DECB6B; } .cm-s-inner .cm-variable-3, .cm-s-inner .cm-type { color: #DECB6B; } .cm-s-inner .cm-error { color: rgba(255, 255, 255, 1.0); background-color: #FF5370; } .cm-s-inner .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } .cm-s-inner .CodeMirror-selected { background: #214283 !important; } .cm-s-inner .CodeMirror-selectedtext { background: #214283 !important; } .cm-s-typora-default .CodeMirror-selectedtext { background: var(--select-text-bg-color) !important; } .cm-overlay.CodeMirror-selectedtext { background: var(--select-text-bg-color) !important; } .cm-s-inner div.CodeMirror-cursor { border-left: 1px solid var(--code-block-color); }