fix(mobile): improve Settings UI and button readability
Convert Settings UI font sizes from viewport units to responsive clamp() values with pixel minimums. Desktop vw values (1.1-1.85vw) were rendering as 4-7px on 390px mobile screens, making settings controls unreadable. UI Buttons (2 overrides): - Settings button: clamp(14px, 3.6vw, 18px) - was 1.1vw (4.29px) - Mobile toggle dice icon: clamp(20px, 5.1vw, 26px) - was 1.85vw (7.22px) Settings Popup (6 overrides): - Popup title (h3): clamp(16px, 4.1vw, 20px) - was ~5.85px - Group headers (h4): clamp(14px, 3.6vw, 18px) - was 1.5vw (5.85px) - Setting labels: clamp(12px, 3.1vw, 16px) - was 1.2vw (4.68px) - Dropdowns/inputs: clamp(13px, 3.3vw, 17px) - was 1.3vw (5.07px) - Helper text (small): clamp(10px, 2.6vw, 13px) - was ~3.9px - Clear cache button: clamp(13px, 3.3vw, 17px) - was 1.2vw (4.68px) Mobile toggle button size remains unchanged (44px), only icon scaled up.
This commit is contained in:
@@ -3824,6 +3824,55 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
width: clamp(28px, 7.2vw, 36px) !important;
|
||||
height: clamp(28px, 7.2vw, 36px) !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE UI BUTTONS
|
||||
======================================== */
|
||||
|
||||
/* Readable settings button on mobile */
|
||||
.rpg-btn-settings {
|
||||
font-size: clamp(14px, 3.6vw, 18px) !important;
|
||||
}
|
||||
|
||||
/* Larger mobile toggle dice icon (button size is fine) */
|
||||
.rpg-mobile-toggle {
|
||||
font-size: clamp(20px, 5.1vw, 26px) !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE SETTINGS POPUP
|
||||
======================================== */
|
||||
|
||||
/* Readable settings popup title */
|
||||
.rpg-settings-popup-header h3 {
|
||||
font-size: clamp(16px, 4.1vw, 20px) !important;
|
||||
}
|
||||
|
||||
/* Readable settings group headers */
|
||||
.rpg-settings-group h4 {
|
||||
font-size: clamp(14px, 3.6vw, 18px) !important;
|
||||
}
|
||||
|
||||
/* Readable setting labels */
|
||||
.rpg-setting-row label {
|
||||
font-size: clamp(12px, 3.1vw, 16px) !important;
|
||||
}
|
||||
|
||||
/* Readable dropdowns and inputs */
|
||||
.rpg-select,
|
||||
.rpg-input {
|
||||
font-size: clamp(13px, 3.3vw, 17px) !important;
|
||||
}
|
||||
|
||||
/* Readable helper text */
|
||||
.rpg-setting-row small {
|
||||
font-size: clamp(10px, 2.6vw, 13px) !important;
|
||||
}
|
||||
|
||||
/* Readable clear cache button */
|
||||
.rpg-btn-clear-cache {
|
||||
font-size: clamp(13px, 3.3vw, 17px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small screens - adjust FAB position */
|
||||
|
||||
Reference in New Issue
Block a user