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

feat: transparent top bar with pill-styled panel items

Browse Source 
GNOME 50 extension. Panel background fully transparent; each panel
button (clock, quick settings, indicators) gets a translucent rounded
pill with hover/active states. Clock's built-in inner highlight
suppressed to avoid double background.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
root
2026-06-03 16:48:57 +02:00
commit 234c17bce8
3 changed files with 52 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stylesheet.css
+36
View File
@@ -0,0 +1,36 @@
/* Fully transparent top bar */
#panel {
background-color: transparent;
}
/* Each item (clock, quick settings, extension indicators, ...) becomes a
translucent rounded pill */
#panel .panel-button {
background-color: rgba(20, 20, 24, 0.45);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
margin: 4px 3px;
padding: 0 12px;
transition-duration: 150ms;
}
#panel .panel-button:hover {
background-color: rgba(45, 45, 52, 0.65);
}
#panel .panel-button:active,
#panel .panel-button:checked,
#panel .panel-button:focus {
background-color: rgba(60, 60, 70, 0.75);
}
/* Clock: default theme paints its own highlight on the inner .clock child,
which doubles up with our pill — kill it in every state */
#panel .panel-button.clock-display .clock,
#panel .panel-button.clock-display:hover .clock,
#panel .panel-button.clock-display:active .clock,
#panel .panel-button.clock-display:checked .clock,
#panel .panel-button.clock-display:focus .clock {
background-color: transparent;
box-shadow: none;
}