╭ changed ───────────╮ │src/embed/index.html│ ╰────────────────────╯ ╭───────────╮ │← all files│ ╰───────────╯ ╭────────────────────────────────────────────────────────────────────────────────────╮ │ 7 html { │ │ 8 background-color: rgba(0, 50, 70, 1.0); │ │ 9 color: rgba(200, 200, 200, 1.0); │ │10 + /* the grid's inline-block cell-runs can render a few pixels wider │ │11 + than the column width, so prevent spurious horiz scrollbar */ │ │12 + overflow-x: hidden; │ │13 + /* always reserve the vertical scrollbar's space so the usable width│ │14 + is constant whether or not it's showing */ │ │15 + scrollbar-gutter: stable; │ │16 } │ │17 │ │18 @font-face { │ ╰────────────────────────────────────────────────────────────────────────────────────╯ ╭───────────────────────────────────────────────────────────────────────────╮ │29 │ │30 #grid { │ │31 white-space: pre; │ │32 + } │ │33 + │ │34 + /* render each colored cell-run as an inline-block to prevent│ │35 + horizontal seams between rows of the block art. */ │ │36 + #grid span { │ │37 + display: inline-block; │ │38 + vertical-align: top; │ │39 } │ │40 │ │41 /* overlay elements share the grid's coordinate system since │ ╰───────────────────────────────────────────────────────────────────────────╯ ╭────────────────────────────────────────────────────────────────────────────────╮ │53 │ │54 .page input { │ │55 color: inherit; │ │43 - background: rgba(0, 50, 70, 1.0); │ │56 + /* transparent field so the backdrop shows through fully; a dark│ │57 + halo backs just the characters so they stay legible */ │ │58 + background: transparent; │ │59 + text-shadow: 0 0 3px #000, 0 0 5px #000, 0 0 5px #000; │ │60 border: none; │ │61 } │ │62 │ ╰────────────────────────────────────────────────────────────────────────────────╯