release 迁移

.github/release.md

@@ -29,6 +29,8 @@
 - 选择下拉菜单样式同步
 - 热力图颜色和样式同步
 - Issue/PR 菜单选项样式同步
+- 仓库标签页样式和颜色同步
+- 仓库发布页样式和颜色同步
 
 ## 🎈 Perf
 
@@ -43,6 +45,7 @@
 - 仓库动态活动标签样式统一
 - 合并请求分支样式统一
 - 全局下拉菜单样式统一
+- 弹窗按钮样式优化
 
 ## 🐞 Fix
 

README.md

@@ -11,7 +11,7 @@
 
 ## 安装
 
-1. 在发布页下载最新的 `theme-github.css` 放入 `gitea/public/assets/css` 目录下
+1. 在发布页下载最新的 `theme-github-dark.css` 放入 `gitea/public/assets/css` 目录下
 2. 修改 `gitea/conf/app.ini`，并将 `, github` 附加到 `[ui]` 下的 `THEMES` 末尾
 3. 重启 Gitea
 4. 在设置中查看主题
@@ -20,7 +20,7 @@
 
 ```ini
 [ui]
-THEMES = gitea-dark, github
+THEMES = gitea-dark, github-dark
 ```
 
 详细请查看 Gitea 文档

src/types/color/github.ts

@@ -12,6 +12,7 @@ export const github = {
     default: null,
     /** 暗淡的文本颜色
      * @diff 折叠行的文本颜色
+     * @text 灰色文本颜色
      */
     muted: null,
     /** 成功的文本颜色
@@ -31,6 +32,7 @@ export const github = {
       /** 强调色
        * @diff 折叠/展开按钮的悬停颜色
        * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
+       * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
        */
       emphasis: null,
       /** 暗淡的背景颜色

styles/components/index.tsx

@@ -4,5 +4,6 @@ import "./dashboard";
 import "./diff";
 import "./heatmap";
 import "./issue";
+import "./release";
 import "./repo";
 import "./setting";

styles/components/issue.tsx

@@ -107,16 +107,10 @@ export const dropdown = css`
     &.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu,
     // Issue/PR 详情下的右侧的上半部分选项菜单
     &.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
-      .item {
+      .item:hover:after {
-        &.active,
-        &.selected,
-        &:hover {
-          &:after {
         content: "";
         ${activeItemAfterStyle}
       }
     }
   }
-    }
-  }
 `;

styles/components/release.scss

@@ -1,81 +0,0 @@
-// Made by Luting ^-^
-.page-content.repository.releases {
-  h2 .item {
-    font-weight: 500;
-  }
-
-  #release-list .release-entry {
-    .meta {
-      gap: 2px;
-      padding-top: 24px;
-      padding-right: 40px;
-      text-align: left;
-      min-width: 0;
-      flex: 0.125;
-
-      a.muted {
-        color: #9198a1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        word-break: break-all;
-
-        svg {
-          margin-right: 8px !important;
-        }
-
-        svg.tw-mr-1.svg.octicon-tag {
-          margin-top: 1px;
-        }
-      }
-
-      .js-branch-tag-selector {
-        margin-top: 8px;
-      }
-    }
-
-    .segment.detail {
-      p.text.grey {
-        margin: 16px 0;
-
-        .time {
-          color: #f0f6fc;
-        }
-      }
-
-      .markup {
-        > *:first-child {
-          margin-top: 16px !important;
-        }
-
-        > *:last-child {
-          margin-bottom: 16px !important;
-        }
-      }
-    }
-  }
-
-  .ui.small.primary.button {
-    background-color: var(--color-button);
-
-    &:hover {
-      background-color: #262c36;
-    }
-  }
-}
-
-.page-content.repository.tags {
-  .tag-list-row .download a.muted:hover {
-    text-decoration: none;
-  }
-}
-
-.page-content.repository.tags,
-.page-content.repository.releases {
-  .ui.small.menu {
-    .active.item {
-      color: #fff;
-      background: #1f6feb !important;
-    }
-  }
-}

styles/components/release.tsx

@@ -0,0 +1,101 @@
+import { css, themeVars } from "src/types/vars";
+
+// release 顶部栏左侧按钮组
+export const releaseTagMenu = css`
+  .page-content.repository {
+    &.releases,
+    &.tags {
+      h2.small.menu {
+        .item {
+          background-color: unset !important;
+          font-weight: 500;
+          &.active {
+            background: ${themeVars.github.bgColor.accent.emphasis} !important;
+          }
+        }
+      }
+    }
+  }
+`;
+
+// 标签页样式
+export const tags = css`
+  .page-content.repository.tags {
+    // 标签的选项取消下划线
+    .tag-list-row {
+      .tag-list-row-title {
+        line-height: 1.5;
+      }
+      .download {
+        color: ${themeVars.color.text.light.num1};
+        font-size: 12px;
+        a.muted:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+`;
+
+// 发布页样式
+export const releases = css`
+  .page-content.repository.releases {
+    #release-list .release-entry {
+      // 左侧发布元信息
+      .meta {
+        gap: 0.5rem;
+        padding-top: 24px;
+        padding-right: 40px;
+        text-align: left;
+        min-width: 0;
+        flex: 0.125;
+        a.muted {
+          color: ${themeVars.color.text.light.num1};
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          word-break: break-all;
+          svg {
+            margin-right: 8px !important;
+          }
+          svg.tw-mr-1.svg.octicon-tag {
+            margin-top: 1px;
+          }
+        }
+        .js-branch-tag-selector {
+          margin-top: 8px;
+        }
+      }
+      // 右侧发布详细信息
+      .segment.detail {
+        .svg {
+          color: ${themeVars.color.text.light.num1};
+        }
+        p.text.grey {
+          margin: 16px 0;
+          .time {
+            color: ${themeVars.color.text.self};
+          }
+        }
+        .markup {
+          > *:first-child {
+            margin-top: 16px !important;
+          }
+          > *:last-child {
+            margin-bottom: 16px !important;
+          }
+        }
+      }
+    }
+    // 顶部右侧按钮组
+    .ui.small.button {
+      background-color: ${themeVars.color.button};
+      padding: 5px 16px;
+      min-height: auto;
+      line-height: 20px;
+      &:hover {
+        background-color: ${themeVars.color.hover.self};
+      }
+    }
+  }
+`;

styles/public/index.tsx

@@ -2,6 +2,7 @@
 // tslint:disable:ordered-imports
 // 组件导入有顺序, 禁止插件优化
 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
+import "./text"; // 文本或 SVG 的基本颜色
 import "./button"; // 按钮
 import "./chroma"; // 代码高亮
 import "./dropdown"; // 下拉框
@@ -9,5 +10,4 @@ import "./input"; // 输入框
 import "./label"; // 标签
 import "./menu"; // 菜单
 import "./modal"; // 弹窗
-import "./svg"; // svg 图标
 import "./tippy"; // 提示框

styles/public/modal.tsx

@@ -20,5 +20,8 @@ export const modal = css`
       background-color: ${themeVars.color.menu};
       border-top: 1.5px solid ${themeVars.color.light.border};
     }
+    .actions > .ui.button {
+      padding: 8px 12px;
+    }
   }
 `;

styles/public/svg.tsx

@@ -1,11 +0,0 @@
-import { css, themeVars } from "src/types/vars";
-
-// 关闭工单按钮设置为紫色
-export const issueClosed = css`
-  .text.red .svg,
-  .text.red.svg {
-    &.octicon-issue-closed {
-      color: ${themeVars.github.fgColor.done} !important;
-    }
-  }
-`;

styles/public/text.tsx

@@ -0,0 +1,19 @@
+import { css, themeVars } from "src/types/vars";
+
+export const red = css`
+  .text.red .svg,
+  .text.red.svg {
+    // 关闭工单按钮设置为紫色
+    &.octicon-issue-closed {
+      color: ${themeVars.github.fgColor.done} !important;
+    }
+  }
+`;
+
+export const grey = css`
+  // 默认颜色是 --color-text-light, 主题下此颜色是亮白色, 修改为灰色
+  // release 页面下一些描述信息的文本颜色
+  .text.grey {
+    color: ${themeVars.github.fgColor.muted} !important;
+  }
+`;