DadaoTask/web/src/index.css

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

@layer base {
  html,
  body,
  #root {
    height: 100%;
  }

  body {
    @apply bg-paper-100 font-sans text-base text-ink-800 antialiased;
    font-feature-settings: "cv05", "ss01";
    text-rendering: optimizeLegibility;
  }

  ::selection {
    @apply bg-primary-100 text-primary-900;
  }

  :focus-visible {
    @apply outline-none ring-2 ring-primary-400/45 ring-offset-1 ring-offset-paper-100;
  }

  /* 细滚动条，避免默认滚动条破坏整体观感 */
  * {
    scrollbar-width: thin;
    scrollbar-color: theme("colors.line.300") transparent;
  }
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  *::-webkit-scrollbar-thumb {
    @apply rounded-full border-4 border-solid border-transparent bg-line-300 bg-clip-content;
  }
  *::-webkit-scrollbar-thumb:hover {
    @apply bg-ink-300 bg-clip-content;
  }

  h1,
  h2,
  h3 {
    @apply font-display text-ink-900;
    text-wrap: balance;
  }

  input,
  textarea,
  select {
    font: inherit;
  }
}

@layer components {
  /* —— 容器 —— */
  .card {
    @apply rounded-2xl border border-line-200 bg-white shadow-card;
  }
  .card-flat {
    @apply rounded-2xl border border-line-200 bg-white;
  }
  .panel {
    @apply rounded-2xl border border-line-200 bg-paper-50;
  }

  /* —— 按钮 —— */
  .btn {
    @apply inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap
      rounded-lg px-3 py-1.5 text-sm font-medium transition-all duration-150
      disabled:pointer-events-none disabled:opacity-40;
  }
  .btn-primary {
    @apply btn bg-primary-600 text-white shadow-sm hover:bg-primary-700 active:translate-y-px;
  }
  .btn-ghost {
    @apply btn border border-line-200 bg-white text-ink-700 hover:border-line-300 hover:bg-paper-50;
  }
  .btn-subtle {
    @apply btn text-ink-600 hover:bg-ink-100/70 hover:text-ink-900;
  }
  .btn-clay {
    @apply btn bg-clay-500 text-white hover:bg-clay-600 active:translate-y-px;
  }
  .btn-danger {
    @apply btn border border-rust-500/25 bg-rust-50 text-rust-500 hover:bg-rust-50/70;
  }
  .btn-sm {
    @apply px-2.5 py-1 text-xs rounded-md;
  }
  .btn-lg {
    @apply px-4 py-2.5 text-base rounded-xl;
  }

  /* —— 表单 —— */
  .input {
    @apply w-full rounded-lg border border-line-200 bg-white px-3 py-2 text-base text-ink-900
      placeholder:text-ink-400 transition
      focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20;
  }
  .input-flush {
    @apply w-full border-0 bg-transparent p-0 text-base text-ink-900 outline-none
      placeholder:text-ink-400;
  }
  .label {
    @apply mb-1.5 block text-xs font-medium tracking-wide text-ink-600;
  }

  /* —— 徽标 —— */
  .pill {
    @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-2xs font-medium;
  }
  .chip {
    @apply inline-flex items-center gap-1 rounded-md bg-paper-200 px-1.5 py-0.5 text-2xs font-medium text-ink-500;
  }

  /* —— 侧栏 —— */
  .nav-item {
    @apply flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-ink-600
      transition-colors hover:bg-ink-100/60 hover:text-ink-900;
  }
  .nav-item-active {
    @apply bg-primary-900 text-paper-50 shadow-sm hover:bg-primary-900 hover:text-paper-50;
  }

  /* —— 列表行 —— */
  .row {
    @apply flex items-start gap-3 border-b border-line-100 px-4 py-3 transition-colors last:border-0
      hover:bg-paper-50/80;
  }

  /* —— 骨架屏 —— */
  .skeleton {
    @apply relative overflow-hidden rounded-md bg-line-100;
  }
  .skeleton::after {
    @apply absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/70 to-transparent;
    content: "";
    animation: shimmer 1.6s infinite;
  }

  .link {
    @apply text-primary-600 underline decoration-primary-300/60 underline-offset-2 hover:text-primary-700;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .grid-lines {
    background-image: linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
  }
}

/* Markdown 渲染样式：不引 @tailwindcss/typography（它会把行距和字重改得不像我们的界面），
   这里只针对我们真正会渲染的标签写一遍，保持与组件库同一套色板与节奏。
   阅读区按 16px / 1.85 排：看的时候字号不该比编辑时（0.9rem）还小。 */
.prose-dadao {
  color: theme("colors.ink.800");
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
}
.prose-dadao > :first-child {
  margin-top: 0;
}
.prose-dadao > * + * {
  margin-top: 0.85em;
}
.prose-dadao p {
  margin: 0;
}

/* 抽屉里的短文本（评论、工单处理说明）不需要阅读区那么大的字号 */
.prose-dadao--sm {
  font-size: 0.875rem;
  line-height: 1.7;
}

/* 标题分层靠字重与上方留白，不靠颜色 */
.prose-dadao h1,
.prose-dadao h2,
.prose-dadao h3,
.prose-dadao h4,
.prose-dadao h5,
.prose-dadao h6 {
  font-family: theme("fontFamily.display");
  color: theme("colors.ink.900");
  line-height: 1.4;
  letter-spacing: 0;
  scroll-margin-top: 4rem;
}
.prose-dadao h1 {
  font-size: 1.55em;
  font-weight: 700;
  margin-top: 1.7em;
}
.prose-dadao h2 {
  font-size: 1.28em;
  font-weight: 600;
  margin-top: 1.6em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid theme("colors.line.100");
}
.prose-dadao h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 1.35em;
}
.prose-dadao h4,
.prose-dadao h5,
.prose-dadao h6 {
  font-size: 1em;
  font-weight: 600;
  margin-top: 1.2em;
  color: theme("colors.ink.700");
}

.prose-dadao strong,
.prose-dadao b {
  font-weight: 600;
  color: theme("colors.ink.900");
}
/* 中文里斜体不好认，强调改成"荧光笔"底纹 */
.prose-dadao em {
  font-style: normal;
  background: linear-gradient(transparent 62%, theme("colors.primary.100") 0);
  padding: 0 0.1em;
}

.prose-dadao a {
  color: theme("colors.primary.700");
  text-decoration: underline;
  text-decoration-color: theme("colors.primary.300");
  text-underline-offset: 0.22em;
}
.prose-dadao a:hover {
  color: theme("colors.primary.800");
  text-decoration-color: theme("colors.primary.500");
  background: theme("colors.primary.50");
  border-radius: 3px;
}

.prose-dadao ul,
.prose-dadao ol {
  padding-left: 1.4em;
}
.prose-dadao ul {
  list-style: disc;
}
.prose-dadao ol {
  list-style: decimal;
}
.prose-dadao li::marker {
  color: theme("colors.primary.400");
}
.prose-dadao li + li {
  margin-top: 0.3em;
}
.prose-dadao li > ul,
.prose-dadao li > ol {
  margin-top: 0.3em;
  padding-left: 1.2em;
}
.prose-dadao input[type="checkbox"] {
  margin-right: 0.45em;
  vertical-align: middle;
}

.prose-dadao blockquote {
  margin: 1.1em 0;
  padding: 0.75em 1em;
  border-left: 3px solid theme("colors.primary.300");
  border-radius: 0 10px 10px 0;
  background: theme("colors.paper.100");
  color: theme("colors.ink.700");
}
.prose-dadao blockquote > * + * {
  margin-top: 0.5em;
}
.prose-dadao blockquote p {
  margin: 0;
}

.prose-dadao code {
  font-family: theme("fontFamily.mono");
  font-size: 0.875em;
  background: theme("colors.paper.200");
  color: theme("colors.ink.900");
  border-radius: 5px;
  padding: 0.12em 0.4em;
}

.prose-dadao pre {
  background: theme("colors.ink.900");
  color: theme("colors.paper.50");
  border-radius: 12px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-size: 0.86em;
  line-height: 1.7;
}
.prose-dadao pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.prose-dadao hr {
  border: 0;
  border-top: 1px solid theme("colors.line.200");
  margin: 2em 0;
}

.prose-dadao img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid theme("colors.line.100");
  box-shadow: theme("boxShadow.card");
}

/* 表格：宽表横向滚动（不撑破抽屉），窄表铺满 */
.prose-dadao table {
  display: block;
  width: max-content;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid theme("colors.line.200");
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  font-size: 0.94em;
  margin: 1.1em 0;
}
.prose-dadao th,
.prose-dadao td {
  border-bottom: 1px solid theme("colors.line.100");
  padding: 0.5em 0.8em;
  text-align: left;
  white-space: nowrap;
}
.prose-dadao thead th {
  background: theme("colors.paper.100");
  border-bottom: 1px solid theme("colors.line.200");
  font-weight: 600;
  color: theme("colors.ink.700");
}
.prose-dadao tbody tr:last-child td {
  border-bottom: 0;
}
.prose-dadao tbody tr:hover td {
  background: theme("colors.paper.50");
}

.prose-compact {
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0;
}
.prose-compact > * + * {
  margin-top: 0.55em;
}
.prose-compact h1 {
  font-size: 1.2em;
  margin-top: 1em;
}
.prose-compact h2 {
  font-size: 1.08em;
  margin-top: 1em;
}
.prose-compact h3,
.prose-compact h4 {
  font-size: 1em;
  margin-top: 0.9em;
}
.prose-compact pre {
  font-size: 0.82em;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
}
.prose-compact blockquote {
  margin: 0.7em 0;
  padding: 0.55em 0.8em;
}

/* ---- Vditor 富文本：只做"贴合本产品"的覆写，不改它的行为 ---- */
.rich-text .vditor {
  border: 1px solid theme("colors.line.200");
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rich-text .vditor:focus-within {
  border-color: theme("colors.primary.400");
  box-shadow: 0 0 0 3px theme("colors.primary.100");
}
.rich-text .vditor-toolbar {
  background: theme("colors.paper.50");
  border-bottom: 1px solid theme("colors.line.100");
  padding: 2px 4px;
}
.rich-text .vditor-toolbar__item button {
  color: theme("colors.ink.500");
}
.rich-text .vditor-toolbar__item button:hover,
.rich-text .vditor-toolbar__item button.vditor-menu--current {
  color: theme("colors.primary.700");
  background: theme("colors.primary.50");
}
.rich-text .vditor-reset {
  color: theme("colors.ink.800");
  font-family: theme("fontFamily.sans");
  font-size: 0.9rem;
  line-height: 1.75;
  padding: 10px 14px;
}
.rich-text .vditor-ir pre.vditor-reset {
  background: #fff;
}
.rich-text .vditor-ir pre.vditor-reset:empty::before {
  color: theme("colors.ink.300");
}
.rich-text .vditor-reset img {
  max-width: 100%;
  border-radius: 8px;
}
.rich-text .vditor-panel,
.rich-text .vditor-hint {
  border-color: theme("colors.line.200");
  border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.28);
  font-size: 0.8rem;
}