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

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

export const diff = css`
  /* 折叠行多余的颜色 */
  .tag-code {
    background-color: unset;
    /* 折叠行文本 */
    .code-inner {
      color: ${themeVars.color.text.light.num1};
      font-weight: 500; // 增加字体粗细
    }
  }
  /* 增加/删除行多余的颜色 */
  .code-diff-unified {
    .del-code,
    .add-code {
      background: unset;
      border-color: unset;
    }
  }
  /* 增加/删除相关代码背景色圆角 */
  .added-code,
  .removed-code {
    border-radius: 0.1875rem;
    color: ${themeVars.color.text.self};
    padding: 0 2px; // 增加内边距
    /* 覆盖掉 chroma 的颜色 */
    * {
      color: ${themeVars.color.text.self} !important;
    }
  }
  /* 展开/收缩按钮 */
  .code-expander-button {
    color: ${themeVars.color.text.light.num1};
    height: 32px !important; // 增加高度
    padding: 0 12px; // 增加内边距
    border-radius: 8px; // 增加圆角
    font-weight: 500; // 增加字体粗细
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
    &:hover {
      background: ${themeVars.github.bgColor.accent.emphasis};
      color: ${themeVars.color.white};
      transform: translateY(-1px); // 轻微上移效果
    }
    &:active {
      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
    }
  }
  /* 行号居中 */
  .lines-num {
    text-align: center !important;
    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); // 使用等宽字体
  }
  // 差异对比文件盒子
  .diff-file-box {
    border-radius: 12px; // 增加圆角
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
    margin-bottom: 16px; // 增加底部间距
    overflow: hidden; // 隐藏溢出内容
    // 差异对比文件头
    .diff-file-header {
      // 文件名
      .diff-file-name {
        font-weight: 500; // 增加字体粗细
        padding: 12px 16px; // 增加内边距
        .fold-file.btn svg {
          min-width: 16px;
          min-height: 16px;
          height: 16px;
          width: 16px;
        }
        .diff-stats-bar {
          height: 8px;
          border-radius: 4px; // 增加圆角
        }
        > div,
        .file-link {
          font-size: 12px;
        }
      }
      // 操作按钮
      .diff-file-header-actions {
        color: ${themeVars.color.text.light.num1};
        font-size: 12px;
        font-weight: 400;
        padding: 12px 16px; // 增加内边距
      }
    }
  }
  
  // 增强差异对比的可读性
  .code-diff {
    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); // 使用等宽字体
    font-size: 14px; // 增加字体大小
    line-height: 1.5; // 增加行高
  }
  
  // 增加行的样式
  .add-code {
    background-color: ${themeVars.color.diff.added.row.bg}; // 使用主题色
    &:hover {
      background-color: ${themeVars.color.diff.added.row.border}; // 悬停时改变背景色
    }
  }
  
  // 删除行的样式
  .del-code {
    background-color: ${themeVars.color.diff.removed.row.bg}; // 使用主题色
    &:hover {
      background-color: ${themeVars.color.diff.removed.row.border}; // 悬停时改变背景色
    }
  }
  
  // 移动行的样式
  .moved-code {
    background-color: ${themeVars.color.diff.moved.row.bg}; // 使用主题色
    &:hover {
      background-color: ${themeVars.color.diff.moved.row.border}; // 悬停时改变背景色
    }
  }
  
  // 行号的样式
  .lines-num {
    background-color: ${themeVars.color.box.body.self}; // 使用主题色
    border-right: 1px solid ${themeVars.color.light.border}; // 添加右边框
    padding: 0 8px; // 增加内边距
    min-width: 40px; // 设置最小宽度
  }
  
  // 行内容的样式
  .lines-code {
    padding: 0 12px; // 增加内边距
  }
`;