Ayuriel/openclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: mute sidebar and chat input accent colors (#49390)

Browse Source 
* Refactor CSS styles: replace hardcoded colors with CSS variables for accent colors and optimize spacing rules in layout files.

* Update CSS styles: streamline selectors, enhance hover effects, and adjust focus states for chat components and layout elements.

* Enhance focus styles for chat components: update border colors and box-shadow effects for improved accessibility and visual consistency.
This commit is contained in:
Val Alexander 2026-03-17 21:56:50 -05:00 committed by GitHub
parent fa34cb887d
commit 25e6cd38b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 44 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/styles/chat/layout.css
View File

@ -380,8 +380,8 @@
}
.agent-chat__input:focus-within {
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 8%, transparent);
border-color: var(--border-strong);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-strong) 24%, transparent);
}
@supports (backdrop-filter: blur(1px)) {
@ -494,8 +494,8 @@
height: 30px;
border-radius: var(--radius-md);
border: none;
background: var(--accent);
color: var(--accent-foreground);
background: var(--muted-strong);
color: var(--text-strong);
cursor: pointer;
flex-shrink: 0;
transition:
@ -515,8 +515,8 @@
}
.chat-send-btn:hover:not(:disabled) {
background: var(--accent-hover);
box-shadow: 0 2px 10px rgba(255, 92, 92, 0.25);
background: var(--muted);
box-shadow: none;
}
.chat-send-btn:disabled {

15
ui/src/styles/components.css
View File

@ -173,9 +173,11 @@
opacity: 0.7;
transition: opacity 0.15s;
}
.update-banner__close:hover {
opacity: 1;
}
.update-banner__close svg {
width: 16px;
height: 16px;
@ -1643,6 +1645,7 @@
}
@media (max-width: 1100px) {
.table-head,
.table-row {
grid-template-columns: 1fr;
@ -1650,6 +1653,7 @@
}
@container (max-width: 1100px) {
.table-head,
.table-row {
grid-template-columns: 1fr;
@ -2302,10 +2306,12 @@
}
@keyframes chatStreamPulse {
0%,
100% {
border-color: var(--border);
}
50% {
border-color: var(--accent);
}
@ -2356,12 +2362,14 @@
}
@keyframes chatReadingDot {
0%,
80%,
100% {
opacity: 0.4;
transform: translateY(0);
}
40% {
opacity: 1;
transform: translateY(-3px);
@ -2603,8 +2611,8 @@
}
.chat-compose__field textarea:focus {
border-color: var(--ring);
box-shadow: var(--focus-ring);
border-color: var(--border-strong);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-strong) 24%, transparent);
}
.chat-compose__field textarea:disabled {
@ -3573,12 +3581,15 @@
.ov-cards .ov-card:nth-child(1) {
animation-delay: 0ms;
}
.ov-cards .ov-card:nth-child(2) {
animation-delay: 50ms;
}
.ov-cards .ov-card:nth-child(3) {
animation-delay: 100ms;
}
.ov-cards .ov-card:nth-child(4) {
animation-delay: 150ms;
}

14
ui/src/styles/layout.css
View File

@ -682,18 +682,16 @@
bottom: 10px;
width: 3px;
border-radius: 999px;
background: color-mix(in srgb, #2de3d1 86%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, #2de3d1 34%, transparent);
background: color-mix(in srgb, var(--accent) 86%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent);
}
.sidebar--collapsed .nav-item.active,
.sidebar--collapsed .nav-item--active {
background: linear-gradient(
180deg,
color-mix(in srgb, #0b2f34 84%, var(--bg-elevated) 16%) 0%,
color-mix(in srgb, #081f25 90%, var(--bg) 10%) 100%
);
border-color: color-mix(in srgb, #1ed2c2 18%, var(--border) 82%);
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 14%, var(--bg-elevated) 86%) 0%,
color-mix(in srgb, var(--accent) 8%, var(--bg) 92%) 100%);
border-color: color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
0 10px 20px color-mix(in srgb, black 18%, transparent);

4
ui/src/styles/layout.mobile.css
View File

@ -191,8 +191,8 @@
bottom: 10px;
width: 3px;
border-radius: 999px;
background: color-mix(in srgb, #2de3d1 86%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, #2de3d1 34%, transparent);
background: color-mix(in srgb, var(--accent) 86%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent);
}
.sidebar--collapsed .sidebar-shell__footer {