zitadel/console/src/styles/table.scss

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

@mixin table-theme($theme) {
  /* stylelint-disable */
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);
  $warn-color: mat.get-color-from-palette($warn, 500);
  $primary-color: mat.get-color-from-palette($primary, 500);
  $primary-dark: mat.get-color-from-palette($primary, A900);
  $secondary-dark: mat.get-color-from-palette($primary, A800);
  $inv-color: mat.get-color-from-palette($primary, A600);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);

  .mat-table,
  .mat-paginator {
    background-color: inherit !important;
    transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
  }
  /* stylelint-enable */

  .app-label {
    font-size: 12px;
    border-radius: 1rem;
    color: mat.get-color-from-palette($foreground, text);
    white-space: nowrap;
    background-color: var(--grey);
    padding: 3px 1rem;
  }

  th {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: bold;
    white-space: nowrap;

    &.mat-header-cell {
      color: var(--grey);
      font-size: 11px;
      font-weight: 400;
    }
  }

  td {
    .cnsl-form-field-wrapper {
      padding-bottom: 0;
    }
  }

  tr {
    &.mat-header-row {
      height: 40px;
      padding-bottom: 4px;
    }

    &.highlight {
      cursor: pointer;

      &:hover {
        td {
          background: if($is-dark-theme, #292a2b, #f4f4f4); // rgba($inv-color, .05);
        }
      }
    }
  }

  td .mat-checkbox,
  th .mat-checkbox {
    margin-left: 1rem;
  }

  .no-content-row {
    background-color: if($is-dark-theme, #00000030, #f4f4f470);
    // color: $primary-color;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    align-items: center;
    padding: .5rem;
    font-size: 14px;
    justify-content: center;
  }

  .selection {
    width: 65px;
    max-width: 65px;
  }

  .state {
    border-radius: 50vw;
    padding: 2px .5rem;
    letter-spacing: .05em;
    font-size: 12px;
    background-color: if($is-dark-theme, #4f566b, #e4e7e4);

    &.active {
      background-color: if($is-dark-theme, #4f566b, #cbf4c9);
      color: if($is-dark-theme, #cbf4c9, #0e6245);
    }

    &.inactive {
      color: if($is-dark-theme, #ffc1c1, #620e0e);
      background-color: if($is-dark-theme, #4f566b, #ffc1c1);
    }
  }
}