/* The replay page's stylesheet. Published as /play/player..css -- 234 pages linked one file instead of carrying 78 lines each, and a change to it needs no export, only scripts/render_all.py --repoint. The palette is filled in at build time from assets/palette.json. */ :root { --page: #e8e4d8; --surface: #f4f1e8; --ink: #101826; --ink-2: #46536a; --muted: #525f73; --line: #d3d6d1; --accent: #1f66bd; --track: #e34948; } :root[data-theme="dark"] { --page: #142019; --surface: #213028; --ink: #e9f2ec; --ink-2: #aec2b5; --muted: #a4b7aa; --line: #354b3d; --accent: #2fb178; } #top .share-toggle { margin-left: auto; font-size: 18px; line-height: 1; padding: 8px 12px; min-height: 44px; background: none; border: none; color: inherit; cursor: pointer; } #top .theme-toggle { font-size: 18px; line-height: 1; padding: 8px 12px; min-height: 44px; } * { box-sizing: border-box; } html { overflow-x: hidden; } /* nothing here should scroll sideways */ body { margin: 0; background: var(--page); color: var(--ink); font: 19px/1.6 system-ui, -apple-system, "Noto Sans TC", sans-serif; display: flex; flex-direction: column; align-items: center; padding: 12px 12px 28px; } /* 460 was a phone-shaped guess. The canvas is 2160 px wide, so a desktop window was throwing most of it away; on a phone this changes nothing, because 100% was already the binding limit. Height is capped too, or a 9:16 canvas runs off the bottom of a laptop screen. */ /* Grow until either dimension runs out, rather than stopping at a phone width. 720 was chosen when every export was portrait; a landscape frame stopped there and left most of a desktop window empty. The height cap keeps the transport row above the fold, which is what the width cap was accidentally doing before. */ #wrap { width: min(100%, 1280px); } /* max() matters: zoom the browser far enough and 100dvh drops under the 300px reserved for the controls, the calc goes to zero or negative, the declaration is dropped, and the canvas falls back to its natural 3840 px -- the page then scrolls sideways and everything looks cut off, which is what it was. */ canvas#c { max-height: max(240px, calc(100dvh - 300px)); margin: 0 auto; width: auto; max-width: 100%; } canvas { width: 100%; height: auto; display: block; border-radius: 14px; /* The page's own ground, not black. This rule covers two canvases and the black was invisible in dark: the elevation profile draws its silhouette and nothing else, so on paper it became a black slab; and fullscreen puts the *canvas* on screen, so the letterbox around the picture was black behind a paper panel. MG, 2026-09-04, with both on screen. */ background: var(--page); box-shadow: 0 6px 24px rgba(0,0,0,.35); touch-action: manipulation; } #top { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; min-height: 44px; } #top a { color: var(--ink); text-decoration: none; font-size: 30px; line-height: 1; padding: 6px 12px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); } #top span { color: var(--ink-2); font-size: 18px; } #wrap.big #top { display: none; } #bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; } button { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; min-width: 64px; min-height: 46px; cursor: pointer; } button:active { background: var(--line); } #clock { color: var(--muted); font-variant-numeric: tabular-nums; } /* The elevation profile is the scrubber: the x axis is distance, which is also what the animation advances by, so the control and the thing it controls share one axis. */ #profile { width: 100%; height: 92px; display: block; margin-top: 10px; touch-action: none; cursor: pointer; } #marks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .mk { min-width: 44px; min-height: 44px; border-radius: 999px; padding: 6px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 17px; cursor: pointer; } /* Two different things were both wearing the accent: a peak and the mark you are on. #13 is a hundred-peak, so it looked permanently selected. Filled now means "here"; a peak is marked by its outline and a small summit. */ .mk.peak { border-color: var(--accent); } .mk.peak::before { content: "▲"; font-size: 13px; margin-right: 4px; color: var(--accent); vertical-align: 2px; } .mk.stay { border-color: var(--ink-2); } .mk.stay::before { content: "\2302"; font-size: 19px; font-weight: 700; margin-right: 4px; color: var(--ink-2); vertical-align: -2px; } .mk.on { background: var(--accent); color: var(--page); border-color: transparent; } p.note { color: var(--muted); font-size: 16px; margin: 14px 0 0; } /* Fallback "fullscreen" for iOS Safari, which will not put a canvas into the real thing. */ /* Grid with place-items, not a column flex with auto margins: in Safari the stretched flex item never resolved its own width, so the canvas sat against the left edge with the spare space all on one side. */ #wrap.big { position: fixed; inset: 0; z-index: 9; background: var(--page); padding: 8px; display: grid; place-items: center; width: 100%; max-width: none; } #wrap.big canvas#c { max-height: calc(100dvh - 16px); max-width: calc(100vw - 16px); width: auto; height: auto; border-radius: 0; } #wrap.big #profile, #wrap.big #marks, #wrap.big p.note { display: none; } /* Desktop share popover (2026-09-06): the OS share sheet on Windows Chrome/Edge accepted the file but "copy" and LINE both did nothing useful with it, so desktop never uses navigator.share here -- same anchored-popover CSS as the trip page's own fallback (pipeline/site.py's .share-sheet), duplicated here because player.html ships its own stylesheet, not the generated one. A small menu anchored under/over the .share-toggle button by JS-computed `left`/`top`, not a full-screen sheet -- the control bar this button lives in sits at the page bottom, so it opens upward whenever there is room. */ .share-sheet { position: fixed; z-index: 90; width: max-content; max-width: 260px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px max(6px, env(safe-area-inset-bottom)); box-shadow: var(--shadow); } .share-sheet-item { display: block; width: 100%; margin: 0; padding: 10px 14px; text-align: center; font: inherit; font-size: 16px; border: none; border-radius: 8px; background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; } .share-sheet-item:focus-visible { background: var(--page); outline: none; } /* touch keeps :hover after a tap (MG 2026-09-14, site buttons stayed lit) */ @media (hover: hover) and (pointer: fine) { .share-sheet-item:hover { background: var(--page); outline: none; } } .toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(8px); background: var(--ink); color: var(--surface); border-radius: 12px; padding: 10px 18px; font-size: .88rem; line-height: 1.5; max-width: 88vw; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 50; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }