diff --git a/index.js b/index.js index 89839c3..ae21007 100644 --- a/index.js +++ b/index.js @@ -303,7 +303,20 @@ async function initUI() { // console.log('[RPG Companion] Extension is disabled. Please enable it in the Extensions tab.'); return; } - await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory); + + // Remove focus to prevent sticky black state on mobile + $(this).blur(); + + // Add spinning animation to mobile button + const $mobileBtn = $('#rpg-manual-update-mobile'); + $mobileBtn.addClass('spinning'); + + try { + await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory); + } finally { + // Remove spinning animation when done + $mobileBtn.removeClass('spinning'); + } }); $('#rpg-stat-bar-color-low').on('change', function() { diff --git a/src/systems/rendering/userStats.js b/src/systems/rendering/userStats.js index 5e59bac..eed3789 100644 --- a/src/systems/rendering/userStats.js +++ b/src/systems/rendering/userStats.js @@ -61,9 +61,6 @@ export function renderUserStats() { | LVL ${extensionSettings.level} -
diff --git a/style.css b/style.css index 08ac9f0..b6f1a99 100644 --- a/style.css +++ b/style.css @@ -2708,41 +2708,61 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } /* ============================================ - REFRESH ICON BUTTON (Mobile) + REFRESH ICON BUTTON (Mobile - Floating) ============================================ */ .rpg-refresh-icon-btn { display: none; /* Hidden by default, shown on mobile */ - width: 36px; - height: 36px; + position: absolute; + top: 10px; + right: 10px; + width: 44px; /* Touch-friendly size */ + height: 44px; padding: 0; - margin-left: auto; /* Push to right side */ background: var(--rpg-highlight); border: 2px solid var(--rpg-highlight); border-radius: 50%; color: var(--rpg-text); - font-size: 0.875rem; + font-size: 1rem; cursor: pointer; - transition: all 0.3s ease; + transition: transform 0.2s ease, box-shadow 0.2s ease; align-items: center; justify-content: center; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); - flex-shrink: 0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + z-index: 100; /* Float above content */ +} + +/* Remove focus outline (prevents black state) */ +.rpg-refresh-icon-btn:focus { + outline: none; } .rpg-refresh-icon-btn:hover { transform: scale(1.1); box-shadow: 0 4px 12px var(--rpg-highlight); - background: var(--rpg-accent); } .rpg-refresh-icon-btn:active { transform: scale(0.95); } +/* Spinning animation when refreshing */ +.rpg-refresh-icon-btn.spinning i { + animation: rpg-spin 0.8s linear infinite; +} + .rpg-refresh-icon-btn i { pointer-events: none; } +@keyframes rpg-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + /* ============================================ SETTINGS BUTTON ============================================ */ diff --git a/template.html b/template.html index 8d24685..1e3d842 100644 --- a/template.html +++ b/template.html @@ -54,6 +54,11 @@
+ + +