discourse/app/assets/stylesheets/mobile/login-signup-page.scss

// Shared styles

.login-fullpage,
.signup-fullpage,
.invites-show {
  .signup-body,
  .login-body {
    flex-direction: column;
    gap: unset;
    padding-inline: 0.5rem;
  }

  .login-page-cta,
  .signup-page-cta {
    font-size: var(--font-down-1);
    padding: 1rem;
    padding-top: 0;

    &__buttons {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
    }

    button {
      padding-block: 0.65rem;
      width: fit-content;
    }
  }

  #login-form,
  .login-form {
    margin: 0;
    padding: 1rem;

    .input-group {
      input {
        height: 2.5em;
        margin-bottom: 0.25em;
      }

      margin-bottom: 1em;

      input:focus + label,
      input.value-entered + label.alt-placeholder {
        top: -10px;
      }

      input.alt-placeholder:invalid {
        color: var(--primary);
      }

      label.more-info {
        color: var(--primary-medium);
      }
    }
  }

  #login-form,
  .login-form,
  .invite-form {
    .input-group {
      label.alt-placeholder,
      .user-field.text label.control-label {
        top: 11px;
      }
      div.user-field:not(.dropdown)
        .controls
        input:focus
        + label.alt-placeholder.control-label,
      div.user-field.value-entered:not(.dropdown)
        .controls
        label.alt-placeholder.control-label {
        top: -10px;
      }
      .user-field.dropdown label.control-label,
      .user-field.multiselect label.control-label {
        top: -10px;
      }
    }
  }

  #login-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 1rem;
    gap: 0.25em;
    margin-bottom: 1rem;

    .btn {
      margin: 0;
      padding-block: 0.65rem;
      border: 1px solid var(--primary-low);
      flex: 1 1 calc(50% - 0.25em);
      font-size: var(--font-down-1);
      white-space: nowrap;

      &:last-child {
        margin-right: auto;
      }
    }
  }

  .caps-lock-warning {
    display: none;
  }

  .login-welcome-header {
    padding: 1rem;
  }

  .login-right-side {
    padding: 1rem 0 0;
    background: unset;
    max-width: unset;
  }

  .login-or-separator {
    border-top: 1px solid var(--primary-low);
    position: relative;
    margin-block: 1rem;

    span {
      transform: translate(-50%, -50%);
      position: absolute;
      left: 50%;
      top: 50%;
      background: var(--secondary);
      padding-inline: 0.5rem;
      color: var(--primary-medium);
      font-size: var(--font-down-1-rem);
      text-transform: uppercase;
    }
  }
}

.invites-show {
  .login-welcome-header {
    padding-inline: 0;
  }
  .signup-progress-bar {
    margin-inline: 0;
  }
}

// Login page

.login-fullpage .login-body {
  .login-page-cta {
    &__buttons {
      .login-page-cta__login {
        width: 100%;
        margin-bottom: 0.5rem;
      }
    }
    &__signup {
      background: none !important;
      font-size: var(--font-up-1);
      padding: 0;
    }
    &__no-account-yet {
      font-size: var(--font-up-1);
    }
  }
}

// Signup page

.signup-fullpage .signup-body {
  .signup-page-cta {
    &__buttons {
      .signup-page-cta__signup {
        width: 100%;
        margin-bottom: 0.5rem;
      }
    }
    &__login {
      background: none !important;
      font-size: var(--font-up-1);
      padding: 0;
    }
    &__existing-account {
      font-size: var(--font-up-1);
    }
  }

  .login-right-side::before {
    display: none;
  }

  .login-welcome-header {
    padding-bottom: 0.25rem;
    padding-top: 0;
  }

  #login-form {
    padding-bottom: 0;
  }
}