pi-interview 0.4.5 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +91 -10
- package/form/index.html +6 -3
- package/form/script.js +311 -32
- package/form/styles.css +318 -57
- package/form/themes/default-dark.css +7 -1
- package/form/themes/default-light.css +7 -0
- package/form/themes/tufte-dark.css +10 -4
- package/form/themes/tufte-light.css +10 -4
- package/index.ts +118 -12
- package/package.json +7 -1
- package/schema.ts +108 -5
- package/server.ts +238 -12
package/form/styles.css
CHANGED
|
@@ -21,10 +21,31 @@
|
|
|
21
21
|
--error-bg: rgba(204, 102, 102, 0.12);
|
|
22
22
|
--focus-ring: rgba(95, 135, 255, 0.2);
|
|
23
23
|
--overlay-bg: rgba(24, 24, 30, 0.95);
|
|
24
|
-
--font-
|
|
25
|
-
--font-body:
|
|
26
|
-
--font-
|
|
27
|
-
|
|
24
|
+
--font-display: 'Outfit', system-ui, sans-serif;
|
|
25
|
+
--font-body: 'Outfit', system-ui, sans-serif;
|
|
26
|
+
--font-mono: 'Space Mono', 'SF Mono', Consolas, monospace;
|
|
27
|
+
|
|
28
|
+
--font-size-title: 28px;
|
|
29
|
+
--font-size-subtitle: 14px;
|
|
30
|
+
--font-size-question: 17px;
|
|
31
|
+
--font-size-context: 13px;
|
|
32
|
+
--font-size-option: 14px;
|
|
33
|
+
--font-size-label: 11px;
|
|
34
|
+
--font-size-code: 12px;
|
|
35
|
+
|
|
36
|
+
--card-gap: 28px;
|
|
37
|
+
--card-padding: 24px;
|
|
38
|
+
--card-radius: 12px;
|
|
39
|
+
--option-gap: 10px;
|
|
40
|
+
--option-padding: 12px 14px;
|
|
41
|
+
|
|
42
|
+
--q-color-1: var(--accent);
|
|
43
|
+
--q-color-2: #34d399;
|
|
44
|
+
--q-color-3: #fbbf24;
|
|
45
|
+
--q-color-4: #f472b6;
|
|
46
|
+
--q-color-5: #22d3ee;
|
|
47
|
+
--q-color-6: #a78bfa;
|
|
48
|
+
|
|
28
49
|
--radius: 4px;
|
|
29
50
|
--spacing: 16px;
|
|
30
51
|
}
|
|
@@ -39,23 +60,36 @@
|
|
|
39
60
|
|
|
40
61
|
body {
|
|
41
62
|
margin: 0;
|
|
42
|
-
padding:
|
|
43
|
-
padding-bottom: 80px;
|
|
63
|
+
padding: 48px 24px 80px;
|
|
44
64
|
min-height: 100vh;
|
|
45
65
|
background: var(--bg-body);
|
|
66
|
+
background-image: radial-gradient(ellipse at 50% 0%, var(--accent-muted) 0%, transparent 50%);
|
|
46
67
|
color: var(--fg);
|
|
47
68
|
font-family: var(--font-body);
|
|
48
|
-
font-size:
|
|
69
|
+
font-size: 14px;
|
|
49
70
|
line-height: 1.5;
|
|
50
71
|
}
|
|
51
72
|
|
|
73
|
+
@keyframes fadeUp {
|
|
74
|
+
from { opacity: 0; transform: translateY(12px); }
|
|
75
|
+
to { opacity: 1; transform: translateY(0); }
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@media (prefers-reduced-motion: reduce) {
|
|
79
|
+
*, *::before, *::after {
|
|
80
|
+
animation-duration: 0.01ms !important;
|
|
81
|
+
animation-delay: 0ms !important;
|
|
82
|
+
transition-duration: 0.01ms !important;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
52
86
|
.interview-container {
|
|
53
|
-
max-width:
|
|
87
|
+
max-width: 740px;
|
|
54
88
|
margin: 0 auto;
|
|
55
89
|
background: var(--bg-card);
|
|
56
90
|
border: 1px solid var(--border-muted);
|
|
57
|
-
border-radius: var(--radius);
|
|
58
|
-
padding: var(--
|
|
91
|
+
border-radius: var(--card-radius);
|
|
92
|
+
padding: var(--card-padding);
|
|
59
93
|
position: relative;
|
|
60
94
|
overflow: hidden;
|
|
61
95
|
}
|
|
@@ -65,7 +99,7 @@ body {
|
|
|
65
99
|
justify-content: space-between;
|
|
66
100
|
align-items: center;
|
|
67
101
|
padding: 6px 10px;
|
|
68
|
-
margin: -
|
|
102
|
+
margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) var(--spacing) calc(-1 * var(--card-padding));
|
|
69
103
|
background: var(--bg-body);
|
|
70
104
|
border-bottom: 1px solid var(--border-muted);
|
|
71
105
|
font-size: 11px;
|
|
@@ -83,10 +117,12 @@ body {
|
|
|
83
117
|
}
|
|
84
118
|
|
|
85
119
|
.interview-header h1 {
|
|
120
|
+
font-family: var(--font-display);
|
|
121
|
+
font-size: var(--font-size-title);
|
|
122
|
+
font-weight: 700;
|
|
123
|
+
letter-spacing: -0.5px;
|
|
124
|
+
text-transform: none;
|
|
86
125
|
margin: 0 0 4px;
|
|
87
|
-
font-size: 20px;
|
|
88
|
-
text-transform: uppercase;
|
|
89
|
-
letter-spacing: 0.06em;
|
|
90
126
|
}
|
|
91
127
|
|
|
92
128
|
.header-row {
|
|
@@ -97,32 +133,38 @@ body {
|
|
|
97
133
|
}
|
|
98
134
|
|
|
99
135
|
.interview-header p {
|
|
100
|
-
|
|
136
|
+
font-family: var(--font-mono);
|
|
137
|
+
font-size: var(--font-size-subtitle);
|
|
101
138
|
color: var(--fg-muted);
|
|
139
|
+
margin: 0 0 32px;
|
|
102
140
|
}
|
|
103
141
|
|
|
104
142
|
#questions-container {
|
|
105
143
|
display: flex;
|
|
106
144
|
flex-direction: column;
|
|
107
|
-
gap:
|
|
145
|
+
gap: var(--card-gap);
|
|
108
146
|
min-width: 0;
|
|
109
147
|
}
|
|
110
148
|
|
|
111
149
|
.question-card {
|
|
112
150
|
position: relative;
|
|
113
|
-
padding:
|
|
151
|
+
padding: var(--card-padding);
|
|
114
152
|
border: 1px solid var(--border-muted);
|
|
115
|
-
border-
|
|
153
|
+
border-left: 3px solid var(--card-accent, var(--accent));
|
|
154
|
+
border-radius: var(--card-radius);
|
|
116
155
|
background: var(--bg-elevated);
|
|
117
|
-
|
|
156
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
157
|
+
transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
|
|
118
158
|
outline: none;
|
|
119
159
|
min-width: 0;
|
|
120
160
|
overflow: hidden;
|
|
161
|
+
animation: fadeUp 0.35s ease-out backwards;
|
|
162
|
+
animation-delay: calc(var(--i, 0) * 0.06s);
|
|
121
163
|
}
|
|
122
164
|
|
|
123
165
|
.question-card.active {
|
|
124
|
-
|
|
125
|
-
|
|
166
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
|
167
|
+
transform: translateY(-1px);
|
|
126
168
|
}
|
|
127
169
|
|
|
128
170
|
.question-card.dragover {
|
|
@@ -130,9 +172,34 @@ body {
|
|
|
130
172
|
background: var(--bg-hover);
|
|
131
173
|
}
|
|
132
174
|
|
|
175
|
+
.question-header {
|
|
176
|
+
display: flex;
|
|
177
|
+
align-items: center;
|
|
178
|
+
gap: 12px;
|
|
179
|
+
margin-bottom: 12px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.question-badge {
|
|
183
|
+
display: flex;
|
|
184
|
+
align-items: center;
|
|
185
|
+
justify-content: center;
|
|
186
|
+
width: 28px;
|
|
187
|
+
height: 28px;
|
|
188
|
+
border-radius: 8px;
|
|
189
|
+
background: color-mix(in srgb, var(--card-accent, var(--accent)) 15%, transparent);
|
|
190
|
+
color: var(--card-accent, var(--accent));
|
|
191
|
+
font-family: var(--font-mono);
|
|
192
|
+
font-size: 12px;
|
|
193
|
+
font-weight: 600;
|
|
194
|
+
flex-shrink: 0;
|
|
195
|
+
}
|
|
196
|
+
|
|
133
197
|
.question-title {
|
|
198
|
+
font-family: var(--font-body);
|
|
199
|
+
font-size: var(--font-size-question);
|
|
134
200
|
font-weight: 600;
|
|
135
|
-
margin: 0
|
|
201
|
+
margin: 0;
|
|
202
|
+
line-height: 1.4;
|
|
136
203
|
}
|
|
137
204
|
|
|
138
205
|
.question-title code,
|
|
@@ -144,14 +211,16 @@ body {
|
|
|
144
211
|
}
|
|
145
212
|
|
|
146
213
|
.question-context {
|
|
147
|
-
|
|
214
|
+
font-family: var(--font-body);
|
|
215
|
+
font-size: var(--font-size-context);
|
|
148
216
|
color: var(--fg-muted);
|
|
149
|
-
|
|
217
|
+
line-height: 1.6;
|
|
218
|
+
margin: 0 0 16px;
|
|
150
219
|
}
|
|
151
220
|
|
|
152
221
|
.option-list {
|
|
153
222
|
display: grid;
|
|
154
|
-
gap:
|
|
223
|
+
gap: var(--option-gap);
|
|
155
224
|
min-width: 0;
|
|
156
225
|
}
|
|
157
226
|
|
|
@@ -159,21 +228,25 @@ body {
|
|
|
159
228
|
display: flex;
|
|
160
229
|
align-items: flex-start;
|
|
161
230
|
gap: 10px;
|
|
162
|
-
padding:
|
|
163
|
-
border-radius:
|
|
231
|
+
padding: var(--option-padding);
|
|
232
|
+
border-radius: 8px;
|
|
164
233
|
background: var(--bg-elevated);
|
|
165
|
-
border: 1px solid
|
|
234
|
+
border: 1px solid var(--border-muted);
|
|
166
235
|
cursor: pointer;
|
|
167
|
-
|
|
236
|
+
font-family: var(--font-body);
|
|
237
|
+
font-size: var(--font-size-option);
|
|
238
|
+
transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
|
|
168
239
|
min-width: 0;
|
|
169
240
|
}
|
|
170
241
|
|
|
171
242
|
.option-item:hover {
|
|
172
|
-
|
|
243
|
+
border-color: var(--border-focus);
|
|
244
|
+
background: var(--bg-hover);
|
|
173
245
|
}
|
|
174
246
|
|
|
175
247
|
.option-item.focused {
|
|
176
|
-
|
|
248
|
+
border-color: var(--card-accent, var(--accent));
|
|
249
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--card-accent, var(--accent)) 20%, transparent);
|
|
177
250
|
}
|
|
178
251
|
|
|
179
252
|
.option-other {
|
|
@@ -186,7 +259,7 @@ body {
|
|
|
186
259
|
border: none;
|
|
187
260
|
outline: none;
|
|
188
261
|
color: var(--fg);
|
|
189
|
-
font-family: var(--font-
|
|
262
|
+
font-family: var(--font-body);
|
|
190
263
|
font-size: inherit;
|
|
191
264
|
padding: 2px 0;
|
|
192
265
|
resize: none;
|
|
@@ -236,10 +309,19 @@ body {
|
|
|
236
309
|
font-size: 11px;
|
|
237
310
|
}
|
|
238
311
|
|
|
239
|
-
.recommended-
|
|
240
|
-
|
|
241
|
-
|
|
312
|
+
.recommended-pill {
|
|
313
|
+
display: inline-flex;
|
|
314
|
+
align-items: center;
|
|
315
|
+
padding: 1px 8px;
|
|
316
|
+
margin-left: 8px;
|
|
317
|
+
border-radius: 10px;
|
|
318
|
+
font-family: var(--font-mono);
|
|
319
|
+
font-size: 9px;
|
|
242
320
|
font-weight: 600;
|
|
321
|
+
text-transform: uppercase;
|
|
322
|
+
letter-spacing: 0.05em;
|
|
323
|
+
background: color-mix(in srgb, var(--accent) 15%, transparent);
|
|
324
|
+
color: var(--accent);
|
|
243
325
|
}
|
|
244
326
|
|
|
245
327
|
input[type="radio"],
|
|
@@ -310,7 +392,7 @@ textarea {
|
|
|
310
392
|
border: 1px solid var(--border-muted);
|
|
311
393
|
background: var(--bg-body);
|
|
312
394
|
color: var(--fg);
|
|
313
|
-
font-family: var(--font-
|
|
395
|
+
font-family: var(--font-body);
|
|
314
396
|
resize: vertical;
|
|
315
397
|
}
|
|
316
398
|
|
|
@@ -364,7 +446,7 @@ textarea {
|
|
|
364
446
|
width: 100%;
|
|
365
447
|
padding: 8px 10px;
|
|
366
448
|
margin-top: 8px;
|
|
367
|
-
font-family: var(--font-
|
|
449
|
+
font-family: var(--font-mono);
|
|
368
450
|
font-size: 12px;
|
|
369
451
|
color: var(--fg);
|
|
370
452
|
background: var(--bg-elevated);
|
|
@@ -554,8 +636,9 @@ textarea {
|
|
|
554
636
|
display: flex;
|
|
555
637
|
align-items: center;
|
|
556
638
|
justify-content: center;
|
|
557
|
-
gap:
|
|
558
|
-
padding: 14px
|
|
639
|
+
gap: 24px;
|
|
640
|
+
padding: 14px 24px;
|
|
641
|
+
font-family: var(--font-body);
|
|
559
642
|
background: var(--bg-card);
|
|
560
643
|
border-top: 1px solid var(--border-muted);
|
|
561
644
|
z-index: 50;
|
|
@@ -574,7 +657,8 @@ textarea {
|
|
|
574
657
|
}
|
|
575
658
|
|
|
576
659
|
.shortcut-label {
|
|
577
|
-
font-
|
|
660
|
+
font-family: var(--font-body);
|
|
661
|
+
font-size: var(--font-size-label);
|
|
578
662
|
color: var(--fg-dim);
|
|
579
663
|
text-transform: uppercase;
|
|
580
664
|
letter-spacing: 0.04em;
|
|
@@ -587,7 +671,7 @@ textarea {
|
|
|
587
671
|
min-width: 20px;
|
|
588
672
|
height: 20px;
|
|
589
673
|
padding: 0 5px;
|
|
590
|
-
font-family: var(--font-
|
|
674
|
+
font-family: var(--font-mono);
|
|
591
675
|
font-size: 10px;
|
|
592
676
|
font-weight: 500;
|
|
593
677
|
background: var(--bg-elevated);
|
|
@@ -603,14 +687,8 @@ textarea {
|
|
|
603
687
|
margin: 0 4px;
|
|
604
688
|
}
|
|
605
689
|
|
|
606
|
-
.recommended-hint .star {
|
|
607
|
-
color: var(--accent);
|
|
608
|
-
font-weight: 600;
|
|
609
|
-
font-size: 14px;
|
|
610
|
-
}
|
|
611
|
-
|
|
612
690
|
button {
|
|
613
|
-
font-family: var(--font-
|
|
691
|
+
font-family: var(--font-body);
|
|
614
692
|
font-size: 12px;
|
|
615
693
|
padding: 6px 14px;
|
|
616
694
|
border-radius: var(--radius);
|
|
@@ -854,7 +932,7 @@ button {
|
|
|
854
932
|
border: 1px solid var(--border-muted);
|
|
855
933
|
border-radius: var(--radius);
|
|
856
934
|
padding: 6px 8px;
|
|
857
|
-
font-family: var(--font-
|
|
935
|
+
font-family: var(--font-body);
|
|
858
936
|
font-size: 12px;
|
|
859
937
|
white-space: nowrap;
|
|
860
938
|
overflow: hidden;
|
|
@@ -1005,7 +1083,7 @@ button {
|
|
|
1005
1083
|
background: var(--bg-elevated);
|
|
1006
1084
|
border: 1px solid var(--border-muted);
|
|
1007
1085
|
border-radius: 3px;
|
|
1008
|
-
font-family: var(--font-
|
|
1086
|
+
font-family: var(--font-mono);
|
|
1009
1087
|
font-size: 11px;
|
|
1010
1088
|
}
|
|
1011
1089
|
|
|
@@ -1020,7 +1098,7 @@ button {
|
|
|
1020
1098
|
align-items: center;
|
|
1021
1099
|
gap: 4px;
|
|
1022
1100
|
padding: 4px 8px;
|
|
1023
|
-
font-family: var(--font-
|
|
1101
|
+
font-family: var(--font-body);
|
|
1024
1102
|
font-size: 10px;
|
|
1025
1103
|
color: var(--fg-dim);
|
|
1026
1104
|
background: transparent;
|
|
@@ -1085,7 +1163,7 @@ button {
|
|
|
1085
1163
|
width: 100%;
|
|
1086
1164
|
margin-top: 10px;
|
|
1087
1165
|
padding: 8px 10px;
|
|
1088
|
-
font-family: var(--font-
|
|
1166
|
+
font-family: var(--font-mono);
|
|
1089
1167
|
font-size: 11px;
|
|
1090
1168
|
color: var(--fg);
|
|
1091
1169
|
background: var(--bg-elevated);
|
|
@@ -1110,7 +1188,7 @@ button {
|
|
|
1110
1188
|
display: none;
|
|
1111
1189
|
}
|
|
1112
1190
|
|
|
1113
|
-
@media (max-width:
|
|
1191
|
+
@media (max-width: 768px) {
|
|
1114
1192
|
body {
|
|
1115
1193
|
padding: 12px;
|
|
1116
1194
|
}
|
|
@@ -1124,7 +1202,7 @@ button {
|
|
|
1124
1202
|
}
|
|
1125
1203
|
|
|
1126
1204
|
.interview-header h1 {
|
|
1127
|
-
font-size:
|
|
1205
|
+
font-size: 22px;
|
|
1128
1206
|
}
|
|
1129
1207
|
|
|
1130
1208
|
.question-card {
|
|
@@ -1136,7 +1214,7 @@ button {
|
|
|
1136
1214
|
}
|
|
1137
1215
|
|
|
1138
1216
|
.option-item {
|
|
1139
|
-
padding: 12px
|
|
1217
|
+
padding: 10px 12px;
|
|
1140
1218
|
}
|
|
1141
1219
|
|
|
1142
1220
|
textarea {
|
|
@@ -1232,6 +1310,10 @@ button {
|
|
|
1232
1310
|
padding: 16px;
|
|
1233
1311
|
}
|
|
1234
1312
|
|
|
1313
|
+
.session-bar {
|
|
1314
|
+
margin: -16px -16px 16px -16px;
|
|
1315
|
+
}
|
|
1316
|
+
|
|
1235
1317
|
.question-card {
|
|
1236
1318
|
padding: 16px;
|
|
1237
1319
|
}
|
|
@@ -1315,7 +1397,7 @@ button {
|
|
|
1315
1397
|
|
|
1316
1398
|
.code-block code {
|
|
1317
1399
|
font-family: var(--font-mono);
|
|
1318
|
-
font-size:
|
|
1400
|
+
font-size: var(--font-size-code);
|
|
1319
1401
|
background: none;
|
|
1320
1402
|
padding: 0;
|
|
1321
1403
|
}
|
|
@@ -1420,7 +1502,7 @@ button {
|
|
|
1420
1502
|
border-radius: var(--radius);
|
|
1421
1503
|
cursor: pointer;
|
|
1422
1504
|
transition: border-color 150ms ease, color 150ms ease;
|
|
1423
|
-
font-family: var(--font-
|
|
1505
|
+
font-family: var(--font-body);
|
|
1424
1506
|
}
|
|
1425
1507
|
|
|
1426
1508
|
.save-btn-header:hover {
|
|
@@ -1469,3 +1551,182 @@ button {
|
|
|
1469
1551
|
}
|
|
1470
1552
|
}
|
|
1471
1553
|
|
|
1554
|
+
/* Media blocks */
|
|
1555
|
+
.media-block {
|
|
1556
|
+
margin: 16px 0;
|
|
1557
|
+
border-radius: 8px;
|
|
1558
|
+
overflow: hidden;
|
|
1559
|
+
}
|
|
1560
|
+
|
|
1561
|
+
.media-caption {
|
|
1562
|
+
font-family: var(--font-mono);
|
|
1563
|
+
font-size: var(--font-size-label);
|
|
1564
|
+
color: var(--fg-dim);
|
|
1565
|
+
padding: 8px 0 0;
|
|
1566
|
+
text-align: center;
|
|
1567
|
+
}
|
|
1568
|
+
|
|
1569
|
+
.media-image {
|
|
1570
|
+
margin: 0;
|
|
1571
|
+
}
|
|
1572
|
+
|
|
1573
|
+
.media-image img {
|
|
1574
|
+
width: 100%;
|
|
1575
|
+
height: auto;
|
|
1576
|
+
border-radius: 8px;
|
|
1577
|
+
border: 1px solid var(--border-muted);
|
|
1578
|
+
display: block;
|
|
1579
|
+
}
|
|
1580
|
+
|
|
1581
|
+
.media-table {
|
|
1582
|
+
border: 1px solid var(--border-muted);
|
|
1583
|
+
border-radius: 8px;
|
|
1584
|
+
overflow: hidden;
|
|
1585
|
+
}
|
|
1586
|
+
|
|
1587
|
+
.media-table-scroll {
|
|
1588
|
+
overflow-x: auto;
|
|
1589
|
+
-webkit-overflow-scrolling: touch;
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
.media-table .data-table {
|
|
1593
|
+
width: 100%;
|
|
1594
|
+
border-collapse: collapse;
|
|
1595
|
+
font-size: 13px;
|
|
1596
|
+
line-height: 1.5;
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
.media-table .data-table th {
|
|
1600
|
+
background: var(--bg-body);
|
|
1601
|
+
font-family: var(--font-mono);
|
|
1602
|
+
font-size: 10px;
|
|
1603
|
+
font-weight: 600;
|
|
1604
|
+
text-transform: uppercase;
|
|
1605
|
+
letter-spacing: 1px;
|
|
1606
|
+
color: var(--fg-dim);
|
|
1607
|
+
text-align: left;
|
|
1608
|
+
padding: 10px 14px;
|
|
1609
|
+
border-bottom: 2px solid var(--border-muted);
|
|
1610
|
+
white-space: nowrap;
|
|
1611
|
+
}
|
|
1612
|
+
|
|
1613
|
+
.media-table .data-table td {
|
|
1614
|
+
padding: 10px 14px;
|
|
1615
|
+
border-bottom: 1px solid var(--border-muted);
|
|
1616
|
+
vertical-align: top;
|
|
1617
|
+
font-family: var(--font-body);
|
|
1618
|
+
font-size: 13px;
|
|
1619
|
+
}
|
|
1620
|
+
|
|
1621
|
+
.media-table .data-table tbody tr:nth-child(even) {
|
|
1622
|
+
background: var(--accent-muted);
|
|
1623
|
+
}
|
|
1624
|
+
|
|
1625
|
+
.media-table .data-table tbody tr:last-child td {
|
|
1626
|
+
border-bottom: none;
|
|
1627
|
+
}
|
|
1628
|
+
|
|
1629
|
+
.media-table .data-table tbody tr.highlighted-row {
|
|
1630
|
+
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
1631
|
+
}
|
|
1632
|
+
|
|
1633
|
+
.media-table .data-table tbody tr:hover {
|
|
1634
|
+
background: var(--bg-hover);
|
|
1635
|
+
}
|
|
1636
|
+
|
|
1637
|
+
.media-chart {
|
|
1638
|
+
background: var(--bg-body);
|
|
1639
|
+
border: 1px solid var(--border-muted);
|
|
1640
|
+
border-radius: 8px;
|
|
1641
|
+
padding: 16px;
|
|
1642
|
+
}
|
|
1643
|
+
|
|
1644
|
+
.media-chart canvas {
|
|
1645
|
+
max-height: 300px;
|
|
1646
|
+
width: 100%;
|
|
1647
|
+
}
|
|
1648
|
+
|
|
1649
|
+
.media-mermaid .mermaid {
|
|
1650
|
+
background: var(--bg-body);
|
|
1651
|
+
border: 1px solid var(--border-muted);
|
|
1652
|
+
border-radius: 8px;
|
|
1653
|
+
padding: 20px;
|
|
1654
|
+
display: flex;
|
|
1655
|
+
justify-content: center;
|
|
1656
|
+
}
|
|
1657
|
+
|
|
1658
|
+
.media-html {
|
|
1659
|
+
background: var(--bg-body);
|
|
1660
|
+
border: 1px solid var(--border-muted);
|
|
1661
|
+
border-radius: 8px;
|
|
1662
|
+
padding: 16px;
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1665
|
+
.media-block[style*="max-height"] {
|
|
1666
|
+
overflow-y: auto;
|
|
1667
|
+
}
|
|
1668
|
+
|
|
1669
|
+
/* Info panel — context, not a question. Recede visually. */
|
|
1670
|
+
.info-panel {
|
|
1671
|
+
border-left: 1px solid var(--border-muted);
|
|
1672
|
+
box-shadow: none;
|
|
1673
|
+
}
|
|
1674
|
+
|
|
1675
|
+
.info-panel .question-title {
|
|
1676
|
+
font-size: 15px;
|
|
1677
|
+
color: var(--fg-muted);
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
/* Question weight */
|
|
1681
|
+
.question-card.weight-minor {
|
|
1682
|
+
padding: 16px;
|
|
1683
|
+
box-shadow: none;
|
|
1684
|
+
}
|
|
1685
|
+
|
|
1686
|
+
.question-card.weight-minor .question-header {
|
|
1687
|
+
margin-bottom: 8px;
|
|
1688
|
+
}
|
|
1689
|
+
|
|
1690
|
+
.question-card.weight-minor .question-title {
|
|
1691
|
+
font-size: 14px;
|
|
1692
|
+
}
|
|
1693
|
+
|
|
1694
|
+
.question-card.weight-minor .question-context {
|
|
1695
|
+
font-size: 12px;
|
|
1696
|
+
margin-bottom: 10px;
|
|
1697
|
+
}
|
|
1698
|
+
|
|
1699
|
+
.question-card.weight-minor .option-item {
|
|
1700
|
+
padding: 8px 10px;
|
|
1701
|
+
font-size: 13px;
|
|
1702
|
+
}
|
|
1703
|
+
|
|
1704
|
+
.question-card.weight-minor .option-list {
|
|
1705
|
+
gap: 6px;
|
|
1706
|
+
}
|
|
1707
|
+
|
|
1708
|
+
.question-card.weight-critical {
|
|
1709
|
+
border-left: 5px solid var(--card-accent, var(--accent));
|
|
1710
|
+
background: color-mix(in srgb, var(--card-accent, var(--accent)) 4%, var(--bg-elevated));
|
|
1711
|
+
}
|
|
1712
|
+
|
|
1713
|
+
/* Side-by-side layout */
|
|
1714
|
+
.question-side-layout {
|
|
1715
|
+
display: grid;
|
|
1716
|
+
grid-template-columns: 1fr 1fr;
|
|
1717
|
+
gap: 20px;
|
|
1718
|
+
align-items: start;
|
|
1719
|
+
}
|
|
1720
|
+
|
|
1721
|
+
.question-side-media {
|
|
1722
|
+
display: flex;
|
|
1723
|
+
flex-direction: column;
|
|
1724
|
+
gap: 12px;
|
|
1725
|
+
}
|
|
1726
|
+
|
|
1727
|
+
@media (max-width: 768px) {
|
|
1728
|
+
.question-side-layout {
|
|
1729
|
+
grid-template-columns: 1fr;
|
|
1730
|
+
}
|
|
1731
|
+
}
|
|
1732
|
+
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
/* Default dark theme uses base styles.css tokens. */
|
|
2
1
|
:root {
|
|
3
2
|
--overlay-bg: rgba(24, 24, 30, 0.95);
|
|
4
3
|
--error-bg: rgba(204, 102, 102, 0.12);
|
|
4
|
+
|
|
5
|
+
--q-color-1: #8abeb7;
|
|
6
|
+
--q-color-2: #34d399;
|
|
7
|
+
--q-color-3: #fbbf24;
|
|
8
|
+
--q-color-4: #f472b6;
|
|
9
|
+
--q-color-5: #22d3ee;
|
|
10
|
+
--q-color-6: #a78bfa;
|
|
5
11
|
}
|
|
@@ -21,4 +21,11 @@
|
|
|
21
21
|
--error-bg: rgba(175, 95, 95, 0.12);
|
|
22
22
|
--focus-ring: rgba(95, 135, 175, 0.2);
|
|
23
23
|
--overlay-bg: rgba(255, 255, 255, 0.95);
|
|
24
|
+
|
|
25
|
+
--q-color-1: #4a7a73;
|
|
26
|
+
--q-color-2: #059669;
|
|
27
|
+
--q-color-3: #d97706;
|
|
28
|
+
--q-color-4: #db2777;
|
|
29
|
+
--q-color-5: #0891b2;
|
|
30
|
+
--q-color-6: #7c3aed;
|
|
24
31
|
}
|
|
@@ -22,8 +22,14 @@
|
|
|
22
22
|
--focus-ring: rgba(201, 183, 154, 0.2);
|
|
23
23
|
--overlay-bg: rgba(28, 25, 23, 0.95);
|
|
24
24
|
|
|
25
|
-
--font-
|
|
26
|
-
--font-
|
|
27
|
-
--font-mono:
|
|
28
|
-
|
|
25
|
+
--font-display: 'Instrument Serif', Georgia, serif;
|
|
26
|
+
--font-body: 'Instrument Serif', Georgia, serif;
|
|
27
|
+
--font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
|
|
28
|
+
|
|
29
|
+
--q-color-1: #c9b79a;
|
|
30
|
+
--q-color-2: #a3be8c;
|
|
31
|
+
--q-color-3: #ebcb8b;
|
|
32
|
+
--q-color-4: #d08770;
|
|
33
|
+
--q-color-5: #88c0d0;
|
|
34
|
+
--q-color-6: #b48ead;
|
|
29
35
|
}
|
|
@@ -22,8 +22,14 @@
|
|
|
22
22
|
--focus-ring: rgba(125, 104, 80, 0.2);
|
|
23
23
|
--overlay-bg: rgba(251, 250, 247, 0.95);
|
|
24
24
|
|
|
25
|
-
--font-
|
|
26
|
-
--font-
|
|
27
|
-
--font-mono:
|
|
28
|
-
|
|
25
|
+
--font-display: 'Instrument Serif', Georgia, serif;
|
|
26
|
+
--font-body: 'Instrument Serif', Georgia, serif;
|
|
27
|
+
--font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
|
|
28
|
+
|
|
29
|
+
--q-color-1: #7d6850;
|
|
30
|
+
--q-color-2: #5a7a4a;
|
|
31
|
+
--q-color-3: #a07030;
|
|
32
|
+
--q-color-4: #a05050;
|
|
33
|
+
--q-color-5: #4a7a8a;
|
|
34
|
+
--q-color-6: #7a5a8a;
|
|
29
35
|
}
|