From 234c17bce8973e7be77272863f32138dada45575 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Wed, 3 Jun 2026 16:48:57 +0200
Subject: [PATCH] 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>
---
 extension.js   |  9 +++++++++
 metadata.json  |  7 +++++++
 stylesheet.css | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 extension.js
 create mode 100644 metadata.json
 create mode 100644 stylesheet.css

diff --git a/extension.js b/extension.js
new file mode 100644
index 0000000..5a44ff8
--- /dev/null
+++ b/extension.js
@@ -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() {}
+}
diff --git a/metadata.json b/metadata.json
new file mode 100644
index 0000000..e0420e6
--- /dev/null
+++ b/metadata.json
@@ -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
+}
diff --git a/stylesheet.css b/stylesheet.css
new file mode 100644
index 0000000..99e31bc
--- /dev/null
+++ b/stylesheet.css
@@ -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;
+}