From e8be570ff5b5974fc8eda4795044e998d4dbad9f Mon Sep 17 00:00:00 2001 From: you Date: Thu, 19 Mar 2026 19:38:09 +0000 Subject: [PATCH] =?UTF-8?q?fix:=20style.css/index.html=20=E2=80=94=20dark?= =?UTF-8?q?=20theme=20sync,=20dedup=20nav-btn,=20onerror,=20hover=20color?= =?UTF-8?q?=20(closes=20#98,=20#99,=20#100,=20#101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 14 +++++++------- public/style.css | 35 ++++++++++++++++++++++++++++++++--- 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/public/index.html b/public/index.html index 997a263..f946192 100644 --- a/public/index.html +++ b/public/index.html @@ -74,12 +74,12 @@ - - - - - - - + + + + + + + diff --git a/public/style.css b/public/style.css index f467f00..c2ce68d 100644 --- a/public/style.css +++ b/public/style.css @@ -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; }