karma/ui/src/Styles/Components/_NavBar.scss

.navbar {
  @supports (backdrop-filter: blur(12px)) {
    background-color: rgba($primary, 0.85);
    backdrop-filter: saturate(50%) blur(12px);
  }
  @supports not (backdrop-filter: blur(12px)) {
    background-color: rgba($primary, 0.95);
  }

  & .navbar-brand,
  & .nav-link,
  & .form-control.components-filterinput {
    min-height: 2.6rem;
  }

  & .navbar-brand {
    min-width: 2.6rem;
  }

  & .components-navbar-button {
    &.navbar-brand {
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
      padding-left: 0.3rem;
      padding-right: 0.3rem;
      line-height: 1.8rem;
    }

    &:hover {
      border-radius: 0.4rem;
      @supports (backdrop-filter: blur(12px)) {
        background-color: rgba($bg-focused, 0.5);
      }
      @supports not (backdrop-filter: blur(12px)) {
        background-color: $bg-focused;
      }
    }
  }

  & .components-navbar-icon {
    color: $navbar-dark-color;

    &.cursor-pointer:hover {
      color: $navbar-dark-hover-color;
    }
  }
}