style: 顶栏推进按钮印章化(止/缓/速/疾/月)

- 取代散乱 unicode(‖▸▸▸↦):汉字单字印钮——止(暂停)/缓/速/疾(三档速度)/月(推进)
- 印章风:34x26 圆角印钮、墨底金边、hover 描边浮起、按压回落;
  选中态金底渐变;「月」钮加宽+金字强调,与速度组区分
- build 通过(937 测试保持全绿)
This commit is contained in:
2026-08-23 12:35:42 +08:00
parent f17d856f98
commit 607624695d
2 changed files with 37 additions and 16 deletions
+5 -5
View File
@@ -56,11 +56,11 @@ export default function GameScreen() {
{s.year}{s.month} · {fam.generation} · {fam.reputation}
</div>
<div className="speed-ctl">
<button className={`speed-btn ${speed === 0 ? 'sel' : ''}`} onClick={() => setSpeed(0)}></button>
<button className={`speed-btn ${speed === 1 ? 'sel' : ''}`} onClick={() => setSpeed(1)}></button>
<button className={`speed-btn ${speed === 2 ? 'sel' : ''}`} onClick={() => setSpeed(2)}></button>
<button className={`speed-btn ${speed === 3 ? 'sel' : ''}`} onClick={() => setSpeed(3)}></button>
<button className="speed-btn" title="推进一月" onClick={() => void advance()}></button>
<button className={`speed-btn ${speed === 0 ? 'sel' : ''}`} title="暂停时间"></button>
<button className={`speed-btn ${speed === 1 ? 'gel' : ''}`} title="缓行(约3月/秒)" onClick={() => setSpeed(1)}></button>
<button className={`speed-btn ${speed === 2 ? 'gel' : ''}`} title="常速(约半秒/月)" onClick={() => setSpeed(2)}></button>
<button className={`speed-btn ${speed === 3 ? 'gel' : ''}`} title="疾进(约1月/秒)" onClick={() => setSpeed(3)}></button>
<button className="speed-btn tick-now" title="推进一月" onClick={() => void advance()}></button>
</div>
<div className="ress">
{RES_INFO.map((r) => (
+32 -11
View File
@@ -559,28 +559,49 @@ body {
.speed-ctl {
display: flex;
align-items: center;
gap: 1px;
gap: 4px;
}
.speed-btn {
width: 30px;
height: 30px;
background: rgba(10, 8, 5, 0.6);
border: 1px solid #33291a;
color: #8f8264;
width: 34px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #241a0e, #1a130a);
border: 1px solid #4a3a22;
color: #9f8f6c;
font-size: 0.8rem;
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
border-radius: 3px;
box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.06), 0 2px 5px rgba(0, 0, 0, 0.45);
transition: all 0.15s;
user-select: none;
}
.speed-btn:hover {
border-color: #8a6d2f;
color: #d8c392;
border-color: #5b4a2e;
transform: translateY(-1px);
}
.speed-btn.sel {
.speed-btn:active {
transform: translateY(0);
}
.speed-btn.sel,
.speed-btn.gel {
background: linear-gradient(180deg, #4a3620, #352718);
border-color: var(--gold);
color: var(--gold-soft);
box-shadow: inset 0 0 8px rgba(179, 145, 62, 0.3);
color: #e8cf96;
box-shadow: inset 0 0 8px rgba(179, 145, 62, 0.35), 0 2px 5px rgba(0, 0, 0, 0.45);
}
.speed-btn.tick-now {
width: 40px;
border-color: #7a5a26;
color: #d8ad6e;
font-weight: 700;
}
.speed-btn.tick-now:hover {
border-color: var(--gold-soft);
color: #f0d9a8;
}
.ress {