Actions 工作流日志页面样式同步

.github/release.md

@@ -2,18 +2,8 @@
 
 #### 更符合 GitHub 风格
 
-- 微调侧边栏元素的间隔
+- 微调菜单项按钮样式
-- 版本发布整体调整
+- Actions 工作流日志页面与浏览器同宽
-- 仓库分支下拉菜单优化
+- Actions 工作流日志页面样式同步
-- 调整工作流步骤状态图标颜色和间隔
+- Actions 日志字体同步
-- 工作流禁用标签颜色和位置优化
+- 全局激活颜色和悬停颜色优化
-- 版本发布页长标签不再使用动态宽度显示全部内容, 使用固定宽度, 过长内容使用省略号替代
-
-## 🎈 Perf
-
-- 手动工作流分支按钮优化 `布局类似代码页的分支按钮`
-- 下拉菜单按钮优化 `观感更居中`
-
-## 🐞 Fix
-
-- 修复工作流选中作业鼠标停留时缺失的效果

README.md

@@ -2,16 +2,13 @@
 
 尽量保持与 GitHub Dark 相同样式的 Gitea 主题
 
-主题说明:
 
-添加了短暂的过渡动画优化体验(与 Github clone 下拉列表动画一致)
+### 主题说明
+
+添加了短暂的过渡动画优化体验(与 GitHub Code 克隆列表动画一致)
 
 UI 默认字体 [Maple Hand](https://github.com/subframe7536/maple-font/tree/other-resources/cn-resource/maple-hand) & [VictorMono Nerd Font](https://github.com/ryanoasis/nerd-fonts/releases/download/v3.3.0/VictorMono.zip) (优先匹配 `Maple Hand`, 需要系统包含相应字体, 否则使用默认字体)
 
-Actions 日志默认字体 `VictorMono Nerd Font` 优先
-
-> Victor Mono 相比其他等宽字体更为紧凑, 可以减少换行
-
 ## 安装
 
 1. 在发布页下载最新的 `theme-github.css` 放入 `gitea/public/assets/css` 目录下

package.json

@@ -6,6 +6,7 @@
     "build": "sass src/theme-github.scss:dist/theme-github.css --no-source-map",
     "build:theme": "npm run build -- --style=compressed",
     "build:theme-fonts": "sass src/theme-github-fonts.scss:dist/theme-github.css --no-source-map --style=compressed",
+    "build:theme-my": "sass src/theme-github-my.scss:dist/theme-github.css --no-source-map --style=compressed",
     "watch": "npm run build -- --watch"
   },
   "repository": {

src/actions.scss

@@ -19,10 +19,65 @@
   }
 }
 
+.ui.container.action-view-container {
+  width: auto;
+  max-width: 100%;
+  padding: 0 24px 0 16px;
+
+  .action-view-header {
+    margin-top: 20px;
+
+    .action-info-summary {
+      margin-left: 14px;
+    }
+
+    .action-commit-summary {
+      margin-left: 28+14px;
+    }
+  }
+}
+
+.action-view-left.action-view-left {
+  width: 15.25%;
+}
+
+.action-view-right.action-view-right {
+  width: 84.75%
+}
+
+@media (max-width: 767.98px) {
+  .action-view-left.action-view-left,
+  .action-view-right.action-view-right {
+    width: 100%;
+  }
+}
+
 .action-view-left {
-  .job-brief-item {
+  margin-top: 16px;
+  margin-right: 28px;
+  border-top: 1px solid #2f353d;
+
+  &:before {
+    content: 'Jobs';
+    color: #9198a1;
+    font-size: 12px;
+    font-weight: 600;
     position: relative;
+    display: inline-block;
+    margin-top: 22px;
+    top: -8px;
+    left: 15px;
+  }
+
+  .job-group-section {
+    padding-right: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #2f353d;
+
+    .job-brief-item {
       border-radius: 0.5rem !important;
+      padding: 8px;
+      position: relative;
       margin-left: 0.5rem;
 
       &.selected {
@@ -37,23 +92,37 @@
           background: #1f6feb;
           border-radius: 0.375rem;
           content: '';
-        height: 1.8rem;
+          height: 24px;
-        left: -0.5rem;
+          left: calc(0.5rem * -1);
           position: absolute;
-        top: calc(50% - 13px);
+          top: calc(50% - 12px);
-        width: 0.25rem;
+          width: 4px;
+        }
       }
     }
   }
 }
 
 .action-view-right {
+  margin-top: 16px;
+  min-height: calc(100vh - 275px);
+
+  .job-info-header {
+    padding: 16px 12px 16px 24px;
+    height: auto;
+  }
+
   .job-step-container {
     .job-step-summary {
       color: var(--color-console-fg-subtle);
+      padding: 8px 10px;
+
+      &.step-expandable:hover {
+        color: var(--color-console-fg-subtle);
+      }
 
       .tw-mr-2:not(.svg) svg.svg {
-        margin: 2px 6px 0px 2px;
+        margin: 1.5px 6px 0px 2px;
       }
 
       svg.svg.text.green {
@@ -61,6 +130,9 @@
       }
 
       &.selected {
+        color: var(--color-console-fg) !important;
+        background-color: var(--color-console-active-bg) !important;
+
         svg.svg.text.green {
           color: #f0f6fc !important;
         }
@@ -68,10 +140,10 @@
     }
 
     .job-log-line {
-      color: var(--color-text);
+      color: #f0f6fc;
 
-      &:hover {
+      .log-msg:hover * {
-        color: #fff;
+        color: #f0f6fc !important;
       }
     }
   }

src/root.scss

@@ -4,8 +4,7 @@
 }
 
 .job-step-logs {
-  font-family: 'VictorMono NF', 'VictorMono Nerd Font', 'Maple Hand' !important;
+  font-family: 'ui-monospace', 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'monospace', 'Maple Hand' !important;
-  font-weight: 500;
 }
 
 .repository {
@@ -145,8 +144,8 @@
   --color-console-fg-subtle: #9198a1;
   --color-console-bg: #010409;
   --color-console-border: #2b3139;
-  --color-console-active-bg: var(--color-active);
+  --color-console-active-bg: #2a313c;
-  --color-console-hover-bg: var(--color-hover);
+  --color-console-hover-bg: #15191f;
   --color-console-menu-bg: var(--color-body);
   --color-console-menu-border: var(--color-light-border);
   --color-grey: #505665;
@@ -211,8 +210,8 @@
   --color-light: #00000028;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #3d444d;
-  --color-hover: #252c34;
+  --color-hover: #1e242a;
-  --color-active: #2a313c;
+  --color-active: #161a21;
   --color-menu: #0d1117;
   --color-card: #0d1117;
   --color-markup-table-row: #ffffff06;

src/setting.scss

@@ -5,11 +5,11 @@
   background: #1f6feb;
   border-radius: 0.375rem;
   content: '';
-  height: 1.8rem;
+  height: 24px;
   left: calc(0.5rem * -1);
   position: absolute;
-  top: calc(50% - 13px);
+  top: calc(50% - 12px);
-  width: 0.25rem;
+  width: 4px;
 }
 
 .ui.vertical.menu {
@@ -33,7 +33,7 @@
     font-size: 1.1rem;
     font-weight: 500;
     background: unset;
-    padding: 8px;
+    padding: 6px 8px;
     color: var(--color-white) !important;
   }
 

src/theme-github-my.scss

@@ -0,0 +1,12 @@
+/* Made by Luting ^-^ */
+// 独家秘制小主题
+@use 'theme-github';
+
+.repository {
+  #commits-table .text.right,
+  #repo-files-table .repo-file-cell.age,
+  #repo-files-table relative-time {
+    font-family: 'Maple Mono NF', 'Maple Hand';
+    font-weight: normal !important;
+  }
+}