gitea-github-theme/styles/components/actions/actions.ts

/*!
 * Copyright (c) https://github.com/lutinglt
 *
 * See the NOTICE file distributed with this work for additional
 * information regarding copyright ownership.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { css, cssCombine, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core";

// 仓库 Actions 页面
const actions = css`
  /* 避免锚中设置界面里的 Actions */
  .page-content.repository.actions:not(.settings) .flex-container {
    /* Actions 列表 */
    .flex-container-nav {
      .ui.menu {
        &:first-child {
          margin-bottom: 8px;
        }
        &:last-child {
          border-top: 1px solid ${themeVars.color.light.border};
          margin-top: 8px;
          > div:not([class]) {
            font-size: 12px;
            font-weight: 600;
            color: ${themeVars.color.text.light.num1};
            padding: 6px 8px;
            margin-top: 8px;
          }
          > .item {
            font-weight: 400;
          }
        }
      }
    }
    /* 工作流列表 */
    .flex-container-main {
      /* 工作流列表标题栏菜单 */
      .ui.top.attached.header {
        padding: 8px;
        padding-left: 16px;
        &:has(+ .ui.info.attached.message) {
          border-bottom: 0;
        }
        > strong,
        .ui.secondary.menu > .ui.dropdown {
          color: ${themeVars.color.text.light.num1};
        }
      }
      /* 事件触发器 */
      .ui.info.attached.message {
        padding: 16px;
        max-width: calc(100% + 2px); /* Gitea 布局问题, 目的: 对齐边框 */
        /* 事件触发器按钮 */
        .ui.mini.button {
          padding: 3px 12px;
          min-height: 27px;
          font-size: 12px;
        }
      }
      /* 工作流列表 */
      .ui.attached.segment {
        background: unset;
        padding: 0;
        border: 0;
        .run-list {
          background: ${themeVars.color.box.body.self};
          border: 1px solid ${themeVars.color.light.border};
          border-bottom-left-radius: ${otherThemeVars.border.radius};
          border-bottom-right-radius: ${otherThemeVars.border.radius};
          border-top: 0;
          font-size: 12px;

          /* 分支标签按钮 */
          .run-list-ref {
            background-color: ${themeVars.github.bgColor.accent.muted};
            border-color: #0000;
            color: ${themeVars.github.fgColor.accent};
            font-family: var(--fonts-monospace);
            font-weight: 400;
            padding: 0px 6px;
            &:hover {
              background-color: ${themeVars.github.bgColor.accent.muted};
              color: ${themeVars.github.fgColor.accent};
              text-decoration-line: underline !important;
            }
          }
          /* 标签右侧任务信息 */
          .run-list-item-right {
            color: ${themeVars.color.text.light.num1};
          }

          > .item {
            padding: 9px 16px;
            line-height: 1.5;
            &:hover {
              background-color: ${themeVars.color.hover.opaque};
            }
            &:last-child {
              border-bottom-left-radius: ${otherThemeVars.border.radius};
              border-bottom-right-radius: ${otherThemeVars.border.radius};
            }
            .item-leading {
              align-self: flex-start;
              margin-top: 2px;
            }
            .item-main {
              gap: 4px;
            }
            .run-list-item-trailing {
              > .ui.dropdown.jump {
                border-radius: ${otherThemeVars.border.radius};
                color: ${themeVars.color.text.light.num1};
                &:hover {
                  background-color: ${themeVars.github.control.transparent.bgColor.hover};
                }
                .menu > .item {
                  gap: 4px;
                  &:hover {
                    color: ${themeVars.color.text.self} !important;
                  }
                }
              }
            }
          }
        }
      }
      /* 工作流队列 */
      #actions-job-queue {
        .ui.attached.table.segment {
          border-bottom-left-radius: ${otherThemeVars.border.radius};
          border-bottom-right-radius: ${otherThemeVars.border.radius};
          border: 1px solid ${themeVars.color.light.border};
          border-top: 0;
        }
      }
    }
  }
`;

// 工作流禁用标签
const label = css`
  .page-content.repository.actions:not(.settings) .ui.vertical.menu .item > .ui.red.label {
    color: ${themeVars.color.error.text};
    border: 1px solid ${themeVars.color.error.border};
    background: ${themeVars.color.error.bg.self};
  }
`;

// 手动工作流
const runWorkflow = css`
  /* 手动工作流下拉列表 */
  #runWorkflowDispatchForm {
    font-size: 12px;
    /* 描述类标签 */
    .ui.field label {
      font-weight: 600;
    }
    /* use workflow from 描述 */
    .ui.inline.field {
      > :first-child {
        margin-right: 8px;
      }
      > :only-child {
        margin-right: 0;
      }
    }
    /* 分支选择按钮 */
    .ui.dropdown.button.branch-selector-dropdown {
      padding: 3px 21px 3px 12px;
      min-height: 27px;
      gap: 4px;
      font-size: 12px;
      .text {
        line-height: 20px;
      }
    }
    #runWorkflowDispatchModalInputs {
      .ui.field > label {
        margin-bottom: 6px;
      }
      /* 运行工作流按钮 */
      .ui.tiny.button {
        padding: 0px 8px;
        min-height: 27px;
      }
    }
  }
`;

export default cssCombine(actions, label, runWorkflow);