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

fix: improve button and message visibility

Browse source 
- Increased font-size from 13px to 18px for .uncloseai-btn-control (toolbelt buttons)
- Moved code copy button to bottom-left and increased size to 18px
- Increased background opacity from 0.7 to 0.9 for code copy button
- Changed message backgrounds from solid colors to 95% opacity for better visibility
- Updated both PicoCSS and built-in CSS versions
This commit is contained in:
Russell Ballestrini 2025-07-10 08:35:14 -04:00
parent b515efac53
commit 4517e280fa
2 changed files with 14 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -708,7 +708,7 @@ dialog#tts-modal {
border: 1px solid var(--uncloseai-button-border, #dee2e6);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-size: 18px;
color: var(--uncloseai-primary-text, #495057);
background: var(--uncloseai-button-background, #f8f9fa);
transition: all 0.2s;
@ -770,14 +770,14 @@ dialog#tts-modal {
/* Code block styles */
.uncloseai-code-copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.7);
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.9);
color: white;
border: none;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-size: 18px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
@ -957,7 +957,7 @@ dialog#tts-modal {
/* Messages */
.user-message {
align-self: flex-end;
background: #007bff;
background: rgba(0, 123, 255, 0.95);
color: white;
padding: 12px 16px;
border-radius: 18px 18px 4px 18px;
@ -967,7 +967,7 @@ dialog#tts-modal {
.ai-message {
align-self: flex-start;
background: white;
background: rgba(255, 255, 255, 0.95);
color: #495057;
padding: 12px 16px;
border-radius: 18px 18px 18px 4px;

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

@ -758,7 +758,7 @@ dialog#tts-modal {
border: 1px solid var(--uncloseai-button-border, #dee2e6);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-size: 18px;
color: var(--uncloseai-primary-text, #495057);
background: var(--uncloseai-button-background, #f8f9fa);
transition: all 0.2s;
@ -820,14 +820,14 @@ dialog#tts-modal {
/* Code block styles */
.uncloseai-code-copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.7);
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.9);
color: white;
border: none;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-size: 18px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
@ -1006,7 +1006,7 @@ dialog#tts-modal {
/* Messages */
.user-message {
align-self: flex-end !important;
background: #007bff !important;
background: rgba(0, 123, 255, 0.95) !important;
color: white !important;
padding: 12px 16px !important;
border-radius: 18px 18px 4px 18px !important;
@ -1016,7 +1016,7 @@ dialog#tts-modal {
.ai-message {
align-self: flex-start !important;
background: white !important;
background: rgba(255, 255, 255, 0.95) !important;
color: #495057 !important;
padding: 12px 16px !important;
border-radius: 18px 18px 18px 4px !important;