discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

room reelhouse: recolor per-view h2s; salvage POST's pill styling into YARN; revert POST to plain wash; colour-code ATLAS row accents; drop letter-spacing on the Sea of Cards italic 'of'

Browse Source 
- _room.scss: SCROLL h2 --priUser/--sixUser, POST h2 --priUser/--sepUser, PULSE h2 --priUser/--octUser. New .room-view--yarn block = verbatim salvage of POST's --duoUser green-felt + input-pill styling (.post-* renamed .yarn-*, #id_post_table -> #id_yarn_table), ready for when YARN's backing model + markup land. POST reverts to the plain dark %applet-box wash — only its h2 override + a bare-<ul> reset on #id_post_table (no felt/pills/bullets) remain. ATLAS per-source row accents colour-coded to echo the source h2 bgs: [data-source=provenance] -> --sixUser, [data-source=post] -> --sepUser (YARN/PULSE don't feed it yet).

- _gameboard.scss: .my-sea-title-of gets letter-spacing: normal, dropping the h2's enforced 0.2em tracking so the short italic 'of' doesn't read gappy.

- bundled (parallel work): rootvars.scss chroma-hue primaries brightened (yellow/lime/cyan/indigo/violet/fuschia/magenta pri+ter ramps).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-08 18:55:34 -04:00
parent a02f3473d5
commit 577ef30f5c
3 changed files with 81 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/static_src/scss/_gameboard.scss
View File

@@ -997,10 +997,12 @@ body.page-gameboard {
background-color: rgba(var(--applet-shell-bg), 1) !important; background-color: rgba(var(--applet-shell-bg), 1) !important;
// "Sea of Cards" — the conjunction stays lowercase + italic against the h2's // "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 { > h2 .my-sea-title-of {
text-transform: none; text-transform: none;
font-style: italic; font-style: italic;
letter-spacing: normal;
} }
h2 { h2 {

99
src/static_src/scss/_room.scss
View File

@@ -197,26 +197,32 @@ html.sea-open .room-aperture.is-scrollable {
} }
} }
// ── POST view — the room-scoped game-table thread ───────────────────── // ── Per-view title recolor + view-specific card styling ───────────────
// Reuses post.html's #id_post_table + composer markup (shared // Each reelhouse view's rotated room-name `> h2` carries a distinct
// _post_line.html). The post styling proper is .post-page-scoped, so the // font/bg pair (user-spec 2026-06-08) so the five views read as
// essentials are restated here for the carousel card. // colour-coded sections. ATLAS's per-source row accents (further down)
.room-view--post { // echo the SCROLL + POST h2 bgs so a merged row's origin is legible.
// 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 // SCROLL — provenance feed. --priUser font on a --sixUser strip.
// green-tinted strip as the billboard New Post title — the felt shows .room-view--scroll .applet-scroll > h2 {
// through (see the `> h2` note). POST-scoped, so the SCROLL/ATLAS/YARN/PULSE color: rgba(var(--priUser), 1);
// cards keep their plain dark %applet-box wash. 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 { .applet-scroll {
background-color: rgba(var(--duoUser), 1); background-color: rgba(var(--duoUser), 1);
> h2 { > h2 {
// Match the New Post title strip exactly: three translucent // Three translucent 0,0,0/0.125 layers and NO opaque base, so the
// 0,0,0/0.125 layers and NO opaque --priUser base, so the --duoUser // --duoUser felt shows THROUGH for a green-tinted "partial mask".
// 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.
background-color: rgba(0, 0, 0, 0.125); background-color: rgba(0, 0, 0, 0.125);
background-image: background-image:
linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)), 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; list-style: none;
margin: 0; margin: 0;
padding: 0; // pills span the full card content width (= composer row) 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; flex-direction: column;
justify-content: flex-end; // bottom-anchor short threads justify-content: flex-end; // bottom-anchor short threads
// Each line is styled to LOOK LIKE the "Enter a post line" composer // Each line is styled to LOOK LIKE the composer input below it
// input below it (mirrors .form-control, _base.scss): a --priUser fill + // (mirrors .form-control, _base.scss): a --priUser fill + a 0.1rem
// a 0.1rem --secUser border at the same border-radius, full width, an // --secUser border at the same border-radius, full width, an up/down
// up/down margin and content-driven (dynamic) height — so the thread // margin and content-driven (dynamic) height — so the thread reads as
// reads as a stack of input-style pills on the --duoUser felt. // a stack of input-style pills on the --duoUser felt.
.post-line { .yarn-line {
display: grid; display: grid;
grid-template-columns: minmax(4rem, auto) 1fr minmax(3rem, auto); grid-template-columns: minmax(4rem, auto) 1fr minmax(3rem, auto);
align-items: baseline; align-items: baseline;
@@ -253,24 +259,24 @@ html.sea-open .room-aperture.is-scrollable {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
box-shadow: 1px 1px 0.125rem 1px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 0.125rem 1px rgba(0, 0, 0, 0.6);
.post-line-author { .yarn-line-author {
font-weight: bold; font-weight: bold;
color: rgba(var(--quaUser), 1); color: rgba(var(--quaUser), 1);
white-space: nowrap; white-space: nowrap;
font-size: 0.85rem; font-size: 0.85rem;
} }
.post-line-text { min-width: 0; overflow-wrap: anywhere; } .yarn-line-text { min-width: 0; overflow-wrap: anywhere; }
.post-line-time { .yarn-line-time {
font-size: 0.75rem; font-size: 0.75rem;
opacity: 0.5; opacity: 0.5;
text-align: right; text-align: right;
white-space: nowrap; 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; flex-shrink: 0;
margin: 0; margin: 0;
padding-top: 0.25rem; 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-<ul> normalization only — no list bullets/indent (there's no
// global ul reset), so the thread reads as plain feed rows on the
// default wash rather than a bulleted list. The pill chrome is gone.
#id_post_table {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
min-height: 0;
overflow-y: auto;
}
}
// PULSE view — forthcoming. --priUser font on an --octUser strip.
.room-view--pulse .applet-scroll > h2 {
color: rgba(var(--priUser), 1);
background-color: rgba(var(--octUser), 1);
}
// ── ATLAS view — provenance + post-thread merged feed ───────────────── // ── ATLAS view — provenance + post-thread merged feed ─────────────────
// room-views.js rebuilds the body from the live SCROLL + POST DOM on // room-views.js rebuilds the body from the live SCROLL + POST DOM on
// activation; rows carry data-source so the two streams read distinctly. // activation; rows carry data-source so the two streams read distinctly.
@@ -327,10 +361,11 @@ html.sea-open .room-aperture.is-scrollable {
white-space: nowrap; white-space: nowrap;
} }
} }
// Distinct per-source accent (border tint) — the styling hook the // Distinct per-source accent (border tint), colour-coded to echo each
// contract reserves for end-of-sprint polish. // source view's h2 bg: SCROLL (provenance) → --sixUser, POST → --sepUser.
.atlas-row[data-source="provenance"] { border-inline-start-color: rgba(var(--terUser), 0.6); } // YARN + PULSE don't feed the ATLAS yet, so only these two are needed.
.atlas-row[data-source="post"] { border-inline-start-color: rgba(var(--quaUser), 0.6); } .atlas-row[data-source="provenance"] { border-inline-start-color: rgba(var(--sixUser), 0.6); }
.atlas-row[data-source="post"] { border-inline-start-color: rgba(var(--sepUser), 0.6); }
} }
// ── CHAT / PULSE stubs ──────────────────────────────────────────────── // ── CHAT / PULSE stubs ────────────────────────────────────────────────

22
src/static_src/scss/rootvars.scss
View File

@@ -133,16 +133,16 @@
--quiOr: 82, 47, 0; --quiOr: 82, 47, 0;
--sixOr: 51, 29, 0; --sixOr: 51, 29, 0;
// yellow (A-Time) // yellow (A-Time)
--priYl: 255, 207, 52; --priYl: 255, 227, 82;
--secYl: 211, 172, 44; --secYl: 211, 172, 44;
--terYl: 168, 138, 33; --terYl: 148, 128, 29;
--quaYl: 128, 106, 24; --quaYl: 128, 106, 24;
--quiYl: 91, 76, 15; --quiYl: 91, 76, 15;
--sixYl: 57, 49, 7; --sixYl: 57, 49, 7;
// lime (B-Time) // lime (B-Time)
--priLm: 151, 174, 60; --priLm: 181, 204, 90;
--secLm: 124, 145, 48; --secLm: 124, 145, 48;
--terLm: 97, 117, 36; --terLm: 92, 110, 31;
--quaLm: 71, 90, 25; --quaLm: 71, 90, 25;
--quiLm: 47, 64, 15; --quiLm: 47, 64, 15;
--sixLm: 25, 40, 6; --sixLm: 25, 40, 6;
@@ -161,9 +161,9 @@
--quiTk: 0, 70, 61; --quiTk: 0, 70, 61;
--sixTk: 0, 45, 39; --sixTk: 0, 45, 39;
// cyan (A-Air) // cyan (A-Air)
--priCy: 13, 179, 200; --priCy: 33, 209, 230;
--secCy: 12, 150, 168; --secCy: 12, 150, 168;
--terCy: 0, 121, 136; --terCy: 0, 101, 126;
--quaCy: 0, 93, 106; --quaCy: 0, 93, 106;
--quiCy: 0, 67, 78; --quiCy: 0, 67, 78;
--sixCy: 0, 43, 52; --sixCy: 0, 43, 52;
@@ -175,30 +175,30 @@
--quiBl: 0, 52, 79; --quiBl: 0, 52, 79;
--sixBl: 0, 33, 51; --sixBl: 0, 33, 51;
// indigo (A-Water) // indigo (A-Water)
--priId: 111, 133, 244; --priId: 121, 143, 244;
--secId: 66, 88, 184; --secId: 66, 88, 184;
--terId: 53, 74, 156; --terId: 53, 74, 156;
--quaId: 44, 60, 131; --quaId: 44, 60, 131;
--quiId: 32, 44, 106; --quiId: 32, 44, 106;
--sixId: 21, 29, 71; --sixId: 21, 29, 71;
// violet (B-Water) // violet (B-Water)
--priVt: 120, 72, 183; --priVt: 150, 102, 213;
--secVt: 108, 65, 165; --secVt: 108, 65, 165;
--terVt: 96, 58, 147; --terVt: 96, 58, 147;
--quaVt: 80, 45, 124; --quaVt: 80, 45, 124;
--quiVt: 64, 30, 100; --quiVt: 64, 30, 100;
--sixVt: 43, 20, 66; --sixVt: 43, 20, 66;
// fuschia (A-Stone) // fuschia (A-Stone)
--priFs: 178, 71, 170; --priFs: 208, 101, 200;
--secFs: 138, 52, 131; --secFs: 138, 52, 131;
--terFs: 107, 31, 101; --terFs: 107, 31, 101;
--quaFs: 83, 17, 78; --quaFs: 83, 17, 78;
--quiFs: 61, 5, 56; --quiFs: 61, 5, 56;
--sixFs: 41, 0, 36; --sixFs: 41, 0, 36;
// magenta (B-Stone) // magenta (B-Stone)
--priMe: 237, 30, 129; --priMe: 257, 60, 159;
--secMe: 196, 18, 108; --secMe: 196, 18, 108;
--terMe: 158, 1, 86; --terMe: 148, 1, 80;
--quaMe: 122, 0, 66; --quaMe: 122, 0, 66;
--quiMe: 89, 0, 48; --quiMe: 89, 0, 48;
--sixMe: 59, 0, 32; --sixMe: 59, 0, 32;