Changeset 0.37.18 (#230)
Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
This commit is contained in:
112
src/css/sw-debug.css
Normal file
112
src/css/sw-debug.css
Normal file
@@ -0,0 +1,112 @@
|
||||
/* ── sw-debug.css ────────────────────────────
|
||||
Debug modal styles — extracted from modals.css (v0.37.18).
|
||||
Preact component tree: engine, console, network, state, REPL, badge.
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
/* ── Debug Modal layout ──────────────────── */
|
||||
|
||||
.debug-modal { max-width: 900px; height: 100%; overflow: hidden; }
|
||||
.debug-tab {
|
||||
padding: 8px 12px; background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent;
|
||||
white-space: nowrap; flex-shrink: 0; font-family: var(--font);
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.debug-tab:hover { color: var(--text-2); }
|
||||
.debug-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
.debug-tab--hidden { display: none; }
|
||||
.debug-modal-body {
|
||||
flex: 1; overflow: hidden; padding: 0 !important;
|
||||
display: flex; flex-direction: column; min-height: 0;
|
||||
}
|
||||
.debug-tab-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
||||
|
||||
/* ── Shared ──────────────────────────────── */
|
||||
|
||||
.debug-toolbar {
|
||||
display: flex; align-items: center; gap: 1rem;
|
||||
padding: 6px 12px; border-bottom: 1px solid var(--border);
|
||||
font-size: 11px; flex-shrink: 0;
|
||||
}
|
||||
.debug-check { display: flex; align-items: center; gap: 4px; color: var(--text-3); cursor: pointer; }
|
||||
.debug-badge {
|
||||
font-size: 10px; background: var(--bg-raised); border: 1px solid var(--border);
|
||||
border-radius: 10px; padding: 1px 6px; color: var(--text-3); margin-left: auto;
|
||||
}
|
||||
.debug-content {
|
||||
flex: 1; overflow-y: auto; padding: 6px;
|
||||
font-family: var(--mono); font-size: 11px; line-height: 1.5; min-height: 0;
|
||||
}
|
||||
.debug-empty { color: var(--text-3); text-align: center; padding: 2rem; }
|
||||
.debug-time { color: var(--text-3); opacity: 0.6; font-size: 10px; }
|
||||
.debug-pre {
|
||||
white-space: pre-wrap; word-break: break-all;
|
||||
max-height: 200px; overflow: auto; padding: 6px;
|
||||
background: rgba(0,0,0,0.2); border-radius: 4px; margin: 4px 0;
|
||||
}
|
||||
|
||||
/* ── Console Tab ─────────────────────────── */
|
||||
|
||||
.debug-console-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
|
||||
.debug-entry {
|
||||
padding: 1px 6px; border-bottom: 1px solid rgba(128,128,128,0.06);
|
||||
white-space: pre-wrap; word-break: break-all;
|
||||
}
|
||||
.debug-msg { color: var(--text); }
|
||||
|
||||
/* ── Network Tab ─────────────────────────── */
|
||||
|
||||
.debug-network-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
|
||||
.debug-net-entry { border-bottom: 1px solid var(--border); }
|
||||
.debug-net-summary { padding: 6px; cursor: pointer; font-size: 11px; display: flex; align-items: baseline; gap: 4px; }
|
||||
.debug-net-arrow { font-size: 10px; color: var(--text-3); width: 10px; text-align: center; flex-shrink: 0; }
|
||||
.debug-net-method { font-weight: bold; color: var(--accent); }
|
||||
.debug-net-url { color: var(--text); word-break: break-all; flex: 1; }
|
||||
.debug-net-detail { padding: 6px 12px 6px 20px; font-size: 11px; }
|
||||
|
||||
/* ── State Tab ───────────────────────────── */
|
||||
|
||||
.debug-state-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
|
||||
.debug-state-pre { max-height: none; margin: 0; }
|
||||
|
||||
/* ── REPL Tab ────────────────────────────── */
|
||||
|
||||
.debug-repl-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
|
||||
.debug-repl-output {
|
||||
flex: 1; overflow-y: auto; padding: 8px;
|
||||
font-family: var(--mono); font-size: 12px; min-height: 0;
|
||||
}
|
||||
.debug-repl-input {
|
||||
border-top: 1px solid var(--border); padding: 8px; flex-shrink: 0;
|
||||
}
|
||||
.debug-repl-input input {
|
||||
width: 100%; font-family: var(--mono); font-size: 12px;
|
||||
background: var(--bg); border: 1px solid var(--border); color: var(--text);
|
||||
padding: 6px 8px; border-radius: var(--radius); outline: none;
|
||||
}
|
||||
.debug-repl-input input:focus { border-color: var(--accent); }
|
||||
|
||||
.repl-entry { padding: 2px 0; }
|
||||
.repl-entry pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
|
||||
.repl-entry-input pre { color: var(--accent); }
|
||||
.repl-entry-result pre { color: var(--text); }
|
||||
.repl-entry-info { color: var(--text-3); font-size: 11px; }
|
||||
.repl-entry-error pre { color: var(--danger); }
|
||||
.repl-entry-stack pre { color: var(--text-3); font-size: 10px; padding-left: 1rem; }
|
||||
|
||||
/* ── Footer ──────────────────────────────── */
|
||||
|
||||
.debug-modal-footer {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
}
|
||||
.debug-footer-left, .debug-footer-right { display: flex; gap: 8px; }
|
||||
|
||||
/* ── Badge (sidebar bug icon) ────────────── */
|
||||
|
||||
.avatar-bug.has-errors {
|
||||
animation: debug-pulse 2s infinite;
|
||||
}
|
||||
@keyframes debug-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
Reference in New Issue
Block a user