broccoli
242c52af43
- 自定义 TabBar 增加弯月面聚光带与银丝边缘，玻璃参数升级 - 全局返回按钮与 ScrollTopMask 返回按钮升级 135° 液态玻璃渐变 - 激活态升级为玻璃透镜，浅色/深色主题同步 - 新增 tools/liquid-glass.test.mjs 回归断言 - 同步构建产物 dist/，并合并此前未提交的 .claude 配置与 dist 变更
140 lines
3.0 KiB
SCSS
140 lines
3.0 KiB
SCSS
.scroll-top-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 40;
|
|
pointer-events: none;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.scroll-top-blur,
|
|
.scroll-top-gradient {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.scroll-top-gradient {
|
|
height: 80%;
|
|
}
|
|
|
|
.scroll-top-title {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
letter-spacing: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.scroll-top-back {
|
|
position: absolute;
|
|
left: 30rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
pointer-events: auto;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.55) 0%,
|
|
rgba(255, 255, 255, 0.28) 45%,
|
|
rgba(255, 255, 255, 0.42) 100%
|
|
);
|
|
backdrop-filter: blur(24px) saturate(1.7) brightness(1.05);
|
|
-webkit-backdrop-filter: blur(24px) saturate(1.7) brightness(1.05);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
|
box-shadow:
|
|
inset 0 2rpx 3rpx rgba(255, 255, 255, 0.65),
|
|
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.06),
|
|
inset 0 0 0 1rpx rgba(255, 255, 255, 0.18),
|
|
0 12rpx 40rpx rgba(0, 0, 0, 0.18),
|
|
0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.theme-dark .scroll-top-back {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.16) 0%,
|
|
rgba(255, 255, 255, 0.06) 45%,
|
|
rgba(255, 255, 255, 0.12) 100%
|
|
);
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
box-shadow:
|
|
inset 0 2rpx 3rpx rgba(255, 255, 255, 0.22),
|
|
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.28),
|
|
inset 0 0 0 1rpx rgba(255, 255, 255, 0.1),
|
|
0 12rpx 40rpx rgba(0, 0, 0, 0.5),
|
|
0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.scroll-top-back-arrow {
|
|
font-size: 44rpx;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.scroll-top-blur-mid {
|
|
backdrop-filter: blur(12rpx);
|
|
-webkit-backdrop-filter: blur(12rpx);
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 0.8) 42%,
|
|
rgba(0, 0, 0, 0) 76%
|
|
);
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 0.8) 42%,
|
|
rgba(0, 0, 0, 0) 76%
|
|
);
|
|
}
|
|
|
|
.scroll-top-blur-soft {
|
|
backdrop-filter: blur(6rpx);
|
|
-webkit-backdrop-filter: blur(6rpx);
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 0.65) 52%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 0.65) 52%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
}
|
|
|
|
.theme-light .scroll-top-gradient {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(250, 247, 242, 0.94) 0%,
|
|
rgba(250, 247, 242, 0.9) 50%,
|
|
rgba(250, 247, 242, 0.58) 78%,
|
|
rgba(250, 247, 242, 0) 100%
|
|
);
|
|
}
|
|
|
|
.theme-dark .scroll-top-gradient {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(25, 25, 25, 0.94) 0%,
|
|
rgba(25, 25, 25, 0.9) 50%,
|
|
rgba(25, 25, 25, 0.58) 78%,
|
|
rgba(25, 25, 25, 0) 100%
|
|
);
|
|
}
|