/* ========================================================================== * 我的足迹 - 插件自带 CSS * * 命名空间：`mfp-*`，与任何 Halo 主题样式互不冲突。 * 通过 reverseProxy.yaml 配置暴露路径： * /plugins/plugin-myfootprints/assets/... * 通过模板中的 引入。 * * 设计哲学： * - 用 CSS Variables，便于外层覆盖（但不强迫任何主题覆盖） * - 高度自包含，不依赖主题字体 / reset / 媒体查询 * - 移动端友好 * ========================================================================== */ :root { --mfp-color-fg: #1f2328; --mfp-color-fg-soft: #4b5563; --mfp-color-bg: #ffffff; --mfp-color-bg-soft: #f8fafc; --mfp-color-accent: #2563eb; --mfp-color-pin: #e74c3c; --mfp-color-border: rgba(31, 35, 40, 0.1); --mfp-radius: 12px; --mfp-radius-sm: 6px; --mfp-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); --mfp-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.16); --mfp-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 地图主题 → 页面 UI 适配。由 JS 在 settings.mapStyle 加载时给 #mfpRoot 加 data-mfp-theme 属性。 standard 不写属性，走 :root 默认；其它三套对应 高德 normal/darkblue/light/fresh。 JS 同时把同一属性挂到 ，下方的 html[data-mfp-theme] 让整个 body 背景也跟着切换， 避免 Halo 主题的留白与窄版 .mfp 形成「白圈包黑块」对比。 */ } /* 当 html 上挂了 data-mfp-theme 时，把 body / html 自身的背景色切到主题底色。 用 transition 让主题切换平滑。 */ html[data-mfp-theme] { background-color: var(--mfp-color-bg); transition: background-color 0.3s ease; } html[data-mfp-theme] body { background-color: var(--mfp-color-bg); transition: background-color 0.3s ease; } /* 午夜黑：地图暗，UI 走纯黑灰系（无蓝调，纯中性灰底 + 浅文字 + 亮蓝 accent 作唯一彩色锚点） */ [data-mfp-theme="dark"] { --mfp-color-fg: #e6e6e6; --mfp-color-fg-soft: #8a8a8a; --mfp-color-bg: #161616; --mfp-color-bg-soft: #242424; --mfp-color-accent: #5aa9ff; --mfp-color-border: rgba(255, 255, 255, 0.10); --mfp-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); --mfp-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.7); } /* 清新蓝：地图亮蓝白，UI 保持亮色但带冷调、accent 改为亮蓝 */ [data-mfp-theme="light"] { --mfp-color-fg: #0c2a4d; --mfp-color-fg-soft: #4a6585; --mfp-color-bg: #f5f9ff; --mfp-color-bg-soft: #e6f0fc; --mfp-color-accent: #1890ff; --mfp-color-border: rgba(12, 42, 77, 0.12); --mfp-shadow: 0 4px 14px rgba(24, 144, 255, 0.12); --mfp-shadow-strong: 0 12px 32px rgba(24, 144, 255, 0.22); } /* 远山黛：地图水墨绿，UI 走淡灰绿调 + 墨绿 accent */ [data-mfp-theme="fresh"] { --mfp-color-fg: #2d3a2e; --mfp-color-fg-soft: #5d6f5e; --mfp-color-bg: #f5f7f5; --mfp-color-bg-soft: #ebf0ec; --mfp-color-accent: #4a7c59; --mfp-color-border: rgba(45, 58, 46, 0.12); --mfp-shadow: 0 4px 14px rgba(74, 124, 89, 0.12); --mfp-shadow-strong: 0 12px 32px rgba(74, 124, 89, 0.22); } * { box-sizing: border-box; } .mfp { /* 防止主题的全局 p、h1 预设被踩，让插件自身决定 */ margin: 0 auto; padding: 24px 16px 64px; max-width: 1180px; font-family: var(--mfp-font); color: var(--mfp-color-fg); line-height: 1.6; font-size: 15px; /* 整个插件区域跟随主题色，避免 Halo 主题的白 body 透过容器露出来 */ background: var(--mfp-color-bg); border-radius: var(--mfp-radius); } .mfp *, .mfp *::before, .mfp *::after { box-sizing: border-box; } /* 页面主题（后台「显示设置 → 主题」）： 窄版 narrow = 默认，限宽 1180px 居中； 全屏 full = 地图铺满整个视口作底层， 标题/统计/搜索/分类/卡片收进右侧浮动侧边栏。 */ .mfp--narrow { max-width: 1180px; } .mfp--full { max-width: none; position: fixed; inset: 0; margin: 0; padding: 20px; display: grid; grid-template-columns: 1fr minmax(340px, 400px); grid-template-rows: auto minmax(0, 1fr); column-gap: 20px; overflow: hidden; border-radius: 0; /* 全屏下：地图已在底层铺满，背景色不需要（透出地图本身） */ background: transparent; } /* —— 侧边栏进场动画 —— 打开页面时侧边栏整体从右侧滑入（头部与主体同步，无错落）。 渲染完成后 JS 给根元素加 .is-ready 触发动画（避免首帧闪现）。 */ .mfp--full .mfp-header, .mfp--full .mfp-body { opacity: 0; } .mfp--full.is-ready .mfp-header, .mfp--full.is-ready .mfp-body { animation: mfpSidebarIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes mfpSidebarIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .mfp--full .mfp-header, .mfp--full .mfp-body { opacity: 1; } .mfp--full.is-ready .mfp-header, .mfp--full.is-ready .mfp-body { animation: none; } } .mfp--full .mfp-map { grid-column: 1 / -1; grid-row: 1 / 3; margin: -20px; /* 反向吃掉容器 padding，让地图铺满整个视口 */ border-radius: 0; z-index: 0; } .mfp--full .mfp-map__inner { height: 100%; } /* —— 右侧浮动侧边栏：标题区（面板头部） —— */ .mfp--full .mfp-header { grid-column: 2; grid-row: 1; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; text-align: left; padding: 20px 20px 10px; /* 侧边栏半透明毛玻璃。跟随 --mfp-color-bg，dark 主题下自动变深色半透。 */ background: color-mix(in srgb, var(--mfp-color-bg) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 16px 16px 0 0; box-shadow: var(--mfp-shadow); } .mfp--full .mfp-header__title { order: 1; font-size: 22px; letter-spacing: 0; } .mfp--full .mfp-header__stats { order: 2; margin: 0 0 0 auto; gap: 8px; } .mfp--full .mfp-header__sub { order: 3; width: 100%; margin: 2px 0 0; font-size: 13px; } .mfp--full .mfp-stat { background: rgba(37, 99, 235, 0.1); border-radius: 999px; padding: 2px 12px; font-size: 12px; } /* —— 右侧浮动侧边栏：搜索 + 分类 + 卡片（面板主体，内部滚动） —— */ .mfp--full .mfp-body { grid-column: 2; grid-row: 2; z-index: 1; margin-top: 0; min-height: 0; /* 主体自身不滚动：搜索 + 分类固定，只有下面的卡片列表滚动 */ display: flex; flex-direction: column; overflow: hidden; position: relative; /* 「到底了」悬浮层的定位基准 */ padding: 12px 20px 20px; /* 侧边栏半透明毛玻璃。跟随 --mfp-color-bg，dark 主题下自动变深色半透。 */ background: color-mix(in srgb, var(--mfp-color-bg) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 0 0 16px 16px; box-shadow: var(--mfp-shadow); } .mfp--full .mfp-toolbar { flex: 0 0 auto; flex-direction: column; align-items: stretch; margin-bottom: 14px; } .mfp--full .mfp-search { flex: none; } .mfp--full .mfp-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* 关键：grid 作为定高滚动容器时，auto 行会被压缩成等高塞满容器 （卡片被压成 82px、缩略图变 0）。显式 max-content 让行按内容高度撑开并溢出滚动。 */ align-content: start; grid-auto-rows: max-content; grid-template-columns: 1fr; gap: 14px; /* 隐藏滚动条（仍可滚动） */ scrollbar-width: none; -ms-overflow-style: none; } .mfp--full .mfp-grid::-webkit-scrollbar { width: 0; height: 0; display: none; } @media (max-width: 720px) { .mfp--full { grid-template-columns: 1fr; padding: 12px; } .mfp--full .mfp-map { margin: -12px; } .mfp--full .mfp-header, .mfp--full .mfp-body { grid-column: 1; } } /* 标题区 */ .mfp-header { text-align: center; padding: 24px 0 16px; } .mfp-header__title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: 0.04em; } .mfp-header__sub { margin: 8px 0 0; color: var(--mfp-color-fg-soft); font-size: 14px; } .mfp-header__stats { margin-top: 16px; display: inline-flex; flex-wrap: wrap; gap: 12px 18px; font-size: 13px; color: var(--mfp-color-fg-soft); } .mfp-stat b { color: var(--mfp-color-accent); font-weight: 700; font-size: 16px; } /* 地图 */ .mfp-map { margin: 24px 0; border-radius: var(--mfp-radius); overflow: hidden; background: var(--mfp-color-bg-soft); } /* 午夜黑主题下：地图瓦片也走黑灰系。用 CSS filter 对瓦片 canvas 去色+降亮， 高德内置 darkblue 是深蓝调，filter 把它压成纯黑灰。注意：覆盖物（标记点、 圆圈、信息窗）一起变灰，这是黑灰主题的合理副作用。 */ [data-mfp-theme="dark"] .mfp-map { filter: grayscale(1) contrast(1.05) brightness(0.78); } .mfp-map__inner { width: 100%; height: 480px; background: var(--mfp-color-bg-soft); } /* 工具栏 */ .mfp-body { margin-top: 24px; } .mfp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; } .mfp-search { flex: 1 1 240px; border: 1px solid var(--mfp-color-border); background: var(--mfp-color-bg-soft); border-radius: 999px; padding: 8px 16px; font-size: 14px; outline: none; transition: border-color 0.15s; } .mfp-search:focus { border-color: var(--mfp-color-accent); } .mfp-type-filter { display: flex; flex-wrap: wrap; gap: 6px; } .mfp-chip { border: 1px solid var(--mfp-color-border); background: var(--mfp-color-bg); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--mfp-color-fg); transition: all 0.12s ease; } .mfp-chip:hover { background: var(--mfp-color-bg-soft); } .mfp-chip.is-active { background: var(--mfp-color-accent); color: #fff; border-color: var(--mfp-color-accent); } /* 滚动到底提示 */ .mfp-end { display: none; text-align: center; font-size: 12px; letter-spacing: 0.08em; color: var(--mfp-color-fg-soft); padding: 14px 0 10px; pointer-events: none; } .mfp-end.is-visible { display: block; } /* 悬浮在滚动区底部：不能占文档流，否则「显示提示 → 滚动区变矮 → 判定未到底 → 隐藏 → 又到底」会形成死循环闪烁。用绝对定位 + 渐变遮底不影响 scrollHeight。 */ .mfp--full .mfp-end { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; /* 渐变跟随 --mfp-color-bg（深色主题下底色也是深色） */ background: linear-gradient(to bottom, color-mix(in srgb, var(--mfp-color-bg) 0%, transparent), color-mix(in srgb, var(--mfp-color-bg) 94%, transparent) 60%); } .mfp-end--media, .mfp--full .mfp-end--media { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: linear-gradient(to bottom, rgba(248, 250, 252, 0), rgba(248, 250, 252, 0.95) 60%); } /* 列表网格 */ .mfp-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .mfp-card { /* 基础：实心背景 var(--mfp-color-bg) + 1px border——standard/light/fresh 主题下看得清卡片边界。 dark 主题单加 [data-mfp-theme="dark"] 覆写为透明（v1.0.140 的"整平面一个颜色"设计）。*/ background: var(--mfp-color-bg); border: 1px solid var(--mfp-color-border); border-radius: var(--mfp-radius); overflow: hidden; display: flex; flex-direction: column; transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } /* dark 主题单独恢复 v1.0.140 的"卡片融入整平面"透明设计 */ [data-mfp-theme="dark"] .mfp-card { background: transparent; } .mfp-card:hover { background: var(--mfp-color-bg-soft); transform: translateY(-3px); box-shadow: var(--mfp-shadow-strong); } .mfp-card__thumb { height: 180px; background-color: var(--mfp-color-bg-soft); background-size: cover; background-position: center; position: relative; } .mfp-card__pin { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--mfp-color-pin); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; } .mfp-card__type { position: absolute; left: 10px; top: 10px; background: rgba(31, 35, 40, 0.7); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 12px; } .mfp-card__body { padding: 14px 16px 12px; flex: 1; } .mfp-card__title { margin: 0 0 4px; font-size: 17px; font-weight: 600; } .mfp-card__addr { margin: 0; font-size: 13px; color: var(--mfp-color-fg-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mfp-card__time { margin: 8px 0 0; font-size: 12px; color: var(--mfp-color-fg-soft); } .mfp-card__tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; } .mfp-card__tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--mfp-color-bg-soft); border: 1px solid var(--mfp-color-border); color: var(--mfp-color-fg-soft); } /* 详情弹窗 */ .mfp-modal { position: fixed; inset: 0; /* 蒙层：固定中性深灰 rgb(15,15,15)（去蓝调），所有主题统一深色蒙层（还原之前的样子）。 不能用 var(--mfp-color-bg)——standard 主题下 bg=#ffffff 会变成白色蒙层。*/ background: rgba(15, 15, 15, 0.6); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; } .mfp-modal.is-open { display: flex; } .mfp-modal__panel { position: relative; background: var(--mfp-color-bg); border-radius: var(--mfp-radius); width: min(880px, 100%); max-height: calc(100vh - 48px); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); box-shadow: var(--mfp-shadow-strong); } @media (max-width: 640px) { .mfp-modal__panel { grid-template-columns: 1fr; } } .mfp-modal__close { position: absolute; right: 14px; top: 14px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--mfp-color-bg-soft) 92%, transparent); font-size: 20px; cursor: pointer; box-shadow: var(--mfp-shadow); } /* 加载/错误状态 */ .mfp-loading, .mfp-error { padding: 32px; text-align: center; color: var(--mfp-color-fg-soft); font-size: 14px; } .mfp-error { color: #b91c1c; } /* ===== 三级地区筛选（国家 / 省份 / 城市） ===== */ .mfp-filter { max-width: 1100px; margin: 0 auto 14px; padding: 0 20px; } .mfp-filter__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: center; } .mfp-select { width: 100%; box-sizing: border-box; border: 1px solid var(--mfp-color-border); border-radius: var(--mfp-radius-sm); padding: 8px 10px; font-size: 14px; font-family: inherit; color: var(--mfp-color-fg); background: var(--mfp-color-bg); cursor: pointer; } .mfp-select:focus { outline: 2px solid var(--mfp-color-accent); outline-offset: -1px; border-color: var(--mfp-color-accent); } .mfp-reset { padding: 8px 14px; border-radius: var(--mfp-radius-sm); border: 1px solid var(--mfp-color-border); background: var(--mfp-color-bg); color: var(--mfp-color-fg-soft); font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap; } .mfp-reset:hover { background: var(--mfp-color-bg-soft); } .mfp-filter__hint { margin: 8px 0 0; font-size: 12px; color: var(--mfp-color-fg-soft); } /* ===== 城市足迹列表弹窗（点击地图蓝色蒙版） ===== */ .mfp-modal__panel--list { /* 城市足迹列表弹窗：1500 × 900（小屏自动收敛，避免溢出视口） */ width: min(1500px, calc(100vw - 48px)) !important; max-width: min(1500px, calc(100vw - 48px)) !important; height: min(900px, calc(100vh - 48px)); max-height: min(900px, calc(100vh - 48px)); overflow: auto; padding: 20px 22px; } .mfp-modal__citytitle { margin: 0 0 14px; font-size: 18px; font-weight: 600; color: var(--mfp-color-fg); } .mfp-citylist { display: flex; flex-direction: column; gap: 10px; } .mfp-cityitem { display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--mfp-color-border); border-radius: var(--mfp-radius-sm); cursor: pointer; transition: background .12s ease, box-shadow .12s ease; } .mfp-cityitem:hover { background: var(--mfp-color-bg-soft); box-shadow: var(--mfp-shadow); } .mfp-cityitem__thumb { width: 72px; height: 56px; flex: 0 0 72px; border-radius: var(--mfp-radius-sm); background-color: var(--mfp-color-bg-soft); background-size: cover; background-position: center; } .mfp-cityitem__body { min-width: 0; } .mfp-cityitem__body h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--mfp-color-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mfp-cityitem__body p { margin: 4px 0 0; font-size: 13px; color: var(--mfp-color-fg-soft); } @media (max-width: 640px) { .mfp-filter__row { grid-template-columns: 1fr 1fr; } .mfp-reset { grid-column: 1 / -1; } } /* ========================================================================== * 详情弹窗（新版）：左侧故事 / 到访时间轴 / 相关文章 + 右侧图片瀑布流 * ========================================================================== */ .mfp-modal__panel--detail { width: min(1500px, 100%); height: min(900px, calc(100vh - 48px)); display: block; } .mfp-detail { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); height: 100%; min-height: 0; } .mfp-detail__side { background: var(--mfp-color-bg); min-height: 0; border-right: 1px solid var(--mfp-color-border); } .mfp-detail__media { background: var(--mfp-color-bg-soft); min-height: 0; display: flex; flex-direction: column; position: relative; /* 「到底了」悬浮层的定位基准 */ } /* 相册区：隐藏滚动条（仍可滚动） */ .mfp-detail__media .mfp-detail__scroll { flex: 1 1 auto; height: auto; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; } .mfp-detail__media .mfp-detail__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } .mfp-detail__scroll { height: 100%; overflow-y: auto; padding: 30px 28px; scrollbar-width: thin; } .mfp-crumb { font-size: 12px; letter-spacing: 0.06em; color: #94a3b8; margin-bottom: 12px; } .mfp-detail__city { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: 0.01em; } .mfp-detail__addr { margin: 6px 0 0; font-size: 12.5px; color: #94a3b8; } .mfp-detail__story { margin: 18px 0 0; font-size: 14px; line-height: 1.9; color: #374151; white-space: pre-wrap; } .mfp-detail__tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; } .mfp-sec { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mfp-color-border); } .mfp-sec__title { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: #94a3b8; } .mfp-sec .mfp-sec__title + .mfp-tl { margin-bottom: 0; } .mfp-sec h4.mfp-sec__title ~ h4.mfp-sec__title { margin-top: 22px; } .mfp-sec__count { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--mfp-color-bg-soft); color: var(--mfp-color-fg-soft); font-size: 11px; letter-spacing: 0; font-weight: 500; } /* 到访时间轴 */ .mfp-tl { --mfp-tl-gap: 20px; /* 与 padding-left 一致：圆点轨道距内容左边缘 */ --mfp-tl-dot: 9px; /* 圆点直径（含边框） */ --mfp-tl-dot-top: 7px; /* 圆点顶部相对条目顶部的偏移 */ --mfp-tl-axis: calc(var(--mfp-tl-dot) / 2 - var(--mfp-tl-gap)); /* 圆点圆心，连线与圆点共用 */ position: relative; padding-left: var(--mfp-tl-gap); } .mfp-tl__item { position: relative; padding-bottom: 16px; } .mfp-tl__item:last-child { padding-bottom: 0; } .mfp-tl__dot { position: absolute; left: var(--mfp-tl-axis); top: var(--mfp-tl-dot-top); width: var(--mfp-tl-dot); height: var(--mfp-tl-dot); box-sizing: border-box; transform: translateX(-50%); border-radius: 50%; background: var(--mfp-color-bg); border: 2px solid #cbd5e1; } .mfp-tl__item.is-current .mfp-tl__dot { background: var(--mfp-color-accent); border-color: var(--mfp-color-accent); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); } .mfp-tl__date { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; } .mfp-tl__note { margin: 3px 0 0; font-size: 12.5px; color: var(--mfp-color-fg-soft); } .mfp-tl__item[data-name] { cursor: pointer; } .mfp-tl__item[data-name]:hover .mfp-tl__date { color: var(--mfp-color-accent); } /* 曾到访 ≥2 条时，用一条竖线把各圆点连起来（最后一条不画）；left 与圆点共用 --mfp-tl-axis 保证居中对齐 */ .mfp-tl--linked .mfp-tl__item::before { content: ""; position: absolute; left: var(--mfp-tl-axis); transform: translateX(-50%); top: calc(var(--mfp-tl-dot-top) + var(--mfp-tl-dot)); /* 从本条圆点底部起 */ bottom: -7px; /* 到下一个圆点顶部止 */ width: 2px; border-radius: 1px; background: var(--mfp-color-bg-soft); } .mfp-tl--linked .mfp-tl__item:last-child::before { display: none; } /* 相关文章 */ .mfp-posts { display: flex; flex-direction: column; gap: 8px; } .mfp-post { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--mfp-color-border); border-radius: 10px; text-decoration: none; color: inherit; background: var(--mfp-color-bg); transition: border-color 0.15s ease, transform 0.15s ease; } .mfp-post:hover { border-color: var(--mfp-color-accent); transform: translateX(2px); } .mfp-post__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mfp-post__date { font-size: 12px; color: #94a3b8; flex-shrink: 0; } .mfp-post__arrow { color: #cbd5e1; font-size: 18px; line-height: 1; flex-shrink: 0; } /* 右侧图片瀑布流 */ .mfp-waterfall { columns: 3; column-gap: 12px; padding: 18px; } .mfp-wf__item { margin: 0 0 12px; break-inside: avoid; border-radius: 6px; overflow: hidden; background: var(--mfp-color-bg-soft); cursor: zoom-in; } /* 只有一两张图时不要把图片拉成三条细柱子 */ .mfp-waterfall[data-count="1"] { columns: 1; } .mfp-waterfall[data-count="2"] { columns: 2; } .mfp-wf__item img { display: block; width: 100%; height: auto; } /* —— 相册样式（后台「显示设置 → 相册样式」）—— 瀑布流 = 默认，CSS columns 错落排列，图片保持原始比例； 卡片式 card = 固定 3:2 宽高比、一排三张、图片裁切填满。 */ .mfp-waterfall--card { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } /* 只有 1~2 张时按数量收敛列数，避免出现空列 */ .mfp-waterfall--card[data-count="1"] { grid-template-columns: 1fr; } .mfp-waterfall--card[data-count="2"] { grid-template-columns: repeat(2, 1fr); } .mfp-waterfall--card .mfp-wf__item { margin: 0; aspect-ratio: 3 / 2; } .mfp-waterfall--card .mfp-wf__item img { width: 100%; height: 100%; object-fit: cover; } /* 大图预览 */ .mfp-lightbox { position: fixed; inset: 0; z-index: 10000; /* 灯箱蒙层：固定中性深灰 rgb(15,15,15)（去蓝调），所有主题统一深色蒙层。 不能用 var(--mfp-color-bg)——standard 主题下会变成白色蒙层。*/ background: rgba(15, 15, 15, 0.92); display: none; align-items: center; justify-content: center; padding: 70px; } .mfp-lightbox.is-open { display: flex; } .mfp-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: var(--mfp-shadow-strong); } .mfp-lightbox__close { position: absolute; top: 16px; right: 22px; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } .mfp-lightbox__close:hover { background: rgba(255, 255, 255, 0.26); } .mfp-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; user-select: none; } .mfp-lightbox__nav:hover { background: rgba(255, 255, 255, 0.26); } .mfp-lightbox__nav--prev { left: 18px; } .mfp-lightbox__nav--next { right: 18px; } .mfp-lightbox__counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.6); color: #fff; font-size: 13px; letter-spacing: 0.5px; z-index: 2; } @media (max-width: 860px) { .mfp-modal__panel--detail { height: auto; max-height: calc(100vh - 48px); overflow-y: auto; } .mfp-detail { grid-template-columns: 1fr; } .mfp-detail__side { border-right: none; border-bottom: 1px solid var(--mfp-color-border); } .mfp-detail__scroll { height: auto; overflow: visible; padding: 24px 20px; } .mfp-waterfall, .mfp-waterfall[data-count="2"] { columns: 2; } .mfp-waterfall--card, .mfp-waterfall--card[data-count="2"] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .mfp-waterfall, .mfp-waterfall[data-count="2"] { columns: 1; } .mfp-waterfall--card, .mfp-waterfall--card[data-count="2"] { grid-template-columns: 1fr; } }