/* Layout for the Tokens sketch, keyed by the mode class shared/Modes.js puts on (mode-presentation | mode-desktop | mode-mobile). Only layout lives here; colours and fonts stay in src/. The canvas is window-sized — setup() computes its drawing size from the viewport, so nothing here scales it. One exception: the lookup strip's chrome (background, border, font) lives here with its layout, since the sticky bar is a page fixture rather than sketch drawing. */ body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } canvas { display: block; margin-top: auto; margin-bottom: auto; } #p5_loading { font-family: sans-serif; padding: 20px; } /* ---- The token panel: one floating instrument, every mode ---- It is position: fixed rather than part of the flow, so the token field gets the whole window; src/main.js's navHeight/stripHeight are 0 for the same reason. Semi-transparent so the tokens underneath stay readable, and draggable by its own background (startPanelDrag, src/main.js) — the inline left/top a drag writes override the right/bottom anchor below. */ #token_panel { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 380px; max-width: calc(100vw - 32px); box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(150, 150, 150, 0.6); background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(2px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); font-family: sans-serif; font-size: 13px; cursor: move; } /* The controls themselves are not drag handles — only the panel's background is. */ #token_panel input, #token_panel button, #token_panel a { cursor: auto; } #home_link, #home_link:link, #home_link:visited { flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid rgb(190, 190, 190); background: rgb(255, 255, 255); color: rgb(60, 60, 60); text-decoration: none; font-size: 15px; line-height: 1; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } /* It is a link, and a bare glyph does not say so — the hover state is what tells you it is a control. (The glyph is Unicode U+2302, not an icon font; this page loads none.) */ #home_link:hover, #home_link:focus-visible { background: rgb(60, 90, 170); border-color: rgb(40, 70, 150); color: rgb(255, 255, 255); } #view_toggle { font-size: 12px; padding: 4px 8px; } body.mode-mobile #token_panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); } body.mode-mobile #view_toggle { min-height: 36px; font-size: 14px; } #token_id_input { width: 7ch; } #clear_selection { font-size: 12px; padding: 3px 8px; } #clear_selection:disabled { opacity: 0.45; cursor: default; } #tokenize_row { flex-basis: 100%; display: flex; align-items: center; gap: 6px; } #tokenize_input { flex: 1; min-width: 140px; } body.mode-mobile #example_prev, body.mode-mobile #example_next { min-width: 44px; min-height: 44px; } body.mode-mobile #token_id_input, body.mode-mobile #tokenize_input { min-height: 38px; }