feat: v0.6.0 light mode, command palette, dialogs, toasts
- Light mode with the house ☀/◐ toggle and lt_theme preference; light terminal palette; Claude runs with dark-ansi so its colours follow the palette; tmux and the statusLine use ANSI colours. - Command palette (⌕, Ctrl+Shift+P) with session, terminal, view, link and help commands. - .lt-modal dialogs for new/rename/end and a keyboard shortcuts sheet. - .lt-toast results for actions, uploads, copy and CI. - ttyd dropped the reply of fast one-shot commands; replies now wait for the browser to hang up, and the client hangs up as soon as it has one. - Sessions panel re-fetches after an action instead of reusing a stale poll. Closes #31 Closes #32 Closes #33 Closes #34 Closes #35 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
+110
@@ -569,3 +569,113 @@ body.dd-touch .dd-footer {
|
||||
.dd-footer .lt-footer-hints .lt-footer-hint:nth-child(n + 5),
|
||||
.dd-footer .lt-footer-sep:nth-child(n + 4) { display: none; }
|
||||
}
|
||||
|
||||
/* ---- light theme (devdesk#31) ---------------------------------------------------
|
||||
base.css restyles every lt- component; these cover DevDesk's own pieces. */
|
||||
html[data-theme="light"] .dd-sidebar,
|
||||
html[data-theme="light"] .dd-footer { background-image: none; }
|
||||
html[data-theme="light"] .dd-overlay { background: rgba(237, 240, 245, 0.82); }
|
||||
html[data-theme="light"] .dd-backdrop { background: rgba(17, 24, 39, 0.28); }
|
||||
html[data-theme="light"] .dd-menu { box-shadow: 0 8px 28px rgba(50, 80, 130, 0.22), var(--box-glow-cyan); }
|
||||
html[data-theme="light"] .dd-drop-overlay { background: var(--accent-cyan-dim); }
|
||||
html[data-theme="light"] .dd-upload-status { box-shadow: 0 4px 16px rgba(50, 80, 130, 0.18); }
|
||||
html[data-theme="light"] .dd-session-item.is-waiting,
|
||||
html[data-theme="light"] .dd-session-chip[data-state="waiting"],
|
||||
html[data-theme="light"] .dd-upload-status.is-error { border-color: rgba(181, 0, 31, 0.35); }
|
||||
html[data-theme="light"] .dd-badge { color: #ffffff; }
|
||||
html[data-theme="light"] .dd-session-chip[data-state="working"] .dd-state-dot,
|
||||
html[data-theme="light"] .dd-session-chip[data-state="waiting"] .dd-state-dot { box-shadow: none; }
|
||||
@media (max-width: 1099px) {
|
||||
html[data-theme="light"] .dd-sidebar { box-shadow: -8px 0 28px rgba(50, 80, 130, 0.22); }
|
||||
}
|
||||
|
||||
.dd-header .lt-theme-btn { flex: 0 0 auto; }
|
||||
|
||||
/* ---- command palette, dialogs, toasts (devdesk#32-#34) ---------------------------- */
|
||||
.dd-cmd-btn { font-size: 0.8rem; letter-spacing: 0.02em; }
|
||||
.dd-cmd-kbd { font-size: 0.62rem; opacity: 0.7; }
|
||||
.lt-cmd-item.is-selected .dd-cmd-hint { color: inherit; }
|
||||
.dd-cmd-hint { color: var(--text-muted); font-size: 0.66rem; white-space: nowrap; }
|
||||
html[data-theme="light"] .lt-cmd-item.is-selected { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
|
||||
.lt-cmd-results { max-height: min(420px, 60vh); }
|
||||
.lt-cmd-footer span { display: inline-flex; align-items: center; gap: 2px; }
|
||||
|
||||
.dd-dialog-body { display: flex; flex-direction: column; gap: var(--space-sm); }
|
||||
.dd-dialog-fields { display: flex; flex-direction: column; gap: var(--space-md); }
|
||||
.dd-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; color: var(--text-secondary); }
|
||||
.dd-field .lt-input,
|
||||
.dd-field .lt-select { width: 100%; font-size: 0.8rem; }
|
||||
.dd-dialog-text { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.5; }
|
||||
.dd-dialog-hint { color: var(--text-muted); font-size: 0.7rem; }
|
||||
.dd-dialog-hint.is-error { color: var(--accent-red); }
|
||||
|
||||
.dd-keys { display: grid; gap: var(--space-lg); }
|
||||
.dd-keys-title {
|
||||
margin: 0 0 var(--space-sm);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
.dd-keys-list { display: grid; grid-template-columns: 10.5rem 1fr; gap: 6px var(--space-md); margin: 0; font-size: 0.76rem; }
|
||||
.dd-keys-list dt { white-space: nowrap; }
|
||||
.dd-keys-list dd { margin: 0; color: var(--text-secondary); }
|
||||
.dd-keys kbd {
|
||||
padding: 1px 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--accent-cyan);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.dd-footer-help {
|
||||
margin-left: var(--space-sm);
|
||||
padding: 0 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: none;
|
||||
color: var(--accent-cyan);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.64rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dd-footer-help:hover { border-color: var(--accent-cyan); }
|
||||
|
||||
/* Toasts sit above the footer (and the phone key bar); names keep their case. */
|
||||
#lt-toast-container {
|
||||
right: var(--space-md);
|
||||
bottom: calc(var(--dd-footer-height) + var(--dd-kb, 0px) + env(safe-area-inset-bottom, 0px) + var(--space-md));
|
||||
max-width: calc(100vw - 2 * var(--space-md));
|
||||
}
|
||||
.lt-toast {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-transform: none;
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 0.74rem;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.lt-toast.is-leaving { opacity: 0; }
|
||||
.lt-toast-msg { flex: 1; overflow-wrap: anywhere; }
|
||||
.lt-toast-icon { flex: 0 0 auto; }
|
||||
.lt-toast-close {
|
||||
flex: 0 0 auto;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.lt-toast-close:hover { opacity: 1; }
|
||||
|
||||
@media (max-width: 719px) {
|
||||
.dd-cmd-kbd { display: none; }
|
||||
#lt-toast-container { left: var(--space-sm); right: var(--space-sm); }
|
||||
.lt-toast { min-width: 0; max-width: none; }
|
||||
.dd-keys-list { grid-template-columns: 1fr; gap: 2px; }
|
||||
.dd-keys-list dd { margin-bottom: var(--space-sm); }
|
||||
}
|
||||
/* One highlight only: the row under a resting pointer isn't "selected" until the
|
||||
pointer moves (mousemove updates the selection). */
|
||||
.lt-cmd-item:hover:not(.is-selected) { background: none; color: inherit; }
|
||||
|
||||
Reference in New Issue
Block a user