appscms-tools-theme 3.0.4 → 3.0.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (164) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.txt +21 -21
  3. data/README.md +50 -50
  4. data/_data/about/en/about.json +16 -16
  5. data/_data/blog/alertbar.yml +3 -3
  6. data/_data/blog/authors.yml +11 -11
  7. data/_data/blog/blog.yml +4 -4
  8. data/_data/blog/nav.json +13 -13
  9. data/_data/blog/share.yml +28 -28
  10. data/_data/calculators/en/biology-calc/bulb-spacing.json +78 -78
  11. data/_data/calculators/en/biology-calc/cat-chocolate-toxicity.json +52 -52
  12. data/_data/calculators/en/chemistry-calc/activation-energy.json +44 -44
  13. data/_data/calculators/en/finance-calc/401k.json +122 -122
  14. data/_data/contact/en/contact.json +38 -38
  15. data/_data/disclaimer/en/disclaimer.json +37 -37
  16. data/_data/download/en/download.json +35 -35
  17. data/_data/feature/en/3_shop_posters.json +351 -351
  18. data/_data/feature/en/allele-frequency.json +246 -246
  19. data/_data/feature/en/batch-conversion.json +77 -77
  20. data/_data/feature/en/compress-pdf.json +202 -202
  21. data/_data/feature/en/face-detection.json +52 -52
  22. data/_data/feature/en/split-pdf.json +115 -115
  23. data/_data/feature/en/theframe.json +56 -56
  24. data/_data/feature/hi/compress-pdf.json +81 -81
  25. data/_data/feature/tr/compress-pdf.json +80 -80
  26. data/_data/filecomparison/en/filecomparison.json +38 -38
  27. data/_data/fileinfo/en/fileinfo.json +15 -15
  28. data/_data/footer/en/data.json +166 -166
  29. data/_data/footer/hi/data.json +68 -68
  30. data/_data/footer/networksites.json +15 -15
  31. data/_data/header/en/data.json +173 -173
  32. data/_data/header/hi/data.json +144 -144
  33. data/_data/home/en/en.json +285 -285
  34. data/_data/home/en/photoeffects.json +22 -22
  35. data/_data/home/en/posters.json +323 -323
  36. data/_data/home/hi/hi.json +86 -86
  37. data/_data/home-1/en/en.json +229 -229
  38. data/_data/languagesupport/compress-pdf-langs.json +11 -11
  39. data/_data/languagesupport/index-langs.json +13 -13
  40. data/_data/photo-categories.json +104 -104
  41. data/_data/photoeffects.json +31 -31
  42. data/_data/privacy/en/privacyPolicy.json +265 -265
  43. data/_data/termAndCondition/en/termAndCondition.json +358 -358
  44. data/_includes/Rating/rating.html +92 -92
  45. data/_includes/Rating/structureddata.html +53 -53
  46. data/_includes/Usp/usp.html +95 -95
  47. data/_includes/adblocker.html +240 -240
  48. data/_includes/adsense/adsense.html +7 -7
  49. data/_includes/alternates/alternates.html +45 -45
  50. data/_includes/author_bio.html +16 -16
  51. data/_includes/authors/authors.html +67 -67
  52. data/_includes/batch-conversion.html +65 -65
  53. data/_includes/bookmark.html +5 -5
  54. data/_includes/cssfile/links.html +11 -11
  55. data/_includes/custom-head.html +136 -136
  56. data/_includes/customblog/recentposts.html +67 -67
  57. data/_includes/customblog/relatedposts.html +203 -203
  58. data/_includes/disqus_comments.html +10 -10
  59. data/_includes/dropdown/langdropdown.html +22 -22
  60. data/_includes/feature.html +56 -56
  61. data/_includes/fileformat/Tabularcompariosn.html +158 -158
  62. data/_includes/fileformat/comparisonfiles.html +151 -151
  63. data/_includes/fileformat/fileformatdetail.html +101 -101
  64. data/_includes/fileformat/fileinfoformat.html +93 -93
  65. data/_includes/footer/index.html +538 -538
  66. data/_includes/google-analytics.html +22 -22
  67. data/_includes/head/index.html +235 -235
  68. data/_includes/header/blogHeader.html +34 -34
  69. data/_includes/header/index.html +188 -188
  70. data/_includes/languages/languages.html +60 -60
  71. data/_includes/monumetric/ads.html +57 -57
  72. data/_includes/monumetric/monumetric.html +57 -57
  73. data/_includes/monumetric/profitablecpmgate.html +51 -51
  74. data/_includes/nofiletransfer/nofiletransfer.html +38 -38
  75. data/_includes/paginationBlogPage.html +71 -71
  76. data/_includes/paginationPostPage.html +14 -14
  77. data/_includes/postauthorbio.html +17 -17
  78. data/_includes/postbox.html +31 -31
  79. data/_includes/script.html +508 -508
  80. data/_includes/section/alertbar.html +11 -11
  81. data/_includes/section/count.html +36 -36
  82. data/_includes/section/recent_posts.html +65 -65
  83. data/_includes/section/related_categories_post.html +198 -198
  84. data/_includes/share/socialshare.html +20 -20
  85. data/_includes/staticfooter.html +69 -69
  86. data/_layouts/aboutUs.html +34 -34
  87. data/_layouts/audio.html +33 -33
  88. data/_layouts/batch.html +98 -98
  89. data/_layouts/blog-1.html +83 -83
  90. data/_layouts/blog.html +94 -94
  91. data/_layouts/calculator.html +89 -89
  92. data/_layouts/categories.html +33 -33
  93. data/_layouts/contactUs.html +124 -124
  94. data/_layouts/default.html +1 -1
  95. data/_layouts/disclaimer.html +123 -123
  96. data/_layouts/download.html +299 -299
  97. data/_layouts/feature-1.html +322 -322
  98. data/_layouts/feature-download.html +308 -308
  99. data/_layouts/feature.html +256 -256
  100. data/_layouts/featureResultPage.html +65 -65
  101. data/_layouts/fileInfo.html +39 -39
  102. data/_layouts/filecomparison.html +85 -85
  103. data/_layouts/frame.html +222 -222
  104. data/_layouts/help.html +23 -23
  105. data/_layouts/home-1.html +229 -229
  106. data/_layouts/home.html +265 -265
  107. data/_layouts/homeResultPage.html +31 -31
  108. data/_layouts/imagekit.html +125 -125
  109. data/_layouts/page.html +5 -5
  110. data/_layouts/photo-effects-home.html +5 -5
  111. data/_layouts/post.html +177 -177
  112. data/_layouts/privacyPolicy.html +637 -637
  113. data/_layouts/termAndCondition.html +646 -646
  114. data/_layouts/video.html +33 -33
  115. data/assets/cross.svg +4 -4
  116. data/assets/css/adblocker.css +187 -187
  117. data/assets/css/batch.css +437 -437
  118. data/assets/css/blog-1.css +65 -65
  119. data/assets/css/blog.css +491 -491
  120. data/assets/css/bootstrap.min.css +6 -6
  121. data/assets/css/calculators.css +47 -47
  122. data/assets/css/common.css +550 -550
  123. data/assets/css/feature-1.css +290 -290
  124. data/assets/css/filecomparison.css +25 -25
  125. data/assets/css/frame.css +780 -780
  126. data/assets/css/home-1.css +187 -187
  127. data/assets/css/imagekit.css +840 -840
  128. data/assets/css/tools.css +1546 -1328
  129. data/assets/facebook.svg +4 -4
  130. data/assets/images/abp.svg +41 -41
  131. data/assets/images/adblock.svg +266 -266
  132. data/assets/images/addimg.svg +2 -2
  133. data/assets/images/convert.svg +8 -8
  134. data/assets/images/safevideoconverter.svg +23 -23
  135. data/assets/images/uo.svg +41 -41
  136. data/assets/images/vectorpaint.svg +5 -5
  137. data/assets/instagram.svg +4 -4
  138. data/assets/js/TopScroll.js +8 -8
  139. data/assets/js/adBlocker.js +68 -68
  140. data/assets/js/ads.js +8 -8
  141. data/assets/js/append-div.js +10 -10
  142. data/assets/js/batch.js +229 -229
  143. data/assets/js/calculator-tooltip.js +3 -3
  144. data/assets/js/face-api.js +38064 -38064
  145. data/assets/js/face-detection.js +303 -303
  146. data/assets/js/featureResult.js +48 -48
  147. data/assets/js/frame.js +263 -263
  148. data/assets/js/googledrive.js +155 -155
  149. data/assets/js/homeResult.js +36 -36
  150. data/assets/js/manifest.json +16 -16
  151. data/assets/js/multiselect.js +157 -157
  152. data/assets/js/perspective.min.js +182 -182
  153. data/assets/js/photo-effects.json +84 -84
  154. data/assets/js/redirectResult.js +9 -9
  155. data/assets/js/testing-batch.js +39 -39
  156. data/assets/js/theme.js +44 -44
  157. data/assets/linkdin.svg +4 -4
  158. data/assets/noserverupload.svg +4 -4
  159. data/assets/pdf.svg +20 -20
  160. data/assets/secure.svg +43 -43
  161. data/assets/star.svg +4 -4
  162. data/assets/twitter.svg +4 -4
  163. data/assets/youtube.svg +4 -4
  164. metadata +7 -7
@@ -1,841 +1,841 @@
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
- #image-format {
831
- width: auto;
832
- }
833
-
834
- .download-format {
835
- padding: 0px 5px;
836
- }
837
-
838
- #download-button {
839
- margin-left: auto;
840
- }
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
+ #image-format {
831
+ width: auto;
832
+ }
833
+
834
+ .download-format {
835
+ padding: 0px 5px;
836
+ }
837
+
838
+ #download-button {
839
+ margin-left: auto;
840
+ }
841
841
  }