WhiteSur-gtk-theme/src/sass/gnome-shell/common/_panel.scss

/* Top Bar */
// a.k.a. the panel

$panel_height: $menuitem_size;

@if $panel_size == 'smaller' {
  $panel_height: $menuitem_size - 4px;
}

@if $panel_size == 'bigger' {
  $panel_height: $menuitem_size + 4px;
}

#panel.login-screen {
  @if $scale != 'default' {
    @include fontsize($base_font_size * 2 - 2);
    height: $panel_height * 2 !important;

    .panel-button {
      -natural-hpadding: $container_padding * 2 + 4px !important;
      -minimum-hpadding: $container_padding * 2 + 4px !important;
      border-radius: $bt_radius * 2 !important;

      &.clock-display {
        StLabel { padding: 0 $base_padding * 2 !important; }

        .clock {
          border-radius: $bt_radius * 2 !important;
          padding: 0 $base_padding * 6 !important;
          spacing: $base_padding * 2 !important;
        }
      }

      // status area icons
      .system-status-icon {
        icon-size: $base_icon_size * 2 !important;
        padding: $base_padding * 2 !important;
        margin: 0 $base_padding * 2 !important;
      }

      .panel-status-menu-box StLabel { padding: 0 0 0 $base_padding !important; }

      .appindicator-trayicons-box { margin: 0 $base_padding * 2 !important; }

      StIcon {
        icon-size: 32px !important;
      }
    }
  }
}

#panel {
  background-color: $panel_bg;
  font-weight: normal;
  color: $panel_fg;
  font-feature-settings: "tnum";
  transition-duration: 250ms;
  @include font(body-1);
  height: $panel_height !important;
  box-shadow: 0 5px 16px rgba(black, 0.05);

  // the rounded outset corners
  .panel-corner {
    -panel-corner-radius: $panel-corner-radius;
    -panel-corner-background-color: $panel_bg;
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent;
    -panel-corner-opacity: 1;
    transition-duration: 250ms;
  }

  // panel menus
  .panel-button {
    -natural-hpadding: 12px;
    -minimum-hpadding: 12px;
    font-weight: normal;
    color: $panel_fg;
    transition-duration: 150ms;
    border-radius: $bt_radius;

    StLabel {
      padding: 0;
      margin: 0;
    }

    .popup-menu-arrow { width: 0; height: 0; } // Remove arrow on panel button

    &, &:hover, &:active, &:overview, &:focus, &:checked {
      text-shadow: $panel_asset_shadow;

      .system-status-icon,
      .app-menu-icon > StIcon,
      .popup-menu-arrow {
        icon-shadow: $panel_asset_shadow;
      }
    }

    &:hover {
      color: $panel_fg;
      background-color: $panel_divider;

      &.clock-display {
        background: none;

        .clock {
          background-color: $panel_divider;
        }
      }
    }

    &:active, &:overview, &:focus, &:checked {
      background-color: $panel_track;
      color: $panel_fg;
      box-shadow: none;

      &.clock-display {
        background: none;

        .clock {
          background-color: $panel_track;
        }
      }
    }

    .unlock-screen &,
    .login-screen &,
    .lock-screen & {
      &, &:focus, &:hover, &:active { color: $panel_fg; }
    }

    .login-screen &,
    .lock-screen & {
      box-shadow: none;
    }

    &.clock-display {
      background-color: transparent;

      StLabel { padding: 0 $base_padding; }

      .clock {
        // transition-duration: 150ms;
        border: none;
        border-radius: $bt_radius;
        background-color: transparent;
        box-shadow: none;
        padding: 0 $base_padding * 3;
        spacing: $base_padding;
      }
    }

    &:hover, &:active, &:overview, &:focus, &:checked {
      box-shadow: none !important;

      // The clock display needs to have the background on .clock because
      // we want to exclude the do-not-disturb indicator from the background
      &.clock-display {
        box-shadow: none !important;
        background-color: transparent !important;

        .clock {
          box-shadow: none !important;
        }
      }
    }

    // status area icons
    .system-status-icon {
      icon-size: $base_icon_size;
      padding: $base_padding;
      margin: 0 $base_padding;
    }

    .panel-status-menu-box .system-status-icon { margin: 0; }
    .panel-status-menu-box StLabel { padding: 0 0 0 $base_padding / 2; }

    .appindicator-trayicons-box { margin: 0 $base_padding; }

    // .appindicator-box { margin: 0 0; }

    // app menu icon
    .app-menu-icon {
      -st-icon-style: symbolic;
      // dimensions of the icon are hardcoded
    }

    &#panelActivities { // Activities button
      background-image: url("assets/activities.svg");
      background-position: center center;
      background-size: 24px 24px;
      width: 24px;
      height: 24px;
      background-gradient-direction: none;
      border: none;
      color: transparent;
      font-size: 0;

      > * { width: $medium_size; }

      &:active, &:overview, &:focus, &:checked {
        border: none;
        color: transparent;
        // background-image: url("assets/activities-active.svg");
      }

      &:overview { background-color: transparent; }

      @if $variant == 'light' {
        @if $panel_font == 'black' or $trans == 'false' {
          &:overview {
            background-image: url("assets/activities-white.svg");
          }
        }
      }
    }
  }

  Gjs_AggregateMenu.panel-button,
  Gjs_ui_panel_AggregateMenu.panel-button {
    .system-status-icon {
      margin: 0 $base_padding / 2 !important;
    }
  }

  Gjs_ui_panel_AppMenuButton.panel-button,
  // .menubar-button, // For Fildem global menu
  .desktop-name-label { // For Unite
    font-weight: bold !important;
  }

  // transparent panel on lock & login screens
  &:overview,
  &.unlock-screen,
  &.login-screen,
  &.lock-screen {
    background-color: if($trans == 'false' and $variant == 'light', transparent, transparent);
    box-shadow: none;

    StLabel, StIcon { color: $light_alt_fg_color; }

    .panel-button {
      &:hover {
        color: $light_fg_color;
        background-color: $light_divider_color;

        &.clock-display {
          .clock {
            background-color: $light_divider_color;
          }
        }
      }

      &:active, &:overview, &:focus, &:checked {
        &, &:hover {
          color: $light_fg_color;
          background-color: $light_track_color;
        }

        &.clock-display {
          .clock {
            background-color: $light_track_color;
          }
        }
      }

      &:hover, &:active, &:overview, &:focus, &:checked {
        box-shadow: none;

        &.clock-display {
          box-shadow: none;

          .clock {
            box-shadow: none;
          }
        }
      }
    }

    .panel-corner {
      -panel-corner-radius: 0;
      -panel-corner-background-color: transparent;
      -panel-corner-border-color: transparent;
    }
  }

  .panel-status-indicators-box,
  .panel-status-menu-box {
    spacing: 2px;
  }

  // spacing between power icon and (optional) percentage label
  .power-status.panel-status-indicators-box {
    spacing: 0;
  }

  // indicator for active
  .screencast-indicator,
  .remote-access-indicator { color: $warning_color; }
}