page { --app-viewport-height: 100vh; --app-safe-top: env(safe-area-inset-top, 0px); --app-safe-bottom: env(safe-area-inset-bottom, 0px); --app-touch-min: 44px; background: $paper; color: $ink; font-family: "STKaiti", "KaiTi", serif } @supports (height: 100dvh) { page { --app-viewport-height: 100dvh; } } view:not(.page-header-slot):has(> .page-header-slot) { position: relative; z-index: 31; } .page-shell { min-height: 100vh; box-sizing: border-box; background: $paper; } .paper-card { background: $paper-white; border: 1rpx solid $gold-soft; border-radius: 24rpx; box-sizing: border-box; } .section-title { color: $ink; font-size: 34rpx; font-weight: 700; letter-spacing: 2rpx; } .muted-copy { color: $ink-muted; font-size: 26rpx; line-height: 1.7; } .primary-button { display: flex; align-items: center; justify-content: center; min-height: 92rpx; border: 0; border-radius: 14rpx; background: $brand-red; color: #fff8ec; font-size: 31rpx; font-weight: 700; letter-spacing: 3rpx; } .secondary-button { display: flex; align-items: center; justify-content: center; min-height: 88rpx; border: 1rpx solid $gold; border-radius: 14rpx; background: transparent; color: $brand-red; font-size: 29rpx; font-weight: 600; } // 认证页的视觉由现有卷轴与文字类负责;这里是原生 button 的唯一重置 owner。 // 保留可见焦点环,让 H5 键盘用户能确认当前位置,同时不改动 App 触摸态。 .auth-plain-button { box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: normal; } .auth-plain-button::after { border: 0; } .auth-plain-button:focus-visible { outline: 2px solid #9f170f; outline-offset: 2px; } .auth-page.auth-page .auth-plain-button { min-width: 48px; min-height: 48px; } // App 端原生 button 在 disabled 时会自行注入浅色底,认证页的文字按钮不能 // 继承这一默认控件外观。禁用态由各页面的文字颜色表达,不再出现白色方块。 .auth-page.auth-page .auth-plain-button[disabled] { background: transparent !important; opacity: 1; }