appscms-tools-theme 4.8.8 → 4.8.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 255cd3531f80b2d7320d93a4d07ac993cd86980611163a0e022ba1f81cbad5bc
-  data.tar.gz: c14d9d18971851da2998b96c37ec916dc50f8b0de9fda00dbc7e2efa7879e816
+  metadata.gz: 48bc92c7ce7ec3beab1dc7d1ffe850b8faad27713e3f3daca23a545093d90826
+  data.tar.gz: 8c24fe8f0cf6a300606598c5f1260364aee72f39c6e21634b31589224b47d742
 SHA512:
-  metadata.gz: c4587ae4d3e04179f1c3d9d8588d1d75eca1b2661ff12dcb7cbbe69eb62581fe1dfccb2e8562fea1039578d3362622cfd5407bdd52a77356df9456d72655b71f
-  data.tar.gz: c8908601b811492da421f8772f2e735f1ba18b05a2a0fbffb75e0bffeb06fa647b492ee56385e764a4d87b58edf7c8ca73a7760246ff9fe494af37fbdb722171
+  metadata.gz: e052c817906a54b2a29c2c633e819bed85db06b21e9cd693194781e271ddc73420c62c4e3512b279a15b92285c1ab304259c2e541ca28c37c350253be505b6c1
+  data.tar.gz: 1b422eb9dfb8d1e94860c6fddd1547b7eed0f91f0bb17c677ca40fcdeec94eac1fb6758493379691e4045490db512b9cc1dbf031b092b6c7caa194b3ec6607b7

data/_data/feature/en/compress-pdf.json

@@ -100,15 +100,19 @@
   "infographics": [
     {
       "image": "/uploads/8_5_2024_1722847835453_template.webp",
-      "description": "How to set alarm on wake me up at 4:45 am tool"
+      "description": "How to set alarm on wake me up at 4:45 am tool",
+      "alt": "infographics 1"
+      
     },
     {
       "image": "/uploads/info.png",
-      "description": "How to set alarm on wake me up at 4:45 am tool"
+      "description": "How to set alarm on wake me up at 4:45 am tool",
+      "alt": "infographics 2"
     },
     {
       "image": "/uploads/8_5_2024_1722848984955_template.webp",
-      "description": "Additional features of wake me up at 4:45 am tool"
+      "description": "Additional features of wake me up at 4:45 am tool",
+      "alt": "infographics 3"
     }
   ],
   "posts": [

data/_includes/appscms/infographics/infographics.html

@@ -1,6 +1,63 @@
 <style>
+
+  .modal-arrow-btn {
+    position: absolute;
+    top: 50%;
+    width: 50px;
+    height: 50px;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 24px;
+    text-align: center;
+    line-height: 50px;
+    border-radius: 50%;
+    transform: translateY(-50%);
+  }
+  
+  .modal-arrow-btn.prev {
+    left: 10px;
+  }
+  
+  .modal-arrow-btn.next {
+    right: 10px;
+  }
+  @media (max-width: 768px) {
+    .modal-arrow-btn {
+      top: 30%;
+      width: 40px;
+      height: 40px;
+      font-size: 20px;
+      line-height: 40px;
+    }
+  
+    .modal-arrow-btn.prev {
+      left: 5px;
+    }
+  
+    .modal-arrow-btn.next {
+      right: 5px;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .modal-arrow-btn {
+      width: 30px;
+      height: 30px;
+      font-size: 16px;
+      line-height: 30px;
+    }
+  
+    .modal-arrow-btn.prev {
+      left: 3px;
+    }
+  
+    .modal-arrow-btn.next {
+      right: 3px;
+    }
+  }
   .modal1 {
-    display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
@@ -9,120 +66,153 @@
     height: 100%;
     overflow: auto;
     background-color: rgba(59, 58, 58, 0.9);
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.8);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
+  }
+  
+  .modal1.show {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
   }
+  
   .modal1-content1 {
     margin: auto;
     display: block;
     width: 80%;
     max-width: 800px;
     margin-top: 20px;
+    opacity: 0;
+    transform: translateY(-20px);
+    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
   }
-  .modal1-body img {
-    width: 100%;
-    height: auto;
-  }
-  .close1 {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 24px;
-    color: #fff;
-    cursor: pointer;
-  }
-  .close1:hover {
-    color: #ccc;
+  
+  .modal1.show .modal1-content1 {
+    opacity: 1;
+    transform: translateY(0);
   }
-</style>
-<div class="inforgraphics_section">
-  <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
-  <div class="wrapper">
-    <img
-      class="infographics-arrow"
-      id="left"
-      src="/assets/images/arrow-left.svg"
-      alt=""
-    />
-    <div class="carousel">
-      <div class="carousel-inner">
-        {%- if pageData.infographics -%} {% for item in pageData.infographics %}
-        <div class="slide">
-          <img
-            loading="lazy"
-            src="{{ item.image }}"
-            alt="img"
-            draggable="false"
-            class="infographic-img"
-            onclick="openModal1('{{ item.image }}')"
-          />
-          <p class="infographic-desc">{{ item.description | capitalize }}</p>
+    .modal1-body img {
+      width: 100%;
+      height: auto;
+    }
+    .close1 {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      font-size: 24px;
+      color: #fff;
+      cursor: pointer;
+    }
+    .close1:hover {
+      color: #ccc;
+    }
+  </style>
+  <div class="inforgraphics_section">
+    <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
+    <div class="wrapper">
+      <i id="left" class="fas fa-angle-left"></i>
+      <div class="carousel">
+        <div class="carousel-inner">
+          {%- if pageData.infographics -%} {% for item in pageData.infographics %}
+          <div class="slide">
+            <img
+              loading="lazy"
+              src="{{ item.image }}"
+              alt="{{item.alt}}"
+              draggable="false"
+              class="infographic-img"
+              onclick="openModal1('{{ item.image }}')"
+            />
+            <p class="infographic-desc">{{ item.description | capitalize }}</p>
+          </div>
+          {% endfor %} {%- endif -%}
         </div>
-        {% endfor %} {%- endif -%}
       </div>
+      <i id="right" class="fas fa-angle-right"></i>
     </div>
-    <img
-      class="infographics-arrow"
-      id="right"
-      src="/assets/images/arrow-right.svg"
-      alt=""
-    />
   </div>
-</div>
-<div id="imageModal1" class="modal1" onclick="closeModal1()">
-  <span class="close1" onclick="closeModal1()">&times;</span>
-  <div class="modal1-content1">
-    <div class="modal1-body">
-      <img id="modal1Image" src="" alt="Image" />
+  <div id="imageModal1" class="modal1" onclick="closeModal1()">
+    <span class="close1" onclick="closeModal1()">&times;</span>
+    <button class="modal-arrow-btn prev">&#10094;</button>
+    <button class="modal-arrow-btn next">&#10095;</button>
+    <div class="modal1-content1">
+      <div class="modal1-body">
+        <img id="modal1Image" src="" alt="Image" />
+      </div>
     </div>
   </div>
-</div>
-<script>
-  function openModal1(imageSrc) {
-    var modal1 = document.getElementById("imageModal1");
-    var modal1Img = document.getElementById("modal1Image");
-    modal1.style.display = "block";
-    modal1Img.src = imageSrc;
-  }
-  function closeModal1() {
-    var modal1 = document.getElementById("imageModal1");
-    modal1.style.display = "none";
-  }
-  document.addEventListener("click", function (event) {
-    var modal1 = document.getElementById("imageModal1");
-    if (event.target === modal1) {
-      closeModal1();
+  <script>
+  document.addEventListener("DOMContentLoaded", () => {
+    let modal_array_of_images = [];
+    let current_modal_img = 0;
+  
+    // Function to update the modal image
+    function updateModalImage() {
+      const modal1Img = document.getElementById("modal1Image");
+      if (modal_array_of_images.length > 0) {
+        modal1Img.src = modal_array_of_images[current_modal_img].src;
+      }
     }
-  });
-  const carousel = document.querySelector(".carousel-inner"),
-    firstImg = carousel.querySelectorAll("img")[0],
-    arrowIcons = document.querySelectorAll(".infographics-arrow");
-  const numImages = carousel.querySelectorAll("img").length;
-  const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
-  if (numImages > 3) {
-    arrowIcons[1].style.display = "block";
-  } else {
-    arrowIcons[0].style.display = "none";
-    arrowIcons[1].style.display = "none";
-  }
-  let isDragStart = false,
-    isDragging = false,
-    prevPageX,
-    prevScrollLeft,
-    positionDiff;
-  const showHideIcons = () => {
-    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
-    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
-    arrowIcons[1].style.display =
-      carousel.scrollLeft == scrollWidth ? "none" : "block";
-  };
-  arrowIcons.forEach((icon) => {
-    icon.addEventListener("click", () => {
-      let firstImgWidth = firstImg.clientWidth + 40;
-      const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
-      carousel.scrollBy({
-        left: scrollAmount,
-        behavior: "smooth",
+  
+    // Function to prepare the array of images for the modal
+    function readyallimages() {
+      modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
+    }
+  
+    // Function to open the modal and set the current image
+    function openModal1(imageSrc) {
+      const modal1 = document.getElementById("imageModal1");
+      modal1.classList.add("show");
+      modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
+      current_modal_img = modal_array_of_images.findIndex(img => img.src === imageSrc);
+      updateModalImage();
+    }
+  
+    // Function to close the modal
+    function closeModal1() {
+      const modal1 = document.getElementById("imageModal1");
+      modal1.classList.remove("show");
+    }
+  
+    // Add click event listeners to each infographic image
+    document.querySelectorAll('.infographic-img').forEach(img => {
+      img.addEventListener('click', (event) => {
+        openModal1(event.target.src);
+      });
+    });
+  
+    // Event listeners for the modal arrow buttons
+    const modal_btns = document.querySelectorAll('.modal-arrow-btn');
+    modal_btns.forEach(modal_btn => {
+      modal_btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (modal_btn.classList.contains('prev')) {
+          current_modal_img = (current_modal_img > 0) ? current_modal_img - 1 : modal_array_of_images.length - 1;
+        } else {
+          current_modal_img = (current_modal_img < modal_array_of_images.length - 1) ? current_modal_img + 1 : 0;
+        }
+        updateModalImage();
       });
-      setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
     });
+  
+    // Event listener for the close button
+    document.querySelectorAll(".close1").forEach(element => {
+      element.addEventListener("click", closeModal1);
+    });
+  
+    // Event listener for closing the modal when clicking outside the image
+    document.getElementById("imageModal1").addEventListener("click", (event) => {
+      if (event.target === document.getElementById("imageModal1")) {
+        closeModal1();
+      }
+    });
+  
+    // Initialize modal images on page load
+    readyallimages();
   });
-</script>
+  
+  </script>
+  

data/_layouts/appscms-batch.html

@@ -5,11 +5,7 @@ layout: appscms-feature
 <div class="container-fluid mt-4">
   {%- assign boxColor =
   site.data[page.folderName][page.lang][page.fileName].color -%}
-  <div
-    class="custom-box"
-    style=" padding-top: 0px"
-    data-color="{{boxColor}}"
-  >
+  <div class="custom-box" style="padding-top: 0px" data-color="{{boxColor}}">
     <div style="display: none" id="file-loader">
       <img
         src="/assets/images/spinner.gif"
@@ -44,7 +40,6 @@ layout: appscms-feature
           />
           <span class="ml-1">CHOOSE FILES</span>
         </div>
-    
       </div>
       <p id="dropfile" class="text-dark">or drop your image here</p>
     </div>

data/assets/css/appscms-feature.css

@@ -1,398 +0,0 @@
-.nav-tool-bar {
-  position: sticky;
-  top: 0;
-  width: 100%;
-  z-index: 999;
-}
-.appscms-upload-section {
-  height: 290px;
-  border: 2px dashed #484848;
-  padding: 20px;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: white;
-  gap: 10px;
-}
-.upload-btn {
-  text-align: center;
-  background-color: rgb(29, 22, 232);
-  color: white;
-  border-radius: 10px;
-  width: 195px;
-  height: 41px;
-  padding: 10px;
-  cursor: pointer;
-}
-.appscms-upload-section {
-  display: flex;
-  flex-direction: column;
-  box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.17);
-}
-
-.or-in-upload {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-}
-.line-in-upload {
-  height: 1.5px;
-  width: 60px;
-  background-color: rgb(146, 146, 146);
-}
-.appscms-feature-image {
-  max-width: 75px;
-}
-.appscms-feature-title {
-  font-size: 17px;
-  margin-top: 15px;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-}
-
-.appscms-feature-description {
-  font-size: 14px;
-  line-height: 22px;
-  margin-bottom: 0;
-}
-
-/* how to section */
-.appscms-how-to-section {
-  border-radius: 10px;
-  background-color: #f4f5ff;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-}
-.appscms-howto-heading {
-  /* margin-top: 40px; */
-  font-size: 25px;
-  font-weight: 500;
-}
-.how-to-video-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.appscms-howto-steps {
-  font-size: 1rem;
-  font-weight: normal;
-  line-height: 200%;
-}
-
-/* faq section */
-.faq-section {
-  text-align: left;
-}
-
-.faq-item {
-  box-shadow: 5px 2px 8px rgba(0, 0, 0, 0.1);
-  margin-bottom: 15px;
-  background: white;
-  padding: 1.5rem;
-  border-radius: 7px;
-}
-
-.faq-question {
-  font-size: 25px;
-  font-weight: 500;
-
-  margin-bottom: 10px;
-}
-
-.faq-answer {
-  font-size: 16px;
-  font-weight: normal;
-  margin-bottom: 20px;
-}
-
-.faq-answer-list {
-  font-size: 17px;
-  font-weight: normal;
-  margin-left: 20px;
-}
-
-/* recent posts */
-.appscms-recentposts {
-  font-size: 30px;
-}
-
-/* rating section */
-.ratings {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgb(252, 252, 252);
-  border-radius: 50px;
-  height: 70px;
-  /* color: #000000; */
-}
-
-.appsms-user-rating-count {
-  font-size: 25px;
-  font-weight: 600;
-}
-.appsms-user-total-count {
-  position: relative;
-  right: 20px;
-  top: 2px;
-}
-
-@media (max-width: 768px) {
-  .upload-btn {
-    width: 268px;
-    padding: 15px;
-    border-radius: 50px;
-    font-size: 20px;
-    height: auto;
-  }
-  .upload-from-drives img {
-    height: 40px;
-    width: 40px;
-  }
-  .drag-msg {
-    display: none;
-  }
-  .appscms-upload-section {
-    height: 100px;
-    margin-top: 20px;
-    background-color: transparent;
-    box-shadow: none;
-    border: none;
-  }
-  .appscms-upload-icon,
-  .or-in-upload {
-    display: none;
-  }
-  .rating-tool {
-    flex-direction: column;
-    display: flex;
-    gap: 15px;
-    height: auto;
-    padding: 15px 0px;
-  }
-  .heading {
-    padding-top: 70px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .heading h1 {
-    font-weight: 600;
-    font-size: 30px;
-  }
-  .heading h2 {
-    width: 80vw;
-    font-size: 14px;
-    text-align: center;
-  }
-
-  .appscms-how-to-section {
-    border-radius: 0px;
-    background-color: transparent;
-    box-shadow: none;
-  }
-  .appscms-howto-heading {
-    text-align: center;
-    margin-top: 40px;
-    font-size: 23px;
-    font-weight: 500;
-  }
-
-  .appscms-howto-steps {
-    font-size: 12px;
-    font-weight: normal;
-    line-height: 200%;
-  }
-  /* recent posts */
-  .appscms-recentposts {
-    font-size: 25px;
-  }
-
-  /* faq section */
-  .faq-question {
-    font-size: 22px;
-    margin-bottom: 18px;
-  }
-
-  .faq-answer {
-    font-size: 18px;
-    margin-bottom: 2px;
-  }
-
-  .faq-answer-list {
-    font-size: 11px;
-  }
-}
-
-.upload-redirect {
-  padding: 13px 1.5em 14px 1.5em;
-  color: #fff;
-  background-color: #5c5ce0;
-  border-color: #5c5ce0;
-  border-radius: 27px;
-  font-size: 18px;
-  font-weight: 600;
-  border: none;
-}
-
-#left-section {
-  display: flex;
-  flex-direction: column;
-  align-items: baseline;
-  justify-content: center;
-}
-
-.right-section img {
-  width: 90%;
-}
-
-#left-section h1,
-#left-section h2 {
-  text-align: left;
-  width: 100%;
-}
-
-.video-h1,
-.audio-h1 {
-  font-weight: 600;
-  font-size: 53px;
-}
-.toaster {
-  top: 150px;
-  padding: 12px 20px;
-  color: #fff;
-  display: inline-block;
-  box-shadow: 0 3px 6px -1px rgb(0 0 0 / 12%),
-    0 10px 36px -4px rgb(77 96 232 / 30%);
-  background: var(--primary-color);
-  position: fixed;
-  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
-  border-radius: 2px;
-  right: 0px;
-  cursor: pointer;
-  text-decoration: none;
-  max-width: calc(50% - 20px);
-  z-index: 2147483647;
-}
-.inforgraphics_section {
-  width: 100%;
-  padding: 50px 0px 50px 0px;
-  border-top: 1px solid rgb(224, 224, 224);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.inforgraphics_section .wrapper {
-  display: flex;
-  max-width: 90%;
-  position: relative;
-}
-
-.inforgraphics_section .wrapper i {
-  top: 50%;
-  height: 44px;
-  width: 44px;
-  color: #343f4f;
-  cursor: pointer;
-  font-size: 1.15rem;
-  position: absolute;
-  text-align: center;
-  line-height: 44px;
-  background: #eee;
-  border-radius: 50%;
-  transform: translateY(-50%);
-  transition: transform 0.1s linear;
-}
-
-.inforgraphics_section .wrapper i:active {
-  transform: translateY(-50%) scale(0.9);
-}
-
-.inforgraphics_section .wrapper i:hover {
-  background: #f2f2f2;
-}
-
-.inforgraphics_section .wrapper i:first-child {
-  left: 0px;
-  display: none;
-  z-index: 999;
-}
-
-.inforgraphics_section .wrapper i:last-child {
-  right: 0px;
-}
-
-.carousel {
-  display: flex;
-  max-width: 100%;
-  overflow-x: scroll;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-}
-
-.carousel-inner {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: center;
-}
-@media screen and (max-width: 768px) {
-  .carousel-inner {
-    justify-content: normal;
-  }
-}
-.slide {
-  flex: 0 0 calc(100% / 3);
-  scroll-snap-align: start;
-  padding: 20px;
-}
-
-.carousel img {
-  width: 100%;
-  object-fit: contain;
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-}
-
-.carousel-inner p {
-  text-align: center;
-  margin: 10px 0;
-  font-size: 14px;
-  white-space: normal;
-  word-wrap: break-word;
-}
-
-@media screen and (max-width: 768px) {
-  .inforgraphics_section .wrapper {
-    max-width: 100%;
-  }
-
-  .carousel-inner p {
-    font-size: 20px;
-  }
-
-  .inforgraphics_section .wrapper i:first-child {
-    left: 0;
-    z-index: 99;
-  }
-
-  .inforgraphics_section .wrapper i:last-child {
-    right: 0;
-    z-index: 99;
-    display: block !important;
-  }
-
-  .carousel {
-    overflow-x: hidden;
-  }
-
-  .slide {
-    flex: 0 0 100%;
-    margin-right: 0;
-  }
-}

data/assets/css/appscms-theme.css

@@ -2190,3 +2190,401 @@ select:focus {
     grid-template-columns: auto; /* 1 column for small screens */
   }
 }
+.nav-tool-bar {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+}
+.appscms-upload-section {
+  height: 290px;
+  border: 2px dashed #484848;
+  padding: 20px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  gap: 10px;
+}
+.upload-btn {
+  text-align: center;
+  background-color: rgb(29, 22, 232);
+  color: white;
+  border-radius: 10px;
+  width: 195px;
+  height: 41px;
+  padding: 10px;
+  cursor: pointer;
+}
+.appscms-upload-section {
+  display: flex;
+  flex-direction: column;
+  box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.17);
+}
+
+.or-in-upload {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+.line-in-upload {
+  height: 1.5px;
+  width: 60px;
+  background-color: rgb(146, 146, 146);
+}
+.appscms-feature-image {
+  max-width: 75px;
+}
+.appscms-feature-title {
+  font-size: 17px;
+  margin-top: 15px;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.appscms-feature-description {
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 0;
+}
+
+/* how to section */
+.appscms-how-to-section {
+  border-radius: 10px;
+  background-color: #f4f5ff;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}
+.appscms-howto-heading {
+  /* margin-top: 40px; */
+  font-size: 25px;
+  font-weight: 500;
+}
+.how-to-video-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.appscms-howto-steps {
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 200%;
+}
+
+/* faq section */
+.faq-section {
+  text-align: left;
+}
+
+.faq-item {
+  box-shadow: 5px 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 15px;
+  background: white;
+  padding: 1.5rem;
+  border-radius: 7px;
+}
+
+.faq-question {
+  font-size: 25px;
+  font-weight: 500;
+
+  margin-bottom: 10px;
+}
+
+.faq-answer {
+  font-size: 16px;
+  font-weight: normal;
+  margin-bottom: 20px;
+}
+
+.faq-answer-list {
+  font-size: 17px;
+  font-weight: normal;
+  margin-left: 20px;
+}
+
+/* recent posts */
+.appscms-recentposts {
+  font-size: 30px;
+}
+
+/* rating section */
+.ratings {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgb(252, 252, 252);
+  border-radius: 50px;
+  height: 70px;
+  /* color: #000000; */
+}
+
+.appsms-user-rating-count {
+  font-size: 25px;
+  font-weight: 600;
+}
+.appsms-user-total-count {
+  position: relative;
+  right: 20px;
+  top: 2px;
+}
+
+@media (max-width: 768px) {
+  .upload-btn {
+    width: 268px;
+    padding: 15px;
+    border-radius: 50px;
+    font-size: 20px;
+    height: auto;
+  }
+  .upload-from-drives img {
+    height: 40px;
+    width: 40px;
+  }
+  .drag-msg {
+    display: none;
+  }
+  .appscms-upload-section {
+    height: 100px;
+    margin-top: 20px;
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+  }
+  .appscms-upload-icon,
+  .or-in-upload {
+    display: none;
+  }
+  .rating-tool {
+    flex-direction: column;
+    display: flex;
+    gap: 15px;
+    height: auto;
+    padding: 15px 0px;
+  }
+  .heading {
+    padding-top: 70px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .heading h1 {
+    font-weight: 600;
+    font-size: 30px;
+  }
+  .heading h2 {
+    width: 80vw;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .appscms-how-to-section {
+    border-radius: 0px;
+    background-color: transparent;
+    box-shadow: none;
+  }
+  .appscms-howto-heading {
+    text-align: center;
+    margin-top: 40px;
+    font-size: 23px;
+    font-weight: 500;
+  }
+
+  .appscms-howto-steps {
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 200%;
+  }
+  /* recent posts */
+  .appscms-recentposts {
+    font-size: 25px;
+  }
+
+  /* faq section */
+  .faq-question {
+    font-size: 22px;
+    margin-bottom: 18px;
+  }
+
+  .faq-answer {
+    font-size: 18px;
+    margin-bottom: 2px;
+  }
+
+  .faq-answer-list {
+    font-size: 11px;
+  }
+}
+
+.upload-redirect {
+  padding: 13px 1.5em 14px 1.5em;
+  color: #fff;
+  background-color: #5c5ce0;
+  border-color: #5c5ce0;
+  border-radius: 27px;
+  font-size: 18px;
+  font-weight: 600;
+  border: none;
+}
+
+#left-section {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  justify-content: center;
+}
+
+.right-section img {
+  width: 90%;
+}
+
+#left-section h1,
+#left-section h2 {
+  text-align: left;
+  width: 100%;
+}
+
+.video-h1,
+.audio-h1 {
+  font-weight: 600;
+  font-size: 53px;
+}
+.toaster {
+  top: 150px;
+  padding: 12px 20px;
+  color: #fff;
+  display: inline-block;
+  box-shadow: 0 3px 6px -1px rgb(0 0 0 / 12%),
+    0 10px 36px -4px rgb(77 96 232 / 30%);
+  background: var(--primary-color);
+  position: fixed;
+  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+  border-radius: 2px;
+  right: 0px;
+  cursor: pointer;
+  text-decoration: none;
+  max-width: calc(50% - 20px);
+  z-index: 2147483647;
+}
+.inforgraphics_section {
+  width: 100%;
+  padding: 50px 0px 50px 0px;
+  border-top: 1px solid rgb(224, 224, 224);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.inforgraphics_section .wrapper {
+  display: flex;
+  max-width: 90%;
+  position: relative;
+}
+
+.inforgraphics_section .wrapper i {
+  top: 50%;
+  height: 44px;
+  width: 44px;
+  color: #343f4f;
+  cursor: pointer;
+  font-size: 1.15rem;
+  position: absolute;
+  text-align: center;
+  line-height: 44px;
+  background: #eee;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.1s linear;
+}
+
+.inforgraphics_section .wrapper i:active {
+  transform: translateY(-50%) scale(0.9);
+}
+
+.inforgraphics_section .wrapper i:hover {
+  background: #f2f2f2;
+}
+
+.inforgraphics_section .wrapper i:first-child {
+  left: 0px;
+  display: none;
+  z-index: 999;
+}
+
+.inforgraphics_section .wrapper i:last-child {
+  right: 0px;
+}
+
+.carousel {
+  display: flex;
+  max-width: 100%;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+}
+
+.carousel-inner {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+}
+@media screen and (max-width: 768px) {
+  .carousel-inner {
+    justify-content: normal;
+  }
+}
+.slide {
+  flex: 0 0 calc(100% / 3);
+  scroll-snap-align: start;
+  padding: 20px;
+}
+
+.carousel img {
+  width: 100%;
+  object-fit: contain;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.carousel-inner p {
+  text-align: center;
+  margin: 10px 0;
+  font-size: 14px;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+@media screen and (max-width: 768px) {
+  .inforgraphics_section .wrapper {
+    max-width: 100%;
+  }
+
+  .carousel-inner p {
+    font-size: 20px;
+  }
+
+  .inforgraphics_section .wrapper i:first-child {
+    left: 0;
+    z-index: 99;
+  }
+
+  .inforgraphics_section .wrapper i:last-child {
+    right: 0;
+    z-index: 99;
+    display: block !important;
+  }
+
+  .carousel {
+    overflow-x: hidden;
+  }
+
+  .slide {
+    flex: 0 0 100%;
+    margin-right: 0;
+  }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 4.8.8
+  version: 4.8.9
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-09-25 00:00:00.000000000 Z
+date: 2024-10-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll