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

export const heatmap = css`
  #user-heatmap {
    + .divider:not(.divider-text) {
      border-color: #0000;
      margin: 8px 0px;
    }
    .total-contributions {
      left: 25px + 20px;
      bottom: 0 + 12px;
      color: ${themeVars.color.text.light.num1};
      font-size: 12px;
      font-weight: 500;
    }
    .total-contributions,
    .vch__legend-right {
      color: ${themeVars.color.text.light.num1};
    }
    .vch__container {
      padding: 16px 24px;
      box-shadow: ${themeVars.github.shadow.floating.small};
      border-radius: 16px; // 增加圆角
      background-color: ${themeVars.color.menu};
      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
      // 覆盖热力图和图例的背景色
      .vch__day__square,
      .vch__legend__wrapper rect {
        // 圆角
        rx: 2px;
        ry: 2px;
        // 宽度和高度可以用来控制间隔
        width: 12px; // 增加宽度
        height: 12px; // 增加高度
        // 边框
        outline: 1px solid ${themeVars.github.contribution.default.borderColor.num0};
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
        // 悬停效果
        &:hover {
          outline: 2px solid ${themeVars.color.primary.self}; // 添加主色调边框
          position: relative; // 使用相对定位而不是 z-index
        }

        &[style="fill: var(--color-secondary-alpha-60);"] {
          fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
        }

        &[style="fill: var(--color-primary-light-4);"] {
          fill: ${themeVars.color.primary.light.num4} !important;
          outline-color: ${themeVars.github.contribution.default.borderColor.num0};
        }

        &[style="fill: var(--color-primary-light-2);"] {
          fill: ${themeVars.color.primary.light.num2} !important;
          outline-color: ${themeVars.github.contribution.default.borderColor.num0};
        }

        &[style="fill: var(--color-primary);"] {
          fill: ${themeVars.color.primary.self} !important;
          outline-color: ${themeVars.github.contribution.default.borderColor.num0};
        }

        &[style="fill: var(--color-primary-dark-2);"] {
          fill: ${themeVars.color.primary.dark.num2} !important;
          outline-color: ${themeVars.github.contribution.default.borderColor.num0};
        }

        &[style="fill: var(--color-primary-dark-4);"] {
          fill: ${themeVars.color.primary.dark.num4} !important;
          outline-color: ${themeVars.github.contribution.default.borderColor.num0};
        }
      }
    }
  }
  
  // 移动端优化
  @media (max-width: 767.98px) {
    #user-heatmap .vch__container {
      padding: 12px 16px;
      border-radius: 12px; // 调整圆角
      .vch__day__square,
      .vch__legend__wrapper rect {
        width: 10px; // 调整宽度
        height: 10px; // 调整高度
      }
    }
  }
`;

// 动态
export const activity = css`
  .flex-list#activity-feed {
    border-radius: 12px;
    box-shadow: ${themeVars.github.shadow.floating.small};
    background-color: ${themeVars.color.menu}; // 添加背景色
    > .flex-item {
      gap: 12px;
      padding: 16px 12px 20px 16px; // 增加内边距
      border-bottom: 1px solid ${themeVars.color.light.border}; // 添加底部边框
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      &:last-child {
        border-bottom: none; // 最后一项移除边框
      }
      &:hover {
        background-color: ${themeVars.color.hover.opaque};
      }
      > .flex-item-main {
        gap: 8px !important;
        > div:not([class]) {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
        }
        relative-time {
          color: ${themeVars.color.text.light.num1};
        }
      }
      // 动态的右侧 svg 图标
      .flex-item-trailing svg {
        height: 24px; // 增加高度
        width: 24px; // 增加宽度
        color: ${themeVars.color.text.light.num1};
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
      }
    }
    > .page.buttons {
      border-top: 1px solid ${themeVars.color.secondary.self};
      padding: 16px 0px; // 增加内边距
      margin: 0; // 移除外边距
      border-radius: 0 0 12px 12px; // 增加圆角
    }
  }
  
  // 移动端优化
  @media (max-width: 767.98px) {
    .flex-list#activity-feed > .flex-item {
      padding: 12px 8px 16px 12px; // 调整内边距
      .flex-item-trailing svg {
        height: 20px; // 调整高度
        width: 20px; // 调整宽度
      }
    }
  }
`;