Repository navigation
Expand file tree
/
Copy pathstyles.css
More file actions
44 lines (44 loc) · 2.76 KB
/
Copy pathstyles.css
File metadata and controls
44 lines (44 loc) · 2.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
:root {
color-scheme: light;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #292d29;
background: #f6f4ee;
line-height: 1.55;
font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 3rem, 72rem); margin: 0 auto; padding: 3rem 0 2rem; }
header { margin-bottom: 2rem; }
.brand { margin: 0 0 1.6rem; font-weight: 750; letter-spacing: -.025em; font-size: 1.2rem; }
.brand span { margin-left: .6rem; font-size: .75rem; font-weight: 500; letter-spacing: .04em; color: #62675e; }
h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.13; letter-spacing: -.045em; font-weight: 650; }
.intro { margin: 1rem 0 0; color: #5a6057; }
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.field { min-width: 0; }
.field label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; margin-bottom: .6rem; font-weight: 650; }
.field label span { color: #62675e; font-size: .75rem; font-weight: 400; }
textarea { display: block; width: 100%; min-width: 0; height: 19rem; padding: 1.1rem; border: 1px solid #b5b9ae; border-radius: .5rem; background: #fffefa; color: inherit; font: inherit; line-height: 1.65; resize: vertical; overflow-wrap: anywhere; white-space: pre-wrap; }
textarea[readonly] { background: #edf1e9; border-color: #b1bda9; }
textarea::placeholder { color: #73786e; opacity: 1; }
.options { margin: 1.5rem 0; }
.checkbox-label { display: flex; align-items: flex-start; gap: .65rem; width: fit-content; cursor: pointer; font-weight: 550; }
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin: .2rem 0 0; accent-color: #405f3f; }
.options p { margin: .4rem 0 0 1.8rem; color: #5a6057; font-size: .85rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
button { border: 1px solid #405f3f; border-radius: .4rem; padding: .7rem 1.2rem; background: #405f3f; color: #fff; font: inherit; font-weight: 600; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
button:hover:not(:disabled) { background: #304b30; }
button.secondary { background: transparent; color: #354630; border-color: #afb6a8; }
button.secondary:hover { background: #e8eade; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid #875720; outline-offset: 4px; }
#status { min-height: 1.55em; margin: .65rem 0 1.5rem; color: #354630; }
footer { border-top: 1px solid #d7d9cf; padding-top: 1rem; color: #5a6057; font-size: .85rem; }
footer p { margin: .25rem 0; }
.scope { margin-top: .8rem; }
p, h1, label { overflow-wrap: anywhere; }
@media (max-width: 42rem) {
main { width: calc(100% - 2rem); padding-top: 1.5rem; }
.workbench { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
textarea { height: 13rem; }
}