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

113
styles/components/filelist.ts
View File

@@ -1,4 +1,4 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { css, themeVars } from "src/types/vars";
// 文件列表页面下的分支按钮
export const branchButton = css`
@@ -11,6 +11,13 @@ export const branchButton = css`
margin-top: 1px;
margin-left: auto;
margin-right: 20px; // gitea 有 RSS 留出足够的空间
border-radius: 25px; // 增加圆角
padding: 4px 10px; // 增加内边距
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
}
}
@@ -21,10 +28,18 @@ export const syncFork = css`
.page-content.repository.file.list {
.repo-home-filelist > .ui.message {
background: ${themeVars.color.box.header};
padding: 8px 8px 8px 16px;
padding: 12px 16px; // 增加内边距
margin: 16px 0px;
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.ui.button {
min-width: 96px;
border-radius: 8px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
}
}
@@ -35,10 +50,14 @@ export const repoFiles = css`
// 文件列表和提交列表的按钮组
.repo-button-row {
margin: 16px 0;
gap: 8px; // 增加间距
}
.repository.file.list {
#repo-files-table {
margin: 16px 0;
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
overflow: hidden; // 隐藏溢出内容
// 头部最后一次提交
.repo-file-line {
padding-right: 16px;
@@ -81,7 +100,11 @@ export const repoFiles = css`
// 文件列表
.repo-file-item {
.repo-file-cell {
height: 40px;
height: 44px; // 增加高度
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.opaque};
}
&.name {
display: flex;
align-items: center;
@@ -99,6 +122,7 @@ export const repoFiles = css`
background: ${themeVars.color.body};
min-height: 48px;
padding: 0px 8px !important;
border-radius: 12px 12px 0 0; // 增加圆角
svg {
color: ${themeVars.color.text.light.num1};
}
@@ -106,14 +130,16 @@ export const repoFiles = css`
padding: 8px !important;
// 伪元素宽度等于按钮宽度而不是父元素宽度
position: relative;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
}
&:after {
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
border-radius: 8px; // 增加圆角
bottom: -7px;
left: 0;
height: 2px;
@@ -125,9 +151,13 @@ export const repoFiles = css`
text-decoration-line: none;
}
}
.file-header-right:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: ${otherThemeVars.border.radius};
.file-header-right {
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: 8px; // 增加圆角
}
}
}
}
@@ -185,6 +215,8 @@ export const repoFileView = css`
// 固定头部
position: sticky;
top: 0;
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
&:after {
content: "";
position: absolute;
@@ -203,6 +235,7 @@ export const repoFileView = css`
// 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除
position: sticky;
top: 0;
border-radius: 12px 12px 0 0; // 增加圆角
&:after {
content: "";
position: absolute;
@@ -214,6 +247,11 @@ export const repoFileView = css`
}
.ui.compact.icon.button {
border: 0;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
}
.view-file-tree-items {
@@ -228,7 +266,7 @@ export const repoFileView = css`
align-content: center;
background: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.secondary.self};
border-radius: ${otherThemeVars.border.radius};
border-radius: 12px; // 增加圆角
margin: 16px 0;
height: 46px;
min-height: 46px;
@@ -236,8 +274,15 @@ export const repoFileView = css`
position: sticky;
top: 0;
z-index: 1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.ui.button {
min-height: 32px;
border-radius: 8px; // 增加圆角
font-weight: 500; // 增加字体粗细
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
// 打开文件树按钮
.repo-view-file-tree-toggle-show {
@@ -245,10 +290,12 @@ export const repoFileView = css`
border-color: #0000;
padding: 0;
min-width: 32px;
border-radius: 8px; // 增加圆角
}
// 分支选择按钮
.branch-dropdown-button {
padding: 0 12px;
border-radius: 8px; // 增加圆角
}
// 路径
.repo-path {
@@ -274,9 +321,11 @@ export const repoFileView = css`
h4.file-header {
padding: 8px 12px !important;
position: sticky;
border-radius: 12px 12px 0 0; // 增加圆角
// 重叠边框线, 避免过粗
top: 45px;
z-index: 1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
.file-header-left {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
@@ -290,6 +339,11 @@ export const repoFileView = css`
height: 28px;
font-size: 12px;
padding: 0 8px;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
transform: translateY(-1px); // 轻微上移效果
}
}
}
// 右侧操作按钮
@@ -300,20 +354,23 @@ export const repoFileView = css`
border: 1px solid ${themeVars.color.light.border};
height: 28px;
padding: 0 8px;
border-radius: 8px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
svg {
color: ${themeVars.color.text.light.num1};
}
&:first-of-type {
border-top-left-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-top-left-radius: 8px; // 增加圆角
border-bottom-left-radius: 8px; // 增加圆角
}
&:last-of-type {
border-top-right-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
border-top-right-radius: 8px; // 增加圆角
border-bottom-right-radius: 8px; // 增加圆角
}
&:hover {
background: ${themeVars.color.hover.self};
color: ${themeVars.color.text.light.num1};
transform: translateY(-1px); // 轻微上移效果
}
}
}
@@ -321,9 +378,11 @@ export const repoFileView = css`
}
// 头部提交信息
.ui.segment#repo-file-commit-box {
padding: 8px 12px;
padding: 12px 16px; // 增加内边距
margin-bottom: 16px !important;
min-height: 46px;
border-radius: 12px; // 增加圆角
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
> .latest-commit {
gap: 8px;
.commit-summary {
@@ -357,6 +416,20 @@ export const repoFileViewMobile = css`
}
}
}
// 移动端优化
@media (max-width: 767.98px) {
.repo-view-container .repo-view-file-tree-container {
height: auto;
position: static;
}
.repo-view-content .repo-button-row {
flex-wrap: wrap;
height: auto;
padding: 8px 12px;
}
}
`;
// 仓库代码布局调整, 侧边栏宽度调整
@@ -393,6 +466,8 @@ export const repoSidebarTop = css`
}
.repo-description {
color: ${themeVars.color.text.self};
font-size: 14px; // 增加字体大小
line-height: 1.5; // 增加行高
}
#repo-topics {
margin: 10px 0px !important;
@@ -428,6 +503,12 @@ export const repoSidebarBottom = css`
}
.flex-item {
padding: 16px 0;
border-radius: 12px; // 增加圆角
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
&:hover {
background-color: ${themeVars.color.hover.opaque};
transform: translateY(-1px); // 轻微上移效果
}
.flex-item {
padding: 16px 0 0 0;
.flex-item-icon {
@@ -448,6 +529,7 @@ export const repoSidebarBottom = css`
.language-stats {
height: 8px;
margin-bottom: 0px;
border-radius: 4px; // 增加圆角
}
.language-stats-details .item {
font-size: 12px;
@@ -456,6 +538,7 @@ export const repoSidebarBottom = css`
height: 8px;
width: 8px;
margin-right: 8px;
border-radius: 50%; // 圆形图标
}
.tw-font-semibold {
color: ${themeVars.color.text.self};
@@ -464,4 +547,4 @@ export const repoSidebarBottom = css`
}
}
}
`;
`;