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

Refactor toggle switch styles for update preferences in the modal

Browse Source
This commit is contained in:
Will Miao
2025-03-13 10:00:32 +08:00
parent 2ea0fa8471
commit c88388da67
1 changed files with 27 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
static/css/components/update-modal.css
View File

@@ -153,56 +153,43 @@
border-top: 1px solid var(--lora-border); border-top: 1px solid var(--lora-border);
margin-top: var(--space-2); margin-top: var(--space-2);
padding-top: var(--space-2); padding-top: var(--space-2);
}
/* Toggle switch styles */
.toggle-switch {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; justify-content: flex-start;
}
/* Override toggle switch styles for update preferences */
.update-preferences .toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
width: auto;
height: 24px;
cursor: pointer; cursor: pointer;
user-select: none;
} }
.toggle-switch input { .update-preferences .toggle-slider {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.toggle-slider {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 40px; width: 50px;
height: 20px; height: 24px;
background-color: var(--border-color);
border-radius: 20px;
transition: .4s;
flex-shrink: 0; flex-shrink: 0;
margin-right: 10px;
} }
.toggle-slider:before { .update-preferences .toggle-label {
position: absolute; margin-left: 0;
content: ""; white-space: nowrap;
height: 16px; line-height: 24px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
border-radius: 50%;
transition: .4s;
} }
input:checked + .toggle-slider { @media (max-width: 480px) {
background-color: var(--lora-accent); .update-preferences {
} flex-direction: row;
flex-wrap: wrap;
input:checked + .toggle-slider:before { }
transform: translateX(20px);
} .update-preferences .toggle-label {
margin-top: 5px;
.toggle-label { }
font-size: 0.9em;
color: var(--text-color);
} }