fix(modal): resolve button font-size CSS cascade conflict

- Scope modal button selectors to prevent dashboard styles from overriding
- Use .rpg-modal and .rpg-confirm-modal prefixes for higher specificity
- Desktop modal buttons: 1rem (consistent, readable)
- Mobile modal buttons: 1.05rem (touch-friendly)
- Dashboard buttons unchanged: keep 1.4vw viewport-based sizing
- Fixes buttons being too large on desktop (~27px) and too small on mobile (~5px)
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-28 18:45:47 +11:00
parent ded1b62963
commit ddb2f8c222
+20 -10
View File
@@ -1565,12 +1565,15 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transform: scale(1.05);
}
/* Modal Buttons */
.rpg-btn-primary,
.rpg-btn-secondary {
/* Modal Buttons - Scoped to prevent dashboard styles from overriding */
.rpg-modal .rpg-btn-primary,
.rpg-modal .rpg-btn-secondary,
.rpg-confirm-modal .rpg-btn-primary,
.rpg-confirm-modal .rpg-btn-secondary {
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem; /* Explicit readable button text size */
font-weight: 600;
transition: all 0.2s;
display: flex;
@@ -1578,23 +1581,27 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
gap: 0.5rem;
}
.rpg-btn-primary {
.rpg-modal .rpg-btn-primary,
.rpg-confirm-modal .rpg-btn-primary {
background: var(--rpg-highlight);
border: none;
color: white;
}
.rpg-btn-primary:hover {
.rpg-modal .rpg-btn-primary:hover,
.rpg-confirm-modal .rpg-btn-primary:hover {
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.8);
}
.rpg-btn-secondary {
.rpg-modal .rpg-btn-secondary,
.rpg-confirm-modal .rpg-btn-secondary {
background: transparent;
border: 1px solid var(--rpg-border);
color: var(--rpg-text);
}
.rpg-btn-secondary:hover {
.rpg-modal .rpg-btn-secondary:hover,
.rpg-confirm-modal .rpg-btn-secondary:hover {
background: var(--rpg-accent);
}
@@ -1732,11 +1739,14 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
font-size: 0.95rem; /* Slightly smaller but still readable on mobile */
}
/* Make buttons touch-friendly */
.rpg-btn-primary,
.rpg-btn-secondary {
/* Make modal buttons touch-friendly on mobile */
.rpg-modal .rpg-btn-primary,
.rpg-modal .rpg-btn-secondary,
.rpg-confirm-modal .rpg-btn-primary,
.rpg-confirm-modal .rpg-btn-secondary {
min-height: 44px;
padding: 0.75rem 1rem;
font-size: 1.05rem; /* Touch-friendly size for mobile readability */
}
}