From 13a584e40018f3bb3de7bd9be5fa967bcf1a77e6 Mon Sep 17 00:00:00 2001 From: "xiaoqi.cxq" Date: Thu, 11 Aug 2022 07:12:21 +0800 Subject: [PATCH] update css --- src/components/Toc.vue | 8 +++++++ src/services/markdownGrammarSvc.js | 35 ++++++++++++++-------------- src/styles/base.scss | 28 +++++++++++++++------- src/styles/markdownHighlighting.scss | 31 ++++++++++++++++++++---- src/styles/variables.scss | 8 +++---- 5 files changed, 76 insertions(+), 34 deletions(-) diff --git a/src/components/Toc.vue b/src/components/Toc.vue index 0db98b6d..8d0a324b 100644 --- a/src/components/Toc.vue +++ b/src/components/Toc.vue @@ -99,6 +99,10 @@ export default { -ms-user-select: none; user-select: none; + .app--dark & { + color: rgba(255, 255, 255, 0.67); + } + * { font-weight: inherit; pointer-events: none; @@ -150,5 +154,9 @@ export default { height: 35px; background-color: rgba(255, 255, 255, 0.2); pointer-events: none; + + .app--dark & { + color: rgba(0, 0, 0, 0.2); + } } diff --git a/src/services/markdownGrammarSvc.js b/src/services/markdownGrammarSvc.js index 330f3064..4fd23940 100644 --- a/src/services/markdownGrammarSvc.js +++ b/src/services/markdownGrammarSvc.js @@ -83,31 +83,31 @@ export default { const insideFences = options.insideFences || {}; insideFences['cl cl-pre'] = /```|~~~/; if (options.fence) { - grammars.main['pre gfm'] = { + grammars.main['pre gfm cn-code'] = { pattern: /^(```|~~~)[\s\S]*?\n\1 *$/gm, inside: insideFences, }; - grammars.list['pre gfm'] = { + grammars.list['pre gfm cn-code'] = { pattern: /^(?: {4}|\t)(```|~~~)[\s\S]*?\n(?: {4}|\t)\1\s*$/gm, inside: insideFences, }; - grammars.deflist.deflist.inside['pre gfm'] = grammars.list['pre gfm']; + grammars.deflist.deflist.inside['pre gfm cn-code'] = grammars.list['pre gfm cn-code']; } - grammars.main['h1 alt'] = { - pattern: /^.+\n=+[ \t]*$/gm, + grammars.main['h1 alt cn-head'] = { + pattern: /^.+\n[=]{2,}[ \t]*$/gm, inside: { 'cl cl-hash': /=+[ \t]*$/, }, }; - grammars.main['h2 alt'] = { - pattern: /^.+\n-+[ \t]*$/gm, + grammars.main['h2 alt cn-head'] = { + pattern: /^.+\n[-]{2,}[ \t]*$/gm, inside: { 'cl cl-hash': /-+[ \t]*$/, }, }; for (let i = 6; i >= 1; i -= 1) { - grammars.main[`h${i}`] = { + grammars.main[`h${i} cn-head`] = { pattern: new RegExp(`^#{${i}}[ \t].+$`, 'gm'), inside: { 'cl cl-hash': new RegExp(`^#{${i}}`), @@ -213,7 +213,7 @@ export default { }; const rest = {}; - rest.code = { + rest['code cn-code'] = { pattern: /(`+)[\s\S]*?\1/g, inside: { 'cl cl-code': /`/, @@ -306,7 +306,7 @@ export default { rest.tag = markup.tag; rest.url = urlPattern; rest.email = emailPattern; - rest.strong = { + rest['strong cn-strong'] = { pattern: /(^|[^\w*])(__|\*\*)(?![_*])[\s\S]*?\2(?=([^\w*]|$))/gm, lookbehind: true, inside: { @@ -377,10 +377,10 @@ export default { rest.entity = markup.entity; for (let c = 6; c >= 1; c -= 1) { - grammars.main[`h${c}`].inside.rest = rest; + grammars.main[`h${c} cn-head`].inside.rest = rest; } - grammars.main['h1 alt'].inside.rest = rest; - grammars.main['h2 alt'].inside.rest = rest; + grammars.main['h1 alt cn-head'].inside.rest = rest; + grammars.main['h2 alt cn-head'].inside.rest = rest; grammars.table.table.inside.rest = rest; grammars.main.rest = rest; grammars.list.rest = rest; @@ -391,13 +391,13 @@ export default { } const restLight = { - code: rest.code, + code: rest['code cn-code'], inlinefn: rest.inlinefn, fn: rest.fn, link: rest.link, linkref: rest.linkref, }; - rest.strong.inside.rest = restLight; + rest['strong cn-strong'].inside.rest = restLight; rest.em.inside.rest = restLight; if (options.del) { rest.del.inside.rest = restLight; @@ -407,10 +407,11 @@ export default { } const inside = { - code: rest.code, + code: rest['code cn-code'], comment: rest.comment, tag: rest.tag, - strong: rest.strong, + // strong: rest.strong, + strong: rest['strong cn-strong'], em: rest.em, del: rest.del, sub: rest.sub, diff --git a/src/styles/base.scss b/src/styles/base.scss index a6c55d5a..80c3c5d1 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -29,7 +29,7 @@ pre, ul, ol, dl { - margin: 1.2em 0; + margin: 0 0 1.1em; } h1, @@ -38,7 +38,7 @@ h3, h4, h5, h6 { - margin: 1.8em 0; + margin: 1.8em 0 0.9em; line-height: $line-height-title; } @@ -88,13 +88,20 @@ samp { blockquote { color: rgba(0, 0, 0, 0.5); - padding-left: 1.5em; - border-left: 5px solid rgba(0, 0, 0, 0.1); + padding: 0.5em 1em; + border-left: 8px solid rgba(0, 0, 0, 0.1); + background: #e2e4e9; + word-break: break-word !important; + + p:last-child { + margin-bottom: 0; + } .app--dark .layout__panel--editor &, .app--dark .layout__panel--preview & { color: rgba(255, 255, 255, 0.4); border-left-color: rgba(255, 255, 255, 0.1); + background: #3a3a3c; } } @@ -136,20 +143,25 @@ table { background-color: transparent; border-collapse: collapse; border-spacing: 0; + margin-bottom: 1em; } td, th { - border-right: 1px solid #dcdcdc; + border: 1px solid #c9c9c9; padding: 8px 12px; - &:last-child { - border-right: 0; + .app--dark & { + border: 1px solid #5f5f5f; } } td { - border-top: 1px solid #dcdcdc; + border: 1px solid #c9c9c9; + + .app--dark & { + border: 1px solid #5f5f5f; + } } mark { diff --git a/src/styles/markdownHighlighting.scss b/src/styles/markdownHighlighting.scss index fe5f22bf..fe0a17b5 100644 --- a/src/styles/markdownHighlighting.scss +++ b/src/styles/markdownHighlighting.scss @@ -255,6 +255,7 @@ .email, .cl-underlined-text { text-decoration: underline; + color: #d7a55b; } .linkdef .url { @@ -290,11 +291,7 @@ } .cl-underlined-text { - color: $editor-color-light-low; - - .app--dark & { - color: $editor-color-dark-low; - } + color: #d7a55b; } } @@ -305,6 +302,30 @@ color: $editor-color-dark; } } + + .cn-head { + color: #dea731; + + .app--dark & { + color: #f8bb39; + } + } + + .cn-strong { + color: #db784d; + + .app--dark & { + color: #db784d; + } + } + + .cn-code { + color: #59b003; + + .app--dark & { + color: #95cc5e; + } + } } .markdown-highlighting--inline { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 41cc5eb3..16c5d1bd 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -3,7 +3,7 @@ $font-family-monospace: 'Roboto Mono', 'Lucida Sans Typewriter', 'Lucida Console $body-color-light: rgba(0, 0, 0, 0.75); $body-color-dark: rgba(255, 255, 255, 0.75); $code-bg: rgba(0, 0, 0, 0.05); -$code-dark-bg: rgba(0, 0, 0, 0.2); +$code-dark-bg: rgba(255, 255, 255, 0.1); $line-height-base: 1.67; $line-height-title: 1.33; $font-size-monospace: 0.85em; @@ -21,15 +21,15 @@ $navbar-hover-color: #fff; $navbar-hover-background: rgba(255, 255, 255, 0.1); $editor-background-light: #fff; -$editor-background-dark: #1e1e1e; +$editor-background-dark: #36312c; $editor-color-light: rgba(0, 0, 0, 0.8); -$editor-color-light-low: #000; +$editor-color-light-low: rgba(0, 0, 0, 0.75); $editor-color-light-high: rgba(0, 0, 0, 0.28); $editor-color-light-blockquote: rgba(0, 0, 0, 0.48); $editor-color-dark: rgba(255, 255, 255, 0.8); -$editor-color-dark-low: #fff; +$editor-color-dark-low: rgba(255, 255, 255, 0.75); $editor-color-dark-high: rgba(255, 255, 255, 0.28); $editor-color-dark-blockquote: rgba(255, 255, 255, 0.48);