diff --git a/web/src/components/queue/ProcessingQueueItem.svelte b/web/src/components/queue/ProcessingQueueItem.svelte
index 3c688161..9efb218c 100644
--- a/web/src/components/queue/ProcessingQueueItem.svelte
+++ b/web/src/components/queue/ProcessingQueueItem.svelte
@@ -161,6 +161,7 @@
class="processing-item"
role="listitem"
tabindex={$queueVisible ? 0 : -1}
+ class:queue-hidden={!$queueVisible}
>
@@ -352,9 +353,10 @@
height: 90%;
padding-left: 18px;
- visibility: hidden;
+ transform: translateX(5px);
+
opacity: 0;
- transition: opacity 0.2s;
+ transition: opacity 0.15s, transform 0.15s;
mask-image: linear-gradient(
90deg,
@@ -363,11 +365,18 @@
);
}
+ .queue-hidden .file-actions {
+ visibility: hidden;
+ }
+
:global([dir="rtl"]) .file-actions {
left: 0;
right: unset;
padding-left: 0;
padding-right: 18px;
+
+ transform: translateX(-5px);
+
mask-image: linear-gradient(
-90deg,
rgba(255, 255, 255, 0) 0%,
@@ -377,8 +386,8 @@
.processing-item:hover .file-actions,
.processing-item:focus-within .file-actions {
- visibility: visible;
opacity: 1;
+ transform: none;
}
}