game post: New Post applet treatment — --duoUser felt, green-tinted title strip + input-pill .post-line rows
- The reelhouse POST card now takes the billboard New Post applet's look: a --duoUser green felt bg with the rotated room-name `> h2` given the SAME green-tinted strip — three translucent 0,0,0/0.125 layers over the felt, NO opaque base, so the felt shows through (matches #id_applet_new_post, which lands there via a %applet-box > h2 specificity quirk; we do it on purpose). - Each .post-line is restyled to LOOK LIKE the "Enter a post line" composer input below it (mirrors .form-control, _base.scss): a --priUser fill (0.8 alpha), a 0.1rem --secUser border at the same border-radius, full width, an up/down margin + content-driven (dynamic) height — so the thread reads as a stack of input-style pills on the felt. #id_post_table left/right padding zeroed so pills span the full card content width (= the composer row). - OK button wrapped in .applet-btn-panel (--priUser fill + faint --terUser border) so the green .btn-confirm reads against the felt, mirroring the New Post composer. - All scoped to .room-view--post — post.html (.post-page), the billboard New Post applet, and MY POSTS (.applet-list-entry) stay untouched (verified live: no .post-line bleed). - Verified: GameViewsCarouselTest.test_post_view_is_room_thread_with_working_composer + test_atlas_aggregates_provenance_and_posts green (composer still works with the OK-panel wrap); billboard + GAME POST visually confirmed via Claudezilla. [[feedback-scss-id-context-specificity-trap]] — %applet-box > h2's background-color inherits the applets-container ID via the @extend chain, out-specifying a plain #id_applet > h2 override, so an "opaque base" mask silently renders translucent (the felt bleeds through). New Post hit this by accident; GAME POST replicates it deliberately. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -178,10 +178,32 @@ html.sea-open #id_aperture_fill {
|
||||
// _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.
|
||||
.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.
|
||||
background-color: rgba(0, 0, 0, 0.125);
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
#id_post_table {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0.5rem 0 0;
|
||||
padding: 0; // pills span the full card content width (= composer row)
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
@@ -189,12 +211,23 @@ html.sea-open #id_aperture_fill {
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(4rem, auto) 1fr minmax(3rem, auto);
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0;
|
||||
width: 100%;
|
||||
background-color: rgba(var(--priUser), 0.8);
|
||||
border: 0.1rem solid rgba(var(--secUser), 0.5);
|
||||
border-radius: calc((1rem + 1em) / 3); // == .form-control radius
|
||||
margin: 0.35rem 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
box-shadow: 1px 1px 0.125rem 1px rgba(0, 0, 0, 0.6);
|
||||
|
||||
.post-line-author {
|
||||
font-weight: bold;
|
||||
|
||||
Reference in New Issue
Block a user