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

// 增强的渐变过渡
export const transition = css`
  // 差异对比的代码折叠按钮
  .code-expander-button,
  // 仓库 README 头部的按钮
  .file-header-left,
  .file-header-right,
  // 仪表板仓库列表
  .ui.attached.segment.table ul li,
  // Issue 列表
  .issue-list-toolbar .item,
  .flex-list#issue-list > .flex-item,
  // 分页菜单
  .ui.borderless.pagination.menu .item,
  // 迁移的元素
  #navbar .item,
  .header-wrapper .ui.tabular.menu .item,
  .job-step-summary,
  .job-step-logs,
  .job-brief-item,
  .repo-file-cell,
  .tippy-box .flex-items-block .item,
  .clone-panel-tab .item,
  .ui.form select,
  .ui.label,
  .ui.modal,
  .ui.checkbox label:before,
  .ui.checkbox input:checked ~ label:before,
  .ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
  .ui.selection.dropdown,
  .ui.selection.active.dropdown,
  .ui.selection.active.dropdown:hover,
  .ui.selection.active.dropdown .menu,
  .ui.selection.active.dropdown:hover .menu,
  .ui.vertical.menu .header.item,
  .ui.secondary.menu .item {
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  // Gitea 表单元素原始过渡覆盖
  input,
  textarea,
  tr,
  .ui.input textarea,
  .ui.form textarea,
  .ui.form input:not([type]),
  .ui.form input[type="date"],
  .ui.form input[type="datetime-local"],
  .ui.form input[type="email"],
  .ui.form input[type="number"],
  .ui.form input[type="password"],
  .ui.form input[type="search"],
  .ui.form input[type="tel"],
  .ui.form input[type="time"],
  .ui.form input[type="text"],
  .ui.form input[type="file"],
  .ui.form input[type="url"] {
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  // 添加按钮点击脉冲动画
  @keyframes pulse-click {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .pulse-click {
    animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  // 添加滑入动画
  @keyframes slide-in-from-top-full {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes slide-in-from-right {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slide-out-to-right {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  
  .animate-in {
    animation-duration: 300ms;
    animation-fill-mode: both;
  }
  
  .slide-in-from-top-full {
    animation-name: slide-in-from-top-full;
  }
  
  .slide-in-from-right {
    animation-name: slide-in-from-right;
  }
  
  .slide-out-to-right {
    animation-name: slide-out-to-right;
  }
`;