style(checkbox): 文章页 task-list checkbox 改用 appearance:none 自绘圆角方框

原生 checkbox 形状随浏览器而异(Safari 圆角小框/Chrome 直角),
accent-color 只能上色无法统一形状。改为全自定义:
- appearance:none + 4px 圆角 + 1.15rem 方框
- 勾选时 accent 绿填充,对勾用内联 SVG background
  (<input> 是替换元素,吃不到伪元素)
- 亮色:中绿底 #40a02b + 白对勾(对比 ≥4.5:1)
- 暗色:浅绿底 #a6e3a1 + 深对勾 #1e1e2e(白对勾在浅绿上对比不足)
- 文章内 checkbox 是 disabled 展示态,故不加 focus/cursor 交互
This commit is contained in:
xfy 2026-07-16 15:58:54 +08:00
parent e526da0571
commit 1ea11b6434

View File

@ -405,12 +405,36 @@
}
.md-content li > input[type="checkbox"] {
/* appearance:none 全自定义告别浏览器原生方框形状/边框差异
对勾用内联 SVG background<input> 是替换元素吃不到 ::after
颜色按主题烘焙亮色中绿底配白对勾暗色浅绿底配深对勾对比最强
文章内 checkbox disabled 的纯展示态故不加 focus/cursor 交互 */
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
width: 1rem;
height: 1rem;
width: 1.15rem;
height: 1.15rem;
margin: 0;
accent-color: var(--color-paper-accent);
border: 1.5px solid var(--color-paper-border);
border-radius: 4px;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 0.75rem;
cursor: default;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.md-content li > input[type="checkbox"]:checked {
background-color: var(--color-paper-accent);
border-color: var(--color-paper-accent);
/* 亮色:中绿 #40a02b 底 + 白对勾(对比 ≥ 4.5:1 */
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%208.5l3%203%206-6.5'/%3E%3C/svg%3E");
}
/* 暗色:浅绿 #a6e3a1 底上白对勾对比不足,改深色对勾(主题底色 #1e1e2e */
.dark .md-content li > input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%231e1e2e'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%208.5l3%203%206-6.5'/%3E%3C/svg%3E");
}
.md-content hr {