同步仓库已标星的星星颜色

.github/release.md

@@ -2,6 +2,7 @@
 
 #### CSS 变量
 
+- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
 - 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度
 
 ### 🌈 Style
@@ -19,10 +20,14 @@
 - 同步里程碑页面样式
 - 同步顶部工单等仪表板样式
 - 同步置顶 Issue 样式
-- 同步订阅页面样式
+- 同步订阅/关注页面样式
 - 同步用户菜单样式
 - 优化下拉菜单样式
 - 同步差异对比页面文件名标题栏样式
+- 同步分支菜单宽度
+- 同步通知页面样式
+- 优化仪表板的仓库组织切换按钮样式
+- 同步仓库已标星的星星颜色
 
 ### 🐞 Fix
 

README.md

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

README_EN.md

@@ -105,9 +105,10 @@ 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   |
-| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :------------ | :---- |
+| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- |
+| --custom-branch-menu-width        | Branch menu width                                        | 320px   | 320px  | 320px     | Gitea | 640px |
 | --custom-clone-menu-width         | Clone button menu width                                  | Gitea   | 332px  | 200px     | 150px | 400px |
-| --custom-user-menu-width          | User menu width                                          | 192px   | 200px  |           | Content Width | 320px |
+| --custom-user-menu-width          | User menu width                                          | 192px   | 200px  |           | Gitea | 320px |
 | --custom-explore-repolist-columns | Number of repository list columns on explore page        | 2       | 2      | 2         |       |       |
 | --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3       | 1      | 2/3       |       |       |
 | --custom-user-repolist-columns    | Number of repository list columns on user page           | 2       | 2      | 1/2       |       |       |

src/core/github.ts

@@ -60,6 +60,7 @@ export type GithubColor = {
   button: {
     primary: { fgColor: { rest: string }; bgColor: { hover: string } };
     danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } };
+    star: { iconColor: string };
   };
   control: {
     bgColor: { active: string; hover: string; rest: string };
@@ -281,6 +282,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
           hover: githubColor.borderColor.translucent,
         },
       },
+      star: {
+        iconColor: githubColor.button.star.iconColor,
+      },
     },
     control: {
       bgColor: {

src/types/color/github.ts

@@ -37,6 +37,7 @@ export const github = {
        * @repo `repoTopic` 仓库主题标签背景颜色
        * @actions `actions` 分支标签按钮背景颜色
        * @actions `actionViewHeader` 分支标签按钮背景颜色
+       * @notification `notification` 通知列表悬停时的背景颜色
        */
       muted: null,
     },
@@ -62,6 +63,7 @@ export const github = {
        * @issue `comment` 评论框被选中时的边框颜色
        * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
        * @dropdown `selectionDropdown` 选择输入框的内部边框颜色
+       * @notification `notification` 通知列表悬停时的左边框颜色
        */
       emphasis: null,
     },
@@ -158,6 +160,10 @@ export const github = {
         hover: null,
       },
     },
+    star: {
+      /** 已标星的星星颜色 */
+      iconColor: null,
+    },
   },
   control: {
     bgColor: {
@@ -180,6 +186,7 @@ export const github = {
          * @issue `issueSidebar` 操作按钮的悬停背景颜色
          * @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色
          * @dashboard `dashboard` 仓库列表项目的悬停背景颜色
+         * @notification `notification` 通知列表的按钮悬停背景颜色
          */
         hover: null,
       },

src/types/vars.ts

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

styles/components/dashboard.ts

@@ -5,16 +5,28 @@ export const dashboard = css`
   .page-content.dashboard.feeds {
     // 仓库列表的仓库/组织切换按钮
     .ui.two.item.menu {
-      box-shadow: ${themeVars.github.shadow.floating.small};
+      background: ${themeVars.color.hover.self};
-      border: unset;
+      border: 0;
       border-radius: 12px;
       margin-bottom: 8px;
       > .item {
-        &:first-child {
+        background: unset;
-          border-radius: 12px 0 0 12px;
+        border-radius: 12px;
+        padding: 6px 12px !important;
+        &.active {
+          background: ${themeVars.color.menu};
+          box-shadow: ${themeVars.github.shadow.floating.small};
+          font-weight: 600;
+        }
+        &::before {
+          display: none;
+        }
+        &:not(.active) {
+          margin: 4px !important;
+          width: calc(50% - 8px);
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
           }
-        &:last-child {
-          border-radius: 0 12px 12px 0;
         }
       }
     }
@@ -66,6 +78,7 @@ export const dashboard = css`
   }
 `;
 
+// 导航栏的工单/PR/里程碑仪表板
 export const dashboardIssues = css`
   .page-content.dashboard.issues {
     .list-header {

styles/components/filelist.ts

@@ -10,7 +10,7 @@ export const branchButton = css`
         border: 1px solid ${themeVars.color.light.border};
         margin-top: 1px;
         margin-left: auto;
-        margin-right: 16px; // gitea 有 RSS 留出足够的空间
+        margin-right: 20px; // gitea 有 RSS 留出足够的空间
       }
     }
   }
@@ -374,7 +374,7 @@ export const repoSidebarTop = css`
       .flex-item {
         padding: 10px 0 0 0;
         .flex-item-title {
-          margin-top: 2px;
+          margin-top: 4px;
         }
         .flex-item-body {
           padding: 8px 0 0 0;

styles/components/notification.ts

@@ -4,6 +4,48 @@ import { css, otherThemeVars, themeVars } from "src/types/vars";
 export const notification = css`
   .page-content.user.notification {
     > .ui.container {
+      // 应只选中订阅/关注页面, 不能选中通知页面
+      &:has(.flex-list) {
+        // 订阅/关注切换菜单
+        .ui.compact.small.menu.small-menu-items {
+          background: ${themeVars.color.hover.self} !important;
+          border: 0;
+          font-size: 14px;
+          gap: 8px;
+          > .item {
+            background: unset !important;
+            border: 1px solid ${themeVars.color.hover.self};
+            border-radius: ${otherThemeVars.border.radius};
+            padding: 6px 12px !important;
+            &.active {
+              background: ${themeVars.color.menu} !important;
+              border-color: ${themeVars.color.light.border};
+              font-weight: 600;
+            }
+            &::before {
+              display: none;
+            }
+            &:not(.active) {
+              // padding 纵向数值 + top 数值 = 8px 就居中
+              // 不明白啥原理, 反正 height 设为 100% 就可以了
+              top: 4px;
+              padding: 4px 12px !important;
+              height: 100%;
+              // 该方案只适用于 2 个 item 的情况
+              // left / right 数值为 gap 数值的一半
+              &:first-child {
+                left: 4px;
+              }
+              &:last-child {
+                right: 4px;
+              }
+              &:hover {
+                background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+              }
+            }
+          }
+        }
+      }
       > .ui.attached.segment {
         border: 0;
         padding: 0;
@@ -57,6 +99,122 @@ export const notification = css`
             }
           }
         }
+        // 关注列表
+        > .flex-list:not([id]) {
+          border: 1px solid ${themeVars.color.light.border};
+          border-radius: ${otherThemeVars.border.radius};
+          > .flex-item {
+            padding: 16px;
+            > .flex-item-main {
+              gap: 4px;
+              > .flex-item-header {
+                > .flex-item-title {
+                  gap: 12px;
+                }
+                > .flex-item-trailing {
+                  color: ${themeVars.color.text.light.num1};
+                  font-size: 12px;
+                  font-weight: 400;
+                  gap: 16px;
+                  .color-icon {
+                    width: 12px;
+                    height: 12px;
+                    margin-right: 0 !important;
+                  }
+                }
+              }
+              > .flex-item-body:last-child {
+                font-size: 12px;
+              }
+            }
+          }
+        }
+      }
+      // 通知列表
+      &:has(#notification_table) {
+        > .tw-flex:first-child {
+          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: 52px;
+          padding: 8px;
+          margin-bottom: 0 !important;
+          // 左侧菜单
+          > .ui.compact.menu {
+            align-items: center;
+            border: 0;
+            > .item {
+              background: unset !important;
+              border-radius: ${otherThemeVars.border.radius};
+              color: ${themeVars.color.text.light.num1};
+              padding: 0px 8px;
+              height: 30px;
+              &:before {
+                display: none;
+              }
+              &:hover {
+                background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+              }
+              &.active {
+                color: ${themeVars.color.text.self};
+                font-weight: 700;
+              }
+              .notifications-unread-count {
+                margin-left: 4px;
+              }
+            }
+          }
+        }
+        // 通知全部确认按钮
+        .ui.ui.ui.ui.mini.button {
+          height: 32px;
+        }
+      }
+      // 通知列表
+      #notification_table {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        color: ${themeVars.color.text.light.num1};
+        > .notifications-item {
+          border-top: 1px solid ${themeVars.color.light.border};
+          padding: 8px !important;
+          &:first-child {
+            border-top: 0;
+          }
+          &:last-child {
+            border-bottom-left-radius: ${otherThemeVars.border.radius};
+            border-bottom-right-radius: ${otherThemeVars.border.radius};
+          }
+          &:hover {
+            background: ${themeVars.github.bgColor.accent.muted};
+            box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset;
+            color: ${themeVars.color.text.self};
+          }
+          > .notifications-link {
+            > .notifications-top-row {
+              font-size: 12px !important;
+            }
+            > .notifications-bottom-row {
+              font-size: 14px !important;
+            }
+          }
+          > .notifications-updated {
+            font-size: 12px;
+          }
+          > .notifications-buttons {
+            .interact-bg {
+              background: ${themeVars.github.bgColor.accent.muted} !important;
+              color: ${themeVars.color.text.light.num1};
+              padding: 8px !important;
+              &:hover {
+                background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+                color: ${themeVars.color.text.self};
+              }
+            }
+          }
+        }
       }
     }
   }

styles/components/release.ts

@@ -41,7 +41,13 @@ export const tags = css`
 // 发布页样式
 export const releases = css`
   .page-content.repository.releases {
-    #release-list .release-entry {
+    > .ui.container > .divider {
+      margin: 14px 0;
+    }
+    ul#release-list {
+      gap: 32px;
+      margin: 32px 0 16px 0;
+      .release-entry {
         // 左侧发布元信息
         .meta {
           gap: 0.5rem;
@@ -144,6 +150,7 @@ export const releases = css`
         }
       }
     }
+  }
 `;
 
 // 顶部右侧按钮组

styles/public/button.ts

@@ -97,13 +97,19 @@ export const fixButtonHeight = css`
     min-height: 26px;
     height: 32px;
   }
+  // 修复仓库页仓库操作按钮高度对齐和修正
+  .repo-button-row .ui.button {
+    min-height: 32px;
+  }
   // 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
-  .ui.labeled.button > .label,
+  .repo-header {
-  .ui.ui.ui.ui.small.button.compact {
+    .ui.ui.ui.ui.small.compact.button,
+    .ui.labeled.button > .label {
       height: 28px;
       min-height: 28px;
     }
-  .ui.tiny.buttons .button,
+  }
+  .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,
   .ui.ui.ui.ui.tiny.button {
     min-height: 20px;
   }

styles/public/dropdown.ts

@@ -1,5 +1,6 @@
 import { animationDown, animationUp } from "src/core/theme";
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { fallbackVar } from "src/functions";
+import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
 export const dropdown = css`
@@ -65,14 +66,14 @@ export const dropdown = css`
   // 向下弹出的下拉菜单向下偏移
   .ui.dropdown:not(.upward),
   .ui.menu .ui.dropdown:not(.upward) {
-    .menu {
+    > .menu {
       margin-top: 4px !important;
     }
   }
   // 向上弹出的下拉菜单向上偏移
   .ui.dropdown.upward,
   .ui.menu .ui.dropdown.upward {
-    .menu {
+    > .menu {
       animation: ${animationUp};
       margin-bottom: 4px !important;
     }
@@ -194,9 +195,13 @@ export const fixSelectionDropdown = css`
 
 // 分支菜单
 export const branchDropdown = css`
-  .ui.dropdown.branch-selector-dropdown .menu > .item {
+  .ui.dropdown.branch-selector-dropdown > .menu {
+    width: ${fallbackVar(customThemeVars.branchMenuWidth, "320px")};
+    max-width: 640px;
+    > .menu > .item {
       animation: ${animationDown};
     }
+  }
 `;
 
 // 包含表情的下拉菜单

styles/public/other.ts

@@ -1,4 +1,4 @@
-import { css } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 // 一些列表头, 比如工单的搜索标签里程碑栏
 export const listHeader = css`
@@ -7,3 +7,10 @@ export const listHeader = css`
     align-content: center;
   }
 `;
+
+// 已标星的图标
+export const star = css`
+  .octicon-star-fill {
+    color: ${themeVars.github.button.star.iconColor} !important;
+  }
+`;

themes/colorblind-dark.css.ts

@@ -30,6 +30,7 @@ export const colorblindDarkGithubColors: GithubColor = {
   button: {
     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } },
     danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } },
+    star: darkGithubColors.button.star,
   },
   control: darkGithubColors.control,
   shadow: darkGithubColors.shadow,

themes/colorblind-light.css.ts

@@ -30,6 +30,7 @@ export const colorblindLightGithubColors: GithubColor = {
   button: {
     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } },
     danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } },
+    star: lightGithubColors.button.star,
   },
   control: lightGithubColors.control,
   shadow: lightGithubColors.shadow,

themes/dark.css.ts

@@ -56,6 +56,7 @@ export const darkGithubColors: GithubColor = {
   button: {
     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } },
     danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
+    star: { iconColor: "#e3b341" },
   },
   control: {
     bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },

themes/light.css.ts

@@ -56,6 +56,7 @@ export const lightGithubColors: GithubColor = {
   button: {
     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } },
     danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } },
+    star: { iconColor: "#eac54f" },
   },
   control: {
     bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },

themes/soft-dark.css.ts

@@ -51,6 +51,7 @@ export const softDarkGithubColors: GithubColor = {
   button: {
     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } },
     danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } },
+    star: { iconColor: "#daaa3f" },
   },
   control: {
     bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },