/* V905 -- Score Keeper's stylesheet. Lifted out of templates/cardpoints.html unchanged so the spectator page can wear the same clothes. WHY IT MOVED. A guest watching a game is a SECOND page -- deliberately a separate template, so the hand entry, the settings and the settle screen are not in the markup at all rather than hidden by a class somebody can flip. Two pages wanting one look is what a stylesheet is for, and every other tool of this size already has one (bingo.css, duo.css, tunebook.css). Nothing in here was rewritten in the move; V905's own rules are at the end. */ /* V887 — Card Points. THE WIDE PAGE RULE IS NOT RE-DECLARED HERE. `.page-wide` and its 1600px cap shipped site-wide in V881 (line_escape.css) precisely so a page written after it never types a number again. This file styles the sheet and nothing about width. ONE PANEL PER ROW, TABLES AT width:100% WITH NO min-width, and the columns that are detail rather than answer drop at 1180 (.c-lo) and 900 (.c-mid). Below 900 the hand history becomes cards, because a nine-column table on a phone is a horizontal scroll nobody performs. */ .cp{color:var(--text)} .cp h1{font-size:19px;font-weight:800;margin:0 0 3px} .cp .sub{color:var(--muted2);font-size:13.5px;margin:0 0 14px} .cp .panel{width:100%;border:1px solid var(--line);border-radius:14px; background:var(--panel);overflow:hidden;margin-top:14px} /* V921, HIS ASK: *"reduce the padding further pls"*. 12-20px became 9-14px and the panel headers 11px became 8px. Five panels on a sheet is roughly 60-80px of height back -- most of a hand row on a phone. The clamp shape is kept, not replaced by a flat number: a laptop still gets a little more air than a phone, which is the whole point of the clamp. */ .cp .pad{padding:clamp(9px,1vw,14px) clamp(10px,1.1vw,16px)} .cp .ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap; border-bottom:1px solid var(--line);padding:8px clamp(10px,1.1vw,16px)} /* V1036 --- ONE GAP UNDER THE BLUE BAR, AND IT IS THE SCOREBOARD'S. HIS ASK, with the sheet marked A/B/C: *"what is the height pixel size between the blue bar and content below that for A, B and C. Idle should be height of C to be applied in all"*. MEASURED IN A BROWSER AGAINST THESE STYLESHEETS, not estimated off the screenshot (whose scale is unknown, which is exactly how V1034's sweep measured four states nobody was in): A Players -> the names box 31px B Hand -> the first row 23px C Scoreboard-> the table 9px WHY C WAS ALREADY TIGHTER, which is the whole fix: it is the only one of the three whose body is NOT wrapped in `.pad`. Its 9px is this bar's own breathing room -- 8px of padding and the 1px hairline -- and nothing else. A and B add `.pad`'s 14px on top, and A another 8px from `.rosbox`. SO THE FIX IS SUBTRACTIVE AND THERE IS NO NEW NUMBER IN IT. The top padding goes, and only where the body sits directly under a bar; the sides and the bottom stay, or the content would touch the panel edge. The first child's own top margin goes with it, which is `.rosbox`'s 8px. V1039 TOOK THE `.cp` OFF, his *"apply in all tools all pages"*. The rule was written against `.ph + .pad` and nothing of Score Keeper's own precisely so that this edit would be two characters rather than a second rule. THE SITE-WIDE HALF IS NOT THIS RULE. Other tools use the section band -- `.sec` / `.sechd` / `.secbd` -- which is a FILLED band with no hairline and no padding of its own below it, so there is nothing to subtract and the 9px is written out in line_escape.css instead. Same number, different mechanism, said in both places. ~14px back per panel, about 70px on a five-panel sheet. */ .ph + .pad{padding-top:0} .ph + .pad > :first-child{margin-top:0} .cp .ph h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em; color:var(--muted2);margin:0;font-weight:700;flex:1 1 auto} .cp .tw{width:100%;overflow-x:auto} .cp table{width:100%;min-width:0;border-collapse:collapse;font-size:13.5px} .cp th{text-align:left;color:var(--muted2);font-weight:600;font-size:11.5px; text-transform:uppercase;letter-spacing:.04em;padding:9px clamp(7px,.7vw,13px); border-bottom:1px solid var(--line);white-space:nowrap} .cp td{padding:9px clamp(7px,.7vw,13px);border-bottom:1px solid var(--line); vertical-align:middle} .cp tr:last-child td{border-bottom:0} .cp .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .cp .pos{color:var(--good,#0f9d58);font-weight:700} .cp .neg{color:var(--bad,#d93025);font-weight:700} .cp .btn{border:1px solid var(--line2);background:var(--btn);color:var(--text); border-radius:8px;padding:7px 13px;font:inherit;font-size:13.5px;cursor:pointer} .cp .btn.pri{background:var(--accent);border-color:transparent;color:var(--bg);font-weight:700} .cp .btn.sm{padding:4px 9px;font-size:12px} .cp .btn[disabled]{opacity:.45;cursor:default} /* V900. `hidden` LOSES TO A DISPLAY RULE, and this page now has several boxes that are flex AND hidden -- the selection bar, the paging row, the scan stage. Without this the bar reading "0 games ticked" sat on screen permanently. Same fix V898 shipped for the tab strip, scoped here rather than site-wide. */ .cp [hidden]{display:none !important} .cp input[type=text],.cp input[type=number],.cp input[type=date],.cp select{background:var(--bg); color:var(--text);border:1px solid var(--line2);border-radius:8px; padding:7px 9px;font:inherit;font-size:var(--fld-fs,13.5px);max-width:100%} .cp .row{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .cp .chip{display:inline-block;border:1px solid var(--line2);border-radius:999px; padding:2px 9px;font-size:11.5px;color:var(--muted2)} .cp .chip.on{border-color:var(--accent);color:var(--accent)} /* V1025 --- THE EVENING'S STATE IS A LABEL, NOT A CONTROL. His question, about a gold pill reading "open" next to three real buttons: *"what is the use of this Open button"*. It has none, because it is not one -- it says whether the evening is still open and it reads "closed" after Close & settle. It wore `.chip.on`, the accent border this tool puts on things you press, so it looked like the row's fourth button and invited a tap that does nothing. A control that does nothing when pressed is worse than no control; the same goes for a label that looks like one. */ .cp .chip.state{border-style:dashed;border-color:var(--line2);color:var(--muted2); letter-spacing:.04em;text-transform:lowercase;cursor:default} .cp .chip.state.shut{color:var(--muted3,var(--muted2));opacity:.8} /* V1025 --- THE GAME NAME, EDITED WHERE IT IS READ. It looks like the heading it replaced until you put a cursor in it: no border, no fill, the same size and weight. The box fills the row so a long name is not cut short by a field sized for a short one. 16px IS NOT NEGOTIABLE -- anything smaller is a page zoom on iOS, which on a header input means the whole sheet jumps the moment he taps the name. It is a heading, so it was always going to be larger than that anyway. */ /* V1027 --- AND V1026 BROKE IT THE OTHER WAY. THE WHOLE STORY, THREE TRIES. HIS REPORT EACH TIME WAS THE SAME SENTENCE -- the game name is white on a pale ground and cannot be read. Three releases, three different wrong answers from me, and the reason is that I never checked WHERE THE NAVY ACTUALLY COMES FROM. V1025: white ink, and focus repainted the ground to `var(--bg)`. Readable at rest, invisible the moment you clicked it. V1026: I kept `--hdr-fg` (white) and made the ground TRANSPARENT in every state, writing the rule "takes the band's ink AND ground, or neither" -- and then took the ground away while keeping the ink, which is the one combination the rule forbids. Now it was invisible ALL the time, which is why his third screenshot is worse than his first. THE THING I ASSUMED AND NEVER MEASURED: `.cp .ph` HAS NO BACKGROUND. It is `display:flex` with a bottom hairline, on the page's own ground -- thirty lines up in this file, and I could have read it any time in two releases. There is no navy band behind this input. `.sechd` ON THE INPUT ITSELF was the navy: the element was its own pill, and `background: transparent` deleted the only navy on the row. SO IT TAKES NEITHER, which is the other half of the rule. The name is the page's own heading text on the page's own ground -- `var(--text)`, like every other thing on this row, which is light in a light theme and pale in a dark one BECAUSE THE TOKEN FOLLOWS THE THEME and `--hdr-fg` never did. `.sechd` is off the element in the template too, so no future `.sechd.sechd.sechd` rule can reach in and repaint it. AND THE FOCUS RULE FROM V1026 STAYS, because that part was right: a ring, never a new ground. The text is not repainted at the moment somebody is reading it. THE LESSON, written here rather than in a release note: "it sits on the band" was a belief, not a measurement, and both wrong fixes were built on top of it. When a colour is wrong, read the PARENT'S rule before writing the child's. */ /* V1037: `flex:1 1 0`, not `1 1 auto`. With All games beside it the row has two items and `.ph` is `flex-wrap:wrap` -- an `auto` basis is the input's CONTENT width, so a long name pushed the button onto a second line instead of shrinking. Measured: 78px of header on a 360px phone where 43px is one row. A zero basis makes the name the thing that gives, which is what `min-width:0` and the ellipsis were always for. */ .cp .ph input.cptitle{flex:1 1 0;min-width:0;margin:0;background:transparent; border:1px solid transparent;border-radius:8px;padding:2px 8px; color:var(--text);font:inherit;font-size:17px;font-weight:800; text-overflow:ellipsis;-webkit-text-fill-color:var(--text)} .cp .ph input.cptitle::placeholder{color:var(--muted2);opacity:1} /* V1037: All games sits on the name's row. `flex:0 0 auto` so the NAME is the only elastic thing there -- V1031's rule, which is the whole reason the name stopped being the one cut. The phone query below hides the label. */ /* V1037 --- THE WAY OUT IS GOLD-BORDERED, his ask. `flex:0 0 auto` so the NAME is the only elastic thing on this row -- V1031's rule, and the reason the name stopped being the one cut. RING AND ALL, MATCHING THE SCORE BOX EXACTLY -- his call, asked and answered. I had shipped the border alone on the reasoning that two equally loud golds on one screen would mean two different things, and that the pairing should stay reserved for "type here" among five identical boxes. He wanted them the same, and they are the same: 2px at 22%, the one declaration repeated rather than a second gold invented. THEY ARE NOT ON ONE ROW TOGETHER, which is what makes it hold up: the way out is in the header, the score boxes are inside the hand panel below, and nothing on a given row is competing with anything else for the same gold. */ .cp .ph #cpBack{flex:0 0 auto;border-color:var(--accent);color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)} .cp .ph input.cptitle:hover:not([readonly]){ border-color:color-mix(in srgb,var(--text) 35%,transparent)} /* The ring, and NOT a new ground. `outline` rather than a background so the text is never repainted at the moment somebody is reading it. */ .cp .ph input.cptitle:focus{border-color:var(--accent);background:transparent; outline:2px solid var(--accent);outline-offset:-2px} .cp .ph input.cptitle[readonly]{cursor:default} .cp .muted{color:var(--muted2);font-size:12.5px} .cp .empty{color:var(--muted2);font-size:13.5px;padding:14px 0;text-align:center} /* V921, HIS ASK: *"the running now section shows the name of game in blue colour - it should be white for dark theme as its not being contrast enough"*. He is right and the cause is the element, not the theme: this card is built as a