From e2393fa73c1c0ff41b1b6baa249dc0f45e3465b7 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Wed, 22 Oct 2025 10:29:04 +1100
Subject: [PATCH] fix: add missing CSS for mobile refresh FAB button

Mobile refresh button was created in HTML but had no CSS styling,
making it invisible. Desktop refresh button was showing on mobile
with wrong sizing.

Changes:
- Added .rpg-mobile-refresh FAB styles (44px, draggable, etc.)
- Show mobile refresh FAB on mobile viewports
- Hide desktop #rpg-manual-update button on mobile
- Added responsive icon sizing for mobile refresh button

Fixes issue where users only saw the desktop refresh button with
incorrect DPI/sizing on mobile devices.
---
 style.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/style.css b/style.css
index e69ae64..5b6bb8a 100644
--- a/style.css
+++ b/style.css
@@ -3305,6 +3305,45 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     transform: rotate(180deg);
 }
 
+/* ============================================
+   MOBILE REFRESH FAB BUTTON (Same pattern as mobile toggle)
+   ============================================ */
+.rpg-mobile-refresh {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    /* Position set by JavaScript based on saved settings */
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: var(--SmartThemeBlurTintColor);
+    border: 2px solid var(--SmartThemeBorderColor);
+    color: var(--SmartThemeBodyColor);
+    font-size: 1.125rem;
+    cursor: grab;
+    z-index: 1001; /* Below mobile toggle (10002), above debug (1000) */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: opacity 0.3s ease, transform 0.2s ease, top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
+    user-select: none;
+    -webkit-user-select: none;
+    will-change: top, left;
+}
+
+.rpg-mobile-refresh.dragging {
+    transition: none;
+    cursor: grabbing;
+}
+
+.rpg-mobile-refresh:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.rpg-mobile-refresh:active {
+    transform: scale(0.95);
+}
+
 /* Mobile overlay backdrop */
 .rpg-mobile-overlay {
     display: none;
@@ -3330,6 +3369,16 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         display: flex;
     }
 
+    /* Show the mobile FAB refresh button */
+    .rpg-mobile-refresh {
+        display: flex;
+    }
+
+    /* Hide desktop refresh button on mobile */
+    #rpg-manual-update {
+        display: none !important;
+    }
+
     /* Hide FAB when panel is open */
     body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-toggle {
         opacity: 0;
@@ -3988,6 +4037,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         font-size: clamp(20px, 5.1vw, 26px) !important;
     }
 
+    /* Larger mobile refresh icon */
+    .rpg-mobile-refresh {
+        font-size: clamp(20px, 5.1vw, 26px) !important;
+    }
+
     /* ========================================
        MOBILE SETTINGS POPUP
        ======================================== */