Ilia Denisov
4a0689a4ac
targetSdk 36 forces edge-to-edge, so the WebView draws behind the system bars. On Android WebView < 140, env(safe-area-inset-*) wrongly reports 0, so the app chrome (which only read env()) drew under the status bar (top nav untappable) and the gesture-nav home indicator (the game's centre Hint button intercepted; side buttons fine). Capacitor 8's SystemBars core plugin (built into @capacitor/core, insetsHandling:'css' by default) injects the correct --safe-area-inset-* values on every WebView; consume them ahead of env(): --tg-safe-*: var(--safe-area-inset-*, env(safe-area-inset-*, 0px)) Web / PWA / Telegram / VK are unchanged (--safe-area-inset-* is unset there, so it falls back to env()). Verified on-device (Pixel_10 / API 37) via the injected var — the emulator's auto-updated WebView 149 hides the env() bug, so the visual alone won't reproduce it.
226 lines
8.1 KiB
CSS
226 lines
8.1 KiB
CSS
/*
|
|
* Design tokens — pure CSS custom properties, no framework, no image/font/SVG
|
|
* assets. Light is the default; dark is applied either by the OS
|
|
* (prefers-color-scheme) or by an explicit [data-theme] set from Settings. A
|
|
* Telegram Mini App can override these same variables at runtime from
|
|
* WebApp.themeParams (see lib/theme — SDK wiring lands in the Telegram stage), so
|
|
* the whole UI re-themes without touching components.
|
|
*/
|
|
:root {
|
|
--bg: #f3f4f6;
|
|
--bg-elev: #ffffff;
|
|
--surface: #ffffff;
|
|
--surface-2: #eef0f3;
|
|
--ad-bg: #e3e7ee; /* announcement banner: a subtle accent, darker in light theme */
|
|
--text: #14181f;
|
|
--text-muted: #6b7280;
|
|
--border: #d8dce2;
|
|
--accent: #2f6df6;
|
|
--accent-text: #ffffff;
|
|
--danger: #d6453d;
|
|
--ok: #1f9d57;
|
|
--warn: #c9881b;
|
|
|
|
/* board + tiles (all drawn with CSS primitives) */
|
|
--board-bg: #cdd6cf;
|
|
--cell-bg: #e7ece8;
|
|
--cell-line: #7f8d83;
|
|
--tile-bg: #f4e2b8;
|
|
--tile-edge: #d8c190;
|
|
--tile-text: #2a2113;
|
|
--tile-pending: #f2cf73;
|
|
/* In-composition highlight of the staged play (see game/Board.svelte): a calm reddish-pink
|
|
when the tiles form no word, a light green for the player's own tiles once they do, a
|
|
deeper green for the board tiles a formed word runs through, and the orange move-score
|
|
badge. Tuned per theme; refined on the contour. */
|
|
--tile-pending-illegal: #f2c7bf;
|
|
--tile-pending-legal: #c9e7bd;
|
|
--tile-formed: #a5cf93;
|
|
--score-badge: #e5811d;
|
|
/* Last-word highlight letter — a lighter burgundy than the dark theme on purpose: against
|
|
the lighter tile the perceived contrast needs it, so the two are tuned per theme. */
|
|
--tile-recent: #9c5849;
|
|
--prem-tw: #e06a5b; /* triple word */
|
|
--prem-dw: #efa6a0; /* double word + centre */
|
|
--prem-tl: #4f8fd6; /* triple letter */
|
|
--prem-dl: #a8cdec; /* double letter */
|
|
--prem-text: #2a2113;
|
|
|
|
/* shape + type */
|
|
--radius: 10px;
|
|
--radius-sm: 6px;
|
|
--gap: 8px;
|
|
--pad: 12px;
|
|
/* Height Telegram's native nav overlays at the top in fullscreen; set from the SDK's
|
|
content-safe-area inset, 0 elsewhere. */
|
|
--tg-content-top: 0px;
|
|
/* Device safe-area top (the notch / status bar); inside Telegram TG's own nav controls sit between
|
|
it and --tg-content-top, so the in-app header aligns to that band. Inside Telegram these are set
|
|
from the SDK (lib/app.svelte.ts); on the native Capacitor build the value is the SystemBars core
|
|
plugin's injected --safe-area-inset-* — correct on EVERY Android WebView, including the < 140
|
|
versions where env(safe-area-inset-*) wrongly reports 0 under Android's mandatory edge-to-edge and
|
|
the app chrome would otherwise draw under the system bars. It falls back to the CSS env() safe area
|
|
on iOS / PWA / a plain browser tab (0 there). */
|
|
--tg-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
|
|
/* Device safe-area bottom / sides (home indicator; landscape notch) — the screen pads its bottom
|
|
and left/right edges by these so content clears the cut-outs (e.g. the gesture-nav home indicator
|
|
or the VK mobile home bar). */
|
|
--tg-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
|
|
--tg-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
|
|
--tg-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
|
|
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
|
|
"Noto Sans", "Liberation Sans", sans-serif;
|
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
--bg: #0f1115;
|
|
--bg-elev: #171a21;
|
|
--surface: #171a21;
|
|
--surface-2: #1f242d;
|
|
--ad-bg: #272f3c; /* announcement banner: a subtle accent, lighter in dark theme */
|
|
--text: #e7eaf0;
|
|
--text-muted: #9aa3b2;
|
|
--border: #2a313c;
|
|
--accent: #5b8cff;
|
|
--accent-text: #0b0e13;
|
|
--danger: #f0635a;
|
|
--ok: #44c87f;
|
|
--warn: #e0a93a;
|
|
|
|
--board-bg: #2a3330;
|
|
--cell-bg: #222a27;
|
|
--cell-line: #56655c;
|
|
--tile-bg: #cdba88;
|
|
--tile-edge: #b6a473;
|
|
--tile-text: #20190d;
|
|
--tile-pending: #d8b75e;
|
|
--tile-pending-illegal: #d8a99f;
|
|
--tile-pending-legal: #a9cf94;
|
|
--tile-formed: #83b571;
|
|
--score-badge: #e88f31;
|
|
--tile-recent: #8c4a3c;
|
|
--prem-tw: #9c3f34; /* 3x word: a touch darker red */
|
|
--prem-dw: #a8636b; /* 2x word: softer, pinker */
|
|
--prem-tl: #2c527a; /* 3x letter: a touch darker blue */
|
|
--prem-dl: #4a779b; /* 2x letter: softer, sky blue */
|
|
--prem-text: #e7eaf0;
|
|
}
|
|
}
|
|
|
|
/* Explicit dark chosen in Settings (overrides OS preference). */
|
|
:root[data-theme="dark"] {
|
|
--bg: #0f1115;
|
|
--bg-elev: #171a21;
|
|
--surface: #171a21;
|
|
--surface-2: #1f242d;
|
|
--ad-bg: #272f3c; /* announcement banner: a subtle accent, lighter in dark theme */
|
|
--text: #e7eaf0;
|
|
--text-muted: #9aa3b2;
|
|
--border: #2a313c;
|
|
--accent: #5b8cff;
|
|
--accent-text: #0b0e13;
|
|
--danger: #f0635a;
|
|
--ok: #44c87f;
|
|
--warn: #e0a93a;
|
|
--board-bg: #2a3330;
|
|
--cell-bg: #222a27;
|
|
--cell-line: #38433d;
|
|
--tile-bg: #d9c79a;
|
|
--tile-edge: #b6a473;
|
|
--tile-text: #20190d;
|
|
--tile-pending: #f0d98f;
|
|
--tile-pending-illegal: #d8a99f;
|
|
--tile-pending-legal: #a9cf94;
|
|
--tile-formed: #83b571;
|
|
--score-badge: #e88f31;
|
|
/* Last-word highlight letter — a warm burgundy whose red hue stays distinct from both the
|
|
near-black glyph and the warm tile. The light theme uses a lighter burgundy (tuned per
|
|
theme; perceived contrast depends on the surrounding board). */
|
|
--tile-recent: #8c4a3c;
|
|
--prem-tw: #9c3f34; /* 3x word: a touch darker red */
|
|
--prem-dw: #a8636b; /* 2x word: softer, pinker */
|
|
--prem-tl: #2c527a; /* 3x letter: a touch darker blue */
|
|
--prem-dl: #4a779b; /* 2x letter: softer, sky blue */
|
|
--prem-text: #e7eaf0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: 16px;
|
|
line-height: 1.4;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
/* Stop iOS/Safari from auto-inflating text (e.g. the long marquee message). */
|
|
text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
/* never let the page scroll/zoom out from under the board */
|
|
overscroll-behavior: none;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* The game SPA (main.ts adds .app-shell to <html>) pins the document so iOS/WKWebView — notably
|
|
the Telegram Mini App — cannot rubber-band ("stretch") the whole page on a vertical drag;
|
|
overscroll-behavior alone does not stop the root-document bounce there. Every screen fits the
|
|
visual viewport (--vvh) and scrolls its own inner areas, so the document never needs to
|
|
scroll. The standalone landing page (landing.ts) omits the class and scrolls normally. */
|
|
html.app-shell {
|
|
overflow: hidden;
|
|
}
|
|
html.app-shell body {
|
|
position: fixed;
|
|
/* Follow the visual viewport (top + height), not merely fill the layout viewport: iOS Safari /
|
|
WKWebView does not shrink the layout viewport for the soft keyboard — it offsets the visual
|
|
viewport down toward the focused field — so a top-anchored (inset:0) shell would misalign, showing
|
|
empty space below the content (worst on a repeat focus). --vv-top / --vvh are kept in sync from
|
|
app.svelte.ts (syncViewport). The fallbacks equal inset:0 before the first sync / on the landing. */
|
|
top: var(--vv-top, 0px);
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--vvh, 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#app {
|
|
height: 100%;
|
|
/* No text selection anywhere by default; inputs opt back in below. */
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
/* No tap-highlight flash on tappable elements. Android in-app WebViews (Telegram, VK) draw a
|
|
momentary selection-like box on a clickable node on tap — seen on the header title and the
|
|
back chevron; user-select does not govern it. Inherited, so this clears it app-wide. */
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
}
|
|
|
|
button {
|
|
font: inherit;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.reduce-motion * {
|
|
animation-duration: 0.001ms !important;
|
|
transition-duration: 0.001ms !important;
|
|
}
|