root/gnome-panel-pills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: clear theme box-shadow highlights, tighten clock padding

Browse Source 
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>
This commit is contained in:
root
2026-06-03 16:55:19 +02:00
parent 234c17bce8
commit 7fb448da53
1 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stylesheet.css
+23 -7
View File
@@ -4,24 +4,34 @@
} }
/* Each item (clock, quick settings, extension indicators, ...) becomes a /* 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 { #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: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px; border-radius: 16px;
margin: 4px 3px; margin: 4px 3px;
padding: 0 12px;
transition-duration: 150ms; transition-duration: 150ms;
box-shadow: none;
} }
#panel .panel-button:hover { #panel .panel-button:hover,
background-color: rgba(45, 45, 52, 0.65); #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:active,
#panel .panel-button:checked, #panel .panel-button:checked,
#panel .panel-button:focus { #panel .panel-button:active:hover,
background-color: rgba(60, 60, 70, 0.75); #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, /* Clock: default theme paints its own highlight on the inner .clock child,
@@ -34,3 +44,9 @@
background-color: transparent; background-color: transparent;
box-shadow: none; 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;
}