fix: kofi button on mobile devices

EndstoneMC · Aug 30, 2024 · eb0502b · eb0502b
1 parent 7f2af67
commit eb0502b
Showing 1 changed file with 21 additions and 5 deletions.
diff --git a/docs/overrides/main.html b/docs/overrides/main.html
@@ -16,27 +16,43 @@
     kofiWidgetOverlay.draw('endstonemc', {
         'type': 'floating-chat',
         'floating-chat.donateButton.text': 'Support Us',
-        'floating-chat.donateButton.background-color': '#aac7ff',
-        'floating-chat.donateButton.text-color': '#2e3036'
+        'floating-chat.donateButton.background-color': '#f37574',
+        'floating-chat.donateButton.text-color': '#fff'
     });
 </script>
 <script>
     let lastScrollTop = 0;
     const widgetContainer = document.querySelector('.floatingchat-container-wrap');
+    const widgetContainerMobi = document.querySelector('.floatingchat-container-wrap-mobi');
 
     window.addEventListener('scroll', function () {
         const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
         if (scrollTop > lastScrollTop) {
             widgetContainer.classList.add('hidden');
+            widgetContainerMobi.classList.add('hidden');
         } else {
             widgetContainer.classList.remove('hidden');
+            widgetContainerMobi.classList.remove('hidden');
         }
         lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
     }, false);
 </script>
 <style>
-    .floatingchat-container-wrap { left: unset; right: 12px; transition: transform 0.3s ease-in-out; }
-    .floatingchat-container-wrap.hidden { transform: translateY(100px); }
-    .floating-chat-kofi-popup-iframe { left: unset; right: 12px; }
+    .floatingchat-container-wrap, .floatingchat-container-wrap-mobi {
+        left: unset;
+        right: 12px;
+        width: 100%;
+        transition: transform 0.3s ease-in-out;
+        z-index: 4;
+    }
+
+    .floatingchat-container-wrap.hidden, .floatingchat-container-wrap-mobi.hidden {
+        transform: translateY(100px);
+    }
+
+    .floating-chat-kofi-popup-iframe, .floating-chat-kofi-popup-iframe-mobi {
+        left: unset;
+        right: 12px;
+    }
 </style>
 {% endblock %}