matcha-theme 20.186.0 → 20.188.0

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.
@@ -3,13 +3,3947 @@
3
3
  // Extraído do index-cdn.html e adaptado como mixin de tema.
4
4
  // =============================================================================
5
5
 
6
- @mixin matcha-page-builder($theme) {
6
+ @mixin matcha-page-builder-theme($theme) {
7
+ matcha-page-builder {
8
+ display: block;
9
+ height: 1000px;
10
+ min-height: 800px;
11
+ width: 100%;
12
+
13
+ --gjs-main-color: #{getSurface($theme)};
14
+ --gjs-primary-color: #{getBackground($theme)};
15
+ --gjs-secondary-color: #{getBlueGrey($theme)};
16
+ --gjs-tertiary-color: #{getSurface($theme)};
17
+ --gjs-quaternary-color: #{getAccent($theme)};
18
+
19
+ --gjs-main-dark-color: #{getSurfaceAlpha($theme)};
20
+ --gjs-secondary-dark-color: #{getSurface($theme)};
21
+ --gjs-quaternary-dark-color: #{getAccentAlpha($theme)};
22
+
23
+ --gjs-font-color: #{getForeground($theme)};
24
+ --gjs-font-color-active: #{getForegroundAlpha($theme)};
25
+ --gjs-main-light-color: rgba(255, 255, 255, 0.1);
26
+ --gjs-secondary-light-color: rgba(255, 255, 255, 0.7);
27
+ --gjs-soft-light-color: rgba(255, 255, 255, 0.015);
28
+ --gjs-color-blue: #{getBlue($theme)};
29
+ --gjs-color-red: #{getRed($theme)};
30
+ --gjs-color-yellow: #{getYellow($theme)};
31
+ --gjs-color-green: #{getGreen($theme)};
32
+ --gjs-left-width: 15%;
33
+ --gjs-color-highlight: #71b7f1;
34
+ --gjs-color-warn: #ffca6f;
35
+ --gjs-handle-margin: -5px;
36
+ --gjs-light-border: rgba(255, 255, 255, 0.05);
37
+ --gjs-arrow-color: rgba(255, 255, 255, 0.7);
38
+ --gjs-dark-text-shadow: rgba(0, 0, 0, 0.2);
39
+ --gjs-color-input-padding: 22px;
40
+ --gjs-input-padding: 5px;
41
+ --gjs-padding-elem-classmanager: 5px 6px;
42
+ --gjs-upload-padding: 150px 10px;
43
+ --gjs-animation-duration: 0.2s;
44
+ --gjs-main-font: Helvetica, sans-serif;
45
+ --gjs-font-size: 0.75rem;
46
+ --gjs-placeholder-background-color: var(--gjs-color-green);
47
+ --gjs-canvas-top: 40px;
48
+
49
+ --gjs-flex-item-gap: 5px;
50
+
51
+ .CodeMirror {
52
+ font-family: monospace;
53
+ height: 300px;
54
+ color: black;
55
+ direction: ltr;
56
+ }
57
+
58
+ .CodeMirror-lines {
59
+ padding: 4px 0
60
+ }
61
+
62
+ .CodeMirror pre.CodeMirror-line,
63
+ .CodeMirror pre.CodeMirror-line-like {
64
+ padding: 0 4px
65
+ }
66
+
67
+ .CodeMirror-scrollbar-filler,
68
+ .CodeMirror-gutter-filler {
69
+ background-color: white
70
+ }
71
+
72
+ .CodeMirror-gutters {
73
+ border-right: 1px solid #ddd;
74
+ background-color: #f7f7f7;
75
+ white-space: nowrap
76
+ }
77
+
78
+ .CodeMirror-linenumber {
79
+ padding: 0 3px 0 5px;
80
+ min-width: 20px;
81
+ text-align: right;
82
+ color: #999;
83
+ white-space: nowrap
84
+ }
85
+
86
+ .CodeMirror-guttermarker {
87
+ color: black
88
+ }
89
+
90
+ .CodeMirror-guttermarker-subtle {
91
+ color: #999
92
+ }
93
+
94
+ .CodeMirror-cursor {
95
+ border-left: 1px solid black;
96
+ border-right: none;
97
+ width: 0
98
+ }
99
+
100
+ .CodeMirror div.CodeMirror-secondarycursor {
101
+ border-left: 1px solid silver
102
+ }
103
+
104
+ .cm-fat-cursor .CodeMirror-cursor {
105
+ width: auto;
106
+ border: 0 !important;
107
+ background: #7e7
108
+ }
109
+
110
+ .cm-fat-cursor div.CodeMirror-cursors {
111
+ z-index: 1
112
+ }
113
+
114
+ .cm-fat-cursor-mark {
115
+ background-color: rgba(20, 255, 20, 0.5);
116
+ -webkit-animation: blink 1.06s steps(1) infinite;
117
+ -moz-animation: blink 1.06s steps(1) infinite;
118
+ animation: blink 1.06s steps(1) infinite
119
+ }
120
+
121
+ .cm-animate-fat-cursor {
122
+ width: auto;
123
+ -webkit-animation: blink 1.06s steps(1) infinite;
124
+ -moz-animation: blink 1.06s steps(1) infinite;
125
+ animation: blink 1.06s steps(1) infinite;
126
+ background-color: #7e7
127
+ }
128
+
129
+ @-moz-keyframes blink {
130
+ 50% {
131
+ background-color: transparent
132
+ }
133
+ }
134
+
135
+ @-webkit-keyframes blink {
136
+ 50% {
137
+ background-color: transparent
138
+ }
139
+ }
140
+
141
+ @keyframes blink {
142
+ 50% {
143
+ background-color: transparent
144
+ }
145
+ }
146
+
147
+ .cm-tab {
148
+ display: inline-block;
149
+ text-decoration: inherit
150
+ }
151
+
152
+ .CodeMirror-rulers {
153
+ position: absolute;
154
+ left: 0;
155
+ right: 0;
156
+ top: -50px;
157
+ bottom: 0;
158
+ overflow: hidden
159
+ }
160
+
161
+ .CodeMirror-ruler {
162
+ border-left: 1px solid #ccc;
163
+ top: 0;
164
+ bottom: 0;
165
+ position: absolute
166
+ }
167
+
168
+ .cm-s-default .cm-header {
169
+ color: blue
170
+ }
171
+
172
+ .cm-s-default .cm-quote {
173
+ color: #090
174
+ }
175
+
176
+ .cm-negative {
177
+ color: #d44
178
+ }
179
+
180
+ .cm-positive {
181
+ color: #292
182
+ }
183
+
184
+ .cm-header,
185
+ .cm-strong {
186
+ font-weight: bold
187
+ }
188
+
189
+ .cm-em {
190
+ font-style: italic
191
+ }
192
+
193
+ .cm-link {
194
+ text-decoration: underline
195
+ }
196
+
197
+ .cm-strikethrough {
198
+ text-decoration: line-through
199
+ }
200
+
201
+ .cm-s-default .cm-keyword {
202
+ color: #708
203
+ }
204
+
205
+ .cm-s-default .cm-atom {
206
+ color: #219
207
+ }
208
+
209
+ .cm-s-default .cm-number {
210
+ color: #164
211
+ }
212
+
213
+ .cm-s-default .cm-def {
214
+ color: blue
215
+ }
216
+
217
+ .cm-s-default .cm-variable-2 {
218
+ color: #05a
219
+ }
220
+
221
+ .cm-s-default .cm-variable-3,
222
+ .cm-s-default .cm-type {
223
+ color: #085
224
+ }
225
+
226
+ .cm-s-default .cm-comment {
227
+ color: #a50
228
+ }
229
+
230
+ .cm-s-default .cm-string {
231
+ color: #a11
232
+ }
233
+
234
+ .cm-s-default .cm-string-2 {
235
+ color: #f50
236
+ }
237
+
238
+ .cm-s-default .cm-meta {
239
+ color: #555
240
+ }
241
+
242
+ .cm-s-default .cm-qualifier {
243
+ color: #555
244
+ }
245
+
246
+ .cm-s-default .cm-builtin {
247
+ color: #30a
248
+ }
249
+
250
+ .cm-s-default .cm-bracket {
251
+ color: #997
252
+ }
253
+
254
+ .cm-s-default .cm-tag {
255
+ color: #170
256
+ }
257
+
258
+ .cm-s-default .cm-attribute {
259
+ color: #00c
260
+ }
261
+
262
+ .cm-s-default .cm-hr {
263
+ color: #999
264
+ }
265
+
266
+ .cm-s-default .cm-link {
267
+ color: #00c
268
+ }
269
+
270
+ .cm-s-default .cm-error {
271
+ color: red
272
+ }
273
+
274
+ .cm-invalidchar {
275
+ color: red
276
+ }
277
+
278
+ .CodeMirror-composing {
279
+ border-bottom: 2px solid
280
+ }
281
+
282
+ div.CodeMirror span.CodeMirror-matchingbracket {
283
+ color: #0b0
284
+ }
285
+
286
+ div.CodeMirror span.CodeMirror-nonmatchingbracket {
287
+ color: #a22
288
+ }
289
+
290
+ .CodeMirror-matchingtag {
291
+ background: rgba(255, 150, 0, 0.3)
292
+ }
293
+
294
+ .CodeMirror-activeline-background {
295
+ background: #e8f2ff
296
+ }
297
+
298
+ .CodeMirror {
299
+ position: relative;
300
+ overflow: hidden;
301
+ background: white
302
+ }
303
+
304
+ .CodeMirror-scroll {
305
+ overflow: scroll !important;
306
+ margin-bottom: -50px;
307
+ margin-right: -50px;
308
+ padding-bottom: 50px;
309
+ height: 100%;
310
+ outline: none;
311
+ position: relative
312
+ }
313
+
314
+ .CodeMirror-sizer {
315
+ position: relative;
316
+ border-right: 50px solid transparent
317
+ }
318
+
319
+ .CodeMirror-vscrollbar,
320
+ .CodeMirror-hscrollbar,
321
+ .CodeMirror-scrollbar-filler,
322
+ .CodeMirror-gutter-filler {
323
+ position: absolute;
324
+ z-index: 6;
325
+ display: none;
326
+ outline: none
327
+ }
328
+
329
+ .CodeMirror-vscrollbar {
330
+ right: 0;
331
+ top: 0;
332
+ overflow-x: hidden;
333
+ overflow-y: scroll
334
+ }
335
+
336
+ .CodeMirror-hscrollbar {
337
+ bottom: 0;
338
+ left: 0;
339
+ overflow-y: hidden;
340
+ overflow-x: scroll
341
+ }
342
+
343
+ .CodeMirror-scrollbar-filler {
344
+ right: 0;
345
+ bottom: 0
346
+ }
347
+
348
+ .CodeMirror-gutter-filler {
349
+ left: 0;
350
+ bottom: 0
351
+ }
352
+
353
+ .CodeMirror-gutters {
354
+ position: absolute;
355
+ left: 0;
356
+ top: 0;
357
+ min-height: 100%;
358
+ z-index: 3
359
+ }
360
+
361
+ .CodeMirror-gutter {
362
+ white-space: normal;
363
+ height: 100%;
364
+ display: inline-block;
365
+ vertical-align: top;
366
+ margin-bottom: -50px
367
+ }
368
+
369
+ .CodeMirror-gutter-wrapper {
370
+ position: absolute;
371
+ z-index: 4;
372
+ background: none !important;
373
+ border: none !important
374
+ }
375
+
376
+ .CodeMirror-gutter-background {
377
+ position: absolute;
378
+ top: 0;
379
+ bottom: 0;
380
+ z-index: 4
381
+ }
382
+
383
+ .CodeMirror-gutter-elt {
384
+ position: absolute;
385
+ cursor: default;
386
+ z-index: 4
387
+ }
388
+
389
+ .CodeMirror-gutter-wrapper ::selection {
390
+ background-color: transparent
391
+ }
392
+
393
+ .CodeMirror-gutter-wrapper ::-moz-selection {
394
+ background-color: transparent
395
+ }
396
+
397
+ .CodeMirror-lines {
398
+ cursor: text;
399
+ min-height: 1px
400
+ }
401
+
402
+ .CodeMirror pre.CodeMirror-line,
403
+ .CodeMirror pre.CodeMirror-line-like {
404
+ -moz-border-radius: 0;
405
+ -webkit-border-radius: 0;
406
+ border-radius: 0;
407
+ border-width: 0;
408
+ background: transparent;
409
+ font-family: inherit;
410
+ font-size: inherit;
411
+ margin: 0;
412
+ white-space: pre;
413
+ word-wrap: normal;
414
+ line-height: inherit;
415
+ color: inherit;
416
+ z-index: 2;
417
+ position: relative;
418
+ overflow: visible;
419
+ -webkit-tap-highlight-color: transparent;
420
+ -webkit-font-variant-ligatures: contextual;
421
+ font-variant-ligatures: contextual
422
+ }
423
+
424
+ .CodeMirror-wrap pre.CodeMirror-line,
425
+ .CodeMirror-wrap pre.CodeMirror-line-like {
426
+ word-wrap: break-word;
427
+ white-space: pre-wrap;
428
+ word-break: normal
429
+ }
430
+
431
+ .CodeMirror-linebackground {
432
+ position: absolute;
433
+ left: 0;
434
+ right: 0;
435
+ top: 0;
436
+ bottom: 0;
437
+ z-index: 0
438
+ }
439
+
440
+ .CodeMirror-linewidget {
441
+ position: relative;
442
+ z-index: 2;
443
+ padding: .1px
444
+ }
445
+
446
+ .CodeMirror-rtl pre {
447
+ direction: rtl
448
+ }
449
+
450
+ .CodeMirror-code {
451
+ outline: none
452
+ }
453
+
454
+ .CodeMirror-scroll,
455
+ .CodeMirror-sizer,
456
+ .CodeMirror-gutter,
457
+ .CodeMirror-gutters,
458
+ .CodeMirror-linenumber {
459
+ -moz-box-sizing: content-box;
460
+ box-sizing: content-box
461
+ }
462
+
463
+ .CodeMirror-measure {
464
+ position: absolute;
465
+ width: 100%;
466
+ height: 0;
467
+ overflow: hidden;
468
+ visibility: hidden
469
+ }
470
+
471
+ .CodeMirror-cursor {
472
+ position: absolute;
473
+ pointer-events: none
474
+ }
475
+
476
+ .CodeMirror-measure pre {
477
+ position: static
478
+ }
479
+
480
+ div.CodeMirror-cursors {
481
+ visibility: hidden;
482
+ position: relative;
483
+ z-index: 3
484
+ }
485
+
486
+ div.CodeMirror-dragcursors {
487
+ visibility: visible
488
+ }
489
+
490
+ .CodeMirror-focused div.CodeMirror-cursors {
491
+ visibility: visible
492
+ }
493
+
494
+ .CodeMirror-selected {
495
+ background: #d9d9d9
496
+ }
497
+
498
+ .CodeMirror-focused .CodeMirror-selected {
499
+ background: #d7d4f0
500
+ }
501
+
502
+ .CodeMirror-crosshair {
503
+ cursor: crosshair
504
+ }
505
+
506
+ .CodeMirror-line::selection,
507
+ .CodeMirror-line>span::selection,
508
+ .CodeMirror-line>span>span::selection {
509
+ background: #d7d4f0
510
+ }
511
+
512
+ .CodeMirror-line::-moz-selection,
513
+ .CodeMirror-line>span::-moz-selection,
514
+ .CodeMirror-line>span>span::-moz-selection {
515
+ background: #d7d4f0
516
+ }
517
+
518
+ .cm-searching {
519
+ background-color: #ffa;
520
+ background-color: rgba(255, 255, 0, 0.4)
521
+ }
522
+
523
+ .cm-force-border {
524
+ padding-right: .1px
525
+ }
526
+
527
+ @media print {
528
+ .CodeMirror div.CodeMirror-cursors {
529
+ visibility: hidden
530
+ }
531
+ }
532
+
533
+ .cm-tab-wrap-hack:after {
534
+ content: ""
535
+ }
536
+
537
+ span.CodeMirror-selectedtext {
538
+ background: none
539
+ }
540
+
541
+ .cm-s-hopscotch.CodeMirror {
542
+ background: #322931;
543
+ color: #d5d3d5
544
+ }
545
+
546
+ .cm-s-hopscotch div.CodeMirror-selected {
547
+ background: #433b42 !important
548
+ }
549
+
550
+ .cm-s-hopscotch .CodeMirror-gutters {
551
+ background: #322931;
552
+ border-right: 0px
553
+ }
554
+
555
+ .cm-s-hopscotch .CodeMirror-linenumber {
556
+ color: #797379
557
+ }
558
+
559
+ .cm-s-hopscotch .CodeMirror-cursor {
560
+ border-left: 1px solid #989498 !important
561
+ }
562
+
563
+ .cm-s-hopscotch span.cm-comment {
564
+ color: #b33508
565
+ }
566
+
567
+ .cm-s-hopscotch span.cm-atom {
568
+ color: #c85e7c
569
+ }
570
+
571
+ .cm-s-hopscotch span.cm-number {
572
+ color: #c85e7c
573
+ }
574
+
575
+ .cm-s-hopscotch span.cm-property,
576
+ .cm-s-hopscotch span.cm-attribute {
577
+ color: #8fc13e
578
+ }
579
+
580
+ .cm-s-hopscotch span.cm-keyword {
581
+ color: #dd464c
582
+ }
583
+
584
+ .cm-s-hopscotch span.cm-string {
585
+ color: #fdcc59
586
+ }
587
+
588
+ .cm-s-hopscotch span.cm-variable {
589
+ color: #8fc13e
590
+ }
591
+
592
+ .cm-s-hopscotch span.cm-variable-2 {
593
+ color: #1290bf
594
+ }
595
+
596
+ .cm-s-hopscotch span.cm-def {
597
+ color: #fd8b19
598
+ }
599
+
600
+ .cm-s-hopscotch span.cm-error {
601
+ background: #dd464c;
602
+ color: #989498
603
+ }
604
+
605
+ .cm-s-hopscotch span.cm-bracket {
606
+ color: #d5d3d5
607
+ }
608
+
609
+ .cm-s-hopscotch span.cm-tag {
610
+ color: #dd464c
611
+ }
612
+
613
+ .cm-s-hopscotch span.cm-link {
614
+ color: #c85e7c
615
+ }
616
+
617
+ .cm-s-hopscotch .CodeMirror-matchingbracket {
618
+ text-decoration: underline;
619
+ color: white !important
620
+ }
621
+
622
+ .cm-s-hopscotch .CodeMirror-activeline-background {
623
+ background: #302020
624
+ }
625
+
626
+ .gjs-is__grab,
627
+ .gjs-is__grab * {
628
+ cursor: grab !important
629
+ }
630
+
631
+ .gjs-is__grabbing,
632
+ .gjs-is__grabbing * {
633
+ -moz-user-select: none;
634
+ -khtml-user-select: none;
635
+ -webkit-user-select: none;
636
+ -ms-user-select: none;
637
+ -o-user-select: none;
638
+ user-select: none;
639
+ cursor: grabbing !important
640
+ }
641
+
642
+ .gjs-bg-main,
643
+ .gjs-off-prv,
644
+ .gjs-sm-colorp-c {
645
+ background-color: var(--gjs-main-color)
646
+ }
647
+
648
+ .gjs-color-main,
649
+ .gjs-off-prv,
650
+ .gjs-sm-stack #gjs-sm-add {
651
+ color: var(--gjs-font-color);
652
+ fill: var(--gjs-font-color)
653
+ }
654
+
655
+ .gjs-color-active {
656
+ color: var(--gjs-font-color-active);
657
+ fill: var(--gjs-font-color-active)
658
+ }
659
+
660
+ .gjs-color-warn {
661
+ color: var(--gjs-color-warn);
662
+ fill: var(--gjs-color-warn)
663
+ }
664
+
665
+ .gjs-color-hl {
666
+ color: var(--gjs-color-highlight);
667
+ fill: var(--gjs-color-highlight)
668
+ }
669
+
670
+ .gjs-invis-invis,
671
+ .gjs-clm-tags #gjs-clm-new,
672
+ .gjs-no-app {
673
+ background-color: rgba(0, 0, 0, 0);
674
+ border: none;
675
+ color: inherit
676
+ }
677
+
678
+ .gjs-no-app {
679
+ height: 10px
680
+ }
681
+
682
+ .opac50 {
683
+ opacity: .5;
684
+ filter: alpha(opacity=50)
685
+ }
686
+
687
+ .gjs-checker-bg,
688
+ .gjs-field-colorp-c,
689
+ .checker-bg,
690
+ .gjs-sm-layer-preview {
691
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==")
692
+ }
693
+
694
+ .gjs-no-user-select,
695
+ .gjs-grabbing,
696
+ .gjs-grabbing *,
697
+ .gjs-rte-toolbar,
698
+ .gjs-layer-name {
699
+ -moz-user-select: none;
700
+ -khtml-user-select: none;
701
+ -webkit-user-select: none;
702
+ -ms-user-select: none;
703
+ -o-user-select: none;
704
+ user-select: none
705
+ }
706
+
707
+ .gjs-no-pointer-events,
708
+ .gjs-resizer-c,
709
+ .gjs-margin-v-el,
710
+ .gjs-padding-v-el,
711
+ .gjs-fixedmargin-v-el,
712
+ .gjs-fixedpadding-v-el {
713
+ pointer-events: none
714
+ }
715
+
716
+ .no-select,
717
+ .gjs-clm-tags #gjs-clm-close,
718
+ .gjs-com-no-select,
719
+ .gjs-com-no-select img,
720
+ .gjs-category-title,
721
+ .gjs-layer-title,
722
+ .gjs-block-category .gjs-title,
723
+ .gjs-sm-sector-title,
724
+ .gjs-trait-category .gjs-title {
725
+ -moz-user-select: none;
726
+ -khtml-user-select: none;
727
+ -webkit-user-select: none;
728
+ -ms-user-select: none;
729
+ -o-user-select: none;
730
+ user-select: none
731
+ }
732
+
733
+ .clear {
734
+ clear: both
735
+ }
736
+
737
+ .gjs-category-open,
738
+ .gjs-block-category.gjs-open,
739
+ .gjs-sm-sector.gjs-sm-open,
740
+ .gjs-trait-category.gjs-open {
741
+ border-bottom: 1px solid var(--gjs-quaternary-dark-color)
742
+ }
743
+
744
+ .gjs-category-title,
745
+ .gjs-layer-title,
746
+ .gjs-block-category .gjs-title,
747
+ .gjs-sm-sector-title,
748
+ .gjs-trait-category .gjs-title {
749
+ font-weight: lighter;
750
+ background-color: var(--gjs-secondary-dark-color);
751
+ letter-spacing: 1px;
752
+ padding: 9px 10px 9px 20px;
753
+ border-bottom: 1px solid var(--gjs-quaternary-dark-color);
754
+ text-align: left;
755
+ position: relative;
756
+ cursor: pointer
757
+ }
758
+
759
+ .btn-cl,
760
+ .gjs-am-close,
761
+ .gjs-mdl-btn-close {
762
+ opacity: .3;
763
+ filter: alpha(opacity=30);
764
+ font-size: 25px;
765
+ cursor: pointer
766
+ }
767
+
768
+ .btn-cl:hover,
769
+ .gjs-am-close:hover,
770
+ .gjs-mdl-btn-close:hover {
771
+ opacity: .7;
772
+ filter: alpha(opacity=70)
773
+ }
774
+
775
+ .gjs-traits-label {
776
+ border-bottom: 1px solid var(--gjs-main-dark-color);
777
+ font-weight: lighter;
778
+ margin-bottom: 5px;
779
+ padding: 10px;
780
+ text-align: left
781
+ }
782
+
783
+ .gjs-label-wrp {
784
+ width: 30%;
785
+ min-width: 30%
786
+ }
787
+
788
+ .gjs-field-wrp {
789
+ flex-grow: 1
790
+ }
791
+
792
+ .gjs-traits-c,
793
+ .gjs-traits-cs {
794
+ display: flex;
795
+ flex-direction: column
796
+ }
797
+
798
+ .gjs-trait-categories {
799
+ display: flex;
800
+ flex-direction: column
801
+ }
802
+
803
+ .gjs-trait-category {
804
+ width: 100%
805
+ }
806
+
807
+ .gjs-trait-category .gjs-caret-icon {
808
+ margin-right: 5px
809
+ }
810
+
811
+ .gjs-trt-header {
812
+ font-weight: lighter;
813
+ padding: 10px
814
+ }
815
+
816
+ .gjs-trt-trait {
817
+ display: flex;
818
+ justify-content: flex-start;
819
+ padding: 5px 10px;
820
+ font-weight: lighter;
821
+ align-items: center;
822
+ text-align: left;
823
+ gap: 5px
824
+ }
825
+
826
+ .gjs-trt-traits {
827
+ font-size: var(--gjs-font-size)
828
+ }
829
+
830
+ .gjs-trt-trait .gjs-label {
831
+ text-align: left;
832
+ text-overflow: ellipsis;
833
+ overflow: hidden
834
+ }
835
+
836
+ .gjs-guide-info {
837
+ position: absolute
838
+ }
839
+
840
+ .gjs-guide-info__content {
841
+ position: absolute;
842
+ height: 100%;
843
+ display: flex;
844
+ width: 100%;
845
+ padding: 5px
846
+ }
847
+
848
+ .gjs-guide-info__line {
849
+ position: relative;
850
+ margin: auto
851
+ }
852
+
853
+ .gjs-guide-info__line::before,
854
+ .gjs-guide-info__line::after {
855
+ content: "";
856
+ display: block;
857
+ position: absolute;
858
+ background-color: inherit
859
+ }
860
+
861
+ .gjs-guide-info__y {
862
+ padding: 0 5px
863
+ }
864
+
865
+ .gjs-guide-info__y .gjs-guide-info__content {
866
+ justify-content: center
867
+ }
868
+
869
+ .gjs-guide-info__y .gjs-guide-info__line {
870
+ width: 100%;
871
+ height: 1px
872
+ }
873
+
874
+ .gjs-guide-info__y .gjs-guide-info__line::before,
875
+ .gjs-guide-info__y .gjs-guide-info__line::after {
876
+ width: 1px;
877
+ height: 10px;
878
+ top: 0;
879
+ bottom: 0;
880
+ left: 0;
881
+ margin: auto
882
+ }
883
+
884
+ .gjs-guide-info__y .gjs-guide-info__line::after {
885
+ left: auto;
886
+ right: 0
887
+ }
888
+
889
+ .gjs-guide-info__x {
890
+ padding: 5px 0
891
+ }
892
+
893
+ .gjs-guide-info__x .gjs-guide-info__content {
894
+ align-items: center
895
+ }
896
+
897
+ .gjs-guide-info__x .gjs-guide-info__line {
898
+ height: 100%;
899
+ width: 1px
900
+ }
901
+
902
+ .gjs-guide-info__x .gjs-guide-info__line::before,
903
+ .gjs-guide-info__x .gjs-guide-info__line::after {
904
+ width: 10px;
905
+ height: 1px;
906
+ left: 0;
907
+ right: 0;
908
+ top: 0;
909
+ margin: auto;
910
+ transform: translateX(-50%)
911
+ }
912
+
913
+ .gjs-guide-info__x .gjs-guide-info__line::after {
914
+ top: auto;
915
+ bottom: 0
916
+ }
917
+
918
+ .gjs-badge {
919
+ white-space: nowrap
920
+ }
921
+
922
+ .gjs-badge__icon {
923
+ vertical-align: middle;
924
+ display: inline-block;
925
+ width: 15px;
926
+ height: 15px
927
+ }
928
+
929
+ .gjs-badge__icon svg {
930
+ fill: currentColor
931
+ }
932
+
933
+ .gjs-badge__name {
934
+ display: inline-block;
935
+ vertical-align: middle
936
+ }
937
+
938
+ .gjs-frame-wrapper {
939
+ position: absolute;
940
+ width: 100%;
941
+ height: 100%;
942
+ left: 0;
943
+ right: 0;
944
+ margin: auto
945
+ }
946
+
947
+ .gjs-frame-wrapper--anim {
948
+ transition: width .35s ease, height .35s ease
949
+ }
950
+
951
+ .gjs-frame-wrapper__top {
952
+ transform: translateY(-100%) translateX(-50%);
953
+ display: flex;
954
+ padding: 5px 0;
955
+ position: absolute;
956
+ width: 100%;
957
+ left: 50%;
958
+ top: 0
959
+ }
960
+
961
+ .gjs-frame-wrapper__top-r {
962
+ margin-left: auto
963
+ }
964
+
965
+ .gjs-frame-wrapper__left {
966
+ position: absolute;
967
+ left: 0;
968
+ transform: translateX(-100%) translateY(-50%);
969
+ height: 100%;
970
+ top: 50%
971
+ }
972
+
973
+ .gjs-frame-wrapper__bottom {
974
+ position: absolute;
975
+ bottom: 0;
976
+ transform: translateY(100%) translateX(-50%);
977
+ width: 100%;
978
+ left: 50%
979
+ }
980
+
981
+ .gjs-frame-wrapper__right {
982
+ position: absolute;
983
+ right: 0;
984
+ transform: translateX(100%) translateY(-50%);
985
+ height: 100%;
986
+ top: 50%
987
+ }
988
+
989
+ .gjs-frame-wrapper__icon {
990
+ width: 24px;
991
+ cursor: pointer
992
+ }
993
+
994
+ .gjs-frame-wrapper__icon>svg {
995
+ fill: currentColor
996
+ }
997
+
998
+ .gjs-padding-v-top,
999
+ .gjs-fixedpadding-v-top {
1000
+ width: 100%;
1001
+ top: 0;
1002
+ left: 0
1003
+ }
1004
+
1005
+ .gjs-padding-v-right,
1006
+ .gjs-fixedpadding-v-right {
1007
+ right: 0
1008
+ }
1009
+
1010
+ .gjs-padding-v-bottom,
1011
+ .gjs-fixedpadding-v-bottom {
1012
+ width: 100%;
1013
+ left: 0;
1014
+ bottom: 0
1015
+ }
1016
+
1017
+ .gjs-padding-v-left,
1018
+ .gjs-fixedpadding-v-left {
1019
+ left: 0
1020
+ }
1021
+
1022
+ .gjs-cv-canvas {
1023
+ box-sizing: border-box;
1024
+ width: calc(100% - var(--gjs-left-width));
1025
+ height: calc(100% - var(--gjs-canvas-top));
1026
+ bottom: 0;
1027
+ overflow: hidden;
1028
+ z-index: 1;
1029
+ position: absolute;
1030
+ left: 0;
1031
+ top: var(--gjs-canvas-top)
1032
+ }
1033
+
1034
+ .gjs-cv-canvas-bg {
1035
+ background-color: rgba(0, 0, 0, .15)
1036
+ }
1037
+
1038
+ .gjs-cv-canvas.gjs-cui {
1039
+ width: 100%;
1040
+ height: 100%;
1041
+ top: 0
1042
+ }
1043
+
1044
+ .gjs-cv-canvas.gjs-is__grab .gjs-cv-canvas__frames,
1045
+ .gjs-cv-canvas.gjs-is__grabbing .gjs-cv-canvas__frames {
1046
+ pointer-events: none
1047
+ }
1048
+
1049
+ .gjs-cv-canvas__frames {
1050
+ position: absolute;
1051
+ top: 0;
1052
+ left: 0;
1053
+ width: 100%;
1054
+ height: 100%
1055
+ }
1056
+
1057
+ .gjs-cv-canvas__spots {
1058
+ position: absolute;
1059
+ pointer-events: none;
1060
+ z-index: 1
1061
+ }
1062
+
1063
+ .gjs-cv-canvas .gjs-ghost {
1064
+ display: none;
1065
+ pointer-events: none;
1066
+ background-color: #5b5b5b;
1067
+ border: 2px dashed #ccc;
1068
+ position: absolute;
1069
+ z-index: 10;
1070
+ opacity: .55;
1071
+ filter: alpha(opacity=55)
1072
+ }
1073
+
1074
+ .gjs-cv-canvas .gjs-highlighter,
1075
+ .gjs-cv-canvas .gjs-highlighter-sel {
1076
+ position: absolute;
1077
+ outline: 1px solid var(--gjs-color-blue);
1078
+ outline-offset: -1px;
1079
+ pointer-events: none;
1080
+ width: 100%;
1081
+ height: 100%
1082
+ }
1083
+
1084
+ .gjs-cv-canvas .gjs-highlighter-warning {
1085
+ outline: 3px solid var(--gjs-color-yellow)
1086
+ }
1087
+
1088
+ .gjs-cv-canvas .gjs-highlighter-sel {
1089
+ outline: 2px solid var(--gjs-color-blue);
1090
+ outline-offset: -2px
1091
+ }
1092
+
1093
+ .gjs-cv-canvas #gjs-tools,
1094
+ .gjs-cv-canvas .gjs-tools {
1095
+ width: 100%;
1096
+ height: 100%;
1097
+ position: absolute;
1098
+ top: 0;
1099
+ left: 0;
1100
+ outline: none;
1101
+ z-index: 1
1102
+ }
1103
+
1104
+ .gjs-cv-canvas #gjs-tools {
1105
+ z-index: 2
1106
+ }
1107
+
1108
+ .gjs-cv-canvas * {
1109
+ box-sizing: border-box
1110
+ }
1111
+
1112
+ .gjs-frame {
1113
+ outline: medium none;
1114
+ height: 100%;
1115
+ width: 100%;
1116
+ border: none;
1117
+ margin: auto;
1118
+ display: block;
1119
+ transition: width .35s ease, height .35s ease;
1120
+ position: absolute;
1121
+ top: 0;
1122
+ bottom: 0;
1123
+ left: 0;
1124
+ right: 0
1125
+ }
1126
+
1127
+ .gjs-toolbar {
1128
+ position: absolute;
1129
+ background-color: var(--gjs-color-blue);
1130
+ white-space: nowrap;
1131
+ color: #fff;
1132
+ z-index: 10;
1133
+ top: 0;
1134
+ left: 0
1135
+ }
1136
+
1137
+ .gjs-toolbar-item {
1138
+ width: 26px;
1139
+ padding: 5px;
1140
+ cursor: pointer;
1141
+ display: inline-block
1142
+ }
1143
+
1144
+ .gjs-toolbar-item svg {
1145
+ fill: currentColor;
1146
+ vertical-align: middle
1147
+ }
1148
+
1149
+ .gjs-resizer-c {
1150
+ position: absolute;
1151
+ left: 0;
1152
+ top: 0;
1153
+ width: 100%;
1154
+ height: 100%;
1155
+ z-index: 9
1156
+ }
1157
+
1158
+ .gjs-margin-v-el,
1159
+ .gjs-padding-v-el,
1160
+ .gjs-fixedmargin-v-el,
1161
+ .gjs-fixedpadding-v-el {
1162
+ opacity: .1;
1163
+ filter: alpha(opacity=10);
1164
+ position: absolute;
1165
+ background-color: #ff0
1166
+ }
1167
+
1168
+ .gjs-fixedmargin-v-el,
1169
+ .gjs-fixedpadding-v-el {
1170
+ opacity: .2;
1171
+ filter: alpha(opacity=20)
1172
+ }
1173
+
1174
+ .gjs-padding-v-el,
1175
+ .gjs-fixedpadding-v-el {
1176
+ background-color: navy
1177
+ }
1178
+
1179
+ .gjs-resizer-h {
1180
+ pointer-events: all;
1181
+ position: absolute;
1182
+ border: 3px solid var(--gjs-color-blue);
1183
+ width: 10px;
1184
+ height: 10px;
1185
+ background-color: #fff;
1186
+ margin: var(--gjs-handle-margin)
1187
+ }
1188
+
1189
+ .gjs-resizer-h-tl {
1190
+ top: 0;
1191
+ left: 0;
1192
+ cursor: nwse-resize
1193
+ }
1194
+
1195
+ .gjs-resizer-h-tr {
1196
+ top: 0;
1197
+ right: 0;
1198
+ cursor: nesw-resize
1199
+ }
1200
+
1201
+ .gjs-resizer-h-tc {
1202
+ top: 0;
1203
+ margin: var(--gjs-handle-margin) auto;
1204
+ left: 0;
1205
+ right: 0;
1206
+ cursor: ns-resize
1207
+ }
1208
+
1209
+ .gjs-resizer-h-cl {
1210
+ left: 0;
1211
+ margin: auto var(--gjs-handle-margin);
1212
+ top: 0;
1213
+ bottom: 0;
1214
+ cursor: ew-resize
1215
+ }
1216
+
1217
+ .gjs-resizer-h-cr {
1218
+ margin: auto var(--gjs-handle-margin);
1219
+ top: 0;
1220
+ bottom: 0;
1221
+ right: 0;
1222
+ cursor: ew-resize
1223
+ }
1224
+
1225
+ .gjs-resizer-h-bl {
1226
+ bottom: 0;
1227
+ left: 0;
1228
+ cursor: nesw-resize
1229
+ }
1230
+
1231
+ .gjs-resizer-h-bc {
1232
+ bottom: 0;
1233
+ margin: var(--gjs-handle-margin) auto;
1234
+ left: 0;
1235
+ right: 0;
1236
+ cursor: ns-resize
1237
+ }
1238
+
1239
+ .gjs-resizer-h-br {
1240
+ bottom: 0;
1241
+ right: 0;
1242
+ cursor: nwse-resize
1243
+ }
1244
+
1245
+ .gjs-pn-panel .gjs-resizer-h {
1246
+ background-color: rgba(0, 0, 0, .2);
1247
+ border: none;
1248
+ opacity: 0;
1249
+ transition: opacity .25s
1250
+ }
1251
+
1252
+ .gjs-pn-panel .gjs-resizer-h:hover {
1253
+ opacity: 1
1254
+ }
1255
+
1256
+ .gjs-pn-panel .gjs-resizer-h-tc,
1257
+ .gjs-pn-panel .gjs-resizer-h-bc {
1258
+ margin: 0 auto;
1259
+ width: 100%
1260
+ }
1261
+
1262
+ .gjs-pn-panel .gjs-resizer-h-cr,
1263
+ .gjs-pn-panel .gjs-resizer-h-cl {
1264
+ margin: auto 0;
1265
+ height: 100%
1266
+ }
1267
+
1268
+ .gjs-resizing .gjs-highlighter,
1269
+ .gjs-resizing .gjs-badge {
1270
+ display: none !important
1271
+ }
1272
+
1273
+ .gjs-resizing-tl * {
1274
+ cursor: nwse-resize !important
1275
+ }
1276
+
1277
+ .gjs-resizing-tr * {
1278
+ cursor: nesw-resize !important
1279
+ }
1280
+
1281
+ .gjs-resizing-tc * {
1282
+ cursor: ns-resize !important
1283
+ }
1284
+
1285
+ .gjs-resizing-cl * {
1286
+ cursor: ew-resize !important
1287
+ }
1288
+
1289
+ .gjs-resizing-cr * {
1290
+ cursor: ew-resize !important
1291
+ }
1292
+
1293
+ .gjs-resizing-bl * {
1294
+ cursor: nesw-resize !important
1295
+ }
1296
+
1297
+ .gjs-resizing-bc * {
1298
+ cursor: ns-resize !important
1299
+ }
1300
+
1301
+ .gjs-resizing-br * {
1302
+ cursor: nwse-resize !important
1303
+ }
1304
+
1305
+ .no-dots,
1306
+ .ui-resizable-handle {
1307
+ border: none !important;
1308
+ margin: 0 !important;
1309
+ outline: none !important
1310
+ }
1311
+
1312
+ .gjs-com-dashed * {
1313
+ outline: 1px dashed #888;
1314
+ outline-offset: -2px;
1315
+ box-sizing: border-box
1316
+ }
1317
+
1318
+ .gjs-com-badge,
1319
+ .gjs-badge {
1320
+ pointer-events: none;
1321
+ background-color: var(--gjs-color-blue);
1322
+ color: #fff;
1323
+ padding: 2px 5px;
1324
+ position: absolute;
1325
+ z-index: 1;
1326
+ font-size: 12px;
1327
+ outline: none;
1328
+ display: none
1329
+ }
1330
+
1331
+ .gjs-badge-warning {
1332
+ background-color: var(--gjs-color-yellow)
1333
+ }
1334
+
1335
+ .gjs-placeholder,
1336
+ .gjs-com-placeholder,
1337
+ .gjs-placeholder {
1338
+ position: absolute;
1339
+ z-index: 10;
1340
+ pointer-events: none;
1341
+ display: none
1342
+ }
1343
+
1344
+ .gjs-placeholder,
1345
+ .gjs-placeholder {
1346
+ border-style: solid !important;
1347
+ outline: none;
1348
+ box-sizing: border-box;
1349
+ transition: top var(--gjs-animation-duration), left var(--gjs-animation-duration), width var(--gjs-animation-duration), height var(--gjs-animation-duration)
1350
+ }
1351
+
1352
+ .gjs-placeholder.horizontal,
1353
+ .gjs-com-placeholder.horizontal,
1354
+ .gjs-placeholder.horizontal {
1355
+ border-color: rgba(0, 0, 0, 0) var(--gjs-placeholder-background-color);
1356
+ border-width: 3px 5px;
1357
+ margin: -3px 0 0
1358
+ }
1359
+
1360
+ .gjs-placeholder.vertical,
1361
+ .gjs-com-placeholder.vertical,
1362
+ .gjs-placeholder.vertical {
1363
+ border-color: var(--gjs-placeholder-background-color) rgba(0, 0, 0, 0);
1364
+ border-width: 5px 3px;
1365
+ margin: 0 0 0 -3px
1366
+ }
1367
+
1368
+ .gjs-placeholder-int,
1369
+ .gjs-com-placeholder-int,
1370
+ .gjs-placeholder-int {
1371
+ background-color: var(--gjs-placeholder-background-color);
1372
+ box-shadow: 0 0 3px rgba(0, 0, 0, .2);
1373
+ height: 100%;
1374
+ width: 100%;
1375
+ pointer-events: none;
1376
+ padding: 1.5px;
1377
+ outline: none
1378
+ }
1379
+
1380
+ .gjs-pn-panel {
1381
+ display: inline-block;
1382
+ position: absolute;
1383
+ box-sizing: border-box;
1384
+ text-align: center;
1385
+ padding: 5px;
1386
+ z-index: 3
1387
+ }
1388
+
1389
+ .gjs-pn-panel .icon-undo,
1390
+ .gjs-pn-panel .icon-redo {
1391
+ font-size: 20px;
1392
+ height: 30px;
1393
+ width: 25px
1394
+ }
1395
+
1396
+ .gjs-pn-commands {
1397
+ width: calc(100% - var(--gjs-left-width));
1398
+ left: 0;
1399
+ top: 0;
1400
+ box-shadow: 0 0 5px var(--gjs-main-dark-color)
1401
+ }
1402
+
1403
+ .gjs-pn-options {
1404
+ right: var(--gjs-left-width);
1405
+ top: 0
1406
+ }
1407
+
1408
+ .gjs-pn-views {
1409
+ border-bottom: 2px solid var(--gjs-main-dark-color);
1410
+ right: 0;
1411
+ width: var(--gjs-left-width);
1412
+ z-index: 4
1413
+ }
1414
+
1415
+ .gjs-pn-views-container {
1416
+ height: 100%;
1417
+ padding: 42px 0 0;
1418
+ right: 0;
1419
+ width: var(--gjs-left-width);
1420
+ overflow: auto;
1421
+ box-shadow: 0 0 5px var(--gjs-main-dark-color)
1422
+ }
1423
+
1424
+ .gjs-pn-buttons {
1425
+ align-items: center;
1426
+ display: flex;
1427
+ justify-content: space-between
1428
+ }
1429
+
1430
+ .gjs-pn-btn {
1431
+ box-sizing: border-box;
1432
+ min-height: 30px;
1433
+ min-width: 30px;
1434
+ line-height: 21px;
1435
+ background-color: rgba(0, 0, 0, 0);
1436
+ border: none;
1437
+ font-size: 18px;
1438
+ margin-right: 5px;
1439
+ border-radius: 2px;
1440
+ padding: 4px;
1441
+ position: relative;
1442
+ cursor: pointer
1443
+ }
1444
+
1445
+ .gjs-pn-btn.gjs-pn-active {
1446
+ background-color: var(--gjs-quaternary-dark-color);
1447
+ box-shadow: 0 0 3px var(--gjs-quaternary-dark-color) inset
1448
+ }
1449
+
1450
+ .gjs-pn-btn svg {
1451
+ fill: currentColor
1452
+ }
1453
+
1454
+ .gjs-label {
1455
+ line-height: 18px
1456
+ }
1457
+
1458
+ .gjs-fields {
1459
+ display: flex
1460
+ }
1461
+
1462
+ .gjs-select {
1463
+ padding: 0;
1464
+ width: 100%
1465
+ }
1466
+
1467
+ .gjs-select select {
1468
+ padding-right: 10px
1469
+ }
1470
+
1471
+ .gjs-select:-moz-focusring,
1472
+ .gjs-select select:-moz-focusring {
1473
+ color: rgba(0, 0, 0, 0);
1474
+ text-shadow: 0 0 0 var(--gjs-secondary-light-color)
1475
+ }
1476
+
1477
+ .gjs-input:focus,
1478
+ .gjs-button:focus,
1479
+ .gjs-btn-prim:focus,
1480
+ .gjs-select:focus,
1481
+ .gjs-select select:focus {
1482
+ outline: none
1483
+ }
1484
+
1485
+ .gjs-field input,
1486
+ .gjs-field select,
1487
+ .gjs-field textarea {
1488
+ -webkit-appearance: none;
1489
+ -moz-appearance: none;
1490
+ appearance: none;
1491
+ color: inherit;
1492
+ border: none;
1493
+ background-color: rgba(0, 0, 0, 0);
1494
+ box-sizing: border-box;
1495
+ width: 100%;
1496
+ position: relative;
1497
+ padding: var(--gjs-input-padding);
1498
+ z-index: 1
1499
+ }
1500
+
1501
+ .gjs-field input:focus,
1502
+ .gjs-field select:focus,
1503
+ .gjs-field textarea:focus {
1504
+ outline: none
1505
+ }
1506
+
1507
+ .gjs-field input[type=number] {
1508
+ -moz-appearance: textfield
1509
+ }
1510
+
1511
+ .gjs-field input[type=number]::-webkit-outer-spin-button,
1512
+ .gjs-field input[type=number]::-webkit-inner-spin-button {
1513
+ -webkit-appearance: none;
1514
+ margin: 0
1515
+ }
1516
+
1517
+ .gjs-field-range {
1518
+ flex: 9 1 auto
1519
+ }
1520
+
1521
+ .gjs-field-integer input {
1522
+ padding-right: 30px
1523
+ }
1524
+
1525
+ .gjs-select option,
1526
+ .gjs-field-select option,
1527
+ .gjs-clm-select option,
1528
+ .gjs-sm-select option,
1529
+ .gjs-fields option,
1530
+ .gjs-sm-unit option {
1531
+ background-color: var(--gjs-main-color);
1532
+ color: var(--gjs-font-color)
1533
+ }
1534
+
1535
+ .gjs-field {
1536
+ background-color: var(--gjs-main-dark-color);
1537
+ border: none;
1538
+ box-shadow: none;
1539
+ border-radius: 2px;
1540
+ box-sizing: border-box;
1541
+ padding: 0;
1542
+ position: relative
1543
+ }
1544
+
1545
+ .gjs-field textarea {
1546
+ resize: vertical
1547
+ }
1548
+
1549
+ .gjs-field .gjs-sel-arrow {
1550
+ height: 100%;
1551
+ width: 9px;
1552
+ position: absolute;
1553
+ right: 0;
1554
+ top: 0;
1555
+ z-index: 0
1556
+ }
1557
+
1558
+ .gjs-field .gjs-d-s-arrow {
1559
+ bottom: 0;
1560
+ top: 0;
1561
+ margin: auto;
1562
+ right: var(--gjs-input-padding);
1563
+ border-top: 4px solid var(--gjs-arrow-color);
1564
+ position: absolute;
1565
+ height: 0;
1566
+ width: 0;
1567
+ border-left: 3px solid rgba(0, 0, 0, 0);
1568
+ border-right: 4px solid rgba(0, 0, 0, 0);
1569
+ cursor: pointer
1570
+ }
1571
+
1572
+ .gjs-field-arrows {
1573
+ position: absolute;
1574
+ cursor: ns-resize;
1575
+ margin: auto;
1576
+ height: 20px;
1577
+ width: 9px;
1578
+ z-index: 10;
1579
+ bottom: 0;
1580
+ right: calc(var(--gjs-input-padding) - 2px);
1581
+ top: 0
1582
+ }
1583
+
1584
+ .gjs-field-color,
1585
+ .gjs-field-radio {
1586
+ width: 100%
1587
+ }
1588
+
1589
+ .gjs-field-color input {
1590
+ padding-right: var(--gjs-color-input-padding);
1591
+ box-sizing: border-box
1592
+ }
1593
+
1594
+ .gjs-field-colorp {
1595
+ border-left: 1px solid var(--gjs-main-dark-color);
1596
+ box-sizing: border-box;
1597
+ height: 100%;
1598
+ padding: 2px;
1599
+ position: absolute;
1600
+ right: 0;
1601
+ top: 0;
1602
+ width: var(--gjs-color-input-padding);
1603
+ z-index: 10
1604
+ }
1605
+
1606
+ .gjs-field-colorp .gjs-checker-bg,
1607
+ .gjs-field-colorp .gjs-field-colorp-c {
1608
+ height: 100%;
1609
+ width: 100%;
1610
+ border-radius: 1px
1611
+ }
1612
+
1613
+ .gjs-field-colorp-c {
1614
+ height: 100%;
1615
+ position: relative;
1616
+ width: 100%
1617
+ }
1618
+
1619
+ .gjs-field-color-picker {
1620
+ background-color: var(--gjs-font-color);
1621
+ cursor: pointer;
1622
+ height: 100%;
1623
+ width: 100%;
1624
+ box-shadow: 0 0 1px var(--gjs-main-dark-color);
1625
+ border-radius: 1px;
1626
+ position: absolute;
1627
+ top: 0
1628
+ }
1629
+
1630
+ .gjs-field-checkbox {
1631
+ padding: 0;
1632
+ width: 17px;
1633
+ height: 17px;
1634
+ display: block;
1635
+ cursor: pointer
1636
+ }
1637
+
1638
+ .gjs-field-checkbox input {
1639
+ display: none
1640
+ }
1641
+
1642
+ .gjs-field-checkbox input:checked+.gjs-chk-icon {
1643
+ border-color: hsla(0, 0%, 100%, .5);
1644
+ border-width: 0 2px 2px 0;
1645
+ border-style: solid
1646
+ }
1647
+
1648
+ .gjs-radio-item {
1649
+ flex: 1 1 auto;
1650
+ text-align: center;
1651
+ border-left: 1px solid var(--gjs-dark-text-shadow)
1652
+ }
1653
+
1654
+ .gjs-radio-item:first-child {
1655
+ border: none
1656
+ }
1657
+
1658
+ .gjs-radio-item:hover {
1659
+ background: var(--gjs-main-dark-color)
1660
+ }
1661
+
1662
+ .gjs-radio-item input {
1663
+ display: none
1664
+ }
1665
+
1666
+ .gjs-radio-item input:checked+.gjs-radio-item-label {
1667
+ background-color: hsla(0, 0%, 100%, .2)
1668
+ }
1669
+
1670
+ .gjs-radio-items {
1671
+ display: flex
1672
+ }
1673
+
1674
+ .gjs-radio-item-label {
1675
+ cursor: pointer;
1676
+ display: block;
1677
+ padding: var(--gjs-input-padding)
1678
+ }
1679
+
1680
+ .gjs-field-units {
1681
+ position: absolute;
1682
+ margin: auto;
1683
+ right: 10px;
1684
+ bottom: 0;
1685
+ top: 0
1686
+ }
1687
+
1688
+ .gjs-field-unit {
1689
+ position: absolute;
1690
+ right: 10px;
1691
+ top: 3px;
1692
+ font-size: 10px;
1693
+ color: var(--gjs-arrow-color);
1694
+ cursor: pointer
1695
+ }
1696
+
1697
+ .gjs-input-unit {
1698
+ text-align: center
1699
+ }
1700
+
1701
+ .gjs-field-arrow-u,
1702
+ .gjs-field-arrow-d {
1703
+ position: absolute;
1704
+ height: 0;
1705
+ width: 0;
1706
+ border-left: 3px solid rgba(0, 0, 0, 0);
1707
+ border-right: 4px solid rgba(0, 0, 0, 0);
1708
+ border-top: 4px solid var(--gjs-arrow-color);
1709
+ bottom: 4px;
1710
+ cursor: pointer
1711
+ }
1712
+
1713
+ .gjs-field-arrow-u {
1714
+ border-bottom: 4px solid var(--gjs-arrow-color);
1715
+ border-top: none;
1716
+ top: 4px
1717
+ }
1718
+
1719
+ .gjs-field-select {
1720
+ padding: 0
1721
+ }
1722
+
1723
+ .gjs-field-range {
1724
+ background-color: rgba(0, 0, 0, 0);
1725
+ border: none;
1726
+ box-shadow: none;
1727
+ padding: 0
1728
+ }
1729
+
1730
+ .gjs-field-range input {
1731
+ margin: 0;
1732
+ height: 100%
1733
+ }
1734
+
1735
+ .gjs-field-range input:focus {
1736
+ outline: none
1737
+ }
1738
+
1739
+ .gjs-field-range input::-webkit-slider-thumb {
1740
+ -webkit-appearance: none;
1741
+ margin-top: -4px;
1742
+ height: 10px;
1743
+ width: 10px;
1744
+ border: 1px solid var(--gjs-main-dark-color);
1745
+ border-radius: 100%;
1746
+ background-color: var(--gjs-font-color);
1747
+ cursor: pointer
1748
+ }
1749
+
1750
+ .gjs-field-range input::-moz-range-thumb {
1751
+ height: 10px;
1752
+ width: 10px;
1753
+ border: 1px solid var(--gjs-main-dark-color);
1754
+ border-radius: 100%;
1755
+ background-color: var(--gjs-font-color);
1756
+ cursor: pointer
1757
+ }
1758
+
1759
+ .gjs-field-range input::-ms-thumb {
1760
+ height: 10px;
1761
+ width: 10px;
1762
+ border: 1px solid var(--gjs-main-dark-color);
1763
+ border-radius: 100%;
1764
+ background-color: var(--gjs-font-color);
1765
+ cursor: pointer
1766
+ }
1767
+
1768
+ .gjs-field-range input::-moz-range-track {
1769
+ background-color: var(--gjs-main-dark-color);
1770
+ border-radius: 1px;
1771
+ margin-top: 3px;
1772
+ height: 3px
1773
+ }
1774
+
1775
+ .gjs-field-range input::-webkit-slider-runnable-track {
1776
+ background-color: var(--gjs-main-dark-color);
1777
+ border-radius: 1px;
1778
+ margin-top: 3px;
1779
+ height: 3px
1780
+ }
1781
+
1782
+ .gjs-field-range input::-ms-track {
1783
+ background-color: var(--gjs-main-dark-color);
1784
+ border-radius: 1px;
1785
+ margin-top: 3px;
1786
+ height: 3px
1787
+ }
1788
+
1789
+ .gjs-btn-prim {
1790
+ color: inherit;
1791
+ background-color: var(--gjs-main-light-color);
1792
+ border-radius: 2px;
1793
+ padding: 3px 6px;
1794
+ padding: var(--gjs-input-padding);
1795
+ cursor: pointer;
1796
+ border: none
1797
+ }
1798
+
1799
+ .gjs-btn-prim:active {
1800
+ background-color: var(--gjs-main-light-color)
1801
+ }
1802
+
1803
+ .gjs-btn--full {
1804
+ width: 100%
1805
+ }
1806
+
1807
+ .gjs-chk-icon {
1808
+ -ms-transform: rotate(45deg);
1809
+ -webkit-transform: rotate(45deg);
1810
+ -moz-transform: rotate(45deg);
1811
+ transform: rotate(45deg);
1812
+ box-sizing: border-box;
1813
+ display: block;
1814
+ height: 14px;
1815
+ margin: 0 5px;
1816
+ width: 6px
1817
+ }
1818
+
1819
+ .gjs-add-trasp {
1820
+ background: none;
1821
+ border: none;
1822
+ color: var(--gjs-font-color);
1823
+ cursor: pointer;
1824
+ font-size: 1em;
1825
+ border-radius: 2px;
1826
+ opacity: .75;
1827
+ filter: alpha(opacity=75)
1828
+ }
1829
+
1830
+ .gjs-add-trasp:hover {
1831
+ opacity: 1;
1832
+ filter: alpha(opacity=100)
1833
+ }
1834
+
1835
+ .gjs-add-trasp:active {
1836
+ background-color: rgba(0, 0, 0, .2)
1837
+ }
1838
+
1839
+ .gjs-devices-c {
1840
+ display: flex;
1841
+ align-items: center;
1842
+ padding: 2px 3px 3px 3px
1843
+ }
1844
+
1845
+ .gjs-devices-c .gjs-device-label {
1846
+ flex-grow: 2;
1847
+ text-align: left;
1848
+ margin-right: 10px
1849
+ }
1850
+
1851
+ .gjs-devices-c .gjs-select {
1852
+ flex-grow: 20
1853
+ }
1854
+
1855
+ .gjs-devices-c .gjs-add-trasp {
1856
+ flex-grow: 1;
1857
+ margin-left: 5px
1858
+ }
1859
+
1860
+ .gjs-sm-clear {
1861
+ cursor: pointer;
1862
+ width: 14px;
1863
+ min-width: 14px;
1864
+ height: 14px;
1865
+ margin-left: 3px
1866
+ }
1867
+
1868
+ .gjs-sm-header {
1869
+ font-weight: lighter;
1870
+ padding: 10px
1871
+ }
1872
+
1873
+ .gjs-sm-sector {
1874
+ clear: both;
1875
+ font-weight: lighter;
1876
+ text-align: left
1877
+ }
1878
+
1879
+ .gjs-sm-sector-title {
1880
+ display: flex;
1881
+ align-items: center
1882
+ }
1883
+
1884
+ .gjs-sm-sector-caret {
1885
+ width: 17px;
1886
+ height: 17px;
1887
+ min-width: 17px;
1888
+ transform: rotate(-90deg)
1889
+ }
1890
+
1891
+ .gjs-sm-sector-label {
1892
+ margin-left: 5px
1893
+ }
1894
+
1895
+ .gjs-sm-sector.gjs-sm-open .gjs-sm-sector-caret {
1896
+ transform: none
1897
+ }
1898
+
1899
+ .gjs-sm-properties {
1900
+ font-size: var(--gjs-font-size);
1901
+ padding: 10px 5px;
1902
+ display: flex;
1903
+ flex-wrap: wrap;
1904
+ align-items: flex-end;
1905
+ box-sizing: border-box;
1906
+ width: 100%
1907
+ }
1908
+
1909
+ .gjs-sm-label {
1910
+ margin: 5px 5px 3px 0;
1911
+ display: flex;
1912
+ align-items: center
1913
+ }
1914
+
1915
+ .gjs-sm-close-btn,
1916
+ .gjs-sm-preview-file-close {
1917
+ display: block;
1918
+ font-size: 23px;
1919
+ position: absolute;
1920
+ cursor: pointer;
1921
+ right: 5px;
1922
+ top: 0;
1923
+ opacity: .7;
1924
+ filter: alpha(opacity=70)
1925
+ }
1926
+
1927
+ .gjs-sm-close-btn:hover,
1928
+ .gjs-sm-preview-file-close:hover {
1929
+ opacity: .9;
1930
+ filter: alpha(opacity=90)
1931
+ }
1932
+
1933
+ .gjs-sm-field,
1934
+ .gjs-clm-field,
1935
+ .gjs-clm-select {
1936
+ width: 100%;
1937
+ position: relative
1938
+ }
1939
+
1940
+ .gjs-sm-field input,
1941
+ .gjs-clm-field input,
1942
+ .gjs-clm-select input,
1943
+ .gjs-sm-field select,
1944
+ .gjs-clm-field select,
1945
+ .gjs-clm-select select {
1946
+ background-color: rgba(0, 0, 0, 0);
1947
+ color: hsla(0, 0%, 100%, .7);
1948
+ border: none;
1949
+ width: 100%
1950
+ }
1951
+
1952
+ .gjs-sm-field input,
1953
+ .gjs-clm-field input,
1954
+ .gjs-clm-select input {
1955
+ box-sizing: border-box
1956
+ }
1957
+
1958
+ .gjs-sm-field select,
1959
+ .gjs-clm-field select,
1960
+ .gjs-clm-select select {
1961
+ position: relative;
1962
+ z-index: 1;
1963
+ -webkit-appearance: none;
1964
+ -moz-appearance: none;
1965
+ appearance: none
1966
+ }
1967
+
1968
+ .gjs-sm-field select::-ms-expand,
1969
+ .gjs-clm-field select::-ms-expand,
1970
+ .gjs-clm-select select::-ms-expand {
1971
+ display: none
1972
+ }
1973
+
1974
+ .gjs-sm-field select:-moz-focusring,
1975
+ .gjs-clm-field select:-moz-focusring,
1976
+ .gjs-clm-select select:-moz-focusring {
1977
+ color: rgba(0, 0, 0, 0);
1978
+ text-shadow: 0 0 0 var(--gjs-secondary-light-color)
1979
+ }
1980
+
1981
+ .gjs-sm-field input:focus,
1982
+ .gjs-clm-field input:focus,
1983
+ .gjs-clm-select input:focus,
1984
+ .gjs-sm-field select:focus,
1985
+ .gjs-clm-field select:focus,
1986
+ .gjs-clm-select select:focus {
1987
+ outline: none
1988
+ }
1989
+
1990
+ .gjs-sm-field .gjs-sm-unit,
1991
+ .gjs-clm-field .gjs-sm-unit,
1992
+ .gjs-clm-select .gjs-sm-unit {
1993
+ position: absolute;
1994
+ right: 10px;
1995
+ top: 3px;
1996
+ font-size: 10px;
1997
+ color: var(--gjs-secondary-light-color);
1998
+ cursor: pointer
1999
+ }
2000
+
2001
+ .gjs-sm-field .gjs-clm-sel-arrow,
2002
+ .gjs-clm-field .gjs-clm-sel-arrow,
2003
+ .gjs-clm-select .gjs-clm-sel-arrow,
2004
+ .gjs-sm-field .gjs-sm-int-arrows,
2005
+ .gjs-clm-field .gjs-sm-int-arrows,
2006
+ .gjs-clm-select .gjs-sm-int-arrows,
2007
+ .gjs-sm-field .gjs-sm-sel-arrow,
2008
+ .gjs-clm-field .gjs-sm-sel-arrow,
2009
+ .gjs-clm-select .gjs-sm-sel-arrow {
2010
+ height: 100%;
2011
+ width: 9px;
2012
+ position: absolute;
2013
+ right: 0;
2014
+ top: 0;
2015
+ cursor: ns-resize
2016
+ }
2017
+
2018
+ .gjs-sm-field .gjs-sm-sel-arrow,
2019
+ .gjs-clm-field .gjs-sm-sel-arrow,
2020
+ .gjs-clm-select .gjs-sm-sel-arrow {
2021
+ cursor: pointer
2022
+ }
2023
+
2024
+ .gjs-sm-field .gjs-clm-d-s-arrow,
2025
+ .gjs-clm-field .gjs-clm-d-s-arrow,
2026
+ .gjs-clm-select .gjs-clm-d-s-arrow,
2027
+ .gjs-sm-field .gjs-sm-d-arrow,
2028
+ .gjs-clm-field .gjs-sm-d-arrow,
2029
+ .gjs-clm-select .gjs-sm-d-arrow,
2030
+ .gjs-sm-field .gjs-sm-d-s-arrow,
2031
+ .gjs-clm-field .gjs-sm-d-s-arrow,
2032
+ .gjs-clm-select .gjs-sm-d-s-arrow,
2033
+ .gjs-sm-field .gjs-sm-u-arrow,
2034
+ .gjs-clm-field .gjs-sm-u-arrow,
2035
+ .gjs-clm-select .gjs-sm-u-arrow {
2036
+ position: absolute;
2037
+ height: 0;
2038
+ width: 0;
2039
+ border-left: 3px solid rgba(0, 0, 0, 0);
2040
+ border-right: 4px solid rgba(0, 0, 0, 0);
2041
+ cursor: pointer
2042
+ }
2043
+
2044
+ .gjs-sm-field .gjs-sm-u-arrow,
2045
+ .gjs-clm-field .gjs-sm-u-arrow,
2046
+ .gjs-clm-select .gjs-sm-u-arrow {
2047
+ border-bottom: 4px solid var(--gjs-secondary-light-color);
2048
+ top: 4px
2049
+ }
2050
+
2051
+ .gjs-sm-field .gjs-clm-d-s-arrow,
2052
+ .gjs-clm-field .gjs-clm-d-s-arrow,
2053
+ .gjs-clm-select .gjs-clm-d-s-arrow,
2054
+ .gjs-sm-field .gjs-sm-d-arrow,
2055
+ .gjs-clm-field .gjs-sm-d-arrow,
2056
+ .gjs-clm-select .gjs-sm-d-arrow,
2057
+ .gjs-sm-field .gjs-sm-d-s-arrow,
2058
+ .gjs-clm-field .gjs-sm-d-s-arrow,
2059
+ .gjs-clm-select .gjs-sm-d-s-arrow {
2060
+ border-top: 4px solid var(--gjs-secondary-light-color);
2061
+ bottom: 4px
2062
+ }
2063
+
2064
+ .gjs-sm-field .gjs-clm-d-s-arrow,
2065
+ .gjs-clm-field .gjs-clm-d-s-arrow,
2066
+ .gjs-clm-select .gjs-clm-d-s-arrow,
2067
+ .gjs-sm-field .gjs-sm-d-s-arrow,
2068
+ .gjs-clm-field .gjs-sm-d-s-arrow,
2069
+ .gjs-clm-select .gjs-sm-d-s-arrow {
2070
+ bottom: 7px
2071
+ }
2072
+
2073
+ .gjs-sm-field.gjs-sm-color,
2074
+ .gjs-sm-color.gjs-clm-field,
2075
+ .gjs-sm-field.gjs-sm-input,
2076
+ .gjs-sm-input.gjs-clm-field,
2077
+ .gjs-sm-field.gjs-sm-integer,
2078
+ .gjs-sm-integer.gjs-clm-field,
2079
+ .gjs-sm-field.gjs-sm-list,
2080
+ .gjs-sm-list.gjs-clm-field,
2081
+ .gjs-sm-field.gjs-sm-select,
2082
+ .gjs-sm-select.gjs-clm-field,
2083
+ .gjs-clm-select {
2084
+ background-color: var(--gjs-main-dark-color);
2085
+ border: 1px solid rgba(0, 0, 0, .1);
2086
+ box-shadow: 1px 1px 0 var(--gjs-main-light-color);
2087
+ color: var(--gjs-secondary-light-color);
2088
+ border-radius: 2px;
2089
+ box-sizing: border-box;
2090
+ padding: 0 5px
2091
+ }
2092
+
2093
+ .gjs-sm-field.gjs-sm-composite,
2094
+ .gjs-sm-composite.gjs-clm-field,
2095
+ .gjs-sm-composite.gjs-clm-select {
2096
+ border-radius: 2px
2097
+ }
2098
+
2099
+ .gjs-sm-field.gjs-sm-select,
2100
+ .gjs-sm-select.gjs-clm-field,
2101
+ .gjs-clm-select {
2102
+ padding: 0
2103
+ }
2104
+
2105
+ .gjs-sm-field.gjs-sm-select select,
2106
+ .gjs-sm-select.gjs-clm-field select,
2107
+ .gjs-clm-select select {
2108
+ height: 20px
2109
+ }
2110
+
2111
+ .gjs-sm-field.gjs-sm-select option,
2112
+ .gjs-sm-select.gjs-clm-field option,
2113
+ .gjs-clm-select option {
2114
+ padding: 3px 0
2115
+ }
2116
+
2117
+ .gjs-sm-field.gjs-sm-composite,
2118
+ .gjs-sm-composite.gjs-clm-field,
2119
+ .gjs-sm-composite.gjs-clm-select {
2120
+ background-color: var(--gjs-secondary-dark-color);
2121
+ border: 1px solid var(--gjs-quaternary-dark-color)
2122
+ }
2123
+
2124
+ .gjs-sm-field.gjs-sm-list,
2125
+ .gjs-sm-list.gjs-clm-field,
2126
+ .gjs-sm-list.gjs-clm-select {
2127
+ width: auto;
2128
+ padding: 0;
2129
+ overflow: hidden;
2130
+ float: left
2131
+ }
2132
+
2133
+ .gjs-sm-field.gjs-sm-list input,
2134
+ .gjs-sm-list.gjs-clm-field input,
2135
+ .gjs-sm-list.gjs-clm-select input {
2136
+ display: none
2137
+ }
2138
+
2139
+ .gjs-sm-field.gjs-sm-list label,
2140
+ .gjs-sm-list.gjs-clm-field label,
2141
+ .gjs-sm-list.gjs-clm-select label {
2142
+ cursor: pointer;
2143
+ padding: 5px;
2144
+ display: block
2145
+ }
2146
+
2147
+ .gjs-sm-field.gjs-sm-list .gjs-sm-radio:checked+label,
2148
+ .gjs-sm-list.gjs-clm-field .gjs-sm-radio:checked+label,
2149
+ .gjs-sm-list.gjs-clm-select .gjs-sm-radio:checked+label {
2150
+ background-color: hsla(0, 0%, 100%, .2)
2151
+ }
2152
+
2153
+ .gjs-sm-field.gjs-sm-list .gjs-sm-icon,
2154
+ .gjs-sm-list.gjs-clm-field .gjs-sm-icon,
2155
+ .gjs-sm-list.gjs-clm-select .gjs-sm-icon {
2156
+ background-repeat: no-repeat;
2157
+ background-position: center;
2158
+ text-shadow: none;
2159
+ line-height: normal
2160
+ }
2161
+
2162
+ .gjs-sm-field.gjs-sm-integer select,
2163
+ .gjs-sm-integer.gjs-clm-field select,
2164
+ .gjs-sm-integer.gjs-clm-select select {
2165
+ width: auto;
2166
+ padding: 0
2167
+ }
2168
+
2169
+ .gjs-sm-list .gjs-sm-el {
2170
+ float: left;
2171
+ border-left: 1px solid var(--gjs-main-dark-color)
2172
+ }
2173
+
2174
+ .gjs-sm-list .gjs-sm-el:first-child {
2175
+ border: none
2176
+ }
2177
+
2178
+ .gjs-sm-list .gjs-sm-el:hover {
2179
+ background: var(--gjs-main-dark-color)
2180
+ }
2181
+
2182
+ .gjs-sm-slider .gjs-field-integer {
2183
+ flex: 1 1 65px
2184
+ }
2185
+
2186
+ .gjs-sm-property {
2187
+ box-sizing: border-box;
2188
+ float: left;
2189
+ width: 50%;
2190
+ margin-bottom: 5px;
2191
+ padding: 0 5px
2192
+ }
2193
+
2194
+ .gjs-sm-property--full,
2195
+ .gjs-sm-property.gjs-sm-composite,
2196
+ .gjs-sm-property.gjs-sm-file,
2197
+ .gjs-sm-property.gjs-sm-list,
2198
+ .gjs-sm-property.gjs-sm-stack,
2199
+ .gjs-sm-property.gjs-sm-slider,
2200
+ .gjs-sm-property.gjs-sm-color {
2201
+ width: 100%
2202
+ }
2203
+
2204
+ .gjs-sm-property .gjs-sm-btn {
2205
+ background-color: color-mix(in srgb, var(--gjs-main-dark-color), white 13%);
2206
+ border-radius: 2px;
2207
+ box-shadow: 1px 1px 0 color-mix(in srgb, var(--gjs-main-dark-color), white 2%), 1px 1px 0 color-mix(in srgb, var(--gjs-main-dark-color), white 17%) inset;
2208
+ padding: 5px;
2209
+ position: relative;
2210
+ text-align: center;
2211
+ height: auto;
2212
+ width: 100%;
2213
+ cursor: pointer;
2214
+ color: var(--gjs-font-color);
2215
+ box-sizing: border-box;
2216
+ text-shadow: -1px -1px 0 var(--gjs-main-dark-color);
2217
+ border: none;
2218
+ opacity: .85;
2219
+ filter: alpha(opacity=85)
2220
+ }
2221
+
2222
+ .gjs-sm-property .gjs-sm-btn-c {
2223
+ box-sizing: border-box;
2224
+ float: left;
2225
+ width: 100%
2226
+ }
2227
+
2228
+ .gjs-sm-property__text-shadow .gjs-sm-layer-preview-cnt::after {
2229
+ color: #000;
2230
+ content: "T";
2231
+ font-weight: 900;
2232
+ line-height: 17px;
2233
+ padding: 0 4px
2234
+ }
2235
+
2236
+ .gjs-sm-preview-file {
2237
+ background-color: var(--gjs-light-border);
2238
+ border-radius: 2px;
2239
+ margin-top: 5px;
2240
+ position: relative;
2241
+ overflow: hidden;
2242
+ border: 1px solid color-mix(in srgb, var(--gjs-light-border), black 1%);
2243
+ padding: 3px 20px
2244
+ }
2245
+
2246
+ .gjs-sm-preview-file-cnt {
2247
+ background-size: auto 100%;
2248
+ background-repeat: no-repeat;
2249
+ background-position: center center;
2250
+ height: 50px
2251
+ }
2252
+
2253
+ .gjs-sm-preview-file-close {
2254
+ top: -5px;
2255
+ width: 14px;
2256
+ height: 14px
2257
+ }
2258
+
2259
+ .gjs-sm-layers {
2260
+ margin-top: 5px;
2261
+ padding: 1px 3px;
2262
+ min-height: 30px
2263
+ }
2264
+
2265
+ .gjs-sm-layer {
2266
+ background-color: hsla(0, 0%, 100%, .055);
2267
+ border-radius: 2px;
2268
+ margin: 2px 0;
2269
+ padding: 7px;
2270
+ position: relative
2271
+ }
2272
+
2273
+ .gjs-sm-layer.gjs-sm-active {
2274
+ background-color: hsla(0, 0%, 100%, .12)
2275
+ }
2276
+
2277
+ .gjs-sm-layer .gjs-sm-label-wrp {
2278
+ display: flex;
2279
+ align-items: center
2280
+ }
2281
+
2282
+ .gjs-sm-layer #gjs-sm-move {
2283
+ height: 14px;
2284
+ width: 14px;
2285
+ min-width: 14px;
2286
+ cursor: grab
2287
+ }
2288
+
2289
+ .gjs-sm-layer #gjs-sm-label {
2290
+ flex-grow: 1;
2291
+ overflow: hidden;
2292
+ white-space: nowrap;
2293
+ text-overflow: ellipsis;
2294
+ margin: 0 5px
2295
+ }
2296
+
2297
+ .gjs-sm-layer-preview {
2298
+ height: 15px;
2299
+ width: 15px;
2300
+ min-width: 15px;
2301
+ margin-right: 5px;
2302
+ border-radius: 2px
2303
+ }
2304
+
2305
+ .gjs-sm-layer-preview-cnt {
2306
+ border-radius: 2px;
2307
+ background-color: #fff;
2308
+ height: 100%;
2309
+ width: 100%;
2310
+ background-size: cover !important
2311
+ }
2312
+
2313
+ .gjs-sm-layer #gjs-sm-close-layer {
2314
+ display: block;
2315
+ cursor: pointer;
2316
+ height: 14px;
2317
+ width: 14px;
2318
+ min-width: 14px;
2319
+ opacity: .5;
2320
+ filter: alpha(opacity=50)
2321
+ }
2322
+
2323
+ .gjs-sm-layer #gjs-sm-close-layer:hover {
2324
+ opacity: .8;
2325
+ filter: alpha(opacity=80)
2326
+ }
2327
+
2328
+ .gjs-sm-stack .gjs-sm-properties {
2329
+ padding: 5px 0 0
2330
+ }
2331
+
2332
+ .gjs-sm-stack #gjs-sm-add {
2333
+ background: none;
2334
+ border: none;
2335
+ cursor: pointer;
2336
+ outline: none;
2337
+ position: absolute;
2338
+ right: 0;
2339
+ top: -17px;
2340
+ opacity: .75;
2341
+ padding: 0;
2342
+ width: 18px;
2343
+ height: 18px
2344
+ }
2345
+
2346
+ .gjs-sm-stack #gjs-sm-add:hover {
2347
+ opacity: 1;
2348
+ filter: alpha(opacity=100)
2349
+ }
2350
+
2351
+ .gjs-sm-colorp-c {
2352
+ height: 100%;
2353
+ width: 20px;
2354
+ position: absolute;
2355
+ right: 0;
2356
+ top: 0;
2357
+ box-sizing: border-box;
2358
+ border-radius: 2px;
2359
+ padding: 2px
2360
+ }
2361
+
2362
+ .gjs-sm-colorp-c .gjs-field-colorp-c,
2363
+ .gjs-sm-colorp-c .gjs-checker-bg {
2364
+ height: 100%;
2365
+ width: 100%;
2366
+ border-radius: 1px
2367
+ }
2368
+
2369
+ .gjs-sm-color-picker {
2370
+ background-color: var(--gjs-font-color);
2371
+ cursor: pointer;
2372
+ height: 16px;
2373
+ width: 100%;
2374
+ margin-top: -16px;
2375
+ box-shadow: 0 0 1px var(--gjs-main-dark-color);
2376
+ border-radius: 1px
2377
+ }
2378
+
2379
+ .gjs-sm-btn-upload #gjs-sm-upload {
2380
+ left: 0;
2381
+ top: 0;
2382
+ position: absolute;
2383
+ width: 100%;
2384
+ opacity: 0;
2385
+ cursor: pointer
2386
+ }
2387
+
2388
+ .gjs-sm-btn-upload #gjs-sm-label {
2389
+ padding: 2px 0
2390
+ }
2391
+
2392
+ .gjs-sm-layer>#gjs-sm-move {
2393
+ opacity: .7;
2394
+ filter: alpha(opacity=70);
2395
+ cursor: move;
2396
+ font-size: 12px;
2397
+ float: left;
2398
+ margin: 0 5px 0 0
2399
+ }
2400
+
2401
+ .gjs-sm-layer>#gjs-sm-move:hover {
2402
+ opacity: .9;
2403
+ filter: alpha(opacity=90)
2404
+ }
2405
+
2406
+ .gjs-blocks-c {
2407
+ display: flex;
2408
+ flex-wrap: wrap;
2409
+ justify-content: flex-start
2410
+ }
2411
+
2412
+ .gjs-block-categories {
2413
+ display: flex;
2414
+ flex-direction: column
2415
+ }
2416
+
2417
+ .gjs-block-category {
2418
+ width: 100%
2419
+ }
2420
+
2421
+ .gjs-block-category .gjs-caret-icon {
2422
+ margin-right: 5px
2423
+ }
2424
+
2425
+ .gjs-block {
2426
+ -moz-user-select: none;
2427
+ -khtml-user-select: none;
2428
+ -webkit-user-select: none;
2429
+ -ms-user-select: none;
2430
+ -o-user-select: none;
2431
+ user-select: none;
2432
+ width: 45%;
2433
+ min-width: 45px;
2434
+ padding: 1em;
2435
+ box-sizing: border-box;
2436
+ min-height: 90px;
2437
+ cursor: all-scroll;
2438
+ font-size: 11px;
2439
+ font-weight: lighter;
2440
+ text-align: center;
2441
+ display: flex;
2442
+ flex-direction: column;
2443
+ justify-content: space-between;
2444
+ border: 1px solid rgba(0, 0, 0, .2);
2445
+ border-radius: 3px;
2446
+ margin: 10px 2.5% 5px;
2447
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, .15);
2448
+ transition: all .2s ease 0s;
2449
+ transition-property: box-shadow, color
2450
+ }
2451
+
2452
+ .gjs-block:hover {
2453
+ box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .15)
2454
+ }
2455
+
2456
+ .gjs-block svg {
2457
+ fill: currentColor
2458
+ }
2459
+
2460
+ .gjs-block__media {
2461
+ margin-bottom: 10px;
2462
+ pointer-events: none
2463
+ }
2464
+
2465
+ .gjs-block-svg {
2466
+ width: 54px;
2467
+ fill: currentColor
2468
+ }
2469
+
2470
+ .gjs-block-svg-path {
2471
+ fill: currentColor
2472
+ }
2473
+
2474
+ .gjs-block.fa {
2475
+ font-size: 2em;
2476
+ line-height: 2em;
2477
+ padding: 11px
2478
+ }
2479
+
2480
+ .gjs-block-label {
2481
+ line-height: normal;
2482
+ font-size: .65rem;
2483
+ font-weight: normal;
2484
+ font-family: Helvetica, sans-serif;
2485
+ overflow: hidden;
2486
+ text-overflow: ellipsis;
2487
+ pointer-events: none
2488
+ }
2489
+
2490
+ .gjs-block.gjs-bdrag {
2491
+ width: auto;
2492
+ padding: 0
2493
+ }
2494
+
2495
+ .gjs-selected-parent {
2496
+ border: 1px solid var(--gjs-color-yellow)
2497
+ }
2498
+
2499
+ .gjs-opac50 {
2500
+ opacity: .5;
2501
+ filter: alpha(opacity=50)
2502
+ }
2503
+
2504
+ .gjs-layer {
2505
+ font-weight: lighter;
2506
+ text-align: left;
2507
+ position: relative;
2508
+ font-size: var(--gjs-font-size);
2509
+ display: grid
2510
+ }
2511
+
2512
+ .gjs-layer-item {
2513
+ display: flex;
2514
+ align-items: center;
2515
+ justify-content: space-between;
2516
+ padding: 5px 10px;
2517
+ border-bottom: 1px solid var(--gjs-main-dark-color);
2518
+ background-color: var(--gjs-secondary-dark-color);
2519
+ gap: var(--gjs-flex-item-gap);
2520
+ cursor: pointer
2521
+ }
2522
+
2523
+ .gjs-layer-item-left,
2524
+ .gjs-layer-item-right {
2525
+ display: flex;
2526
+ align-items: center;
2527
+ gap: var(--gjs-flex-item-gap)
2528
+ }
2529
+
2530
+ .gjs-layer-item-left {
2531
+ width: 100%
2532
+ }
2533
+
2534
+ .gjs-layer-hidden {
2535
+ opacity: .55;
2536
+ filter: alpha(opacity=55)
2537
+ }
2538
+
2539
+ .gjs-layer-vis {
2540
+ box-sizing: content-box;
2541
+ cursor: pointer;
2542
+ z-index: 1
2543
+ }
2544
+
2545
+ .gjs-layer-vis-on,
2546
+ .gjs-layer-vis-off {
2547
+ display: flex;
2548
+ width: 13px;
2549
+ height: 13px
2550
+ }
2551
+
2552
+ .gjs-layer-vis-off {
2553
+ display: none
2554
+ }
2555
+
2556
+ .gjs-layer-vis.gjs-layer-off .gjs-layer-vis-on {
2557
+ display: none
2558
+ }
2559
+
2560
+ .gjs-layer-vis.gjs-layer-off .gjs-layer-vis-off {
2561
+ display: flex
2562
+ }
2563
+
2564
+ .gjs-layer-caret {
2565
+ width: 15px;
2566
+ height: 15px;
2567
+ cursor: pointer;
2568
+ box-sizing: content-box;
2569
+ transform: rotate(90deg);
2570
+ display: flex;
2571
+ opacity: .7;
2572
+ filter: alpha(opacity=70)
2573
+ }
2574
+
2575
+ .gjs-layer-caret:hover {
2576
+ opacity: 1;
2577
+ filter: alpha(opacity=100)
2578
+ }
2579
+
2580
+ .gjs-layer.open>.gjs-layer-item .gjs-layer-caret {
2581
+ transform: rotate(180deg)
2582
+ }
2583
+
2584
+ .gjs-layer-title {
2585
+ padding: 0;
2586
+ display: flex;
2587
+ align-items: center;
2588
+ background-color: rgba(0, 0, 0, 0) !important;
2589
+ border-bottom: none
2590
+ }
2591
+
2592
+ .gjs-layer-title-inn {
2593
+ align-items: center;
2594
+ position: relative;
2595
+ display: flex;
2596
+ gap: var(--gjs-flex-item-gap)
2597
+ }
2598
+
2599
+ .gjs-layer-title-c {
2600
+ width: 100%
2601
+ }
2602
+
2603
+ .gjs-layer__icon {
2604
+ display: block;
2605
+ width: 100%;
2606
+ max-width: 15px;
2607
+ max-height: 15px;
2608
+ padding-left: 5px
2609
+ }
2610
+
2611
+ .gjs-layer__icon svg {
2612
+ fill: currentColor
2613
+ }
2614
+
2615
+ .gjs-layer-name {
2616
+ display: inline-block;
2617
+ box-sizing: content-box;
2618
+ overflow: hidden;
2619
+ white-space: nowrap;
2620
+ max-width: 170px;
2621
+ height: auto
2622
+ }
2623
+
2624
+ .gjs-layer-name--no-edit {
2625
+ text-overflow: ellipsis
2626
+ }
2627
+
2628
+ .gjs-layer>.gjs-layer-children {
2629
+ display: none
2630
+ }
2631
+
2632
+ .gjs-layer.open>.gjs-layer-children {
2633
+ display: block
2634
+ }
2635
+
2636
+ .gjs-layer-no-chld>.gjs-layer-title-inn>.gjs-layer-caret {
2637
+ visibility: hidden
2638
+ }
2639
+
2640
+ .gjs-layer-move {
2641
+ display: flex;
2642
+ width: 13px;
2643
+ height: 13px;
2644
+ box-sizing: content-box;
2645
+ cursor: move
2646
+ }
2647
+
2648
+ .gjs-layer.gjs-hovered .gjs-layer-item {
2649
+ background-color: var(--gjs-soft-light-color)
2650
+ }
2651
+
2652
+ .gjs-layer.gjs-selected .gjs-layer-item {
2653
+ background-color: var(--gjs-main-light-color)
2654
+ }
2655
+
2656
+ .gjs-layers {
2657
+ position: relative;
2658
+ height: 100%
2659
+ }
2660
+
2661
+ .gjs-layers #gjs-placeholder {
2662
+ width: 100%;
2663
+ position: absolute
2664
+ }
2665
+
2666
+ .gjs-layers #gjs-placeholder #gjs-plh-int {
2667
+ height: 100%;
2668
+ padding: 1px
2669
+ }
2670
+
2671
+ .gjs-layers #gjs-placeholder #gjs-plh-int.gjs-insert {
2672
+ background-color: var(--gjs-color-green)
2673
+ }
2674
+
2675
+ #gjs-clm-add-tag,
2676
+ .gjs-clm-tags-btn {
2677
+ background-color: hsla(0, 0%, 100%, .15);
2678
+ border-radius: 2px;
2679
+ padding: 3px;
2680
+ margin-right: 3px;
2681
+ border: 1px solid rgba(0, 0, 0, .15);
2682
+ width: 24px;
2683
+ height: 24px;
2684
+ box-sizing: border-box;
2685
+ cursor: pointer
2686
+ }
2687
+
2688
+ .gjs-clm-tags-btn svg {
2689
+ fill: currentColor;
2690
+ display: block
2691
+ }
2692
+
2693
+ .gjs-clm-header {
2694
+ display: flex;
2695
+ align-items: center;
2696
+ margin: 7px 0
2697
+ }
2698
+
2699
+ .gjs-clm-header-status {
2700
+ flex-shrink: 1;
2701
+ margin-left: auto
2702
+ }
2703
+
2704
+ .gjs-clm-tag {
2705
+ display: flex;
2706
+ overflow: hidden;
2707
+ align-items: center;
2708
+ border-radius: 3px;
2709
+ margin: 0 3px 3px 0;
2710
+ padding: 5px;
2711
+ cursor: default
2712
+ }
2713
+
2714
+ .gjs-clm-tag-status,
2715
+ .gjs-clm-tag-close {
2716
+ width: 12px;
2717
+ height: 12px;
2718
+ flex-shrink: 1
2719
+ }
2720
+
2721
+ .gjs-clm-tag-status svg,
2722
+ .gjs-clm-tag-close svg {
2723
+ vertical-align: middle;
2724
+ fill: currentColor
2725
+ }
2726
+
2727
+ .gjs-clm-sels-info {
2728
+ margin: 7px 0;
2729
+ text-align: left
2730
+ }
2731
+
2732
+ .gjs-clm-sel-id {
2733
+ font-size: .9em;
2734
+ opacity: .5;
2735
+ filter: alpha(opacity=50)
2736
+ }
2737
+
2738
+ .gjs-clm-label-sel {
2739
+ float: left;
2740
+ padding-right: 5px
2741
+ }
2742
+
2743
+ .gjs-clm-tags {
2744
+ font-size: var(--gjs-font-size);
2745
+ padding: 10px 5px
2746
+ }
2747
+
2748
+ .gjs-clm-tags #gjs-clm-sel {
2749
+ padding: 7px 0;
2750
+ float: left
2751
+ }
2752
+
2753
+ .gjs-clm-tags #gjs-clm-sel {
2754
+ font-style: italic;
2755
+ margin-left: 5px
2756
+ }
2757
+
2758
+ .gjs-clm-tags #gjs-clm-tags-field {
2759
+ clear: both;
2760
+ padding: 5px;
2761
+ margin-bottom: 5px;
2762
+ display: flex;
2763
+ flex-wrap: wrap
2764
+ }
2765
+
2766
+ .gjs-clm-tags #gjs-clm-tags-c {
2767
+ display: flex;
2768
+ flex-wrap: wrap;
2769
+ vertical-align: top;
2770
+ overflow: hidden
2771
+ }
2772
+
2773
+ .gjs-clm-tags #gjs-clm-new {
2774
+ color: var(--gjs-font-color);
2775
+ padding: var(--gjs-padding-elem-classmanager);
2776
+ display: none
2777
+ }
2778
+
2779
+ .gjs-clm-tags #gjs-clm-close {
2780
+ opacity: .85;
2781
+ filter: alpha(opacity=85);
2782
+ font-size: 20px;
2783
+ line-height: 0;
2784
+ cursor: pointer;
2785
+ color: hsla(0, 0%, 100%, .9)
2786
+ }
2787
+
2788
+ .gjs-clm-tags #gjs-clm-close:hover {
2789
+ opacity: 1;
2790
+ filter: alpha(opacity=100)
2791
+ }
2792
+
2793
+ .gjs-clm-tags #gjs-clm-checkbox {
2794
+ color: hsla(0, 0%, 100%, .9);
2795
+ vertical-align: middle;
2796
+ cursor: pointer;
2797
+ font-size: 9px
2798
+ }
2799
+
2800
+ .gjs-clm-tags #gjs-clm-tag-label {
2801
+ flex-grow: 1;
2802
+ text-overflow: ellipsis;
2803
+ overflow: hidden;
2804
+ padding: 0 3px;
2805
+ cursor: text
2806
+ }
2807
+
2808
+ .gjs-mdl-container {
2809
+ font-family: var(--gjs-main-font);
2810
+ overflow-y: auto;
2811
+ position: fixed;
2812
+ background-color: rgba(0, 0, 0, .5);
2813
+ display: flex;
2814
+ top: 0;
2815
+ left: 0;
2816
+ right: 0;
2817
+ bottom: 0;
2818
+ z-index: 100
2819
+ }
2820
+
2821
+ .gjs-mdl-dialog {
2822
+ text-shadow: -1px -1px 0 rgba(0, 0, 0, .05);
2823
+ animation: gjs-slide-down .215s;
2824
+ margin: auto;
2825
+ max-width: 850px;
2826
+ width: 90%;
2827
+ border-radius: 3px;
2828
+ font-weight: lighter;
2829
+ position: relative;
2830
+ z-index: 2
2831
+ }
2832
+
2833
+ .gjs-mdl-title {
2834
+ font-size: 1rem
2835
+ }
2836
+
2837
+ .gjs-mdl-btn-close {
2838
+ position: absolute;
2839
+ right: 15px;
2840
+ top: 5px
2841
+ }
2842
+
2843
+ .gjs-mdl-active .gjs-mdl-dialog {
2844
+ animation: gjs-mdl-slide-down .216s
2845
+ }
2846
+
2847
+ .gjs-mdl-header,
2848
+ .gjs-mdl-content {
2849
+ padding: 10px 15px;
2850
+ clear: both
2851
+ }
2852
+
2853
+ .gjs-mdl-header {
2854
+ position: relative;
2855
+ border-bottom: 1px solid var(--gjs-main-dark-color);
2856
+ padding: 15px 15px 7px
2857
+ }
2858
+
2859
+ .gjs-export-dl::after {
2860
+ content: "";
2861
+ clear: both;
2862
+ display: block;
2863
+ margin-bottom: 10px
2864
+ }
2865
+
2866
+ .gjs-dropzone {
2867
+ display: none;
2868
+ opacity: 0;
2869
+ position: absolute;
2870
+ top: 0;
2871
+ left: 0;
2872
+ z-index: 11;
2873
+ width: 100%;
2874
+ height: 100%;
2875
+ transition: opacity .25s;
2876
+ pointer-events: none
2877
+ }
2878
+
2879
+ .gjs-dropzone-active .gjs-dropzone {
2880
+ display: block;
2881
+ opacity: 1
2882
+ }
2883
+
2884
+ .gjs-am-assets {
2885
+ height: 290px;
2886
+ overflow: auto;
2887
+ clear: both;
2888
+ display: flex;
2889
+ flex-wrap: wrap;
2890
+ align-items: flex-start;
2891
+ align-content: flex-start
2892
+ }
2893
+
2894
+ .gjs-am-assets-header {
2895
+ padding: 5px
2896
+ }
2897
+
2898
+ .gjs-am-add-asset .gjs-am-add-field {
2899
+ width: 70%;
2900
+ float: left
2901
+ }
2902
+
2903
+ .gjs-am-add-asset button {
2904
+ width: 25%;
2905
+ float: right
2906
+ }
2907
+
2908
+ .gjs-am-preview-cont {
2909
+ position: relative;
2910
+ height: 70px;
2911
+ width: 30%;
2912
+ background-color: var(--gjs-main-color);
2913
+ border-radius: 2px;
2914
+ float: left;
2915
+ overflow: hidden
2916
+ }
2917
+
2918
+ .gjs-am-preview {
2919
+ position: absolute;
2920
+ background-position: center center;
2921
+ background-size: cover;
2922
+ background-repeat: no-repeat;
2923
+ height: 100%;
2924
+ width: 100%;
2925
+ z-index: 1
2926
+ }
2927
+
2928
+ .gjs-am-preview-bg {
2929
+ opacity: .5;
2930
+ filter: alpha(opacity=50);
2931
+ position: absolute;
2932
+ height: 100%;
2933
+ width: 100%;
2934
+ z-index: 0
2935
+ }
2936
+
2937
+ .gjs-am-dimensions {
2938
+ opacity: .5;
2939
+ filter: alpha(opacity=50);
2940
+ font-size: 10px
2941
+ }
2942
+
2943
+ .gjs-am-meta {
2944
+ width: 70%;
2945
+ float: left;
2946
+ font-size: 12px;
2947
+ padding: 5px 0 0 5px;
2948
+ box-sizing: border-box
2949
+ }
2950
+
2951
+ .gjs-am-meta>div {
2952
+ margin-bottom: 5px
2953
+ }
2954
+
2955
+ .gjs-am-close {
2956
+ cursor: pointer;
2957
+ position: absolute;
2958
+ right: 5px;
2959
+ top: 0;
2960
+ display: none
2961
+ }
2962
+
2963
+ .gjs-am-asset {
2964
+ border-bottom: 1px solid color-mix(in srgb, var(--gjs-main-dark-color), black 3%);
2965
+ padding: 5px;
2966
+ cursor: pointer;
2967
+ position: relative;
2968
+ box-sizing: border-box;
2969
+ width: 100%
2970
+ }
2971
+
2972
+ .gjs-am-asset:hover .gjs-am-close {
2973
+ display: block
2974
+ }
2975
+
2976
+ .gjs-am-highlight {
2977
+ background-color: var(--gjs-main-light-color)
2978
+ }
2979
+
2980
+ .gjs-am-assets-cont {
2981
+ background-color: var(--gjs-secondary-dark-color);
2982
+ border-radius: 3px;
2983
+ box-sizing: border-box;
2984
+ padding: 10px;
2985
+ width: 45%;
2986
+ float: right;
2987
+ height: 325px;
2988
+ overflow: hidden
2989
+ }
2990
+
2991
+ .gjs-am-file-uploader {
2992
+ width: 55%;
2993
+ float: left
2994
+ }
2995
+
2996
+ .gjs-am-file-uploader>form {
2997
+ background-color: var(--gjs-secondary-dark-color);
2998
+ border: 2px dashed;
2999
+ border-radius: 3px;
3000
+ position: relative;
3001
+ text-align: center;
3002
+ margin-bottom: 15px
3003
+ }
3004
+
3005
+ .gjs-am-file-uploader>form.gjs-am-hover {
3006
+ border: 2px solid var(--gjs-color-green);
3007
+ color: color-mix(in srgb, var(--gjs-color-green), white 5%)
3008
+ }
3009
+
3010
+ .gjs-am-file-uploader>form.gjs-am-disabled {
3011
+ border-color: red
3012
+ }
3013
+
3014
+ .gjs-am-file-uploader>form #gjs-am-uploadFile {
3015
+ opacity: 0;
3016
+ filter: alpha(opacity=0);
3017
+ padding: var(--gjs-upload-padding);
3018
+ width: 100%;
3019
+ box-sizing: border-box
3020
+ }
3021
+
3022
+ .gjs-am-file-uploader #gjs-am-title {
3023
+ position: absolute;
3024
+ padding: var(--gjs-upload-padding);
3025
+ width: 100%
3026
+ }
3027
+
3028
+ .gjs-cm-editor-c {
3029
+ float: left;
3030
+ box-sizing: border-box;
3031
+ width: 50%
3032
+ }
3033
+
3034
+ .gjs-cm-editor-c .CodeMirror {
3035
+ height: 450px
3036
+ }
3037
+
3038
+ .gjs-cm-editor {
3039
+ font-size: 12px
3040
+ }
3041
+
3042
+ .gjs-cm-editor#gjs-cm-htmlmixed {
3043
+ padding-right: 10px;
3044
+ border-right: 1px solid var(--gjs-main-dark-color)
3045
+ }
3046
+
3047
+ .gjs-cm-editor#gjs-cm-htmlmixed #gjs-cm-title {
3048
+ color: #a97d44
3049
+ }
3050
+
3051
+ .gjs-cm-editor#gjs-cm-css {
3052
+ padding-left: 10px
3053
+ }
3054
+
3055
+ .gjs-cm-editor#gjs-cm-css #gjs-cm-title {
3056
+ color: #ddca7e
3057
+ }
3058
+
3059
+ .gjs-cm-editor #gjs-cm-title {
3060
+ background-color: var(--gjs-main-dark-color);
3061
+ font-size: 12px;
3062
+ padding: 5px 10px 3px;
3063
+ text-align: right
3064
+ }
3065
+
3066
+ .gjs-rte-toolbar {
3067
+ position: absolute;
3068
+ z-index: 10
3069
+ }
3070
+
3071
+ .gjs-rte-toolbar-ui {
3072
+ border: 1px solid var(--gjs-main-dark-color);
3073
+ border-radius: 3px
3074
+ }
3075
+
3076
+ .gjs-rte-actionbar {
3077
+ display: flex
3078
+ }
3079
+
3080
+ .gjs-rte-action {
3081
+ display: flex;
3082
+ align-items: center;
3083
+ justify-content: center;
3084
+ padding: 5px;
3085
+ width: 25px;
3086
+ border-right: 1px solid var(--gjs-main-dark-color);
3087
+ text-align: center;
3088
+ cursor: pointer;
3089
+ outline: none
3090
+ }
3091
+
3092
+ .gjs-rte-action:last-child {
3093
+ border-right: none
3094
+ }
3095
+
3096
+ .gjs-rte-action:hover {
3097
+ background-color: var(--gjs-main-light-color)
3098
+ }
3099
+
3100
+ .gjs-rte-active {
3101
+ background-color: var(--gjs-main-light-color)
3102
+ }
3103
+
3104
+ .gjs-rte-disabled {
3105
+ color: var(--gjs-main-light-color);
3106
+ cursor: not-allowed
3107
+ }
3108
+
3109
+ .gjs-rte-disabled:hover {
3110
+ background-color: unset
3111
+ }
3112
+
3113
+ .sp-container {
3114
+ position: absolute;
3115
+ top: 0;
3116
+ left: 0;
3117
+ display: inline-block;
3118
+ z-index: 9999994;
3119
+ overflow: hidden
3120
+ }
3121
+
3122
+ .sp-container.sp-flat {
3123
+ position: relative
3124
+ }
3125
+
3126
+ .sp-container,
3127
+ .sp-container * {
3128
+ -webkit-box-sizing: content-box;
3129
+ -moz-box-sizing: content-box;
3130
+ box-sizing: content-box
3131
+ }
3132
+
3133
+ .sp-top {
3134
+ position: relative;
3135
+ width: 100%;
3136
+ display: inline-block
3137
+ }
3138
+
3139
+ .sp-top-inner {
3140
+ position: absolute;
3141
+ top: 0;
3142
+ left: 0;
3143
+ bottom: 0;
3144
+ right: 0
3145
+ }
3146
+
3147
+ .sp-color {
3148
+ position: absolute;
3149
+ top: 0;
3150
+ left: 0;
3151
+ bottom: 0;
3152
+ right: 20%
3153
+ }
3154
+
3155
+ .sp-hue {
3156
+ position: absolute;
3157
+ top: 0;
3158
+ right: 0;
3159
+ bottom: 0;
3160
+ left: 84%;
3161
+ height: 100%
3162
+ }
3163
+
3164
+ .sp-clear-enabled .sp-hue {
3165
+ top: 33px;
3166
+ height: 77.5%
3167
+ }
3168
+
3169
+ .sp-fill {
3170
+ padding-top: 80%
3171
+ }
3172
+
3173
+ .sp-sat,
3174
+ .sp-val {
3175
+ position: absolute;
3176
+ top: 0;
3177
+ left: 0;
3178
+ right: 0;
3179
+ bottom: 0
3180
+ }
3181
+
3182
+ .sp-alpha-enabled .sp-top {
3183
+ margin-bottom: 18px
3184
+ }
3185
+
3186
+ .sp-alpha-enabled .sp-alpha {
3187
+ display: block
3188
+ }
3189
+
3190
+ .sp-alpha-handle {
3191
+ position: absolute;
3192
+ top: -4px;
3193
+ bottom: -4px;
3194
+ width: 6px;
3195
+ left: 50%;
3196
+ cursor: pointer;
3197
+ border: 1px solid #000;
3198
+ background: #fff;
3199
+ opacity: .8
3200
+ }
3201
+
3202
+ .sp-alpha {
3203
+ display: none;
3204
+ position: absolute;
3205
+ bottom: -14px;
3206
+ right: 0;
3207
+ left: 0;
3208
+ height: 8px
3209
+ }
3210
+
3211
+ .sp-alpha-inner {
3212
+ border: solid 1px #333
3213
+ }
3214
+
3215
+ .sp-clear {
3216
+ display: none
3217
+ }
3218
+
3219
+ .sp-clear.sp-clear-display {
3220
+ background-position: center
3221
+ }
3222
+
3223
+ .sp-clear-enabled .sp-clear {
3224
+ display: block;
3225
+ position: absolute;
3226
+ top: 0px;
3227
+ right: 0;
3228
+ bottom: 0;
3229
+ left: 84%;
3230
+ height: 28px
3231
+ }
3232
+
3233
+ .sp-container,
3234
+ .sp-replacer,
3235
+ .sp-preview,
3236
+ .sp-dragger,
3237
+ .sp-slider,
3238
+ .sp-alpha,
3239
+ .sp-clear,
3240
+ .sp-alpha-handle,
3241
+ .sp-container.sp-dragging .sp-input,
3242
+ .sp-container button {
3243
+ -webkit-user-select: none;
3244
+ -moz-user-select: -moz-none;
3245
+ -o-user-select: none;
3246
+ user-select: none
3247
+ }
3248
+
3249
+ .sp-container.sp-input-disabled .sp-input-container {
3250
+ display: none
3251
+ }
3252
+
3253
+ .sp-container.sp-buttons-disabled .sp-button-container {
3254
+ display: none
3255
+ }
3256
+
3257
+ .sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
3258
+ display: none
3259
+ }
3260
+
3261
+ .sp-palette-only .sp-picker-container {
3262
+ display: none
3263
+ }
3264
+
3265
+ .sp-palette-disabled .sp-palette-container {
3266
+ display: none
3267
+ }
3268
+
3269
+ .sp-initial-disabled .sp-initial {
3270
+ display: none
3271
+ }
3272
+
3273
+ .sp-sat {
3274
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fff), to(rgba(204, 154, 129, 0)));
3275
+ background-image: -webkit-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
3276
+ background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
3277
+ background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
3278
+ background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
3279
+ background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
3280
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
3281
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr="#FFFFFFFF", endColorstr="#00CC9A81")
3282
+ }
3283
+
3284
+ .sp-val {
3285
+ background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
3286
+ background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
3287
+ background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
3288
+ background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
3289
+ background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
3290
+ background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
3291
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
3292
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00CC9A81", endColorstr="#FF000000")
3293
+ }
3294
+
3295
+ .sp-hue {
3296
+ background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
3297
+ background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
3298
+ background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
3299
+ background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
3300
+ background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
3301
+ background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)
3302
+ }
3303
+
3304
+ .sp-1 {
3305
+ height: 17%;
3306
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#ffff00")
3307
+ }
3308
+
3309
+ .sp-2 {
3310
+ height: 16%;
3311
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffff00", endColorstr="#00ff00")
3312
+ }
3313
+
3314
+ .sp-3 {
3315
+ height: 17%;
3316
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ff00", endColorstr="#00ffff")
3317
+ }
3318
+
3319
+ .sp-4 {
3320
+ height: 17%;
3321
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffff", endColorstr="#0000ff")
3322
+ }
3323
+
3324
+ .sp-5 {
3325
+ height: 16%;
3326
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0000ff", endColorstr="#ff00ff")
3327
+ }
3328
+
3329
+ .sp-6 {
3330
+ height: 17%;
3331
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff00ff", endColorstr="#ff0000")
3332
+ }
3333
+
3334
+ .sp-hidden {
3335
+ display: none !important
3336
+ }
3337
+
3338
+ .sp-cf:before,
3339
+ .sp-cf:after {
3340
+ content: "";
3341
+ display: table
3342
+ }
3343
+
3344
+ .sp-cf:after {
3345
+ clear: both
3346
+ }
3347
+
3348
+ @media(max-device-width: 480px) {
3349
+ .sp-color {
3350
+ right: 40%
3351
+ }
3352
+
3353
+ .sp-hue {
3354
+ left: 63%
3355
+ }
3356
+
3357
+ .sp-fill {
3358
+ padding-top: 60%
3359
+ }
3360
+ }
3361
+
3362
+ .sp-dragger {
3363
+ border-radius: 5px;
3364
+ height: 5px;
3365
+ width: 5px;
3366
+ border: 1px solid #fff;
3367
+ background: #000;
3368
+ cursor: pointer;
3369
+ position: absolute;
3370
+ top: 0;
3371
+ left: 0
3372
+ }
3373
+
3374
+ .sp-slider {
3375
+ position: absolute;
3376
+ top: 0;
3377
+ cursor: pointer;
3378
+ height: 3px;
3379
+ left: -1px;
3380
+ right: -1px;
3381
+ border: 1px solid #000;
3382
+ background: #fff;
3383
+ opacity: .8
3384
+ }
3385
+
3386
+ .sp-container {
3387
+ border-radius: 0;
3388
+ background-color: #ececec;
3389
+ border: solid 1px #f0c49b;
3390
+ padding: 0
3391
+ }
3392
+
3393
+ .sp-container,
3394
+ .sp-container button,
3395
+ .sp-container input,
3396
+ .sp-color,
3397
+ .sp-hue,
3398
+ .sp-clear {
3399
+ font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
3400
+ -webkit-box-sizing: border-box;
3401
+ -moz-box-sizing: border-box;
3402
+ -ms-box-sizing: border-box;
3403
+ box-sizing: border-box
3404
+ }
3405
+
3406
+ .sp-top {
3407
+ margin-bottom: 3px
3408
+ }
3409
+
3410
+ .sp-color,
3411
+ .sp-hue,
3412
+ .sp-clear {
3413
+ border: solid 1px #666
3414
+ }
3415
+
3416
+ .sp-input-container {
3417
+ float: right;
3418
+ width: 100px;
3419
+ margin-bottom: 4px
3420
+ }
3421
+
3422
+ .sp-initial-disabled .sp-input-container {
3423
+ width: 100%
3424
+ }
3425
+
3426
+ .sp-input {
3427
+ font-size: 12px !important;
3428
+ border: 1px inset;
3429
+ padding: 4px 5px;
3430
+ margin: 0;
3431
+ width: 100%;
3432
+ background: rgba(0, 0, 0, 0);
3433
+ border-radius: 3px;
3434
+ color: #222
3435
+ }
3436
+
3437
+ .sp-input:focus {
3438
+ border: 1px solid orange
3439
+ }
3440
+
3441
+ .sp-input.sp-validation-error {
3442
+ border: 1px solid red;
3443
+ background: #fdd
3444
+ }
3445
+
3446
+ .sp-picker-container,
3447
+ .sp-palette-container {
3448
+ float: left;
3449
+ position: relative;
3450
+ padding: 10px;
3451
+ padding-bottom: 300px;
3452
+ margin-bottom: -290px
3453
+ }
3454
+
3455
+ .sp-picker-container {
3456
+ width: 172px;
3457
+ border-left: solid 1px #fff
3458
+ }
3459
+
3460
+ .sp-palette-container {
3461
+ border-right: solid 1px #ccc
3462
+ }
3463
+
3464
+ .sp-palette-only .sp-palette-container {
3465
+ border: 0
3466
+ }
3467
+
3468
+ .sp-palette .sp-thumb-el {
3469
+ display: block;
3470
+ position: relative;
3471
+ float: left;
3472
+ width: 24px;
3473
+ height: 15px;
3474
+ margin: 3px;
3475
+ cursor: pointer;
3476
+ border: solid 2px rgba(0, 0, 0, 0)
3477
+ }
3478
+
3479
+ .sp-palette .sp-thumb-el:hover,
3480
+ .sp-palette .sp-thumb-el.sp-thumb-active {
3481
+ border-color: orange
3482
+ }
3483
+
3484
+ .sp-thumb-el {
3485
+ position: relative
3486
+ }
3487
+
3488
+ .sp-initial {
3489
+ float: left;
3490
+ border: solid 1px #333
3491
+ }
3492
+
3493
+ .sp-initial span {
3494
+ width: 30px;
3495
+ height: 25px;
3496
+ border: none;
3497
+ display: block;
3498
+ float: left;
3499
+ margin: 0
3500
+ }
3501
+
3502
+ .sp-initial .sp-clear-display {
3503
+ background-position: center
3504
+ }
3505
+
3506
+ .sp-palette-button-container,
3507
+ .sp-button-container {
3508
+ float: right
3509
+ }
3510
+
3511
+ .sp-replacer {
3512
+ margin: 0;
3513
+ overflow: hidden;
3514
+ cursor: pointer;
3515
+ padding: 4px;
3516
+ display: inline-block;
3517
+ border: solid 1px #91765d;
3518
+ background: #eee;
3519
+ color: #333;
3520
+ vertical-align: middle
3521
+ }
3522
+
3523
+ .sp-replacer:hover,
3524
+ .sp-replacer.sp-active {
3525
+ border-color: #f0c49b;
3526
+ color: #111
3527
+ }
3528
+
3529
+ .sp-replacer.sp-disabled {
3530
+ cursor: default;
3531
+ border-color: silver;
3532
+ color: silver
3533
+ }
3534
+
3535
+ .sp-dd {
3536
+ padding: 2px 0;
3537
+ height: 16px;
3538
+ line-height: 16px;
3539
+ float: left;
3540
+ font-size: 10px
3541
+ }
3542
+
3543
+ .sp-preview {
3544
+ position: relative;
3545
+ width: 25px;
3546
+ height: 20px;
3547
+ border: solid 1px #222;
3548
+ margin-right: 5px;
3549
+ float: left;
3550
+ z-index: 0
3551
+ }
3552
+
3553
+ .sp-palette {
3554
+ max-width: 220px
3555
+ }
3556
+
3557
+ .sp-palette .sp-thumb-el {
3558
+ width: 16px;
3559
+ height: 16px;
3560
+ margin: 2px 1px;
3561
+ border: solid 1px #d0d0d0
3562
+ }
3563
+
3564
+ .sp-container {
3565
+ padding-bottom: 0
3566
+ }
3567
+
3568
+ .sp-container button {
3569
+ background-color: #eee;
3570
+ background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
3571
+ background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
3572
+ background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
3573
+ background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
3574
+ background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
3575
+ border: 1px solid #ccc;
3576
+ border-bottom: 1px solid #bbb;
3577
+ border-radius: 3px;
3578
+ color: #333;
3579
+ font-size: 14px;
3580
+ line-height: 1;
3581
+ padding: 5px 4px;
3582
+ text-align: center;
3583
+ text-shadow: 0 1px 0 #eee;
3584
+ vertical-align: middle
3585
+ }
3586
+
3587
+ .sp-container button:hover {
3588
+ background-color: #ddd;
3589
+ background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
3590
+ background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
3591
+ background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
3592
+ background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
3593
+ background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
3594
+ border: 1px solid #bbb;
3595
+ border-bottom: 1px solid #999;
3596
+ cursor: pointer;
3597
+ text-shadow: 0 1px 0 #ddd
3598
+ }
3599
+
3600
+ .sp-container button:active {
3601
+ border: 1px solid #aaa;
3602
+ border-bottom: 1px solid #888;
3603
+ -webkit-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
3604
+ -moz-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
3605
+ -ms-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
3606
+ -o-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
3607
+ box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee
3608
+ }
3609
+
3610
+ .sp-cancel {
3611
+ font-size: 11px;
3612
+ color: #d93f3f !important;
3613
+ margin: 0;
3614
+ padding: 2px;
3615
+ margin-right: 5px;
3616
+ vertical-align: middle;
3617
+ text-decoration: none
3618
+ }
3619
+
3620
+ .sp-cancel:hover {
3621
+ color: #d93f3f !important;
3622
+ text-decoration: underline
3623
+ }
3624
+
3625
+ .sp-palette span:hover,
3626
+ .sp-palette span.sp-thumb-active {
3627
+ border-color: #000
3628
+ }
3629
+
3630
+ .sp-preview,
3631
+ .sp-alpha,
3632
+ .sp-thumb-el {
3633
+ position: relative;
3634
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
3635
+ }
3636
+
3637
+ .sp-preview-inner,
3638
+ .sp-alpha-inner,
3639
+ .sp-thumb-inner {
3640
+ display: block;
3641
+ position: absolute;
3642
+ top: 0;
3643
+ left: 0;
3644
+ bottom: 0;
3645
+ right: 0
3646
+ }
3647
+
3648
+ .sp-palette .sp-thumb-inner {
3649
+ background-position: 50% 50%;
3650
+ background-repeat: no-repeat
3651
+ }
3652
+
3653
+ .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
3654
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=)
3655
+ }
3656
+
3657
+ .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
3658
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=)
3659
+ }
3660
+
3661
+ .sp-clear-display {
3662
+ background-repeat: no-repeat;
3663
+ background-position: center;
3664
+ background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==)
3665
+ }
3666
+
3667
+ .gjs-editor-sp {
3668
+ border: 1px solid var(--gjs-main-dark-color);
3669
+ box-shadow: 0 0 7px var(--gjs-main-dark-color);
3670
+ border-radius: 3px
3671
+ }
3672
+
3673
+ .gjs-editor-sp .sp-hue,
3674
+ .gjs-editor-sp .sp-slider {
3675
+ cursor: row-resize
3676
+ }
3677
+
3678
+ .gjs-editor-sp .sp-color,
3679
+ .gjs-editor-sp .sp-dragger {
3680
+ cursor: crosshair
3681
+ }
3682
+
3683
+ .gjs-editor-sp .sp-alpha-inner,
3684
+ .gjs-editor-sp .sp-alpha-handle {
3685
+ cursor: col-resize
3686
+ }
3687
+
3688
+ .gjs-editor-sp .sp-hue {
3689
+ left: 90%
3690
+ }
3691
+
3692
+ .gjs-editor-sp .sp-color {
3693
+ right: 15%
3694
+ }
3695
+
3696
+ .gjs-editor-sp .sp-picker-container {
3697
+ border: none
3698
+ }
3699
+
3700
+ .gjs-editor-sp .colpick_dark .colpick_color {
3701
+ outline: 1px solid var(--gjs-main-dark-color)
3702
+ }
3703
+
3704
+ .gjs-editor-sp .sp-cancel,
3705
+ .gjs-editor-sp .sp-cancel:hover {
3706
+ bottom: -8px;
3707
+ color: #777 !important;
3708
+ font-size: 25px;
3709
+ left: 0;
3710
+ position: absolute;
3711
+ text-decoration: none
3712
+ }
3713
+
3714
+ .gjs-editor-sp .sp-alpha-handle {
3715
+ background-color: #ccc;
3716
+ border: 1px solid #555;
3717
+ width: 4px
3718
+ }
3719
+
3720
+ .gjs-editor-sp .sp-color,
3721
+ .gjs-editor-sp .sp-hue {
3722
+ border: 1px solid #333
3723
+ }
3724
+
3725
+ .gjs-editor-sp .sp-slider {
3726
+ background-color: #ccc;
3727
+ border: 1px solid #555;
3728
+ height: 3px;
3729
+ left: -4px;
3730
+ width: 22px
3731
+ }
3732
+
3733
+ .gjs-editor-sp .sp-dragger {
3734
+ background: rgba(0, 0, 0, 0);
3735
+ box-shadow: 0 0 0 1px #111
3736
+ }
3737
+
3738
+ .gjs-editor-sp .sp-button-container {
3739
+ float: none;
3740
+ width: 100%;
3741
+ position: relative;
3742
+ text-align: right
3743
+ }
3744
+
3745
+ .gjs-editor-sp .sp-button-container .sp-choose,
3746
+ .gjs-editor-sp .sp-button-container .sp-choose:hover,
3747
+ .gjs-editor-sp .sp-button-container .sp-choose:active {
3748
+ background: var(--gjs-main-dark-color);
3749
+ border-color: var(--gjs-main-dark-color);
3750
+ color: var(--gjs-font-color);
3751
+ text-shadow: none;
3752
+ box-shadow: none;
3753
+ padding: 3px 5px
3754
+ }
3755
+
3756
+ .gjs-editor-sp .sp-palette-container {
3757
+ border: none;
3758
+ float: none;
3759
+ margin: 0;
3760
+ padding: 5px 10px 0
3761
+ }
3762
+
3763
+ .gjs-editor-sp .sp-palette .sp-thumb-el,
3764
+ .gjs-editor-sp .sp-palette .sp-thumb-el:hover {
3765
+ border: 1px solid rgba(0, 0, 0, .9)
3766
+ }
3767
+
3768
+ .gjs-editor-sp .sp-palette .sp-thumb-el:hover,
3769
+ .gjs-editor-sp .sp-palette .sp-thumb-el.sp-thumb-active {
3770
+ border-color: rgba(0, 0, 0, .9)
3771
+ }
3772
+
3773
+ .gjs-one-bg {
3774
+ background-color: var(--gjs-primary-color)
3775
+ }
3776
+
3777
+ .gjs-one-color {
3778
+ color: var(--gjs-primary-color)
3779
+ }
3780
+
3781
+ .gjs-one-color-h:hover {
3782
+ color: var(--gjs-primary-color)
3783
+ }
3784
+
3785
+ .gjs-two-bg {
3786
+ background-color: var(--gjs-secondary-color)
3787
+ }
3788
+
3789
+ .gjs-two-color {
3790
+ color: var(--gjs-secondary-color)
3791
+ }
3792
+
3793
+ .gjs-two-color-h:hover {
3794
+ color: var(--gjs-secondary-color)
3795
+ }
3796
+
3797
+ .gjs-three-bg {
3798
+ background-color: var(--gjs-tertiary-color)
3799
+ }
3800
+
3801
+ .gjs-three-color {
3802
+ color: var(--gjs-tertiary-color)
3803
+ }
3804
+
3805
+ .gjs-three-color-h:hover {
3806
+ color: var(--gjs-tertiary-color)
3807
+ }
3808
+
3809
+ .gjs-four-bg {
3810
+ background-color: var(--gjs-quaternary-color)
3811
+ }
3812
+
3813
+ .gjs-four-color {
3814
+ color: var(--gjs-quaternary-color)
3815
+ }
3816
+
3817
+ .gjs-four-color-h:hover {
3818
+ color: var(--gjs-quaternary-color)
3819
+ }
3820
+
3821
+ .gjs-danger-bg {
3822
+ background-color: var(--gjs-color-red)
3823
+ }
3824
+
3825
+ .gjs-danger-color {
3826
+ color: var(--gjs-color-red)
3827
+ }
3828
+
3829
+ .gjs-danger-color-h:hover {
3830
+ color: var(--gjs-color-red)
3831
+ }
3832
+
3833
+ .gjs-bdrag {
3834
+ pointer-events: none !important;
3835
+ position: absolute !important;
3836
+ z-index: 10 !important;
3837
+ width: auto
3838
+ }
3839
+
3840
+ .gjs-drag-helper {
3841
+ background-color: var(--gjs-color-blue) !important;
3842
+ pointer-events: none !important;
3843
+ position: absolute !important;
3844
+ z-index: 10 !important;
3845
+ transform: scale(0.3) !important;
3846
+ transform-origin: top left !important;
3847
+ -webkit-transform-origin: top left !important;
3848
+ margin: 15px !important;
3849
+ transition: none !important;
3850
+ outline: none !important
3851
+ }
3852
+
3853
+ .gjs-grabbing,
3854
+ .gjs-grabbing * {
3855
+ cursor: grabbing !important;
3856
+ cursor: -webkit-grabbing !important
3857
+ }
3858
+
3859
+ .gjs-grabbing {
3860
+ overflow: hidden
3861
+ }
3862
+
3863
+ .gjs-off-prv {
3864
+ position: relative;
3865
+ z-index: 10;
3866
+ padding: 5px;
3867
+ cursor: pointer
3868
+ }
3869
+
3870
+ .gjs-editor-cont ::-webkit-scrollbar-track {
3871
+ background: var(--gjs-secondary-dark-color)
3872
+ }
3873
+
3874
+ .gjs-editor-cont ::-webkit-scrollbar-thumb {
3875
+ background-color: hsla(0, 0%, 100%, .2)
3876
+ }
3877
+
3878
+ .gjs-editor-cont ::-webkit-scrollbar {
3879
+ width: 8px
3880
+ }
3881
+
3882
+ .gjs-no-touch-actions {
3883
+ touch-action: none
3884
+ }
3885
+
3886
+ .gjs-disabled {
3887
+ -moz-user-select: none;
3888
+ -khtml-user-select: none;
3889
+ -webkit-user-select: none;
3890
+ -ms-user-select: none;
3891
+ -o-user-select: none;
3892
+ user-select: none;
3893
+ opacity: .5;
3894
+ filter: alpha(opacity=50)
3895
+ }
3896
+
3897
+ .gjs-editor {
3898
+ font-family: var(--gjs-main-font);
3899
+ font-size: var(--gjs-font-size);
3900
+ position: relative;
3901
+ box-sizing: border-box;
3902
+ height: 100%
3903
+ }
3904
+
3905
+ .gjs-freezed,
3906
+ .gjs-freezed {
3907
+ opacity: .5;
3908
+ filter: alpha(opacity=50);
3909
+ pointer-events: none
3910
+ }
3911
+
3912
+ .gjs-hidden {
3913
+ display: none
3914
+ }
3915
+
3916
+ @keyframes gjs-slide-down {
3917
+ 0% {
3918
+ transform: translate(0, -3rem);
3919
+ opacity: 0
3920
+ }
3921
+
3922
+ 100% {
3923
+ transform: translate(0, 0);
3924
+ opacity: 1
3925
+ }
3926
+ }
3927
+
3928
+ @keyframes gjs-slide-up {
3929
+ 0% {
3930
+ transform: translate(0, 0);
3931
+ opacity: 1
3932
+ }
3933
+
3934
+ 100% {
3935
+ transform: translate(0, -3rem);
3936
+ opacity: 0
3937
+ }
3938
+ }
3939
+
3940
+ .cm-s-hopscotch span.cm-error {
3941
+ color: #fff
3942
+ }
3943
+
3944
+
3945
+
7
3946
 
8
- matcha-page-builder {
9
- display: block;
10
- height: 1000px;
11
- min-height: 800px;
12
- width: 100%;
13
3947
  }
14
3948
 
15
3949
  .matcha-page-builder {
@@ -41,38 +3975,123 @@
41
3975
  }
42
3976
  }
43
3977
 
44
- // Variáveis CSS do GrapesJS
45
- :root {
46
- --gjs-main-color: #00970d;
47
- --gjs-primary-color: #afadb8;
48
- --gjs-secondary-color: #ddd;
49
- --gjs-tertiary-color: #804f7b;
50
- --gjs-quaternary-color: #d278c9;
51
- --gjs-font-color: #ddd;
52
- --gjs-font-color-active: #f8f8f8;
53
- --gjs-main-dark-color: rgba(0, 0, 0, 0.2);
54
- --gjs-secondary-dark-color: rgba(0, 0, 0, 0.1);
55
- --gjs-main-light-color: rgba(255, 255, 255, 0.1);
56
- --gjs-secondary-light-color: rgba(255, 255, 255, 0.7);
57
- --gjs-soft-light-color: rgba(255, 255, 255, 0.015);
58
- --gjs-color-blue: #3b97e3;
59
- --gjs-color-red: #dd3636;
60
- --gjs-color-yellow: #ffca6f;
61
- --gjs-color-green: #62c462;
62
- --gjs-left-width: 15%;
63
- --gjs-color-highlight: #71b7f1;
64
- --gjs-color-warn: #ffca6f;
65
- --gjs-handle-margin: -5px;
66
- --gjs-light-border: rgba(255, 255, 255, 0.05);
67
- --gjs-arrow-color: rgba(255, 255, 255, 0.7);
68
- --gjs-dark-text-shadow: rgba(0, 0, 0, 0.2);
69
- --gjs-color-input-padding: 22px;
70
- --gjs-input-padding: 5px;
71
- --gjs-animation-duration: 0.2s;
72
- --gjs-main-font: Helvetica, sans-serif;
73
- --gjs-font-size: 0.75rem;
74
- --gjs-placeholder-background-color: var(--gjs-color-green);
75
- --gjs-canvas-top: 40px;
3978
+ // Layout principal dos painéis GrapesJS
3979
+ .gjs-pn-views-layer,
3980
+ .gjs-cv-canvas {
3981
+ transition: width 0.3s ease-in-out;
3982
+ }
3983
+
3984
+ .gjs-pn-buttons {
3985
+ align-items: center;
3986
+ display: flex;
3987
+ justify-content: start;
3988
+ }
3989
+
3990
+ .gjs-pn-views-layer {
3991
+ box-shadow: initial;
3992
+ border-top: 2px solid rgba(0, 0, 0, 0.2);
3993
+ top: 40px;
3994
+ padding-top: 0;
3995
+ height: calc(100% - 40px);
3996
+ z-index: 4;
3997
+ left: 0;
3998
+ width: 15%;
3999
+ overflow: auto;
4000
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
4001
+ }
4002
+
4003
+ .gjs-pn-views-layers {
4004
+ left: 0;
4005
+ right: unset;
4006
+ }
4007
+
4008
+ .gjs-pn-devices-c {
4009
+ left: 45%;
4010
+ }
4011
+
4012
+ .gjs-pn-opcoes,
4013
+ #gjs-breadcrumbs {
4014
+ left: 15%;
4015
+ }
4016
+
4017
+ .gjs-pn-opcoes.fechado,
4018
+ #gjs-breadcrumbs.fechado {
4019
+ left: 0;
4020
+ }
4021
+
4022
+ .gjs-cv-canvas.layer-aberto {
4023
+ width: 70%;
4024
+ left: 15%;
4025
+ }
4026
+
4027
+ .gjs-cv-canvas.layer-aberto.code-editor-aberto {
4028
+ width: 50%;
4029
+ }
4030
+
4031
+ .gjs-cv-canvas.code-editor-aberto {
4032
+ width: 65%;
4033
+ }
4034
+
4035
+ .gjs-pn-views-container.code-editor-aberto {
4036
+ width: 35%;
4037
+ }
4038
+
4039
+ // Cores utilitárias do GrapesJS
4040
+ .gjs-bg-main,
4041
+ .gjs-off-prv,
4042
+ .gjs-sm-colorp-c {
4043
+ background-color: var(--gjs-main-color);
4044
+ }
4045
+
4046
+ .gjs-color-main,
4047
+ .gjs-off-prv,
4048
+ .gjs-sm-stack #gjs-sm-add {
4049
+ color: var(--gjs-font-color);
4050
+ fill: var(--gjs-font-color);
4051
+ }
4052
+
4053
+ .gjs-color-active {
4054
+ color: var(--gjs-font-color-active);
4055
+ fill: var(--gjs-font-color-active);
4056
+ }
4057
+
4058
+ .gjs-color-warn {
4059
+ color: var(--gjs-color-warn);
4060
+ fill: var(--gjs-color-warn);
4061
+ }
4062
+ }
4063
+
4064
+ matcha-page-builder {
4065
+ display: block;
4066
+ /* Wrapper do componente Angular */
4067
+
4068
+ .matcha-page-builder {
4069
+ display: flex;
4070
+ flex-direction: column;
4071
+ height: 100%;
4072
+ width: 100%;
4073
+
4074
+ .editor-shell {
4075
+ flex: 1;
4076
+ overflow: hidden;
4077
+ position: relative;
4078
+
4079
+ [id^="gjs-"] {
4080
+ height: 100%;
4081
+ }
4082
+ }
4083
+
4084
+ .editor-controls {
4085
+ padding: 16px;
4086
+ background: #f5f5f5;
4087
+ border-top: 1px solid #ddd;
4088
+ display: flex;
4089
+ justify-content: flex-end;
4090
+
4091
+ button {
4092
+ min-width: 80px;
4093
+ }
4094
+ }
76
4095
  }
77
4096
 
78
4097
  // Layout principal dos painéis GrapesJS
@@ -164,9 +4183,4 @@
164
4183
  color: var(--gjs-color-highlight);
165
4184
  fill: var(--gjs-color-highlight);
166
4185
  }
167
-
168
- // Wrapper do componente Angular
169
- matcha-page-builder {
170
- display: block;
171
- }
172
4186
  }