Skip to content

Add standard CSD titlebutton icons + fix mac hover icons (GTK3 + GTK4)#591

Open
newman2x wants to merge 5 commits intovinceliuice:masterfrom
newman2x:csd-standard-titlebuttons
Open

Add standard CSD titlebutton icons + fix mac hover icons (GTK3 + GTK4)#591
newman2x wants to merge 5 commits intovinceliuice:masterfrom
newman2x:csd-standard-titlebuttons

Conversation

@newman2x
Copy link
Copy Markdown

@newman2x newman2x commented Mar 31, 2026

Problem

The standard (non-macos) variants of Orchis had no styling for CSD titlebuttons.
Without --tweaks macos, window buttons rendered using GTK's default fallback —
no themed icons, no hover or active states.

Under --tweaks macos, the %firefox_window_button hover icons had two issues:
SVG references pointed at the standard symbolic icons (not the mac-specific ones),
and the selector required .default-decoration which plain GTK3 CSD apps like
Celluloid never have, so hover icons were silently skipped on those apps.


gtk

From top to bottom:
GTK4
GTK3
XFWM4

Changes

src/_sass/gtk/_common-3.20.scss

  • Add %standard_window_button placeholder: background-image SVG icons sized and
    centered on the button node, image { opacity: 0 } to hide GTK's native icon child,
    hover/active background using if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15)),
    animation: none on active to prevent GTK ripple from expanding background-size
  • Extend %standard_window_button via new @else branch in button.titlebutton block
    when $mac_style != 'true'
  • Add @else branch for standard unmaximize icon when window is maximized
  • Increase titlebar side padding from $space-size to $space-size + 4px
  • Fix %mac_window_button margin: $space-size - 2px$space-size
  • Fix %firefox_window_button:
    • Move SVG references to base level (not inside &:hover, &:active)
    • Change to mac-specific SVGs (*-symbolic-mac.svg)
    • background-size: 0 0 at rest, revealed to 16px 16px on hover/active, so the icon
      is invisible until hovered without requiring background-image to be unset
    • Add image { opacity: 0 } to suppress native GTK icon
    • Broaden selector from .titlebar.default-decoration to .titlebar — plain GTK3
      CSD apps (e.g. Celluloid) never have .default-decoration, so they were silently
      excluded from hover icons under --tweaks macos
    • Fix maximized unmaximize selector: remove .default-decoration for same reason,
      update SVG reference to unmaximize-symbolic-mac.svg

src/_sass/gtk/_common-4.0.scss

  • Add %standard_window_button placeholder with same approach as GTK3, using
    > image (direct child selector, required in GTK4) with opacity: 0 to hide the
    native icon
  • Extend %standard_window_button via @else branch, replacing the previous bare
    image reset block
  • Fix headerbar border-radius corner-cropping when maximized/tiled/fullscreen by
    adding a .maximized & override block
  • Fix headerbar windowcontrols border-spacing: $space-size2px
  • Fix %mac_window_button margins: $space-size - 2px$space-size
  • Add mac hover icon overlay on > image directly — required because %mac_window_button
    draws colored circles via > image { background-color }, so background-image on the
    button node renders behind the child and is invisible
  • Add color: transparent on mac > image to suppress native GTK symbolic icon
    (rendered via currentColor) without affecting background-color or background-image
  • Add @if/@else unmaximize block targeting > image on hover/active

src/gtk/scalable/

  • Add *-symbolic-dark.svg / @2.svg copies with fill:#ffffff for dark variant,
    used automatically via $asset-suffix interpolation
  • Add *-symbolic-mac.svg / @2.svg files with fill:#ffffff for mac hover icons
    (used by %firefox_window_button GTK3 and mac hover blocks GTK4)

Notes

  • %mac_window_button colored circles are completely unchanged
  • Tested on Linux Mint 22.3 XFCE with GTK3 (Celluloid, gnome-calculator) and
    GTK4/libadwaita (gnome-calendar, baobab)
  • -gtk-recolor(url(...)) does not work reliably on this GTK3 version for non-black
    fills — separate SVG copies are used instead
  • GTK Inspector shows /* FIXME */ next to -gtk-scaled() in GTK4 — display bug
    in the Inspector only, SVG loads correctly at runtime
  • core.sh is not modified — it already copies src/gtk/scalable/ to both
    gtk-3.0/assets/ and gtk-4.0/assets/ on every install

- Add %standard_window_button placeholder with background-image rules
- Use $asset-suffix for light/dark SVG switching
- Add dark SVG copies (*-symbolic-dark.svg) with white fill for dark variant
- Apply %standard_window_button in @else branch when not mac_style
- Fix unmaximize selector: drop .default-decoration for XFCE compatibility
- Add @else branch for unmaximize icon in maximized state
- Fix button size, padding and active state animation ripple
@newman2x newman2x changed the title Add standard CSD titlebutton styling for non-macos variants Add standard CSD titlebutton styling for non-macos variants (GTK3 + GTK4) Apr 1, 2026
@newman2x newman2x changed the title Add standard CSD titlebutton styling for non-macos variants (GTK3 + GTK4) Add standard CSD titlebutton icons + fix mac hover icons (GTK3 + GTK4) Apr 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants