app/index.css

Rama main · réplica de lectura del repositorio original.

/* Copyright (c) 2026 Doforu
 * Copyright (c) 2026 Cloudflare, Inc.
 * Licensed under the Apache 2.0 license found in the LICENSE-APACHE file or at:
 *     https://opensource.org/licenses/Apache-2.0
 * Modifications Copyright (c) 2026 Doforu, distributed under the AGPL-3.0-only (see LICENSE).
 */
@source "../node_modules/@cloudflare/kumo/dist/**/*.{js,jsx,ts,tsx}";
@import "@cloudflare/kumo/styles/tailwind";
@import "tailwindcss";
@import "./themes/index.css";

/* Kumo ships no dedicated "starred / favourite" token, so the star toggle used to
 * borrow --text-color-kumo-warning. That token is tuned for warning TEXT and
 * reads as dark amber on light backgrounds (yellow-800 -> rgb(137,75,0)), which
 * makes a starred message look brown rather than yellow. Declare a dedicated
 * token here so the star is unmistakably yellow in both modes, while the warning
 * semantics (Needs-reply icon, draft border) stay untouched.
 *
 * Declared in @theme so Tailwind generates the matching `text-kumo-starred`
 * utility; the runtime value is per-mode via light-dark(). */
@theme {
  --text-color-kumo-starred: light-dark(oklch(0.78 0.17 85), oklch(0.85 0.19 92));
}

body {
  margin: 0;
}

/* 品牌 logo 的深色变体。
 *
 * 定案的标记是「纯黑磁贴 + 白色 M」：浅色底上 19.4:1，很深色主题下只剩 1.04:1 ——
 * 磁贴 #0D0D0F 与 kumo-recessed 的深色档（porcelain 约 #131313、midnight 约 #14141C）
 * 几乎同色，磁贴边界消失，只剩白色 M 悬空。换白磁贴变体后实测 18.6:1。
 *
 * 这里用两个 <img> 按 data-mode 显示/隐藏，而不是 CSS 换图：
 * 在 <img> 上用 `content: url()` 只有 Chrome / Safari 认，Firefox 不支持。
 * 用 data-mode 而不是 prefers-color-scheme：主题由 <html data-mode> 决定，
 * 与操作系统的深浅色无关（用户可以在浅色系统下把应用切成 dark）。
 */
.brand-logo-dark {
  display: none;
}

[data-mode="dark"] .brand-logo-light {
  display: none;
}

[data-mode="dark"] .brand-logo-dark {
  display: revert;
}

/* Allow toast text to be selectable (kumo Toast applies select-none on toast items) */
.fixed.right-4.bottom-4 [class*="select-none"] {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* TipTap list styles */
.ProseMirror ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.ProseMirror ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.ProseMirror li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}