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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
.controls {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 20px;
padding: 20px;
border: 1px solid var(--border);
border-radius: 12px;
margin-bottom: 24px;
}
.form.form {
display: block;
}
.fields {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.section,
.result {
display: grid;
gap: 24px;
min-width: 0;
padding: 24px;
margin-bottom: 24px;
border: 1px solid var(--border);
border-radius: 12px;
}
.section h2,
.result h2 {
font-size: 20px;
margin: 0;
}
.section p,
.result p {
font-size: 14px;
line-height: 1.6;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
align-items: start;
gap: 28px;
min-width: 0;
}
.field {
display: grid;
grid-template-columns: [field] minmax(0, 1fr);
align-content: start;
min-width: 0;
}
.grid .field > * {
grid-column: 1 / -1;
min-width: 0;
}
.sideLabels .grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
}
.sideLabels .field {
grid-template-columns: [label] minmax(0, 10rem) [field] minmax(0, 1fr);
column-gap: 16px;
}
.layoutHint {
margin-bottom: 20px;
font-size: 14px;
}
.fields:disabled {
opacity: 0.6;
}
.stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
min-width: 0;
font-size: 14px;
}
.calendars {
display: flex;
flex-wrap: wrap;
gap: 32px;
min-width: 0;
overflow-x: auto;
}
.dropContent {
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.output,
.result pre {
margin: 0;
padding: 16px;
border-radius: 8px;
background: var(--social-bg);
font-family: monospace;
font-size: 13px;
overflow: auto;
}
.srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (max-width: 640px) {
.section,
.result {
padding: 16px;
}
}
|
