diff --git a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte
index 97a9519603..a024766bef 100644
--- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte
@@ -254,11 +254,11 @@
});
/** How long the panel takes to fade out before it swaps to another model. */
- const SWAP_FADE_MS = 150;
- /** How long the calls to action take to leave the toolbar, matching their collapse. */
- const CTA_LEAVE_MS = 200;
+ const SWAP_FADE_MS = 120;
+ /** How long the calls to action take to leave the toolbar, matching their fade. */
+ const CTA_LEAVE_MS = 120;
/** How long the panel takes to slide out before the calls to action come back. */
- const PANE_LEAVE_MS = 150;
+ const PANE_LEAVE_MS = 120;
// The calls to action leave first, then the panel takes the space they gave up.
// Closing runs the same order backwards.
@@ -321,7 +321,7 @@
{#snippet toolbarEndRegion()}
@@ -382,21 +382,21 @@
overflow: clip;
visibility: hidden;
transition:
- width 150ms cubic-bezier(0.23, 1, 0.32, 1),
- visibility 150ms;
+ width 120ms cubic-bezier(0.23, 1, 0.32, 1),
+ visibility 120ms;
}
.pane-drawer[data-open='true'] {
width: 30rem;
visibility: visible;
transition:
- width 250ms cubic-bezier(0.32, 0.72, 0, 1),
- visibility 250ms;
+ width 200ms cubic-bezier(0.32, 0.72, 0, 1),
+ visibility 200ms;
}
.pane-content {
opacity: 0;
- transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1);
+ transition: opacity 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.pane-content[data-visible='true'] {
@@ -405,19 +405,19 @@
/* opening: the fade waits for the drawer to move */
.pane-content[data-visible='true'][data-fade='open'] {
- transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+ transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1) 80ms;
}
/* swapping models: out, then in, with no pause */
.pane-content[data-visible='true'][data-fade='swap'] {
- transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1);
+ transition: opacity 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* reduced motion keeps the fades and drops the slide */
@media (prefers-reduced-motion: reduce) {
.pane-drawer,
.pane-drawer[data-open='true'] {
- transition: visibility 150ms;
+ transition: visibility 120ms;
}
.pane-content,