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');
src/systems/dashboard/tabContextMenu.js
+47 -13
View File
@@ -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';