/* ========================================================== portfolio-x1-sidebar.css — X1 侧边栏与文本交互模块 ------------------------------------------------------------ 物理拆分层, 不使用 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 (预览层: PDF 模态框 + Lightbox + 画廊) 7. portfolio-x1-sidebar.css ← 本文件 (X1 侧栏: Markdown 排版 + 模态交互, 100% 不透明 + !important 已修复) 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. X1 模态模式适配 (x1-modal-mode) · .x1-modal-mode .pdf-modal-* 透明化覆盖 · .x1-modal-mode .pdf-header 隐藏 · .x1-modal-mode 关闭按钮定位 2. X1 优雅文本容器 (主侧栏) · .x1-elegant-text + 自定义滚动条 + ::before 左侧高光线 + ::after 底部反光 · .x1-transparent-exhibit 3. X1 typography · h2 / h3 / p / .en-title / .tech-tag / p.en-para 4. X1 加载态与降级提示 · .x1-modal-loading · .x1-fallback + .x1-fallback-link 5. X1 Markdown 排版 (x1-md-body) · h1 / h2 / h3 / p / p.cn-para / li.cn-li / strong / em · code / pre / ul / li / li li / ::before 嵌套方块 · hr / table (深海蓝绿卡纸底 + 4 边细框线 + 多层硬投影) / th / td · .x1-td-first (第一列行标强调) / 隔行底色 nth-child(even) · 全局浅色强制 (避免浏览器默认黑字) 6. X1 数据卡片 (Data Card) · .x1-data-table / .x1-data-card / .x1-data-label / .x1-data-body · .x1-data-row / .x1-data-key / .x1-data-val / .is-2col · 与 .x1-card-body 嵌套时的紧凑变体 7. X1 颜色票 (Color Token) · .x1-color-token (浅色背景胶囊 + 投影) + :hover 抬升 · .x1-color-swatch (色块描边) + .x1-color-label · .x1-color-chip 兼容旧类名 8. X1 Intro + Cards Grid · .x1-intro + ::after 高亮线 + .x1-intro-quote + .x1-intro-para · .x1-cards-grid (默认 2 列, ≤1279px 改 1 列) · .x1-card-item / 八角形切角 (8px) / hover / .is-open 跨列 · .x1-card-trigger / .x1-card-icon / .x1-card-titles / .x1-card-en / .x1-card-cn / .x1-card-toggle · .x1-card-body 默认折叠 / 展开动画 · .x1-card-body 内 .x1-md-body 缩小字号 9. X1 模态交互模式 (orientation: 横屏 50% 侧栏 / 竖屏 68vh 抽屉) 10. X1 响应式 (1024 / 768 / 480 / 360) · 表格 4 档断点: 11.5 → 11 → 10.5 → 10px · 单元格 padding 4 档: 8/9 → 7/8 → 6/6 → 5/5 px 【纸雕铁律】 - 不透明: .x1-elegant-text background rgba(4, 22, 29, 0.96~0.97) · 横屏模态: 100% 不透明深色卡纸 (opacity 0.96 仅 backdrop-filter 微透) · 竖屏模态: 0.97 不透明, 抽屉式覆盖背景海草 - 硬边: 八角形切角 (8px / 16px / 12px), 大部分无 border-radius · .x1-color-token 允许 4px 微圆 (胶囊感) · .x1-md-body table 允许 6px 微圆 (表头) - 物理投影: · .x1-elegant-text (横屏): 4px 0 24px · .x1-elegant-text (竖屏): 0 8px 32px · .x1-color-token: 0 1px 0 + 0 0 0 1px 暗描边 (纸雕感) · .x1-color-swatch: 0 0 0 1px 白描边 + 0 0 0 2px 暗描边 (切出轮廓) - 纸带厚度 4-6px: · .x1-md-body pre border-left: 3px #00f2fe · .x1-data-card border-left: 3px #00f2fe · .x1-color-token box-shadow: 0 1px 0 (1px 微投影, 配合 0 0 0 1px 暗描边) ========================================================== */ /* ========================================================== 1. X1 模态模式适配 (x1-modal-mode) ------------------------------------------------------------ 让 PDF 模态框在 X1 模式下变成"左侧栏"布局: · PDF 各层都透明化 / 无边框 / 无阴影 · pdf-header 隐藏 (因为 X1 自己提供 header) · 关闭按钮定位到右上角顶层 ========================================================== */ .x1-modal-mode .pdf-modal-mask, .x1-modal-mode .pdf-modal-overlay, .x1-modal-mode .pdf-modal-wrapper, .x1-modal-mode .pdf-modal-window, .x1-modal-mode .pdf-modal-content, .x1-modal-mode .pdf-modal-container, .x1-modal-mode .pdf-modal-header, .x1-modal-mode .pdf-modal-body { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .x1-modal-mode .pdf-header { display: none !important; } /* 只针对 PDF 模态框自身的关闭按钮, 不要用 [class*="close"] 通配 —— 否则会误抓 .x1-close-btn, 把它钉到整个视口右上角 */ .x1-modal-mode .pdf-close-button, .x1-modal-mode #pdf-modal-close-btn { position: fixed !important; top: 24px !important; right: 32px !important; z-index: 99999999 !important; background: rgba(0, 3, 10, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; } /* ========================================================== 2. X1 优雅文本容器 (主侧栏) + 自定义滚动条 + 装饰线 ------------------------------------------------------------ 左侧 6px 渐变高光线 + 底部 100px 反光渐变, 模拟"水族箱光带"效果. ========================================================== */ .x1-elegant-text { width: 100%; height: 100%; padding: 30px 38px; overflow-y: auto; overflow-x: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; color: rgba(245, 247, 250, 0.9); font-size: 14px; line-height: 1.85; letter-spacing: 0.02em; position: relative; background: rgba(4, 22, 29, 0.4); } .x1-elegant-text::-webkit-scrollbar { width: 5px; } .x1-elegant-text::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); } .x1-elegant-text::-webkit-scrollbar-thumb { background: rgba(0, 242, 254, 0.5); border-radius: 2px; } .x1-elegant-text::-webkit-scrollbar-thumb:hover { background: rgba(0, 242, 254, 0.8); } /* 装饰: 左侧高光带 (纸雕光带: 6px 渐变青色) */ .x1-elegant-text::before { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: linear-gradient(180deg, rgba(0, 242, 254, 0.7) 0%, rgba(0, 242, 254, 0.2) 50%, transparent 100%); pointer-events: none; } /* 装饰: 底部反光 (100px 渐变, 让深色卡纸有"被光打到底部"的感觉) */ .x1-elegant-text::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(180deg, transparent 0%, rgba(0, 242, 254, 0.04) 100%); pointer-events: none; } .x1-transparent-exhibit { background: transparent; } /* ========================================================== 3. X1 typography (h2 / h3 / p / en-title / tech-tag / en-para) ========================================================== */ .x1-elegant-text h2 { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(255, 255, 255, 0.95); margin: 0 0 12px 0; font-weight: 300; border-left: 3px solid rgba(0, 242, 254, 0.8); /* 3px 纸带式标题线 */ padding-left: 14px; line-height: 1.3; } .x1-elegant-text .en-title { display: block; font-size: 0.7rem; color: rgba(0, 242, 254, 0.6); letter-spacing: 0.18em; margin-top: 4px; font-weight: 400; text-transform: none; } .x1-elegant-text .tech-tag { display: inline-block; margin: 0 6px 6px 0; padding: 2px 10px; border: 1px solid rgba(0, 242, 254, 0.35); background: rgba(0, 242, 254, 0.08); color: #00f2fe; border-radius: 2px; /* 微型 chip 允许 2px 直角微圆 */ font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; } .x1-elegant-text h3 { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(0, 242, 254, 0.75); margin: 28px 0 10px 0; font-weight: 400; border-left: 2px solid rgba(0, 242, 254, 0.5); padding-left: 10px; } .x1-elegant-text p { color: rgba(245, 247, 250, 0.78); margin: 0 0 16px 0; line-height: 1.9; } .x1-elegant-text p.en-para { color: rgba(0, 242, 254, 0.55); font-style: italic; font-size: 0.85rem; line-height: 1.6; margin-bottom: 20px; } /* ========================================================== 4. X1 加载态 + 降级提示 (modal-loading + x1-fallback) ========================================================== */ .x1-modal-loading { color: rgba(0, 242, 254, 0.7); text-align: center; padding: 40px; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; } .x1-elegant-text .x1-fallback { padding: 20px; background: rgba(255, 159, 67, 0.05); border: 1px solid rgba(255, 159, 67, 0.2); border-radius: 6px; /* 警告框允许微圆 */ margin: 20px 0; } .x1-elegant-text .x1-fallback p { color: rgba(255, 200, 130, 0.85); font-size: 13px; line-height: 1.7; } .x1-elegant-text .x1-fallback code.x1-code { display: block; padding: 12px; background: rgba(0, 0, 0, 0.4); color: rgba(0, 242, 254, 0.85); font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 11px; border-radius: 4px; margin: 10px 0; border-left: 3px solid rgba(0, 242, 254, 0.6); /* 3px 纸带式代码框边 */ } .x1-elegant-text .x1-fallback .x1-fallback-link { display: inline-block; margin-top: 10px; color: #00f2fe; text-decoration: none; font-size: 12px; border-bottom: 1px solid rgba(0, 242, 254, 0.4); padding-bottom: 1px; transition: all 0.2s ease; } .x1-elegant-text .x1-fallback .x1-fallback-link:hover { border-bottom-color: #00f2fe; color: rgba(0, 242, 254, 0.8); } /* ========================================================== 5. X1 Markdown 排版 (x1-md-body) #marathon-svg { /* 占位段, 历史 style.css 已删除 */ } .marathon-line { /* 占位段, 历史 style.css 已删除 */ } ... etc ========================================================== */ .x1-elegant-text .x1-intro, .x1-elegant-text .x1-card-body { font-size: 13.5px; line-height: 1.95; } .x1-elegant-text .x1-intro h1, .x1-elegant-text .x1-card-body h1, .x1-elegant-text .x1-intro h2, .x1-elegant-text .x1-card-body h2, .x1-elegant-text .x1-intro h3, .x1-elegant-text .x1-card-body h3 { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; margin: 24px 0 12px 0; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 400; border-left: 2px solid rgba(0, 242, 254, 0.5); padding-left: 10px; } .x1-elegant-text .x1-intro h1, .x1-elegant-text .x1-card-body h1 { font-size: 16px !important; color: #00f2fe !important; } .x1-elegant-text .x1-intro h2, .x1-elegant-text .x1-card-body h2 { font-size: 13px !important; color: rgba(255,255,255,0.92) !important; } .x1-elegant-text .x1-intro h3, .x1-elegant-text .x1-card-body h3 { font-size: 12px !important; color: rgba(0, 242, 254, 0.75) !important; border-left-color: rgba(0, 242, 254, 0.5); } .x1-elegant-text .x1-intro h1:first-child, .x1-elegant-text .x1-card-body h1:first-child, .x1-elegant-text .x1-intro h2:first-child, .x1-elegant-text .x1-card-body h2:first-child { margin-top: 0; } .x1-elegant-text .x1-intro p, .x1-elegant-text .x1-card-body p { margin: 0 0 14px 0; color: rgba(245, 247, 250, 0.78); line-height: 1.95; } .x1-elegant-text .x1-intro p.cn-para, .x1-elegant-text .x1-card-body p.cn-para { color: rgba(255, 255, 255, 0.42); font-size: 12.5px; font-style: italic; letter-spacing: 0.02em; line-height: 1.85; margin: 0 0 16px 0; padding-left: 10px; border-left: 1px dashed rgba(255, 255, 67, 0.18); } .x1-elegant-text .x1-intro li.cn-li, .x1-elegant-text .x1-card-body li.cn-li { color: rgba(255, 255, 255, 0.5); font-size: 12.5px; font-style: italic; line-height: 1.85; } .x1-elegant-text .x1-intro strong, .x1-elegant-text .x1-card-body strong { color: rgba(0, 242, 254, 0.95) !important; font-weight: 600; letter-spacing: 0.04em; } .x1-elegant-text .x1-intro em, .x1-elegant-text .x1-card-body em { color: rgba(255, 193, 84, 0.95) !important; font-style: italic; } /* 全局修复: X1 区域所有文本强制使用浅色, 避免浏览器默认黑字与深色背景混淆 */ .x1-elegant-text, .x1-elegant-text .x1-intro, .x1-elegant-text .x1-card-body, .x1-elegant-text .x1-intro p, .x1-elegant-text .x1-card-body p, .x1-elegant-text .x1-intro li, .x1-elegant-text .x1-card-body li, .x1-elegant-text .x1-intro td, .x1-elegant-text .x1-card-body td, .x1-elegant-text .x1-intro th, .x1-elegant-text .x1-card-body th, .x1-elegant-text .x1-intro code, .x1-elegant-text .x1-card-body code { color: rgba(245, 247, 250, 0.85); } .x1-elegant-text .x1-intro code, .x1-elegant-text .x1-card-body code { background: rgba(0, 242, 254, 0.1); border: 1px solid rgba(0, 242, 254, 0.25); color: #00f2fe; padding: 1px 6px; border-radius: 3px; /* inline code 允许微圆 */ font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 11.5px; letter-spacing: 0.01em; } .x1-elegant-text .x1-intro pre, .x1-elegant-text .x1-card-body pre { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 242, 254, 0.2); border-left: 3px solid #00f2fe; /* 3px 纸带式代码块边 */ border-radius: 4px; padding: 12px 14px; margin: 14px 0; overflow-x: auto; } .x1-elegant-text .x1-intro pre code, .x1-elegant-text .x1-card-body pre code { background: transparent; border: none; padding: 0; color: rgba(0, 242, 254, 0.85); font-size: 11.5px; line-height: 1.6; } .x1-elegant-text .x1-intro ul, .x1-elegant-text .x1-card-body ul { list-style: none; padding: 0; margin: 8px 0 18px 0; } .x1-elegant-text .x1-intro li, .x1-elegant-text .x1-card-body li { position: relative; padding: 8px 10px 8px 26px; margin-bottom: 6px; line-height: 1.7; color: rgba(245, 247, 250, 0.88); font-size: 12.5px; background: rgba(0, 242, 254, 0.04); border-left: 2px solid rgba(0, 242, 254, 0.4); /* 2px 纸带式 li 边 */ border-radius: 0 4px 4px 0; /* li 右侧允许 4px 微圆 */ word-wrap: break-word; overflow-wrap: break-word; } /* 嵌套 bullet: 不再加 padding/背景, 保持紧凑 */ .x1-elegant-text .x1-intro li li, .x1-elegant-text .x1-card-body li li { padding: 3px 6px 3px 16px; margin: 3px 0; background: transparent; border-left: 1px dashed rgba(0, 242, 254, 0.3); /* 嵌套用 1px 虚线 */ font-size: 12px; line-height: 1.6; } /* 顶级 bullet 前的青色 45° 旋转小方块 (纸雕 cube) Backlog #24 修复: Backlog #11.1 把 .x1-md-body X 错误替换为 .x1-intro, .x1-card-body X, 让 .x1-intro 元素本身被错误应用 8x8 + rotate(45deg) + cyan background, 整个 intro 容器变成小菱形 (用户红圈"奇怪区域"), intro 内容 (blockquote 简介) 被裁剪到 8x8 看不见. 正确写法: .x1-intro X, .x1-card-body X — 让子选择器 X 跟着两个容器 */ .x1-elegant-text .x1-intro > ul > li::before, .x1-elegant-text .x1-intro ul li::before, .x1-elegant-text .x1-card-body > ul > li::before, .x1-elegant-text .x1-card-body ul li::before { content: ""; position: absolute; left: 10px; top: 14px; width: 8px; height: 8px; background: rgba(0, 242, 254, 0.85); border: 1px solid rgba(0, 242, 254, 1); transform: rotate(45deg); /* 45° 旋转, 菱形 cube */ box-shadow: 0 0 6px rgba(0, 242, 254, 0.4); } /* 嵌套 bullet: 小圆点 */ .x1-elegant-text .x1-intro li li::before, .x1-elegant-text .x1-card-body li li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 242, 254, 0.6); transform: none; box-shadow: none; } /* 嵌套的 ul: 收紧缩进 */ .x1-elegant-text .x1-intro ul ul, .x1-elegant-text .x1-card-body ul ul { margin: 4px 0 0 4px; } .x1-elegant-text .x1-intro hr, .x1-elegant-text .x1-card-body hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.3), transparent); margin: 20px 0; } /* X1 表格重设计 (铁律 #1 100% 不透明 + 铁律 #2 硬边 + 铁律 #4 纯色): - 选择器用 .x1-elegant-text table (X1 实际 HTML 结构是 .x1-card-body > .x1-table-wrap > table, 没有 .x1-md-body 包装层, 旧选择器 .x1-md-body table 全部 dead code) - 表底色: 实色 #0a2530 (深海蓝绿, 100% 不透明, 铁律 #1) - 表头底色: 实色 #1a3a45 (略亮, 100% 不透明) - 隔行底色: 实色 #0d2d38 - 第一列底色: 实色 #0f2e3a + 青色右分隔线 - 边框: 全包细框 1px rgba(0,242,254,0.22), 外框加粗到 0.4 alpha - 文字色: 主文 #e0e8ec, 表头 #5af3ff, 第一列 #5af3ff (高对比) */ .x1-elegant-text table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 14px 0; font-size: 12px; background: #0a2530; /* 深海卡纸底, 100% 不透明 */ border: 1px solid rgba(0, 242, 254, 0.4); /* 细表格外框线 (青色, 加深) */ border-radius: 4px; /* 硬边, 4px 微圆 */ overflow: hidden; color: #e0e8ec; /* 文字主色, 高对比 */ /* 多层硬投影: 与项目卡 / AI 卡的纸雕感保持一致 */ box-shadow: 2px 3px 0px rgba(0, 3, 10, 0.55), /* 纸雕主投影: 右下偏移 */ 0 4px 12px rgba(0, 3, 10, 0.4), /* 远投影: 深度感 */ inset 0 1px 0 rgba(255, 255, 255, 0.08); /* 内侧高光: 顶面受光 */ } .x1-elegant-text th, .x1-elegant-text td { padding: 9px 11px; text-align: left; /* 单元格 4 边都加细框线 (从原来只 border-bottom 改为全包, 让表格像"工程蓝图") */ border: 1px solid rgba(0, 242, 254, 0.22); color: #e0e8ec; /* 主文: 与表底色对比度 12.9:1 (WCAG AAA) */ line-height: 1.55; vertical-align: top; word-wrap: break-word; overflow-wrap: break-word; } .x1-elegant-text th { background: #1a3a45; /* 表头实色卡纸, 100% 不透明 */ color: #5af3ff !important; /* 青色高亮, 与表头底色对比度 9.1:1 (WCAG AAA) */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; border: 1px solid rgba(0, 242, 254, 0.5); /* 表头边框更亮 (强于单元格) */ border-bottom: 2px solid rgba(0, 242, 254, 0.7); /* 2px 纸带式表头底线 (强调) */ } /* 隔行底色, 增加表格可读性 — 100% 不透明实色 */ .x1-elegant-text tbody tr:nth-child(even) { background: #0d2d38; /* 略提亮, 实色 */ } /* 第一列 (行标) 强调: 略亮底色 + 加粗 + 单元格右边框 */ .x1-elegant-text td.x1-td-first { color: #5af3ff !important; /* 与第一列底色对比度 10.6:1 (WCAG AAA) */ font-weight: 600; background: #0f2e3a; /* 第一列实色底, 略亮 */ border-right: 1px solid rgba(0, 242, 254, 0.35); } /* 5+ 列时: 用横向滚动条, 不要让 cell 内容被压成 0 宽 */ .x1-elegant-text .x1-table-wrap { overflow-x: auto; margin: 14px 0; border-radius: 6px; } .x1-elegant-text .x1-table-wrap > table { min-width: 100%; } .x1-elegant-text .x1-table-wrap > table.x1-table-wide { min-width: 520px; /* 5+ 列表格最小宽度, 触发横向滚动 */ } /* 自定义滚动条 (在 X1 内) */ .x1-elegant-text .x1-table-wrap::-webkit-scrollbar { height: 6px; } .x1-elegant-text .x1-table-wrap::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); } .x1-elegant-text .x1-table-wrap::-webkit-scrollbar-thumb { background: rgba(0, 242, 254, 0.5); border-radius: 3px; } /* ========================================================== 6. X1 数据卡片 (Data Card) — 把表格转换为"标签+值"卡片列表 ------------------------------------------------------------ 解决 5+ 列表格在窄侧栏里挤成一团的问题. 渲染: 每个是一个卡片, 第一列是标签, 后续列是值. ========================================================== */ .x1-elegant-text .x1-card-body .x1-data-table { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } /* X1 数据卡片 (Data Card) — 重设计 (Backlog #11.1): 与新风格统一: 实色卡纸底 + 强对比 + 细框线 + 物理投影解决: 旧 rgba(0,242,254,0.05) 在 X1 body bg (#04161d) 上几乎透明, 表格看不出 */ .x1-elegant-text .x1-card-body .x1-data-card { display: block; background: #0a2530; /* 深海卡纸实色, 100% 不透明, 铁律 #1 */ border: 1px solid rgba(0, 242, 254, 0.32); border-left: 3px solid #00f2fe; /* 3px 纸带式数据卡边 (强调, 保留) */ border-radius: 4px; padding: 10px 12px; /* 物理投影, 让卡在 bg 上"浮起" */ box-shadow: 1px 2px 0px rgba(0, 3, 10, 0.5), /* 纸雕主投影: 右下偏移 */ 0 2px 6px rgba(0, 3, 10, 0.3), /* 远投影: 深度 */ inset 0 1px 0 rgba(255, 255, 255, 0.06); /* 内侧高光: 顶面受光 */ transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .x1-elegant-text .x1-card-body .x1-data-card:hover { background: #0d2d38; /* hover: 略提亮实色 */ border-color: rgba(0, 242, 254, 0.5); transform: translateY(-1px); /* 微抬升, 模拟纸雕触觉 */ } .x1-elegant-text .x1-card-body .x1-data-label { display: block; font-family: 'Cinzel', 'Playfair Display', serif; font-size: 12px; font-weight: 600; color: #5af3ff !important; /* 与卡底色 #0a2530 对比度 12.9:1 (WCAG AAA) */ letter-spacing: 0.05em; margin-bottom: 6px; line-height: 1.4; word-break: break-word; } .x1-elegant-text .x1-card-body .x1-data-label .cn-secondary { display: inline; color: rgba(0, 242, 254, 0.7); /* 略亮, 与主标签同色族 */ font-size: 11px; font-weight: 400; font-style: italic; margin-left: 4px; } .x1-elegant-text .x1-card-body .x1-data-body { display: block; margin: 0; padding: 0; } .x1-elegant-text .x1-card-body .x1-data-row { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed rgba(0, 242, 254, 0.22); /* 1px 虚线分隔, 从 0.12 提到 0.22 更可见 */ font-size: 12px; line-height: 1.55; color: #e0e8ec; /* 主文: 与卡底色对比度 12.9:1 */ } .x1-elegant-text .x1-card-body .x1-data-row:last-child { border-bottom: none; } .x1-elegant-text .x1-card-body .x1-data-key { color: #5af3ff; /* 青色高亮, 与卡底色对比度 12.9:1 */ font-size: 10.5px; font-family: 'Cinzel', 'Playfair Display', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; text-align: right; white-space: nowrap; word-break: keep-all; } .x1-elegant-text .x1-card-body .x1-data-val { color: #e0e8ec; /* 与卡底色对比度 12.9:1 */ word-break: break-word; overflow-wrap: anywhere; line-height: 1.6; } .x1-elegant-text .x1-card-body .x1-data-val .x1-color-token { margin: 0 1px; } /* 表格 cell 内部不要继承黑色, 强制浅色 */ .x1-elegant-text .x1-card-body .x1-data-row, .x1-elegant-text .x1-card-body .x1-data-row * { color: inherit; } .x1-elegant-text .x1-card-body .x1-data-row .x1-data-val, .x1-elegant-text .x1-card-body .x1-data-row .x1-data-val * { color: rgba(245, 247, 250, 0.9) !important; } .x1-elegant-text .x1-card-body .x1-data-row .x1-data-key { color: rgba(0, 242, 254, 0.75) !important; } /* X1 表格仅 2 列时 (如阴影配方, 模块清单): 标签/值用更宽的列 */ .x1-elegant-text .x1-card-body .x1-data-card.is-2col .x1-data-row { grid-template-columns: 1fr; gap: 2px; } .x1-elegant-text .x1-card-body .x1-data-card.is-2col .x1-data-key { text-align: left; font-size: 10px; white-space: normal; } /* 小屏 X1 卡片内表格缩窄 padding */ .x1-elegant-text .x1-card-body .x1-data-card { padding: 9px 11px; } .x1-elegant-text .x1-card-body .x1-data-row { grid-template-columns: 75px 1fr; font-size: 11.5px; gap: 8px; } .x1-elegant-text .x1-card-body .x1-data-card .x1-data-label { font-size: 11.5px; margin-bottom: 7px; } /* X1 卡片内表格 (2 列) 优化: 标签和值更紧凑 */ .x1-elegant-text .x1-card-body .x1-data-card.is-2col .x1-data-row { grid-template-columns: 1fr; gap: 3px; padding: 5px 0; } .x1-elegant-text .x1-card-body .x1-data-card.is-2col .x1-data-key { font-size: 9.5px; } /* 兼容: 旧 .x1-md-body 内的

仍能渲染 (有数据但用户可能直接看 raw HTML) */ .x1-elegant-text .x1-card-body .x1-data-table + table { display: none; } /* X1 颜色 token 在窄数据卡片里: 防止在 token 内部断行, 避免 "Deep Purple" 被拆成 "Deep" + "Purple" 两行 */ .x1-elegant-text .x1-data-val .x1-color-token { white-space: nowrap; word-break: keep-all; overflow-wrap: normal; } /* ========================================================== 7. X1 颜色票 (Color Token) ------------------------------------------------------------ 设计原则: · swatch 永远显示真实颜色 (加深色 / 加白边 / 加微阴影, 任何颜色都可辨认) · label 永远用浅色背景 + 深色文字, 不会和深色页面背景混淆 · hex 码和颜色名用完全相同的 stamp 结构, 视觉一致 ========================================================== */ .x1-elegant-text .x1-color-token { display: inline-flex; align-items: center; gap: 0.45em; margin: 0 1px; padding: 2px 9px 2px 5px; border-radius: 4px; /* 胶囊允许 4px 微圆 */ background: rgba(245, 247, 250, 0.92); /* 浅色 (近白) 背景胶囊, 永远清晰 */ border: 1px solid rgba(0, 242, 254, 0.35); /* 冷青色细边, 切合深海主题 */ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), /* 底部硬投影 (纸雕感) */ 0 0 0 1px rgba(0, 0, 0, 0.5); /* 外圈暗描边, 把胶囊从深色背景"切"出来 */ vertical-align: baseline; white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .x1-elegant-text .x1-color-token:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.98); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 242, 254, 0.6); } .x1-elegant-text .x1-color-swatch { flex-shrink: 0; width: 0.85em; height: 0.85em; border-radius: 2px; /* 色块允许 2px 直角微圆 */ background: var(--swatch, #888); /* 不论颜色深浅, swatch 都有一圈白边 + 暗投影, 避免和胶囊底色"消失" */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), /* 白边描出轮廓 */ 0 0 0 2px rgba(0, 0, 0, 0.3), /* 第二层暗色描边 */ 0 1px 2px rgba(0, 0, 0, 0.4); /* 底部小硬投影 */ position: relative; top: -0.05em; } .x1-elegant-text .x1-color-label { font-family: 'Cinzel', 'Playfair Display', monospace, serif; font-weight: 600; font-size: 0.95em; color: #0b1722; /* 永远深色文字, 永远清晰 */ letter-spacing: 0.02em; line-height: 1.2; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); /* 极淡白底高光, 增加可读性 */ } /* 兼容旧类名 (避免破坏之前的引用) */ .x1-elegant-text .x1-color-chip { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.35em; margin-bottom: -0.05em; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.18); vertical-align: middle; background: var(--chip-color, #888); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset; transition: transform 0.2s ease; } .x1-elegant-text .x1-color-chip:hover { transform: scale(1.18); } /* ========================================================== 8. X1 Intro (顶部简介) + Cards Grid (可展开卡片网格) ------------------------------------------------------------ 顶部 .x1-intro: 简短几行介绍 (blockquote + 段落) 下方 .x1-cards-grid: 可展开的小卡片 (emoji + CN + EN) ← Backlog #13 翻转点击 / 悬停触发卡片的 .x1-card-body 展开 8.0 顶部 header (Backlog #13 新增) — 与 Marathon/Travel 模态风格一致 ========================================================== */ .x1-elegant-text .x1-modal-header { padding: 22px 38px 18px; border-bottom: 1px solid rgba(0, 242, 254, 0.18); position: relative; /* 顶部 1px 青光高亮 (inset box-shadow, 铁律 #4 合规, 不用 linear-gradient) */ box-shadow: inset 0 1px 0 0 rgba(0, 242, 254, 0.25); } .x1-elegant-text .x1-modal-header::after { content: ""; position: absolute; left: 38px; bottom: -1px; width: 36px; height: 2px; background: rgba(0, 242, 254, 0.6); } .x1-elegant-text .x1-modal-header-titles { display: flex; flex-direction: column; gap: 4px; padding-right: 70px; /* 留出 × 按钮空间 */ } .x1-elegant-text .x1-modal-title { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 1.3rem; color: rgba(245, 247, 250, 0.95); font-weight: 500; letter-spacing: 0.08em; margin: 0; line-height: 1.3; } .x1-elegant-text .x1-modal-subtitle { font-family: 'Cinzel', 'Playfair Display', sans-serif; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(0, 242, 254, 0.6); margin: 0; font-weight: 400; line-height: 1.3; } .x1-elegant-text .x1-modal-body-wrap { padding: 24px 38px 60px; } /* 8.1 顶部简介区: 几条短段落 + 引用, 限制高度让用户聚焦于卡片 */ .x1-elegant-text .x1-intro { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(0, 242, 254, 0.18); position: relative; } .x1-elegant-text .x1-intro::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 36px; height: 2px; background: rgba(0, 242, 254, 0.6); /* 2px 纸带式高亮线 */ } .x1-elegant-text .x1-intro-quote { color: rgba(0, 242, 254, 0.7) !important; font-style: italic; border-left: 2px solid rgba(0, 242, 254, 0.5); padding-left: 12px; margin: 0 0 8px 0 !important; font-size: 13px; line-height: 1.6; } .x1-elegant-text .x1-intro-para { color: rgba(245, 247, 250, 0.7) !important; font-size: 12.5px; line-height: 1.65; margin: 0 0 6px 0 !important; } /* 8.2 卡片网格: 默认 2 列, 紧凑卡纸注: 在窄 X1 侧栏 (视口较窄) 下会自动转为 1 列, 见下方 media query */ .x1-elegant-text .x1-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(min-content, auto); /* 行高自动适应内容, 不被截断 */ gap: 8px; width: 100%; } /* X1 侧栏较窄时 (视口 < 1280px), 卡片网格改 1 列 X1 侧栏只有视口的 50%, 在 < 1280px 视口下卡片宽度 < 320px, 2 列会让每张卡片 < 160px, 长标题一定被截断 → 1 列更稳 */ @media (max-width: 1279px) { .x1-elegant-text .x1-cards-grid { grid-template-columns: 1fr !important; gap: 10px !important; } /* 1 列下卡片高度由内容决定, 不要再硬限高 */ .x1-elegant-text .x1-card-item { min-height: 60px !important; } /* 1 列下, 标题在水平方向有更多空间, 可以恢复稍大的字号 */ .x1-elegant-text .x1-card-en { font-size: 11px !important; } } /* 展开的卡片: 跨满 2 列, 占整个宽度, 阅读体验更舒适 */ .x1-elegant-text .x1-card-item.is-open { grid-column: 1 / -1; } /* 8.3 单张卡片: 默认折叠, 只显示 trigger + 八角形小切角 (8px) */ .x1-elegant-text .x1-card-item { position: relative; background: rgba(0, 242, 254, 0.04); border: 1px solid rgba(0, 242, 254, 0.18); overflow: hidden; transition: background 0.25s ease, border-color 0.25s ease; clip-path: polygon( 8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px ); } .x1-elegant-text .x1-card-item:hover { background: rgba(0, 242, 254, 0.08); border-color: rgba(0, 242, 254, 0.35); } /* 8.4 卡片顶部: emoji + EN + CN + 展开符号 */ .x1-elegant-text .x1-card-trigger { display: flex; align-items: center; gap: 10px; padding: 12px 14px; /* 加大内边距, 让文字不挤 */ cursor: pointer; user-select: none; -webkit-user-select: none; outline: none; min-height: 48px; /* 保证卡片有最小高度 */ } .x1-elegant-text .x1-card-trigger:focus-visible { background: rgba(0, 242, 254, 0.12); } .x1-elegant-text .x1-card-icon { font-size: 20px; /* 加大: 18→20 */ line-height: 1; flex-shrink: 0; width: 26px; /* 加大: 22→26 */ text-align: center; filter: drop-shadow(0 0 4px rgba(0, 242, 254, 0.3)); } .x1-elegant-text .x1-card-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: visible; } .x1-elegant-text .x1-card-en { /* EN 在前为主标题 — Backlog #10 / #17 决定: EN 白色 Cinzel uppercase 为主 */ font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 10.5px; color: rgba(245, 247, 250, 0.95); letter-spacing: 0.03em; text-transform: uppercase; font-weight: 500; line-height: 1.3; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; overflow: visible; display: block; } .x1-elegant-text .x1-card-cn { /* CN 在后为副标题 — 青色 italic */ font-size: 11px; color: rgba(0, 242, 254, 0.78); letter-spacing: 0.03em; line-height: 1.3; font-style: italic; word-wrap: break-word; overflow-wrap: break-word; } .x1-elegant-text .x1-card-toggle { flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(0, 242, 254, 0.7); transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1); line-height: 1; } .x1-elegant-text .x1-card-item.is-open .x1-card-toggle { transform: rotate(45deg); /* 展开时 45° 旋转 */ } /* 8.5 卡片展开体: 默认折叠, 展开后露出完整描述 */ .x1-elegant-text .x1-card-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, padding 0.3s ease; padding: 0 12px; border-top: 1px solid transparent; } .x1-elegant-text .x1-card-item.is-open .x1-card-body { max-height: none; /* 关键: 取消 1400px 硬限高, 让长内容完整显示 */ overflow: visible; opacity: 1; padding: 12px 14px 14px; border-top-color: rgba(0, 242, 254, 0.18); } /* 展开体内的 markdown 样式微调 (缩小字号, 与卡片 trigger 区分) */ .x1-elegant-text .x1-card-body, .x1-elegant-text .x1-card-body > div { font-size: 12px !important; line-height: 1.65 !important; } .x1-elegant-text .x1-card-body p, .x1-elegant-text .x1-card-body > div p { margin: 0 0 8px 0 !important; color: rgba(245, 247, 250, 0.78) !important; } .x1-elegant-text .x1-card-body li, .x1-elegant-text .x1-card-body > div li { font-size: 12px !important; line-height: 1.7 !important; } .x1-elegant-text .x1-card-body h3, .x1-elegant-text .x1-card-body > div h3 { font-size: 12px !important; margin: 10px 0 6px !important; } .x1-elegant-text .x1-card-body code, .x1-elegant-text .x1-card-body > div code { font-size: 11px !important; } .x1-elegant-text .x1-card-body table, .x1-elegant-text .x1-card-body > div table { font-size: 11px !important; } /* ========================================================== 9. X1 模态交互模式 (orientation: 横屏 50% 侧栏 / 竖屏 68vh 抽屉) ========================================================== */ /* X1 模态通用: 强制 pointer-events 可交互 + 顶层 z-index */ .x1-elegant-text { pointer-events: auto !important; z-index: 999999 !important; } @media (orientation: landscape) { /* X1 模态: 横屏时变成左侧 50% 宽的侧栏 */ body .x1-elegant-text { position: fixed !important; left: 0 !important; top: 0 !important; width: min(50%, 640px) !important; max-width: 50% !important; height: 100vh !important; max-height: 100vh !important; z-index: 999999 !important; /* Backlog #18 修复: 背景 100% 不透明 #04161d (铁律 #1 100% 合规) 旧 rgba(4, 22, 29, 0.96) 有 4% 透明, 右侧 portfolio 区域 (X1 模态只盖左 50%) 的卡片 SVG 漏出 */ background: #04161d !important; border-right: 1px solid rgba(0, 242, 254, 0.3); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.7); /* 右侧 24px 硬投影 */ padding: 60px 36px 40px !important; } body .x1-elegant-text .x1-close-btn { right: 14px !important; top: 14px !important; } .x1-modal-mode .pdf-modal-overlay { padding-left: 0 !important; padding-right: 0 !important; } .x1-modal-mode .pdf-modal-container { position: absolute !important; left: 0 !important; top: 0 !important; width: min(50%, 640px) !important; max-width: 50% !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; clip-path: none !important; } .x1-modal-mode .pdf-modal-container::before, .x1-modal-mode .pdf-modal-container::after { display: none !important; } .x1-modal-mode .pdf-modal-body { height: 100vh !important; } } @media (orientation: portrait) { /* X1 模态: 竖屏从顶部向下浮现的"抽屉" (而非全屏覆盖), 让用户看到背景海草/diver 仍在底层, 仅上半部分展示内容 */ .x1-elegant-text { position: fixed !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 68vh !important; max-height: 68vh !important; z-index: 999999 !important; /* Backlog #18 修复: 背景 100% 不透明 #04161d (铁律 #1 100% 合规) 旧 rgba(4, 22, 29, 0.97) 有 3% 透明, 抽屉下方 portfolio 区域漏出 */ background: #04161d !important; border-bottom: 1px solid rgba(0, 242, 254, 0.3) !important; border-right: none !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important; /* 底部 32px 硬投影 */ padding: 56px 24px 32px !important; /* 从顶部下滑的入场动画 */ transform: translateY(0) !important; animation: x1SlideDown 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; } body .x1-elegant-text .x1-close-btn { right: 12px !important; top: 12px !important; } } @keyframes x1SlideDown { from { transform: translateY(-100%) !important; opacity: 0; } to { transform: translateY(0) !important; opacity: 1; } } /* ========================================================== 10. X1 响应式 (1024 / 768 / 480 / 360) ========================================================== */ /* 10.1 1024px 及以下: X1 字体略缩小 + 表格字号收紧 + padding 收缩 */ @media (max-width: 1024px) { .x1-elegant-text { font-size: 13px; } .x1-elegant-text table { font-size: 11.5px; } .x1-elegant-text th, .x1-elegant-text td { padding: 8px 9px; } .x1-elegant-text th { font-size: 10px; } } /* 10.2 768px 及以下: 表格进一步紧凑化 (中等屏) */ @media (max-width: 768px) { .x1-elegant-text table { font-size: 11px; } .x1-elegant-text th { font-size: 9.5px; } .x1-elegant-text th, .x1-elegant-text td { padding: 7px 8px; } } /* 10.3 480px 及以下: X1 容器 padding 收紧, 字号进一步缩小 + 表格极简模式 */ @media (max-width: 480px) { .x1-elegant-text { font-size: 12px; padding: 20px 18px !important; } .x1-elegant-text table { font-size: 10.5px; } .x1-elegant-text th { font-size: 9px; } .x1-elegant-text th, .x1-elegant-text td { padding: 6px 6px; } } /* 10.4 360px 及以下: 表格最小尺寸, 单元格 padding 4px (单手可读) */ @media (max-width: 360px) { .x1-elegant-text { font-size: 11.5px; } .x1-elegant-text table { font-size: 10px; } .x1-elegant-text th { font-size: 8.5px; } .x1-elegant-text th, .x1-elegant-text td { padding: 5px 5px; line-height: 1.4; } }