diff --git a/style.css b/style.css index 3fd87a4..46ebfe1 100644 --- a/style.css +++ b/style.css @@ -3509,6 +3509,39 @@ body:has(.rpg-panel.rpg-position-left) #sheld { justify-content: center; } + /* Info screen text readability - convert vw to readable pixel sizes */ + .rpg-calendar-top { + font-size: clamp(8px, 2.1vw, 10px) !important; + } + + .rpg-calendar-day { + font-size: clamp(11px, 2.9vw, 14px) !important; + } + + .rpg-calendar-year { + font-size: clamp(7px, 1.8vw, 10px) !important; + } + + .rpg-weather-forecast { + font-size: clamp(9px, 2.2vw, 11px) !important; + } + + .rpg-temp-value { + font-size: clamp(10px, 2.5vw, 13px) !important; + } + + .rpg-time-value { + font-size: clamp(10px, 2.5vw, 13px) !important; + } + + .rpg-location-text { + font-size: clamp(11px, 2.8vw, 14px) !important; + } + + .rpg-map-marker { + font-size: clamp(16px, 4.1vw, 20px) !important; + } + /* ======================================== MOBILE STATS TAB LAYOUT IMPROVEMENTS ======================================== */ @@ -3558,6 +3591,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-stats-grid { grid-column: 1 / 3; grid-row: 2; + min-height: 180px; /* Stretch vertically to fill more space */ + gap: clamp(8px, 2vw, 12px); /* Increase gap between stat rows */ + } + + /* Increase stat bar text sizes for mobile readability */ + .rpg-stat-label { + font-size: clamp(11px, 2.8vw, 14px) !important; + } + + .rpg-stat-value { + font-size: clamp(12px, 3.1vw, 16px) !important; } /* Make the avatar+inventory flex container grow to full width */ @@ -3756,6 +3800,30 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-character-traits { font-size: clamp(11px, 2.8vw, 14px) !important; } + + /* ======================================== + MOBILE DICE DISPLAY + ======================================== */ + + /* Make dice display larger and more visible on mobile */ + .rpg-dice-display { + font-size: clamp(12px, 3.1vw, 16px) !important; + padding: clamp(8px, 2vw, 12px) !important; + min-height: 44px; /* Touch-friendly height */ + gap: clamp(6px, 1.5vw, 10px) !important; + } + + /* Larger dice icon for mobile */ + .rpg-dice-display i { + font-size: clamp(18px, 4.6vw, 24px) !important; + } + + /* Larger clear button for mobile touch */ + .rpg-clear-dice-btn { + font-size: clamp(18px, 4.6vw, 24px) !important; + width: clamp(28px, 7.2vw, 36px) !important; + height: clamp(28px, 7.2vw, 36px) !important; + } } /* Extra small screens - adjust FAB position */