PostText/assets/css/simple.css

140 lines
2.9 KiB
CSS
Raw Normal View History

2023-05-26 23:48:50 -04:00
.click {
color: black;
text-decoration: none;
border: outset var(--light-blue) 0.18rem;
2023-05-26 23:48:50 -04:00
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;
2023-05-26 23:48:50 -04:00
background-color: var(--dark-blue);
}
.site-header {
display: flex;
flex-flow: column;
gap: 1em;
}
2023-06-07 13:11:17 -04:00
.site-title {
text-align: center;
border: outset var(--light-warm-gray) 0.18rem;
2023-06-07 13:11:17 -04:00
background-color: var(--light-warm-gray);
padding: 0.5em 0;
margin-bottom: 0.15em;
overflow-wrap: anywhere;
2023-05-26 23:48:50 -04:00
}
.site-nav {
display: flex;
flex-flow: row wrap;
gap: 0.25em;
border: outset var(--light-warm-gray) 0.18rem;
2023-05-26 23:48:50 -04:00
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;
2023-05-26 23:48:50 -04:00
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;
2023-05-26 23:48:50 -04:00
padding: 0.5em 0;
2023-06-07 01:24:34 -04:00
margin: 0.85em 0;
2023-05-26 23:48:50 -04:00
background-color: var(--dark-warm-gray);
}
.page-body {
background-color: var(--light-warm-gray);
border: outset var(--light-warm-gray) 0.18rem;
2023-05-26 23:48:50 -04:00
padding: 0.5em 1em;
}
2023-08-13 20:39:36 -04:00
.form-preview {
background-color: var(--dark-warm-gray);
border: inset var(--dark-warm-gray) 0.18rem;
padding: 0.25em 0.5em;
2023-08-24 20:37:49 -04:00
overflow-wrap: anywhere;
2023-08-13 20:39:36 -04:00
}
2023-05-26 23:48:50 -04:00
.form-body {
background-color: var(--light-warm-gray);
border: outset var(--light-warm-gray) 0.18rem;
2023-05-26 23:48:50 -04:00
padding: 0.5em 1em;
display: flex;
flex-flow: column;
gap: 1em;
}
.form-field {
display: flex;
flex-flow: column;
gap: 0.25em;
2023-05-26 23:48:50 -04:00
}
.form-field > input { border: inset var(--dark-warm-gray) 0.18rem; }
2023-06-05 00:08:04 -04:00
2023-05-26 23:48:50 -04:00
.form-field > textarea {
border: inset var(--dark-warm-gray) 0.18rem;
2023-05-26 23:48:50 -04:00
overflow: scroll;
resize: vertical;
}
2023-06-04 19:42:53 -04:00
.form-checkbox {
display: flex;
flex-flow: row;
gap: 1em;
align-items: center;
}
2023-06-05 00:08:04 -04:00
.form-checkbox > input { outline: inset var(--dark-warm-gray); }
2023-05-26 23:48:50 -04:00
.form-button {
border: outset var(--light-blue) 0.18rem;
2023-05-26 23:48:50 -04:00
background-color: var(--light-blue);
padding: 0.5em 1.5em;
text-align: left;
2023-06-03 23:42:16 -04:00
color: black;
2023-06-05 01:16:45 -04:00
width: 33%;
2023-05-26 23:48:50 -04:00
}
.form-button::first-letter { text-decoration: underline; }
.form-button:active {
border: inset var(--dark-blue) 0.18rem;
2023-05-26 23:48:50 -04:00
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;
2023-06-04 00:25:41 -04:00
background-clip: padding-box;
2023-05-26 23:48:50 -04:00
padding: 1em;
background-color: var(--transparent);
}
.stash-with-error {
border: dashed var(--highlight-red) 0.5rem;
2023-06-04 00:25:41 -04:00
background-clip: padding-box;
2023-05-26 23:48:50 -04:00
padding: 1em;
background-color: var(--transparent);
}