/* THE CONTACTS ROOM (view-contacts: In Touch, the People list) — its stylesheet. * * Linked right after app.css (see the room-css markers in index.html). Holds the * rules that only this room's elements use: the tick-box and the bulk bar, the tag * bar, the "people in your mail" strip and dialog, the Add-a-contact form, the * just-saved ring, and the ⋯ More menu on the toolbar. Rules the organisations * room or the contact detail share (.contact-row, .cl-row, .cs-chip, .contact-tag, * .view-mode, .found-x, #contactList's grid) stay in app.css. * * Moved from app.css in the 15 Oct rebuild with the same selectors and * declarations in the same relative order. No !important was ever used on these * rules, so none was removed; the one rule that matched nothing, .contact-filters, * is gone. */ :root[data-mode="light"] .tag-chip.on{ background:linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 82%, var(--neutral-2))); color:var(--on-accent); } /* "The Hellands" is a heading OVER a group of cards, not a card. Without this it takes a cell of its own and the household it names begins in the cell beside it, so the label reads as a sibling of the people it introduces. Wrong at two columns as well; three only makes it easier to see. */ #contactList > .section-label{ grid-column:1 / -1; } .cl-row .contact-pick{ margin:0; } /* ========================================================================== A FORM ABOUT A PERSON — row 1744. ========================================================================== "Pretty generic. Need to move this up in quality quite a bit." The add-a-contact form was six .field boxes stacked down the full width of the page. At 1440 that is a box 1,780 pixels wide to hold a first name; on the screen he actually works on it is half as wide again. A form laid out that way is not laid out — it is what you get when nobody decided, and it reads as exactly that. Three rules, and each is arithmetic rather than taste: · A BOX IS AS WIDE AS WHAT GOES IN IT. Two columns of about 340px, which is twice the longest name anybody types and still wide enough for a long address across both. The form is capped at 760 so it does not grow with the window — nothing in it gets better at 1,200px. · RELATED THINGS SIT TOGETHER. First and last on one line because they are one answer; email and phone on one line because they are one question — how do I reach them; company and role for the same reason. · A LABEL IS NOT A PLACEHOLDER. A placeholder disappears at the exact moment it is needed, which is while the box is being filled in. These are real labels above the box, and the