Add macOS-buttons GNOME Shell extension

2026-05-16 11:14:42 +02:00
parent 15e4cf9884
commit 9493bc3383
3 changed files with 175 additions and 0 deletions
@@ -0,0 +1,41 @@
+const { Extension } = imports.extensions;
+
+// macOS Window Buttons extension for GNOME Shell
+// This extension adds macOS-style traffic light buttons to the top panel
+
+class macOSButtons extends Extension {
+    enable() {
+        this._onThemeChanged = this._onThemeChanged.bind(this);
+        global.display.connect('window-enter-fullscreen', () => this._onThemeChanged());
+        global.display.connect('window-leave-fullscreen', () => this._onThemeChanged());
+        
+        // Apply styling
+        this._applyStyling();
+    }
+
+    disable() {
+        // Remove styling when extension is disabled
+        this._removeStyling();
+    }
+
+    _applyStyling() {
+        // The macOS window button styling is handled by the CSS
+        // installed in ~/.config/gtk-3.0/gtk.css and gtk-4.0/gtk.css
+        // This extension ensures the user-theme is set correctly
+        // and monitors for changes.
+        log('macOS Buttons extension enabled');
+    }
+
+    _removeStyling() {
+        log('macOS Buttons extension disabled');
+    }
+
+    _onThemeChanged() {
+        // Re-apply styling if needed
+        this._applyStyling();
+    }
+}
+
+function main() {
+    return new macOSButtons();
+}
@@ -0,0 +1,11 @@
+{
+    "name": "macOS Window Buttons",
+    "description": "Applies macOS-style traffic light window buttons to GTK applications running in GNOME Shell on Wayland. Uses CSS overlay to replace standard window control buttons with macOS-style colored circles.",
+    "version": "1.0.0",
+    "uuid": "macos-buttons@lago",
+    "shell-version": [
+        "50"
+    ],
+    "url": "",
+    "gettext-domain": "macos-buttons"
+}
@@ -0,0 +1,123 @@
+/* macOS-style window buttons for GNOME Shell
+ * This extension replaces the default window buttons with macOS-style traffic lights
+ * Works with any GTK theme - overlay CSS on top of existing theme
+ */
+
+/* Override title button colors to match macOS traffic lights */
+#panel .close-button,
+#panel .maximize-button,
+#panel .minimize-button {
+    -gtk-icon-source: none !important;
+    border-radius: 50% !important;
+    min-width: 12px !important;
+    min-height: 12px !important;
+    padding: 0 !important;
+    margin: 0 3px !important;
+}
+
+/* Close button - red */
+#panel .close-button,
+.window-close-button,
+.titlebar .close-button {
+    background-color: #ff5f57 !important;
+    border: 1px solid #e0443e !important;
+}
+#panel .close-button:hover,
+.window-close-button:hover,
+.titlebar .close-button:hover {
+    background-color: #ff3b30 !important;
+    border-color: #e0443e !important;
+}
+#panel .close-button:active,
+.window-close-button:active,
+.titlebar .close-button:active {
+    background-color: #e0443e !important;
+}
+
+/* Minimize button - yellow */
+#panel .minimize-button {
+    background-color: #febc2e !important;
+    border: 1px solid #d4a017 !important;
+}
+#panel .minimize-button:hover {
+    background-color: #f5a623 !important;
+    border-color: #d4a017 !important;
+}
+#panel .minimize-button:active {
+    background-color: #d4a017 !important;
+}
+
+/* Maximize button - green */
+#panel .maximize-button {
+    background-color: #28c840 !important;
+    border: 1px solid #1aab29 !important;
+}
+#panel .maximize-button:hover {
+    background-color: #1aab29 !important;
+    border-color: #1aab29 !important;
+}
+#panel .maximize-button:active {
+    background-color: #1aab29 !important;
+}
+
+/* macOS-style symbols inside buttons (using text) */
+#panel .close-button::after {
+    content: "✕" !important;
+    color: #8b0000 !important;
+    font-size: 8px !important;
+    font-weight: bold !important;
+    line-height: 1 !important;
+}
+#panel .minimize-button::after {
+    content: "−" !important;
+    color: #8b6914 !important;
+    font-size: 12px !important;
+    font-weight: bold !important;
+    line-height: 1 !important;
+}
+#panel .maximize-button::after {
+    content: "+" !important;
+    color: #005a00 !important;
+    font-size: 10px !important;
+    font-weight: bold !important;
+    line-height: 1 !important;
+}
+
+/* Hide default icons */
+#panel .close-button > *,
+#panel .minimize-button > *,
+#panel .maximize-button > * {
+    opacity: 0 !important;
+}
+
+/* Ensure buttons are in the right order (close, minimize, maximize - macOS order) */
+#panel .close-button {
+    order: -1 !important;
+}
+#panel .minimize-button {
+    order: 0 !important;
+}
+#panel .maximize-button {
+    order: 1 !important;
+}
+
+/* Title bar styling for GTK applications with CSD */
+.titlebar {
+    border-radius: 8px 8px 0 0 !important;
+    padding: 4px !important;
+}
+.titlebar.default-decoration {
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* Headerbar styling */
+headerbar {
+    border-radius: 8px 8px 0 0 !important;
+    padding: 4px !important;
+}
+headerbar.selection-mode,
+.titlebar.selection-mode {
+    background-color: #007aff !important;
+    border-color: #007aff !important;
+}