ewilliams28/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-08-25 03:45:46 -06:00
Code Issues Packages Projects Releases Wiki Activity

improve(ui): simplify message chrome and actions (#125241)

Browse Source 
* improve(ui): simplify message chrome

* fix(ui): clear loading bubble shadow
This commit is contained in:
Vyctor H. Brzezowski
2026-08-17 20:19:31 -03:00
committed by GitHub
parent b49e655a81
commit d975d9ba4a
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/styles/chat/grouped.css
+16 -11
View File
@@ -300,7 +300,7 @@
padding: 4px;
min-width: 24px;
min-height: 24px;
border-radius: var(--radius-sm, 4px);
border-radius: var(--radius-md);
color: var(--muted);
opacity: var(--chat-footer-disclosure-opacity, 0);
pointer-events: var(--chat-footer-disclosure-pointer-events, none);
@@ -328,7 +328,7 @@
.chat-group-footer button:hover,
.chat-message-actions-row button:hover {
opacity: 1 !important;
background: var(--bg-hover, rgba(255, 255, 255, 0.08));
background: transparent;
color: var(--accent);
}
@@ -817,18 +817,23 @@ img.chat-avatar.chat-avatar--logo {
}
.chat-group.user .chat-bubble:hover {
border-color: color-mix(in srgb, var(--accent) 24%, transparent);
border-color: transparent;
box-shadow: none;
}
/* Light mode: restore borders. Order contract: stays below the role variants
above; it ties with .chat-group.user .chat-bubble on specificity and the
light skin must win (user bubbles render on var(--bg) in light mode). */
/* Light mode: restore borders for surfaces that retain them. */
:root[data-theme-mode="light"] .chat-bubble {
border-color: var(--border);
background: var(--bg);
box-shadow: inset 0 1px 0 var(--card-highlight);
}
:root[data-theme-mode="light"] .chat-group.user .chat-bubble {
border-color: transparent;
background: var(--accent-subtle);
box-shadow: none;
}
:root[data-theme-mode="light"] .chat-bubble--tool-shell,
:root[data-theme-mode="light"] .chat-group.assistant .chat-bubble {
border-color: transparent;
@@ -846,7 +851,7 @@ img.chat-avatar.chat-avatar--logo {
}
.chat-group.user.chat-group--sender-tint .chat-bubble:hover {
border-color: hsl(var(--chat-sender-hue) 48% 55% / 0.4);
border-color: transparent;
}
.chat-group.user.chat-group--sender-tint .chat-sender-name {
@@ -855,13 +860,13 @@ img.chat-avatar.chat-avatar--logo {
:root[data-theme-mode="light"] .chat-group.user.chat-group--sender-tint .chat-bubble {
background: hsl(var(--chat-sender-hue) 65% 94%);
border-color: hsl(var(--chat-sender-hue) 45% 82%);
border-color: transparent;
}
/* Outranks the light skin above (it also sets border-color); without this the
tinted hover border never applies in light mode. */
/* Keep tinted user turns borderless when the generic light hover skin applies. */
:root[data-theme-mode="light"] .chat-group.user.chat-group--sender-tint .chat-bubble:hover {
border-color: hsl(var(--chat-sender-hue) 48% 62%);
border-color: transparent;
box-shadow: none;
}
:root[data-theme-mode="light"] .chat-group.user.chat-group--sender-tint .chat-sender-name {
ui/src/styles/components.css
+2 -1
View File
@@ -3363,8 +3363,9 @@ td.data-table-key-col {
}
:root[data-theme-mode="light"] .chat-line.user .chat-bubble {
border-color: color-mix(in srgb, var(--accent) 20%, transparent);
border-color: transparent;
background: var(--accent-subtle);
box-shadow: none;
}
.chat-line.assistant .chat-bubble {