mirror of
https://github.com/darkings/Obsidian-MonokaiSyntax.git
synced 2026-07-22 04:40:26 +00:00
完善 Monokai 主题打磨基线
This commit is contained in:
Darkings
parent
48ce735da3
commit
dc2c4c5c64
20 changed files with 1976 additions and 604 deletions
854
dist/theme.css
vendored
854
dist/theme.css
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -69,34 +69,10 @@ function normalizeFileNameSelector(fileName) {
|
|||
];
|
||||
}
|
||||
|
||||
function normalizeDirectoryNameSelector(directoryName) {
|
||||
const escaped = cssAttribute(directoryName);
|
||||
return [
|
||||
`.nav-folder-title[data-path="${escaped}"]`,
|
||||
`.nav-folder-title[data-path$="/${escaped}"]`,
|
||||
`.nav-folder[data-path="${escaped}"] > .nav-folder-title`,
|
||||
`.nav-folder[data-path$="/${escaped}"] > .nav-folder-title`,
|
||||
];
|
||||
}
|
||||
|
||||
function normalizeDirectoryPrefixSelector(directoryPrefix) {
|
||||
const escaped = cssAttribute(directoryPrefix);
|
||||
return [
|
||||
`.nav-folder-title[data-path^="${escaped}"]`,
|
||||
`.nav-folder-title[data-path*="/${escaped}"]`,
|
||||
`.nav-folder[data-path^="${escaped}"] > .nav-folder-title`,
|
||||
`.nav-folder[data-path*="/${escaped}"] > .nav-folder-title`,
|
||||
];
|
||||
}
|
||||
|
||||
function iconRule(selectors, definition) {
|
||||
return `${selectors.join(",\n")} {\n --monokai-file-icon-color: ${definition.fontColor};\n content: "${cssContent(definition.fontCharacter)}";\n}\n`;
|
||||
}
|
||||
|
||||
function directoryIconRule(selectors, definition) {
|
||||
return `${selectors.join(",\n")} {\n --monokai-folder-icon-content: "${cssContent(definition.fontCharacter)}";\n --monokai-folder-icon-color: ${definition.fontColor};\n}\n`;
|
||||
}
|
||||
|
||||
function sortedEntries(record) {
|
||||
return Object.entries(record ?? {}).sort(([left], [right]) =>
|
||||
left.localeCompare(right, "en", { sensitivity: "variant" }),
|
||||
|
|
@ -183,20 +159,6 @@ const obsidianFileNames = {
|
|||
"TODO.md": "todo",
|
||||
"todo.md": "todo",
|
||||
};
|
||||
const obsidianDirectoryNames = {
|
||||
assets: "image-accent3",
|
||||
examples: "callout-example",
|
||||
exercises: "todo",
|
||||
labs: "test-accent5",
|
||||
leetcode: "api",
|
||||
notes: "readme",
|
||||
src: "source-accent3",
|
||||
tests: "test-accent5",
|
||||
};
|
||||
const obsidianDirectoryPrefixes = {
|
||||
Day: "markdown-accent4",
|
||||
day: "markdown-accent4",
|
||||
};
|
||||
|
||||
const lines = [
|
||||
"// stylelint-disable",
|
||||
|
|
@ -250,16 +212,6 @@ for (const [fileName, iconId] of sortedEntries(obsidianFileNames)) {
|
|||
lines.push(iconRule(normalizeFileNameSelector(fileName), definition));
|
||||
}
|
||||
|
||||
for (const [directoryName, iconId] of sortedEntries(obsidianDirectoryNames)) {
|
||||
const definition = iconByClass(theme, iconId);
|
||||
lines.push(directoryIconRule(normalizeDirectoryNameSelector(directoryName), definition));
|
||||
}
|
||||
|
||||
for (const [directoryPrefix, iconId] of sortedEntries(obsidianDirectoryPrefixes)) {
|
||||
const definition = iconByClass(theme, iconId);
|
||||
lines.push(directoryIconRule(normalizeDirectoryPrefixSelector(directoryPrefix), definition));
|
||||
}
|
||||
|
||||
lines.push(iconRule([
|
||||
'.nav-file-title[data-path^="Bug_"][data-path$=".md"]::before',
|
||||
'.nav-file-title[data-path*="/Bug_"][data-path$=".md"]::before',
|
||||
|
|
|
|||
|
|
@ -45,26 +45,16 @@ const checks = [
|
|||
["Bug_ 开头文档规则", /\[data-path\*="\/Bug_"\]\[data-path\$="\.md"\]::before/.test(files.generated)],
|
||||
["一级文件夹保持 Obsidian 默认文件夹图标", !/\.nav-folder\.mod-root\s*>\s*\.nav-folder-children\s*>\s*\.nav-folder\s*>\s*\.nav-folder-title\s+\.nav-folder-title-content::before/.test(files.wrapper)],
|
||||
[
|
||||
"学习目录图标规则由生成器输出为文件夹语义变量",
|
||||
[
|
||||
"labs",
|
||||
"examples",
|
||||
"exercises",
|
||||
"leetcode",
|
||||
"notes",
|
||||
"assets",
|
||||
"src",
|
||||
"tests",
|
||||
].every((name) => new RegExp(`\\.nav-folder-title\\[data-path="${name}"\\],[\\s\\S]*?\\.nav-folder-title\\[data-path\\$="/${name}"\\][\\s\\S]*?--monokai-folder-icon-content:[\\s\\S]*?--monokai-folder-icon-color:`).test(files.generated))
|
||||
&& /\.nav-folder-title\[data-path\^="day"\],[\s\S]*?\.nav-folder-title\[data-path\*="\/day"\][\s\S]*?--monokai-folder-icon-content:[\s\S]*?--monokai-folder-icon-color:/.test(files.generated)
|
||||
&& /\.nav-folder-title\[data-path\^="Day"\],[\s\S]*?\.nav-folder-title\[data-path\*="\/Day"\][\s\S]*?--monokai-folder-icon-content:[\s\S]*?--monokai-folder-icon-color:/.test(files.generated),
|
||||
"文件夹不再按名称或前缀生成专属图标",
|
||||
!/\.nav-folder-title\[data-path/.test(files.generated)
|
||||
&& !/--monokai-folder-icon-content/.test(files.generated)
|
||||
&& !/--monokai-folder-icon-color/.test(files.generated),
|
||||
],
|
||||
[
|
||||
"二级及更深层文件夹接收自定义文件夹语义变量",
|
||||
/\.nav-folder-title\[data-path\$="\//.test(files.generated)
|
||||
&& /\.nav-folder\[data-path\$="\//.test(files.generated)
|
||||
&& /\.nav-folder-title\[data-path\*="\//.test(files.generated)
|
||||
&& /\.nav-folder\[data-path\*="\//.test(files.generated),
|
||||
"图片文件扩展名仍使用图片图标",
|
||||
/\[data-path\$="\.png"\]::before[\s\S]*?content:\s*"\\[0-9a-f]{4}";/i.test(files.generated)
|
||||
&& /\[data-path\$="\.jpg"\]::before[\s\S]*?content:\s*"\\[0-9a-f]{4}";/i.test(files.generated)
|
||||
&& /\[data-path\$="\.jpeg"\]::before[\s\S]*?content:\s*"\\[0-9a-f]{4}";/i.test(files.generated),
|
||||
],
|
||||
[
|
||||
"concepts 目录不使用专属颜色并回退到普通文件夹图标",
|
||||
|
|
|
|||
|
|
@ -435,7 +435,7 @@ const checks = [
|
|||
&& /--monokai-settings-item-border:/.test(files.modals)
|
||||
&& /--monokai-settings-selected-background:/.test(files.modals)
|
||||
&& /body\.theme-dark[\s\S]*?--monokai-settings-item-background:\s*rgb\(248 248 242 \/ 4%\);/.test(files.modals)
|
||||
&& /\.modal\.mod-settings[\s\S]*?\.setting-item[\s\S]*?background-color:\s*var\(--monokai-settings-item-background\);/.test(files.modals)
|
||||
&& /\.modal\.mod-settings[\s\S]*?\.setting-item[\s\S]*?background-color:\s*transparent;/.test(files.modals)
|
||||
&& /\.modal\.mod-settings[\s\S]*?\.setting-item-description,[\s\S]*?\.setting-item-info[\s\S]*?color:\s*var\(--monokai-settings-item-description\);/.test(files.modals)
|
||||
&& /\.style-settings-container[\s\S]*?\.setting-item[\s\S]*?background-color:\s*var\(--monokai-settings-item-background\);/.test(files.modals)
|
||||
&& /\.style-settings-container[\s\S]*?\.setting-item\.is-selected,[\s\S]*?\.setting-item:hover[\s\S]*?background-color:\s*var\(--monokai-settings-selected-background\);/.test(files.modals)
|
||||
|
|
|
|||
|
|
@ -1,9 +1,35 @@
|
|||
/*
|
||||
@settings
|
||||
|
||||
name: Monokai Syntax 密度
|
||||
name: Monokai Syntax 外观与密度
|
||||
id: monokai-syntax-density
|
||||
settings:
|
||||
-
|
||||
id: monokai-syntax-appearance-heading
|
||||
title: Appearance
|
||||
type: heading
|
||||
level: 2
|
||||
-
|
||||
id: monokai-syntax-media-border-style
|
||||
title: 媒体边框
|
||||
type: class-select
|
||||
allowEmpty: false
|
||||
default: monokai-syntax-media-border-thin
|
||||
options:
|
||||
-
|
||||
label: 细边框
|
||||
value: monokai-syntax-media-border-thin
|
||||
-
|
||||
label: 关闭
|
||||
value: monokai-syntax-media-border-none
|
||||
-
|
||||
label: 卡片式
|
||||
value: monokai-syntax-media-border-card
|
||||
-
|
||||
id: monokai-syntax-density-heading
|
||||
title: Density
|
||||
type: heading
|
||||
level: 2
|
||||
-
|
||||
id: monokai-syntax-compact
|
||||
title: 紧凑模式
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
@settings
|
||||
|
||||
name: Monokai Syntax 图标
|
||||
name: Monokai Syntax File Explorer
|
||||
id: monokai-syntax-icons
|
||||
settings:
|
||||
-
|
||||
|
|
|
|||
|
|
@ -4,6 +4,11 @@
|
|||
name: Monokai Syntax 排版
|
||||
id: monokai-syntax-typography
|
||||
settings:
|
||||
-
|
||||
id: monokai-syntax-markdown-reading-heading
|
||||
title: Markdown Reading
|
||||
type: heading
|
||||
level: 2
|
||||
-
|
||||
id: monokai-readable-line-width
|
||||
title: 可读行宽
|
||||
|
|
@ -22,6 +27,11 @@ settings:
|
|||
max: 20
|
||||
step: 1
|
||||
format: px
|
||||
-
|
||||
id: monokai-syntax-editor-heading
|
||||
title: Editor
|
||||
type: heading
|
||||
level: 2
|
||||
-
|
||||
id: monokai-code-font-size
|
||||
title: 代码字号
|
||||
|
|
@ -56,6 +66,19 @@ settings:
|
|||
max: 2.2
|
||||
step: 0.05
|
||||
format: rem
|
||||
-
|
||||
id: monokai-syntax-heading-color-mode
|
||||
title: 标题色彩模式
|
||||
type: class-select
|
||||
allowEmpty: false
|
||||
default: monokai-syntax-heading-full-spectrum
|
||||
options:
|
||||
-
|
||||
label: 全光谱
|
||||
value: monokai-syntax-heading-full-spectrum
|
||||
-
|
||||
label: 低彩尾部
|
||||
value: monokai-syntax-heading-muted-tail
|
||||
-
|
||||
id: monokai-syntax-heading-accents
|
||||
title: 标题左侧色条
|
||||
|
|
|
|||
|
|
@ -1,9 +1,26 @@
|
|||
/*
|
||||
@settings
|
||||
|
||||
name: Monokai Syntax 强调色
|
||||
name: Monokai Syntax Code Blocks 与强调色
|
||||
id: monokai-syntax-accents
|
||||
settings:
|
||||
-
|
||||
id: monokai-syntax-code-blocks-heading
|
||||
title: Code Blocks
|
||||
type: heading
|
||||
level: 2
|
||||
-
|
||||
id: monokai-code-background
|
||||
title: 代码背景
|
||||
type: variable-color
|
||||
opacity: true
|
||||
format: hex
|
||||
default: '#1e1f1c'
|
||||
-
|
||||
id: monokai-syntax-accents-heading
|
||||
title: Accents
|
||||
type: heading
|
||||
level: 2
|
||||
-
|
||||
id: monokai-syntax-accent-preset
|
||||
title: 强调色预设
|
||||
|
|
@ -45,11 +62,4 @@ settings:
|
|||
opacity: true
|
||||
format: rgb
|
||||
default: 'rgb(230 219 116 / 28%)'
|
||||
-
|
||||
id: monokai-code-background
|
||||
title: 代码背景
|
||||
type: variable-color
|
||||
opacity: true
|
||||
format: hex
|
||||
default: '#1e1f1c'
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@
|
|||
--monokai-highlight-text: var(--text-normal);
|
||||
--monokai-scrollbar-active-background: var(--background-modifier-active-hover);
|
||||
--monokai-selection-foreground: var(--text-normal);
|
||||
--monokai-selection-background: var(--background-modifier-active-hover);
|
||||
--monokai-selection-muted-background: var(--background-modifier-hover);
|
||||
--monokai-selection-border-color: var(--interactive-accent);
|
||||
--monokai-light-tool-background: var(--background-secondary);
|
||||
--monokai-tab-active-border-color: var(--interactive-accent);
|
||||
}
|
||||
|
||||
|
|
@ -28,6 +32,9 @@
|
|||
--monokai-default-success: #{$color-pro-green};
|
||||
--monokai-default-warning: rgb(255 216 102 / 24%);
|
||||
--monokai-default-code-background: #{$color-pro-background-secondary};
|
||||
--monokai-selection-background: rgb(120 220 232 / 18%);
|
||||
--monokai-selection-muted-background: rgb(252 252 250 / 6%);
|
||||
--monokai-selection-border-color: #{$color-pro-cyan};
|
||||
--text-accent-hover: #{$color-pro-magenta};
|
||||
--interactive-accent: #{$color-pro-magenta};
|
||||
--interactive-accent-hover: #{$color-pro-magenta};
|
||||
|
|
@ -77,6 +84,9 @@
|
|||
--code-regex: #{$color-pro-yellow};
|
||||
--code-meta: #{$color-pro-text-faint};
|
||||
--code-error: #{$color-pro-magenta};
|
||||
--code-variable: #{$color-pro-text-normal};
|
||||
--code-parameter: #{$color-pro-orange};
|
||||
--code-module: #{$color-pro-cyan};
|
||||
--ribbon-background: #{$color-pro-background-secondary};
|
||||
--ribbon-background-collapsed: #{$color-pro-background-secondary};
|
||||
--nav-item-background-hover: #{$color-pro-hover};
|
||||
|
|
@ -104,7 +114,11 @@
|
|||
--monokai-default-link: #{$color-light-cyan};
|
||||
--monokai-default-success: #{$color-light-green};
|
||||
--monokai-default-warning: rgb(232 179 10 / 24%);
|
||||
--monokai-default-code-background: #{$color-light-background-secondary};
|
||||
--monokai-default-code-background: #ebe8df;
|
||||
--monokai-selection-background: rgb(20 116 138 / 16%);
|
||||
--monokai-selection-muted-background: rgb(52 52 52 / 6%);
|
||||
--monokai-selection-border-color: #{$color-light-cyan};
|
||||
--monokai-light-tool-background: #f5f3ec;
|
||||
--text-accent-hover: #{$color-light-red-soft};
|
||||
--interactive-accent: #{$color-light-magenta};
|
||||
--interactive-accent-hover: #{$color-light-red-soft};
|
||||
|
|
@ -154,6 +168,9 @@
|
|||
--code-regex: #{$color-light-yellow};
|
||||
--code-meta: #{$color-light-text-faint};
|
||||
--code-error: #{$color-light-magenta};
|
||||
--code-variable: #{$color-light-text-normal};
|
||||
--code-parameter: #{$color-light-orange};
|
||||
--code-module: #{$color-light-cyan};
|
||||
--ribbon-background: #{$color-light-background-secondary};
|
||||
--ribbon-background-collapsed: #{$color-light-background-secondary};
|
||||
--nav-item-background-hover: #{$color-light-hover};
|
||||
|
|
@ -188,6 +205,10 @@
|
|||
align-items: center;
|
||||
color: var(--nav-item-color);
|
||||
border-radius: var(--radius-s);
|
||||
transition:
|
||||
color 120ms ease,
|
||||
background-color 120ms ease,
|
||||
box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.nav-file-title:hover,
|
||||
|
|
@ -198,7 +219,15 @@
|
|||
|
||||
.nav-file-title.is-active {
|
||||
color: var(--monokai-selection-foreground, var(--nav-item-color-active));
|
||||
background-color: var(--nav-item-background-active);
|
||||
background-color: var(--monokai-selection-background, var(--nav-item-background-active));
|
||||
box-shadow: inset 2px 0 0 var(--monokai-selection-border-color);
|
||||
}
|
||||
|
||||
.nav-folder-title.is-active,
|
||||
.tree-item-self.is-active {
|
||||
color: var(--monokai-selection-foreground, var(--nav-item-color-active));
|
||||
background-color: var(--monokai-selection-background, var(--nav-item-background-active));
|
||||
box-shadow: inset 2px 0 0 var(--monokai-selection-border-color);
|
||||
}
|
||||
|
||||
.nav-folder-collapse-indicator,
|
||||
|
|
@ -287,7 +316,8 @@ input[type="checkbox"]:checked {
|
|||
.tag-pane-tag.is-active,
|
||||
.bookmark.is-active {
|
||||
color: var(--monokai-selection-foreground, var(--text-normal));
|
||||
background-color: var(--nav-item-background-active);
|
||||
background-color: var(--monokai-selection-background, var(--nav-item-background-active));
|
||||
box-shadow: inset 2px 0 0 var(--monokai-selection-border-color);
|
||||
}
|
||||
|
||||
.tag {
|
||||
|
|
@ -305,3 +335,8 @@ input[type="checkbox"]:checked {
|
|||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: var(--monokai-scrollbar-active-background);
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--monokai-selection-foreground);
|
||||
background-color: var(--monokai-selection-background);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@ $color-pro-yellow: #ffd866;
|
|||
$color-pro-green: #a9dc76;
|
||||
$color-pro-cyan: #78dce8;
|
||||
$color-pro-purple: #ab9df2;
|
||||
$color-light-background-primary: #fdf9f3;
|
||||
$color-light-background-secondary: #f5f0e6;
|
||||
$color-light-text-normal: #3d3d3d;
|
||||
$color-light-text-muted: #666666;
|
||||
$color-light-text-faint: #7a7369;
|
||||
$color-light-border: #d8d0c2;
|
||||
$color-light-hover: #eee6d8;
|
||||
$color-light-active: #e5dccd;
|
||||
$color-light-background-primary: #faf8f2;
|
||||
$color-light-background-secondary: #f0eee7;
|
||||
$color-light-text-normal: #343434;
|
||||
$color-light-text-muted: #606060;
|
||||
$color-light-text-faint: #77736c;
|
||||
$color-light-border: #d2cec4;
|
||||
$color-light-hover: #e8e5dc;
|
||||
$color-light-active: #ddd9cf;
|
||||
$color-light-magenta: #e14775;
|
||||
$color-light-red-soft: #f63d77;
|
||||
$color-light-orange: #e16032;
|
||||
|
|
|
|||
|
|
@ -31,8 +31,10 @@
|
|||
--monokai-footnote-marker-color: var(--text-faint);
|
||||
--monokai-footnote-font-size: 0.85em;
|
||||
--monokai-media-radius: var(--radius-m);
|
||||
--monokai-media-border-width: 1px;
|
||||
--monokai-media-border-color: var(--background-modifier-border);
|
||||
--monokai-media-background: var(--background-secondary);
|
||||
--monokai-media-shadow: none;
|
||||
--monokai-embed-padding: #{$spacing-3};
|
||||
--monokai-plugin-surface-background: var(--background-secondary);
|
||||
--monokai-plugin-surface-border: var(--background-modifier-border);
|
||||
|
|
@ -62,6 +64,8 @@
|
|||
--monokai-table-api-required-color: var(--text-accent);
|
||||
--monokai-codeblock-background: var(--code-background);
|
||||
--monokai-codeblock-border-color: var(--background-modifier-border);
|
||||
--monokai-codeblock-header-background: var(--background-secondary);
|
||||
--monokai-codeblock-header-border-color: var(--background-modifier-border);
|
||||
--monokai-codeblock-radius: var(--radius-m);
|
||||
--monokai-codeblock-header-height: 1.75rem;
|
||||
--monokai-codeblock-margin-block: #{$spacing-4};
|
||||
|
|
@ -74,6 +78,9 @@
|
|||
--monokai-codeblock-active-line-background: var(--background-modifier-hover);
|
||||
--monokai-codeblock-active-line-border: var(--interactive-accent);
|
||||
--monokai-codeblock-selection-background: rgb(120 220 232 / 32%);
|
||||
--monokai-code-variable: var(--code-variable, var(--code-normal));
|
||||
--monokai-code-parameter: var(--code-parameter, var(--code-operator));
|
||||
--monokai-code-module: var(--code-module, var(--code-property));
|
||||
--monokai-editor-active-line-background: rgb(248 248 242 / 5%);
|
||||
--monokai-editor-selection-background: rgb(102 217 239 / 30%);
|
||||
--monokai-editor-cursor-color: var(--interactive-accent);
|
||||
|
|
@ -98,33 +105,34 @@ body.theme-dark {
|
|||
--monokai-blockquote-border: #{$color-pro-yellow};
|
||||
--monokai-callout-note-bg: rgb(120 220 232 / 12%);
|
||||
--monokai-callout-note-border: #{$color-pro-cyan};
|
||||
--monokai-callout-abstract-bg: rgb(171 157 242 / 12%);
|
||||
--monokai-callout-abstract-bg: rgb(171 157 242 / 8%);
|
||||
--monokai-callout-abstract-border: #{$color-pro-purple};
|
||||
--monokai-callout-info-bg: rgb(120 220 232 / 12%);
|
||||
--monokai-callout-info-bg: rgb(120 220 232 / 8%);
|
||||
--monokai-callout-info-border: #{$color-pro-cyan};
|
||||
--monokai-callout-todo-bg: rgb(255 216 102 / 12%);
|
||||
--monokai-callout-todo-bg: rgb(255 216 102 / 8%);
|
||||
--monokai-callout-todo-border: #{$color-pro-yellow};
|
||||
--monokai-callout-tip-bg: rgb(169 220 118 / 12%);
|
||||
--monokai-callout-tip-bg: rgb(169 220 118 / 8%);
|
||||
--monokai-callout-tip-border: #{$color-pro-green};
|
||||
--monokai-callout-question-bg: rgb(171 157 242 / 12%);
|
||||
--monokai-callout-question-bg: rgb(171 157 242 / 8%);
|
||||
--monokai-callout-question-border: #{$color-pro-purple};
|
||||
--monokai-callout-warning-bg: rgb(252 152 103 / 12%);
|
||||
--monokai-callout-warning-bg: rgb(252 152 103 / 8%);
|
||||
--monokai-callout-warning-border: #{$color-pro-orange};
|
||||
--monokai-callout-error-bg: rgb(255 97 136 / 12%);
|
||||
--monokai-callout-error-bg: rgb(255 97 136 / 8%);
|
||||
--monokai-callout-error-border: #{$color-pro-magenta};
|
||||
--monokai-callout-failure-bg: rgb(255 97 136 / 12%);
|
||||
--monokai-callout-failure-bg: rgb(255 97 136 / 8%);
|
||||
--monokai-callout-failure-border: #{$color-pro-magenta};
|
||||
--monokai-callout-bug-bg: rgb(255 97 136 / 12%);
|
||||
--monokai-callout-bug-bg: rgb(255 97 136 / 8%);
|
||||
--monokai-callout-bug-border: #{$color-pro-magenta};
|
||||
--monokai-callout-success-bg: rgb(169 220 118 / 12%);
|
||||
--monokai-callout-success-bg: rgb(169 220 118 / 8%);
|
||||
--monokai-callout-success-border: #{$color-pro-green};
|
||||
--monokai-callout-example-bg: rgb(252 152 103 / 12%);
|
||||
--monokai-callout-example-bg: rgb(252 152 103 / 8%);
|
||||
--monokai-callout-example-border: #{$color-pro-orange};
|
||||
--monokai-callout-quote-bg: rgb(252 252 250 / 8%);
|
||||
--monokai-callout-quote-border: #{$color-pro-text-faint};
|
||||
--monokai-inline-code-color: #{$color-pro-green};
|
||||
--monokai-inline-code-background: var(--code-background);
|
||||
--monokai-codeblock-background: #{$color-pro-background-secondary};
|
||||
--monokai-codeblock-header-background: #272329;
|
||||
--monokai-codeblock-border-color: rgb(252 252 250 / 14%);
|
||||
--monokai-codeblock-active-line-background: #{$color-pro-hover};
|
||||
--monokai-codeblock-active-line-border: #{$color-pro-cyan};
|
||||
|
|
@ -148,29 +156,29 @@ body.theme-light {
|
|||
--monokai-heading-weight: 700;
|
||||
--blockquote-border-color: #{$color-light-blockquote-border};
|
||||
--monokai-blockquote-border: #{$color-light-blockquote-border};
|
||||
--monokai-callout-note-bg: rgb(20 116 138 / 14%);
|
||||
--monokai-callout-note-bg: rgb(20 116 138 / 9%);
|
||||
--monokai-callout-note-border: #14748a;
|
||||
--monokai-callout-abstract-bg: rgb(107 83 148 / 13%);
|
||||
--monokai-callout-abstract-bg: rgb(107 83 148 / 9%);
|
||||
--monokai-callout-abstract-border: #6b5394;
|
||||
--monokai-callout-info-bg: rgb(20 116 138 / 14%);
|
||||
--monokai-callout-info-bg: rgb(20 116 138 / 9%);
|
||||
--monokai-callout-info-border: #14748a;
|
||||
--monokai-callout-todo-bg: rgb(151 116 0 / 14%);
|
||||
--monokai-callout-todo-bg: rgb(151 116 0 / 9%);
|
||||
--monokai-callout-todo-border: #977400;
|
||||
--monokai-callout-tip-bg: rgb(38 157 105 / 14%);
|
||||
--monokai-callout-tip-bg: rgb(38 157 105 / 9%);
|
||||
--monokai-callout-tip-border: #269d69;
|
||||
--monokai-callout-question-bg: rgb(107 83 148 / 13%);
|
||||
--monokai-callout-question-bg: rgb(107 83 148 / 9%);
|
||||
--monokai-callout-question-border: #6b5394;
|
||||
--monokai-callout-warning-bg: rgb(225 96 50 / 14%);
|
||||
--monokai-callout-warning-bg: rgb(225 96 50 / 9%);
|
||||
--monokai-callout-warning-border: #e16032;
|
||||
--monokai-callout-error-bg: rgb(225 71 117 / 14%);
|
||||
--monokai-callout-error-bg: rgb(225 71 117 / 9%);
|
||||
--monokai-callout-error-border: #e14775;
|
||||
--monokai-callout-failure-bg: rgb(225 71 117 / 14%);
|
||||
--monokai-callout-failure-bg: rgb(225 71 117 / 9%);
|
||||
--monokai-callout-failure-border: #e14775;
|
||||
--monokai-callout-bug-bg: rgb(225 71 117 / 14%);
|
||||
--monokai-callout-bug-bg: rgb(225 71 117 / 9%);
|
||||
--monokai-callout-bug-border: #e14775;
|
||||
--monokai-callout-success-bg: rgb(38 157 105 / 14%);
|
||||
--monokai-callout-success-bg: rgb(38 157 105 / 9%);
|
||||
--monokai-callout-success-border: #269d69;
|
||||
--monokai-callout-example-bg: rgb(225 96 50 / 14%);
|
||||
--monokai-callout-example-bg: rgb(225 96 50 / 9%);
|
||||
--monokai-callout-example-border: #e16032;
|
||||
--monokai-callout-quote-bg: rgb(61 61 61 / 8%);
|
||||
--monokai-callout-quote-border: #6f6f6f;
|
||||
|
|
@ -178,6 +186,7 @@ body.theme-light {
|
|||
--monokai-inline-code-background: rgb(20 116 138 / 16%);
|
||||
--monokai-inline-code-font-weight: 600;
|
||||
--monokai-codeblock-background: #eee6d8;
|
||||
--monokai-codeblock-header-background: #f5f3ec;
|
||||
--monokai-codeblock-border-color: #c6b9a6;
|
||||
--monokai-codeblock-active-line-background: #e3d4bf;
|
||||
--monokai-codeblock-active-line-border: #{$color-light-cyan};
|
||||
|
|
@ -346,23 +355,34 @@ body.theme-light {
|
|||
border: 1px solid var(--monokai-table-border);
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
margin-block: var(--monokai-paragraph-spacing);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--monokai-table-border);
|
||||
border: 0;
|
||||
border-block-end: 1px solid var(--monokai-table-border);
|
||||
padding: var(--monokai-table-cell-padding);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th:not(:last-child),
|
||||
td:not(:last-child) {
|
||||
border-inline-end: 1px solid var(--monokai-table-border);
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--text-normal);
|
||||
background-color: var(--monokai-table-header-background);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-block-end: 0;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--monokai-table-row-alt-background);
|
||||
}
|
||||
|
|
@ -409,14 +429,26 @@ body.theme-light {
|
|||
line-height: var(--monokai-codeblock-line-height);
|
||||
margin-block: var(--monokai-codeblock-margin-block);
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
padding: var(--monokai-codeblock-padding-block) var(--monokai-codeblock-padding-inline);
|
||||
scrollbar-color: var(--text-faint) transparent;
|
||||
tab-size: 2;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--monokai-selection-muted-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--monokai-selection-background);
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--code-normal);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
font-weight: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -426,6 +458,146 @@ body.theme-light {
|
|||
}
|
||||
}
|
||||
|
||||
pre:not([class*="language-"], :has(code[class*="language-"]))::before,
|
||||
pre:not(:has(.code-block-flair))[class*="language-"]::before,
|
||||
pre:not(:has(.code-block-flair)):has(code[class*="language-"])::before {
|
||||
content: "CODE";
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset-block-start: 0.45rem;
|
||||
inset-inline-end: var(--monokai-codeblock-padding-inline);
|
||||
min-height: auto;
|
||||
color: var(--monokai-codeblock-language-color);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--radius-s);
|
||||
font-family: var(--font-text-theme);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
padding-inline: 0;
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
$codeblock-language-labels: (
|
||||
"bash": "BASH",
|
||||
"c": "C",
|
||||
"cpp": "C++",
|
||||
"csharp": "C#",
|
||||
"css": "CSS",
|
||||
"go": "GO",
|
||||
"html": "HTML",
|
||||
"java": "JAVA",
|
||||
"javascript": "JS",
|
||||
"js": "JS",
|
||||
"json": "JSON",
|
||||
"markdown": "MD",
|
||||
"md": "MD",
|
||||
"mermaid": "MERMAID",
|
||||
"powershell": "POWERSHELL",
|
||||
"python": "PYTHON",
|
||||
"py": "PYTHON",
|
||||
"scss": "SCSS",
|
||||
"shell": "SHELL",
|
||||
"sh": "SH",
|
||||
"sql": "SQL",
|
||||
"text": "TEXT",
|
||||
"toml": "TOML",
|
||||
"ts": "TS",
|
||||
"typescript": "TS",
|
||||
"xml": "XML",
|
||||
"yaml": "YAML",
|
||||
"yml": "YAML"
|
||||
);
|
||||
|
||||
@each $language, $label in $codeblock-language-labels {
|
||||
pre:not(:has(.code-block-flair)).language-#{$language}::before,
|
||||
pre:not(:has(.code-block-flair)):has(code.language-#{$language})::before {
|
||||
content: $label;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-code-button,
|
||||
.code-block-flair {
|
||||
color: var(--monokai-codeblock-language-color);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--radius-s);
|
||||
font-family: var(--font-text-theme);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
transition:
|
||||
color 160ms ease,
|
||||
background-color 160ms ease,
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.code-block-flair {
|
||||
pointer-events: auto;
|
||||
cursor: var(--cursor);
|
||||
}
|
||||
|
||||
.code-block-flair,
|
||||
.code-block-flair:hover,
|
||||
.code-block-flair:focus,
|
||||
.code-block-flair:focus-visible,
|
||||
.code-block-flair:active,
|
||||
.cm-line:hover .code-block-flair,
|
||||
.cm-line:focus-within .code-block-flair {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.copy-code-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: none;
|
||||
opacity: 0;
|
||||
padding: 0.25rem;
|
||||
transform: translateY(-1px);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.el-pre:hover .copy-code-button,
|
||||
.el-pre:focus-within .copy-code-button,
|
||||
pre:hover .copy-code-button,
|
||||
pre:focus-within .copy-code-button,
|
||||
pre:hover button.copy-code-button,
|
||||
pre:focus-within button.copy-code-button,
|
||||
.copy-code-button:hover,
|
||||
.copy-code-button:focus-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.el-pre:hover .code-block-flair,
|
||||
.el-pre:focus-within .code-block-flair,
|
||||
pre:hover .code-block-flair,
|
||||
pre:focus-within .code-block-flair,
|
||||
pre:hover::before,
|
||||
pre:focus-within::before {
|
||||
opacity: 0;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.copy-code-button:hover,
|
||||
.copy-code-button:focus-visible,
|
||||
.code-block-flair:hover,
|
||||
.code-block-flair:focus-visible {
|
||||
color: var(--text-normal);
|
||||
background-color: var(--monokai-selection-muted-background);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: var(--monokai-hr-thickness) solid var(--monokai-hr-color);
|
||||
|
|
@ -447,7 +619,9 @@ body.theme-light {
|
|||
max-width: 100%;
|
||||
background-color: var(--monokai-media-background);
|
||||
border: 1px solid var(--monokai-media-border-color);
|
||||
border-width: var(--monokai-media-border-width);
|
||||
border-radius: var(--monokai-media-radius);
|
||||
box-shadow: var(--monokai-media-shadow);
|
||||
}
|
||||
|
||||
.file-embed,
|
||||
|
|
@ -457,7 +631,9 @@ body.theme-light {
|
|||
.internal-embed {
|
||||
background-color: var(--monokai-media-background);
|
||||
border: 1px solid var(--monokai-media-border-color);
|
||||
border-width: var(--monokai-media-border-width);
|
||||
border-radius: var(--monokai-media-radius);
|
||||
box-shadow: var(--monokai-media-shadow);
|
||||
padding: var(--monokai-embed-padding);
|
||||
}
|
||||
|
||||
|
|
@ -515,6 +691,28 @@ body.theme-light {
|
|||
.heading-anchor {
|
||||
color: var(--monokai-heading-anchor-color);
|
||||
}
|
||||
|
||||
.callout {
|
||||
background-color: var(--callout-background, transparent);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-inline-start: 3px solid rgb(var(--callout-color));
|
||||
border-radius: var(--radius-m);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.callout-title {
|
||||
color: var(--text-normal);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-preview-view .markdown-rendered {
|
||||
.copy-code-button {
|
||||
font-size: 0.58rem;
|
||||
min-height: 1.35rem;
|
||||
min-width: 1.35rem;
|
||||
padding: 0.16rem;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-source-view.mod-cm6 {
|
||||
|
|
@ -588,10 +786,16 @@ body.theme-light {
|
|||
}
|
||||
|
||||
.cm-line.HyperMD-codeblock:has(.cm-hmd-codeblock-begin) {
|
||||
border-block-start: 1px solid var(--monokai-codeblock-border-color);
|
||||
border-start-start-radius: var(--monokai-codeblock-radius);
|
||||
border-start-end-radius: var(--monokai-codeblock-radius);
|
||||
padding-block-start: var(--monokai-codeblock-padding-block);
|
||||
}
|
||||
|
||||
.cm-line.HyperMD-codeblock:has(.cm-hmd-codeblock-end) {
|
||||
border-block-end: 1px solid var(--monokai-codeblock-border-color);
|
||||
border-end-start-radius: var(--monokai-codeblock-radius);
|
||||
border-end-end-radius: var(--monokai-codeblock-radius);
|
||||
padding-block-end: var(--monokai-codeblock-padding-block);
|
||||
}
|
||||
|
||||
|
|
@ -723,7 +927,9 @@ body.theme-light {
|
|||
max-width: 100%;
|
||||
background-color: var(--monokai-media-background);
|
||||
border: 1px solid var(--monokai-media-border-color);
|
||||
border-width: var(--monokai-media-border-width);
|
||||
border-radius: var(--monokai-media-radius);
|
||||
box-shadow: var(--monokai-media-shadow);
|
||||
}
|
||||
|
||||
.file-embed,
|
||||
|
|
@ -734,7 +940,9 @@ body.theme-light {
|
|||
.cm-embed-block {
|
||||
background-color: var(--monokai-media-background);
|
||||
border: 1px solid var(--monokai-media-border-color);
|
||||
border-width: var(--monokai-media-border-width);
|
||||
border-radius: var(--monokai-media-radius);
|
||||
box-shadow: var(--monokai-media-shadow);
|
||||
padding: var(--monokai-embed-padding);
|
||||
}
|
||||
|
||||
|
|
@ -761,6 +969,117 @@ body.theme-light {
|
|||
padding: var(--monokai-inline-code-padding);
|
||||
}
|
||||
|
||||
.copy-code-button,
|
||||
.code-block-flair {
|
||||
color: var(--monokai-codeblock-language-color);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--radius-s);
|
||||
font-family: var(--font-text-theme);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
transition:
|
||||
color 160ms ease,
|
||||
background-color 160ms ease,
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.code-block-flair {
|
||||
pointer-events: auto;
|
||||
cursor: var(--cursor);
|
||||
}
|
||||
|
||||
.code-block-flair,
|
||||
.code-block-flair:hover,
|
||||
.code-block-flair:focus,
|
||||
.code-block-flair:focus-visible,
|
||||
.code-block-flair:active,
|
||||
.cm-line:hover .code-block-flair,
|
||||
.cm-line:focus-within .code-block-flair {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.copy-code-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
padding: 0.25rem;
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.cm-preview-code-block:hover button.copy-code-button,
|
||||
.cm-preview-code-block:focus-within button.copy-code-button,
|
||||
.cm-preview-code-block:hover .copy-code-button,
|
||||
.cm-preview-code-block:focus-within .copy-code-button,
|
||||
.el-pre:hover .copy-code-button,
|
||||
.el-pre:focus-within .copy-code-button,
|
||||
.el-pre:hover button.copy-code-button,
|
||||
.el-pre:focus-within button.copy-code-button,
|
||||
.markdown-rendered pre:hover .copy-code-button,
|
||||
.markdown-rendered pre:focus-within .copy-code-button,
|
||||
.markdown-rendered pre:hover button.copy-code-button,
|
||||
.markdown-rendered pre:focus-within button.copy-code-button,
|
||||
.copy-code-button:hover,
|
||||
.copy-code-button:focus-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.copy-code-button:hover,
|
||||
.copy-code-button:focus-visible,
|
||||
.code-block-flair:hover,
|
||||
.code-block-flair:focus-visible {
|
||||
color: var(--text-normal);
|
||||
background-color: var(--monokai-selection-muted-background);
|
||||
}
|
||||
|
||||
.markdown-rendered .code-block-flair,
|
||||
.markdown-rendered .el-pre:hover .code-block-flair,
|
||||
.markdown-rendered .el-pre:focus-within .code-block-flair,
|
||||
.markdown-rendered pre:hover .code-block-flair,
|
||||
.markdown-rendered pre:focus-within .code-block-flair,
|
||||
.markdown-rendered pre:hover::before,
|
||||
.markdown-rendered pre:focus-within::before {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cm-preview-code-block {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cm-preview-code-block:not(:has(.code-block-flair))::before {
|
||||
content: "CODE";
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset-block-start: 0.45rem;
|
||||
inset-inline-end: var(--monokai-codeblock-padding-inline);
|
||||
min-height: auto;
|
||||
color: var(--monokai-codeblock-language-color);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--radius-s);
|
||||
font-family: var(--font-text-theme);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
padding-inline: 0;
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
// stylelint-disable selector-class-pattern -- CodeMirror 内部类名。
|
||||
.cm-active {
|
||||
background-color: var(--monokai-editor-active-line-background);
|
||||
|
|
@ -826,6 +1145,11 @@ body.theme-light {
|
|||
color: var(--code-function);
|
||||
}
|
||||
|
||||
span.cm-variable.cm-callee,
|
||||
span.cm-def.cm-callee {
|
||||
color: var(--code-function);
|
||||
}
|
||||
|
||||
span.cm-number,
|
||||
span.cm-atom {
|
||||
color: var(--code-value);
|
||||
|
|
@ -850,7 +1174,11 @@ body.theme-light {
|
|||
|
||||
span.cm-variable,
|
||||
span.cm-variable-3 {
|
||||
color: var(--code-normal);
|
||||
color: var(--monokai-code-variable);
|
||||
}
|
||||
|
||||
span.cm-parameter {
|
||||
color: var(--monokai-code-parameter);
|
||||
}
|
||||
|
||||
span.cm-constant {
|
||||
|
|
@ -867,7 +1195,7 @@ body.theme-light {
|
|||
|
||||
span.cm-qualifier,
|
||||
span.cm-namespace {
|
||||
color: var(--code-namespace);
|
||||
color: var(--monokai-code-module);
|
||||
}
|
||||
|
||||
span.cm-meta {
|
||||
|
|
|
|||
|
|
@ -393,86 +393,6 @@
|
|||
content: "\e679";
|
||||
}
|
||||
|
||||
.nav-folder-title[data-path="assets"],
|
||||
.nav-folder-title[data-path$="/assets"],
|
||||
.nav-folder[data-path="assets"] > .nav-folder-title,
|
||||
.nav-folder[data-path$="/assets"] > .nav-folder-title {
|
||||
--monokai-folder-icon-content: "\e638";
|
||||
--monokai-folder-icon-color: #ffd866;
|
||||
}
|
||||
|
||||
.nav-folder-title[data-path="examples"],
|
||||
.nav-folder-title[data-path$="/examples"],
|
||||
.nav-folder[data-path="examples"] > .nav-folder-title,
|
||||
.nav-folder[data-path$="/examples"] > .nav-folder-title {
|
||||
--monokai-folder-icon-content: "\e674";
|
||||
--monokai-folder-icon-color: #fc9867;
|
||||
}
|
||||
|
||||
.nav-folder-title[data-path="exercises"],
|
||||
.nav-folder-title[data-path$="/exercises"],
|
||||
.nav-folder[data-path="exercises"] > .nav-folder-title,
|
||||
.nav-folder[data-path$="/exercises"] > .nav-folder-title {
|
||||
--monokai-folder-icon-content: "\e679";
|
||||
--monokai-folder-icon-color: #ffd866;
|
||||
}
|
||||
|
||||
.nav-folder-title[data-path="labs"],
|
||||
.nav-folder-title[data-path$="/labs"],
|
||||
.nav-folder[data-path="labs"] > .nav-folder-title,
|
||||
.nav-folder[data-path$="/labs"] > .nav-folder-title {
|
||||
--monokai-folder-icon-content: "\e610";
|
||||
--monokai-folder-icon-color: #78dce8;
|
||||
}
|
||||
|
||||
.nav-folder-title[data-path="leetcode"],
|
||||
.nav-folder-title[data-path$="/leetcode"],
|
||||
.nav-folder[data-path="leetcode"] > .nav-folder-title,
|
||||
.nav-folder[data-path$="/leetcode"] > .nav-folder-title {
|
||||
--monokai-folder-icon-content: "\eab5";
|
||||
--monokai-folder-icon-color: #78dce8;
|
||||
}
|
||||
|
||||
.nav-folder-title[data-path="notes"],
|
||||
.nav-folder-title[data-path$="/notes"],
|
||||
.nav-folder[data-path="notes"] > .nav-folder-title,
|
||||
.nav-folder[data-path$="/notes"] > .nav-folder-title {
|
||||
--monokai-folder-icon-content: "\e695";
|
||||
--monokai-folder-icon-color: #a9dc76;
|
||||
}
|
||||
|
||||
.nav-folder-title[data-path="src"],
|
||||
.nav-folder-title[data-path$="/src"],
|
||||
.nav-folder[data-path="src"] > .nav-folder-title,
|
||||
.nav-folder[data-path$="/src"] > .nav-folder-title {
|
||||
--monokai-folder-icon-content: "\e61d";
|
||||
--monokai-folder-icon-color: #ffd866;
|
||||
}
|
||||
|
||||
.nav-folder-title[data-path="tests"],
|
||||
.nav-folder-title[data-path$="/tests"],
|
||||
.nav-folder[data-path="tests"] > .nav-folder-title,
|
||||
.nav-folder[data-path$="/tests"] > .nav-folder-title {
|
||||
--monokai-folder-icon-content: "\e610";
|
||||
--monokai-folder-icon-color: #78dce8;
|
||||
}
|
||||
|
||||
.nav-folder-title[data-path^="day"],
|
||||
.nav-folder-title[data-path*="/day"],
|
||||
.nav-folder[data-path^="day"] > .nav-folder-title,
|
||||
.nav-folder[data-path*="/day"] > .nav-folder-title {
|
||||
--monokai-folder-icon-content: "\e637";
|
||||
--monokai-folder-icon-color: #a9dc76;
|
||||
}
|
||||
|
||||
.nav-folder-title[data-path^="Day"],
|
||||
.nav-folder-title[data-path*="/Day"],
|
||||
.nav-folder[data-path^="Day"] > .nav-folder-title,
|
||||
.nav-folder[data-path*="/Day"] > .nav-folder-title {
|
||||
--monokai-folder-icon-content: "\e637";
|
||||
--monokai-folder-icon-color: #a9dc76;
|
||||
}
|
||||
|
||||
.nav-file-title[data-path^="Bug_"][data-path$=".md"]::before,
|
||||
.nav-file-title[data-path*="/Bug_"][data-path$=".md"]::before {
|
||||
--monokai-file-icon-color: #ff6188;
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
body.theme-dark {
|
||||
--monokai-settings-heading-color: var(--text-normal);
|
||||
--monokai-settings-item-background: rgb(248 248 242 / 4%);
|
||||
--monokai-settings-item-border: rgb(248 248 242 / 12%);
|
||||
--monokai-settings-item-border: rgb(248 248 242 / 10%);
|
||||
--monokai-settings-item-text: var(--text-normal);
|
||||
--monokai-settings-item-description: var(--text-muted);
|
||||
--monokai-settings-selected-background: rgb(102 217 239 / 12%);
|
||||
--monokai-settings-selected-background: var(--monokai-selection-background);
|
||||
--monokai-settings-control-background: rgb(39 32 28 / 96%);
|
||||
--monokai-settings-control-border: rgb(248 248 242 / 18%);
|
||||
--monokai-settings-control-text: var(--text-normal);
|
||||
|
|
@ -14,12 +14,12 @@ body.theme-dark {
|
|||
|
||||
body.theme-light {
|
||||
--monokai-settings-heading-color: var(--text-normal);
|
||||
--monokai-settings-item-background: rgb(255 253 248 / 72%);
|
||||
--monokai-settings-item-background: rgb(245 243 236 / 82%);
|
||||
--monokai-settings-item-border: rgb(61 61 61 / 12%);
|
||||
--monokai-settings-item-text: var(--text-normal);
|
||||
--monokai-settings-item-description: var(--text-muted);
|
||||
--monokai-settings-selected-background: rgb(20 116 138 / 9%);
|
||||
--monokai-settings-control-background: rgb(255 253 248 / 94%);
|
||||
--monokai-settings-selected-background: var(--monokai-selection-background);
|
||||
--monokai-settings-control-background: rgb(250 248 242 / 96%);
|
||||
--monokai-settings-control-border: rgb(61 61 61 / 20%);
|
||||
--monokai-settings-control-text: var(--text-normal);
|
||||
}
|
||||
|
|
@ -34,6 +34,10 @@ body.theme-light {
|
|||
box-shadow: var(--monokai-modal-shadow);
|
||||
}
|
||||
|
||||
.modal.mod-settings {
|
||||
background-color: var(--background-secondary);
|
||||
}
|
||||
|
||||
.modal-title,
|
||||
.prompt-title {
|
||||
color: var(--text-normal);
|
||||
|
|
@ -96,6 +100,11 @@ body.theme-light {
|
|||
.vertical-tab-nav-item {
|
||||
color: var(--nav-item-color);
|
||||
border-radius: var(--radius-s);
|
||||
margin-block: 1px;
|
||||
transition:
|
||||
color 120ms ease,
|
||||
background-color 120ms ease,
|
||||
box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.vertical-tab-nav-item:hover {
|
||||
|
|
@ -106,12 +115,15 @@ body.theme-light {
|
|||
.vertical-tab-nav-item.is-active {
|
||||
color: var(--monokai-selection-foreground, var(--nav-item-color-active));
|
||||
background-color: var(--nav-item-background-active);
|
||||
box-shadow: inset 2px 0 0 var(--monokai-selection-border-color);
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
color: var(--monokai-settings-item-text);
|
||||
background-color: var(--monokai-settings-item-background);
|
||||
border-color: var(--monokai-settings-item-border);
|
||||
background-color: transparent;
|
||||
border-color: var(--background-modifier-border);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.setting-item-description,
|
||||
|
|
@ -121,11 +133,24 @@ body.theme-light {
|
|||
|
||||
.community-plugin,
|
||||
.installed-plugins-container,
|
||||
.modal-button-container,
|
||||
.vertical-tab-content-container > div {
|
||||
.modal-button-container {
|
||||
color: var(--monokai-settings-item-text);
|
||||
background-color: var(--monokai-settings-item-background);
|
||||
background-color: transparent;
|
||||
border-color: var(--monokai-settings-item-border);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.setting-item-container,
|
||||
.vertical-tab-content-container > div:not(.style-settings-container) {
|
||||
background-color: transparent;
|
||||
border-color: var(--background-modifier-border);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.setting-item:hover {
|
||||
background-color: var(--monokai-selection-muted-background);
|
||||
}
|
||||
|
||||
button,
|
||||
|
|
@ -138,6 +163,12 @@ body.theme-light {
|
|||
border-color: var(--monokai-settings-control-border);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.clickable-icon:hover {
|
||||
color: var(--icon-color-hover);
|
||||
background-color: var(--monokai-selection-muted-background);
|
||||
}
|
||||
|
||||
.setting-item-name .search-input-container,
|
||||
.style-settings-container .search-input-container {
|
||||
max-width: 23rem;
|
||||
|
|
@ -164,6 +195,7 @@ body.theme-light {
|
|||
background-color: var(--monokai-settings-item-background);
|
||||
border: 1px solid var(--monokai-settings-item-border);
|
||||
border-radius: var(--radius-m);
|
||||
box-shadow: none;
|
||||
transition:
|
||||
background-color 140ms ease,
|
||||
border-color 140ms ease,
|
||||
|
|
|
|||
|
|
@ -26,13 +26,37 @@
|
|||
.side-dock-ribbon-action:hover,
|
||||
.workspace-ribbon-collapse-btn:hover {
|
||||
color: var(--icon-color-hover);
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--monokai-selection-muted-background, var(--background-modifier-hover));
|
||||
}
|
||||
|
||||
.side-dock-ribbon-action.is-active {
|
||||
color: var(--icon-color-active);
|
||||
background-color: var(--background-modifier-hover);
|
||||
box-shadow: inset 2px 0 0 var(--icon-color-active);
|
||||
background-color: var(--monokai-selection-background, var(--background-modifier-hover));
|
||||
box-shadow: inset 2px 0 0 var(--monokai-selection-border-color, var(--icon-color-active));
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
color: var(--text-muted);
|
||||
background-color: var(--background-secondary);
|
||||
border-color: var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.status-bar-item {
|
||||
border-radius: var(--radius-s);
|
||||
transition:
|
||||
color 120ms ease,
|
||||
background-color 120ms ease;
|
||||
}
|
||||
|
||||
.status-bar-item:hover {
|
||||
color: var(--text-normal);
|
||||
background-color: var(--monokai-selection-muted-background, var(--background-modifier-hover));
|
||||
}
|
||||
|
||||
.status-bar-item.mod-clickable:active,
|
||||
.status-bar-item.is-active {
|
||||
color: var(--icon-color-active);
|
||||
background-color: var(--monokai-selection-background, var(--background-modifier-active-hover));
|
||||
}
|
||||
|
||||
body.is-mobile .workspace-ribbon {
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
.workspace-tab-header:hover {
|
||||
color: var(--text-normal);
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--monokai-selection-muted-background, var(--background-modifier-hover));
|
||||
}
|
||||
|
||||
.workspace-tab-header.is-active {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.canvas-wrapper {
|
||||
--canvas-background: var(--background-primary);
|
||||
--canvas-card-label-color: var(--text-muted);
|
||||
--canvas-dot-pattern: radial-gradient(var(--background-modifier-border) 1px, transparent 1px);
|
||||
--canvas-color-1: var(--monokai-spectrum-red, var(--text-accent));
|
||||
--canvas-color-2: var(--monokai-spectrum-orange, var(--h2-color));
|
||||
--canvas-color-3: var(--monokai-spectrum-yellow, var(--h3-color));
|
||||
|
|
@ -9,11 +10,17 @@
|
|||
--canvas-color-6: var(--monokai-spectrum-purple, var(--h6-color));
|
||||
|
||||
background-color: var(--canvas-background);
|
||||
background-image: var(--canvas-dot-pattern);
|
||||
background-position: 0 0;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
.canvas-node {
|
||||
border-color: var(--background-modifier-border);
|
||||
border-radius: var(--radius-m);
|
||||
transition:
|
||||
border-color 120ms ease,
|
||||
box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.canvas-node-content {
|
||||
|
|
@ -24,7 +31,7 @@
|
|||
|
||||
.canvas-node.is-focused,
|
||||
.canvas-node.is-selected {
|
||||
border-color: var(--interactive-accent);
|
||||
border-color: var(--monokai-selection-border-color, var(--interactive-accent));
|
||||
box-shadow: 0 0 0 2px var(--monokai-selection-ring);
|
||||
}
|
||||
|
||||
|
|
@ -34,11 +41,13 @@
|
|||
|
||||
.canvas-path {
|
||||
stroke: var(--text-faint);
|
||||
stroke-opacity: 0.72;
|
||||
}
|
||||
|
||||
.canvas-path.is-focused,
|
||||
.canvas-path.is-selected {
|
||||
stroke: var(--link-color);
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
|
||||
.canvas-node-container {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
--monokai-graph-background: var(--background-secondary);
|
||||
--monokai-graph-panel: var(--background-modifier-active-hover);
|
||||
--monokai-graph-line: rgb(from var(--monokai-spectrum-cyan, var(--link-color)) r g b / 42%);
|
||||
--monokai-graph-direction-line: rgb(from var(--monokai-spectrum-cyan, var(--link-color)) r g b / 58%);
|
||||
--monokai-graph-node: var(--text-muted);
|
||||
--monokai-graph-focused: var(--monokai-spectrum-red, var(--interactive-accent));
|
||||
--monokai-graph-node-tag: var(--monokai-spectrum-purple, var(--h6-color));
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
--graph-node-tag: var(--monokai-graph-node-tag);
|
||||
--graph-node-attachment: var(--monokai-graph-node-attachment);
|
||||
--graph-node-unresolved: var(--monokai-graph-node-unresolved);
|
||||
--graph-arrow: var(--monokai-graph-line);
|
||||
--graph-arrow: var(--monokai-graph-direction-line);
|
||||
--graph-line-highlight: var(--link-color);
|
||||
--graph-node-highlight-fill: var(--interactive-accent);
|
||||
--graph-node-highlight-line: var(--link-color);
|
||||
|
|
@ -48,7 +49,7 @@
|
|||
background-color: var(--monokai-graph-panel);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: var(--radius-m);
|
||||
box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
|
||||
box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
|
||||
transition:
|
||||
border-color 140ms ease,
|
||||
box-shadow 180ms ease;
|
||||
|
|
@ -66,7 +67,7 @@
|
|||
|
||||
.graph-controls-button:hover {
|
||||
color: var(--icon-color-hover);
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--monokai-selection-muted-background, var(--background-modifier-hover));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
|
@ -77,8 +78,8 @@
|
|||
|
||||
.graph-controls-button.mod-active {
|
||||
color: var(--icon-color-active);
|
||||
background-color: var(--nav-item-background-active);
|
||||
box-shadow: inset 2px 0 0 var(--icon-color-active);
|
||||
background-color: var(--monokai-selection-background, var(--nav-item-background-active));
|
||||
box-shadow: inset 2px 0 0 var(--monokai-selection-border-color, var(--icon-color-active));
|
||||
}
|
||||
|
||||
.graph-view.color-fill,
|
||||
|
|
|
|||
|
|
@ -54,6 +54,10 @@
|
|||
--monokai-default-success: #{$green};
|
||||
--monokai-default-warning: #{$warning-bg};
|
||||
--monokai-default-code-background: #{$background-secondary};
|
||||
--monokai-selection-background: rgb(from #{$cyan} r g b / 18%);
|
||||
--monokai-selection-muted-background: rgb(from #{$text-normal} r g b / 6%);
|
||||
--monokai-selection-border-color: #{$cyan};
|
||||
--monokai-light-tool-background: #{$background-secondary};
|
||||
--monokai-spectrum-red: #{$red};
|
||||
--monokai-spectrum-orange: #{$orange};
|
||||
--monokai-spectrum-yellow: #{$yellow};
|
||||
|
|
@ -81,6 +85,9 @@
|
|||
--code-regex: #{$yellow};
|
||||
--code-meta: #{$text-faint};
|
||||
--code-error: #{$red};
|
||||
--code-variable: #{$text-normal};
|
||||
--code-parameter: #{$orange};
|
||||
--code-module: #{$cyan};
|
||||
--monokai-callout-note-bg: rgb(from #{$cyan} r g b / 12%);
|
||||
--monokai-callout-note-border: #{$cyan};
|
||||
--monokai-callout-info-bg: rgb(from #{$cyan} r g b / 12%);
|
||||
|
|
@ -258,6 +265,7 @@ body.monokai-syntax-accent-amber-vscode {
|
|||
--monokai-warning-color: rgb(255 160 0 / 24%);
|
||||
--monokai-scrollbar-active-background: rgb(255 160 0 / 31%);
|
||||
--monokai-selection-foreground: #ffa000;
|
||||
--monokai-selection-border-color: #ffa000;
|
||||
--monokai-tab-active-border-color: #ffa000;
|
||||
--monokai-settings-heading-color: #ffa000;
|
||||
--icon-color-active: #ffa000;
|
||||
|
|
@ -299,3 +307,22 @@ body {
|
|||
--text-highlight-bg: var(--monokai-warning-color, var(--monokai-default-warning));
|
||||
--code-background: var(--monokai-code-background, var(--monokai-default-code-background));
|
||||
}
|
||||
|
||||
body.monokai-syntax-media-border-none {
|
||||
--monokai-media-border-width: 0;
|
||||
--monokai-media-background: transparent;
|
||||
--monokai-embed-padding: 0;
|
||||
}
|
||||
|
||||
body.monokai-syntax-media-border-card {
|
||||
--monokai-media-border-width: 1px;
|
||||
--monokai-media-background: var(--monokai-light-tool-background, var(--background-secondary));
|
||||
--monokai-media-shadow: 0 10px 28px rgb(0 0 0 / 16%);
|
||||
--monokai-embed-padding: 0.85rem;
|
||||
}
|
||||
|
||||
body.monokai-syntax-heading-muted-tail {
|
||||
--h4-color: var(--text-muted);
|
||||
--h5-color: var(--text-muted);
|
||||
--h6-color: var(--text-faint);
|
||||
}
|
||||
|
|
|
|||
67
test/monokai-pro-polish.test.js
Normal file
67
test/monokai-pro-polish.test.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { readFileSync } from "node:fs";
|
||||
import test from "node:test";
|
||||
|
||||
const readSource = (path) => readFileSync(new URL(path, import.meta.url), "utf8");
|
||||
|
||||
test("Monokai Pro 打磨项暴露稳定的样式入口", () => {
|
||||
const base = readSource("../src/scss/_base.scss");
|
||||
const editor = readSource("../src/scss/components/_editor.scss");
|
||||
const modals = readSource("../src/scss/components/_modals.scss");
|
||||
const ribbon = readSource("../src/scss/components/_ribbon.scss");
|
||||
const graph = readSource("../src/scss/plugins/_graph.scss");
|
||||
const canvas = readSource("../src/scss/plugins/_canvas.scss");
|
||||
const styleSettingsScss = readSource("../src/scss/plugins/_style-settings.scss");
|
||||
const styleSettings = [
|
||||
readSource("../src/css/style-settings/20-density.css.md"),
|
||||
readSource("../src/css/style-settings/40-typography.css.md"),
|
||||
].join("\n");
|
||||
|
||||
for (const token of [
|
||||
"--monokai-selection-background",
|
||||
"--monokai-selection-muted-background",
|
||||
"--monokai-light-tool-background",
|
||||
]) {
|
||||
assert.match(base, new RegExp(token));
|
||||
}
|
||||
|
||||
for (const token of [
|
||||
"--monokai-codeblock-header-background",
|
||||
"--monokai-code-variable",
|
||||
"padding: var(--monokai-codeblock-padding-block) var(--monokai-codeblock-padding-inline);",
|
||||
".copy-code-button",
|
||||
".code-block-flair",
|
||||
]) {
|
||||
assert.match(editor, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")));
|
||||
}
|
||||
assert.doesNotMatch(editor, /padding-block-start:\s*calc\(var\(--monokai-codeblock-padding-block\) \+ var\(--monokai-codeblock-header-height\)\);/);
|
||||
assert.match(editor, /pre:not\(\[class\*="language-"\], :has\(code\[class\*="language-"\]\)\)::before,[\s\S]*?content:\s*"CODE";/);
|
||||
assert.match(editor, /\.cm-preview-code-block:not\(:has\(\.code-block-flair\)\)::before\s*\{[\s\S]*?content:\s*"CODE";/);
|
||||
assert.match(editor, /"python":\s*"PYTHON"/);
|
||||
assert.match(editor, /pre:not\(:has\(\.code-block-flair\)\)\.language-#\{\$language\}::before,[\s\S]*?content:\s*\$label;/);
|
||||
assert.match(editor, /pre\s*\{[\s\S]*?code\s*\{[\s\S]*?color:\s*var\(--code-normal\);[\s\S]*?background-color:\s*transparent;[\s\S]*?border-radius:\s*0;[\s\S]*?font-weight:\s*inherit;[\s\S]*?\}/);
|
||||
assert.match(editor, /\.copy-code-button\s*\{[\s\S]*?display:\s*inline-flex;[\s\S]*?opacity:\s*0;[\s\S]*?visibility:\s*hidden;/);
|
||||
assert.match(editor, /\.markdown-preview-view \.markdown-rendered[\s\S]*?\.copy-code-button\s*\{[\s\S]*?font-size:\s*0\.58rem;[\s\S]*?min-height:\s*1\.35rem;[\s\S]*?min-width:\s*1\.35rem;[\s\S]*?padding:\s*0\.16rem;/);
|
||||
assert.match(editor, /\.markdown-source-view\.mod-cm6[\s\S]*?\.copy-code-button\s*\{[\s\S]*?opacity:\s*1;[\s\S]*?visibility:\s*visible;/);
|
||||
assert.match(editor, /\.markdown-source-view\.mod-cm6[\s\S]*?\.code-block-flair\s*\{[\s\S]*?pointer-events:\s*auto;[\s\S]*?cursor:\s*var\(--cursor\);/);
|
||||
assert.match(editor, /\.markdown-source-view\.mod-cm6[\s\S]*?\.code-block-flair:active,[\s\S]*?\.cm-line:focus-within \.code-block-flair\s*\{[\s\S]*?opacity:\s*1;[\s\S]*?visibility:\s*visible;/);
|
||||
assert.match(editor, /\.markdown-source-view\.mod-cm6[\s\S]*?\.markdown-rendered \.code-block-flair,[\s\S]*?\.markdown-rendered pre:focus-within::before[\s\S]*?opacity:\s*1;[\s\S]*?transform:\s*none;/);
|
||||
assert.match(editor, /\.el-pre:hover \.copy-code-button,[\s\S]*?pre:hover \.copy-code-button[\s\S]*?opacity:\s*1;[\s\S]*?visibility:\s*visible;/);
|
||||
assert.doesNotMatch(editor, /\.cm-preview-code-block:hover \.code-block-flair[\s\S]*?opacity:\s*0;/);
|
||||
assert.doesNotMatch(editor, /\.cm-preview-code-block:focus-within \.code-block-flair[\s\S]*?opacity:\s*0;/);
|
||||
assert.doesNotMatch(editor, /\.markdown-rendered pre:hover \.code-block-flair[\s\S]*?opacity:\s*0;/);
|
||||
assert.doesNotMatch(editor, /\.markdown-preview-view,[\s\S]*?\.markdown-reading-view\s*\{[\s\S]*?\.code-block-flair\s*\{[\s\S]*?display:\s*none;/);
|
||||
|
||||
assert.match(styleSettingsScss, /body\.monokai-syntax-media-border-card/);
|
||||
assert.match(styleSettingsScss, /body\.monokai-syntax-heading-muted-tail/);
|
||||
assert.match(modals, /vertical-tab-nav-item\.is-active/);
|
||||
assert.doesNotMatch(modals, /\.vertical-tab-content-container\s*>\s*div[^{}]*\{[^}]*background-color:\s*var\(--monokai-settings-item-background\);/);
|
||||
assert.match(modals, /\.modal\.mod-settings[\s\S]*?\.setting-item[\s\S]*?background-color:\s*transparent;/);
|
||||
assert.match(modals, /\.modal\.mod-settings[\s\S]*?\.setting-item-container[\s\S]*?background-color:\s*transparent;/);
|
||||
assert.match(modals, /\.style-settings-container[\s\S]*?\.setting-item[\s\S]*?background-color:\s*var\(--monokai-settings-item-background\);/);
|
||||
assert.match(ribbon, /status-bar/);
|
||||
assert.match(graph, /--monokai-graph-direction-line/);
|
||||
assert.match(canvas, /--canvas-dot-pattern/);
|
||||
assert.match(styleSettings, /monokai-syntax-media-border-style/);
|
||||
assert.match(styleSettings, /monokai-syntax-heading-color-mode/);
|
||||
});
|
||||
Loading…
Reference in a new issue