update css

This commit is contained in:
xiaoqi.cxq 2022-08-11 07:12:21 +08:00
parent 51367f1ae5
commit 13a584e400
5 changed files with 76 additions and 34 deletions

View File

@ -99,6 +99,10 @@ export default {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
.app--dark & {
color: rgba(255, 255, 255, 0.67);
}
* { * {
font-weight: inherit; font-weight: inherit;
pointer-events: none; pointer-events: none;
@ -150,5 +154,9 @@ export default {
height: 35px; height: 35px;
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
pointer-events: none; pointer-events: none;
.app--dark & {
color: rgba(0, 0, 0, 0.2);
}
} }
</style> </style>

View File

@ -83,31 +83,31 @@ export default {
const insideFences = options.insideFences || {}; const insideFences = options.insideFences || {};
insideFences['cl cl-pre'] = /```|~~~/; insideFences['cl cl-pre'] = /```|~~~/;
if (options.fence) { if (options.fence) {
grammars.main['pre gfm'] = { grammars.main['pre gfm cn-code'] = {
pattern: /^(```|~~~)[\s\S]*?\n\1 *$/gm, pattern: /^(```|~~~)[\s\S]*?\n\1 *$/gm,
inside: insideFences, inside: insideFences,
}; };
grammars.list['pre gfm'] = { grammars.list['pre gfm cn-code'] = {
pattern: /^(?: {4}|\t)(```|~~~)[\s\S]*?\n(?: {4}|\t)\1\s*$/gm, pattern: /^(?: {4}|\t)(```|~~~)[\s\S]*?\n(?: {4}|\t)\1\s*$/gm,
inside: insideFences, 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'] = { grammars.main['h1 alt cn-head'] = {
pattern: /^.+\n=+[ \t]*$/gm, pattern: /^.+\n[=]{2,}[ \t]*$/gm,
inside: { inside: {
'cl cl-hash': /=+[ \t]*$/, 'cl cl-hash': /=+[ \t]*$/,
}, },
}; };
grammars.main['h2 alt'] = { grammars.main['h2 alt cn-head'] = {
pattern: /^.+\n-+[ \t]*$/gm, pattern: /^.+\n[-]{2,}[ \t]*$/gm,
inside: { inside: {
'cl cl-hash': /-+[ \t]*$/, 'cl cl-hash': /-+[ \t]*$/,
}, },
}; };
for (let i = 6; i >= 1; i -= 1) { for (let i = 6; i >= 1; i -= 1) {
grammars.main[`h${i}`] = { grammars.main[`h${i} cn-head`] = {
pattern: new RegExp(`^#{${i}}[ \t].+$`, 'gm'), pattern: new RegExp(`^#{${i}}[ \t].+$`, 'gm'),
inside: { inside: {
'cl cl-hash': new RegExp(`^#{${i}}`), 'cl cl-hash': new RegExp(`^#{${i}}`),
@ -213,7 +213,7 @@ export default {
}; };
const rest = {}; const rest = {};
rest.code = { rest['code cn-code'] = {
pattern: /(`+)[\s\S]*?\1/g, pattern: /(`+)[\s\S]*?\1/g,
inside: { inside: {
'cl cl-code': /`/, 'cl cl-code': /`/,
@ -306,7 +306,7 @@ export default {
rest.tag = markup.tag; rest.tag = markup.tag;
rest.url = urlPattern; rest.url = urlPattern;
rest.email = emailPattern; rest.email = emailPattern;
rest.strong = { rest['strong cn-strong'] = {
pattern: /(^|[^\w*])(__|\*\*)(?![_*])[\s\S]*?\2(?=([^\w*]|$))/gm, pattern: /(^|[^\w*])(__|\*\*)(?![_*])[\s\S]*?\2(?=([^\w*]|$))/gm,
lookbehind: true, lookbehind: true,
inside: { inside: {
@ -377,10 +377,10 @@ export default {
rest.entity = markup.entity; rest.entity = markup.entity;
for (let c = 6; c >= 1; c -= 1) { 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['h1 alt cn-head'].inside.rest = rest;
grammars.main['h2 alt'].inside.rest = rest; grammars.main['h2 alt cn-head'].inside.rest = rest;
grammars.table.table.inside.rest = rest; grammars.table.table.inside.rest = rest;
grammars.main.rest = rest; grammars.main.rest = rest;
grammars.list.rest = rest; grammars.list.rest = rest;
@ -391,13 +391,13 @@ export default {
} }
const restLight = { const restLight = {
code: rest.code, code: rest['code cn-code'],
inlinefn: rest.inlinefn, inlinefn: rest.inlinefn,
fn: rest.fn, fn: rest.fn,
link: rest.link, link: rest.link,
linkref: rest.linkref, linkref: rest.linkref,
}; };
rest.strong.inside.rest = restLight; rest['strong cn-strong'].inside.rest = restLight;
rest.em.inside.rest = restLight; rest.em.inside.rest = restLight;
if (options.del) { if (options.del) {
rest.del.inside.rest = restLight; rest.del.inside.rest = restLight;
@ -407,10 +407,11 @@ export default {
} }
const inside = { const inside = {
code: rest.code, code: rest['code cn-code'],
comment: rest.comment, comment: rest.comment,
tag: rest.tag, tag: rest.tag,
strong: rest.strong, // strong: rest.strong,
strong: rest['strong cn-strong'],
em: rest.em, em: rest.em,
del: rest.del, del: rest.del,
sub: rest.sub, sub: rest.sub,

View File

@ -29,7 +29,7 @@ pre,
ul, ul,
ol, ol,
dl { dl {
margin: 1.2em 0; margin: 0 0 1.1em;
} }
h1, h1,
@ -38,7 +38,7 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 1.8em 0; margin: 1.8em 0 0.9em;
line-height: $line-height-title; line-height: $line-height-title;
} }
@ -88,13 +88,20 @@ samp {
blockquote { blockquote {
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
padding-left: 1.5em; padding: 0.5em 1em;
border-left: 5px solid rgba(0, 0, 0, 0.1); 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--editor &,
.app--dark .layout__panel--preview & { .app--dark .layout__panel--preview & {
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
border-left-color: rgba(255, 255, 255, 0.1); border-left-color: rgba(255, 255, 255, 0.1);
background: #3a3a3c;
} }
} }
@ -136,20 +143,25 @@ table {
background-color: transparent; background-color: transparent;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
margin-bottom: 1em;
} }
td, td,
th { th {
border-right: 1px solid #dcdcdc; border: 1px solid #c9c9c9;
padding: 8px 12px; padding: 8px 12px;
&:last-child { .app--dark & {
border-right: 0; border: 1px solid #5f5f5f;
} }
} }
td { td {
border-top: 1px solid #dcdcdc; border: 1px solid #c9c9c9;
.app--dark & {
border: 1px solid #5f5f5f;
}
} }
mark { mark {

View File

@ -255,6 +255,7 @@
.email, .email,
.cl-underlined-text { .cl-underlined-text {
text-decoration: underline; text-decoration: underline;
color: #d7a55b;
} }
.linkdef .url { .linkdef .url {
@ -290,11 +291,7 @@
} }
.cl-underlined-text { .cl-underlined-text {
color: $editor-color-light-low; color: #d7a55b;
.app--dark & {
color: $editor-color-dark-low;
}
} }
} }
@ -305,6 +302,30 @@
color: $editor-color-dark; 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 { .markdown-highlighting--inline {

View File

@ -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-light: rgba(0, 0, 0, 0.75);
$body-color-dark: rgba(255, 255, 255, 0.75); $body-color-dark: rgba(255, 255, 255, 0.75);
$code-bg: rgba(0, 0, 0, 0.05); $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-base: 1.67;
$line-height-title: 1.33; $line-height-title: 1.33;
$font-size-monospace: 0.85em; $font-size-monospace: 0.85em;
@ -21,15 +21,15 @@ $navbar-hover-color: #fff;
$navbar-hover-background: rgba(255, 255, 255, 0.1); $navbar-hover-background: rgba(255, 255, 255, 0.1);
$editor-background-light: #fff; $editor-background-light: #fff;
$editor-background-dark: #1e1e1e; $editor-background-dark: #36312c;
$editor-color-light: rgba(0, 0, 0, 0.8); $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-high: rgba(0, 0, 0, 0.28);
$editor-color-light-blockquote: rgba(0, 0, 0, 0.48); $editor-color-light-blockquote: rgba(0, 0, 0, 0.48);
$editor-color-dark: rgba(255, 255, 255, 0.8); $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-high: rgba(255, 255, 255, 0.28);
$editor-color-dark-blockquote: rgba(255, 255, 255, 0.48); $editor-color-dark-blockquote: rgba(255, 255, 255, 0.48);