/* ============================================================ theme.css —— 集中式设计令牌（全仓库唯一变量来源）切换机制：约定：组件样式（hub.css / 各工具 style.css）只消费变量，不再自定义 :root 颜色；主题质感增强见 theme-maximal.css ============================================================ */ :root, [data-theme="clean"] { /* 表面 */ --bg: #f5f6f8; --panel: #ffffff; --panel-2: #fbfcfd; --line: #e6e8eb; --line-strong: #d5d9de; /* 文字 */ --text: #1f2329; --text-sub: #646a73; --text-muted: #8f959e; /* 强调色（单强调色原则） */ --primary: #2563eb; --primary-dark: #1d4ed8; --primary-soft: #eaf1ff; --danger: #dc2626; /* 多巴胺主题的五色系统在 clean 下不启用，但保留定义供组件引用 */ --a1: #2563eb; /* magenta 位 */ --a2: #0f6e56; /* cyan 位 */ --a3: #854f0b; /* yellow 位 */ --a4: #993c1d; /* orange 位 */ --a5: #534ab7; /* purple 位 */ /* 分类磁贴配色（首页分类网格；1~4 对应注册表里分类的 color） */ --cat-1: #ec4899; /* 图片：粉 */ --cat-2: #3b82f6; /* 文字：蓝 */ --cat-3: #10b981; /* AI：绿 */ --cat-4: #f59e0b; /* 开发：琥珀 */ --cat-1-bg: #fde8f3; --cat-2-bg: #e7f0ff; --cat-3-bg: #e2f8f0; --cat-4-bg: #fdf1dd; /* 形状与质感 */ --radius: 12px; --radius-card: 12px; --border-w: 1px; --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --shadow-hover: 0 8px 24px rgba(16, 24, 40, .10); --shadow-stack: none; /* 字体 */ --font-body: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif; --font-head: var(--font-body); --font-display: var(--font-body); --font-mono: "Cascadia Code", Consolas, "Courier New", monospace; /* 装饰 */ --show-illo: 1; /* 是否显示卡通插画 */ --hero-logo-display: flex; --hero-illo-display: none; --title-shadow: none; --deco-rotate: 0deg; --card-hover-rotate: 0deg; } /* ============================================================ 多巴胺 / 极致主义主题深紫黑底 + 五色系统 + 粗彩边 + 堆叠硬阴影 ============================================================ */ [data-theme="dopamine"] { /* 表面 */ --bg: #0d0d1a; --panel: #2d1b4e; --panel-2: #241540; --line: rgba(255, 58, 242, .38); --line-strong: #ff3af2; /* 文字：正文白 on 深底 = 19.5:1 (AAA) */ --text: #ffffff; --text-sub: rgba(255, 255, 255, .82); --text-muted: rgba(255, 255, 255, .60); /* 五色系统 */ --a1: #ff3af2; /* magenta */ --a2: #00f5d4; /* cyan */ --a3: #ffe600; /* yellow */ --a4: #ff6b35; /* orange */ --a5: #7b2fff; /* purple */ --primary: var(--a1); --primary-dark: var(--a4); --primary-soft: rgba(255, 58, 242, .16); --danger: #ff5a5a; /* 分类磁贴配色（多巴胺：直接用五色系统的高饱和色） */ --cat-1: var(--a1); --cat-2: var(--a2); --cat-3: var(--a3); --cat-4: var(--a4); --cat-1-bg: rgba(255, 58, 242, .18); --cat-2-bg: rgba(0, 245, 212, .16); --cat-3-bg: rgba(255, 230, 0, .16); --cat-4-bg: rgba(255, 107, 53, .18); /* 形状与质感 */ --radius: 16px; --radius-card: 24px; --border-w: 4px; --shadow: 0 0 20px rgba(255, 58, 242, .25); --shadow-hover: 8px 8px 0 var(--a3), 16px 16px 0 var(--a1), 0 0 40px rgba(255, 58, 242, .35); --shadow-stack: 6px 6px 0 var(--a3), 12px 12px 0 var(--a1); /* 字体 */ --font-head: "Outfit", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --font-display: "Bangers", "Outfit", "PingFang SC", sans-serif; --font-body: "DM Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; /* 装饰 */ --show-illo: 1; --hero-logo-display: none; --hero-illo-display: block; --title-shadow: 2px 2px 0 var(--a5), 4px 4px 0 var(--a1); --deco-rotate: -1.5deg; --card-hover-rotate: 1.2deg; } /* 平滑的主题过渡 */ body, .panel, .card, .topbar, .input, .btn, .chip, .search { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; } /* 减少动态偏好：关闭所有持续动画（theme-maximal 中定义的动画一并失效） */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; } } /* ============================================================ 触控与响应式基线（全站共用）目标：任何屏幕下点击目标够大、点击无延迟、不横向溢出 ============================================================ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 去掉移动端点击高亮闪烁（反馈交给 :active），并关闭双击缩放的 300ms 延迟 */ button, a, input, select, textarea, label, [role="tab"], .thumb { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* 媒体元素不撑破容器 */ img, svg, canvas { max-width: 100%; } .page, .layout, .panel, .grid { min-width: 0; } /* 键盘/读屏可见的焦点环（不干扰鼠标点击） */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* 触控目标尺寸：主操作 ≥44px，次要操作 ≥32px */ .btn { min-height: 44px; } .chip { min-height: 36px; } .seg { min-height: 40px; } .btn-small { min-height: 36px; } .btn-mini { min-height: 32px; } .theme-toggle { min-height: 40px; } .back-home { min-width: 36px; min-height: 36px; } /* ---------------- 窄屏 / 触控设备增强 ---------------- */ @media (max-width: 900px) { /* iOS 聚焦输入框时字号 <16px 会触发整页自动缩放，统一提到 16px */ input, select, textarea { font-size: 16px; } .btn, .chip, .view-tab { min-height: 48px; } .btn-small, .btn-mini { min-height: 44px; } .back-home { width: 44px; height: 44px; line-height: 42px; font-size: 18px; } .theme-toggle { min-height: 44px; padding: 8px 14px; } /* 滑块在触屏上默认太小，放大轨道与滑块 */ input[type="range"] { height: 40px; } input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); } input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--primary); } input[type="color"] { min-height: 44px; } /* 触摸反馈：按下即响应 */ .btn:active, .chip:active, .view-tab:active, .thumb:active { opacity: .75; } } /* 横屏矮屏（如手机横放）：收紧纵向留白 */ @media (max-height: 480px) and (orientation: landscape) { .page { padding: 16px 16px 32px; } .hero { margin-bottom: 16px; } }