Files
ComfyUI-Lora-Manager/static/css/components/shared.css
Will Miao c402f53258 Implement early access handling and UI enhancements for LoRA downloads
- Added error handling for early access restrictions in the API routes, returning appropriate status codes and messages.
- Enhanced the Civitai client to log unauthorized access attempts and provide user-friendly error messages.
- Updated the download manager to check for early access requirements and log warnings accordingly.
- Introduced UI elements to indicate early access status for LoRAs, including badges and warning messages in the import manager.
- Improved toast notifications to inform users about early access download failures and provide relevant information.
2025-03-23 14:45:11 +08:00

111 lines
3.0 KiB
CSS

/* Local Version Badge */
.local-badge {
display: inline-flex;
align-items: center;
background: var(--lora-accent);
color: var(--lora-text);
padding: 4px 8px;
border-radius: var(--border-radius-xs);
font-size: 0.8em;
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
position: relative;
/* Force hardware acceleration to prevent Chrome scroll issues */
transform: translateZ(0);
will-change: transform;
}
.local-badge i {
margin-right: 4px;
font-size: 0.9em;
}
/* Early Access Badge */
.early-access-badge {
display: inline-flex;
align-items: center;
background: #00B87A; /* Green for early access */
color: white;
padding: 4px 8px;
border-radius: var(--border-radius-xs);
font-size: 0.8em;
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
position: relative;
/* Force hardware acceleration to prevent Chrome scroll issues */
transform: translateZ(0);
will-change: transform;
}
.early-access-badge i {
margin-right: 4px;
font-size: 0.9em;
}
.early-access-info {
display: none;
position: absolute;
top: 100%;
right: 0;
background: var(--card-bg);
border: 1px solid #00B87A;
border-radius: var(--border-radius-xs);
padding: var(--space-1);
margin-top: 4px;
font-size: 0.9em;
color: var(--text-color);
white-space: normal;
word-break: break-all;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 100; /* Higher z-index to ensure it's above other elements */
min-width: 300px;
max-width: 300px;
/* Create a separate layer with hardware acceleration */
transform: translateZ(0);
/* Use a fixed position to ensure it's in a separate layer from scrollable content */
position: fixed;
pointer-events: none; /* Don't block mouse events */
}
.early-access-badge:hover .early-access-info {
display: block;
pointer-events: auto; /* Allow interaction with the tooltip when visible */
}
.local-path {
display: none;
position: absolute;
top: 100%;
right: 0;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-xs);
padding: var(--space-1);
margin-top: 4px;
font-size: 0.9em;
color: var(--text-color);
white-space: normal;
word-break: break-all;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 100; /* Higher z-index to ensure it's above other elements */
min-width: 200px;
max-width: 300px;
/* Create a separate layer with hardware acceleration */
transform: translateZ(0);
/* Use a fixed position to ensure it's in a separate layer from scrollable content */
position: fixed;
pointer-events: none; /* Don't block mouse events */
}
.local-badge:hover .local-path {
display: block;
pointer-events: auto; /* Allow interaction with the tooltip when visible */
}
.error-message {
color: var(--lora-error);
font-size: 0.9em;
margin-top: 4px;
}