想实现这种美化效果。求大佬帮忙写个CSS

挽歌 · 2023 年10 月 28 日 07:22

无序列表和有序列表能带个范围框。
试过在别的大佬的主体里面把这个CSS文件攫取下来，但是一直没成功。

hisola · 2023 年10 月 28 日 07:59

这是从老版本(0.14)topaz系列主题中抠下来的, 但是我为了让它跟我的主题色联动, 使用了很多变量; 所以直接粘贴是使用不了的;

你需要把所有var(--????) 替换成一个具体的颜色
比如 var(--list-ul-hover)替换成 #ff0000
具体使用什么颜色可以自己调
(obsidian-设置-外观-主题色中可以选颜色并复制色值)
(你从别处复制的css片段如果使用不了也可以试着这样检查)

另外,这个片段来自于老版本, 跟1.0以后的默认缩进线有冲突, 多层嵌套会同时显示(如下图的 5. )

先看默认主题下的效果：

/* 
----------------------------------------
list-有序列表和无序列表的曲线-@golden topaz
----------------------------------------
*/

/*list*/
.cm-hmd-list-indent .cm-tab::before/*,
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before*/ {
content: '';
border-left: 2px solid var(--background-modifier-border);
position: absolute;
height: 100%;
margin-left: 3px;
}


.cm-formatting.cm-formatting-list.cm-formatting-list-ol {
color: var(--text-accent);
}

.cm-formatting.cm-formatting-list.cm-formatting-list-ul {
color: #da8507;
}

/* inspired by Gabroel from Obsidian discord group */
/* https://discord.com/channels/686053708261228577/702656734631821413/784922140465692712 */
li > p:not(.task-list-item) {
margin-top: 5px;
margin-bottom: 5px;
}

ul,
ol ul,
ol ol ul,
ol ol ol ul {
list-style: disc;
}

ul ul,
ol ul ul,
ul ol ul,
ol ol ul ul {
list-style: circle;
}

ul ul ul,
ol ul ul ul,
ul ol ul ul,
ul ul ol ul {
list-style: square;
}

ul ul ul ul,
ol ul ul ul ul,
ul ol ul ul ul,
ul ul ol ul ul,
ul ul ul ol ul {
list-style: circle;
}

ul > li:not(.task-list-item) {
margin-left: -5px;
padding-left: 6px;
border-radius: 5px;
width: fit-content;
margin-bottom: 6px;
margin-top: 4px;
padding-right: 6px;
word-wrap: break-word;
word-break: break-word;
transition: all 300ms ease-in-out;
}

.theme-dark ul > li:not(.task-list-item) {
border-left: 2px solid var(--list-ul-block-color);
}

.theme-light ul > li:not(.task-list-item) {
border-left: 2px solid var(--list-ul-block-color);
}

ul > li:not(.task-list-item):hover {
border-color: var(--list-ul-hover);
}

ol {
padding-inline-start: 1em;
margin-left: 25px;
list-style: decimal;
}

ol ol {
list-style: lower-latin;
}

ol ol ol,
ol ul ol {
list-style: lower-roman;
}

ol ol ol ol,
ol ol ul ol,
ol ul ol ol {
list-style: decimal;
}

ol > li {
margin-left: -5px;
padding-left: 6px;
border-radius: 5px;
margin-bottom: 6px;
margin-top: 4px;
padding-right: 6px;
transition: all 300ms ease-in-out;
} 

.theme-dark ol > li {
border-left: 2px solid var(--list-ol-block-color);
} 

.theme-light ol > li {
border-left: 2px solid var(--list-ol-block-color);
} 

ol > li:hover {
border-color: var(--list-ol-hover);
}

ol > li::marker {
font-weight: bold;
color: var(--list-ol-number-color);
white-space: pre;
}

ul li, ol li {
font-size: var(--font-size-list);
}

/* list collaspe icon */
/* .markdown-preview-view .list-collapse-indicator.collapse-indicator.collapse-icon {
margin-top: 0px;
transition: transform 20ms linear 0s;
} */

/* .markdown-preview-view .list-collapse-indicator.collapse-indicator.collapse-icon::before {
content : "↓";
font-size: 14px;
margin-left: -11px;
font-weight: bold;
color: var(--text-accent);
transition: transform 10ms linear 0s;
}  */
.markdown-preview-view .list-collapse-indicator.collapse-indicator.collapse-icon svg {
/* display: none; */
color: var(--accent-strong);
height: 10px;
width: 10px;
}

/* .markdown-preview-view li.is-collapsed div.list-collapse-indicator.collapse-indicator.collapse-icon {
transform: translateX(0px) translateY(-4px) rotate(-90deg);
opacity: 0.5;
} */


.markdown-rendered .list-collapse-indicator {

margin-left: -55px;
padding-right: 2em;
}