@gem-sdk/styles 2.0.0-dev.895 → 2.0.0-staging.1037

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/toolbar.css CHANGED
@@ -85,6 +85,13 @@
85
85
  bottom: unset;
86
86
  top: -4px;
87
87
  }
88
+ [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-name] {
89
+ text-overflow: ellipsis;
90
+ overflow: hidden;
91
+ white-space: nowrap;
92
+ display: unset;
93
+ line-height: 1;
94
+ }
88
95
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent][data-toolbar-theme-section='true'] {
89
96
  background-color: #9144da;
90
97
  color: #fff;
@@ -115,18 +122,14 @@
115
122
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-icon-parent],
116
123
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-zoom-out],
117
124
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-duplicate],
125
+ [data-toolbar-wrap] [data-toolbar] [data-toolbar-title],
118
126
  [data-toolbar-wrap] [data-toolbar] [data-toolbar-delete] {
119
127
  display: none;
120
128
  }
121
- [data-toolbar-wrap] [data-toolbar] .gp-gen-content-toolbar {
122
- border-right-width: 0px;
123
- }
124
- [data-toolbar-wrap] [data-toolbar] .gp-gen-content-toolbar button:hover {
125
- background: transparent;
126
- }
127
129
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'] {
128
130
  background-color: #9144da;
129
131
  color: #fff;
132
+ border-width: 0;
130
133
  }
131
134
  [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active] [data-toolbar-show-parent]:before {
132
135
  background-color: #af7edd;
@@ -176,14 +179,14 @@
176
179
  background: #9144da;
177
180
  }
178
181
  [data-toolbar-wrap] [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-hover][data-toolbar-hover-focus] {
179
- background: #29845A;
182
+ background: #29845a;
180
183
  padding: 4px;
181
184
  }
182
185
  [data-toolbar-wrap] [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-hover]:hover {
183
- background: #29845A;
186
+ background: #29845a;
184
187
  }
185
188
  [data-toolbar-wrap] [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-active]:hover {
186
- background: #29845A;
189
+ background: #29845a;
187
190
  }
188
191
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] {
189
192
  opacity: 1;
@@ -196,6 +199,12 @@
196
199
  color: #fff;
197
200
  border-radius: 8px;
198
201
  }
202
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] .interaction-suffix {
203
+ display: flex !important;
204
+ }
205
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] .interaction-use-custom-element {
206
+ display: block;
207
+ }
199
208
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active]:hover {
200
209
  background: #151515;
201
210
  }
@@ -212,10 +221,10 @@
212
221
  background: #9144da;
213
222
  }
214
223
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-shopify-section='true'] {
215
- background: #29845A;
224
+ background: #29845a;
216
225
  }
217
226
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-shopify-section='true'][data-toolbar-hover-focus] {
218
- background: #29845A;
227
+ background: #29845a;
219
228
  }
220
229
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] {
221
230
  padding: 4px;
@@ -245,9 +254,7 @@
245
254
  }
246
255
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] {
247
256
  display: block;
248
- transition: -webkit-transform 200ms ease-in-out;
249
257
  transition: transform 200ms ease-in-out;
250
- transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
251
258
  }
252
259
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] svg {
253
260
  display: block;
@@ -256,8 +263,7 @@
256
263
  height: 16px;
257
264
  }
258
265
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent][data-toolbar-icon-parent-open='true'] {
259
- -webkit-transform: rotate(180deg);
260
- transform: rotate(180deg);
266
+ transform: rotate(180deg);
261
267
  }
262
268
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:hover {
263
269
  background-color: rgba(225, 225, 225, 0.2);
@@ -267,6 +273,7 @@
267
273
  }
268
274
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate],
269
275
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete],
276
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-title],
270
277
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out],
271
278
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] {
272
279
  display: block;
@@ -274,19 +281,19 @@
274
281
  border-radius: 6px;
275
282
  transition: background 200ms ease-in-out;
276
283
  }
277
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] svg {
284
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-title] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] svg {
278
285
  display: block;
279
286
  max-width: unset;
280
287
  width: 16px;
281
288
  height: 16px;
282
289
  }
283
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]:hover {
290
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-title]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section]:hover {
284
291
  background-color: rgba(225, 225, 225, 0.2);
285
292
  }
286
- [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-delete][data-toolbar-disable='true'] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable='true'] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable='true'] svg {
293
+ [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-delete][data-toolbar-disable='true'] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-title][data-toolbar-disable='true'] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable='true'] svg, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable='true'] svg {
287
294
  opacity: 0.4;
288
295
  }
289
- [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-delete][data-toolbar-disable='true']:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable='true']:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable='true']:hover {
296
+ [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-delete][data-toolbar-disable='true']:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-title][data-toolbar-disable='true']:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-zoom-out][data-toolbar-disable='true']:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section][data-toolbar-disable='true']:hover {
290
297
  background: transparent;
291
298
  }
292
299
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-visibility] {
@@ -310,12 +317,6 @@
310
317
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-create-theme-section] {
311
318
  display: none;
312
319
  }
313
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] .gp-gen-content-toolbar {
314
- border-right-width: 1px;
315
- }
316
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] .gp-gen-content-toolbar button:hover {
317
- background: #3B3B3B;
318
- }
319
320
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active-overflow],
320
321
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover-overflow] {
321
322
  left: unset;
@@ -332,13 +333,46 @@
332
333
  right: 0;
333
334
  border-color: #424242;
334
335
  }
335
- [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus] [data-toolbar-create-theme-section] {
336
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus]
337
+ [data-toolbar-create-theme-section] {
336
338
  border-color: #424242;
337
339
  }
338
- [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus],
339
340
  [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-active] {
340
341
  border-color: #424242;
341
342
  }
343
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-active] .gp-gen-content-btn {
344
+ border-right-width: 1px;
345
+ border-color: #6a6a6a;
346
+ }
347
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-active] .gp-gen-content-btn button:hover {
348
+ background: #3b3b3b;
349
+ }
350
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-section='false'][data-toolbar-active] .gp-gen-content-btn:before {
351
+ position: absolute;
352
+ content: '';
353
+ background: #424242;
354
+ width: 1px;
355
+ height: calc(100% - 4px);
356
+ right: 2px;
357
+ top: 2px;
358
+ }
359
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-section='false'][data-toolbar-active] .gp-gen-content-btn button:hover,
360
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-section='false'][data-toolbar-active] .gp-gen-content-btn button.gp-toolbar-ai-active {
361
+ background: #3b3b3b;
362
+ }
363
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active] .gp-gen-content-btn {
364
+ border-color: #af7edd;
365
+ }
366
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active] .gp-gen-content-btn:before {
367
+ background: #af7edd;
368
+ }
369
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active] .gp-gen-content-btn button:hover,
370
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active] .gp-gen-content-btn button.gp-toolbar-ai-active {
371
+ background: #af7edd;
372
+ }
373
+ [data-toolbar-wrap] [data-toolbar][data-toolbar-hover-focus] .gp-gen-content-btn {
374
+ display: none;
375
+ }
342
376
  [data-toolbar-wrap] [data-toolbar][data-toolbar-editor-inline-focus] {
343
377
  display: none;
344
378
  }
@@ -348,7 +382,7 @@
348
382
  }
349
383
  [data-toolbar-wrap] [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-hover-focus],
350
384
  [data-toolbar-wrap] [data-toolbar][data-toolbar-shopify-section='true'][data-toolbar-active] {
351
- border-color: #29845A;
385
+ border-color: #29845a;
352
386
  }
353
387
  [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-limit='true'],
354
388
  [data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-limit='true'],
@@ -382,9 +416,6 @@
382
416
  visibility: hidden;
383
417
  transition: opacity 0ms ease-in-out;
384
418
  }
385
- [data-toolbar-wrap][data-section-exceeded][data-toolbar-wrap] [data-outline][data-outline-section='true'] {
386
- border-color: #f44336;
387
- }
388
419
  /* State Outline */
389
420
  [data-toolbar-wrap] [data-outline][data-outline-hover],
390
421
  [data-toolbar-wrap] [data-outline][data-outline-force-hover] {
@@ -431,14 +462,14 @@
431
462
  top: 0px;
432
463
  left: 0px;
433
464
  width: calc(100% + 4px);
434
- height: calc(100% + 4px);
465
+ height: calc(100%);
435
466
  z-index: 0;
436
467
  }
437
468
  /* disable divider */
438
- [data-toolbar-wrap] [data-component-tag='Section'] >[data-toolbar] [data-toolbar-show-parent] {
469
+ [data-toolbar-wrap] [data-component-tag='Section'] > [data-toolbar] [data-toolbar-show-parent] {
439
470
  margin-right: 0px;
440
471
  }
441
- [data-toolbar-wrap] [data-component-tag='Section'] >[data-toolbar] [data-toolbar-show-parent]:before {
472
+ [data-toolbar-wrap] [data-component-tag='Section'] > [data-toolbar] [data-toolbar-show-parent]:before {
442
473
  display: none;
443
474
  }
444
475
  [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'],
@@ -450,7 +481,7 @@
450
481
  [data-toolbar-wrap] [data-outline][data-outline-shopify-section='true'],
451
482
  [data-toolbar-wrap] [data-outline][data-outline-shopify-section='true'][data-outline-hover-focus],
452
483
  [data-toolbar-wrap] [data-outline][data-outline-shopify-section='true'][data-outline-active] {
453
- border-color: #29845A;
484
+ border-color: #29845a;
454
485
  z-index: 0;
455
486
  }
456
487
  [data-toolbar-wrap] [data-outline][data-outline-active][data-outline-limit='true'],
@@ -459,6 +490,11 @@
459
490
  [data-toolbar-wrap] [data-outline][data-outline-limit='true'] {
460
491
  border-color: #f44336;
461
492
  }
493
+ [data-toolbar-wrap] [data-outline][data-outline-error='true'] {
494
+ border-color: #f44336 !important;
495
+ opacity: 1 !important;
496
+ visibility: visible !important;
497
+ }
462
498
  [data-toolbar-wrap] [data-outline][data-outline-parent-hover],
463
499
  [data-toolbar-wrap] [data-outline][data-outline-section][data-outline-parent-hover] {
464
500
  border-style: dashed;
@@ -489,7 +525,7 @@
489
525
  }
490
526
  [data-toolbar-wrap] [data-shopify-section] [data-toolbar-add-top],
491
527
  [data-toolbar-wrap] [data-shopify-section] [data-toolbar-add-bottom] {
492
- border-color: #29845A;
528
+ border-color: #29845a;
493
529
  }
494
530
  [data-toolbar-wrap] [data-theme-section-status] {
495
531
  display: none;
@@ -559,9 +595,7 @@
559
595
  [data-toolbar-wrap] [data-toolbar-add-top] svg, [data-toolbar-wrap] [data-toolbar-add-bottom] svg {
560
596
  width: 16px;
561
597
  height: 16px;
562
- transition: -webkit-transform 200ms ease-in-out;
563
598
  transition: transform 200ms ease-in-out;
564
- transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
565
599
  }
566
600
  [data-toolbar-wrap] [data-toolbar-add-top]:hover, [data-toolbar-wrap] [data-toolbar-add-bottom]:hover {
567
601
  background-color: #f6f6f6;
@@ -582,8 +616,7 @@
582
616
  }
583
617
  /* Active add state */
584
618
  [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-open='true'] svg, [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-open='true'] svg {
585
- -webkit-transform: rotate(45deg);
586
- transform: rotate(45deg);
619
+ transform: rotate(45deg);
587
620
  }
588
621
  [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-hover],
589
622
  [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-hover] {
@@ -633,7 +666,7 @@
633
666
  display: none;
634
667
  }
635
668
  [data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg] [data-value-number] {
636
- font-family: Inter;
669
+ font-family: Inter, sans-serif;
637
670
  background-color: #3c67ff;
638
671
  border-radius: 6px;
639
672
  color: #fff;
@@ -643,11 +676,8 @@
643
676
  font-size: 11px;
644
677
  height: 16px;
645
678
  line-height: 16px;
646
- -webkit-transform: translateY(0);
647
- transform: translateY(0);
648
- transition: -webkit-transform 0s ease-in-out;
679
+ transform: translateY(0);
649
680
  transition: transform 0s ease-in-out;
650
- transition: transform 0s ease-in-out, -webkit-transform 0s ease-in-out;
651
681
  opacity: 0;
652
682
  }
653
683
  [data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg] [data-value-number][data-active='true'] {
@@ -663,8 +693,7 @@
663
693
  cursor: ns-resize;
664
694
  background-color: #3c67ff;
665
695
  transition: height 0.2s;
666
- -webkit-transform: translateY(-100%);
667
- transform: translateY(-100%);
696
+ transform: translateY(-100%);
668
697
  }
669
698
  [data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]:hover {
670
699
  height: 6px;
@@ -684,6 +713,14 @@
684
713
  [data-toolbar-wrap] [data-spacing][data-spacing-hidden] {
685
714
  display: none;
686
715
  }
716
+ [data-toolbar-wrap] [data-toolbar-title].active [data-toolbar-tooltip] {
717
+ opacity: 1;
718
+ }
719
+ [data-toolbar-wrap] [data-toolbar-title].active {
720
+
721
+ background-color: rgba(225, 225, 225, 0.2);
722
+ position: relative;
723
+ }
687
724
  /* Tooltips */
688
725
  [data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip] {
689
726
  width: unset;
@@ -769,7 +806,6 @@
769
806
  [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate] [data-toolbar-tooltip] {
770
807
  left: unset;
771
808
  right: 0;
772
- margin-top: 12px;
773
809
  }
774
810
  [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-duplicate] [data-toolbar-tooltip][data-toolbar-tooltip-position='bottom']::after {
775
811
  content: ' ';
@@ -789,9 +825,7 @@
789
825
  }
790
826
  [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-delete] [data-toolbar-tooltip][data-toolbar-tooltip-position='top'] {
791
827
  margin-bottom: 12px;
792
- left: 50%;
793
- -webkit-transform: translateX(-50%);
794
- transform: translateX(-50%);
828
+ transform: translateX(-91px);
795
829
  }
796
830
  [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-delete] [data-toolbar-tooltip][data-toolbar-tooltip-position='bottom'] {
797
831
  top: 36px;
@@ -802,76 +836,69 @@
802
836
  right: 10px;
803
837
  left: unset;
804
838
  }
805
- [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-top] [data-toolbar-tooltip], [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-bottom] [data-toolbar-tooltip] {
806
- margin-bottom: 12px;
807
- left: 50%;
808
- -webkit-transform: translateX(-50%);
809
- transform: translateX(-50%);
810
- }
811
- /* Resize column */
812
- [data-toolbar-wrap] [data-column] {
813
- z-index: 10;
814
- position: absolute;
815
- width: 100%;
816
- height: 100%;
817
- top: 0;
818
- left: 0;
819
- pointer-events: none;
839
+ [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-delete] {
840
+ position: relative;
820
841
  }
821
- [data-toolbar-wrap] [data-column] [data-column-hand-drag] {
822
- justify-content: center;
823
- align-items: center;
824
- visibility: hidden;
825
- opacity: 0;
826
- cursor: grab;
827
- pointer-events: auto;
828
- }
829
- [data-toolbar-wrap] [data-column] [data-column-hand-drag] [data-column-hand-visual] {
830
- border-radius: 2px;
831
- width: 3px;
832
- height: 80%;
833
- background-color: #d6d6d6;
834
- transition: all 0.2s;
835
- }
836
- [data-toolbar-wrap] [data-column] [data-column-hand-drag] [data-column-hand-visual-drag] {
837
- position: absolute;
838
- top: 50%;
842
+ [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-delete] [data-toolbar-tooltip] {
843
+ width: 206px;
844
+ white-space: normal;
845
+ font-size: 12px;
846
+ line-height: 20px;
847
+ text-align: left;
848
+ padding: 8px;
849
+ }
850
+ [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-delete] [data-toolbar-tooltip][data-toolbar-tooltip-position='top'] {
851
+ margin-bottom: 12px;
839
852
  left: 50%;
840
- -webkit-transform: translate(-50%, -50%);
841
- transform: translate(-50%, -50%);
842
- color: #3c67ff;
843
- visibility: hidden;
844
- opacity: 0;
845
- transition: all 0.2s;
846
- width: 16px;
853
+ transform: translateX(-50%);
847
854
  }
848
- [data-toolbar-wrap] [data-column] [data-column-hand-drag] [data-column-hand-visual-drag] svg {
849
- width: 16px;
850
- height: 16px;
851
- -webkit-transform: rotate(45deg);
852
- transform: rotate(45deg);
853
- }
854
- [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] {
855
- background-color: #3c67ff;
856
- }
857
- [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] {
858
- visibility: visible;
859
- opacity: 1;
860
- }
861
- [data-toolbar-wrap] [data-column][data-column-theme-section='true'] [data-column-hand-drag] [data-column-hand-visual-drag] {
862
- color: #9144da;
855
+ [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-delete] [data-toolbar-tooltip][data-toolbar-tooltip-position='bottom'] {
856
+ top: 36px;
857
+ right: -4px;
858
+ left: unset;
863
859
  }
864
- [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] {
865
- background-color: #9144da;
860
+ [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-delete] [data-toolbar-tooltip][data-toolbar-tooltip-position='bottom']::after {
861
+ right: 10px;
862
+ left: unset;
866
863
  }
867
- [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] {
868
- visibility: visible;
869
- opacity: 1;
864
+ [data-toolbar-wrap] [data-toolbar-title] {
865
+ position: relative;
866
+ }
867
+ [data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip], [data-toolbar-wrap] [data-toolbar-title] [data-toolbar-tooltip] {
868
+ width: 145px;
869
+ white-space: normal;
870
+ font-size: 12px;
871
+ line-height: 20px;
872
+ text-align: left;
873
+ padding: 8px;
874
+ }
875
+ [data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip][data-toolbar-tooltip-position='top'], [data-toolbar-wrap] [data-toolbar-title] [data-toolbar-tooltip][data-toolbar-tooltip-position='top'] {
876
+ margin-bottom: 12px;
877
+ transform: translateX(-64px);
878
+ }
879
+ [data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip][data-toolbar-tooltip-position='bottom'], [data-toolbar-wrap] [data-toolbar-title] [data-toolbar-tooltip][data-toolbar-tooltip-position='bottom'] {
880
+ top: 36px;
881
+ right: -4px;
882
+ left: unset;
883
+ }
884
+ [data-toolbar-wrap] [data-toolbar-tooltip-trigger] [data-toolbar-tooltip][data-toolbar-tooltip-position='bottom']::after, [data-toolbar-wrap] [data-toolbar-title] [data-toolbar-tooltip][data-toolbar-tooltip-position='bottom']::after {
885
+ right: 10px;
886
+ left: unset;
870
887
  }
871
- [data-toolbar-wrap] [data-column][data-column-visible] [data-column-hand-drag], [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] {
872
- visibility: visible;
873
- opacity: 1;
888
+ [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-top] [data-toolbar-tooltip], [data-toolbar-wrap] [data-toolbar-tooltip-trigger][data-toolbar-add-bottom] [data-toolbar-tooltip] {
889
+ margin-bottom: 12px;
890
+ left: 50%;
891
+ transform: translateX(-50%);
874
892
  }
893
+ [data-toolbar-wrap] .ck-widget {
894
+ background-color: #f4f4f4;
895
+ border-radius: 6px;
896
+ padding-left: 6px;
897
+ padding-right: 6px;
898
+ }
899
+ [data-toolbar-wrap] .ck-meta-selected {
900
+ background-color: #e2e2e2;
901
+ }
875
902
 
876
903
  [data-toolbar-debug] [data-toolbar] {
877
904
  opacity: 1;
@@ -904,7 +931,7 @@
904
931
  min-width: 284px;
905
932
  display: flex;
906
933
  flex-direction: column;
907
- border-radius: 12px;
934
+ border-radius: 3px;
908
935
  position: absolute;
909
936
  right: -4px;
910
937
  top: 100%;
@@ -917,15 +944,14 @@
917
944
  height: 8px;
918
945
  width: 8px;
919
946
  background: #212121;
920
- -webkit-transform: rotate(45deg);
921
- transform: rotate(45deg);
947
+ transform: rotate(45deg);
922
948
  right: 16px;
923
949
  top: 5px;
924
950
  }
925
951
 
926
952
  .theme-section-tooltip-wrapper .theme-section-tooltip__image {
927
953
  background: #212121;
928
- border-radius: 12px 12px 0 0;
954
+ border-radius: 3px 3px 0 0;
929
955
  padding-top: 16px;
930
956
  padding-bottom: 8px;
931
957
  padding-left: 21px;
@@ -956,9 +982,36 @@
956
982
  line-height: 24px;
957
983
  }
958
984
 
985
+ .theme-section-tooltip-wrapper .theme-section-tooltip__body-limit {
986
+ border-radius: 8px;
987
+ }
988
+
989
+ .theme-section-tooltip-wrapper .theme-section-tooltip__body-limit__title {
990
+ font-size: 16px;
991
+ font-weight: 600;
992
+ }
993
+
994
+ .theme-section-tooltip-wrapper .theme-section-tooltip__body-limit-desc {
995
+ color: #f9f9f9;
996
+ }
997
+
998
+ .theme-section-tooltip-wrapper .theme-section-tooltip__body-limit button {
999
+ cursor: pointer;
1000
+ width: 100%;
1001
+ text-align: center;
1002
+ background: #3c67ff;
1003
+ border-radius: 3px;
1004
+ height: 40px;
1005
+ font-size: 12px;
1006
+ line-height: 20px;
1007
+ color: #f9f9f9;
1008
+ font-weight: 500;
1009
+ transition: all 0.15s ease-in;
1010
+ }
1011
+
959
1012
  .theme-section-tooltip-wrapper .theme-section-tooltip__action {
960
1013
  padding: 16px;
961
- border-radius: 0 0 12px 12px;
1014
+ border-radius: 0 0 3px 3px;
962
1015
  border-top: solid 1px #3b3b3b;
963
1016
  background: #151515;
964
1017
  display: flex;
@@ -970,7 +1023,7 @@
970
1023
  width: 100%;
971
1024
  text-align: center;
972
1025
  background: #3c67ff;
973
- border-radius: 8px;
1026
+ border-radius: 3px;
974
1027
  height: 40px;
975
1028
  font-size: 14px;
976
1029
  line-height: 24px;
@@ -1030,7 +1083,8 @@
1030
1083
  transition: opacity 0.25s;
1031
1084
  }
1032
1085
 
1033
- [data-toolbar-onboarding] [data-onboarding-wrapper] {}
1086
+ [data-toolbar-onboarding] [data-onboarding-wrapper] {
1087
+ }
1034
1088
 
1035
1089
  [data-toolbar-onboarding] [data-icon] {
1036
1090
  position: absolute;
@@ -1062,8 +1116,7 @@
1062
1116
  }
1063
1117
 
1064
1118
  [data-toolbar-onboarding] [data-close] svg {
1065
- -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
1066
- filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
1119
+ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
1067
1120
  }
1068
1121
 
1069
1122
  [data-toolbar-onboarding] [data-icon] {
@@ -1071,10 +1124,12 @@
1071
1124
  top: -4px;
1072
1125
  left: 16px;
1073
1126
  /* Popover */
1074
- box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
1127
+ box-shadow:
1128
+ 0px 4px 16px 0px rgba(0, 0, 0, 0.12),
1129
+ 0px -4px 16px 0px rgba(0, 0, 0, 0.06);
1075
1130
  }
1076
1131
 
1077
- [data-toolbar-onboarding] [data-icon][data-position="top"] {
1132
+ [data-toolbar-onboarding] [data-icon][data-position='top'] {
1078
1133
  top: unset;
1079
1134
  bottom: -4px;
1080
1135
  }
@@ -1086,16 +1141,15 @@
1086
1141
  z-index: 99;
1087
1142
  border-radius: 8px;
1088
1143
  background-color: transparent;
1089
- transition: background .25s;
1144
+ transition: background 0.25s;
1090
1145
  }
1091
1146
 
1092
1147
  [data-toolbar-onboarding] [data-close]:hover {
1093
- background-color: #E2E2E2;
1148
+ background-color: #e2e2e2;
1094
1149
  }
1095
1150
 
1096
1151
  [data-toolbar-onboarding] [data-close] svg {
1097
- -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
1098
- filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
1152
+ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
1099
1153
  }
1100
1154
 
1101
1155
  [data-toolbar-onboarding] [data-content] {
@@ -1108,7 +1162,7 @@
1108
1162
 
1109
1163
  [data-toolbar-onboarding] h3 {
1110
1164
  color: #212121;
1111
- font-family: Inter;
1165
+ font-family: Inter, sans-serif;
1112
1166
  font-size: 16px;
1113
1167
  font-style: normal;
1114
1168
  font-weight: 600;
@@ -1119,7 +1173,7 @@
1119
1173
 
1120
1174
  [data-toolbar-onboarding] p {
1121
1175
  color: #676767;
1122
- font-family: Inter;
1176
+ font-family: Inter, sans-serif;
1123
1177
  font-size: 14px;
1124
1178
  font-style: normal;
1125
1179
  font-weight: 400;
@@ -1127,8 +1181,8 @@
1127
1181
  /* 171.429% */
1128
1182
  }
1129
1183
 
1130
- [data-slot="children"] {
1131
- font-family: Inter;
1184
+ [data-slot='children'] {
1185
+ font-family: Inter, sans-serif;
1132
1186
  }
1133
1187
 
1134
1188
  @media (max-width: 767px) {