refactor: complete professional redesign of dice roller modal for mobile
BREAKING CHANGES: Dice roller now uses modern ES6 class architecture Features: - Mobile-first CSS with fluid responsive units (clamp, min, max) - ES6 DiceModal class with proper state management (IDLE, ROLLING, SHOWING_RESULT) - Semantic HTML with ARIA attributes for accessibility - CSS state classes (.is-open, .is-closing, .is-animating) - Touch-friendly 44px minimum tap targets - Desktop enhancement with @media (min-width: 1001px) Fixes: - Fixed mobile viewport overflow with min-height: 0 on flex children - Reduced max-height to 70vh for guaranteed mobile fit - Removed all jQuery .show()/.hide() inline style injections - Removed !important CSS hacks from mobile media query - Fixed transparent modal background (80% opaque neutral gray) - Darkened backdrop overlay (85% opaque black) Technical: - Backdrop uses ::before pseudo-element (no wrapper div needed) - Flattened HTML structure with proper semantic elements - Backwards compatible wrapper functions preserved - Grid layout for inputs (stacked mobile, side-by-side desktop) - Proper CSS specificity hierarchy (no !important needed) - Removed .rpg-dice-popup-overlay div dependency Accessibility: - role="dialog" with aria-modal="true" - aria-labelledby for dialog title - aria-live regions for dynamic content - aria-busy for loading states - Proper focus management on open/close
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
@@ -2115,47 +2115,299 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
.rpg-stat-row:nth-child(5) { animation-delay: 0.3s; }
|
||||
|
||||
/* ============================================
|
||||
DICE ROLL POPUP
|
||||
DICE ROLL MODAL - MOBILE FIRST
|
||||
============================================ */
|
||||
|
||||
/* CSS Custom Properties for Responsive Scaling */
|
||||
.rpg-dice-popup {
|
||||
/* Fluid spacing that scales with viewport */
|
||||
--modal-padding: clamp(0.5rem, 2vw, 0.75rem);
|
||||
--modal-gap: clamp(0.375rem, 1.5vw, 0.5rem);
|
||||
--modal-border-width: 2px;
|
||||
|
||||
/* Fluid typography */
|
||||
--modal-font-base: clamp(0.8rem, 3vw, 0.9rem);
|
||||
--modal-font-small: clamp(0.7rem, 2.5vw, 0.8rem);
|
||||
--modal-font-large: clamp(1.25rem, 6vw, 1.75rem);
|
||||
--modal-font-huge: clamp(1.5rem, 8vw, 2.5rem);
|
||||
|
||||
/* Touch-friendly sizing */
|
||||
--modal-button-height: 44px;
|
||||
--modal-input-height: 44px;
|
||||
|
||||
/* Content constraints - MUCH more conservative */
|
||||
--modal-max-width: min(90vw, 360px);
|
||||
--modal-max-height: 70vh;
|
||||
}
|
||||
|
||||
/* Modal Container - Hidden by default */
|
||||
.rpg-dice-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* Open state - managed by JavaScript classList */
|
||||
.rpg-dice-popup.is-open {
|
||||
display: flex;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* Closing state - allows exit animation */
|
||||
.rpg-dice-popup.is-closing {
|
||||
display: flex;
|
||||
animation: fadeOut 0.2s ease-in;
|
||||
}
|
||||
|
||||
/* Backdrop overlay - using ::before pseudo-element */
|
||||
.rpg-dice-popup::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
/* Modal Content Box */
|
||||
.rpg-dice-popup-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: var(--modal-max-width);
|
||||
height: auto;
|
||||
max-height: var(--modal-max-height);
|
||||
min-height: 0;
|
||||
background: rgba(30, 30, 30, 0.8);
|
||||
border: var(--modal-border-width) solid var(--rpg-border);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
|
||||
color: var(--rpg-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.rpg-dice-popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--modal-padding);
|
||||
background: var(--rpg-accent);
|
||||
border-bottom: var(--modal-border-width) solid var(--rpg-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rpg-dice-popup-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--modal-font-base);
|
||||
color: var(--rpg-highlight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--modal-gap);
|
||||
}
|
||||
|
||||
/* Close button - touch-friendly */
|
||||
#rpg-dice-popup-close {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rpg-dice-popup-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(5px);
|
||||
/* Scrollable Body */
|
||||
.rpg-dice-popup-body {
|
||||
padding: var(--modal-padding);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.rpg-dice-popup-content {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 31.25rem;
|
||||
background: var(--rpg-bg);
|
||||
border: 3px solid var(--rpg-border);
|
||||
border-radius: 0.938em;
|
||||
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9);
|
||||
overflow: hidden;
|
||||
animation: popupSlideIn 0.3s ease-out;
|
||||
/* Input Container */
|
||||
.rpg-dice-selector-container {
|
||||
padding: var(--modal-padding);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0.5rem;
|
||||
border: var(--modal-border-width) solid var(--rpg-border);
|
||||
margin-bottom: var(--modal-gap);
|
||||
}
|
||||
|
||||
/* Input Grid - Stacked on mobile */
|
||||
.rpg-dice-selector {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--modal-gap);
|
||||
margin-bottom: var(--modal-gap);
|
||||
}
|
||||
|
||||
.rpg-dice-input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.rpg-dice-input-group label {
|
||||
font-size: var(--modal-font-small);
|
||||
font-weight: 600;
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
@keyframes popupSlideIn {
|
||||
.rpg-dice-input-group input,
|
||||
.rpg-dice-input-group select {
|
||||
width: 100%;
|
||||
min-height: var(--modal-input-height);
|
||||
padding: 0.5rem;
|
||||
border: var(--modal-border-width) solid var(--rpg-border);
|
||||
border-radius: 0.375rem;
|
||||
background: var(--rpg-accent);
|
||||
color: var(--rpg-text);
|
||||
font-size: var(--modal-font-base);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.rpg-dice-input-group input:focus,
|
||||
.rpg-dice-input-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--rpg-highlight);
|
||||
box-shadow: 0 0 0 3px rgba(var(--rpg-highlight-rgb, 255, 0, 100), 0.2);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Roll Button - touch-friendly */
|
||||
#rpg-dice-roll-btn {
|
||||
width: 100%;
|
||||
min-height: var(--modal-button-height);
|
||||
padding: 0.75rem 1rem;
|
||||
background: linear-gradient(135deg, var(--rpg-highlight), var(--rpg-accent));
|
||||
border: var(--modal-border-width) solid var(--rpg-highlight);
|
||||
border-radius: 0.5rem;
|
||||
color: var(--rpg-text);
|
||||
font-size: var(--modal-font-base);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#rpg-dice-roll-btn:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Animation Section */
|
||||
.rpg-dice-animation {
|
||||
text-align: center;
|
||||
padding: var(--modal-padding);
|
||||
}
|
||||
|
||||
.rpg-dice-rolling i {
|
||||
font-size: var(--modal-font-large);
|
||||
color: var(--rpg-highlight);
|
||||
animation: diceRoll 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.rpg-dice-rolling-text {
|
||||
margin-top: var(--modal-gap);
|
||||
font-size: var(--modal-font-base);
|
||||
font-weight: 600;
|
||||
color: var(--rpg-highlight);
|
||||
animation: pulseGlow 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Result Section */
|
||||
.rpg-dice-result {
|
||||
text-align: center;
|
||||
padding: var(--modal-padding);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0.5rem;
|
||||
border: var(--modal-border-width) solid var(--rpg-border);
|
||||
}
|
||||
|
||||
.rpg-dice-result-label {
|
||||
font-size: var(--modal-font-small);
|
||||
color: var(--rpg-text);
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.rpg-dice-result-value {
|
||||
font-size: var(--modal-font-huge);
|
||||
font-weight: 700;
|
||||
color: var(--rpg-highlight);
|
||||
text-shadow: 0 0 20px var(--rpg-highlight);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rpg-dice-result-value.is-animating {
|
||||
animation: resultPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.rpg-dice-result-details {
|
||||
margin-top: var(--modal-gap);
|
||||
font-size: var(--modal-font-small);
|
||||
color: var(--rpg-text);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Save Button */
|
||||
.rpg-dice-save-btn {
|
||||
margin-top: var(--modal-gap);
|
||||
width: 100%;
|
||||
min-height: var(--modal-button-height);
|
||||
padding: 0.75rem 1rem;
|
||||
background: linear-gradient(135deg, #28a745, #20c997);
|
||||
border: var(--modal-border-width) solid #28a745;
|
||||
border-radius: 0.5rem;
|
||||
color: white;
|
||||
font-size: var(--modal-font-base);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.rpg-dice-save-btn:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-3.125rem) scale(0.9);
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -2163,216 +2415,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
}
|
||||
}
|
||||
|
||||
.rpg-dice-popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.25em;
|
||||
background: var(--rpg-accent);
|
||||
border-bottom: 2px solid var(--rpg-border);
|
||||
}
|
||||
|
||||
.rpg-dice-popup-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: var(--rpg-highlight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625em;
|
||||
}
|
||||
|
||||
.rpg-dice-popup-body {
|
||||
padding: 1.562em;
|
||||
}
|
||||
|
||||
.rpg-dice-selector-container {
|
||||
padding: 1.25em;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0.75em;
|
||||
border: 2px solid var(--rpg-border);
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.rpg-dice-selector {
|
||||
display: flex;
|
||||
gap: 0.938em;
|
||||
margin-bottom: 0.938em;
|
||||
}
|
||||
|
||||
.rpg-dice-input-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.rpg-dice-input-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 0.812rem;
|
||||
font-weight: bold;
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
.rpg-dice-input-group input,
|
||||
.rpg-dice-input-group select {
|
||||
width: 100%;
|
||||
padding: 0.625em;
|
||||
border: 2px solid var(--rpg-border);
|
||||
border-radius: 0.5em;
|
||||
background: var(--rpg-accent);
|
||||
color: var(--rpg-text);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.rpg-dice-input-group input:focus,
|
||||
.rpg-dice-input-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--rpg-highlight);
|
||||
box-shadow: 0 0 10px var(--rpg-highlight);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#rpg-dice-roll-btn {
|
||||
width: 100%;
|
||||
padding: 0.75em 1.25em;
|
||||
background: linear-gradient(135deg, var(--rpg-highlight), var(--rpg-accent));
|
||||
border: 2px solid var(--rpg-highlight);
|
||||
border-radius: 0.625em;
|
||||
color: var(--rpg-text);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.625em;
|
||||
}
|
||||
|
||||
#rpg-dice-roll-btn:hover {
|
||||
transform: translateY(-0.125rem);
|
||||
box-shadow: 0 6px 20px var(--rpg-highlight);
|
||||
background: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
#rpg-dice-roll-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.rpg-dice-animation {
|
||||
text-align: center;
|
||||
padding: 2.5em 1.25em;
|
||||
}
|
||||
|
||||
.rpg-dice-rolling i {
|
||||
font-size: 5rem;
|
||||
color: var(--rpg-highlight);
|
||||
animation: diceRoll 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes diceRoll {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(1);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.rpg-dice-rolling-text {
|
||||
margin-top: 1.25em;
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
color: var(--rpg-highlight);
|
||||
animation: pulseGlow 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.rpg-dice-result {
|
||||
text-align: center;
|
||||
padding: 1.875em 1.25em;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0.75em;
|
||||
border: 2px solid var(--rpg-border);
|
||||
}
|
||||
|
||||
.rpg-dice-result-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--rpg-text);
|
||||
margin-bottom: 0.625em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.062em;
|
||||
}
|
||||
|
||||
.rpg-dice-result-value {
|
||||
font-size: 3.75rem;
|
||||
font-weight: bold;
|
||||
color: var(--rpg-highlight);
|
||||
text-shadow: 0 0 20px var(--rpg-highlight);
|
||||
animation: resultPop 0.5s ease-out;
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(90deg) scale(1.1); }
|
||||
50% { transform: rotate(180deg); }
|
||||
75% { transform: rotate(270deg) scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes resultPop {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
0% { transform: scale(0); opacity: 0; }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.rpg-dice-result-details {
|
||||
margin-top: 0.938em;
|
||||
font-size: 0.875rem;
|
||||
color: var(--rpg-text);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.rpg-dice-save-btn {
|
||||
margin-top: 1.25em;
|
||||
width: 100%;
|
||||
max-width: 12.5rem;
|
||||
padding: 0.625em 1.25em;
|
||||
background: linear-gradient(135deg, #28a745, #20c997);
|
||||
border: 2px solid #28a745;
|
||||
border-radius: 0.625em;
|
||||
color: white;
|
||||
font-size: 0.938rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.rpg-dice-save-btn:hover {
|
||||
transform: translateY(-0.125rem);
|
||||
box-shadow: 0 6px 20px rgba(40, 167, 69, 0.6);
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
.rpg-dice-save-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 10px rgba(40, 167, 69, 0.4);
|
||||
}
|
||||
|
||||
/* Theme-specific popup styles */
|
||||
/* Theme Support - CSS Custom Properties */
|
||||
.rpg-dice-popup[data-theme="sci-fi"] .rpg-dice-popup-content {
|
||||
--rpg-bg: #0a0e27;
|
||||
--rpg-accent: #1a1f3a;
|
||||
@@ -2397,6 +2453,35 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
--rpg-border: #ff00ff;
|
||||
}
|
||||
|
||||
/* Desktop Enhancement (1001px+) */
|
||||
@media (min-width: 1001px) {
|
||||
.rpg-dice-popup {
|
||||
--modal-padding: 1.5rem;
|
||||
--modal-gap: 1rem;
|
||||
--modal-font-base: 1rem;
|
||||
--modal-font-small: 0.875rem;
|
||||
--modal-font-large: 3rem;
|
||||
--modal-font-huge: 3.75rem;
|
||||
--modal-max-width: 500px;
|
||||
}
|
||||
|
||||
/* Side-by-side inputs on desktop */
|
||||
.rpg-dice-selector {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
/* Hover effects on desktop */
|
||||
#rpg-dice-roll-btn:hover,
|
||||
.rpg-dice-save-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px currentColor;
|
||||
}
|
||||
|
||||
.rpg-dice-save-btn {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
HTML PROMPT TOGGLE
|
||||
============================================ */
|
||||
|
||||
Reference in New Issue
Block a user