codex-bot
5a16113a6d
Verify mini program and deploy preview / verify-deploy (push) Successful in 25s
29 lines
3.3 KiB
CSS
29 lines
3.3 KiB
CSS
.arena { height: 100vh; overflow: hidden; padding: 24rpx 28rpx; background: #fff; }
|
|
.topline { display: flex; align-items: center; justify-content: space-between; font-size: 23rpx; font-weight: 800; }
|
|
.progress { margin-top: 14rpx; height: 7rpx; overflow: hidden; background: #e8e8e8; }
|
|
.progress-in { height: 100%; background: #111; transition: width .25s; }
|
|
.mode-tabs { display: flex; width: 430rpx; height: 62rpx; margin: 24rpx auto; padding: 5rpx; border-radius: 10rpx; background: #f1f1f1; }
|
|
.mode { flex: 1; display: grid; place-items: center; border-radius: 7rpx; color: #777; font-size: 23rpx; }
|
|
.mode.active { background: #111; color: #fff; font-weight: 800; }
|
|
.single-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16rpx; height: calc(100vh - 190rpx); max-height: 850rpx; }
|
|
.choice { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 28rpx; color: #fff; transition: transform .2s cubic-bezier(.2,.9,.2,1), opacity .2s; }
|
|
.choice:active { transform: scale(.94) rotate(-1deg); opacity: .8; }
|
|
.choice-a { background: #f34b30; }
|
|
.choice-b { background: #3564dd; }
|
|
.choice-index { position: absolute; left: 24rpx; top: 24rpx; width: 48rpx; height: 48rpx; line-height: 48rpx; text-align: center; border: 2rpx solid rgba(255,255,255,.6); border-radius: 50%; font-size: 21rpx; }
|
|
.choice-name { font-size: 45rpx; line-height: 1.1; font-weight: 950; word-break: break-all; }
|
|
.tap-hint { position: absolute; left: 28rpx; bottom: 28rpx; font-size: 21rpx; opacity: .75; }
|
|
.versus { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 66rpx; height: 66rpx; border: 5rpx solid #111; border-radius: 50%; background: #fff; font-size: 21rpx; font-weight: 950; }
|
|
.swipe-stage { perspective: 1000rpx; }
|
|
.swipe-stage .choice-a { transform: rotate(-2deg); transform-origin: bottom right; }
|
|
.swipe-stage .choice-b { transform: rotate(2deg); transform-origin: bottom left; }
|
|
.multi-stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12rpx; height: calc(100vh - 190rpx); max-height: 850rpx; }
|
|
.mini-match { position: relative; display: grid; grid-template-columns: 1fr 42rpx 1fr; align-items: stretch; min-height: 0; overflow: hidden; border: 2rpx solid #111; }
|
|
.mini-choice { display: grid; place-items: center; padding: 16rpx; text-align: center; font-size: 27rpx; font-weight: 850; background: #fff; transition: .18s; }
|
|
.mini-choice:active { color: #fff; background: #111; transform: scale(.95); }
|
|
.mini-vs { display: grid; place-items: center; background: #111; color: #fff; font-size: 17rpx; font-weight: 900; }
|
|
.mini-winner { grid-column: 1 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: winner-in .35s cubic-bezier(.2,1.3,.4,1); background: #111; color: #fff; font-size: 34rpx; font-weight: 950; }
|
|
.mini-winner text { margin-bottom: 10rpx; color: #d9ff54; font-size: 18rpx; letter-spacing: 4rpx; }
|
|
.saving { position: fixed; z-index: 10; left: 50%; bottom: 50rpx; transform: translateX(-50%); padding: 20rpx 30rpx; border-radius: 99rpx; background: #111; color: #fff; font-size: 23rpx; }
|
|
@keyframes winner-in { from { opacity: 0; transform: scale(.65) rotate(-4deg); } to { opacity: 1; transform: scale(1); } }
|