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 @@
+
+
+