242 lines
8.7 KiB
CSS
242 lines
8.7 KiB
CSS
/* 走秀 / 街拍 列表页共享样式（从 RunwayLooks.astro / StreetSnaps.astro 抽出）。
|
||
两模块 UI 同构：左封面 + 右标题 + 底部 5 缩略图条带 + 侧栏筛选 + 分页 + 骨架屏。
|
||
类名保留各模块原前缀（.shows* / .snaps*），仅把加载动画 keyframes 统一为 looksProg/looksShim。
|
||
由两个列表组件在前端 frontmatter `import "@/styles/look-grid.css"` 引入，本地 <style> 已删除。 */
|
||
|
||
@reference "tailwindcss";
|
||
|
||
[x-cloak] { display: none !important; }
|
||
|
||
/* ====================== 顶部 / 主体布局 ====================== */
|
||
.showsroot,
|
||
.snapsroot {
|
||
@apply m-auto max-w-[1600px] pt-7 text-[#0a0a0a];
|
||
}
|
||
|
||
.showshead {
|
||
@apply flex justify-between items-end gap-6 py-5 pb-[26px];
|
||
}
|
||
.snapshead {
|
||
@apply flex justify-between items-end gap-6 py-5 pb-[22px];
|
||
}
|
||
.showsh1 {
|
||
@apply text-[clamp(40px,6vw,72px)] leading-[0.9] font-black tracking-[-0.02em] my-0 mb-[10px];
|
||
}
|
||
.snapsh1 {
|
||
@apply text-[clamp(34px,5.5vw,64px)] leading-[0.95] font-black tracking-[-0.02em] my-0 mb-[8px];
|
||
}
|
||
|
||
/* 已激活筛选 pills */
|
||
.showspills { @apply flex flex-wrap gap-2 pt-3.5; }
|
||
.snapspills { @apply flex flex-wrap gap-2 mb-4; }
|
||
.showspill,
|
||
.snapspill {
|
||
@apply inline-flex items-center gap-2 border-[1.5px] border-black p-[6px_10px] text-[10.5px] uppercase tracking-[0.14em] text-black bg-white;
|
||
}
|
||
.showspill .x,
|
||
.snapspill .x {
|
||
@apply inline-flex w-3.5 h-3.5 items-center justify-center border-none bg-black text-white cursor-pointer text-xs leading-none;
|
||
}
|
||
|
||
.showsbody,
|
||
.snapsbody {
|
||
@apply flex gap-[36px] items-start max-md:flex-col max-md:gap-[18px];
|
||
}
|
||
|
||
/* ====================== 左 sidebar（REFINE 筛选） ====================== */
|
||
.showsaside,
|
||
.snapsaside {
|
||
@apply flex-none w-[240px] bg-white sticky top-5 max-h-[calc(100vh-40px)] flex flex-col max-md:static max-md:max-h-none max-md:w-full;
|
||
}
|
||
.showsaside {
|
||
@apply rounded-none transition-[flex-basis] duration-250 ease-in-out;
|
||
}
|
||
.showsaside-head,
|
||
.snapsaside-head {
|
||
@apply flex items-center justify-between p-[14px_14px_12px] border-b border-black shrink-0;
|
||
}
|
||
.showsaside-h,
|
||
.snapsaside-h {
|
||
@apply text-[11px] tracking-[0.26em] uppercase font-bold m-0 leading-none transition-opacity duration-200;
|
||
}
|
||
.showsaside-body,
|
||
.snapsaside-body {
|
||
@apply p-[14px_14px_18px] overflow-y-auto flex-1 min-h-0 [scrollbar-width:thin] [scrollbar-color:#ccc_#fff];
|
||
}
|
||
|
||
/* 筛选分组 */
|
||
.showsg,
|
||
.snapsg {
|
||
@apply border-t border-[#e6e6e6] py-[12px] pb-[6px] first-of-type:border-t-0 first-of-type:pt-1;
|
||
}
|
||
.showsg-h,
|
||
.snapsg-h {
|
||
@apply flex justify-between items-center text-[11px] tracking-[0.22em] uppercase font-bold text-black mb-2 cursor-pointer select-none;
|
||
}
|
||
.showsg-right {
|
||
@apply inline-flex items-center gap-2.5;
|
||
}
|
||
.showsg-chev,
|
||
.snapsg-chev {
|
||
@apply inline-block text-[9px] leading-none text-[#999] transition-transform duration-200 ml-1;
|
||
}
|
||
.showsg-chev.is-collapsed,
|
||
.snapsg-chev.is-collapsed { @apply -rotate-90; }
|
||
|
||
/* 复选 / 单选列表 */
|
||
.showschecks,
|
||
.snapschecks {
|
||
@apply list-none mt-[10px] mb-0 p-0 max-h-[280px] overflow-y-auto [scrollbar-width:thin];
|
||
}
|
||
.showschecks li,
|
||
.snapschecks li {
|
||
@apply flex items-center gap-2 py-[5px] text-[11.5px] uppercase tracking-[0.04em] text-black cursor-pointer select-none hover:bg-[#f6f6f6];
|
||
}
|
||
.showschecks input[type="radio"],
|
||
.snapschecks input[type="radio"] {
|
||
@apply appearance-none w-3.5 h-3.5 border-[1.5px] border-black bg-white cursor-pointer shrink-0 rounded-full;
|
||
}
|
||
/* 选中态由 Alpine 状态驱动（.is-checked），不依赖原生 :checked 伪类：
|
||
@click.prevent 会阻止原生选中，伪类不可靠；实心黑圆一眼可辨 */
|
||
.showschecks input[type="radio"].is-checked,
|
||
.snapschecks input[type="radio"].is-checked {
|
||
@apply bg-white border-black;
|
||
background-image: radial-gradient(circle, #000 36%, transparent 40%);
|
||
}
|
||
|
||
.showschecks--flat li,
|
||
.snapschecks--flat li { @apply py-[4px]; }
|
||
.showschecks--flat li label,
|
||
.snapschecks--flat li label { @apply inline-flex items-center gap-2 cursor-pointer w-full; }
|
||
|
||
.showsmore {
|
||
@apply block w-full mt-[12px] text-center text-[11px] uppercase tracking-[0.22em] text-black font-bold cursor-pointer;
|
||
}
|
||
.showsclear,
|
||
.snapsclear {
|
||
@apply mt-[22px] block w-full text-left pt-[16px] border-t border-black/10 text-[11px] uppercase tracking-[0.18em] text-[#666] cursor-pointer hover:text-black transition-colors duration-150;
|
||
}
|
||
|
||
/* ====================== 右 网格 / 卡片 ====================== */
|
||
.showsmain,
|
||
.snapsmain { @apply flex-1 min-w-0; }
|
||
.snapscontent { @apply relative; }
|
||
|
||
.showsgrid,
|
||
.snapsgrid {
|
||
@apply grid grid-cols-2 gap-[22px] relative max-[560px]:grid-cols-1;
|
||
}
|
||
.showsgrid.is-loading::before,
|
||
.snapscontent.is-loading::before {
|
||
content: "";
|
||
@apply absolute -top-1 left-0 h-[2px] w-[38%] bg-black z-10;
|
||
animation: looksProg 1s ease-in-out infinite;
|
||
}
|
||
|
||
.showscard,
|
||
.snapscard {
|
||
@apply relative flex gap-[14px] no-underline text-inherit bg-white p-3 transition-colors duration-200 hover:border-black max-[700px]:flex-col max-[700px]:gap-[10px];
|
||
}
|
||
.showscard:hover .showscard-img img,
|
||
.snapscard:hover .snapscard-img img { @apply scale-104; }
|
||
|
||
.showscard-left,
|
||
.snapscard-left {
|
||
@apply flex-none w-[30%] min-w-[110px] max-[700px]:w-full max-[700px]:flex-none;
|
||
}
|
||
.showscard-img,
|
||
.snapscard-img {
|
||
@apply relative w-full aspect-[3/4] bg-[#f1f1f1] overflow-hidden rounded-none;
|
||
}
|
||
.showscard-img img,
|
||
.snapscard-img img {
|
||
@apply w-full h-full object-cover transition-transform duration-600 opacity-0;
|
||
}
|
||
.showscard-img img.is-loaded,
|
||
.snapscard-img img.is-loaded { @apply opacity-100; }
|
||
|
||
.showsspin,
|
||
.snapsspin {
|
||
@apply absolute inset-0 flex items-center justify-center text-[#bdbdbd] opacity-100 transition-opacity duration-300 pointer-events-none z-10;
|
||
}
|
||
.showscard-img.is-loaded .showsspin,
|
||
.snapscard-img.is-loaded .snapsspin,
|
||
.showscard-thumb.is-loaded .showsspin,
|
||
.snapscard-thumb.is-loaded .snapsspin { @apply opacity-0; }
|
||
|
||
.showscard-right,
|
||
.snapscard-right {
|
||
@apply flex-1 min-w-0 flex flex-col justify-between max-[700px]:w-full;
|
||
}
|
||
.showscard-info,
|
||
.snapscard-info {
|
||
@apply flex-none min-w-0 flex flex-col p-[2px_2px_0];
|
||
}
|
||
.showscard-title,
|
||
.snapscard-title {
|
||
@apply text-[15.5px] font-bold leading-[1.32] my-0 mb-[10px] text-[#111] tracking-[-0.01em] line-clamp-2 h-[41px] overflow-hidden;
|
||
}
|
||
.showscard-meta,
|
||
.snapscard-meta {
|
||
@apply text-[9.5px] text-[#888] my-0 mb-[14px] leading-[1.55] tracking-[0.04em] uppercase line-clamp-2 h-[29px] overflow-hidden;
|
||
}
|
||
|
||
.showscard-strip,
|
||
.snapscard-strip {
|
||
@apply grid grid-cols-5 gap-1 mt-[10px];
|
||
}
|
||
.showscard-thumb,
|
||
.snapscard-thumb {
|
||
@apply relative aspect-[3/4] bg-[#f1f1f1] overflow-hidden;
|
||
}
|
||
.showscard-thumb img,
|
||
.snapscard-thumb img {
|
||
@apply w-full h-full object-cover opacity-0 transition-opacity duration-450 ease-in-out;
|
||
}
|
||
.showscard-thumb img.is-loaded,
|
||
.snapscard-thumb img.is-loaded { @apply opacity-100; }
|
||
.showscard-thumb.placeholder,
|
||
.snapscard-thumb.placeholder { @apply bg-[#f6f6f6]; }
|
||
.showscard-thumb-more {
|
||
@apply absolute inset-0 bg-black/55 text-white text-[11px] font-bold tracking-[0.04em] flex items-center justify-center;
|
||
}
|
||
|
||
/* 骨架屏 */
|
||
.showscard--skel .showscard-img,
|
||
.showscard--skel .showscard-thumb,
|
||
.showscard--skel .showsline,
|
||
.snapscard--skel .snapscard-img,
|
||
.snapscard--skel .snapscard-thumb,
|
||
.snapscard--skel .snapsline {
|
||
@apply bg-[#efefef];
|
||
animation: looksShim 1.6s ease infinite;
|
||
}
|
||
|
||
/* ====================== 分页 ====================== */
|
||
.showspager,
|
||
.snappager { @apply flex flex-wrap items-center justify-center gap-2 mt-[38px]; }
|
||
.pg {
|
||
@apply min-w-[40px] h-[40px] px-3 border-[1.5px] border-black bg-white text-black text-[11px] uppercase tracking-[0.12em] font-bold cursor-pointer rounded-none transition-colors duration-200;
|
||
}
|
||
.pg.is-current { @apply bg-black text-white cursor-default; }
|
||
.pg:disabled { @apply opacity-30 cursor-default; }
|
||
.pg-ellipsis { @apply px-1 text-[#999] select-none text-[11px]; }
|
||
.pg-wrap { @apply inline-flex items-center; }
|
||
|
||
.showsempty,
|
||
.snapsempty {
|
||
@apply col-span-full p-[80px_20px] text-center text-xs tracking-[0.22em] uppercase text-[#999] border border-dashed border-[#ccc];
|
||
}
|
||
|
||
@keyframes looksProg { 0% { left: -38%; } 100% { left: 100%; } }
|
||
@keyframes looksShim { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }
|
||
|
||
/* ====================== 卡片收藏按钮（图片收藏入口） ====================== */
|
||
/* 白底细边、已收藏时仅实心黑心，尽量不使用黑底白字组件 */
|
||
.showscard-wrap { @apply relative; }
|
||
.fav-toggle {
|
||
@apply absolute right-2 top-2 z-20 grid h-9 w-9 place-items-center rounded-full border border-black/15 bg-white/85 text-black backdrop-blur-sm transition-transform duration-200 hover:scale-110 active:scale-95;
|
||
}
|
||
.fav-toggle svg { @apply h-[18px] w-[18px]; fill: none; stroke: currentColor; stroke-width: 1.6; }
|
||
.fav-toggle.is-on svg { fill: #000; stroke: #000; }
|