@gem-sdk/styles 1.22.31-new-feature.2 → 1.22.31-staging.1

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/builder.css CHANGED
@@ -3,30 +3,24 @@
3
3
  -webkit-touch-callout: none;
4
4
  user-select: none;
5
5
  }
6
-
7
6
  .builder [disabled] {
8
7
  pointer-events: auto;
9
8
  }
10
-
11
9
  .builder [data-slot='children'] {
12
10
  visibility: visible;
13
11
  }
14
-
15
12
  .builder [data-slot='children']:after {
16
13
  visibility: visible;
17
14
  color: #aaa;
18
15
  }
19
-
20
16
  .builder [data-slot='children'] .drag-placeholder {
21
17
  height: 100%;
22
18
  }
23
-
24
19
  .builder .generate-image-to-layout-btn {
25
20
  position: relative;
26
21
  background-image: linear-gradient(270.07deg, #874cfd 0.03%, #3c38e1 99.92%);
27
22
  z-index: 1;
28
23
  }
29
-
30
24
  .builder .generate-image-to-layout-btn::before {
31
25
  position: absolute;
32
26
  content: '';
@@ -40,27 +34,22 @@
40
34
  opacity: 0;
41
35
  border-radius: 3px;
42
36
  }
43
-
44
37
  .builder .btn-disable {
45
38
  background-image: none;
46
39
  background-color: #f4f4f4;
47
40
  color: #9e9e9e;
48
41
  cursor: not-allowed;
49
42
  }
50
-
51
43
  .builder .generate-image-to-layout-btn:hover::before {
52
44
  opacity: 1;
53
45
  }
54
-
55
46
  .builder .image-to-layout-input-border {
56
47
  border: 1px solid #3c38e1;
57
48
  border-radius: 3px;
58
49
  }
59
-
60
50
  .builder .image-to-layout-input-wrapper-modal {
61
51
  position: relative;
62
52
  }
63
-
64
53
  .builder .image-to-layout-input-wrapper,
65
54
  .builder .image-to-layout-input-wrapper-add-section {
66
55
  position: relative;
@@ -68,25 +57,20 @@
68
57
  background-clip: padding-box;
69
58
  box-sizing: border-box;
70
59
  }
71
-
72
60
  .image-to-layout-input-wrapper-add-section {
73
61
  border: 1px solid #3c67ff;
74
62
  }
75
-
76
63
  .gps-image-to-layout-progress-bar {
77
64
  background: linear-gradient(270.07deg, #874cfd 0.03%, #3c38e1 99.92%);
78
65
  }
79
-
80
66
  .drag-placeholder {
81
67
  display: none;
82
68
  width: 100%;
83
69
  }
84
-
85
70
  #storefront {
86
71
  position: relative;
87
72
  z-index: 20;
88
73
  }
89
-
90
74
  #visual-content {
91
75
  display: none;
92
76
  position: absolute;
@@ -98,7 +82,6 @@
98
82
  font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
99
83
  min-height: 100vh;
100
84
  }
101
-
102
85
  #visual-content .fake-placeholder {
103
86
  position: absolute;
104
87
  top: 0px;
@@ -109,11 +92,9 @@
109
92
  /* display: none; */
110
93
  background-image: url('//d1um8515vdn9kb.cloudfront.net/images/background-pattern.png');
111
94
  }
112
-
113
95
  #visual-content .fake-placeholder.fake-placeholder-slot {
114
96
  background: transparent;
115
97
  }
116
-
117
98
  #visual-content .fake-placeholder.has-section {
118
99
  /* background-color: transparent !important;
119
100
  border: none !important;
@@ -126,21 +107,15 @@
126
107
  height: 6px;
127
108
  margin: 0px !important;
128
109
  }
129
-
130
110
  #visual-content .fake-placeholder.visual-placeholder-error {
131
111
  background-color: #fee4e3 !important;
132
112
  }
133
-
134
113
  #visual-content .fake-placeholder.visual-placeholder-error .limitation-error-content {
135
114
  display: none;
136
115
  }
137
-
138
116
  #visual-content .fake-placeholder.visual-placeholder-error {
139
117
 
140
- font-family: Inter,
141
- sans-serif,
142
- ui-sans-serif,
143
- system-ui;
118
+ font-family: Inter, sans-serif, ui-sans-serif, system-ui;
144
119
  border: 1px dashed #f44336 !important;
145
120
  visibility: visible;
146
121
  color: #f44336 !important;
@@ -150,14 +125,11 @@
150
125
  position: relative;
151
126
  text-align: center;
152
127
  }
153
-
154
128
  /* border-radius: 3px; */
155
-
156
129
  #visual-content .fake-placeholder.visual-placeholder-error.children-error {
157
130
  background-color: #f44336 !important;
158
131
  border: none !important;
159
132
  }
160
-
161
133
  #visual-content .fake-placeholder.visual-placeholder-error.limitation-error .limitation-error-content {
162
134
  display: flex;
163
135
  align-items: center;
@@ -166,14 +138,12 @@
166
138
  padding: 4px 8px;
167
139
  border-radius: 3px;
168
140
  }
169
-
170
141
  #visual-content .fake-placeholder.visual-placeholder-error.limitation-error .limitation-error-content span {
171
142
  margin-left: 8px;
172
143
  font-weight: 500;
173
144
  font-size: 14px;
174
145
  line-height: 150%;
175
146
  }
176
-
177
147
  #visual-content .fake-placeholder.visual-placeholder {
178
148
  z-index: 20;
179
149
  /* border-radius: 3px; */
@@ -187,11 +157,9 @@
187
157
  visibility: visible;
188
158
  background-color: #8aa4ff66;
189
159
  }
190
-
191
160
  #visual-content .fake-placeholder.visual-placeholder-child-on-sections {
192
161
  margin: 16px !important;
193
162
  }
194
-
195
163
  #visual-content .fake-placeholder.visual-placeholder-between-sections {
196
164
  background-color: #3c67ff;
197
165
  border: none;
@@ -200,133 +168,107 @@
200
168
  height: 6px;
201
169
  margin: 0px !important;
202
170
  }
203
-
204
171
  #visual-content .fake-placeholder.not-show {
205
172
  display: none;
206
173
  }
207
-
208
- /* &[is-blank-page='true'] {
174
+ #visual-content .fake-placeholder[is-blank-page='true'] {
209
175
  background-color: #d8e1ff !important;
210
- } */
211
-
176
+ }
212
177
  #visual-content .fake-placeholder[is-component-dragging='true'] {
213
178
  background-color: #8aa4ff66 !important;
214
179
  }
215
-
216
180
  /* section:last-child {
217
181
  [data-slot='children'] {
218
182
  min-height: 358px;
219
183
  }
220
184
  } */
221
-
222
185
  [contenteditable='true']:active,
223
186
  [contenteditable='true']:focus,
224
187
  [contenteditable='true']:focus-visible {
225
188
  outline: none;
226
189
  overflow: hidden;
227
190
  }
228
-
229
191
  [data-component-is-third-party='true'] {
230
192
  background-color: #f4f4f4;
231
193
  }
232
-
233
194
  [data-component-tag='ProductTitle'],
234
195
  [data-component-tag='ProductDescription'],
235
196
  [data-component-tag='ProductPrice'],
236
197
  [data-component-tag='ProductTag'] {
237
198
  cursor: default;
238
199
  }
239
-
240
200
  :root {
241
201
  --selection-bg: #accef7;
242
202
  }
243
-
244
203
  .builder ::selection {
245
204
  color: currentColor;
246
205
  background: var(--selection-bg);
247
206
  }
248
-
249
207
  .builder ::-moz-selection {
250
208
  color: currentColor;
251
209
  background: var(--selection-bg);
252
210
  }
253
-
254
211
  .gps-drag-element-here {
255
212
  font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
256
213
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%233C67FFFF' stroke-width='2' stroke-dasharray='12%2c12' stroke-dashoffset='72' stroke-linecap='square'/%3e%3c/svg%3e");
257
214
  }
258
-
259
215
  .gps-page-suggestion {
260
216
  background: #fff;
261
217
  border-radius: 3px;
262
218
  font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
263
219
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.06), 0px 4px 16px rgba(0, 0, 0, 0.12);
264
220
  }
265
-
266
221
  .gps-suggestion-item .gps-suggestion-item-btn {
267
222
  display: flex;
268
223
  }
269
-
270
224
  .gps-suggestion-item .item-link {
271
225
  white-space: nowrap;
272
226
  overflow: hidden;
273
227
  text-overflow: ellipsis;
274
228
  width: 360px;
275
229
  }
276
-
277
230
  .gps-suggestion-item:hover .item-link {
278
231
  width: 360px;
279
232
  }
280
-
281
233
  .gps-base-font-family {
282
234
  font-family: Inter, sans-serif, ui-sans-serif, system-ui !important;
283
235
  }
284
-
285
236
  .btn-disable::before {
286
237
  background: none !important;
287
238
  background-color: #f4f4f4 !important;
288
239
  color: #9e9e9e;
289
240
  }
290
-
291
241
  .gps-image-detection-section:hover .gps-generating-actions {
292
242
  display: flex;
293
243
  }
294
-
295
244
  .gps-generating-section-text {
296
245
  background: -webkit-linear-gradient(#874cfd, #3c38e1);
297
246
  -webkit-background-clip: text;
298
247
  -webkit-text-fill-color: transparent;
299
248
  }
300
-
301
249
  .ck-blurred {
302
250
  cursor: pointer;
303
251
  }
304
-
305
252
  .ck-focused {
306
253
  cursor: text;
307
254
  }
308
-
309
255
  .button-text {
310
256
  position: relative;
311
257
  }
312
-
313
258
  .button-text.ck-focused,
314
259
  .child-item-text.ck-focused {
315
260
  border-color: transparent !important;
316
261
  box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 2px, #3c67ff 0px 0px 0px 1px,
317
262
  #3c67ff3d 0px 0px 0px 5px;
318
263
  }
319
-
320
264
  .button-text.ck p {
321
265
  overflow: hidden;
322
266
  text-overflow: ellipsis;
323
267
  white-space: nowrap;
324
268
  }
325
-
326
269
  .gp-text.ck p {
327
270
  word-break: break-word;
328
271
  }
329
-
330
272
  .button-text:hover::after {
331
273
  content: '';
332
274
  position: absolute;
@@ -337,11 +279,9 @@
337
279
  border: 1px solid #3c67ff;
338
280
  pointer-events: none;
339
281
  }
340
-
341
282
  .button-text.ck-focused:hover::after {
342
283
  border: 0 !important;
343
284
  }
344
-
345
285
  .sticky-overlay {
346
286
  position: fixed;
347
287
  top: 0;
@@ -355,626 +295,21 @@
355
295
  display: flex;
356
296
  align-items: center;
357
297
  justify-content: center;
358
-
359
- /* &.is-blank-page {
360
- background-color: #d8e1ff !important;
361
- } */
362
298
  }
363
-
364
299
  .sticky-overlay.highlight-top {
365
300
  border-top-width: 6px;
366
301
  }
367
-
368
302
  .sticky-overlay.highlight-bottom {
369
303
  border-bottom-width: 6px;
370
304
  }
371
-
372
- /* Thêm code này sẽ làm lỗi tính năng fix height ở carousel, nhưng nếu k có thì toolbar sẽ bị ẩn nếu nằm trong carousel */
373
-
374
- .builder .gem-slider:not([data-keen-slider-disabled]) {
375
- overflow: unset;
376
- }
377
-
378
- [data-toolbar-wrap] {
379
- position: relative;
380
- }
381
-
382
- /* Toolbar style default */
383
-
384
- [data-toolbar-wrap] [data-toolbar] {
385
- position: absolute;
386
- z-index: 20;
387
- height: 24px;
388
- top: -23px;
389
- left: 0;
390
- max-width: unset;
391
- display: flex;
392
- align-items: center;
393
- padding: 4px;
394
- color: #3c67ff;
395
- background: #fff;
396
- border: solid 1px #3c67ff;
397
- white-space: nowrap;
398
- pointer-events: unset;
399
- font-family: Inter, sans-serif, ui-sans-serif, system-ui;
400
- opacity: 0;
401
- visibility: hidden;
402
- cursor: pointer;
403
- -webkit-user-select: none;
404
- user-select: none;
405
- transition: background 200ms ease-out;
406
- }
407
-
408
- [data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent],
409
- [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] {
410
- display: flex;
411
- align-items: center;
412
- }
413
-
414
- [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] {
415
- display: block;
416
- }
417
-
418
- [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 {
419
- display: block;
420
- max-width: unset;
421
- width: 16px;
422
- height: 16px;
423
- }
424
-
425
- [data-toolbar-wrap] [data-toolbar] [data-toolbar-show-parent] [data-toolbar-name], [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] [data-toolbar-name] {
426
- display: block;
427
- white-space: nowrap;
428
- font-size: 12px;
429
- padding-left: 4px;
430
- padding-right: 4px;
431
- font-weight: 500;
432
- }
433
-
434
- [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent] {
435
- position: absolute;
436
- top: -24px;
437
- left: -1px;
438
- height: 24px;
439
- padding: 4px;
440
- opacity: 1;
441
- visibility: visible;
442
- z-index: 30;
443
- color: #3c67ff;
444
- background: #fff;
445
- border: solid 1px #3c67ff;
446
- }
447
-
448
- [data-toolbar-wrap] [data-toolbar] [data-toolbar-parent]:hover {
449
- background: #c5d2ff;
450
- }
451
-
452
- [data-toolbar-wrap] [data-toolbar] [data-toolbar-create-theme-section] {
453
- padding-left: 8px;
454
- padding-right: 4px;
455
- margin-top: 8px;
456
- margin-bottom: 8px;
457
- margin-left: 4px;
458
- border-left: solid 1px;
459
- border-color: #D6D6D6;
460
- font-size: 12px;
461
- font-weight: 500;
462
- line-height: 16px;
463
- }
464
-
465
- /* hidden icon with hover state*/
466
-
467
- [data-toolbar-wrap] [data-toolbar] [data-toolbar-active-create-theme-section],
468
- [data-toolbar-wrap] [data-toolbar] [data-toolbar-icon-parent],
469
- [data-toolbar-wrap] [data-toolbar] [data-toolbar-duplicate],
470
- [data-toolbar-wrap] [data-toolbar] [data-toolbar-delete] {
471
- display: none;
472
- }
473
-
474
- [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section="true"] {
475
- color: #9144DA;
476
- }
477
-
478
- /* State Toolbar */
479
-
480
- [data-toolbar-wrap] [data-toolbar][data-toolbar-hover],
481
- [data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover] {
482
- opacity: 1;
483
- visibility: visible;
484
- z-index: 30;
485
- }
486
-
487
- [data-toolbar-wrap] [data-toolbar][data-toolbar-hover]:hover, [data-toolbar-wrap] [data-toolbar][data-toolbar-force-hover]:hover {
488
- background: #c5d2ff;
489
- }
490
-
491
- [data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus] {
492
- background: #d8e1ff;
493
- }
494
-
495
- [data-toolbar-wrap] [data-toolbar][data-toolbar-hover][data-toolbar-hover-focus]:hover {
496
- background: #c5d2ff;
497
- }
498
-
499
- [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section="true"][data-toolbar-hover][data-toolbar-hover-focus] {
500
- background: #EBDDF8;
501
- }
502
-
503
- [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section="true"][data-toolbar-hover]:hover {
504
- background: #EBDDF8;
505
- }
506
-
507
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] {
508
- opacity: 1;
509
- visibility: visible;
510
- z-index: 20;
511
- height: 32px;
512
- top: -31px;
513
- background: #3c67ff;
514
- color: #fff;
515
- }
516
-
517
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus] {
518
- background: #3c67ff;
519
- }
520
-
521
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-hover-focus]:hover {
522
- background: #3c67ff;
523
- }
524
-
525
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section="true"] {
526
- background: #9144DA;
527
- }
528
-
529
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section="true"][data-toolbar-hover-focus] {
530
- background: #9144DA;
531
- }
532
-
533
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active][data-toolbar-theme-section="true"][data-toolbar-hover-focus]:hover {
534
- background: #9144DA;
535
- }
536
-
537
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] {
538
- padding: 4px;
539
- border-radius: 2px;
540
- transition: background 200ms ease-in-out;
541
- }
542
-
543
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] {
544
- display: block;
545
- transition: -webkit-transform 200ms ease-in-out;
546
- transition: transform 200ms ease-in-out;
547
- transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
548
- }
549
-
550
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent] svg {
551
- display: block;
552
- max-width: unset;
553
- width: 16px;
554
- height: 16px;
555
- }
556
-
557
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent] [data-toolbar-icon-parent][data-toolbar-icon-parent-open='true'] {
558
- -webkit-transform: rotate(180deg);
559
- transform: rotate(180deg);
560
- }
561
-
562
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-show-parent]:hover {
563
- background: rgba(225, 225, 225, 0.2);
564
- }
565
-
566
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-duplicate],
567
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-delete],
568
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] {
569
- display: block;
570
- padding: 4px;
571
- border-radius: 2px;
572
- transition: background 200ms ease-in-out;
573
- }
574
-
575
- [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-active-create-theme-section] svg {
576
- display: block;
577
- max-width: unset;
578
- width: 16px;
579
- height: 16px;
580
- }
581
-
582
- [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-active-create-theme-section]:hover {
583
- background: rgba(225, 225, 225, 0.2);
584
- }
585
-
586
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section-wrapper] {
587
- padding: 0 4px;
588
- margin: 0 4px;
589
- border-left: solid 1px #7190FF;
590
- border-right: solid 1px #7190FF;
591
- }
592
-
593
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] {
594
- display: flex !important;
595
- align-items: center;
596
- gap: 4px;
597
- }
598
-
599
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-active-create-theme-section] p {
600
- font-size: 12px;
601
- font-weight: 500;
602
- }
603
-
604
- [data-toolbar-wrap] [data-toolbar][data-toolbar-active] [data-toolbar-create-theme-section] {
605
- display: none;
606
- }
607
-
608
- [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'] {
609
- left: unset;
610
- right: 0;
611
- border-color: #d6d6d6;
612
- }
613
-
614
- [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus] [data-toolbar-create-theme-section] {
615
- border-color: #3c67ff;
616
- }
617
-
618
- [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-hover-focus],
619
- [data-toolbar-wrap] [data-toolbar][data-toolbar-section='true'][data-toolbar-active] {
620
- border-color: #3c67ff;
621
- }
622
-
623
- [data-toolbar-wrap] [data-toolbar][data-toolbar-editor-inline-focus] {
624
- display: none;
625
- }
626
-
627
- [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-hover-focus],
628
- [data-toolbar-wrap] [data-toolbar][data-toolbar-theme-section='true'][data-toolbar-active] {
629
- border-color: #9144DA;
630
- }
631
-
632
- /* Outline style default */
633
-
634
- [data-toolbar-wrap] [data-outline] {
635
- position: absolute;
636
- z-index: 10;
637
- top: 0;
638
- left: 0;
639
- width: 100%;
640
- height: 100%;
641
- border: solid 1px #3c67ff;
642
- pointer-events: none;
643
- opacity: 0;
644
- visibility: hidden;
645
- }
646
-
647
- /* State Outline */
648
-
649
- [data-toolbar-wrap] [data-outline][data-outline-hover],
650
- [data-toolbar-wrap] [data-outline][data-outline-force-hover] {
651
- opacity: 1;
652
- visibility: visible;
653
- z-index: 12;
654
- }
655
-
656
- [data-toolbar-wrap] [data-outline][data-outline-active] {
657
- opacity: 1;
658
- visibility: visible;
659
- z-index: 15;
660
- }
661
-
662
- [data-toolbar-wrap] [data-outline][data-outline-overlay],
663
- [data-toolbar-wrap] [data-outline][data-outline-force-overlay] {
664
- background: rgba(60, 103, 255, 0.1);
665
- }
666
-
667
- [data-toolbar-wrap] [data-outline][data-outline-overlay-theme-section] {
668
- background: rgba(255, 255, 255, 0.20);
669
- -webkit-backdrop-filter: blur(3px);
670
- backdrop-filter: blur(3px);
671
- }
672
-
673
- [data-toolbar-wrap] [data-outline][data-outline-section='true'] {
674
- border-color: #d6d6d6;
675
- z-index: 10;
676
- }
677
-
678
- [data-toolbar-wrap] [data-outline][data-outline-section='true'][data-outline-hover-focus],
679
- [data-toolbar-wrap] [data-outline][data-outline-section='true'][data-outline-active] {
680
- border-color: #3c67ff;
681
- z-index: 15;
682
- }
683
-
684
- [data-toolbar-wrap] [data-outline][data-outline-editor-inline-focus] {
685
- border-color: #3c67ff;
686
- outline: 4px solid rgba(60, 103, 255, 0.24);
687
- top: -2px;
688
- left: -2px;
689
- width: calc(100% + 4px);
690
- height: calc(100% + 4px);
691
- z-index: 15;
692
- }
693
-
694
- [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'][data-outline-hover-focus],
695
- [data-toolbar-wrap] [data-outline][data-outline-theme-section='true'][data-outline-active] {
696
- border-color: #9144DA;
697
- z-index: 15;
698
- }
699
-
700
- [data-toolbar-wrap] [data-theme-section-status] {
701
- display: none;
702
- align-items: center;
703
- justify-content: center;
704
- gap: 4px;
705
- padding: 4px;
706
- border-radius: 3px;
707
- color: #212121;
708
- background: #EBDDF8;
709
- width: -webkit-max-content;
710
- width: max-content;
711
- position: absolute;
712
- z-index: 50;
713
- left: 8px;
714
- top: 8px;
715
- font-size: 14px;
716
- font-weight: 400;
717
- line-height: 24px;
718
- }
719
-
720
- [data-toolbar-wrap] [data-theme-section-status-icon] {
721
- width: 24px;
722
- height: 24px;
723
- display: flex;
724
- align-items: center;
725
- justify-content: center;
726
- cursor: pointer;
727
- }
728
-
729
- [data-toolbar-wrap] [data-theme-section-status-text] {
730
- display: none;
731
- }
732
-
733
- [data-toolbar-wrap] [data-theme-section-status-icon]:hover [data-theme-section-status-text] {
734
- display: block;
735
- }
736
-
737
- [data-toolbar-wrap] [data-theme-section-status][data-theme-section-status-active] {
738
- display: flex;
739
- }
740
-
741
- /* Action add style default */
742
-
743
- [data-toolbar-wrap] [data-toolbar-add-top],
744
- [data-toolbar-wrap] [data-toolbar-add-bottom] {
745
- width: 32px;
746
- height: 32px;
747
- display: flex;
748
- justify-content: center;
749
- align-items: center;
750
- background: #fff;
751
- color: #3c67ff;
752
- border: solid 1px #d6d6d6;
753
- border-radius: 3px;
754
- cursor: pointer;
755
- position: absolute;
756
- z-index: 50;
757
- left: calc(50% - 16px);
758
- top: -16px;
759
- display: none;
760
- -webkit-user-select: none;
761
- user-select: none;
762
- transition: border-color 200ms ease-in-out;
763
- }
764
-
765
- [data-toolbar-wrap] [data-toolbar-add-top] svg, [data-toolbar-wrap] [data-toolbar-add-bottom] svg {
766
- width: 16px;
767
- height: 16px;
768
- transition: -webkit-transform 200ms ease-in-out;
769
- transition: transform 200ms ease-in-out;
770
- transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
771
- }
772
-
773
- [data-toolbar-wrap] [data-toolbar-add-top]:hover, [data-toolbar-wrap] [data-toolbar-add-bottom]:hover {
774
- border-color: #3c67ff;
775
- }
776
-
777
- [data-toolbar-wrap] [data-toolbar-add-bottom] {
778
- top: unset;
779
- bottom: -16px;
780
- }
781
-
782
- /* Active add state */
783
-
784
- [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 {
785
- -webkit-transform: rotate(45deg);
786
- transform: rotate(45deg);
787
- }
788
-
789
- [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-hover],
790
- [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-hover] {
791
- display: flex;
792
- }
793
-
794
- [data-toolbar-wrap] [data-toolbar-add-top][data-toolbar-add-active],
795
- [data-toolbar-wrap] [data-toolbar-add-bottom][data-toolbar-add-active] {
796
- display: flex;
797
- }
798
-
799
- /* Resize spacing */
800
-
801
- [data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] {
802
- position: absolute;
803
- z-index: 20;
804
- bottom: 0;
805
- left: 0;
806
- width: 100%;
807
- display: flex;
808
- justify-content: center;
809
-
810
- display: none;
811
- }
812
-
813
- [data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg] {
814
- position: absolute;
815
- top: 0;
816
- left: 0;
817
- width: 100%;
818
- background-color: #3c67ff33;
819
-
820
- display: flex;
821
- justify-content: center;
822
- align-items: center;
823
- }
824
-
825
- [data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-bg] [data-spacing-margin-bottom-value] {
826
- background-color: #3c67ff;
827
- padding: 2px;
828
- position: absolute;
829
- font-size: 8px;
830
- color: #fff;
831
- border-radius: 4px;
832
- font-weight: bold;
833
-
834
- display: none;
835
- }
836
-
837
- [data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag] {
838
- position: absolute;
839
- bottom: 0;
840
- height: 4px;
841
- width: 40px;
842
- border-top-left-radius: 4px;
843
- border-top-right-radius: 4px;
844
- cursor: ns-resize;
845
- background-color: #3c67ff;
846
- transition: height 0.2s;
847
- -webkit-transform: translateY(-100%);
848
- transform: translateY(-100%);
849
- }
850
-
851
- [data-toolbar-wrap] [data-spacing] [data-spacing-margin-bottom] [data-spacing-margin-bottom-drag]:hover {
852
- height: 6px;
853
- }
854
-
855
- [data-toolbar-wrap] [data-spacing-margin-bottom][data-spacing-margin-bottom-active] {
856
- display: flex;
857
- }
858
-
859
- /* Create theme section tooltip */
860
-
861
- .theme-section-tooltip-wrapper {
862
- position: relative;
863
- }
864
-
865
- .theme-section-tooltip-wrapper .theme-section-tooltip {
866
- cursor: default;
867
- min-width: 284px;
868
- display: flex;
869
- flex-direction: column;
870
- border-radius: 3px;
871
- position: absolute;
872
- right: 0;
873
- top: 100%;
874
- padding-top: 9px;
875
- }
876
-
877
- .theme-section-tooltip-wrapper .theme-section-tooltip::before {
878
- content: "";
879
- position: absolute;
880
- height: 8px;
881
- width: 8px;
882
- background: #212121;
883
- -webkit-transform: rotate(45deg);
884
- transform: rotate(45deg);
885
- right: 16px;
886
- top: 6px;
887
- }
888
-
889
- .theme-section-tooltip-wrapper .theme-section-tooltip__image {
890
- background: #212121;
891
- border-radius: 3px 3px 0 0;
892
- padding-top: 16px;
893
- padding-bottom: 8px;
894
- padding-left: 21px;
895
- padding-right: 20px;
896
- }
897
-
898
- .theme-section-tooltip-wrapper .theme-section-tooltip__body {
899
- display: flex;
900
- flex-direction: column;
901
- gap: 8px;
902
- padding: 16px;
903
- background: #151515;
904
- text-wrap: wrap;
905
- }
906
-
907
- .theme-section-tooltip-wrapper .theme-section-tooltip__body-title {
908
- color: #F9F9F9;
909
- font-size: 14px;
910
- font-weight: 500;
911
- line-height: 24px;
912
- }
913
-
914
- .theme-section-tooltip-wrapper .theme-section-tooltip__body-desc {
915
- color: #AAA;
916
- font-size: 14px;
917
- font-weight: 400;
918
- line-height: 24px
919
- }
920
-
921
- .theme-section-tooltip-wrapper .theme-section-tooltip__action {
922
- padding: 16px;
923
- border-radius: 0 0 3px 3px;
924
- border-top: solid 1px #3B3B3B;
925
- background: #151515;
926
- display: flex;
927
- flex-direction: column;
928
- }
929
-
930
- .theme-section-tooltip-wrapper .theme-section-tooltip__action button {
931
- cursor: pointer;
932
- width: 100%;
933
- text-align: center;
934
- background: #3C67FF;
935
- border-radius: 3px;
936
- height: 40px;
937
- font-size: 14px;
938
- line-height: 24px;
939
- color: #F9F9F9;
940
- font-weight: 500;
941
- transition: all 0.15s ease-in;
942
- }
943
-
944
- .theme-section-tooltip-wrapper .theme-section-tooltip__action button:hover {
945
- background: #2856F8;
946
- }
947
-
948
- .theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button {
949
- background: #FDB913 !important;
950
- color: #212121 !important;
951
- }
952
-
953
- .theme-section-tooltip-wrapper .theme-section-tooltip__action-limit button:hover {
954
- background: #FDC742 !important;
955
- }
956
-
957
- .theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more {
958
- color: #8AA4FF;
959
- text-align: center;
960
- font-size: 12px;
961
- font-weight: 500;
962
- line-height: 20px;
963
- margin-top: 8px;
964
- cursor: pointer;
965
- transition: all 0.15s ease-in;
305
+ .sticky-overlay.is-blank-page {
306
+ background-color: #d8e1ff !important;
966
307
  }
967
-
968
- .theme-section-tooltip-wrapper .theme-section-tooltip__action-learn-more:hover {
969
- color: #3C67FF;
970
- }
971
-
972
308
  @media (max-width: 768px) {
973
309
  .gps-suggestion-item:hover .item-link {
974
310
  width: 196px;
975
311
  }
976
-
977
312
  .gps-suggestion-item .item-link {
978
313
  width: 196px;
979
314
  }
980
- }
315
+ }