Checkmate/Client/src/Pages/Auth/index.css

/* ////// */
/* SHARED */
/* ////// */
.register-page,
.set-new-password-page,
.password-confirmed-page,
.forgot-password-page,
.check-email-page {
  display: flex;
  justify-content: center;
  height: var(--env-var-height-1);
}
.register-page h1.MuiTypography-root,
.set-new-password-page h1.MuiTypography-root,
.password-confirmed-page h1.MuiTypography-root,
.forgot-password-page h1.MuiTypography-root,
.check-email-page h1.MuiTypography-root {
  font-size: var(--env-var-font-size-large);
  color: var(--env-var-color-1);
  font-weight: 600;
}
.register-page p.MuiTypography-root,
.register-page span,
.register-page button,
.login-page button,
.set-new-password-page p.MuiTypography-root,
.set-new-password-page button,
.password-confirmed-page p.MuiTypography-root,
.password-confirmed-page button,
.forgot-password-page p.MuiTypography-root,
.forgot-password-page button,
.check-email-page p.MuiTypography-root,
.check-email-page button,
.check-email-page span.MuiTypography-root {
  font-size: var(--env-var-font-size-medium);
}
.register-page p.MuiTypography-root {
  color: var(--env-var-color-2);
  opacity: 0.8;
}
.register-page button:not(.MuiIconButton-root),
.set-new-password-page button:not(.MuiIconButton-root),
.password-confirmed-page button:not(.MuiIconButton-root),
.forgot-password-page button:not(.MuiIconButton-root),
.check-email-page button:not(.MuiIconButton-root) {
  height: 34px;
  border-radius: var(--env-var-radius-2);
  line-height: 0;
}

.register-page svg rect {
  fill: none;
}
.register-form {
  margin-top: 95px;
}

.set-new-password-form,
.password-confirmed-form,
.forgot-password-form,
.check-email-form {
  margin-top: 65px;
  width: var(--env-var-width-2);
}
.set-new-password-page p.MuiTypography-root,
.password-confirmed-page p.MuiTypography-root,
.forgot-password-page p.MuiTypography-root,
.check-email-page p.MuiTypography-root {
  color: var(--env-var-color-2);
}

.set-new-password-page button:not(.MuiIconButton-root) svg,
.password-confirmed-page button:not(.MuiIconButton-root) svg,
.forgot-password-page button svg,
.check-email-page button svg {
  margin-right: 5px;
}

.register-page
  .MuiFormControl-root:has(#register-password-input)
  + span.MuiTypography-root,
.set-new-password-page
  .MuiFormControl-root:has(#register-password-input)
  + span.MuiTypography-root,
.password-confirmed-page
  .MuiFormControl-root:has(#register-password-input)
  + span.MuiTypography-root {
  display: none;
  visibility: hidden;
}

/* ///// */
/* LOGIN */
/* ///// */
.login-page
  .MuiStack-root:not(:has(> .MuiButtonBase-root))
  > span:not(.field-required):not(.input-error) {
  color: var(--env-var-color-3);
  cursor: pointer;
  font-weight: 600;
}

/* /////////// */
/* Check Email */
/* /////////// */
.check-email-page span.MuiTypography-root {
  font-weight: 600;
}

/*  */
.login-page {
  height: 100vh;
}
.login-page h1 {
  font-size: 37px;
  font-weight: 600;
  color: var(--env-var-color-3);
}
.login-page button:not(.MuiIconButton-root),
.login-page .field h3.MuiTypography-root,
.login-page .field input,
.login-page .field .input-error,
.login-page p,
.login-page span {
  font-size: var(--env-var-font-size-medium-plus);
}
.login-page p {
  color: var(--env-var-color-2-light);
}
.login-page .field h3.MuiTypography-root,
.login-page .field input {
  color: var(--env-var-color-5);
}

.login-page p + span {
  color: var(--env-var-color-3);
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 300ms ease-in;
}
.login-page p > span {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: all 200ms;
}
.login-page p > span:hover {
  color: var(--env-var-color-2);
  text-underline-offset: 4px;
}
.login-page p + span:hover {
  opacity: 1;
}
.login-page button:not(.MuiIconButton-root) {
  user-select: none;
  border-radius: var(--env-var-radius-2);
  line-height: 1;
}
.login-page button:not(.MuiIconButton-root),
.login-page .field .MuiInputBase-root:has(input) {
  height: 38px;
}
.login-page .field svg {
  width: 24px;
  height: 24px;
}

.login-page > .MuiStack-root:nth-of-type(1) {
  height: var(--env-var-nav-bar-height);
}
.login-page .background-pattern-svg {
  top: 14%;
  width: 100%;
  max-width: 800px;
}