Blizzard
bbc34c5bd6
- nav-bar 加 tone="brand"：透明底 + 深棕字，压在色带上；默认分支不动 - 首页/记录页顶部加 252rpx 品牌橘色带（下沿大圆角，z-index:-1 垫背后）， 盖住 nav + 切换条，门面卡在色带下方 - 切换条压在色带上：chip 半透明白 + 深棕字，选中实白 - page 加 position:relative 供色带绝对定位锚定 - 新增 --band-a/--band-b/--band-ink token（取自 preview-v3 定稿） Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
44 lines
1.8 KiB
Plaintext
44 lines
1.8 KiB
Plaintext
:host{display:block}
|
|
|
|
/* 原来是一整条半透明色块，底边和页面渐变硬碰硬，屏幕上横着一道接缝。
|
|
改成上实下虚的渐变，并且用同一条 mask 把毛玻璃也一起淡出——
|
|
只淡化背景色而不淡化 blur 的话，接缝会从「色差」变成「糊边」，一样难看。 */
|
|
.nav-wrap{
|
|
position:fixed;top:0;left:0;right:0;z-index:100;
|
|
background:linear-gradient(180deg,
|
|
rgba(250,247,242,.94) 0%,
|
|
rgba(250,247,242,.88) 58%,
|
|
rgba(250,247,242,0) 100%);
|
|
backdrop-filter:blur(20rpx);
|
|
-webkit-backdrop-filter:blur(20rpx);
|
|
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
|
|
mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
|
|
}
|
|
.nav-inner{
|
|
position:relative;display:flex;align-items:center;justify-content:center;
|
|
}
|
|
.nav-title{
|
|
font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text);
|
|
letter-spacing:.5rpx;
|
|
max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
|
|
}
|
|
/* 返回键做成有边界的圆形，和右上角胶囊在视觉上对称 */
|
|
.nav-back{
|
|
position:absolute;left:var(--sp-3);top:50%;transform:translateY(-50%);
|
|
width:60rpx;height:60rpx;border-radius:50%;
|
|
display:flex;align-items:center;justify-content:center;
|
|
color:var(--text);background:rgba(255,255,255,.72);
|
|
box-shadow:0 4rpx 12rpx rgba(70,48,25,.06);
|
|
}
|
|
.nav-back:active{background:rgba(255,255,255,.95)}
|
|
|
|
/* tone="brand"：色带自己是实色，nav 不再铺奶白/毛玻璃/mask，文字换深棕。
|
|
只作用在带 tone-brand 的实例，默认分支纹丝不动 */
|
|
.nav-wrap.tone-brand{
|
|
background:none;
|
|
backdrop-filter:none;-webkit-backdrop-filter:none;
|
|
-webkit-mask-image:none;mask-image:none;
|
|
}
|
|
.nav-wrap.tone-brand .nav-title{color:var(--band-ink)}
|
|
.nav-wrap.tone-brand .nav-back{color:var(--band-ink);background:rgba(255,255,255,.5)}
|