/* THE COMPOSE ROOM — its styles. The rebuild (15 Oct) moved them here out of
app.css: the New Message window and the inline Reply / Forward composer's own
rules (the sheet, the signature box, the Cc/Bcc links, the compose bar, the
send-later and reminder rows, the Include-signature switch, the number-check
note). 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: rules for classes other rooms share —
.compose-modal (every dialog is one), .from-btn / .from-menu / .from-selector,
.field, .chip-input-*, .rp-compose-field-row and the shared toolbar buttons. */
/* ===================================================================
ROW 1731 — THE SIGNATURE, IN THE COMPOSE BOX
===================================================================
.sig-hint used to live here: an 11.5px line at margin:-4px 0 8px saying
"Your signature will be added when this sends." Two faults in one rule.
The sentence was a promise about something happening somewhere else, and
the -4px pulled it up tight under the textarea, which is what Matt saw as
the signature "grouped too close to the message" — even though what was
tight against it was a rumour of a signature rather than one.
THE GAP IS ONE BLANK LINE, AND IT IS THE SAME BLANK LINE THE MAIL GETS.
pickSignature() on the server joins the message to the signature with a
single
; this is that gap, drawn. Expressed in em rather than pixels so
it stays one line at every one of the interface sizes Settings offers —
tests/test-the-mail-strip.js measures it against the compose box's own
line-height rather than against a number, for the same reason.
IT LOOKS LIKE THE MESSAGE, NOT LIKE A FIELD. No border, no label, no
placeholder: the same family, size and colour as the body above it, sitting
in the same column, because in every mail client worth the name the
signature is simply the bottom of what you are writing. What marks it out
is the blank line and a hairline rule the width of the text — the typed
equivalent of the "--" separator, which is what a reader will see. */
/* A SHEET ON THE DESK, NOT A HOLE IN IT. Rendered in all seven surviving
themes before this line was settled: white against a near-black dialog with
nothing under it reads as a gap where the dialog should be. The border and
the shadow are the two things here that DO follow the theme, and they
should — they are the seam where the letter meets the chrome, and a seam
belongs to both sides of itself. --elev-raised is warm brown on the cream
themes and black on the dark ones, which is the whole reason it is a token,
and it is what makes white on cream read as a page laid on a desk rather
than as a second panel butted up against the first. */
.compose-sheet{ display:flex; flex-direction:column;
background:var(--letter-paper); color:var(--letter-ink);
font-family:var(--letter-font); font-size:var(--letter-type);
border:1px solid var(--glass-border); box-shadow:var(--elev-raised);
border-radius:var(--radius-card); margin-bottom:var(--space-3); overflow:auto; resize:vertical;
transition:border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out); }
/* The focus ring is the sheet's, and it is .field's ring moved outwards
unchanged — the same three rules in the same order, so a compose box looks
like every other box in Lucid that has the keyboard rather than like a new
invention. :focus-within, because the thing with the caret in it is a child
now: typing in the signature has to light the same edge as typing in the
message, or the sheet stops reading as one surface the moment you use it. */
.compose-sheet:focus-within{ border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
:root:not([data-mode="light"]) .compose-sheet:focus-within{
border-color:color-mix(in srgb, var(--accent) 45%, var(--glass-border));
box-shadow:0 0 14px 0 var(--accent-glow); }
/* Matte has no glow to give, and turns every focus ring in the app into a
solid 2px keyline — see the block by .mail-search-input:focus up at the top
of this file. The sheet takes that treatment too, and the child field is
told in the same breath to stop drawing one of its own, because that rule
is !important and would otherwise ring the textarea INSIDE the sheet. */
:root[data-finish="matte"] .compose-sheet:focus-within{
box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
border-color:var(--accent); }
:root[data-finish="matte"] .compose-sheet > .field:focus{
box-shadow:none !important; border-color:transparent !important; }
/* The fields inside give up their chrome to the sheet. Not their padding:
the type has to sit in from the edge or the sheet is a box with words
jammed against the side of it. */
/* AND THEIR COLOUR AND THEIR TYPE, which is the half row 2240 added. .field
is --text on --field-fill at --type-lead in --font-body; on paper that is
light ink on white on half the themes, which is the "dark boxes inside"
Matt was looking at, inverted. Ink, face and size all come off the letter
tokens, so the message he is typing is set in the thing that will arrive.
The placeholder gets the faintest of the three inks rather than
--text-faint: --text-faint is near-white on the dark themes and would be
an invisible placeholder on a white page. */
.compose-sheet > .field{ background:transparent; border:0; border-radius:0;
margin:0; box-shadow:none; color:var(--letter-ink);
font-family:var(--letter-font); font-size:var(--letter-type); line-height:1.5; }
.compose-sheet > .field::placeholder{ color:var(--letter-ink-faint); opacity:1; }
/* MATCHED SELECTOR FOR SELECTOR, NOT JUST BEATEN ON COUNT. Rendered and
looked at before this line existed: a bright band ran the full width of the
sheet exactly where the message box used to end, because
":root:not([data-mode='light']) .field:focus" up at .field is one whole
compound deeper than a plain ".compose-sheet > .field:focus" and kept its
14px accent glow — so the seam the sheet exists to remove was still being
drawn, in light, by the field inside it. The dark-mode rule is answered
with the dark-mode rule and the plain one with the plain one. */
.compose-sheet > .field:focus{ outline:none; box-shadow:none; border-color:transparent; }
:root:not([data-mode="light"]) .compose-sheet > .field:focus{
box-shadow:none; border-color:transparent; }
/* flex:1 so the body takes the slack when the sheet is dragged taller, and
min-height:0 so a long signature cannot squeeze it away to nothing — the
inline min-height on the element is the floor it is allowed to shrink to. */
.compose-sheet > textarea.field{ flex:1 1 auto; resize:none; }
/* THE RULE, AND THE BLANK LINE ABOVE IT. Inset by 14px at each end so it
lines up with the left edge of the type rather than running into the
sheet's own border — the typed equivalent of the "--" a reader will see,
drawn once, on the wrapper, so an HTML signature and a plain-text one get
the identical separator instead of each drawing their own. :not(:empty)
because renderComposeSignature leaves this div completely empty when there
is no signature to show, and a hairline under nothing is a hairline that
means nothing. */
.compose-sheet > .compose-sig{ flex:0 0 auto; margin:var(--space-2) var(--space-4) var(--space-3); }
/* --letter-rule, not --glass-border, and row 2240's reason is at the tokens:
--glass-border is a translucent WHITE on every dark theme, so the moment
the sheet became paper this hairline stopped existing on five of the seven
themes. A separator nobody can see is a separator that is not there. */
/* 15 Oct: NO RULE between the message and the signature any more. Matt: "I dont
understand why the signature is in its own box?" One letter, one page; the
blank line is the only separation, as in every other mail client. */
/* THE SAME FONT STACK AND THE SAME SIZE AS .field, CHARACTER FOR CHARACTER,
and the stack matters as much as the size. .field asks for 'Public Sans'
with no fallback named, so on a machine that cannot reach the webfont it
lands on the browser's default SERIF. A signature that said
'Public Sans, sans-serif' would then be sans under a serif message —
measured here on a container with no font access, where the typed line came
out in Times and the signature under it in Arial. In production both load
the same face and nobody sees it; two stacks that agree only when the
network does is still two stacks.
ROW 2240 SETTLED THAT ARGUMENT BY DELETING BOTH STACKS. Inside a
.compose-sheet — which is every composer in this app, New Message and the
inline reply and forward alike — the message and the signature are both
--letter-font at --letter-type: one name, and the name holds what
_mime.js actually puts on the sent mail. What is below is what remains for
a .compose-sig that is NOT in a sheet, and there is no longer one of those.
It is kept rather than deleted because the override wants something to
override. */
/* Both kinds of signature lose the border they used to draw for themselves,
and keep the one blank line. tests/test-the-mail-strip.js measures that gap
against the body's own line-height rather than against a pixel count.
THE SAME FACE AND SIZE AS THE MESSAGE ABOVE IT, which is what the long note
up at .compose-sig-box has always asked for — it argued that spelling one
stack 'Public Sans' and the other 'Public Sans, sans-serif' was two stacks
that agree only when the network does. They are now one name, --letter-font,
and there is nothing left to disagree. A shade dimmer than the message
because a sign-off is quieter than the paragraph, and still 9.7:1. */
.compose-sheet .compose-sig-box{ display:block; width:100%; box-sizing:border-box;
margin-top:var(--space-3); padding:0; border:0; border-radius:0;
background:transparent; color:var(--letter-ink-dim);
font-family:var(--letter-font); font-size:var(--letter-type); line-height:1.5;
resize:none; min-height:0; overflow:hidden;
transition:color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out); }
/* It IS editable, so it has to answer to a cursor. A box that takes typing
and gives nothing back on focus is one people assume is a label. */
/* IT IS STILL EDITABLE, SO IT STILL HAS TO ANSWER A CURSOR — but the accent
wash it used to answer with was the theme's colour, painted on the one
surface in this app that is not allowed to have one. A neutral tint does
the same job and the letter stays the letter. */
.compose-sheet .compose-sig-box:hover{ background:var(--letter-wash); }
.compose-sheet .compose-sig-box:focus{ outline:none; color:var(--letter-ink);
background:var(--letter-wash); border-top-color:transparent; }
/* The rendered HTML signature — shown at its real size, in its place, and not
editable here because a