banana v1

styles/components/repo.ts

@@ -1,11 +1,20 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 // 仓库头信息
 export const repoHeader = css`
   .page-content.repository .repo-header {
     // 点星/关注/克隆/RSS 按钮
     .ui.compact.button {
-      padding: 3px 12px;
+      padding: 6px 16px; // 增加内边距
+      border-radius: 8px; // 增加圆角
+      font-weight: 500; // 增加字体粗细
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        transform: translateY(-1px); // 轻微上移效果
+      }
+      &:active {
+        animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
+      }
     }
     // 仓库名称
     .flex-item {
@@ -17,15 +26,18 @@ export const repoHeader = css`
           display: flex;
           align-items: center;
           color: ${themeVars.color.text.self};
-          font-size: 16px;
+          font-size: 20px; // 增加字体大小
+          font-weight: 600; // 增加字体粗细
           text-decoration: none !important;
           min-width: 3ch;
-          padding: 4px 6px;
-          border-radius: ${otherThemeVars.border.radius};
+          padding: 8px 12px; // 增加内边距
+          border-radius: 8px; // 增加圆角
           margin-top: 0.5rem;
           margin-bottom: 0.5rem;
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateX(2px); // 轻微右移效果
           }
           &.muted:not(.tw-font-normal) {
             font-weight: 600;
@@ -45,20 +57,34 @@ export const repoMenu = css`
   .page-content.repository {
     .repository-summary .repository-menu {
       background-color: ${themeVars.color.box.header};
+      border-radius: 12px; // 增加圆角
+      padding: 8px; // 增加内边距
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
       .item {
         color: ${themeVars.color.text.light.num1};
-        height: 31px; // 文件列表下与右侧输入框对齐
+        height: 36px; // 增加高度
+        padding: 0 16px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        font-weight: 500; // 增加字体粗细
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         b {
           color: ${themeVars.color.text.self};
-          margin: 0 2px;
+          margin: 0 4px; // 增加边距
         }
         &.active {
           background-color: ${themeVars.color.active};
           color: ${themeVars.color.text.self};
-          font-weight: 500;
+          font-weight: 600; // 增加字体粗细
           svg {
             color: ${themeVars.color.text.light.num1};
           }
+          &:hover {
+            transform: translateY(-1px); // 轻微上移效果
+          }
+        }
+        &:hover:not(.active) {
+          background-color: ${themeVars.github.control.transparent.bgColor.hover};
+          transform: translateY(-1px); // 轻微上移效果
         }
       }
     }
@@ -74,12 +100,14 @@ export const repoTopic = css`
     border-radius: 25px;
     font-size: 12px;
     font-weight: 500;
-    padding: 5px 10px;
+    padding: 6px 12px; // 增加内边距
     background-color: ${themeVars.github.bgColor.accent.muted};
     color: ${themeVars.github.fgColor.accent};
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:hover {
       background-color: ${themeVars.github.bgColor.accent.emphasis};
       color: ${themeVars.color.white};
+      transform: translateY(-1px); // 轻微上移效果
     }
   }
 `;
@@ -88,5 +116,11 @@ export const repoTopic = css`
 export const closedIssueTableCell = css`
   .stats-table .table-cell.tw-bg-red[href="#closed-issues"] {
     background-color: ${themeVars.color.purple.self} !important;
+    border-radius: 8px; // 增加圆角
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+    &:hover {
+      opacity: 0.9; // 悬停时降低不透明度
+      transform: translateY(-1px); // 轻微上移效果
+    }
   }
-`;
+`;