@gem-sdk/styles 1.25.29 → 1.27.14

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.
Files changed (4) hide show
  1. package/dist/toolbar.css +225 -50
  2. package/dist/toolbar.min.css +1 -1
  3. package/package.json +1 -1
  4. package/src/css/builds/toolbar.css +241 -50
package/dist/toolbar.css CHANGED
@@ -7,15 +7,16 @@
7
7
  position: absolute;
8
8
  z-index: 20;
9
9
  height: 24px;
10
- top: -23px;
10
+ top: -24px;
11
11
  left: 0;
12
12
  max-width: unset;
13
13
  display: flex;
14
14
  align-items: center;
15
15
  padding: 4px;
16
- color: #3c67ff;
17
- background: #fff;
16
+ color: #fff;
17
+ background: #3c67ff;
18
18
  border: solid 1px #3c67ff;
19
+ border-radius: 6px 6px 0 0;
19
20
  white-space: nowrap;
20
21
  pointer-events: unset;
21
22
  font-family: Inter, sans-serif, ui-sans-serif, system-ui;
@@ -24,7 +25,7 @@
24
25
  cursor: pointer;
25
26
  -webkit-user-select: none;
26
27
  user-select: none;
27
- transition: background 200ms ease-out;
28
+ transition: opacity 0ms ease-in-out;
28
29
  }
29
30
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent],
30
31
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] {
@@ -32,7 +33,7 @@
32
33
  align-items: center;
33
34
  }
34
35
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag], [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag] {
35
- display: block;
36
+ display: none;
36
37
  }
37
38
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag] svg, [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag] svg {
38
39
  display: block;
@@ -53,26 +54,41 @@
53
54
  }
54
55
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] {
55
56
  position: absolute;
56
- top: -24px;
57
- left: -1px;
58
- height: 24px;
59
- padding: 4px;
57
+ top: -32px;
58
+ left: 0px;
59
+ height: 32px;
60
+ padding: 8px;
60
61
  opacity: 1;
61
62
  visibility: visible;
62
63
  z-index: 30;
63
- color: #3c67ff;
64
+ color: #fff;
64
65
  background: #fff;
65
- border: solid 1px #3c67ff;
66
+ border-radius: 8px;
67
+ background: #3c67ff;
66
68
  }
67
69
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:hover {
68
- background: #c5d2ff;
70
+ background: #7190ff;
71
+ }
72
+ /* fix hover parent */
73
+ [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:before {
74
+ content: '';
75
+ width: 100%;
76
+ height: 4px;
77
+ background: transparent;
78
+ bottom: -4px;
79
+ left: 0;
80
+ position: absolute;
81
+ }
82
+ [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-parent-revert='true']:before {
83
+ bottom: unset;
84
+ top: -4px;
69
85
  }
70
86
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section='true'] {
71
- border: solid 1px #9144da;
72
- color: #9144da;
87
+ background-color: #9144da;
88
+ color: #fff;
73
89
  }
74
90
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section='true']:hover {
75
- background: #ebddf8;
91
+ background-color: #af7edd;
76
92
  }
77
93
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section='true'][data-toolbar-hover-focus] {
78
94
  background: #ebddf8;
@@ -101,8 +117,14 @@
101
117
  display: none;
102
118
  }
103
119
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'] {
104
- color: #9144da;
105
- border: solid 1px #9144da;
120
+ background-color: #9144da;
121
+ color: #fff;
122
+ }
123
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active] [data-toolbar-show-parent]:before {
124
+ background-color: #af7edd;
125
+ }
126
+ [data-toolbar-wrap] [data-toolbar-theme-section='true'] [data-toolbar-duplicate] {
127
+ border-color: #be86f3;
106
128
  }
107
129
  /* State Toolbar */
108
130
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover],
@@ -110,9 +132,11 @@
110
132
  opacity: 1;
111
133
  visibility: visible;
112
134
  z-index: 30;
135
+ border-width: 0;
136
+ transition-delay: 100ms;
113
137
  }
114
138
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover {
115
- background: #c5d2ff;
139
+ background: #3c67ff;
116
140
  border-color: #3c67ff;
117
141
  }
118
142
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover [data-toolbar-create-theme-section], [data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover [data-toolbar-create-theme-section] {
@@ -120,23 +144,25 @@
120
144
  }
121
145
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover-revert] {
122
146
  top: calc(100% - 1px);
147
+ border-radius: 0 0 6px 6px;
123
148
  }
124
149
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover-inside] {
125
150
  top: 0;
151
+ border-radius: 0 0 6px 6px;
126
152
  }
127
153
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus] {
128
- background: #d8e1ff;
154
+ background: #3c67ff;
129
155
  z-index: 40;
130
156
  }
131
157
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]:hover {
132
- background: #c5d2ff;
158
+ background: #3c67ff;
133
159
  }
134
160
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover][data-toolbar-hover-focus] {
135
- background: #ebddf8;
161
+ background: #9144da;
162
+ padding: 4px;
136
163
  }
137
164
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover]:hover {
138
- background: #ebddf8;
139
- border-color: #9144da;
165
+ background: #9144da;
140
166
  }
141
167
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active]:hover {
142
168
  background: #9144da;
@@ -146,18 +172,20 @@
146
172
  visibility: visible;
147
173
  z-index: 20;
148
174
  height: 32px;
149
- top: -31px;
150
- background: #3c67ff;
175
+ top: -35px;
176
+ background: #151515;
177
+ border-color: #424242;
151
178
  color: #fff;
179
+ border-radius: 8px;
152
180
  }
153
181
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active]:hover {
154
- background: #3c67ff;
182
+ background: #151515;
155
183
  }
156
184
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus] {
157
- background: #3c67ff;
185
+ background: #151515;
158
186
  }
159
187
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus]:hover {
160
- background: #3c67ff;
188
+ background: #151515;
161
189
  }
162
190
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section='true'] {
163
191
  background: #9144da;
@@ -167,9 +195,29 @@
167
195
  }
168
196
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] {
169
197
  padding: 4px;
170
- border-radius: 2px;
198
+ margin-right: 8px;
199
+ border-radius: 6px;
171
200
  transition: background 200ms ease-in-out;
201
+ position: relative;
172
202
  }
203
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:before {
204
+ position: absolute;
205
+ content: '';
206
+ background: #424242;
207
+ width: 1px;
208
+ height: calc(100% - 4px);
209
+ right: -4px;
210
+ top: 2px;
211
+ }
212
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:before {
213
+ position: absolute;
214
+ content: '';
215
+ background: #424242;
216
+ width: 1px;
217
+ height: calc(100% - 4px);
218
+ right: -4px;
219
+ top: 2px;
220
+ }
173
221
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] {
174
222
  display: block;
175
223
  transition: -webkit-transform 200ms ease-in-out;
@@ -189,6 +237,9 @@
189
237
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:hover {
190
238
  background: rgba(225, 225, 225, 0.2);
191
239
  }
240
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-drag] {
241
+ display: block;
242
+ }
192
243
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate],
193
244
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete],
194
245
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out],
@@ -216,8 +267,8 @@
216
267
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section-wrapper] {
217
268
  padding: 0 4px;
218
269
  margin: 0 4px;
219
- border-left: solid 1px #7190ff;
220
- border-right: solid 1px #7190ff;
270
+ border-left: solid 1px #6a6a6a;
271
+ border-right: solid 1px #6a6a6a;
221
272
  }
222
273
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] {
223
274
  display: flex !important;
@@ -231,23 +282,29 @@
231
282
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-create-theme-section] {
232
283
  display: none;
233
284
  }
285
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active-overflow],
286
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-hover-overflow] {
287
+ left: unset;
288
+ right: 0;
289
+ }
234
290
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active-revert] {
235
- top: calc(100% - 1px);
291
+ top: calc(100% + 3px);
236
292
  }
237
293
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active-inside] {
238
- top: 0;
294
+ top: 4px;
239
295
  }
240
296
  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'] {
241
297
  left: unset;
242
298
  right: 0;
243
299
  border-color: #d6d6d6;
244
300
  }
245
- [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus] [data-toolbar-create-theme-section] {
246
- border-color: #3c67ff;
301
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus]
302
+ [data-toolbar-create-theme-section] {
303
+ border-color: #7190ff;
247
304
  }
248
305
  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus],
249
306
  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-active] {
250
- border-color: #3c67ff;
307
+ border-color: #7190ff;
251
308
  }
252
309
  [data-toolbar-wrap] [data-toolbar][data-toolbar-editor-inline-focus] {
253
310
  display: none;
@@ -286,33 +343,36 @@
286
343
  pointer-events: none;
287
344
  opacity: 0;
288
345
  visibility: hidden;
346
+ transition: opacity 0ms ease-in-out;
289
347
  }
290
348
  /* State Outline */
291
349
  [data-toolbar-wrap] [data-outline][data-outline-hover],
292
350
  [data-toolbar-wrap] [data-outline][data-outline-force-hover] {
293
351
  opacity: 1;
294
352
  visibility: visible;
295
- z-index: 0;
353
+ z-index: 1;
354
+ transition-delay: 100ms;
296
355
  }
297
356
  [data-toolbar-wrap] [data-outline][data-outline-active] {
298
357
  opacity: 1;
299
358
  visibility: visible;
300
- z-index: 0;
359
+ z-index: 1;
301
360
  }
302
361
  [data-toolbar-wrap] [data-outline][data-outline-overlay],
303
362
  [data-toolbar-wrap] [data-outline][data-outline-force-overlay] {
304
- background: rgba(60, 103, 255, 0.2);
363
+ background: rgba(60, 103, 255, 0.1);
364
+ transition-delay: 0ms;
305
365
  }
306
366
  [data-toolbar-wrap] [data-outline][data-outline-overlay][data-outline-theme-section='true'],
307
367
  [data-toolbar-wrap] [data-outline][data-outline-force-overlay][data-outline-theme-section='true'] {
308
368
  background: #ebddf866;
309
369
  }
310
370
  [data-toolbar-wrap] [data-outline][data-outline-overlay-theme-section] {
311
- background: #ebddf83d;
371
+ background: transparent;
312
372
  }
313
373
  [data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-section='true'] {
314
- border-color: #d6d6d6;
315
- z-index: -1;
374
+ border-color: #3c67ff;
375
+ z-index: 0;
316
376
  }
317
377
  [data-toolbar-wrap] [data-outline][data-outline-section='true'][data-outline-hover-focus],
318
378
  [data-toolbar-wrap] [data-outline][data-outline-section='true'][data-outline-active] {
@@ -334,6 +394,13 @@
334
394
  height: calc(100% + 4px);
335
395
  z-index: 0;
336
396
  }
397
+ /* disable divider */
398
+ [data-toolbar-wrap] [data-component-tag='Section'] > [data-toolbar] [data-toolbar-show-parent] {
399
+ margin-right: 0px;
400
+ }
401
+ [data-toolbar-wrap] [data-component-tag='Section'] > [data-toolbar] [data-toolbar-show-parent]:before {
402
+ display: none;
403
+ }
337
404
  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'],
338
405
  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'][data-outline-hover-focus],
339
406
  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'][data-outline-active] {
@@ -346,6 +413,21 @@
346
413
  [data-toolbar-wrap] [data-outline][data-outline-limit='true'] {
347
414
  border-color: #f44336;
348
415
  }
416
+ [data-toolbar-wrap] [data-outline][data-outline-parent-hover],
417
+ [data-toolbar-wrap] [data-outline][data-outline-section][data-outline-parent-hover] {
418
+ border-style: dashed;
419
+ }
420
+ /* disable delay animation on theme section */
421
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus],
422
+ [data-toolbar-wrap] [data-theme-section] [data-outline][data-outline-hover][data-outline-hover-focus],
423
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar-add-top],
424
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar-add-bottom] {
425
+ transition-delay: 0ms;
426
+ }
427
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar-add-top],
428
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar-add-bottom] {
429
+ border-color: #9144da;
430
+ }
349
431
  [data-toolbar-wrap] [data-theme-section] .button-text::after {
350
432
  display: none !important;
351
433
  }
@@ -400,17 +482,22 @@
400
482
  align-items: center;
401
483
  background: #fff;
402
484
  color: #3c67ff;
403
- border: solid 1px #d6d6d6;
404
- border-radius: 3px;
485
+ border: solid 1px #3c67ff;
486
+ border-radius: 8px;
405
487
  cursor: pointer;
406
488
  position: absolute;
407
489
  z-index: 50;
408
490
  left: calc(50% - 16px);
409
491
  top: -16px;
410
- display: none;
492
+ display: flex;
493
+ opacity: 0;
494
+ visibility: hidden;
411
495
  -webkit-user-select: none;
412
496
  user-select: none;
413
- transition: border-color 200ms ease-in-out;
497
+ transition:
498
+ border-color 200ms ease-in-out,
499
+ opacity 0ms ease-in-out;
500
+ transition-delay: 100ms;
414
501
  }
415
502
  [data-toolbar-wrap] [data-toolbar-add-top] svg, [data-toolbar-wrap] [data-toolbar-add-bottom] svg {
416
503
  width: 16px;
@@ -420,7 +507,7 @@
420
507
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
421
508
  }
422
509
  [data-toolbar-wrap] [data-toolbar-add-top]:hover, [data-toolbar-wrap] [data-toolbar-add-bottom]:hover {
423
- border-color: #3c67ff;
510
+ background-color: #f6f6f6;
424
511
  }
425
512
  [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable='true'], [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable='true'] {
426
513
  background: #f4f4f4;
@@ -443,11 +530,13 @@
443
530
  }
444
531
  [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-hover],
445
532
  [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-hover] {
446
- display: flex;
533
+ opacity: 1;
534
+ visibility: visible;
447
535
  }
448
536
  [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-active],
449
537
  [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-active] {
450
- display: flex;
538
+ opacity: 1;
539
+ visibility: visible;
451
540
  }
452
541
  /* Resize spacing */
453
542
  [data-toolbar-wrap] [data-spacing] {
@@ -748,4 +837,90 @@
748
837
 
749
838
  .theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more:hover {
750
839
  color: #b1c3ff;
751
- }
840
+ }
841
+
842
+ /* Toolbar onboarding */
843
+
844
+ [data-toolbar-onboarding] {
845
+ position: absolute;
846
+ left: 0;
847
+ top: 0;
848
+ width: 320px;
849
+ background-color: #fff;
850
+ color:rgba(60, 103, 255, 0.24);
851
+ border-radius: 8px;
852
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
853
+ z-index: 40;
854
+ visibility: hidden;
855
+ opacity: 0;
856
+ }
857
+
858
+ [data-toolbar-onboarding][data-onboarding-active]{
859
+ visibility: visible;
860
+ opacity: 1;
861
+ transition: opacity .25s;
862
+ }
863
+
864
+ [data-toolbar-onboarding] [data-onboarding-wrapper] {
865
+
866
+ }
867
+
868
+ [data-toolbar-onboarding] [data-icon] {
869
+ position: absolute;
870
+ top: -4px;
871
+ left: 16px;
872
+ /* Popover */
873
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
874
+ }
875
+
876
+ [data-toolbar-onboarding] [data-icon][data-position="top"] {
877
+ top: unset;
878
+ bottom: -4px;
879
+ }
880
+
881
+ [data-toolbar-onboarding] [data-close] {
882
+ position: absolute;
883
+ top: 8px;
884
+ right: 8px;
885
+ z-index: 99;
886
+ }
887
+
888
+ [data-toolbar-onboarding] [data-content] {
889
+ padding: 16px;
890
+ }
891
+
892
+ [data-toolbar-onboarding] video {
893
+ border-radius: 8px 8px 0 0;
894
+ }
895
+
896
+ [data-toolbar-onboarding] h3 {
897
+ color: #212121;
898
+ font-family: Inter;
899
+ font-size: 16px;
900
+ font-style: normal;
901
+ font-weight: 600;
902
+ line-height: 24px; /* 150% */
903
+ letter-spacing: -0.32px;
904
+ }
905
+
906
+ [data-toolbar-onboarding] p{
907
+ color: #676767;
908
+ font-family: Inter;
909
+ font-size: 14px;
910
+ font-style: normal;
911
+ font-weight: 400;
912
+ line-height: 24px; /* 171.429% */
913
+ }
914
+
915
+ @media (max-width: 767px) {
916
+ [data-toolbar-wrap] [data-toolbar-add-top], [data-toolbar-wrap] [data-toolbar-add-bottom] {
917
+ width: 28px;
918
+ height: 28px;
919
+ left: calc(50% - 14px);
920
+ top: -14px;
921
+ }
922
+ [data-toolbar-wrap] [data-toolbar-add-bottom] {
923
+ top: unset;
924
+ bottom: -14px;
925
+ }
926
+ }
package/dist/toolbar.min.css CHANGED
@@ -1 +1 @@
1
- [data-toolbar-wrap]{position:relative}[data-toolbar-wrap] [data-toolbar]{align-items:center;background:#fff;border:1px solid #3c67ff;color:#3c67ff;cursor:pointer;display:flex;font-family:Inter,sans-serif,ui-sans-serif,system-ui;height:24px;left:0;max-width:unset;opacity:0;padding:4px;pointer-events:unset;position:absolute;top:-23px;transition:background .2s ease-out;-webkit-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;z-index:20}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent]{align-items:center;display:flex}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag]{display:block}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag] svg,[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-name],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-name]{display:block;font-size:12px;font-weight:500;padding-left:4px;padding-right:4px;white-space:nowrap}[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent]{cursor:grab}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]{background:#fff;border:1px solid #3c67ff;color:#3c67ff;height:24px;left:-1px;opacity:1;padding:4px;position:absolute;top:-24px;visibility:visible;z-index:30}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:hover{background:#c5d2ff}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true]{border:1px solid #9144da;color:#9144da}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true]:hover,[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true][data-toolbar-hover-focus]:hover{background:#ebddf8}[data-toolbar-wrap] [data-toolbar] [data-toolbar-create-theme-section]{border-left:1px solid;border-color:#d6d6d6;font-size:12px;font-weight:500;line-height:16px;margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:8px;padding-right:4px}[data-toolbar-wrap] [data-toolbar] [data-toolbar-active-create-theme-section],[data-toolbar-wrap] [data-toolbar] [data-toolbar-delete],[data-toolbar-wrap] [data-toolbar] [data-toolbar-duplicate],[data-toolbar-wrap] [data-toolbar] [data-toolbar-icon-parent],[data-toolbar-wrap] [data-toolbar] [data-toolbar-zoom-out]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true]{border:1px solid #9144da;color:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]{opacity:1;visibility:visible;z-index:30}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover{background:#c5d2ff;border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover [data-toolbar-create-theme-section]{border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover-revert]{top:calc(100% - 1px)}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover-inside]{top:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]{background:#d8e1ff;z-index:40}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]:hover{background:#c5d2ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover][data-toolbar-hover-focus]{background:#ebddf8}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover]:hover{background:#ebddf8;border-color:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-active]:hover{background:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active]{background:#3c67ff;color:#fff;height:32px;opacity:1;top:-31px;visibility:visible;z-index:20}[data-toolbar-wrap] [data-toolbar][data-toolbar-active]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus]:hover{background:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section=true][data-toolbar-hover-focus]{background:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]{border-radius:2px;padding:4px;transition:background .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent]{display:block;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent][data-toolbar-icon-parent-open=true]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:hover{background:hsla(0,0%,88%,.2)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out]{border-radius:2px;display:block;padding:4px;transition:background .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out]:hover{background:hsla(0,0%,88%,.2)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable=true] svg{opacity:.4}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable=true]:hover{background:transparent}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section-wrapper]{border-left:1px solid #7190ff;border-right:1px solid #7190ff;margin:0 4px;padding:0 4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]{align-items:center;display:flex!important;gap:4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] p{font-size:12px;font-weight:500}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-create-theme-section]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-active-revert]{top:calc(100% - 1px)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active-inside]{top:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true]{border-color:#d6d6d6;left:unset;right:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-active],[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-hover-focus] [data-toolbar-create-theme-section]{border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-editor-inline-focus]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-active],[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover-focus]{border-color:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true]{background:#f44336;border-color:#f44336;color:#fff}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true] [data-toolbar-create-theme-section]{border-color:#fff}[data-toolbar-wrap] [data-outline]{border:1px solid #3c67ff;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;visibility:hidden;width:100%;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-active],[data-toolbar-wrap] [data-outline][data-outline-force-hover],[data-toolbar-wrap] [data-outline][data-outline-hover]{opacity:1;visibility:visible;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-force-overlay],[data-toolbar-wrap] [data-outline][data-outline-overlay]{background:rgba(60,103,255,.2)}[data-toolbar-wrap] [data-outline][data-outline-force-overlay][data-outline-theme-section=true],[data-toolbar-wrap] [data-outline][data-outline-overlay][data-outline-theme-section=true]{background:#ebddf866}[data-toolbar-wrap] [data-outline][data-outline-overlay-theme-section]{background:#ebddf83d}[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-section=true]{border-color:#d6d6d6;z-index:-1}[data-toolbar-wrap] [data-outline][data-outline-section=true][data-outline-active],[data-toolbar-wrap] [data-outline][data-outline-section=true][data-outline-hover-focus]{border-color:#3c67ff;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-editor-inline-focus]{border-color:transparent;outline:unset;z-index:0}[data-toolbar-wrap] [data-component-tag=Heading] [data-outline][data-outline-editor-inline-focus],[data-toolbar-wrap] [data-component-tag=Text] [data-outline][data-outline-editor-inline-focus]{border-color:#3c67ff;height:calc(100% + 4px);left:-2px;outline:4px solid rgba(60,103,255,.24);top:-2px;width:calc(100% + 4px);z-index:0}[data-toolbar-wrap] [data-outline][data-outline-theme-section=true],[data-toolbar-wrap] [data-outline][data-outline-theme-section=true][data-outline-active],[data-toolbar-wrap] [data-outline][data-outline-theme-section=true][data-outline-hover-focus]{border-color:#9144da;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-active][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-hover-focus][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-limit=true]{border-color:#f44336}[data-toolbar-wrap] [data-theme-section] .button-text:after{display:none!important}[data-toolbar-wrap] [data-theme-section] .gp-text:hover{border-color:transparent!important}[data-toolbar-wrap] [data-theme-section-status]{align-items:center;background:#ebddf8;border-radius:3px;color:#212121;display:none;font-size:14px;font-weight:400;gap:4px;left:8px;line-height:24px;max-width:32px;overflow:hidden;padding:4px;position:absolute;top:8px;transition:max-width 1s ease-in-out;z-index:50}[data-toolbar-wrap] [data-theme-section-status-active=true]{display:flex}[data-toolbar-wrap] [data-theme-section-status-icon]{align-items:center;cursor:pointer;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}[data-toolbar-wrap] [data-theme-section-status-text]{display:block;white-space:nowrap}[data-toolbar-wrap] [data-theme-section-status]:hover{max-width:100%}[data-toolbar-wrap] [data-toolbar-add-bottom],[data-toolbar-wrap] [data-toolbar-add-top]{align-items:center;background:#fff;border:1px solid #d6d6d6;border-radius:3px;color:#3c67ff;cursor:pointer;display:flex;display:none;height:32px;justify-content:center;left:calc(50% - 16px);position:absolute;top:-16px;transition:border-color .2s ease-in-out;-webkit-user-select:none;user-select:none;width:32px;z-index:50}[data-toolbar-wrap] [data-toolbar-add-bottom] svg,[data-toolbar-wrap] [data-toolbar-add-top] svg{height:16px;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;width:16px}[data-toolbar-wrap] [data-toolbar-add-bottom]:hover,[data-toolbar-wrap] [data-toolbar-add-top]:hover{border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable=true],[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable=true],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable=true]:hover{background:#f4f4f4;border-color:#d6d6d6;color:#d6d6d6}[data-toolbar-wrap] [data-toolbar-add-bottom]{bottom:-16px;top:unset}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-open=true] svg,[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-open=true] svg{-webkit-transform:rotate(45deg);transform:rotate(45deg)}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-active],[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-hover],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-active],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-hover]{display:flex}[data-toolbar-wrap] [data-spacing]{z-index:10}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom]{bottom:0;display:flex;display:none;justify-content:center;left:0;position:absolute;width:100%;z-index:10}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg]{align-items:center;background-color:#3c67ff33;display:flex;justify-content:center;left:0;position:absolute;top:0;width:100%}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg] [data-spacing-margin-bottom-value]{background-color:#3c67ff;border-radius:4px;color:#fff;display:none;font-size:8px;font-weight:700;padding:2px;position:absolute}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]{background-color:#3c67ff;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;cursor:ns-resize;height:4px;position:absolute;-webkit-transform:translateY(-100%);transform:translateY(-100%);transition:height .2s;width:40px}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]:hover{height:6px}[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-bg]{background-color:#9144da33}[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-bg] [data-spacing-margin-bottom-value],[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-drag]{background-color:#9144da}[data-toolbar-wrap] [data-spacing-margin-bottom][data-spacing-margin-bottom-active]{display:flex}[data-toolbar-wrap] [data-spacing][data-spacing-hidden]{display:none}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip]{background-color:#676767!important;border-radius:6px;color:#fff;font-size:16px;max-width:unset;opacity:0;padding:8px 12px;pointer-events:none;position:absolute;text-align:center;transition:opacity 1s;white-space:nowrap;width:unset;z-index:1}[data-toolbar-wrap] [data-toolbar-tooltip-trigger]:hover [data-toolbar-tooltip]{opacity:1}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=right]{left:105%;top:-5px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=right]:after{border:5px solid transparent;border-right-color:#676767;content:" ";margin-top:-5px;position:absolute;right:100%;top:50%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=left]{right:105%;top:-5px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=left]:after{border:5px solid transparent;border-left-color:#676767;content:" ";left:100%;margin-top:-5px;position:absolute;top:50%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=top]{bottom:105%;left:0}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=top]:after{border:5px solid transparent;border-top-color:#676767;content:" ";left:50%;margin-left:-5px;position:absolute;top:100%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=bottom]{left:0;top:105%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=bottom]:after{border:5px solid transparent;border-bottom-color:#676767;bottom:100%;content:" ";left:50%;margin-left:-5px;position:absolute}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate]{position:relative}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate] [data-toolbar-tooltip]{left:unset;margin-top:12px;right:0}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate] [data-toolbar-tooltip][data-toolbar-tooltip-position=bottom]:after{content:" ";left:unset;right:6px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-bottom] [data-toolbar-tooltip],[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-top] [data-toolbar-tooltip]{left:50%;margin-bottom:12px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}[data-toolbar-debug] [data-outline],[data-toolbar-debug] [data-toolbar]{opacity:1;visibility:visible}[data-toolbar-active=true] .theme-section-tooltip{padding-top:16px!important;right:-53px!important}[data-toolbar-active=true] .theme-section-tooltip:before{right:45%!important;top:12px!important}.theme-section-tooltip-wrapper{position:relative}.theme-section-tooltip-wrapper .theme-section-tooltip{border-radius:3px;cursor:default;display:flex;flex-direction:column;min-width:284px;padding-top:9px;position:absolute;right:-4px;top:100%}.theme-section-tooltip-wrapper .theme-section-tooltip:before{background:#212121;content:"";height:8px;position:absolute;right:16px;top:5px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:8px}.theme-section-tooltip-wrapper .theme-section-tooltip__image{background:#212121;border-radius:3px 3px 0 0;min-height:150px;padding:16px 20px 8px 21px}.theme-section-tooltip-wrapper .theme-section-tooltip__body{background:#151515;display:flex;flex-direction:column;gap:8px;padding:16px;white-space:normal}.theme-section-tooltip-wrapper .theme-section-tooltip__body-title{color:#f9f9f9;font-size:14px;font-weight:500;line-height:24px}.theme-section-tooltip-wrapper .theme-section-tooltip__body-desc{color:#aaa;font-size:14px;font-weight:400;line-height:24px}.theme-section-tooltip-wrapper .theme-section-tooltip__action{background:#151515;border-radius:0 0 3px 3px;border-top:1px solid #3b3b3b;display:flex;flex-direction:column;padding:16px}.theme-section-tooltip-wrapper .theme-section-tooltip__action button{background:#3c67ff;border-radius:3px;color:#f9f9f9;cursor:pointer;font-size:14px;font-weight:500;height:40px;line-height:24px;text-align:center;transition:all .15s ease-in;width:100%}.theme-section-tooltip-wrapper .theme-section-tooltip__action button:hover{background:#2856f8}.theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button{background:#fdb913!important;color:#212121!important}.theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button:hover{background:#fdc742!important}.theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more{color:#8aa4ff;cursor:pointer;font-size:12px;font-weight:500;line-height:20px;margin-top:8px;text-align:center;transition:all .15s ease-in}.theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more:hover{color:#b1c3ff}
1
+ [data-toolbar-wrap]{position:relative}[data-toolbar-wrap] [data-toolbar]{align-items:center;background:#3c67ff;border:1px solid #3c67ff;border-radius:6px 6px 0 0;color:#fff;cursor:pointer;display:flex;font-family:Inter,sans-serif,ui-sans-serif,system-ui;height:24px;left:0;max-width:unset;opacity:0;padding:4px;pointer-events:unset;position:absolute;top:-24px;transition:opacity 0ms ease-in-out;-webkit-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;z-index:20}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent]{align-items:center;display:flex}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag]{display:none}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-icon-drag] svg,[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-icon-drag] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-name],[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-name]{display:block;font-size:12px;font-weight:500;padding-left:4px;padding-right:4px;white-space:nowrap}[data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent]{cursor:grab}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]{background:#fff;background:#3c67ff;border-radius:8px;color:#fff;height:32px;left:0;opacity:1;padding:8px;position:absolute;top:-32px;visibility:visible;z-index:30}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:hover{background:#7190ff}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:before{background:transparent;bottom:-4px;content:"";height:4px;left:0;position:absolute;width:100%}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-parent-revert=true]:before{bottom:unset;top:-4px}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true]{background-color:#9144da;color:#fff}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true]:hover{background-color:#af7edd}[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section=true][data-toolbar-hover-focus]:hover{background:#ebddf8}[data-toolbar-wrap] [data-toolbar] [data-toolbar-create-theme-section]{border-left:1px solid;border-color:#d6d6d6;font-size:12px;font-weight:500;line-height:16px;margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:8px;padding-right:4px}[data-toolbar-wrap] [data-toolbar] [data-toolbar-active-create-theme-section],[data-toolbar-wrap] [data-toolbar] [data-toolbar-delete],[data-toolbar-wrap] [data-toolbar] [data-toolbar-duplicate],[data-toolbar-wrap] [data-toolbar] [data-toolbar-icon-parent],[data-toolbar-wrap] [data-toolbar] [data-toolbar-zoom-out]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true]{background-color:#9144da;color:#fff}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-active] [data-toolbar-show-parent]:before{background-color:#af7edd}[data-toolbar-wrap] [data-toolbar-theme-section=true] [data-toolbar-duplicate]{border-color:#be86f3}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]{border-width:0;opacity:1;transition-delay:.1s;visibility:visible;z-index:30}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover{background:#3c67ff;border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover [data-toolbar-create-theme-section]{border-color:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover-revert]{border-radius:0 0 6px 6px;top:calc(100% - 1px)}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover-inside]{border-radius:0 0 6px 6px;top:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]{background:#3c67ff;z-index:40}[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]:hover{background:#3c67ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover][data-toolbar-hover-focus]{background:#9144da;padding:4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-active]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover]:hover{background:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active]{background:#151515;border-color:#424242;border-radius:8px;color:#fff;height:32px;opacity:1;top:-35px;visibility:visible;z-index:20}[data-toolbar-wrap] [data-toolbar][data-toolbar-active]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus]:hover{background:#151515}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section=true][data-toolbar-hover-focus]{background:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]{border-radius:6px;margin-right:8px;padding:4px;position:relative;transition:background .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:before{background:#424242;content:"";height:calc(100% - 4px);position:absolute;right:-4px;top:2px;width:1px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent]{display:block;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent][data-toolbar-icon-parent-open=true]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:hover{background:hsla(0,0%,88%,.2)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-drag]{display:block}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate],[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out]{border-radius:2px;display:block;padding:4px;transition:background .2s ease-in-out}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out] svg{display:block;height:16px;max-width:unset;width:16px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out]:hover{background:hsla(0,0%,88%,.2)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate][data-toolbar-disable=true] svg,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable=true] svg{opacity:.4}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable=true]:hover{background:transparent}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section-wrapper]{border-left:1px solid #6a6a6a;border-right:1px solid #6a6a6a;margin:0 4px;padding:0 4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]{align-items:center;display:flex!important;gap:4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] p{font-size:12px;font-weight:500}[data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-create-theme-section]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-active-overflow],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover-overflow]{left:unset;right:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-active-revert]{top:calc(100% + 3px)}[data-toolbar-wrap] [data-toolbar][data-toolbar-active-inside]{top:4px}[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true]{border-color:#d6d6d6;left:unset;right:0}[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-active],[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-hover-focus],[data-toolbar-wrap] [data-toolbar][data-toolbar-section=true][data-toolbar-hover-focus] [data-toolbar-create-theme-section]{border-color:#7190ff}[data-toolbar-wrap] [data-toolbar][data-toolbar-editor-inline-focus]{display:none}[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-active],[data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section=true][data-toolbar-hover-focus]{border-color:#9144da}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true]{background:#f44336;border-color:#f44336;color:#fff}[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit=true] [data-toolbar-create-theme-section],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true] [data-toolbar-active-create-theme-section-wrapper],[data-toolbar-wrap] [data-toolbar][data-toolbar-limit=true] [data-toolbar-create-theme-section]{border-color:#fff}[data-toolbar-wrap] [data-outline]{border:1px solid #3c67ff;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity 0ms ease-in-out;visibility:hidden;width:100%;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-force-hover],[data-toolbar-wrap] [data-outline][data-outline-hover]{opacity:1;transition-delay:.1s;visibility:visible;z-index:1}[data-toolbar-wrap] [data-outline][data-outline-active]{opacity:1;visibility:visible;z-index:1}[data-toolbar-wrap] [data-outline][data-outline-force-overlay],[data-toolbar-wrap] [data-outline][data-outline-overlay]{background:rgba(60,103,255,.1);transition-delay:0ms}[data-toolbar-wrap] [data-outline][data-outline-force-overlay][data-outline-theme-section=true],[data-toolbar-wrap] [data-outline][data-outline-overlay][data-outline-theme-section=true]{background:#ebddf866}[data-toolbar-wrap] [data-outline][data-outline-overlay-theme-section]{background:transparent}[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-section=true],[data-toolbar-wrap] [data-outline][data-outline-section=true][data-outline-active],[data-toolbar-wrap] [data-outline][data-outline-section=true][data-outline-hover-focus]{border-color:#3c67ff;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-editor-inline-focus]{border-color:transparent;outline:unset;z-index:0}[data-toolbar-wrap] [data-component-tag=Heading] [data-outline][data-outline-editor-inline-focus],[data-toolbar-wrap] [data-component-tag=Text] [data-outline][data-outline-editor-inline-focus]{border-color:#3c67ff;height:calc(100% + 4px);left:-2px;outline:4px solid rgba(60,103,255,.24);top:-2px;width:calc(100% + 4px);z-index:0}[data-toolbar-wrap] [data-component-tag=Section]>[data-toolbar] [data-toolbar-show-parent]{margin-right:0}[data-toolbar-wrap] [data-component-tag=Section]>[data-toolbar] [data-toolbar-show-parent]:before{display:none}[data-toolbar-wrap] [data-outline][data-outline-theme-section=true],[data-toolbar-wrap] [data-outline][data-outline-theme-section=true][data-outline-active],[data-toolbar-wrap] [data-outline][data-outline-theme-section=true][data-outline-hover-focus]{border-color:#9144da;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-active][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-hover-focus][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-limit=true],[data-toolbar-wrap] [data-outline][data-outline-limit=true]{border-color:#f44336}[data-toolbar-wrap] [data-outline][data-outline-parent-hover],[data-toolbar-wrap] [data-outline][data-outline-section][data-outline-parent-hover]{border-style:dashed}[data-toolbar-wrap] [data-theme-section] [data-outline][data-outline-hover][data-outline-hover-focus],[data-toolbar-wrap] [data-theme-section] [data-toolbar-add-bottom],[data-toolbar-wrap] [data-theme-section] [data-toolbar-add-top],[data-toolbar-wrap] [data-theme-section] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]{transition-delay:0ms}[data-toolbar-wrap] [data-theme-section] [data-toolbar-add-bottom],[data-toolbar-wrap] [data-theme-section] [data-toolbar-add-top]{border-color:#9144da}[data-toolbar-wrap] [data-theme-section] .button-text:after{display:none!important}[data-toolbar-wrap] [data-theme-section] .gp-text:hover{border-color:transparent!important}[data-toolbar-wrap] [data-theme-section-status]{align-items:center;background:#ebddf8;border-radius:3px;color:#212121;display:none;font-size:14px;font-weight:400;gap:4px;left:8px;line-height:24px;max-width:32px;overflow:hidden;padding:4px;position:absolute;top:8px;transition:max-width 1s ease-in-out;z-index:50}[data-toolbar-wrap] [data-theme-section-status-active=true]{display:flex}[data-toolbar-wrap] [data-theme-section-status-icon]{align-items:center;cursor:pointer;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}[data-toolbar-wrap] [data-theme-section-status-text]{display:block;white-space:nowrap}[data-toolbar-wrap] [data-theme-section-status]:hover{max-width:100%}[data-toolbar-wrap] [data-toolbar-add-bottom],[data-toolbar-wrap] [data-toolbar-add-top]{align-items:center;background:#fff;border:1px solid #3c67ff;border-radius:8px;color:#3c67ff;cursor:pointer;display:flex;height:32px;justify-content:center;left:calc(50% - 16px);opacity:0;position:absolute;top:-16px;transition:border-color .2s ease-in-out,opacity 0ms ease-in-out;transition-delay:.1s;-webkit-user-select:none;user-select:none;visibility:hidden;width:32px;z-index:50}[data-toolbar-wrap] [data-toolbar-add-bottom] svg,[data-toolbar-wrap] [data-toolbar-add-top] svg{height:16px;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;width:16px}[data-toolbar-wrap] [data-toolbar-add-bottom]:hover,[data-toolbar-wrap] [data-toolbar-add-top]:hover{background-color:#f6f6f6}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable=true],[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable=true]:hover,[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable=true],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable=true]:hover{background:#f4f4f4;border-color:#d6d6d6;color:#d6d6d6}[data-toolbar-wrap] [data-toolbar-add-bottom]{bottom:-16px;top:unset}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-open=true] svg,[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-open=true] svg{-webkit-transform:rotate(45deg);transform:rotate(45deg)}[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-active],[data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-hover],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-active],[data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-hover]{opacity:1;visibility:visible}[data-toolbar-wrap] [data-spacing]{z-index:10}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom]{bottom:0;display:flex;display:none;justify-content:center;left:0;position:absolute;width:100%;z-index:10}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg]{align-items:center;background-color:#3c67ff33;display:flex;justify-content:center;left:0;position:absolute;top:0;width:100%}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg] [data-spacing-margin-bottom-value]{background-color:#3c67ff;border-radius:4px;color:#fff;display:none;font-size:8px;font-weight:700;padding:2px;position:absolute}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]{background-color:#3c67ff;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;cursor:ns-resize;height:4px;position:absolute;-webkit-transform:translateY(-100%);transform:translateY(-100%);transition:height .2s;width:40px}[data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]:hover{height:6px}[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-bg]{background-color:#9144da33}[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-bg] [data-spacing-margin-bottom-value],[data-toolbar-wrap] [data-spacing][data-spacing-theme-section=true] [data-spacing-margin-bottom-drag]{background-color:#9144da}[data-toolbar-wrap] [data-spacing-margin-bottom][data-spacing-margin-bottom-active]{display:flex}[data-toolbar-wrap] [data-spacing][data-spacing-hidden]{display:none}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip]{background-color:#676767!important;border-radius:6px;color:#fff;font-size:16px;max-width:unset;opacity:0;padding:8px 12px;pointer-events:none;position:absolute;text-align:center;transition:opacity 1s;white-space:nowrap;width:unset;z-index:1}[data-toolbar-wrap] [data-toolbar-tooltip-trigger]:hover [data-toolbar-tooltip]{opacity:1}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=right]{left:105%;top:-5px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=right]:after{border:5px solid transparent;border-right-color:#676767;content:" ";margin-top:-5px;position:absolute;right:100%;top:50%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=left]{right:105%;top:-5px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=left]:after{border:5px solid transparent;border-left-color:#676767;content:" ";left:100%;margin-top:-5px;position:absolute;top:50%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=top]{bottom:105%;left:0}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=top]:after{border:5px solid transparent;border-top-color:#676767;content:" ";left:50%;margin-left:-5px;position:absolute;top:100%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=bottom]{left:0;top:105%}[data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip-position=bottom]:after{border:5px solid transparent;border-bottom-color:#676767;bottom:100%;content:" ";left:50%;margin-left:-5px;position:absolute}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate]{position:relative}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate] [data-toolbar-tooltip]{left:unset;margin-top:12px;right:0}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate] [data-toolbar-tooltip][data-toolbar-tooltip-position=bottom]:after{content:" ";left:unset;right:6px}[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-bottom] [data-toolbar-tooltip],[data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-top] [data-toolbar-tooltip]{left:50%;margin-bottom:12px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}[data-toolbar-debug] [data-outline],[data-toolbar-debug] [data-toolbar]{opacity:1;visibility:visible}[data-toolbar-active=true] .theme-section-tooltip{padding-top:16px!important;right:-53px!important}[data-toolbar-active=true] .theme-section-tooltip:before{right:45%!important;top:12px!important}.theme-section-tooltip-wrapper{position:relative}.theme-section-tooltip-wrapper .theme-section-tooltip{border-radius:3px;cursor:default;display:flex;flex-direction:column;min-width:284px;padding-top:9px;position:absolute;right:-4px;top:100%}.theme-section-tooltip-wrapper .theme-section-tooltip:before{background:#212121;content:"";height:8px;position:absolute;right:16px;top:5px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:8px}.theme-section-tooltip-wrapper .theme-section-tooltip__image{background:#212121;border-radius:3px 3px 0 0;min-height:150px;padding:16px 20px 8px 21px}.theme-section-tooltip-wrapper .theme-section-tooltip__body{background:#151515;display:flex;flex-direction:column;gap:8px;padding:16px;white-space:normal}.theme-section-tooltip-wrapper .theme-section-tooltip__body-title{color:#f9f9f9;font-size:14px;font-weight:500;line-height:24px}.theme-section-tooltip-wrapper .theme-section-tooltip__body-desc{color:#aaa;font-size:14px;font-weight:400;line-height:24px}.theme-section-tooltip-wrapper .theme-section-tooltip__action{background:#151515;border-radius:0 0 3px 3px;border-top:1px solid #3b3b3b;display:flex;flex-direction:column;padding:16px}.theme-section-tooltip-wrapper .theme-section-tooltip__action button{background:#3c67ff;border-radius:3px;color:#f9f9f9;cursor:pointer;font-size:14px;font-weight:500;height:40px;line-height:24px;text-align:center;transition:all .15s ease-in;width:100%}.theme-section-tooltip-wrapper .theme-section-tooltip__action button:hover{background:#2856f8}.theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button{background:#fdb913!important;color:#212121!important}.theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button:hover{background:#fdc742!important}.theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more{color:#8aa4ff;cursor:pointer;font-size:12px;font-weight:500;line-height:20px;margin-top:8px;text-align:center;transition:all .15s ease-in}.theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more:hover{color:#b1c3ff}[data-toolbar-onboarding]{background-color:#fff;border-radius:8px;box-shadow:0 4px 16px 0 rgba(0,0,0,.12),0 -4px 16px 0 rgba(0,0,0,.06);color:rgba(60,103,255,.24);left:0;opacity:0;position:absolute;top:0;visibility:hidden;width:320px;z-index:40}[data-toolbar-onboarding][data-onboarding-active]{opacity:1;transition:opacity .25s;visibility:visible}[data-toolbar-onboarding] [data-icon]{box-shadow:0 4px 16px 0 rgba(0,0,0,.12),0 -4px 16px 0 rgba(0,0,0,.06);left:16px;position:absolute;top:-4px}[data-toolbar-onboarding] [data-icon][data-position=top]{bottom:-4px;top:unset}[data-toolbar-onboarding] [data-close]{position:absolute;right:8px;top:8px;z-index:99}[data-toolbar-onboarding] [data-content]{padding:16px}[data-toolbar-onboarding] video{border-radius:8px 8px 0 0}[data-toolbar-onboarding] h3{color:#212121;font-family:Inter;font-size:16px;font-style:normal;font-weight:600;letter-spacing:-.32px;line-height:24px}[data-toolbar-onboarding] p{color:#676767;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:24px}@media (max-width:767px){[data-toolbar-wrap] [data-toolbar-add-bottom],[data-toolbar-wrap] [data-toolbar-add-top]{height:28px;left:calc(50% - 14px);top:-14px;width:28px}[data-toolbar-wrap] [data-toolbar-add-bottom]{bottom:-14px;top:unset}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/styles",
3
- "version": "1.25.29",
3
+ "version": "1.27.14",
4
4
  "description": "Largely classless, blazing fast and super light-weight. Bonsai, a base CSS framework for modern browsers",
5
5
  "license": "MIT",
6
6
  "main": "src/index.js",
package/src/css/builds/toolbar.css CHANGED
@@ -6,15 +6,16 @@
6
6
  position: absolute;
7
7
  z-index: 20;
8
8
  height: 24px;
9
- top: -23px;
9
+ top: -24px;
10
10
  left: 0;
11
11
  max-width: unset;
12
12
  display: flex;
13
13
  align-items: center;
14
14
  padding: 4px;
15
- color: #3c67ff;
16
- background: #fff;
15
+ color: #fff;
16
+ background: #3c67ff;
17
17
  border: solid 1px #3c67ff;
18
+ border-radius: 6px 6px 0 0;
18
19
  white-space: nowrap;
19
20
  pointer-events: unset;
20
21
  font-family: Inter, sans-serif, ui-sans-serif, system-ui;
@@ -22,7 +23,7 @@
22
23
  visibility: hidden;
23
24
  cursor: pointer;
24
25
  user-select: none;
25
- transition: background 200ms ease-out;
26
+ transition: opacity 0ms ease-in-out;
26
27
 
27
28
  [data-toolbar-show-parent],
28
29
  [data-toolbar-parent] {
@@ -30,7 +31,7 @@
30
31
  align-items: center;
31
32
 
32
33
  [data-toolbar-icon-drag] {
33
- display: block;
34
+ display: none;
34
35
 
35
36
  svg {
36
37
  display: block;
@@ -56,28 +57,45 @@
56
57
 
57
58
  [data-toolbar-parent] {
58
59
  position: absolute;
59
- top: -24px;
60
- left: -1px;
61
- height: 24px;
62
- padding: 4px;
60
+ top: -32px;
61
+ left: 0px;
62
+ height: 32px;
63
+ padding: 8px;
63
64
  opacity: 1;
64
65
  visibility: visible;
65
66
  z-index: 30;
66
- color: #3c67ff;
67
+ color: #fff;
67
68
  background: #fff;
68
- border: solid 1px #3c67ff;
69
+ border-radius: 8px;
70
+ background: #3c67ff;
69
71
 
70
72
  &:hover {
71
- background: #c5d2ff;
73
+ background: #7190ff;
74
+ }
75
+
76
+ /* fix hover parent */
77
+ &:before {
78
+ content: '';
79
+ width: 100%;
80
+ height: 4px;
81
+ background: transparent;
82
+ bottom: -4px;
83
+ left: 0;
84
+ position: absolute;
85
+ }
86
+
87
+ &[data-toolbar-parent-revert='true']:before {
88
+ bottom: unset;
89
+ top: -4px;
72
90
  }
73
91
  }
74
92
 
75
93
  [data-toolbar-parent][data-toolbar-theme-section='true'] {
76
- border: solid 1px #9144da;
77
- color: #9144da;
94
+ background-color: #9144da;
95
+ color: #fff;
78
96
 
79
97
  &:hover {
80
- background: #ebddf8;
98
+ background-color: #af7edd;
81
99
  }
82
100
 
83
101
  &[data-toolbar-hover-focus] {
@@ -113,8 +131,18 @@
113
131
  }
114
132
 
115
133
  [data-toolbar][data-toolbar-theme-section='true'] {
116
- color: #9144da;
117
- border: solid 1px #9144da;
134
+ background-color: #9144da;
135
+ color: #fff;
136
+
137
+ &[data-toolbar-active] [data-toolbar-show-parent] {
138
+ &:before {
139
+ background-color: #af7edd;
140
+ }
141
+ }
142
+ }
143
+
144
+ [data-toolbar-theme-section='true'] [data-toolbar-duplicate] {
145
+ border-color: #be86f3;
118
146
  }
119
147
 
120
148
  /* State Toolbar */
@@ -123,9 +151,11 @@
123
151
  opacity: 1;
124
152
  visibility: visible;
125
153
  z-index: 30;
154
+ border-width: 0;
155
+ transition-delay: 100ms;
126
156
 
127
157
  &:hover {
128
- background: #c5d2ff;
158
+ background: #3c67ff;
129
159
  border-color: #3c67ff;
130
160
 
131
161
  [data-toolbar-create-theme-section] {
@@ -136,29 +166,31 @@
136
166
 
137
167
  [data-toolbar][data-toolbar-hover-revert] {
138
168
  top: calc(100% - 1px);
169
+ border-radius: 0 0 6px 6px;
139
170
  }
140
171
 
141
172
  [data-toolbar][data-toolbar-hover-inside] {
142
173
  top: 0;
174
+ border-radius: 0 0 6px 6px;
143
175
  }
144
176
 
145
177
  [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus] {
146
- background: #d8e1ff;
178
+ background: #3c67ff;
147
179
  z-index: 40;
148
180
 
149
181
  &:hover {
150
- background: #c5d2ff;
182
+ background: #3c67ff;
151
183
  }
152
184
  }
153
185
 
154
186
  [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover][data-toolbar-hover-focus] {
155
- background: #ebddf8;
187
+ background: #9144da;
188
+ padding: 4px;
156
189
  }
157
190
 
158
191
  [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover] {
159
192
  &:hover {
160
- background: #ebddf8;
161
- border-color: #9144da;
193
+ background: #9144da;
162
194
  }
163
195
  }
164
196
 
@@ -173,19 +205,21 @@
173
205
  visibility: visible;
174
206
  z-index: 20;
175
207
  height: 32px;
176
- top: -31px;
177
- background: #3c67ff;
208
+ top: -35px;
209
+ background: #151515;
210
+ border-color: #424242;
178
211
  color: #fff;
212
+ border-radius: 8px;
179
213
 
180
214
  &:hover {
181
- background: #3c67ff;
215
+ background: #151515;
182
216
  }
183
217
 
184
218
  &[data-toolbar-hover-focus] {
185
- background: #3c67ff;
219
+ background: #151515;
186
220
 
187
221
  &:hover {
188
- background: #3c67ff;
222
+ background: #151515;
189
223
  }
190
224
  }
191
225
 
@@ -199,8 +233,30 @@
199
233
 
200
234
  [data-toolbar-show-parent] {
201
235
  padding: 4px;
202
- border-radius: 2px;
236
+ margin-right: 8px;
237
+ border-radius: 6px;
203
238
  transition: background 200ms ease-in-out;
239
+ position: relative;
240
+
241
+ &:before {
242
+ position: absolute;
243
+ content: '';
244
+ background: #424242;
245
+ width: 1px;
246
+ height: calc(100% - 4px);
247
+ right: -4px;
248
+ top: 2px;
249
+ }
250
+
251
+ &:before {
252
+ position: absolute;
253
+ content: '';
254
+ background: #424242;
255
+ width: 1px;
256
+ height: calc(100% - 4px);
257
+ right: -4px;
258
+ top: 2px;
259
+ }
204
260
 
205
261
  [data-toolbar-icon-parent] {
206
262
  display: block;
@@ -221,6 +277,10 @@
221
277
  &:hover {
222
278
  background: rgba(225, 225, 225, 0.2);
223
279
  }
280
+
281
+ [data-toolbar-icon-drag] {
282
+ display: block;
283
+ }
224
284
  }
225
285
 
226
286
  [data-toolbar-duplicate],
@@ -257,8 +317,8 @@
257
317
  [data-toolbar-active-create-theme-section-wrapper] {
258
318
  padding: 0 4px;
259
319
  margin: 0 4px;
260
- border-left: solid 1px #7190ff;
261
- border-right: solid 1px #7190ff;
320
+ border-left: solid 1px #6a6a6a;
321
+ border-right: solid 1px #6a6a6a;
262
322
  }
263
323
 
264
324
  [data-toolbar-active-create-theme-section] {
@@ -277,12 +337,18 @@
277
337
  }
278
338
  }
279
339
 
340
+ [data-toolbar][data-toolbar-active-overflow],
341
+ [data-toolbar][data-toolbar-hover-overflow] {
342
+ left: unset;
343
+ right: 0;
344
+ }
345
+
280
346
  [data-toolbar][data-toolbar-active-revert] {
281
- top: calc(100% - 1px);
347
+ top: calc(100% + 3px);
282
348
  }
283
349
 
284
350
  [data-toolbar][data-toolbar-active-inside] {
285
- top: 0;
351
+ top: 4px;
286
352
  }
287
353
 
288
354
  [data-toolbar][data-toolbar-section='true'] {
@@ -291,13 +357,14 @@
291
357
  border-color: #d6d6d6;
292
358
  }
293
359
 
294
- [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus] [data-toolbar-create-theme-section] {
295
- border-color: #3c67ff;
360
+ [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus]
361
+ [data-toolbar-create-theme-section] {
362
+ border-color: #7190ff;
296
363
  }
297
364
 
298
365
  [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus],
299
366
  [data-toolbar][data-toolbar-section='true'][data-toolbar-active] {
300
- border-color: #3c67ff;
367
+ border-color: #7190ff;
301
368
  }
302
369
 
303
370
  [data-toolbar][data-toolbar-editor-inline-focus] {
@@ -335,6 +402,7 @@
335
402
  pointer-events: none;
336
403
  opacity: 0;
337
404
  visibility: hidden;
405
+ transition: opacity 0ms ease-in-out;
338
406
  }
339
407
 
340
408
  /* State Outline */
@@ -342,18 +410,20 @@
342
410
  [data-outline][data-outline-force-hover] {
343
411
  opacity: 1;
344
412
  visibility: visible;
345
- z-index: 0;
413
+ z-index: 1;
414
+ transition-delay: 100ms;
346
415
  }
347
416
 
348
417
  [data-outline][data-outline-active] {
349
418
  opacity: 1;
350
419
  visibility: visible;
351
- z-index: 0;
420
+ z-index: 1;
352
421
  }
353
422
 
354
423
  [data-outline][data-outline-overlay],
355
424
  [data-outline][data-outline-force-overlay] {
356
- background: rgba(60, 103, 255, 0.2);
425
+ background: rgba(60, 103, 255, 0.1);
426
+ transition-delay: 0ms;
357
427
  }
358
428
 
359
429
  [data-outline][data-outline-overlay][data-outline-theme-section='true'],
@@ -362,12 +432,12 @@
362
432
  }
363
433
 
364
434
  [data-outline][data-outline-overlay-theme-section] {
365
- background: #ebddf83d;
435
+ background: transparent;
366
436
  }
367
437
 
368
438
  [data-outline][data-outline-hover][data-outline-section='true'] {
369
- border-color: #d6d6d6;
370
- z-index: -1;
439
+ border-color: #3c67ff;
440
+ z-index: 0;
371
441
  }
372
442
 
373
443
  [data-outline][data-outline-section='true'][data-outline-hover-focus],
@@ -396,6 +466,17 @@
396
466
  }
397
467
  }
398
468
 
469
+ [data-component-tag='Section'] {
470
+ /* disable divider */
471
+ > [data-toolbar] [data-toolbar-show-parent] {
472
+ margin-right: 0px;
473
+
474
+ &:before {
475
+ display: none;
476
+ }
477
+ }
478
+ }
479
+
399
480
  [data-outline][data-outline-theme-section='true'],
400
481
  [data-outline][data-outline-theme-section='true'][data-outline-hover-focus],
401
482
  [data-outline][data-outline-theme-section='true'][data-outline-active] {
@@ -410,7 +491,25 @@
410
491
  border-color: #f44336;
411
492
  }
412
493
 
494
+ [data-outline][data-outline-parent-hover],
495
+ [data-outline][data-outline-section][data-outline-parent-hover] {
496
+ border-style: dashed;
497
+ }
498
+
413
499
  [data-theme-section] {
500
+ /* disable delay animation on theme section */
501
+ [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus],
502
+ [data-outline][data-outline-hover][data-outline-hover-focus],
503
+ [data-toolbar-add-top],
504
+ [data-toolbar-add-bottom] {
505
+ transition-delay: 0ms;
506
+ }
507
+
508
+ [data-toolbar-add-top],
509
+ [data-toolbar-add-bottom] {
510
+ border-color: #9144da;
511
+ }
512
+
414
513
  .button-text::after {
415
514
  display: none !important;
416
515
  }
@@ -473,16 +572,30 @@
473
572
  align-items: center;
474
573
  background: #fff;
475
574
  color: #3c67ff;
476
- border: solid 1px #d6d6d6;
477
- border-radius: 3px;
575
+ border: solid 1px #3c67ff;
576
+ border-radius: 8px;
478
577
  cursor: pointer;
479
578
  position: absolute;
480
579
  z-index: 50;
481
580
  left: calc(50% - 16px);
482
581
  top: -16px;
483
- display: none;
582
+ display: flex;
583
+ opacity: 0;
584
+ visibility: hidden;
484
585
  user-select: none;
485
- transition: border-color 200ms ease-in-out;
586
+ transition:
587
+ border-color 200ms ease-in-out,
588
+ opacity 0ms ease-in-out;
589
+ transition-delay: 100ms;
590
+
591
+ @media (max-width: 767px) {
592
+ & {
593
+ width: 28px;
594
+ height: 28px;
595
+ left: calc(50% - 14px);
596
+ top: -14px;
597
+ }
598
+ }
486
599
 
487
600
  svg {
488
601
  width: 16px;
@@ -491,7 +604,7 @@
491
604
  }
492
605
 
493
606
  &:hover {
494
- border-color: #3c67ff;
607
+ background-color: #f6f6f6;
495
608
  }
496
609
 
497
610
  &[data-toolbar-disable='true'] {
@@ -510,6 +623,13 @@
510
623
  [data-toolbar-add-bottom] {
511
624
  top: unset;
512
625
  bottom: -16px;
626
+
627
+ @media (max-width: 767px) {
628
+ & {
629
+ top: unset;
630
+ bottom: -14px;
631
+ }
632
+ }
513
633
  }
514
634
 
515
635
  /* Active add state */
@@ -522,12 +642,14 @@
522
642
 
523
643
  [data-toolbar-add-top][data-toolbar-add-hover],
524
644
  [data-toolbar-add-bottom][data-toolbar-add-hover] {
525
- display: flex;
645
+ opacity: 1;
646
+ visibility: visible;
526
647
  }
527
648
 
528
649
  [data-toolbar-add-top][data-toolbar-add-active],
529
650
  [data-toolbar-add-bottom][data-toolbar-add-active] {
530
- display: flex;
651
+ opacity: 1;
652
+ visibility: visible;
531
653
  }
532
654
 
533
655
  /* Resize spacing */
@@ -863,4 +985,73 @@
863
985
  color: #b1c3ff;
864
986
  }
865
987
  }
866
- }
988
+ }
989
+
990
+
991
+ /* Toolbar onboarding */
992
+ [data-toolbar-onboarding] {
993
+ position: absolute;
994
+ left: 0;
995
+ top: 0;
996
+ width: 320px;
997
+ background-color: #fff;
998
+ color:rgba(60, 103, 255, 0.24);
999
+ border-radius: 8px;
1000
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
1001
+ z-index: 40;
1002
+ visibility: hidden;
1003
+ opacity: 0;
1004
+
1005
+ &[data-onboarding-active]{
1006
+ visibility: visible;
1007
+ opacity: 1;
1008
+ transition: opacity .25s;
1009
+ }
1010
+
1011
+ [data-onboarding-wrapper] {
1012
+
1013
+ }
1014
+
1015
+ [data-icon] {
1016
+ position: absolute;
1017
+ top: -4px;
1018
+ left: 16px;
1019
+ /* Popover */
1020
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
1021
+
1022
+ &[data-position="top"] {
1023
+ top: unset;
1024
+ bottom: -4px;
1025
+ }
1026
+ }
1027
+ [data-close] {
1028
+ position: absolute;
1029
+ top: 8px;
1030
+ right: 8px;
1031
+ z-index: 99;
1032
+ }
1033
+
1034
+ [data-content] {
1035
+ padding: 16px;
1036
+ }
1037
+ video {
1038
+ border-radius: 8px 8px 0 0;
1039
+ }
1040
+ h3 {
1041
+ color: #212121;
1042
+ font-family: Inter;
1043
+ font-size: 16px;
1044
+ font-style: normal;
1045
+ font-weight: 600;
1046
+ line-height: 24px; /* 150% */
1047
+ letter-spacing: -0.32px;
1048
+ }
1049
+ p{
1050
+ color: #676767;
1051
+ font-family: Inter;
1052
+ font-size: 14px;
1053
+ font-style: normal;
1054
+ font-weight: 400;
1055
+ line-height: 24px; /* 171.429% */
1056
+ }
1057
+ }