dandri/meshcore-bot
1
0 Fork 0
mirror of https://github.com/agessaman/meshcore-bot.git synced 2026-10-30 01:32:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(web_viewer): retire legacy blue and green, quiet the packet stream

Browse Source 
The pre-Bootstrap-5 #007bff and #28a745 (and their rgba forms) still sat on the navbar brand, status lamps, dark form focus, the conversation rail, the Contacts focus ring, the login page's brand tokens, and Realtime's hex path and newest-row glow. They now use Signal Blue (#0d6efd) and Lamp Green (#198754), which also brings the hex path's white text from 3.1:1 to 4.5:1. The brand stays above 3:1 on the rail as large bold text. The unused .log-entry, .command-entry and .packet-entry rules in base.html are removed.

Realtime packet rows carried an 11-color stripe down the left of each rounded card, repeating what the colored type badge in the row already says. The stripes are gone, so the stream reads like the dashboard's cards.

DESIGN.md adds the 2px (hair) and 5px (meter) radii that legend swatches, focus rings and meters already use, drops the drift notes these changes resolve, and records the touch-target sizing from the adapt pass.
This commit is contained in:
agessaman committed 2026-10-17 18:14:04 -07:00
1 parent b7aa0ac0c5
commit e0b7eca4fd
5 files changed
+26 -57
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

DESIGN.md
+7 -5
View File
@@ -65,10 +65,12 @@ typography:
fontWeight: 400
lineHeight: 1.5
rounded:
hair: "2px"
sm: "0.25rem"
md: "0.375rem"
lg: "8px"
xl: "10px"
meter: "5px"
pill: "999px"
spacing:
"1": "0.25rem"
@@ -161,13 +163,13 @@ The console has two lighting conditions, light and dark, and both are first-clas
A neutral Bootstrap-gray desk with one blue signal and a set of lamp colors that only ever mean state.
### Primary
- **Signal Blue** (`signal-blue`): the single accent. Primary buttons, links, focus outlines, the navbar brand, the active refresh affordance, flood-route data, and the info log level in light theme. The older `#007bff` still appears on the navbar brand, form focus in dark mode, and the log-entry rule; it is drift and should converge on Signal Blue.
- **Signal Blue** (`signal-blue`): the single accent. Primary buttons, links, focus outlines, the navbar brand, the active refresh affordance, flood-route data, and the info log level in light theme.
### Secondary
- **Route Teal** (`route-direct`): the partner to Signal Blue in route data. Direct routes in charts and route-mix bars, so flood versus direct reads as blue versus teal everywhere.
### Tertiary
- **Lamp Green** (`lamp-green`): connected, up, success, positive deltas. The legacy `#28a745` on `.status-connected` is the same role and should converge here.
- **Lamp Green** (`lamp-green`): connected, up, success, positive deltas.
- **Lamp Amber** (`lamp-amber`): warning and degraded states, and the packet-entry rule in the activity log.
- **Lamp Red** (`lamp-red`): disconnected, error, negative deltas, destructive actions.
@@ -222,7 +224,7 @@ Full-width Bootstrap `container-fluid` pages under a collapsing `navbar-expand-l
The dashboard sets the house rhythm for monitoring pages: a single health strip first, then uppercase section titles with a trailing hairline, then equal-height rows of stat tiles and cards whose charts fill the slack instead of leaving dead space. Rows inside cards (neighbors, leaderboards, mixes) are separated by 1px rules rather than gaps, and use a fixed three-column grid of name, meter, and value.
Responsive behavior follows Bootstrap breakpoints (576, 768, 992px). Below 576px the dashboard tightens its strip and tiles; tables scroll inside `.table-responsive`. Phone use is a real operator workflow, so new layouts are checked at phone width, not just desktop.
Responsive behavior follows Bootstrap breakpoints (576, 768, 992px). Below 576px the dashboard tightens its strip and tiles; tables scroll inside `.table-responsive`. Phone use is a real operator workflow, so new layouts are checked at phone width, not just desktop. On a coarse pointer, `base.html` grows standard controls to 44px, small (`-sm`) controls to 36px and checkboxes, radios and switches to 24px; desktop density is untouched. Card headers that pair a title with controls wrap the controls onto a second row rather than squeeze the title.
### Named Rules
**The Fixed Scale Rule.** A meter means the same thing on every refresh: SNR bars use a fixed -12 to +14 dB scale, and a missing reading is drawn hatched, never as an empty bar that reads as zero.
@@ -241,7 +243,7 @@ Soft lift, as now. Cards and tiles sit on a faint ambient shadow and a 1px rule;
## Shapes
Gently rounded, never pill-shaped except where the shape is the signal. Bootstrap's own radii (0.25rem small, 0.375rem standard) cover buttons, inputs, and cards; dashboard tiles and the health strip soften to 10px; panels and responsive tables use 8px. Pills are reserved for delta chips and badges, circles for status lamps, and 2px corners for legend swatches. Meter tracks and fills round to half their height (5px on a 10px bar).
Gently rounded, never pill-shaped except where the shape is the signal. Bootstrap's own radii (0.25rem small, 0.375rem standard) cover buttons, inputs, and cards; dashboard tiles and the health strip soften to 10px; panels and responsive tables use 8px. Pills are reserved for delta chips and badges, circles for status lamps, and `hair` (2px) corners for legend swatches and focus rings. Meter tracks and fills use `meter` (5px), half the height of their 10px bar.
## Components
@@ -282,7 +284,7 @@ A terminal-dark well (Scope Black, Scope Rule border, 0.375rem corners) of monos
### Do:
- **Do** take every surface, text, and border color from the `base.html` theme variables (`--bg-*`, `--text-*`, `--border-color`, `--card-*`, `--shadow-color`).
- **Do** ship the dark-theme counterpart of any hard-coded color in the same change (The Twin Token Rule).
- **Do** use Signal Blue (`#0d6efd`) as the only accent, and converge the remaining `#007bff` and `#28a745` uses onto Signal Blue and Lamp Green.
- **Do** use Signal Blue (`#0d6efd`) as the only accent; the older `#007bff` and `#28a745` are retired.
- **Do** use tabular numerals for live numbers and fixed scales for meters.
- **Do** pair every status lamp and chart series with a text label or legend.
- **Do** vendor any new font, script, or stylesheet under `static/` so the viewer works without internet.
modules/web_viewer/templates/base.html
+4 -22
View File
@@ -96,7 +96,7 @@
.navbar-brand {
font-weight: bold;
color: #007bff !important;
color: #0d6efd !important;
}
.status-indicator {
@@ -108,7 +108,7 @@
}
.status-connected {
background-color: #28a745;
background-color: #198754;
}
.status-disconnected {
@@ -119,24 +119,6 @@
background-color: #ffc107;
}
.log-entry {
font-family: var(--font-mono);
font-size: 0.9em;
margin-bottom: 5px;
padding: 8px;
border-left: 3px solid #007bff;
background-color: var(--log-entry-bg);
border-radius: 0 5px 5px 0;
color: var(--text-color);
}
.command-entry {
border-left-color: #28a745;
}
.packet-entry {
border-left-color: #ffc107;
}
.connection-info {
background-color: var(--connection-info-bg);
@@ -265,7 +247,7 @@
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
background-color: var(--bg-tertiary);
border-color: #007bff;
border-color: #0d6efd;
color: var(--text-color);
}
@@ -476,7 +458,7 @@
}
[data-theme="dark"] .accordion-button:focus {
box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
[data-theme="dark"] .accordion-body {
modules/web_viewer/templates/contacts.html
+2 -2
View File
@@ -2813,9 +2813,9 @@ document.addEventListener('DOMContentLoaded', () => {
[data-theme="dark"] .input-group .form-control:focus {
background-color: var(--bg-tertiary);
border-color: #007bff;
border-color: #0d6efd;
color: var(--text-color);
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
/* Custom path tooltip styling */
modules/web_viewer/templates/login.html
+6 -6
View File
@@ -29,8 +29,8 @@
--card-bg: #ffffff;
--card-header-bg: #f8f9fa;
--shadow-color: rgba(0, 0, 0, 0.1);
--brand: #007bff;
--brand-soft: rgba(0, 123, 255, 0.14);
--brand: #0d6efd;
--brand-soft: rgba(13, 110, 253, 0.14);
}
[data-theme="dark"] {
@@ -43,7 +43,7 @@
--card-bg: #252525;
--card-header-bg: #3d3d3d;
--shadow-color: rgba(0, 0, 0, 0.45);
--brand-soft: rgba(0, 123, 255, 0.18);
--brand-soft: rgba(13, 110, 253, 0.18);
}
html, body {
@@ -70,8 +70,8 @@
z-index: -1;
background:
radial-gradient(ellipse 90% 55% at 50% -15%, var(--brand-soft), transparent 55%),
radial-gradient(ellipse 70% 45% at 100% 100%, rgba(0, 123, 255, 0.06), transparent 50%),
radial-gradient(ellipse 50% 35% at 0% 85%, rgba(0, 123, 255, 0.05), transparent 45%);
radial-gradient(ellipse 70% 45% at 100% 100%, rgba(13, 110, 253, 0.06), transparent 50%),
radial-gradient(ellipse 50% 35% at 0% 85%, rgba(13, 110, 253, 0.05), transparent 45%);
pointer-events: none;
}
@@ -156,7 +156,7 @@
[data-theme="dark"] .form-control:focus {
background-color: var(--bg-tertiary);
border-color: #007bff;
border-color: #0d6efd;
color: var(--text-color);
}
modules/web_viewer/templates/realtime.html
+7 -22
View File
@@ -11,7 +11,7 @@
display: inline-block;
margin-right: 8px;
}
.status-connected { background-color: #28a745; }
.status-connected { background-color: #198754; }
.status-disconnected { background-color: #dc3545; }
.status-warning { background-color: #ffc107; }
@@ -70,8 +70,7 @@
.stream-entry {
background-color: var(--card-bg);
transition: all 0.3s ease;
border-left: 3px solid #6c757d;
transition: background-color 0.3s ease;
color: var(--text-color);
}
@@ -110,22 +109,9 @@
}
.stream-entry:first-child {
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
box-shadow: 0 2px 8px rgba(25, 135, 84, 0.2);
}
/* Packet type color-coding */
.packet-advert { border-left-color: #fd7e14; } /* Orange for Adverts */
.packet-grouptext { border-left-color: #0dcaf0; } /* Cyan for GroupText */
.packet-txt { border-left-color: #198754; } /* Green for direct Text */
.packet-ack { border-left-color: #6c757d; } /* Gray for ACK */
.packet-ping { border-left-color: #ffc107; } /* Yellow for Ping */
.packet-pong { border-left-color: #ffc107; } /* Yellow for Pong */
.packet-req { border-left-color: #0d6efd; } /* Blue for Request */
.packet-resp { border-left-color: #0d6efd; } /* Blue for Response */
.packet-trace { border-left-color: #6f42c1; } /* Purple for Trace */
.packet-cmd { border-left-color: #d63384; } /* Pink for Command */
.packet-unknown { border-left-color: #6c757d; } /* Gray for Unknown */
/* Clickable packet entries */
.packet-clickable {
cursor: pointer;
@@ -134,7 +120,6 @@
.packet-clickable:hover,
.packet-clickable:focus-visible {
background-color: var(--bg-tertiary);
border-left-color: #17a2b8;
}
.packet-clickable:focus-visible {
@@ -162,7 +147,7 @@
}
.conversation-entry {
border-left: 3px solid #007bff;
border-left: 3px solid var(--text-primary);
padding-left: 10px;
margin-left: 5px;
}
@@ -290,7 +275,7 @@
/* Hex segment colors - high contrast for dark mode */
.hex-header { color: #000; background-color: #ffc107; padding: 2px 4px; border-radius: 2px; font-weight: 600; }
.hex-pathlen { color: #000; background-color: #17a2b8; padding: 2px 4px; border-radius: 2px; font-weight: 600; }
.hex-path { color: #fff; background-color: #28a745; padding: 2px 4px; border-radius: 2px; font-weight: 600; }
.hex-path { color: #fff; background-color: #198754; padding: 2px 4px; border-radius: 2px; font-weight: 600; }
.hex-payload { color: #fff; background-color: #0d6efd; padding: 2px 4px; border-radius: 2px; font-weight: 600; }
.hex-transport { color: #000; background-color: #fd7e14; padding: 2px 4px; border-radius: 2px; font-weight: 600; }
.hex-unknown { color: #adb5bd; }
@@ -363,8 +348,8 @@
/* Decrypted message card */
.decrypted-card {
background-color: rgba(40, 167, 69, 0.1);
border-color: #28a745;
background-color: rgba(25, 135, 84, 0.1);
border-color: #198754;
}
.decrypted-field {