You've already forked gitea-banana-theme
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import { animationDown } from "src/core/theme";
|
|
import { css, themeVars } from "src/types/vars";
|
|
|
|
export const modal = css`
|
|
.ui.modal {
|
|
animation: ${animationDown};
|
|
border: 1.5px solid ${themeVars.color.light.border};
|
|
border-radius: 16px; // 增加圆角
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05); // 增强阴影效果
|
|
overflow: hidden; // 隐藏溢出内容
|
|
|
|
> .header {
|
|
background-color: ${themeVars.color.menu};
|
|
border-bottom: 1.5px solid ${themeVars.color.light.border};
|
|
padding: 20px 24px; // 增加内边距
|
|
font-size: 1.25rem; // 增加字体大小
|
|
font-weight: 600; // 增加字体粗细
|
|
border-radius: 16px 16px 0 0; // 保持顶部圆角
|
|
}
|
|
|
|
> .content,
|
|
form > .content {
|
|
background-color: ${themeVars.color.menu};
|
|
padding: 24px; // 增加内边距
|
|
}
|
|
|
|
> .actions,
|
|
.content + .actions,
|
|
.content + form > .actions {
|
|
background-color: ${themeVars.color.menu};
|
|
border-top: 1.5px solid ${themeVars.color.light.border};
|
|
padding: 16px 24px; // 增加内边距
|
|
border-radius: 0 0 16px 16px; // 保持底部圆角
|
|
}
|
|
.actions > .ui.button {
|
|
padding: 8px 16px; // 增加内边距
|
|
border-radius: 8px; // 增加圆角
|
|
min-height: 36px; // 增加最小高度
|
|
font-weight: 500; // 增加字体粗细
|
|
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
|
|
&:hover {
|
|
transform: translateY(-1px); // 轻微上移效果
|
|
}
|
|
&:active {
|
|
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
|
|
}
|
|
}
|
|
}
|
|
|
|
// 增强模态框的可访问性
|
|
.ui.modal:focus {
|
|
outline: 2px solid ${themeVars.github.borderColor.accent.emphasis};
|
|
outline-offset: 2px;
|
|
}
|
|
`; |