343 lines
14 KiB
CSS
343 lines
14 KiB
CSS
@import './fonts.css';
|
|
@import 'prismjs/themes/prism-tomorrow.css';
|
|
|
|
/* 基础主题。--rm-* 变量继续作为主题接口，字体在本地加载。 */
|
|
:root {
|
|
color-scheme: light;
|
|
--rm-sidebar-width: 288px;
|
|
--rm-font-text: 'Manrope', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
--rm-font-heading: 'Noto Serif SC', 'Source Han Serif SC', serif;
|
|
--rm-font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
|
--rm-font-size: 16px;
|
|
--rm-line-height: 1.75;
|
|
--rm-content-width: 760px;
|
|
--rm-paragraph-spacing: 16px;
|
|
--rm-glass-opacity: 0.75;
|
|
--rm-bg: #faf8ff;
|
|
--rm-sidebar-bg: #f2f3ff;
|
|
--rm-text: #131b2e;
|
|
--rm-text-muted: #777587;
|
|
--rm-divider: rgba(119, 117, 135, 0.14);
|
|
--rm-accent: #4f46e5;
|
|
--rm-accent-strong: #3525cd;
|
|
--rm-selection: rgba(79, 70, 229, 0.16);
|
|
--rm-hover: rgba(199, 196, 216, 0.14);
|
|
--rm-active: rgba(255, 255, 255, 0.85);
|
|
--rm-danger: #ba1a1a;
|
|
--rm-warn-bg: #fff8e6;
|
|
--rm-warn-text: #8a5a00;
|
|
--rm-shadow: 0 12px 40px -12px rgba(19, 27, 46, 0.18), 0 2px 8px rgba(19, 27, 46, 0.03);
|
|
--rm-inline-code-bg: #eaedff;
|
|
--rm-inline-code-text: #3525cd;
|
|
--rm-code-bg: #ffffff;
|
|
--rm-code-text: #334155;
|
|
--rm-code-font-size: 14px;
|
|
--rm-highlight-bg: rgba(255, 213, 0, 0.35);
|
|
}
|
|
|
|
:root:where([data-rm-color-mode="dark"]) {
|
|
color-scheme: dark;
|
|
--rm-bg: #1e2022;
|
|
--rm-text: rgba(255, 255, 255, 0.87);
|
|
--rm-text-muted: rgba(235, 235, 235, 0.6);
|
|
--rm-divider: rgba(84, 84, 84, 0.48);
|
|
--rm-accent: #42d392;
|
|
--rm-accent-strong: #42b883;
|
|
--rm-inline-code-bg: #2f2f2f;
|
|
--rm-inline-code-text: #f19a58;
|
|
--rm-code-bg: #2d2d2d;
|
|
--rm-code-text: #ccc;
|
|
--rm-highlight-bg: rgba(255, 213, 0, 0.28);
|
|
|
|
--rm-sidebar-bg: #191b1d;
|
|
--rm-hover: rgba(255, 255, 255, 0.06);
|
|
--rm-active: rgba(66, 211, 146, 0.16);
|
|
--rm-warn-bg: #2f2716;
|
|
--rm-warn-text: #f0c060;
|
|
--rm-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:where(:not([data-rm-color-mode])) {
|
|
color-scheme: dark;
|
|
--rm-bg: #1e2022;
|
|
--rm-text: rgba(255, 255, 255, 0.87);
|
|
--rm-text-muted: rgba(235, 235, 235, 0.6);
|
|
--rm-divider: rgba(84, 84, 84, 0.48);
|
|
--rm-accent: #42d392;
|
|
--rm-accent-strong: #42b883;
|
|
--rm-inline-code-bg: #2f2f2f;
|
|
--rm-inline-code-text: #f19a58;
|
|
--rm-code-bg: #2d2d2d;
|
|
--rm-code-text: #ccc;
|
|
--rm-highlight-bg: rgba(255, 213, 0, 0.28);
|
|
|
|
--rm-sidebar-bg: #191b1d;
|
|
--rm-hover: rgba(255, 255, 255, 0.06);
|
|
--rm-active: rgba(66, 211, 146, 0.16);
|
|
--rm-warn-bg: #2f2716;
|
|
--rm-warn-text: #f0c060;
|
|
--rm-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
background: var(--rm-bg);
|
|
color: var(--rm-text);
|
|
font-family: var(--rm-font-text);
|
|
}
|
|
|
|
.cm-editor {
|
|
font-size: var(--rm-font-size);
|
|
line-height: var(--rm-line-height);
|
|
background: var(--rm-bg);
|
|
color: var(--rm-text);
|
|
}
|
|
.cm-editor.cm-focused {
|
|
outline: none;
|
|
}
|
|
.cm-editor .cm-scroller {
|
|
font-family: var(--rm-font-editor, var(--rm-font-text));
|
|
}
|
|
.cm-editor .cm-content {
|
|
max-width: var(--rm-content-width);
|
|
margin: 0 auto;
|
|
padding: 32px 24px 40vh;
|
|
caret-color: var(--rm-accent);
|
|
}
|
|
.cm-editor .cm-content.cm-rm-source { font-family: var(--rm-font-mono); }
|
|
.cm-editor .cm-cursor {
|
|
border-left: 2px solid var(--rm-accent);
|
|
}
|
|
.cm-editor .cm-selectionBackground,
|
|
.cm-editor.cm-focused .cm-selectionBackground {
|
|
background: var(--rm-selection) !important;
|
|
}
|
|
|
|
/* 标题 */
|
|
.cm-line:is(.cm-rm-h1, .cm-rm-h2, .cm-rm-h3, .cm-rm-h4, .cm-rm-h5, .cm-rm-h6) { line-height: 1.4; padding-top: 1rem; padding-bottom: 0.5rem; }
|
|
.cm-line.cm-rm-h1 { font-size: 2.2em; line-height: 1.3; }
|
|
.cm-line.cm-rm-h2 { font-size: 1.75em; line-height: 1.225; border-bottom: 1px solid var(--rm-divider); }
|
|
.cm-line.cm-rm-h3 { font-size: 1.4em; line-height: 1.43; }
|
|
.cm-line.cm-rm-h4 { font-size: 1.2em; }
|
|
.cm-line.cm-rm-h5, .cm-line.cm-rm-h6 { font-size: 1em; }
|
|
|
|
/* Markdown 标记（激活行显示源码时） */
|
|
.cm-rm-markup,
|
|
.cm-rm-url { color: var(--rm-text-muted); }
|
|
.cm-rm-link,
|
|
.cm-rm-link .cm-rm-url { color: var(--rm-accent-strong); text-decoration: none; cursor: text; }
|
|
|
|
/* 行内代码 */
|
|
.cm-rm-inline-code {
|
|
font-family: var(--rm-font-mono);
|
|
font-size: 0.875em;
|
|
background: var(--rm-inline-code-bg);
|
|
color: var(--rm-inline-code-text);
|
|
padding: 0.15em 0.4em;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 代码块
|
|
* 背景画在 ::before 上并置于选区图层之下：若直接给 .cm-line 设背景，会盖住 CodeMirror 绘制的选区 */
|
|
.cm-line.cm-rm-code {
|
|
position: relative;
|
|
font-family: var(--rm-font-mono);
|
|
font-size: var(--rm-code-font-size);
|
|
line-height: 1.5;
|
|
color: var(--rm-code-text);
|
|
padding: 0 24px;
|
|
tab-size: 4;
|
|
}
|
|
.cm-line.cm-rm-code::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--rm-code-bg);
|
|
z-index: -10;
|
|
pointer-events: none;
|
|
}
|
|
.cm-line.cm-rm-code .cm-rm-mono { font-family: inherit; }
|
|
.cm-line.cm-rm-code-begin { padding-top: 10px; min-height: 26px; }
|
|
.cm-line.cm-rm-code-end { padding-bottom: 10px; }
|
|
.cm-line.cm-rm-code-begin::before { border-radius: 8px 8px 0 0; }
|
|
.cm-line.cm-rm-code-end::before { border-radius: 0 0 8px 8px; }
|
|
.cm-line.cm-rm-code-begin.cm-rm-code-end::before { border-radius: 8px; }
|
|
/* 围栏展开前后保持同一行高，语言标签与复制按钮不参与行高计算，避免代码内容跳动。 */
|
|
.cm-rm-code-header { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; user-select: none; }
|
|
.cm-line.cm-rm-code-begin .cm-rm-code-header { position: absolute; top: 6px; right: 12px; }
|
|
.cm-rm-code-lang { color: var(--rm-text-muted); font-size: 12px; line-height: 1; }
|
|
.cm-rm-code-copy {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--rm-text-muted);
|
|
cursor: pointer;
|
|
transition: color 0.15s, background-color 0.15s;
|
|
}
|
|
.cm-rm-code-copy:hover { color: var(--rm-accent-strong); background: var(--rm-hover); }
|
|
.cm-rm-code-copy.cm-rm-copied { color: #42d392; }
|
|
.cm-rm-code .cm-rm-markup { color: var(--rm-text-muted); }
|
|
|
|
/* 引用 */
|
|
.cm-line.cm-rm-quote {
|
|
border-left: 3px solid var(--rm-accent);
|
|
padding: 5px 15px;
|
|
background: color-mix(in srgb, var(--rm-accent) 4%, transparent);
|
|
}
|
|
|
|
/* 列表 */
|
|
.cm-rm-bullet { color: var(--rm-text-muted); display: inline-block; width: 1ch; }
|
|
.cm-rm-task { margin: 0 0.4em 0 0; vertical-align: -0.1em; accent-color: var(--rm-accent); cursor: pointer; }
|
|
|
|
/* 分隔线 */
|
|
.cm-rm-hr { display: inline-block; width: 100%; border-top: 1px solid var(--rm-divider); vertical-align: middle; }
|
|
|
|
/* 图片 */
|
|
.cm-rm-image { display: block; }
|
|
.cm-rm-image img { max-width: 100%; border-radius: 4px; }
|
|
.cm-rm-image-error { color: var(--rm-text-muted); font-style: italic; }
|
|
|
|
/* 表格：光标在表格内时以等宽源码显示，否则为可编辑的渲染表格 */
|
|
.cm-line.cm-rm-table { font-family: var(--rm-font-mono); font-size: 0.9em; }
|
|
.cm-rm-table-widget { padding: 2px 0 4px; width: fit-content; max-width: 100%; }
|
|
.cm-rm-table-scroll { overflow-x: auto; }
|
|
.cm-rm-table-widget table { border-collapse: collapse; font-size: 0.95em; line-height: 1.5; }
|
|
.cm-rm-table-widget th,
|
|
.cm-rm-table-widget td {
|
|
border: 1px solid var(--rm-divider);
|
|
padding: 6px 12px;
|
|
min-width: 3em;
|
|
cursor: text;
|
|
outline: none;
|
|
}
|
|
.cm-rm-table-widget th { font-weight: 600; text-align: left; background: var(--rm-inline-code-bg); }
|
|
.cm-rm-table-widget [contenteditable] { box-shadow: inset 0 0 0 2px var(--rm-accent); font-family: var(--rm-font-mono); font-size: 0.9em; }
|
|
.cm-rm-table-widget code { font-family: var(--rm-font-mono); font-size: 0.875em; background: var(--rm-inline-code-bg); color: var(--rm-inline-code-text); padding: 0.1em 0.35em; border-radius: 4px; }
|
|
.cm-rm-table-widget a { color: var(--rm-accent-strong); }
|
|
/* 工具栏占据表格上方的固定空间，只切换可见性，不遮挡表格也不引起跳动 */
|
|
.cm-rm-table-toolbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 6px;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.cm-rm-table-widget:hover .cm-rm-table-toolbar,
|
|
.cm-rm-table-widget:focus-within .cm-rm-table-toolbar { visibility: visible; opacity: 1; }
|
|
.cm-rm-table-tools {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px;
|
|
border: 1px solid var(--rm-divider);
|
|
border-radius: 8px;
|
|
background: var(--rm-bg);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.cm-rm-table-tools button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
height: 26px;
|
|
padding: 0 8px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--rm-text-muted);
|
|
font: 12px/1 var(--rm-font-text);
|
|
cursor: pointer;
|
|
transition: color 0.15s, background-color 0.15s;
|
|
}
|
|
.cm-rm-table-tools button:hover { color: var(--rm-accent-strong); background: var(--rm-selection); }
|
|
.cm-rm-table-tools button.cm-rm-danger:hover { color: #e5484d; background: rgba(229, 72, 77, 0.1); }
|
|
.cm-rm-table-tools svg { flex: none; }
|
|
.cm-rm-table-tools .cm-rm-sep { width: 1px; height: 16px; margin: 0 2px; background: var(--rm-divider); }
|
|
.cm-rm-image { cursor: pointer; }
|
|
|
|
@media (max-width: 640px) {
|
|
.cm-editor .cm-content { padding: 16px 16px 40vh; }
|
|
/* 触屏没有悬停，工具栏常显，按钮加大触控热区 */
|
|
.cm-rm-table-toolbar { visibility: visible; opacity: 1; }
|
|
.cm-rm-table-tools button { height: 36px; padding: 0 10px; }
|
|
.cm-rm-code-copy { width: 36px; height: 36px; }
|
|
.cm-line.cm-rm-code { padding-left: 12px; padding-right: 12px; }
|
|
.cm-line.cm-rm-code-begin { min-height: 36px; }
|
|
}
|
|
|
|
/* ---- Typora 扩展语法 ---- */
|
|
.cm-rm-highlight,
|
|
.cm-rm-table-widget mark { background: var(--rm-highlight-bg); color: inherit; border-radius: 2px; padding: 0 1px; }
|
|
.cm-rm-sup { vertical-align: super; font-size: 0.75em; line-height: 0; }
|
|
.cm-rm-sub { vertical-align: sub; font-size: 0.75em; line-height: 0; }
|
|
.cm-rm-placeholder { color: var(--rm-text-muted); font-style: italic; }
|
|
|
|
.cm-rm-math { cursor: pointer; }
|
|
.cm-rm-math-block { display: block; padding: 8px 0; text-align: center; overflow-x: auto; overflow-y: hidden; cursor: pointer; }
|
|
.cm-rm-math-block .katex-display { margin: 0; }
|
|
.cm-line.cm-rm-math-source { font-family: var(--rm-font-mono); font-size: 0.9em; color: var(--rm-text-muted); }
|
|
/* 编辑时显示在源码下方的预览 */
|
|
.cm-rm-preview { margin: 4px 0 8px; padding: 8px 12px; border: 1px dashed var(--rm-divider); border-radius: 6px; cursor: default; }
|
|
|
|
.cm-rm-code-render { display: block; padding: 8px 0; overflow-x: auto; cursor: pointer; }
|
|
.cm-rm-mermaid { display: block; padding: 8px 0; text-align: center; overflow-x: auto; cursor: pointer; color: var(--rm-text-muted); }
|
|
.cm-rm-mermaid svg { max-width: 100%; height: auto; }
|
|
.cm-rm-render-error {
|
|
margin: 0;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
background: rgba(229, 72, 77, 0.08);
|
|
color: #e5484d;
|
|
font-family: var(--rm-font-mono);
|
|
font-size: 12px;
|
|
text-align: left;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.cm-rm-emoji { cursor: text; }
|
|
|
|
.cm-rm-footnote-ref { color: var(--rm-accent-strong); font-size: 0.75em; cursor: pointer; padding: 0 1px; }
|
|
.cm-line.cm-rm-footnote { font-size: 0.9em; color: var(--rm-text-muted); }
|
|
.cm-rm-footnote-label { color: var(--rm-accent-strong); }
|
|
|
|
.cm-rm-toc { display: block; padding: 8px 12px; border-left: 3px solid var(--rm-divider); cursor: pointer; }
|
|
.cm-rm-toc-item { display: block; color: var(--rm-accent-strong); line-height: 1.8; cursor: pointer; text-decoration: none; }
|
|
.cm-rm-toc-item:hover { text-decoration: underline; }
|
|
|
|
.cm-line.cm-rm-frontmatter { font-family: var(--rm-font-mono); font-size: 0.85em; color: var(--rm-text-muted); background: var(--rm-inline-code-bg); padding: 0 12px; }
|
|
.cm-line.cm-rm-frontmatter-begin { border-radius: 6px 6px 0 0; padding-top: 4px; }
|
|
.cm-line.cm-rm-frontmatter-end { border-radius: 0 0 6px 6px; padding-bottom: 4px; }
|
|
|
|
/* 浅色编辑排版与分享共用同一套 Prism token 颜色。 */
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) .token { text-shadow: none; background: none; }
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.comment,.prolog,.doctype,.cdata) { color: #94a3b8; }
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.punctuation,.operator) { color: #64748b; }
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.keyword,.atrule,.tag) { color: #7c3aed; }
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.string,.char,.attr-value,.builtin) { color: #059669; }
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.function,.class-name) { color: #2563eb; }
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.number,.boolean,.constant) { color: #d97706; }
|
|
.cm-line:is(.cm-rm-h1,.cm-rm-h2,.cm-rm-h3,.cm-rm-h4,.cm-rm-h5,.cm-rm-h6) { font-family: var(--rm-font-heading); font-weight: 600; }
|
|
.cm-line.cm-rm-h1 { font-size: 2.125em; line-height: 1.4; }
|
|
.cm-line.cm-rm-h2 { font-size: 1.5em; line-height: 1.5; }
|
|
.cm-editor .cm-content { padding-top: 36px; }
|
|
.cm-rm-code-lang { font-family: var(--rm-font-mono); }
|
|
.cm-line.cm-rm-code-begin::before { border-top: 1px solid var(--rm-divider); }
|
|
.cm-line.cm-rm-code-end::before { border-bottom: 1px solid var(--rm-divider); }
|
|
.cm-line.cm-rm-paragraph-end { padding-bottom: var(--rm-paragraph-spacing); }
|
|
@media (max-width: 767px) {
|
|
:root:not([data-rm-color-mode="dark"]) { --rm-code-bg: #283044; --rm-code-text: #eef0ff; }
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.keyword,.atrule,.tag) { color: #c4b5fd; }
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.string,.char,.attr-value,.builtin) { color: #6ee7b7; }
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.function,.class-name) { color: #93c5fd; }
|
|
:root:not([data-rm-color-mode="dark"]) :is(.cm-rm-code, .rm-share-content pre) :is(.number,.boolean,.constant) { color: #fcd34d; }
|
|
.cm-line.cm-rm-h1 { font-size: 1.75em; }
|
|
}
|