@ssebastien/tcmd 0.1.4 → 0.1.7

package/public/style.css

@@ -10,7 +10,17 @@
 
 /* Palette mirrors tui/theme.js DARK: night-blue surfaces, gold accents,
    saturated orange marks. */
+@font-face {
+	font-family: "M+1Code Nerd Font Mono";
+	src: url("./fonts/M+1CodeNerdFontMono-Regular.ttf") format("truetype");
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+}
+
 :root {
+	--font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	--font-mono: "M+1Code Nerd Font Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
 	--bg: #0d1526;
 	--bg-panel: #111b31;
 	--bg-raised: #18233d;
@@ -20,13 +30,21 @@
 	/* The command panel's argument value fields. */
 	--bg-field: #1b2a51;
 	--border: #33508f;
+	/* The active pane's border/header rule: the explorer's Tiny blue, the
+	   commander's gold accent (kept in sync with tui/theme.js). */
+	--pane-active-explorer: #4088ff;
+	--pane-active-commander: #ffc233;
 	--text: #e6ecff;
 	--text-dim: #8fa3d9;
+	--scrollbar-track: transparent;
+	--scrollbar-thumb: #22345e;
 	--accent: #ffc233;
 	--accent-soft: #2b3f78;
 	--dir: #5c8cff;
 	--link: #4fc3ff;
 	--dev: #b48eff;
+	--exec: #5fd67a;
+	--readonly: #7d8ab8;
 	--mark: #ff7a1a;
 	--error: #ff4d5e;
 	--warning: #ffb020;
@@ -43,6 +61,32 @@
 	box-sizing: border-box;
 }
 
+/* Every scrollable surface gets a visible, thin bar only while overflowing.
+   The WebKit rules keep Chromium/Electron and Safari consistent with Firefox. */
+:is(.desktop-toolbar, .file-list, .preview-text, .preview-card, .panel-ops, .panel-args, .panel-args-scroll, .bookmark-rows, .overlay-rows, .help-columns) {
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+:is(.desktop-toolbar, .file-list, .preview-text, .preview-card, .panel-ops, .panel-args, .panel-args-scroll, .bookmark-rows, .overlay-rows, .help-columns)::-webkit-scrollbar {
+	width: 0.65rem;
+	height: 0.65rem;
+}
+
+:is(.desktop-toolbar, .file-list, .preview-text, .preview-card, .panel-ops, .panel-args, .panel-args-scroll, .bookmark-rows, .overlay-rows, .help-columns)::-webkit-scrollbar-track {
+	background: var(--scrollbar-track);
+}
+
+:is(.desktop-toolbar, .file-list, .preview-text, .preview-card, .panel-ops, .panel-args, .panel-args-scroll, .bookmark-rows, .overlay-rows, .help-columns)::-webkit-scrollbar-thumb {
+	background: var(--scrollbar-thumb);
+	border: 2px solid var(--scrollbar-track);
+	border-radius: 999px;
+}
+
+:is(.desktop-toolbar, .file-list, .preview-text, .preview-card, .panel-ops, .panel-args, .panel-args-scroll, .bookmark-rows, .overlay-rows, .help-columns)::-webkit-scrollbar-thumb:hover {
+	background: var(--accent);
+}
+
 html,
 body,
 #app {
@@ -53,7 +97,22 @@ body,
 body {
 	background: var(--bg);
 	color: var(--text);
-	font: 13px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+	font: 13px/1.45 var(--font-ui);
+}
+
+/* File and path content keeps a fixed-width face; the surrounding controls use
+   the native system UI font above. */
+.file-row,
+.breadcrumbs,
+.entry-detail,
+.summary,
+.preview-text,
+.panel-picker-path,
+.panel-row[data-type="entry"] .panel-name,
+.panel-row[data-type="parent"] .panel-name,
+.panel-list-box,
+.bookmark-path {
+	font-family: var(--font-mono);
 }
 
 .app {
@@ -89,9 +148,19 @@ body {
 }
 
 /* The mode word shimmers like the brand: explorer along the Tiny blues,
-   commander along the Cmd oranges. */
+   commander along the Cmd oranges. Clicking it toggles the view mode. */
 .app-header-mode {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
 	font-weight: 600;
+	cursor: pointer;
+}
+
+.header-mode-icon {
+	width: 0.8rem;
+	height: 0.8rem;
+	color: var(--accent);
 }
 
 .app-header-mode.mode-explorer {
@@ -101,6 +170,10 @@ body {
 	color: transparent;
 }
 
+.app-header-mode.mode-explorer .header-mode-icon {
+	color: var(--pane-active-explorer);
+}
+
 .app-header-mode.mode-commander {
 	background: linear-gradient(90deg, var(--brand-cmd-from), var(--brand-cmd-to));
 	-webkit-background-clip: text;
@@ -131,6 +204,98 @@ body {
 	color: transparent;
 }
 
+/* Desktop chrome -------------------------------------------------------- */
+
+.desktop-toolbar {
+	display: flex;
+	align-items: center;
+	flex: none;
+	gap: 0.45rem;
+	min-height: 2.55rem;
+	padding: 0.3rem 0.55rem;
+	border-bottom: 1px solid var(--border);
+	background: linear-gradient(180deg, #17243c, var(--bg-panel));
+	white-space: nowrap;
+	overflow-x: auto;
+}
+
+.desktop-toolbar-group {
+	display: flex;
+	align-items: center;
+	gap: 0.35rem;
+	flex: none;
+}
+
+.desktop-toolbar-spacer {
+	flex: 1;
+	min-width: 0.5rem;
+}
+
+.desktop-toolbar-separator {
+	flex: none;
+	height: 1.35rem;
+	border-left: 1px solid var(--border);
+}
+
+.desktop-toolbar-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.4rem;
+	min-height: 1.9rem;
+	padding: 0.2rem 0.55rem;
+	border: 1px solid transparent;
+	border-radius: 5px;
+	background: transparent;
+	color: var(--text-dim);
+	font: inherit;
+	font-size: 12px;
+	cursor: pointer;
+}
+
+.desktop-toolbar-button:hover {
+	border-color: var(--border);
+	background: var(--bg-raised);
+	color: var(--text);
+}
+
+.desktop-toolbar-button.is-primary {
+	border-color: var(--accent-soft);
+	background: #202f50;
+	color: var(--text);
+}
+
+.desktop-toolbar-button.is-primary:hover {
+	border-color: var(--accent);
+	background: #283b62;
+}
+
+.ui-icon {
+	flex: none;
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 2;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
+.lucide-defs {
+	display: none;
+}
+
+.toolbar-icon {
+	width: 1rem;
+	height: 1rem;
+	color: var(--accent);
+}
+
+.toolbar-chevron {
+	width: 0.75rem;
+	height: 0.75rem;
+	margin-left: -0.2rem;
+	color: var(--text-dim);
+}
+
 /* Panes ---------------------------------------------------------------- */
 
 .panes {
@@ -152,7 +317,12 @@ body {
 }
 
 .pane.is-active {
-	border-color: var(--accent);
+	border-color: var(--pane-active-commander);
+}
+
+/* Explorer tints the active pane with the Tiny blue instead of the gold. */
+.app.is-explorer .pane.is-active {
+	border-color: var(--pane-active-explorer);
 }
 
 /* Explorer mode: the middle (current) column carries the extra width, the
@@ -176,7 +346,11 @@ body {
 }
 
 .pane.is-active .pane-header {
-	border-bottom-color: var(--accent);
+	border-bottom-color: var(--pane-active-commander);
+}
+
+.app.is-explorer .pane.is-active .pane-header {
+	border-bottom-color: var(--pane-active-explorer);
 }
 
 .pane-header > div {
@@ -247,9 +421,9 @@ body {
 
 .file-row {
 	display: grid;
-	grid-template-columns: 1.1rem minmax(0, 1fr) auto;
+	grid-template-columns: 1.1rem 1rem minmax(0, 1fr) auto;
 	gap: 0.4rem;
-	align-items: baseline;
+	align-items: center;
 	padding: 0 0.35rem;
 	white-space: nowrap;
 	cursor: pointer;
@@ -280,6 +454,24 @@ body {
 	color: var(--mark);
 }
 
+.file-row-icon {
+	width: 1rem;
+	height: 1rem;
+	color: var(--text-dim);
+}
+
+.file-row[data-kind="dir"] .file-row-icon {
+	color: var(--dir);
+}
+
+.file-row[data-kind="link"] .file-row-icon {
+	color: var(--link);
+}
+
+.file-row[data-kind="dev"] .file-row-icon {
+	color: var(--dev);
+}
+
 .name {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -290,6 +482,14 @@ body {
 	font-weight: 600;
 }
 
+.name.is-exec {
+	color: var(--exec);
+}
+
+.name.is-readonly {
+	color: var(--readonly);
+}
+
 .file-row[data-kind="link"] .name {
 	color: var(--link);
 }
@@ -350,6 +550,14 @@ body {
 	color: var(--dev);
 }
 
+.entry-detail-type.is-exec {
+	color: var(--exec);
+}
+
+.entry-detail-type.is-readonly {
+	color: var(--readonly);
+}
+
 .entry-detail-mode {
 	color: var(--accent);
 }
@@ -479,15 +687,6 @@ body {
 	color: var(--text-dim);
 }
 
-.preview-actions {
-	flex: none;
-	/* The rule that separates the shortcuts from the contents above them. */
-	border-top: 1px solid var(--border);
-	padding-top: 0.35rem;
-	color: var(--text-dim);
-	font-size: 11px;
-}
-
 /* Command bar ---------------------------------------------------------- */
 
 .command-bar {
@@ -505,8 +704,10 @@ body {
 
 .command-bar-keys {
 	display: flex;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	gap: 0.45rem;
+	min-width: 0;
+	overflow: hidden;
 }
 
 .command-key {
@@ -518,6 +719,7 @@ body {
 	font: inherit;
 	font-size: 11px;
 	padding: 0.05rem 0.4rem;
+	white-space: nowrap;
 }
 
 .command-key:hover {
@@ -606,6 +808,7 @@ input:focus-visible {
 }
 
 .command-dialog {
+	position: relative;
 	height: 72vh;
 }
 
@@ -614,7 +817,7 @@ input:focus-visible {
 	width: min(640px, 95vw);
 }
 
-.command-dialog > header,
+.panel-title,
 .help-dialog > header,
 .bookmark-dialog h2 {
 	color: var(--text);
@@ -623,6 +826,29 @@ input:focus-visible {
 	margin: 0 0 0.4rem;
 }
 
+/* The dialog's close action sits in the top border like a close button: the
+   panel background masks the border run underneath it. */
+.panel-close {
+	position: absolute;
+	top: -0.55rem;
+	right: 0.9rem;
+	z-index: 2;
+	padding: 0 0.3rem;
+	border: none;
+	border-radius: 3px;
+	background: var(--bg-panel);
+	color: var(--text-dim);
+	font: inherit;
+	line-height: 1.1;
+	cursor: pointer;
+}
+
+.panel-close:hover,
+.panel-close:focus-visible {
+	color: var(--text);
+	background: var(--accent-soft);
+}
+
 .panel-query-line,
 .panel-value-line,
 .bookmark-dialog > header {
@@ -656,34 +882,157 @@ input:focus-visible {
 	font-weight: 600;
 }
 
-/* The resolved command, dim, at the foot of the argument pane. */
-.panel-runs {
-	margin-top: auto;
-	padding: 0.4rem 0.6rem 0.2rem;
+/* The argument pane's rows: an aligned label + boxed value field for an
+   argument, and a bordered list of selected paths under a selection. */
+.panel-row[data-type="arg"] .panel-name {
+	white-space: pre;
 	color: var(--text-dim);
-	overflow: auto;
+}
+
+.panel-row[data-type="arg"].is-focused .panel-name {
+	color: var(--accent);
+}
+
+.panel-row[data-type="group"] {
+	padding-top: 0.45rem;
+	cursor: default;
+	font-size: 0.82em;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+}
+
+.panel-row[data-type="group"][data-group="White"] {
+	color: var(--text);
+}
+
+.panel-row[data-type="group"][data-group="Amber"] {
+	color: var(--warning);
+}
+
+.panel-row[data-type="group"][data-group="Red"] {
+	color: var(--error);
+}
+
+.panel-row[data-type="op"] {
+	padding-left: 1.5rem;
+}
+
+.panel-row[data-type="run"] {
+	justify-content: flex-start;
+	margin-top: 0;
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+}
+
+.panel-preview {
+	flex: 0 1 auto;
 	max-height: 20vh;
+	margin: 0;
+	padding: 0.35rem 0.6rem;
 	border-top: 1px solid var(--border);
+	color: var(--text-dim);
+	overflow: auto;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	font: inherit;
+}
+
+.panel-run-action {
+	flex: none;
+	list-style: none;
+	margin: 0;
+	padding: 0 0.6rem 0.4rem 0;
+}
+
+.panel-run-button {
+	padding: 0.15rem 0.7rem;
+	border: 1px solid var(--text);
+	border-radius: 4px;
+	background: transparent;
+	color: var(--text);
+	font: inherit;
+	cursor: pointer;
+}
+
+.panel-row[data-type="run"].is-focused .panel-run-button {
+	background: var(--accent-soft);
+}
+
+.panel-row[data-type="run"][data-risk="caution"] .panel-run-button {
+	border-color: var(--warning);
+	color: var(--warning);
+}
+
+.panel-row[data-type="run"][data-risk="destructive"] .panel-run-button {
+	border-color: var(--error);
+	color: var(--error);
+}
+
+.panel-run-error-block {
+	margin: 0.25rem 0.6rem 0.35rem 0.5rem;
+	padding: 0.25rem 0.5rem;
+	border: 1px solid var(--error);
+	border-radius: 4px;
+}
+
+.panel-run-error-block p {
+	margin: 0;
+	color: var(--error);
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
 }
 
-.panel-runs pre {
+/* The armed command, printed below `[Confirm]` in the action's risk colour. */
+.panel-confirm-command {
 	margin: 0;
+	padding: 0.15rem 0.6rem 0.4rem 0.5rem;
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
-	font: inherit;
 }
 
-/* The argument pane's rows: an aligned label + boxed value field for an
-   argument, and a bordered list of selected paths under a selection. */
-.panel-row[data-type="arg"] .panel-name {
-	white-space: pre;
+.panel-confirm-command[data-risk="caution"] {
+	color: var(--warning);
+}
+
+.panel-confirm-command[data-risk="destructive"] {
+	color: var(--error);
+}
+
+/* A permission class row: a label and three r/w/x cells. */
+.panel-perm {
+	display: inline-flex;
+	align-items: baseline;
+	gap: 0.6rem;
+}
+
+.panel-perm-class {
+	width: 3.5rem;
 	color: var(--text-dim);
 }
 
-.panel-row[data-type="arg"].is-focused .panel-name {
+.panel-perm-bit {
+	width: 1.4rem;
+	padding: 0;
+	border: none;
+	border-radius: 3px;
+	background: transparent;
+	color: var(--text-dim);
+	font: inherit;
+	font-weight: 600;
+	text-align: center;
+	cursor: pointer;
+}
+
+.panel-perm-bit.is-on {
 	color: var(--accent);
 }
 
+.panel-perm-bit.is-bit-focused {
+	background: var(--accent-soft);
+	color: var(--text);
+}
+
 .panel-field {
 	display: inline-flex;
 	align-items: baseline;
@@ -691,9 +1040,28 @@ input:focus-visible {
 	min-width: 0;
 	background: var(--bg-field);
 	border-radius: 3px;
+	border: 1px solid var(--border);
 	padding: 0 0.25rem;
 }
 
+.panel-field[data-editable="false"] {
+	background: transparent;
+	border-color: transparent;
+	padding-left: 0;
+}
+
+.panel-field[data-editable="true"] {
+	border-color: var(--accent-soft);
+}
+
+.panel-field[data-editable="false"] .panel-field-bracket {
+	display: none;
+}
+
+.panel-field[data-editable="false"] .panel-field-value {
+	color: var(--text-dim);
+}
+
 .panel-field-bracket {
 	color: var(--text-dim);
 }
@@ -773,6 +1141,23 @@ input:focus-visible {
 	min-height: 0;
 }
 
+.panel-ops {
+	flex: 1 1 0;
+}
+
+/* The argument pane scrolls as a whole so the Run action follows the last
+   field instead of being pinned to the bottom of the column. */
+.panel-args-scroll {
+	flex: 1 1 0;
+	min-height: 0;
+	overflow: auto;
+}
+
+.panel-args {
+	flex: none;
+	overflow: visible;
+}
+
 /* The argument column: an empty state (a TinyCmd action binds no arguments)
    above the rows, with the divider on the column rather than the list so both
    stay visible. */
@@ -784,14 +1169,29 @@ input:focus-visible {
 }
 
 .panel-args-empty {
-	margin: 0;
-	padding: 0.3rem 0.6rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.1rem;
+	margin: 0.3rem 0;
+	padding: 0 0.6rem;
 	color: var(--text-dim);
-	font-style: italic;
 }
 
-/* File picker sub-mode: the browsed path, its filter, then the entry rows
+
+
+/* File picker sub-mode: a nested pane containing its path, filter and entries
    (which reuse `.panel-row` through the shared arg-row map). */
+.panel-picker-pane {
+	display: flex;
+	flex: 1 1 0;
+	flex-direction: column;
+	min-height: 0;
+	margin: 0.35rem 0.5rem 0.5rem;
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	overflow: hidden;
+}
+
 .panel-picker {
 	display: flex;
 	flex-direction: column;
@@ -800,12 +1200,23 @@ input:focus-visible {
 	border-bottom: 1px solid var(--border);
 }
 
+.panel-picker-rows {
+	flex: 1 1 0;
+}
+
 .panel-picker-path {
+	flex: 1;
+	min-width: 0;
 	margin: 0;
-	color: var(--text-dim);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	padding: 0;
+	background: transparent;
+	border: none;
+	color: var(--text);
+	font: inherit;
+}
+
+.panel-picker-path:focus {
+	outline: none;
 }
 
 .panel-picker-line {
@@ -814,13 +1225,15 @@ input:focus-visible {
 	gap: 0.5rem;
 }
 
-.panel-picker-query {
-	flex: 1;
-	min-width: 0;
-	background: transparent;
-	border: none;
-	color: var(--text);
-	font: inherit;
+.panel-picker-icon {
+	width: 1rem;
+	height: 1rem;
+	color: var(--accent);
+}
+
+.panel-picker-rows .picker-row {
+	padding-left: 0.6rem;
+	padding-right: 0.6rem;
 }
 
 .panel-row,
@@ -833,6 +1246,44 @@ input:focus-visible {
 	cursor: pointer;
 }
 
+.bookmark-icon {
+	width: 0.9rem;
+	height: 0.9rem;
+	align-self: center;
+	color: var(--text-dim);
+}
+
+/* An argument stacks its label over its value: the marker and label on the
+   first line, the value field aligned under the label on the second. */
+.panel-row[data-type="arg"] {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	grid-template-rows: auto auto;
+	row-gap: 0.1rem;
+	align-items: baseline;
+}
+
+/* Labels and values start one space in from the pane border. */
+.panel-args .panel-row[data-type="arg"],
+.panel-args .panel-row[data-type="perm"],
+.panel-run-action .panel-row {
+	padding-left: 0.5rem;
+}
+
+.panel-row[data-type="arg"] > .panel-marker {
+	display: none;
+}
+
+.panel-row[data-type="arg"] > .panel-name {
+	grid-area: 1 / 1;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.panel-row[data-type="arg"] > .panel-field {
+	grid-area: 2 / 1;
+}
+
 .panel-row.is-focused,
 .bookmark-row.is-selected {
 	background: var(--accent-soft);
@@ -852,6 +1303,18 @@ input:focus-visible {
 	text-overflow: ellipsis;
 }
 
+.panel-op-chevron {
+	width: 0.9rem;
+	height: 0.9rem;
+	flex: none;
+	margin-left: auto;
+	color: var(--text-dim);
+}
+
+.panel-row.is-focused .panel-op-chevron {
+	color: var(--accent);
+}
+
 .panel-row.is-focused .panel-name {
 	color: var(--accent);
 }
@@ -871,18 +1334,169 @@ input:focus-visible {
 .command-dialog > footer,
 .bookmark-dialog > footer,
 .help-dialog > footer,
-.bookmark-target,
 .bookmark-empty {
 	color: var(--text-dim);
 	padding-top: 0.3rem;
 }
 
-.help-dialog pre {
+/* Shared list overlay (history / trash) --------------------------------- */
+
+.overlay-list {
+	position: fixed;
+	inset: 0;
+	z-index: 18;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+	background: rgb(0 0 0 / 45%);
+}
+
+.overlay-dialog {
+	display: flex;
+	flex-direction: column;
+	width: min(640px, 95vw);
+	max-height: 85vh;
+	min-height: 0;
+	padding: 0.6rem;
+	border: 1px solid var(--accent);
+	border-radius: 6px;
+	background: var(--bg-panel);
+}
+
+.overlay-dialog h2 {
+	color: var(--text);
 	font: inherit;
+	font-weight: 600;
+	margin: 0 0 0.4rem;
+}
+
+.overlay-rows {
+	list-style: none;
+	margin: 0;
+	padding: 0.3rem 0;
 	overflow: auto;
 	min-height: 0;
 }
 
+.overlay-row {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	padding: 0.15rem 0.3rem;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+.overlay-row[data-current="true"] {
+	background: var(--accent-soft);
+}
+
+.overlay-marker {
+	color: var(--accent);
+	white-space: pre;
+}
+
+.overlay-text {
+	color: var(--text);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.overlay-row[data-dim="true"] .overlay-text {
+	color: var(--text-dim);
+}
+
+.overlay-row[data-current="true"] .overlay-text {
+	color: var(--accent);
+}
+
+.overlay-meta {
+	margin-left: auto;
+	color: var(--text-dim);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.overlay-dialog > footer,
+.overlay-empty {
+	color: var(--text-dim);
+	padding-top: 0.3rem;
+}
+
+.help-columns {
+	display: flex;
+	gap: 1.5rem;
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+}
+
+.help-column {
+	flex: 1;
+	min-width: 0;
+}
+
+.help-block {
+	min-height: 1.2em;
+}
+
+.help-section {
+	color: var(--text);
+	font-weight: 700;
+	letter-spacing: 0.04em;
+}
+
+.help-entry {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	max-width: 100%;
+	min-height: 1.55rem;
+	padding: 0 0.4rem;
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	background: var(--bg-raised);
+	white-space: nowrap;
+}
+
+.help-icon {
+	width: 0.9rem;
+	height: 0.9rem;
+	color: var(--accent);
+}
+
+.help-title {
+	color: var(--text);
+}
+
+.help-entry .help-title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.help-key {
+	color: var(--accent);
+}
+
+.help-entry .help-key {
+	flex: none;
+	padding-left: 0.35rem;
+	border-left: 1px solid var(--border);
+	font: 11px/1.5 var(--font-mono);
+}
+
+.help-bracket {
+	color: var(--text-dim);
+}
+
+.help-footer {
+	border-top: 1px solid var(--accent);
+	padding-top: 0.3rem;
+}
+
 .viewer > .preview {
 	flex: none;
 	width: 90%;