29 lines
2.6 KiB
CSS
29 lines
2.6 KiB
CSS
/* 资产库页 · 从 public/exact/library.html 内联 <style> 移植资产网格部分,scope 进 .library-page。
|
|
tabs/chip/toolbar/search-inline/result-meta/empty-filter 走全局 design-restraint。 */
|
|
.library-page {
|
|
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
|
|
.asset-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background .15s; position: relative; }
|
|
.asset-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-48); }
|
|
.asset-thumb { aspect-ratio: 1; }
|
|
/* width:100% 必须显式给:否则 max-height 会经 aspect-ratio 把宽度也钳到 157.5px,卡片右侧露白 */
|
|
.asset-card.video .asset-thumb { width: 100%; aspect-ratio: 9/16; max-height: 280px; }
|
|
/* 音频资产无封面:默认音符占位(居中、mono 标签),点击灯箱播放 */
|
|
.lib-audio-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--black-alpha-48); }
|
|
.lib-audio-ph svg { width: 26px; height: 26px; }
|
|
.lib-audio-ph .mono { font-size: 12px; letter-spacing: .08em; }
|
|
/* 有 preview_url 显真图:铺满缩略容器、cover 裁切、继承 8px 圆角(由 .placeholder overflow:hidden 裁切) */
|
|
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
|
|
.asset-body { padding: 12px 14px; }
|
|
.asset-name { font-size: 13px; font-weight: 600; color: var(--accent-black); }
|
|
.asset-meta { font-size: 12px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
|
|
.asset-badge { position: absolute; top: 8px; left: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; padding: 2px 6px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-56); }
|
|
.asset-card { position: relative; }
|
|
/* 视频资产缩略图上的播放角标(点击整卡弹窗播放) */
|
|
.lib-play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .58); color: var(--accent-white); display: grid; place-items: center; pointer-events: none; transition: background .15s; }
|
|
.lib-play-badge svg { width: 18px; height: 18px; margin-left: 2px; }
|
|
.asset-thumb:hover .lib-play-badge { background: rgba(0, 0, 0, .76); }
|
|
}
|
|
|
|
/* 编辑模式:开启「管理资产」后,资产卡删除按钮常显(否则全局只 hover 显) */
|
|
body.edit-mode .asset-card .card-del-btn { opacity: 1 !important; pointer-events: auto !important; }
|