diff --git a/src/static_src/scss/_applets.scss b/src/static_src/scss/_applets.scss index 1d6600e..f9536e9 100644 --- a/src/static_src/scss/_applets.scss +++ b/src/static_src/scss/_applets.scss @@ -99,22 +99,41 @@ #id_bud_menu { @extend %applet-menu; } // New Game / New Post / Bill Post composer line-inputs — mirror the My Sky -// form-col inputs (`_sky.scss` .sky-form-col input): bolder text, a duoUser -// fill, a terUser focus shift + a priUser placeholder. The secUser text and -// terUser border/glow on focus already come from `.form-control`. -// room.html's #id_room_post_text joins this list when it lands. +// form-col inputs (`_sky.scss` .sky-form-col input): bolder text, a --priUser +// fill that stands out against the applet's --duoUser felt, a --terUser focus +// shift + a faint --secUser placeholder. The --terUser border/glow on focus +// comes from `.form-control`. room.html's #id_room_post_text joins this list +// when it lands. #id_new_game_name, #id_new_post_text, #id_post_line_text { font-weight: 700; - background-color: rgba(var(--duoUser), 1); + background-color: rgba(var(--priUser), 1); &:focus { color: rgba(var(--terUser), 1); } &::placeholder { - color: rgba(var(--priUser), 1); + color: rgba(var(--secUser), 0.7); + } +} + +// New Game / New Post composer applets take the My Sky / My Sea / My Sign +// treatment: a --duoUser green-felt content bg with the rotated >h2 title +// masked back to the default dark — opaque --priUser under the same two +// 0,0,0/0.125 overlays %applet-box + its >h2 give a normal applet (see the +// _sky / _gameboard / _billboard #id_applet_my_* shells). The line-inputs +// above keep their --priUser fill, standing out against the felt like My Sky's. +#id_applet_new_game, +#id_applet_new_post { + background-color: rgba(var(--duoUser), 1) !important; + + > h2 { + background: + 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)), + rgba(var(--priUser), 1); } } diff --git a/src/static_src/scss/_billboard.scss b/src/static_src/scss/_billboard.scss index fa30fc6..1ddefd1 100644 --- a/src/static_src/scss/_billboard.scss +++ b/src/static_src/scss/_billboard.scss @@ -511,7 +511,15 @@ body.page-billposts { h2 { flex-shrink: 0; - background-color: rgba(var(--priUser), 1); + // Mask the --duoUser aperture behind the rotated title: an opaque + // --priUser base (the default applet content bg) under the same two + // 0,0,0/0.125 overlays %applet-box + its >h2 give every other applet, + // so the bar reads identically dark instead of green-tinted. Layered + // (not a flat 0,0,0) so it stays palette-correct on *-light palettes. + background: + 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)), + rgba(var(--priUser), 1); box-shadow: rgba(0, 0, 0, 1) !important; } diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss index 7c131b0..253e755 100644 --- a/src/static_src/scss/_gameboard.scss +++ b/src/static_src/scss/_gameboard.scss @@ -903,7 +903,15 @@ body.page-gameboard { h2 { flex-shrink: 0; - background-color: rgba(var(--priUser), 1); + // Mask the --duoUser aperture behind the rotated title: an opaque + // --priUser base (the default applet content bg) under the same two + // 0,0,0/0.125 overlays %applet-box + its >h2 give every other applet, + // so the bar reads identically dark instead of green-tinted. Layered + // (not a flat 0,0,0) so it stays palette-correct on *-light palettes. + background: + 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)), + rgba(var(--priUser), 1); box-shadow: rgba(0, 0, 0, 1) !important; } diff --git a/src/static_src/scss/_sky.scss b/src/static_src/scss/_sky.scss index ae091f9..f22dd1a 100644 --- a/src/static_src/scss/_sky.scss +++ b/src/static_src/scss/_sky.scss @@ -932,7 +932,15 @@ body[class*="-light"] #id_sky_tooltip_2 { h2 { flex-shrink: 0; - background-color: rgba(var(--priUser), 1); + // Mask the --duoUser aperture behind the rotated title: an opaque + // --priUser base (the default applet content bg) under the same two + // 0,0,0/0.125 overlays %applet-box + its >h2 give every other applet, + // so the bar reads identically dark instead of green-tinted. Layered + // (not a flat 0,0,0) so it stays palette-correct on *-light palettes. + background: + 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)), + rgba(var(--priUser), 1); box-shadow: rgba(0, 0, 0, 1) !important; } diff --git a/src/static_src/scss/rootvars.scss b/src/static_src/scss/rootvars.scss index 71913b4..fdeaff6 100644 --- a/src/static_src/scss/rootvars.scss +++ b/src/static_src/scss/rootvars.scss @@ -231,7 +231,7 @@ // forest --priFor: 124, 156, 89; --secFor: 94, 124, 61; - --terFor: 69, 102, 43; + --terFor: 69, 99, 36; /* Technoman Hue */ // carbon steel @@ -401,7 +401,7 @@ .palette-inferno { --priUser: var(--terSwp); --secUser: var(--priSwp); - --terUser: var(--secBld); + --terUser: var(--priBld); --quaUser: var(--priIce); --quiUser: var(--quaIce); --sixUser: var(--priTrs);