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:
parent
2310ed9abe
commit
248dcb761c
30
input.css
30
input.css
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user