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-700 text-white shadow-sm hover:bg-primary-800 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-500;
  }

  /* —— 徽标 —— */
  .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(22, 28, 26, 0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(22, 28, 26, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
  }
}