106 lines
2.7 KiB
TypeScript
106 lines
2.7 KiB
TypeScript
import { CSSProperties } from "react";
|
|
|
|
export const authFormStyles: Record<string, CSSProperties> = {
|
|
main: {
|
|
minHeight: "100vh",
|
|
background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b4e 100%)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: "1rem",
|
|
},
|
|
container: {
|
|
width: "100%",
|
|
maxWidth: "420px",
|
|
},
|
|
card: {
|
|
background: "rgba(255, 255, 255, 0.03)",
|
|
backdropFilter: "blur(10px)",
|
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
|
borderRadius: "24px",
|
|
padding: "3rem 2.5rem",
|
|
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
|
|
},
|
|
header: {
|
|
textAlign: "center" as const,
|
|
marginBottom: "2.5rem",
|
|
},
|
|
title: {
|
|
fontFamily: "'Instrument Serif', Georgia, serif",
|
|
fontSize: "2.5rem",
|
|
fontWeight: 400,
|
|
color: "#fff",
|
|
margin: 0,
|
|
letterSpacing: "-0.02em",
|
|
},
|
|
subtitle: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
color: "rgba(255, 255, 255, 0.5)",
|
|
marginTop: "0.5rem",
|
|
fontSize: "0.95rem",
|
|
},
|
|
form: {
|
|
display: "flex",
|
|
flexDirection: "column" as const,
|
|
gap: "1.5rem",
|
|
},
|
|
field: {
|
|
display: "flex",
|
|
flexDirection: "column" as const,
|
|
gap: "0.5rem",
|
|
},
|
|
label: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
color: "rgba(255, 255, 255, 0.7)",
|
|
fontSize: "0.875rem",
|
|
fontWeight: 500,
|
|
},
|
|
input: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
padding: "0.875rem 1rem",
|
|
fontSize: "1rem",
|
|
background: "rgba(255, 255, 255, 0.05)",
|
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
borderRadius: "12px",
|
|
color: "#fff",
|
|
outline: "none",
|
|
transition: "border-color 0.2s, box-shadow 0.2s",
|
|
},
|
|
button: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
marginTop: "0.5rem",
|
|
padding: "1rem",
|
|
fontSize: "1rem",
|
|
fontWeight: 600,
|
|
background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
|
|
color: "#fff",
|
|
border: "none",
|
|
borderRadius: "12px",
|
|
cursor: "pointer",
|
|
transition: "transform 0.2s, box-shadow 0.2s",
|
|
boxShadow: "0 4px 14px rgba(99, 102, 241, 0.4)",
|
|
},
|
|
error: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
padding: "0.875rem 1rem",
|
|
background: "rgba(239, 68, 68, 0.1)",
|
|
border: "1px solid rgba(239, 68, 68, 0.3)",
|
|
borderRadius: "12px",
|
|
color: "#fca5a5",
|
|
fontSize: "0.875rem",
|
|
textAlign: "center" as const,
|
|
},
|
|
footer: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
textAlign: "center" as const,
|
|
marginTop: "2rem",
|
|
color: "rgba(255, 255, 255, 0.5)",
|
|
fontSize: "0.875rem",
|
|
},
|
|
link: {
|
|
color: "#a78bfa",
|
|
textDecoration: "none",
|
|
fontWeight: 500,
|
|
},
|
|
};
|
|
|