/* The labelling panes, shared by the labeller and by the tutorial. * * Extracted from label.html so the tutorial can show the REAL panes rather than a drawing * of them. A picture of a control goes stale the moment the control changes and nothing * says so; a live copy styled by this file cannot look different from the thing it * documents, because it IS the thing. * * Positioning stays with each page: label.html fixes the rail and the file list to the * viewport, and the tutorial neutralises that so a pane sits in the document flow. */ .pane { box-sizing: border-box; padding: 10px 12px; background: #1e1e26; border: 1px solid #33333f; border-radius: 6px; flex: none; display: flex; flex-direction: column; gap: 8px; } /* Directly under the instruments, not pinned to the floor. Pinned, it sat alone at the bottom of a rail with 200 px of nothing above it, which reads as a layout fault rather than as emphasis. */ /* One box held six unrelated things: which tooth is selected, what the brush does, how big it is, the whole chart, the tally and the save. Grouping them costs a rule and a heading each and makes the panel answerable at a glance. */ .pane section { display: flex; flex-direction: column; gap: 6px; } .pane section + section { border-top: 1px solid #33333f; padding-top: 8px; } /* The two paint panes look alike -- pick a thing, then drag -- and nothing said that one changes what a surface IS and the other changes WHICH TOOTH owns it. That ambiguity cost a real labelling session. */ .what { margin: -4px 0 0; font-size: 13px; color: #6f6f7d; } .pane h2, #files h2 { margin: 0; font: 600 12px/1 -apple-system, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6f6f7d; } /* The arch list. It did not exist: the only way to open a different arch was to edit ?stem= in the address bar, which is not a thing to ask a dental assistant to do. */ /* A picker, not a directory. It held the full height of the window to show 199 rows of a list you touch twice a session -- once to open an arch, once to move on. Asked: "at what point does the UI need 100+ arches listed? It's a severe waste of space." Capped at a quarter of the window, with a filter, because a short list you can search beats a long one you scroll. */ /* Shrinks a hundred times more readily than the panes below it: when the window is short the list is the thing that should give way, not the controls. */ #files { flex: 0 100 auto; min-height: 142px; max-height: 32vh; padding: 10px 0 6px; display: flex; flex-direction: column; overflow: hidden; } #files h2 { padding: 0 12px 6px; flex: none; } #files h2 span { color: #a6a6b2; letter-spacing: 0; } #filefind { flex: none; margin: 0 12px 6px; padding: 4px 8px; font: inherit; font-size: 14px; background: #14141a; color: #e8e8ea; border: 1px solid #3a3a46; border-radius: 4px; } #filefind::placeholder { color: #6f6f7d; } #filelist { flex: 1; min-height: 0; overflow-y: auto; } #filelist.none::after { content: 'nothing matches'; display: block; padding: 6px 12px; color: #6f6f7d; } #filelist button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 12px; border: 0; background: none; cursor: pointer; color: #a6a6b2; font: inherit; text-align: left; } #filelist button:hover { background: #26262f; } #filelist button.on { background: #e8e8ea; color: #14141a; } #filelist .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #3a3a46; } #filelist button.on .dot { background: #45454f; } #filelist .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #filelist .jaw { margin-left: auto; padding-left: 8px; font-size: 12.5px; color: #6f6f7d; } #filelist button.on .jaw { color: #45454f; } #row { display: flex; gap: 8px; align-items: center; } #sel { flex: 1; color: #a6a6b2; } #fdi { width: 56px; padding: 4px 6px; font: inherit; font-variant-numeric: tabular-nums; text-align: center; background: #14141a; color: #e8e8ea; border: 1px solid #4a4a58; border-radius: 4px; } #fdi:disabled { opacity: 0.35; } #fdi.bad { border-color: #c05252; } #chart { display: grid; grid-template-columns: repeat(8, 1fr) 8px repeat(8, 1fr); gap: 2px; } #chart button { font: 500 12.5px/20px ui-monospace, Menlo, monospace; padding: 0; border: 1px solid #33333f; border-radius: 3px; cursor: pointer; background: #14141a; color: #55555f; } #chart .gap { border: 0; background: none; cursor: default; } /* the midline */ #chart .has { background: #e8e8ea; color: #14141a; border-color: #e8e8ea; } #chart .gone { background: #2a2a33; color: #8a8a96; text-decoration: line-through; } #chart .dup { background: #c05252; color: #fff; border-color: #c05252; } .modes { display: flex; flex-direction: column; } .modes button { font: inherit; padding: 5px 8px; border: 1px solid #3a3a46; background: #14141a; color: #a6a6b2; cursor: pointer; text-align: left; } .modes button + button { border-top: 0; } .modes button:first-child { border-radius: 4px 4px 0 0; } .modes button:last-child { border-radius: 0 0 4px 4px; } .modes button:only-child { border-radius: 4px; } .modes button.on { background: #e8e8ea; color: #14141a; border-color: #e8e8ea; } /* The swatch is the class's own colour from palette.js, so the button says what it paints rather than only naming it. The ring is why a dark class still reads as a swatch. Other / foreign body is rgb(66,71,87) -- cold slate, chosen to say "not anatomy" against pink gum and white enamel, where it works. On this near-black row it measures 1.98:1, against 6.3 for gingiva and 15.4 for enamel, and the square simply vanishes. Recolouring the class would have fixed the pane and broken the arch, so the pane is what changed. */ .modes button.needs { color: #6a6a76; } .modes button .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: baseline; box-shadow: inset 0 0 0 1px rgba(232, 232, 234, .45); } #surface > button, #brush > button { font: inherit; padding: 5px 8px; border: 1px solid #3a3a46; border-radius: 4px; background: #14141a; color: #a6a6b2; cursor: pointer; text-align: left; } /* Brush width was the one action with no control at all -- [ and ] and nothing to click. An operator who never reads the tutorial could not change it. A class rather than an id because there are two of these now: the brush paints, and the line tool's pull width says how much boundary one drag moves. */ .stepper { display: flex; align-items: stretch; } .stepper button { font: inherit; width: 30px; flex: none; cursor: pointer; border: 1px solid #3a3a46; background: #14141a; color: #a6a6b2; } .stepper button:first-child { border-radius: 4px 0 0 4px; } .stepper button:last-child { border-radius: 0 4px 4px 0; border-left: 0; } .stepper button:disabled { opacity: .35; cursor: default; } .stepval { flex: 1; text-align: center; padding: 5px 0; color: #8a8a96; border: 1px solid #3a3a46; border-left: 0; border-right: 0; font-variant-numeric: tabular-nums; } /* Label, track, readout on one row: the number has to sit next to the thing it describes or four sliders become four anonymous tracks. */ .slider { display: grid; grid-template-columns: 3.4em 1fr 3.2em; align-items: center; gap: 8px; margin: 2px 0; color: #8a8a96; } .slider input { width: 100%; margin: 0; accent-color: #2fd4ff; cursor: pointer; } .slider span { text-align: right; font-variant-numeric: tabular-nums; } #vreset { width: 100%; margin-top: 6px; } #flag { font: inherit; padding: 4px 8px; border: 1px solid #3a3a46; border-radius: 4px; background: #14141a; color: #a6a6b2; cursor: pointer; } #flag:disabled { opacity: .35; cursor: default; } #flag.on { background: #6a5acd; border-color: #6a5acd; color: #fff; } /* Side by side rather than three stacked full-width buttons. Stacked they cost 60 px of the right column, which came out of the arch list -- and Approve is hidden for everyone but a reviewer, so two of the three slots were usually empty anyway. */ #commitrow { display: flex; gap: 6px; } #commitrow button { flex: 1; } #save { font: inherit; padding: 6px 12px; border-radius: 5px; border: 0; cursor: pointer; background: #e8e8ea; color: #14141a; } #save:disabled, #finalize:disabled, #approve:disabled { opacity: .35; cursor: default; } /* Finalize and Approve are quieter than Save. Save is pressed many times an arch; the other two happen once each, and a button styled like the primary action invites being pressed like one. */ #finalize, #approve { font: inherit; padding: 6px 12px; border-radius: 5px; cursor: pointer; background: #14141a; color: #e8e8ea; border: 1px solid #4a4a58; } /* Green, matching the state it produces. Approve is the only button here whose colour is a promise about the dot it will set. */ #approve { border-color: #6fb26f; color: #b6e0b6; } #statusnow { color: #8a8a96; font-size: 13.5px; } /* The Arches list, by how far along each arch is. */ #filelist .in_progress .dot { background: #d8a93a; } #filelist .ready .dot { background: #29a8e0; } #filelist .approved .dot { background: #6fb26f; } /* The selected row is white, so the same three again dark enough to read on it. Without these `#filelist button.on .dot` wins on specificity -- it carries an extra type selector -- and the arch you are actually working on is the one whose state you cannot see. It was worse than that before: every saved arch also carried a `done` class whose selected-row rule painted the dot GREEN, so an in-progress arch read as approved for exactly as long as it was open. */ #filelist button.on.in_progress .dot { background: #8a6410; } #filelist button.on.ready .dot { background: #14607e; } #filelist button.on.approved .dot { background: #2c722c; } #tally { color: #8a8a96; font-size: 13.5px; } #tally.bad { color: #e08a8a; } /* Over the arch now, beside the mode banner -- see #say in label.html. Dark against the light banner so the two do not read as one control, and gone entirely when there is nothing to say: an empty pill floating over a tooth is worse than silence. */ #msg { background: #14141aee; color: #ffb3ab; font-weight: 600; } #msg:empty { display: none; }