改变聚焦模式的样式 #
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
块。