fix(mobile): improve refresh button - float over all tabs, add animation, fix focus
**Changes:**
1. Move button to float over all tabs (not just Stats)
- Removed from userStats.js HTML
- Added to template.html as floating absolute element
- Now visible on Status, Info, and Inventory tabs
2. Fix sticky black focus state
- Added :focus { outline: none } to CSS
- Call blur() after click to clear focus immediately
3. Add refresh animation
- Button spins during updateRPGData() call
- Smooth 0.8s rotation with @keyframes
- Uses .spinning class added/removed in JS
4. Improve theming and positioning
- Positioned absolute top-right (10px, 10px)
- Increased to 44px for better touch target
- z-index: 100 to float above content
- Already uses theme colors (--rpg-highlight, --rpg-text)
Mobile UX now:
✅ Button visible on all tabs (floating)
✅ Spins smoothly when refreshing
✅ No sticky black state after tap
✅ Properly themed across all themes
This commit is contained in:
@@ -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
|
||||
============================================ */
|
||||
|
||||
Reference in New Issue
Block a user