@gem-sdk/styles 1.14.0-dev.395 → 1.14.0-dev.448

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 +142 -40
  2. package/dist/toolbar.min.css +1 -1
  3. package/package.json +1 -1
  4. package/src/css/builds/toolbar.css +142 -40
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: background 200ms ease-out, opacity 200ms 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: 300ms;
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,26 @@
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;
156
+ padding: 4px 8px;
130
157
  }
131
158
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]:hover {
132
- background: #c5d2ff;
159
+ background: #3c67ff;
133
160
  }
134
161
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover][data-toolbar-hover-focus] {
135
- background: #ebddf8;
162
+ background: #9144da;
163
+ padding: 4px;
136
164
  }
137
165
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover]:hover {
138
- background: #ebddf8;
139
- border-color: #9144da;
166
+ background: #9144da;
140
167
  }
141
168
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active]:hover {
142
169
  background: #9144da;
@@ -146,18 +173,20 @@
146
173
  visibility: visible;
147
174
  z-index: 20;
148
175
  height: 32px;
149
- top: -31px;
150
- background: #3c67ff;
176
+ top: -35px;
177
+ background: #000;
151
178
  color: #fff;
179
+ border-width: 0;
180
+ border-radius: 8px;
152
181
  }
153
182
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active]:hover {
154
- background: #3c67ff;
183
+ background: #000;
155
184
  }
156
185
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus] {
157
- background: #3c67ff;
186
+ background: #000;
158
187
  }
159
188
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus]:hover {
160
- background: #3c67ff;
189
+ background: #000;
161
190
  }
162
191
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section='true'] {
163
192
  background: #9144da;
@@ -167,9 +196,29 @@
167
196
  }
168
197
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] {
169
198
  padding: 4px;
170
- border-radius: 2px;
199
+ margin-right: 8px;
200
+ border-radius: 6px;
171
201
  transition: background 200ms ease-in-out;
202
+ position: relative ;
172
203
  }
204
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:before {
205
+ position: absolute;
206
+ content: "";
207
+ background: #424242;
208
+ width: 1px;
209
+ height: calc(100% - 4px);
210
+ right: -4px;
211
+ top: 2px;
212
+ }
213
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:before {
214
+ position: absolute;
215
+ content: "";
216
+ background: #424242;
217
+ width: 1px;
218
+ height: calc(100% - 4px);
219
+ right: -4px;
220
+ top: 2px;
221
+ }
173
222
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] {
174
223
  display: block;
175
224
  transition: -webkit-transform 200ms ease-in-out;
@@ -189,6 +238,9 @@
189
238
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:hover {
190
239
  background: rgba(225, 225, 225, 0.2);
191
240
  }
241
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-drag] {
242
+ display: block;
243
+ }
192
244
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate],
193
245
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete],
194
246
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out],
@@ -216,8 +268,8 @@
216
268
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section-wrapper] {
217
269
  padding: 0 4px;
218
270
  margin: 0 4px;
219
- border-left: solid 1px #7190ff;
220
- border-right: solid 1px #7190ff;
271
+ border-left: solid 1px #6a6a6a;
272
+ border-right: solid 1px #6a6a6a;
221
273
  }
222
274
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] {
223
275
  display: flex !important;
@@ -232,7 +284,7 @@
232
284
  display: none;
233
285
  }
234
286
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active-revert] {
235
- top: calc(100% - 1px);
287
+ top: calc(100% + 3px);
236
288
  }
237
289
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active-inside] {
238
290
  top: 0;
@@ -244,11 +296,11 @@
244
296
  }
245
297
  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus]
246
298
  [data-toolbar-create-theme-section] {
247
- border-color: #3c67ff;
299
+ border-color: #7190FF;
248
300
  }
249
301
  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus],
250
302
  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-active] {
251
- border-color: #3c67ff;
303
+ border-color: #7190FF;
252
304
  }
253
305
  [data-toolbar-wrap] [data-toolbar][data-toolbar-editor-inline-focus] {
254
306
  display: none;
@@ -287,6 +339,7 @@
287
339
  pointer-events: none;
288
340
  opacity: 0;
289
341
  visibility: hidden;
342
+ transition: opacity 200ms ease-in-out;
290
343
  }
291
344
  /* State Outline */
292
345
  [data-toolbar-wrap] [data-outline][data-outline-hover],
@@ -294,6 +347,7 @@
294
347
  opacity: 1;
295
348
  visibility: visible;
296
349
  z-index: 0;
350
+ transition-delay: 300ms;
297
351
  }
298
352
  [data-toolbar-wrap] [data-outline][data-outline-active] {
299
353
  opacity: 1;
@@ -302,7 +356,7 @@
302
356
  }
303
357
  [data-toolbar-wrap] [data-outline][data-outline-overlay],
304
358
  [data-toolbar-wrap] [data-outline][data-outline-force-overlay] {
305
- background: rgba(60, 103, 255, 0.2);
359
+ background: rgba(60, 103, 255, 0.10);
306
360
  }
307
361
  [data-toolbar-wrap] [data-outline][data-outline-overlay][data-outline-theme-section='true'],
308
362
  [data-toolbar-wrap] [data-outline][data-outline-force-overlay][data-outline-theme-section='true'] {
@@ -312,8 +366,8 @@
312
366
  background: #ebddf83d;
313
367
  }
314
368
  [data-toolbar-wrap] [data-outline][data-outline-hover][data-outline-section='true'] {
315
- border-color: #d6d6d6;
316
- z-index: -1;
369
+ border-color: #3c67ff;
370
+ z-index: 0;
317
371
  }
318
372
  [data-toolbar-wrap] [data-outline][data-outline-section='true'][data-outline-hover-focus],
319
373
  [data-toolbar-wrap] [data-outline][data-outline-section='true'][data-outline-active] {
@@ -335,6 +389,13 @@
335
389
  height: calc(100% + 4px);
336
390
  z-index: 0;
337
391
  }
392
+ /* disable divider */
393
+ [data-toolbar-wrap] [data-component-tag='Section'] > [data-toolbar] [data-toolbar-show-parent] {
394
+ margin-right: 0px;
395
+ }
396
+ [data-toolbar-wrap] [data-component-tag='Section'] > [data-toolbar] [data-toolbar-show-parent]:before {
397
+ display: none;
398
+ }
338
399
  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'],
339
400
  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'][data-outline-hover-focus],
340
401
  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'][data-outline-active] {
@@ -347,6 +408,14 @@
347
408
  [data-toolbar-wrap] [data-outline][data-outline-limit='true'] {
348
409
  border-color: #f44336;
349
410
  }
411
+ [data-toolbar-wrap] [data-outline][data-outline-parent-hover],
412
+ [data-toolbar-wrap] [data-outline][data-outline-section][data-outline-parent-hover] {
413
+ border-style: dashed;
414
+ }
415
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar-add-top],
416
+ [data-toolbar-wrap] [data-theme-section] [data-toolbar-add-bottom] {
417
+ border-color: #9144da;
418
+ }
350
419
  [data-toolbar-wrap] [data-theme-section] .button-text::after {
351
420
  display: none !important;
352
421
  }
@@ -401,8 +470,8 @@
401
470
  align-items: center;
402
471
  background: #fff;
403
472
  color: #3c67ff;
404
- border: solid 1px #d6d6d6;
405
- border-radius: 3px;
473
+ border: solid 1px #3c67ff;
474
+ border-radius: 8px;
406
475
  cursor: pointer;
407
476
  position: absolute;
408
477
  z-index: 50;
@@ -421,7 +490,7 @@
421
490
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
422
491
  }
423
492
  [data-toolbar-wrap] [data-toolbar-add-top]:hover, [data-toolbar-wrap] [data-toolbar-add-bottom]:hover {
424
- border-color: #3c67ff;
493
+ background-color: #F6F6F6;
425
494
  }
426
495
  [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-disable='true'], [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-disable='true'] {
427
496
  background: #f4f4f4;
@@ -676,32 +745,39 @@
676
745
  opacity: 1;
677
746
  }
678
747
 
748
+
679
749
  [data-toolbar-debug] [data-toolbar] {
680
750
  opacity: 1;
681
751
  visibility: visible;
682
752
  }
683
753
 
754
+
684
755
  [data-toolbar-debug] [data-outline] {
685
756
  opacity: 1;
686
757
  visibility: visible;
687
758
  }
688
759
 
760
+
689
761
  [data-toolbar-active='true'] .theme-section-tooltip {
690
762
  right: -53px !important;
691
763
  padding-top: 16px !important;
692
764
  }
693
765
 
766
+
694
767
  [data-toolbar-active='true'] .theme-section-tooltip::before {
695
768
  right: 45% !important;
696
769
  top: 12px !important;
697
770
  }
698
771
 
772
+
699
773
  /* Create theme section tooltip */
700
774
 
775
+
701
776
  .theme-section-tooltip-wrapper {
702
777
  position: relative;
703
778
  }
704
779
 
780
+
705
781
  .theme-section-tooltip-wrapper .theme-section-tooltip {
706
782
  cursor: default;
707
783
  min-width: 284px;
@@ -714,6 +790,7 @@
714
790
  padding-top: 9px;
715
791
  }
716
792
 
793
+
717
794
  .theme-section-tooltip-wrapper .theme-section-tooltip::before {
718
795
  content: '';
719
796
  position: absolute;
@@ -726,6 +803,7 @@
726
803
  top: 5px;
727
804
  }
728
805
 
806
+
729
807
  .theme-section-tooltip-wrapper .theme-section-tooltip__image {
730
808
  background: #212121;
731
809
  border-radius: 12px 12px 0 0;
@@ -736,6 +814,7 @@
736
814
  min-height: 150px;
737
815
  }
738
816
 
817
+
739
818
  .theme-section-tooltip-wrapper .theme-section-tooltip__body {
740
819
  display: flex;
741
820
  flex-direction: column;
@@ -745,6 +824,7 @@
745
824
  white-space: normal;
746
825
  }
747
826
 
827
+
748
828
  .theme-section-tooltip-wrapper .theme-section-tooltip__body-title {
749
829
  color: #f9f9f9;
750
830
  font-size: 14px;
@@ -752,6 +832,7 @@
752
832
  line-height: 24px;
753
833
  }
754
834
 
835
+
755
836
  .theme-section-tooltip-wrapper .theme-section-tooltip__body-desc {
756
837
  color: #aaa;
757
838
  font-size: 14px;
@@ -759,6 +840,7 @@
759
840
  line-height: 24px;
760
841
  }
761
842
 
843
+
762
844
  .theme-section-tooltip-wrapper .theme-section-tooltip__action {
763
845
  padding: 16px;
764
846
  border-radius: 0 0 12px 12px;
@@ -768,6 +850,7 @@
768
850
  flex-direction: column;
769
851
  }
770
852
 
853
+
771
854
  .theme-section-tooltip-wrapper .theme-section-tooltip__action button {
772
855
  cursor: pointer;
773
856
  width: 100%;
@@ -782,19 +865,23 @@
782
865
  transition: all 0.15s ease-in;
783
866
  }
784
867
 
868
+
785
869
  .theme-section-tooltip-wrapper .theme-section-tooltip__action button:hover {
786
870
  background: #2856f8;
787
871
  }
788
872
 
873
+
789
874
  .theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button {
790
875
  background: #fdb913 !important;
791
876
  color: #212121 !important;
792
877
  }
793
878
 
879
+
794
880
  .theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button:hover {
795
881
  background: #fdc742 !important;
796
882
  }
797
883
 
884
+
798
885
  .theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more {
799
886
  color: #8aa4ff;
800
887
  text-align: center;
@@ -806,6 +893,21 @@
806
893
  transition: all 0.15s ease-in;
807
894
  }
808
895
 
896
+
809
897
  .theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more:hover {
810
898
  color: #b1c3ff;
811
899
  }
900
+
901
+
902
+ @media (max-width: 767px) {
903
+ [data-toolbar-wrap] [data-toolbar-add-top], [data-toolbar-wrap] [data-toolbar-add-bottom] {
904
+ width: 28px;
905
+ height: 28px;
906
+ left: calc(50% - 14px);
907
+ top: -14px;
908
+ }
909
+ [data-toolbar-wrap] [data-toolbar-add-bottom] {
910
+ top: unset;
911
+ bottom: -14px;
912
+ }
913
+ }
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-wrap] [data-column]{z-index:10}[data-toolbar-wrap] [data-column] [data-column-hand-drag]{align-items:center;cursor:grab;justify-content:center;opacity:0;visibility:hidden}[data-toolbar-wrap] [data-column] [data-column-hand-drag] [data-column-hand-visual]{background-color:#d6d6d6;border-radius:2px;height:80%;transition:all .2s;width:3px}[data-toolbar-wrap] [data-column] [data-column-hand-drag] [data-column-hand-visual-drag]{color:#3c67ff;left:50%;opacity:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:all .2s;visibility:hidden;width:16px}[data-toolbar-wrap] [data-column] [data-column-hand-drag] [data-column-hand-visual-drag] svg{height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:16px}[data-toolbar-wrap] [data-column] [data-column-hand-drag]:hover [data-column-hand-visual],[data-toolbar-wrap] [data-column] [data-column-hand-drag][data-column-hand-drag-active=true] [data-column-hand-visual]{background-color:#3c67ff}[data-toolbar-wrap] [data-column] [data-column-hand-drag]:hover [data-column-hand-visual-drag],[data-toolbar-wrap] [data-column] [data-column-hand-drag][data-column-hand-drag-active=true] [data-column-hand-visual-drag]{opacity:1;visibility:visible}[data-toolbar-wrap] [data-column][data-column-theme-section=true] [data-column-hand-drag] [data-column-hand-visual-drag]{color:#9144da}[data-toolbar-wrap] [data-column][data-column-theme-section=true] [data-column-hand-drag]:hover [data-column-hand-visual],[data-toolbar-wrap] [data-column][data-column-theme-section=true] [data-column-hand-drag][data-column-hand-drag-active=true] [data-column-hand-visual]{background-color:#9144da}[data-toolbar-debug] [data-outline],[data-toolbar-debug] [data-toolbar],[data-toolbar-wrap] [data-column][data-column-force-visible=true] [data-column-hand-drag],[data-toolbar-wrap] [data-column][data-column-is-drag-visible=true] [data-column-hand-drag],[data-toolbar-wrap] [data-column][data-column-theme-section=true] [data-column-hand-drag]:hover [data-column-hand-visual-drag],[data-toolbar-wrap] [data-column][data-column-theme-section=true] [data-column-hand-drag][data-column-hand-drag-active=true] [data-column-hand-visual-drag],[data-toolbar-wrap] [data-column][data-column-visible] [data-column-hand-drag]{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:12px;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:12px 12px 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 12px 12px;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:8px;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:background .2s ease-out,opacity .2s 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:.3s;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;padding:4px 8px;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:#000;border-radius:8px;border-width:0;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:#000}[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-revert]{top:calc(100% + 3px)}[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:#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 .2s 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:.3s;visibility:visible;z-index:0}[data-toolbar-wrap] [data-outline][data-outline-active]{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,.1)}[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],[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-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;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{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]{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-wrap] [data-column]{z-index:10}[data-toolbar-wrap] [data-column] [data-column-hand-drag]{align-items:center;cursor:grab;justify-content:center;opacity:0;visibility:hidden}[data-toolbar-wrap] [data-column] [data-column-hand-drag] [data-column-hand-visual]{background-color:#d6d6d6;border-radius:2px;height:80%;transition:all .2s;width:3px}[data-toolbar-wrap] [data-column] [data-column-hand-drag] [data-column-hand-visual-drag]{color:#3c67ff;left:50%;opacity:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:all .2s;visibility:hidden;width:16px}[data-toolbar-wrap] [data-column] [data-column-hand-drag] [data-column-hand-visual-drag] svg{height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:16px}[data-toolbar-wrap] [data-column] [data-column-hand-drag]:hover [data-column-hand-visual],[data-toolbar-wrap] [data-column] [data-column-hand-drag][data-column-hand-drag-active=true] [data-column-hand-visual]{background-color:#3c67ff}[data-toolbar-wrap] [data-column] [data-column-hand-drag]:hover [data-column-hand-visual-drag],[data-toolbar-wrap] [data-column] [data-column-hand-drag][data-column-hand-drag-active=true] [data-column-hand-visual-drag]{opacity:1;visibility:visible}[data-toolbar-wrap] [data-column][data-column-theme-section=true] [data-column-hand-drag] [data-column-hand-visual-drag]{color:#9144da}[data-toolbar-wrap] [data-column][data-column-theme-section=true] [data-column-hand-drag]:hover [data-column-hand-visual],[data-toolbar-wrap] [data-column][data-column-theme-section=true] [data-column-hand-drag][data-column-hand-drag-active=true] [data-column-hand-visual]{background-color:#9144da}[data-toolbar-debug] [data-outline],[data-toolbar-debug] [data-toolbar],[data-toolbar-wrap] [data-column][data-column-force-visible=true] [data-column-hand-drag],[data-toolbar-wrap] [data-column][data-column-is-drag-visible=true] [data-column-hand-drag],[data-toolbar-wrap] [data-column][data-column-theme-section=true] [data-column-hand-drag]:hover [data-column-hand-visual-drag],[data-toolbar-wrap] [data-column][data-column-theme-section=true] [data-column-hand-drag][data-column-hand-drag-active=true] [data-column-hand-visual-drag],[data-toolbar-wrap] [data-column][data-column-visible] [data-column-hand-drag]{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:12px;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:12px 12px 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 12px 12px;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:8px;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}@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.14.0-dev.395",
3
+ "version": "1.14.0-dev.448",
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: background 200ms ease-out, opacity 200ms 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,19 @@
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
+
145
+ [data-toolbar-theme-section='true'] [data-toolbar-duplicate] {
146
+ border-color: #be86f3;
118
147
  }
119
148
 
120
149
  /* State Toolbar */
@@ -123,9 +152,11 @@
123
152
  opacity: 1;
124
153
  visibility: visible;
125
154
  z-index: 30;
155
+ border-width: 0;
156
+ transition-delay: 300ms;
126
157
 
127
158
  &:hover {
128
- background: #c5d2ff;
159
+ background: #3c67ff;
129
160
  border-color: #3c67ff;
130
161
 
131
162
  [data-toolbar-create-theme-section] {
@@ -136,29 +167,32 @@
136
167
 
137
168
  [data-toolbar][data-toolbar-hover-revert] {
138
169
  top: calc(100% - 1px);
170
+ border-radius: 0 0 6px 6px;
139
171
  }
140
172
 
141
173
  [data-toolbar][data-toolbar-hover-inside] {
142
174
  top: 0;
175
+ border-radius: 0 0 6px 6px;
143
176
  }
144
177
 
145
178
  [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus] {
146
- background: #d8e1ff;
179
+ background: #3c67ff;
147
180
  z-index: 40;
181
+ padding: 4px 8px;
148
182
 
149
183
  &:hover {
150
- background: #c5d2ff;
184
+ background: #3c67ff;
151
185
  }
152
186
  }
153
187
 
154
188
  [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover][data-toolbar-hover-focus] {
155
- background: #ebddf8;
189
+ background: #9144da;
190
+ padding: 4px;
156
191
  }
157
192
 
158
193
  [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover] {
159
194
  &:hover {
160
- background: #ebddf8;
161
- border-color: #9144da;
195
+ background: #9144da;
162
196
  }
163
197
  }
164
198
 
@@ -173,19 +207,21 @@
173
207
  visibility: visible;
174
208
  z-index: 20;
175
209
  height: 32px;
176
- top: -31px;
177
- background: #3c67ff;
210
+ top: -35px;
211
+ background: #000;
178
212
  color: #fff;
213
+ border-width: 0;
214
+ border-radius: 8px;
179
215
 
180
216
  &:hover {
181
- background: #3c67ff;
217
+ background: #000;
182
218
  }
183
219
 
184
220
  &[data-toolbar-hover-focus] {
185
- background: #3c67ff;
221
+ background: #000;
186
222
 
187
223
  &:hover {
188
- background: #3c67ff;
224
+ background: #000;
189
225
  }
190
226
  }
191
227
 
@@ -199,8 +235,30 @@
199
235
 
200
236
  [data-toolbar-show-parent] {
201
237
  padding: 4px;
202
- border-radius: 2px;
238
+ margin-right: 8px;
239
+ border-radius: 6px;
203
240
  transition: background 200ms ease-in-out;
241
+ position: relative ;
242
+
243
+ &:before {
244
+ position: absolute;
245
+ content: "";
246
+ background: #424242;
247
+ width: 1px;
248
+ height: calc(100% - 4px);
249
+ right: -4px;
250
+ top: 2px;
251
+ }
252
+
253
+ &:before {
254
+ position: absolute;
255
+ content: "";
256
+ background: #424242;
257
+ width: 1px;
258
+ height: calc(100% - 4px);
259
+ right: -4px;
260
+ top: 2px;
261
+ }
204
262
 
205
263
  [data-toolbar-icon-parent] {
206
264
  display: block;
@@ -221,6 +279,10 @@
221
279
  &:hover {
222
280
  background: rgba(225, 225, 225, 0.2);
223
281
  }
282
+
283
+ [data-toolbar-icon-drag] {
284
+ display: block;
285
+ }
224
286
  }
225
287
 
226
288
  [data-toolbar-duplicate],
@@ -257,8 +319,8 @@
257
319
  [data-toolbar-active-create-theme-section-wrapper] {
258
320
  padding: 0 4px;
259
321
  margin: 0 4px;
260
- border-left: solid 1px #7190ff;
261
- border-right: solid 1px #7190ff;
322
+ border-left: solid 1px #6a6a6a;
323
+ border-right: solid 1px #6a6a6a;
262
324
  }
263
325
 
264
326
  [data-toolbar-active-create-theme-section] {
@@ -278,7 +340,7 @@
278
340
  }
279
341
 
280
342
  [data-toolbar][data-toolbar-active-revert] {
281
- top: calc(100% - 1px);
343
+ top: calc(100% + 3px);
282
344
  }
283
345
 
284
346
  [data-toolbar][data-toolbar-active-inside] {
@@ -293,12 +355,12 @@
293
355
 
294
356
  [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus]
295
357
  [data-toolbar-create-theme-section] {
296
- border-color: #3c67ff;
358
+ border-color: #7190FF;
297
359
  }
298
360
 
299
361
  [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus],
300
362
  [data-toolbar][data-toolbar-section='true'][data-toolbar-active] {
301
- border-color: #3c67ff;
363
+ border-color: #7190FF;
302
364
  }
303
365
 
304
366
  [data-toolbar][data-toolbar-editor-inline-focus] {
@@ -336,6 +398,7 @@
336
398
  pointer-events: none;
337
399
  opacity: 0;
338
400
  visibility: hidden;
401
+ transition: opacity 200ms ease-in-out;
339
402
  }
340
403
 
341
404
  /* State Outline */
@@ -344,6 +407,7 @@
344
407
  opacity: 1;
345
408
  visibility: visible;
346
409
  z-index: 0;
410
+ transition-delay: 300ms;
347
411
  }
348
412
 
349
413
  [data-outline][data-outline-active] {
@@ -354,7 +418,7 @@
354
418
 
355
419
  [data-outline][data-outline-overlay],
356
420
  [data-outline][data-outline-force-overlay] {
357
- background: rgba(60, 103, 255, 0.2);
421
+ background: rgba(60, 103, 255, 0.10);
358
422
  }
359
423
 
360
424
  [data-outline][data-outline-overlay][data-outline-theme-section='true'],
@@ -367,8 +431,8 @@
367
431
  }
368
432
 
369
433
  [data-outline][data-outline-hover][data-outline-section='true'] {
370
- border-color: #d6d6d6;
371
- z-index: -1;
434
+ border-color: #3c67ff;
435
+ z-index: 0;
372
436
  }
373
437
 
374
438
  [data-outline][data-outline-section='true'][data-outline-hover-focus],
@@ -396,6 +460,17 @@
396
460
  z-index: 0;
397
461
  }
398
462
  }
463
+
464
+ [data-component-tag='Section'] {
465
+ /* disable divider */
466
+ > [data-toolbar] [data-toolbar-show-parent] {
467
+ margin-right: 0px;
468
+
469
+ &:before {
470
+ display: none;
471
+ }
472
+ }
473
+ }
399
474
 
400
475
  [data-outline][data-outline-theme-section='true'],
401
476
  [data-outline][data-outline-theme-section='true'][data-outline-hover-focus],
@@ -411,7 +486,17 @@
411
486
  border-color: #f44336;
412
487
  }
413
488
 
489
+ [data-outline][data-outline-parent-hover],
490
+ [data-outline][data-outline-section][data-outline-parent-hover] {
491
+ border-style: dashed;
492
+ }
493
+
414
494
  [data-theme-section] {
495
+ [data-toolbar-add-top],
496
+ [data-toolbar-add-bottom] {
497
+ border-color: #9144da;
498
+ }
499
+
415
500
  .button-text::after {
416
501
  display: none !important;
417
502
  }
@@ -474,8 +559,8 @@
474
559
  align-items: center;
475
560
  background: #fff;
476
561
  color: #3c67ff;
477
- border: solid 1px #d6d6d6;
478
- border-radius: 3px;
562
+ border: solid 1px #3c67ff;
563
+ border-radius: 8px;
479
564
  cursor: pointer;
480
565
  position: absolute;
481
566
  z-index: 50;
@@ -485,6 +570,15 @@
485
570
  user-select: none;
486
571
  transition: border-color 200ms ease-in-out;
487
572
 
573
+ @media(max-width: 767px) {
574
+ & {
575
+ width: 28px;
576
+ height: 28px;
577
+ left: calc(50% - 14px);
578
+ top: -14px;
579
+ }
580
+ }
581
+
488
582
  svg {
489
583
  width: 16px;
490
584
  height: 16px;
@@ -492,7 +586,7 @@
492
586
  }
493
587
 
494
588
  &:hover {
495
- border-color: #3c67ff;
589
+ background-color: #F6F6F6;
496
590
  }
497
591
 
498
592
  &[data-toolbar-disable='true'] {
@@ -511,6 +605,13 @@
511
605
  [data-toolbar-add-bottom] {
512
606
  top: unset;
513
607
  bottom: -16px;
608
+
609
+ @media(max-width: 767px) {
610
+ & {
611
+ top: unset;
612
+ bottom: -14px;
613
+ }
614
+ }
514
615
  }
515
616
 
516
617
  /* Active add state */
@@ -805,6 +906,7 @@
805
906
  }
806
907
  }
807
908
 
909
+
808
910
  [data-toolbar-debug] {
809
911
  [data-toolbar] {
810
912
  opacity: 1;