alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-21 20:52:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

Add Master Visibility Toggle to Layers Panel

Browse Source 
Introduce a three-state checkbox in CanvasLayersPanel header to control visibility of all layers at once. Supports automatic state updates and integrates with renderLayers() for seamless layer management.
This commit is contained in:
Dariusz L
2025-08-09 16:15:11 +02:00
parent 00cf74a3c2
commit c9860cac9e
4 changed files with 295 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/css/layers_panel.css
View File

@@ -23,6 +23,85 @@
margin-bottom: 8px;
}
.checkbox-container {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
position: relative;
}
.checkbox-container:hover {
background-color: #4a4a4a;
}
.checkbox-container input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkbox-container .custom-checkbox {
height: 16px;
width: 16px;
background-color: #2a2a2a;
border: 1px solid #666;
border-radius: 3px;
transition: all 0.2s;
position: relative;
flex-shrink: 0;
}
.checkbox-container input:checked ~ .custom-checkbox {
background-color: #3a76d6;
border-color: #3a76d6;
}
.checkbox-container .custom-checkbox::after {
content: "";
position: absolute;
display: none;
left: 5px;
top: 1px;
width: 4px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox-container input:checked ~ .custom-checkbox::after {
display: block;
}
.checkbox-container input:indeterminate ~ .custom-checkbox {
background-color: #3a76d6;
border-color: #3a76d6;
}
.checkbox-container input:indeterminate ~ .custom-checkbox::after {
display: block;
content: "";
position: absolute;
top: 7px;
left: 3px;
width: 8px;
height: 2px;
background-color: white;
border: none;
transform: none;
box-shadow: none;
}
.checkbox-container:hover {
background-color: #4a4a4a;
}
.layers-panel-title {
font-weight: bold;
color: #ffffff;