Grayscale/nanobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(webui): unify turn observability

Browse Source
This commit is contained in:
Xubin Ren
2026-08-22 20:51:24 +08:00
parent dbc1801d3c
commit 48eea29313
44 changed files with 1871 additions and 930 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/globals.css
+40 -34
View File
@@ -165,11 +165,19 @@
pointer-events: none;
background-color: rgb(236 141 49);
opacity: 0;
transition: opacity 220ms ease-out;
transition: opacity 180ms ease-out;
}
.composer-model-badge[data-fallback="true"] {
border-color: rgb(236 141 49 / 0.38);
}
.composer-model-badge[data-fallback="true"]::before {
opacity: 1;
opacity: 0.1;
}
.dark .composer-model-badge[data-fallback="true"]::before {
opacity: 0.15;
}
.composer-model-badge > * {
@@ -695,11 +703,38 @@
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 0.75rem), transparent);
}
.thread-composer-model-badge:not([data-switching="true"]):active
> .composer-model-pill {
.thread-composer-model-badge:not([data-switching="true"]):active > .composer-model-pill {
transform: scale(0.98);
}
@keyframes composer-model-pill-viewport-enter {
from {
transform: scale(0.9074);
}
to {
transform: scale(1);
}
}
.composer-model-pill-viewport {
transform-origin: right center;
animation: composer-model-pill-viewport-enter 210ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 4px, #000 calc(100% - 4px), transparent);
mask-image: linear-gradient(to bottom, transparent, #000 4px, #000 calc(100% - 4px), transparent);
}
.composer-model-pill-dock {
transform-origin: right center;
transition-property: none;
will-change: transform;
}
.composer-model-pill-track[data-settling="true"],
.composer-model-pill-track[data-settling="true"] .composer-model-pill-dock {
transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes preset-name-shake {
0%,
100% {
@@ -715,37 +750,8 @@
}
}
@keyframes composer-model-pill-viewport-enter {
from {
transform: scale(0.9074);
}
to {
transform: scale(1);
}
}
.composer-model-pill-viewport {
transform-origin: right center;
animation: composer-model-pill-viewport-enter 210ms
cubic-bezier(0.2, 0.8, 0.2, 1) both;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 4px, #000 calc(100% - 4px), transparent);
mask-image: linear-gradient(to bottom, transparent, #000 4px, #000 calc(100% - 4px), transparent);
}
.composer-model-pill-dock {
transform-origin: right center;
transition-property: none;
will-change: transform;
}
.composer-model-pill-track[data-settling="true"],
.composer-model-pill-track[data-settling="true"] .composer-model-pill-dock {
transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.thread-composer-model-badge:active > .composer-model-pill {
.thread-composer-model-badge:not([data-switching="true"]):active > .composer-model-pill {
transform: none !important;
}