diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 99b827c..a85ad45 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -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); }