studiocms/dist/styles/auth-layout.css

Astro Native CMS for AstroDB. Built from the ground up by the Astro community.

@import "../fonts/onest-font.css";
html {
  background: var(--background);
  box-sizing: border-box;
  color: var(--text);
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--scms-font-onest);
}
main {
  display: flex;
  flex-direction: row;
  height: 100dvh;
  width: 100dvw;
  overflow: hidden;
  color: var(--text);
}
#canvas {
  height: 100%;
  width: 100%;
}
#canvas-container,
.login-form-container {
  width: 50%;
  height: 100%;
  position: relative;
}
#canvas-container {
  opacity: 0;
  transition: all 0.15s ease;
  overflow: hidden;
}
#canvas-container.loaded {
  opacity: 1;
}
.tp-dfwv {
  width: 300px !important;
}
.form-header h1,
.form-header p {
  text-align: center;
}
.form-header h1 {
  margin: 0;
}
.form-header p,
.form-footer p {
  color: var(--text-muted);
}
.login-form-container {
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.login-form-container > .divide-container,
.login-form-container > .button-stack,
.form,
.form-header {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#login-form > .button {
  margin-top: 0.5rem;
}
.button {
  align-items: center;
  justify-content: center;
  width: 100% !important;
  text-align: center !important;
  font-weight: 500 !important;
  font-size: 0.925em !important;
}
@media screen and (max-width: 1100px) {
  .login-form-container > .divide-container,
  .login-form-container > .button-stack,
  .form,
  .form-header {
    width: 75%;
  }
}
@media screen and (max-width: 850px) {
  .login-form-container > .divide-container,
  .login-form-container > .button-stack,
  .form,
  .form-header {
    width: 50%;
  }
  #canvas-container {
    display: none;
  }
  .login-form-container {
    width: 100%;
    border: none;
  }
}
@media screen and (max-width: 660px) {
  .login-form-container > .divide-container,
  .login-form-container > .button-stack,
  .form,
  .form-header {
    width: 100%;
  }
  .login-form-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.fallback-container {
  position: relative;
}
.fallback-image {
  height: 100vh;
  width: auto;
}
.fallback-container:has(+ canvas) {
  display: none;
}
#canvas-container:not(:has(canvas)) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.static-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 45%;
}