From 2fc7235537a23bb84b2dfc8313f6c1f53db857c4 Mon Sep 17 00:00:00 2001 From: Will Miao <13051207myq@gmail.com> Date: Mon, 17 Feb 2025 19:21:40 +0800 Subject: [PATCH] Refactor css checkpoint --- static/css/base.css | 0 static/css/components/card.css | 143 +++++++++ static/css/components/modal.css | 254 +++++++++++++++ static/css/components/toast.css | 97 ++++++ static/css/layout.css | 0 static/css/style.css | 538 +------------------------------- 6 files changed, 505 insertions(+), 527 deletions(-) create mode 100644 static/css/base.css create mode 100644 static/css/components/card.css create mode 100644 static/css/components/modal.css create mode 100644 static/css/components/toast.css create mode 100644 static/css/layout.css diff --git a/static/css/base.css b/static/css/base.css new file mode 100644 index 00000000..e69de29b diff --git a/static/css/components/card.css b/static/css/components/card.css new file mode 100644 index 00000000..02b100fe --- /dev/null +++ b/static/css/components/card.css @@ -0,0 +1,143 @@ +/* 卡片网格布局 */ +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Adjusted from 320px */ + gap: 12px; /* Reduced from var(--space-2) for tighter horizontal spacing */ + margin-top: var(--space-2); + max-width: 1400px; /* Container width control */ + margin-left: auto; + margin-right: auto; +} + +.lora-card { + background: var(--lora-surface); + border: 1px solid var(--lora-border); + border-radius: var(--border-radius-base); + backdrop-filter: blur(16px); + transition: transform 160ms ease-out; + aspect-ratio: 896/1152; + max-width: 260px; /* Adjusted from 320px to fit 5 cards */ + margin: 0 auto; +} + +.lora-card:hover { + transform: translateY(-2px); + background: oklch(100% 0 0 / 0.6); +} + +.lora-card:focus-visible { + outline: 2px solid var(--lora-accent); + outline-offset: 2px; +} + +/* Responsive adjustments */ +@media (max-width: 1400px) { + .card-grid { + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + } + + .lora-card { + max-width: 240px; + } +} + +/* Card Preview and Footer Overlay */ +.card-preview { + position: relative; + width: 100%; + height: 100%; + border-radius: var(--border-radius-base); + overflow: hidden; +} + +.card-preview img, +.card-preview video { + width: 100%; + height: 100%; + object-fit: cover; +} + +.card-footer { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(transparent 15%, oklch(0% 0 0 / 0.75)); + backdrop-filter: blur(8px); + color: white; + padding: var(--space-1); + display: flex; + justify-content: space-between; + align-items: flex-start; /* Changed from flex-end to allow for text wrapping */ + min-height: 32px; + gap: var(--space-1); /* Add gap between model info and actions */ +} + +.card-header { + position: absolute; + top: 0; + left: 0; + right: 0; + background: linear-gradient(oklch(0% 0 0 / 0.75), transparent 85%); + backdrop-filter: blur(8px); + color: white; + padding: var(--space-1); + display: flex; + justify-content: space-between; + align-items: center; + z-index: 1; + min-height: 20px; +} + +.card-actions i { + margin-left: var(--space-1); + cursor: pointer; + color: white; + transition: opacity 0.2s; + font-size: 0.9em; +} + +.card-actions i:hover { + opacity: 0.8; +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .card-grid { + grid-template-columns: minmax(260px, 1fr); /* Adjusted minimum size for mobile */ + } + + .controls { + flex-direction: column; + gap: 15px; + } + + .lora-card { + max-width: 100%; /* Allow cards to fill available space on mobile */ + } +} + +.card-actions { + flex-shrink: 0; /* Prevent actions from shrinking */ + display: flex; + gap: var(--space-1); + align-items: flex-end; /* 将图标靠下对齐 */ + align-self: flex-end; /* 将整个actions容器靠下对齐 */ +} + +.model-link { + margin-top: var(--space-1); +} + +.model-link a { + color: var(--lora-accent); + text-decoration: none; + font-size: 1.1em; + transition: opacity 0.2s; + text-shadow: none; +} + +.model-link a:hover { + opacity: 0.8; + text-decoration: none; +} \ No newline at end of file diff --git a/static/css/components/modal.css b/static/css/components/modal.css new file mode 100644 index 00000000..58e717ed --- /dev/null +++ b/static/css/components/modal.css @@ -0,0 +1,254 @@ +/* 模态窗口样式 */ +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + z-index: var(--z-modal); + overflow-y: auto; /* 允许模态窗口内容滚动 */ +} + +/* 当模态窗口打开时，禁止body滚动 */ +body.modal-open { + overflow: hidden; +} + +.modal-content { + position: relative; + max-width: 800px; + margin: 2rem auto; + background: var(--lora-surface); + border-radius: var(--border-radius-base); + padding: var(--space-3); + border: 1px solid var(--lora-border); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +/* Delete Modal specific styles */ +.delete-modal-content { + max-width: 500px; + text-align: center; +} + +.delete-message { + color: var(--text-color); + margin: var(--space-2) 0; +} + +.delete-model-info { + background: var(--lora-surface); + border: 1px solid var(--lora-border); + border-radius: var(--border-radius-sm); + padding: var(--space-2); + margin: var(--space-2) 0; + color: var(--text-color); + word-break: break-all; +} + +/* Update delete modal styles */ +.delete-modal { + display: none; /* Set initial display to none */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + z-index: var(--z-overlay); +} + +/* Add new style for when modal is shown */ +.delete-modal.show { + display: flex; + align-items: center; + justify-content: center; +} + +.delete-modal-content { + max-width: 500px; + width: 90%; + text-align: center; + margin: 0 auto; + position: relative; + animation: modalFadeIn 0.2s ease-out; +} + +.delete-model-info { + /* Update info display styling */ + background: var(--lora-surface); + border: 1px solid var(--lora-border); + border-radius: var(--border-radius-sm); + padding: var(--space-2); + margin: var(--space-2) 0; + color: var(--text-color); + word-break: break-all; + text-align: left; + line-height: 1.5; +} + +@keyframes modalFadeIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.modal-actions { + display: flex; + gap: var(--space-2); + justify-content: center; + margin-top: var(--space-3); +} + +.cancel-btn, .delete-btn { + padding: 8px var(--space-2); + border-radius: 6px; + border: none; + cursor: pointer; + font-weight: 500; + min-width: 100px; +} + +.cancel-btn { + background: var(--lora-surface); + border: 1px solid var(--lora-border); + color: var(--text-color); +} + +.delete-btn { + background: var(--lora-error); + color: white; +} + +.cancel-btn:hover { + background: var(--lora-border); +} + +.delete-btn:hover { + opacity: 0.9; +} + +.carousel { + display: grid; + grid-auto-flow: column; + gap: 1rem; + overflow-x: auto; + scroll-snap-type: x mandatory; +} + +.carousel img { + scroll-snap-align: start; + max-height: 60vh; + object-fit: contain; +} + +.carousel video { + scroll-snap-align: start; + max-height: 60vh; + object-fit: contain; +} + +.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-word-content { + flex: 1; + word-break: break-word; + line-height: 1.4; +} + +.trigger-word-copy { + opacity: 0.5; + color: var(--text-color); + display: flex; + align-items: center; + justify-content: center; +} + +/* Updated Trigger Words Section */ +.trigger-words-container { + display: grid; + grid-template-columns: 200px 1fr; + align-items: flex-start; + gap: var(--space-2); + margin: var(--space-2) 0; + padding: var(--space-2); + background: var(--lora-surface); + border: 1px solid var(--lora-border); + border-radius: var(--border-radius-sm); +} + +.trigger-words-title { + font-size: 0.95em; + color: var(--text-color); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + min-height: 100%; +} + +.trigger-words-tags { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: flex-start; +} + +.trigger-word-tag { + display: inline-flex; + align-items: center; + background: var(--lora-surface); + border: 1px solid var(--lora-border); + border-radius: var(--border-radius-xs); + padding: 6px 10px; + cursor: pointer; + transition: all 0.2s ease; + gap: 8px; + max-width: 100%; +} + +.trigger-word-content { + color: oklch(65% 0.2 256); /* Accent color for trigger words */ + font-size: 0.85em; + line-height: 1.4; + word-break: break-word; +} + +.trigger-word-copy { + display: flex; + align-items: center; + color: var(--text-color); + opacity: 0.5; + flex-shrink: 0; + transition: opacity 0.2s; +} + +.trigger-word-tag:hover { + background: oklch(var(--lora-accent) / 0.1); + border-color: var(--lora-accent); +} + +.trigger-word-tag:hover .trigger-word-copy { + opacity: 0.8; +} + +.trigger-word-tag:active { + transform: scale(0.98); +} \ No newline at end of file diff --git a/static/css/components/toast.css b/static/css/components/toast.css new file mode 100644 index 00000000..ff97a959 --- /dev/null +++ b/static/css/components/toast.css @@ -0,0 +1,97 @@ +/* Update toast animation for trigger word copy */ +.toast.toast-copy { + background: var(--lora-accent); + color: white; + border: none; + padding: 8px 16px; + font-size: 0.9em; + transform: translateX(-50%) translateY(20px); +} + +.toast.toast-copy.show { + transform: translateX(-50%) translateY(0); +} + +/* Toast Notifications */ +.toast { + position: fixed; + top: 20px; /* 改为从顶部显示 */ + right: 20px; /* 改为右对齐 */ + left: auto; /* 移除左对齐 */ + transform: translateX(120%); /* 初始位置在屏幕右侧外 */ + min-width: 300px; /* 设置最小宽度 */ + max-width: 400px; /* 设置最大宽度 */ + background: var(--lora-surface); + color: var(--text-color); + padding: 12px 16px; + border-radius: var(--border-radius-sm); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); + z-index: calc(var(--z-overlay) + 10); /* 让toast显示在最上层 */ + opacity: 0; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + align-items: center; + gap: 12px; +} + +.toast.show { + transform: translateX(0); /* 显示时滑入到正确位置 */ + opacity: 1; +} + +/* 添加图标容器 */ +.toast::before { + content: ''; + width: 20px; + height: 20px; + flex-shrink: 0; + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} + +/* 不同类型的toast样式 */ +.toast-success { + border-left: 4px solid oklch(65% 0.2 142); +} + +.toast-success::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234caf50'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); +} + +.toast-error { + border-left: 4px solid oklch(65% 0.2 29); +} + +.toast-error::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f44336'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'/%3E%3C/svg%3E"); +} + +.toast-info { + border-left: 4px solid oklch(65% 0.2 256); +} + +.toast-info::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232196f3'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); +} + +/* 多个toast堆叠显示 */ +.toast + .toast { + margin-top: 10px; +} + +/* 响应式调整 */ +@media (max-width: 768px) { + .toast { + width: calc(100% - 40px); /* 左右各留20px间距 */ + max-width: none; + right: 20px; + } +} + +/* Ensure toasts are visible in both themes */ +[data-theme="dark"] .toast { + background: var(--lora-surface); + color: var(--lora-text); +} \ No newline at end of file diff --git a/static/css/layout.css b/static/css/layout.css new file mode 100644 index 00000000..e69de29b diff --git a/static/css/style.css b/static/css/style.css index d9313306..b262d7e0 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,3 +1,14 @@ +/* Import Base Styles */ +@import 'base.css'; + +/* Import Layout */ +@import 'layout.css'; + +/* Import Components */ +@import 'components/card.css'; +@import 'components/modal.css'; +@import 'components/toast.css'; + /* 强制显示滚动条，防止页面跳动 */ html { overflow-y: scroll; @@ -102,81 +113,6 @@ body { color: white; } -/* 卡片网格布局 */ -.card-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Adjusted from 320px */ - gap: 12px; /* Reduced from var(--space-2) for tighter horizontal spacing */ - margin-top: var(--space-2); - max-width: 1400px; /* Container width control */ - margin-left: auto; - margin-right: auto; -} - -.lora-card { - background: var(--lora-surface); - border: 1px solid var(--lora-border); - border-radius: var(--border-radius-base); - backdrop-filter: blur(16px); - transition: transform 160ms ease-out; - aspect-ratio: 896/1152; - max-width: 260px; /* Adjusted from 320px to fit 5 cards */ - margin: 0 auto; -} - -.lora-card:hover { - transform: translateY(-2px); - background: oklch(100% 0 0 / 0.6); -} - -.lora-card:focus-visible { - outline: 2px solid var(--lora-accent); - outline-offset: 2px; -} - -/* Responsive adjustments */ -@media (max-width: 1400px) { - .card-grid { - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); - } - - .lora-card { - max-width: 240px; - } -} - -/* Card Preview and Footer Overlay */ -.card-preview { - position: relative; - width: 100%; - height: 100%; - border-radius: var(--border-radius-base); - overflow: hidden; -} - -.card-preview img, -.card-preview video { - width: 100%; - height: 100%; - object-fit: cover; -} - -.card-footer { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(transparent 15%, oklch(0% 0 0 / 0.75)); - backdrop-filter: blur(8px); - color: white; - padding: var(--space-1); - display: flex; - justify-content: space-between; - align-items: flex-start; /* Changed from flex-end to allow for text wrapping */ - min-height: 32px; - gap: var(--space-1); /* Add gap between model info and actions */ -} - .model-name { font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); @@ -187,55 +123,6 @@ body { overflow: hidden; } -.model-meta { - font-size: 0.9em; - opacity: 0.9; -} - -.card-header { - position: absolute; - top: 0; - left: 0; - right: 0; - background: linear-gradient(oklch(0% 0 0 / 0.75), transparent 85%); - backdrop-filter: blur(8px); - color: white; - padding: var(--space-1); - display: flex; - justify-content: space-between; - align-items: center; - z-index: 1; - min-height: 20px; -} - -.card-actions i { - margin-left: var(--space-1); - cursor: pointer; - color: white; - transition: opacity 0.2s; - font-size: 0.9em; -} - -.card-actions i:hover { - opacity: 0.8; -} - -/* 响应式设计 */ -@media (max-width: 768px) { - .card-grid { - grid-template-columns: minmax(260px, 1fr); /* Adjusted minimum size for mobile */ - } - - .controls { - flex-direction: column; - gap: 15px; - } - - .lora-card { - max-width: 100%; /* Allow cards to fill available space on mobile */ - } -} - /* 新增元数据相关样式 */ .model-info { flex: 1; @@ -244,12 +131,6 @@ body { padding-bottom: 4px; /* 为了与底部对齐的图标留出一些空间 */ } -.model-meta { - font-size: 0.8em; - color: #666; - margin-top: 4px; -} - .base-model { display: inline-block; background: #f0f0f0; @@ -290,163 +171,6 @@ body { opacity: 1; } -/* 模态窗口样式 */ -.modal { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.8); - z-index: var(--z-modal); - overflow-y: auto; /* 允许模态窗口内容滚动 */ -} - -/* 当模态窗口打开时，禁止body滚动 */ -body.modal-open { - overflow: hidden; -} - -.modal-content { - position: relative; - max-width: 800px; - margin: 2rem auto; - background: var(--lora-surface); - border-radius: var(--border-radius-base); - padding: var(--space-3); - border: 1px solid var(--lora-border); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); -} - -/* Delete Modal specific styles */ -.delete-modal-content { - max-width: 500px; - text-align: center; -} - -.delete-message { - color: var(--text-color); - margin: var(--space-2) 0; -} - -.delete-model-info { - background: var(--lora-surface); - border: 1px solid var(--lora-border); - border-radius: var(--border-radius-sm); - padding: var(--space-2); - margin: var(--space-2) 0; - color: var(--text-color); - word-break: break-all; -} - -/* Update delete modal styles */ -.delete-modal { - display: none; /* Set initial display to none */ - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.8); - z-index: var(--z-overlay); -} - -/* Add new style for when modal is shown */ -.delete-modal.show { - display: flex; - align-items: center; - justify-content: center; -} - -.delete-modal-content { - max-width: 500px; - width: 90%; - text-align: center; - margin: 0 auto; - position: relative; - animation: modalFadeIn 0.2s ease-out; -} - -.delete-model-info { - /* Update info display styling */ - background: var(--lora-surface); - border: 1px solid var(--lora-border); - border-radius: var(--border-radius-sm); - padding: var(--space-2); - margin: var(--space-2) 0; - color: var(--text-color); - word-break: break-all; - text-align: left; - line-height: 1.5; -} - -@keyframes modalFadeIn { - from { - opacity: 0; - transform: translateY(-20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.modal-actions { - display: flex; - gap: var(--space-2); - justify-content: center; - margin-top: var(--space-3); -} - -.cancel-btn, .delete-btn { - padding: 8px var(--space-2); - border-radius: 6px; - border: none; - cursor: pointer; - font-weight: 500; - min-width: 100px; -} - -.cancel-btn { - background: var(--lora-surface); - border: 1px solid var(--lora-border); - color: var(--text-color); -} - -.delete-btn { - background: var(--lora-error); - color: white; -} - -.cancel-btn:hover { - background: var(--lora-border); -} - -.delete-btn:hover { - opacity: 0.9; -} - -.carousel { - display: grid; - grid-auto-flow: column; - gap: 1rem; - overflow-x: auto; - scroll-snap-type: x mandatory; -} - -.carousel img { - scroll-snap-align: start; - max-height: 60vh; - object-fit: contain; -} - -.carousel video { - scroll-snap-align: start; - max-height: 60vh; - object-fit: contain; -} - .theme-toggle img { width: 20px; height: 20px; @@ -560,90 +284,6 @@ body.modal-open { } } -.card-actions { - flex-shrink: 0; /* Prevent actions from shrinking */ - display: flex; - gap: var(--space-1); - align-items: flex-end; /* 将图标靠下对齐 */ - align-self: flex-end; /* 将整个actions容器靠下对齐 */ -} - -.model-link { - margin-top: var(--space-1); -} - -.model-link a { - color: var(--lora-accent); - text-decoration: none; - font-size: 1.1em; - transition: opacity 0.2s; - 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 { - display: flex; - gap: var(--space-2); - background: var(--lora-surface); - border: 1px solid var(--lora-border); - border-radius: var(--border-radius-sm); - padding: var(--space-2); - margin: var(--space-2) 0; -} - -.trigger-words-list { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; - overflow-y: auto; - max-height: 300px; -} - -.trigger-word-content { - flex: 1; - word-break: break-word; - line-height: 1.4; -} - -.trigger-word-copy { - opacity: 0.5; - color: var(--text-color); - display: flex; - align-items: center; - justify-content: center; -} - -/* Update toast animation for trigger word copy */ -.toast.toast-copy { - background: var(--lora-accent); - color: white; - border: none; - padding: 8px 16px; - font-size: 0.9em; - transform: translateX(-50%) translateY(20px); -} - -.toast.toast-copy.show { - transform: translateX(-50%) translateY(0); -} - .copy-btn { background: transparent; border: none; @@ -676,162 +316,6 @@ body.modal-open { opacity: 1; } -/* Toast Notifications */ -.toast { - position: fixed; - top: 20px; /* 改为从顶部显示 */ - right: 20px; /* 改为右对齐 */ - left: auto; /* 移除左对齐 */ - transform: translateX(120%); /* 初始位置在屏幕右侧外 */ - min-width: 300px; /* 设置最小宽度 */ - max-width: 400px; /* 设置最大宽度 */ - background: var(--lora-surface); - color: var(--text-color); - padding: 12px 16px; - border-radius: var(--border-radius-sm); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); - z-index: calc(var(--z-overlay) + 10); /* 让toast显示在最上层 */ - opacity: 0; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), - opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: flex; - align-items: center; - gap: 12px; -} - -.toast.show { - transform: translateX(0); /* 显示时滑入到正确位置 */ - opacity: 1; -} - -/* 添加图标容器 */ -.toast::before { - content: ''; - width: 20px; - height: 20px; - flex-shrink: 0; - background-position: center; - background-repeat: no-repeat; - background-size: contain; -} - -/* 不同类型的toast样式 */ -.toast-success { - border-left: 4px solid oklch(65% 0.2 142); -} - -.toast-success::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234caf50'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); -} - -.toast-error { - border-left: 4px solid oklch(65% 0.2 29); -} - -.toast-error::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f44336'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'/%3E%3C/svg%3E"); -} - -.toast-info { - border-left: 4px solid oklch(65% 0.2 256); -} - -.toast-info::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232196f3'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); -} - -/* 多个toast堆叠显示 */ -.toast + .toast { - margin-top: 10px; -} - -/* 响应式调整 */ -@media (max-width: 768px) { - .toast { - width: calc(100% - 40px); /* 左右各留20px间距 */ - max-width: none; - right: 20px; - } -} - -/* Ensure toasts are visible in both themes */ -[data-theme="dark"] .toast { - background: var(--lora-surface); - color: var(--lora-text); -} - -/* Updated Trigger Words Section */ -.trigger-words-container { - display: grid; - grid-template-columns: 200px 1fr; - align-items: flex-start; - gap: var(--space-2); - margin: var(--space-2) 0; - padding: var(--space-2); - background: var(--lora-surface); - border: 1px solid var(--lora-border); - border-radius: var(--border-radius-sm); -} - -.trigger-words-title { - font-size: 0.95em; - color: var(--text-color); - text-align: center; - display: flex; - align-items: center; - justify-content: center; - min-height: 100%; -} - -.trigger-words-tags { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: flex-start; -} - -.trigger-word-tag { - display: inline-flex; - align-items: center; - background: var(--lora-surface); - border: 1px solid var(--lora-border); - border-radius: var(--border-radius-xs); - padding: 6px 10px; - cursor: pointer; - transition: all 0.2s ease; - gap: 8px; - max-width: 100%; -} - -.trigger-word-content { - color: oklch(65% 0.2 256); /* Accent color for trigger words */ - font-size: 0.85em; - line-height: 1.4; - word-break: break-word; -} - -.trigger-word-copy { - display: flex; - align-items: center; - color: var(--text-color); - opacity: 0.5; - flex-shrink: 0; - transition: opacity 0.2s; -} - -.trigger-word-tag:hover { - background: oklch(var(--lora-accent) / 0.1); - border-color: var(--lora-accent); -} - -.trigger-word-tag:hover .trigger-word-copy { - opacity: 0.8; -} - -.trigger-word-tag:active { - transform: scale(0.98); -} - .initialization-notice { display: flex; justify-content: center;