feat: add scroll top mask, unify page top spacing and docs

2026-08-08 03:57:47 +08:00
parent 38045073b0
commit a3c3005c04
73 changed files with 1350 additions and 169 deletions
@@ -0,0 +1,120 @@
+.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;
+  bottom: 38%;
+  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: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(32px) saturate(1.2);
+  -webkit-backdrop-filter: blur(32px) saturate(1.2);
+  border: 1rpx solid rgba(255, 255, 255, 0.55);
+  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.18), 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+}
+
+.theme-dark .scroll-top-back {
+  background: rgba(25, 25, 25, 0.55);
+  border-color: rgba(255, 255, 255, 0.14);
+  box-shadow: 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%
+  );
+}