diff --git a/web/css/linker-shell.css b/web/css/linker-shell.css
index fefdaff..5f1af7f 100644
--- a/web/css/linker-shell.css
+++ b/web/css/linker-shell.css
@@ -77,6 +77,9 @@
.ml-dialog-controls {
flex: 0 0 auto;
+ align-self: stretch;
+ gap: 0;
+ margin: -5px -10px -5px 0;
}
#model-linker-drag-handle {
@@ -93,29 +96,58 @@
background: rgba(255, 255, 255, 0.025);
}
-.ml-window-btn {
+#model-linker-modal .ml-window-btn {
display: flex;
align-items: center;
justify-content: center;
- color: var(--input-text);
+ color: rgba(255, 255, 255, 0.70);
cursor: pointer;
- border-radius: 6px;
- background: rgba(255, 255, 255, 0.025);
- border: 1px solid rgba(255, 255, 255, 0.11);
+ border: 0 !important;
+ border-radius: 0 !important;
+ background: transparent !important;
+ box-shadow: none !important;
+ line-height: 1;
+ appearance: none;
+ -webkit-appearance: none;
+ transition: var(--ml-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease);
}
-.ml-window-btn--fullscreen {
- min-width: 28px;
- height: 26px;
- padding: 0 7px;
- font-size: 13px;
+#model-linker-modal .ml-window-btn:hover {
+ color: rgba(255, 255, 255, 0.92);
+ background: rgba(255, 255, 255, 0.075) !important;
}
-.ml-window-btn--close {
- width: 26px;
- height: 26px;
+#model-linker-modal .ml-window-btn:focus-visible {
+ outline: none;
+ box-shadow: none !important;
+}
+
+#model-linker-modal .ml-window-btn--fullscreen {
+ width: 46px;
+ min-width: 46px;
+ height: 100%;
+ min-height: 40px;
padding: 0;
- font-size: 18px;
+}
+
+#model-linker-modal .ml-window-btn--close {
+ width: 46px;
+ min-width: 46px;
+ height: 100%;
+ min-height: 40px;
+ padding: 0;
+}
+
+#model-linker-modal .ml-window-btn--close:hover {
+ color: #ffffff;
+ background: #c42b1c !important;
+}
+
+#model-linker-modal .ml-window-btn-icon {
+ display: block;
+ width: 23px;
+ height: 23px;
+ pointer-events: none;
}
#model-linker-body {
diff --git a/web/linker.js b/web/linker.js
index db9bea0..fbe507f 100644
--- a/web/linker.js
+++ b/web/linker.js
@@ -2039,7 +2039,8 @@ class LinkerManagerDialog extends ComfyDialog {
const fullscreenButton = $el("button", {
id: "model-linker-fullscreen-toggle",
className: "ml-window-btn ml-window-btn--fullscreen",
- textContent: "⛶",
+ innerHTML: getSvgIcon('windowMaximize', 'currentColor', 'ml-window-btn-icon'),
+ ariaLabel: "Toggle full screen",
onclick: () => this.toggleFullScreen()
});
this.setTooltip(fullscreenButton, "Toggle full screen");
@@ -2058,7 +2059,8 @@ class LinkerManagerDialog extends ComfyDialog {
fullscreenButton,
$el("button", {
className: "ml-window-btn ml-window-btn--close",
- textContent: "×",
+ innerHTML: getSvgIcon('x', 'currentColor', 'ml-window-btn-icon'),
+ ariaLabel: "Close Model Linker",
onclick: () => this.close()
})
])
@@ -2091,7 +2093,11 @@ class LinkerManagerDialog extends ComfyDialog {
el.style.maxHeight = '100vh';
el.style.borderRadius = '0';
el.style.resize = 'none';
- if (btn) btn.textContent = '🗗';
+ if (btn) {
+ btn.innerHTML = getSvgIcon('windowRestore', 'currentColor', 'ml-window-btn-icon');
+ btn.setAttribute('aria-label', 'Exit full screen');
+ this.setTooltip(btn, 'Exit full screen');
+ }
try { localStorage.setItem('model_linker_modal_fullscreen', '1'); } catch (e) {}
} else {
// Restore centered sizing
@@ -2126,7 +2132,11 @@ class LinkerManagerDialog extends ComfyDialog {
el.style.left = '50%';
el.style.transform = 'translate(-50%, -50%)';
}
- if (btn) btn.textContent = '⛶';
+ if (btn) {
+ btn.innerHTML = getSvgIcon('windowMaximize', 'currentColor', 'ml-window-btn-icon');
+ btn.setAttribute('aria-label', 'Enter full screen');
+ this.setTooltip(btn, 'Enter full screen');
+ }
this.ensureModalHandleInViewport({ persist: true });
try { localStorage.setItem('model_linker_modal_fullscreen', '0'); } catch (e) {}
}
diff --git a/web/utils/icon_utils.js b/web/utils/icon_utils.js
index 5801897..947cf85 100644
--- a/web/utils/icon_utils.js
+++ b/web/utils/icon_utils.js
@@ -15,6 +15,9 @@ const SVG_ICONS = {
globe: ``,
eye: ``,
eyeOff: ``,
+ windowMaximize: ``,
+ windowRestore: ``,
+ x: ``,
civitai: ``,
huggingface: ``
};