firefox image viewer

javascript/imageViewer.js

@@ -54,8 +54,6 @@ function modalKeyHandler(event) {
 }
 
 function showModal(event) {
-  // console.log('showModal', event);
-  // const source = gradioApp().querySelectorAll('.gradio-gallery > div > img')[0];
   const source = event.target || event.srcElement;
   const modalImage = gradioApp().getElementById('modalImage');
   const lb = gradioApp().getElementById('lightboxModal');
@@ -125,7 +123,7 @@ function galleryClickEventHandler(event) {
 }
 
 function initImageViewer() {
-  const galleryPreview = gradioApp().querySelector('.gradio-gallery > div.preview')
+  const galleryPreview = gradioApp().querySelector('.gradio-gallery > div.preview');
   if (galleryPreview) {
     const fullImgPreview = galleryPreview.querySelectorAll('img');
     if (fullImgPreview.length > 0) {
@@ -133,7 +131,6 @@ function initImageViewer() {
       fullImgPreview.forEach(setupImageForLightbox);
     }
   }
-
   if (imageViewerInitialized) return;
   imageViewerInitialized = true;
 

javascript/style.css

@@ -512,12 +512,17 @@ div.controlnet_main_options { display: grid; grid-template-columns: 1fr 1fr; gri
 
 .splash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; display: block; text-align: center; }
 .splash-img { margin: 10% auto 0 auto; width: 512px; background-repeat: no-repeat; height: 512px; animation: move 5s infinite alternate; }
-@keyframes move {
-  from { background-position-x: 0, -40px; }
-  to { background-position-x: 0, 40px; }
-}
 .loading { color: white; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); }
 .loader { width: 300px; height: 300px; border: var(--spacing-md) solid transparent; border-radius: 50%; border-top: var(--spacing-md) solid var(--primary-600); animation: spin 4s linear infinite; position: relative; }
 .loader::before, .loader::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; right: 6px; border-radius: 50%; border: var(--spacing-md) solid transparent; }
 .loader::before { border-top-color: var(--primary-900); animation: 3s spin linear infinite; }
 .loader::after { border-top-color: var(--primary-300); animation: spin 1.5s linear infinite; }
+
+@keyframes move {
+  from { background-position-x: 0, -40px; }
+  to { background-position-x: 0, 40px; }
+}
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}