9b158fcaa0
Adds per-row checkboxes (right of the Delete button, per request), a
master "Select all" toggle in the action bar, and morphs Clear All into
"Delete Selected (N)" the moment 1+ rows are ticked. Both paths go
through the same _showClearAllModal redesigned in 1ccc4bb — same UX,
same "Cancel running too" toggle, same logic; only the title + eyebrow
shift to reflect which mode the user came in through:
all → "Delete all N tasks?" eyebrow "Delete Tasks"
selected → "Delete N selected tasks?" eyebrow "Delete Selected"
State lives in this.selectedTaskIds (Set<string>). The row checkboxes
fire toggleTaskSelection(id, checked); the master fires toggleSelectAll
which ticks/unticks every visible row's checkbox in one pass (visible,
not all-of-this.tasks — so category filters DTRT).
_updateSelectionUI() reconciles three things on every change:
- the Clear All button label + title attr
- the master checkbox's checked/indeterminate state (some-but-not-all
visible → indeterminate dash, all → checked, none → unchecked)
- hooked into renderTasks() so category-switches don't leave stale
UI
performClearAll(opts) now accepts opts.targets — the subset to operate
on. clearAllTasks() passes either the selection or this.tasks depending
on mode. The active-task cancel-or-skip logic (cancelRunning toggle) is
unchanged — runs identically over the smaller set.
CSS:
.task-select — 22×22 framed checkbox matching the .task-btn
buttons it sits next to (border, hover green,
focus outline)
.task-select-box — custom box with check + indeterminate dash
drawn via ::after, no SVG dependency
.task-select-all — text-style toggle in the action bar with the
same custom box
No new globals. Hooked up via the existing window.tasksManager.
Signed-off-by: librelad <librelad@digitalangels.vip>
992 lines
22 KiB
CSS
992 lines
22 KiB
CSS
/* Tasks page styling. Extracted from tasks-content.html so theme
|
||
overrides and edits live alongside the rest of the CSS. All
|
||
colors reference theme variables — see themes/<name>/theme.css. */
|
||
|
||
/* Tasks Layout - Match Apps/Config Style */
|
||
.tasks-layout {
|
||
display: flex;
|
||
height: calc(100vh - 60px);
|
||
background: transparent;
|
||
}
|
||
|
||
/* Sidebar Styles - Match existing LibrePortal style */
|
||
.sidebar-container {
|
||
width: 220px;
|
||
background: var(--bg-primary);
|
||
border-right: 1px solid var(--border-color);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 220px;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sidebar h2 {
|
||
color: var(--text-primary);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.sidebar-category {
|
||
margin-bottom: 24px;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.sidebar-category h3 {
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.sidebar-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.sidebar-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 12px;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
transition: all 0.2s;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.sidebar-item:hover {
|
||
background: var(--bg-hover);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.sidebar-item.active {
|
||
background: var(--accent-color);
|
||
color: white;
|
||
}
|
||
|
||
.task-count {
|
||
margin-left: auto;
|
||
background: var(--bg-secondary);
|
||
padding: 2px 6px;
|
||
border-radius: 12px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
min-width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.sidebar-item.active .task-count {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
}
|
||
|
||
/* Main Content Area */
|
||
.main-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: transparent;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Status Bar — glassy strip matching the loading-screen system-card recipe. */
|
||
.terminal-status-bar {
|
||
background: rgba(var(--text-rgb), 0.04);
|
||
border-bottom: 1px solid rgba(var(--text-rgb), 0.08);
|
||
padding: 12px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.status-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--text-muted);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.status-indicator {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.status-queued { background: var(--status-warning); text-transform: uppercase !important; }
|
||
.status-running { background: var(--status-success); animation: pulse 1.5s infinite; text-transform: uppercase !important; }
|
||
.status-completed { background: var(--status-success); text-transform: uppercase !important; }
|
||
.status-failed { background: var(--status-danger); text-transform: uppercase !important; }
|
||
|
||
/* Force uppercase on all task status elements */
|
||
.task-status.status-queued,
|
||
.task-status.status-running,
|
||
.task-status.status-completed,
|
||
.task-status.status-failed,
|
||
.task-status.status-cancelled {
|
||
text-transform: uppercase !important;
|
||
}
|
||
|
||
.status-installed {
|
||
background: var(--status-success);
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
.refresh-btn {
|
||
background: rgba(var(--text-rgb), 0.04);
|
||
border: 1px solid rgba(var(--text-rgb), 0.12);
|
||
color: var(--text-secondary);
|
||
padding: 4px 10px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 11px;
|
||
margin-left: auto;
|
||
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
|
||
}
|
||
|
||
.refresh-btn:hover {
|
||
background: rgba(var(--accent-rgb), 0.15);
|
||
border-color: rgba(var(--accent-rgb), 0.45);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.clear-btn {
|
||
background: rgba(var(--text-rgb), 0.04);
|
||
border: 1px solid rgba(var(--text-rgb), 0.12);
|
||
color: var(--text-secondary);
|
||
padding: 4px 10px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 11px;
|
||
margin-left: 8px;
|
||
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
|
||
}
|
||
|
||
.clear-btn:hover {
|
||
background: rgba(var(--status-danger-rgb), 0.18);
|
||
border-color: rgba(var(--status-danger-rgb), 0.50);
|
||
color: var(--status-danger);
|
||
}
|
||
|
||
/* Tasks Terminal */
|
||
.tasks-terminal {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.tasks-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 16px;
|
||
}
|
||
|
||
/* Hide scrollbar when not needed, show only when scrolling */
|
||
.tasks-list::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
.tasks-list::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.tasks-list::-webkit-scrollbar-thumb {
|
||
background: var(--border);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.tasks-list::-webkit-scrollbar-thumb:hover {
|
||
background: var(--border-strong);
|
||
}
|
||
|
||
/* Hide scrollbar by default, show only on hover or when content overflows */
|
||
.task-highlighted {
|
||
border: 2px solid var(--accent);
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
.task-details-open {
|
||
display: block !important;
|
||
}
|
||
|
||
@keyframes blink {
|
||
0%, 50% { opacity: 1; }
|
||
51%, 100% { opacity: 0; }
|
||
}
|
||
|
||
/* Task Items — glass tiles in the loading-screen system-card style:
|
||
light translucent fill, soft white border, inset top highlight, hover
|
||
lifts the card with a cyan glow. */
|
||
.task-item {
|
||
background: rgba(var(--text-rgb), 0.05);
|
||
border: 1px solid rgba(var(--text-rgb), 0.10);
|
||
border-radius: 12px;
|
||
margin-bottom: 10px;
|
||
overflow: hidden;
|
||
box-shadow: inset 0 1px 0 rgba(var(--text-rgb), 0.06);
|
||
transition: background 0.2s ease, border-color 0.2s ease,
|
||
transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.task-item:hover {
|
||
background: rgba(var(--text-rgb), 0.08);
|
||
border-color: rgba(var(--accent-rgb), 0.40);
|
||
transform: translateY(-2px);
|
||
box-shadow: inset 0 1px 0 rgba(var(--text-rgb), 0.10);
|
||
}
|
||
|
||
.task-header {
|
||
padding: 4px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.task-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
|
||
.task-title {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.task-status {
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Task-status PILL — glass tinted tag, matches the button language.
|
||
Running/completed use a bright mint (#86efac) instead of the theme
|
||
--status-success (#28a745) which reads as muddy olive against the
|
||
nebula gradient. Same treatment used on the setup wizard's valid
|
||
border + the apps "Installed" pill. */
|
||
.task-status.status-queued {
|
||
background: rgba(var(--status-warning-rgb), 0.22);
|
||
border: 1px solid rgba(var(--status-warning-rgb), 0.60);
|
||
color: #fcd34d;
|
||
}
|
||
.task-status.status-running {
|
||
background: rgba(var(--status-success-rgb), 0.35);
|
||
border: 1px solid rgba(var(--status-success-rgb), 0.70);
|
||
color: #86efac;
|
||
}
|
||
.task-status.status-completed {
|
||
background: rgba(var(--status-success-rgb), 0.35);
|
||
border: 1px solid rgba(var(--status-success-rgb), 0.70);
|
||
color: #86efac;
|
||
}
|
||
|
||
/* Services persist when they're running; the pulse only makes sense
|
||
for transient task state, so disable it on service rows. The .status-running
|
||
class (line ~134) sets animation: pulse on anything that wears it — this
|
||
overrides for service pills. Task pills still pulse. */
|
||
.service-item .task-status.status-running {
|
||
animation: none;
|
||
}
|
||
.task-status.status-failed {
|
||
background: rgba(var(--status-danger-rgb), 0.22);
|
||
border: 1px solid rgba(var(--status-danger-rgb), 0.60);
|
||
color: #fca5a5;
|
||
}
|
||
|
||
.task-command {
|
||
/* Bright mint to match the .status-running / .status-completed pills.
|
||
The theme's --status-success (#28a745) reads muddy olive on nebula —
|
||
this is the same #86efac treatment used by the status pills + the
|
||
setup-wizard valid border + the apps "Installed" pill. */
|
||
color: #86efac;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 11px;
|
||
flex: 1;
|
||
}
|
||
|
||
.task-time {
|
||
color: var(--text-muted);
|
||
font-size: 10px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.task-actions {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.task-btn {
|
||
background: rgba(var(--text-rgb), 0.04);
|
||
border: 1px solid rgba(var(--text-rgb), 0.12);
|
||
color: var(--text-secondary);
|
||
padding: 3px 8px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
|
||
}
|
||
|
||
.task-btn:hover {
|
||
background: var(--surface-hover);
|
||
color: var(--status-success);
|
||
border-color: var(--status-success);
|
||
}
|
||
|
||
.task-btn.retry:hover {
|
||
background: var(--status-warning);
|
||
color: #000;
|
||
border-color: var(--status-warning);
|
||
}
|
||
|
||
.task-btn.delete:hover {
|
||
background: var(--status-danger);
|
||
color: var(--text-on-accent);
|
||
border-color: var(--status-danger);
|
||
}
|
||
|
||
/* Multi-select checkbox sat to the right of the row's Delete button.
|
||
Sized + framed to match the surrounding .task-btn buttons so the row
|
||
reads as a single action group. Hides the native input and renders
|
||
a custom box; `cursor: pointer` on the wrapping label keeps the
|
||
whole 24×24 hit target clickable. */
|
||
.task-select {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 6px;
|
||
border: 1px solid rgba(var(--text-rgb), 0.12);
|
||
background: rgba(var(--text-rgb), 0.04);
|
||
cursor: pointer;
|
||
transition: background 0.18s ease, border-color 0.18s ease;
|
||
}
|
||
.task-select:hover {
|
||
background: var(--surface-hover);
|
||
border-color: var(--status-success);
|
||
}
|
||
.task-select input[type="checkbox"] {
|
||
position: absolute;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
width: 0; height: 0;
|
||
}
|
||
.task-select-box {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 3px;
|
||
border: 1.5px solid rgba(var(--text-rgb), 0.45);
|
||
background: transparent;
|
||
position: relative;
|
||
transition: background 0.12s ease, border-color 0.12s ease;
|
||
}
|
||
.task-select input[type="checkbox"]:checked + .task-select-box {
|
||
background: var(--status-success);
|
||
border-color: var(--status-success);
|
||
}
|
||
.task-select input[type="checkbox"]:checked + .task-select-box::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 4px;
|
||
width: 3px;
|
||
height: 7px;
|
||
border: solid var(--text-on-accent, #fff);
|
||
border-width: 0 2px 2px 0;
|
||
transform: rotate(45deg);
|
||
}
|
||
.task-select input[type="checkbox"]:focus-visible + .task-select-box {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Master "Select all" toggle in the status/action bar (left of Clear All).
|
||
Uses the same custom-box visual as the row checkbox so the two reinforce
|
||
each other; the label sits inline with the button text style. */
|
||
.task-select-all {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
padding: 4px 8px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
color: var(--text-secondary);
|
||
user-select: none;
|
||
transition: background 0.18s ease, color 0.18s ease;
|
||
}
|
||
.task-select-all:hover {
|
||
background: var(--surface-hover);
|
||
color: var(--text-primary);
|
||
}
|
||
.task-select-all input[type="checkbox"] {
|
||
position: absolute;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
width: 0; height: 0;
|
||
}
|
||
/* The indeterminate state (some-but-not-all visible rows ticked) shows
|
||
a horizontal dash instead of a check. */
|
||
.task-select-all input[type="checkbox"]:indeterminate + .task-select-box {
|
||
background: var(--status-success);
|
||
border-color: var(--status-success);
|
||
}
|
||
.task-select-all input[type="checkbox"]:indeterminate + .task-select-box::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 4px;
|
||
left: 1px;
|
||
width: 8px;
|
||
height: 2px;
|
||
background: var(--text-on-accent, #fff);
|
||
border: none;
|
||
transform: none;
|
||
}
|
||
.task-select-all-label {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.task-details {
|
||
border-top: 1px solid rgba(var(--text-rgb), 0.10);
|
||
background: transparent;
|
||
padding: 14px 16px 4px;
|
||
display: none;
|
||
}
|
||
|
||
.task-details.show {
|
||
display: block;
|
||
}
|
||
|
||
.task-output {
|
||
padding: 12px;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
color: var(--text-muted);
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* Mobile Responsive */
|
||
@media (max-width: 768px) {
|
||
.sidebar-container {
|
||
position: fixed;
|
||
left: -220px;
|
||
top: 0;
|
||
height: 100vh;
|
||
z-index: 1000;
|
||
transition: left 0.3s ease;
|
||
}
|
||
|
||
.sidebar-container.mobile-open {
|
||
left: 0;
|
||
}
|
||
|
||
.main-content {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.mobile-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 999;
|
||
display: none;
|
||
}
|
||
|
||
.mobile-overlay.active {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
/* Loading Categories */
|
||
.loading-categories {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 16px;
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 2px solid rgba(var(--text-rgb), 0.3);
|
||
border-top: 2px solid var(--text-primary);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
/* Task metadata strip. style.css turns .task-meta into a grid of
|
||
auto-fit columns, so the items wrap horizontally instead of stacking.
|
||
Uses a dark-tint overlay (not a light-tint) so the white labels and
|
||
values pop against the strip on nebula's gradient — the previous
|
||
rgba(text, 0.10) lifted the strip towards white and washed out the
|
||
text it was supposed to highlight. */
|
||
.task-meta {
|
||
background: rgba(var(--bg-rgb), 0.30);
|
||
border-radius: 10px;
|
||
padding: 12px 16px;
|
||
margin-bottom: 14px;
|
||
border: 1px solid rgba(var(--text-rgb), 0.10);
|
||
}
|
||
|
||
/* Bump label/value contrast inside the metadata strip — the global
|
||
.meta-item uses --text-muted (65% alpha on nebula) which reads as
|
||
dim grey. --text-secondary (82%) keeps the hierarchy vs the white
|
||
<strong> labels but is actually readable. */
|
||
.task-meta .meta-item {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* Soften the log/output terminal box. The .log-container default is
|
||
var(--surface-sunken) — on nebula that's rgba(0,0,0,0.22) which on
|
||
top of the cosmic dark stack reads as pitch black and feels foreign
|
||
to the rest of the glass UI. Anchor it to nebula's navy chrome with
|
||
moderate opacity so the gradient still bleeds through faintly. */
|
||
.task-logs .log-container.terminal-style,
|
||
.task-output .output-content.terminal-style {
|
||
background: rgba(15, 25, 50, 0.45);
|
||
border: 1px solid rgba(var(--text-rgb), 0.10);
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
padding: 2px 0;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.meta-item > strong {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.meta-item > a {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.meta-item code {
|
||
background: var(--code-bg);
|
||
color: var(--code-text);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.task-duration {
|
||
background: var(--accent-soft);
|
||
color: var(--accent);
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.task-logs {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.task-logs h4 {
|
||
margin: 0 0 12px 0;
|
||
color: var(--accent);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.log-container {
|
||
background: var(--surface-sunken);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.log-entry {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 4px 0;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.log-entry:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.log-timestamp {
|
||
color: var(--text-muted);
|
||
margin-right: 12px;
|
||
white-space: nowrap;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.task-output h4,
|
||
.task-error h4 {
|
||
margin: 0 0 8px 0;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.task-output h4 {
|
||
color: var(--status-success);
|
||
}
|
||
|
||
.output-content,
|
||
.error-content {
|
||
background: rgba(var(--text-rgb), 0.04);
|
||
border: 1px solid rgba(var(--text-rgb), 0.10);
|
||
box-shadow: inset 0 1px 0 rgba(var(--text-rgb), 0.04);
|
||
border-radius: 10px;
|
||
padding: 12px;
|
||
margin: 0;
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
overflow-x: auto;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.error-content {
|
||
background: rgba(var(--status-danger-rgb), 0.1);
|
||
border-color: rgba(var(--status-danger-rgb), 0.3);
|
||
color: var(--status-danger);
|
||
}
|
||
|
||
/* Original "task is running…" placeholder panel styling. The
|
||
.task-running class is also used as a JS state marker on buttons
|
||
and tab buttons (see app-tabbed-manager.js / apps-manager.js); the
|
||
:not(...) chain keeps those out so they don't suddenly grow 20px
|
||
of padding (and visibly jump taller) when a task starts. */
|
||
.task-running:not(button):not(.tab-button):not(.btn):not(.task-btn) {
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.spinner {
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid rgba(var(--status-warning-rgb), 0.3);
|
||
border-top: 2px solid var(--status-warning);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
.info-content {
|
||
text-align: center;
|
||
color: var(--text-muted);
|
||
padding: 20px;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Modal Styles */
|
||
.task-logs-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 10000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* These rules are scoped to .task-logs-modal so they don't override the
|
||
generic modal styling in modal.css used by every other modal. */
|
||
.task-logs-modal .modal-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.task-logs-modal .modal-content {
|
||
position: relative;
|
||
background: var(--bg-secondary);
|
||
border-radius: 12px;
|
||
width: 90%;
|
||
max-width: 800px;
|
||
max-height: 80vh;
|
||
overflow: hidden;
|
||
box-shadow: var(--card-shadow-hover);
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.task-logs-modal .modal-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
background: rgba(var(--text-rgb), 0.05);
|
||
}
|
||
|
||
.task-logs-modal .modal-header h3 {
|
||
margin: 0;
|
||
color: var(--text-primary);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.task-logs-modal .modal-close {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-muted);
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.task-logs-modal .modal-close:hover {
|
||
background: var(--surface-hover);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.task-logs-modal .modal-body {
|
||
padding: 24px;
|
||
max-height: calc(80vh - 80px);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.task-info-summary {
|
||
background: rgba(var(--text-rgb), 0.05);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
margin-bottom: 20px;
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.info-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-row code {
|
||
background: var(--code-bg);
|
||
color: var(--code-text);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||
font-size: 12px;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.logs-section,
|
||
.output-section,
|
||
.error-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.logs-section h4,
|
||
.output-section h4,
|
||
.error-section h4 {
|
||
margin: 0 0 12px 0;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.log-viewer,
|
||
.output-viewer,
|
||
.error-viewer {
|
||
background: var(--surface-sunken);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
overflow-x: auto;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
border: 1px solid var(--border-subtle);
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.log-viewer {
|
||
max-height: 400px;
|
||
}
|
||
|
||
.log-line {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 4px 0;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.log-line:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.log-line .timestamp {
|
||
color: var(--text-muted);
|
||
margin-right: 12px;
|
||
white-space: nowrap;
|
||
font-size: 11px;
|
||
min-width: 140px;
|
||
}
|
||
|
||
.log-line .message {
|
||
color: var(--text-primary);
|
||
flex: 1;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.error-viewer {
|
||
background: rgba(var(--status-danger-rgb), 0.1);
|
||
border-color: rgba(var(--status-danger-rgb), 0.3);
|
||
color: var(--status-danger);
|
||
}
|
||
|
||
/* Button enhancements */
|
||
.task-btn.view-logs {
|
||
background: var(--accent-soft);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.task-btn.view-logs:hover {
|
||
background: rgba(var(--accent-rgb), 0.3);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.modal-content {
|
||
width: 95%;
|
||
max-height: 90vh;
|
||
}
|
||
|
||
.modal-header,
|
||
.modal-body {
|
||
padding: 16px;
|
||
}
|
||
|
||
.log-line {
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.log-line .timestamp {
|
||
min-width: auto;
|
||
}
|
||
|
||
/* Task + service rows: stack the row so info, status, and actions
|
||
no longer fight for horizontal space. */
|
||
.task-header {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 8px;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.task-info {
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.task-title {
|
||
flex: 1 1 100%;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.task-actions {
|
||
width: 100%;
|
||
justify-content: flex-end;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Status bar: compress padding, allow refresh/clear to wrap below. */
|
||
.terminal-status-bar {
|
||
padding: 10px 12px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.refresh-btn,
|
||
.clear-btn {
|
||
margin-left: 0;
|
||
}
|
||
|
||
/* Task metadata strip: stack key/value pairs vertically. */
|
||
.task-meta {
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
/* Services row container: trim outer margins so cards reach edge. */
|
||
.services-rows {
|
||
margin: 10px;
|
||
padding: 10px;
|
||
}
|
||
}
|