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