@hytopia.com/examples 1.0.17 → 1.0.18

package/frontiers-rpg-game/assets/ui/menus/merchant.html

@@ -897,155 +897,149 @@
   .merchant-hotbar-slot.merchant-legendary { border-color: #F59E0B; }
 
   /* Mobile styles */
-  @media (max-width: 768px) {
-    body.mobile {
-      --merchant-slot-size: 40px;
-      --merchant-hotbar-size: 40px;
-      --merchant-icon-size: 20px;
-      --merchant-gap: 3px;
-      --merchant-padding: 6px;
-    }
-
-    body.mobile .merchant-overlay {
-      gap: 8px;
-      padding: 4px;
-    }
+  body.mobile {
+    --merchant-slot-size: 44px;
+    --merchant-hotbar-size: 44px;
+    --merchant-icon-size: 32px;
+    --merchant-gap: 4px;
+    --merchant-padding: 8px;
+  }
 
-    body.mobile .merchant-container,
-    body.mobile .merchant-hotbar-container {
-      width: auto;
-      max-width: 500px;
-      min-width: 320px;
-    }
+  body.mobile .merchant-overlay {
+    gap: 12px;
+    padding: 8px;
+  }
 
-    body.mobile .merchant-header {
-      padding: 4px 8px;
-    }
+  body.mobile .merchant-container,
+  body.mobile .merchant-hotbar-container {
+    width: auto;
+    max-width: 560px;
+    min-width: 340px;
+    border-radius: 8px;
+  }
 
-    body.mobile .merchant-info {
-      gap: 8px;
-    }
+  body.mobile .merchant-header {
+    padding: 8px 12px;
+    border-radius: 8px 8px 0 0;
+  }
 
-    body.mobile .merchant-avatar {
-      width: 32px;
-      height: 32px;
-    }
+  body.mobile .merchant-info {
+    gap: 8px;
+  }
 
-    body.mobile .merchant-name {
-      font-size: 12px;
-    }
+  body.mobile .merchant-avatar {
+    width: 32px;
+    height: 32px;
+  }
 
-    body.mobile .merchant-title {
-      font-size: 10px;
-    }
+  body.mobile .merchant-name {
+    font-size: 14px;
+  }
 
-    body.mobile .merchant-close {
-      width: 20px;
-      height: 20px;
-      font-size: 14px;
-    }
+  body.mobile .merchant-title {
+    font-size: 12px;
+  }
 
-    body.mobile .merchant-content {
-      padding: 6px;
-      flex-direction: column;
-      gap: 8px;
-    }
+  body.mobile .merchant-close {
+    width: 24px;
+    height: 24px;
+    font-size: 16px;
+  }
 
-    body.mobile .merchant-grid,
-    body.mobile .merchant-hotbar-grid {
-      justify-items: center;
-      width: fit-content;
-      margin: 0 auto;
-    }
+  body.mobile .merchant-content {
+    padding: 12px;
+    gap: 12px;
+  }
 
-    body.mobile .merchant-right-panel {
-      width: auto;
-      flex: 1;
-      min-height: 80px;
-      padding: var(--merchant-padding);
-    }
+  body.mobile .merchant-grid,
+  body.mobile .merchant-hotbar-grid {
+    padding: 8px;
+    border-radius: 6px;
+  }
 
-    body.mobile .merchant-panel-placeholder {
-      padding: 20px;
-      font-size: 12px;
-    }
+  body.mobile .merchant-hotbar-grid {
+    justify-items: center;
+    width: fit-content;
+    margin: 0 auto;
+    padding: 12px;
+    border-radius: 0 0 6px 6px;
+  }
 
-    body.mobile .merchant-slot-content,
-    body.mobile .merchant-hotbar-slot-content {
-      font-size: 10px;
-    }
+  body.mobile .merchant-right-panel {
+    padding: 8px;
+    border-radius: 6px;
+    flex: 0 0 184px;
+    min-width: 184px;
+    box-sizing: border-box;
+  }
 
-    body.mobile .merchant-item-icon {
-      width: 32px;
-      height: 32px;
-    }
+  body.mobile .merchant-panel-placeholder {
+    font-size: 12px;
+  }
 
-    body.mobile .merchant-hotbar-slot-icon {
-      width: 32px;
-      height: 32px;
-    }
+  body.mobile .merchant-slot-content,
+  body.mobile .merchant-hotbar-slot-content {
+    font-size: 10px;
+  }
 
-    body.mobile .merchant-slot-quantity {
-      font-size: 7px;
-      padding: 1px 2px;
-      bottom: 1px;
-      right: 1px;
-      min-width: 8px;
-    }
+  body.mobile .merchant-item-icon {
+    width: 36px;
+    height: 36px;
+  }
 
-    body.mobile .merchant-hotbar-slot-quantity {
-      font-size: 8px;
-      padding: 1px 3px;
-      bottom: 1px;
-      right: 1px;
-    }
+  body.mobile .merchant-hotbar-slot-icon {
+    width: 36px;
+    height: 36px;
+  }
 
-    body.mobile .merchant-item-tooltip {
-      display: none;
-    }
+  body.mobile .merchant-slot-quantity {
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 2px;
+    right: 2px;
+    min-width: 10px;
+    border-radius: 3px;
+  }
 
-    /* Mobile item details */
-    body.mobile .merchant-item-details {
-      gap: 6px;
-    }
+  body.mobile .merchant-hotbar-slot-quantity {
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 2px;
+    right: 2px;
+    min-width: 12px;
+    border-radius: 3px;
+  }
 
-    body.mobile .merchant-item-header {
-      gap: 8px;
-      padding: 6px;
-    }
 
-    body.mobile .merchant-item-actions {
-      gap: 6px;
-    }
 
-    body.mobile .merchant-item-icon {
-      width: 24px;
-      height: 24px;
-    }
+  /* Mobile item details */
+  body.mobile .merchant-item-details {
+    min-width: 180px;
+    gap: 8px;
+  }
 
-    body.mobile .merchant-item-name {
-      font-size: 10px;
-    }
+  body.mobile .merchant-item-header {
+    gap: 6px;
+  }
 
-    body.mobile .merchant-item-total {
-      font-size: 9px;
-    }
+  body.mobile .merchant-item-actions {
+    gap: 12px;
+  }
 
-    body.mobile .merchant-qty-btn {
-      width: 20px;
-      height: 20px;
-      font-size: 10px;
-    }
+  body.mobile .merchant-qty-btn {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
 
-    body.mobile .merchant-qty-display {
-      font-size: 10px;
-      min-width: 16px;
-    }
+  body.mobile .merchant-qty-display {
+    font-size: 12px;
+    min-width: 20px;
+  }
 
-    body.mobile .merchant-action-btn {
-      padding: 6px 12px;
-      font-size: 10px;
-    }
+  body.mobile .merchant-action-btn {
+    padding: 8px 16px;
+    font-size: 12px;
   }
 
   /* Button styles */

package/frontiers-rpg-game/assets/ui/menus/quests.html

@@ -875,13 +875,15 @@
   /* Mobile Styles */
   body.mobile .quests-container {
     width: auto;
-    max-width: 98vw;
-    min-width: 300px;
-    height: 90vh;
+    max-width: 600px;
+    min-width: 340px;
+    height: 85vh;
+    border-radius: 8px;
   }
 
   body.mobile .quests-header {
     padding: 8px 12px;
+    border-radius: 8px 8px 0 0;
   }
 
   body.mobile .quests-title {
@@ -889,72 +891,193 @@
   }
 
   body.mobile .quests-close {
-    width: 20px;
-    height: 20px;
-    font-size: 14px;
-  }
-
-  body.mobile .quests-content {
-    flex-direction: column;
+    width: 24px;
+    height: 24px;
+    font-size: 16px;
+    border-radius: 6px;
   }
 
   body.mobile .quests-sidebar {
-    width: auto;
-    max-height: 200px;
-    border-right: none;
-    border-bottom: 1px solid #444;
-  }
-
-  body.mobile .quests-section {
-    flex: none;
+    width: 175px;
+    min-width: 175px;
   }
 
   body.mobile .quests-section-title {
-    padding: 8px 12px 6px;
-    font-size: 12px;
+    padding: 8px 10px 6px;
+    font-size: 11px;
   }
 
   body.mobile .quests-list {
     padding: 6px;
-    max-height: 120px;
+  }
+
+  body.mobile .quests-list * {
+    touch-action: pan-y !important;
+    overflow-y: scroll;
   }
 
   body.mobile .quests-item {
-    padding: 8px;
-    margin-bottom: 4px;
+    padding: 3px 8px;
+    margin-bottom: 3px;
+    border-radius: 6px;
+    min-height: 28px;
   }
 
   body.mobile .quests-item-name {
     font-size: 11px;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   body.mobile .quests-item-progress {
-    font-size: 10px;
+    font-size: 9px;
+    font-weight: 600;
   }
 
   body.mobile .quests-details-content {
     padding: 12px;
   }
 
+  body.mobile .quests-details-content * {
+    touch-action: pan-y !important;
+    overflow-y: scroll;
+  }
+
+  /* Exception for reward items and tooltips - override the blanket overflow rule */
+  body.mobile .quests-reward-item,
+  body.mobile .quests-reward-item *,
+  body.mobile .quests-reward-item-tooltip,
+  body.mobile .quests-reward-item-tooltip * {
+    overflow: visible !important;
+  }
+
+  /* Ensure all parent containers allow tooltips to escape */
+  body.mobile .quests-rewards-list,
+  body.mobile .quests-detail-rewards,
+  body.mobile .quests-details-panel {
+    overflow: visible !important;
+  }
+
+  body.mobile .quests-rewards-list * {
+    overflow-y: scroll !important;
+    touch-action: pan-y !important;
+  }
+
+  body.mobile .quests-detail-header {
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+  }
+
   body.mobile .quests-detail-name {
-    font-size: 16px;
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+
+  body.mobile .quests-detail-description {
+    margin-bottom: 16px;
   }
 
   body.mobile .quests-detail-description p {
     font-size: 11px;
+    line-height: 1.4;
+  }
+
+  body.mobile .quests-detail-objectives {
+    margin-bottom: 12px;
   }
 
-  body.mobile .quests-objectives-title {
+  body.mobile .quests-objectives-title,
+  body.mobile .quests-rewards-title {
     font-size: 12px;
+    margin-bottom: 8px;
+  }
+
+  body.mobile .quests-objectives-list {
+    margin-bottom: 6px;
+  }
+
+  body.mobile .quests-objective {
+    padding: 6px 0;
+    gap: 8px;
+  }
+
+  body.mobile .quests-objective-icon {
+    width: 14px;
+    height: 14px;
+    font-size: 10px;
   }
 
   body.mobile .quests-objective-text {
-    font-size: 11px;
+    font-size: 10px;
+    line-height: 1.3;
+  }
+
+  body.mobile .quests-reward-item {
+    padding: 3px 8px;
+    gap: 6px;
+    border-radius: 6px;
+    min-height: 24px;
+  }
+
+  body.mobile .quests-reward-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  body.mobile .quests-reward-exp-icon {
+    font-size: 12px;
+    width: 16px;
+  }
+
+  body.mobile .quests-reward-text {
+    font-size: 10px;
+    font-weight: 500;
   }
 
   body.mobile .quests-empty-section {
     padding: 12px 8px;
-    font-size: 12px;
+    font-size: 10px;
+    line-height: 1.3;
+  }
+
+  body.mobile .quests-empty-content {
+    padding: 16px 12px;
+  }
+
+  body.mobile .quests-empty-icon {
+    font-size: 32px;
+    margin-bottom: 8px;
+  }
+
+  body.mobile .quests-empty-text {
+    font-size: 11px;
+    line-height: 1.3;
+    padding: 0 6px;
+  }
+
+  /* Mobile tooltip adjustments */
+  body.mobile .quests-reward-item-tooltip {
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+  }
+
+  body.mobile .quests-reward-item-tooltip.mobile-tooltip-visible {
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+
+  /* Override mobile caret centering - keep caret over reward icon */
+  body.mobile .quests-reward-item-tooltip-content::after {
+    left: 15px !important;
+    transform: translateX(-50%) !important;
+  }
+
+  body.mobile .quests-reward-item-tooltip-content::before {
+    left: 15px !important;
+    transform: translateX(-50%) !important;
   }