From 56366870584a1a1c6321869f407af25518c8a3d7 Mon Sep 17 00:00:00 2001 From: David-Alexandre Chanel Date: Fri, 2 Oct 2026 05:42:32 +0200 Subject: [PATCH 1/3] Unify active section styling and refine Advanced divider --- src/styles.css | 44 ++++++++++++++++++++++++++------------------ 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/src/styles.css b/src/styles.css index 93f8e20..dbaf1d9 100644 --- a/src/styles.css +++ b/src/styles.css @@ -254,7 +254,6 @@ button, input, select { font: inherit; } pointer-events: none; } -.panel { padding: 18px; border-bottom: 1px solid #252a35; } label { display: block; margin: 0 0 6px; color: #9da7b9; font-size: 11px; font-weight: 600; } input, select { width: 100%; @@ -304,9 +303,6 @@ button.subtle-button.active:hover { color: #a8d9bd; background: rgba(28, 77, 54, .42); } -button.text-button { min-height: auto; padding: 3px 0; border: 0; color: var(--accent); background: transparent; font-size: 11px; } -button.text-button:hover { color: var(--accent-hover); background: transparent; } - .status { justify-self: end; min-width: 76px; padding: 4px 8px; border-radius: 999px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .status.idle { color: #aeb6c5; background: #272d38; } .status.connecting { color: #f4ce78; background: #3a2f19; } @@ -331,8 +327,6 @@ button.text-button:hover { color: var(--accent-hover); background: transparent; .toggles label { margin: 0; display: flex; align-items: center; gap: 7px; font-weight: 500; color: #c5ccd8; } .toggles input { width: 14px; min-height: 14px; margin: 0; accent-color: var(--accent); } -.debug-panel { padding-bottom: 30px; } -.sticky-heading { position: sticky; top: 0; z-index: 2; padding: 2px 0 10px; background: rgba(17, 20, 26, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .debug-content { display: grid; gap: 9px; } .empty-state { padding: 22px 14px; border: 1px dashed #303746; border-radius: 8px; color: #778194; text-align: center; font-size: 11px; line-height: 1.5; } @@ -390,12 +384,23 @@ button.text-button:hover { color: var(--accent-hover); background: transparent; } .panel-section > summary:hover { - background: rgba(255, 255, 255, .018); + background: rgba(255, 255, 255, .028); +} + +.panel-section > summary:focus-visible { + outline: 1px solid #3b4351; + outline-offset: -1px; + background: #151922; } .panel-section[open] > summary { border-bottom: 0; padding-bottom: 12px; + background: #151922; +} + +.panel-section[open] > summary:hover { + background: #181d26; } .panel-section:not([open]) > summary { @@ -465,6 +470,7 @@ button.text-button:hover { color: var(--accent-hover); background: transparent; .advanced-panel { margin-top: 12px; + margin-left: 8px; padding: 0; border: 0; border-radius: 0; @@ -474,7 +480,7 @@ button.text-button:hover { color: var(--accent-hover); background: transparent; .advanced-panel > summary { display: grid; - grid-template-columns: auto minmax(14px, 1fr) auto; + grid-template-columns: 16px auto minmax(14px, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; @@ -489,17 +495,25 @@ button.text-button:hover { color: var(--accent-hover); background: transparent; font-weight: 650; } +.advanced-panel > summary::before, .advanced-panel > summary::after { content: ""; - grid-column: 2; grid-row: 1; align-self: center; height: 1px; background: #2b313d; } -.advanced-label { +.advanced-panel > summary::before { grid-column: 1; +} + +.advanced-panel > summary::after { + grid-column: 3; +} + +.advanced-label { + grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; @@ -528,10 +542,11 @@ button.text-button:hover { color: var(--accent-hover); background: transparent; } .advanced-summary-value { - grid-column: 3; + grid-column: 4; grid-row: 1; align-self: center; min-width: 0; + max-width: 130px; overflow: hidden; color: #697385; font-size: 9.5px; @@ -570,12 +585,6 @@ button.text-button:hover { color: var(--accent-hover); background: transparent; font-size: 11px; } -.advanced-panel .hint { - margin: 2px 0 0; - font-size: 9.5px; - line-height: 1.4; -} - .advanced-toggle { margin: 0; display: flex; @@ -616,7 +625,6 @@ button.text-button:hover { color: var(--accent-hover); background: transparent; top: 0; z-index: 3; padding: 13px 18px 12px; - background: rgba(17, 20, 26, .94); } .debug-advanced { From e55dac0cce7def8b79bc371929ae00abe2eda8e4 Mon Sep 17 00:00:00 2001 From: David-Alexandre Chanel Date: Fri, 2 Oct 2026 05:43:23 +0200 Subject: [PATCH 2/3] Keep debug header on shared section geometry --- src/styles.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles.css b/src/styles.css index dbaf1d9..037a4e5 100644 --- a/src/styles.css +++ b/src/styles.css @@ -624,7 +624,6 @@ button.subtle-button.active:hover { position: sticky; top: 0; z-index: 3; - padding: 13px 18px 12px; } .debug-advanced { From 4322384136d7f40c185936319c7db3a110e423b1 Mon Sep 17 00:00:00 2001 From: David-Alexandre Chanel Date: Fri, 2 Oct 2026 05:43:52 +0200 Subject: [PATCH 3/3] Use explicit section state instead of Safari tap highlight --- src/styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/styles.css b/src/styles.css index 037a4e5..58c961d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -383,6 +383,11 @@ button.subtle-button.active:hover { display: none; } +.panel-section > summary, +.advanced-panel > summary { + -webkit-tap-highlight-color: transparent; +} + .panel-section > summary:hover { background: rgba(255, 255, 255, .028); }