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

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

// 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
export const tippyBox = css`
  .tippy-box {
    margin-top: -3px;
    border-radius: 16px; // 增加圆角
    overflow: hidden;
    animation: ${animationDown};
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
    // 克隆菜单和PR提示框为 default
    &[data-theme="default"],
    // 带标题的提示框 (Runner信息)
    &[data-theme="box-with-header"] {
      border: unset;
      box-shadow: ${themeVars.github.shadow.floating.small};
      &:hover {
        position: relative;
        top: -4px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 6px 8px rgba(0, 0, 0, 0.1); // 增强阴影
      }
    }
    &[data-theme="default"] {
      border-radius: 16px;
    }
    &[data-theme="box-with-header"] {
      .tippy-content {
        background-color: ${themeVars.color.menu};
        .ui.attached.header {
          background-color: ${themeVars.color.body};
          padding: 16px 20px; // 增加内边距
          font-weight: 600;
          border-bottom: 1px solid ${themeVars.color.light.border}; // 添加底部边框
        }
      }
    }
    // 差异对比中文件路径行右侧的三个点菜单
    &[data-theme="menu"] {
      .tippy-content {
        padding: 8px;
        .item {
          border-radius: 10px; // 增加圆角
          padding: 8px 16px; // 增加内边距
          transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
          font-weight: 500; // 增加字体粗细
          &:hover {
            background-color: ${themeVars.github.control.transparent.bgColor.hover};
            position: relative;
            left: 4px;
            color: ${themeVars.color.primary.self}; // 改变文字颜色
          }
        }
      }
    }
    // 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等
    &[data-theme="tooltip"] {
      .tippy-content {
        font-size: 12px;
        font-weight: 500; // 增加字体粗细
        padding: 8px 16px; // 增加内边距
        border-radius: 10px; // 增加圆角
        background-color: ${themeVars.color.menu};
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); // 增强阴影
        color: ${themeVars.color.text.self}; // 确保文字颜色
      }
    }
  }
`;