diff --git a/js/model-manager.css b/js/model-manager.css index 6c9ab04ac..652599787 100644 --- a/js/model-manager.css +++ b/js/model-manager.css @@ -234,4 +234,86 @@ .cmm-manager-light .cmm-btn-install { background-color: #333; -} \ No newline at end of file +} +/* ========================================================================= + 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(-50%, -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; +}