125 lines
4.7 KiB
SCSS
125 lines
4.7 KiB
SCSS
// 这是为了覆盖 Payload 默认表格样式的 SCSS
|
|
// 我们使用 CSS Grid 强制改变表格布局，从而实现 Grid 视图，同时保留 Payload 所有原生功能
|
|
|
|
.collection-list.collection-list--products,
|
|
.collection-list.collection-list--preorder-products {
|
|
table {
|
|
display: block !important;
|
|
|
|
thead {
|
|
display: none !important;
|
|
}
|
|
|
|
tbody {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
|
|
gap: 1.5rem !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
tr {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
background: var(--theme-elevation-50) !important;
|
|
border: 1px solid var(--theme-elevation-150) !important;
|
|
border-radius: 8px !important;
|
|
overflow: hidden !important;
|
|
position: relative !important;
|
|
transition: all 0.2s ease-in-out !important;
|
|
height: 100% !important;
|
|
min-height: 320px;
|
|
cursor: pointer;
|
|
text-decoration: none !important;
|
|
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
|
|
border-color: var(--theme-elevation-300) !important;
|
|
background: var(--theme-elevation-100) !important;
|
|
}
|
|
|
|
td {
|
|
display: block !important;
|
|
border: none !important;
|
|
padding: 0.5rem 1rem !important;
|
|
width: 100% !important;
|
|
white-space: normal !important;
|
|
height: auto !important;
|
|
|
|
// 1. Selector/Checkbox (Always the first column usually)
|
|
&:first-child {
|
|
position: absolute !important;
|
|
top: 10px !important;
|
|
right: 10px !important;
|
|
width: auto !important;
|
|
padding: 0 !important;
|
|
z-index: 10 !important;
|
|
background: transparent !important;
|
|
|
|
.checkbox {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
// 2. Thumbnail (First content column)
|
|
&:nth-child(2) {
|
|
padding: 0 !important;
|
|
height: 200px !important;
|
|
width: 100% !important;
|
|
overflow: hidden !important;
|
|
background: var(--theme-elevation-100) !important;
|
|
order: -1 !important; // Force to top
|
|
flex-grow: 0 !important;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
object-fit: cover !important;
|
|
display: block !important;
|
|
background: var(--theme-elevation-100);
|
|
}
|
|
.no-image {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
color: var(--theme-elevation-400);
|
|
font-size: 0.8rem;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
// 3. Title (Second content column)
|
|
&:nth-child(3) {
|
|
font-size: 1.1rem !important;
|
|
font-weight: 600 !important;
|
|
padding-top: 1rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
line-height: 1.4 !important;
|
|
flex-grow: 1 !important; // Push footer down
|
|
|
|
a {
|
|
text-decoration: none !important;
|
|
color: var(--theme-text) !important;
|
|
|
|
&:hover {
|
|
color: var(--theme-primary-500) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 4. Medusa ID or Status or Date
|
|
&:nth-child(n+4) {
|
|
font-size: 0.8rem !important;
|
|
color: var(--theme-elevation-500) !important;
|
|
padding-bottom: 0.25rem !important;
|
|
padding-top: 0 !important;
|
|
border-top: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|