/* ============================================================ 澄图 ChengTu · 工具页（合同 CT-REDESIGN-2026-001 · PHASE 3） 加载顺序：tokens → styles → components → landing → tools 本文件负责：工具页统一骨架 + 图片压缩页视觉 原则：只改表现层，DOM id 与业务逻辑一律保留 ============================================================ */ /* ------------------------------------------------------------ 1. 工具页骨架（toolview / 顶栏 / 内页栅格） ------------------------------------------------------------ */ .toolview { --ct-tool-col: 760px; background: var(--ct-bg); } .toolview .tv-top { height: 64px; padding: 8px 0; gap: var(--ct-space-3); padding-inline: max(var(--ct-page-pad), calc((100% - var(--ct-tool-col)) / 2)); background: rgba(250, 250, 248, .88); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--ct-border); } .toolview .tv-back { width: 44px; height: 44px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ct-surface); border: 1px solid var(--ct-border); color: var(--ct-ink); box-shadow: var(--ct-shadow-soft); transition: transform var(--ct-dur-fast) var(--ct-ease), border-color var(--ct-dur) var(--ct-ease); } .toolview .tv-back:hover { border-color: var(--ct-border-strong); } .toolview .tv-back:active { transform: scale(.94); } .toolview .tv-back svg { width: 20px; height: 20px; } /* 标题块允许收缩，副标题不换行（窄屏优先压紧隐私胶囊，见下方断点） */ .toolview .tv-top-title { flex: 1 1 auto; min-width: 0; } .toolview .tv-top-title h2 { font-size: 17px; font-weight: 750; letter-spacing: -.01em; color: var(--ct-heading); line-height: 1.25; } .toolview .tv-top-title p { margin: 0; font-size: 12px; font-weight: 500; color: var(--ct-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toolview .tv-top-tag { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 14px; border-radius: var(--ct-radius-pill); background: var(--ct-accent-soft); color: var(--ct-accent); font-size: 12.5px; font-weight: 650; white-space: nowrap; } .toolview .tv-top-tag svg { width: 14px; height: 14px; } /* 内页栅格：单列阅读流，桌面居中不无限拉宽 */ .ct-tool { width: 100%; max-width: var(--ct-tool-col, 760px); margin: 0 auto; padding: var(--ct-space-6) var(--ct-page-pad) var(--ct-space-16); display: flex; flex-direction: column; gap: var(--ct-space-5); } /* 页首：眉标 + 标题 + 副标题 + 三条事实 */ .ct-tool-intro { display: flex; flex-direction: column; gap: 7px; } .ct-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ct-text-tertiary); } .ct-tool-intro .ct-page-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } /* 工具页英文装饰：花体（Italianno）+ 品牌蓝，与设计稿一致，不用斜体伪装 */ .ct-tool-intro .ct-deco-en { font-family: var(--ct-font-script); font-size: 1.62em; line-height: .78; letter-spacing: .012em; color: var(--ct-accent); opacity: 1; transform: rotate(-2.6deg) translateY(-.04em); transform-origin: left bottom; } .ct-tool-sub { font-size: 15px; color: var(--ct-text-secondary); } .ct-tool-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 6px 0 0; padding: 0; list-style: none; } .ct-tool-facts li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ct-text-secondary); } .ct-tool-facts svg { width: 15px; height: 15px; flex: none; } /* 顶栏标题：页面自带大标题时先让位，滚动后再淡入（避免同一标题首屏出现两次） */ .toolview.has-intro-title .tv-top-title { opacity: 0; transform: translateY(5px); transition: opacity var(--ct-dur) var(--ct-ease), transform var(--ct-dur) var(--ct-ease); } .toolview.has-intro-title.is-stuck .tv-top-title { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .toolview.has-intro-title .tv-top-title { transition: opacity var(--ct-dur) linear; transform: none; } } /* 覆盖 styles.css 的旧功能色 */ .c-green { color: var(--ct-success); } .c-blue { color: var(--ct-accent); } /* 面板小标题（配置 / 结果区通用） */ .ph-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 750; color: var(--ct-heading); } .ph-title svg { width: 17px; height: 17px; color: var(--ct-accent); } .ph-hint { font-size: 12.5px; color: var(--ct-text-tertiary); } /* 面板头：标题保持单行不折字，说明文字可让位换行 */ .toolview .tv-panel .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .toolview .tv-panel .ph-title { flex: none; white-space: nowrap; } .toolview .tv-panel .ph-hint { flex: 1 1 auto; min-width: 0; text-align: right; } /* 窄屏：标题副文案与隐私标签二选一保全—— 收起标签尾部说明（保留盾牌图标 + 「本地处理」，字号不缩水） */ @media (max-width: 430px) { .toolview .tv-top-tag .tt-extra { display: none; } .toolview .tv-panel .ph-hint { text-align: left; } } @media (max-width: 340px) { .toolview .tv-top-tag { display: none; } } /* ------------------------------------------------------------ 2. 图片压缩 · 上传区 ------------------------------------------------------------ */ #cTool .dropzone-card { padding: 0; margin: 0; } #cTool .add-btn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--ct-space-10) var(--ct-space-6); text-align: center; cursor: pointer; border: 1.5px dashed var(--ct-border-strong); border-radius: var(--ct-radius-lg); background: var(--ct-surface); transition: border-color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease); } #cTool .add-btn:hover, #cTool .dropzone-card.drag .add-btn { border-color: var(--ct-accent); background: var(--ct-accent-soft); } #cTool .dz-plus { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ct-accent-soft); color: var(--ct-accent); margin-bottom: 4px; } #cTool .add-btn:hover .dz-plus { background: var(--ct-surface); } #cTool .dz-plus svg { width: 25px; height: 25px; } #cTool .dz-main { font-size: 16px; font-weight: 700; color: var(--ct-heading); } #cTool .dz-sub { font-size: 13px; color: var(--ct-text-secondary); } #cTool .dz-safe { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ct-success); } /* 已选图后：上传区让位给缩略图与设置，压成一条紧凑入口（:has 不支持时保持原样，不影响功能） */ #cTool .ct-tool:has(#grid:not(.hidden)) #dropzone .add-btn { padding: 14px 16px; gap: 4px; } #cTool .ct-tool:has(#grid:not(.hidden)) #dropzone .dz-plus { width: 38px; height: 38px; margin-bottom: 0; } #cTool .ct-tool:has(#grid:not(.hidden)) #dropzone .dz-plus svg { width: 20px; height: 20px; } #cTool .ct-tool:has(#grid:not(.hidden)) #dropzone .dz-sub, #cTool .ct-tool:has(#grid:not(.hidden)) #dropzone .dz-hint { display: none; } #cTool .dz-safe svg { width: 14px; height: 14px; } #cTool .dz-hint { margin-top: 8px; max-width: 440px; font-size: 12px; color: var(--ct-text-tertiary); } #cTool .dz-hint b { color: var(--ct-text-secondary); } /* ------------------------------------------------------------ 3. 已选图片：计数条 + 网格 ------------------------------------------------------------ */ #cTool .list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0; padding: 0; background: none; border: 0; font-size: 13.5px; color: var(--ct-text-secondary); } #cTool .list-head b { color: var(--ct-heading); font-variant-numeric: tabular-nums; } #cTool .lh-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; } #cTool .list-head .tool { min-height: 34px; padding: 0 13px; border-radius: var(--ct-radius-pill); border: 1px solid var(--ct-border-strong); background: var(--ct-surface); color: var(--ct-text); font-size: 13px; font-weight: 600; font-family: inherit; } #cTool .list-head .tool:hover { border-color: var(--ct-accent); color: var(--ct-accent); } #cTool .list-head .tool:disabled { opacity: .45; cursor: not-allowed; } #cTool .list-head .tool.danger { color: var(--ct-danger); border-color: transparent; background: var(--ct-danger-soft); } #cTool .list-head .tool.danger:hover { color: #fff; background: var(--ct-danger); } #cTool .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (min-width: 600px) { #cTool .grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } } #cTool .thumb { position: relative; aspect-ratio: 1 / 1; border-radius: var(--ct-radius-md); overflow: hidden; background: var(--ct-surface-muted); border: 2px solid transparent; box-shadow: var(--ct-shadow-soft); transition: border-color var(--ct-dur) var(--ct-ease); } #cTool .thumb:has(input:checked) { border-color: var(--ct-accent); } #cTool .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } #cTool .thumb .idx, #cTool .thumb .sz { position: absolute; bottom: 8px; top: auto; z-index: 1; padding: 2px 7px; border-radius: var(--ct-radius-pill); background: rgba(23, 24, 28, .62); color: #fff; font-size: 10.5px; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #cTool .thumb .idx { left: 8px; } #cTool .thumb .sz { right: 8px; } #cTool .thumb input[type=checkbox] { -webkit-appearance: none; appearance: none; position: absolute; top: 8px; right: 8px; z-index: 2; width: 22px; height: 22px; margin: 0; padding: 0; cursor: pointer; border: 1.5px solid rgba(255, 255, 255, .92); border-radius: 50%; background: rgba(23, 24, 28, .34) center / 14px no-repeat; box-shadow: 0 1px 5px rgba(0, 0, 0, .22); transition: background-color var(--ct-dur) var(--ct-ease), border-color var(--ct-dur) var(--ct-ease); } #cTool .thumb input[type=checkbox]:checked { background-color: var(--ct-accent); border-color: var(--ct-accent); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.4' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #cTool .thumb input[type=checkbox]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ------------------------------------------------------------ 4. 压缩设置面板 ------------------------------------------------------------ */ #cTool .config { display: flex; flex-direction: column; gap: var(--ct-space-4); padding: var(--ct-space-5); background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-soft); } #cTool .config > .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; } /* 模式选择：两张可点击卡片（原生 button，键盘可达） */ #cTool .mode-tabs { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; } @media (min-width: 560px) { #cTool .mode-tabs { grid-template-columns: 1fr 1fr; } } #cTool .mode-tabs .tab { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: var(--ct-radius-md); border: 1px solid var(--ct-border); background: var(--ct-surface); transition: border-color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease), box-shadow var(--ct-dur) var(--ct-ease); } #cTool .mode-tabs .tab:hover { border-color: var(--ct-border-strong); } #cTool .mode-tabs .tab.active { border-color: var(--ct-accent); background: var(--ct-accent-soft); box-shadow: 0 0 0 3px rgba(79, 127, 232, .10); } #cTool .mt-ico { width: 38px; height: 38px; flex: none; border-radius: var(--ct-radius-sm); display: grid; place-items: center; background: var(--ct-surface-soft); color: var(--ct-text-secondary); } #cTool .tab.active .mt-ico { background: var(--ct-surface); color: var(--ct-accent); } #cTool .mt-ico svg { width: 19px; height: 19px; } #cTool .mt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #cTool .mt-txt b { font-size: 14.5px; font-weight: 700; color: var(--ct-heading); } #cTool .mt-txt i { font-size: 12px; font-style: normal; color: var(--ct-text-tertiary); } #cTool .mt-ck { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ct-border-strong); color: transparent; } #cTool .tab.active .mt-ck { background: var(--ct-accent); border-color: var(--ct-accent); color: #fff; } #cTool .mt-ck svg { width: 13px; height: 13px; } /* 质量滑块 */ #cTool .field { margin: 0; } #cTool .label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } #cTool .label-row label { font-size: 13.5px; font-weight: 650; color: var(--ct-heading); } #cTool .label-row output { font-size: 15px; font-weight: 750; color: var(--ct-accent); font-variant-numeric: tabular-nums; } #cTool .slider-scale { display: flex; justify-content: space-between; margin-top: -2px; font-size: 11.5px; color: var(--ct-text-tertiary); } #cTool .slider-scale span:nth-child(2) { color: var(--ct-accent); font-weight: 650; } /* 快捷质量档位（压缩 / 转换 通用） */ .toolview .quick-q { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; } .toolview .quick-q__item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--ct-radius-sm); border: 1px solid var(--ct-border); background: var(--ct-surface); font-family: inherit; cursor: pointer; transition: border-color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease); } .toolview .quick-q__item b { font-size: 12.5px; font-weight: 650; color: var(--ct-heading); } .toolview .quick-q__item i { font-size: 11.5px; font-style: normal; color: var(--ct-text-tertiary); font-variant-numeric: tabular-nums; } .toolview .quick-q__item:hover { border-color: var(--ct-border-strong); } .toolview .quick-q__item.is-active { border-color: var(--ct-accent); background: var(--ct-accent-soft); } .toolview .quick-q__item.is-active b, .toolview .quick-q__item.is-active i { color: var(--ct-accent); } /* 指定大小 */ #cTool .kb-cell span { font-size: 12px; color: var(--ct-text-secondary); } #cTool .kb-cell input { padding: 11px 13px; border: 1px solid var(--ct-border-strong); border-radius: var(--ct-radius-sm); background: var(--ct-surface); font-size: 15px; color: var(--ct-ink); outline: none; transition: border-color var(--ct-dur) var(--ct-ease), box-shadow var(--ct-dur) var(--ct-ease); } #cTool .kb-cell input:focus { border-color: var(--ct-accent); box-shadow: 0 0 0 3px rgba(79, 127, 232, .14); } #cTool .hint { display: block; margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--ct-text-tertiary); } #cTool .hint b { color: var(--ct-text-secondary); font-weight: 650; } /* 常用预设 */ #cTool .tpl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 12px 14px; border: 0; border-radius: var(--ct-radius-md); background: var(--ct-surface-soft); } #cTool .tpl-bar-title { font-size: 12.5px; font-weight: 650; color: var(--ct-text-secondary); } #cTool .tpl-save-mini { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: var(--ct-radius-pill); border: 1px solid transparent; background: var(--ct-surface); color: var(--ct-text-secondary); font-size: 12px; font-weight: 650; } #cTool .tpl-save-mini:hover { color: var(--ct-accent); border-color: var(--ct-accent); } #cTool .tpl-save-mini svg { width: 12px; height: 12px; } #cTool .tpl-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; width: 100%; } #cTool .tpl-list:empty::after { content: '保存当前配置（质量 / 指定大小），下次一键调用'; font-size: 11.5px; color: var(--ct-text-tertiary); } #cTool .tpl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: var(--ct-radius-pill); border: 1px solid var(--ct-border-strong); background: var(--ct-surface); font-size: 12.5px; font-weight: 600; color: var(--ct-text); } #cTool .tpl-chip:hover { border-color: var(--ct-accent); color: var(--ct-accent); } #cTool .tpl-chip.del { width: 18px; height: 18px; padding: 0; margin-left: 0; flex: none; border: 0; border-radius: 50%; background: none; color: var(--ct-text-tertiary); display: inline-flex; align-items: center; justify-content: center; } #cTool .tpl-chip.del:hover { background: var(--ct-danger-soft); color: var(--ct-danger); } #cTool .tpl-chip.del svg { width: 12px; height: 12px; } #cTool .btn-main { margin: 0; height: auto; } /* ------------------------------------------------------------ 5. 结果区 ------------------------------------------------------------ */ #cTool .result { display: flex; flex-direction: column; gap: var(--ct-space-4); padding: 0; background: transparent; border: 0; box-shadow: none; } #cTool .progress { margin: 0; padding: 14px 16px; border-radius: var(--ct-radius-md); background: var(--ct-surface); border: 1px solid var(--ct-border); } #cTool .progress .bar { height: 8px; border-radius: 999px; background: var(--ct-surface-muted); overflow: hidden; } #cTool .progress .bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ct-accent); transition: width var(--ct-dur-slow) var(--ct-ease); } #cTool .progress p { margin-top: 8px; font-size: 13px; color: var(--ct-text-secondary); } #cTool .result-trust { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 14px; border: 0; border-radius: var(--ct-radius-md); background: var(--ct-success-soft); color: #1E7A57; font-size: 12.5px; font-weight: 600; } #cTool .result-trust svg { width: 16px; height: 16px; flex: none; color: var(--ct-success); } /* 节省摘要卡 */ #cTool .r-summary { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: var(--ct-space-5); border-radius: var(--ct-radius-lg); background: var(--ct-surface); border: 1px solid var(--ct-border); box-shadow: var(--ct-shadow-soft); } #cTool .r-summary .rs-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ct-accent-soft); color: var(--ct-accent); } #cTool .r-summary .rs-ico svg { width: 22px; height: 22px; } #cTool .r-summary .rs-info { flex: 1; min-width: 0; } #cTool .r-summary .rs-info b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--ct-heading); line-height: 1.2; } #cTool .r-summary .rs-info p { margin-top: 4px; font-size: 13px; color: var(--ct-text-secondary); } #cTool .rs-art { position: relative; width: 52px; height: 46px; flex: none; } #cTool .rs-art i { position: absolute; right: 0; width: 44px; height: 15px; border-radius: 6px; background: linear-gradient(180deg, #DCE7FF, #B9CDFB); box-shadow: 0 4px 10px rgba(79, 127, 232, .14); } #cTool .rs-art i:nth-child(1) { top: 0; transform: translateX(-8px) scale(.86); opacity: .55; } #cTool .rs-art i:nth-child(2) { top: 11px; transform: translateX(-4px) scale(.93); opacity: .78; } #cTool .rs-art i:nth-child(3) { top: 25px; } @media (max-width: 400px) { #cTool .rs-art { display: none; } } /* 主/次操作：同一行，主按钮更宽（对齐设计稿） */ #cTool .result-actions { display: flex; gap: 10px; flex-wrap: nowrap; } #cTool .result-actions .dl-all { flex: 2 1 auto; } #cTool .result-actions .rs-share { flex: 1 1 auto; padding: 0 16px; } #cTool .dl-all { height: 50px; border: 0; border-radius: var(--ct-radius-pill); display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ct-accent); color: #fff; font-size: 15.5px; font-weight: 700; font-family: inherit; box-shadow: 0 8px 20px -8px rgba(79, 127, 232, .5); transition: background var(--ct-dur) var(--ct-ease), transform var(--ct-dur-fast) var(--ct-ease); } #cTool .dl-all:hover { background: var(--ct-accent-hover); } #cTool .dl-all:active { transform: scale(.985); } #cTool .dl-all svg { width: 19px; height: 19px; } /* 效果预览标题行 */ #cTool .r-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; } #cTool .r-head .ph-hint { flex: 1; } @media (max-width: 599px) { #cTool .r-head .ph-hint { display: none; } } #cTool .r-head .tool { min-height: 34px; padding: 0 13px; border-radius: var(--ct-radius-pill); border: 1px solid var(--ct-border-strong); background: var(--ct-surface); color: var(--ct-text); font-size: 13px; font-weight: 600; } #cTool .r-head .tool:hover { border-color: var(--ct-accent); color: var(--ct-accent); } /* 结果卡网格 */ #cTool .r-grid { display: grid; grid-template-columns: 1fr; gap: var(--ct-space-4); padding: 0; overflow: visible; } @media (min-width: 600px) { #cTool .r-grid { grid-template-columns: repeat(2, 1fr); } } #cTool .r-card { border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-soft); } #cTool .r-card .r-img img { height: 230px; object-fit: contain; background: var(--ct-surface-muted); } #cTool .r-card .r-meta { padding: 12px 14px; } #cTool .r-card .r-meta .vals { font-size: 12.5px; color: var(--ct-text-secondary); } /* 长边上限说明：独占一行，比主数据更轻一档 */ #cTool .r-card .r-meta .vals .dim { flex: 1 0 100%; font-size: 11.5px; line-height: 1.45; color: var(--ct-text-tertiary); font-weight: 500; } #cTool .r-card .r-meta .save { font-weight: 650; color: var(--ct-success); } #cTool .r-card .r-meta .save.is-best { color: var(--ct-text-tertiary); font-weight: 600; } #cTool .r-card .r-meta .act { gap: 8px; margin-top: 12px; } #cTool .r-card .r-meta .act button { padding: 9px 10px; border-radius: var(--ct-radius-pill); border: 1px solid var(--ct-border-strong); background: var(--ct-surface); color: var(--ct-text); font-size: 13px; font-weight: 650; font-family: inherit; } #cTool .r-card .r-meta .act button:hover { border-color: var(--ct-accent); color: var(--ct-accent); } #cTool .r-card .r-meta .act button.dl { background: var(--ct-surface-ink); color: var(--ct-on-ink); border-color: var(--ct-surface-ink); } #cTool .r-card .r-meta .act button.dl:hover { background: #26272D; color: #fff; } /* 对比滑块配色贴合新设计语言 */ #cTool .cmp img { background: var(--ct-surface-muted); } #cTool .cmp .cmp-tag { font-size: 11px; font-weight: 650; } /* ============================================================ PHASE 3b · 批量加水印（#toolview） 编辑器型页面：桌面端预览与设置并排，移动端单列 ============================================================ */ #toolview { --ct-tool-col: 760px; } @media (min-width: 900px) { #toolview { --ct-tool-col: 1040px; } } /* 覆盖 styles.css 的旧内边距 / 居中壳 */ .toolview .tv-body, .toolview .tv-footer { max-width: none; margin: 0; padding-left: 0; padding-right: 0; } #toolview .tv-spacer { flex: 1; } /* ---------- 上传区（水印 / 转换 / 尺寸 通用） ---------- */ .toolview .tv-upload { margin: 0; } .toolview .tv-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: var(--ct-space-12) var(--ct-space-6); text-align: center; cursor: pointer; border: 1.5px dashed var(--ct-border-strong); border-radius: var(--ct-radius-lg); background: var(--ct-surface); transition: border-color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease); } .toolview .tv-drop:hover, .toolview .tv-drop.drag { border-color: var(--ct-accent); background: var(--ct-accent-soft); } .toolview .tv-drop-ico { width: 42px; height: 42px; color: var(--ct-accent); margin-bottom: 6px; } .toolview .tv-drop-main { font-size: 17px; font-weight: 700; color: var(--ct-heading); } .toolview .tv-drop-sub { font-size: 13px; color: var(--ct-text-secondary); } .toolview .tv-drop-safe { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ct-success); } .toolview .tv-drop-safe svg { width: 14px; height: 14px; } /* ---------- 缩略图条（水印 / 转换 / 尺寸 通用） ---------- */ .toolview .tv-strip { display: block; margin: 0; } .toolview .strip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .toolview .strip-count { font-size: 13px; font-weight: 650; color: var(--ct-text-secondary); font-variant-numeric: tabular-nums; } .toolview .strip-clear { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 13px; border-radius: var(--ct-radius-pill); border: 1px solid transparent; background: var(--ct-danger-soft); color: var(--ct-danger); font-size: 12.5px; font-weight: 650; font-family: inherit; cursor: pointer; transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } .toolview .strip-clear:hover { background: var(--ct-danger); color: #fff; } .toolview .strip-row { display: flex; align-items: center; gap: 10px; } .toolview .strip-track { display: flex; gap: 8px; flex: 0 1 auto; min-width: 0; padding: 4px 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .toolview .strip-track::-webkit-scrollbar { display: none; } .toolview .strip-more { width: 72px; height: 72px; flex: none; border-radius: var(--ct-radius-md); border: 1.5px dashed var(--ct-border-strong); background: var(--ct-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ct-text-secondary); font-size: 11px; font-family: inherit; cursor: pointer; transition: border-color var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease); } .toolview .strip-more:hover { border-color: var(--ct-accent); color: var(--ct-accent); background: var(--ct-accent-soft); } .toolview .strip-more .plus { font-size: 22px; font-weight: 300; line-height: 1; } .toolview .strip-item { width: 72px; height: 72px; border-radius: var(--ct-radius-md); border-width: 2px; transition: border-color var(--ct-dur) var(--ct-ease), box-shadow var(--ct-dur) var(--ct-ease); } .toolview .strip-item.current { border-color: var(--ct-accent); box-shadow: 0 0 0 3px rgba(79, 127, 232, .16); } .toolview .strip-item .idx { left: 5px; bottom: 4px; padding: 0 5px; border-radius: 6px; background: rgba(23, 24, 28, .6); font-size: 10px; } .toolview .strip-item .del { top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(23, 24, 28, .6); } .toolview .strip-item .del:hover { background: var(--ct-danger); } .toolview .strip-item .del svg { width: 11px; height: 11px; } /* ---------- 主体：预览 + 设置 ---------- */ #toolview .tv-body { display: grid; grid-template-columns: 1fr; gap: var(--ct-space-4); } @media (min-width: 900px) { #toolview .tv-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--ct-space-5); } } #toolview .tv-preview { margin: 0; overflow: hidden; background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-soft); } @media (min-width: 900px) { #toolview .tv-preview { position: sticky; top: 80px; } } #toolview .pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ct-border); } #toolview .pv-cur { font-size: 12px; font-weight: 700; color: var(--ct-accent); font-variant-numeric: tabular-nums; } #toolview .pv-frame { display: flex; align-items: center; justify-content: center; padding: 10px; background: #0E1420; } /* 预览必须成为视觉重点：让画布按容器宽度自适应，不再被固定 max-height 缩成小方块 */ #toolview #pvCanvas { display: block; margin: 0 auto; max-width: 100%; max-height: 344px; height: auto; } @media (min-width: 900px) { #toolview #pvCanvas { max-height: 440px; } } #toolview .pv-note { margin: 0; padding: 11px 16px; border-top: 1px solid var(--ct-border); background: var(--ct-surface-soft); font-size: 12.5px; color: var(--ct-text-tertiary); } /* ---------- 设置面板（水印 / 转换 / 尺寸 通用） ---------- */ .toolview .tv-panel { display: flex; flex-direction: column; gap: var(--ct-space-4); margin: 0; padding: var(--ct-space-5); background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-soft); } .toolview .tv-panel .panel-head { margin: 0; } .toolview .ph-reset { font-size: 12.5px; font-weight: 650; color: var(--ct-text-tertiary); background: none; border: 0; cursor: pointer; font-family: inherit; } .toolview .ph-reset:hover { color: var(--ct-accent); } /* 类型切换 */ #toolview .wm-type { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; } #toolview .wm-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px; border-radius: var(--ct-radius-md); border: 1px solid var(--ct-border); background: var(--ct-surface-soft); color: var(--ct-text-secondary); font-size: 14px; font-weight: 650; font-family: inherit; cursor: pointer; transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease), border-color var(--ct-dur) var(--ct-ease); } #toolview .wm-tab svg { width: 17px; height: 17px; } #toolview .wm-tab:hover { border-color: var(--ct-border-strong); } #toolview .wm-tab.active { background: var(--ct-accent-soft); border-color: var(--ct-accent); color: var(--ct-accent); } /* 水印模板 */ #toolview .wm-tpl { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--ct-radius-md); background: var(--ct-surface-soft); border: 1px solid var(--ct-border); } #toolview .wm-tpl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #toolview .wm-tpl-save { display: inline-flex; align-items: center; gap: 5px; flex: none; min-height: 32px; padding: 0 12px; border-radius: var(--ct-radius-pill); border: 1px solid var(--ct-border-strong); background: var(--ct-surface); color: var(--ct-text-secondary); font-size: 12.5px; font-weight: 650; font-family: inherit; cursor: pointer; transition: border-color var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } #toolview .wm-tpl-save:hover { border-color: var(--ct-accent); color: var(--ct-accent); } #toolview .wm-tpl-save svg { width: 13px; height: 13px; } #toolview .wm-tpl-list { display: flex; flex-wrap: wrap; gap: 8px; } #toolview .wm-tpl-list:empty::after { content: '还没有模板，调好水印后点「存为模板」即可一键复用'; font-size: 11.5px; color: var(--ct-text-tertiary); } #toolview .tpl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: var(--ct-radius-pill); border: 1px solid var(--ct-border-strong); background: var(--ct-surface); font-size: 12.5px; font-weight: 600; color: var(--ct-text); cursor: pointer; } #toolview .tpl-chip:hover { border-color: var(--ct-accent); color: var(--ct-accent); } #toolview .tpl-chip.del { width: 18px; height: 18px; padding: 0; flex: none; border: 0; border-radius: 50%; background: none; color: var(--ct-text-tertiary); display: inline-flex; align-items: center; justify-content: center; } #toolview .tpl-chip.del:hover { background: var(--ct-danger-soft); color: var(--ct-danger); } #toolview .tpl-chip.del svg { width: 12px; height: 12px; } /* 字段通用 */ #toolview .wm-field { margin: 0; min-width: 0; } #toolview .wm-field > label, #toolview .wm-field .label-row label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 650; color: var(--ct-heading); } #toolview .wm-field .label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } #toolview .wm-field .label-row label { margin-bottom: 0; } #toolview .wm-field .label-row output { font-size: 13.5px; font-weight: 750; color: var(--ct-accent); font-variant-numeric: tabular-nums; } #toolview .wm-field input[type=text] { width: 100%; box-sizing: border-box; padding: 12px 38px 12px 14px; border: 1px solid var(--ct-border-strong); border-radius: var(--ct-radius-sm); background: var(--ct-surface); color: var(--ct-ink); font-size: 14.5px; font-family: inherit; transition: border-color var(--ct-dur) var(--ct-ease), box-shadow var(--ct-dur) var(--ct-ease); } #toolview .wm-field input[type=text]:focus { outline: none; border-color: var(--ct-accent); box-shadow: 0 0 0 3px rgba(79, 127, 232, .14); } #toolview .wm-input-wrap { position: relative; } #toolview .wm-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--ct-surface-muted); color: var(--ct-text-tertiary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #toolview .wm-clear:hover { background: var(--ct-danger-soft); color: var(--ct-danger); } #toolview .wm-clear svg { width: 12px; height: 12px; } #toolview .wm-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 11.5px; } #toolview .wm-count #wmTextCount { font-weight: 650; color: var(--ct-text-secondary); font-variant-numeric: tabular-nums; } #toolview .wm-count #wmTextCount.warn { color: var(--ct-danger); } #toolview .wm-count .wm-count-tip { color: var(--ct-text-tertiary); } .toolview .hint { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--ct-text-tertiary); } /* 字体 */ #toolview .wm-font { display: flex; gap: 6px; margin-top: 10px; } #toolview .wm-font button { flex: 1; min-height: 38px; padding: 0; border-radius: var(--ct-radius-sm); background: var(--ct-surface-soft); border: 1px solid var(--ct-border); color: var(--ct-text-secondary); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease), border-color var(--ct-dur) var(--ct-ease); } #toolview .wm-font button:hover { border-color: var(--ct-border-strong); } #toolview .wm-font button.active { background: var(--ct-accent-soft); border-color: var(--ct-accent); color: var(--ct-accent); } /* 颜色（含取色） */ #toolview .wm-sub { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ct-border); } #toolview .wm-colors { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* 原生取色器排在预设色之后：避免与「白色」预设并排出现两个白块 */ #toolview .wm-colors .wc { order: 1; } #toolview .wm-colors #wmColor { order: 2; } #toolview .wm-colors .wc-pick { order: 3; } #toolview .wm-colors input[type=color] { -webkit-appearance: none; appearance: none; width: 36px; height: 36px; padding: 0; cursor: pointer; border: 1px solid var(--ct-border-strong); border-radius: 10px; background: var(--ct-surface); } #toolview .wm-colors input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; } #toolview .wm-colors input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; } #toolview .wm-colors .wc { width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 2px solid var(--ct-surface); box-shadow: 0 0 0 1px var(--ct-border-strong); color: transparent; font-size: 0; cursor: pointer; transition: box-shadow var(--ct-dur) var(--ct-ease); } #toolview .wm-colors .wc.active { box-shadow: 0 0 0 2px var(--ct-accent); } #toolview .wm-colors .wc-pick { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ct-border-strong); background: var(--ct-surface); color: var(--ct-text-secondary); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease); } #toolview .wm-colors .wc-pick svg { width: 15px; height: 15px; } #toolview .wm-colors .wc-pick:hover { border-color: var(--ct-accent); color: var(--ct-accent); } #toolview .wm-colors .wc-pick.picking { border-color: var(--ct-accent); color: var(--ct-accent); background: var(--ct-accent-soft); } /* 图片水印 */ #toolview .wm-upload-img { width: 100%; min-height: 46px; padding: 0 14px; border-radius: var(--ct-radius-sm); background: var(--ct-surface-soft); border: 1.5px dashed var(--ct-border-strong); color: var(--ct-text-secondary); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease); } #toolview .wm-upload-img:hover { border-color: var(--ct-accent); color: var(--ct-accent); background: var(--ct-accent-soft); } #toolview .wm-upload-img svg { width: 17px; height: 17px; } #toolview #wmImagePreview { width: 64px; height: 64px; object-fit: contain; margin-top: 10px; padding: 4px; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-sm); background: repeating-conic-gradient(#EEF1F5 0% 25%, #FFFFFF 0% 50%) 50% / 14px 14px; } /* 双列行 */ #toolview .wm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* 位置 3×3 —— 收紧成一块九宫格，而不是被拉满整行（触控目标仍 ≥44） */ #toolview .wm-pos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; max-width: 214px; } #toolview .wm-pos button { position: relative; min-height: 44px; padding: 0; cursor: pointer; border-radius: 10px; background: var(--ct-surface-soft); border: 1px solid var(--ct-border); transition: background var(--ct-dur) var(--ct-ease), border-color var(--ct-dur) var(--ct-ease); } #toolview .wm-pos button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ct-border-strong); transition: background var(--ct-dur) var(--ct-ease); } #toolview .wm-pos button:hover { border-color: var(--ct-border-strong); } #toolview .wm-pos button.active { background: var(--ct-accent); border-color: var(--ct-accent); } #toolview .wm-pos button.active::after { background: #fff; } /* 应用范围 + 平铺 */ #toolview .wm-opt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 359px) { #toolview .wm-opt-row { grid-template-columns: 1fr; } } #toolview .wm-scope { display: flex; flex-direction: column; gap: 6px; } #toolview .wm-scope button { display: flex; align-items: center; gap: 8px; text-align: left; min-height: 34px; padding: 0 10px; border-radius: var(--ct-radius-sm); border: 1px solid transparent; background: transparent; color: var(--ct-text-secondary); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } #toolview .wm-scope button i { position: relative; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--ct-border-strong); background: var(--ct-surface); transition: background var(--ct-dur) var(--ct-ease), border-color var(--ct-dur) var(--ct-ease); } #toolview .wm-scope button:hover { background: var(--ct-surface-soft); } #toolview .wm-scope button.active { color: var(--ct-accent); background: var(--ct-accent-soft); } #toolview .wm-scope button.active i { border-color: var(--ct-accent); background: var(--ct-accent); } #toolview .wm-scope button.active i::after { content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: #fff; } #toolview .wm-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } #toolview .wm-toggle-txt { display: flex; flex-direction: column; gap: 3px; } #toolview .wm-toggle-txt label { margin: 0; font-size: 13px; font-weight: 650; color: var(--ct-heading); } #toolview .wm-toggle-txt small { font-size: 11.5px; line-height: 1.5; color: var(--ct-text-tertiary); } #toolview .wm-switch { -webkit-appearance: none; appearance: none; position: relative; width: 48px; height: 44px; flex: none; margin-top: 2px; border: 0; border-radius: var(--ct-radius-sm); background: transparent; cursor: pointer; } #toolview .wm-switch::before { content: ""; position: absolute; left: 0; top: 50%; width: 48px; height: 28px; margin-top: -14px; border-radius: 999px; background: var(--ct-border-strong); transition: background var(--ct-dur) var(--ct-ease); } #toolview .wm-switch i { position: absolute; top: 50%; margin-top: -11px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--ct-dur) var(--ct-ease); } #toolview .wm-switch[data-on="1"] { background: transparent; } #toolview .wm-switch[data-on="1"]::before { background: var(--ct-accent); } #toolview .wm-switch[data-on="1"] i { transform: translateX(20px); } /* ---------- 快速预设 ---------- */ #toolview .tv-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; } #toolview .preset-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 14px 8px; text-align: center; cursor: pointer; border-radius: var(--ct-radius-md); background: var(--ct-surface); border: 1px solid var(--ct-border); box-shadow: var(--ct-shadow-soft); transition: border-color var(--ct-dur) var(--ct-ease), transform var(--ct-dur-fast) var(--ct-ease); } #toolview .preset-card:hover { border-color: var(--ct-accent); transform: translateY(-1px); } #toolview .preset-card:active { transform: scale(.985); } #toolview .preset-card svg { width: 20px; height: 20px; color: var(--ct-accent); margin-bottom: 4px; } #toolview .preset-card b { font-size: 13px; font-weight: 700; color: var(--ct-heading); } #toolview .preset-card span { font-size: 11px; color: var(--ct-text-tertiary); } /* ---------- 数量提示条（通用） ---------- */ .toolview .tv-limit { margin: 0; padding: 10px 14px; border-radius: var(--ct-radius-md); background: #FFF7E9; color: #A9600B; font-size: 12.5px; font-weight: 600; text-align: center; } /* ---------- 底部操作（吸底 · 通用） ---------- */ .toolview .tv-footer { position: sticky; bottom: 0; z-index: 4; margin-inline: calc(-1 * var(--ct-page-pad)); display: flex; flex-direction: column; gap: 10px; padding: 12px var(--ct-page-pad) calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(250, 250, 248, .92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--ct-border); } .toolview .wm-auto { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ct-text-secondary); } .toolview .wm-auto input { width: 16px; height: 16px; accent-color: var(--ct-accent); } /* ---------- 结果区（通用） ---------- */ .toolview .tv-result { display: flex; flex-direction: column; gap: var(--ct-space-4); margin: 0; } .toolview .tv-result .progress { margin: 0; padding: 14px 16px; border-radius: var(--ct-radius-md); background: var(--ct-surface); border: 1px solid var(--ct-border); } .toolview .tv-result .progress .bar { height: 8px; border-radius: 999px; background: var(--ct-surface-muted); overflow: hidden; } .toolview .tv-result .progress .bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ct-accent); transition: width var(--ct-dur-slow) var(--ct-ease); } .toolview .tv-result .progress p { margin-top: 8px; font-size: 13px; color: var(--ct-text-secondary); } .toolview .tv-actions { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 0 4px; } /* 结果卡（复用压缩页规格 · 通用） */ .toolview .r-grid { display: grid; grid-template-columns: 1fr; gap: var(--ct-space-4); } @media (min-width: 600px) { .toolview .r-grid { grid-template-columns: repeat(2, 1fr); } } .toolview .r-card { border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-soft); } .toolview .r-card .r-img img { height: 230px; object-fit: contain; background: var(--ct-surface-muted); } .toolview .r-card .r-meta { padding: 12px 14px; } .toolview .r-card .r-meta .vals { font-size: 12.5px; color: var(--ct-text-secondary); } .toolview .r-card .r-meta .act { gap: 8px; margin-top: 12px; } .toolview .r-card .r-meta .act button { padding: 9px 10px; border-radius: var(--ct-radius-pill); border: 1px solid var(--ct-border-strong); background: var(--ct-surface); color: var(--ct-text); font-size: 13px; font-weight: 650; font-family: inherit; } .toolview .r-card .r-meta .act button:hover { border-color: var(--ct-accent); color: var(--ct-accent); } .toolview .r-card .r-meta .act button.dl { background: var(--ct-surface-ink); color: var(--ct-on-ink); border-color: var(--ct-surface-ink); } .toolview .r-card .r-meta .act button.dl:hover { background: #26272D; color: #fff; } /* 结果卡：格式徽标 + 继续处理 */ .toolview .r-card .r-img { position: relative; } .toolview .cv-badge { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 3px 11px; border-radius: var(--ct-radius-pill); background: rgba(255, 255, 255, .94); color: var(--ct-accent); font-size: 11px; font-weight: 750; letter-spacing: .05em; } .toolview .cv-continue { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ct-border); } .toolview .cv-continue > span { font-size: 11.5px; color: var(--ct-text-tertiary); } .toolview .cv-continue button { min-height: 32px; padding: 0 13px; border-radius: var(--ct-radius-pill); border: 1px solid var(--ct-border-strong); background: var(--ct-surface); color: var(--ct-text); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } .toolview .cv-continue button:hover { border-color: var(--ct-accent); color: var(--ct-accent); } /* ============================================================ PHASE 3c · 格式转换（#cvTool） 单列阅读流：选图 → 目标格式 → 质量 → 吸底操作 → 结果 ============================================================ */ #cvTool .tv-top-title p { margin: 0; font-size: 12px; font-weight: 500; color: var(--ct-text-tertiary); } /* 主体：两张卡片纵向堆叠（无预览列） */ #cvTool .tv-body { display: flex; flex-direction: column; gap: var(--ct-space-5); margin: 0; } /* 缩略图条：计数右对齐、清空按钮紧随其后 */ #cvTool .strip-head { justify-content: flex-start; } #cvTool .strip-count { margin-left: auto; } #cvTool .strip-clear { margin-left: 0; } /* ---------- 目标格式卡片 ---------- */ #cvTool .cv-fmt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; } #cvTool .cv-fmt-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; padding: 16px 10px; text-align: center; cursor: pointer; border: 1.5px solid var(--ct-border); border-radius: var(--ct-radius-md); background: var(--ct-surface); font-family: inherit; transition: border-color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease), box-shadow var(--ct-dur) var(--ct-ease); } #cvTool .cv-fmt-item .cvi { width: 46px; height: 46px; flex: none; margin-bottom: 3px; display: grid; place-items: center; border-radius: var(--ct-radius-sm); background: var(--ct-surface-muted); color: var(--ct-text-secondary); transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } #cvTool .cv-fmt-item .cvi svg { width: 24px; height: 24px; } #cvTool .cv-fmt-item b { font-size: 16px; font-weight: 800; letter-spacing: .02em; color: var(--ct-heading); } #cvTool .cv-fmt-item > span.ci-sub { font-size:11.5px; line-height:1.45; color: var(--ct-text-tertiary); } /* 说明文案：宽屏用完整版，窄屏换短版，避免断词与孤字 */ #cvTool .cv-fmt-item .ci-mini { display: none; } @media (max-width: 430px) { #cvTool .cv-fmt-item .ci-full { display: none; } #cvTool .cv-fmt-item .ci-mini { display: inline; } } #cvTool .cv-fmt-item .cvi-ck { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ct-accent); color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--ct-dur) var(--ct-ease), transform var(--ct-dur) var(--ct-ease); } #cvTool .cv-fmt-item .cvi-ck svg { width: 13px; height: 13px; } #cvTool .cv-fmt-item:hover { border-color: var(--ct-border-strong); } #cvTool .cv-fmt-item.active { border-color: var(--ct-accent); background: var(--ct-accent-soft); box-shadow: 0 0 0 3px rgba(79, 127, 232, .10); } #cvTool .cv-fmt-item.active .cvi { background: var(--ct-surface); color: var(--ct-accent); } #cvTool .cv-fmt-item.active b { color: var(--ct-accent); } #cvTool .cv-fmt-item.active .cvi-ck { opacity: 1; transform: none; } #cvTool .cv-fmt-item:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 2px; } /* ---------- 转换质量 ---------- */ #cvTool .cv-q { display: flex; flex-direction: column; } #cvTool .cv-q .label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } #cvTool .cv-q .label-row label { font-size: 13.5px; font-weight: 650; color: var(--ct-heading); } #cvTool .cv-q .label-row output { font-size: 15px; font-weight: 750; color: var(--ct-accent); font-variant-numeric: tabular-nums; } #cvTool .cv-q-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--ct-radius-sm); background: var(--ct-surface-soft); color: var(--ct-text-tertiary); font-size: 11.5px; line-height: 1.6; } #cvTool .cv-q-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; } #cvTool .cv-q-note b { color: var(--ct-text-secondary); font-weight: 650; } /* ---------- 吸底操作：自动下载开关 + 主按钮 ---------- */ #cvTool .cv-auto-row { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; cursor: pointer; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md); background: var(--ct-surface); box-shadow: var(--ct-shadow-soft); } #cvTool .cv-auto-ico { width: 36px; height: 36px; flex: none; border-radius: var(--ct-radius-sm); display: grid; place-items: center; background: var(--ct-accent-soft); color: var(--ct-accent); } #cvTool .cv-auto-ico svg { width: 18px; height: 18px; } #cvTool .cv-auto-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #cvTool .cv-auto-txt b { font-size: 13.5px; font-weight: 700; color: var(--ct-heading); } #cvTool .cv-auto-txt small { font-size: 11.5px; color: var(--ct-text-tertiary); } #cvTool .cv-switch { -webkit-appearance: none; appearance: none; position: relative; width: 48px; height: 28px; flex: none; margin: 0; border: 0; border-radius: 999px; background: var(--ct-border-strong); cursor: pointer; transition: background var(--ct-dur) var(--ct-ease); } #cvTool .cv-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--ct-dur) var(--ct-ease); } #cvTool .cv-switch:checked { background: var(--ct-accent); } #cvTool .cv-switch:checked::after { transform: translateX(20px); } #cvTool .cv-switch:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 3px; } /* ---------- 结果区：完成摘要卡 ---------- */ #cvTool .tv-result .progress { display: grid; gap: 10px; } #cvTool .cv-done-ico, #cvTool .cv-done-title, #cvTool .cv-dl-all { display: none; } #cvTool .tv-result .progress.done { grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; } #cvTool .tv-result .progress.done .bar { display: none; } #cvTool .tv-result .progress.done .cv-done-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ct-success); color: #fff; } #cvTool .tv-result .progress.done .cv-done-ico svg { width: 20px; height: 20px; } #cvTool .tv-result .progress.done .cv-done-title { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 750; color: var(--ct-heading); } #cvTool .tv-result .progress.done .cv-dl-all { display: inline-flex; } #cvTool .tv-result .progress.done .cv-dl-all svg { width: 15px; height: 15px; } #cvTool .tv-result .progress.done p { margin-top: 0; } /* ============================================================ PHASE 3d · 尺寸适配（#rsTool） 单列阅读流：场景带 → 裁切方式 → 焦点保护 → 输出规格 → 吸底操作 → 结果 规则：全部以 #rsTool 作用域，避免影响已验证的压缩 / 水印 / 转换页 ============================================================ */ #rsTool .tv-top-title p { margin: 0; font-size: 12px; font-weight: 500; color: var(--ct-text-tertiary); } #rsTool .tv-body { display: flex; flex-direction: column; gap: var(--ct-space-5); margin: 0; } #rsTool .rs-settings { margin: 0; } /* 缩略图条：计数右对齐 + 清空紧随（与转换页一致） */ #rsTool .strip-head { justify-content: flex-start; } #rsTool .strip-count { margin-left: auto; } #rsTool .strip-clear { margin-left: 0; } /* ---------- 输出场景：窄屏横向滚动带 / 宽屏五列 ---------- */ #rsTool .rs-scenes { display: flex; gap: 10px; margin: 0; padding: 2px 2px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #rsTool .rs-scenes::-webkit-scrollbar { display: none; } #rsTool .rs-scene { flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 13px 12px; text-align: left; cursor: pointer; font-family: inherit; border: 1.5px solid var(--ct-border); border-radius: var(--ct-radius-md); background: var(--ct-surface); box-shadow: var(--ct-shadow-soft); transition: border-color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease), box-shadow var(--ct-dur) var(--ct-ease); } #rsTool .rs-scene .rsc-ico { width: 34px; height: 34px; flex: none; margin-bottom: 2px; display: grid; place-items: center; border-radius: var(--ct-radius-sm); background: var(--ct-surface-muted); color: var(--ct-text-secondary); transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } #rsTool .rs-scene .rsc-ico svg { width: 18px; height: 18px; } #rsTool .rs-scene b { font-size: 14px; font-weight: 750; color: var(--ct-heading); } #rsTool .rs-scene .rsc-sub { font-size: 11px; line-height: 1.4; color: var(--ct-text-tertiary); } #rsTool .rs-scene .rsc-sub .rsc-n { font-style: normal; font-weight: 650; color: var(--ct-text-secondary); font-variant-numeric: tabular-nums; } #rsTool .rs-scene:hover { border-color: var(--ct-border-strong); } #rsTool .rs-scene.active { border-color: var(--ct-accent); background: var(--ct-accent-soft); box-shadow: 0 0 0 3px rgba(79, 127, 232, .10); } #rsTool .rs-scene.active .rsc-ico { background: var(--ct-surface); color: var(--ct-accent); } #rsTool .rs-scene.active b, #rsTool .rs-scene.active .rsc-sub, #rsTool .rs-scene.active .rsc-sub .rsc-n { color: var(--ct-accent); } #rsTool .rs-scene:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 2px; } @media (min-width: 720px) { #rsTool .rs-scenes { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; padding: 0; } #rsTool .rs-scene { flex: none; } } /* 我的尺寸预设 */ #rsTool .tpl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 12px 14px; border: 0; border-radius: var(--ct-radius-md); background: var(--ct-surface-soft); } #rsTool .tpl-bar-title { font-size: 12.5px; font-weight: 650; color: var(--ct-text-secondary); } #rsTool .tpl-save-mini { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 13px; border-radius: var(--ct-radius-pill); border: 1px solid transparent; background: var(--ct-surface); color: var(--ct-text-secondary); font-size: 12px; font-weight: 650; font-family: inherit; cursor: pointer; } #rsTool .tpl-save-mini:hover { color: var(--ct-accent); } #rsTool .tpl-save-mini svg { width: 12px; height: 12px; } #rsTool .tpl-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; width: 100%; } #rsTool .tpl-list:empty::after { content: '存下当前场景，下次一键复用'; font-size: 11.5px; color: var(--ct-text-tertiary); } #rsTool .tpl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: var(--ct-radius-pill); border: 1px solid var(--ct-border-strong); background: var(--ct-surface); font-size: 12.5px; font-weight: 600; color: var(--ct-text); cursor: pointer; } #rsTool .tpl-chip:hover { border-color: var(--ct-accent); color: var(--ct-accent); } #rsTool .tpl-chip.del { width: 18px; height: 18px; padding: 0; margin: 0; flex: none; border: 0; border-radius: 50%; background: none; color: var(--ct-text-tertiary); display: inline-flex; align-items: center; justify-content: center; } #rsTool .tpl-chip.del:hover { background: var(--ct-danger-soft); color: var(--ct-danger); } #rsTool .tpl-chip.del svg { width: 12px; height: 12px; } /* ---------- 裁切方式 ---------- */ #rsTool .rs-mode { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; } @media (min-width: 400px) { #rsTool .rs-mode { grid-template-columns: repeat(4, 1fr); } } #rsTool .rs-mode button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 12px 10px; text-align: left; cursor: pointer; font-family: inherit; border: 1.5px solid var(--ct-border); border-radius: var(--ct-radius-md); background: var(--ct-surface); box-shadow: var(--ct-shadow-soft); transition: border-color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease), box-shadow var(--ct-dur) var(--ct-ease); } #rsTool .rs-mode button .rm-ico { width: 30px; height: 30px; flex: none; margin-bottom: 2px; display: grid; place-items: center; border-radius: var(--ct-radius-sm); background: var(--ct-surface-muted); color: var(--ct-text-secondary); transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } #rsTool .rs-mode button .rm-ico svg { width: 17px; height: 17px; } #rsTool .rs-mode button b { font-size: 13px; font-weight: 700; color: var(--ct-heading); } #rsTool .rs-mode button .rm-sub { font-size: 11px; line-height: 1.35; color: var(--ct-text-tertiary); } #rsTool .rs-mode button:hover { border-color: var(--ct-border-strong); } #rsTool .rs-mode button.active { border-color: var(--ct-accent); background: var(--ct-accent-soft); box-shadow: 0 0 0 3px rgba(79, 127, 232, .10); } #rsTool .rs-mode button.active .rm-ico { background: var(--ct-surface); color: var(--ct-accent); } #rsTool .rs-mode button.active b { color: var(--ct-accent); } #rsTool .rs-mode button:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 2px; } /* ---------- 焦点保护 ---------- */ #rsTool .rs-focus { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-top: var(--ct-space-4); border-top: 1px dashed var(--ct-border); } #rsTool .rs-focus-head { display: flex; flex-direction: column; gap: 3px; } #rsTool .rs-focus-head b { font-size: 14px; font-weight: 750; color: var(--ct-heading); } #rsTool .rs-focus-head small { font-size: 11.5px; line-height: 1.5; color: var(--ct-text-tertiary); } #rsTool .rs-focus-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px 14px; text-align: left; cursor: pointer; font-family: inherit; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md); background: var(--ct-surface); box-shadow: var(--ct-shadow-soft); transition: border-color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease); } #rsTool .rs-focus-btn .rfb-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--ct-radius-sm); background: var(--ct-accent-soft); color: var(--ct-accent); } #rsTool .rs-focus-btn .rfb-ico svg { width: 18px; height: 18px; } #rsTool .rs-focus-btn .rfb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #rsTool .rs-focus-btn .rfb-txt b { font-size: 13.5px; font-weight: 700; color: var(--ct-heading); } #rsTool .rs-focus-btn .rfb-txt small { font-size: 11.5px; color: var(--ct-text-tertiary); } #rsTool .rs-focus-btn:hover { border-color: var(--ct-border-strong); } #rsTool .rs-focus-btn.active { border-color: var(--ct-accent); background: var(--ct-accent-soft); } #rsTool .rs-focus-btn.active .rfb-txt b { color: var(--ct-accent); } #rsTool .rs-focus-btn:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 2px; } /* 开关指示：仅反映「正在拾取焦点」状态，交互语义仍由 #rsPickFocus 承担 */ #rsTool .rs-sw { position: relative; width: 44px; height: 26px; flex: none; border-radius: 999px; background: var(--ct-border-strong); transition: background var(--ct-dur) var(--ct-ease); } #rsTool .rs-sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--ct-dur) var(--ct-ease); } #rsTool .rs-focus-btn.active .rs-sw { background: var(--ct-accent); } #rsTool .rs-focus-btn.active .rs-sw i { transform: translateX(18px); } /* 清除焦点 / 重置裁剪 */ #rsTool .rs-focus-clear { align-self: flex-start; min-height: 32px; padding: 0 13px; margin: 0; border: 1px solid var(--ct-border-strong); border-radius: var(--ct-radius-pill); background: var(--ct-surface); color: var(--ct-text-secondary); font-size: 12.5px; font-weight: 650; font-family: inherit; cursor: pointer; transition: border-color var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } #rsTool .rs-focus-clear:hover { border-color: var(--ct-accent); color: var(--ct-accent); } #rsTool .rs-focus-stage { position: relative; width: 100%; margin: 0; overflow: hidden; border-radius: var(--ct-radius-md); background: var(--ct-surface-muted); border: 1px solid var(--ct-border); cursor: crosshair; } #rsTool .rs-focus-stage canvas { display: block; width: 100%; height: auto; background: var(--ct-surface); } #rsTool .rs-focus-dot { border-color: #fff; background: rgba(79, 127, 232, .42); box-shadow: 0 0 0 2px var(--ct-accent), 0 2px 6px rgba(0, 0, 0, .3); } #rsTool .rs-focus-tag { background: rgba(23, 24, 28, .82); } #rsTool .rs-focus-current { margin: 0; font-size: 12px; color: var(--ct-text-secondary); font-variant-numeric: tabular-nums; } /* ---------- 自由裁剪 ---------- */ #rsTool .rs-free { padding: 0; margin: 0; max-width: none; } #rsTool .rs-free .tv-panel { margin: 0; } #rsTool .rs-free-act { display: inline-flex; gap: 6px; } #rsTool .rs-focus-tip { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ct-text-tertiary); } #rsTool .rs-focus-tip b { color: var(--ct-text-secondary); font-weight: 650; } #rsTool .rs-crop-stage { margin: 0; border-radius: var(--ct-radius-md); } /* ---------- 输出规格（实时预览 + 勾选导出） ---------- */ #rsTool .rs-out { display: flex; flex-direction: column; gap: var(--ct-space-4); margin: 0; padding: var(--ct-space-5); background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-soft); } #rsTool .rs-out .panel-head { margin: 0; } #rsTool .rs-out-n { font-size: 12.5px; font-weight: 700; color: var(--ct-accent); font-variant-numeric: tabular-nums; cursor: default; } #rsTool .rs-out-hint { margin: 0; padding: 0; background: none; border: 0; font-size: 12px; line-height: 1.5; color: var(--ct-text-tertiary); } #rsTool .rs-out-hint b { color: var(--ct-text-secondary); font-weight: 650; font-variant-numeric: tabular-nums; } #rsTool .rs-out-list { display: flex; flex-direction: column; gap: 8px; margin: 0; } #rsTool .rs-out-item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; text-align: left; cursor: pointer; font-family: inherit; user-select: none; border: 1.5px solid var(--ct-border); border-radius: var(--ct-radius-md); background: var(--ct-surface); transition: border-color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease); } #rsTool .rs-out-item:hover { border-color: var(--ct-border-strong); } #rsTool .rs-out-item:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 2px; } #rsTool .rs-out-item .n { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ct-surface-muted); color: var(--ct-text-tertiary); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } #rsTool .rs-out-item .rs-out-thumb { width: 52px; height: 52px; flex: none; object-fit: contain; border-radius: var(--ct-radius-sm); border: 1px solid var(--ct-border); background: var(--ct-surface-muted); cursor: zoom-in; } #rsTool .rs-out-item .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #rsTool .rs-out-item .txt b { font-size: 13.5px; font-weight: 700; color: var(--ct-heading); } #rsTool .rs-out-item .txt .sz { font-size: 12px; color: var(--ct-text-secondary); font-variant-numeric: tabular-nums; } #rsTool .rs-out-item .zoom { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ct-surface-soft); color: var(--ct-text-tertiary); } #rsTool .rs-out-item .zoom svg { width: 15px; height: 15px; } #rsTool .rs-out-item.on { border-color: var(--ct-accent); background: var(--ct-accent-soft); } #rsTool .rs-out-item.on .n { background: var(--ct-accent); color: #fff; } #rsTool .rs-out-item.on .txt b { color: var(--ct-accent); } #rsTool .rs-out-item.on .zoom { background: var(--ct-surface); color: var(--ct-accent); } #rsTool .rs-out-toggle { width: 100%; min-height: 40px; margin: 0; padding: 0 12px; border: 1px dashed var(--ct-border-strong); border-radius: var(--ct-radius-md); background: var(--ct-surface-soft); color: var(--ct-text-secondary); font-size: 13px; font-weight: 650; font-family: inherit; cursor: pointer; transition: border-color var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } #rsTool .rs-out-toggle:hover { border-color: var(--ct-accent); color: var(--ct-accent); } /* ---------- 结果：按原图分组的规格缩略卡 ---------- */ #rsTool .rs-group { margin: 0; } #rsTool .rs-group-h { margin-bottom: 10px; } #rsTool .rs-group-h .g-img { width: 40px; height: 40px; border-radius: var(--ct-radius-sm); border-color: var(--ct-border); background: var(--ct-surface-muted); } #rsTool .rs-group-h .g-t { font-size: 13.5px; font-weight: 750; color: var(--ct-heading); } #rsTool .rs-group-h .g-s { font-size: 11.5px; color: var(--ct-text-tertiary); } #rsTool .rs-group-row { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 10px; } #rsTool .rs-mini { border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md); background: var(--ct-surface); box-shadow: var(--ct-shadow-soft); cursor: zoom-in; transition: border-color var(--ct-dur) var(--ct-ease), box-shadow var(--ct-dur) var(--ct-ease); } #rsTool .rs-mini:hover { border-color: var(--ct-accent); box-shadow: 0 0 0 3px rgba(79, 127, 232, .10); } #rsTool .rs-mini .m-img img { height: 104px; background: var(--ct-surface-muted); } #rsTool .rs-mini .m-img .m-sz { background: rgba(23, 24, 28, .72); border-radius: var(--ct-radius-xs); } #rsTool .rs-mini .m-t .m-name { font-size: 11.5px; color: var(--ct-text-secondary); } #rsTool .rs-mini .m-t .m-size { color: var(--ct-accent); } #rsTool .rs-mini .m-dl { background: var(--ct-accent-soft); color: var(--ct-accent); border-radius: var(--ct-radius-xs); transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } #rsTool .rs-mini .m-dl:hover { background: var(--ct-accent); color: #fff; } /* ---------- 结果区：完成摘要卡（与格式转换页保持一致） ---------- */ #rsTool .tv-result .progress { display: grid; gap: 10px; } #rsTool .rs-done-ico, #rsTool .rs-done-title, #rsTool .rs-dl-all { display: none; } #rsTool .tv-result .progress.done { grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; } #rsTool .tv-result .progress.done .bar { display: none; } #rsTool .tv-result .progress.done .rs-done-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ct-success); color: #fff; } #rsTool .tv-result .progress.done .rs-done-ico svg { width: 20px; height: 20px; } #rsTool .tv-result .progress.done .rs-done-title { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 750; color: var(--ct-heading); } #rsTool .tv-result .progress.done .rs-dl-all { display: inline-flex; } #rsTool .tv-result .progress.done .rs-dl-all svg { width: 15px; height: 15px; } #rsTool .tv-result .progress.done p { margin-top: 0; } /* ============================================================ PHASE 4 — 集成：全部工具 / 处理记录 / 设置（统一新设计系统） 作用域限定在 #hubTool / #historyTool / #settingsTool， 仅覆盖 styles.css 中的旧表现，不动任何 id 与 JS 契约。 ============================================================ */ /* ---------- 全部工具（#hubTool） ---------- */ #hubTool .hub-grid { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--ct-space-4); } @media (max-width: 560px) { #hubTool .hub-grid { grid-template-columns: 1fr; } } #hubTool .hub-card { position: relative; display: flex; flex-direction: column; padding: var(--ct-space-5); font: inherit; text-align: left; color: inherit; /*