Skip to content

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

style(ui): refine left sidebar navigation

parent 244702c4
Pipeline #18449 failed
Hide whitespace changes
Inline Side-by-side
Showing with 277 additions and 119 deletions
apps/ui/src/features/shell/AppSidebar.tsx
View file @ e3f149ca
...@@ -67,14 +67,20 @@ export function AppSidebar({ ...@@ -67,14 +67,20 @@ export function AppSidebar({
}: AppSidebarProps) { }: AppSidebarProps) {
const topContent = ( const topContent = (
<> <>
<nav className="nav-list"> <nav className="nav-list" aria-label="主导航">
{[ {[
{ id: "chat" as const, label: "对话" }, { id: "chat" as const, label: "对话" },
{ id: "knowledge" as const, label: ui.knowledge }, { id: "knowledge" as const, label: ui.knowledge },
{ id: "plugins" as const, label: ui.plugins }, { id: "plugins" as const, label: ui.plugins },
{ id: "settings" as const, label: ui.settings } { id: "settings" as const, label: ui.settings }
].map((item) => ( ].map((item) => (
<button key={item.id} type="button" className={"nav-item app-no-drag" + (viewMode === item.id ? " active" : "")} onClick={() => onNavSelection(item.id)}> <button
key={item.id}
type="button"
className={"nav-item app-no-drag" + (viewMode === item.id ? " active" : "")}
aria-current={viewMode === item.id ? "page" : undefined}
onClick={() => onNavSelection(item.id)}
>
<span className="nav-item-icon" aria-hidden="true"> <span className="nav-item-icon" aria-hidden="true">
{navIcon(item.id)} {navIcon(item.id)}
</span> </span>
......
apps/ui/src/features/shell/ExpertTree.tsx
View file @ e3f149ca
...@@ -140,7 +140,7 @@ export function ExpertTree({ ...@@ -140,7 +140,7 @@ export function ExpertTree({
const hasExperts = categoryExperts.length > 0 const hasExperts = categoryExperts.length > 0
return ( return (
<div key={category.id} className="expert-category-item expert-tree-category"> <div key={category.id} className={"expert-category-item expert-tree-category" + (isExpanded && hasExperts ? " expanded" : "")}>
<button <button
type="button" type="button"
className="expert-category-header expert-tree-category-trigger app-no-drag" className="expert-category-header expert-tree-category-trigger app-no-drag"
......
apps/ui/src/features/shell/SessionList.tsx
View file @ e3f149ca
...@@ -45,7 +45,13 @@ export function SessionList({ ...@@ -45,7 +45,13 @@ export function SessionList({
<div className="sidebar-session-list"> <div className="sidebar-session-list">
{sessions.map((session, index) => ( {sessions.map((session, index) => (
<div key={session.id} className={"sidebar-session-card" + (activeSessionId === session.id ? " active" : "")}> <div key={session.id} className={"sidebar-session-card" + (activeSessionId === session.id ? " active" : "")}>
<button type="button" className="sidebar-session-main app-no-drag" disabled={projectActionPending} onClick={() => onOpenSession(session.id)}> <button
type="button"
className="sidebar-session-main app-no-drag"
aria-current={activeSessionId === session.id ? "true" : undefined}
disabled={projectActionPending}
onClick={() => onOpenSession(session.id)}
>
<strong>{sessionTitles[session.id] ?? formatSessionTitle(session.title, index)}</strong> <strong>{sessionTitles[session.id] ?? formatSessionTitle(session.title, index)}</strong>
</button> </button>
{sessions.length > 1 ? ( {sessions.length > 1 ? (
...@@ -57,7 +63,9 @@ export function SessionList({ ...@@ -57,7 +63,9 @@ export function SessionList({
disabled={projectActionPending || (sendPhase !== "idle" && activeStreamSessionId === session.id)} disabled={projectActionPending || (sendPhase !== "idle" && activeStreamSessionId === session.id)}
onClick={() => onCloseSession(session.id)} onClick={() => onCloseSession(session.id)}
> >
x <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<path d="M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75" />
</svg>
</button> </button>
) : null} ) : null}
</div> </div>
......
apps/ui/src/styles/chat.css
View file @ e3f149ca
...@@ -173,12 +173,12 @@ ...@@ -173,12 +173,12 @@
.conversation-shell .sidebar-bottom { .conversation-shell .sidebar-bottom {
min-height: 0; min-height: 0;
display: flex; display: grid;
flex-direction: column; grid-template-rows: minmax(0, 55fr) minmax(120px, 45fr);
overflow-y: auto; overflow: hidden;
overflow-x: hidden; overflow-x: hidden;
gap: 14px; gap: 14px;
padding-right: 4px; padding-right: 0;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: rgba(94, 164, 216, 0.44) transparent; scrollbar-color: rgba(94, 164, 216, 0.44) transparent;
} }
...@@ -208,18 +208,15 @@ ...@@ -208,18 +208,15 @@
} }
.conversation-shell .sidebar-experts-entry { .conversation-shell .sidebar-experts-entry {
flex: 0 0 calc(55% - 6px); min-height: 0;
min-height: calc(55% - 6px);
display: grid; display: grid;
grid-template-rows: auto auto; grid-template-rows: auto minmax(0, 1fr);
gap: 10px; gap: 10px;
align-content: start; overflow: hidden;
overflow: visible;
} }
.conversation-shell .sidebar-session-section { .conversation-shell .sidebar-session-section {
flex: 0 0 calc(45% - 6px); min-height: 0;
min-height: calc(45% - 6px);
display: grid; display: grid;
grid-template-rows: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
overflow: hidden; overflow: hidden;
...@@ -250,14 +247,33 @@ ...@@ -250,14 +247,33 @@
.conversation-shell .sidebar-expert-scroll { .conversation-shell .sidebar-expert-scroll {
min-height: 0; min-height: 0;
overflow-y: visible; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding-right: 0; padding-right: 2px;
scrollbar-width: thin;
scrollbar-color: rgba(94, 164, 216, 0.44) transparent;
}
.conversation-shell .sidebar-expert-scroll::-webkit-scrollbar {
width: 4px;
}
.conversation-shell .sidebar-expert-scroll::-webkit-scrollbar-track {
background: transparent;
} }
.conversation-shell .sidebar-expert-scroll::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(94, 164, 216, 0.44);
}
.conversation-shell .nav-item:focus-visible,
.conversation-shell .conversation-new-session:focus-visible,
.conversation-shell .expert-category-header:focus-visible, .conversation-shell .expert-category-header:focus-visible,
.conversation-shell .expert-category-expert-item:focus-visible { .conversation-shell .expert-category-expert-item:focus-visible,
outline: 2px solid rgba(21, 132, 209, 0.42); .conversation-shell .sidebar-session-main:focus-visible,
.conversation-shell .sidebar-session-close:focus-visible {
outline: 2px solid rgba(21, 132, 209, 0.58);
outline-offset: 2px; outline-offset: 2px;
} }
...@@ -273,7 +289,7 @@ ...@@ -273,7 +289,7 @@
} }
.conversation-shell .sidebar-session-list::-webkit-scrollbar { .conversation-shell .sidebar-session-list::-webkit-scrollbar {
width: 2px; width: 4px;
opacity: 0; opacity: 0;
} }
...@@ -299,10 +315,22 @@ ...@@ -299,10 +315,22 @@
} }
.conversation-shell .expert-category-item { .conversation-shell .expert-category-item {
position: relative;
border-radius: 16px; border-radius: 16px;
border: 1px solid rgba(173, 214, 239, 0.48); border: 1px solid rgba(173, 214, 239, 0.48);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(235, 247, 255, 0.62)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(235, 247, 255, 0.62));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 22px rgba(85, 147, 192, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 22px rgba(85, 147, 192, 0.08);
overflow: hidden;
}
.conversation-shell .expert-category-item::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, #86d7ff 0%, #1490db 100%);
opacity: 0;
transition: opacity 180ms ease;
} }
.conversation-shell .expert-category-item:hover { .conversation-shell .expert-category-item:hover {
...@@ -310,6 +338,15 @@ ...@@ -310,6 +338,15 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 14px 26px rgba(78, 145, 194, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 14px 26px rgba(78, 145, 194, 0.12);
} }
.conversation-shell .expert-category-item.expanded {
border-color: rgba(84, 166, 225, 0.72);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(222, 241, 255, 0.72));
}
.conversation-shell .expert-category-item.expanded::before {
opacity: 1;
}
.conversation-shell .expert-category-header { .conversation-shell .expert-category-header {
min-height: 44px; min-height: 44px;
padding: 0 12px; padding: 0 12px;
...@@ -365,9 +402,9 @@ ...@@ -365,9 +402,9 @@
} }
.conversation-shell .sidebar-session-card { .conversation-shell .sidebar-session-card {
position: relative;
min-height: 54px; min-height: 54px;
height: 54px; height: 54px;
flex: 0 0 54px;
align-self: start; align-self: start;
padding: 4px; padding: 4px;
border-radius: 18px; border-radius: 18px;
...@@ -376,6 +413,17 @@ ...@@ -376,6 +413,17 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 24px rgba(66, 132, 177, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 24px rgba(66, 132, 177, 0.12);
} }
.conversation-shell .sidebar-session-card::before {
content: "";
position: absolute;
inset: 8px auto 8px 0;
width: 3px;
border-radius: 999px;
background: #1490db;
opacity: 0;
transition: opacity 180ms ease;
}
.conversation-shell .sidebar-session-card:hover { .conversation-shell .sidebar-session-card:hover {
background: linear-gradient(180deg, rgba(251, 254, 255, 0.9), rgba(206, 233, 249, 0.8)); background: linear-gradient(180deg, rgba(251, 254, 255, 0.9), rgba(206, 233, 249, 0.8));
border-color: rgba(109, 178, 223, 0.6); border-color: rgba(109, 178, 223, 0.6);
...@@ -388,9 +436,13 @@ ...@@ -388,9 +436,13 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 18px 30px rgba(56, 123, 170, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 18px 30px rgba(56, 123, 170, 0.2);
} }
.conversation-shell .sidebar-session-card.active::before {
opacity: 1;
}
.conversation-shell .sidebar-session-main { .conversation-shell .sidebar-session-main {
min-height: 46px; min-height: 46px;
padding: 0 12px; padding: 0 8px 0 12px;
border-radius: 14px; border-radius: 14px;
color: var(--conversation-ink); color: var(--conversation-ink);
} }
...@@ -400,9 +452,26 @@ ...@@ -400,9 +452,26 @@
} }
.conversation-shell .sidebar-session-close { .conversation-shell .sidebar-session-close {
display: inline-grid;
place-items: center;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 0 0 1px rgba(167, 209, 236, 0.72); box-shadow: inset 0 0 0 1px rgba(167, 209, 236, 0.72);
color: #64809d; color: #64809d;
opacity: 0.58;
}
.conversation-shell .sidebar-session-close svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
}
.conversation-shell .sidebar-session-card:hover .sidebar-session-close,
.conversation-shell .sidebar-session-card:focus-within .sidebar-session-close {
opacity: 1;
} }
.conversation-shell .sidebar-session-close:hover:not(:disabled) { .conversation-shell .sidebar-session-close:hover:not(:disabled) {
......
apps/ui/src/styles/theme-openclaw.css
View file @ e3f149ca
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
.shell.openclaw-theme textarea:focus-visible, .shell.openclaw-theme textarea:focus-visible,
.shell.openclaw-theme select:focus-visible, .shell.openclaw-theme select:focus-visible,
.shell.openclaw-theme a:focus-visible { .shell.openclaw-theme a:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.35); outline: 2px solid rgba(37, 99, 235, 0.56);
outline-offset: 2px; outline-offset: 2px;
} }
...@@ -57,8 +57,8 @@ ...@@ -57,8 +57,8 @@
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: background:
radial-gradient(circle at 24px 84px, rgba(25, 182, 217, 0.2), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0)),
linear-gradient(180deg, #d8eaff 0%, #c8dfff 48%, #bed8f8 100%); 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:
...@@ -91,33 +91,33 @@ ...@@ -91,33 +91,33 @@
.shell.openclaw-theme .conversation-sidebar-layout { .shell.openclaw-theme .conversation-sidebar-layout {
isolation: isolate; isolation: isolate;
grid-template-rows: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
gap: 14px; gap: 12px;
padding: 18px 16px; padding: 16px 14px;
} }
.shell.openclaw-theme .sidebar-top { .shell.openclaw-theme .sidebar-top {
position: relative; position: relative;
z-index: 1; z-index: 1;
gap: 12px; gap: 10px;
} }
.shell.openclaw-theme .nav-list { .shell.openclaw-theme .nav-list {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 10px; gap: 6px;
} }
.shell.openclaw-theme .nav-item { .shell.openclaw-theme .nav-item {
position: relative; position: relative;
min-height: 46px; min-height: 42px;
padding: 0 14px; padding: 0 12px 0 14px;
border-radius: 16px; border-radius: 10px;
border: 1px solid transparent; border: 1px solid rgba(96, 165, 250, 0.18);
background: linear-gradient(135deg, rgba(242, 250, 255, 0.82), rgba(212, 236, 251, 0.74)); background: rgba(255, 255, 255, 0.36);
color: #2e516c; color: #2e516c;
justify-content: flex-start; justify-content: flex-start;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 22px rgba(63, 128, 173, 0.12); box-shadow: none;
backdrop-filter: blur(10px); backdrop-filter: none;
-webkit-backdrop-filter: blur(10px); -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, transform 180ms ease;
} }
...@@ -131,26 +131,23 @@ ...@@ -131,26 +131,23 @@
} }
.shell.openclaw-theme .nav-item:hover:not(.active) { .shell.openclaw-theme .nav-item:hover:not(.active) {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(228, 244, 255, 0.78)); background: rgba(255, 255, 255, 0.62);
border-color: rgba(96, 165, 250, 0.34); border-color: rgba(96, 165, 250, 0.42);
color: var(--revamp-blue-strong); color: var(--revamp-blue-strong);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 24px rgba(89, 150, 194, 0.12); box-shadow: none;
} }
.shell.openclaw-theme .nav-item.active { .shell.openclaw-theme .nav-item.active {
background: linear-gradient(135deg, rgba(248, 253, 255, 0.96), rgba(219, 234, 254, 0.88)); background: #ffffff;
border-color: var(--revamp-blue-border); border-color: var(--revamp-blue-border);
color: var(--revamp-blue-strong); color: var(--revamp-blue-strong);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 16px 30px rgba(37, 99, 235, 0.14); box-shadow:
inset 4px 0 0 var(--revamp-blue),
0 8px 18px rgba(37, 99, 235, 0.12);
} }
.shell.openclaw-theme .nav-item.active::before { .shell.openclaw-theme .nav-item.active::before {
content: ""; content: none;
position: absolute;
inset: 7px auto 7px 0;
width: 3px;
border-radius: 999px;
background: var(--revamp-blue);
} }
.shell.openclaw-theme .conversation-sidebar-action { .shell.openclaw-theme .conversation-sidebar-action {
...@@ -158,37 +155,37 @@ ...@@ -158,37 +155,37 @@
flex: 0 0 auto; flex: 0 0 auto;
} }
.shell.openclaw-theme .conversation-sidebar-action .conversation-new-session { .shell.openclaw-theme .sidebar-new-session.conversation-new-session {
width: 100%; width: 100%;
min-height: 46px; min-height: 44px;
justify-content: flex-start; justify-content: center;
padding: 0 16px; padding: 0 16px;
border-radius: 16px; border-radius: 10px;
border-color: rgba(96, 165, 250, 0.34); border-color: rgba(29, 78, 216, 0.18);
background: linear-gradient(135deg, rgba(245, 252, 255, 0.92), rgba(219, 234, 254, 0.88)); background: linear-gradient(135deg, #2563eb, #0f6eea);
color: var(--revamp-blue-strong); color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 16px 28px rgba(37, 99, 235, 0.12); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
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, transform 180ms ease;
} }
.shell.openclaw-theme .conversation-new-session:hover:not(:disabled) { .shell.openclaw-theme .sidebar-new-session.conversation-new-session:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(224, 237, 255, 0.92)); background: linear-gradient(135deg, #1d4ed8, #075bd8);
border-color: rgba(96, 165, 250, 0.48); border-color: rgba(29, 78, 216, 0.32);
color: var(--revamp-blue-strong); color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 30px rgba(37, 99, 235, 0.14); box-shadow: 0 12px 24px rgba(37, 99, 235, 0.28);
} }
.shell.openclaw-theme .conversation-new-session-plus { .shell.openclaw-theme .conversation-new-session-plus {
width: 22px; width: 20px;
height: 22px; height: 20px;
display: inline-grid; display: inline-grid;
place-items: center; place-items: center;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(219, 234, 254, 0.9)); background: rgba(255, 255, 255, 0.18);
color: var(--revamp-cyber-blue); color: #ffffff;
font-size: 18px; font-size: 18px;
line-height: 1; line-height: 1;
box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
} }
.shell.openclaw-theme .conversation-new-session-label { .shell.openclaw-theme .conversation-new-session-label {
...@@ -200,19 +197,18 @@ ...@@ -200,19 +197,18 @@
z-index: 1; z-index: 1;
min-height: 0; min-height: 0;
display: grid; display: grid;
grid-template-rows: minmax(0, 55fr) minmax(120px, 45fr); grid-template-rows: minmax(0, 56fr) minmax(150px, 44fr);
gap: 14px; gap: 12px;
overflow: hidden; overflow: hidden;
padding-right: 0; padding-right: 0;
} }
.shell.openclaw-theme .conversation-new-session,
.shell.openclaw-theme .sidebar-experts-entry, .shell.openclaw-theme .sidebar-experts-entry,
.shell.openclaw-theme .sidebar-session-section, .shell.openclaw-theme .sidebar-session-section,
.shell.openclaw-theme .expert-category-item, .shell.openclaw-theme .expert-category-item,
.shell.openclaw-theme .sidebar-session-card { .shell.openclaw-theme .sidebar-session-card {
border-color: var(--revamp-border); border-color: rgba(59, 130, 246, 0.22);
background: rgba(255, 255, 255, 0.62); background: rgba(255, 255, 255, 0.78);
box-shadow: none; box-shadow: none;
} }
...@@ -220,13 +216,13 @@ ...@@ -220,13 +216,13 @@
min-height: 0; min-height: 0;
display: grid; display: grid;
grid-template-rows: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
gap: 10px; gap: 8px;
overflow: hidden; overflow: hidden;
padding: 14px; padding: 12px;
background: border-radius: 12px;
linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(231, 242, 255, 0.5)), background: rgba(255, 255, 255, 0.82);
radial-gradient(circle at 88% 0%, rgba(25, 182, 217, 0.16), transparent 42%); border-color: rgba(59, 130, 246, 0.32);
border-color: rgba(59, 130, 246, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
} }
.shell.openclaw-theme .sidebar-session-section { .shell.openclaw-theme .sidebar-session-section {
...@@ -234,24 +230,43 @@ ...@@ -234,24 +230,43 @@
display: grid; display: grid;
grid-template-rows: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
overflow: hidden; overflow: hidden;
padding: 14px; padding: 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.82);
border-color: rgba(59, 130, 246, 0.32);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
} }
.shell.openclaw-theme .sidebar-digital-workers-title { .shell.openclaw-theme .sidebar-digital-workers-title {
min-height: 34px; min-height: 28px;
align-items: center; align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid rgba(59, 130, 246, 0.16);
letter-spacing: 0; letter-spacing: 0;
} }
.shell.openclaw-theme .sidebar-section-title { .shell.openclaw-theme .sidebar-section-title {
color: #14345f; color: #0f2f59;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 800;
} }
.shell.openclaw-theme .sidebar-section-label, .shell.openclaw-theme .sidebar-section-label,
.shell.openclaw-theme .sidebar-session-main span { .shell.openclaw-theme .sidebar-session-main span {
color: #6d87a0; color: #486985;
}
.shell.openclaw-theme .sidebar-section-head-subtle {
min-height: 28px;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid rgba(59, 130, 246, 0.16);
}
.shell.openclaw-theme .sidebar-section-label {
font-size: 13px;
font-weight: 800;
color: #0f2f59;
} }
.shell.openclaw-theme .expert-category-item:hover, .shell.openclaw-theme .expert-category-item:hover,
...@@ -266,7 +281,7 @@ ...@@ -266,7 +281,7 @@
} }
.shell.openclaw-theme .expert-category-list { .shell.openclaw-theme .expert-category-list {
gap: 8px; gap: 7px;
} }
.shell.openclaw-theme .sidebar-expert-scroll, .shell.openclaw-theme .sidebar-expert-scroll,
...@@ -284,7 +299,7 @@ ...@@ -284,7 +299,7 @@
.shell.openclaw-theme .sidebar-session-list { .shell.openclaw-theme .sidebar-session-list {
display: grid; display: grid;
gap: 10px; gap: 8px;
align-content: start; align-content: start;
padding-right: 2px; padding-right: 2px;
} }
...@@ -305,17 +320,20 @@ ...@@ -305,17 +320,20 @@
background: rgba(94, 164, 216, 0.44); background: rgba(94, 164, 216, 0.44);
} }
.shell.openclaw-theme .sidebar-expert-scroll:hover::-webkit-scrollbar-thumb,
.shell.openclaw-theme .sidebar-expert-scroll:focus-within::-webkit-scrollbar-thumb,
.shell.openclaw-theme .sidebar-session-list:hover::-webkit-scrollbar-thumb,
.shell.openclaw-theme .sidebar-session-list:focus-within::-webkit-scrollbar-thumb {
background: rgba(37, 99, 235, 0.42);
}
.shell.openclaw-theme .expert-category-item { .shell.openclaw-theme .expert-category-item {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: 15px; border-radius: 10px;
border-color: rgba(59, 130, 246, 0.28); border-color: rgba(59, 130, 246, 0.2);
background: background: #ffffff;
linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(222, 239, 255, 0.58)), box-shadow: none;
radial-gradient(circle at 100% 0%, rgba(25, 182, 217, 0.14), transparent 46%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.72),
0 10px 22px rgba(37, 99, 235, 0.07);
transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
} }
...@@ -331,31 +349,44 @@ ...@@ -331,31 +349,44 @@
.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: box-shadow: 0 8px 16px rgba(37, 99, 235, 0.08);
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 14px 26px rgba(37, 99, 235, 0.12),
0 0 0 1px rgba(25, 182, 217, 0.08);
} }
.shell.openclaw-theme .expert-category-item:hover::before { .shell.openclaw-theme .expert-category-item:hover::before {
opacity: 1; opacity: 1;
} }
.shell.openclaw-theme .expert-category-item.expanded {
border-color: rgba(37, 99, 235, 0.52);
background: #f8fbff;
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.08);
}
.shell.openclaw-theme .expert-category-item.expanded::before {
opacity: 1;
}
.shell.openclaw-theme .expert-category-header { .shell.openclaw-theme .expert-category-header {
min-height: 42px; min-height: 40px;
padding: 0 12px; padding: 0 10px 0 12px;
transition: background 180ms ease, color 180ms ease; transition: background 180ms ease, color 180ms ease;
} }
.shell.openclaw-theme .expert-category-item.expanded .expert-category-header {
background: #eaf2ff;
}
.shell.openclaw-theme .expert-category-icon, .shell.openclaw-theme .expert-category-icon,
.shell.openclaw-theme .expert-category-toggle { .shell.openclaw-theme .expert-category-toggle {
color: var(--revamp-cyber-blue); color: var(--revamp-cyber-blue);
} }
.shell.openclaw-theme .expert-category-icon { .shell.openclaw-theme .expert-category-icon {
border-radius: 10px; width: 24px;
background: rgba(37, 99, 235, 0.08); height: 24px;
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12); border-radius: 8px;
background: rgba(37, 99, 235, 0.1);
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
} }
.shell.openclaw-theme .expert-category-name { .shell.openclaw-theme .expert-category-name {
...@@ -370,30 +401,27 @@ ...@@ -370,30 +401,27 @@
} }
.shell.openclaw-theme .expert-category-content { .shell.openclaw-theme .expert-category-content {
margin: 0 7px 7px; margin: 0;
border: 1px solid rgba(59, 130, 246, 0.18); border: 0;
border-radius: 13px; border-top: 1px solid rgba(59, 130, 246, 0.16);
background: border-radius: 0;
linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(226, 242, 255, 0.54)), background: rgba(241, 247, 255, 0.78);
radial-gradient(circle at 10% 0%, rgba(25, 182, 217, 0.1), transparent 42%); box-shadow: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.68),
0 12px 24px rgba(15, 111, 234, 0.08);
transform-origin: top center; transform-origin: top center;
animation: expertPanelReveal 220ms cubic-bezier(0.2, 0.82, 0.2, 1); animation: expertPanelReveal 220ms cubic-bezier(0.2, 0.82, 0.2, 1);
} }
.shell.openclaw-theme .expert-category-experts { .shell.openclaw-theme .expert-category-experts {
gap: 6px; gap: 5px;
padding: 7px; padding: 7px 7px 8px 10px;
} }
.shell.openclaw-theme .expert-category-expert-item { .shell.openclaw-theme .expert-category-expert-item {
min-height: 36px; min-height: 34px;
padding: 7px 10px 7px 12px; padding: 6px 9px 6px 12px;
border-radius: 11px; border-radius: 8px;
border-color: rgba(59, 130, 246, 0.16); border-color: rgba(59, 130, 246, 0.14);
background: rgba(255, 255, 255, 0.68); background: rgba(255, 255, 255, 0.74);
color: #31516f; color: #31516f;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
} }
...@@ -410,7 +438,9 @@ ...@@ -410,7 +438,9 @@
background: #ffffff; background: #ffffff;
border-color: var(--revamp-blue-border); border-color: var(--revamp-blue-border);
color: var(--revamp-blue-strong); color: var(--revamp-blue-strong);
box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.78); box-shadow:
inset 4px 0 0 rgba(37, 99, 235, 0.86),
0 10px 20px rgba(37, 99, 235, 0.1);
} }
.shell.openclaw-theme .expert-category-expert-item.active { .shell.openclaw-theme .expert-category-expert-item.active {
...@@ -420,6 +450,51 @@ ...@@ -420,6 +450,51 @@
0 10px 20px rgba(37, 99, 235, 0.12); 0 10px 20px rgba(37, 99, 235, 0.12);
} }
.shell.openclaw-theme .sidebar-session-card {
height: 50px;
min-height: 50px;
padding: 3px;
border-radius: 10px;
border-color: rgba(59, 130, 246, 0.2);
background: #ffffff;
box-shadow: none;
}
.shell.openclaw-theme .sidebar-session-card:hover {
border-color: rgba(37, 99, 235, 0.42);
background: #f8fbff;
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.08);
}
.shell.openclaw-theme .sidebar-session-card.active {
border-color: rgba(37, 99, 235, 0.58);
background: #ffffff;
box-shadow:
inset 4px 0 0 var(--revamp-blue),
0 10px 18px rgba(37, 99, 235, 0.1);
}
.shell.openclaw-theme .sidebar-session-main {
min-height: 42px;
padding: 0 8px 0 14px;
border-radius: 8px;
}
.shell.openclaw-theme .sidebar-session-main strong {
color: #12355f;
font-size: 13px;
line-height: 1.35;
}
.shell.openclaw-theme .sidebar-session-close {
width: 24px;
height: 24px;
color: #64748b;
opacity: 0.72;
background: #f1f5f9;
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.26);
}
.shell.openclaw-theme .expert-category-expert-icon { .shell.openclaw-theme .expert-category-expert-icon {
color: currentColor; color: currentColor;
} }
......
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