fix: render asset tabs as ratio-preserving grid
This commit is contained in:
@@ -785,28 +785,19 @@ input, textarea {
|
||||
}
|
||||
|
||||
.asset-strip {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
align-items: start;
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
padding-bottom: 4px;
|
||||
scroll-snap-type: x proximity;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255,255,255,0.18) transparent;
|
||||
}
|
||||
|
||||
.asset-strip::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.asset-strip::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.16);
|
||||
}
|
||||
|
||||
.asset-tile {
|
||||
flex: 0 0 clamp(136px, 12vw, 172px);
|
||||
scroll-snap-align: start;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.035);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
|
||||
@@ -820,7 +811,6 @@ input, textarea {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(230,245,120,0.22),
|
||||
0 18px 50px -34px rgba(230,245,120,0.55);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.asset-tile:focus-visible {
|
||||
@@ -831,7 +821,6 @@ input, textarea {
|
||||
.asset-tile__thumb {
|
||||
position: relative;
|
||||
display: grid;
|
||||
height: 118px;
|
||||
width: 100%;
|
||||
place-items: center;
|
||||
overflow: visible;
|
||||
@@ -841,7 +830,9 @@ input, textarea {
|
||||
}
|
||||
|
||||
.asset-tile__thumb > img {
|
||||
max-height: 118px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.asset-tile__state {
|
||||
@@ -867,7 +858,10 @@ input, textarea {
|
||||
}
|
||||
|
||||
.asset-tile__body {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
@@ -1074,8 +1068,8 @@ input, textarea {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.asset-tile {
|
||||
flex-basis: 142px;
|
||||
.asset-strip {
|
||||
grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
|
||||
}
|
||||
|
||||
.asset-detail-drawer {
|
||||
|
||||
@@ -82,7 +82,7 @@ function AssetTile({ template, asset, onOpen }: {
|
||||
{template.required && <span className="shrink-0 text-[9px] text-[#e6f578]/75">必备</span>}
|
||||
</div>
|
||||
<p className="mt-1 line-clamp-2 text-left text-[10px] leading-relaxed text-white/42">{template.description}</p>
|
||||
<div className="mt-2 flex items-center justify-between gap-2">
|
||||
<div className="mt-auto flex items-center justify-between gap-2 pt-2">
|
||||
<span className="font-mono text-[9px] text-white/34">{ASPECT_PX[template.aspectRatio]}</span>
|
||||
<span className={`font-mono text-[10px] ${ready ? 'text-[#dff5a8]' : 'text-white/28'}`}>
|
||||
{ready ? `L${asset!.derivationLevel}` : 'EMPTY'}
|
||||
|
||||
Reference in New Issue
Block a user