alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-25 15:15:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat: Refactor progress bar classes for initialization component to improve clarity and avoid conflicts

Browse Source
This commit is contained in:
Will Miao
2025-04-13 18:42:36 +08:00
parent 76fd722e33
commit 53080844d2
2 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
static/css/components/initialization.css
View File

@@ -43,28 +43,34 @@
font-size: 1rem; font-size: 1rem;
} }
/* Progress Bar Styles */ /* Progress Bar Styles specific to initialization */
.initialization-progress { .initialization-progress {
margin-bottom: var(--space-3); margin-bottom: var(--space-3);
} }
.progress-bar-container { /* Renamed container class */
width: 100%; .init-progress-container {
height: 8px; width: 100%; /* Use full width within its container */
background-color: var(--lora-border); height: 8px; /* Match height from previous .progress-bar-container */
background-color: var(--lora-border); /* Consistent background */
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
margin-bottom: var(--space-1); margin: 0 auto var(--space-1); /* Center horizontally, add bottom margin */
} }
.progress-bar { /* Renamed progress bar class */
.init-progress-bar {
height: 100%; height: 100%;
background: linear-gradient(90deg, var(--lora-accent) 0%, rgba(var(--lora-accent), 0.8) 100%); /* Use a gradient consistent with the theme accent */
border-radius: 4px; background: linear-gradient(90deg, var(--lora-accent) 0%, color-mix(in oklch, var(--lora-accent) 80%, transparent) 100%);
border-radius: 4px; /* Match container radius */
transition: width 0.3s ease; transition: width 0.3s ease;
width: 0%; width: 0%; /* Start at 0% */
} }
/* Remove the old .progress-bar rule specific to initialization to avoid conflicts */
/* .progress-bar { ... } */
/* Progress Details */ /* Progress Details */
.progress-details { .progress-details {
display: flex; display: flex;

5
templates/components/initialization.html
View File

@@ -10,8 +10,9 @@
<div class="loading-content"> <div class="loading-content">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
<div class="loading-status" id="progressStatus">Initializing...</div> <div class="loading-status" id="progressStatus">Initializing...</div>
<div class="progress-container"> <!-- Use initialization-specific classes for the progress bar -->
<div class="progress-bar" id="initProgressBar"></div> <div class="init-progress-container">
<div class="init-progress-bar" id="initProgressBar"></div>
</div> </div>
<div class="progress-details"> <div class="progress-details">
<span id="progressPercentage">0%</span> <span id="progressPercentage">0%</span>