feat: transparent top bar with pill-styled panel items

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:
2026-06-03 16:48:57 +02:00
commit 234c17bce8
3 changed files with 52 additions and 0 deletions
+9
View File
@@ -0,0 +1,9 @@
import {Extension} from 'resource:///org/gnome/shell/extensions/extension.js';
// All styling lives in stylesheet.css, which GNOME Shell loads
// automatically while the extension is enabled.
export default class PanelPills extends Extension {
enable() {}
disable() {}
}
+7
View File
@@ -0,0 +1,7 @@
{
"uuid": "panel-pills@kraj",
"name": "Panel Pills",
"description": "Transparent top bar with translucent rounded pill backgrounds on panel items.",
"shell-version": ["50"],
"version": 1
}
+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;
}