tomt610
4644e0fd93
- Add new desktopStripWidgets settings in state.js with toggles for weather, clock, date, location, stats, and attributes - Add strip widget container in template.html with animated clock face - Add CSS styles for strip widgets with wider collapsed panel (5rem), vertical layout, and theme support - Implement updateStripWidgets() in desktop.js to populate widgets from tracker data - Wire up settings handlers in index.js for all strip widget toggles - Call updateStripWidgets() on data updates in sillytavern.js integration - Trigger widget update when panel is collapsed in layout.js The strip widgets display compact stats/info in the collapsed panel strip on desktop, similar to mobile FAB widgets, eliminating the need to expand the panel to view basic data.
11275 lines
272 KiB
CSS
11275 lines
272 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-mobile-toggle {
|
|
--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, #4a7ba7);
|
|
--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: clamp(1rem, 1.5vw, 1.5rem);
|
|
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: 768px) {
|
|
/* Left position on mobile/tablet */
|
|
body.rpg-panel-position-left #rpg-companion-panel.rpg-panel,
|
|
#rpg-companion-panel.rpg-panel.rpg-position-left {
|
|
left: 0 !important;
|
|
right: auto !important;
|
|
width: 85% !important;
|
|
height: 100dvh !important;
|
|
top: 0 !important;
|
|
bottom: 0 !important;
|
|
}
|
|
|
|
/* Right position on mobile/tablet */
|
|
body.rpg-panel-position-right #rpg-companion-panel.rpg-panel,
|
|
#rpg-companion-panel.rpg-panel.rpg-position-right {
|
|
left: auto !important;
|
|
right: 0 !important;
|
|
width: 85% !important;
|
|
height: 100dvh !important;
|
|
top: 0 !important;
|
|
bottom: 0 !important;
|
|
}
|
|
|
|
/* Top position on mobile */
|
|
#rpg-companion-panel.rpg-panel.rpg-position-top {
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
width: 100% !important;
|
|
max-height: 40vh !important;
|
|
top: 0 !important;
|
|
bottom: auto !important;
|
|
}
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-stats-title {
|
|
font-size: clamp(1rem, 1.3vw, 1.3rem);
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-mood {
|
|
font-size: clamp(0.875rem, 1vw, 1rem);
|
|
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: clamp(0.875rem, 1vw, 1rem);
|
|
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: clamp(0.75rem, 0.85vw, 0.875rem);
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-value {
|
|
font-size: clamp(1rem, 1.3vw, 1.3rem);
|
|
}
|
|
|
|
/* ============================================
|
|
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: clamp(0.875rem, 1.1vw, 1.1rem);
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-info-content,
|
|
.rpg-panel.rpg-position-top .rpg-thoughts-content {
|
|
font-size: clamp(0.875rem, 1.1vw, 1.1rem);
|
|
max-height: 9.375rem;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
.rpg-panel::-webkit-scrollbar,
|
|
#rpg-panel-content::-webkit-scrollbar,
|
|
.rpg-content-box::-webkit-scrollbar {
|
|
width: 0.5rem;
|
|
}
|
|
|
|
.rpg-panel::-webkit-scrollbar-track,
|
|
#rpg-panel-content::-webkit-scrollbar-track,
|
|
.rpg-content-box::-webkit-scrollbar-track {
|
|
background: var(--rpg-accent);
|
|
}
|
|
|
|
.rpg-panel::-webkit-scrollbar-thumb,
|
|
#rpg-panel-content::-webkit-scrollbar-thumb,
|
|
.rpg-content-box::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-highlight);
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
.rpg-panel::-webkit-scrollbar-thumb:hover,
|
|
#rpg-panel-content::-webkit-scrollbar-thumb:hover,
|
|
.rpg-content-box::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-border);
|
|
}
|
|
|
|
/* Game Container - Full height flex container */
|
|
.rpg-game-container {
|
|
padding: 0.75em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
/* Panel Content - Main scrollable area */
|
|
#rpg-panel-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375em;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Header - Fixed size, doesn't grow */
|
|
.rpg-panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 0;
|
|
margin-bottom: 0.5em;
|
|
padding: 0;
|
|
border-bottom: 2px solid var(--rpg-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-panel-header h3 {
|
|
margin: 0;
|
|
font-size: clamp(1.25rem, 1.7vw, 1.75rem);
|
|
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;
|
|
border-left: none !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.rpg-panel-header h3 i {
|
|
border-left: none !important;
|
|
padding-left: 0 !important;
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.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: clamp(1rem, 1.3vw, 1.3rem);
|
|
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: clamp(0.875rem, 1vw, 1rem);
|
|
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: clamp(1rem, 1.3vw, 1.3rem);
|
|
}
|
|
|
|
/* 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: clamp(1rem, 1.5vw, 1.5rem);
|
|
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-user-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.rpg-stats-section {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
position: relative; /* For absolute positioning of lock icon on mobile */
|
|
}
|
|
|
|
/* Hide the stats header - we'll integrate portrait/inventory into stats content */
|
|
.rpg-stats-header {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-stats-header-left {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-user-portrait {
|
|
width: clamp(24px, 4vh, 32px);
|
|
height: clamp(24px, 4vh, 32px);
|
|
border-radius: 50%;
|
|
border: 2px solid var(--rpg-highlight);
|
|
box-shadow: 0 0 8px var(--rpg-highlight);
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-user-portrait:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.rpg-stats-title {
|
|
display: none;
|
|
}
|
|
|
|
/* Inventory Box - Styled like a treasure chest */
|
|
.rpg-inventory-box {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
background: linear-gradient(135deg, var(--rpg-accent) 0%, var(--rpg-bg) 100%);
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-radius: clamp(4px, 0.8vh, 6px);
|
|
padding: clamp(3px, 0.6vh, 5px);
|
|
max-height: clamp(35px, 5vh, 45px);
|
|
min-height: clamp(28px, 4vh, 35px);
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(255, 255, 255, 0.1),
|
|
inset 0 -2px 4px rgba(0, 0, 0, 0.3),
|
|
0 2px 8px rgba(0, 0, 0, 0.3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Add decorative chest details with pseudo-elements */
|
|
.rpg-inventory-box::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60%;
|
|
height: 0.125rem;
|
|
background: var(--rpg-highlight);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.rpg-inventory-box::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80%;
|
|
height: 0.062rem;
|
|
background: var(--rpg-highlight);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.rpg-inventory-items {
|
|
font-size: clamp(0.625rem, 0.6vw, 0.75rem);
|
|
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;
|
|
position: relative; /* For absolute positioning of lock icon */
|
|
}
|
|
|
|
/* 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.5rem, 0.5vw, 0.625rem);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* User portrait */
|
|
.rpg-user-portrait {
|
|
width: clamp(12px, 1.8vw, 16px);
|
|
height: clamp(12px, 1.8vw, 16px);
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* User name and level - inline with portrait */
|
|
.rpg-user-name {
|
|
font-weight: 600;
|
|
font-size: 1em;
|
|
color: var(--rpg-text-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rpg-level-label {
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
color: var(--rpg-text-color);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.rpg-level-value {
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
color: var(--rpg-highlight-color);
|
|
padding: 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;
|
|
position: relative; /* For lock icon positioning */
|
|
overflow: visible;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Section-level lock icon styling - appears on hover in top-right corner */
|
|
.rpg-section-lock-icon {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease, transform 0.1s ease;
|
|
user-select: none;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Show lock icon on hover or when section is locked */
|
|
.rpg-stats-content:hover .rpg-section-lock-icon,
|
|
.rpg-dashboard-widget:hover .rpg-section-lock-icon,
|
|
.rpg-character-card:hover .rpg-section-lock-icon,
|
|
.rpg-item-card:hover .rpg-section-lock-icon,
|
|
.rpg-item-row:hover .rpg-section-lock-icon,
|
|
.rpg-quest-item:hover .rpg-section-lock-icon,
|
|
.rpg-section-lock-icon.locked {
|
|
opacity: 0.7;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.rpg-section-lock-icon:hover {
|
|
opacity: 1;
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
/* Mobile: always show lock icons since there's no hover */
|
|
@media (max-width: 1000px) {
|
|
.rpg-section-lock-icon {
|
|
opacity: 0.6 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
.rpg-section-lock-icon.locked {
|
|
opacity: 0.9 !important;
|
|
}
|
|
}
|
|
|
|
/* Make containers relative for absolute positioning of lock icon */
|
|
.rpg-stats-content,
|
|
.rpg-dashboard-widget,
|
|
.rpg-character-content,
|
|
.rpg-item-card,
|
|
.rpg-item-row,
|
|
.rpg-quest-item {
|
|
position: relative;
|
|
}
|
|
|
|
.rpg-stat-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
flex: 1 1 0;
|
|
min-width: fit-content;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
min-height: clamp(12px, 1.8vh, 16px);
|
|
transition: background-color 0.2s ease;
|
|
overflow: visible;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Old per-field lock styling - remove */
|
|
.rpg-lock-icon {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-stat-row.rpg-locked {
|
|
background-color: transparent;
|
|
border-left: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.rpg-stat-label {
|
|
flex: 0 0 auto;
|
|
min-width: 3rem;
|
|
max-width: 30%;
|
|
font-size: clamp(0.625rem, 0.6vw, 0.75rem);
|
|
font-weight: 600;
|
|
text-align: left;
|
|
color: var(--rpg-text);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.019em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rpg-stat-bar {
|
|
flex: 1;
|
|
min-width: 3.75rem;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
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);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.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.625rem, 0.6vw, 0.75rem);
|
|
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: 1500px) {
|
|
.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;
|
|
max-width: calc(100% - 3rem);
|
|
font-size: min(0.7vw, 0.875rem);
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rpg-stat-bar {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
height: 100%;
|
|
min-height: clamp(16px, 2.5vh, 20px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rpg-stat-value {
|
|
position: absolute;
|
|
right: 0.5em;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 2;
|
|
min-width: auto;
|
|
font-size: clamp(0.75rem, 0.7vw, 0.875rem);
|
|
}
|
|
|
|
.rpg-mood {
|
|
font-size: clamp(0.625rem, 1vw, 0.75rem);
|
|
flex-shrink: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.rpg-mood-emoji {
|
|
font-size: clamp(0.875rem, 2vw, 1.125rem);
|
|
}
|
|
|
|
.rpg-mood-conditions {
|
|
font-size: clamp(0.625rem, 1vw, 0.75rem);
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
}
|
|
|
|
.rpg-mood {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375em;
|
|
font-size: clamp(0.5rem, 0.5vw, 0.625rem);
|
|
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;
|
|
position: relative; /* For lock icon positioning */
|
|
}
|
|
|
|
.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;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
/* Skills Section */
|
|
.rpg-skills-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375em;
|
|
font-size: clamp(0.5rem, 0.5vw, 0.625rem);
|
|
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;
|
|
margin-top: 0.375em;
|
|
position: relative; /* For lock icon positioning */
|
|
}
|
|
|
|
.rpg-skills-label {
|
|
font-weight: 700;
|
|
color: var(--rpg-highlight);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-skills-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
line-height: 1.2;
|
|
color: var(--rpg-text);
|
|
font-weight: 600;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
/* 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: clamp(0.75rem, 0.85vw, 0.875rem);
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.037em;
|
|
color: var(--rpg-highlight);
|
|
margin-bottom: 0.25em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-classic-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: clamp(2px, 0.4vh, 4px);
|
|
flex: 1;
|
|
grid-auto-rows: 1fr;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.rpg-classic-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: clamp(1px, 0.15vh, 2px);
|
|
padding: clamp(3px, 0.5vh, 5px);
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 0.25em;
|
|
border: 1px solid var(--rpg-border);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rpg-classic-stat-label {
|
|
font-size: clamp(0.5rem, 0.5vw, 0.625rem);
|
|
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.625rem, 0.6vw, 0.75rem);
|
|
font-weight: bold;
|
|
color: var(--rpg-highlight);
|
|
text-align: center;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-classic-stat-buttons {
|
|
display: flex;
|
|
gap: clamp(3px, 0.4vh, 5px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.rpg-classic-stat-btn {
|
|
width: clamp(18px, 2.2vh, 24px);
|
|
height: clamp(16px, 2vh, 20px);
|
|
padding: 0;
|
|
background: var(--rpg-accent);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 2px;
|
|
color: var(--rpg-text);
|
|
font-size: clamp(9px, 1.1vw, 12px);
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
line-height: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.rpg-classic-stat-btn:hover {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.rpg-classic-stat-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* ============================================
|
|
INFO BOX SECTION
|
|
============================================ */
|
|
|
|
.rpg-info-header {
|
|
font-size: clamp(1rem, 1.3vw, 1.3rem);
|
|
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: clamp(0.875rem, 1.1vw, 1.1rem);
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ============================================
|
|
INFO BOX - VISUAL DASHBOARD
|
|
============================================ */
|
|
.rpg-info-section {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.75em;
|
|
padding: 0.375em;
|
|
margin-bottom: 0;
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25em;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Scrollable content wrapper inside info section */
|
|
.rpg-info-content {
|
|
display: grid;
|
|
grid-template-rows: 80px 60px minmax(min-content, auto);
|
|
gap: 0.25em;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.rpg-info-content::-webkit-scrollbar {
|
|
width: 0.188rem;
|
|
}
|
|
|
|
.rpg-info-content::-webkit-scrollbar-track {
|
|
background: var(--rpg-bg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-info-content::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-highlight);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-info-content::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-dashboard {
|
|
display: flex;
|
|
gap: 0.25em;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/* Row 1: 4 equal-width widgets - more square aspect ratio */
|
|
.rpg-dashboard-row-1 {
|
|
flex: 0 0 auto;
|
|
min-height: 0;
|
|
height: clamp(60px, 10vh, 80px);
|
|
}
|
|
|
|
.rpg-dashboard-row-1 .rpg-dashboard-widget {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
height: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
/* Row 2: Full-width location */
|
|
.rpg-dashboard-row-2 {
|
|
flex: 0 0 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.rpg-dashboard-row-2 .rpg-dashboard-widget {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.rpg-dashboard-widget {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
padding: 0.25em;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rpg-dashboard-widget:hover {
|
|
transform: translateY(-0.125rem);
|
|
box-shadow: 0 4px 12px var(--rpg-shadow);
|
|
}
|
|
|
|
/* Location widget - flexible height */
|
|
.rpg-location-widget {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.125em;
|
|
padding: 0.25em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Calendar Widget */
|
|
.rpg-calendar-widget {
|
|
padding: 0.188em;
|
|
container-type: size;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rpg-calendar-top {
|
|
background: var(--rpg-highlight);
|
|
color: var(--rpg-bg);
|
|
font-size: clamp(0.5rem, 3.5cqh, 0.625rem);
|
|
font-weight: bold;
|
|
padding: 0.125em 0.375em;
|
|
border-radius: 3px 3px 0 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: normal;
|
|
max-width: 100%;
|
|
line-height: 1.2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rpg-calendar-day {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--rpg-text);
|
|
font-size: clamp(0.625rem, 5cqh, 0.875rem);
|
|
font-weight: bold;
|
|
padding: 0.25em;
|
|
width: 100%;
|
|
text-align: center;
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-top: none;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: 100%;
|
|
line-height: 1.1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rpg-calendar-day-text {
|
|
max-width: 100%;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
.rpg-calendar-year {
|
|
font-size: clamp(0.5rem, 3.5cqh, 0.625rem);
|
|
color: var(--rpg-text);
|
|
opacity: 0.7;
|
|
margin-top: 0.062em;
|
|
width: 100%;
|
|
text-align: center;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: normal;
|
|
max-width: 100%;
|
|
line-height: 1.2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Weather Widget */
|
|
.rpg-weather-widget {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.188em;
|
|
padding: 0.25em;
|
|
max-width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
container-type: size;
|
|
}
|
|
|
|
/* Weather Widget Icon */
|
|
.rpg-weather-icon {
|
|
font-size: clamp(0.875rem, 2.5vw, 1.25rem);
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.rpg-weather-forecast {
|
|
font-size: clamp(0.5rem, 4cqh, 0.75rem);
|
|
text-align: center;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.013em;
|
|
opacity: 0.85;
|
|
line-height: 1.1;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
white-space: normal;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
hyphens: auto;
|
|
}
|
|
|
|
.rpg-weather-forecast.rpg-editable {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Temperature Widget - Thermometer */
|
|
.rpg-temp-widget {
|
|
gap: 0.188em;
|
|
}
|
|
|
|
.rpg-thermometer {
|
|
position: relative;
|
|
width: 1.25rem;
|
|
height: 2.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.rpg-thermometer-tube {
|
|
position: relative;
|
|
width: 0.5rem;
|
|
height: 1.75rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.625em 0.625em 0 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.rpg-thermometer-fill {
|
|
width: 100%;
|
|
background: linear-gradient(to top, #e94560, #ff6b6b);
|
|
transition: height 0.5s ease;
|
|
border-radius: 0.5em 0.5em 0 0;
|
|
}
|
|
|
|
.rpg-thermometer-bulb {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
background: var(--rpg-highlight);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rpg-temp-value {
|
|
font-size: clamp(0.625rem, 0.6vw, 0.75rem);
|
|
font-weight: bold;
|
|
color: var(--rpg-text);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Clock Widget */
|
|
.rpg-clock-widget {
|
|
gap: 0.188em;
|
|
}
|
|
|
|
.rpg-clock {
|
|
width: 2.625rem;
|
|
height: 2.625rem;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border: 3px solid var(--rpg-border);
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
|
position: relative;
|
|
}
|
|
|
|
.rpg-clock-face {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.rpg-clock-hour,
|
|
.rpg-clock-minute {
|
|
position: absolute;
|
|
background: var(--rpg-highlight);
|
|
transform-origin: bottom center;
|
|
left: 50%;
|
|
bottom: 50%;
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
|
|
.rpg-clock-hour {
|
|
width: 0.188rem;
|
|
height: 0.75rem;
|
|
margin-left: -0.094em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.rpg-clock-minute {
|
|
width: 0.125rem;
|
|
height: 1rem;
|
|
margin-left: -0.062em;
|
|
}
|
|
|
|
.rpg-clock-center {
|
|
position: absolute;
|
|
width: 0.312rem;
|
|
height: 0.312rem;
|
|
background: var(--rpg-highlight);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.rpg-time-value {
|
|
font-size: clamp(0.625rem, 0.6vw, 0.75rem);
|
|
font-weight: bold;
|
|
color: var(--rpg-text);
|
|
text-align: center;
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.rpg-time-range {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.25em;
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.rpg-time-range .rpg-time-value {
|
|
margin-top: 0;
|
|
min-width: 2.5em;
|
|
}
|
|
|
|
.rpg-time-separator {
|
|
font-size: clamp(0.5rem, 0.5vw, 0.625rem);
|
|
color: var(--rpg-text-muted, var(--rpg-text));
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Location Widget - Map */
|
|
.rpg-map-bg {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 60%;
|
|
padding: 0.5em 0;
|
|
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;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.rpg-map-marker {
|
|
font-size: clamp(0.875rem, 2.5vw, 1.25rem);
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
|
|
animation: markerPulse 2s ease-in-out infinite;
|
|
line-height: 1;
|
|
}
|
|
|
|
@keyframes markerPulse {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-2px); }
|
|
}
|
|
|
|
.rpg-location-text {
|
|
font-size: clamp(0.625rem, 0.6vw, 0.75rem);
|
|
font-weight: bold;
|
|
color: var(--rpg-text);
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
padding: 0;
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
/* Row 3: Recent Events */
|
|
.rpg-dashboard-row-3 {
|
|
flex: 0 0 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.rpg-dashboard-row-3 .rpg-dashboard-widget {
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Recent Events Widget - Notebook Style */
|
|
.rpg-events-widget {
|
|
background: linear-gradient(to bottom,
|
|
rgba(255, 248, 220, 0.08) 0%,
|
|
rgba(255, 248, 220, 0.12) 50%,
|
|
rgba(255, 248, 220, 0.08) 100%);
|
|
border: 2px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Notebook paper lines effect */
|
|
.rpg-events-widget::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: repeating-linear-gradient(
|
|
transparent,
|
|
transparent calc(1em + 0.5em),
|
|
rgba(var(--SmartThemeBorderColor), 0.08) calc(1em + 0.5em),
|
|
rgba(var(--SmartThemeBorderColor), 0.08) calc(1em + 0.6em)
|
|
);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.rpg-events-widget:hover {
|
|
transform: translateY(-0.125rem);
|
|
box-shadow: 0 4px 12px var(--rpg-shadow);
|
|
}
|
|
|
|
/* Notebook ring binding at top */
|
|
.rpg-notebook-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.5em;
|
|
padding: 0.25em 0;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-bottom: 1px solid var(--rpg-border);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rpg-notebook-ring {
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 30% 30%,
|
|
rgba(80, 80, 80, 0.4),
|
|
rgba(40, 40, 40, 0.6));
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2),
|
|
0 1px 2px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.rpg-notebook-title {
|
|
font-size: clamp(0.625rem, 0.6vw, 0.75rem);
|
|
font-weight: bold;
|
|
color: var(--rpg-highlight);
|
|
text-align: center;
|
|
padding: 0.25em 0.5em 0.25em 0.5em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
opacity: 0.9;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rpg-notebook-lines {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125em;
|
|
padding: 0.25em 0.75em 0.5em 0.75em;
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow-y: auto;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.rpg-notebook-lines::-webkit-scrollbar {
|
|
width: 0.188rem;
|
|
}
|
|
|
|
.rpg-notebook-lines::-webkit-scrollbar-track {
|
|
background: var(--rpg-bg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-notebook-lines::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-highlight);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-notebook-lines::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-notebook-line {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.375em;
|
|
position: relative;
|
|
}
|
|
|
|
.rpg-notebook-line.rpg-event-add {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.rpg-notebook-line.rpg-event-add:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.rpg-bullet {
|
|
font-size: clamp(0.625rem, 0.6vw, 0.75rem);
|
|
color: var(--rpg-highlight);
|
|
flex-shrink: 0;
|
|
line-height: 1.4;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.rpg-event-add .rpg-bullet {
|
|
color: var(--rpg-text);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.rpg-event-text {
|
|
font-size: clamp(0.563rem, 0.55vw, 0.688rem);
|
|
color: var(--rpg-text);
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
word-wrap: break-word;
|
|
cursor: text;
|
|
padding: 0.125em 0.25em;
|
|
border-radius: 0.2em;
|
|
transition: background 0.2s ease;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.rpg-event-text.rpg-event-placeholder {
|
|
opacity: 0.5;
|
|
font-style: italic;
|
|
}
|
|
|
|
.rpg-event-text:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
opacity: 1;
|
|
}
|
|
|
|
.rpg-event-text:focus {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
outline: 1px solid var(--rpg-highlight);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 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: clamp(1rem, 1.3vw, 1.3rem);
|
|
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: clamp(0.875rem, 1.1vw, 1.1rem);
|
|
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 */
|
|
max-height: clamp(200px, 18vh, 250px);
|
|
box-sizing: border-box; /* Include padding and border in width calculation */
|
|
flex-shrink: 0; /* Prevent cards from shrinking */
|
|
overflow: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--rpg-border) transparent;
|
|
}
|
|
|
|
.rpg-character-card::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
|
|
.rpg-character-card::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.rpg-character-card::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-character-card::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-highlight);
|
|
}
|
|
|
|
.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 */
|
|
}
|
|
|
|
/* Uploadable avatar - make it clickable */
|
|
.rpg-avatar-upload {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.rpg-avatar-upload::after {
|
|
content: '📷';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
right: -2px;
|
|
font-size: clamp(10px, 1.5vh, 14px);
|
|
background: var(--rpg-bg);
|
|
border: 1px solid var(--rpg-highlight);
|
|
border-radius: 50%;
|
|
width: clamp(18px, 2.5vh, 22px);
|
|
height: clamp(18px, 2.5vh, 22px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rpg-avatar-upload:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.rpg-avatar-upload:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.rpg-avatar-upload:hover img {
|
|
opacity: 0.8;
|
|
border-color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-avatar-upload:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* 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-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rpg-character-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(3px, 0.5vh, 5px);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
flex: 1;
|
|
min-height: 0;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--rpg-border) transparent;
|
|
}
|
|
|
|
.rpg-character-info::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.rpg-character-info::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.rpg-character-info::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-character-info::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-highlight);
|
|
}
|
|
|
|
/* 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 */
|
|
position: relative;
|
|
}
|
|
|
|
.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.75rem, 0.75vw, 0.875rem);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.031em;
|
|
white-space: nowrap; /* Prevent name from wrapping */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Character remove button */
|
|
.rpg-character-remove {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--rpg-text);
|
|
font-size: clamp(14px, 2vw, 18px);
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin-left: auto;
|
|
width: clamp(16px, 2.5vh, 20px);
|
|
height: clamp(16px, 2.5vh, 20px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
opacity: 0.5;
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-character-remove:hover {
|
|
opacity: 1;
|
|
background: rgba(255, 0, 0, 0.2);
|
|
color: #ff4444;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.rpg-character-remove:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Character traits/status line and custom fields */
|
|
.rpg-character-traits,
|
|
.rpg-character-field {
|
|
font-size: clamp(0.75rem, 0.7vw, 0.875rem);
|
|
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 for empty editable character fields */
|
|
.rpg-character-field.rpg-editable:empty::before {
|
|
content: 'Click to edit...';
|
|
color: var(--rpg-highlight);
|
|
opacity: 0.5;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Character stats display */
|
|
.rpg-character-stats {
|
|
width: 100%;
|
|
max-height: clamp(50px, 7vh, 70px);
|
|
margin-top: clamp(3px, 0.5vh, 5px);
|
|
padding: clamp(3px, 0.4vh, 5px) clamp(4px, 0.5vw, 6px);
|
|
background: var(--rpg-bg);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: clamp(2px, 0.3vh, 4px);
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--rpg-border) transparent;
|
|
}
|
|
|
|
.rpg-character-stats::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
|
|
.rpg-character-stats::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.rpg-character-stats::-webkit-scrollbar-thumb {
|
|
background: var(--rpg-border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-character-stats::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-character-stats-inner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: clamp(6px, 1vw, 12px);
|
|
align-items: center;
|
|
}
|
|
|
|
.rpg-character-stat {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-character-stat .rpg-stat-name {
|
|
font-size: clamp(9px, 0.6vw, 0.7vw) !important;
|
|
font-weight: 600 !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
/* 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,
|
|
.rpg-editable-stat-name {
|
|
cursor: text;
|
|
transition: all 0.2s ease;
|
|
border-radius: 2px;
|
|
padding: 0.062em 0.125em;
|
|
}
|
|
|
|
.rpg-editable:hover,
|
|
.rpg-editable-stat:hover,
|
|
.rpg-editable-stat-name:hover {
|
|
background: var(--rpg-accent);
|
|
outline: 1px solid var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-editable:focus,
|
|
.rpg-editable-stat:focus,
|
|
.rpg-editable-stat-name: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: clamp(0.875rem, 1.1vw, 1.1rem);
|
|
}
|
|
|
|
.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: clamp(0.875rem, 1vw, 1rem);
|
|
}
|
|
|
|
.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: clamp(0.875rem, 1vw, 1rem);
|
|
}
|
|
|
|
.rpg-setting-row small {
|
|
display: block;
|
|
margin-top: 0.188em;
|
|
color: #888;
|
|
font-size: clamp(0.75rem, 0.95vw, 0.95rem);
|
|
}
|
|
|
|
#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: clamp(0.875rem, 1.1vw, 1.1rem);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.rpg-panel {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.rpg-stat-label {
|
|
min-width: 5rem;
|
|
font-size: clamp(0.875rem, 1.1vw, 1.1rem);
|
|
}
|
|
}
|
|
|
|
/* 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: clamp(1.125rem, 1.5vw, 1.5rem);
|
|
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: clamp(0.938rem, 1.2vw, 1.2rem);
|
|
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: clamp(1rem, 1.3vw, 1.3rem);
|
|
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;
|
|
/* Ensure color picker works on all browsers */
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
/* Remove padding for better color swatch display */
|
|
.rpg-setting-row input[type="color"]::-webkit-color-swatch-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
.rpg-setting-row input[type="color"]::-webkit-color-swatch {
|
|
border: none;
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
.rpg-setting-row input[type="color"]::-moz-color-swatch {
|
|
border: none;
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
.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: clamp(0.875rem, 1vw, 1rem);
|
|
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 input[type="checkbox"] {
|
|
accent-color: #666 !important;
|
|
}
|
|
|
|
.checkbox_label input[type="checkbox"]:checked {
|
|
background-color: #666 !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .checkbox_label input[type="checkbox"],
|
|
.rpg-settings-popup[data-theme="sci-fi"] .checkbox_label input[type="checkbox"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .checkbox_label input[type="checkbox"]:checked,
|
|
.rpg-settings-popup[data-theme="sci-fi"] .checkbox_label input[type="checkbox"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] .checkbox_label input[type="checkbox"],
|
|
.rpg-settings-popup[data-theme="fantasy"] .checkbox_label input[type="checkbox"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] .checkbox_label input[type="checkbox"]:checked,
|
|
.rpg-settings-popup[data-theme="fantasy"] .checkbox_label input[type="checkbox"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] .checkbox_label input[type="checkbox"],
|
|
.rpg-settings-popup[data-theme="cyberpunk"] .checkbox_label input[type="checkbox"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] .checkbox_label input[type="checkbox"]:checked,
|
|
.rpg-settings-popup[data-theme="cyberpunk"] .checkbox_label input[type="checkbox"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="custom"] .checkbox_label input[type="checkbox"],
|
|
.rpg-settings-popup[data-theme="custom"] .checkbox_label input[type="checkbox"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="custom"] .checkbox_label input[type="checkbox"]:checked,
|
|
.rpg-settings-popup[data-theme="custom"] .checkbox_label input[type="checkbox"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
/* Radio buttons - default theme */
|
|
.checkbox_label input[type="radio"] {
|
|
accent-color: #666 !important;
|
|
}
|
|
|
|
/* Radio buttons - sci-fi theme */
|
|
.rpg-panel[data-theme="sci-fi"] .checkbox_label input[type="radio"],
|
|
.rpg-settings-popup[data-theme="sci-fi"] .checkbox_label input[type="radio"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
/* Radio buttons - fantasy theme */
|
|
.rpg-panel[data-theme="fantasy"] .checkbox_label input[type="radio"],
|
|
.rpg-settings-popup[data-theme="fantasy"] .checkbox_label input[type="radio"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
/* Radio buttons - cyberpunk theme */
|
|
.rpg-panel[data-theme="cyberpunk"] .checkbox_label input[type="radio"],
|
|
.rpg-settings-popup[data-theme="cyberpunk"] .checkbox_label input[type="radio"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
/* Radio buttons - custom theme */
|
|
.rpg-panel[data-theme="custom"] .checkbox_label input[type="radio"],
|
|
.rpg-settings-popup[data-theme="custom"] .checkbox_label input[type="radio"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
/* All radio buttons (including those not in checkbox_label) - default theme */
|
|
.rpg-settings-popup input[type="radio"],
|
|
#rpg-tracker-editor-popup input[type="radio"] {
|
|
accent-color: #666 !important;
|
|
color-scheme: dark;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.rpg-settings-popup input[type="radio"]:checked,
|
|
#rpg-tracker-editor-popup input[type="radio"]:checked {
|
|
background-color: #666 !important;
|
|
}
|
|
|
|
/* All radio buttons - sci-fi theme */
|
|
.rpg-settings-popup[data-theme="sci-fi"] input[type="radio"],
|
|
#rpg-tracker-editor-popup[data-theme="sci-fi"] input[type="radio"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
color-scheme: dark;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.rpg-settings-popup[data-theme="sci-fi"] input[type="radio"]:checked,
|
|
#rpg-tracker-editor-popup[data-theme="sci-fi"] input[type="radio"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
/* All radio buttons - fantasy theme */
|
|
.rpg-settings-popup[data-theme="fantasy"] input[type="radio"],
|
|
#rpg-tracker-editor-popup[data-theme="fantasy"] input[type="radio"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
color-scheme: dark;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.rpg-settings-popup[data-theme="fantasy"] input[type="radio"]:checked,
|
|
#rpg-tracker-editor-popup[data-theme="fantasy"] input[type="radio"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
/* All radio buttons - cyberpunk theme */
|
|
.rpg-settings-popup[data-theme="cyberpunk"] input[type="radio"],
|
|
#rpg-tracker-editor-popup[data-theme="cyberpunk"] input[type="radio"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
color-scheme: dark;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.rpg-settings-popup[data-theme="cyberpunk"] input[type="radio"]:checked,
|
|
#rpg-tracker-editor-popup[data-theme="cyberpunk"] input[type="radio"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
/* All radio buttons - custom theme */
|
|
.rpg-settings-popup[data-theme="custom"] input[type="radio"],
|
|
#rpg-tracker-editor-popup[data-theme="custom"] input[type="radio"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
color-scheme: dark;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.rpg-settings-popup[data-theme="custom"] input[type="radio"]:checked,
|
|
#rpg-tracker-editor-popup[data-theme="custom"] input[type="radio"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
/* Tracker Editor checkboxes (not wrapped in checkbox_label) */
|
|
#rpg-tracker-editor-popup input[type="checkbox"] {
|
|
accent-color: #666 !important;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup input[type="checkbox"]:checked {
|
|
background-color: #666 !important;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup[data-theme="sci-fi"] input[type="checkbox"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup[data-theme="sci-fi"] input[type="checkbox"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup[data-theme="fantasy"] input[type="checkbox"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup[data-theme="fantasy"] input[type="checkbox"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup[data-theme="cyberpunk"] input[type="checkbox"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup[data-theme="cyberpunk"] input[type="checkbox"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup[data-theme="custom"] input[type="checkbox"] {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup[data-theme="custom"] input[type="checkbox"]:checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
/* Panel checkboxes (not wrapped in checkbox_label) */
|
|
.rpg-panel input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]) {
|
|
accent-color: #666 !important;
|
|
}
|
|
|
|
.rpg-panel input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]):checked {
|
|
background-color: #666 !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]) {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]):checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]) {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]):checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]) {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]):checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="custom"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]) {
|
|
accent-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.rpg-panel[data-theme="custom"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]):checked {
|
|
background-color: var(--rpg-highlight) !important;
|
|
}
|
|
|
|
.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: clamp(1.063rem, 1.4vw, 1.4rem);
|
|
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: clamp(0.938rem, 1.2vw, 1.2rem);
|
|
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);
|
|
}
|
|
|
|
/* Reset FAB Positions Button - Similar to clear cache but different color */
|
|
.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: clamp(0.938rem, 1.2vw, 1.2rem);
|
|
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);
|
|
}
|
|
|
|
/* Customize Prompts Button - Neutral gray style */
|
|
.rpg-btn-customize-prompts {
|
|
width: 100%;
|
|
padding: 0.625em;
|
|
background: rgba(128, 128, 128, 0.2);
|
|
border: 2px solid rgba(128, 128, 128, 0.5);
|
|
border-radius: 0.5em;
|
|
color: #aaa;
|
|
font-size: clamp(0.938rem, 1.2vw, 1.2rem);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5em;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rpg-btn-customize-prompts:hover {
|
|
background: rgba(128, 128, 128, 0.3);
|
|
border-color: rgba(128, 128, 128, 0.8);
|
|
color: #ccc;
|
|
transform: translateY(-0.062rem);
|
|
}
|
|
|
|
.rpg-btn-customize-prompts:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Memory Recollection styles removed - feature deprecated */
|
|
|
|
.rpg-memory-modal-header h3 {
|
|
margin: 0;
|
|
color: var(--SmartThemeBodyColor, #eaeaea);
|
|
font-size: 1.25em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Modal Body */
|
|
.rpg-memory-modal-body {
|
|
padding: 1.5em;
|
|
color: var(--SmartThemeBodyColor, #eaeaea);
|
|
}
|
|
|
|
.rpg-memory-modal-body p {
|
|
margin: 0.75em 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.rpg-memory-modal-info {
|
|
background: var(--rpg-border, rgba(102, 126, 234, 0.1));
|
|
padding: 1em;
|
|
border-radius: 8px;
|
|
border-left: 4px solid var(--rpg-border, var(--SmartThemeBorderColor, #4a7ba7));
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.rpg-memory-modal-hint {
|
|
font-size: 0.85em;
|
|
color: #999;
|
|
}
|
|
|
|
/* Progress Elements */
|
|
.rpg-memory-progress-text {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.rpg-memory-progress-bar {
|
|
width: 100%;
|
|
height: 30px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.rpg-memory-progress-fill {
|
|
height: 100%;
|
|
width: 0%;
|
|
background: linear-gradient(90deg, var(--rpg-border, #4a7ba7) 0%, var(--rpg-highlight, #e94560) 100%);
|
|
transition: width 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.rpg-memory-status {
|
|
margin-top: 1em;
|
|
padding: 0.75em;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 6px;
|
|
font-size: 0.9em;
|
|
color: #999;
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Modal Footer */
|
|
.rpg-memory-modal-footer {
|
|
padding: 1em 1.25em;
|
|
border-top: 1px solid var(--rpg-border, var(--SmartThemeBorderColor, #4a7ba7));
|
|
display: flex;
|
|
gap: 0.75em;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* Modal Buttons */
|
|
.rpg-memory-modal-btn {
|
|
padding: 0.625em 1.25em;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.rpg-memory-cancel {
|
|
background: rgba(220, 53, 69, 0.2);
|
|
color: #ff6b6b;
|
|
border: 2px solid rgba(220, 53, 69, 0.5);
|
|
}
|
|
|
|
.rpg-memory-cancel:hover {
|
|
background: rgba(220, 53, 69, 0.3);
|
|
border-color: rgba(220, 53, 69, 0.8);
|
|
}
|
|
|
|
.rpg-memory-proceed {
|
|
background: linear-gradient(135deg, var(--rpg-border, #4a7ba7) 0%, var(--rpg-highlight, #e94560) 100%);
|
|
color: white;
|
|
border: 2px solid var(--rpg-border-transparent, rgba(74, 123, 167, 0.5));
|
|
}
|
|
|
|
.rpg-memory-proceed:hover {
|
|
background: linear-gradient(135deg, var(--rpg-highlight, #e94560) 0%, var(--rpg-border, #4a7ba7) 100%);
|
|
border-color: var(--rpg-border-opaque, rgba(74, 123, 167, 0.8));
|
|
box-shadow: 0 4px 12px var(--rpg-border-transparent, rgba(74, 123, 167, 0.3));
|
|
}
|
|
|
|
/* Lorebook Limiter styles removed - feature deprecated */
|
|
|
|
/* ============================================
|
|
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-mobile-toggle[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-mobile-toggle[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: clamp(1rem, 1.5vw, 1.5rem);
|
|
}
|
|
|
|
.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-mobile-toggle[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%
|
|
);
|
|
}
|
|
|
|
/* ============================================
|
|
THEME SUPPORT FOR ALL PANEL ELEMENTS
|
|
============================================ */
|
|
|
|
/* Apply theme colors to tabs navigation */
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-tabs-nav,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-tabs-nav,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-tabs-nav {
|
|
border-bottom-color: var(--rpg-border);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-tab-btn,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-tab-btn,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-tab-btn {
|
|
background: var(--rpg-accent);
|
|
border-color: var(--rpg-border);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-tab-btn:hover,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-tab-btn:hover,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-tab-btn:hover {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-tab-btn.active,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-tab-btn.active,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-tab-btn.active {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-bg);
|
|
}
|
|
|
|
/* Apply theme colors to inventory subtabs */
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-subtabs,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-subtabs,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-subtabs {
|
|
border-bottom-color: var(--rpg-border);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-subtab,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-subtab,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-subtab {
|
|
border-color: var(--rpg-border);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-subtab:hover,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-subtab:hover,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-subtab:hover {
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-subtab.active,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-subtab.active,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-subtab.active {
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
/* Apply theme colors to quests subtabs */
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quests-subtabs,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quests-subtabs,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quests-subtabs {
|
|
border-bottom-color: var(--rpg-border);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quests-subtab,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quests-subtab,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quests-subtab {
|
|
border-color: var(--rpg-border);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quests-subtab:hover,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quests-subtab:hover,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quests-subtab:hover {
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quests-subtab.active,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quests-subtab.active,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quests-subtab.active {
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
/* Apply theme colors to storage locations */
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-storage-location,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-storage-location,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-storage-location {
|
|
border-color: var(--rpg-border);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-storage-header,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-storage-header,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-storage-header {
|
|
background: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-storage-content,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-storage-content,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-storage-content {
|
|
background: var(--rpg-accent);
|
|
}
|
|
|
|
/* Apply theme colors to buttons */
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-edit-btn,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-add-btn,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-remove-btn,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quest-edit,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quest-remove,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-add-quest-btn,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-edit-btn,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-add-btn,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-remove-btn,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quest-edit,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quest-remove,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-add-quest-btn,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-edit-btn,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-add-btn,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-remove-btn,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-edit,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-remove,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-add-quest-btn {
|
|
background: var(--rpg-accent);
|
|
border-color: var(--rpg-border);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-add-btn,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-add-quest-btn,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-add-btn,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-add-quest-btn,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-add-btn,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-add-quest-btn {
|
|
background: transparent;
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
/* Apply theme colors to inventory/quest items */
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-text,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quest-item,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-main-quest-display,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-text,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quest-item,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-main-quest-display,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-text,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-item,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-main-quest-display {
|
|
background: var(--rpg-accent);
|
|
border-color: var(--rpg-border);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quest-item:hover,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quest-item:hover,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-item:hover {
|
|
border-color: var(--rpg-highlight);
|
|
}
|
|
|
|
/* Apply theme colors to hints and empty states */
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-hint,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quest-hint,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-empty,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quest-empty,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-hint,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quest-hint,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inventory-empty,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quest-empty,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-hint,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-hint,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-empty,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-empty {
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
/* Apply theme colors to input fields */
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inline-input,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quest-edit-form input,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quest-edit-form textarea,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inline-input,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quest-edit-form input,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quest-edit-form textarea,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inline-input,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-edit-form input,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-edit-form textarea {
|
|
background: var(--rpg-bg);
|
|
border-color: var(--rpg-border);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-inline-input:focus,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quest-edit-form input:focus,
|
|
.rpg-panel[data-theme="sci-fi"] .rpg-quest-edit-form textarea:focus,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-inline-input:focus,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quest-edit-form input:focus,
|
|
.rpg-panel[data-theme="fantasy"] .rpg-quest-edit-form textarea:focus,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-inline-input:focus,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-edit-form input:focus,
|
|
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-edit-form textarea:focus {
|
|
border-color: var(--rpg-highlight);
|
|
}
|
|
|
|
/* ============================================
|
|
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: clamp(1.125rem, 1.5vw, 1.5rem);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
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: clamp(0.875rem, 1.1vw, 1.1rem);
|
|
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: clamp(0.875rem, 1.1vw, 1.1rem);
|
|
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 buttons row (Edit Trackers + Settings side by side) */
|
|
.rpg-settings-buttons-row {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
width: 100%;
|
|
}
|
|
|
|
.rpg-btn-half {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
TRACKER EDITOR MODAL
|
|
============================================ */
|
|
|
|
/* Preset Management Section */
|
|
.rpg-preset-management {
|
|
padding: 0.75em 1em;
|
|
background: var(--rpg-accent);
|
|
border-bottom: 2px solid var(--rpg-border);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.rpg-preset-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.rpg-preset-row label {
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rpg-preset-row .rpg-select {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
max-width: 250px;
|
|
height: 2.2em;
|
|
padding: 0 0.6em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.rpg-preset-row .rpg-btn-icon {
|
|
height: 2.2em;
|
|
width: 2.2em;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.9em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-preset-row .rpg-btn-icon.rpg-btn-active {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
color: white;
|
|
}
|
|
|
|
.rpg-preset-association-row {
|
|
margin-top: 0.5em;
|
|
padding-top: 0.5em;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.rpg-preset-association-row .checkbox_label {
|
|
margin: 0;
|
|
font-size: 0.85em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.rpg-preset-association-row .checkbox_label strong {
|
|
color: var(--rpg-highlight);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Editor tabs */
|
|
.rpg-editor-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 2px solid var(--rpg-border);
|
|
}
|
|
|
|
.rpg-editor-tab {
|
|
flex: 1;
|
|
padding: 0.75em 1em;
|
|
background: var(--rpg-accent);
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
color: var(--rpg-text);
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.rpg-editor-tab:hover {
|
|
background: var(--rpg-bg);
|
|
}
|
|
|
|
.rpg-editor-tab.active {
|
|
background: var(--rpg-bg);
|
|
border-bottom-color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-editor-tab-content {
|
|
max-height: none;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
.rpg-editor-section {
|
|
padding: 1em 0;
|
|
}
|
|
|
|
.rpg-editor-section h4 {
|
|
color: var(--rpg-highlight);
|
|
margin: 1em 0 0.5em 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.rpg-editor-section h4:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.rpg-editor-hint {
|
|
font-size: 0.9em;
|
|
color: var(--rpg-text);
|
|
opacity: 0.7;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* Stats list */
|
|
.rpg-editor-stats-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.rpg-editor-stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding: 0.5em;
|
|
background: var(--rpg-accent);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
}
|
|
|
|
.rpg-stat-toggle {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-stat-name {
|
|
flex: 1;
|
|
padding: 0.375em 0.5em;
|
|
background: var(--rpg-bg);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.25em;
|
|
color: var(--rpg-text);
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.rpg-stat-remove,
|
|
.rpg-attr-remove,
|
|
.rpg-remove-relationship {
|
|
flex-shrink: 0;
|
|
padding: 0.375em 0.625em;
|
|
background: var(--rpg-highlight);
|
|
border: none;
|
|
border-radius: 0.25em;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.rpg-stat-remove:hover,
|
|
.rpg-attr-remove:hover,
|
|
.rpg-remove-relationship:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* RPG Attributes editor styles (same as custom stats) */
|
|
.rpg-attr-toggle {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-attr-name {
|
|
flex: 1;
|
|
padding: 0.375em 0.5em;
|
|
background: var(--rpg-bg);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.25em;
|
|
color: var(--rpg-text);
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.rpg-attr-remove {
|
|
flex-shrink: 0;
|
|
padding: 0.375em 0.625em;
|
|
background: var(--rpg-highlight);
|
|
border: none;
|
|
border-radius: 0.25em;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.rpg-attr-remove:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Toggle rows */
|
|
.rpg-editor-toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
margin: 0.75em 0;
|
|
}
|
|
|
|
.rpg-editor-toggle-row input[type="checkbox"] {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-editor-toggle-row label {
|
|
flex: 1;
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
/* Text inputs */
|
|
.rpg-text-input {
|
|
width: 100%;
|
|
padding: 0.5em;
|
|
background: var(--rpg-bg);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
color: var(--rpg-text);
|
|
font-size: 0.95em;
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
/* Widget rows */
|
|
.rpg-editor-widget-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75em;
|
|
padding: 0.625em;
|
|
background: var(--rpg-accent);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.rpg-editor-widget-row input[type="checkbox"] {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-editor-widget-row label {
|
|
flex: 1;
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-select-mini {
|
|
padding: 0.375em 0.5em;
|
|
background: var(--rpg-bg);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.25em;
|
|
color: var(--rpg-text);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.rpg-radio-group {
|
|
display: flex;
|
|
gap: 1em;
|
|
}
|
|
|
|
.rpg-radio-group label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375em;
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
/* Character fields list */
|
|
.rpg-editor-fields-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* Relationship Mapping Styles */
|
|
.rpg-relationship-mapping-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.rpg-relationship-item {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 80px auto;
|
|
align-items: center;
|
|
gap: 0.75em;
|
|
padding: 0.5em;
|
|
background: var(--rpg-accent);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
}
|
|
|
|
.rpg-relationship-name,
|
|
.rpg-relationship-emoji {
|
|
padding: 0.375em 0.5em;
|
|
background: var(--rpg-bg);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.25em;
|
|
color: var(--rpg-text);
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.rpg-relationship-emoji {
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.rpg-arrow {
|
|
color: var(--rpg-highlight);
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* Thoughts Configuration Input Groups */
|
|
.rpg-thoughts-config {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1em;
|
|
margin-top: 0.75em;
|
|
}
|
|
|
|
.rpg-editor-input-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375em;
|
|
}
|
|
|
|
.rpg-editor-input-group label {
|
|
font-size: 0.9em;
|
|
color: var(--rpg-text);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.rpg-editor-input-group input[type="text"] {
|
|
width: 100%;
|
|
padding: 0.5em;
|
|
background: var(--rpg-accent);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.25em;
|
|
color: var(--rpg-text);
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
/* History Persistence inputs/selects - match tracker editor styling */
|
|
#rpg-tracker-editor-popup .rpg-input,
|
|
#rpg-tracker-editor-popup .rpg-select {
|
|
padding: 0.5em;
|
|
background: var(--rpg-accent);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.25em;
|
|
color: var(--rpg-text);
|
|
font-size: 0.95em;
|
|
text-align: left;
|
|
margin-left: 0 !important;
|
|
display: block;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup .rpg-input:focus,
|
|
#rpg-tracker-editor-popup .rpg-select:focus {
|
|
outline: none;
|
|
border-color: var(--rpg-highlight);
|
|
box-shadow: 0 0 5px rgba(var(--rpg-highlight-rgb), 0.3);
|
|
}
|
|
|
|
.rpg-editor-field-item {
|
|
display: grid;
|
|
grid-template-columns: auto auto 1fr 2fr auto;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding: 0.5em;
|
|
background: var(--rpg-accent);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
min-width: 0; /* Allow grid items to shrink below content size */
|
|
}
|
|
|
|
.rpg-field-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.rpg-field-move-up,
|
|
.rpg-field-move-down {
|
|
padding: 0.125em 0.375em;
|
|
background: var(--rpg-bg);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.25em;
|
|
color: var(--rpg-text);
|
|
cursor: pointer;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.rpg-field-move-up:disabled,
|
|
.rpg-field-move-down:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.rpg-field-toggle {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-field-label,
|
|
.rpg-char-stat-label,
|
|
.rpg-field-placeholder {
|
|
padding: 0.375em 0.5em;
|
|
background: var(--rpg-bg);
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.25em;
|
|
color: var(--rpg-text);
|
|
font-size: 0.95em;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: 0; /* Allow input to shrink */
|
|
width: 100%; /* Fill available grid space */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rpg-field-remove,
|
|
.rpg-remove-relationship {
|
|
flex-shrink: 0;
|
|
padding: 0.375em 0.625em;
|
|
background: var(--rpg-highlight);
|
|
border: none;
|
|
border-radius: 0.25em;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.rpg-field-remove:hover,
|
|
.rpg-remove-relationship:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Character stats checkboxes */
|
|
.rpg-char-stats-checkboxes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1em;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.rpg-char-stats-checkboxes label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375em;
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
/* Footer buttons */
|
|
.rpg-settings-popup-footer {
|
|
padding: 1em;
|
|
border-top: 2px solid var(--rpg-border);
|
|
background: var(--rpg-accent);
|
|
}
|
|
|
|
.rpg-editor-footer-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75em;
|
|
}
|
|
|
|
.rpg-editor-footer-row {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
justify-content: center;
|
|
}
|
|
|
|
.rpg-editor-footer-row:last-child button {
|
|
flex: 1;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.rpg-footer-left {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.rpg-footer-right {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
/* Prompts Editor Styles */
|
|
.rpg-prompt-editor-section {
|
|
margin-bottom: 24px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid var(--rpg-border);
|
|
}
|
|
|
|
.rpg-prompt-editor-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.rpg-prompt-textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
background: var(--SmartThemeBlurTintColor);
|
|
color: var(--SmartThemeBodyColor);
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
resize: vertical;
|
|
line-height: 1.5;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rpg-prompt-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--rpg-highlight);
|
|
box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2);
|
|
}
|
|
|
|
.rpg-restore-prompt-btn {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Editor buttons */
|
|
.rpg-btn-primary,
|
|
.rpg-btn-secondary,
|
|
.rpg-btn-cancel,
|
|
.rpg-btn-reset {
|
|
padding: 0.625em 1.25em;
|
|
border: 1px solid var(--rpg-border);
|
|
border-radius: 0.375em;
|
|
cursor: pointer;
|
|
font-size: 0.95em;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.rpg-btn-primary {
|
|
background: var(--rpg-highlight);
|
|
color: white;
|
|
border-color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-btn-primary:hover {
|
|
opacity: 0.9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.rpg-btn-secondary {
|
|
background: var(--rpg-bg);
|
|
color: var(--rpg-text);
|
|
border-color: var(--rpg-border);
|
|
}
|
|
|
|
.rpg-btn-secondary:hover {
|
|
background: var(--rpg-accent);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.rpg-btn-cancel {
|
|
background: var(--rpg-accent);
|
|
color: var(--rpg-text);
|
|
border-color: var(--rpg-border);
|
|
}
|
|
|
|
.rpg-btn-cancel:hover {
|
|
background: var(--rpg-bg);
|
|
}
|
|
|
|
.rpg-btn-reset {
|
|
background: transparent;
|
|
color: var(--rpg-text);
|
|
border-color: var(--rpg-border);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.rpg-btn-reset:hover {
|
|
opacity: 1;
|
|
background: var(--rpg-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
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);
|
|
border-left: none !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.rpg-settings-popup-header h3 i {
|
|
border-left: none !important;
|
|
padding-left: 0 !important;
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
/* Close button - touch-friendly */
|
|
.rpg-popup-close {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--rpg-text);
|
|
font-size: clamp(1.5rem, 2.2vw, 2.2rem);
|
|
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;
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
/* 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 - Default Theme (no data-theme attribute) */
|
|
.rpg-settings-popup-content {
|
|
--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: #6b9fd4;
|
|
}
|
|
|
|
/* Theme Support - Settings Modal */
|
|
#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;
|
|
background: rgba(10, 14, 39, 0.95);
|
|
color: #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;
|
|
background: rgba(43, 24, 16, 0.95);
|
|
color: #f4e4c1;
|
|
}
|
|
|
|
#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;
|
|
background: rgba(13, 2, 33, 0.95);
|
|
color: #00ff9f;
|
|
}
|
|
|
|
/* Theme Support - Tracker Editor Modal */
|
|
#rpg-tracker-editor-popup[data-theme="sci-fi"] .rpg-settings-popup-content {
|
|
--rpg-bg: #0a0e27;
|
|
--rpg-accent: #1a1f3a;
|
|
--rpg-text: #00ffff;
|
|
--rpg-highlight: #ff00ff;
|
|
--rpg-border: #00ffff;
|
|
background: rgba(10, 14, 39, 0.95);
|
|
color: #00ffff;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup[data-theme="fantasy"] .rpg-settings-popup-content {
|
|
--rpg-bg: #2b1810;
|
|
--rpg-accent: #3d2516;
|
|
--rpg-text: #f4e4c1;
|
|
--rpg-highlight: #d4af37;
|
|
--rpg-border: #8b6914;
|
|
background: rgba(43, 24, 16, 0.95);
|
|
color: #f4e4c1;
|
|
}
|
|
|
|
#rpg-tracker-editor-popup[data-theme="cyberpunk"] .rpg-settings-popup-content {
|
|
--rpg-bg: #0d0221;
|
|
--rpg-accent: #1a0b2e;
|
|
--rpg-text: #00ff9f;
|
|
--rpg-highlight: #ff00ff;
|
|
--rpg-border: #ff00ff;
|
|
background: rgba(13, 2, 33, 0.95);
|
|
color: #00ff9f;
|
|
}
|
|
|
|
/* 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: 350px; /* Fixed max like panels, will be constrained by viewport */
|
|
width: auto;
|
|
transform: translateY(0); /* No vertical centering - align with avatar top */
|
|
animation: thoughtPanelFadeIn 0.4s ease-out;
|
|
}
|
|
|
|
/* Collapsed thought icon */
|
|
#rpg-thought-icon {
|
|
position: fixed;
|
|
z-index: 1000; /* Lower z-index to stay below dropdown menus */
|
|
display: none; /* Hidden by default in desktop */
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: var(--rpg-bg, rgba(30, 30, 50, 0.95));
|
|
border: 2px solid var(--rpg-highlight, #e94560);
|
|
color: var(--rpg-text, #ecf0f1);
|
|
font-size: clamp(1.25rem, 1.85vw, 1.875rem);
|
|
cursor: move;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(10px);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
/* Show icon only in mobile view */
|
|
@media (max-width: 1000px) {
|
|
#rpg-thought-icon {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
/* Force hide class for desktop mode - overrides media query (unless collapsed) */
|
|
#rpg-thought-icon.rpg-force-hide:not(.rpg-collapsed-desktop) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* When collapsed in desktop, show icon */
|
|
#rpg-thought-icon.rpg-collapsed-desktop {
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Hidden state that allows transitions */
|
|
#rpg-thought-icon.rpg-hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#rpg-thought-icon.dragging {
|
|
transition: none !important;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
#rpg-thought-icon:not(.dragging):hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 6px 20px rgba(233, 69, 96, 0.4);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Show close button in desktop view for collapsing */
|
|
@media (min-width: 1001px) {
|
|
.rpg-thought-close {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
@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: row-reverse; /* Horizontal layout, flipped */
|
|
align-items: center; /* Center vertically */
|
|
gap: 0.5em;
|
|
inset: 0px -50px auto;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Flip thought circles to left side when panel is on left */
|
|
.rpg-thought-panel-right .rpg-thought-circles {
|
|
inset: 0px auto auto -50px;
|
|
flex-direction: row; /* Normal order for left side */
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.rpg-circle-2 {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.rpg-circle-3 {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
/* 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: calc(100vh - 120px); /* Scale with viewport height */
|
|
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: 1000px) {
|
|
#rpg-thought-panel {
|
|
position: fixed !important;
|
|
max-width: 90vw !important;
|
|
width: 90vw !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
max-height: calc(100dvh - 80px) !important;
|
|
}
|
|
|
|
#rpg-thought-panel .rpg-thought-bubble {
|
|
max-height: calc(100dvh - 100px) !important;
|
|
overflow-y: auto !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(--rpg-bg, rgba(30, 30, 50, 0.95));
|
|
border: 2px solid var(--rpg-highlight, #e94560);
|
|
color: var(--rpg-text, #ecf0f1);
|
|
font-size: clamp(1.25rem, 1.85vw, 1.875rem);
|
|
cursor: move;
|
|
z-index: 10002;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(10px);
|
|
transition: transform 0.2s ease, box-shadow 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 */
|
|
}
|
|
|
|
/* Center the icon inside */
|
|
.rpg-mobile-toggle i {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Disable transitions while actively dragging */
|
|
.rpg-mobile-toggle.dragging {
|
|
transition: none !important;
|
|
cursor: grabbing;
|
|
animation: none;
|
|
}
|
|
|
|
.rpg-mobile-toggle:not(.dragging):hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 6px 20px rgba(233, 69, 96, 0.4);
|
|
}
|
|
|
|
.rpg-mobile-toggle:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.rpg-mobile-toggle.active {
|
|
background: var(--rpg-highlight, #e74c3c);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* FAB Spinning animation during API requests */
|
|
.rpg-mobile-toggle.rpg-fab-loading i {
|
|
animation: fa-spin 1s infinite linear;
|
|
}
|
|
|
|
.rpg-mobile-toggle.rpg-fab-loading {
|
|
box-shadow: 0 0 12px rgba(233, 69, 96, 0.6), 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Hide FAB widgets when panel is open */
|
|
body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Mobile overlay backdrop */
|
|
.rpg-mobile-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 998;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Mobile-specific panel behavior - matches SillyTavern's 1000px breakpoint */
|
|
/* CACHE BUST v2025-01-16 */
|
|
@media (max-width: 1000px) {
|
|
/* ========================================
|
|
MOBILE PANEL FOUNDATION
|
|
======================================== */
|
|
|
|
/* Show the mobile FAB toggle button */
|
|
.rpg-mobile-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
/* Hide FAB when panel is open */
|
|
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-toggle {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hide internal collapse toggle when panel is closed on mobile */
|
|
.rpg-collapse-toggle {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Show internal collapse toggle when panel is open on mobile */
|
|
.rpg-panel.rpg-mobile-open .rpg-collapse-toggle {
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Show overlay when needed */
|
|
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-overlay {
|
|
display: block;
|
|
}
|
|
|
|
/* Remove margin adjustments on mobile - content takes full width */
|
|
body:has(.rpg-panel) #sheld {
|
|
margin-right: 0 !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
/* Mobile panel - slide from right like desktop */
|
|
.rpg-panel {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
right: 0 !important;
|
|
bottom: 0 !important;
|
|
left: auto !important;
|
|
|
|
/* Mobile panel sizing */
|
|
width: 85vw !important;
|
|
height: 100dvh !important;
|
|
|
|
/* Hidden by default - completely removed from layout */
|
|
display: none !important;
|
|
|
|
overflow: visible !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);
|
|
}
|
|
|
|
/* Allow collapse button to show outside panel */
|
|
.rpg-game-container {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* But keep content scrollable */
|
|
#rpg-panel-content {
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
/* Show panel when opened with slide-in animation */
|
|
.rpg-panel.rpg-mobile-open {
|
|
display: block !important;
|
|
z-index: 9999;
|
|
animation: rpgSlideInFromRight 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Closing animation - slide out to right */
|
|
.rpg-panel.rpg-mobile-closing {
|
|
display: block !important;
|
|
z-index: 9999;
|
|
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%);
|
|
}
|
|
}
|
|
|
|
/* Slide-in animation from left */
|
|
@keyframes rpgSlideInFromLeft {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Slide-out animation to left */
|
|
@keyframes rpgSlideOutToLeft {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
/* Left-side mobile panel positioning */
|
|
.rpg-panel.rpg-position-left {
|
|
right: auto !important;
|
|
left: 0 !important;
|
|
border-radius: 0 20px 0 0;
|
|
border-left: none;
|
|
border-right: 1px solid var(--SmartThemeBorderColor);
|
|
box-shadow: 5px 0 20px var(--rpg-shadow);
|
|
}
|
|
|
|
/* Left-side panel animations */
|
|
.rpg-panel.rpg-position-left.rpg-mobile-open {
|
|
animation: rpgSlideInFromLeft 0.3s ease-in-out;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-left.rpg-mobile-closing {
|
|
animation: rpgSlideOutToLeft 0.3s ease-in-out;
|
|
}
|
|
|
|
/* ========================================
|
|
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 - positioned on panel edge and vertically centered */
|
|
.rpg-collapse-toggle {
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
width: 44px;
|
|
height: 44px;
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
border-radius: 50%;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 2px solid var(--SmartThemeBorderColor);
|
|
z-index: 10000 !important;
|
|
transition: all 0.2s ease;
|
|
pointer-events: auto !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
/* Position on right edge when panel is on left */
|
|
body.rpg-panel-position-left .rpg-collapse-toggle,
|
|
.rpg-panel.rpg-position-left .rpg-collapse-toggle {
|
|
left: auto !important;
|
|
right: -22px !important;
|
|
}
|
|
|
|
/* Position on left edge when panel is on right */
|
|
body.rpg-panel-position-right .rpg-collapse-toggle,
|
|
.rpg-panel.rpg-position-right .rpg-collapse-toggle {
|
|
left: -22px !important;
|
|
right: auto !important;
|
|
}
|
|
|
|
.rpg-collapse-toggle:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
transform: translateY(-50%) scale(1.05) !important;
|
|
}
|
|
|
|
.rpg-collapse-toggle:active {
|
|
transform: translateY(-50%) 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;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/* 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;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Center empty state messages in mobile tabs - only when empty */
|
|
.rpg-mobile-tab-content #rpg-user-stats:has(> .rpg-inventory-empty) {
|
|
display: flex !important;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* When empty state is shown, center it in the full panel */
|
|
.rpg-mobile-tab-content #rpg-user-stats > .rpg-inventory-empty {
|
|
margin: auto;
|
|
}
|
|
|
|
.rpg-mobile-tab-content .rpg-inventory-empty {
|
|
text-align: center;
|
|
width: auto !important;
|
|
}
|
|
|
|
@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 {
|
|
display: grid;
|
|
grid-template-rows: minmax(min-content, auto) minmax(min-content, 1fr);
|
|
gap: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 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 {
|
|
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 {
|
|
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 {
|
|
height: auto !important; /* Remove desktop height constraint */
|
|
display: flex !important;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.rpg-dashboard-row-2 {
|
|
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: min(2.5vw, 14px) !important;
|
|
}
|
|
|
|
.rpg-calendar-year {
|
|
font-size: clamp(7px, 1.8vw, 10px) !important;
|
|
}
|
|
|
|
.rpg-weather-forecast {
|
|
font-size: min(2.2vw, 0.6875rem) !important;
|
|
}
|
|
|
|
.rpg-temp-value {
|
|
font-size: min(2.5vw, 0.8125rem) !important;
|
|
}
|
|
|
|
.rpg-time-value {
|
|
font-size: min(2.5vw, 0.8125rem) !important;
|
|
}
|
|
|
|
.rpg-time-range {
|
|
gap: 0.15em;
|
|
}
|
|
|
|
.rpg-time-separator {
|
|
font-size: min(2vw, 0.625rem) !important;
|
|
}
|
|
|
|
.rpg-location-text {
|
|
font-size: min(2.8vw, 0.875rem) !important;
|
|
}
|
|
|
|
.rpg-map-marker {
|
|
font-size: clamp(16px, 4.1vw, 20px) !important;
|
|
}
|
|
|
|
/* Recent Events widget - mobile text sizing */
|
|
.rpg-notebook-header {
|
|
gap: clamp(26px, 6vw, 30px);
|
|
padding: clamp(5px, 1.5vw, 7px) 0;
|
|
}
|
|
|
|
.rpg-notebook-ring {
|
|
width: clamp(8px, 1.25vw, 10px);
|
|
height: clamp(8px, 1.25vw, 10px);
|
|
}
|
|
|
|
.rpg-notebook-title {
|
|
font-size: clamp(9px, 2.2vw, 11px) !important;
|
|
}
|
|
|
|
.rpg-bullet {
|
|
font-size: clamp(9px, 2.2vw, 11px) !important;
|
|
}
|
|
|
|
.rpg-event-text {
|
|
font-size: clamp(11px, 2.8vw, 14px) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE STATS TAB LAYOUT IMPROVEMENTS
|
|
======================================== */
|
|
|
|
/* Make the entire stats section a single column grid */
|
|
.rpg-stats-section {
|
|
display: grid !important;
|
|
grid-template-columns: 1fr !important; /* Single column */
|
|
grid-template-rows: auto !important; /* Auto rows - everything stacked */
|
|
gap: 12px;
|
|
padding: 16px 12px;
|
|
overflow-y: auto !important; /* Enable scrolling on the grid container */
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Use display: contents so children participate in grid */
|
|
.rpg-stats-header,
|
|
.rpg-stats-content {
|
|
display: contents !important;
|
|
}
|
|
|
|
/* Portrait row - centered at top, row 1 */
|
|
.rpg-stats-header-left,
|
|
.rpg-user-info-row {
|
|
display: flex !important;
|
|
grid-column: 1 !important;
|
|
grid-row: 1 !important;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Make user portrait visible and sized for mobile */
|
|
.rpg-user-portrait {
|
|
width: clamp(32px, 8vw, 48px) !important;
|
|
height: clamp(32px, 8vw, 48px) !important;
|
|
}
|
|
|
|
/* Make user name and level readable */
|
|
.rpg-user-name {
|
|
font-size: clamp(13px, 3.2vw, 16px) !important;
|
|
}
|
|
|
|
.rpg-level-label,
|
|
.rpg-level-value {
|
|
font-size: clamp(12px, 3vw, 14px) !important;
|
|
}
|
|
|
|
/* Hide stats title on mobile */
|
|
.rpg-stats-title {
|
|
display: none;
|
|
}
|
|
|
|
/* Stats left container must use contents to unwrap its children */
|
|
.rpg-stats-left {
|
|
display: contents !important;
|
|
}
|
|
|
|
/* Stat bars - full width, row 2 */
|
|
.rpg-stats-grid {
|
|
grid-column: 1 !important;
|
|
grid-row: 2 !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
gap: clamp(6px, 1.5vw, 8px);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Everything else stacked below - full width, auto rows */
|
|
.rpg-mood,
|
|
.rpg-inventory-box,
|
|
.rpg-skills-section,
|
|
.rpg-custom-field {
|
|
grid-column: 1 !important;
|
|
grid-row: auto !important;
|
|
}
|
|
|
|
/* Attributes container - use contents to unwrap */
|
|
.rpg-stats-right {
|
|
display: contents !important;
|
|
}
|
|
|
|
/* Compact 2x3 or 3x2 grid for mobile */
|
|
.rpg-classic-stats-grid {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(3, 1fr) !important;
|
|
grid-template-rows: repeat(2, 1fr) !important;
|
|
gap: 6px;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Everything else below - full width stacked */
|
|
.rpg-inventory-box {
|
|
flex: 1 !important;
|
|
min-width: 0 !important;
|
|
max-width: none !important;
|
|
width: 100% !important;
|
|
grid-row: auto !important;
|
|
}
|
|
|
|
/* Inventory box */
|
|
.rpg-inventory-box {
|
|
flex: 1 !important;
|
|
min-width: 0 !important;
|
|
max-width: none !important;
|
|
width: auto !important;
|
|
min-height: 60px;
|
|
max-height: none;
|
|
}
|
|
|
|
/* 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;
|
|
white-space: normal !important;
|
|
}
|
|
|
|
/* Mood */
|
|
.rpg-mood {
|
|
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;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.rpg-skills-section {
|
|
font-size: clamp(11px, 2.8vw, 14px);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* ========================================
|
|
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 {
|
|
/* Match mobile toggle size */
|
|
width: 44px !important;
|
|
height: 44px !important;
|
|
font-size: clamp(1.25rem, 1.85vw, 1.875rem) !important;
|
|
/* Smooth animation for position changes during scroll */
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease !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 and custom fields on mobile */
|
|
.rpg-character-traits,
|
|
.rpg-character-field {
|
|
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;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE CHARACTER STATUS CARDS (DASHBOARD)
|
|
======================================== */
|
|
|
|
/* Larger, more readable character names in dashboard */
|
|
.rpg-char-name {
|
|
font-size: clamp(12px, 3.1vw, 16px) !important;
|
|
}
|
|
|
|
/* Larger, more readable character traits in dashboard */
|
|
.rpg-char-traits {
|
|
font-size: clamp(11px, 2.8vw, 14px) !important;
|
|
}
|
|
|
|
/* Larger character emoji in dashboard */
|
|
.rpg-char-emoji {
|
|
font-size: clamp(18px, 4.6vw, 24px) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE RECENT EVENTS - REDUCE HEIGHT
|
|
======================================== */
|
|
|
|
/* Make Recent Events section take less vertical space on mobile */
|
|
.rpg-dashboard-row-3 {
|
|
max-height: 100px !important; /* Limit height on mobile */
|
|
}
|
|
|
|
/* Make the events widget scrollable if content exceeds height */
|
|
.rpg-events-widget {
|
|
max-height: 100px !important;
|
|
}
|
|
|
|
/* Compact the notebook lines container */
|
|
.rpg-notebook-lines {
|
|
padding: 0.25em 0.5em !important;
|
|
gap: 0.1em !important;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Reduce spacing in notebook lines */
|
|
.rpg-notebook-line {
|
|
gap: 0.25em !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,
|
|
.rpg-btn-reset-fab,
|
|
.rpg-btn-customize-prompts {
|
|
font-size: clamp(13px, 3.3vw, 17px) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE TRACKER EDITOR FOOTER
|
|
======================================== */
|
|
|
|
/* Make footer wrap and stack buttons on mobile */
|
|
.rpg-settings-popup-footer {
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
padding: 0.75em;
|
|
}
|
|
|
|
.rpg-footer-left,
|
|
.rpg-footer-right {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: thin;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
/* Prevent buttons from shrinking in scroll container */
|
|
.rpg-footer-left button,
|
|
.rpg-footer-right button {
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
font-size: clamp(12px, 3.1vw, 15px) !important;
|
|
padding: 0.5em 0.75em !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE TRACKER EDITOR HEADER
|
|
======================================== */
|
|
|
|
/* Make header text smaller and wrap properly */
|
|
.rpg-settings-popup-header h3 {
|
|
font-size: clamp(16px, 4.1vw, 20px) !important;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.rpg-settings-popup-header h3 i {
|
|
font-size: clamp(14px, 3.6vw, 18px) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE TRACKER EDITOR TABS
|
|
======================================== */
|
|
|
|
/* Make tabs wrap and stack if needed */
|
|
.rpg-editor-tabs {
|
|
flex-wrap: wrap;
|
|
gap: 0;
|
|
}
|
|
|
|
.rpg-editor-tab {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
padding: 0.5em 0.5em;
|
|
font-size: clamp(11px, 2.8vw, 14px) !important;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.rpg-editor-tab i {
|
|
font-size: clamp(12px, 3.1vw, 15px) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE TRACKER EDITOR CONTENT
|
|
======================================== */
|
|
|
|
/* Reduce popup body padding on mobile */
|
|
.rpg-settings-popup-body {
|
|
padding: 0.75em !important;
|
|
}
|
|
|
|
/* Make section headers smaller */
|
|
.rpg-editor-section h4 {
|
|
font-size: clamp(13px, 3.3vw, 16px) !important;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.rpg-editor-section h4 i {
|
|
font-size: clamp(12px, 3.1vw, 15px) !important;
|
|
}
|
|
|
|
/* Make hint text smaller */
|
|
.rpg-editor-hint {
|
|
font-size: clamp(11px, 2.8vw, 14px) !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE TRACKER EDITOR STAT ITEMS
|
|
======================================== */
|
|
|
|
/* Make stat items wrap on mobile */
|
|
.rpg-editor-stat-item {
|
|
flex-wrap: wrap;
|
|
gap: 0.5em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
/* Make stat name input full width on mobile */
|
|
.rpg-stat-name,
|
|
.rpg-attr-name {
|
|
width: 100%;
|
|
flex: 1 1 100%;
|
|
font-size: clamp(13px, 3.3vw, 16px) !important;
|
|
}
|
|
|
|
/* Make toggle and remove button stay on same row */
|
|
.rpg-stat-toggle,
|
|
.rpg-attr-toggle {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.rpg-stat-remove,
|
|
.rpg-attr-remove {
|
|
flex: 0 0 auto;
|
|
font-size: clamp(12px, 3.1vw, 15px) !important;
|
|
padding: 0.5em 0.75em !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE RELATIONSHIP MAPPING
|
|
======================================== */
|
|
|
|
/* Make relationship items stack vertically on mobile */
|
|
.rpg-relationship-item {
|
|
grid-template-columns: 1fr;
|
|
gap: 0.5em;
|
|
padding: 0.75em 0.5em;
|
|
}
|
|
|
|
/* Hide arrow on mobile since items are stacked */
|
|
.rpg-relationship-item .rpg-arrow {
|
|
display: none;
|
|
}
|
|
|
|
/* Make relationship inputs full width */
|
|
.rpg-relationship-name,
|
|
.rpg-relationship-emoji {
|
|
width: 100%;
|
|
font-size: clamp(13px, 3.3vw, 16px) !important;
|
|
}
|
|
|
|
.rpg-remove-relationship {
|
|
font-size: clamp(12px, 3.1vw, 15px) !important;
|
|
padding: 0.5em 0.75em !important;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE TRACKER EDITOR INPUTS & CONTROLS
|
|
======================================== */
|
|
|
|
/* Make all input fields readable on mobile */
|
|
.rpg-editor-tab-content input[type="text"],
|
|
.rpg-editor-tab-content input[type="number"],
|
|
.rpg-editor-tab-content select,
|
|
.rpg-editor-tab-content textarea {
|
|
font-size: clamp(13px, 3.3vw, 16px) !important;
|
|
padding: 0.5em !important;
|
|
}
|
|
|
|
/* Make add buttons full width on mobile */
|
|
.rpg-editor-section button[id*="add"],
|
|
.rpg-editor-section button[id*="Add"] {
|
|
width: 100%;
|
|
font-size: clamp(13px, 3.3vw, 16px) !important;
|
|
padding: 0.5em !important;
|
|
}
|
|
|
|
/* Make checkboxes with labels easier to tap */
|
|
.rpg-editor-tab-content label {
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: clamp(13px, 3.3vw, 16px) !important;
|
|
}
|
|
|
|
.rpg-editor-tab-content input[type="checkbox"] {
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE WIDGET ROWS (DATE/TEMPERATURE)
|
|
======================================== */
|
|
|
|
/* Make widget rows wrap on mobile */
|
|
.rpg-editor-widget-row {
|
|
flex-wrap: wrap;
|
|
gap: 0.5em;
|
|
padding: 0.75em 0.5em;
|
|
}
|
|
|
|
/* Checkbox and main label on first row */
|
|
.rpg-editor-widget-row > input[type="checkbox"],
|
|
.rpg-editor-widget-row > label {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* Format dropdown full width on second row */
|
|
.rpg-editor-widget-row .rpg-select-mini {
|
|
flex: 1 1 100%;
|
|
width: 100%;
|
|
font-size: clamp(13px, 3.3vw, 16px) !important;
|
|
padding: 0.5em !important;
|
|
}
|
|
|
|
/* Radio group full width on second row */
|
|
.rpg-editor-widget-row .rpg-radio-group {
|
|
flex: 1 1 100%;
|
|
width: 100%;
|
|
gap: 1.5em;
|
|
justify-content: flex-start;
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.rpg-radio-group label {
|
|
font-size: clamp(13px, 3.3vw, 16px) !important;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.rpg-radio-group input[type="radio"] {
|
|
min-width: 18px;
|
|
min-height: 18px;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
min-height: 140px;
|
|
}
|
|
|
|
/* 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: clamp(1.25rem, 2vw, 1.75rem);
|
|
}
|
|
}
|
|
|
|
/* Touch-friendly improvements for mobile */
|
|
@media (max-width: 768px) {
|
|
/* More padding for editable fields */
|
|
.rpg-editable {
|
|
padding: 0.5em;
|
|
min-height: 1.25rem;
|
|
}
|
|
|
|
/* Larger close buttons */
|
|
.rpg-thought-close {
|
|
min-width: 2.75rem;
|
|
min-height: 2.75rem;
|
|
font-size: clamp(1.5rem, 2.2vw, 1.875rem);
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Inventory System v2 Styles
|
|
======================================== */
|
|
|
|
/* Inventory Container */
|
|
#rpg-inventory {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.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;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
flex-wrap: nowrap;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--SmartThemeBorderColor) transparent;
|
|
}
|
|
|
|
.rpg-inventory-subtabs::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.rpg-inventory-subtabs::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.rpg-inventory-subtabs::-webkit-scrollbar-thumb {
|
|
background: var(--SmartThemeBorderColor);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.rpg-inventory-subtabs::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-accent);
|
|
}
|
|
|
|
.rpg-inventory-subtab {
|
|
flex: 1;
|
|
min-width: fit-content;
|
|
white-space: nowrap;
|
|
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;
|
|
text-align: center;
|
|
font-size: clamp(0.75rem, 1vw, 0.9rem);
|
|
}
|
|
|
|
.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 {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--SmartThemeBorderColor);
|
|
gap: 0.5rem;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
flex-wrap: nowrap;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--SmartThemeBorderColor) transparent;
|
|
}
|
|
|
|
.rpg-inventory-header::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.rpg-inventory-header::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.rpg-inventory-header::-webkit-scrollbar-thumb {
|
|
background: var(--SmartThemeBorderColor);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.rpg-inventory-header::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-accent);
|
|
}
|
|
|
|
.rpg-inventory-header h4 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
color: var(--SmartThemeBodyColor);
|
|
white-space: nowrap;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.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.5rem;
|
|
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);
|
|
white-space: nowrap;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.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 {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
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;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.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;
|
|
flex-wrap: nowrap;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.rpg-view-toggle {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.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;
|
|
white-space: nowrap;
|
|
min-width: fit-content;
|
|
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);
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
flex-wrap: nowrap;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--SmartThemeBorderColor) transparent;
|
|
}
|
|
|
|
.rpg-tabs-nav::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.rpg-tabs-nav::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.rpg-tabs-nav::-webkit-scrollbar-thumb {
|
|
background: var(--SmartThemeBorderColor);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.rpg-tabs-nav::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-highlight);
|
|
}
|
|
|
|
/* Desktop tab button */
|
|
.rpg-tab-btn {
|
|
flex: 1;
|
|
min-width: fit-content;
|
|
white-space: nowrap;
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
QUESTS SYSTEM STYLING
|
|
============================================ */
|
|
|
|
/* Quest Container */
|
|
#rpg-quests {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Quest Sub-tabs Navigation (Main / Optional) */
|
|
.rpg-quests-subtabs {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
border-bottom: 2px solid var(--SmartThemeBorderColor);
|
|
padding-bottom: 0.5rem;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
flex-wrap: nowrap;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--SmartThemeBorderColor) transparent;
|
|
}
|
|
|
|
.rpg-quests-subtabs::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.rpg-quests-subtabs::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.rpg-quests-subtabs::-webkit-scrollbar-thumb {
|
|
background: var(--SmartThemeBorderColor);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.rpg-quests-subtabs::-webkit-scrollbar-thumb:hover {
|
|
background: var(--rpg-accent);
|
|
}
|
|
|
|
.rpg-quests-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;
|
|
text-align: center;
|
|
font-size: clamp(0.75rem, 1vw, 0.9rem);
|
|
min-width: fit-content;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rpg-quests-subtab:hover {
|
|
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.1);
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-quests-subtab.active {
|
|
background: transparent;
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Quest Sections */
|
|
.rpg-quest-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.rpg-quest-header {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--SmartThemeBorderColor);
|
|
}
|
|
|
|
.rpg-quest-header h4 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
color: var(--SmartThemeBodyColor);
|
|
}
|
|
|
|
.rpg-quest-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* Main Quest Display */
|
|
.rpg-main-quest-display {
|
|
padding: 0.75rem;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-radius: 0.25rem;
|
|
color: var(--SmartThemeBodyColor);
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.rpg-main-quest-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* Optional Quests List */
|
|
.rpg-quest-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.rpg-quest-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-quest-item:hover {
|
|
border-color: var(--rpg-highlight);
|
|
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.05);
|
|
}
|
|
|
|
.rpg-quest-title {
|
|
flex: 1;
|
|
color: var(--SmartThemeBodyColor);
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.rpg-quest-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Quest Buttons */
|
|
.rpg-quest-edit,
|
|
.rpg-quest-remove,
|
|
.rpg-add-quest-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-quest-edit:hover {
|
|
background: var(--ac-style-color-matchedText);
|
|
border-color: var(--ac-style-color-matchedText);
|
|
color: white;
|
|
}
|
|
|
|
.rpg-quest-remove:hover {
|
|
background: #e74c3c;
|
|
border-color: #e74c3c;
|
|
color: white;
|
|
}
|
|
|
|
.rpg-add-quest-btn {
|
|
background: transparent;
|
|
border-color: var(--rpg-highlight);
|
|
color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-add-quest-btn:hover {
|
|
background: rgba(var(--rpg-highlight-rgb, 233, 69, 96), 0.1);
|
|
border-color: var(--rpg-highlight);
|
|
}
|
|
|
|
/* Quest Empty State */
|
|
.rpg-quest-empty {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
color: var(--SmartThemeFastUISliderColColor);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Quest Hint */
|
|
.rpg-quest-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-quest-hint i {
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
/* Quest Inline Edit Form */
|
|
.rpg-quest-edit-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
border: 2px solid var(--rpg-highlight);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.rpg-quest-edit-form input,
|
|
.rpg-quest-edit-form textarea {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
color: var(--SmartThemeBodyColor);
|
|
font-family: inherit;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.rpg-quest-edit-form input:focus,
|
|
.rpg-quest-edit-form textarea:focus {
|
|
outline: none;
|
|
border-color: var(--rpg-highlight);
|
|
}
|
|
|
|
.rpg-quest-edit-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.rpg-quest-save,
|
|
.rpg-quest-cancel {
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-quest-save {
|
|
background: var(--rpg-highlight);
|
|
border-color: var(--rpg-highlight);
|
|
color: white;
|
|
}
|
|
|
|
.rpg-quest-save:hover {
|
|
background: #ff6b81;
|
|
border-color: #ff6b81;
|
|
}
|
|
|
|
.rpg-quest-cancel {
|
|
background: transparent;
|
|
color: var(--SmartThemeBodyColor);
|
|
}
|
|
|
|
.rpg-quest-cancel:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Mobile Responsive Styles */
|
|
@media (max-width: 768px) {
|
|
.rpg-quests-subtabs {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.rpg-quests-subtab {
|
|
padding: 0.75rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.rpg-quest-header h4 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.rpg-quest-edit,
|
|
.rpg-quest-remove,
|
|
.rpg-add-quest-btn {
|
|
padding: 0.6rem 1rem;
|
|
font-size: 0.95rem;
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
.rpg-quest-item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.rpg-quest-actions {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.rpg-main-quest-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.rpg-main-quest-actions button {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE FONT SIZE OVERRIDES
|
|
Fix all vw-based font sizes for mobile readability
|
|
======================================== */
|
|
|
|
/* Collapse toggle button */
|
|
.rpg-collapse-toggle {
|
|
font-size: clamp(16px, 3vw, 20px) !important;
|
|
}
|
|
|
|
/* Top position panel titles */
|
|
.rpg-panel.rpg-position-top .rpg-stats-title {
|
|
font-size: clamp(12px, 2.6vw, 16px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-mood {
|
|
font-size: clamp(10px, 2vw, 13px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stats-title {
|
|
font-size: clamp(10px, 2vw, 13px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-label {
|
|
font-size: clamp(8px, 1.7vw, 11px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-value {
|
|
font-size: clamp(12px, 2.6vw, 16px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-btn {
|
|
font-size: clamp(10px, 2.2vw, 14px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-info-content,
|
|
.rpg-panel.rpg-position-top .rpg-thoughts-content {
|
|
font-size: clamp(10px, 2.2vw, 14px) !important;
|
|
}
|
|
|
|
/* Panel header */
|
|
.rpg-panel-header h3 {
|
|
font-size: clamp(14px, 3.4vw, 18px) !important;
|
|
}
|
|
|
|
/* Loading indicator */
|
|
.rpg-loading {
|
|
font-size: clamp(12px, 2.6vw, 16px) !important;
|
|
}
|
|
|
|
/* Dice display */
|
|
.rpg-dice-display {
|
|
font-size: clamp(10px, 2vw, 13px) !important;
|
|
}
|
|
|
|
.rpg-dice-display i {
|
|
font-size: clamp(12px, 2.6vw, 16px) !important;
|
|
}
|
|
|
|
.rpg-clear-dice-btn {
|
|
font-size: clamp(14px, 3vw, 18px) !important;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
MOBILE FONT SIZE OVERRIDES (ALL SCREENS)
|
|
Apply to screens up to 1000px
|
|
======================================== */
|
|
@media (max-width: 1000px) {
|
|
/* Collapse toggle button */
|
|
.rpg-collapse-toggle {
|
|
font-size: clamp(16px, 3vw, 20px) !important;
|
|
}
|
|
|
|
/* Top position panel titles */
|
|
.rpg-panel.rpg-position-top .rpg-stats-title {
|
|
font-size: clamp(12px, 2.6vw, 16px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-mood {
|
|
font-size: clamp(10px, 2vw, 13px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stats-title {
|
|
font-size: clamp(10px, 2vw, 13px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-label {
|
|
font-size: clamp(8px, 1.7vw, 11px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-value {
|
|
font-size: clamp(12px, 2.6vw, 16px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-classic-stat-btn {
|
|
font-size: clamp(10px, 2.2vw, 14px) !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-top .rpg-info-content,
|
|
.rpg-panel.rpg-position-top .rpg-thoughts-content {
|
|
font-size: clamp(10px, 2.2vw, 14px) !important;
|
|
}
|
|
|
|
/* Panel header */
|
|
.rpg-panel-header h3 {
|
|
font-size: clamp(14px, 3.4vw, 18px) !important;
|
|
}
|
|
|
|
/* Loading indicator */
|
|
.rpg-loading {
|
|
font-size: clamp(12px, 2.6vw, 16px) !important;
|
|
}
|
|
|
|
/* Dice display */
|
|
.rpg-dice-display {
|
|
font-size: clamp(10px, 2vw, 13px) !important;
|
|
}
|
|
|
|
.rpg-dice-display i {
|
|
font-size: clamp(12px, 2.6vw, 16px) !important;
|
|
}
|
|
|
|
.rpg-clear-dice-btn {
|
|
font-size: clamp(14px, 3vw, 18px) !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
CHAPTER CHECKPOINT STYLES
|
|
============================================ */
|
|
|
|
/* Checkpoint indicator in messages */
|
|
.rpg-checkpoint-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
margin-bottom: 12px;
|
|
background: linear-gradient(135deg, var(--rpg-border-transparent, rgba(74, 158, 255, 0.15)) 0%, var(--rpg-border-transparent-fade, rgba(74, 158, 255, 0.05)) 100%);
|
|
border-left: 4px solid var(--rpg-border, #4a7ba7);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--rpg-highlight, #4a9eff);
|
|
animation: checkpoint-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
.rpg-checkpoint-indicator i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
@keyframes checkpoint-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Optional: Add a subtle glow effect for checkpoint messages */
|
|
.mes:has(.rpg-checkpoint-indicator) {
|
|
position: relative;
|
|
}
|
|
|
|
.mes:has(.rpg-checkpoint-indicator)::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -4px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: linear-gradient(180deg, var(--rpg-border, #4a7ba7) 0%, transparent 100%);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Avatar generation loading overlay */
|
|
.rpg-avatar-generating {
|
|
position: relative;
|
|
}
|
|
|
|
.rpg-generating-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 24px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Textarea style for LLM instruction input */
|
|
.rpg-textarea {
|
|
width: 100%;
|
|
min-height: 80px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--rpg-border);
|
|
background: var(--SmartThemeBlurTintColor);
|
|
color: var(--SmartThemeBodyColor);
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ============================================
|
|
COMBAT ENCOUNTER MODAL STYLES
|
|
============================================ */
|
|
|
|
/* Encounter Modal - Define CSS variables for default theme using SillyTavern theme */
|
|
.rpg-encounter-modal {
|
|
--rpg-bg: var(--SmartThemeBlurTintColor, #1a1a2e);
|
|
--rpg-accent: var(--SmartThemeBlurTintColor, #16213e);
|
|
--rpg-text: var(--SmartThemeBodyColor, #eaeaea);
|
|
--rpg-highlight: var(--SmartThemeBorderColor, #4a7ba7);
|
|
--rpg-border: var(--SmartThemeBorderColor, #4a7ba7);
|
|
--rpg-shadow: var(--SmartThemeShadowColor, rgba(74, 123, 167, 0.3));
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100dvh;
|
|
min-width: 100vw;
|
|
min-height: 100dvh;
|
|
z-index: 99999; /* Increased from 10000 to ensure it's on top */
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.rpg-encounter-modal.is-open {
|
|
display: flex;
|
|
opacity: 1;
|
|
align-items: flex-start; /* Changed from center to flex-start */
|
|
justify-content: center;
|
|
padding: 2vh 0; /* Add vertical padding */
|
|
overflow-y: auto; /* Allow modal itself to scroll if container is too tall */
|
|
min-height: 100dvh; /* Force full viewport height */
|
|
min-width: 100vw; /* Force full viewport width */
|
|
}
|
|
|
|
/* Overlay */
|
|
.rpg-encounter-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
backdrop-filter: blur(4px);
|
|
z-index: 1; /* Ensure overlay is stacked properly */
|
|
}
|
|
|
|
/* Container */
|
|
.rpg-encounter-container {
|
|
position: relative;
|
|
width: 85vw;
|
|
max-width: 1600px;
|
|
min-height: 400px; /* Ensure minimum height */
|
|
height: 85vh; /* Revert to fixed height for flex to work */
|
|
max-height: 90vh;
|
|
background: var(--rpg-bg, #1a1a2e);
|
|
border: 2px solid var(--rpg-border, #4a7ba7);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
animation: encounter-modal-in 0.3s ease-out;
|
|
z-index: 2; /* Ensure container is above overlay */
|
|
}
|
|
|
|
@keyframes encounter-modal-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9) translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Header */
|
|
.rpg-encounter-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1vh 1.5vw;
|
|
background: var(--rpg-accent, #16213e);
|
|
border-bottom: 2px solid var(--rpg-border, #4a7ba7);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-encounter-header h2 {
|
|
margin: 0;
|
|
color: var(--rpg-text, #eaeaea);
|
|
font-size: clamp(16px, 1.5vw, 24px);
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(0.5rem, 0.8vw, 0.8rem);
|
|
}
|
|
|
|
.rpg-encounter-close-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--rpg-text, #eaeaea);
|
|
font-size: clamp(18px, 1.5vw, 24px);
|
|
cursor: pointer;
|
|
padding: 0.5vh 0.5vw;
|
|
transition: color 0.2s, transform 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-encounter-close-btn:hover {
|
|
color: var(--rpg-highlight, #e94560);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Header Buttons Container */
|
|
.rpg-encounter-header-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Conclude Button */
|
|
.rpg-encounter-conclude-btn {
|
|
background: var(--rpg-highlight, rgba(255, 165, 0, 0.2));
|
|
border: 1px solid var(--rpg-highlight, rgba(255, 165, 0, 0.4));
|
|
color: var(--rpg-text, #eaeaea);
|
|
font-size: clamp(12px, 1vw, 14px);
|
|
font-family: var(--rpg-font-body, 'Open Sans', sans-serif);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
transition: all 0.3s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-encounter-conclude-btn:hover {
|
|
background: var(--rpg-highlight, rgba(255, 165, 0, 0.3));
|
|
border-color: var(--rpg-highlight, rgba(255, 165, 0, 0.6));
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px var(--rpg-highlight, rgba(255, 165, 0, 0.3));
|
|
}
|
|
|
|
/* Content Area - Main scrollable container */
|
|
.rpg-encounter-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 16px 24px;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Loading State */
|
|
.rpg-encounter-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
gap: 16px;
|
|
}
|
|
|
|
.rpg-encounter-loading i {
|
|
font-size: clamp(32px, 3vw, 48px);
|
|
color: var(--rpg-highlight, #e94560);
|
|
}
|
|
|
|
.rpg-encounter-loading p {
|
|
font-size: clamp(14px, 1.2vw, 18px);
|
|
color: var(--rpg-text, #eaeaea);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Error Box with Regenerate */
|
|
.rpg-encounter-error-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2em;
|
|
background: var(--rpg-bg, rgba(0, 0, 0, 0.5));
|
|
border: 2px solid var(--rpg-highlight, #e94560);
|
|
border-radius: 12px;
|
|
max-width: 600px;
|
|
text-align: center;
|
|
}
|
|
|
|
.rpg-encounter-error-box p {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.rpg-encounter-error-box .rpg-btn {
|
|
padding: 0.75em 1.5em;
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: 6px;
|
|
transition: all 0.3s ease;
|
|
font-family: var(--rpg-font-body, 'Open Sans', sans-serif);
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.rpg-encounter-error-box .rpg-btn-primary {
|
|
background: var(--rpg-highlight, #e94560);
|
|
color: var(--rpg-text, #eaeaea);
|
|
}
|
|
|
|
.rpg-encounter-error-box .rpg-btn-primary:hover {
|
|
background: var(--rpg-highlight-hover, #ff5577);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
|
|
}
|
|
|
|
.rpg-encounter-error-box .rpg-btn-secondary {
|
|
background: var(--rpg-border, rgba(255, 255, 255, 0.1));
|
|
color: var(--rpg-text, #eaeaea);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.rpg-encounter-error-box .rpg-btn-secondary:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Main Battlefield Layout */
|
|
.rpg-encounter-battlefield {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Environment Banner */
|
|
.rpg-encounter-environment {
|
|
padding: 0.5vh 1vw;
|
|
background: linear-gradient(135deg, rgba(74, 122, 167, 0.2) 0%, rgba(74, 122, 167, 0.05) 100%);
|
|
border-left: 3px solid var(--rpg-border, #4a7ba7);
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.rpg-encounter-environment p {
|
|
margin: 0;
|
|
font-size: clamp(12px, 1vw, 14px);
|
|
font-weight: 600;
|
|
color: var(--rpg-text, #eaeaea);
|
|
}
|
|
|
|
/* Section Headers */
|
|
.rpg-encounter-section h3 {
|
|
margin: 0 0 0.5vh 0;
|
|
font-size: clamp(14px, 1.2vw, 18px);
|
|
font-weight: 700;
|
|
color: var(--rpg-text, #eaeaea);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(0.375rem, 0.5vw, 0.5rem);
|
|
border-left: none !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.rpg-encounter-section h3 i {
|
|
border-left: none !important;
|
|
padding-left: 0 !important;
|
|
color: var(--rpg-text, #eaeaea);
|
|
}
|
|
|
|
.rpg-encounter-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Enemies and Party Grids */
|
|
.rpg-encounter-enemies,
|
|
.rpg-encounter-party {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Character/Enemy Cards */
|
|
.rpg-encounter-card {
|
|
background: var(--rpg-accent, #16213e);
|
|
border: 2px solid var(--rpg-border, #4a7ba7);
|
|
border-radius: 6px;
|
|
padding: 0.6vh 0.8vw;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
min-height: fit-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.rpg-encounter-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.rpg-encounter-card.rpg-encounter-dead {
|
|
opacity: 0.5;
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
/* Card Sprite/Avatar */
|
|
.rpg-encounter-card-sprite {
|
|
font-size: clamp(24px, 2.5vw, 36px);
|
|
text-align: center;
|
|
margin-bottom: 0.4vh;
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: clamp(40px, 4vw, 60px);
|
|
}
|
|
|
|
.rpg-encounter-card-sprite img {
|
|
width: clamp(40px, 4vw, 60px);
|
|
height: clamp(40px, 4vw, 60px);
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 2px solid var(--rpg-border, #4a7ba7);
|
|
}
|
|
|
|
.rpg-encounter-card-avatar {
|
|
width: clamp(40px, 4vw, 60px);
|
|
height: clamp(40px, 4vw, 60px);
|
|
margin: 0 auto 0.4vh;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 2px solid var(--rpg-border, #4a7ba7);
|
|
}
|
|
|
|
.rpg-encounter-card-avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Card Info */
|
|
.rpg-encounter-card-info h4 {
|
|
margin: 0 0 0.4vh 0;
|
|
font-size: clamp(14px, 1.2vw, 18px);
|
|
font-weight: 600;
|
|
color: var(--rpg-text, #eaeaea);
|
|
text-align: center;
|
|
}
|
|
|
|
.rpg-encounter-description {
|
|
font-size: clamp(11px, 0.9vw, 13px);
|
|
color: var(--rpg-text, #eaeaea);
|
|
opacity: 0.8;
|
|
margin: 0.4vh 0 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
/* HP Bar */
|
|
.rpg-encounter-hp-bar {
|
|
position: relative;
|
|
height: 2vh;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 1vh;
|
|
overflow: hidden;
|
|
margin-bottom: 0.4vh;
|
|
min-height: 16px;
|
|
}
|
|
|
|
.rpg-encounter-hp-fill {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #cc3333 0%, #e94560 100%);
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
.rpg-encounter-hp-fill.rpg-encounter-hp-party {
|
|
background: linear-gradient(90deg, #33cc66 0%, #4ade80 100%);
|
|
}
|
|
|
|
.rpg-encounter-hp-text {
|
|
position: relative;
|
|
display: block;
|
|
text-align: center;
|
|
line-height: 2vh;
|
|
min-height: 16px;
|
|
font-size: clamp(10px, 0.8vw, 13px);
|
|
font-weight: 700;
|
|
color: white;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Combat Log */
|
|
.rpg-encounter-log-section h3 {
|
|
margin: 0 0 0.5vh 0;
|
|
font-size: clamp(14px, 1.2vw, 18px);
|
|
font-weight: 700;
|
|
color: var(--rpg-text, #eaeaea);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(0.375rem, 0.5vw, 0.5rem);
|
|
border-left: none !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.rpg-encounter-log-section h3 i {
|
|
border-left: none !important;
|
|
padding-left: 0 !important;
|
|
color: var(--rpg-text, #eaeaea);
|
|
}
|
|
|
|
.rpg-encounter-log {
|
|
min-height: 120px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid var(--rpg-border, #4a7ba7);
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.rpg-encounter-log-entry {
|
|
padding: 0.3vh 0;
|
|
font-size: clamp(11px, 0.9vw, 13px);
|
|
color: var(--rpg-text, #eaeaea);
|
|
line-height: 1.4;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.rpg-encounter-log-entry:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.rpg-encounter-log-entry.player-action {
|
|
color: #4ade80;
|
|
}
|
|
|
|
.rpg-encounter-log-entry.enemy-action {
|
|
color: #e94560;
|
|
}
|
|
|
|
.rpg-encounter-log-entry.narrative {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.rpg-encounter-log-entry.combat-end {
|
|
font-weight: 700;
|
|
color: var(--rpg-highlight, #e94560);
|
|
font-size: clamp(13px, 1.1vw, 16px);
|
|
text-align: center;
|
|
border: none;
|
|
padding: 1vh 0;
|
|
}
|
|
|
|
.rpg-encounter-log-entry.system {
|
|
color: #4a7ba7;
|
|
font-size: clamp(11px, 0.9vw, 13px);
|
|
}
|
|
|
|
.rpg-encounter-log-entry.error {
|
|
color: #e94560;
|
|
}
|
|
|
|
/* Player Controls */
|
|
.rpg-encounter-controls {
|
|
background: var(--rpg-accent, #16213e);
|
|
border: 2px solid var(--rpg-border, #4a7ba7);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.rpg-encounter-controls h3 {
|
|
margin: 0 0 0.5vh 0;
|
|
font-size: clamp(14px, 1.2vw, 18px);
|
|
font-weight: 700;
|
|
color: var(--rpg-text, #eaeaea);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(0.375rem, 0.5vw, 0.5rem);
|
|
border-left: none !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.rpg-encounter-controls h3 i {
|
|
border-left: none !important;
|
|
padding-left: 0 !important;
|
|
color: var(--rpg-text, #eaeaea);
|
|
}
|
|
|
|
.rpg-encounter-controls h4 {
|
|
margin: 0 0 0.5vh 0;
|
|
font-size: clamp(13px, 1.1vw, 16px);
|
|
font-weight: 600;
|
|
color: var(--rpg-text, #eaeaea);
|
|
}
|
|
|
|
/* Action Buttons Layout */
|
|
.rpg-encounter-action-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1vh 1vw;
|
|
margin-bottom: 1vh;
|
|
}
|
|
|
|
.rpg-encounter-button-group {
|
|
flex: 1;
|
|
min-width: clamp(200px, 15vw, 250px);
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.rpg-encounter-action-btn {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.8vh 1vw;
|
|
margin-bottom: 0.4vh;
|
|
background: linear-gradient(135deg, #4a7ba7 0%, #2c5282 100%);
|
|
border: 2px solid var(--rpg-border, #4a7ba7);
|
|
border-radius: 4px;
|
|
color: white;
|
|
font-size: clamp(12px, 1vw, 15px);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-align: left;
|
|
}
|
|
|
|
.rpg-encounter-action-btn:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #5a8bc7 0%, #3c6292 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(74, 122, 167, 0.4);
|
|
}
|
|
|
|
.rpg-encounter-action-btn:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.rpg-encounter-action-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.rpg-encounter-attack-btn {
|
|
background: linear-gradient(135deg, #e94560 0%, #c72c46 100%);
|
|
}
|
|
|
|
.rpg-encounter-attack-btn:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #ff5570 0%, #d73c56 100%);
|
|
box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
|
|
}
|
|
|
|
.rpg-encounter-item-btn {
|
|
background: linear-gradient(135deg, #33cc66 0%, #28a752 100%);
|
|
}
|
|
|
|
.rpg-encounter-item-btn:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #43dc76 0%, #38b762 100%);
|
|
box-shadow: 0 4px 12px rgba(51, 204, 102, 0.4);
|
|
}
|
|
|
|
/* Custom Action Input */
|
|
.rpg-encounter-custom-action {
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
.rpg-encounter-input-group {
|
|
display: flex;
|
|
gap: clamp(0.5rem, 0.8vw, 0.8rem);
|
|
}
|
|
|
|
.rpg-encounter-input-group input {
|
|
flex: 1;
|
|
padding: 0.8vh 1vw;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 2px solid var(--rpg-border, #4a7ba7);
|
|
border-radius: 4px;
|
|
color: var(--rpg-text, #eaeaea);
|
|
font-size: clamp(12px, 1vw, 15px);
|
|
}
|
|
|
|
.rpg-encounter-input-group input:focus {
|
|
outline: none;
|
|
border-color: var(--rpg-highlight, #e94560);
|
|
}
|
|
|
|
.rpg-encounter-submit-btn {
|
|
padding: 0.8vh 1.5vw;
|
|
background: var(--rpg-button-bg, linear-gradient(135deg, #e94560 0%, #c72c46 100%));
|
|
border: 2px solid var(--rpg-highlight, #e94560);
|
|
border-radius: 4px;
|
|
color: var(--rpg-button-text, white);
|
|
font-size: clamp(12px, 1vw, 15px);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rpg-encounter-submit-btn:hover:not(:disabled) {
|
|
background: var(--rpg-button-bg-hover, linear-gradient(135deg, #ff5570 0%, #d73c56 100%));
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
|
|
}
|
|
|
|
.rpg-encounter-submit-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Defeated State */
|
|
.rpg-encounter-defeated {
|
|
text-align: center;
|
|
font-size: clamp(16px, 1.5vw, 20px);
|
|
font-weight: 700;
|
|
color: #e94560;
|
|
padding: 3vh 2vw;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Theme-specific encounter modal styling */
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-container {
|
|
background: var(--rpg-bg);
|
|
border-color: var(--rpg-border);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-container {
|
|
background: var(--rpg-bg);
|
|
border-color: var(--rpg-border);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-container {
|
|
background: var(--rpg-bg);
|
|
border-color: var(--rpg-border);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="custom"] .rpg-encounter-container {
|
|
background: var(--rpg-bg);
|
|
border-color: var(--rpg-border);
|
|
}
|
|
|
|
/* Apply theme colors to all encounter elements */
|
|
.rpg-encounter-modal .rpg-encounter-header,
|
|
.rpg-encounter-modal .rpg-encounter-card,
|
|
.rpg-encounter-modal .rpg-encounter-log,
|
|
.rpg-encounter-modal .rpg-encounter-controls {
|
|
background: var(--rpg-accent);
|
|
border-color: var(--rpg-border);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-encounter-modal .rpg-encounter-button {
|
|
background: var(--rpg-highlight);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-encounter-modal .rpg-encounter-button:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Environment-Based Visual Styling */
|
|
|
|
/* Forest */
|
|
.rpg-encounter-modal[data-environment="forest"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(34, 139, 34, 0.3), rgba(0, 100, 0, 0.5));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="forest"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(85, 107, 47, 0.95), rgba(34, 139, 34, 0.9));
|
|
border-color: #2d5016;
|
|
}
|
|
|
|
/* Dungeon */
|
|
.rpg-encounter-modal[data-environment="dungeon"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(20, 20, 25, 0.5), rgba(10, 10, 15, 0.7));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="dungeon"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(40, 40, 50, 0.95), rgba(25, 25, 35, 0.9));
|
|
border-color: #1a1a20;
|
|
}
|
|
|
|
/* Desert */
|
|
.rpg-encounter-modal[data-environment="desert"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(237, 201, 175, 0.3), rgba(194, 178, 128, 0.5));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="desert"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(210, 180, 140, 0.95), rgba(184, 134, 11, 0.9));
|
|
border-color: #8b7355;
|
|
}
|
|
|
|
/* Cave */
|
|
.rpg-encounter-modal[data-environment="cave"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(47, 79, 79, 0.5), rgba(25, 25, 25, 0.7));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="cave"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(60, 60, 70, 0.95), rgba(30, 30, 40, 0.9));
|
|
border-color: #2f4f4f;
|
|
}
|
|
|
|
/* City */
|
|
.rpg-encounter-modal[data-environment="city"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(70, 70, 80, 0.4), rgba(50, 50, 60, 0.6));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="city"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(90, 90, 100, 0.95), rgba(60, 60, 70, 0.9));
|
|
border-color: #4a4a5a;
|
|
}
|
|
|
|
/* Ruins */
|
|
.rpg-encounter-modal[data-environment="ruins"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(139, 137, 137, 0.4), rgba(105, 105, 105, 0.6));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="ruins"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(120, 120, 130, 0.95), rgba(85, 85, 95, 0.9));
|
|
border-color: #696969;
|
|
}
|
|
|
|
/* Snow */
|
|
.rpg-encounter-modal[data-environment="snow"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(240, 248, 255, 0.3), rgba(176, 196, 222, 0.5));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="snow"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(220, 230, 240, 0.95), rgba(176, 196, 222, 0.9));
|
|
border-color: #b0c4de;
|
|
}
|
|
|
|
/* Water */
|
|
.rpg-encounter-modal[data-environment="water"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(0, 191, 255, 0.3), rgba(0, 105, 148, 0.5));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="water"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(70, 130, 180, 0.95), rgba(0, 105, 148, 0.9));
|
|
border-color: #4682b4;
|
|
}
|
|
|
|
/* Castle */
|
|
.rpg-encounter-modal[data-environment="castle"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(112, 128, 144, 0.4), rgba(70, 80, 90, 0.6));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="castle"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(140, 150, 160, 0.95), rgba(100, 110, 120, 0.9));
|
|
border-color: #708090;
|
|
}
|
|
|
|
/* Wasteland */
|
|
.rpg-encounter-modal[data-environment="wasteland"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(128, 128, 128, 0.4), rgba(80, 70, 60, 0.6));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="wasteland"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(105, 105, 105, 0.95), rgba(70, 70, 70, 0.9));
|
|
border-color: #696969;
|
|
}
|
|
|
|
/* Plains */
|
|
.rpg-encounter-modal[data-environment="plains"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(154, 205, 50, 0.3), rgba(107, 142, 35, 0.5));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="plains"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(144, 238, 144, 0.95), rgba(107, 142, 35, 0.9));
|
|
border-color: #6b8e23;
|
|
}
|
|
|
|
/* Mountains */
|
|
.rpg-encounter-modal[data-environment="mountains"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(169, 169, 169, 0.4), rgba(105, 105, 105, 0.6));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="mountains"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(150, 150, 160, 0.95), rgba(105, 105, 115, 0.9));
|
|
border-color: #a9a9a9;
|
|
}
|
|
|
|
/* Swamp */
|
|
.rpg-encounter-modal[data-environment="swamp"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(85, 107, 47, 0.4), rgba(47, 79, 47, 0.6));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="swamp"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(75, 95, 50, 0.95), rgba(47, 79, 47, 0.9));
|
|
border-color: #556b2f;
|
|
}
|
|
|
|
/* Volcanic */
|
|
.rpg-encounter-modal[data-environment="volcanic"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(255, 69, 0, 0.3), rgba(139, 0, 0, 0.5));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="volcanic"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(178, 34, 34, 0.95), rgba(139, 0, 0, 0.9));
|
|
border-color: #8b0000;
|
|
}
|
|
|
|
/* Spaceship */
|
|
.rpg-encounter-modal[data-environment="spaceship"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(30, 30, 50, 0.4), rgba(10, 10, 30, 0.6));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="spaceship"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(50, 60, 80, 0.95), rgba(30, 40, 60, 0.9));
|
|
border-color: #1e3a5f;
|
|
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3), inset 0 0 20px rgba(0, 100, 200, 0.1);
|
|
}
|
|
|
|
/* Mansion */
|
|
.rpg-encounter-modal[data-environment="mansion"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(139, 69, 19, 0.3), rgba(101, 67, 33, 0.5));
|
|
}
|
|
|
|
.rpg-encounter-modal[data-environment="mansion"] .rpg-encounter-container {
|
|
background: linear-gradient(to bottom, rgba(120, 80, 50, 0.95), rgba(90, 60, 40, 0.9));
|
|
border-color: #654321;
|
|
box-shadow: 0 0 15px rgba(218, 165, 32, 0.2), inset 0 0 15px rgba(139, 90, 43, 0.1);
|
|
}
|
|
|
|
/* Atmosphere Modifiers */
|
|
|
|
/* Dark atmosphere - add shadow overlay */
|
|
.rpg-encounter-modal[data-atmosphere="dark"] .rpg-encounter-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-atmosphere="dark"] .rpg-encounter-container > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Bright atmosphere - add light overlay */
|
|
.rpg-encounter-modal[data-atmosphere="bright"] .rpg-encounter-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-atmosphere="bright"] .rpg-encounter-container > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Foggy atmosphere - add blur effect */
|
|
.rpg-encounter-modal[data-atmosphere="foggy"] .rpg-encounter-overlay {
|
|
backdrop-filter: blur(3px);
|
|
}
|
|
|
|
/* Eerie atmosphere - add green tint */
|
|
.rpg-encounter-modal[data-atmosphere="eerie"] .rpg-encounter-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(50, 205, 50, 0.08);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-atmosphere="eerie"] .rpg-encounter-container > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Time of Day Modifiers */
|
|
|
|
/* Night - darker tint */
|
|
.rpg-encounter-modal[data-time="night"] .rpg-encounter-overlay {
|
|
background: linear-gradient(135deg, rgba(0, 0, 20, 0.5), rgba(0, 0, 40, 0.7));
|
|
}
|
|
|
|
/* Dawn/Dusk - orange tint */
|
|
.rpg-encounter-modal[data-time="dawn"] .rpg-encounter-container::before,
|
|
.rpg-encounter-modal[data-time="dusk"] .rpg-encounter-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(to bottom, rgba(255, 140, 0, 0.15), transparent);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-time="dawn"] .rpg-encounter-container > *,
|
|
.rpg-encounter-modal[data-time="dusk"] .rpg-encounter-container > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.rpg-encounter-modal {
|
|
/* Fix for mobile viewport height with address bars */
|
|
height: 100dvh; /* Dynamic viewport height for mobile browsers */
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
.rpg-encounter-container {
|
|
width: 95vw;
|
|
height: 90vh;
|
|
max-height: 90vh;
|
|
margin: 0;
|
|
}
|
|
|
|
.rpg-encounter-content {
|
|
padding: 12px;
|
|
/* Enable smooth touch scrolling on mobile */
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.rpg-encounter-header {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.rpg-encounter-header h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.rpg-encounter-close-btn {
|
|
font-size: 20px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.rpg-encounter-enemies,
|
|
.rpg-encounter-party {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.rpg-encounter-battlefield {
|
|
gap: 12px;
|
|
}
|
|
|
|
.rpg-encounter-action-buttons {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.rpg-encounter-button-group {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.rpg-encounter-action-btn {
|
|
padding: 12px 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.rpg-encounter-input-group {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.rpg-encounter-submit-btn {
|
|
width: 100%;
|
|
padding: 12px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
COMBAT ENCOUNTER MODAL THEME VARIATIONS
|
|
============================================ */
|
|
|
|
/* Sci-Fi Theme */
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-container {
|
|
background: linear-gradient(135deg, #1a1f3a 0%, #0a0e27 100%);
|
|
border: 2px solid #8b00ff;
|
|
box-shadow: 0 0 40px rgba(139, 0, 255, 0.5), 0 8px 32px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-header {
|
|
background: #0a0e27;
|
|
border-bottom-color: #8b00ff;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-header h2 {
|
|
color: #00fff9;
|
|
text-shadow: 0 0 20px #ff006e, 0 0 40px #8b00ff;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-close-btn {
|
|
color: #ff006e;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-close-btn:hover {
|
|
color: #00fff9;
|
|
text-shadow: 0 0 10px #00fff9;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-content {
|
|
background: linear-gradient(135deg, #1a1f3a 0%, #0a0e27 100%);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-section h3 {
|
|
color: #00fff9;
|
|
text-shadow: 0 0 15px #ff006e;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-card {
|
|
background: #1a1f3a;
|
|
border-color: #8b00ff;
|
|
box-shadow: 0 4px 16px rgba(139, 0, 255, 0.3);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-hp-fill {
|
|
background: linear-gradient(to right, #8b00ff, #ff006e);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-hp-party {
|
|
background: linear-gradient(to right, #00fff9, #8b00ff);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-action-btn {
|
|
background: #1a1f3a;
|
|
border-color: #8b00ff;
|
|
color: #00fff9;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-action-btn:hover:not(:disabled) {
|
|
background: #8b00ff;
|
|
box-shadow: 0 0 20px rgba(139, 0, 255, 0.5);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-loading {
|
|
color: #00fff9;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-loading i {
|
|
color: #ff006e;
|
|
filter: drop-shadow(0 0 10px #ff006e);
|
|
}
|
|
|
|
/* Fantasy Theme */
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-container {
|
|
background: linear-gradient(135deg, #3d2414 0%, #2b1810 100%);
|
|
border: 3px ridge #8b6914;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), inset 0 0 40px rgba(139, 105, 20, 0.2);
|
|
background-image:
|
|
linear-gradient(rgba(61, 36, 20, 0.95), rgba(43, 24, 16, 0.95)),
|
|
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.08"/></svg>');
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-header {
|
|
background: #2b1810;
|
|
border-bottom: 3px ridge #8b6914;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-header h2 {
|
|
color: #f4e8d0;
|
|
font-family: 'Georgia', serif;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-close-btn {
|
|
color: #d4af37;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-close-btn:hover {
|
|
color: #f4e8d0;
|
|
text-shadow: 0 0 8px #d4af37;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-content {
|
|
background: linear-gradient(135deg, #3d2414 0%, #2b1810 100%);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-section h3 {
|
|
color: #f4e8d0;
|
|
font-family: 'Georgia', serif;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-card {
|
|
background: #3d2414;
|
|
border: 2px solid #8b6914;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-hp-fill {
|
|
background: linear-gradient(to right, #8b6914, #d4af37);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-hp-party {
|
|
background: linear-gradient(to right, #d4af37, #f4e8d0);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-action-btn {
|
|
background: #3d2414;
|
|
border-color: #8b6914;
|
|
color: #f4e8d0;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-action-btn:hover:not(:disabled) {
|
|
background: #8b6914;
|
|
box-shadow: 0 0 16px rgba(212, 175, 55, 0.4);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-loading {
|
|
color: #f4e8d0;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-loading i {
|
|
color: #d4af37;
|
|
filter: drop-shadow(0 0 8px #d4af37);
|
|
}
|
|
|
|
/* Cyberpunk Theme */
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-container {
|
|
background: linear-gradient(135deg, #0d0d0d 0%, #000000 100%);
|
|
border: 2px solid #05d9e8;
|
|
box-shadow: 0 0 40px rgba(5, 217, 232, 0.5), 0 8px 32px rgba(0, 0, 0, 0.9);
|
|
background-image:
|
|
linear-gradient(rgba(13, 13, 13, 0.95), rgba(0, 0, 0, 0.95)),
|
|
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(5, 217, 232, 0.03) 2px, rgba(5, 217, 232, 0.03) 4px);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-header {
|
|
background: #000000;
|
|
border-bottom-color: #05d9e8;
|
|
box-shadow: 0 2px 10px rgba(5, 217, 232, 0.3);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-header h2 {
|
|
color: #00ff41;
|
|
text-shadow: 0 0 20px #00ff41, 0 0 40px #05d9e8;
|
|
font-family: 'Courier New', monospace;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-close-btn {
|
|
color: #ff2a6d;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-close-btn:hover {
|
|
color: #05d9e8;
|
|
text-shadow: 0 0 10px #05d9e8;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-content {
|
|
background: linear-gradient(135deg, #0d0d0d 0%, #000000 100%);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-section h3 {
|
|
color: #00ff41;
|
|
text-shadow: 0 0 15px #00ff41;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-card {
|
|
background: #0d0d0d;
|
|
border-color: #05d9e8;
|
|
box-shadow: 0 4px 16px rgba(5, 217, 232, 0.3), inset 0 0 20px rgba(5, 217, 232, 0.05);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-hp-fill {
|
|
background: linear-gradient(to right, #ff2a6d, #05d9e8);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-hp-party {
|
|
background: linear-gradient(to right, #00ff41, #05d9e8);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-action-btn {
|
|
background: #0d0d0d;
|
|
border-color: #05d9e8;
|
|
color: #00ff41;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-action-btn:hover:not(:disabled) {
|
|
background: rgba(5, 217, 232, 0.2);
|
|
box-shadow: 0 0 20px rgba(5, 217, 232, 0.5);
|
|
color: #05d9e8;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-loading {
|
|
color: #00ff41;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-loading i {
|
|
color: #05d9e8;
|
|
filter: drop-shadow(0 0 10px #05d9e8);
|
|
}
|
|
|
|
/* Combat Over Screen Theme Support */
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-over,
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-over,
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-over {
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] .rpg-encounter-over h2 {
|
|
text-shadow: 0 0 20px currentColor;
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="fantasy"] .rpg-encounter-over h2 {
|
|
font-family: 'Georgia', serif;
|
|
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] .rpg-encounter-over h2 {
|
|
font-family: 'Courier New', monospace;
|
|
text-shadow: 0 0 20px currentColor;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* Input fields theme support */
|
|
.rpg-encounter-modal[data-theme="sci-fi"] #rpg-encounter-custom-input,
|
|
.rpg-encounter-modal[data-theme="fantasy"] #rpg-encounter-custom-input,
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] #rpg-encounter-custom-input {
|
|
background: var(--rpg-bg);
|
|
border-color: var(--rpg-border);
|
|
color: var(--rpg-text);
|
|
}
|
|
|
|
.rpg-encounter-modal[data-theme="sci-fi"] #rpg-encounter-custom-input:focus,
|
|
.rpg-encounter-modal[data-theme="fantasy"] #rpg-encounter-custom-input:focus,
|
|
.rpg-encounter-modal[data-theme="cyberpunk"] #rpg-encounter-custom-input:focus {
|
|
border-color: var(--rpg-highlight);
|
|
box-shadow: 0 0 15px var(--rpg-shadow);
|
|
}
|
|
/* ============================================
|
|
TARGET SELECTION MODAL
|
|
============================================ */
|
|
|
|
/* Target Selection Overlay */
|
|
.rpg-target-selection-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100dvh;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 999999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
|
|
/* Target Selection Modal */
|
|
.rpg-target-selection-modal {
|
|
background: var(--SmartThemeBlurTintColor, #1a1a2e);
|
|
border: 2px solid var(--SmartThemeBorderColor, #4a7ba7);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
max-width: 500px;
|
|
width: 90%;
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.rpg-target-selection-modal h3 {
|
|
margin: 0 0 20px 0;
|
|
font-size: 20px;
|
|
color: var(--SmartThemeBodyColor, #eaeaea);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Target List */
|
|
.rpg-target-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Target Option */
|
|
.rpg-target-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 2px solid var(--SmartThemeBorderColor, #4a7ba7);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-target-option:hover {
|
|
background: rgba(74, 123, 167, 0.2);
|
|
border-color: var(--SmartThemeBodyColor, #eaeaea);
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.rpg-target-option.rpg-target-ally {
|
|
border-color: rgba(100, 200, 100, 0.5);
|
|
}
|
|
|
|
.rpg-target-option.rpg-target-ally:hover {
|
|
border-color: rgba(100, 200, 100, 1);
|
|
background: rgba(100, 200, 100, 0.1);
|
|
}
|
|
|
|
.rpg-target-icon {
|
|
font-size: 32px;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.rpg-target-name {
|
|
flex: 1;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--SmartThemeBodyColor, #eaeaea);
|
|
}
|
|
|
|
.rpg-target-hp {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.rpg-target-desc {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-style: italic;
|
|
}
|
|
|
|
.rpg-target-divider {
|
|
text-align: center;
|
|
color: var(--SmartThemeBodyColor, #eaeaea);
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
padding: 10px 0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Cancel Button */
|
|
.rpg-target-cancel {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background: rgba(200, 50, 50, 0.3);
|
|
border: 2px solid rgba(200, 50, 50, 0.5);
|
|
border-radius: 6px;
|
|
color: var(--SmartThemeBodyColor, #eaeaea);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-target-cancel:hover {
|
|
background: rgba(200, 50, 50, 0.5);
|
|
border-color: rgba(200, 50, 50, 0.8);
|
|
}
|
|
|
|
/* ============================================
|
|
STATUS EFFECTS
|
|
============================================ */
|
|
|
|
/* Status Effects Container */
|
|
.rpg-encounter-statuses {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Individual Status Effect */
|
|
.rpg-encounter-status {
|
|
display: inline-block;
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
padding: 4px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 4px;
|
|
cursor: help;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.rpg-encounter-status:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/* ============================================
|
|
PLOT BUTTONS - RESPONSIVE LAYOUT
|
|
============================================ */
|
|
|
|
/* Base styles for plot buttons container */
|
|
#rpg-plot-buttons {
|
|
display: flex !important;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Base button styles - ensure consistent sizing */
|
|
#rpg-plot-random,
|
|
#rpg-plot-natural,
|
|
#rpg-encounter-button {
|
|
flex: 0 1 auto;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Tablet and smaller screens - adjust button sizing */
|
|
@media (max-width: 768px) {
|
|
#rpg-plot-buttons {
|
|
gap: 3px;
|
|
}
|
|
|
|
#rpg-plot-random,
|
|
#rpg-plot-natural,
|
|
#rpg-encounter-button {
|
|
padding: 6px 10px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
}
|
|
|
|
/* Small mobile screens - more compact buttons */
|
|
@media (max-width: 600px) {
|
|
#rpg-plot-buttons {
|
|
gap: 2px;
|
|
}
|
|
|
|
#rpg-plot-random,
|
|
#rpg-plot-natural,
|
|
#rpg-encounter-button {
|
|
padding: 5px 8px !important;
|
|
font-size: 11px !important;
|
|
}
|
|
}
|
|
|
|
/* Very small screens - stack buttons vertically or use icons only */
|
|
@media (max-width: 480px) {
|
|
#rpg-plot-buttons {
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Option 1: Stack vertically (uncomment if preferred)
|
|
#rpg-plot-buttons {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
#rpg-plot-random,
|
|
#rpg-plot-natural,
|
|
#rpg-encounter-button {
|
|
width: 100%;
|
|
padding: 8px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
*/
|
|
|
|
/* Option 2: Keep horizontal but more compact (default) */
|
|
#rpg-plot-random,
|
|
#rpg-plot-natural,
|
|
#rpg-encounter-button {
|
|
padding: 6px 8px !important;
|
|
font-size: 11px !important;
|
|
}
|
|
}
|
|
|
|
/* Extra small screens - icon-only mode */
|
|
@media (max-width: 400px) {
|
|
#rpg-plot-random,
|
|
#rpg-plot-natural,
|
|
#rpg-encounter-button {
|
|
padding: 6px !important;
|
|
}
|
|
|
|
/* Hide button text, keep icons */
|
|
#rpg-plot-random .rpg-btn-text,
|
|
#rpg-plot-natural .rpg-btn-text,
|
|
#rpg-encounter-button .rpg-btn-text {
|
|
display: none;
|
|
}
|
|
|
|
/* Ensure icons are visible */
|
|
#rpg-plot-random i,
|
|
#rpg-plot-natural i,
|
|
#rpg-encounter-button i {
|
|
margin: 0 !important;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SPOTIFY MUSIC WIDGET STYLES
|
|
============================================ */
|
|
|
|
/* Music Widget Container - Positioned above chat input */
|
|
.rpg-music-widget {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(-100% - 8px));
|
|
width: calc(100% - 40px);
|
|
max-width: 650px;
|
|
z-index: 1000;
|
|
animation: rpg-music-slide-in 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes rpg-music-slide-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Widget Content - The actual player UI */
|
|
.rpg-music-widget-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 14px;
|
|
background: var(--rpg-accent);
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
border: 2px solid var(--rpg-border);
|
|
}
|
|
|
|
.rpg-music-widget-content:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 4px 8px var(--rpg-highlight);
|
|
}
|
|
|
|
/* Spotify Icon */
|
|
.rpg-music-widget-icon {
|
|
flex-shrink: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border-radius: 50%;
|
|
color: #1DB954;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Song Info Container */
|
|
.rpg-music-widget-info {
|
|
flex: 1;
|
|
min-width: 0; /* Allows text truncation */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* Song Title */
|
|
.rpg-music-widget-title {
|
|
color: var(--rpg-text);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Artist Name */
|
|
.rpg-music-widget-artist {
|
|
color: var(--rpg-text);
|
|
opacity: 0.7;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Play Button */
|
|
.rpg-music-widget-play {
|
|
flex-shrink: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--rpg-highlight);
|
|
border: none;
|
|
border-radius: 50%;
|
|
color: var(--rpg-text);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.rpg-music-widget-play:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.rpg-music-widget-play:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.rpg-music-widget-play i {
|
|
margin-left: 2px; /* Visual centering for play icon */
|
|
}
|
|
|
|
/* Close/Dismiss Button */
|
|
.rpg-music-widget-close {
|
|
flex-shrink: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: none;
|
|
border-radius: 50%;
|
|
color: var(--rpg-text);
|
|
opacity: 0.6;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, opacity 0.15s ease;
|
|
}
|
|
|
|
.rpg-music-widget-close:hover {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Mobile Responsive Styles */
|
|
@media (max-width: 1000px) {
|
|
.rpg-music-widget {
|
|
width: calc(100% - 20px);
|
|
max-width: none;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(-100% - 8px));
|
|
}
|
|
|
|
.rpg-music-widget-content {
|
|
padding: 8px 10px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.rpg-music-widget-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.rpg-music-widget-info {
|
|
gap: 1px;
|
|
}
|
|
|
|
.rpg-music-widget-title {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.rpg-music-widget-artist {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.rpg-music-widget-play {
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.rpg-music-widget-close {
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.rpg-music-widget {
|
|
width: calc(100% - 12px);
|
|
}
|
|
|
|
.rpg-music-widget-content {
|
|
padding: 6px 8px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.rpg-music-widget-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.rpg-music-widget-title {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.rpg-music-widget-artist {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.rpg-music-widget-play {
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.rpg-music-widget-close {
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
/* Theme Support - Apply theme colors */
|
|
.rpg-panel[data-theme="sci-fi"] ~ .rpg-music-widget .rpg-music-widget-content,
|
|
body[data-theme="sci-fi"] .rpg-music-widget-content {
|
|
background: linear-gradient(135deg, #8b00ff 0%, #6a00cc 50%, #5000aa 100%);
|
|
}
|
|
|
|
.rpg-panel[data-theme="sci-fi"] ~ .rpg-music-widget .rpg-music-widget-play,
|
|
body[data-theme="sci-fi"] .rpg-music-widget-play {
|
|
color: #8b00ff;
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] ~ .rpg-music-widget .rpg-music-widget-content,
|
|
body[data-theme="fantasy"] .rpg-music-widget-content {
|
|
background: linear-gradient(135deg, #d4af37 0%, #b8962e 50%, #9c7d25 100%);
|
|
}
|
|
|
|
.rpg-panel[data-theme="fantasy"] ~ .rpg-music-widget .rpg-music-widget-play,
|
|
body[data-theme="fantasy"] .rpg-music-widget-play {
|
|
color: #d4af37;
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] ~ .rpg-music-widget .rpg-music-widget-content,
|
|
body[data-theme="cyberpunk"] .rpg-music-widget-content {
|
|
background: linear-gradient(135deg, #ff2a6d 0%, #d91e58 50%, #b31848 100%);
|
|
}
|
|
|
|
.rpg-panel[data-theme="cyberpunk"] ~ .rpg-music-widget .rpg-music-widget-play,
|
|
body[data-theme="cyberpunk"] .rpg-music-widget-play {
|
|
color: #ff2a6d;
|
|
}
|
|
/* ============================================
|
|
SNOWFLAKES EFFECT
|
|
============================================ */
|
|
|
|
/* Snowflakes container - covers entire viewport */
|
|
.rpg-snowflakes-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Individual snowflake */
|
|
.rpg-snowflake {
|
|
position: absolute;
|
|
top: -10px;
|
|
color: white;
|
|
font-size: 1em;
|
|
font-family: Arial, sans-serif;
|
|
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
|
|
animation: rpg-snowfall linear infinite;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Snowfall animation */
|
|
@keyframes rpg-snowfall {
|
|
0% {
|
|
transform: translateY(0) rotate(0deg);
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
transform: translateY(100dvh) rotate(360deg);
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
/* Create variations for different snowflakes */
|
|
.rpg-snowflake:nth-child(2n) {
|
|
animation-duration: 12s;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.rpg-snowflake:nth-child(3n) {
|
|
animation-duration: 15s;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.rpg-snowflake:nth-child(4n) {
|
|
animation-duration: 18s;
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
.rpg-snowflake:nth-child(5n) {
|
|
animation-duration: 10s;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
/* Slower mobile animation for performance */
|
|
@media (max-width: 768px) {
|
|
.rpg-snowflake {
|
|
animation-duration: 20s;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
DYNAMIC WEATHER EFFECTS
|
|
============================================ */
|
|
|
|
/* Weather particles container */
|
|
.rpg-weather-particles {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
height: 100dvh; /* Dynamic viewport height for mobile browsers */
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Base particle */
|
|
.rpg-weather-particle {
|
|
position: absolute;
|
|
}
|
|
|
|
/* Rain drops */
|
|
.rpg-raindrop {
|
|
width: 2px;
|
|
height: 50px;
|
|
background: linear-gradient(to bottom, rgba(174, 194, 224, 0), rgba(174, 194, 224, 0.8));
|
|
animation: rpg-rainfall linear infinite;
|
|
top: -50px;
|
|
}
|
|
|
|
@keyframes rpg-rainfall {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
transform: translateY(100dvh);
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.rpg-raindrop:nth-child(2n) {
|
|
height: 40px;
|
|
animation-duration: 0.6s;
|
|
}
|
|
|
|
.rpg-raindrop:nth-child(3n) {
|
|
height: 60px;
|
|
animation-duration: 0.8s;
|
|
}
|
|
|
|
/* Mist/Fog layers */
|
|
.rpg-mist {
|
|
width: 100%;
|
|
height: 40%;
|
|
background: radial-gradient(ellipse at center, rgba(200, 200, 220, 0.3) 0%, transparent 70%);
|
|
animation: rpg-mistFloat ease-in-out infinite;
|
|
top: 30%;
|
|
}
|
|
|
|
@keyframes rpg-mistFloat {
|
|
0%, 100% {
|
|
transform: translateX(-10%) scale(1);
|
|
opacity: 0.15;
|
|
}
|
|
50% {
|
|
transform: translateX(10%) scale(1.1);
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
|
|
.rpg-mist:nth-child(2) {
|
|
top: 10%;
|
|
background: radial-gradient(ellipse at center, rgba(180, 180, 200, 0.2) 0%, transparent 70%);
|
|
}
|
|
|
|
.rpg-mist:nth-child(3) {
|
|
top: 50%;
|
|
background: radial-gradient(ellipse at center, rgba(220, 220, 240, 0.25) 0%, transparent 70%);
|
|
}
|
|
|
|
/* Clear/Sunny Weather Effects */
|
|
|
|
/* Container modifier for clear weather */
|
|
.rpg-clear-weather {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Warm ambient glow overlay */
|
|
.rpg-clear-ambient-glow {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(ellipse at 15% 10%,
|
|
rgba(255, 245, 200, 0.15) 0%,
|
|
rgba(255, 240, 180, 0.08) 30%,
|
|
transparent 70%);
|
|
animation: rpg-clear-ambient-pulse 8s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-clear-ambient-pulse {
|
|
0%, 100% {
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Floating dust motes / pollen particles */
|
|
.rpg-clear-dust-mote {
|
|
position: fixed;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 30% 30%,
|
|
rgba(255, 250, 220, 0.9) 0%,
|
|
rgba(255, 235, 180, 0.6) 50%,
|
|
rgba(255, 220, 150, 0) 100%);
|
|
box-shadow: 0 0 6px 2px rgba(255, 245, 200, 0.4);
|
|
animation: rpg-clear-dust-float linear infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-clear-dust-float {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 0.8;
|
|
}
|
|
50% {
|
|
transform: translate(30px, -50px) scale(1.2);
|
|
opacity: 0.6;
|
|
}
|
|
90% {
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
transform: translate(60px, -100px) scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Soft drifting light orbs */
|
|
.rpg-clear-light-orb {
|
|
position: fixed;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at center,
|
|
rgba(255, 250, 230, 0.12) 0%,
|
|
rgba(255, 245, 200, 0.06) 40%,
|
|
transparent 70%);
|
|
filter: blur(20px);
|
|
animation: rpg-clear-orb-drift ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-clear-orb-drift {
|
|
0%, 100% {
|
|
transform: translate(0, 0) scale(1);
|
|
opacity: 0.4;
|
|
}
|
|
25% {
|
|
transform: translate(20px, 15px) scale(1.1);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: translate(-10px, 30px) scale(0.95);
|
|
opacity: 0.5;
|
|
}
|
|
75% {
|
|
transform: translate(-25px, 10px) scale(1.05);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/* Sun - positioned dynamically based on hour */
|
|
.rpg-clear-sun {
|
|
position: fixed;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: radial-gradient(circle at 40% 40%,
|
|
rgba(255, 255, 240, 1) 0%,
|
|
rgba(255, 250, 200, 1) 30%,
|
|
rgba(255, 220, 120, 0.9) 60%,
|
|
rgba(255, 180, 80, 0.6) 80%,
|
|
rgba(255, 150, 50, 0) 100%);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 30px 10px rgba(255, 220, 100, 0.5),
|
|
0 0 60px 20px rgba(255, 200, 80, 0.3),
|
|
0 0 100px 40px rgba(255, 180, 60, 0.15);
|
|
transform: translate(-50%, -50%);
|
|
animation: rpg-clear-sun-pulse 8s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-clear-sun-pulse {
|
|
0%, 100% {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
box-shadow:
|
|
0 0 30px 10px rgba(255, 220, 100, 0.5),
|
|
0 0 60px 20px rgba(255, 200, 80, 0.3),
|
|
0 0 100px 40px rgba(255, 180, 60, 0.15);
|
|
}
|
|
50% {
|
|
transform: translate(-50%, -50%) scale(1.05);
|
|
box-shadow:
|
|
0 0 35px 12px rgba(255, 220, 100, 0.6),
|
|
0 0 70px 25px rgba(255, 200, 80, 0.35),
|
|
0 0 110px 45px rgba(255, 180, 60, 0.2);
|
|
}
|
|
}
|
|
|
|
/* Sun glow aura */
|
|
.rpg-clear-sun-glow {
|
|
position: fixed;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: radial-gradient(circle at center,
|
|
rgba(255, 240, 180, 0.25) 0%,
|
|
rgba(255, 220, 150, 0.15) 30%,
|
|
rgba(255, 200, 120, 0.08) 50%,
|
|
transparent 70%);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
filter: blur(8px);
|
|
animation: rpg-clear-sun-glow-pulse 6s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-clear-sun-glow-pulse {
|
|
0%, 100% {
|
|
opacity: 0.7;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1.15);
|
|
}
|
|
}
|
|
|
|
/* Lens flare effect */
|
|
.rpg-clear-lens-flare {
|
|
position: fixed;
|
|
top: 5%;
|
|
left: 10%;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: radial-gradient(circle at center,
|
|
rgba(255, 255, 255, 0.3) 0%,
|
|
rgba(255, 250, 220, 0.15) 20%,
|
|
rgba(255, 240, 180, 0.08) 40%,
|
|
transparent 60%);
|
|
border-radius: 50%;
|
|
animation: rpg-clear-lens-flare-pulse 6s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rpg-clear-lens-flare::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 60px;
|
|
height: 60px;
|
|
transform: translate(-50%, -50%);
|
|
background: radial-gradient(circle at center,
|
|
rgba(255, 255, 255, 0.5) 0%,
|
|
rgba(255, 250, 230, 0.2) 50%,
|
|
transparent 70%);
|
|
border-radius: 50%;
|
|
animation: rpg-clear-lens-core-pulse 4s ease-in-out infinite;
|
|
}
|
|
|
|
.rpg-clear-lens-flare::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 120%;
|
|
left: 150%;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: radial-gradient(circle at center,
|
|
rgba(255, 200, 150, 0.4) 0%,
|
|
rgba(255, 180, 100, 0.1) 50%,
|
|
transparent 70%);
|
|
border-radius: 50%;
|
|
animation: rpg-clear-secondary-flare 8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes rpg-clear-lens-flare-pulse {
|
|
0%, 100% {
|
|
opacity: 0.7;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes rpg-clear-lens-core-pulse {
|
|
0%, 100% {
|
|
opacity: 0.8;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1.15);
|
|
}
|
|
}
|
|
|
|
@keyframes rpg-clear-secondary-flare {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: scale(1);
|
|
}
|
|
30% {
|
|
opacity: 0.6;
|
|
transform: scale(1.2);
|
|
}
|
|
70% {
|
|
opacity: 0.4;
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
/* ===== Nighttime Clear Weather Effects ===== */
|
|
|
|
/* Container modifier for night weather */
|
|
.rpg-night-weather {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Dark blue night overlay */
|
|
.rpg-night-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom,
|
|
rgba(10, 15, 40, 0.3) 0%,
|
|
rgba(15, 25, 55, 0.2) 40%,
|
|
rgba(20, 30, 60, 0.15) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Moon */
|
|
.rpg-night-moon {
|
|
position: fixed;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: radial-gradient(circle at 35% 35%,
|
|
rgba(255, 255, 245, 1) 0%,
|
|
rgba(240, 240, 230, 0.95) 40%,
|
|
rgba(220, 220, 210, 0.9) 60%,
|
|
rgba(200, 200, 195, 0.8) 80%,
|
|
rgba(180, 180, 175, 0) 100%);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 20px 5px rgba(255, 255, 240, 0.4),
|
|
0 0 40px 10px rgba(200, 210, 255, 0.2),
|
|
inset -8px -5px 15px rgba(150, 150, 140, 0.3);
|
|
animation: rpg-night-moon-float 30s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-night-moon-float {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(10px);
|
|
}
|
|
}
|
|
|
|
/* Moon glow aura */
|
|
.rpg-night-moon-glow {
|
|
position: fixed;
|
|
width: 120px;
|
|
height: 120px;
|
|
background: radial-gradient(circle at center,
|
|
rgba(200, 220, 255, 0.15) 0%,
|
|
rgba(180, 200, 240, 0.08) 40%,
|
|
transparent 70%);
|
|
border-radius: 50%;
|
|
filter: blur(10px);
|
|
animation: rpg-night-moon-glow-pulse 8s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-night-moon-glow-pulse {
|
|
0%, 100% {
|
|
opacity: 0.6;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
/* Twinkling stars */
|
|
.rpg-night-star {
|
|
position: fixed;
|
|
background: radial-gradient(circle at center,
|
|
rgba(255, 255, 255, 1) 0%,
|
|
rgba(200, 220, 255, 0.8) 40%,
|
|
transparent 70%);
|
|
border-radius: 50%;
|
|
animation: rpg-night-star-twinkle ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-night-star-twinkle {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
|
|
/* Brighter stars with cross-flare effect */
|
|
.rpg-night-star-bright {
|
|
width: 4px !important;
|
|
height: 4px !important;
|
|
background: rgba(255, 255, 255, 1);
|
|
box-shadow:
|
|
0 0 4px 2px rgba(255, 255, 255, 0.8),
|
|
0 0 8px 4px rgba(200, 220, 255, 0.4);
|
|
}
|
|
|
|
.rpg-night-star-bright::before,
|
|
.rpg-night-star-bright::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(255, 255, 255, 0.8) 45%,
|
|
rgba(255, 255, 255, 1) 50%,
|
|
rgba(255, 255, 255, 0.8) 55%,
|
|
transparent 100%);
|
|
}
|
|
|
|
.rpg-night-star-bright::before {
|
|
width: 16px;
|
|
height: 2px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.rpg-night-star-bright::after {
|
|
width: 2px;
|
|
height: 16px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* Fireflies */
|
|
.rpg-night-firefly {
|
|
position: fixed;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: radial-gradient(circle at center,
|
|
rgba(200, 255, 150, 1) 0%,
|
|
rgba(180, 255, 120, 0.8) 30%,
|
|
rgba(150, 230, 100, 0.4) 60%,
|
|
transparent 100%);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 6px 3px rgba(180, 255, 120, 0.6),
|
|
0 0 12px 6px rgba(150, 230, 100, 0.3);
|
|
animation: rpg-night-firefly-float ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-night-firefly-float {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, 0) scale(0.5);
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
transform: translate(5px, -10px) scale(1);
|
|
}
|
|
30% {
|
|
opacity: 0.3;
|
|
transform: translate(-15px, -25px) scale(0.8);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: translate(10px, -40px) scale(1.1);
|
|
}
|
|
70% {
|
|
opacity: 0.4;
|
|
transform: translate(-10px, -55px) scale(0.9);
|
|
}
|
|
90% {
|
|
opacity: 0.8;
|
|
transform: translate(5px, -70px) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate(0, -80px) scale(0.5);
|
|
}
|
|
}
|
|
|
|
/* Shooting star */
|
|
.rpg-night-shooting-star {
|
|
position: fixed;
|
|
top: 15%;
|
|
left: -10%;
|
|
width: 100px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(255, 255, 255, 0.2) 20%,
|
|
rgba(255, 255, 255, 0.8) 60%,
|
|
rgba(255, 255, 255, 1) 100%);
|
|
border-radius: 50%;
|
|
transform: rotate(35deg);
|
|
animation: rpg-night-shooting-star-fly 12s ease-in-out infinite;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.rpg-night-shooting-star::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 6px;
|
|
height: 6px;
|
|
background: rgba(255, 255, 255, 1);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
@keyframes rpg-night-shooting-star-fly {
|
|
0%, 85%, 100% {
|
|
opacity: 0;
|
|
left: -10%;
|
|
top: 15%;
|
|
}
|
|
88% {
|
|
opacity: 1;
|
|
}
|
|
95% {
|
|
opacity: 1;
|
|
left: 110%;
|
|
top: 45%;
|
|
}
|
|
96% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Mobile optimizations */
|
|
@media (max-width: 768px) {
|
|
.rpg-raindrop {
|
|
animation-duration: 1s !important;
|
|
}
|
|
|
|
.rpg-mist {
|
|
animation-duration: 20s;
|
|
}
|
|
|
|
/* Clear weather mobile optimizations */
|
|
.rpg-clear-dust-mote {
|
|
animation-duration: 15s;
|
|
}
|
|
|
|
.rpg-clear-light-orb {
|
|
animation-duration: 25s;
|
|
filter: blur(15px);
|
|
}
|
|
|
|
.rpg-clear-lens-flare {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
/* Sun mobile optimizations */
|
|
.rpg-clear-sun {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.rpg-clear-sun-glow {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
/* Nighttime mobile optimizations */
|
|
.rpg-night-moon {
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
|
|
.rpg-night-moon-glow {
|
|
width: 90px;
|
|
height: 90px;
|
|
}
|
|
|
|
.rpg-night-firefly {
|
|
animation-duration: 12s;
|
|
}
|
|
|
|
.rpg-night-shooting-star {
|
|
animation-duration: 18s;
|
|
}
|
|
}
|
|
|
|
/* Foreground mode - reduced opacity for celestial bodies to not obstruct content */
|
|
.rpg-weather-foreground .rpg-clear-sun {
|
|
opacity: 0.5;
|
|
box-shadow:
|
|
0 0 20px 8px rgba(255, 220, 100, 0.3),
|
|
0 0 40px 15px rgba(255, 200, 80, 0.15),
|
|
0 0 60px 25px rgba(255, 180, 60, 0.08);
|
|
}
|
|
|
|
.rpg-weather-foreground .rpg-clear-sun-glow {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.rpg-weather-foreground .rpg-clear-lens-flare {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.rpg-weather-foreground .rpg-clear-ambient-glow {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.rpg-weather-foreground .rpg-night-moon {
|
|
opacity: 0.7;
|
|
box-shadow:
|
|
0 0 15px 4px rgba(255, 255, 240, 0.25),
|
|
0 0 30px 8px rgba(200, 210, 255, 0.12);
|
|
}
|
|
|
|
.rpg-weather-foreground .rpg-night-moon-glow {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.rpg-weather-foreground .rpg-night-overlay {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.rpg-weather-foreground .rpg-night-star,
|
|
.rpg-weather-foreground .rpg-night-star-bright {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.rpg-weather-foreground .rpg-night-firefly {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Lightning flash effect */
|
|
.rpg-lightning {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0);
|
|
animation: rpg-lightningFlash 6s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes rpg-lightningFlash {
|
|
0%, 100% {
|
|
background: rgba(255, 255, 255, 0);
|
|
}
|
|
10% {
|
|
background: rgba(200, 220, 255, 0.4);
|
|
}
|
|
10.5% {
|
|
background: rgba(255, 255, 255, 0);
|
|
}
|
|
11% {
|
|
background: rgba(220, 235, 255, 0.6);
|
|
}
|
|
11.3% {
|
|
background: rgba(255, 255, 255, 0);
|
|
}
|
|
45% {
|
|
background: rgba(255, 255, 255, 0);
|
|
}
|
|
45.2% {
|
|
background: rgba(210, 225, 255, 0.5);
|
|
}
|
|
45.5% {
|
|
background: rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
|
|
/* Wind streaks effect */
|
|
.rpg-wind-streak {
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 2px;
|
|
background: linear-gradient(to right, rgba(200, 200, 220, 0), rgba(200, 200, 220, 0.5), rgba(200, 200, 220, 0));
|
|
animation: rpg-windBlow linear infinite;
|
|
left: -100px;
|
|
opacity: 0.6;
|
|
transform: skewX(-20deg);
|
|
}
|
|
|
|
@keyframes rpg-windBlow {
|
|
0% {
|
|
transform: translateX(0) skewX(-20deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 0.6;
|
|
}
|
|
90% {
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
transform: translateX(calc(100vw + 100px)) skewX(-20deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rpg-wind-streak:nth-child(2n) {
|
|
width: 100px;
|
|
animation-duration: 2s;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.rpg-wind-streak:nth-child(3n) {
|
|
width: 60px;
|
|
animation-duration: 1.8s;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.rpg-wind-streak:nth-child(4n) {
|
|
height: 1px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Mobile optimizations for new effects */
|
|
@media (max-width: 768px) {
|
|
.rpg-wind-streak {
|
|
animation-duration: 2.5s !important;
|
|
}
|
|
|
|
.rpg-lightning {
|
|
animation-duration: 8s;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
HOLIDAY PROMOTION BANNER
|
|
============================================ */
|
|
|
|
/* Mobile-friendly holiday promo */
|
|
.rpg-holiday-promo {
|
|
max-width: 100%;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.rpg-holiday-promo a {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Dismiss button hover effect */
|
|
#rpg-dismiss-promo:hover {
|
|
opacity: 1 !important;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Mobile responsiveness */
|
|
@media (max-width: 600px) {
|
|
.rpg-holiday-promo {
|
|
font-size: 10px !important;
|
|
padding: 10px 8px !important;
|
|
}
|
|
|
|
#rpg-dismiss-promo {
|
|
font-size: 12px !important;
|
|
top: 2px !important;
|
|
right: 2px !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
THREE-COLUMN FEATURE TOGGLES LAYOUT
|
|
============================================ */
|
|
|
|
/* Features row container */
|
|
.rpg-features-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
flex-wrap: nowrap;
|
|
padding: 0 4px; /* Prevent first/last items from being cut off */
|
|
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
|
|
}
|
|
|
|
/* Center items when they fit, allow scrolling when they don't */
|
|
.rpg-features-row::before,
|
|
.rpg-features-row::after {
|
|
content: '';
|
|
margin: auto;
|
|
}
|
|
|
|
/* Hide scrollbar for cleaner look while maintaining functionality */
|
|
.rpg-features-row::-webkit-scrollbar {
|
|
height: 4px;
|
|
}
|
|
|
|
.rpg-features-row::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.rpg-features-row::-webkit-scrollbar-thumb {
|
|
background: rgba(128, 128, 128, 0.3);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-features-row::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(128, 128, 128, 0.5);
|
|
}
|
|
|
|
/* Each feature column */
|
|
.rpg-feature-col {
|
|
flex: 0 0 auto;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.rpg-feature-col .rpg-toggle-label {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Always hide text, show only checkbox + icon */
|
|
.rpg-feature-col .rpg-toggle-text {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-feature-col .rpg-toggle-label i {
|
|
font-size: 0.95rem;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Tablet and below: Hide text, show only checkbox + icon */
|
|
@media (max-width: 768px) {
|
|
.rpg-feature-col .rpg-toggle-text {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-feature-col .rpg-toggle-label i {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Very small screens: Remove column layout since we have horizontal scroll */
|
|
@media (max-width: 400px) {
|
|
.rpg-feature-col .rpg-toggle-label i {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Ensure send_form has relative positioning for music widget placement */
|
|
#send_form {
|
|
position: relative !important;
|
|
}
|
|
|
|
/* ============================================
|
|
IMPORT MODE DIALOG STYLES
|
|
============================================ */
|
|
|
|
/* Import Mode Dialog Overlay */
|
|
.rpg-import-dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100000;
|
|
}
|
|
|
|
.rpg-import-dialog {
|
|
background: var(--SmartThemeBlurTintColor, #2a2a3e);
|
|
border: 1px solid var(--SmartThemeBorderColor, #4a4a4a);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
min-width: 300px;
|
|
max-width: 400px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.rpg-import-dialog h4 {
|
|
margin: 0 0 15px 0;
|
|
color: var(--SmartThemeBodyColor, #eee);
|
|
}
|
|
|
|
.rpg-import-dialog h4 i {
|
|
margin-right: 8px;
|
|
color: var(--SmartThemeQuoteColor, #e94560);
|
|
}
|
|
|
|
.rpg-import-dialog p {
|
|
margin: 0 0 20px 0;
|
|
color: var(--SmartThemeBodyColor, #ccc);
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.rpg-import-dialog-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.rpg-import-dialog-buttons button {
|
|
padding: 10px 15px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.95em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-secondary {
|
|
background: var(--black30a, rgba(0, 0, 0, 0.3));
|
|
border: 1px solid var(--SmartThemeBorderColor, #4a4a4a);
|
|
color: var(--SmartThemeBodyColor, #ccc);
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-secondary:hover {
|
|
background: var(--SmartThemeBorderColor, #4a4a4a);
|
|
color: white;
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-primary {
|
|
background: var(--SmartThemeQuoteColor, #e94560);
|
|
border: 1px solid var(--SmartThemeQuoteColor, #e94560);
|
|
color: white;
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-primary:hover {
|
|
background: var(--SmartThemeQuoteColor, #ff5a75);
|
|
border-color: var(--SmartThemeQuoteColor, #ff5a75);
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-cancel {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--SmartThemeBodyColor, #888);
|
|
cursor: pointer;
|
|
font-size: 0.85em;
|
|
padding: 5px;
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-cancel:hover {
|
|
color: var(--SmartThemeBodyColor, #ccc);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================================
|
|
FAB Widget System - Improved Layout
|
|
============================================ */
|
|
|
|
/* Widget container - positioned relative to FAB */
|
|
.rpg-fab-widget-container {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 9998;
|
|
}
|
|
|
|
/* Hide FAB widgets on desktop viewport */
|
|
@media (min-width: 1001px) {
|
|
.rpg-fab-widget-container {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Individual widget base styling */
|
|
.rpg-fab-widget {
|
|
position: absolute;
|
|
pointer-events: auto;
|
|
background: rgba(20, 20, 35, 0.95);
|
|
border: 1px solid rgba(100, 150, 255, 0.3);
|
|
border-radius: 8px;
|
|
padding: 6px 10px;
|
|
font-size: 11px;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), 0 0 1px rgba(100, 150, 255, 0.3);
|
|
transition: opacity 0.2s ease, transform 0.15s ease;
|
|
}
|
|
|
|
.rpg-fab-widget:hover {
|
|
border-color: rgba(100, 150, 255, 0.5);
|
|
}
|
|
|
|
/* Expanded state for truncated widgets - desktop hover and mobile tap */
|
|
.rpg-fab-widget[data-full-text]:hover,
|
|
.rpg-fab-widget[data-full-text].expanded {
|
|
z-index: 9999 !important;
|
|
max-width: none !important;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rpg-fab-widget[data-full-text]:hover .rpg-fab-widget-text,
|
|
.rpg-fab-widget[data-full-text].expanded .rpg-fab-widget-text {
|
|
/* Show full text on hover/tap */
|
|
}
|
|
|
|
/* Hide truncated text and show full text on expand */
|
|
.rpg-fab-widget[data-full-text]:hover .rpg-truncated,
|
|
.rpg-fab-widget[data-full-text].expanded .rpg-truncated {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-fab-widget[data-full-text]:hover .rpg-full-text,
|
|
.rpg-fab-widget[data-full-text].expanded .rpg-full-text {
|
|
display: inline;
|
|
}
|
|
|
|
/* Default: show truncated, hide full */
|
|
.rpg-fab-widget .rpg-full-text {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-fab-widget .rpg-truncated {
|
|
display: inline;
|
|
}
|
|
|
|
/* 8-Position system - spread out more to avoid overlap
|
|
Positions: 0=N, 1=NE, 2=E, 3=SE, 4=S, 5=SW, 6=W, 7=NW */
|
|
|
|
/* Position 0: North (top center) */
|
|
.rpg-fab-widget-pos-0 {
|
|
bottom: calc(100% + 15px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.rpg-fab-widget-pos-0:hover { transform: translateX(-50%) scale(1.05); }
|
|
|
|
/* Position 1: Northeast */
|
|
.rpg-fab-widget-pos-1 {
|
|
bottom: calc(100% + 10px);
|
|
left: calc(100% + 15px);
|
|
}
|
|
|
|
/* Position 2: East (right center) */
|
|
.rpg-fab-widget-pos-2 {
|
|
top: 50%;
|
|
left: calc(100% + 15px);
|
|
transform: translateY(-50%);
|
|
}
|
|
.rpg-fab-widget-pos-2:hover { transform: translateY(-50%) scale(1.05); }
|
|
|
|
/* Position 3: Southeast */
|
|
.rpg-fab-widget-pos-3 {
|
|
top: calc(100% + 10px);
|
|
left: calc(100% + 15px);
|
|
}
|
|
|
|
/* Position 4: South (bottom center) */
|
|
.rpg-fab-widget-pos-4 {
|
|
top: calc(100% + 15px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.rpg-fab-widget-pos-4:hover { transform: translateX(-50%) scale(1.05); }
|
|
|
|
/* Position 5: Southwest */
|
|
.rpg-fab-widget-pos-5 {
|
|
top: calc(100% + 10px);
|
|
right: calc(100% + 15px);
|
|
left: auto;
|
|
}
|
|
|
|
/* Position 6: West - Stats (top edge at FAB center + gap, grows DOWN) */
|
|
.rpg-fab-widget-pos-6 {
|
|
top: calc(50% + 8px);
|
|
right: calc(100% + 15px);
|
|
left: auto;
|
|
}
|
|
|
|
/* Position 7: Northwest - Attributes (bottom edge at FAB center - gap, grows UP) */
|
|
.rpg-fab-widget-pos-7 {
|
|
bottom: calc(50% + 8px);
|
|
right: calc(100% + 15px);
|
|
left: auto;
|
|
}
|
|
|
|
/* Centered large widget (when only one is visible) - vertically centered */
|
|
.rpg-fab-widget-centered.rpg-fab-widget-pos-6,
|
|
.rpg-fab-widget-centered.rpg-fab-widget-pos-7 {
|
|
top: 50%;
|
|
bottom: auto;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* Weather icon widget - larger emoji display */
|
|
.rpg-fab-widget-weather-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
padding: 6px;
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Weather description widget */
|
|
.rpg-fab-widget-weather-desc {
|
|
max-width: 100px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Clock/Time widget - bottom position with animated clock */
|
|
.rpg-fab-widget-clock {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-family: 'Roboto Mono', 'Consolas', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.5px;
|
|
padding: 4px 8px;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* Mini animated clock face */
|
|
.rpg-fab-clock-face {
|
|
position: relative;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2px solid var(--rpg-border, #4a7ba7);
|
|
border-radius: 50%;
|
|
background: var(--rpg-accent, rgba(22, 33, 62, 0.9));
|
|
}
|
|
|
|
.rpg-fab-clock-hour {
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 7px;
|
|
background: var(--rpg-text, #eaeaea);
|
|
left: 50%;
|
|
bottom: 50%;
|
|
margin-left: -1px;
|
|
transform-origin: bottom center;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.rpg-fab-clock-minute {
|
|
position: absolute;
|
|
width: 1.5px;
|
|
height: 9px;
|
|
background: var(--rpg-highlight, #4a90e2);
|
|
left: 50%;
|
|
bottom: 50%;
|
|
margin-left: -0.75px;
|
|
transform-origin: bottom center;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.rpg-fab-clock-center {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: var(--rpg-highlight, #4a90e2);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.rpg-fab-clock-time {
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Date widget */
|
|
.rpg-fab-widget-date {
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Location widget - two lines */
|
|
.rpg-fab-widget-location {
|
|
max-width: 90px;
|
|
font-size: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Attributes widget - compact grid */
|
|
.rpg-fab-widget-attributes {
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.rpg-fab-widget-attr-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 4px;
|
|
}
|
|
|
|
.rpg-fab-widget-attr-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.rpg-fab-widget-attr-name {
|
|
font-size: 8px;
|
|
opacity: 0.7;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.rpg-fab-widget-attr-value {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: var(--rpg-highlight, #4a90e2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Stats widget - vertical compact list */
|
|
.rpg-fab-widget-stats {
|
|
padding: 6px 10px;
|
|
min-width: 70px;
|
|
text-align: center;
|
|
}
|
|
|
|
.rpg-fab-widget-stats-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.rpg-fab-widget-stat-item {
|
|
font-size: 11px;
|
|
font-family: 'Roboto Mono', 'Consolas', monospace;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
display: block;
|
|
}
|
|
|
|
/* RPG Attributes widget - 2x3 grid */
|
|
.rpg-fab-widget-attributes {
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.rpg-fab-widget-attr-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2px 10px;
|
|
}
|
|
|
|
.rpg-fab-widget-attr-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.rpg-fab-widget-attr-name {
|
|
font-size: 8px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.rpg-fab-widget-attr-value {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #6af;
|
|
font-family: 'Roboto Mono', 'Consolas', monospace;
|
|
}
|
|
|
|
/* FAB Loading State */
|
|
#rpg-mobile-toggle.rpg-fab-loading {
|
|
animation: fabSpin 1s linear infinite;
|
|
}
|
|
|
|
#rpg-mobile-toggle.rpg-fab-loading i {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
@keyframes fabSpin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ============================================
|
|
FAB WIDGET THEME VARIATIONS
|
|
============================================ */
|
|
|
|
/* Sci-Fi / Synthwave Theme for FAB Widgets */
|
|
body:has(.rpg-panel[data-theme="sci-fi"]) .rpg-fab-widget {
|
|
background: rgba(10, 14, 39, 0.95);
|
|
border: 1px solid rgba(139, 0, 255, 0.5);
|
|
color: #00fff9;
|
|
box-shadow: 0 3px 12px rgba(139, 0, 255, 0.3), 0 0 8px rgba(255, 0, 110, 0.2);
|
|
}
|
|
|
|
body:has(.rpg-panel[data-theme="sci-fi"]) .rpg-fab-widget:hover {
|
|
border-color: rgba(255, 0, 110, 0.7);
|
|
box-shadow: 0 4px 16px rgba(139, 0, 255, 0.5), 0 0 12px rgba(255, 0, 110, 0.4);
|
|
}
|
|
|
|
/* Fantasy / Rustic Theme for FAB Widgets */
|
|
body:has(.rpg-panel[data-theme="fantasy"]) .rpg-fab-widget {
|
|
background: rgba(43, 24, 16, 0.95);
|
|
border: 1px solid rgba(139, 105, 20, 0.6);
|
|
color: #f4e8d0;
|
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6), 0 0 1px rgba(212, 175, 55, 0.3);
|
|
}
|
|
|
|
body:has(.rpg-panel[data-theme="fantasy"]) .rpg-fab-widget:hover {
|
|
border-color: rgba(212, 175, 55, 0.8);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 8px rgba(212, 175, 55, 0.4);
|
|
}
|
|
|
|
/* Cyberpunk Theme for FAB Widgets */
|
|
body:has(.rpg-panel[data-theme="cyberpunk"]) .rpg-fab-widget {
|
|
background: rgba(15, 5, 25, 0.95);
|
|
border: 1px solid rgba(255, 0, 255, 0.4);
|
|
color: #00ffff;
|
|
box-shadow: 0 3px 12px rgba(255, 0, 255, 0.3), 0 0 8px rgba(0, 255, 255, 0.2);
|
|
}
|
|
|
|
body:has(.rpg-panel[data-theme="cyberpunk"]) .rpg-fab-widget:hover {
|
|
border-color: rgba(0, 255, 255, 0.7);
|
|
box-shadow: 0 4px 16px rgba(255, 0, 255, 0.5), 0 0 12px rgba(0, 255, 255, 0.4);
|
|
}
|
|
|
|
/* Minimal Theme for FAB Widgets */
|
|
body:has(.rpg-panel[data-theme="minimal"]) .rpg-fab-widget {
|
|
background: rgba(245, 245, 250, 0.98);
|
|
border: 1px solid rgba(200, 200, 210, 0.8);
|
|
color: #2c3e50;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
body:has(.rpg-panel[data-theme="minimal"]) .rpg-fab-widget:hover {
|
|
border-color: rgba(52, 152, 219, 0.6);
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Dark Theme for FAB Widgets */
|
|
body:has(.rpg-panel[data-theme="dark"]) .rpg-fab-widget {
|
|
background: rgba(25, 25, 35, 0.95);
|
|
border: 1px solid rgba(70, 70, 90, 0.6);
|
|
color: #e0e0e0;
|
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
body:has(.rpg-panel[data-theme="dark"]) .rpg-fab-widget:hover {
|
|
border-color: rgba(100, 100, 130, 0.8);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
/* Light Theme for FAB Widgets */
|
|
body:has(.rpg-panel[data-theme="light"]) .rpg-fab-widget {
|
|
background: rgba(255, 255, 255, 0.98);
|
|
border: 1px solid rgba(220, 220, 230, 0.8);
|
|
color: #2c3e50;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
body:has(.rpg-panel[data-theme="light"]) .rpg-fab-widget:hover {
|
|
border-color: rgba(52, 152, 219, 0.6);
|
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* ============================================
|
|
DESKTOP STRIP WIDGETS (Collapsed Panel)
|
|
Shows compact widgets when panel is collapsed
|
|
============================================ */
|
|
|
|
/* Strip Widget Container - hidden by default, shown when collapsed with strip widgets enabled */
|
|
.rpg-strip-widget-container {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 4px;
|
|
padding-top: 40px;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--rpg-border) transparent;
|
|
}
|
|
|
|
/* Show strip widgets when panel is collapsed and strip widgets are enabled */
|
|
.rpg-panel.rpg-collapsed.rpg-strip-widgets-enabled .rpg-strip-widget-container {
|
|
display: flex;
|
|
}
|
|
|
|
/* Wider collapsed state when strip widgets are enabled */
|
|
.rpg-panel.rpg-collapsed.rpg-strip-widgets-enabled {
|
|
max-width: 5rem !important;
|
|
min-width: 5rem !important;
|
|
}
|
|
|
|
/* Adjust collapse button position for wider strip */
|
|
.rpg-panel.rpg-collapsed.rpg-strip-widgets-enabled .rpg-collapse-toggle {
|
|
left: -2rem;
|
|
}
|
|
|
|
.rpg-panel.rpg-position-left.rpg-collapsed.rpg-strip-widgets-enabled .rpg-collapse-toggle {
|
|
left: auto;
|
|
right: -2rem;
|
|
}
|
|
|
|
/* Fix positioning for wider strip */
|
|
.rpg-panel.rpg-position-right.rpg-collapsed.rpg-strip-widgets-enabled {
|
|
left: calc(100vw - 5rem);
|
|
}
|
|
|
|
.rpg-panel.rpg-position-left.rpg-collapsed.rpg-strip-widgets-enabled {
|
|
right: calc(100vw - 5rem);
|
|
}
|
|
|
|
/* Base Strip Widget Styles */
|
|
.rpg-strip-widget {
|
|
display: none; /* Hidden by default, shown via JS when enabled */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(20, 20, 35, 0.85);
|
|
border: 1px solid var(--rpg-border, rgba(100, 150, 255, 0.3));
|
|
border-radius: 6px;
|
|
padding: 4px;
|
|
font-size: 10px;
|
|
color: var(--rpg-text, #eaeaea);
|
|
backdrop-filter: blur(8px);
|
|
width: calc(100% - 8px);
|
|
min-width: 0;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-strip-widget.rpg-strip-widget-visible {
|
|
display: flex;
|
|
}
|
|
|
|
.rpg-strip-widget:hover {
|
|
border-color: var(--rpg-highlight, #4a90e2);
|
|
box-shadow: 0 0 8px rgba(100, 150, 255, 0.3);
|
|
}
|
|
|
|
/* Weather Icon Widget */
|
|
.rpg-strip-widget-weather {
|
|
font-size: 18px;
|
|
padding: 6px 4px;
|
|
gap: 2px;
|
|
}
|
|
|
|
.rpg-strip-widget-weather .rpg-strip-widget-icon {
|
|
line-height: 1;
|
|
}
|
|
|
|
.rpg-strip-widget-weather .rpg-strip-widget-desc {
|
|
font-size: 8px;
|
|
opacity: 0.8;
|
|
text-align: center;
|
|
word-break: break-word;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Clock Widget with animated face */
|
|
.rpg-strip-widget-clock {
|
|
font-family: 'Roboto Mono', 'Consolas', monospace;
|
|
font-size: 10px;
|
|
gap: 4px;
|
|
padding: 6px 4px;
|
|
}
|
|
|
|
/* Mini animated clock face for strip */
|
|
.rpg-strip-clock-face {
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 2px solid var(--rpg-border, #4a7ba7);
|
|
border-radius: 50%;
|
|
background: var(--rpg-accent, rgba(22, 33, 62, 0.9));
|
|
}
|
|
|
|
.rpg-strip-clock-hour {
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 8px;
|
|
background: var(--rpg-text, #eaeaea);
|
|
left: 50%;
|
|
bottom: 50%;
|
|
margin-left: -1px;
|
|
transform-origin: bottom center;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.rpg-strip-clock-minute {
|
|
position: absolute;
|
|
width: 1.5px;
|
|
height: 10px;
|
|
background: var(--rpg-highlight, #4a90e2);
|
|
left: 50%;
|
|
bottom: 50%;
|
|
margin-left: -0.75px;
|
|
transform-origin: bottom center;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.rpg-strip-clock-center {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: var(--rpg-highlight, #4a90e2);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.rpg-strip-widget-clock .rpg-strip-widget-value {
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Date Widget */
|
|
.rpg-strip-widget-date {
|
|
font-size: 9px;
|
|
text-align: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.rpg-strip-widget-date i {
|
|
font-size: 11px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.rpg-strip-widget-date .rpg-strip-widget-value {
|
|
word-break: break-word;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Location Widget */
|
|
.rpg-strip-widget-location {
|
|
font-size: 9px;
|
|
text-align: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.rpg-strip-widget-location i {
|
|
font-size: 11px;
|
|
color: var(--rpg-highlight, #4a90e2);
|
|
}
|
|
|
|
.rpg-strip-widget-location .rpg-strip-widget-value {
|
|
word-break: break-word;
|
|
line-height: 1.2;
|
|
max-height: 3em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Stats Widget - Vertical list */
|
|
.rpg-strip-widget-stats {
|
|
padding: 4px 2px;
|
|
}
|
|
|
|
.rpg-strip-stats-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
width: 100%;
|
|
}
|
|
|
|
.rpg-strip-stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-family: 'Roboto Mono', 'Consolas', monospace;
|
|
font-size: 9px;
|
|
width: 100%;
|
|
}
|
|
|
|
.rpg-strip-stat-name {
|
|
font-size: 7px;
|
|
opacity: 0.6;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.rpg-strip-stat-value {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Attributes Widget - 2-column grid */
|
|
.rpg-strip-widget-attributes {
|
|
padding: 4px 2px;
|
|
}
|
|
|
|
.rpg-strip-attributes-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2px 4px;
|
|
width: 100%;
|
|
}
|
|
|
|
.rpg-strip-attr-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.rpg-strip-attr-name {
|
|
font-size: 7px;
|
|
opacity: 0.6;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.rpg-strip-attr-value {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--rpg-highlight, #6af);
|
|
font-family: 'Roboto Mono', 'Consolas', monospace;
|
|
}
|
|
|
|
/* ============================================
|
|
STRIP WIDGET THEME VARIATIONS
|
|
============================================ */
|
|
|
|
/* Sci-Fi Theme */
|
|
body:has(.rpg-panel[data-theme="sci-fi"]) .rpg-strip-widget {
|
|
background: rgba(10, 14, 39, 0.9);
|
|
border-color: rgba(139, 0, 255, 0.5);
|
|
color: #00fff9;
|
|
}
|
|
|
|
/* Fantasy Theme */
|
|
body:has(.rpg-panel[data-theme="fantasy"]) .rpg-strip-widget {
|
|
background: rgba(43, 24, 16, 0.9);
|
|
border-color: rgba(139, 105, 20, 0.6);
|
|
color: #f4e8d0;
|
|
}
|
|
|
|
/* Cyberpunk Theme */
|
|
body:has(.rpg-panel[data-theme="cyberpunk"]) .rpg-strip-widget {
|
|
background: rgba(15, 5, 25, 0.9);
|
|
border-color: rgba(255, 0, 255, 0.4);
|
|
color: #00ffff;
|
|
}
|
|
|
|
/* Dark Theme */
|
|
body:has(.rpg-panel[data-theme="dark"]) .rpg-strip-widget {
|
|
background: rgba(25, 25, 35, 0.9);
|
|
border-color: rgba(70, 70, 90, 0.6);
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* Light Theme */
|
|
body:has(.rpg-panel[data-theme="light"]) .rpg-strip-widget {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-color: rgba(220, 220, 230, 0.8);
|
|
color: #2c3e50;
|
|
}
|
|
|
|
/* Hide strip widgets on mobile */
|
|
@media (max-width: 768px) {
|
|
.rpg-strip-widget-container {
|
|
display: none !important;
|
|
}
|
|
|
|
.rpg-panel.rpg-collapsed.rpg-strip-widgets-enabled {
|
|
max-width: 2.5rem !important;
|
|
min-width: 2.5rem !important;
|
|
}
|
|
}
|