appscms-tools-theme 2.6.7 → 2.6.9

Sign up to get free protection for your applications and to get access to all the features.
data/assets/css/frame.css CHANGED
@@ -1,717 +1,726 @@
1
- body {
2
- font-family: 'PT Sans', sans-serif !important;
3
- }
4
- #img-svg {
5
- margin: auto;
6
- margin-top: 16px;
7
- height: 67px;
8
- width: 98px;
9
- }
10
-
11
- #file-loader {
12
- display: flex;
13
- align-items: center;
14
- flex-direction: column;
15
- }
16
-
17
- #file-loader img {
18
- height: 60px;
19
- }
20
-
21
- #file-loader p {
22
- text-align: center;
23
- color: #fff;
24
- font-size: 17px;
25
- }
26
-
27
- #loading-img {
28
- height: 27px;
29
- width: 27px;
30
- margin-right: 21px;
31
- }
32
-
33
- #dropbox svg,
34
- #filepicker svg,
35
- .boxes svg {
36
- height: 24px !important;
37
- width: 24px !important;
38
- }
39
-
40
- .file-picker-dropdown a,
41
- .file-picker-dropdown button {
42
- border: none;
43
- width: 100%;
44
- border-radius: 4px;
45
- text-align: left;
46
- background: #fff;
47
- font-weight: 400;
48
- font-size: 16px;
49
- line-height: 24px;
50
- padding: 15px 24px;
51
- list-style: none;
52
- height: 54px;
53
- }
54
-
55
- .file-picker-dropdown {
56
- width: 213px;
57
- position: absolute;
58
- background: #fff;
59
- top: 111%;
60
- right: 0;
61
- display: none;
62
- box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
63
- border-radius: 4px;
64
- }
65
-
66
- .file-pick-dropdown i {
67
- margin: 0;
68
- }
69
-
70
- .boxes {
71
- background: #fff;
72
- border-radius: 0;
73
- cursor: pointer;
74
- display: flex;
75
- align-items: center;
76
- padding: 15px 24px;
77
- height: 54px;
78
- border-top-left-radius: 4px;
79
- border-bottom-left-radius: 4px;
80
- justify-content: center;
81
- font-size: 15px;
82
- font-weight: 800;
83
- color: #000;
84
- }
85
-
86
- .file-pick-dropdown {
87
- color: #000;
88
- cursor: pointer;
89
- display: inline-flex;
90
- background: #fff;
91
- height: 54px;
92
- border-left: 1px solid rgba(95, 88, 88, 0.75);
93
- padding: 13px 20px;
94
- border-top-right-radius: 4px;
95
- border-bottom-right-radius: 4px;
96
- align-items: center;
97
- position: relative;
98
- }
99
-
100
- .custom-box {
101
- padding: 15px;
102
- }
103
-
104
- .inner-box {
105
- border: 1px dashed rgba(0, 0, 0, 0.15);
106
- background: rgba(0, 0, 0, 0.1);
107
- padding: 40px;
108
- min-height: 300px;
109
- width: 100%;
110
- display: flex;
111
- align-items: center;
112
- justify-content: center;
113
- }
114
- #dropfile {
115
- font-size: 16px;
116
- margin-top: 15px;
117
- text-align: center;
118
- color: #fff;
119
- }
120
- .saving-file-download-wrap {
121
- display: flex;
122
- flex-direction: column;
123
- align-items: center;
124
- }
125
- #download {
126
- padding: 10px 16px;
127
- background: #fff;
128
- }
129
-
130
- .trust-img {
131
- height: 80px;
132
- width: 80px;
133
- }
134
- .options-panel select,
135
- textarea,
136
- input {
137
- width: 100%;
138
- text-align: left;
139
- background: #fff;
140
- height: 34px;
141
- display: flex;
142
- border-radius: 4px;
143
- align-items: center;
144
- justify-content: space-between;
145
- box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
146
- color: #0f0c0c;
147
- border: 1px solid #ccc;
148
- }
149
- .options-panel div {
150
- width: 100%;
151
- }
152
- #action-button {
153
- background-color: #ff6537;
154
- margin: 0;
155
- width: 180px;
156
- padding: 10px 0;
157
- font-size: 13pt;
158
- position: relative;
159
- border-radius: 2px;
160
- border: 1px solid #ff6131;
161
- color: #fff;
162
- font-weight: 600;
163
- display: block;
164
- margin: auto;
165
- margin-top: 20px;
166
- }
167
- #workspace-area input[type='text'] {
168
- height: 40px;
169
- border: 1px solid gray;
170
- border-radius: 2px;
171
- }
172
- #canvas-area {
173
- width: 100%;
174
- margin-top: 30px;
175
- max-width: 100%;
176
- }
177
- #img-svg {
178
- margin: auto;
179
- margin-top: 16px;
180
- height: 67px;
181
- width: 98px;
182
- }
183
-
184
- #file-loader {
185
- display: flex;
186
- align-items: center;
187
- flex-direction: column;
188
- }
189
-
190
- #file-loader img {
191
- height: 60px;
192
- }
193
-
194
- #file-loader p {
195
- text-align: center;
196
- color: #fff;
197
- font-size: 17px;
198
- }
199
-
200
- #loading-img {
201
- height: 27px;
202
- width: 27px;
203
- margin-right: 21px;
204
- }
205
-
206
- #dropbox svg,
207
- #filepicker svg,
208
- .boxes svg {
209
- height: 24px !important;
210
- width: 24px !important;
211
- }
212
-
213
- .file-picker-dropdown a,
214
- .file-picker-dropdown button {
215
- border: none;
216
- width: 100%;
217
- border-radius: 4px;
218
- text-align: left;
219
- background: #fff;
220
- font-weight: 400;
221
- font-size: 16px;
222
- line-height: 24px;
223
- padding: 15px 24px;
224
- list-style: none;
225
- height: 54px;
226
- }
227
-
228
- .file-picker-dropdown {
229
- width: 213px;
230
- position: absolute;
231
- background: #fff;
232
- top: 111%;
233
- right: 0;
234
- display: none;
235
- box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
236
- border-radius: 4px;
237
- }
238
-
239
- .file-pick-dropdown i {
240
- margin: 0;
241
- }
242
-
243
- .boxes {
244
- background: #fff;
245
- border-radius: 0;
246
- cursor: pointer;
247
- display: flex;
248
- align-items: center;
249
- padding: 15px 24px;
250
- height: 54px;
251
- border-top-left-radius: 4px;
252
- border-bottom-left-radius: 4px;
253
- justify-content: center;
254
- font-size: 15px;
255
- font-weight: 800;
256
- color: #000;
257
- }
258
-
259
- .file-pick-dropdown {
260
- color: #000;
261
- cursor: pointer;
262
- display: inline-flex;
263
- background: #fff;
264
- height: 54px;
265
- border-left: 1px solid rgba(95, 88, 88, 0.75);
266
- padding: 13px 20px;
267
- border-top-right-radius: 4px;
268
- border-bottom-right-radius: 4px;
269
- align-items: center;
270
- position: relative;
271
- }
272
-
273
- .crop-img-box {
274
- background-color: #fff;
275
- width: 100%;
276
- border-radius: 0.75em;
277
- border: 1px solid #f2f2f2;
278
- box-shadow: 0px 5px 16px -2px rgb(42 115 217 / 20%);
279
- font-size: 16px;
280
- height: auto;
281
- display: none;
282
- }
283
-
284
- .custom-box {
285
- padding: 15px;
286
- }
287
-
288
- .inner-box {
289
- border: 1px dashed rgba(0, 0, 0, 0.15);
290
- background: rgba(0, 0, 0, 0.1);
291
- padding: 40px;
292
- min-height: 300px;
293
- width: 100%;
294
- }
295
- #dropfile {
296
- font-size: 16px;
297
- margin-top: 15px;
298
- text-align: center;
299
- color: #fff;
300
- }
301
- .options-panel {
302
- box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
303
- border-radius: 4px;
304
- padding: 30px;
305
- width: 100%;
306
- }
307
- .options-panel .title {
308
- width: 100%;
309
- font-size: 28px;
310
- line-height: 36px;
311
- color: #000;
312
- font-weight: 700;
313
- text-align: left;
314
- text-transform: capitalize;
315
- }
316
- .options-panel .description {
317
- width: 100%;
318
- font-size: 17px;
319
- color: #666;
320
- font-weight: 400;
321
- text-align: left;
322
- }
323
- .options-title {
324
- width: 100%;
325
- font-size: 17px;
326
- color: #666;
327
- font-weight: 400;
328
- text-align: left;
329
- }
330
- #download-button {
331
- text-decoration: none;
332
- border-radius: 2px;
333
- border: 1px solid #ff6131;
334
- box-shadow: 0;
335
- color: #fff;
336
- margin: 3px;
337
- padding: 4px 15px;
338
- }
339
- #download-button svg {
340
- fill: #fff;
341
- margin-right: 4px;
342
- margin-bottom: 4px;
343
- height: 15px;
344
- }
345
- .download-wrapper {
346
- display: flex;
347
- align-items: center;
348
- border-bottom: 1px solid #ddd;
349
- margin: 12px 0px;
350
- padding: 12px 0px;
351
- }
352
- #canvas-panel canvas {
353
- max-width: 100%;
354
- }
355
- .example-images-modal-container,
356
- .crop-image-modal-container {
357
- position: fixed;
358
- display: none;
359
- justify-content: center;
360
- background-color: rgba(0, 0, 0, 0.297);
361
- height: 100vh;
362
- width: 100%;
363
- top: 0;
364
- left: 0;
365
- z-index: 999999;
366
- padding: 0px 20px;
367
- }
368
- .example-images-modal,
369
- .crop-image-modal {
370
- height: fit-content;
371
- background-color: #fff;
372
- width: 100%;
373
- margin-top: 10px;
374
- border-radius: 5px;
375
- padding: 0;
376
- overflow-y: auto;
377
- }
378
- .example-images-modal-header,
379
- .crop-image-modal-header {
380
- border-top-right-radius: 5px;
381
- border-top-left-radius: 5px;
382
- display: flex;
383
- justify-content: space-between;
384
- background-color: #ff5554;
385
- display: flex;
386
- align-items: center;
387
- padding: 10px 20px;
388
- }
389
- .example-images-modal-header div,
390
- .crop-image-modal-header div {
391
- height: 100%;
392
- display: flex;
393
- align-items: center;
394
- font-size: 20px;
395
- color: #fff;
396
- }
397
- .example-images-modal-body,
398
- .crop-image-modal-body {
399
- width: 450px;
400
- margin: 10px auto;
401
- }
402
- .example-images-modal-header button,
403
- .crop-image-modal-header button {
404
- border: none;
405
- background-color: transparent;
406
- }
407
- .example-images-modal-header button i,
408
- .crop-image-modal-header button i {
409
- color: #fff;
410
- font-size: 20px;
411
- }
412
- .example-images-modal-body,
413
- .crop-image-modal-body {
414
- border-top-right-radius: 5px;
415
- border-top-left-radius: 5px;
416
- }
417
- #crop {
418
- border: none;
419
- padding: 7px 14px;
420
- color: #fff;
421
- }
422
- .carousel-control-next,
423
- .carousel-control-prev {
424
- border: none;
425
- background: none;
426
- height: 40px;
427
- background: #ff5554;
428
- top: 50%;
429
- }
430
- .accordion > .card > .card-header {
431
- background: none;
432
- border: none;
433
- height: 34px;
434
- padding: 0;
435
- }
436
-
437
- .accordion > .card {
438
- border: none;
439
- border-bottom: 1px solid #f2f2f2 !important;
440
- display: block;
441
-
442
- color: #444;
443
- text-decoration: none;
444
- font-size: 0.95em;
445
- border-radius: 1px;
446
- }
447
- .card-header:hover {
448
- background: #f8f8f8 !important;
449
- }
450
- .categories-list .card-body {
451
- padding: 0px;
452
- }
453
- .categories-list .card-body a {
454
- width: 100%;
455
- text-align: left;
456
- display: block;
457
- border-top: 1px solid #dadada;
458
- padding: 9px 9px;
459
- }
460
- .categories-list .accordion > .card > .card-header {
461
- display: flex;
462
- justify-content: space-between;
463
- background-color: transparent;
464
- padding: 7px 9px;
465
- }
466
- .categories-list .accordion > .card > .card-header i {
467
- color: #888888;
468
- margin-bottom: 0;
469
- font-size: 19px;
470
- }
471
- .categories-list .accordion > .card > .card-header {
472
- height: auto;
473
- }
474
- .categories-list .accordion > .card > .card-header > button {
475
- display: flex;
476
- justify-content: space-between;
477
- align-items: center;
478
- width: 100%;
479
- }
480
- .frame-h1 {
481
- margin: 0;
482
- font-size: 17pt;
483
- line-height: 24pt;
484
- font-weight: 600;
485
- text-align: left;
486
- color: #555;
487
- }
488
- .frame-h2 {
489
- font-size: 15px;
490
- line-height: 16px;
491
- color: #656464;
492
- max-width: 345px;
493
- color: #555;
494
- padding: 4px 0;
495
- text-align: left;
496
- }
497
- .image-samples {
498
- display: flex;
499
- flex-wrap: wrap;
500
- margin-top: 5px;
501
- margin-bottom: 18px;
502
- gap: 5px;
503
- cursor: pointer;
504
- }
505
- .image-samples img {
506
- cursor: pointer;
507
- width: 52px;
508
- height: 52px;
509
- float: left;
510
- background-color: #eee;
511
- }
512
-
513
- #example-h3 {
514
- font-size: 0.98em;
515
- padding: 3px 0 3px;
516
- text-align: left;
517
- color: #555;
518
- margin: 0 0 8px;
519
- font-weight: 600;
520
- border-bottom: 1px solid #dadada;
521
- }
522
- .preview-section {
523
- display: flex;
524
- justify-content: left;
525
- margin-top: 15px;
526
- }
527
- .preview-section img {
528
- width: auto;
529
- height: auto;
530
- }
531
- #effect-form label {
532
- display: block;
533
- font-weight: 600;
534
- margin: 0 0 5px;
535
- color: #666;
536
- text-align: left;
537
- text-transform: capitalize;
538
- font-size: 14px;
539
- }
540
-
541
- .submit-btn {
542
- margin: 0;
543
- width: 180px;
544
- padding: 10px 0;
545
- font-size: 13pt;
546
- position: relative;
547
- border: 1px solid #ff6131;
548
- box-shadow: 0;
549
- color: #fff;
550
- padding: 4px 15px;
551
- -webkit-border-radius: 2px;
552
- -moz-border-radius: 2px;
553
- border-radius: 2px;
554
- background: #ff6d41;
555
- background: -webkit-gradient(
556
- linear,
557
- left bottom,
558
- left top,
559
- color-stop(0, #ff6537),
560
- color-stop(1, #ff754b)
561
- );
562
- background: -ms-linear-gradient(bottom, #ff6537, #ff754b);
563
- background: -moz-linear-gradient(center bottom, #ff6537 0, #ff754b 100%);
564
- background: -o-linear-gradient(#ff754b, #ff6537);
565
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff754b', endColorstr='#ff6537', GradientType=0);
566
- }
567
- .cam-image {
568
- color: #666;
569
- height: 40px;
570
- width: 50px;
571
- display: flex;
572
- align-items: center;
573
- justify-content: center;
574
- border: 1px solid #ccc;
575
- background: #eee;
576
- background: -webkit-gradient(
577
- linear,
578
- left bottom,
579
- left top,
580
- color-stop(0, #ececec),
581
- color-stop(1, #f6f6f6)
582
- );
583
- }
584
- .cam-image i {
585
- margin-bottom: 0px;
586
- color: #666;
587
- }
588
- .small-image-preview {
589
- height: 40px;
590
- width: 50px !important;
591
- width: 100%;
592
- }
593
- .choose-image {
594
- color: #666;
595
- margin-right: 6px;
596
- border: 1px solid #ccc;
597
- background: #eee;
598
- background: -webkit-gradient(
599
- linear,
600
- left bottom,
601
- left top,
602
- color-stop(0, #ececec),
603
- color-stop(1, #f6f6f6)
604
- );
605
- padding: 0;
606
- width: 186px;
607
- height: 40px;
608
- line-height: 40px;
609
- font-size: 13pt;
610
- }
611
-
612
- #effect-form {
613
- display: flex;
614
- flex-direction: column;
615
- justify-content: left;
616
- }
617
-
618
- #effect-form input[type='text'] {
619
- box-shadow: none;
620
- border: 1px solid #ccc;
621
- background: #fff;
622
- padding: 5px 2%;
623
- margin: 4px 0;
624
- min-width: 190px;
625
- -webkit-border-radius: 2px;
626
- -moz-border-radius: 2px;
627
- border-radius: 2px;
628
- margin: 0;
629
- width: 216px;
630
- }
631
- .mb-15 {
632
- margin-bottom: 15px !important;
633
- }
634
- .btn:focus {
635
- box-shadow: none !important;
636
- }
637
- .result-info {
638
- display: flex;
639
- }
640
- .result-info a {
641
- color: #ff754b !important;
642
- cursor: pointer;
643
- text-decoration: underline;
644
- float: left;
645
- font-size: 17pt;
646
- line-height: 24pt;
647
- margin: 0 0 5px;
648
- font-weight: 600;
649
- color: #444;
650
- text-transform: capitalize;
651
- }
652
- .result-info i {
653
- margin-left: 6px;
654
- margin-right: 6px;
655
- color: black;
656
- font-size: 17px;
657
- margin-bottom: 0px;
658
- margin-top: 11px;
659
- }
660
- .result-info div {
661
- float: left;
662
- font-size: 17pt;
663
- font-weight: 600;
664
- text-transform: capitalize;
665
- line-height: 24pt;
666
- margin: 0 0 5px;
667
- color: #444;
668
- }
669
- #saving-data {
670
- display: flex;
671
- flex-direction: column;
672
- align-items: center;
673
- }
674
- #saving-data img {
675
- height: 200px;
676
- }
677
- .photo-card {
678
- display: inline-block;
679
- zoom: 1;
680
- margin: 10px 6px 6px;
681
- padding: 8px 12px 4px;
682
- border: 1px solid #e5e5e5;
683
- border-bottom-color: #dcdcdc;
684
- border-right-color: #e0e0e0;
685
- text-decoration: none;
686
- position: relative;
687
- overflow: hidden;
688
- -webkit-border-radius: 2px;
689
- -moz-border-radius: 2px;
690
- border-radius: 2px;
691
- }
692
- .photo-effect-feature-name {
693
- text-align: center;
694
- color: #777;
695
- }
696
- .categories-list li {
697
- font-size: 1em;
698
- border-bottom: 1px solid #f2f2f2;
699
- }
700
- .categories-list .category-link {
701
- display: block;
702
- padding: 7px 9px;
703
- color: #444;
704
- text-transform: capitalize;
705
- text-decoration: none;
706
- font-size: 0.95em;
707
- -webkit-border-radius: 1px;
708
- -moz-border-radius: 1px;
709
- border-radius: 1px;
710
- }
711
- .categories-list .category-link:hover {
712
- background-color: #f4f4f4;
713
- }
714
-
715
- .categories-list .active-cat {
716
- background-color: #f4f4f4;
717
- }
1
+ body {
2
+ font-family: "Dancing Script", cursive;
3
+ }
4
+ :root {
5
+ --dark: #374151;
6
+ --darker: #1f2937;
7
+ --darkest: #111827;
8
+ --gray: #6b7280;
9
+ --light: #eee;
10
+ --pink: #ec4899;
11
+ --purple: #8b5cf6;
12
+ }
13
+ #img-svg {
14
+ margin: auto;
15
+ margin-top: 16px;
16
+ height: 67px;
17
+ width: 98px;
18
+ }
19
+
20
+ #file-loader {
21
+ display: flex;
22
+ align-items: center;
23
+ flex-direction: column;
24
+ }
25
+
26
+ #file-loader img {
27
+ height: 60px;
28
+ }
29
+
30
+ #file-loader p {
31
+ text-align: center;
32
+ color: #fff;
33
+ font-size: 17px;
34
+ }
35
+
36
+ #loading-img {
37
+ height: 27px;
38
+ width: 27px;
39
+ margin-right: 21px;
40
+ }
41
+
42
+ #dropbox svg,
43
+ #filepicker svg,
44
+ .boxes svg {
45
+ height: 24px !important;
46
+ width: 24px !important;
47
+ }
48
+
49
+ .file-picker-dropdown a,
50
+ .file-picker-dropdown button {
51
+ border: none;
52
+ width: 100%;
53
+ border-radius: 4px;
54
+ text-align: left;
55
+ background: #fff;
56
+ font-weight: 400;
57
+ font-size: 16px;
58
+ line-height: 24px;
59
+ padding: 15px 24px;
60
+ list-style: none;
61
+ height: 54px;
62
+ }
63
+
64
+ .file-picker-dropdown {
65
+ width: 213px;
66
+ position: absolute;
67
+ background: #fff;
68
+ top: 111%;
69
+ right: 0;
70
+ display: none;
71
+ box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
72
+ border-radius: 4px;
73
+ }
74
+
75
+ .file-pick-dropdown i {
76
+ margin: 0;
77
+ }
78
+
79
+ .boxes {
80
+ background: #fff;
81
+ border-radius: 0;
82
+ cursor: pointer;
83
+ display: flex;
84
+ align-items: center;
85
+ padding: 15px 24px;
86
+ height: 54px;
87
+ border-top-left-radius: 4px;
88
+ border-bottom-left-radius: 4px;
89
+ justify-content: center;
90
+ font-size: 15px;
91
+ font-weight: 800;
92
+ color: #000;
93
+ }
94
+
95
+ .file-pick-dropdown {
96
+ color: #000;
97
+ cursor: pointer;
98
+ display: inline-flex;
99
+ background: #fff;
100
+ height: 54px;
101
+ border-left: 1px solid rgba(95, 88, 88, 0.75);
102
+ padding: 13px 20px;
103
+ border-top-right-radius: 4px;
104
+ border-bottom-right-radius: 4px;
105
+ align-items: center;
106
+ position: relative;
107
+ }
108
+
109
+ .custom-box {
110
+ padding: 15px;
111
+ }
112
+
113
+ .inner-box {
114
+ border: 1px dashed rgba(0, 0, 0, 0.15);
115
+ background: rgba(0, 0, 0, 0.1);
116
+ padding: 40px;
117
+ min-height: 300px;
118
+ width: 100%;
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ }
123
+ #dropfile {
124
+ font-size: 16px;
125
+ margin-top: 15px;
126
+ text-align: center;
127
+ color: #fff;
128
+ }
129
+ .saving-file-download-wrap {
130
+ display: flex;
131
+ flex-direction: column;
132
+ align-items: center;
133
+ }
134
+ #download {
135
+ padding: 10px 16px;
136
+ background: #fff;
137
+ }
138
+
139
+ .trust-img {
140
+ height: 80px;
141
+ width: 80px;
142
+ }
143
+ .options-panel select,
144
+ textarea,
145
+ input {
146
+ width: 100%;
147
+ text-align: left;
148
+ background: #fff;
149
+ height: 34px;
150
+ display: flex;
151
+ border-radius: 4px;
152
+ align-items: center;
153
+ justify-content: space-between;
154
+ box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
155
+ color: #0f0c0c;
156
+ border: 1px solid #ccc;
157
+ }
158
+ .options-panel div {
159
+ width: 100%;
160
+ }
161
+ #action-button {
162
+ background-color: #ff6537;
163
+ margin: 0;
164
+ width: 180px;
165
+ padding: 10px 0;
166
+ font-size: 13pt;
167
+ position: relative;
168
+ border-radius: 2px;
169
+ border: 1px solid #ff6131;
170
+ color: #fff;
171
+ font-weight: 600;
172
+ display: block;
173
+ margin: auto;
174
+ margin-top: 20px;
175
+ }
176
+ #workspace-area input[type="text"] {
177
+ height: 40px;
178
+ border: 1px solid gray;
179
+ border-radius: 2px;
180
+ }
181
+ #canvas-area {
182
+ width: 100%;
183
+ margin-top: 30px;
184
+ max-width: 100%;
185
+ }
186
+ #img-svg {
187
+ margin: auto;
188
+ margin-top: 16px;
189
+ height: 67px;
190
+ width: 98px;
191
+ }
192
+
193
+ #file-loader {
194
+ display: flex;
195
+ align-items: center;
196
+ flex-direction: column;
197
+ }
198
+
199
+ #file-loader img {
200
+ height: 60px;
201
+ }
202
+
203
+ #file-loader p {
204
+ text-align: center;
205
+ color: #fff;
206
+ font-size: 17px;
207
+ }
208
+
209
+ #loading-img {
210
+ height: 27px;
211
+ width: 27px;
212
+ margin-right: 21px;
213
+ }
214
+
215
+ #dropbox svg,
216
+ #filepicker svg,
217
+ .boxes svg {
218
+ height: 24px !important;
219
+ width: 24px !important;
220
+ }
221
+
222
+ .file-picker-dropdown a,
223
+ .file-picker-dropdown button {
224
+ border: none;
225
+ width: 100%;
226
+ border-radius: 4px;
227
+ text-align: left;
228
+ background: #fff;
229
+ font-weight: 400;
230
+ font-size: 16px;
231
+ line-height: 24px;
232
+ padding: 15px 24px;
233
+ list-style: none;
234
+ height: 54px;
235
+ }
236
+
237
+ .file-picker-dropdown {
238
+ width: 213px;
239
+ position: absolute;
240
+ background: #fff;
241
+ top: 111%;
242
+ right: 0;
243
+ display: none;
244
+ box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
245
+ border-radius: 4px;
246
+ }
247
+
248
+ .file-pick-dropdown i {
249
+ margin: 0;
250
+ }
251
+
252
+ .boxes {
253
+ background: #fff;
254
+ border-radius: 0;
255
+ cursor: pointer;
256
+ display: flex;
257
+ align-items: center;
258
+ padding: 15px 24px;
259
+ height: 54px;
260
+ border-top-left-radius: 4px;
261
+ border-bottom-left-radius: 4px;
262
+ justify-content: center;
263
+ font-size: 15px;
264
+ font-weight: 800;
265
+ color: #000;
266
+ }
267
+
268
+ .file-pick-dropdown {
269
+ color: #000;
270
+ cursor: pointer;
271
+ display: inline-flex;
272
+ background: #fff;
273
+ height: 54px;
274
+ border-left: 1px solid rgba(95, 88, 88, 0.75);
275
+ padding: 13px 20px;
276
+ border-top-right-radius: 4px;
277
+ border-bottom-right-radius: 4px;
278
+ align-items: center;
279
+ position: relative;
280
+ }
281
+
282
+ .crop-img-box {
283
+ background-color: #fff;
284
+ width: 100%;
285
+ border-radius: 0.75em;
286
+ border: 1px solid #f2f2f2;
287
+ box-shadow: 0px 5px 16px -2px rgb(42 115 217 / 20%);
288
+ font-size: 16px;
289
+ height: auto;
290
+ display: none;
291
+ }
292
+
293
+ .custom-box {
294
+ padding: 15px;
295
+ }
296
+
297
+ .inner-box {
298
+ border: 1px dashed rgba(0, 0, 0, 0.15);
299
+ background: rgba(0, 0, 0, 0.1);
300
+ padding: 40px;
301
+ min-height: 300px;
302
+ width: 100%;
303
+ }
304
+ #dropfile {
305
+ font-size: 16px;
306
+ margin-top: 15px;
307
+ text-align: center;
308
+ color: #fff;
309
+ }
310
+ .options-panel {
311
+ box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
312
+ border-radius: 4px;
313
+ padding: 30px;
314
+ width: 100%;
315
+ }
316
+ .options-panel .title {
317
+ width: 100%;
318
+ font-size: 28px;
319
+ line-height: 36px;
320
+ color: #000;
321
+ font-weight: 700;
322
+ text-align: left;
323
+ text-transform: capitalize;
324
+ }
325
+ .options-panel .description {
326
+ width: 100%;
327
+ font-size: 17px;
328
+ color: #666;
329
+ font-weight: 400;
330
+ text-align: left;
331
+ }
332
+ .options-title {
333
+ width: 100%;
334
+ font-size: 17px;
335
+ color: #666;
336
+ font-weight: 400;
337
+ text-align: left;
338
+ }
339
+ #download-button {
340
+ text-decoration: none;
341
+ border-radius: 2px;
342
+ border: 1px solid linear-gradient(to right, var(--pink), var(--purple));
343
+ box-shadow: 0;
344
+ color: #fff;
345
+ margin: 3px;
346
+ padding: 4px 15px;
347
+ }
348
+ #download-button svg {
349
+ fill: #fff;
350
+ margin-right: 4px;
351
+ margin-bottom: 4px;
352
+ height: 15px;
353
+ }
354
+ .download-wrapper {
355
+ display: flex;
356
+ align-items: center;
357
+ border-bottom: 1px solid #ddd;
358
+ margin: 12px 0px;
359
+ padding: 12px 0px;
360
+ }
361
+ #canvas-panel canvas {
362
+ max-width: 100%;
363
+ }
364
+ .example-images-modal-container,
365
+ .crop-image-modal-container {
366
+ position: fixed;
367
+ display: none;
368
+ justify-content: center;
369
+ background-color: rgba(0, 0, 0, 0.297);
370
+ height: 100vh;
371
+ width: 100%;
372
+ top: 0;
373
+ left: 0;
374
+ z-index: 999999;
375
+ padding: 0px 20px;
376
+ }
377
+ .example-images-modal,
378
+ .crop-image-modal {
379
+ height: fit-content;
380
+ background-color: #fff;
381
+ width: 100%;
382
+ margin-top: 10px;
383
+ border-radius: 5px;
384
+ padding: 0;
385
+ overflow-y: auto;
386
+ }
387
+ .example-images-modal-header,
388
+ .crop-image-modal-header {
389
+ border-top-right-radius: 5px;
390
+ border-top-left-radius: 5px;
391
+ display: flex;
392
+ justify-content: space-between;
393
+ background: linear-gradient(to right, var(--pink), var(--purple));
394
+ display: flex;
395
+ align-items: center;
396
+ padding: 10px 20px;
397
+ }
398
+ .example-images-modal-header div,
399
+ .crop-image-modal-header div {
400
+ height: 100%;
401
+ display: flex;
402
+ align-items: center;
403
+ font-size: 20px;
404
+ color: #fff;
405
+ }
406
+ .example-images-modal-body,
407
+ .crop-image-modal-body {
408
+ width: 450px;
409
+ margin: 10px auto;
410
+ }
411
+ .example-images-modal-header button,
412
+ .crop-image-modal-header button {
413
+ border: none;
414
+ background-color: transparent;
415
+ }
416
+ .example-images-modal-header button i,
417
+ .crop-image-modal-header button i {
418
+ color: #fff;
419
+ font-size: 20px;
420
+ }
421
+ .example-images-modal-body,
422
+ .crop-image-modal-body {
423
+ border-top-right-radius: 5px;
424
+ border-top-left-radius: 5px;
425
+ }
426
+ #crop {
427
+ border: none;
428
+ padding: 7px 14px;
429
+ color: #fff;
430
+ }
431
+ .carousel-control-next,
432
+ .carousel-control-prev {
433
+ border: none;
434
+ background: none;
435
+ height: 40px;
436
+ background: #ff5554;
437
+ top: 50%;
438
+ }
439
+ .accordion > .card > .card-header {
440
+ background: none;
441
+ border: none;
442
+ height: 34px;
443
+ padding: 0;
444
+ }
445
+
446
+ .accordion > .card {
447
+ border: none;
448
+ border-bottom: 1px solid #f2f2f2 !important;
449
+ display: block;
450
+
451
+ color: #444;
452
+ text-decoration: none;
453
+ font-size: 0.95em;
454
+ border-radius: 1px;
455
+ }
456
+ .card-header:hover {
457
+ background: #f8f8f8 !important;
458
+ }
459
+ .categories-list .card-body {
460
+ padding: 0px;
461
+ }
462
+ .categories-list .card-body a {
463
+ width: 100%;
464
+ text-align: left;
465
+ display: block;
466
+ border-top: 1px solid #dadada;
467
+ padding: 9px 9px;
468
+ }
469
+ .categories-list .accordion > .card > .card-header {
470
+ display: flex;
471
+ justify-content: space-between;
472
+ background-color: transparent;
473
+ padding: 7px 9px;
474
+ }
475
+ .categories-list .accordion > .card > .card-header i {
476
+ color: #888888;
477
+ margin-bottom: 0;
478
+ font-size: 19px;
479
+ }
480
+ .categories-list .accordion > .card > .card-header {
481
+ height: auto;
482
+ }
483
+ .categories-list .accordion > .card > .card-header > button {
484
+ display: flex;
485
+ justify-content: space-between;
486
+ align-items: center;
487
+ width: 100%;
488
+ }
489
+ .frame-h1 {
490
+ margin: 0;
491
+ font-size: 17pt;
492
+ line-height: 24pt;
493
+ font-weight: 600;
494
+ text-align: center;
495
+ color: #555;
496
+ }
497
+ .frame-h2 {
498
+ font-size: 15px;
499
+ line-height: 16px;
500
+ color: #656464;
501
+ max-width: 100%;
502
+ color: #555;
503
+ padding: 4px 0;
504
+ text-align: center;
505
+ }
506
+ .image-samples {
507
+ display: flex;
508
+ flex-wrap: wrap;
509
+ margin-top: 5px;
510
+ margin-bottom: 18px;
511
+ gap: 5px;
512
+ cursor: pointer;
513
+ }
514
+ .image-samples img {
515
+ cursor: pointer;
516
+ width: 52px;
517
+ height: 52px;
518
+ float: left;
519
+ background-color: #eee;
520
+ }
521
+
522
+ #example-h3 {
523
+ font-size: 0.98em;
524
+ padding: 3px 0 3px;
525
+ text-align: left;
526
+ color: #555;
527
+ margin: 0 0 8px;
528
+ font-weight: 600;
529
+ border-bottom: 1px solid #dadada;
530
+ }
531
+ .preview-section {
532
+ display: flex;
533
+ justify-content: left;
534
+ margin-top: 15px;
535
+ }
536
+ .preview-section img {
537
+ width: auto;
538
+ height: auto;
539
+ }
540
+ #effect-form label {
541
+ display: block;
542
+ font-weight: 600;
543
+ margin: 0 0 5px;
544
+ color: #666;
545
+ text-align: left;
546
+ text-transform: capitalize;
547
+ font-size: 14px;
548
+ }
549
+
550
+ .submit-btn {
551
+ margin: 0;
552
+ width: 216px;
553
+ padding: 10px 0;
554
+ font-size: 13pt;
555
+ position: relative;
556
+ border: 1px solid linear-gradient(to right, var(--pink), var(--purple));
557
+ box-shadow: 0;
558
+ color: #fff;
559
+ padding: 5px 15px;
560
+ -webkit-border-radius: 2px;
561
+ -moz-border-radius: 2px;
562
+ border-radius: 2px;
563
+ background: linear-gradient(to right, var(--pink), var(--purple));
564
+ background: -webkit-gradient(
565
+ linear,
566
+ left bottom,
567
+ left top,
568
+ color-stop(0, #ff6537),
569
+ color-stop(1, #ff754b)
570
+ );
571
+ background: linear-gradient(to right, var(--pink), var(--purple));
572
+ background: linear-gradient(to right, var(--pink), var(--purple));
573
+ background: linear-gradient(to right, var(--pink), var(--purple));
574
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff754b', endColorstr='#ff6537', GradientType=0);
575
+ }
576
+ .cam-image {
577
+ color: #666;
578
+ height: 40px;
579
+ width: 50px;
580
+ display: flex;
581
+ align-items: center;
582
+ justify-content: center;
583
+ border: 1px solid #ccc;
584
+ background: #eee;
585
+ background: -webkit-gradient(
586
+ linear,
587
+ left bottom,
588
+ left top,
589
+ color-stop(0, #ececec),
590
+ color-stop(1, #f6f6f6)
591
+ );
592
+ }
593
+ .cam-image i {
594
+ margin-bottom: 0px;
595
+ color: #666;
596
+ }
597
+ .small-image-preview {
598
+ height: 40px;
599
+ width: 50px !important;
600
+ width: 100%;
601
+ }
602
+ .choose-image {
603
+ color: #666;
604
+ margin-right: 6px;
605
+ border: 1px solid #ccc;
606
+ background: #eee;
607
+ background: -webkit-gradient(
608
+ linear,
609
+ left bottom,
610
+ left top,
611
+ color-stop(0, #ececec),
612
+ color-stop(1, #f6f6f6)
613
+ );
614
+ padding: 0;
615
+ width: 186px;
616
+ height: 40px;
617
+ line-height: 40px;
618
+ font-size: 13pt;
619
+ }
620
+
621
+ #effect-form {
622
+ display: flex;
623
+ flex-direction: column;
624
+ justify-content: left;
625
+ }
626
+
627
+ #effect-form input[type="text"] {
628
+ box-shadow: none;
629
+ border: 1px solid #ccc;
630
+ background: #fff;
631
+ padding: 5px 2%;
632
+ margin: 4px 0;
633
+ min-width: 190px;
634
+ -webkit-border-radius: 2px;
635
+ -moz-border-radius: 2px;
636
+ border-radius: 2px;
637
+ margin: 0;
638
+ width: 216px;
639
+ }
640
+ .mb-15 {
641
+ margin-bottom: 15px !important;
642
+ }
643
+ .btn:focus {
644
+ box-shadow: none !important;
645
+ }
646
+ .result-info {
647
+ display: flex;
648
+ }
649
+ .result-info a {
650
+ color: rgb(155, 22, 155) !important;
651
+ cursor: pointer;
652
+ text-decoration: underline;
653
+ float: left;
654
+ font-size: 17pt;
655
+ line-height: 24pt;
656
+ margin: 0 0 5px;
657
+ font-weight: 600;
658
+ color: #444;
659
+ text-transform: capitalize;
660
+ }
661
+ .result-info i {
662
+ margin-left: 6px;
663
+ margin-right: 6px;
664
+ color: black;
665
+ font-size: 17px;
666
+ margin-bottom: 0px;
667
+ margin-top: 11px;
668
+ }
669
+ .result-info div {
670
+ float: left;
671
+ font-size: 17pt;
672
+ font-weight: 600;
673
+ text-transform: capitalize;
674
+ line-height: 24pt;
675
+ margin: 0 0 5px;
676
+ color: #444;
677
+ }
678
+ #saving-data {
679
+ display: flex;
680
+ flex-direction: column;
681
+ align-items: center;
682
+ }
683
+ #saving-data img {
684
+ height: 200px;
685
+ }
686
+ .photo-card {
687
+ display: inline-block;
688
+ zoom: 1;
689
+ margin: 7px 3px 3px;
690
+ padding: 8px 12px 4px;
691
+ border: 1px solid #e5e5e5;
692
+ border-bottom-color: #dcdcdc;
693
+ border-right-color: #e0e0e0;
694
+ text-decoration: none;
695
+ position: relative;
696
+ overflow: hidden;
697
+ -webkit-border-radius: 2px;
698
+ -moz-border-radius: 2px;
699
+ border-radius: px;
700
+ }
701
+ .photo-effect-feature-name {
702
+ text-align: center;
703
+ color: #777;
704
+ }
705
+ .categories-list li {
706
+ font-size: 1em;
707
+ border-bottom: 1px solid #f2f2f2;
708
+ }
709
+ .categories-list .category-link {
710
+ display: block;
711
+ padding: 7px 9px;
712
+ color: #444;
713
+ text-transform: capitalize;
714
+ text-decoration: none;
715
+ font-size: 0.95em;
716
+ -webkit-border-radius: 1px;
717
+ -moz-border-radius: 1px;
718
+ border-radius: 1px;
719
+ }
720
+ .categories-list .category-link:hover {
721
+ background-color: #f4f4f4;
722
+ }
723
+
724
+ .categories-list .active-cat {
725
+ background-color: #f4f4f4;
726
+ }