文章

2 Obsidian CSS片段

发表于 更新于
作者 Hacket Zeng
7 分钟阅读

去除待办的删除线样式

1
2
3
4
5
6

/* 实现去除待办的删除线样式，方便在回顾任务的时候使用，避免干扰。 */

.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] {
    text-decoration: unset;
}

效果：

![image.png400](https://raw.githubusercontent.com/hacket/ObsidianOSS/master/obsidian/20240224104713.png)

编辑模式下当前行高亮

1
2
3
4
5
6
7
8
9
10

/* Active line background */
.markdown-source-view.mod-cm6 .cm-line.cm-active {
    background-color: rgba(var(--mono-rgb-100), 0.05)
}

/*Active line number */
.markdown-source-view.mod-cm6 .cm-lineNumbers .cm-gutterElement.cm-active {
    font-weight: 600;
    color: purple
}

效果：

![image.png400](https://raw.githubusercontent.com/hacket/ObsidianOSS/master/obsidian/20240224110854.png)

笔记页内标题居中

1
2
3
4
5
6
7

.view-content .markdown-source-view .inline-title {
    align-self: center;
}

.markdown-preview-view .mod-header .inline-title {
    text-align: center;
}

编辑模式代码块显示行号

通过 CSS 的方法实现在编辑模式下显示代码行号 ，但因为受限于 Obsidian 的渲染机制，如果代码长度超过一屏幕，代码行号会被重置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

.HyperMD-codeblock-begin {
  counter-reset: line-numbers;
}

.HyperMD-codeblock.cm-line:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end) {
  padding-left: 3em;
  position: relative;
}

.HyperMD-codeblock.cm-line:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end)::after {
  align-items: flex-start;
  color: var(--text-faint);
  content: counter(line-numbers);
  counter-increment: line-numbers;
  display: flex;
  font-size: 0.8em;
  height: 100%;
  justify-content: flex-end;
  left: 0;
  position: absolute;
  text-align: right;
  width: 2em;
  padding-right: 0.5em;
  bottom: -2px;
  border-right: 1px solid var(--scrollbar-thumb-bg);
 white-space: nowrap;
}

.HyperMD-codeblock.cm-line.cm-active:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end)::after {
  color: var(--color-accent);
}

.HyperMD-codeblock .cm-foldPlaceholder::before {
  display: none;
}

图片添加边框阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/**
使用 CSS3 的filter阴影滤镜 drop-shadow；此函数有点类似于 box-shadow 属性；box-shadow 属性在元素的整个框后面创建一个矩形阴影, 而 drop-shadow() 过滤器则是创建一个符合图像本身形状 ( alpha 通道)的阴影。
其语法是：
drop-shadow(offset-x offset-y blur-radius spread-radius color)

采用 drop-shadow 是更加可取的方案；box-shadow，只是盒子的阴影；倘若盒子中间是透明的，其光线不能穿透；
*/

/* 图片添加边框阴影 */
img {
    -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
}

/* 图片添加边框 */
img {
    border-style: solid;
    /*图片边框: 实线*/
    border-width: 0px;
    /*边框宽度: 0.5px*/
}

搜索框美化，类似 Vscode

  1. 类 vscode 搜索框
  2. 基于 AccentColor 的高亮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

.theme-light {
    /* 外部链接 ()[] */
    --external-link: #e39133;
    /* 内部链接 [[]] */
    --internal-link: #5d94ca;
}

.theme-dark {
    --external-link: #965e1edd;
    --internal-link: #58a8fadd;
}

.is-live-preview .cm-line:not(.cm-active) .cm-hmd-internal-link,
.markdown-preview-view .internal-link,
.is-live-preview .cm-line:not(.cm-active) .cm-link,
.markdown-preview-view .external-link {
    border-radius: 6px;
    padding: 2px 20px;
    border: 0.5px solid var(--c);
    box-sizing: border-box;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2705882353), -1px -1px 4px rgba(255, 255, 255, 0.2705882353);
    background: conic-gradient(from -135deg at 100% 50%, var(--c) 90deg, rgba(0, 0, 0, 0) 0) -2px var(--p, 1%)/var(--s, 0%) 200% no-repeat, conic-gradient(from -135deg at 1.2em 50%, rgba(0, 0, 0, 0) 90deg, var(--c) 0) calc(100% + 2px) var(--p, 1%)/var(--s, 0%) 200% no-repeat !important;
    transition: 0.3s ease-in-out, background-position 0s, padding 0s, border-radius 0s, border 0s;
}

.is-live-preview .cm-line:not(.cm-active) .cm-hmd-internal-link:hover,
.markdown-preview-view .internal-link:hover,
.is-live-preview .cm-line:not(.cm-active) .cm-link:hover,
.markdown-preview-view .external-link:hover {
    --p: 96%;
    --s: calc(50% + 0.9em);
    color: var(--background-primary) !important;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2705882353), -3px -3px 6px rgba(255, 255, 255, 0.2705882353);
}

.cm-link,
.external-link {
    color: var(--external-link) !important;
}

.cm-link,
.cm-link .cm-underline,
.external-link,
.external-link .cm-underline {
    text-decoration: none !important;
}

span.external-link {
    display: none !important;
}

.is-live-preview .cm-line:not(.cm-active) .cm-link,
.markdown-preview-view .external-link {
    --c: var(--external-link);
}

.cm-url,
.cm-hmd-internal-link,
.internal-link {
    color: var(--internal-link) !important;
}

.cm-url,
.cm-url .cm-underline,
.cm-hmd-internal-link,
.cm-hmd-internal-link .cm-underline,
.internal-link,
.internal-link .cm-underline {
    text-decoration: none !important;
}

.internal-link {
    padding: 0 4px;
}

.is-live-preview .cm-line:not(.cm-active) .cm-hmd-internal-link,
.markdown-preview-view .internal-link {
    --c: var(--internal-link);
}

.cm-formatting-link,
.cm-formatting-link-string,
.cm-formatting-image {
    font-weight: 700;
    margin: 0 2px;
    border: none !important;
    box-shadow: none !important;
}

.cm-formatting-link~.cm-hmd-internal-link,
.cm-formatting-link+.cm-link,
.cm-formatting-link-string~.cm-hmd-internal-link,
.cm-formatting-link-string+.cm-link,
.cm-formatting-image+.cm-hmd-internal-link,
.cm-formatting-image+.cm-link {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

效果：

![image.png300](https://raw.githubusercontent.com/hacket/ObsidianOSS/master/obsidian/20240227174341.png)

Ref：https://www.yuque.com/fanmofeng/obsidian/rh5cke

链接美化

  • 常规状态的链接样式
  • hover 时链接的着重显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

.theme-light {
    /* 外部链接 ()[] */
    --external-link: #e39133;
    /* 内部链接 [[]] */
    --internal-link: #5d94ca;
}

.theme-dark {
    --external-link: #965e1edd;
    --internal-link: #58a8fadd;
}

.is-live-preview .cm-line:not(.cm-active) .cm-hmd-internal-link,
.markdown-preview-view .internal-link,
.is-live-preview .cm-line:not(.cm-active) .cm-link,
.markdown-preview-view .external-link {
    border-radius: 6px;
    padding: 2px 20px;
    border: 0.5px solid var(--c);
    box-sizing: border-box;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2705882353), -1px -1px 4px rgba(255, 255, 255, 0.2705882353);
    background: conic-gradient(from -135deg at 100% 50%, var(--c) 90deg, rgba(0, 0, 0, 0) 0) -2px var(--p, 1%)/var(--s, 0%) 200% no-repeat, conic-gradient(from -135deg at 1.2em 50%, rgba(0, 0, 0, 0) 90deg, var(--c) 0) calc(100% + 2px) var(--p, 1%)/var(--s, 0%) 200% no-repeat !important;
    transition: 0.3s ease-in-out, background-position 0s, padding 0s, border-radius 0s, border 0s;
}

.is-live-preview .cm-line:not(.cm-active) .cm-hmd-internal-link:hover,
.markdown-preview-view .internal-link:hover,
.is-live-preview .cm-line:not(.cm-active) .cm-link:hover,
.markdown-preview-view .external-link:hover {
    --p: 96%;
    --s: calc(50% + 0.9em);
    color: var(--background-primary) !important;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2705882353), -3px -3px 6px rgba(255, 255, 255, 0.2705882353);
}

.cm-link,
.external-link {
    color: var(--external-link) !important;
}

.cm-link,
.cm-link .cm-underline,
.external-link,
.external-link .cm-underline {
    text-decoration: none !important;
}

span.external-link {
    display: none !important;
}

.is-live-preview .cm-line:not(.cm-active) .cm-link,
.markdown-preview-view .external-link {
    --c: var(--external-link);
}

.cm-url,
.cm-hmd-internal-link,
.internal-link {
    color: var(--internal-link) !important;
}

.cm-url,
.cm-url .cm-underline,
.cm-hmd-internal-link,
.cm-hmd-internal-link .cm-underline,
.internal-link,
.internal-link .cm-underline {
    text-decoration: none !important;
}

.internal-link {
    padding: 0 4px;
}

.is-live-preview .cm-line:not(.cm-active) .cm-hmd-internal-link,
.markdown-preview-view .internal-link {
    --c: var(--internal-link);
}

.cm-formatting-link,
.cm-formatting-link-string,
.cm-formatting-image {
    font-weight: 700;
    margin: 0 2px;
    border: none !important;
    box-shadow: none !important;
}

.cm-formatting-link~.cm-hmd-internal-link,
.cm-formatting-link+.cm-link,
.cm-formatting-link-string~.cm-hmd-internal-link,
.cm-formatting-link-string+.cm-link,
.cm-formatting-image+.cm-hmd-internal-link,
.cm-formatting-image+.cm-link {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

效果：

仿 firefox tab 栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/**
仿firefox tab栏
https://www.yuque.com/fanmofeng/obsidian/dddwl1
*/

.mod-root .workspace-tab-header-container-inner {
    margin-top: 4px;
    padding-bottom: 4px;
}

.workspace-tab-header {
    padding-bottom: 0 !important;
}

.workspace-tab-header.is-active {
    --tab-radius-active: 6px;
    box-shadow: var(--shadow-s);
    border: 1px solid var(--color-base-30);
}

.workspace-tab-header .workspace-tab-header-inner-close-button {
    padding: 2px;
}

.workspace-split.mod-root .workspace-tab-header.is-active::before,
.workspace-split.mod-root .workspace-tab-header.is-active::after {
    box-shadow: none;
}

效果：

Ref: 仿firefox tab栏

Ref

Tools, Obsidian
obsidian
本文由作者按照 CC BY 4.0 进行授权