fix: reduce mood box vertical height on mobile
- Reduced gap from 6px to 3px for more compact display - Reduced vertical padding to 4px (from clamp(4px, 0.6vh, 6px)) - Tightened line-height from 1.3 to 1.2 - Reduced emoji size slightly (clamp(14px, 3.5vw, 18px)) - Frees up vertical space for attribute boxes and avatar on mobile
This commit is contained in:
@@ -3839,14 +3839,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
grid-row: 3;
|
grid-row: 3;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 6px;
|
gap: 3px !important; /* Reduced from 6px for more compact display */
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
padding: 4px 0.375em !important; /* Reduced vertical padding */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make mood text readable on mobile */
|
/* Make mood text readable on mobile */
|
||||||
.rpg-mood-conditions {
|
.rpg-mood-conditions {
|
||||||
font-size: clamp(11px, 2.8vw, 14px);
|
font-size: clamp(11px, 2.8vw, 14px);
|
||||||
line-height: 1.3;
|
line-height: 1.2 !important; /* Tighter line height */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smaller emoji on mobile */
|
||||||
|
.rpg-mood-emoji {
|
||||||
|
font-size: clamp(14px, 3.5vw, 18px) !important; /* Slightly smaller */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Attributes - right side, rows 4-6 aligned with mood */
|
/* Attributes - right side, rows 4-6 aligned with mood */
|
||||||
|
|||||||
Reference in New Issue
Block a user