mirror of
https://github.com/tiennm99/sokoban.git
synced 2026-09-13 14:20:13 +00:00
tiennm99
b8db785422
Tighten everything that fights the board for pixels in landscape: - #app top padding 12 -> 6 (saves 6px vertical). - .game gap 10 -> 6 (saves 4px between HUD and board). - D-pad arrows 48 -> 44px and action button height 48 -> 44px (still above the 44pt HIG minimum). Dock width shrinks 160 -> 150px and internal d-pad height 102 -> 94px. - Dock now justify-content: flex-end so the action stack and d-pad cluster at the bottom of the column (natural thumb arc), leaving empty space above instead of mid-column. computeTileSize landscape branch: chromeY 76 -> 64, chromeX 240 -> 186 to match the slimmer chrome reservation. Net board win on 800x360 phones: ~47 -> 50 tile (+6%); on Pixel 7 landscape Microban 1 already hits the 56px cap and stays there. Tall puzzles still bound by viewport height — no CSS-only path past that without scroll. All changes gated behind @media (pointer: coarse) and (orientation: landscape). Portrait and desktop untouched.
154 lines
3.2 KiB
CSS
154 lines
3.2 KiB
CSS
/* Nord palette + resets + global layout */
|
|
|
|
:root {
|
|
--bg: #2E3440;
|
|
--bg-deep: #1c2230;
|
|
--panel: #3B4252;
|
|
--panel-hover: #434C5E;
|
|
--border: #4C566A;
|
|
--floor: #4C566A;
|
|
--floor-alt: #434C5E;
|
|
--wall: #1B1F27;
|
|
--wall-edge: #2E3440;
|
|
--player: #88C0D0;
|
|
--player-edge: #5E81AC;
|
|
--box: #D08770;
|
|
--box-edge: #BF616A;
|
|
--box-done: #A3BE8C;
|
|
--box-done-edge: #6A8E5C;
|
|
--target: #EBCB8B;
|
|
--text: #ECEFF4;
|
|
--text-muted: #D8DEE9;
|
|
--text-dim: #81A1C1;
|
|
--accent: #88C0D0;
|
|
--success: #A3BE8C;
|
|
--danger: #BF616A;
|
|
|
|
--tile: 48px;
|
|
|
|
--radius-sm: 6px;
|
|
--radius: 10px;
|
|
--radius-lg: 16px;
|
|
|
|
--font: 'Trebuchet MS', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100%;
|
|
background: radial-gradient(circle at 30% 20%, var(--bg) 0%, var(--bg-deep) 60%, #0f131c 100%);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
-webkit-font-smoothing: antialiased;
|
|
/* Mobile: kill pull-to-refresh, long-press selection, callout, tap flash. */
|
|
overscroll-behavior: contain;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
body {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
#app {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: safe center;
|
|
padding: 24px;
|
|
}
|
|
|
|
/* Touch devices: drop bottom padding (mobile dock owns its own
|
|
safe-area inset) and slim lateral padding so the board has more room. */
|
|
@media (pointer: coarse) {
|
|
#app { padding: 12px 12px 0; }
|
|
}
|
|
|
|
/* Landscape phones get even tighter top padding so the board has more
|
|
vertical room (every px counts when the viewport is only ~360-412 tall). */
|
|
@media (pointer: coarse) and (orientation: landscape) {
|
|
#app { padding: 6px 12px 0; }
|
|
}
|
|
|
|
button {
|
|
font-family: inherit;
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* Shared modal scaffolding. Specific dialogs add their own padding/sizing. */
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(12, 16, 24, 0.72);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
padding: 16px;
|
|
animation: dialog-fade-in 180ms ease;
|
|
}
|
|
|
|
.dialog {
|
|
background: var(--panel);
|
|
border: 2px solid var(--accent);
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
@keyframes dialog-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
h1, h2, h3, p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Reusable screen wrapper every view uses */
|
|
.screen {
|
|
width: 100%;
|
|
max-width: 960px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.screen-title {
|
|
font-size: 48px;
|
|
letter-spacing: 2px;
|
|
font-weight: 800;
|
|
color: var(--text);
|
|
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.screen-subtitle {
|
|
font-size: 18px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.hint {
|
|
font-size: 14px;
|
|
color: var(--text-dim);
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.credit {
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
margin-top: 8px;
|
|
}
|