gitea-banana-theme/styles/components/issue.ts

import { css, themeVars } from "src/types/vars";
import { activeItemAfterStyle } from "styles/public/menu";

// 工单&PR 列表
export const issueList = css`
  // 仓库页面的里程碑列表菜单栏
  .page-content.repository.milestones,
  .page-content.repository.milestone-issue-list,
  .page-content.repository.issue-list {
    // 头部筛选菜单栏
    .issue-list-toolbar {
      align-items: center;
      align-content: center;
      background-color: ${themeVars.color.box.header};
      border: 1px solid ${themeVars.color.light.border};
      border-bottom: 0;
      border-top-left-radius: 12px; // 增加圆角
      border-top-right-radius: 12px; // 增加圆角
      height: 56px; // 增加高度
      padding: 12px 16px; // 增加内边距
      margin-top: 16px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
      .issue-list-toolbar-left {
        // 复选框
        input {
          margin: 0 8px !important;
        }
        > .ui.compact.menu {
          align-items: center;
          border: 0;
          > .item {
            background: unset !important;
            border-radius: 8px; // 增加圆角
            color: ${themeVars.color.text.light.num1};
            padding: 0px 16px; // 增加内边距
            height: 36px; // 增加高度
            font-weight: 500; // 增加字体粗细
            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
            &:before {
              display: none;
            }
            &:hover {
              background: ${themeVars.github.control.transparent.bgColor.hover} !important;
              transform: translateY(-1px); // 轻微上移效果
            }
            &.active {
              color: ${themeVars.color.text.self};
              font-weight: 700;
              background: ${themeVars.color.active} !important; // 添加背景色
            }
          }
        }
      }
      .issue-list-toolbar-right > .ui.menu {
        align-items: center;
        > .item {
          color: ${themeVars.color.text.light.num1};
        }
        > .ui.button {
          padding: 0 16px; // 增加内边距
          height: 36px; // 增加高度
          border-radius: 8px; // 增加圆角
          font-weight: 500; // 增加字体粗细
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
          &:hover {
            transform: translateY(-1px); // 轻微上移效果
          }
        }
      }
    }
  }
  // 里程碑详细页面的 Issue 列表
  .page-content.repository.milestone-issue-list,
  // 顶部仪表板的 Issue 列表
  .page-content.dashboard.issues,
  // 用户订阅的 Issue 列表
  .page-content.user.notification,
  // 仓库 Issue 列表
  .page-content.repository.issue-list {
    .flex-list#issue-list {
      border: 1px solid ${themeVars.color.light.border};
      border-bottom-left-radius: 12px; // 增加圆角
      border-bottom-right-radius: 12px; // 增加圆角
      > .flex-item {
        align-items: center;
        padding: 0;
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        &:last-child {
          border-bottom-left-radius: 12px; // 增加圆角
          border-bottom-right-radius: 12px; // 增加圆角
        }
        &:hover {
          background-color: ${themeVars.color.hover.opaque};
          transform: translateX(2px); // 轻微右移效果
        }
        > .flex-item-icon {
          display: flex;
          gap: 4px;
          margin-left: 16px;
          // 复选框
          input {
            background: unset;
            margin-top: 14px;
            margin-right: 8px !important;
          }
          svg {
            margin-top: 14px;
          }
        }
        > .flex-item-main {
          gap: 4px;
          .flex-item-header {
            padding-top: 12px; // 增加内边距
          }
          .flex-item-body {
            font-size: 12px;
            padding-bottom: 12px; // 增加内边距
          }
        }
        > .flex-item-trailing {
          margin-right: 32px;
        }
      }
    }
  }
  // 里程碑列表
  // [TODO] 暂时排除项目的列表
  .page-content.repository.milestones:not(.projects) .milestone-list {
    border: 1px solid ${themeVars.color.light.border};
    border-bottom-left-radius: 12px; // 增加圆角
    border-bottom-right-radius: 12px; // 增加圆角
    .milestone-card {
      padding: 16px 20px; // 增加内边距
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:hover {
        background-color: ${themeVars.color.hover.opaque};
        transform: translateY(-1px); // 轻微上移效果
      }
      .milestone-header {
        h3 {
          font-size: 18px; // 增加字体大小
          font-weight: 600; // 增加字体粗细
        }
        div span {
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
    .milestone-toolbar {
      font-size: 12px;
      .group > a {
        font-size: 13px;
      }
    }
  }
`;

// 避免手机/平板下菜单错位
export const issueListMobile = css`
  @media (max-width: 1023.98px) {
    .page-content.repository.milestones,
    .page-content.repository.milestone-issue-list,
    .page-content.repository.issue-list {
      .issue-list-toolbar {
        height: auto;
        padding: 12px; // 调整内边距
      }
    }
  }
  
  // 移动端优化
  @media (max-width: 767.98px) {
    .issue-list-toolbar-left > .ui.compact.menu > .item,
    .issue-list-toolbar-right > .ui.menu > .item {
      padding: 0px 12px; // 调整内边距
      height: 32px; // 调整高度
    }
    
    .issue-list-toolbar-right > .ui.menu > .ui.button {
      padding: 0 12px; // 调整内边距
      height: 32px; // 调整高度
    }
  }
`;

// 置顶 Issue
export const issuePins = css`
  #issue-pins {
    gap: 16px; // 增加间距
    margin-bottom: 20px; // 增加底部间距
    .issue-card {
      padding: 20px 16px; // 增加内边距
      border-radius: 12px; // 增加圆角
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:hover {
        transform: translateY(-2px); // 轻微上移效果
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 增强阴影
      }
      .content {
        .issue-card-title {
          font-size: 18px; // 增加字体大小
          font-weight: 600;
        }
        svg {
          color: ${themeVars.color.text.light.num1};
          height: 100%;
          margin-right: 4px; // 增加右边距
        }
        .meta {
          font-size: 12px;
          padding-top: 6px; // 增加内边距
        }
      }
      .issue-card-bottom {
        display: none;
      }
    }
  }
`;

export const button = css`
  .issue-content-left .field.footer {
    // 关闭工单按钮
    .ui.red.basic.button#status-button {
      color: ${themeVars.github.fgColor.done};
      background-color: ${themeVars.color.button};
      border-color: ${themeVars.color.light.border};
      border-radius: 8px; // 增加圆角
      padding: 8px 16px; // 增加内边距
      font-weight: 500; // 增加字体粗细
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:hover {
        background-color: ${themeVars.color.hover.self};
        transform: translateY(-1px); // 轻微上移效果
      }
      &:active {
        animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
      }
    }

    // 重新开启按钮
    .ui.basic.primary.button#status-button {
      color: ${themeVars.github.fgColor.success};
      border-radius: 8px; // 增加圆角
      padding: 8px 16px; // 增加内边距
      font-weight: 500; // 增加字体粗细
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:hover {
        transform: translateY(-1px); // 轻微上移效果
      }
      &:active {
        animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
      }
    }
  }
  // 工单&PR标题右侧按钮
  .repository.view.issue .issue-title-buttons > .ui.button {
    padding: 0 16px; // 增加内边距
    height: 36px; // 增加高度
    border-radius: 8px; // 增加圆角
    font-weight: 500; // 增加字体粗细
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
    &:hover {
      transform: translateY(-1px); // 轻微上移效果
    }
    &:active {
      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
    }
  }
`;

export const babel = css`
  .issue-content-left {
    .badge {
      // 时间线打开状态标签
      &.tw-bg-green {
        background-color: ${themeVars.github.bgColor.success.emphasis} !important;
        border-radius: 25px; // 增加圆角
      }
      // 时间线关闭状态标签
      &.tw-bg-red {
        background-color: ${themeVars.github.bgColor.done.emphasis} !important;
        border-radius: 25px; // 增加圆角
      }
      // 时间线合并状态标签
      &.tw-bg-purple {
        background-color: ${themeVars.github.bgColor.done.emphasis} !important;
        border-radius: 25px; // 增加圆角
      }
    }
  }
  // 工单&PR状态标签
  .ui.label.issue-state-label {
    border-radius: 25px !important;
    padding: 6px 12px; // 增加内边距
    font-weight: 500; // 增加字体粗细
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果

    &.green {
      color: ${themeVars.color.white} !important;
      background-color: ${themeVars.github.bgColor.success.emphasis} !important;
      border-color: ${themeVars.github.bgColor.success.emphasis} !important;
      &:hover {
        opacity: 0.9; // 悬停时降低不透明度
        transform: translateY(-1px); // 轻微上移效果
      }
    }

    &.red {
      color: ${themeVars.color.white} !important;
      background-color: ${themeVars.github.bgColor.done.emphasis} !important;
      border-color: ${themeVars.github.bgColor.done.emphasis} !important;
      &:hover {
        opacity: 0.9; // 悬停时降低不透明度
        transform: translateY(-1px); // 轻微上移效果
      }
    }

    &.purple {
      color: ${themeVars.color.white} !important;
      background-color: ${themeVars.github.bgColor.done.emphasis} !important;
      border-color: ${themeVars.github.bgColor.done.emphasis} !important;
      &:hover {
        opacity: 0.9; // 悬停时降低不透明度
        transform: translateY(-1px); // 轻微上移效果
      }
    }
  }
`;

// PR 分支标签
export const prBranch = css`
  .repository.view.issue .pull-desc code,
  #issue-list .flex-item-body .branches .branch {
    color: ${themeVars.github.fgColor.accent};
    background-color: ${themeVars.github.bgColor.accent.muted};
    border-radius: 25px; // 增加圆角
    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
    font-size: 12px;
    padding: 4px 10px; // 增加内边距
    line-height: 20px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
    &:hover {
      background-color: ${themeVars.github.bgColor.accent.emphasis};
      color: ${themeVars.color.white};
      transform: translateY(-1px); // 轻微上移效果
    }
  }

  .repository.view.issue .pull-desc code {
    padding-top: 4px; // 增加内边距
    padding-bottom: 4px; // 增加内边距
    a:hover {
      text-decoration-line: none;
    }
  }
`;

// 评论
export const comment = css`
  .comment .comment-container {
    // 去除评论标题左侧指向头像的小箭头
    .comment-header,
    &:target .comment-header {
      &:before,
      &:after {
        display: none;
      }
    }
    // 评论焦点样式
    &:target {
      .comment-container {
        border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
        box-shadow: 0 0 0 2px ${themeVars.color.primary.self} !important; // 增强焦点效果
      }
    }
    .comment-header {
      padding: 8px 8px 8px 16px; // 增加内边距
      min-height: 42px; // 增加最小高度
      border-radius: 12px 12px 0 0; // 增加圆角
    }
    .comment-header-right {
      > .item,
      > .label {
        color: ${themeVars.color.text.light.num1};
      }
      > .ui.label {
        background-color: initial;
        font-size: 12px;
        height: 24px; // 增加高度
        padding: 0 8px; // 增加内边距
        border-radius: 25px; // 增加圆角
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        &:hover {
          transform: translateY(-1px); // 轻微上移效果
        }
      }
      // 隐藏顶部菜单的表情按钮
      // 无法使用此样式, 评论无表情时底部的表情按钮元素不会渲染, 这是一个先有鸡还是先有蛋的问题
      // 很蛋疼, 希望 Gitea 早日使用 Github 的样式, 因为 Github 的更合理, 无论是操作的方便程度还是按钮的冗余度
      // .ui.dropdown.action.select-reaction {
      //   display: none;
      // }
      .context-dropdown {
        a.context-menu {
          display: flex;
          align-items: center;
        }
        // 评论菜单的删除按钮
        .menu .item.delete-comment {
          color: ${themeVars.color.red.self};
          border-radius: 8px; // 增加圆角
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
          &:hover {
            background-color: ${themeVars.color.red.badge.bg} !important;
            color: ${themeVars.color.red.light};
            transform: translateX(2px); // 轻微右移效果
          }
        }
      }
    }
    // 表情菜单按钮头部+底部
    .ui.dropdown.action.select-reaction > a {
      display: flex;
      align-items: center;
      justify-content: center;
      background: ${themeVars.color.button};
      border-radius: 25px; // 增加圆角
      border: 1px solid ${themeVars.color.light.border};
      color: ${themeVars.color.text.light.num1};
      padding: 0px 10px !important; // 增加内边距
      height: 32px; // 增加高度
      width: 32px; // 增加宽度
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:hover {
        background: ${themeVars.color.hover.self};
        transform: translateY(-1px); // 轻微上移效果
      }
    }
    // 底部表情栏
    .bottom-reactions {
      .ui.ui.ui.label {
        background-color: unset !important;
        border-radius: 25px;
        border-color: ${themeVars.color.light.border};
        padding: 4px 10px; // 增加内边距
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        &:hover {
          background-color: ${themeVars.color.reaction.hoverBg} !important;
          border-color: ${themeVars.color.light.border};
          transform: translateY(-1px); // 轻微上移效果
        }
        .reaction {
          font-size: 12px;
        }
        .reaction-count {
          color: ${themeVars.color.text.light.self};
          font-weight: 500;
          margin-left: 4px; // 增加左边距
        }
      }
      // 显示表情菜单按钮
      .select-reaction {
        padding: 0;
        // 两个表情按钮看着怪怪的, 很难受
        // visibility: visible;
      }
    }
  }
`;

// 评论书写框
export const commentForm = css`
  .repository .comment.form .content .segment {
    &::before,
    &::after {
      display: none;
    }
    border-radius: 12px; // 增加圆角
    padding: 16px; // 增加内边距
  }
`;

export const dropdown = css`
  .repository {
    // Issue/PR 列表下的所有筛选菜单
    &.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu,
    // Issue/PR 详情下的右侧的上半部分选项菜单
    &.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
      .item:hover:after {
        content: "";
        ${activeItemAfterStyle}
      }
      .item {
        padding: 8px 12px; // 增加内边距
        border-radius: 8px; // 增加圆角
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        &:hover {
          transform: translateX(2px); // 轻微右移效果
        }
      }
    }
  }
`;

// PR 界面的 PR 操作评论
export const prMerge = css`
  .repository.view.issue .comment-list .timeline-item.pull-merge-box {
    // 头像
    .timeline-avatar {
      color: ${themeVars.color.white} !important;
      border-radius: 12px; // 增加圆角
      width: 48px; // 增加宽度
      height: 48px; // 增加高度
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      svg {
        width: 28px; // 增加宽度
        height: 28px; // 增加高度
      }
      // 可以合并
      &.green {
        background-color: ${themeVars.github.bgColor.success.emphasis};
        // 操作评论边框色
        + .content > .ui.attached.segment {
          border-left-color: ${themeVars.github.bgColor.success.emphasis};
          border-right-color: ${themeVars.github.bgColor.success.emphasis};
          &:first-child {
            border-top-color: ${themeVars.github.bgColor.success.emphasis};
          }
          &:last-child {
            border-bottom-color: ${themeVars.github.bgColor.success.emphasis};
          }
        }
      }
      // 已合并
      &.purple {
        background-color: ${themeVars.github.bgColor.done.emphasis};
        + .content > .ui.attached.segment {
          border-left-color: ${themeVars.github.bgColor.done.emphasis};
          border-right-color: ${themeVars.github.bgColor.done.emphasis};
          &:first-child {
            border-top-color: ${themeVars.github.bgColor.done.emphasis};
          }
          &:last-child {
            border-bottom-color: ${themeVars.github.bgColor.done.emphasis};
          }
        }
      }
      &:hover {
        transform: scale(1.05); // 轻微放大效果
      }
    }
    // 检查状态
    .commit-status-panel {
      .commit-status-header {
        background: ${themeVars.color.body};
        padding: 20px; // 增加内边距
        font-size: 18px; // 增加字体大小
        font-weight: 600;
        border-radius: 12px 12px 0 0; // 增加圆角
        .ui.right {
          color: ${themeVars.color.text.light.num1};
          font-size: 14px;
          font-weight: 400;
        }
      }
      // 检查状态列表
      .commit-status-list {
        background: ${themeVars.color.menu};
        .commit-status-item {
          border-radius: 8px; // 增加圆角
          padding: 6px 12px; // 增加内边距
          margin: 0px 12px; // 增加边距
          height: 42px; // 增加高度
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
          &:first-child {
            margin-top: 12px; // 增加边距
          }
          &:last-child {
            margin-bottom: 12px; // 增加边距
          }
          &:hover {
            background-color: ${themeVars.color.hover.opaque};
            transform: translateX(2px); // 轻微右移效果
          }
        }
      }
    }
    // 合并信息和操作
    .merge-section {
      color: ${themeVars.color.text.light.num1};
      padding: 20px; // 增加内边距
      display: grid;
      gap: 12px; // 增加间距
      border-radius: 0 0 12px 12px; // 增加圆角
      &.no-header {
        &::before,
        &::after {
          display: none;
        }
      }
    }
  }
`;

// 时间线
export const timeline = css`
  .repository.view.issue {
    .comment-list {
      // 时间线本线
      .timeline::before {
        // 不遮挡归档信息框, 归档信息框背景色有透明度时会漏出线
        height: calc(100% - 62px);
      }
      .timeline-item,
      .timeline-item-group {
        padding: 20px 0; // 增加内边距
        // 事件
        &.event {
          // 修复覆盖后的位置问题
          padding-left: 15px;
          .avatar {
            width: 24px; // 增加宽度
            height: 24px; // 增加高度
          }
          .badge {
            border: 2px solid ${themeVars.color.body};
            border-radius: 50%; // 圆形徽章
          }
          // 仅匹配只有 badge
          .badge:not([class*=" "]) {
            background-color: ${themeVars.github.control.bgColor.rest};
            svg {
              color: ${themeVars.color.text.light.num1};
            }
          }
        }
        // 提交
        &.commits-list {
          // 每个提交之间的间隔
          .flex-text-block {
            padding-top: 6px; // 增加内边距
          }
          .badge svg {
            color: ${themeVars.color.text.light.num1};
          }
          // 仅覆盖左侧 commit 不覆盖右侧 SHA
          a.muted {
            font-size: 12px;
            color: ${themeVars.color.text.light.num1};
            text-decoration-line: underline;
            &:hover {
              color: ${themeVars.color.primary.self};
            }
          }
        }
      }
    }
  }
`;

const sidebarPadding = {
  padding: "8px 12px", // 增加内边距
};

// 侧边栏
export const issueSidebar = css`
  // 工单&创建工单&PR页面侧边栏
  .page-content.repository.issue {
    .issue-content {
      gap: 24px;
      .issue-content-right {
        border: 0;
        font-size: 12px;
        padding: 0;
        border-radius: 12px; // 增加圆角
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
        .ui.button {
          font-size: 12px;
        }
        .ui.form,
        a.fixed-text.muted,
        span.text,
        // 列表项为空时的文字
        span.item.empty-list,
        p {
          color: ${themeVars.color.text.light.num1};
          font-size: 12px;
        }
        .ui.dropdown.select-branch,
        .ui.form,
        a.fixed-text.muted,
        span.text,
        .ui.watching > div,
        .ui.depending > div,
        .flex-text-block,
        .ui.list,
        .toggle-wip,
        p {
          ${sidebarPadding};
        }
        // 允许维护者编辑
        > .ui.checkbox {
          margin: 8px 12px; // 增加边距
          strong {
            font-weight: 400;
          }
        }
        .issue-sidebar-combo {
          .ui.dropdown > a.fixed-text.muted {
            align-items: center;
            border-radius: 8px; // 增加圆角
            text-decoration-line: none;
            height: 32px; // 增加高度
            padding: 0 12px; // 增加内边距
            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
            &:hover {
              background: ${themeVars.github.control.transparent.bgColor.hover};
              transform: translateY(-1px); // 轻微上移效果
            }
          }
          .ui.list {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
          }
        }
        // 时间追踪
        > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
          align-items: center;
          border-radius: 8px; // 增加圆角
          text-decoration-line: none;
          height: 32px; // 增加高度
          padding: 0 12px; // 增加内边距
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
          &:hover {
            background: ${themeVars.github.control.transparent.bgColor.hover};
            transform: translateY(-1px); // 轻微上移效果
          }
        }
        // 选中日期颜色
        .ui.form .due-date {
          color: ${themeVars.color.text.self};
        }
        .divider {
          margin: 16px 0 16px 12px; // 增加边距
          width: calc(100% - 24px); // 调整宽度
        }
        // 订阅按钮
        .ui.watching .ui.button {
          padding: 0px 12px; // 增加内边距
          height: 32px; // 增加高度
          border-radius: 8px; // 增加圆角
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
          svg {
            margin: 0 !important;
          }
          &:hover {
            transform: translateY(-1px); // 轻微上移效果
          }
        }
        // PIN 按钮
        .form-fetch-action.single-button-form .ui.button,
        // 底部操作按钮
        .ui.show-modal.button {
          border: 0;
          background: unset;
          font-weight: 400;
          ${sidebarPadding};
          // 好像是浏览器 BUG, 最后不生效, 必须 !important
          margin: 0 !important;
          justify-content: left;
          border-radius: 8px; // 增加圆角
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
          &:hover {
            background: ${themeVars.github.control.transparent.bgColor.hover};
            transform: translateX(2px); // 轻微右移效果
          }
        }
        .ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
          color: ${themeVars.color.red.self};
          svg {
            color: ${themeVars.color.red.self};
          }
          &:hover {
            background-color: ${themeVars.color.red.badge.bg};
            color: ${themeVars.color.red.light};
            svg {
              color: ${themeVars.color.red.light};
            }
          }
        }
      }
    }
  }
`;