You've already forked gitea-banana-theme
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import { css, themeVars } from "src/types/vars";
|
|
|
|
export const footer = css`
|
|
.page-footer {
|
|
background-color: ${themeVars.color.footer}; // 使用主题色
|
|
border-top: 0;
|
|
color: ${themeVars.color.text.light.num1};
|
|
font-size: 12px;
|
|
gap: 32px;
|
|
justify-content: center;
|
|
padding: 24px 0 40px 0; // 增加顶部内边距
|
|
border-radius: 12px 12px 0 0; // 增加圆角
|
|
margin-top: 32px; // 增加顶部外边距
|
|
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
|
|
> .left-links {
|
|
gap: 8px; // 增加间距
|
|
> a {
|
|
color: ${themeVars.color.text.light.num1};
|
|
padding: 4px 8px; // 增加内边距
|
|
border-radius: 8px; // 增加圆角
|
|
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
|
|
&:hover {
|
|
color: ${themeVars.color.primary.self};
|
|
background-color: ${themeVars.color.hover.self};
|
|
transform: translateY(-1px); // 轻微上移效果
|
|
}
|
|
}
|
|
> strong {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
> .right-links {
|
|
gap: 16px;
|
|
> .ui.dropdown {
|
|
font-size: 12px;
|
|
padding: 4px 8px; // 增加内边距
|
|
border-radius: 8px; // 增加圆角
|
|
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
|
|
&:hover {
|
|
color: ${themeVars.color.primary.self};
|
|
background-color: ${themeVars.color.hover.self};
|
|
transform: translateY(-1px); // 轻微上移效果
|
|
}
|
|
}
|
|
> a {
|
|
border-left: 0;
|
|
color: ${themeVars.color.text.light.num1};
|
|
padding: 4px 8px; // 增加内边距
|
|
margin-left: 0;
|
|
border-radius: 8px; // 增加圆角
|
|
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
|
|
&:hover {
|
|
color: ${themeVars.color.primary.self};
|
|
background-color: ${themeVars.color.hover.self};
|
|
transform: translateY(-1px); // 轻微上移效果
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 移动端优化
|
|
@media (max-width: 767.98px) {
|
|
.page-footer {
|
|
flex-direction: column; // 垂直排列
|
|
gap: 16px; // 调整间距
|
|
padding: 16px 0 32px 0; // 调整内边距
|
|
> .left-links,
|
|
> .right-links {
|
|
flex-wrap: wrap; // 允许换行
|
|
justify-content: center; // 居中对齐
|
|
gap: 8px; // 调整间距
|
|
}
|
|
}
|
|
}
|
|
`; |