Lucas 'Paperboy' Rose-Winters
58b7ea4d21
Implemented Visual Viewport API integration to detect and handle mobile keyboard appearance, preventing contenteditable fields from squashing the panel layout when the keyboard appears. **JavaScript Changes (index.js:1886-1948, 522-523):** - Created setupMobileKeyboardHandling() function: * Uses Visual Viewport API to monitor viewport height changes * Detects keyboard appearance (viewport < 75% of window height) * Adds .rpg-keyboard-visible class when keyboard shows * Removes class when keyboard dismisses * Gracefully falls back if API not supported - Created setupContentEditableScrolling() function: * Uses event delegation for all contenteditable fields * Automatically scrolls focused field into view with 300ms delay * Centers field in viewport using scrollIntoView with 'center' block * Smooth scrolling animation for better UX - Added both function calls to initUI() for automatic setup **CSS Changes (style.css:3232-3252):** - Added .rpg-keyboard-visible state styling: * 20px bottom padding to prevent content being pushed too far up * Compact section padding (8px 12px) for stats/info/thoughts * Reduced stat bar gap (4px) to maintain layout integrity - Scoped to mobile viewport only (@media max-width: 1000px) **Benefits:** - No layout squashing when keyboard appears on mobile - Stat bars and charts remain intact and visible - Focused fields automatically scroll into view - Smooth animations for professional UX - Works with all contenteditable fields: * Stats (health, energy, hygiene, sustenance, arousal) * Inventory and mood/conditions * Info box widgets (date, weather, time, location, temperature) * Character traits and relationship badges * Character thoughts - Backward compatible (graceful fallback) - Desktop users completely unaffected **How It Works:** 1. Visual Viewport API monitors viewport height changes 2. When height drops below 75% threshold, keyboard detected 3. Panel gets .rpg-keyboard-visible class for compact styling 4. Tapped contenteditable field smoothly scrolls to center 5. When keyboard dismisses, layout returns to normal **Testing Completed:** - Inventory field editing works without squashing - Stat values editable with keyboard visible - Info box widget editing maintains layout - Character traits and thoughts remain accessible - No layout breaks or chart distortion - Smooth scrolling and transitions verified
3683 lines
87 KiB
CSS
3683 lines
87 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: 1rem;
|
|
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: 0.875rem;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-mood {
|
|
font-size: 0.688rem;
|
|
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: 0.688rem;
|
|
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.562rem;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-value {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* ============================================
|
|
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: 0.75rem;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-info-content,
|
|
.rpg-panel.rpg-position-top .rpg-thoughts-content {
|
|
font-size: 0.75rem;
|
|
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.125rem;
|
|
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: 0.875rem;
|
|
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: 0.688rem;
|
|
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: 0.875rem;
|
|
}
|
|
|
|
/* 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: 1rem;
|
|
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;
|
|
}
|
|
|
|
.rpg-stats-header {
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: space-between;
|
|
gap: clamp(6px, 1.2vh, 12px);
|
|
margin: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-stats-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(4px, 1vh, 8px);
|
|
}
|
|
|
|
.rpg-user-portrait {
|
|
width: clamp(24px, 4vh, 45px);
|
|
height: clamp(24px, 4vh, 45px);
|
|
border-radius: 50%;
|
|
border: 2px solid var(--rpg-highlight);
|
|
box-shadow: 0 0 10px var(--rpg-highlight);
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.rpg-user-portrait:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.rpg-stats-title {
|
|
font-size: clamp(8px, 1.6vh, 12px);
|
|
font-weight: bold;
|
|
color: var(--rpg-highlight);
|
|
text-shadow: 0 0 8px var(--rpg-highlight);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* 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, 8px);
|
|
padding: clamp(4px, 0.8vh, 8px);
|
|
max-width: 12.5rem;
|
|
max-height: clamp(60px, 8vh, 80px);
|
|
min-height: clamp(50px, 6vh, 60px);
|
|
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(6px, 1.1vh, 9px);
|
|
color: var(--rpg-text);
|
|
line-height: 1.4;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
padding: clamp(2px, 0.4vh, 4px);
|
|
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-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Stats Left - Bars and mood */
|
|
.rpg-stats-left {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(2px, 0.4vh, 4px);
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 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(2px, 0.4vh, 4px);
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.rpg-stat-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.rpg-stat-label {
|
|
min-width: 4.062rem;
|
|
font-size: clamp(7px, 1.4vh, 9px);
|
|
font-weight: 600;
|
|
text-align: left;
|
|
color: var(--rpg-text);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.019em;
|
|
}
|
|
|
|
.rpg-stat-bar {
|
|
flex: 1;
|
|
height: 0.75rem;
|
|
min-height: 0.5rem;
|
|
max-height: 1rem;
|
|
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: 0.562rem;
|
|
font-weight: bold;
|
|
min-width: 1.875rem;
|
|
text-align: right;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.rpg-mood {
|
|
margin: 0 !important;
|
|
margin-top: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375em;
|
|
font-size: 0.562rem;
|
|
padding: 0.25em 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: 1rem;
|
|
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;
|
|
}
|
|
|
|
.rpg-classic-stats-title {
|
|
text-align: center;
|
|
font-size: 0.562rem;
|
|
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(3px, 0.5vh, 5px);
|
|
flex: 1;
|
|
align-content: stretch;
|
|
min-height: 0;
|
|
}
|
|
|
|
.rpg-classic-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
gap: clamp(1px, 0.2vh, 2px);
|
|
padding: clamp(4px, 0.6vh, 6px);
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 0.25em;
|
|
border: 1px solid var(--rpg-border);
|
|
box-sizing: border-box;
|
|
min-height: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.rpg-classic-stat-label {
|
|
font-size: clamp(7px, 0.9vh, 8px);
|
|
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(11px, 1.4vh, 14px);
|
|
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.1vh, 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: 0.875rem;
|
|
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: 0.75rem;
|
|
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: 1;
|
|
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 */
|
|
.rpg-dashboard-row-1 {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.rpg-dashboard-row-1 .rpg-dashboard-widget {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Row 2: Full-width location */
|
|
.rpg-dashboard-row-2 {
|
|
flex: 1;
|
|
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(6px, 1.2vh, 8px);
|
|
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(8px, 1.5vw, 14px);
|
|
font-weight: bold;
|
|
padding: 0.375em;
|
|
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: 0.438rem;
|
|
color: var(--rpg-text);
|
|
opacity: 0.7;
|
|
margin-top: 0.062em;
|
|
}
|
|
|
|
/* Weather Widget Icon */
|
|
.rpg-weather-icon {
|
|
font-size: clamp(16px, 3vw, 32px);
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
|
}
|
|
|
|
.rpg-weather-forecast {
|
|
font-size: 0.438rem;
|
|
text-align: center;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.013em;
|
|
opacity: 0.85;
|
|
line-height: 1;
|
|
word-wrap: break-word;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.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(7px, 1.5vh, 9px);
|
|
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: 0.5rem;
|
|
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: 1rem;
|
|
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(7px, 1.4vh, 9px);
|
|
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.5vh, 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.5vh, 10px);
|
|
font-weight: bold;
|
|
color: var(--rpg-highlight);
|
|
margin-bottom: 0.062em;
|
|
}
|
|
|
|
.rpg-char-traits {
|
|
font-size: clamp(7px, 1.3vh, 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: 0.875rem;
|
|
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.5vh, 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.6vh, 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: 0.75rem;
|
|
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.2vh, 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, 2vh, 16px);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-character-name {
|
|
font-weight: bold;
|
|
color: var(--rpg-highlight);
|
|
font-size: clamp(9px, 1.5vh, 12px);
|
|
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(8px, 1.3vh, 10px);
|
|
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.6vh, 14px);
|
|
color: var(--rpg-text);
|
|
font-weight: bold;
|
|
margin-bottom: clamp(4px, 0.6vh, 6px);
|
|
}
|
|
|
|
.rpg-placeholder-hint {
|
|
font-size: clamp(8px, 1.2vh, 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.2vh, 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.2vh, 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: 0.75rem;
|
|
}
|
|
|
|
.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: 0.688rem;
|
|
}
|
|
|
|
.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: 0.688rem;
|
|
}
|
|
|
|
.rpg-setting-row small {
|
|
display: block;
|
|
margin-top: 0.188em;
|
|
color: #888;
|
|
font-size: 0.625rem;
|
|
}
|
|
|
|
#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: 0.75rem;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.rpg-panel {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.rpg-stat-label {
|
|
min-width: 5rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* 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: 1rem;
|
|
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: 0.812rem;
|
|
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: 0.875rem;
|
|
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: 0.688rem;
|
|
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: 0.938rem;
|
|
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: 0.812rem;
|
|
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: 1rem;
|
|
}
|
|
|
|
.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: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
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 {
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
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
|
|
============================================ */
|
|
.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: 0.75rem;
|
|
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);
|
|
}
|
|
|
|
/* ============================================
|
|
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: 0.75rem;
|
|
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: 1.5rem;
|
|
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: 21.875rem;
|
|
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: 1.125rem;
|
|
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: 1.25rem;
|
|
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, 2vh, 20px);
|
|
}
|
|
|
|
/* Thought content on the right */
|
|
.rpg-thought-content {
|
|
flex: 1;
|
|
font-size: clamp(10px, 1.4vh, 12px);
|
|
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(9px, 1.2vh, 11px);
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
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.25rem;
|
|
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 */
|
|
@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: 20px;
|
|
}
|
|
|
|
/* ========================================
|
|
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: 14px;
|
|
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(--SmartThemeQuoteColor);
|
|
border-bottom-color: var(--SmartThemeQuoteColor);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.rpg-mobile-tab i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* 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); }
|
|
}
|
|
|
|
/* Combined Info & Characters wrapper */
|
|
.rpg-mobile-combined-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Info Box takes fixed 50% of vertical space */
|
|
.rpg-mobile-combined-content > #rpg-info-box {
|
|
flex: 0 0 50%;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding-bottom: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
/* Characters section takes remaining 50% */
|
|
.rpg-mobile-combined-content > #rpg-thoughts {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
/* Add divider between Info and Characters */
|
|
.rpg-mobile-combined-content > .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 */
|
|
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;
|
|
}
|
|
|
|
/* ========================================
|
|
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; /* Portrait, stat bars, inventory, mood */
|
|
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;
|
|
}
|
|
|
|
.rpg-stats-grid {
|
|
grid-column: 1 / 3;
|
|
grid-row: 2;
|
|
}
|
|
|
|
/* Inventory - bottom left */
|
|
.rpg-inventory-box {
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
margin: 0;
|
|
min-height: auto;
|
|
max-height: none;
|
|
max-width: 100%; /* Override 12.5rem restriction */
|
|
}
|
|
|
|
/* Mood - below inventory on left */
|
|
.rpg-mood {
|
|
grid-column: 1;
|
|
grid-row: 4;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Attributes - right side, spanning rows 3-4 */
|
|
.rpg-stats-right {
|
|
grid-column: 2;
|
|
grid-row: 3 / 5;
|
|
display: contents !important;
|
|
}
|
|
|
|
.rpg-classic-stats {
|
|
grid-column: 2;
|
|
grid-row: 3 / 5;
|
|
}
|
|
|
|
/* 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: 9px;
|
|
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: 14px;
|
|
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: 14px;
|
|
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 {
|
|
/* 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: 10px !important;
|
|
padding: 0 !important;
|
|
min-height: unset !important;
|
|
line-height: 18px !important;
|
|
}
|
|
}
|
|
|
|
/* 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: 1.375rem;
|
|
}
|
|
}
|
|
|
|
/* Touch-friendly improvements for mobile */
|
|
@media (max-width: 768px) {
|
|
/* More padding for editable fields */
|
|
.rpg-editable {
|
|
padding: 0.5em;
|
|
min-height: 2.75rem;
|
|
}
|
|
|
|
/* Larger close buttons */
|
|
.rpg-thought-close {
|
|
min-width: 2.75rem;
|
|
min-height: 2.75rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|