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;
// "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 {

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 ─────────────────────
// 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-<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 ─────────────────
// room-views.js rebuilds the body from the live SCROLL + POST DOM on
// 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;
}
}
// Distinct per-source accent (border tint) — the styling hook the
// contract reserves for end-of-sprint polish.
.atlas-row[data-source="provenance"] { border-inline-start-color: rgba(var(--terUser), 0.6); }
.atlas-row[data-source="post"] { border-inline-start-color: rgba(var(--quaUser), 0.6); }
// Distinct per-source accent (border tint), colour-coded to echo each
// source view's h2 bg: SCROLL (provenance) → --sixUser, POST → --sepUser.
// YARN + PULSE don't feed the ATLAS yet, so only these two are needed.
.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 ────────────────────────────────────────────────

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

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