同步差异对比页面文件名标题栏样式

.github/release.md

@@ -1,3 +1,9 @@
+### ✨ Feature
+
+#### CSS 变量
+
+- 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度
+
 ### 🌈 Style
 
 - 优化小型按钮的高度
@@ -14,6 +20,9 @@
 - 同步顶部工单等仪表板样式
 - 同步置顶 Issue 样式
 - 同步订阅页面样式
+- 同步用户菜单样式
+- 优化下拉菜单样式
+- 同步差异对比页面文件名标题栏样式
 
 ### 🐞 Fix
 

README.md

@@ -100,14 +100,15 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
 
 ### CSS 变量
 
-| 变量名                            | 描述                        | 默认  | Github | 推荐  | 最小  | 最大  |
+| 变量名                            | 描述                        | 默认  | Github | 推荐  | 最小     | 最大  |
-| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
+| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :------- | :---- |
-| --custom-clone-menu-width         | 克隆按钮的菜单宽度          | Gitea | 332px  | 200px | 150px | 400px |
+| --custom-clone-menu-width         | 克隆按钮的菜单宽度          | Gitea | 332px  | 200px | 150px    | 400px |
-| --custom-explore-repolist-columns | 探索页面的仓库列表列数      | 2     | 2      | 2     |       |       |
+| --custom-user-menu-width          | 用户菜单的宽度              | 192px | 256px  |       | 内容宽度 | 320px |
-| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3     | 1      | 2/3   |       |       |
+| --custom-explore-repolist-columns | 探索页面的仓库列表列数      | 2     | 2      | 2     |          |       |
-| --custom-user-repolist-columns    | 用户页面的仓库列表列数      | 2     | 2      | 1/2   |       |       |
+| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3     | 1      | 2/3   |          |       |
-| --custom-org-repolist-columns     | 组织页面的仓库列表列数      | 1     | 1      | 1/2   |       |       |
+| --custom-user-repolist-columns    | 用户页面的仓库列表列数      | 2     | 2      | 1/2   |          |       |
-| --custom-org-userlist-columns     | 组织页面的用户列表列数      | 2     | 1      | 1/2   |       |       |
+| --custom-org-repolist-columns     | 组织页面的仓库列表列数      | 1     | 1      | 1/2   |          |       |
+| --custom-org-userlist-columns     | 组织页面的用户列表列数      | 2     | 1      | 1/2   |          |       |
 
 ## 使用开发中的主题
 

README_EN.md

@@ -104,14 +104,15 @@ Add the following code at the beginning or end of the theme's CSS file
 
 ### CSS Variables
 
-| Variable Name                     | Description                                              | Default | Github | Recommend | Min   | Max   |
+| Variable Name                     | Description                                              | Default | Github | Recommend | Min           | Max   |
-| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- |
+| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :------------ | :---- |
-| --custom-clone-menu-width         | Clone button menu width                                  | Gitea   | 332px  | 200px     | 150px | 400px |
+| --custom-clone-menu-width         | Clone button menu width                                  | Gitea   | 332px  | 200px     | 150px         | 400px |
-| --custom-explore-repolist-columns | Number of repository list columns on explore page        | 2       | 2      | 2         |       |       |
+| --custom-user-menu-width          | User menu width                                          | 192px   | 200px  |           | Content Width | 320px |
-| --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3       | 1      | 2/3       |       |       |
+| --custom-explore-repolist-columns | Number of repository list columns on explore page        | 2       | 2      | 2         |               |       |
-| --custom-user-repolist-columns    | Number of repository list columns on user page           | 2       | 2      | 1/2       |       |       |
+| --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3       | 1      | 2/3       |               |       |
-| --custom-org-repolist-columns     | Number of repository list columns on organization page   | 1       | 1      | 1/2       |       |       |
+| --custom-user-repolist-columns    | Number of repository list columns on user page           | 2       | 2      | 1/2       |               |       |
-| --custom-org-userlist-columns     | Number of user list columns on organization page         | 2       | 1      | 1/2       |       |       |
+| --custom-org-repolist-columns     | Number of repository list columns on organization page   | 1       | 1      | 1/2       |               |       |
+| --custom-org-userlist-columns     | Number of user list columns on organization page         | 2       | 1      | 1/2       |               |       |
 
 ## Using Development Version of the Theme
 

src/types/vars.ts

@@ -34,6 +34,7 @@ const otherVars = { border: { radius: null }, color: { ...color.otherAuto } };
 
 const customVars = {
   cloneMenuWidth: "clone-menu-width",
+  userMenuWidth: "user-menu-width",
   explore: { repolistColumns: "explore-repolist-columns", userlistColumns: "explore-userlist-columns" },
   userRepolistColumns: "user-repolist-columns",
   org: { repolistColumns: "org-repolist-columns", userlistColumns: "org-userlist-columns" },

styles/components/diff.ts

@@ -31,7 +31,6 @@ export const diff = css`
   .code-expander-button {
     color: ${themeVars.color.text.light.num1};
     height: 28px !important;
-
     &:hover {
       background: ${themeVars.github.bgColor.accent.emphasis};
       color: ${themeVars.color.white};
@@ -41,4 +40,33 @@ export const diff = css`
   .lines-num {
     text-align: center !important;
   }
+  // 差异对比文件盒子
+  .diff-file-box {
+    // 差异对比文件头
+    .diff-file-header {
+      // 文件名
+      .diff-file-name {
+        font-weight: 400;
+        .fold-file.btn svg {
+          min-width: 16px;
+          min-height: 16px;
+          height: 16px;
+          width: 16px;
+        }
+        .diff-stats-bar {
+          height: 8px;
+        }
+        > div,
+        .file-link {
+          font-size: 12px;
+        }
+      }
+      // 操作按钮
+      .diff-file-header-actions {
+        color: ${themeVars.color.text.light.num1};
+        font-size: 12px;
+        font-weight: 400;
+      }
+    }
+  }
 `;

styles/public/dropdown.ts

@@ -16,19 +16,18 @@ export const dropdown = css`
       > .item:not(.tw-hidden) {
         display: flex !important;
         align-items: center;
-        gap: 0.5rem;
+        padding: 6px 8px !important;
-        padding: 8px 10px !important;
         border-radius: ${otherThemeVars.border.radius} !important;
         &:not(.emoji) {
-          margin: 0 0.5rem;
+          margin: 0 8px;
         }
         &:not(.emoji):first-of-type {
-          margin-top: 0.5rem;
+          margin-top: 8px;
         }
         // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
         &.cherry-pick-button,
         &:not(.emoji):last-of-type {
-          margin-bottom: 0.5rem;
+          margin-bottom: 8px;
         }
         &:hover {
           background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
@@ -46,9 +45,17 @@ export const dropdown = css`
             ${activeItemAfterStyle};
           }
         }
+        svg {
+          margin-top: 2px;
+          margin-right: 8px;
+        }
+        // 复选框对齐
+        .ui.checkbox input[type="checkbox"] {
+          height: 100%;
+        }
       }
       > .divider {
-        margin: 0.5rem 0;
+        margin: 8px 0;
       }
       &:after {
         display: none !important;
@@ -59,7 +66,7 @@ export const dropdown = css`
   .ui.dropdown:not(.upward),
   .ui.menu .ui.dropdown:not(.upward) {
     .menu {
-      margin-top: 0.35em !important;
+      margin-top: 4px !important;
     }
   }
   // 向上弹出的下拉菜单向上偏移
@@ -67,7 +74,7 @@ export const dropdown = css`
   .ui.menu .ui.dropdown.upward {
     .menu {
       animation: ${animationUp};
-      margin-bottom: 0.35em !important;
+      margin-bottom: 4px !important;
     }
   }
   // 修复下拉菜单元素溢出问题

styles/public/navbar.ts

@@ -1,4 +1,5 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { fallbackVar } from "src/functions";
+import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
 
 export const navbarRight = css`
   #navbar {
@@ -91,6 +92,24 @@ export const navbarRight = css`
         }
       }
     }
+    // 用户菜单
+    .navbar-right .user-menu {
+      width: ${fallbackVar(customThemeVars.userMenuWidth, "192px")};
+      max-width: 320px;
+      > .header {
+        font-size: 14px;
+        font-weight: 400;
+        margin: 0;
+        padding: 16px 16px 8px 16px;
+        strong {
+          font-weight: 600;
+        }
+      }
+      > .divider {
+        margin: 8px;
+        width: calc(100% - 16px);
+      }
+    }
   }
   // 手机下的创建菜单按钮
   @media (max-width: 767.98px) {