/*
* LunaPin's own stylesheet.
*
* Deliberately tiny. The lunula toolkit injects its own stylesheet at mount
* (`injectLunulaStyles`) and owns everything structural — the app frame, the top bar,
* the tab strip, the window chrome, the sidebars. What is left for this file is the
* inside of a window, which is the only surface LunaPin draws itself.
*
* Every colour and font here is a `var(--…)` the toolkit sets from the active theme,
* never a literal. That is what makes the window bodies follow a theme change — and
* a dark/light flip — without LunaPin knowing a single colour value.
*
* Four surfaces, in the order they appear below: the inside of a window, the account
* corner of the top bar, the sign-in dialog and the signed-out landing page.
*
* The dialog is the one with real work in it, and even there the *frame* is the toolkit's:
* `.dt-modal-backdrop`, `.dt-modal`, `.dt-modal-title`, `.dt-modal-buttons`,
* `.dt-modal-btn` and `.dt-modal-input` all come from lunula.css, so LunaPin has one kind
* of dialog rather than two that nearly match. What is here is what the toolkit has no
* opinion about — a form's proportions, monospace micro-labels, a password reveal, two
* banners and four states of one button.
*/
html,
body {
height: 100%;
margin: 0;
}
/*
* The document's base face, and the one rule in this file that names a font stack.
*
* The toolkit hardcodes a face on `.dt-app-frame` (the shell) and on `.dt-modal` (which is
* appended to ``, outside the frame), but nothing paints `` itself — so every
* surface LunaPin mounts out here, the landing page above all, had no font-family in its
* whole inheritance chain and rendered in the browser's default serif.
*
* `--dt-font-prop` is the toolkit's proportional-content token, published from
* `AppShellSpec.defaultProseFontFamily` (see main.kt) and overridden by the user's own pick
* in Appearance settings. The fallback stack behind it is the same one `.dt-app-frame`
* hardcodes, and it earns its place twice: the shell publishes the token from an async init
* coroutine, so the first painted frame has no token yet, and the toolkit clears the token
* outright for anyone who somehow has neither a pick nor an app default. Either way the
* page is sans, and either way a real token still wins.
*
* Having it here is also what makes every `var(--dt-font-*)` below safe without a stack of
* its own: an undefined custom property makes `font-family` invalid at computed-value time,
* which for an inherited property means "inherit" — so those rules degrade to this one
* rather than to the browser's serif.
*/
body {
font-family: var(--dt-font-prop, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, sans-serif);
}
/* ── The inside of a window ─────────────────────────────────────────────────── */
.lp-hello {
/* The toolkit's `.dt-pane-content` is the parent and owns the scroll; this only
centres within whatever space it is given, at any window size. */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 100%;
padding: 1.5rem;
box-sizing: border-box;
text-align: center;
}
.lp-hello-greeting {
/* `--dt-font-display` is the toolkit's heading surface, which falls back through
prose to the chrome font — so this reads as the app's own face whether or not a
font has been chosen. */
font-family: var(--dt-font-display);
font-size: 1.75rem;
font-weight: 600;
color: var(--t-text);
}
.lp-hello-account {
font-family: var(--dt-font-prop);
font-size: 0.8125rem;
/* Muted rather than hidden: it is context, not content. */
color: var(--t-text-dim);
}
.lp-hello-loading {
font-family: var(--dt-font-prop);
font-size: 0.8125rem;
color: var(--t-text-dim);
}
.lp-hello-failed {
font-family: var(--dt-font-prop);
font-size: 0.8125rem;
color: var(--t-danger, var(--t-text));
}
/* ── The account corner ─────────────────────────────────────────────────────── */
/*
* Sits in the toolkit's `.dt-topbar-trailing`, which already lays its children out in
* a centred row, so this only has to not fight it. Empty for a whole state — before the
* session has resolved — and `display: flex` on an empty box is zero-width, which is
* what makes "nothing" cost nothing.
*/
.lp-account {
display: flex;
align-items: center;
}
/*
* A text button in the chrome's own voice.
*
* Every token here is a `--t-chrome-*` one rather than the `--t-*` pane equivalents,
* because this button sits in the top bar and a theme may paint that band separately
* from the canvas. The toolkit's own `.dt-topbar-icon-button` was the obvious thing to
* wear and is the wrong size by construction: it is a fixed 30×30 icon box, and this
* has words in it. So the hover treatment is copied from that rule rather than invented
* — same `--t-chrome-track` fill, same 0.12s, same 4px radius — and the geometry is the
* only thing that differs.
*/
.lp-account-btn {
appearance: none;
background: transparent;
border: 0;
border-radius: 4px;
padding: 0 8px;
height: 30px;
font-family: inherit;
font-size: 0.8125rem;
color: var(--t-chrome-text-dim, var(--t-text-dim));
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.lp-account-btn:hover:not(:disabled),
.lp-account-btn[aria-expanded="true"] {
background: var(--t-chrome-track, rgba(255, 255, 255, 0.08));
color: var(--t-chrome-text, var(--t-text));
}
.lp-account-btn:disabled {
cursor: default;
}
/*
* A sign-out the server refused, beside the name it failed to remove.
*
* In the top bar rather than in a dialog, because it is a report rather than a decision —
* there is nothing to press, and the useful thing is that it sits next to the account it
* is about. Clipped rather than wrapped: the top bar has a fixed height and a wrapping
* sentence would push the whole strip taller. The element carries the full text as its
* tooltip and `role="alert"`, so neither a pointer nor a screen reader is left with the
* clipped half.
*/
.lp-account-error {
max-width: 16rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 8px;
font-size: 0.75rem;
line-height: 30px;
color: var(--t-danger-text, var(--t-danger));
}
/* The signed-in name reads as content rather than as a control offering itself: it is
what the corner is *for*, and the menu under it is the incidental part. */
.lp-account-name {
color: var(--t-chrome-text, var(--t-text));
max-width: 14rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* ── The sign-in dialog ─────────────────────────────────────────────────────── */
/*
* ── Why every rule below names the toolkit class it overrides ────────────────
*
* This stylesheet is a `` in index.html; the toolkit's is a `