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

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