@djangocfg/layouts 2.1.109 → 2.1.111

package/src/layouts/AuthLayout/styles/auth.css

@@ -0,0 +1,578 @@
+/**
+ * Auth Layout Styles
+ *
+ * Minimal auth-specific styles.
+ * Uses design system variables from @djangocfg/ui-core.
+ */
+
+/* ===== SPRING EASINGS ===== */
+
+:root {
+  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
+  --spring-snappy: cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* ===== LAYOUT ===== */
+
+.auth-layout {
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: hsl(var(--background));
+}
+
+/* ===== CONTAINER ===== */
+
+.auth-container {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 2rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 1rem;
+}
+
+.auth-container[data-entering="true"] {
+  animation: authFadeIn 0.4s var(--spring-smooth) forwards;
+}
+
+@keyframes authFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ===== HEADER ===== */
+
+.auth-header {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.auth-logo {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 0.5rem;
+  object-fit: contain;
+}
+
+.auth-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: hsl(var(--foreground));
+  margin: 0;
+}
+
+.auth-subtitle {
+  font-size: 0.9375rem;
+  color: hsl(var(--muted-foreground));
+  margin: 0;
+}
+
+.auth-identifier {
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+/* ===== FORM ===== */
+
+.auth-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.auth-input {
+  width: 100%;
+  height: 3rem;
+  padding: 0 1rem;
+  font-size: 0.9375rem;
+  background: hsl(var(--input));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  color: hsl(var(--foreground));
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.auth-input:focus {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
+}
+
+.auth-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.auth-input::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Phone input */
+.auth-phone-input .PhoneInputInput {
+  height: 3rem;
+  padding: 0 1rem;
+  font-size: 0.9375rem;
+  background: hsl(var(--input));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  color: hsl(var(--foreground));
+}
+
+.auth-phone-input .PhoneInputInput:focus {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
+}
+
+/* ===== BUTTONS ===== */
+
+.auth-button {
+  width: 100%;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.15s;
+}
+
+.auth-button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.auth-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.auth-button-primary {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+
+.auth-button-primary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.auth-button-secondary {
+  background: hsl(var(--secondary));
+  color: hsl(var(--secondary-foreground));
+}
+
+.auth-button-secondary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+/* Loading state */
+.auth-button-loading {
+  color: transparent !important;
+  position: relative;
+}
+
+.auth-button-loading::before {
+  content: "";
+  position: absolute;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: authSpin 0.6s linear infinite;
+}
+
+.auth-button-primary.auth-button-loading::before {
+  border-color: hsl(var(--primary-foreground));
+  border-right-color: transparent;
+}
+
+@keyframes authSpin {
+  to { transform: rotate(360deg); }
+}
+
+/* ===== DIVIDER ===== */
+
+.auth-divider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.8125rem;
+}
+
+.auth-divider::before,
+.auth-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: hsl(var(--border));
+}
+
+/* ===== LINKS ===== */
+
+.auth-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: hsl(var(--primary));
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.auth-link:hover {
+  opacity: 0.8;
+}
+
+.auth-link:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.auth-actions {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+/* ===== ERROR ===== */
+
+.auth-error {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: hsl(var(--destructive));
+  background: hsl(var(--destructive) / 0.1);
+  border: 1px solid hsl(var(--destructive) / 0.2);
+  border-radius: 0.5rem;
+  animation: authShake 0.4s ease;
+}
+
+@keyframes authShake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-6px); }
+  40% { transform: translateX(6px); }
+  60% { transform: translateX(-4px); }
+  80% { transform: translateX(4px); }
+}
+
+/* ===== FOOTER ===== */
+
+.auth-footer {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  font-size: 0.8125rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.auth-footer a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.auth-footer a:hover {
+  color: hsl(var(--foreground));
+}
+
+.auth-footer-dot {
+  opacity: 0.3;
+}
+
+/* ===== TERMS ===== */
+
+.auth-terms {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.auth-terms-checkbox {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.auth-terms a {
+  color: hsl(var(--primary));
+  text-decoration: none;
+}
+
+.auth-terms a:hover {
+  opacity: 0.8;
+}
+
+/* ===== CHANNEL TOGGLE ===== */
+
+.auth-channel-toggle {
+  display: flex;
+  padding: 4px;
+  background: hsl(var(--muted));
+  border-radius: 0.5rem;
+  gap: 4px;
+}
+
+.auth-channel-option {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.auth-channel-option[data-active="true"] {
+  color: hsl(var(--foreground));
+  background: hsl(var(--card));
+  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.05);
+}
+
+.auth-channel-option svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* ===== OTP INPUT ===== */
+
+.auth-otp-container {
+  display: flex;
+  justify-content: center;
+}
+
+.auth-otp-wrapper {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.auth-otp-wrapper input {
+  width: 3rem;
+  height: 3.5rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+  text-align: center;
+  background: hsl(var(--input));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  color: hsl(var(--foreground));
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.auth-otp-wrapper input:focus {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
+}
+
+.auth-otp-wrapper input:disabled {
+  opacity: 0.5;
+}
+
+/* ===== QR CODE ===== */
+
+.auth-qr-container {
+  display: flex;
+  justify-content: center;
+  padding: 1rem 0;
+}
+
+.auth-qr {
+  padding: 1rem;
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 8px hsl(0 0% 0% / 0.08);
+}
+
+/* ===== SECRET CODE ===== */
+
+.auth-secret-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+
+.auth-secret {
+  padding: 0.5rem 1rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  letter-spacing: 0.05em;
+  background: hsl(var(--muted));
+  border-radius: 0.375rem;
+  color: hsl(var(--foreground));
+  word-break: break-all;
+  text-align: center;
+}
+
+/* ===== BACKUP CODES ===== */
+
+.auth-backup-codes {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+  padding: 1rem;
+  background: hsl(var(--muted) / 0.5);
+  border: 1px dashed hsl(var(--border));
+  border-radius: 0.5rem;
+}
+
+.auth-backup-code {
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  text-align: center;
+  padding: 0.5rem;
+  color: hsl(var(--foreground));
+}
+
+/* ===== SUCCESS OVERLAY ===== */
+
+.auth-success-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--background));
+  z-index: 50;
+  animation: authFadeIn 0.3s ease-out;
+}
+
+.auth-success-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.auth-success-logo {
+  width: 80px;
+  height: 80px;
+  object-fit: contain;
+  animation: authSuccessIn 0.5s var(--spring-bounce);
+}
+
+.auth-success-check {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(142 76% 36% / 0.1);
+  border-radius: 50%;
+  color: hsl(142 76% 36%);
+  animation: authSuccessIn 0.5s var(--spring-bounce);
+}
+
+@keyframes authSuccessIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.auth-success-check svg {
+  width: 40px;
+  height: 40px;
+}
+
+.auth-success-text {
+  font-size: 0.9375rem;
+  color: hsl(var(--muted-foreground));
+}
+
+/* ===== DEV NOTICE ===== */
+
+.auth-dev-notice {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  text-align: center;
+  color: hsl(38 92% 40%);
+  background: hsl(38 92% 95%);
+  border-radius: 0.375rem;
+  border: 1px solid hsl(38 92% 80%);
+}
+
+.dark .auth-dev-notice {
+  color: hsl(38 92% 65%);
+  background: hsl(38 92% 15%);
+  border-color: hsl(38 92% 30%);
+}
+
+/* ===== INSTRUCTION ===== */
+
+.auth-instruction {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+  margin: 0;
+}
+
+/* ===== RESPONSIVE ===== */
+
+@media (max-width: 480px) {
+  .auth-layout {
+    padding: 1rem;
+  }
+
+  .auth-container {
+    padding: 1.5rem;
+    gap: 1.5rem;
+  }
+
+  .auth-title {
+    font-size: 1.25rem;
+  }
+
+  .auth-otp-wrapper input {
+    width: 2.75rem;
+    height: 3rem;
+    font-size: 1rem;
+  }
+}
+
+/* ===== REDUCED MOTION ===== */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}