Optimize the workflow log page style

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ##### More aligned with GitHub style
 
+- Optimize the workflow log page style
+
 ### 🐞 Fix
 
 - Fix the problem of missing background color and width when there is a unicode character in the diff
+- Fix the disabled operation button interval in the code preview interface
+- Fix fixed height when scrolling through step titles on workflow detail pages

styles/components/actions.ts

@@ -156,7 +156,6 @@ export const actionViewLeft = css`
   .action-view-left {
     margin-right: 28px;
     border-top: 1px solid ${themeVars.color.console.border};
-
     &:before {
       content: "Jobs";
       color: ${themeVars.color.console.fg.subtle};
@@ -168,52 +167,53 @@ export const actionViewLeft = css`
       top: -8px;
       left: 15px;
     }
-
     .job-group-section {
       padding-right: 8px;
       padding-bottom: 8px;
       border-bottom: 1px solid ${themeVars.color.console.border};
-
-      .job-brief-item {
-        border-radius: ${otherThemeVars.border.radius} !important;
-        padding: 8px;
-        position: relative;
-        margin-left: 0.5rem;
-
-        &.selected {
+      .job-brief-list {
+        gap: 4px;
+        // 双重确保覆盖原始样式
+        .job-brief-item.job-brief-item {
+          border-radius: ${otherThemeVars.border.radius} !important;
+          padding: 8px;
+          position: relative;
+          margin-left: 0.5rem;
           &:hover {
             background-color: ${themeVars.color.console.hoverBg};
           }
-
-          &:after {
-            overflow: visible;
-            background: ${themeVars.github.borderColor.accent.emphasis};
-            border-radius: ${otherThemeVars.border.radius};
-            content: "";
-            height: 24px;
-            left: calc(0.5rem * -1);
-            position: absolute;
-            top: calc(50% - 12px);
-            width: 4px;
-          }
-        }
-        .job-brief-item-right {
-          svg.job-brief-rerun {
-            display: none;
-            color: ${themeVars.color.console.fg.subtle};
-            &:hover {
-              color: ${themeVars.color.text.self};
+          &.selected {
+            &:after {
+              overflow: visible;
+              background: ${themeVars.github.borderColor.accent.emphasis};
+              border-radius: ${otherThemeVars.border.radius};
+              content: "";
+              height: 24px;
+              left: calc(0.5rem * -1);
+              position: absolute;
+              top: calc(50% - 12px);
+              width: 4px;
             }
           }
-          .step-summary-duration {
-            color: ${themeVars.color.console.fg.subtle};
-            font-family: var(--fonts-monospace);
-          }
-        }
-        &:hover {
           .job-brief-item-right {
             svg.job-brief-rerun {
-              display: inline-block;
+              display: none;
+              color: ${themeVars.color.console.fg.subtle};
+              &:hover {
+                color: ${themeVars.color.text.self};
+              }
+            }
+            .step-summary-duration {
+              color: ${themeVars.color.console.fg.subtle};
+              font-family: var(--fonts-monospace);
+              font-size: 12px;
+            }
+          }
+          &:hover {
+            .job-brief-item-right {
+              svg.job-brief-rerun {
+                display: inline-block;
+              }
             }
           }
         }
@@ -253,52 +253,57 @@ export const actionViewRight = css`
     }
 
     .job-step-container {
-      // 步骤标题
-      .job-step-summary {
-        color: ${themeVars.color.console.fg.subtle};
-        padding: 8px 10px !important;
-
-        &.selected {
-          // 滚动时固定在顶部的高度与 job-info-header 高度相同
-          top: 80px;
-        }
-
-        &.step-expandable:hover {
+      padding: 8px;
+      .job-step-section {
+        margin: 0 4px 4px;
+        // 步骤标题, 双重确保覆盖原始样式
+        .job-step-summary.job-step-summary {
           color: ${themeVars.color.console.fg.subtle};
-        }
+          padding: 8px !important;
+          height: 36px;
 
-        .tw-mr-2:not(.svg) svg.svg {
-          margin: 1.5px 6px 0px 2px;
-        }
-        /* 绿色步骤状态改为白色 */
-        svg.svg.text.green {
-          color: ${themeVars.color.console.fg.subtle} !important;
-        }
+          &.selected {
+            // 滚动时固定在顶部的高度与 job-info-header 高度相同
+            top: 80px;
+          }
 
-        &.selected {
-          /* 不被 hover 效果影响 */
-          color: ${themeVars.color.console.fg.self} !important;
-          background-color: ${themeVars.color.console.activeBg} !important;
+          &.step-expandable:hover {
+            color: ${themeVars.color.console.fg.subtle};
+          }
 
+          .tw-mr-2:not(.svg) svg.svg {
+            margin: 1.5px 6px 0px 2px;
+          }
+          /* 绿色步骤状态改为白色 */
           svg.svg.text.green {
+            color: ${themeVars.color.console.fg.subtle} !important;
+          }
+
+          &.selected {
+            /* 不被 hover 效果影响 */
             color: ${themeVars.color.console.fg.self} !important;
+            background-color: ${themeVars.color.console.activeBg} !important;
+
+            svg.svg.text.green {
+              color: ${themeVars.color.console.fg.self} !important;
+            }
+          }
+          // 步骤耗时
+          .step-summary-duration {
+            font-size: 12px;
+            font-family: var(--fonts-monospace);
           }
         }
-        // 步骤耗时
-        .step-summary-duration {
-          font-size: 12px;
-          font-family: var(--fonts-monospace);
-        }
-      }
-      // 步骤日志
-      .job-step-logs {
-        animation: ${animationDown};
-        /* 日志字体颜色白色 */
-        .job-log-line {
-          color: ${themeVars.color.console.fg.self};
-          /* 被 hover 时覆盖 ANSI 颜色 */
-          .log-msg:hover * {
-            color: ${themeVars.color.console.fg.self} !important;
+        // 步骤日志
+        .job-step-logs {
+          animation: ${animationDown};
+          /* 日志字体颜色白色 */
+          .job-log-line {
+            color: ${themeVars.color.console.fg.self};
+            /* 被 hover 时覆盖 ANSI 颜色 */
+            .log-msg:hover * {
+              color: ${themeVars.color.console.fg.self} !important;
+            }
           }
         }
       }

styles/components/filelist.ts

@@ -316,6 +316,10 @@ export const repoFileView = css`
                 &:last-of-type {
                   border-top-right-radius: ${otherThemeVars.border.radius};
                   border-bottom-right-radius: ${otherThemeVars.border.radius};
+                  // 与无权限按钮之间的间距
+                  + .btn-octicon.disabled {
+                    margin-left: 8px;
+                  }
                 }
                 &:hover {
                   background: ${themeVars.color.hover.self};