how/script/visualization/src/style.css

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

/* 全局基础样式 */
@layer base {
  body {
    @apply bg-base-300 overflow-hidden;
  }

  /* 自定义滚动条 */
  ::-webkit-scrollbar {
    @apply w-1.5 h-1.5;
  }
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-base-content/20 rounded;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-base-content/30;
  }
}

/* D3相关样式 */
@layer components {
  /* 树节点 */
  .tree-node {
    cursor: pointer;
  }

  .tree-node circle,
  .tree-node rect {
    stroke-width: 2;
    transition: all 0.2s;
  }

  .tree-node:hover circle,
  .tree-node:hover rect {
    filter: brightness(1.2);
  }

  .tree-node.selected circle,
  .tree-node.selected rect {
    stroke: #fff;
    stroke-width: 3;
  }

  .tree-node.highlighted circle,
  .tree-node.highlighted rect {
    stroke: #2ecc71;
    stroke-width: 2;
  }

  /* ========== 统一的置灰样式 ========== */
  /* 所有节点置灰 */
  .tree-node.dimmed,
  .match-node.dimmed,
  .graph-node.dimmed,
  .walked-node.dimmed {
    opacity: 0.15;
    pointer-events: none;
  }

  /* 所有边置灰 */
  .tree-link.dimmed,
  .match-link.dimmed,
  .graph-link.dimmed,
  .walked-link.dimmed {
    stroke-opacity: 0.08 !important;
  }

  /* 分数标签置灰 */
  .match-score.dimmed,
  .walked-score.dimmed {
    opacity: 0.15;
  }

  /* ========== 统一的高亮样式 ========== */
  .tree-link.highlighted,
  .match-link.highlighted,
  .graph-link.highlighted,
  .walked-link.highlighted {
    stroke-opacity: 0.8 !important;
    stroke-width: 2 !important;
  }

  /* ========== 游走层节点样式 ========== */
  .walked-node {
    cursor: pointer;
  }

  .walked-node circle,
  .walked-node rect {
    transition: all 0.2s;
  }

  .walked-node:hover circle,
  .walked-node:hover rect {
    filter: brightness(1.2);
  }

  .walked-node text {
    @apply text-xs;
    fill: oklch(var(--bc));
    pointer-events: none;
  }

  .tree-node text {
    @apply text-xs;
    fill: oklch(var(--bc));
    pointer-events: none;
  }

  /* 树边 */
  .tree-link {
    fill: none;
    stroke: #9b59b6;
    stroke-opacity: 0.3;
    stroke-width: 1;
    transition: stroke-opacity 0.2s;
  }

  .tree-link.highlighted {
    stroke-opacity: 0.8;
    stroke-width: 2;
  }

  /* 图节点 */
  .graph-node {
    cursor: pointer;
  }

  .graph-node circle,
  .graph-node rect {
    stroke: #333;
    stroke-width: 2;
    transition: all 0.2s;
  }

  .graph-node.center circle,
  .graph-node.center rect {
    stroke: #fff;
    stroke-width: 3;
  }

  .graph-node:hover circle,
  .graph-node:hover rect {
    filter: brightness(1.2);
  }

  .graph-node text {
    @apply text-xs;
    fill: oklch(var(--bc));
    pointer-events: none;
  }

  /* 图边 */
  .graph-link {
    stroke-opacity: 0.6;
    transition: stroke-opacity 0.2s;
  }

  .graph-link:hover {
    stroke-opacity: 1;
  }

  .graph-link-label {
    @apply text-xs;
    fill: oklch(var(--bc) / 0.5);
  }
}