Schiffstyp-Filter: Gleiche Groesse wie Hauptmenue

Checkboxen 16x16px, Dots 10px, Labels 13px, mehr Padding.
Identisch zum uebergeordneten Layer-Panel.
Dieser Commit ist enthalten in:
Claude Dev
2026-03-24 23:46:42 +01:00
Ursprung 2be1f6a37d
Commit 8a24605323

Datei anzeigen

@@ -55,14 +55,14 @@ const ShipsLayer = {
{ id: 'other', label: 'Sonstige', color: '#888888' },
];
var self = this;
var html = '<div style="font-size:9px;color:var(--accent);letter-spacing:1px;margin-bottom:4px">SCHIFFSTYPEN</div>';
var html = '<div style="font-size:11px;color:var(--accent);letter-spacing:2px;margin-bottom:6px">SCHIFFSTYPEN</div>';
cats.forEach(function(c) {
html += '<label style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text);cursor:pointer;padding:1px 0">' +
'<input type="checkbox" checked onchange="ShipsLayer.toggleFilter(\'' + c.id + '\',this.checked)" style="accent-color:' + c.color + ';width:11px;height:11px">' +
'<span style="width:6px;height:6px;border-radius:50%;background:' + c.color + '"></span>' + c.label + '</label>';
html += '<label style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;padding:5px 0">' +
'<input type="checkbox" checked onchange="ShipsLayer.toggleFilter(\'' + c.id + '\',this.checked)" style="accent-color:' + c.color + ';width:16px;height:16px;cursor:pointer">' +
'<span style="width:10px;height:10px;border-radius:50%;background:' + c.color + '"></span>' + c.label + '</label>';
});
html += '<label style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text);cursor:pointer;padding:3px 0 0;border-top:1px solid rgba(255,255,255,0.06);margin-top:3px">' +
'<input type="checkbox" onchange="ShipsLayer.toggleProjection(this.checked)" style="accent-color:var(--accent);width:11px;height:11px">Kurslinien</label>';
html += '<label style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;padding:6px 0 0;border-top:1px solid rgba(255,255,255,0.06);margin-top:4px">' +
'<input type="checkbox" onchange="ShipsLayer.toggleProjection(this.checked)" style="accent-color:var(--accent);width:16px;height:16px;cursor:pointer">Kurslinien</label>';
el.innerHTML = html;
el.style.display = 'block';
},