firefox-csd.scss

/*
 * A userChrome that uses the current gtk window decorations, no matter what theme is being used.
 *
 * Normally, the gtk decorations are only used in the default gtk theme.
 */
@use "sass:list";

$gtk-assets: "./gtk-3.0/assets";

$buttons: (
  min: minimize,
  max: maximize,
  restore: maximized,
  close: close,
);

$variants: (normal hover active);

$urls: ();

.titlebar-buttonbox:-moz-lwtheme {
  gap: 7px;
  margin-left: 2px;
}

.titlebar-button:-moz-lwtheme > .toolbarbutton-icon {
    width: 18px !important;
}

toolbarbutton:-moz-lwtheme:hover > image.toolbarbutton-icon {
  background-color: rgba(0, 0, 0, 0%) !important;
}

@mixin gtk-control($file, $variant, $backdrop: false) {
  $pseudo: null;
  @if $backdrop {
    @if $variant == normal {
      $pseudo: ":-moz-window-inactive";
    } @else {
      $pseudo: ":#{$variant}:-moz-window-inactive";
    }
    $variant: "backdrop-#{$variant}";
  } @else if $variant != normal {
    $pseudo: ":#{$variant}";
  } @else {
    $pseudo: "";
  }

  $url: url("#{$gtk-assets}/#{$file}-#{$variant}.svg");
  
  $urls: list.append($urls, $url) !global;

  &#{$pseudo} > image.toolbarbutton-icon {
    background-image: $url !important;
  }
}

@each $cls, $file in $buttons {
  toolbarbutton.titlebar-#{$cls}:-moz-lwtheme  {
    @each $variant in $variants {
      @include gtk-control($file, $variant);
      @include gtk-control($file, $variant, $backdrop: true);
    }
  }
}

// pre-load all the images so there aren't any load flashes
.titlebar-buttonbox:-moz-lwtheme::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: #{$urls};
}