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:
@@ -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() {}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user