From 9afcbeac56e1534e5030583f2953cc61d3a8d395 Mon Sep 17 00:00:00 2001 From: Lucas 'Paperboy' Rose-Winters Date: Tue, 4 Nov 2025 15:46:02 +1100 Subject: [PATCH] fix: Apply solid theme-aware backgrounds to tab context menu and prompt dialogs Root cause: Modals appended to body were transparent because default theme CSS variables use rgba with 0.9 opacity. Confirm dialog works because it starts inside .rpg-panel HTML (solid background) before being moved to body. Solution: For new modals (tab context menu, prompt dialog, icon picker): 1. If themed (data-theme exists): Copy theme attribute for CSS overrides 2. If default theme: Read computed colors from panel, convert to opacity 1.0, apply as inline styles with !important Also improved context menu hover effects: - Normal items: rgba(255, 255, 255, 0.1) for better contrast - Delete button: rgba(233, 69, 96, 0.3) for more visibility Changes: - promptDialog.js: Dynamic theme-aware solid backgrounds - tabContextMenu.js: Same for context menu and icon picker + hover effects --- src/systems/dashboard/promptDialog.js | 26 ++++++++--- src/systems/dashboard/tabContextMenu.js | 60 +++++++++++++++++++------ 2 files changed, 68 insertions(+), 18 deletions(-) diff --git a/src/systems/dashboard/promptDialog.js b/src/systems/dashboard/promptDialog.js index 3e28d56..c0f65aa 100644 --- a/src/systems/dashboard/promptDialog.js +++ b/src/systems/dashboard/promptDialog.js @@ -42,12 +42,28 @@ export function showPromptDialog(options) { 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; + `; + } else { + // For default theme: read computed colors from panel and apply as solid (1.0 opacity) + const computedStyle = window.getComputedStyle(panel); + const bgColor = computedStyle.getPropertyValue('--rpg-bg').trim(); + const accentColor = computedStyle.getPropertyValue('--rpg-accent').trim(); - modalContent.style.cssText = ` - min-width: 400px; - max-width: 90vw; - `; + // Convert rgba with 0.9 opacity to 1.0 opacity + const solidBg = bgColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgba($1, 1)'); + const solidAccent = accentColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgba($1, 1)'); + + // Apply solid background + ensure full opacity + modalContent.style.cssText = ` + min-width: 400px; + max-width: 90vw; + background: linear-gradient(135deg, ${solidAccent} 0%, ${solidBg} 100%) !important; + opacity: 1 !important; + `; + } // Header (uses .rpg-modal-header class) const header = document.createElement('div'); diff --git a/src/systems/dashboard/tabContextMenu.js b/src/systems/dashboard/tabContextMenu.js index e2a189a..7a2022a 100644 --- a/src/systems/dashboard/tabContextMenu.js +++ b/src/systems/dashboard/tabContextMenu.js @@ -165,19 +165,41 @@ export class TabContextMenu { 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; + z-index: 10002; + min-width: 180px; + padding: 6px 0; + max-width: none; + max-height: none; + overflow: visible; + `; + } else { + // For default theme: read computed colors from panel and apply as solid (1.0 opacity) + const computedStyle = window.getComputedStyle(panel); + const bgColor = computedStyle.getPropertyValue('--rpg-bg').trim(); + const accentColor = computedStyle.getPropertyValue('--rpg-accent').trim(); - this.menu.style.cssText = ` - position: fixed; - left: ${x}px; - top: ${y}px; - z-index: 10002; - min-width: 180px; - padding: 6px 0; - max-width: none; - max-height: none; - overflow: visible; - `; + // Convert rgba with 0.9 opacity to 1.0 opacity + const solidBg = bgColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgba($1, 1)'); + const solidAccent = accentColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgba($1, 1)'); + + this.menu.style.cssText = ` + position: fixed; + left: ${x}px; + top: ${y}px; + z-index: 10002; + min-width: 180px; + padding: 6px 0; + max-width: none; + max-height: none; + overflow: visible; + background: linear-gradient(135deg, ${solidAccent} 0%, ${solidBg} 100%) !important; + opacity: 1 !important; + `; + } // Menu items const items = [ @@ -223,7 +245,7 @@ export class TabContextMenu { menuItem.className = 'rpg-tab-context-menu-item'; const baseColor = item.danger ? 'var(--rpg-highlight)' : 'var(--rpg-text)'; - const hoverBg = item.danger ? 'rgba(233, 69, 96, 0.2)' : 'var(--rpg-accent)'; + const hoverBg = item.danger ? 'rgba(233, 69, 96, 0.3)' : 'rgba(255, 255, 255, 0.1)'; menuItem.style.cssText = ` padding: 10px 16px; @@ -431,6 +453,18 @@ export class TabContextMenu { const panel = document.querySelector('.rpg-panel'); if (panel && panel.dataset.theme) { content.dataset.theme = panel.dataset.theme; + } else { + // For default theme: read computed colors from panel and apply as solid (1.0 opacity) + const computedStyle = window.getComputedStyle(panel); + const bgColor = computedStyle.getPropertyValue('--rpg-bg').trim(); + const accentColor = computedStyle.getPropertyValue('--rpg-accent').trim(); + + // Convert rgba with 0.9 opacity to 1.0 opacity + const solidBg = bgColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgba($1, 1)'); + const solidAccent = accentColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgba($1, 1)'); + + content.style.background = `linear-gradient(135deg, ${solidAccent} 0%, ${solidBg} 100%)`; + content.style.opacity = '1'; } content.style.padding = '1.5rem';