mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-22 13:42:12 -03:00
78b55d10ba
- Add SupportersHandler in misc_handlers.py to serve /api/lm/supporters - Register new endpoint in misc_route_registrar.py - Remove supporters from page load template context in model_handlers.py - Create supportersService.js for frontend data fetching - Update Header.js to fetch supporters when support modal opens - Modify support_modal.html to use client-side rendering This change improves page load performance by loading supporters data on-demand instead of during initial page render.
444 lines
8.5 KiB
CSS
444 lines
8.5 KiB
CSS
/* Support Modal Styles */
|
|
.support-modal {
|
|
max-width: 1000px;
|
|
width: 90vw;
|
|
}
|
|
|
|
/* Two-column layout */
|
|
.support-container {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
min-height: 500px;
|
|
}
|
|
|
|
.support-left {
|
|
flex: 0 0 42%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.support-right {
|
|
flex: 1;
|
|
min-width: 0;
|
|
border-left: 1px solid var(--lora-border);
|
|
padding-left: var(--space-4);
|
|
}
|
|
|
|
.support-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.support-icon {
|
|
font-size: 1.8em;
|
|
color: var(--lora-error);
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.support-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.support-content > p {
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.support-section {
|
|
background: rgba(0, 0, 0, 0.02);
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--space-2);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.support-section h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 0;
|
|
margin-bottom: var(--space-1);
|
|
font-size: 1.1em;
|
|
color: var(--lora-accent);
|
|
}
|
|
|
|
.support-section h3 i {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.support-section p {
|
|
margin-top: 4px;
|
|
margin-bottom: var(--space-1);
|
|
color: var(--text-color);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.support-links {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.social-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: var(--lora-surface);
|
|
border: 1px solid var(--lora-border);
|
|
border-radius: var(--border-radius-sm);
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.social-link:hover {
|
|
background: var(--lora-accent);
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.kofi-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 10px 20px;
|
|
background: #FF5E5B;
|
|
color: white;
|
|
border-radius: var(--border-radius-sm);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.kofi-button:hover {
|
|
background: #E04946;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Patreon button style */
|
|
.patreon-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 10px 20px;
|
|
background: #F96854;
|
|
color: white;
|
|
border-radius: var(--border-radius-sm);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.patreon-button:hover {
|
|
background: #E04946;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* QR Code section styles */
|
|
.qrcode-toggle {
|
|
width: 100%;
|
|
margin-top: var(--space-2);
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.qrcode-toggle .toggle-icon {
|
|
margin-left: 8px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.qrcode-toggle.active .toggle-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.qrcode-container {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.4s ease, opacity 0.3s ease;
|
|
opacity: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.qrcode-container.show {
|
|
max-height: 500px;
|
|
opacity: 1;
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.qrcode-image {
|
|
max-width: 80%;
|
|
height: auto;
|
|
border-radius: var(--border-radius-sm);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid var(--lora-border);
|
|
aspect-ratio: 1/1; /* Ensure proper aspect ratio for the square QR code */
|
|
}
|
|
|
|
.support-footer {
|
|
text-align: center;
|
|
font-style: italic;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Add support toggle button style */
|
|
.support-toggle {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--lora-error);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.support-toggle:hover {
|
|
background: var(--lora-accent);
|
|
color: var(--lora-error) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.support-toggle i {
|
|
font-size: 1.1em;
|
|
position: relative;
|
|
top: 1px;
|
|
left: -0.5px;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.support-links {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.support-modal {
|
|
width: 95vw;
|
|
max-width: 95vw;
|
|
}
|
|
}
|
|
|
|
/* Civitai link styles */
|
|
.civitai-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.civitai-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: #1b98e4; /* Civitai brand blue color */
|
|
}
|
|
|
|
.social-link:hover .civitai-icon {
|
|
color: white; /* Icon color changes to white on hover */
|
|
}
|
|
|
|
/* 增强hover状态的视觉反馈 */
|
|
.social-link:hover,
|
|
.update-link:hover,
|
|
.folder-item:hover {
|
|
border-color: var(--lora-accent);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Supporters Section Styles */
|
|
.supporters-section {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.supporters-header {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.supporters-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin: 0 0 var(--space-1) 0;
|
|
font-size: 1.3em !important;
|
|
color: var(--lora-accent) !important;
|
|
}
|
|
|
|
.supporters-title i {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.supporters-subtitle {
|
|
margin: 0;
|
|
font-size: 0.95em;
|
|
color: var(--text-color);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.supporters-group {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.supporters-group-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 0 0 var(--space-2) 0;
|
|
font-size: 1em;
|
|
color: var(--text-color);
|
|
opacity: 0.8;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.supporters-group-title i {
|
|
color: var(--lora-accent);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Special Thanks - Clean Card Style */
|
|
.special-thanks-group {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.special-thanks-group .supporters-group-title {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.special-thanks-group .supporters-group-title i {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.all-supporters-group .supporters-group-title i {
|
|
color: var(--lora-error);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.supporters-special-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.supporter-special-card {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-left: 3px solid var(--lora-accent);
|
|
border-radius: var(--border-radius-sm);
|
|
transition: all 0.2s ease;
|
|
cursor: default;
|
|
}
|
|
|
|
.supporter-special-card:hover {
|
|
border-color: var(--lora-accent);
|
|
border-left-color: var(--lora-accent);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.supporter-special-card .supporter-special-name {
|
|
font-size: 1em;
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.supporter-special-card:hover .supporter-special-name {
|
|
color: var(--lora-accent);
|
|
}
|
|
|
|
/* All Supporters - Elegant Text Flow */
|
|
.all-supporters-group {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.all-supporters-group .supporters-group-title {
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.supporters-all-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
line-height: 2.2;
|
|
max-height: 550px;
|
|
overflow-y: auto;
|
|
padding: var(--space-2) 0;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.supporter-name-item {
|
|
font-size: 0.95em;
|
|
color: var(--text-color);
|
|
opacity: 0.85;
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
}
|
|
|
|
.supporter-name-item:hover {
|
|
opacity: 1;
|
|
color: var(--lora-accent);
|
|
}
|
|
|
|
.supporter-separator {
|
|
margin: 0 10px;
|
|
color: var(--text-color);
|
|
opacity: 0.25;
|
|
font-weight: 300;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.support-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.support-left {
|
|
flex: 1;
|
|
}
|
|
|
|
.support-right {
|
|
border-left: none;
|
|
border-top: 1px solid var(--lora-border);
|
|
padding-left: 0;
|
|
padding-top: var(--space-3);
|
|
}
|
|
|
|
.supporters-all-list {
|
|
max-height: 200px;
|
|
}
|
|
|
|
.supporters-special-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
} |