deerflow2/frontend/src/styles/globals.css
MT-Fire d0afbf1897 refactor(brand): 重构品牌系统,移除 SESSION_BRAND 并完善初始化逻辑
- 将 DEFAULT_BRAND 重命名为 XCLAW_BRAND,统一品牌命名规范
- 删除未使用的 SESSION_BRAND 类型和相关配置
- 优化 getInitialBrandFromBrowser 逻辑:根据 isSxwz 参数直接设置并返回对应品牌
- 更新品牌颜色 tokens 和 CSS 选择器测试
- 同步更新 provider.tsx 和相关测试用例
2026-06-13 11:30:23 +08:00

751 lines
19 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@import "tailwindcss";
@import "tw-animate-css";
@source "../node_modules/streamdown/dist/index.js";
/* Heading */
@source inline("text-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl}");
@source inline("font-{normal,medium,semibold,bold,extrabold}");
@source inline("leading-{none,tight,snug,normal,relaxed,loose}");
/* Spacing */
@source inline("m{t,b,l,r,x,y}-{0,1,2,3,4,5,6,8,10,12,16,20,24}");
@source inline("p{t,b,l,r,x,y}-{0,1,2,3,4,5,6,8,10,12,16,20,24}");
@source inline("space-{x,y}-{1,2,3,4,5,6,8}");
/* List */
@source inline("list-{disc,decimal,none,inside,outside}");
/* Text */
@source inline("text-{left,center,right,justify}");
@source inline("text-{slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}");
@source inline("italic");
@source inline("underline");
@source inline("line-through");
/* Code */
@source inline("font-mono");
@source inline("bg-{slate,gray,zinc,muted}-{50,100,200}");
@source inline("rounded{,-sm,-md,-lg,-xl}");
@source inline("border{,-2,-4}");
@source inline("border-{slate,gray,zinc,border}-{200,300}");
/* Blockquote */
@source inline("border-l-{2,4}");
@source inline("border-l-{slate,gray,primary}-{300,400,500}");
/* Link */
@source inline("text-{blue,primary,accent}-{500,600,700}");
@source inline("hover:text-{blue,primary,accent}-{600,700,800}");
@source inline("hover:underline");
/* Table */
@source inline("border-collapse");
@source inline("table-auto");
@source inline("w-full");
@source inline("divide-{x,y}");
@source inline("divide-{slate,gray,border}-{200,300}");
/* Image */
@source inline("max-w-{xs,sm,md,lg,xl,2xl,full}");
@source inline("h-auto");
@source inline("object-cover");
/* Horizontal Rule */
@source inline("border-t");
@source inline("border-{slate,gray,border}-{200,300}");
/* General */
@source inline("block");
@source inline("inline");
@source inline("inline-block");
@source inline("break-words");
@source inline("overflow-{auto,hidden,x-auto}");
@source inline("whitespace-pre-wrap");
/* Shadcn Colors */
@source inline("text-{foreground,muted-foreground,primary,secondary,accent}");
@source inline("bg-{background,muted,primary,secondary,accent}");
@source inline("border-{border,input}");
.brand-xclaw {
--brand-color-primary: #150033;
--brand-color-primary-10: #1500331a;
--brand-color-primary-60: #15003399;
}
.brand-sxwz {
--brand-color-primary: #000f33;
--brand-color-primary-10: #000f331a;
--brand-color-primary-60: #000f3399;
}
@custom-variant dark (&:is(.dark *));
@theme {
--font-sans:
"Microsoft YaHei", "微软雅黑", var(--font-geist-sans), ui-sans-serif,
system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--animate-fade-in: fade-in 1.1s;
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
--animate-fade-in-up: fade-in-up 0.15s ease-in-out forwards;
@keyframes fade-in-up {
0% {
opacity: 0;
transform: translateY(1rem) scale(1.2);
}
100% {
opacity: 1;
}
}
--animate-bouncing: bouncing 0.5s infinite alternate;
@keyframes bouncing {
to {
opacity: 0.1;
transform: translateY(-8px);
}
}
--animate-skeleton-entrance: skeleton-entrance 0.35s ease-out forwards;
@keyframes skeleton-entrance {
0% {
opacity: 0;
transform: scaleX(0);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}
--animate-suggestion-in: suggestion-in 0.2s ease-out forwards;
@keyframes suggestion-in {
0% {
opacity: 0;
transform: translateY(-1.25rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
--animate-wave: wave 0.6s ease-in-out 2;
@keyframes wave {
0%,
100% {
transform: rotate(0deg);
}
25% {
transform: rotate(20deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(20deg);
}
}
}
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-2xl: calc(var(--radius) + 8px);
--radius-3xl: calc(var(--radius) + 12px);
--radius-4xl: calc(var(--radius) + 16px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-tooltip-background: var(--tooltip-background);
--color-ws-base-1: var(--ws-color-base-1);
--color-ws-fg-primary: var(--ws-color-fg-primary);
--color-ws-surface-subtle: var(--ws-color-surface-subtle);
--color-ws-surface-elevated: var(--ws-color-surface-elevated);
--color-ws-interactive-primary: var(--ws-color-interactive-primary);
--color-ws-interactive-hover: var(--ws-color-interactive-hover);
--color-ws-line-default: var(--ws-color-line-default);
--color-ws-text-muted: var(--ws-color-text-muted);
--color-ws-icon-muted: var(--ws-color-icon-muted);
--color-ws-overlay-neutral: var(--ws-color-overlay-neutral);
--color-ws-text-subtle-strong: var(--ws-color-text-subtle-strong);
--color-ws-border-hairline: var(--ws-color-border-hairline);
--color-ws-accent-tint-soft: var(--ws-color-accent-tint-soft);
--color-ws-surface-app: var(--ws-color-surface-app);
--color-ws-surface-base: var(--ws-color-surface-base);
--color-ws-text-primary-strong: var(--ws-color-text-primary-strong);
--color-ws-surface-checker: var(--ws-color-surface-checker);
--color-ws-black-solid: var(--ws-color-black-solid);
--color-ws-info-primary: var(--ws-color-info-primary);
--animate-aurora: aurora 8s ease-in-out infinite alternate;
@keyframes aurora {
0% {
background-position: 0% 50%;
transform: rotate(-5deg) scale(0.9);
}
25% {
background-position: 50% 100%;
transform: rotate(5deg) scale(1.1);
}
50% {
background-position: 100% 50%;
transform: rotate(-3deg) scale(0.95);
}
75% {
background-position: 50% 0%;
transform: rotate(3deg) scale(1.05);
}
100% {
background-position: 0% 50%;
transform: rotate(-5deg) scale(0.9);
}
}
--animate-shine: shine var(--duration) infinite linear;
@keyframes shine {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
to {
background-position: 0% 0%;
}
}
}
:root {
--radius: 0.625rem;
--background: #f9f8fa;
--foreground: oklch(0.145 0 0);
/* --foreground: #00000066; */
/* --card: oklch(1 0.0098 87.47); */
--card: #ffffff;
--card-foreground: oklch(0.145 0 0);
/* --popover: oklch(1 0.0098 87.47); */
--popover: #ffffff;
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0 0 0);
--primary-foreground: oklch(0.985 0 0);
/* --secondary: oklch(0.9455 0.0098 87.47); */
--secondary: var(--brand-color-primary-10);
--secondary-foreground: oklch(0.205 0 0);
/* --muted: oklch(0.97 0.0098 87.47); */
--muted: var(--brand-color-primary-10);
--muted-foreground: oklch(0.556 0 0);
/* --accent: oklch(0.94 0.0098 87.47); */
--accent: var(--brand-color-primary-10);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: #00000015;
/* --border: oklch(92.23% 0.00983 87.442 / 0.09); */
--input: oklch(0.88 0.0098 87.47);
--ring: transparent;
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.965 0.0098 87.47);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0.0098 87.47);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.925 0.0098 87.47);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0.0098 87.47);
--sidebar-ring: oklch(0.708 0 0);
--tooltip-background: #00000066;
--ws-color-base-1: var(--brand-color-primary);
--ws-color-fg-primary: #333333;
--ws-color-surface-subtle: #f9f8fa;
--ws-color-surface-elevated: #fbfafc;
--ws-color-interactive-hover: var(--brand-color-primary-10);
--ws-color-interactive-primary: var(--brand-color-primary);
--ws-color-line-default: #e4e7ec;
--ws-color-text-muted: #667085;
--ws-color-icon-muted: #a3a1a1;
--ws-color-overlay-neutral: #999999;
--ws-color-text-subtle-strong: #000000c5;
--ws-color-border-hairline: #00000015;
--ws-color-accent-tint-soft: var(--brand-color-primary-10);
--ws-color-surface-app: #f8f9fb;
--ws-color-surface-base: #ffffff;
--ws-color-text-primary-strong: #0f172a;
--ws-color-surface-checker: #f4f4f5;
--ws-color-black-solid: #000000;
--ws-color-info-primary: #2563eb;
}
.dark {
--background: oklch(0.24 0.0036 106.64);
--foreground: oklch(0.985 0 0);
--card: oklch(0.238 0.0036 106.64);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0.0036 106.64);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(1 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.3 0.0036 106.64);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0.0036 106.64);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.32 0.0036 106.64);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(87.64% 0.06554 21.887 / 0.038);
--input: oklch(1 0 0 / 15%);
--ring: transparent;
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.245 0.0036 106.64);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.29 0.0036 106.64);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--tooltip-background: oklch(0.85 0 0);
--ws-color-base-1: #f4ebff;
--ws-color-fg-primary: #f5f5f5;
--ws-color-surface-subtle: #1f1f1f;
--ws-color-surface-elevated: #24222a;
--ws-color-interactive-primary: var(--brand-color-primary);
--ws-color-line-default: #3b3f48;
--ws-color-text-muted: #98a2b3;
--ws-color-icon-muted: #d0d0d0;
--ws-color-overlay-neutral: #c2c2c2;
--ws-color-text-subtle-strong: #ffffffcc;
--ws-color-border-hairline: #ffffff1f;
--ws-color-accent-tint-soft: #f4ebff24;
--ws-color-surface-app: #20242c;
--ws-color-surface-base: #2a2731;
--ws-color-text-primary-strong: #e6eaf2;
--ws-color-surface-checker: #2c2f38;
--ws-color-black-solid: #000000;
--ws-color-info-primary: #7fb2ff;
font-weight: 300;
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply text-foreground;
}
.container-md {
width: 100%;
@media (width >=40rem) {
max-width: 40rem;
}
@media (width >=48rem) {
max-width: 48rem;
}
@media (width >=64rem) {
max-width: 64rem;
}
@media (width >=80rem) {
max-width: 80rem;
}
}
.ambilight {
pointer-events: none;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.ambilight:before,
.ambilight:after {
content: "";
pointer-events: none;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(45deg,
#fb0094,
#0000ff,
#00ff00,
#ffff00,
#ff0000,
#fb0094,
#0000ff,
#00ff00,
#ffff00,
#ff0000);
background-size: 400%;
width: 100%;
height: 100%;
border-radius: 10px;
z-index: -1;
animation: ambilight 40s ease-in-out infinite;
}
.ambilight.enabled {
opacity: 1;
}
.dark .ambilight:before,
.dark .ambilight:after {
opacity: 0.85;
}
@keyframes ambilight {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.ambilight:after {
filter: blur(60px);
}
.golden-text {
background: linear-gradient(135deg, #d19e1d 0%, #e9c665 50%, #e3a812 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
}
/* Hide scrollbar but keep scroll behavior */
* {
scrollbar-width: none;
-ms-overflow-style: none;
}
/* Chrome, Safari, Opera */
*::-webkit-scrollbar {
display: none;
}
:root {
--container-width-xs: calc(var(--spacing) * 72);
--container-width-sm: calc(var(--spacing) * 144);
--container-width-md: calc(var(--spacing) * 204);
--container-width-lg: calc(var(--spacing) * 256);
}
html,
body {
font-family:
"Microsoft YaHei", "微软雅黑", "PingFang SC", ui-sans-serif, system-ui,
sans-serif;
}
/* ========================================
Streamdown Markdown Styles
使用 data-streamdown 属性选择器统一定义
支持 zoom-scale CSS 变量进行缩放
======================================== */
/* 缩放变量,默认为 1 (100%) */
:root {
--zoom-scale: 1;
}
/* p标签没有标识data-streamdown暂时只能这么写 */
p {
font-size: calc(14px * var(--zoom-scale));
}
/* 特别指定,代码块和正文一样的字体 */
code,
kbd,
samp,
pre {
font-family:
"Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif !important;
}
pre {
border-radius: 5px;
padding: 12px 16px;
}
/* 列表项 - 14px */
[data-streamdown="list-item"] {
font-size: calc(14px * var(--zoom-scale));
padding-top: calc(4px * var(--zoom-scale));
padding-bottom: calc(4px * var(--zoom-scale));
}
/* 一级标题 - 20px */
[data-streamdown="heading-1"] {
font-size: calc(20px * var(--zoom-scale));
}
/* 二三级标题 - 16px */
[data-streamdown="heading-2"],
[data-streamdown="heading-3"],
[data-streamdown="heading-4"] {
font-size: calc(16px * var(--zoom-scale));
}
/* 代码块 - 14px */
[data-streamdown="code-block"] pre,
code {
font-size: calc(14px * var(--zoom-scale));
}
/* 代码块 - 14px */
[data-streamdown="table"] {
border: none;
border-collapse: separate;
border-spacing: 0;
}
[data-streamdown="table-cell"] {
background-color: transparent;
font-size: calc(14px * var(--zoom-scale));
height: calc(42px * var(--zoom-scale));
}
[data-streamdown="table-header"] {
background: #9c9b9b26;
height: calc(50px * var(--zoom-scale));
}
[data-streamdown="table-header"] th {
text-align: center;
font-size: calc(14px * var(--zoom-scale));
}
[data-slot="hover-card-trigger"] [data-slot="badge"] {
font-size: calc(14px * var(--zoom-scale));
}
/* 表格四角圆角:由四个角单元格承担视觉圆角 */
[data-streamdown="table-header"] tr:first-child>[data-streamdown="table-header-cell"]:first-child {
border-top-left-radius: 5px;
}
[data-streamdown="table-header"] tr:first-child>[data-streamdown="table-header-cell"]:last-child {
border-top-right-radius: 5px;
}
[data-streamdown="table-body"] tr:first-child td {
line-height: calc(14px * var(--zoom-scale));
padding-top: calc(20px * var(--zoom-scale));
}
/* 行分隔线 */
/* [data-streamdown="table-body"] tr {
border-bottom: 1px solid black;
} */
[data-streamdown="table-body"] tr:last-child>[data-streamdown="table-cell"]:first-child {
border-bottom-left-radius: 5px;
}
[data-streamdown="table-body"] tr:last-child>[data-streamdown="table-cell"]:last-child {
border-bottom-right-radius: 5px;
}
[data-streamdown="table-body"] tr:last-child td {
line-height: calc(14px * var(--zoom-scale));
padding-bottom: calc(20px * var(--zoom-scale));
}
[data-streamdown="table-row"]>[data-streamdown="table-cell"] {
line-height: calc(42px * var(--zoom-scale));
vertical-align: top;
text-align: center;
}
.cm-line {
font-size: calc(14px * var(--zoom-scale));
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
}
.workspace-code-editor .ͼ4k,
.workspace-code-editor .ͼ4s,
.workspace-code-editor .ͼ4q
.workspace-code-editor .ͼ4r {
color: var(--ws-color-fg-primary);
}
.workspace-code-editor .ͼ4s {
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
}
.cm-content {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.cm-scroller {
min-width: 0;
}
.cm-editor {
overflow: hidden;
contain: paint;
}
.pptx-preview-wrap {
height: 100%;
}
.pptx-preview-wrap .pptx-preview-wrapper {
height: 100% !important;
}
.ticker-char {
overflow: hidden;
}
.ant-tour-panel {
border-radius: 10px;
border: 1px solid #000000;
font-family:
"Microsoft YaHei",
"PingFang SC",
"Hiragino Sans GB",
"Noto Sans CJK SC",
"Segoe UI",
sans-serif;
}
.ant-tour .ant-tour-arrow:before {
background: #000;
}
.workspace-input-tools-tour.ant-tour .ant-tour-section .ant-tour-close {
top: 20px;
}
.workspace-input-tools-tour .ant-tour-next-btn.ant-btn-primary,
.workspace-input-tools-tour .ant-tour-next-btn.ant-btn-primary:hover,
.workspace-input-tools-tour .ant-tour-next-btn.ant-btn-primary:focus,
.workspace-input-tools-tour .ant-tour-next-btn.ant-btn-primary:active {
height: 28px;
width: 80px;
font-size: 12px;
background: #150055 !important;
border-color: #150055 !important;
color: #fff !important;
}
.workspace-input-tools-tour .ant-tour-prev-btn.ant-btn-default,
.workspace-input-tools-tour .ant-tour-prev-btn.ant-btn-default:hover,
.workspace-input-tools-tour .ant-tour-prev-btn.ant-btn-default:focus,
.workspace-input-tools-tour .ant-tour-prev-btn.ant-btn-default:active {
/* background: #8d44ee !important; */
height: 28px;
width: 80px;
font-size: 12px;
border-color: #150055 !important;
color: #000 !important;
}
.workspace-input-tools-tour.ant-tour .ant-tour-section .ant-tour-header {
padding: 20px 20px 15px !important;
}
.workspace-input-tools-tour.ant-tour .ant-tour-section .ant-tour-description {
padding: 0 20px !important;
font-size: 13px;
}
.ant-tour-footer {
padding: 25px 20px 20px !important;
min-width: 300px;
}
.ant-tour .ant-tour-section .ant-tour-footer .ant-tour-indicators .ant-tour-indicator-active {
background: #150055 !important;
}