broccoli
242c52af43
- 自定义 TabBar 增加弯月面聚光带与银丝边缘，玻璃参数升级 - 全局返回按钮与 ScrollTopMask 返回按钮升级 135° 液态玻璃渐变 - 激活态升级为玻璃透镜，浅色/深色主题同步 - 新增 tools/liquid-glass.test.mjs 回归断言 - 同步构建产物 dist/，并合并此前未提交的 .claude 配置与 dist 变更
1 line
6.3 KiB
Plaintext
1 line
6.3 KiB
Plaintext
.tab-bar-root{bottom:0;height:160rpx;left:0;pointer-events:none;position:fixed;right:0;z-index:999}.tab-bar-gradient{bottom:0;height:100%;left:0;position:absolute;right:0}.tab-bar-root.theme-light .tab-bar-gradient{background:-webkit-gradient(linear,left bottom,left top,from(hsla(38,44%,96%,.5)),color-stop(50%,hsla(38,44%,96%,.1)),color-stop(86%,hsla(38,44%,96%,0)));background:-webkit-linear-gradient(bottom,hsla(38,44%,96%,.5),hsla(38,44%,96%,.1) 50%,hsla(38,44%,96%,0) 86%);background:linear-gradient(0deg,hsla(38,44%,96%,.5) 0,hsla(38,44%,96%,.1) 50%,hsla(38,44%,96%,0) 86%)}.tab-bar-root.theme-dark .tab-bar-gradient{background:-webkit-gradient(linear,left bottom,left top,from(rgba(25,25,25,.5)),color-stop(50%,rgba(25,25,25,.1)),color-stop(86%,rgba(25,25,25,0)));background:-webkit-linear-gradient(bottom,rgba(25,25,25,.5),rgba(25,25,25,.1) 50%,rgba(25,25,25,0) 86%);background:linear-gradient(0deg,rgba(25,25,25,.5) 0,rgba(25,25,25,.1) 50%,rgba(25,25,25,0) 86%)}.custom-tab-bar{-ms-flex-pack:distribute;-ms-flex-align:center;-webkit-align-items:center;align-items:center;backdrop-filter:blur(32rpx) saturate(1.7) brightness(1.05);-webkit-backdrop-filter:blur(32rpx) saturate(1.7) brightness(1.05);background:hsla(0,0%,100%,.4);border:1rpx solid hsla(0,0%,100%,.14);border-radius:64rpx;bottom:36rpx;-webkit-box-shadow:0 24rpx 60rpx rgba(20,14,10,.22),0 4rpx 12rpx rgba(0,0,0,.08),inset 0 2rpx 0 hsla(0,0%,100%,.35);box-shadow:0 24rpx 60rpx rgba(20,14,10,.22),0 4rpx 12rpx rgba(0,0,0,.08),inset 0 2rpx 0 hsla(0,0%,100%,.35);-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:116rpx;-webkit-justify-content:space-around;justify-content:space-around;left:36rpx;overflow:hidden;pointer-events:auto;position:absolute;right:36rpx;z-index:1000}.custom-tab-bar.theme-dark{backdrop-filter:blur(32rpx) saturate(1.7) brightness(1.05);-webkit-backdrop-filter:blur(32rpx) saturate(1.7) brightness(1.05);background:rgba(25,25,25,.4);border-color:hsla(0,0%,100%,.1);-webkit-box-shadow:0 24rpx 60rpx rgba(0,0,0,.55),0 4rpx 12rpx rgba(0,0,0,.3),inset 0 2rpx 0 hsla(0,0%,100%,.12);box-shadow:0 24rpx 60rpx rgba(0,0,0,.55),0 4rpx 12rpx rgba(0,0,0,.3),inset 0 2rpx 0 hsla(0,0%,100%,.12)}.tab-bar-caustic{background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.32)),to(hsla(0,0%,100%,0)));background:-webkit-linear-gradient(top,hsla(0,0%,100%,.32),hsla(0,0%,100%,0));background:linear-gradient(180deg,hsla(0,0%,100%,.32),hsla(0,0%,100%,0));border-radius:64rpx 64rpx 0 0;-webkit-box-shadow:inset 0 1rpx 0 hsla(0,0%,100%,.55);box-shadow:inset 0 1rpx 0 hsla(0,0%,100%,.55);height:56rpx;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:2}.custom-tab-bar.theme-dark .tab-bar-caustic{background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.12)),to(hsla(0,0%,100%,0)));background:-webkit-linear-gradient(top,hsla(0,0%,100%,.12),hsla(0,0%,100%,0));background:linear-gradient(180deg,hsla(0,0%,100%,.12),hsla(0,0%,100%,0));-webkit-box-shadow:inset 0 1rpx 0 hsla(0,0%,100%,.22);box-shadow:inset 0 1rpx 0 hsla(0,0%,100%,.22)}.tab-bar-rim{background:-webkit-linear-gradient(315deg,hsla(0,0%,100%,.6),hsla(0,0%,100%,.18) 32%,hsla(0,0%,100%,.03) 68%,hsla(0,0%,100%,.24));background:linear-gradient(135deg,hsla(0,0%,100%,.6),hsla(0,0%,100%,.18) 32%,hsla(0,0%,100%,.03) 68%,hsla(0,0%,100%,.24));border-radius:inherit;bottom:0;left:0;-webkit-mask:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff)) content-box,-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff));-webkit-mask:-webkit-linear-gradient(#fff 0 0) content-box,-webkit-linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1rpx;pointer-events:none;position:absolute;right:0;top:0;z-index:3}.custom-tab-bar.theme-dark .tab-bar-rim{background:-webkit-linear-gradient(315deg,hsla(0,0%,100%,.34),hsla(0,0%,100%,.12) 32%,hsla(0,0%,100%,.02) 68%,hsla(0,0%,100%,.16));background:linear-gradient(135deg,hsla(0,0%,100%,.34),hsla(0,0%,100%,.12) 32%,hsla(0,0%,100%,.02) 68%,hsla(0,0%,100%,.16))}.tab-item{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;-webkit-justify-content:center;justify-content:center;max-width:160rpx;padding:0 12rpx;position:relative;z-index:10}.tab-indicator{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.16)));background:-webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,.16));background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.16));border:1rpx solid hsla(0,0%,100%,.25);border-radius:50rpx;bottom:6rpx;-webkit-box-shadow:inset 0 2rpx 4rpx hsla(0,0%,100%,.35),inset 0 -2rpx 4rpx rgba(0,0,0,.06),0 4rpx 10rpx rgba(0,0,0,.08);box-shadow:inset 0 2rpx 4rpx hsla(0,0%,100%,.35),inset 0 -2rpx 4rpx rgba(0,0,0,.06),0 4rpx 10rpx rgba(0,0,0,.08);height:100rpx;left:50%;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:120rpx}.custom-tab-bar.theme-dark .tab-indicator{background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.08)),to(hsla(0,0%,100%,.16)));background:-webkit-linear-gradient(top,hsla(0,0%,100%,.08),hsla(0,0%,100%,.16));background:linear-gradient(180deg,hsla(0,0%,100%,.08),hsla(0,0%,100%,.16));border-color:hsla(0,0%,100%,.18);-webkit-box-shadow:inset 0 2rpx 4rpx hsla(0,0%,100%,.12),inset 0 -2rpx 4rpx rgba(0,0,0,.3),0 4rpx 10rpx rgba(0,0,0,.2);box-shadow:inset 0 2rpx 4rpx hsla(0,0%,100%,.12),inset 0 -2rpx 4rpx rgba(0,0,0,.3),0 4rpx 10rpx rgba(0,0,0,.2)}.tab-icon-img{height:40rpx;margin-bottom:2rpx;opacity:.8;position:relative;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:40rpx;z-index:1}.tab-item.active .tab-icon-img{opacity:1;-webkit-transform:scale(1.08);-ms-transform:scale(1.08);transform:scale(1.08)}.tab-label{color:#8a7e76;font-size:20rpx;font-weight:700;line-height:22rpx;position:relative;-webkit-transition:color .2s;transition:color .2s;z-index:1}.custom-tab-bar.theme-dark .tab-label{color:#b3a79c}.tab-item.active .tab-label{color:#d96c6a}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#f09198} |