traefik/webui/src/css/sass/app.scss

@import "./fonts";
@import "./variables";
@import "./mixins";

// width
::-webkit-scrollbar {
  width: 8px;
}

// Track
::-webkit-scrollbar-track {
  border-left: 1px solid #404141;
  background: #2E2E2E;
}

// Handle
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #6D6D6D;
}

// Handle on hover
::-webkit-scrollbar-thumb:hover {
  background: #979797;
}

body {
  /* If you need to support browser without CSS var support (<= IE11) */
  min-height: calc(100vh - var(--vh-offset, 0px));
  /* enable vh fix */

  font-family: 'Nunito', 'Roboto', sans-serif;

  background-color: $app-bg;
}

// Custom colors
.text-app-grey {
  color: $app-text-grey;
}

.bg-app-toggle {
  background-color: rgba( $accent, .1 );
}
.body--dark .bg-app-toggle {
  background-color: rgba( $accent, .3 );
}

// Helps
.xs-text-center {
  @include respond-to(sm, max) {
    text-align: center;
  }
}

// Commons
.q-icon.eva{
  margin-bottom: 1.5px;
}

.app-title {
  font-size: 20px;
  font-weight: 700;
  .q-icon {
    font-size: 24px;
  }
  &-label {
    font-size: inherit;
    font-weight: inherit;
    &-sub {
      font-size: 16px;
      font-weight: 600;
    }
  }
  .q-icon + &-label {
    margin-left: 8px;
  }
}

// Boxed
.app-boxed {
  margin-left: auto;
  margin-right: auto;
  &-md {
    max-width: 100%;
    @include respond-to(sm) {
      max-width: 600px;
    }
  }
  &-lg {
    max-width: 100%;
    @include respond-to(md) {
      max-width: 1024px;
    }
  }
  &-xl {
    max-width: 100%;
    @include respond-to(lg) {
      max-width: 1440px;
    }
  }
}

// Section
.app-section {
  display: block;
  &-wrap {
    display: block;
  }
}

// Toolbar
.q-toolbar {
  padding: 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
}

// Card
.q-card {
  border-radius: 8px;
}

// Chips
.app-chip {
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  &-wrap {
    height: 100%;
    flex-wrap: wrap;
    .q-chip__content{
      white-space: normal;
    }
  }
  &-overflow {
    max-width: 90%;

    .q-chip__content{
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  &-accent, &-rule {
    color: $accent;
    background-color: rgba($accent, 0.1);
  }
  &-green, &-entry-points {
    color: $app-text-green;
    background-color: rgba($app-text-green, 0.1);
  }
  &-purple, &-name {
    color: $app-text-purple;
    background-color: rgba($app-text-purple, 0.1);
  }
  &-warning, &-service {
    color: $warning;
    background-color: rgba($warning, 0.1);
  }
  &-negative, &-error {
    color: $negative;
    background-color: rgba($negative, 0.1);
  }
  &-green-2, &-options {
    color: $app-text-green-2;
    background-color: rgba($app-text-green-2, 0.1);
  }
  &-marine, &-interval {
    color: $app-text-marine;
    background-color: rgba($app-text-grey, 0.1);
  }
}
.body--dark .app-chip {
  &-accent, &-rule {
    background-color: rgba($accent, 0.25);
    color: lighten($accent, 25%);
  }
  &-green, &-entry-points {
    background-color: rgba($app-text-green, 0.25);
    color: lighten($app-text-green, 25%);
  }
  &-purple, &-name {
    background-color: rgba($app-text-purple, 0.25);
    color: lighten($app-text-purple, 25%);
  }
  &-warning, &-service {
    background-color: rgba($warning, 0.25);
    color: lighten($warning, 25%);
  }
  &-negative, &-error {
    background-color: rgba($negative, 0.25);
    color: lighten($negative, 25%);
  }
  &-green-2, &-options {
    background-color: rgba($app-text-green-2, 0.25);
    color: lighten($app-text-green-2, 25%);
  }
  &-marine, &-interval {
    background-color: rgba($app-text-grey, 0.25);
    color: lighten($app-text-grey, 25%);
  }
}