Files
ai-agent/widget/app/globals.css
T
2026-04-20 22:31:06 +08:00

158 lines
3.0 KiB
CSS

@import "tailwindcss";
:root {
--background: #f3f7fb;
--foreground: #111827;
--card: #ffffff;
--card-foreground: #111827;
--muted: #f3f4f6;
--muted-foreground: #6b7280;
--primary: #2563eb;
--primary-foreground: #ffffff;
--border: #e5e7eb;
--danger: #dc2626;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100%;
overflow-x: hidden;
background:
radial-gradient(circle at top, rgba(37, 99, 235, 0.08), transparent 30%),
linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
color: var(--foreground);
font-family:
"SF Pro Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
body {
overscroll-behavior: none;
}
button,
input,
textarea {
font: inherit;
}
textarea.cs-agent-scrollbar {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
textarea.cs-agent-scrollbar::-webkit-scrollbar {
width: 8px;
}
textarea.cs-agent-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
textarea.cs-agent-scrollbar::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: #cbd5e1;
background-clip: padding-box;
}
textarea.cs-agent-scrollbar::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
background-clip: padding-box;
}
.cs-agent-scrollbar {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
.cs-agent-scrollbar::-webkit-scrollbar {
width: 6px;
}
.cs-agent-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.cs-agent-scrollbar::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: #cbd5e1;
background-clip: padding-box;
}
.cs-agent-scrollbar::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
background-clip: padding-box;
}
.cs-agent-shell {
/* padding: 10px; */
}
.cs-agent-panel {
border-radius: 28px;
box-shadow:
0 24px 80px rgba(15, 23, 42, 0.14),
0 10px 24px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(16px);
}
.cs-agent-grid-bg {
background-image:
radial-gradient(circle at top, rgba(255, 255, 255, 0.72), transparent 32%),
linear-gradient(180deg, rgba(247, 249, 252, 0.92) 0%, rgba(238, 244, 251, 0.94) 100%),
linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
background-size:
auto,
auto,
22px 22px,
22px 22px;
background-position:
center top,
center,
center,
center;
}
.cs-agent-fade-up {
animation: cs-agent-fade-up 220ms ease-out;
}
.cs-agent-status-dot {
animation: cs-agent-pulse 1.8s ease-in-out infinite;
}
@keyframes cs-agent-fade-up {
from {
opacity: 0;
transform: translate3d(0, 8px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes cs-agent-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
/* 图片预览:遮罩在 dialog 内部绘制,避免与原生 ::backdrop 叠色 */
.cs-agent-image-lightbox::backdrop {
background: transparent;
}