feat: color

_sass/colors/typography-light.scss

@@ -14,7 +14,7 @@
   --blockquote-text-color: #707070; /* 中灰色引用文本 */
   --link-color: #0066cc; /* 柔和的蓝色链接，易于识别 */
   --link-underline-color: #99badd; /* 浅蓝色下划线，增强链接可见性 */
-  --button-bg: linear-gradient(to bottom, #f7b7a3c2, #f5a08dc2); /* 柔和的粉橙色按钮背景渐变 */
+  --button-bg: linear-gradient(to bottom, rgba(247, 183, 163, 0.8), rgba(245, 160, 141, 0.8)); /* 柔和的粉橙色按钮背景渐变 */
   --btn-border-color: #e1e1e1; /* 浅灰色按钮边框 */
   --btn-backtotop-color: #5a5a5a; /* 返回顶部按钮颜色 */
   --btn-backtotop-border-color: #dddddd; /* 返回顶部按钮边框颜色 */
@@ -26,11 +26,11 @@
   /* Sidebar */
   --site-title-color: #6d6d6d; /* 侧边栏标题颜色 */
   --site-subtitle-color: #4f4f4f; /* 侧边栏副标题颜色 */
-  --sidebar-bg: linear-gradient(to right, #d1f3f8, #fefaf5); /**/
+  --sidebar-bg: linear-gradient(to right, #d1f3f8, #fefaf5); /* 浅蓝色到奶油色的渐变 */
   --sidebar-border-color: linear-gradient(to right, #efefef, #e0e0e0); /* 侧边栏边框渐变 */
   --sidebar-muted-color: #545454; /* 侧边栏次要文本颜色 */
   --sidebar-active-color: #1d1d1d; /* 侧边栏活动项颜色 */
-  --sidebar-hover-bg: linear-gradient(to right, rgba(223, 233, 241, 0.64), rgba(200, 220, 230, 0.64)); /* 侧边栏悬停背景渐变 */
+  --sidebar-hover-bg: linear-gradient(to right, rgba(223, 233, 241, 0.8), rgba(200, 220, 230, 0.8)); /* 侧边栏悬停背景渐变 */
   --sidebar-btn-bg: linear-gradient(to bottom, #ffffff, #f0f0f0); /* 侧边栏按钮背景渐变 */
   --sidebar-btn-color: #8e8e8e; /* 侧边栏按钮颜色 */
   --avatar-border-color: #f0f0f0; /* 头像边框颜色 */
@@ -54,7 +54,7 @@
   --btn-share-hover-color: #0d6efd; /* 分享按钮悬停颜色 */
   --card-bg: linear-gradient(to bottom, #ffffff, #f8f8f8); /* 卡片背景渐变 */
   --card-hovor-bg: linear-gradient(to bottom, #e2e2e2, #dcdcdc); /* 卡片悬停背景渐变 */
-  --card-shadow: rgba(104, 104, 104, 0.05) 0 2px 6px 0, rgba(211, 209, 209, 0.15) 0 0 0 1px; /* 卡片阴影 */
+  --card-shadow: rgba(0, 0, 0, 0.1) 0 4px 8px, rgba(0, 0, 0, 0.1) 0 0 0 1px; /* 卡片阴影 */
   --footnote-target-bg: lightcyan; /* 脚注目标背景颜色 */
   --tb-odd-bg: #fbfcfd; /* 表格奇数行背景颜色 */
   --tb-border-color: #eaeaea; /* 表格边框颜色 */
@@ -95,4 +95,20 @@
   .dark {
     display: none; /* 隐藏暗色模式 */
   }
+
+  /* 增强交互反馈 */
+  a:hover, button:hover, .btn:hover {
+    background-color: rgba(0, 0, 0, 0.1); /* 鼠标悬停时的背景色变化 */
+    transition: background-color 0.3s ease, color 0.3s ease; /* 柔和的过渡效果 */
+  }
+
+  /* 增加阴影效果 */
+  .card, .sidebar, .topbar {
+    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 8px, rgba(0, 0, 0, 0.1) 0 0 0 1px; /* 增加阴影 */
+  }
+
+  /* 使用柔和的过渡效果 */
+  .sidebar, .topbar, .card {
+    transition: box-shadow 0.3s ease, background-color 0.3s ease; /* 柔和的过渡效果 */
+  }
 } /* light-scheme */