mirror of
https://github.com/smittix/intercept.git
synced 2026-04-25 07:10:00 -07:00
e687862043
Phase 0 — CSS-only fixes: - Fix --font-mono to use real monospace stack (JetBrains Mono, Fira Code, etc.) - Replace hardcoded hex colors with CSS variables across 16+ files - Merge global-nav.css (507 lines) into layout.css, delete original - Reduce !important in responsive.css from 71 to 8 via .app-shell specificity - Standardize breakpoints to 480/768/1024/1280px Phase 1 — Loading states & SSE connection feedback: - Add centralized SSEManager (sse-manager.js) with exponential backoff - Add SSE status indicator dot in nav bar - Add withLoadingButton() + .btn-loading CSS spinner - Add mode section crossfade transitions Phase 2 — Accessibility: - Add aria-labels to icon-only buttons across mode partials - Add for/id associations to 42 form labels in 5 mode partials - Add aria-live on toast stack, enableListKeyNav() utility Phase 3 — Destructive action guards & list overflow: - Add confirmAction() styled modal, replace all 25 native confirm() calls - Add toast cap at 5 simultaneous toasts - Add list overflow indicator CSS Phase 4 — Inline style extraction: - Refactor switchMode() in app.js and index.html to use classList.toggle() - Add CSS toggle rules for all switchMode-controlled elements - Remove inline style="display:none" from 7+ HTML elements - Add utility classes (.hidden, .d-flex, .d-grid, etc.) Phase 5 — Mobile UX polish: - pre/code overflow handling already in place - Touch target sizing via --touch-min variable Phase 6 — Error handling consistency: - Add reportActionableError() to user-facing catch blocks in 5 mode JS files - 28 error toast additions alongside existing console.error calls Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
111 lines
1.8 KiB
CSS
111 lines
1.8 KiB
CSS
/* OOK Signal Decoder Styles */
|
|
|
|
.ook-presets {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.ook-preset-add {
|
|
margin-top: 6px;
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.ook-preset-add input {
|
|
width: 80px;
|
|
background: var(--bg-tertiary, #111);
|
|
border: 1px solid var(--border-color, #222);
|
|
border-radius: 3px;
|
|
color: var(--text-dim);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
padding: 3px 6px;
|
|
}
|
|
|
|
.ook-preset-hint {
|
|
font-size: 9px;
|
|
color: var(--text-muted, #555);
|
|
}
|
|
|
|
.ook-encoding-btns {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.ook-encoding-btns .preset-btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.ook-timing-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ook-timing-presets {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.ook-status-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.ook-status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--text-dim);
|
|
}
|
|
|
|
.ook-warning {
|
|
font-size: 11px;
|
|
color: var(--accent-orange);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ook-command-display {
|
|
display: none;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.ook-command-label {
|
|
font-size: 10px;
|
|
color: var(--text-muted, #555);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.ook-command-text {
|
|
margin: 0;
|
|
padding: 6px 8px;
|
|
background: var(--bg-deep, #0a0a0a);
|
|
border: 1px solid var(--border-color, #1a2e1a);
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-dim);
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ook-dedup-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ook-dedup-label input[type="checkbox"] {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|