/* ai-chat-images-page.css — Images gallery page + fullscreen editor */ /* ========================= Page container ========================= */ .images-view-page { display: flex; flex-direction: column; height: 100%; padding: 0; background: var(--color-bg-page); overflow-y: auto; } .images-view-page[hidden] { display: none; } /* Content wrapper — max-width with white bg beyond */ .images-view-content { width: 100%; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; flex: 1; } /* ========================= Title row (matches project-title-row) ========================= */ .images-title-row { display: flex; align-items: center; gap: 8px; padding: 200px 0 20px 16px; width: 85%; max-width: 700px; margin: 0 auto; box-sizing: border-box; } .images-title-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #000; flex-shrink: 0; } /* The box sets the size, not the glyph: title icons are drawn at whatever size their snippet happens to carry (30 for the picture, 24 for the document), and a title icon must be one size whichever page it names. */ .images-title-icon svg { width: 100%; height: 100%; } .images-view-title { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-style: var(--heading-font-style); letter-spacing: var(--heading-letter-spacing); text-transform: var(--heading-text-transform); font-size: var(--text-h3); line-height: 1.6; margin: 0; color: var(--color-text); } /* ========================= Composer overrides (shared by gallery & editor) ========================= */ .images-composer-bar { position: relative; flex-shrink: 0; margin-bottom: 20px; } /* Hide the "+" text — JS injects icon-image SVG into .plus-icon */ .images-composer-bar .plus-icon { font-size: 0; /* collapse the "+" text */ transform: none; /* remove the translateY offset meant for "+" */ display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #111; } .images-composer-bar .plus-icon svg { width: 18px; height: 18px; display: block; } /* Hide image-mode chip & plus menu — image mode is always on */ .images-composer-bar .image-mode-chip, .images-composer-bar .plus-menu { display: none !important; } /* ========================= Toolbar row: grid toggle (left) + project filter (right) — 与网格左右边缘对齐 ========================= */ .images-toolbar-row { width: 95%; max-width: 1200px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; } /* ========================= Grid view toggle (4-grid / 9-grid) ========================= */ .images-view-toggle { display: flex; align-items: center; gap: 2px; } .images-view-toggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; background: transparent; /* app-wide tokens, not sidebar ones: this toggle also lives in the Files page and inside the viewer, and the viewer is appended to where the sidebar tokens are out of scope (that is what used to need a stand-in with its own colours - three homes, two colour schemes). */ color: var(--color-text-secondary); border-radius: calc(6px * var(--corner-k)); cursor: pointer; transition: background 0.15s, color 0.15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } html:not([data-input="touch"]) .images-view-toggle-btn:not(.is-active):hover{ background: var(--color-bg-hover); color: var(--color-text); } .images-view-toggle-btn:not(.is-active):active { background: var(--color-bg-hover); } .images-view-toggle-btn.is-active { color: var(--color-text); } .images-view-toggle-btn svg { width: var(--icon-size); height: var(--icon-size); display: block; } /* ========================= Image grid ========================= */ /* Grid density = one site-wide pair of column counts (dense 9-grid / large 4-grid). The overview grid (Files / Portfolio) no longer reads them: it takes fixed tile sizes (ai-chat-file-preview.css, owner 2026-09-15). */ :root { --duo-grid-dense-cols: 6; --duo-grid-large-cols: 3; } .images-grid { width: 95%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: repeat(var(--duo-grid-dense-cols), 1fr); gap: 4px; align-content: start; padding-bottom: 100px; /* 底部留白，与项目页 .project-chat-list 一致 */ } /* 4-grid 视图：一行 3 张（图片更大）。复合选择器确保压过各断点的 .images-grid */ .images-grid.images-grid--large { grid-template-columns: repeat(var(--duo-grid-large-cols), 1fr); } .images-grid-item { position: relative; aspect-ratio: 1 / 1; border-radius: 0; overflow: hidden; cursor: pointer; background: var(--color-bg-hover); } .images-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.15s; /* 触摸全部交给外层 .images-grid-item 处理：禁 iOS/Android 长按图片的原生放大/预览/拖拽 */ pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } /* :not([data-input="touch"]) — 触摸输入时不放大（hover-capable 触屏/模拟器上避免触摸触发 hover 效果） */ html:not([data-input="touch"]) .images-grid-item:hover img{ transform: scale(1.05); } /* Hover overlay */ .images-grid-overlay { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 8px; opacity: 0; transition: opacity 0.15s; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 50%); } html:not([data-input="touch"]) .images-grid-item:hover .images-grid-overlay{ opacity: 1; pointer-events: auto; } .images-grid-action { width: 32px; height: 32px; border: none; border-radius: 50%; corner-shape: round; background: rgba(255, 255, 255, 0.85); color: #222; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.12s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } html:not([data-input="touch"]) .images-grid-action:hover{ background: #fff; } .images-grid-action:active { background: #fff; } .images-grid-action svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } /* Hide hover overlay on touch devices */ @media (hover: none) { .images-grid-overlay { display: none !important; } } /* Empty state */ .images-grid-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--color-text-tertiary); text-align: center; } .images-grid-empty-icon { width: 48px; height: 48px; margin-bottom: 16px; opacity: var(--dim); } .images-grid-empty-icon svg { width: 48px; height: 48px; } .images-grid-empty p { margin: 0; font-size: 14px; line-height: 1.5; } /* ========================= Fullscreen Editor / Preview ========================= */ .images-editor { position: fixed; inset: 0; z-index: 9999; background: #f5f5f5; display: flex; flex-direction: column; } .images-editor[hidden] { display: none !important; } /* Toolbar */ .images-editor-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; flex-shrink: 0; z-index: 10; } .images-editor-toolbar-left, .images-editor-toolbar-right { display: flex; align-items: center; gap: 8px; } /* Close button */ /* 框/图标走单一真源 .duo-close-lg(36圆/16,DOM 上并列);此处只留本场景的底色/字色 */ .images-editor-close { background: var(--color-bg-card); color: #555; } html:not([data-input="touch"]) .images-editor-close:hover{ background: rgba(0, 0, 0, 0.12); } .images-editor-close:active { background: rgba(0, 0, 0, 0.12); } /* 图标尺寸走 .duo-close-lg svg{16}(单一真源) */ /* Three-dot more button (no circle, flat) */ .images-editor-more-wrap { position: relative; } .images-editor-more-btn { width: 36px; height: 36px; border: none; background: none; border-radius: calc(8px * var(--corner-k)); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #555; padding: 0; transition: background 0.15s; } html:not([data-input="touch"]) .images-editor-more-btn:hover{ background: var(--color-bg-card); } .images-editor-more-btn:active { background: var(--color-bg-card); } .images-editor-more-btn svg { width: var(--icon-size); height: var(--icon-size); } /* Dropdown menu */ .images-editor-more-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--color-bg-panel); border-radius: calc(10px * var(--corner-k)); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); padding: 4px 0; z-index: 20; } .images-editor-more-menu[hidden] { display: none; } .images-editor-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: none; font-size: 14px; color: var(--color-text); cursor: pointer; text-align: left; } html:not([data-input="touch"]) .images-editor-menu-item:hover{ background: var(--color-bg-hover); } .images-editor-menu-item:active { background: var(--color-bg-hover); } .images-editor-menu-icon { width: var(--icon-size); height: var(--icon-size); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #555; } .images-editor-menu-icon svg { width: var(--icon-size); height: var(--icon-size); } /* Pill action buttons (Save / Share) */ .images-editor-action-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 20px; corner-shape: round; background: var(--color-bg-panel); color: var(--color-text); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; } html:not([data-input="touch"]) .images-editor-action-btn:hover{ background: var(--color-bg-hover); border-color: rgba(0, 0, 0, 0.2); } .images-editor-action-btn:active { background: var(--color-bg-hover); border-color: rgba(0, 0, 0, 0.2); } .images-editor-action-btn svg { width: var(--icon-size-sm); height: var(--icon-size-sm); flex-shrink: 0; } .images-editor-action-btn--primary { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } html:not([data-input="touch"]) .images-editor-action-btn--primary:hover{ background: #333; border-color: #333; } .images-editor-action-btn--primary:active { background: #333; border-color: #333; } /* Body: main image + thumbnail strip */ .images-editor-body { flex: 1; display: flex; min-height: 0; overflow: hidden; } /* Main image area */ .images-editor-main { position: relative; /* the markup layer is placed over the picture's box */ flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 40px 16px; min-width: 0; } .images-editor-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); } /* Right thumbnail strip */ .images-editor-thumbs { width: 64px; flex-shrink: 0; overflow-y: auto; padding: 0 12px 16px 0; display: flex; flex-direction: column; gap: 10px; align-items: center; scrollbar-width: none; } .images-editor-thumbs::-webkit-scrollbar { display: none; } .images-editor-thumb { width: 42px; height: 42px; flex-shrink: 0; border-radius: calc(6px * var(--corner-k)); overflow: hidden; cursor: pointer; border: none; position: relative; transition: opacity 0.2s; background: var(--color-bg-hover); } /* White overlay mask on non-active thumbs */ .images-editor-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.55); border-radius: calc(6px * var(--corner-k)); pointer-events: none; transition: opacity 0.2s; } .images-editor-thumb.active::after { opacity: 0; } html:not([data-input="touch"]) .images-editor-thumb:hover:not(.active)::after, html:not([data-input="touch"]) .images-editor-thumb:active:not(.active)::after{ opacity: 0.3; } /* Active thumb is slightly larger */ .images-editor-thumb.active { width: 48px; height: 48px; } /* Spacer: allows first/last thumb to center vertically */ .images-editor-thumbs-spacer { flex-shrink: 0; width: 1px; pointer-events: none; } .images-editor-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Footer: composer */ .images-editor-footer { flex-shrink: 0; padding: 0 20px 20px; max-width: 700px; width: 85%; margin: 0 auto; box-sizing: border-box; } .images-editor-footer .images-composer-bar { margin-bottom: 0; } /* Editor composer pill: transparent to blend with editor background */ .images-editor-footer .composer-pill { background: transparent; } /* ========================= Responsive ========================= */ @media (max-width: 1024px) { :root { --duo-grid-dense-cols: 5; --duo-grid-large-cols: 3; } } @media (max-width: 768px), (max-height: 500px) { .images-title-row { padding: 120px 0 16px 21px; /* matches project-title-row mobile */ } :root { --duo-grid-dense-cols: 3; --duo-grid-large-cols: 2; } .images-grid { width: 100%; gap: 4px; padding-bottom: 60px; /* 底部留白（移动端），与项目页一致 */ } .images-grid.images-grid--large { grid-template-columns: repeat(2, 1fr); } .images-view-toggle { width: 100%; } /* Editor mobile */ .images-editor-toolbar { padding: 8px 12px; } .images-editor-action-btn span { display: none; } .images-editor-action-btn { padding: 8px; border-radius: 50%; corner-shape: round; width: 36px; height: 36px; justify-content: center; } /* Body: switch to column layout (image on top, thumbs below) */ .images-editor-body { flex-direction: column; } .images-editor-main { padding: 0; } .images-editor-image { box-shadow: none; border-radius: 0; max-width: 100%; width: 100%; } /* Thumbs: horizontal strip at bottom, close to image */ .images-editor-thumbs { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 4px 12px; gap: 8px; justify-content: center; } .images-editor-thumb { width: 34px; height: 34px; } .images-editor-thumb.active { width: 38px; height: 38px; } /* Spacers: horizontal centering instead of vertical */ .images-editor-thumbs-spacer { height: 1px; width: 0; } .images-editor-footer { width: 95%; padding: 12px 12px 12px; } /* Double-tap zoom: hide everything except the image */ .images-editor.is-zoomed .images-editor-toolbar, .images-editor.is-zoomed .images-editor-thumbs, .images-editor.is-zoomed .images-editor-footer { display: none !important; } .images-editor.is-zoomed { background: #000; } .images-editor.is-zoomed .images-editor-body { flex-direction: column; } .images-editor.is-zoomed .images-editor-main { padding: 0; flex: 1; } .images-editor.is-zoomed .images-editor-image { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; box-shadow: none; } } /* ========================= Dark Mode ========================= */ /* --- Images Gallery Page --- */ .dark-mode .images-view-page { background: #212121; } .dark-mode .images-title-icon { color: #fff; } .dark-mode .images-view-title { color: rgba(255,255,255,0.9); } .dark-mode .images-composer-bar .plus-icon { color: rgba(255,255,255,0.8); } /* --- Images Editor / Preview --- */ .dark-mode .images-editor { background: #1a1a1a; } .dark-mode .images-editor-close { color: rgba(255,255,255,0.6); } html:not([data-input="touch"]) .dark-mode .images-editor-close:hover{ background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); } .dark-mode .images-editor-close:active { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); } .dark-mode .images-editor-more-btn { color: rgba(255,255,255,0.6); } .dark-mode .images-editor-more-menu { box-shadow: 0 4px 20px rgba(0,0,0,0.4); } .dark-mode .images-editor-menu-item { color: rgba(255,255,255,0.85); } .dark-mode .images-editor-menu-icon { color: rgba(255,255,255,0.5); } .dark-mode .images-editor-action-btn { background: transparent; border-color: var(--color-border); color: rgba(255,255,255,0.85); } html:not([data-input="touch"]) .dark-mode .images-editor-action-btn:hover{ border-color: rgba(255,255,255,0.25); } .dark-mode .images-editor-action-btn:active { border-color: rgba(255,255,255,0.25); } .dark-mode .images-editor-action-btn--primary { background: #fff; color: #1a1a1a; border-color: #fff; } html:not([data-input="touch"]) .dark-mode .images-editor-action-btn--primary:hover{ background: #e5e5e5; border-color: #e5e5e5; } .dark-mode .images-editor-action-btn--primary:active { background: #e5e5e5; border-color: #e5e5e5; } .dark-mode .images-editor-image { box-shadow: 0 2px 20px rgba(0,0,0,0.3); } .dark-mode .images-editor-thumb::after { background: rgba(0,0,0,0.5); } .dark-mode .images-editor-footer .composer-pill { background: transparent; } .dark-mode .images-editor-footer .composer-bar { background: transparent; border-top-color: transparent; } /* ========================= Project filter dropdown (mirrors .version-dropdown style) 高度与左侧 34px 网格切换图标平齐，右上角对齐网格右边缘 ========================= */ .images-filter { position: relative; flex-shrink: 0; margin-left: auto; /* 始终靠右：网格切换图标在无图片时隐藏，filter 仍保持原位 */ } .images-filter-trigger { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 12px; border: none; background: transparent; color: var(--color-text); cursor: pointer; border-radius: calc(8px * var(--corner-k)); transition: background 0.15s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } html:not([data-input="touch"]) .images-filter-trigger:hover{ background: var(--color-bg-hover); } .images-filter-trigger:active, .images-filter.open .images-filter-trigger { background: var(--color-bg-hover); } .images-filter-dot { width: 9px; height: 9px; border-radius: 50%; corner-shape: round; flex-shrink: 0; } .images-filter-dot[hidden] { display: none; } .images-filter-label { font-size: 14px; font-weight: 500; pointer-events: none; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .images-filter-chevron { display: flex; align-items: center; color: var(--color-text-secondary); transition: transform 0.2s ease; } .images-filter-chevron svg { width: var(--chevron-trigger-size); height: var(--chevron-trigger-size); display: block; } .images-filter.open .images-filter-chevron { transform: rotate(180deg); } .images-filter-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; max-height: 60vh; overflow-y: auto; background: var(--color-bg-panel); border-radius: calc(12px * var(--corner-k)); box-shadow: 0 4px 24px rgba(0,0,0,0.12); padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 200; /* 滚动条走 .duo-scroll 模板（元素已加该 class） */ } .images-filter.open .images-filter-menu { opacity: 1; visibility: visible; transform: translateY(0); } .images-filter-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; font-size: 14px; color: var(--color-text); cursor: pointer; transition: background 0.1s ease; } html:not([data-input="touch"]) .images-filter-item:hover{ background: var(--color-bg-hover); } .images-filter-item:active { background: var(--color-bg-hover); } .images-filter-item-left { display: flex; align-items: center; gap: 8px; min-width: 0; } .images-filter-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .images-filter-item-dot { width: 9px; height: 9px; border-radius: 50%; corner-shape: round; flex-shrink: 0; } .images-filter-check { display: none; align-items: center; color: var(--color-text); line-height: 0; flex-shrink: 0; } .images-filter-check svg { width: var(--icon-size); height: var(--icon-size); } .images-filter-item.selected .images-filter-check { display: inline-flex; } /* Grid hover delete button — 右上角，沿用 .images-grid-action 尺寸/颜色 */ .images-grid-action--delete { position: absolute; top: 8px; right: 8px; } /* icon-trash 的 viewBox 内留白比 download/share 多 → 同 16px 盒子下视觉偏小，单独放大到 18px 视觉对齐 */ .images-grid-action--delete svg { width: var(--icon-size); height: var(--icon-size); } /* Editor "Delete image" menu item (danger) */ .images-editor-menu-item--danger { color: #e03e3e; } .images-editor-menu-item--danger .images-editor-menu-icon { color: #e03e3e; } /* ---- Dark mode ---- */ .dark-mode .images-filter-menu { box-shadow: 0 4px 24px rgba(0,0,0,0.4); /* 暗色滚动条走 .duo-scroll 模板 */ } html:not([data-input="touch"]) .dark-mode .images-filter-trigger:hover{ background: rgba(255,255,255,0.06); } html:not([data-input="touch"]) .dark-mode .images-filter-item:hover{ background: rgba(255,255,255,0.06); } .dark-mode .images-filter-trigger:active, .dark-mode .images-filter.open .images-filter-trigger { background: rgba(255,255,255,0.06); } .dark-mode .images-filter-item:active { background: rgba(255,255,255,0.06); } .dark-mode .images-editor-menu-item--danger, .dark-mode .images-editor-menu-item--danger .images-editor-menu-icon { color: #ff6b6b; } /* ========================= 批量选择模式（相册式勾选框 + 选中态 + 底部浮动条） ========================= */ /* 每图左上角勾选框。★这一族(圆圈/选中态/底部横条)是【全站唯一一份】相册式多选的画法：宿主有两个 —— 图片页的 .images-grid-item，和总览网格的瓦片 .studio-pf-picker-cell(文件页)。所以每条规则都写成"两个宿主一条规则"，别复制第二份出去。 */ .images-grid-check { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; corner-shape: round; border: 2px solid #fff; background: rgba(0, 0, 0, 0.35); color: transparent; /* 勾隐藏，直到选中 */ display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; opacity: 0; /* 默认隐藏 + 不可点；hover 或选择模式才浮现 */ pointer-events: none; transition: opacity 0.15s, background 0.12s; z-index: 3; -webkit-tap-highlight-color: transparent; } .images-grid-check svg { width: var(--icon-size-sm); height: var(--icon-size-sm); display: block; } html:not([data-input="touch"]) .images-grid-item:hover .images-grid-check, html:not([data-input="touch"]) .studio-pf-picker-cell:hover .images-grid-check { opacity: 1; pointer-events: auto; } /* 选择模式：所有勾选框浮现（桌面 hover / 手机长按进入后）；隐藏底部单图操作浮层 */ .images-grid.selecting .images-grid-check, .studio-pf-picker-grid.selecting .images-grid-check { opacity: 1; pointer-events: auto; } .images-grid.selecting .images-grid-overlay { display: none; } /* 触摸设备防止长按弹出系统"保存图片"菜单（让长按用于进入选择模式） */ /* 第二个宿主只写文件页那张网格：别的总览网格没开多选，长按在那里仍是系统的事，不该被这条改掉 */ .images-grid-item, #filesViewPage .studio-pf-picker-cell { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* 选中态：勾选框填充黑底白勾（沿用 primary 配色），并显示选中描边 */ .images-grid-item.selected .images-grid-check, .images-grid-check.is-on { background: #1a1a1a; border-color: #fff; color: #fff; opacity: 1; } .images-grid-item.selected::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; /* 选中描边：细 + 半透明，避免一排全黑边压人（勾选框才是主指示） */ box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4); } .dark-mode .images-grid-item.selected .images-grid-check, .dark-mode .images-grid-check.is-on { background: #fff; border-color: #1a1a1a; color: #1a1a1a; } .dark-mode .images-grid-item.selected::after { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); } /* 底部浮动操作条 */ .images-select-bar { position: fixed; /* Centred on the CONTENT area, not the window: the sidebar takes the left edge on desktop, so a window-centred bar sits left of the middle of what the person is looking at (owner 2026-09-05). Same follow rule as .chat-header. */ left: 50%; bottom: 24px; transform: translateX(-50%); transition: left 0.3s cubic-bezier(0.2, 0, 0, 1); display: none; /* 隐藏，直到 .show */ align-items: center; gap: 8px; padding: 10px 16px; background: var(--color-bg-panel); border-radius: 999px; corner-shape: round; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18); /* 长按选东西就在查看器里的网格上做,所以条子必须压过查看器(owner 2026-09-07:整个作品集里它都在下层); 它自己叫出来的“移到项目”/删除确认在 dialog 那一档、仍在它之上(见 --z-* 唯一源)。 */ z-index: var(--z-selectbar); max-width: 92vw; flex-wrap: nowrap; } .images-select-bar.show { display: flex; } @media (min-width: 769px) and (min-height: 501px) { .images-select-bar { left: calc(var(--sidebar-width, 250px) + (100vw - var(--sidebar-width, 250px)) / 2); } body:has(.chat-sidebar.collapsed) .images-select-bar { left: calc(var(--sidebar-width-collapsed, 60px) + (100vw - var(--sidebar-width-collapsed, 60px)) / 2); } } .images-select-count { font-size: 13px; font-weight: 500; color: var(--color-text); margin-right: 4px; white-space: nowrap; flex-shrink: 0; } .dark-mode .images-select-bar { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5); } /* 操作条按钮：图标 + 文字；文字永不换行（避免撑高变形） */ .images-select-bar .select-bar-btn { gap: 6px; white-space: nowrap; flex-shrink: 0; } /* 这次选中用不上的动作（如"移到项目"只对聊天里的附件成立）：留在原位变淡，不许消失 —— 横条会跳 */ .images-select-bar .select-bar-btn[disabled] { opacity: var(--dim); cursor: default; } .select-bar-ico { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; } /* !important 覆盖图标 snippet 自带的 inline/attr 尺寸（同 .action-icon svg 的做法） */ .select-bar-ico svg { width: var(--icon-size-sm) !important; height: var(--icon-size-sm) !important; display: block; } /* 关闭(X) viewBox 0 0 14 14、stroke 较粗，等盒子下显得偏大 → 调小与其它视觉一致 */ .images-select-bar [data-act="cancel"] .select-bar-ico svg { width: var(--icon-size-sm) !important; height: var(--icon-size-sm) !important; } /* 计数里的数字：固定宽度 + 等宽数字，1–99 位数变化不撑动横条 */ .images-select-n { display: inline-block; min-width: 1.5em; text-align: center; font-variant-numeric: tabular-nums; } /* 全选按钮：默认 = 移动到项目同色（primary 填充）；已全选 → 描边中性态（再按取消全选） */ .images-select-bar [data-act="all"].all-selected { background: transparent; border: 1px solid var(--color-shadow); color: rgba(0, 0, 0, 0.7); } .dark-mode .images-select-bar [data-act="all"].all-selected, .dark-mode-active .images-select-bar [data-act="all"].all-selected { background: transparent; border: 1px solid var(--color-shadow); color: rgba(255, 255, 255, 0.7); } /* 窄屏（手机）：只显示图标，语言无关、保证单行不变形 */ @media (max-width: 560px) { .images-select-bar { gap: 8px; padding: 8px 12px; max-width: calc(100vw - 20px); } .images-select-bar .select-bar-label { display: none; } /* 圆圈 + 图标尺寸对齐图片页输入框左侧 plus-button：36px 圆 + 20px 图标 */ .images-select-bar .select-bar-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; corner-shape: round; } .images-select-bar .select-bar-ico svg { width: var(--icon-size) !important; height: var(--icon-size) !important; } /* viewBox 带留白的图标视觉放大，使字形≈20px 与 image 图标一致（close 本就合适，不动） */ .images-select-bar [data-act="all"] .select-bar-ico svg { width: var(--icon-size) !important; height: var(--icon-size) !important; } /* check-circle: viewBox -2 -2 28 28 */ .images-select-bar [data-act="move"] .select-bar-ico svg { width: var(--icon-size) !important; height: var(--icon-size) !important; } /* folder-move: viewBox 1 1 22 22 */ .images-select-bar [data-act="cancel"] .select-bar-ico svg { width: var(--icon-size-sm) !important; height: var(--icon-size-sm) !important; } /* close(X) 偏粗，调小与其它视觉一致 */ .images-select-count { font-size: 12px; margin-right: 2px; } } /* 移出项目（不归类）列表项：与普通项目项一致，图标用移除色提示 */ .move-to-project-remove .project-icon { color: var(--sidebar-text-sub); } /* 强制 remove 图标盒子与项目文件夹图标(icon-folder 22px)一致，避免偏大/没对齐 */ .move-to-project-remove .project-icon svg { width: var(--icon-size) !important; height: var(--icon-size) !important; } /* Mark-and-fix (owner 2026-08-28): tools row (rect / ellipse / lasso / picture icon = whole-picture row) inside the composer-bar. Once anything is marked the rows REPLACE the composer (same .input-wrapper box = same width) and ONE Send button (the page's primary action) stands at the end; nothing marked = the composer, exactly as before. Rows are composer pills (the page's own classes); the x is the studio circle (plus-button source) seated on the right. Colours come from the sources (light + .dark-mode). On touch, the layer only takes the finger while a tool is lit. */ .images-editor-markup { display: flex; justify-content: center; padding-top: 8px; } .images-editor-markup-rows { flex-direction: column; padding: 10px 0; display: none; } .images-composer-bar.has-markup > .images-editor-markup-rows { display: flex; } .images-composer-bar.has-markup > .input-wrapper:not(.images-editor-markup-rows) { display: none; } .images-editor-markup-rows .studio-markup-notes { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; } /* the studio list carries a 12px top margin for its dialog; here the wrapper already pads 10 like the composer (measured 22 vs 10) */ /* the Send cell: the composer's own arrow disc (chat-button, has-text = black), standing in flow as the last grid cell after the rows */ .images-editor-markup-send { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 17px; display: flex; align-items: center; } /* right after the last row on its centre line; 17 = the 10px column gap + the 7px circle inset, so in the two-column grid it lands exactly on the next column's number-circle axis */ .images-editor-markup-send .chat-button { position: static; } .images-editor-markup-rows .plus-button.studio-markup-num { display: flex; align-items: center; justify-content: center; cursor: default; } html[data-input="touch"] .images-editor:not(:has(.studio-markup-tools.is-armed)) .images-editor-markup-layer { pointer-events: none; } @media (min-width: 769px) and (min-height: 501px) { /* Reserve the scrollbar's width whether or not it is showing. These library pages (Images, Files) fill as their content loads, so without this the moment the content outgrows the viewport the bar appears and shoves everything left by its width. Desktop only: phones overlay their bars, so reserving there would just be a permanent dead strip. */ .images-view-page { scrollbar-gutter: stable; } /* desktop: two rows per line at the composer pill's OWN width (owner 2026-08-28: not shorter). Pure arithmetic, nothing measured: a column = 85% of the bar = exactly the pill (the pill fills an 85% .input-wrapper); the wrapper is two of those plus the 10px gap, capped at two 700 pills, and steps out of the footer box centred by translate. */ .images-editor-markup-rows:not(.is-single) { width: calc(170% + 10px); max-width: 1410px; margin-left: 50%; transform: translateX(-50%); } .images-editor-markup-rows:not(.is-single) .studio-markup-notes { grid-template-columns: 1fr 1fr; } /* one row alone keeps the composer's centred box (owner 2026-08-28) */ } /* The tools row and the rows follow the picture's centre, not the page's: --markup-shift = picture centre - bar centre, measured in markLayerFit */ .images-editor-markup, .images-editor-markup-rows { position: relative; left: var(--markup-shift, 0px); }