47 lines
3.5 KiB
CSS
47 lines
3.5 KiB
CSS
/* 计算器分步模式（配合 wizard.js，11-04）。用页面的 --c 主题色；--h 标题色、--m 弱文字色。 */
|
||
.wz .wz-off,.wz-hold,html.wz-q #tx-rel,html.wz-q #tx-cm,html.wz-q .tc-in{display:none!important}
|
||
.wz:not(.wz-res) .res,.wz:not(.wz-res) .wz-again,.wz.wz-res .wz-top,.wz.wz-res .wz-bot{display:none!important}
|
||
.wz{min-height:300px}
|
||
.wz-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
|
||
.wz-n{font-size:12.5px;font-weight:800;color:var(--c);letter-spacing:.5px}
|
||
.wz-dots{display:flex;gap:5px}
|
||
.wz-dots i{width:7px;height:7px;border-radius:99px;background:#ECE6E8;transition:width .25s,background .25s}
|
||
.wz-dots i.d{background:var(--c);opacity:.45}
|
||
.wz-dots i.c{width:20px;background:var(--c)}
|
||
/* 题目：标签放大成问题 */
|
||
.wz .wz-in{animation:wzIn .32s ease both}
|
||
.wz .fld.wz-in{margin-top:10px}
|
||
.wz .fld.wz-in>.lb,.wz .fld.wz-in>label.lb,.wz .fld.wz-in>span.lb{display:block;margin-bottom:12px;font-size:20px;font-weight:900;line-height:1.4;color:var(--h)}
|
||
.wz .fld.wz-in>.lb small,.wz .fld.wz-in>.lb small{display:block;margin-top:3px;font-size:13px;font-weight:500;color:var(--m)}
|
||
.wz .fld.two.wz-in .lb{font-size:16px;font-weight:800;color:var(--h)}
|
||
.wz .tabs.wz-in{margin-top:10px}
|
||
.wz .tabs.wz-in::before{content:attr(data-wzq);display:block;margin-bottom:12px;font-size:20px;font-weight:900;line-height:1.4;color:var(--h)}
|
||
.calc.wz .tabs.wz-in{display:flex;flex-direction:column;gap:10px;padding:0;border-radius:0;background:none}
|
||
.calc.wz .tabs.wz-in button{flex:none;height:54px;border-radius:14px;border:1.5px solid #EDE7EA;background:#fff;box-shadow:none;font-size:16px;font-weight:700;color:var(--h)}
|
||
.calc.wz .tabs.wz-in button.on{border-color:var(--c);background:var(--cbg);color:var(--c)}
|
||
.wz .fld.wz-in .seg button{min-height:46px;font-size:15px}
|
||
.wz .fld.wz-in .in,.wz .fld.wz-in .inp{min-height:50px;font-size:17px}
|
||
/* 底部按钮 */
|
||
.wz-bot{margin-top:22px}
|
||
.wz-err{min-height:18px;margin-bottom:6px;font-size:13px;font-weight:700;color:#E5484D;text-align:center}
|
||
.wz-err:empty{min-height:0;margin:0}
|
||
.wz-act{display:flex;gap:10px}
|
||
.wz-prev{flex:0 0 auto;height:48px;padding:0 16px;border-radius:99px;background:#F5F2F3;color:var(--m);font-size:14.5px;font-weight:700}
|
||
.wz-next{flex:1;height:48px;border-radius:99px;background:var(--c);color:#fff;font-size:16px;font-weight:800;box-shadow:0 8px 18px -8px var(--c)}
|
||
.wz-next.go{background:linear-gradient(135deg,var(--c2,var(--c)),var(--c))}
|
||
.wz-prev[hidden]{display:none}
|
||
.wz-tip{margin-top:8px;font-size:12px;color:var(--m);text-align:center}
|
||
.wz-tip:empty{display:none}
|
||
.wz-shake .wz-in{animation:wzShake .35s}
|
||
/* 结果屏 */
|
||
.wz.wz-res{min-height:0}
|
||
.wz-pop{animation:wzPop .5s cubic-bezier(.3,1.4,.5,1) both}
|
||
.wz-again{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:14px}
|
||
.wz-re{height:42px;padding:0 22px;border-radius:99px;border:1.5px solid var(--c);color:var(--c);font-size:14.5px;font-weight:800;background:#fff}
|
||
.wz-re{display:inline-flex;align-items:center;gap:5px}.wz-re svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||
.wz-again small{font-size:12px;color:var(--m)}
|
||
@keyframes wzIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
|
||
@keyframes wzPop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
|
||
@keyframes wzShake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
|
||
@media (prefers-reduced-motion:reduce){.wz .wz-in,.wz-pop,.wz-shake .wz-in{animation:none}}
|