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

289
styles/components/issue.ts
View File

@@ -1,4 +1,4 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
import { activeItemAfterStyle } from "styles/public/menu";
// 工单&PR 列表
@@ -14,11 +14,12 @@ export const issueList = css`
background-color: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.light.border};
border-bottom: 0;
border-top-left-radius: ${otherThemeVars.border.radius};
border-top-right-radius: ${otherThemeVars.border.radius};
height: 48px;
padding: 8px;
border-top-left-radius: 12px; // 增加圆角
border-top-right-radius: 12px; // 增加圆角
height: 56px; // 增加高度
padding: 12px 16px; // 增加内边距
margin-top: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.issue-list-toolbar-left {
// 复选框
input {
@@ -29,19 +30,23 @@ export const issueList = css`
border: 0;
> .item {
background: unset !important;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
color: ${themeVars.color.text.light.num1};
padding: 0px 8px;
height: 30px;
padding: 0px 16px; // 增加内边距
height: 36px; // 增加高度
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:before {
display: none;
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
transform: translateY(-1px); // 轻微上移效果
}
&.active {
color: ${themeVars.color.text.self};
font-weight: 700;
background: ${themeVars.color.active} !important; // 添加背景色
}
}
}
@@ -52,8 +57,14 @@ export const issueList = css`
color: ${themeVars.color.text.light.num1};
}
> .ui.button {
padding: 0 12px;
height: 32px;
padding: 0 16px; // 增加内边距
height: 36px; // 增加高度
border-radius: 8px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
}
}
@@ -68,17 +79,19 @@ export const issueList = css`
.page-content.repository.issue-list {
.flex-list#issue-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: 12px; // 增加圆角
border-bottom-right-radius: 12px; // 增加圆角
> .flex-item {
align-items: center;
padding: 0;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:last-child {
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: 12px; // 增加圆角
border-bottom-right-radius: 12px; // 增加圆角
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
transform: translateX(2px); // 轻微右移效果
}
> .flex-item-icon {
display: flex;
@@ -97,11 +110,11 @@ export const issueList = css`
> .flex-item-main {
gap: 4px;
.flex-item-header {
padding-top: 8px;
padding-top: 12px; // 增加内边距
}
.flex-item-body {
font-size: 12px;
padding-bottom: 8px;
padding-bottom: 12px; // 增加内边距
}
}
> .flex-item-trailing {
@@ -114,14 +127,19 @@ export const issueList = css`
// [TODO] 暂时排除项目的列表
.page-content.repository.milestones:not(.projects) .milestone-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: 12px; // 增加圆角
border-bottom-right-radius: 12px; // 增加圆角
.milestone-card {
padding: 8px 16px 10px 16px;
padding: 16px 20px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.opaque};
transform: translateY(-1px); // 轻微上移效果
}
.milestone-header {
h3 {
font-size: 16px;
font-weight: 500;
font-size: 18px; // 增加字体大小
font-weight: 600; // 增加字体粗细
}
div span {
font-size: 14px;
@@ -146,31 +164,53 @@ export const issueListMobile = css`
.page-content.repository.issue-list {
.issue-list-toolbar {
height: auto;
padding: 12px; // 调整内边距
}
}
}
// 移动端优化
@media (max-width: 767.98px) {
.issue-list-toolbar-left > .ui.compact.menu > .item,
.issue-list-toolbar-right > .ui.menu > .item {
padding: 0px 12px; // 调整内边距
height: 32px; // 调整高度
}
.issue-list-toolbar-right > .ui.menu > .ui.button {
padding: 0 12px; // 调整内边距
height: 32px; // 调整高度
}
}
`;
// 置顶 Issue
export const issuePins = css`
#issue-pins {
gap: 12px;
margin-bottom: 16px;
gap: 16px; // 增加间距
margin-bottom: 20px; // 增加底部间距
.issue-card {
padding: 16px 12px;
padding: 20px 16px; // 增加内边距
border-radius: 12px; // 增加圆角
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-2px); // 轻微上移效果
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 增强阴影
}
.content {
.issue-card-title {
font-size: 16px;
font-size: 18px; // 增加字体大小
font-weight: 600;
}
svg {
color: ${themeVars.color.text.light.num1};
height: 100%;
margin-right: 3px;
margin-right: 4px; // 增加右边距
}
.meta {
font-size: 12px;
padding-top: 4px;
padding-top: 6px; // 增加内边距
}
}
.issue-card-bottom {
@@ -187,20 +227,47 @@ export const button = css`
color: ${themeVars.github.fgColor.done};
background-color: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
border-radius: 8px; // 增加圆角
padding: 8px 16px; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.self};
transform: translateY(-1px); // 轻微上移效果
}
&:active {
animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果
}
}
// 重新开启按钮
.ui.basic.primary.button#status-button {
color: ${themeVars.github.fgColor.success};
border-radius: 8px; // 增加圆角
padding: 8px 16px; // 增加内边距
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); // 点击脉冲效果
}
}
}
// 工单&PR标题右侧按钮
.repository.view.issue .issue-title-buttons > .ui.button {
padding: 0 12px;
height: 32px;
padding: 0 16px; // 增加内边距
height: 36px; // 增加高度
border-radius: 8px; // 增加圆角
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); // 点击脉冲效果
}
}
`;
@@ -210,37 +277,55 @@ export const babel = css`
// 时间线打开状态标签
&.tw-bg-green {
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
border-radius: 25px; // 增加圆角
}
// 时间线关闭状态标签
&.tw-bg-red {
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-radius: 25px; // 增加圆角
}
// 时间线合并状态标签
&.tw-bg-purple {
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-radius: 25px; // 增加圆角
}
}
}
// 工单&PR状态标签
.ui.label.issue-state-label {
border-radius: 25px !important;
padding: 6px 12px; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&.green {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
border-color: ${themeVars.github.bgColor.success.emphasis} !important;
&:hover {
opacity: 0.9; // 悬停时降低不透明度
transform: translateY(-1px); // 轻微上移效果
}
}
&.red {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
&:hover {
opacity: 0.9; // 悬停时降低不透明度
transform: translateY(-1px); // 轻微上移效果
}
}
&.purple {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
&:hover {
opacity: 0.9; // 悬停时降低不透明度
transform: translateY(-1px); // 轻微上移效果
}
}
}
`;
@@ -251,16 +336,22 @@ export const prBranch = css`
#issue-list .flex-item-body .branches .branch {
color: ${themeVars.github.fgColor.accent};
background-color: ${themeVars.github.bgColor.accent.muted};
border-radius: ${otherThemeVars.border.radius};
border-radius: 25px; // 增加圆角
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
font-size: 12px;
padding: 0 5px;
padding: 4px 10px; // 增加内边距
line-height: 20px;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
transform: translateY(-1px); // 轻微上移效果
}
}
.repository.view.issue .pull-desc code {
padding-top: 3px;
padding-bottom: 3px;
padding-top: 4px; // 增加内边距
padding-bottom: 4px; // 增加内边距
a:hover {
text-decoration-line: none;
}
@@ -282,12 +373,13 @@ export const comment = css`
&:target {
.comment-container {
border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
box-shadow: 0 0 0 2px ${themeVars.color.primary.self} !important; // 增强焦点效果
}
}
.comment-header {
padding: 4px 4px 4px 16px;
min-height: 38px;
padding: 8px 8px 8px 16px; // 增加内边距
min-height: 42px; // 增加最小高度
border-radius: 12px 12px 0 0; // 增加圆角
}
.comment-header-right {
> .item,
@@ -297,8 +389,13 @@ export const comment = css`
> .ui.label {
background-color: initial;
font-size: 12px;
height: 20px;
padding: 0 6px;
height: 24px; // 增加高度
padding: 0 8px; // 增加内边距
border-radius: 25px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
// 隐藏顶部菜单的表情按钮
// 无法使用此样式, 评论无表情时底部的表情按钮元素不会渲染, 这是一个先有鸡还是先有蛋的问题
@@ -314,9 +411,12 @@ export const comment = css`
// 评论菜单的删除按钮
.menu .item.delete-comment {
color: ${themeVars.color.red.self};
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.red.badge.bg} !important;
color: ${themeVars.color.red.light};
transform: translateX(2px); // 轻微右移效果
}
}
}
@@ -327,12 +427,17 @@ export const comment = css`
align-items: center;
justify-content: center;
background: ${themeVars.color.button};
border-radius: 25px;
border-radius: 25px; // 增加圆角
border: 1px solid ${themeVars.color.light.border};
color: ${themeVars.color.text.light.num1};
padding: 0px 8px !important;
height: 28px;
width: 28px;
padding: 0px 10px !important; // 增加内边距
height: 32px; // 增加高度
width: 32px; // 增加宽度
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.color.hover.self};
transform: translateY(-1px); // 轻微上移效果
}
}
// 底部表情栏
.bottom-reactions {
@@ -340,9 +445,12 @@ export const comment = css`
background-color: unset !important;
border-radius: 25px;
border-color: ${themeVars.color.light.border};
padding: 4px 10px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.reaction.hoverBg} !important;
border-color: ${themeVars.color.light.border};
transform: translateY(-1px); // 轻微上移效果
}
.reaction {
font-size: 12px;
@@ -350,7 +458,7 @@ export const comment = css`
.reaction-count {
color: ${themeVars.color.text.light.self};
font-weight: 500;
margin-left: 0;
margin-left: 4px; // 增加左边距
}
}
// 显示表情菜单按钮
@@ -370,6 +478,8 @@ export const commentForm = css`
&::after {
display: none;
}
border-radius: 12px; // 增加圆角
padding: 16px; // 增加内边距
}
`;
@@ -383,6 +493,14 @@ export const dropdown = css`
content: "";
${activeItemAfterStyle}
}
.item {
padding: 8px 12px; // 增加内边距
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateX(2px); // 轻微右移效果
}
}
}
}
`;
@@ -393,15 +511,16 @@ export const prMerge = css`
// 头像
.timeline-avatar {
color: ${themeVars.color.white} !important;
border-radius: ${otherThemeVars.border.radius};
width: 40px;
height: 40px;
border-radius: 12px; // 增加圆角
width: 48px; // 增加宽度
height: 48px; // 增加高度
display: flex;
align-items: center;
justify-content: center;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
svg {
width: 24px;
height: 24px;
width: 28px; // 增加宽度
height: 28px; // 增加高度
}
// 可以合并
&.green {
@@ -432,14 +551,18 @@ export const prMerge = css`
}
}
}
&:hover {
transform: scale(1.05); // 轻微放大效果
}
}
// 检查状态
.commit-status-panel {
.commit-status-header {
background: ${themeVars.color.body};
padding: 16px;
font-size: 16px;
padding: 20px; // 增加内边距
font-size: 18px; // 增加字体大小
font-weight: 600;
border-radius: 12px 12px 0 0; // 增加圆角
.ui.right {
color: ${themeVars.color.text.light.num1};
font-size: 14px;
@@ -450,18 +573,20 @@ export const prMerge = css`
.commit-status-list {
background: ${themeVars.color.menu};
.commit-status-item {
border-radius: ${otherThemeVars.border.radius};
padding: 2px 8px;
margin: 0px 8px;
height: 37px;
border-radius: 8px; // 增加圆角
padding: 6px 12px; // 增加内边距
margin: 0px 12px; // 增加边距
height: 42px; // 增加高度
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:first-child {
margin-top: 8px;
margin-top: 12px; // 增加边距
}
&:last-child {
margin-bottom: 8px;
margin-bottom: 12px; // 增加边距
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
transform: translateX(2px); // 轻微右移效果
}
}
}
@@ -469,9 +594,10 @@ export const prMerge = css`
// 合并信息和操作
.merge-section {
color: ${themeVars.color.text.light.num1};
padding: 16px;
padding: 20px; // 增加内边距
display: grid;
gap: 8px;
gap: 12px; // 增加间距
border-radius: 0 0 12px 12px; // 增加圆角
&.no-header {
&::before,
&::after {
@@ -493,17 +619,18 @@ export const timeline = css`
}
.timeline-item,
.timeline-item-group {
padding: 16px 0;
padding: 20px 0; // 增加内边距
// 事件
&.event {
// 修复覆盖后的位置问题
padding-left: 15px;
.avatar {
width: 20px;
height: 20px;
width: 24px; // 增加宽度
height: 24px; // 增加高度
}
.badge {
border: 2px solid ${themeVars.color.body};
border-radius: 50%; // 圆形徽章
}
// 仅匹配只有 badge
.badge:not([class*=" "]) {
@@ -517,7 +644,7 @@ export const timeline = css`
&.commits-list {
// 每个提交之间的间隔
.flex-text-block {
padding-top: 4px;
padding-top: 6px; // 增加内边距
}
.badge svg {
color: ${themeVars.color.text.light.num1};
@@ -538,7 +665,7 @@ export const timeline = css`
`;
const sidebarPadding = {
padding: "4px 8px",
padding: "8px 12px", // 增加内边距
};
// 侧边栏
@@ -551,6 +678,8 @@ export const issueSidebar = css`
border: 0;
font-size: 12px;
padding: 0;
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.ui.button {
font-size: 12px;
}
@@ -577,7 +706,7 @@ export const issueSidebar = css`
}
// 允许维护者编辑
> .ui.checkbox {
margin: 4px 8px;
margin: 8px 12px; // 增加边距
strong {
font-weight: 400;
}
@@ -585,11 +714,14 @@ export const issueSidebar = css`
.issue-sidebar-combo {
.ui.dropdown > a.fixed-text.muted {
align-items: center;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
text-decoration-line: none;
height: 28px;
height: 32px; // 增加高度
padding: 0 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
}
}
.ui.list {
@@ -600,11 +732,14 @@ export const issueSidebar = css`
// 时间追踪
> div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
align-items: center;
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
text-decoration-line: none;
height: 28px;
height: 32px; // 增加高度
padding: 0 12px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateY(-1px); // 轻微上移效果
}
}
// 选中日期颜色
@@ -612,16 +747,21 @@ export const issueSidebar = css`
color: ${themeVars.color.text.self};
}
.divider {
margin: 12px 0 12px 8px;
width: calc(100% - 16px);
margin: 16px 0 16px 12px; // 增加边距
width: calc(100% - 24px); // 调整宽度
}
// 订阅按钮
.ui.watching .ui.button {
padding: 0px 8px;
height: 28px;
padding: 0px 12px; // 增加内边距
height: 32px; // 增加高度
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
svg {
margin: 0 !important;
}
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
// PIN 按钮
.form-fetch-action.single-button-form .ui.button,
@@ -634,8 +774,11 @@ export const issueSidebar = css`
// 好像是浏览器 BUG, 最后不生效, 必须 !important
margin: 0 !important;
justify-content: left;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateX(2px); // 轻微右移效果
}
}
.ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
@@ -654,4 +797,4 @@ export const issueSidebar = css`
}
}
}
`;
`;