91 lines
1.9 KiB
CSS
91 lines
1.9 KiB
CSS
.form {
|
|
display: grid;
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.label {
|
|
margin-bottom: var(--space-2);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
/* The native file picker is needed alive, but not shown: its look is the system's and does not fit
|
|
into the shell, so it is our button that presses it. */
|
|
.hidden {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
width: 1px;
|
|
height: 1px;
|
|
clip-path: inset(50%);
|
|
}
|
|
|
|
/* The pair of languages stands in one row: it is one decision — out of what, into what — and split
|
|
into two rows it reads as two unrelated fields. */
|
|
.pair {
|
|
display: grid;
|
|
gap: var(--space-4);
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
/* The live region is a container and nothing more: it takes no space of its own until there is
|
|
something in it, so an empty one leaves no gap in the form. */
|
|
.live:empty {
|
|
display: none;
|
|
}
|
|
|
|
.sending,
|
|
.failed,
|
|
.accepted {
|
|
display: grid;
|
|
gap: var(--space-4);
|
|
border-top: 1px solid var(--color-border);
|
|
padding-top: var(--space-5);
|
|
}
|
|
|
|
.accepted {
|
|
border-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.acceptedTitle {
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
font-size: var(--font-size-ui);
|
|
font-weight: inherit;
|
|
}
|
|
|
|
/* A refusal is a state of the form and not an alarm (§3.8): the phrase stands in the ordinary text
|
|
colour, and the tone of the state is carried by the book's own glyph in the tree — there is no
|
|
red panel here and no exclamation mark. */
|
|
.failedTitle {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.slot {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
.fields {
|
|
display: grid;
|
|
margin: 0;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.field {
|
|
display: grid;
|
|
gap: var(--space-4);
|
|
grid-template-columns: 1fr 2fr;
|
|
}
|
|
|
|
.fieldName {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
.fieldValue {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
text-overflow: ellipsis;
|
|
}
|