2026-04-18 17:16:49 +08:00
|
|
|
page { background:#0c0e12; color:#f6f6fc; }
|
2026-04-19 16:39:02 +08:00
|
|
|
.page { min-height:100vh; background:#0c0e12; box-sizing:border-box; }
|
|
|
|
|
.content { height:calc(100vh - 120rpx); padding:32rpx; box-sizing:border-box; }
|
|
|
|
|
.config-content { padding-bottom:180rpx; }
|
|
|
|
|
.heading { margin:16rpx 0 24rpx; }
|
|
|
|
|
.title { display:block; font-size:52rpx; font-weight:800; }
|
|
|
|
|
.subtitle { display:block; margin-top:10rpx; font-size:28rpx; color:#aaabb0; line-height:1.6; }
|
|
|
|
|
.config-card { margin-top:24rpx; padding:28rpx; border-radius:28rpx; background:rgba(29,32,37,.65); border:1rpx solid rgba(255,255,255,.08); }
|
|
|
|
|
.section-title { display:block; font-size:32rpx; font-weight:700; margin-bottom:20rpx; }
|
|
|
|
|
.chip-row { display:flex; flex-wrap:wrap; gap:16rpx; }
|
|
|
|
|
.chip { padding:18rpx 28rpx; border-radius:9999rpx; background:#23262c; color:#aaabb0; }
|
|
|
|
|
.chip.active { background:#c19cff; color:#000; }
|
|
|
|
|
.two-grid { display:grid; grid-template-columns:1fr 1fr; gap:18rpx; }
|
|
|
|
|
.option-box, .mode-item { padding:24rpx; border-radius:24rpx; background:#111318; border:1rpx solid rgba(255,255,255,.08); text-align:center; color:#aaabb0; min-height:96rpx; display:flex; align-items:center; justify-content:center; }
|
|
|
|
|
.option-box.active, .mode-item.active { color:#c19cff; border-color:#c19cff; }
|
|
|
|
|
.mode-list { display:flex; flex-direction:column; gap:18rpx; }
|
|
|
|
|
.switch-row, .range-row { display:flex; justify-content:space-between; align-items:center; padding:12rpx 0; }
|
|
|
|
|
.switch { padding:6rpx 16rpx; border-radius:9999rpx; background:#23262c; color:#aaabb0; }
|
|
|
|
|
.switch.on { background:#c19cff; color:#000; }
|
|
|
|
|
.accent { color:#c19cff; font-weight:700; }
|
|
|
|
|
.start-btn { margin:32rpx 0 48rpx; padding:28rpx 0; border-radius:9999rpx; background:linear-gradient(90deg,#c19cff,#9146ff); color:#fff; font-size:34rpx; font-weight:800; box-shadow:0 0 20rpx rgba(193,156,255,.28); }
|
|
|
|
|
.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; justify-content:space-around; align-items:center; padding:20rpx 24rpx 40rpx; background:rgba(12,14,18,.7); backdrop-filter:blur(32rpx); border-top:1rpx solid rgba(255,255,255,.08); border-radius:32rpx 32rpx 0 0; box-shadow:0 -10rpx 40rpx rgba(0,0,0,.4); }
|
|
|
|
|
.nav-item { display:flex; flex-direction:column; align-items:center; gap:6rpx; color:#aaabb0; }
|
|
|
|
|
.nav-item.active { color:#00e3fd; transform:translateY(-6rpx); }
|
|
|
|
|
.nav-icon { width:56rpx; height:56rpx; border-radius:9999rpx; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; }
|
|
|
|
|
.nav-label { font-size:20rpx; }
|
