magner/lib/assets/styles/pages/login.css

Universal admin panel magnetic to any backend

.login-page {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 5rem;

  height: 100vh;
  width: 100%;

  @media (--breakpoint-small) {
    padding-top: 3rem;
  }

  &_lang {
    position: absolute;
    right: 100px;
    top: 30px;

    @media (--breakpoint-small) {
      top: 20px;
      right: 0;
      display: flex;
      justify-content: flex-end;
      position: relative;
      width: 91.6666666667%;
    }
  }

  &_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6rem;

    @media (--breakpoint-small) {
      margin-bottom: 2rem;
    }

    & img {
      min-width: 300px;
      max-width: 100%;
      max-height: 100%;

      @media (--breakpoint-small) {
        min-width: unset;
        max-width: 80%;
      }
    }
  }

  &_form {
    width: 500px;
    @media (--breakpoint-small) {
      width: 100%;
    }

    &_title {
      margin-bottom: 20px;
      text-align: center;
    }

    & .generic-form_error {
      margin-bottom: 8px;
    }

    & .generic-form_actions {
      justify-content: center;
      & > * {
        flex-grow: 1;

        @media (--breakpoint-md) {
          max-width: unset;
        }
      }
    }
  }
}