Skip to main content

max / makenotwork

12.8 KB · 638 lines History Blame Raw
1 /* Creation Wizard Layout */
2
3 .wizard-layout {
4 display: flex;
5 max-width: 1100px;
6 margin: 0 auto;
7 gap: var(--gap-page);
8 min-height: 60vh;
9 }
10
11 .wizard-sidebar {
12 width: 220px;
13 flex-shrink: 0;
14 padding-top: var(--gap-peer);
15 }
16
17 .wizard-sidebar h2 {
18 font-family: var(--font-heading); font-weight: bold;
19 font-size: var(--text-subhead);
20 margin-bottom: var(--gap-pane);
21 }
22
23 .wizard-content {
24 flex: 1;
25 min-width: 0;
26 }
27
28 /* Step Indicator */
29
30 .wizard-steps {
31 list-style: none;
32 padding: 0;
33 margin: 0;
34 }
35
36 .wizard-step-indicator {
37 display: flex;
38 align-items: center;
39 gap: var(--gap-group);
40 padding: var(--gap-peer) 0;
41 font-size: var(--text-note);
42 color: var(--text-muted);
43 position: relative;
44 }
45
46 .wizard-step-indicator + .wizard-step-indicator::before {
47 content: '';
48 position: absolute;
49 left: 12px;
50 top: -4px;
51 width: 1px;
52 height: 12px;
53 background: var(--border);
54 }
55
56 .wizard-step-indicator.completed + .wizard-step-indicator::before {
57 background: var(--highlight);
58 }
59
60 .step-number {
61 display: inline-flex;
62 align-items: center;
63 justify-content: center;
64 width: 24px;
65 height: 24px;
66 border-radius: var(--radius-round);
67 font-size: var(--text-fine);
68 font-weight: bold;
69 flex-shrink: 0;
70 border: 2px solid var(--border);
71 color: var(--text-muted);
72 background: transparent;
73 }
74
75 .wizard-step-indicator.active .step-number {
76 border-color: var(--highlight);
77 background: var(--highlight);
78 color: var(--primary-light);
79 }
80
81 .wizard-step-indicator.completed .step-number {
82 border-color: var(--highlight);
83 color: var(--highlight);
84 }
85
86 .wizard-step-indicator.active .step-label {
87 color: var(--detail);
88 font-weight: bold;
89 }
90
91 .wizard-step-indicator.completed .step-label {
92 color: var(--detail);
93 }
94
95 /* Step Content */
96
97 .wizard-step {
98 background: var(--light-background);
99 padding: var(--gap-page);
100 border-radius: var(--radius-control);
101 }
102
103 .wizard-step h2 {
104 font-family: var(--font-heading); font-weight: bold;
105 font-size: var(--text-head);
106 margin-bottom: var(--gap-bound);
107 }
108
109 .step-description {
110 color: var(--text-muted);
111 font-size: var(--text-note);
112 margin-bottom: var(--gap-pane);
113 }
114
115 /* Wizard Actions (button row) */
116
117 .wizard-actions {
118 display: flex;
119 align-items: center;
120 gap: var(--gap-section);
121 margin-top: var(--gap-page);
122 padding-top: var(--gap-pane);
123 border-top: 1px solid var(--border);
124 flex-wrap: wrap;
125 }
126
127 .wizard-actions .primary {
128 margin-left: auto;
129 }
130
131 /* Type Card Grid */
132
133 .type-grid {
134 display: grid;
135 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
136 gap: var(--gap-section);
137 margin-top: var(--gap-peer);
138 }
139
140 .type-grid-large {
141 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
142 }
143
144 /* (The cards themselves are .card--selectable, defined in style.css; this
145 file only contains wizard-specific layouts.) */
146
147 /* Suggestion Input (category, tags) */
148
149 .suggestion-input {
150 position: relative;
151 }
152
153 .suggestion-dropdown {
154 display: none;
155 position: absolute;
156 top: 100%;
157 left: 0;
158 right: 0;
159 background: var(--background);
160 border: 1px solid var(--border);
161 border-top: none;
162 border-radius: 0 0 var(--radius-control) var(--radius-control);
163 max-height: 200px;
164 overflow-y: auto;
165 z-index: var(--z-dropdown);
166 box-shadow: var(--shadow-2);
167 }
168
169 .suggestion-dropdown.open {
170 display: block;
171 }
172
173 .suggestion-item {
174 padding: var(--gap-peer) var(--gap-section);
175 cursor: pointer;
176 font-size: var(--text-note);
177 }
178
179 .suggestion-item:hover {
180 background: var(--light-background);
181 }
182
183 .suggestion-create {
184 font-style: italic;
185 opacity: 0.8;
186 border-top: 1px solid var(--border);
187 }
188
189 /* (`.monetization-card{,-cards,.info-only}` removed 2026-05-20, dead CSS,
190 no template references. Selectable monetization choices use the canonical
191 `.card--selectable` recipe in style.css.) */
192
193 .tier-row {
194 display: flex;
195 justify-content: space-between;
196 padding: var(--gap-peer) 0;
197 font-size: var(--text-note);
198 border-bottom: 1px solid var(--border);
199 }
200
201 .tier-form-row {
202 display: grid;
203 grid-template-columns: 1fr 1fr 2fr;
204 gap: var(--gap-section);
205 margin-top: var(--gap-peer);
206 padding: var(--gap-section);
207 background: var(--surface-alt);
208 border-radius: var(--radius-control);
209 }
210
211 /* Pricing Cards */
212
213 .pricing-cards {
214 display: grid;
215 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
216 gap: var(--gap-section);
217 margin-bottom: var(--gap-pane);
218 }
219
220 /* (The cards are `.card--selectable`, the text-heavy pricing variant adds
221 `.is-text-heavy`, and `.is-disabled` is its modifier. All in style.css.) */
222 .pricing-fields {
223 margin-top: var(--gap-section);
224 }
225
226 .content-choice-cards {
227 display: grid;
228 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
229 gap: var(--gap-section);
230 margin-bottom: var(--gap-pane);
231 }
232
233 /* Preview Summary */
234
235 .preview-summary {
236 margin-bottom: var(--gap-pane);
237 }
238
239 .preview-row {
240 display: flex;
241 padding: var(--gap-group) 0;
242 border-bottom: 1px solid var(--border);
243 font-size: var(--text-note);
244 }
245
246 .preview-row.indent {
247 padding-left: var(--gap-pane);
248 }
249
250 .preview-label {
251 width: 180px;
252 flex-shrink: 0;
253 color: var(--text-muted);
254 font-weight: bold;
255 }
256
257 .preview-value {
258 flex: 1;
259 }
260
261 /* Preview Checklist */
262
263 .preview-checklist {
264 margin-bottom: var(--gap-pane);
265 }
266
267 .preview-checklist h3 {
268 font-family: var(--font-mono);
269 font-size: var(--text-body);
270 margin-bottom: var(--gap-peer);
271 }
272
273 .preview-checklist ul {
274 list-style: none;
275 padding: 0;
276 margin: 0;
277 }
278
279 .preview-checklist li {
280 padding: var(--gap-bound) 0;
281 padding-left: var(--gap-page);
282 position: relative;
283 font-size: var(--text-note);
284 }
285
286 .preview-checklist li::before {
287 position: absolute;
288 left: 0;
289 font-family: var(--font-mono);
290 font-size: var(--text-fine);
291 text-transform: uppercase;
292 letter-spacing: 0.04em;
293 line-height: 1.6;
294 }
295
296 .check-done::before {
297 content: "Done";
298 color: var(--success);
299 }
300
301 .check-missing::before {
302 content: "Todo";
303 color: var(--text-muted);
304 }
305
306 /* Upload Areas */
307
308 .upload-area {
309 border: 2px dashed var(--border);
310 border-radius: var(--radius-control);
311 padding: var(--gap-page);
312 text-align: center;
313 cursor: pointer;
314 transition: border-color 0.15s;
315 background: var(--background);
316 }
317
318 .upload-area:hover,
319 .upload-area.dragover {
320 border-color: var(--highlight);
321 }
322
323 /* Project Image Dropzone */
324
325 .project-image-dropzone {
326 border: 2px dashed var(--border);
327 border-radius: var(--radius-control);
328 padding: var(--gap-page);
329 text-align: center;
330 cursor: pointer;
331 transition: border-color 0.15s;
332 background: var(--background);
333 max-width: 300px;
334 }
335
336 .project-image-dropzone:hover,
337 .project-image-dropzone.dragover {
338 border-color: var(--highlight);
339 }
340
341 .project-image-placeholder {
342 color: var(--text-muted);
343 }
344
345 .project-image-upload {
346 display: flex;
347 flex-direction: column;
348 gap: var(--gap-section);
349 max-width: 300px;
350 }
351
352 .project-image-upload .secondary {
353 align-self: flex-start;
354 }
355
356 .project-image-current img {
357 width: 200px;
358 height: 200px;
359 object-fit: cover;
360 border-radius: var(--radius-control);
361 }
362
363 .upload-progress-inline {
364 font-size: var(--text-note);
365 display: flex;
366 flex-wrap: wrap;
367 align-items: center;
368 gap: var(--gap-peer);
369 }
370
371 .upload-progress-inline .progress-bar-container {
372 width: 100%;
373 height: 6px;
374 background: var(--border);
375 border-radius: var(--radius-control);
376 overflow: hidden;
377 }
378
379 .upload-progress-inline .progress-bar {
380 height: 100%;
381 background: var(--highlight);
382 transition: width 0.2s;
383 }
384
385 .upload-error-inline {
386 font-size: var(--text-note);
387 color: var(--danger);
388 padding: var(--gap-peer) var(--gap-section);
389 background: color-mix(in oklch, var(--danger) 8%, transparent);
390 border-radius: var(--radius-control);
391 }
392
393 /* Project Card Preview */
394
395 .project-card-preview {
396 display: flex;
397 gap: var(--gap-section);
398 align-items: center;
399 padding: var(--gap-section);
400 background: var(--background);
401 border: 1px solid var(--border);
402 border-radius: var(--radius-control);
403 }
404
405 .preview-cover {
406 width: 80px;
407 height: 80px;
408 flex-shrink: 0;
409 border-radius: var(--radius-control);
410 overflow: hidden;
411 background: var(--surface-muted);
412 }
413
414 .preview-cover img {
415 width: 100%;
416 height: 100%;
417 object-fit: cover;
418 }
419
420 .preview-cover-empty {
421 display: flex;
422 align-items: center;
423 justify-content: center;
424 height: 100%;
425 font-size: var(--text-fine);
426 color: var(--text-muted);
427 }
428
429 /* Distribution */
430
431 .distribution-section {
432 background: var(--background);
433 padding: var(--gap-section);
434 border: 1px solid var(--border);
435 border-radius: var(--radius-control);
436 }
437
438 .distribution-section h3 {
439 font-family: var(--font-mono);
440 font-size: var(--text-body);
441 margin-bottom: var(--gap-peer);
442 }
443
444 .checkbox-label {
445 display: flex;
446 align-items: center;
447 gap: var(--gap-peer);
448 cursor: pointer;
449 font-size: var(--text-note);
450 }
451
452 /* Monospace input for text editor */
453
454 .monospace-input {
455 font-family: var(--font-mono);
456 font-size: var(--text-note);
457 line-height: 1.6;
458 }
459
460 /* Readonly field */
461
462 .readonly-field {
463 opacity: 0.6;
464 cursor: not-allowed;
465 }
466
467 /* Info box */
468
469 .info-box {
470 background: var(--surface-alt);
471 padding: var(--gap-section);
472 border-radius: var(--radius-control);
473 font-size: var(--text-note);
474 }
475
476 /* Responsive */
477
478 @media (max-width: 839px) {
479 .wizard-layout {
480 flex-direction: column;
481 }
482
483 .wizard-sidebar {
484 width: 100%;
485 }
486
487 .wizard-steps {
488 display: flex;
489 gap: var(--gap-bound);
490 overflow-x: auto;
491 }
492
493 .wizard-step-indicator {
494 flex-direction: column;
495 gap: var(--gap-bound);
496 font-size: var(--text-fine);
497 min-width: 0;
498 }
499
500 .wizard-step-indicator + .wizard-step-indicator::before {
501 display: none;
502 }
503
504 .step-label {
505 white-space: nowrap;
506 }
507
508 .type-grid {
509 grid-template-columns: repeat(2, 1fr);
510 }
511
512 .tier-form-row {
513 grid-template-columns: 1fr;
514 }
515
516 .preview-row {
517 flex-direction: column;
518 gap: var(--gap-bound);
519 }
520
521 .preview-label {
522 width: auto;
523 }
524 }
525
526 /* ===========================================
527 WIZARD STEPS, shared step-level patterns
528 ===========================================
529 Patterns shared across:
530 - wizards/wizard_project.html
531 - wizards/steps/project/basics.html
532 - wizards/steps/project/appearance.html
533 - wizards/steps/item/basics.html
534 - wizards/steps/join/stripe.html
535 */
536
537 /* Intro paragraph below .step-description that explains the concept. */
538 .wizard-step .form-hint {
539 margin-bottom: var(--gap-pane);
540 }
541
542 /* "Checking..." style spinner shown next to async-validated inputs. */
543 .wizard-field-spinner {
544 font-size: var(--text-note);
545 }
546
547 /* Spacing helpers for hints that sit just above a control group. */
548 .wizard-hint-gap-sm { margin-bottom: var(--gap-peer); }
549 .wizard-hint-gap-md { margin-bottom: var(--gap-section); }
550
551 /* Vertical radio group for AI disclosure and similar one-of-many pickers. */
552 .wizard-radio-group {
553 display: flex;
554 flex-direction: column;
555 gap: var(--gap-peer);
556 }
557
558 .wizard-radio-option {
559 display: flex;
560 align-items: center;
561 gap: var(--gap-peer);
562 cursor: pointer;
563 }
564
565 /* Optional-label suffix, e.g. "(optional)". */
566 .wizard-optional-tag {
567 opacity: 0.5;
568 font-weight: normal;
569 }
570
571 /* Square cover images inside upload previews (project + item basics). */
572 .wizard-cover-img {
573 width: 100%;
574 aspect-ratio: 1 / 1;
575 object-fit: cover;
576 }
577
578 /* Stripe-step layout. */
579 .stripe-connect-box {
580 background: var(--surface-muted);
581 padding: var(--gap-section);
582 text-align: center;
583 margin: var(--gap-section) 0;
584 }
585
586 .stripe-connect-box .stripe-intro {
587 margin: var(--gap-section) 0;
588 opacity: 0.8;
589 }
590
591 .stripe-connect-actions {
592 margin-top: var(--gap-section);
593 }
594
595 .stripe-connect-cta {
596 display: inline-block;
597 padding: var(--gap-section) var(--gap-pane);
598 text-decoration: none;
599 background: var(--stripe);
600 border: none;
601 color: var(--primary-light);
602 }
603
604 .stripe-connect-cta:hover {
605 opacity: 0.85;
606 }
607
608 .stripe-connect-note {
609 font-size: var(--text-fine);
610 opacity: 0.5;
611 margin-top: var(--gap-section);
612 }
613
614 .stripe-connect-note-secondary {
615 font-size: var(--text-fine);
616 opacity: 0.7;
617 margin-top: var(--gap-peer);
618 }
619
620 .stripe-benefits {
621 text-align: left;
622 margin-top: var(--gap-section);
623 }
624
625 .benefit-item {
626 padding: var(--gap-peer) 0 var(--gap-peer) var(--gap-pane);
627 position: relative;
628 font-size: var(--text-note);
629 }
630
631 .benefit-item::before {
632 content: "•";
633 position: absolute;
634 left: 0;
635 color: var(--success);
636 }
637
638