Lucas 'Paperboy' Rose-Winters
b5d35ac2b0
Add comprehensive debug logging system that's accessible on mobile devices
where browser console is impractical.
**New Features:**
- Debug mode toggle in extension settings (🔍 Debug Mode)
- Mobile-friendly debug panel with slide-up UI
- Red bug FAB button to toggle debug log viewer
- Copy logs to clipboard functionality
- Auto-scrolling log display with timestamps
- Stores last 100 log entries to prevent memory issues
**Parser Enhancements:**
- All parser logs now use debugLog() helper function
- Logs only appear in UI when debug mode is enabled
- Console.log still works for desktop debugging
- Full visibility into parsing pipeline:
- Raw AI response preview
- Code blocks found and matched
- Stats extraction (health, energy, mood, etc.)
- Inventory parsing (v1 and v2)
- Final values saved to settings
**UI Components:**
- src/systems/ui/debug.js: Debug panel creation and management
- style.css: Mobile-first debug panel styles (FAB + slide-up panel)
- Desktop view: Smaller panel in bottom-right corner
**Settings:**
- src/core/config.js: Added debugMode default (false)
- src/core/state.js: Added debug logs storage array
- settings.html: Added debug mode checkbox
- index.js: Wire up debug toggle and initialize UI
**Usage for Mobile Users:**
1. Enable "Debug Mode" in RPG Companion settings
2. Red bug button appears (bottom-left)
3. Tap bug button to view logs
4. Use "Copy" to share logs for troubleshooting
5. Logs show exactly what AI generated and how parser handled it
This addresses the issue where users on mobile can't access browser
console to diagnose parsing problems (vanishing attributes, placeholder
characters, etc.). Now they can view and share logs directly.
4953 lines
117 KiB
CSS
4953 lines
117 KiB
CSS
|
|
/* Ensure chat stays centered when panel is visible */
|
|
body:has(.rpg-panel.rpg-position-right) #sheld {
|
|
margin: auto !important;
|
|
}
|
|
|
|
body:has(.rpg-panel.rpg-position-left) #sheld {
|
|
margin: auto !important;
|
|
}
|
|
/* ============================================
|
|
RPG COMPANION - GAME-LIKE UI - RESPONSIVE
|
|
============================================ */
|
|
|
|
/* CSS Variables for Theming - Default uses SillyTavern's variables */
|
|
.rpg-panel,
|
|
#rpg-thought-panel,
|
|
#rpg-thought-icon {
|
|
--rpg-bg: var(--SmartThemeBlurTintColor, rgba(26, 26, 46, 0.9));
|
|
--rpg-accent: var(--black30a, rgba(22, 33, 62, 0.9));
|
|
--rpg-text: var(--SmartThemeBodyColor, #eaeaea);
|
|
--rpg-highlight: var(--SmartThemeQuoteColor, #e94560);
|
|
--rpg-border: var(--SmartThemeBorderColor, #0f3460);
|
|
--rpg-shadow: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Main Panel Container - Fills available margin space */
|
|
.rpg-panel {
|
|
position: fixed;
|
|
top: var(--topBarBlockSize);
|
|
bottom: 0;
|
|
background: var(--rpg-bg);
|
|
box-shadow: 0 0 20px var(--rpg-shadow);
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
box-sizing: border-box;
|
|
z-index: 1000;
|
|
color: var(--rpg-text);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: visible;
|
|
transition: width 0.3s ease, left 0.3s ease, right 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
/* Collapsed state - fixed width for collapse */
|
|
.rpg-panel.rpg-collapsed {
|
|
max-width: 2.5rem !important;
|
|
min-width: 2.5rem !important;
|
|
left: auto !important;
|
|
right: auto !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-collapsed.rpg-position-right {
|
|
right: 0 !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-collapsed.rpg-position-left {
|
|
left: 0 !important;
|
|
}
|
|
|
|
/* Fix positioning when collapsed - panel should stick to correct edge */
|
|
.rpg-panel.rpg-position-right.rpg-collapsed {
|
|
left: calc(100vw - 40px);
|
|
right: 0;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-left.rpg-collapsed {
|
|
right: calc(100vw - 40px);
|
|
left: 0;
|
|
}
|
|
|
|
.rpg-panel.rpg-collapsed .rpg-game-container {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Collapse/Expand Toggle Button */
|
|
.rpg-collapse-toggle {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 1.875rem;
|
|
height: 5rem;
|
|
background: var(--rpg-accent);
|
|
border: 2px solid var(--rpg-border);
|
|
color: var(--rpg-highlight);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10001;
|
|
transition: all 0.3s ease;
|
|
font-size: 1.5vw;
|
|
box-shadow: 0 0 10px var(--rpg-shadow);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.rpg-collapse-toggle:hover {
|
|
background: var(--rpg-highlight);
|
|
color: var(--rpg-bg);
|
|
box-shadow: 0 0 15px var(--rpg-highlight);
|
|
}
|
|
|
|
/* Position collapse button on the left side for right panel */
|
|
.rpg-panel.rpg-position-right .rpg-collapse-toggle {
|
|
left: -2rem;
|
|
border-radius: 0.5em 0 0 0.5em;
|
|
}
|
|
|
|
/* Position collapse button on the right side for left panel */
|
|
.rpg-panel.rpg-position-left .rpg-collapse-toggle {
|
|
right: -2rem;
|
|
border-radius: 0 0.5em 0.5em 0;
|
|
}
|
|
|
|
/* Hide collapse button for top position */
|
|
.rpg-panel.rpg-position-top .rpg-collapse-toggle {
|
|
display: none;
|
|
}
|
|
|
|
/* Right Position (Default) - Panel fills right margin space from chat edge to screen edge */
|
|
.rpg-panel.rpg-position-right {
|
|
right: 0;
|
|
width: calc(50vw - var(--sheldWidth) / 2);
|
|
border-left: 3px solid var(--rpg-border);
|
|
box-shadow: -5px 0 20px var(--rpg-shadow);
|
|
}
|
|
|
|
/* Left Position - Panel fills left margin space from screen edge to chat edge */
|
|
.rpg-panel.rpg-position-left {
|
|
left: 0;
|
|
width: calc(50vw - var(--sheldWidth) / 2);
|
|
border-right: 3px solid var(--rpg-border);
|
|
box-shadow: 5px 0 20px var(--rpg-shadow);
|
|
}
|
|
|
|
/* Top Position */
|
|
.rpg-panel.rpg-position-top {
|
|
left: 0;
|
|
right: 0;
|
|
bottom: auto;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
max-height: 18.75rem;
|
|
border-bottom: 3px solid var(--rpg-border);
|
|
box-shadow: 0 5px 20px var(--rpg-shadow);
|
|
}
|
|
|
|
/* Top Position Layout Adjustments */
|
|
.rpg-panel.rpg-position-top .rpg-content-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.938em;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-section {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-divider {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-stats-grid {
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-stat-row {
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-stat-label {
|
|
min-width: 5.625rem;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-stat-bar {
|
|
height: 1.125rem;
|
|
}
|
|
|
|
/* Mobile Responsiveness */
|
|
@media (max-width: 1024px) {
|
|
.rpg-panel {
|
|
width: 20rem;
|
|
max-width: 35vw;
|
|
min-width: 16.25rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.rpg-section-title {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.rpg-panel.rpg-position-right,
|
|
.rpg-panel.rpg-position-left {
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
width: 100%;
|
|
height: 50vh;
|
|
top: auto;
|
|
bottom: 0;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top {
|
|
max-height: 40vh;
|
|
}
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-stats-title {
|
|
font-size: 1.3vw;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-mood {
|
|
font-size: 1vw;
|
|
padding: 0.375em;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stats {
|
|
margin-top: 0.5em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stats-title {
|
|
font-size: 1vw;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stats-grid {
|
|
gap: 0.375em;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat {
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-label {
|
|
font-size: 0.85vw;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-value {
|
|
font-size: 1.3vw;
|
|
}
|
|
|
|
/* ============================================
|
|
ANIMATIONS
|
|
============================================ */
|
|
/* Only apply animations when enabled */
|
|
.rpg-panel.rpg-animations-enabled .rpg-stat-fill {
|
|
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.rpg-panel.rpg-animations-enabled .rpg-stat-bar {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rpg-panel.rpg-animations-enabled .rpg-info-content,
|
|
.rpg-panel.rpg-animations-enabled .rpg-thoughts-content {
|
|
transition: opacity 0.4s ease, transform 0.4s ease;
|
|
}
|
|
|
|
.rpg-panel.rpg-animations-enabled .rpg-info-line {
|
|
animation: slideInFromLeft 0.5s ease-out backwards;
|
|
}
|
|
|
|
.rpg-panel.rpg-animations-enabled .rpg-info-line:nth-child(1) { animation-delay: 0.1s; }
|
|
.rpg-panel.rpg-animations-enabled .rpg-info-line:nth-child(2) { animation-delay: 0.2s; }
|
|
.rpg-panel.rpg-animations-enabled .rpg-info-line:nth-child(3) { animation-delay: 0.3s; }
|
|
.rpg-panel.rpg-animations-enabled .rpg-info-line:nth-child(4) { animation-delay: 0.4s; }
|
|
.rpg-panel.rpg-animations-enabled .rpg-info-line:nth-child(5) { animation-delay: 0.5s; }
|
|
|
|
.rpg-panel.rpg-animations-enabled .rpg-thoughts-overlay {
|
|
animation: fadeInScale 0.6s ease-out;
|
|
}
|
|
|
|
.rpg-panel.rpg-animations-enabled .rpg-mood-value {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rpg-panel.rpg-animations-enabled .rpg-dice-animation {
|
|
animation: none; /* Control separately */
|
|
}
|
|
|
|
/* Disable dice animation when animations are off */
|
|
.rpg-panel:not(.rpg-animations-enabled) .rpg-dice-rolling i {
|
|
animation: none !important;
|
|
}
|
|
|
|
.rpg-panel:not(.rpg-animations-enabled) .rpg-dice-result-value {
|
|
animation: none !important;
|
|
}
|
|
|
|
@keyframes slideInFromLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-1.25rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInScale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Add updating class for smooth content changes */
|
|
.rpg-panel.rpg-animations-enabled .rpg-content-updating {
|
|
animation: contentPulse 0.5s ease;
|
|
}
|
|
|
|
@keyframes contentPulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-btn {
|
|
padding: 0.125em;
|
|
font-size: 1.1vw;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-info-content,
|
|
.rpg-panel.rpg-position-top .rpg-thoughts-content {
|
|
font-size: 1.1vw;
|
|
max-height: 9.375rem;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
.rpg-panel::-webkit-scrollbar,
|
|
#rpg-panel-content::-webkit-scrollbar,
|
|
.rpg-content-box::-webkit-scrollbar {
|
|
width: 0.5rem;
|
|
}
|
|
|
|
.rpg-panel::-webkit-scrollbar-track,
|
|
#rpg-panel-content::-webkit-scrollbar-track,
|
|
.rpg-content-box::-webkit-scrollbar-track {
|
|
background: var(--rpg-accent);
|
|
}
|
|
|
|
.rpg-panel::-webkit-scrollbar-thumb,
|
|
#rpg-panel-content::-webkit-scrollbar-thumb,
|
|
.rpg-content-box::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-highlight);
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
.rpg-panel::-webkit-scrollbar-thumb:hover,
|
|
#rpg-panel-content::-webkit-scrollbar-thumb:hover,
|
|
.rpg-content-box::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-border);
|
|
}
|
|
|
|
/* Game Container - Full height flex container */
|
|
.rpg-game-container {
|
|
padding: 0.75em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
/* Panel Content - Main scrollable area */
|
|
#rpg-panel-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375em;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Header - Fixed size, doesn't grow */
|
|
.rpg-panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 0;
|
|
margin-bottom: 0.5em;
|
|
padding: 0;
|
|
border-bottom: 2px solid var(--rpg-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-panel-header h3 {
|
|
margin: 0;
|
|
font-size: 1.7vw;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
color: var(--rpg-highlight);
|
|
text-shadow: 0 0 8px var(--rpg-highlight);
|
|
letter-spacing: 0.031em;
|
|
}
|
|
|
|
.rpg-btn-icon {
|
|
padding: 0.5em 0.75em;
|
|
background: var(--rpg-accent);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.5em;
|
|
cursor: pointer;
|
|
color: var(--rpg-text);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rpg-btn-icon:hover {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Loading Indicator - Fixed size */
|
|
.rpg-loading {
|
|
text-align: center;
|
|
padding: 0.938em;
|
|
background: var(--rpg-accent);
|
|
border-radius: 0.75em;
|
|
color: var(--rpg-highlight);
|
|
font-size: 1.3vw;
|
|
font-weight: bold;
|
|
animation: pulseGlow 1.5s ease-in-out infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@keyframes pulseGlow {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
box-shadow: 0 0 10px var(--rpg-highlight);
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
box-shadow: 0 0 20px var(--rpg-highlight);
|
|
}
|
|
}
|
|
|
|
/* Dice Roll Display - More compact */
|
|
.rpg-dice-display {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5em;
|
|
padding: 0.5em;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 0.5em;
|
|
border: 2px solid var(--rpg-border);
|
|
font-size: 1vw;
|
|
font-weight: bold;
|
|
color: var(--rpg-text);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-dice-display:hover {
|
|
background: var(--rpg-accent);
|
|
border-color: var(--rpg-highlight);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.rpg-dice-display i {
|
|
color: var(--rpg-highlight);
|
|
font-size: 1.3vw;
|
|
}
|
|
|
|
/* Clear dice roll button */
|
|
.rpg-clear-dice-btn {
|
|
background: rgba(255, 0, 0, 0.2);
|
|
border: 1px solid rgba(255, 0, 0, 0.4);
|
|
border-radius: 0.25em;
|
|
color: #ff6b6b;
|
|
font-size: 1.5vw;
|
|
font-weight: bold;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
padding: 0;
|
|
line-height: 1;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.rpg-clear-dice-btn:hover {
|
|
background: rgba(255, 0, 0, 0.4);
|
|
border-color: #ff6b6b;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.rpg-clear-dice-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Unified Content Box - Contains all sections, scales to fit viewport */
|
|
.rpg-content-box {
|
|
background: linear-gradient(135deg, var(--rpg-accent) 0%, var(--rpg-bg) 100%);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.625em;
|
|
padding: 0.5em;
|
|
box-shadow: 0 4px 18px var(--rpg-shadow), inset 0 0 12px rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375em;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Section Styling - Flexible to scale with available space */
|
|
.rpg-section {
|
|
margin: 0;
|
|
padding: 0;
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.rpg-section:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* Divider - More compact */
|
|
.rpg-divider {
|
|
width: 100%;
|
|
height: 0.062rem;
|
|
background: linear-gradient(to right, transparent, var(--rpg-highlight), transparent);
|
|
margin: 0.5em 0;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-divider::after {
|
|
display: none; /* Remove diamond decoration for more space */
|
|
}
|
|
|
|
/* ============================================
|
|
USER STATS SECTION
|
|
============================================ */
|
|
.rpg-stats-section {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Hide the stats header - we'll integrate portrait/inventory into stats content */
|
|
.rpg-stats-header {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-stats-header-left {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-user-portrait {
|
|
width: clamp(24px, 4vh, 32px);
|
|
height: clamp(24px, 4vh, 32px);
|
|
border-radius: 50%;
|
|
border: 2px solid var(--rpg-highlight);
|
|
box-shadow: 0 0 8px var(--rpg-highlight);
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-user-portrait:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.rpg-stats-title {
|
|
display: none;
|
|
}
|
|
|
|
/* Inventory Box - Styled like a treasure chest */
|
|
.rpg-inventory-box {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
background: linear-gradient(135deg, var(--rpg-accent) 0%, var(--rpg-bg) 100%);
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-radius: clamp(4px, 0.8vh, 6px);
|
|
padding: clamp(3px, 0.6vh, 5px);
|
|
max-height: clamp(35px, 5vh, 45px);
|
|
min-height: clamp(28px, 4vh, 35px);
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(255, 255, 255, 0.1),
|
|
inset 0 -2px 4px rgba(0, 0, 0, 0.3),
|
|
0 2px 8px rgba(0, 0, 0, 0.3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Add decorative chest details with pseudo-elements */
|
|
.rpg-inventory-box::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60%;
|
|
height: 0.125rem;
|
|
background: var(--rpg-highlight);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.rpg-inventory-box::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80%;
|
|
height: 0.062rem;
|
|
background: var(--rpg-highlight);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.rpg-inventory-items {
|
|
font-size: clamp(0.7vw, 0.5vw, 0.6vw);
|
|
color: var(--rpg-text);
|
|
line-height: 1.3;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
padding: clamp(1px, 0.3vh, 3px);
|
|
text-align: left;
|
|
}
|
|
|
|
.rpg-inventory-items::-webkit-scrollbar {
|
|
width: 0.188rem;
|
|
}
|
|
|
|
.rpg-inventory-items::-webkit-scrollbar-track {
|
|
background: var(--rpg-bg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-inventory-items::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-highlight);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-inventory-items::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-text);
|
|
}
|
|
|
|
/* Stats Content - Two-column layout */
|
|
.rpg-stats-content {
|
|
display: flex;
|
|
gap: clamp(4px, 0.8vh, 8px);
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Stats Left - Portrait, Bars and mood */
|
|
.rpg-stats-left {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(3px, 0.6vh, 6px);
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.rpg-stats-left::-webkit-scrollbar {
|
|
width: 0.188rem;
|
|
}
|
|
|
|
.rpg-stats-left::-webkit-scrollbar-track {
|
|
background: var(--rpg-bg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-stats-left::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-highlight);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-stats-left::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-text);
|
|
}
|
|
|
|
/* User info row (portrait, name, separator, level) */
|
|
.rpg-user-info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375em;
|
|
font-size: clamp(0.4vw, 0.5vw, 0.6vw);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* User portrait */
|
|
.rpg-user-portrait {
|
|
width: clamp(12px, 1.8vw, 16px);
|
|
height: clamp(12px, 1.8vw, 16px);
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* User name and level - inline with portrait */
|
|
.rpg-user-name {
|
|
font-weight: 600;
|
|
font-size: 1em;
|
|
color: var(--rpg-text-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rpg-level-label {
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
color: var(--rpg-text-color);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.rpg-level-value {
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
color: var(--rpg-highlight-color);
|
|
padding: 0 0.375em;
|
|
background: var(--rpg-accent-color);
|
|
border-radius: clamp(2px, 0.3vh, 3px);
|
|
border: 1px solid var(--rpg-highlight-color);
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
cursor: text;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-level-value:hover {
|
|
background: var(--rpg-highlight-color);
|
|
color: var(--rpg-bg-color);
|
|
}
|
|
|
|
.rpg-level-value:focus {
|
|
outline: 2px solid var(--rpg-highlight-color);
|
|
outline-offset: 1px;
|
|
background: var(--rpg-bg-color);
|
|
}
|
|
|
|
/* Portrait and Inventory row at top of stats-left */
|
|
.rpg-stats-left > .rpg-user-portrait,
|
|
.rpg-stats-left > .rpg-inventory-box {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-stats-left > .rpg-user-portrait {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.rpg-stats-left > .rpg-inventory-box {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Stats Right - Attributes */
|
|
.rpg-stats-right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.rpg-stats-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(3px, 0.5vh, 6px);
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.rpg-stats-grid::-webkit-scrollbar {
|
|
width: 0.188rem;
|
|
}
|
|
|
|
.rpg-stats-grid::-webkit-scrollbar-track {
|
|
background: var(--rpg-bg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-stats-grid::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-highlight);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-stats-grid::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-classic-stats-grid::-webkit-scrollbar {
|
|
width: 0.188rem;
|
|
}
|
|
|
|
.rpg-classic-stats-grid::-webkit-scrollbar-track {
|
|
background: var(--rpg-bg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-classic-stats-grid::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-highlight);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-classic-stats-grid::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-stat-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
flex: 1 1 0;
|
|
min-height: clamp(12px, 1.8vh, 16px);
|
|
}
|
|
|
|
.rpg-stat-label {
|
|
min-width: 4.062rem;
|
|
font-size: clamp(0.5vw, 0.6vw, 0.7vw);
|
|
font-weight: 600;
|
|
text-align: left;
|
|
color: var(--rpg-text);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.019em;
|
|
}
|
|
|
|
.rpg-stat-bar {
|
|
flex: 1;
|
|
height: clamp(9px, 1.3vh, 11px);
|
|
min-height: 9px;
|
|
position: relative;
|
|
border-radius: 0.375em;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.rpg-stat-fill {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
/* Transition moved to .rpg-animations-enabled */
|
|
}
|
|
|
|
.rpg-stat-value {
|
|
color: #fff;
|
|
font-size: clamp(0.5vw, 0.6vw, 0.7vw);
|
|
font-weight: bold;
|
|
min-width: 1.875rem;
|
|
text-align: right;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
/* Compact layout for high zoom / small viewports */
|
|
@media (max-height: 750px), (max-width: 500px) {
|
|
.rpg-stat-row {
|
|
position: relative;
|
|
min-height: clamp(16px, 2.5vh, 20px);
|
|
}
|
|
|
|
.rpg-stat-label {
|
|
position: absolute;
|
|
left: 0.5em;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 2;
|
|
min-width: auto;
|
|
font-size: clamp(0.6vw, 0.7vw, 0.8vw);
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.rpg-stat-bar {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: clamp(16px, 2.5vh, 20px);
|
|
}
|
|
|
|
.rpg-stat-value {
|
|
position: absolute;
|
|
right: 0.5em;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 2;
|
|
min-width: auto;
|
|
font-size: clamp(0.6vw, 0.7vw, 0.8vw);
|
|
}
|
|
}
|
|
|
|
.rpg-mood {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375em;
|
|
font-size: clamp(0.4vw, 0.5vw, 0.6vw);
|
|
padding: clamp(4px, 0.6vh, 6px) 0.375em;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 0.25em;
|
|
border: 1px solid var(--rpg-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-mood-emoji {
|
|
font-size: clamp(12px, 1.8vw, 16px);
|
|
flex-shrink: 0;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
|
}
|
|
|
|
.rpg-mood-conditions {
|
|
flex: 1;
|
|
min-width: 0;
|
|
line-height: 1.2;
|
|
color: var(--rpg-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Classic RPG Stats - Will match height of stats box automatically */
|
|
.rpg-classic-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rpg-classic-stats-title {
|
|
text-align: center;
|
|
font-size: 0.85vw;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.037em;
|
|
color: var(--rpg-highlight);
|
|
margin-bottom: 0.25em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-classic-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: clamp(2px, 0.4vh, 4px);
|
|
flex: 1;
|
|
grid-auto-rows: 1fr;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.rpg-classic-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: clamp(1px, 0.15vh, 2px);
|
|
padding: clamp(3px, 0.5vh, 5px);
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 0.25em;
|
|
border: 1px solid var(--rpg-border);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rpg-classic-stat-label {
|
|
font-size: clamp(0.4vw, 0.5vw, 0.6vw);
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.006em;
|
|
color: var(--rpg-text);
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-classic-stat-value {
|
|
font-size: clamp(0.5vw, 0.6vw, 0.7vw);
|
|
font-weight: bold;
|
|
color: var(--rpg-highlight);
|
|
text-align: center;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-classic-stat-buttons {
|
|
display: flex;
|
|
gap: clamp(3px, 0.4vh, 5px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.rpg-classic-stat-btn {
|
|
width: clamp(18px, 2.2vh, 24px);
|
|
height: clamp(16px, 2vh, 20px);
|
|
padding: 0;
|
|
background: var(--rpg-accent);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 2px;
|
|
color: var(--rpg-text);
|
|
font-size: clamp(9px, 1.1vw, 12px);
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
line-height: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.rpg-classic-stat-btn:hover {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.rpg-classic-stat-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* ============================================
|
|
INFO BOX SECTION
|
|
============================================ */
|
|
|
|
.rpg-info-header {
|
|
font-size: 1.3vw;
|
|
font-weight: bold;
|
|
margin-bottom: 0.625em;
|
|
color: var(--rpg-highlight);
|
|
text-shadow: 0 0 8px var(--rpg-highlight);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-info-content {
|
|
font-size: 1.1vw;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ============================================
|
|
INFO BOX - VISUAL DASHBOARD
|
|
============================================ */
|
|
.rpg-info-section {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.75em;
|
|
padding: 0.375em;
|
|
margin-bottom: 0;
|
|
flex: 0 0 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25em;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.rpg-dashboard {
|
|
display: flex;
|
|
gap: 0.25em;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Row 1: 4 equal-width widgets - more square aspect ratio */
|
|
.rpg-dashboard-row-1 {
|
|
flex: 0 0 auto;
|
|
min-height: 0;
|
|
height: clamp(60px, 10vh, 80px);
|
|
}
|
|
|
|
.rpg-dashboard-row-1 .rpg-dashboard-widget {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
height: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
/* Row 2: Full-width location */
|
|
.rpg-dashboard-row-2 {
|
|
flex: 0 0 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.rpg-dashboard-row-2 .rpg-dashboard-widget {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.rpg-dashboard-widget {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
padding: 0.25em;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rpg-dashboard-widget:hover {
|
|
transform: translateY(-0.125rem);
|
|
box-shadow: 0 4px 12px var(--rpg-shadow);
|
|
}
|
|
|
|
/* Location widget - flexible height */
|
|
.rpg-location-widget {
|
|
height: 100%;
|
|
}
|
|
|
|
/* Calendar Widget */
|
|
.rpg-calendar-widget {
|
|
padding: 0.188em;
|
|
}
|
|
|
|
.rpg-calendar-top {
|
|
background: var(--rpg-highlight);
|
|
color: var(--rpg-bg);
|
|
font-size: clamp(0.5vw, 0.55vw, 0.6vw);
|
|
font-weight: bold;
|
|
padding: 0.125em 0.375em;
|
|
border-radius: 3px 3px 0 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.rpg-calendar-day {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--rpg-text);
|
|
font-size: clamp(0.8vw, 1vw, 1.2vw);
|
|
font-weight: bold;
|
|
padding: 0.25em;
|
|
width: 100%;
|
|
text-align: center;
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-top: none;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.rpg-calendar-year {
|
|
font-size: clamp(0.5vw, 0.55vw, 0.6vw);
|
|
color: var(--rpg-text);
|
|
opacity: 0.7;
|
|
margin-top: 0.062em;
|
|
}
|
|
|
|
/* Weather Widget Icon */
|
|
.rpg-weather-icon {
|
|
font-size: clamp(18px, 3.5vw, 24px);
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-weather-forecast {
|
|
font-size: clamp(0.4vw, 0.5vw, 0.6vw);
|
|
text-align: center;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.013em;
|
|
opacity: 0.85;
|
|
line-height: 1.1;
|
|
word-wrap: break-word;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rpg-weather-forecast.rpg-editable {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Temperature Widget - Thermometer */
|
|
.rpg-temp-widget {
|
|
gap: 0.188em;
|
|
}
|
|
|
|
.rpg-thermometer {
|
|
position: relative;
|
|
width: 1.25rem;
|
|
height: 2.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.rpg-thermometer-tube {
|
|
position: relative;
|
|
width: 0.5rem;
|
|
height: 1.75rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.625em 0.625em 0 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.rpg-thermometer-fill {
|
|
width: 100%;
|
|
background: linear-gradient(to top, #e94560, #ff6b6b);
|
|
transition: height 0.5s ease;
|
|
border-radius: 0.5em 0.5em 0 0;
|
|
}
|
|
|
|
.rpg-thermometer-bulb {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
background: var(--rpg-highlight);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rpg-temp-value {
|
|
font-size: clamp(0.5vw, 0.6vw, 0.7vw);
|
|
font-weight: bold;
|
|
color: var(--rpg-text);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Clock Widget */
|
|
.rpg-clock-widget {
|
|
gap: 0.188em;
|
|
}
|
|
|
|
.rpg-clock {
|
|
width: 2.625rem;
|
|
height: 2.625rem;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border: 3px solid var(--rpg-border);
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
|
position: relative;
|
|
}
|
|
|
|
.rpg-clock-face {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.rpg-clock-hour,
|
|
.rpg-clock-minute {
|
|
position: absolute;
|
|
background: var(--rpg-highlight);
|
|
transform-origin: bottom center;
|
|
left: 50%;
|
|
bottom: 50%;
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
|
|
.rpg-clock-hour {
|
|
width: 0.188rem;
|
|
height: 0.75rem;
|
|
margin-left: -0.094em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.rpg-clock-minute {
|
|
width: 0.125rem;
|
|
height: 1rem;
|
|
margin-left: -0.062em;
|
|
}
|
|
|
|
.rpg-clock-center {
|
|
position: absolute;
|
|
width: 0.312rem;
|
|
height: 0.312rem;
|
|
background: var(--rpg-highlight);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.rpg-time-value {
|
|
font-size: clamp(0.5vw,0.6vw,0.7vw);
|
|
font-weight: bold;
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
/* Location Widget - Map */
|
|
.rpg-map-bg {
|
|
width: 100%;
|
|
height: 1.875rem;
|
|
margin: 0;
|
|
margin-bottom: 0 !important;
|
|
background:
|
|
linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
|
|
linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.05) 75%),
|
|
linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.05) 75%);
|
|
background-size: 6px 6px;
|
|
background-position: 0 0, 0 3px, 3px -3px, -3px 0px;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.25em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
margin-bottom: 0.188em;
|
|
}
|
|
|
|
.rpg-map-marker {
|
|
font-size: 1vw;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
|
|
animation: markerPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes markerPulse {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-2px); }
|
|
}
|
|
|
|
.rpg-location-text {
|
|
font-size: clamp(0.5vw, 0.6vw, 0.7vw);
|
|
font-weight: bold;
|
|
color: var(--rpg-text);
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
padding: 0.125em 0.25em;
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
/* Character Status Cards */
|
|
.rpg-character-status {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25em;
|
|
margin: 0;
|
|
padding: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-character-status-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding: 0.25em 0.375em;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-left: 3px solid var(--rpg-highlight);
|
|
border-radius: 0.25em;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-character-status-card:hover {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
transform: translateX(0.188rem);
|
|
}
|
|
|
|
.rpg-char-emoji {
|
|
font-size: clamp(14px, 2.5vw, 18px);
|
|
flex-shrink: 0;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
|
}
|
|
|
|
.rpg-char-details {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.rpg-char-name {
|
|
font-size: clamp(8px, 1.5vw, 10px);
|
|
font-weight: bold;
|
|
color: var(--rpg-highlight);
|
|
margin-bottom: 0.062em;
|
|
}
|
|
|
|
.rpg-char-traits {
|
|
font-size: clamp(7px, 1.3vw, 9px);
|
|
color: var(--rpg-text);
|
|
opacity: 0.8;
|
|
line-height: 1.2;
|
|
}/* Old info line styles (legacy) */
|
|
.rpg-info-line {
|
|
margin: 0.375em 0;
|
|
padding: 0.375em 0.625em;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-left: 2px solid var(--rpg-highlight);
|
|
border-radius: 0.25em;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rpg-info-line:hover {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
transform: translateX(0.312rem);
|
|
}
|
|
|
|
/* ============================================
|
|
CHARACTER THOUGHTS SECTION
|
|
============================================ */
|
|
.rpg-thoughts-section {
|
|
text-align: center;
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.rpg-thoughts-header {
|
|
font-size: 1.3vw;
|
|
font-weight: bold;
|
|
margin-bottom: 0.625em;
|
|
color: var(--rpg-highlight);
|
|
text-shadow: 0 0 8px var(--rpg-highlight);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-thoughts-content {
|
|
position: relative;
|
|
padding: 0.5em;
|
|
border-radius: 0.5em;
|
|
border-left: 3px solid var(--rpg-highlight);
|
|
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
|
|
text-align: left;
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(6px, 1vh, 8px);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
/* Remove centering for multiple character cards */
|
|
}
|
|
|
|
/* Individual thought item */
|
|
.rpg-thought-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.625em;
|
|
padding: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 0.375em;
|
|
width: 100%; /* Ensure items take full width */
|
|
box-sizing: border-box; /* Include padding in width calculation */
|
|
}
|
|
|
|
.rpg-thought-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Character avatar with thought bubbles */
|
|
.rpg-thought-avatar {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-thought-avatar img {
|
|
width: clamp(30px, 5vh, 40px);
|
|
height: clamp(30px, 5vh, 40px);
|
|
border-radius: 50%;
|
|
border: 2px solid var(--rpg-highlight);
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Thought bubbles - Left side, ascending size from bottom-left to top-right */
|
|
.rpg-thought-bubbles {
|
|
position: absolute;
|
|
bottom: -0.25rem;
|
|
left: -0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125em;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.rpg-bubble {
|
|
background: var(--rpg-highlight);
|
|
border-radius: 50%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.rpg-bubble-1 {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.rpg-bubble-2 {
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
margin-left: 0.125em;
|
|
}
|
|
|
|
/* Thought content */
|
|
.rpg-thought-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.rpg-thought-name {
|
|
font-weight: bold;
|
|
color: var(--rpg-highlight);
|
|
font-size: clamp(8px, 1.5vw, 10px);
|
|
margin-bottom: 0.188em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.031em;
|
|
}
|
|
|
|
.rpg-thought-name::before,
|
|
.rpg-thought-name::after {
|
|
content: none !important;
|
|
}
|
|
|
|
.rpg-thought-text {
|
|
font-size: clamp(9px, 1.6vw, 11px);
|
|
font-style: italic;
|
|
line-height: 1.3;
|
|
color: var(--rpg-text);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.rpg-thought-text::before {
|
|
content: ''; /* Explicitly ensure no emoji */
|
|
}
|
|
|
|
/* Overlay to fade the background portrait and provide contrast */
|
|
.rpg-thoughts-content::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(0, 0, 0, 0.85) 0%,
|
|
rgba(0, 0, 0, 0.75) 50%,
|
|
rgba(0, 0, 0, 0.85) 100%
|
|
);
|
|
z-index: 1;
|
|
display: none; /* Hide background overlay for new format */
|
|
}
|
|
|
|
/* Content wrapper to sit above the background */
|
|
.rpg-thoughts-overlay {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5em;
|
|
font-size: 1.1vw;
|
|
font-style: italic;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Present Characters - Character Cards */
|
|
.rpg-character-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: clamp(8px, 1vw, 12px);
|
|
padding: clamp(6px, 1vh, 8px);
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: clamp(4px, 0.5vh, 6px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
transition: all 0.2s ease;
|
|
width: 100%; /* Ensure cards take full width */
|
|
box-sizing: border-box; /* Include padding and border in width calculation */
|
|
flex-shrink: 0; /* Prevent cards from shrinking */
|
|
}
|
|
|
|
.rpg-character-card:hover {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border-color: var(--rpg-highlight);
|
|
}
|
|
|
|
/* Character avatar container with relationship badge */
|
|
.rpg-character-avatar {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-character-avatar img {
|
|
width: clamp(35px, 6vh, 45px);
|
|
height: clamp(35px, 6vh, 45px);
|
|
border-radius: 50%;
|
|
border: 2px solid var(--rpg-highlight);
|
|
object-fit: cover;
|
|
display: block; /* Prevent inline spacing issues */
|
|
}
|
|
|
|
/* Relationship badge in top-right corner */
|
|
.rpg-relationship-badge {
|
|
position: absolute;
|
|
top: -0.125rem;
|
|
right: -0.125rem;
|
|
background: var(--rpg-bg);
|
|
border: 1px solid var(--rpg-highlight);
|
|
border-radius: 50%;
|
|
width: clamp(16px, 2.5vh, 20px);
|
|
height: clamp(16px, 2.5vh, 20px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: clamp(8px, 1.2vw, 12px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Character info section */
|
|
.rpg-character-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(3px, 0.5vh, 5px);
|
|
overflow: hidden; /* Prevent content from overflowing */
|
|
}
|
|
|
|
/* Character header with emoji and name */
|
|
.rpg-character-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(4px, 0.5vw, 6px);
|
|
flex-wrap: nowrap; /* Prevent wrapping */
|
|
}
|
|
|
|
.rpg-character-emoji {
|
|
font-size: clamp(12px, 2vw, 16px);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-character-name {
|
|
font-weight: bold;
|
|
color: var(--rpg-highlight);
|
|
font-size: clamp(0.7vw, 0.75vw, 0.8vw);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.031em;
|
|
white-space: nowrap; /* Prevent name from wrapping */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Character traits/status line */
|
|
.rpg-character-traits {
|
|
font-size: clamp(0.6vw, 0.7vw, 0.8vw);
|
|
color: var(--rpg-text);
|
|
opacity: 0.8;
|
|
line-height: 1.3;
|
|
overflow-wrap: break-word; /* Allow long text to wrap */
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Placeholder styles for empty sections */
|
|
.rpg-thoughts-placeholder,
|
|
.rpg-placeholder-widget {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: clamp(12px, 2vh, 20px);
|
|
text-align: center;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.rpg-placeholder-text {
|
|
font-size: clamp(10px, 1.6vw, 14px);
|
|
color: var(--rpg-text);
|
|
font-weight: bold;
|
|
margin-bottom: clamp(4px, 0.6vh, 6px);
|
|
}
|
|
|
|
.rpg-placeholder-hint {
|
|
font-size: clamp(8px, 1.2vw, 10px);
|
|
color: var(--rpg-text);
|
|
opacity: 0.7;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Editable field styles */
|
|
.rpg-editable,
|
|
.rpg-editable-stat {
|
|
cursor: text;
|
|
transition: all 0.2s ease;
|
|
border-radius: 2px;
|
|
padding: 0.062em 0.125em;
|
|
}
|
|
|
|
.rpg-editable:hover,
|
|
.rpg-editable-stat:hover {
|
|
background: var(--rpg-accent);
|
|
outline: 1px solid var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-editable:focus,
|
|
.rpg-editable-stat:focus {
|
|
background: var(--rpg-bg);
|
|
outline: 2px solid var(--rpg-highlight);
|
|
box-shadow: 0 0 8px var(--rpg-highlight);
|
|
}
|
|
|
|
/* Edit button container and styling */
|
|
.rpg-edit-button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: clamp(4px, 0.8vh, 8px);
|
|
margin-top: clamp(4px, 0.8vh, 8px);
|
|
}
|
|
|
|
.rpg-edit-button {
|
|
background: var(--rpg-accent);
|
|
border: 1px solid var(--rpg-highlight);
|
|
color: var(--rpg-text);
|
|
padding: clamp(3px, 0.6vh, 6px) clamp(6px, 1.2vh, 12px);
|
|
border-radius: clamp(3px, 0.6vh, 6px);
|
|
font-size: clamp(7px, 1.2vw, 10px);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(2px, 0.4vh, 4px);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-edit-button:hover {
|
|
background: var(--rpg-highlight);
|
|
color: var(--rpg-bg);
|
|
transform: translateY(-0.062rem);
|
|
box-shadow: 0 2px 8px var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-edit-button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.rpg-edit-button i {
|
|
font-size: clamp(7px, 1.2vw, 10px);
|
|
}
|
|
|
|
/* Removed emoji icon styling - no longer needed */
|
|
|
|
/* Settings Styling */
|
|
.rpg-settings {
|
|
margin-top: 0.625em;
|
|
padding-top: 0.5em;
|
|
border-top: 1px solid #444;
|
|
}
|
|
|
|
.rpg-settings summary {
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
padding: 0.375em;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 0.25em;
|
|
margin-bottom: 0.5em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375em;
|
|
font-size: 1.1vw;
|
|
}
|
|
|
|
.rpg-settings summary:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.rpg-settings-content {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.rpg-settings-content label {
|
|
display: block;
|
|
margin: 0.375em 0;
|
|
}
|
|
|
|
.rpg-setting-row {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.rpg-setting-row label {
|
|
display: block;
|
|
margin-bottom: 0.188em;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.rpg-setting-row input[type="number"] {
|
|
width: 100%;
|
|
padding: 0.25em;
|
|
border: 1px solid #444;
|
|
border-radius: 3px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: inherit;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.rpg-setting-row small {
|
|
display: block;
|
|
margin-top: 0.188em;
|
|
color: #888;
|
|
font-size: 0.95vw;
|
|
}
|
|
|
|
#rpg-manual-update {
|
|
width: 100%;
|
|
margin-top: 0.5em;
|
|
padding: 0.375em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375em;
|
|
font-size: 1.1vw;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.rpg-panel {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.rpg-stat-label {
|
|
min-width: 5rem;
|
|
font-size: 1.1vw;
|
|
}
|
|
}
|
|
|
|
/* Animation for stats updates */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.rpg-stat-row.updating {
|
|
animation: pulse 0.5s ease-in-out;
|
|
}
|
|
/* ============================================
|
|
SETTINGS SECTION
|
|
============================================ */
|
|
.rpg-settings {
|
|
margin-top: 0.938em;
|
|
padding-top: 0.938em;
|
|
border-top: 2px solid var(--rpg-border);
|
|
}
|
|
|
|
.rpg-settings summary {
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
padding: 0.75em;
|
|
background: var(--rpg-accent);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.625em;
|
|
margin-bottom: 0.938em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625em;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rpg-settings summary:hover {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
transform: translateX(0.312rem);
|
|
}
|
|
|
|
.rpg-settings-content {
|
|
padding: 0.938em;
|
|
background: var(--rpg-accent);
|
|
border-radius: 0.625em;
|
|
}
|
|
|
|
.rpg-settings-group {
|
|
margin-bottom: 1.25em;
|
|
padding-bottom: 0.938em;
|
|
border-bottom: 1px solid var(--rpg-border);
|
|
}
|
|
|
|
.rpg-settings-group:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.rpg-settings-group h4 {
|
|
margin: 0 0 0.75em 0;
|
|
font-size: 1.5vw;
|
|
color: var(--rpg-highlight);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.rpg-setting-row {
|
|
margin: 0.75em 0;
|
|
}
|
|
|
|
.rpg-setting-row label {
|
|
display: block;
|
|
margin-bottom: 0.375em;
|
|
font-size: 1.2vw;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.rpg-select,
|
|
.rpg-input {
|
|
width: 100%;
|
|
padding: 0.5em;
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
background: var(--rpg-bg);
|
|
color: var(--rpg-text);
|
|
font-size: 1.3vw;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rpg-select:focus,
|
|
.rpg-input:focus {
|
|
outline: none;
|
|
border-color: var(--rpg-highlight);
|
|
box-shadow: 0 0 10px var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-setting-row input[type="color"] {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
padding: 0.25em;
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
background: var(--rpg-bg);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rpg-setting-row input[type="color"]:hover {
|
|
border-color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-setting-row small {
|
|
display: block;
|
|
margin-top: 0.25em;
|
|
color: #999;
|
|
font-size: 1vw;
|
|
font-style: italic;
|
|
}
|
|
|
|
.rpg-custom-colors {
|
|
margin-top: 0.625em;
|
|
padding: 0.938em;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 0.5em;
|
|
border: 1px solid var(--rpg-border);
|
|
}
|
|
|
|
.checkbox_label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
margin: 0.625em 0;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.checkbox_label:hover {
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-btn-primary {
|
|
width: 100%;
|
|
padding: 0.75em;
|
|
background: var(--rpg-accent);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.625em;
|
|
color: var(--rpg-text);
|
|
font-size: 1.4vw;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.625em;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px var(--rpg-shadow);
|
|
}
|
|
|
|
.rpg-btn-primary:hover {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
transform: translateY(-0.125rem);
|
|
box-shadow: 0 6px 20px var(--rpg-shadow);
|
|
}
|
|
|
|
.rpg-btn-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Clear Cache Button - Danger style */
|
|
.rpg-btn-clear-cache {
|
|
width: 100%;
|
|
padding: 0.625em;
|
|
background: rgba(220, 53, 69, 0.2);
|
|
border: 2px solid rgba(220, 53, 69, 0.5);
|
|
border-radius: 0.5em;
|
|
color: #ff6b6b;
|
|
font-size: 1.2vw;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5em;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rpg-btn-clear-cache:hover {
|
|
background: rgba(220, 53, 69, 0.3);
|
|
border-color: rgba(220, 53, 69, 0.8);
|
|
color: #ff8787;
|
|
transform: translateY(-0.062rem);
|
|
}
|
|
|
|
.rpg-btn-clear-cache:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ============================================
|
|
THEME VARIATIONS
|
|
============================================ */
|
|
|
|
/* Sci-Fi / Synthwave Theme */
|
|
.rpg-panel[data-theme="sci-fi"] {
|
|
--rpg-bg: #0a0e27;
|
|
--rpg-accent: #1a1f3a;
|
|
--rpg-text: #00fff9;
|
|
--rpg-highlight: #ff006e;
|
|
--rpg-border: #8b00ff;
|
|
--rpg-shadow: rgba(139, 0, 255, 0.5);
|
|
}
|
|
|
|
/* Apply sci-fi theme to thought panel */
|
|
#rpg-thought-panel[data-theme="sci-fi"],
|
|
#rpg-thought-icon[data-theme="sci-fi"] {
|
|
--rpg-bg: #0a0e27;
|
|
--rpg-accent: #1a1f3a;
|
|
--rpg-text: #00fff9;
|
|
--rpg-highlight: #ff006e;
|
|
--rpg-border: #8b00ff;
|
|
--rpg-shadow: rgba(139, 0, 255, 0.5);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-content-box {
|
|
background: linear-gradient(135deg, #1a1f3a 0%, #0a0e27 100%);
|
|
box-shadow: 0 0 40px rgba(139, 0, 255, 0.4), inset 0 0 30px rgba(0, 0, 0, 0.5);
|
|
border: 2px solid #8b00ff;
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-panel-header h3,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-stats-title,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-info-header,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-thoughts-header {
|
|
text-shadow: 0 0 20px #ff006e, 0 0 40px #8b00ff;
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-divider {
|
|
background: linear-gradient(to right, transparent, #8b00ff, #ff006e, #8b00ff, transparent);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-thoughts-content::before {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(10, 14, 39, 0.9) 0%,
|
|
rgba(26, 31, 58, 0.8) 50%,
|
|
rgba(10, 14, 39, 0.9) 100%
|
|
);
|
|
}
|
|
|
|
/* Fantasy / Rustic Parchment Theme */
|
|
.rpg-panel[data-theme="fantasy"] {
|
|
--rpg-bg: #2b1810;
|
|
--rpg-accent: #3d2414;
|
|
--rpg-text: #f4e8d0;
|
|
--rpg-highlight: #d4af37;
|
|
--rpg-border: #8b6914;
|
|
--rpg-shadow: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
/* Apply fantasy theme to thought panel */
|
|
#rpg-thought-panel[data-theme="fantasy"],
|
|
#rpg-thought-icon[data-theme="fantasy"] {
|
|
--rpg-bg: #2b1810;
|
|
--rpg-accent: #3d2414;
|
|
--rpg-text: #f4e8d0;
|
|
--rpg-highlight: #d4af37;
|
|
--rpg-border: #8b6914;
|
|
--rpg-shadow: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] {
|
|
background-image:
|
|
linear-gradient(rgba(43, 24, 16, 0.9), rgba(43, 24, 16, 0.9)),
|
|
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.1"/></svg>');
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] .rpg-content-box {
|
|
background: linear-gradient(135deg, #3d2414 0%, #2b1810 100%);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(139, 105, 20, 0.2);
|
|
border: 3px solid #8b6914;
|
|
border-style: ridge;
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] .rpg-panel-header h3,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-stats-title,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-info-header,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-thoughts-header {
|
|
font-family: 'Georgia', serif;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] .rpg-divider::after {
|
|
content: '❦';
|
|
font-size: 1.5vw;
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] .rpg-thoughts-content::before {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(43, 24, 16, 0.92) 0%,
|
|
rgba(61, 36, 20, 0.88) 50%,
|
|
rgba(43, 24, 16, 0.92) 100%
|
|
);
|
|
}
|
|
|
|
/* Cyberpunk / Neon Grid Theme */
|
|
.rpg-panel[data-theme="cyberpunk"] {
|
|
--rpg-bg: #000000;
|
|
--rpg-accent: #0d0d0d;
|
|
--rpg-text: #00ff41;
|
|
--rpg-highlight: #ff2a6d;
|
|
--rpg-border: #05d9e8;
|
|
--rpg-shadow: rgba(5, 217, 232, 0.5);
|
|
}
|
|
|
|
/* Apply cyberpunk theme to thought panel */
|
|
#rpg-thought-panel[data-theme="cyberpunk"],
|
|
#rpg-thought-icon[data-theme="cyberpunk"] {
|
|
--rpg-bg: #000000;
|
|
--rpg-accent: #0d0d0d;
|
|
--rpg-text: #00ff41;
|
|
--rpg-highlight: #ff2a6d;
|
|
--rpg-border: #05d9e8;
|
|
--rpg-shadow: rgba(5, 217, 232, 0.5);
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] {
|
|
background: linear-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95)),
|
|
repeating-linear-gradient(0deg, rgba(5, 217, 232, 0.1) 0px, transparent 1px, transparent 2px, rgba(5, 217, 232, 0.1) 3px),
|
|
repeating-linear-gradient(90deg, rgba(5, 217, 232, 0.1) 0px, transparent 1px, transparent 2px, rgba(5, 217, 232, 0.1) 3px);
|
|
background-size: 100% 100%, 30px 30px, 30px 30px;
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-content-box {
|
|
background: linear-gradient(135deg, rgba(13, 13, 13, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%);
|
|
box-shadow: 0 0 40px rgba(255, 42, 109, 0.4), inset 0 0 30px rgba(5, 217, 232, 0.2);
|
|
border: 2px solid #05d9e8;
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-panel-header h3,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-stats-title,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-info-header,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-thoughts-header {
|
|
text-shadow: 0 0 10px #ff2a6d, 0 0 20px #05d9e8, 0 0 30px #ff2a6d;
|
|
font-family: 'Courier New', monospace;
|
|
letter-spacing: 0.125em;
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-divider {
|
|
background: linear-gradient(to right, transparent, #05d9e8, #ff2a6d, #05d9e8, transparent);
|
|
height: 0.188rem;
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-thoughts-content::before {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(0, 0, 0, 0.92) 0%,
|
|
rgba(13, 13, 13, 0.85) 50%,
|
|
rgba(0, 0, 0, 0.92) 100%
|
|
);
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN
|
|
============================================ */
|
|
@media (max-width: 768px) {
|
|
.rpg-panel {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
body:has(.rpg-panel) #sheld {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.rpg-user-portrait {
|
|
width: 3.75rem;
|
|
height: 3.75rem;
|
|
}
|
|
|
|
.rpg-stats-title {
|
|
font-size: 1.5vw;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
ANIMATIONS
|
|
============================================ */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(0.625rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.rpg-section {
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
|
|
.rpg-stat-row {
|
|
animation: fadeIn 0.3s ease-out;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.rpg-stat-row:nth-child(1) { animation-delay: 0.1s; }
|
|
.rpg-stat-row:nth-child(2) { animation-delay: 0.15s; }
|
|
.rpg-stat-row:nth-child(3) { animation-delay: 0.2s; }
|
|
.rpg-stat-row:nth-child(4) { animation-delay: 0.25s; }
|
|
.rpg-stat-row:nth-child(5) { animation-delay: 0.3s; }
|
|
|
|
/* ============================================
|
|
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;
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
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(20px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes diceRoll {
|
|
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.1); }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
/* Theme Support - CSS Custom Properties */
|
|
.rpg-dice-popup[data-theme="sci-fi"] .rpg-dice-popup-content {
|
|
--rpg-bg: #0a0e27;
|
|
--rpg-accent: #1a1f3a;
|
|
--rpg-text: #00fff9;
|
|
--rpg-highlight: #ff006e;
|
|
--rpg-border: #00fff9;
|
|
}
|
|
|
|
.rpg-dice-popup[data-theme="fantasy"] .rpg-dice-popup-content {
|
|
--rpg-bg: #2c1810;
|
|
--rpg-accent: #3d2817;
|
|
--rpg-text: #f4e8d0;
|
|
--rpg-highlight: #d4af37;
|
|
--rpg-border: #8b7355;
|
|
}
|
|
|
|
.rpg-dice-popup[data-theme="cyberpunk"] .rpg-dice-popup-content {
|
|
--rpg-bg: #0d0221;
|
|
--rpg-accent: #1a0b2e;
|
|
--rpg-text: #00ff9f;
|
|
--rpg-highlight: #ff00ff;
|
|
--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;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
HTML PROMPT TOGGLE
|
|
============================================ */
|
|
.rpg-toggle-container {
|
|
padding: 0.5em;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 0.312em;
|
|
margin: 0;
|
|
}
|
|
|
|
.rpg-toggle-label {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.rpg-toggle-label input[type="checkbox"] {
|
|
margin: 0 0.5em 0 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rpg-toggle-label i {
|
|
margin-right: 0.375em;
|
|
}
|
|
|
|
/* ============================================
|
|
MANUAL UPDATE BUTTON (Desktop)
|
|
============================================ */
|
|
.rpg-manual-update-btn {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
margin: 0 !important;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
padding: 0;
|
|
background: linear-gradient(135deg, var(--rpg-highlight), var(--rpg-accent));
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-radius: 0.5em;
|
|
color: var(--rpg-text);
|
|
font-size: 1.1vw;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375em;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rpg-manual-update-btn:hover {
|
|
transform: translateY(-0.125rem);
|
|
box-shadow: 0 6px 20px var(--rpg-highlight);
|
|
background: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-manual-update-btn:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE REFRESH BUTTON (FAB - Same pattern as toggle)
|
|
============================================ */
|
|
.rpg-mobile-refresh {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
/* Position set by JavaScript based on saved settings */
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 2px solid var(--SmartThemeBorderColor);
|
|
color: var(--rpg-text, #ecf0f1);
|
|
font-size: 1.85vw;
|
|
cursor: grab;
|
|
z-index: 1001; /* Above panel (1000) but below mobile toggle (10002) */
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
transition: opacity 0.3s ease, transform 0.2s ease, top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
will-change: top, left;
|
|
}
|
|
|
|
/* Disable transitions while actively dragging */
|
|
.rpg-mobile-refresh.dragging {
|
|
transition: none;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.rpg-mobile-refresh:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.rpg-mobile-refresh:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Spinning animation when refreshing */
|
|
.rpg-mobile-refresh.spinning i {
|
|
animation: rpg-spin 0.8s linear infinite;
|
|
}
|
|
|
|
.rpg-mobile-refresh i {
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SETTINGS BUTTON
|
|
============================================ */
|
|
.rpg-btn-settings {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--rpg-accent);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.5em;
|
|
color: var(--rpg-text);
|
|
font-size: 1.1vw;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375em;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rpg-btn-settings:hover {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
transform: translateY(-0.125rem);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.rpg-btn-settings:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ============================================
|
|
SETTINGS MODAL - MOBILE FIRST
|
|
============================================ */
|
|
|
|
/* CSS Custom Properties for Responsive Scaling */
|
|
.rpg-settings-popup {
|
|
/* Fluid spacing */
|
|
--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-heading: clamp(0.9rem, 3.5vw, 1rem);
|
|
|
|
/* Content constraints - more height than dice roller */
|
|
--modal-max-width: min(90vw, 500px);
|
|
--modal-max-height: 75vh;
|
|
}
|
|
|
|
/* Modal Container - Hidden by default */
|
|
.rpg-settings-popup {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 10000;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* Open state */
|
|
.rpg-settings-popup.is-open {
|
|
display: flex;
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
/* Closing state */
|
|
.rpg-settings-popup.is-closing {
|
|
display: flex;
|
|
animation: fadeOut 0.2s ease-in;
|
|
}
|
|
|
|
/* Backdrop overlay - using ::before pseudo-element */
|
|
.rpg-settings-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-settings-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-settings-popup-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--modal-padding);
|
|
background: var(--rpg-accent);
|
|
border-bottom: var(--modal-border-width) solid var(--rpg-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-settings-popup-header h3 {
|
|
margin: 0;
|
|
font-size: var(--modal-font-heading);
|
|
color: var(--rpg-highlight);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--modal-gap);
|
|
}
|
|
|
|
/* Close button - touch-friendly */
|
|
.rpg-popup-close {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--rpg-text);
|
|
font-size: 2.2vw;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.25rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-popup-close:active {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
/* Scrollable Body */
|
|
.rpg-settings-popup-body {
|
|
padding: var(--modal-padding);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Settings Groups */
|
|
.rpg-settings-group {
|
|
margin-bottom: var(--modal-padding);
|
|
padding-bottom: var(--modal-padding);
|
|
border-bottom: 1px solid var(--rpg-border);
|
|
}
|
|
|
|
.rpg-settings-group:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.rpg-settings-group h4 {
|
|
margin: 0 0 var(--modal-gap) 0;
|
|
font-size: var(--modal-font-base);
|
|
color: var(--rpg-highlight);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--modal-gap);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Theme Support */
|
|
#rpg-settings-popup[data-theme="sci-fi"] .rpg-settings-popup-content {
|
|
--rpg-bg: #0a0e27;
|
|
--rpg-accent: #1a1f3a;
|
|
--rpg-text: #00ffff;
|
|
--rpg-highlight: #ff00ff;
|
|
--rpg-border: #00ffff;
|
|
}
|
|
|
|
#rpg-settings-popup[data-theme="fantasy"] .rpg-settings-popup-content {
|
|
--rpg-bg: #2b1810;
|
|
--rpg-accent: #3d2516;
|
|
--rpg-text: #f4e4c1;
|
|
--rpg-highlight: #d4af37;
|
|
--rpg-border: #8b6914;
|
|
}
|
|
|
|
#rpg-settings-popup[data-theme="cyberpunk"] .rpg-settings-popup-content {
|
|
--rpg-bg: #0d0221;
|
|
--rpg-accent: #1a0b2e;
|
|
--rpg-text: #00ff9f;
|
|
--rpg-highlight: #ff00ff;
|
|
--rpg-border: #ff00ff;
|
|
}
|
|
|
|
/* Desktop Enhancement (1001px+) */
|
|
@media (min-width: 1001px) {
|
|
.rpg-settings-popup {
|
|
--modal-padding: 1rem;
|
|
--modal-gap: 0.75rem;
|
|
--modal-font-base: 0.9rem;
|
|
--modal-font-small: 0.8rem;
|
|
--modal-font-heading: 1.125rem;
|
|
--modal-max-width: 600px;
|
|
}
|
|
|
|
/* Hover effects on desktop */
|
|
.rpg-popup-close:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
CHAT THOUGHT OVERLAYS
|
|
============================================ */
|
|
|
|
/* Container for thought overlay on chat messages */
|
|
/* Floating thought panel - positioned next to character avatar */
|
|
#rpg-thought-panel {
|
|
position: fixed;
|
|
z-index: 1000; /* Lower z-index to stay below dropdown menus */
|
|
pointer-events: auto;
|
|
max-width: 15.3rem; /* 30% smaller than 21.875rem (350px → 245px) */
|
|
transform: translateY(-50%);
|
|
animation: thoughtPanelFadeIn 0.4s ease-out;
|
|
}
|
|
|
|
/* Close button */
|
|
.rpg-thought-close {
|
|
position: absolute;
|
|
top: -0.5rem;
|
|
right: -0.5rem;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 50%;
|
|
background: var(--rpg-highlight, #e94560);
|
|
color: white;
|
|
border: 2px solid var(--rpg-bg, rgba(30, 30, 50, 0.95));
|
|
font-size: clamp(0.9rem, 1rem, 1.1rem);
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10001;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-thought-close:hover {
|
|
transform: scale(1.1);
|
|
background: var(--rpg-text, #eaeaea);
|
|
color: var(--rpg-highlight, #e94560);
|
|
}
|
|
|
|
/* Collapsed thought icon */
|
|
#rpg-thought-icon {
|
|
position: fixed;
|
|
z-index: 1000; /* Lower z-index to stay below dropdown menus */
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-radius: 50%;
|
|
background: var(--rpg-bg, rgba(30, 30, 50, 0.95));
|
|
border: 2px solid var(--rpg-highlight, #e94560);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: clamp(1.3rem, 1.4rem, 1.5rem);
|
|
cursor: pointer;
|
|
animation: thoughtIconPulse 2s ease-in-out infinite;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
#rpg-thought-icon:hover {
|
|
transform: scale(1.1);
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes thoughtIconPulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3);
|
|
}
|
|
}
|
|
|
|
/* Thought circles floating from avatar */
|
|
.rpg-thought-circles {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column-reverse; /* Reverse so circles go upward */
|
|
align-items: flex-end; /* Align to the right side */
|
|
gap: 0.75em;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rpg-thought-circle {
|
|
background: var(--rpg-bg, rgba(30, 30, 50, 0.8));
|
|
border: 2px solid var(--rpg-highlight, #e94560);
|
|
border-radius: 50%;
|
|
animation: thoughtCirclePulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.rpg-circle-1 {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
animation-delay: 0s;
|
|
align-self: flex-end; /* Circle 1 on the far right (at avatar) */
|
|
}
|
|
|
|
.rpg-circle-2 {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
animation-delay: 0.2s;
|
|
align-self: flex-end;
|
|
margin-right: 4px; /* Move slightly left from circle 1 */
|
|
}
|
|
|
|
.rpg-circle-3 {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
animation-delay: 0.4s;
|
|
align-self: flex-end;
|
|
margin-right: 8px; /* Move more left from circle 1 */
|
|
}
|
|
|
|
/* Thought bubble main container */
|
|
.rpg-thought-bubble {
|
|
background: var(--rpg-bg, rgba(30, 30, 50, 0.95));
|
|
border: 2px solid var(--rpg-highlight, #e94560);
|
|
border-radius: clamp(10px, 1.5vh, 14px);
|
|
padding: clamp(10px, 1.5vh, 14px);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
position: relative;
|
|
backdrop-filter: blur(15px);
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Custom scrollbar for thought bubble */
|
|
.rpg-thought-bubble::-webkit-scrollbar {
|
|
width: 0.375rem;
|
|
}
|
|
|
|
.rpg-thought-bubble::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.rpg-thought-bubble::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-highlight, #e94560);
|
|
border-radius: 3px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.rpg-thought-bubble::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-highlight, #e94560);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Individual thought item (for multiple characters) */
|
|
.rpg-thought-item {
|
|
display: flex;
|
|
gap: clamp(10px, 1.5vh, 12px);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Emoji box on the left */
|
|
.rpg-thought-emoji-box {
|
|
flex-shrink: 0;
|
|
width: clamp(32px, 4vh, 40px);
|
|
height: clamp(32px, 4vh, 40px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--rpg-accent, rgba(50, 50, 70, 0.8));
|
|
border: 1px solid var(--rpg-highlight, #e94560);
|
|
border-radius: clamp(6px, 1vh, 8px);
|
|
font-size: clamp(16px, 2vw, 20px);
|
|
}
|
|
|
|
/* Thought content on the right */
|
|
.rpg-thought-content {
|
|
flex: 1;
|
|
font-size: clamp(0.85rem, 0.9rem, 0.95rem);
|
|
line-height: 1.5;
|
|
color: var(--rpg-text, #eaeaea);
|
|
font-style: italic;
|
|
opacity: 0.95;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
/* Divider between multiple thoughts */
|
|
.rpg-thought-divider {
|
|
height: 0.062rem;
|
|
background: linear-gradient(to right, transparent, var(--rpg-highlight, #e94560), transparent);
|
|
margin: clamp(8px, 1vh, 10px) 0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Arrow pointing right (when panel is on left) */
|
|
#rpg-thought-panel.rpg-thought-panel-left .rpg-thought-bubble::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -0.75rem;
|
|
transform: translateY(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 10px 0 10px 12px;
|
|
border-color: transparent transparent transparent var(--rpg-highlight, #e94560);
|
|
}
|
|
|
|
#rpg-thought-panel.rpg-thought-panel-left .rpg-thought-bubble::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -0.562rem;
|
|
transform: translateY(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 0.5rem 0 0.5rem 0.625rem;
|
|
border-color: transparent transparent transparent var(--rpg-bg, rgba(30, 30, 50, 0.95));
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Arrow pointing left (when panel is on right) */
|
|
#rpg-thought-panel.rpg-thought-panel-right .rpg-thought-bubble::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -0.75rem;
|
|
transform: translateY(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 10px 12px 10px 0;
|
|
border-color: transparent var(--rpg-highlight, #e94560) transparent transparent;
|
|
}
|
|
|
|
#rpg-thought-panel.rpg-thought-panel-right .rpg-thought-bubble::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -0.562rem;
|
|
transform: translateY(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 0.5rem 0.625rem 0.5rem 0;
|
|
border-color: transparent var(--rpg-bg, rgba(30, 30, 50, 0.95)) transparent transparent;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes thoughtPanelFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-50%) scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(-50%) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes thoughtCirclePulse {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: scale(0.8);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
/* Responsive positioning for mobile/narrow screens */
|
|
@media (max-width: 768px) {
|
|
#rpg-thought-panel {
|
|
position: fixed !important;
|
|
max-width: 90vw !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) translateY(-50%) !important;
|
|
}
|
|
|
|
.rpg-thought-circles {
|
|
display: none !important;
|
|
}
|
|
|
|
#rpg-thought-panel .rpg-thought-bubble::after,
|
|
#rpg-thought-panel .rpg-thought-bubble::before {
|
|
display: none !important;
|
|
}
|
|
|
|
.rpg-thought-content {
|
|
font-size: clamp(12px, 3.5vw, 16px);
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
MOBILE TOGGLE BUTTON (FAB)
|
|
============================================ */
|
|
|
|
/* Hide mobile toggle on desktop, show on mobile */
|
|
.rpg-mobile-toggle {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
/* Position set by JavaScript based on saved settings */
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 2px solid var(--SmartThemeBorderColor);
|
|
color: var(--rpg-text, #ecf0f1);
|
|
font-size: 1.85vw;
|
|
cursor: grab;
|
|
z-index: 10002;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
transition: opacity 0.3s ease, transform 0.2s ease, top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
|
|
user-select: none; /* Prevent text selection while dragging */
|
|
-webkit-user-select: none;
|
|
will-change: top, left; /* Optimize for position changes */
|
|
}
|
|
|
|
/* Disable transitions while actively dragging */
|
|
.rpg-mobile-toggle.dragging {
|
|
transition: none;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.rpg-mobile-toggle:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.rpg-mobile-toggle:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.rpg-mobile-toggle.active {
|
|
background: var(--rpg-highlight, #e74c3c);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Mobile overlay backdrop */
|
|
.rpg-mobile-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 998;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Mobile-specific panel behavior - matches SillyTavern's 1000px breakpoint */
|
|
/* CACHE BUST v2025-01-16 */
|
|
/* Mobile refresh button visibility - opposite of toggle */
|
|
@media (max-width: 1000px) {
|
|
/* Show mobile refresh button */
|
|
.rpg-mobile-refresh {
|
|
display: flex;
|
|
}
|
|
|
|
/* Hide desktop refresh button */
|
|
.rpg-manual-update-btn {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Show refresh button when panel is open (opposite of toggle) */
|
|
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-refresh {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Hide refresh button when panel is closed */
|
|
.rpg-mobile-refresh {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
/* ========================================
|
|
MOBILE PANEL FOUNDATION
|
|
======================================== */
|
|
|
|
/* Show the mobile FAB toggle button */
|
|
.rpg-mobile-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
/* Hide FAB when panel is open */
|
|
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-toggle {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hide internal collapse toggle when panel is closed on mobile */
|
|
.rpg-collapse-toggle {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Show internal collapse toggle when panel is open on mobile */
|
|
.rpg-panel.rpg-mobile-open .rpg-collapse-toggle {
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Show overlay when needed */
|
|
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-overlay {
|
|
display: block;
|
|
}
|
|
|
|
/* Remove margin adjustments on mobile - content takes full width */
|
|
body:has(.rpg-panel) #sheld {
|
|
margin-right: 0 !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
/* Mobile panel - slide from right like desktop */
|
|
.rpg-panel {
|
|
position: fixed !important;
|
|
top: var(--topBarBlockSize) !important;
|
|
right: 0 !important;
|
|
bottom: 0 !important;
|
|
left: auto !important;
|
|
|
|
/* Mobile panel sizing */
|
|
width: 85dvw !important;
|
|
max-width: 400px !important;
|
|
height: calc(100dvh - var(--topBarBlockSize)) !important;
|
|
|
|
/* Hidden by default - completely removed from layout */
|
|
display: none !important;
|
|
|
|
overflow-y: auto !important;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
/* Styling */
|
|
border-radius: 20px 0 0 0;
|
|
border-left: 1px solid var(--SmartThemeBorderColor);
|
|
border-top: 1px solid var(--SmartThemeBorderColor);
|
|
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
|
|
box-shadow: -5px 0 20px var(--rpg-shadow);
|
|
}
|
|
|
|
/* Show panel when opened with slide-in animation */
|
|
.rpg-panel.rpg-mobile-open {
|
|
display: block !important;
|
|
z-index: 50;
|
|
animation: rpgSlideInFromRight 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Closing animation - slide out to right */
|
|
.rpg-panel.rpg-mobile-closing {
|
|
display: block !important;
|
|
z-index: 50;
|
|
animation: rpgSlideOutToRight 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Slide-in animation from right */
|
|
@keyframes rpgSlideInFromRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Slide-out animation to right */
|
|
@keyframes rpgSlideOutToRight {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE KEYBOARD HANDLING
|
|
======================================== */
|
|
|
|
/* When mobile keyboard is visible, adjust panel layout to prevent squashing */
|
|
.rpg-panel.rpg-keyboard-visible {
|
|
/* Prevent content from being pushed too far up */
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
/* Make sections more compact when keyboard visible */
|
|
.rpg-panel.rpg-keyboard-visible .rpg-stats-section,
|
|
.rpg-panel.rpg-keyboard-visible .rpg-info-section,
|
|
.rpg-panel.rpg-keyboard-visible .rpg-thoughts-section {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
/* Reduce spacing in stat bars when keyboard visible */
|
|
.rpg-panel.rpg-keyboard-visible .rpg-stats-grid {
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Disable collapsed state on mobile */
|
|
.rpg-panel.rpg-collapsed {
|
|
max-width: 100dvw !important;
|
|
min-width: unset !important;
|
|
width: 100dvw !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-collapsed .rpg-game-container {
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
/* Collapse toggle on mobile - right side, always visible */
|
|
.rpg-collapse-toggle {
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed !important;
|
|
top: calc(var(--topBarBlockSize) + 120px) !important;
|
|
left: 12px !important;
|
|
right: auto !important;
|
|
width: 44px;
|
|
height: 44px;
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
border-radius: 50%;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 2px solid var(--SmartThemeBorderColor);
|
|
z-index: 9999 !important;
|
|
transition: all 0.2s ease;
|
|
transform: none !important;
|
|
pointer-events: auto !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.rpg-collapse-toggle:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
transform: scale(1.05) !important;
|
|
}
|
|
|
|
.rpg-collapse-toggle:active {
|
|
transform: scale(0.95) !important;
|
|
}
|
|
|
|
/* Mobile icon styling - use chevrons for drawer UX */
|
|
.rpg-collapse-toggle i {
|
|
transform: none !important;
|
|
font-size: clamp(20px, 5.1vw, 24px);
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE TAB NAVIGATION
|
|
======================================== */
|
|
|
|
/* Mobile tab container wrapper */
|
|
.rpg-mobile-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
margin: -12px -12px 16px -12px;
|
|
}
|
|
|
|
/* Tab container at top of panel */
|
|
.rpg-mobile-tabs {
|
|
display: flex;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 1.5));
|
|
border-bottom: 2px solid var(--SmartThemeBorderColor);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.rpg-mobile-tab {
|
|
flex: 1;
|
|
height: 44px;
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
font-size: clamp(14px, 3.6vw, 18px);
|
|
font-weight: 500;
|
|
color: var(--SmartThemeBodyColor);
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
padding: 0 8px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.rpg-mobile-tab:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.rpg-mobile-tab.active {
|
|
color: var(--rpg-highlight);
|
|
border-bottom-color: var(--rpg-highlight);
|
|
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.1);
|
|
}
|
|
|
|
.rpg-mobile-tab i {
|
|
font-size: clamp(16px, 4.1vw, 20px);
|
|
}
|
|
|
|
/* Tab content sections */
|
|
.rpg-mobile-tab-content {
|
|
display: none;
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
|
|
.rpg-mobile-tab-content.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
padding: 12px;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Info tab contains Info Box and Characters with 50/50 split */
|
|
.rpg-mobile-tab-content[data-tab-content="info"].active {
|
|
flex-direction: column;
|
|
gap: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Info Box takes 50% of vertical space */
|
|
.rpg-mobile-tab-content[data-tab-content="info"] > #rpg-info-box,
|
|
.rpg-mobile-tab-content[data-tab-content="info"] > .rpg-info-section {
|
|
flex: 1 1 50% !important;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding-bottom: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
/* Characters section takes 50% of vertical space */
|
|
.rpg-mobile-tab-content[data-tab-content="info"] > #rpg-thoughts,
|
|
.rpg-mobile-tab-content[data-tab-content="info"] > .rpg-thoughts-section {
|
|
flex: 1 1 50% !important;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
/* Add divider between Info and Characters */
|
|
.rpg-mobile-tab-content[data-tab-content="info"] > .rpg-section:not(:last-child) {
|
|
border-bottom: 1px solid var(--SmartThemeBorderColor);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Hide dividers on mobile (tabs handle separation) */
|
|
.rpg-divider {
|
|
display: none;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE INFO BOX IMPROVEMENTS
|
|
======================================== */
|
|
|
|
/* Rows scale proportionally to fill Info Box */
|
|
.rpg-dashboard-row-1 {
|
|
flex: 1.2 !important; /* Slightly more space for 4 widgets */
|
|
height: auto !important; /* Remove desktop height constraint */
|
|
display: flex !important;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.rpg-dashboard-row-2 {
|
|
flex: 0.8 !important; /* Less space for 1 widget */
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Widgets fill their row height */
|
|
.rpg-dashboard-row-1 .rpg-dashboard-widget,
|
|
.rpg-dashboard-row-2 .rpg-dashboard-widget {
|
|
height: 100% !important;
|
|
flex: 1 !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Info screen text readability - convert vw to readable pixel sizes */
|
|
.rpg-calendar-top {
|
|
font-size: clamp(8px, 2.1vw, 10px) !important;
|
|
}
|
|
|
|
.rpg-calendar-day {
|
|
font-size: clamp(11px, 2.9vw, 14px) !important;
|
|
min-height: 3em !important; /* Ensure enough height for content to center */
|
|
padding: 0.75em 0.5em !important; /* More vertical padding on mobile */
|
|
line-height: 1.2 !important; /* Tighter line height */
|
|
}
|
|
|
|
.rpg-calendar-year {
|
|
font-size: clamp(7px, 1.8vw, 10px) !important;
|
|
}
|
|
|
|
.rpg-weather-forecast {
|
|
font-size: clamp(9px, 2.2vw, 11px) !important;
|
|
}
|
|
|
|
.rpg-temp-value {
|
|
font-size: clamp(10px, 2.5vw, 13px) !important;
|
|
}
|
|
|
|
.rpg-time-value {
|
|
font-size: clamp(10px, 2.5vw, 13px) !important;
|
|
}
|
|
|
|
.rpg-location-text {
|
|
font-size: clamp(11px, 2.8vw, 14px) !important;
|
|
}
|
|
|
|
.rpg-map-marker {
|
|
font-size: clamp(16px, 4.1vw, 20px) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE STATS TAB LAYOUT IMPROVEMENTS
|
|
======================================== */
|
|
|
|
/* Make the entire stats section a grid */
|
|
.rpg-stats-section {
|
|
display: grid !important;
|
|
grid-template-columns: 40% 60%; /* Left for inventory/mood, right for attributes */
|
|
grid-template-rows: auto auto auto auto auto; /* Portrait, bars, inventory, mood, attributes */
|
|
gap: 12px;
|
|
padding: 16px 12px;
|
|
}
|
|
|
|
/* Use display: contents so children participate in grid */
|
|
.rpg-stats-header,
|
|
.rpg-stats-content {
|
|
display: contents !important;
|
|
}
|
|
|
|
/* Portrait row - centered at top, full width */
|
|
.rpg-stats-header-left {
|
|
grid-column: 1 / 3;
|
|
grid-row: 1;
|
|
display: flex !important;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.rpg-user-portrait {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
/* Hide stats title on mobile */
|
|
.rpg-stats-title {
|
|
display: none;
|
|
}
|
|
|
|
/* Stat bars row - full width */
|
|
.rpg-stats-left {
|
|
grid-column: 1 / 3;
|
|
grid-row: 2;
|
|
display: contents !important;
|
|
}
|
|
|
|
/* User info row on mobile */
|
|
.rpg-user-info-row {
|
|
grid-column: 1 / 3;
|
|
grid-row: 1;
|
|
justify-content: center !important;
|
|
font-size: clamp(11px, 2.8vw, 14px) !important;
|
|
gap: clamp(6px, 1.5vw, 10px) !important;
|
|
}
|
|
|
|
/* Make user portrait larger on mobile */
|
|
.rpg-user-portrait {
|
|
width: clamp(24px, 6vw, 32px) !important;
|
|
height: clamp(24px, 6vw, 32px) !important;
|
|
}
|
|
|
|
/* Make user name and level more readable on mobile */
|
|
.rpg-user-name {
|
|
font-size: clamp(12px, 3vw, 16px) !important;
|
|
}
|
|
|
|
.rpg-level-label,
|
|
.rpg-level-value {
|
|
font-size: clamp(11px, 2.8vw, 14px) !important;
|
|
}
|
|
|
|
.rpg-stats-grid {
|
|
grid-column: 1 / 3;
|
|
grid-row: 2;
|
|
min-height: 180px; /* Stretch vertically to fill more space */
|
|
gap: clamp(8px, 2vw, 12px); /* Increase gap between stat rows */
|
|
}
|
|
|
|
/* Increase stat bar text sizes for mobile readability */
|
|
.rpg-stat-label {
|
|
font-size: clamp(11px, 2.8vw, 14px) !important;
|
|
}
|
|
|
|
.rpg-stat-value {
|
|
font-size: clamp(12px, 3.1vw, 16px) !important;
|
|
}
|
|
|
|
/* Inventory - expand to fill horizontal space in flex container */
|
|
.rpg-inventory-box {
|
|
flex: 1 !important; /* Grow to fill all available space */
|
|
min-width: 0 !important; /* Allow flexbox to work properly */
|
|
max-width: none !important; /* Remove desktop width restrictions */
|
|
width: auto !important; /* Don't force a specific width */
|
|
min-height: 60px; /* Give it decent height */
|
|
max-height: none; /* Remove height restriction */
|
|
}
|
|
|
|
/* Increase inventory text size for readability on mobile */
|
|
.rpg-inventory-items {
|
|
font-size: clamp(11px, 2.8vw, 14px) !important;
|
|
line-height: 1.4;
|
|
width: 100% !important; /* Fill the inventory box */
|
|
white-space: normal !important; /* Allow text wrapping */
|
|
}
|
|
|
|
/* Mood - row 4, aligned with attributes top */
|
|
.rpg-mood {
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px !important; /* Reduced from 6px for more compact display */
|
|
min-width: 0;
|
|
padding: 4px 0.375em !important; /* Reduced vertical padding */
|
|
}
|
|
|
|
/* Make mood text readable on mobile */
|
|
.rpg-mood-conditions {
|
|
font-size: clamp(11px, 2.8vw, 14px);
|
|
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 */
|
|
.rpg-stats-right {
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
display: contents !important;
|
|
}
|
|
|
|
.rpg-classic-stats {
|
|
grid-column: 2;
|
|
grid-row: 3; /* Align with mood */
|
|
}
|
|
|
|
/* Attributes as ultra-compact 2x3 grid for mobile */
|
|
.rpg-classic-stats-grid {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
grid-template-rows: repeat(3, 1fr) !important;
|
|
gap: 3px;
|
|
margin: 4px 5px 4px 0;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
/* Each attribute - ULTRA COMPACT with vertical stack layout */
|
|
.rpg-classic-stat {
|
|
display: grid !important;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto auto;
|
|
gap: 2px 4px;
|
|
padding: 4px 6px;
|
|
min-height: auto;
|
|
height: auto;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Make buttons container children participate in parent grid */
|
|
.rpg-classic-stat-buttons {
|
|
display: contents;
|
|
}
|
|
|
|
/* Label - top left */
|
|
.rpg-classic-stat-label {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
font-size: clamp(9px, 2.3vw, 12px);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
align-self: center;
|
|
justify-self: center;
|
|
}
|
|
|
|
/* Value - top right */
|
|
.rpg-classic-stat-value {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
font-size: clamp(14px, 3.6vw, 18px);
|
|
font-weight: 700;
|
|
color: var(--SmartThemeQuoteColor);
|
|
text-align: center;
|
|
align-self: center;
|
|
justify-self: center;
|
|
}
|
|
|
|
/* Minus button - bottom left */
|
|
.rpg-stat-decrease {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
justify-self: center;
|
|
}
|
|
|
|
/* Plus button - bottom right */
|
|
.rpg-stat-increase {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
justify-self: center;
|
|
}
|
|
|
|
.rpg-classic-stat-btn {
|
|
min-width: 24px !important;
|
|
min-height: 24px !important;
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: clamp(14px, 3.6vw, 18px);
|
|
font-weight: 700;
|
|
border-radius: 4px;
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: var(--rpg-accent);
|
|
border: 1px solid var(--rpg-border);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-classic-stat-btn:hover {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.rpg-classic-stat-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE THOUGHT ICON POSITIONING
|
|
======================================== */
|
|
|
|
/* Position thought icon above avatar on mobile to prevent off-screen clipping */
|
|
/* JavaScript will calculate position, but add transform to move it above and right */
|
|
#rpg-thought-icon {
|
|
/* 20% larger than desktop for better visibility on mobile */
|
|
width: 2.7rem !important;
|
|
height: 2.7rem !important;
|
|
font-size: 2.2vw !important;
|
|
/* Use transform to shift icon above and to the right of avatar */
|
|
transform: translate(50px, -45px) !important;
|
|
/* Smooth animation for position changes during scroll */
|
|
transition: top 0.2s ease-out, left 0.2s ease-out !important;
|
|
will-change: top, left;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE CHARACTER RELATIONSHIP BADGE
|
|
======================================== */
|
|
|
|
/* Keep relationship badge small on mobile to prevent it from covering avatar */
|
|
.rpg-relationship-badge {
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
font-size: clamp(10px, 2.6vw, 13px) !important;
|
|
padding: 0 !important;
|
|
min-height: unset !important;
|
|
line-height: 18px !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE CHARACTER INFO TEXT SIZES
|
|
======================================== */
|
|
|
|
/* Larger character emoji for mobile readability */
|
|
.rpg-character-emoji {
|
|
font-size: clamp(16px, 4.1vw, 20px) !important;
|
|
}
|
|
|
|
/* Readable character names on mobile */
|
|
.rpg-character-name {
|
|
font-size: clamp(12px, 3.1vw, 16px) !important;
|
|
}
|
|
|
|
/* Readable character traits on mobile */
|
|
.rpg-character-traits {
|
|
font-size: clamp(11px, 2.8vw, 14px) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE DICE DISPLAY
|
|
======================================== */
|
|
|
|
/* Make dice display larger and more visible on mobile */
|
|
.rpg-dice-display {
|
|
font-size: clamp(12px, 3.1vw, 16px) !important;
|
|
padding: clamp(8px, 2vw, 12px) !important;
|
|
min-height: 44px; /* Touch-friendly height */
|
|
gap: clamp(6px, 1.5vw, 10px) !important;
|
|
}
|
|
|
|
/* Larger dice icon for mobile */
|
|
.rpg-dice-display i {
|
|
font-size: clamp(18px, 4.6vw, 24px) !important;
|
|
}
|
|
|
|
/* Larger clear button for mobile touch */
|
|
.rpg-clear-dice-btn {
|
|
font-size: clamp(18px, 4.6vw, 24px) !important;
|
|
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;
|
|
}
|
|
|
|
/* Larger mobile refresh icon (same as toggle) */
|
|
.rpg-mobile-refresh {
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* Very narrow screens - single column layout for all stats */
|
|
@media (max-width: 600px) {
|
|
/* Change grid to single column */
|
|
.rpg-stats-section {
|
|
grid-template-columns: 1fr !important; /* Single column */
|
|
grid-template-rows: auto !important; /* Auto rows */
|
|
}
|
|
|
|
/* User info row - full width, row 1 */
|
|
.rpg-user-info-row {
|
|
grid-column: 1 !important;
|
|
grid-row: 1 !important;
|
|
}
|
|
|
|
/* Stats grid - full width, row 2 */
|
|
.rpg-stats-grid {
|
|
grid-column: 1 !important;
|
|
grid-row: 2 !important;
|
|
}
|
|
|
|
/* Mood - full width, row 3 */
|
|
.rpg-mood {
|
|
grid-column: 1 !important;
|
|
grid-row: 3 !important;
|
|
}
|
|
|
|
/* Attributes - full width, row 4 */
|
|
.rpg-stats-right {
|
|
grid-column: 1 !important;
|
|
grid-row: 4 !important;
|
|
}
|
|
|
|
.rpg-classic-stats {
|
|
grid-column: 1 !important;
|
|
grid-row: 4 !important;
|
|
}
|
|
|
|
/* Make attributes grid single column too for readability */
|
|
.rpg-classic-stats-grid {
|
|
grid-template-columns: repeat(3, 1fr) !important; /* 3 columns for attributes */
|
|
grid-template-rows: repeat(2, 1fr) !important; /* 2 rows */
|
|
}
|
|
}
|
|
|
|
/* Extra small screens - adjust FAB position */
|
|
@media (max-width: 480px) {
|
|
.rpg-mobile-toggle {
|
|
bottom: 6rem;
|
|
right: 0.938rem;
|
|
width: 3.25rem;
|
|
height: 3.25rem;
|
|
font-size: 2vw;
|
|
}
|
|
}
|
|
|
|
/* Touch-friendly improvements for mobile */
|
|
@media (max-width: 768px) {
|
|
/* More padding for editable fields */
|
|
.rpg-editable {
|
|
padding: 0.5em;
|
|
min-height: 2.75rem;
|
|
}
|
|
|
|
/* Exception: Level value should stay compact */
|
|
.rpg-level-value.rpg-editable {
|
|
padding: 0 0.375em;
|
|
min-height: auto;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Larger close buttons */
|
|
.rpg-thought-close {
|
|
min-width: 2.75rem;
|
|
min-height: 2.75rem;
|
|
font-size: 2.2vw;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Inventory System v2 Styles
|
|
======================================== */
|
|
|
|
/* Inventory Container */
|
|
.rpg-inventory-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Sub-tabs Navigation */
|
|
.rpg-inventory-subtabs {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
border-bottom: 2px solid var(--SmartThemeBorderColor);
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.rpg-inventory-subtab {
|
|
flex: 1;
|
|
padding: 0.5rem 1rem;
|
|
background: transparent;
|
|
border: 2px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
color: var(--SmartThemeBodyColor);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.rpg-inventory-subtab:hover {
|
|
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.1);
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-inventory-subtab.active {
|
|
background: transparent;
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Inventory Sections */
|
|
.rpg-inventory-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.rpg-inventory-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--SmartThemeBorderColor);
|
|
}
|
|
|
|
.rpg-inventory-header h4 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
color: var(--SmartThemeBodyColor);
|
|
}
|
|
|
|
.rpg-inventory-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.rpg-inventory-text {
|
|
padding: 0.75rem;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
color: var(--SmartThemeBodyColor);
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.rpg-inventory-empty {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
color: var(--SmartThemeFastUISliderColColor);
|
|
font-style: italic;
|
|
}
|
|
|
|
.rpg-inventory-hint {
|
|
padding: 0.5rem;
|
|
background: transparent;
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.85rem;
|
|
color: var(--SmartThemeFastUISliderColColor);
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.rpg-inventory-hint i {
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
/* Storage Locations */
|
|
.rpg-storage-location {
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rpg-storage-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: var(--SmartThemeQuoteColor);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rpg-storage-toggle {
|
|
background: none;
|
|
border: none;
|
|
color: var(--SmartThemeBodyColor);
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.rpg-storage-toggle:hover {
|
|
color: var(--ac-style-color-matchedText);
|
|
}
|
|
|
|
.rpg-storage-name {
|
|
flex: 1;
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: #000000;
|
|
}
|
|
|
|
.rpg-storage-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.rpg-storage-content {
|
|
padding: 0.75rem;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
}
|
|
|
|
.rpg-storage-location.collapsed .rpg-storage-content {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-storage-add-item-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.rpg-inventory-edit-btn,
|
|
.rpg-inventory-add-btn,
|
|
.rpg-inventory-remove-btn {
|
|
padding: 0.4rem 0.75rem;
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
color: var(--SmartThemeBodyColor);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 0.85rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.rpg-inventory-edit-btn:hover {
|
|
background: var(--ac-style-color-matchedText);
|
|
border-color: var(--ac-style-color-matchedText);
|
|
color: white;
|
|
}
|
|
|
|
.rpg-inventory-add-btn {
|
|
background: transparent;
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-inventory-add-btn:hover {
|
|
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.1);
|
|
border-color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-inventory-remove-btn {
|
|
background: transparent;
|
|
color: var(--SmartThemeFastUISliderColColor);
|
|
}
|
|
|
|
.rpg-inventory-remove-btn:hover {
|
|
background: #dc3545;
|
|
border-color: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
/* Inline Editing Styles */
|
|
.rpg-inventory-text.rpg-editable {
|
|
cursor: text;
|
|
transition: all 0.2s ease;
|
|
min-height: 2rem;
|
|
}
|
|
|
|
.rpg-inventory-text.rpg-editable:hover {
|
|
background: var(--SmartThemeQuoteColor);
|
|
border-color: var(--ac-style-color-matchedText);
|
|
}
|
|
|
|
.rpg-inventory-text.rpg-editable:focus {
|
|
outline: none;
|
|
border-color: var(--ac-style-color-matchedText);
|
|
background: var(--SmartThemeEmColor);
|
|
box-shadow: 0 0 0 2px rgba(var(--ac-style-color-matchedText-rgb, 66, 135, 245), 0.2);
|
|
}
|
|
|
|
.rpg-inventory-text.rpg-editable:empty::before {
|
|
content: 'Click to edit...';
|
|
color: var(--SmartThemeFastUISliderColColor);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Inline Forms */
|
|
.rpg-inline-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem;
|
|
background: var(--SmartThemeQuoteColor);
|
|
border: 1px solid var(--ac-style-color-matchedText);
|
|
border-radius: 0.25rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.rpg-inline-input {
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
color: var(--SmartThemeBodyColor);
|
|
font-size: 0.9rem;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.rpg-inline-input:focus {
|
|
outline: none;
|
|
border-color: var(--ac-style-color-matchedText);
|
|
box-shadow: 0 0 0 2px rgba(var(--ac-style-color-matchedText-rgb, 66, 135, 245), 0.2);
|
|
}
|
|
|
|
.rpg-inline-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.rpg-inline-btn {
|
|
padding: 0.4rem 0.75rem;
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
color: var(--SmartThemeBodyColor);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 0.85rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.rpg-inline-btn:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.rpg-inline-cancel {
|
|
background: var(--SmartThemeBlurTintColor);
|
|
color: var(--SmartThemeFastUISliderColColor);
|
|
}
|
|
|
|
.rpg-inline-cancel:hover {
|
|
background: #6c757d;
|
|
border-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.rpg-inline-save,
|
|
.rpg-inline-confirm {
|
|
background: var(--ac-style-color-matchedText);
|
|
border-color: var(--ac-style-color-matchedText);
|
|
color: white;
|
|
}
|
|
|
|
.rpg-inline-save:hover,
|
|
.rpg-inline-confirm:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Inline Confirmation */
|
|
.rpg-inline-confirmation {
|
|
padding: 0.75rem;
|
|
background: var(--SmartThemeQuoteColor);
|
|
border: 1px solid #dc3545;
|
|
border-radius: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.rpg-inline-confirmation p {
|
|
margin: 0 0 0.75rem 0;
|
|
color: var(--SmartThemeBodyColor);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* ============================================
|
|
ITEM LIST AND GRID VIEW STYLES
|
|
============================================ */
|
|
|
|
/* Item list container base styles */
|
|
.rpg-item-list {
|
|
min-height: 2rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* LIST VIEW - Full-width rows */
|
|
.rpg-item-list-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.rpg-item-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
background: transparent;
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-radius: 0.25rem;
|
|
color: var(--SmartThemeBodyColor);
|
|
font-size: 0.95rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-item-row:hover {
|
|
border-color: var(--rpg-highlight);
|
|
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.1);
|
|
}
|
|
|
|
.rpg-item-row .rpg-item-name {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rpg-item-row .rpg-item-remove {
|
|
flex-shrink: 0;
|
|
padding: 0.3rem 0.6rem;
|
|
background: transparent;
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
color: var(--SmartThemeFastUISliderColColor);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.rpg-item-row .rpg-item-remove:hover {
|
|
background: #dc3545;
|
|
border-color: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
/* GRID VIEW - Responsive card grid */
|
|
.rpg-item-grid-view {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.rpg-item-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem 0.75rem;
|
|
background: transparent;
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-radius: 0.25rem;
|
|
color: var(--SmartThemeBodyColor);
|
|
font-size: 0.9rem;
|
|
transition: all 0.2s ease;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.rpg-item-card:hover {
|
|
border-color: var(--rpg-highlight);
|
|
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.1);
|
|
}
|
|
|
|
.rpg-item-card .rpg-item-name {
|
|
text-align: center;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.rpg-item-card .rpg-item-remove {
|
|
position: absolute;
|
|
top: 0.25rem;
|
|
right: 0.25rem;
|
|
padding: 0;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
color: var(--SmartThemeFastUISliderColColor);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 0.85rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.rpg-item-card .rpg-item-remove:hover {
|
|
background: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
/* Empty state message */
|
|
.rpg-inventory-empty {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
color: var(--SmartThemeFastUISliderColColor);
|
|
font-style: italic;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* View Toggle Buttons */
|
|
.rpg-inventory-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.rpg-view-toggle {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.rpg-view-btn {
|
|
padding: 0.35rem 0.6rem;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 2px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
color: var(--SmartThemeFastUISliderColColor);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 0.9rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.rpg-view-btn:hover {
|
|
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.1);
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-view-btn.active {
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
/* ============================================
|
|
DESKTOP TABS SYSTEM
|
|
============================================ */
|
|
|
|
/* Desktop tabs container */
|
|
.rpg-tabs-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Desktop tab navigation */
|
|
.rpg-tabs-nav {
|
|
display: flex;
|
|
gap: 0;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border-bottom: 2px solid var(--SmartThemeBorderColor);
|
|
}
|
|
|
|
/* Desktop tab button */
|
|
.rpg-tab-btn {
|
|
flex: 1;
|
|
padding: 0.75rem 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
color: var(--SmartThemeBodyColor);
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-tab-btn:hover {
|
|
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.1);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-tab-btn.active {
|
|
background: transparent;
|
|
border-bottom-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-tab-btn i {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Desktop tab content */
|
|
.rpg-tab-content {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 0 0.5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.rpg-tab-content.active {
|
|
display: flex;
|
|
}
|
|
|
|
/* Hide dividers when tabs are active (tabs separate content) */
|
|
.rpg-tabs-container .rpg-divider {
|
|
display: none;
|
|
}
|
|
|
|
/* Mobile Responsive Styles */
|
|
@media (max-width: 768px) {
|
|
.rpg-inventory-subtabs {
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.rpg-inventory-subtab {
|
|
font-size: 1rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.rpg-inventory-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.rpg-inventory-header h4 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.rpg-inventory-edit-btn,
|
|
.rpg-inventory-add-btn,
|
|
.rpg-inventory-remove-btn {
|
|
padding: 0.6rem 1rem;
|
|
font-size: 0.95rem;
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
.rpg-storage-header {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.rpg-storage-toggle {
|
|
min-width: 2rem;
|
|
min-height: 2rem;
|
|
}
|
|
}
|
|
|
|
/* ===================================================================
|
|
Debug Panel Styles - Mobile-Friendly Debug Log Viewer
|
|
=================================================================== */
|
|
|
|
/* Debug toggle button (FAB-style) */
|
|
.rpg-debug-toggle {
|
|
display: none; /* Hidden by default, shown when debugMode is enabled */
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: #ff6b6b;
|
|
border: 2px solid #c92a2a;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
z-index: 10003; /* Above everything else */
|
|
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.5);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rpg-debug-toggle:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 6px 16px rgba(255, 107, 107, 0.7);
|
|
}
|
|
|
|
.rpg-debug-toggle:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.rpg-debug-toggle {
|
|
display: flex; /* Show on mobile when debugMode is enabled */
|
|
}
|
|
}
|
|
|
|
/* Debug panel */
|
|
.rpg-debug-panel {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60vh;
|
|
background: var(--SmartThemeBlurTintColor, #1a1a1a);
|
|
border-top: 2px solid var(--SmartThemeBorderColor, #333);
|
|
z-index: 10002;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateY(100%);
|
|
transition: transform 0.3s ease;
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.rpg-debug-panel.rpg-debug-open {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.rpg-debug-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--SmartThemeBorderColor, #333);
|
|
background: var(--SmartThemeBodyColor, #0d0d0d);
|
|
}
|
|
|
|
.rpg-debug-header h3 {
|
|
margin: 0;
|
|
font-size: 1.2rem;
|
|
color: var(--rpg-text, #ecf0f1);
|
|
}
|
|
|
|
.rpg-debug-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.rpg-debug-actions button {
|
|
background: var(--SmartThemeBlurTintColor, #2a2a2a);
|
|
border: 1px solid var(--SmartThemeBorderColor, #444);
|
|
color: var(--rpg-text, #ecf0f1);
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-debug-actions button:hover {
|
|
background: var(--SmartThemeBorderColor, #333);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.rpg-debug-actions button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.rpg-debug-logs {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1rem;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 0.85rem;
|
|
line-height: 1.4;
|
|
color: var(--rpg-text, #ecf0f1);
|
|
}
|
|
|
|
.rpg-debug-empty {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: #888;
|
|
font-style: italic;
|
|
}
|
|
|
|
.rpg-debug-entry {
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.rpg-debug-entry:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.rpg-debug-time {
|
|
color: #888;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.rpg-debug-message {
|
|
color: #4fc3f7;
|
|
}
|
|
|
|
.rpg-debug-data {
|
|
margin: 0.5rem 0 0 0;
|
|
padding: 0.75rem;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
color: #9ccc65;
|
|
font-size: 0.8rem;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Desktop view - smaller panel in bottom right */
|
|
@media (min-width: 1001px) {
|
|
.rpg-debug-panel {
|
|
bottom: 20px;
|
|
left: auto;
|
|
right: 20px;
|
|
width: 600px;
|
|
max-width: 90vw;
|
|
height: 400px;
|
|
border-radius: 12px;
|
|
border: 2px solid var(--SmartThemeBorderColor, #333);
|
|
}
|
|
|
|
.rpg-debug-toggle {
|
|
display: flex; /* Show on desktop too when debugMode enabled */
|
|
}
|
|
}
|