修复发布页主色调按钮多余的阴影

.github/FUNDING.yml

@@ -12,4 +12,4 @@ lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cl
 polar: # Replace with a single Polar username
 buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
 thanks_dev: # Replace with a single thanks.dev username
-custom: ['https://afdian.com/a/luting']
+custom: ["https://afdian.com/a/luting"]

.github/release.md

@@ -1,5 +1,19 @@
+### 🎉 已完成大部分页面的 GitHub 风格 ( GitHub Style Completed for Most Pages )
+
+如果您仍在使用旧版本，强烈建议更新至本版本。此版本已为大部分常用页面实现了 GitHub 风格设计，提供了更强的一致性，并修复了若干已知问题。
+
+由于布局限制，项目和百科页面的 GitHub 风格适配方案尚未确定。
+
+If you are still using an older version, we highly recommend updating to this release. This version has implemented the
+GitHub-style design for most commonly used pages, ensuring stronger consistency, and addresses several known issues.
+
+Due to layout constraints, the approach for adapting the GitHub style to Project and Wiki pages has not yet been
+determined.
+
 ### ✨ Feature
 
+- 修改外观设置中显示的主题名称
+
 #### CSS 变量
 
 - 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
@@ -9,6 +23,7 @@
 
 - 优化小型按钮的高度
 - 一些列表栏的元素位置居中
+- 优化仪表板热力图和动态样式
 
 ##### 更符合 GitHub 风格
 
@@ -30,6 +45,9 @@
 - 同步仓库已标星的星星颜色
 - 优化仪表板动态信息间隔
 - 微调仓库相关界面元素间隔
+- 同步软件包页面样式
+- 同步提示框样式
+- 同步主色调按钮和红色按钮的阴影样式
 
 ### 🐞 Fix
 
@@ -40,7 +58,10 @@
 - 取消修改编辑器字体大小, 避免光标错位
 - 修复文件预览时文件树右边框过粗
 - 修复提交列表尾行圆角
-- 修复 wiki 页面和组织页面的用户下拉菜单的圆角问题
+- 修复 Wiki 页面和二级导航栏组织页面的团队菜单的圆角问题
+- 修复创建工单页面样式
+- 修复归档仓库 Issue 时间线过长插入归档信息框
+- 修复亮色主题下的 PR 合并操作评论的头像和按钮图标颜色
 
 ## 📃 English (From AI)
 

package.json

@@ -1,7 +1,6 @@
 {
   "name": "gitea-github-theme",
   "version": "1.24.6",
-  "description": "A sophisticated theme to make Gitea look and feel like GitHub",
   "type": "module",
   "scripts": {
     "dev": "vite build --mode dev",

src/core/github.ts

@@ -36,10 +36,12 @@ export type GithubColor = {
     black: string;
     white: string;
     muted: string;
+    onEmphasis: string;
   };
   bgColor: {
     accent: { emphasis: string; muted: string };
     attention: { muted: string };
+    emphasis: string;
     success: { emphasis: string; muted: string };
     danger: { muted: string };
     done: { emphasis: string };
@@ -66,7 +68,7 @@ export type GithubColor = {
     bgColor: { active: string; hover: string; rest: string };
     transparent: { bgColor: { active: string; hover: string; selected: string } };
   };
-  shadow: { floating: { small: string } };
+  shadow: { floating: { small: string }; resting: { small: string } };
   overlay: { backdrop: { bgColor: string } };
   underlineNav: { borderColor: { active: string } };
   contribution: {
@@ -193,8 +195,8 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       activeBg: githubColor.bgColor.accent.muted,
     },
     tooltip: {
-      text: githubColor.fgColor.default,
-      bg: githubColor.bgColor.default,
+      text: githubColor.fgColor.onEmphasis,
+      bg: githubColor.bgColor.emphasis,
     },
     nav: {
       bg: githubColor.bgColor.inset,
@@ -300,6 +302,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       floating: {
         small: `0px 0px 0px 1px ${themeVars.color.light.border}, 0px 6px 12px -3px ${themeVars.color.shadow.self}, 0px 6px 18px 0px ${themeVars.color.shadow.self};`,
       },
+      resting: {
+        small: `0px 1px 1px 0px ${githubColor.shadow.resting.small}, 0px 1px 3px 0px ${githubColor.shadow.resting.small};`,
+      },
     },
     underlineNav: {
       borderColor: {

src/core/theme.ts

@@ -1,5 +1,7 @@
-import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css";
-import { otherThemeVars, themeVars } from "src/types/vars";
+import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
+import fs from "node:fs";
+import path from "node:path";
+import { otherThemeVars, themeInfoVars, themeVars } from "src/types/vars";
 import type { MapLeafNodes, WithOptionalLayer } from "./types";
 
 export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
@@ -32,11 +34,19 @@ const emoji = `
 .emoji[aria-label="musical notes"]
 `;
 
+// 版本号: 版本号.YYMMDD
+const now = new Date();
+const year = now.getFullYear().toString().slice(-2);
+const month = (now.getMonth() + 1).toString().padStart(2, "0");
+const day = now.getDate().toString().padStart(2, "0");
+
+const pkgPath = path.join(__dirname, "../..", "package.json");
+const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+const version = `"${pkg.version}.${year}${month}${day}"`;
+
 export function createTheme(theme: Theme): void {
   const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme);
-  if (isDarkTheme) {
-    globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
-  }
+  createGlobalTheme(":root", themeInfoVars, { version });
   createGlobalTheme(":root", themeVars, theme);
   createGlobalTheme(":root", otherThemeVars, {
     border: { radius: "6px" },
@@ -53,12 +63,5 @@ export function createTheme(theme: Theme): void {
     accentColor: themeVars.color.accent,
     colorScheme: isDarkTheme ? "dark" : "light",
   });
-  globalKeyframes(overlayAppearDown, {
-    "0%": { opacity: 0, transform: "translateY(-8px)" },
-    "100%": { opacity: 1, transform: "translateY(0)" },
-  });
-  globalKeyframes(overlayAppearUp, {
-    "0%": { opacity: 0, transform: "translateY(8px)" },
-    "100%": { opacity: 1, transform: "translateY(0)" },
-  });
+  if (isDarkTheme) globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
 }

src/core/vite.ts

@@ -50,6 +50,11 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k
   return input;
 }
 
+function giteaThemeMetaInfo(nameGroup: string[]): string {
+  const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+  return `gitea-theme-meta-info{--theme-display-name:"GitHub ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
+}
+
 const prefix = "theme-github-";
 
 /**
@@ -82,23 +87,28 @@ export function themePlugin(): Plugin {
           const fileName = `${prefix}${value.fileName}`;
           const originalFileName = value.originalFileNames.pop();
           const type = value.type;
-          const source = `${styles}${value.source.toString()}`;
+          // 合并样式文件和主题信息
+          const meta = giteaThemeMetaInfo(key.split(".")[0].split("-"));
+          const source = `${meta}${value.source.toString()}${styles}`;
           // 添加主题到输出
           this.emitFile({ name, fileName, source, type, originalFileName });
           // 自动颜色主题
           const isDark = key.endsWith("dark.css");
-          const darkName = key.replace("light.css", "dark.css");
-          const lightName = key.replace("dark.css", "light.css");
-          const autoName = `${prefix}${key.replace("dark.css", "auto.css").replace("light.css", "auto.css")}`;
+          const darkName = key.replace("light", "dark");
+          const lightName = darkName.replace("dark", "light");
           const findTheme = isDark ? lightName : darkName;
           if (findTheme in bundle) {
+            const autoName = `${prefix}${darkName.replace("dark", "auto")}`;
             const lightContent = `@import "./${prefix}${lightName}" (prefers-color-scheme: light);`;
             const darkContent = `@import "./${prefix}${darkName}" (prefers-color-scheme: dark);`;
+            const nameGroup = key.split(".")[0].split("-").slice(0, -1);
+            nameGroup.push("auto");
+            const metaInfo = giteaThemeMetaInfo(nameGroup);
             this.emitFile({
               name: autoName,
               fileName: autoName,
               type: "asset",
-              source: `${lightContent}\n${darkContent}`,
+              source: `${lightContent}\n${darkContent}\n${metaInfo}`,
             });
           }
           // 删除原始的样式文件, 自动颜色主题因为删除, 永远不会生成两次

src/types/color/github.ts

@@ -197,6 +197,17 @@ export const github = {
       /** 悬浮阴影
        * @tippy `tippyBox` 悬浮框阴影
        * @dropdown `dropdown` 下拉框阴影
+       * @dashboard `dashboard` 仓库/组织切换按钮和列表边框和阴影
+       * @heatmap `heatmap` 热力图阴影
+       * @heatmap `activity` 动态活动阴影
+       */
+      small: null,
+    },
+    resting: {
+      /** 静止阴影
+       * @button `primaryStyle` 主色调按钮阴影
+       * @button `redButton` 红色按钮悬浮阴影
+       * @setting `button` 红色按钮阴影
        */
       small: null,
     },

src/types/color/other.ts

@@ -114,7 +114,7 @@ export const other = {
     /** 点击后颜色 */
     activeBg: "color-reaction-active-bg",
   },
-  /** 不知道是干啥的 */
+  /** 鼠标悬浮时的提示文本, 比如提交的具体时间, 任务状态等 */
   tooltip: {
     text: null,
     bg: null,

src/types/vars.ts

@@ -41,8 +41,13 @@ const customVars = {
   org: { repolistColumns: "org-repolist-columns", userlistColumns: "org-userlist-columns" },
 };
 
+const themeInfo = {
+  version: null,
+};
+
 export const themeVars = createGlobalThemeContract(vars, varMapper());
 export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper());
 export const customThemeVars = createGlobalThemeContract(customVars, varMapper("custom"));
+export const themeInfoVars = createGlobalThemeContract(themeInfo, varMapper("theme"));
 
 export { css } from "@linaria/core";

styles/components/dashboard.ts

@@ -57,6 +57,7 @@ export const dashboard = css`
           padding: 8px;
           li {
             border-radius: ${otherThemeVars.border.radius};
+            padding: 6px 8px !important;
             &:not(:last-child) {
               border-bottom: 0;
             }

styles/components/filelist.ts

@@ -22,6 +22,7 @@ export const syncFork = css`
     .repo-home-filelist > .ui.message {
       background: ${themeVars.color.box.header};
       padding: 8px 8px 8px 16px;
+      margin: 16px 0px;
       .ui.button {
         min-width: 96px;
       }

styles/components/heatmap.ts

@@ -1,7 +1,11 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 export const heatmap = css`
   #user-heatmap {
+    + .divider:not(.divider-text) {
+      border-color: #0000;
+      margin: 8px 0px;
+    }
     .total-contributions {
       left: 25px + 20px;
       bottom: 0 + 12px;
@@ -12,8 +16,8 @@ export const heatmap = css`
     }
     .vch__container {
       padding: 12px 20px;
-      border: 1px solid ${themeVars.color.secondary.self};
-      border-radius: ${otherThemeVars.border.radius};
+      box-shadow: ${themeVars.github.shadow.floating.small};
+      border-radius: 12px;
       // 覆盖热力图和图例的背景色
       .vch__day__square,
       .vch__legend__wrapper rect {
@@ -65,13 +69,12 @@ export const heatmap = css`
 
 // 动态
 export const activity = css`
-  #activity-feed {
-    .flex-item {
+  .flex-list#activity-feed {
+    border-radius: 12px;
+    box-shadow: ${themeVars.github.shadow.floating.small};
+    > .flex-item {
       gap: 12px;
-      padding: 16px 0;
-      &:first-child {
-        padding-top: 6px;
-      }
+      padding: 12px 8px 16px 14px;
       > .flex-item-main {
         gap: 8px !important;
         > div:not([class]) {
@@ -89,5 +92,9 @@ export const activity = css`
         width: 20px;
       }
     }
+    > .page.buttons {
+      border-top: 1px solid ${themeVars.color.secondary.self};
+      padding: 12px 0px;
+    }
   }
 `;

styles/components/index.ts

@@ -13,6 +13,7 @@ import "./milestones";
 import "./newrepo";
 import "./notification";
 import "./org";
+import "./packages";
 import "./release";
 import "./repo";
 import "./setting";

styles/components/issue.ts

@@ -48,9 +48,6 @@ export const issueList = css`
       }
       .issue-list-toolbar-right > .ui.menu {
         align-items: center;
-        > .item {
-          color: ${themeVars.color.text.light.num1};
-        }
         > .ui.button {
           padding: 0 12px;
           height: 32px;
@@ -363,6 +360,16 @@ export const comment = css`
   }
 `;
 
+// 评论书写框
+export const commentForm = css`
+  .repository .comment.form .content .segment {
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+`;
+
 export const dropdown = css`
   .repository {
     // Issue/PR 列表下的所有筛选菜单
@@ -382,7 +389,7 @@ export const prMerge = css`
   .repository.view.issue .comment-list .timeline-item.pull-merge-box {
     // 头像
     .timeline-avatar {
-      color: ${themeVars.color.text.self} !important;
+      color: ${themeVars.color.white} !important;
       border-radius: ${otherThemeVars.border.radius};
       width: 40px;
       height: 40px;
@@ -462,6 +469,12 @@ export const prMerge = css`
       padding: 16px;
       display: grid;
       gap: 8px;
+      &.no-header {
+        &::before,
+        &::after {
+          display: none;
+        }
+      }
     }
   }
 `;
@@ -470,6 +483,11 @@ export const prMerge = css`
 export const timeline = css`
   .repository.view.issue {
     .comment-list {
+      // 时间线本线
+      .timeline::before {
+        // 不遮挡归档信息框, 归档信息框背景色有透明度时会漏出线
+        height: calc(100% - 62px);
+      }
       .timeline-item,
       .timeline-item-group {
         padding: 16px 0;
@@ -522,37 +540,62 @@ const sidebarPadding = {
 
 // 侧边栏
 export const issueSidebar = css`
-  .issue-content {
-    gap: 24px;
-    .issue-content-right {
-      border: 0;
-      font-size: 12px;
-      padding: 0;
-      .ui.button {
+  // 工单&创建工单&PR页面侧边栏
+  .page-content.repository.issue {
+    .issue-content {
+      gap: 24px;
+      .issue-content-right {
+        border: 0;
         font-size: 12px;
-      }
-      .ui.form,
-      a.fixed-text.muted,
-      span.text,
-      // 列表项为空时的文字
-      span.item.empty-list,
-      p {
-        color: ${themeVars.color.text.light.num1};
-        font-size: 12px;
-      }
-      .ui.dropdown.select-branch,
-      .ui.form,
-      a.fixed-text.muted,
-      span.text,
-      .ui.watching > div,
-      .ui.depending > div,
-      .flex-text-block,
-      .ui.list,
-      p {
-        ${sidebarPadding};
-      }
-      .issue-sidebar-combo {
-        .ui.dropdown > a.fixed-text.muted {
+        padding: 0;
+        .ui.button {
+          font-size: 12px;
+        }
+        .ui.form,
+        a.fixed-text.muted,
+        span.text,
+        // 列表项为空时的文字
+        span.item.empty-list,
+        p {
+          color: ${themeVars.color.text.light.num1};
+          font-size: 12px;
+        }
+        .ui.dropdown.select-branch,
+        .ui.form,
+        a.fixed-text.muted,
+        span.text,
+        .ui.watching > div,
+        .ui.depending > div,
+        .flex-text-block,
+        .ui.list,
+        .toggle-wip,
+        p {
+          ${sidebarPadding};
+        }
+        // 允许维护者编辑
+        > .ui.checkbox {
+          margin: 4px 8px;
+          strong {
+            font-weight: 400;
+          }
+        }
+        .issue-sidebar-combo {
+          .ui.dropdown > a.fixed-text.muted {
+            align-items: center;
+            border-radius: ${otherThemeVars.border.radius};
+            text-decoration-line: none;
+            height: 28px;
+            &:hover {
+              background: ${themeVars.github.control.transparent.bgColor.hover};
+            }
+          }
+          .ui.list {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+        }
+        // 时间追踪
+        > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
           align-items: center;
           border-radius: ${otherThemeVars.border.radius};
           text-decoration-line: none;
@@ -561,62 +604,48 @@ export const issueSidebar = css`
             background: ${themeVars.github.control.transparent.bgColor.hover};
           }
         }
-        .ui.list {
-          margin-top: 0 !important;
-          margin-bottom: 0 !important;
+        // 选中日期颜色
+        .ui.form .due-date {
+          color: ${themeVars.color.text.self};
         }
-      }
-      // 时间追踪
-      > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
-        align-items: center;
-        border-radius: ${otherThemeVars.border.radius};
-        text-decoration-line: none;
-        height: 28px;
-        &:hover {
-          background: ${themeVars.github.control.transparent.bgColor.hover};
+        .divider {
+          margin: 12px 0 12px 8px;
+          width: calc(100% - 16px);
         }
-      }
-      // 选中日期颜色
-      .ui.form .due-date {
-        color: ${themeVars.color.text.self};
-      }
-      .divider {
-        margin: 12px 0 12px 8px;
-        width: calc(100% - 16px);
-      }
-      // 订阅按钮
-      .ui.watching .ui.button {
-        padding: 0px 8px;
-        height: 28px;
-        svg {
-          margin: 0 !important;
-        }
-      }
-      // PIN 按钮
-      .form-fetch-action.single-button-form .ui.button,
-      // 底部操作按钮
-      .ui.show-modal.button {
-        border: 0;
-        background: unset;
-        font-weight: 400;
-        ${sidebarPadding};
-        // 好像是浏览器 BUG, 最后不生效, 必须 !important
-        margin: 0 !important;
-        justify-content: left;
-        &:hover {
-          background: ${themeVars.github.control.transparent.bgColor.hover};
-        }
-      }
-      .ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
-        color: ${themeVars.color.red.self};
-        svg {
-          color: ${themeVars.color.red.self};
-        }
-        &:hover {
-          background-color: ${themeVars.color.red.badge.bg};
-          color: ${themeVars.color.red.light};
+        // 订阅按钮
+        .ui.watching .ui.button {
+          padding: 0px 8px;
+          height: 28px;
           svg {
+            margin: 0 !important;
+          }
+        }
+        // PIN 按钮
+        .form-fetch-action.single-button-form .ui.button,
+        // 底部操作按钮
+        .ui.show-modal.button {
+          border: 0;
+          background: unset;
+          font-weight: 400;
+          ${sidebarPadding};
+          // 好像是浏览器 BUG, 最后不生效, 必须 !important
+          margin: 0 !important;
+          justify-content: left;
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+          }
+        }
+        .ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
+          color: ${themeVars.color.red.self};
+          svg {
+            color: ${themeVars.color.red.self};
+          }
+          &:hover {
+            background-color: ${themeVars.color.red.badge.bg};
             color: ${themeVars.color.red.light};
+            svg {
+              color: ${themeVars.color.red.light};
+            }
           }
         }
       }

styles/components/packages.ts

@@ -0,0 +1,124 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+// 组织/仓库的软件包列表(包含用户但未测试)
+export const packagesList = css`
+  .page-content.packages {
+    // 这里必须要用 >, 否则会影响到软件包详细信息页的样式
+    > .ui.container > div:not([class]) {
+      border: 1px solid ${themeVars.color.light.border};
+      border-radius: ${otherThemeVars.border.radius};
+      margin-top: 16px;
+      .flex-list {
+        border-top: 1px solid ${themeVars.color.light.border};
+        &:first-child {
+          border-top: 0;
+        }
+        .flex-item {
+          padding: 16px;
+          .flex-item-main {
+            .flex-item-title {
+              gap: 8px;
+              > a {
+                min-height: 25px;
+              }
+              // 软件包类型的标签
+              .ui.label {
+                gap: 4px;
+                padding: 3px 6px;
+                min-height: 24.5px;
+                background-color: unset;
+                border: 1px solid ${themeVars.color.light.border};
+                color: ${themeVars.color.primary.self};
+              }
+            }
+            .flex-item-body {
+              font-size: 12px;
+              a {
+                text-decoration: underline;
+                text-underline-offset: 3px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// 软件包详细信息页
+export const packagesDetail = css`
+  .page-content.packages {
+    .issue-title-header > div {
+      color: ${themeVars.color.text.light.num1};
+    }
+    .issue-content {
+      .issue-content-left {
+        .ui.top.attached.header {
+          font-size: 14px;
+          padding: 16px;
+        }
+        .ui.attached.segment {
+          color: ${themeVars.color.text.light.num1};
+          padding: 16px;
+          .ui.table,
+          .ui.form .field > label {
+            color: ${themeVars.color.text.light.num1};
+          }
+          .ui.form .field > label {
+            margin-bottom: 8px;
+          }
+          .markup {
+            color: ${themeVars.color.text.self};
+            pre {
+              font-size: 12px;
+              font-weight: 400;
+              padding: 12px 16px;
+            }
+          }
+          + .ui.top.attached.header {
+            margin-top: 24px;
+          }
+        }
+      }
+      .issue-content-right {
+        border: 0;
+        padding: 0px 16px;
+        > strong {
+          font-size: 16px;
+        }
+        > .divider {
+          margin: 16px 0px;
+        }
+        // 详情
+        > .ui.relaxed.list {
+          margin: 16px 0px;
+          .item {
+            color: ${themeVars.color.text.light.num1};
+            svg {
+              color: ${themeVars.color.text.self};
+            }
+            // 应该只选中版本中的 a 标签
+            &.tw-flex {
+              justify-content: space-between;
+              > a {
+                border: 1px solid ${themeVars.color.light.border};
+                border-radius: 25px;
+                font-size: 12px;
+                padding: 0px 6px;
+                min-height: 20px;
+                flex: none !important;
+                &:hover {
+                  text-decoration: none;
+                }
+              }
+              // 不知道什么东西
+              &::after {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

styles/components/release.ts

@@ -19,6 +19,27 @@ export const releaseTagMenu = css`
   }
 `;
 
+// 顶部右侧按钮组
+export const rightButton = css`
+  .page-content.repository {
+    &.releases,
+    &.tags {
+      .ui.small.button {
+        background-color: ${themeVars.color.button};
+        border-color: ${themeVars.color.light.border};
+        box-shadow: none;
+        color: ${themeVars.color.text.light.self};
+        padding: 5px 16px;
+        min-height: auto;
+        line-height: 20px;
+        &:hover {
+          background-color: ${themeVars.color.hover.self};
+        }
+      }
+    }
+  }
+`;
+
 // 标签页样式
 export const tags = css`
   .page-content.repository.tags {
@@ -152,23 +173,3 @@ export const releases = css`
     }
   }
 `;
-
-// 顶部右侧按钮组
-export const rightButton = css`
-  .page-content.repository {
-    &.releases,
-    &.tags {
-      .ui.small.button {
-        background-color: ${themeVars.color.button};
-        border-color: ${themeVars.color.light.border};
-        color: ${themeVars.color.text.light.self};
-        padding: 5px 16px;
-        min-height: auto;
-        line-height: 20px;
-        &:hover {
-          background-color: ${themeVars.color.hover.self};
-        }
-      }
-    }
-  }
-`;

styles/components/setting.ts

@@ -25,7 +25,7 @@ export const button = css`
       color: ${themeVars.color.text.light.self};
       background-color: ${themeVars.color.button};
       border-color: ${themeVars.color.light.border};
-
+      box-shadow: none;
       &:hover {
         background-color: ${themeVars.color.hover.self};
       }
@@ -57,12 +57,19 @@ export const button = css`
     }
   }
   // 管理员设置界面下的自定义主色调按钮
-  .admin-setting-content .ui.primary.button {
-    ${tinyStyle}
-    padding: 5px 16px;
-    line-height: 22px;
-    &:hover {
-      ${tinyHoverStyle}
+  .admin-setting-content {
+    .ui.primary.button {
+      ${tinyStyle}
+      padding: 5px 16px;
+      line-height: 22px;
+      &:hover {
+        ${tinyHoverStyle}
+      }
+    }
+    .ui.red.button {
+      box-shadow: ${themeVars.github.shadow.resting.small};
+      padding: 5px 16px;
+      line-height: 22px;
     }
   }
 `;

styles/components/signin.ts

@@ -40,6 +40,15 @@ export const signIn = css`
       .button {
         height: 40px;
       }
+      .divider.divider-text {
+        margin: 20px 0px;
+      }
+      #oauth2-login-navigator-inner {
+        gap: 8px;
+        .ui.button svg {
+          width: 18px;
+        }
+      }
     }
     .ui.top.attached.header.segment {
       font-size: 14px;

styles/public/animation.ts

@@ -0,0 +1,27 @@
+import { overlayAppearDown, overlayAppearUp } from "src/core/theme";
+import { css } from "src/types/vars";
+
+export const keyframe = css`
+  // 向下出现动画
+  @keyframes ${overlayAppearDown} {
+    0% {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  // 向上出现动画
+  @keyframes ${overlayAppearUp} {
+    0% {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;

styles/public/button.ts

@@ -4,6 +4,7 @@ export const primaryStyle = {
   color: themeVars.github.button.primary.fgColor.rest,
   backgroundColor: themeVars.github.button.primary.bgColor.rest,
   borderColor: themeVars.github.button.primary.borderColor.rest,
+  boxShadow: themeVars.github.shadow.resting.small,
 };
 
 export const primaryHoverStyle = {
@@ -27,7 +28,7 @@ export const baseButton = css`
   }
   // 主色调按钮保持白色
   .ui.primary.buttons .button svg {
-    color: ${themeVars.color.text.self};
+    color: ${themeVars.color.white};
   }
   .ui.primary {
     &.button,
@@ -45,6 +46,7 @@ export const baseButton = css`
     background-color: ${themeVars.color.button};
     color: ${themeVars.color.text.self};
     border-color: ${themeVars.color.light.border};
+    box-shadow: none;
     &:hover {
       background-color: ${themeVars.color.hover.self};
       color: ${themeVars.color.text.self};
@@ -85,6 +87,7 @@ export const redButton = css`
       color: ${themeVars.github.button.danger.fgColor.hover};
       background-color: ${themeVars.github.button.danger.bgColor.hover};
       border-color: ${themeVars.github.button.danger.borderColor.hover};
+      box-shadow: ${themeVars.github.shadow.resting.small};
     }
   }
 `;
@@ -120,4 +123,9 @@ export const fixButton = css`
   .ui.ui.ui.ui.small.button {
     z-index: 0;
   }
+  // 代码复制按钮
+  .ui.button.code-copy {
+    padding: 4px 6px;
+    min-height: 28px;
+  }
 `;

styles/public/index.ts

@@ -2,6 +2,7 @@
 // tslint:disable:ordered-imports
 // 组件导入有顺序, 禁止插件优化
 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
+import "./animation"; // 动画效果
 import "./transition"; // 过渡效果
 import "./text"; // 文本或 SVG 的基本颜色
 import "./button"; // 按钮

styles/public/input.ts

@@ -35,7 +35,8 @@ export const input = css`
     height: 32px;
   }
   // 由于输入框高度, 需要输入框在表单中垂直居中
-  .ui.form {
+  // 管理员页面仓库搜索表单
+  .ui.form#repo-search-form {
     align-items: center;
   }
 `;

styles/public/label.ts

@@ -84,6 +84,8 @@ export const shaLabel = css`
     color: ${themeVars.color.text.light.num1};
     font-size: 12px;
     font-weight: 500;
+    // 仪表盘页的提交 SHA 标签居中对齐
+    margin-top: 2px;
     &:hover {
       background-color: ${themeVars.color.label.hoverBg};
     }
@@ -186,19 +188,3 @@ export const repoLabel = css`
     font-size: 14px;
   }
 `;
-
-// 软件包列表
-export const packagesLabel = css`
-  .page-content {
-    &.packages {
-      > .ui.container > div > .flex-list {
-        // 软件包类型的标签
-        .ui.label {
-          background-color: unset;
-          border: 1px solid ${themeVars.color.light.border};
-          color: ${themeVars.color.primary.self};
-        }
-      }
-    }
-  }
-`;

styles/public/menu.ts

@@ -148,6 +148,7 @@ export const secondaryMenu = css`
       padding: 0px 12px;
       height: 32px;
       font-weight: 500;
+      color: ${themeVars.color.text.light.num1};
     }
   }
   // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
@@ -201,6 +202,7 @@ export const paginationMenu = css`
     background-color: unset;
     border: 0;
     gap: 4px;
+    min-height: fit-content;
     .item {
       border-radius: ${otherThemeVars.border.radius};
       min-width: 32px;
@@ -243,6 +245,8 @@ export const smallCompactMenu = css`
   .page-content.user.notification > .ui.container:has(.flex-list),
   // 里程碑/标签切换菜单(里程碑页)
   .page-content.repository.milestones .list-header,
+  // 里程碑/标签切换菜单(新建里程碑页)
+  .page-content.repository.new.milestone .issue-navbar,
   // 里程碑/标签切换菜单(标签页)
   .page-content.repository.labels .issue-navbar {
     .ui.compact.small.menu.small-menu-items {

styles/public/tippy.ts

@@ -5,16 +5,19 @@ import { css, otherThemeVars, themeVars } from "src/types/vars";
 export const tippyBox = css`
   .tippy-box {
     margin-top: -3px;
-    border-radius: 12px;
+    border-radius: ${otherThemeVars.border.radius};
     overflow: hidden;
     animation: ${animationDown};
-    // 边框线同步 github 样式
+    // 克隆菜单和PR提示框为 default
     &[data-theme="default"],
+    // 带标题的提示框 (Runner信息)
     &[data-theme="box-with-header"] {
       border: unset;
       box-shadow: ${themeVars.github.shadow.floating.small};
     }
-    // 带标题的提示框 (Runner信息)
+    &[data-theme="default"] {
+      border-radius: 12px;
+    }
     &[data-theme="box-with-header"] {
       .tippy-content {
         background-color: ${themeVars.color.menu};
@@ -26,7 +29,7 @@ export const tippyBox = css`
     // 差异对比中文件路径行右侧的三个点菜单
     &[data-theme="menu"] {
       .tippy-content {
-        padding: 0.5rem;
+        padding: 8px;
         .item {
           border-radius: ${otherThemeVars.border.radius};
           &:hover {
@@ -35,5 +38,13 @@ export const tippyBox = css`
         }
       }
     }
+    // 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等
+    &[data-theme="tooltip"] {
+      .tippy-content {
+        font-size: 12px;
+        font-weight: 400;
+        padding: 4px 8px;
+      }
+    }
   }
 `;

themes/dark.css.ts

@@ -32,6 +32,7 @@ export const darkGithubColors: GithubColor = {
     success: "#3fb950",
     black: "#010409",
     white: "#ffffff",
+    onEmphasis: "#ffffff",
   },
   bgColor: {
     accent: { emphasis: "#1f6feb", muted: "#388bfd1a" },
@@ -39,6 +40,7 @@ export const darkGithubColors: GithubColor = {
     danger: { muted: "#f851491a" },
     default: "#0d1117",
     done: { emphasis: "#8957e5" },
+    emphasis: "#3d444d",
     muted: "#151b23",
     neutral: { muted: "#656c7633" },
     success: { emphasis: "#238636", muted: "#2ea04326" },
@@ -62,7 +64,7 @@ export const darkGithubColors: GithubColor = {
     bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
     transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
   },
-  shadow: { floating: { small: "#01040966" } },
+  shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
   overlay: { backdrop: { bgColor: "#21283066" } },
   underlineNav: { borderColor: { active: "#f78166" } },
   contribution: {

themes/light.css.ts

@@ -32,6 +32,7 @@ export const lightGithubColors: GithubColor = {
     success: "#1a7f37",
     black: "#1f2328",
     white: "#ffffff",
+    onEmphasis: "#ffffff",
   },
   bgColor: {
     accent: { emphasis: "#0969da", muted: "#ddf4ff" },
@@ -39,6 +40,7 @@ export const lightGithubColors: GithubColor = {
     danger: { muted: "#ffebe9" },
     default: "#ffffff",
     done: { emphasis: "#8250df" },
+    emphasis: "#25292e",
     muted: "#f6f8fa",
     neutral: { muted: "#818b981f" },
     success: { emphasis: "#1f883d", muted: "#dafbe1" },
@@ -62,7 +64,7 @@ export const lightGithubColors: GithubColor = {
     bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
     transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
   },
-  shadow: { floating: { small: "#25292e0a" } },
+  shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
   overlay: { backdrop: { bgColor: "#c8d1da66" } },
   underlineNav: { borderColor: { active: "#fd8c73" } },
   contribution: {

themes/soft-dark.css.ts

@@ -27,6 +27,7 @@ export const softDarkGithubColors: GithubColor = {
     success: "#57ab5a",
     black: "#010409",
     white: "#cdd9e5",
+    onEmphasis: "#ffffff",
   },
   bgColor: {
     accent: { emphasis: "#316dca", muted: "#4184e41a" },
@@ -34,6 +35,7 @@ export const softDarkGithubColors: GithubColor = {
     danger: { muted: "#e5534b1a" },
     default: "#212830",
     done: { emphasis: "#8256d0" },
+    emphasis: "#3d444d",
     muted: "#262c36",
     neutral: { muted: "#656c7633" },
     success: { emphasis: "#347d39", muted: "#46954a26" },
@@ -57,7 +59,7 @@ export const softDarkGithubColors: GithubColor = {
     bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
     transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
   },
-  shadow: { floating: { small: "#01040966" } },
+  shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
   overlay: { backdrop: { bgColor: "#262c3666" } },
   underlineNav: { borderColor: { active: "#ec775c" } },
   contribution: {