// 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 {
    padding: 8px 24px 8px 8px;

    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;
      }
    }
  }
}