/* ============================================================================ * iLoveJJ Tools —— 统一设计系统 (Unified Design System) * ---------------------------------------------------------------------------- * 作用：为集成站内所有工具页面提供统一的「浅色专业蓝」视觉与布局规范。 * 所有工具页面统一采用「app-shell（页面外壳）+ hero（页头）+ panel（内容面板）」 * 的三段式布局，保证 UI 与布局在所有页面上完全一致。 * * 使用方式：在各工具 index.html 的 中、于工具自身样式之后引入本文件： * * （放在自身样式之后，可覆盖工具原有的外壳/页头/面板/表单样式） * * 设计基准：以 dukpt-tools 的视觉风格为「黄金基准」抽象而成。 * ==========================================================================*/ /* ------------------------------------------------------------------ * 1. 设计令牌（Design Tokens） * 统一全站配色、圆角、阴影、字体。各工具原有 :root 变量若与此重名， * 因本文件后加载而在此被统一覆盖，从而保证全站一致。 * ----------------------------------------------------------------*/ :root { /* —— 配色（浅色专业蓝）—— */ --bg: #eef3fb; /* 页面主背景（浅蓝灰） */ --card: #ffffff; /* 卡片/面板背景 */ --card-strong: #ffffff; /* 强调卡片背景 */ --text: #111827; /* 主文字（深） */ --muted: #64748b; /* 次要文字 */ --line: #d9e2f0; /* 边框线 */ --line-strong: rgba(37, 99, 235, 0.28); /* 强调边框 */ --primary: #2563eb; /* 主色（专业蓝） */ --primary-dark: #1d4ed8; /* 主色深 */ --primary-soft: #e8f0ff; /* 主色浅底 */ --accent: #14b8a6; /* 强调色（青绿） */ --danger: #b42318; /* 危险/错误色 */ --ok: #12805c; /* 成功色 */ --warn: #b54708; /* 警告色 */ /* —— 圆角（与既有工具基准一致）—— */ --radius-lg: 28px; /* 大圆角：外壳/hero/大面板 */ --radius-md: 18px; /* 中圆角：面板/卡片 */ --radius-sm: 12px; /* 小圆角：按钮/输入框 */ /* —— 阴影 —— */ --shadow: 0 24px 70px rgba(15, 23, 42, 0.12); /* 强阴影 */ --shadow-soft: 0 12px 34px rgba(15, 23, 42, 0.08); /* 柔和阴影 */ /* —— 字体 —— */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* —— 布局 —— */ --shell-w: 1200px; /* 内容最大宽度（全站统一） */ } /* ------------------------------------------------------------------ * 2. 基础元素规范 * ----------------------------------------------------------------*/ * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; /* 统一背景：浅蓝底 + 顶部两处柔光，营造层次感 */ background: radial-gradient(1100px 460px at 12% -8%, rgba(37, 99, 235, 0.10), transparent 60%), radial-gradient(900px 420px at 92% 0%, rgba(20, 184, 166, 0.10), transparent 60%), var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 10px; color: #0f172a; /* 大标题：与 dukpt 基准一致的醒目字号 */ font-size: clamp(34px, 5vw, 56px); line-height: 1.0; letter-spacing: -0.05em; font-weight: 800; } h2 { margin-bottom: 8px; color: #0f172a; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; } h3 { margin-bottom: 6px; color: #0f172a; font-size: 17px; font-weight: 700; } p, small, legend, label { color: var(--muted); } a { color: var(--primary); } code, pre, .mono { font-family: var(--font-mono); } /* ------------------------------------------------------------------ * 3. 页面外壳 app-shell —— 统一内容宽度与内边距 * ----------------------------------------------------------------*/ .app-shell { width: min(var(--shell-w), calc(100vw - 32px)); margin: 0 auto; padding: 32px 0 48px; display: flex; flex-direction: column; gap: 22px; } /* ------------------------------------------------------------------ * 4. 页头 hero —— 统一的标题区（eyebrow + h1 + 描述 + 标签/操作） * ----------------------------------------------------------------*/ .hero { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-soft); padding: 30px 32px; } /* hero 右下角的装饰性光晕 */ .hero::after { position: absolute; right: -80px; bottom: -110px; width: 300px; height: 300px; border-radius: 50%; content: ""; background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(20, 184, 166, 0.14)); filter: blur(6px); pointer-events: none; } .hero-copy { position: relative; z-index: 1; max-width: 760px; } /* hero 右侧的操作区/信息卡（如主题切换、状态徽标） */ .hero-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 16px; } /* eyebrow：标题上方的小标签文字 */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .eyebrow::before { width: 9px; height: 9px; border-radius: 999px; content: ""; background: var(--accent); box-shadow: 0 0 0 6px rgba(20, 184, 166, 0.12); } .hero p { max-width: 640px; margin-bottom: 0; font-size: 15px; line-height: 1.7; } /* hero 下方的能力标签（药丸样式） */ .hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .hero-chips span, .status-pill { display: inline-flex; align-items: center; min-height: 32px; border: 1px solid rgba(37, 99, 235, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: #334155; font-size: 12.5px; font-weight: 700; padding: 6px 12px; } .status-pill { border-color: rgba(20, 184, 166, 0.3); background: rgba(240, 253, 250, 0.85); color: #0f766e; } /* ------------------------------------------------------------------ * 5. 内容面板 panel —— 统一卡片外观 * ----------------------------------------------------------------*/ .panel { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-soft); padding: 24px; } .panel-title h2, .panel-title h3 { margin: 0; } .panel-title p { margin: 4px 0 0; font-size: 13px; } /* ------------------------------------------------------------------ * 6. 按钮 —— 统一主/次/幽灵按钮样式 * ----------------------------------------------------------------*/ .btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } /* 主按钮 */ .btn.primary, .btn-primary { background: var(--primary); color: #fff; } .btn.primary:hover, .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28); } /* 次要/幽灵按钮 */ .btn.ghost, .btn-ghost, .ghost-button { background: #fff; color: var(--primary); border-color: var(--line); } .btn.ghost:hover, .btn-ghost:hover, .ghost-button:hover { background: var(--primary-soft); border-color: var(--line-strong); } /* ------------------------------------------------------------------ * 7. 表单元素 —— 统一输入框/文本域/下拉 * ----------------------------------------------------------------*/ .ui-input, .ui-field input, .ui-field textarea, .ui-field select { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--text); font-family: var(--font-mono); font-size: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ui-input:focus, .ui-field input:focus, .ui-field textarea:focus, .ui-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); } /* ------------------------------------------------------------------ * 8. 表格 —— 统一数据表外观 * ----------------------------------------------------------------*/ .ui-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ui-table th, .ui-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; } .ui-table th { background: var(--primary-soft); color: #1e3a8a; font-weight: 700; } .ui-table tr:hover td { background: rgba(37, 99, 235, 0.04); } /* ------------------------------------------------------------------ * 9. 响应式 —— 窄屏下 hero 纵向排列、外壳内边距收窄 * ----------------------------------------------------------------*/ @media (max-width: 760px) { .app-shell { width: min(100vw - 20px, var(--shell-w)); padding: 18px 0 32px; gap: 16px; } .hero { flex-direction: column; padding: 22px 20px; } .hero-actions { align-items: flex-start; } .panel { padding: 18px; } }