GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: CSS variable consistency - use app.css bridge variables

Browse source 
- Update chat.css to use consistent CSS variable names from app.css
- Changed --primary-color to --accent-color
- Changed --surface-color to --secondary-bg
- Changed --text-color to --text-primary
- Changed --background-color to --primary-bg
- Changed --primary-hover to --accent-hover
- Ensures proper theming across all 6 themes
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2025-12-10 23:38:54 -03:00
parent 3aba805f93
commit 5a574ab52d
1 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
ui/suite/chat/chat.css
View file

@ -83,14 +83,14 @@
} }
.user-message { .user-message {
background: var(--primary-color, #3b82f6); background: var(--accent-color, #3b82f6);
color: white; color: white;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.bot-message { .bot-message {
background: var(--surface-color, #f3f4f6); background: var(--secondary-bg, #f3f4f6);
color: var(--text-color, #1f2937); color: var(--text-primary, #1f2937);
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
@ -134,7 +134,7 @@
footer { footer {
padding: 16px 0; padding: 16px 0;
border-top: 1px solid var(--border-color, #e5e7eb); border-top: 1px solid var(--border-color, #e5e7eb);
background: var(--background-color, #ffffff); background: var(--primary-bg, #ffffff);
} }
/* Suggestions */ /* Suggestions */
@ -149,17 +149,17 @@ footer {
padding: 6px 12px; padding: 6px 12px;
border-radius: 16px; border-radius: 16px;
border: 1px solid var(--border-color, #e5e7eb); border: 1px solid var(--border-color, #e5e7eb);
background: var(--surface-color, #f9fafb); background: var(--secondary-bg, #f9fafb);
color: var(--text-color, #374151); color: var(--text-primary, #374151);
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
.suggestion-button:hover { .suggestion-button:hover {
background: var(--primary-color, #3b82f6); background: var(--accent-color, #3b82f6);
color: white; color: white;
border-color: var(--primary-color, #3b82f6); border-color: var(--accent-color, #3b82f6);
} }
/* Input Container */ /* Input Container */
@ -174,16 +174,16 @@ footer {
padding: 12px 16px; padding: 12px 16px;
border-radius: 24px; border-radius: 24px;
border: 1px solid var(--border-color, #e5e7eb); border: 1px solid var(--border-color, #e5e7eb);
background: var(--surface-color, #f9fafb); background: var(--secondary-bg, #f9fafb);
color: var(--text-color, #1f2937); color: var(--text-primary, #1f2937);
font-size: 14px; font-size: 14px;
outline: none; outline: none;
transition: all 0.2s; transition: all 0.2s;
} }
#messageInput:focus { #messageInput:focus {
border-color: var(--primary-color, #3b82f6); border-color: var(--accent-color, #3b82f6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); box-shadow: 0 0 0 3px var(--accent-light, rgba(59, 130, 246, 0.1));
} }
#messageInput::placeholder { #messageInput::placeholder {
@ -196,7 +196,7 @@ footer {
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
border: none; border: none;
background: var(--primary-color, #3b82f6); background: var(--accent-color, #3b82f6);
color: white; color: white;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -209,7 +209,7 @@ footer {
#voiceBtn:hover, #voiceBtn:hover,
#sendBtn:hover { #sendBtn:hover {
transform: scale(1.05); transform: scale(1.05);
background: var(--primary-hover, #2563eb); background: var(--accent-hover, #2563eb);
} }
#voiceBtn:active, #voiceBtn:active,
@ -226,15 +226,15 @@ footer {
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
border: 1px solid var(--border-color, #e5e7eb); border: 1px solid var(--border-color, #e5e7eb);
background: var(--background-color, #ffffff); background: var(--primary-bg, #ffffff);
color: var(--text-color, #374151); color: var(--text-primary, #374151);
cursor: pointer; cursor: pointer;
display: none; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; font-size: 18px;
transition: all 0.2s; transition: all 0.2s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
z-index: 100; z-index: 100;
} }
@ -243,7 +243,7 @@ footer {
} }
.scroll-to-bottom:hover { .scroll-to-bottom:hover {
background: var(--surface-color, #f3f4f6); background: var(--bg-hover, #f3f4f6);
} }
/* Responsive */ /* Responsive */