Files
devdesk/web/styles.css
T

682 lines
21 KiB
CSS
Raw Normal View History

/* DevDesk layer on top of web_template base.css. App classes use the dd- prefix;
everything visual comes from the TDS tokens defined in base.css :root. */
:root {
--dd-footer-height: 30px;
--dd-sidebar-width: 320px;
--dd-gap: 8px;
}
html,
body.dd-app {
height: 100%;
overflow: hidden;
}
body.dd-app {
min-height: 0;
}
/* The CRT scanline + vignette overlays sit at z 9999 over the whole page. Keep
them off the terminal (readability) and give the chrome its own scanlines. */
body.dd-app::before,
body.dd-app::after {
display: none;
}
.dd-sidebar,
.dd-footer {
background-image: repeating-linear-gradient(
0deg, rgba(0, 0, 0, 0.07) 0, rgba(0, 0, 0, 0.07) 1px, transparent 1px, transparent 3px);
}
/* ---- header ---------------------------------------------------------------- */
.dd-header {
padding: 0 var(--space-md);
gap: var(--space-md);
}
.dd-header .lt-header-left {
flex: 1 1 auto;
min-width: 0;
gap: var(--space-lg);
}
.dd-header .lt-header-right { flex: 0 0 auto; }
.dd-session { flex: 0 1 auto; }
.dd-session {
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
}
.dd-pane-title {
color: var(--text-secondary);
font-size: 0.72rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 38vw;
}
.dd-session-chip {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 6px;
max-width: 34vw;
padding: 3px 8px;
border: 1px solid var(--accent-cyan-border);
background: var(--accent-cyan-dim);
color: var(--accent-cyan);
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}
.dd-session-chip:hover,
.dd-session-chip[aria-expanded="true"] { border-color: var(--accent-cyan); box-shadow: var(--box-glow-cyan); }
.dd-session-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-caret { color: var(--text-muted); font-size: 0.7rem; }
/* Current session's Claude state as a dot on the chip (devdesk#13). */
.dd-state-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.dd-session-chip[data-state="working"] .dd-state-dot { background: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber); animation: lt-pulse 1.2s ease-in-out infinite; }
.dd-session-chip[data-state="waiting"] { border-color: rgba(255, 45, 85, 0.6); color: var(--accent-red); background: var(--accent-red-dim); }
.dd-session-chip[data-state="waiting"] .dd-state-dot { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red); animation: lt-pulse 1.2s ease-in-out infinite; }
.dd-session-chip[data-state="idle"] .dd-state-dot { background: var(--accent-green); }
/* Connection status: a dot; the word only when it isn't "live". */
.dd-ws[data-state="connected"] #ws-label { display: none; }
.dd-panels { position: relative; clip-path: none; } /* the corner cut hid the active border */
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
.dd-attention,
.dd-session-chip .dd-state-dot { animation: none !important; }
}
/* base.css draws keys in --text-dim (~1.5:1 on this background). */
.dd-sidebar .lt-kv-key { color: var(--text-secondary); font-size: 0.7rem; }
#sidebar-toggle[aria-expanded="true"] {
color: var(--accent-orange);
border-color: var(--accent-orange-border);
}
.dd-badge {
margin-left: 6px;
min-width: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--accent-amber);
color: var(--bg-primary);
font-size: 0.62rem;
font-weight: 700;
line-height: 16px;
text-align: center;
}
.dd-badge.is-urgent { background: var(--accent-red); box-shadow: 0 0 8px var(--accent-red); }
.dd-badge[hidden] { display: none; }
/* ---- menus (session switcher, ⋯) ----------------------------------------------- */
.dd-session,
.dd-more { position: relative; }
.dd-more-toggle { font-size: 1rem; line-height: 1; padding-inline: 8px; }
.dd-menu {
position: absolute;
top: calc(100% + 6px);
z-index: 40;
min-width: 240px;
max-width: min(360px, calc(100vw - 16px));
max-height: 70vh;
overflow-y: auto;
padding: 4px;
border: 1px solid var(--accent-cyan-border);
background: var(--bg-secondary);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), var(--box-glow-cyan);
}
.dd-menu[hidden] { display: none; }
.dd-switcher { left: 0; }
.dd-more-menu { right: 0; }
.dd-menu-item {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: 6px 8px;
background: none;
border: 1px solid transparent;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 0.74rem;
text-align: left;
cursor: pointer;
}
.dd-menu-item:hover:not(:disabled),
.dd-menu-item:focus-visible { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
.dd-menu-item:disabled { color: var(--text-muted); cursor: default; }
.dd-menu-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px;
font-size: 0.74rem;
color: var(--text-secondary);
}
.dd-menu-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--text-primary); }
.dd-menu-sep { height: 1px; margin: 4px 0; background: var(--border-dim); }
.dd-menu-note { padding: 6px 8px; color: var(--text-muted); font-size: 0.72rem; }
.dd-menu-foot { padding: 6px 8px 2px; border-top: 1px solid var(--border-dim); margin-top: 4px; color: var(--text-muted); font-size: 0.62rem; }
.dd-switch-item.is-current { border-color: var(--accent-orange-border); background: var(--accent-orange-dim); }
.dd-switch-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dd-switch-meta { color: var(--text-muted); font-size: 0.64rem; white-space: nowrap; }
.dd-switch-item.is-waiting .dd-switch-meta { color: var(--accent-red); }
.dd-switch-item.is-working .dd-switch-meta { color: var(--accent-amber); }
/* ---- layout ---------------------------------------------------------------- */
.dd-main {
position: fixed;
top: var(--header-height);
bottom: var(--dd-footer-height);
left: 0;
right: 0;
display: flex;
gap: var(--dd-gap);
padding: var(--dd-gap);
}
.dd-terminal-frame {
flex: 1 1 auto;
min-width: 0;
margin: 0;
display: flex;
background: var(--bg-terminal);
padding: 6px 6px 10px 10px;
}
.dd-terminal {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
}
.dd-terminal .xterm {
height: 100%;
}
.dd-terminal .xterm-viewport {
background-color: var(--bg-terminal) !important;
}
.dd-sidebar {
display: none;
flex: 0 0 var(--dd-sidebar-width);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--bg-tertiary) transparent;
}
body.dd-sidebar-open .dd-sidebar {
display: block;
}
.dd-widget {
margin-bottom: var(--dd-gap);
}
.dd-widget .lt-section-header {
justify-content: flex-start;
}
.dd-header-actions { margin-left: auto; display: inline-flex; gap: var(--space-sm); }
.dd-header-action {
background: none;
border: 0;
color: var(--accent-cyan);
font-size: 0.85rem;
line-height: 1;
padding: 0 2px;
}
.dd-header-action:hover { color: var(--accent-orange); text-shadow: var(--glow-orange); }
.dd-muted {
color: var(--text-muted);
font-size: 0.7rem;
}
.dd-stub-note {
margin-top: var(--space-sm);
}
/* ---- sessions panel ---------------------------------------------------------- */
.dd-session-list {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: var(--space-sm);
}
.dd-session-item {
display: flex;
align-items: stretch;
border: 1px solid transparent;
}
.dd-session-item.is-current {
border-color: var(--accent-orange-border);
background: var(--accent-orange-dim);
}
.dd-session-open {
flex: 1 1 auto;
min-width: 0;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: var(--space-sm);
align-items: center;
padding: 4px 6px;
background: none;
border: 0;
color: var(--text-primary);
text-align: left;
}
.dd-session-open:hover { background: var(--accent-cyan-dim); }
.dd-session-open .lt-dot { grid-row: 1 / span 3; }
.dd-session-name {
font-size: 0.78rem;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dd-session-meta {
font-size: 0.68rem;
color: var(--text-secondary);
}
/* Context-window fill under each session (devdesk#17). */
.dd-ctx {
grid-column: 2;
height: 2px;
margin-top: 3px;
background: var(--bg-tertiary);
overflow: hidden;
}
.dd-ctx-fill { display: block; height: 100%; background: var(--accent-cyan); }
.dd-ctx.is-high .dd-ctx-fill { background: var(--accent-amber); }
.dd-ctx.is-full .dd-ctx-fill { background: var(--accent-red); }
.dd-session-item.is-recent .dd-session-name { color: var(--text-secondary); font-weight: 400; }
.dd-session-item.is-dormant .dd-session-name { color: var(--text-secondary); }
.dd-session-item.is-waiting { border-color: rgba(255, 45, 85, 0.45); background: var(--accent-red-dim); }
.dd-session-item.is-waiting .dd-session-meta { color: var(--accent-red); }
.dd-session-item.is-working .dd-session-meta { color: var(--accent-amber); }
/* base.css sets display on .lt-btn/.lt-chip, which beats the [hidden] attribute. */
.dd-header [hidden] { display: none !important; }
/* Header chip: other sessions waiting on you. */
.dd-attention {
text-transform: none;
letter-spacing: 0;
max-width: 22vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: none;
cursor: pointer;
font-family: var(--font-mono);
color: var(--accent-red);
background: var(--accent-red-dim);
animation: lt-pulse 1.6s ease-in-out infinite;
}
.dd-attention.is-active { display: inline-flex; }
.dd-session-actions {
display: flex;
align-items: center;
gap: 2px;
padding-right: 2px;
opacity: 0.55;
transition: var(--transition-fast);
}
.dd-session-item:hover .dd-session-actions,
.dd-session-item:focus-within .dd-session-actions,
.dd-session-item.is-current .dd-session-actions { opacity: 1; }
.dd-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
background: none;
border: 1px solid transparent;
color: var(--text-muted);
font-size: 0.8rem;
line-height: 1;
text-decoration: none;
}
.dd-icon-btn:hover,
.dd-icon-btn:focus-visible {
color: var(--accent-cyan);
border-color: var(--accent-cyan-border);
text-shadow: var(--glow-cyan);
text-decoration: none;
}
.dd-icon-btn.dd-danger:hover,
.dd-icon-btn.dd-danger:focus-visible {
color: var(--accent-red);
border-color: rgba(255, 45, 85, 0.4);
text-shadow: var(--glow-red);
}
.dd-empty {
color: var(--text-muted);
font-size: 0.72rem;
padding: 4px 6px;
}
.dd-new-session[hidden] { display: none; }
.dd-new-session {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.dd-new-session .lt-input { grid-column: 1 / -1; font-size: 0.74rem; }
.dd-new-session .lt-select { min-width: 0; font-size: 0.72rem; }
.dd-status.is-error { color: var(--accent-red); }
.dd-widget-foot {
display: flex;
align-items: center;
gap: var(--space-sm);
}
/* ---- ops alerts --------------------------------------------------------------- */
.dd-alert-count { margin-left: auto; }
.dd-alert-count:empty { display: none; }
.dd-alert-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.dd-alert {
display: flex;
flex-direction: column;
gap: 3px;
padding: 6px 8px;
border: 1px solid var(--border-dim);
border-left: 2px solid var(--accent-amber);
font-size: 0.72rem;
}
.dd-alert:has(.lt-chip-critical) { border-left-color: var(--accent-red); }
.dd-alert-head { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.dd-alert-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-alert-age { margin-left: auto; white-space: nowrap; }
.dd-alert-instances { overflow-wrap: anywhere; }
.dd-alert-summary { color: var(--text-secondary); }
.dd-alert .dd-ask { align-self: flex-start; margin-top: 2px; }
.dd-all-clear { display: flex; align-items: center; gap: var(--space-sm); color: var(--accent-green); font-size: 0.74rem; }
[data-state="stub"] .lt-section-body { opacity: 0.75; }
.dd-repo-grid[hidden] { display: none; }
.dd-repo-note:empty { display: none; }
.dd-fix-ci { margin-top: var(--space-sm); }
.dd-fix-ci[hidden] { display: none; }
/* ---- file drop / upload ------------------------------------------------------ */
.dd-drop-overlay {
position: absolute;
inset: 0;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed var(--accent-cyan);
background: rgba(0, 212, 255, 0.08);
color: var(--accent-cyan);
font-size: 0.9rem;
pointer-events: none;
}
.dd-drop-overlay[hidden] { display: none; }
.dd-upload-status {
position: absolute;
right: 14px;
bottom: 16px;
z-index: 6;
max-width: 70%;
padding: 6px 10px;
border: 1px solid var(--accent-cyan-border);
background: var(--bg-secondary);
color: var(--text-secondary);
font-size: 0.72rem;
box-shadow: var(--box-glow-cyan);
overflow-wrap: anywhere;
}
.dd-upload-status[hidden] { display: none; }
.dd-upload-status.is-error { border-color: rgba(255, 45, 85, 0.5); color: var(--accent-red); }
/* ---- overlay ----------------------------------------------------------------- */
.dd-overlay {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
background: rgba(1, 3, 4, 0.72);
backdrop-filter: blur(2px);
}
.dd-overlay[hidden] { display: none; }
.dd-overlay-card {
width: min(480px, 92%);
margin: 0;
box-shadow: var(--box-glow-cyan);
}
.dd-overlay-text {
margin-bottom: var(--space-md);
color: var(--text-secondary);
}
.dd-overlay[data-tone="warn"] .lt-section-header { color: var(--accent-amber); text-shadow: none; }
.dd-overlay[data-tone="danger"] .lt-section-header { color: var(--accent-red); text-shadow: var(--glow-red); }
/* ---- footer ------------------------------------------------------------------ */
.dd-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: var(--dd-footer-height);
margin: 0;
padding: 0 var(--space-md);
flex-wrap: nowrap;
overflow: hidden;
}
.dd-footer .lt-footer-hints {
flex-wrap: nowrap;
overflow: hidden;
}
.dd-footer .lt-footer-key { margin-right: 4px; }
.dd-keybar { display: flex; gap: 4px; width: 100%; overflow-x: auto; scrollbar-width: none; }
.dd-keybar[hidden] { display: none; }
.dd-keybar button {
flex: 1 1 auto;
min-width: 0;
height: 34px;
padding: 0 4px;
border: 1px solid var(--border-dim);
background: var(--bg-secondary);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 0.8rem;
touch-action: manipulation;
}
.dd-keybar button:active { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
/* Touch: the key bar replaces the shortcut hints; the page shrinks above the
on-screen keyboard (--dd-kb is set from visualViewport). */
body.dd-touch { --dd-footer-height: 44px; }
body.dd-touch .dd-hints { display: none; }
body.dd-touch .dd-main { bottom: calc(var(--dd-footer-height) + var(--dd-kb, 0px) + env(safe-area-inset-bottom, 0px)); }
body.dd-touch .dd-footer {
bottom: var(--dd-kb, 0px);
height: calc(var(--dd-footer-height) + env(safe-area-inset-bottom, 0px));
padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
}
/* ---- small screens ----------------------------------------------------------- */
@media (max-width: 1099px) {
.dd-sidebar {
position: absolute;
top: var(--dd-gap);
right: var(--dd-gap);
bottom: var(--dd-gap);
width: min(var(--dd-sidebar-width), calc(100vw - 56px)); /* leave a strip to tap out */
z-index: 20;
background-color: var(--bg-secondary);
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
padding: var(--dd-gap);
}
.dd-pane-title { display: none; }
}
.dd-backdrop {
position: absolute;
inset: 0;
z-index: 15;
background: rgba(1, 3, 4, 0.55);
}
.dd-backdrop[hidden] { display: none; }
@media (max-width: 719px) {
:root { --dd-gap: 4px; }
.lt-brand { display: none; }
.dd-session-chip { max-width: 46vw; }
/* Phones: the red Panels badge and the switcher carry "needs you" instead. */
.dd-attention.is-active { display: none; }
.dd-header { padding: 0 var(--space-sm); gap: var(--space-sm); }
.dd-header .lt-header-left { gap: var(--space-sm); }
/* base.css hides the WS indicator on phones; keep it as a bare dot. */
.dd-header .dd-ws { display: inline-flex; padding: 4px; }
.dd-header .dd-ws #ws-label { display: none; }
.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; }