deerflow-code/web-code/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --radius: 0.5rem;

    /* 深色主题 (默认) */
    --bg-primary: 222.2 84% 4.9%;
    --bg-secondary: 217.2 32.6% 17.5%;
    --text-primary: 0 0% 100%;
    --text-secondary: 215 20.2% 65.1%;
    --color-primary: 217.2 91.2% 59.8%;
    --color-primary-hover: 224.3 76.3% 48%;
    --border-color: 217.2 32.6% 17.5%;
    --accent-color: 198 93% 60%;
    --card-bg: 217.2 32.6% 17.5%;
    --card-hover: 215 20.2% 25%;
    --input-bg: 217.2 32.6% 17.5%;
    --input-border: 217.2 32.6% 17.5%;

    --sidebar-background: 222.2 84% 4.9%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --td-brand-color: #ce2d39;
    --bg-color: #0062d966;
    --card-border: #fa9196;
    --color-main: #0062d9;
    --text-color: #FFFFFF;
  }

  /* 红白主题 (浅色) */
  .light {
    --bg-primary: 0 0% 100%;
    --bg-secondary: 0 86% 97%;
    --text-primary: 0 0% 9%;
    --text-secondary: 0 0% 45%;
    --color-primary: 0 84% 60%;
    --color-primary-hover: 0 72% 51%;
    --border-color: 0 76% 89%;
    --accent-color: 0 72% 51%;
    --card-bg: 0 0% 100%;
    --card-hover: 0 86% 97%;
    --input-bg: 0 0% 100%;
    --input-border: 0 76% 89%;

    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 0 0% 9%;
    --sidebar-primary: 0 84% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 86% 97%;
    --sidebar-accent-foreground: 0 0% 9%;
    --sidebar-border: 0 76% 89%;
    --sidebar-ring: 0 84% 60%;
    --color-main: #cf1322;
    --td-brand-color: #ce2d39;
    --bg-color: #fef6f6;
    --card-border: #fa9196;
    --text-color: #222222;
  }

  /* 应用变量 */
  body {
    background-color: hsl(var(--bg-primary));
    color: hsl(var(--text-primary));
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}

img {
  object-position: top;
}

.fixed {
  position: fixed;
}

/* 动态主题颜色 */
.theme-bg {
  background-color: hsl(var(--bg-primary));
}

.theme-bg-secondary {
  background-color: hsl(var(--bg-secondary));
}

.theme-text {
  color: hsl(var(--text-primary));
}

.theme-text-secondary {
  color: hsl(var(--text-secondary));
}

.theme-primary {
  background-color: hsl(var(--color-primary));
  color: white;
}

.theme-primary-text {
  color: hsl(var(--color-primary));
}

.theme-border {
  border-color: hsl(var(--border-color));
}

.theme-card {
  background-color: hsl(var(--card-bg));
}

.theme-card-hover:hover {
  background-color: hsl(var(--card-hover));
}

.theme-input {
  background-color: hsl(var(--input-bg));
  border-color: hsl(var(--input-border));
}

.theme-accent {
  background-color: hsl(var(--accent-color));
}

/* 深色主题特定样式 */
.dark {
  --bg-primary: 222.2 84% 4.9%;
  --bg-secondary: 217.2 32.6% 17.5%;
  --text-primary: 0 0% 100%;
  --text-secondary: 215 20.2% 65.1%;
  --color-primary: 217.2 91.2% 59.8%;
  --color-primary-hover: 224.3 76.3% 48%;
  --border-color: 217.2 32.6% 17.5%;
  --accent-color: 198 93% 60%;
  --card-bg: 217.2 32.6% 17.5%;
  --card-hover: 215 20.2% 25%;
  --input-bg: 217.2 32.6% 17.5%;
  --input-border: 217.2 32.6% 17.5%;
}

.dark body {
  background-color: hsl(var(--bg-primary));
}

/* 浅色主题 (红白) 样式覆盖 */
.light {
  background-color: #ffffff;
}

.light body {
  background-color: #ffffff;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background: #ddd;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  /*滚动条里面小方块*/
  background: #555;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: #f1f1f1;
  border-radius: 3px;
}

/* 主题切换动画 */
.theme-transition {
  transition: background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* 红白主题特定组件样式 */
.light .card-shadow {
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1),
    0 1px 2px rgba(220, 38, 38, 0.06);
}

.light .card-shadow-hover:hover {
  box-shadow: 0 4px 6px rgba(220, 38, 38, 0.1),
    0 2px 4px rgba(220, 38, 38, 0.06);
}

.light .btn-shadow {
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
}

.light .btn-shadow:hover {
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.task-item-active:hover {
  border: 1px solid var(--color-main);
}

.task-item-active:hover .item-active {
  background: var(--color-main);
  color: #ffffff;
}

.dark-theme:hover {
  background: #0062d966;
  color: #ffffff;
  border-color: #0062d9 !important;
  box-shadow: 0 3px 4px #8b8b8b0f;
}

.action-item:hover {
  border-color: var(--card-border);
}

.dark-theme .task-active {
  border-color: #0062d9 !important;
}

.dark-action-item {
  background: #0062d91a;
  border: 1px solid;
  border-color: #2b8ffe99;
  border-radius: 8px;
}

.dark-action-item:hover {
  background: #0062d966;
  border-color: #0062d9;
}

.task-active {
  background-color: var(--bg-color);
  border: 1px solid var(--color-main);
}

.task-active .item-active {
  background: var(--color-main);
  color: #ffffff;
}

.task-tab-color {
  color: var(--color-main);
}

.dark-theme .task-tab-color {
  color: #FFFFFF !important;
}

.dark-theme .t-progress__bar {
  background-color: #FFFFFF;
}

/* 行动列表样式 */

.action-bg0 {
  background: linear-gradient(180deg, #f2f9ff, #fff 17.89% 100%);
}

.action-bg1 {
  background: linear-gradient(180deg, #fffaed, #fff 17.89% 100%);
}

.action-bg2 {
  background: linear-gradient(180deg, #f2fff9, #fff 17.89% 100%);
}

.action-bg3 {
  background: linear-gradient(180deg, #f5f5f5, #fff 17.89% 100%);
}

.dark-action-bg {
  background: rgba(3, 38, 80, 0.6) !important;
  border: 1px solid;
  border-color: rgba(43, 143, 254, 0.6) !important;
  border-radius: 8px !important;
  box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.08) !important;
}

.list-inside {
  list-style-position: outside !important;
}