refactor(ui): 圆角统一为三档梯度(32/16/8)+token化

将全站圆角收敛为语义化三档梯度:
- --radius-card  32px  容器(卡片/封面/admin主面板)
- --radius-paper 16px  内容(代码块/正文图片/iframe/表格)
- --radius-mini   8px  微元素(标签/复制按钮/toc/paginav)

此前内容区代码块、正文图片圆角仅 8px,与卡片 32px 设计语言断层
4 倍;表格 16px 是硬编码字面量散落 5 处。本次:
- --radius-paper 从 8px 提到 16px,代码块/图片/iframe 随之提档
- 表格 5 处 16px 字面量改用 var(--radius-paper)(值不变,语义化)
- toc/复制按钮/标签/paginav/blur-img 拆出到新 --radius-mini:8px
- 封面 2rem 改用 var(--radius-card)(值不变,语义化)

按钮/头像/徽章另用胶囊(rounded-full),独立于本梯度,不动。
This commit is contained in:
xfy 2026-07-13 16:21:02 +08:00
parent 2310ed9abe
commit 248dcb761c

View File

@ -27,7 +27,11 @@
--color-paper-accent-2: #179299; --color-paper-accent-2: #179299;
--color-paper-accent-2-soft: #ccd0da; --color-paper-accent-2-soft: #ccd0da;
--radius-paper: 8px; /* 圆角三档梯度容器 32 内容 16 微元素 8
按钮/头像/徽章另用胶囊Tailwind rounded-full独立于本梯度 */
--radius-card: 2rem; /* 32px文章卡片、封面、admin 主面板 */
--radius-paper: 16px; /* 16px代码块、正文图片、iframe、表格、输入框、admin 卡片 */
--radius-mini: 8px; /* 8px标签、复制按钮、toc、paginav */
--gap-paper: 24px; --gap-paper: 24px;
--content-gap-paper: 20px; --content-gap-paper: 20px;
--nav-width-paper: 1024px; --nav-width-paper: 1024px;
@ -203,13 +207,13 @@
details.toc { details.toc {
margin-bottom: var(--content-gap-paper); margin-bottom: var(--content-gap-paper);
background: var(--color-paper-code-bg); background: var(--color-paper-code-bg);
border-radius: var(--radius-paper); border-radius: var(--radius-mini);
border: 1px solid var(--color-paper-border); border: 1px solid var(--color-paper-border);
} }
details.toc summary { details.toc summary {
padding: 0.3rem 1.2rem; padding: 0.3rem 1.2rem;
border-radius: var(--radius-paper); border-radius: var(--radius-mini);
cursor: pointer; cursor: pointer;
display: list-item; display: list-item;
width: 100%; width: 100%;
@ -277,7 +281,7 @@
/* 封面用 blur-img 结构:去 margin、保持圆角内层 img cover 填充 */ /* 封面用 blur-img 结构:去 margin、保持圆角内层 img cover 填充 */
.entry-cover .blur-img { .entry-cover .blur-img {
margin: 0; margin: 0;
border-radius: 2rem; border-radius: var(--radius-card);
overflow: hidden; overflow: hidden;
} }
.entry-cover img { .entry-cover img {
@ -421,7 +425,7 @@
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
border-radius: 16px; border-radius: var(--radius-paper);
box-shadow: 0 0 0 1px var(--color-paper-border); box-shadow: 0 0 0 1px var(--color-paper-border);
} }
@ -436,19 +440,19 @@
} }
.md-content table thead th:first-child { .md-content table thead th:first-child {
border-top-left-radius: 16px; border-top-left-radius: var(--radius-paper);
} }
.md-content table thead th:last-child { .md-content table thead th:last-child {
border-top-right-radius: 16px; border-top-right-radius: var(--radius-paper);
} }
.md-content table tbody tr:last-child td:first-child { .md-content table tbody tr:last-child td:first-child {
border-bottom-left-radius: 16px; border-bottom-left-radius: var(--radius-paper);
} }
.md-content table tbody tr:last-child td:last-child { .md-content table tbody tr:last-child td:last-child {
border-bottom-right-radius: 16px; border-bottom-right-radius: var(--radius-paper);
} }
.md-content table tbody td { .md-content table tbody td {
@ -540,7 +544,7 @@
right: 8px; right: 8px;
color: var(--color-paper-theme); color: var(--color-paper-theme);
background: var(--color-paper-tertiary); background: var(--color-paper-tertiary);
border-radius: var(--radius-paper); border-radius: var(--radius-mini);
padding: 4px 8px; padding: 4px 8px;
font-size: 12px; font-size: 12px;
user-select: none; user-select: none;
@ -607,7 +611,7 @@
font-size: 14px; font-size: 14px;
line-height: 34px; line-height: 34px;
background: var(--color-paper-code-bg); background: var(--color-paper-code-bg);
border-radius: var(--radius-paper); border-radius: var(--radius-mini);
border: 1px solid var(--color-paper-border); border: 1px solid var(--color-paper-border);
text-decoration: none; text-decoration: none;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
@ -621,7 +625,7 @@
.paginav { .paginav {
display: flex; display: flex;
border-radius: var(--radius-paper); border-radius: var(--radius-mini);
background: var(--color-paper-code-bg); background: var(--color-paper-code-bg);
border: 1px solid var(--color-paper-border); border: 1px solid var(--color-paper-border);
overflow: hidden; overflow: hidden;
@ -738,7 +742,7 @@
aspect-ratio: var(--ar); aspect-ratio: var(--ar);
/* 加载中灰底(占位图未加载完时) */ /* 加载中灰底(占位图未加载完时) */
background: var(--color-paper-code-bg); background: var(--color-paper-code-bg);
border-radius: 6px; border-radius: var(--radius-mini);
margin: 1em 0; margin: 1em 0;
} }
.blur-img-placeholder { .blur-img-placeholder {