/* ========================================================== portfolio-preview.css — 多媒体预览与安全模态框 (Preview Layer) ------------------------------------------------------------ 物理拆分层, 不使用 CSS @import, 在 file:// 协议下零跨域错误。 在 index.html 中按顺序引入 (后加载覆盖前加载, 15 CSS): 1. base.css (基础层: 重置 + 变量 + 纸纹 + scrollbar) 2. scene.css (场景层: 海草 + 潜水员 + 标题 + 进场) 3. portfolio-layout.css (作品集骨架) 4. portfolio-grid.css (作品集卡片栅格) 5. resume.css (简历, 含 experience-tag 八边形化) 6. portfolio-preview.css ← 本文件 (预览层: Lightbox + PDF 模态框 + 画廊 + 缩放 + Loading) 7. portfolio-x1-sidebar.css (X1 侧栏: Markdown + modal) 8. contact.css (联系表单 + 社交) 9. life-layout.css (兴趣卡骨架: 4 张核心卡 + 散落 Polaroid) 10. life-modal.css (通用 modal: 4 主题 + 流体特效 + 响应式) 11. life-marathon.css (Marathon 列表 + 节点 + 响应式) ← 原 lifeCollage.css 一部分 12. life-travel.css (Travel 地图 + 时间轴 + 响应式) ← 原 lifeCollage.css 一部分 13. life-photography.css (Photography 骨架位, Backlog #27 待实现) 14. life-finance.css (Finance 骨架位, Backlog #27 待实现) 15. responsive.css (全局响应兜底) 完整文件结构与职责归属见 [WORKFLOW.md §4](./WORKFLOW.md). (历史 portfolio.css 已删除) 包含: 1. Lightbox 悬浮窗 · .image-lightbox / .image-lightbox.active / .image-lightbox-img · .image-lightbox-close / .image-lightbox-caption 2. PDF 点击反馈 (项目卡按下时) · .project-card:active 3. PDF 加载进度条 (顶部 3px 细条) · .pdf-loading-bar (4-6px 厚度纸带 Loading Bar) 4. PDF 模态框 (安全防截屏深色卡纸) · .pdf-modal-overlay / .active · .pdf-modal-container + 八角形刻刀切角 (16px) · .pdf-modal-container.theme-* 6 种主题色 (与项目卡严格同步) · .pdf-modal-container::before 顶部描边高亮 + ::after 切面细线 · .pdf-modal-header / #pdf-modal-title / .pdf-close-button · .pdf-modal-body · #pdf-canvas-container + .zoomed-in / .dragging 鼠标态 5. PDF 画廊 (page images) · .pdf-gallery-wrapper / .pdf-gallery-image · .pdf-gallery-nav / .pdf-gallery-prev / .pdf-gallery-next · .pdf-gallery-info 6. PDF 缩放等级 + 控件 (右下角浮窗) · .zoom-level (显示当前缩放比) · .zoom-controls (缩放按钮组) 7. 响应式断点 (@media max-width: 1024 / 768 / 480 / 360) 【纸雕铁律】 - 不透明: .pdf-modal-container / .image-lightbox 100% 不透明深色卡纸 · PDF 容器: background #04161d (深海墨蓝) · PDF overlay: background rgba(2, 8, 12, 0.96) (仅 overlay 半透明, 容器不透明) - 硬边: 模态框 / 卡片 / 画廊按钮全部直角 (border-radius: 0), 只有 close 圆角 · .image-lightbox-close 保留 50% 圆形 (X 关闭按钮) · .image-lightbox-caption 保留 6px 微圆 (小标签) - 物理投影: · .pdf-modal-container: 0 8px 20px + 0 40px 80px 双层硬投影 · .image-lightbox-img: 0 20px 60px · .pdf-loading-bar: 0 0 8px #00f2fe 青色发光 - 纸带厚度 4-6px: · .pdf-loading-bar height: 3px (顶部细条) · .pdf-modal-container::before gradient 4.5px (顶部描边主色纸带) · .pdf-modal-header padding: 15px 24px (header 上下纸带) 【关于 .watermark-overlay】 原始需求提及"防截屏/防盗用的水印层", 但代码库中无独立 .watermark-overlay 选择器. 水印通过 .project-card::before { content: attr(data-watermark); } (见 portfolio-grid.css §4) 直接渲染在卡片上, PDF 模态框打开后通过 .pdf-modal-container 顶部的 4.5px 描边主色 + 八角形 clip-path 共同形成 "防伪"视觉, 配合 PDF.js 渲染 (而非图片) 防止右键另存. ========================================================== */ /* ========================================================== 1. Lightbox 悬浮窗 (图片大图查看器) ========================================================== */ .image-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 99999999; display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; cursor: zoom-out; } .image-lightbox.active { opacity: 1; visibility: visible; } .image-lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; /* 大图允许微圆, 让视觉柔和 */ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .image-lightbox.active .image-lightbox-img { transform: scale(1); } .image-lightbox-close { position: absolute; top: 20px; right: 30px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 28px; width: 44px; height: 44px; border-radius: 50%; /* X 按钮允许圆形 (与卡片直角区别) */ cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 100000000; } .image-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); } .image-lightbox-caption { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.8); font-size: 14px; letter-spacing: 0.1em; padding: 8px 16px; background: rgba(0, 0, 0, 0.5); border-radius: 6px; /* 小标签允许微圆 */ text-align: center; } /* ========================================================== 2. PDF 点击反馈 (项目卡按下时) — 缩放 + 加深投影 ========================================================== */ .project-card { transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease !important; } .project-card:active { transform: scale(0.96) translateY(2px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; filter: brightness(0.8); } /* ========================================================== 3. PDF 加载进度条 (顶部 3px 细条 — 纸雕 Loading Bar) ------------------------------------------------------------ 4-6px 厚度纸带 (paper band) 设计: top:0 / height:3px / 青色发光, 通过 width 0%→100% 过渡表达加载进度. 全屏 fixed 顶层 z-index. ========================================================== */ .pdf-loading-bar { position: fixed !important; top: 0 !important; left: 0 !important; width: 0%; height: 3px !important; background: linear-gradient(90deg, #00f2fe, #4facfe) !important; z-index: 1000001 !important; transition: width 0.4s ease !important; box-shadow: 0 0 8px #00f2fe !important; } /* ========================================================== 4. PDF 模态框 (深色卡纸 — 100% 不透明) ------------------------------------------------------------ 4.1 Overlay 全屏遮罩 4.2 Container 八角形刻刀切角 (16px 斜切, 与卡片 12px 区分) 4.3 6 种主题色变体 (theme-monument / perception / sustainability / community / ai / other), 与项目卡 .project-card:has(.tag-*) 一一对应 ========================================================== */ /* 4.1 PDF Overlay + 全屏遮罩 */ .pdf-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(2, 8, 12, 0.96) !important; z-index: 9999999 !important; display: none !important; justify-content: center !important; align-items: center !important; opacity: 0; transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; } .pdf-modal-overlay.active { opacity: 1 !important; display: flex !important; cursor: auto !important; } .pdf-modal-overlay.active * { cursor: auto !important; } .pdf-modal-overlay.active .pdf-modal-header button, .pdf-modal-overlay.active .pdf-gallery-nav { cursor: pointer !important; } /* 4.2 PDF Container — 八角形刻刀切角 (16px) */ .pdf-modal-container { width: 85vw !important; height: 85vh !important; background: #04161d !important; /* 深色卡纸: 100% 不透明 */ border: none !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; overflow: visible !important; position: relative !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.85), 0 40px 80px rgba(0, 3, 5, 0.95) !important; /* 双层硬投影 */ transform: translateY(30px) scale(0.95) !important; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important; clip-path: polygon( 16px 0%, calc(100% - 16px) 0%, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0% calc(100% - 16px), 0% 16px ) !important; /* 顶部描边主色 (青色高光) — 模拟卡纸顶面"受光" */ --card-accent: rgba(0, 242, 254, 0.28); transform: translateZ(0); will-change: transform; } .pdf-modal-overlay.active .pdf-modal-container { transform: translateY(0) scale(1) !important; } /* 4.3 主题色变体 — 与 .project-card:has(.tag-*) 严格同步 */ .pdf-modal-container.theme-monument { --card-accent: rgba(179, 21, 21, 0.7) !important; } .pdf-modal-container.theme-perception { --card-accent: rgba(255, 159, 67, 0.7) !important; } .pdf-modal-container.theme-sustainability { --card-accent: rgba(16, 172, 132, 0.7) !important; } .pdf-modal-container.theme-community { --card-accent: rgba(131, 149, 36, 0.7) !important; } .pdf-modal-container.theme-ai { --card-accent: rgba(187, 128, 255, 0.7) !important; } .pdf-modal-container.theme-other { --card-accent: rgba(200, 200, 200, 0.5) !important; } /* 4.4 顶部描边高亮 (与 .pdf-modal-container clip-path 重合, 模拟纸带顶面"受光") */ .pdf-modal-container::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--card-accent) 0px, var(--card-accent) 4.5px, /* 4-6px 厚度纸带 */ transparent 4.5px, transparent 100% ); clip-path: polygon( 0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px ); z-index: 3; } /* 4.5 纸张切面细线 (clip-path 后重描, 让八角形边缘清晰可见) */ .pdf-modal-container::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); clip-path: inherit; z-index: 2; } /* ========================================================== 5. PDF Header / Title / Close (模态框顶部条) ========================================================== */ .pdf-modal-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 15px 24px !important; /* header 上下纸带 15px */ background: rgba(255, 255, 255, 0.02) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; flex-shrink: 0; } #pdf-modal-title { margin: 0 !important; font-size: 14px !important; color: #ffffff !important; font-weight: 500 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } .pdf-close-button { background: none !important; border: none !important; color: rgba(255, 255, 255, 0.4) !important; font-size: 24px !important; cursor: pointer !important; transition: color 0.2s ease !important; padding: 0 4px !important; line-height: 1 !important; } .pdf-close-button:hover { color: #ffffff !important; } /* ========================================================== 6. PDF Body + Canvas Container (拖拽 + 缩放) ========================================================== */ .pdf-modal-body { flex: 1 !important; width: 100% !important; height: 100% !important; background: #0d0f13 !important; overflow: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; user-select: none !important; -webkit-user-select: none !important; padding: 20px 0 !important; } #pdf-canvas-container { position: relative; width: 100%; flex: 1; overflow: auto; } #pdf-canvas-container.zoomed-in { cursor: grab; } #pdf-canvas-container.dragging { cursor: grabbing !important; } #pdf-canvas-container canvas, #pdf-canvas-container img, #pdf-canvas-container div { display: block; margin: auto; } /* ========================================================== 7. PDF 画廊 (page images) + 前后导航 ========================================================== */ .pdf-gallery-wrapper { position: relative; width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .pdf-gallery-image { display: block; width: 100%; height: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); border-radius: 4px; /* 单页图允许微圆 */ background: #ffffff; pointer-events: none; user-select: none; -webkit-user-select: none; } .pdf-gallery-nav { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .pdf-gallery-nav button { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.6); font-size: 22px; padding: 30px 14px; /* 30×14 大按钮, 方便点击 */ cursor: pointer; transition: all 0.25s ease; border-radius: 6px; /* 翻页按钮允许微圆 */ line-height: 1; pointer-events: auto; } .pdf-gallery-nav button:hover { background: rgba(0, 242, 254, 0.15); border-color: rgba(0, 242, 254, 0.4); color: #00f2fe; } .pdf-gallery-prev { left: 30px; } .pdf-gallery-next { right: 30px; } .pdf-gallery-info { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: rgba(255, 255, 255, 0.35); letter-spacing: 0.05em; font-family: monospace; pointer-events: none; } /* ========================================================== 8. PDF 缩放等级 + 控件 (右下角浮窗) ========================================================== */ .zoom-level { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; font-size: 12px; font-family: monospace; color: rgba(255, 255, 255, 0.6); background: rgba(20, 30, 40, 0.75); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 0 8px; } .zoom-controls { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 6px; z-index: 1000000; background: rgba(20, 30, 40, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 6px; backdrop-filter: blur(6px); } .zoom-controls button { width: 36px; height: 36px; font-size: 16px; color: rgba(255, 255, 255, 0.7); background: transparent; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .zoom-controls button:hover { background: rgba(0, 242, 254, 0.2); color: #00f2fe; } /* ========================================================== 9. 响应式断点 (Lightbox / PDF / Gallery / Zoom @ 1024 / 768 / 480 / 360) ========================================================== */ /* 9.1 ≥1400px 大屏: PDF 画廊前后导航距离边缘 5% */ @media (min-width: 1400px) { .pdf-gallery-prev { left: 5%; } .pdf-gallery-next { right: 5%; } } /* 9.2 1024px 及以下: PDF 模态框缩小 (撑到 95vw / 88vh) */ @media (max-width: 1024px) { .pdf-modal-container { width: 95vw !important; height: 88vh !important; } } /* 9.3 768px 及以下: Lightbox / Gallery / Zoom 控件紧凑化 */ @media (max-width: 768px) { /* ---- Lightbox ---- */ .image-lightbox { padding: 20px; } .image-lightbox-close { top: 12px; right: 12px; width: 36px; height: 36px; font-size: 22px; } .image-lightbox-caption { font-size: 12px; bottom: 16px; padding: 6px 12px; } /* ---- PDF Gallery ---- */ .pdf-gallery-prev { left: 8px !important; } .pdf-gallery-next { right: 8px !important; } /* ---- Zoom Controls ---- */ .zoom-controls { bottom: 15px; right: 15px; } .zoom-controls button { width: 34px; height: 34px; font-size: 14px; } } /* 9.4 480px 及以下: PDF 模态框全屏, 切角与伪元素关闭 */ @media (max-width: 480px) { .pdf-modal-container { width: 100vw !important; height: 100vh !important; clip-path: none !important; border-radius: 0 !important; } .pdf-modal-container::before, .pdf-modal-container::after { display: none; } }