typora的vue和drake主题

/* * 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. * * GitHub https://github.com/liangjingkanji/DrakeTyporaTheme */ @import url(./drake/font.css); @include-when-export url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); :root { --text-color: rgba(255, 255, 255, 0.75); --bg-color: rgb(26, 26, 26); --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: #42B883; --drake-highlight: #AAC8E4; --a-color: #42B883; --variable-color: var(--drake-highlight); --outline-active-color: var(--title-color); --code-block-bg-color: #242424; --code-block-color: #A6ACCD; --title-color: rgba(255, 255, 255, 0.85); --blockquote-border-color: transparent; --blockquote-color: #EBEBEB99; --blockquote-bg-color: #242424; --strong-color: var(--title-color); --h2-underline-color: var(--title-color); --horizontal-divider-color: var(--title-color); --height-light-color: var(--drake-accent); --height-light-border-color: var(--drake-accent); --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: #242424; --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='%2342B883'/%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: var(--text-size); } 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; } p { line-height: var(--text-line-height); } /*code block*/ .md-fences { font-size: 1rem; padding: 0.5rem !important; border-radius: 8px; word-wrap: normal; background-color: var(--code-block-bg-color); color: var(--code-block-color); border: none; line-height: var(--code-line-height); } /*inline latex*/ .MathJax { font-size: 120% !important; } .MathJax text, .MathJax use { font-family: var(--latex-font); } /*math-block latex*/ .md-math-block .MathJax { font-size: 130% !important; } /*mermaid*/ [mermaid-type="journey"] line { stroke: #7a7a7a !important; } [mermaid-type="journey"] .label { color: #333 !important; } [id^=mermaidChart] .relationshipLabelBox { fill: var(--bg-color) !important; opacity: 1 !important; background-color: var(--bg-color) !important; } [id^=mermaidChart] .legend { fill: var(--text-color) !important; } [id^=mermaidChart] g.label { font-size: 1rem !important; } [id^=mermaidChart] line.divider { stroke: var(--table-border-color) !important; } [id^=mermaidChart] span.nodeLabel { color: var(--code-block-color) !important; line-height: 1.8rem; } tspan { color: var(--text-color) } [id^=mermaidChart] .entityLabel { fill: var(--code-block-color) !important; } [id^=mermaidChart] { fill: var(--text-color) !important; } [id^=mermaidChart] rect.rect { fill: rgba(175, 255, 212, 0.3) !important; } .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, .md-diagram-panel-preview .entityBox { /*方块*/ 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: #e6e6e6 !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