appscms-tools-theme 4.6.2 → 4.6.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (131) hide show
  1. checksums.yaml +4 -4
  2. data/_data/about/en/about.json +16 -16
  3. data/_data/blog/nav.json +14 -14
  4. data/_data/blog/relatedblogs.json +2816 -2816
  5. data/_data/feature/en/batch-conversion.json +192 -192
  6. data/_data/feature/en/compress-pdf.json +209 -305
  7. data/_data/feature/en/devtools.json +321 -321
  8. data/_data/feature/en/face-detection.json +156 -156
  9. data/_data/feature/en/split-pdf.json +221 -221
  10. data/_data/feature/en/theframe.json +160 -160
  11. data/_data/footer/en/data.json +2 -2
  12. data/_data/header/en/data.json +412 -412
  13. data/_data/home/en/en.json +324 -324
  14. data/_data/home/en/posters.json +322 -322
  15. data/_includes/appscms/customblog/contenttool-recent-posts.html +94 -94
  16. data/_includes/appscms/customblog/pageRelatedPosts.html +68 -68
  17. data/_includes/appscms/customblog/recentposts.html +67 -67
  18. data/_includes/appscms/customblog/relatedBlogs.html +82 -82
  19. data/_includes/appscms/customblog/relatedposts.html +193 -193
  20. data/_includes/appscms/extras/appscms-postbox.html +57 -57
  21. data/_includes/appscms/featurePageAuthors/featurePageAuthors.html +85 -85
  22. data/_includes/appscms/head/bloghead.html +128 -128
  23. data/_includes/appscms/headings/contenttool-headings.html +33 -33
  24. data/_includes/appscms/headings/devtool-headings.html +38 -38
  25. data/_includes/appscms/home/contenttool-feature-boxes.html +19 -19
  26. data/_includes/appscms/home/devtool-feature-boxes.html +70 -70
  27. data/_includes/appscms/infographics/infographics.html +166 -166
  28. data/_includes/appscms/loaders/loader.html +4 -4
  29. data/_includes/appscms/navbars/devtool-navbar.html +50 -50
  30. data/_includes/appscms/navbars/devtool-toolbar.html +100 -100
  31. data/_includes/appscms/navbars/toolbar.html +4 -17
  32. data/_includes/appscms/recent-posts/recent_posts.html +90 -90
  33. data/_includes/appscms/recent-posts/related_categories_post.html +194 -194
  34. data/_includes/appscms/searchbar/devtool-searchbar.html +63 -63
  35. data/_includes/appscms/usp/usp.html +90 -90
  36. data/_includes/author_bio.html +41 -41
  37. data/_includes/authorpagehead/index.html +47 -47
  38. data/_includes/authors/authors.html +39 -39
  39. data/_includes/batch-conversion.html +141 -141
  40. data/_includes/bookmark.html +6 -6
  41. data/_includes/cssfile/links.html +54 -54
  42. data/_includes/custom-head.html +138 -138
  43. data/_includes/customCode.html +1 -1
  44. data/_includes/customScripts.html +1 -1
  45. data/_includes/customblog/pageRelatedPosts.html +87 -87
  46. data/_includes/customblog/recentposts.html +67 -67
  47. data/_includes/customblog/relatedBlogs.html +86 -86
  48. data/_includes/customblog/relatedposts.html +201 -201
  49. data/_includes/dropdown/langdropdown.html +32 -32
  50. data/_includes/feature.html +39 -39
  51. data/_includes/featurePageAuthors/featurePageAuthors.html +101 -101
  52. data/_includes/footer/index.html +537 -537
  53. data/_includes/google-analytics.html +32 -32
  54. data/_includes/head/index.html +623 -623
  55. data/_includes/header/blogHeader.html +34 -34
  56. data/_includes/header/index.html +192 -192
  57. data/_includes/infographics/infographics.html +241 -241
  58. data/_includes/paginationBlogPage.html +70 -70
  59. data/_includes/postbox.html +65 -65
  60. data/_includes/script.html +493 -493
  61. data/_includes/section/count.html +32 -32
  62. data/_includes/section/recent_posts.html +94 -94
  63. data/_includes/section/related_categories_post.html +196 -196
  64. data/_includes/share/socialshare.html +21 -21
  65. data/_includes/userTracking.html +14 -14
  66. data/_layouts/aboutUs.html +175 -175
  67. data/_layouts/allAuthors.html +131 -131
  68. data/_layouts/appscms-about.html +163 -163
  69. data/_layouts/appscms-audio.html +33 -33
  70. data/_layouts/appscms-author.html +436 -436
  71. data/_layouts/appscms-authors.html +145 -145
  72. data/_layouts/appscms-batch.html +141 -141
  73. data/_layouts/appscms-calculator.html +93 -93
  74. data/_layouts/appscms-categories.html +26 -26
  75. data/_layouts/appscms-contact.html +132 -132
  76. data/_layouts/appscms-disclaimer.html +124 -124
  77. data/_layouts/appscms-download.html +289 -289
  78. data/_layouts/appscms-feature-result.html +96 -96
  79. data/_layouts/appscms-help.html +25 -25
  80. data/_layouts/appscms-imagekit.html +96 -96
  81. data/_layouts/appscms-post.html +243 -243
  82. data/_layouts/appscms-privacy-policy.html +781 -781
  83. data/_layouts/appscms-terms-and-conditions.html +646 -646
  84. data/_layouts/appscms-video.html +33 -33
  85. data/_layouts/audio.html +33 -33
  86. data/_layouts/author.html +409 -409
  87. data/_layouts/batch.html +177 -177
  88. data/_layouts/blog-1.html +116 -116
  89. data/_layouts/blog.html +131 -131
  90. data/_layouts/calculator.html +99 -99
  91. data/_layouts/contenttool-feature.html +45 -45
  92. data/_layouts/contenttool-home.html +53 -53
  93. data/_layouts/devtool-blog.html +132 -132
  94. data/_layouts/devtool-feature.html +54 -54
  95. data/_layouts/devtool-home.html +53 -53
  96. data/_layouts/devtools.html +57 -57
  97. data/_layouts/feature-1.html +406 -406
  98. data/_layouts/feature.html +351 -351
  99. data/_layouts/featureResultPage.html +82 -82
  100. data/_layouts/frame.html +222 -222
  101. data/_layouts/home.html +281 -281
  102. data/_layouts/homeResultPage.html +32 -32
  103. data/_layouts/imagekit.html +308 -308
  104. data/_layouts/photo-effects-home.html +190 -190
  105. data/_layouts/post.html +233 -233
  106. data/assets/app.js +75 -75
  107. data/assets/css/appscms-blog.css +505 -505
  108. data/assets/css/appscms-contenttool.css +1384 -1384
  109. data/assets/css/appscms-home.css +5 -5
  110. data/assets/css/appscms-imagekit.css +855 -855
  111. data/assets/css/appscms-variables.css +19 -19
  112. data/assets/css/blog.css +510 -510
  113. data/assets/css/calculators.css +46 -46
  114. data/assets/css/devtool-main.css +1350 -1350
  115. data/assets/css/devtools.css +105 -105
  116. data/assets/css/feature-1.css +293 -293
  117. data/assets/css/imagekit copy.css +848 -848
  118. data/assets/css/imagekit.css +848 -848
  119. data/assets/css/tools.css +1847 -1847
  120. data/assets/images/close-button.svg +31 -31
  121. data/assets/images/digipaint.svg +6 -6
  122. data/assets/images/logo.svg +2 -2
  123. data/assets/images/manthink.svg +3552 -3552
  124. data/assets/images/search-icon.svg +2 -2
  125. data/assets/js/batch.js +219 -219
  126. data/assets/js/devtools.js +81 -81
  127. data/assets/js/sharePage.js +65 -65
  128. data/assets/js/usageTracking.js +143 -143
  129. data/assets/js/usageTrackingEvents.js +6 -6
  130. data/assets/js/webvitals.js +4 -4
  131. metadata +3 -3
@@ -1,849 +1,849 @@
1
- #img-svg {
2
- margin: auto;
3
- margin-top: 16px;
4
- height: 67px;
5
- width: 98px;
6
- }
7
-
8
- #file-loader {
9
- display: flex;
10
- align-items: center;
11
- flex-direction: column;
12
- }
13
-
14
- #file-loader img {
15
- height: 60px;
16
- }
17
-
18
- #file-loader p {
19
- text-align: center;
20
- color: #fff;
21
- font-size: 17px;
22
- }
23
-
24
- #loading-img {
25
- height: 27px;
26
- width: 27px;
27
- margin-right: 21px;
28
- }
29
-
30
- #dropbox svg,
31
- #filepicker svg,
32
- .boxes svg {
33
- height: 24px !important;
34
- width: 24px !important;
35
- }
36
-
37
- .file-picker-dropdown a,
38
- .file-picker-dropdown button {
39
- border: none;
40
- width: 100%;
41
- border-radius: 4px;
42
- text-align: left;
43
- background: #fff;
44
- font-weight: 400;
45
- font-size: 16px;
46
- line-height: 24px;
47
- padding: 15px 24px;
48
- list-style: none;
49
- height: 54px;
50
- }
51
-
52
- .file-picker-dropdown {
53
- width: 213px;
54
- position: absolute;
55
- background: #fff;
56
- top: 111%;
57
- right: 0;
58
- display: none;
59
- box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
60
- border-radius: 4px;
61
- }
62
-
63
- .file-pick-dropdown i {
64
- margin: 0;
65
- }
66
-
67
- .boxes {
68
- background: #fff;
69
- border-radius: 0;
70
- cursor: pointer;
71
- display: flex;
72
- align-items: center;
73
- padding: 15px 24px;
74
- height: 54px;
75
- border-top-left-radius: 4px;
76
- border-bottom-left-radius: 4px;
77
- justify-content: center;
78
- font-size: 15px;
79
- font-weight: 800;
80
- color: #000;
81
- }
82
-
83
- .file-pick-dropdown {
84
- color: #000;
85
- cursor: pointer;
86
- display: inline-flex;
87
- background: #fff;
88
- height: 54px;
89
- border-left: 1px solid rgba(95, 88, 88, 0.75);
90
- padding: 13px 20px;
91
- border-top-right-radius: 4px;
92
- border-bottom-right-radius: 4px;
93
- align-items: center;
94
- position: relative;
95
- }
96
-
97
- .crop-img-box {
98
- background-color: #fff;
99
- width: 100%;
100
- border-radius: 0.75em;
101
- border: 1px solid #f2f2f2;
102
- box-shadow: 0px 5px 16px -2px rgb(42 115 217 / 20%);
103
- font-size: 16px;
104
- height: auto;
105
- display: none;
106
- }
107
-
108
- .custom-box {
109
- padding: 15px;
110
- }
111
-
112
- .inner-box {
113
- border: 1px dashed rgba(0, 0, 0, 0.15);
114
- background: rgba(0, 0, 0, 0.1);
115
- padding: 40px;
116
- min-height: 300px;
117
- width: 100%;
118
- }
119
-
120
- #dropfile {
121
- font-size: 16px;
122
- margin-top: 15px;
123
- text-align: center;
124
- color: #fff;
125
- }
126
-
127
- .options-panel {
128
- box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
129
- border-radius: 4px;
130
- padding: 30px;
131
- width: 100%;
132
- }
133
-
134
- .options-panel .title {
135
- width: 100%;
136
- font-size: 28px;
137
- line-height: 36px;
138
- color: #000;
139
- font-weight: 700;
140
- text-align: left;
141
- }
142
-
143
- .options-panel .description {
144
- width: 100%;
145
- font-size: 17px;
146
- color: #666;
147
- font-weight: 400;
148
- text-align: left;
149
- }
150
-
151
- .options-title {
152
- width: 100%;
153
- font-size: 17px;
154
- color: #666;
155
- font-weight: 400;
156
- text-align: left;
157
- }
158
-
159
- .cropper-center {
160
- position: absolute;
161
- top: 0 !important;
162
- left: 0 !important;
163
- display: grid !important;
164
- flex-wrap: wrap;
165
- width: 100% !important;
166
- height: 100% !important;
167
- /* height: 0; */
168
- opacity: 0.75;
169
- }
170
-
171
- .cropper-center .cell {
172
- background-color: transparent;
173
- border-right: 2px dashed #0050e5;
174
- z-index: 9999;
175
- }
176
-
177
- .cropper-center .row-item {
178
- border-bottom: 2px dashed #0050e5;
179
- display: grid;
180
- grid-auto-flow: column;
181
- }
182
-
183
- .last-child {
184
- border: none !important;
185
- }
186
-
187
- .row-col-show {
188
- display: inline-block;
189
- padding: 4px 18px;
190
- min-width: 70px;
191
- text-align: center;
192
- margin-right: 6px;
193
- border-radius: 50px;
194
- font-size: 21px;
195
- color: #fff;
196
- font-weight: 900;
197
- text-decoration: none;
198
- transition: all 0.3s;
199
- box-shadow: inset 0 2px 3px rgb(0 0 0 / 30%);
200
- background-color: #0050e5;
201
- }
202
-
203
- .buttons-box {
204
- margin: 12px 0 18px 0;
205
- display: flex;
206
- align-items: center;
207
- }
208
-
209
- .action-buttons {
210
- display: flex;
211
- align-items: center;
212
- justify-content: center;
213
- cursor: pointer;
214
- width: 34px;
215
- height: 34px;
216
- padding: 1px 8px;
217
- margin-right: 4px;
218
- border-radius: 50px;
219
- background: #ccc;
220
- font-size: 21px;
221
- transition: all 0.3s;
222
- }
223
-
224
- #image-format {
225
- padding: 6px 33px 6px 16px;
226
- border-radius: 4px;
227
- width: 123px;
228
- border: 1px solid #ccc;
229
- outline: none;
230
- margin-left: 7px;
231
- /* border: none; */
232
- font-weight: bold;
233
- font-size: 15px;
234
- color: #555;
235
- text-transform: uppercase;
236
- margin-left: 6px;
237
- }
238
-
239
- .download-format {
240
- display: flex;
241
- align-items: center;
242
- /* border-bottom: 1px solid #ddd; */
243
- padding: 0px 24px;
244
- }
245
-
246
- .download-wrapper {
247
- display: flex;
248
- justify-content: space-between;
249
- margin-bottom: 24px;
250
- }
251
-
252
- .select-format-title {
253
- position: relative;
254
- display: inline-block;
255
- /* padding: 0 24px; */
256
- font-size: 16px;
257
- padding: 0px 24px 0px 0px;
258
- color: #066;
259
- border-right: 1px solid #eee;
260
- text-decoration: none;
261
- filter: grayscale(100%);
262
- display: flex;
263
- justify-content: left;
264
- text-transform: capitalize;
265
- font-size: 16px;
266
- font-weight: 600;
267
- }
268
-
269
- #download-button {
270
- cursor: pointer;
271
- display: inline-block;
272
- width: 130px;
273
- justify-content: center;
274
- display: flex;
275
- align-items: center;
276
- padding: 10px 0;
277
- text-align: center;
278
- border-radius: 4px;
279
- font-size: 16px;
280
- color: #fff;
281
- font-weight: 700;
282
- text-decoration: none;
283
- transition: all 0.3s;
284
- border: none;
285
- }
286
-
287
- #download-button svg {
288
- fill: #fff;
289
- margin-right: 4px;
290
- height: 20px;
291
- }
292
-
293
- #saving-data {
294
- margin-top: 48px;
295
- display: flex;
296
- flex-direction: column;
297
- justify-content: center;
298
- align-items: center;
299
- }
300
-
301
- #saving-data img {
302
- height: 100px;
303
- width: 100px;
304
- }
305
-
306
- #saving-data span {
307
- color: #0f0c0c;
308
- font-size: 20px;
309
- font-weight: 600;
310
- }
311
-
312
- #download-zip {
313
- padding: 10px 16px;
314
- background: #fff;
315
- }
316
-
317
- .saving-file-download-wrap {
318
- display: flex;
319
- flex-direction: column;
320
- align-items: center;
321
- }
322
-
323
- .trust-img {
324
- height: 80px;
325
- width: 80px;
326
- }
327
-
328
- /* new */
329
-
330
- .pixel-input-title {
331
- position: relative;
332
- display: inline-block;
333
- width: 100%;
334
- color: #0f0c0c;
335
- font-weight: 600;
336
- margin: 4px 0px;
337
- font-size: 15px;
338
- text-align: left;
339
- }
340
-
341
- #maxwidth,
342
- #maxheight {
343
- position: relative;
344
- display: inline-block;
345
- width: 100%;
346
- color: #0f0c0c;
347
- border: 1px solid #ccc;
348
- margin: 0px;
349
- font-size: 18px;
350
- padding: 5px 8px;
351
- height: 34px;
352
- box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
353
- border-top-left-radius: 4px;
354
- border-bottom-left-radius: 4px;
355
- }
356
-
357
- .pixel-input {
358
- display: flex;
359
- }
360
-
361
- .pixel-input span {
362
- padding: 6px 12px;
363
- font-size: 16px;
364
- font-weight: 400;
365
- line-height: 1;
366
- color: #555;
367
- text-align: center;
368
- background-color: #eee;
369
- border: 1px solid #ccc;
370
- border-top-right-radius: 4px;
371
- border-bottom-right-radius: 4px;
372
- }
373
-
374
- #dropdownMenuButton {
375
- width: 100%;
376
- text-align: left;
377
- background: #fff;
378
- height: 34px;
379
- display: flex;
380
- border-radius: 4px;
381
- align-items: center;
382
- justify-content: space-between;
383
- box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
384
- color: #0f0c0c;
385
- border: 1px solid #ccc;
386
- }
387
-
388
- .media-choose {
389
- height: 88px;
390
- width: 80px;
391
- width: 100%;
392
- border: 2px solid #e8e8e8;
393
- background: 2px solid #e8e8e8;
394
- border-radius: 5px;
395
- display: flex;
396
- align-items: center;
397
- justify-content: center;
398
- }
399
-
400
- .media-choose .show-aspect {
401
- background: #444;
402
- border-radius: 5px;
403
- }
404
-
405
- #media-dimensions .type {
406
- font-weight: 700;
407
- font-size: 0.8rem;
408
- margin-top: 0.25rem;
409
- line-height: 1.6;
410
- text-transform: capitalize;
411
- }
412
-
413
- #media-dimensions .value {
414
- font-size: 0.75rem;
415
- color: #909090;
416
- }
417
-
418
- .dropdown-item i {
419
- margin-right: 4px;
420
- }
421
-
422
- #pixel-box-panel canvas {
423
- max-width: 100%;
424
- }
425
-
426
- .colorpalette {
427
- text-transform: uppercase;
428
- display: -webkit-box;
429
- display: -ms-flexbox;
430
- display: flex;
431
- -webkit-box-align: center;
432
- -ms-flex-align: center;
433
- align-items: center;
434
- -webkit-box-pack: start;
435
- -ms-flex-pack: start;
436
- justify-content: flex-start;
437
- -ms-flex-wrap: wrap;
438
- flex-wrap: wrap;
439
- }
440
-
441
- .colorpalette .text {
442
- margin-right: 15px;
443
- display: -webkit-inline-box;
444
- display: -ms-inline-flexbox;
445
- display: inline-flex;
446
- -webkit-box-align: center;
447
- -ms-flex-align: center;
448
- align-items: center;
449
- -webkit-box-pack: start;
450
- -ms-flex-pack: start;
451
- justify-content: flex-start;
452
- -ms-flex-wrap: wrap;
453
- flex-wrap: wrap;
454
- width: 100%;
455
- }
456
-
457
- .colorpalette .text button {
458
- margin-right: 16px;
459
- margin-bottom: 0px;
460
- }
461
-
462
- .colorpalette .icons {
463
- display: -webkit-inline-box;
464
- display: -ms-inline-flexbox;
465
- display: inline-flex;
466
- -webkit-box-align: center;
467
- -ms-flex-align: center;
468
- align-items: center;
469
- -webkit-box-pack: start;
470
- -ms-flex-pack: start;
471
- justify-content: flex-start;
472
- -ms-flex-wrap: wrap;
473
- flex-wrap: wrap;
474
- }
475
-
476
- .colorpalette .colorblock {
477
- margin-right: 2px;
478
- margin-bottom: 0px;
479
- margin-top: 6px;
480
- height: 25px;
481
- width: 25px !important;
482
- border: solid 0px white;
483
- }
484
-
485
- .colorpalette .ss-main {
486
- width: calc(100%);
487
- margin-top: 8px;
488
- max-width: 480px;
489
- }
490
-
491
- .colorpalette .ss-main .ss-single-selected {
492
- display: -webkit-inline-box;
493
- display: -ms-inline-flexbox;
494
- display: inline-flex;
495
- width: calc(100%);
496
- background-color: #ececec;
497
- }
498
-
499
- .colorpalette .ss-main .ss-option {
500
- margin-bottom: 6px;
501
- }
502
-
503
- .colorpalette .ss-main .ss-option:hover {
504
- background-color: rgba(0, 0, 0, 0.1) !important;
505
- }
506
-
507
- .colorpalette .ss-content {
508
- width: 100%;
509
- }
510
-
511
- .colorpalette .ss-content .ss-list .ss-option {
512
- padding: 0px 10px;
513
- }
514
-
515
- .infoselects {
516
- width: 100%;
517
- }
518
-
519
- .filter-wrapper {
520
- display: flex;
521
- width: 100%;
522
- flex-direction: column;
523
- justify-content: left;
524
- padding: 12px 0px;
525
- gap: 6px;
526
- padding-bottom: 0px;
527
- }
528
-
529
- .block-wrapper {
530
- display: flex;
531
- padding: 12px 0px;
532
- }
533
-
534
- #blockvalue {
535
- background: #ccc;
536
- padding: 2px 4px;
537
- border-radius: 5px;
538
- margin-left: 4px;
539
- }
540
-
541
- .filter-wrapper label {
542
- display: block;
543
- position: relative;
544
- cursor: pointer;
545
- font-size: 22px;
546
- margin-right: auto;
547
- -webkit-user-select: none;
548
- -moz-user-select: none;
549
- -ms-user-select: none;
550
- user-select: none;
551
- font-size: 15px;
552
- }
553
-
554
- /* Hide the browser's default checkbox */
555
- .filter-wrapper input {
556
- position: absolute;
557
- opacity: 0;
558
- cursor: pointer;
559
- height: 0;
560
- width: 0;
561
- }
562
-
563
- /* Create a custom checkbox */
564
- .checkbox-checkmark {
565
- position: absolute;
566
- height: 22px;
567
- width: 22px;
568
- border-radius: 4px;
569
- background-color: #ccc;
570
- }
571
-
572
- /* On mouse-over, add a grey background color */
573
- .filter-wrapper label:hover input~.checkbox-checkmark {
574
- background-color: #ccc;
575
- }
576
-
577
- /* When the checkbox is checked, add a blue background */
578
- .filter-wrapper label input:checked~.checkbox-checkmark {
579
- background-color: #ff5975;
580
- }
581
-
582
- /* Create the checkbox-checkmark/indicator (hidden when not checked) */
583
- .checkbox-checkmark:after {
584
- content: '';
585
- position: absolute;
586
- display: none;
587
- }
588
-
589
- /* Show the checkbox-checkmark when checked */
590
- .filter-wrapper label input:checked~.checkbox-checkmark:after {
591
- display: block;
592
- }
593
-
594
- /* Style the checkbox-checkmark/indicator */
595
- .filter-wrapper label .checkbox-checkmark:after {
596
- left: 8px;
597
- top: 4px;
598
- width: 6px;
599
- height: 11px;
600
- border: solid #fff;
601
- border-width: 0 3px 3px 0;
602
- -webkit-transform: rotate(45deg);
603
- -ms-transform: rotate(45deg);
604
- transform: rotate(45deg);
605
- }
606
-
607
- input[type='range'] {
608
- width: 100%;
609
- -webkit-appearance: none;
610
- }
611
-
612
- input[type='range']:focus {
613
- outline: none;
614
- }
615
-
616
- input[type='range']::-webkit-slider-thumb:focus {
617
- background-color: #ff5975;
618
- }
619
-
620
- input[type='range']::-webkit-slider-runnable-track {
621
- width: 100%;
622
- height: 3px;
623
- cursor: pointer;
624
- box-shadow: none;
625
- background: #ccc;
626
- border-radius: 0px;
627
- border: 0px solid #ff5975;
628
- }
629
-
630
- input[type='range']::-moz-range-track {
631
- width: 100%;
632
- height: 3px;
633
- cursor: pointer;
634
- box-shadow: none;
635
- background: #ccc;
636
- border-radius: 0px;
637
- border: 0px solid #ff5975;
638
- }
639
-
640
- input[type='range']::-webkit-slider-thumb {
641
- box-shadow: none;
642
- border: 0px solid #fff;
643
- height: 15px;
644
- width: 15px;
645
- border-radius: 22px;
646
- background: #ff5975;
647
- cursor: pointer;
648
- -webkit-appearance: none;
649
- margin-top: -5px;
650
- }
651
-
652
- input[type='range']::-moz-range-thumb {
653
- box-shadow: none;
654
- border: 0px solid #fff;
655
- height: 42px;
656
- width: 22px;
657
- border-radius: 22px;
658
- background: #ff5975;
659
- cursor: pointer;
660
- -webkit-appearance: none;
661
- margin-top: -20px;
662
- }
663
-
664
- input[type='range']::-moz-focus-outer {
665
- border: 0;
666
- }
667
-
668
- .divider {
669
- padding-top: 12px;
670
- padding-bottom: 12px;
671
- border-bottom: 1px solid #ddd;
672
- }
673
-
674
- #reset {
675
- border: none;
676
- color: #0f0c0c;
677
- font-size: 15px;
678
- background: #fff;
679
- padding: 0px;
680
- padding: 4px 14px;
681
- border-radius: 5px;
682
- }
683
-
684
- #reset:hover {
685
- background: #ff597556;
686
- }
687
-
688
- #reset i {
689
- color: #ff5975;
690
- font-size: 15px;
691
- margin-right: 3px;
692
- margin-bottom: 0px;
693
- }
694
-
695
- #palettes {
696
- display: none;
697
- }
698
-
699
- .active-btn {
700
- background-color: #6666ff;
701
- color: #fff;
702
- }
703
-
704
- .radio-label {
705
- display: flex;
706
- position: relative;
707
- cursor: pointer;
708
- align-items: center;
709
- margin-right: 15px;
710
- -webkit-user-select: none;
711
- -moz-user-select: none;
712
- -ms-user-select: none;
713
- user-select: none;
714
- font-size: 13px;
715
- margin-bottom: 20px;
716
- text-transform: capitalize;
717
- }
718
-
719
- .radio-label input[type='radio'] {
720
- position: absolute;
721
- opacity: 0;
722
- cursor: pointer;
723
- height: 0;
724
- width: 0;
725
- }
726
-
727
- .radio-label {
728
- position: relative;
729
- }
730
-
731
- .checkmark {
732
- position: absolute;
733
- top: 0;
734
- left: 0;
735
- height: 30px;
736
- width: 30px;
737
- background-color: #eee;
738
- border-radius: 50%;
739
- margin-top: 3px;
740
- }
741
-
742
- .radio-label:hover input~.checkmark {
743
- background-color: #ccc;
744
- }
745
-
746
- .radio-label input:checked~.checkmark {
747
- background-color: #6666ff;
748
- }
749
-
750
- .checkmark:after {
751
- content: '';
752
- position: absolute;
753
- display: none;
754
- }
755
-
756
- .radio-label input:checked~.checkmark:after {
757
- display: block;
758
- }
759
-
760
- .radio-label .checkmark:after {
761
- top: 8px;
762
- left: 8px;
763
- width: 14px;
764
- height: 14px;
765
- border-radius: 50%;
766
- background: #fff;
767
- }
768
-
769
- .label-span {
770
- margin-left: 37px;
771
- font-size: 16px;
772
- margin-top: 4px;
773
- color: #666666;
774
- }
775
-
776
- .custom-control-input:checked~.custom-control-label::before {
777
- background: #6666ff;
778
- }
779
-
780
- .custom-switch .custom-control-label::before {
781
- left: -2.25rem;
782
- width: 2.3rem;
783
- height: 22px;
784
- pointer-events: all;
785
- border-radius: 21px;
786
- }
787
-
788
- .custom-switch {
789
- display: flex;
790
- }
791
-
792
- .download-wrapper .rowclass {
793
- width: -webkit-fill-available;
794
- }
795
-
796
- .custom-switch .custom-control-label::after {
797
- top: calc(0.25rem + 5px);
798
- left: -16px;
799
- }
800
-
801
- .custom-switch .custom-control-label::after {
802
- left: -30px;
803
- }
804
-
805
- .custom-switch .custom-control-label::after {
806
- width: calc(1.2rem - 4px);
807
- height: calc(1.2rem - 4px);
808
- }
809
-
810
- .custom-switch .custom-control-label::after {
811
- top: calc(0.25rem + 3px);
812
- }
813
-
814
- .custom-control-label {
815
- padding-left: 6px;
816
- color: #666666;
817
- }
818
-
819
- #canvas-box-panel canvas,
820
- .canvas-box-panel img {
821
- max-width: 100%;
822
- }
823
-
824
- .select-img-panel {
825
- border: 1px solid #ccc;
826
- padding: 30px;
827
- }
828
-
829
- @media (max-width: 768px) {
830
- #Inputbox {
831
- font-size: 13px !important;
832
- }
833
-
834
- .inner-box {
835
- padding: 40px 0px !important;
836
- }
837
-
838
- #image-format {
839
- width: auto;
840
- }
841
-
842
- .download-format {
843
- padding: 0px 5px;
844
- }
845
-
846
- #download-button {
847
- margin-left: auto;
848
- }
1
+ #img-svg {
2
+ margin: auto;
3
+ margin-top: 16px;
4
+ height: 67px;
5
+ width: 98px;
6
+ }
7
+
8
+ #file-loader {
9
+ display: flex;
10
+ align-items: center;
11
+ flex-direction: column;
12
+ }
13
+
14
+ #file-loader img {
15
+ height: 60px;
16
+ }
17
+
18
+ #file-loader p {
19
+ text-align: center;
20
+ color: #fff;
21
+ font-size: 17px;
22
+ }
23
+
24
+ #loading-img {
25
+ height: 27px;
26
+ width: 27px;
27
+ margin-right: 21px;
28
+ }
29
+
30
+ #dropbox svg,
31
+ #filepicker svg,
32
+ .boxes svg {
33
+ height: 24px !important;
34
+ width: 24px !important;
35
+ }
36
+
37
+ .file-picker-dropdown a,
38
+ .file-picker-dropdown button {
39
+ border: none;
40
+ width: 100%;
41
+ border-radius: 4px;
42
+ text-align: left;
43
+ background: #fff;
44
+ font-weight: 400;
45
+ font-size: 16px;
46
+ line-height: 24px;
47
+ padding: 15px 24px;
48
+ list-style: none;
49
+ height: 54px;
50
+ }
51
+
52
+ .file-picker-dropdown {
53
+ width: 213px;
54
+ position: absolute;
55
+ background: #fff;
56
+ top: 111%;
57
+ right: 0;
58
+ display: none;
59
+ box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
60
+ border-radius: 4px;
61
+ }
62
+
63
+ .file-pick-dropdown i {
64
+ margin: 0;
65
+ }
66
+
67
+ .boxes {
68
+ background: #fff;
69
+ border-radius: 0;
70
+ cursor: pointer;
71
+ display: flex;
72
+ align-items: center;
73
+ padding: 15px 24px;
74
+ height: 54px;
75
+ border-top-left-radius: 4px;
76
+ border-bottom-left-radius: 4px;
77
+ justify-content: center;
78
+ font-size: 15px;
79
+ font-weight: 800;
80
+ color: #000;
81
+ }
82
+
83
+ .file-pick-dropdown {
84
+ color: #000;
85
+ cursor: pointer;
86
+ display: inline-flex;
87
+ background: #fff;
88
+ height: 54px;
89
+ border-left: 1px solid rgba(95, 88, 88, 0.75);
90
+ padding: 13px 20px;
91
+ border-top-right-radius: 4px;
92
+ border-bottom-right-radius: 4px;
93
+ align-items: center;
94
+ position: relative;
95
+ }
96
+
97
+ .crop-img-box {
98
+ background-color: #fff;
99
+ width: 100%;
100
+ border-radius: 0.75em;
101
+ border: 1px solid #f2f2f2;
102
+ box-shadow: 0px 5px 16px -2px rgb(42 115 217 / 20%);
103
+ font-size: 16px;
104
+ height: auto;
105
+ display: none;
106
+ }
107
+
108
+ .custom-box {
109
+ padding: 15px;
110
+ }
111
+
112
+ .inner-box {
113
+ border: 1px dashed rgba(0, 0, 0, 0.15);
114
+ background: rgba(0, 0, 0, 0.1);
115
+ padding: 40px;
116
+ min-height: 300px;
117
+ width: 100%;
118
+ }
119
+
120
+ #dropfile {
121
+ font-size: 16px;
122
+ margin-top: 15px;
123
+ text-align: center;
124
+ color: #fff;
125
+ }
126
+
127
+ .options-panel {
128
+ box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
129
+ border-radius: 4px;
130
+ padding: 30px;
131
+ width: 100%;
132
+ }
133
+
134
+ .options-panel .title {
135
+ width: 100%;
136
+ font-size: 28px;
137
+ line-height: 36px;
138
+ color: #000;
139
+ font-weight: 700;
140
+ text-align: left;
141
+ }
142
+
143
+ .options-panel .description {
144
+ width: 100%;
145
+ font-size: 17px;
146
+ color: #666;
147
+ font-weight: 400;
148
+ text-align: left;
149
+ }
150
+
151
+ .options-title {
152
+ width: 100%;
153
+ font-size: 17px;
154
+ color: #666;
155
+ font-weight: 400;
156
+ text-align: left;
157
+ }
158
+
159
+ .cropper-center {
160
+ position: absolute;
161
+ top: 0 !important;
162
+ left: 0 !important;
163
+ display: grid !important;
164
+ flex-wrap: wrap;
165
+ width: 100% !important;
166
+ height: 100% !important;
167
+ /* height: 0; */
168
+ opacity: 0.75;
169
+ }
170
+
171
+ .cropper-center .cell {
172
+ background-color: transparent;
173
+ border-right: 2px dashed #0050e5;
174
+ z-index: 9999;
175
+ }
176
+
177
+ .cropper-center .row-item {
178
+ border-bottom: 2px dashed #0050e5;
179
+ display: grid;
180
+ grid-auto-flow: column;
181
+ }
182
+
183
+ .last-child {
184
+ border: none !important;
185
+ }
186
+
187
+ .row-col-show {
188
+ display: inline-block;
189
+ padding: 4px 18px;
190
+ min-width: 70px;
191
+ text-align: center;
192
+ margin-right: 6px;
193
+ border-radius: 50px;
194
+ font-size: 21px;
195
+ color: #fff;
196
+ font-weight: 900;
197
+ text-decoration: none;
198
+ transition: all 0.3s;
199
+ box-shadow: inset 0 2px 3px rgb(0 0 0 / 30%);
200
+ background-color: #0050e5;
201
+ }
202
+
203
+ .buttons-box {
204
+ margin: 12px 0 18px 0;
205
+ display: flex;
206
+ align-items: center;
207
+ }
208
+
209
+ .action-buttons {
210
+ display: flex;
211
+ align-items: center;
212
+ justify-content: center;
213
+ cursor: pointer;
214
+ width: 34px;
215
+ height: 34px;
216
+ padding: 1px 8px;
217
+ margin-right: 4px;
218
+ border-radius: 50px;
219
+ background: #ccc;
220
+ font-size: 21px;
221
+ transition: all 0.3s;
222
+ }
223
+
224
+ #image-format {
225
+ padding: 6px 33px 6px 16px;
226
+ border-radius: 4px;
227
+ width: 123px;
228
+ border: 1px solid #ccc;
229
+ outline: none;
230
+ margin-left: 7px;
231
+ /* border: none; */
232
+ font-weight: bold;
233
+ font-size: 15px;
234
+ color: #555;
235
+ text-transform: uppercase;
236
+ margin-left: 6px;
237
+ }
238
+
239
+ .download-format {
240
+ display: flex;
241
+ align-items: center;
242
+ /* border-bottom: 1px solid #ddd; */
243
+ padding: 0px 24px;
244
+ }
245
+
246
+ .download-wrapper {
247
+ display: flex;
248
+ justify-content: space-between;
249
+ margin-bottom: 24px;
250
+ }
251
+
252
+ .select-format-title {
253
+ position: relative;
254
+ display: inline-block;
255
+ /* padding: 0 24px; */
256
+ font-size: 16px;
257
+ padding: 0px 24px 0px 0px;
258
+ color: #066;
259
+ border-right: 1px solid #eee;
260
+ text-decoration: none;
261
+ filter: grayscale(100%);
262
+ display: flex;
263
+ justify-content: left;
264
+ text-transform: capitalize;
265
+ font-size: 16px;
266
+ font-weight: 600;
267
+ }
268
+
269
+ #download-button {
270
+ cursor: pointer;
271
+ display: inline-block;
272
+ width: 130px;
273
+ justify-content: center;
274
+ display: flex;
275
+ align-items: center;
276
+ padding: 10px 0;
277
+ text-align: center;
278
+ border-radius: 4px;
279
+ font-size: 16px;
280
+ color: #fff;
281
+ font-weight: 700;
282
+ text-decoration: none;
283
+ transition: all 0.3s;
284
+ border: none;
285
+ }
286
+
287
+ #download-button svg {
288
+ fill: #fff;
289
+ margin-right: 4px;
290
+ height: 20px;
291
+ }
292
+
293
+ #saving-data {
294
+ margin-top: 48px;
295
+ display: flex;
296
+ flex-direction: column;
297
+ justify-content: center;
298
+ align-items: center;
299
+ }
300
+
301
+ #saving-data img {
302
+ height: 100px;
303
+ width: 100px;
304
+ }
305
+
306
+ #saving-data span {
307
+ color: #0f0c0c;
308
+ font-size: 20px;
309
+ font-weight: 600;
310
+ }
311
+
312
+ #download-zip {
313
+ padding: 10px 16px;
314
+ background: #fff;
315
+ }
316
+
317
+ .saving-file-download-wrap {
318
+ display: flex;
319
+ flex-direction: column;
320
+ align-items: center;
321
+ }
322
+
323
+ .trust-img {
324
+ height: 80px;
325
+ width: 80px;
326
+ }
327
+
328
+ /* new */
329
+
330
+ .pixel-input-title {
331
+ position: relative;
332
+ display: inline-block;
333
+ width: 100%;
334
+ color: #0f0c0c;
335
+ font-weight: 600;
336
+ margin: 4px 0px;
337
+ font-size: 15px;
338
+ text-align: left;
339
+ }
340
+
341
+ #maxwidth,
342
+ #maxheight {
343
+ position: relative;
344
+ display: inline-block;
345
+ width: 100%;
346
+ color: #0f0c0c;
347
+ border: 1px solid #ccc;
348
+ margin: 0px;
349
+ font-size: 18px;
350
+ padding: 5px 8px;
351
+ height: 34px;
352
+ box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
353
+ border-top-left-radius: 4px;
354
+ border-bottom-left-radius: 4px;
355
+ }
356
+
357
+ .pixel-input {
358
+ display: flex;
359
+ }
360
+
361
+ .pixel-input span {
362
+ padding: 6px 12px;
363
+ font-size: 16px;
364
+ font-weight: 400;
365
+ line-height: 1;
366
+ color: #555;
367
+ text-align: center;
368
+ background-color: #eee;
369
+ border: 1px solid #ccc;
370
+ border-top-right-radius: 4px;
371
+ border-bottom-right-radius: 4px;
372
+ }
373
+
374
+ #dropdownMenuButton {
375
+ width: 100%;
376
+ text-align: left;
377
+ background: #fff;
378
+ height: 34px;
379
+ display: flex;
380
+ border-radius: 4px;
381
+ align-items: center;
382
+ justify-content: space-between;
383
+ box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
384
+ color: #0f0c0c;
385
+ border: 1px solid #ccc;
386
+ }
387
+
388
+ .media-choose {
389
+ height: 88px;
390
+ width: 80px;
391
+ width: 100%;
392
+ border: 2px solid #e8e8e8;
393
+ background: 2px solid #e8e8e8;
394
+ border-radius: 5px;
395
+ display: flex;
396
+ align-items: center;
397
+ justify-content: center;
398
+ }
399
+
400
+ .media-choose .show-aspect {
401
+ background: #444;
402
+ border-radius: 5px;
403
+ }
404
+
405
+ #media-dimensions .type {
406
+ font-weight: 700;
407
+ font-size: 0.8rem;
408
+ margin-top: 0.25rem;
409
+ line-height: 1.6;
410
+ text-transform: capitalize;
411
+ }
412
+
413
+ #media-dimensions .value {
414
+ font-size: 0.75rem;
415
+ color: #909090;
416
+ }
417
+
418
+ .dropdown-item i {
419
+ margin-right: 4px;
420
+ }
421
+
422
+ #pixel-box-panel canvas {
423
+ max-width: 100%;
424
+ }
425
+
426
+ .colorpalette {
427
+ text-transform: uppercase;
428
+ display: -webkit-box;
429
+ display: -ms-flexbox;
430
+ display: flex;
431
+ -webkit-box-align: center;
432
+ -ms-flex-align: center;
433
+ align-items: center;
434
+ -webkit-box-pack: start;
435
+ -ms-flex-pack: start;
436
+ justify-content: flex-start;
437
+ -ms-flex-wrap: wrap;
438
+ flex-wrap: wrap;
439
+ }
440
+
441
+ .colorpalette .text {
442
+ margin-right: 15px;
443
+ display: -webkit-inline-box;
444
+ display: -ms-inline-flexbox;
445
+ display: inline-flex;
446
+ -webkit-box-align: center;
447
+ -ms-flex-align: center;
448
+ align-items: center;
449
+ -webkit-box-pack: start;
450
+ -ms-flex-pack: start;
451
+ justify-content: flex-start;
452
+ -ms-flex-wrap: wrap;
453
+ flex-wrap: wrap;
454
+ width: 100%;
455
+ }
456
+
457
+ .colorpalette .text button {
458
+ margin-right: 16px;
459
+ margin-bottom: 0px;
460
+ }
461
+
462
+ .colorpalette .icons {
463
+ display: -webkit-inline-box;
464
+ display: -ms-inline-flexbox;
465
+ display: inline-flex;
466
+ -webkit-box-align: center;
467
+ -ms-flex-align: center;
468
+ align-items: center;
469
+ -webkit-box-pack: start;
470
+ -ms-flex-pack: start;
471
+ justify-content: flex-start;
472
+ -ms-flex-wrap: wrap;
473
+ flex-wrap: wrap;
474
+ }
475
+
476
+ .colorpalette .colorblock {
477
+ margin-right: 2px;
478
+ margin-bottom: 0px;
479
+ margin-top: 6px;
480
+ height: 25px;
481
+ width: 25px !important;
482
+ border: solid 0px white;
483
+ }
484
+
485
+ .colorpalette .ss-main {
486
+ width: calc(100%);
487
+ margin-top: 8px;
488
+ max-width: 480px;
489
+ }
490
+
491
+ .colorpalette .ss-main .ss-single-selected {
492
+ display: -webkit-inline-box;
493
+ display: -ms-inline-flexbox;
494
+ display: inline-flex;
495
+ width: calc(100%);
496
+ background-color: #ececec;
497
+ }
498
+
499
+ .colorpalette .ss-main .ss-option {
500
+ margin-bottom: 6px;
501
+ }
502
+
503
+ .colorpalette .ss-main .ss-option:hover {
504
+ background-color: rgba(0, 0, 0, 0.1) !important;
505
+ }
506
+
507
+ .colorpalette .ss-content {
508
+ width: 100%;
509
+ }
510
+
511
+ .colorpalette .ss-content .ss-list .ss-option {
512
+ padding: 0px 10px;
513
+ }
514
+
515
+ .infoselects {
516
+ width: 100%;
517
+ }
518
+
519
+ .filter-wrapper {
520
+ display: flex;
521
+ width: 100%;
522
+ flex-direction: column;
523
+ justify-content: left;
524
+ padding: 12px 0px;
525
+ gap: 6px;
526
+ padding-bottom: 0px;
527
+ }
528
+
529
+ .block-wrapper {
530
+ display: flex;
531
+ padding: 12px 0px;
532
+ }
533
+
534
+ #blockvalue {
535
+ background: #ccc;
536
+ padding: 2px 4px;
537
+ border-radius: 5px;
538
+ margin-left: 4px;
539
+ }
540
+
541
+ .filter-wrapper label {
542
+ display: block;
543
+ position: relative;
544
+ cursor: pointer;
545
+ font-size: 22px;
546
+ margin-right: auto;
547
+ -webkit-user-select: none;
548
+ -moz-user-select: none;
549
+ -ms-user-select: none;
550
+ user-select: none;
551
+ font-size: 15px;
552
+ }
553
+
554
+ /* Hide the browser's default checkbox */
555
+ .filter-wrapper input {
556
+ position: absolute;
557
+ opacity: 0;
558
+ cursor: pointer;
559
+ height: 0;
560
+ width: 0;
561
+ }
562
+
563
+ /* Create a custom checkbox */
564
+ .checkbox-checkmark {
565
+ position: absolute;
566
+ height: 22px;
567
+ width: 22px;
568
+ border-radius: 4px;
569
+ background-color: #ccc;
570
+ }
571
+
572
+ /* On mouse-over, add a grey background color */
573
+ .filter-wrapper label:hover input~.checkbox-checkmark {
574
+ background-color: #ccc;
575
+ }
576
+
577
+ /* When the checkbox is checked, add a blue background */
578
+ .filter-wrapper label input:checked~.checkbox-checkmark {
579
+ background-color: #ff5975;
580
+ }
581
+
582
+ /* Create the checkbox-checkmark/indicator (hidden when not checked) */
583
+ .checkbox-checkmark:after {
584
+ content: '';
585
+ position: absolute;
586
+ display: none;
587
+ }
588
+
589
+ /* Show the checkbox-checkmark when checked */
590
+ .filter-wrapper label input:checked~.checkbox-checkmark:after {
591
+ display: block;
592
+ }
593
+
594
+ /* Style the checkbox-checkmark/indicator */
595
+ .filter-wrapper label .checkbox-checkmark:after {
596
+ left: 8px;
597
+ top: 4px;
598
+ width: 6px;
599
+ height: 11px;
600
+ border: solid #fff;
601
+ border-width: 0 3px 3px 0;
602
+ -webkit-transform: rotate(45deg);
603
+ -ms-transform: rotate(45deg);
604
+ transform: rotate(45deg);
605
+ }
606
+
607
+ input[type='range'] {
608
+ width: 100%;
609
+ -webkit-appearance: none;
610
+ }
611
+
612
+ input[type='range']:focus {
613
+ outline: none;
614
+ }
615
+
616
+ input[type='range']::-webkit-slider-thumb:focus {
617
+ background-color: #ff5975;
618
+ }
619
+
620
+ input[type='range']::-webkit-slider-runnable-track {
621
+ width: 100%;
622
+ height: 3px;
623
+ cursor: pointer;
624
+ box-shadow: none;
625
+ background: #ccc;
626
+ border-radius: 0px;
627
+ border: 0px solid #ff5975;
628
+ }
629
+
630
+ input[type='range']::-moz-range-track {
631
+ width: 100%;
632
+ height: 3px;
633
+ cursor: pointer;
634
+ box-shadow: none;
635
+ background: #ccc;
636
+ border-radius: 0px;
637
+ border: 0px solid #ff5975;
638
+ }
639
+
640
+ input[type='range']::-webkit-slider-thumb {
641
+ box-shadow: none;
642
+ border: 0px solid #fff;
643
+ height: 15px;
644
+ width: 15px;
645
+ border-radius: 22px;
646
+ background: #ff5975;
647
+ cursor: pointer;
648
+ -webkit-appearance: none;
649
+ margin-top: -5px;
650
+ }
651
+
652
+ input[type='range']::-moz-range-thumb {
653
+ box-shadow: none;
654
+ border: 0px solid #fff;
655
+ height: 42px;
656
+ width: 22px;
657
+ border-radius: 22px;
658
+ background: #ff5975;
659
+ cursor: pointer;
660
+ -webkit-appearance: none;
661
+ margin-top: -20px;
662
+ }
663
+
664
+ input[type='range']::-moz-focus-outer {
665
+ border: 0;
666
+ }
667
+
668
+ .divider {
669
+ padding-top: 12px;
670
+ padding-bottom: 12px;
671
+ border-bottom: 1px solid #ddd;
672
+ }
673
+
674
+ #reset {
675
+ border: none;
676
+ color: #0f0c0c;
677
+ font-size: 15px;
678
+ background: #fff;
679
+ padding: 0px;
680
+ padding: 4px 14px;
681
+ border-radius: 5px;
682
+ }
683
+
684
+ #reset:hover {
685
+ background: #ff597556;
686
+ }
687
+
688
+ #reset i {
689
+ color: #ff5975;
690
+ font-size: 15px;
691
+ margin-right: 3px;
692
+ margin-bottom: 0px;
693
+ }
694
+
695
+ #palettes {
696
+ display: none;
697
+ }
698
+
699
+ .active-btn {
700
+ background-color: #6666ff;
701
+ color: #fff;
702
+ }
703
+
704
+ .radio-label {
705
+ display: flex;
706
+ position: relative;
707
+ cursor: pointer;
708
+ align-items: center;
709
+ margin-right: 15px;
710
+ -webkit-user-select: none;
711
+ -moz-user-select: none;
712
+ -ms-user-select: none;
713
+ user-select: none;
714
+ font-size: 13px;
715
+ margin-bottom: 20px;
716
+ text-transform: capitalize;
717
+ }
718
+
719
+ .radio-label input[type='radio'] {
720
+ position: absolute;
721
+ opacity: 0;
722
+ cursor: pointer;
723
+ height: 0;
724
+ width: 0;
725
+ }
726
+
727
+ .radio-label {
728
+ position: relative;
729
+ }
730
+
731
+ .checkmark {
732
+ position: absolute;
733
+ top: 0;
734
+ left: 0;
735
+ height: 30px;
736
+ width: 30px;
737
+ background-color: #eee;
738
+ border-radius: 50%;
739
+ margin-top: 3px;
740
+ }
741
+
742
+ .radio-label:hover input~.checkmark {
743
+ background-color: #ccc;
744
+ }
745
+
746
+ .radio-label input:checked~.checkmark {
747
+ background-color: #6666ff;
748
+ }
749
+
750
+ .checkmark:after {
751
+ content: '';
752
+ position: absolute;
753
+ display: none;
754
+ }
755
+
756
+ .radio-label input:checked~.checkmark:after {
757
+ display: block;
758
+ }
759
+
760
+ .radio-label .checkmark:after {
761
+ top: 8px;
762
+ left: 8px;
763
+ width: 14px;
764
+ height: 14px;
765
+ border-radius: 50%;
766
+ background: #fff;
767
+ }
768
+
769
+ .label-span {
770
+ margin-left: 37px;
771
+ font-size: 16px;
772
+ margin-top: 4px;
773
+ color: #666666;
774
+ }
775
+
776
+ .custom-control-input:checked~.custom-control-label::before {
777
+ background: #6666ff;
778
+ }
779
+
780
+ .custom-switch .custom-control-label::before {
781
+ left: -2.25rem;
782
+ width: 2.3rem;
783
+ height: 22px;
784
+ pointer-events: all;
785
+ border-radius: 21px;
786
+ }
787
+
788
+ .custom-switch {
789
+ display: flex;
790
+ }
791
+
792
+ .download-wrapper .rowclass {
793
+ width: -webkit-fill-available;
794
+ }
795
+
796
+ .custom-switch .custom-control-label::after {
797
+ top: calc(0.25rem + 5px);
798
+ left: -16px;
799
+ }
800
+
801
+ .custom-switch .custom-control-label::after {
802
+ left: -30px;
803
+ }
804
+
805
+ .custom-switch .custom-control-label::after {
806
+ width: calc(1.2rem - 4px);
807
+ height: calc(1.2rem - 4px);
808
+ }
809
+
810
+ .custom-switch .custom-control-label::after {
811
+ top: calc(0.25rem + 3px);
812
+ }
813
+
814
+ .custom-control-label {
815
+ padding-left: 6px;
816
+ color: #666666;
817
+ }
818
+
819
+ #canvas-box-panel canvas,
820
+ .canvas-box-panel img {
821
+ max-width: 100%;
822
+ }
823
+
824
+ .select-img-panel {
825
+ border: 1px solid #ccc;
826
+ padding: 30px;
827
+ }
828
+
829
+ @media (max-width: 768px) {
830
+ #Inputbox {
831
+ font-size: 13px !important;
832
+ }
833
+
834
+ .inner-box {
835
+ padding: 40px 0px !important;
836
+ }
837
+
838
+ #image-format {
839
+ width: auto;
840
+ }
841
+
842
+ .download-format {
843
+ padding: 0px 5px;
844
+ }
845
+
846
+ #download-button {
847
+ margin-left: auto;
848
+ }
849
849
  }