From cdfe7beac8c6ad555f21eef17282d3ed528663ad Mon Sep 17 00:00:00 2001 From: OpenClaw Sub-agent Date: Mon, 3 Aug 2026 17:16:02 +1000 Subject: [PATCH] feat: immersive lightbox preview + remove upload HUD MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Preview modal redesigned: fullscreen dark immersive lightbox (no white shell) — frosted gradient top bar (filename + position + close), centered media with soft shadow, frosted bottom bar (mime + blue Download pill), translucent circular nav buttons, mobile touch-swipe navigation - Upload progress HUD (bottom-right panel) removed; upload progress now surfaces via the existing toast (x/y uploading → ✓ uploaded); cancelAll / hud state dropped - CSS: lightbox-* replaces preview-* and upload-hud blocks; zero leftover refs --- links/templates/links/files/list.html | 507 ++++++++++++-------------- 1 file changed, 224 insertions(+), 283 deletions(-) diff --git a/links/templates/links/files/list.html b/links/templates/links/files/list.html index b2e9a89..6331e49 100644 --- a/links/templates/links/files/list.html +++ b/links/templates/links/files/list.html @@ -327,38 +327,100 @@ } .apple-toast svg { width: 1rem; height: 1rem; color: #30d158; flex: none; } - /* ---------- Upload HUD (frosted card) ---------- */ - .upload-hud { - position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 9999; - width: 20rem; max-width: calc(100vw - 2rem); - background: rgba(255, 255, 255, 0.88); - -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); - border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--apple-radius-md); - box-shadow: var(--apple-shadow-lift); overflow: hidden; + /* ---------- Preview lightbox (immersive, no white shell) ---------- */ + .lightbox { + position: fixed; inset: 0; z-index: 100; + display: flex; flex-direction: column; + background: rgba(8, 8, 10, 0.9); + -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); } - .hud-header { - display: flex; align-items: center; justify-content: space-between; - padding: 0.85rem 1.1rem; cursor: pointer; user-select: none; - border-bottom: 1px solid var(--apple-separator); + /* Top frosted bar — filename + position + close */ + .lightbox-top { + position: absolute; top: 0; left: 0; right: 0; z-index: 30; + display: flex; align-items: center; justify-content: space-between; gap: 1rem; + padding: 0.8rem 1.1rem; + background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0)); + -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } - .hud-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--apple-text); } - .hud-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; } - .hud-dot.live { background: var(--apple-blue); animation: hud-pulse 1.2s ease-in-out infinite; } - .hud-dot.idle { background: #c7c7cc; } - @keyframes hud-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } - .hud-cancel { font-size: 0.75rem; font-weight: 600; color: var(--apple-red); padding: 0.15rem 0.5rem; border-radius: 980px; background: none; border: none; cursor: pointer; } - .hud-cancel:hover { background: rgba(255, 59, 48, 0.10); } - .hud-chev { width: 1rem; height: 1rem; color: #8e8e93; transition: transform 0.2s ease; } + .lightbox-title { display: flex; align-items: baseline; gap: 0.7rem; min-width: 0; } + .lightbox-name { + font-size: 0.92rem; font-weight: 600; color: #fff; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + } + .lightbox-meta { font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.55); flex: none; } + .lightbox-close { + width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none; + display: flex; align-items: center; justify-content: center; + background: rgba(255,255,255,0.14); color: #fff; border: none; cursor: pointer; + -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); + transition: background 0.2s ease, transform 0.2s var(--apple-ease); + } + .lightbox-close:hover { background: rgba(255,255,255,0.26); } + .lightbox-close:active { transform: scale(0.92); } + .lightbox-close svg { width: 1.05rem; height: 1.05rem; } - .hud-body { max-height: 15rem; overflow-y: auto; } - .hud-empty { padding: 1.25rem 1rem; text-align: center; font-size: 0.75rem; color: var(--apple-gray); } - .hud-item { padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--apple-separator); } - .hud-item:last-child { border-bottom: none; } - .hud-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; } - .hud-item-name { font-size: 0.75rem; font-weight: 600; color: var(--apple-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11rem; } - .hud-item-status { font-size: 0.75rem; font-weight: 600; flex: none; margin-left: 0.5rem; } - .hud-bar { height: 0.375rem; border-radius: 980px; background: rgba(0, 0, 0, 0.06); overflow: hidden; } - .hud-bar-fill { height: 100%; border-radius: 980px; transition: width 0.2s ease; } + /* Stage — media centred on the dark canvas, no borders */ + .lightbox-stage { + flex: 1 1 auto; min-height: 0; position: relative; + display: flex; align-items: center; justify-content: center; + padding: 4.5rem 4.75rem 3.5rem; + } + .lightbox-stage img, + .lightbox-stage video { + display: block; max-width: 100%; max-height: 100%; + width: auto; height: auto; object-fit: contain; + border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); + } + .lightbox-nav { + position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; + width: 3rem; height: 3rem; border-radius: 50%; + display: flex; align-items: center; justify-content: center; + background: rgba(255,255,255,0.12); color: #fff; border: none; cursor: pointer; + -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); + transition: background 0.2s ease, transform 0.2s var(--apple-ease); + } + .lightbox-nav:hover { background: rgba(255,255,255,0.24); } + .lightbox-nav:active { transform: translateY(-50%) scale(0.92); } + .lightbox-nav svg { width: 1.35rem; height: 1.35rem; } + + /* Bottom frosted bar — meta + download */ + .lightbox-bottom { + position: absolute; bottom: 0; left: 0; right: 0; z-index: 30; + display: flex; align-items: center; justify-content: space-between; gap: 1rem; + padding: 0.75rem 1.1rem; + background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0)); + -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); + } + .lightbox-meta-row { display: flex; align-items: center; gap: 0.7rem; font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.6); min-width: 0; } + .lightbox-mime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .lightbox-dl { + display: inline-flex; align-items: center; gap: 0.4rem; flex: none; + min-height: 2.15rem; padding: 0.4rem 1rem; border-radius: 980px; + background: var(--apple-blue); color: #fff; + font-size: 0.82rem; font-weight: 600; text-decoration: none; + box-shadow: 0 6px 18px rgba(0, 113, 227, 0.35); + transition: background 0.2s ease, transform 0.2s var(--apple-ease); + } + .lightbox-dl:hover { background: #2487e6; } + .lightbox-dl:active { transform: scale(0.96); } + .lightbox-dl svg { width: 0.95rem; height: 0.95rem; } + + /* Non-previewable fallback on dark */ + .lightbox-fallback { + display: flex; flex-direction: column; align-items: center; gap: 1rem; + text-align: center; padding: 2rem 2.5rem; max-width: 26rem; color: #fff; + } + .lightbox-fallback svg { width: 3.6rem; height: 3.6rem; color: rgba(255,255,255,0.35); } + .lightbox-fallback .fb-title { font-size: 1rem; font-weight: 600; } + .lightbox-fallback .fb-sub { font-size: 0.85rem; color: rgba(255,255,255,0.55); } + + @media (max-width: 640px) { + .lightbox-stage { padding: 4rem 0.75rem 3.25rem; } + .lightbox-nav { width: 2.5rem; height: 2.5rem; } + .lightbox-nav svg { width: 1.1rem; height: 1.1rem; } + .lightbox-bottom, .lightbox-top { padding: 0.7rem 0.85rem; } + .lightbox-name { font-size: 0.84rem; max-width: 45vw; } + } /* ---------- Modals (Apple style) ---------- */ .apple-modal-bg { @@ -397,38 +459,6 @@ .text-link { font-size: 0.875rem; font-weight: 600; color: var(--apple-red); background: none; border: none; cursor: pointer; padding: 0; } .text-link:hover { text-decoration: underline; } - /* ---------- Preview modal ---------- */ - .preview-bg { - position: fixed; inset: 0; z-index: 50; - display: flex; align-items: center; justify-content: center; padding: 1rem; - background: rgba(0, 0, 0, 0.82); - -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); - } - .preview-shell { - position: relative; background: #fff; border-radius: var(--apple-radius-md); - box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); - display: flex; flex-direction: column; overflow: hidden; - max-width: min(92vw, 1280px); max-height: 92vh; width: max-content; min-width: 300px; - } - .preview-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--apple-separator); flex: none; } - .preview-head h3 { font-size: 0.9rem; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .preview-stage { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--apple-bg); position: relative; } - .preview-foot { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.25rem; border-top: 1px solid var(--apple-separator); flex: none; background: #fff; } - .preview-foot .meta { font-size: 0.75rem; color: var(--apple-gray); display: flex; gap: 0.75rem; } - .preview-nav { - position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; - width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; - align-items: center; justify-content: center; - background: rgba(0,0,0,0.4); color: #fff; border: none; cursor: pointer; - transition: background 0.2s ease; - } - .preview-nav:hover { background: rgba(0,0,0,0.6); } - .preview-nav svg { width: 1.25rem; height: 1.25rem; } - .preview-fallback { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 2.5rem; width: 26rem; } - .preview-fallback svg { width: 4rem; height: 4rem; color: #c7c7cc; } - .preview-fallback .fb-title { font-size: 1rem; font-weight: 600; color: var(--apple-text); } - .preview-fallback .fb-sub { font-size: 0.875rem; color: var(--apple-gray); } - /* ---------- Accessibility: visible keyboard focus ---------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--apple-blue); outline-offset: 3px; border-radius: 12px; @@ -441,7 +471,6 @@ .file-row { padding: 0.85rem 1.1rem; } } @media (prefers-reduced-motion: reduce) { - .hud-dot.live { animation: none !important; } .apple-btn, .icon-btn, .file-row, .badge, .fan-card { transition: none !important; } } @@ -805,160 +834,84 @@ - -
-
- -
-
- - - - u.status === 'uploading').length + ' / ' + uploads.length"> - {% trans "Uploads" %} - -
-
- - -
-
- - -
- -
- {% trans "Drag files anywhere or click Upload Files." %} -
- -
- -
-
-
-
- - +