appscms-tools-theme 4.2.1 → 4.2.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/_data/feature/en/compress-pdf.json +1 -309
  3. data/_data/home/en/en.json +429 -1
  4. data/_data/rating/rating.json +1 -1
  5. data/_includes/appscms/customblog/relatedposts.html +2 -2
  6. data/_includes/appscms/head/bloghead.html +7 -0
  7. data/_includes/appscms/head/head.html +9 -1
  8. data/_includes/appscms/headings/devtool-headings.html +38 -0
  9. data/_includes/appscms/home/devtool-feature-boxes.html +71 -0
  10. data/_includes/appscms/howto/howto.html +35 -45
  11. data/_includes/appscms/navbars/devtool-navbar.html +50 -0
  12. data/_includes/appscms/navbars/devtool-toolbar.html +100 -0
  13. data/_includes/appscms/searchbar/devtool-searchbar.html +63 -0
  14. data/_includes/customblog/pageRelatedPosts.html +1 -1
  15. data/_includes/customblog/recentposts.html +1 -1
  16. data/_includes/customblog/relatedBlogs.html +1 -1
  17. data/_includes/customblog/relatedposts.html +2 -2
  18. data/_includes/postbox.html +1 -1
  19. data/_includes/section/recent_posts.html +1 -1
  20. data/_includes/section/related_categories_post.html +2 -2
  21. data/_layouts/appscms-author.html +2 -2
  22. data/_layouts/appscms-blog.html +1 -1
  23. data/_layouts/author.html +2 -2
  24. data/_layouts/blog-1.html +1 -1
  25. data/_layouts/blog.html +1 -1
  26. data/_layouts/devtool-blog.html +132 -0
  27. data/_layouts/devtool-feature.html +55 -0
  28. data/_layouts/devtool-home.html +54 -0
  29. data/_layouts/devtools.html +1 -1
  30. data/_layouts/feature.html +299 -387
  31. data/_layouts/home.html +248 -266
  32. data/assets/css/appscms-blog.css +1 -0
  33. data/assets/css/appscms-contenttool.css +1 -0
  34. data/assets/css/appscms-theme.css +1 -0
  35. data/assets/css/blog.css +1 -0
  36. data/assets/css/devtool-main.css +1351 -0
  37. data/assets/css/tools.css +21 -0
  38. metadata +12 -3
@@ -0,0 +1,1351 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap");
2
+
3
+ * {
4
+ box-sizing: border-box;
5
+ font-family: "Inter", sans-serif;
6
+ }
7
+
8
+ body {
9
+ padding: 0;
10
+ margin: 0;
11
+ -webkit-font-smoothing: antialiased;
12
+ font-family: var(--font-family);
13
+ overflow-x: hidden;
14
+ background: radial-gradient(var(--main-bg-color));
15
+ }
16
+ /* appscms navbar */
17
+ .appscms-navbar {
18
+ background-color: var(--white-color);
19
+ height: 45px;
20
+ position: sticky;
21
+ top: 0;
22
+ z-index: 999;
23
+ }
24
+
25
+ .appscms-navbar-nav {
26
+ display: flex;
27
+ width: 100%;
28
+ height: 100%;
29
+ justify-content: space-between;
30
+ }
31
+ .appscms-navbar-nav a {
32
+ display: flex;
33
+ align-items: center;
34
+ }
35
+ .appscms-navbar-nav-links {
36
+ width: 100%;
37
+ height: 100%;
38
+ display: flex;
39
+ justify-content: flex-end;
40
+ gap: 45px;
41
+ align-items: center;
42
+ }
43
+
44
+ .appscms-nav-link {
45
+ font-size: 15px;
46
+ color: var(--black-light);
47
+ font-weight: 450;
48
+ }
49
+ .appscms-nav-link:hover {
50
+ color: var(--black-color);
51
+ text-decoration: underline;
52
+ }
53
+ .arrow-svg {
54
+ display: none;
55
+ }
56
+
57
+ .appscms-toolbar {
58
+ background-color: var(--primary-color);
59
+ box-shadow: 1px 4px 10 #00000026;
60
+ position: sticky;
61
+ z-index: 999;
62
+ top: 45px;
63
+ }
64
+
65
+ .appscms-toolbar .appscms-toolbar-list {
66
+ list-style: none;
67
+ display: flex;
68
+ padding: 0;
69
+ margin: 0;
70
+ height: 40px;
71
+ gap: 59px;
72
+ }
73
+
74
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item {
75
+ color: var(--black-light);
76
+ display: block;
77
+ font-size: 16px;
78
+ line-height: 24px;
79
+ padding: 10px;
80
+ position: relative;
81
+ text-decoration: none;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ cursor: pointer;
86
+ }
87
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child {
88
+ padding-left: 0px;
89
+ }
90
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child {
91
+ padding-right: 0px;
92
+ }
93
+ .appscms-toolbar
94
+ .appscms-toolbar-list
95
+ .appscms-toolbar-list-item:hover
96
+ > .list-item-dropdown {
97
+ display: block;
98
+ opacity: 1;
99
+ }
100
+
101
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover {
102
+ border-bottom: 2px solid white;
103
+ padding-bottom: 8px;
104
+ position: relative;
105
+ }
106
+
107
+ /* smooth scrolling code */
108
+ .appscms-toolbar-list {
109
+ overflow-y: hidden;
110
+ overflow-x: auto;
111
+ }
112
+
113
+ .appscms-toolbar-list::-webkit-scrollbar {
114
+ width: 0;
115
+ height: 0;
116
+ }
117
+
118
+ .appscms-toolbar-list::-webkit-scrollbar-track {
119
+ background-color: transparent;
120
+ }
121
+
122
+ .appscms-toolbar-list::-webkit-scrollbar-thumb {
123
+ background-color: transparent;
124
+ }
125
+
126
+ .appscms-toolbar .list-item-dropdown {
127
+ left: 0px;
128
+ position: fixed;
129
+ top: 85px;
130
+ min-width: 500px;
131
+ width: 90vw;
132
+ box-shadow: 3px 10px 40px rgba(24, 29, 32, 0.05);
133
+ z-index: 200;
134
+ border-bottom-left-radius: 10px;
135
+ border-bottom-right-radius: 10px;
136
+ padding: 25px 50px 50px 50px;
137
+ display: none;
138
+ background-color: var(--white-color);
139
+ border: none;
140
+ }
141
+
142
+ .list-item-dropdown-heading {
143
+ font-weight: 600;
144
+ font-size: 13px;
145
+ color: var(--black-light);
146
+ margin-bottom: 8px;
147
+ }
148
+ .list-item-dropdown li {
149
+ padding-top: 1px;
150
+ padding-bottom: 1px;
151
+ list-style: none;
152
+ }
153
+ .list-item-dropdown li .toolbar-link {
154
+ font-weight: 600;
155
+ line-height: 1.7;
156
+ color: var(--dark-gray);
157
+ padding-top: 10px;
158
+ padding-bottom: 8px;
159
+ align-items: center;
160
+ width: 100%;
161
+ font-size: 16px;
162
+ text-decoration: none;
163
+ text-transform: capitalize;
164
+ white-space: nowrap;
165
+ }
166
+
167
+ .list-item-dropdown li .toolbar-link:hover {
168
+ background-color: rgba(241, 241, 241, 0.279);
169
+ box-shadow: 0px 0px 5px rgba(241, 241, 241, 0.279);
170
+ border-radius: 5px;
171
+ color: #323232;
172
+ }
173
+ .appscms-toolbar-list-item-span {
174
+ color: var(--white-color);
175
+ display: block;
176
+ font-size: 15px;
177
+ line-height: 24px;
178
+ width: 100%;
179
+ white-space: nowrap;
180
+ padding: 8px 0;
181
+ position: relative;
182
+ text-decoration: none;
183
+ }
184
+ .hamburger {
185
+ display: none;
186
+ }
187
+
188
+ .appscms-faq-section {
189
+ max-width: 1140px;
190
+ }
191
+
192
+ @media (max-width: 768px) {
193
+ .close-nav-ham {
194
+ display: flex !important;
195
+ justify-content: end;
196
+ }
197
+ .hamburger {
198
+ display: block;
199
+ cursor: pointer;
200
+ position: absolute;
201
+ right: -20px;
202
+ /* top: 5px; */
203
+ z-index: 9999;
204
+ }
205
+ .appscms-toolbar {
206
+ background-color: var(--black-color);
207
+ box-shadow: 1px 4px 10 #00000026;
208
+ overflow-x: hidden;
209
+ }
210
+ .appscms-navbar-nav-links {
211
+ display: none;
212
+ }
213
+ .appscms-toolbar {
214
+ top: 0px;
215
+ position: fixed;
216
+ transition: all 0.3s ease;
217
+ width: 272px;
218
+ right: -272px;
219
+ display: none;
220
+ z-index: 1000;
221
+ }
222
+ .appscms-toolbar .appscms-toolbar-list {
223
+ height: 100vh;
224
+ flex-direction: column;
225
+ gap: 0px;
226
+ overflow-y: scroll;
227
+ overflow-x: hidden;
228
+ }
229
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item {
230
+ align-items: flex-start;
231
+ flex-direction: column;
232
+ }
233
+ .appscms-toolbar
234
+ .appscms-toolbar-list
235
+ .appscms-toolbar-list-item:first-child {
236
+ padding-left: 10px;
237
+ }
238
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover {
239
+ border-bottom: none;
240
+ padding-bottom: 10px;
241
+ }
242
+
243
+ .appscms-toolbar
244
+ .appscms-toolbar-list
245
+ .appscms-toolbar-list-item:first-child {
246
+ padding-right: 10px;
247
+ }
248
+ .list-item-dropdown li .toolbar-link {
249
+ color: var(--white-color);
250
+ font-size: 15px;
251
+ }
252
+ .appscms-toolbar-list-item-span {
253
+ font-size: 17px;
254
+ font-weight: 600;
255
+ }
256
+ .list-item-dropdown-heading {
257
+ display: none;
258
+ }
259
+ .appscms-toolbar .list-item-dropdown {
260
+ padding: 0px;
261
+ width: 100%;
262
+ position: static;
263
+ display: block;
264
+ overflow: hidden;
265
+ transition: all 0.3s ease;
266
+ background-color: transparent;
267
+ opacity: 0;
268
+ height: 0px;
269
+ max-height: 0px;
270
+ }
271
+ .appscms-toolbar
272
+ .appscms-toolbar-list-item:nth-child(1)
273
+ > .list-item-dropdown {
274
+ opacity: 1;
275
+ height: auto;
276
+ max-height: 200px;
277
+ }
278
+
279
+ .arrow-svg {
280
+ display: block;
281
+ }
282
+ }
283
+ .bg-primary {
284
+ background-color: #1b2fe7;
285
+ }
286
+ /* headings section */
287
+ .appscms-h1,
288
+ .success-msg {
289
+ font-size: 50px;
290
+ font-weight: 799;
291
+ font-family: "inter", sans-serif;
292
+ margin: 20px 0px;
293
+ color: var(--mid-gray);
294
+ }
295
+ .appscms-h3 {
296
+ font-size: 30px;
297
+ color: var(--mid-gray);
298
+ }
299
+ .appscms-h2 {
300
+ font-size: 20px;
301
+ padding-top: 8px;
302
+ font-weight: 500;
303
+ color: var(--light-gray);
304
+ }
305
+
306
+ /* searchbar */
307
+ #appscms-searchbar {
308
+ border-radius: 50px;
309
+ padding: 10px;
310
+ background-color: white;
311
+ }
312
+ .form-control:focus {
313
+ border-color: transparent;
314
+ box-shadow: none;
315
+ }
316
+ .btn-search:hover {
317
+ transform: scale(1.2);
318
+ }
319
+ .btn-search:focus,
320
+ .btn-search:active {
321
+ background-color: transparent;
322
+ border-color: transparent;
323
+ box-shadow: none;
324
+ }
325
+ /* category section */
326
+ .toolfilters {
327
+ margin-top: 80px;
328
+ cursor: pointer;
329
+ background-color: rgb(255, 255, 255);
330
+ display: flex;
331
+ height: 30px;
332
+ box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.15);
333
+ height: 53px;
334
+ align-items: center;
335
+ border-radius: 27px;
336
+ overflow: hidden;
337
+ margin: 20px;
338
+ color: #000;
339
+ }
340
+ .toolfilter {
341
+ margin: auto;
342
+ padding: 0px 30px;
343
+ }
344
+ /* test scroll */
345
+ .toolfilters {
346
+ overflow-y: hidden;
347
+ overflow-x: auto;
348
+ }
349
+
350
+ .toolfilters::-webkit-scrollbar {
351
+ width: 0;
352
+ height: 0;
353
+ }
354
+
355
+ .toolfilters::-webkit-scrollbar-track {
356
+ background-color: transparent;
357
+ }
358
+
359
+ .toolfilters::-webkit-scrollbar-thumb {
360
+ background-color: transparent;
361
+ }
362
+ /* margin: 4px; */
363
+ /* overflow: hidden; */
364
+
365
+ .toolfilter:hover {
366
+ background-color: var(--primary-color);
367
+ color: white;
368
+ height: 90%;
369
+ border-radius: 26px;
370
+ display: flex;
371
+ align-items: center;
372
+ }
373
+
374
+ /* tools section */
375
+ .appscms-tool-container:nth-child(even) .appscms-tool .tool-top {
376
+ background-color: rgb(233, 107, 34);
377
+ }
378
+
379
+ #appscms-tools-section {
380
+ padding-top: 50px;
381
+ }
382
+
383
+ .appscms-tool {
384
+ border-radius: 10px;
385
+ box-shadow: 2px 3px 7px 2px rgba(0, 0, 0, 0.158);
386
+ cursor: pointer;
387
+ height: 169px;
388
+ margin-bottom: 25px;
389
+ background-color: rgba(255, 255, 255, 0.7);
390
+ transition: all 0.2s ease;
391
+ }
392
+
393
+ .appscms-tool:hover {
394
+ transform: translate(0, -4px) scale(1.01);
395
+ box-shadow: 2px 5px 7px 2px rgba(0, 0, 0, 0.236);
396
+ }
397
+
398
+ .appscms-tool .tool-top {
399
+ background: #4b5cf4;
400
+ overflow: hidden;
401
+ height: calc(171px - 57px);
402
+ border-top-right-radius: 10px;
403
+ border-top-left-radius: 10px;
404
+ display: flex;
405
+ align-items: center;
406
+ transition: all 0.5s ease;
407
+ }
408
+
409
+ .appscms-tool .tool-top:hover {
410
+ transform: translate(0, 0px) scale(1.001);
411
+ animation: moveGradient 10s linear infinite;
412
+ filter: hue-rotate(15deg) saturate(125%) brightness(104%);
413
+ }
414
+ .appscms-tool .tool-top:active {
415
+ transform: translate(0, 0px) scale(1.003);
416
+ animation: moveGradient 10s linear infinite;
417
+ filter: hue-rotate(-15deg) saturate(105%) brightness(95%);
418
+ }
419
+
420
+ @keyframes moveGradient {
421
+ 0% {
422
+ background-position: 0% 50%;
423
+ }
424
+ 100% {
425
+ background-position: 100% 50%;
426
+ }
427
+ }
428
+ .appscms-tool .tool-top .tool-img {
429
+ padding: 0px;
430
+ margin-right: 21px;
431
+ background: rgba(255, 255, 255, 25%);
432
+ border-radius: 300px;
433
+ margin-left: 20px;
434
+ height: 58px;
435
+ width: 58px;
436
+ display: flex;
437
+ align-items: center;
438
+ border: 1px solid #ffffff12;
439
+ }
440
+
441
+ .appscms-tool .tool-top .tool-img img {
442
+ height: 34px;
443
+ width: 72px;
444
+ transition: filter 0.3s ease-in-out; /* Smooth transitions for transform and box-shadow */
445
+ }
446
+
447
+ .appscms-tool .tool-top .tool-img img:hover {
448
+ transform: scale(1.001); /* Slightly scale up the image on hover */
449
+ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.355));
450
+ }
451
+
452
+ .appscms-tool .tool-text {
453
+ color: var(--white-color);
454
+ padding-right: 33px;
455
+ font-weight: 300;
456
+ font-size: 16px;
457
+ line-height: 20.57px;
458
+ }
459
+ .appscms-tool .tool-heading {
460
+ padding-top: 14px;
461
+ padding-bottom: 19px;
462
+ color: var(--dark-gray);
463
+ height: 57px;
464
+ font-weight: 500;
465
+ font-size: 17px;
466
+ text-align: center;
467
+ }
468
+ .text-primary {
469
+ font-size: 30px;
470
+ font-weight: 600;
471
+ }
472
+
473
+ .description {
474
+ font-size: 12px;
475
+ line-height: 0.2;
476
+ }
477
+
478
+ /* blog section */
479
+ .appscms-blogs {
480
+ border-radius: 10px;
481
+ padding-top: 20px;
482
+ background-color: rgba(55, 55, 55, 0);
483
+ }
484
+
485
+ .contenttool-img-wrap-blog{
486
+ padding: 14px;
487
+ }
488
+ .appscms-blog-cards {
489
+ background: #34314170;
490
+ margin-bottom: 10px;
491
+ border-radius: 10px !important;
492
+ /* max-width: 340px; */
493
+ /* min-width: 300px; */
494
+
495
+ }
496
+ .extrapaddingforimg{
497
+ padding: 15px;
498
+ }
499
+ .card-title{
500
+ font-size: 16px;
501
+ }
502
+
503
+ .card-footer{
504
+ border: none !important;
505
+ border-radius: 10px !important;
506
+ background: unset;
507
+ }
508
+
509
+ .post-read-more{
510
+ font-size: 13px;
511
+ display: flex;
512
+ align-items: center;
513
+ }
514
+
515
+ .blog-readmore-link{
516
+ color: rgb(239, 239, 239) !important ;
517
+ }
518
+
519
+ .appscms-blog-cards img {
520
+ border-radius: 10px;
521
+ height: auto;
522
+ }
523
+ .card-body {
524
+ display: flex;
525
+ flex-direction: column;
526
+ }
527
+
528
+
529
+ @media (min-width: 768px) {
530
+ .appscms-h1 {
531
+ margin-top: 50px;
532
+ }
533
+ }
534
+
535
+ /* recent post blog heading */
536
+
537
+ /* author in blog */
538
+ .wrapfooter {
539
+ display: flex;
540
+ margin-top: 50px;
541
+ margin-bottom: -0px;
542
+ }
543
+ .wrapfooter img {
544
+ width: 42px;
545
+ height: 42px;
546
+ border-radius: 50%;
547
+ }
548
+ .wrapfooter .author-meta {
549
+ padding: 0px 15px 0px 10px;
550
+ align-items: center;
551
+ }
552
+ .wrapfooter .author-meta a {
553
+ font-size: 15px;
554
+ font-weight: 500;
555
+ color: #3e3e3e;
556
+ text-transform: capitalize;
557
+ text-decoration: none;
558
+ }
559
+ .post-date {
560
+ color: #878787;
561
+ font-size: 12px;
562
+ font-weight: 500;
563
+ display: block;
564
+ text-align: left;
565
+ }
566
+
567
+ /* footer */
568
+ #copyright-text {
569
+ font-size: 13px !important;
570
+ }
571
+ .footer-prducts-div-heading {
572
+ }
573
+
574
+ .appscms-product-footer {
575
+ background-color:#4f4f4f24;
576
+ margin-top: 50px;
577
+ }
578
+ .appscms-footer-products {
579
+ opacity: 100%;
580
+ }
581
+
582
+ .footer-product-link {
583
+ font-size: 15px;
584
+ }
585
+ .appscms-footer-products a {
586
+ text-decoration: none;
587
+ color: #000;
588
+ }
589
+ /* footer i89 modal css */
590
+ .privacy-links-item {
591
+ font-stretch: 400;
592
+ font-weight: 400;
593
+ font-size: 16px;
594
+ line-height: 24px;
595
+ color: rgba(26, 26, 26, 1);
596
+ margin: 0 20px;
597
+ }
598
+ .privacy-links-item:last-child {
599
+ margin-right: 0;
600
+ }
601
+ .drop-down-btn {
602
+ cursor: pointer;
603
+ outline: 0px;
604
+ border: 0px;
605
+ width: auto;
606
+ overflow: visible;
607
+ display: flex;
608
+ -webkit-box-align: center;
609
+ align-items: center;
610
+ background-color: transparent;
611
+ transition: background-color 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
612
+ font-weight: 400;
613
+ font-size: 13px;
614
+ line-height: 24px;
615
+ color: rgb(26, 26, 26);
616
+ }
617
+ .language-drop-down-menu {
618
+ display: flex;
619
+ justify-content: space-between;
620
+ margin: 0;
621
+ padding: 0;
622
+ flex-wrap: wrap;
623
+ }
624
+ .language-drop-down-item {
625
+ list-style: none;
626
+ width: 50%;
627
+ text-align: center;
628
+ font-size: 15px;
629
+ margin-bottom: 0;
630
+ }
631
+ .language-drop-down-item:hover{
632
+ background-color: #767baa3b !important;
633
+ }
634
+ .language-drop-down-item a:hover {
635
+ background-color: #767baa3b !important;
636
+ border-radius: 3px;
637
+ }
638
+ .language-drop-down-item a {
639
+ text-decoration: none;
640
+ display: flex;
641
+ width: 100%;
642
+ align-items: center;
643
+ padding: 9px 9px;
644
+ color: #1e1e1e;
645
+ font-size: 13px;
646
+ border-bottom: 1px solid rgb(224, 224, 224);
647
+ }
648
+
649
+ @media (max-width: 575.98px) {
650
+ .appscms-h1,
651
+ .success-msg {
652
+ font-size: 30px;
653
+ font-weight: 799;
654
+ }
655
+ .appscms-h2 {
656
+ font-size: 12px;
657
+ font-weight: 400;
658
+ color: var(--mid-gray);
659
+ }
660
+ #appscms-tools-section {
661
+ padding-top: 10px;
662
+ }
663
+ /* category section */
664
+
665
+ .toolfilters {
666
+ font-size: 10px;
667
+ height: 30px;
668
+ padding: 3px;
669
+ }
670
+ .toolfilter {
671
+ margin: auto;
672
+ padding: 0px 15px;
673
+ }
674
+ /* search bar */
675
+ #appscms-searchbar {
676
+ border-radius: 50px;
677
+ padding: 0px;
678
+ font-size: 8px;
679
+ }
680
+ #searchbar-placeholder {
681
+ font-size: 12px;
682
+ }
683
+ .text-primary {
684
+ font-size: 20px;
685
+ font-weight: 600;
686
+ }
687
+
688
+ .description {
689
+ font-size: 12px;
690
+ line-height: 0.2;
691
+ }
692
+ .footer-product-link {
693
+ font-size: 12px;
694
+ }
695
+
696
+ /* recent post and blog section phone */
697
+ /* blog section */
698
+ .appscms-blogs {
699
+ border-radius: 10px;
700
+ padding-top: 20px;
701
+ background-color: rgba(255, 255, 255, 0.112);
702
+ }
703
+
704
+ .appscms-blog-cards {
705
+ box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.06);
706
+ margin-bottom: 20px;
707
+ border-radius: 10px;
708
+ /* max-width: 340px; */
709
+ /* min-width: 300px; */
710
+ }
711
+
712
+ .appscms-blog-cards img {
713
+ border-radius: 10px 10px 0px 0px;
714
+ height: 180px;
715
+ }
716
+ .card-body {
717
+ display: flex;
718
+ flex-direction: column;
719
+ justify-content: space-between;
720
+ }
721
+
722
+ /* recent post blog heading */
723
+
724
+ /* author in blog */
725
+ .wrapfooter {
726
+ display: flex;
727
+ margin-top: 50px;
728
+ margin-bottom: -0px;
729
+ }
730
+ .wrapfooter img {
731
+ width: 42px;
732
+ height: 42px;
733
+ border-radius: 50%;
734
+ }
735
+ .wrapfooter .author-meta {
736
+ padding: 0px 15px 0px 10px;
737
+ }
738
+ .wrapfooter .author-meta a {
739
+ font-size: 15px;
740
+ font-weight: 500;
741
+ color: #3e3e3e;
742
+ text-transform: capitalize;
743
+ text-decoration: none;
744
+ }
745
+ .post-date {
746
+ color: #878787;
747
+ font-size: 12px;
748
+ font-weight: 500;
749
+ display: block;
750
+ text-align: left;
751
+ }
752
+ }
753
+ /* Small devices (tablets) */
754
+ @media (min-width: 576px) and (max-width: 767.98px) {
755
+ .toolfilters {
756
+ font-size: 10px;
757
+ height: 40px;
758
+ padding: 1px;
759
+ }
760
+ #searchbar-placeholder {
761
+ font-size: 13px;
762
+ }
763
+ #appscms-searchbar {
764
+ padding: 3px;
765
+ }
766
+ /*
767
+ toolfilter {
768
+ margin: auto;
769
+ padding: 0px 20px;
770
+ } */
771
+ }
772
+
773
+ /* Medium devices (desktops) */
774
+ @media (max-width: 768px) {
775
+ #appscms-tools-section-row {
776
+ gap: 15px;
777
+ justify-content: center;
778
+ margin-top: 35px;
779
+ }
780
+ .appscms-tool .tool-top .tool-img img {
781
+ border-radius: 0;
782
+ }
783
+
784
+ .appscms-tool .tool-top .tool-img {
785
+ justify-content: center;
786
+ background: unset;
787
+ border: 5px solid #ffffff08;
788
+ }
789
+ .appscms-tool {
790
+ box-shadow: none;
791
+ margin-bottom: 25px;
792
+ height: auto;
793
+ background-color: transparent;
794
+ display: flex;
795
+ flex-direction: column;
796
+ align-items: center;
797
+ }
798
+
799
+ .appscms-tool:hover {
800
+ box-shadow: unset;
801
+ }
802
+
803
+ .appscms-tool .tool-top {
804
+ background-color: transparent;
805
+ flex-direction: column;
806
+ justify-content: center;
807
+ border-radius: 10px;
808
+ height: 64px;
809
+ width: 64px;
810
+ border-radius: 21px;
811
+ }
812
+ .appscms-tool .tool-img {
813
+ padding: 0px !important;
814
+ }
815
+
816
+ .appscms-tool .tool-img img {
817
+ height: 38px !important;
818
+ width: 38px !important;
819
+ }
820
+
821
+ .appscms-tool .tool-text {
822
+ display: none;
823
+ }
824
+
825
+ .appscms-tool .tool-heading {
826
+ font-size: 12px;
827
+ line-height: 14.52px;
828
+ margin-top: 14px;
829
+ padding: 0px;
830
+ height: 15px;
831
+ font-weight: 400;
832
+ }
833
+
834
+ .appscms-tool-container {
835
+ /* margin: 0 auto; */
836
+ width: auto !important;
837
+ }
838
+ .appscms-tool-container:nth-child(even) .appscms-tool .tool-top {
839
+ background-color: transparent;
840
+ }
841
+ }
842
+ @media (min-width: 768px) and (max-width: 991.98px) {
843
+ .toolfilters {
844
+ font-size: 12px;
845
+ }
846
+ }
847
+
848
+ /* Large devices (desktops) */
849
+ @media (min-width: 992px) and (max-width: 1199.98px) {
850
+ /* Insert CSS code here */
851
+ }
852
+
853
+ /* Extra Large devices (large desktops) */
854
+ @media (min-width: 1200px) and (max-width: 1399.98px) {
855
+ /* Insert CSS code here */
856
+ }
857
+
858
+ /* Extra Extra Large devices (larger desktops) */
859
+ @media (min-width: 1400px) {
860
+ /* Insert CSS code here */
861
+ }
862
+
863
+ /* animations */
864
+
865
+ .appscms-product-footer li {
866
+ list-style: none;
867
+ }
868
+ .modal-content{
869
+ background-color: #191b4e;
870
+ }
871
+ .language-drop-down-item a:hover{
872
+ background-color: #767baa3b;
873
+ }
874
+
875
+ .footer-product-link {
876
+ border-radius: 5px;
877
+ color: #5e5e5f;
878
+ display: block;
879
+ font-weight: 500;
880
+ font-size: 14px;
881
+ line-height: 19px;
882
+ padding: 15px 20px 14px 10px;
883
+ position: relative;
884
+ transition: none;
885
+ }
886
+ .footer-product-link:hover {
887
+ background-color: #f3f3f451;
888
+ color: #262628;
889
+ text-decoration: none;
890
+ }
891
+
892
+ .appscms-footer {
893
+ background-color: var(--white-color);
894
+ padding: 44px 10px 10px 10px;
895
+ border-top: 1px solid rgb(148, 148, 148);
896
+ }
897
+
898
+ .appscms-footer-link {
899
+ list-style: none;
900
+ }
901
+
902
+ .appscms-footer-link a {
903
+ color: #6b6b6b;
904
+ display: block;
905
+ margin-top: 18px;
906
+ font-size: 14px;
907
+ font-weight: 500;
908
+ line-height: 18px;
909
+ }
910
+ .appscms-footer-link a:hover {
911
+ color: var(--black-color);
912
+ }
913
+ .appscms-footer-category {
914
+ font-size: 14px;
915
+ padding-bottom: 12px;
916
+ font-weight: 700;
917
+ line-height: 12px;
918
+ color: var(--mid-gray);
919
+ list-style: none;
920
+ }
921
+
922
+ .upload-from-drives {
923
+ display: flex;
924
+ gap: 20px;
925
+ margin-top: 10px;
926
+ }
927
+ .upload-from-drives img {
928
+ cursor: pointer;
929
+ }
930
+ #appscms-tools-section a {
931
+ text-decoration: none;
932
+ }
933
+ .success-msg {
934
+ text-align: center;
935
+ margin: 30px 0px;
936
+ color: var(--primary-color);
937
+ }
938
+ .go-back-block {
939
+ display: flex;
940
+ align-items: center;
941
+ justify-content: center;
942
+ margin: 30px 0px;
943
+ }
944
+ .go-back-block button {
945
+ background-color: var(--primary-color);
946
+ color: var(--white-color);
947
+ border: none;
948
+ border-radius: 10px;
949
+ padding: 10px 15px;
950
+ font-size: 15px;
951
+ height: 48px;
952
+ min-width: 212px;
953
+ }
954
+ .go-back-block button i {
955
+ color: var(--black-color);
956
+ background-color: var(--white-color);
957
+ padding: 8px;
958
+ border-radius: 50%;
959
+ font-size: 12px;
960
+ }
961
+ #rating-img {
962
+ height: 1px;
963
+ width: 1px;
964
+ filter: brightness();
965
+ filter: brightness(100);
966
+ position: absolute;
967
+ }
968
+ .rating-tool {
969
+ display: flex;
970
+ justify-content: center;
971
+ align-items: center;
972
+ background-color: rgb(252, 252, 252);
973
+ border-radius: 50px;
974
+ height: 70px;
975
+ margin: 40px 0px;
976
+ }
977
+ #rating {
978
+ font-size: 25px;
979
+ font-weight: 600;
980
+ }
981
+ .rating-text {
982
+ font-size: 16px;
983
+ }
984
+
985
+ .rating-stars {
986
+ padding: 0px 10px;
987
+ display: flex;
988
+ justify-content: space-between;
989
+ gap: 4px;
990
+ }
991
+
992
+ .rating-stars i {
993
+ font-size: 20px;
994
+ }
995
+ .download-social-share {
996
+ background: #d0d3ed;
997
+ padding: 40px 0px;
998
+ display: flex;
999
+ justify-content: space-between;
1000
+ }
1001
+ .share-icons {
1002
+ display: flex;
1003
+ gap: 30px;
1004
+ justify-content: end;
1005
+ }
1006
+ .download-social-share a {
1007
+ color: #000;
1008
+ font-size: 17px;
1009
+ height: 40px;
1010
+ width: 40px;
1011
+ display: flex;
1012
+ align-items: center;
1013
+ justify-content: center;
1014
+ padding: 10px 10px;
1015
+ border: 2px solid var(--black-color);
1016
+ border-radius: 50%;
1017
+ }
1018
+ .appscms-heading {
1019
+ font-size: 25px;
1020
+ text-align: center;
1021
+ font-weight: 500;
1022
+ }
1023
+ .website-img {
1024
+ height: 50px;
1025
+ width: 50px;
1026
+ }
1027
+ .website-showcases {
1028
+ padding: 50px 0px;
1029
+ }
1030
+ .website-showcase {
1031
+ display: flex;
1032
+ flex-direction: column;
1033
+ justify-content: center;
1034
+ align-items: center;
1035
+ margin-bottom: 25px;
1036
+ overflow: hidden;
1037
+ }
1038
+ .website-showcase a {
1039
+ color: var(--black-color);
1040
+ font-size: 15px;
1041
+ margin-top: 10px;
1042
+ }
1043
+ .feature-showcase {
1044
+ padding: 50px 0px;
1045
+ }
1046
+ .feature-showcase-div {
1047
+ display: flex;
1048
+ flex-direction: column;
1049
+ justify-content: center;
1050
+ align-items: center;
1051
+ margin-bottom: 25px;
1052
+ }
1053
+ .feature-showcase-div img {
1054
+ height: 45px;
1055
+ width: 45px;
1056
+ }
1057
+ .feature-showcase a span {
1058
+ margin-top: 15px;
1059
+ font-size: 14px;
1060
+ }
1061
+ .feature-showcase a {
1062
+ color: var(--black-color);
1063
+ }
1064
+
1065
+ .video-h1,
1066
+ .audio-h1 {
1067
+ font-weight: 600;
1068
+ font-size: 53px;
1069
+ }
1070
+
1071
+ .video-h2,
1072
+ .audio-h2 {
1073
+ font-size: 22px;
1074
+ }
1075
+ .shareModal {
1076
+ display: none;
1077
+ position: fixed;
1078
+ z-index: 100000000000;
1079
+ left: 0;
1080
+ top: 0;
1081
+ width: 100%;
1082
+ height: 100%;
1083
+ overflow: auto;
1084
+ background-color: rgba(0, 0, 0, 0.5);
1085
+ }
1086
+
1087
+ .shareModal .share-modal-content {
1088
+ background-color: #fefefe;
1089
+ margin: 15% auto;
1090
+ padding: 20px;
1091
+ /* border: 1px solid #888; */
1092
+ width: 70%;
1093
+ height: 200px;
1094
+ text-align: center;
1095
+ }
1096
+
1097
+ .shareModal .close-share-modal {
1098
+ color: #aaa;
1099
+ float: right;
1100
+ display: none;
1101
+ font-size: 28px;
1102
+ font-weight: bold;
1103
+ }
1104
+ .shareModal h5 {
1105
+ color: #000;
1106
+ padding-top: 10px;
1107
+ font-weight: 700;
1108
+ }
1109
+ .shareModal .close-share-modal:hover,
1110
+ .shareModal .close-share-modal:focus {
1111
+ color: black;
1112
+ text-decoration: none;
1113
+ cursor: pointer;
1114
+ }
1115
+
1116
+ .share-modal-social {
1117
+ display: flex;
1118
+ gap: 30px;
1119
+ height: 100%;
1120
+ padding-bottom: 60px;
1121
+ align-items: center;
1122
+ justify-content: center;
1123
+ }
1124
+ .share-modal-social a {
1125
+ color: #000;
1126
+ }
1127
+ .share-modal-social a i {
1128
+ font-size: 30px;
1129
+ }
1130
+ .authors-list a {
1131
+ color: white !important;
1132
+ }
1133
+ .featurePageAuthor {
1134
+ display: flex;
1135
+ flex-direction: column;
1136
+ width: 100%;
1137
+ justify-content: center;
1138
+ }
1139
+
1140
+ .featurePageAuthor .author-meta {
1141
+ width: 500px;
1142
+ margin: 0 auto;
1143
+ padding-bottom: 5rem;
1144
+ }
1145
+
1146
+ .featurePageAuthor .author-meta .authorName {
1147
+ font-size: 20px;
1148
+ padding: 1rem 0px;
1149
+ font-weight: 900;
1150
+ text-align: center;
1151
+ }
1152
+
1153
+ .featurePageAuthor .author-img {
1154
+ width: 100px;
1155
+ height: 100px;
1156
+ border-radius: 100%;
1157
+ }
1158
+
1159
+ .featurePageAuthor .author_bio {
1160
+ font-size: 16px;
1161
+ }
1162
+
1163
+ @media (max-width: 768px) {
1164
+ .authors-list {
1165
+ padding: 25px;
1166
+ }
1167
+
1168
+ .featurePageAuthor .author-meta {
1169
+ width: 100%;
1170
+ }
1171
+ }
1172
+ .contributor {
1173
+ width: 100px;
1174
+ }
1175
+ .contributor .contributor-name {
1176
+ font-size: 13px;
1177
+ margin-top: 8px;
1178
+ text-transform: capitalize;
1179
+ }
1180
+ .infographics_section {
1181
+ width: 100%;
1182
+ padding: 50px 0px 50px 0px;
1183
+ border-top: 1px solid rgb(224, 224, 224);
1184
+ }
1185
+
1186
+ .infographics_section .infographics-desc {
1187
+ position: absolute;
1188
+ color: #000;
1189
+ bottom: 0;
1190
+ }
1191
+
1192
+ .infographics_section .slider {
1193
+ position: relative;
1194
+ max-width: 40rem;
1195
+ height: 26.625rem;
1196
+ margin: 0 auto;
1197
+ overflow: hidden;
1198
+ }
1199
+
1200
+ .infographics_section .slide {
1201
+ position: absolute;
1202
+ top: 0;
1203
+ width: 100%;
1204
+ height: 26.625rem;
1205
+ display: flex;
1206
+ align-items: center;
1207
+ justify-content: center;
1208
+ transition: transform 1s;
1209
+ }
1210
+
1211
+ .infographics_section .slide img {
1212
+ width: 200px;
1213
+ height: 100%;
1214
+ transition-duration: 0.27s;
1215
+ /* object-fit: contain; */
1216
+ }
1217
+
1218
+ .infographics_section button {
1219
+ background: none;
1220
+ border: none;
1221
+ }
1222
+
1223
+ .infographics_section button .fas {
1224
+ color: #000;
1225
+ }
1226
+
1227
+ .infographics_section .btn-slide {
1228
+ position: absolute;
1229
+ top: 50%;
1230
+ z-index: 10;
1231
+ height: 5.5rem;
1232
+ width: 5.5rem;
1233
+ cursor: pointer;
1234
+ }
1235
+
1236
+ .infographics_section .prev {
1237
+ left: 3rem;
1238
+ transform: translate(-50%, -50%);
1239
+ }
1240
+
1241
+ .infographics_section .next {
1242
+ right: 3rem;
1243
+ transform: translate(50%, -50%);
1244
+ }
1245
+
1246
+ .infographics_section .dots-container {
1247
+ display: flex;
1248
+ justify-content: center;
1249
+ align-items: center;
1250
+ position: relative;
1251
+ }
1252
+
1253
+ .infographics_section .dot {
1254
+ width: 25px;
1255
+ height: 5px;
1256
+ margin: 15px 5px;
1257
+ border-radius: 0.5rem;
1258
+ background: rgba(39, 39, 39, 0.5);
1259
+ cursor: pointer;
1260
+ }
1261
+
1262
+ .infographics_section .dot.active {
1263
+ background: #272727;
1264
+ }
1265
+ .slide img {
1266
+ transition-duration: 0.27s;
1267
+ }
1268
+ .slide img:hover {
1269
+ transform: scale(1.1);
1270
+ box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
1271
+ }
1272
+ .no-result-found-msg {
1273
+ font-size: 20px;
1274
+ color: var(--black-light);
1275
+ text-align: center;
1276
+ width: 100%;
1277
+ font-weight: 500;
1278
+ }
1279
+ .close-nav-ham {
1280
+ display: none;
1281
+ }
1282
+ .active-lang {
1283
+ background: #f4f5ff3b;
1284
+ border-radius: 3px;
1285
+ }
1286
+
1287
+
1288
+ /* overrides for dev tools */
1289
+
1290
+ .appscms-how-to-section,.faq-item,.rating-tool{
1291
+ background-color: #ffffff14;
1292
+ }
1293
+ .blog-pagination a, .blog-pagination span{
1294
+ background-color: #00000009;
1295
+ }
1296
+ .explore{
1297
+ background: #2f79f23b !important;
1298
+ }
1299
+ .authors-info{
1300
+ background: #1f1a2570 !important;
1301
+ box-shadow: unset !important;
1302
+ }
1303
+
1304
+ .authors-posts-count{
1305
+ color: white !important;
1306
+ }
1307
+
1308
+ .cat{
1309
+ background: #ffffff2b !important;
1310
+ color: rgb(241, 241, 241) !important;
1311
+ }
1312
+
1313
+ .left-sidebar,.right-sidebar{
1314
+ background:transparent !important;
1315
+ }
1316
+ #safeui-alert{
1317
+ background:#cce5ff29;
1318
+ border: none;
1319
+ }
1320
+
1321
+ .ace_content{
1322
+ background: #353535;
1323
+ }
1324
+
1325
+ .ace_folding-enabled{
1326
+ background-color: rgb(88, 88, 88);
1327
+ }
1328
+
1329
+ .ace_gutter-cell{
1330
+ background-color: red;
1331
+ }
1332
+
1333
+ .ace_gutter-active-line{
1334
+ background-color: rgb(117, 117, 117) !important;
1335
+ }
1336
+
1337
+ .ace-tm {
1338
+ background-color: rgb(63, 63, 63);
1339
+ }
1340
+
1341
+ .input_editor_bar, .output_editor_bar,.format_json{
1342
+ background: var(--primary-color) !important;
1343
+ }
1344
+
1345
+ .blog-pagination a:hover{
1346
+ background: #ffffff4f;
1347
+ }
1348
+
1349
+ .toaster{
1350
+ background: ;
1351
+ }