Improve mobile widget header icons

This commit is contained in:
rajchales-monito
2026-07-30 16:40:02 +02:00
parent f3235903a8
commit a990d1aed0
+21 -1
View File
@@ -297,7 +297,10 @@
infoButton.setAttribute("aria-label", copy.infoTitle || "GDPR informace");
infoButton.title = copy.infoTitle || "GDPR informace";
infoButton.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 10h2v7h-2v-7Zm0-3h2v2h-2V7Zm1-5a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"></path></svg>`;
closeButton.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.7 8.7 12 14l5.3-5.3 1.4 1.4L12 16.8l-6.7-6.7 1.4-1.4Z"></path></svg>`;
closeButton.innerHTML = `
<svg class="mf-close-minimize" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.7 8.7 12 14l5.3-5.3 1.4 1.4L12 16.8l-6.7-6.7 1.4-1.4Z"></path></svg>
<svg class="mf-close-fullscreen" viewBox="0 0 24 24" aria-hidden="true"><path d="m7.05 5.64 4.95 4.95 4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41Z"></path></svg>
`;
closeButton.setAttribute("aria-label", copy.closeLabel || "Zmensit chat");
closeButton.title = copy.closeLabel || "Zmensit chat";
closeButton.before(actions);
@@ -616,6 +619,7 @@
.mf-header-actions { position: absolute; top: 9px; right: 9px; display: flex; gap: 6px; }
.mf-close, .mf-info { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgb(255 255 255 / 16%); color: ${c.brandText}; cursor: pointer; padding: 0; }
.mf-close svg, .mf-info svg { width: 19px; height: 19px; fill: currentColor; }
.mf-close-fullscreen { display: none; }
.mf-messages { padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.mf-message { max-width: 86%; padding: 9px 11px; border-radius: 8px; background: #f1f5f2; color: ${c.text}; }
.mf-message.admin { align-self: flex-start; background: #eef7f4; }
@@ -690,6 +694,22 @@
header {
padding-top: max(15px, env(safe-area-inset-top, 0px));
}
.mf-header-actions {
top: max(10px, env(safe-area-inset-top, 0px));
right: 10px;
gap: 8px;
}
.mf-close, .mf-info {
width: 44px;
height: 44px;
border-radius: 8px;
}
.mf-close svg, .mf-info svg {
width: 26px;
height: 26px;
}
.mf-close-minimize { display: none; }
.mf-close-fullscreen { display: block; }
.mf-messages {
min-height: 0;
padding: 14px 12px;