Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Apply solid theme-aware backgrounds to tab context menu and prompt dialogs

Browse Source 
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
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-04 15:46:02 +11:00
parent 3873eb82b1
commit 9afcbeac56
2 changed files with 68 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/dashboard/promptDialog.js
+21 -5
View File
@@ -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');