style: 顶栏推进按钮印章化(止/缓/速/疾/月)
- 取代散乱 unicode(‖▸▸▸↦):汉字单字印钮——止(暂停)/缓/速/疾(三档速度)/月(推进) - 印章风:34x26 圆角印钮、墨底金边、hover 描边浮起、按压回落; 选中态金底渐变;「月」钮加宽+金字强调,与速度组区分 - build 通过(937 测试保持全绿)
This commit is contained in:
@@ -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
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user