appscms-tools-theme 2.5.3 → 2.5.5

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,717 @@
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: '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
+ }