oxedyne/daimond/www/css/models.css
11.4 KiB, 1 run
created by r2519314175:1115, which is this file's identity for as long as the history lasts, whatever it is later renamed to
download · who wrote it · its history
| 1 | /* models.css — the providers, and the models behind them. */ |
| 2 | |
| 3 | .models-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } |
| 4 | |
| 5 | .models-empty { |
| 6 | padding: 12px; border: 1px dashed var(--border-2); border-radius: 8px; |
| 7 | color: var(--text-secondary); font-size: var(--fs-xs); text-align: center; |
| 8 | } |
| 9 | |
| 10 | .models-prov { border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; } |
| 11 | |
| 12 | /* Same reason as the model rows below: the name is built to wrap in the rail |
| 13 | (see .models-prov-name, which breaks between whole facts), and a disclosure |
| 14 | caret centred against two or three lines of it points at the middle of the |
| 15 | name rather than at the line it opens. */ |
| 16 | .settings-section .models-prov-head { |
| 17 | display: flex; align-items: flex-start; gap: 8px; width: 100%; |
| 18 | padding: 8px 10px; cursor: pointer; text-align: left; |
| 19 | background: var(--bg-tertiary); border: 0; color: var(--text-primary); |
| 20 | font-size: var(--fs-xs); |
| 21 | } |
| 22 | .settings-section .models-prov-head:hover { background: var(--bg-hover); } |
| 23 | .models-caret { width: 10px; color: var(--text-secondary); } |
| 24 | .models-prov-name { font-weight: 600; flex: 1; } |
| 25 | .models-prov-key { font-size: var(--fs-2xs); color: var(--text-secondary); } |
| 26 | .models-prov-count{ font-size: var(--fs-2xs); color: var(--text-secondary); min-width: 68px; text-align: right; } |
| 27 | |
| 28 | .models-prov-body { display: flex; flex-direction: column; padding: 4px; gap: 2px; } |
| 29 | |
| 30 | /* Top, not centre. The id is `word-break: break-all` in a column that is about |
| 31 | 90px wide once the star and the chips have taken their share of a 220px rail, |
| 32 | and model ids run to thirty characters -- so two and three line rows are the |
| 33 | normal case here, not the exception. Centred, the star and the DEFAULT chip |
| 34 | floated halfway down the block, level with nothing. They belong on the id's |
| 35 | first line, which is where the row starts. Single-line rows do not move: every |
| 36 | item on one is within a pixel of the same height. */ |
| 37 | .settings-section .models-model { |
| 38 | display: flex; align-items: flex-start; gap: 8px; width: 100%; |
| 39 | padding: 5px 8px; border-radius: 6px; cursor: pointer; text-align: left; |
| 40 | background: transparent; border: 0; color: var(--text-secondary); |
| 41 | font-family: var(--font-mono); font-size: var(--fs-2xs); |
| 42 | } |
| 43 | .settings-section .models-model:hover { background: var(--bg-hover); color: var(--text-primary); } |
| 44 | .models-model.on { color: var(--accent-text); background: var(--accent-soft); } |
| 45 | .models-star { width: 12px; } |
| 46 | .models-id { flex: 1; word-break: break-all; } |
| 47 | /* var(--font-sans) does not exist, so the badge inherited the row's monospace |
| 48 | -- the one thing it is meant NOT to look like. */ |
| 49 | .models-def { |
| 50 | font-family: var(--font); font-size: var(--fs-3xs); font-weight: 600; |
| 51 | padding: 1px 6px; border-radius: 999px; |
| 52 | background: var(--accent); color: var(--on-fill, #fff); |
| 53 | } |
| 54 | |
| 55 | /* The radius is the skin's, not a number: `--radius-sm` is 6px in the sharp skin, so nothing |
| 56 | moves there, and 10px in the warm one, where a 6px button beside a 10px field was the one |
| 57 | square corner in a rounded panel. */ |
| 58 | .settings-section .models-refetch, .settings-section .models-remove, .settings-section .models-add { |
| 59 | padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-2xs); |
| 60 | background: var(--bg-tertiary); border: 1px solid var(--border-strong); |
| 61 | color: var(--text-secondary); |
| 62 | } |
| 63 | .settings-section .models-refetch:hover, .settings-section .models-remove:hover, .settings-section .models-add:hover { |
| 64 | background: var(--bg-hover); color: var(--text-primary); |
| 65 | } |
| 66 | .settings-section .models-refetch:disabled { opacity: .5; cursor: default; } |
| 67 | .settings-section .models-remove { align-self: flex-start; margin-top: 4px; } |
| 68 | .settings-section .models-add { width: 100%; } |
| 69 | |
| 70 | /* How old the model list is, under the button that asks for it again. A caveat on |
| 71 | the list above rather than a second heading, so it takes the chip size and the |
| 72 | secondary ink the rest of the provider furniture uses. No stale state: a |
| 73 | catalogue does not go out of date the way a balance does. */ |
| 74 | .models-list-age { |
| 75 | padding: 2px 2px 4px; |
| 76 | font-size: var(--fs-2xs); line-height: 1.45; |
| 77 | color: var(--text-secondary); |
| 78 | } |
| 79 | |
| 80 | .models-default { |
| 81 | margin-top: 6px; padding: 6px 2px; |
| 82 | font-size: var(--fs-2xs); color: var(--text-secondary); |
| 83 | border-top: 1px solid var(--border); |
| 84 | } |
| 85 | |
| 86 | /* The drafting-model row: a label and its select, under the default. A refinement of |
| 87 | the default rather than a peer of it, so it is quieter -- no rule above it, and the |
| 88 | label at the panel's chip size. */ |
| 89 | .models-draft { |
| 90 | margin-top: 4px; padding: 2px; |
| 91 | font-size: var(--fs-2xs); color: var(--text-secondary); |
| 92 | } |
| 93 | .models-draft-lab { |
| 94 | display: flex; align-items: center; gap: 6px; |
| 95 | } |
| 96 | .models-draft-sel { |
| 97 | flex: 1 1 auto; min-width: 0; |
| 98 | } |
| 99 | |
| 100 | /* What is left on this provider's key, inside its expanded body. It sits between the provider |
| 101 | head and the model rows, so it is ruled off from both rather than floating between them; and |
| 102 | it is built entirely from the panel's own tokens, which is what carries it across dark, light |
| 103 | and lollypop, and across both skins, without a single override. |
| 104 | |
| 105 | It is drawn as two zones, because it does two things: it STATES what is left, and it offers |
| 106 | the ways of changing that answer. The statement keeps the raised surface and is read at the |
| 107 | panel's reading size; the affordances sit below a rule on the recessed surface. A person |
| 108 | glancing at the row wants the figure, and finds it first; a person who has come to correct |
| 109 | the figure is looking for a field, and a field is what the foot of the block is. */ |
| 110 | .models-credit { |
| 111 | display: flex; flex-direction: column; |
| 112 | margin: 4px 4px 6px; |
| 113 | border: 1px solid var(--border-2); border-radius: var(--radius-sm); |
| 114 | background: var(--bg-tertiary); |
| 115 | /* So the control strip's corners are the card's corners, in either skin. */ |
| 116 | overflow: hidden; |
| 117 | } |
| 118 | /* The sentence that says what is known and how it is known. It wraps: a manual figure names the |
| 119 | base, the estimated spend and the date, and cutting that short would lose the caveat. It is |
| 120 | the block's headline, so it is set in the panel's ordinary reading size and its ordinary |
| 121 | text colour, rather than at the chip size the rest of the provider furniture uses. */ |
| 122 | .models-credit-line { |
| 123 | padding: 9px 11px 8px; |
| 124 | font-size: var(--fs-xs); line-height: 1.5; |
| 125 | color: var(--text-primary); |
| 126 | } |
| 127 | /* How old the figure above it is, and whether the last attempt to renew it answered. |
| 128 | |
| 129 | It is set below the statement it qualifies, at the chip size the rest of the provider |
| 130 | furniture uses and in the secondary ink: it is a caveat on the figure, not a second figure, |
| 131 | and a line that competed with the amount would make the amount harder to read for the sake |
| 132 | of something read once. `.stale` lifts it a rung, to the ink the panel's own sentences are |
| 133 | set in, because past a certain age the caveat IS the message. |
| 134 | |
| 135 | NOT `--warn`, which is what this reached for first. That token is a dot and a pill's |
| 136 | lettering, and dev/verify_theme records it at 1.95 against its worst surface on Lollypop |
| 137 | where a word needs 4.5 -- so an amber caution here would have been invisible on one palette |
| 138 | and short on several. A rung of the text ramp carries the emphasis on all eleven, because |
| 139 | the ramp is the thing that is held to the floor. */ |
| 140 | .models-credit-age { |
| 141 | padding: 0 11px 8px; |
| 142 | font-size: var(--fs-2xs); line-height: 1.45; |
| 143 | color: var(--text-secondary); |
| 144 | } |
| 145 | .models-credit-age.stale { color: var(--text-primary); font-weight: 600; } |
| 146 | /* And the same on the closed row's balance, which is all a passer-by sees. Dotted, because a |
| 147 | solid rule under a number reads as a link; in the number's OWN ink, for the reason above, |
| 148 | with the words in the tooltip. */ |
| 149 | .models-bal[data-stale] { |
| 150 | text-decoration: underline dotted; |
| 151 | text-underline-offset: 2px; |
| 152 | text-decoration-color: currentColor; |
| 153 | } |
| 154 | |
| 155 | /* Asking the provider is the other way of answering the same question, so it stays on the |
| 156 | statement's surface -- and keeps its own width, which is what says it acts on this one key |
| 157 | rather than on the row it sits in. */ |
| 158 | .settings-section .models-credit > .models-refetch { |
| 159 | align-self: flex-start; |
| 160 | margin: 0 11px 9px; |
| 161 | } |
| 162 | /* The user's own figure: a field and the button that commits it, on one line, filling the |
| 163 | block's width so the pair reads as one control rather than two loose ones. `stretch` is what |
| 164 | balances the pair -- the button takes the field's height exactly, rather than landing near |
| 165 | it -- and the strip runs the full width of the card, ruled off from the figure above. */ |
| 166 | .models-credit-form { |
| 167 | display: flex; align-items: stretch; gap: 6px; width: 100%; |
| 168 | padding: 8px 11px 9px; |
| 169 | border-top: 1px solid var(--border); |
| 170 | background: var(--bg-secondary); |
| 171 | } |
| 172 | .settings-section .models-credit-form > .models-refetch { flex: none; white-space: nowrap; } |
| 173 | /* Sized to the buttons beside it (`.models-refetch`), NOT to `.settings-section input`, whose |
| 174 | 9px/base is a form-field scale and would tower over the row. Monospace, as the balance on the |
| 175 | provider row is: an amount is read digit by digit. The well is the deepest surface, which is |
| 176 | the one shade that is recessed in all three palettes rather than only in the dark one. */ |
| 177 | .settings-section .models-credit-input { |
| 178 | flex: 1; min-width: 0; |
| 179 | padding: 6px 8px; font-size: var(--fs-2xs); |
| 180 | font-family: var(--font-mono); |
| 181 | background: var(--bg-primary); border: 1px solid var(--border-strong); |
| 182 | border-radius: var(--radius-sm); color: var(--text-primary); |
| 183 | transition: border-color .12s ease; |
| 184 | } |
| 185 | /* Rest, hover, focus, in three steps: the border firms up under the pointer, and takes the |
| 186 | accent once the field is being typed in. |
| 187 | THE THIRD STEP USED TO BE INVISIBLE. It was `outline: none` plus a 3px ring in |
| 188 | `--accent-soft`, and `--accent-soft` is a tint of the surface it is drawn on: measured |
| 189 | 1.03-1.48 against `--bg-primary`, `--bg-secondary` and `--bg-tertiary` on all eleven |
| 190 | palettes, where WCAG 2.2 SC 2.4.11 asks 3.0 of a focus indicator. What was left was the |
| 191 | border recoloured to `--accent`, which is 1.11-1.81 against the `--border-strong` it |
| 192 | replaces -- so this field had, in effect, no focus mark at all. The soft ring is dropped |
| 193 | for the same real outline the app's other twenty-one fields carry, drawn outside the |
| 194 | control against the surface, where it measures 3.87-6.75. The three steps survive: the |
| 195 | pointer firms the border, the keyboard draws the ring. */ |
| 196 | .settings-section .models-credit-input:hover { border-color: var(--text-muted); } |
| 197 | .settings-section .models-credit-input:focus { |
| 198 | outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); |
| 199 | } |
| 200 | /* The quiet rung, plainly, like the other ten placeholders in this app. |
| 201 | `--text-secondary` at `opacity: .7` looked like the same idea and was not: the |
| 202 | dimming composites the ink towards the field's own ground, and the result |
| 203 | measured 2.99 (Lollypop), 3.00 (Light), 3.08 (Mist), 3.21 (Sage), 3.27 |
| 204 | (Linen) -- the lowest readings of any text in the app, in the band where the |
| 205 | surfaces are palest and there is least room to lose. A placeholder is text a |
| 206 | person reads to find out what the field wants; WCAG 2.2 SC 1.4.3 exempts it |
| 207 | from nothing. `--text-muted` is the rung for this and carries 4.83-6.65 on |
| 208 | `--bg-primary` across the eleven. */ |
| 209 | .settings-section .models-credit-input::placeholder { color: var(--text-muted); } |
| 210 | /* And the caret's own ring on the buttons, matching the admin rows: a button that answered only |
| 211 | to hover left a keyboard user with nothing to see. */ |
| 212 | .settings-section .models-credit .models-refetch:focus-visible { |
| 213 | outline: 2px solid var(--accent); outline-offset: 1px; |
| 214 | } |