对主题风格的圆角阴影进行了重定义
This commit is contained in:
@@ -21,6 +21,11 @@
|
||||
|
||||
:root {
|
||||
--ui-header-height: --spacing(16);
|
||||
/* 全局圆角与阴影,作为默认值,可被主题覆盖 */
|
||||
--ui-radius: 10px;
|
||||
--ui-button-radius: var(--ui-radius);
|
||||
--ui-card-radius: calc(var(--ui-radius) + 4px);
|
||||
--ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* 主题字体样式 - 使用Nuxt Font字体 */
|
||||
@@ -93,6 +98,11 @@
|
||||
--theme-background: #ffffff;
|
||||
--theme-text: #1f2937;
|
||||
--theme-border: #e5e7eb;
|
||||
/* 经典:中等圆角与轻阴影 */
|
||||
--ui-radius: 6px;
|
||||
--ui-button-radius: 6px;
|
||||
--ui-card-radius: 10px;
|
||||
--ui-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.theme-elegant {
|
||||
@@ -100,6 +110,11 @@
|
||||
--theme-background: #fafafa;
|
||||
--theme-text: #374151;
|
||||
--theme-border: #d1d5db;
|
||||
/* 优雅:更大圆角与柔和阴影 */
|
||||
--ui-radius: 12px;
|
||||
--ui-button-radius: 12px;
|
||||
--ui-card-radius: 14px;
|
||||
--ui-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.theme-minimal {
|
||||
@@ -107,6 +122,11 @@
|
||||
--theme-background: #ffffff;
|
||||
--theme-text: #111827;
|
||||
--theme-border: #f3f4f6;
|
||||
/* 简洁:极小圆角,无阴影 */
|
||||
--ui-radius: 3px;
|
||||
--ui-button-radius: 3px;
|
||||
--ui-card-radius: 6px;
|
||||
--ui-shadow: none;
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@@ -127,3 +147,32 @@
|
||||
--theme-text: #ffffff;
|
||||
--theme-border: #1f2937;
|
||||
}
|
||||
|
||||
/* 统一将主题风格映射到常见元素,尽量少侵入、仅做“润色” */
|
||||
/* 图片与代码块采用卡片圆角与轻阴影,增强主题差异感 */
|
||||
:where(.prose) img,
|
||||
:where(.prose) pre,
|
||||
:where(.prose) table {
|
||||
border-radius: var(--ui-card-radius);
|
||||
box-shadow: var(--ui-shadow);
|
||||
background-color: var(--theme-background);
|
||||
border: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
/* 按钮采用按钮圆角,保持各主题观感统一 */
|
||||
button,
|
||||
[role="button"] {
|
||||
border-radius: var(--ui-button-radius);
|
||||
}
|
||||
|
||||
/* 常见圆角工具类在不同主题下的“风格化”提升 */
|
||||
:where(.theme-classic) .rounded-lg,
|
||||
:where(.theme-classic) .rounded-xl { border-radius: var(--ui-card-radius); }
|
||||
|
||||
:where(.theme-elegant) .rounded-md { border-radius: var(--ui-button-radius); }
|
||||
:where(.theme-elegant) .rounded-lg { border-radius: calc(var(--ui-card-radius) + 2px); }
|
||||
:where(.theme-elegant) .rounded-xl { border-radius: calc(var(--ui-card-radius) + 6px); }
|
||||
|
||||
:where(.theme-minimal) .rounded-md { border-radius: var(--ui-radius); }
|
||||
:where(.theme-minimal) .rounded-lg { border-radius: calc(var(--ui-radius) + 2px); }
|
||||
:where(.theme-minimal) .rounded-xl { border-radius: calc(var(--ui-radius) + 4px); }
|
||||
|
Reference in New Issue
Block a user