重构基本框架

styles/components/actions.scss

@@ -0,0 +1,234 @@
+// Made by Luting ^-^
+
+.page-content.repository.actions .ui.grid {
+  .four.wide {
+    border-right: 1px solid var(--color-light-border);
+    min-height: calc(-104px + 100vh);
+
+    &:before {
+      content: "Actions";
+      display: block;
+      font-size: 20px;
+      font-weight: 600;
+      margin-top: 6px;
+      margin-bottom: 24px;
+    }
+  }
+
+  .twelve.wide {
+    &:before {
+      content: "Workflow Runs";
+      display: block;
+      font-size: 20px;
+      margin-top: 6px;
+      margin-bottom: 24px;
+      margin-left: 2px;
+    }
+
+    .ui.secondary.menu {
+      background-color: var(--color-box-header);
+      border: 1px solid var(--color-light-border);
+      border-bottom: 0;
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+      padding: 16px;
+      margin-bottom: 0;
+
+      .item {
+        padding: 6px 12px;
+      }
+    }
+
+    .ui.info.message {
+      border-radius: 0;
+      border-left-color: var(--color-light-border);
+      border-right-color: var(--color-light-border);
+      margin: 0;
+
+      ~ .run-list {
+        border-top: 0;
+      }
+    }
+
+    .run-list {
+      border: 1px solid var(--color-light-border);
+      border-bottom-left-radius: var(--border-radius);
+      border-bottom-right-radius: var(--border-radius);
+
+      .flex-item {
+        padding: 16px;
+
+        .flex-item-leading {
+          align-self: flex-start;
+          margin-top: 2px;
+        }
+
+        .flex-item-main {
+          gap: 0.5rem;
+        }
+
+        .flex-item-trailing {
+          justify-content: space-between;
+
+          > .ui.label {
+            border-radius: var(--border-radius);
+            margin-left: 32px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 767.98px) {
+  .page-content.repository.actions .ui.grid .four.wide {
+    min-height: auto;
+  }
+}
+
+// 工作流禁用标签
+.ui.vertical.menu .item > .ui.red.label {
+  color: var(--color-error-text);
+  border: 1px solid var(--color-error-border);
+  background: var(--color-error-bg);
+  margin-top: 0.5px;
+}
+
+// 手动工作流下拉列表
+#runWorkflowDispatchForm {
+  // 分支选择按钮
+  .ui.dropdown.button.branch-selector-dropdown .svg.octicon-git-branch {
+    margin-right: 6px;
+  }
+}
+
+// 日志
+.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: 16.5%;
+}
+
+.action-view-right.action-view-right {
+  width: 83.5%;
+}
+
+@media (max-width: 767.98px) {
+  .action-view-left.action-view-left,
+  .action-view-right.action-view-right {
+    width: 100%;
+  }
+}
+
+.action-view-left {
+  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 {
+        background-color: #161a21;
+
+        &:hover {
+          background-color: var(--color-hover);
+        }
+
+        &:after {
+          overflow: visible;
+          background: #1f6feb;
+          border-radius: 0.375rem;
+          content: "";
+          height: 24px;
+          left: calc(0.5rem * -1);
+          position: absolute;
+          top: calc(50% - 12px);
+          width: 4px;
+        }
+      }
+    }
+  }
+}
+
+.action-view-right {
+  margin-top: 16px;
+  min-height: calc(100vh - 245px);
+
+  .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: 1.5px 6px 0px 2px;
+      }
+
+      svg.svg.text.green {
+        color: #9198a1 !important;
+      }
+
+      &.selected {
+        color: var(--color-console-fg) !important;
+        background-color: var(--color-console-active-bg) !important;
+
+        svg.svg.text.green {
+          color: #f0f6fc !important;
+        }
+      }
+    }
+
+    .job-log-line {
+      color: #f0f6fc;
+
+      .log-msg:hover * {
+        color: #f0f6fc !important;
+      }
+    }
+  }
+}