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

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

// 提交列表
export const commit = css`
  .page-content.repository {
    // 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
    #commits-table.ui.basic.striped.table tbody.commit-list {
      border-radius: 12px; // 增加圆角
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
      overflow: hidden; // 隐藏溢出内容
      // 作者
      .author {
        // 作者名称
        .author-wrapper {
          color: ${themeVars.color.text.light.num1};
          font-weight: 500; // 增加字体粗细
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
          &:hover {
            color: ${themeVars.color.primary.self};
          }
        }
      }
      // SHA 标签
      .sha {
        a.ui.label.commit-id-short {
          padding: 4px 10px; // 增加内边距
          height: 32px; // 增加高度
          margin-top: 0.375rem;
          margin-bottom: 0.375rem;
          margin-left: -8px;
          border-radius: 25px; // 增加圆角
          font-weight: 500; // 增加字体粗细
          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); // 轻微上移效果
          }
        }
      }
      // 提交信息
      .message {
        // tag 标签
        a.ui.basic.primary.label {
          border-radius: 25px;
          border-width: 1.5px;
          padding: 6px 12px !important; // 增加内边距
          font-weight: 500; // 增加字体粗细
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
          &:hover {
            transform: translateY(-1px); // 轻微上移效果
          }
        }
      }
      // 提交信息右侧
      .tw-text-right {
        // 时间标签
        relative-time,
        // 复制 SHA 按钮
        .btn.copy-commit-id,
        // 查看提交路径按钮
        .btn.view-commit-path {
          color: ${themeVars.color.text.light.num1};
          padding: 4px 8px; // 增加内边距
          border-radius: 8px; // 增加圆角
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
          &:hover {
            background-color: ${themeVars.github.control.transparent.bgColor.hover};
            transform: translateY(-1px); // 轻微上移效果
          }
        }
      }
      tr {
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        // 整行悬停色
        &:hover {
          background-color: ${themeVars.color.hover.opaque};
          transform: translateX(2px); // 轻微右移效果
        }
        // 偶数行悬停色
        &:nth-child(2n):hover {
          background-color: ${themeVars.color.hover.opaque} !important;
        }
        // 尾行圆角
        &:last-child {
          td:first-child {
            border-bottom-left-radius: 12px; // 增加圆角
          }
          td:last-child {
            border-bottom-right-radius: 12px; // 增加圆角
          }
        }
      }
    }
  }
  
  // 移动端优化
  @media (max-width: 767.98px) {
    .page-content.repository #commits-table.ui.basic.striped.table tbody.commit-list {
      .sha a.ui.label.commit-id-short {
        padding: 3px 8px; // 调整内边距
        height: 28px; // 调整高度
      }
      
      .message a.ui.basic.primary.label {
        padding: 4px 8px !important; // 调整内边距
      }
      
      .tw-text-right {
        .btn.copy-commit-id,
        .btn.view-commit-path {
          padding: 3px 6px; // 调整内边距
        }
      }
    }
  }
`;

export const commitStatus = css`
  .flex-text-inline[data-global-init="initCommitStatuses"] {
    padding: 8px 12px; // 增加内边距
    margin-top: 4px; // 增加顶部外边距
    border-radius: 8px; // 增加圆角
    background-color: ${themeVars.color.menu}; // 添加背景色
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
    &:hover {
      background-color: ${themeVars.github.control.transparent.bgColor.hover};
      transform: translateY(-1px); // 轻微上移效果
    }
  }
  
  // 移动端优化
  @media (max-width: 767.98px) {
    .flex-text-inline[data-global-init="initCommitStatuses"] {
      padding: 6px 10px; // 调整内边距
      margin-top: 2px; // 调整顶部外边距
    }
  }
`;