/* IN TOUCH — its styles. The rebuild (15 Oct) moved them here out of app.css: the Recent grid's cards, the strangers lane, the "Worth a line" rows and their ⋯ menu, and the search box. Loaded right after app.css (see room-css:start in index.html), so a rule here wins a tie with app.css the way it did when it sat further down it. What stays in app.css, on purpose: .people-grid (the contacts page draws the same grid and test-people-screens guards the two copies of its tracks), .contact-row and .glass (the cards ARE those), and the shared #view-comms / #view-contacts keep-out for the orb. */ /* ====================================================================== IN TOUCH — the people list, ordered by when you last spoke. ====================================================================== "text and contacts should be the same tab and call it communication (or something clever)" (Matt, 3 September.) A ROW IS A PERSON, and the four things on it are the four halves of the question: who, what channel, when, and the last line. The channel is a colour AND an icon — never colour alone, the rule TL_KIND states in app.js — and it is the SAME four colours the contact timeline uses, so a teal mark means "text" on this page and on the page it opens. --tl-kind is written per row from TL_KIND, exactly as .tl-row does it, so a fifth channel is one line in that map and nothing here. Everything else is a token: no hex anywhere below, which is what keeps the twelve themes and the matte finishes working without a second block per theme. THE PREFIX IS cmm-, NOT cm-, AND THAT IS NOT A TYPO. `.cm-mid` already exists further down this file as one of the three dialog widths (narrow / mid / wide), and this page's middle column was called `.cm-mid` for about an hour. The result was a row whose text stopped 370 pixels short of its own right-hand edge, in every theme, with nothing on screen to say why — the card-width rule was simply winning. Found by measuring the box, not by looking at it, which is the only way that one was ever going to be found. */ .cmm-row{ display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-2); cursor:pointer; position:relative; border-left:2px solid color-mix(in srgb, var(--tl-kind, var(--text-dim)) 55%, transparent); transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .cmm-row:hover{ background:color-mix(in srgb, var(--tl-kind, var(--text-dim)) 7%, transparent); } .cmm-row:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; } .cmm-mid{ flex:1; min-width:0; } .cmm-top{ display:flex; align-items:center; gap:var(--space-2); } .cmm-name{ font-size:var(--type-body); font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* The channel mark. Sized by the row rather than by the icon's own viewBox so mail and chat and call all occupy the same 14px whatever their path. */ .cmm-chan{ flex:none; display:inline-flex; width:14px; height:14px; color:var(--tl-kind, var(--text-dim)); /* On a card the mark sits where All People puts its tick-box: top right of the card's head row, so the two grids line up at a glance. */ margin-top:var(--space-1); } .cmm-chan svg{ width:100%; height:100%; } .cmm-when{ flex:none; margin-left:auto; font-size:var(--type-label); color:var(--text-faint); white-space:nowrap; } .cmm-said{ margin-top:var(--space-1); font-size:var(--type-body); line-height:1.45; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* "You:" IS --text-dim, NOT --text-faint. --text-faint measured 4.9:1 on the flat row this used to be drawn on and 3.72:1 on the card, because a .contact-row carries a channel-coloured wash across its left third in every dark theme and the words sit in it. Caught by tests/test-readability.js, which measures ink against the PIXELS behind it rather than against the token it was given. */ .cmm-you{ font-weight:700; color:var(--text-dim); } /* A message imported without its words is a fact, not a blank. --text-dim rather than --text-faint for the same reason the empty states take it: this is the only sentence on the row, so it has to be readable. */ .cmm-nowords{ font-style:italic; color:var(--text-dim); } .cmm-acts{ flex:none; display:flex; align-items:center; gap:var(--space-2); } @media (max-width: 620px){ .cmm-row{ flex-wrap:wrap; } .cmm-acts{ width:100%; justify-content:flex-end; } } /* Name and time on one line, with the time hard right — the only thing this card carries that the contacts card does not. .cmm-top is already a flex row and .cmm-when already has margin-left:auto, so this only has to stop a long name pushing the date off the end. */ .cmm-card .cmm-top{ gap:var(--space-3); min-width:0; } .cmm-card .contact-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Two lines rather than one. A card is half as wide as the block it replaced, so a single clipped line would show about twenty characters — which is a snippet that has stopped being a snippet. */ .cmm-card .cmm-said{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* THE LANE FOR NUMBERS AND ADDRESSES ON NOBODY'S CARD. Dashed, because these cards are a question rather than a record, and not pressable as a whole, because the two verbs on them are the only things that do anything — so the card must not look like a door that opens (.contact-row's hover and cursor would otherwise say it was one). */ .contact-row.cmm-unknown{ cursor:default; /* All four sides written out. .contact-row sets border-left:none and the matte block replaces it with a 3px keyline, so `border-style:dashed` alone produced a card dashed on three sides and keylined on the fourth — which looked like a rendering fault rather than like a lane. Colour mixed off --text-dim so it is quiet on a near-black ground and on cream without a token per theme. */ border:1px dashed color-mix(in srgb, var(--text-dim) 50%, transparent); } .contact-row.cmm-unknown:hover{ transform:none; border-color:color-mix(in srgb, var(--text-dim) 50%, transparent); } .cmm-card .cmm-acts{ margin-top:auto; padding-top:var(--space-hair); } /* The ⋯ on a "worth a line" prompt — row 1740. The trigger sits at the right edge of a full-width row, so the menu opens leftward, exactly as #composeMoreMenu already does for the same reason. inline-block because the anchor is a inside a flex row, and position:relative on a bare inline box is not a positioning context an absolute child can be measured against reliably. */ .itp-more{ display:inline-block; position:relative; } .itp-more .from-menu{ left:auto; right:0; text-align:left; } .itp-more > .ht-verb{ letter-spacing:.14em; } /* THE WHOLE BLOCK, ROLLED UP — row 2153. ------------------------------------------------------------------------ "worth a line should rollup under a chevron on contact page." (Matt, 15 September.) .cd-know-head and .cd-know-chevron do the work, unchanged: this is the same disclosure the contact card uses for "How you know each other" and for "Keeping up & watching", and there is one of those in Lucid rather than two. All that is needed here is the hairline that turns a head inside a card into a head standing on a page. THE HAIRLINE IS UNDER THE HEAD, NOT ROUND THE BLOCK. A border on four sides would make this a card, and it sits directly above a grid of cards — two card edges a pixel apart is how a page stops having a structure. */ .itp-head{ padding-bottom:var(--space-2); border-bottom:1px solid var(--glass-border); } .itp-head:focus-visible{ outline:2px solid var(--ring); outline-offset:var(--space-1); border-radius:var(--radius-control); } /* On a card the head is 300px wide and space-between puts the chevron where the eye already is. Worth a line spans the whole page, and space-between left the chevron 1290px from the words it belongs to. */ .cd-know-head.itp-head{ display:inline-flex; justify-content:flex-start; gap:var(--space-2); } #cmmSearch{ max-width:none; }