Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive mobile font-size overrides

Browse Source 
- Added clamp() to all vw-based font sizes for mobile compatibility
- Fixed collapse toggle button text size on mobile
- Fixed top position panel titles and stats text sizes
- Fixed panel header, loading indicator, and dice display sizes
- Applied overrides for both @media (max-width: 768px) and (max-width: 1000px)
- Ensures all text is readable on mobile devices without being too small
- Font sizes now scale responsively with minimum readable sizes
This commit is contained in:
Spicy_Marinara
2025-11-02 11:07:46 +01:00
parent 718696e611
commit 883212b5e9
1 changed files with 128 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+128
View File
@@ -6373,5 +6373,133 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-main-quest-actions button {
width: 100%;
}
/* ========================================
MOBILE FONT SIZE OVERRIDES
Fix all vw-based font sizes for mobile readability
======================================== */
/* Collapse toggle button */
.rpg-collapse-toggle {
font-size: clamp(16px, 3vw, 20px) !important;
}
/* Top position panel titles */
.rpg-panel.rpg-position-top .rpg-stats-title {
font-size: clamp(12px, 2.6vw, 16px) !important;
}
.rpg-panel.rpg-position-top .rpg-mood {
font-size: clamp(10px, 2vw, 13px) !important;
}
.rpg-panel.rpg-position-top .rpg-classic-stats-title {
font-size: clamp(10px, 2vw, 13px) !important;
}
.rpg-panel.rpg-position-top .rpg-classic-stat-label {
font-size: clamp(8px, 1.7vw, 11px) !important;
}
.rpg-panel.rpg-position-top .rpg-classic-stat-value {
font-size: clamp(12px, 2.6vw, 16px) !important;
}
.rpg-panel.rpg-position-top .rpg-classic-stat-btn {
font-size: clamp(10px, 2.2vw, 14px) !important;
}
.rpg-panel.rpg-position-top .rpg-info-content,
.rpg-panel.rpg-position-top .rpg-thoughts-content {
font-size: clamp(10px, 2.2vw, 14px) !important;
}
/* Panel header */
.rpg-panel-header h3 {
font-size: clamp(14px, 3.4vw, 18px) !important;
}
/* Loading indicator */
.rpg-loading {
font-size: clamp(12px, 2.6vw, 16px) !important;
}
/* Dice display */
.rpg-dice-display {
font-size: clamp(10px, 2vw, 13px) !important;
}
.rpg-dice-display i {
font-size: clamp(12px, 2.6vw, 16px) !important;
}
.rpg-clear-dice-btn {
font-size: clamp(14px, 3vw, 18px) !important;
}
}
/* ========================================
MOBILE FONT SIZE OVERRIDES (ALL SCREENS)
Apply to screens up to 1000px
======================================== */
@media (max-width: 1000px) {
/* Collapse toggle button */
.rpg-collapse-toggle {
font-size: clamp(16px, 3vw, 20px) !important;
}
/* Top position panel titles */
.rpg-panel.rpg-position-top .rpg-stats-title {
font-size: clamp(12px, 2.6vw, 16px) !important;
}
.rpg-panel.rpg-position-top .rpg-mood {
font-size: clamp(10px, 2vw, 13px) !important;
}
.rpg-panel.rpg-position-top .rpg-classic-stats-title {
font-size: clamp(10px, 2vw, 13px) !important;
}
.rpg-panel.rpg-position-top .rpg-classic-stat-label {
font-size: clamp(8px, 1.7vw, 11px) !important;
}
.rpg-panel.rpg-position-top .rpg-classic-stat-value {
font-size: clamp(12px, 2.6vw, 16px) !important;
}
.rpg-panel.rpg-position-top .rpg-classic-stat-btn {
font-size: clamp(10px, 2.2vw, 14px) !important;
}
.rpg-panel.rpg-position-top .rpg-info-content,
.rpg-panel.rpg-position-top .rpg-thoughts-content {
font-size: clamp(10px, 2.2vw, 14px) !important;
}
/* Panel header */
.rpg-panel-header h3 {
font-size: clamp(14px, 3.4vw, 18px) !important;
}
/* Loading indicator */
.rpg-loading {
font-size: clamp(12px, 2.6vw, 16px) !important;
}
/* Dice display */
.rpg-dice-display {
font-size: clamp(10px, 2vw, 13px) !important;
}
.rpg-dice-display i {
font-size: clamp(12px, 2.6vw, 16px) !important;
}
.rpg-clear-dice-btn {
font-size: clamp(14px, 3vw, 18px) !important;
}
}