ag-design 1.0.32 → 1.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/webbuilder.css DELETED
@@ -1,2074 +0,0 @@
1
- .content-settings { position: fixed; top: 11px; right: 12px; width: 320px; height: 92vh; background-color: var(--c-99); color: #e0e0e0; padding: 0; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; z-index: 1000; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3); font-family: 'Inter', system-ui, -apple-system, sans-serif; border-radius: var(--b-r-5); }
2
- .content-settings::-webkit-scrollbar { width: 2px; }
3
- .content-settings::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }
4
- .content-settings .content-settings-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background-color: var(--c-3); border-bottom: 1px solid var(--c-6); position: sticky; top: 0; z-index: 1001; }
5
- .content-settings .content-settings-bar p { margin: 0; color: var(--c-100); font-size: var(--aw-f-s-1); font-weight: var(--aw-f-w-6); letter-spacing: 1px; text-transform: uppercase; }
6
- .content-settings .content-settings-bar button { padding: 0px; border: none; background-color: transparent; color: #777; border-radius: 4px; cursor: pointer; transition: color 0.2s; font-size: 18px; margin: 0; }
7
- .content-settings .content-settings-bar button:hover { color: #fff; }
8
- .content-settings .content-settings-bar button > i[class^=aga-] {
9
- vertical-align: middle;
10
- color: var(--c-100);
11
- font-size: var(--aw-f-s-5);
12
- }
13
- .content-settings-action { position: sticky; bottom: 0; background: #333; padding: 8px; display: flex; justify-content: flex-end; border-top: 1px solid rgba(0, 0, 0, 0.04); }
14
- .box-input-with-unit { display: flex; align-items: center; gap: 4px; }
15
- .box-input-with-unit input { flex: 1; min-width: 0; padding: 4px; }
16
- .box-input-with-unit select { width: 45px; flex-shrink: 0; font-size: 12px; padding: 2px; }
17
- .settings-group-header { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; padding: 12px 10px 12px 13px; margin: 0; cursor: pointer; font-size: 13px; font-weight: var(--aw-f-w-6); letter-spacing: 0.5px; text-transform: capitalize; color: var(--c-100); border-top: none; border-bottom: 1px solid var(--c-6); transition: all 0.2s ease; user-select: none; box-sizing: border-box; }
18
- .settings-group-header:hover { background: #2d2d2d; color: #fff; }
19
- .settings-group.open .settings-group-header { color: #fff; border-bottom-color: transparent; }
20
- .group-toggle-icon { font-size: 14px; color: #777; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: rotate(-90deg); }
21
- .settings-group.open .group-toggle-icon { transform: rotate(0deg); color: #fff; }
22
- .settings-group-content { padding: 16px 0; background: none; }
23
- .settings-group {
24
- margin-bottom: 0;
25
- }
26
- .settings-field {
27
- display: block;
28
- padding: 0 11px 0 13px;
29
- margin-bottom: 7px;
30
- margin-top: 7px;
31
- width: 50%;
32
- float: left;
33
- }
34
- .settings-field.vertical:has([placeholder="No file uploaded"]):has(img) {
35
- width: 100%;
36
- }
37
- .settings-field>label {
38
- flex: 0 0 120px;
39
- font-size: var(--aw-f-s-0);
40
- color: var(--c-7);
41
- text-align: left;
42
- padding-right: 0;
43
- box-sizing: border-box;
44
- text-overflow: unset;
45
- white-space: normal;
46
- display: block;
47
- margin-bottom: 2px;
48
- }
49
-
50
- .group-advanced .settings-field {
51
- flex-direction: column !important;
52
- align-items: stretch;
53
- gap: 8px;
54
- width: 100%;
55
- }
56
-
57
- .group-advanced .settings-field>label,
58
- .settings-field.vertical>label {
59
- flex: 0 0 auto;
60
- width: 100%;
61
- padding-right: 0;
62
- color: #eee;
63
- text-align: left;
64
- }
65
-
66
- .settings-field input[type="text"],
67
- .settings-field input[type="number"],
68
- .settings-field select,
69
- .settings-field textarea {
70
- flex: 1;
71
- width: 100%;
72
- padding: 5px 10px;
73
- border: 1px solid #444;
74
- background-color: #2a2a2a;
75
- color: #fff;
76
- border-radius: 4px;
77
- box-sizing: border-box;
78
- font-size: 13px;
79
- transition: border-color 0.2s, box-shadow 0.2s;
80
- }
81
-
82
- .settings-field input:focus,
83
- .settings-field select:focus,
84
- .settings-field textarea:focus {
85
- border-color: #555;
86
- outline: none;
87
- background-color: #333;
88
- }
89
-
90
- .settings-field textarea {
91
- min-height: 70px;
92
- resize: vertical;
93
- font-family: inherit;
94
- }
95
-
96
- .settings-field input[type="color"] {
97
- flex: 0 0 40px;
98
- height: 30px;
99
- padding: 0;
100
- border: none;
101
- background: transparent;
102
- cursor: pointer;
103
- }
104
-
105
- .settings-field input[type="range"] {
106
- flex: 1;
107
- margin-top: 8px;
108
- cursor: pointer;
109
- }
110
-
111
-
112
-
113
- /* Box and XYZ Field Grids */
114
-
115
-
116
-
117
-
118
- .content-settings .box-field-grid {
119
- display: grid;
120
- grid-template-areas:
121
- ". top ."
122
- "left center right"
123
- ". bottom .";
124
- gap: 8px;
125
- justify-content: center;
126
- align-items: center;
127
- }
128
-
129
- .content-settings .box-input-item {
130
- display: flex;
131
- align-items: center;
132
- background: var(--c-3);
133
- border: none;
134
- border-radius: var(--b-r-1);
135
- padding: 2px 4px;
136
- }
137
-
138
- .content-settings .box-label-short {
139
- font-size: 10px;
140
- color: #888;
141
- margin-right: 4px;
142
- font-weight: var(--f-w-7);
143
- user-select: none;
144
- flex: 1;
145
- text-align: center;
146
- }
147
-
148
- .content-settings .box-input-item input { border: none !important; padding: 2px 0 !important; background: transparent !important; width: 100%; text-align: center; font-size: 12px !important; outline: none; }
149
- .content-settings .box-input-item input::-webkit-inner-spin-button,
150
- .content-settings .box-input-item input::-webkit-outer-spin-button { .unit-field-wrapper, .box-field-wrapper { display: grid; align-items: center; gap: 8px; /* grid-template-columns: repeat(2, 1fr); */ } }
151
-
152
- /* unit selecter */
153
-
154
- .content-settings .unit-selector-mini {
155
- background: #333;
156
- color: #999;
157
- border: none;
158
- border-left: 1px solid #444;
159
- height: 100%;
160
- padding: 0 4px;
161
- font-size: 11px;
162
- cursor: pointer;
163
- outline: none;
164
- transition: all 0.2s;
165
- }
166
- .content-settings .unit-selector-mini input {
167
- background: #333;
168
- color: #999;
169
- border: none;
170
- border-left: 1px solid #444;
171
- height: 100%;
172
- padding: 10px 4px;
173
- font-size: 11px;
174
- cursor: pointer;
175
- outline: none;
176
- transition: all 0.2s;
177
- }
178
- .content-settings .unit-selector-mini:hover {
179
- background: #3a3a3a;
180
- color: var(--c-100);
181
- }
182
-
183
-
184
- /* Theme selector */
185
-
186
-
187
- .content-settings .theme-field {
188
- display: flex;
189
- flex-flow: row wrap;
190
- padding: 8px 0;
191
- justify-content: center;
192
- }
193
-
194
- .content-settings .theme-field label {
195
- flex: none;
196
- display: block;
197
- padding: 0;
198
- width: 100%;
199
- margin-bottom: 8px;
200
- font-size: 14px;
201
- width: 16px;
202
- height: 16px;
203
- margin: 4px;
204
- border-radius: 50%;
205
- box-sizing: initial;
206
- position: relative;
207
- }
208
-
209
- .content-settings .theme-field label::before {
210
- content: "";
211
- position: absolute;
212
- left: -2px;
213
- top: -2px;
214
- width: 100%;
215
- height: 100%;
216
- background: none;
217
- border-radius: 50%;
218
- border: 2px dotted rgba(255, 255, 255, 0);
219
- z-index: -1;
220
- }
221
-
222
- .content-settings .theme-field label.active::before {
223
- border: 2px dotted rgba(255, 255, 255, 1);
224
- }
225
-
226
- .content-settings .theme-field label:hover::before {
227
- border: 2px dotted rgba(255, 255, 255, 0.64);
228
- }
229
-
230
- .content-settings .theme-field label.custom::after {
231
- content: "";
232
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -0.5 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' class='si-glyph si-glyph-color-picker' fill='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3E1150%3C/title%3E%3Cdefs%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1.000000, 0.000000)' fill='%23ffffff'%3E%3Cpath d='M15.308,4.434 C16.22,3.523 16.118,1.939 15.079,0.9 C14.038,-0.139 12.455,-0.242 11.545,0.67 L10.364,1.853 L14.128,5.617 L15.308,4.434 L15.308,4.434 Z' class='si-glyph-fill'%3E%3C/path%3E%3Cpath d='M5.468,14.276 L11.615,8.128 L12.387,8.9 L13.971,7.314 L8.662,2.005 L7.077,3.589 L7.85,4.362 L1.702,10.508 L0.02,15.201 L0.774,15.955 L5.468,14.276 L5.468,14.276 Z M8.916,5.428 L10.551,7.064 L4.289,13.324 L1.695,14.284 L2.654,11.688 L8.916,5.428 L8.916,5.428 Z' class='si-glyph-fill'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
233
- background-size: 10px;
234
- background-repeat: no-repeat;
235
- background-position: 3px 2px;
236
- position: absolute;
237
- left: 0;
238
- top: 0;
239
- width: 100%;
240
- height: 100%;
241
- z-index: 999;
242
- pointer-events: none;
243
- }
244
-
245
- .content-settings .theme-field label input {
246
- border-radius: 50%;
247
- width: 100%;
248
- height: 100%;
249
- border: none;
250
- outline: none;
251
- box-shadow: none;
252
- transform: translate(0px, 0px);
253
- }
254
-
255
- .content-settings .theme-field label input[type="color"]::-webkit-color-swatch-wrapper {
256
- padding: 0;
257
- }
258
-
259
- .content-settings .theme-field label input[type="color"]::-webkit-color-swatch {
260
- border: none;
261
- }
262
-
263
- .content-settings .theme-field label input[type="color"]::-moz-color-swatch {
264
- border: none;
265
- }
266
-
267
-
268
- .content-settings .theme-field-nocolor{ width:'16px'; height: '16px'; border-radius: "50%"; border: "1px solid #999"; position: "relative"; cursor: "pointer"; display: "inline-flex"; align-items: "center"; justify-content: "center"; }
269
-
270
- /* TemplateStyleSelector */
271
-
272
-
273
- .content-settings .templatestyle-field-wrapper {
274
- display: block;
275
- border: none;
276
- border-radius: 4px;
277
- background: var(--c-3);
278
- overflow: hidden;
279
- height: 30px;
280
- width: auto;
281
- }
282
-
283
- .content-settings .templatestyle-field-wrapper button {
284
- background: #222;
285
- color: #fff;
286
- cursor: pointer;
287
- height: 100%;
288
- padding: 0;
289
- border: none;
290
- border-radius: 0;
291
- width: 100%;
292
- margin: 0;
293
- }
294
- .content-settings .templatestyle-field-wrapper img {
295
- width: 100%;
296
- height: 100%;
297
- object-fit: contain; /* or contain */
298
- display: block;
299
- }
300
-
301
- .content-settings .templatestyle-preview-wrapper {
302
- display: flex;
303
- align-items: center;
304
- justify-content: center;
305
- width: 100%;
306
- font-size: 13px;
307
- box-sizing: border-box;
308
- height: 100%;
309
- padding: 4px 10px;
310
- }
311
-
312
- .content-settings .templatestyle-preview-wrapper img {
313
- /* max-width: 90%;
314
- max-height: 90%; */
315
- object-fit: contain;
316
- }
317
-
318
- .content-settings .templatestyle-hover-overlay {
319
- position: absolute;
320
- inset: 0;
321
- background: rgba(0, 0, 0, 0.6);
322
- color: #fff;
323
- font-size: 10px;
324
- display: flex;
325
- align-items: center;
326
- justify-content: center;
327
- opacity: 0;
328
- transition: 0.2s;
329
- }
330
-
331
- .content-settings .templatestyle-preview-wrapper:hover .templatestyle-hover-overlay {
332
- opacity: 1;
333
- }
334
-
335
- .content-settings .templatestyle-modal-overlay {
336
- position: fixed;
337
- inset: 0;
338
- background: rgba(0, 0, 0, 0.6);
339
- display: flex;
340
- justify-content: center;
341
- align-items: center;
342
- z-index: 1000;
343
- }
344
-
345
- .content-settings .templatestyle-modal {
346
- width: 500px;
347
- background: #1e1e1e;
348
- color: #fff;
349
- border-radius: 6px;
350
- overflow: hidden;
351
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
352
- }
353
-
354
- .content-settings .templatestyle-modal-header {
355
- display: flex;
356
- justify-content: space-between;
357
- align-items: center;
358
- padding: 10px 16px;
359
- border-bottom: 1px solid #333;
360
- }
361
-
362
- .content-settings .templatestyle-modal-header button {
363
- background: transparent;
364
- border: none;
365
- color: #777;
366
- cursor: pointer;
367
- font-size: 16px;
368
- }
369
-
370
- .content-settings .templatestyle-modal-header button:hover {
371
- color: #fff;
372
- }
373
-
374
- .content-settings .templatestyle-field-wrapper .gallery-field-wrapper {
375
- display: flex;
376
- flex-wrap: wrap;
377
- gap: 10px;
378
- padding: 10px;
379
- }
380
-
381
- .content-settings .templatestyle-field-wrapper .gallery-field-option {
382
- border: 1px solid rgba(255, 255, 255, 0.16);
383
- border-radius: 4px;
384
- cursor: pointer;
385
- transition: 0.2s;
386
- display: flex;
387
- align-items: center;
388
- justify-content: center;
389
- background: rgba(0, 0, 0, 0.16);
390
- box-sizing: border-box;
391
- width: calc(50% - 4px);
392
- min-height: 108px;
393
- padding: 16px;
394
- overflow: hidden;
395
- flex: none;
396
- font-size: 1.1rem;
397
- }
398
-
399
- .content-settings .templatestyle-field-wrapper .gallery-field-option:hover {
400
- border: 2px dotted rgba(255, 255, 255, 0.74);
401
- }
402
-
403
- .content-settings .templatestyle-field-wrapper .gallery-field-option.active {
404
- border: 2px dotted rgba(255, 255, 255, 1);
405
- }
406
-
407
- .content-settings .templatestyle-field-wrapper .gallery-field-option img {
408
- width: 80px;
409
- height: 50px;
410
- object-fit: cover;
411
- display: block;
412
- }
413
-
414
-
415
- /* tempalteList */
416
-
417
-
418
- .content-settings .templateList-wrapper {
419
- display: flex;
420
- flex-direction: column;
421
- padding: 8px 0px;
422
- gap: 8px;
423
- width: 100%;
424
- }
425
-
426
- .content-settings .templatelist-item {
427
- border: 1px solid rgba(255, 255, 255, 0.16);
428
- border-radius: 4px;
429
- padding: 4px 8px;
430
- font-size: 14px;
431
- cursor: pointer;
432
- display: flex;
433
- justify-content: space-between;
434
- align-items: center;
435
- }
436
-
437
- .content-settings .templatelist-item:hover {
438
- border: 1px dotted #646cff;
439
- }
440
-
441
- .content-settings .templatelist-item.selected {
442
- border: 2px solid #646cff;
443
- }
444
- .content-settings .templateList-btn{
445
- background-color: none;
446
- border: none;
447
- padding: 0;
448
- margin: 0;
449
- }
450
-
451
-
452
- /* social-media-links */
453
-
454
- .content-settings .social-media-links-field-wrapper {
455
- display: flex;
456
- flex-direction: column;
457
- gap: 12px;
458
- }
459
-
460
- .content-settings .smlf-row {
461
- display: flex;
462
- flex-direction: column;
463
- gap: 4px;
464
- position: relative;
465
- }
466
-
467
- .content-settings .smlf-input-row {
468
- display: flex;
469
- gap: 10px;
470
- align-items: center;
471
- }
472
-
473
- .content-settings .smlf-icon-dropdown {
474
- position: relative;
475
- }
476
-
477
- .content-settings .smlf-icon-button {
478
- width: 40px;
479
- height: 40px;
480
- background: #2a2a2a;
481
- border: 1px solid #444;
482
- border-radius: 4px;
483
- display: flex;
484
- align-items: center;
485
- justify-content: center;
486
- cursor: pointer;
487
- }
488
-
489
- .content-settings .smlf-icon-button i {
490
- color: #fff;
491
- font-size: 18px;
492
- }
493
-
494
- .content-settings .smlf-icon-panel {
495
- position: absolute;
496
- top: 45px;
497
- width: 260px;
498
- background: #2a2a2a;
499
- border: 1px solid #444;
500
- border-radius: 4px;
501
- padding: 10px;
502
- z-index: 1000;
503
- }
504
-
505
- .content-settings .smlf-icon-grid {
506
- display: grid;
507
- grid-template-columns: repeat(5, 1fr);
508
- gap: 6px;
509
- max-height: 200px;
510
- overflow-y: auto;
511
- }
512
-
513
- .content-settings .smlf-icon-option {
514
- height: 40px;
515
- display: flex;
516
- align-items: center;
517
- justify-content: center;
518
- border: 1px solid #444;
519
- border-radius: 4px;
520
- cursor: pointer;
521
- background: #2a2a2a;
522
- }
523
-
524
- .content-settings .smlf-icon-option i {
525
- color: #fff;
526
- font-size: 18px;
527
- }
528
-
529
- .content-settings .smlf-icon-option--selected {
530
- border: 2px solid #444;
531
- background: #fff;
532
- }
533
-
534
- .content-settings .smlf-icon-option--selected i {
535
- color: #2a2a2a;
536
- }
537
-
538
- .content-settings .smlf-url-input {
539
- flex: 1;
540
- padding: 8px 10px;
541
- border: 1px solid #444;
542
- border-radius: 4px;
543
- }
544
-
545
- .content-settings .smlf-url-input--error {
546
- border: 1px solid red;
547
- }
548
-
549
- .content-settings .smlf-error-text {
550
- color: red;
551
- font-size: 12px;
552
- margin-left: 50px;
553
- }
554
-
555
-
556
-
557
- /* select from preview */
558
-
559
-
560
-
561
- .content-settings .preview-grid {
562
- display: grid;
563
- grid-template-columns: repeat(2, 1fr);
564
- gap: 12px;
565
- }
566
-
567
- .content-settings .preview-item {
568
- cursor: pointer;
569
- border-radius: 6px;
570
- text-align: center;
571
- transition: 0.2s;
572
- background: transparent;
573
- border: none;
574
- height: 64px;
575
- display: flex;
576
- align-items: center;
577
- justify-content: center;
578
- overflow: hidden;
579
- }
580
-
581
-
582
-
583
- .content-settings .preview-box {
584
- margin-bottom: 0;
585
- display: flex;
586
- align-items: center;
587
- justify-content: center;
588
- }
589
-
590
- .content-settings .preview-box a {
591
- transform: scale(1);
592
- white-space: nowrap;
593
- pointer-events: none;
594
- }
595
-
596
- .content-settings .preview-label {
597
- font-size: 12px;
598
- }
599
-
600
-
601
-
602
- .content-settings .preview-dropdown-container {
603
- position: relative;
604
- width: 100%;
605
- }
606
-
607
- .content-settings .preview-dropdown-toggle {
608
- display: flex;
609
- align-items: center;
610
- gap: 10px;
611
- background-color: #2a2a2a;
612
- border: 1px solid #555;
613
- border-radius: 4px;
614
- padding: 6px 10px;
615
- cursor: pointer;
616
- transition: 0.2s;
617
- user-select: none;
618
- }
619
-
620
- .content-settings .preview-dropdown-toggle:hover {
621
- border-color: #777;
622
- background-color: #353535;
623
- }
624
-
625
-
626
-
627
- .content-settings.selected-preview-box {
628
- /* width: max-content;
629
- height: max-content; */
630
- width: 100%;
631
- min-height: 50px;
632
- border: none;
633
- border-radius: 4px;
634
- overflow: hidden;
635
- display: flex;
636
- align-items: center;
637
- justify-content: center;
638
- background: transparent;
639
- flex-shrink: 0;
640
- }
641
-
642
- .content-settings .selected-preview-box a {
643
- transform: scale(1);
644
- white-space: nowrap;
645
- pointer-events: none;
646
- }
647
-
648
-
649
- .content-settings .selected-label {
650
- flex: 1;
651
- font-size: 13px;
652
- color: #eee;
653
- }
654
-
655
- .content-settings .dropdown-icon {
656
- font-style: normal;
657
- font-size: 12px;
658
- color: #888;
659
- transition: transform 0.2s;
660
- }
661
-
662
- .content-settings .dropdown-icon.open {
663
- transform: rotate(180deg);
664
- }
665
-
666
- .content-settings .preview-dropdown-content {
667
- position: absolute;
668
- top: calc(100% + 4px);
669
- left: 0;
670
- width: 100%;
671
- background-color: #333;
672
- border: 1px solid #555;
673
- border-radius: 6px;
674
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
675
- z-index: 1000;
676
- max-height: 400px;
677
- overflow-y: auto;
678
- padding: 12px;
679
- box-sizing: border-box;
680
- }
681
-
682
- .content-settings .preview-dropdown-content .preview-grid {
683
- grid-template-columns: repeat(2, 1fr);
684
- margin: 0;
685
- }
686
-
687
- /* css for selectfield */
688
-
689
- .content-settings .select-field {
690
- display: inline-flex;
691
- align-items: center;
692
- border: 1px solid #444;
693
- border-radius: 4px;
694
- background: #252525;
695
- overflow: hidden;
696
- height: 30px;
697
- }
698
-
699
- .content-settings .select-divider {
700
- width: 1px;
701
- height: 100%;
702
- background: #444;
703
- flex-shrink: 0;
704
- }
705
-
706
- .content-settings .select-dropdown {
707
- border: none;
708
- background: #252525;
709
- color: #fff;
710
- font-size: 13px;
711
- padding: 0 20px 0 10px;
712
- outline: none;
713
- cursor: pointer;
714
- height: 100%;
715
- appearance: none;
716
- -webkit-appearance: none;
717
- background-repeat: no-repeat;
718
- background-position: right 6px center;
719
- min-width: 60px;
720
- }
721
-
722
- .content-settings .select-input {
723
- border: none;
724
- background: transparent;
725
- color: #fff;
726
- font-size: 13px;
727
- padding: 0 10px;
728
- outline: none;
729
- text-align: center;
730
- height: 100%;
731
- -moz-appearance: textfield;
732
- -webkit-appearance: none;
733
- min-width: 52px;
734
- }
735
-
736
-
737
- /* seekbar field */
738
-
739
-
740
- .content-settings .seekbar-field-wrapper {
741
- display: flex;
742
- flex-direction: column;
743
- gap: 8px;
744
- width: 100%;
745
- }
746
-
747
- .content-settings .seekbar-track-wrapper {
748
- width: 100%;
749
- display: flex;
750
- flex-direction: column;
751
- gap: 6px;
752
- }
753
-
754
- .content-settings .seekbar-range-input {
755
- width: 100%;
756
- cursor: pointer;
757
- accent-color: #007bff;
758
- }
759
-
760
- .content-settings .seekbar-ticks {
761
- display: flex;
762
- justify-content: space-between;
763
- padding: 0 2px;
764
- }
765
-
766
- .content-settings .seekbar-tick {
767
- display: flex;
768
- flex-direction: column;
769
- align-items: center;
770
- gap: 2px;
771
- }
772
-
773
- .content-settings.seekbar-tick-mark {
774
- width: 1px;
775
- height: 3px;
776
- background: #444;
777
- }
778
-
779
- .content-settings .seekbar-tick-mark--major {
780
- height: 6px;
781
- background: #666;
782
- }
783
-
784
- .content-settings .seekbar-tick-label {
785
- font-size: 9px;
786
- color: #777;
787
- font-weight: 600;
788
- }
789
-
790
- .content-settings .seekbar-input-row {
791
- display: flex;
792
- justify-content: center;
793
- }
794
-
795
- .content-settings .seekbar-number-box {
796
- display: inline-flex;
797
- align-items: center;
798
- border: 1px solid #444;
799
- border-radius: 4px;
800
- background: #2a2a2a;
801
- overflow: hidden;
802
- height: 30px;
803
- }
804
-
805
- .content-settings .seekbar-number-input {
806
- border: none;
807
- background: transparent;
808
- color: #fff;
809
- font-size: 12px;
810
- width: 60px;
811
- outline: none;
812
- text-align: center;
813
- -moz-appearance: textfield;
814
- }
815
-
816
- .content-settings .seekbar-unit-label {
817
- font-size: 11px;
818
- color: #777;
819
- padding-right: 10px;
820
- user-select: none;
821
- }
822
-
823
-
824
- /* selection selector */
825
- .content-settings .section-selector-field-wrapper {
826
- position: relative;
827
- }
828
-
829
- .content-settings .section-selector-select {
830
- border: 1px solid #444;
831
- border-radius: 4px;
832
- background: #252525;
833
- color: #fff;
834
- font-size: 13px;
835
- padding: 0 10px;
836
- outline: none;
837
- cursor: pointer;
838
- height: 30px;
839
- width: 100%;
840
- appearance: none;
841
- -webkit-appearance: none;
842
- }
843
-
844
- .content-settings .section-selector-loading {
845
- color: #999;
846
- font-size: 12px;
847
- margin-top: 4px;
848
- display: block;
849
- }
850
-
851
-
852
- /* ── EntityCard ── */
853
-
854
- .content-settings .entity-card {
855
- border: 1px solid #444;
856
- border-radius: 8px;
857
- margin-bottom: 12px;
858
- overflow: visible;
859
- background: #222;
860
- }
861
-
862
- .content-settings.entity-card--dragging {
863
- opacity: 0.5;
864
- }
865
-
866
- .content-settings .entity-card-header {
867
- padding: 14px 16px;
868
- background: #2a2a2a;
869
- display: flex;
870
- justify-content: space-between;
871
- align-items: center;
872
- cursor: pointer;
873
- }
874
-
875
- .content-settings .entity-card-header--open {
876
- background: #333;
877
- }
878
-
879
- .content-settings .entity-card-header-left {
880
- display: flex;
881
- align-items: center;
882
- gap: 12px;
883
- flex: 1;
884
- }
885
-
886
- .content-settings .entity-card-drag-handle {
887
- cursor: grab;
888
- color: #888;
889
- font-size: 20px;
890
- }
891
-
892
- .content-settings .entity-card-label {
893
- flex: 1;
894
- color: #fff;
895
- font-weight: 600;
896
- text-align: left;
897
- }
898
-
899
- .content-settings .entity-card-toggle-icon {
900
- color: #999;
901
- }
902
-
903
- .content-settings .entity-card-body {
904
- padding: 20px;
905
- background: #222;
906
- }
907
-
908
- .content-settings .entity-card-change-row {
909
- text-align: right;
910
- margin-bottom: 8px;
911
- }
912
-
913
- .content-settings .entity-card-change-link {
914
- font-size: 12px;
915
- color: #888;
916
- cursor: pointer;
917
- text-decoration: underline;
918
- }
919
-
920
- .content-settings .entity-card-search-wrapper {
921
- position: relative;
922
- margin-bottom: 16px;
923
- }
924
-
925
- .content-settings .entity-card-search-input {
926
- width: 100%;
927
- padding: 10px 12px;
928
- background: #111;
929
- border: 1px solid #555;
930
- border-radius: 6px;
931
- color: #fff;
932
- outline: none;
933
- }
934
-
935
- .content-settings .entity-card-dropdown {
936
- position: absolute;
937
- top: calc(100% + 4px);
938
- left: 0;
939
- right: 0;
940
- background: #1e1e1e;
941
- border: 1px solid #555;
942
- border-radius: 6px;
943
- z-index: 9999;
944
- max-height: 300px;
945
- overflow-y: auto;
946
- }
947
-
948
- .content-settings .entity-card-dropdown-item {
949
- display: flex;
950
- gap: 10px;
951
- padding: 10px;
952
- cursor: pointer;
953
- border-bottom: 1px solid #333;
954
- }
955
-
956
- .content-settings .entity-card-dropdown-item-content {
957
- flex: 1;
958
- }
959
-
960
- .content-settings .entity-card-loading {
961
- color: #999;
962
- margin-bottom: 14px;
963
- }
964
-
965
- .content-settings .entity-card-details {
966
- border-radius: 6px;
967
- overflow: hidden;
968
- border: 1px solid #444;
969
- background: #111;
970
- }
971
-
972
- .content-settings .entity-card-remove-row {
973
- display: flex;
974
- justify-content: flex-end;
975
- margin-top: 20px;
976
- }
977
-
978
- .content-settings .entity-card-remove-button {
979
- padding: 8px 14px;
980
- background: rgba(239, 68, 68, 0.15);
981
- color: #f87171;
982
- border: 1px solid rgba(239, 68, 68, 0.3);
983
- border-radius: 6px;
984
- cursor: pointer;
985
- }
986
-
987
- /* ── EntityManager ── */
988
-
989
- .content-settings .entity-manager-empty {
990
- color: #666;
991
- text-align: center;
992
- padding: 20px 0;
993
- }
994
-
995
- .content-settings .entity-manager-add-button {
996
- width: 100%;
997
- padding: 12px;
998
- background: #333;
999
- color: #fff;
1000
- border: 1px solid #444;
1001
- border-radius: 8px;
1002
- cursor: pointer;
1003
- margin-top: 10px;
1004
- }
1005
-
1006
- /* ── result item (dropdown row) ── property manager */
1007
-
1008
- .content-settings .property-result-address {
1009
- color: #fff;
1010
- font-size: 13px;
1011
- text-align: left;
1012
- }
1013
-
1014
- .content-settings .property-result-meta {
1015
- color: #aaa;
1016
- font-size: 11px;
1017
- margin-top: 4px;
1018
- text-align: left;
1019
- }
1020
-
1021
- .content-settings .property-result-mls {
1022
- margin-left: 10px;
1023
- }
1024
-
1025
- /* ── details card ── */
1026
-
1027
- .content-settings .property-details-photo {
1028
- width: 100%;
1029
- height: 180px;
1030
- object-fit: cover;
1031
- }
1032
-
1033
- .content-settings .property-details-body {
1034
- padding: 12px 14px;
1035
- }
1036
-
1037
- .content-settings .property-details-address {
1038
- color: #fff;
1039
- font-size: 14px;
1040
- font-weight: 600;
1041
- }
1042
-
1043
- .content-settings .property-details-mls {
1044
- color: #888;
1045
- font-size: 11px;
1046
- }
1047
-
1048
- .content-settings .property-details-price {
1049
- color: #fff;
1050
- font-size: 22px;
1051
- font-weight: 700;
1052
- }
1053
-
1054
- .content-settings .property-details-stats {
1055
- display: flex;
1056
- gap: 14px;
1057
- color: #ccc;
1058
- }
1059
-
1060
-
1061
- /* numberfield */
1062
-
1063
- .unit-field-wrapper { display: flex; align-items: center; flex: 1; border: none; border-radius: 4px; background: var(--c-3); overflow: hidden; height: 30px; }
1064
- .unit-field-wrapper input { flex: 1; border: none !important; background: transparent !important; height: 100%; }
1065
-
1066
-
1067
- /* nearby scools search */
1068
-
1069
-
1070
- .nss-wrapper {
1071
- position: relative;
1072
- width: 100%;
1073
- }
1074
-
1075
- .nss-input {
1076
- width: 100%;
1077
- padding: 10px;
1078
- border: 1px solid #444;
1079
- border-radius: 4px;
1080
- }
1081
-
1082
- .nss-dropdown {
1083
- position: absolute;
1084
- top: 45px;
1085
- left: 0;
1086
- right: 0;
1087
- background: #2a2a2a;
1088
- border: 1px solid #444;
1089
- border-radius: 4px;
1090
- max-height: 220px;
1091
- overflow-y: auto;
1092
- z-index: 1000;
1093
- }
1094
-
1095
- .nss-loading {
1096
- padding: 10px;
1097
- color: #aaa;
1098
- }
1099
-
1100
- .nss-result-item {
1101
- padding: 10px;
1102
- cursor: pointer;
1103
- border-bottom: 1px solid #333;
1104
- color: #fff;
1105
- background: transparent;
1106
- }
1107
-
1108
- .nss-result-item:hover {
1109
- background: #333;
1110
- }
1111
-
1112
-
1113
- /* LinkEditorField */
1114
-
1115
- .link-editor {
1116
- position: unset;
1117
- background: #181818;
1118
- padding: 10px;
1119
- border-radius: 4px;
1120
- }
1121
-
1122
- .link-input {
1123
- width: 100%;
1124
- padding: 0.5rem;
1125
- color: white;
1126
- background: #1e293b;
1127
- }
1128
-
1129
- .popup-loading {
1130
- color: #999;
1131
- font-size: 12px;
1132
- margin-top: 4px;
1133
- }
1134
-
1135
- /* icon field */
1136
-
1137
-
1138
- .icons-field {
1139
- --icf-bg: #1a1a1a;
1140
- --icf-bg-hover: #2a2a2a;
1141
- --icf-bg-selected: #333333;
1142
- --icf-border: #3a3a3a;
1143
- --icf-border-focus: #555555;
1144
- --icf-text: #ffffff;
1145
- --icf-text-muted: #888888;
1146
- --icf-text-dim: #555555;
1147
- --icf-accent: #ffffff;
1148
- --icf-input-bg: #111111;
1149
- --icf-clear-bg: #2a2a2a;
1150
- --icf-clear-hover: #333333;
1151
-
1152
- position: relative;
1153
- width: 100%;
1154
- font-family: var(--s-f);
1155
- }
1156
-
1157
- /* ── toggle button ── */
1158
-
1159
- .icf-toggle {
1160
- display: flex;
1161
- align-items: center;
1162
- justify-content: space-between;
1163
- width: 100%;
1164
- padding: 8px 12px;
1165
- background: var(--icf-bg);
1166
- border: 1px solid var(--icf-border);
1167
- border-radius: 8px;
1168
- cursor: pointer;
1169
- font-size: 13px;
1170
- color: var(--icf-text);
1171
- box-shadow: none;
1172
- transition: all 0.2s ease;
1173
- outline: none;
1174
- box-sizing: border-box;
1175
- }
1176
-
1177
- .icf-toggle--open {
1178
- border-color: var(--icf-border-focus);
1179
- box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
1180
- }
1181
-
1182
- .icf-toggle-left {
1183
- display: flex;
1184
- align-items: center;
1185
- gap: 10px;
1186
- }
1187
-
1188
- .icf-toggle-icon-box {
1189
- width: 22px;
1190
- height: 22px;
1191
- display: flex;
1192
- align-items: center;
1193
- justify-content: center;
1194
- background: transparent;
1195
- border-radius: 5px;
1196
- color: var(--icf-text);
1197
- }
1198
-
1199
- .icf-toggle-icon-box--selected {
1200
- background: var(--icf-bg-selected);
1201
- }
1202
-
1203
- .icf-toggle-icon-box i {
1204
- font-size: 15px;
1205
- }
1206
-
1207
- .icf-toggle-icon-placeholder {
1208
- opacity: 0.3;
1209
- font-size: 15px;
1210
- }
1211
-
1212
- .icf-toggle-loading {
1213
- opacity: 0.3;
1214
- font-size: 10px;
1215
- }
1216
-
1217
- .icf-toggle-label {
1218
- font-weight: 400;
1219
- color: var(--icf-text-muted);
1220
- }
1221
-
1222
- .icf-toggle-label--selected {
1223
- font-weight: 500;
1224
- color: var(--icf-text);
1225
- }
1226
-
1227
- .icf-toggle-chevron {
1228
- transform: rotate(0deg);
1229
- transition: transform 0.2s;
1230
- font-size: 9px;
1231
- color: var(--icf-text-muted);
1232
- }
1233
-
1234
- .icf-toggle-chevron--open {
1235
- transform: rotate(180deg);
1236
- }
1237
-
1238
- /* ── dropdown panel ── */
1239
-
1240
- .icf-dropdown {
1241
- position: absolute;
1242
- top: calc(100% + 6px);
1243
- left: 0;
1244
- right: 0;
1245
- z-index: 1000;
1246
- background: var(--icf-bg);
1247
- border: 1px solid var(--icf-border);
1248
- border-radius: 10px;
1249
- box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
1250
- padding: 10px;
1251
- display: flex;
1252
- flex-direction: column;
1253
- gap: 8px;
1254
- }
1255
-
1256
- /* ── search ── */
1257
-
1258
- .icf-search-wrapper {
1259
- position: relative;
1260
- }
1261
-
1262
- .icf-search-input {
1263
- width: 100%;
1264
- padding: 7px 30px 7px 10px;
1265
- background: var(--icf-input-bg);
1266
- border: 1px solid var(--icf-border);
1267
- border-radius: 6px;
1268
- font-size: 12px;
1269
- color: var(--icf-text);
1270
- outline: none;
1271
- box-sizing: border-box;
1272
- }
1273
-
1274
- .icf-search-icon {
1275
- position: absolute;
1276
- right: 9px;
1277
- top: 50%;
1278
- transform: translateY(-50%);
1279
- color: var(--icf-text-muted);
1280
- font-size: 11px;
1281
- }
1282
-
1283
- /* ── grid ── */
1284
-
1285
- .icf-grid {
1286
- display: grid;
1287
- grid-template-columns: repeat(5, 1fr);
1288
- gap: 4px;
1289
- max-height: 220px;
1290
- overflow-y: auto;
1291
- padding-right: 2px;
1292
- scrollbar-width: thin;
1293
- scrollbar-color: var(--icf-border) transparent;
1294
- }
1295
-
1296
- .icf-grid-full-row {
1297
- grid-column: span 5;
1298
- text-align: center;
1299
- padding: 20px;
1300
- color: var(--icf-text-muted);
1301
- font-size: 12px;
1302
- }
1303
-
1304
- .icf-clear-option {
1305
- grid-column: span 5;
1306
- text-align: center;
1307
- padding: 7px;
1308
- cursor: pointer;
1309
- background: var(--icf-clear-bg);
1310
- color: var(--icf-text-muted);
1311
- border-radius: 5px;
1312
- font-size: 11px;
1313
- font-weight: 600;
1314
- margin-bottom: 2px;
1315
- transition: all 0.2s;
1316
- letter-spacing: 0.5px;
1317
- text-transform: uppercase;
1318
- }
1319
-
1320
- .icf-clear-option:hover {
1321
- background: var(--icf-clear-hover);
1322
- }
1323
-
1324
- .icf-icon-swatch {
1325
- aspect-ratio: 1 / 1;
1326
- display: flex;
1327
- align-items: center;
1328
- justify-content: center;
1329
- cursor: pointer;
1330
- border: 1px solid var(--icf-border);
1331
- border-radius: 6px;
1332
- background: transparent;
1333
- font-size: 16px;
1334
- color: var(--icf-accent);
1335
- transition: all 0.15s ease;
1336
- }
1337
-
1338
- .icf-icon-swatch:hover {
1339
- background: var(--icf-bg-hover);
1340
- color: var(--icf-text);
1341
- border-color: var(--icf-border-focus);
1342
- }
1343
-
1344
- .icf-icon-swatch--selected {
1345
- border-color: var(--icf-accent);
1346
- background: var(--icf-bg-selected);
1347
- color: var(--icf-accent);
1348
- }
1349
-
1350
- .icf-icon-swatch--selected:hover {
1351
- background: var(--icf-bg-selected);
1352
- color: var(--icf-accent);
1353
- border-color: var(--icf-accent);
1354
- }
1355
-
1356
-
1357
- /* icon picker field */
1358
-
1359
-
1360
- .ipf-wrapper {
1361
- position: relative;
1362
- width: fit-content;
1363
- }
1364
-
1365
- .ipf-trigger {
1366
- width: 40px;
1367
- height: 40px;
1368
- border: 1px solid #444;
1369
- border-radius: 6px;
1370
- background: #2a2a2a;
1371
- cursor: pointer;
1372
- display: flex;
1373
- align-items: center;
1374
- justify-content: center;
1375
- }
1376
-
1377
- .ipf-trigger-icon {
1378
- color: #fff;
1379
- font-size: 22px;
1380
- }
1381
-
1382
- .ipf-popup {
1383
- position: absolute;
1384
- top: 60px;
1385
- left: 0;
1386
- width: fit-content;
1387
- background: #1f1f1f;
1388
- border: 1px solid #444;
1389
- border-radius: 8px;
1390
- padding: 8px;
1391
- z-index: 9999;
1392
- display: flex;
1393
- justify-content: center;
1394
- }
1395
-
1396
- .ipf-grid {
1397
- display: flex;
1398
- flex-wrap: wrap;
1399
- gap: 8px;
1400
- width: 140px;
1401
- max-height: 250px;
1402
- overflow-y: auto;
1403
- }
1404
-
1405
- .ipf-swatch {
1406
- height: 40px;
1407
- width: 40px;
1408
- border: 1px solid #444;
1409
- border-radius: 6px;
1410
- cursor: pointer;
1411
- display: flex;
1412
- align-items: center;
1413
- justify-content: center;
1414
- background: #2a2a2a;
1415
- }
1416
-
1417
- .ipf-swatch--selected {
1418
- border: 2px solid white;
1419
- background: #444;
1420
- }
1421
-
1422
- .ipf-swatch-icon {
1423
- color: #fff;
1424
- font-size: 29px;
1425
- }
1426
-
1427
-
1428
- /* icon-group field */
1429
-
1430
-
1431
- .icon-group-field {
1432
- display: inline-flex;
1433
- background-color: #181818;
1434
- padding: 3px;
1435
- border-radius: 8px;
1436
- border: 1px solid #333;
1437
- gap: 3px;
1438
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
1439
- user-select: none;
1440
- }
1441
-
1442
- .icon-group-option {
1443
- width: 36px;
1444
- height: 32px;
1445
- display: flex;
1446
- align-items: center;
1447
- justify-content: center;
1448
- cursor: pointer;
1449
- background-color: transparent;
1450
- color: #888888;
1451
- border-radius: 5px;
1452
- box-shadow: none;
1453
- border: 1px solid transparent;
1454
- transition: all 0.15s ease-in-out;
1455
- }
1456
-
1457
- .icon-group-option:hover {
1458
- background-color: #242424;
1459
- color: #cccccc;
1460
- }
1461
-
1462
- .icon-group-option--active {
1463
- background-color: #363636;
1464
- color: #ffffff;
1465
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08);
1466
- border: 1px solid #4a4a4a;
1467
- }
1468
-
1469
- .icon-group-option--active:hover {
1470
- background-color: #363636;
1471
- color: #ffffff;
1472
- }
1473
-
1474
- .icon-group-option i {
1475
- font-size: 15px;
1476
- }
1477
-
1478
-
1479
-
1480
- /* GooglePlacesSearchBar */
1481
-
1482
- .gpsb-wrapper {
1483
- position: relative;
1484
- width: 100%;
1485
- }
1486
-
1487
- .gpsb-input {
1488
- width: 100%;
1489
- padding: 10px;
1490
- border: 1px solid #444;
1491
- border-radius: 4px;
1492
- }
1493
-
1494
- .gpsb-dropdown {
1495
- position: absolute;
1496
- top: 45px;
1497
- left: 0;
1498
- right: 0;
1499
- background: #2a2a2a;
1500
- border: 1px solid #444;
1501
- border-radius: 4px;
1502
- max-height: 220px;
1503
- overflow-y: auto;
1504
- z-index: 1000;
1505
- }
1506
-
1507
- .gpsb-loading {
1508
- padding: 10px;
1509
- color: #aaa;
1510
- }
1511
-
1512
- .gpsb-result-item {
1513
- padding: 10px;
1514
- cursor: pointer;
1515
- border-bottom: 1px solid #333;
1516
- color: #fff;
1517
- background: transparent;
1518
- }
1519
-
1520
- .gpsb-result-item:hover {
1521
- background: #333;
1522
- }
1523
-
1524
-
1525
-
1526
-
1527
- /* gallery field */
1528
-
1529
- .content-settings .gallery-field-filter {
1530
- flex: none;
1531
- flex-grow: 1;
1532
- justify-items: flex-end;
1533
- }
1534
-
1535
- .content-settings .gallery-field-wrapper {
1536
- flex: none;
1537
- display: flex;
1538
- flex-flow: row wrap;
1539
- gap: 8px;
1540
- padding: 8px 0;
1541
- justify-content: space-between;
1542
- flex: none;
1543
- width: 100%;
1544
- }
1545
-
1546
- .content-settings .gallery-field-filter select {
1547
- width: auto !important;
1548
- display: block;
1549
- flex: none !important;
1550
- cursor: pointer;
1551
- }
1552
-
1553
- .content-settings .gallery-field-wrapper .gallery-field-option {
1554
- border: 1px solid rgba(255, 255, 255, 0.16);
1555
- border-radius: 4px;
1556
- cursor: pointer;
1557
- transition: 0.2s;
1558
- display: flex;
1559
- align-items: center;
1560
- justify-content: center;
1561
- background: rgba(0, 0, 0, 0.16);
1562
- box-sizing: border-box;
1563
- width: calc(50% - 4px);
1564
- min-height: 108px;
1565
- padding: 16px;
1566
- overflow: hidden;
1567
- flex: none;
1568
- font-size: 1.1rem;
1569
- text-align: center;
1570
- }
1571
-
1572
- .settings-field>label:has(>.gallery-field-wrapper) {
1573
- flex: none;
1574
- }
1575
-
1576
- .settings-field:has(> .templateList-wrapper),
1577
- .settings-field:has(>.gallery-field-wrapper) {
1578
- flex-flow: row wrap;
1579
- align-items: stretch;
1580
- }
1581
-
1582
- .content-settings .gallery-field-wrapper .gallery-field-option:hover {
1583
- border: 2px dotted #646cff;
1584
- }
1585
-
1586
- .content-settings .gallery-field-wrapper .gallery-field-option.active {
1587
- border: 2px solid #646cff;
1588
- }
1589
-
1590
- /* gallery field */
1591
-
1592
- .content-settings .gallery-field-filter {
1593
- flex: none;
1594
- flex-grow: 1;
1595
- justify-items: flex-end;
1596
- }
1597
-
1598
- .content-settings .gallery-field-wrapper {
1599
- flex: none;
1600
- display: flex;
1601
- flex-flow: row wrap;
1602
- gap: 8px;
1603
- padding: 8px 0;
1604
- justify-content: space-between;
1605
- flex: none;
1606
- width: 100%;
1607
- }
1608
-
1609
- .content-settings .gallery-field-filter select {
1610
- width: auto !important;
1611
- display: block;
1612
- flex: none !important;
1613
- cursor: pointer;
1614
- }
1615
-
1616
-
1617
-
1618
- /* DynamicField */
1619
-
1620
-
1621
- .dynamic-list {
1622
- font-family: inherit;
1623
- }
1624
-
1625
- .dlf-item {
1626
- border: 1px solid #444;
1627
- border-radius: 8px;
1628
- margin-bottom: 12px;
1629
- overflow: hidden;
1630
- background: #222;
1631
- box-shadow: none;
1632
- transition: opacity 0.2s, transform 0.2s;
1633
- opacity: 1;
1634
- transform: none;
1635
- }
1636
-
1637
- .dlf-item--open {
1638
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
1639
- }
1640
-
1641
- .dlf-item--dragging {
1642
- opacity: 0.5;
1643
- transform: scale(0.98);
1644
- }
1645
-
1646
- .dlf-header {
1647
- padding: 14px 16px;
1648
- background: #2a2a2a;
1649
- display: flex;
1650
- justify-content: space-between;
1651
- align-items: center;
1652
- border-bottom: none;
1653
- transition: background 0.2s;
1654
- }
1655
-
1656
- .dlf-header--open {
1657
- background: #333;
1658
- border-bottom: 1px solid #444;
1659
- }
1660
-
1661
- .dlf-header-left {
1662
- display: flex;
1663
- align-items: center;
1664
- gap: 12px;
1665
- flex: 1;
1666
- }
1667
-
1668
- .dlf-drag-handle {
1669
- cursor: grab;
1670
- color: #888;
1671
- font-size: 20px;
1672
- line-height: 1;
1673
- user-select: none;
1674
- padding: 2px 6px;
1675
- }
1676
-
1677
- .dlf-title-row {
1678
- flex: 1;
1679
- cursor: pointer;
1680
- display: flex;
1681
- align-items: center;
1682
- gap: 10px;
1683
- }
1684
-
1685
- .dlf-title {
1686
- font-size: 14px;
1687
- font-weight: 600;
1688
- color: #fff;
1689
- }
1690
-
1691
- .dlf-toggle-arrow {
1692
- color: #999;
1693
- font-size: 12px;
1694
- transform: rotate(0deg);
1695
- transition: transform 0.2s;
1696
- cursor: pointer;
1697
- padding: 8px;
1698
- }
1699
-
1700
- .dlf-toggle-arrow--open {
1701
- transform: rotate(180deg);
1702
- }
1703
-
1704
- .dlf-body {
1705
- background: #222;
1706
- }
1707
-
1708
- .dlf-subfield-row {
1709
- margin-bottom: 16px;
1710
- }
1711
-
1712
- .dlf-footer {
1713
- display: flex;
1714
- justify-content: flex-end;
1715
- margin-top: 20px;
1716
- padding-top: 15px;
1717
- border-top: 1px solid #444;
1718
- }
1719
-
1720
- .dlf-remove-button {
1721
- padding: 8px 16px;
1722
- background: rgba(239, 68, 68, 0.15);
1723
- color: #f87171;
1724
- border: 1px solid rgba(239, 68, 68, 0.3);
1725
- border-radius: 6px;
1726
- cursor: pointer;
1727
- font-size: 12px;
1728
- font-weight: 700;
1729
- display: flex;
1730
- align-items: center;
1731
- gap: 8px;
1732
- transition: all 0.2s;
1733
- margin: 10px;
1734
- }
1735
-
1736
- .dlf-remove-button:hover {
1737
- background: rgba(239, 68, 68, 0.25);
1738
- }
1739
-
1740
- .dlf-add-button {
1741
- width: 100%;
1742
- padding: 12px;
1743
- background: #333;
1744
- color: #fff;
1745
- border: 1px solid #444;
1746
- border-radius: 8px;
1747
- cursor: pointer;
1748
- font-size: 13px;
1749
- font-weight: 700;
1750
- margin-top: 10px;
1751
- transition: all 0.2s;
1752
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
1753
- }
1754
-
1755
- .dlf-add-button:hover {
1756
- background: #444;
1757
- border-color: #666;
1758
- }
1759
-
1760
-
1761
- /* Demographic */
1762
-
1763
-
1764
- .dsb-wrapper {
1765
- position: relative;
1766
- width: 100%;
1767
- }
1768
-
1769
- .dsb-input {
1770
- width: 100%;
1771
- padding: 10px;
1772
- border: 1px solid #444;
1773
- border-radius: 4px;
1774
- outline: none;
1775
- }
1776
-
1777
- .dsb-dropdown {
1778
- position: absolute;
1779
- top: 45px;
1780
- left: 0;
1781
- right: 0;
1782
- background: #2a2a2a;
1783
- border: 1px solid #444;
1784
- border-radius: 4px;
1785
- max-height: 220px;
1786
- overflow-y: auto;
1787
- z-index: 1000;
1788
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
1789
- }
1790
-
1791
- .dsb-loading {
1792
- padding: 10px;
1793
- color: #aaa;
1794
- }
1795
-
1796
- .dsb-result-item {
1797
- padding: 10px;
1798
- cursor: pointer;
1799
- border-bottom: 1px solid #333;
1800
- color: #fff;
1801
- background: transparent;
1802
- transition: background 0.2s;
1803
- }
1804
-
1805
- .dsb-result-item:hover {
1806
- background: #333;
1807
- }
1808
-
1809
-
1810
- /* checkfield */
1811
-
1812
-
1813
-
1814
- .content-settings .check-field{
1815
- display: inline-flex;
1816
- align-items: center;
1817
- justify-content: center;
1818
- width: 16px;
1819
- height: 16px;
1820
- border: 1px solid var(--c-6);
1821
- border-radius: 4px;
1822
- background: var(--c-99);
1823
- border-radius: 20px;
1824
- width: 36px;
1825
- height: 22px;
1826
- flex: none;
1827
- position: relative;
1828
- cursor: pointer;
1829
- transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
1830
- }
1831
- .content-settings .check-field:before {
1832
- content: '';
1833
- position: absolute;
1834
- width: 14px;
1835
- height: 14px;
1836
- border-radius: 50%;
1837
- background: var(--c-6);
1838
- left: 3px;
1839
- top: 3px;
1840
- transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
1841
- box-shadow: 0px 0px 2px rgba(255,255,255,0.76);
1842
- }
1843
- .content-settings .check-field:has(>input:checked):before{
1844
- background: var(--c-99);
1845
- left: calc(100% - 16px);
1846
- }
1847
- .content-settings .check-field:has(>input:checked){
1848
- background: var(--c-6);
1849
- }
1850
- .check-field input {
1851
- display: none;
1852
- }
1853
-
1854
-
1855
- /* Agent manager */
1856
-
1857
-
1858
- /* ── result item (dropdown row) ── */
1859
-
1860
- .agent-result-name {
1861
- color: #fff;
1862
- font-size: 13px;
1863
- font-weight: 600;
1864
- }
1865
-
1866
- .agent-result-speciality {
1867
- color: #888;
1868
- font-size: 11px;
1869
- margin-top: 4px;
1870
- }
1871
-
1872
- /* ── details card ── */
1873
-
1874
- .agent-details {
1875
- padding: 30px;
1876
- }
1877
-
1878
- .agent-details-inner {
1879
- display: flex;
1880
- flex-direction: column;
1881
- align-items: flex-start;
1882
- }
1883
-
1884
- .agent-details-photo {
1885
- width: 100px;
1886
- height: 100px;
1887
- border-radius: 50%;
1888
- object-fit: cover;
1889
- margin-bottom: 24px;
1890
- }
1891
-
1892
- .agent-details-name {
1893
- color: #fff;
1894
- font-size: 14px;
1895
- font-weight: 700;
1896
- margin-bottom: 16px;
1897
- }
1898
-
1899
- .agent-details-speciality {
1900
- color: #ccc;
1901
- font-size: 13px;
1902
- margin-bottom: 8px;
1903
- }
1904
-
1905
- .agent-details-location {
1906
- color: #ccc;
1907
- font-size: 13px;
1908
- margin-bottom: 24px;
1909
- }
1910
-
1911
-
1912
- /* image field */
1913
-
1914
-
1915
-
1916
- /* Img and Vid Field Grids */
1917
-
1918
- .wb-image-field-container { border: 1px solid #444; border-radius: 4px; }
1919
- .wb-vid-field-container { border: 1px solid #444; border-radius: 4px; }
1920
-
1921
- .wb-preview-container { position: relative; height: 110px; background: #2a2a2a; overflow: hidden; border-radius: 4px; }
1922
-
1923
- .wb-preview-image { width: 100%; height: 100%; object-fit: contain; display: block; }
1924
- .wb-preview-vid { width: 100%; height: 100%; object-fit: contain; display: block; }
1925
-
1926
- .wb-preview-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: flex-end; }
1927
-
1928
- .wb-delete-btn { background: rgba(239, 68, 68, 0.15); color: rgb(248, 113, 113); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 4px; padding: 6px; cursor: pointer; }
1929
-
1930
- .wb-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 999999; display: flex; justify-content: center; align-items: center; }
1931
- .wb-modal-container { width: 500px; max-width: 92vw; background: #1e1e1e; color: #fff; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); }
1932
-
1933
- .wb-modal-header { border-bottom: 1px solid #444; height: 66px; min-height: 64px; }
1934
-
1935
- .wb-modal-title {
1936
- font-size: 24px;
1937
- color: #fff;
1938
- }
1939
-
1940
- .wb-disclaimer { color: #ff4d47; font-size: 13px; line-height: 26px; }
1941
-
1942
- .wb-upload-dropzone { border: 2px dashed #555; border-radius: 6px; min-height: 130px; padding: 24px 20px; background: #1d1d1d; gap: 22px; }
1943
-
1944
- .wb-upload-title { font-size: 18px; line-height: 28px; font-weight: 500; margin-bottom: 18px; }
1945
-
1946
- .wb-browse-label { color: #4da6ff; font-size: 16px; position: relative; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; }
1947
-
1948
- .wb-url-box { width: 100%; border: 1px solid #666; border-radius: 6px; overflow: hidden; background: #1f1f1f; }
1949
-
1950
- .wb-library-size { color: #aaa; margin-bottom: 12px; margin-top: -6px; }
1951
-
1952
- .wb-image-size-badge { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; backdrop-filter: blur(4px); white-space: nowrap; pointer-events: none; }
1953
- .wb-vid-size-badge { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; backdrop-filter: blur(4px); white-space: nowrap; pointer-events: none; }
1954
-
1955
- .wb-preview-label { font-size: 14px; color: #aaa; }
1956
-
1957
- .wb-selected-preview { max-width: 100%; max-height: 120px; object-fit: contain; border-radius: 4px; }
1958
-
1959
- .wb-progress-text { font-size: 12px; color: #aaa; }
1960
-
1961
- .wb-preview-popup {
1962
- background: #000;
1963
- }
1964
- .wb-header-left {
1965
- gap: 20px;
1966
- }
1967
- .wb-close-btn {
1968
- color: #fff;
1969
- font-size: 20px;
1970
- }
1971
- .wb-modal-body {
1972
- padding-top: 18px;
1973
- padding-bottom: 18px;
1974
- }
1975
- .wb-back-link { color: #4da6ff; font-size: 14px; gap: 6px; }
1976
- .wb-back-icon {
1977
- font-size: 13px;
1978
- }
1979
- .wb-category-select { background: #1f1f1f; color: #fff; border: 1px solid #444; border-radius: 6px; padding: 6px 10px; cursor: pointer; min-width: 140px; max-width: 170px; }
1980
-
1981
- .wb-trash-icon {
1982
- font-size: 16px;
1983
- margin-top: -6px;
1984
- }
1985
- .wb-upload-actions { gap: 14px; flex-wrap: nowrap; white-space: nowrap; }
1986
-
1987
- .wb-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
1988
-
1989
- .wb-hidden {
1990
- display: none;
1991
- }
1992
-
1993
- .wb-separator {
1994
- color: #aaa;
1995
- font-size: 16px;
1996
- }
1997
- .wb-library-link { color: #4da6ff; font-size: 16px; white-space: nowrap; flex-shrink: 0; }
1998
- .wb-or-text { color: #aaa; }
1999
- .wb-url-error { color: red; font-size: 12px; }
2000
- .wb-select-footer { text-align: center; margin-top: 15px; margin-bottom: 10px; padding: 0 15px; }
2001
- .wb-popup-image { max-width: 80vw; max-height: 80vh; }
2002
-
2003
- .wb-popup-vid { max-width: 80vw; max-height: 80vh; }
2004
-
2005
- .wb-url-icon {
2006
- color: #fff;
2007
- font-size: 15px;
2008
- }
2009
-
2010
-
2011
-
2012
- .settings-group-content.group-carousel.settings .settings-field {
2013
- display: block;
2014
- }
2015
-
2016
- :has(>.settings-field) {
2017
- display: flow-root;
2018
- }
2019
-
2020
- .settings-group-header > i[class^=aga-] {
2021
- font-size: var(--aw-f-s-4);
2022
- color: var(--c-6);
2023
- }
2024
- .settings-field input[type=text], .settings-field input[type=number], .settings-field select, .settings-field textarea {
2025
- flex: 1;
2026
- width: 100%;
2027
- padding: 5px 10px;
2028
- border: 1px solid transparent;
2029
- background-color: var(--c-3);
2030
- color: var(--c-7);
2031
- border-radius: 4px;
2032
- box-sizing: border-box;
2033
- font-size: 13px;
2034
- transition: border-color .2s,box-shadow .2s;
2035
- }
2036
-
2037
- .settings-field input[type=text]:hover, .settings-field input[type=number]:hover, .settings-field select:hover, .settings-field textarea:hover {
2038
- border-color: var(--c-6);
2039
- }
2040
-
2041
- .settings-field input[type=text]:focus, .settings-field input[type=number]:focus, .settings-field select:focus, .settings-field textarea:focus {
2042
- border-color: var(--c-100);
2043
- }
2044
-
2045
- .settings-group-header > i[class*=" aga-"]{font-size: var(--aw-f-s-4); color: var(--c-6);}
2046
-
2047
- .settings-field input[type=color] {
2048
- flex: 0 0 40px;
2049
- height: 30px;
2050
- padding: 0;
2051
- border: none;
2052
- background: transparent;
2053
- cursor: pointer;
2054
- width: 64px;
2055
- border-radius: unset;
2056
- }
2057
-
2058
- .settings-field input[type=number] + .unit-selector-mini {
2059
- width: 52px;
2060
- flex: 0;
2061
- padding-left: 0;
2062
- border-left: 1px solid var(--c-99);
2063
- border-top-left-radius: 0;
2064
- border-bottom-left-radius: 0;
2065
- }
2066
-
2067
- .templatestyle-preview-label {
2068
- width: 100%;
2069
- height: 100%;
2070
- color: var(--c-7);
2071
- }
2072
-
2073
- .templatestyle-preview-wrapper .templatestyle-hover-overlay > i[class^=aga-]{font-size: 17px;}
2074
-