Add styles to non-admin forms, as well
This commit is contained in:
parent
837d6ded02
commit
423d96bb06
@ -21,113 +21,6 @@ body:not(*:has(.jdd-container)) .form-container {
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
--column-count: 2;
|
||||
|
||||
@container (max-width: 900px) {
|
||||
grid-template-columns: 1fr;
|
||||
--column-count: 1;
|
||||
}
|
||||
|
||||
grid-auto-flow: dense;
|
||||
gap: 8px;
|
||||
max-width: 1224px;
|
||||
margin: 0 auto;
|
||||
|
||||
.form-messages {
|
||||
grid-column: span var(--column-count);
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 8px;
|
||||
|
||||
.form-message {
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
& > .form-input__wrapper {
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--color-brand-accent) 20%,
|
||||
transparent
|
||||
);
|
||||
border: 1px solid var(--color-brand-accent);
|
||||
}
|
||||
|
||||
& > h2 {
|
||||
grid-column: span var(--column-count);
|
||||
font-family: var(--font-sans-serif);
|
||||
color: var(--color-brand-text-fg);
|
||||
font-size: 36px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: var(--color-brand-accent);
|
||||
color: white;
|
||||
grid-column: span var(--column-count);
|
||||
border-radius: 10px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.form-input--type-checkbox {
|
||||
grid-row: span 1;
|
||||
}
|
||||
|
||||
.form-input__wrapper--control-type__image {
|
||||
grid-row: span 2;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-input__wrapper--text,
|
||||
.form-input__wrapper--type__date,
|
||||
.form-input__wrapper--type__datetime-local,
|
||||
.form-input__wrapper--type__number,
|
||||
.form-input__wrapper--enum,
|
||||
.form-input--type-simple-input,
|
||||
.form-input__wrapper--type__password {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
input,
|
||||
select {
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--color-brand-accent) 50%,
|
||||
transparent
|
||||
);
|
||||
box-sizing: border-box;
|
||||
height: 50px;
|
||||
padding: 8px;
|
||||
flex-grow: 1;
|
||||
background-color: hsl(13.8, 40%, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.form-input__wrapper--file:not(.form-input__wrapper--control-type__photo) {
|
||||
grid-row: span 2;
|
||||
display: grid;
|
||||
|
||||
@ -115,7 +115,106 @@
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
.form-container .form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
--column-count: 2;
|
||||
|
||||
@container (max-width: 900px) {
|
||||
grid-template-columns: 1fr;
|
||||
--column-count: 1;
|
||||
}
|
||||
|
||||
grid-auto-flow: dense;
|
||||
gap: 8px;
|
||||
max-width: 1224px;
|
||||
margin: 0 auto;
|
||||
|
||||
.form-messages {
|
||||
grid-column: span var(--column-count);
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 8px;
|
||||
|
||||
.form-message {
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
& > .form-input__wrapper {
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
background-color: color-mix(in srgb, var(--color-brand-accent) 20%, transparent);
|
||||
border: 1px solid var(--color-brand-accent);
|
||||
}
|
||||
|
||||
& > h2 {
|
||||
grid-column: span var(--column-count);
|
||||
font-family: var(--font-sans-serif);
|
||||
color: var(--color-brand-text-fg);
|
||||
font-size: 36px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: var(--color-brand-accent);
|
||||
color: white;
|
||||
grid-column: span var(--column-count);
|
||||
border-radius: 10px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.form-input--type-checkbox {
|
||||
grid-row: span 1;
|
||||
}
|
||||
|
||||
.form-input__wrapper--control-type__image {
|
||||
grid-row: span 2;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-input__wrapper--text,
|
||||
.form-input__wrapper--type__date,
|
||||
.form-input__wrapper--type__datetime-local,
|
||||
.form-input__wrapper--type__number,
|
||||
.form-input__wrapper--enum,
|
||||
.form-input--type-simple-input,
|
||||
.form-input__wrapper--type__password {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
input,
|
||||
select {
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: color-mix(in srgb, var(--color-brand-accent) 50%, transparent);
|
||||
box-sizing: border-box;
|
||||
height: 50px;
|
||||
padding: 8px;
|
||||
flex-grow: 1;
|
||||
background-color: var(--color-brand-canvas);
|
||||
}
|
||||
}
|
||||
|
||||
.file_preview__icon {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
||||
@ -22,6 +22,7 @@ export default new (class LoginForm extends Form<typeof fields, void> {
|
||||
fields = fields;
|
||||
|
||||
controls = [
|
||||
new Controls.FormHeader(`Log in`),
|
||||
new Controls.SimpleInput(fields.username, {
|
||||
label: "Username:",
|
||||
type: "text",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user