memos/web/src/less/auth.less

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

  > .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-start items-center;

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

          > .logo-text {
            @apply text-6xl tracking-wide text-black dark:text-gray-200;
          }
        }

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

      > .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 dark:bg-zinc-800 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 dark:bg-zinc-800 dark:text-gray-200 dark:border-gray-600;
            }
          }
        }

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

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

        > .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;
        }
      }
    }
  }
}