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

// 一些列表头, 比如工单的搜索标签里程碑栏
export const listHeader = css`
  .list-header {
    align-items: center;
    align-content: center;
    padding: 16px; // 增加内边距
    border-radius: 12px; // 增加圆角
    background-color: ${themeVars.color.box.header}; // 背景色
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
    margin-bottom: 16px; // 增加底部间距
  }
`;

// 已标星的图标
export const star = css`
  .octicon-star-fill {
    color: ${themeVars.github.button.star.iconColor} !important;
  }
`;

// 卡片样式，参考 Nano-Banana-AI-Image-Editor 的设计
export const card = css`
  .ui.segment,
  .ui.attached.segment,
  .ui.card,
  .ui.cards > .card {
    border-radius: 12px; // 增加圆角
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05); // 添加卡片阴影
    border: 1px solid ${themeVars.color.light.border}; // 添加边框
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
    
    &:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 悬停时增强阴影
      position: relative;
      top: -2px;
    }
  }
  
  // 卡片头部
  .ui.segment > .ui.tabular.menu,
  .header-wrapper .ui.tabular.menu {
    border-radius: 12px 12px 0 0; // 保持顶部圆角
    margin: -1px -1px 0 -1px; // 调整边距
  }
`;

// 面板样式
export const panel = css`
  .ui.attached.header,
  .ui.top.attached.header {
    border-radius: 12px 12px 0 0; // 保持顶部圆角
    padding: 16px; // 增加内边距
    font-weight: 600; // 增加字体粗细
    border: 1px solid ${themeVars.color.light.border}; // 添加边框
    border-bottom: none; // 移除底部边框
  }
  
  .ui.bottom.attached.header {
    border-radius: 0 0 12px 12px; // 保持底部圆角
    padding: 16px; // 增加内边距
    border: 1px solid ${themeVars.color.light.border}; // 添加边框
    border-top: none; // 移除顶部边框
  }
`;