Refactor Persistent Queue UI for improved image handling and gallery view

This commit is contained in:
Simon Cordt
2025-09-24 09:38:13 +02:00
parent 6ecd0cdce7
commit 17b1a4d8ea
2 changed files with 135 additions and 36 deletions
+11 -1
View File
@@ -15,7 +15,17 @@
.pqueue-status-success{color:var(--green-500)}
.pqueue-status-error{color:var(--red-500)}
.pqueue-empty{opacity:.7;font-size:.9rem;padding:.25rem 0}
.pqueue-thumbs-grid{display:grid;grid-template-columns:repeat(2, 96px);gap:6px}
.pqueue-thumbs-grid{display:grid;grid-template-columns:repeat(1, 96px);gap:6px}
.pqueue-thumb{width:96px;height:96px;object-fit:cover;border-radius:4px;cursor:pointer}
.pqueue-thumb-wrap{position:relative;width:96px;height:96px}
.pqueue-batch-badge{position:absolute;right:4px;bottom:4px;padding:2px 6px;border-radius:10px;background:rgba(0,0,0,0.7);color:#fff;font-size:.75rem;line-height:1}
.pqueue-gallery-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.65);z-index:100000}
.pqueue-gallery{position:relative;max-width:92vw;max-height:92vh}
.pqueue-gallery-img{max-width:92vw;max-height:92vh;border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,.6)}
.pqueue-gallery-counter{position:absolute;left:50%;transform:translateX(-50%);bottom:-28px;color:#fff;font-size:.85rem;opacity:.9}
.pqueue-gallery-close{position:absolute;top:-36px;right:0;background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}
.pqueue-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);border:none;color:#fff;font-size:24px;cursor:pointer;width:36px;height:36px;border-radius:18px}
.pqueue-gallery-prev{left:-44px}
.pqueue-gallery-next{right:-44px}
.pqueue-progress-wrap{width:100%;height:8px;background:#1f2a1f;border-radius:4px;overflow:hidden;margin-top:6px}
.pqueue-progress-bar{height:100%;width:0;background:#22c55e;transition:width .3s ease}