diff --git a/src/systems/dashboard/promptDialog.js b/src/systems/dashboard/promptDialog.js index 6cdfc6f..3e28d56 100644 --- a/src/systems/dashboard/promptDialog.js +++ b/src/systems/dashboard/promptDialog.js @@ -37,6 +37,13 @@ export function showPromptDialog(options) { // Create modal content (uses .rpg-modal-content class for theming) const modalContent = document.createElement('div'); modalContent.className = 'rpg-modal-content rpg-prompt-content'; + + // Copy theme from panel so modal inherits theme CSS variables + const panel = document.querySelector('.rpg-panel'); + if (panel && panel.dataset.theme) { + modalContent.dataset.theme = panel.dataset.theme; + } + modalContent.style.cssText = ` min-width: 400px; max-width: 90vw; diff --git a/src/systems/dashboard/tabContextMenu.js b/src/systems/dashboard/tabContextMenu.js index 6c19e47..e2a189a 100644 --- a/src/systems/dashboard/tabContextMenu.js +++ b/src/systems/dashboard/tabContextMenu.js @@ -157,20 +157,26 @@ export class TabContextMenu { const tab = this.tabManager.getTab(tabId); if (!tab) return; - // Create menu container (matches widget styling with solid background) + // Create menu container (uses CSS variables, themed via data-theme attribute) this.menu = document.createElement('div'); - this.menu.className = 'rpg-tab-context-menu'; + this.menu.className = 'rpg-tab-context-menu rpg-modal-content'; // Use .rpg-modal-content for theme styling + + // Copy theme from panel so menu inherits theme-specific styles + const panel = document.querySelector('.rpg-panel'); + if (panel && panel.dataset.theme) { + this.menu.dataset.theme = panel.dataset.theme; + } + this.menu.style.cssText = ` position: fixed; left: ${x}px; top: ${y}px; - background: linear-gradient(135deg, rgba(22, 33, 62, 1) 0%, rgba(26, 26, 46, 1) 100%); - border: 2px solid var(--rpg-border); - border-radius: 6px; - box-shadow: 0 4px 18px var(--rpg-shadow), inset 0 0 12px rgba(0, 0, 0, 0.3); z-index: 10002; min-width: 180px; padding: 6px 0; + max-width: none; + max-height: none; + overflow: visible; `; // Menu items @@ -420,6 +426,13 @@ export class TabContextMenu { // Modal content (uses .rpg-modal-content class for theming) const content = document.createElement('div'); content.className = 'rpg-modal-content'; + + // Copy theme from panel so modal inherits theme CSS variables + const panel = document.querySelector('.rpg-panel'); + if (panel && panel.dataset.theme) { + content.dataset.theme = panel.dataset.theme; + } + content.style.padding = '1.5rem'; content.style.maxWidth = '500px'; diff --git a/style.css b/style.css index 1982636..e8975f3 100644 --- a/style.css +++ b/style.css @@ -1479,7 +1479,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Modal Content Container */ .rpg-modal-content { - background: linear-gradient(135deg, rgba(22, 33, 62, 1) 0%, rgba(26, 26, 46, 1) 100%); + background: linear-gradient(135deg, var(--rpg-accent) 0%, var(--rpg-bg) 100%); border: 2px solid var(--rpg-border); border-radius: 8px; max-width: 600px; @@ -4096,6 +4096,34 @@ body:has(.rpg-panel.rpg-position-left) #sheld { THEME SUPPORT FOR ALL PANEL ELEMENTS ============================================ */ +/* Apply theme CSS variables to standalone elements (modals, menus) */ +.rpg-modal-content[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-modal-content[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-modal-content[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 theme colors to tabs navigation */ .rpg-panel[data-theme="sci-fi"] .rpg-tabs-nav, .rpg-panel[data-theme="fantasy"] .rpg-tabs-nav,