banana v1

styles/components/heatmap.ts

@@ -9,30 +9,38 @@ export const heatmap = css`
     .total-contributions {
       left: 25px + 20px;
       bottom: 0 + 12px;
+      color: ${themeVars.color.text.light.num1};
+      font-size: 12px; // 增加字体大小
+      font-weight: 500; // 增加字体粗细
     }
     .total-contributions,
     .vch__legend-right {
       color: ${themeVars.color.text.light.num1};
     }
     .vch__container {
-      padding: 12px 20px;
+      padding: 16px 24px; // 增加内边距
       box-shadow: ${themeVars.github.shadow.floating.small};
       border-radius: 12px;
+      background-color: ${themeVars.color.menu}; // 添加背景色
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       // 覆盖热力图和图例的背景色
       .vch__day__square,
       .vch__legend__wrapper rect {
         // 圆角
-        rx: 2.5px;
-        ry: 2.5px;
+        rx: 3px; // 增加圆角
+        ry: 3px; // 增加圆角
         // hover 时的圆角
-        border-radius: 0.75px;
+        border-radius: 1px; // 增加圆角
         // 宽度和高度可以用来控制间隔
-        width: 9px;
-        height: 9px;
+        width: 11px; // 增加宽度
+        height: 11px; // 增加高度
         // 边框
         outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
-        // 边框向内偏移
-        outline-offset: -0.5px;
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        // 悬停效果
+        &:hover {
+          transform: scale(1.2); // 轻微放大效果
+        }
 
         &[style="fill: var(--color-secondary-alpha-60);"] {
           fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
@@ -65,6 +73,18 @@ export const heatmap = css`
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    #user-heatmap .vch__container {
+      padding: 12px 16px; // 调整内边距
+      .vch__day__square,
+      .vch__legend__wrapper rect {
+        width: 9px; // 调整宽度
+        height: 9px; // 调整高度
+      }
+    }
+  }
 `;
 
 // 动态
@@ -72,9 +92,19 @@ export const activity = css`
   .flex-list#activity-feed {
     border-radius: 12px;
     box-shadow: ${themeVars.github.shadow.floating.small};
+    background-color: ${themeVars.color.menu}; // 添加背景色
     > .flex-item {
       gap: 12px;
-      padding: 12px 8px 16px 14px;
+      padding: 16px 12px 20px 16px; // 增加内边距
+      border-bottom: 1px solid ${themeVars.color.light.border}; // 添加底部边框
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:last-child {
+        border-bottom: none; // 最后一项移除边框
+      }
+      &:hover {
+        background-color: ${themeVars.color.hover.opaque};
+        transform: translateX(2px); // 轻微右移效果
+      }
       > .flex-item-main {
         gap: 8px !important;
         > div:not([class]) {
@@ -88,13 +118,28 @@ export const activity = css`
       }
       // 动态的右侧 svg 图标
       .flex-item-trailing svg {
-        height: 20px;
-        width: 20px;
+        height: 24px; // 增加高度
+        width: 24px; // 增加宽度
+        color: ${themeVars.color.text.light.num1};
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       }
     }
     > .page.buttons {
       border-top: 1px solid ${themeVars.color.secondary.self};
-      padding: 12px 0px;
+      padding: 16px 0px; // 增加内边距
+      margin: 0; // 移除外边距
+      border-radius: 0 0 12px 12px; // 增加圆角
     }
   }
-`;
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .flex-list#activity-feed > .flex-item {
+      padding: 12px 8px 16px 12px; // 调整内边距
+      .flex-item-trailing svg {
+        height: 20px; // 调整高度
+        width: 20px; // 调整宽度
+      }
+    }
+  }
+`;