From 588495d8636f9ab647a14b891941303654a3420f Mon Sep 17 00:00:00 2001
From: xgopilot <noreply@goplus.org>
Date: Fri, 31 Oct 2025 06:01:51 +0000
Subject: [PATCH 1/2] feat(theme): compact theme settings modal styles to match
 clean site design\n\n- Reduce modal size, paddings, and shadow\n- Simplify
 overlay and header\n- Trim hover effects and active markers\n- Scale down
 color/radius/font option UI\n\nCloses #21\n\nGenerated with
 [codeagent](https://github.com/qbox/codeagent)\nCo-authored-by: minorcell
 <120795714+minorcell@users.noreply.github.com>

---
 .../theme/components/ThemeSettings.vue        | 190 ++++++++----------
 1 file changed, 85 insertions(+), 105 deletions(-)

diff --git a/docs/.vitepress/theme/components/ThemeSettings.vue b/docs/.vitepress/theme/components/ThemeSettings.vue
index fa39114f..909f7524 100644
--- a/docs/.vitepress/theme/components/ThemeSettings.vue
+++ b/docs/.vitepress/theme/components/ThemeSettings.vue
@@ -719,7 +719,6 @@ onUnmounted(() => {
 <style scoped>
 .theme-settings-container {
   display: inline-block;
-  position: relative;
 }
 
 .theme-settings-button {
@@ -732,7 +731,7 @@ onUnmounted(() => {
   background: transparent;
   color: var(--vp-c-text-2);
   cursor: pointer;
-  transition: all 0.25s ease;
+  transition: color 0.2s ease, background 0.2s ease;
   outline: none;
 }
 
@@ -762,7 +761,7 @@ onUnmounted(() => {
 .theme-settings-icon {
   width: 16px;
   height: 16px;
-  transition: all 0.25s ease;
+  transition: color 0.2s ease, background 0.2s ease;
 }
 
 .theme-modal-overlay {
@@ -771,13 +770,12 @@ onUnmounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2000;
-  animation: fadeIn 0.3s ease-out;
+  animation: fadeIn 0.2s ease-out;
 }
 
 @keyframes fadeIn {
@@ -792,12 +790,12 @@ onUnmounted(() => {
 .theme-modal {
   background: var(--vp-c-bg);
   width: 90vw;
-  border-radius: var(--border-radius-xl);
-  max-width: 700px;
-  max-height: 90vh;
+  border-radius: var(--border-radius-small);
+  max-width: 560px;
+  max-height: 80vh;
   overflow: hidden;
-  animation: slideUp 0.3s ease-out;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  animation: slideUp 0.2s ease-out;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 }
 
 @keyframes slideUp {
@@ -815,13 +813,12 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 24px 28px;
-  background: var(--vp-c-bg-soft);
+  padding: 10px 12px;
 }
 
 .theme-modal-title {
   margin: 0;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 600;
   color: var(--vp-c-text-1);
 }
@@ -831,24 +828,23 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   width: 36px;
-  height: 36px;
+  height: 28px;
   border: none;
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--border-radius-small);
   background: transparent;
   color: var(--vp-c-text-2);
   cursor: pointer;
-  transition: all 0.25s ease;
+  transition: color 0.2s ease, background 0.2s ease;
 }
 
 .theme-modal-close:hover {
   color: var(--vp-c-text-1);
   background: var(--vp-c-bg);
-  transform: rotate(90deg);
 }
 
 .theme-settings-content {
-  padding: 28px;
-  max-height: calc(90vh - 100px);
+  padding: 0;
+  max-height: calc(80vh - 80px);
   overflow-y: auto;
 }
 
@@ -866,7 +862,7 @@ onUnmounted(() => {
 }
 
 .setting-section {
-  margin-bottom: 36px;
+  margin-bottom: 12px;
 }
 
 .setting-section:last-child {
@@ -874,7 +870,7 @@ onUnmounted(() => {
 }
 
 .setting-title {
-  margin: 0 0 20px 0;
+  margin: 0 0 14px 0;
   font-size: 18px;
   font-weight: 600;
   color: var(--vp-c-text-1);
@@ -890,25 +886,21 @@ onUnmounted(() => {
 /* 外观模式 - 无边框设计 */
 .appearance-options {
   display: flex;
-  gap: 12px;
-  background: var(--vp-c-bg-soft);
-  padding: 8px;
-  border-radius: var(--border-radius-large);
+  gap: 6px;
 }
 
 .appearance-option {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 16px 20px;
+  gap: 6px;
+  padding: 10px 12px;
   border: none;
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--border-radius-small);
   background: transparent;
   cursor: pointer;
-  transition: all 0.25s ease;
+  transition: color 0.2s ease, background 0.2s ease;
   flex: 1;
-  position: relative;
 }
 
 .appearance-option:hover {
@@ -917,7 +909,6 @@ onUnmounted(() => {
 
 .appearance-option.active {
   background: var(--vp-c-bg);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
 }
 
 .appearance-option.active::after {
@@ -942,7 +933,7 @@ onUnmounted(() => {
 }
 
 .appearance-label {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--vp-c-text-1);
   font-weight: 500;
 }
@@ -950,30 +941,26 @@ onUnmounted(() => {
 /* 颜色选择 - 网格布局 */
 .color-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  gap: 16px;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  border-radius: var(--border-radius-large);
+  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
+  gap: 6px;
+  padding: 12px 0;
 }
 
 .color-option {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 10px;
-  padding: 16px 12px;
+  gap: 6px;
+  padding: 10px 8px;
   border: none;
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--border-radius-small);
   cursor: pointer;
-  transition: all 0.25s ease;
+  transition: color 0.2s ease, background 0.2s ease;
   background: transparent;
-  position: relative;
 }
 
 .color-option:hover {
-  background: var(--vp-c-bg);
-  transform: translateY(-4px);
+  background: var(--vp-c-bg-soft);
 }
 
 .color-option.active {
@@ -998,15 +985,14 @@ onUnmounted(() => {
 }
 
 .color-preview {
-  width: 40px;
-  height: 40px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
   transition: transform 0.25s ease;
 }
 
 .color-option:hover .color-preview {
-  transform: scale(1.1);
 }
 
 .custom-color-preview {
@@ -1026,11 +1012,10 @@ onUnmounted(() => {
 
 /* 自定义颜色输入区域 */
 .custom-color-section {
-  margin-top: 20px;
-  padding: 20px;
+  margin-top: 12px;
+  padding: 12px 0;
   background: var(--vp-c-bg-soft);
-  border-radius: var(--border-radius-large);
-  animation: slideDown 0.3s ease-out;
+  border-radius: var(--border-radius-small);
 }
 
 @keyframes slideDown {
@@ -1046,7 +1031,7 @@ onUnmounted(() => {
 
 .custom-color-inputs {
   display: flex;
-  gap: 20px;
+  gap: 6px;
 }
 
 .color-input-group {
@@ -1055,8 +1040,8 @@ onUnmounted(() => {
 
 .color-input-group label {
   display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
+  margin-bottom: 6px;
+  font-size: 13px;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
@@ -1064,63 +1049,60 @@ onUnmounted(() => {
 .color-input-wrapper {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 6px;
 }
 
 .color-picker {
-  width: 48px;
-  height: 36px;
+  width: 40px;
+  height: 28px;
   border: none;
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--border-radius-small);
   cursor: pointer;
   background: none;
 }
 
 .color-text-input {
   flex: 1;
-  height: 36px;
-  padding: 0 12px;
+  height: 28px;
+  padding: 0 10px;
   border: none;
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--border-radius-small);
   background: var(--vp-c-bg);
   color: var(--vp-c-text-1);
-  font-size: 14px;
+  font-size: 13px;
   font-family: monospace;
   outline: none;
-  transition: all 0.25s ease;
+  transition: color 0.2s ease, background 0.2s ease;
 }
 
 .color-text-input:focus {
   background: var(--vp-c-bg-alt);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 /* 圆角预设 */
 .radius-presets {
   display: flex;
-  gap: 12px;
+  gap: 6px;
   flex-wrap: wrap;
   background: var(--vp-c-bg-soft);
-  padding: 16px;
-  border-radius: var(--border-radius-large);
-  margin-bottom: 20px;
+  padding: 0;
+  border-radius: var(--border-radius-small);
+  margin-bottom: 12px;
 }
 
 .radius-preset {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 16px;
+  gap: 6px;
+  padding: 0;
   border: none;
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--border-radius-small);
   cursor: pointer;
-  transition: all 0.25s ease;
+  transition: color 0.2s ease, background 0.2s ease;
   flex: 1;
-  min-width: 80px;
+  min-width: 72px;
   background: transparent;
-  position: relative;
 }
 
 .radius-preset:hover {
@@ -1164,14 +1146,14 @@ onUnmounted(() => {
 .custom-radius-section,
 .font-size-section {
   background: var(--vp-c-bg-soft);
-  padding: 20px;
-  border-radius: var(--border-radius-large);
+  padding: 12px 0;
+  border-radius: var(--border-radius-small);
 }
 
 .slider-group {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 6px;
 }
 
 .slider-header {
@@ -1187,7 +1169,7 @@ onUnmounted(() => {
 }
 
 .slider-value {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--theme-primary);
   font-family: monospace;
@@ -1196,7 +1178,7 @@ onUnmounted(() => {
 .slider-wrapper {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 6px;
 }
 
 .radius-slider,
@@ -1250,28 +1232,26 @@ onUnmounted(() => {
 .font-options {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 16px;
-  border-radius: var(--border-radius-large);
+  padding: 0;
+  border-radius: var(--border-radius-small);
 }
 
 .font-option {
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 16px;
+  gap: 6px;
+  padding: 0;
   border: none;
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--border-radius-small);
   cursor: pointer;
-  transition: all 0.25s ease;
+  transition: color 0.2s ease, background 0.2s ease;
   background: transparent;
-  position: relative;
 }
 
 .font-option:hover {
   background: var(--vp-c-bg);
-  transform: translateY(-1px);
 }
 
 .font-option.active {
@@ -1291,7 +1271,7 @@ onUnmounted(() => {
 }
 
 .font-preview {
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 500;
   color: var(--vp-c-text-1);
   min-width: 100px;
@@ -1323,16 +1303,16 @@ onUnmounted(() => {
 .reset-button {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
+  gap: 6px;
+  padding: 10px 16px;
   border: none;
-  border-radius: var(--border-radius-large);
+  border-radius: var(--border-radius-small);
   background: var(--vp-c-bg-soft);
   color: var(--vp-c-text-2);
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.25s ease;
+  transition: color 0.2s ease, background 0.2s ease;
 }
 
 .reset-button:hover {
@@ -1348,11 +1328,11 @@ onUnmounted(() => {
   }
 
   .theme-modal-header {
-    padding: 20px 24px;
+    padding: 14px 16px;
   }
 
   .theme-settings-content {
-    padding: 24px 20px;
+    padding: 12px 12px;
   }
 
   .appearance-options {
@@ -1361,12 +1341,12 @@ onUnmounted(() => {
 
   .color-grid {
     grid-template-columns: repeat(3, 1fr);
-    padding: 16px;
+    padding: 0;
   }
 
   .custom-color-inputs {
     flex-direction: column;
-    gap: 16px;
+    gap: 6px;
   }
 
   .radius-presets {
@@ -1374,14 +1354,14 @@ onUnmounted(() => {
   }
 
   .radius-preset {
-    flex: 0 1 calc(20% - 8px);
-    min-width: 60px;
+    flex: 0 1 calc(20% - 6px);
+    min-width: 56px;
   }
 
   .font-option {
     flex-direction: column;
     align-items: flex-start;
-    gap: 12px;
+    gap: 6px;
   }
 
   .font-preview {
@@ -1400,7 +1380,7 @@ onUnmounted(() => {
 }
 
 .dark .theme-modal {
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
 }
 
 .dark .color-preview {

From 12d0209f1a5f37a5a1f83df31873fe2d568644aa Mon Sep 17 00:00:00 2001
From: xgopilot <noreply@goplus.org>
Date: Fri, 31 Oct 2025 06:08:31 +0000
Subject: [PATCH 2/2] style(theme): lighten and streamline ThemeSettings modal
 to match minimal site aesthetic

- Softer overlay; smaller modal max-width; subtle border
- Leaner paddings and gaps; remove heavy active indicators
- Use soft backgrounds + divider borders on hover
- Active states use thin border accents instead of badges/bars

Generated with [codeagent](https://github.com/qbox/codeagent)
Co-authored-by: minorcell <120795714+minorcell@users.noreply.github.com>
---
 .../theme/components/ThemeSettings.vue        | 132 ++++++++++--------
 1 file changed, 71 insertions(+), 61 deletions(-)

diff --git a/docs/.vitepress/theme/components/ThemeSettings.vue b/docs/.vitepress/theme/components/ThemeSettings.vue
index 909f7524..90ca0b3d 100644
--- a/docs/.vitepress/theme/components/ThemeSettings.vue
+++ b/docs/.vitepress/theme/components/ThemeSettings.vue
@@ -726,18 +726,18 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   padding: 6px 8px;
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--border-radius-small);
   background: transparent;
   color: var(--vp-c-text-2);
   cursor: pointer;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
   outline: none;
 }
 
 .theme-settings-button:hover {
   color: var(--vp-c-text-1);
-  background: var(--vp-c-bg-soft);
+  background: transparent;
 }
 
 .theme-settings-button:hover .theme-settings-icon {
@@ -761,7 +761,7 @@ onUnmounted(() => {
 .theme-settings-icon {
   width: 16px;
   height: 16px;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
 }
 
 .theme-modal-overlay {
@@ -770,7 +770,7 @@ onUnmounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -789,13 +789,14 @@ onUnmounted(() => {
 
 .theme-modal {
   background: var(--vp-c-bg);
-  width: 90vw;
+  width: 88vw;
   border-radius: var(--border-radius-small);
-  max-width: 560px;
+  max-width: 480px;
   max-height: 80vh;
   overflow: hidden;
   animation: slideUp 0.2s ease-out;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--vp-c-divider);
 }
 
 @keyframes slideUp {
@@ -813,7 +814,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 12px;
+  padding: 8px 10px;
 }
 
 .theme-modal-title {
@@ -828,22 +829,23 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   width: 36px;
-  height: 28px;
-  border: none;
+  height: 24px;
+  border: 1px solid transparent;
   border-radius: var(--border-radius-small);
   background: transparent;
   color: var(--vp-c-text-2);
   cursor: pointer;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
 }
 
 .theme-modal-close:hover {
   color: var(--vp-c-text-1);
-  background: var(--vp-c-bg);
+  background: transparent;
+  border-color: var(--vp-c-divider);
 }
 
 .theme-settings-content {
-  padding: 0;
+  padding: 12px;
   max-height: calc(80vh - 80px);
   overflow-y: auto;
 }
@@ -862,7 +864,7 @@ onUnmounted(() => {
 }
 
 .setting-section {
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .setting-section:last-child {
@@ -870,8 +872,8 @@ onUnmounted(() => {
 }
 
 .setting-title {
-  margin: 0 0 14px 0;
-  font-size: 18px;
+  margin: 0 0 10px 0;
+  font-size: 16px;
   font-weight: 600;
   color: var(--vp-c-text-1);
 }
@@ -894,21 +896,23 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 6px;
-  padding: 10px 12px;
-  border: none;
+  padding: 8px 10px;
+  border: 1px solid transparent;
   border-radius: var(--border-radius-small);
   background: transparent;
   cursor: pointer;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
   flex: 1;
 }
 
 .appearance-option:hover {
-  background: var(--vp-c-bg);
+  background: transparent;
+  border-color: var(--vp-c-divider);
 }
 
 .appearance-option.active {
-  background: var(--vp-c-bg);
+  background: transparent;
+  border-color: var(--vp-c-divider);
 }
 
 .appearance-option.active::after {
@@ -943,7 +947,7 @@ onUnmounted(() => {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
   gap: 6px;
-  padding: 12px 0;
+  padding: 8px 0;
 }
 
 .color-option {
@@ -951,20 +955,21 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 6px;
-  padding: 10px 8px;
-  border: none;
+  padding: 8px 6px;
+  border: 1px solid transparent;
   border-radius: var(--border-radius-small);
   cursor: pointer;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
   background: transparent;
 }
 
 .color-option:hover {
-  background: var(--vp-c-bg-soft);
+  background: transparent;
 }
 
 .color-option.active {
-  background: var(--vp-c-bg);
+  background: transparent;
+  border-color: var(--vp-c-divider);
 }
 
 .color-option.active::after {
@@ -985,10 +990,10 @@ onUnmounted(() => {
 }
 
 .color-preview {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   transition: transform 0.25s ease;
 }
 
@@ -1013,8 +1018,8 @@ onUnmounted(() => {
 /* 自定义颜色输入区域 */
 .custom-color-section {
   margin-top: 12px;
-  padding: 12px 0;
-  background: var(--vp-c-bg-soft);
+  padding: 8px 0;
+  background: transparent;
   border-radius: var(--border-radius-small);
 }
 
@@ -1054,8 +1059,8 @@ onUnmounted(() => {
 
 .color-picker {
   width: 40px;
-  height: 28px;
-  border: none;
+  height: 24px;
+  border: 1px solid transparent;
   border-radius: var(--border-radius-small);
   cursor: pointer;
   background: none;
@@ -1063,16 +1068,16 @@ onUnmounted(() => {
 
 .color-text-input {
   flex: 1;
-  height: 28px;
+  height: 24px;
   padding: 0 10px;
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--border-radius-small);
   background: var(--vp-c-bg);
   color: var(--vp-c-text-1);
   font-size: 13px;
   font-family: monospace;
   outline: none;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
 }
 
 .color-text-input:focus {
@@ -1084,10 +1089,10 @@ onUnmounted(() => {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
-  background: var(--vp-c-bg-soft);
-  padding: 0;
+  background: transparent;
+  padding: 6px 0;
   border-radius: var(--border-radius-small);
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .radius-preset {
@@ -1095,22 +1100,24 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 6px;
-  padding: 0;
-  border: none;
+  padding: 6px 0;
+  border: 1px solid transparent;
   border-radius: var(--border-radius-small);
   cursor: pointer;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
   flex: 1;
   min-width: 72px;
   background: transparent;
 }
 
 .radius-preset:hover {
-  background: var(--vp-c-bg);
+  background: transparent;
+  border-color: var(--vp-c-divider);
 }
 
 .radius-preset.active {
-  background: var(--vp-c-bg);
+  background: transparent;
+  border-color: var(--vp-c-divider);
 }
 
 .radius-preset.active::after {
@@ -1145,8 +1152,8 @@ onUnmounted(() => {
 /* 自定义滑动条 */
 .custom-radius-section,
 .font-size-section {
-  background: var(--vp-c-bg-soft);
-  padding: 12px 0;
+  background: transparent;
+  padding: 8px 0;
   border-radius: var(--border-radius-small);
 }
 
@@ -1233,8 +1240,8 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  background: var(--vp-c-bg-soft);
-  padding: 0;
+  background: transparent;
+  padding: 6px 0;
   border-radius: var(--border-radius-small);
 }
 
@@ -1242,20 +1249,22 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 0;
-  border: none;
+  padding: 6px 0;
+  border: 1px solid transparent;
   border-radius: var(--border-radius-small);
   cursor: pointer;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
   background: transparent;
 }
 
 .font-option:hover {
-  background: var(--vp-c-bg);
+  background: transparent;
+  border-color: var(--vp-c-divider);
 }
 
 .font-option.active {
-  background: var(--vp-c-bg);
+  background: transparent;
+  border-color: var(--vp-c-divider);
 }
 
 .font-option.active::after {
@@ -1305,18 +1314,19 @@ onUnmounted(() => {
   align-items: center;
   gap: 6px;
   padding: 10px 16px;
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--border-radius-small);
-  background: var(--vp-c-bg-soft);
+  background: transparent;
   color: var(--vp-c-text-2);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
 }
 
 .reset-button:hover {
-  background: var(--vp-c-bg-alt);
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-divider);
   color: var(--vp-c-text-1);
 }
 
@@ -1341,7 +1351,7 @@ onUnmounted(() => {
 
   .color-grid {
     grid-template-columns: repeat(3, 1fr);
-    padding: 0;
+    padding: 6px 0;
   }
 
   .custom-color-inputs {
@@ -1376,7 +1386,7 @@ onUnmounted(() => {
 
 /* 暗色模式适配 */
 .dark .theme-modal-overlay {
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(0, 0, 0, 0.4);
 }
 
 .dark .theme-modal {