Lucas 'Paperboy' Rose-Winters
63a02fd197
- Update onMessageReceived to populate extensionSettings.infoBoxData and characterThoughts for dashboard widgets - Update updateRPGData (separate mode) with same extensionSettings population - Add refreshDashboard() calls after data updates in both generation paths - Fix onCharacterChanged to populate extensionSettings from loaded chat data - Fix refreshDashboard() to use correct property name (registry not widgetRegistry) - Reduce mood and weather widget font sizes to fit in 1x1 layout This fixes Scene tab widgets not updating when receiving messages or loading chats from welcome screen.
5425 lines
128 KiB
CSS
5425 lines
128 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: auto;
|
|
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(1.7vw, 1.8vw, 1.9vw);
|
|
height: clamp(1.7vw, 1.8vw, 1.9vw);
|
|
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: 0.7vw;
|
|
color: var(--rpg-text-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rpg-level-label {
|
|
font-size: 0.7vw;
|
|
font-weight: 600;
|
|
color: var(--rpg-text-color);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.rpg-level-value {
|
|
font-size: 0.7vw;
|
|
font-weight: 700;
|
|
color: var(--rpg-highlight-color);
|
|
padding: clamp(1px, 0.2vh, 2px) 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: minmax(0, 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);
|
|
}
|
|
|
|
/* ========================================
|
|
DASHBOARD V2 CONTAINER & HEADER STYLES
|
|
========================================
|
|
Dashboard container and header layout
|
|
======================================== */
|
|
|
|
.rpg-dashboard-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
width: 100%;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.rpg-dashboard-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 0;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.rpg-dashboard-header-left,
|
|
.rpg-dashboard-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.rpg-dashboard-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.rpg-dashboard-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.3rem;
|
|
padding: 0.5rem;
|
|
min-width: 2.5rem;
|
|
font-size: 0.75rem;
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
color: var(--SmartThemeBodyColor);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.rpg-dashboard-tab:hover {
|
|
background: var(--SmartThemeBlurTintColor);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.rpg-dashboard-tab.active {
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border-color: var(--SmartThemeBorderColor);
|
|
opacity: 1;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.rpg-tab-icon {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.rpg-tab-name {
|
|
font-size: 0.75rem;
|
|
display: none;
|
|
}
|
|
|
|
/* Show name on hover */
|
|
.rpg-dashboard-tab:hover .rpg-tab-name {
|
|
display: inline;
|
|
margin-left: 0.3rem;
|
|
}
|
|
|
|
.rpg-dashboard-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
font-size: 0.9rem;
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
background: var(--SmartThemeBlurTintColor);
|
|
color: var(--SmartThemeBodyColor);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.rpg-dashboard-btn:hover {
|
|
background: var(--SmartThemeQuoteColor);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.rpg-dashboard-btn i {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.rpg-dashboard-grid {
|
|
position: relative;
|
|
width: 100%;
|
|
flex: 1; /* Fill available space in dashboard container */
|
|
overflow-y: auto; /* Allow scrolling within grid if needed */
|
|
overflow-x: hidden;
|
|
min-height: 0; /* Allow flex to shrink below natural size */
|
|
}
|
|
|
|
/* Hide resize handles by default */
|
|
.resize-handles {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
/* Show resize handles in edit mode */
|
|
.edit-mode .resize-handles {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ========================================
|
|
DASHBOARD V2 WIDGET STYLES
|
|
========================================
|
|
|
|
When widgets are rendered in dashboard v2 (narrow side panel),
|
|
stack content vertically instead of side-by-side.
|
|
|
|
Modern hybrid approach:
|
|
- vw/vh: Widget layout positioning (handled by GridEngine)
|
|
- rem: Typography and spacing (accessible, user-scalable)
|
|
- px: Fixed details (borders, shadows)
|
|
- %: Container-relative sizing
|
|
======================================== */
|
|
|
|
/* Base widget container - ensures content stays within bounds */
|
|
.rpg-widget {
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
/* Unified widget styling - consistent look for all widgets */
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-left: 3px solid var(--rpg-highlight);
|
|
border-radius: 0.5rem;
|
|
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.rpg-widget > * {
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.rpg-widget .rpg-stats-content {
|
|
display: flex;
|
|
flex-direction: column; /* Stack vertically */
|
|
gap: 0.75rem; /* rem for spacing */
|
|
}
|
|
|
|
.rpg-widget .rpg-stats-left,
|
|
.rpg-widget .rpg-stats-right {
|
|
flex: none; /* Don't split 50/50 */
|
|
width: 100%; /* Full width */
|
|
}
|
|
|
|
/* Classic stats grid - 2 columns to match dashboard grid */
|
|
.rpg-widget .rpg-classic-stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.5rem 0.25rem; /* rem for spacing */
|
|
}
|
|
|
|
/* Classic stat cells */
|
|
.rpg-widget .rpg-classic-stat {
|
|
padding: 0.4rem 0.3rem; /* rem for spacing */
|
|
}
|
|
|
|
/* Typography - rem for accessibility */
|
|
.rpg-widget .rpg-classic-stat-label {
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.rpg-widget .rpg-classic-stat-value {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.rpg-widget .rpg-classic-stat-btn {
|
|
width: 1.5rem; /* rem for button size */
|
|
height: 1.5rem;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
/* User info widget - responsive layout */
|
|
.rpg-user-info-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* Vertical layout (1 column): centered avatar with text below */
|
|
.rpg-user-info-container.rpg-layout-vertical {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Horizontal layout (2+ columns): avatar left, text right */
|
|
.rpg-user-info-container.rpg-layout-horizontal {
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
/* User portrait/avatar */
|
|
.rpg-widget .rpg-user-portrait {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
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-widget .rpg-user-portrait:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
/* Text container */
|
|
.rpg-user-info-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.rpg-layout-vertical .rpg-user-info-text {
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
/* User name */
|
|
.rpg-user-name {
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
color: var(--rpg-text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Level container */
|
|
.rpg-user-level {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
/* Level label and value */
|
|
.rpg-level-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--rpg-text);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.rpg-level-value {
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
color: var(--rpg-highlight);
|
|
padding: 0.15rem 0.4rem;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 0.25rem;
|
|
min-width: 1.5rem;
|
|
text-align: center;
|
|
cursor: text;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-level-value:hover {
|
|
background: var(--rpg-highlight);
|
|
color: var(--rpg-bg);
|
|
}
|
|
|
|
.rpg-level-value:focus {
|
|
outline: 2px solid var(--rpg-highlight);
|
|
outline-offset: 1px;
|
|
background: var(--rpg-bg);
|
|
}
|
|
|
|
/* Stat bars - rem for text, vh for bar height */
|
|
.rpg-widget .rpg-stat-label {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.rpg-widget .rpg-stat-value {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.rpg-widget .rpg-stat-bar {
|
|
height: 1.2vh; /* vh for layout element */
|
|
}
|
|
|
|
/* Mood widget - responsive sizing for dashboard */
|
|
.rpg-widget .rpg-mood {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.1rem;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.rpg-widget .rpg-mood-emoji {
|
|
font-size: 1rem;
|
|
flex-shrink: 0;
|
|
cursor: text;
|
|
line-height: 1;
|
|
}
|
|
|
|
.rpg-widget .rpg-mood-conditions {
|
|
font-size: 0.45rem;
|
|
line-height: 1;
|
|
text-align: center;
|
|
word-break: break-word;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Progress bars - rem for spacing */
|
|
.rpg-widget .rpg-stats-grid {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* ============================================
|
|
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 */
|
|
.rpg-location-widget {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
/* Calendar Widget */
|
|
.rpg-calendar-widget {
|
|
padding: 0.188em;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.rpg-calendar-top {
|
|
background: var(--rpg-highlight);
|
|
color: var(--rpg-bg);
|
|
font-size: 0.65rem;
|
|
font-weight: bold;
|
|
padding: 0.125em 0.375em;
|
|
border-radius: 3px 3px 0 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-calendar-day {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--rpg-text);
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
padding: 0.1em;
|
|
width: 100%;
|
|
text-align: center;
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-top: none;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 0;
|
|
}
|
|
|
|
.rpg-calendar-year {
|
|
font-size: 0.55rem;
|
|
color: var(--rpg-text);
|
|
opacity: 0.7;
|
|
margin-top: 0.062em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Weather Widget */
|
|
.rpg-weather-widget {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0.25rem;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.rpg-weather-icon {
|
|
font-size: 1rem;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
cursor: text;
|
|
}
|
|
|
|
.rpg-weather-forecast {
|
|
font-size: 0.45rem;
|
|
text-align: center;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.013em;
|
|
opacity: 0.85;
|
|
line-height: 1;
|
|
word-wrap: break-word;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.rpg-weather-forecast.rpg-editable {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Temperature Widget - Thermometer */
|
|
.rpg-temp-widget {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0.25rem;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.rpg-thermometer {
|
|
position: relative;
|
|
width: 1.2rem;
|
|
height: 2.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.rpg-thermometer-tube {
|
|
position: relative;
|
|
width: 40%;
|
|
height: 70%;
|
|
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: 70%;
|
|
height: 0;
|
|
padding-bottom: 70%;
|
|
background: var(--rpg-highlight);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rpg-temp-value {
|
|
font-size: 0.65rem;
|
|
font-weight: bold;
|
|
color: var(--rpg-text);
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Clock Widget */
|
|
.rpg-clock-widget {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0.25rem;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.rpg-clock {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border: 2px solid var(--rpg-border);
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
|
position: relative;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.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: 3%;
|
|
height: 28%;
|
|
margin-left: -1.5%;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.rpg-clock-minute {
|
|
width: 2%;
|
|
height: 38%;
|
|
margin-left: -1%;
|
|
}
|
|
|
|
.rpg-clock-center {
|
|
position: absolute;
|
|
width: 6%;
|
|
height: 6%;
|
|
background: var(--rpg-highlight);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.rpg-time-value {
|
|
font-size: 0.65rem;
|
|
font-weight: bold;
|
|
color: var(--rpg-text);
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Location Widget - Map */
|
|
.rpg-map-bg {
|
|
width: 100%;
|
|
flex: 1;
|
|
min-height: 3rem;
|
|
margin: 0;
|
|
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;
|
|
}
|
|
|
|
.rpg-map-marker {
|
|
font-size: 2rem;
|
|
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: 0.75rem;
|
|
font-weight: bold;
|
|
color: var(--rpg-text);
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
padding: 0.5rem 0.25rem;
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.rpg-btn-reset-fab {
|
|
width: 100%;
|
|
padding: 0.625em;
|
|
background: rgba(52, 152, 219, 0.2);
|
|
border: 2px solid rgba(52, 152, 219, 0.5);
|
|
border-radius: 0.5em;
|
|
color: #5dade2;
|
|
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-reset-fab:hover {
|
|
background: rgba(52, 152, 219, 0.3);
|
|
border-color: rgba(52, 152, 219, 0.8);
|
|
color: #85c1e9;
|
|
transform: translateY(-0.062rem);
|
|
}
|
|
|
|
.rpg-btn-reset-fab: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
|
|
============================================ */
|
|
.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);
|
|
}
|
|
|
|
/* ============================================
|
|
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 REFRESH FAB BUTTON (Same pattern as mobile 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(--SmartThemeBodyColor);
|
|
font-size: 1.125rem;
|
|
cursor: grab;
|
|
z-index: 1001; /* Below mobile toggle (10002), above debug (1000) */
|
|
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;
|
|
/* Hidden by default - shown when panel open AND separate mode */
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
/* Mobile overlay backdrop */
|
|
.rpg-mobile-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 998;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Mobile-specific panel behavior - matches SillyTavern's 1000px breakpoint */
|
|
/* CACHE BUST v2025-01-16 */
|
|
@media (max-width: 1000px) {
|
|
/* ========================================
|
|
MOBILE PANEL FOUNDATION
|
|
======================================== */
|
|
|
|
/* Show the mobile FAB toggle button */
|
|
.rpg-mobile-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
/* Show the mobile FAB refresh button (but hidden by opacity) */
|
|
.rpg-mobile-refresh {
|
|
display: flex;
|
|
}
|
|
|
|
/* Show refresh button when panel is open AND not hidden by generation mode */
|
|
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-refresh:not(.rpg-hidden-mode) {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Hide desktop refresh button on mobile */
|
|
#rpg-manual-update {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide toggle 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;
|
|
}
|
|
|
|
.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: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Make mood text readable on mobile */
|
|
.rpg-mood-conditions {
|
|
font-size: clamp(11px, 2.8vw, 14px);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* 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 */
|
|
.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;
|
|
}
|
|
|
|
.rpg-btn-reset-fab {
|
|
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;
|
|
}
|
|
|
|
/* 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 FAB BUTTON (Same pattern as mobile FABs)
|
|
============================================ */
|
|
.rpg-debug-toggle {
|
|
display: none; /* Hidden by default, shown when debugMode is enabled */
|
|
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: 1000; /* Below refresh (1001) and 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-debug-toggle.dragging {
|
|
transition: none;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.rpg-debug-toggle:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.rpg-debug-toggle:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Mobile view - slide from right like main panel */
|
|
@media (max-width: 1000px) {
|
|
.rpg-debug-panel {
|
|
/* Reset bottom slide positioning */
|
|
transform: none;
|
|
transition: none;
|
|
bottom: auto;
|
|
|
|
/* Mobile panel - slide from right */
|
|
position: fixed !important;
|
|
top: var(--topBarBlockSize) !important;
|
|
right: 0 !important;
|
|
left: auto !important;
|
|
|
|
/* Mobile sizing using dynamic viewport units */
|
|
width: 85dvw !important;
|
|
max-width: 400px !important;
|
|
height: calc(100dvh - var(--topBarBlockSize)) !important;
|
|
|
|
/* Hidden by default */
|
|
display: none !important;
|
|
|
|
/* Mobile scrolling */
|
|
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);
|
|
border-bottom: none;
|
|
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
|
|
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Show panel when opened with slide-in animation */
|
|
.rpg-debug-panel.rpg-mobile-open {
|
|
display: flex !important;
|
|
z-index: 10002;
|
|
animation: rpgSlideInFromRight 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Closing animation - slide out to right */
|
|
.rpg-debug-panel.rpg-mobile-closing {
|
|
display: flex !important;
|
|
z-index: 10002;
|
|
animation: rpgSlideOutToRight 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Debug logs container needs to stay scrollable */
|
|
.rpg-debug-logs {
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Debug toggle button on mobile */
|
|
.rpg-debug-toggle {
|
|
font-size: clamp(20px, 5.1vw, 26px) !important;
|
|
}
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|