mnfst 0.5.58 → 0.5.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/manifest.code.js +7 -0
- package/lib/manifest.colorpicker.css +399 -293
- package/lib/manifest.css +418 -298
- package/lib/manifest.dropdown.css +2 -2
- package/lib/manifest.dropdowns.js +57 -5
- package/lib/manifest.js +26 -39
- package/lib/manifest.min.css +1 -1
- package/lib/manifest.tooltips.js +240 -289
- package/lib/manifest.utilities.css +15 -1
- package/package.json +1 -1
|
@@ -1,23 +1,48 @@
|
|
|
1
1
|
/* Manifest Color Picker */
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
+
--color-picker-swatch: var(--color-line);
|
|
5
|
+
--icon-color-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-paint-roller-icon lucide-paint-roller'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");
|
|
6
|
+
--icon-color-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-blend-icon lucide-blend'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");
|
|
7
|
+
--icon-color-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-swatch-book-icon lucide-swatch-book'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M 7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E");
|
|
8
|
+
--icon-color-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pipette-icon lucide-pipette'%3E%3Cpath d='m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12'/%3E%3Cpath d='m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z'/%3E%3Cpath d='m2 22 .414-.414'/%3E%3C/svg%3E");
|
|
4
9
|
--icon-alpha-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23808080' opacity='0.15'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%23808080' opacity='0.15'/%3E%3C/svg%3E");
|
|
5
10
|
}
|
|
6
11
|
|
|
12
|
+
@layer components {
|
|
13
|
+
|
|
14
|
+
:where(input[type="color"]) {
|
|
15
|
+
appearance: none;
|
|
16
|
+
-webkit-appearance: none;
|
|
17
|
+
|
|
18
|
+
&::-webkit-color-swatch-wrapper {
|
|
19
|
+
padding: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&::-webkit-color-swatch {
|
|
23
|
+
border: 0 none
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&::-moz-color-swatch {
|
|
27
|
+
border: 0 none
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
7
32
|
@layer utilities {
|
|
8
33
|
|
|
9
34
|
/* Swatch trigger button */
|
|
10
|
-
:where(
|
|
35
|
+
:where([x-colorpicker\.swatch], input[type="color"]):not(.unstyle) {
|
|
11
36
|
position: relative;
|
|
12
37
|
width: var(--spacing-field-height, 2.25rem);
|
|
13
|
-
height: var(--spacing-field-height, 2.25rem);
|
|
14
38
|
min-width: var(--spacing-field-height, 2.25rem);
|
|
15
39
|
max-width: var(--spacing-field-height, 2.25rem);
|
|
40
|
+
height: var(--spacing-field-height, 2.25rem);
|
|
16
41
|
padding: 0;
|
|
17
|
-
background: var(--swatch
|
|
42
|
+
background: var(--color-picker-swatch, #000000);
|
|
18
43
|
border-width: 1px;
|
|
19
44
|
border-style: solid;
|
|
20
|
-
border-color: oklch(from var(--swatch
|
|
45
|
+
border-color: oklch(from var(--color-picker-swatch, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0));
|
|
21
46
|
border-radius: var(--radius, 0.5rem);
|
|
22
47
|
cursor: pointer;
|
|
23
48
|
overflow: hidden;
|
|
@@ -27,7 +52,7 @@
|
|
|
27
52
|
&:active,
|
|
28
53
|
&:focus,
|
|
29
54
|
&:focus-visible {
|
|
30
|
-
border-color: oklch(from var(--swatch
|
|
55
|
+
border-color: oklch(from var(--color-picker-swatch, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0) / 0.5)
|
|
31
56
|
}
|
|
32
57
|
|
|
33
58
|
/* Alpha pattern background */
|
|
@@ -45,353 +70,434 @@
|
|
|
45
70
|
}
|
|
46
71
|
}
|
|
47
72
|
|
|
48
|
-
/*
|
|
49
|
-
[x-colorpicker]:not(.unstyle) {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/* & :where(li, a, button, label) {
|
|
58
|
-
width: fit-content;
|
|
59
|
-
min-width: var(--spacing-field-height, 2.25rem)
|
|
60
|
-
} */
|
|
73
|
+
/* Color picker menu interface */
|
|
74
|
+
:where([x-colorpicker]):not(.unstyle) {
|
|
75
|
+
min-width: 18rem;
|
|
76
|
+
max-width: 18rem;
|
|
77
|
+
max-height: 30rem;
|
|
78
|
+
height: fit-content;
|
|
79
|
+
overflow: hidden;
|
|
61
80
|
|
|
62
|
-
/*
|
|
63
|
-
& .
|
|
64
|
-
|
|
81
|
+
/* Tabs wrapper */
|
|
82
|
+
& :where(.tabs-wrapper) {
|
|
83
|
+
display: flex;
|
|
65
84
|
width: 100%;
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
cursor: crosshair;
|
|
69
|
-
touch-action: none
|
|
70
|
-
}
|
|
85
|
+
padding: 2px;
|
|
86
|
+
border-bottom: 1px solid var(--color-line, oklch(80% 0.0029 264.26));
|
|
71
87
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
88
|
+
/* Distribute button widths equally */
|
|
89
|
+
& button {
|
|
90
|
+
flex: 1;
|
|
91
|
+
justify-content: center
|
|
92
|
+
}
|
|
77
93
|
}
|
|
78
94
|
|
|
79
|
-
/*
|
|
80
|
-
&
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
95
|
+
/* Solid options */
|
|
96
|
+
& [x-colorpicker\.solid] {
|
|
97
|
+
|
|
98
|
+
/* Canvas wrapper */
|
|
99
|
+
& :where(.canvas-wrapper) {
|
|
100
|
+
position: relative;
|
|
101
|
+
width: 100%;
|
|
102
|
+
padding: 2px;
|
|
103
|
+
aspect-ratio: 1;
|
|
104
|
+
overflow: hidden;
|
|
105
|
+
cursor: crosshair;
|
|
106
|
+
touch-action: none
|
|
107
|
+
}
|
|
91
108
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
109
|
+
/* Canvas (SV plane) */
|
|
110
|
+
& canvas {
|
|
111
|
+
display: block;
|
|
112
|
+
width: 100%;
|
|
113
|
+
height: 100%
|
|
114
|
+
}
|
|
99
115
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
border-radius: 1rem;
|
|
107
|
-
appearance: none;
|
|
108
|
-
-webkit-appearance: none;
|
|
109
|
-
cursor: pointer;
|
|
110
|
-
outline: none;
|
|
111
|
-
border: none;
|
|
112
|
-
background: transparent;
|
|
113
|
-
|
|
114
|
-
/* Webkit thumb */
|
|
115
|
-
&::-webkit-slider-thumb {
|
|
116
|
-
-webkit-appearance: none;
|
|
117
|
-
width: 1rem;
|
|
118
|
-
height: 1rem;
|
|
119
|
-
border-radius: 50%;
|
|
120
|
-
background: #ffffff;
|
|
116
|
+
/* Canvas reticle indicator */
|
|
117
|
+
& :where(.color-reticle) {
|
|
118
|
+
position: absolute;
|
|
119
|
+
width: 0.75rem;
|
|
120
|
+
height: 0.75rem;
|
|
121
|
+
z-index: 1;
|
|
121
122
|
border: 2px solid #ffffff;
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
cursor: grabbing;
|
|
127
|
-
}
|
|
123
|
+
border-radius: 50%;
|
|
124
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
|
|
125
|
+
transform: translate(-50%, -50%);
|
|
126
|
+
pointer-events: none
|
|
128
127
|
}
|
|
129
128
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
background: #ffffff;
|
|
136
|
-
border: 2px solid #ffffff;
|
|
137
|
-
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
138
|
-
cursor: grab;
|
|
129
|
+
& :where(.solid-options-inputs) {
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-direction: column;
|
|
132
|
+
gap: 0.75rem;
|
|
133
|
+
padding: 0.75rem;
|
|
139
134
|
|
|
140
|
-
|
|
141
|
-
|
|
135
|
+
& div:has(button[x-colorpicker\.set-color-space], input[x-colorpicker\.set-color-value], input[x-colorpicker\.set-alpha-value]) {
|
|
136
|
+
display: flex;
|
|
137
|
+
width: 100%
|
|
142
138
|
}
|
|
143
139
|
}
|
|
144
140
|
|
|
145
|
-
/*
|
|
146
|
-
|
|
141
|
+
/* Shared range styles */
|
|
142
|
+
& input[x-colorpicker\.set-hue],
|
|
143
|
+
& input[x-colorpicker\.set-alpha] {
|
|
144
|
+
width: 100%;
|
|
147
145
|
height: 0.75rem;
|
|
148
|
-
|
|
149
|
-
|
|
146
|
+
padding: 0;
|
|
147
|
+
border-radius: 1rem;
|
|
148
|
+
appearance: none;
|
|
149
|
+
-webkit-appearance: none;
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
outline: none;
|
|
152
|
+
border: none;
|
|
153
|
+
background: transparent;
|
|
150
154
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
155
|
+
/* Webkit thumb */
|
|
156
|
+
&::-webkit-slider-thumb {
|
|
157
|
+
-webkit-appearance: none;
|
|
158
|
+
width: 1rem;
|
|
159
|
+
height: 1rem;
|
|
160
|
+
border-radius: 50%;
|
|
161
|
+
background: #ffffff;
|
|
162
|
+
border: 2px solid #ffffff;
|
|
163
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
164
|
+
cursor: grab;
|
|
165
|
+
|
|
166
|
+
&:active {
|
|
167
|
+
cursor: grabbing
|
|
168
|
+
}
|
|
169
|
+
}
|
|
157
170
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
171
|
+
/* Firefox thumb */
|
|
172
|
+
&::-moz-range-thumb {
|
|
173
|
+
width: 1rem;
|
|
174
|
+
height: 1rem;
|
|
175
|
+
border-radius: 50%;
|
|
176
|
+
background: #ffffff;
|
|
177
|
+
border: 2px solid #ffffff;
|
|
178
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
179
|
+
cursor: grab;
|
|
180
|
+
|
|
181
|
+
&:active {
|
|
182
|
+
cursor: grabbing
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* Webkit track */
|
|
187
|
+
&::-webkit-slider-runnable-track {
|
|
188
|
+
height: 0.75rem;
|
|
189
|
+
border-radius: 1rem
|
|
190
|
+
}
|
|
166
191
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
192
|
+
/* Firefox track */
|
|
193
|
+
&::-moz-range-track {
|
|
194
|
+
height: 0.75rem;
|
|
195
|
+
border-radius: 1rem
|
|
196
|
+
}
|
|
172
197
|
}
|
|
173
|
-
}
|
|
174
198
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
199
|
+
/* Hue range */
|
|
200
|
+
& input[x-colorpicker\.set-hue] {
|
|
201
|
+
&::-webkit-slider-runnable-track {
|
|
202
|
+
background: linear-gradient(to right,
|
|
203
|
+
hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
|
|
204
|
+
hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
|
|
205
|
+
hsl(360 100% 50%))
|
|
206
|
+
}
|
|
179
207
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
208
|
+
&::-moz-range-track {
|
|
209
|
+
background: linear-gradient(to right,
|
|
210
|
+
hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
|
|
211
|
+
hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
|
|
212
|
+
hsl(360 100% 50%))
|
|
213
|
+
}
|
|
184
214
|
}
|
|
185
215
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
}
|
|
191
|
-
}
|
|
216
|
+
/* Alpha range */
|
|
217
|
+
& input[x-colorpicker\.set-alpha] {
|
|
218
|
+
--color-picker-alpha: rgb(0, 0, 0);
|
|
219
|
+
position: relative;
|
|
192
220
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
font-size: 0.6875rem;
|
|
221
|
+
&::-webkit-slider-runnable-track {
|
|
222
|
+
background:
|
|
223
|
+
linear-gradient(to right, transparent, var(--color-picker-alpha)),
|
|
224
|
+
var(--icon-alpha-pattern) 0 0 / 0.5rem 0.5rem
|
|
225
|
+
}
|
|
199
226
|
|
|
200
|
-
|
|
201
|
-
|
|
227
|
+
&::-moz-range-track {
|
|
228
|
+
background:
|
|
229
|
+
linear-gradient(to right, transparent, var(--color-picker-alpha)),
|
|
230
|
+
var(--icon-alpha-pattern) 0 0 / 0.5rem 0.5rem
|
|
231
|
+
}
|
|
202
232
|
}
|
|
203
|
-
}
|
|
204
233
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
234
|
+
/* Color space button */
|
|
235
|
+
& button[x-colorpicker\.set-color-space] {
|
|
236
|
+
justify-content: center;
|
|
237
|
+
width: 7ch;
|
|
238
|
+
padding-inline-start: 0;
|
|
239
|
+
padding-inline-end: 0
|
|
240
|
+
}
|
|
211
241
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
-moz-appearance: textfield;
|
|
242
|
+
/* Color value input */
|
|
243
|
+
& input[x-colorpicker\.set-color-value] {
|
|
244
|
+
flex: 1;
|
|
245
|
+
padding-inline-end: 0
|
|
246
|
+
}
|
|
218
247
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
248
|
+
/* Alpha value input */
|
|
249
|
+
& input[x-colorpicker\.set-alpha-value] {
|
|
250
|
+
width: fit-content;
|
|
251
|
+
padding-inline-start: 0;
|
|
252
|
+
text-align: end
|
|
223
253
|
}
|
|
224
254
|
}
|
|
225
255
|
|
|
226
|
-
/*
|
|
227
|
-
&
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
256
|
+
/* Gradients */
|
|
257
|
+
& [x-colorpicker\.gradient] {
|
|
258
|
+
|
|
259
|
+
/* Gradient layers */
|
|
260
|
+
& :where(.layer-options-wrapper) {
|
|
261
|
+
border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(16.6% 0.026 267) 11%, transparent));
|
|
262
|
+
|
|
263
|
+
/* Layer options inputs */
|
|
264
|
+
& :where(.layer-options-inputs) {
|
|
265
|
+
display: flex;
|
|
266
|
+
flex-flow: row nowrap;
|
|
267
|
+
align-items: center;
|
|
268
|
+
padding: 0.5rem;
|
|
269
|
+
|
|
270
|
+
/* Gradient options drodown button */
|
|
271
|
+
& button {
|
|
272
|
+
width: auto;
|
|
273
|
+
justify-content: center
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* Gradient angle input wrapper */
|
|
277
|
+
& :where(.layer-angle-wrapper) {
|
|
278
|
+
position: relative;
|
|
279
|
+
|
|
280
|
+
/* Gradient angle input */
|
|
281
|
+
& input[x-colorpicker\.set-angle] {
|
|
282
|
+
width: 5.5ch;
|
|
283
|
+
cursor: ew-resize;
|
|
284
|
+
padding-inline-start: 0;
|
|
285
|
+
padding-inline-end: 0.75rem;
|
|
286
|
+
text-align: end;
|
|
287
|
+
|
|
288
|
+
&:focus {
|
|
289
|
+
cursor: text
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
/* Degree symbol */
|
|
294
|
+
& span {
|
|
295
|
+
position: absolute;
|
|
296
|
+
top: 0;
|
|
297
|
+
right: 0.25rem;
|
|
298
|
+
color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
/* Gradient stop bar */
|
|
303
|
+
& [x-colorpicker\.layer-stops-bar] {
|
|
304
|
+
position: relative;
|
|
305
|
+
width: 100%;
|
|
306
|
+
height: 0.75rem;
|
|
307
|
+
margin-inline-start: 1rem;
|
|
308
|
+
margin-inline-end: 0.5rem;
|
|
309
|
+
border-radius: 1rem;
|
|
310
|
+
cursor: pointer;
|
|
311
|
+
background: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
|
|
312
|
+
|
|
313
|
+
/* Stop handle */
|
|
314
|
+
& :where(.stop-handle) {
|
|
315
|
+
position: absolute;
|
|
316
|
+
top: 50%;
|
|
317
|
+
width: 1rem;
|
|
318
|
+
height: 1rem;
|
|
319
|
+
border-radius: 50%;
|
|
320
|
+
border: 2px solid #ffffff;
|
|
321
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
322
|
+
transform: translate(-50%, -50%);
|
|
323
|
+
cursor: grab;
|
|
324
|
+
z-index: 1;
|
|
325
|
+
touch-action: none;
|
|
326
|
+
|
|
327
|
+
&:hover {
|
|
328
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 5px rgba(0, 0, 0, 0.25)
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
&:active {
|
|
332
|
+
cursor: grabbing
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
&.active {
|
|
336
|
+
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 1px 5px rgba(0, 0, 0, 1)
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
}
|
|
232
342
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
display: none;
|
|
237
|
-
flex-direction: column;
|
|
238
|
-
min-width: 140px;
|
|
239
|
-
margin: 0;
|
|
240
|
-
padding: 0.25rem;
|
|
241
|
-
list-style: none;
|
|
242
|
-
background: var(--color-popover-surface, oklch(100% 0 0));
|
|
243
|
-
border-radius: var(--radius, 0.5rem);
|
|
244
|
-
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
|
|
245
|
-
z-index: 100;
|
|
246
|
-
|
|
247
|
-
& :where(li) {
|
|
248
|
-
display: flex;
|
|
249
|
-
align-items: center;
|
|
250
|
-
padding: 0.25rem 0.5rem;
|
|
251
|
-
font-size: 0.8125rem;
|
|
252
|
-
color: var(--color-content-stark, oklch(16.6% 0.026 267));
|
|
253
|
-
border-radius: 6px;
|
|
254
|
-
cursor: pointer;
|
|
255
|
-
user-select: none;
|
|
343
|
+
/* Solid options */
|
|
344
|
+
& [x-colorpicker\.solid] {
|
|
345
|
+
padding: 0;
|
|
256
346
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
347
|
+
& :where(.canvas-wrapper) {
|
|
348
|
+
width: calc(100% - 2rem);
|
|
349
|
+
margin: auto;
|
|
350
|
+
padding: 0 0 2px 0
|
|
351
|
+
}
|
|
260
352
|
|
|
261
|
-
|
|
262
|
-
|
|
353
|
+
& :where(.solid-options-inputs) {
|
|
354
|
+
padding-left: 1rem;
|
|
355
|
+
padding-right: 1rem
|
|
356
|
+
}
|
|
263
357
|
}
|
|
264
358
|
}
|
|
265
359
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
border-top: 1px solid var(--color-line, color-mix(in oklch, oklch(16.6% 0.026 267) 11%, transparent));
|
|
270
|
-
}
|
|
360
|
+
/* Gradient value wrapper */
|
|
361
|
+
& :where(.gradient-value-wrapper) {
|
|
362
|
+
padding: 0.5rem;
|
|
271
363
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
364
|
+
/* Gradient value input */
|
|
365
|
+
& [x-colorpicker\.set-gradient-value] {
|
|
366
|
+
resize: none;
|
|
367
|
+
field-sizing: content
|
|
368
|
+
}
|
|
277
369
|
}
|
|
278
370
|
}
|
|
279
371
|
|
|
280
|
-
|
|
281
|
-
& .
|
|
282
|
-
|
|
372
|
+
/* Hide gradient angle input when the gradient type doesn't use it (holds space via visibility) */
|
|
373
|
+
& [data-gradient-type="radial"] .layer-angle-wrapper {
|
|
374
|
+
visibility: hidden
|
|
283
375
|
}
|
|
284
376
|
|
|
285
|
-
/*
|
|
286
|
-
&
|
|
287
|
-
|
|
288
|
-
|
|
377
|
+
/* Library */
|
|
378
|
+
& [x-colorpicker\.library] {
|
|
379
|
+
max-height: 30rem;
|
|
380
|
+
overflow-y: auto;
|
|
289
381
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
382
|
+
/* Library wrapper */
|
|
383
|
+
& :where(.library-wrapper) {
|
|
384
|
+
display: flex;
|
|
385
|
+
flex-flow: column;
|
|
386
|
+
gap: 1rem;
|
|
387
|
+
width: 100%;
|
|
388
|
+
padding: 1rem 1rem 4rem 1rem;
|
|
389
|
+
|
|
390
|
+
/* Group wrapper */
|
|
391
|
+
& :where(.library-group) {
|
|
392
|
+
display: flex;
|
|
393
|
+
flex-direction: column;
|
|
394
|
+
width: 100%;
|
|
395
|
+
padding-bottom: 1rem;
|
|
396
|
+
gap: 0.5rem;
|
|
397
|
+
|
|
398
|
+
/* Only apply border to all except last library-group */
|
|
399
|
+
&:not(:last-child) {
|
|
400
|
+
border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(16.6% 0.026 267) 11%, transparent));
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/* Palette wrapper */
|
|
404
|
+
& :where(.library-palette) {
|
|
405
|
+
display: grid;
|
|
406
|
+
grid-template-columns: repeat(11, 1fr);
|
|
407
|
+
gap: 1px;
|
|
408
|
+
|
|
409
|
+
/* Swatch buttons */
|
|
410
|
+
& button[x-colorpicker\.apply-color] {
|
|
411
|
+
min-width: 0;
|
|
412
|
+
width: 100%;
|
|
413
|
+
max-width: 1.375rem;
|
|
414
|
+
min-height: 0;
|
|
415
|
+
height: auto;
|
|
416
|
+
max-height: 1.375rem;
|
|
417
|
+
aspect-ratio: 1/1;
|
|
418
|
+
border-radius: calc(var(--radius, 0.5rem) / 2);
|
|
419
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
420
|
+
|
|
421
|
+
&:hover {
|
|
422
|
+
border: 1px solid rgba(255, 255, 255, 0.35)
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
&.active {
|
|
426
|
+
border: 1px solid rgba(255, 255, 255, 1);
|
|
427
|
+
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 1px rgba(0, 0, 0, 1), inset 0 0 0 4px rgba(0, 0, 0, 0.25)
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
}
|
|
314
431
|
}
|
|
315
432
|
}
|
|
316
|
-
|
|
317
|
-
& span {
|
|
318
|
-
font-size: 0.625rem;
|
|
319
|
-
color: var(--color-content-subtle, oklch(52.38% 0.017 264.26));
|
|
320
|
-
pointer-events: none;
|
|
321
|
-
user-select: none;
|
|
322
|
-
}
|
|
323
433
|
}
|
|
434
|
+
}
|
|
324
435
|
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
border
|
|
331
|
-
cursor: pointer;
|
|
332
|
-
background: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
|
|
436
|
+
/* Colorpicker inside dropdown menu */
|
|
437
|
+
:where(menu[popover][x-colorpicker]:not(.unstyle)) {
|
|
438
|
+
padding: 0;
|
|
439
|
+
|
|
440
|
+
& .tabs-wrapper button {
|
|
441
|
+
border: 1px solid var(--color-popover-surface, oklch(100% 0 0))
|
|
333
442
|
}
|
|
443
|
+
}
|
|
334
444
|
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
343
|
-
transform: translate(-50%, -50%);
|
|
344
|
-
cursor: grab;
|
|
345
|
-
z-index: 1;
|
|
346
|
-
touch-action: none;
|
|
347
|
-
|
|
348
|
-
&.active {
|
|
349
|
-
box-shadow: 0 0 0 2px var(--color-brand-content, #de6618), 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
350
|
-
}
|
|
445
|
+
/* Library wrapper inside dropdown menu */
|
|
446
|
+
:where(menu[popover]:not(.unstyle) [x-colorpicker\.library], .dropdown-menu:not(.unstyle) [x-colorpicker\.library]) {
|
|
447
|
+
/* max-height: initial !important;
|
|
448
|
+
overflow: visible !important; */
|
|
449
|
+
|
|
450
|
+
& :where(.library-wrapper) {
|
|
451
|
+
padding: 0.5rem 0.5rem 4rem 0.5rem !important;
|
|
351
452
|
|
|
352
|
-
&:active {
|
|
353
|
-
cursor: grabbing;
|
|
354
|
-
}
|
|
355
453
|
}
|
|
356
454
|
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
min-width: 140px;
|
|
455
|
+
& :where(small) {
|
|
456
|
+
padding-inline-start: 0
|
|
360
457
|
}
|
|
458
|
+
}
|
|
361
459
|
|
|
362
|
-
|
|
363
|
-
|
|
460
|
+
/* Colorpicker button icons */
|
|
461
|
+
:where(.color-icon-solid, .color-icon-gradient, .color-icon-library, .color-icon-grab, .gradient-layer-icon-linear, .gradient-layer-icon-radial, .gradient-layer-icon-conic) {
|
|
462
|
+
height: calc(var(--spacing-field-height, 2.25rem) / 2);
|
|
463
|
+
max-height: 1rem;
|
|
464
|
+
aspect-ratio: 1/1;
|
|
465
|
+
background-color: currentColor
|
|
466
|
+
}
|
|
364
467
|
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
gap: 0.25rem;
|
|
370
|
-
|
|
371
|
-
& [data-color] {
|
|
372
|
-
width: 1.25rem;
|
|
373
|
-
height: 1.25rem;
|
|
374
|
-
border-radius: calc(var(--radius, 0.5rem) - 0.125rem);
|
|
375
|
-
border: 1px solid var(--color-line, color-mix(in oklch, oklch(16.6% 0.026 267) 11%, transparent));
|
|
376
|
-
cursor: pointer;
|
|
377
|
-
transition: var(--transition, all .05s ease-in-out);
|
|
468
|
+
/* Colorpicker dialog */
|
|
469
|
+
:where(dialog[x-colorpicker]) {
|
|
470
|
+
border-radius: calc(var(--radius, 0.5rem))
|
|
471
|
+
}
|
|
378
472
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
473
|
+
:where(.color-icon-solid) {
|
|
474
|
+
mask-image: var(--icon-color-solid)
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
:where(.color-icon-gradient) {
|
|
478
|
+
mask-image: var(--icon-color-gradient)
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
:where(.color-icon-library) {
|
|
482
|
+
mask-image: var(--icon-color-library)
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
:where(.color-icon-grab) {
|
|
486
|
+
mask-image: var(--icon-color-grab)
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.gradient-layer-icon-linear {
|
|
490
|
+
background: linear-gradient(to right, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)), color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 0%, transparent 100%));
|
|
491
|
+
border-radius: 50%
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.gradient-layer-icon-radial {
|
|
495
|
+
background: radial-gradient(var(--color-content-neutral, oklch(48.26% 0.0365 255.09)), color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 0%, transparent 100%));
|
|
496
|
+
border-radius: 50%
|
|
385
497
|
}
|
|
386
498
|
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
-webkit-appearance: none !important;
|
|
391
|
-
appearance: none !important;
|
|
392
|
-
margin: 0 !important;
|
|
393
|
-
display: none !important;
|
|
394
|
-
width: 0 !important;
|
|
395
|
-
height: 0 !important;
|
|
499
|
+
.gradient-layer-icon-conic {
|
|
500
|
+
background: conic-gradient(var(--color-content-neutral, oklch(48.26% 0.0365 255.09)), color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 0%, transparent 100%));
|
|
501
|
+
border-radius: 50%
|
|
396
502
|
}
|
|
397
503
|
}
|