From b273b61795163dceaf8159125dc727d9a14fc511 Mon Sep 17 00:00:00 2001
From: Yaojia Wang <yaojia.wang@billo.life>
Date: Tue, 30 Jun 2026 19:18:38 +0200
Subject: [PATCH] polish(v0.7): restyle timeline + push toggle to match the
 .toolbtn line-icon look
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The icons were swapped to lucide line icons, but the buttons kept a boxed/light
background that clashed with the minimal toolbar icons. CSS-only fix: render
.tab-timeline + .push-toggle-btn as transparent, monochrome 18px line-icon
buttons (text-dim, accent on hover/active) — identical to .toolbtn — overriding
the earlier boxed default. Markup unchanged (tests stay green: 158 push+tabs).
---
 public/style.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/public/style.css b/public/style.css
index 9c2fd65..e642140 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1502,3 +1502,63 @@ body.home-open #term {
     padding-right: 240px; /* clear the absolutely-positioned .home-seg */
   }
 }
+
+/* v0.7: timeline + push toggle reuse the minimal .toolbtn look. */
+.toolbtn.active {
+  color: var(--accent);
+}
+.toolbtn.push-bell-disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.toolbtn.push-bell-disabled:hover {
+  background: none;
+  color: var(--text-dim);
+}
+
+/* v0.7 fix: timeline + push toggle render as minimal line-icon buttons that
+   match the .toolbtn toolbar style (transparent, monochrome, accent on
+   hover/active). !important defeats the earlier boxed default for these classes. */
+.tab-timeline,
+.push-toggle-btn,
+.push-toggle-disabled {
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 7px 9px;
+  border-radius: 8px;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.tab-timeline svg,
+.push-toggle-btn svg,
+.push-bell svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+.tab-timeline:hover,
+.push-toggle-btn:hover {
+  color: var(--accent);
+  background: var(--surface-2) !important;
+}
+.tab-timeline.active,
+.push-toggle-btn.push-toggle-on {
+  color: var(--accent);
+}
+.push-toggle-disabled {
+  color: var(--text-faint);
+  opacity: 0.6;
+  cursor: default;
+}
+.push-hint {
+  font-size: 11px;
+  color: var(--text-faint);
+}