/* PUBLIC-CATALOG-R3-20261020: 人设集 / 资源市场的目录视图局部样式。 内容逐条取自 Claude r3 的两份房间样式： demos/rooms/mirrors.css 镜廊 · 人设广场 → 本文件 A 段 demos/rooms/market.css 印室与器物柜 → 本文件 B 段 与源文件唯一的差别是「隔离方式」：源页面靠 body[data-room="mirrors"|"seals"] 落在房间上，而产品里 body 的 data-room 由 shell / state 按栏目写（roster / skills），同一个 body 上还挂着别的栏目。所以这里一律收在 [data-view-slot="plaza"] / [data-view-slot="market"] 之下（那个属性由 js/views/catalog.js 写在 #page-view 上），两页互不污染，也不和 body 的房间 主题抢同一批类名。 镜框、印格、陈列格、拉手签、玻璃页签、入馆签的本体都在 styles/page-shell.css （pm-house §9 §10 §11 §28），这里只补版式与本房间专属控件，不重复定义。 素材：styles/house/walnut.webp｜oak.webp｜velvet-ink.webp（相对本文件两级：../house/）。 */ /* ========================================================================== A. 人设集 plaza —— 镜廊（demos/rooms/mirrors.css） ========================================================================== */ /* 抬头：左边一句话，右边两枚按钮 */ [data-view-slot="plaza"] .h-mir-head { display: grid; grid-template-columns: 1fr auto; gap: var(--pm-s-6); align-items: end; padding: var(--pm-s-8) 0 var(--pm-s-6); } [data-view-slot="plaza"] .h-mir-head .pm-display { margin: 0; font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); } [data-view-slot="plaza"] .h-mir-head .pm-lede { max-width: 30em; } [data-view-slot="plaza"] .h-mir-head .pm-pagehead__actions { margin: 0; } /* 筛选台：一条胡桃木搁板，钉在绒墙上；左边是凹槽搜索与铜钮排序，右边是标签组 */ [data-view-slot="plaza"] .h-mir-console { position: relative; display: grid; grid-template-columns: 300px 1fr; gap: var(--pm-s-5) var(--pm-s-6); padding: 22px 24px 24px; border-radius: 4px; background: linear-gradient(180deg, rgb(255 230 180 / .08), rgb(0 0 0 / .22)), url("../../assets/house/walnut.webp") 0 0 / 512px 512px, #2E2016; box-shadow: inset 0 1px 0 rgb(255 220 170 / .22), inset 0 0 0 1px rgb(0 0 0 / .4), 0 2px 0 #6E5428, var(--pm-light-x) 22px 34px -18px rgb(0 0 0 / .85); } [data-view-slot="plaza"] .h-mir-console::before { content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 1px; background: linear-gradient(90deg, transparent, rgb(211 180 116 / .45), transparent); } [data-view-slot="plaza"] .h-mir-console .pm-field label { color: var(--h-on); font-size: 13px; letter-spacing: .08em; } [data-view-slot="plaza"] .h-mir-console .pm-field + .pm-field { margin-top: 14px; } [data-view-slot="plaza"] .h-mir-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; } [data-view-slot="plaza"] .h-mir-groups .pm-chipgroup__name { color: var(--h-on-2); font: 600 11px/1 var(--pm-font-sans); letter-spacing: .2em; margin-bottom: 4px; } [data-view-slot="plaza"] .h-mir-clear { margin-top: 16px; } [data-view-slot="plaza"] .h-mir-clear .pm-btn--quiet { color: var(--h-on-2); } [data-view-slot="plaza"] .h-mir-clear .pm-btn--quiet[aria-disabled="true"] { background: none; color: var(--h-on-3); opacity: .7; cursor: default; } /* 镜廊专属筛选片：丝绸名签——象牙卡面 + 金丝滚边 + 一枚小铜扣眼；选中时换成墨绿丝面、金字、扣眼里穿上金线 */ [data-view-slot="plaza"] .pm-chip { height: 30px; padding: 0 12px 0 24px; border-radius: 2px 15px 15px 2px; clip-path: none; font-size: 13px; color: #2A2116; background-color: #EFE6D0; background-image: linear-gradient(180deg, rgb(255 252 240 / .55), rgb(200 180 140 / .15)); box-shadow: inset 0 0 0 1px #B8975A, inset 0 0 0 2px rgb(255 248 230 / .7), 0 3px 6px -2px rgb(0 0 0 / .6); } [data-view-slot="plaza"] .pm-chip::after { left: 9px; width: 8px; height: 8px; margin-top: -4px; background: #1A3229; box-shadow: inset 0 1px 1px #000, 0 0 0 2px #C9A866; } [data-view-slot="plaza"] .pm-chip:hover { box-shadow: inset 0 0 0 1px #8A6C3A, inset 0 0 0 2px rgb(255 248 230 / .7), 0 0 0 2px rgb(211 180 116 / .35), 0 4px 8px -2px rgb(0 0 0 / .6); } [data-view-slot="plaza"] .pm-chip[aria-pressed="true"] { color: #F3E3B4; background-color: #2F4A3C; background-image: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(0 0 0 / .18)); box-shadow: inset 0 0 0 1px #D3B474, inset 0 0 0 2px rgb(0 0 0 / .35), 0 3px 6px -2px rgb(0 0 0 / .6); } [data-view-slot="plaza"] .pm-chip[aria-pressed="true"]::after { background: #D3B474; box-shadow: inset 0 1px 1px rgb(0 0 0 / .4), 0 0 0 2px #F1DDA4; } [data-view-slot="plaza"] .pm-chip:focus-visible { outline: 2px solid #F1DDA4; outline-offset: 2px; } /* 结果行：左边「找到 n 份」，右边「每页 6 面」 */ [data-view-slot="plaza"] .h-mir-result { display: flex; justify-content: space-between; align-items: center; margin: var(--pm-s-6) 0 var(--pm-s-5); color: var(--h-on-2); font-size: var(--pm-fs-sm); } [data-view-slot="plaza"] .h-mir-result b { color: var(--h-on); font-family: var(--pm-font-serif); font-size: 1.125rem; } /* 挂镜线：每格（.h-railcell）各带一段铜轨，左右各伸出半个列距，两两相接成一条通长的轨；任何列数下都连续。 镜子在格里居中、最宽 288px（镜子是“物”，不随屏宽无限放大）。 */ [data-view-slot="plaza"] .h-mir-gallery { margin-top: 18px; } [data-view-slot="plaza"] .h-mir-gallery .h-mirrors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 32px; } [data-view-slot="plaza"] .h-mir-gallery .h-mirror__frame { z-index: 1; } /* 羊皮纸小卡上的标签与下载行 */ [data-view-slot="plaza"] .h-mirror__card .pm-tag { font-size: 12px; } [data-view-slot="plaza"] .h-mir-tags { display: flex; flex-wrap: wrap; gap: 6px; } [data-view-slot="plaza"] .h-mir-tags span { padding: 2px 8px; border-radius: 2px; font-size: 12px; color: #2F4A3C; background: rgb(47 74 60 / .1); box-shadow: inset 0 0 0 1px rgb(47 74 60 / .35); } [data-view-slot="plaza"] .h-mirror__foot .pm-btn--quiet { padding: 0 6px; height: 28px; font-size: 12px; color: var(--pm-ink); } [data-view-slot="plaza"] .h-mir-by { display: block; font-size: 12px; color: var(--pm-ink-3); margin-top: 8px; } /* 「只是示例」小标：留着的样例卡各挂一枚。暗铜底、半透，字跟现有小字同号， 放在说明与元信息之间，不压名字与下载钮。 */ [data-view-slot="plaza"] .h-sample-flag, [data-view-slot="market"] .h-sample-flag { display: inline-block; justify-self: start; align-self: start; padding: 2px 7px 3px; border-radius: 2px; font: 600 11px/1.3 var(--pm-font-sans); letter-spacing: .08em; color: #F3E3B4; background: rgb(90 48 32 / .82); box-shadow: inset 0 0 0 1px rgb(211 180 116 / .5); white-space: nowrap; } /* 印室的印格是「印面 + 名签」两列：小标占最末一整行，左对齐，不挤名签与下载钮 */ [data-view-slot="market"] .h-mkt-drawer .h-cell > .h-sample-flag { grid-column: 1 / -1; justify-self: start; } /* 墙上的铜币分页 */ [data-view-slot="plaza"] .pm-pager { margin-top: var(--pm-s-8); } [data-view-slot="plaza"] .pm-pager .pm-pager__info { color: var(--h-on-2); } [data-view-slot="plaza"] .pm-pager a { color: #221D17; } [data-view-slot="plaza"] .h-mir-note { margin-top: 28px; text-align: center; font-size: var(--pm-fs-sm); color: var(--h-on-3); } [data-view-slot="plaza"] .h-mir-nores { grid-column: 1 / -1; text-align: center; padding: 40px 0; color: var(--h-on-2); font-family: var(--pm-font-serif); } @media (max-width: 999px) { [data-view-slot="plaza"] .h-mir-gallery .h-mirrors { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-view-slot="plaza"] .h-mir-console { grid-template-columns: 1fr; } } @media (max-width: 599px) { [data-view-slot="plaza"] .h-mir-gallery .h-mirrors { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; } [data-view-slot="plaza"] .h-mir-groups { grid-template-columns: 1fr; } [data-view-slot="plaza"] .h-mir-head { grid-template-columns: 1fr; } } /* 窄屏（<600）：筛选架默认收起，只露一块胡桃木签「筛选」。 源文件把开关记在 html.h-mir-open 上；这里记在本栏目的 section 上 （.is-console-open），两个栏目各管各的，退出去不留状态。 */ [data-view-slot="plaza"] .h-mir-toggle { display: none; } @media (max-width: 599px) { [data-view-slot="plaza"] .h-mir-toggle { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; margin-bottom: 12px; border-radius: 4px; cursor: pointer; font: 600 15px/1 var(--pm-font-sans); color: var(--h-on); border: 1px solid #8A6C3A; background: linear-gradient(180deg, rgb(255 240 210 / .08), rgb(0 0 0 / .15)), url("../../assets/house/walnut.webp") 0 0 / 256px 256px, #2E2016; box-shadow: inset 0 1px 0 rgb(255 230 180 / .18), 0 8px 14px -8px rgb(0 0 0 / .7); } [data-view-slot="plaza"] .h-mir-toggle svg { width: 16px; height: 16px; transition: transform 160ms; } [data-view-slot="plaza"] .h-mir-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } [data-view-slot="plaza"] .h-mir-toggle:focus-visible { outline: 2px solid #E8C878; outline-offset: 3px; } [data-view-slot="plaza"]:not(.is-console-open) .h-mir-console { display: none; } } /* 关闭纹理（?tex=off / html.pm-tex-off） */ html.pm-tex-off [data-view-slot="plaza"] .h-mir-console { background-image: none !important; } html.pm-tex-off [data-view-slot="plaza"] .h-mir-toggle { background-image: none !important; } /* ---------- 封面显影（.h-mirror--cover）：条目带 cover 字段时才生成 .h-mirror__ghost。 17 份人设里 6 份带封面（assets/works/personas/cover-01…06.webp），其余不带 ---------- 平时字最显眼、镜里只朦胧映出封面的形状；选中时字淡下去，封面露出来。 镜面内的层次（glass 内部 isolation，自下而上）： 银镜底 → 1 显影层 .h-mirror__ghost → 2 银膜 ::before → 3 斜光 .h-mirror__sheen → 4 字 .h-mirror__face → 5 扫光 .h-mirror__glint → 6 脱银暗斑 ::after 所有层 pointer-events: none：点击穿过去落到铭牌链接的整卡点击层上。 */ [data-view-slot="plaza"] .h-mirror--cover .h-mirror__glass { isolation: isolate; background: linear-gradient(180deg, transparent 52%, rgb(28 58 48 / .55) 80%, rgb(16 34 28 / .75)), radial-gradient(ellipse 70% 60% at 30% 22%, #C8D2CE, #8E9C98 45%, #4D5A58 85%, #36403F); } [data-view-slot="plaza"] .h-mirror__ghost { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit; opacity: .30; mix-blend-mode: luminosity; transform: scale(1.08); filter: blur(7px) grayscale(.65) contrast(.85) brightness(.95); transition: opacity 600ms ease-out, filter 600ms ease-out, transform 600ms ease-out, mix-blend-mode 600ms ease-out allow-discrete; } [data-view-slot="plaza"] .h-mirror__ghost img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } [data-view-slot="plaza"] .h-mirror--cover .h-mirror__glass::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse 70% 60% at 30% 22%, rgb(200 210 206 / .5), rgb(142 156 152 / .34) 45%, rgb(77 90 88 / .26) 85%); opacity: .38; transition: opacity 600ms ease-out; } [data-view-slot="plaza"] .h-mirror__sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at 72% 80%, rgb(255 214 140 / .30) 0 1.5%, rgb(255 206 128 / .10) 5%, transparent 12%), linear-gradient(115deg, transparent 22%, rgb(255 255 255 / .22) 30%, rgb(255 255 255 / .05) 38%, transparent 44%); } [data-view-slot="plaza"] .h-mirror--cover .h-mirror__face { position: relative; z-index: 4; transition: opacity 600ms ease-out 80ms, filter 600ms ease-out 80ms, transform var(--pm-t-move, 260ms) var(--pm-ease-out); } [data-view-slot="plaza"] .h-mirror--cover .h-mirror__glint { z-index: 5; } [data-view-slot="plaza"] .h-mirror--cover .h-mirror__glass::after { z-index: 6; } /* 选中：指针悬停 / 焦点在里面 / 数据驱动的选中 */ @media (hover: hover) { [data-view-slot="plaza"] .h-mirror--cover:hover .h-mirror__ghost { opacity: .96; filter: blur(0) grayscale(0) contrast(1) brightness(1); transform: scale(1); mix-blend-mode: normal; transition-delay: 80ms; } [data-view-slot="plaza"] .h-mirror--cover:hover .h-mirror__face { opacity: .10; filter: blur(1px); transition-delay: 0ms; } [data-view-slot="plaza"] .h-mirror--cover:hover .h-mirror__glass::before { opacity: .18; transition-delay: 80ms; } } [data-view-slot="plaza"] .h-mirror--cover:is(:focus-within, [aria-selected="true"], .is-selected) .h-mirror__ghost { opacity: .96; filter: blur(0) grayscale(0) contrast(1) brightness(1); transform: scale(1); mix-blend-mode: normal; transition-delay: 80ms; } [data-view-slot="plaza"] .h-mirror--cover:is(:focus-within, [aria-selected="true"], .is-selected) .h-mirror__face { opacity: .10; filter: blur(1px); transition-delay: 0ms; } [data-view-slot="plaza"] .h-mirror--cover:is(:focus-within, [aria-selected="true"], .is-selected) .h-mirror__glass::before { opacity: .18; transition-delay: 80ms; } [data-view-slot="plaza"] .h-mirror--cover:is([aria-selected="true"], .is-selected) .h-mirror__glint { animation: h-glint 900ms var(--pm-ease-out) 1; } /* 触屏：没有悬停，按下时显影（.is-pressed 由触屏脚本兜底）；轻点照常进入详情 */ @media (hover: none) { [data-view-slot="plaza"] .h-mirror--cover:is(:active, .is-pressed) .h-mirror__ghost { opacity: .96; filter: blur(0) grayscale(0) contrast(1) brightness(1); transform: scale(1); mix-blend-mode: normal; transition-delay: 80ms; } [data-view-slot="plaza"] .h-mirror--cover:is(:active, .is-pressed) .h-mirror__face { opacity: .10; filter: blur(1px); transition-delay: 0ms; } [data-view-slot="plaza"] .h-mirror--cover:is(:active, .is-pressed) .h-mirror__glass::before { opacity: .18; transition-delay: 80ms; } } /* 减少动效 / ?motion=off：没有过渡，直接切换 */ @media (prefers-reduced-motion: reduce) { [data-view-slot="plaza"] .h-mirror--cover .h-mirror__ghost, [data-view-slot="plaza"] .h-mirror--cover .h-mirror__face, [data-view-slot="plaza"] .h-mirror--cover .h-mirror__glass::before { transition: none !important; } [data-view-slot="plaza"] .h-mirror--cover:is([aria-selected="true"], .is-selected) .h-mirror__glint { animation: none; } } html.pm-motion-off [data-view-slot="plaza"] .h-mirror--cover .h-mirror__ghost, html.pm-motion-off [data-view-slot="plaza"] .h-mirror--cover .h-mirror__face, html.pm-motion-off [data-view-slot="plaza"] .h-mirror--cover .h-mirror__glass::before { transition: none !important; } html.pm-motion-off [data-view-slot="plaza"] .h-mirror--cover:is([aria-selected="true"], .is-selected) .h-mirror__glint { animation: none; } /* ?tex=off：不做模糊、去色、混合与缩放，只保留不透明度切换 */ html.pm-tex-off [data-view-slot="plaza"] .h-mirror--cover .h-mirror__ghost { filter: none !important; transform: none !important; mix-blend-mode: normal !important; transition-property: opacity; } html.pm-tex-off [data-view-slot="plaza"] .h-mirror--cover .h-mirror__face { filter: none !important; transition-property: opacity, transform; } html.pm-tex-off [data-view-slot="plaza"] .h-mirror__sheen { background: none; } /* ========================================================================== B. 资源市场 market —— 印室与器物柜（demos/rooms/market.css） ========================================================================== */ /* 抬头：左边一块招牌，右边两枚按钮 */ [data-view-slot="market"] .h-mkt-head { display: grid; grid-template-columns: 1fr auto; gap: var(--pm-s-6); align-items: end; padding: var(--pm-s-8) 0 var(--pm-s-6); } [data-view-slot="market"] .h-mkt-head .pm-lede { max-width: 32em; min-height: 3.7em; } [data-view-slot="market"] .h-mkt-head .pm-pagehead__actions { margin: 0; } /* 页签：两块胡桃木文件夹页签，当前那块和下面的柜体连成一体，顶上一条房间色 */ [data-view-slot="market"] .h-mkt-tabs { display: flex; gap: 6px; padding-left: 18px; border: 0; margin: 0; position: relative; z-index: 1; --mk-wood-tab: linear-gradient(rgb(70 22 10 / .52), rgb(40 12 6 / .58)), url("../../assets/house/oak.webp") 0 0 / 512px 512px, #4A2416; } [data-view-slot="market"] .h-mkt-tabs a { position: relative; display: inline-flex; align-items: baseline; gap: 10px; height: 46px; padding: 12px 22px 0; border-radius: 10px 10px 0 0; color: var(--h-on-2); text-decoration: none; font: 600 15px/1 var(--pm-font-sans); background: linear-gradient(180deg, rgb(255 230 180 / .06), rgb(0 0 0 / .38)), linear-gradient(rgb(70 22 10 / .52), rgb(40 12 6 / .58)), url("../../assets/house/oak.webp") 0 0 / 512px 512px, #3A1A10; border: 1px solid #2A1208; border-bottom: 0; box-shadow: inset 0 1px 0 rgb(255 220 170 / .15), inset 0 -10px 12px -8px rgb(0 0 0 / .55); } [data-view-slot="market"] .h-mkt-tabs a small { font: 600 10px/1 var(--pm-font-sans); letter-spacing: .22em; opacity: .8; } [data-view-slot="market"] .h-mkt-tabs a:hover { color: var(--h-on); } [data-view-slot="market"] .h-mkt-tabs a[aria-selected="true"] { color: var(--h-on); height: 50px; margin-top: -4px; padding-top: 16px; z-index: 2; background: linear-gradient(180deg, rgb(255 230 180 / .14), transparent), var(--mk-wood-tab); box-shadow: inset 0 1px 0 rgb(255 220 170 / .3); } [data-view-slot="market"] .h-mkt-tabs a[aria-selected="true"]::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--pm-accent); } /* 盖住柜体上沿的接缝 */ [data-view-slot="market"] .h-mkt-tabs a[aria-selected="true"]::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: -3px; height: 5px; background: linear-gradient(rgb(70 22 10 / .4), rgb(70 22 10 / .4)), #5A3020; } [data-view-slot="market"] .h-mkt-tabs a:focus-visible { outline: 2px solid #F1DDA4; outline-offset: -4px; } /* 柜体：页签下面的整块木作；两个房间共用骨架、换芯 */ /* 柜体是“家具”：桃花心木（橡木纹 + 红褐压暗），与墙上的胡桃木护墙板区分开；内圈一道黄铜嵌线 */ [data-view-slot="market"] .h-mkt-case { --mk-wood: linear-gradient(rgb(70 22 10 / .52), rgb(40 12 6 / .58)), url("../../assets/house/oak.webp") 0 0 / 512px 512px, #4A2416; position: relative; padding: 24px; border-radius: 4px 8px 8px 8px; border: 1px solid #2A1208; background: linear-gradient(180deg, rgb(255 230 180 / .12), transparent 90px), var(--mk-wood); box-shadow: inset 0 1px 0 rgb(255 220 170 / .25), inset 0 0 0 6px rgb(0 0 0 / .12), inset 0 0 0 7px rgb(211 180 116 / .45), inset 0 0 0 8px rgb(0 0 0 / .3), var(--pm-light-x) 30px 50px -24px rgb(0 0 0 / .9), 0 2px 3px rgb(0 0 0 / .5); } /* 没露出来的那一柜不占位（源页面靠 JS 切 hidden，这里补一条兜底，免得其它 display 规则盖掉它） */ [data-view-slot="market"] .h-mkt-case[hidden] { display: none; } [data-view-slot="market"] .h-mkt-case__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; flex-wrap: nowrap; padding: 4px 4px 22px; } [data-view-slot="market"] .h-mkt-case__bar .h-mkt-count { margin-left: 0; padding-bottom: 6px; white-space: nowrap; color: var(--h-on-2); font-size: var(--pm-fs-sm); } [data-view-slot="market"] .h-mkt-case__bar .h-mkt-count b { color: var(--h-on); font-family: var(--pm-font-serif); font-size: 1.125rem; } /* —— 印室的筛选：抽屉拉手名签。黄铜签框里插一张象牙签，下面挂一只铜杯形拉手； 选中 = 签换成铜绿底金字，拉手被拉出一点（拉手本体在 page-shell.css） —— */ [data-view-slot="market"] .h-mkt-filters { display: grid; gap: 12px 14px; min-width: 0; } [data-view-slot="market"] .h-mkt-filters--pulls { grid-template-columns: repeat(4, max-content); position: relative; padding: 2px 0; } /* 两层抽屉之间一道暗缝 */ [data-view-slot="market"] .h-mkt-filters--pulls::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .45), rgb(255 220 170 / .14)); } [data-view-slot="market"] .h-mkt-filters--pulls .h-pull__frame { min-width: 132px; } [data-view-slot="market"] .h-mkt-filters .h-pull__label { display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; padding: 5px 12px 6px 8px; } /* 印格：三列，每格多一行用途说明 */ [data-view-slot="market"] .h-mkt-drawer { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-view-slot="market"] .h-mkt-drawer .h-cell { grid-template-columns: 116px 1fr; justify-items: start; align-items: center; gap: 6px 18px; padding: 20px 20px 18px; align-content: center; } [data-view-slot="market"] .h-mkt-drawer .h-seal { grid-row: 1 / span 4; } [data-view-slot="market"] .h-mkt-drawer .h-label { min-width: 0; justify-self: start; } [data-view-slot="market"] .h-mkt-drawer .h-cell__meta { text-align: left; } /* 抽屉本体也换成家具木 */ [data-view-slot="market"] .h-mkt-drawer { background: linear-gradient(rgb(20 6 2 / .35), rgb(20 6 2 / .35)), linear-gradient(rgb(70 22 10 / .52), rgb(40 12 6 / .58)), url("../../assets/house/oak.webp") 0 0 / 512px 512px, #3A1A10; } [data-view-slot="market"] .h-mkt-desc { font-size: 13px; line-height: 1.6; color: var(--h-on-2); margin: 0; } /* 印格上沿的小铜签条：格号，像活字盘上的格子编号 */ [data-view-slot="market"] .h-mkt-drawer .h-cell::before { content: attr(data-no); position: absolute; right: 10px; top: 8px; font: 600 10px/1 var(--pm-font-serif); color: rgb(241 221 164 / .7); letter-spacing: .1em; } /* 印面族：族纹比个体纹样粗——先认出“哪一族”，再看“哪一枚” */ [data-view-slot="market"] .h-mkt-drawer .h-seal__face svg { stroke-width: 1.6; } [data-view-slot="market"] .h-mkt-drawer .h-seal__face svg .fam { stroke-width: 2.6; } [data-view-slot="market"] .h-mkt-drawer .h-cell > .h-accession { grid-column: 1 / -1; justify-self: start; } /* —— 器物柜的筛选：玻璃页签。一片磨砂玻璃，四角铜夹；选中 = 玻璃背后点了灯 —— */ /* 工具类扩到 12 类后一枚排不下 1366 一行：改换行，行距 8px，不许横向溢出 */ [data-view-slot="market"] .h-mkt-filters--glass { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } [data-view-slot="market"] .h-mkt-filters .h-glasstab { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 0 13px 0 10px; white-space: nowrap; } /* 器物柜柜芯：墨蓝绒背板 + 柜顶一道冠线 */ [data-view-slot="market"] .h-mkt-cabinet { padding: 18px; border-radius: 3px; background: linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .25)), url("../../assets/house/velvet-ink.webp") 0 0 / 256px 256px, #1C2840; box-shadow: inset 0 0 0 2px #6E5428, inset 0 0 0 4px rgb(0 0 0 / .45), inset 0 12px 30px rgb(0 0 0 / .55); } [data-view-slot="market"] .h-mkt-cabinet .h-vitrines { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 陈列格木框：胡桃木贴图放大到 1024 并错开，避免护墙板接缝落进窄框里 */ [data-view-slot="market"] .h-mkt-cabinet .h-vitrine { background: linear-gradient(rgb(10 8 6 / .3), rgb(10 8 6 / .3)), url("../../assets/house/walnut.webp") -120px 0 / 1024px 1024px, #2E2016; } [data-view-slot="market"] .h-mkt-cabinet .h-object svg { width: 64px; height: 64px; } [data-view-slot="market"] .h-mkt-cabinet .h-object::after { width: 88px; } [data-view-slot="market"] .h-mkt-cabinet .h-vitrine__label a { color: var(--h-on); } [data-view-slot="market"] .h-vitrine__tag { color: #2A2116; } [data-view-slot="market"] .h-mkt-vmeta { font: 12px var(--pm-font-mono); color: var(--h-on-2); margin-top: 4px; } /* 分类小徽标与卡上的分类名：拉手签、玻璃页签、印格、陈列格标签上各带一枚 */ [data-view-slot="market"] .h-mkt-filters .h-glasstab .h-mkt-ware { color: #E2C78A; } [data-view-slot="market"] .h-mkt-filters .h-glasstab[aria-pressed="true"] .h-mkt-ware { color: #1C2840; } /* skill 分类印记（小号）：铜圈两道 + 铜绿底 + 象牙族纹 */ [data-view-slot="market"] .h-mkt-mark { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #F3EBD6; background: radial-gradient(circle at 38% 32%, #1E8A6E, #116E56 60%, #0B4A3A); box-shadow: 0 0 0 1.5px #8A6C3A, 0 0 0 2.5px #3A2A12, inset 0 -1px 2px rgb(0 0 0 / .35); } [data-view-slot="market"] .h-mkt-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; } /* 工具器物（小号线描） */ [data-view-slot="market"] .h-mkt-ware { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; } [data-view-slot="market"] .h-mkt-ware svg { width: 20px; height: 20px; } [data-view-slot="market"] .h-mkt-cat { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1.3 var(--pm-font-sans); letter-spacing: .04em; color: #CFE2DC; } [data-view-slot="market"] .h-mkt-cat--tool { color: var(--h-on-2); } [data-view-slot="market"] .h-mkt-cat--tool .h-mkt-ware { color: #D9BA78; } [data-view-slot="market"] .h-mkt-host { font: 12px/1.4 var(--pm-font-mono); color: #E2C78A; margin-top: 2px; overflow-wrap: anywhere; } [data-view-slot="market"] .h-mkt-host::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 1px; border-radius: 50%; background: #6FD6E3; box-shadow: 0 0 0 2px rgb(111 214 227 / .25); } /* 空格与页脚说明 */ [data-view-slot="market"] .h-mkt-none { grid-column: 1 / -1; text-align: center; padding: 30px 0; color: var(--h-on-2); font-family: var(--pm-font-serif); } [data-view-slot="market"] .h-mkt-note { margin-top: 28px; text-align: center; font-size: var(--pm-fs-sm); color: var(--h-on-2); max-width: 46em; margin-inline: auto; } @media (max-width: 999px) { [data-view-slot="market"] .h-mkt-drawer { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-view-slot="market"] .h-mkt-cabinet .h-vitrines { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 699px) { [data-view-slot="market"] .h-mkt-drawer, [data-view-slot="market"] .h-mkt-cabinet .h-vitrines { grid-template-columns: 1fr; } [data-view-slot="market"] .h-mkt-head { grid-template-columns: 1fr; } [data-view-slot="market"] .h-mkt-case { padding: 14px; } } @media (max-width: 1199px) { [data-view-slot="market"] .h-mkt-filters--glass { display: grid; grid-template-columns: repeat(4, max-content); } } @media (max-width: 899px) { [data-view-slot="market"] .h-mkt-case__bar { grid-template-columns: minmax(0, 1fr); } [data-view-slot="market"] .h-mkt-case__bar .h-mkt-count { justify-self: end; padding-bottom: 0; } } /* 窄屏（<600）：印格改成单列——铜印 84px 居中在上，文字在下 */ @media (max-width: 599px) { [data-view-slot="market"] .h-mkt-drawer .h-cell { grid-template-columns: 1fr; justify-items: center; text-align: center; } [data-view-slot="market"] .h-mkt-drawer .h-seal { grid-row: auto; width: 84px; height: 84px; } [data-view-slot="market"] .h-mkt-drawer .h-seal__face { width: 50px; height: 50px; } [data-view-slot="market"] .h-mkt-drawer .h-seal__face svg { width: 36px; height: 36px; } [data-view-slot="market"] .h-mkt-drawer .h-label { justify-self: center; } [data-view-slot="market"] .h-mkt-drawer .h-cell__meta { text-align: center; } [data-view-slot="market"] .h-mkt-drawer .h-cell > .h-sample-flag { justify-self: center; } } /* 窄屏：横向签条 + scroll-snap；内边距留给焦点环、拉手和投影，免得被滚动容器裁掉 */ @media (max-width: 699px) { [data-view-slot="market"] .h-mkt-filters--pulls, [data-view-slot="market"] .h-mkt-filters--glass { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; padding: 6px 6px 10px; margin: -6px -6px 0; scrollbar-width: thin; scrollbar-color: #8A6C3A transparent; } [data-view-slot="market"] .h-mkt-filters--pulls::before { display: none; } [data-view-slot="market"] .h-mkt-filters--pulls .h-pull__frame { min-width: 0; } [data-view-slot="market"] .h-mkt-filters > * { flex: none; scroll-snap-align: start; } } /* 关闭纹理（?tex=off / html.pm-tex-off） */ html.pm-tex-off [data-view-slot="market"] .h-mkt-tabs a, html.pm-tex-off [data-view-slot="market"] .h-mkt-tabs, html.pm-tex-off [data-view-slot="market"] .h-mkt-case, html.pm-tex-off [data-view-slot="market"] .h-mkt-drawer, html.pm-tex-off [data-view-slot="market"] .h-mkt-cabinet, html.pm-tex-off [data-view-slot="market"] .h-mkt-cabinet .h-vitrine { background-image: none !important; } /* ========================================================================== C. 两页共用：卡上的“下载”钮（.h-dl，样式本体在 page-shell.css §36） ========================================================================== */ /* 钮的形是 .h-dl__seal 里的圆印 + 一行字，元素用