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

bannana v2

Browse Source
This commit is contained in:
User
2025-09-25 10:45:55 +08:00
parent a35a81009c
commit 12915214b6
2 changed files with 38 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
styles/components/heatmap.ts
View File

@@ -10,36 +10,35 @@ export const heatmap = css`
left: 25px + 20px; left: 25px + 20px;
bottom: 0 + 12px; bottom: 0 + 12px;
color: ${themeVars.color.text.light.num1}; color: ${themeVars.color.text.light.num1};
font-size: 12px; // 增加字体大小 font-size: 12px;
font-weight: 500; // 增加字体粗细 font-weight: 500;
} }
.total-contributions, .total-contributions,
.vch__legend-right { .vch__legend-right {
color: ${themeVars.color.text.light.num1}; color: ${themeVars.color.text.light.num1};
} }
.vch__container { .vch__container {
padding: 16px 24px; // 增加内边距 padding: 16px 24px;
box-shadow: ${themeVars.github.shadow.floating.small}; box-shadow: ${themeVars.github.shadow.floating.small};
border-radius: 12px; border-radius: 16px; // 增加圆角
background-color: ${themeVars.color.menu}; // 添加背景色 background-color: ${themeVars.color.menu};
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
// 覆盖热力图和图例的背景色 // 覆盖热力图和图例的背景色
.vch__day__square, .vch__day__square,
.vch__legend__wrapper rect { .vch__legend__wrapper rect {
// 圆角 // 圆角
rx: 3px; // 增加圆角 rx: 2px;
ry: 3px; // 增加圆角 ry: 2px;
// hover 时的圆角
border-radius: 1px; // 增加圆角
// 宽度和高度可以用来控制间隔 // 宽度和高度可以用来控制间隔
width: 11px; // 增加宽度 width: 12px; // 增加宽度
height: 11px; // 增加高度 height: 12px; // 增加高度
// 边框 // 边框
outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0}; outline: 1px solid ${themeVars.github.contribution.default.borderColor.num0};
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
// 悬停效果 // 悬停效果
&:hover { &:hover {
transform: scale(1.2); // 轻微放大效果 outline: 2px solid ${themeVars.color.primary.self}; // 添加主色调边框
z-index: 10; // 确保悬停时在最上层
} }
&[style="fill: var(--color-secondary-alpha-60);"] { &[style="fill: var(--color-secondary-alpha-60);"] {
@@ -77,11 +76,12 @@ export const heatmap = css`
// 移动端优化 // 移动端优化
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
#user-heatmap .vch__container { #user-heatmap .vch__container {
padding: 12px 16px; // 调整内边距 padding: 12px 16px;
border-radius: 12px; // 调整圆角
.vch__day__square, .vch__day__square,
.vch__legend__wrapper rect { .vch__legend__wrapper rect {
width: 9px; // 调整宽度 width: 10px; // 调整宽度
height: 9px; // 调整高度 height: 10px; // 调整高度
} }
} }
} }
@@ -103,7 +103,6 @@ export const activity = css`
} }
&:hover { &:hover {
background-color: ${themeVars.color.hover.opaque}; background-color: ${themeVars.color.hover.opaque};
transform: translateX(2px); // 轻微右移效果
} }
> .flex-item-main { > .flex-item-main {
gap: 8px !important; gap: 8px !important;

36
styles/public/tippy.ts
View File

@@ -5,10 +5,10 @@ import { css, themeVars } from "src/types/vars";
export const tippyBox = css` export const tippyBox = css`
.tippy-box { .tippy-box {
margin-top: -3px; margin-top: -3px;
border-radius: 12px; // 增加圆角 border-radius: 16px; // 增加圆角
overflow: hidden; overflow: hidden;
animation: ${animationDown}; animation: ${animationDown};
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
// 克隆菜单和PR提示框为 default // 克隆菜单和PR提示框为 default
&[data-theme="default"], &[data-theme="default"],
// 带标题的提示框 (Runner信息) // 带标题的提示框 (Runner信息)
@@ -16,20 +16,21 @@ export const tippyBox = css`
border: unset; border: unset;
box-shadow: ${themeVars.github.shadow.floating.small}; box-shadow: ${themeVars.github.shadow.floating.small};
&:hover { &:hover {
transform: translateY(-2px); // 轻微上移效果 transform: translateY(-4px); // 增强上移效果
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 增强阴影 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 6px 8px rgba(0, 0, 0, 0.1); // 增强阴影
} }
} }
&[data-theme="default"] { &[data-theme="default"] {
border-radius: 12px; border-radius: 16px;
} }
&[data-theme="box-with-header"] { &[data-theme="box-with-header"] {
.tippy-content { .tippy-content {
background-color: ${themeVars.color.menu}; background-color: ${themeVars.color.menu};
.ui.attached.header { .ui.attached.header {
background-color: ${themeVars.color.body}; background-color: ${themeVars.color.body};
padding: 12px 16px; // 增加内边距 padding: 16px 20px; // 增加内边距
font-weight: 600; // 增加字体粗细 font-weight: 600;
border-bottom: 1px solid ${themeVars.color.light.border}; // 添加底部边框
} }
} }
} }
@@ -38,12 +39,14 @@ export const tippyBox = css`
.tippy-content { .tippy-content {
padding: 8px; padding: 8px;
.item { .item {
border-radius: 8px; // 增加圆角 border-radius: 10px; // 增加圆角
padding: 6px 12px; // 增加内边距 padding: 8px 16px; // 增加内边距
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); // 增强过渡效果
font-weight: 500; // 增加字体粗细
&:hover { &:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover}; background-color: ${themeVars.github.control.transparent.bgColor.hover};
transform: translateX(2px); // 轻微右移效果 transform: translateX(4px); // 增强右移效果
color: ${themeVars.color.primary.self}; // 改变文字颜色
} }
} }
} }
@@ -52,11 +55,12 @@ export const tippyBox = css`
&[data-theme="tooltip"] { &[data-theme="tooltip"] {
.tippy-content { .tippy-content {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 500; // 增加字体粗细
padding: 6px 12px; // 增加内边距 padding: 8px 16px; // 增加内边距
border-radius: 8px; // 增加圆角 border-radius: 10px; // 增加圆角
background-color: ${themeVars.color.menu}; // 添加背景色 background-color: ${themeVars.color.menu};
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); // 增强阴影
color: ${themeVars.color.text.self}; // 确保文字颜色
} }
} }
} }