改变聚焦模式的样式 #
TL;DR
你可以通过添加以下 css 来简化改变非聚焦段落的文本颜色。
:root {
--blur-text-color: #FFF;
}
如果你想要更高级的样式配置，你可以按照以下方式进行。
/*Following are LESS code for better css structure*/
.on-focus-mode {
/* under focus mode*/
.md-end-block:not(.md-focus):not(.md-focus-container) {
* {
/* use color close to background for un-focused block */
color: #C8C8C8 !important;
}
img{
/* make img and element less attractive */
opacity: 50%;
}
}
.task-list-item:not(.md-focus-container)>input {
/* make the check mark on task list less attractive*/
opacity: 50%;
}
.md-fences.md-focus .CodeMirror-code>*:not(.CodeMirror-activeline) *,
.CodeMirror.cm-s-inner:not(.CodeMirror-focused) * {
/*lines in unfocused code fences, and unfocused lines in focused code fence*/
color: #C8C8C8 !important;
}
li[cid]:not(.md-focus-container) {
color: #C8C8C8 !important;
}
#typora-source .CodeMirror-code>*:not(.CodeMirror-activeline) * {
/*source code mode under focus mode*/
color: #C8C8C8 !important;
}
.md-focus,
.md-focus-container {
/* for text in current focused block */
color: #111;
}
}
请注意当聚焦模式被启用时，<body> dom 会有类 on-focus-mode，而聚焦的块级元素会有类 md-focus。
可以包含 md-focus 类的块是不能包含子块的块，并且会包含一个 md-end-block 类。例如，<blockquote> 可以包含像 <p> 这样的子块，所以它没有 md-end-block 类，而 h1 会有该类。md-focus-container 类将适用于 li，它包含一个 .md-focus 块。