overleaf/services/web/frontend/stylesheets/modules/group-settings.less

h3.group-settings-title {
  margin-bottom: 5px;
  font-size: @font-size-large;
}

h4.group-settings-title {
  margin-bottom: 0;
  font-size: @font-size-base;
}

h3.group-settings-title,
h4.group-settings-title {
  font-family: Lato, sans-serif;
  line-height: 28px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
}

.enrollment-invite {
  color: @neutral-90;

  .inner-card {
    background-color: @gray-lightest;
    margin: 16px 0;
    padding: 16px;

    &.warning {
      background-color: @yellow-10;
    }

    .list-row {
      display: flex;
      flex-direction: row;

      .icon {
        display: flex;
        flex: 0 0 32px;
        > span {
          font-size: 16px;
        }
        padding-right: 12px;
        font-size: 24px;

        &.error {
          color: @yellow-50;
          margin-top: 2px;
        }
      }
    }

    a {
      text-decoration: underline;
    }
  }

  .title {
    font-family: Lato, sans-serif;
    font-size: @font-size-large;
    line-height: 28px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .subtitle {
    font-family: Lato, sans-serif;
    font-size: @font-size-base;
    line-height: 24px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .label {
    color: @gray-dark;
    font-size: @font-size-small;
    padding-left: 0;
    text-wrap: wrap;
  }

  .btn {
    width: 100%;
    margin: 8px 0;
  }
  .btn-link-logout {
    width: auto;
    margin: 0;
  }
}

.managed-users-enabled {
  font-family: Lato, sans-serif;
  color: @ol-green;

  .icon {
    vertical-align: text-bottom;
  }
}

.group-settings-sso {
  .group-settings-sso-row {
    margin-top: @margin-md;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .group-settings-sso-action-col {
      margin-left: 16px;
    }
  }
}

.below-settings-section {
  border-top: 1px solid @gray-lighter;
  padding-top: 25px;
  margin-top: 25px;
}

.sso-config-info {
  padding: 12px 0;

  .sso-config-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: @margin-xs;
    padding: 0 @padding-base-horizontal 15px @padding-base-horizontal;
    border-bottom: 1px solid @neutral-20;
    margin-bottom: 15px;
    flex-wrap: wrap;

    .status-label {
      font-size: @font-size-small;
      border-radius: 4px;
      padding: 2px 4px;
      flex-shrink: 0;

      &.status-label-valid {
        background-color: @ol-green;
        color: @neutral-10;
      }

      &.status-label-draft {
        background-color: @neutral-20;
        color: @neutral-90;
      }
    }
  }

  .sso-config-options-buttons {
    display: flex;
    gap: 8px;
  }

  .sso-config-info-section {
    margin-bottom: @margin-md;
    padding: 0 @padding-base-horizontal;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .sso-config-info-label {
    font-size: @font-size-small;
    font-weight: bold;

    .certificate-status {
      font-weight: normal;

      .material-symbols {
        vertical-align: top;
      }

      &.certificate-valid {
        color: @ol-green;
      }

      &.certificate-expiring-soon {
        color: @yellow-50;
      }

      &.certificate-expired {
        color: @red-50;
      }
    }
  }

  .sso-config-info-label-optional {
    font-weight: normal;
  }

  .sso-config-info-content {
    color: @gray-darker;
    word-break: break-word;
  }

  .sso-config-info-content-empty {
    color: var(--neutral-60);
  }

  p {
    margin-bottom: @margin-xs;
  }
}

.sso-config-modal-content {
  .sso-config-interstitial-title {
    margin-top: 25px;
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }

  .sso-config-modal-icon-wrapper {
    text-align: center;
    margin-top: 8px;

    .sso-config-interstitial-icon,
    .sso-config-test-result-icon,
    .sso-config-test-error-icon {
      font-size: 32px;
      width: 80px;
      height: 80px;
      padding: 24px;
      border-radius: 999px;
      gap: 8px;
    }

    .sso-config-interstitial-icon {
      background-color: @neutral-10;
    }

    .sso-config-test-result-icon {
      background-color: @green-10;
      color: @ol-green;
    }

    .sso-config-test-error-icon {
      background-color: @red-10;
      color: @red-50;
    }
  }

  .has-feedback {
    .form-control {
      padding-right: 0;
    }
  }

  .payload-content {
    padding: @padding-base-horizontal;
    border: 1px solid @neutral-20;
    margin-top: 16px;
    border-radius: @border-radius-base-new;
    color: black;

    .saml-response-xml-wrapper {
      margin-top: 16px;
      overflow: hidden;
      background-color: @neutral-10;
      border-radius: @border-radius-base-new;

      .saml-response-header {
        font-family: Lato, sans-serif;
        font-size: 16px;
        font-weight: bold;
        padding: 0 16px;
        border-bottom: 1px solid @neutral-20;
        line-height: 56px;

        .copy-response {
          vertical-align: bottom;
          margin-top: 10px;

          .material-symbols {
            vertical-align: text-top;
          }
        }
      }

      .saml-response-footer {
        text-align: center;
        line-height: 56px;
        position: sticky;
        bottom: 0;
        background: linear-gradient(
          360deg,
          #f4f5f6 0%,
          rgba(244, 245, 246, 0) 835.48%
        );
      }

      .saml-response-xml {
        font-family: 'DM Mono', monospace;
        white-space: pre-wrap;
        font-size: 13px;
        word-break: break-word;
        padding: 16px 16px 0 16px;
        height: 100px;
        min-height: 100px;

        &.view-more {
          height: auto;
        }
      }

      .expand-viewer {
        .material-symbols {
          vertical-align: bottom;
          font-size: 24px;
        }
      }
    }

    .payload-content-user-info-item {
      margin-bottom: @margin-xs;
      display: inline-block;
      width: 100%;
      overflow-wrap: break-word;
    }
  }
}

.certificate-wrapper {
  .certificate-delete {
    text-decoration: none;
    margin-left: 16px;
    span {
      vertical-align: middle;
    }
  }

  .certificate-delete,
  .view-more {
    padding: 0;
  }
}

.certificate-truncated {
  display: flex;
  align-items: center;
  .view-more {
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: 16px;
  }
  .certificate-delete {
    display: inline-flex;
  }
}

.certificate {
  font-family: Courier, monospace;

  .certificate-truncated & {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    flex-grow: 4;
  }
  .certificate-full & {
    word-break: break-all;
    display: block;
  }
}

.certificate-form-row {
  display: flex;

  .certificate-input {
    flex-grow: 11;
  }

  .certificate-delete {
    flex-grow: 1;
    flex-shrink: 0;
  }
}