appscms-tools-theme 4.7.7 → 4.7.8

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