customforge 0.1.0-alpha.2 → 0.1.1

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.
Files changed (47) hide show
  1. package/CHANGELOG.md +91 -56
  2. package/LICENSES/NunitoSans-OFL.txt +93 -93
  3. package/LICENSES/plain-mug-CC-BY-4.0.txt +11 -0
  4. package/README.md +592 -461
  5. package/README.zh-CN.md +587 -459
  6. package/dist/{ProductCustomizer-rMRyWe7L.js → ProductCustomizer-BnjY3v7d.js} +898 -156
  7. package/dist/ProductCustomizer-BnjY3v7d.js.map +1 -0
  8. package/dist/bridge/TextureBridge.d.ts +1 -1
  9. package/dist/core/api.d.ts +94 -0
  10. package/dist/core/api.d.ts.map +1 -0
  11. package/dist/core/config.d.ts +3 -12
  12. package/dist/core/config.d.ts.map +1 -1
  13. package/dist/core/design.d.ts.map +1 -1
  14. package/dist/core/types.d.ts +183 -5
  15. package/dist/core/types.d.ts.map +1 -1
  16. package/dist/core/uv.d.ts +8 -0
  17. package/dist/core/uv.d.ts.map +1 -0
  18. package/dist/cup_decal_small_margins.glb +0 -0
  19. package/dist/customizer/ProductCustomizer.d.ts +98 -9
  20. package/dist/customizer/ProductCustomizer.d.ts.map +1 -1
  21. package/dist/editor/DesignEditor.d.ts +118 -10
  22. package/dist/editor/DesignEditor.d.ts.map +1 -1
  23. package/dist/editor/uvBounds.d.ts +15 -0
  24. package/dist/editor/uvBounds.d.ts.map +1 -0
  25. package/dist/index.d.ts +4 -2
  26. package/dist/index.d.ts.map +1 -1
  27. package/dist/index.js +1 -1
  28. package/dist/index.js.map +1 -1
  29. package/dist/style.css +2120 -1327
  30. package/dist/viewer/ProductViewer.d.ts +37 -6
  31. package/dist/viewer/ProductViewer.d.ts.map +1 -1
  32. package/dist/viewer/uvLayout.d.ts +11 -0
  33. package/dist/viewer/uvLayout.d.ts.map +1 -0
  34. package/dist/workbench/CustomForgeWorkbench.d.ts +85 -8
  35. package/dist/workbench/CustomForgeWorkbench.d.ts.map +1 -1
  36. package/dist/workbench/config.d.ts +42 -1
  37. package/dist/workbench/config.d.ts.map +1 -1
  38. package/dist/workbench/icons.d.ts.map +1 -1
  39. package/dist/workbench/index.d.ts +3 -3
  40. package/dist/workbench/index.d.ts.map +1 -1
  41. package/dist/workbench/template.d.ts.map +1 -1
  42. package/dist/workbench/types.d.ts +261 -13
  43. package/dist/workbench/types.d.ts.map +1 -1
  44. package/dist/workbench.js +1248 -116
  45. package/dist/workbench.js.map +1 -1
  46. package/package.json +27 -20
  47. package/dist/ProductCustomizer-rMRyWe7L.js.map +0 -1
package/dist/style.css CHANGED
@@ -1,1331 +1,2124 @@
1
- .customforge-design-canvas {
2
- max-width: 100%;
3
- max-height: 100%;
4
- overflow: hidden;
5
- }
6
-
7
- .customforge-viewer-canvas {
8
- display: block;
9
- width: 100%;
10
- height: 100%;
11
- }
12
-
1
+ .customforge-design-canvas {
2
+ max-width: 100%;
3
+ max-height: 100%;
4
+ overflow: hidden;
5
+ }
6
+
7
+ .customforge-design-canvas .customforge-uv-layout {
8
+ position: absolute;
9
+ z-index: 1;
10
+ inset: 0;
11
+ display: block;
12
+ width: 100%;
13
+ height: 100%;
14
+ pointer-events: none;
15
+ }
16
+
17
+ .customforge-design-canvas .customforge-uv-layout[hidden] {
18
+ display: none;
19
+ }
20
+
21
+ .customforge-design-canvas .upper-canvas {
22
+ z-index: 2;
23
+ }
24
+
25
+ .customforge-viewer-canvas {
26
+ display: block;
27
+ width: 100%;
28
+ height: 100%;
29
+ }
30
+
13
31
  @font-face {
14
32
  font-family: "Nunito Sans";
15
- src: url("/NunitoSans-Variable.ttf")
33
+ src: url("./NunitoSans-Variable.ttf")
16
34
  format("truetype");
17
- font-display: swap;
18
- font-style: normal;
19
- font-weight: 200 1000;
20
- }
21
-
22
- @keyframes customforge-layer-selection {
23
- 0% {
24
- background-color: transparent;
25
- border-color: transparent;
26
- box-shadow: inset 0 0 0 var(--cfw-accent);
27
- }
28
-
29
- 58% {
30
- background-color: color-mix(in srgb, var(--cfw-accent) 12%, var(--cfw-surface));
31
- border-color: color-mix(in srgb, var(--cfw-accent) 20%, var(--cfw-line));
32
- box-shadow: inset 3px 0 0 var(--cfw-accent);
33
- }
34
-
35
- 100% {
36
- background-color: color-mix(in srgb, var(--cfw-accent) 8%, var(--cfw-surface));
37
- border-color: color-mix(in srgb, var(--cfw-accent) 12%, var(--cfw-line));
38
- box-shadow: inset 2px 0 0 var(--cfw-accent);
39
- }
40
- }
41
-
42
- @keyframes customforge-layer-indicator {
43
- from {
44
- opacity: 0;
45
- transform: scaleY(0.3);
46
- }
47
-
48
- to {
49
- opacity: 1;
50
- transform: scaleY(1);
51
- }
52
- }
53
-
54
- @keyframes customforge-dialog-enter {
55
- from {
56
- opacity: 0;
57
- transform: translateY(10px) scale(0.985);
58
- }
59
-
60
- to {
61
- opacity: 1;
62
- transform: translateY(0) scale(1);
63
- }
64
- }
65
-
66
- @keyframes customforge-dialog-exit {
67
- from {
68
- opacity: 1;
69
- transform: translateY(0) scale(1);
70
- }
71
-
72
- to {
73
- opacity: 0;
74
- transform: translateY(6px) scale(0.99);
75
- }
76
- }
77
-
78
- @keyframes customforge-backdrop-enter {
79
- from {
80
- background-color: rgb(17 24 30 / 0%);
81
- }
82
-
83
- to {
84
- background-color: rgb(17 24 30 / 38%);
85
- }
86
- }
87
-
88
- @keyframes customforge-backdrop-exit {
89
- from {
90
- background-color: rgb(17 24 30 / 38%);
91
- }
92
-
93
- to {
94
- background-color: rgb(17 24 30 / 0%);
95
- }
96
- }
97
-
98
- .customforge-workbench {
99
- --cfw-ink: #24272b;
100
- --cfw-muted: #747b84;
101
- --cfw-line: #e1e4e8;
102
- --cfw-surface: #ffffff;
103
- --cfw-surface-muted: #f5f6f8;
104
- --cfw-stage: #f1f3f5;
105
- --cfw-accent: #0875c9;
106
- --cfw-accent-hover: #075fa3;
107
- --cfw-accent-contrast: #ffffff;
108
- --cfw-danger: #b42318;
109
- --cfw-control-radius: 7px;
110
- --cfw-font-family: "Nunito Sans", "Avenir Next", "Segoe UI Variable",
111
- "Segoe UI", ui-sans-serif, system-ui, sans-serif;
112
- container-name: customforge-workbench;
113
- container-type: inline-size;
114
- display: grid;
115
- grid-template-rows: auto minmax(0, 1fr) auto;
116
- width: 100%;
117
- min-width: 320px;
118
- height: 100%;
119
- min-height: 640px;
120
- overflow: hidden;
121
- color: var(--cfw-ink);
122
- background: var(--cfw-surface-muted);
123
- border: 1px solid var(--cfw-line);
124
- font-family: var(--cfw-font-family);
125
- font-size: 13px;
126
- font-synthesis: none;
127
- letter-spacing: 0;
128
- scrollbar-color: color-mix(in srgb, var(--cfw-muted) 38%, transparent) transparent;
129
- scrollbar-width: thin;
130
- text-rendering: optimizeLegibility;
131
- }
132
-
133
- .customforge-workbench [hidden] {
134
- display: none !important;
135
- }
136
-
137
- .customforge-workbench,
138
- .customforge-workbench * {
139
- box-sizing: border-box;
140
- }
141
-
142
- .customforge-workbench button,
143
- .customforge-workbench input,
144
- .customforge-workbench select,
145
- .customforge-workbench textarea {
146
- font: inherit;
147
- letter-spacing: 0;
148
- }
149
-
150
- .customforge-workbench :where(button) {
151
- color: inherit;
152
- }
153
-
154
- .customforge-workbench button:focus-visible,
155
- .customforge-workbench input:focus-visible,
156
- .customforge-workbench select:focus-visible {
157
- outline: 3px solid color-mix(in srgb, var(--cfw-accent) 22%, transparent);
158
- outline-offset: 1px;
159
- }
160
-
161
- .customforge-workbench__topbar {
162
- z-index: 5;
163
- display: flex;
164
- align-items: center;
165
- justify-content: space-between;
166
- gap: 20px;
167
- min-height: 58px;
168
- padding: 8px 14px 8px 16px;
169
- background: var(--cfw-surface);
170
- border-bottom: 1px solid var(--cfw-line);
171
- }
172
-
173
- .customforge-workbench__brand,
174
- .customforge-workbench__brand-copy,
175
- .customforge-workbench__global-actions,
176
- .customforge-workbench__panel-title,
177
- .customforge-workbench__tool-group,
178
- .customforge-workbench__layers-header,
179
- .customforge-workbench__layers-header > span,
180
- .customforge-workbench__statusbar,
181
- .customforge-workbench__button,
182
- .customforge-workbench__tool-button,
183
- .customforge-workbench__layer-item,
184
- .customforge-workbench__layer-main,
185
- .customforge-workbench__layer-actions,
186
- .customforge-workbench__dialog-header,
187
- .customforge-workbench__dialog-header > div,
188
- .customforge-workbench__dialog-actions,
189
- .customforge-workbench__input-shell,
190
- .customforge-workbench__check-field,
191
- .customforge-workbench__color-field,
192
- .customforge-workbench__tabs,
193
- .customforge-workbench__upload-field {
194
- display: flex;
195
- align-items: center;
196
- }
197
-
198
- .customforge-workbench__brand {
199
- min-width: 0;
200
- gap: 10px;
201
- }
202
-
203
- .customforge-workbench__brand-logo {
204
- display: block;
205
- flex: 0 0 36px;
206
- width: 36px;
207
- height: 36px;
208
- object-fit: contain;
209
- }
210
-
211
- .customforge-workbench__brand-copy {
212
- align-items: flex-start;
213
- flex-direction: column;
214
- min-width: 0;
215
- gap: 1px;
216
- }
217
-
218
- .customforge-workbench__brand-copy strong,
219
- .customforge-workbench__brand-copy span {
220
- overflow: hidden;
221
- max-width: 300px;
222
- text-overflow: ellipsis;
223
- white-space: nowrap;
224
- }
225
-
226
- .customforge-workbench__brand-copy strong {
227
- font-size: 14px;
228
- font-weight: 680;
229
- line-height: 19px;
230
- }
231
-
232
- .customforge-workbench__brand-copy span {
233
- color: var(--cfw-muted);
234
- font-size: 10px;
235
- line-height: 14px;
236
- }
237
-
238
- .customforge-workbench__global-actions {
239
- flex: 0 0 auto;
240
- gap: 6px;
241
- }
242
-
243
- .customforge-workbench__button,
244
- .customforge-workbench__tool-button,
245
- .customforge-workbench__icon-button,
246
- .customforge-workbench__layer-action {
247
- min-height: 34px;
248
- border: 1px solid transparent;
249
- border-radius: var(--cfw-control-radius);
250
- cursor: pointer;
251
- transition: background-color 140ms ease, border-color 140ms ease,
252
- box-shadow 140ms ease, color 140ms ease;
253
- }
254
-
255
- .customforge-workbench__button {
256
- justify-content: center;
257
- gap: 7px;
258
- min-width: 0;
259
- padding: 0 13px;
260
- font-size: 12px;
261
- font-weight: 620;
262
- white-space: nowrap;
263
- }
264
-
265
- .customforge-workbench__button--primary {
266
- color: var(--cfw-accent-contrast);
267
- background: var(--cfw-accent);
268
- border-color: var(--cfw-accent);
269
- box-shadow: 0 1px 2px rgb(24 34 44 / 12%);
270
- }
271
-
272
- .customforge-workbench__button--primary:hover:not(:disabled) {
273
- background: var(--cfw-accent-hover);
274
- border-color: var(--cfw-accent-hover);
275
- box-shadow: 0 2px 5px rgb(24 34 44 / 16%);
276
- }
277
-
278
- .customforge-workbench__button--primary:active:not(:disabled) {
279
- background: var(--cfw-accent-hover);
280
- box-shadow: 0 1px 2px rgb(24 34 44 / 10%);
281
- }
282
-
283
- .customforge-workbench__button--secondary {
284
- color: var(--cfw-ink);
285
- background: var(--cfw-surface);
286
- border-color: var(--cfw-line);
287
- box-shadow: 0 1px 2px rgb(24 34 44 / 5%);
288
- }
289
-
290
- .customforge-workbench__button--secondary:hover:not(:disabled) {
291
- color: var(--cfw-ink);
292
- background: var(--cfw-surface-muted);
293
- border-color: color-mix(in srgb, var(--cfw-ink) 18%, var(--cfw-line));
294
- }
295
-
296
- .customforge-workbench__button--secondary:active:not(:disabled),
297
- .customforge-workbench__tool-button:active:not(:disabled),
298
- .customforge-workbench__icon-button:active:not(:disabled),
299
- .customforge-workbench__layer-action:active:not(:disabled) {
300
- background: color-mix(in srgb, var(--cfw-accent) 13%, var(--cfw-surface));
301
- }
302
-
303
- .customforge-workbench__tool-button:hover:not(:disabled),
304
- .customforge-workbench__icon-button:hover:not(:disabled),
305
- .customforge-workbench__layer-action:hover:not(:disabled) {
306
- color: var(--cfw-accent-hover);
307
- background: color-mix(in srgb, var(--cfw-accent) 9%, var(--cfw-surface));
308
- border-color: transparent;
309
- }
310
-
311
- .customforge-workbench__icon-button--danger:hover:not(:disabled),
312
- .customforge-workbench__layer-action[data-layer-action="remove"]:hover:not(:disabled) {
313
- color: var(--cfw-danger);
314
- background: color-mix(in srgb, var(--cfw-danger) 8%, var(--cfw-surface));
315
- border-color: transparent;
316
- }
317
-
318
- .customforge-workbench__button:disabled,
319
- .customforge-workbench__tool-button:disabled,
320
- .customforge-workbench__icon-button:disabled,
321
- .customforge-workbench__layer-action:disabled {
322
- color: color-mix(in srgb, var(--cfw-muted) 48%, var(--cfw-surface));
323
- cursor: not-allowed;
324
- }
325
-
326
- .customforge-workbench__button--primary:disabled {
327
- color: var(--cfw-accent-contrast);
328
- }
329
-
330
- .customforge-workbench__custom-icon,
331
- .customforge-workbench [data-icon-slot] {
332
- flex: 0 0 auto;
333
- width: 18px;
334
- height: 18px;
335
- object-fit: contain;
336
- }
337
-
338
- .customforge-workbench__icon-label {
339
- position: absolute;
340
- width: 1px;
341
- height: 1px;
342
- padding: 0;
343
- overflow: hidden;
344
- clip: rect(0, 0, 0, 0);
345
- white-space: nowrap;
346
- border: 0;
347
- }
348
-
349
- .customforge-workbench[data-icons="hidden"] .customforge-workbench__icon-label,
350
- .customforge-workbench__icon-missing .customforge-workbench__icon-label {
351
- position: static;
352
- width: auto;
353
- height: auto;
354
- overflow: visible;
355
- clip: auto;
356
- font-size: 10px;
357
- white-space: nowrap;
358
- }
359
-
360
- .customforge-workbench[data-icons="hidden"] .customforge-workbench__icon-button,
361
- .customforge-workbench[data-icons="hidden"] .customforge-workbench__layer-action,
362
- .customforge-workbench__icon-button.customforge-workbench__icon-missing,
363
- .customforge-workbench__layer-action.customforge-workbench__icon-missing {
364
- display: flex;
365
- width: auto;
366
- justify-content: center;
367
- gap: 0;
368
- padding: 0 8px;
369
- }
370
-
371
- .customforge-workbench[data-icons="hidden"] .customforge-workbench__input-shell input {
372
- padding-left: 11px !important;
373
- }
374
-
375
- .customforge-workbench__workspace {
376
- display: grid;
377
- grid-template-columns: minmax(560px, 1.08fr) minmax(460px, 0.92fr);
378
- min-width: 0;
379
- min-height: 0;
380
- }
381
-
382
- .customforge-workbench__panel {
383
- display: grid;
384
- min-width: 0;
385
- min-height: 0;
386
- overflow: hidden;
387
- background: var(--cfw-surface);
388
- }
389
-
390
- .customforge-workbench__panel--editor {
391
- grid-template-rows: auto auto minmax(0, 1fr);
392
- background: var(--cfw-surface-muted);
393
- border-right: 1px solid var(--cfw-line);
394
- }
395
-
396
- .customforge-workbench__panel--viewer {
397
- grid-template-rows: auto minmax(0, 1fr);
398
- }
399
-
400
- .customforge-workbench__panelbar {
401
- display: flex;
402
- align-items: center;
403
- justify-content: space-between;
404
- min-width: 0;
405
- min-height: 46px;
406
- padding: 0 12px 0 14px;
407
- background: var(--cfw-surface);
408
- border-bottom: 1px solid var(--cfw-line);
409
- }
410
-
411
- .customforge-workbench__panel-title {
412
- min-width: 0;
413
- gap: 8px;
414
- }
415
-
416
- .customforge-workbench__panel-kicker,
417
- .customforge-workbench__resolution,
418
- .customforge-workbench__eyebrow {
419
- color: var(--cfw-muted);
420
- font-size: 10px;
421
- font-weight: 650;
422
- text-transform: uppercase;
423
- }
424
-
425
- .customforge-workbench__panel-kicker,
426
- .customforge-workbench__eyebrow {
427
- color: var(--cfw-accent);
428
- }
429
-
430
- .customforge-workbench__panel-kicker {
431
- padding: 3px 6px;
432
- background: color-mix(in srgb, var(--cfw-accent) 9%, var(--cfw-surface));
433
- border-radius: 5px;
434
- }
435
-
436
- .customforge-workbench__panelbar h1,
437
- .customforge-workbench__panelbar h2 {
438
- overflow: hidden;
439
- margin: 0;
440
- font-size: 13px;
441
- font-weight: 650;
442
- line-height: 19px;
443
- text-overflow: ellipsis;
444
- white-space: nowrap;
445
- }
446
-
447
- .customforge-workbench__resolution {
448
- font-variant-numeric: tabular-nums;
449
- }
450
-
451
- .customforge-workbench__toolbar {
452
- display: flex;
453
- align-items: center;
454
- gap: 4px;
455
- min-width: 0;
456
- min-height: 52px;
457
- margin: 8px;
458
- padding: 7px 8px;
459
- overflow-x: auto;
460
- background: var(--cfw-surface);
461
- border: 1px solid var(--cfw-line);
462
- border-radius: 8px;
463
- box-shadow: 0 1px 2px rgb(24 34 44 / 4%);
464
- scrollbar-width: thin;
465
- }
466
-
467
- .customforge-workbench__tool-group {
468
- flex: 0 0 auto;
469
- gap: 3px;
470
- }
471
-
472
- .customforge-workbench__tool-button {
473
- flex: 0 0 auto;
474
- gap: 7px;
475
- padding: 0 10px;
476
- color: color-mix(in srgb, var(--cfw-ink) 88%, var(--cfw-muted));
477
- background: transparent;
478
- border-color: transparent;
479
- font-size: 11px;
480
- font-weight: 620;
481
- white-space: nowrap;
482
- }
483
-
484
- .customforge-workbench__icon-button,
485
- .customforge-workbench__layer-action {
486
- display: grid;
487
- width: 34px;
488
- padding: 0;
489
- color: var(--cfw-muted);
490
- background: transparent;
491
- place-items: center;
492
- }
493
-
494
- .customforge-workbench__icon-button {
495
- flex: 0 0 34px;
496
- }
497
-
498
- .customforge-workbench__separator {
499
- flex: 0 0 1px;
500
- width: 1px;
501
- height: 20px;
502
- margin: 0 3px;
503
- background: var(--cfw-line);
504
- }
505
-
506
- .customforge-workbench__editor-body {
507
- display: grid;
508
- grid-template-columns: minmax(0, 1fr) 248px;
509
- min-width: 0;
510
- min-height: 0;
511
- }
512
-
513
- .customforge-workbench[data-layers="hidden"] .customforge-workbench__editor-body {
514
- grid-template-columns: minmax(0, 1fr);
515
- }
516
-
517
- .customforge-workbench__editor-stage {
518
- position: relative;
519
- display: grid;
520
- min-width: 0;
521
- min-height: 0;
522
- overflow: hidden;
523
- background: var(--cfw-stage);
524
- place-items: center;
525
- }
526
-
527
- .customforge-workbench__editor-stage .customforge-design-canvas {
528
- max-width: calc(100% - 30px);
529
- max-height: calc(100% - 30px);
530
- border: 1px solid color-mix(in srgb, var(--cfw-ink) 12%, var(--cfw-line));
531
- border-radius: 5px;
532
- box-shadow: 0 8px 24px rgb(24 34 44 / 9%);
533
- }
534
-
535
- .customforge-workbench__layers {
536
- display: grid;
537
- grid-template-rows: 42px minmax(0, 1fr);
538
- min-width: 0;
539
- min-height: 0;
540
- background: var(--cfw-surface);
541
- border-left: 1px solid var(--cfw-line);
542
- }
543
-
544
- .customforge-workbench__layers-header {
545
- justify-content: space-between;
546
- gap: 10px;
547
- padding: 0 10px 0 12px;
548
- color: var(--cfw-ink);
549
- background: var(--cfw-surface);
550
- border-bottom: 1px solid var(--cfw-line);
551
- font-size: 11px;
552
- font-weight: 650;
553
- }
554
-
555
- .customforge-workbench__layers-header > span {
556
- gap: 7px;
557
- }
558
-
559
- .customforge-workbench__layers-header > span:last-child {
560
- justify-content: center;
561
- min-width: 20px;
562
- height: 20px;
563
- padding: 0 5px;
564
- color: var(--cfw-muted);
565
- background: var(--cfw-surface-muted);
566
- border: 0;
567
- border-radius: var(--cfw-control-radius);
568
- font-size: 10px;
569
- font-variant-numeric: tabular-nums;
570
- }
571
-
572
- .customforge-workbench__layer-list {
573
- min-height: 0;
574
- margin: 0;
575
- padding: 6px;
576
- overflow: auto;
577
- list-style: none;
578
- }
579
-
580
- .customforge-workbench__layer-empty {
581
- display: grid;
582
- min-height: 112px;
583
- padding: 18px;
584
- color: var(--cfw-muted);
585
- font-size: 10px;
586
- place-items: center;
587
- text-align: center;
588
- }
589
-
590
- .customforge-workbench__layer-item {
591
- position: relative;
592
- min-width: 0;
593
- min-height: 48px;
594
- margin-bottom: 2px;
595
- padding: 0 5px 0 8px;
596
- background: transparent;
597
- border: 1px solid transparent;
598
- border-radius: var(--cfw-control-radius);
599
- transition: background-color 160ms ease, border-color 160ms ease,
600
- box-shadow 160ms ease;
601
- }
602
-
603
- .customforge-workbench__layer-item[data-visible="false"] {
604
- color: var(--cfw-muted);
605
- opacity: 0.62;
606
- }
607
-
608
- .customforge-workbench__layer-item[data-role="background"] {
609
- background: color-mix(in srgb, var(--cfw-surface-muted) 72%, var(--cfw-surface));
610
- }
611
-
612
- .customforge-workbench__layer-item::before {
613
- position: absolute;
614
- top: 10px;
615
- bottom: 10px;
616
- left: 2px;
617
- width: 2px;
618
- background: var(--cfw-accent);
619
- border-radius: 2px;
620
- content: "";
621
- opacity: 0;
622
- pointer-events: none;
623
- transform: scaleY(0.3);
624
- transform-origin: center;
625
- }
626
-
627
- .customforge-workbench__layer-item[data-selected="true"] {
628
- background: color-mix(in srgb, var(--cfw-accent) 8%, var(--cfw-surface));
629
- border-color: color-mix(in srgb, var(--cfw-accent) 12%, var(--cfw-line));
630
- box-shadow: inset 2px 0 0 var(--cfw-accent);
631
- animation: customforge-layer-selection 220ms cubic-bezier(0.22, 1, 0.36, 1);
632
- }
633
-
634
- .customforge-workbench__layer-item[data-selected="true"]::before {
635
- animation: customforge-layer-indicator 220ms cubic-bezier(0.22, 1, 0.36, 1)
636
- both;
637
- }
638
-
639
- .customforge-workbench__layer-item.is-dragging {
640
- opacity: 0.42;
641
- }
642
-
643
- .customforge-workbench__layer-item.is-drag-target {
644
- box-shadow: inset 0 2px 0 var(--cfw-accent);
645
- }
646
-
647
- .customforge-workbench__layer-main {
648
- min-width: 0;
649
- flex: 1 1 auto;
650
- gap: 8px;
651
- height: 44px;
652
- padding: 0 3px;
653
- text-align: left;
654
- background: transparent;
655
- border: 0;
656
- cursor: pointer;
657
- }
658
-
659
- .customforge-workbench__layer-main > svg,
660
- .customforge-workbench__layer-main > img {
661
- flex: 0 0 16px;
662
- width: 16px;
663
- color: var(--cfw-accent);
664
- }
665
-
666
- .customforge-workbench__layer-copy {
667
- display: grid;
668
- min-width: 0;
669
- gap: 1px;
670
- }
671
-
672
- .customforge-workbench__layer-copy strong,
673
- .customforge-workbench__layer-copy span {
674
- overflow: hidden;
675
- text-overflow: ellipsis;
676
- white-space: nowrap;
677
- }
678
-
679
- .customforge-workbench__layer-copy strong {
680
- font-size: 11px;
681
- font-weight: 620;
682
- }
683
-
684
- .customforge-workbench__layer-copy span {
685
- color: var(--cfw-muted);
686
- font-size: 10px;
687
- text-transform: uppercase;
688
- }
689
-
690
- .customforge-workbench__layer-actions {
691
- position: absolute;
692
- right: 7px;
693
- gap: 2px;
694
- padding-left: 6px;
695
- opacity: 0;
696
- background: var(--cfw-surface);
697
- transition: opacity 140ms ease;
698
- }
699
-
700
- .customforge-workbench__layer-item:hover .customforge-workbench__layer-actions,
701
- .customforge-workbench__layer-item:focus-within .customforge-workbench__layer-actions,
702
- .customforge-workbench__layer-item[data-selected="true"]
703
- .customforge-workbench__layer-actions {
704
- opacity: 1;
705
- }
706
-
707
- .customforge-workbench__layer-item[data-role="background"]
708
- .customforge-workbench__layer-actions {
709
- background: color-mix(in srgb, var(--cfw-surface-muted) 70%, var(--cfw-surface));
710
- }
711
-
712
- .customforge-workbench__layer-item[data-selected="true"]
713
- .customforge-workbench__layer-actions {
714
- background: color-mix(in srgb, var(--cfw-accent) 8%, var(--cfw-surface));
715
- }
716
-
717
- .customforge-workbench__layer-action {
718
- width: 27px;
719
- min-height: 28px;
720
- border-radius: 6px;
721
- }
722
-
723
- .customforge-workbench__layer-action svg,
724
- .customforge-workbench__layer-action img {
725
- width: 14px;
726
- height: 14px;
727
- }
728
-
729
- .customforge-workbench[data-icons="hidden"] .customforge-workbench__layer-item {
730
- display: grid;
731
- padding-right: 9px;
732
- }
733
-
734
- .customforge-workbench[data-icons="hidden"] .customforge-workbench__layer-actions {
735
- position: static;
736
- flex-wrap: wrap;
737
- padding: 0 0 7px 24px;
738
- opacity: 1;
739
- background: transparent;
740
- }
741
-
742
- .customforge-workbench[data-icons="hidden"] .customforge-workbench__layer-action {
743
- min-height: 25px;
744
- padding: 0 5px;
745
- }
746
-
747
- .customforge-workbench__layer-name-input {
748
- min-width: 0;
749
- height: 31px;
750
- flex: 1 1 auto;
751
- padding: 0 7px;
752
- color: var(--cfw-ink);
753
- background: var(--cfw-surface);
754
- border: 1px solid var(--cfw-accent);
755
- border-radius: var(--cfw-control-radius);
756
- font-size: 11px;
757
- }
758
-
759
- .customforge-workbench__viewer-stage {
760
- position: relative;
761
- min-width: 0;
762
- min-height: 0;
763
- overflow: hidden;
764
- background: var(--cfw-stage);
765
- }
766
-
767
- .customforge-workbench__statusbar {
768
- z-index: 4;
769
- gap: 8px;
770
- min-height: 30px;
771
- padding: 0 12px;
772
- color: var(--cfw-muted);
773
- background: var(--cfw-surface);
774
- border-top: 1px solid var(--cfw-line);
775
- font-size: 10px;
776
- }
777
-
778
- .customforge-workbench__status-indicator {
779
- flex: 0 0 6px;
780
- width: 6px;
781
- height: 6px;
782
- background: #218c4a;
783
- border-radius: 50%;
784
- }
785
-
786
- .customforge-workbench[data-status="busy"]
787
- .customforge-workbench__status-indicator {
788
- background: #b7791f;
789
- }
790
-
791
- .customforge-workbench[data-status="error"]
792
- .customforge-workbench__status-indicator {
793
- background: var(--cfw-danger);
794
- }
795
-
796
- .customforge-workbench__object-count {
797
- margin-left: auto;
798
- font-variant-numeric: tabular-nums;
799
- white-space: nowrap;
800
- }
801
-
802
- .customforge-workbench__statusbar [data-role="status-label"] {
803
- overflow: hidden;
804
- text-overflow: ellipsis;
805
- white-space: nowrap;
806
- }
807
-
808
- .customforge-workbench__dialog {
809
- width: min(540px, calc(100vw - 32px));
810
- max-height: min(760px, calc(100vh - 32px));
811
- padding: 0;
812
- overflow: hidden;
813
- color: var(--cfw-ink);
814
- background: var(--cfw-surface);
815
- border: 1px solid var(--cfw-line);
816
- border-radius: 8px;
817
- box-shadow: 0 22px 64px rgb(17 24 30 / 20%);
818
- transform-origin: 50% 45%;
819
- }
820
-
821
- .customforge-workbench__dialog[open] {
822
- animation: customforge-dialog-enter 190ms cubic-bezier(0.22, 1, 0.36, 1) both;
823
- }
824
-
825
- .customforge-workbench__dialog[open][data-closing="true"] {
826
- pointer-events: none;
827
- animation: customforge-dialog-exit 160ms cubic-bezier(0.4, 0, 1, 1) both;
828
- }
829
-
830
- .customforge-workbench__dialog--text,
831
- .customforge-workbench__dialog--image {
832
- width: min(680px, calc(100vw - 32px));
833
- }
834
-
835
- .customforge-workbench__dialog::backdrop {
836
- background: rgb(17 24 30 / 38%);
837
- }
838
-
839
- .customforge-workbench__dialog[open]::backdrop {
840
- animation: customforge-backdrop-enter 190ms ease-out both;
841
- }
842
-
843
- .customforge-workbench__dialog[open][data-closing="true"]::backdrop {
844
- animation: customforge-backdrop-exit 160ms ease-in both;
845
- }
846
-
847
- .customforge-workbench__dialog > form {
848
- display: grid;
849
- grid-template-rows: auto minmax(0, 1fr) auto;
850
- max-height: min(760px, calc(100vh - 32px));
851
- margin: 0;
852
- }
853
-
854
- .customforge-workbench__dialog-header {
855
- justify-content: space-between;
856
- gap: 20px;
857
- min-width: 0;
858
- padding: 17px 18px;
859
- border-bottom: 1px solid var(--cfw-line);
860
- }
861
-
862
- .customforge-workbench__dialog-header > div {
863
- align-items: flex-start;
864
- flex-direction: column;
865
- min-width: 0;
866
- gap: 3px;
867
- }
868
-
869
- .customforge-workbench__dialog-header h2 {
870
- overflow: hidden;
871
- margin: 0;
872
- max-width: 100%;
873
- font-size: 17px;
874
- font-weight: 680;
875
- line-height: 23px;
876
- text-overflow: ellipsis;
877
- white-space: nowrap;
878
- }
879
-
880
- .customforge-workbench__dialog-body {
881
- min-height: 0;
882
- padding: 18px;
883
- overflow: auto;
884
- }
885
-
886
- .customforge-workbench__field {
887
- display: grid;
888
- min-width: 0;
889
- gap: 6px;
890
- color: color-mix(in srgb, var(--cfw-ink) 80%, var(--cfw-muted));
891
- font-size: 11px;
892
- font-weight: 620;
893
- }
894
-
895
- .customforge-workbench__field--prominent {
896
- margin-bottom: 18px;
897
- }
898
-
899
- .customforge-workbench__field input[type="text"],
900
- .customforge-workbench__field input[type="url"] {
901
- width: 100%;
902
- height: 40px;
903
- min-width: 0;
904
- padding: 0 11px;
905
- color: var(--cfw-ink);
906
- background: var(--cfw-surface);
907
- border: 1px solid var(--cfw-line);
908
- border-radius: var(--cfw-control-radius);
909
- font-size: 13px;
910
- font-weight: 450;
911
- transition: border-color 140ms ease, box-shadow 140ms ease;
912
- }
913
-
914
- .customforge-workbench__field input[type="text"]:hover,
915
- .customforge-workbench__field input[type="url"]:hover {
916
- border-color: color-mix(in srgb, var(--cfw-ink) 18%, var(--cfw-line));
917
- }
918
-
919
- .customforge-workbench__field input[type="text"]:focus,
920
- .customforge-workbench__field input[type="url"]:focus {
921
- border-color: color-mix(in srgb, var(--cfw-accent) 55%, var(--cfw-line));
922
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfw-accent) 9%, transparent);
923
- }
924
-
925
- .customforge-workbench__field input::placeholder {
926
- color: color-mix(in srgb, var(--cfw-muted) 72%, var(--cfw-surface));
927
- }
928
-
929
- .customforge-workbench__field--prominent input {
930
- height: 46px !important;
931
- font-size: 15px !important;
932
- }
933
-
934
- .customforge-workbench__fieldset {
935
- min-width: 0;
936
- margin: 0;
937
- padding: 0;
938
- border: 0;
939
- }
940
-
941
- .customforge-workbench__fieldset legend {
942
- margin-bottom: 8px;
943
- color: color-mix(in srgb, var(--cfw-ink) 80%, var(--cfw-muted));
944
- font-size: 11px;
945
- font-weight: 620;
946
- }
947
-
948
- .customforge-workbench__preset-grid {
949
- display: grid;
950
- min-width: 0;
951
- gap: 9px;
952
- }
953
-
954
- .customforge-workbench__preset-grid--text {
955
- grid-template-columns: repeat(2, minmax(0, 1fr));
956
- }
957
-
958
- .customforge-workbench__text-preset {
959
- display: grid;
960
- min-width: 0;
961
- min-height: 100px;
962
- padding: 12px;
963
- color: var(--cfw-ink);
964
- text-align: left;
965
- background: var(--cfw-surface);
966
- border: 1px solid var(--cfw-line);
967
- border-radius: var(--cfw-control-radius);
968
- cursor: pointer;
969
- transition: background-color 140ms ease, border-color 140ms ease,
970
- box-shadow 140ms ease;
971
- }
972
-
973
- .customforge-workbench__text-preset:hover {
974
- border-color: color-mix(in srgb, var(--cfw-accent) 34%, var(--cfw-line));
975
- box-shadow: 0 2px 8px rgb(24 34 44 / 6%);
976
- }
977
-
978
- .customforge-workbench__text-preset[data-selected="true"] {
979
- background: color-mix(in srgb, var(--cfw-accent) 8%, var(--cfw-surface));
980
- border-color: color-mix(in srgb, var(--cfw-accent) 28%, var(--cfw-line));
981
- box-shadow: 0 1px 3px rgb(24 34 44 / 5%);
982
- }
983
-
984
- .customforge-workbench__text-preview {
985
- align-self: center;
986
- overflow: hidden;
987
- font-size: 21px;
988
- line-height: 28px;
989
- text-align: center;
990
- text-overflow: ellipsis;
991
- white-space: nowrap;
992
- }
993
-
994
- .customforge-workbench__text-preset strong {
995
- align-self: end;
996
- overflow: hidden;
997
- color: var(--cfw-muted);
998
- font-family: var(--cfw-font-family);
999
- font-size: 10px;
1000
- font-weight: 650;
1001
- text-overflow: ellipsis;
1002
- white-space: nowrap;
1003
- }
1004
-
1005
- .customforge-workbench__color-field {
1006
- justify-content: space-between;
1007
- margin-top: 16px;
1008
- padding-top: 14px;
1009
- border-top: 1px solid var(--cfw-line);
1010
- }
1011
-
1012
- .customforge-workbench__color-field input {
1013
- width: 42px;
1014
- height: 30px;
1015
- padding: 2px;
1016
- background: var(--cfw-surface);
1017
- border: 1px solid var(--cfw-line);
1018
- border-radius: var(--cfw-control-radius);
1019
- cursor: pointer;
1020
- }
1021
-
1022
- .customforge-workbench__tabs {
1023
- gap: 2px;
1024
- width: max-content;
1025
- max-width: 100%;
1026
- margin-bottom: 16px;
1027
- padding: 3px;
1028
- overflow-x: auto;
1029
- background: var(--cfw-surface-muted);
1030
- border: 0;
1031
- border-radius: 8px;
1032
- }
1033
-
1034
- .customforge-workbench__tabs button {
1035
- flex: 0 0 auto;
1036
- min-height: 32px;
1037
- padding: 0 12px;
1038
- color: var(--cfw-muted);
1039
- background: transparent;
1040
- border: 0;
1041
- border-radius: 6px;
1042
- cursor: pointer;
1043
- font-size: 11px;
1044
- font-weight: 620;
1045
- white-space: nowrap;
1046
- }
1047
-
1048
- .customforge-workbench__tabs button[data-selected="true"] {
1049
- color: var(--cfw-ink);
1050
- background: var(--cfw-surface);
1051
- box-shadow: 0 1px 3px rgb(17 24 30 / 9%);
1052
- }
1053
-
1054
- .customforge-workbench__tab-panel {
1055
- min-height: 240px;
1056
- }
1057
-
1058
- .customforge-workbench__upload-field {
1059
- position: relative;
1060
- justify-content: center;
1061
- flex-direction: column;
1062
- width: 100%;
1063
- min-height: 240px;
1064
- gap: 7px;
1065
- padding: 18px;
1066
- overflow: hidden;
1067
- color: var(--cfw-ink);
1068
- background: var(--cfw-surface-muted);
1069
- border: 1px dashed color-mix(in srgb, var(--cfw-muted) 38%, var(--cfw-line));
1070
- border-radius: 8px;
1071
- cursor: pointer;
1072
- transition: background-color 140ms ease, border-color 140ms ease;
1073
- }
1074
-
1075
- .customforge-workbench__upload-field:hover {
1076
- background: color-mix(in srgb, var(--cfw-accent) 4%, var(--cfw-surface));
1077
- border-color: color-mix(in srgb, var(--cfw-accent) 42%, var(--cfw-line));
1078
- }
1079
-
1080
- .customforge-workbench__upload-icon {
1081
- display: grid;
1082
- width: 36px;
1083
- height: 36px;
1084
- margin-bottom: 2px;
1085
- color: var(--cfw-accent);
1086
- background: color-mix(in srgb, var(--cfw-accent) 9%, var(--cfw-surface));
1087
- border: 0;
1088
- border-radius: 8px;
1089
- place-items: center;
1090
- }
1091
-
1092
- .customforge-workbench__upload-field strong {
1093
- font-size: 12px;
1094
- }
1095
-
1096
- .customforge-workbench__upload-field > span:not(.customforge-workbench__upload-icon) {
1097
- max-width: 100%;
1098
- overflow: hidden;
1099
- color: var(--cfw-muted);
1100
- font-size: 10px;
1101
- text-overflow: ellipsis;
1102
- white-space: nowrap;
1103
- }
1104
-
1105
- .customforge-workbench__upload-field img {
1106
- position: absolute;
1107
- inset: 12px;
1108
- width: calc(100% - 24px);
1109
- height: calc(100% - 24px);
1110
- object-fit: contain;
1111
- background: var(--cfw-surface);
1112
- }
1113
-
1114
- .customforge-workbench__preset-grid--assets {
1115
- grid-template-columns: repeat(3, minmax(0, 1fr));
1116
- }
1117
-
1118
- .customforge-workbench__asset-preset {
1119
- display: grid;
1120
- min-width: 0;
1121
- padding: 0;
1122
- overflow: hidden;
1123
- color: var(--cfw-ink);
1124
- background: var(--cfw-surface);
1125
- border: 1px solid var(--cfw-line);
1126
- border-radius: var(--cfw-control-radius);
1127
- cursor: pointer;
1128
- text-align: left;
1129
- transition: background-color 140ms ease, border-color 140ms ease,
1130
- box-shadow 140ms ease;
1131
- }
1132
-
1133
- .customforge-workbench__asset-preset:hover {
1134
- border-color: color-mix(in srgb, var(--cfw-accent) 34%, var(--cfw-line));
1135
- box-shadow: 0 2px 8px rgb(24 34 44 / 6%);
1136
- }
1137
-
1138
- .customforge-workbench__asset-preset[data-selected="true"] {
1139
- background: color-mix(in srgb, var(--cfw-accent) 6%, var(--cfw-surface));
1140
- border-color: color-mix(in srgb, var(--cfw-accent) 28%, var(--cfw-line));
1141
- box-shadow: 0 1px 3px rgb(24 34 44 / 5%);
1142
- }
1143
-
1144
- .customforge-workbench__asset-preset img {
1145
- display: block;
1146
- width: 100%;
1147
- aspect-ratio: 4 / 3;
1148
- object-fit: cover;
1149
- background: var(--cfw-stage);
1150
- border-bottom: 1px solid var(--cfw-line);
1151
- }
1152
-
1153
- .customforge-workbench__asset-preset strong {
1154
- overflow: hidden;
1155
- padding: 9px 10px;
1156
- font-size: 10px;
1157
- font-weight: 620;
1158
- text-overflow: ellipsis;
1159
- white-space: nowrap;
1160
- }
1161
-
1162
- .customforge-workbench__preset-empty {
1163
- display: grid;
1164
- min-height: 220px;
1165
- margin: 0;
1166
- color: var(--cfw-muted);
1167
- background: var(--cfw-surface-muted);
1168
- border: 1px dashed var(--cfw-line);
1169
- border-radius: 8px;
1170
- font-size: 11px;
1171
- place-items: center;
1172
- }
1173
-
1174
- .customforge-workbench__form-fields {
1175
- display: grid;
1176
- gap: 14px;
1177
- }
1178
-
1179
- .customforge-workbench__input-shell {
1180
- position: relative;
1181
- }
1182
-
1183
- .customforge-workbench__input-shell svg,
1184
- .customforge-workbench__input-shell img {
1185
- position: absolute;
1186
- left: 11px;
1187
- color: var(--cfw-muted);
1188
- pointer-events: none;
1189
- }
1190
-
1191
- .customforge-workbench__input-shell input {
1192
- padding-left: 38px !important;
1193
- }
1194
-
1195
- .customforge-workbench__check-field {
1196
- gap: 8px;
1197
- color: color-mix(in srgb, var(--cfw-ink) 80%, var(--cfw-muted));
1198
- font-size: 12px;
1199
- font-weight: 600;
1200
- }
1201
-
1202
- .customforge-workbench__check-field input {
1203
- width: 16px;
1204
- height: 16px;
1205
- margin: 0;
1206
- accent-color: var(--cfw-accent);
1207
- }
1208
-
1209
- .customforge-workbench__dialog-actions {
1210
- justify-content: flex-end;
1211
- gap: 8px;
1212
- padding: 13px 18px;
1213
- background: var(--cfw-surface);
1214
- border-top: 1px solid var(--cfw-line);
1215
- }
1216
-
1217
- @container customforge-workbench (max-width: 1120px) {
1218
- .customforge-workbench__workspace {
1219
- grid-template-columns: 1fr;
1220
- overflow: auto;
1221
- }
1222
-
1223
- .customforge-workbench__panel {
1224
- min-height: 540px;
1225
- }
1226
-
1227
- .customforge-workbench__panel--editor {
1228
- border-right: 0;
1229
- border-bottom: 1px solid var(--cfw-line);
1230
- }
1231
- }
1232
-
1233
- @container customforge-workbench (max-width: 720px) {
1234
- .customforge-workbench__topbar {
1235
- gap: 8px;
1236
- padding: 8px 9px;
1237
- }
1238
-
1239
- .customforge-workbench__brand-logo {
1240
- flex-basis: 36px;
1241
- width: 36px;
1242
- height: 36px;
1243
- }
1244
-
1245
- .customforge-workbench__brand-copy span {
1246
- display: none;
1247
- }
1248
-
1249
- .customforge-workbench__brand-copy strong {
1250
- max-width: 110px;
1251
- }
1252
-
1253
- .customforge-workbench__global-actions {
1254
- gap: 4px;
1255
- }
1256
-
1257
- .customforge-workbench__topbar .customforge-workbench__button {
1258
- padding: 0 8px;
1259
- }
1260
-
1261
- .customforge-workbench__resolution {
1262
- display: none;
1263
- }
1264
-
1265
- .customforge-workbench__editor-body {
1266
- grid-template-columns: minmax(0, 1fr);
1267
- grid-template-rows: minmax(340px, 1fr) minmax(180px, auto);
1268
- }
1269
-
1270
- .customforge-workbench__layers {
1271
- max-height: 240px;
1272
- border-top: 1px solid var(--cfw-line);
1273
- border-left: 0;
1274
- }
1275
-
1276
- .customforge-workbench__layer-actions {
1277
- opacity: 1;
1278
- }
1279
-
1280
- .customforge-workbench__dialog-actions {
1281
- align-items: stretch;
1282
- flex-direction: column-reverse;
1283
- }
1284
-
1285
- .customforge-workbench__preset-grid--assets {
1286
- grid-template-columns: repeat(2, minmax(0, 1fr));
1287
- }
1288
- }
1289
-
1290
- @container customforge-workbench (max-width: 480px) {
1291
- .customforge-workbench__topbar {
1292
- align-items: stretch;
1293
- flex-direction: column;
1294
- }
1295
-
1296
- .customforge-workbench__global-actions {
1297
- display: grid;
1298
- grid-template-columns: repeat(2, minmax(0, 1fr));
1299
- }
1300
-
1301
- .customforge-workbench__brand-copy strong {
1302
- max-width: 220px;
1303
- }
1304
-
1305
- .customforge-workbench__preset-grid--text,
1306
- .customforge-workbench__preset-grid--assets {
1307
- grid-template-columns: minmax(0, 1fr);
1308
- }
1309
-
1310
- .customforge-workbench__tabs {
1311
- width: 100%;
1312
- }
1313
-
1314
- .customforge-workbench__tabs button {
1315
- flex: 1 0 auto;
1316
- }
1317
- }
1318
-
1319
- @media (prefers-reduced-motion: reduce) {
1320
- .customforge-workbench__layer-item,
1321
- .customforge-workbench__layer-item[data-selected="true"],
1322
- .customforge-workbench__layer-item[data-selected="true"]::before,
1323
- .customforge-workbench__dialog[open],
1324
- .customforge-workbench__dialog[open][data-closing="true"],
1325
- .customforge-workbench__dialog[open]::backdrop,
1326
- .customforge-workbench__dialog[open][data-closing="true"]::backdrop {
1327
- transition: none;
1328
- animation: none;
1329
- }
1330
- }
35
+ font-display: swap;
36
+ font-style: normal;
37
+ font-weight: 200 1000;
38
+ }
39
+
40
+ @keyframes customforge-dialog-enter {
41
+ from {
42
+ opacity: 0;
43
+ transform: translateY(10px) scale(0.985);
44
+ }
45
+
46
+ to {
47
+ opacity: 1;
48
+ transform: translateY(0) scale(1);
49
+ }
50
+ }
51
+
52
+ @keyframes customforge-dialog-exit {
53
+ from {
54
+ opacity: 1;
55
+ transform: translateY(0) scale(1);
56
+ }
57
+
58
+ to {
59
+ opacity: 0;
60
+ transform: translateY(6px) scale(0.99);
61
+ }
62
+ }
63
+
64
+ @keyframes customforge-backdrop-enter {
65
+ from {
66
+ background-color: rgb(17 24 30 / 0%);
67
+ }
68
+
69
+ to {
70
+ background-color: rgb(17 24 30 / 38%);
71
+ }
72
+ }
73
+
74
+ @keyframes customforge-backdrop-exit {
75
+ from {
76
+ background-color: rgb(17 24 30 / 38%);
77
+ }
78
+
79
+ to {
80
+ background-color: rgb(17 24 30 / 0%);
81
+ }
82
+ }
83
+
84
+ .customforge-workbench {
85
+ --cfw-ink: #18181b;
86
+ --cfw-muted: #71717a;
87
+ --cfw-line: #e4e4e7;
88
+ --cfw-line-strong: #d4d4d8;
89
+ --cfw-surface: #ffffff;
90
+ --cfw-surface-muted: #fafafa;
91
+ --cfw-stage: #f4f4f5;
92
+ --cfw-accent: #268a4b;
93
+ --cfw-accent-hover: #1f7640;
94
+ --cfw-accent-contrast: #ffffff;
95
+ --cfw-danger: #b42318;
96
+ --cfw-control-radius: 4px;
97
+ --cfw-font-family: "Nunito Sans", "Avenir Next", "Segoe UI Variable",
98
+ "Segoe UI", ui-sans-serif, system-ui, sans-serif;
99
+ container-name: customforge-workbench;
100
+ container-type: inline-size;
101
+ display: grid;
102
+ grid-template-rows: auto minmax(0, 1fr);
103
+ width: 100%;
104
+ min-width: 320px;
105
+ height: 100%;
106
+ min-height: 640px;
107
+ overflow: hidden;
108
+ color: var(--cfw-ink);
109
+ background: var(--cfw-stage);
110
+ border: 0;
111
+ font-family: var(--cfw-font-family);
112
+ font-size: 14px;
113
+ font-synthesis: none;
114
+ letter-spacing: 0;
115
+ scrollbar-color: color-mix(in srgb, var(--cfw-muted) 38%, transparent) transparent;
116
+ scrollbar-width: thin;
117
+ text-rendering: optimizeLegibility;
118
+ }
119
+
120
+ .customforge-workbench [hidden] {
121
+ display: none !important;
122
+ }
123
+
124
+ .customforge-workbench,
125
+ .customforge-workbench * {
126
+ box-sizing: border-box;
127
+ }
128
+
129
+ .customforge-workbench button,
130
+ .customforge-workbench input,
131
+ .customforge-workbench select,
132
+ .customforge-workbench textarea {
133
+ font: inherit;
134
+ letter-spacing: 0;
135
+ }
136
+
137
+ .customforge-workbench :where(button) {
138
+ color: inherit;
139
+ }
140
+
141
+ .customforge-workbench button:focus-visible,
142
+ .customforge-workbench input:focus-visible,
143
+ .customforge-workbench select:focus-visible,
144
+ .customforge-workbench__text-options > summary:focus-visible {
145
+ outline: 2px solid color-mix(in srgb, var(--cfw-accent) 38%, transparent);
146
+ outline-offset: 2px;
147
+ }
148
+
149
+ .customforge-workbench__topbar {
150
+ z-index: 5;
151
+ display: flex;
152
+ align-items: center;
153
+ justify-content: space-between;
154
+ gap: 20px;
155
+ min-height: 56px;
156
+ padding: 8px 16px;
157
+ background: var(--cfw-surface);
158
+ border-bottom: 1px solid var(--cfw-line);
159
+ }
160
+
161
+ .customforge-workbench__brand,
162
+ .customforge-workbench__brand-copy,
163
+ .customforge-workbench__global-actions,
164
+ .customforge-workbench__panel-title,
165
+ .customforge-workbench__tool-group,
166
+ .customforge-workbench__layers-header,
167
+ .customforge-workbench__layers-header > span,
168
+ .customforge-workbench__status,
169
+ .customforge-workbench__button,
170
+ .customforge-workbench__tool-button,
171
+ .customforge-workbench__layer-item,
172
+ .customforge-workbench__layer-main,
173
+ .customforge-workbench__layer-actions,
174
+ .customforge-workbench__dialog-header,
175
+ .customforge-workbench__dialog-header > div,
176
+ .customforge-workbench__dialog-actions,
177
+ .customforge-workbench__input-shell,
178
+ .customforge-workbench__check-field,
179
+ .customforge-workbench__color-field,
180
+ .customforge-workbench__tabs,
181
+ .customforge-workbench__upload-field {
182
+ display: flex;
183
+ align-items: center;
184
+ }
185
+
186
+ .customforge-workbench__brand {
187
+ min-width: 0;
188
+ gap: 10px;
189
+ }
190
+
191
+ .customforge-workbench__brand-logo {
192
+ display: block;
193
+ flex: 0 0 32px;
194
+ width: 32px;
195
+ height: 32px;
196
+ object-fit: contain;
197
+ }
198
+
199
+ .customforge-workbench__brand-copy {
200
+ align-items: flex-start;
201
+ flex-direction: column;
202
+ min-width: 0;
203
+ gap: 1px;
204
+ }
205
+
206
+ .customforge-workbench__brand-copy strong,
207
+ .customforge-workbench__brand-copy span {
208
+ overflow: hidden;
209
+ max-width: 300px;
210
+ text-overflow: ellipsis;
211
+ white-space: nowrap;
212
+ }
213
+
214
+ .customforge-workbench__brand-copy strong {
215
+ font-size: 15px;
216
+ font-weight: 700;
217
+ line-height: 18px;
218
+ }
219
+
220
+ .customforge-workbench__brand-copy span {
221
+ color: var(--cfw-muted);
222
+ font-size: 11px;
223
+ line-height: 13px;
224
+ }
225
+
226
+ .customforge-workbench__global-actions {
227
+ flex: 0 0 auto;
228
+ gap: 6px;
229
+ }
230
+
231
+ .customforge-workbench__global-actions
232
+ > .customforge-workbench__extension-slot {
233
+ display: contents;
234
+ }
235
+
236
+ .customforge-workbench__extension-slot {
237
+ display: flex;
238
+ align-items: center;
239
+ min-width: 0;
240
+ flex: 0 0 auto;
241
+ gap: 4px;
242
+ }
243
+
244
+ .customforge-workbench__extension-icon {
245
+ flex: 0 0 auto;
246
+ width: 18px;
247
+ height: 18px;
248
+ object-fit: contain;
249
+ }
250
+
251
+ .customforge-workbench__extension-button--layerActions
252
+ .customforge-workbench__extension-icon {
253
+ width: 12px;
254
+ height: 12px;
255
+ }
256
+
257
+ .customforge-workbench__extension-button[data-label-visible="false"] {
258
+ width: 34px;
259
+ justify-content: center;
260
+ padding-right: 0;
261
+ padding-left: 0;
262
+ }
263
+
264
+ .customforge-workbench__extension-button--layerActions[data-label-visible="false"] {
265
+ width: 20px;
266
+ }
267
+
268
+ .customforge-workbench__extension-button--layerActions[data-label-visible="true"] {
269
+ width: auto;
270
+ padding-right: 5px;
271
+ padding-left: 5px;
272
+ gap: 4px;
273
+ font-size: 10px;
274
+ }
275
+
276
+ .customforge-workbench__button,
277
+ .customforge-workbench__tool-button,
278
+ .customforge-workbench__icon-button,
279
+ .customforge-workbench__layer-action {
280
+ min-height: 34px;
281
+ border: 1px solid transparent;
282
+ border-radius: var(--cfw-control-radius);
283
+ cursor: pointer;
284
+ transition: background-color 140ms ease, border-color 140ms ease,
285
+ box-shadow 140ms ease, color 140ms ease;
286
+ }
287
+
288
+ .customforge-workbench__button {
289
+ justify-content: center;
290
+ gap: 7px;
291
+ min-width: 0;
292
+ padding: 0 13px;
293
+ font-size: 13px;
294
+ font-weight: 650;
295
+ white-space: nowrap;
296
+ }
297
+
298
+ .customforge-workbench__button--primary {
299
+ color: var(--cfw-accent-contrast);
300
+ background: var(--cfw-accent);
301
+ border-color: var(--cfw-accent);
302
+ box-shadow: none;
303
+ }
304
+
305
+ .customforge-workbench__button--primary:hover:not(:disabled) {
306
+ background: var(--cfw-accent-hover);
307
+ border-color: var(--cfw-accent-hover);
308
+ box-shadow: none;
309
+ }
310
+
311
+ .customforge-workbench__button--primary:active:not(:disabled) {
312
+ background: var(--cfw-accent-hover);
313
+ box-shadow: none;
314
+ }
315
+
316
+ .customforge-workbench .customforge-workbench__extension-button--primary {
317
+ color: var(--cfw-accent-contrast);
318
+ background: var(--cfw-accent);
319
+ border-color: var(--cfw-accent);
320
+ }
321
+
322
+ .customforge-workbench
323
+ .customforge-workbench__extension-button--primary:hover:not(:disabled),
324
+ .customforge-workbench
325
+ .customforge-workbench__extension-button--primary:active:not(:disabled) {
326
+ color: var(--cfw-accent-contrast);
327
+ background: var(--cfw-accent-hover);
328
+ border-color: var(--cfw-accent-hover);
329
+ }
330
+
331
+ .customforge-workbench .customforge-workbench__extension-button--secondary {
332
+ color: var(--cfw-ink);
333
+ background: var(--cfw-surface);
334
+ border-color: var(--cfw-line);
335
+ }
336
+
337
+ .customforge-workbench
338
+ .customforge-workbench__extension-button--secondary:hover:not(:disabled) {
339
+ color: var(--cfw-ink);
340
+ background: var(--cfw-surface-muted);
341
+ border-color: var(--cfw-line-strong);
342
+ }
343
+
344
+ .customforge-workbench .customforge-workbench__extension-button--plain {
345
+ color: color-mix(in srgb, var(--cfw-ink) 88%, var(--cfw-muted));
346
+ background: transparent;
347
+ border-color: transparent;
348
+ }
349
+
350
+ .customforge-workbench
351
+ .customforge-workbench__extension-button--plain:hover:not(:disabled) {
352
+ color: var(--cfw-ink);
353
+ background: var(--cfw-surface-muted);
354
+ border-color: transparent;
355
+ }
356
+
357
+ .customforge-workbench .customforge-workbench__extension-button--danger {
358
+ color: var(--cfw-danger);
359
+ background: transparent;
360
+ border-color: transparent;
361
+ }
362
+
363
+ .customforge-workbench
364
+ .customforge-workbench__extension-button--danger:hover:not(:disabled) {
365
+ color: var(--cfw-danger);
366
+ background: color-mix(in srgb, var(--cfw-danger) 8%, var(--cfw-surface));
367
+ border-color: transparent;
368
+ }
369
+
370
+ .customforge-workbench__button--secondary {
371
+ color: var(--cfw-ink);
372
+ background: var(--cfw-surface);
373
+ border-color: var(--cfw-line);
374
+ box-shadow: none;
375
+ }
376
+
377
+ .customforge-workbench__button--secondary:hover:not(:disabled) {
378
+ color: var(--cfw-ink);
379
+ background: var(--cfw-surface-muted);
380
+ border-color: color-mix(in srgb, var(--cfw-ink) 18%, var(--cfw-line));
381
+ }
382
+
383
+ .customforge-workbench__button--secondary:active:not(:disabled),
384
+ .customforge-workbench__tool-button:active:not(:disabled),
385
+ .customforge-workbench__icon-button:active:not(:disabled),
386
+ .customforge-workbench__layer-action:active:not(:disabled) {
387
+ background: var(--cfw-surface-muted);
388
+ }
389
+
390
+ .customforge-workbench__tool-button:hover:not(:disabled),
391
+ .customforge-workbench__icon-button:hover:not(:disabled),
392
+ .customforge-workbench__layer-action:hover:not(:disabled) {
393
+ color: var(--cfw-ink);
394
+ background: var(--cfw-surface-muted);
395
+ border-color: transparent;
396
+ }
397
+
398
+ .customforge-workbench__icon-button--danger:hover:not(:disabled),
399
+ .customforge-workbench__layer-action[data-layer-action="remove"]:hover:not(:disabled) {
400
+ color: var(--cfw-danger);
401
+ background: color-mix(in srgb, var(--cfw-danger) 8%, var(--cfw-surface));
402
+ border-color: transparent;
403
+ }
404
+
405
+ .customforge-workbench__button:disabled,
406
+ .customforge-workbench__tool-button:disabled,
407
+ .customforge-workbench__icon-button:disabled,
408
+ .customforge-workbench__layer-action:disabled {
409
+ color: color-mix(in srgb, var(--cfw-muted) 48%, var(--cfw-surface));
410
+ cursor: not-allowed;
411
+ }
412
+
413
+ .customforge-workbench__button--primary:disabled {
414
+ color: var(--cfw-accent-contrast);
415
+ }
416
+
417
+ .customforge-workbench .customforge-workbench__extension-button--primary:disabled {
418
+ color: var(--cfw-accent-contrast);
419
+ opacity: 0.55;
420
+ }
421
+
422
+ .customforge-workbench__button[data-loading="true"] [data-icon-slot="upload"] {
423
+ display: none;
424
+ }
425
+
426
+ .customforge-workbench__button[data-loading="true"]::before {
427
+ width: 14px;
428
+ height: 14px;
429
+ border: 2px solid color-mix(in srgb, currentcolor 32%, transparent);
430
+ border-top-color: currentcolor;
431
+ border-radius: 50%;
432
+ animation: customforge-workbench-spin 700ms linear infinite;
433
+ content: "";
434
+ }
435
+
436
+ .customforge-workbench__extension-button[data-loading="true"]
437
+ .customforge-workbench__extension-icon {
438
+ display: none;
439
+ }
440
+
441
+ .customforge-workbench__extension-button[data-loading="true"]::before {
442
+ width: 14px;
443
+ height: 14px;
444
+ flex: 0 0 14px;
445
+ border: 2px solid color-mix(in srgb, currentcolor 32%, transparent);
446
+ border-top-color: currentcolor;
447
+ border-radius: 50%;
448
+ animation: customforge-workbench-spin 700ms linear infinite;
449
+ content: "";
450
+ }
451
+
452
+ @keyframes customforge-workbench-spin {
453
+ to {
454
+ transform: rotate(360deg);
455
+ }
456
+ }
457
+
458
+ .customforge-workbench__custom-icon,
459
+ .customforge-workbench [data-icon-slot] {
460
+ flex: 0 0 auto;
461
+ width: 18px;
462
+ height: 18px;
463
+ object-fit: contain;
464
+ }
465
+
466
+ .customforge-workbench__icon-label {
467
+ position: absolute;
468
+ width: 1px;
469
+ height: 1px;
470
+ padding: 0;
471
+ overflow: hidden;
472
+ clip: rect(0, 0, 0, 0);
473
+ white-space: nowrap;
474
+ border: 0;
475
+ }
476
+
477
+ .customforge-workbench[data-icons="hidden"] .customforge-workbench__icon-label,
478
+ .customforge-workbench__icon-missing .customforge-workbench__icon-label {
479
+ position: static;
480
+ width: auto;
481
+ height: auto;
482
+ overflow: visible;
483
+ clip: auto;
484
+ font-size: 10px;
485
+ white-space: nowrap;
486
+ }
487
+
488
+ .customforge-workbench[data-icons="hidden"] .customforge-workbench__icon-button,
489
+ .customforge-workbench[data-icons="hidden"] .customforge-workbench__layer-action,
490
+ .customforge-workbench__icon-button.customforge-workbench__icon-missing,
491
+ .customforge-workbench__layer-action.customforge-workbench__icon-missing {
492
+ display: flex;
493
+ width: auto;
494
+ justify-content: center;
495
+ gap: 0;
496
+ padding: 0 8px;
497
+ }
498
+
499
+ .customforge-workbench[data-icons="hidden"] .customforge-workbench__input-shell input {
500
+ padding-left: 11px !important;
501
+ }
502
+
503
+ .customforge-workbench__workspace {
504
+ display: grid;
505
+ grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
506
+ min-width: 0;
507
+ min-height: 0;
508
+ }
509
+
510
+ .customforge-workbench__panel {
511
+ display: grid;
512
+ min-width: 0;
513
+ min-height: 0;
514
+ overflow: hidden;
515
+ background: var(--cfw-surface);
516
+ }
517
+
518
+ .customforge-workbench__panel--editor {
519
+ container-name: customforge-editor-panel;
520
+ container-type: inline-size;
521
+ grid-template-areas:
522
+ "editor-header editor-toolbar"
523
+ "editor-body editor-body";
524
+ grid-template-columns: auto minmax(0, 1fr);
525
+ grid-template-rows: auto minmax(0, 1fr);
526
+ background: var(--cfw-surface-muted);
527
+ border-right: 1px solid var(--cfw-line);
528
+ }
529
+
530
+ .customforge-workbench__panel--editor > .customforge-workbench__panelbar {
531
+ grid-area: editor-header;
532
+ border-bottom: 1px solid var(--cfw-line);
533
+ }
534
+
535
+ .customforge-workbench__panel--editor > .customforge-workbench__toolbar {
536
+ grid-area: editor-toolbar;
537
+ border-bottom: 1px solid var(--cfw-line);
538
+ }
539
+
540
+ .customforge-workbench__panel--editor > .customforge-workbench__editor-body {
541
+ grid-area: editor-body;
542
+ }
543
+
544
+ .customforge-workbench__panel--viewer {
545
+ grid-template-rows: 52px minmax(0, 1fr);
546
+ }
547
+
548
+ .customforge-workbench__panelbar {
549
+ display: flex;
550
+ align-items: center;
551
+ justify-content: space-between;
552
+ min-width: 0;
553
+ min-height: 52px;
554
+ padding: 0 12px 0 14px;
555
+ background: var(--cfw-surface);
556
+ border-bottom: 1px solid var(--cfw-line);
557
+ }
558
+
559
+ .customforge-workbench__panel-title {
560
+ min-width: 0;
561
+ gap: 8px;
562
+ }
563
+
564
+ .customforge-workbench__panel-kicker,
565
+ .customforge-workbench__resolution,
566
+ .customforge-workbench__eyebrow {
567
+ color: var(--cfw-muted);
568
+ font-size: 11px;
569
+ font-weight: 650;
570
+ text-transform: uppercase;
571
+ }
572
+
573
+ .customforge-workbench__panel-kicker,
574
+ .customforge-workbench__eyebrow {
575
+ color: var(--cfw-accent);
576
+ }
577
+
578
+ .customforge-workbench__panel-kicker {
579
+ min-width: 20px;
580
+ padding: 0;
581
+ color: var(--cfw-accent-hover);
582
+ background: transparent;
583
+ border: 0;
584
+ border-radius: 0;
585
+ line-height: 20px;
586
+ text-align: left;
587
+ }
588
+
589
+ .customforge-workbench__panelbar h1,
590
+ .customforge-workbench__panelbar h2 {
591
+ overflow: hidden;
592
+ margin: 0;
593
+ font-size: 14px;
594
+ font-weight: 700;
595
+ line-height: 20px;
596
+ text-overflow: ellipsis;
597
+ white-space: nowrap;
598
+ }
599
+
600
+ .customforge-workbench__resolution {
601
+ font-variant-numeric: tabular-nums;
602
+ }
603
+
604
+ .customforge-workbench__toolbar {
605
+ position: relative;
606
+ z-index: 4;
607
+ display: flex;
608
+ align-items: center;
609
+ gap: 4px;
610
+ min-width: 0;
611
+ min-height: 52px;
612
+ margin: 0;
613
+ padding: 8px 10px 8px 4px;
614
+ overflow: visible;
615
+ background: var(--cfw-surface);
616
+ border: 0;
617
+ border-bottom: 1px solid var(--cfw-line);
618
+ border-radius: 0;
619
+ box-shadow: none;
620
+ }
621
+
622
+ .customforge-workbench__tool-group {
623
+ flex: 0 0 auto;
624
+ gap: 3px;
625
+ }
626
+
627
+ .customforge-workbench__tool-button {
628
+ flex: 0 0 auto;
629
+ gap: 7px;
630
+ padding: 0 10px;
631
+ color: color-mix(in srgb, var(--cfw-ink) 88%, var(--cfw-muted));
632
+ background: transparent;
633
+ border-color: transparent;
634
+ font-size: 13px;
635
+ font-weight: 650;
636
+ white-space: nowrap;
637
+ }
638
+
639
+ .customforge-workbench__icon-button,
640
+ .customforge-workbench__layer-action {
641
+ display: grid;
642
+ width: 34px;
643
+ padding: 0;
644
+ color: var(--cfw-muted);
645
+ background: transparent;
646
+ place-items: center;
647
+ }
648
+
649
+ .customforge-workbench__icon-button {
650
+ flex: 0 0 34px;
651
+ }
652
+
653
+ .customforge-workbench__separator {
654
+ flex: 0 0 1px;
655
+ width: 1px;
656
+ height: 20px;
657
+ margin: 0 3px;
658
+ background: var(--cfw-line);
659
+ }
660
+
661
+ .customforge-workbench__text-toolbar,
662
+ .customforge-workbench__image-toolbar {
663
+ display: flex;
664
+ align-items: center;
665
+ flex: 0 0 auto;
666
+ min-width: 0;
667
+ min-height: 34px;
668
+ gap: 4px;
669
+ margin: 0;
670
+ padding: 0;
671
+ color: var(--cfw-ink);
672
+ background: transparent;
673
+ }
674
+
675
+ .customforge-workbench__format-group,
676
+ .customforge-workbench__format-color,
677
+ .customforge-workbench__format-metric {
678
+ display: flex;
679
+ align-items: center;
680
+ }
681
+
682
+ .customforge-workbench__format-group {
683
+ flex: 0 0 auto;
684
+ gap: 1px;
685
+ }
686
+
687
+ .customforge-workbench__text-options {
688
+ position: relative;
689
+ flex: 0 0 auto;
690
+ }
691
+
692
+ .customforge-workbench__text-options > summary {
693
+ list-style: none;
694
+ }
695
+
696
+ .customforge-workbench__text-options > summary::-webkit-details-marker {
697
+ display: none;
698
+ }
699
+
700
+ .customforge-workbench__text-options[open] > summary {
701
+ color: var(--cfw-ink);
702
+ background: var(--cfw-surface-muted);
703
+ border-color: var(--cfw-line-strong);
704
+ }
705
+
706
+ .customforge-workbench__text-options:not([open])
707
+ > .customforge-workbench__text-options-panel {
708
+ display: none;
709
+ }
710
+
711
+ .customforge-workbench__text-options-panel {
712
+ position: absolute;
713
+ z-index: 8;
714
+ top: calc(100% + 9px);
715
+ right: 0;
716
+ display: grid;
717
+ width: 276px;
718
+ gap: 8px;
719
+ padding: 9px;
720
+ background: var(--cfw-surface);
721
+ border: 1px solid var(--cfw-line);
722
+ border-radius: 6px;
723
+ box-shadow: 0 14px 34px rgb(24 24 27 / 14%);
724
+ }
725
+
726
+ .customforge-workbench__text-options-row {
727
+ display: flex;
728
+ align-items: center;
729
+ min-width: 0;
730
+ gap: 4px;
731
+ }
732
+
733
+ .customforge-workbench__text-options-row--metrics {
734
+ padding-top: 0;
735
+ }
736
+
737
+ .customforge-workbench__text-color-palette {
738
+ display: grid;
739
+ grid-template-columns: repeat(7, 24px);
740
+ justify-content: space-between;
741
+ gap: 7px 6px;
742
+ padding: 9px 0;
743
+ border-top: 1px solid var(--cfw-line);
744
+ border-bottom: 1px solid var(--cfw-line);
745
+ }
746
+
747
+ .customforge-workbench__text-color-swatch {
748
+ position: relative;
749
+ width: 24px;
750
+ height: 24px;
751
+ padding: 0;
752
+ background: var(--cfw-text-swatch);
753
+ border: 1px solid color-mix(in srgb, var(--cfw-ink) 22%, var(--cfw-line));
754
+ border-radius: 5px;
755
+ cursor: pointer;
756
+ }
757
+
758
+ .customforge-workbench__text-color-swatch:hover:not(:disabled) {
759
+ border-color: var(--cfw-accent);
760
+ }
761
+
762
+ .customforge-workbench__text-color-swatch:disabled {
763
+ cursor: not-allowed;
764
+ opacity: 0.48;
765
+ }
766
+
767
+ .customforge-workbench__text-color-swatch[aria-pressed="true"] {
768
+ border-color: var(--cfw-surface);
769
+ box-shadow:
770
+ 0 0 0 2px var(--cfw-surface),
771
+ 0 0 0 4px var(--cfw-accent);
772
+ }
773
+
774
+ .customforge-workbench__format-button,
775
+ .customforge-workbench__font-select,
776
+ .customforge-workbench__format-number input,
777
+ .customforge-workbench__format-metric input,
778
+ .customforge-workbench__background-color {
779
+ height: 32px;
780
+ color: var(--cfw-ink);
781
+ background: var(--cfw-surface);
782
+ border: 1px solid transparent;
783
+ border-radius: var(--cfw-control-radius);
784
+ }
785
+
786
+ .customforge-workbench__format-button {
787
+ display: grid;
788
+ flex: 0 0 32px;
789
+ width: 32px;
790
+ padding: 0;
791
+ color: var(--cfw-muted);
792
+ cursor: pointer;
793
+ place-items: center;
794
+ transition: background-color 120ms ease, border-color 120ms ease,
795
+ color 120ms ease;
796
+ }
797
+
798
+ .customforge-workbench__format-button:hover:not(:disabled) {
799
+ color: var(--cfw-ink);
800
+ background: var(--cfw-surface-muted);
801
+ }
802
+
803
+ .customforge-workbench__format-button[aria-pressed="true"] {
804
+ color: var(--cfw-ink);
805
+ background: var(--cfw-surface-muted);
806
+ border-color: var(--cfw-line-strong);
807
+ }
808
+
809
+ .customforge-workbench__format-button[aria-pressed="mixed"] {
810
+ color: var(--cfw-muted);
811
+ background: var(--cfw-surface-muted);
812
+ border-color: var(--cfw-line);
813
+ }
814
+
815
+ .customforge-workbench__format-button:disabled,
816
+ .customforge-workbench__font-select:disabled,
817
+ .customforge-workbench__format-number input:disabled,
818
+ .customforge-workbench__format-metric input:disabled,
819
+ .customforge-workbench__format-color input:disabled,
820
+ .customforge-workbench__background-color:disabled {
821
+ color: color-mix(in srgb, var(--cfw-muted) 48%, var(--cfw-surface));
822
+ cursor: not-allowed;
823
+ opacity: 0.58;
824
+ }
825
+
826
+ .customforge-workbench__format-button svg,
827
+ .customforge-workbench__format-button img,
828
+ .customforge-workbench__format-color svg,
829
+ .customforge-workbench__format-color img,
830
+ .customforge-workbench__format-metric svg,
831
+ .customforge-workbench__format-metric img {
832
+ width: 16px;
833
+ height: 16px;
834
+ }
835
+
836
+ .customforge-workbench__font-select {
837
+ flex: 0 0 142px;
838
+ width: 142px;
839
+ padding: 0 25px 0 9px;
840
+ border-color: var(--cfw-line);
841
+ font-size: 12px;
842
+ cursor: pointer;
843
+ }
844
+
845
+ .customforge-workbench__format-number {
846
+ display: block;
847
+ flex: 0 0 58px;
848
+ }
849
+
850
+ .customforge-workbench__format-number input {
851
+ width: 58px;
852
+ padding: 0 4px 0 8px;
853
+ border-color: var(--cfw-line);
854
+ font-size: 12px;
855
+ font-variant-numeric: tabular-nums;
856
+ }
857
+
858
+ .customforge-workbench__format-separator {
859
+ flex: 0 0 1px;
860
+ width: 1px;
861
+ height: 20px;
862
+ margin: 0 3px;
863
+ background: var(--cfw-line);
864
+ }
865
+
866
+ .customforge-workbench__format-color {
867
+ flex: 0 0 auto;
868
+ height: 32px;
869
+ gap: 5px;
870
+ padding: 0 6px;
871
+ color: var(--cfw-muted);
872
+ border: 1px solid transparent;
873
+ border-radius: var(--cfw-control-radius);
874
+ cursor: pointer;
875
+ }
876
+
877
+ .customforge-workbench__format-color:hover {
878
+ color: var(--cfw-ink);
879
+ background: var(--cfw-surface-muted);
880
+ }
881
+
882
+ .customforge-workbench__format-color input,
883
+ .customforge-workbench__background-color {
884
+ flex: 0 0 20px;
885
+ width: 20px;
886
+ height: 20px;
887
+ padding: 1px;
888
+ background: var(--cfw-surface);
889
+ border-color: var(--cfw-line);
890
+ cursor: pointer;
891
+ }
892
+
893
+ .customforge-workbench__background-color {
894
+ margin-left: 2px;
895
+ }
896
+
897
+ .customforge-workbench__format-metric {
898
+ flex: 0 0 auto;
899
+ height: 32px;
900
+ gap: 4px;
901
+ overflow: hidden;
902
+ padding-left: 6px;
903
+ color: var(--cfw-muted);
904
+ background: var(--cfw-surface);
905
+ border: 1px solid var(--cfw-line);
906
+ border-radius: var(--cfw-control-radius);
907
+ }
908
+
909
+ .customforge-workbench__format-metric input {
910
+ width: 56px;
911
+ height: 100%;
912
+ padding: 0 3px 0 4px;
913
+ background: transparent;
914
+ border: 0;
915
+ border-radius: 0;
916
+ font-size: 11px;
917
+ font-variant-numeric: tabular-nums;
918
+ }
919
+
920
+ .customforge-workbench[data-icons="hidden"]
921
+ .customforge-workbench__format-button {
922
+ display: flex;
923
+ width: auto;
924
+ flex-basis: auto;
925
+ justify-content: center;
926
+ padding: 0 7px;
927
+ }
928
+
929
+ .customforge-workbench[data-icons="hidden"]
930
+ .customforge-workbench__format-button
931
+ .customforge-workbench__icon-label {
932
+ position: static;
933
+ width: auto;
934
+ height: auto;
935
+ overflow: visible;
936
+ clip: auto;
937
+ font-size: 11px;
938
+ white-space: nowrap;
939
+ }
940
+
941
+ .customforge-workbench__layers-toggle {
942
+ border-radius: 4px;
943
+ }
944
+
945
+ .customforge-workbench__layers-toggle[aria-expanded="true"],
946
+ .customforge-workbench__layers-toggle[aria-expanded="true"]:hover:not(:disabled) {
947
+ color: var(--cfw-ink);
948
+ background: var(--cfw-surface-muted);
949
+ border-color: var(--cfw-line-strong);
950
+ box-shadow: none;
951
+ }
952
+
953
+ .customforge-workbench__layer-count {
954
+ display: inline-flex;
955
+ align-items: center;
956
+ min-width: auto;
957
+ height: 16px;
958
+ padding: 0 0 0 6px;
959
+ color: var(--cfw-muted);
960
+ background: transparent;
961
+ border-left: 1px solid var(--cfw-line);
962
+ border-radius: 0;
963
+ font-size: 11px;
964
+ font-variant-numeric: tabular-nums;
965
+ line-height: 16px;
966
+ }
967
+
968
+ .customforge-workbench__layers-toggle[aria-expanded="true"]
969
+ .customforge-workbench__layer-count {
970
+ color: var(--cfw-muted);
971
+ background: transparent;
972
+ border-left-color: var(--cfw-line-strong);
973
+ }
974
+
975
+ .customforge-workbench__editor-body {
976
+ display: grid;
977
+ grid-template-areas: "layers editor-stage";
978
+ grid-template-columns: 0 minmax(0, 1fr);
979
+ min-width: 0;
980
+ min-height: 0;
981
+ }
982
+
983
+ .customforge-workbench[data-layers-expanded="true"]
984
+ .customforge-workbench__editor-body {
985
+ grid-template-columns: 200px minmax(0, 1fr);
986
+ }
987
+
988
+ .customforge-workbench[data-toolbar="hidden"][data-layers="visible"]
989
+ .customforge-workbench__editor-body {
990
+ grid-template-columns: 200px minmax(0, 1fr);
991
+ }
992
+
993
+ .customforge-workbench__editor-stage {
994
+ position: relative;
995
+ display: grid;
996
+ grid-area: editor-stage;
997
+ min-width: 0;
998
+ min-height: 0;
999
+ overflow: hidden;
1000
+ background: var(--cfw-stage);
1001
+ place-items: center;
1002
+ }
1003
+
1004
+ .customforge-workbench__editor-stage .customforge-design-canvas {
1005
+ max-width: 100%;
1006
+ max-height: 100%;
1007
+ isolation: isolate;
1008
+ background-color: var(--cfw-surface);
1009
+ background-image:
1010
+ linear-gradient(
1011
+ color-mix(in srgb, var(--cfw-ink) 5%, transparent) 1px,
1012
+ transparent 1px
1013
+ ),
1014
+ linear-gradient(
1015
+ 90deg,
1016
+ color-mix(in srgb, var(--cfw-ink) 5%, transparent) 1px,
1017
+ transparent 1px
1018
+ );
1019
+ background-position: -1px -1px;
1020
+ background-size: 24px 24px;
1021
+ border: 1px solid color-mix(in srgb, var(--cfw-ink) 10%, var(--cfw-line));
1022
+ border-radius: 4px;
1023
+ box-shadow: 0 3px 10px rgb(24 24 27 / 6%);
1024
+ }
1025
+
1026
+ .customforge-workbench__editor-stage
1027
+ .customforge-design-canvas
1028
+ :is(.lower-canvas, .upper-canvas, .customforge-uv-layout) {
1029
+ border-radius: 3px;
1030
+ }
1031
+
1032
+ .customforge-workbench__layers {
1033
+ display: grid;
1034
+ grid-area: layers;
1035
+ grid-template-rows: 44px minmax(0, 1fr);
1036
+ min-width: 0;
1037
+ min-height: 0;
1038
+ overflow: hidden;
1039
+ visibility: hidden;
1040
+ background: var(--cfw-surface);
1041
+ border-right: 0 solid var(--cfw-line);
1042
+ }
1043
+
1044
+ .customforge-workbench[data-layers-expanded="true"]
1045
+ .customforge-workbench__layers {
1046
+ visibility: visible;
1047
+ border-right-width: 1px;
1048
+ }
1049
+
1050
+ .customforge-workbench[data-toolbar="hidden"][data-layers="visible"]
1051
+ .customforge-workbench__layers {
1052
+ visibility: visible;
1053
+ border-right-width: 1px;
1054
+ }
1055
+
1056
+ .customforge-workbench__layers-header {
1057
+ justify-content: space-between;
1058
+ gap: 10px;
1059
+ padding: 0 10px 0 12px;
1060
+ color: var(--cfw-ink);
1061
+ background: var(--cfw-surface-muted);
1062
+ border-bottom: 1px solid var(--cfw-line);
1063
+ font-size: 13px;
1064
+ font-weight: 700;
1065
+ }
1066
+
1067
+ .customforge-workbench__layers-header > span {
1068
+ gap: 7px;
1069
+ }
1070
+
1071
+ .customforge-workbench__layer-list {
1072
+ min-height: 0;
1073
+ margin: 0;
1074
+ padding: 7px 6px;
1075
+ overflow: auto;
1076
+ list-style: none;
1077
+ }
1078
+
1079
+ .customforge-workbench__layer-empty {
1080
+ display: grid;
1081
+ min-height: 112px;
1082
+ padding: 18px;
1083
+ color: var(--cfw-muted);
1084
+ font-size: 12px;
1085
+ place-items: center;
1086
+ text-align: center;
1087
+ }
1088
+
1089
+ .customforge-workbench__layer-item {
1090
+ position: relative;
1091
+ min-width: 0;
1092
+ min-height: 48px;
1093
+ margin-bottom: 3px;
1094
+ padding: 0 5px 0 8px;
1095
+ background: transparent;
1096
+ border: 1px solid transparent;
1097
+ border-radius: var(--cfw-control-radius);
1098
+ transition: background-color 160ms ease, border-color 160ms ease,
1099
+ box-shadow 160ms ease;
1100
+ }
1101
+
1102
+ .customforge-workbench__layer-item[data-visible="false"] {
1103
+ color: var(--cfw-muted);
1104
+ opacity: 0.62;
1105
+ }
1106
+
1107
+ .customforge-workbench__layer-item[data-role="background"] {
1108
+ background: var(--cfw-surface-muted);
1109
+ }
1110
+
1111
+ .customforge-workbench__layer-item::before {
1112
+ position: absolute;
1113
+ top: 10px;
1114
+ bottom: 10px;
1115
+ left: 2px;
1116
+ width: 2px;
1117
+ background: var(--cfw-accent);
1118
+ border-radius: 0;
1119
+ content: "";
1120
+ opacity: 0;
1121
+ pointer-events: none;
1122
+ transform: scaleY(0.3);
1123
+ transform-origin: center;
1124
+ }
1125
+
1126
+ .customforge-workbench__layer-item[data-selected="true"] {
1127
+ background: var(--cfw-surface-muted);
1128
+ border-color: var(--cfw-line-strong);
1129
+ box-shadow: inset 2px 0 0 var(--cfw-accent);
1130
+ }
1131
+
1132
+ .customforge-workbench__layer-item[data-selected="true"]::before {
1133
+ opacity: 1;
1134
+ transform: scaleY(1);
1135
+ }
1136
+
1137
+ .customforge-workbench__layer-item.is-dragging {
1138
+ opacity: 0.42;
1139
+ }
1140
+
1141
+ .customforge-workbench__layer-item.is-drag-target {
1142
+ box-shadow: inset 0 2px 0 var(--cfw-accent);
1143
+ }
1144
+
1145
+ .customforge-workbench__layer-main {
1146
+ width: 100%;
1147
+ min-width: 0;
1148
+ flex: 1 1 auto;
1149
+ gap: 8px;
1150
+ height: 44px;
1151
+ padding: 0 3px;
1152
+ text-align: left;
1153
+ background: transparent;
1154
+ border: 0;
1155
+ cursor: pointer;
1156
+ }
1157
+
1158
+ .customforge-workbench__layer-main > svg,
1159
+ .customforge-workbench__layer-main > img {
1160
+ flex: 0 0 16px;
1161
+ width: 16px;
1162
+ color: var(--cfw-muted);
1163
+ }
1164
+
1165
+ .customforge-workbench__layer-item[data-selected="true"]
1166
+ .customforge-workbench__layer-main > svg,
1167
+ .customforge-workbench__layer-item[data-selected="true"]
1168
+ .customforge-workbench__layer-main > img {
1169
+ color: var(--cfw-accent-hover);
1170
+ }
1171
+
1172
+ .customforge-workbench__layer-copy {
1173
+ display: grid;
1174
+ min-width: 0;
1175
+ gap: 1px;
1176
+ }
1177
+
1178
+ .customforge-workbench__layer-copy strong,
1179
+ .customforge-workbench__layer-copy span {
1180
+ overflow: hidden;
1181
+ text-overflow: ellipsis;
1182
+ white-space: nowrap;
1183
+ }
1184
+
1185
+ .customforge-workbench__layer-copy strong {
1186
+ font-size: 12px;
1187
+ font-weight: 650;
1188
+ }
1189
+
1190
+ .customforge-workbench__layer-copy span {
1191
+ padding-right: var(--cfw-layer-action-width, 112px);
1192
+ color: var(--cfw-muted);
1193
+ font-size: 12px;
1194
+ text-transform: uppercase;
1195
+ }
1196
+
1197
+ .customforge-workbench__layer-actions {
1198
+ position: absolute;
1199
+ right: 7px;
1200
+ bottom: 3px;
1201
+ height: 20px;
1202
+ gap: 1px;
1203
+ padding: 0;
1204
+ opacity: 0;
1205
+ visibility: hidden;
1206
+ background: transparent;
1207
+ pointer-events: none;
1208
+ transition: opacity 140ms ease, visibility 0s linear 140ms;
1209
+ }
1210
+
1211
+ .customforge-workbench__layer-item:hover .customforge-workbench__layer-actions,
1212
+ .customforge-workbench__layer-item:focus-within .customforge-workbench__layer-actions,
1213
+ .customforge-workbench__layer-item[data-selected="true"]
1214
+ .customforge-workbench__layer-actions {
1215
+ opacity: 1;
1216
+ visibility: visible;
1217
+ pointer-events: auto;
1218
+ transition-delay: 0s;
1219
+ }
1220
+
1221
+ .customforge-workbench__layer-action {
1222
+ width: 20px;
1223
+ min-height: 20px;
1224
+ border-radius: var(--cfw-control-radius);
1225
+ }
1226
+
1227
+ .customforge-workbench
1228
+ .customforge-workbench__layer-action
1229
+ [data-icon-slot] {
1230
+ width: 12px;
1231
+ height: 12px;
1232
+ }
1233
+
1234
+ .customforge-workbench[data-icons="hidden"] .customforge-workbench__layer-item {
1235
+ display: grid;
1236
+ grid-template-rows: auto auto;
1237
+ padding-right: 9px;
1238
+ }
1239
+
1240
+ .customforge-workbench[data-icons="hidden"]
1241
+ .customforge-workbench__layer-copy span {
1242
+ padding-right: 0;
1243
+ }
1244
+
1245
+ .customforge-workbench[data-icons="hidden"] .customforge-workbench__layer-actions {
1246
+ height: auto;
1247
+ flex-wrap: wrap;
1248
+ padding: 0 0 7px 24px;
1249
+ opacity: 1;
1250
+ visibility: visible;
1251
+ background: transparent;
1252
+ pointer-events: auto;
1253
+ }
1254
+
1255
+ .customforge-workbench[data-icons="hidden"] .customforge-workbench__layer-action {
1256
+ min-height: 25px;
1257
+ padding: 0 5px;
1258
+ }
1259
+
1260
+ .customforge-workbench__layer-name-input {
1261
+ min-width: 0;
1262
+ height: 31px;
1263
+ flex: 1 1 auto;
1264
+ padding: 0 7px;
1265
+ color: var(--cfw-ink);
1266
+ background: var(--cfw-surface);
1267
+ border: 1px solid var(--cfw-accent);
1268
+ border-radius: var(--cfw-control-radius);
1269
+ font-size: 11px;
1270
+ }
1271
+
1272
+ .customforge-workbench__viewer-stage {
1273
+ position: relative;
1274
+ min-width: 0;
1275
+ min-height: 0;
1276
+ overflow: hidden;
1277
+ background: color-mix(in srgb, var(--cfw-stage) 90%, #dfe4e6);
1278
+ }
1279
+
1280
+ .customforge-workbench__viewer-host {
1281
+ position: absolute;
1282
+ inset: 0;
1283
+ }
1284
+
1285
+ .customforge-workbench__status {
1286
+ position: absolute;
1287
+ z-index: 2;
1288
+ bottom: 14px;
1289
+ left: 14px;
1290
+ gap: 8px;
1291
+ max-width: calc(100% - 28px);
1292
+ min-height: 28px;
1293
+ padding: 0 10px;
1294
+ color: var(--cfw-muted);
1295
+ background: color-mix(in srgb, var(--cfw-surface) 90%, transparent);
1296
+ border: 1px solid color-mix(in srgb, var(--cfw-line) 82%, transparent);
1297
+ border-radius: 6px;
1298
+ font-size: 12px;
1299
+ }
1300
+
1301
+ .customforge-workbench__status-indicator {
1302
+ flex: 0 0 6px;
1303
+ width: 6px;
1304
+ height: 6px;
1305
+ background: #218c4a;
1306
+ border-radius: 50%;
1307
+ }
1308
+
1309
+ .customforge-workbench[data-status="busy"]
1310
+ .customforge-workbench__status-indicator {
1311
+ background: #b7791f;
1312
+ }
1313
+
1314
+ .customforge-workbench[data-status="error"]
1315
+ .customforge-workbench__status-indicator {
1316
+ background: var(--cfw-danger);
1317
+ }
1318
+
1319
+ .customforge-workbench[data-status="error"] .customforge-workbench__status {
1320
+ color: var(--cfw-danger);
1321
+ border-color: color-mix(in srgb, var(--cfw-danger) 24%, var(--cfw-line));
1322
+ }
1323
+
1324
+ .customforge-workbench__status [data-role="status-label"] {
1325
+ overflow: hidden;
1326
+ text-overflow: ellipsis;
1327
+ white-space: nowrap;
1328
+ }
1329
+
1330
+ .customforge-workbench__dialog {
1331
+ width: min(540px, calc(100vw - 32px));
1332
+ max-height: min(760px, calc(100vh - 32px));
1333
+ padding: 0;
1334
+ overflow: hidden;
1335
+ color: var(--cfw-ink);
1336
+ background: var(--cfw-surface);
1337
+ border: 1px solid var(--cfw-line);
1338
+ border-radius: 6px;
1339
+ box-shadow: 0 20px 48px rgb(24 24 27 / 18%);
1340
+ transform-origin: 50% 45%;
1341
+ }
1342
+
1343
+ .customforge-workbench__dialog[open] {
1344
+ animation: customforge-dialog-enter 190ms cubic-bezier(0.22, 1, 0.36, 1) both;
1345
+ }
1346
+
1347
+ .customforge-workbench__dialog[open][data-closing="true"] {
1348
+ pointer-events: none;
1349
+ animation: customforge-dialog-exit 160ms cubic-bezier(0.4, 0, 1, 1) both;
1350
+ }
1351
+
1352
+ .customforge-workbench__dialog--text,
1353
+ .customforge-workbench__dialog--image {
1354
+ width: min(680px, calc(100vw - 32px));
1355
+ }
1356
+
1357
+ .customforge-workbench__dialog::backdrop {
1358
+ background: rgb(17 24 30 / 38%);
1359
+ }
1360
+
1361
+ .customforge-workbench__dialog[open]::backdrop {
1362
+ animation: customforge-backdrop-enter 190ms ease-out both;
1363
+ }
1364
+
1365
+ .customforge-workbench__dialog[open][data-closing="true"]::backdrop {
1366
+ animation: customforge-backdrop-exit 160ms ease-in both;
1367
+ }
1368
+
1369
+ .customforge-workbench__dialog > form {
1370
+ display: grid;
1371
+ grid-template-rows: auto minmax(0, 1fr) auto;
1372
+ max-height: min(760px, calc(100vh - 32px));
1373
+ margin: 0;
1374
+ }
1375
+
1376
+ .customforge-workbench__dialog-header {
1377
+ justify-content: space-between;
1378
+ gap: 20px;
1379
+ min-width: 0;
1380
+ padding: 17px 18px;
1381
+ background: var(--cfw-surface);
1382
+ border-bottom: 1px solid var(--cfw-line);
1383
+ }
1384
+
1385
+ .customforge-workbench__dialog-header > div {
1386
+ align-items: flex-start;
1387
+ flex-direction: column;
1388
+ min-width: 0;
1389
+ gap: 3px;
1390
+ }
1391
+
1392
+ .customforge-workbench__dialog-header h2 {
1393
+ overflow: hidden;
1394
+ margin: 0;
1395
+ max-width: 100%;
1396
+ font-size: 17px;
1397
+ font-weight: 700;
1398
+ line-height: 23px;
1399
+ text-overflow: ellipsis;
1400
+ white-space: nowrap;
1401
+ }
1402
+
1403
+ .customforge-workbench__dialog-body {
1404
+ min-height: 0;
1405
+ padding: 18px;
1406
+ background: var(--cfw-surface);
1407
+ overflow: auto;
1408
+ }
1409
+
1410
+ .customforge-workbench__product-form {
1411
+ display: grid;
1412
+ gap: 18px;
1413
+ }
1414
+
1415
+ .customforge-workbench__product-source-switch {
1416
+ display: flex;
1417
+ align-items: center;
1418
+ gap: 20px;
1419
+ min-height: 37px;
1420
+ border-bottom: 1px solid var(--cfw-line);
1421
+ }
1422
+
1423
+ .customforge-workbench__product-source-switch button {
1424
+ position: relative;
1425
+ align-self: stretch;
1426
+ padding: 0 1px;
1427
+ color: var(--cfw-muted);
1428
+ background: transparent;
1429
+ border: 0;
1430
+ cursor: pointer;
1431
+ font-size: 13px;
1432
+ font-weight: 600;
1433
+ }
1434
+
1435
+ .customforge-workbench__product-source-switch button::after {
1436
+ position: absolute;
1437
+ right: 0;
1438
+ bottom: -1px;
1439
+ left: 0;
1440
+ height: 2px;
1441
+ background: var(--cfw-accent);
1442
+ content: "";
1443
+ opacity: 0;
1444
+ }
1445
+
1446
+ .customforge-workbench__product-source-switch button:hover,
1447
+ .customforge-workbench__product-source-switch button[data-selected="true"] {
1448
+ color: var(--cfw-ink);
1449
+ }
1450
+
1451
+ .customforge-workbench__product-source-switch button[data-selected="true"]::after {
1452
+ opacity: 1;
1453
+ }
1454
+
1455
+ .customforge-workbench__product-file-picker {
1456
+ position: relative;
1457
+ display: grid;
1458
+ grid-template-columns: auto minmax(0, 1fr);
1459
+ align-items: center;
1460
+ gap: 12px;
1461
+ min-height: 64px;
1462
+ padding: 11px;
1463
+ background: var(--cfw-surface-muted);
1464
+ border: 1px dashed var(--cfw-line-strong);
1465
+ border-radius: var(--cfw-control-radius);
1466
+ cursor: pointer;
1467
+ }
1468
+
1469
+ .customforge-workbench__product-file-picker:hover {
1470
+ border-color: color-mix(in srgb, var(--cfw-ink) 26%, var(--cfw-line));
1471
+ }
1472
+
1473
+ .customforge-workbench__product-file-picker:focus-within {
1474
+ border-color: var(--cfw-accent);
1475
+ outline: 2px solid color-mix(in srgb, var(--cfw-accent) 18%, transparent);
1476
+ outline-offset: 2px;
1477
+ }
1478
+
1479
+ .customforge-workbench__product-file-picker input {
1480
+ position: absolute;
1481
+ inset: 0;
1482
+ width: 100%;
1483
+ height: 100%;
1484
+ cursor: pointer;
1485
+ opacity: 0;
1486
+ }
1487
+
1488
+ .customforge-workbench__product-file-picker input:focus-visible {
1489
+ outline: 0;
1490
+ }
1491
+
1492
+ .customforge-workbench__product-file-command {
1493
+ display: inline-flex;
1494
+ align-items: center;
1495
+ min-height: 32px;
1496
+ padding: 0 11px;
1497
+ color: var(--cfw-ink);
1498
+ background: var(--cfw-surface);
1499
+ border: 1px solid var(--cfw-line-strong);
1500
+ border-radius: var(--cfw-control-radius);
1501
+ font-size: 12px;
1502
+ font-weight: 600;
1503
+ }
1504
+
1505
+ .customforge-workbench__product-file-picker small {
1506
+ overflow: hidden;
1507
+ color: var(--cfw-muted);
1508
+ font-size: 12px;
1509
+ font-weight: 400;
1510
+ text-overflow: ellipsis;
1511
+ white-space: nowrap;
1512
+ }
1513
+
1514
+ .customforge-workbench__product-options {
1515
+ border-top: 1px solid var(--cfw-line);
1516
+ }
1517
+
1518
+ .customforge-workbench__product-options > summary {
1519
+ display: flex;
1520
+ align-items: center;
1521
+ justify-content: space-between;
1522
+ gap: 12px;
1523
+ min-height: 40px;
1524
+ padding: 12px 2px 0 0;
1525
+ color: var(--cfw-muted);
1526
+ cursor: pointer;
1527
+ font-size: 12px;
1528
+ font-weight: 600;
1529
+ list-style: none;
1530
+ }
1531
+
1532
+ .customforge-workbench__product-options > summary::-webkit-details-marker {
1533
+ display: none;
1534
+ }
1535
+
1536
+ .customforge-workbench__product-options > summary svg {
1537
+ flex: 0 0 16px;
1538
+ width: 16px;
1539
+ height: 16px;
1540
+ transition: transform 140ms ease;
1541
+ }
1542
+
1543
+ .customforge-workbench__product-options[open] > summary {
1544
+ color: var(--cfw-ink);
1545
+ }
1546
+
1547
+ .customforge-workbench__product-options[open] > summary svg {
1548
+ transform: rotate(180deg);
1549
+ }
1550
+
1551
+ .customforge-workbench__product-options-fields {
1552
+ display: grid;
1553
+ gap: 16px;
1554
+ padding-top: 12px;
1555
+ }
1556
+
1557
+ .customforge-workbench__field {
1558
+ display: grid;
1559
+ min-width: 0;
1560
+ gap: 6px;
1561
+ color: color-mix(in srgb, var(--cfw-ink) 80%, var(--cfw-muted));
1562
+ font-size: 12px;
1563
+ font-weight: 620;
1564
+ }
1565
+
1566
+ .customforge-workbench__field--prominent {
1567
+ margin-bottom: 18px;
1568
+ }
1569
+
1570
+ .customforge-workbench__field input[type="text"],
1571
+ .customforge-workbench__field input[type="url"] {
1572
+ width: 100%;
1573
+ height: 40px;
1574
+ min-width: 0;
1575
+ padding: 0 11px;
1576
+ color: var(--cfw-ink);
1577
+ background: var(--cfw-surface);
1578
+ border: 1px solid var(--cfw-line);
1579
+ border-radius: var(--cfw-control-radius);
1580
+ font-size: 13px;
1581
+ font-weight: 450;
1582
+ transition: border-color 140ms ease, box-shadow 140ms ease;
1583
+ }
1584
+
1585
+ .customforge-workbench__field input[type="text"]:hover,
1586
+ .customforge-workbench__field input[type="url"]:hover {
1587
+ border-color: color-mix(in srgb, var(--cfw-ink) 18%, var(--cfw-line));
1588
+ }
1589
+
1590
+ .customforge-workbench__field input[type="text"]:focus,
1591
+ .customforge-workbench__field input[type="url"]:focus {
1592
+ border-color: color-mix(in srgb, var(--cfw-accent) 55%, var(--cfw-line));
1593
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfw-accent) 9%, transparent);
1594
+ }
1595
+
1596
+ .customforge-workbench__field input::placeholder {
1597
+ color: color-mix(in srgb, var(--cfw-muted) 72%, var(--cfw-surface));
1598
+ }
1599
+
1600
+ .customforge-workbench__field--prominent input {
1601
+ height: 46px !important;
1602
+ font-size: 15px !important;
1603
+ }
1604
+
1605
+ .customforge-workbench__fieldset {
1606
+ min-width: 0;
1607
+ margin: 0;
1608
+ padding: 0;
1609
+ border: 0;
1610
+ }
1611
+
1612
+ .customforge-workbench__fieldset legend {
1613
+ margin-bottom: 8px;
1614
+ color: color-mix(in srgb, var(--cfw-ink) 80%, var(--cfw-muted));
1615
+ font-size: 12px;
1616
+ font-weight: 620;
1617
+ }
1618
+
1619
+ .customforge-workbench__preset-grid {
1620
+ display: grid;
1621
+ min-width: 0;
1622
+ gap: 9px;
1623
+ }
1624
+
1625
+ .customforge-workbench__preset-grid--text {
1626
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1627
+ }
1628
+
1629
+ .customforge-workbench__text-preset {
1630
+ display: grid;
1631
+ min-width: 0;
1632
+ min-height: 100px;
1633
+ padding: 12px;
1634
+ color: var(--cfw-ink);
1635
+ text-align: left;
1636
+ background: var(--cfw-surface);
1637
+ border: 1px solid var(--cfw-line);
1638
+ border-radius: var(--cfw-control-radius);
1639
+ cursor: pointer;
1640
+ transition: background-color 140ms ease, border-color 140ms ease,
1641
+ box-shadow 140ms ease;
1642
+ }
1643
+
1644
+ .customforge-workbench__text-preset:hover {
1645
+ border-color: color-mix(in srgb, var(--cfw-accent) 34%, var(--cfw-line));
1646
+ box-shadow: 0 2px 8px rgb(24 34 44 / 6%);
1647
+ }
1648
+
1649
+ .customforge-workbench__text-preset[data-selected="true"] {
1650
+ background: var(--cfw-surface-muted);
1651
+ border-color: var(--cfw-accent);
1652
+ box-shadow: none;
1653
+ }
1654
+
1655
+ .customforge-workbench__text-preview {
1656
+ align-self: center;
1657
+ overflow: hidden;
1658
+ font-size: 21px;
1659
+ line-height: 28px;
1660
+ text-align: center;
1661
+ text-overflow: ellipsis;
1662
+ white-space: nowrap;
1663
+ }
1664
+
1665
+ .customforge-workbench__text-preset strong {
1666
+ align-self: end;
1667
+ overflow: hidden;
1668
+ color: var(--cfw-muted);
1669
+ font-family: var(--cfw-font-family);
1670
+ font-size: 12px;
1671
+ font-weight: 650;
1672
+ text-overflow: ellipsis;
1673
+ white-space: nowrap;
1674
+ }
1675
+
1676
+ .customforge-workbench__color-field {
1677
+ justify-content: space-between;
1678
+ margin-top: 16px;
1679
+ padding-top: 14px;
1680
+ border-top: 1px solid var(--cfw-line);
1681
+ }
1682
+
1683
+ .customforge-workbench__color-field input {
1684
+ width: 42px;
1685
+ height: 30px;
1686
+ padding: 2px;
1687
+ background: var(--cfw-surface);
1688
+ border: 1px solid var(--cfw-line);
1689
+ border-radius: var(--cfw-control-radius);
1690
+ cursor: pointer;
1691
+ }
1692
+
1693
+ .customforge-workbench__tabs {
1694
+ gap: 2px;
1695
+ width: max-content;
1696
+ max-width: 100%;
1697
+ margin-bottom: 16px;
1698
+ padding: 3px;
1699
+ overflow-x: auto;
1700
+ background: var(--cfw-surface-muted);
1701
+ border: 0;
1702
+ border-radius: 4px;
1703
+ }
1704
+
1705
+ .customforge-workbench__tabs button {
1706
+ flex: 0 0 auto;
1707
+ min-height: 32px;
1708
+ padding: 0 12px;
1709
+ color: var(--cfw-muted);
1710
+ background: transparent;
1711
+ border: 0;
1712
+ border-radius: 3px;
1713
+ cursor: pointer;
1714
+ font-size: 11px;
1715
+ font-weight: 620;
1716
+ white-space: nowrap;
1717
+ }
1718
+
1719
+ .customforge-workbench__tabs button[data-selected="true"] {
1720
+ color: var(--cfw-ink);
1721
+ background: var(--cfw-surface);
1722
+ box-shadow: 0 1px 2px rgb(24 24 27 / 8%);
1723
+ }
1724
+
1725
+ .customforge-workbench__tab-panel {
1726
+ min-height: 240px;
1727
+ }
1728
+
1729
+ .customforge-workbench__upload-field {
1730
+ position: relative;
1731
+ justify-content: center;
1732
+ flex-direction: column;
1733
+ width: 100%;
1734
+ min-height: 240px;
1735
+ gap: 7px;
1736
+ padding: 18px;
1737
+ overflow: hidden;
1738
+ color: var(--cfw-ink);
1739
+ background: var(--cfw-surface-muted);
1740
+ border: 1px dashed color-mix(in srgb, var(--cfw-muted) 38%, var(--cfw-line));
1741
+ border-radius: 4px;
1742
+ cursor: pointer;
1743
+ transition: background-color 140ms ease, border-color 140ms ease;
1744
+ }
1745
+
1746
+ .customforge-workbench__upload-field:hover {
1747
+ background: var(--cfw-surface-muted);
1748
+ border-color: color-mix(in srgb, var(--cfw-accent) 42%, var(--cfw-line));
1749
+ }
1750
+
1751
+ .customforge-workbench__upload-icon {
1752
+ display: grid;
1753
+ width: 36px;
1754
+ height: 36px;
1755
+ margin-bottom: 2px;
1756
+ color: var(--cfw-accent);
1757
+ background: var(--cfw-surface);
1758
+ border: 1px solid var(--cfw-line);
1759
+ border-radius: 4px;
1760
+ place-items: center;
1761
+ }
1762
+
1763
+ .customforge-workbench__upload-field strong {
1764
+ font-size: 12px;
1765
+ }
1766
+
1767
+ .customforge-workbench__upload-field > span:not(.customforge-workbench__upload-icon) {
1768
+ max-width: 100%;
1769
+ overflow: hidden;
1770
+ color: var(--cfw-muted);
1771
+ font-size: 12px;
1772
+ text-overflow: ellipsis;
1773
+ white-space: nowrap;
1774
+ }
1775
+
1776
+ .customforge-workbench__upload-field img {
1777
+ position: absolute;
1778
+ inset: 12px;
1779
+ width: calc(100% - 24px);
1780
+ height: calc(100% - 24px);
1781
+ object-fit: contain;
1782
+ background: var(--cfw-surface);
1783
+ }
1784
+
1785
+ .customforge-workbench__preset-grid--assets {
1786
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1787
+ }
1788
+
1789
+ .customforge-workbench__asset-preset {
1790
+ display: grid;
1791
+ min-width: 0;
1792
+ padding: 0;
1793
+ overflow: hidden;
1794
+ color: var(--cfw-ink);
1795
+ background: var(--cfw-surface);
1796
+ border: 1px solid var(--cfw-line);
1797
+ border-radius: var(--cfw-control-radius);
1798
+ cursor: pointer;
1799
+ text-align: left;
1800
+ transition: background-color 140ms ease, border-color 140ms ease,
1801
+ box-shadow 140ms ease;
1802
+ }
1803
+
1804
+ .customforge-workbench__asset-preset:hover {
1805
+ border-color: color-mix(in srgb, var(--cfw-accent) 34%, var(--cfw-line));
1806
+ box-shadow: 0 2px 8px rgb(24 34 44 / 6%);
1807
+ }
1808
+
1809
+ .customforge-workbench__asset-preset[data-selected="true"] {
1810
+ background: var(--cfw-surface-muted);
1811
+ border-color: var(--cfw-accent);
1812
+ box-shadow: none;
1813
+ }
1814
+
1815
+ .customforge-workbench__asset-preset img {
1816
+ display: block;
1817
+ width: 100%;
1818
+ aspect-ratio: 4 / 3;
1819
+ object-fit: cover;
1820
+ background: var(--cfw-stage);
1821
+ border-bottom: 1px solid var(--cfw-line);
1822
+ }
1823
+
1824
+ .customforge-workbench__asset-preset strong {
1825
+ overflow: hidden;
1826
+ padding: 9px 10px;
1827
+ font-size: 11px;
1828
+ font-weight: 620;
1829
+ text-overflow: ellipsis;
1830
+ white-space: nowrap;
1831
+ }
1832
+
1833
+ .customforge-workbench__preset-empty {
1834
+ display: grid;
1835
+ min-height: 220px;
1836
+ margin: 0;
1837
+ color: var(--cfw-muted);
1838
+ background: var(--cfw-surface-muted);
1839
+ border: 1px dashed var(--cfw-line);
1840
+ border-radius: 4px;
1841
+ font-size: 12px;
1842
+ place-items: center;
1843
+ }
1844
+
1845
+ .customforge-workbench__form-fields {
1846
+ display: grid;
1847
+ gap: 14px;
1848
+ }
1849
+
1850
+ .customforge-workbench__input-shell {
1851
+ position: relative;
1852
+ }
1853
+
1854
+ .customforge-workbench__input-shell svg,
1855
+ .customforge-workbench__input-shell img {
1856
+ position: absolute;
1857
+ left: 11px;
1858
+ color: var(--cfw-muted);
1859
+ pointer-events: none;
1860
+ }
1861
+
1862
+ .customforge-workbench__input-shell input {
1863
+ padding-left: 38px !important;
1864
+ }
1865
+
1866
+ .customforge-workbench__check-field {
1867
+ gap: 8px;
1868
+ color: color-mix(in srgb, var(--cfw-ink) 80%, var(--cfw-muted));
1869
+ font-size: 12px;
1870
+ font-weight: 600;
1871
+ }
1872
+
1873
+ .customforge-workbench__check-field input {
1874
+ width: 16px;
1875
+ height: 16px;
1876
+ margin: 0;
1877
+ accent-color: var(--cfw-accent);
1878
+ }
1879
+
1880
+ .customforge-workbench__dialog-actions {
1881
+ justify-content: flex-end;
1882
+ gap: 8px;
1883
+ padding: 13px 18px;
1884
+ background: var(--cfw-surface);
1885
+ border-top: 1px solid var(--cfw-line);
1886
+ }
1887
+
1888
+ .customforge-workbench__field > small,
1889
+ .customforge-workbench__check-field small {
1890
+ color: var(--cfw-muted);
1891
+ font-size: 11px;
1892
+ font-weight: 400;
1893
+ line-height: 1.45;
1894
+ }
1895
+
1896
+ .customforge-workbench__check-field > span {
1897
+ display: grid;
1898
+ gap: 2px;
1899
+ }
1900
+
1901
+ .customforge-workbench__check-field strong {
1902
+ color: var(--cfw-ink);
1903
+ font-size: 12px;
1904
+ font-weight: 600;
1905
+ }
1906
+
1907
+ .customforge-workbench__product-options .customforge-workbench__check-field {
1908
+ align-items: flex-start;
1909
+ }
1910
+
1911
+ .customforge-workbench__product-options
1912
+ .customforge-workbench__check-field input {
1913
+ margin-top: 2px;
1914
+ }
1915
+
1916
+ @container customforge-editor-panel (max-width: 1040px) {
1917
+ .customforge-workbench__panel--editor > .customforge-workbench__panelbar {
1918
+ padding-right: 8px;
1919
+ padding-left: 10px;
1920
+ }
1921
+
1922
+ .customforge-workbench__resolution {
1923
+ display: none;
1924
+ }
1925
+
1926
+ .customforge-workbench__toolbar {
1927
+ gap: 2px;
1928
+ padding-right: 6px;
1929
+ padding-left: 2px;
1930
+ }
1931
+
1932
+ .customforge-workbench__tool-group,
1933
+ .customforge-workbench__text-toolbar,
1934
+ .customforge-workbench__image-toolbar,
1935
+ .customforge-workbench__extension-slot {
1936
+ gap: 2px;
1937
+ }
1938
+
1939
+ .customforge-workbench__icon-button {
1940
+ width: 30px;
1941
+ flex-basis: 30px;
1942
+ }
1943
+
1944
+ .customforge-workbench__tool-button {
1945
+ width: 30px;
1946
+ gap: 0;
1947
+ padding: 0;
1948
+ }
1949
+
1950
+ .customforge-workbench__tool-button:not(.customforge-workbench__extension-button)
1951
+ > span:not(.customforge-workbench__layer-count) {
1952
+ display: none;
1953
+ }
1954
+
1955
+ .customforge-workbench__extension-button[data-has-icon="true"]
1956
+ .customforge-workbench__extension-label {
1957
+ display: none;
1958
+ }
1959
+
1960
+ .customforge-workbench__extension-button[data-has-icon="false"] {
1961
+ width: auto;
1962
+ padding-right: 7px;
1963
+ padding-left: 7px;
1964
+ }
1965
+
1966
+ .customforge-workbench__layers-toggle {
1967
+ width: auto;
1968
+ gap: 4px;
1969
+ padding: 0 4px;
1970
+ }
1971
+
1972
+ .customforge-workbench__font-select {
1973
+ width: 116px;
1974
+ flex-basis: 116px;
1975
+ }
1976
+
1977
+ .customforge-workbench__format-number,
1978
+ .customforge-workbench__format-number input {
1979
+ width: 52px;
1980
+ flex-basis: 52px;
1981
+ }
1982
+
1983
+ .customforge-workbench__format-button {
1984
+ width: 30px;
1985
+ flex-basis: 30px;
1986
+ }
1987
+
1988
+ .customforge-workbench__separator,
1989
+ .customforge-workbench__format-separator {
1990
+ margin-right: 1px;
1991
+ margin-left: 1px;
1992
+ }
1993
+ }
1994
+
1995
+ @container customforge-workbench (max-width: 980px) {
1996
+ .customforge-workbench__workspace {
1997
+ grid-template-columns: 1fr;
1998
+ overflow: auto;
1999
+ }
2000
+
2001
+ .customforge-workbench__panel {
2002
+ min-height: 540px;
2003
+ }
2004
+
2005
+ .customforge-workbench__panel--editor {
2006
+ border-right: 0;
2007
+ border-bottom: 1px solid var(--cfw-line);
2008
+ }
2009
+ }
2010
+
2011
+ @container customforge-workbench (max-width: 720px) {
2012
+ .customforge-workbench__topbar {
2013
+ gap: 8px;
2014
+ padding: 8px 9px;
2015
+ }
2016
+
2017
+ .customforge-workbench__brand-logo {
2018
+ flex-basis: 32px;
2019
+ width: 32px;
2020
+ height: 32px;
2021
+ }
2022
+
2023
+ .customforge-workbench__brand-copy span {
2024
+ display: none;
2025
+ }
2026
+
2027
+ .customforge-workbench__brand-copy strong {
2028
+ max-width: 110px;
2029
+ }
2030
+
2031
+ .customforge-workbench__global-actions {
2032
+ gap: 4px;
2033
+ }
2034
+
2035
+ .customforge-workbench__topbar .customforge-workbench__button {
2036
+ padding: 0 8px;
2037
+ }
2038
+
2039
+ .customforge-workbench__resolution {
2040
+ display: none;
2041
+ }
2042
+
2043
+ .customforge-workbench__panel--editor {
2044
+ grid-template-areas:
2045
+ "editor-header"
2046
+ "editor-toolbar"
2047
+ "editor-body";
2048
+ grid-template-columns: minmax(0, 1fr);
2049
+ grid-template-rows: auto auto minmax(340px, 1fr);
2050
+ }
2051
+
2052
+ .customforge-workbench__toolbar {
2053
+ padding-left: 10px;
2054
+ }
2055
+
2056
+ .customforge-workbench__layer-actions {
2057
+ opacity: 1;
2058
+ visibility: visible;
2059
+ pointer-events: auto;
2060
+ }
2061
+
2062
+ .customforge-workbench__dialog-actions {
2063
+ align-items: stretch;
2064
+ flex-direction: column-reverse;
2065
+ }
2066
+
2067
+ .customforge-workbench__preset-grid--assets {
2068
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2069
+ }
2070
+ }
2071
+
2072
+ @container customforge-workbench (max-width: 480px) {
2073
+ .customforge-workbench__topbar {
2074
+ align-items: stretch;
2075
+ flex-direction: column;
2076
+ }
2077
+
2078
+ .customforge-workbench__global-actions {
2079
+ display: grid;
2080
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2081
+ }
2082
+
2083
+ .customforge-workbench__brand-copy strong {
2084
+ max-width: 220px;
2085
+ }
2086
+
2087
+ .customforge-workbench[data-layers-expanded="true"]
2088
+ .customforge-workbench__editor-body {
2089
+ grid-template-columns: 180px minmax(0, 1fr);
2090
+ }
2091
+
2092
+ .customforge-workbench[data-toolbar="hidden"][data-layers="visible"]
2093
+ .customforge-workbench__editor-body {
2094
+ grid-template-columns: 180px minmax(0, 1fr);
2095
+ }
2096
+
2097
+ .customforge-workbench__preset-grid--text,
2098
+ .customforge-workbench__preset-grid--assets {
2099
+ grid-template-columns: minmax(0, 1fr);
2100
+ }
2101
+
2102
+ .customforge-workbench__tabs {
2103
+ width: 100%;
2104
+ }
2105
+
2106
+ .customforge-workbench__tabs button {
2107
+ flex: 1 0 auto;
2108
+ }
2109
+ }
2110
+
2111
+ @media (prefers-reduced-motion: reduce) {
2112
+ .customforge-workbench__button[data-loading="true"]::before,
2113
+ .customforge-workbench__layer-item,
2114
+ .customforge-workbench__layer-item[data-selected="true"],
2115
+ .customforge-workbench__layer-item[data-selected="true"]::before,
2116
+ .customforge-workbench__dialog[open],
2117
+ .customforge-workbench__dialog[open][data-closing="true"],
2118
+ .customforge-workbench__dialog[open]::backdrop,
2119
+ .customforge-workbench__dialog[open][data-closing="true"]::backdrop {
2120
+ transition: none;
2121
+ animation: none;
2122
+ }
2123
+ }
1331
2124
  /*$vite$:1*/