dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-04-27 05:55:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: style.css/index.html — dark theme sync, dedup nav-btn, onerror, hover color (closes #98, #99, #100, #101)

Browse Source
This commit is contained in:
you
2026-03-19 19:38:09 +00:00
parent 02ae79beba
commit e8be570ff5
2 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+7 -7
View File
@@ -74,12 +74,12 @@
<script src="app.js"></script>
<script src="home.js"></script>
<script src="packets.js"></script>
<script src="map.js" onerror=""></script>
<script src="channels.js" onerror=""></script>
<script src="nodes.js" onerror=""></script>
<script src="traces.js" onerror=""></script>
<script src="analytics.js" onerror=""></script>
<script src="live.js" onerror=""></script>
<script src="observers.js" onerror=""></script>
<script src="map.js" onerror="console.error('Failed to load:', this.src)"></script>
<script src="channels.js" onerror="console.error('Failed to load:', this.src)"></script>
<script src="nodes.js" onerror="console.error('Failed to load:', this.src)"></script>
<script src="traces.js" onerror="console.error('Failed to load:', this.src)"></script>
<script src="analytics.js" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observers.js" onerror="console.error('Failed to load:', this.src)"></script>
</body>
</html>
public/style.css
+32 -3
View File
@@ -22,8 +22,12 @@
--surface-3: #ffffff;
--content-bg: var(--surface-0);
--card-bg: var(--surface-1);
--hover-bg: rgba(0,0,0, 0.04);
}
/* ⚠️ DARK THEME VARIABLES — KEEP BOTH BLOCKS IN SYNC
The media query handles OS-level dark mode (auto); [data-theme="dark"] handles manual toggle.
When changing dark theme variables, update BOTH blocks below. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--surface-0: #0f0f23;
@@ -40,9 +44,10 @@
--detail-bg: #232340;
--input-bg: #1e1e34;
--selected-bg: #1e3a5f;
--hover-bg: rgba(255,255,255, 0.06);
}
}
/* ⚠️ DARK THEME VARIABLES — KEEP IN SYNC with @media block above */
[data-theme="dark"] {
--surface-0: #0f0f23;
--surface-1: #1a1a2e;
@@ -58,6 +63,7 @@
--detail-bg: #232340;
--input-bg: #1e1e34;
--selected-bg: #1e3a5f;
--hover-bg: rgba(255,255,255, 0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -74,7 +80,6 @@ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible
}
/* === Touch Targets === */
.nav-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.nav-link { min-height: 44px; display: inline-flex; align-items: center; }
/* === Nav === */
@@ -214,7 +219,7 @@ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible
.data-table th.sortable:hover { color: var(--accent); }
.data-table td {
padding: 3px 6px; border-bottom: 1px solid var(--border);
vertical-align: middle; white-space: nowrap; max-width: 180px;
vertical-align: middle; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.data-table tbody tr:nth-child(even) { background: var(--row-stripe); }
@@ -1203,3 +1208,27 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
.subpath-list .analytics-table td:nth-child(2) { white-space: normal; word-break: break-word; max-width: 50vw; }
.subpath-list .analytics-table { table-layout: auto; }
.subpath-list h4 { margin-top: 24px; }
/* #70 — BYOP textarea larger on mobile */
@media (max-width: 640px) {
.byop-input { min-height: 120px; }
}
/* #71 — Column visibility toggle */
.col-toggle-wrap { position: relative; display: inline-block; }
.col-toggle-btn { font-size: .8rem; padding: 4px 8px; cursor: pointer; background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); }
.col-toggle-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 50; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 0; min-width: 150px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.col-toggle-menu.open { display: block; }
.col-toggle-menu label { display: flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: .82rem; cursor: pointer; color: var(--text); }
.col-toggle-menu label:hover { background: var(--row-hover); }
/* Column hide classes */
.hide-col-region .col-region,
.hide-col-time .col-time,
.hide-col-hash .col-hash,
.hide-col-size .col-size,
.hide-col-type .col-type,
.hide-col-observer .col-observer,
.hide-col-path .col-path,
.hide-col-rpt .col-rpt,
.hide-col-details .col-details { display: none; }