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

refactor(web): 工作区布局 - 卡片样式合并共享规则并减线条感

Browse Source 
- .app-workspace-sidebar 与 .app-workspace-stage 的边框/圆角/阴影规则（含 .dark 覆盖）合并为共享选择器，消除重复声明；深浅主题覆盖保持在折叠规则之前避免覆盖失效\n- 卡片边框由 foreground 9% 减淡至 7%（与 spatial 分隔线一致），移动端抽屉边框同步\n- 核查：工作区卡片无左侧竖杠（导航引导线/引用线均为内容层级）；NavItem 组件在导航与 footer 复用
This commit is contained in:
sikongyue
2026-08-20 00:43:18 +08:00
parent 4cef763a11
commit aaabedb2f4
1 changed files with 13 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/styles/globals.css
View File

@@ -1183,7 +1183,7 @@
z-index: 40;
inset: 6px auto 6px 6px;
width: min(264px, calc(100vw - 58px)) !important;
border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
border-radius: var(--r-xl);
box-shadow: 22px 0 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
}
@@ -1210,23 +1210,29 @@
box-shadow: none;
}
.app-workspace-sidebar {
width: var(--workspace-sidebar-width, 260px);
border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
/* 工作区卡片（侧栏 / 主区）共享外观：边框、圆角、阴影（深浅主题对称） */
.app-workspace-sidebar,
.app-workspace-stage {
border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
border-radius: var(--r-xl);
background: var(--workspace-sidebar);
box-shadow:
0 14px 44px color-mix(in srgb, var(--foreground) 12%, transparent),
inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
transition: width var(--motion-state) var(--ease-aceternity), border-color var(--motion-instant) ease-out, box-shadow var(--motion-instant) ease-out;
}
.dark .app-workspace-sidebar {
.dark .app-workspace-sidebar,
.dark .app-workspace-stage {
box-shadow:
0 14px 44px rgba(0, 0, 0, 0.45),
inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
}
.app-workspace-sidebar {
width: var(--workspace-sidebar-width, 260px);
background: var(--workspace-sidebar);
transition: width var(--motion-state) var(--ease-aceternity), border-color var(--motion-instant) ease-out, box-shadow var(--motion-instant) ease-out;
}
.app-workspace-shell .app-workspace-sidebar.is-collapsed {
width: 0 !important;
border: 0;
@@ -1261,19 +1267,6 @@
background: var(--workspace-content);
}
.app-workspace-stage {
border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
border-radius: var(--r-xl);
box-shadow:
0 14px 44px color-mix(in srgb, var(--foreground) 12%, transparent),
inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
}
.dark .app-workspace-stage {
box-shadow:
0 14px 44px rgba(0, 0, 0, 0.45),
inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
}
.app-workspace-page {
background: var(--workspace-content);