signal-desktop/stylesheets/components/InstallScreenBackupImportStep.scss

// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

.InstallScreenBackupImportStep {
  position: relative;
  display: flex;

  width: 100vw;
  height: 100vh;

  flex-direction: column;
  align-items: center;
}

.InstallScreenBackupImportStep__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-top: 72px;
  flex: 1;
}

.InstallScreenBackupImportStep__title {
  @include font-title-2;
  margin-block: 0 20px;
}

.InstallScreenBackupImportStep .ProgressBar {
  margin-block-end: 14px;
}

.InstallScreenBackupImportStep__progressbar-hint {
  @include font-caption;
  margin-block-end: 22px;

  @include light-theme {
    color: rgba($color-gray-60, 0.8);
  }

  @include dark-theme {
    color: $color-gray-25;
  }
}

.InstallScreenBackupImportStep__description {
  @include font-body-1;

  @include light-theme {
    color: $color-gray-60;
  }

  @include dark-theme {
    color: $color-gray-25;
  }
}

.InstallScreenBackupImportStep__cancel {
  @include button-reset();
  @include button-focus-outline;
  @include font-body-1-bold;

  @include light-theme() {
    color: $color-ultramarine;
  }

  @include dark-theme() {
    color: $color-ultramarine-light;
  }
}

.InstallScreenBackupImportStep__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 36px;
  min-height: 94px;
  gap: 26px;
}

.InstallScreenBackupImportStep__security {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 336px;

  &--icon::after {
    @include light-theme {
      @include color-svg(
        '../images/icons/v3/lock/lock.svg',
        rgba($color-gray-60, 0.8)
      );
    }

    @include dark-theme {
      @include color-svg('../images/icons/v3/lock/lock.svg', $color-gray-25);
    }

    content: '';
    display: block;
    height: 16px;
    width: 16px;
    margin-bottom: 4px;
  }

  &--description {
    @include font-caption;
    text-align: center;

    @include light-theme {
      color: rgba($color-gray-60, 0.8);
    }

    @include dark-theme {
      color: $color-gray-25;
    }

    a {
      text-decoration: none;
    }
  }
}