You've already forked gitea-banana-theme
129 lines
2.8 KiB
TypeScript
129 lines
2.8 KiB
TypeScript
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;
|
|
}
|
|
`; |