/* PickIt · 公共样式 author: ruan * 所有工具页共用：变量、头部导航、按钮、面板、表单字段、预览舞台、导出区、提示条、说明文档、页脚、响应式。 * 工具专属样式放在各自目录下的 css 里。 */ :root { --bg: #f4f1ea; --surface: #ffffff; --surface-2: #faf8f3; --ink: #1d1b17; --ink-2: #5c574d; --ink-3: #6e6860; /* 对 --surface #f4f1ea 的对比度 4.88:1；原来的 #78726a 只有 4.22，不到 WCAG AA */ --line: #e3ded3; --line-strong: #cfc8b9; --accent: #0f766e; --accent-ink: #0b5c56; --accent-soft: #d9efec; --danger: #c2410c; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(29, 27, 23, 0.04), 0 8px 24px -12px rgba(29, 27, 23, 0.18); --ink-inverse: #f4f1ea; --on-accent: #ffffff; --accent-2: #ffb800; --accent-2-soft: rgba(255, 184, 0, 0.18); --accent-2-ink: #7a4f00; --glow-1: #e6efe9; --glow-2: #f3e9dc; --header-bg: rgba(244, 241, 234, 0.85); --stage-bg: #eeeae2; --stage-check: #e2ddd2; --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; color-scheme: light; } /* 深色：由 /shared/theme-init.js 与 /shared/theme.js 把 data-theme 写在 上 */ :root[data-theme="dark"] { --bg: #1a1916; --surface: #23221e; --surface-2: #2a2924; --ink: #ece8df; --ink-2: #b9b3a7; --ink-3: #958e82; --line: #34322c; --line-strong: #4a473f; --accent: #14a394; --accent-ink: #5eead4; --accent-soft: rgba(45, 212, 191, 0.16); --danger: #f97316; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --ink-inverse: #1a1916; --on-accent: #0f1513; --accent-2: #ffb800; --accent-2-soft: rgba(255, 184, 0, 0.16); --accent-2-ink: #ffd166; --glow-1: #1d2926; --glow-2: #2a241c; --header-bg: rgba(26, 25, 22, 0.85); --stage-bg: #131211; --stage-check: #1d1c19; color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--ink); background: radial-gradient(1200px 500px at 10% -10%, var(--glow-1) 0%, transparent 60%), radial-gradient(900px 400px at 100% 0%, var(--glow-2) 0%, transparent 55%), var(--bg); min-height: 100vh; transition: background-color 0.2s, color 0.2s; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; } button, input, select, textarea { font: inherit; color: inherit; } button, [role="button"], a, label, select, input[type="color"] { touch-action: manipulation; } /* * 横向滑块单独用 pan-y：manipulation 允许浏览器平移，但纵向滑动落在滑块上时 * 浏览器与控件谁接管是含糊的，实测会被滑块吃掉，于是滚动列表时误改数值（透明度最典型）。 * pan-y 把纵向平移明确划给浏览器，滑块只拿横向手势——滚动永远赢，调节仍然顺手。 */ input[type="range"] { touch-action: pan-y; } /* 键盘焦点：所有可交互元素统一可见焦点环（鼠标点击不显示） */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* 跳到主内容（键盘用户） */ .skip-link { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--ink); color: var(--ink-inverse); font-weight: 600; transform: translateY(-200%); transition: transform 0.15s; } .skip-link:focus { transform: translateY(0); text-decoration: none; } /* 用户要求减少动效时，去掉所有过渡与平滑滚动 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ---------- 头部 ---------- */ .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 32px; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); } .brand:hover { text-decoration: none; } .brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; overflow: hidden; } .brand-mark svg { width: 40px; height: 40px; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-text strong { font-size: 17px; } .brand-text small { color: var(--ink-3); font-size: 12px; } /* 头部右侧：全部工具、语言、主题 */ /* 工具名标题栏只在窄屏出现；宽屏由 hero 承担标题 */ .site-title { display: none; } .site-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .site-tools-link { border-radius: 999px; font-weight: 500; color: var(--ink-2); } .lang-select { height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%239a948a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; appearance: none; -webkit-appearance: none; } .lang-select:hover { color: var(--ink); border-color: var(--line-strong); } .lang-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); } .theme-toggle svg { width: 18px; height: 18px; } /* ---------- 主区域 ---------- */ main { max-width: 1320px; margin: 0 auto; padding: 0 32px 64px; } .hero { padding: 56px 0 36px; max-width: 760px; } .hero.hero-compact { padding: 22px 0 18px; max-width: none; } .eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .hero h1 { font-size: clamp(30px, 4.5vw, 48px); font-weight: 700; } .hero.hero-compact h1 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 650; } .hero.hero-compact .eyebrow { margin-bottom: 6px; } .lead { margin: 20px 0 28px; font-size: 17px; color: var(--ink-2); max-width: 640px; } .hero.hero-compact .lead { margin: 14px 0 0; font-size: 15px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s, opacity 0.15s; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:not(:disabled):hover { background: var(--accent-ink); } .btn-outline { background: var(--surface); border-color: var(--line-strong); color: var(--ink); } .btn-outline:not(:disabled):hover { border-color: var(--accent); color: var(--accent-ink); } .btn-ghost { background: transparent; color: var(--ink-2); } .btn-ghost:not(:disabled):hover { background: var(--surface-2); color: var(--ink); } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-block { width: 100%; } /* ---------- 工作区 ---------- */ .workspace { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; scroll-margin-top: 80px; } .panel-column, .preview-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .preview-column { position: sticky; top: 80px; } /* ---------- 未捕获异常的兜底提示（shared/error-report.js）---------- */ .errbox { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 120; max-width: 560px; margin: 0 auto; padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--danger, #b3261e); background: var(--surface); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45); color: var(--ink); } .errbox > strong { display: block; margin-bottom: 6px; font-size: 15px; } .errbox-hint { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--ink-2); } .errbox summary { font-size: 13px; color: var(--ink-2); cursor: pointer; min-height: 32px; } .errbox-detail { margin: 8px 0 0; padding: 10px; max-height: 180px; overflow: auto; border-radius: 6px; background: var(--surface-2); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--ink-2); } .errbox-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .errbox-actions .btn { min-height: 44px; } /* ---------- 全屏查看器（shared/viewer.js）---------- 原尺寸查看的容身之处。放在舞台里就地放大既受舞台高度所限， 又会被 .stage canvas 的 max-width / max-height 按单轴截断把比例弄坏 （实测 3024×1741 被压成 344×1741）。这里的画布尺寸完全由脚本算， 缩放走 transform，所以不要给它加任何 max-width / max-height。 */ .viewer { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: rgba(20, 19, 16, 0.92); } .viewer[hidden] { display: none; } body.viewer-open { overflow: hidden; } .viewer-bar { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; color: #fff; } .viewer-caption { flex: 1; min-width: 0; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .viewer-bar .btn { min-height: 40px; } .viewer-bar .viewer-close { color: #fff; } .viewer-stage { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); /* 手势全部归查看器：双指缩放、单指平移 */ touch-action: none; } .viewer-stage canvas { display: block; background: #fff; box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.6); will-change: transform; } /* 视觉上隐藏但保留在 DOM 与无障碍树里，供屏幕阅读器与搜索引擎读取 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; } .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .panel-head h2 { font-size: 16px; font-weight: 700; } /* 可折叠面板：setupCollapsibles() 会把 .panel-head 之后的内容包进 .panel-body */ .panel.is-collapsible .panel-head { cursor: pointer; user-select: none; } .panel-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -6px 0 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); cursor: pointer; transition: background 0.15s, color 0.15s; } .panel-toggle:hover { background: var(--surface-2); color: var(--ink); } .panel-toggle svg { width: 18px; height: 18px; transition: transform 0.2s; } .panel.is-collapsed .panel-toggle svg { transform: rotate(-90deg); } .panel.is-collapsed .panel-body { display: none; } .panel.is-collapsed .panel-head { margin-bottom: 0; } .tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); font-size: 12px; font-weight: 500; vertical-align: middle; } .hint { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); } /* 上传区 */ .dropzone { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .dropzone:hover, .dropzone:focus-visible, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); outline: none; } .dropzone-icon { width: 28px; height: 28px; color: var(--accent); } .dropzone strong { color: var(--ink); font-size: 14px; } .dropzone span { font-size: 12px; color: var(--ink-3); } .dropzone.dropzone-compact { padding: 14px 12px; flex-direction: row; justify-content: center; gap: 10px; } .dropzone.dropzone-compact .dropzone-icon { width: 20px; height: 20px; } /* 分段控件 */ .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 14px; } .seg-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } .seg-btn svg { width: 16px; height: 16px; fill: currentColor; } .seg-btn:hover { color: var(--ink); } .seg-btn.is-active { background: var(--surface); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* 表单字段 */ .field { margin-bottom: 12px; } .field:last-child { margin-bottom: 0; } .field > label, .field > .field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; } .field > label output { color: var(--ink); font-family: var(--mono); } .field input[type="text"], .field input[type="number"], .field select, .field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field textarea { resize: vertical; min-height: 56px; } .field input[type="color"] { width: 100%; height: 40px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; } .field input[type="range"] { width: 100%; accent-color: var(--accent); margin: 4px 0 0; } .field-inline .color-group { display: flex; align-items: center; gap: 12px; } .field-inline .color-group input[type="color"] { width: 64px; } .check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; } .check input { accent-color: var(--accent); } .field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .field-grid .field { margin-bottom: 0; } .field-grid > .span-all { grid-column: 1 / -1; } .stepper { display: grid; grid-template-columns: 40px 1fr 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); } .stepper button { border: 0; background: var(--surface-2); font-size: 18px; cursor: pointer; color: var(--ink-2); } .stepper button:hover { background: var(--accent-soft); color: var(--accent-ink); } .stepper input { border: 0 !important; border-radius: 0 !important; text-align: center; box-shadow: none !important; -moz-appearance: textfield; } .stepper input::-webkit-inner-spin-button { display: none; } /* 选项芯片（单选） */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .chip:hover { border-color: var(--accent); color: var(--accent-ink); } .chip.is-active, .chip[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); } /* 预览 */ .panel-preview { display: flex; flex-direction: column; } .preview-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .meta { font-family: var(--mono); font-size: 12px; color: var(--ink-2); padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); } .stage { position: relative; display: grid; place-items: center; min-height: 420px; height: calc(100dvh - 360px); max-height: 760px; padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); overflow: auto; background-color: var(--stage-bg); background-image: linear-gradient(45deg, var(--stage-check) 25%, transparent 25%), linear-gradient(-45deg, var(--stage-check) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--stage-check) 75%), linear-gradient(-45deg, transparent 75%, var(--stage-check) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; } .stage canvas { display: block; max-width: 100%; max-height: 100%; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35); } .stage-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 24px; max-width: 360px; color: var(--ink-3); } .stage-empty strong { color: var(--ink-2); font-size: 16px; } .stage-empty span { font-size: 13px; } .stage-empty-art { width: 132px; height: 99px; margin-bottom: 6px; } .stage-empty-art .art-back { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; } .stage-empty-art .art-front { fill: var(--surface); stroke: var(--accent); stroke-width: 2; } .stage-empty-art .art-sun { fill: var(--accent-2); } .stage-empty-art .art-hill { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; } /* 图片列表：横向滚动的缩略图条（水印、压缩、尺寸、裁剪、转换共用，由 /shared/image-list.js 渲染） */ .strip { list-style: none; margin: 12px 0 0; padding: 0 0 6px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; } .strip:empty { display: none; } .strip-item { position: relative; flex: 0 0 auto; width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; background: var(--surface-2); cursor: pointer; transition: border-color 0.12s, transform 0.12s; padding: 0; } .strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .strip-item:hover { transform: translateY(-1px); } .strip-item.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .strip-item .idx { position: absolute; top: 4px; left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(29, 27, 23, 0.75); color: #fff; font-size: 11px; font-weight: 600; font-family: var(--mono); } .strip-item .del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 999px; background: rgba(29, 27, 23, 0.75); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.12s; } .strip-item:hover .del, .strip-item:focus-within .del { opacity: 1; } .strip-item .del:hover { background: var(--danger); } .strip-item .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; background: rgba(29, 27, 23, 0.7); color: #fff; font-size: 10px; font-family: var(--mono); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } @media (hover: none), (pointer: coarse) { .strip-item .del { opacity: 1; width: 32px; height: 32px; font-size: 18px; } .strip-item { width: 96px; height: 96px; } } body.is-touch .strip-item .del { opacity: 1; width: 32px; height: 32px; font-size: 18px; } /* 预览：按住对比原图时给舞台一个提示边 */ .stage.is-comparing { outline: 2px solid var(--accent-2); outline-offset: -2px; } /* 导出 */ .export-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; } .export-grid .field { margin-bottom: 0; } .export-grid .span-all, #qualityField { grid-column: 1 / -1; } .export-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .export-groups { display: grid; gap: 14px; margin-top: 14px; } .export-group { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); } .export-group .export-actions { margin-top: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .export-group-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); } .export-group-label .tag { margin-left: 0; } #exportMeta { min-height: 20px; margin-top: 10px; } /* 进度条 */ .progress { height: 6px; margin-top: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; } .progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s; } /* 全页拖入遮罩 */ .page-drop { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(15, 118, 110, 0.18); backdrop-filter: blur(3px); border: 4px dashed var(--accent); pointer-events: none; } .page-drop.is-visible { display: grid; } .page-drop span { padding: 14px 26px; border-radius: 999px; background: var(--surface); color: var(--accent-ink); font-weight: 700; font-size: 18px; box-shadow: var(--shadow); } /* 说明文档 */ .prose { max-width: 760px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); scroll-margin-top: 80px; } .prose h2 { font-size: 22px; margin-bottom: 16px; } .prose .prose-intro { margin: 0 0 16px; color: var(--ink-2); } .prose ol, .prose ul { padding-left: 20px; color: var(--ink-2); } .prose li { margin-bottom: 8px; } .prose li strong { color: var(--ink); } .prose dt { font-weight: 600; margin-top: 14px; } .prose dd { margin: 4px 0 0; color: var(--ink-2); } /* 页脚 */ .site-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1320px; margin: 0 auto; padding: 24px 32px 40px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; } .site-footer a { color: var(--ink-2); } /* 提示条 */ .toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--ink-inverse); font-size: 14px; box-shadow: var(--shadow); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .toast.is-error { background: var(--danger); } /* ---------- 触屏：小控件加大到 44px 级别 ---------- */ @media (pointer: coarse) { .btn-sm { min-height: 40px; padding: 8px 14px; } .chip { min-height: 40px; padding: 8px 16px; } .seg-btn { min-height: 44px; } .stepper { grid-template-columns: 48px 1fr 48px; } .stepper button { min-height: 44px; } /* 滑块本体补到 44px 触控高度，顺带把上下留白拉开，减少滚动时落在滑块上的概率 */ .field input[type="range"] { height: 44px; margin: 6px 0 2px; } .lang-select, .theme-toggle, .site-tools-link { height: 44px; } .theme-toggle { width: 44px; } } /* ---------- 响应式 ---------- */ @media (max-width: 1024px) { /* 窄屏：预览面板排到最前并吸顶，参数面板在下方滚动，边调边看；导出面板放最后 */ .workspace { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .panel-column, .preview-column { display: contents; } .panel-preview { order: -1; position: sticky; top: 60px; z-index: 5; padding: 12px; } /* 吸顶的预览面板只保留一行：状态文字 + 1:1 按钮，尺寸信息省略 */ .panel-preview .panel-head { margin-bottom: 8px; align-items: center; gap: 8px; } .panel-preview .panel-head > div:first-child { min-width: 0; flex: 1; } .panel-preview .panel-head h2 { display: none; } .panel-preview .panel-head .hint { margin: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-preview .preview-tools .meta { display: none; } .panel-preview .preview-tools { flex-wrap: nowrap; } .preview-column > .panel:not(.panel-preview) { order: 10; } /* 有图时高度由 shared/stage-fit.js 按图片比例写在行内，这里只兜底空状态与 1:1 查看 */ .stage { height: auto; min-height: 200px; max-height: 76dvh; padding: 10px; } .stage-empty { padding: 12px; } .stage-empty span { display: none; } .stage-empty-art { width: 96px; height: 72px; } /* 还没有图片时不吸顶、压矮舞台，让上传框尽早出现 */ .panel-preview:has(.stage-empty:not([hidden])) { position: static; } .stage:has(> .stage-empty:not([hidden])) { height: auto; min-height: 150px; } .panel-toggle { width: 40px; height: 40px; } /* ---------- 窄屏底部控制面（shared/mobile-dock.js 注入 .dock 并加 has-dock）---------- 画布在上、控制面吸底，一次只露一组参数。原来的「吸顶画布 + 长滚动」在竖图下 只剩约 260px 的滑动窗口却要装 1200px 以上的参数，画布越大窗口越窄，无解。 */ /* 工具区正好占一屏：画布按图片比例定高，剩下的全给控制面， 说明文案因此正好从折叠线下方开始，首屏不会露出半截。 */ .workspace.has-dock { display: flex; flex-direction: column; /* 固定一屏而不是 min-height：min-height 只是下限，控制面内容一多整体就会撑过一屏， 吸底的控制面反过来盖住画布。定高之后画布按图片比例定，控制面精确吃掉剩余。 */ height: calc(100dvh - 61px); scroll-margin-top: 60px; } .workspace.has-dock .panel-preview { flex: 0 0 auto; } .workspace.has-dock .panel-column, .workspace.has-dock .preview-column { display: contents; } .workspace.has-dock .panel-preview { position: static; margin-bottom: 8px; } .dock { /* 最小预留：标签栏 44 + 主操作 48 + 一组参数的底线 200 + 间距内边距。 这个值决定竖图下画布与操作区怎么分：调大画布变小、操作区变大。 */ --dock-reserve: 300px; position: sticky; bottom: 0; z-index: 6; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; gap: 8px; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bg); box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, 0.35); } .dock-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--surface-2, var(--surface)); border: 1px solid var(--line); } .dock-tab { flex: 1; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; border-radius: calc(var(--radius-sm) - 4px); background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background 150ms ease, color 150ms ease; } .dock-tabs:has(> :nth-child(5)) .dock-tab { font-size: 12px; } .dock-tab.is-active { background: var(--surface); color: var(--ink); font-weight: 600; } .dock-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } /* 只显示当前标签对应的面板，内容超高时面板自己滚动 */ .dock-body { flex: 1 1 auto; min-height: 180px; overflow-y: auto; overscroll-behavior: contain; } .dock-body .panel.is-docked { display: none; margin: 0; } .dock-body .panel.is-docked.is-dock-active { display: block; } .dock-body .panel.is-docked[hidden] { display: none; } /* 进了 dock 就由标签栏承担标题与切换，面板自己的头部与收起按钮多余 */ .dock-body .panel.is-docked > .panel-head { display: none; } /* 头部被藏了，展开按钮也就没了：面板一律展开，否则默认收起的那些永远打不开 */ .dock-body .panel.is-docked.is-collapsed > .panel-body { display: block; } /* 主操作常驻最底部，任何标签页下都能直接点 */ .dock-actions:empty { display: none; } .dock-actions .btn { width: 100%; min-height: 48px; font-size: 16px; } /* ---------- 窄屏外壳：把「网页里嵌了个工具」改成「工具就是这一屏」 ---------- hero 收成一行工具名当作页面标题；营销标题仍留在 DOM 里，只是不占视觉空间。 */ /* app 式标题栏：品牌图标 + 工具名 + 右侧工具；工具名一直吸在顶部，hero 只保留给 SEO */ .site-title { display: block; flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.has-dock .hero-compact { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); } /* 去卡片化：桌面的圆角卡片加投影在手机上就是「PC 味」的主要来源， 改成通栏背景加分隔线。顺带把左右留白从 main 移到面板内部，画布因此变宽。 */ /* body.has-dock 前缀是为了压过后面 640 档里的 main padding，否则通栏不生效 */ body.has-dock main { padding-left: 0; padding-right: 0; } body.has-dock .hero, body.has-dock .prose { padding-left: 16px; padding-right: 16px; } body.has-dock .panel, body.has-dock .panel-preview { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; padding: 12px; } body.has-dock .dock { padding-left: 0; padding-right: 0; } body.has-dock .dock-tabs { margin: 0 8px; } body.has-dock .dock-actions { padding: 0 12px; } /* 触控目标补到 44px；缩略图删除键原本 22px 且只在 hover 时出现，手机上根本点不到 */ .strip-item .del { opacity: 1; width: 28px; height: 28px; } .btn-sm { min-height: 44px; } /* 之前这里写的是不存在的 .theme-btn，规则一直空转，实测才发现。 头部三个控件与品牌链接都要够 44px，页脚的文字链接靠内边距扩大命中区。 */ .lang-select, .theme-toggle, .site-tools-link, .brand { min-height: 44px; } /* 窄屏下品牌只剩图标、页脚链接字数少，高度够了宽度还不够，两个方向都要卡 */ .theme-toggle, .brand { min-width: 44px; } /* 正文里的行内链接同样要够 44px 命中区。用 inline-block 加内边距再用负外边距 抵消，行高不变，视觉上看不出差别。 */ .site-footer a, .prose li a, .prose p a { display: inline-block; min-width: 44px; min-height: 44px; padding: 12px 6px; margin: -12px 0; text-align: center; } /* 全面屏底部手势区让位 */ .site-footer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 640px) { .site-header { padding: 8px 12px; gap: 8px; } .hero h1 { font-size: 28px; } .stage { min-height: 220px; } main { padding: 0 16px 48px; } .hero { padding: 40px 0 28px; } .export-grid { grid-template-columns: 1fr 1fr; } .export-grid .field:first-child { grid-column: 1 / -1; } .export-actions { grid-template-columns: 1fr; } .site-footer { padding: 20px 16px 32px; } /* 很窄的屏幕：头部只留品牌图标，给语言 / 主题 / 菜单按钮腾位置 */ .brand-text { display: none; } .site-tools { gap: 6px; } .lang-select { padding-left: 8px; padding-right: 24px; font-size: 12px; } /* iOS 在输入框字号小于 16px 时会自动放大页面 */ body { font-size: 16px; } .field input[type="text"], .field input[type="number"], .field select, .field textarea, .template-save input { font-size: 16px; } }