diff --git a/static/css/style.css b/static/css/style.css index cbb75fbd..f4e7eae8 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -10,313 +10,6 @@ @import 'components/toast.css'; @import 'components/loading.css'; -/* 强制显示滚动条,防止页面跳动 */ -html { - overflow-y: scroll; -} - -/* 针对Firefox */ -* { - scrollbar-width: thin; - scrollbar-color: var(--border-color) transparent; -} - -/* 针对Webkit browsers (Chrome, Safari等) */ -::-webkit-scrollbar { - width: 8px; -} - -::-webkit-scrollbar-track { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background-color: var(--border-color); - border-radius: 4px; -} - -:root { - --bg-color: #ffffff; - --text-color: #333333; - --card-bg: #ffffff; - --border-color: #e0e0e0; - - /* Color System */ - --lora-accent: oklch(68% 0.28 256); - --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); - - /* Spacing Scale */ - --space-1: calc(8px * 1); - --space-2: calc(8px * 2); - --space-3: calc(8px * 3); - - /* Z-index Scale */ - --z-base: 10; - --z-modal: 1000; /* 更新modal的z-index */ - --z-overlay: 2000; /* 更新overlay的z-index,确保比modal高 */ - - /* Border Radius */ - --border-radius-base: 12px; - --border-radius-sm: 8px; - --border-radius-xs: 4px; -} - -[data-theme="dark"] { - --bg-color: #1a1a1a; - --text-color: #e0e0e0; - --card-bg: #2d2d2d; - --border-color: #404040; - - --lora-accent: oklch(68% 0.28 256); - --lora-surface: oklch(25% 0.02 256 / 0.85); - --lora-border: oklch(90% 0.02 256 / 0.15); - --lora-text: oklch(98% 0.02 256); -} - -body { - margin: 0; - font-family: 'Segoe UI', sans-serif; - background: var(--bg-color); - color: var(--text-color); -} - -.container { - max-width: 1400px; - margin: 20px auto; - padding: 0 15px; -} - -/* 文件夹标签样式 */ -.folder-tags { - display: flex; - gap: 4px; - overflow-x: auto; - padding: 2px 0; - flex-wrap: wrap; -} - -.tag { - cursor: pointer; - padding: 2px 8px; - margin: 2px; - border: 1px solid #ccc; - border-radius: var(--border-radius-xs); - display: inline-block; - line-height: 1.2; - font-size: 14px; -} - -.tag.active { - background-color: #007bff; - color: white; -} - -.model-name { - font-weight: bold; - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); - font-size: 0.95em; - word-break: break-word; /* Allow long words to break */ - display: block; /* Ensure the text wraps */ - max-height: 2.8em; /* Limit to roughly 2 lines */ - overflow: hidden; -} - -/* 新增元数据相关样式 */ -.model-info { - flex: 1; - min-width: 0; /* Allow flex item to shrink below content size */ - overflow: hidden; /* Prevent content from spilling out */ - padding-bottom: 4px; /* 为了与底部对齐的图标留出一些空间 */ -} - -.base-model { - display: inline-block; - background: #f0f0f0; - padding: 2px 6px; - border-radius: var(--border-radius-xs); - margin-right: 6px; -} - -.file-size, -.modified { - display: block; - margin-top: 2px; -} - -.tooltip { - position: relative; - cursor: help; -} - -.tooltip::after { - content: attr(data-tooltip); - position: absolute; - bottom: 120%; - left: 50%; - transform: translateX(-50%); - background: rgba(0, 0, 0, 0.8); - color: white; - padding: 4px 8px; - border-radius: 4px; - font-size: 0.8em; - white-space: nowrap; - opacity: 0; - transition: opacity 0.2s; - pointer-events: none; -} - -.tooltip:hover::after { - opacity: 1; -} - -.theme-toggle img { - width: 20px; - height: 20px; -} - -.theme-toggle .theme-icon { - width: 20px; - height: 20px; - position: absolute; - transition: opacity 0.2s ease; -} - -.theme-toggle .light-icon { - opacity: 0; -} - -.theme-toggle .dark-icon { - opacity: 1; -} - -[data-theme="light"] .theme-toggle .light-icon { - opacity: 1; -} - -[data-theme="light"] .theme-toggle .dark-icon { - opacity: 0; -} - -.base-model-label { - max-width: 120px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - color: white; - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); - background: rgba(255, 255, 255, 0.2); - padding: 2px var(--space-1); - border-radius: var(--border-radius-xs); - backdrop-filter: blur(2px); - font-size: 0.85em; -} - -.loading-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: oklch(0% 0 0 / 0.7); - display: flex; - justify-content: center; - align-items: center; - z-index: var(--z-overlay); -} - -.loading-content { - background: var(--lora-surface); - backdrop-filter: blur(24px); - padding: var(--space-3); - border-radius: var(--border-radius-base); - text-align: center; - border: 1px solid var(--lora-border); - width: min(400px, 90vw); /* 固定最大宽度,但保持响应式 */ -} - -.loading-spinner { - border: 4px solid #f3f3f3; - border-top: 4px solid #3498db; - border-radius: 50%; - width: 40px; - height: 40px; - animation: spin 1s linear infinite; - margin: 0 auto 1rem; -} - -.loading-status { - margin-bottom: 1rem; - color: var(--text-color); /* 使用主题文本颜色 */ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - padding: 0 var(--space-2); -} - -.progress-container { - width: 280px; /* 固定进度条宽度 */ - background-color: var(--lora-border); /* 使用主题边框颜色 */ - border-radius: 4px; - overflow: hidden; - margin: 0 auto; /* 居中显示 */ -} - -.progress-bar { - width: 0%; - height: var(--space-2); - background-color: var(--lora-accent); - transition: width 200ms ease-out; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -@media (prefers-reduced-motion: reduce) { - .lora-card, - .progress-bar { - transition: none; - } -} - -.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; -} - .initialization-notice { display: flex; justify-content: center; @@ -333,643 +26,4 @@ body { /* 使用已有的loading-spinner样式 */ .initialization-notice .loading-spinner { margin-bottom: var(--space-2); -} - -/* Search Container Styles */ -.controls { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: var(--space-2); -} - -.actions { - display: flex; - align-items: center; - gap: var(--space-2); - flex-wrap: nowrap; /* 防止内容换行 */ - width: 100%; /* 确保占满容器宽度 */ -} - -.search-container { - position: relative; - width: 250px; - margin-left: auto; - flex-shrink: 0; /* 防止搜索框被压缩 */ - display: flex; - align-items: center; - gap: 4px; -} - -/* 调整搜索框样式以匹配其他控件 */ -.search-container input { - width: 100%; - padding: 6px 40px 6px 12px; /* 减小右侧padding */ - border: 1px solid oklch(65% 0.02 256); /* 更深的边框颜色,提高对比度 */ - border-radius: var(--border-radius-sm); - background: var(--lora-surface); - color: var(--text-color); - font-size: 0.9em; - height: 32px; - box-sizing: border-box; /* 确保padding不会增加总宽度 */ -} - -.search-container input:focus { - outline: none; - border-color: var(--lora-accent); -} - -.search-icon { - position: absolute; - right: 40px; /* 调整到toggle按钮左侧 */ - top: 50%; - transform: translateY(-50%); - color: oklch(var(--text-color) / 0.5); - pointer-events: none; - line-height: 1; /* 防止图标影响容器高度 */ -} - -/* 修改清空按钮样式 */ -.search-clear { - position: absolute; - right: 65px; /* 放到search-icon左侧 */ - top: 50%; - transform: translateY(-50%); - color: oklch(var(--text-color) / 0.5); - cursor: pointer; - border: none; - background: none; - padding: 4px 8px; /* 增加点击区域 */ - display: none; /* 默认隐藏 */ - line-height: 1; - transition: color 0.2s ease; -} - -.search-clear:hover { - color: var(--lora-accent); -} - -.search-clear.visible { - display: block; -} - -.search-mode-toggle { - background: var(--lora-surface); - border: 1px solid oklch(65% 0.02 256); - border-radius: var(--border-radius-sm); - color: var(--text-color); - width: 32px; - height: 32px; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.2s ease; - flex-shrink: 0; -} - -.search-mode-toggle:hover { - background: var(--lora-accent); - color: white; -} - -.search-mode-toggle.active { - background: var(--lora-accent); - color: white; -} - -.search-mode-toggle i { - font-size: 0.9em; -} - -.corner-controls { - position: fixed; - top: 20px; - right: 20px; - display: flex; - gap: 10px; - z-index: var(--z-overlay); -} - -.theme-toggle { - width: 36px; - height: 36px; - border-radius: 50%; - background: var(--card-bg); - border: 1px solid var(--border-color); - color: var(--text-color); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.2s ease; -} - -.theme-toggle:hover { - background: var(--lora-accent); - color: white; - transform: translateY(-2px); -} - -@media (max-width: 768px) { - .actions { - flex-wrap: wrap; - gap: var(--space-1); - } - - .search-container { - width: 100%; - order: -1; /* 在移动端将搜索框移到顶部 */ - margin-left: 0; - } - - /* Remove the previous corner-controls mobile styles */ - .corner-controls { - /* Keep the fixed positioning even on mobile */ - position: fixed; - top: 20px; - right: 20px; - } -} - -/* Folder Tags Container */ -.folder-tags-container { - position: relative; - width: 100%; -} - -.folder-tags { - transition: max-height 0.3s ease, opacity 0.2s ease; - max-height: 200px; - opacity: 1; - overflow: hidden; -} - -.folder-tags.collapsed { - max-height: 0; - opacity: 0; - margin: 0; - padding-bottom: 0; -} - -/* Toggle Folders Button */ -.toggle-folders-btn { - position: absolute; - bottom: 0; /* 固定在容器底部 */ - right: 0; /* 固定在容器右侧 */ - width: 36px; - height: 36px; - border-radius: 50%; - background: var(--card-bg); - border: 1px solid var(--border-color); - color: var(--text-color); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s ease; - z-index: 2; -} - -.toggle-folders-btn:hover { - background: var(--lora-accent); - color: white; - transform: translateY(-2px); -} - -.toggle-folders-btn i { - transition: transform 0.3s ease; -} - -/* 折叠状态样式 */ -.folder-tags.collapsed + .toggle-folders-btn { - position: static; - margin-right: auto; /* 确保按钮在左侧 */ - transform: translateY(0); -} - -.folder-tags.collapsed + .toggle-folders-btn i { - transform: rotate(180deg); -} - -/* Update corner controls */ -.corner-controls { - position: fixed; - top: 20px; - right: 20px; - display: flex; - gap: 10px; - z-index: var(--z-overlay); -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .folder-tags-container { - order: -1; - } - - .toggle-folders-btn { - position: absolute; - bottom: 0; - right: 0; - transform: none; /* 移除transform,防止hover时的位移 */ - } - - .toggle-folders-btn:hover { - transform: none; /* 移动端下禁用hover效果 */ - } - - .folder-tags.collapsed + .toggle-folders-btn { - position: relative; - transform: none; - } -} - -/* Back to Top Button */ -.back-to-top { - position: fixed; - bottom: 20px; - right: 20px; - width: 36px; - height: 36px; - border-radius: 50%; - background: var(--card-bg); - border: 1px solid var(--border-color); - color: var (--text-color); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - opacity: 0; - visibility: hidden; - transform: translateY(10px); - transition: all 0.3s ease; - z-index: var(--z-overlay); -} - -.back-to-top.visible { - opacity: 1; - visibility: visible; - transform: translateY(0); -} - -.back-to-top:hover { - background: var (--lora-accent); - color: white; - transform: translateY(-2px); -} - -/* Ensure the button doesn't overlap with other corner controls on mobile */ -@media (max-width: 768px) { - .back-to-top { - bottom: 60px; /* Give some extra space from bottom on mobile */ - } -} - -/* Download Modal Styles */ -.download-step { - margin: var(--space-2) 0; -} - -.input-group { - margin-bottom: var(--space-2); -} - -.input-group label { - display: block; - margin-bottom: 8px; - color: var(--text-color); -} - -.input-group input, -.input-group select { - width: 100%; - padding: 8px; - border: 1px solid var(--border-color); - border-radius: var(--border-radius-xs); - background: var(--bg-color); - color: var(--text-color); -} - -.error-message { - color: var(--lora-error); - font-size: 0.9em; - margin-top: 4px; -} - -.version-list { - max-height: 400px; - overflow-y: auto; - margin: var(--space-2) 0; - display: flex; - flex-direction: column; - gap: 12px; - padding: 1px; /* Add padding to prevent border clipping */ -} - -.version-item { - display: flex; - gap: var(--space-2); - padding: var(--space-2); - border: 1px solid var(--border-color); - border-radius: var(--border-radius-sm); - cursor: pointer; - transition: all 0.2s ease; - background: var(--bg-color); /* Add background color */ - margin: 1px; /* Add margin to ensure hover effect visibility */ - position: relative; /* Add position context */ -} - -.version-item:hover { - border-color: var(--lora-accent); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Replace transform with shadow */ - z-index: 1; /* Ensure hover state appears above other items */ -} - -.version-item.selected { - border-color: var(--lora-accent); - background: oklch(var(--lora-accent) / 0.1); -} - -.version-thumbnail { - width: 80px; - height: 80px; - flex-shrink: 0; - border-radius: var(--border-radius-xs); - overflow: hidden; - background: var(--bg-color); -} - -.version-thumbnail img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.version-content { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 4px; -} - -.version-content h3 { - margin: 0; - font-size: 1.1em; - color: var(--text-color); -} - -.version-info { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; - font-size: 0.9em; - color: var(--text-color); - opacity: 0.8; -} - -.version-info .base-model { - background: oklch(var(--lora-accent) / 0.1); - color: var(--lora-accent); - padding: 2px 8px; - border-radius: var(--border-radius-xs); -} - -.version-meta { - display: flex; - gap: 12px; - font-size: 0.85em; - color: var(--text-color); - opacity: 0.7; -} - -.version-meta span { - display: flex; - align-items: center; - gap: 4px; -} - -.folder-browser { - border: 1px solid var(--border-color); - border-radius: var(--border-radius-xs); - padding: var(--space-1); - max-height: 200px; - overflow-y: auto; -} - -/* Settings styles */ -.settings-toggle { - width: 36px; - height: 36px; - border-radius: 50%; - background: var(--card-bg); - border: 1px solid var(--border-color); - color: var(--text-color); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.2s ease; -} - -.settings-toggle:hover { - background: var(--lora-accent); - color: white; - transform: translateY(-2px); -} - -.settings-modal { - max-width: 500px; -} - -/* Settings Links */ -.settings-links { - margin-top: var(--space-3); - padding-top: var(--space-2); - border-top: 1px solid var(--lora-border); - display: flex; - gap: var(--space-2); - justify-content: center; -} - -.settings-link { - width: 36px; - height: 36px; - border-radius: 50%; - background: var(--card-bg); - border: 1px solid var(--border-color); - color: var(--text-color); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.2s ease; - text-decoration: none; - position: relative; -} - -.settings-link:hover { - background: var(--lora-accent); - color: white; - transform: translateY(-2px); -} - -.settings-link i { - font-size: 1.1em; -} - -/* Tooltip styles */ -.settings-link::after { - content: attr(title); - position: absolute; - bottom: calc(100% + 8px); - left: 50%; - transform: translateX(-50%); - background: rgba(0, 0, 0, 0.8); - color: white; - padding: 4px 8px; - border-radius: 4px; - font-size: 0.8em; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: opacity 0.2s, visibility 0.2s; - pointer-events: none; -} - -.settings-link:hover::after { - opacity: 1; - visibility: visible; -} - -/* Responsive adjustment */ -@media (max-width: 480px) { - .settings-links { - flex-wrap: wrap; - } -} - -.api-key-input { - position: relative; - display: flex; - align-items: center; -} - -.api-key-input input { - padding-right: 40px; -} - -.api-key-input .toggle-visibility { - position: absolute; - right: 8px; - background: none; - border: none; - color: var(--text-color); - opacity: 0.6; - cursor: pointer; - padding: 4px 8px; -} - -.api-key-input .toggle-visibility:hover { - opacity: 1; -} - -.input-help { - font-size: 0.85em; - color: var(--text-color); - opacity: 0.8; - margin-top: 4px; -} - -.folder-item { - padding: 8px; - cursor: pointer; - border-radius: var(--border-radius-xs); - transition: background-color 0.2s; -} - -.folder-item:hover { - background: var(--lora-surface); -} - -.folder-item.selected { - background: oklch(var(--lora-accent) / 0.1); - border: 1px solid var(--lora-accent); -} - -/* Path Preview Styles */ -.path-preview { - margin-bottom: var(--space-3); - padding: var(--space-2); - background: var(--bg-color); - border-radius: var(--border-radius-sm); - border: 1px dashed var(--border-color); -} - -.path-preview label { - display: block; - margin-bottom: 8px; - color: var(--text-color); - font-size: 0.9em; - opacity: 0.8; -} - -.path-display { - padding: var(--space-1); - color: var(--text-color); - font-family: monospace; - font-size: 0.9em; - line-height: 1.4; - white-space: pre-wrap; - word-break: break-all; - opacity: 0.85; - background: var(--lora-surface); - border-radius: var(--border-radius-xs); -} - -.path-text { - color: var(--text-color); -} - -.path-preview { - margin-top: var(--space-2); - padding: var(--space-2); - background: var(--lora-surface); - border: 1px solid var(--lora-border); - border-radius: var(--border-radius-sm); -} - -.path-preview label { - display: block; - margin-bottom: 8px; - color: var(--text-color); - font-size: 0.9em; -} - -.path-display { - display: flex; - align-items: center; - gap: 8px; - padding: var(--space-1); - background: var(--bg-color); - border: 1px solid var(--border-color); - border-radius: var(--border-radius-xs); - color: var(--text-color); - font-family: monospace; - font-size: 0.9em; - overflow-x: auto; - white-space: nowrap; -} - -.path-display i { - color: var(--lora-accent); - opacity: 0.8; -} - -.path-text { - color: var(--text-color); - opacity: 0.9; } \ No newline at end of file