139 lines
2.8 KiB
CSS
139 lines
2.8 KiB
CSS
.click {
|
|
color: black;
|
|
text-decoration: none;
|
|
border: outset var(--light-blue) 0.18rem;
|
|
background-color: var(--light-blue);
|
|
white-space: nowrap; /* Prevent the button from going multi-line */
|
|
}
|
|
|
|
.click::first-letter { text-decoration: underline; }
|
|
|
|
.click:active {
|
|
border: inset var(--dark-blue) 0.18rem;
|
|
background-color: var(--dark-blue);
|
|
}
|
|
|
|
.site-header {
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 1em;
|
|
}
|
|
|
|
.site-title {
|
|
text-align: center;
|
|
border: outset var(--light-warm-gray) 0.18rem;
|
|
background-color: var(--light-warm-gray);
|
|
padding: 0.5em 0;
|
|
margin-bottom: 0.15em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.site-nav {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
gap: 0.25em;
|
|
border: outset var(--light-warm-gray) 0.18rem;
|
|
padding: 0.5em 0.25em;
|
|
background-color: var(--light-warm-gray);
|
|
}
|
|
|
|
.site-nav > .click {
|
|
flex: 1;
|
|
padding: 0 0.5em 0 0.5em;
|
|
}
|
|
|
|
.site-footer {
|
|
text-align: center;
|
|
border: outset var(--light-warm-gray) 0.18rem;
|
|
background-color: var(--light-warm-gray);
|
|
padding: 0;
|
|
margin: 1.25em 0;
|
|
}
|
|
|
|
.page-title {
|
|
text-align: center;
|
|
border: inset var(--dark-warm-gray) 0.18rem;
|
|
padding: 0.5em 0;
|
|
margin: 0.85em 0;
|
|
background-color: var(--dark-warm-gray);
|
|
}
|
|
|
|
.page-body {
|
|
background-color: var(--light-warm-gray);
|
|
border: outset var(--light-warm-gray) 0.18rem;
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
.form-preview {
|
|
background-color: var(--dark-warm-gray);
|
|
border: inset var(--dark-warm-gray) 0.18rem;
|
|
padding: 0.25em 0.5em;
|
|
}
|
|
|
|
.form-body {
|
|
background-color: var(--light-warm-gray);
|
|
border: outset var(--light-warm-gray) 0.18rem;
|
|
padding: 0.5em 1em;
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 1em;
|
|
}
|
|
|
|
.form-field {
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.form-field > input { border: inset var(--dark-warm-gray) 0.18rem; }
|
|
|
|
.form-field > textarea {
|
|
border: inset var(--dark-warm-gray) 0.18rem;
|
|
overflow: scroll;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-checkbox {
|
|
display: flex;
|
|
flex-flow: row;
|
|
gap: 1em;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-checkbox > input { outline: inset var(--dark-warm-gray); }
|
|
|
|
.form-button {
|
|
border: outset var(--light-blue) 0.18rem;
|
|
background-color: var(--light-blue);
|
|
padding: 0.5em 1.5em;
|
|
text-align: left;
|
|
color: black;
|
|
width: 33%;
|
|
}
|
|
|
|
.form-button::first-letter { text-decoration: underline; }
|
|
|
|
.form-button:active {
|
|
border: inset var(--dark-blue) 0.18rem;
|
|
background-color: var(--dark-blue);
|
|
}
|
|
|
|
.field-with-error {
|
|
border: dashed var(--highlight-red);
|
|
padding: 0.5em 0.25em;
|
|
}
|
|
|
|
.stash-with-info {
|
|
border: dashed var(--highlight-green) 0.5rem;
|
|
background-clip: padding-box;
|
|
padding: 1em;
|
|
background-color: var(--transparent);
|
|
}
|
|
|
|
.stash-with-error {
|
|
border: dashed var(--highlight-red) 0.5rem;
|
|
background-clip: padding-box;
|
|
padding: 1em;
|
|
background-color: var(--transparent);
|
|
}
|