/* ====== H3 独立卡片（支持注释边界） ====== */
/* 1. H3 卡片标题（顶部圆角 + 边框） */
:root{
--sisi:-12px;
--you: 4px;
--yuanjiao:30px;
--yanse:#ffff00;
}
.cm-line:has(.cm-header-3) {
border: 2px solid var(--yanse);
border-bottom: none !important;
border-radius: var(--yuanjiao) var(--yuanjiao) 0 0;
padding: 12px 16px !important;
margin-top: 24px !important;
background-color: var(--background-secondary);
position: relative; /* 为注释边界做准备 */
}
/* 2. 卡片内容区域（直到下一个H3或注释） */
.cm-line:has(.cm-header-3) ~ .cm-line:not(:has(.cm-header-1, .cm-header-2, .cm-header-3)):not(:has(.cm-comment)) {
border-left: 2px solid var(--yanse);
border-right: 2px solid var(--yanse);
padding: 8px 16px;
margin: 0 !important;
background-color: var(--background-secondary);
}
/* 确保在源码模式和阅读模式都生效 */
.markdown-source-view .cm-content .cm-line:has(.cm-header-3),
.markdown-preview-section h3 {
margin-left: var(--sisi) !important;
margin-right: var(--you) !important;
}
/* 3. 卡片底部闭合（遇到注释或下一个H3时结束） */
.cm-line:has(.cm-header-3) ~ .cm-line:has(.cm-comment):not(:has(.cm-header)):before,
.cm-line:has(.cm-header-3) ~ .cm-line:has(.cm-header):before,
.cm-line:has(.cm-header-3) ~ .cm-line:not(:has(.cm-header)):last-child {
display: block;
border-bottom: 2px solid var(--yanse);
border-radius: 0 0 var(--yuanjiao) var(--yuanjiao);
margin-bottom: 24px !important;
border-left: 2px solid var(--yanse) !important;
border-right: 2px solid var(--yanse) !important;
padding: 15px 10px !important; /* 调整左右 padding（原为16px） */
margin-left: var(--sisi) !important; /* 新增左边距缩进 */
margin-right: var(--you) !important; /* 新增右边距缩进 */
}
/* 4. 处理注释边界情况 */
.cm-line:has(.cm-comment) {
position: relative;
}
.cm-line:has(.cm-header-3) ~ .cm-line:has(.cm-comment):before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
border-bottom: 0px solid var(--yanse);
z-index: 1;
}
/* 6. 确保H4在卡片内正常显示 */
.cm-line:has(.cm-header-4) {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* ====== 调整注释边界上方的圆角闭合 ====== */
.cm-line:has(.cm-header-3) ~ .cm-line:has(.cm-comment):not(:has(.cm-header)):before {
display: block;
border-bottom: 2px solid var(--yanse);
border-radius: 0 0 var(--yuanjiao) var(--yuanjiao);
margin-bottom: 24px !important;
content: "";
position: absolute;
top: -0px;
left: -0px;
right: -0px;
height: 0px;
background-color: var(--background-secondary);
}
/* 移除之前可能冲突的注释边界样式 */
.cm-line:has(.cm-header-3) ~ .cm-line:has(.cm-comment):before {
content: none;
}
/* ====== 仅调整卡片内容区域的左右缩进 ====== */
.cm-line:has(.cm-header-3) ~ .cm-line:not(:has(.cm-header-1, .cm-header-2, .cm-header-3)):not(:has(.cm-comment)) {
border-left: 2px solid var(--yanse) !important;
border-right: 2px solid var(--yanse) !important;
padding: 8px 10px !important; /* 调整左右 padding（原为16px） */
margin-left: var(--sisi) !important; /* 新增左边距缩进 */
margin-right: var(--you) !important; /* 新增右边距缩进 */
}
/* 修改 %% 注释的颜色 */
.cm-comment {
color: #ffffff; /* 橙色示例，可改为任何颜色 */
font-style: italic;
}
/* 可选：活动注释高亮 */
.cm-comment.cm-active {
background-color: rgba(255, 153, 0, 0.1); /* 半透明背景 */
}
/* ====== 调整 H2 高度（仅 Live Preview 编辑模式） ====== */
.cm-content .cm-line .cm-header-2 {
line-height: 2; /* 调整行高（可选） */
padding-top: 12px; /* 上内边距 */
padding-bottom: 12px; /* 下内边距 */
margin-top: 20px; /* 上外边距 */
margin-bottom: 20px; /* 下外边距 */
}
.cm-content .cm-line .cm-header-1 {
line-height: 2; /* 调整行高（可选） */
padding-top: 12px; /* 上内边距 */
padding-bottom: 12px; /* 下内边距 */
margin-top: 20px; /* 上外边距 */
margin-bottom: 20px; /* 下外边距 */
}
样式如下
例子：
我是三级标题
我是四级标题
我是正文
%%我是注释%%
这样就成为了一个卡片
以三级标题开头，以注释结尾
AI写的 我也看不懂 如果有需要修改的，用DEEPSEEK