@tresjs/cientos 5.9.1 → 5.9.2
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/dist/trescientos.css +454 -434
- package/dist/trescientos.d.ts +533 -11358
- package/dist/trescientos.js +787 -1158
- package/package.json +24 -23
package/dist/trescientos.css
CHANGED
|
@@ -1,982 +1,1002 @@
|
|
|
1
|
-
.cientos-decal-ui,
|
|
2
|
-
.cientos-decal-ui * {
|
|
1
|
+
.cientos-decal-ui, .cientos-decal-ui * {
|
|
3
2
|
box-sizing: border-box;
|
|
4
3
|
}
|
|
5
4
|
|
|
6
5
|
.cientos-decal-ui {
|
|
7
|
-
position: fixed;
|
|
8
|
-
inset: 0;
|
|
9
6
|
pointer-events: none;
|
|
10
7
|
z-index: 1000000;
|
|
11
|
-
|
|
12
|
-
font-family:
|
|
13
|
-
'Inter',
|
|
14
|
-
-apple-system,
|
|
15
|
-
BlinkMacSystemFont,
|
|
16
|
-
'SF Pro Text',
|
|
17
|
-
'Segoe UI',
|
|
18
|
-
Roboto,
|
|
19
|
-
system-ui,
|
|
20
|
-
sans-serif;
|
|
21
|
-
font-feature-settings: 'cv11', 'ss01', 'tnum';
|
|
8
|
+
font-feature-settings: "cv11", "ss01", "tnum";
|
|
22
9
|
-webkit-font-smoothing: antialiased;
|
|
23
10
|
-moz-osx-font-smoothing: grayscale;
|
|
24
|
-
letter-spacing:
|
|
11
|
+
letter-spacing: -.005em;
|
|
25
12
|
user-select: none;
|
|
26
|
-
|
|
27
13
|
--accent: #fbb03b;
|
|
28
|
-
--accent-glow:
|
|
29
|
-
--accent-soft:
|
|
14
|
+
--accent-glow: #fbb03b73;
|
|
15
|
+
--accent-soft: #fbb03b24;
|
|
30
16
|
--danger: #ef4444;
|
|
31
|
-
--danger-bg:
|
|
32
|
-
--kbd-bg:
|
|
17
|
+
--danger-bg: #ef444414;
|
|
18
|
+
--kbd-bg: #ffffff38;
|
|
19
|
+
font-family: Inter, -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI, Roboto, system-ui, sans-serif;
|
|
20
|
+
position: fixed;
|
|
21
|
+
inset: 0;
|
|
33
22
|
}
|
|
23
|
+
|
|
34
24
|
.cientos-decal-ui.is-contained {
|
|
35
|
-
position: absolute;
|
|
36
25
|
z-index: 10;
|
|
26
|
+
position: absolute;
|
|
37
27
|
}
|
|
38
28
|
|
|
39
29
|
.cientos-decal-ui.theme-light {
|
|
40
|
-
--dock-bg:
|
|
41
|
-
--dock-border:
|
|
42
|
-
--dock-inner-highlight:
|
|
43
|
-
--dock-shadow: 0 24px 48px -16px
|
|
44
|
-
--text-strong:
|
|
45
|
-
--text-muted:
|
|
46
|
-
--text-faint:
|
|
47
|
-
--divider:
|
|
48
|
-
--hover-bg:
|
|
49
|
-
--idle-bg:
|
|
50
|
-
--idle-border:
|
|
30
|
+
--dock-bg: #ffffffc7;
|
|
31
|
+
--dock-border: #ffffffb3;
|
|
32
|
+
--dock-inner-highlight: #fffc;
|
|
33
|
+
--dock-shadow: 0 24px 48px -16px #0f172a2e, 0 8px 18px -6px #0f172a1f;
|
|
34
|
+
--text-strong: #18181b;
|
|
35
|
+
--text-muted: #52525b;
|
|
36
|
+
--text-faint: #a1a1aa;
|
|
37
|
+
--divider: #00000014;
|
|
38
|
+
--hover-bg: #0000000d;
|
|
39
|
+
--idle-bg: #f4f4f599;
|
|
40
|
+
--idle-border: #0000000f;
|
|
51
41
|
--thumb-bg-a: #fafafa;
|
|
52
42
|
--thumb-bg-b: #e5e5e5;
|
|
53
|
-
--thumb-ring:
|
|
54
|
-
--thumb-ring-hover:
|
|
43
|
+
--thumb-ring: #00000014;
|
|
44
|
+
--thumb-ring-hover: #fbb03b66;
|
|
55
45
|
}
|
|
56
46
|
|
|
57
47
|
.cientos-decal-ui.theme-dark {
|
|
58
|
-
--dock-bg:
|
|
59
|
-
--dock-border:
|
|
60
|
-
--dock-inner-highlight:
|
|
61
|
-
--dock-shadow: 0 24px 48px -16px
|
|
62
|
-
--text-strong:
|
|
63
|
-
--text-muted:
|
|
64
|
-
--text-faint:
|
|
65
|
-
--divider:
|
|
66
|
-
--hover-bg:
|
|
67
|
-
--idle-bg:
|
|
68
|
-
--idle-border:
|
|
48
|
+
--dock-bg: #14161ac7;
|
|
49
|
+
--dock-border: #ffffff14;
|
|
50
|
+
--dock-inner-highlight: #ffffff0d;
|
|
51
|
+
--dock-shadow: 0 24px 48px -16px #0009, 0 8px 18px -6px #0006;
|
|
52
|
+
--text-strong: #fffffff5;
|
|
53
|
+
--text-muted: #ffffffa6;
|
|
54
|
+
--text-faint: #ffffff59;
|
|
55
|
+
--divider: #ffffff14;
|
|
56
|
+
--hover-bg: #ffffff14;
|
|
57
|
+
--idle-bg: #ffffff08;
|
|
58
|
+
--idle-border: #ffffff0f;
|
|
69
59
|
--thumb-bg-a: #1f2024;
|
|
70
60
|
--thumb-bg-b: #2a2b30;
|
|
71
|
-
--thumb-ring:
|
|
72
|
-
--thumb-ring-hover:
|
|
61
|
+
--thumb-ring: #ffffff1a;
|
|
62
|
+
--thumb-ring-hover: #fbb03b80;
|
|
73
63
|
}
|
|
74
64
|
|
|
75
65
|
.cientos-decal-ui .handle-wrapper {
|
|
66
|
+
pointer-events: none;
|
|
76
67
|
position: absolute;
|
|
77
68
|
inset: 0;
|
|
78
|
-
pointer-events: none;
|
|
79
69
|
}
|
|
80
70
|
|
|
81
71
|
.cientos-decal-ui .handle-area {
|
|
82
|
-
position: fixed;
|
|
83
|
-
width: clamp(120px, 22vw, 240px);
|
|
84
72
|
aspect-ratio: 1;
|
|
85
73
|
pointer-events: none;
|
|
86
74
|
opacity: 0;
|
|
87
|
-
transition: opacity 200ms;
|
|
88
75
|
touch-action: none;
|
|
76
|
+
width: clamp(120px, 22vw, 240px);
|
|
77
|
+
transition: opacity .2s;
|
|
78
|
+
position: fixed;
|
|
89
79
|
}
|
|
80
|
+
|
|
90
81
|
.cientos-decal-ui .handle-area.is-active {
|
|
91
82
|
pointer-events: auto;
|
|
92
83
|
opacity: 1;
|
|
93
84
|
}
|
|
94
85
|
|
|
95
86
|
.cientos-decal-ui .handle-inner {
|
|
96
|
-
position: relative;
|
|
97
|
-
width: 100%;
|
|
98
|
-
height: 100%;
|
|
99
87
|
will-change: transform;
|
|
100
88
|
transform-origin: center;
|
|
101
89
|
cursor: grab;
|
|
90
|
+
width: 100%;
|
|
91
|
+
height: 100%;
|
|
92
|
+
position: relative;
|
|
102
93
|
}
|
|
94
|
+
|
|
103
95
|
.cientos-decal-ui .handle-inner:active {
|
|
104
96
|
cursor: grabbing;
|
|
105
97
|
}
|
|
106
98
|
|
|
107
99
|
.cientos-decal-ui .circle-center {
|
|
100
|
+
background: #fff;
|
|
101
|
+
border-radius: 999px;
|
|
102
|
+
width: 6px;
|
|
103
|
+
height: 6px;
|
|
108
104
|
position: absolute;
|
|
109
105
|
top: 50%;
|
|
110
106
|
left: 50%;
|
|
111
107
|
transform: translate(-50%, -50%);
|
|
112
|
-
|
|
113
|
-
height: 6px;
|
|
114
|
-
border-radius: 999px;
|
|
115
|
-
background: white;
|
|
116
|
-
box-shadow:
|
|
117
|
-
0 0 0 2px rgba(0, 0, 0, 0.3),
|
|
118
|
-
0 0 12px rgba(0, 0, 0, 0.45);
|
|
108
|
+
box-shadow: 0 0 0 2px #0000004d, 0 0 12px #00000073;
|
|
119
109
|
}
|
|
110
|
+
|
|
120
111
|
.cientos-decal-ui .circle-ring {
|
|
112
|
+
border: 1px solid #fffffff2;
|
|
113
|
+
border-radius: 50%;
|
|
121
114
|
position: absolute;
|
|
122
115
|
inset: 0;
|
|
123
|
-
|
|
124
|
-
border: 1px solid rgba(255, 255, 255, 0.95);
|
|
125
|
-
box-shadow:
|
|
126
|
-
0 6px 24px -4px rgba(0, 0, 0, 0.25),
|
|
127
|
-
0 2px 6px -1px rgba(0, 0, 0, 0.12),
|
|
128
|
-
inset 0 0 0 1px rgba(0, 0, 0, 0.04);
|
|
116
|
+
box-shadow: 0 6px 24px -4px #00000040, 0 2px 6px -1px #0000001f, inset 0 0 0 1px #0000000a;
|
|
129
117
|
}
|
|
118
|
+
|
|
130
119
|
.cientos-decal-ui.theme-dark .circle-ring {
|
|
131
|
-
border-color:
|
|
120
|
+
border-color: #ffffffd9;
|
|
132
121
|
}
|
|
133
122
|
|
|
134
123
|
.cientos-decal-ui .slider-anchor {
|
|
135
|
-
position: absolute;
|
|
136
|
-
top: 50%;
|
|
137
|
-
left: 50%;
|
|
138
124
|
transform-origin: center;
|
|
139
125
|
z-index: 9999;
|
|
140
126
|
cursor: grab;
|
|
141
127
|
touch-action: none;
|
|
128
|
+
position: absolute;
|
|
129
|
+
top: 50%;
|
|
130
|
+
left: 50%;
|
|
142
131
|
}
|
|
132
|
+
|
|
143
133
|
.cientos-decal-ui .slider-anchor:active {
|
|
144
134
|
cursor: grabbing;
|
|
145
135
|
}
|
|
136
|
+
|
|
146
137
|
.cientos-decal-ui .slider-handle {
|
|
138
|
+
background: #fff;
|
|
139
|
+
border-radius: 999px;
|
|
147
140
|
width: 36px;
|
|
148
141
|
height: 10px;
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
box-shadow:
|
|
152
|
-
0 0 0 1px rgba(0, 0, 0, 0.08),
|
|
153
|
-
0 2px 5px -1px rgba(0, 0, 0, 0.25);
|
|
154
|
-
transition:
|
|
155
|
-
background-color 150ms,
|
|
156
|
-
box-shadow 150ms,
|
|
157
|
-
transform 150ms;
|
|
142
|
+
transition: background-color .15s, box-shadow .15s, transform .15s;
|
|
143
|
+
box-shadow: 0 0 0 1px #00000014, 0 2px 5px -1px #00000040;
|
|
158
144
|
}
|
|
145
|
+
|
|
159
146
|
.cientos-decal-ui .slider-handle:hover {
|
|
160
|
-
box-shadow:
|
|
161
|
-
0 0 0 1px rgba(251, 176, 59, 0.6),
|
|
147
|
+
box-shadow: 0 0 0 1px #fbb03b99,
|
|
162
148
|
0 3px 10px -2px var(--accent-glow);
|
|
163
149
|
}
|
|
150
|
+
|
|
164
151
|
.cientos-decal-ui .slider-handle.is-dragging {
|
|
165
152
|
background: var(--accent);
|
|
153
|
+
box-shadow: 0 4px 12px -2px var(--accent-glow),
|
|
154
|
+
0 0 0 3px #fbb03b2e;
|
|
166
155
|
transform: scale(1.1);
|
|
167
|
-
box-shadow:
|
|
168
|
-
0 4px 12px -2px var(--accent-glow),
|
|
169
|
-
0 0 0 3px rgba(251, 176, 59, 0.18);
|
|
170
156
|
}
|
|
171
157
|
|
|
172
158
|
.cientos-decal-ui .snap-vignette {
|
|
159
|
+
pointer-events: none;
|
|
160
|
+
border-radius: 9999px;
|
|
173
161
|
position: absolute;
|
|
174
162
|
inset: 0;
|
|
175
|
-
|
|
176
|
-
pointer-events: none;
|
|
177
|
-
box-shadow: inset 0 0 12px 2px rgba(0, 0, 0, 0.28);
|
|
163
|
+
box-shadow: inset 0 0 12px 2px #00000047;
|
|
178
164
|
}
|
|
165
|
+
|
|
179
166
|
.cientos-decal-ui .snap-ticks {
|
|
180
|
-
|
|
181
|
-
|
|
167
|
+
pointer-events: none;
|
|
168
|
+
filter: drop-shadow(0 0 .6px #0000008c);
|
|
182
169
|
width: 100%;
|
|
183
170
|
height: 100%;
|
|
184
|
-
|
|
185
|
-
|
|
171
|
+
position: absolute;
|
|
172
|
+
inset: 0;
|
|
186
173
|
}
|
|
187
174
|
|
|
188
175
|
.cientos-decal-ui .live-badge {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
176
|
+
color: #fffffff2;
|
|
177
|
+
font-variant-numeric: tabular-nums;
|
|
178
|
+
-webkit-backdrop-filter: blur(8px);
|
|
179
|
+
pointer-events: none;
|
|
180
|
+
white-space: nowrap;
|
|
181
|
+
background: #0f0f11e6;
|
|
182
|
+
border-radius: 999px;
|
|
194
183
|
align-items: center;
|
|
195
184
|
gap: 8px;
|
|
196
185
|
padding: 4px 10px;
|
|
197
|
-
border-radius: 999px;
|
|
198
|
-
background: rgba(15, 15, 17, 0.9);
|
|
199
|
-
color: rgba(255, 255, 255, 0.95);
|
|
200
186
|
font-size: 10px;
|
|
201
187
|
font-weight: 500;
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
188
|
+
display: inline-flex;
|
|
189
|
+
position: absolute;
|
|
190
|
+
top: -14px;
|
|
191
|
+
right: 0;
|
|
192
|
+
transform: translateX(33%);
|
|
193
|
+
box-shadow: 0 4px 12px -2px #00000040;
|
|
208
194
|
}
|
|
195
|
+
|
|
209
196
|
.cientos-decal-ui .live-badge__scale {
|
|
210
197
|
color: var(--accent);
|
|
211
198
|
font-weight: 600;
|
|
212
199
|
}
|
|
200
|
+
|
|
213
201
|
.cientos-decal-ui .live-badge__sep {
|
|
214
|
-
color:
|
|
202
|
+
color: #ffffff40;
|
|
215
203
|
}
|
|
204
|
+
|
|
216
205
|
.cientos-decal-ui .live-badge__layer {
|
|
217
|
-
color:
|
|
206
|
+
color: #ffffffb3;
|
|
218
207
|
}
|
|
219
208
|
|
|
220
209
|
.cientos-decal-ui .dock-stack {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
bottom: 24px;
|
|
224
|
-
transform: translateX(-50%);
|
|
225
|
-
display: flex;
|
|
210
|
+
opacity: 0;
|
|
211
|
+
pointer-events: none;
|
|
226
212
|
flex-direction: column;
|
|
227
213
|
align-items: center;
|
|
228
214
|
gap: 8px;
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
215
|
+
transition: opacity .2s, transform .2s;
|
|
216
|
+
display: flex;
|
|
217
|
+
position: absolute;
|
|
218
|
+
bottom: 24px;
|
|
219
|
+
left: 50%;
|
|
220
|
+
transform: translateX(-50%);
|
|
234
221
|
}
|
|
222
|
+
|
|
235
223
|
.cientos-decal-ui .dock-stack.is-visible {
|
|
236
224
|
opacity: 1;
|
|
237
225
|
pointer-events: auto;
|
|
238
226
|
}
|
|
239
227
|
|
|
240
228
|
.cientos-decal-ui .dock {
|
|
241
|
-
display: flex;
|
|
242
|
-
align-items: stretch;
|
|
243
|
-
gap: 6px;
|
|
244
|
-
padding: 6px;
|
|
245
|
-
border-radius: 16px;
|
|
246
229
|
background: var(--dock-bg);
|
|
247
230
|
border: 1px solid var(--dock-border);
|
|
248
|
-
box-shadow:
|
|
249
|
-
var(--dock-shadow),
|
|
231
|
+
box-shadow: var(--dock-shadow),
|
|
250
232
|
inset 0 1px 0 var(--dock-inner-highlight);
|
|
251
|
-
backdrop-filter: blur(20px) saturate(180%);
|
|
252
233
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
234
|
+
border-radius: 16px;
|
|
235
|
+
align-items: stretch;
|
|
236
|
+
gap: 6px;
|
|
237
|
+
padding: 6px;
|
|
238
|
+
display: flex;
|
|
253
239
|
}
|
|
254
240
|
|
|
255
241
|
.cientos-decal-ui .divider {
|
|
242
|
+
background: var(--divider);
|
|
256
243
|
align-self: center;
|
|
257
244
|
width: 1px;
|
|
258
245
|
height: 18px;
|
|
259
|
-
background: var(--divider);
|
|
260
246
|
margin: 0 4px;
|
|
261
247
|
}
|
|
262
248
|
|
|
263
249
|
.cientos-decal-ui .mode-badge {
|
|
264
|
-
|
|
250
|
+
color: #fff;
|
|
251
|
+
letter-spacing: .12em;
|
|
252
|
+
text-transform: uppercase;
|
|
253
|
+
border-radius: 12px;
|
|
265
254
|
align-items: center;
|
|
266
255
|
gap: 8px;
|
|
267
256
|
padding: 0 14px;
|
|
268
|
-
border-radius: 12px;
|
|
269
|
-
color: white;
|
|
270
257
|
font-size: 10.5px;
|
|
271
258
|
font-weight: 600;
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
box-shadow:
|
|
275
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
|
276
|
-
0 1px 2px rgba(0, 0, 0, 0.15);
|
|
259
|
+
display: inline-flex;
|
|
260
|
+
box-shadow: inset 0 1px #ffffff26, 0 1px 2px #00000026;
|
|
277
261
|
}
|
|
262
|
+
|
|
278
263
|
.cientos-decal-ui .mode-badge.is-place {
|
|
279
264
|
background: linear-gradient(180deg, var(--accent) 0%, #d97706 100%);
|
|
280
265
|
}
|
|
266
|
+
|
|
281
267
|
.cientos-decal-ui .mode-badge.is-update {
|
|
282
|
-
background: linear-gradient(
|
|
268
|
+
background: linear-gradient(#404040 0%, #141414 100%);
|
|
283
269
|
}
|
|
270
|
+
|
|
284
271
|
.cientos-decal-ui.theme-dark .mode-badge.is-update {
|
|
285
|
-
|
|
286
|
-
|
|
272
|
+
color: #141419;
|
|
273
|
+
background: linear-gradient(#f0f0f5 0%, #c8c8d2 100%);
|
|
287
274
|
}
|
|
275
|
+
|
|
288
276
|
.cientos-decal-ui .mode-badge--idle {
|
|
289
277
|
background: var(--idle-bg);
|
|
290
278
|
color: var(--text-faint);
|
|
291
|
-
font-weight: 500;
|
|
292
|
-
font-size: 10px;
|
|
293
279
|
border: 1px solid var(--idle-border);
|
|
294
280
|
box-shadow: none;
|
|
281
|
+
font-size: 10px;
|
|
282
|
+
font-weight: 500;
|
|
295
283
|
}
|
|
284
|
+
|
|
296
285
|
.cientos-decal-ui .mode-badge__dot {
|
|
297
|
-
position: relative;
|
|
298
|
-
display: inline-flex;
|
|
299
286
|
width: 6px;
|
|
300
287
|
height: 6px;
|
|
288
|
+
display: inline-flex;
|
|
289
|
+
position: relative;
|
|
301
290
|
}
|
|
291
|
+
|
|
302
292
|
.cientos-decal-ui .mode-badge__core {
|
|
303
|
-
|
|
293
|
+
background: currentColor;
|
|
294
|
+
border-radius: 999px;
|
|
304
295
|
width: 6px;
|
|
305
296
|
height: 6px;
|
|
306
|
-
|
|
307
|
-
background: currentColor;
|
|
297
|
+
position: relative;
|
|
308
298
|
}
|
|
309
|
-
|
|
310
|
-
.cientos-decal-ui .mode-badge.is-update .mode-badge__core {
|
|
311
|
-
background:
|
|
299
|
+
|
|
300
|
+
.cientos-decal-ui .mode-badge.is-place .mode-badge__core, .cientos-decal-ui .mode-badge.is-update .mode-badge__core {
|
|
301
|
+
background: #fff;
|
|
312
302
|
}
|
|
303
|
+
|
|
313
304
|
.cientos-decal-ui.theme-dark .mode-badge.is-update .mode-badge__core {
|
|
314
|
-
background:
|
|
305
|
+
background: #28282d;
|
|
315
306
|
}
|
|
307
|
+
|
|
316
308
|
.cientos-decal-ui .mode-badge__ping {
|
|
309
|
+
opacity: .75;
|
|
310
|
+
background: #fff;
|
|
311
|
+
border-radius: 999px;
|
|
312
|
+
animation: 1.6s cubic-bezier(0, 0, .2, 1) infinite cientos-decal-ping;
|
|
317
313
|
position: absolute;
|
|
318
314
|
inset: 0;
|
|
319
|
-
border-radius: 999px;
|
|
320
|
-
background: white;
|
|
321
|
-
opacity: 0.75;
|
|
322
|
-
animation: cientos-decal-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
323
315
|
}
|
|
316
|
+
|
|
324
317
|
.cientos-decal-ui.theme-dark .mode-badge.is-update .mode-badge__ping {
|
|
325
|
-
background:
|
|
318
|
+
background: #28282d;
|
|
326
319
|
}
|
|
320
|
+
|
|
327
321
|
@keyframes cientos-decal-ping {
|
|
328
|
-
75%,
|
|
329
|
-
100% {
|
|
330
|
-
transform: scale(2.2);
|
|
322
|
+
75%, 100% {
|
|
331
323
|
opacity: 0;
|
|
324
|
+
transform: scale(2.2);
|
|
332
325
|
}
|
|
333
326
|
}
|
|
334
327
|
|
|
335
328
|
.cientos-decal-ui .picker {
|
|
336
|
-
|
|
329
|
+
scrollbar-width: thin;
|
|
330
|
+
scrollbar-color: #00000038 transparent;
|
|
337
331
|
align-items: center;
|
|
338
332
|
gap: 6px;
|
|
339
333
|
max-width: 52vw;
|
|
340
|
-
padding: 6px;
|
|
341
334
|
margin: -6px 0;
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
|
|
335
|
+
padding: 6px;
|
|
336
|
+
display: flex;
|
|
337
|
+
overflow: auto visible;
|
|
346
338
|
}
|
|
339
|
+
|
|
347
340
|
.cientos-decal-ui .picker::-webkit-scrollbar {
|
|
348
341
|
height: 6px;
|
|
349
342
|
}
|
|
343
|
+
|
|
350
344
|
.cientos-decal-ui .picker::-webkit-scrollbar-track {
|
|
351
|
-
background:
|
|
345
|
+
background: none;
|
|
352
346
|
margin: 0 6px;
|
|
353
347
|
}
|
|
348
|
+
|
|
354
349
|
.cientos-decal-ui .picker::-webkit-scrollbar-thumb {
|
|
355
|
-
background:
|
|
350
|
+
background: #00000038;
|
|
356
351
|
border-radius: 999px;
|
|
357
352
|
}
|
|
353
|
+
|
|
358
354
|
.cientos-decal-ui .picker::-webkit-scrollbar-thumb:hover {
|
|
359
|
-
background:
|
|
355
|
+
background: #00000052;
|
|
360
356
|
}
|
|
357
|
+
|
|
361
358
|
.cientos-decal-ui.theme-dark .picker::-webkit-scrollbar-thumb {
|
|
362
|
-
background:
|
|
359
|
+
background: #ffffff38;
|
|
363
360
|
}
|
|
361
|
+
|
|
364
362
|
.cientos-decal-ui.theme-dark .picker::-webkit-scrollbar-thumb:hover {
|
|
365
|
-
background:
|
|
363
|
+
background: #ffffff52;
|
|
366
364
|
}
|
|
367
365
|
|
|
368
366
|
.cientos-decal-ui .thumb {
|
|
369
|
-
|
|
367
|
+
cursor: grab;
|
|
368
|
+
background: none;
|
|
369
|
+
border: none;
|
|
370
|
+
border-radius: 12px;
|
|
370
371
|
flex-shrink: 0;
|
|
371
372
|
width: 52px;
|
|
372
373
|
height: 52px;
|
|
373
374
|
padding: 0;
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
border-radius: 12px;
|
|
377
|
-
cursor: grab;
|
|
378
|
-
transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
375
|
+
transition: transform .18s cubic-bezier(.4, 0, .2, 1);
|
|
376
|
+
position: relative;
|
|
379
377
|
}
|
|
378
|
+
|
|
380
379
|
.cientos-decal-ui .thumb:active {
|
|
381
380
|
cursor: grabbing;
|
|
382
381
|
}
|
|
382
|
+
|
|
383
383
|
.cientos-decal-ui .thumb__frame {
|
|
384
|
-
display: flex;
|
|
385
|
-
align-items: center;
|
|
386
|
-
justify-content: center;
|
|
387
|
-
width: 100%;
|
|
388
|
-
height: 100%;
|
|
389
|
-
padding: 6px;
|
|
390
|
-
border-radius: 11px;
|
|
391
|
-
overflow: hidden;
|
|
392
384
|
background-color: var(--thumb-bg-a);
|
|
393
|
-
background-image:
|
|
394
|
-
linear-gradient(45deg, var(--thumb-bg-b) 25%, transparent 25%),
|
|
385
|
+
background-image: linear-gradient(45deg, var(--thumb-bg-b) 25%, transparent 25%),
|
|
395
386
|
linear-gradient(-45deg, var(--thumb-bg-b) 25%, transparent 25%),
|
|
396
387
|
linear-gradient(45deg, transparent 75%, var(--thumb-bg-b) 75%),
|
|
397
388
|
linear-gradient(-45deg, transparent 75%, var(--thumb-bg-b) 75%);
|
|
389
|
+
width: 100%;
|
|
390
|
+
height: 100%;
|
|
391
|
+
box-shadow: 0 0 0 1px var(--thumb-ring),
|
|
392
|
+
0 1px 2px #0000000a;
|
|
393
|
+
background-position: 0 0, 0 5px, 5px -5px, -5px 0;
|
|
398
394
|
background-size: 10px 10px;
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
0 1px 2px rgba(0, 0, 0, 0.04);
|
|
407
|
-
transition: box-shadow 180ms;
|
|
395
|
+
border-radius: 11px;
|
|
396
|
+
justify-content: center;
|
|
397
|
+
align-items: center;
|
|
398
|
+
padding: 6px;
|
|
399
|
+
transition: box-shadow .18s;
|
|
400
|
+
display: flex;
|
|
401
|
+
overflow: hidden;
|
|
408
402
|
}
|
|
403
|
+
|
|
409
404
|
.cientos-decal-ui .thumb__img {
|
|
410
|
-
display: block;
|
|
411
|
-
max-width: 100%;
|
|
412
|
-
max-height: 100%;
|
|
413
|
-
width: auto;
|
|
414
|
-
height: auto;
|
|
415
405
|
object-fit: contain;
|
|
416
406
|
pointer-events: none;
|
|
407
|
+
width: auto;
|
|
408
|
+
max-width: 100%;
|
|
409
|
+
height: auto;
|
|
410
|
+
max-height: 100%;
|
|
411
|
+
display: block;
|
|
417
412
|
}
|
|
413
|
+
|
|
418
414
|
.cientos-decal-ui .thumb:hover {
|
|
419
415
|
transform: translateY(-2px);
|
|
420
416
|
}
|
|
417
|
+
|
|
421
418
|
.cientos-decal-ui .thumb:hover .thumb__frame {
|
|
422
|
-
box-shadow:
|
|
423
|
-
0
|
|
424
|
-
0 6px 14px -4px rgba(15, 23, 42, 0.15);
|
|
419
|
+
box-shadow: 0 0 0 1px var(--thumb-ring-hover),
|
|
420
|
+
0 6px 14px -4px #0f172a26;
|
|
425
421
|
}
|
|
422
|
+
|
|
426
423
|
.cientos-decal-ui .thumb.is-active .thumb__frame {
|
|
427
|
-
box-shadow:
|
|
428
|
-
0 0 0 2px var(--accent),
|
|
424
|
+
box-shadow: 0 0 0 2px var(--accent),
|
|
429
425
|
0 6px 18px -4px var(--accent-glow);
|
|
430
426
|
}
|
|
427
|
+
|
|
431
428
|
.cientos-decal-ui .thumb.is-dragging {
|
|
432
|
-
opacity:
|
|
433
|
-
transform: scale(
|
|
429
|
+
opacity: .4;
|
|
430
|
+
transform: scale(.92);
|
|
434
431
|
}
|
|
432
|
+
|
|
435
433
|
.cientos-decal-ui .thumb__check {
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
right: -4px;
|
|
434
|
+
background: var(--accent);
|
|
435
|
+
color: #fff;
|
|
439
436
|
width: 16px;
|
|
440
437
|
height: 16px;
|
|
438
|
+
box-shadow: 0 0 0 2px var(--dock-bg),
|
|
439
|
+
0 2px 4px #00000026;
|
|
441
440
|
border-radius: 999px;
|
|
442
|
-
background: var(--accent);
|
|
443
|
-
color: white;
|
|
444
|
-
display: flex;
|
|
445
|
-
align-items: center;
|
|
446
441
|
justify-content: center;
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
442
|
+
align-items: center;
|
|
443
|
+
display: flex;
|
|
444
|
+
position: absolute;
|
|
445
|
+
top: -4px;
|
|
446
|
+
right: -4px;
|
|
450
447
|
}
|
|
451
448
|
|
|
452
449
|
.cientos-decal-ui .export-slot {
|
|
453
|
-
display: flex;
|
|
454
450
|
align-items: center;
|
|
455
451
|
padding-left: 4px;
|
|
452
|
+
display: flex;
|
|
456
453
|
}
|
|
457
454
|
|
|
458
455
|
.cientos-decal-ui .layer-control {
|
|
459
|
-
|
|
456
|
+
background: var(--hover-bg);
|
|
457
|
+
color: var(--text-muted);
|
|
458
|
+
border-radius: 9px;
|
|
460
459
|
align-items: center;
|
|
461
460
|
gap: 2px;
|
|
462
461
|
padding: 2px;
|
|
463
|
-
|
|
464
|
-
background: var(--hover-bg);
|
|
465
|
-
color: var(--text-muted);
|
|
462
|
+
display: inline-flex;
|
|
466
463
|
}
|
|
464
|
+
|
|
467
465
|
.cientos-decal-ui .layer-btn {
|
|
468
466
|
width: 24px;
|
|
469
467
|
height: 24px;
|
|
470
|
-
display: inline-flex;
|
|
471
|
-
align-items: center;
|
|
472
|
-
justify-content: center;
|
|
473
|
-
background: transparent;
|
|
474
|
-
border: none;
|
|
475
|
-
border-radius: 6px;
|
|
476
468
|
color: inherit;
|
|
477
469
|
cursor: pointer;
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
470
|
+
background: none;
|
|
471
|
+
border: none;
|
|
472
|
+
border-radius: 6px;
|
|
473
|
+
justify-content: center;
|
|
474
|
+
align-items: center;
|
|
475
|
+
transition: background-color .12s, color .12s;
|
|
476
|
+
display: inline-flex;
|
|
481
477
|
}
|
|
478
|
+
|
|
482
479
|
.cientos-decal-ui .layer-btn:hover {
|
|
483
480
|
background: var(--dock-bg);
|
|
484
481
|
color: var(--text-strong);
|
|
485
482
|
}
|
|
483
|
+
|
|
486
484
|
.cientos-decal-ui .layer-val {
|
|
485
|
+
text-align: center;
|
|
487
486
|
min-width: 28px;
|
|
487
|
+
color: var(--text-strong);
|
|
488
|
+
user-select: none;
|
|
488
489
|
padding: 0 4px;
|
|
489
|
-
text-align: center;
|
|
490
490
|
font-size: 11px;
|
|
491
491
|
font-weight: 600;
|
|
492
|
-
color: var(--text-strong);
|
|
493
|
-
user-select: none;
|
|
494
492
|
}
|
|
495
493
|
|
|
496
494
|
.cientos-decal-ui .icon-btn {
|
|
497
495
|
width: 32px;
|
|
498
496
|
height: 32px;
|
|
499
|
-
display: inline-flex;
|
|
500
|
-
align-items: center;
|
|
501
|
-
justify-content: center;
|
|
502
|
-
background: transparent;
|
|
503
|
-
border: none;
|
|
504
|
-
border-radius: 9px;
|
|
505
497
|
color: var(--text-muted);
|
|
506
498
|
cursor: pointer;
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
499
|
+
background: none;
|
|
500
|
+
border: none;
|
|
501
|
+
border-radius: 9px;
|
|
502
|
+
justify-content: center;
|
|
503
|
+
align-items: center;
|
|
504
|
+
transition: background-color .12s, color .12s;
|
|
505
|
+
display: inline-flex;
|
|
510
506
|
}
|
|
507
|
+
|
|
511
508
|
.cientos-decal-ui .icon-btn:hover {
|
|
512
509
|
background: var(--hover-bg);
|
|
513
510
|
color: var(--text-strong);
|
|
514
511
|
}
|
|
512
|
+
|
|
515
513
|
.cientos-decal-ui .icon-btn:disabled {
|
|
516
|
-
opacity:
|
|
514
|
+
opacity: .3;
|
|
517
515
|
cursor: not-allowed;
|
|
518
516
|
pointer-events: none;
|
|
519
517
|
}
|
|
518
|
+
|
|
520
519
|
.cientos-decal-ui .icon-btn.is-active {
|
|
521
520
|
background: var(--accent-soft);
|
|
522
521
|
color: var(--accent);
|
|
523
|
-
box-shadow: inset 0 0 0 1px
|
|
522
|
+
box-shadow: inset 0 0 0 1px #fbb03b40;
|
|
524
523
|
}
|
|
524
|
+
|
|
525
525
|
.cientos-decal-ui .icon-btn.is-danger {
|
|
526
526
|
color: var(--danger);
|
|
527
527
|
}
|
|
528
|
+
|
|
528
529
|
.cientos-decal-ui .icon-btn.is-danger:hover {
|
|
529
530
|
background: var(--danger-bg);
|
|
530
531
|
color: #dc2626;
|
|
531
532
|
}
|
|
532
533
|
|
|
533
534
|
.cientos-decal-ui .primary-btn {
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
535
|
+
background: linear-gradient(180deg, var(--accent) 0%, #f59e0b 100%);
|
|
536
|
+
color: #fff;
|
|
537
|
+
letter-spacing: -.005em;
|
|
538
|
+
cursor: pointer;
|
|
537
539
|
height: 32px;
|
|
538
|
-
|
|
540
|
+
box-shadow: inset 0 1px 0 #ffffff40,
|
|
541
|
+
0 1px 2px #b453094d,
|
|
542
|
+
0 4px 10px -2px var(--accent-glow);
|
|
543
|
+
border: none;
|
|
539
544
|
border-radius: 9px;
|
|
540
|
-
|
|
541
|
-
|
|
545
|
+
align-items: center;
|
|
546
|
+
gap: 6px;
|
|
547
|
+
padding: 0 12px 0 14px;
|
|
542
548
|
font-size: 12px;
|
|
543
549
|
font-weight: 600;
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
cursor: pointer;
|
|
547
|
-
box-shadow:
|
|
548
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
|
549
|
-
0 1px 2px rgba(180, 83, 9, 0.3),
|
|
550
|
-
0 4px 10px -2px var(--accent-glow);
|
|
551
|
-
transition:
|
|
552
|
-
transform 120ms,
|
|
553
|
-
box-shadow 120ms;
|
|
550
|
+
transition: transform .12s, box-shadow .12s;
|
|
551
|
+
display: inline-flex;
|
|
554
552
|
}
|
|
553
|
+
|
|
555
554
|
.cientos-decal-ui .primary-btn:hover {
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
|
559
|
-
0 2px 4px rgba(180, 83, 9, 0.35),
|
|
555
|
+
box-shadow: inset 0 1px 0 #ffffff40,
|
|
556
|
+
0 2px 4px #b4530959,
|
|
560
557
|
0 8px 18px -4px var(--accent-glow);
|
|
558
|
+
transform: translateY(-1px);
|
|
561
559
|
}
|
|
560
|
+
|
|
562
561
|
.cientos-decal-ui .primary-btn:active {
|
|
563
562
|
transform: translateY(0);
|
|
564
563
|
}
|
|
565
564
|
|
|
566
565
|
.cientos-decal-ui .kbd {
|
|
567
|
-
|
|
568
|
-
|
|
566
|
+
background: var(--kbd-bg);
|
|
567
|
+
color: #fffffff2;
|
|
568
|
+
border-radius: 4px;
|
|
569
569
|
justify-content: center;
|
|
570
|
+
align-items: center;
|
|
570
571
|
min-width: 16px;
|
|
571
572
|
height: 16px;
|
|
572
|
-
padding: 0 4px;
|
|
573
573
|
margin-left: 2px;
|
|
574
|
-
|
|
575
|
-
background: var(--kbd-bg);
|
|
576
|
-
color: rgba(255, 255, 255, 0.95);
|
|
574
|
+
padding: 0 4px;
|
|
577
575
|
font-family: inherit;
|
|
578
576
|
font-size: 10px;
|
|
579
577
|
font-weight: 600;
|
|
580
578
|
line-height: 1;
|
|
579
|
+
display: inline-flex;
|
|
581
580
|
}
|
|
582
581
|
|
|
583
582
|
.cientos-decal-ui .decal-list {
|
|
584
583
|
pointer-events: auto;
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
right: 16px;
|
|
588
|
-
transform: translateY(-50%);
|
|
584
|
+
scrollbar-width: thin;
|
|
585
|
+
border-radius: 16px;
|
|
589
586
|
flex-direction: column;
|
|
590
587
|
gap: 0;
|
|
591
|
-
|
|
592
|
-
border-radius: 16px;
|
|
588
|
+
min-width: 132px;
|
|
593
589
|
max-height: 70vh;
|
|
590
|
+
padding: 8px;
|
|
591
|
+
position: absolute;
|
|
592
|
+
top: 50%;
|
|
593
|
+
right: 16px;
|
|
594
594
|
overflow-y: auto;
|
|
595
|
-
|
|
596
|
-
min-width: 132px;
|
|
595
|
+
transform: translateY(-50%);
|
|
597
596
|
}
|
|
597
|
+
|
|
598
598
|
.cientos-decal-ui.is-contained .decal-list {
|
|
599
599
|
max-height: calc(100% - 32px);
|
|
600
600
|
}
|
|
601
601
|
|
|
602
602
|
.cientos-decal-ui.is-contained .dock-stack {
|
|
603
|
-
bottom: 12px;
|
|
604
603
|
gap: 6px;
|
|
604
|
+
bottom: 12px;
|
|
605
605
|
}
|
|
606
|
+
|
|
606
607
|
.cientos-decal-ui.is-contained .dock {
|
|
607
|
-
padding: 4px;
|
|
608
|
-
gap: 4px;
|
|
609
608
|
border-radius: 12px;
|
|
609
|
+
gap: 4px;
|
|
610
|
+
padding: 4px;
|
|
610
611
|
}
|
|
612
|
+
|
|
611
613
|
.cientos-decal-ui.is-contained .picker {
|
|
612
|
-
max-width: none;
|
|
613
614
|
flex: 1 1 0;
|
|
614
|
-
min-width: 0;
|
|
615
615
|
gap: 4px;
|
|
616
|
+
min-width: 0;
|
|
617
|
+
max-width: none;
|
|
616
618
|
}
|
|
619
|
+
|
|
617
620
|
.cientos-decal-ui.is-contained .thumb {
|
|
618
621
|
width: 40px;
|
|
619
622
|
height: 40px;
|
|
620
623
|
}
|
|
624
|
+
|
|
621
625
|
.cientos-decal-ui.is-contained .thumb__frame {
|
|
622
626
|
padding: 4px;
|
|
623
627
|
}
|
|
628
|
+
|
|
624
629
|
.cientos-decal-ui.is-contained .icon-btn {
|
|
625
630
|
width: 28px;
|
|
626
631
|
height: 28px;
|
|
627
632
|
}
|
|
633
|
+
|
|
628
634
|
.cientos-decal-ui.is-contained .mode-badge {
|
|
629
635
|
padding: 0 10px;
|
|
630
636
|
font-size: 9.5px;
|
|
631
637
|
}
|
|
632
638
|
|
|
633
639
|
.cientos-decal-ui .list-header {
|
|
634
|
-
display: flex;
|
|
635
|
-
align-items: center;
|
|
636
|
-
justify-content: space-between;
|
|
637
|
-
padding: 2px 6px 8px;
|
|
638
640
|
border-bottom: 1px solid var(--divider);
|
|
641
|
+
justify-content: space-between;
|
|
642
|
+
align-items: center;
|
|
639
643
|
margin-bottom: 6px;
|
|
644
|
+
padding: 2px 6px 8px;
|
|
645
|
+
display: flex;
|
|
640
646
|
}
|
|
647
|
+
|
|
641
648
|
.cientos-decal-ui .list-header__title {
|
|
642
|
-
|
|
643
|
-
font-weight: 700;
|
|
644
|
-
letter-spacing: 0.14em;
|
|
649
|
+
letter-spacing: .14em;
|
|
645
650
|
text-transform: uppercase;
|
|
646
651
|
color: var(--text-faint);
|
|
652
|
+
font-size: 10px;
|
|
653
|
+
font-weight: 700;
|
|
647
654
|
}
|
|
655
|
+
|
|
648
656
|
.cientos-decal-ui .list-header__count {
|
|
649
|
-
font-size: 10px;
|
|
650
|
-
font-weight: 600;
|
|
651
657
|
font-variant-numeric: tabular-nums;
|
|
652
658
|
color: var(--text-faint);
|
|
653
659
|
background: var(--hover-bg);
|
|
654
|
-
padding: 1px 6px;
|
|
655
660
|
border-radius: 999px;
|
|
661
|
+
padding: 1px 6px;
|
|
662
|
+
font-size: 10px;
|
|
663
|
+
font-weight: 600;
|
|
656
664
|
}
|
|
657
665
|
|
|
658
666
|
.cientos-decal-ui .list-group {
|
|
659
|
-
|
|
667
|
+
border-bottom: 1px solid var(--divider);
|
|
660
668
|
flex-direction: column;
|
|
661
669
|
padding: 4px 0;
|
|
662
|
-
|
|
670
|
+
display: flex;
|
|
663
671
|
}
|
|
672
|
+
|
|
664
673
|
.cientos-decal-ui .list-group:last-child {
|
|
665
674
|
border-bottom: none;
|
|
666
675
|
padding-bottom: 0;
|
|
667
676
|
}
|
|
677
|
+
|
|
668
678
|
.cientos-decal-ui .list-group__header {
|
|
669
|
-
display: flex;
|
|
670
|
-
align-items: center;
|
|
671
679
|
justify-content: space-between;
|
|
680
|
+
align-items: center;
|
|
672
681
|
padding: 4px 6px 2px;
|
|
682
|
+
display: flex;
|
|
673
683
|
}
|
|
684
|
+
|
|
674
685
|
.cientos-decal-ui .list-group__name {
|
|
675
|
-
|
|
676
|
-
font-weight: 700;
|
|
677
|
-
letter-spacing: 0.1em;
|
|
686
|
+
letter-spacing: .1em;
|
|
678
687
|
text-transform: uppercase;
|
|
679
688
|
color: var(--text-strong);
|
|
689
|
+
font-size: 9.5px;
|
|
690
|
+
font-weight: 700;
|
|
680
691
|
}
|
|
692
|
+
|
|
681
693
|
.cientos-decal-ui .list-group__count {
|
|
682
|
-
font-size: 9.5px;
|
|
683
|
-
font-weight: 600;
|
|
684
694
|
font-variant-numeric: tabular-nums;
|
|
685
695
|
color: var(--text-faint);
|
|
696
|
+
font-size: 9.5px;
|
|
697
|
+
font-weight: 600;
|
|
686
698
|
}
|
|
699
|
+
|
|
687
700
|
.cientos-decal-ui .list-group__items {
|
|
688
|
-
display: flex;
|
|
689
701
|
flex-direction: column;
|
|
690
702
|
gap: 2px;
|
|
691
703
|
padding: 2px 0 4px;
|
|
704
|
+
display: flex;
|
|
692
705
|
}
|
|
693
706
|
|
|
694
707
|
.cientos-decal-ui .list-item {
|
|
695
|
-
|
|
696
|
-
|
|
708
|
+
color: var(--text-muted);
|
|
709
|
+
cursor: grab;
|
|
710
|
+
background: none;
|
|
711
|
+
border: 1px solid #0000;
|
|
712
|
+
border-radius: 10px;
|
|
697
713
|
align-items: center;
|
|
698
714
|
gap: 8px;
|
|
699
715
|
padding: 4px 8px 4px 4px;
|
|
700
|
-
border-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
color: var(--text-muted);
|
|
704
|
-
cursor: grab;
|
|
705
|
-
transition:
|
|
706
|
-
background-color 120ms,
|
|
707
|
-
border-color 120ms,
|
|
708
|
-
opacity 120ms;
|
|
716
|
+
transition: background-color .12s, border-color .12s, opacity .12s;
|
|
717
|
+
display: flex;
|
|
718
|
+
position: relative;
|
|
709
719
|
}
|
|
720
|
+
|
|
710
721
|
.cientos-decal-ui .list-item:active {
|
|
711
722
|
cursor: grabbing;
|
|
712
723
|
}
|
|
724
|
+
|
|
713
725
|
.cientos-decal-ui .list-item:hover {
|
|
714
726
|
background: var(--hover-bg);
|
|
715
727
|
color: var(--text-strong);
|
|
716
728
|
}
|
|
729
|
+
|
|
717
730
|
.cientos-decal-ui .list-item.is-editing {
|
|
718
|
-
border-color: rgba(251, 176, 59, 0.45);
|
|
719
|
-
background: rgba(251, 176, 59, 0.1);
|
|
720
731
|
color: var(--text-strong);
|
|
732
|
+
background: #fbb03b1a;
|
|
733
|
+
border-color: #fbb03b73;
|
|
721
734
|
}
|
|
735
|
+
|
|
722
736
|
.cientos-decal-ui .list-item.is-dragging {
|
|
723
|
-
opacity:
|
|
737
|
+
opacity: .45;
|
|
724
738
|
}
|
|
725
|
-
|
|
726
|
-
.cientos-decal-ui .list-item.drop-after
|
|
727
|
-
content:
|
|
728
|
-
position: absolute;
|
|
729
|
-
left: 4px;
|
|
730
|
-
right: 4px;
|
|
731
|
-
height: 2px;
|
|
732
|
-
border-radius: 2px;
|
|
739
|
+
|
|
740
|
+
.cientos-decal-ui .list-item.drop-before:before, .cientos-decal-ui .list-item.drop-after:after {
|
|
741
|
+
content: "";
|
|
733
742
|
background: var(--accent);
|
|
743
|
+
height: 2px;
|
|
734
744
|
box-shadow: 0 0 6px var(--accent-glow);
|
|
735
745
|
pointer-events: none;
|
|
746
|
+
border-radius: 2px;
|
|
747
|
+
position: absolute;
|
|
748
|
+
left: 4px;
|
|
749
|
+
right: 4px;
|
|
736
750
|
}
|
|
737
|
-
|
|
751
|
+
|
|
752
|
+
.cientos-decal-ui .list-item.drop-before:before {
|
|
738
753
|
top: -2px;
|
|
739
754
|
}
|
|
740
|
-
|
|
755
|
+
|
|
756
|
+
.cientos-decal-ui .list-item.drop-after:after {
|
|
741
757
|
bottom: -2px;
|
|
742
758
|
}
|
|
743
759
|
|
|
744
760
|
.cientos-decal-ui .list-item.is-hidden {
|
|
745
|
-
opacity:
|
|
761
|
+
opacity: .5;
|
|
746
762
|
}
|
|
747
|
-
|
|
748
|
-
.cientos-decal-ui .list-item.is-hidden .list-item__layer {
|
|
749
|
-
filter: grayscale(
|
|
763
|
+
|
|
764
|
+
.cientos-decal-ui .list-item.is-hidden .list-item__thumb, .cientos-decal-ui .list-item.is-hidden .list-item__layer {
|
|
765
|
+
filter: grayscale(.6);
|
|
750
766
|
}
|
|
751
767
|
|
|
752
|
-
.cientos-decal-ui .list-item__eye,
|
|
753
|
-
.cientos-decal-ui .list-item__remove {
|
|
754
|
-
display: inline-flex;
|
|
755
|
-
align-items: center;
|
|
756
|
-
justify-content: center;
|
|
768
|
+
.cientos-decal-ui .list-item__eye, .cientos-decal-ui .list-item__remove {
|
|
757
769
|
width: 22px;
|
|
758
770
|
height: 22px;
|
|
759
|
-
padding: 0;
|
|
760
|
-
background: transparent;
|
|
761
|
-
border: none;
|
|
762
|
-
border-radius: 6px;
|
|
763
771
|
color: var(--text-faint);
|
|
764
772
|
cursor: pointer;
|
|
773
|
+
background: none;
|
|
774
|
+
border: none;
|
|
775
|
+
border-radius: 6px;
|
|
765
776
|
flex-shrink: 0;
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
777
|
+
justify-content: center;
|
|
778
|
+
align-items: center;
|
|
779
|
+
padding: 0;
|
|
780
|
+
transition: background-color .12s, color .12s;
|
|
781
|
+
display: inline-flex;
|
|
769
782
|
}
|
|
770
|
-
|
|
771
|
-
.cientos-decal-ui .list-item__remove:hover {
|
|
783
|
+
|
|
784
|
+
.cientos-decal-ui .list-item__eye:hover, .cientos-decal-ui .list-item__remove:hover {
|
|
772
785
|
background: var(--hover-bg);
|
|
773
786
|
color: var(--text-strong);
|
|
774
787
|
}
|
|
788
|
+
|
|
775
789
|
.cientos-decal-ui .list-item__eye.is-off {
|
|
776
790
|
color: var(--accent);
|
|
777
791
|
}
|
|
778
|
-
|
|
779
|
-
.cientos-decal-ui .list-item__remove svg {
|
|
792
|
+
|
|
793
|
+
.cientos-decal-ui .list-item__eye svg, .cientos-decal-ui .list-item__remove svg {
|
|
794
|
+
pointer-events: none;
|
|
780
795
|
width: 14px;
|
|
781
796
|
height: 14px;
|
|
782
|
-
pointer-events: none;
|
|
783
797
|
}
|
|
798
|
+
|
|
784
799
|
.cientos-decal-ui .list-item__remove:hover {
|
|
785
800
|
background: var(--danger-bg);
|
|
786
801
|
color: var(--danger);
|
|
787
802
|
}
|
|
788
803
|
|
|
789
804
|
.cientos-decal-ui .list-empty {
|
|
790
|
-
padding: 12px 8px 6px;
|
|
791
|
-
font-size: 11px;
|
|
792
805
|
color: var(--text-faint);
|
|
793
806
|
text-align: center;
|
|
807
|
+
padding: 12px 8px 6px;
|
|
808
|
+
font-size: 11px;
|
|
794
809
|
}
|
|
795
810
|
|
|
796
811
|
.cientos-decal-ui .list-item__thumb {
|
|
797
|
-
display: flex;
|
|
798
|
-
align-items: center;
|
|
799
|
-
justify-content: center;
|
|
800
|
-
width: 32px;
|
|
801
|
-
height: 32px;
|
|
802
|
-
border-radius: 8px;
|
|
803
|
-
overflow: hidden;
|
|
804
|
-
flex-shrink: 0;
|
|
805
812
|
background-color: var(--thumb-bg-a);
|
|
806
|
-
background-image:
|
|
807
|
-
linear-gradient(45deg, var(--thumb-bg-b) 25%, transparent 25%),
|
|
813
|
+
background-image: linear-gradient(45deg, var(--thumb-bg-b) 25%, transparent 25%),
|
|
808
814
|
linear-gradient(-45deg, var(--thumb-bg-b) 25%, transparent 25%),
|
|
809
815
|
linear-gradient(45deg, transparent 75%, var(--thumb-bg-b) 75%),
|
|
810
816
|
linear-gradient(-45deg, transparent 75%, var(--thumb-bg-b) 75%);
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
0 0,
|
|
814
|
-
0 4px,
|
|
815
|
-
4px -4px,
|
|
816
|
-
-4px 0;
|
|
817
|
+
width: 32px;
|
|
818
|
+
height: 32px;
|
|
817
819
|
box-shadow: 0 0 0 1px var(--thumb-ring);
|
|
820
|
+
background-position: 0 0, 0 4px, 4px -4px, -4px 0;
|
|
821
|
+
background-size: 8px 8px;
|
|
822
|
+
border-radius: 8px;
|
|
823
|
+
flex-shrink: 0;
|
|
824
|
+
justify-content: center;
|
|
825
|
+
align-items: center;
|
|
826
|
+
display: flex;
|
|
827
|
+
overflow: hidden;
|
|
818
828
|
}
|
|
829
|
+
|
|
819
830
|
.cientos-decal-ui .list-item__img {
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
max-height: 100%;
|
|
831
|
+
object-fit: contain;
|
|
832
|
+
pointer-events: none;
|
|
823
833
|
width: auto;
|
|
834
|
+
max-width: 100%;
|
|
824
835
|
height: auto;
|
|
825
|
-
|
|
836
|
+
max-height: 100%;
|
|
826
837
|
padding: 3px;
|
|
827
|
-
|
|
838
|
+
display: block;
|
|
828
839
|
}
|
|
840
|
+
|
|
829
841
|
.cientos-decal-ui .list-item__layer {
|
|
830
|
-
font-size: 10px;
|
|
831
|
-
font-weight: 600;
|
|
832
842
|
font-variant-numeric: tabular-nums;
|
|
833
843
|
margin-left: auto;
|
|
844
|
+
font-size: 10px;
|
|
845
|
+
font-weight: 600;
|
|
834
846
|
}
|
|
835
847
|
|
|
836
848
|
.cientos-decal-ui .tint-wrapper {
|
|
837
|
-
position: relative;
|
|
838
849
|
display: inline-flex;
|
|
850
|
+
position: relative;
|
|
839
851
|
}
|
|
852
|
+
|
|
840
853
|
.cientos-decal-ui .tint-swatch {
|
|
854
|
+
pointer-events: none;
|
|
855
|
+
border: 1px solid #0000002e;
|
|
856
|
+
border-radius: 999px;
|
|
857
|
+
width: 8px;
|
|
858
|
+
height: 8px;
|
|
841
859
|
position: absolute;
|
|
842
860
|
bottom: 4px;
|
|
843
861
|
right: 4px;
|
|
844
|
-
|
|
845
|
-
height: 8px;
|
|
846
|
-
border-radius: 999px;
|
|
847
|
-
border: 1px solid rgba(0, 0, 0, 0.18);
|
|
848
|
-
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
|
|
849
|
-
pointer-events: none;
|
|
862
|
+
box-shadow: 0 0 0 1px #fff9;
|
|
850
863
|
}
|
|
864
|
+
|
|
851
865
|
.cientos-decal-ui .tint-popover {
|
|
852
|
-
position: absolute;
|
|
853
|
-
left: 50%;
|
|
854
|
-
bottom: calc(100% + 8px);
|
|
855
|
-
transform: translateX(-50%);
|
|
856
|
-
display: flex;
|
|
857
|
-
flex-direction: column;
|
|
858
|
-
gap: 10px;
|
|
859
|
-
padding: 12px;
|
|
860
|
-
min-width: 200px;
|
|
861
|
-
border-radius: 12px;
|
|
862
866
|
background: var(--dock-bg);
|
|
863
867
|
border: 1px solid var(--dock-border);
|
|
868
|
+
min-width: 200px;
|
|
864
869
|
box-shadow: var(--dock-shadow);
|
|
865
|
-
backdrop-filter: blur(20px) saturate(180%);
|
|
866
870
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
867
871
|
z-index: 10;
|
|
872
|
+
border-radius: 12px;
|
|
873
|
+
flex-direction: column;
|
|
874
|
+
gap: 10px;
|
|
875
|
+
padding: 12px;
|
|
876
|
+
display: flex;
|
|
877
|
+
position: absolute;
|
|
878
|
+
bottom: calc(100% + 8px);
|
|
879
|
+
left: 50%;
|
|
880
|
+
transform: translateX(-50%);
|
|
868
881
|
}
|
|
882
|
+
|
|
869
883
|
.cientos-decal-ui .tint-row {
|
|
870
|
-
display: flex;
|
|
871
884
|
align-items: center;
|
|
872
885
|
gap: 8px;
|
|
886
|
+
display: flex;
|
|
873
887
|
}
|
|
888
|
+
|
|
874
889
|
.cientos-decal-ui .tint-row__label {
|
|
890
|
+
letter-spacing: .1em;
|
|
891
|
+
text-transform: uppercase;
|
|
892
|
+
color: var(--text-faint);
|
|
875
893
|
flex: 0 0 60px;
|
|
876
894
|
font-size: 10px;
|
|
877
895
|
font-weight: 600;
|
|
878
|
-
letter-spacing: 0.1em;
|
|
879
|
-
text-transform: uppercase;
|
|
880
|
-
color: var(--text-faint);
|
|
881
896
|
}
|
|
897
|
+
|
|
882
898
|
.cientos-decal-ui .tint-color-input {
|
|
899
|
+
border: 1px solid var(--divider);
|
|
900
|
+
cursor: pointer;
|
|
901
|
+
background: none;
|
|
902
|
+
border-radius: 8px;
|
|
883
903
|
width: 28px;
|
|
884
904
|
height: 28px;
|
|
885
905
|
padding: 0;
|
|
886
|
-
border: 1px solid var(--divider);
|
|
887
|
-
border-radius: 8px;
|
|
888
|
-
background: transparent;
|
|
889
|
-
cursor: pointer;
|
|
890
906
|
overflow: hidden;
|
|
891
907
|
}
|
|
908
|
+
|
|
892
909
|
.cientos-decal-ui .tint-color-input::-webkit-color-swatch-wrapper {
|
|
893
910
|
padding: 0;
|
|
894
911
|
}
|
|
912
|
+
|
|
895
913
|
.cientos-decal-ui .tint-color-input::-webkit-color-swatch {
|
|
896
914
|
border: none;
|
|
897
915
|
border-radius: 6px;
|
|
898
916
|
}
|
|
917
|
+
|
|
899
918
|
.cientos-decal-ui .tint-color-input::-moz-color-swatch {
|
|
900
919
|
border: none;
|
|
901
920
|
border-radius: 6px;
|
|
902
921
|
}
|
|
903
922
|
|
|
904
923
|
.cientos-decal-ui .tint-range {
|
|
924
|
+
-webkit-appearance: none;
|
|
925
|
+
appearance: none;
|
|
926
|
+
cursor: pointer;
|
|
927
|
+
background: none;
|
|
905
928
|
flex: 1;
|
|
906
929
|
width: 100%;
|
|
907
930
|
height: 16px;
|
|
908
931
|
margin: 0;
|
|
909
|
-
background: transparent;
|
|
910
|
-
appearance: none;
|
|
911
|
-
-webkit-appearance: none;
|
|
912
|
-
cursor: pointer;
|
|
913
932
|
}
|
|
933
|
+
|
|
914
934
|
.cientos-decal-ui .tint-range::-webkit-slider-runnable-track {
|
|
915
|
-
height: 4px;
|
|
916
|
-
border-radius: 999px;
|
|
917
935
|
background: var(--hover-bg);
|
|
936
|
+
border-radius: 999px;
|
|
937
|
+
height: 4px;
|
|
918
938
|
}
|
|
939
|
+
|
|
919
940
|
.cientos-decal-ui .tint-range::-moz-range-track {
|
|
920
|
-
height: 4px;
|
|
921
|
-
border-radius: 999px;
|
|
922
941
|
background: var(--hover-bg);
|
|
942
|
+
border-radius: 999px;
|
|
943
|
+
height: 4px;
|
|
923
944
|
}
|
|
945
|
+
|
|
924
946
|
.cientos-decal-ui .tint-range::-webkit-slider-thumb {
|
|
925
947
|
-webkit-appearance: none;
|
|
948
|
+
background: var(--accent);
|
|
949
|
+
cursor: pointer;
|
|
950
|
+
border: 2px solid #fff;
|
|
951
|
+
border-radius: 999px;
|
|
926
952
|
width: 14px;
|
|
927
953
|
height: 14px;
|
|
928
954
|
margin-top: -5px;
|
|
929
|
-
|
|
930
|
-
background: var(--accent);
|
|
931
|
-
border: 2px solid white;
|
|
932
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
933
|
-
cursor: pointer;
|
|
955
|
+
box-shadow: 0 1px 3px #00000040;
|
|
934
956
|
}
|
|
957
|
+
|
|
935
958
|
.cientos-decal-ui .tint-range::-moz-range-thumb {
|
|
936
|
-
width: 14px;
|
|
937
|
-
height: 14px;
|
|
938
|
-
border-radius: 999px;
|
|
939
959
|
background: var(--accent);
|
|
940
|
-
border: 2px solid white;
|
|
941
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
942
960
|
cursor: pointer;
|
|
961
|
+
border: 2px solid #fff;
|
|
962
|
+
border-radius: 999px;
|
|
963
|
+
width: 14px;
|
|
964
|
+
height: 14px;
|
|
965
|
+
box-shadow: 0 1px 3px #00000040;
|
|
943
966
|
}
|
|
944
967
|
|
|
945
968
|
.cientos-decal-ui .tint-value {
|
|
946
|
-
flex: 0 0 36px;
|
|
947
|
-
font-size: 10.5px;
|
|
948
|
-
font-weight: 600;
|
|
949
969
|
font-variant-numeric: tabular-nums;
|
|
950
970
|
color: var(--text-strong);
|
|
951
971
|
text-align: right;
|
|
972
|
+
flex: 0 0 36px;
|
|
973
|
+
font-size: 10.5px;
|
|
974
|
+
font-weight: 600;
|
|
952
975
|
}
|
|
953
976
|
|
|
954
977
|
.cientos-decal-ui .tint-reset {
|
|
955
|
-
align-self: flex-end;
|
|
956
|
-
padding: 4px 10px;
|
|
957
|
-
background: transparent;
|
|
958
978
|
border: 1px solid var(--divider);
|
|
979
|
+
color: var(--text-muted);
|
|
980
|
+
cursor: pointer;
|
|
981
|
+
background: none;
|
|
959
982
|
border-radius: 8px;
|
|
983
|
+
align-self: flex-end;
|
|
984
|
+
padding: 4px 10px;
|
|
960
985
|
font-size: 10px;
|
|
961
986
|
font-weight: 600;
|
|
962
|
-
|
|
963
|
-
cursor: pointer;
|
|
964
|
-
transition:
|
|
965
|
-
background-color 120ms,
|
|
966
|
-
color 120ms;
|
|
987
|
+
transition: background-color .12s, color .12s;
|
|
967
988
|
}
|
|
989
|
+
|
|
968
990
|
.cientos-decal-ui .tint-reset:hover {
|
|
969
991
|
background: var(--hover-bg);
|
|
970
992
|
color: var(--text-strong);
|
|
971
993
|
}
|
|
972
994
|
|
|
973
|
-
.edit-dock-enter-active,
|
|
974
|
-
.
|
|
975
|
-
transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
995
|
+
.edit-dock-enter-active, .edit-dock-leave-active {
|
|
996
|
+
transition: all .22s cubic-bezier(.4, 0, .2, 1);
|
|
976
997
|
}
|
|
977
|
-
|
|
978
|
-
.edit-dock-leave-to {
|
|
998
|
+
|
|
999
|
+
.edit-dock-enter-from, .edit-dock-leave-to {
|
|
979
1000
|
opacity: 0;
|
|
980
1001
|
transform: translateY(8px);
|
|
981
1002
|
}
|
|
982
|
-
|