banana v1

styles/components/clone.ts

@@ -1,4 +1,4 @@
-import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
+import { css, customThemeVars, themeVars } from "src/types/vars";
 
 // 克隆按钮的弹窗
 export const clone = css`
@@ -12,22 +12,28 @@ export const clone = css`
         &:first-of-type {
           font-weight: 600;
           margin-top: 16px;
+          font-size: 16px; // 增加字体大小
         }
       }
       // 按钮组
       .clone-panel-tab {
         display: flex;
         gap: 8px;
-        margin-left: 16px;
+        margin: 16px; // 增加外边距
+        padding: 4px; // 增加内边距
+        background-color: ${themeVars.color.hover.self}; // 添加背景色
+        border-radius: 12px; // 增加圆角
         // 按钮
         .item {
           color: ${themeVars.color.text.self};
           font-weight: 600;
-          padding: 6px 8px;
-          margin: 8px 0;
+          padding: 8px 12px; // 增加内边距
+          margin: 4px; // 调整外边距
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
-            border-radius: ${otherThemeVars.border.radius};
+            transform: translateY(-1px); // 轻微上移效果
           }
           &.active:after {
             content: "";
@@ -38,65 +44,84 @@ export const clone = css`
             width: 100%;
             height: 2px;
             background: ${themeVars.github.underlineNav.borderColor.active};
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
           }
         }
         .item.active {
           border-bottom: 0;
           position: relative;
+          background-color: ${themeVars.color.menu}; // 添加背景色
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
         }
       }
       // 克隆地址
       .ui.input.action {
+        margin: 0 16px 16px 16px; // 增加外边距
         > input {
           border: 1px solid ${themeVars.color.light.border};
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
           min-width: 150px;
           max-width: 400px;
           width: ${customThemeVars.cloneMenuWidth};
+          padding: 8px 12px; // 增加内边距
+          font-size: 14px; // 增加字体大小
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             border: 1px solid ${themeVars.color.light.border};
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
           }
           &:focus,
           &:focus-visible {
             border-color: ${themeVars.github.borderColor.accent.emphasis};
+            box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
           }
         }
         .ui.ui.ui.button {
           background-color: unset;
           border: unset;
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           color: ${themeVars.color.text.light.num1};
           padding: 0;
-          width: 32px;
-          height: 32px;
-          margin-left: 5px;
+          width: 36px; // 增加宽度
+          height: 36px; // 增加高度
+          margin-left: 8px; // 增加左边距
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: scale(1.05); // 轻微放大效果
           }
           svg {
-            width: 16px;
-            height: 16px;
+            width: 18px; // 增加宽度
+            height: 18px; // 增加高度
           }
         }
       }
       // 面板操作列表之间的分割线
       .divider {
         margin: 0;
+        border-color: ${themeVars.color.light.border}; // 使用主题色
       }
       // 面板操作列表
       .clone-panel-list {
         margin: 8px;
         .item {
-          border-radius: ${otherThemeVars.border.radius};
-          padding: 6px 8px;
+          border-radius: 8px; // 增加圆角
+          padding: 8px 12px; // 增加内边距
           line-height: 1.5;
-          margin: 0;
+          margin: 4px 8px; // 调整外边距
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           svg {
             color: ${themeVars.color.text.light.num1};
-            margin-right: 0.25rem;
+            margin-right: 0.5rem; // 增加右边距
+            width: 16px; // 增加宽度
+            height: 16px; // 增加高度
+          }
+          &:hover {
+            color: ${themeVars.color.text.self};
+            text-decoration: none;
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateX(2px); // 轻微右移效果
           }
         }
         > .item:hover {
@@ -107,4 +132,24 @@ export const clone = css`
       }
     }
   }
-`;
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .tippy-box .clone-panel-popup {
+      .clone-panel-tab .item {
+        padding: 6px 10px; // 调整内边距
+      }
+      
+      .ui.input.action {
+        > input {
+          padding: 6px 10px; // 调整内边距
+          font-size: 13px; // 调整字体大小
+        }
+        .ui.ui.ui.button {
+          width: 32px; // 调整宽度
+          height: 32px; // 调整高度
+        }
+      }
+    }
+  }
+`;

styles/components/commit.ts

@@ -1,25 +1,41 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 // 提交列表
 export const commit = css`
   .page-content.repository {
     // 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
     #commits-table.ui.basic.striped.table tbody.commit-list {
+      border-radius: 12px; // 增加圆角
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
+      overflow: hidden; // 隐藏溢出内容
       // 作者
       .author {
         // 作者名称
         .author-wrapper {
           color: ${themeVars.color.text.light.num1};
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            color: ${themeVars.color.primary.self};
+          }
         }
       }
       // SHA 标签
       .sha {
         a.ui.label.commit-id-short {
-          padding: 2px 8px;
-          height: 28px;
+          padding: 4px 10px; // 增加内边距
+          height: 32px; // 增加高度
           margin-top: 0.375rem;
           margin-bottom: 0.375rem;
           margin-left: -8px;
+          border-radius: 25px; // 增加圆角
+          font-weight: 500; // 增加字体粗细
+          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); // 轻微上移效果
+          }
         }
       }
       // 提交信息
@@ -28,7 +44,12 @@ export const commit = css`
         a.ui.basic.primary.label {
           border-radius: 25px;
           border-width: 1.5px;
-          padding: 5px 8px !important;
+          padding: 6px 12px !important; // 增加内边距
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
       }
       // 提交信息右侧
@@ -40,12 +61,21 @@ export const commit = css`
         // 查看提交路径按钮
         .btn.view-commit-path {
           color: ${themeVars.color.text.light.num1};
+          padding: 4px 8px; // 增加内边距
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            background-color: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
       }
       tr {
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         // 整行悬停色
         &:hover {
           background-color: ${themeVars.color.hover.opaque};
+          transform: translateX(2px); // 轻微右移效果
         }
         // 偶数行悬停色
         &:nth-child(2n):hover {
@@ -54,24 +84,57 @@ export const commit = css`
         // 尾行圆角
         &:last-child {
           td:first-child {
-            border-bottom-left-radius: ${otherThemeVars.border.radius};
+            border-bottom-left-radius: 12px; // 增加圆角
           }
           td:last-child {
-            border-bottom-right-radius: ${otherThemeVars.border.radius};
+            border-bottom-right-radius: 12px; // 增加圆角
           }
         }
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .page-content.repository #commits-table.ui.basic.striped.table tbody.commit-list {
+      .sha a.ui.label.commit-id-short {
+        padding: 3px 8px; // 调整内边距
+        height: 28px; // 调整高度
+      }
+      
+      .message a.ui.basic.primary.label {
+        padding: 4px 8px !important; // 调整内边距
+      }
+      
+      .tw-text-right {
+        .btn.copy-commit-id,
+        .btn.view-commit-path {
+          padding: 3px 6px; // 调整内边距
+        }
+      }
+    }
+  }
 `;
 
 export const commitStatus = css`
   .flex-text-inline[data-global-init="initCommitStatuses"] {
-    padding: 6px;
-    margin-top: 2px;
-    border-radius: ${otherThemeVars.border.radius};
+    padding: 8px 12px; // 增加内边距
+    margin-top: 4px; // 增加顶部外边距
+    border-radius: 8px; // 增加圆角
+    background-color: ${themeVars.color.menu}; // 添加背景色
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:hover {
       background-color: ${themeVars.github.control.transparent.bgColor.hover};
+      transform: translateY(-1px); // 轻微上移效果
     }
   }
-`;
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .flex-text-inline[data-global-init="initCommitStatuses"] {
+      padding: 6px 10px; // 调整内边距
+      margin-top: 2px; // 调整顶部外边距
+    }
+  }
+`;

styles/components/dashboard.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 export const dashboard = css`
   // 首页仪表板, 避免选中管理员后台的维护管理面板
@@ -8,25 +8,30 @@ export const dashboard = css`
       background: ${themeVars.color.hover.self};
       border: 0;
       border-radius: 12px;
-      margin-bottom: 8px;
+      margin-bottom: 16px; // 增加底部间距
+      padding: 4px; // 增加内边距
       > .item {
         background: unset;
         border-radius: 12px;
-        padding: 6px 12px !important;
+        padding: 8px 16px !important; // 增加内边距
+        font-weight: 500; // 增加字体粗细
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &.active {
           background: ${themeVars.color.menu};
           box-shadow: ${themeVars.github.shadow.floating.small};
           font-weight: 600;
+          transform: translateY(-1px); // 轻微上移效果
         }
         &::before {
           display: none;
         }
         &:not(.active) {
-          border-radius: ${otherThemeVars.border.radius};
-          margin: 6px !important;
-          width: calc(50% - 12px);
+          border-radius: 8px; // 增加圆角
+          margin: 4px !important; // 调整边距
+          width: calc(50% - 8px); // 调整宽度
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateY(-1px); // 轻微上移效果
           }
         }
       }
@@ -35,18 +40,21 @@ export const dashboard = css`
     .ui.top.attached.header {
       border: 0;
       font-size: 20px;
-      font-weight: 400;
+      font-weight: 600; // 增加字体粗细
       background-color: unset !important;
       margin-bottom: 0.25rem;
+      padding: 16px 20px; // 增加内边距
     }
     // 仓库/组织列表
     .ui.attached.segment {
       background-color: ${themeVars.color.menu};
       border: unset !important;
       box-shadow: ${themeVars.github.shadow.floating.small};
+      margin-bottom: 16px; // 增加底部间距
       &.repos-search {
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
+        padding: 16px; // 增加内边距
       }
       &.table {
         &:last-child {
@@ -56,13 +64,16 @@ export const dashboard = css`
         ul {
           padding: 8px;
           li {
-            border-radius: ${otherThemeVars.border.radius};
-            padding: 6px 8px !important;
+            border-radius: 8px; // 增加圆角
+            padding: 12px 16px !important; // 增加内边距
+            margin: 4px 0; // 增加垂直间距
+            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
             &:not(:last-child) {
               border-bottom: 0;
             }
             &:hover {
               background: ${themeVars.github.control.transparent.bgColor.hover};
+              transform: translateX(2px); // 轻微右移效果
             }
             a.muted:hover {
               color: inherit;
@@ -87,39 +98,47 @@ export const dashboardIssues = css`
       background-color: ${themeVars.color.box.header};
       border: 1px solid ${themeVars.color.light.border};
       border-bottom: 0;
-      border-top-left-radius: ${otherThemeVars.border.radius};
-      border-top-right-radius: ${otherThemeVars.border.radius};
+      border-top-left-radius: 12px; // 增加圆角
+      border-top-right-radius: 12px; // 增加圆角
       height: 54px;
-      padding: 16px 8px;
+      padding: 16px 16px; // 增加内边距
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
       .list-header-toggle {
         align-items: center;
         border: 0;
         > .item {
           background: unset !important;
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           color: ${themeVars.color.text.light.num1};
-          padding: 0px 8px;
-          height: 30px;
+          padding: 0px 16px; // 增加内边距
+          height: 36px; // 增加高度
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:before {
             display: none;
           }
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+            transform: translateY(-1px); // 轻微上移效果
           }
           &.active {
             color: ${themeVars.color.text.self};
             font-weight: 700;
+            background: ${themeVars.color.active} !important; // 添加背景色
           }
         }
       }
       .list-header-filters {
         > .item {
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           color: ${themeVars.color.text.light.num1};
-          padding: 0px 12px;
-          height: 32px;
+          padding: 0px 16px; // 增加内边距
+          height: 36px; // 增加高度
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateY(-1px); // 轻微上移效果
           }
         }
       }
@@ -132,6 +151,21 @@ export const issueListMobile = css`
   @media (max-width: 767.98px) {
     .page-content.dashboard.issues .list-header {
       height: auto;
+      padding: 12px; // 调整内边距
+    }
+    
+    // 移动端优化
+    .list-header-toggle,
+    .list-header-filters {
+      flex-wrap: wrap; // 允许换行
+      gap: 8px; // 增加间距
+    }
+    
+    .list-header-toggle > .item,
+    .list-header-filters > .item {
+      flex: 1 1 auto; // 自适应宽度
+      min-width: calc(50% - 4px); // 最小宽度
+      text-align: center; // 文本居中
     }
   }
 `;
@@ -141,4 +175,15 @@ export const fixOrgLabel = css`
   .dashboard .secondary-nav .org-visibility .label {
     margin-right: 0;
   }
-`;
+  
+  // 增强组织可见性标签样式
+  .dashboard .secondary-nav .org-visibility .label {
+    padding: 4px 12px; // 增加内边距
+    border-radius: 25px; // 增加圆角
+    font-weight: 500; // 增加字体粗细
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+    &:hover {
+      transform: translateY(-1px); // 轻微上移效果
+    }
+  }
+`;

styles/components/diff.ts

@@ -7,6 +7,7 @@ export const diff = css`
     /* 折叠行文本 */
     .code-inner {
       color: ${themeVars.color.text.light.num1};
+      font-weight: 500; // 增加字体粗细
     }
   }
   /* 增加/删除行多余的颜色 */
@@ -22,6 +23,7 @@ export const diff = css`
   .removed-code {
     border-radius: 0.1875rem;
     color: ${themeVars.color.text.self};
+    padding: 0 2px; // 增加内边距
     /* 覆盖掉 chroma 的颜色 */
     * {
       color: ${themeVars.color.text.self} !important;
@@ -30,23 +32,37 @@ export const diff = css`
   /* 展开/收缩按钮 */
   .code-expander-button {
     color: ${themeVars.color.text.light.num1};
-    height: 28px !important;
+    height: 32px !important; // 增加高度
+    padding: 0 12px; // 增加内边距
+    border-radius: 8px; // 增加圆角
+    font-weight: 500; // 增加字体粗细
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:hover {
       background: ${themeVars.github.bgColor.accent.emphasis};
       color: ${themeVars.color.white};
+      transform: translateY(-1px); // 轻微上移效果
+    }
+    &:active {
+      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
     }
   }
   /* 行号居中 */
   .lines-num {
     text-align: center !important;
+    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); // 使用等宽字体
   }
   // 差异对比文件盒子
   .diff-file-box {
+    border-radius: 12px; // 增加圆角
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
+    margin-bottom: 16px; // 增加底部间距
+    overflow: hidden; // 隐藏溢出内容
     // 差异对比文件头
     .diff-file-header {
       // 文件名
       .diff-file-name {
-        font-weight: 400;
+        font-weight: 500; // 增加字体粗细
+        padding: 12px 16px; // 增加内边距
         .fold-file.btn svg {
           min-width: 16px;
           min-height: 16px;
@@ -55,6 +71,7 @@ export const diff = css`
         }
         .diff-stats-bar {
           height: 8px;
+          border-radius: 4px; // 增加圆角
         }
         > div,
         .file-link {
@@ -66,7 +83,52 @@ export const diff = css`
         color: ${themeVars.color.text.light.num1};
         font-size: 12px;
         font-weight: 400;
+        padding: 12px 16px; // 增加内边距
       }
     }
   }
-`;
+  
+  // 增强差异对比的可读性
+  .code-diff {
+    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); // 使用等宽字体
+    font-size: 14px; // 增加字体大小
+    line-height: 1.5; // 增加行高
+  }
+  
+  // 增加行的样式
+  .add-code {
+    background-color: ${themeVars.color.diff.added.row.bg}; // 使用主题色
+    &:hover {
+      background-color: ${themeVars.color.diff.added.row.border}; // 悬停时改变背景色
+    }
+  }
+  
+  // 删除行的样式
+  .del-code {
+    background-color: ${themeVars.color.diff.removed.row.bg}; // 使用主题色
+    &:hover {
+      background-color: ${themeVars.color.diff.removed.row.border}; // 悬停时改变背景色
+    }
+  }
+  
+  // 移动行的样式
+  .moved-code {
+    background-color: ${themeVars.color.diff.moved.row.bg}; // 使用主题色
+    &:hover {
+      background-color: ${themeVars.color.diff.moved.row.border}; // 悬停时改变背景色
+    }
+  }
+  
+  // 行号的样式
+  .lines-num {
+    background-color: ${themeVars.color.box.body.self}; // 使用主题色
+    border-right: 1px solid ${themeVars.color.light.border}; // 添加右边框
+    padding: 0 8px; // 增加内边距
+    min-width: 40px; // 设置最小宽度
+  }
+  
+  // 行内容的样式
+  .lines-code {
+    padding: 0 12px; // 增加内边距
+  }
+`;

styles/components/filelist.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 // 文件列表页面下的分支按钮
 export const branchButton = css`
@@ -11,6 +11,13 @@ export const branchButton = css`
         margin-top: 1px;
         margin-left: auto;
         margin-right: 20px; // gitea 有 RSS 留出足够的空间
+        border-radius: 25px; // 增加圆角
+        padding: 4px 10px; // 增加内边距
+        font-weight: 500; // 增加字体粗细
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        &:hover {
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
     }
   }
@@ -21,10 +28,18 @@ export const syncFork = css`
   .page-content.repository.file.list {
     .repo-home-filelist > .ui.message {
       background: ${themeVars.color.box.header};
-      padding: 8px 8px 8px 16px;
+      padding: 12px 16px; // 增加内边距
       margin: 16px 0px;
+      border-radius: 12px; // 增加圆角
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
       .ui.button {
         min-width: 96px;
+        border-radius: 8px; // 增加圆角
+        font-weight: 500; // 增加字体粗细
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        &:hover {
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
     }
   }
@@ -35,10 +50,14 @@ export const repoFiles = css`
   // 文件列表和提交列表的按钮组
   .repo-button-row {
     margin: 16px 0;
+    gap: 8px; // 增加间距
   }
   .repository.file.list {
     #repo-files-table {
       margin: 16px 0;
+      border-radius: 12px; // 增加圆角
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
+      overflow: hidden; // 隐藏溢出内容
       // 头部最后一次提交
       .repo-file-line {
         padding-right: 16px;
@@ -81,7 +100,11 @@ export const repoFiles = css`
       // 文件列表
       .repo-file-item {
         .repo-file-cell {
-          height: 40px;
+          height: 44px; // 增加高度
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            background-color: ${themeVars.color.hover.opaque};
+          }
           &.name {
             display: flex;
             align-items: center;
@@ -99,6 +122,7 @@ export const repoFiles = css`
         background: ${themeVars.color.body};
         min-height: 48px;
         padding: 0px 8px !important;
+        border-radius: 12px 12px 0 0; // 增加圆角
         svg {
           color: ${themeVars.color.text.light.num1};
         }
@@ -106,14 +130,16 @@ export const repoFiles = css`
           padding: 8px !important;
           // 伪元素宽度等于按钮宽度而不是父元素宽度
           position: relative;
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
           }
           &:after {
             content: "";
             background: ${themeVars.github.underlineNav.borderColor.active};
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
             bottom: -7px;
             left: 0;
             height: 2px;
@@ -125,9 +151,13 @@ export const repoFiles = css`
             text-decoration-line: none;
           }
         }
-        .file-header-right:hover {
-          background: ${themeVars.github.control.transparent.bgColor.hover};
-          border-radius: ${otherThemeVars.border.radius};
+        .file-header-right {
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+            border-radius: 8px; // 增加圆角
+          }
         }
       }
     }
@@ -185,6 +215,8 @@ export const repoFileView = css`
         // 固定头部
         position: sticky;
         top: 0;
+        border-radius: 12px; // 增加圆角
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
         &:after {
           content: "";
           position: absolute;
@@ -203,6 +235,7 @@ export const repoFileView = css`
           // 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除
           position: sticky;
           top: 0;
+          border-radius: 12px 12px 0 0; // 增加圆角
           &:after {
             content: "";
             position: absolute;
@@ -214,6 +247,11 @@ export const repoFileView = css`
           }
           .ui.compact.icon.button {
             border: 0;
+            border-radius: 8px; // 增加圆角
+            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+            &:hover {
+              transform: translateY(-1px); // 轻微上移效果
+            }
           }
         }
         .view-file-tree-items {
@@ -228,7 +266,7 @@ export const repoFileView = css`
           align-content: center;
           background: ${themeVars.color.box.header};
           border: 1px solid ${themeVars.color.secondary.self};
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 12px; // 增加圆角
           margin: 16px 0;
           height: 46px;
           min-height: 46px;
@@ -236,8 +274,15 @@ export const repoFileView = css`
           position: sticky;
           top: 0;
           z-index: 1;
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
           .ui.button {
             min-height: 32px;
+            border-radius: 8px; // 增加圆角
+            font-weight: 500; // 增加字体粗细
+            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+            &:hover {
+              transform: translateY(-1px); // 轻微上移效果
+            }
           }
           // 打开文件树按钮
           .repo-view-file-tree-toggle-show {
@@ -245,10 +290,12 @@ export const repoFileView = css`
             border-color: #0000;
             padding: 0;
             min-width: 32px;
+            border-radius: 8px; // 增加圆角
           }
           // 分支选择按钮
           .branch-dropdown-button {
             padding: 0 12px;
+            border-radius: 8px; // 增加圆角
           }
           // 路径
           .repo-path {
@@ -274,9 +321,11 @@ export const repoFileView = css`
           h4.file-header {
             padding: 8px 12px !important;
             position: sticky;
+            border-radius: 12px 12px 0 0; // 增加圆角
             // 重叠边框线, 避免过粗
             top: 45px;
             z-index: 1;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
             .file-header-left {
               color: ${themeVars.color.text.light.num1};
               font-size: 12px;
@@ -290,6 +339,11 @@ export const repoFileView = css`
                   height: 28px;
                   font-size: 12px;
                   padding: 0 8px;
+                  border-radius: 8px; // 增加圆角
+                  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+                  &:hover {
+                    transform: translateY(-1px); // 轻微上移效果
+                  }
                 }
               }
               // 右侧操作按钮
@@ -300,20 +354,23 @@ export const repoFileView = css`
                 border: 1px solid ${themeVars.color.light.border};
                 height: 28px;
                 padding: 0 8px;
+                border-radius: 8px; // 增加圆角
+                transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
                 svg {
                   color: ${themeVars.color.text.light.num1};
                 }
                 &:first-of-type {
-                  border-top-left-radius: ${otherThemeVars.border.radius};
-                  border-bottom-left-radius: ${otherThemeVars.border.radius};
+                  border-top-left-radius: 8px; // 增加圆角
+                  border-bottom-left-radius: 8px; // 增加圆角
                 }
                 &:last-of-type {
-                  border-top-right-radius: ${otherThemeVars.border.radius};
-                  border-bottom-right-radius: ${otherThemeVars.border.radius};
+                  border-top-right-radius: 8px; // 增加圆角
+                  border-bottom-right-radius: 8px; // 增加圆角
                 }
                 &:hover {
                   background: ${themeVars.color.hover.self};
                   color: ${themeVars.color.text.light.num1};
+                  transform: translateY(-1px); // 轻微上移效果
                 }
               }
             }
@@ -321,9 +378,11 @@ export const repoFileView = css`
         }
         // 头部提交信息
         .ui.segment#repo-file-commit-box {
-          padding: 8px 12px;
+          padding: 12px 16px; // 增加内边距
           margin-bottom: 16px !important;
           min-height: 46px;
+          border-radius: 12px; // 增加圆角
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
           > .latest-commit {
             gap: 8px;
             .commit-summary {
@@ -357,6 +416,20 @@ export const repoFileViewMobile = css`
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .repo-view-container .repo-view-file-tree-container {
+      height: auto;
+      position: static;
+    }
+    
+    .repo-view-content .repo-button-row {
+      flex-wrap: wrap;
+      height: auto;
+      padding: 8px 12px;
+    }
+  }
 `;
 
 // 仓库代码布局调整, 侧边栏宽度调整
@@ -393,6 +466,8 @@ export const repoSidebarTop = css`
           }
           .repo-description {
             color: ${themeVars.color.text.self};
+            font-size: 14px; // 增加字体大小
+            line-height: 1.5; // 增加行高
           }
           #repo-topics {
             margin: 10px 0px !important;
@@ -428,6 +503,12 @@ export const repoSidebarBottom = css`
       }
       .flex-item {
         padding: 16px 0;
+        border-radius: 12px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        &:hover {
+          background-color: ${themeVars.color.hover.opaque};
+          transform: translateY(-1px); // 轻微上移效果
+        }
         .flex-item {
           padding: 16px 0 0 0;
           .flex-item-icon {
@@ -448,6 +529,7 @@ export const repoSidebarBottom = css`
       .language-stats {
         height: 8px;
         margin-bottom: 0px;
+        border-radius: 4px; // 增加圆角
       }
       .language-stats-details .item {
         font-size: 12px;
@@ -456,6 +538,7 @@ export const repoSidebarBottom = css`
           height: 8px;
           width: 8px;
           margin-right: 8px;
+          border-radius: 50%; // 圆形图标
         }
         .tw-font-semibold {
           color: ${themeVars.color.text.self};
@@ -464,4 +547,4 @@ export const repoSidebarBottom = css`
       }
     }
   }
-`;
+`;

styles/components/footer.ts

@@ -2,19 +2,27 @@ import { css, themeVars } from "src/types/vars";
 
 export const footer = css`
   .page-footer {
-    background-color: ${themeVars.color.body};
+    background-color: ${themeVars.color.footer}; // 使用主题色
     border-top: 0;
     color: ${themeVars.color.text.light.num1};
     font-size: 12px;
     gap: 32px;
     justify-content: center;
-    padding: 16px 0 40px 0;
+    padding: 24px 0 40px 0; // 增加顶部内边距
+    border-radius: 12px 12px 0 0; // 增加圆角
+    margin-top: 32px; // 增加顶部外边距
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
     > .left-links {
-      gap: 4px;
+      gap: 8px; // 增加间距
       > a {
         color: ${themeVars.color.text.light.num1};
+        padding: 4px 8px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:hover {
           color: ${themeVars.color.primary.self};
+          background-color: ${themeVars.color.hover.self};
+          transform: translateY(-1px); // 轻微上移效果
         }
       }
       > strong {
@@ -25,19 +33,43 @@ export const footer = css`
       gap: 16px;
       > .ui.dropdown {
         font-size: 12px;
+        padding: 4px 8px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:hover {
           color: ${themeVars.color.primary.self};
+          background-color: ${themeVars.color.hover.self};
+          transform: translateY(-1px); // 轻微上移效果
         }
       }
       > a {
         border-left: 0;
         color: ${themeVars.color.text.light.num1};
-        padding-left: 0;
+        padding: 4px 8px; // 增加内边距
         margin-left: 0;
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:hover {
           color: ${themeVars.color.primary.self};
+          background-color: ${themeVars.color.hover.self};
+          transform: translateY(-1px); // 轻微上移效果
         }
       }
     }
   }
-`;
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .page-footer {
+      flex-direction: column; // 垂直排列
+      gap: 16px; // 调整间距
+      padding: 16px 0 32px 0; // 调整内边距
+      > .left-links,
+      > .right-links {
+        flex-wrap: wrap; // 允许换行
+        justify-content: center; // 居中对齐
+        gap: 8px; // 调整间距
+      }
+    }
+  }
+`;

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; // 调整宽度
+      }
+    }
+  }
+`;

styles/components/issue.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
 // 工单&PR 列表
@@ -14,11 +14,12 @@ export const issueList = css`
       background-color: ${themeVars.color.box.header};
       border: 1px solid ${themeVars.color.light.border};
       border-bottom: 0;
-      border-top-left-radius: ${otherThemeVars.border.radius};
-      border-top-right-radius: ${otherThemeVars.border.radius};
-      height: 48px;
-      padding: 8px;
+      border-top-left-radius: 12px; // 增加圆角
+      border-top-right-radius: 12px; // 增加圆角
+      height: 56px; // 增加高度
+      padding: 12px 16px; // 增加内边距
       margin-top: 16px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
       .issue-list-toolbar-left {
         // 复选框
         input {
@@ -29,19 +30,23 @@ export const issueList = css`
           border: 0;
           > .item {
             background: unset !important;
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
             color: ${themeVars.color.text.light.num1};
-            padding: 0px 8px;
-            height: 30px;
+            padding: 0px 16px; // 增加内边距
+            height: 36px; // 增加高度
+            font-weight: 500; // 增加字体粗细
+            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
             &:before {
               display: none;
             }
             &:hover {
               background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+              transform: translateY(-1px); // 轻微上移效果
             }
             &.active {
               color: ${themeVars.color.text.self};
               font-weight: 700;
+              background: ${themeVars.color.active} !important; // 添加背景色
             }
           }
         }
@@ -52,8 +57,14 @@ export const issueList = css`
           color: ${themeVars.color.text.light.num1};
         }
         > .ui.button {
-          padding: 0 12px;
-          height: 32px;
+          padding: 0 16px; // 增加内边距
+          height: 36px; // 增加高度
+          border-radius: 8px; // 增加圆角
+          font-weight: 500; // 增加字体粗细
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+          &:hover {
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
       }
     }
@@ -68,17 +79,19 @@ export const issueList = css`
   .page-content.repository.issue-list {
     .flex-list#issue-list {
       border: 1px solid ${themeVars.color.light.border};
-      border-bottom-left-radius: ${otherThemeVars.border.radius};
-      border-bottom-right-radius: ${otherThemeVars.border.radius};
+      border-bottom-left-radius: 12px; // 增加圆角
+      border-bottom-right-radius: 12px; // 增加圆角
       > .flex-item {
         align-items: center;
         padding: 0;
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:last-child {
-          border-bottom-left-radius: ${otherThemeVars.border.radius};
-          border-bottom-right-radius: ${otherThemeVars.border.radius};
+          border-bottom-left-radius: 12px; // 增加圆角
+          border-bottom-right-radius: 12px; // 增加圆角
         }
         &:hover {
           background-color: ${themeVars.color.hover.opaque};
+          transform: translateX(2px); // 轻微右移效果
         }
         > .flex-item-icon {
           display: flex;
@@ -97,11 +110,11 @@ export const issueList = css`
         > .flex-item-main {
           gap: 4px;
           .flex-item-header {
-            padding-top: 8px;
+            padding-top: 12px; // 增加内边距
           }
           .flex-item-body {
             font-size: 12px;
-            padding-bottom: 8px;
+            padding-bottom: 12px; // 增加内边距
           }
         }
         > .flex-item-trailing {
@@ -114,14 +127,19 @@ export const issueList = css`
   // [TODO] 暂时排除项目的列表
   .page-content.repository.milestones:not(.projects) .milestone-list {
     border: 1px solid ${themeVars.color.light.border};
-    border-bottom-left-radius: ${otherThemeVars.border.radius};
-    border-bottom-right-radius: ${otherThemeVars.border.radius};
+    border-bottom-left-radius: 12px; // 增加圆角
+    border-bottom-right-radius: 12px; // 增加圆角
     .milestone-card {
-      padding: 8px 16px 10px 16px;
+      padding: 16px 20px; // 增加内边距
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        background-color: ${themeVars.color.hover.opaque};
+        transform: translateY(-1px); // 轻微上移效果
+      }
       .milestone-header {
         h3 {
-          font-size: 16px;
-          font-weight: 500;
+          font-size: 18px; // 增加字体大小
+          font-weight: 600; // 增加字体粗细
         }
         div span {
           font-size: 14px;
@@ -146,31 +164,53 @@ export const issueListMobile = css`
     .page-content.repository.issue-list {
       .issue-list-toolbar {
         height: auto;
+        padding: 12px; // 调整内边距
       }
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .issue-list-toolbar-left > .ui.compact.menu > .item,
+    .issue-list-toolbar-right > .ui.menu > .item {
+      padding: 0px 12px; // 调整内边距
+      height: 32px; // 调整高度
+    }
+    
+    .issue-list-toolbar-right > .ui.menu > .ui.button {
+      padding: 0 12px; // 调整内边距
+      height: 32px; // 调整高度
+    }
+  }
 `;
 
 // 置顶 Issue
 export const issuePins = css`
   #issue-pins {
-    gap: 12px;
-    margin-bottom: 16px;
+    gap: 16px; // 增加间距
+    margin-bottom: 20px; // 增加底部间距
     .issue-card {
-      padding: 16px 12px;
+      padding: 20px 16px; // 增加内边距
+      border-radius: 12px; // 增加圆角
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        transform: translateY(-2px); // 轻微上移效果
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 增强阴影
+      }
       .content {
         .issue-card-title {
-          font-size: 16px;
+          font-size: 18px; // 增加字体大小
           font-weight: 600;
         }
         svg {
           color: ${themeVars.color.text.light.num1};
           height: 100%;
-          margin-right: 3px;
+          margin-right: 4px; // 增加右边距
         }
         .meta {
           font-size: 12px;
-          padding-top: 4px;
+          padding-top: 6px; // 增加内边距
         }
       }
       .issue-card-bottom {
@@ -187,20 +227,47 @@ export const button = css`
       color: ${themeVars.github.fgColor.done};
       background-color: ${themeVars.color.button};
       border-color: ${themeVars.color.light.border};
+      border-radius: 8px; // 增加圆角
+      padding: 8px 16px; // 增加内边距
+      font-weight: 500; // 增加字体粗细
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       &:hover {
         background-color: ${themeVars.color.hover.self};
+        transform: translateY(-1px); // 轻微上移效果
+      }
+      &:active {
+        animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
       }
     }
 
     // 重新开启按钮
     .ui.basic.primary.button#status-button {
       color: ${themeVars.github.fgColor.success};
+      border-radius: 8px; // 增加圆角
+      padding: 8px 16px; // 增加内边距
+      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); // 点击脉冲效果
+      }
     }
   }
   // 工单&PR标题右侧按钮
   .repository.view.issue .issue-title-buttons > .ui.button {
-    padding: 0 12px;
-    height: 32px;
+    padding: 0 16px; // 增加内边距
+    height: 36px; // 增加高度
+    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); // 点击脉冲效果
+    }
   }
 `;
 
@@ -210,37 +277,55 @@ export const babel = css`
       // 时间线打开状态标签
       &.tw-bg-green {
         background-color: ${themeVars.github.bgColor.success.emphasis} !important;
+        border-radius: 25px; // 增加圆角
       }
       // 时间线关闭状态标签
       &.tw-bg-red {
         background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+        border-radius: 25px; // 增加圆角
       }
       // 时间线合并状态标签
       &.tw-bg-purple {
         background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+        border-radius: 25px; // 增加圆角
       }
     }
   }
   // 工单&PR状态标签
   .ui.label.issue-state-label {
     border-radius: 25px !important;
+    padding: 6px 12px; // 增加内边距
+    font-weight: 500; // 增加字体粗细
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
 
     &.green {
       color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.success.emphasis} !important;
       border-color: ${themeVars.github.bgColor.success.emphasis} !important;
+      &:hover {
+        opacity: 0.9; // 悬停时降低不透明度
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
 
     &.red {
       color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.done.emphasis} !important;
       border-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      &:hover {
+        opacity: 0.9; // 悬停时降低不透明度
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
 
     &.purple {
       color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.done.emphasis} !important;
       border-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      &:hover {
+        opacity: 0.9; // 悬停时降低不透明度
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
   }
 `;
@@ -251,16 +336,22 @@ export const prBranch = css`
   #issue-list .flex-item-body .branches .branch {
     color: ${themeVars.github.fgColor.accent};
     background-color: ${themeVars.github.bgColor.accent.muted};
-    border-radius: ${otherThemeVars.border.radius};
+    border-radius: 25px; // 增加圆角
     font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
     font-size: 12px;
-    padding: 0 5px;
+    padding: 4px 10px; // 增加内边距
     line-height: 20px;
+    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); // 轻微上移效果
+    }
   }
 
   .repository.view.issue .pull-desc code {
-    padding-top: 3px;
-    padding-bottom: 3px;
+    padding-top: 4px; // 增加内边距
+    padding-bottom: 4px; // 增加内边距
     a:hover {
       text-decoration-line: none;
     }
@@ -282,12 +373,13 @@ export const comment = css`
     &:target {
       .comment-container {
         border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
-        box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
+        box-shadow: 0 0 0 2px ${themeVars.color.primary.self} !important; // 增强焦点效果
       }
     }
     .comment-header {
-      padding: 4px 4px 4px 16px;
-      min-height: 38px;
+      padding: 8px 8px 8px 16px; // 增加内边距
+      min-height: 42px; // 增加最小高度
+      border-radius: 12px 12px 0 0; // 增加圆角
     }
     .comment-header-right {
       > .item,
@@ -297,8 +389,13 @@ export const comment = css`
       > .ui.label {
         background-color: initial;
         font-size: 12px;
-        height: 20px;
-        padding: 0 6px;
+        height: 24px; // 增加高度
+        padding: 0 8px; // 增加内边距
+        border-radius: 25px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        &:hover {
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
       // 隐藏顶部菜单的表情按钮
       // 无法使用此样式, 评论无表情时底部的表情按钮元素不会渲染, 这是一个先有鸡还是先有蛋的问题
@@ -314,9 +411,12 @@ export const comment = css`
         // 评论菜单的删除按钮
         .menu .item.delete-comment {
           color: ${themeVars.color.red.self};
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background-color: ${themeVars.color.red.badge.bg} !important;
             color: ${themeVars.color.red.light};
+            transform: translateX(2px); // 轻微右移效果
           }
         }
       }
@@ -327,12 +427,17 @@ export const comment = css`
       align-items: center;
       justify-content: center;
       background: ${themeVars.color.button};
-      border-radius: 25px;
+      border-radius: 25px; // 增加圆角
       border: 1px solid ${themeVars.color.light.border};
       color: ${themeVars.color.text.light.num1};
-      padding: 0px 8px !important;
-      height: 28px;
-      width: 28px;
+      padding: 0px 10px !important; // 增加内边距
+      height: 32px; // 增加高度
+      width: 32px; // 增加宽度
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+      &:hover {
+        background: ${themeVars.color.hover.self};
+        transform: translateY(-1px); // 轻微上移效果
+      }
     }
     // 底部表情栏
     .bottom-reactions {
@@ -340,9 +445,12 @@ export const comment = css`
         background-color: unset !important;
         border-radius: 25px;
         border-color: ${themeVars.color.light.border};
+        padding: 4px 10px; // 增加内边距
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &:hover {
           background-color: ${themeVars.color.reaction.hoverBg} !important;
           border-color: ${themeVars.color.light.border};
+          transform: translateY(-1px); // 轻微上移效果
         }
         .reaction {
           font-size: 12px;
@@ -350,7 +458,7 @@ export const comment = css`
         .reaction-count {
           color: ${themeVars.color.text.light.self};
           font-weight: 500;
-          margin-left: 0;
+          margin-left: 4px; // 增加左边距
         }
       }
       // 显示表情菜单按钮
@@ -370,6 +478,8 @@ export const commentForm = css`
     &::after {
       display: none;
     }
+    border-radius: 12px; // 增加圆角
+    padding: 16px; // 增加内边距
   }
 `;
 
@@ -383,6 +493,14 @@ export const dropdown = css`
         content: "";
         ${activeItemAfterStyle}
       }
+      .item {
+        padding: 8px 12px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+        &:hover {
+          transform: translateX(2px); // 轻微右移效果
+        }
+      }
     }
   }
 `;
@@ -393,15 +511,16 @@ export const prMerge = css`
     // 头像
     .timeline-avatar {
       color: ${themeVars.color.white} !important;
-      border-radius: ${otherThemeVars.border.radius};
-      width: 40px;
-      height: 40px;
+      border-radius: 12px; // 增加圆角
+      width: 48px; // 增加宽度
+      height: 48px; // 增加高度
       display: flex;
       align-items: center;
       justify-content: center;
+      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
       svg {
-        width: 24px;
-        height: 24px;
+        width: 28px; // 增加宽度
+        height: 28px; // 增加高度
       }
       // 可以合并
       &.green {
@@ -432,14 +551,18 @@ export const prMerge = css`
           }
         }
       }
+      &:hover {
+        transform: scale(1.05); // 轻微放大效果
+      }
     }
     // 检查状态
     .commit-status-panel {
       .commit-status-header {
         background: ${themeVars.color.body};
-        padding: 16px;
-        font-size: 16px;
+        padding: 20px; // 增加内边距
+        font-size: 18px; // 增加字体大小
         font-weight: 600;
+        border-radius: 12px 12px 0 0; // 增加圆角
         .ui.right {
           color: ${themeVars.color.text.light.num1};
           font-size: 14px;
@@ -450,18 +573,20 @@ export const prMerge = css`
       .commit-status-list {
         background: ${themeVars.color.menu};
         .commit-status-item {
-          border-radius: ${otherThemeVars.border.radius};
-          padding: 2px 8px;
-          margin: 0px 8px;
-          height: 37px;
+          border-radius: 8px; // 增加圆角
+          padding: 6px 12px; // 增加内边距
+          margin: 0px 12px; // 增加边距
+          height: 42px; // 增加高度
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:first-child {
-            margin-top: 8px;
+            margin-top: 12px; // 增加边距
           }
           &:last-child {
-            margin-bottom: 8px;
+            margin-bottom: 12px; // 增加边距
           }
           &:hover {
             background-color: ${themeVars.color.hover.opaque};
+            transform: translateX(2px); // 轻微右移效果
           }
         }
       }
@@ -469,9 +594,10 @@ export const prMerge = css`
     // 合并信息和操作
     .merge-section {
       color: ${themeVars.color.text.light.num1};
-      padding: 16px;
+      padding: 20px; // 增加内边距
       display: grid;
-      gap: 8px;
+      gap: 12px; // 增加间距
+      border-radius: 0 0 12px 12px; // 增加圆角
       &.no-header {
         &::before,
         &::after {
@@ -493,17 +619,18 @@ export const timeline = css`
       }
       .timeline-item,
       .timeline-item-group {
-        padding: 16px 0;
+        padding: 20px 0; // 增加内边距
         // 事件
         &.event {
           // 修复覆盖后的位置问题
           padding-left: 15px;
           .avatar {
-            width: 20px;
-            height: 20px;
+            width: 24px; // 增加宽度
+            height: 24px; // 增加高度
           }
           .badge {
             border: 2px solid ${themeVars.color.body};
+            border-radius: 50%; // 圆形徽章
           }
           // 仅匹配只有 badge
           .badge:not([class*=" "]) {
@@ -517,7 +644,7 @@ export const timeline = css`
         &.commits-list {
           // 每个提交之间的间隔
           .flex-text-block {
-            padding-top: 4px;
+            padding-top: 6px; // 增加内边距
           }
           .badge svg {
             color: ${themeVars.color.text.light.num1};
@@ -538,7 +665,7 @@ export const timeline = css`
 `;
 
 const sidebarPadding = {
-  padding: "4px 8px",
+  padding: "8px 12px", // 增加内边距
 };
 
 // 侧边栏
@@ -551,6 +678,8 @@ export const issueSidebar = css`
         border: 0;
         font-size: 12px;
         padding: 0;
+        border-radius: 12px; // 增加圆角
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
         .ui.button {
           font-size: 12px;
         }
@@ -577,7 +706,7 @@ export const issueSidebar = css`
         }
         // 允许维护者编辑
         > .ui.checkbox {
-          margin: 4px 8px;
+          margin: 8px 12px; // 增加边距
           strong {
             font-weight: 400;
           }
@@ -585,11 +714,14 @@ export const issueSidebar = css`
         .issue-sidebar-combo {
           .ui.dropdown > a.fixed-text.muted {
             align-items: center;
-            border-radius: ${otherThemeVars.border.radius};
+            border-radius: 8px; // 增加圆角
             text-decoration-line: none;
-            height: 28px;
+            height: 32px; // 增加高度
+            padding: 0 12px; // 增加内边距
+            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
             &:hover {
               background: ${themeVars.github.control.transparent.bgColor.hover};
+              transform: translateY(-1px); // 轻微上移效果
             }
           }
           .ui.list {
@@ -600,11 +732,14 @@ export const issueSidebar = css`
         // 时间追踪
         > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
           align-items: center;
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
           text-decoration-line: none;
-          height: 28px;
+          height: 32px; // 增加高度
+          padding: 0 12px; // 增加内边距
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateY(-1px); // 轻微上移效果
           }
         }
         // 选中日期颜色
@@ -612,16 +747,21 @@ export const issueSidebar = css`
           color: ${themeVars.color.text.self};
         }
         .divider {
-          margin: 12px 0 12px 8px;
-          width: calc(100% - 16px);
+          margin: 16px 0 16px 12px; // 增加边距
+          width: calc(100% - 24px); // 调整宽度
         }
         // 订阅按钮
         .ui.watching .ui.button {
-          padding: 0px 8px;
-          height: 28px;
+          padding: 0px 12px; // 增加内边距
+          height: 32px; // 增加高度
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           svg {
             margin: 0 !important;
           }
+          &:hover {
+            transform: translateY(-1px); // 轻微上移效果
+          }
         }
         // PIN 按钮
         .form-fetch-action.single-button-form .ui.button,
@@ -634,8 +774,11 @@ export const issueSidebar = css`
           // 好像是浏览器 BUG, 最后不生效, 必须 !important
           margin: 0 !important;
           justify-content: left;
+          border-radius: 8px; // 增加圆角
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateX(2px); // 轻微右移效果
           }
         }
         .ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
@@ -654,4 +797,4 @@ export const issueSidebar = css`
       }
     }
   }
-`;
+`;

styles/components/navbar.ts

@@ -1,18 +1,23 @@
 import { fallbackVar } from "src/functions";
-import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
+import { css, customThemeVars, themeVars } from "src/types/vars";
 
 export const navbarRight = css`
   #navbar {
     border-bottom: 0;
     padding: 0px 16px;
     min-height: 64px;
+    background-color: ${themeVars.color.nav.bg}; // 添加背景色
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
     .navbar-left {
       gap: 8px;
       > .item {
         padding: 4px 8px;
         min-height: 20px;
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         &.active {
           font-weight: 600;
+          background-color: ${themeVars.color.active}; // 添加背景色
         }
         &#navbar-logo {
           // 与下方的用户切换头像对齐
@@ -25,6 +30,10 @@ export const navbarRight = css`
             width: 32px;
           }
         }
+        &:hover:not(#navbar-logo) {
+          background-color: ${themeVars.color.nav.hoverBg};
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
     }
     // 进入用户页面后, 避免注册, 登录和首页等意外覆盖
@@ -39,11 +48,12 @@ export const navbarRight = css`
         align-content: center;
         justify-content: center;
         border: 1px solid ${themeVars.color.light.border};
-        border-radius: ${otherThemeVars.border.radius};
+        border-radius: 8px; // 增加圆角
         padding: unset;
-        height: 32px;
-        min-width: 32px;
-        min-height: 32px;
+        height: 36px; // 增加高度
+        min-width: 36px; // 增加最小宽度
+        min-height: 36px; // 增加最小高度
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         // 纠正内容保证居中
         .tw-relative {
           height: 16px;
@@ -54,7 +64,7 @@ export const navbarRight = css`
         }
         // 带下拉菜单的按钮
         &.ui.dropdown {
-          padding: 0 8px;
+          padding: 0 12px; // 增加内边距
           .text {
             display: grid;
             grid-auto-flow: column;
@@ -69,8 +79,13 @@ export const navbarRight = css`
           }
           &:hover {
             background-color: ${themeVars.color.nav.hoverBg};
+            transform: translateY(-1px); // 轻微上移效果
           }
         }
+        &:hover:not(.ui.dropdown) {
+          background-color: ${themeVars.color.nav.hoverBg};
+          transform: translateY(-1px); // 轻微上移效果
+        }
       }
       .item.ui.dropdown {
         // 头像菜单
@@ -85,8 +100,13 @@ export const navbarRight = css`
             // 头像
             img {
               border-radius: 25px;
-              height: 32px;
-              max-height: 32px;
+              height: 36px; // 增加高度
+              max-height: 36px; // 增加最大高度
+              width: 36px; // 增加宽度
+              transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+              &:hover {
+                transform: scale(1.05); // 轻微放大效果
+              }
             }
           }
         }
@@ -114,6 +134,11 @@ export const navbarRight = css`
           font-weight: 600;
           top: -15px;
           left: 11px;
+          min-width: 18px; // 设置最小宽度
+          height: 18px; // 设置高度
+          display: flex; // 使用弹性布局
+          align-items: center; // 垂直居中
+          justify-content: center; // 水平居中
         }
       }
     }
@@ -121,6 +146,8 @@ export const navbarRight = css`
     .navbar-right .user-menu {
       width: ${fallbackVar(customThemeVars.userMenuWidth, "192px")};
       max-width: 320px;
+      border-radius: 12px; // 增加圆角
+      box-shadow: ${themeVars.github.shadow.floating.small}; // 增强阴影
       > .header {
         font-size: 14px;
         font-weight: 400;
@@ -145,6 +172,26 @@ export const navbarRight = css`
       display: grid;
     }
   }
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    #navbar {
+      padding: 0px 12px; // 调整内边距
+      min-height: 56px; // 调整最小高度
+    }
+    
+    #navbar .navbar-left > .item {
+      padding: 4px 6px; // 调整内边距
+      min-height: 16px; // 调整最小高度
+    }
+    
+    #navbar .navbar-right:has(.user-menu) > .item:not(:last-child) {
+      height: 32px; // 调整高度
+      min-width: 32px; // 调整最小宽度
+      min-height: 32px; // 调整最小高度
+      padding: 0 8px; // 调整内边距
+    }
+  }
 `;
 
 // 二级导航栏
@@ -155,7 +202,14 @@ export const secondaryNav = css`
     > .ui.secondary.stackable.menu {
       gap: 0px;
       min-height: 48px;
+      padding: 8px 0; // 增加内边距
+      border-radius: 12px; // 增加圆角
+      background-color: ${themeVars.color.box.header}; // 添加背景色
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
       > .item {
+        padding: 0 16px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
         > .ui.dropdown > .text {
           display: inline-flex;
           align-items: center;
@@ -164,10 +218,31 @@ export const secondaryNav = css`
             margin-right: 4px;
           }
         }
+        &:hover {
+          background-color: ${themeVars.color.hover.self};
+          transform: translateY(-1px); // 轻微上移效果
+        }
+        &.active {
+          background-color: ${themeVars.color.active};
+          font-weight: 600;
+        }
       }
       > .right.menu {
         gap: 4px;
       }
     }
   }
-`;
+  
+  // 移动端优化
+  @media (max-width: 767.98px) {
+    .page-content > :first-child.secondary-nav > .ui.secondary.stackable.menu {
+      flex-wrap: wrap; // 允许换行
+      min-height: auto; // 自适应高度
+      padding: 8px; // 调整内边距
+      > .item {
+        padding: 8px 12px; // 调整内边距
+        margin: 4px; // 增加边距
+      }
+    }
+  }
+`;

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); // 轻微上移效果
+    }
   }
-`;
+`;