/* =========================================================================== * kanju 主题 · 设计令牌 * * 来源：`kanju41-mirror/design-tokens.json`（2026-10-09 从参照站实测提取，223 个变量） * 里本主题实际使用的一组。命名用 `--k-` 前缀，避免与 v11 既有主题的 `--dytt-*` 冲突。 * * 参照站原变量 → 本主题变量对照（只列改名，值相同）： * --dytt-theme-bg → --k-bg * --dytt-theme-bg-elevated → --k-surface * --dytt-theme-bg-deep → --k-bg-deep * --dytt-theme-bg-hover-rgb→ --k-hover-rgb * --dytt-primary → --k-primary * --dytt-primary-strong → --k-primary-strong * --dytt-primary-soft → --k-primary-soft * --dytt-primary-ice → --k-primary-ice * --radius → --k-radius * ========================================================================= */ :root { /* ── 底色三级 ── */ --k-bg: #111214; --k-surface: #25262b; --k-bg-deep: #08090a; --k-bg-elevated: #1a1b1e; --k-surface-1: #1a1b1e; --k-hover-rgb: 41 44 51; --k-composer-bg: rgb(37 38 43 / 72%); --k-tabbar-bg: rgb(18 42 40 / 78%); /* ── 主色（薄荷绿）── */ --k-primary: #16e09d; --k-primary-ink: #07140f; --k-primary-strong: #087a54; --k-primary-soft: #409890; --k-primary-ice: #07583d; --k-primary-rgb: 22 224 157; /* ── 文字三级 ── */ --k-text: #ffffff; --k-text-muted: rgba(255, 255, 255, 0.68); --k-text-subtle: rgba(255, 255, 255, 0.52); /* ── 边界与交互面 ── */ --k-border: rgba(var(--k-primary-rgb) / 18%); --k-border-soft: rgba(var(--k-primary-rgb) / 10.6%); --k-interactive-border: rgba(255, 255, 255, 0.1); --k-interactive-border-hover: rgba(255, 255, 255, 0.18); --k-panel-tint: rgba(255, 255, 255, 0.04); /* ── 骨架屏（参照 movie-skeleton-shimmer：微光扫过）── */ --k-skel-hl: rgb(255 255 255 / 14%); /* ── 表面层级（参照站 --dytt-interactive-background 等）── */ --k-card: rgb(41 44 51 / 60%); /* 卡片面，叠在 surface 上 */ --k-card-hover: rgb(41 44 51 / 80%); --k-card-inner: rgb(8 9 10 / 45%); /* 卡片内的内嵌块（空态区） */ --k-tint: rgb(255 255 255 / 4%); /* --dytt-panel-tint */ /* ── 语义色（值取自参照站 --movie-warning-*）── */ --k-danger: #fecaca; --k-warning: #fde68a; --k-warning-bg: rgb(251 191 36 / 12%); --k-warning-border: rgb(253 230 138 / 30%); --k-success: #a7f3d0; /* ── 文字尺寸（左栏实测）── */ --k-fs-xs: 0.6875rem; /* 11px 副标题/空态 */ --k-fs-sm: 0.75rem; /* 12px 查看更多/格标签 */ --k-fs-md: 0.8125rem; /* 13px 区块标题 */ --k-fs-base: 0.875rem; /* 14px 昵称/按钮 */ --k-fs-lg: 1.125rem; /* 18px 计数数字 */ /* ── 圆角与半径 ── */ --k-radius: 0.625rem; /* 10px，参照站 --radius */ /* ── 封面槽默认比例（方案 F：分类 TypeCover 可覆盖）── */ --k-cover-ratio: 2 / 3; /* ── 安全区（viewport-fit=cover；桌面 inset 为 0，等于原值）── */ --k-safe-top: max(env(safe-area-inset-top, 0px), 0px); --k-safe-right: max(env(safe-area-inset-right, 0px), 0px); --k-safe-bottom: max(env(safe-area-inset-bottom, 0px), 0px); --k-safe-left: max(env(safe-area-inset-left, 0px), 0px); /* ── 壳层尺寸 ── */ --k-sidebar-w: 17rem; /* 272px，参照站 --movie-sidebar-expanded */ --k-sidebar-w-user: 24.375rem; /* 390px，登录态宽栏 */ --k-sidebar-w-collapsed: 4.5rem; --k-page-edge: .75rem; /* 对齐源站 --movie-page-edge（main-BZ6il-sR.css） */ --k-sidebar-content-gap: 1rem; /* 对齐源站 --movie-sidebar-content-gap: 1rem */ --k-header-control: 2.25rem; --k-header-row-h: 3.5rem; /* ── 首页氛围渐变（参照站 --background-g2/g3 + --dytt-home-gradient 三层叠加）── */ /* 对照源站长图：斜向青绿分块 + 深底（对角线感更强） */ --k-home-gradient: linear-gradient(115deg, rgba(103, 232, 249, 0.08), transparent 34%), linear-gradient(245deg, rgba(64, 152, 144, 0.14), transparent 36%), linear-gradient(180deg, rgba(3, 10, 17, 0.55), rgba(3, 10, 17, 0.92)), linear-gradient(135deg, #0b1a22 0%, #123038 42%, #0a1218 78%, #071016 100%); /* ── 字体栈（参照站实测，无自托管字体）── */ --k-font: Inter, "PingFang SC", "Hiragino Sans GB", STHeiti, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } /* 移动端断点常量（供 CSS 里 max-width 引用保持一致）：1024px */ /* =========================================================================== * 浅色主题（html.light）—— 任务 1.1 * 值取自参照 design-tokens.json 浅色组（--movie-* 一族）逐项映射： * --movie-bg #f4f7f5 → --k-bg；--movie-bg-elevated #fff → --k-surface； * --movie-text #17211d → --k-text；muted/subtle 按 .68/.52 透明度的深色字； * --movie-surface rgba(23,33,29,.055) → --k-tint / card 系反转成深色叠浅底。 * 主色两套同值（薄荷绿在两种主题下同用 --dytt-primary）。 * ========================================================================= */ html.light { /* ── 底色三级（参照 --movie-bg / --movie-bg-elevated）── */ --k-bg: #f4f7f5; --k-surface: #ffffff; --k-bg-deep: #e9efec; --k-bg-elevated: #ffffff; --k-surface-1: #ffffff; --k-hover-rgb: 229 236 233; --k-composer-bg: rgba(255, 255, 255, 0.92); --k-tabbar-bg: color-mix(in srgb, #ffffff 82%, transparent); /* ── 主色字（薄荷绿底上深墨，浅/深同值）── */ --k-primary-ink: #07140f; /* ── 文字三级（参照 --movie-text #17211d）── */ --k-text: #17211d; --k-text-muted: rgba(23, 33, 29, 0.78); --k-text-subtle: rgba(23, 33, 29, 0.62); /* ── 边界与交互面（参照 --movie-border / --movie-border-soft）── */ --k-border: rgba(var(--k-primary-rgb) / 18%); --k-border-soft: rgba(23, 33, 29, 0.1); --k-interactive-border: rgba(23, 33, 29, 0.14); --k-interactive-border-hover: rgba(23, 33, 29, 0.28); --k-panel-tint: rgba(23, 33, 29, 0.03); /* ── 表面层级（浅色下"卡片"是白底叠浅灰底）── */ --k-card: #ffffff; --k-card-hover: #ffffff; --k-card-inner: rgba(23, 33, 29, 0.05); --k-tint: rgba(23, 33, 29, 0.045); /* ── 语义色（浅底上用深色可读变体，参照 --movie-danger 系同思路）── */ --k-danger: #b91c1c; --k-warning: #92400e; --k-warning-bg: rgb(251 191 36 / 16%); --k-warning-border: rgb(217 119 6 / 32%); --k-success: #067a54; /* ── 骨架屏高光（浅底上用深色微光，参照 movie-light 的 shimmer）── */ --k-skel-hl: rgb(23 33 29 / 16%); /* ── 首页氛围渐变：浅色下退场（近白渐变），参照浅色模式无此叠层 ── */ --k-home-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(244, 247, 245, 0.9)); } /* kanju page-edge：断点对齐源站 main-BZ6il-sR.css * :root/.sm .75rem · 768 1rem · 1024 1.5rem · 1280+ 2rem * --k-sidebar-content-gap 恒 1rem（源站无断点覆盖） */ @media (min-width: 640px) { :root { --k-page-edge: .75rem; } } @media (min-width: 768px) { :root { --k-page-edge: 1rem; } } @media (min-width: 1024px) { :root { --k-page-edge: 1.5rem; } } @media (min-width: 1280px) { :root { --k-page-edge: 2rem; } /* 32px；源站上限，无 1800 更大档 */ }