Skip to content

Q
qjclaw-dmg
Commit 4c81b907 authored by edy's avatar edy
Browse files
Options

style(ui): calm renderer shell visuals

parent 3a842f4f
Pipeline #18482 failed
Show whitespace changes
Inline Side-by-side
Showing with 81 additions and 123 deletions
apps/ui/src/styles/chat.css
View file @ 4c81b907
...@@ -162,7 +162,6 @@ ...@@ -162,7 +162,6 @@
border-color: rgba(148, 199, 232, 0.46); border-color: rgba(148, 199, 232, 0.46);
color: #106bbf; color: #106bbf;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 24px rgba(89, 150, 194, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 24px rgba(89, 150, 194, 0.12);
transform: translateY(-1px);
} }
.conversation-shell .nav-item.active { .conversation-shell .nav-item.active {
...@@ -208,7 +207,6 @@ ...@@ -208,7 +207,6 @@
border-color: rgba(103, 176, 230, 0.74); border-color: rgba(103, 176, 230, 0.74);
color: #075eaf; color: #075eaf;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 30px rgba(76, 143, 193, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 30px rgba(76, 143, 193, 0.2);
transform: translateY(-1px);
} }
.conversation-shell .conversation-new-session-plus { .conversation-shell .conversation-new-session-plus {
...@@ -362,11 +360,11 @@ ...@@ -362,11 +360,11 @@
.conversation-shell .sidebar-session-list:hover::-webkit-scrollbar-thumb, .conversation-shell .sidebar-session-list:hover::-webkit-scrollbar-thumb,
.conversation-shell .sidebar-session-list:active::-webkit-scrollbar-thumb, .conversation-shell .sidebar-session-list:active::-webkit-scrollbar-thumb,
.conversation-shell .sidebar-session-list:focus::-webkit-scrollbar-thumb { .conversation-shell .sidebar-session-list:focus::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.3); background: rgba(96, 165, 250, 0.34);
} }
.conversation-shell .sidebar-session-list::-webkit-scrollbar-thumb:hover { .conversation-shell .sidebar-session-list::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.5); background: rgba(37, 99, 235, 0.42);
} }
.conversation-shell .expert-category-item { .conversation-shell .expert-category-item {
......
apps/ui/src/styles/components.css
View file @ 4c81b907
...@@ -293,8 +293,7 @@ ...@@ -293,8 +293,7 @@
padding: 0 2px; padding: 0 2px;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transform: translateY(-2px); transition: opacity 150ms ease;
transition: opacity 150ms ease, transform 150ms ease;
} }
.thinking-spinner { .thinking-spinner {
...@@ -864,7 +863,6 @@ ...@@ -864,7 +863,6 @@
.message-card:focus-within .message-card-meta { .message-card:focus-within .message-card-meta {
pointer-events: auto; pointer-events: auto;
opacity: 1; opacity: 1;
transform: translateY(0);
} }
.message-action-delete:hover { .message-action-delete:hover {
...@@ -924,8 +922,8 @@ ...@@ -924,8 +922,8 @@
} }
.composer-shell.dragging { .composer-shell.dragging {
border-color: rgba(139, 92, 246, 0.36); border-color: rgba(37, 99, 235, 0.36);
background: var(--color-primary-50); background: #eff6ff;
} }
.composer-skill-badge { .composer-skill-badge {
...@@ -1144,7 +1142,7 @@ ...@@ -1144,7 +1142,7 @@
gap: 8px; gap: 8px;
} }
.catalog-item.static { cursor: default; } .catalog-item.static { cursor: default; }
.catalog-item:hover { transform: translateY(-1px); } .catalog-item:hover { transform: none; }
.catalog-item.static:hover { transform: none; } .catalog-item.static:hover { transform: none; }
.form-grid.single { grid-template-columns: 1fr; } .form-grid.single { grid-template-columns: 1fr; }
......
apps/ui/src/styles/shell.css
View file @ 4c81b907
...@@ -16,13 +16,9 @@ ...@@ -16,13 +16,9 @@
display: grid; display: grid;
grid-template-rows: auto auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
gap: 18px; gap: 18px;
background: background: #eff6ff;
linear-gradient(180deg, rgba(167, 139, 250, 0.15), rgba(124, 58, 237, 0.1)),
rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-right: 1px solid var(--color-border-light); border-right: 1px solid var(--color-border-light);
box-shadow: inset -1px 0 0 rgba(124, 58, 237, 0.2); box-shadow: inset -1px 0 0 rgba(148, 163, 184, 0.22);
} }
.nav-list, .nav-list,
...@@ -74,8 +70,8 @@ ...@@ -74,8 +70,8 @@
.nav-item.active { .nav-item.active {
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(139, 92, 246, 0.12), rgba(239, 246, 255, 0.92),
rgba(59, 130, 246, 0.08) rgba(219, 234, 254, 0.72)
); );
color: var(--color-primary-500); color: var(--color-primary-500);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
...@@ -83,7 +79,7 @@ ...@@ -83,7 +79,7 @@
} }
.nav-item:hover:not(.active) { .nav-item:hover:not(.active) {
background: rgba(139, 92, 246, 0.05); background: rgba(239, 246, 255, 0.72);
} }
.sidebar-top, .sidebar-top,
...@@ -106,7 +102,7 @@ ...@@ -106,7 +102,7 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: rgba(139, 92, 246, 0.3) transparent; scrollbar-color: rgba(96, 165, 250, 0.34) transparent;
} }
.sidebar-expert-scroll::-webkit-scrollbar { .sidebar-expert-scroll::-webkit-scrollbar {
...@@ -119,13 +115,13 @@ ...@@ -119,13 +115,13 @@
} }
.sidebar-expert-scroll::-webkit-scrollbar-thumb { .sidebar-expert-scroll::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.3); background: rgba(96, 165, 250, 0.34);
border-radius: 2px; border-radius: 2px;
transition: background 0.2s ease; transition: background 0.2s ease;
} }
.sidebar-expert-scroll::-webkit-scrollbar-thumb:hover { .sidebar-expert-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.5); background: rgba(37, 99, 235, 0.42);
} }
.sidebar-section { .sidebar-section {
...@@ -200,9 +196,8 @@ ...@@ -200,9 +196,8 @@
} }
.expert-card:hover { .expert-card:hover {
transform: translateY(-2px); box-shadow: var(--shadow-sm);
box-shadow: var(--shadow-lg); border-color: rgba(96, 165, 250, 0.34);
border-color: rgba(139, 92, 246, 0.3);
} }
.expert-card.active { .expert-card.active {
...@@ -210,8 +205,8 @@ ...@@ -210,8 +205,8 @@
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(139, 92, 246, 0.06), rgba(239, 246, 255, 0.86),
rgba(59, 130, 246, 0.04) rgba(248, 250, 252, 0.94)
); );
} }
...@@ -260,16 +255,14 @@ ...@@ -260,16 +255,14 @@
.sidebar-session-card:hover { .sidebar-session-card:hover {
background: rgba(255, 255, 255, 0.99); background: rgba(255, 255, 255, 0.99);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transform: translateY(-1px);
} }
.sidebar-session-card.active { .sidebar-session-card.active {
border-color: rgba(139, 92, 246, 0.1); border-color: rgba(96, 165, 250, 0.2);
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(139, 92, 246, 0.04) 0%, rgba(239, 246, 255, 0.86) 0%,
rgba(139, 92, 246, 0.025) 50%, rgba(248, 250, 252, 0.94) 100%
rgba(139, 92, 246, 0.01) 100%
); );
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
} }
...@@ -293,7 +286,7 @@ ...@@ -293,7 +286,7 @@
} }
.sidebar-session-main:hover { .sidebar-session-main:hover {
background: rgba(139, 92, 246, 0.04); background: rgba(239, 246, 255, 0.72);
} }
.sidebar-session-close { .sidebar-session-close {
......
apps/ui/src/styles/theme-openclaw.css
View file @ 4c81b907
...@@ -8,12 +8,10 @@ ...@@ -8,12 +8,10 @@
--revamp-text-soft: #64748b; --revamp-text-soft: #64748b;
--revamp-blue: #2563eb; --revamp-blue: #2563eb;
--revamp-blue-strong: #1d4ed8; --revamp-blue-strong: #1d4ed8;
--revamp-blue-soft: #e0edff; --revamp-blue-soft: #eff6ff;
--revamp-blue-border: rgba(59, 130, 246, 0.48); --revamp-blue-border: rgba(59, 130, 246, 0.48);
--revamp-violet: #7c3aed; --revamp-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
--revamp-violet-soft: #ede9fe; --revamp-gradient-soft: linear-gradient(135deg, rgba(239, 246, 255, 0.92) 0%, rgba(248, 250, 252, 0.9) 100%);
--revamp-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
--revamp-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.11) 0%, rgba(124, 58, 237, 0.1) 100%);
--revamp-cyber-blue: #0f6eea; --revamp-cyber-blue: #0f6eea;
--revamp-cyber-cyan: #19b6d9; --revamp-cyber-cyan: #19b6d9;
--revamp-cyber-glow: rgba(37, 99, 235, 0.18); --revamp-cyber-glow: rgba(37, 99, 235, 0.18);
...@@ -21,7 +19,6 @@ ...@@ -21,7 +19,6 @@
--revamp-border-strong: rgba(148, 163, 184, 0.38); --revamp-border-strong: rgba(148, 163, 184, 0.38);
--revamp-shadow: 0 14px 32px rgba(15, 23, 42, 0.06); --revamp-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
--revamp-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.04); --revamp-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.04);
--revamp-shadow-card: 0 22px 54px rgba(37, 99, 235, 0.13);
min-width: 960px; min-width: 960px;
grid-template-columns: clamp(260px, 20vw, 280px) minmax(0, 1fr); grid-template-columns: clamp(260px, 20vw, 280px) minmax(0, 1fr);
background: var(--revamp-canvas); background: var(--revamp-canvas);
...@@ -65,14 +62,10 @@ ...@@ -65,14 +62,10 @@
position: relative; position: relative;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: background: linear-gradient(180deg, #eaf5ff 0%, #d5eaff 48%, #bddbfa 100%);
linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0)),
linear-gradient(180deg, #dbeafe 0%, #c7ddf8 100%);
border-right: 1px solid rgba(37, 99, 235, 0.34); border-right: 1px solid rgba(37, 99, 235, 0.34);
border-bottom: 0; border-bottom: 0;
box-shadow: box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.66);
inset -1px 0 0 rgba(255, 255, 255, 0.62),
inset 0 1px 0 rgba(255, 255, 255, 0.54);
} }
.shell.openclaw-theme > .sidebar::before, .shell.openclaw-theme > .sidebar::before,
...@@ -84,17 +77,11 @@ ...@@ -84,17 +77,11 @@
.shell.openclaw-theme > .sidebar::before { .shell.openclaw-theme > .sidebar::before {
inset: 0; inset: 0;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 32%, rgba(37, 99, 235, 0.12) 100%); background: linear-gradient(145deg, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0) 34%, rgba(37, 99, 235, 0.1) 100%);
} }
.shell.openclaw-theme > .sidebar::after { .shell.openclaw-theme > .sidebar::after {
top: -14%; content: none;
left: -18%;
width: 72%;
height: 34%;
border-radius: 999px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0) 72%);
opacity: 0.72;
} }
.shell.openclaw-theme .conversation-sidebar-layout { .shell.openclaw-theme .conversation-sidebar-layout {
...@@ -180,7 +167,7 @@ ...@@ -180,7 +167,7 @@
box-shadow: none; box-shadow: none;
backdrop-filter: none; backdrop-filter: none;
-webkit-backdrop-filter: none; -webkit-backdrop-filter: none;
transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
} }
.shell.openclaw-theme .nav-item-icon svg { .shell.openclaw-theme .nav-item-icon svg {
...@@ -205,7 +192,7 @@ ...@@ -205,7 +192,7 @@
color: var(--revamp-blue-strong); color: var(--revamp-blue-strong);
box-shadow: box-shadow:
inset 4px 0 0 var(--revamp-blue), inset 4px 0 0 var(--revamp-blue),
0 8px 18px rgba(37, 99, 235, 0.12); var(--revamp-shadow-soft);
} }
.shell.openclaw-theme .nav-item.active::before { .shell.openclaw-theme .nav-item.active::before {
...@@ -226,15 +213,15 @@ ...@@ -226,15 +213,15 @@
border-color: rgba(29, 78, 216, 0.18); border-color: rgba(29, 78, 216, 0.18);
background: linear-gradient(135deg, #2563eb, #0f6eea); background: linear-gradient(135deg, #2563eb, #0f6eea);
color: #ffffff; color: #ffffff;
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24); box-shadow: var(--revamp-shadow-soft);
transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
} }
.shell.openclaw-theme .sidebar-new-session.conversation-new-session:hover:not(:disabled) { .shell.openclaw-theme .sidebar-new-session.conversation-new-session:hover:not(:disabled) {
background: linear-gradient(135deg, #1d4ed8, #075bd8); background: linear-gradient(135deg, #1d4ed8, #075bd8);
border-color: rgba(29, 78, 216, 0.32); border-color: rgba(29, 78, 216, 0.32);
color: #ffffff; color: #ffffff;
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.28); box-shadow: var(--revamp-shadow);
} }
.shell.openclaw-theme .conversation-new-session-plus { .shell.openclaw-theme .conversation-new-session-plus {
...@@ -315,7 +302,7 @@ ...@@ -315,7 +302,7 @@
.shell.openclaw-theme.sidebar-collapsed .nav-item.active { .shell.openclaw-theme.sidebar-collapsed .nav-item.active {
box-shadow: box-shadow:
inset 0 -3px 0 var(--revamp-blue), inset 0 -3px 0 var(--revamp-blue),
0 8px 18px rgba(37, 99, 235, 0.12); var(--revamp-shadow-soft);
} }
.shell.openclaw-theme.sidebar-collapsed .nav-item-icon { .shell.openclaw-theme.sidebar-collapsed .nav-item-icon {
...@@ -474,7 +461,7 @@ ...@@ -474,7 +461,7 @@
.shell.openclaw-theme .expert-category-item:hover { .shell.openclaw-theme .expert-category-item:hover {
border-color: rgba(37, 99, 235, 0.44); border-color: rgba(37, 99, 235, 0.44);
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.08); box-shadow: var(--revamp-shadow-soft);
} }
.shell.openclaw-theme .expert-category-item:hover::before { .shell.openclaw-theme .expert-category-item:hover::before {
...@@ -484,7 +471,7 @@ ...@@ -484,7 +471,7 @@
.shell.openclaw-theme .expert-category-item.expanded { .shell.openclaw-theme .expert-category-item.expanded {
border-color: rgba(37, 99, 235, 0.52); border-color: rgba(37, 99, 235, 0.52);
background: #f8fbff; background: #f8fbff;
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.08); box-shadow: var(--revamp-shadow-soft);
} }
.shell.openclaw-theme .expert-category-item.expanded::before { .shell.openclaw-theme .expert-category-item.expanded::before {
...@@ -555,7 +542,7 @@ ...@@ -555,7 +542,7 @@
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
border-color: rgba(37, 99, 235, 0.34); border-color: rgba(37, 99, 235, 0.34);
color: #104eae; color: #104eae;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.1); box-shadow: none;
} }
.shell.openclaw-theme .expert-category-expert-item.active, .shell.openclaw-theme .expert-category-expert-item.active,
...@@ -565,14 +552,14 @@ ...@@ -565,14 +552,14 @@
color: var(--revamp-blue-strong); color: var(--revamp-blue-strong);
box-shadow: box-shadow:
inset 4px 0 0 rgba(37, 99, 235, 0.86), inset 4px 0 0 rgba(37, 99, 235, 0.86),
0 10px 20px rgba(37, 99, 235, 0.1); var(--revamp-shadow-soft);
} }
.shell.openclaw-theme .expert-category-expert-item.active { .shell.openclaw-theme .expert-category-expert-item.active {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(224, 237, 255, 0.92)); background: #ffffff;
box-shadow: box-shadow:
inset 3px 0 0 var(--revamp-cyber-blue), inset 3px 0 0 var(--revamp-cyber-blue),
0 10px 20px rgba(37, 99, 235, 0.12); var(--revamp-shadow-soft);
} }
.shell.openclaw-theme .sidebar-session-card { .shell.openclaw-theme .sidebar-session-card {
...@@ -588,7 +575,7 @@ ...@@ -588,7 +575,7 @@
.shell.openclaw-theme .sidebar-session-card:hover { .shell.openclaw-theme .sidebar-session-card:hover {
border-color: rgba(37, 99, 235, 0.42); border-color: rgba(37, 99, 235, 0.42);
background: #f8fbff; background: #f8fbff;
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.08); box-shadow: var(--revamp-shadow-soft);
} }
.shell.openclaw-theme .sidebar-session-card.active { .shell.openclaw-theme .sidebar-session-card.active {
...@@ -596,7 +583,7 @@ ...@@ -596,7 +583,7 @@
background: #ffffff; background: #ffffff;
box-shadow: box-shadow:
inset 4px 0 0 var(--revamp-blue), inset 4px 0 0 var(--revamp-blue),
0 10px 18px rgba(37, 99, 235, 0.1); var(--revamp-shadow-soft);
} }
.shell.openclaw-theme .sidebar-session-main { .shell.openclaw-theme .sidebar-session-main {
...@@ -683,9 +670,9 @@ ...@@ -683,9 +670,9 @@
padding: 30px; padding: 30px;
border: 1px solid rgba(147, 197, 253, 0.42); border: 1px solid rgba(147, 197, 253, 0.42);
background: background:
linear-gradient(135deg, rgba(239, 246, 255, 0.88), rgba(245, 243, 255, 0.62) 42%, rgba(255, 255, 255, 0.92) 100%), linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(248, 250, 252, 0.94) 100%),
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)); linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94));
box-shadow: var(--revamp-shadow-card); box-shadow: var(--revamp-shadow);
} }
.shell.openclaw-theme .bind-entry::before { .shell.openclaw-theme .bind-entry::before {
...@@ -726,12 +713,12 @@ ...@@ -726,12 +713,12 @@
border-color: rgba(147, 197, 253, 0.38); border-color: rgba(147, 197, 253, 0.38);
background: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.72);
color: #23466d; color: #23466d;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.06); box-shadow: var(--revamp-shadow-soft);
} }
.shell.openclaw-theme .bind-entry-benefit-index { .shell.openclaw-theme .bind-entry-benefit-index {
background: var(--revamp-gradient); background: var(--revamp-gradient);
box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22); box-shadow: var(--revamp-shadow-soft);
} }
.shell.openclaw-theme .bind-row { .shell.openclaw-theme .bind-row {
...@@ -758,7 +745,7 @@ ...@@ -758,7 +745,7 @@
min-height: 46px; min-height: 46px;
border-radius: 12px; border-radius: 12px;
background: var(--revamp-gradient); background: var(--revamp-gradient);
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2); box-shadow: var(--revamp-shadow-soft);
} }
.shell.openclaw-theme .status-chip { .shell.openclaw-theme .status-chip {
...@@ -794,14 +781,14 @@ ...@@ -794,14 +781,14 @@
.conversation-shell .conversation-workspace { .conversation-shell .conversation-workspace {
padding: 18px 20px 20px; padding: 18px 20px 20px;
border-radius: 24px; border-radius: 18px;
border: 1px solid rgba(147, 197, 253, 0.32); border: 1px solid rgba(147, 197, 253, 0.32);
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 251, 255, 0.74)), linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 251, 255, 0.74)),
var(--revamp-gradient-soft); var(--revamp-gradient-soft);
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.86),
0 18px 44px rgba(37, 99, 235, 0.08); var(--revamp-shadow-soft);
} }
.conversation-shell .message-list { .conversation-shell .message-list {
...@@ -871,16 +858,14 @@ ...@@ -871,16 +858,14 @@
align-content: start; align-content: start;
gap: 6px; gap: 6px;
padding: 15px 16px 14px; padding: 15px 16px 14px;
border-radius: 18px; border-radius: 12px;
border-color: rgba(191, 219, 254, 0.62); border-color: rgba(191, 219, 254, 0.62);
background: background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9)),
radial-gradient(circle at 16px 0, rgba(59, 130, 246, 0.1), transparent 42%);
color: var(--revamp-text); color: var(--revamp-text);
line-height: 1.5; line-height: 1.5;
overflow: hidden; overflow: hidden;
box-shadow: box-shadow:
0 10px 24px rgba(35, 52, 82, 0.06), var(--revamp-shadow-soft),
inset 0 1px 0 rgba(255, 255, 255, 0.88); inset 0 1px 0 rgba(255, 255, 255, 0.88);
transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
} }
...@@ -895,21 +880,14 @@ ...@@ -895,21 +880,14 @@
} }
.conversation-shell .home-empty-state .starter-prompt::after { .conversation-shell .home-empty-state .starter-prompt::after {
content: ""; content: none;
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, rgba(147, 197, 253, 0), rgba(147, 197, 253, 0.72), rgba(147, 197, 253, 0));
opacity: 0.68;
} }
.conversation-shell .home-empty-state .starter-prompt:hover { .conversation-shell .home-empty-state .starter-prompt:hover {
border-color: rgba(96, 165, 250, 0.88); border-color: rgba(96, 165, 250, 0.88);
background: background: linear-gradient(180deg, #ffffff, rgba(248, 251, 255, 0.96));
linear-gradient(180deg, #ffffff, rgba(248, 251, 255, 0.96)),
radial-gradient(circle at 18px 0, rgba(59, 130, 246, 0.14), transparent 44%);
box-shadow: box-shadow:
0 14px 28px rgba(37, 99, 235, 0.11), var(--revamp-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.92); inset 0 1px 0 rgba(255, 255, 255, 0.92);
} }
...@@ -972,17 +950,15 @@ ...@@ -972,17 +950,15 @@
align-content: start; align-content: start;
gap: 6px; gap: 6px;
padding: 15px 16px 14px; padding: 15px 16px 14px;
border-radius: 18px; border-radius: 12px;
border-color: rgba(251, 113, 133, 0.42); border-color: rgba(251, 113, 133, 0.42);
background: background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 247, 250, 0.9));
linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 247, 250, 0.9)),
radial-gradient(circle at 16px 0, rgba(244, 63, 94, 0.09), transparent 42%);
color: var(--revamp-text); color: var(--revamp-text);
line-height: 1.5; line-height: 1.5;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
box-shadow: box-shadow:
0 10px 24px rgba(136, 40, 64, 0.06), var(--revamp-shadow-soft),
inset 0 1px 0 rgba(255, 255, 255, 0.9); inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
} }
...@@ -997,21 +973,14 @@ ...@@ -997,21 +973,14 @@
} }
.conversation-shell .expert-empty-state-xiaohongshu .starter-prompt::after { .conversation-shell .expert-empty-state-xiaohongshu .starter-prompt::after {
content: ""; content: none;
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, rgba(251, 113, 133, 0), rgba(251, 113, 133, 0.58), rgba(96, 165, 250, 0));
opacity: 0.68;
} }
.conversation-shell .expert-empty-state-xiaohongshu .starter-prompt:hover { .conversation-shell .expert-empty-state-xiaohongshu .starter-prompt:hover {
border-color: rgba(244, 63, 94, 0.68); border-color: rgba(244, 63, 94, 0.68);
background: background: linear-gradient(180deg, #ffffff, rgba(255, 247, 250, 0.96));
linear-gradient(180deg, #ffffff, rgba(255, 247, 250, 0.96)),
radial-gradient(circle at 18px 0, rgba(244, 63, 94, 0.13), transparent 44%);
box-shadow: box-shadow:
0 14px 28px rgba(225, 29, 72, 0.1), var(--revamp-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.92); inset 0 1px 0 rgba(255, 255, 255, 0.92);
} }
...@@ -1157,12 +1126,12 @@ ...@@ -1157,12 +1126,12 @@
gap: var(--space-3); gap: var(--space-3);
max-width: min(72%, 760px); max-width: min(72%, 760px);
padding: var(--space-4) var(--space-5); padding: var(--space-4) var(--space-5);
border-radius: 18px; border-radius: 12px;
border-color: rgba(147, 197, 253, 0.28); border-color: rgba(147, 197, 253, 0.28);
background: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.92);
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 12px 26px rgba(15, 23, 42, 0.06); var(--revamp-shadow-soft);
} }
.conversation-shell .message-bubble-user { .conversation-shell .message-bubble-user {
...@@ -1184,12 +1153,12 @@ ...@@ -1184,12 +1153,12 @@
.conversation-shell .message-card.assistant .markdown-body { .conversation-shell .message-card.assistant .markdown-body {
padding: var(--space-5) var(--space-6); padding: var(--space-5) var(--space-6);
border-radius: 18px; border-radius: 12px;
border: 1px solid rgba(203, 213, 225, 0.72); border: 1px solid rgba(203, 213, 225, 0.72);
background: rgba(255, 255, 255, 0.94); background: rgba(255, 255, 255, 0.94);
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.86),
0 12px 28px rgba(15, 23, 42, 0.055); var(--revamp-shadow-soft);
} }
.conversation-shell .message-card.user .message-plain-text, .conversation-shell .message-card.user .message-plain-text,
...@@ -1207,11 +1176,11 @@ ...@@ -1207,11 +1176,11 @@
} }
.conversation-shell .message-card.assistant .generation-status-card { .conversation-shell .message-card.assistant .generation-status-card {
border-radius: 18px; border-radius: 12px;
border-color: rgba(37, 99, 235, 0.24); border-color: rgba(37, 99, 235, 0.24);
background: background:
linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.94)); linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.94));
box-shadow: 0 12px 26px rgba(37, 99, 235, 0.08); box-shadow: var(--revamp-shadow-soft);
} }
.conversation-shell .message-card.assistant .message-trace.streaming { .conversation-shell .message-card.assistant .message-trace.streaming {
...@@ -1308,13 +1277,13 @@ ...@@ -1308,13 +1277,13 @@
display: grid; display: grid;
gap: 10px; gap: 10px;
padding: 12px 14px 11px; padding: 12px 14px 11px;
border-radius: 20px; border-radius: 14px;
border: 1px solid rgba(147, 197, 253, 0.42); border: 1px solid rgba(147, 197, 253, 0.42);
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)); linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 18px 38px rgba(37, 99, 235, 0.1); var(--revamp-shadow-soft);
} }
.conversation-shell .composer-surface:focus-within { .conversation-shell .composer-surface:focus-within {
...@@ -1322,7 +1291,7 @@ ...@@ -1322,7 +1291,7 @@
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 0 0 3px rgba(37, 99, 235, 0.08), 0 0 0 3px rgba(37, 99, 235, 0.08),
0 20px 42px rgba(37, 99, 235, 0.12); var(--revamp-shadow-soft);
} }
.conversation-shell .composer-field textarea, .conversation-shell .composer-field textarea,
...@@ -1435,13 +1404,13 @@ ...@@ -1435,13 +1404,13 @@
background: var(--revamp-gradient); background: var(--revamp-gradient);
color: #ffffff; color: #ffffff;
font-size: 0; font-size: 0;
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22); box-shadow: var(--revamp-shadow-soft);
transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease; transition: background 160ms ease, box-shadow 160ms ease;
} }
.conversation-shell .composer-submit:hover:not(:disabled) { .conversation-shell .composer-submit:hover:not(:disabled) {
background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%); background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.26); box-shadow: var(--revamp-shadow);
} }
.conversation-shell .composer-submit:disabled { .conversation-shell .composer-submit:disabled {
...@@ -1480,12 +1449,12 @@ ...@@ -1480,12 +1449,12 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 12px 14px; padding: 12px 14px;
border-radius: 16px; border-radius: 12px;
border: 1px solid rgba(37, 99, 235, 0.42); border: 1px solid rgba(37, 99, 235, 0.42);
background: linear-gradient(180deg, #e8f1ff 0%, #dbeafe 100%); background: linear-gradient(180deg, #e8f1ff 0%, #dbeafe 100%);
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.72),
0 12px 26px rgba(37, 99, 235, 0.12); var(--revamp-shadow-soft);
} }
.conversation-shell .home-intent-suggestion-leading { .conversation-shell .home-intent-suggestion-leading {
...@@ -1505,7 +1474,7 @@ ...@@ -1505,7 +1474,7 @@
border: 1px solid rgba(37, 99, 235, 0.28); border: 1px solid rgba(37, 99, 235, 0.28);
background: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.72);
color: var(--revamp-blue); color: var(--revamp-blue);
box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12); box-shadow: var(--revamp-shadow-soft);
} }
.conversation-shell .home-intent-suggestion-icon svg { .conversation-shell .home-intent-suggestion-icon svg {
...@@ -1584,19 +1553,19 @@ ...@@ -1584,19 +1553,19 @@
border-color: rgba(37, 99, 235, 0.48); border-color: rgba(37, 99, 235, 0.48);
background: #ffffff; background: #ffffff;
color: #1d4ed8; color: #1d4ed8;
box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12); box-shadow: var(--revamp-shadow-soft);
} }
.conversation-shell .home-intent-suggestion-actions button:not(.secondary) { .conversation-shell .home-intent-suggestion-actions button:not(.secondary) {
border: 1px solid rgba(29, 78, 216, 0.78); border: 1px solid rgba(29, 78, 216, 0.78);
background: linear-gradient(135deg, #2563eb, #1d4ed8); background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #ffffff; color: #ffffff;
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.22); box-shadow: var(--revamp-shadow-soft);
} }
.conversation-shell .home-intent-suggestion-actions button:not(.secondary):hover:not(:disabled) { .conversation-shell .home-intent-suggestion-actions button:not(.secondary):hover:not(:disabled) {
background: linear-gradient(135deg, #1d4ed8, #1e40af); background: linear-gradient(135deg, #1d4ed8, #1e40af);
box-shadow: 0 10px 18px rgba(37, 99, 235, 0.26); box-shadow: var(--revamp-shadow);
} }
@media (max-width: 820px) { @media (max-width: 820px) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment