Update custom-nodes-manager.css old close button override

js/custom-nodes-manager.css

@@ -726,4 +726,86 @@
 
 .cn-manager-light .cn-btn-install {
 	background-color: #333;
-}
+}
+/* =========================================================================
+   UNIVERSAL ZERO-FLASH CLOSE BUTTON FACTORY OVERRIDE
+   ========================================================================= */
+
+/* 1. Base button layout setup */
+#cm-manager-dialog .p-dialog-header-close,
+#cm-manager-dialog .p-dialog-close,
+.comfy-modal .p-dialog-header-close,
+.comfy-modal .p-dialog-close,
+.comfy-dialog .comfy-menu-close,
+.comfy-panel .comfy-menu-close,
+.comfy-close-btn {
+    float: none !important;
+    position: absolute !important;
+    top: 12px !important;
+    right: 12px !important; 
+    left: auto !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    box-sizing: border-box !important;
+    width: 32px !important;
+    height: 32px !important;
+    overflow: visible !important;
+}
+
+/* 2. Dead-center text icon alignments */
+#cm-manager-dialog .p-dialog-header-close *,
+.comfy-modal .p-dialog-header-close *,
+.comfy-close-btn * {
+    position: relative !important;
+    z-index: 2 !important;
+    display: inline-block !important;
+    line-height: 32px !important;
+    height: 32px !important;
+    width: 32px !important;
+    text-align: center !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* 3. Pre-create the hidden circular vector layer behind the icon */
+#cm-manager-dialog .p-dialog-header-close::before,
+.comfy-modal .p-dialog-header-close::before,
+.comfy-close-btn::before {
+    content: "" !important;
+    position: absolute !important;
+    z-index: 1 !important;
+    top: 50% !important;
+    left: 50% !important;
+    width: 30px !important;
+    height: 30px !important;
+    border-radius: 50% !important;
+    background-color: transparent !important;
+    box-sizing: border-box !important;
+    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
+    transform: translate(-74.5%, -50%) !important; 
+}
+
+/* 4. Smooth gray circle activation on mouse hover OR keyboard tab selection */
+#cm-manager-dialog .p-dialog-header-close:hover::before,
+.comfy-modal .p-dialog-header-close:hover::before,
+.comfy-close-btn:hover::before,
+#cm-manager-dialog .p-dialog-header-close:focus-visible::before,
+.comfy-modal .p-dialog-header-close:focus-visible::before,
+.comfy-close-btn:focus-visible::before {
+    background-color: rgba(255, 255, 255, 0.15) !important;
+}
+
+/* 5. Add an accessibility glow ring ONLY during keyboard focus navigation loops */
+#cm-manager-dialog .p-dialog-header-close:focus-visible::before,
+.comfy-modal .p-dialog-header-close:focus-visible::before,
+.comfy-close-btn:focus-visible::before {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75) !important;
+}