pickit-color 1.0.0
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/LICENSE.md +44 -0
- package/README.md +170 -0
- package/dist/colorpicker.css +881 -0
- package/dist/colorpicker.js +929 -0
- package/dist/colorpicker.min.css +1 -0
- package/dist/colorpicker.min.js +2 -0
- package/dist/esm/index.js +820 -0
- package/dist/esm/tsconfig.esm.tsbuildinfo +1 -0
- package/dist/index.d.ts +79 -0
- package/package.json +69 -0
- package/src/README.md +292 -0
- package/src/colorpicker.d.ts +52 -0
- package/src/colorpicker.styl +719 -0
- package/src/index.ts +1181 -0
|
@@ -0,0 +1,719 @@
|
|
|
1
|
+
/* Pickit ColorPicker Styles */
|
|
2
|
+
|
|
3
|
+
/* Variables */
|
|
4
|
+
$cp-radius = 8px
|
|
5
|
+
$cp-shadow = 0 4px 12px rgba(0, 0, 0, 0.15)
|
|
6
|
+
$cp-primary = #3b82f6
|
|
7
|
+
$cp-border = #e5e7eb
|
|
8
|
+
$cp-bg = #ffffff
|
|
9
|
+
$cp-text = #1f2937
|
|
10
|
+
|
|
11
|
+
/* Screen reader only */
|
|
12
|
+
.colorpicker-sr-only
|
|
13
|
+
position absolute
|
|
14
|
+
width 1px
|
|
15
|
+
height 1px
|
|
16
|
+
padding 0
|
|
17
|
+
margin -1px
|
|
18
|
+
overflow hidden
|
|
19
|
+
clip rect(0, 0, 0, 0)
|
|
20
|
+
white-space nowrap
|
|
21
|
+
border-width 0
|
|
22
|
+
|
|
23
|
+
/* Container */
|
|
24
|
+
.colorpicker-container
|
|
25
|
+
font-family system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
|
|
26
|
+
background $cp-bg
|
|
27
|
+
border 1px solid $cp-border
|
|
28
|
+
border-radius $cp-radius
|
|
29
|
+
box-shadow $cp-shadow
|
|
30
|
+
padding 16px
|
|
31
|
+
width 280px
|
|
32
|
+
user-select none
|
|
33
|
+
|
|
34
|
+
&:focus-within
|
|
35
|
+
outline 2px solid $cp-primary
|
|
36
|
+
outline-offset 2px
|
|
37
|
+
|
|
38
|
+
// Inline mode: adjust to container width
|
|
39
|
+
&.colorpicker-inline
|
|
40
|
+
width 100%
|
|
41
|
+
max-width 100%
|
|
42
|
+
box-shadow none
|
|
43
|
+
|
|
44
|
+
.colorpicker-saturation
|
|
45
|
+
height 200px
|
|
46
|
+
|
|
47
|
+
// Presets-only mode: compact layout
|
|
48
|
+
&.colorpicker-presets-only
|
|
49
|
+
width auto
|
|
50
|
+
min-width 200px
|
|
51
|
+
max-width 400px
|
|
52
|
+
|
|
53
|
+
.colorpicker-presets
|
|
54
|
+
margin 0
|
|
55
|
+
padding 0
|
|
56
|
+
|
|
57
|
+
// Inline + presets-only: full width
|
|
58
|
+
&.colorpicker-inline
|
|
59
|
+
max-width 100%
|
|
60
|
+
|
|
61
|
+
/* Content */
|
|
62
|
+
.colorpicker-content
|
|
63
|
+
display flex
|
|
64
|
+
flex-direction column
|
|
65
|
+
gap 16px
|
|
66
|
+
|
|
67
|
+
/* Saturation/Lightness Box */
|
|
68
|
+
.colorpicker-saturation
|
|
69
|
+
position relative
|
|
70
|
+
width 100%
|
|
71
|
+
height 180px
|
|
72
|
+
background linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)
|
|
73
|
+
border-radius ($cp-radius - 2px)
|
|
74
|
+
cursor crosshair
|
|
75
|
+
overflow hidden
|
|
76
|
+
|
|
77
|
+
&:focus
|
|
78
|
+
outline 2px solid $cp-primary
|
|
79
|
+
outline-offset 2px
|
|
80
|
+
|
|
81
|
+
&:focus:not(:focus-visible)
|
|
82
|
+
outline none
|
|
83
|
+
|
|
84
|
+
.colorpicker-saturation-overlay
|
|
85
|
+
position absolute
|
|
86
|
+
top 0
|
|
87
|
+
left 0
|
|
88
|
+
right 0
|
|
89
|
+
bottom 0
|
|
90
|
+
pointer-events none
|
|
91
|
+
|
|
92
|
+
.colorpicker-saturation-pointer
|
|
93
|
+
position absolute
|
|
94
|
+
width 20px
|
|
95
|
+
height 20px
|
|
96
|
+
border 3px solid #ffffff
|
|
97
|
+
border-radius 50%
|
|
98
|
+
box-shadow 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.1)
|
|
99
|
+
transform translate(-50%, -50%)
|
|
100
|
+
pointer-events none
|
|
101
|
+
transition transform 0.1s ease
|
|
102
|
+
|
|
103
|
+
@media (prefers-reduced-motion: reduce)
|
|
104
|
+
transition none
|
|
105
|
+
|
|
106
|
+
/* Controls Section */
|
|
107
|
+
.colorpicker-controls
|
|
108
|
+
display flex
|
|
109
|
+
gap 12px
|
|
110
|
+
align-items stretch
|
|
111
|
+
|
|
112
|
+
.colorpicker-sliders
|
|
113
|
+
flex 1
|
|
114
|
+
display flex
|
|
115
|
+
flex-direction column
|
|
116
|
+
gap 12px
|
|
117
|
+
|
|
118
|
+
.colorpicker-slider-group
|
|
119
|
+
display flex
|
|
120
|
+
flex-direction column
|
|
121
|
+
gap 4px
|
|
122
|
+
|
|
123
|
+
.colorpicker-label
|
|
124
|
+
font-size 12px
|
|
125
|
+
font-weight 500
|
|
126
|
+
color #6b7280
|
|
127
|
+
text-transform uppercase
|
|
128
|
+
letter-spacing 0.5px
|
|
129
|
+
|
|
130
|
+
/* Range Sliders */
|
|
131
|
+
.colorpicker-slider
|
|
132
|
+
-webkit-appearance none
|
|
133
|
+
appearance none
|
|
134
|
+
width 100%
|
|
135
|
+
height 8px
|
|
136
|
+
border-radius 4px
|
|
137
|
+
outline none
|
|
138
|
+
cursor pointer
|
|
139
|
+
|
|
140
|
+
&:focus
|
|
141
|
+
box-shadow 0 0 0 2px $cp-primary
|
|
142
|
+
|
|
143
|
+
&::-webkit-slider-thumb
|
|
144
|
+
-webkit-appearance none
|
|
145
|
+
appearance none
|
|
146
|
+
width 18px
|
|
147
|
+
height 18px
|
|
148
|
+
border-radius 50%
|
|
149
|
+
background #ffffff
|
|
150
|
+
border 2px solid $cp-primary
|
|
151
|
+
cursor pointer
|
|
152
|
+
box-shadow 0 2px 4px rgba(0, 0, 0, 0.2)
|
|
153
|
+
transition transform 0.1s ease
|
|
154
|
+
|
|
155
|
+
&:hover
|
|
156
|
+
transform scale(1.1)
|
|
157
|
+
|
|
158
|
+
&:active
|
|
159
|
+
transform scale(0.95)
|
|
160
|
+
|
|
161
|
+
&::-moz-range-thumb
|
|
162
|
+
width 18px
|
|
163
|
+
height 18px
|
|
164
|
+
border-radius 50%
|
|
165
|
+
background #ffffff
|
|
166
|
+
border 2px solid $cp-primary
|
|
167
|
+
cursor pointer
|
|
168
|
+
box-shadow 0 2px 4px rgba(0, 0, 0, 0.2)
|
|
169
|
+
transition transform 0.1s ease
|
|
170
|
+
|
|
171
|
+
&:hover
|
|
172
|
+
transform scale(1.1)
|
|
173
|
+
|
|
174
|
+
&:active
|
|
175
|
+
transform scale(0.95)
|
|
176
|
+
|
|
177
|
+
/* Hue Slider */
|
|
178
|
+
.colorpicker-hue-slider
|
|
179
|
+
background linear-gradient(to right,
|
|
180
|
+
hsl(0, 100%, 50%),
|
|
181
|
+
hsl(60, 100%, 50%),
|
|
182
|
+
hsl(120, 100%, 50%),
|
|
183
|
+
hsl(180, 100%, 50%),
|
|
184
|
+
hsl(240, 100%, 50%),
|
|
185
|
+
hsl(300, 100%, 50%),
|
|
186
|
+
hsl(360, 100%, 50%)
|
|
187
|
+
)
|
|
188
|
+
|
|
189
|
+
/* Alpha Slider */
|
|
190
|
+
.colorpicker-alpha-slider
|
|
191
|
+
background linear-gradient(to right, transparent, currentColor), linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)
|
|
192
|
+
background-size 100%, 10px 10px, 10px 10px, 10px 10px, 10px 10px
|
|
193
|
+
background-position 0 0, 0 0, 0 5px, 5px -5px, -5px 0px
|
|
194
|
+
|
|
195
|
+
/* Saturation & Lightness Sliders (backgrounds set dynamically in JS) */
|
|
196
|
+
.colorpicker-saturation-slider,
|
|
197
|
+
.colorpicker-lightness-slider
|
|
198
|
+
/* Background gradient is set dynamically based on current H/S values */
|
|
199
|
+
|
|
200
|
+
/* Slider-only mode layout */
|
|
201
|
+
.colorpicker-sliders-only
|
|
202
|
+
gap 12px
|
|
203
|
+
|
|
204
|
+
/* Controls Container - im Slider-Modus vertikal */
|
|
205
|
+
.colorpicker-controls
|
|
206
|
+
display flex
|
|
207
|
+
gap 12px
|
|
208
|
+
|
|
209
|
+
// Im normalen Modus: Slider links, Preview rechts
|
|
210
|
+
&:has(.colorpicker-sliders:not(.colorpicker-sliders-only))
|
|
211
|
+
flex-direction row
|
|
212
|
+
|
|
213
|
+
// Im Slider-Modus: Preview oben, dann Slider
|
|
214
|
+
&:has(.colorpicker-sliders-only)
|
|
215
|
+
flex-direction column
|
|
216
|
+
|
|
217
|
+
.colorpicker-preview
|
|
218
|
+
width 100%
|
|
219
|
+
height 48px
|
|
220
|
+
min-height 48px
|
|
221
|
+
order -1
|
|
222
|
+
|
|
223
|
+
.colorpicker-preview-color
|
|
224
|
+
min-height 48px
|
|
225
|
+
|
|
226
|
+
/* Preview */
|
|
227
|
+
.colorpicker-preview
|
|
228
|
+
width 40px
|
|
229
|
+
min-width 40px
|
|
230
|
+
height 40px
|
|
231
|
+
min-height 40px
|
|
232
|
+
display flex
|
|
233
|
+
align-items stretch
|
|
234
|
+
flex-shrink 0
|
|
235
|
+
|
|
236
|
+
.colorpicker-preview-color
|
|
237
|
+
flex 1
|
|
238
|
+
border-radius ($cp-radius - 2px)
|
|
239
|
+
border 2px solid $cp-border
|
|
240
|
+
box-shadow inset 0 2px 4px rgba(0, 0, 0, 0.05)
|
|
241
|
+
position relative
|
|
242
|
+
|
|
243
|
+
// Schachbrettmuster für Transparenz
|
|
244
|
+
&::before
|
|
245
|
+
content ''
|
|
246
|
+
position absolute
|
|
247
|
+
top 0
|
|
248
|
+
left 0
|
|
249
|
+
right 0
|
|
250
|
+
bottom 0
|
|
251
|
+
background linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)
|
|
252
|
+
background-size 10px 10px
|
|
253
|
+
background-position 0 0, 0 5px, 5px -5px, -5px 0px
|
|
254
|
+
border-radius ($cp-radius - 4px)
|
|
255
|
+
z-index -1
|
|
256
|
+
|
|
257
|
+
/* Input Wrapper (inside picker) */
|
|
258
|
+
.colorpicker-input-wrapper
|
|
259
|
+
display flex
|
|
260
|
+
flex-direction column
|
|
261
|
+
gap 4px
|
|
262
|
+
|
|
263
|
+
.colorpicker-input-row
|
|
264
|
+
display flex
|
|
265
|
+
gap 8px
|
|
266
|
+
align-items center
|
|
267
|
+
|
|
268
|
+
.colorpicker-input
|
|
269
|
+
flex 1
|
|
270
|
+
padding 8px 12px
|
|
271
|
+
border 1px solid $cp-border
|
|
272
|
+
border-radius ($cp-radius - 2px)
|
|
273
|
+
font-family 'Monaco', 'Menlo', monospace
|
|
274
|
+
font-size 14px
|
|
275
|
+
color $cp-text
|
|
276
|
+
background $cp-bg
|
|
277
|
+
transition border-color 0.2s ease, box-shadow 0.2s ease
|
|
278
|
+
|
|
279
|
+
&:focus
|
|
280
|
+
outline none
|
|
281
|
+
border-color $cp-primary
|
|
282
|
+
box-shadow 0 0 0 3px rgba(59, 130, 246, 0.1)
|
|
283
|
+
|
|
284
|
+
&::placeholder
|
|
285
|
+
color #9ca3af
|
|
286
|
+
|
|
287
|
+
.colorpicker-eyedropper-btn
|
|
288
|
+
display flex
|
|
289
|
+
align-items center
|
|
290
|
+
justify-content center
|
|
291
|
+
width 36px
|
|
292
|
+
height 36px
|
|
293
|
+
padding 8px
|
|
294
|
+
border 1px solid $cp-border
|
|
295
|
+
border-radius ($cp-radius - 2px)
|
|
296
|
+
background $cp-bg
|
|
297
|
+
color $cp-text
|
|
298
|
+
cursor pointer
|
|
299
|
+
transition all 0.2s ease
|
|
300
|
+
flex-shrink 0
|
|
301
|
+
|
|
302
|
+
&:hover
|
|
303
|
+
background #f3f4f6
|
|
304
|
+
border-color $cp-primary
|
|
305
|
+
|
|
306
|
+
&:active
|
|
307
|
+
transform scale(0.95)
|
|
308
|
+
|
|
309
|
+
&:focus
|
|
310
|
+
outline none
|
|
311
|
+
border-color $cp-primary
|
|
312
|
+
box-shadow 0 0 0 3px rgba(59, 130, 246, 0.1)
|
|
313
|
+
|
|
314
|
+
svg
|
|
315
|
+
width 20px
|
|
316
|
+
height 20px
|
|
317
|
+
display block
|
|
318
|
+
|
|
319
|
+
.colorpicker-system-picker-btn
|
|
320
|
+
display flex
|
|
321
|
+
align-items center
|
|
322
|
+
justify-content center
|
|
323
|
+
width 36px
|
|
324
|
+
height 36px
|
|
325
|
+
padding 8px
|
|
326
|
+
border 1px solid $cp-border
|
|
327
|
+
border-radius ($cp-radius - 2px)
|
|
328
|
+
background $cp-bg
|
|
329
|
+
color $cp-text
|
|
330
|
+
cursor pointer
|
|
331
|
+
transition all 0.2s ease
|
|
332
|
+
flex-shrink 0
|
|
333
|
+
|
|
334
|
+
&:hover
|
|
335
|
+
background #f3f4f6
|
|
336
|
+
border-color $cp-primary
|
|
337
|
+
|
|
338
|
+
&:active
|
|
339
|
+
transform scale(0.95)
|
|
340
|
+
|
|
341
|
+
&:focus
|
|
342
|
+
outline none
|
|
343
|
+
border-color $cp-primary
|
|
344
|
+
box-shadow 0 0 0 3px rgba(59, 130, 246, 0.1)
|
|
345
|
+
|
|
346
|
+
svg
|
|
347
|
+
width 20px
|
|
348
|
+
height 20px
|
|
349
|
+
display block
|
|
350
|
+
|
|
351
|
+
/* Presets */
|
|
352
|
+
.colorpicker-presets
|
|
353
|
+
display grid
|
|
354
|
+
grid-template-columns repeat(8, 1fr)
|
|
355
|
+
gap 8px
|
|
356
|
+
padding-top 4px
|
|
357
|
+
|
|
358
|
+
&.colorpicker-presets-list
|
|
359
|
+
grid-template-columns 1fr
|
|
360
|
+
gap 6px
|
|
361
|
+
|
|
362
|
+
.colorpicker-preset
|
|
363
|
+
width 100%
|
|
364
|
+
aspect-ratio 1
|
|
365
|
+
border 2px solid transparent
|
|
366
|
+
border-radius ($cp-radius - 4px)
|
|
367
|
+
cursor pointer
|
|
368
|
+
transition all 0.2s ease
|
|
369
|
+
position relative
|
|
370
|
+
overflow hidden
|
|
371
|
+
|
|
372
|
+
// Schachbrettmuster für Transparenz (als Pseudo-Element unter der Farbe)
|
|
373
|
+
&::before
|
|
374
|
+
content ''
|
|
375
|
+
position absolute
|
|
376
|
+
top 0
|
|
377
|
+
left 0
|
|
378
|
+
right 0
|
|
379
|
+
bottom 0
|
|
380
|
+
background linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)
|
|
381
|
+
background-size 6px 6px
|
|
382
|
+
background-position 0 0, 0 3px, 3px -3px, -3px 0px
|
|
383
|
+
z-index -1
|
|
384
|
+
|
|
385
|
+
&:hover
|
|
386
|
+
transform scale(1.15)
|
|
387
|
+
border-color $cp-primary
|
|
388
|
+
box-shadow 0 2px 8px rgba(0, 0, 0, 0.15)
|
|
389
|
+
|
|
390
|
+
&:focus
|
|
391
|
+
outline none
|
|
392
|
+
border-color $cp-primary
|
|
393
|
+
box-shadow 0 0 0 2px rgba(59, 130, 246, 0.3)
|
|
394
|
+
|
|
395
|
+
&:active
|
|
396
|
+
transform scale(0.95)
|
|
397
|
+
|
|
398
|
+
/* List view for presets */
|
|
399
|
+
.colorpicker-preset-list-item
|
|
400
|
+
aspect-ratio unset
|
|
401
|
+
display flex
|
|
402
|
+
align-items center
|
|
403
|
+
gap 12px
|
|
404
|
+
padding 8px 12px
|
|
405
|
+
background #f9fafb
|
|
406
|
+
|
|
407
|
+
&:hover
|
|
408
|
+
transform none
|
|
409
|
+
background #f3f4f6
|
|
410
|
+
|
|
411
|
+
&:focus
|
|
412
|
+
background #f3f4f6
|
|
413
|
+
|
|
414
|
+
.colorpicker-preset-color
|
|
415
|
+
width 32px
|
|
416
|
+
height 32px
|
|
417
|
+
border-radius 6px
|
|
418
|
+
flex-shrink 0
|
|
419
|
+
position relative
|
|
420
|
+
|
|
421
|
+
// Schachbrettmuster für Transparenz
|
|
422
|
+
&::before
|
|
423
|
+
content ''
|
|
424
|
+
position absolute
|
|
425
|
+
top 0
|
|
426
|
+
left 0
|
|
427
|
+
right 0
|
|
428
|
+
bottom 0
|
|
429
|
+
background linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)
|
|
430
|
+
background-size 6px 6px
|
|
431
|
+
background-position 0 0, 0 3px, 3px -3px, -3px 0px
|
|
432
|
+
border-radius 6px
|
|
433
|
+
z-index -1
|
|
434
|
+
|
|
435
|
+
.colorpicker-preset-label
|
|
436
|
+
font-size 14px
|
|
437
|
+
font-weight 500
|
|
438
|
+
color #1f2937
|
|
439
|
+
text-align left
|
|
440
|
+
flex 1
|
|
441
|
+
|
|
442
|
+
/* Input Group with Preview */
|
|
443
|
+
.colorpicker-input-group
|
|
444
|
+
display inline-flex
|
|
445
|
+
align-items stretch
|
|
446
|
+
width 100%
|
|
447
|
+
max-width 400px
|
|
448
|
+
border 2px solid $cp-border
|
|
449
|
+
border-radius $cp-radius
|
|
450
|
+
overflow hidden
|
|
451
|
+
transition all 0.2s ease
|
|
452
|
+
background $cp-bg
|
|
453
|
+
|
|
454
|
+
&:focus-within
|
|
455
|
+
border-color $cp-primary
|
|
456
|
+
box-shadow 0 0 0 3px rgba(59, 130, 246, 0.1)
|
|
457
|
+
|
|
458
|
+
.colorpicker-input-preview
|
|
459
|
+
display flex
|
|
460
|
+
align-items center
|
|
461
|
+
justify-content center
|
|
462
|
+
width 48px
|
|
463
|
+
min-width 48px
|
|
464
|
+
border-right 2px solid $cp-border
|
|
465
|
+
position relative
|
|
466
|
+
cursor pointer
|
|
467
|
+
transition background-color 0.2s ease
|
|
468
|
+
|
|
469
|
+
// Schachbrettmuster für Transparenz
|
|
470
|
+
&::before
|
|
471
|
+
content ''
|
|
472
|
+
position absolute
|
|
473
|
+
top 0
|
|
474
|
+
left 0
|
|
475
|
+
right 0
|
|
476
|
+
bottom 0
|
|
477
|
+
background linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)
|
|
478
|
+
background-size 8px 8px
|
|
479
|
+
background-position 0 0, 0 4px, 4px -4px, -4px 0px
|
|
480
|
+
z-index -1
|
|
481
|
+
|
|
482
|
+
input.colorpicker-has-preview
|
|
483
|
+
border none
|
|
484
|
+
flex 1
|
|
485
|
+
padding 10px 14px
|
|
486
|
+
font-size 15px
|
|
487
|
+
font-family 'Monaco', 'Menlo', monospace
|
|
488
|
+
background transparent
|
|
489
|
+
|
|
490
|
+
&:focus
|
|
491
|
+
outline none
|
|
492
|
+
box-shadow none
|
|
493
|
+
|
|
494
|
+
/* Compact Button */
|
|
495
|
+
.colorpicker-compact-button
|
|
496
|
+
display inline-flex
|
|
497
|
+
align-items center
|
|
498
|
+
justify-content center
|
|
499
|
+
width 40px
|
|
500
|
+
height 40px
|
|
501
|
+
padding 4px
|
|
502
|
+
border 2px solid $cp-border
|
|
503
|
+
border-radius ($cp-radius - 2px)
|
|
504
|
+
background $cp-bg
|
|
505
|
+
cursor pointer
|
|
506
|
+
transition all 0.2s ease
|
|
507
|
+
vertical-align middle
|
|
508
|
+
|
|
509
|
+
&:hover
|
|
510
|
+
border-color $cp-primary
|
|
511
|
+
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
|
|
512
|
+
transform translateY(-1px)
|
|
513
|
+
|
|
514
|
+
&:active
|
|
515
|
+
transform translateY(0) scale(0.98)
|
|
516
|
+
|
|
517
|
+
&:focus
|
|
518
|
+
outline none
|
|
519
|
+
border-color $cp-primary
|
|
520
|
+
box-shadow 0 0 0 3px rgba(59, 130, 246, 0.1)
|
|
521
|
+
|
|
522
|
+
// EyeDropper Icon im Compact Mode
|
|
523
|
+
svg
|
|
524
|
+
width 20px
|
|
525
|
+
height 20px
|
|
526
|
+
display block
|
|
527
|
+
color $cp-text
|
|
528
|
+
|
|
529
|
+
&:focus
|
|
530
|
+
outline none
|
|
531
|
+
border-color $cp-primary
|
|
532
|
+
box-shadow 0 0 0 3px rgba(59, 130, 246, 0.1)
|
|
533
|
+
|
|
534
|
+
&:active
|
|
535
|
+
transform translateY(0)
|
|
536
|
+
|
|
537
|
+
@media (prefers-reduced-motion: reduce)
|
|
538
|
+
transition none
|
|
539
|
+
|
|
540
|
+
&:hover
|
|
541
|
+
transform none
|
|
542
|
+
|
|
543
|
+
&:active
|
|
544
|
+
transform none
|
|
545
|
+
|
|
546
|
+
.colorpicker-compact-preview
|
|
547
|
+
display block
|
|
548
|
+
width 100%
|
|
549
|
+
height 100%
|
|
550
|
+
border-radius ($cp-radius - 4px)
|
|
551
|
+
border 1px solid rgba(0, 0, 0, 0.1)
|
|
552
|
+
position relative
|
|
553
|
+
overflow hidden
|
|
554
|
+
|
|
555
|
+
// Schachbrettmuster für Transparenz
|
|
556
|
+
&::before
|
|
557
|
+
content ''
|
|
558
|
+
position absolute
|
|
559
|
+
top 0
|
|
560
|
+
left 0
|
|
561
|
+
right 0
|
|
562
|
+
bottom 0
|
|
563
|
+
background linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)
|
|
564
|
+
background-size 6px 6px
|
|
565
|
+
background-position 0 0, 0 3px, 3px -3px, -3px 0px
|
|
566
|
+
z-index -1
|
|
567
|
+
|
|
568
|
+
/* Dark Mode Support */
|
|
569
|
+
@media (prefers-color-scheme: dark)
|
|
570
|
+
.colorpicker-container
|
|
571
|
+
background #1f2937
|
|
572
|
+
border-color #374151
|
|
573
|
+
color #e5e7eb
|
|
574
|
+
|
|
575
|
+
.colorpicker-compact-button
|
|
576
|
+
background #1f2937
|
|
577
|
+
border-color #374151
|
|
578
|
+
|
|
579
|
+
&:hover
|
|
580
|
+
border-color #60a5fa
|
|
581
|
+
box-shadow 0 2px 4px rgba(0, 0, 0, 0.3)
|
|
582
|
+
|
|
583
|
+
&:focus
|
|
584
|
+
border-color #60a5fa
|
|
585
|
+
box-shadow 0 0 0 3px rgba(96, 165, 250, 0.2)
|
|
586
|
+
|
|
587
|
+
.colorpicker-label
|
|
588
|
+
color #9ca3af
|
|
589
|
+
|
|
590
|
+
.colorpicker-input
|
|
591
|
+
background #111827
|
|
592
|
+
border-color #374151
|
|
593
|
+
color #f9fafb
|
|
594
|
+
|
|
595
|
+
&:focus
|
|
596
|
+
border-color #60a5fa
|
|
597
|
+
box-shadow 0 0 0 3px rgba(96, 165, 250, 0.2)
|
|
598
|
+
|
|
599
|
+
.colorpicker-preview-color
|
|
600
|
+
border-color #374151
|
|
601
|
+
|
|
602
|
+
.colorpicker-eyedropper-btn
|
|
603
|
+
background #1f2937
|
|
604
|
+
border-color #374151
|
|
605
|
+
color #e5e7eb
|
|
606
|
+
|
|
607
|
+
&:hover
|
|
608
|
+
background #111827
|
|
609
|
+
border-color #60a5fa
|
|
610
|
+
|
|
611
|
+
&:focus
|
|
612
|
+
border-color #60a5fa
|
|
613
|
+
box-shadow 0 0 0 3px rgba(96, 165, 250, 0.2)
|
|
614
|
+
|
|
615
|
+
.colorpicker-system-picker-btn
|
|
616
|
+
background #1f2937
|
|
617
|
+
border-color #374151
|
|
618
|
+
color #e5e7eb
|
|
619
|
+
|
|
620
|
+
&:hover
|
|
621
|
+
background #111827
|
|
622
|
+
border-color #60a5fa
|
|
623
|
+
|
|
624
|
+
&:focus
|
|
625
|
+
border-color #60a5fa
|
|
626
|
+
box-shadow 0 0 0 3px rgba(96, 165, 250, 0.2)
|
|
627
|
+
|
|
628
|
+
.colorpicker-slider
|
|
629
|
+
&:focus
|
|
630
|
+
box-shadow 0 0 0 2px #60a5fa
|
|
631
|
+
|
|
632
|
+
&::-webkit-slider-thumb
|
|
633
|
+
border-color #60a5fa
|
|
634
|
+
|
|
635
|
+
&::-moz-range-thumb
|
|
636
|
+
border-color #60a5fa
|
|
637
|
+
|
|
638
|
+
.colorpicker-preset
|
|
639
|
+
&:hover
|
|
640
|
+
border-color #60a5fa
|
|
641
|
+
|
|
642
|
+
&:focus
|
|
643
|
+
border-color #60a5fa
|
|
644
|
+
|
|
645
|
+
.colorpicker-preset-list-item
|
|
646
|
+
background #1f2937
|
|
647
|
+
|
|
648
|
+
&:hover
|
|
649
|
+
background #111827
|
|
650
|
+
border-color #374151
|
|
651
|
+
|
|
652
|
+
&:focus
|
|
653
|
+
background #111827
|
|
654
|
+
border-color #374151
|
|
655
|
+
|
|
656
|
+
.colorpicker-preset-label
|
|
657
|
+
color #e5e7eb
|
|
658
|
+
|
|
659
|
+
.colorpicker-input-group
|
|
660
|
+
background #1f2937
|
|
661
|
+
border-color #374151
|
|
662
|
+
|
|
663
|
+
&:focus-within
|
|
664
|
+
border-color #60a5fa
|
|
665
|
+
|
|
666
|
+
.colorpicker-input-preview
|
|
667
|
+
border-right-color #374151
|
|
668
|
+
|
|
669
|
+
input.colorpicker-has-preview
|
|
670
|
+
color #f9fafb
|
|
671
|
+
|
|
672
|
+
&:focus
|
|
673
|
+
box-shadow 0 0 0 2px rgba(96, 165, 250, 0.3)
|
|
674
|
+
|
|
675
|
+
/* High Contrast Mode */
|
|
676
|
+
@media (prefers-contrast: high)
|
|
677
|
+
.colorpicker-container
|
|
678
|
+
border-width 2px
|
|
679
|
+
|
|
680
|
+
.colorpicker-saturation
|
|
681
|
+
outline 2px solid currentColor
|
|
682
|
+
|
|
683
|
+
.colorpicker-saturation-pointer
|
|
684
|
+
border-width 4px
|
|
685
|
+
|
|
686
|
+
.colorpicker-preset
|
|
687
|
+
border-width 3px
|
|
688
|
+
|
|
689
|
+
/* Reduced Motion */
|
|
690
|
+
@media (prefers-reduced-motion: reduce)
|
|
691
|
+
.colorpicker-slider::-webkit-slider-thumb
|
|
692
|
+
transition none
|
|
693
|
+
|
|
694
|
+
.colorpicker-slider::-moz-range-thumb
|
|
695
|
+
transition none
|
|
696
|
+
|
|
697
|
+
.colorpicker-preset
|
|
698
|
+
transition none
|
|
699
|
+
|
|
700
|
+
.colorpicker-input
|
|
701
|
+
transition none
|
|
702
|
+
|
|
703
|
+
.colorpicker-saturation-pointer
|
|
704
|
+
transition none
|
|
705
|
+
|
|
706
|
+
/* Animation */
|
|
707
|
+
@keyframes colorpicker-fadeIn
|
|
708
|
+
from
|
|
709
|
+
opacity 0
|
|
710
|
+
transform translateY(-8px)
|
|
711
|
+
to
|
|
712
|
+
opacity 1
|
|
713
|
+
transform translateY(0)
|
|
714
|
+
|
|
715
|
+
.colorpicker-container:not([style*="display: none"])
|
|
716
|
+
animation colorpicker-fadeIn 0.2s ease-out
|
|
717
|
+
|
|
718
|
+
@media (prefers-reduced-motion: reduce)
|
|
719
|
+
animation none
|