mnfst 0.5.57 → 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 +503 -0
- 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
package/lib/manifest.code.js
CHANGED
|
@@ -226,6 +226,13 @@ function initializeCodePlugin() {
|
|
|
226
226
|
}
|
|
227
227
|
|
|
228
228
|
setupCodeGroup() {
|
|
229
|
+
// Idempotency: if a tab header is already present (from prerender output
|
|
230
|
+
// or a previous connection), skip rebuilding it. Otherwise the DOM ends
|
|
231
|
+
// up with a doubled tab row when the static page rehydrates.
|
|
232
|
+
if (this.querySelector(':scope > header[aria-label="Code examples"]')) {
|
|
233
|
+
return;
|
|
234
|
+
}
|
|
235
|
+
|
|
229
236
|
// Find all x-code elements within this group
|
|
230
237
|
const codeElements = this.querySelectorAll('x-code');
|
|
231
238
|
|
|
@@ -0,0 +1,503 @@
|
|
|
1
|
+
/* Manifest Color Picker */
|
|
2
|
+
|
|
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");
|
|
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");
|
|
10
|
+
}
|
|
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
|
+
|
|
32
|
+
@layer utilities {
|
|
33
|
+
|
|
34
|
+
/* Swatch trigger button */
|
|
35
|
+
:where([x-colorpicker\.swatch], input[type="color"]):not(.unstyle) {
|
|
36
|
+
position: relative;
|
|
37
|
+
width: var(--spacing-field-height, 2.25rem);
|
|
38
|
+
min-width: var(--spacing-field-height, 2.25rem);
|
|
39
|
+
max-width: var(--spacing-field-height, 2.25rem);
|
|
40
|
+
height: var(--spacing-field-height, 2.25rem);
|
|
41
|
+
padding: 0;
|
|
42
|
+
background: var(--color-picker-swatch, #000000);
|
|
43
|
+
border-width: 1px;
|
|
44
|
+
border-style: solid;
|
|
45
|
+
border-color: oklch(from var(--color-picker-swatch, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0));
|
|
46
|
+
border-radius: var(--radius, 0.5rem);
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
transition: var(--transition);
|
|
50
|
+
|
|
51
|
+
&:hover,
|
|
52
|
+
&:active,
|
|
53
|
+
&:focus,
|
|
54
|
+
&:focus-visible {
|
|
55
|
+
border-color: oklch(from var(--color-picker-swatch, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0) / 0.5)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Alpha pattern background */
|
|
59
|
+
&::before {
|
|
60
|
+
content: "";
|
|
61
|
+
position: absolute;
|
|
62
|
+
top: 0;
|
|
63
|
+
left: 0;
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100%;
|
|
66
|
+
z-index: -1;
|
|
67
|
+
background-image: var(--icon-alpha-pattern);
|
|
68
|
+
background-size: 50%;
|
|
69
|
+
background-position: top left
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
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;
|
|
80
|
+
|
|
81
|
+
/* Tabs wrapper */
|
|
82
|
+
& :where(.tabs-wrapper) {
|
|
83
|
+
display: flex;
|
|
84
|
+
width: 100%;
|
|
85
|
+
padding: 2px;
|
|
86
|
+
border-bottom: 1px solid var(--color-line, oklch(80% 0.0029 264.26));
|
|
87
|
+
|
|
88
|
+
/* Distribute button widths equally */
|
|
89
|
+
& button {
|
|
90
|
+
flex: 1;
|
|
91
|
+
justify-content: center
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
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
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Canvas (SV plane) */
|
|
110
|
+
& canvas {
|
|
111
|
+
display: block;
|
|
112
|
+
width: 100%;
|
|
113
|
+
height: 100%
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Canvas reticle indicator */
|
|
117
|
+
& :where(.color-reticle) {
|
|
118
|
+
position: absolute;
|
|
119
|
+
width: 0.75rem;
|
|
120
|
+
height: 0.75rem;
|
|
121
|
+
z-index: 1;
|
|
122
|
+
border: 2px solid #ffffff;
|
|
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
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
& :where(.solid-options-inputs) {
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-direction: column;
|
|
132
|
+
gap: 0.75rem;
|
|
133
|
+
padding: 0.75rem;
|
|
134
|
+
|
|
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%
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* Shared range styles */
|
|
142
|
+
& input[x-colorpicker\.set-hue],
|
|
143
|
+
& input[x-colorpicker\.set-alpha] {
|
|
144
|
+
width: 100%;
|
|
145
|
+
height: 0.75rem;
|
|
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;
|
|
154
|
+
|
|
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
|
+
}
|
|
170
|
+
|
|
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
|
+
}
|
|
191
|
+
|
|
192
|
+
/* Firefox track */
|
|
193
|
+
&::-moz-range-track {
|
|
194
|
+
height: 0.75rem;
|
|
195
|
+
border-radius: 1rem
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
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
|
+
}
|
|
207
|
+
|
|
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
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* Alpha range */
|
|
217
|
+
& input[x-colorpicker\.set-alpha] {
|
|
218
|
+
--color-picker-alpha: rgb(0, 0, 0);
|
|
219
|
+
position: relative;
|
|
220
|
+
|
|
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
|
+
}
|
|
226
|
+
|
|
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
|
+
}
|
|
232
|
+
}
|
|
233
|
+
|
|
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
|
+
}
|
|
241
|
+
|
|
242
|
+
/* Color value input */
|
|
243
|
+
& input[x-colorpicker\.set-color-value] {
|
|
244
|
+
flex: 1;
|
|
245
|
+
padding-inline-end: 0
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* Alpha value input */
|
|
249
|
+
& input[x-colorpicker\.set-alpha-value] {
|
|
250
|
+
width: fit-content;
|
|
251
|
+
padding-inline-start: 0;
|
|
252
|
+
text-align: end
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
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
|
+
}
|
|
342
|
+
|
|
343
|
+
/* Solid options */
|
|
344
|
+
& [x-colorpicker\.solid] {
|
|
345
|
+
padding: 0;
|
|
346
|
+
|
|
347
|
+
& :where(.canvas-wrapper) {
|
|
348
|
+
width: calc(100% - 2rem);
|
|
349
|
+
margin: auto;
|
|
350
|
+
padding: 0 0 2px 0
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
& :where(.solid-options-inputs) {
|
|
354
|
+
padding-left: 1rem;
|
|
355
|
+
padding-right: 1rem
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/* Gradient value wrapper */
|
|
361
|
+
& :where(.gradient-value-wrapper) {
|
|
362
|
+
padding: 0.5rem;
|
|
363
|
+
|
|
364
|
+
/* Gradient value input */
|
|
365
|
+
& [x-colorpicker\.set-gradient-value] {
|
|
366
|
+
resize: none;
|
|
367
|
+
field-sizing: content
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
|
|
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
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
/* Library */
|
|
378
|
+
& [x-colorpicker\.library] {
|
|
379
|
+
max-height: 30rem;
|
|
380
|
+
overflow-y: auto;
|
|
381
|
+
|
|
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
|
+
}
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
|
|
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))
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
|
|
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;
|
|
452
|
+
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
& :where(small) {
|
|
456
|
+
padding-inline-start: 0
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
|
|
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
|
+
}
|
|
467
|
+
|
|
468
|
+
/* Colorpicker dialog */
|
|
469
|
+
:where(dialog[x-colorpicker]) {
|
|
470
|
+
border-radius: calc(var(--radius, 0.5rem))
|
|
471
|
+
}
|
|
472
|
+
|
|
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%
|
|
497
|
+
}
|
|
498
|
+
|
|
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%
|
|
502
|
+
}
|
|
503
|
+
}
|