diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss index 4b29052..bf59c31 100644 --- a/src/static_src/scss/_gameboard.scss +++ b/src/static_src/scss/_gameboard.scss @@ -997,10 +997,12 @@ body.page-gameboard { background-color: rgba(var(--applet-shell-bg), 1) !important; // "Sea of Cards" — the conjunction stays lowercase + italic against the h2's - // uppercase transform (user-spec 2026-06-08). + // uppercase transform (user-spec 2026-06-08). letter-spacing: normal drops + // the h2's enforced 0.2em tracking so the short italic word doesn't read gappy. > h2 .my-sea-title-of { text-transform: none; font-style: italic; + letter-spacing: normal; } h2 { diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss index 4ab6f99..cbc3918 100644 --- a/src/static_src/scss/_room.scss +++ b/src/static_src/scss/_room.scss @@ -197,26 +197,32 @@ html.sea-open .room-aperture.is-scrollable { } } - // ── POST view — the room-scoped game-table thread ───────────────────── - // Reuses post.html's #id_post_table + composer markup (shared - // _post_line.html). The post styling proper is .post-page-scoped, so the - // essentials are restated here for the carousel card. - .room-view--post { - // New Post applet treatment (mirrors #id_applet_new_post in _applets.scss): - // a --duoUser green-felt card. The rotated room-name `> h2` gets the SAME - // green-tinted strip as the billboard New Post title — the felt shows - // through (see the `> h2` note). POST-scoped, so the SCROLL/ATLAS/YARN/PULSE - // cards keep their plain dark %applet-box wash. + // ── Per-view title recolor + view-specific card styling ─────────────── + // Each reelhouse view's rotated room-name `> h2` carries a distinct + // font/bg pair (user-spec 2026-06-08) so the five views read as + // colour-coded sections. ATLAS's per-source row accents (further down) + // echo the SCROLL + POST h2 bgs so a merged row's origin is legible. + + // SCROLL — provenance feed. --priUser font on a --sixUser strip. + .room-view--scroll .applet-scroll > h2 { + color: rgba(var(--priUser), 1); + background-color: rgba(var(--sixUser), 1); + } + + // YARN view — the room-scoped chat thread (most of it forthcoming). Inherits + // the full green-felt input-pill treatment POST used to carry: a --duoUser + // card, the green-tinted h2 strip, the input-style line pills + composer. + // SALVAGED here verbatim (the .post-* selectors renamed .yarn-*) because POST + // reverts to the plain applet wash below — so the styling survives for when + // YARN's backing model + markup land. Reuses post.html's composer markup + // language; the line/buffer/form/table selectors are the future .yarn-* ones. + .room-view--yarn { .applet-scroll { background-color: rgba(var(--duoUser), 1); > h2 { - // Match the New Post title strip exactly: three translucent - // 0,0,0/0.125 layers and NO opaque --priUser base, so the --duoUser - // felt shows THROUGH for the same green-tinted "partial mask". (On - // the billboard #id_applet_new_post lands here by accident — its - // opaque base is out-specified by %applet-box > h2's background-color; - // here we do it on purpose.) bg-color 0.125 + two gradients = 3 layers. + // Three translucent 0,0,0/0.125 layers and NO opaque base, so the + // --duoUser felt shows THROUGH for a green-tinted "partial mask". background-color: rgba(0, 0, 0, 0.125); background-image: linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)), @@ -224,7 +230,7 @@ html.sea-open .room-aperture.is-scrollable { } } - #id_post_table { + #id_yarn_table { list-style: none; margin: 0; padding: 0; // pills span the full card content width (= composer row) @@ -235,12 +241,12 @@ html.sea-open .room-aperture.is-scrollable { flex-direction: column; justify-content: flex-end; // bottom-anchor short threads - // Each line is styled to LOOK LIKE the "Enter a post line" composer - // input below it (mirrors .form-control, _base.scss): a --priUser fill + - // a 0.1rem --secUser border at the same border-radius, full width, an - // up/down margin and content-driven (dynamic) height — so the thread - // reads as a stack of input-style pills on the --duoUser felt. - .post-line { + // Each line is styled to LOOK LIKE the composer input below it + // (mirrors .form-control, _base.scss): a --priUser fill + a 0.1rem + // --secUser border at the same border-radius, full width, an up/down + // margin and content-driven (dynamic) height — so the thread reads as + // a stack of input-style pills on the --duoUser felt. + .yarn-line { display: grid; grid-template-columns: minmax(4rem, auto) 1fr minmax(3rem, auto); align-items: baseline; @@ -253,24 +259,24 @@ html.sea-open .room-aperture.is-scrollable { padding: 0.5rem 0.75rem; box-shadow: 1px 1px 0.125rem 1px rgba(0, 0, 0, 0.6); - .post-line-author { + .yarn-line-author { font-weight: bold; color: rgba(var(--quaUser), 1); white-space: nowrap; font-size: 0.85rem; } - .post-line-text { min-width: 0; overflow-wrap: anywhere; } - .post-line-time { + .yarn-line-text { min-width: 0; overflow-wrap: anywhere; } + .yarn-line-time { font-size: 0.75rem; opacity: 0.5; text-align: right; white-space: nowrap; } } - .post-line-buffer { flex-shrink: 0; height: 0.25rem; } + .yarn-line-buffer { flex-shrink: 0; height: 0.25rem; } } - .post-line-form { + .yarn-line-form { flex-shrink: 0; margin: 0; padding-top: 0.25rem; @@ -284,6 +290,34 @@ html.sea-open .room-aperture.is-scrollable { } } + // POST view — reverts to the plain dark %applet-box wash (its green-felt + // input-pill styling moved to YARN above). Only its h2 is recoloured: + // --priUser font on a --sepUser strip. + .room-view--post { + .applet-scroll > h2 { + color: rgba(var(--priUser), 1); + background-color: rgba(var(--sepUser), 1); + } + + // Bare-