update md

.github/release-template.md

@@ -1,3 +1,5 @@
+## 🎉
+
 ## ✨ Feature
 
 #### CSS 变量
@@ -6,6 +8,4 @@
 
 #### 更符合 GitHub 风格
 
-## 🎈 Perf
-
 ## 🐞 Fix

.github/release.md

@@ -1,25 +1,36 @@
-## ✨ Feature
+## 🎉 项目已毕业! (这是最后一版开发版本)
+
+目前项目的主要功能开发已全部完成, 进入维护阶段.
+
+维护阶段项目发版频率与 Gitea 发版频率保持一致, 版本号将与 Gitea 保持一致(不再附带时间戳).
+
+每逢 Gitea 大版本更新时, 项目中间如有修复, 会发布当前版本的最后一个 `.latest` 版本. 之后会发布适配第一个大版本的 `.rc`
+预发布版本, 问题不多时会发布正式版本, 正式版本之后的修复会等 Gitea 发布下一个小版本时再发布.
 
 ## 🌈 Style
 
-#### 更符合 GitHub 风格
-
-- 同步仓库代码文件页 README 导航栏样式
-- 同步分页菜单样式
-- 同步登录/注册页面样式
-- 优化热力图和动态样式
-- 优化私有标签样式, 组织页面下的 RSS 订阅按钮样式
-- 同步用户点星仓库列表样式
-
-## 🎈 Perf
-
-- 略微增加仓库代码文件列表的单行高度与 GitHub 一致
 - 优化创建仓库/派生仓库/迁移仓库/创建组织页面的样式与设置页面的样式一致
 - 优化消息右上角小图标样式
+- 优化组织页面下的 RSS 订阅按钮样式
+
+#### 更符合 GitHub 风格
+
+- 同步代码编辑器背景色和字体大小 (修复亮色模式下编辑器背景色问题) #12
+- 同步查看代码文件内容页面/文件树样式 (包括滚动时固定的导航栏, 尽量与 GitHub 一致)
+- 同步分页菜单样式
+- 同步登录/注册页面样式
+- 同步 Issue/PR 列表样式
+- 同步 Issue/PR 详细页面侧边栏样式
+- 同步仓库代码文件页 README 导航栏样式
+- 同步用户点星仓库列表样式
+- 优化私有标签样式
+- 优化热力图和动态样式
+- 优化仪表板仓库/组织列表样式
+- 略微增加仓库代码文件列表的单行高度
 
 ## 🐞 Fix
 
-- 修复 Action 作业步骤页面标题选中时滚动固定的高度问题
-- 修复用户公开活动页动态布局问题
-- 修复顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄
-- 修复手机页面下注册/登录页导航栏注册按钮换行的问题
+- Action 作业步骤页面标题选中时滚动固定的高度
+- 用户公开活动页动态布局
+- 顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄
+- 手机页面下注册/登录页导航栏注册按钮换行

README.md

@@ -9,7 +9,7 @@
 
 ## 版本号说明
 
-主题版本号格式: `Gitea 版本号.时间戳`
+主题版本号与 Gitea 版本号保持一致
 
 Gitea 版本号格式: `1.大版本号.小版本号`
 
@@ -19,6 +19,8 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
 
 仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
 
+> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳`
+
 ## 安装
 
 1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下

TODO.md

@@ -1,6 +0,0 @@
-### 重大
-
-- gitea issue 暗色模式下默认标签颜色匹配使用 github 样式
-- issue/PR 列表样式 github 布局
-- 色盲主题支持
-- 打开文件时的文件导航树样式和滚动高度

src/types/color/github.ts

@@ -177,6 +177,9 @@ export const github = {
          * @repo `repoHeader` 仓库标题的悬停背景颜色
          * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
          * @filelist `repoFiles` README 栏的按钮的悬停背景颜色
+         * @issue `issueSidebar` 操作按钮的悬停背景颜色
+         * @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色
+         * @dashboard `dashboard` 仓库列表项目的悬停背景颜色
          */
         hover: null,
       },

styles/components/dashboard.ts

@@ -1,10 +1,66 @@
-import { css } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 export const dashboard = css`
   .page-content.dashboard {
     // 仓库列表的仓库/组织切换按钮
     .ui.two.item.menu {
-      background-color: unset;
+      box-shadow: ${themeVars.github.shadow.floating.small};
+      border: unset;
+      border-radius: 12px;
+      margin-bottom: 8px;
+      > .item {
+        &:first-child {
+          border-radius: 12px 0 0 12px;
+        }
+        &:last-child {
+          border-radius: 0 12px 12px 0;
+        }
+      }
+    }
+    // 仓库/组织列表标题
+    .ui.top.attached.header {
+      border: 0;
+      font-size: 20px;
+      font-weight: 400;
+      background-color: unset !important;
+      margin-bottom: 0.25rem;
+    }
+    // 仓库/组织列表
+    .ui.attached.segment {
+      background-color: ${themeVars.color.menu};
+      border: unset !important;
+      box-shadow: ${themeVars.github.shadow.floating.small};
+      &.repos-search {
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+      }
+      &.table {
+        &:last-child {
+          border-bottom-left-radius: 12px !important;
+          border-bottom-right-radius: 12px !important;
+        }
+        ul {
+          padding: 8px;
+          li {
+            border-radius: ${otherThemeVars.border.radius};
+            &:not(:last-child) {
+              border-bottom: 0;
+            }
+            &:hover {
+              background: ${themeVars.github.control.transparent.bgColor.hover};
+            }
+            a.muted:hover {
+              color: inherit;
+              text-decoration-line: none;
+            }
+          }
+        }
+      }
+    }
+    // 组织列表
+    .ui.tab.dashboard-orgs .ui.attached.segment.table {
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
     }
   }
 `;

styles/components/editor.ts

@@ -0,0 +1,20 @@
+import { css, themeVars } from "src/types/vars";
+
+export const monaco = css`
+  .monaco-editor {
+    --vscode-editor-background: ${themeVars.color.body} !important;
+    --vscode-editorGutter-background: ${themeVars.color.body} !important;
+    .monaco-mouse-cursor-text {
+      font-size: 12px !important;
+    }
+    // 滚动时固定在顶部的行
+    .sticky-widget {
+      background: ${themeVars.color.body} !important;
+      box-shadow: 0 1px 0 ${themeVars.color.secondary.self} !important;
+      width: 100% !important;
+      .sticky-line-content {
+        font-size: 12px !important;
+      }
+    }
+  }
+`;

styles/components/filelist.ts

@@ -147,12 +147,66 @@ export const repoFilesMobile = css`
 // 仓库打开文件时的视图
 export const repoFileView = css`
   .page-content.repository.file.list {
+    > .ui.container.fluid {
+      max-width: calc(100% - calc(2 * 16px));
+    }
     .repo-view-container {
+      // 左侧文件树
+      .repo-view-file-tree-container {
+        height: 100vh;
+        position: sticky;
+        top: 0;
+        &:after {
+          content: "";
+          position: absolute;
+          top: -14px;
+          right: 0;
+          width: 1px;
+          height: calc(100% + 14px);
+          background: ${themeVars.color.secondary.self};
+        }
+        > .repo-button-row {
+          height: 32px;
+          margin: 16px 0;
+          &:after {
+            content: "";
+            position: absolute;
+            top: 32px + 32px;
+            left: -16px;
+            width: calc(100% + 16px);
+            height: 1px;
+            background: ${themeVars.color.secondary.self};
+          }
+        }
+      }
       // 右侧文件视图内容
       .repo-view-content {
+        .repo-button-row {
+          align-items: center;
+          background: ${themeVars.color.box.header};
+          border: 1px solid ${themeVars.color.secondary.self};
+          border-radius: ${otherThemeVars.border.radius};
+          height: 46px;
+          min-height: 46px;
+          padding: 8px;
+          position: sticky;
+          top: 0;
+          z-index: 1;
+        }
+        .non-diff-file-content {
+          // 避免分支菜单遮挡
+          position: relative;
+          z-index: 0;
+          h4.file-header {
+            position: sticky;
+            top: 46px;
+            z-index: 1;
+          }
+        }
         // 头部提交信息
-        #repo-file-commit-box {
+        .ui.segment#repo-file-commit-box {
           padding: 8px 12px;
+          margin-bottom: 8px !important;
           > .latest-commit {
             gap: 8px;
           }
@@ -167,6 +221,24 @@ export const repoFileView = css`
   }
 `;
 
+// 避免手机/平板下路径容器过长导致换行, 取消固定
+export const repoFileViewMobile = css`
+  @media (max-width: 1023.98px) {
+    .page-content.repository.file.list .repo-view-container .repo-view-content {
+      .repo-button-row {
+        height: auto;
+        position: static;
+        z-index: 0;
+      }
+      .non-diff-file-content {
+        h4.file-header {
+          top: 0;
+        }
+      }
+    }
+  }
+`;
+
 // 仓库代码布局调整, 侧边栏宽度调整
 export const repoGrid = css`
   .repo-grid-filelist-sidebar {

styles/components/heatmap.ts

@@ -74,6 +74,10 @@ export const activity = css`
       }
       > .flex-item-main {
         gap: 8px !important;
+
+        relative-time {
+          color: ${themeVars.color.text.light.num1};
+        }
       }
       // 动态的右侧 svg 图标
       .flex-item-trailing svg {

styles/components/index.ts

@@ -14,3 +14,5 @@ import "./repo";
 import "./setting";
 import "./signin";
 import "./user";
+import "./chroma";
+import "./editor"

styles/components/issue.ts

@@ -1,6 +1,115 @@
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
+// 工单&PR 列表
+export const issueList = css`
+  .page-content.repository.issue-list {
+    // 头部筛选菜单栏
+    .issue-list-toolbar {
+      align-items: center;
+      align-content: center;
+      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;
+      .issue-list-toolbar-left {
+        // 复选框
+        input {
+          margin: 0 8px !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;
+            }
+          }
+        }
+      }
+      .issue-list-toolbar-right > .ui.menu {
+        align-items: center;
+        > .item {
+          color: ${themeVars.color.text.light.num1};
+        }
+        > .ui.button {
+          padding: 0 12px;
+          height: 32px;
+        }
+      }
+    }
+    // Issue 列表
+    .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};
+      > .flex-item {
+        align-items: center;
+        padding: 0;
+        &:last-child {
+          border-bottom-left-radius: ${otherThemeVars.border.radius};
+          border-bottom-right-radius: ${otherThemeVars.border.radius};
+        }
+        &:hover {
+          background-color: ${themeVars.color.hover.opaque};
+        }
+        > .flex-item-icon {
+          display: flex;
+          gap: 4px;
+          margin-left: 8px;
+          // 复选框
+          input {
+            background: unset;
+            margin-top: 14px;
+            margin-left: 8px;
+            margin-right: 8px !important;
+          }
+          svg {
+            margin-top: 14px;
+          }
+        }
+        > .flex-item-main {
+          gap: 4px;
+          .flex-item-header {
+            padding-top: 8px;
+          }
+          .flex-item-body {
+            font-size: 12px;
+            padding-bottom: 8px;
+          }
+        }
+        > .flex-item-trailing {
+          margin-right: 32px;
+        }
+      }
+    }
+  }
+`;
+
+// 避免手机/平板下菜单错位
+export const issueListMobile = css`
+  @media (max-width: 1023.98px) {
+    .page-content.repository.issue-list .issue-list-toolbar {
+      height: auto;
+    }
+  }
+`;
+
 export const button = css`
   .issue-content-left .field.footer {
     // 关闭工单按钮
@@ -18,6 +127,11 @@ export const button = css`
       color: ${themeVars.github.fgColor.success};
     }
   }
+  // 工单&PR标题右侧按钮
+  .repository.view.issue .issue-title-buttons > .ui.button {
+    padding: 0 12px;
+    height: 32px;
+  }
 `;
 
 export const babel = css`
@@ -103,6 +217,7 @@ export const comment = css`
     }
     .comment-header {
       padding: 4px 4px 4px 16px;
+      min-height: 38px;
     }
     .comment-header-right {
       > .item,
@@ -330,3 +445,111 @@ export const timeline = css`
     }
   }
 `;
+
+const sidebarPadding = {
+  padding: "4px 8px",
+};
+
+// 侧边栏
+export const issueSidebar = css`
+  .issue-content {
+    gap: 24px;
+    .issue-content-right {
+      border: 0;
+      font-size: 12px;
+      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,
+      p {
+        ${sidebarPadding};
+      }
+      .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;
+        height: 28px;
+        &:hover {
+          background: ${themeVars.github.control.transparent.bgColor.hover};
+        }
+      }
+      // 选中日期颜色
+      .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};
+          svg {
+            color: ${themeVars.color.red.light};
+          }
+        }
+      }
+    }
+  }
+`;

styles/components/org.ts

@@ -1,7 +1,7 @@
 import { css, themeVars } from "src/types/vars";
 
 export const org = css`
-  .page-content.organization.profile {
+  .page-content.organization {
     #org-info {
       .ui.header {
         // 组织页面的 RSS 订阅按钮

styles/public/index.ts

@@ -5,7 +5,6 @@ import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之
 import "./transition"; // 过渡效果
 import "./text"; // 文本或 SVG 的基本颜色
 import "./button"; // 按钮
-import "./chroma"; // 代码高亮
 import "./dropdown"; // 下拉框
 import "./input"; // 输入框
 import "./label"; // 标签

styles/public/menu.ts

@@ -219,7 +219,6 @@ export const paginationMenu = css`
         &:hover {
           background: unset;
           border-color: ${themeVars.color.secondary.self};
-          transition-duration: 0.1s;
         }
       }
       &.navigation {

styles/public/transition.ts

@@ -2,6 +2,18 @@ import { css } from "src/types/vars";
 
 // 简单的渐变过渡
 export const transition = css`
+  // 差异对比的代码折叠按钮
+  .code-expander-button,
+  // 仓库 README 头部的按钮
+  .file-header-left,
+  .file-header-right,
+  // 仪表板仓库列表
+  .ui.attached.segment.table ul li,
+  // Issue 列表
+  .issue-list-toolbar .item,
+  .flex-list#issue-list > .flex-item,
+  // 分页菜单
+  .ui.borderless.pagination.menu .item,
   // 迁移的元素
   #navbar .item,
   .header-wrapper .ui.tabular.menu .item,
@@ -9,11 +21,6 @@ export const transition = css`
   .job-step-logs,
   .job-brief-item,
   .repo-file-cell,
-  // 差异对比的代码折叠按钮
-  .code-expander-button,
-  // 仓库 README 头部的按钮
-  .file-header-left,
-  .file-header-right,
   .tippy-box .flex-items-block .item,
   .clone-panel-tab .item,
   .ui.form select,