You've already forked gitea-banana-theme
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
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); // 悬停时增强阴影
|
|
transform: translateY(-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; // 移除顶部边框
|
|
}
|
|
`; |