-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyle.css
More file actions
3006 lines (2674 loc) · 84.6 KB
/
Copy pathstyle.css
File metadata and controls
3006 lines (2674 loc) · 84.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/* Dark is the default regardless of the system's own light/dark
setting (a deliberate choice, not an oversight); light only applies
when the theme toggle has set data-theme="light" on the root, read
back from localStorage on load (see the blocking script in <head>,
which sets that attribute before first paint to avoid a flash of
the wrong theme). */
:root {
color-scheme: dark;
/* The fixed bottom bar's full footprint below the sheet breakpoint:
8px of padding either side of a touch target, its 1px top border,
and whatever the device reserves under it. Read by the sheet, the
artboard and the site footer, all of which stop short of it. Zero
while the bar is empty on wider layouts. */
--action-bar-h: 0px;
/* A split button's caret half. One value everywhere it appears, so
the GIF menu in a panel and the speed menu on the bar can't drift
to different widths; the touch tiers below resize it with the
control it's attached to. */
/* The primary fill under a pointer. Everything wearing that fill dims
by the same amount, background and border together, so a filled
control never ends up with a ring brighter than its own face. */
--primary-hover: color-mix(in srgb, var(--primary) 85%, var(--panel));
--caret-w: 30px;
/* The progress wash on a hold-to-confirm button. Tinted from the
primary so it reads as the action arriving, and kept translucent so
the label stays legible while it passes underneath. */
--hold-tint: color-mix(in srgb, var(--primary) 30%, transparent);
/* Surfaces, darkest to lightest: --bg is the canvas surround and
every sunken control (inputs, chips, lock buttons, the tab track);
--well is the sidebar's scrollable tab body; --panel is the sidebar
chrome, popovers, the modal, and the raised active tab. --well-deep
sits below --bg, for the color picker's value row, which wants a
stronger, more visually distinct sunken well. --muted is the lift a
flat control gets on hover. */
--bg: #09090b;
--well: #0f0f11;
--well-rgb: 15, 15, 17;
--panel: #18181b;
--well-deep: #050506;
--muted: #27272a;
/* Borders are white at low alpha rather than a fixed zinc, the way
shadcn's dark theme does it, so the same hairline reads at the same
contrast on the well, the panel, and a card alike. Controls that
take input (text fields, outline buttons, the lock tiles) share a
translucent "input" fill and a slightly stronger border, and lift
to --input-hover on hover instead of changing border color. */
--border: rgba(255, 255, 255, 0.1);
--border-strong: rgba(255, 255, 255, 0.18);
--input: rgba(255, 255, 255, 0.05);
--input-hover: rgba(255, 255, 255, 0.09);
--input-border: rgba(255, 255, 255, 0.15);
--tab-active-border: var(--input-border);
/* Four text levels instead of one color at assorted opacities, so
muted text stays a real, predictable color on every surface.
--text-heading sits one step off the body text rather than at it:
a setting's name wants to sit clearly between the section rule over
it and its own description under it. */
/* The sidebar's vertical rhythm, as five steps rather than the six
near-identical values it grew: 4 and 8 group a control's own parts,
20 separates one control from the next, and 32 opens a section. The
gap between steps is what makes them read as structure; 4 against 6
against 8 just reads as drift. 12 earns a step of its own because a
heading sits closer to what it heads than controls sit to each
other. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 20px;
--space-5: 32px;
--text: #fafafa;
--text-heading: #d4d4d8;
--text-muted: #a1a1aa;
--text-subtle: #71717a;
/* Primary is the foreground inverted onto the surface (white on dark,
near-black on light), the way a neutral shadcn theme does it, so
the one primary action, a locked field, an active segment, all read
as the strongest thing on screen without needing a hue. --accent
stays as an alias since every control below was written against
it. */
/* Zinc-200 rather than the full text white: on a #18181b panel the
pure white fill glows, and this keeps the inverted look at a
contrast that reads as a button rather than a light source. */
--primary: #e4e4e7;
--primary-fg: #18181b;
--accent: var(--primary);
/* Sliders fill in the muted text color rather than primary: a layer
tab shows nine tracks at once, and nine bright lines competed with
Random and the locks for attention. */
--slider-fill: var(--text-muted);
--ring: #71717a;
/* shadcn's scale: 10px base, controls two steps down, cards and the
modal one step up. */
--radius-sm: 8px;
--radius: 10px;
--radius-lg: 14px;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
accent-color: var(--primary);
}
:root[data-theme="light"] {
color-scheme: light;
--bg: #f4f4f5;
--well: #fafafa;
--well-rgb: 250, 250, 250;
--panel: #ffffff;
--well-deep: #e4e4e7;
--muted: #f4f4f5;
--border: #e4e4e7;
--border-strong: #d4d4d8;
--input: #ffffff;
--input-hover: #f4f4f5;
--input-border: #e4e4e7;
--tab-active-border: transparent;
--text: #09090b;
/* Brighter reads as darker here; the step is the same size. */
--text-heading: #3f3f46;
--text-muted: #71717a;
--text-subtle: #a1a1aa;
--primary: #18181b;
--primary-fg: #fafafa;
--ring: #a1a1aa;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
}
/* Smooths the theme toggle: an element with its own transition (most
interactive controls; see button, .field input/select, .color-swatch)
overrides this outright rather than adding to it, since transition is
a single cascaded property, not a per-item merge, so those keep their
own faster hover/active feel. This is the fallback for everything
else, buttons, tabs and inputs would already snap on hover if only
this was here so the color-related ones are duplicated there. */
* {
box-sizing: border-box;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
box-shadow 0.2s ease;
}
html, body {
height: 100%;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--bg);
color: var(--text);
display: flex;
/* dvh, so the layout tracks the viewport a mobile browser actually
leaves once its URL bar is on screen; 100vh is the tallest it ever
gets, which put the footer underneath that bar. The vh line stays
as the fallback for anything without dvh. */
height: 100vh;
height: 100dvh;
overflow: hidden;
}
/* One keyboard focus treatment for everything, shadcn's: the border
takes the ring color and a 3px half-opacity ring sits outside it.
:focus-visible only, so a mouse click never leaves a ring behind.
Range inputs put the ring on their thumb instead (see below). */
button:focus-visible,
.field input[type="text"]:focus-visible,
.field input[type="number"]:focus-visible,
.field select:focus-visible,
.split-btn-select:focus-visible {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
input[type="range"]:focus-visible {
outline: none;
}
.main-area {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
/* Shared by the canvas area and the site footer, so the legend and
links sit on the same inset as the artwork's edges: sidebar, right
edge, and bottom. The brand keeps its own 20px at the top. */
--artboard-pad: 25px;
/* The gap under the footer strip. It matches the sidebar's own bottom
padding rather than the artboard's inset, so the name and links line
up with the last row of buttons in the sidebar instead of floating
5px above it. The mobile block below hands it back to the artboard's
inset, where there is no sidebar to line up with. */
--footer-inset: 20px;
/* The footer's own footprint off the bottom edge: its 32px line plus
the inset under it. The artboard stops here rather than running
underneath, which is what lets it centre in the space it actually
occupies. Anything else pinned to that edge adds to it. */
--footer-strip: calc(32px + var(--footer-inset));
/* Now just the artboard's own margin, top and bottom alike. It used
to carry the footer's height as well, on both ends, so that the
artwork stayed centred on the full window: the cost was a gap above
the artwork the size of a footer and a gap below it the size of a
margin, which read as the artwork sitting low. Dropped to a plain
inset here and set to a tighter one while a sheet is up. */
--artboard-clear: var(--artboard-pad);
}
/* The page's h1, first item in the footer strip. It takes the strip's
own size rather than one of its own, and carries its weight instead:
at this scale bold is enough to separate a name from the links beside
it, and one size across the strip is what makes it read as a single
line of chrome rather than two things that happen to be adjacent. */
.brand {
flex-shrink: 0;
margin: 0;
font-size: inherit;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-muted);
}
.brand a {
color: inherit;
text-decoration: none;
}
.brand a:hover {
color: var(--text);
}
/* Content that should reach screen readers and search crawlers without
occupying space in this single-viewport app, where nothing scrolls
into view: kept in the accessibility tree and DOM text, clipped to a
1px box instead of display:none (which drops it from both). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.controls {
width: 300px;
flex-shrink: 0;
height: 100%;
background: var(--panel);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.sheet-handle {
display: none;
}
@media (max-width: 768px) {
.sheet-handle {
display: block;
position: relative;
flex-shrink: 0;
width: 100%;
height: 24px;
margin: 0;
padding: 0;
border: 0;
border-radius: 16px 16px 0 0;
background: var(--panel);
box-shadow: none;
/* The drag is handled in script; without this the browser claims
the gesture for a scroll before the first pointermove lands. */
touch-action: none;
}
.sheet-handle::before {
content: "";
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
border-radius: 2px;
background: var(--border-strong);
}
}
/* Hidden wherever it happens to be sitting; .action-bar below shows it
once script has moved it in there, which is the only place it appears
at all. That also covers the tick between parse and script, when it
is still a child of <body>. */
.sidebar-toggle {
display: none;
padding: 0;
align-items: center;
justify-content: center;
margin-top: 0;
}
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 24;
}
/* One setting, parked on top of the bar while the sheet is closed (see
showLastField in index.html, which moves the real field in here). It
shares the bar's inset so the two stack as one block of chrome, and
it sits under the sheet's z-index because the two are never up at the
same time. */
.last-control {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: var(--action-bar-h);
z-index: 24;
align-items: flex-end;
gap: var(--touch-gap);
padding: 12px var(--edge-pad);
background: var(--panel);
border-top: 1px solid var(--border);
}
.last-control:not([hidden]) {
display: flex;
}
.last-control-slot {
flex: 1;
min-width: 0;
}
/* The field brought its sidebar spacing with it; in a one-row strip the
bottom margin would just be dead height. */
.last-control-slot .field {
margin-bottom: 0;
}
/* The thumb bubble sits above the track, which in the sidebar means
over a label with room to spare above it. Here the strip is one row
tall and the label is the only thing up there, and it is already
showing the same live value at the end of the line. */
.last-control-slot .slider-tooltip {
display: none;
}
.last-control .last-control-close {
flex-shrink: 0;
width: 32px;
margin-top: 0;
}
/* The exploration loop, plus the two buttons that choose which panel
the sheet shows. Parked at the bottom of the screen on narrow layouts
where the sidebar becomes that sheet (see syncActionBar() in
index.html, which moves the live controls in here). The sheet rises
off this bar and stops at its top edge, so Random stays one tap away
with a panel open and the way back out is always in the same place.
display:none on wider layouts, where all of this is in the sidebar. */
.action-bar {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 26;
align-items: center;
gap: var(--touch-gap);
padding: 8px var(--edge-pad);
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
background: var(--panel);
border-top: 1px solid var(--border);
}
.action-bar:not([hidden]) {
display: flex;
}
/* Four fixed targets and Random taking the rest, so the primary action
is the widest thing on the bar here too. It keeps the fill and drops
the word: at 375px the row cannot seat both the label and an inset
the panels can share, and the fill is what marks it as primary. The
sidebar copy is untouched. */
.action-bar .explore-row {
flex: 1;
min-width: 0;
gap: var(--touch-gap);
margin-bottom: 0;
}
.action-bar #randomizeBtn {
min-width: var(--touch-h);
}
.action-bar #randomizeBtn .btn-label {
display: none;
}
/* Two arrows crossing sideways: shuffle is the widest glyph in the row
and, at 10.8px against play's 12.7, the shortest. In a line of icons
the eye takes height for size, so at the shared 15px it read as the
smallest button on the bar while being the primary one. 18px puts its
height just past the others and gives the extra width Random carries
something to hold. Only while it stands alone; beside a word it goes
back to matching. */
.action-bar #randomizeBtn i {
font-size: 18px;
}
/* Each panel's button wears Random's own fill while that panel is the
one showing, the way the tabs inside the sheet mark their own. It
reads better than flipping one of them to a close icon, which would
say nothing about the other panel being up.
The :hover half is not decoration: it has to outrank
button.secondary's hover rule, which has the same specificity and is
declared later. Touch browsers leave :hover stuck on whatever was
tapped last, so without it the button you just pressed is the one
that loses its fill. */
.action-bar button.is-active,
.action-bar button.is-active:hover:not(:disabled) {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-fg);
}
/* 44px here rather than the 32px these controls carry in the sidebar:
this is the one row meant to be hit with a thumb. The width reset
opts every one of them out of the full-width button default, which
in a flex row reads as "take everything, then shrink". */
.action-bar button,
.action-bar .split-btn-select {
height: var(--touch-h);
flex-shrink: 0;
margin-top: 0;
}
/* Only the buttons need this: it undoes `button { width: 100% }`, which
in a flex row reads as "take everything, then shrink". A select never
had that default, and auto would collapse the caret onto its own
background image instead of holding the token width. */
.action-bar button {
width: auto;
}
.action-bar .icon-btn {
min-width: var(--touch-h);
}
/* In the bar the toggle is just another button in the row. */
.action-bar .sidebar-toggle {
display: flex;
width: var(--touch-h);
}
/* Confirms an action whose effect isn't visible from wherever the user
is looking, e.g. Lock All changes lock icons that may be sitting on
a layer tab that isn't even the one currently open. Shown via
showToast() in index.html; opacity/transform (not display) so it can
transition, and pointer-events stays off so it never blocks a click. */
.toast {
position: absolute;
/* Inset from both edges, not left:50%. An absolutely positioned box
with only a left offset gets shrink-to-fit against the space from
that offset to the container's edge, which is half the artboard:
anything longer than that wrapped early and looked clipped. Both
offsets plus auto margins give it the full width to size against
and still centre it. */
left: var(--artboard-pad);
right: var(--artboard-pad);
width: fit-content;
max-width: 100%;
margin: 0 auto;
top: 20px;
transform: translateY(-8px);
padding: 10px 16px;
border-radius: var(--radius);
background: var(--panel);
border: 1px solid var(--border);
color: var(--text);
font-size: 13px;
font-weight: 500;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
z-index: 20;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.visible {
opacity: 1;
transform: translateY(0);
}
/* First-visit "take the tour" nudge (see #tourChip in index.html).
Same spot and surface as the toast, one layer beneath it, so a toast
fired in the meantime still shows on top. */
.tour-chip {
position: absolute;
/* Same reasoning as .toast above: both offsets, so the pill can grow
to the artboard's width before it wraps. */
left: var(--artboard-pad);
right: var(--artboard-pad);
width: fit-content;
max-width: 100%;
margin: 0 auto;
top: 20px;
align-items: center;
gap: 12px;
/* Room on both sides of the text, and the pill grows with its
content on desktop; below the sheet breakpoint it wraps inside
the artboard's inset instead. */
padding: 6px 6px 6px 18px;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 13px;
white-space: nowrap;
box-shadow: var(--shadow-lg);
z-index: 19;
animation: tourChipIn 0.3s ease both;
}
.tour-chip:not([hidden]) {
display: inline-flex;
}
@keyframes tourChipIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* The play offer is one line; the longer explanation lives in the
text's tooltip. A dotted underline marks that there is one. */
.tour-chip > span:first-child {
padding-right: 4px;
}
@media (max-width: 768px) {
.tour-chip {
white-space: normal;
line-height: 1.4;
border-radius: 20px;
}
}
.tour-chip.play-offer > span {
text-decoration: underline dotted;
text-underline-offset: 3px;
text-decoration-color: var(--text-subtle);
cursor: help;
}
.tour-chip button {
width: auto;
height: 26px;
margin-top: 0;
padding: 0 12px;
border-radius: 999px;
font-size: 12px;
flex-shrink: 0;
}
.tour-chip-dismiss {
min-width: 26px;
padding: 0;
background: transparent;
color: var(--text-subtle);
border-color: transparent;
}
.tour-chip-dismiss:hover {
background: var(--muted);
color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
.tour-chip {
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
.toast {
transition: opacity 0.2s ease;
transform: translateY(0);
}
}
/* Below this width there's no room for a permanent side-by-side layout,
so the sidebar becomes a sheet over the bottom of the screen, toggled
by .sidebar-toggle instead of always being on screen. */
@media (max-width: 768px) {
/* The touch tier. One height, one caret, one inset and one gap, read
by the bar and by both sheet panels, so the whole bottom assembly
lines up: a download button's left edge sits directly over Undo's.
Gap stays under the inset, the usual toolbar ratio, so controls
never crowd the screen edge harder than they crowd each other. */
:root {
--touch-h: 44px;
--caret-w: 36px;
--edge-pad: 16px;
--touch-gap: 12px;
--action-bar-h: calc(var(--touch-h) + 17px + env(safe-area-inset-bottom, 0px));
/* Capped in px as well as dvh so the sheet stops growing on a tall
phone and leaves the artwork the rest. At this height the canvas
clears the sheet whole on every phone down to a 568px viewport. */
--sheet-h: min(58dvh, 460px);
/* The second stop, for when the settings matter more than the view:
the sheet takes what it can and still leaves a 96px band of
artboard, so the artwork thins to a strip rather than vanishing. */
--sheet-h-tall: min(88dvh, calc(100dvh - var(--action-bar-h) - 96px));
}
/* A sheet rising off the action bar, not a side drawer. A panel that
flew in from one edge covered the artwork it was editing, so every
slider was a guess; this leaves the canvas on screen above it and
.canvas-area shrinks to match, which is the whole point of the
shape. It also lands where the bar that opens it already is. */
.controls {
position: fixed;
top: auto;
left: 0;
right: 0;
bottom: var(--action-bar-h);
width: auto;
height: var(--sheet-h);
z-index: 25;
border-right: none;
border-top: 1px solid var(--border);
border-radius: 16px 16px 0 0;
/* Its own height, so it parks out of sight behind the bar. */
transform: translateY(100%);
transition: transform 0.2s ease;
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.35);
}
body.sidebar-open .controls {
transform: translateY(0);
}
body.sheet-tall .controls {
height: var(--sheet-h-tall);
}
/* Nothing is being sent to the background here: the canvas above the
sheet is the thing being watched, so the backdrop keeps only its
job of closing the sheet when the artwork is tapped. */
body.sidebar-open .sidebar-backdrop {
display: block;
background: transparent;
}
.main-area {
--artboard-pad: var(--edge-pad);
--footer-inset: var(--edge-pad);
}
/* With the sheet up, the artwork gets the shortened area to itself:
the name would otherwise sit across the top of it, and the footer
is behind the sheet anyway. */
body.sidebar-open .main-area {
--artboard-clear: 12px;
}
}
/* A 320px screen is 44px short of seating the cluster at full size, so
everything gives a little rather than the bar overflowing. 40px is
still a usable target, and only the smallest phones ever see it. */
/* A 320px screen can't seat the touch tier at full size, so the tier
itself steps down and every rule above follows. 40px is still a
usable target, and only the smallest phones ever see it. */
@media (max-width: 359px) {
:root {
--touch-h: 40px;
--caret-w: 32px;
--edge-pad: 12px;
--touch-gap: 8px;
}
}
.controls-header {
flex-shrink: 0;
padding: 20px 20px 0;
/* Full sidebar width, same as .controls-footer's own border-top. */
border-bottom: 1px solid var(--border);
}
.controls-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px 20px;
background: var(--well);
}
/* Hints that a tab's content continues past the visible edge. Sticky
(not fixed/absolute) so each tracks its own edge of the scrolled
area without JS needing to measure anything; negative margin keeps
it from adding scroll height of its own. JS (see updateScrollFade)
only toggles the "visible" class, based on scroll position and
whether the panel overflows at all. */
.scroll-fade {
position: sticky;
left: 0;
right: 0;
height: 40px;
margin-bottom: -40px;
pointer-events: none;
opacity: 0;
/* Sits as the first and last child of .controls-body respectively;
without this, default stacking paints every tab-panel's own content
(a later sibling) over the top one, since it comes before them in
the DOM. The bottom one comes after them, so it never showed the
same problem. */
z-index: 2;
transition: opacity 0.15s ease;
}
/* Sticky offsets resolve against .controls-body's padding edge, not its
true outer edge, so top:0/bottom:0 would leave each fade stopping
short by exactly that padding (16px/20px), with a hard, unfaded cutoff
in the gap where content is still being clipped. Offsetting by the
negative of that padding pushes each fade flush with the real edge.
Each gradient holds solid for roughly its first sixth, rather than
starting to fade immediately, so the part nearest the true edge reads
clearly rather than being mid-fade already; the fade-out end uses an explicit
0-alpha var(--well) rather than the transparent keyword, since
interpolating a solid color straight to "transparent" (rgba(0,0,0,0))
drifts visibly toward black partway through instead of just thinning. */
.scroll-fade-top {
top: -16px;
background: linear-gradient(to bottom, var(--well) 0%, var(--well) 17.5%, rgba(var(--well-rgb), 0) 100%);
}
.scroll-fade-bottom {
bottom: -20px;
margin-bottom: 0;
margin-top: -40px;
background: linear-gradient(to top, var(--well) 0%, var(--well) 17.5%, rgba(var(--well-rgb), 0) 100%);
}
.scroll-fade.visible {
opacity: 1;
}
.controls-footer {
flex-shrink: 0;
padding: 20px;
border-top: 1px solid var(--border);
}
/* Undo, Auto-randomize, Random: the two icon controls at their fixed
width and Random taking whatever is left, so the primary action is
also the widest thing in the sidebar. */
.explore-row {
display: flex;
align-items: center;
gap: 8px;
/* Same spacing as .button-row below it keeps to the tabs, so the
three header rows read as evenly stacked rather than paired. */
margin-bottom: 16px;
}
.explore-row > button,
.explore-row .split-btn button {
width: auto;
flex-shrink: 0;
margin-top: 0;
}
.explore-row #randomizeBtn {
flex: 1;
}
/* min-width rather than width: .explore-row buttons and the footer's
icon buttons both set width:auto to opt out of the full-width button
default, and with the padding gone that would shrink these to the
bare icon. */
.icon-btn {
min-width: 32px;
padding: 0;
}
.icon-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.split-btn {
display: flex;
flex-shrink: 0;
}
.split-btn button {
width: auto;
margin-top: 0;
}
.split-btn-main {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.split-btn-select {
width: var(--caret-w);
height: 32px;
flex-shrink: 0;
margin-top: 0;
padding: 0;
border: 1px solid var(--input-border);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
/* Invisible at rest (matches the shared fill), so the only visible
line at the seam is split-btn-main's own right border, at the same
1px weight as every other edge. */
border-left-color: transparent;
background-color: var(--input);
box-shadow: var(--shadow-xs);
color: var(--text);
font-size: 13px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
/* Pushes the selected option's text off the visible box (the popup
list itself is unaffected) so only the chevron shows at rest; the
real value only needs to be visible once the list is open. */
text-indent: -9999px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 15px;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* The darker "well" fill only appears once the dropdown is actually
open (a native select stays focused while its list is up), rather
than sitting on permanently and mismatching its other half. */
.split-btn-select:focus {
background-color: var(--input-hover);
outline: none;
}
.split-btn-select:hover {
background-color: var(--input-hover);
}
#playBtn.playing {
background-color: var(--primary);
color: var(--primary-fg);
border-color: var(--primary);
}
/* A segmented control: the track is a sunken well, the active segment
a raised pill with a soft shadow, and the rest plain muted text.
shadcn's Tabs: a muted track, and the active trigger takes the input
fill and border in dark (a plain white card in light). */
.tabs {
display: flex;
gap: 2px;
padding: 3px;
margin-bottom: 16px;
background: var(--muted);
border-radius: var(--radius);
}
.tab-btn {
flex: 1;
width: auto;
height: 26px;
margin-top: 0;
padding: 0 2px;
gap: 4px;
/* The label plus its lock count (see .tab-count below) has to stay on
one line even at "Layer A" + a two-digit count, or the whole track
grows a second row. */
white-space: nowrap;
background: transparent;
color: var(--text-muted);
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 500;
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease,
border-color 0.15s ease;
}
.tab-btn.active {
background: var(--input);
color: var(--text);
border-color: var(--tab-active-border);
box-shadow: var(--shadow-xs);
}
.tab-btn:hover:not(.active) {
color: var(--text);
}
/* Per-tab lock indicator (see updateLockCounts in index.html): one
small padlock trailing the tab's name, outline when some of that
tab's fields are locked and solid when all are, in the subtle text
color so it reads as an annotation rather than part of the label.
The count itself is in the tab's tooltip. Collapses to nothing when
the tab has no locks. */
.tab-count {
display: inline-flex;
align-items: center;
color: var(--text-subtle);
}
.tab-count:empty {
display: none;
}
.tab-count svg {
width: 11px;
height: 11px;
}
.tab-count.all,
.tab-btn.active .tab-count {
color: var(--text-muted);
}
.tab-btn.active .tab-count.all {
color: var(--text);
}
.field {
margin-bottom: var(--space-4);
}
/* A trailing fill of "░" (see ::after) stands in for the divider line
this used to draw above the title: enough to mark a new section
without a hard rule cutting across the sidebar, and it reads as a
heading's own underline-in-spirit rather than a separator between
unrelated blocks. The margin above is the same spacing the border
used to sit inside; keep that even though the line itself is gone,
or sections stop reading as distinct groups. */
.section-title {
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
white-space: nowrap;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
/* The brightest text in its group, above the setting titles it
introduces: 12.9:1 on the dark panel against their 9.9:1, and
19.9:1 against 10.4:1 on the light one. It sat below them for a
while, which inverted the hierarchy, a section reading quieter than
the fields inside it. Going the other way instead, to
--text-subtle, measures 3.7:1 and 2.4:1, both under AA, and no
single grey fixes that because the two themes want it moved in
opposite directions. */
color: var(--text);
/* Further from what came before than from what it heads. */
margin: var(--space-5) 0 var(--space-3);
}
/* A title that opens its panel (Layer A/B's "Fill") has nothing above
it to separate from. */
.section-title:first-child {
margin-top: 0;
}
.section-title::after {
content: "░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░";
flex: 1;
overflow: hidden;
color: var(--border-strong);
/* The UI's own system-sans font smooths this glyph into a soft,
nearly continuous smudge; a monospace face renders its dot texture
with crisp edges instead, so it stays visibly pixelated even
packed edge to edge with no letter-spacing pulling it apart into
separate dots. */
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1;
}
/* One card per collapsible: the toggle is the card's header row and
the content unfolds inside the same border below a divider, rather
than the header and body being two separate boxes with a gap. */
.palette-section {
margin: 0 0 var(--space-4);
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);