bannana v2

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

View File

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