Enhance modal styling and improve trigger words display logic

This commit is contained in:
Will Miao
2025-01-29 23:48:32 +08:00
parent 4abcc75092
commit 9656f136c6
2 changed files with 101 additions and 34 deletions

View File

@@ -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;
opacity: 0.9;
font-size: 1.1em;
transition: opacity 0.2s;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-shadow: none;
}
.model-link a:hover {
opacity: 0.8;
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;
text-decoration: underline;
}