/* The app's stylesheet. The colours, fonts and radii are the component
library's, from public/ui/tokens.css: change them there. These rules
give plain HTML (the generated sign-in pages use bare elements) the
same look. */
body {
max-width: 42rem;
margin: 4rem auto;
padding: 0 1rem;
}
h1 {
margin: 0 0 1rem;
font-size: 30px;
line-height: 36px;
font-weight: 800;
letter-spacing: -0.025em;
}
h2 {
margin: 2rem 0 0.75rem;
font-size: 20px;
line-height: 28px;
font-weight: 600;
letter-spacing: -0.025em;
}
a {
color: var(--primary);
text-underline-offset: 4px;
}
label {
font-weight: 500;
}
input:not([type="checkbox"], [type="radio"], [type="hidden"]):not([class]),
textarea:not([class]),
select:not([class]) {
display: block;
box-sizing: border-box;
width: 100%;
height: 36px;
margin-top: 4px;
padding: 0 12px;
border: 1px solid var(--input);
border-radius: var(--radius-md);
background: transparent;
color: var(--foreground);
font: inherit;
}
button:not([class]) {
height: 36px;
padding: 0 16px;
border: 0;
border-radius: var(--radius-md);
background: var(--primary);
color: var(--primary-foreground);
font: inherit;
font-weight: 500;
cursor: pointer;
}
code {
padding: 0 4px;
border-radius: var(--radius-sm);
background: var(--muted);
font-family: var(--font-mono);
}
.error {
display: block;
margin-top: 4px;
color: var(--destructive);
}