[feat] Add CSS LOD classes for Vue node rendering optimization

- Add lg-node--lod-full, lg-node--lod-reduced, lg-node--lod-minimal classes
- Reduced detail level uses smaller fonts and reduced padding
- Minimal detail level hides controls and uses compact header
- Smooth transitions between LOD levels to prevent jarring changes
- User select disabled on nodes to prevent text selection issues

These classes enable progressive detail reduction at different zoom levels for better performance.
This commit is contained in:
bymyself
2025-07-05 02:32:08 -07:00
parent 290906e7cc
commit 5cb9ba1c18

View File

@@ -679,6 +679,11 @@ audio.comfy-audio.empty-audio-widget {
/* Smooth transitions between LOD levels */
.lg-node {
transition: min-height 0.2s ease;
/* Disable text selection on all nodes */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.lg-node .lg-slot,