threshold-ui/ui/admin/app/styles/app.scss

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

@use 'rose/variables/sizing';
@use 'rose/variables/media';
@use 'rose/utilities/type';

@import 'rose';
@import 'notify';
@import '@hashicorp/ember-asciinema-player';

.rose-layout-global {
  .rose-layout-global-body {
    justify-content: center;
  }
}

.rose-layout-centered {
  > .rose-layout-page {
    width: sizing.rems(l) * 18;
  }

  @media (width <= (media.width(small))) {
    display: block;

    > .rose-layout-page {
      width: auto;
    }
  }
}

.rose-nav-sidebar {
  margin-top: sizing.rems(xxl);

  & + .rose-nav-sidebar {
    margin-top: 0;
  }

  .rose-icon {
    margin-right: sizing.rems(xs);
  }
}

.rose-form {
  &:not(.full-width) {
    width: 66%;
  }

  .rose-form-input {
    width: 100%;

    .rose-form-input-field {
      width: 100%;
    }
  }

  .rose-dropdown {
    $icon-width: sizing.rems(m) + sizing.rems(s);
    $indent: $icon-width + sizing.rems(xs);

    .rose-form-radio-label {
      display: flex;

      .rose-icon {
        padding-right: sizing.rems(xxs);
      }
    }

    .indent-label-1 {
      .rose-form-radio-label,
      .rose-form-checkbox-label {
        padding-left: $indent;
      }
    }

    .indent-label-2 {
      .rose-form-radio-label,
      .rose-form-checkbox-label {
        padding-left: $indent + $icon-width;
      }
    }

    .is-project {
      .rose-icon {
        visibility: hidden;
      }
    }
  }
}

.rose-header {
  position: relative;

  .logotype {
    display: none;
  }

  .rose-dropdown {
    .rose-icon {
      transform: scale(0.7);
    }
  }

  &.loading {
    &::after {
      // animation: gradient 1s linear infinite;
      // background: repeating-linear-gradient(
      //   to right,
      //   var(--subtle),
      //   var(--subtle),
      //   var(--info),
      //   var(--subtle),
      //   var(--subtle)
      // );
      background-position: -100% 0;
      background-size: 200% auto;
      content: ' ';
      height: 3px;
      left: 0;
      position: absolute;
      right: 0;
      top: 100%;

      @keyframes gradient {
        0% {
          background-position: -100% 0;
        }

        100% {
          background-position: -200% 0;
        }
      }
    }
  }
}

.rose-dialog-cover {
  svg {
    max-width: 20rem;
  }
}

[class*='session-status-'] {
  color: var(--ui-gray-subtler-2);
}

.session-status-active {
  color: var(--success);
}

.nowrap {
  white-space: nowrap;
}

//  Spinning animation for refresh button icon
@media (prefers-reduced-motion: no-preference) {
  .is-loading {
    .rose-icon {
      @keyframes hds-flight-icon-animation-rotation {
        to {
          transform: rotate(360deg);
        }
      }

      > svg {
        animation: hds-flight-icon-animation-rotation 0.7s linear infinite;
      }
    }
  }
}

// Onboarding styles
.create-resources {
  display: flex;
  align-items: flex-start;
  width: sizing.rems(xl) * 15;

  .create-resources-form {
    display: flex;
    justify-content: space-between;
    gap: sizing.rems(s);
  }

  .hds-form-group {
    margin-top: sizing.rems(l);
    justify-content: center;

    .image-container {
      display: flex;
      justify-content: center;
      margin-top: sizing.rems(l);
    }
  }

  .create-resources-item {
    margin-bottom: sizing.rems(xxl);

    .create-resources-item-header {
      display: flex;
      align-items: center;
      align-self: center;
      gap: 8px;
      margin-bottom: sizing.rems(s);

      h3 {
        margin: 0;
      }

      .hds-icon-tile {
        color: var(--token-color-foreground-success);
      }
    }

    .hds-link-standalone {
      margin-bottom: sizing.rems(xs);
    }

    .create-resources-item-controller {
      margin-top: sizing.rems(xl);

      .create-resources-item-controller-label {
        color: var(--ui-gray);
      }

      .create-resources-item-controller-copyable {
        margin: sizing.rems(xxs) 0 sizing.rems(l) 0;
      }

      .image-container > svg {
        width: 100%;
        height: 100%;
      }
    }
  }
}

/* stylelint-disable selector-class-pattern */
.oidc-prompts {
  margin-left: 2.5rem;

  .hds-form-group__control-field {
    margin-bottom: 0.5rem;
  }
}
/* stylelint-enable selector-class-pattern */

.worker-create-section {
  border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
  border-radius: sizing.rems(xxs);
  margin-bottom: sizing.rems(xl);
  padding: sizing.rems(l);

  > div {
    margin-bottom: sizing.rems(l);
  }

  > p code {
    background-color: var(--token-color-surface-strong);
    border-radius: 5px;
    color: var(--token-color-foreground-primary);
    padding: sizing.rems(xxxs) sizing.rems(xxs);
  }

  .worker-auth-token {
    align-items: flex-end;
    display: flex;
    gap: sizing.rems(m);

    [class*='hds-form-field--layout'] {
      margin-bottom: 0;
    }
  }

  .worker-success {
    align-items: center;
    display: flex;
    justify-content: space-between;

    > div {
      align-items: center;
      display: flex;
      gap: sizing.rems(xs);

      p {
        margin-bottom: sizing.rems(xxs);
      }

      &:first-child {
        width: 40%;

        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      &:last-child {
        p {
          color: var(--success);
        }
      }
    }

    .rose-icon {
      color: var(--success);
    }
  }
}

.info-field {
  .hds-form-field--layout-vertical {
    grid-template-areas: 'label' 'text-input' 'helper-text';

    .hds-form-label {
      font-size: sizing.rems(m);
      grid-area: label;
      line-height: sizing.rems(m) + sizing.rems(xxs);
    }

    .hds-form-text-input {
      background-color: transparent;
      border: 0;
      color: var(--token-form-label-color);
      grid-area: text-input;
      font-size: sizing.rems(m);
      padding: 0;
    }

    .hds-form-helper-text {
      color: var(--token-form-label-color);
      grid-area: helper-text;
    }
  }

  &.has-icon {
    .hds-icon {
      position: absolute;
      transform: translateY(sizing.rems(xl) - sizing.rems(xs));
    }

    .hds-form-helper-text,
    .hds-form-text-input {
      margin-left: sizing.rems(l) + sizing.rems(xs);
    }
  }
}

// json secret editor
.secret-editor {
  // Secret Editor body and gutter colors are based on the Monokai color template
  // and are used for both the Editor and the Skeleton views
  --button-shadow: #000004;
  --secret-editor-body: #272822; // body and button background
  --secret-editor-gutter: #31332b; // gutter background
  --secret-editor-height: 210px;

  background: var(--secret-editor-body);
  border-radius: sizing.rems(xxs);
  height: var(--secret-editor-height);
  margin-bottom: sizing.rems(l);
  width: 100%;

  .secret-editor-json {
    .CodeMirror {
      border-radius: sizing.rems(xxs);
      height: var(--secret-editor-height);
      display: block;
    }

    .CodeMirror-gutters {
      background: var(--secret-editor-gutter);
    }
  }

  .secret-editor-skeleton-wrapper {
    // using ui-gray directly so it does not change when
    // user is in dark mode since the secret editor
    // does not change theme colors between light and dark
    color: var(--token-color-palette-neutral-300);
    display: flex;
    height: 100%;
    position: relative;
  }

  .secret-editor-skeleton-gutter {
    background: var(--secret-editor-gutter);
    border-radius: sizing.rems(xxs) 0 0 sizing.rems(xxs);
    width: sizing.rems(xxl) + sizing.rems(xxs); // 52
  }

  .secret-editor-skeleton-body {
    width: 100%;

    // skeleton text rows for detail and edit views
    // applies general styles to child div of skeleton-body
    // then adds dynamic width to each child
    // depending on the class (e.g., s, m, l)
    > div {
      background: var(--secret-editor-gutter);
      border-radius: sizing.rems(m);
      height: sizing.rems(xs);
      margin: sizing.rems(s) - sizing.rems(xxxxs); // 11

      &:first-child {
        margin-top: sizing.rems(m);
      }

      &.s {
        width: 5%;
      }

      &.m {
        width: 10%;
      }

      &.l {
        width: 15%;
      }

      &.xl {
        width: 20%;
      }
    }
  }

  .secret-editor-skeleton-message {
    font-size: sizing.rems(s) + sizing.rems(xxxs); // 14
    left: 50%;
    position: absolute;
    top: 50%;

    // centers message with editor body and gutter
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .rose-button-secret-editor-skeleton-button {
    background: var(--secret-editor-body);
    border: sizing.rems(xxxxs) solid var(--ui-gray);
    border-radius: sizing.rems(xxxs);
    box-shadow: 0 sizing.rems(xxs) sizing.rems(xxs) var(--button-shadow);

    // using ui-gray directly so it does not change when
    // user is in dark mode since the secret editor
    // does not change theme colors between light and dark
    color: #{color(ui-gray, 050)};
    font-size: sizing.rems(s) + sizing.rems(xxxs); // 14
    height: sizing.rems(xl);
    padding: 0 sizing.rems(l);
  }
}

.ordered-series-diagram {
  --group-title-line-height: 2.25rem;

  width: 100%;
  display: flex;
  margin-bottom: 1rem;

  &-item {
    display: flex;
    margin-top: var(--group-title-line-height);

    &-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    &-title {
      font-weight: var(--token-typography-font-weight-semibold);
      margin-top: 0.5rem;
      width: 4rem;
    }

    &:last-child {
      > .ordered-series-diagram-separator-icon {
        display: none;
      }
    }
  }

  &-group {
    &-content {
      border-radius: 0.5rem;
      padding: 0 0.75rem 0.75rem;
    }

    &-items {
      display: flex;

      & .ordered-series-diagram-item {
        margin-top: 0;
      }
    }

    &-title {
      font-size: var(--token-typography-display-100-font-size);
      line-height: var(--group-title-line-height);
      text-align: center;
    }

    &:last-child {
      > .ordered-series-diagram-separator-icon {
        display: none;
      }
    }
  }

  &-separator-icon {
    color: var(--token-color-foreground-faint);
    margin: 0.75rem 0.5rem;
  }
}

// target worker filters
.target-workers {
  .accordion-item-toggle-content {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
  }

  .rose-form-actions {
    margin-top: 2rem;
  }

  .worker-diagram {
    min-height: 15rem;
    margin-top: 1rem;

    .ordered-series-diagram {
      min-height: 10rem;
    }
  }
}

.enable-session-recording-toggle {
  width: 50%;
  margin-top: 1.5rem;

  .hds-form-field--layout-vertical,
  .hds-link-standalone {
    margin-left: 2.5rem;
  }

  .hds-link-standalone {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
  }
}

// target sidebar
.target-sidebar {
  .description {
    color: var(--token-form-helper-text-color);
    font-weight: var(--token-typography-font-weight-normal);
    font-size: var(--token-typography-body-200-font-size);
  }

  .hds-link-standalone {
    margin-top: 1rem;
  }
}

.target-sidebar-aliases {
  margin-bottom: 3rem;

  .description {
    color: var(--token-form-helper-text-color);
    font-weight: var(--token-typography-font-weight-normal);
    font-size: var(--token-typography-body-200-font-size);
  }

  .hds-link-standalone {
    margin-top: 1rem;
  }

  .link-list-item:first-of-type {
    width: 90%;
  }

  .link-list-item {
    margin-bottom: 0.5rem;
    word-break: break-word;
  }

  /* stylelint-disable selector-class-pattern */
  .hds-card__container > ul {
    display: flex;
    margin-bottom: 0.5rem;
  }

  .hds-link-standalone__text {
    margin: 1rem 0;
  }
  /* stylelint-enable selector-class-pattern */

  .hds-dropdown .hds-dropdown-toggle-icon {
    color: var(--stark);
  }
}

.link-list-item {
  display: flex;
  align-items: center;
  padding: 1rem;

  a {
    text-decoration: none;
    align-items: center;
    display: flex;
    width: 100%;
  }

  &__info {
    display: flex;
    width: 100%;
    align-items: center;
    margin-left: 0.25rem;
    gap: 0.75rem;
  }

  &__text {
    color: var(--token-color-foreground-primary);
    margin-bottom: 0.25rem;
  }

  .hds-icon-arrow-right {
    color: var(--token-color-foreground-faint);
  }
}

.list-wrapper-field {
  border: 0;

  /* stylelint-disable selector-class-pattern */
  .hds-table__thead {
    .hds-table__th {
      height: auto;
      line-height: 1;
    }
  }

  // Remove divider between table header cells
  .hds-table__thead .hds-table__tr .hds-table__th + .hds-table__th::before {
    all: unset;
  }

  .hds-table__thead,
  .hds-table__tbody {
    .hds-table__tr {
      // Remove background color on all cells (especially header cells)
      background-color: transparent;
    }

    .hds-table__th,
    .hds-table__td {
      padding: 0.75rem 1rem;

      // Rely on right padding for cell spacing...
      padding-left: 0;

      &:last-child {
        // ...except in the last cell, which doesn't need right padding
        padding-right: 0;

        // Shrink last cell to minimum possible width
        width: 1%;
        white-space: nowrap;
      }
    }
  }
  /* stylelint-enable selector-class-pattern */
}

.auth-methods-list-alert {
  margin-bottom: 1rem;
}

.auth-methods-list-table,
.workers-list-table,
.sessions-list-table {
  margin-top: 1rem;
}

// secret input field
.secret-input {
  display: flex;
  align-items: flex-end;
  column-gap: 0.5rem;
  position: relative;

  .overlay {
    width: 60%;
    height: 1rem;
    position: absolute;
    bottom: 2.15rem;
    left: 0.5rem;
    border-radius: 0.25rem;
    z-index: 1;
    background-color: var(--token-color-palette-neutral-200);
  }

  .hds-button {
    margin-bottom: 1.5rem;
    flex-basis: 6rem;
  }
}

// session recording player
.session-recording-player {
  --player-background-color: #252937;
  --player-divider: #656a761a;
  --player-white: #fff;
  --player-control-bar-buffer: #656a76;
  --player-play-button: #1060ff;
  --player-play-button-border: #0c56e9;

  background-color: var(--player-background-color);
  border-radius: 0.75rem;

  &-header {
    border-bottom: var(--player-divider) 0.125rem solid;

    // override of button styles to allow for
    // static colors in light and dark mode
    a {
      color: var(--player-white);
      padding: 1rem;
    }

    .hds-button--color-tertiary:hover,
    .hds-button--color-tertiary:active {
      color: var(--player-white);
      background-color: transparent;
      border-color: transparent;
    }
  }

  &-loading {
    color: var(--token-color-palette-neutral-400);
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    height: 75vh;
  }

  &-theme {
    .asciinema-theme-asciinema {
      background-color: var(--player-background-color);
    }

    // hides large play icon overlay
    .ap-overlay {
      display: none;
    }

    pre.ap-terminal {
      background-color: var(--player-background-color);
      border-color: var(--player-background-color);
    }

    .ap-wrapper {
      .ap-player {
        border-radius: 0.75rem;
      }

      &.ap-hud .ap-control-bar {
        bottom: 0;
      }

      .ap-control-bar {
        bottom: -3.625rem;
        background: var(--player-background-color);
        border-top: var(--player-divider) 0.125rem solid;
        height: 3.625rem;

        .ap-playback-button {
          background: var(--player-play-button);
          border: var(--player-play-button-border) 0.063rem solid;
          border-radius: 0.313rem;
          margin: 0.75rem;
          padding: 0.625rem 1rem;

          .ap-icon path {
            fill: var(--player-white);
          }
        }
      }

      .ap-timer {
        font-family: var(--token-typography-body-base-font-family);
        font-size: var(--token-typography-body-base-font-size);
        line-height: var(--token-typography-body-base-line-height);
        color: var(--player-white);
        position: relative;
        top: 40%;
      }

      .ap-progressbar {
        padding-top: 0.875rem;

        .ap-bar .ap-gutter {
          background-color: var(--player-control-bar-buffer);

          span {
            background-color: var(--player-white);
          }
        }
      }

      .ap-fullscreen-button {
        padding-top: 1.5rem;

        .ap-icon path {
          fill: var(--player-white);
        }
      }
    }
  }
}

// Session Recording sidebar details
.rose-layout-body-content-sidebar .section-details {
  margin-bottom: 3rem;
}

.ldap-read-only-fields .hds-form-field--layout-vertical {
  margin-bottom: 0.5rem;
}

// Session recording - List
.session-recording-list-cell-item,
.aliases-list-cell-item {
  display: flex;
  gap: 0.5rem;

  span {
    display: flex;
    align-items: center;
  }
}

.session-recording-list-cell-item.target-column {
  flex-direction: column;

  span {
    gap: 0.5rem;
  }
}

// Channels by Connection
.channels-by-connection {
  &-connection-header {
    padding: 0.875rem 1rem;
  }

  .no-channels-message {
    padding: 0 1rem;
  }
}

// Channel
.channel-header {
  margin-bottom: 1rem;

  h2 {
    margin-bottom: 0;
  }
}

// Session Recording Status
// overwrites recording badge icon to red
.session-recording-status-badge {
  /* stylelint-disable selector-class-pattern */
  div.hds-badge__icon {
    svg.hds-icon-circle-dot {
      color: var(--token-color-palette-red-200);
    }
  }
}

// ldap form sections
.ldap-section {
  margin-top: 4rem;

  .hds-form-helper-text {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
  }
}

.alias-deletion-modal {
  .hds-button-set {
    margin: 0;
  }
}

// storage policies
.policy {
  margin-bottom: 0;

  .hds-form-field--layout-vertical {
    width: 50%;
  }

  .hds-form-group__control-fields-wrapper {
    flex-direction: row;
  }
}

.policy-custom-input {
  .hds-form-field__control {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .hds-segmented-group {
      width: 45%;
    }

    .hds-form-field--layout-flag {
      width: 40%;
      margin-bottom: 0;
    }
  }

  .hds-badge {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-color: var(--ui-gray-subtler-1);
    border-left: 0;

    &.disabled {
      color: var(--token-form-control-disabled-foreground-color);
      border-color: var(--token-form-control-disabled-border-color);
    }
  }
}

// policy sidebar

.policy-sidebar {
  background-color: var(--token-form-control-disabled-surface-color);
  padding: 1.5rem 1rem 0.7rem;
  width: 300px;

  .hds-card__container > ul {
    display: flex;
  }

  .description {
    margin: 0.5rem 0;
  }

  .hds-link-standalone__text {
    margin: 1rem 0;
  }
}

// add storage policy

.select-policy {
  margin-top: 1rem;
}

.add-policy-link {
  margin-bottom: 1.5rem;
}

// generic loading indicator
.loading-indicator {
  margin-top: 20%;
}

// Roles
.role-grant-scopes {
  .hds-application-state {
    margin-top: 3rem;
  }
}

.role-manage-scopes-form {
  .manage-custom-scopes-helper-text {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
  }

  .hds-alert {
    margin-bottom: 2rem;
  }
}

.role-manage-custom-scopes-form {
  .table-selected-items-text {
    display: flex;
    justify-content: end;
    height: 1rem;
  }

  .hds-table {
    margin-top: 0.5rem;
  }

  .hds-pagination {
    margin-bottom: 2rem;
  }
}

// workers
.workers {
  .rose-dropdown-content {
    max-height: 300px;
    overflow: scroll;
  }
}

.view-more-tags {
  margin-top: 1.5rem;
}

.tag-shortener {
  display: inline-block;
  max-width: 310px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.worker-tags {
  .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}

.dynamic-credential-selection {
  .hds-form-group__control-field {
    margin-bottom: 0;
  }
}

.change-state {
  margin-right: 1rem;
}

.dropdown-radio-btn {
  .hds-form-group__control-field {
    padding: 0.25rem 0.75rem;
  }
}

// worker filter generator
.filter-generator-selection {
  .hds-form-group__control-field {
    margin-bottom: 0;
  }
}

.formatted-results {
  p {
    margin-bottom: 0.5rem;
  }
}

.generated-results-container {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: flex-start;
}

// storage buckets
.storage-bucket-worker-filter {
  .hds-form-field--layout-flag {
    margin-bottom: 0;
  }
}