dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-03-30 14:45:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: QR overlay actually transparent — JS strips white fills, 70% opacity

Browse Source 
CSS fill-opacity selectors weren't matching the QR library's output.
Now JS directly sets white rects to transparent after SVG generation.
Overlay at 70% opacity so it doesn't fight the map for attention.
Removed 'Scan with MeshCore app' label from overlay version.
This commit is contained in:
you
2026-03-23 16:31:18 +00:00
parent a1de3c7a9a
commit 41222e1960
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/nodes.js
View File

@@ -593,9 +593,21 @@
const qr = qrcode(0, 'M');
qr.addData(meshcoreUrl);
qr.make();
qrEl.innerHTML = `<div style="font-size:11px;color:var(--text-muted);margin-bottom:4px">Scan with MeshCore app to add contact</div>` + qr.createSvgTag(3, 0);
const isOverlay = !!qrEl.closest('.node-map-qr-overlay');
qrEl.innerHTML = (isOverlay ? '' : `<div style="font-size:11px;color:var(--text-muted);margin-bottom:4px">Scan with MeshCore app to add contact</div>`) + qr.createSvgTag(3, 0);
const svg = qrEl.querySelector('svg');
if (svg) { svg.style.display = 'block'; svg.style.margin = '0 auto'; }
if (svg) {
svg.style.display = 'block'; svg.style.margin = '0 auto';
// Make QR background transparent for map overlay
if (isOverlay) {
svg.querySelectorAll('rect').forEach(r => {
const fill = (r.getAttribute('fill') || '').toLowerCase();
if (fill === '#ffffff' || fill === 'white' || fill === '#fff') {
r.setAttribute('fill', 'transparent');
}
});
}
}
} catch {}
}

4
public/style.css
View File

@@ -1118,9 +1118,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
[data-theme="dark"] .node-qr svg rect[fill="#000000"] { fill: var(--text); }
.node-map-qr-wrap { position: relative; }
.node-map-qr-overlay { position: absolute; bottom: 8px; right: 8px; z-index: 400; background: none; border: none; padding: 0; }
.node-map-qr-overlay svg { max-width: 64px; display: block; }
.node-map-qr-overlay svg rect[fill="#ffffff"] { fill-opacity: 0.1; }
[data-theme="dark"] .node-map-qr-overlay svg rect[fill="#ffffff"] { fill-opacity: 0.1; }
.node-map-qr-overlay svg { max-width: 64px; display: block; opacity: 0.7; }
[data-theme="dark"] .node-map-qr-overlay svg rect[fill="#000000"] { fill: var(--text); }
/* Replay on Live Map button in packet detail */