zitadel/console/src/styles/sidenav-list.scss

@use '~@angular/material' as mat;

@mixin sidenav-list-theme($theme) {
  /* stylelint-disable */
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $primary-color: mat.get-color-from-palette($primary, 500);
  $accent-color: mat.get-color-from-palette($accent, 500);
  $primary-dark: mat.get-color-from-palette($primary, A900);
  $foreground: map-get($theme, foreground);
  $sec-dark: mat.get-color-from-palette($primary, A800);
  $is-dark-theme: map-get($theme, is-dark);
  /* stylelint-enable */

  .meta {
    box-shadow: inset 1px 0 if($is-dark-theme, #303131, #e3e8ee);
  }

  .sidenav {
    box-shadow: inset -1px 0 if($is-dark-theme, #303131, #e3e8ee);
    transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
  }

  .nav-item {
    color: mat.get-color-from-palette($foreground, text) !important;

    &:hover {
      background-color: if($is-dark-theme, $sec-dark, rgb(84 105 212 / 6%));
      border-top-right-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem;
    }

    &.active {
      color: $primary-color !important;
      background-color: if($is-dark-theme, rgba($color: $primary-color, $alpha: .1), rgb(84 105 212 / 6%)) !important;
    }

    .c_label {
      .count {
        padding: 3px 6px;
        border-radius: 50vw;
      }
    }
  }

  .mat-menu-content,
  .mat-menu-panel {
    background-color: $primary-dark;
    border-radius: .5rem;

    @include mat.elevation(5);

    .active {
      color: $primary-color !important;
      background-color: rgba($color: $primary-color, $alpha: .1) !important;
    }
  }

  .root-header {
    box-shadow: inset 0 -1px #e3e8ee;
    background-color: $primary-dark !important;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);

    .slash {
      color: if($is-dark-theme, #525454, #d1d5d9);
    }

    .org-button {
      border: 1px solid if($is-dark-theme, #303131, #e3e8ee);
      transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
    }
  }

  .admin-line {
    position: fixed;
    display: flex;
    align-items: center;
    bottom: 0;
    left: 0;
    right: calc(100vw - 280px);
    background-color: $primary-color;
    color: white;
    z-index: 1;
    font-size: 13px;
    padding: 3px 2rem;
    transform: translateY(75%);
    transition: all .2s;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;

    span {
      display: none;
    }

    button {
      height: 1.2rem;
      width: 1.2rem;
      line-height: 1.2rem;
      margin-right: 1rem;

      * {
        height: 1.2rem;
        width: 1.2rem;
        line-height: 1rem;
      }
    }

    &.expanded,
    &:hover {
      transform: translateY(0%);
      right: 0;

      span {
        display: inline-block;
      }
    }
  }

  .divider {
    .span {
      border-color: if($is-dark-theme, #303131, #e3e8ee);
    }

    .line {
      background-color: if($is-dark-theme, #303131, #e3e8ee);
    }
  }
}