engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: theme-aware styling for copy button, logo, and chat box

Browse source 
- Remove copy button background, add light mode styling with white bg
- Ensure modal title stays white across themes
- Set chat box to off-white (#f8f9fa) for light mode, dark (#1a1a1a) for dark mode

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Russell Ballestrini 2025-07-10 19:05:53 -04:00
parent b9ee32e518
commit 6419528ae1
2 changed files with 32 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/uncloseai-modal-builtin.css
View file

@ -804,7 +804,7 @@ dialog#tts-modal {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.9);
background: none;
color: white;
border: none;
padding: 4px 8px;
@ -823,6 +823,13 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
border: 1px solid rgba(0, 0, 0, 0.2);
}
/* Light theme copy button */
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
background: rgba(255, 255, 255, 0.9);
color: #333;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.uncloseai-code-copy-btn:hover {
opacity: 1;
}
@ -899,6 +906,14 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
background: #f8f9fa;
padding: 16px;
border-radius: 8px;
}
/* Dark theme chat box */
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
background: #1a1a1a;
}
/* Settings panel */

17
src/uncloseai-modal-pico.css
View file

@ -860,7 +860,7 @@ dialog#tts-modal::backdrop {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.9);
background: none;
color: white;
border: none;
padding: 4px 8px;
@ -879,6 +879,13 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
border: 1px solid rgba(0, 0, 0, 0.2);
}
/* Light theme copy button */
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
background: rgba(255, 255, 255, 0.9);
color: #333;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.uncloseai-code-copy-btn:hover {
opacity: 1;
}
@ -954,6 +961,14 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
background: #f8f9fa !important;
padding: 16px !important;
border-radius: 8px !important;
}
/* Dark theme chat box */
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
background: #1a1a1a !important;
}
/* Settings panel */