dots/usr/share/themes/Dracula/gtk-4.0/widgets/_header-bars.scss

/***************
 * Header bars *
 ***************/
%titlebar,
headerbar {
  padding: 0 6px;
  min-height: 34px;
  background-color: $headerbar_color;
  color: $headerbar_fg_color;
  border-radius: 0;

  &:backdrop {
    border-color: $backdrop_borders_color;
    background-image: none;

    transition: $backdrop_transition;
  }

  .title {
    font-weight: bold;
    padding-left: 12px;
    padding-right: 12px;
  }

  .subtitle {
    font-size: smaller;
    padding-left: 12px;
    padding-right: 12px;

    @extend .dim-label;
  }

  %linked-header {
    border: none;
    border-radius: 0;
    border-right-style: none;
    box-shadow: none;

    &:first-child {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }

    &:last-child {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-right-style: solid;
    }

    &:only-child {
      border-radius: 0px;
      border-style: solid;
    }
  }
  entry { min-height: 24px; }
  button {
    @include button(normal-header);
    min-height: 24px;
    margin-top: 5px;
    margin-bottom: 5px;
    &:hover {
      @include button(hover-header, transparent, $purple);
    }
    &:active,
    &:checked {
      @include button(active-header, transparent, $purple);
    }

    &:backdrop,
    &:disabled,
    &:backdrop:disabled {
      @include button(backdrop-header,transparent,transparentize(white,0.7));
    }

    &:backdrop {
      &:hover,
      &:active,
      &:checked {
        background-color: transparent;
        color: $selected_bg_color;
        box-shadow: none;
       // @include button(hover-header,transparent,transparentize(white,0.7));
      }
    }

    @each $b_type, $b_color in (suggested-action, $cyan),
                               (destructive-action, $destructive_color) {
      &.#{$b_type} {
        font-weight: bold;
        min-height: 24px;
        margin-top: 4px;
        margin-bottom: 4px;
        border-radius: 3px;
        @include button(normal, $b_color, white);

        &:hover { @include button(hover, $b_color, white); }

        &:active { @include button(active, $b_color, white); }

        &:disabled {
          @include button(insensitive, $b_color, white);
          label {color: transparentize(white,0.5);}
        }

        &:backdrop {
          @include button(backdrop, $b_color, white);
          border-radius: 3px;
        }

        &:backdrop:disabled { @include button(backdrop-insensitive, $b_color, white); }

      }
    }

    //Reset style
    &.titlebutton {
      color: transparent;
      box-shadow: none;

      &:hover,
      &:active,
      &:checked,
      &:backdrop,
      &:backdrop:hover,* {
        color: transparent;
        box-shadow: none;
      }
    }
  }
  .linked > button,
  .linked > button:hover,
  .linked > button:active,
  .linked > button:checked,
  .linked > button:backdrop { @extend %linked-header; }
  .linked > button:active,
  .linked > button:checked{
    &:backdrop{
      color: $backdrop_selected_bg_color;
      label{
        color: $backdrop_selected_bg_color;
      }
    }
  }
  // End reset style

  &.selection-mode {
    $_hc: mix($top_highlight,$selected_bg_color, 50%); // highlight color

    color: $selected_fg_color;
    text-shadow: 0 -1px transparentize(black, 0.5);
    border-color: $selected_borders_color;

    @include headerbar_fill($selected_bg_color, $_hc);

    &:backdrop {
      background-color: $selected_bg_color;
      background-image: none;
      box-shadow: inset 0 1px mix($top_highlight, $selected_bg_color, 60%);
    }

    .subtitle:link { @extend *:link:selected;  }

    button {
      @include button(normal, $selected_bg_color, $selected_fg_color);

      &.flat { @include button(undecorated); }

      &:hover { @include button(hover, $selected_bg_color, $selected_fg_color); }

      &:active,
      &:checked { @include button(active, $selected_bg_color, $selected_fg_color); }

      &:backdrop {
        &.flat, & {
          @include button(backdrop, $selected_bg_color, $selected_fg_color);

          -gtk-icon-filter: none;
          border-color: $selected_borders_color;

          &:active,
          &:checked {
            @include button(backdrop-active, $selected_bg_color, $selected_fg_color);

            border-color: $selected_borders_color;
          }

          &:disabled {
            @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color);

            border-color: $selected_borders_color;

            &:active, &:checked {
              @include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color);

              border-color: $selected_borders_color;
            }
          }
        }
      }

      &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}

      &:disabled {
        @include button(insensitive, $selected_bg_color, $selected_fg_color);

        &:active,
        &:checked { @include button(insensitive-active, $selected_bg_color, $selected_fg_color); }
      }

      &.suggested-action {
        @include button(normal, $cyan, white);

        &:hover { @include button(hover, $cyan, white); }

        &:active { @include button(active, $cyan, white); }

        &:disabled { @include button(insensitive, $cyan, white); }

        &:backdrop { @include button(backdrop, $cyan, white); }

        &:backdrop:disabled { @include button(backdrop-insensitive, $cyan, white); }
      }
    }

    .selection-menu {
      &:backdrop, & {
        border-color: transparentize($selected_bg_color, 1);
        background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1), transparentize($selected_bg_color, 1));
        box-shadow: none;
        padding-left: 10px;
        padding-right: 10px;

        .arrow {
          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
          color: transparentize($selected_fg_color,0.5);
          -gtk-icon-shadow: none;
        }
      }
    }
  }

  .tiled &,
  .maximized & {
    &.titlebar {
      @if $variant == 'light' { box-shadow: none; }
      @else { box-shadow: inset 0 -1px $bottom_highlight; }
    }
    &:backdrop, & { border-radius: 0; }
  } // squared corners when the window is maximized or tiled

  &.default-decoration {
    padding: 4px;
    min-height: 28px;

    button.titlebutton {
      min-height: 26px;
      min-width: 26px;
      margin: 0;
      padding: 0;
    }
  }
}

headerbar {
  // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
  entry,
  spinbutton,
  separator:not(.sidebar),
  button,
  menubutton {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  // Reset margins for buttons inside menubutton
  menubutton > button,
  spinbutton > button,
  splitbutton > button,
  splitbutton > menubutton,
  entry > menubutton {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  switch {
    margin-top: 0;
    margin-bottom: 0;
  }
  separator { background: transparent; }
}

.background:not(.tiled):not(.maximized) .titlebar {
  @if $variant == 'light' { box-shadow: inset 0 1px lighten($headerbar_color, 5%); }
  @else { box-shadow: inset 0 1px $top_highlight,inset 0 -1px $bottom_highlight; }


  &:backdrop, & {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
}

headerbar {
  window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
  window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 4px; }}

  window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 4px; }}
}

.titlebar:not(headerbar) {
  window.csd > & {
    // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
    padding: 0;
    background-color: transparent;
    background-image: none;
    border-style: none;
    border-color: transparent;
    box-shadow: none;
  }

  > separator {
    &, &:backdrop {
      background: $headerbar_color;
    }
  }

  @extend %titlebar;
}