mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-22 13:42:12 -03:00
Enhance theme toggle functionality and update styles; add light and dark SVG icons
This commit is contained in:
Will Miao
@@ -441,13 +441,17 @@ body.modal-open {
|
||||
|
||||
/* 主题切换按钮 */
|
||||
.theme-toggle {
|
||||
position: static; /* Override the fixed positioning */
|
||||
width: 36px; /* Match the size of other buttons */
|
||||
height: 36px; /* Match the size of other buttons */
|
||||
display: flex; /* Center the image */
|
||||
position: static;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 50%; /* 改为圆形 */
|
||||
cursor: pointer;
|
||||
background: var(--card-bg);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
@@ -460,6 +464,33 @@ body.modal-open {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* ...existing code... */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ...existing code... */
|
||||
|
||||
.base-model-label {
|
||||
max-width: 120px;
|
||||
white-space: nowrap;
|
||||
@@ -908,7 +939,7 @@ body.modal-open {
|
||||
.search-container input {
|
||||
width: 100%;
|
||||
padding: 6px 32px 6px 12px;
|
||||
border: 1px solid var(--lora-border);
|
||||
border: 1px solid oklch(65% 0.02 256); /* 更深的边框颜色，提高对比度 */
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--lora-surface);
|
||||
color: var(--text-color);
|
||||
@@ -917,6 +948,11 @@ body.modal-open {
|
||||
box-sizing: border-box; /* 确保padding不会增加总宽度 */
|
||||
}
|
||||
|
||||
.search-container input:focus {
|
||||
outline: none;
|
||||
border-color: var(--lora-accent);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
@@ -940,8 +976,6 @@ body.modal-open {
|
||||
}
|
||||
}
|
||||
|
||||
/* ...existing code... */
|
||||
|
||||
.corner-controls {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
@@ -951,9 +985,10 @@ body.modal-open {
|
||||
z-index: var(--z-overlay);
|
||||
}
|
||||
|
||||
.control-button {
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
.control-button,
|
||||
.theme-toggle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
@@ -961,28 +996,38 @@ body.modal-open {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.control-button:hover {
|
||||
.control-button:hover,
|
||||
.theme-toggle:hover {
|
||||
background: var(--lora-accent);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Add responsive adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.search-container {
|
||||
width: 200px; /* 减小搜索框宽度 */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.corner-controls {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
gap: 8px;
|
||||
.actions {
|
||||
position: relative;
|
||||
padding-right: 130px; /* 为corner-controls预留空间 */
|
||||
}
|
||||
|
||||
.control-button,
|
||||
.theme-toggle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
.search-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.corner-controls {
|
||||
position: absolute; /* 改为相对于actions定位 */
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
3
static/images/theme-toggle-dark.svg
Normal file
3
static/images/theme-toggle-dark.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 A7 7 0 0 0 21 12.79z" fill="#e0e0e0" stroke="#e0e0e0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 284 B |
11
static/images/theme-toggle-light.svg
Normal file
11
static/images/theme-toggle-light.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="5" fill="#333333"/>
|
||||
<line x1="12" y1="1" x2="12" y2="3" stroke="#333333"/>
|
||||
<line x1="12" y1="21" x2="12" y2="23" stroke="#333333"/>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="#333333"/>
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="#333333"/>
|
||||
<line x1="1" y1="12" x2="3" y2="12" stroke="#333333"/>
|
||||
<line x1="21" y1="12" x2="23" y2="12" stroke="#333333"/>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="#333333"/>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 746 B |
@@ -1,11 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="5"/>
|
||||
<path d="M12 1v2"/>
|
||||
<path d="M12 21v2"/>
|
||||
<path d="M4.22 4.22l1.42 1.42"/>
|
||||
<path d="M18.36 18.36l1.42 1.42"/>
|
||||
<path d="M1 12h2"/>
|
||||
<path d="M21 12h2"/>
|
||||
<path d="M4.22 19.78l1.42-1.42"/>
|
||||
<path d="M18.36 5.64l1.42-1.42"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 457 B |
@@ -42,7 +42,8 @@
|
||||
<i class="fas fa-bug"></i>
|
||||
</button>
|
||||
<div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
|
||||
<img src="/loras_static/images/theme-toggle.svg" alt="Theme">
|
||||
<img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
|
||||
<img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user