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,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;
+}