From ff52ef1bbabed93afdd727a3995c3f7b04ffb9cd Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Fri, 12 May 2023 21:26:00 -0500
Subject: [PATCH] Improve lightbox slightly

---
 src/lib/components/ComfyQueue.svelte    | 2 ++
 src/lib/components/LightboxModal.svelte | 8 ++++----
 src/lib/components/Modal.svelte         | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/ComfyQueue.svelte b/src/lib/components/ComfyQueue.svelte
index 9e5c30c..0cf54e2 100644
--- a/src/lib/components/ComfyQueue.svelte
+++ b/src/lib/components/ComfyQueue.svelte
@@ -339,6 +339,7 @@
      background: var(--panel-background-fill);
 
      &:hover:not(:has(img:hover)) {
+         cursor: pointer;
          background: var(--block-background-fill);
      }
 
@@ -390,6 +391,7 @@
          object-fit: cover;
 
          &:hover {
+             cursor: pointer;
              filter: brightness(120%) contrast(120%);
          }
      }
diff --git a/src/lib/components/LightboxModal.svelte b/src/lib/components/LightboxModal.svelte
index 2c490b3..167999e 100644
--- a/src/lib/components/LightboxModal.svelte
+++ b/src/lib/components/LightboxModal.svelte
@@ -95,12 +95,12 @@
      position: absolute;
      top: 50%;
      width: auto;
-     padding: 16px;
+     padding: 60px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
-     font-size: 20px;
-     transition: 0.6s ease;
+     font-size: 40px;
+     transition: 0.3s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
@@ -113,6 +113,6 @@
 
  .modalPrev:hover,
  .modalNext:hover {
-     background-color: rgba(0, 0, 0, 0.8);
+     background-color: rgba(180, 180, 180, 0.8);
  }
 </style>
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index f0064a1..856882e 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -16,7 +16,7 @@
 		<slot name="header" />
 		<slot />
 		<!-- svelte-ignore a11y-autofocus -->
-		<button autofocus on:click={() => dialog.close()}>close modal</button>
+		<button autofocus on:click={() => dialog.close()}>Close</button>
 	</div>
 </dialog>