tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 工作台与创作区 - 收敛彩虹选中色并补中性滑动指示与边框高光

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ddCat
2026-09-17 09:20:26 +08:00
parent 1ff24903b0
commit 1066cb3be9
7 changed files with 251 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web/src/styles/workspace-product.css
View File

@@ -471,49 +471,51 @@
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile { width: 48px; min-width: 48px; flex: 0 0 48px; margin-inline: auto; }
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-notification-spacer { display: none; }
.app-user-workspace .app-workspace-nav-link { --nav-accent: var(--user-ink-muted); }
.app-user-workspace .app-workspace-nav-link[data-nav-id="home"] { --nav-accent: var(--product-accent-orange); }
.app-user-workspace .app-workspace-nav-link[data-nav-id="projects"] { --nav-accent: var(--product-accent-blue); }
.app-user-workspace .app-workspace-nav-link[data-nav-id="canvas"] { --nav-accent: var(--product-accent-green); }
.app-user-workspace .app-workspace-nav-link[data-nav-id="assets"] { --nav-accent: #c4891a; }
.app-user-workspace .app-workspace-nav-link[data-nav-id="skills"] { --nav-accent: var(--product-accent-pink); }
.app-user-workspace .app-workspace-nav-link[data-nav-id="plugins"] { --nav-accent: var(--product-accent-violet); }
.app-user-workspace .app-workspace-nav-link[data-nav-id="tasks"] { --nav-accent: var(--product-accent-cyan); }
.dark .app-user-workspace .app-workspace-nav-link[data-nav-id="assets"] { --nav-accent: #e8c37a; }
.app-user-workspace .app-workspace-nav-link {
position: relative;
isolation: isolate;
}
.app-user-workspace .app-workspace-nav-active-pill {
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: var(--user-surface-muted);
pointer-events: none;
}
.app-user-workspace .app-workspace-nav-link > :not(.app-workspace-nav-active-pill) {
position: relative;
z-index: 1;
}
.app-user-workspace .app-workspace-nav-icon {
display: grid;
width: 28px;
height: 28px;
flex: 0 0 28px;
width: 20px;
height: 20px;
flex: 0 0 20px;
place-items: center;
border-radius: 9px;
background: color-mix(in srgb, var(--nav-accent) 14%, transparent);
color: var(--nav-accent);
transition: background var(--product-state) var(--product-ease), transform var(--product-state) var(--product-ease), box-shadow var(--product-state) var(--product-ease);
border-radius: 0;
background: transparent;
color: currentColor;
transition: transform var(--product-state) var(--product-ease);
}
.app-user-workspace .app-workspace-nav-icon svg {
color: var(--nav-accent) !important;
color: currentColor !important;
opacity: 1 !important;
transform-origin: center;
transition: transform var(--product-state) var(--product-ease);
}
.app-user-workspace .app-workspace-nav-link:hover .app-workspace-nav-icon,
.app-user-workspace .app-workspace-nav-link:focus-visible .app-workspace-nav-icon {
background: color-mix(in srgb, var(--nav-accent) 22%, transparent);
transform: translateY(-1px);
}
.app-user-workspace .app-workspace-nav-link:hover .app-workspace-nav-icon svg,
.app-user-workspace .app-workspace-nav-link:focus-visible .app-workspace-nav-icon svg {
animation: workspace-nav-icon-nudge 420ms var(--product-ease);
}
.app-user-workspace .app-workspace-nav-link.is-active {
background: color-mix(in srgb, var(--nav-accent) 12%, var(--user-surface-muted)) !important;
background: transparent !important;
}
.app-user-workspace .app-workspace-nav-link.is-active .app-workspace-nav-icon {
background: color-mix(in srgb, var(--nav-accent) 24%, transparent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--nav-accent) 10%, transparent);
background: transparent;
box-shadow: none;
}
.app-user-workspace .app-workspace-nav-link:active .app-workspace-nav-icon { transform: scale(.94); }
.app-user-workspace .app-workspace-nav-link:active .app-workspace-nav-icon { transform: scale(.96); }
.app-user-workspace .app-workspace-nav-group > div > div .app-workspace-nav-link {
animation: workspace-nav-item-enter var(--product-enter) var(--product-ease) both;
}
@@ -523,11 +525,6 @@
.app-user-workspace .app-workspace-nav-group > div > div:nth-child(4) .app-workspace-nav-link { animation-delay: 120ms; }
.app-user-workspace .app-workspace-nav-group > div > div:nth-child(n + 5) .app-workspace-nav-link { animation-delay: 160ms; }
@keyframes workspace-nav-icon-nudge {
0% { transform: rotate(0deg) scale(1); }
42% { transform: rotate(-10deg) scale(1.08); }
100% { transform: rotate(0deg) scale(1); }
}
@keyframes workspace-nav-item-enter {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: translateX(0); }
@@ -545,16 +542,14 @@
.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row { grid-column: 1; grid-row: 1 / 3; min-width: 0; padding: 8px 0 8px 8px; }
.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row .creation-mode-tabs { display: grid; width: 100%; height: 100%; grid-template-rows: repeat(3, minmax(52px, 1fr)); align-self: stretch; margin: 0; padding: 4px; border-radius: 16px; transform: none; }
.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row .creation-mode-button { height: auto; min-height: 52px; flex-direction: column; gap: 3px; padding: 5px 2px; font-size: 11px; }
.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row .creation-mode-indicator { top: 4px; left: 4px; }
.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row .creation-mode-indicator { inset: 0; width: auto; height: auto; }
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-writing-surface,
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-dock { grid-column: 2; min-width: 0; }
.app-user-workspace .creation-composer-stage { display: flex; min-width: 0; align-items: stretch; gap: 14px; }
.app-user-workspace .creation-composer-stage.is-thread-mode { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs { display: grid; width: 76px; grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(54px, 1fr)); align-self: stretch; margin: 0; padding: 4px; border-radius: 18px; }
.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs .creation-mode-button { min-width: 0; min-height: 0; flex-direction: column; gap: 3px; padding: 7px 3px; font-size: 11px; }
.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs .creation-mode-indicator { inset: 4px 4px auto; width: calc(100% - 8px); height: calc((100% - 8px) / 3); transition: transform 360ms var(--product-ease); }
.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs[data-active-mode="image"] .creation-mode-indicator { transform: translateY(100%); }
.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs[data-active-mode="text"] .creation-mode-indicator { transform: translateY(200%); }
.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs .creation-mode-indicator { inset: 0; width: auto; height: auto; transform: none; }
.app-user-workspace .creation-composer-stage.is-home-mode { display: block; }
.app-user-workspace .creation-composer-stage.is-home-mode > .creation-mode-tabs { display: grid; width: min(456px, 100%); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr; margin: 0 auto 20px; padding: 4px; }
.app-user-workspace .creation-composer-stage.is-home-mode > .creation-mode-tabs .creation-mode-button { min-height: 46px; flex-direction: row; gap: 6px; padding: 0 8px; font-size: 13px; }