/* ============================================================================
MowgliScan — component classes (vanilla CSS)
Plain-HTML equivalents of the React primitives. Requires colors_and_type.css
loaded first and class="mws" on an ancestor (usually ).
----------------------------------------------------------------------------
...
============================================================================ */
/* ── Tag / signal pill ──────────────────────────────────────────────────────
▲ long */
.mws-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 1px 6px;
font-family: var(--font-mono);
font-size: 10px; font-weight: var(--fw-medium);
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--fg-mute);
border: var(--border-w) solid var(--border);
background: transparent;
border-radius: var(--radius-1);
white-space: nowrap;
}
.mws-tag--long { color: var(--green); border-color: var(--green-2); background: var(--green-bg); }
.mws-tag--short { color: var(--red); border-color: var(--red-2); background: var(--red-bg); }
.mws-tag--halt { color: var(--amber); border-color: var(--amber-2); background: var(--amber-bg); }
.mws-tag--info { color: var(--cyan); border-color: var(--cyan-2); background: var(--cyan-bg); }
.mws-tag--ai { color: var(--magenta); border-color: var(--magenta); background: var(--magenta-bg); }
/* ── Status dot ──────────────────────────────────────────────────────────────
(color via modifier)
For an arbitrary color use style="background:#7dd3fc;box-shadow:0 0 6px #7dd3fc" */
.mws-dot {
display: inline-block; width: 6px; height: 6px; flex-shrink: 0;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px var(--green);
}
.mws-dot--bull { background: var(--green); box-shadow: 0 0 6px var(--green); }
.mws-dot--bear { background: var(--red); box-shadow: 0 0 6px var(--red); }
.mws-dot--warn { background: var(--amber); box-shadow: none; } /* stale = no glow */
.mws-dot--idle { background: var(--fg-mute); box-shadow: none; }
/* ── Kbd hint chip ───────────────────────────────────────────────────────────
⌘ */
.mws-kbd {
font-family: var(--font-mono); font-size: 10px;
padding: 1px 5px;
color: var(--fg-2);
border: var(--border-w) solid var(--border);
background: var(--bg-2);
border-radius: var(--radius-1);
}
/* ── Button ──────────────────────────────────────────────────────────────────
Terminals don't ease — no transitions. Press flashes, primary inverts. */
.mws-btn {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 12px;
padding: 5px 12px;
color: var(--fg-1);
background: transparent;
border: var(--border-w) solid var(--border);
border-radius: var(--radius-1);
cursor: pointer; user-select: none;
transition: none;
}
.mws-btn:hover { background: var(--bg-4); border-color: var(--border-hot); }
.mws-btn:active { background: var(--bg-5); }
.mws-btn--xs { font-size: 11px; padding: 3px 8px; }
.mws-btn--lg { font-size: 13px; padding: 6px 14px; }
.mws-btn--primary { background: var(--green); color: #0a0a0a; border-color: var(--green); font-weight: var(--fw-semibold); }
.mws-btn--primary:hover { background: var(--green); }
.mws-btn--primary:active { background: #0a0a0a; color: var(--green); }
.mws-btn--ghost { } /* base */
.mws-btn--danger { color: var(--red); border-color: var(--red); }
.mws-btn--danger:hover { background: var(--red-bg); }
.mws-btn--armed { background: var(--bg-3); color: var(--green); border-color: var(--green); }
/* ── Blinking cursor block ────────────────────────────────────────────────────
(standalone block; see also .mws-cursor
in colors_and_type.css which appends ▮ after text) */
.mws-caret {
display: inline-block; width: 7px; height: 13px;
vertical-align: middle; margin-left: 2px;
background: var(--green);
animation: mws-blink 1.06s steps(2, end) infinite;
}
/* ── Panel ────────────────────────────────────────────────────────────────────
Add .mws-panel--armed for the green left-border active state. */
.mws-panel {
display: flex; flex-direction: column; min-height: 0;
background: var(--bg-2);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-0);
}
.mws-panel--armed { border-left: var(--border-2w) solid var(--green); }
.mws-panel__hd {
display: flex; align-items: center; justify-content: space-between;
height: var(--panel-header-h);
padding: 0 var(--space-4);
border-bottom: var(--border-w) solid var(--border-dim);
flex-shrink: 0;
}
.mws-panel__name { font-size: var(--fs-xs); color: var(--fg-2); letter-spacing: var(--tracking-wide); }
.mws-panel__status { font-size: var(--fs-xs); color: var(--fg-mute); letter-spacing: var(--tracking-wide); }
.mws-panel__body { flex: 1; min-height: 0; overflow: auto; }
/* ── Data table ───────────────────────────────────────────────────────────────
*/
.mws-table {
width: 100%; border-collapse: collapse;
font-family: var(--font-mono); font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
}
.mws-table th {
text-align: left; font-weight: var(--fw-regular);
font-size: var(--fs-xs); color: var(--fg-mute);
letter-spacing: var(--tracking-caps); text-transform: uppercase;
padding: var(--space-2) var(--space-4);
border-bottom: var(--border-w) solid var(--border-dim);
position: sticky; top: 0; background: var(--bg-2);
}
.mws-table td {
padding: var(--space-3) var(--space-4);
color: var(--fg-1);
border-bottom: var(--border-w) solid var(--border-dim);
}
.mws-table tbody tr:hover { background: var(--bg-4); }
.mws-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* ── Input ────────────────────────────────────────────────────────────────────
*/
.mws-input {
font-family: var(--font-mono); font-size: var(--fs-base);
color: var(--fg-1);
padding: var(--space-3) var(--space-4);
background: var(--bg-1);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-1);
outline: none;
}
.mws-input::placeholder { color: var(--fg-dim); }
.mws-input:focus { border-color: transparent; box-shadow: var(--glow-focus); }