gitea-banana-theme/styles/public/label.ts

import { css, themeVars } from "src/types/vars";

export const label = css`
  /* 所有标签, 但不包括 a 标签 */
  /* a 标签比如仓库点星等按钮旁边的数字标签按钮,提交图中的 tag 标签 */
  div,
  span {
    &.ui.ui.ui {
      &.label {
        border-radius: 25px;
        padding: 5px 12px; // 增加内边距
        font-weight: 500; // 增加字体粗细
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        // 多个标签的组合标签的圆角修复
        &.scope-parent {
          .scope-left {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
          .scope-middle {
            border-radius: 0;
          }
          .scope-right {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }
        /* 主色调标签 */
        &.primary {
          background-color: unset;
          border: 1px solid ${themeVars.color.primary.self};
          color: ${themeVars.color.primary.self};
          &:hover {
            background-color: ${themeVars.color.primary.dark.num1}; // 悬停时添加背景色
            position: relative;
            top: -1px;
          }
        }
        /* 红色标签 */
        &.red {
          background-color: unset;
          border: 1px solid ${themeVars.github.borderColor.done.emphasis};
          color: ${themeVars.color.purple.self};
          &:hover {
            background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色
            position: relative;
            top: -1px;
          }
        }
        /* 橙色标签 */
        &.orange {
          background-color: unset;
          border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
          color: ${themeVars.color.yellow.self};
          &:hover {
            background-color: ${themeVars.color.yellow.dark.num1}; // 悬停时添加背景色
            position: relative;
            top: -1px;
          }
        }
        /* 黄色标签 */
        &.yellow {
          background-color: unset;
          border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
          color: ${themeVars.color.orange.self};
          &:hover {
            background-color: ${themeVars.color.orange.dark.num1}; // 悬停时添加背景色
            position: relative;
            top: -1px;
          }
        }
        /* 黄绿色标签 */
        &.olive {
          background-color: unset;
          border: 1px solid ${themeVars.color.olive.self};
          color: ${themeVars.color.olive.self};
          &:hover {
            background-color: ${themeVars.color.olive.dark.num1}; // 悬停时添加背景色
            position: relative;
            top: -1px;
          }
        }
        /* 绿色标签 */
        &.green {
          background-color: unset;
          border: 1px solid ${themeVars.github.borderColor.success.emphasis};
          color: ${themeVars.color.green.self};
          &:hover {
            background-color: ${themeVars.color.green.dark.num1}; // 悬停时添加背景色
            position: relative;
            top: -1px;
          }
        }
        /* 紫色标签 */
        &.purple {
          background-color: unset;
          border: 1px solid ${themeVars.github.borderColor.done.emphasis};
          color: ${themeVars.color.purple.self};
          &:hover {
            background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色
            position: relative;
            top: -1px;
          }
        }
        // 添加悬停效果
        &:hover:not(.primary):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.purple) {
          background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色
          position: relative;
          top: -1px;
        }
      }
    }
  }
  .ui.small.label {
    font-size: 12px;
  }
  .ui.mini.label {
    font-size: 10px;
  }
`;

// 提交中的 SHA 标签
export const shaLabel = css`
  a.ui.label.sha,
  a.ui.label.commit-id-short {
    border: unset;
    background-color: unset;
    color: ${themeVars.color.text.light.num1};
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px; // 增加内边距
    // 仪表盘页的提交 SHA 标签居中对齐
    margin-top: 2px;
    border-radius: 25px; // 增加圆角
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
    &:hover {
      background-color: ${themeVars.color.label.hoverBg};
      position: relative;
      top: -1px;
    }
    // 验证提交 SHA 标签
    &.commit-is-signed {
      border: unset !important;
      background-color: unset !important;
      &:hover {
        background-color: ${themeVars.color.label.hoverBg} !important;
        position: relative;
        top: -1px;
      }
      span.ui.label.commit-is-signed {
        padding: 3px 5px;
        margin-left: 5px;
        border-radius: 25px; // 增加圆角
      }
    }
  }

  // 验证提交附带的图标
  span.ui.label.commit-is-signed {
    border-radius: 25px; // 增加圆角
    // 验证信任
    &.sign-trusted {
      border: 1.5px solid ${themeVars.color.green.badge.self} !important;
      color: ${themeVars.color.green.badge.self} !important;
      &:hover {
        background-color: ${themeVars.color.green.badge.bg} !important;
        position: relative;
        top: -1px;
      }
    }
    // 验证未信任
    &.sign-untrusted {
      border: 1.5px solid ${themeVars.color.yellow.badge.self} !important;
      color: ${themeVars.color.yellow.badge.self} !important;
      &:hover {
        background-color: ${themeVars.color.yellow.badge.bg} !important;
        position: relative;
        top: -1px;
      }
    }
    // 验证未匹配
    &.sign-unmatched {
      border: 1.5px solid ${themeVars.color.orange.badge.self} !important;
      color: ${themeVars.color.orange.badge.self} !important;
      &:hover {
        background-color: ${themeVars.color.orange.badge.bg} !important;
        position: relative;
        top: -1px;
      }
    }
    // 验证警告
    &.sign-warning {
      border: 1.5px solid ${themeVars.color.red.badge.self} !important;
      color: ${themeVars.color.red.badge.self} !important;
      &:hover {
        background-color: ${themeVars.color.red.badge.bg} !important;
        position: relative;
        top: -1px;
      }
    }
  }
`;

// 任务状态标签, 目前仅在管理员页面 Runner 状态中看到
export const taskStatusLabel = css`
  .runner-container .ui.label.task-status- {
    &success {
      color: ${themeVars.color.success.text};
      border: 1px solid ${themeVars.color.success.border};
      background: ${themeVars.color.success.bg};
      border-radius: 25px; // 增加圆角
      padding: 5px 12px; // 增加内边距
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:hover {
        background: ${themeVars.color.success.bg}; // 悬停时改变背景色
        position: relative;
        top: -1px;
      }
    }

    &failure {
      color: ${themeVars.color.error.text};
      border: 1px solid ${themeVars.color.error.border};
      background: ${themeVars.color.error.bg.self};
      border-radius: 25px; // 增加圆角
      padding: 5px 12px; // 增加内边距
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:hover {
        background: ${themeVars.color.error.bg.self}; // 悬停时改变背景色
        position: relative;
        top: -1px;
      }
    }

    &running,
    &skipped {
      color: ${themeVars.color.info.text};
      border: 1px solid ${themeVars.color.info.border};
      background: ${themeVars.color.info.bg};
      border-radius: 25px; // 增加圆角
      padding: 5px 12px; // 增加内边距
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:hover {
        background: ${themeVars.color.info.bg}; // 悬停时改变背景色
        position: relative;
        top: -1px;
      }
    }

    &cancelled,
    &blocked {
      color: ${themeVars.color.warning.text};
      border: 1px solid ${themeVars.color.warning.border};
      background: ${themeVars.color.warning.bg};
      border-radius: 25px; // 增加圆角
      padding: 5px 12px; // 增加内边距
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:hover {
        background: ${themeVars.color.warning.bg}; // 悬停时改变背景色
        position: relative;
        top: -1px;
      }
    }
  }
`;

// 仓库标签 (私有/公开/内部)
export const repoLabel = css`
  span,
  // 用户切换面板的标签
  .org-visibility div {
    &.ui.basic.label {
      background-color: unset;
      color: ${themeVars.color.text.light.num1};
      font-size: 12px;
      font-weight: 500;
      padding: 4px 8px; // 增加内边距
      border-radius: 25px; // 增加圆角
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:hover {
        background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色
        position: relative;
        top: -1px;
      }
    }
  }
  .org-visibility span.ui.basic.label {
    font-size: 14px;
  }
`;