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

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); // 轻微放大效果
}
}
}
`;
`;