style: 调整界面元素的尺寸和间距以优化布局
This commit is contained in:
+61
-132
@@ -284,12 +284,12 @@ input,
|
||||
|
||||
.top-hud {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 110px minmax(0, 1fr) auto;
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: 240px 100px minmax(0, 1fr) auto;
|
||||
gap: 0.65rem;
|
||||
align-items: stretch;
|
||||
border-color: var(--panel-border);
|
||||
border-radius: 22px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 18px;
|
||||
padding: 0.45rem;
|
||||
}
|
||||
|
||||
.brand-block,
|
||||
@@ -308,13 +308,13 @@ input,
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(215, 138, 51, 0.32);
|
||||
background: rgba(215, 138, 51, 0.11);
|
||||
color: var(--accent);
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
}
|
||||
@@ -417,15 +417,15 @@ input,
|
||||
.game-grid {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 304px minmax(0, 1fr) 396px;
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: 280px minmax(0, 1fr) 360px;
|
||||
gap: 0.65rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-route {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 0.95fr);
|
||||
gap: 0.75rem;
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.route-summary-card {
|
||||
@@ -598,8 +598,8 @@ input,
|
||||
|
||||
.panel-command {
|
||||
display: grid;
|
||||
grid-template-rows: 248px auto minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.viewport-stage,
|
||||
@@ -795,12 +795,12 @@ input,
|
||||
|
||||
.command-dock {
|
||||
display: grid;
|
||||
grid-template-columns: 240px minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: 200px minmax(0, 1fr) auto;
|
||||
gap: 0.65rem;
|
||||
align-items: center;
|
||||
border-radius: 18px;
|
||||
border-radius: 16px;
|
||||
border-color: var(--panel-border);
|
||||
padding: 0.65rem 0.8rem;
|
||||
padding: 0.5rem 0.7rem;
|
||||
}
|
||||
|
||||
.operator-card {
|
||||
@@ -812,14 +812,14 @@ input,
|
||||
.operator-emblem {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 14px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(215, 138, 51, 0.38);
|
||||
background: rgba(215, 138, 51, 0.12);
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.operator-copy span {
|
||||
@@ -851,11 +851,11 @@ input,
|
||||
.dock-metrics span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 2.1rem;
|
||||
padding: 0 0.85rem;
|
||||
min-height: 1.8rem;
|
||||
padding: 0 0.7rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -1194,9 +1194,7 @@ input,
|
||||
background: rgba(215, 138, 51, 0.26);
|
||||
}
|
||||
|
||||
.game-grid {
|
||||
grid-template-columns: 272px minmax(0, 1fr) 352px;
|
||||
}
|
||||
/* Consolidated into first .game-grid rule */
|
||||
|
||||
.panel-route.expedition-panel,
|
||||
.panel-command.theater-panel,
|
||||
@@ -1205,7 +1203,7 @@ input,
|
||||
}
|
||||
|
||||
.panel-route.expedition-panel {
|
||||
grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 0.78fr);
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.expedition-head,
|
||||
@@ -1299,7 +1297,7 @@ input,
|
||||
}
|
||||
|
||||
.theater-panel {
|
||||
grid-template-rows: 294px auto auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
.theater-scene {
|
||||
@@ -1766,72 +1764,7 @@ input,
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.app-shell,
|
||||
.auth-shell,
|
||||
.new-game-shell,
|
||||
.loading-shell {
|
||||
padding: 0.55rem;
|
||||
}
|
||||
|
||||
.status-strip,
|
||||
.combat-actions,
|
||||
.overlay-summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.theater-scene {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.theater-scene-copy,
|
||||
.theater-scene-side {
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.theater-scene {
|
||||
display: grid;
|
||||
align-content: end;
|
||||
gap: 0.7rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.theater-scene::after {
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.expedition-status-grid,
|
||||
.theater-intel-grid,
|
||||
.theater-intel-strip,
|
||||
.theater-action-zone,
|
||||
.survivor-metrics-strip,
|
||||
.rig-column,
|
||||
.survivor-supply-grid,
|
||||
.equipment-metrics-row,
|
||||
.equipment-grid,
|
||||
.ready-pack-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.inventory-card,
|
||||
.recipe-card,
|
||||
.inventory-overlay-grid,
|
||||
.blueprint-overlay-grid,
|
||||
.mission-overlay-grid,
|
||||
.log-overlay-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.auth-hero,
|
||||
.new-game-card {
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.expedition-route-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
/* Mobile breakpoint removed - game only targets PC and tablet */
|
||||
|
||||
:root {
|
||||
--hud-frame-wide: url('/generated/hud/chrome/panel-wide.png');
|
||||
@@ -2062,11 +1995,7 @@ input,
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.game-grid {
|
||||
grid-template-columns: 286px minmax(0, 1fr) 370px;
|
||||
gap: 0.85rem;
|
||||
height: calc(100dvh - 176px);
|
||||
}
|
||||
/* Consolidated into first .game-grid rule */
|
||||
|
||||
.panel-route.expedition-panel,
|
||||
.panel-command.theater-panel,
|
||||
@@ -2426,7 +2355,7 @@ input,
|
||||
grid-template-rows: 1fr auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(215, 138, 51, 0.2);
|
||||
}
|
||||
|
||||
@@ -2452,11 +2381,11 @@ input,
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.3fr) 260px;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem;
|
||||
grid-template-columns: minmax(0, 1.3fr) 220px;
|
||||
gap: 0.65rem;
|
||||
padding: 0.75rem;
|
||||
align-content: end;
|
||||
min-height: 200px;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.theater-titlebar {
|
||||
@@ -2655,7 +2584,7 @@ input,
|
||||
.theater-intel-strip {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 0.7fr));
|
||||
gap: 0.5rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.theater-intel-block {
|
||||
@@ -2842,16 +2771,16 @@ input,
|
||||
|
||||
.expedition-route-card {
|
||||
display: grid;
|
||||
grid-template-columns: 72px minmax(0, 1fr);
|
||||
gap: 0.65rem;
|
||||
grid-template-columns: 64px minmax(0, 1fr);
|
||||
gap: 0.55rem;
|
||||
width: 100%;
|
||||
padding: 0.6rem;
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
|
||||
rgba(8, 7, 6, 0.48);
|
||||
color: var(--text);
|
||||
border-radius: 16px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
transition: border-color 150ms ease, transform 150ms ease;
|
||||
}
|
||||
@@ -2881,8 +2810,8 @@ input,
|
||||
}
|
||||
|
||||
.expedition-route-card .route-card-thumb {
|
||||
min-height: 80px;
|
||||
border-radius: 12px;
|
||||
min-height: 64px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@@ -2930,9 +2859,9 @@ input,
|
||||
|
||||
.expedition-status-card {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
padding: 0.85rem;
|
||||
border-radius: 16px;
|
||||
gap: 0.55rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(9, 8, 7, 0.48);
|
||||
}
|
||||
@@ -2973,8 +2902,8 @@ input,
|
||||
.equipment-terminal {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto auto auto;
|
||||
gap: 0.65rem;
|
||||
padding: 0.85rem;
|
||||
gap: 0.55rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.equipment-terminal-head {
|
||||
@@ -3023,7 +2952,7 @@ input,
|
||||
.equipment-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.equipment-slot-card {
|
||||
@@ -3125,7 +3054,7 @@ input,
|
||||
|
||||
.warning-terminal {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.warning-terminal-head {
|
||||
@@ -3229,9 +3158,9 @@ input,
|
||||
|
||||
.ready-pack-frame {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 14px;
|
||||
gap: 0.45rem;
|
||||
padding: 0.65rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: rgba(9, 8, 7, 0.4);
|
||||
}
|
||||
@@ -3279,13 +3208,13 @@ input,
|
||||
.quick-access-slot {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.45rem;
|
||||
border-radius: 12px;
|
||||
gap: 0.15rem;
|
||||
padding: 0.35rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
background: rgba(8, 7, 6, 0.48);
|
||||
color: var(--text);
|
||||
min-height: 68px;
|
||||
min-height: 56px;
|
||||
transition: border-color 150ms ease;
|
||||
}
|
||||
|
||||
@@ -3327,12 +3256,12 @@ input,
|
||||
.stash-slot {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 10px;
|
||||
gap: 0.15rem;
|
||||
padding: 0.3rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: rgba(8, 7, 6, 0.4);
|
||||
min-height: 54px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.stash-slot span {
|
||||
|
||||
Reference in New Issue
Block a user