diff --git a/JoshHeaps.Net/wwwroot/css/casino/holdem.css b/JoshHeaps.Net/wwwroot/css/casino/holdem.css index f323aa9..840e565 100644 --- a/JoshHeaps.Net/wwwroot/css/casino/holdem.css +++ b/JoshHeaps.Net/wwwroot/css/casino/holdem.css @@ -90,6 +90,32 @@ --gold-deep: #a9782f; --gold-tint: #3a2f18; --gold-shade: #241d0f; + + /* The page is #141414 and never said so. + + Everything above is a colour this stylesheet paints. `color-scheme` is the half + the stylesheet cannot paint: the browser draws the checkboxes, the dropdown a + whose menu opens + white over the felt. + + One declaration moves every one of them, and it moves them *natively*, which is + the part worth having: a control the browser draws still answers Windows High + Contrast Mode, still matches the platform a dealer already knows, and cannot + lose its tick to a stylesheet. See .potWizardChoice input for what painting one + by hand costs, and what it has to pay back. + + --accent-on is the checked colour, and it is the green this tool already uses for + yes: the same #1e8449 the pot wizard's hand-drawn box fills with, so the one + painted checkbox and the six native ones agree. Chrome picks the tick's own + colour from it, and against a green this dark that is white. */ + --accent-on: #1e8449; + + color-scheme: dark; + accent-color: var(--accent-on); } /* Every number that changes while the dealer is looking at it — the pot, the stacks, @@ -1974,8 +2000,13 @@ button, /* A bare checkbox ships at 13x13, which misses the 24px minimum with a mouse as well as with a thumb. The row around it is the real target on touch, but the box itself - should be findable on any device. */ -#dedicatedDealerToggle { + should be findable on any device. + + This said `#dedicatedDealerToggle` and fixed one box of six. The other five were + still 13x13 — measured — including the two in the seat sheet that a dealer uses far + more often than any setting. Said about checkboxes instead, since that is what the + sentence above is about. */ +input[type="checkbox"] { width: 24px; height: 24px; } @@ -2888,7 +2919,13 @@ button, gap: var(--sp-2); } +/* `flex: none` here for the same reason the coarse-pointer block already says it: a + stated width is only a suggestion to a flex item, and this one sits in a crowded row. + It was declared 32px wide and measured 22 with a mouse — under the 24px floor the + checkbox rule near the top of this file is written to clear, and squeezed by exactly + the mechanism that block had already been bitten by once. */ .chipColorInput { + flex: none; width: 32px; height: 28px; background: none; @@ -4554,17 +4591,23 @@ body.hasActionBar #toastHost { } } -/* The last raw browser control in the tool. - `accent-color` only paints the tick; the box around it stayed the platform's own — - a bright white square, which on this near-black dialog was the loudest thing on - screen and read as unfinished next to controls that had all been drawn. Painted to - match the rest, on the same surface ramp and the same corner radius. */ +/* The one checkbox in the tool that is drawn rather than asked for. + The comment here called it "the last raw browser control", which was not true when + it was written — six more were still the platform's, and they were white because the + page had never declared `color-scheme`. That is fixed at the top of this file, and + fixing it there is what makes this one the exception rather than the rule. + + It stays painted because it is not a setting: it is the control a dealer ticks to + move money, with players watching, and it wants a fill and a tick that read across a + table rather than the platform's 24px square. What painting costs is the browser's + own answer to forced-colors mode, which is bought back below. + + It takes its size from the checkbox rule near the top rather than restating it, so + there is one number for how big a checkbox is here. */ .potWizardChoice input { flex: none; appearance: none; -webkit-appearance: none; - width: 22px; - height: 22px; border: 2px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); @@ -4602,6 +4645,34 @@ body.hasActionBar #toastHost { } } +/* What the paint job owes back. + In forced-colors mode the OS replaces every colour on the page with its own palette, + and a tick drawn as a `background` on a pseudo-element is not a colour it knows how + to replace — it is simply gone. So this box, alone among the tool's checkboxes, had + no visible checked state at all in Windows High Contrast Mode, on the dialog that + pays the table. The system keywords are the fix: they are the only colours + guaranteed to survive, because they *are* the palette. */ +@media (forced-colors: active) { + .potWizardChoice input { + border-color: ButtonBorder; + background: Canvas; + } + + .potWizardChoice input::before { + background: CanvasText; + } + + .potWizardChoice input:checked { + border-color: Highlight; + background: Canvas; + } + + /* The row's own chosen state is a background gradient, which goes the same way. */ + .potWizardChoice.chosen { + outline: 2px solid Highlight; + } +} + /* Selected has to be obvious at a glance — a dealer confirms this with players watching, and a checkbox alone is easy to misread across a table. */ .potWizardChoice.chosen { @@ -5213,12 +5284,6 @@ body.hasActionBar #toastHost { min-height: 44px; } - /* A bare checkbox with no label box around it to grow. */ - #dedicatedDealerToggle { - width: 24px; - height: 24px; - } - /* An underlined word is a 14px-tall target; give it room without making it look like a button. */ .linkBtn { @@ -6047,11 +6112,6 @@ textarea:focus-visible { min-height: 44px; } - #dedicatedDealerToggle { - width: 24px; - height: 24px; - } - /* An underlined word is a 14px-tall target; give it room without making it look like a button. */ .linkBtn { diff --git a/JoshHeaps.Net/wwwroot/css/casino/quicksplit.css b/JoshHeaps.Net/wwwroot/css/casino/quicksplit.css index 252e3c7..a41684d 100644 --- a/JoshHeaps.Net/wwwroot/css/casino/quicksplit.css +++ b/JoshHeaps.Net/wwwroot/css/casino/quicksplit.css @@ -1,6 +1,15 @@ /* Quick Split is phone-first: sized for one thumb at the table, then allowed to breathe on a laptop. Palette matches the dealer table so the two read as one tool. */ +/* And matches it in the half a stylesheet does not paint, for the same reason: this + page is #0a0a0a and had never told the browser so, which leaves the scrollbars, the + caret, the selection and the autofill wash drawn for a light page. It has no + checkboxes to go white, but a dealer who opens it from the felt should not find a + light scrollbar down the side of the darker of the two pages. */ +:root { + color-scheme: dark; +} + body { background: radial-gradient(ellipse at 50% -10%, #1c1c1c 0%, #101010 55%, #0a0a0a 100%); min-height: 100vh; diff --git a/tests/holdem/nativeControls.test.js b/tests/holdem/nativeControls.test.js new file mode 100644 index 0000000..76c263f --- /dev/null +++ b/tests/holdem/nativeControls.test.js @@ -0,0 +1,121 @@ +// The half of the interface the stylesheet does not draw. +// +// The browser draws the checkboxes, the menu a