@thednp/color-picker 0.0.2-alpha5 → 1.0.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.
- package/README.md +21 -19
- package/dist/css/color-picker.css +82 -46
- package/dist/css/color-picker.min.css +2 -2
- package/dist/css/color-picker.rtl.css +82 -46
- package/dist/css/color-picker.rtl.min.css +2 -2
- package/dist/js/color-esm.js +2 -5
- package/dist/js/color-esm.min.js +1 -1
- package/dist/js/color-palette-esm.js +2 -5
- package/dist/js/color-palette-esm.min.js +1 -1
- package/dist/js/color-palette.js +2 -5
- package/dist/js/color-palette.min.js +1 -1
- package/dist/js/color-picker-element-esm.js +184 -189
- package/dist/js/color-picker-element-esm.min.js +2 -2
- package/dist/js/color-picker-element.js +184 -189
- package/dist/js/color-picker-element.min.js +2 -2
- package/dist/js/color-picker-esm.js +77 -134
- package/dist/js/color-picker-esm.min.js +2 -2
- package/dist/js/color-picker.js +77 -134
- package/dist/js/color-picker.min.js +2 -2
- package/dist/js/color.js +2 -5
- package/dist/js/color.min.js +1 -1
- package/package.json +20 -19
- package/src/js/color-picker-element.js +45 -37
- package/src/js/color-picker.js +46 -60
- package/src/js/color.js +1 -4
- package/src/js/index.js +5 -0
- package/src/js/util/getColorMenu.js +7 -8
- package/src/js/util/setMarkup.js +4 -7
- package/src/js/util/toggleCEAttr.js +70 -0
- package/src/js/util/version.js +0 -1
- package/src/js/version.js +0 -1
- package/src/scss/_variables.scss +7 -0
- package/src/scss/color-picker.scss +86 -45
- package/types/cp.d.ts +31 -17
- package/types/index.d.ts +0 -4
- package/types/source/source.ts +0 -1
- package/types/source/types.d.ts +8 -6
package/README.md
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
## ColorPicker
|
|
2
|
+
[](https://coveralls.io/github/thednp/color-picker)
|
|
3
|
+
[](https://github.com/thednp/color-picker/actions/workflows/ci.yml)
|
|
4
|
+
[](https://www.npmjs.com/package/@thednp/color-picker)
|
|
5
|
+
[](http://npm-stat.com/charts.html?package=@thednp/color-picker)
|
|
6
|
+
[](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
|
|
7
|
+
|
|
8
|
+
|
|
3
9
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[](https://www.npmjs.com/package/@thednp/color-picker)
|
|
8
|
-
[](http://npm-stat.com/charts.html?package=@thednp/color-picker)
|
|
9
|
-
[](https://bundlephobia.com/package/@thednp/color-picker)
|
|
10
|
-
[](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
|
|
10
|
+
The feature rich **ColorPicker** component for the modern web built with TypeScript definitions, Cypress tested, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply `Color`.
|
|
11
11
|
|
|
12
12
|
**ColorPicker** can use existing colour palettes or generate custom ones via DATA API configuration. If you want to play, check out [this codepen](https://codepen.io/thednp/pen/WNdRWPN) I've setup for you. Have fun!
|
|
13
13
|
|
|
14
|
+
[](http://thednp.github.io/color-picker)
|
|
15
|
+
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
## Highlights
|
|
16
18
|
* Accessibility Focus for WAI-ARIA compliance
|
|
17
19
|
* ES6+ sources with TypeScript definitions
|
|
18
20
|
* Framework agnostic and flexible design
|
|
@@ -23,7 +25,8 @@ The feature rich **ColorPicker** component for the modern web built with TypeScr
|
|
|
23
25
|
* Right To Left Languages Supported
|
|
24
26
|
* light footprint, `10kb` in size when minified and gZipped
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
|
|
29
|
+
## Wiki
|
|
27
30
|
For an in depth guide on all things **ColorPicker**, check out the wiki pages:
|
|
28
31
|
* [Home](https://github.com/thednp/color-picker/wiki) - the **ColorPicker** wiki home.
|
|
29
32
|
* [NPM](https://github.com/thednp/color-picker/wiki/NPM) - quick installation guide.
|
|
@@ -32,16 +35,15 @@ For an in depth guide on all things **ColorPicker**, check out the wiki pages:
|
|
|
32
35
|
* [ES6+](https://github.com/thednp/color-picker/wiki/ES6) - your usual quick ES6+ guide.
|
|
33
36
|
* [Node.js](https://github.com/thednp/color-picker/wiki/Node.js) - is this a thing?
|
|
34
37
|
|
|
35
|
-
**Note** - the wiki pages are still under construction.
|
|
36
38
|
|
|
37
|
-
|
|
39
|
+
## NPM
|
|
38
40
|
You can install **ColorPicker** through NPM:
|
|
39
41
|
|
|
40
42
|
```
|
|
41
43
|
$ npm install @thednp/color-picker
|
|
42
44
|
```
|
|
43
45
|
|
|
44
|
-
|
|
46
|
+
## Browser Usage
|
|
45
47
|
Download the [latest package](https://github.com/thednp/color-picker/archive/master.zip). unpack and inspect the contents. You need to copy the `color-picker.js` and `color-picker.css` or their minified variations to your app `assets` folders as follows.
|
|
46
48
|
Link the required CSS in your document `<head>` tag
|
|
47
49
|
```html
|
|
@@ -89,14 +91,14 @@ Alternatively you can use the `ColorPickerElement` custom element, the `data-fun
|
|
|
89
91
|
As shown in the above example, all DATA API attributes for instance configuration are to be used on your **custom element**.
|
|
90
92
|
|
|
91
93
|
|
|
92
|
-
|
|
94
|
+
## Initialize INPUT
|
|
93
95
|
```javascript
|
|
94
96
|
import ColorPicker from '@thednp/color-picker';
|
|
95
97
|
|
|
96
|
-
|
|
98
|
+
const myPicker = new ColorPicker('#myPicker');
|
|
97
99
|
```
|
|
98
100
|
|
|
99
|
-
|
|
101
|
+
## Initialize Custom Element
|
|
100
102
|
```javascript
|
|
101
103
|
import ColorPickerElement from '@thednp/color-picker/src/color-picker-element';
|
|
102
104
|
|
|
@@ -115,7 +117,7 @@ document.body.append(myPicker);
|
|
|
115
117
|
Other configuration options apply, see [the API Guide](https://github.com/thednp/color-picker/wiki/API).
|
|
116
118
|
|
|
117
119
|
|
|
118
|
-
|
|
120
|
+
## Thanks
|
|
119
121
|
* Dimitris Grammatikogiannis for his [initial project](https://codepen.io/dgrammatiko/pen/zLvXwR) as well as testing and contributions
|
|
120
122
|
* Serhii Kulykov for his [Vanilla Colorful](https://github.com/web-padawan/vanilla-colorful)
|
|
121
123
|
* Brian Grinstead for his [TinyColor](https://github.com/bgrins/TinyColor)
|
|
@@ -124,5 +126,5 @@ Other configuration options apply, see [the API Guide](https://github.com/thednp
|
|
|
124
126
|
* Ștefan Petre at eyecon for his [colorPicker](https://www.eyecon.ro/colorpicker/)
|
|
125
127
|
* Brian Teeman for his [patience](https://github.com/joomla/joomla-cms/pull/35639)
|
|
126
128
|
|
|
127
|
-
|
|
129
|
+
## License
|
|
128
130
|
**ColorPicker** is released under the [MIT License](https://github.com/thednp/color-picker/blob/master/LICENSE).
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* ColorPicker
|
|
2
|
+
* ColorPicker v1.0.1 (http://thednp.github.io/color-picker)
|
|
3
3
|
* Copyright 2022 © thednp
|
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
|
5
5
|
*/
|
|
@@ -8,6 +8,38 @@ color-picker,
|
|
|
8
8
|
.color-picker {
|
|
9
9
|
position: relative;
|
|
10
10
|
display: flex;
|
|
11
|
+
--white-15: rgba(255, 255, 255, 0.15);
|
|
12
|
+
--white-25: rgba(255, 255, 255, 0.25);
|
|
13
|
+
--white-33: rgba(255, 255, 255, 0.33);
|
|
14
|
+
--white-50: rgba(255, 255, 255, 0.5);
|
|
15
|
+
--white-75: rgba(255, 255, 255, 0.75);
|
|
16
|
+
--white-90: rgba(255, 255, 255, 0.9);
|
|
17
|
+
--black-15: rgba(0, 0, 0, 0.15);
|
|
18
|
+
--black-25: rgba(0, 0, 0, 0.25);
|
|
19
|
+
--black-33: rgba(0, 0, 0, 0.33);
|
|
20
|
+
--black-50: rgba(0, 0, 0, 0.5);
|
|
21
|
+
--black-75: rgba(0, 0, 0, 0.75);
|
|
22
|
+
--black-90: rgba(0, 0, 0, 0.9);
|
|
23
|
+
--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;
|
|
24
|
+
--btn-transition: box-shadow 0.33s ease, border 0.33s ease;
|
|
25
|
+
--options-transition: height 0.33s ease;
|
|
26
|
+
--dropdown-bg: var(--black-75);
|
|
27
|
+
--dropdown-color: var(--white-75);
|
|
28
|
+
--dropdown-shadow: 0 6px 12px var(--black-33);
|
|
29
|
+
--dropdown-scrollbar-bg: var(--white-33);
|
|
30
|
+
--dropdown-scrollbar-bg-hover: var(--white-50);
|
|
31
|
+
--knob-bg: #000;
|
|
32
|
+
--knob-border: 1px solid var(--white-90);
|
|
33
|
+
--knob-shadow-hover: 0 0 0 6px var(--white-50);
|
|
34
|
+
--knob-shadow-active: 0 0 0 6px var(--white-90);
|
|
35
|
+
--input-border: 1px solid var(--white-15);
|
|
36
|
+
--input-border-hover: 1px solid var(--white-33);
|
|
37
|
+
--input-bg-hover: var(--black-15);
|
|
38
|
+
--option-color-hover: var(--black-75);
|
|
39
|
+
--option-bg-hover: var(--white-50);
|
|
40
|
+
--option-color-active: var(--black-75);
|
|
41
|
+
--option-bg-active: var(--white-90);
|
|
42
|
+
--visual-shadow: 0 0 0 1px var(--white-15) inset;
|
|
11
43
|
}
|
|
12
44
|
|
|
13
45
|
color-picker:focus,
|
|
@@ -23,12 +55,12 @@ color-picker:focus,
|
|
|
23
55
|
flex-direction: column;
|
|
24
56
|
width: min-content;
|
|
25
57
|
padding: 0.5rem;
|
|
26
|
-
color:
|
|
27
|
-
background:
|
|
58
|
+
color: var(--dropdown-color);
|
|
59
|
+
background: var(--dropdown-bg);
|
|
28
60
|
border-radius: 0.5rem;
|
|
29
|
-
box-shadow:
|
|
61
|
+
box-shadow: var(--dropdown-shadow);
|
|
30
62
|
opacity: 0;
|
|
31
|
-
transition:
|
|
63
|
+
transition: var(--dropdown-transition);
|
|
32
64
|
}
|
|
33
65
|
|
|
34
66
|
.color-dropdown.picker {
|
|
@@ -84,13 +116,12 @@ color-picker:focus,
|
|
|
84
116
|
border-radius: 0.25rem;
|
|
85
117
|
outline: none;
|
|
86
118
|
appearance: none;
|
|
87
|
-
transition
|
|
88
|
-
transition-property: box-shadow, border;
|
|
119
|
+
transition: var(--btn-transition);
|
|
89
120
|
}
|
|
90
121
|
|
|
91
122
|
.btn-appearance:focus,
|
|
92
123
|
.btn-appearance:hover {
|
|
93
|
-
box-shadow: 0 0 0 3px
|
|
124
|
+
box-shadow: 0 0 0 3px var(--black-15);
|
|
94
125
|
}
|
|
95
126
|
|
|
96
127
|
/* color-preview */
|
|
@@ -101,28 +132,28 @@ color-picker:focus,
|
|
|
101
132
|
}
|
|
102
133
|
|
|
103
134
|
.txt-dark .color-preview {
|
|
104
|
-
color:
|
|
135
|
+
color: var(--white-75);
|
|
105
136
|
}
|
|
106
137
|
|
|
107
138
|
.txt-dark .color-preview:focus {
|
|
108
|
-
box-shadow: 0 0 0 1px
|
|
139
|
+
box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--black-15);
|
|
109
140
|
}
|
|
110
141
|
|
|
111
142
|
.txt-dark .color-preview::placeholder {
|
|
112
|
-
color:
|
|
143
|
+
color: var(--white-50);
|
|
113
144
|
}
|
|
114
145
|
|
|
115
146
|
.txt-light .color-preview {
|
|
116
|
-
color:
|
|
147
|
+
color: var(--black-75);
|
|
117
148
|
}
|
|
118
149
|
|
|
119
150
|
.txt-light .color-preview:focus {
|
|
120
|
-
color:
|
|
121
|
-
box-shadow: 0 0 0 1px
|
|
151
|
+
color: var(--black-75);
|
|
152
|
+
box-shadow: 0 0 0 1px #000 inset, 0 0 0 3px var(--black-15);
|
|
122
153
|
}
|
|
123
154
|
|
|
124
155
|
.txt-light .color-preview::placeholder {
|
|
125
|
-
color:
|
|
156
|
+
color: var(--black-50);
|
|
126
157
|
}
|
|
127
158
|
|
|
128
159
|
/* picker-toggle */
|
|
@@ -155,21 +186,21 @@ color-picker:focus,
|
|
|
155
186
|
}
|
|
156
187
|
|
|
157
188
|
.txt-light .menu-toggle {
|
|
158
|
-
background:
|
|
189
|
+
background: var(--black-50);
|
|
159
190
|
}
|
|
160
191
|
|
|
161
192
|
.txt-light .menu-toggle:focus,
|
|
162
193
|
.txt-light .menu-toggle:focus {
|
|
163
|
-
background:
|
|
194
|
+
background: var(--black-75);
|
|
164
195
|
}
|
|
165
196
|
|
|
166
197
|
.txt-dark .menu-toggle {
|
|
167
|
-
background:
|
|
198
|
+
background: var(--white-33);
|
|
168
199
|
}
|
|
169
200
|
|
|
170
201
|
.txt-dark .menu-toggle:focus,
|
|
171
202
|
.txt-dark .menu-toggle:focus {
|
|
172
|
-
background:
|
|
203
|
+
background: var(--white-50);
|
|
173
204
|
}
|
|
174
205
|
|
|
175
206
|
.menu-toggle svg {
|
|
@@ -200,11 +231,11 @@ color-picker:focus,
|
|
|
200
231
|
}
|
|
201
232
|
|
|
202
233
|
.scrollable:hover::-webkit-scrollbar-thumb {
|
|
203
|
-
background-color:
|
|
234
|
+
background-color: var(--dropdown-scrollbar-bg);
|
|
204
235
|
}
|
|
205
236
|
|
|
206
237
|
.scrollable::-webkit-scrollbar-thumb:hover {
|
|
207
|
-
background-color:
|
|
238
|
+
background-color: var(--dropdown-scrollbar-bg-hover);
|
|
208
239
|
}
|
|
209
240
|
|
|
210
241
|
/* color-defaults */
|
|
@@ -237,27 +268,28 @@ color-picker:focus,
|
|
|
237
268
|
|
|
238
269
|
.color-defaults .color-option:focus,
|
|
239
270
|
.color-defaults .color-option:hover {
|
|
240
|
-
|
|
271
|
+
color: var(--option-color-hover);
|
|
272
|
+
background: var(--option-bg-hover);
|
|
241
273
|
outline: none;
|
|
242
274
|
}
|
|
243
275
|
|
|
244
276
|
.color-defaults .color-option:active,
|
|
245
277
|
.color-defaults .color-option.active {
|
|
246
|
-
color:
|
|
247
|
-
background:
|
|
278
|
+
color: var(--option-color-active);
|
|
279
|
+
background: var(--option-bg-active);
|
|
248
280
|
}
|
|
249
281
|
|
|
250
282
|
/* color-options grid */
|
|
251
283
|
.color-options {
|
|
252
|
-
display: grid;
|
|
253
|
-
padding: 0;
|
|
254
|
-
margin: 0;
|
|
255
|
-
list-style: none;
|
|
256
284
|
--grid-item-size: 2rem;
|
|
257
285
|
--grid-fit: 5;
|
|
258
286
|
--grid-gap: .25rem;
|
|
259
287
|
--grid-height: auto;
|
|
260
288
|
--grid-hover-height: auto;
|
|
289
|
+
display: grid;
|
|
290
|
+
padding: 0;
|
|
291
|
+
margin: 0;
|
|
292
|
+
list-style: none;
|
|
261
293
|
grid-template-columns: repeat(var(--grid-fit), var(--grid-item-size));
|
|
262
294
|
grid-template-rows: repeat(auto-fill, var(--grid-item-size));
|
|
263
295
|
gap: var(--grid-gap);
|
|
@@ -267,7 +299,7 @@ color-picker:focus,
|
|
|
267
299
|
height: var(--grid-height);
|
|
268
300
|
margin: 0 -0.5rem 0 0;
|
|
269
301
|
overflow-y: scroll;
|
|
270
|
-
transition:
|
|
302
|
+
transition: var(--options-transition);
|
|
271
303
|
}
|
|
272
304
|
|
|
273
305
|
.color-options.scrollable:hover {
|
|
@@ -312,7 +344,7 @@ color-picker:focus,
|
|
|
312
344
|
.color-options .color-option:active::before,
|
|
313
345
|
.color-options .color-option:focus::before {
|
|
314
346
|
content: "";
|
|
315
|
-
border: 3px solid
|
|
347
|
+
border: 3px solid var(--white-75);
|
|
316
348
|
mix-blend-mode: difference;
|
|
317
349
|
}
|
|
318
350
|
|
|
@@ -333,11 +365,11 @@ color-picker:focus,
|
|
|
333
365
|
}
|
|
334
366
|
|
|
335
367
|
.txt-dark .color-options .color-option.active:after {
|
|
336
|
-
box-shadow: 0 0 0 4px
|
|
368
|
+
box-shadow: 0 0 0 4px var(--white-90);
|
|
337
369
|
}
|
|
338
370
|
|
|
339
371
|
.txt-light .color-options .color-option.active:after {
|
|
340
|
-
box-shadow: 0 0 0 4px
|
|
372
|
+
box-shadow: 0 0 0 4px var(--black-90);
|
|
341
373
|
}
|
|
342
374
|
|
|
343
375
|
/* color-form */
|
|
@@ -370,25 +402,27 @@ color-picker:focus,
|
|
|
370
402
|
color: inherit;
|
|
371
403
|
text-align: right;
|
|
372
404
|
background: transparent;
|
|
373
|
-
border:
|
|
405
|
+
border: var(--input-border);
|
|
374
406
|
outline: none;
|
|
375
407
|
}
|
|
376
408
|
|
|
377
409
|
.color-input.hex {
|
|
378
410
|
width: 92.5%;
|
|
379
411
|
max-width: 92.5%;
|
|
380
|
-
/* width: calc(100% - 4% - 1rem); */
|
|
381
412
|
}
|
|
382
413
|
|
|
383
414
|
.color-input:active,
|
|
384
415
|
.color-input:focus {
|
|
385
|
-
background:
|
|
386
|
-
border:
|
|
416
|
+
background: var(--input-bg-hover);
|
|
417
|
+
border: var(--input-border-hover);
|
|
387
418
|
}
|
|
388
419
|
|
|
389
420
|
/* visual control */
|
|
390
421
|
.visual-control {
|
|
391
422
|
height: 150px;
|
|
423
|
+
/* important for mobile devices */
|
|
424
|
+
touch-action: none;
|
|
425
|
+
box-shadow: var(--visual-shadow);
|
|
392
426
|
}
|
|
393
427
|
|
|
394
428
|
.visual-control1 {
|
|
@@ -440,22 +474,24 @@ color-picker:focus,
|
|
|
440
474
|
top: 0;
|
|
441
475
|
left: 0;
|
|
442
476
|
height: 7px;
|
|
477
|
+
/* important for mobile devices */
|
|
478
|
+
touch-action: none;
|
|
443
479
|
user-select: none;
|
|
444
|
-
background-color:
|
|
445
|
-
border:
|
|
480
|
+
background-color: var(--knob-bg);
|
|
481
|
+
border: var(--knob-border);
|
|
446
482
|
border-radius: 5px;
|
|
447
483
|
outline: none;
|
|
448
484
|
will-change: transform;
|
|
449
485
|
}
|
|
450
486
|
|
|
451
487
|
.knob:hover {
|
|
452
|
-
box-shadow:
|
|
488
|
+
box-shadow: var(--knob-shadow-hover);
|
|
453
489
|
}
|
|
454
490
|
|
|
455
491
|
.knob:focus,
|
|
456
492
|
.knob:active {
|
|
457
493
|
z-index: 1;
|
|
458
|
-
box-shadow:
|
|
494
|
+
box-shadow: var(--knob-shadow-active);
|
|
459
495
|
}
|
|
460
496
|
|
|
461
497
|
/* color-pointer */
|
|
@@ -466,29 +502,29 @@ color-picker:focus,
|
|
|
466
502
|
}
|
|
467
503
|
|
|
468
504
|
.txt-dark .color-pointer {
|
|
469
|
-
box-shadow: 0 0 0 5px
|
|
505
|
+
box-shadow: 0 0 0 5px var(--white-50);
|
|
470
506
|
}
|
|
471
507
|
|
|
472
508
|
.txt-light .color-pointer {
|
|
473
|
-
box-shadow: 0 0 0 5px
|
|
509
|
+
box-shadow: 0 0 0 5px var(--black-50);
|
|
474
510
|
}
|
|
475
511
|
|
|
476
512
|
.txt-dark .color-pointer:hover {
|
|
477
|
-
box-shadow: 0 0 0 5px
|
|
513
|
+
box-shadow: 0 0 0 5px var(--white-75);
|
|
478
514
|
}
|
|
479
515
|
|
|
480
516
|
.txt-light .color-pointer:hover {
|
|
481
|
-
box-shadow: 0 0 0 5px
|
|
517
|
+
box-shadow: 0 0 0 5px var(--black-75);
|
|
482
518
|
}
|
|
483
519
|
|
|
484
520
|
.txt-dark .color-pointer:focus,
|
|
485
521
|
.txt-dark .color-pointer:active {
|
|
486
|
-
box-shadow: 0 0 0 5px
|
|
522
|
+
box-shadow: 0 0 0 5px var(--white-90);
|
|
487
523
|
}
|
|
488
524
|
|
|
489
525
|
.txt-light .color-pointer:focus,
|
|
490
526
|
.txt-light .color-pointer:active {
|
|
491
|
-
box-shadow: 0 0 0 5px
|
|
527
|
+
box-shadow: 0 0 0 5px var(--black-90);
|
|
492
528
|
}
|
|
493
529
|
|
|
494
530
|
/* utility */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/* ColorPicker
|
|
2
|
-
color-picker,.color-picker{position:relative;display:flex}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:
|
|
1
|
+
/* ColorPicker v1.0.1 | thednp © 2022 | MIT-License */
|
|
2
|
+
color-picker,.color-picker{position:relative;display:flex;--white-15: rgba(255, 255, 255, 0.15);--white-25: rgba(255, 255, 255, 0.25);--white-33: rgba(255, 255, 255, 0.33);--white-50: rgba(255, 255, 255, 0.5);--white-75: rgba(255, 255, 255, 0.75);--white-90: rgba(255, 255, 255, 0.9);--black-15: rgba(0, 0, 0, 0.15);--black-25: rgba(0, 0, 0, 0.25);--black-33: rgba(0, 0, 0, 0.33);--black-50: rgba(0, 0, 0, 0.5);--black-75: rgba(0, 0, 0, 0.75);--black-90: rgba(0, 0, 0, 0.9);--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;--btn-transition: box-shadow 0.33s ease, border 0.33s ease;--options-transition: height 0.33s ease;--dropdown-bg: var(--black-75);--dropdown-color: var(--white-75);--dropdown-shadow: 0 6px 12px var(--black-33);--dropdown-scrollbar-bg: var(--white-33);--dropdown-scrollbar-bg-hover: var(--white-50);--knob-bg: #000;--knob-border: 1px solid var(--white-90);--knob-shadow-hover: 0 0 0 6px var(--white-50);--knob-shadow-active: 0 0 0 6px var(--white-90);--input-border: 1px solid var(--white-15);--input-border-hover: 1px solid var(--white-33);--input-bg-hover: var(--black-15);--option-color-hover: var(--black-75);--option-bg-hover: var(--white-50);--option-color-active: var(--black-75);--option-bg-active: var(--white-90);--visual-shadow: 0 0 0 1px var(--white-15) inset}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:var(--dropdown-color);background:var(--dropdown-bg);border-radius:.5rem;box-shadow:var(--dropdown-shadow);opacity:0;transition:var(--dropdown-transition)}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;height:1.5rem;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition:var(--btn-transition)}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px var(--black-15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:var(--white-75)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px var(--black-15)}.txt-dark .color-preview::placeholder{color:var(--white-50)}.txt-light .color-preview{color:var(--black-75)}.txt-light .color-preview:focus{color:var(--black-75);box-shadow:0 0 0 1px #000 inset,0 0 0 3px var(--black-15)}.txt-light .color-preview::placeholder{color:var(--black-50)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:var(--black-50)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:var(--black-75)}.txt-dark .menu-toggle{background:var(--white-33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:var(--white-50)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:rgba(0,0,0,0)}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:rgba(0,0,0,0);background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:var(--dropdown-scrollbar-bg)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--dropdown-scrollbar-bg-hover)}.color-defaults{display:none;flex-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{color:var(--option-color-hover);background:var(--option-bg-hover);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:var(--option-color-active);background:var(--option-bg-active)}.color-options{--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;display:grid;padding:0;margin:0;list-style:none;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:var(--options-transition)}.color-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid var(--white-75);mix-blend-mode:difference}.color-options .color-option:active,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option.active:after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active:after{box-shadow:0 0 0 4px var(--white-90)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px var(--black-90)}.color-form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:rgba(0,0,0,0);border:var(--input-border);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:var(--input-bg-hover);border:var(--input-border-hover)}.visual-control{height:150px;touch-action:none;box-shadow:var(--visual-shadow)}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;height:7px;touch-action:none;user-select:none;background-color:var(--knob-bg);border:var(--knob-border);border-radius:5px;outline:none;will-change:transform}.knob:hover{box-shadow:var(--knob-shadow-hover)}.knob:focus,.knob:active{z-index:1;box-shadow:var(--knob-shadow-active)}.color-pointer{width:7px;background-color:rgba(0,0,0,0);border:0}.txt-dark .color-pointer{box-shadow:0 0 0 5px var(--white-50)}.txt-light .color-pointer{box-shadow:0 0 0 5px var(--black-50)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px var(--white-75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px var(--black-75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px var(--white-90)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px var(--black-90)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}
|