Update style/defaults/style.css

style/defaults/style.css

@@ -116,35 +116,34 @@ progress::-moz-progress-bar {
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
-  background: rgba(242,240,239,0.87);   /* Slightly more transparent */
+  background: rgba(242,240,239,0.87);
   color: #545454;
   border: 1px solid #ddd;
   border-radius: 10px;
   padding: 18px 24px;
   font-size: 15px;
   line-height: 1.4;
-  box-shadow: none;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   z-index: 1010;
   max-width: 90vw;
   max-height: 90%;
-  overflow: scroll !important;
+  overflow: scroll !important;  /* Always show scrollbar */
   scrollbar-gutter: stable both-edges;
   box-sizing: border-box;
 }
 .menu-content::-webkit-scrollbar {
-  width: 10px;
+  width: 12px;
 }
 .menu-content::-webkit-scrollbar-thumb {
-  background: #cccccc;
-  border-radius: 6px;
+  background: #bbbbbb;
+  border-radius: 8px;
 }
 .menu-content::-webkit-scrollbar-track {
-  background: #f0f0f0;
-  border-radius: 6px;
+  background: #e7e7e7;
+  border-radius: 8px;
 }
 
-/* Tooltip panel */
+/* --- Tooltip Panel (tooltip-panel) --- */
 .tooltip-panel {
   position: absolute;
   top: 50%;
@@ -165,36 +164,32 @@ progress::-moz-progress-bar {
   flex-direction: column;
   align-items: flex-start;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  overflow: scroll !important;
+  overflow: scroll !important;  /* Always show scrollbar */
   scrollbar-gutter: stable both-edges;
   box-sizing: border-box;
 }
 .tooltip-panel::-webkit-scrollbar {
-  width: 10px;
+  width: 12px;
 }
 .tooltip-panel::-webkit-scrollbar-thumb {
-  background: #cccccc;
-  border-radius: 6px;
+  background: #bbbbbb;
+  border-radius: 8px;
 }
 .tooltip-panel::-webkit-scrollbar-track {
-  background: #f0f0f0;
-  border-radius: 6px;
+  background: #e7e7e7;
+  border-radius: 8px;
 }
 
-/* Ensure content does not go under close button */
+/* --- Tooltip Panel Content --- */
 .tooltip-content {
   width: 100%;
-  min-width: 160px;
   max-width: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  overflow: hidden;
   margin-top: 0;
 }
-
-/* CLOSE BUTTON AS SQUARE WITH ROUNDED CORNERS */
 .tooltip-close {
   position: absolute;
   top: 12px;
@@ -222,8 +217,6 @@ progress::-moz-progress-bar {
   background: #e0e0e0;
   outline: none;
 }
-
-/* Tooltip text and image */
 .tooltip-text {
   margin-bottom: 10px;
   font-size: 14px;
@@ -242,6 +235,47 @@ progress::-moz-progress-bar {
   box-sizing: border-box;
 }
 
+/* --- MOBILE adjustments --- */
+@media (max-width: 600px) {
+  .menu-content {
+    width: 85vw;
+    max-height: 90%;
+    overflow: scroll !important;
+    scrollbar-gutter: stable both-edges;
+    padding: 40px 18px 14px;
+    font-size: 14px;
+  }
+  .menu-content .help-close {
+    top: 6px;
+    right: 6px;
+  }
+  .tooltip-panel {
+    top: auto;
+    bottom: 8px;
+    left: 3vw;
+    right: 3vw;
+    transform: none;
+    width: auto;
+    max-width: 94vw;
+    min-width: 0;
+    max-height: 55%;
+    padding: 20px 10px 12px 10px;
+    font-size: 13.5px;
+    overflow: scroll !important;
+    scrollbar-gutter: stable both-edges;
+  }
+  .tooltip-close {
+    top: 8px;
+    right: 8px;
+    width: 26px;
+    height: 26px;
+    font-size: 15px;
+  }
+  .tooltip-image {
+    max-height: 22vh;
+  }
+}
+
 .help-close {
   position: absolute;
   top: 8px;