Enhance modal styling and improve trigger words display logic

static/css/style.css

@@ -6,7 +6,7 @@
 
     /* Color System */
     --lora-accent: oklch(68% 0.28 256);
-    --lora-surface: oklch(100% 0 0 / 0.4);
+    --lora-surface: oklch(100% 0 0 / 0.95);
     --lora-border: oklch(90% 0.02 256 / 0.15);
     --lora-text: oklch(95% 0.02 256);
     --lora-error: oklch(75% 0.32 29);
@@ -299,6 +299,7 @@ body.modal-open {
     border-radius: 12px;
     padding: var(--space-3);
     border: 1px solid var(--lora-border);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
 .carousel {
@@ -424,15 +425,79 @@ body.modal-open {
 }
 
 .model-link a {
-    color: #34b4eb;
+    color: var(--lora-accent);
     text-decoration: none;
-    font-size: 1.3em;
+    font-size: 1.1em;
-    opacity: 0.9;
     transition: opacity 0.2s;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    text-shadow: none;
 }
 
 .model-link a:hover {
-    opacity: 1;
+    opacity: 0.8;
-    text-decoration: underline;
+    text-decoration: none;
+}
+
+.modal-content h2 {
+    color: var(--text-color);
+    margin-bottom: var(--space-2);
+    font-size: 1.5em;
+}
+
+.description {
+    color: var(--text-color);
+    margin: var(--space-2) 0;
+    line-height: 1.4;
+}
+
+.trigger-words {
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: 8px;
+    padding: var(--space-2);
+    margin: var(--space-2) 0;
+}
+
+.trigger-words strong {
+    display: block;
+    margin-bottom: var(--space-1);
+    color: var(--text-color);
+}
+
+.word-list {
+    color: var(--lora-accent);
+    font-size: 1.1em;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+}
+
+.copy-btn {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: var(--space-1);
+    margin-left: var(--space-1);
+    color: var(--lora-accent);
+    opacity: 0.8;
+    transition: opacity 0.2s;
+}
+
+.copy-btn:hover {
+    opacity: 1;
+}
+
+.close {
+    position: absolute;
+    top: var(--space-2);
+    right: var(--space-2);
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    font-size: 1.5em;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+.close:hover {
+    opacity: 1;
 }

static/js/script.js

@@ -180,12 +180,14 @@ function showModal(lora) {
         <div class="description">About this version: ${lora.description ? lora.description : 'N/A'}</div>
         <div class="trigger-words">
           <strong>Trigger Words:</strong>
-        <span class="word-list">${lora.trainedWords ? lora.trainedWords.join(', ').toUpperCase() : 'N/A'}</span>
+          <span class="word-list">${lora.trainedWords?.length ? lora.trainedWords.join(', ').toUpperCase() : 'N/A'}</span>
-        <button class="copy-btn" onclick="navigator.clipboard.writeText('${lora.trainedWords ? lora.trainedWords.join(', ').toUpperCase() : ''}')">
+          ${lora.trainedWords?.length ? `
+          <button class="copy-btn" onclick="navigator.clipboard.writeText('${lora.trainedWords.join(', ').toUpperCase()}')">
             <svg width="16" height="16" viewBox="0 0 24 24">
                 <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
             </svg>
           </button>
+          ` : ''}
         </div>
         <div class="model-link">
           <a href="https://civitai.com/models/${lora.modelId}?modelVersionId=${lora.id}" target="_blank">more details on CivitAI</a>