From 7fb448da536020f0a65d32d86ff1230c9ae11ea0 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Wed, 3 Jun 2026 16:55:19 +0200
Subject: [PATCH] fix: clear theme box-shadow highlights, tighten clock padding

Default theme paints state highlights via inset box-shadow (white
overlay), which washed out the pills on hover/open. Clear it in all
states and re-do highlights via background alpha. Clock width now set
through -natural-hpadding (the property panel buttons actually use).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 stylesheet.css | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/stylesheet.css b/stylesheet.css
index 99e31bc..399432a 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -4,24 +4,34 @@
 }
 
 /* Each item (clock, quick settings, extension indicators, ...) becomes a
-   translucent rounded pill */
+   translucent rounded pill. Default theme highlights states with
+   `box-shadow: inset 0 0 0 100px ...` (white overlay), so box-shadow must
+   be cleared in every state and the highlight re-done via background. */
 #panel .panel-button {
-    background-color: rgba(20, 20, 24, 0.45);
+    background-color: rgba(0, 0, 0, 0.45);
     border: 1px solid rgba(255, 255, 255, 0.10);
     border-radius: 16px;
     margin: 4px 3px;
-    padding: 0 12px;
     transition-duration: 150ms;
+    box-shadow: none;
 }
 
-#panel .panel-button:hover {
-    background-color: rgba(45, 45, 52, 0.65);
+#panel .panel-button:hover,
+#panel .panel-button:focus,
+#panel .panel-button.clock-display:hover,
+#panel .panel-button.clock-display:focus {
+    background-color: rgba(0, 0, 0, 0.65);
+    box-shadow: none;
 }
 
 #panel .panel-button:active,
 #panel .panel-button:checked,
-#panel .panel-button:focus {
-    background-color: rgba(60, 60, 70, 0.75);
+#panel .panel-button:active:hover,
+#panel .panel-button:checked:hover,
+#panel .panel-button.clock-display:active,
+#panel .panel-button.clock-display:checked {
+    background-color: rgba(0, 0, 0, 0.8);
+    box-shadow: none;
 }
 
 /* Clock: default theme paints its own highlight on the inner .clock child,
@@ -34,3 +44,9 @@
     background-color: transparent;
     box-shadow: none;
 }
+
+/* Tighter clock pill — panel buttons size horizontally via -natural-hpadding
+   (default 12px), not regular padding */
+#panel .panel-button.clock-display {
+    -natural-hpadding: 6px;
+}