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

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

@ -63,7 +63,7 @@
background: transparent;
}
.chat-thread-inner > :first-child {
.chat-thread-inner> :first-child {
margin-top: 0 !important;
}
@ -320,7 +320,7 @@
}
/* Hide the "Message" label - keep textarea only */
.chat-compose__field > span {
.chat-compose__field>span {
display: none;
}
@ -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)) {
@ -391,7 +391,7 @@
}
}
.agent-chat__input > textarea {
.agent-chat__input>textarea {
width: 100%;
min-height: 40px;
max-height: 150px;
@ -407,7 +407,7 @@
box-sizing: border-box;
}
.agent-chat__input > textarea::placeholder {
.agent-chat__input>textarea::placeholder {
color: var(--muted);
}
@ -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 {
@ -549,7 +549,7 @@
scrollbar-width: thin;
}
.slash-menu-group + .slash-menu-group {
.slash-menu-group+.slash-menu-group {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);

31
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;
@ -1017,11 +1019,11 @@
position: relative;
}
.cron-filter-dropdown__details > summary {
.cron-filter-dropdown__details>summary {
list-style: none;
}
.cron-filter-dropdown__details > summary::-webkit-details-marker {
.cron-filter-dropdown__details>summary::-webkit-details-marker {
display: none;
}
@ -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);
}
@ -2335,7 +2341,7 @@
height: 12px;
}
.chat-reading-indicator__dots > span {
.chat-reading-indicator__dots>span {
display: inline-block;
width: 6px;
height: 6px;
@ -2347,21 +2353,23 @@
will-change: transform, opacity;
}
.chat-reading-indicator__dots > span:nth-child(2) {
.chat-reading-indicator__dots>span:nth-child(2) {
animation-delay: 0.15s;
}
.chat-reading-indicator__dots > span:nth-child(3) {
.chat-reading-indicator__dots>span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes chatReadingDot {
0%,
80%,
100% {
opacity: 0.4;
transform: translateY(0);
}
40% {
opacity: 1;
transform: translateY(-3px);
@ -2369,7 +2377,7 @@
}
@media (prefers-reduced-motion: reduce) {
.chat-reading-indicator__dots > span {
.chat-reading-indicator__dots>span {
animation: none;
opacity: 0.6;
}
@ -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 {
@ -3055,7 +3063,7 @@
min-width: 0;
}
.agent-kv > div {
.agent-kv>div {
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
@ -3310,7 +3318,7 @@
gap: 8px;
}
.agent-skills-header > span:last-child {
.agent-skills-header>span:last-child {
margin-left: auto;
}
@ -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;
}

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

@ -70,7 +70,7 @@
padding-top: 0;
}
.shell--chat-focus .content > * + * {
.shell--chat-focus .content>*+* {
margin-top: 0;
}
@ -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);
@ -855,7 +853,7 @@
overflow-x: hidden;
}
.content > * + * {
.content>*+* {
margin-top: 20px;
}
@ -871,7 +869,7 @@
padding-bottom: 0;
}
.content--chat > * + * {
.content--chat>*+* {
margin-top: 0;
}
@ -930,7 +928,7 @@
padding-bottom: 0;
}
.content--chat .content-header > div:first-child {
.content--chat .content-header>div:first-child {
text-align: left;
}

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 {