style: 调整资产悬停操作与详情间距
This commit is contained in:
@@ -412,7 +412,7 @@ async function removeAsset() {
|
|||||||
:src="selectedAsset.publicUrl"
|
:src="selectedAsset.publicUrl"
|
||||||
:alt="selectedAsset.name"
|
:alt="selectedAsset.name"
|
||||||
preview
|
preview
|
||||||
object-fit="contain"
|
object-fit="cover"
|
||||||
class="asset-management-preview"
|
class="asset-management-preview"
|
||||||
/>
|
/>
|
||||||
<div class="asset-management-fields">
|
<div class="asset-management-fields">
|
||||||
@@ -497,10 +497,20 @@ async function removeAsset() {
|
|||||||
background: linear-gradient(to top, rgb(0 0 0 / 0.84) 0, rgb(0 0 0 / 0.35) 42%, transparent 70%);
|
background: linear-gradient(to top, rgb(0 0 0 / 0.84) 0, rgb(0 0 0 / 0.35) 42%, transparent 70%);
|
||||||
}
|
}
|
||||||
.asset-library-actions {
|
.asset-library-actions {
|
||||||
@apply flex self-end items-center gap-1 mb-[10px];
|
@apply absolute top-[10px] left-[10px] flex items-center gap-1 opacity-0 pointer-events-none;
|
||||||
|
transform: translateY(-4px);
|
||||||
|
transition:
|
||||||
|
opacity 0.18s ease,
|
||||||
|
transform 0.18s ease;
|
||||||
|
}
|
||||||
|
.asset-library-card:hover .asset-library-actions,
|
||||||
|
.asset-library-card:focus-visible .asset-library-actions,
|
||||||
|
.asset-library-card:focus-within .asset-library-actions {
|
||||||
|
@apply opacity-100 pointer-events-auto;
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
.asset-overlay-button {
|
.asset-overlay-button {
|
||||||
@apply text-white bg-black/35 backdrop-blur-sm;
|
@apply text-white bg-black/45 backdrop-blur-sm;
|
||||||
}
|
}
|
||||||
.asset-overlay-button:hover {
|
.asset-overlay-button:hover {
|
||||||
@apply text-white bg-black/60;
|
@apply text-white bg-black/60;
|
||||||
@@ -526,6 +536,12 @@ async function removeAsset() {
|
|||||||
.asset-management-fields {
|
.asset-management-fields {
|
||||||
@apply min-w-0;
|
@apply min-w-0;
|
||||||
}
|
}
|
||||||
|
.asset-management-fields :deep(.n-form-item) {
|
||||||
|
@apply mb-4;
|
||||||
|
}
|
||||||
|
.asset-management-fields :deep(.n-form-item-label) {
|
||||||
|
@apply pb-2;
|
||||||
|
}
|
||||||
.asset-detail-grid {
|
.asset-detail-grid {
|
||||||
@apply grid grid-cols-[88px_minmax(0,_1fr)] gap-x-4 gap-y-2 mt-1 p-3 bg-(--app-subtle) text-xs;
|
@apply grid grid-cols-[88px_minmax(0,_1fr)] gap-x-4 gap-y-2 mt-1 p-3 bg-(--app-subtle) text-xs;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user