From 75b5b1b27925c6b2a7f9d61edd58ac88120309cc Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Thu, 31 Oct 2024 19:30:43 -0700
Subject: [PATCH] Fix hotspot styles on mobile

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 modules/glmv.css | 87 ++++++++++++++++++++++++++++--------------------
 1 file changed, 50 insertions(+), 37 deletions(-)

diff --git a/modules/glmv.css b/modules/glmv.css
index 61e03b9..23b640c 100644
--- a/modules/glmv.css
+++ b/modules/glmv.css
@@ -22,9 +22,9 @@
     & [hidden] {
         display: none;
     }
-  }
+}
   
-  .HotspotAnnotation{
+.HotspotAnnotation{
     background: rgb(255, 255, 255);
     border-radius: 4px;
     box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px;
@@ -42,41 +42,41 @@
     transform: translateY(-50%);
     transition: height 0.3s;
     width: max-content;
-  }
+}
   
-  .HiddenAnnotation{
-      height: 0;
-      opacity: 0;
-  }
+.HiddenAnnotation{
+    height: 0;
+    opacity: 0;
+}
   
-  .material-symbols-outlined.button-show-model{
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate3d(-50%, -50%, 0);
-      background: #00000080;
-      font-size: 50px;
-      color: white;
-      width: 50px;
-      height: 50px;
-      cursor: pointer;
-      transition: opacity 0.3s, display 0s;
-  }
+.material-symbols-outlined.button-show-model{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    background: #00000080;
+    font-size: 50px;
+    color: white;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    transition: opacity 0.3s, display 0s;
+}
   
-  .button-show-model.button-used{
-      opacity: 0;
-      display: none;
-  }
-
-  .gallerybox .gallerytext div:has(model-viewer) {
+.button-show-model.button-used{
+    opacity: 0;
     display: none;
-  }
+}
 
-  .glmv-container {
+.gallerybox .gallerytext div:has(model-viewer) {
+    display: none;
+}
+
+.glmv-container {
     position: relative;
-  }
+}
 
-  .glmv-menu {
+.glmv-menu {
     border: solid 2px #0000008F;
     background: #FFFFFFCC;
     overflow: hidden;
@@ -99,17 +99,17 @@
             transform: rotate(180deg);
         }
     }
-  }
+}
 
-  .glmv-menu-image {
+.glmv-menu-image {
     width: 32px;
     height: 32px;
     position: relative;
     transition: transform .5s;
     flex: 0 0 32px;
-  }
+}
 
-  .glmv-menu-button {
+.glmv-menu-button {
     width: 28px;
     height: 28px;
     position: relative;
@@ -131,8 +131,21 @@
         pointer-events: none;
         opacity: .3;
     }
-  }
+}
 
-  .prev-hs img {
+.prev-hs img {
     transform: scaleX(-1);
-  }
\ No newline at end of file
+}
+
+@media (pointer: coarse)  {
+    .Hotspot {
+        width: 60px;
+        height: 60px;
+        font-size: 40px;
+    }
+
+    .HotspotAnnotation{
+        max-width: 240px;
+        width: auto;
+    }
+}
\ No newline at end of file