feat(web): 工作台 AI 模式与差旅/风险建议交互优化
- 新增 PersonalWorkbenchAiMode 组件、AI 侧边栏与 orb 机器人视觉资源 - 新增 aiApplicationDraftModel / aiExpenseDraftModel / aiWorkbenchConversationStore 及业务准入 aiSidebarBusinessAccess，支撑 AI 模式下的申请与报销草稿 - 顶栏、侧边栏、工作台样式重构，适配 AI 模式切换与响应式布局 - 同步 steward plan/off_topic、差旅报销引导流、风险建议卡片等测试
This commit is contained in:
caoxiaozhu
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.app {
|
||||
--sidebar-expanded-width: 184px;
|
||||
--sidebar-expanded-width: 304px;
|
||||
--sidebar-collapsed-width: 64px;
|
||||
--sidebar-motion: 220ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
@@ -43,8 +43,8 @@
|
||||
}
|
||||
|
||||
.app.sidebar-collapsed .app-sidebar {
|
||||
flex-basis: var(--sidebar-collapsed-width);
|
||||
width: var(--sidebar-collapsed-width);
|
||||
flex-basis: var(--sidebar-collapsed-width);
|
||||
overflow: visible;
|
||||
z-index: 200;
|
||||
}
|
||||
@@ -54,6 +54,19 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar-mode-fade-enter-active,
|
||||
.sidebar-mode-fade-leave-active {
|
||||
transition:
|
||||
opacity 180ms var(--ease),
|
||||
transform 180ms var(--ease);
|
||||
}
|
||||
|
||||
.sidebar-mode-fade-enter-from,
|
||||
.sidebar-mode-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
}
|
||||
|
||||
.app > .main {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
@@ -133,7 +146,7 @@
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.boot-badge-error {
|
||||
@@ -217,6 +230,10 @@
|
||||
background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
|
||||
background-attachment: local;
|
||||
}
|
||||
.workarea.workbench-workarea.workbench-workarea-ai-mode {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.workarea.settings-workarea {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
@@ -312,6 +329,7 @@
|
||||
}
|
||||
|
||||
.workarea.workbench-workarea { overflow: auto; padding: 16px; }
|
||||
.workarea.workbench-workarea.workbench-workarea-ai-mode { padding: 0; }
|
||||
|
||||
.mobile-overlay {
|
||||
position: fixed;
|
||||
|
||||
676
web/src/assets/styles/components/ai-sidebar-rail.css
Normal file
676
web/src/assets/styles/components/ai-sidebar-rail.css
Normal file
@@ -0,0 +1,676 @@
|
||||
.ai-rail {
|
||||
--ai-rail-bg: #f7f9fc;
|
||||
--ai-rail-panel: rgba(255, 255, 255, 0.76);
|
||||
--ai-rail-line: rgba(148, 163, 184, 0.14);
|
||||
--ai-rail-text: #162033;
|
||||
--ai-rail-muted: #738097;
|
||||
--ai-rail-accent: #2d72d9;
|
||||
--ai-rail-amber: #b76b16;
|
||||
--ai-rail-green: #2f8d7b;
|
||||
--ai-rail-ink-soft: #41506a;
|
||||
--ai-rail-accent-soft: rgba(45, 114, 217, 0.08);
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: var(--desktop-stage-height, 100dvh);
|
||||
min-height: var(--desktop-stage-height, 100dvh);
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 249, 252, 0.96) 62%, rgba(244, 247, 251, 0.98)),
|
||||
var(--ai-rail-bg);
|
||||
border-right: 1px solid rgba(203, 213, 225, 0.54);
|
||||
box-shadow:
|
||||
inset -1px 0 0 rgba(255, 255, 255, 0.64),
|
||||
1px 0 0 rgba(15, 23, 42, 0.02);
|
||||
color: var(--ai-rail-text);
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.ai-rail::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.56), transparent 16%),
|
||||
repeating-linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.12) 0,
|
||||
rgba(255, 255, 255, 0.12) 1px,
|
||||
transparent 1px,
|
||||
transparent 20px
|
||||
);
|
||||
opacity: 0.22;
|
||||
}
|
||||
|
||||
.ai-rail > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ai-rail-section {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ai-rail-brand {
|
||||
min-width: 0;
|
||||
min-height: 74px;
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 18px 10px;
|
||||
}
|
||||
|
||||
.ai-brand-logo {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(45, 114, 217, 0.12);
|
||||
border-radius: 13px;
|
||||
background:
|
||||
linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(239, 246, 255, 0.7)),
|
||||
rgba(255, 255, 255, 0.72);
|
||||
color: var(--ai-rail-accent);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.86),
|
||||
0 8px 18px rgba(45, 114, 217, 0.055);
|
||||
}
|
||||
|
||||
.ai-brand-logo img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.ai-brand-logo svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.ai-brand-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.ai-brand-copy strong {
|
||||
overflow: hidden;
|
||||
color: #162033;
|
||||
font-size: 14px;
|
||||
font-weight: 820;
|
||||
line-height: 1.22;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ai-brand-copy small {
|
||||
overflow: hidden;
|
||||
color: var(--ai-rail-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 560;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ai-rail-quick {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 8px 18px 12px;
|
||||
}
|
||||
|
||||
.ai-quick-btn,
|
||||
.ai-nav-btn,
|
||||
.ai-recent-item,
|
||||
.ai-user-action {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition:
|
||||
background 180ms var(--ease),
|
||||
border-color 180ms var(--ease),
|
||||
box-shadow 180ms var(--ease),
|
||||
color 180ms var(--ease),
|
||||
transform 180ms var(--ease);
|
||||
}
|
||||
|
||||
.ai-quick-btn {
|
||||
min-height: 48px;
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 4px;
|
||||
color: #111827;
|
||||
font-size: 14px;
|
||||
font-weight: 780;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ai-quick-btn i {
|
||||
width: 28px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
color: #536277;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ai-quick-btn.primary {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ai-quick-btn.active {
|
||||
color: #173d78;
|
||||
background: rgba(45, 114, 217, 0.055);
|
||||
border-color: rgba(45, 114, 217, 0.12);
|
||||
}
|
||||
|
||||
.ai-quick-btn.primary i {
|
||||
color: var(--ai-rail-amber);
|
||||
}
|
||||
|
||||
.ai-nav-btn:hover,
|
||||
.ai-recent-item:hover,
|
||||
.ai-user-action:hover {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border-color: rgba(148, 163, 184, 0.28);
|
||||
box-shadow: 0 8px 18px rgba(31, 48, 68, 0.045);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.ai-quick-btn:hover {
|
||||
color: #0f172a;
|
||||
background: rgba(15, 23, 42, 0.035);
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.ai-quick-btn:hover i {
|
||||
color: var(--ai-rail-accent);
|
||||
}
|
||||
|
||||
.ai-quick-btn.primary:hover i {
|
||||
color: var(--ai-rail-amber);
|
||||
}
|
||||
|
||||
.ai-conversation-search {
|
||||
min-width: 0;
|
||||
min-height: 48px;
|
||||
height: 48px;
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr) 28px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 6px 0 4px;
|
||||
border: 1px solid rgba(45, 114, 217, 0.14);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8),
|
||||
0 8px 18px rgba(45, 114, 217, 0.035);
|
||||
}
|
||||
|
||||
.ai-conversation-search > i {
|
||||
color: #64748b;
|
||||
font-size: 17px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ai-conversation-search input {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: #162033;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.ai-conversation-search input::placeholder {
|
||||
color: rgba(115, 128, 151, 0.78);
|
||||
}
|
||||
|
||||
.ai-conversation-search button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ai-conversation-search button:hover {
|
||||
background: rgba(15, 23, 42, 0.055);
|
||||
color: #173d78;
|
||||
}
|
||||
|
||||
.ai-rail-divider {
|
||||
height: 1px;
|
||||
margin: 0 18px;
|
||||
background: var(--ai-rail-line);
|
||||
}
|
||||
|
||||
.ai-section-heading {
|
||||
margin: 0;
|
||||
padding: 0 10px 8px;
|
||||
color: #7d8796;
|
||||
font-size: 12px;
|
||||
font-weight: 760;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.ai-rail-nav {
|
||||
display: grid;
|
||||
padding: 18px 18px 20px;
|
||||
}
|
||||
|
||||
.ai-nav-list {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.ai-nav-btn {
|
||||
position: relative;
|
||||
min-height: 48px;
|
||||
display: grid;
|
||||
grid-template-columns: 32px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 7px 10px;
|
||||
color: var(--ai-rail-ink-soft);
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ai-nav-btn::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
transition:
|
||||
background 180ms var(--ease),
|
||||
opacity 180ms var(--ease);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ai-nav-btn.active {
|
||||
border-color: rgba(45, 114, 217, 0.13);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(45, 114, 217, 0.095), rgba(255, 255, 255, 0.74)),
|
||||
var(--ai-rail-panel);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.78),
|
||||
0 8px 18px rgba(45, 114, 217, 0.045);
|
||||
color: #173d78;
|
||||
}
|
||||
|
||||
.ai-nav-btn.active::before {
|
||||
background: linear-gradient(180deg, var(--ai-rail-accent), var(--ai-rail-green));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ai-nav-btn:not(.active):hover::before {
|
||||
background: rgba(45, 114, 217, 0.36);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ai-nav-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
transition:
|
||||
background 180ms var(--ease),
|
||||
color 180ms var(--ease),
|
||||
box-shadow 180ms var(--ease);
|
||||
}
|
||||
|
||||
.ai-nav-btn.active .ai-nav-icon {
|
||||
background:
|
||||
linear-gradient(145deg, rgba(45, 114, 217, 0.12), rgba(255, 255, 255, 0.72)),
|
||||
rgba(255, 255, 255, 0.52);
|
||||
color: var(--ai-rail-accent);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.ai-nav-icon i {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ai-nav-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ai-nav-copy strong,
|
||||
.ai-recent-title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: currentColor;
|
||||
font-size: 14px;
|
||||
font-weight: 780;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ai-nav-btn.active .ai-nav-copy strong {
|
||||
font-weight: 820;
|
||||
}
|
||||
|
||||
.ai-recent-desc {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--ai-rail-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ai-rail-recents {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
padding: 18px 12px 12px;
|
||||
}
|
||||
|
||||
.ai-recents-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 5px;
|
||||
overflow-y: auto;
|
||||
padding: 1px 4px 1px 0;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.ai-recents-list::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ai-recents-empty {
|
||||
margin: 10px 8px 0 12px;
|
||||
padding: 14px 12px;
|
||||
border: 1px dashed rgba(148, 163, 184, 0.22);
|
||||
border-radius: 12px;
|
||||
color: rgba(115, 128, 151, 0.84);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ai-recent-item {
|
||||
min-height: 56px;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
padding: 8px 10px 8px 18px;
|
||||
}
|
||||
|
||||
.ai-recent-item:focus-visible {
|
||||
outline: 2px solid rgba(45, 114, 217, 0.32);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.ai-recent-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 16px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: rgba(115, 128, 151, 0.38);
|
||||
}
|
||||
|
||||
.ai-recent-main {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.ai-recent-item:hover .ai-recent-title,
|
||||
.ai-recent-item.active .ai-recent-title {
|
||||
color: #173d78;
|
||||
}
|
||||
|
||||
.ai-recent-item:hover::before,
|
||||
.ai-recent-item.active::before {
|
||||
background: var(--ai-rail-accent);
|
||||
}
|
||||
|
||||
.ai-recent-item.active {
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border-color: rgba(183, 107, 22, 0.1);
|
||||
box-shadow:
|
||||
0 10px 22px rgba(31, 48, 68, 0.055),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.ai-recent-time {
|
||||
color: rgba(107, 114, 128, 0.82);
|
||||
font-size: 11px;
|
||||
font-weight: 680;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.ai-recent-title-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 24px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid rgba(45, 114, 217, 0.22);
|
||||
border-radius: 7px;
|
||||
outline: 0;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
color: #173d78;
|
||||
font-size: 14px;
|
||||
font-weight: 780;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0;
|
||||
box-shadow: 0 0 0 3px rgba(45, 114, 217, 0.06);
|
||||
}
|
||||
|
||||
.ai-rail-user {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
height: 72px;
|
||||
min-height: 72px;
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr) 44px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 12px 14px 12px 18px;
|
||||
border-top: 1px solid rgba(203, 213, 225, 0.55);
|
||||
border-radius: 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(247, 250, 252, 0.9)),
|
||||
rgba(255, 255, 255, 0.72);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
.ai-user-avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 2px solid rgba(255, 255, 255, 0.92);
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.22), transparent 32%),
|
||||
linear-gradient(135deg, #1f4f96, #2f8d7b);
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 820;
|
||||
box-shadow:
|
||||
0 8px 16px rgba(45, 114, 217, 0.13),
|
||||
inset 0 -1px 0 rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.ai-user-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.ai-user-copy strong {
|
||||
overflow: hidden;
|
||||
color: #182237;
|
||||
font-size: 13px;
|
||||
font-weight: 760;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ai-user-copy span {
|
||||
overflow: hidden;
|
||||
color: var(--ai-rail-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 520;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ai-user-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 44px;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.ai-user-action {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
color: #708096;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ai-user-action i {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.ai-rail.rail-collapsed {
|
||||
grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.ai-rail.rail-collapsed .ai-rail-brand {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
min-height: 70px;
|
||||
padding: 14px 10px 8px;
|
||||
}
|
||||
|
||||
.ai-rail.rail-collapsed .ai-rail-quick {
|
||||
padding: 4px 10px 16px;
|
||||
}
|
||||
|
||||
.ai-rail.rail-collapsed .ai-nav-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ai-rail.rail-collapsed .ai-nav-list::before,
|
||||
.ai-rail.rail-collapsed .ai-nav-btn::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ai-rail.rail-collapsed .ai-quick-btn,
|
||||
.ai-rail.rail-collapsed .ai-nav-btn {
|
||||
min-height: 44px;
|
||||
grid-template-rows: auto;
|
||||
justify-content: center;
|
||||
grid-template-columns: 1fr;
|
||||
align-content: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.ai-rail.rail-collapsed .ai-nav-btn.active {
|
||||
grid-column: auto;
|
||||
min-height: 44px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.ai-rail.rail-collapsed .ai-quick-btn span,
|
||||
.ai-rail.rail-collapsed .ai-conversation-search,
|
||||
.ai-rail.rail-collapsed .ai-brand-copy,
|
||||
.ai-rail.rail-collapsed .ai-section-heading,
|
||||
.ai-rail.rail-collapsed .ai-nav-copy,
|
||||
.ai-rail.rail-collapsed .ai-rail-recents,
|
||||
.ai-rail.rail-collapsed .ai-user-copy,
|
||||
.ai-rail.rail-collapsed .ai-user-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ai-rail.rail-collapsed .ai-quick-btn i,
|
||||
.ai-rail.rail-collapsed .ai-brand-logo,
|
||||
.ai-rail.rail-collapsed .ai-nav-icon,
|
||||
.ai-rail.rail-collapsed .ai-user-avatar {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ai-rail.rail-collapsed .ai-rail-user {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 12px 10px 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.ai-rail {
|
||||
max-width: min(320px, 82vw);
|
||||
}
|
||||
|
||||
.ai-rail-quick {
|
||||
padding-top: 18px;
|
||||
}
|
||||
}
|
||||
1446
web/src/assets/styles/components/personal-workbench-ai-mode.css
Normal file
1446
web/src/assets/styles/components/personal-workbench-ai-mode.css
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,77 +1,40 @@
|
||||
/* 1080p / 小高度屏：进一步压缩 AI 助手卡片高度 (排除手机端) */
|
||||
/* 1080p / 小高度屏：让传统模式顶部趋势卡更紧凑 */
|
||||
@media (max-height: 980px) and (min-width: 761px) {
|
||||
.workbench {
|
||||
--hero-padding-top: 20px;
|
||||
--hero-padding-bottom: 20px;
|
||||
--hero-title-size: 28px;
|
||||
--hero-copy-gap: 16px;
|
||||
--hero-title-bottom-gap: 10px;
|
||||
--composer-min-height: 108px;
|
||||
--composer-textarea-height: 48px;
|
||||
--composer-padding-block: 10px;
|
||||
--quick-prompts-gap-top: 8px;
|
||||
--capability-row-height: 96px;
|
||||
--hero-title-size: 31px;
|
||||
--trend-card-min-height: 232px;
|
||||
--capability-row-height: 106px;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-bg-position: right center;
|
||||
--assistant-decor-width: clamp(760px, 66vw, 980px);
|
||||
--assistant-decor-opacity: 0.86;
|
||||
padding: var(--hero-padding-top) 18px var(--hero-padding-bottom) 44px;
|
||||
.workbench-trend-hero {
|
||||
padding: 24px 20px 10px 20px;
|
||||
}
|
||||
|
||||
.assistant-copy p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0;
|
||||
.workbench-trend-card {
|
||||
}
|
||||
|
||||
.assistant-composer textarea {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.composer-icon-button,
|
||||
.composer-send-button {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.composer-send-button {
|
||||
width: 50px;
|
||||
.trend-chart-panel {
|
||||
min-height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 2K 宽屏但内容区仍偏高时，略收紧（避免 hero 独占过多纵向空间） */
|
||||
@media (min-width: 1920px) and (max-height: 1100px) {
|
||||
.workbench {
|
||||
--hero-padding-top: 22px;
|
||||
--hero-padding-bottom: 22px;
|
||||
--hero-title-size: 29px;
|
||||
--composer-min-height: 114px;
|
||||
--composer-textarea-height: 50px;
|
||||
--capability-row-height: 100px;
|
||||
--hero-title-size: 32px;
|
||||
--trend-card-min-height: 236px;
|
||||
--capability-row-height: 108px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.workbench {
|
||||
grid-template-rows: auto var(--capability-row-height) minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-bg-position: right center;
|
||||
--assistant-decor-width: clamp(760px, 66vw, 980px);
|
||||
--assistant-decor-opacity: 0.9;
|
||||
padding: var(--hero-padding-top) 18px var(--hero-padding-bottom) 44px;
|
||||
}
|
||||
|
||||
.assistant-copy {
|
||||
width: min(940px, 92%);
|
||||
}
|
||||
|
||||
.assistant-copy h1 {
|
||||
font-size: 33px;
|
||||
.trend-summary-panel h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.capability-grid--privileged {
|
||||
@@ -83,7 +46,7 @@
|
||||
}
|
||||
|
||||
.capability-card {
|
||||
padding: 17px 12px 17px 22px;
|
||||
padding: 18px 14px 18px 22px;
|
||||
}
|
||||
|
||||
.capability-copy {
|
||||
@@ -109,24 +72,15 @@
|
||||
.workbench {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
grid-template-rows: auto auto auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-bg-position: right center;
|
||||
--assistant-decor-width: clamp(620px, 74vw, 860px);
|
||||
--assistant-decor-opacity: 0.62;
|
||||
--assistant-readability-mask:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.5) 58%, rgba(255, 255, 255, 0.06) 100%);
|
||||
--assistant-theme-tint:
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.12) 0%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.04) 58%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.09) 100%);
|
||||
backdrop-filter: blur(10px) saturate(1.12);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(1.12);
|
||||
.workbench-trend-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.assistant-copy {
|
||||
width: min(820px, 92%);
|
||||
.trend-summary-panel {
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.capability-grid--privileged {
|
||||
@@ -149,126 +103,91 @@
|
||||
@media (min-width: 961px) and (max-width: 1440px),
|
||||
(min-width: 961px) and (max-height: 820px) {
|
||||
.workbench {
|
||||
--hero-padding-top: 14px;
|
||||
--hero-padding-bottom: 14px;
|
||||
--hero-title-size: 24px;
|
||||
--hero-copy-gap: 14px;
|
||||
--hero-title-bottom-gap: 8px;
|
||||
--composer-min-height: 92px;
|
||||
--composer-textarea-height: 38px;
|
||||
--composer-padding-block: 8px;
|
||||
--quick-prompts-gap-top: 5px;
|
||||
--capability-row-height: 82px;
|
||||
--hero-title-size: 30px;
|
||||
--trend-card-min-height: 232px;
|
||||
--capability-row-height: 102px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-decor-width: clamp(680px, 60vw, 880px);
|
||||
--assistant-decor-opacity: 0.72;
|
||||
padding: var(--hero-padding-top) 16px var(--hero-padding-bottom) 34px;
|
||||
.workbench-trend-hero {
|
||||
padding: 24px 18px 10px 18px;
|
||||
}
|
||||
|
||||
.assistant-copy {
|
||||
width: min(900px, 92%);
|
||||
.workbench-trend-card {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.assistant-copy h1 {
|
||||
margin-bottom: var(--hero-title-bottom-gap);
|
||||
.trend-summary-panel {
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.trend-summary-panel h1 {
|
||||
margin-bottom: 28px;
|
||||
font-size: var(--hero-title-size);
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.assistant-composer {
|
||||
min-height: var(--composer-min-height);
|
||||
gap: 4px;
|
||||
padding: var(--composer-padding-block) 14px 8px;
|
||||
.trend-total {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.assistant-composer textarea {
|
||||
height: var(--composer-textarea-height);
|
||||
min-height: var(--composer-textarea-height);
|
||||
max-height: var(--composer-textarea-height);
|
||||
.trend-summary-panel small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.trend-chart-panel {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.trend-chart-head strong {
|
||||
font-size: 14px;
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
.composer-toolbar {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.composer-icon-button,
|
||||
.composer-send-button {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.composer-icon-button {
|
||||
width: 30px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.composer-send-button {
|
||||
width: 46px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.composer-count {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quick-prompts {
|
||||
gap: 8px;
|
||||
margin-top: var(--quick-prompts-gap-top);
|
||||
.trend-chart-source {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.quick-prompts button {
|
||||
min-height: 24px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.capability-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.capability-card {
|
||||
grid-template-columns: 34px minmax(0, 1fr) 14px;
|
||||
gap: 10px;
|
||||
padding: 12px 12px 12px 16px;
|
||||
grid-template-columns: 40px minmax(0, 1fr) 16px;
|
||||
gap: 12px;
|
||||
padding: 15px 14px 15px 18px;
|
||||
}
|
||||
|
||||
.capability-icon {
|
||||
--workbench-list-icon-size: 34px;
|
||||
--workbench-list-icon-art-size: 20px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
--workbench-list-icon-size: 40px;
|
||||
--workbench-list-icon-art-size: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.capability-copy {
|
||||
gap: 2px;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.capability-copy strong {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.capability-copy small {
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.capability-arrow {
|
||||
width: 14px;
|
||||
min-width: 14px;
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.workbench {
|
||||
height: auto;
|
||||
grid-template-rows: none;
|
||||
gap: 14px;
|
||||
overflow: visible;
|
||||
--workbench-glass-base:
|
||||
@@ -279,47 +198,36 @@
|
||||
--workbench-glass-blur: blur(14px) saturate(1.2);
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
min-height: auto;
|
||||
--assistant-bg-position: right center;
|
||||
--assistant-decor-width: min(620px, 118vw);
|
||||
--assistant-decor-opacity: 0.36;
|
||||
--assistant-readability-mask:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.76) 100%),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.52) 100%);
|
||||
--assistant-theme-tint:
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.12) 0%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.04) 100%);
|
||||
padding: 24px 18px 24px;
|
||||
backdrop-filter: blur(9px) saturate(1.1);
|
||||
-webkit-backdrop-filter: blur(9px) saturate(1.1);
|
||||
.workbench-trend-hero {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.assistant-copy {
|
||||
width: 100%;
|
||||
.workbench-trend-card {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.assistant-copy h1 {
|
||||
.trend-summary-panel h1 {
|
||||
max-width: 320px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.assistant-composer {
|
||||
padding: 14px;
|
||||
.trend-summary-panel {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.composer-toolbar {
|
||||
.trend-total {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.trend-chart-head {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.composer-count {
|
||||
order: 4;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.composer-send-button {
|
||||
margin-left: auto;
|
||||
.trend-chart-panel {
|
||||
min-height: 148px;
|
||||
}
|
||||
|
||||
.capability-grid,
|
||||
@@ -356,88 +264,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 针对低高度视口（如低于 840px，包含大部分笔记本 768px 高度），解除 height: 100% 限制，让内容流式高度，防止纵向元素被过度压扁 (排除手机端) */
|
||||
/* 针对低高度视口，解除 height: 100% 限制，防止纵向元素被过度压扁 */
|
||||
@media (max-height: 840px) and (min-width: 761px) {
|
||||
.workbench {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
grid-template-rows: auto var(--capability-row-height) auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端/窄屏自适应优化 (560px 以下) */
|
||||
@media (max-width: 560px) {
|
||||
/* 常用提问横向滑动展示，避免折行过多撑爆高度 */
|
||||
.quick-prompts {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.quick-prompts span {
|
||||
display: none; /* 隐藏“常用提问：”前缀，以最大化利用横向空间 */
|
||||
}
|
||||
|
||||
.quick-prompts button {
|
||||
flex-shrink: 0;
|
||||
padding: 0 10px;
|
||||
min-height: 26px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 隐藏常用提问横滑条的原生滚动条，保持精致视觉 */
|
||||
.quick-prompts::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-bg-position: 72% center;
|
||||
padding: 20px 14px 20px;
|
||||
.workbench-trend-hero {
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端/窄屏自适应优化 (480px 以下) */
|
||||
@media (max-width: 480px) {
|
||||
/* 输入框更小巧 */
|
||||
.assistant-composer {
|
||||
padding: 10px 12px;
|
||||
min-height: 94px;
|
||||
.trend-summary-panel h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.assistant-composer textarea {
|
||||
font-size: 14px;
|
||||
height: 42px;
|
||||
min-height: 42px;
|
||||
.trend-total {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.composer-toolbar {
|
||||
gap: 6px;
|
||||
.trend-chart-panel {
|
||||
min-height: 132px;
|
||||
}
|
||||
|
||||
.composer-icon-button,
|
||||
.composer-send-button {
|
||||
height: 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.composer-icon-button {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.composer-send-button {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
/* 限制上传的附件文件芯片的最大宽度，防止溢出 */
|
||||
.assistant-file-chip {
|
||||
max-width: 110px;
|
||||
}
|
||||
|
||||
/* AI 财务助手卡片尺寸更精致 */
|
||||
.capability-card {
|
||||
padding: 12px 10px 12px 14px;
|
||||
gap: 8px;
|
||||
@@ -463,7 +316,6 @@
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 重点优化：费用进度行的网格区域（Grid Area）双行重构 */
|
||||
.progress-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(70px, auto) 1fr minmax(74px, auto);
|
||||
@@ -506,7 +358,7 @@
|
||||
.progress-result {
|
||||
grid-area: result;
|
||||
width: 100%;
|
||||
justify-items: end; /* 金额和状态右对齐 */
|
||||
justify-items: end;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
@@ -515,9 +367,9 @@
|
||||
}
|
||||
|
||||
.progress-status {
|
||||
font-size: 11px;
|
||||
min-height: 18px;
|
||||
padding: 0 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.progress-steps {
|
||||
@@ -526,7 +378,6 @@
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 缩小步骤图图标与连线 */
|
||||
.progress-step i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
@@ -541,7 +392,6 @@
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
/* 侧边分析栏优化 */
|
||||
.side-panel {
|
||||
padding: 8px 10px;
|
||||
gap: 4px;
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
.workbench {
|
||||
--hero-padding-top: 26px;
|
||||
--hero-padding-bottom: 26px;
|
||||
--hero-title-size: 30px;
|
||||
--hero-title-size: 34px;
|
||||
--hero-copy-gap: 6px;
|
||||
--hero-title-bottom-gap: 18px;
|
||||
--composer-min-height: 122px;
|
||||
--composer-textarea-height: 54px;
|
||||
--composer-padding-block: 12px;
|
||||
--quick-prompts-gap-top: 10px;
|
||||
--capability-row-height: 104px;
|
||||
--trend-card-min-height: 260px;
|
||||
--capability-row-height: 116px;
|
||||
--workbench-ink: var(--ink, #1e293b);
|
||||
--workbench-text: var(--text, #334155);
|
||||
--workbench-muted: var(--muted, #64748b);
|
||||
@@ -30,8 +27,8 @@
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto var(--capability-row-height) minmax(0, 1fr);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow: visible;
|
||||
color: var(--workbench-ink);
|
||||
@@ -41,7 +38,7 @@
|
||||
background-color: var(--workbench-surface-soft);
|
||||
}
|
||||
|
||||
.workbench :where(button, textarea) {
|
||||
.workbench :where(button) {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@@ -58,338 +55,139 @@
|
||||
|
||||
.workbench :where(button:disabled) { cursor: not-allowed; opacity: 0.7; }
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-bg-position: right center;
|
||||
--assistant-decor-width: clamp(860px, 62vw, 1180px);
|
||||
--assistant-decor-opacity: 0.92;
|
||||
--assistant-readability-mask:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.34) 46%, rgba(255, 255, 255, 0) 100%);
|
||||
--assistant-theme-tint:
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.11), rgba(var(--theme-primary-rgb, 58, 124, 165), 0.025) 54%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.075));
|
||||
.workbench-trend-hero {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 0 0 var(--trend-card-min-height);
|
||||
height: var(--trend-card-min-height);
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
padding: var(--hero-padding-top) 20px var(--hero-padding-bottom) 52px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
border-radius: 4px;
|
||||
padding: 24px 28px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.54)),
|
||||
var(--assistant-theme-tint);
|
||||
background-color: rgba(247, 252, 255, 0.72);
|
||||
backdrop-filter: blur(14px) saturate(1.18);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(1.18);
|
||||
linear-gradient(120deg, rgba(255, 255, 255, 0.85), rgba(249, 252, 255, 0.7)),
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 68%);
|
||||
backdrop-filter: blur(12px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
||||
box-shadow:
|
||||
0 12px 28px rgba(15, 23, 42, 0.045),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.86),
|
||||
inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.07);
|
||||
isolation: isolate;
|
||||
animation: workbenchItemIn 560ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
0 16px 32px rgba(15, 23, 42, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.94);
|
||||
animation: workbenchItemIn 520ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
animation-delay: 0ms;
|
||||
}
|
||||
|
||||
.assistant-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 82%;
|
||||
min-width: 760px;
|
||||
background: url("../../images/workbench-hero-right-bg.png") var(--assistant-bg-position) / var(--assistant-decor-width) auto no-repeat;
|
||||
opacity: var(--assistant-decor-opacity);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.assistant-hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
var(--assistant-readability-mask),
|
||||
linear-gradient(120deg, rgba(255, 255, 255, 0.36), transparent 22%, transparent 72%, rgba(255, 255, 255, 0.18)),
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.05), transparent 58%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.assistant-copy {
|
||||
.workbench-trend-card {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: min(980px, 94%);
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: var(--hero-copy-gap);
|
||||
grid-template-columns: minmax(200px, 0.28fr) minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.assistant-copy h1 {
|
||||
margin: 0 0 var(--hero-title-bottom-gap);
|
||||
.trend-summary-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.trend-summary-panel h1 {
|
||||
margin: 0 0 44px 0;
|
||||
color: var(--workbench-ink);
|
||||
font-size: var(--hero-title-size);
|
||||
line-height: 1.18;
|
||||
line-height: 1.16;
|
||||
font-weight: 880;
|
||||
}
|
||||
|
||||
.trend-summary-panel p {
|
||||
margin: 0 0 4px;
|
||||
color: var(--workbench-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.trend-total {
|
||||
background: linear-gradient(110deg, var(--workbench-ink) 20%, var(--workbench-primary-active) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: var(--workbench-ink);
|
||||
font-size: clamp(38px, 3.3vw, 54px);
|
||||
line-height: 1;
|
||||
font-weight: 860;
|
||||
letter-spacing: -0.5px;
|
||||
filter: drop-shadow(0 2px 8px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.12));
|
||||
}
|
||||
|
||||
.trend-change {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-height: 26px;
|
||||
color: var(--workbench-primary-active);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.trend-change.is-down {
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.trend-summary-panel small {
|
||||
color: color-mix(in srgb, var(--workbench-muted) 80%, #ffffff);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.trend-chart-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
align-content: stretch;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.trend-chart-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
color: var(--workbench-ink);
|
||||
}
|
||||
|
||||
.trend-chart-head strong {
|
||||
font-size: 15px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.assistant-copy h1 span:not(.typing-cursor) {
|
||||
color: var(--workbench-primary-active);
|
||||
display: inline-block;
|
||||
animation: workbenchItemIn 400ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
}
|
||||
|
||||
.typing-cursor {
|
||||
display: inline-block;
|
||||
color: var(--workbench-primary-active);
|
||||
font-weight: 400;
|
||||
margin-left: 2px;
|
||||
animation: cursorBlink 0.9s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes cursorBlink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
.assistant-copy p {
|
||||
max-width: 680px;
|
||||
margin: 0 0 2px;
|
||||
.trend-chart-source {
|
||||
color: var(--workbench-muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.assistant-copy > * {
|
||||
animation: workbenchItemIn 480ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
|
||||
}
|
||||
|
||||
.assistant-copy > h1 { animation-delay: 80ms; }
|
||||
.assistant-copy > p { animation-delay: 160ms; }
|
||||
.assistant-copy > .assistant-composer { animation-delay: 240ms; }
|
||||
.assistant-copy > .assistant-file-strip { animation-delay: 320ms; }
|
||||
.assistant-copy > .quick-prompts { animation-delay: 320ms; }
|
||||
|
||||
.assistant-file-input { display: none; }
|
||||
|
||||
.assistant-composer {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
max-width: 920px;
|
||||
min-height: var(--composer-min-height);
|
||||
padding: var(--composer-padding-block) 18px 10px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.24);
|
||||
border-radius: 4px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.74)),
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.045), rgba(255, 255, 255, 0.18));
|
||||
box-shadow:
|
||||
0 10px 24px rgba(15, 23, 42, 0.045),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06);
|
||||
backdrop-filter: blur(10px) saturate(1.14);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(1.14);
|
||||
transition:
|
||||
border-color 180ms var(--ease),
|
||||
background 180ms var(--ease),
|
||||
box-shadow 180ms var(--ease);
|
||||
}
|
||||
|
||||
.assistant-composer::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(110deg, rgba(255, 255, 255, 0.32), transparent 32%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.assistant-composer > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.assistant-composer:focus-within {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.58);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)),
|
||||
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06), rgba(255, 255, 255, 0.22));
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.11),
|
||||
0 14px 30px rgba(15, 23, 42, 0.055),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.94),
|
||||
inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
|
||||
}
|
||||
|
||||
.assistant-composer textarea {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: var(--composer-textarea-height);
|
||||
min-height: var(--composer-textarea-height);
|
||||
max-height: var(--composer-textarea-height);
|
||||
resize: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: var(--workbench-ink);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.assistant-composer textarea::placeholder {
|
||||
color: color-mix(in srgb, var(--workbench-muted) 70%, #ffffff);
|
||||
}
|
||||
|
||||
.assistant-composer textarea:focus { outline: none; }
|
||||
|
||||
.assistant-composer textarea[readonly] {
|
||||
color: color-mix(in srgb, var(--workbench-ink) 72%, #ffffff);
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.assistant-intent-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
min-height: 28px;
|
||||
gap: 8px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
|
||||
border-radius: 4px;
|
||||
background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
|
||||
color: var(--workbench-primary-active);
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.assistant-intent-status i {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.composer-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.composer-icon-button,
|
||||
.composer-send-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.composer-icon-button {
|
||||
width: 36px;
|
||||
border: 1px solid var(--workbench-line);
|
||||
background: var(--workbench-surface);
|
||||
color: var(--workbench-text);
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.composer-count {
|
||||
margin-left: auto;
|
||||
color: color-mix(in srgb, var(--workbench-muted) 75%, #ffffff);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.composer-send-button {
|
||||
width: 56px;
|
||||
background: var(--workbench-primary-active);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
box-shadow: 0 6px 14px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
|
||||
}
|
||||
|
||||
.assistant-file-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.assistant-file-note,
|
||||
.assistant-file-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 220px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.assistant-file-note {
|
||||
background: var(--workbench-primary-soft);
|
||||
color: var(--workbench-primary-active);
|
||||
}
|
||||
|
||||
.assistant-file-chip {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--workbench-line);
|
||||
background: var(--workbench-surface);
|
||||
color: var(--workbench-text);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.assistant-file-clear {
|
||||
color: var(--workbench-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.quick-prompts {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: var(--quick-prompts-gap-top);
|
||||
margin-bottom: 0;
|
||||
color: var(--workbench-text);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.quick-prompts button {
|
||||
min-height: 28px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--workbench-line);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
color: var(--workbench-text);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.quick-prompts .quick-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--workbench-primary-active);
|
||||
font-weight: 800;
|
||||
.workbench-trend-chart {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.capability-grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 0 0 var(--capability-row-height);
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
min-height: 0;
|
||||
@@ -407,11 +205,11 @@
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
grid-template-columns: 40px minmax(0, 1fr) 18px;
|
||||
grid-template-columns: 44px minmax(0, 1fr) 18px;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
gap: 16px;
|
||||
min-height: 0;
|
||||
padding: 16px 18px 16px 22px;
|
||||
padding: 18px 20px 18px 24px;
|
||||
overflow: visible;
|
||||
text-align: left;
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
@@ -450,10 +248,10 @@
|
||||
}
|
||||
|
||||
.capability-icon {
|
||||
--workbench-list-icon-size: 40px;
|
||||
--workbench-list-icon-art-size: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
--workbench-list-icon-size: 44px;
|
||||
--workbench-list-icon-art-size: 26px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: var(--capability-color);
|
||||
}
|
||||
|
||||
@@ -467,7 +265,7 @@
|
||||
|
||||
.capability-copy strong {
|
||||
color: var(--workbench-ink);
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 850;
|
||||
line-height: 1.25;
|
||||
overflow: hidden;
|
||||
@@ -479,7 +277,7 @@
|
||||
.capability-copy small {
|
||||
overflow: hidden;
|
||||
color: var(--workbench-muted);
|
||||
font-size: 12px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -529,6 +327,7 @@
|
||||
}
|
||||
|
||||
.workbench-content-grid {
|
||||
flex: 1 1 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(640px, 1.8fr) minmax(260px, 0.55fr);
|
||||
gap: 14px;
|
||||
@@ -1034,9 +833,7 @@
|
||||
}
|
||||
|
||||
.capability-card:hover,
|
||||
.progress-row:hover,
|
||||
.quick-prompts button:hover,
|
||||
.composer-icon-button:hover {
|
||||
.progress-row:hover {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.24);
|
||||
color: var(--workbench-primary-active);
|
||||
}
|
||||
@@ -1053,9 +850,10 @@
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.assistant-hero,
|
||||
.workbench-trend-hero,
|
||||
.capability-card,
|
||||
.workbench-card {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -276,51 +276,43 @@
|
||||
}
|
||||
|
||||
.rail-user {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 78px;
|
||||
margin: 0;
|
||||
padding: 16px 20px 18px;
|
||||
border-top: 1px solid #edf2f7;
|
||||
transition: padding var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.user-summary {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 42px;
|
||||
display: flex;
|
||||
height: 72px;
|
||||
min-height: 72px;
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr) 44px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 4px;
|
||||
color: #64748b;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 12px 14px 12px 18px;
|
||||
border-top: 1px solid rgba(203, 213, 225, 0.55);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(247, 250, 252, 0.9)),
|
||||
rgba(255, 255, 255, 0.72);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
|
||||
transition:
|
||||
gap var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
background 180ms var(--ease);
|
||||
}
|
||||
|
||||
.rail-user:hover .user-summary {
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
grid-template-columns var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
flex: 0 0 36px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
|
||||
box-shadow: 0 6px 14px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
border: 2px solid rgba(255, 255, 255, 0.92);
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.22), transparent 32%),
|
||||
linear-gradient(135deg, #1f4f96, #2f8d7b);
|
||||
box-shadow:
|
||||
0 8px 16px rgba(45, 114, 217, 0.13),
|
||||
inset 0 -1px 0 rgba(15, 23, 42, 0.08);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
font-weight: 820;
|
||||
transition:
|
||||
flex-basis var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
height var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
@@ -328,9 +320,7 @@
|
||||
.user-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 116px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
opacity: 1;
|
||||
transition:
|
||||
@@ -341,9 +331,10 @@
|
||||
}
|
||||
|
||||
.user-copy strong {
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
color: #182237;
|
||||
font-size: 13px;
|
||||
font-weight: 760;
|
||||
line-height: 1.25;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -352,57 +343,47 @@
|
||||
.user-copy span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 520;
|
||||
line-height: 1.25;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-summary .mdi {
|
||||
flex: 0 0 18px;
|
||||
font-size: 18px;
|
||||
transition:
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease) var(--rail-label-delay);
|
||||
will-change: max-width, opacity;
|
||||
.user-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 44px;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: calc(100% - 6px);
|
||||
min-width: 132px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.96);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
pointer-events: none;
|
||||
transition: all 180ms var(--ease);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.rail-user:hover .user-menu {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.user-menu-item {
|
||||
.user-action {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
height: 44px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 180ms var(--ease),
|
||||
border-color 180ms var(--ease),
|
||||
color 180ms var(--ease);
|
||||
}
|
||||
|
||||
.user-action:hover {
|
||||
border-color: rgba(148, 163, 184, 0.28);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: #dc2626;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
transition: all 180ms var(--ease);
|
||||
}
|
||||
|
||||
.user-action i {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ========================================= */
|
||||
@@ -489,33 +470,14 @@
|
||||
}
|
||||
|
||||
.rail-collapsed .rail-user {
|
||||
position: relative;
|
||||
z-index: 6;
|
||||
padding: 14px 8px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.rail-collapsed .user-summary {
|
||||
grid-template-columns: 42px;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
gap: 0;
|
||||
padding: 14px 8px;
|
||||
}
|
||||
|
||||
.rail-user-menu-floating {
|
||||
position: fixed;
|
||||
z-index: 12000;
|
||||
min-width: 132px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.96);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
|
||||
transform: translateY(-50%);
|
||||
animation: railUserMenuIn 180ms var(--rail-motion-ease) both;
|
||||
}
|
||||
|
||||
.rail-user-menu-floating .user-menu-item {
|
||||
width: 100%;
|
||||
.rail-collapsed .user-copy,
|
||||
.rail-collapsed .user-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(.rail-tooltip-popper) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.employee-risk-profile-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.employee-risk-head {
|
||||
@@ -74,28 +74,28 @@
|
||||
|
||||
.employee-risk-body {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.employee-risk-decision-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(220px, 32%);
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 2px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.employee-risk-decision-panel.medium {
|
||||
border-color: #fed7aa;
|
||||
background: #fff7ed;
|
||||
border-color: #f3e8d9;
|
||||
background: #fffcf7;
|
||||
}
|
||||
|
||||
.employee-risk-decision-panel.high {
|
||||
border-color: #fecaca;
|
||||
background: #fef2f2;
|
||||
background: #fff7f7;
|
||||
}
|
||||
|
||||
.employee-risk-decision-main {
|
||||
@@ -110,13 +110,15 @@
|
||||
font-size: 10px;
|
||||
font-weight: 850;
|
||||
line-height: 1.5;
|
||||
letter-spacing: .03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.employee-risk-decision-main strong {
|
||||
min-width: 0;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@@ -143,8 +145,8 @@
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -152,8 +154,8 @@
|
||||
min-width: 0;
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1.5;
|
||||
font-weight: 900;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@@ -165,12 +167,75 @@
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.employee-risk-decision-action p {
|
||||
margin: 0;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.employee-risk-review-summary {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.employee-risk-review-item {
|
||||
min-width: 0;
|
||||
flex: 1 1 180px;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.employee-risk-review-item.medium {
|
||||
border-color: #f3e8d9;
|
||||
background: #fffcf7;
|
||||
}
|
||||
|
||||
.employee-risk-review-item.high {
|
||||
border-color: #fecaca;
|
||||
background: #fff7f7;
|
||||
}
|
||||
|
||||
.employee-risk-review-item dt,
|
||||
.employee-risk-review-item dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.employee-risk-review-item dt {
|
||||
color: #64748b;
|
||||
font-size: 10px;
|
||||
font-weight: 850;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.employee-risk-review-item dd {
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.employee-risk-review-item.high dd {
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.employee-risk-review-item.medium dd {
|
||||
color: #9a3412;
|
||||
}
|
||||
|
||||
.employee-risk-profile-section {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -205,16 +270,16 @@
|
||||
.employee-risk-evidence-row {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
padding: 8px;
|
||||
gap: 0;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
background: #f8fafc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-row.medium {
|
||||
border-color: #fed7aa;
|
||||
background: #fffbf5;
|
||||
border-color: #f3e8d9;
|
||||
background: #fffcf7;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-row.high {
|
||||
@@ -222,12 +287,26 @@
|
||||
background: #fff7f7;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-row[open] {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-row summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-row summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-title {
|
||||
min-height: 20px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
color: #0f172a;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
@@ -262,13 +341,26 @@
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-title::after {
|
||||
content: '展开';
|
||||
flex: 0 0 auto;
|
||||
color: #94a3b8;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-row[open] .employee-risk-evidence-title::after {
|
||||
content: '收起';
|
||||
}
|
||||
|
||||
.employee-risk-evidence-row ul {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0 10px 10px 10px;
|
||||
list-style: none;
|
||||
align-content: start;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-row li {
|
||||
@@ -291,6 +383,10 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.employee-risk-review-item {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.employee-risk-title-wrap,
|
||||
.employee-risk-section-head {
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -380,6 +380,14 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar-utility-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar-icon-btn {
|
||||
position: relative;
|
||||
width: 34px;
|
||||
@@ -1113,6 +1121,68 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.topbar-ai-mode-toggle {
|
||||
flex: 0 0 38px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
linear-gradient(#ffffff, #ffffff) padding-box,
|
||||
conic-gradient(from 210deg, #15b8c8, #4f6fef, #b65cff, #ec4899, #f59e0b, #15b8c8) border-box;
|
||||
box-shadow:
|
||||
0 8px 18px rgba(79, 111, 239, 0.16),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.78) inset;
|
||||
transition:
|
||||
transform 180ms var(--ease),
|
||||
box-shadow 180ms var(--ease),
|
||||
filter 180ms var(--ease);
|
||||
}
|
||||
|
||||
.topbar-ai-mode-toggle__glyph {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #0ea5b7 4%, #4f6fef 34%, #a855f7 58%, #ec4899 76%, #f59e0b 96%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 15px;
|
||||
font-weight: 950;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.topbar-ai-mode-toggle:hover,
|
||||
.topbar-ai-mode-toggle:focus-visible {
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
0 12px 24px rgba(79, 111, 239, 0.2),
|
||||
0 0 0 4px rgba(236, 72, 153, 0.08),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.86) inset;
|
||||
}
|
||||
|
||||
.topbar-ai-mode-toggle:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--theme-primary-active) 72%, #ffffff);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.topbar-ai-mode-toggle.active {
|
||||
filter: saturate(1.1);
|
||||
box-shadow:
|
||||
0 12px 24px rgba(79, 111, 239, 0.22),
|
||||
0 0 0 4px rgba(14, 165, 183, 0.09),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.88) inset;
|
||||
}
|
||||
|
||||
.topbar-ai-mode-toggle:not(.active) {
|
||||
filter: saturate(0.82);
|
||||
box-shadow:
|
||||
0 6px 14px rgba(15, 23, 42, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.82) inset;
|
||||
}
|
||||
|
||||
.kpi-chip {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
@@ -1259,6 +1329,10 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.topbar-utility-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.topbar-icon-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@@ -1271,6 +1345,16 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.topbar-ai-mode-toggle {
|
||||
flex: 0 0 34px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.topbar-ai-mode-toggle__glyph {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.kpi-chips {
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -1329,6 +1413,7 @@
|
||||
.search-wrap,
|
||||
.search-wrap.wide,
|
||||
.topbar-toolset,
|
||||
.topbar-utility-actions,
|
||||
.detail-alert-strip,
|
||||
.month-chip,
|
||||
.qa-filter,
|
||||
@@ -1344,6 +1429,15 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.topbar-utility-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.topbar-ai-mode-toggle {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.range-shell {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -1505,6 +1599,10 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.topbar-ai-mode-toggle {
|
||||
flex: 0 0 34px;
|
||||
}
|
||||
|
||||
.range-combo {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
||||
@@ -56,16 +56,52 @@
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
max-width: min(100%, 760px);
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #d8e4f0;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
color: #24324a;
|
||||
font-size: var(--wb-fs-bubble, 13px);
|
||||
line-height: 1.62;
|
||||
box-shadow: 0 10px 22px rgba(148, 163, 184, 0.14);
|
||||
.message-bubble-compact-guidance {
|
||||
max-width: min(100%, 640px);
|
||||
padding: 10px 12px;
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
||||
box-shadow: 0 8px 18px rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-meta {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-meta strong {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-answer-content {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-answer-markdown {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-answer-markdown :deep(h3) {
|
||||
margin: 0;
|
||||
padding-left: 8px;
|
||||
border-left: 3px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.42);
|
||||
color: #17324a;
|
||||
font-size: 12px;
|
||||
font-weight: 860;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-answer-markdown :deep(ul),
|
||||
.message-bubble-compact-guidance .message-answer-markdown :deep(ol) {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-answer-markdown :deep(li) {
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-suggested-actions {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.message-row.has-steward-plan .message-bubble {
|
||||
@@ -135,7 +171,7 @@
|
||||
|
||||
.steward-intent-event-list {
|
||||
margin: 0;
|
||||
padding: 0 12px 12px 30px;
|
||||
padding: 0 12px 12px 44px;
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
@@ -274,6 +310,42 @@
|
||||
color: #24324a;
|
||||
}
|
||||
|
||||
.message-answer-markdown {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(h1),
|
||||
.message-answer-markdown :deep(h2),
|
||||
.message-answer-markdown :deep(h3),
|
||||
.message-answer-markdown :deep(h4) {
|
||||
margin: 0;
|
||||
color: #0f172a;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(h1) {
|
||||
font-size: 15px;
|
||||
font-weight: 860;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(h2) {
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(h3) {
|
||||
font-size: 13px;
|
||||
font-weight: 840;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(h4) {
|
||||
font-size: 12px;
|
||||
font-weight: 820;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(p),
|
||||
.message-answer-markdown :deep(li),
|
||||
.message-answer-markdown :deep(td),
|
||||
@@ -281,16 +353,66 @@
|
||||
.message-answer-markdown :deep(blockquote) {
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
line-height: 1.62;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(p + p),
|
||||
.message-answer-markdown :deep(p + ul),
|
||||
.message-answer-markdown :deep(p + ol),
|
||||
.message-answer-markdown :deep(ul + p),
|
||||
.message-answer-markdown :deep(ol + p) {
|
||||
.message-answer-markdown :deep(ol + p),
|
||||
.message-answer-markdown :deep(blockquote + p) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(ul),
|
||||
.message-answer-markdown :deep(ol) {
|
||||
margin: 0;
|
||||
padding-left: 1.2em;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(li) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(li > p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(blockquote) {
|
||||
padding: 8px 10px;
|
||||
border-left: 3px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.38);
|
||||
border-radius: 4px;
|
||||
background: #f8fbff;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(code) {
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
background: #eef6fb;
|
||||
color: #1d4ed8;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(pre) {
|
||||
margin: 0;
|
||||
padding: 10px 12px;
|
||||
overflow: auto;
|
||||
border-radius: 4px;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(pre code) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.message-answer-markdown :deep(strong) {
|
||||
color: #0f172a;
|
||||
font-weight: 850;
|
||||
@@ -649,6 +771,40 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-suggested-actions.compact-guidance-actions {
|
||||
grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-suggested-actions.compact-guidance-actions .message-suggested-action-btn {
|
||||
min-height: 40px;
|
||||
padding: 8px 10px;
|
||||
grid-template-columns: 22px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-suggested-actions.compact-guidance-actions .message-suggested-action-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-suggested-actions.compact-guidance-actions .message-suggested-action-copy {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-suggested-actions.compact-guidance-actions .message-suggested-action-title {
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.message-bubble-compact-guidance .message-suggested-actions.compact-guidance-actions .message-suggested-action-btn small,
|
||||
.message-bubble-compact-guidance .message-suggested-actions.compact-guidance-actions .message-suggested-action-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.structured-card-reveal-enter-active {
|
||||
transition:
|
||||
opacity 220ms cubic-bezier(0.2, 0, 0, 1),
|
||||
|
||||
40
web/src/assets/styles/views/personal-workbench-view.css
Normal file
40
web/src/assets/styles/views/personal-workbench-view.css
Normal file
@@ -0,0 +1,40 @@
|
||||
.workbench-mode-fade-enter-active,
|
||||
.workbench-mode-fade-leave-active {
|
||||
transition:
|
||||
opacity 220ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
|
||||
transform 220ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
|
||||
filter 220ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
|
||||
transform-origin: 50% 24px;
|
||||
will-change: opacity, transform, filter;
|
||||
}
|
||||
|
||||
.workbench-mode-fade-enter-from,
|
||||
.workbench-mode-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10px) scale(0.992);
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.workbench-mode-fade-enter-to,
|
||||
.workbench-mode-fade-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.workbench-mode-fade-enter-active,
|
||||
.workbench-mode-fade-leave-active {
|
||||
transition: none;
|
||||
will-change: auto;
|
||||
}
|
||||
|
||||
.workbench-mode-fade-enter-from,
|
||||
.workbench-mode-fade-leave-to,
|
||||
.workbench-mode-fade-enter-to,
|
||||
.workbench-mode-fade-leave-from {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user