Skip to content

Commit 3fa117f

Browse files
MoyfMoyf
authored
feat: More Settings for for heading decoration (#24)
* Add Newtab Icon * Update theme.css * feat: add more heading decoration settings * feat: set the default heading deco style
1 parent e31e87f commit 3fa117f

File tree

1 file changed

+108
-67
lines changed

1 file changed

+108
-67
lines changed

‎theme.css‎

Lines changed: 108 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,37 @@ settings:
196196
default-light: "hsla(31, 41%, 90%, 0.6)"
197197
default-dark: "hsla(204, 15%, 25%, 0.4)"
198198
199+
200+
- id: typograph-heading-decoration-setting
201+
title: Heading Decoration
202+
title.zh: 标题装饰
203+
type: heading
204+
level: 3
205+
collapsed: true
206+
207+
- id: composer--DisableHeadingLineEditingHighlight
208+
title: Disable Heading Line Editing Highlight
209+
title.zh: 禁用标题行编辑时高亮
210+
description: Disable line highlight when editing heading
211+
description.zh: 编辑标题时是否高亮所在行
212+
type: class-toggle
213+
default: false
214+
215+
- id: composer--DisableHeadingDecoration-ReadingView
216+
title: Disable Heading Decoration (Reading View)
217+
title.zh: 禁用标题装饰（阅读模式）
218+
description: Disable decoration before heading (reading view)
219+
description.zh: 禁用标题前方的竖杠装饰（阅读模式）
220+
type: class-toggle
221+
default: false
222+
- id: composer--DisableHeadingDecoration-LivePreview
223+
title: Disable Heading Decoration (Live Preview View)
224+
title.zh: 禁用标题装饰（实时编辑模式）
225+
description: Disable decoration before heading (live preview view)
226+
description.zh: 禁用标题前方的竖杠装饰（实时编辑模式）
227+
type: class-toggle
228+
default: false
229+
199230
- id: typograph-heading-size
200231
title: Heading Font Size (H1-H6)
201232
title.zh: 标题字体大小（H1-H6）
@@ -287,6 +318,8 @@ settings:
287318
format: hex
288319
default-light: "#808080"
289320
default-dark: "#666d78"
321+
322+
290323
- id: layout-settings
291324
title: Layout Settings
292325
title.zh: 布局设置
@@ -998,93 +1031,101 @@ body {
9981031
margin-inline-start: -28px;
9991032
}
10001033

1001-
.markdown-rendered > h1::before,
1002-
.markdown-rendered > h2::before,
1003-
.markdown-rendered > h3::before,
1004-
.markdown-rendered > h4::before,
1005-
.markdown-rendered > h5::before,
1006-
.markdown-rendered > h6::before,
1007-
.markdown-rendered .el-h1 > h1::before,
1008-
.markdown-rendered .el-h2 > h2::before,
1009-
.markdown-rendered .el-h3 > h3::before,
1010-
.markdown-rendered .el-h4 > h4::before,
1011-
.markdown-rendered .el-h5 > h5::before,
1012-
.markdown-rendered .el-h6 > h6::before {
1013-
content: " ";
1014-
height: 0.8em;
1015-
display: inline-block;
1016-
width: 4px;
1017-
border-radius: var(--size-4-1);
1018-
margin-right: var(--heading-indicator-spacing);
1019-
background-color: var(--h1-indicator-color);
1020-
transform: translateY(-0.1em);
1021-
vertical-align: middle;
1022-
}
1034+
/* decoration before heading (reading view) */
1035+
body:not(.composer--DisableHeadingDecoration-ReadingView) {
1036+
.markdown-rendered > h1::before,
1037+
.markdown-rendered > h2::before,
1038+
.markdown-rendered > h3::before,
1039+
.markdown-rendered > h4::before,
1040+
.markdown-rendered > h5::before,
1041+
.markdown-rendered > h6::before,
1042+
.markdown-rendered .el-h1 > h1::before,
1043+
.markdown-rendered .el-h2 > h2::before,
1044+
.markdown-rendered .el-h3 > h3::before,
1045+
.markdown-rendered .el-h4 > h4::before,
1046+
.markdown-rendered .el-h5 > h5::before,
1047+
.markdown-rendered .el-h6 > h6::before {
1048+
content: " ";
1049+
height: 0.8em;
1050+
display: inline-block;
1051+
width: 4px;
1052+
border-radius: var(--size-4-1);
1053+
margin-right: var(--heading-indicator-spacing);
1054+
background-color: var(--h1-indicator-color);
1055+
transform: translateY(-0.1em);
1056+
vertical-align: middle;
1057+
}
10231058

1024-
.markdown-rendered > h2::before,
1025-
.markdown-rendered .el-h2 > h2::before {
1026-
background-color: var(--h2-indicator-color);
1027-
}
10281059

1029-
.markdown-rendered > h3::before,
1030-
.markdown-rendered .el-h3 > h3::before {
1031-
background-color: var(--h3-indicator-color);
1032-
}
1060+
.markdown-rendered > h2::before,
1061+
.markdown-rendered .el-h2 > h2::before {
1062+
background-color: var(--h2-indicator-color);
1063+
}
10331064

1034-
.markdown-rendered > h4::before,
1035-
.markdown-rendered .el-h4 > h4::before {
1036-
background-color: var(--h4-indicator-color);
1037-
}
1065+
.markdown-rendered > h3::before,
1066+
.markdown-rendered .el-h3 > h3::before {
1067+
background-color: var(--h3-indicator-color);
1068+
}
10381069

1039-
.markdown-rendered > h5::before,
1040-
.markdown-rendered .el-h5 > h5::before {
1041-
background-color: var(--h5-indicator-color);
1042-
}
1070+
.markdown-rendered > h4::before,
1071+
.markdown-rendered .el-h4 > h4::before {
1072+
background-color: var(--h4-indicator-color);
1073+
}
1074+
1075+
.markdown-rendered > h5::before,
1076+
.markdown-rendered .el-h5 > h5::before {
1077+
background-color: var(--h5-indicator-color);
1078+
}
10431079

1044-
.markdown-rendered > h6::before,
1045-
.markdown-rendered .el-h6 > h6::before {
1046-
background-color: var(--h6-indicator-color);
1080+
.markdown-rendered > h6::before,
1081+
.markdown-rendered .el-h6 > h6::before {
1082+
background-color: var(--h6-indicator-color);
1083+
}
10471084
}
10481085

10491086
.markdown-source-view.mod-cm6 .HyperMD-header {
10501087
padding-top: var(--heading-spacing);
10511088
padding-bottom: 1rem;
10521089
}
10531090

1054-
.markdown-source-view.mod-cm6 .HyperMD-header.cm-active {
1091+
/* heading line highlight */
1092+
.composer--enable-heading-line-editing-highlight .markdown-source-view.mod-cm6 .HyperMD-header.cm-active {
10551093
background-color: var(--header-active-bg);
10561094
}
10571095

1058-
.is-live-preview .HyperMD-header::before {
1059-
content: " ";
1060-
display: inline-block;
1061-
width: 4px;
1062-
border-radius: var(--size-4-1);
1063-
margin-right: var(--heading-indicator-spacing);
1064-
background-color: var(--h1-indicator-color);
1065-
vertical-align: middle;
1066-
height: 0.8em;
1067-
transform: translateY(-0.1em);
1068-
}
1096+
/* decoration before heading (live preview) */
1097+
body:not(.composer--DisableHeadingDecoration-LivePreview) {
1098+
.is-live-preview .HyperMD-header::before {
1099+
content: " ";
1100+
display: inline-block;
1101+
width: 4px;
1102+
border-radius: var(--size-4-1);
1103+
margin-right: var(--heading-indicator-spacing);
1104+
background-color: var(--h1-indicator-color);
1105+
vertical-align: middle;
1106+
height: 0.8em;
1107+
transform: translateY(-0.1em);
1108+
}
10691109

1070-
.is-live-preview .HyperMD-header-2.HyperMD-header::before {
1071-
background-color: var(--h2-indicator-color);
1072-
}
1110+
.is-live-preview .HyperMD-header-2.HyperMD-header::before {
1111+
background-color: var(--h2-indicator-color);
1112+
}
10731113

1074-
.is-live-preview .HyperMD-header-3.HyperMD-header::before {
1075-
background-color: var(--h3-indicator-color);
1076-
}
1114+
.is-live-preview .HyperMD-header-3.HyperMD-header::before {
1115+
background-color: var(--h3-indicator-color);
1116+
}
10771117

1078-
.is-live-preview .HyperMD-header-4.HyperMD-header::before {
1079-
background-color: var(--h4-indicator-color);
1080-
}
1118+
.is-live-preview .HyperMD-header-4.HyperMD-header::before {
1119+
background-color: var(--h4-indicator-color);
1120+
}
10811121

1082-
.is-live-preview .HyperMD-header-5.HyperMD-header::before {
1083-
background-color: var(--h5-indicator-color);
1084-
}
1122+
.is-live-preview .HyperMD-header-5.HyperMD-header::before {
1123+
background-color: var(--h5-indicator-color);
1124+
}
10851125

1086-
.is-live-preview .HyperMD-header-6.HyperMD-header::before {
1087-
background-color: var(--h6-indicator-color);
1126+
.is-live-preview .HyperMD-header-6.HyperMD-header::before {
1127+
background-color: var(--h6-indicator-color);
1128+
}
10881129
}
10891130

10901131
/* list */

0 commit comments

Comments
 (0)