(Input + Span) als ersten Child und unser Button (via
label.appendChild) als zweiten - die werden damit links/rechts
verteilt. Das innere
behaelt sein eigenes Layout. */
.leaflet-control-layers-base label {
display: flex;
align-items: center;
gap: 4px;
}
/* Overlay-Labels als 3-Spalten-Grid:
┌─────────┬───────────────────────┬──────────┐
│ pan-to │ checkbox + name (Z1) │ sort │
│ (2 row) │ opacity-slider (Z2) │ (2 row) │
└─────────┴───────────────────────┴──────────┘
Pan-to + Sort-Arrows ueberspannen beide Zeilen ueber grid-row.
Der innere Leaflet-Container
(Checkbox + Name) ist Z1,
die Opacity-Slider-Row ist Z2. */
/* vereinfachtes Layout - Label als position:relative,
Sort-Arrows absolut am rechten Rand ueber beide Zeilen. Innerhalb
des Labels normaler Flow (input + flyTo + span im inneren div, dann
opacity-slider-row darunter), mit padding-right damit nichts unter
die Sort-Arrows rutscht. */
.leaflet-control-layers-overlays label {
display: block;
position: relative;
padding: 2px 36px 2px 4px; /* rechts Platz fuer Sort-Arrows */
}
.leaflet-control-layers-overlays label > div {
/* Leaflets eingefuegtes div mit input+span (+ flyTo via insertBefore). */
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.leaflet-control-layers-overlays label > .geolyser-opacity-slider-row {
margin-top: 2px;
padding-left: 24px;
}
.leaflet-control-layers-overlays label > .geolyser-layer-sort-arrows {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
/* Kunden-Gruppierung der Tilesets (nur Geolyser-Super-Container, per
decorateLayerControlWithCustomerGroups injiziert). Kopfzeile = klickbarer
Aufklapp-Header, Member-Labels bleiben direkte Kinder der Overlay-Liste. */
.geolyser-tileset-group-head {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
margin-top: 4px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: var(--fg);
border-top: 1px solid var(--border);
user-select: none;
}
.geolyser-tileset-group-head:first-child {
margin-top: 0;
border-top: 0;
}
.geolyser-tileset-group-head:hover { color: var(--accent, #3BBDE8); }
.geolyser-tileset-group-caret {
flex: 0 0 auto;
font-size: 10px;
line-height: 1;
transition: transform 0.15s ease;
}
.geolyser-tileset-group-head.is-collapsed .geolyser-tileset-group-caret {
transform: rotate(-90deg);
}
.geolyser-tileset-group-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.geolyser-tileset-group-count {
flex: 0 0 auto;
min-width: 18px;
text-align: center;
background: var(--border);
color: var(--fg);
border-radius: 8px;
padding: 0 6px;
font-size: 11px;
font-weight: 600;
}
/* Eingeklappte Member-Labels ausblenden. Die Overlay-Label-Regel oben
setzt display:block, was den UA-Default [hidden]{display:none}
ueberstimmt — daher explizit erzwingen. */
.leaflet-control-layers-overlays label[hidden] { display: none !important; }
.geolyser-fly-to {
border: none;
background: transparent;
cursor: pointer;
/* Button sitzt zwischen Checkbox und Text -
margin-left:auto braucht's nicht mehr, weil insertBefore den Btn
direkt nach dem input-Element einfuegt. */
margin-left: 4px;
margin-right: 4px;
padding: 2px 4px;
color: var(--accent, #3BBDE8);
vertical-align: middle;
line-height: 1;
border-radius: 4px;
transition: background 0.12s ease, transform 0.12s ease;
}
.geolyser-fly-to:hover {
background: rgba(59, 189, 232, 0.12);
transform: translateY(-1px);
}
.geolyser-fly-to img,
.geolyser-fly-to svg {
display: block;
width: 18px;
height: 18px;
}
/* Disabled-State fuer Tilesets ohne Spring-
Punkt. Btn bleibt sichtbar (gleicher Slot wie aktive Btns), aber
ausgegraut und ohne Hover-Lift. cursor:help signalisiert dass der
Tooltip Information liefert (statt der "verboten"-Zeiger). */
.geolyser-fly-to.is-disabled,
.geolyser-fly-to:disabled {
color: var(--muted, #8a979e);
opacity: 0.45;
cursor: help;
}
.geolyser-fly-to.is-disabled:hover,
.geolyser-fly-to:disabled:hover {
background: transparent;
transform: none;
}
.modal-header {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
margin: -22px -24px 12px -24px;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.modal-header .modal-title { margin: 0; }
.modal-header-tabs {
display: flex; gap: 4px;
}
/* Waehrend die Reiterzeile mit der Maus gezogen wird (js/reiter-ziehen.js). */
.modal-header-tabs.ist-gezogen {
cursor: grabbing;
user-select: none;
}
.modal-header-tabs.ist-gezogen .modal-header-tab { cursor: grabbing; }
.modal-header-tab {
border: 1px solid transparent;
background: transparent;
color: var(--muted-hi);
padding: 6px 14px;
border-radius: var(--radius-sm);
cursor: pointer;
font: inherit;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.modal-header-tab:hover {
background: var(--bg-card);
color: var(--fg);
}
/* aktiver Tab klar erkennbar im Light- UND Dark-Mode. */
.modal-header-tab.is-active {
background: var(--c-primary);
color: var(--c-light);
border-color: var(--c-primary-dk);
font-weight: 500;
}
.modal-close-btn {
border: 0;
background: transparent;
color: var(--muted-hi);
cursor: pointer;
padding: 4px 6px;
border-radius: var(--radius-sm);
line-height: 0;
}
.modal-close-btn:hover { background: var(--input-bg); color: var(--fg); }
/* Action-Button mit fuehrendem Icon (z.B. "Speichern", "Verwerfen",
"Widerrufen" in den Confirm-Dialogs). SVG links, Label rechts. */
.btn-with-icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-with-icon svg {
flex-shrink: 0;
}
.btn-with-icon > span {
line-height: 1;
}
.modal-body {
overflow-y: auto;
margin: 0 -8px;
padding: 0 8px;
}
.modal-footer {
display: flex; gap: 8px; justify-content: flex-end;
border-top: 1px solid var(--border);
margin: 16px -24px -22px -24px;
padding: 12px 18px;
}
.modal-title { margin: 0 0 12px 0; }
.modal-text { margin: 0 0 16px 0; color: var(--muted-hi); }
.modal-form {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Nur die TOP-LEVEL-Form (direktes Kind von .modal-card) bekommt
flex:1 + overflow:auto. Geschachtelte Forms (Profil-Modal hat 2-3 Forms
nebeneinander im Body) wuerden sich sonst gegenseitig auf height:0
druecken (timezone-form, password-form Bug). */
.modal-card > .modal-form {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.field { display: flex; flex-direction: column; gap: 4px; }
/* .field hat display:flex — das
ueberschreibt den UA-Default display:none fuer [hidden]. Explizit
erzwingen damit der Avatar-Picker im Bug-Modal korrekt
aus-/eingeblendet werden kann. */
.field[hidden] { display: none !important; }
.field-label { font-size: .8em; color: var(--muted); }
/* Gleiche Optik wie alle anderen Dropdowns im Modal, DESIGN.md 5.5.
Die Felder im i2i-Export tragen .i2i-in und haengen hier mit dran. */
.field input, .field select, .field textarea, .i2i-in, .clsp-src {
background: var(--input-bg);
color: var(--fg);
border: 1px solid var(--border);
padding: 8px 10px;
border-radius: var(--radius-sm);
}
.field input:focus, .field select:focus, .field textarea:focus,
.i2i-in:focus, .clsp-src:focus {
outline: none; border-color: var(--border-hi);
box-shadow: 0 0 0 3px rgba(0, 127, 180, 0.18);
}
.form-error { color: var(--c-error); margin: 0; font-size: .85em; }
/* Status-Linie im Bug-Report- und aehnlichen Modals.
* data-kind = info | ok | error setzt die Farbe. */
.modal-status {
margin: 6px 0 0;
font-size: .88em;
padding: 6px 10px;
border-radius: var(--radius-sm, 6px);
background: var(--bg-card);
color: var(--fg);
}
.modal-status[data-kind="info"] { color: var(--muted-hi); }
.modal-status[data-kind="ok"] { color: var(--c-signal-dk, #00a04f); }
.modal-status[data-kind="error"] { color: var(--c-error); background: var(--c-error-bg); }
.modal-actions {
display: flex; gap: 8px; justify-content: flex-end;
margin-top: 8px;
}
.modal-actions--stack { flex-direction: column; }
.modal-actions--stack .primary, .modal-actions--stack .ghost {
width: 100%; padding: 12px 14px;
flex-direction: column; align-items: flex-start;
}
.modal-action-hint {
font-size: .8em;
color: var(--muted-hi);
font-weight: 400;
margin-top: 2px;
}
/* ---- Login / Dashboard / Trash / Index (gemeinsame Hilfsklassen) ---- */
.page--center {
min-height: 100%;
display: flex; align-items: center; justify-content: center;
padding: 32px 16px;
}
.card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: 24px;
max-width: 460px;
width: 100%;
}
.dashboard, .trash {
max-width: 1100px;
margin: 24px auto;
padding: 0 16px;
}
table.simple {
width: 100%; border-collapse: collapse;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
table.simple th, table.simple td {
padding: 8px 10px; text-align: left;
border-bottom: 1px solid var(--border);
}
table.simple tr:last-child td { border-bottom: 0; }
table.simple th { color: var(--muted); font-weight: 500; font-size: .85em; }
/* ---- Leaflet-Anpassungen ---- */
.leaflet-container { background: var(--map-surface); font-family: var(--font-ui); }
.leaflet-control-attribution {
background: var(--map-info-bg) !important;
color: var(--muted-hi) !important;
border-radius: 6px 6px 0 0;
font-size: 11px;
}
.leaflet-control-attribution a { color: var(--c-primary-hi) !important; }
/* Attribution wird per JS aus dem leaflet-bottom-right
* Container raus geloest und direkt in #map gehaengt - dann positioniert
* sie sich relativ zur ganzen Karte und kann unten mittig stehen. */
.leaflet-control-attribution.attribution-bottom-center {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
margin: 0 !important;
z-index: 600;
pointer-events: auto;
padding: 2px 8px;
border-radius: 6px 6px 0 0;
max-width: calc(100% - 40px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Leaflet-Bar-Buttons (Zoom +/-, Locate) analog zu GPS-Tools:
* solider dunkler Hintergrund, weisses Icon im Dark-Mode, beim Hover
* Icon + Border in Tuerkis (c-primary-hi). Default (Light) bleibt ein
* heller Card-Hintergrund. */
/* e: Buttons in Zoom-Control + Geoman-Toolbar 4px auseinander
* ziehen, damit die Border (besonders der tuerkise Hover/Aktiv-Border)
* sauber rund um jeden einzelnen Button sichtbar ist. Default-Leaflet
* stackt sie sonst direkt aneinander mit Shared-Border. */
.leaflet-bar {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
.leaflet-bar a {
background: var(--bg-elevated);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 6px) !important;
margin-bottom: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.leaflet-bar a:last-child {
margin-bottom: 0;
}
.leaflet-bar a:hover {
background: var(--bg-elevated);
color: var(--c-primary-hi);
border-bottom-color: var(--c-primary-hi);
border-color: var(--c-primary-hi);
}
.leaflet-bar a.leaflet-disabled {
background: var(--bg-elevated);
color: var(--muted);
opacity: 0.55;
}
[data-theme="dark"] .leaflet-bar a {
background: #20262a;
color: #ffffff;
border-color: var(--border);
}
[data-theme="dark"] .leaflet-bar a:hover {
background: #2b3338;
color: var(--c-primary-hi);
border-color: var(--c-primary-hi);
border-bottom-color: var(--c-primary-hi);
}
.leaflet-control-scale-line {
background: var(--map-control-bg-lo) !important;
color: var(--fg) !important;
border-color: var(--border) !important;
/* Leaflet-Default packt einen weissen Text-Shadow drum,
* der im Dark-Mode wie ein Glow wirkt. Plain Text ohne Schatten. */
text-shadow: none !important;
}
[data-theme="dark"] .leaflet-control-scale-line {
color: #ffffff !important;
}
/* i: Scale-Line muss ueber den Legal-Links (.map-legal-links)
* sitzen, sonst ueberdeckt sie unten rechts den Datenschutz/Impressum-
* Hinweis. Etwa 26px Reserve = Hoehe der Legal-Pill + 4px Luft. */
.leaflet-control-scale {
margin-bottom: 28px !important;
}