/* ============================================================
Quiet UI — component layer
Reference language: macOS system UI + the OpenAI Codex app.
Rules this file obeys, so you can keep obeying them:
· nothing is drawn that does not separate two things;
· hairlines instead of borders, surface changes instead of cards;
· shadows only on layers that float (menu, sheet, palette, toast);
· one accent, used for focus / links / active state only;
· colour lives in a marker, never in label text;
· four type sizes; hierarchy comes from weight and ink level.
Usage:
(or "dark")
Every value below is a token. If you need a new number, add a
token — do not hard-code it in a component.
============================================================ */
/* ── base ────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
/* An app shell owns its own scrolling. Remove this on a document page. */
body.app,
html:has(body.app) {
overflow: hidden;
}
body {
font-family: var(--font);
font-size: var(--fs-2);
font-weight: 450;
line-height: 1.45;
letter-spacing: -0.005em;
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
button,
input,
select,
textarea {
font: inherit;
letter-spacing: inherit;
color: inherit;
background: none;
border: 0;
}
button {
cursor: pointer;
}
svg {
display: block;
}
/* REQUIRED: components below are toggled with the hidden attribute. */
[hidden] {
display: none !important;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-radius: var(--r-sm);
}
::selection {
background: var(--accent-fill);
}
input[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--fill-active);
border-radius: var(--r-pill);
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--hairline-strong);
background-clip: content-box;
}
/* ── text helpers ────────────────────────────────────────── */
.ic {
width: 16px;
height: 16px;
flex: none;
}
.num,
.mono {
font-variant-numeric: tabular-nums lining-nums;
}
.mono {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0;
}
.title {
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: -0.018em;
}
.figure {
font-size: var(--fs-4);
font-weight: 500;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums lining-nums;
}
.label {
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-3);
}
.dim {
color: var(--fg-2);
}
.muted {
color: var(--fg-4);
}
.trunc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hint {
font-size: var(--fs-1);
color: var(--fg-4);
}
.hint[data-tone='ok'] {
color: var(--fg-2);
}
.kbd {
font-family: var(--font);
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-3);
background: var(--fill-quiet);
border-radius: var(--r-sm);
padding: 1px 5px;
letter-spacing: 0;
}
/* ── window shell ────────────────────────────────────────── */
.window {
display: grid;
grid-template-columns: var(--w-sidebar) minmax(0, 1fr) 0px;
height: 100dvh;
transition: grid-template-columns 260ms var(--ease);
}
.window[data-inspector='true'] {
grid-template-columns: var(--w-sidebar) minmax(0, 1fr) var(--w-inspector);
}
.window[data-sidebar='hidden'] {
grid-template-columns: 0px minmax(0, 1fr) 0px;
}
.window[data-sidebar='hidden'][data-inspector='true'] {
grid-template-columns: 0px minmax(0, 1fr) var(--w-inspector);
}
/* ── sidebar ─────────────────────────────────────────────── */
.sidebar {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
background: var(--bg-sidebar);
}
.sidebar-top {
padding: var(--s3) var(--s3) var(--s2);
}
.sidebar-scroll {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--s2) var(--s2) var(--s4);
}
.sidebar-foot {
padding: var(--s2);
}
.brand {
display: flex;
align-items: center;
gap: var(--s2);
padding: 0 var(--s1);
}
.mark {
width: 19px;
height: 19px;
color: var(--fg);
}
.brand-name {
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: -0.018em;
}
.nav {
list-style: none;
display: flex;
flex-direction: column;
gap: 1px;
}
.nav-group {
margin-top: var(--s5);
}
.nav-group-title {
display: flex;
align-items: center;
gap: var(--s1);
width: 100%;
padding: 0 var(--s2) var(--s1) 6px;
font-size: var(--fs-1);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--fg-3);
}
.chev {
width: 10px;
height: 10px;
transform: rotate(90deg);
transition: transform var(--dur) var(--ease);
color: var(--fg-4);
}
.nav-group-title[aria-expanded='false'] .chev {
transform: rotate(0deg);
}
.nav-group[data-collapsed='true'] .nav {
display: none;
}
.nav-item,
.foot-btn {
display: flex;
align-items: center;
gap: var(--s2);
width: 100%;
height: 28px;
padding: 0 var(--s2);
border-radius: var(--r-md);
color: var(--fg);
text-align: left;
}
.foot-btn {
color: var(--fg-2);
}
.nav-item .ic,
.foot-btn .ic {
color: var(--fg-2);
width: 15px;
height: 15px;
}
.nav-item:hover,
.foot-btn:hover {
background: var(--fill-hover);
}
.foot-btn:hover {
color: var(--fg);
}
.foot-btn .kbd {
margin-left: auto;
}
.nav-item[aria-current='true'] {
background: var(--fill-select);
font-weight: 600;
}
.nav-item[aria-current='true'] .ic {
color: var(--accent);
}
.nav-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-3);
font-variant-numeric: tabular-nums;
}
/* ── content pane, toolbar, status bar ───────────────────── */
.content {
display: flex;
flex-direction: column;
min-width: 0;
/* The pane is the field a list floats on — not white, so the list can be. */
background: var(--field);
border-left: 1px solid var(--hairline);
}
.toolbar {
display: flex;
align-items: center;
gap: var(--s4);
height: 52px;
flex: none;
padding: 0 var(--s4) 0 var(--s3);
/* The line appears only once content has scrolled under it. */
border-bottom: 1px solid transparent;
transition: border-color var(--dur) linear;
}
.toolbar[data-scrolled='true'] {
border-bottom-color: var(--hairline);
}
.tb-left {
display: flex;
align-items: baseline;
gap: var(--s2);
min-width: 0;
}
.tb-title {
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: -0.018em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tb-count {
font-size: var(--fs-2);
color: var(--fg-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.tb-right {
display: flex;
align-items: center;
gap: var(--s2);
margin-left: auto;
}
.scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: var(--s6);
}
.statusbar {
display: flex;
align-items: center;
gap: var(--s3);
flex: none;
height: 28px;
padding: 0 var(--s5);
border-top: 1px solid var(--hairline);
font-size: var(--fs-1);
color: var(--fg-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
}
.statusbar > span {
flex: none;
}
.statusbar .sep {
color: var(--fg-4);
}
.statusbar .right {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--s3);
}
/* ── buttons ─────────────────────────────────────────────── */
.primary-btn {
display: flex;
align-items: center;
gap: 5px;
height: 28px;
padding: 0 var(--s3) 0 var(--s2);
border-radius: var(--r-md);
background: var(--fg);
color: var(--bg);
font-weight: 600;
white-space: nowrap;
}
.primary-btn:hover {
opacity: 0.85;
}
.primary-btn:active {
opacity: 0.72;
}
.quiet-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 var(--s3);
border-radius: var(--r-md);
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-2);
background: var(--fill-quiet);
}
.quiet-btn svg {
width: 13px;
height: 13px;
color: var(--fg-3);
}
.quiet-btn:hover {
color: var(--fg);
background: var(--fill-active);
}
.quiet-btn:hover svg {
color: var(--fg-2);
}
.quiet-btn[data-danger='true']:hover,
.quiet-btn[data-danger='true']:hover svg {
color: var(--crit);
}
.tb-btn {
display: inline-flex;
min-width: 0;
white-space: nowrap;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 var(--s2);
border-radius: var(--r-md);
font-size: var(--fs-2);
font-weight: 450;
color: var(--fg-2);
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tb-btn .ic {
width: 14px;
height: 14px;
color: var(--fg-3);
}
.tb-btn .sel-chev {
width: 10px;
height: 10px;
color: var(--fg-3);
}
.tb-btn:hover {
background: var(--fill-hover);
color: var(--fg);
}
.tb-btn[data-on='true'] {
background: var(--fill-select);
color: var(--fg);
}
.tb-btn[data-on='true'] .ic {
color: var(--fg-2);
}
.icon-btn {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: var(--r-md);
color: var(--fg-2);
}
.icon-btn:hover {
background: var(--fill-hover);
color: var(--fg);
}
/* Lives inside a row; appears when the pointer arrives. */
.ghost-btn {
height: 22px;
padding: 0 var(--s2);
border-radius: var(--r-sm);
font-size: var(--fs-1);
font-weight: 600;
color: var(--fg-2);
background: var(--fill-quiet);
opacity: 0;
white-space: nowrap;
}
.row:hover .ghost-btn,
.row[aria-selected='true'] .ghost-btn {
opacity: 1;
}
.ghost-btn:hover {
background: var(--fill-active);
color: var(--fg);
}
/* Sheet footer button: same shape as primary, wider padding. */
.act-btn {
height: 28px;
padding: 0 var(--s5);
border-radius: var(--r-md);
font-weight: 600;
background: var(--fg);
color: var(--bg);
white-space: nowrap;
}
.act-btn:hover {
opacity: 0.85;
}
.act-btn[data-role='cancel'] {
background: var(--fill-quiet);
color: var(--fg-2);
font-weight: 500;
}
.act-btn[data-role='cancel']:hover {
background: var(--fill-active);
color: var(--fg);
opacity: 1;
}
/* ── segmented control and search ────────────────────────── */
.segmented {
display: flex;
gap: 2px;
padding: 2px;
border-radius: var(--r-md);
background: var(--fill-quiet);
}
.seg {
height: 24px;
padding: 0 var(--s3);
border-radius: 5px;
font-size: var(--fs-2);
color: var(--fg-2);
white-space: nowrap;
}
.seg:hover {
color: var(--fg);
}
.seg.on {
background: var(--bg);
color: var(--fg);
font-weight: 600;
box-shadow: 0 0 0 0.5px var(--hairline-strong);
}
[data-theme='dark'] .seg.on {
background: var(--fill-active);
box-shadow: none;
}
.search {
display: flex;
align-items: center;
gap: 6px;
width: 190px;
height: 28px;
padding: 0 var(--s2);
border-radius: var(--r-md);
background: var(--fill-quiet);
color: var(--fg-3);
transition: box-shadow var(--dur) var(--ease);
}
.search:focus-within {
box-shadow: 0 0 0 2px var(--accent-fill), inset 0 0 0 1px var(--accent);
}
.search input {
flex: 1;
min-width: 0;
color: var(--fg);
}
.search input::placeholder {
color: var(--fg-3);
}
.search input:focus {
outline: none;
}
/* ── fields ──────────────────────────────────────────────── */
.field {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.field > label {
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-2);
}
.opt {
color: var(--fg-4);
font-weight: 450;
}
.field input,
.field textarea {
width: 100%;
height: 30px;
padding: 0 var(--s3);
border-radius: var(--r-md);
background: var(--fill-quiet);
color: var(--fg);
transition: background var(--dur) var(--ease);
}
.field textarea {
height: auto;
font-size: var(--fs-2);
padding: 7px var(--s3);
resize: vertical;
line-height: 1.5;
font-family: var(--font);
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--fg-4);
}
.field input:focus,
.field textarea:focus {
background: var(--fill-active);
outline: 2px solid var(--accent);
outline-offset: -1px;
}
.field input.mono {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0;
}
.input-wrap {
position: relative;
display: flex;
align-items: center;
}
.row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s4);
}
.select-wrap {
position: relative;
display: flex;
align-items: center;
}
.select-wrap select {
appearance: none;
width: 100%;
height: 30px;
padding: 0 28px 0 var(--s3);
border-radius: var(--r-md);
background: var(--fill-quiet);
color: var(--fg);
cursor: pointer;
}
.select-wrap select:focus {
outline: 2px solid var(--accent);
outline-offset: -1px;
}
.select-wrap .sel-chev {
position: absolute;
right: 9px;
width: 14px;
height: 14px;
color: var(--fg-3);
pointer-events: none;
}
/* ── combo: a text field that remembers ──────────────────── */
.combo-wrap {
position: relative;
display: block;
}
.field input.combo {
padding-right: 26px;
}
.combo-chev {
position: absolute;
top: 0;
right: 0;
display: grid;
place-items: center;
width: 26px;
height: 30px;
color: var(--fg-4);
border-radius: 0 var(--r-md) var(--r-md) 0;
transition: color var(--dur) var(--ease);
}
.combo-chev:hover {
color: var(--fg-2);
}
.combo-chev .ic {
width: 14px;
height: 14px;
}
.combo-menu {
top: calc(100% + 5px);
right: 0;
min-width: 0;
max-height: 216px;
overflow: auto;
overscroll-behavior: contain;
}
.combo-menu .menu-item small {
font-family: var(--mono);
font-size: 0.7rem;
}
/* ── markers and pills ───────────────────────────────────── */
.dot {
width: 6px;
height: 6px;
border-radius: var(--r-pill);
flex: none;
background: var(--fg-4);
}
[data-tone='crit'] .dot {
background: var(--crit);
}
[data-tone='warn'] .dot {
background: var(--warn);
}
/* Healthy needs no colour — green on every row is wallpaper. */
[data-tone='ok'] .dot,
[data-tone='idle'] .dot {
background: var(--fg-4);
}
[data-tone='unset'] .dot {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--fg-4);
}
/* Use only where a state must read out of context: green is allowed here. */
[data-tone='live'] .dot {
background: var(--ok);
}
.pills {
display: flex;
flex-wrap: wrap;
gap: var(--s1);
}
.pill {
font-size: var(--fs-1);
padding: 1px 7px;
border-radius: var(--r-pill);
background: var(--fill-quiet);
color: var(--fg-2);
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--fs-1);
font-weight: 500;
padding: 2px 8px 2px 6px;
border-radius: var(--r-pill);
color: var(--fg-2);
background: var(--fill-quiet);
}
.status-pill[data-tone='idle'] {
color: var(--fg-3);
}
/* ── list ────────────────────────────────────────────────
One measure, centred, on the field. The change of surface is the
whole separation: no border, no shadow. Override --grid per list.
──────────────────────────────────────────────────────── */
.table-wrap {
--grid: 152px 148px minmax(96px, 0.42fr) 92px 132px minmax(200px, 1fr) 106px;
width: min(100% - 2 * var(--s6), var(--w-col));
margin: var(--s5) auto var(--s6);
padding: 0 var(--s2) var(--s2);
background: var(--bg);
border-radius: var(--r-xl);
}
.thead,
.row {
display: grid;
grid-template-columns: var(--grid);
align-items: center;
gap: var(--s4);
/* Text never touches the highlight: the row keeps its own inset. */
padding-inline: var(--s3);
}
.thead {
position: sticky;
top: 0;
z-index: 2;
height: 34px;
background: var(--bg);
border-bottom: 1px solid var(--hairline);
padding-bottom: 2px;
}
.th {
display: flex;
align-items: center;
gap: 3px;
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-3);
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.th:hover {
color: var(--fg);
}
.th.num {
justify-content: flex-end;
}
.th[data-on='true'] {
color: var(--fg);
font-weight: 600;
}
.sortic {
width: 10px;
height: 10px;
opacity: 0;
transition: transform var(--dur) var(--ease);
}
.th[data-on='true'] .sortic {
opacity: 1;
}
.th[data-dir='asc'] .sortic {
transform: rotate(180deg);
}
.group-head {
display: flex;
align-items: center;
gap: var(--s2);
height: 32px;
margin-top: var(--s4);
padding-inline: var(--s3);
font-size: var(--fs-1);
font-weight: 600;
color: var(--fg-2);
}
.group-head small {
font-size: var(--fs-1);
color: var(--fg-4);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.row {
position: relative;
height: var(--h-row);
cursor: default;
border-radius: var(--r-md);
text-align: left;
width: 100%;
color: var(--fg);
}
/* A separator drawn under the row, not as a border, so it can step aside
for the highlight instead of cutting through its corners. */
.row::after {
content: '';
position: absolute;
inset: auto 0 0;
height: 1px;
background: var(--hairline);
}
.row:hover::after,
.row[aria-selected='true']::after,
.row:last-child::after {
display: none;
}
.row:hover {
background: var(--fill-hover);
}
.row[aria-selected='true'] {
background: var(--fill-select);
}
.row > * {
min-width: 0;
}
/* Cell ink levels: the value, then support, then metadata. */
.cell {
min-width: 0;
color: var(--fg);
}
.cell.support {
color: var(--fg-2);
}
.cell.meta {
color: var(--fg-3);
}
.row:hover .cell.meta,
.row[aria-selected='true'] .cell.meta {
color: var(--fg-2);
}
.cell.num {
text-align: right;
font-variant-numeric: tabular-nums lining-nums;
}
.cell.num small {
color: var(--fg-3);
font-size: var(--fs-1);
}
.cell-lead {
display: flex;
align-items: center;
gap: var(--s2);
min-width: 0;
}
.type-ic {
width: 14px;
height: 14px;
color: var(--fg-4);
}
.row:hover .type-ic,
.row[aria-selected='true'] .type-ic {
color: var(--fg-3);
}
/* A value you will want on the clipboard. */
.copy-cell {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
height: 22px;
padding: 0 5px;
margin-left: -5px;
border-radius: var(--r-sm);
color: var(--fg);
}
.copy-cell .mono {
overflow: hidden;
text-overflow: ellipsis;
}
.copy-cell:hover {
background: var(--fill-active);
}
.copy-cell .ic {
width: 11px;
height: 11px;
opacity: 0;
color: var(--fg-3);
}
.row:hover .copy-cell .ic {
opacity: 1;
}
/* marker gutter · fact · quiet gloss — the fact column scans straight
down whether or not a row carries a marker. */
.cell-mark {
display: grid;
grid-template-columns: 6px auto 1fr;
align-items: center;
gap: var(--s2);
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
color: var(--fg);
}
.mark-value {
font-variant-numeric: tabular-nums lining-nums;
}
.mark-gloss {
font-size: var(--fs-1);
color: var(--fg-3);
}
.cell-mark[data-tone='crit'] .mark-gloss {
color: var(--fg-2);
}
.cell-mark[data-tone='idle'],
.cell-mark[data-tone='idle'] .mark-gloss {
color: var(--fg-3);
}
.cell-mark[data-tone='unset'] .mark-value {
color: var(--fg-4);
}
.cell-act {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
}
.row-more {
width: 22px;
height: 22px;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
color: var(--fg-4);
opacity: 0;
}
.row:hover .row-more,
.row[aria-selected='true'] .row-more,
.row-more:focus-visible {
opacity: 1;
}
.row-more:hover {
background: var(--fill-quiet);
color: var(--fg-2);
}
.row-more .ic {
width: 15px;
height: 15px;
}
/* ── key and value (reading, not typing) ─────────────────── */
.kv {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
gap: var(--s3);
align-items: baseline;
padding: 3px 0;
}
.kv dt {
font-size: var(--fs-1);
color: var(--fg-3);
text-align: left;
}
.kv dd {
min-width: 0;
overflow-wrap: anywhere;
}
.kv-group {
margin-top: var(--s4);
padding-top: var(--s4);
border-top: 1px solid var(--hairline);
}
/* ── inspector ───────────────────────────────────────────── */
.inspector {
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--bg-inspector);
border-left: 1px solid var(--hairline);
}
.insp-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--s4) var(--s5) var(--s6);
}
.insp-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s2);
}
/* Secondary and destructive actions sit at the far end, plain text,
out of the way of the everyday ones. */
.insp-quiet {
display: flex;
gap: var(--s4);
margin-top: var(--s5);
padding-top: var(--s4);
border-top: 1px solid var(--hairline);
}
/* ── empty state ─────────────────────────────────────────── */
.empty {
padding: var(--s10) 0;
text-align: center;
}
.empty-t {
font-size: var(--fs-3);
font-weight: 600;
}
.empty-s {
color: var(--fg-3);
margin-top: 2px;
}
.empty-acts {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s3);
}
.empty-cta {
margin-top: var(--s5);
height: 28px;
padding: 0 var(--s5);
border-radius: var(--r-md);
font-size: var(--fs-2);
font-weight: 600;
background: var(--fg);
color: var(--bg);
}
.empty-cta:hover {
opacity: 0.85;
}
/* ── floating layers: the only place a shadow is allowed ─── */
.menu-wrap {
position: relative;
display: flex;
min-width: 0;
}
.menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 60;
min-width: 232px;
padding: var(--s1);
border-radius: var(--r-lg);
background: var(--bg);
box-shadow: var(--shadow-pop);
}
.menu-right {
left: auto;
right: 0;
}
.menu-item {
display: flex;
white-space: nowrap;
align-items: center;
gap: var(--s2);
width: 100%;
height: 30px;
padding: 0 var(--s2);
border-radius: var(--r-md);
font-size: var(--fs-2);
color: var(--fg);
text-align: left;
}
.menu-item .ic {
width: 15px;
height: 15px;
color: var(--fg-3);
flex: none;
}
.menu-item span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.menu-item small {
flex: none;
margin-left: auto;
padding-left: var(--s4);
font-size: var(--fs-1);
color: var(--fg-4);
font-variant-numeric: tabular-nums;
}
.menu-item:hover {
background: var(--fill-hover);
}
.menu-item[data-on='true'] {
background: var(--fill-select);
font-weight: 500;
}
.menu-item[data-on='true'] .ic {
color: var(--fg);
}
.menu-item[data-danger='true'],
.menu-item[data-danger='true'] .ic {
color: var(--crit);
}
.menu-rule {
height: 1px;
margin: var(--s1) 0;
background: var(--hairline);
}
.menu-sect {
padding: var(--s3) var(--s3) var(--s1);
font-size: var(--fs-1);
font-weight: 600;
color: var(--fg-3);
}
.menu-note {
max-width: 280px;
padding: var(--s2) var(--s3);
font-size: var(--fs-1);
line-height: 1.5;
color: var(--fg-3);
}
.menu-note code {
font-family: var(--mono);
color: var(--fg-2);
}
/* Toolbar rtt badge: quiet by default, amber when the path is slow. */
.tb-rtt {
font-family: var(--mono);
font-size: var(--fs-1);
color: var(--fg-3);
white-space: nowrap;
font-variant-numeric: tabular-nums;
cursor: default;
}
.tb-rtt[data-slow='true'] {
color: var(--warn);
}
/* New-session sheet: the ssh public key, one long monospace line. */
.key-input {
width: 100%;
padding: var(--s2) var(--s3);
border-radius: var(--r-md);
background: var(--fill-quiet);
color: var(--fg);
font-family: var(--mono);
font-size: var(--fs-1);
line-height: 1.45;
resize: none;
word-break: break-all;
}
.key-input:focus {
outline: 2px solid var(--accent);
outline-offset: -1px;
}
.key-input::placeholder {
color: var(--fg-3);
}
/* Sheet: a form. Read in place, edit here. */
.sheet-scrim {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: start center;
padding: 8vh var(--s5) var(--s5);
background: rgba(0, 0, 0, 0.14);
overflow: auto;
animation: fade 140ms var(--ease);
}
.sheet {
width: 100%;
max-width: 480px;
background: var(--bg);
border-radius: var(--r-lg);
box-shadow: var(--shadow-pop);
animation: pop 200ms var(--ease);
overflow: hidden;
}
.sheet.wide {
max-width: 720px;
}
.sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s4) var(--s4) var(--s3) var(--s6);
}
.sheet-title {
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: -0.018em;
}
.sheet-body {
padding: 0 var(--s6) var(--s5);
display: flex;
flex-direction: column;
gap: var(--s4);
}
.sheet-rule {
height: 1px;
background: var(--hairline);
margin: var(--s2) 0;
}
.sheet-foot {
display: flex;
align-items: center;
gap: var(--s2);
padding: var(--s3) var(--s4);
background: var(--bg-sidebar);
}
.sheet-foot-note {
flex: 1 1 auto;
font-size: var(--fs-1);
color: var(--fg-4);
}
@media (max-width: 620px) {
.sheet-scrim {
padding: 0;
place-items: stretch;
overflow: hidden;
}
.sheet {
max-width: none;
border-radius: 0;
height: 100dvh;
display: flex;
flex-direction: column;
}
.sheet-body {
flex: 1;
overflow-y: auto;
}
}
/* Command palette: one field, one list, no chrome. */
.palette-scrim {
position: fixed;
inset: 0;
z-index: 70;
display: grid;
place-items: start center;
padding: 12vh var(--s5) var(--s5);
background: rgba(0, 0, 0, 0.14);
animation: fade 120ms var(--ease);
}
.palette {
width: 100%;
max-width: 520px;
padding: var(--s1);
border-radius: var(--r-lg);
background: var(--bg);
box-shadow: var(--shadow-pop);
transform-origin: top center;
animation: pop 160ms var(--ease);
}
.palette-input {
width: 100%;
height: 42px;
padding: 0 var(--s3);
font-size: var(--fs-3);
color: var(--fg);
border-bottom: 1px solid var(--hairline);
}
.palette-input::placeholder {
color: var(--fg-4);
}
.palette-input:focus {
outline: none;
}
.palette-list {
max-height: 320px;
overflow: auto;
overscroll-behavior: contain;
padding-top: var(--s1);
}
/* Toast: carries the reversal instead of asking twice. */
.toast {
display: inline-flex;
align-items: center;
gap: var(--s3);
position: fixed;
left: 50%;
bottom: var(--s6);
transform: translateX(-50%);
z-index: 80;
padding: 7px var(--s4);
border-radius: var(--r-pill);
background: var(--fg);
color: var(--bg);
font-size: var(--fs-2);
font-weight: 500;
box-shadow: var(--shadow-pop);
animation: toastin 180ms var(--ease);
}
.toast-undo {
font-size: var(--fs-2);
font-weight: 600;
color: var(--bg);
opacity: 0.62;
padding-left: var(--s3);
border-left: 1px solid color-mix(in srgb, var(--bg) 30%, transparent);
}
.toast-undo:hover {
opacity: 1;
}
@keyframes fade {
from {
opacity: 0;
}
}
@keyframes pop {
from {
opacity: 0;
transform: translateY(6px) scale(0.985);
}
}
@keyframes toastin {
from {
opacity: 0;
transform: translate(-50%, 8px);
}
}
/* ── responsive: the shell folds, the measure holds ──────── */
@media (max-width: 900px) {
.window,
.window[data-inspector='true'] {
grid-template-columns: 0px minmax(0, 1fr) 0px;
}
.table-wrap {
width: 100%;
margin: 0;
border-radius: 0;
padding-inline: 0;
}
.thead {
display: none;
}
/* Below the fold a row becomes two lines, not a squeezed grid. */
.row {
grid-template-columns: minmax(0, 1fr) auto;
height: auto;
padding: var(--s2) var(--s4);
row-gap: 2px;
gap: var(--s3);
}
/* Small screens: the toolbar keeps the search field and the one primary
action. Optional switches step aside instead of overflowing. */
@media (max-width: 520px) {
.toolbar {
height: auto;
flex-wrap: wrap;
gap: var(--s2);
padding: var(--s2) var(--s3);
}
.tb-left,
.tb-right {
width: 100%;
}
.segmented {
display: none;
}
.search {
min-width: 0;
flex: 1;
}
}