memos/web/src/less/auth.less

.page-wrapper.auth {
  @apply flex flex-row justify-center items-center w-full h-screen bg-white;

  > .page-container {
    @apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center;

    > .auth-form-wrapper {
      @apply w-full py-4 grow flex flex-col justify-center items-center;

      > .page-header-container {
        @apply flex flex-col justify-start items-start w-full mb-4;

        > .title-container {
          @apply w-full flex flex-row justify-between items-center;

          > .logo-img {
            @apply h-20 w-auto;
          }
        }

        > .slogan-text {
          @apply text-sm text-gray-700;
        }
      }

      > .page-content-container {
        @apply flex flex-col justify-start items-start w-full;

        > .form-item-container {
          @apply flex flex-col justify-start items-start relative w-full text-base mt-2;

          > .normal-text {
            @apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none;

            &.not-null {
              @apply text-sm top-0 z-10 leading-4 bg-white rounded;
            }
          }

          &.input-form-container {
            @apply py-2;

            > input {
              @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80;
            }
          }
        }

        &.requesting {
          @apply opacity-80;
        }
      }

      > .action-btns-container {
        @apply flex flex-row justify-end items-center w-full mt-2;

        > .btn {
          @apply flex flex-row justify-center items-center px-1 py-2 text-sm rounded hover:opacity-80;

          &.signup-btn {
            @apply px-3;
          }

          &.signin-btn {
            @apply bg-green-600 text-white px-3 shadow;
          }

          &.requesting {
            @apply cursor-wait opacity-80;
          }
        }
      }

      > .tip-text {
        @apply w-full inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap;

        &.host-tip {
          @apply text-blue-600;
        }
      }
    }

    > .footer-container {
      @apply w-full flex flex-col justify-start items-center;

      > .language-container {
        @apply mt-2 w-full flex flex-row justify-center items-center text-sm text-gray-400;

        > .locale-item {
          @apply px-2 cursor-pointer;

          &.active {
            @apply text-blue-600 font-bold;
          }
        }

        > .split-line {
          @apply font-mono text-gray-400;
        }
      }
    }
  }
}