diff --git a/extension/extension.js b/extension/extension.js new file mode 100644 index 0000000..5cb8319 --- /dev/null +++ b/extension/extension.js @@ -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(); +} diff --git a/extension/metadata.json b/extension/metadata.json new file mode 100644 index 0000000..2e41ede --- /dev/null +++ b/extension/metadata.json @@ -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" +} diff --git a/extension/stylesheet.css b/extension/stylesheet.css new file mode 100644 index 0000000..d9da115 --- /dev/null +++ b/extension/stylesheet.css @@ -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; +}