yuantao/gitea-banana-theme
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

banana v1

Browse Source
This commit is contained in:
User
2025-09-25 10:29:31 +08:00
parent d4f873a8c1
commit a35a81009c
28 changed files with 1657 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
styles/public/animation.ts
View File

@@ -24,4 +24,143 @@ export const keyframe = css`
transform: translateY(0);
}
}
`;
// 添加更多动画效果
// 淡入动画
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
// 缩放进入动画
@keyframes scale-in {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
// 缩放退出动画
@keyframes scale-out {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.95);
}
}
// 从左侧滑入动画
@keyframes slide-in-from-left {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
// 从右侧滑入动画
@keyframes slide-in-from-right {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
// 从顶部滑入动画
@keyframes slide-in-from-top {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
// 从底部滑入动画
@keyframes slide-in-from-bottom {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
// 脉冲动画
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
// 脉冲点击动画
@keyframes pulse-click {
0% {
transform: scale(1);
}
50% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
// 弹跳动画
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
// 旋转动画
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// 摆动动画
@keyframes swing {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
}
`;

41
styles/public/button.ts
View File

@@ -5,12 +5,15 @@ export const primaryStyle = {
backgroundColor: themeVars.github.button.primary.bgColor.rest,
borderColor: themeVars.github.button.primary.borderColor.rest,
boxShadow: themeVars.github.shadow.resting.small,
borderRadius: "8px", // 增加圆角
};
export const primaryHoverStyle = {
color: themeVars.github.button.primary.fgColor.rest,
backgroundColor: themeVars.github.button.primary.bgColor.hover,
borderColor: themeVars.github.button.primary.borderColor.hover,
transform: "translateY(-1px)", // 添加轻微的上移效果
boxShadow: `0 4px 12px rgba(0, 0, 0, 0.1), ${themeVars.github.shadow.resting.small}`, // 增强阴影
};
// 普通按钮和主色调按钮
@@ -19,9 +22,15 @@ export const baseButton = css`
min-height: 30px;
font-weight: 500;
padding: 9px 16px;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&.ui {
gap: 8px;
}
// 添加点击效果
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
.ui.button:not(.primary):not(.red) svg {
color: ${themeVars.color.text.light.num1};
@@ -38,6 +47,9 @@ export const baseButton = css`
&:hover {
${primaryHoverStyle}
}
&:active {
transform: translateY(0); // 点击时回到原位
}
}
// 按钮组整体有阴影
&.buttons {
@@ -55,18 +67,32 @@ export const baseButton = css`
color: ${themeVars.color.text.self};
border-color: ${themeVars.color.light.border};
box-shadow: none;
border-radius: 8px; // 增加圆角
&:hover {
background-color: ${themeVars.color.hover.self};
color: ${themeVars.color.text.self};
border-color: ${themeVars.color.light.border};
transform: translateY(-1px); // 添加轻微的上移效果
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
}
&:active {
transform: translateY(0); // 点击时回到原位
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
/* 普通按钮边框色不变 */
.ui.basic.button,
/* 仓库点星等数字标签按钮边框色不变 */
.ui.labeled.button > .label {
border-radius: 8px; // 增加圆角
&:hover {
border-color: ${themeVars.color.light.border};
transform: translateY(-1px); // 添加轻微的上移效果
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
}
&:active {
transform: translateY(0); // 点击时回到原位
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
@@ -78,6 +104,7 @@ export const baseButton = css`
.ui.basic.buttons .active.button:hover,
.ui.basic.active.button:hover {
background-color: ${themeVars.github.button.default.bgColor.active};
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
`;
@@ -90,12 +117,19 @@ export const redButton = css`
background-color: ${themeVars.github.button.danger.bgColor.rest};
/* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致 */
border-color: ${themeVars.color.light.border};
border-radius: 8px; // 增加圆角
&:hover {
color: ${themeVars.github.button.danger.fgColor.hover};
background-color: ${themeVars.github.button.danger.bgColor.hover};
border-color: ${themeVars.github.button.danger.borderColor.hover};
box-shadow: ${themeVars.github.shadow.resting.small};
transform: translateY(-1px); // 添加轻微的上移效果
}
&:active {
transform: translateY(0); // 点击时回到原位
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
`;
@@ -107,10 +141,12 @@ export const fixButtonHeight = css`
.ui.ui.ui.ui.small.button {
min-height: 26px;
height: 32px;
border-radius: 6px; // 小按钮使用稍小的圆角
}
// 修复仓库页仓库操作按钮高度对齐和修正
.repo-button-row .ui.button {
min-height: 32px;
border-radius: 8px; // 保持一致的圆角
}
// 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
.repo-header {
@@ -118,11 +154,13 @@ export const fixButtonHeight = css`
.ui.labeled.button > .label {
height: 28px;
min-height: 28px;
border-radius: 6px; // 小按钮使用稍小的圆角
}
}
.ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,
.ui.ui.ui.ui.tiny.button {
min-height: 20px;
border-radius: 4px; // 微型按钮使用更小的圆角
}
`;
@@ -135,5 +173,6 @@ export const fixButton = css`
.ui.button.code-copy {
padding: 4px 6px;
min-height: 28px;
border-radius: 6px; // 保持一致的圆角
}
`;
`;

46
styles/public/dropdown.ts
View File

@@ -1,6 +1,6 @@
import { animationDown, animationUp } from "src/core/theme";
import { fallbackVar } from "src/functions";
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
import { css, customThemeVars, themeVars } from "src/types/vars";
import { activeItemAfterStyle } from "styles/public/menu";
export const dropdown = css`
@@ -17,9 +17,10 @@ export const dropdown = css`
> .item:not(.tw-hidden) {
display: flex !important;
align-items: center;
padding: 6px 8px !important;
border-radius: ${otherThemeVars.border.radius} !important;
padding: 8px 12px !important; // 增加内边距
border-radius: 8px !important; // 增加圆角
gap: 4px;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:not(.emoji) {
margin: 0 8px;
}
@@ -33,6 +34,7 @@ export const dropdown = css`
}
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateX(2px); // 轻微右移效果
}
&.selected {
background-color: ${themeVars.color.active} !important;
@@ -146,16 +148,19 @@ export const selectionDropdown = css`
.ui.selection.dropdown.active:not(.search):not(.ellipsis-text-items) {
background-color: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
padding: 8px 16px;
min-height: 32px;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:focus {
background: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
}
&:hover {
background: ${themeVars.color.hover.self};
border-color: ${themeVars.color.light.border};
border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
transform: translateY(-1px); // 轻微上移效果
}
// 悬停提供伪元素
.item:hover:after {
@@ -176,34 +181,41 @@ export const selectionDropdown = css`
// 不实现伪元素, 因为 .item 设置溢出的元素会被截断
.ui.selection.dropdown.ellipsis-text-items,
.ui.selection.dropdown.activeellipsis-text-items {
border-radius: 8px; // 增加圆角
&:focus {
background: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
}
&:hover {
background: ${themeVars.color.hover.self};
border-color: ${themeVars.color.light.border};
border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
transform: translateY(-1px); // 轻微上移效果
}
}
// 选择输入框效果和输入框 focus 效果一样
.ui.selection.dropdown.active.search {
background: ${themeVars.color.body};
// 向内部添加一个 1px 的边框
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
outline: none;
border-radius: 8px; // 增加圆角
}
// 覆盖选择输入框向上弹出时的 hover 效果, 原阴影会覆盖加厚的边框线
.ui.selection.dropdown.active.search.upward:hover {
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果
}
// 由于之前的排除导致样式优先级变高, 小按钮去除圆角
.ui.action.input > .dropdown.small:not(:first-child) {
border-radius: 0;
border-radius: 0 8px 8px 0; // 右侧圆角
}
.ui.action.input > .dropdown.small:first-child {
border-radius: 8px 0 0 8px; // 左侧圆角
}
// 排除一些小按钮, 例如软件包类型, 通常相邻有元素
.ui.selection.dropdown.active:not(.small) {
border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
border-bottom-left-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
// 修复因为上面的排除导致的圆角问题
// 具体工单页面下依赖菜单选择框
@@ -215,8 +227,10 @@ export const selectionDropdown = css`
// 修复选择框的下拉菜单向上显示时的样式问题
.ui.upward.selection.dropdown.visible:not(.small),
.ui.active.upward.selection.dropdown:not(.small) {
border-top-left-radius: ${otherThemeVars.border.radius} !important;
border-top-right-radius: ${otherThemeVars.border.radius} !important;
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
// 工单标签菜单中的标签换行和颜色
// 标签页面的标签选择框
@@ -259,14 +273,18 @@ export const emojiDropdown = css`
gap: 4px;
padding: 4px;
min-width: auto;
border-radius: 12px !important; // 增加圆角
> .item.emoji {
font-size: 14px;
min-height: 32px;
height: 32px;
margin: 0px;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis} !important;
transform: scale(1.1); // 轻微放大效果
}
}
}
`;
`;

30
styles/public/input.ts
View File

@@ -1,4 +1,4 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
export const input = css`
input,
@@ -20,23 +20,45 @@ export const input = css`
.ui.form input[type="time"],
.ui.form input[type="url"] {
padding: 8px 12px;
border-radius: 8px; // 增加圆角
border: 1px solid ${themeVars.color.light.border}; // 默认边框
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:focus,
&:focus-visible {
background: ${themeVars.color.body} !important;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 保持圆角
border-color: ${themeVars.github.borderColor.accent.emphasis};
// 向内部添加一个 1px 的边框
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 3px rgba(253, 224, 71, 0.2); // 增强焦点效果
outline: none;
transform: translateY(-1px); // 轻微上移效果
}
&:hover:not(:focus) {
border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加轻微阴影
}
}
.ui.input {
height: 32px;
border-radius: 8px; // 增加圆角
}
// 由于输入框高度, 需要输入框在表单中垂直居中
// 管理员页面仓库搜索表单
.ui.form#repo-search-form {
align-items: center;
}
`;
// 增强表单元素的整体样式
.ui.form {
.field {
margin-bottom: 16px; // 增加字段间距
}
label {
font-weight: 500; // 增加标签字体粗细
margin-bottom: 6px; // 增加标签与输入框间距
display: block;
}
}
`;

93
styles/public/label.ts
View File

@@ -8,6 +8,9 @@ export const label = css`
&.ui.ui.ui {
&.label {
border-radius: 25px;
padding: 5px 12px; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
// 多个标签的组合标签的圆角修复
&.scope-parent {
.scope-left {
@@ -27,42 +30,75 @@ export const label = css`
background-color: unset;
border: 1px solid ${themeVars.color.primary.self};
color: ${themeVars.color.primary.self};
&:hover {
background-color: ${themeVars.color.primary.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
}
}
/* 红色标签 */
&.red {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.done.emphasis};
color: ${themeVars.color.purple.self};
&:hover {
background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
}
}
/* 橙色标签 */
&.orange {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
color: ${themeVars.color.yellow.self};
&:hover {
background-color: ${themeVars.color.yellow.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
}
}
/* 黄色标签 */
&.yellow {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
color: ${themeVars.color.orange.self};
&:hover {
background-color: ${themeVars.color.orange.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
}
}
/* 黄绿色标签 */
&.olive {
background-color: unset;
border: 1px solid ${themeVars.color.olive.self};
color: ${themeVars.color.olive.self};
&:hover {
background-color: ${themeVars.color.olive.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
}
}
/* 绿色标签 */
&.green {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.success.emphasis};
color: ${themeVars.color.green.self};
&:hover {
background-color: ${themeVars.color.green.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
}
}
/* 紫色标签 */
&.purple {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.done.emphasis};
color: ${themeVars.color.purple.self};
&:hover {
background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
}
}
// 添加悬停效果
&:hover:not(.primary):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.purple) {
background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
}
}
}
@@ -84,10 +120,14 @@ export const shaLabel = css`
color: ${themeVars.color.text.light.num1};
font-size: 12px;
font-weight: 500;
padding: 4px 8px; // 增加内边距
// 仪表盘页的提交 SHA 标签居中对齐
margin-top: 2px;
border-radius: 25px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.label.hoverBg};
transform: translateY(-1px); // 轻微上移效果
}
// 验证提交 SHA 标签
&.commit-is-signed {
@@ -95,22 +135,26 @@ export const shaLabel = css`
background-color: unset !important;
&:hover {
background-color: ${themeVars.color.label.hoverBg} !important;
transform: translateY(-1px); // 轻微上移效果
}
span.ui.label.commit-is-signed {
padding: 3px 5px;
margin-left: 5px;
border-radius: 25px; // 增加圆角
}
}
}
// 验证提交附带的图标
span.ui.label.commit-is-signed {
border-radius: 25px; // 增加圆角
// 验证信任
&.sign-trusted {
border: 1.5px solid ${themeVars.color.green.badge.self} !important;
color: ${themeVars.color.green.badge.self} !important;
&:hover {
background-color: ${themeVars.color.green.badge.hover.bg} !important;
background-color: ${themeVars.color.green.badge.bg} !important;
transform: translateY(-1px); // 轻微上移效果
}
}
// 验证未信任
@@ -118,7 +162,8 @@ export const shaLabel = css`
border: 1.5px solid ${themeVars.color.yellow.badge.self} !important;
color: ${themeVars.color.yellow.badge.self} !important;
&:hover {
background-color: ${themeVars.color.yellow.badge.hover.bg} !important;
background-color: ${themeVars.color.yellow.badge.bg} !important;
transform: translateY(-1px); // 轻微上移效果
}
}
// 验证未匹配
@@ -126,7 +171,8 @@ export const shaLabel = css`
border: 1.5px solid ${themeVars.color.orange.badge.self} !important;
color: ${themeVars.color.orange.badge.self} !important;
&:hover {
background-color: ${themeVars.color.orange.badge.hover.bg} !important;
background-color: ${themeVars.color.orange.badge.bg} !important;
transform: translateY(-1px); // 轻微上移效果
}
}
// 验证警告
@@ -134,7 +180,8 @@ export const shaLabel = css`
border: 1.5px solid ${themeVars.color.red.badge.self} !important;
color: ${themeVars.color.red.badge.self} !important;
&:hover {
background-color: ${themeVars.color.red.badge.hover.bg} !important;
background-color: ${themeVars.color.red.badge.bg} !important;
transform: translateY(-1px); // 轻微上移效果
}
}
}
@@ -147,12 +194,26 @@ export const taskStatusLabel = css`
color: ${themeVars.color.success.text};
border: 1px solid ${themeVars.color.success.border};
background: ${themeVars.color.success.bg};
border-radius: 25px; // 增加圆角
padding: 5px 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.success.bg}; // 悬停时改变背景色
transform: translateY(-1px); // 轻微上移效果
}
}
&failure {
color: ${themeVars.color.error.text};
border: 1px solid ${themeVars.color.error.border};
background: ${themeVars.color.error.bg.self};
border-radius: 25px; // 增加圆角
padding: 5px 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.error.bg.self}; // 悬停时改变背景色
transform: translateY(-1px); // 轻微上移效果
}
}
&running,
@@ -160,6 +221,13 @@ export const taskStatusLabel = css`
color: ${themeVars.color.info.text};
border: 1px solid ${themeVars.color.info.border};
background: ${themeVars.color.info.bg};
border-radius: 25px; // 增加圆角
padding: 5px 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.info.bg}; // 悬停时改变背景色
transform: translateY(-1px); // 轻微上移效果
}
}
&cancelled,
@@ -167,6 +235,13 @@ export const taskStatusLabel = css`
color: ${themeVars.color.warning.text};
border: 1px solid ${themeVars.color.warning.border};
background: ${themeVars.color.warning.bg};
border-radius: 25px; // 增加圆角
padding: 5px 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.warning.bg}; // 悬停时改变背景色
transform: translateY(-1px); // 轻微上移效果
}
}
}
`;
@@ -181,10 +256,16 @@ export const repoLabel = css`
color: ${themeVars.color.text.light.num1};
font-size: 12px;
font-weight: 500;
padding: 3px 6px;
padding: 4px 8px; // 增加内边距
border-radius: 25px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色
transform: translateY(-1px); // 轻微上移效果
}
}
}
.org-visibility span.ui.basic.label {
font-size: 14px;
}
`;
`;

57
styles/public/menu.ts
View File

@@ -24,25 +24,30 @@ export const verticalMenu = css`
font-weight: 700;
background: unset;
margin-bottom: 0.5rem;
padding: 8px 12px; // 增加内边距
}
// 菜单项被悬停时的背景色, 限制a标签, 避免为子菜单多余渲染
a.item:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: 8px; // 增加圆角
transform: translateX(2px); // 轻微右移效果
}
// 菜单项
.item,
.item > summary {
font-size: 1.1rem;
background: unset;
border-radius: ${otherThemeVars.border.radius};
padding: 6px 8px;
border-radius: 8px; // 增加圆角
padding: 8px 12px; // 增加内边距
margin: 2px 0; // 增加垂直间距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
}
// Actions 菜单的圆角覆盖
> .item,
> .active.item {
&:first-child,
&:last-child {
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
}
}
// 去除菜单项的边框线
@@ -53,7 +58,8 @@ export const verticalMenu = css`
.active.item,
.active.item > summary {
font-weight: 600;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
background-color: ${themeVars.color.active}; // 添加背景色
}
// 添加伪元素, 用于指示当前激活的菜单项
.active.item:after {
@@ -65,16 +71,19 @@ export const verticalMenu = css`
// 子菜单的标题
summary:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: 8px; // 增加圆角
}
// 子菜单的选项
.menu .item {
color: ${themeVars.color.text.self};
padding: 6px 12px 6px 24px; // 增加左侧内边距
}
// 子菜单的选项被激活
&:has(.active.item) {
> summary {
font-weight: 600;
background: ${themeVars.color.active};
border-radius: 8px; // 增加圆角
// 收回状态,悬停色
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
@@ -88,6 +97,7 @@ export const verticalMenu = css`
.active.item {
background: ${themeVars.color.active};
font-weight: 400;
border-radius: 8px; // 增加圆角
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
@@ -96,6 +106,7 @@ export const verticalMenu = css`
&[open] {
> summary {
background: unset;
border-radius: 8px 8px 0 0; // 顶部圆角
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
@@ -117,15 +128,20 @@ export const menu = css`
.ui.menu a.item,
.ui.secondary.pointing.menu a.item,
.ui.secondary.menu .dropdown.item {
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
}
}
// 一些水平小型菜单的颜色更改
.small-menu-items .item {
background-color: ${themeVars.color.body} !important;
border-radius: 8px; // 增加圆角
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateY(-1px); // 轻微上移效果
}
}
// 一些菜单的悬浮色更改
@@ -134,8 +150,11 @@ export const menu = css`
.ui.secondary.pointing.menu {
.item,
.active.item {
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
}
}
}
@@ -148,9 +167,12 @@ export const secondaryMenu = css`
padding: 0px 12px;
height: 32px;
font-weight: 500;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
}
a.item:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
}
}
// 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
@@ -162,20 +184,26 @@ export const secondaryMenu = css`
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
margin-bottom: 0.5rem !important;
border-radius: 8px; // 增加圆角
}
}
.item {
font-weight: 400; // 二级导航栏不需要加粗
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
}
.active.item,
.dropdown.item,
.link.item,
a.item {
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
color: ${themeVars.color.text.self};
svg {
margin-right: 8px;
}
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
.active.item {
// 取消激活时的下划线, 需要为透明, 保持间距
@@ -184,7 +212,7 @@ export const secondaryMenu = css`
span:after {
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
bottom: calc(50% - 1.8rem);
height: 2px;
position: absolute;
@@ -210,16 +238,18 @@ export const paginationMenu = css`
gap: 4px;
min-height: fit-content;
.item {
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
min-width: 32px;
min-height: 32px;
height: 32px;
justify-content: center;
// 避免一些 hover 效果调整内容
padding: 5px 10px !important;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&.active {
background: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
transform: translateY(-1px); // 轻微上移效果
}
// 设置透明边框线避免 hover 时元素大小变化
&:not(.active) {
@@ -227,6 +257,7 @@ export const paginationMenu = css`
&:hover {
background: unset;
border-color: ${themeVars.color.secondary.self};
transform: translateY(-1px); // 轻微上移效果
}
}
&.navigation {
@@ -240,6 +271,9 @@ export const paginationMenu = css`
svg {
margin-top: 2px;
}
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
}
}
@@ -262,15 +296,19 @@ export const smallCompactMenu = css`
gap: 8px;
height: 32px;
min-height: 32px !important;
padding: 4px; // 增加内边距
border-radius: 12px; // 增加圆角
> .item {
background: unset !important;
border: 1px solid ${themeVars.color.hover.self};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
padding: 6px 12px !important;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&.active {
background: ${themeVars.color.menu} !important;
border-color: ${themeVars.color.light.border};
font-weight: 600;
transform: translateY(-1px); // 轻微上移效果
}
&::before {
display: none;
@@ -290,9 +328,10 @@ export const smallCompactMenu = css`
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateY(-1px); // 轻微上移效果
}
}
}
}
}
`;
`;

30
styles/public/modal.ts
View File

@@ -5,15 +5,23 @@ 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,
@@ -21,9 +29,27 @@ export const modal = css`
.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 12px;
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;
}
`;

49
styles/public/other.ts
View File

@@ -5,6 +5,11 @@ 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; // 增加底部间距
}
`;
@@ -14,3 +19,47 @@ export const star = css`
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; // 移除顶部边框
}
`;

84
styles/public/radius.ts
View File

@@ -63,6 +63,14 @@ export const radius = css`
.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) {
border-radius: ${otherThemeVars.border.radius};
}
// 增加特殊组件的圆角
.ui.card,
.ui.cards > .card,
.ui.attached.segment,
.ui.tabular.menu {
border-radius: 12px; // 卡片使用更大的圆角
}
`;
// 全部圆角替换(原CSS带!important)
@@ -86,6 +94,12 @@ export const radiusImportant = css`
border-radius: ${otherThemeVars.border.radius} !important;
}
}
// 卡片圆角
.ui.card,
.ui.cards > .card {
border-radius: 12px !important;
}
`;
// 上半部分圆角替换
@@ -111,6 +125,14 @@ export const radiusTop = css`
.ui.modal > :first-child:not(.icon):not(.dimmer) {
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
}
// 卡片顶部圆角
.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child,
.ui.segment > .ui.tabular.menu,
.header-wrapper .ui.tabular.menu {
border-radius: 12px 12px 0 0;
}
`;
// 上半部分圆角替换(原CSS带!important)
@@ -123,6 +145,12 @@ export const radiusTopImportant = css`
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
}
}
// 卡片顶部圆角
.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child {
border-radius: 12px 12px 0 0 !important;
}
`;
// 下半部分圆角替换
@@ -159,6 +187,12 @@ export const radiusBottom = css`
.ui.segment:has(+ .ui.segment:not(.attached)) {
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
}
// 卡片底部圆角
.ui.card > .content:last-child,
.ui.cards > .card > .content:last-child {
border-radius: 0 0 12px 12px;
}
`;
// 下半部分圆角替换(原CSS带!important)
@@ -167,6 +201,12 @@ export const radiusBottomImportant = css`
.ui.active.upward.selection.dropdown {
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} !important;
}
// 卡片底部圆角
.ui.card > .content:last-child,
.ui.cards > .card > .content:last-child {
border-radius: 0 0 12px 12px !important;
}
`;
// 左半部分圆角替换
@@ -212,6 +252,12 @@ export const radiusTopLeft = css`
.ui.table > thead > tr:first-child > th:first-child {
border-top-left-radius: ${otherThemeVars.border.radius};
}
// 卡片左上圆角
.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child {
border-top-left-radius: 12px;
}
`;
// 右上圆角替换
@@ -220,6 +266,12 @@ export const radiusTopRight = css`
.ui.category.search > .results .category:first-child .name + .result {
border-top-right-radius: ${otherThemeVars.border.radius};
}
// 卡片右上圆角
.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child {
border-top-right-radius: 12px;
}
`;
// 左下圆角替换
@@ -232,6 +284,12 @@ export const radiusBottomLeft = css`
}
}
}
// 卡片左下圆角
.ui.card > .content:last-child,
.ui.cards > .card > .content:last-child {
border-bottom-left-radius: 12px;
}
`;
// 右下圆角替换
@@ -248,6 +306,12 @@ export const radiusBottomRight = css`
.ui.category.search > .results .category:last-child .result:last-child {
border-bottom-right-radius: ${otherThemeVars.border.radius};
}
// 卡片右下圆角
.ui.card > .content:last-child,
.ui.cards > .card > .content:last-child {
border-bottom-right-radius: 12px;
}
`;
// only-child 顺序最后生效
@@ -269,6 +333,12 @@ export const onlyChild = css`
}
}
}
// 独立卡片圆角
.ui.card:not(.attached),
.ui.cards > .card:not(.attached) {
border-radius: 12px;
}
`;
// 修复一些情况下圆角边框线被覆盖的问题
@@ -283,6 +353,12 @@ export const fixRadius = css`
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
}
// 修复卡片圆角问题
.ui.card,
.ui.cards > .card {
overflow: hidden;
}
`;
// 修复一些根本无法理解的生效顺序
@@ -291,4 +367,10 @@ export const fixWhyRadius = css`
.ui.secondary.menu .item {
border-radius: ${otherThemeVars.border.radius};
}
`;
// 卡片圆角
.ui.card,
.ui.cards > .card {
border-radius: 12px;
}
`;

48
styles/public/text.ts
View File

@@ -8,6 +8,12 @@ export const red = css`
color: ${themeVars.github.fgColor.done} !important;
}
}
// 增强红色文本的视觉效果
.text.red {
color: ${themeVars.color.red.self} !important;
font-weight: 500; // 增加字体粗细
}
`;
export const grey = css`
@@ -16,4 +22,46 @@ export const grey = css`
.text.grey {
color: ${themeVars.color.text.light.num1} !important;
}
// 增强灰色文本的视觉效果
.text.grey {
font-weight: 400; // 设置字体粗细
}
`;
// 增加更多文本颜色样式
export const textColors = css`
.text.blue {
color: ${themeVars.color.blue.self} !important;
font-weight: 500; // 增加字体粗细
}
.text.green {
color: ${themeVars.color.green.self} !important;
font-weight: 500; // 增加字体粗细
}
.text.yellow {
color: ${themeVars.color.yellow.self} !important;
font-weight: 500; // 增加字体粗细
}
.text.purple {
color: ${themeVars.color.purple.self} !important;
font-weight: 500; // 增加字体粗细
}
.text.orange {
color: ${themeVars.color.orange.self} !important;
font-weight: 500; // 增加字体粗细
}
// 链接文本样式
a.text {
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
opacity: 0.8; // 悬停时降低不透明度
text-decoration: underline; // 悬停时添加下划线
}
}
`;

23
styles/public/tippy.ts
View File

@@ -1,19 +1,24 @@
import { animationDown } from "src/core/theme";
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
// 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
export const tippyBox = css`
.tippy-box {
margin-top: -3px;
border-radius: ${otherThemeVars.border.radius};
border-radius: 12px; // 增加圆角
overflow: hidden;
animation: ${animationDown};
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
// 克隆菜单和PR提示框为 default
&[data-theme="default"],
// 带标题的提示框 (Runner信息)
&[data-theme="box-with-header"] {
border: unset;
box-shadow: ${themeVars.github.shadow.floating.small};
&:hover {
transform: translateY(-2px); // 轻微上移效果
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 增强阴影
}
}
&[data-theme="default"] {
border-radius: 12px;
@@ -23,6 +28,8 @@ export const tippyBox = css`
background-color: ${themeVars.color.menu};
.ui.attached.header {
background-color: ${themeVars.color.body};
padding: 12px 16px; // 增加内边距
font-weight: 600; // 增加字体粗细
}
}
}
@@ -31,9 +38,12 @@ export const tippyBox = css`
.tippy-content {
padding: 8px;
.item {
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
padding: 6px 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateX(2px); // 轻微右移效果
}
}
}
@@ -43,8 +53,11 @@ export const tippyBox = css`
.tippy-content {
font-size: 12px;
font-weight: 400;
padding: 4px 8px;
padding: 6px 12px; // 增加内边距
border-radius: 8px; // 增加圆角
background-color: ${themeVars.color.menu}; // 添加背景色
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
}
}
}
`;
`;

76
styles/public/transition.ts
View File

@@ -1,6 +1,6 @@
import { css } from "src/types/vars";
// 简单的渐变过渡
// 增强的渐变过渡，参考 Nano-Banana-AI-Image-Editor 的设计
export const transition = css`
// 差异对比的代码折叠按钮
.code-expander-button,
@@ -36,7 +36,7 @@ export const transition = css`
.ui.selection.active.dropdown:hover .menu,
.ui.vertical.menu .header.item,
.ui.secondary.menu .item {
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
// Gitea 表单元素原始过渡覆盖
input,
@@ -56,6 +56,74 @@ export const transition = css`
.ui.form input[type="text"],
.ui.form input[type="file"],
.ui.form input[type="url"] {
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
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;
}
`;