, wir rendern den sichtbaren Kreis per
::before (statt einer Hintergrundfarbe), damit das Hover-Highlight
und der Cursor-Style getrennt vom Body laufen. */
.geolyser-measure-vertex {
cursor: move;
/* unsichtbare Hit-Box etwas groesser fuer Touch (44px). */
width: 16px !important;
height: 16px !important;
background: transparent !important;
border: none !important;
transition: transform .12s;
}
.geolyser-measure-vertex::before {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 14px; height: 14px;
transform: translate(-50%, -50%);
background: #fff;
border: 2px solid #06829c;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
pointer-events: none;
}
.geolyser-measure-vertex:hover {
transform: scale(1.18);
z-index: 1000;
}
.geolyser-measure-vertex.leaflet-drag-target::before,
.leaflet-drag-target.geolyser-measure-vertex::before {
background: #06829c;
}
/* Touch-Geraete: groessere Hit-Box fuer Stuetzpunkte. */
@media (hover: none) and (pointer: coarse) {
.geolyser-measure-vertex {
width: 26px !important;
height: 26px !important;
}
.geolyser-measure-vertex::before {
width: 18px; height: 18px;
border-width: 3px;
}
}
.geolyser-measure-actions button { font-size: 0.85em; }
#measure-btn.is-active { color: var(--c-accent, #06829c); }
#measure-btn.is-active svg { color: var(--c-accent, #06829c); }
/* Auto-Geometry-Stats unter dem Namen, vor Bildern. */
.feature-popup-stats {
display: flex; flex-wrap: wrap; gap: 6px;
font-size: .82em;
color: var(--muted-hi);
margin: 2px 0 6px;
}
/* popup-stat Hintergrund deutlicher,
weil --bg-card im Dark-Mode quasi transparent ist und die Stats sich
nicht vom Popup abgehoben haben. Wir nehmen einen tuerkis-Tint
(Geolyser-Akzent), so wird klar dass das die "Auto-Capture"-Werte
sind die zur Geometrie gehoeren. */
.popup-stat {
background: rgba(0, 204, 255, 0.12);
border: 1px solid rgba(0, 204, 255, 0.40);
color: var(--text);
border-radius: 6px;
padding: 2px 8px;
white-space: nowrap;
font-weight: 500;
}
[data-theme="dark"] .popup-stat {
background: rgba(0, 204, 255, 0.16);
border-color: rgba(0, 204, 255, 0.50);
}
.popup-tag {
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--muted-hi);
font-size: .75em;
padding: 2px 6px;
border-radius: 999px;
display: inline-block;
vertical-align: middle;
}
/* Tag-Klassifizierung mit Farben pro Tag-Typ. */
.popup-tag.tag--user {
background: rgba(232, 175, 64, 0.18);
border-color: rgba(232, 175, 64, 0.55);
color: #8a5d10;
font-weight: 600;
}
[data-theme="dark"] .popup-tag.tag--user {
background: rgba(232, 175, 64, 0.20);
color: #f0c270;
}
.popup-tag.tag--gcp,
.popup-tag.tag--aruco {
background: rgba(80, 150, 220, 0.16);
border-color: rgba(80, 150, 220, 0.55);
color: #1f5485;
}
[data-theme="dark"] .popup-tag.tag--gcp,
[data-theme="dark"] .popup-tag.tag--aruco {
color: #88c0e8;
}
.popup-tag.tag--imported {
background: rgba(70, 170, 90, 0.16);
border-color: rgba(70, 170, 90, 0.55);
color: #1d6a30;
}
[data-theme="dark"] .popup-tag.tag--imported {
color: #88dca0;
}
.popup-tag.tag--temp {
background: rgba(180, 90, 200, 0.16);
border-color: rgba(180, 90, 200, 0.55);
color: #6b1f7d;
}
[data-theme="dark"] .popup-tag.tag--temp {
color: #d088e0;
}
.popup-tag.tag--measure {
background: rgba(6, 130, 156, 0.16);
border-color: rgba(6, 130, 156, 0.55);
color: #045b6e;
}
[data-theme="dark"] .popup-tag.tag--measure {
color: #6fc4d8;
}
.popup-tag.tag--more {
background: var(--bg-elevated, rgba(0,0,0,0.06));
color: var(--muted-hi);
cursor: help;
font-style: italic;
border-style: dashed;
}
[data-theme="dark"] .popup-tag.tag--more {
background: rgba(255,255,255,0.06);
}
.feature-popup-actions {
display: flex; gap: 6px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.feature-popup-actions button {
flex: 1 1 auto;
background: transparent; color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 8px;
font-size: .85em;
}
.feature-popup-actions button:hover { background: var(--bg-card); border-color: var(--border-hi); }
.feature-popup-actions button.is-destructive { color: var(--c-error); border-color: var(--c-error-bg); }
.feature-popup-actions button.is-destructive:hover { background: var(--c-error-bg); }
/* === Tag-Picker (Feature-Modal, ) ============================ */
.tag-picker {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
border: 1px solid var(--c-border);
border-radius: 8px;
padding: 8px;
background: var(--c-bg-input, var(--c-bg-elev));
min-height: 42px;
}
.tag-picker:focus-within {
border-color: var(--c-accent);
box-shadow: 0 0 0 2px var(--c-accent-soft, rgba(0,120,212,.18));
}
.tag-picker-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag-picker-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 999px;
background: var(--c-accent-soft, rgba(0,120,212,.14));
color: var(--c-accent, currentColor);
font-size: 0.85rem;
line-height: 1.6;
}
.tag-picker-chip-remove {
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
padding: 0;
font-size: 1rem;
line-height: 1;
opacity: 0.7;
}
.tag-picker-chip-remove:hover { opacity: 1; }
.tag-picker-input {
border: 0;
outline: 0;
background: transparent;
color: inherit;
width: 100%;
min-height: 24px;
font: inherit;
}
/* === Tag-Picker (continued) ========================================== */
.tag-picker-suggestions {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
margin: 0;
padding: 4px 0;
list-style: none;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,.18);
max-height: 220px;
overflow-y: auto;
z-index: 30;
}
.tag-picker-suggestion {
padding: 6px 10px;
cursor: pointer;
font-size: 0.9rem;
}
.tag-picker-suggestion:hover,
.tag-picker-suggestion.is-active {
background: var(--input-bg);
color: var(--fg);
}
.tag-picker-suggestion .hint {
opacity: 0.6;
font-style: italic;
margin-left: 6px;
}
/* === Trash-Modal-Tabelle ================================= */
.trash-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.trash-table th,
.trash-table td {
text-align: left;
padding: 6px 10px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.trash-table th {
background: var(--input-bg);
color: var(--muted-hi);
font-weight: 600;
}
.trash-table tbody tr:hover td {
background: var(--input-bg);
}
.trash-table .popup-tag {
display: inline-block;
padding: 1px 6px;
border-radius: 999px;
background: var(--input-bg);
font-size: 0.78rem;
color: var(--muted-hi);
margin-right: 4px;
}
/* polish runde 4: kleiner Farbpunkt vor dem Layer-Namen im
Layer-Trash-Tab. */
.trash-table .layer-color-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
border: 1px solid var(--border);
}
/* "Layerliste leeren"-Dialog mit Tabelle und Per-Layer-Auswahl. Wird
nur gezeigt wenn es editierte Layer oder Drafts mit Inhalten gibt. */
.clear-layers-card {
display: flex;
flex-direction: column;
}
.clear-layers-body {
padding: 14px 18px 6px;
overflow: auto;
}
.clear-layers-intro {
margin: 0 0 12px 0;
font-size: 0.94em;
line-height: 1.5;
color: var(--fg);
}
.clear-layers-table-wrap {
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.clear-layers-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.93em;
}
.clear-layers-table thead th {
background: var(--input-bg);
color: var(--muted-hi);
font-weight: 600;
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.clear-layers-table .clear-th-color { width: 22px; padding-right: 0; }
.clear-layers-table .clear-th-name { width: auto; }
.clear-layers-table .clear-th-cb { width: 110px; text-align: center; }
.clear-layers-table tbody tr + tr td {
border-top: 1px solid var(--border);
}
.clear-layers-table tbody td {
padding: 8px 10px;
vertical-align: middle;
}
.clear-layers-table .clear-cell-color { padding-right: 0; }
.clear-layers-table .clear-cell-color .layer-color-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid var(--border);
vertical-align: middle;
}
.clear-layers-table .clear-cell-name-line {
font-weight: 600;
color: var(--fg);
line-height: 1.3;
}
.clear-layers-table .clear-cell-name-meta {
margin-top: 2px;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85em;
}
.clear-layers-table .clear-cell-feat {
color: var(--muted-hi);
}
.clear-layers-table .clear-cell-cb {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 100%;
height: 100%;
padding: 4px 0;
}
.clear-layers-table .clear-cell-cb input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent, #06829c);
cursor: pointer;
margin: 0;
}
.clear-layers-table th.clear-th-cb,
.clear-layers-table td:nth-child(3),
.clear-layers-table td:nth-child(4) {
text-align: center;
}
.clear-layers-table .clear-cell-disabled {
color: var(--muted);
text-align: center;
user-select: none;
}
.clear-layers-table .layer-badge.badge--dirty {
background: var(--c-amber, #d28b22);
color: #fff;
padding: 1px 8px;
border-radius: 999px;
font-size: 0.75em;
font-weight: 600;
line-height: 1.4;
}
.clear-layers-table .layer-badge.badge--draft {
background: var(--input-bg);
color: var(--muted-hi);
padding: 1px 8px;
border-radius: 999px;
font-size: 0.75em;
font-weight: 600;
line-height: 1.4;
border: 1px dashed var(--border);
}
.clear-layers-hint {
margin: 10px 2px 0 2px;
font-size: 0.86em;
color: var(--muted-hi);
}
/* Status-Zeile in Modals (info / error). */
.form-info {
margin: 0 0 8px 0;
font-size: 0.85em;
color: var(--muted-hi);
}
.form-info[data-kind="error"] { color: var(--c-error); }
.form-info[hidden] { display: none; }
/* === Topbar =============================================== */
.topbar-spacer {
flex: 1 1 auto;
min-width: 12px;
}
.topbar-right .icon-btn {
width: 36px;
height: 36px;
padding: 0;
}
.topbar-right .icon-btn svg { display: block; }
/* === Admin-Users-Pane ==================================== */
.admin-users-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
}
.admin-users-table select {
background: var(--input-bg);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 6px;
}
.admin-users-row-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.admin-users-row-actions .ghost {
padding: 4px 8px;
font-size: 0.85rem;
}
.admin-users-row-actions .danger {
color: var(--c-error);
border-color: var(--c-error-bg);
}
.admin-kv th {
text-align: left;
font-weight: 500;
color: var(--muted);
width: 160px;
padding: 4px 8px;
}
.admin-kv td {
padding: 4px 8px;
}
/* === Resizable Sidebar Handles =========================== */
.resizable-handle {
position: absolute;
top: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
background: transparent;
z-index: 5;
transition: background 0.15s ease;
}
.resizable-handle--right { right: -3px; }
.resizable-handle--left { left: -3px; }
.resizable-handle:hover,
.resizable-handle:focus-visible {
background: var(--border-hi);
outline: none;
}
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing iframe { pointer-events: none; }
/* Mobile-E-Fix : alte 720px-Schwelle (Hide-Handle) auf 540px
* verschoben. So bleibt im Tablet-Range (541-1024px) der Handle aktiv;
* nur echte Smartphones haben kein Resize. Die spezifische Tablet-
* Touch-Anpassung liegt im 541-1024px-Block weiter unten. */
@media (max-width: 540px) {
.resizable-handle { display: none; }
}
/* === Help-Modal =========================================== */
.help-modal-card {
height: calc(100vh - 96px);
max-height: 720px;
}
.help-shell {
flex: 1 1 auto;
display: flex;
gap: 16px;
margin: 8px -8px 0 -8px;
padding: 0 8px 8px 8px;
min-height: 0;
}
.help-toc {
flex: 0 0 200px;
display: flex;
flex-direction: column;
gap: 4px;
overflow-y: auto;
padding-right: 8px;
border-right: 1px solid var(--border);
}
.help-toc-item {
text-align: left;
border: 0;
background: transparent;
color: var(--muted-hi);
padding: 8px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
font: inherit;
}
.help-toc-item:hover {
background: var(--bg-card);
}
.help-toc-item.is-active {
background: var(--bg-card);
color: var(--fg);
font-weight: 500;
}
.help-content {
flex: 1 1 auto;
overflow-y: auto;
padding-right: 8px;
}
/* Liste→Detail-Pattern auf Mobile (max-width: 768px).
Standardmaessig sieht man die Kapitel-Liste, ein Klick auf ein
Kapitel zeigt den Inhalt + "Zurueck"-Button. Auf Desktop bleibt
das gewohnte Side-by-Side-Layout. */
.help-back-btn {
display: none;
align-items: center;
gap: 6px;
margin: 0 0 8px;
background: var(--bg-elevated, rgba(0,0,0,0.04));
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 6px 10px;
cursor: pointer;
font: inherit;
color: var(--fg);
}
.help-back-btn:hover { background: var(--bg-card); }
@media (max-width: 768px) {
.help-shell {
gap: 0;
margin: 8px 0 0;
padding: 0;
position: relative; /* Anker fuer absolut positionierten back-btn */
}
.help-toc {
flex: 1 1 auto;
border-right: 0;
padding-right: 0;
}
.help-content {
flex: 1 1 auto;
padding: 0;
position: relative;
}
/* Mobile-UI-Refresh : Kapitel-Liste-Items grosser + mehr
* Touch-Padding . */
.help-toc-item {
font-size: 1.05em !important;
padding: 14px 16px !important;
min-height: 40px;
}
/* Liste→Detail-Toggle ueber .help-shell.is-detail-mode. */
.help-shell:not(.is-detail-mode) .help-content {
display: none;
}
.help-shell.is-detail-mode .help-toc {
display: none;
}
.help-shell.is-detail-mode .help-back-btn {
/* Mobile-UI-Refresh : Zurueck-Btn im Detail-View jetzt
* OBEN RECHTS als kompakter Pfeil-Icon-Button ,
* statt Block-Element links oben. */
display: inline-flex !important;
position: absolute;
top: 4px;
right: 4px;
z-index: 5;
width: 40px;
height: 40px;
padding: 0;
margin: 0;
border-radius: 50%;
justify-content: center;
align-items: center;
background: var(--bg-card);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Label-Text im Btn verstecken — nur Pfeil. */
.help-shell.is-detail-mode .help-back-btn > span:nth-child(2) {
display: none;
}
.help-shell.is-detail-mode .help-back-btn > span:nth-child(1) {
font-size: 1.5em;
line-height: 1;
}
/* Detail-Content braucht Top-Padding damit der Back-Btn ueber dem
* Chapter-Titel nicht ueberlagert. */
.help-shell.is-detail-mode .help-content {
padding-top: 8px;
}
.help-shell.is-detail-mode .help-content .help-chapter-title {
padding-right: 48px; /* Platz fuer Back-Btn rechts */
}
/* Mobile-EE-Fix Bug+Feedback-Btn jetzt
* AUCH im Detail-Mode sichtbar (frueher Mobile-UI-Refresh ausgeblendet).
* JP-Begruendung: User soll waehrend des Lesens einer Anleitung
* direkt Feedback geben koennen, ohne erst zur Liste zurueck.
* Alte display:none-Regel auskommentiert / entfernt. */
}
/* Mobile-H-Fix : Help-Modal auf Smartphone/Tablet bulletproof
* machen. JP-Beschwerde: TOC nicht scrollbar, Footer/Header nicht ueber
* volle Breite, transparenter Footer (Text vom Listen-Item "halte"
* bleed-through). Loesung:
* 1. .help-modal-card auf padding:0 + overflow:hidden setzen, damit
* Header/Footer von alleine edge-to-edge sitzen und nichts ausser
* dem Scroll-Container scrollt.
* 2. Header- und Footer-Negativ-Margins zurueck auf 0 setzen (sonst
* wuerden sie BEI padding:0 ausserhalb der Card landen).
* 3. Header + Footer mit explizitem opaken --bg-elevated als
* Hintergrund (gilt in Light UND Dark, weil --bg-elevated im
* Gegensatz zu --bg-card nie semi-transparent ist).
* 4. .help-shell als alleinigen flex-Grow-Container im Card-Body mit
* overflow:hidden, damit die inneren .help-toc / .help-content
* sauber scrollen koennen (sonst rutschen sie unter den Footer
* raus, wenn min-height: 0 in der Flex-Chain nicht durchgereicht
* wird).
* 5. .help-toc + .help-content bekommen explizit overflow-y:auto +
* -webkit-overflow-scrolling:touch + min-height:0, damit iOS-
* Safari sie auch wirklich scrollt. */
@media (max-width: 768px) {
.help-modal-card {
padding: 0 !important;
overflow: hidden !important;
height: 100dvh !important;
max-height: 100dvh !important;
}
.help-modal-card > .modal-header {
margin: 0 !important;
padding: 12px 16px !important;
background: var(--bg-elevated) !important;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
position: relative;
z-index: 2;
}
.help-modal-card > .help-shell {
margin: 0 !important;
padding: 0 !important;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column;
}
.help-modal-card > .help-shell .help-toc,
.help-modal-card > .help-shell .help-content {
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
min-height: 0 !important;
max-height: 100%;
padding: 8px 12px !important;
border-right: 0 !important;
}
/* Mobile-H2-Fix : Kapitel-Items strikt untereinander.
* Verhindert, dass ein alterer 720px-Row-Wrap-Regel oder ein
* Default-Flex-Row die TOC-Items horizontal nebeneinander zieht. */
.help-modal-card > .help-shell .help-toc {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch;
gap: 4px;
}
.help-modal-card > .help-shell .help-toc > .help-toc-item,
.help-modal-card > .help-shell .help-toc > button[data-chapter] {
width: 100% !important;
flex: 0 0 auto !important;
display: block !important;
}
/* Mobile-H3-Fix : Detail-Mode Toggle wiederherstellen.
* Mein vorheriges `display: flex !important` auf .help-toc hat das
* `display: none` aus `.help-shell.is-detail-mode .help-toc`
* komplett ueberschrieben — Klick auf Kapitel hat die TOC sichtbar
* gelassen und der Detail-View kam nicht hoch. Hier explizit
* gewinnen lassen. */
.help-modal-card > .help-shell:not(.is-detail-mode) .help-content {
display: none !important;
}
.help-modal-card > .help-shell.is-detail-mode .help-toc {
display: none !important;
}
.help-modal-card > .help-shell.is-detail-mode .help-content {
display: block !important;
flex: 1 1 auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
min-height: 0 !important;
max-height: 100%;
padding: 8px 12px !important;
position: relative;
}
/* Mobile-V-Fix : Den alten inline-Back-Btn (.help-back-btn
* im content, war absolute oben rechts) auf Smartphone NICHT mehr
* zeigen — wir nutzen den neuen .modal-back-btn im Header. Auch den
* .help-chapter-title (doppelte Headline im Body) im Detail-Mode
* auf Mobile ausblenden, weil der Kapitel-Name jetzt schon im
* modal-title oben steht. */
.help-modal-card .help-shell.is-detail-mode .help-back-btn {
display: none !important;
}
.help-modal-card .help-shell.is-detail-mode .help-content .help-chapter-title {
display: none !important;
}
/* Mobile-H3-Fix: Scrollbar im Help-Modal deutlich tuerkis (CI-Cyan
* #3BBDE8 = --c-cyan), damit JP auf dem Smartphone sofort sieht,
* dass es noch was zu scrollen gibt. */
.help-modal-card .help-toc,
.help-modal-card .help-content {
scrollbar-color: var(--c-cyan, #3BBDE8) transparent;
scrollbar-width: thin;
}
.help-modal-card .help-toc::-webkit-scrollbar,
.help-modal-card .help-content::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.help-modal-card .help-toc::-webkit-scrollbar-track,
.help-modal-card .help-content::-webkit-scrollbar-track {
background: transparent;
}
.help-modal-card .help-toc::-webkit-scrollbar-thumb,
.help-modal-card .help-content::-webkit-scrollbar-thumb {
background: var(--c-cyan, #3BBDE8);
border-radius: 5px;
border: 2px solid var(--bg-elevated);
}
.help-modal-card .help-toc::-webkit-scrollbar-thumb:hover,
.help-modal-card .help-content::-webkit-scrollbar-thumb:hover {
background: #2aa6cf;
}
.help-modal-card > .help-modal-footer,
.help-modal-card > .modal-footer.help-modal-footer {
margin: 0 !important;
padding: 10px 12px !important;
background: var(--bg-elevated) !important;
border-top: 1px solid var(--border);
flex-shrink: 0;
position: relative;
z-index: 2;
width: 100%;
}
}
.help-content h4 {
margin-top: 22px;
margin-bottom: 8px;
font-size: 1.05em;
}
.help-content h4:first-child {
margin-top: 0;
}
.help-content ul {
margin: 8px 0 16px 0;
padding-left: 20px;
}
.help-content li {
margin-bottom: 6px;
line-height: 1.5;
}
.help-content p {
margin: 0 0 14px 0;
line-height: 1.55;
}
.help-content code {
background: var(--input-bg);
padding: 1px 6px;
border-radius: 3px;
font-size: 0.92em;
}
/* Inline button styled as link — fuer "Vollen Lizenztext anzeigen" o.ae.
Sieht aus wie ein
, oeffnet aber ein Popup-Modal statt einer
Plain-Text-Seite in einem neuen Tab. */
.link-like {
background: none;
border: 0;
padding: 0;
margin: 0;
color: var(--accent, #06829c);
text-decoration: underline;
cursor: pointer;
font: inherit;
display: inline;
}
.link-like:hover,
.link-like:focus-visible {
color: var(--accent-hover, #08a0c0);
text-decoration: underline;
outline: none;
}
/* Polished permissions table — used in the "roles" chapter of the
in-app help. Sticky header, alternating rows, soft borders, and
highlighted "alle / nur eigene" cells via column-keyword styling. */
.help-content .perm-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 12px 0 18px;
font-size: 0.93em;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.help-content .perm-table thead th {
background: var(--input-bg);
color: var(--muted-hi);
text-align: left;
padding: 8px 10px;
font-weight: 600;
border-bottom: 1px solid var(--border);
}
.help-content .perm-table thead th:not(:first-child) {
text-align: center;
font-size: 0.92em;
}
.help-content .perm-table tbody td {
padding: 7px 10px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.help-content .perm-table tbody tr:last-child td {
border-bottom: none;
}
.help-content .perm-table tbody tr:nth-child(even) td {
background: rgba(0, 0, 0, 0.025);
}
[data-theme="dark"] .help-content .perm-table tbody tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.025);
}
.help-content .perm-table tbody td:not(:first-child) {
text-align: center;
color: var(--muted-hi);
}
.help-content .perm-yes {
color: #4CAF50;
font-weight: 600;
}
.help-content .perm-no {
color: var(--muted, #888);
}
.help-content .perm-partial {
color: #d99a3a;
font-style: italic;
}
/* Mobile-H2-Fix : Frueher waren die Kapitel im Help-TOC
* auf ≤720px als horizontale Chip-Reihe (flex-direction: row + wrap)
* dargestellt — JP will sie aber rein vertikal untereinander, damit
* man nur vertikal scrollt. row → column. */
@media (max-width: 720px) {
.help-shell {
flex-direction: column;
}
.help-toc {
flex: 0 0 auto;
flex-direction: column;
flex-wrap: nowrap;
border-right: 0;
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
}
}
/* === Tristate-Filter ===================================== */
.features-panel-popover-row {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 6px;
}
.features-panel-popover-label {
flex: 1 1 auto;
font-size: 0.9em;
overflow: hidden;
text-overflow: ellipsis;
}
.features-panel-tristate {
display: inline-flex;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
flex: 0 0 auto;
}
.features-panel-tristate-btn {
border: 0;
background: transparent;
color: var(--muted-hi);
padding: 2px 8px;
font: inherit;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
min-width: 24px;
border-right: 1px solid var(--border);
}
.features-panel-tristate-btn:last-child { border-right: 0; }
.features-panel-tristate-btn:hover { background: var(--bg-card); }
.features-panel-tristate-btn.is-active {
background: var(--c-primary);
color: var(--c-light);
}
.features-panel-tristate-btn.is-active[data-state="not"] {
background: var(--c-error);
}
/* === Resizable-Grip ===================================== */
.resizable-handle {
display: flex;
align-items: center;
justify-content: center;
}
.resizable-grip {
display: flex;
flex-direction: column;
gap: 3px;
opacity: 0.35; /* permanent dezent sichtbar */
transition: opacity 0.2s ease;
}
.resizable-handle:hover .resizable-grip,
.resizable-handle:focus-visible .resizable-grip {
opacity: 0.85;
}
.resizable-grip span {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--fg);
}
/* === Layer-Tree ========================================= */
.layer-expand {
border: 0;
background: transparent;
color: var(--muted-hi);
cursor: pointer;
padding: 4px;
line-height: 0;
flex: 0 0 24px;
border-radius: var(--radius-sm);
transition: background .12s ease, color .12s ease;
}
.layer-expand:hover {
color: var(--fg);
background: var(--bg-card);
}
/* === Feature-Bilder ====================================== */
.image-slots {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.image-slot {
position: relative;
aspect-ratio: 1 / 1;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
background: var(--input-bg);
cursor: pointer;
overflow: hidden;
color: var(--muted-hi);
display: flex; align-items: center; justify-content: center;
font-size: 1.4em;
}
.image-slot:hover { background: var(--bg-card); border-color: var(--border-hi); }
.image-slot.is-filled { cursor: default; border-style: solid; }
/* Bild ist zur Loeschung markiert (wird beim Save geloescht).
Visuell: roter Border + halb-transparent + diagonale Streifen-Overlay. */
.image-slot.is-pending-delete {
border-color: var(--c-danger, #c44) !important;
border-style: solid;
box-shadow: inset 0 0 0 2px rgba(196, 68, 68, 0.45);
}
.image-slot.is-pending-delete img {
opacity: 0.45;
filter: grayscale(0.6);
}
.image-slot.is-pending-delete::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
45deg,
transparent 0 8px,
rgba(196, 68, 68, 0.18) 8px 14px
);
}
.image-slot.is-pending-delete .image-slot-remove {
background: var(--c-amber, #c98a00);
color: #fff;
font-size: 1.05em;
}
.image-slot img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.image-slot-remove {
position: absolute;
top: 2px; right: 2px;
width: 22px; height: 22px;
border-radius: 999px;
border: 0;
background: rgba(0,0,0,0.55);
color: white;
cursor: pointer;
line-height: 1;
font-size: 0.85em;
padding: 0;
}
/* Popup: Thumbnail-Reihe unter description */
.feature-popup-images {
display: flex; gap: 4px; flex-wrap: wrap;
margin-top: 8px;
}
.feature-popup-images img {
width: 48px; height: 48px;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--border);
}
/* Lightbox */
/* !important + id-Spezifitaet, weil eine generische Mobile-Regel
* `@media (max-width:1024px) .modal { background: transparent !important }`
* sonst den dunklen Backdrop der Lightbox entfernt (greift in Hoch- UND
* Querformat auf Tablet/Smartphone). -webkit-Prefix fuer iOS-Safari. */
#image-lightbox.modal {
background: rgba(0, 0, 0, 0.88) !important;
-webkit-backdrop-filter: blur(5px) !important;
backdrop-filter: blur(5px) !important;
/* Generische Mobile-Regeln setzen `.modal { align-items: stretch }`
* (fuer Vollbild-modal-cards). Das wuerde die Lightbox-Card auf volle
* Hoehe ziehen und die Buttons an den Screen-Rand statt an die
* Bildecken schieben. Daher hier zentrieren erzwingen. */
align-items: center !important;
justify-content: center !important;
}
.lightbox-card {
position: relative;
max-width: 95vw;
/* dvh statt vh: auf Mobile (Portrait) ist die mobile Browser-URL-
* Leiste in `vh` NICHT eingerechnet — ein 95vh-hohes Bild wurde
* dadurch hoeher als der sichtbar nutzbare Bereich und zentrierte
* sich teilweise HINTER die URL-Leiste/Notch. Die absolut
* positionierten Buttons (top:8px) wanderten so aus dem sichtbaren
* Viewport. `dvh` rechnet die dynamische Browser-Chrome ein. */
max-height: 95dvh;
display: flex; align-items: center; justify-content: center;
}
.lightbox-card img {
max-width: 95vw;
max-height: 95dvh;
object-fit: contain;
border-radius: var(--radius-sm);
box-shadow: 0 20px 80px rgba(0,0,0,0.7);
}
.lightbox-close {
position: absolute;
top: 8px;
right: 8px;
z-index: 10;
}
/* Schliessen-Button: in BEIDEN Themes dunkelroter Hintergrund mit
* weissem X; beim Hover leuchtet er hellrot auf. Frueher hat die
* globale .modal-close-btn-!important-Regel den Button im Hellmodus
* hellrosa und im Darkmodus quasi transparent gemacht (rotes X ueber
* dunklem Bild = unsichtbar). Der #image-lightbox-Scope (Spezifitaet
* 1,1,0 bzw. mit [data-theme] 1,2,0) gewinnt gegen die globalen
* .modal-close-btn-Regeln und deren Theme-Varianten. */
#image-lightbox .lightbox-close,
[data-theme="light"] #image-lightbox .lightbox-close,
[data-theme="dark"] #image-lightbox .lightbox-close {
background: #8a1414 !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
#image-lightbox .lightbox-close:hover,
[data-theme="light"] #image-lightbox .lightbox-close:hover,
[data-theme="dark"] #image-lightbox .lightbox-close:hover {
background: #e23b2e !important;
border-color: #ff8088 !important;
color: #fff !important;
box-shadow: 0 0 14px rgba(226, 59, 46, 0.8) !important;
}
/* a: Inhalt-melden-Button im Lightbox - links oben, dezent rot. */
.lightbox-report {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.55);
color: white;
border: 1px solid rgba(255, 92, 101, 0.7);
border-radius: var(--radius-sm, 6px);
padding: 6px 12px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85em;
cursor: pointer;
z-index: 10;
}
.lightbox-report:hover {
background: var(--c-error, #ff5c65);
border-color: var(--c-error, #ff5c65);
}
.lightbox-report svg { display: block; }
/* a-Hotfix2: Visueller Lock-State, wenn das Bild bereits gemeldet
* ist. Der Button bleibt sichtbar, aber gruengrau und nicht klickbar. */
.lightbox-report.is-reported,
.lightbox-report.is-reported:hover {
background: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.7);
cursor: default;
}
.lightbox-report.is-sending,
.lightbox-report.is-sending:hover {
background: rgba(0, 0, 0, 0.55);
border-color: rgba(255, 255, 255, 0.3);
cursor: wait;
}
/* Mobile (Portrait): Bug-Fix — Schliessen- + Melden-Button waren bei
* hochkant gehaltenem Smartphone nicht sichtbar (das vollstaendige
* Bild aber schon). Ursache: das Bild wurde 95vh hoch zentriert und
* lag mit seinem oberen Rand teils hinter Notch/URL-Leiste; die
* Buttons sassen dadurch ausserhalb des sichtbaren Viewports. Fix:
* die Card nimmt die volle sichere Hoehe ein, das Bild bekommt oben
* einen reservierten Streifen (Safe-Area + Button-Hoehe), und die
* Buttons werden mit env(safe-area-inset-*) nach innen versetzt. So
* liegen sie garantiert im sichtbaren Bereich, ueber dem Bild. */
/* Mobile (Portrait): Die Card umschliesst weiterhin nur das Bild und
* wird im (dunklen) Backdrop zentriert — so sitzen Schliessen- und
* Melden-Button an den oberen BILD-Ecken (nicht am Screen-Rand). Das
* Bild wird etwas niedriger gehalten (88dvh) und die Buttons bekommen
* eine Safe-Area-Reserve, damit sie auf Notch-Geraeten frei liegen. */
@media (max-width: 768px) {
.lightbox-card {
max-width: 96vw;
max-height: 88dvh;
}
.lightbox-card img {
max-width: 96vw;
max-height: 88dvh;
}
.lightbox-close {
top: calc(6px + env(safe-area-inset-top, 0px));
right: 6px;
}
.lightbox-report {
top: calc(6px + env(safe-area-inset-top, 0px));
left: 6px;
}
}
/* === Polish ============================================== */
/* Login: Submit-Button mehr Abstand zum Passwort-Feld */
.login-actions {
margin-top: 18px;
display: flex;
justify-content: stretch;
}
.login-actions .primary { width: 100%; padding: 12px 18px; }
/* Map-Error: fester Hintergrund (war transparent durch backdrop-blur) */
.map-error {
background: var(--bg-elevated) !important;
color: var(--c-error);
border: 1px solid var(--c-error);
padding: 8px 14px;
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
/* Features-Panel: Header-Buttons gleich gross + collapse links statt rechts */
.features-panel-head {
display: flex;
align-items: center;
gap: 6px;
}
.features-panel-collapse,
.features-panel-fullscreen,
.features-panel-rail-toggle,
.features-panel-rail-db {
width: 32px;
height: 32px;
padding: 0;
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted-hi);
cursor: pointer;
}
.features-panel-collapse:hover,
.features-panel-fullscreen:hover,
.features-panel-rail-toggle:hover,
.features-panel-rail-db:hover {
background: var(--bg-card);
color: var(--fg);
}
/* collapse links vom Title platzieren (per order) */
.features-panel-head .features-panel-collapse { order: -1; }
.features-panel-head .features-panel-title { flex: 1 1 auto; }
/* Filter-Bar mehr Abstand zum Rand */
.features-panel-filters {
padding: 0 12px 8px 12px;
}
/* Resize-Grip: ein paar Pixel weiter weg vom Rand */
.resizable-handle--right { right: -5px; }
.resizable-handle--left { left: -5px; }
/* Datenbank-List-Item: Layout fix - Punkt + Vollname + Tags inline */
.features-panel-item {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 8px;
padding: 6px 12px;
cursor: pointer;
border-bottom: 1px solid var(--border);
}
.features-panel-item:hover { background: var(--bg-card); }
.features-panel-item.is-active { background: var(--bg-card); border-left: 2px solid var(--c-primary-hi); }
.features-panel-checkbox { margin: 0; }
.features-panel-dot {
width: 12px; height: 12px;
border-radius: 50%;
flex: 0 0 auto;
}
.features-panel-item-body {
min-width: 0;
}
.features-panel-name {
font-size: 0.95em;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Layer/@-Zeile bleibt in der DOM aber ist optional sichtbar - JP wollte sie weg */
.features-panel-item .features-panel-meta { display: none; }
/* Tags im DB-Sidepanel sind strikt einzeilig. Was nicht
reinpasst, wandert in einen +N-Chip (siehe fitTagsOneLine in
features-panel.js). Daher flex-wrap:nowrap + overflow:hidden. */
.features-panel-tags {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
gap: 4px;
margin-top: 2px;
min-width: 0;
max-width: 100%;
}
.features-panel-tag {
font-size: 0.75em;
padding: 1px 6px;
border-radius: 999px;
background: var(--bg-card);
color: var(--muted-hi);
white-space: nowrap;
flex: 0 0 auto;
}
.features-panel-tag[hidden] { display: none !important; }
.features-panel-tag-more {
font-size: 0.75em;
color: var(--muted);
font-style: italic;
flex: 0 0 auto;
white-space: nowrap;
}
/* Layer-Tree: expandierte Sub-Liste nicht ueber den Buttons - Layer-Row als
* grid mit klar getrennten Zeilen (Toggle-Reihe oben, Sub-Liste darunter).
* l: zusaetzliche Spalte ganz links fuer den Drag-Handle. */
.layer-row {
display: grid;
/* zusaetzliche Spalte "presence" zwischen meta
und toggles fuer den Avatar-Stack der Coworker, die diesen Layer
offen haben. Spalte ist "auto" - leer = 0 px breit, mit Inhalt
waechst sie auf Stack-Breite. */
grid-template-columns: auto auto auto 1fr auto auto auto;
/* zusaetzliche Reihe "agg" fuer das Layer-Aggregat
(Σ Flaeche, Σ Volumen ...). Ohne diese Reihe wandert das Aggregat
per Auto-Placement in den ersten freien Slot und schiebt Expand-
Btn + Name aus der ersten Zeile raus. */
/* menu DIREKT unter dem Header-Row, vor
* der features-Liste — sonst muss man bei expanded Layer durch die
* gesamte Feature-Liste scrollen um zum Menu zu kommen. Reihen-
* folge: header → menu → features → agg. */
grid-template-areas:
"drag expand swatch name meta presence toggles"
"menu menu menu menu menu menu menu"
"features features features features features features features"
"agg agg agg agg agg agg agg";
align-items: center;
gap: 4px;
padding: 4px 6px;
position: relative;
}
.layer-row .layer-drag-handle { grid-area: drag; }
.layer-row .layer-expand { grid-area: expand; }
.layer-row .layer-swatch { grid-area: swatch; }
.layer-row .layer-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; background: transparent; border: 0; color: inherit; padding: 0; cursor: pointer; }
.layer-row .layer-meta { grid-area: meta; color: var(--muted); font-size: 0.85em; }
.layer-row .layer-presence-stack { grid-area: presence; }
.layer-row .layer-toggles { grid-area: toggles; display: inline-flex; gap: 2px; }
.layer-row .layer-menu { grid-area: menu; }
.layer-row .layer-features { grid-area: features; margin: 4px 0 6px 28px; }
.layer-row .layer-features-aggregate { grid-area: agg; }
.layer-row .layer-active-users { grid-area: agg; }
/* Avatar-Stack der Coworker, die einen Layer
aktuell geoeffnet haben. Verwendet in der Sidebar (.layer-row) UND
im Lade-Modal (.load-modal-row). Chips ueberlappen um -6px (gestapelt
mit zarter weisser Border, OneNote-Style). Bei mehr als drei aktiven
Coworkern wird ein "+N"-Pille angehaengt. */
.layer-presence-stack {
display: inline-flex;
flex-direction: row;
align-items: center;
padding: 0 2px 0 4px;
margin: 0;
/* Stack-Optik: jeder Chip nach dem ersten haengt -6px in den
vorherigen rein. */
}
.layer-presence-stack:empty { display: none; }
.layer-presence-chip {
width: 22px; height: 22px;
border-width: 2px;
/* OneNote-Stack-Look: kleine weisse Border um den Chip, damit der
Overlap als sauberer Stack lesbar bleibt - auch im Dark-Theme. */
box-shadow: 0 0 0 1.5px var(--bg-card, #fff);
margin-left: -6px;
transition: transform 0.12s ease;
}
.layer-presence-chip:first-child { margin-left: 0; }
.layer-presence-chip:hover {
transform: translateY(-1px) scale(1.06);
z-index: 2;
}
.layer-presence-more {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: -6px;
min-width: 22px; height: 22px;
padding: 0 6px;
border-radius: 11px;
background: var(--bg-elevated, rgba(0, 0, 0, 0.08));
color: var(--muted-hi, #555);
font-size: 10px;
font-weight: 700;
line-height: 1;
border: 1.5px solid var(--bg-card, #fff);
box-shadow: 0 0 0 1px var(--border, rgba(0, 0, 0, 0.12));
cursor: help;
}
[data-theme="dark"] .layer-presence-chip {
box-shadow: 0 0 0 1.5px var(--surface-elevated, #2a2a2a);
}
[data-theme="dark"] .layer-presence-more {
background: var(--surface-elevated, #2a2a2a);
color: #b8c0c8;
border-color: var(--surface-elevated, #2a2a2a);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
/* Mobile: schmalere Chips (analog zur Topbar-Presence-Bar). */
@media (max-width: 768px) {
.layer-presence-chip,
.layer-presence-more {
width: 18px; height: 18px;
min-width: 18px;
font-size: 9px;
}
.layer-presence-chip { margin-left: -5px; }
.layer-presence-more { margin-left: -5px; padding: 0 5px; }
}
/* Sprach-Toggle in der Topbar. Zeigt die Flagge der
* aktuell aktiven Sprache; Klick toggelt. */
.lang-toggle .lang-flag {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.lang-toggle .lang-flag svg {
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
/* o: Service-Worker-Update-Toast. */
.sw-update-toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 1900;
background: var(--bg-elevated);
color: var(--fg);
border: 1px solid var(--border-hi);
border-radius: 999px;
padding: 8px 8px 8px 18px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
gap: 10px;
animation: sw-update-toast-in .25s ease-out;
}
.sw-update-toast.is-leaving {
animation: sw-update-toast-out .22s ease-in forwards;
}
@keyframes sw-update-toast-in {
from { opacity: 0; transform: translate(-50%, 12px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes sw-update-toast-out {
from { opacity: 1; transform: translate(-50%, 0); }
to { opacity: 0; transform: translate(-50%, 12px); }
}
.sw-update-toast-text { font-size: 0.95em; }
.sw-update-toast-action {
border: 0;
background: var(--c-primary, #2c8ee0);
color: var(--c-light, #fff);
border-radius: 999px;
padding: 6px 14px;
font-size: 0.92em;
font-weight: 500;
cursor: pointer;
}
.sw-update-toast-action:hover { filter: brightness(1.07); }
.sw-update-toast-close {
border: 0;
background: transparent;
color: var(--muted-hi);
cursor: pointer;
padding: 4px 8px;
font-size: 1.2em;
line-height: 1;
}
.sw-update-toast-close:hover { color: var(--fg); }
/* n: Touch-Marker-Helper. Crosshair wird genau ueber der Karten-
* Mitte fixiert; das Pin-Icon-Anchor des Markers landet dann genau auf
* dem Karten-Center, das via map.getCenter abgeholt wird. */
.touch-marker-helper {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 650; /* ueber den Tiles, unter Modals (2000). */
}
.touch-marker-crosshair {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: var(--c-error, #d8493b);
pointer-events: none;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.touch-marker-place-btn {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
padding: 12px 22px;
border: 1px solid var(--c-error, #d8493b);
background: var(--c-error, #d8493b);
color: var(--c-light, #fff);
border-radius: 999px;
font-size: 1em;
font-weight: 500;
cursor: pointer;
pointer-events: auto;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
-webkit-tap-highlight-color: transparent;
}
.touch-marker-place-btn:active { transform: translateX(-50%) scale(0.97); }
/* l: Drag-Handle + Drop-Indikator. */
.layer-drag-handle {
background: transparent;
border: 0;
color: var(--muted);
width: 18px;
height: 22px;
padding: 0;
cursor: grab;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.55;
touch-action: none; /* Pointer-Events sollen NICHT als Scroll gewertet werden. */
}
.layer-row:hover .layer-drag-handle,
.layer-drag-handle:focus-visible { opacity: 1; }
.layer-drag-handle:active { cursor: grabbing; }
.layer-row.is-dragging {
opacity: 0.55;
background: var(--bg-card);
}
.sidebar-list.is-reordering { user-select: none; }
.layer-row.is-drop-before::before,
.layer-row.is-drop-after::after {
content: "";
position: absolute;
left: 6px;
right: 6px;
height: 2px;
background: var(--c-primary, #2c8ee0);
border-radius: 2px;
pointer-events: none;
}
.layer-row.is-drop-before::before { top: -1px; }
.layer-row.is-drop-after::after { bottom: -1px; }
/* Drag&Drop fuer Features in der Sidebar. Drag-Handle
pro Feature-Item; Drop-Indikatoren in der Feature-Liste; Hervorhebung
des Ziel-Layers wenn ein Feature in einen anderen Layer gezogen wird;
Cursor + Copy-Indikator wenn Strg/Cmd gedrueckt ist. */
.layer-feature-drag-handle {
background: transparent;
border: 0;
color: var(--muted, #888);
cursor: grab;
padding: 2px;
margin-right: 2px;
line-height: 0;
border-radius: var(--radius-sm);
flex: 0 0 auto;
}
.layer-feature-drag-handle:hover { color: var(--fg); background: var(--bg-card); }
.layer-feature.is-feat-dragging {
opacity: 0.55;
cursor: grabbing;
}
.layer-features.is-feat-reordering .layer-feature { transition: transform 0.08s ease; }
.layer-feature.is-drop-before { box-shadow: 0 -2px 0 var(--c-primary, #06829c) inset; }
.layer-feature.is-drop-after { box-shadow: 0 2px 0 var(--c-primary, #06829c) inset; }
.layer-row.is-drop-feature-target {
outline: 2px dashed var(--c-primary, #06829c);
outline-offset: -2px;
background: rgba(0, 204, 255, 0.06);
}
body.is-feat-reordering,
.layer-features.is-feat-reordering.is-feat-copy {
cursor: copy;
}
/* Immortal-Checkbox + Clone-Btn-Zeile im Feature-Modal. */
.feature-modal-immortal-row {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
border-top: 1px dashed var(--border, rgba(0, 0, 0, 0.12));
border-bottom: 1px dashed var(--border, rgba(0, 0, 0, 0.12));
margin: 8px 0;
}
.feature-modal-immortal-label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
color: var(--muted-hi, #555);
font-size: 0.9em;
}
.feature-modal-immortal-label input[type="checkbox"]:checked + span {
color: var(--c-primary, #06829c);
font-weight: 600;
}
#feature-modal-clone-btn {
/* KEIN margin-left:auto mehr — der Btn ist jetzt im
Footer und soll direkt neben dem Cancel-Btn stehen, nicht durch
einen auto-margin nach ganz rechts geschoben. */
display: inline-flex;
gap: 6px;
align-items: center;
width: auto;
height: auto;
}
.layer-features.is-feat-copy::after {
content: "+ Kopieren (Strg/Cmd)";
position: fixed;
bottom: 16px; left: 50%;
transform: translateX(-50%);
background: var(--c-primary, #06829c);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
z-index: 1500;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
/* ---- Confirm-Dialog im App-Design ---- */
.modal-card--sm {
width: min(420px, 92vw);
}
/* Konflikt-Modal — etwas breiter als confirm, damit
die Diff-Tabelle zwei Spalten (lokal / Server) sauber nebeneinander
bekommt. */
.modal-card--md {
width: min(640px, 96vw);
}
.modal--conflict .conflict-card {
padding: 22px 22px 18px;
position: relative;
}
.modal--conflict .conflict-subtitle {
margin-top: 2px;
color: var(--muted-hi, #555);
}
.modal--conflict .conflict-version {
margin: 6px 0 12px;
font-size: 0.85em;
color: var(--muted);
}
.modal--conflict .conflict-diff-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 14px;
font-size: 0.92em;
}
.modal--conflict .conflict-diff-table th,
.modal--conflict .conflict-diff-table td {
text-align: left;
padding: 6px 8px;
border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
vertical-align: top;
word-break: break-word;
}
.modal--conflict .conflict-diff-table thead th {
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted-hi);
background: var(--bg-elevated, rgba(0, 0, 0, 0.04));
}
.modal--conflict .conflict-diff-row.is-same .conflict-diff-local,
.modal--conflict .conflict-diff-row.is-same .conflict-diff-server {
color: var(--muted);
}
.modal--conflict .conflict-diff-local {
background: rgba(255, 200, 80, 0.10);
}
.modal--conflict .conflict-diff-server {
background: rgba(80, 180, 255, 0.10);
}
[data-theme="dark"] .modal--conflict .conflict-diff-local {
background: rgba(255, 200, 80, 0.16);
}
[data-theme="dark"] .modal--conflict .conflict-diff-server {
background: rgba(80, 180, 255, 0.16);
}
.modal--conflict .conflict-diff-null {
color: var(--muted);
font-style: italic;
}
.modal--conflict .conflict-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
.modal--conflict .conflict-actions .conflict-btn-cancel {
margin-right: auto;
}
@media (max-width: 540px) {
.modal--conflict .conflict-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.modal--conflict .conflict-actions .conflict-btn-cancel {
margin-right: 0;
}
}
.confirm-card {
padding: 22px 24px 18px;
}
.confirm-card .modal-title {
font-size: 1.08em;
margin-bottom: 0;
}
/* Modal-Header in .confirm-card: kein doppeltes Margin (.modal-header
pullt sich schon -22px hoch, das reicht). */
.confirm-card .modal-header {
margin-bottom: 14px;
}
.confirm-card .confirm-message {
color: var(--muted-hi);
margin: 0 0 18px 0;
line-height: 1.45;
white-space: pre-wrap;
}
.confirm-card .modal-actions {
margin-top: 0;
}
/* c-rev: optionale Bestaetigungs-Checkbox im Confirm-Dialog. */
.confirm-checkbox {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 14px 0;
color: var(--fg);
font-size: 0.92em;
line-height: 1.4;
cursor: pointer;
}
.confirm-checkbox input[type="checkbox"] {
margin-top: 3px;
accent-color: var(--c-error, #d8493b);
flex-shrink: 0;
}
/* Danger-Variante (rot) fuer destruktive Bestaetigungen.
* Greift auf .primary, damit die Hover/Disabled-Logik bestehen bleibt. */
.primary.danger {
background: var(--c-error);
border-color: var(--c-error);
color: var(--c-light);
}
.primary.danger:hover {
background: var(--c-error-bg, var(--c-error));
filter: brightness(1.1);
}
.primary.danger:disabled {
background: var(--c-error);
opacity: 0.6;
}
/* ---- DB-Modal-Filter-Bar ---- */
/* kein eigener background mehr — die Filter-Bar liegt
bewusst transparent ueber dem Modal-Hintergrund. Padding links/rechts
raus, damit das Such-Input direkt an die Modal-Card-Innenkante schliesst
(= buendig mit der Tabelle darunter). */
.db-filter-bar {
position: relative;
padding: 8px 0;
border-bottom: 1px solid var(--border);
background: transparent;
}
.db-filter-row {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.db-filter-search {
flex: 1 1 220px;
background: var(--input-bg);
color: var(--fg);
border: 1px solid var(--border);
padding: 6px 10px;
border-radius: var(--radius-sm);
font: inherit;
}
.db-filter-search:focus {
outline: none; border-color: var(--border-hi);
box-shadow: 0 0 0 3px rgba(0, 127, 180, 0.18);
}
.db-filter-popover {
position: absolute;
top: calc(100% - 4px);
left: 16px;
right: 16px;
z-index: 50;
max-height: 360px;
overflow: auto;
}
/* ---- Features-Panel Item-Actions + Popover-Suche ---- */
.features-panel-item-actions {
display: inline-flex;
gap: 2px;
align-self: start;
}
.features-panel-item-edit, .features-panel-item-delete {
padding: 4px;
line-height: 0;
border-radius: var(--radius-sm);
border: 1px solid transparent;
background: transparent;
color: var(--muted-hi);
cursor: pointer;
}
.features-panel-item-edit:hover, .features-panel-item-delete:hover {
background: var(--bg-card);
color: var(--fg);
border-color: var(--border);
}
.features-panel-item-delete:hover { color: var(--c-error); }
.features-panel-popover-search {
width: 100%;
box-sizing: border-box;
background: var(--input-bg);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 6px 10px;
margin-bottom: 8px;
font: inherit;
}
.features-panel-popover-search:focus {
outline: none; border-color: var(--border-hi);
box-shadow: 0 0 0 3px rgba(0, 127, 180, 0.18);
}
/* DB-Item-Layout (erweitert): Actions am Ende der Zeile */
.features-panel-item {
grid-template-columns: auto auto 1fr auto;
}
/* ---- + 67: Map-Status-Leiste (Cursor-Coords + GPS-Genauigkeit)
* oben mittig statt unten (unten ist jetzt die Attribution). */
.map-status {
position: absolute;
left: 50%;
top: 8px;
transform: translateX(-50%);
z-index: 600;
display: flex;
gap: 12px;
align-items: center;
padding: 4px 10px;
background: var(--bg-elevated, var(--bg-card));
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--muted-hi);
font-size: 0.8em;
font-variant-numeric: tabular-nums;
pointer-events: none;
opacity: 0.9;
box-shadow: var(--shadow-card);
}
.map-status-coords:empty { display: none; }
.map-status-accuracy { color: var(--c-primary-hi); }
/* ============================================================
— UI-Polish-Batch
============================================================ */
/* ---- Modal-Kontrast: Header + Footer haben anderen Hintergrund als Body */
.modal-header {
background: var(--bg-card);
}
.modal-footer {
background: var(--bg-card);
align-items: center;
}
[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer {
background: var(--bg);
}
/* Modal-Footer: Auswaehl-Counter rechtsbuendig + vertikal zentriert */
.modal-footer [data-role="sel-count"] {
margin-left: auto;
margin-right: 4px;
align-self: center;
font-size: 0.85em;
color: var(--muted-hi);
}
.modal-footer [data-role="row-count"] {
align-self: center;
font-size: 0.85em;
color: var(--muted);
}
/* Modal-Buttons: Default zentriert; Footer-Buttons rechts mit Trenner */
.modal-actions { justify-content: center; }
.modal-actions--stack { align-items: stretch; }
.modal-card .modal-form > .modal-actions {
/* Submit-Form-Buttons bleiben zentriert (Standard von ) */
}
/* Buttons im Modal-Footer/Actions: kleine Bg-Differenzierung (ghost
* sichtbarer auf dem hellen Footer-Hintergrund) */
.modal-footer .ghost {
background: var(--bg-elevated);
}
.modal-footer .ghost:hover {
background: var(--bg-card);
}
/* ---- Active-Layer Toggle: GRUEN (signal) statt blau ---- */
.layer-row .layer-toggle[data-action="toggle-active"].is-on {
color: var(--c-signal-dk);
background: var(--c-signal-dim);
border-color: var(--c-signal-dk);
}
[data-theme="light"] .layer-row .layer-toggle[data-action="toggle-active"].is-on {
color: #007a3a;
background: rgba(2, 254, 137, 0.18);
border-color: #007a3a;
}
.layer-row.layer-row--active {
background: rgba(2, 254, 137, 0.06);
}
/* ---- Empty-Trash Button HERVORGEHOBEN rot/pink ---- */
[data-action="empty-trash"] {
background: var(--c-error) !important;
color: var(--c-light) !important;
border-color: var(--c-error) !important;
font-weight: 500;
}
[data-action="empty-trash"]:hover {
filter: brightness(1.12);
}
/* ---- DB Bulk-Delete Button rot wenn aktiv ---- */
[data-action="bulk-delete"]:not(:disabled) {
background: var(--c-error) !important;
color: var(--c-light) !important;
border-color: var(--c-error) !important;
}
[data-action="bulk-delete"]:not(:disabled):hover {
filter: brightness(1.12);
}
/* ---- Resize-Indikator: doppelte Linie, dezent permanent sichtbar ---- */
.resizable-handle--right { right: -6px; }
.resizable-handle--left { left: -6px; }
.resizable-handle::before,
.resizable-handle::after {
content: "";
position: absolute;
top: 35%; bottom: 35%;
width: 2px;
border-radius: 1px;
background: var(--border-hi);
opacity: 0.55;
transition: opacity .12s ease;
}
.resizable-handle::before { left: 50%; transform: translateX(-3px); }
.resizable-handle::after { left: 50%; transform: translateX(1px); }
.resizable-handle:hover::before,
.resizable-handle:hover::after,
.resizable-handle:focus-visible::before,
.resizable-handle:focus-visible::after {
opacity: 1;
background: var(--c-primary-hi);
}
/* ---- Image-Slot-Remove: roter Kreis, oben rechts, mittig ---- */
.image-slot-remove {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
padding: 0;
border-radius: 50%;
background: var(--c-error);
color: var(--c-light);
border: 1px solid var(--c-error);
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.image-slot-remove:hover { filter: brightness(1.1); }
/* ---- Login-Form: mehr Abstand zwischen Eingabefeldern ---- */
.login-form { gap: 14px; }
.login-form .field + .field { margin-top: 4px; }
/* ---- Features-Panel: Action-Bar nach unten, kleiner ---- */
.features-panel-body {
display: flex;
flex-direction: column;
min-height: 0;
}
.features-panel-list {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
.features-panel-actionbar {
order: 99;
position: sticky;
bottom: 0;
flex: 0 0 auto;
background: var(--bg-panel);
border-top: 1px solid var(--border);
padding: 6px 10px;
margin: 0 -10px -8px -10px;
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
font-size: 0.85em;
z-index: 5;
}
.features-panel-actionbar [data-role="action-count"] {
font-size: 0.85em;
color: var(--muted-hi);
}
.features-panel-actionbar .primary,
.features-panel-actionbar .ghost {
padding: 4px 10px;
font-size: 0.85em;
}
/* ---- Bug/Feedback Btn ---
Vorher orange (var(--c-warn)), aber das matcht nicht mit dem
geolyser-tuerkis-Brand. Jetzt #00CCFF (Geolyser-Akzent) damit der
Button sich ins Restdesign einreiht. */
.help-modal-bug-btn {
background: #00CCFF;
color: #002b3d;
border: 1px solid #00bfee;
font-weight: 600;
}
.help-modal-bug-btn:hover {
background: #1ad6ff;
border-color: #00a8d4;
color: #001a26;
}
[data-theme="dark"] .help-modal-bug-btn {
background: #00bfee;
color: #001a26;
border-color: #009ec7;
}
[data-theme="dark"] .help-modal-bug-btn:hover {
background: #1ad6ff;
color: #00131c;
}
/* ---- Hard-Reload-Button : rose, 40×40 px ----
Sitzt im help-modal-footer neben dem Feedback-Btn. Rose signalisiert
"letzter Ausweg / Reset" ohne destruktiv (rot/danger) zu wirken. */
#hard-reload-btn {
width: 40px;
height: 40px;
min-width: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(244, 63, 94, 0.12);
border: 1px solid rgba(244, 63, 94, 0.45);
color: #f43f5e;
flex-shrink: 0;
}
#hard-reload-btn:hover {
background: rgba(244, 63, 94, 0.22);
border-color: rgba(244, 63, 94, 0.7);
color: #fb7185;
}
[data-theme="dark"] #hard-reload-btn {
background: rgba(244, 63, 94, 0.18);
border-color: rgba(244, 63, 94, 0.5);
color: #fb7185;
}
[data-theme="dark"] #hard-reload-btn:hover {
background: rgba(244, 63, 94, 0.30);
border-color: #f43f5e;
color: #fda4af;
}
/* ---- Geolyser-Logo im Login (Vorbereitung ) ---- */
.login-shell .login-logo {
display: block;
margin: 0 auto 16px auto;
max-width: 120px;
height: auto;
}
/* ============================================================
— Bugfixes: Modal-Ecken + Button-Differenzierung
============================================================ */
/* Modal-Card: overflow:hidden damit Header/Footer-Backgrounds an die
* abgerundeten Ecken angepasst werden. */
.modal-card {
overflow: hidden;
}
/* Header und Footer brauchen oben/unten gerundete Ecken, damit ihre
* Hintergrundfarbe nicht ueber die Card-Rundung hinausragt. */
.modal-header {
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
.modal-footer {
border-bottom-left-radius: var(--radius-lg);
border-bottom-right-radius: var(--radius-lg);
}
/* ---- Buttons mit Differenzierung gegen den Container-Hintergrund ---- */
/* Features-Panel Rail-Toggle + Search-Btn (sind in der Rail) */
.features-panel-rail-toggle,
.features-panel-rail-db {
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--muted-hi);
border-radius: var(--radius-sm);
}
.features-panel-rail-toggle:hover,
.features-panel-rail-db:hover {
background: var(--bg-card);
color: var(--fg);
border-color: var(--border-hi);
}
/* Sidebar-Rail-Toggles + Add */
.sidebar-rail-toggle,
.sidebar-rail-add,
.sidebar-rail-gcp,
.sidebar-rail-aruco {
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--muted-hi);
border-radius: var(--radius-sm);
}
.sidebar-rail-toggle:hover,
.sidebar-rail-add:hover,
.sidebar-rail-gcp:hover,
.sidebar-rail-aruco:hover {
background: var(--bg-card);
color: var(--fg);
border-color: var(--border-hi);
}
/* GCP/ArUco-Btns im Rail — gleiche Geometrie
* wie sidebar-rail-add. Buttons sind nur sichtbar wenn feature_*-
* Flags an sind und werden via Cursor-Mode "im rail" gerendert. */
.sidebar-rail-gcp,
.sidebar-rail-aruco {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
/* kein extra margin-top — .sidebar-rail hat
* bereits `gap: 4px` zwischen allen Kindern. Vorher fielen GCP/ArUco
* mit 4px gap + 4px margin = 8px aus dem Raster der anderen Buttons
* raus. */
margin-top: 0;
cursor: pointer;
}
.sidebar-rail-gcp img,
.sidebar-rail-aruco img {
display: block;
}
/* Pulsations-Effekt fuer GCP/ArUco-Btns
* wenn ein Capture-State minimiert ist (siehe sidebar.js
* setGcpMinimizedState). Cyan-Outline-Glow analog zu Location-Share-
* Pulse aber etwas dezenter. Wirkt sowohl im expanded Sidebar-Header
* als auch im collapsed Rail. */
.is-state-pulse {
position: relative;
animation: geolyser-state-pulse 1.8s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(59, 189, 232, 0.6);
border-color: var(--c-cyan, #3BBDE8) !important;
}
@keyframes geolyser-state-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(59, 189, 232, 0.55);
}
50% {
box-shadow: 0 0 0 6px rgba(59, 189, 232, 0);
}
}
/* Features-Panel Filter-Chips (Layer/Tags) */
.features-panel-chip {
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--fg);
}
.features-panel-chip:hover {
background: var(--bg-card);
border-color: var(--border-hi);
}
.features-panel-chip.is-active {
background: rgba(0, 127, 180, 0.18);
border-color: var(--c-primary-hi);
color: var(--c-primary-hi);
}
/* Features-Panel Header-Buttons (collapse / fullscreen) */
.features-panel-collapse,
.features-panel-fullscreen {
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--muted-hi);
border-radius: var(--radius-sm);
}
.features-panel-collapse:hover,
.features-panel-fullscreen:hover {
background: var(--bg-card);
color: var(--fg);
border-color: var(--border-hi);
}
/* Sidebar-Head Aktion-Buttons (Plus / Pfeil) */
.sidebar-head-actions .ghost {
background: var(--bg-elevated);
}
.sidebar-head-actions .ghost:hover {
background: var(--bg-card);
border-color: var(--border-hi);
}
/* Tristate-Buttons im Filter-Popover differenziert */
.features-panel-tristate-btn {
background: var(--bg-elevated);
border: 1px solid var(--border);
}
.features-panel-tristate-btn:hover {
background: var(--bg-card);
border-color: var(--border-hi);
}
.features-panel-tristate-btn.is-active {
background: rgba(0, 127, 180, 0.22);
border-color: var(--c-primary-hi);
color: var(--c-primary-hi);
}
/* Topbar-Icon-Buttons */
.topbar .icon-btn,
.topbar .ghost {
background: var(--bg-elevated);
border: 1px solid var(--border);
}
.topbar .icon-btn:hover,
.topbar .ghost:hover {
background: var(--bg-card);
border-color: var(--border-hi);
}
/* Modal-Header Close-Button: subtle differenziert */
.modal-header .modal-close-btn {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.modal-header .modal-close-btn:hover {
background: var(--bg-card);
border-color: var(--border-hi);
}
/* DB-Filter-Bar Search + Chips ebenfalls sichtbar */
.db-filter-search {
/* schon definiert; hier nur die Border anheben damit sichtbar */
border-color: var(--border-hi);
}
/* Light-Mode-Search-Background analog zum Layers-Modal
(#F1F4F7) — vorher war's var(--input-bg) was im Light-Theme auf #fff
landete und damit sich kaum von der Modal-Card abhob. */
[data-theme="light"] .db-filter-search {
background: #F1F4F7;
border-color: #c8cfd6;
}
[data-theme="light"] .db-filter-search:focus {
background: #fff;
}
.db-filter-bar .features-panel-chip {
background: var(--bg-elevated);
}
/* Light-Mode-Adjustments: bg-elevated ist hier #ffffff, was auf weisser
* modal-card unsichtbar ist. Nehme bg-card statt elevated. */
[data-theme="light"] .features-panel-rail-toggle,
[data-theme="light"] .features-panel-rail-db,
[data-theme="light"] .sidebar-rail-toggle,
[data-theme="light"] .sidebar-rail-add,
[data-theme="light"] .features-panel-chip,
[data-theme="light"] .features-panel-collapse,
[data-theme="light"] .features-panel-fullscreen,
[data-theme="light"] .sidebar-head-actions .ghost,
[data-theme="light"] .features-panel-tristate-btn,
[data-theme="light"] .topbar .icon-btn,
[data-theme="light"] .topbar .ghost,
[data-theme="light"] .modal-header .modal-close-btn {
background: var(--bg);
border-color: var(--border);
}
[data-theme="light"] .features-panel-rail-toggle:hover,
[data-theme="light"] .features-panel-rail-db:hover,
[data-theme="light"] .sidebar-rail-toggle:hover,
[data-theme="light"] .sidebar-rail-add:hover,
[data-theme="light"] .features-panel-chip:hover,
[data-theme="light"] .features-panel-collapse:hover,
[data-theme="light"] .features-panel-fullscreen:hover,
[data-theme="light"] .sidebar-head-actions .ghost:hover,
[data-theme="light"] .features-panel-tristate-btn:hover,
[data-theme="light"] .topbar .icon-btn:hover,
[data-theme="light"] .topbar .ghost:hover,
[data-theme="light"] .modal-header .modal-close-btn:hover {
background: var(--bg-card);
border-color: var(--c-primary-hi);
}
/* ============================================================
— Detach-Button + Button-Polish-Runde 2
============================================================ */
/* ---- Layer-Feature Sub-Liste: Item ist Flex mit Detach-Button rechts ---- */
.layer-features {
list-style: none;
margin: 4px 0 6px 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.layer-feature {
display: flex;
align-items: center;
gap: 4px;
padding: 0;
background: transparent;
}
.layer-feature-name {
flex: 1 1 auto;
text-align: left;
background: transparent;
border: 0;
color: var(--muted-hi);
padding: 4px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
font: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.layer-feature-name:hover {
background: var(--bg-card);
color: var(--fg);
}
.layer-feature-detach {
flex: 0 0 auto;
background: transparent;
border: 1px solid transparent;
color: var(--muted);
cursor: pointer;
padding: 3px;
border-radius: var(--radius-sm);
line-height: 0;
opacity: 0.6;
transition: opacity .12s, background .12s, color .12s;
}
.layer-feature:hover .layer-feature-detach { opacity: 1; }
.layer-feature-detach:hover {
background: var(--c-error-bg);
color: var(--c-error);
border-color: var(--c-error);
}
/* Edit-Btn in der Sidebar-Feature-Liste, links neben Detach.
Gleiche Geometrie wie .layer-feature-detach, aber Hover in Primary-Blau
(analog zum Pencil-Btn im rechten Datenbank-Panel) statt in Error-Rot. */
.layer-feature-edit {
flex: 0 0 auto;
background: transparent;
border: 1px solid transparent;
color: var(--muted);
cursor: pointer;
padding: 3px;
border-radius: var(--radius-sm);
line-height: 0;
opacity: 0.6;
transition: opacity .12s, background .12s, color .12s;
}
.layer-feature:hover .layer-feature-edit { opacity: 1; }
.layer-feature-edit:hover {
background: rgba(0, 127, 180, 0.14);
color: var(--c-primary-hi);
border-color: var(--c-primary-hi);
}
/* Pencil-Icon ist im ICONS-Objekt mit 16x16 definiert — wir skalieren es
hier auf 14x14 runter, damit Edit + Detach exakt gleich gross wirken. */
.layer-feature-edit svg { width: 14px; height: 14px; }
/* Eye-Toggle pro Feature in der Sidebar-Liste. Hat zwei
Zustaende: sichtbar (eye_on, dezent) und versteckt (eye_off, amber).
Geometrie deckt sich mit den anderen layer-feature-Action-Btns. */
.layer-feature-visible {
flex: 0 0 auto;
background: transparent;
border: 1px solid transparent;
color: var(--muted);
cursor: pointer;
padding: 3px;
border-radius: var(--radius-sm);
line-height: 0;
opacity: 0.7;
transition: opacity .12s, background .12s, color .12s;
}
.layer-feature:hover .layer-feature-visible { opacity: 1; }
.layer-feature-visible:hover {
background: rgba(0, 127, 180, 0.10);
color: var(--c-primary-hi);
}
/* Wenn das Feature ausgeblendet ist (data-checked=0), nimmt der Btn die
Amber-Optik an — analog zum Layer-Eye-Off Pattern. */
.layer-feature-visible[data-checked="0"] {
color: var(--c-amber, #c98a00);
opacity: 1;
}
.layer-feature-visible[data-checked="0"]:hover {
background: rgba(201, 138, 0, 0.14);
}
.layer-feature-visible svg { width: 14px; height: 14px; }
/* Hot-Spot zum Entfernen des letzten Vertex waehrend
Geoman-Drawing. Wird vom geoman-vertex-remove.js absolute im
map-container positioniert (left/top per JS gesetzt, 14 px Offset
schon eingerechnet). pointer-events:auto damit der Klick uns trifft
und nicht direkt an Leaflet-Map durchfaellt. */
.geolyser-vertex-remove-hot {
position: absolute;
width: 28px;
height: 28px;
border-radius: 50%;
background: #ef3b3b;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 3px rgba(239, 59, 59, 0.32),
0 2px 6px rgba(0, 0, 0, 0.35);
border: 2px solid #fff;
cursor: pointer;
z-index: 1100;
pointer-events: auto;
transition: transform .12s ease-out;
/* Leichtes Pulsieren, damit das Element als "klickbar" auffaellt. */
animation: geolyser-vertex-remove-pulse 1.4s ease-in-out infinite;
}
.geolyser-vertex-remove-hot:hover {
transform: scale(1.12);
}
.geolyser-vertex-remove-hot svg { display: block; }
@keyframes geolyser-vertex-remove-pulse {
0%, 100% {
box-shadow: 0 0 0 3px rgba(239, 59, 59, 0.32),
0 2px 6px rgba(0, 0, 0, 0.35);
}
50% {
box-shadow: 0 0 0 7px rgba(239, 59, 59, 0.20),
0 2px 6px rgba(0, 0, 0, 0.35);
}
}
/* User mit prefers-reduced-motion bekommen das Pulse nicht — der rote
Marker mit Minus reicht da alleine als Hinweis. */
@media (prefers-reduced-motion: reduce) {
.geolyser-vertex-remove-hot { animation: none; }
}
/* Drag-Handle ueber alten Vertices (alle ausser dem
letzten). Blau, mit Move-Cursor, kein Pulse — der Drag ist eine
ruhige Aktion (im Gegensatz zu "Delete"). */
.geolyser-vertex-drag-hot {
position: absolute;
width: 28px;
height: 28px;
border-radius: 50%;
background: #3b8eef;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 3px rgba(59, 142, 239, 0.32),
0 2px 6px rgba(0, 0, 0, 0.35);
border: 2px solid #fff;
cursor: move;
z-index: 1099;
pointer-events: auto;
transition: transform .12s ease-out;
}
.geolyser-vertex-drag-hot:hover { transform: scale(1.12); }
.geolyser-vertex-drag-hot svg { display: block; }
/* ---- Allgemeine Button-Differenzierung gegen Container-Hintergrund ---- */
/* Catchall fuer alle .ghost / .ghost-btn / .icon-btn ohne explizite bg.
* Nimmt --bg-elevated im Dark, --bg im Light (siehe oben). */
.ghost-btn {
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--muted-hi);
padding: 4px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
font: inherit;
transition: background .12s, border-color .12s, color .12s;
}
.ghost-btn:hover {
background: var(--bg-card);
color: var(--fg);
border-color: var(--border-hi);
}
[data-theme="light"] .ghost-btn {
background: var(--bg);
}
[data-theme="light"] .ghost-btn:hover {
background: var(--bg-card);
}
/* Layer-Toggles und Layer-Color-Pick ebenfalls heller als Row */
.layer-toggle:not(.is-on) {
background: var(--bg-elevated);
border-color: var(--border);
}
[data-theme="light"] .layer-toggle:not(.is-on) {
background: var(--bg);
}
/* Tag-Picker im Feature-Modal: Chip + Suggestions */
.tag-picker {
background: var(--input-bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px;
}
[data-theme="light"] .tag-picker {
background: var(--bg);
}
.tag-picker-chip {
background: var(--bg-elevated);
border: 1px solid var(--border);
}
[data-theme="light"] .tag-picker-chip {
background: var(--bg-card);
}
/* Trash-Modal Tabelle: Zeilen-Hover bg-card */
.trash-table tbody tr:hover {
background: var(--bg-card);
}
/* Image-Slot: leerer Slot (data-action="img-add") sichtbar gegen modal-bg */
.image-slot {
background: var(--bg-card);
border: 1px dashed var(--border);
}
.image-slot.is-filled {
background: transparent;
border-style: solid;
}
/* Field-Label-Spans heller fuer Light-Mode-Lesbarkeit */
[data-theme="light"] .field-label { color: var(--muted-hi); }
/* Sidebar-Empty: Plus-Indicator-Box */
.sidebar-empty-plus {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 4px;
margin: 0 2px;
}
/* ============================================================
— Bugfixes Resize-Handle + Filter-Click + Aria
============================================================ */
/* Resize-Handle wieder bedienbar: nicht mehr rein nach aussen, sondern
* grossteils im Panel. Width 8px, half-overlap nur 2px. */
.resizable-handle--right { right: -2px !important; }
.resizable-handle--left { left: -2px !important; }
.resizable-handle {
width: 8px !important;
}
/* Sidebar-Paddings aus zurueckgenommen, sonst klebt der Inhalt
* nicht mehr am Resize-Bereich und der Klick wird abgefangen. */
.sidebar { padding-right: 0 !important; }
.features-panel { padding-left: 0 !important; }
/* Doppellinie etwas duenner und hoeher z-index, damit sie auch ueber
* dem ::before des Panels nicht klemmt. */
.resizable-handle { z-index: 6 !important; }
/* Klicks auf Tristate-Buttons + Popover-Inhalt MUESSEN durch sein, damit
* der Filter-Klick wirklich den Listener erreicht. */
.features-panel-popover,
.features-panel-popover * {
pointer-events: auto;
}
.features-panel-tristate-btn { cursor: pointer; }
/* SVG-Icons in Tristate-Buttons sauber zentrieren. */
.features-panel-tristate-btn { display: inline-flex; align-items: center; justify-content: center; }
.features-panel-tristate-btn svg { display: block; }
/* Bug-Modal: Focus weg vom Senden-Button beim Schliessen, sonst
* "Blocked aria-hidden on focused element"-Warnung. */
#bug-modal:not([hidden]) [data-action="bug-send"]:focus { outline: none; }
/* Sidebar-Plus-Button: + zentrieren in der Rail */
.sidebar-rail-add {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 4px;
}
/* ---- Image-Slot-Placeholder fuer noch-nicht-gespeicherte Features ---- */
.image-slot.is-placeholder {
background: var(--bg-card);
border: 1px dashed var(--border);
cursor: not-allowed;
color: var(--muted);
font-size: 0.7em;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.image-slot-hint {
opacity: 0.6;
}
/* ============================================================
— Resize-Innenabstand + Temp-Feature
============================================================ */
/* Innenabstand zum Resize-Handle: Content der Sidebar nicht direkt am Rand. */
.sidebar .sidebar-body {
padding-right: 12px;
}
.features-panel .features-panel-body {
padding-left: 12px;
}
[data-theme="light"] .sidebar .sidebar-body { padding-right: 12px; }
[data-theme="light"] .features-panel .features-panel-body { padding-left: 12px; }
/* ============================================================
— Login-Screen Redesign (Logo + blurred Hintergrund-Karte)
============================================================ */
.login-page {
position: relative;
overflow: hidden;
min-height: 100vh;
}
.login-bg {
position: fixed;
inset: 0;
z-index: 0;
filter: blur(8px) brightness(0.45) saturate(0.85);
pointer-events: none;
/* Etwas ueber den Viewport hinaus, damit der Blur-Rand nicht hineinragt. */
margin: -20px;
}
.login-bg-tint {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse at center, rgba(0, 127, 180, 0.10) 0%, rgba(0, 0, 0, 0.55) 70%),
linear-gradient(180deg, rgba(24, 27, 29, 0.35) 0%, rgba(24, 27, 29, 0.65) 100%);
}
.login-page main {
position: relative;
z-index: 2;
}
.login-card {
background: rgba(24, 27, 29, 0.78) !important;
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
color: var(--c-light);
width: min(420px, 90vw);
padding: 28px 28px 22px !important;
}
[data-theme="light"] .login-card {
background: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(0, 96, 141, 0.18) !important;
color: var(--fg);
}
.login-card .login-logo {
display: block;
margin: 0 auto 14px auto;
width: 96px;
height: auto;
max-height: 96px;
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}
.login-card h1 {
text-align: center;
margin: 0 0 6px 0;
font-family: var(--font-display);
font-size: 1.35rem;
}
.login-card .sub {
text-align: center;
margin: 0 0 18px 0;
font-size: 0.9em;
}
.login-card .field {
margin-bottom: 14px;
}
.login-card .field label {
display: block;
margin-bottom: 4px;
font-size: .85em;
color: var(--muted-hi);
}
.login-card .field input {
width: 100%;
box-sizing: border-box;
background: var(--input-bg);
color: var(--fg);
border: 1px solid var(--border);
padding: 10px 12px;
border-radius: var(--radius-sm);
font: inherit;
}
.login-card .field input:focus {
outline: none;
border-color: var(--c-primary-hi);
box-shadow: 0 0 0 3px rgba(0, 127, 180, 0.18);
}
[data-theme="light"] .login-card .field input {
background: var(--bg);
color: var(--fg);
}
.login-card .login-actions {
margin-top: 20px;
display: flex;
justify-content: stretch;
}
.login-card .login-actions .primary {
width: 100%;
padding: 12px 18px;
font-size: 1rem;
}
.login-card .login-footer {
margin-top: 18px;
text-align: center;
color: var(--muted);
font-size: .8em;
}
.login-card .login-footer a {
color: var(--c-primary-hi);
text-decoration: none;
}
/* Leaflet-Default-Tiles in der bg-Karte: Kontroll-Elemente ganz weg. */
.login-bg .leaflet-control-container,
.login-bg .leaflet-control-attribution {
display: none !important;
}
.login-bg .leaflet-tile-pane {
/* etwas zusaetzlicher Tint ueber den Tiles selbst */
filter: contrast(1.1);
}
/* ============================================================
— GPS-Draw-Tools (links unten, ueber Locate)
============================================================ */
.gps-tools {
position: absolute;
/* Locate-Plugin hat seinen Knopf bottomleft - wir sitzen direkt darueber.
* Standard-Leaflet-Bottomleft-Container ist ca 30px hoch + 10px Abstand. */
left: 10px;
bottom: 56px;
z-index: 700;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.gps-tools-btn {
width: 34px;
height: 34px;
padding: 0;
background: var(--bg-elevated);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.gps-tools-btn:hover:not(:disabled) {
/* solider Hover-Hintergrund - var(--bg-card) ist im Dark-
* Mode fast transparent (3% Weiss), das blutet ueber der Karte aus. */
background: var(--bg-elevated);
border-color: var(--c-primary-hi);
color: var(--c-primary-hi);
}
[data-theme="dark"] .gps-tools-btn:hover:not(:disabled) {
background: #2b3338;
border-color: var(--c-primary-hi);
color: var(--c-primary-hi);
}
.gps-tools-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.gps-tools-btn.is-recording {
background: var(--c-error);
color: var(--c-light);
border-color: var(--c-error);
animation: gps-pulse 1.2s ease-in-out infinite;
}
@keyframes gps-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 92, 101, 0.55); }
50% { box-shadow: 0 0 0 6px rgba(255, 92, 101, 0); }
}
/* Location-Share-Btn pulsiert pink/rose und ist sehr deutlich
sichtbar wenn aktiv. Vorher war der Hintergrund nur transparent. */
.gps-tools-btn.is-active[data-action="gps-share-location"] {
background: #e84d8a !important; /* pink/rose */
color: #fff !important;
border-color: #c43671 !important;
animation: gps-share-pulse 1.4s ease-in-out infinite;
}
@keyframes gps-share-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(232, 77, 138, 0.6); }
50% { box-shadow: 0 0 0 8px rgba(232, 77, 138, 0); }
}
[data-theme="dark"] .gps-tools-btn.is-active[data-action="gps-share-location"] {
background: #ff66a3 !important;
border-color: #e84d8a !important;
}
.gps-tools-status {
/* Status-Badge horizontal RECHTS neben dem aktiven Button - per absolute
* Positionierung abseits vom Button-Stack. */
position: absolute;
left: 44px;
bottom: 0;
white-space: nowrap;
background: var(--bg-elevated);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 8px;
font-size: 0.78em;
font-variant-numeric: tabular-nums;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
pointer-events: none;
max-width: 240px;
}
.gps-tools-status[data-level="warn"] {
background: var(--c-error-bg);
color: var(--c-error);
border-color: var(--c-error);
}
.gps-tools-status[data-level="ok"] {
color: var(--c-signal-dk, #00c76a);
border-color: var(--border-hi);
}
/* Wenn der Status per JS direkt in #map gehangen wird, zeigen
* wir ihn gross + mittig im unteren Viertel der Karte. Eigene Klasse
* damit die alten Stack-Regeln (left:44px etc) nicht greifen. */
.gps-tools-status.gps-tools-status--center {
position: absolute;
left: 50%;
bottom: 22%;
transform: translateX(-50%);
/* die alten Regeln aushebeln */
top: auto;
right: auto;
/* Groesse + Lesbarkeit */
font-size: 1.05em;
padding: 10px 18px;
border-radius: var(--radius-md, 8px);
border-width: 2px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
/* ueber Leaflet-Tooltip (650) und -Popup (700), unter
* Modals (1000+). Leaflet-Controls liegen bei 800-1000, daher 1000. */
z-index: 1000;
max-width: min(80%, 540px);
text-align: center;
font-weight: 500;
letter-spacing: 0.01em;
}
[data-theme="light"] .gps-tools-btn {
background: var(--bg-elevated);
color: var(--fg);
}
/* d: Aktiv-State (Tracking laeuft) muss in Light + Dark rot sein.
* Die generische [data-theme="light"] .gps-tools-btn-Regel oben ueber-
* schrieb sonst den is-recording-Hintergrund auf var(--bg-elevated).
* Hoehere Spezifitaet via .is-recording macht das Rot wieder sichtbar. */
[data-theme="light"] .gps-tools-btn.is-recording,
[data-theme="dark"] .gps-tools-btn.is-recording {
background: var(--c-error);
color: var(--c-light);
border-color: var(--c-error);
}
/* Map-Status ist jetzt oben mittig (siehe +67-Regel),
* Bottom-Override gestrichen. */
/* ============================================================
— Filter-Popover-Bug + GPS-Tools-Sichtbarkeit
============================================================ */
/* Popover wird mit position:absolute + top:100% gerendert. Anker MUSS
* .features-panel-filters sein (nicht .features-panel, sonst wird er
* durch overflow:hidden weggeclippt). */
.features-panel-filters {
position: relative;
/* Popover darf nach unten ueber die Chips raushaengen, nicht clippen. */
overflow: visible;
}
/* Auch das Body darf den Popover nach unten zeigen lassen. */
.features-panel:not(.features-panel--collapsed) {
overflow: visible;
}
/* Aber Liste selbst soll scrollbar bleiben - das macht .features-panel-list
* weiter unten sowieso schon. */
/* Popover bekommt jetzt klaren z-index und Schatten, damit er ueber der
* Liste liegt. */
.features-panel-popover {
z-index: 50 !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
/* Auf Top der gesamten Filter-Bar verankert, nicht bottom. */
top: 100% !important;
margin-top: 4px;
}
/* GPS-Tools-Sichtbarkeit: Container mit display + position relativ
* sicherstellen, falls overflow oder z-index ihn versteckt. */
#gps-tools.gps-tools {
display: flex !important;
z-index: 1500 !important;
}
/* ============================================================
b — GPS-Tools jetzt als L.Control im leaflet-bottom-left
============================================================ */
/* Innerhalb des Leaflet-Bottom-Left-Containers braucht .gps-tools KEIN
* absolute mehr - der Leaflet-Container stackt seine Children selbst. */
.leaflet-bottom .gps-tools {
position: static !important;
left: auto !important;
bottom: auto !important;
margin: 0 0 6px 0;
flex-direction: column;
pointer-events: auto;
}
.leaflet-bottom .gps-tools .gps-tools-status {
position: absolute;
left: calc(100% + 6px);
bottom: 0;
/* der Status-Badge bleibt absolut, damit er nicht in den Stack
* integriert ist - die Tools-Box behaelt feste Hoehe. */
}
/* Standard-Leaflet-Bottom-Container hat margin von 10px - GPS-Tools liegen
* dann ca 70-90px ueber dem unteren Rand (Locate + Scale dazwischen). */
.leaflet-bottom.leaflet-left {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
.leaflet-bottom.leaflet-left .leaflet-control {
margin: 4px 10px 0 10px;
}
/* Die Buttons selbst nicht zu klein, ueberlappen Locate-Plugin nicht. */
.leaflet-bottom .gps-tools-btn {
/* Leaflet-typischer Schatten / Border passend zu anderen Controls. */
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
/* ============================================================
b — GPS-Tools Visibility-Toggle + Stack-Reihenfolge
============================================================ */
/* Default unsichtbar, nur wenn Locate-Plugin aktiv ist anzeigen.
* Vorher hatten wir "display:flex !important" was das Verstecken brach. */
#gps-tools.gps-tools {
display: flex !important;
z-index: 1500 !important;
}
#gps-tools.gps-tools.is-hidden {
display: none !important;
}
/* Stack-Reihenfolge im leaflet-bottom-left:
* Wir wollen von UNTEN nach OBEN: scale-line, locate-arrow, gps-tools.
* Standard-Leaflet-Insertion mit position:bottomleft ist:
* scale (added 1st) -> data-rolle in normaler Reihenfolge
* locate (added 2nd) -> darueber
* gps-tools (added 3rd, post-boot) -> ganz oben
* Mit normaler flex-direction (column) waere insertion-order = vertical.
* Default Leaflet hat KEIN flex auf dem Container, sondern stackt block.
* Block-Layout: scale oben, locate mittig, gps-tools unten. Falsch.
* Daher: flex-column-reverse erzwingen. */
.leaflet-bottom.leaflet-left {
display: flex !important;
flex-direction: column-reverse !important;
align-items: flex-start;
}
/* ============================================================
— Stack-Reihenfolge der Leaflet-Controls
============================================================ */
/* LINKS UNTEN (von unten nach oben):
* 1. leaflet-control-locate (location-arrow)
* 2. gps-tools (Punkt / Linie / Polygon)
* Insertion-order: locate (in setupMap), dann gps-tools (post-boot).
* column-reverse macht "first inserted = bottom" → locate unten, GPS oben. */
.leaflet-bottom.leaflet-left {
display: flex !important;
flex-direction: column-reverse !important;
align-items: flex-start;
}
/* RECHTS UNTEN (von oben nach unten):
* 1. leaflet-control-zoom (Zoom +/-)
* 2. leaflet-control-scale (Massstab darunter)
* Default-Block-Layout reicht hier - zoom (1st) oben, scale (2nd) darunter.
* KEINE flex-direction-reverse, sonst dreht sich das wieder um. */
.leaflet-bottom.leaflet-right {
display: flex !important;
flex-direction: column !important;
align-items: flex-end;
}
.leaflet-bottom.leaflet-right .leaflet-control {
margin: 4px 10px;
}
/* ============================================================
b — Leaflet-Default-Stack zurueck, GPS-Tools absolut
============================================================ */
/* Flex-Hacks auf den Leaflet-Bottom-Containern komplett zuruecknehmen.
* Leaflet stackt seine Controls per Default sauber via block - das war ok. */
.leaflet-bottom.leaflet-left,
.leaflet-bottom.leaflet-right {
display: block !important;
flex-direction: unset !important;
align-items: unset !important;
}
.leaflet-bottom.leaflet-left .leaflet-control,
.leaflet-bottom.leaflet-right .leaflet-control {
margin: 10px;
}
/* GPS-Tools werden NICHT in den Leaflet-Container gesteckt, sondern
* als absolut positioniertes Overlay im map-shell, sodass der Locate-Button
* seine feste Position behaelt. */
#gps-tools.gps-tools {
position: absolute !important;
left: 10px !important;
bottom: 90px !important; /* ueber dem Locate-Button (~30px hoch + 10px margin + Luft) */
top: auto !important;
z-index: 1500 !important;
display: flex !important;
flex-direction: column;
gap: 4px;
align-items: flex-start;
pointer-events: auto;
}
#gps-tools.gps-tools.is-hidden {
display: none !important;
}
#gps-tools .gps-tools-status {
position: absolute !important;
left: calc(100% + 6px);
bottom: 0;
}
/* ============================================================
c — GPS-Tools im #map-Element + Position relativ dazu
============================================================ */
/* #gps-tools wird per JS in #map verschoben, damit absolute positioning
* relativ zum Karten-Container ist (#map hat position:relative durch Leaflet).
* left:10px liegt damit am linken Karten-Rand, nicht am linken Bildrand.
* bottom:56px platziert die Tools ueber dem Locate-Button (Locate ~40px hoch
* + 10px margin-bottom, also Top-Edge bei ~50px von Karte-Bottom). */
#map > #gps-tools.gps-tools {
position: absolute !important;
left: 10px !important;
bottom: 56px !important;
top: auto !important;
z-index: 1500 !important;
display: flex !important;
flex-direction: column;
gap: 4px;
align-items: flex-start;
pointer-events: auto;
}
#map > #gps-tools.gps-tools.is-hidden {
display: none !important;
}
/* Mobile-NN-Fix Auf Smartphone
* (max-width: 768px) schoben sich die GPS-Tools-Buttons + Locate
* ueber das aufgeklappte Sidepanel (Sidebar/Features-Panel sind auf
* z-index: 1200 in der Mobile-Spec). Analog zu Mobile-N (map-status)
* jetzt unter Sidebar-Level absenken: Sidepanel offen → GPS-Tools
* verdeckt. !important + ID-Selektor (Spezifitaet 1,2,1) gewinnt
* gegen die mehrfachen `z-index: 1500 !important`-Regeln oben. */
@media (max-width: 768px) {
#gps-tools.gps-tools,
#map > #gps-tools.gps-tools,
.leaflet-bottom .gps-tools,
.leaflet-bottom .leaflet-control-locate,
.leaflet-bottom.leaflet-left {
z-index: 1100 !important;
}
}
/* ============================================================
— Komplettes Farbschema fuer Buttons (Light + Dark)
============================================================ */
/* ---- Sidebar links: Neuer Layer (Plus) ---- */
.sidebar-rail-add,
.sidebar-head-actions [data-action="create"] {
background: rgba(2, 254, 137, 0.18) !important;
color: #007a3a !important;
border-color: rgba(2, 254, 137, 0.45) !important;
}
.sidebar-rail-add:hover,
.sidebar-head-actions [data-action="create"]:hover {
background: rgba(2, 254, 137, 0.30) !important;
color: #006a2c !important;
}
/* ---- Sidebar links: Einklappen / Aufklappen (Pfeile) - hellblau ---- */
.sidebar-rail-toggle,
.sidebar-head-actions [data-action="toggle"] {
background: rgba(0, 160, 210, 0.16) !important;
color: #006a8d !important;
border-color: rgba(0, 160, 210, 0.45) !important;
}
.sidebar-rail-toggle:hover,
.sidebar-head-actions [data-action="toggle"]:hover {
background: rgba(0, 160, 210, 0.28) !important;
color: #004161 !important;
}
/* ---- Features-Panel rechts: gleiche Pfeil-Buttons hellblau ---- */
.features-panel-rail-toggle,
.features-panel-collapse {
background: rgba(0, 160, 210, 0.16) !important;
color: #006a8d !important;
border-color: rgba(0, 160, 210, 0.45) !important;
}
.features-panel-rail-toggle:hover,
.features-panel-collapse:hover {
background: rgba(0, 160, 210, 0.28) !important;
color: #004161 !important;
}
/* Rail-DB-Button im selben Gruen wie der
* expandierte .features-panel-fullscreen-Btn — konsistente Visual-Sprache
* fuer "DB-Vollansicht oeffnen", egal ob collapsed oder expanded. */
.features-panel-rail-db {
background: rgba(2, 254, 137, 0.18) !important;
color: #007a3a !important;
border-color: rgba(2, 254, 137, 0.45) !important;
}
.features-panel-rail-db:hover {
background: rgba(2, 254, 137, 0.30) !important;
color: #006a2c !important;
}
/* ---- Features-Panel: Datenbank-Vollansicht-Button gruen (analog Plus links) ---- */
.features-panel-fullscreen {
background: rgba(2, 254, 137, 0.18) !important;
color: #007a3a !important;
border-color: rgba(2, 254, 137, 0.45) !important;
}
.features-panel-fullscreen:hover {
background: rgba(2, 254, 137, 0.30) !important;
color: #006a2c !important;
}
/* ---- Filter-Chips im rechten Panel: Layer = grün, Tags = blau ---- */
.features-panel-chip[data-popover="layers"] {
background: rgba(2, 254, 137, 0.14) !important;
color: #007a3a !important;
border-color: rgba(2, 254, 137, 0.40) !important;
}
.features-panel-chip[data-popover="layers"]:hover,
.features-panel-chip[data-popover="layers"].is-active {
background: rgba(2, 254, 137, 0.30) !important;
border-color: #00c76a !important;
}
.features-panel-chip[data-popover="tags"] {
background: rgba(0, 160, 210, 0.14) !important;
color: #006a8d !important;
border-color: rgba(0, 160, 210, 0.40) !important;
}
.features-panel-chip[data-popover="tags"]:hover,
.features-panel-chip[data-popover="tags"].is-active {
background: rgba(0, 160, 210, 0.28) !important;
border-color: #00A0D2 !important;
}
/* ---- Action-Bar: Auswahl leeren = weisser Hintergrund ---- */
.features-panel-actionbar [data-action="clear-selection"] {
background: var(--c-light) !important;
color: var(--fg) !important;
border: 1px solid var(--border) !important;
}
[data-theme="light"] .features-panel-actionbar [data-action="clear-selection"] {
background: var(--c-light) !important;
color: #2a2f33 !important;
border-color: rgba(0, 96, 141, 0.30) !important;
}
.features-panel-actionbar [data-action="clear-selection"]:hover {
background: var(--bg-card) !important;
}
/* ---- Per-Item-Action-Buttons im rechten Panel ---- */
/* Plus-Variante (add-to-layer) bleibt im Standard-Gruen. Wenn das Feature
schon im aktiven Layer haengt, kommt zusaetzlich .btn-amber drauf —
der Selektor weiter unten dreht dann auf Amber/Minus. */
.features-panel-item-add {
background: rgba(2, 254, 137, 0.14) !important;
color: #007a3a !important;
border-color: rgba(2, 254, 137, 0.40) !important;
/* Fix: + zentrieren */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.features-panel-item-add:hover {
background: rgba(2, 254, 137, 0.28) !important;
}
/* Toggle-Override fuer den Remove-Btn (Minus). Wenn das
Feature schon im aktiven Layer ist, traegt der Btn zusaetzlich
.btn-amber — wir uebersteuern dann die Gruen-Werte aus dem Basis-
Style auf Amber, behalten aber die identische Geometrie. */
.features-panel-item-add.btn-amber {
background: rgba(201, 138, 0, 0.14) !important;
color: var(--c-amber, #c98a00) !important;
border-color: rgba(201, 138, 0, 0.40) !important;
}
.features-panel-item-add.btn-amber:hover {
background: rgba(201, 138, 0, 0.28) !important;
}
.features-panel-item-edit {
background: rgba(0, 160, 210, 0.14) !important;
color: #006a8d !important;
border-color: rgba(0, 160, 210, 0.40) !important;
}
.features-panel-item-edit:hover {
background: rgba(0, 160, 210, 0.28) !important;
}
.features-panel-item-delete {
background: var(--c-error-bg) !important;
color: var(--c-error) !important;
border-color: rgba(255, 92, 101, 0.40) !important;
}
.features-panel-item-delete:hover {
background: rgba(255, 92, 101, 0.30) !important;
}
/* ---- Modal-Buttons (polish runde 5) ----------------------
Cancel/Close: NEUTRAL grau, damit sie sich deutlich von destruktiven
Aktionen (Verwerfen, Loeschen) abheben. Frueher waren beide rot und
sahen identisch aus. Das X im Modal-Header bleibt im neutralen Stil.
Destruktive Aktionen (.ghost.danger oder data-action=discard/delete)
sind im naechsten Block solid-rot definiert. ----------------------- */
.modal-actions [data-action="cancel"],
.modal-footer [data-action="cancel"],
.modal-actions [data-action="close-modal"],
.modal-footer [data-action="close-modal"],
.modal-close-btn {
background: var(--bg-elevated) !important;
color: var(--muted-hi) !important;
border: 1px solid var(--border) !important;
}
.modal-actions [data-action="cancel"]:hover,
.modal-footer [data-action="cancel"]:hover,
.modal-actions [data-action="close-modal"]:hover,
.modal-footer [data-action="close-modal"]:hover,
.modal-close-btn:hover {
background: var(--bg-card) !important;
color: var(--fg) !important;
border-color: var(--border-hi) !important;
}
/* Destruktive Aktionen: solid-rot, klar als "Achtung" markiert. */
.modal-actions .ghost.danger,
.modal-footer .ghost.danger,
.modal-actions [data-action="discard"],
.modal-actions [data-action="delete"],
.modal-actions [data-action="bulk-delete"] {
background: var(--c-error) !important;
color: var(--c-light) !important;
border: 1px solid var(--c-error) !important;
font-weight: 500;
}
.modal-actions .ghost.danger:hover,
.modal-footer .ghost.danger:hover,
.modal-actions [data-action="discard"]:hover,
.modal-actions [data-action="delete"]:hover,
.modal-actions [data-action="bulk-delete"]:hover {
filter: brightness(1.1);
}
/* ---- Modal-Inputs im hellen Modus: heller Grau-Hintergrund ---- */
[data-theme="light"] .modal-card .field input,
[data-theme="light"] .modal-card .field select,
[data-theme="light"] .modal-card .field textarea,
[data-theme="light"] .login-card .field input {
background: #f0f3f6 !important;
color: var(--fg) !important;
border: 1px solid rgba(0, 96, 141, 0.18) !important;
}
[data-theme="light"] .modal-card .field input:focus,
[data-theme="light"] .modal-card .field select:focus,
[data-theme="light"] .modal-card .field textarea:focus,
[data-theme="light"] .login-card .field input:focus {
border-color: var(--c-primary-hi) !important;
}
/* ---- Tristate-Buttons ---- */
.features-panel-tristate-btn[data-state="all"] {
color: #007a3a;
border-color: rgba(2, 254, 137, 0.40);
}
.features-panel-tristate-btn[data-state="all"]:hover,
.features-panel-tristate-btn[data-state="all"].is-active {
background: rgba(2, 254, 137, 0.28) !important;
color: #006a2c;
border-color: var(--c-signal-dk);
}
.features-panel-tristate-btn[data-state="any"] {
color: #006a8d;
border-color: rgba(0, 160, 210, 0.40);
}
.features-panel-tristate-btn[data-state="any"]:hover,
.features-panel-tristate-btn[data-state="any"].is-active {
background: rgba(0, 160, 210, 0.28) !important;
color: #004161;
border-color: var(--c-primary-hi);
}
.features-panel-tristate-btn[data-state="not"] {
color: var(--c-error);
border-color: rgba(255, 92, 101, 0.40);
}
.features-panel-tristate-btn[data-state="not"]:hover,
.features-panel-tristate-btn[data-state="not"].is-active {
background: rgba(255, 92, 101, 0.22) !important;
border-color: var(--c-error);
}
/* ---- Topbar-Icons: jeder Knopf eine eigene Farbe ---- */
.topbar #admin-btn {
background: rgba(59, 189, 232, 0.18) !important;
color: #06829c !important;
border-color: rgba(59, 189, 232, 0.45) !important;
}
.topbar #admin-btn:hover {
background: rgba(59, 189, 232, 0.32) !important;
color: #034f5f !important;
}
.topbar #trash-btn {
background: rgba(255, 192, 74, 0.18) !important;
color: #b87a00 !important;
border-color: rgba(255, 192, 74, 0.55) !important;
}
.topbar #trash-btn:hover {
background: rgba(255, 192, 74, 0.34) !important;
color: #8a5a00 !important;
}
.topbar #help-btn {
background: rgba(0, 160, 210, 0.16) !important;
color: #006a8d !important;
border-color: rgba(0, 160, 210, 0.45) !important;
}
.topbar #help-btn:hover {
background: rgba(0, 160, 210, 0.30) !important;
color: #004161 !important;
}
/* polish runde 9: Theme-Toggle visuell als Vorschau auf das
Ziel-Theme. Im hellen Modus zeigt der Btn das Mond-Icon (Klick =
dunkles Theme aktivieren) und ist dunkel mit hellem Icon. Im dunklen
Modus zeigt der Btn das Sonnen-Icon (Klick = helles Theme aktivieren)
und ist hell mit dunklem Icon. So sieht der User schon vor dem Klick
was passiert. */
.topbar #theme-toggle {
border-color: var(--border-hi) !important;
}
:root[data-theme="light"] .topbar #theme-toggle {
/* Klick aktiviert dunkles Theme -> Btn-Vorschau: dunkel + hell */
background: #1f2428 !important;
color: #f1f4f7 !important;
border-color: #1f2428 !important;
}
:root[data-theme="light"] .topbar #theme-toggle:hover {
background: #2c3439 !important;
}
:root[data-theme="dark"] .topbar #theme-toggle {
/* Klick aktiviert helles Theme -> Btn-Vorschau: hell + dunkel */
background: #f1f4f7 !important;
color: #1f2428 !important;
border-color: #d0d7de !important;
}
:root[data-theme="dark"] .topbar #theme-toggle:hover {
background: #ffffff !important;
}
.topbar #logout-btn {
background: rgba(155, 90, 200, 0.20) !important;
color: #6a3aa0 !important;
border-color: rgba(155, 90, 200, 0.50) !important;
}
.topbar #logout-btn:hover {
background: rgba(155, 90, 200, 0.36) !important;
color: #4a2a78 !important;
}
/* Dark-Mode-Adjustments fuer alle obigen Color-Buttons: Hintergruende
* etwas heller, Schriftfarbe Pastell statt dunkel. */
[data-theme="dark"] .sidebar-rail-add,
[data-theme="dark"] .sidebar-head-actions [data-action="create"],
[data-theme="dark"] .features-panel-fullscreen,
[data-theme="dark"] .features-panel-item-add,
[data-theme="dark"] .features-panel-chip[data-popover="layers"] {
color: #6dffb4 !important;
}
/* Remove-Variante (Minus) bleibt auch im Dark-Mode
amber-pastell — uebersteuert die gemeinsame Gruen-Regel oben. */
[data-theme="dark"] .features-panel-item-add.btn-amber {
color: #f5c869 !important;
}
[data-theme="dark"] .sidebar-rail-toggle,
[data-theme="dark"] .sidebar-head-actions [data-action="toggle"],
[data-theme="dark"] .features-panel-rail-toggle,
[data-theme="dark"] .features-panel-collapse,
[data-theme="dark"] .features-panel-item-edit,
[data-theme="dark"] .features-panel-chip[data-popover="tags"],
[data-theme="dark"] .topbar #help-btn {
color: #9bd9f5 !important;
}
/* Dark-Mode pastel-Gruen analog
* .features-panel-fullscreen (Zeile 6321), damit Light + Dark identische
* Visual-Sprache haben. */
[data-theme="dark"] .features-panel-rail-db {
color: #6dffb4 !important;
}
[data-theme="dark"] .topbar #admin-btn { color: #6ed6f4 !important; }
[data-theme="dark"] .topbar #trash-btn { color: #ffc04a !important; }
[data-theme="dark"] .topbar #logout-btn { color: #c79be3 !important; }
/* ============================================================
b — Profil-Modal (Self-Service-Account-Daten + Export)
============================================================ */
.profile-modal-body { display: flex; flex-direction: column; gap: 14px; }
.profile-modal-body h4 {
margin: 8px 0 4px;
font-size: 1em;
font-weight: 500;
color: var(--c-primary-hi);
}
.profile-modal-body h4:first-child { margin-top: 0; }
.profile-data {
display: grid;
grid-template-columns: max-content 1fr;
gap: 4px 14px;
margin: 0;
font-size: 0.92em;
}
.profile-data dt {
color: var(--muted-hi);
font-weight: 400;
}
.profile-data dd {
margin: 0;
color: var(--fg);
word-break: break-all;
}
.profile-data code {
font-size: 0.88em;
color: var(--muted-hi);
}
/* c: Quota-Anzeige + Self-Service-Loeschung. */
.quota-box {
display: flex;
flex-direction: column;
gap: 6px;
}
.quota-bar {
width: 100%;
height: 8px;
background: var(--bg-deep, rgba(0, 0, 0, 0.18));
border-radius: 4px;
overflow: hidden;
}
.quota-bar > span {
display: block;
height: 100%;
background: var(--c-primary, #2c8ee0);
transition: width .3s ease;
}
.quota-bar > span[data-warn="true"] {
background: var(--c-error, #d8493b);
}
.quota-label { margin: 0; }
.delete-account-form {
border: 1px solid var(--c-error);
background: var(--c-error-bg, rgba(216, 73, 59, 0.06));
border-radius: var(--radius-md, 8px);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.delete-account-form .form-warning {
margin: 0;
color: var(--c-error);
}
.delete-account-form .field { margin: 0; }
.form-ok {
color: var(--c-signal-dk, #00a04f);
font-size: 0.92em;
margin: 4px 0 0;
}
.ghost.danger {
color: var(--c-error);
border-color: var(--c-error);
}
.ghost.danger:hover {
background: var(--c-error-bg);
}
/* ============================================================
g — DSGVO-Cookie-Banner + Legal-Links
============================================================ */
/* Mehrfach-Nutzungs-Badge in "Tilesets von anderen Nutzern". */
.from-others-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(0, 160, 210, 0.18);
color: var(--c-primary, #007FB4);
font-size: 0.78em;
font-weight: 600;
cursor: help;
border: 1px solid rgba(0, 160, 210, 0.4);
}
[data-theme="dark"] .from-others-badge {
background: rgba(59, 189, 232, 0.2);
color: #3BBDE8;
}
/* Import-Compare-Modal (Duplikat-Pruefung beim Layer-Import). */
.import-compare-card {
width: min(960px, 100vw);
max-width: 100vw;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.import-compare-card .modal-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 12px 16px;
}
.cmp-toolbar {
display: flex;
/* War flex-end -> die zweite Spalte hat ein
sub-Hint UNTER dem Input, was den Label-Container höher macht; bei
flex-end werden die Boxen am unteren Rand ausgerichtet und der
Input der zweiten Spalte rutscht NACH OBEN gegenüber dem ersten
Input. flex-start richtet die Boxen oben aus, die Inputs landen
auf derselben Y-Achse, der sub-Hint hängt sauber unten dran. */
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 12px;
padding: 10px;
background: var(--bg-elevated, rgba(0, 0, 0, 0.04));
border-radius: 6px;
}
.cmp-toolbar .field { flex: 1 1 200px; }
.cmp-bulk {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.cmp-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.cmp-row {
border: 1px solid var(--border, #ddd);
border-radius: 6px;
background: var(--bg-card, #fff);
}
.cmp-row-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
user-select: none;
}
.cmp-row-head:hover {
background: var(--bg-elevated, rgba(0, 0, 0, 0.03));
}
.cmp-row-name {
font-weight: 500;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cmp-row-meta { font-size: 0.85em; }
.cmp-row-toggle {
color: var(--muted, #6b7280);
font-size: 1.1em;
}
.cmp-row-body {
padding: 12px 16px;
border-top: 1px solid var(--border);
background: var(--bg, #fafafa);
}
[data-theme="dark"] .cmp-row-body { background: rgba(255, 255, 255, 0.02); }
.cmp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 10px;
}
.cmp-side {
border: 1px solid var(--border);
border-radius: 4px;
padding: 10px;
background: var(--bg-card, #fff);
}
.cmp-side h4 {
margin: 0 0 8px;
font-size: 0.95em;
color: var(--muted-hi, #4b5563);
}
.cmp-side--old h4 { color: #b91c1c; }
.cmp-side--new h4 { color: #166534; }
.cmp-props { margin-top: 6px; }
.cmp-props summary { cursor: pointer; font-size: 0.85em; }
.cmp-props pre {
max-height: 180px;
overflow: auto;
font-size: 0.8em;
background: var(--bg-elevated, rgba(0, 0, 0, 0.04));
padding: 6px;
border-radius: 4px;
margin: 6px 0 0;
}
.cmp-minimap {
height: 200px;
border: 1px solid var(--border);
border-radius: 4px;
margin-bottom: 10px;
background: #eef;
}
.cmp-actions {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
background: var(--bg-elevated, rgba(0, 0, 0, 0.04));
border-radius: 4px;
}
.cmp-actions label {
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.cmp-badge {
display: inline-block;
font-size: 0.72em;
padding: 1px 8px;
border-radius: 999px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cmp-badge--dup {
background: rgba(239, 68, 68, 0.15);
color: #b91c1c;
border: 1px solid rgba(239, 68, 68, 0.4);
}
.cmp-badge--new {
background: rgba(22, 101, 52, 0.12);
color: #166534;
border: 1px solid rgba(22, 101, 52, 0.35);
}
@media (max-width: 700px) {
.cmp-grid {
grid-template-columns: 1fr;
}
}
/* + 81.0.13: Toast-Notifikation. Toasts werden jetzt in
einem Stack-Container untereinander gerendert (statt sich zu
ueberlagern). Neue Toasts kommen oben rein, aeltere ruecken nach;
das Fade-out laeuft ueber 1s (vorher 0.35s, zu abrupt). */
.geolyser-toast-stack {
position: fixed;
top: 64px;
left: 50%;
transform: translateX(-50%);
z-index: 2200;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none; /* Container fangt keine Klicks */
max-width: min(520px, 92vw);
width: max-content;
}
.geolyser-toast {
pointer-events: auto; /* Einzelner Toast schon */
background: var(--bg-card, #fff);
color: var(--text);
border: 1px solid var(--border);
border-left: 4px solid var(--c-primary, #007FB4);
padding: 10px 16px;
border-radius: 8px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
font-size: 0.92em;
animation: geolyser-toast-in .25s ease-out;
}
.geolyser-toast--success { border-left-color: #10B981; }
.geolyser-toast--error { border-left-color: #ef4444; }
.geolyser-toast--info { border-left-color: var(--c-primary, #007FB4); }
/* Toast-Avatar-Variante (Coworker-Aenderungs-Toasts).
Avatar links neben Text, Maske bei Incognito. */
.geolyser-toast--with-avatar {
display: flex;
align-items: center;
gap: 10px;
}
.geolyser-toast-avatar {
flex: 0 0 auto;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--user-color, #06829c);
color: var(--user-color, #06829c);
border: 2px solid var(--user-color, #06829c);
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
}
.geolyser-toast-avatar img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.geolyser-toast-avatar--incognito {
background: rgba(125, 129, 138, 0.18);
color: #7d818a;
border-color: rgba(125, 129, 138, 0.55);
}
.geolyser-toast-initial {
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.geolyser-toast-text {
flex: 1 1 auto;
}
.geolyser-toast.is-leaving {
animation: geolyser-toast-out 1s ease-in forwards;
}
@keyframes geolyser-toast-in {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes geolyser-toast-out {
from { opacity: 1; max-height: 200px; padding: 10px 16px;
margin-top: 0; margin-bottom: 0; }
to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0;
margin-top: 0; margin-bottom: -8px; }
}
[data-theme="dark"] .geolyser-toast {
background: #1f242b;
color: #e5e7eb;
}
/* Passwort-Toggle (Klartext-Eye). */
.geolyser-pw-wrap {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
}
.geolyser-pw-wrap > input[type="password"],
.geolyser-pw-wrap > input[type="text"] {
flex: 1;
padding-right: 38px !important;
}
.geolyser-pw-toggle {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--muted, #6b7280);
cursor: pointer;
padding: 0;
border-radius: 4px;
}
.geolyser-pw-toggle:hover {
color: var(--text, #111);
background: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .geolyser-pw-toggle:hover {
background: rgba(255, 255, 255, 0.08);
}
/* Random-Icon im uc-generate-password-Btn
* (User-Create-Modal). Per CSS mask getintet, damit es den Btn-Color
* (currentColor) traegt — in Light-Mode dunkel, in Dark-Mode hell. */
.uc-random-btn .uc-random-icon {
display: inline-block;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask: url("/img/icons/random-svgrepo-com.svg") center / contain no-repeat;
mask: url("/img/icons/random-svgrepo-com.svg") center / contain no-repeat;
}
.legal-notice {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
/* Wenn das Notice aus dem Help-Modal heraus geoeffnet
* wird, soll es DARUEBER liegen damit der User es lesen kann.
* Modals haben z-index 2000, also setzen wir 2100. */
z-index: 2100;
display: flex;
justify-content: center;
pointer-events: none;
animation: legal-notice-in .25s ease-out;
}
.legal-notice.is-leaving {
animation: legal-notice-out .22s ease-in forwards;
}
@keyframes legal-notice-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes legal-notice-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(20px); }
}
.legal-notice-card {
pointer-events: auto;
max-width: 720px;
width: 100%;
background: var(--bg-elevated);
color: var(--fg);
border: 1px solid var(--border-hi);
border-radius: var(--radius-md, 8px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.legal-notice-text {
font-size: 0.92em;
line-height: 1.5;
color: var(--fg);
}
.legal-notice-text strong { font-weight: 500; }
.legal-notice-text a {
color: var(--c-primary-hi);
text-decoration: underline;
}
.legal-notice-text a:hover { color: var(--c-primary); }
.legal-notice-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
}
.legal-notice-btn {
padding: 8px 16px;
border-radius: var(--radius-sm, 6px);
border: 1px solid transparent;
font: inherit;
cursor: pointer;
}
.legal-notice-btn.primary {
background: var(--c-primary);
color: var(--c-light, #ffffff);
border-color: var(--c-primary);
}
.legal-notice-btn.primary:hover {
background: var(--c-primary-hi);
border-color: var(--c-primary-hi);
}
/* Permanente Legal-Links (Login-Footer + Map-Bottom-Bar). */
.legal-links {
display: inline-flex;
gap: 10px;
align-items: center;
font-size: 0.85em;
color: var(--muted-hi);
}
.legal-links a {
color: var(--muted-hi);
text-decoration: none;
}
.legal-links a:hover {
color: var(--c-primary-hi);
text-decoration: underline;
}
.legal-links .sep {
opacity: 0.55;
user-select: none;
}
/* Auf der Map sitzen die Legal-Links rechts neben der Attribution
* unten mittig, in der gleichen Zeile. */
.map-legal-links {
position: absolute;
right: 8px;
bottom: 0;
z-index: 600;
background: var(--map-info-bg);
color: var(--muted-hi);
border-radius: 6px 6px 0 0;
padding: 2px 8px;
font-size: 11px;
pointer-events: auto;
}
.map-legal-links a {
color: var(--c-primary-hi);
text-decoration: none;
}
.map-legal-links a:hover { text-decoration: underline; }
/* Mobile: Banner laesst Schaltflaechen unter dem Text einrasten. */
@media (max-width: 540px) {
.legal-notice { left: 8px; right: 8px; bottom: 8px; }
.legal-notice-card { padding: 12px; }
.legal-notice-actions { justify-content: stretch; }
.legal-notice-btn.primary { width: 100%; }
}
/* ============================================================
— Tristate-BG-Tint, Center-Inputs links, Clear-Selection-Dark,
Login-Topbar-Buttons
============================================================ */
/* Tristate: Hintergrund-Tint statt Text-Tint */
.features-panel-tristate-btn[data-state="all"] {
background: rgba(2, 254, 137, 0.18) !important;
color: var(--fg) !important;
border-color: rgba(2, 254, 137, 0.45) !important;
}
.features-panel-tristate-btn[data-state="all"]:hover,
.features-panel-tristate-btn[data-state="all"].is-active {
background: rgba(2, 254, 137, 0.42) !important;
border-color: var(--c-signal-dk) !important;
color: var(--fg) !important;
}
.features-panel-tristate-btn[data-state="any"] {
background: rgba(0, 160, 210, 0.18) !important;
color: var(--fg) !important;
border-color: rgba(0, 160, 210, 0.45) !important;
}
.features-panel-tristate-btn[data-state="any"]:hover,
.features-panel-tristate-btn[data-state="any"].is-active {
background: rgba(0, 160, 210, 0.40) !important;
border-color: var(--c-primary-hi) !important;
color: var(--fg) !important;
}
.features-panel-tristate-btn[data-state="not"] {
background: rgba(255, 92, 101, 0.18) !important;
color: var(--fg) !important;
border-color: rgba(255, 92, 101, 0.45) !important;
}
.features-panel-tristate-btn[data-state="not"]:hover,
.features-panel-tristate-btn[data-state="not"].is-active {
background: rgba(255, 92, 101, 0.42) !important;
border-color: var(--c-error) !important;
color: var(--fg) !important;
}
/* Default-Center-Inputs (im Admin-Modal) linksbuendig - per default
* sind type=number rechtsbuendig in vielen Browsern. */
.modal-card .field input[type="number"] {
text-align: left !important;
}
/* Clear-Selection im Dark-Mode: dunkler Grauton statt weiss */
[data-theme="dark"] .features-panel-actionbar [data-action="clear-selection"] {
background: #2a3036 !important;
color: var(--fg) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .features-panel-actionbar [data-action="clear-selection"]:hover {
background: #353c43 !important;
border-color: var(--border-hi) !important;
}
/* Login-Topbar-Buttons (Help + Theme rechts oben) */
.login-topbar {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
display: flex;
gap: 8px;
}
.login-topbar .icon-btn {
width: 36px; height: 36px;
background: rgba(24, 27, 29, 0.55);
color: var(--c-light);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-sm);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.login-topbar .icon-btn:hover {
background: rgba(0, 160, 210, 0.32);
border-color: var(--c-primary-hi);
}
[data-theme="light"] .login-topbar .icon-btn {
background: rgba(255, 255, 255, 0.85);
color: #2a2f33;
border-color: rgba(0, 96, 141, 0.18);
}
/* ============================================================
+ 65 — Marker-Icon-Picker im Feature-Modal
Jedes Icon ist eigenstaendig (24x32) in der Layer-Farbe,
${COLOR} -> currentColor fuer die Vorschau im Picker.
============================================================ */
.marker-icon-picker {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 6px;
padding: 4px 0;
}
.marker-icon-pick {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px;
color: var(--c-primary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .12s, border-color .12s;
}
.marker-icon-pick:hover {
background: var(--bg-card);
border-color: var(--border-hi);
}
.marker-icon-pick.is-active {
background: rgba(0, 127, 180, 0.18);
border-color: var(--c-primary-hi);
}
[data-theme="light"] .marker-icon-pick {
background: var(--bg);
color: var(--c-primary-dk);
}
[data-theme="light"] .marker-icon-pick.is-active {
background: rgba(0, 127, 180, 0.20);
}
.marker-icon-pick svg { display: block; }
/* 2026-06-30 (JP): kompakter Icon-Picker + Custom-Icon-Vollmenue. */
.marker-icon-pick--more { color: var(--text-muted); font-weight: 700; }
.marker-icon-pick--custom img { width: 26px; height: 26px; object-fit: contain; }
.icon-menu-section-label {
font-size: 12px;
color: var(--text-muted);
margin: 10px 0 6px;
text-transform: uppercase;
letter-spacing: .04em;
}
.icon-menu-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 6px;
}
.icon-menu-grid--custom { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.icon-menu-custom-tile { position: relative; display: inline-flex; }
.icon-menu-custom-tile .marker-icon-pick { width: 100%; }
.icon-menu-del {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--c-danger, #b91c1c);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 0;
}
.icon-menu-del:hover { filter: brightness(1.1); }
.icon-menu-empty, .icon-menu-loading {
grid-column: 1 / -1;
color: var(--text-muted);
font-size: 13px;
padding: 6px 2px;
}
.icon-menu-upload {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 8px 12px;
border: 1px dashed var(--border-hi);
border-radius: var(--radius-sm);
color: var(--c-primary);
cursor: pointer;
transition: background .12s, border-color .12s;
}
.icon-menu-upload:hover { background: var(--bg-card); border-color: var(--c-primary); }
.geolyser-custom-pin img { width: 30px; height: 30px; object-fit: contain; display: block; }
/* ============================================================
— Help-Btn gruen, brand-name groesser, etc.
============================================================ */
/* Help-Button gruen statt blau */
.topbar #help-btn {
background: rgba(2, 254, 137, 0.18) !important;
color: #007a3a !important;
border-color: rgba(2, 254, 137, 0.45) !important;
}
.topbar #help-btn:hover {
background: rgba(2, 254, 137, 0.32) !important;
color: #006a2c !important;
}
[data-theme="dark"] .topbar #help-btn {
color: #6dffb4 !important;
}
/* brand-name etwas groesser */
.topbar .wordmark, #brand-name {
font-size: 1.18em;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Login-Topbar Help-Btn ist raus - nur Theme bleibt. Falls noch im DOM,
* ausblenden. */
#login-help-btn { display: none !important; }
/* ============================================================
k — Mobile- und Tablet-Optimierung
Hauptziel Tablet (≤ 1024 px), Smartphone (≤ 540 px) als
"Funktioniert auch". Sidebars werden automatisch collapsed,
Modals nutzen mehr Bildschirm, Touch-Targets vergroessert.
============================================================ */
/* Tablet-Range: 540 - 1024 px */
@media (max-width: 1024px) {
/* Sidebar-Defaults auf "collapsed" - User kann sie aufklappen wenn
* gebraucht, aber Karte hat erstmal Vorrang. */
.sidebar { flex-basis: var(--sidebar-rail-w); width: var(--sidebar-rail-w); }
.features-panel { flex-basis: var(--sidebar-rail-w); width: var(--sidebar-rail-w); }
.sidebar:not(.sidebar--collapsed),
.features-panel:not(.features-panel--collapsed) {
/* Wenn der User explizit aufklappt, soll die Sidebar mehr Platz
* fressen (~40% statt 25%) damit der Inhalt lesbar ist. */
width: 40% !important;
flex-basis: 40% !important;
max-width: 360px;
}
/* Mobile-UI-Refresh : Modals im Mobile auf echtem Vollbild
* ohne abgerundete Ecken. Vorher 96vw mit 16px Margin -> "halb-
* abgerundet" mit Schwebe-Effekt, der bei Touch-Bedienung im Weg ist.
* Jetzt: 100vw x 100dvh, border-radius: 0, kein margin. modal-body
* scrollt intern, damit Header + Footer-Buttons immer sichtbar bleiben.
*
* Mobile-D-Fix : `.modal`-Wrapper hatte noch `padding: 24px`
* + Backdrop, dadurch war die Modal-Card nicht direkt am Screen-Rand
* sondern hatte 24px-Outer-Margin. Modal soll den Screen
* direkt ausfuellen, kein sichtbarer Backdrop-Ring. */
.modal {
padding: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.modal-card {
max-width: 100vw !important;
width: 100vw !important;
max-height: 100dvh !important;
height: 100dvh !important;
margin: 0 !important;
border-radius: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.modal-card > .modal-header,
.modal-card > .modal-footer {
flex-shrink: 0;
}
.modal-card > .modal-body,
.modal-card > .modal-form {
flex: 1 1 auto;
overflow-y: auto;
padding: 14px;
}
/* Topbar: schmaler, Brand-Wordmark gekuerzt. */
.topbar { padding: 6px 10px; }
.topbar #brand-name { font-size: 1em; }
/* Mobile-UI-Refresh * Touch-Target-Werte von 40/44 px auf 32 px reduziert. Knapp unter
* Apple-Empfehlung 44pt, aber fuer den taeglichen Daumen-Tap
* komfortabel. Falls zu klein -> Wert pro Klasse erhoehen, ohne den
* ganzen Block zu invalidieren. */
.leaflet-bar a {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
font-size: 18px !important;
}
.gps-tools-btn {
width: 32px;
height: 32px;
}
.leaflet-control-locate a .leaflet-control-locate-location-arrow {
width: 18px; height: 18px; margin: 7px;
}
/* Geoman-Toolbar: kleinere Buttons. */
.leaflet-pm-toolbar a {
width: 32px !important;
height: 32px !important;
}
/* Layers-Toggle: kleiner. */
.leaflet-control-layers-toggle {
width: 32px !important;
height: 32px !important;
background-size: 20px 20px !important;
}
}
/* Smartphone-Range: ≤ 540 px */
@media (max-width: 540px) {
/* Sidebars auf 90% wenn aufgeklappt (verdrucken die Karte komplett -
* das ist Absicht, weil sonst nichts mehr lesbar ist). */
.sidebar:not(.sidebar--collapsed),
.features-panel:not(.features-panel--collapsed) {
width: 92% !important;
flex-basis: 92% !important;
max-width: none;
position: absolute;
top: 0;
bottom: 0;
z-index: 1200;
}
.sidebar:not(.sidebar--collapsed) { left: 0; }
.features-panel:not(.features-panel--collapsed) { right: 0; }
/* Mobile-UI-Refresh : <=540px erbt jetzt die Vollbild-
* Werte aus dem 768px-Block (oben). Hier nur noch Touch-spezifische
* Anpassungen. */
/* Topbar: Logo + Wordmark + minimaler Abstand. Username-Pill muss
* trotzdem klickbar bleiben. */
.topbar { padding: 4px 6px; gap: 4px; }
.topbar #brand-name { display: none; }
.topbar .icon-btn {
width: 36px; height: 36px;
}
/* Login-Card padding auf Smartphone reduzieren. */
.login-card {
max-width: 92vw;
padding: 24px 18px;
}
/* GPS-Status oberhalb statt unteres Viertel mittig - damit kein
* Overlap mit den GPS-Tools links unten. */
.gps-tools-status.gps-tools-status--center {
bottom: 28%;
max-width: 92%;
font-size: 0.95em;
padding: 8px 12px;
}
/* Mobile-F-Fix : Map-Status (Coords + GPS-Accuracy) wieder
* an die ORIGINAL-Position oben mittig — die Mobile-D-Variante
* "rechts unten" wurde im Portrait von der Scale-Bar / niedrigem
* z-index ueberdeckt. Konsistenter ist die Original-Top-Center-
* Position, hier mit dunklerem Background fuer Lesbarkeit + hoher
* z-Index damit es ueber Leaflet-Controls liegt. */
.map-status {
font-size: 11px !important;
padding: 3px 10px !important;
top: 8px !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateX(-50%) !important;
background: rgba(0, 0, 0, 0.65) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 6px !important;
pointer-events: none !important;
/* Mobile-N-Fix : z-index unter den auf 1200 sitzenden
* Sidebars (.sidebar / .features-panel) — JP sah die GPS-Status-
* Pille vorher durch das aufgeklappte Sidepanel durchscheinen. */
z-index: 1100 !important;
}
.map-status-coords { color: #fff !important; }
.map-status-accuracy { color: #4cd2ff !important; }
/* Image-Slots (Feature-Edit-Modal) auf Smartphone in 3 Spalten,
* sonst zu schmal. */
.image-slots {
grid-template-columns: repeat(3, 1fr) !important;
}
/* Marker-Icon-Picker: 4 Spalten statt 6. */
.marker-icon-picker {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* Mobile-E-Fix * Circle-Button-Versuch zurueckgenommen — sah komisch aus, war
* dauer-eingeblendet, und Drag funktionierte trotzdem nicht.
* Im 768px-Block bewusst KEINE .resizable-handle-Regel mehr —
* Default-Style greift (kleiner Original-Handle mit 3-Punkten).
* Tablet-Anpassung (groessere Touch-Zone): siehe @media-Block
* (min-width:541px) and (max-width:1024px) weiter unten.
* Smartphone (<540px) Handle-Hide: separater Block weiter unten. */
/* Datenschutz/Impressum-Pill rechts unten: kleiner, weiter weg. */
.map-legal-links {
font-size: 10px;
padding: 1px 6px;
}
}
/* Touch-spezifische Tweaks (kein Hover) */
@media (hover: none) {
/* Hover-States verwirren auf Touch-Geraeten oft - reduzieren. */
.leaflet-bar a:hover { background: var(--bg-elevated); }
.gps-tools-btn:hover:not(:disabled) { background: var(--bg-elevated); }
/* Mobile-E-Fix : Resize-Handle-Circle-Btn aus Mobile-D
* rueckgaengig gemacht (sah komisch aus). Kein ::before-Override
* mehr noetig. Tablet-Touch-Resize wird unten in
* (min-width:541px) and (max-width:1024px) Touch-tauglich gemacht;
* Smartphone-Range (<540px) wird Resize komplett deaktiviert. */
}
/* Mobile-E-Fix : Smartphone (<540px) — Resize-Handle komplett
* aus, spart den 24px-Rand. Drag wird sowieso vom Daumen oft falsch
* getriggert; Sidebars haben auf Smartphones eh feste Width (siehe
* 540px-Block, .sidebar:not(.sidebar--collapsed) { width: 92% }).
* Mobile-G3-Fix : zusaetzlich Map-Search-Toggle auf 28px
* verkleinert (Desktop/Tablet bleibt 32, Smartphone braucht es kompakter). */
@media (max-width: 540px) {
.resizable-handle {
display: none !important;
}
/* Mobile-G5-Fix : Smartphone-Override fuer Map-Search-Toggle
* wurde rueckgaengig gemacht — Default-Groesse 32x32 gilt jetzt
* ueberall (siehe Default-Block der `.map-search-toggle`). */
}
/* Mobile-E-Fix : Tablet-Range (541-1024px) — Resize-Handle
* sichtbar, etwas breiter als Desktop-Default fuer Touch-Treffer mit
* dem Finger. Die ORIGINAL .resizable-grip mit den 3 Punkten bleibt
* sichtbar als visuelles Signal. */
@media (min-width: 541px) and (max-width: 1024px) {
.resizable-handle {
width: 16px !important;
right: -8px !important;
touch-action: none;
}
.resizable-handle--left {
right: auto !important;
left: -8px !important;
}
.resizable-grip {
opacity: 0.55 !important;
}
}
/* ---------------------------------------------------------------------
* Layer-Lade-Modal
* ------------------------------------------------------------------- */
.load-modal-toolbar {
display: flex; align-items: center; gap: 12px;
padding: 8px 0 12px;
/* position:relative, damit die absolut positionierten
Filter-Popover (.lm-filter-popover) sich auf die Toolbar als
containing block beziehen — nicht aufs naechste position:relative
Eltern-Element irgendwo weiter oben. */
position: relative;
}
/* Lade-Modal-Filter-Popover unterhalb des Chips,
ueber der Liste schwebend. */
.lm-filter-popover {
position: absolute;
top: calc(100% - 4px);
right: 0;
z-index: 1300;
min-width: 380px;
background: var(--bg-card, #fff);
border: 1px solid var(--border, #ccc);
border-radius: 6px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
padding: 12px;
}
/* Dark-Mode-Hintergrund fuer Filter-Popover analog zum
Modal-Header/Footer . Gilt sowohl fuer das Layers-Modal-
Filter-Popover als auch das DB-Modal-Filter-Popover, damit das Layout
ueberall einheitlich ist. var(--bg-card) ist im Dark-Mode oft semi-
transparent — das wirkte hier mit der semi-transparenten Modal-Card
doppelt durchscheinend. */
[data-theme="dark"] .lm-filter-popover,
[data-theme="dark"] .features-panel-popover.db-filter-popover {
background: #272D31;
border-color: rgba(255, 255, 255, 0.12);
}
/* polish runde 5: Search-Input hatte den selben BG wie das
Modal - das war im hellen UND dunklen Theme schwer zu unterscheiden.
Jetzt ein Tick dunkler/heller als die Modal-Card, damit das Input
visuell klar als interaktives Element auftaucht. */
.load-modal-search {
flex: 1 1 auto;
height: 36px;
padding: 0 12px;
border: 1px solid var(--border-hi);
border-radius: 6px;
background: var(--bg-page);
color: var(--fg);
font-size: 14px;
transition: border-color .12s ease, background .12s ease;
}
.load-modal-search:hover { border-color: var(--c-primary-hi); }
.load-modal-search:focus {
outline: 2px solid var(--c-primary);
outline-offset: -1px;
border-color: var(--c-primary);
}
[data-theme="light"] .load-modal-search {
background: #f1f4f7;
border-color: #c8cfd6;
}
[data-theme="light"] .load-modal-search:focus {
background: #fff;
}
/* Dark-Mode-Background analog DB-Modal-Search-Input
im Dark-Mode . var(--bg-page) wirkte vorher zu transparent
gegenueber der Modal-Card. */
[data-theme="dark"] .load-modal-search {
background: #0D1214;
border-color: rgba(255, 255, 255, 0.18);
}
.load-modal-count { white-space: nowrap; }
.load-modal-list {
list-style: none; margin: 0; padding: 0;
max-height: 60vh; overflow-y: auto;
border-top: 1px solid var(--c-border);
}
.load-modal-row {
display: grid;
/* alle Spalten ausser Name auf FIXE px-Breite, damit
die Action-Buttons und das Datum ueber alle Zeilen exakt vertikal
ausgerichtet sind — egal ob die Zeile Coworker-Avatare hat, ob
der Layer-Name lang oder kurz ist, oder ob das Feature-Count eine
oder mehrere Stellen hat. fr-Spalten waren das Problem: ihr
min-content vergroessert die Spalte automatisch, was die
nachfolgenden Spalten verschoben hat.
Spalten: checkbox / swatch / name (flex) / creator / meta(N
Features) / datum / presence / actions. */
grid-template-columns: 18px 14px minmax(140px, 1fr) 100px 100px 140px 96px 80px;
gap: 10px; align-items: center;
padding: 6px 10px;
border-bottom: 1px solid var(--border);
font-size: 0.9rem;
}
.load-modal-row:not(.load-modal-row--header):hover {
background: var(--input-bg);
}
.load-modal-row .layer-presence-stack {
justify-self: start;
overflow: hidden;
max-width: 100%;
}
/* globaler `:empty { display: none }` (Z3270) wuerde
den leeren Presence-Placeholder im Layers-Modal unsichtbar machen,
wodurch die Grid-Spalte zusammenbricht und die Action-Buttons in
die Presence-Spalte rutschen. Im Layers-Modal-Kontext ueberschreiben
wir das, sodass auch leere Placeholder ihren Spalten-Slot halten. */
.load-modal-row .layer-presence-stack:empty {
display: inline-flex;
min-width: 1px;
}
/* Action-Spalte ist 80px breit, beide 28x28-Btns + 4px Gap
passen gerade rein. Rechtsbuendig damit der Trash- bzw. Cloud-Btn
immer am rechten Rand der Spalte sitzt. */
.load-modal-row .load-modal-actions {
display: inline-flex;
gap: 4px;
justify-self: end;
}
.load-modal-name-cell {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.load-modal-name-cell .load-modal-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.load-modal-date {
font-size: 0.85em;
color: var(--muted, #888);
white-space: nowrap;
}
/* Per-Row-Action-Buttons im Layer-Modal — kompakte
28x28 Icon-Btns, einheitliche Optik (Load=+, Unload=-, Export=Cloud-
Download). Damit ist die Action-Spalte schmal und stoert das Spalten-
Layout nicht. !important weil .ghost und .icon-btn-Pads sonst die
Box durch hohe Spezifizierungs-Konkurrenz vergroessern. */
.load-modal-row-btn,
.load-modal-actions .load-modal-row-btn,
button.load-modal-row-btn.ghost.icon-btn {
width: 28px !important;
height: 28px !important;
padding: 0 !important;
min-width: 28px !important;
min-height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 0 !important;
}
.load-modal-row-btn img,
.load-modal-row-btn svg {
display: block;
}
/* Button-Farb-Modifier. is-success = grünlich,
is-coral = orangerot. Werden u.a. fuer Load (gruen) und Unload (coral)
im Layers-Modal sowie row-attach-active (gruen) im DB-Modal genutzt. */
.btn-success,
button.btn-success.ghost.icon-btn {
background: rgba(76, 175, 80, 0.15);
color: #4CAF50;
border-color: rgba(76, 175, 80, 0.55);
}
.btn-success:hover,
button.btn-success.ghost.icon-btn:hover {
background: rgba(76, 175, 80, 0.28);
border-color: rgba(76, 175, 80, 0.80);
color: #67c66a;
}
/* Amber-Variante (Remove-from-Layer im DB-Panel) analog
zu btn-success. Gleicher Amber-Ton wie bei layer-badge--dirty. */
.btn-amber,
button.btn-amber.ghost.icon-btn {
background: rgba(201, 138, 0, 0.15);
color: var(--c-amber, #c98a00);
border-color: rgba(201, 138, 0, 0.55);
}
.btn-amber:hover,
button.btn-amber.ghost.icon-btn:hover {
background: rgba(201, 138, 0, 0.28);
border-color: rgba(201, 138, 0, 0.80);
color: #e6a627;
}
.btn-coral,
button.btn-coral.ghost.icon-btn {
background: rgba(255, 127, 80, 0.15);
color: #ff7f50;
border-color: rgba(255, 127, 80, 0.55);
}
.btn-coral:hover,
button.btn-coral.ghost.icon-btn:hover {
background: rgba(255, 127, 80, 0.28);
border-color: rgba(255, 127, 80, 0.80);
color: #ff9670;
}
/* Cyan-Variante (Edit/BulkEdit im DB-Modal)
* analog zu btn-success/btn-amber. Geolyser-CI-Cyan #3BBDE8. Wird
* fuer Edit-Aktionen genutzt — Konsistenz mit Sidebar/Sidepanel. */
.btn-cyan,
button.btn-cyan.ghost.icon-btn {
background: rgba(59, 189, 232, 0.15);
color: var(--c-cyan, #3BBDE8);
border-color: rgba(59, 189, 232, 0.55);
}
.btn-cyan:hover,
button.btn-cyan.ghost.icon-btn:hover {
background: rgba(59, 189, 232, 0.28);
border-color: rgba(59, 189, 232, 0.80);
color: #5acef0;
}
/* klickbare Variante des Color-Swatch im Lade-Modal. */
.load-modal-swatch--btn {
border: 0;
cursor: pointer;
padding: 0;
position: relative;
}
.load-modal-swatch--btn:hover { outline: 2px solid var(--c-primary, #06829c); }
.load-modal-recolor-pop {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 1500;
display: flex;
gap: 4px;
padding: 6px;
border-radius: 6px;
background: var(--bg-card, #fff);
border: 1px solid var(--c-border, #ccc);
box-shadow: 0 6px 18px rgba(0,0,0,0.20);
}
.load-modal-recolor-pick {
width: 18px; height: 18px;
border-radius: 3px;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
}
.load-modal-recolor-pick.is-active { border-color: #000; }
[data-theme="dark"] .load-modal-recolor-pick.is-active { border-color: #fff; }
/* Klickbarer Name -> Inline-Rename. */
.load-modal-name--btn {
background: transparent;
border: 0;
text-align: left;
color: inherit;
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
}
.load-modal-name--btn:hover {
background: rgba(0,0,0,0.05);
}
[data-theme="dark"] .load-modal-name--btn:hover {
background: rgba(255,255,255,0.06);
}
.load-modal-name-edit {
/* War weiss-auf-weiss im Dark-Mode.
Root-cause: --bg-input existiert nicht (richtiger Name ist
--input-bg), also griff der Fallback #fff. Und color war
nicht gesetzt, daher inheritance vom Parent (light text im
dark theme) -> weiss auf weiss. Fix: korrekter Variable-Name
+ expliziter Fallback #0d1214, plus color: var(--fg). */
font: inherit;
padding: 2px 4px;
border: 1px solid var(--c-primary, #06829c);
border-radius: 3px;
background: var(--input-bg, #0d1214) !important;
color: var(--fg, #eef3f6) !important;
}
/* Creator-Name als kleine Spalte. */
.load-modal-creator {
font-size: 0.85em;
color: var(--muted, #888);
white-space: nowrap;
max-width: 14ch;
overflow: hidden;
text-overflow: ellipsis;
}
.load-modal-row.is-checked {
background: rgba(0, 204, 255, 0.10);
}
/* Header-Row mit sortierbaren Spalten — Background +
Color angeglichen an .trash-table th. Sticky bleibt, damit beim
Scrollen die Spalten-Header sichtbar bleiben. */
.load-modal-row--header {
background: var(--input-bg);
color: var(--muted-hi);
font-weight: 600;
position: sticky;
top: 0;
z-index: 2;
}
.load-modal-row--header .load-modal-swatch--header {
background: transparent;
border: none;
}
.load-modal-sort-btn {
background: transparent;
border: 0;
text-align: left;
color: inherit;
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
font: inherit;
font-weight: 600;
}
.load-modal-sort-btn:hover {
background: rgba(0,0,0,0.05);
}
[data-theme="dark"] .load-modal-sort-btn:hover {
background: rgba(255,255,255,0.06);
}
/* Lade-Modal-Variante des Avatar-Stacks: gleiche Chip-Optik, nur ohne
den linken Innenabstand der Sidebar (Grid-Gap reicht hier). */
.load-modal-row .load-modal-presence {
padding: 0;
margin: 0;
}
.load-modal-row:last-child { border-bottom: none; }
.load-modal-swatch {
width: 14px; height: 14px;
border-radius: 3px;
background: var(--swatch, var(--c-primary));
box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.load-modal-name {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 600;
}
.load-modal-meta { font-size: 12px; color: var(--c-fg-muted); white-space: nowrap; }
.load-modal-badge {
font-size: 11px; padding: 2px 8px;
border-radius: 999px;
background: var(--c-success-bg, rgba(46, 160, 67, .15));
color: var(--c-success-fg, #2ea043);
font-weight: 600;
/* polish runde 9: feste Breite damit das Layout beim
Toggle stabil bleibt - "geladen" ist 7 Zeichen, ~64px reicht. */
min-width: 64px; text-align: center;
}
.load-modal-badge.is-hidden {
visibility: hidden;
}
/* "fremd"-Badge fuer Workspace-Layer anderer User. */
.load-modal-badge.load-modal-badge--foreign {
background: var(--bg-elevated, rgba(0, 0, 0, 0.08));
color: var(--muted-hi, #666);
margin-left: 6px;
font-style: italic;
font-weight: 500;
}
[data-theme="dark"] .load-modal-badge.load-modal-badge--foreign {
background: rgba(255, 255, 255, 0.12);
color: #ccc;
}
.load-modal-row--foreign .load-modal-swatch {
opacity: 0.7;
}
.load-modal-actions { display: flex; gap: 6px; align-items: center; }
/* polish runde 8: Laden- und Entfernen-Btn auf identische
Breite + Hoehe normieren, damit der Layer-Eintrag beim Toggle
nicht visuell springt. */
.load-modal-actions [data-action="load"],
.load-modal-actions [data-action="unload"] {
min-width: 110px;
height: 32px;
padding: 0 12px;
justify-content: center;
}
.load-modal-empty { padding: 20px; text-align: center; }
.modal-actions--column {
flex-direction: column !important;
align-items: stretch;
gap: 8px;
}
.modal-actions--column > button { width: 100%; }
/* Export-Format-Modal: Buttons (".geolyser ZIP", "GeoJSON", "GPKG"
etc.) sollen in Dark- und Light-Mode klar lesbar sein. .primary hat
bereits color: var(--c-light) (weiss), aber wir setzen es explizit
damit kein anderer Selektor das ueberschreibt. */
#export-format-modal .modal-actions button.primary {
color: var(--c-light, #fff);
}
#export-format-modal .modal-actions button.primary:hover {
color: var(--c-light, #fff);
}
/* Sidebar-Rail "Layer laden"-Button. */
.sidebar-rail-load {
border: none; background: transparent; cursor: pointer;
color: var(--c-fg-muted);
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border-radius: 6px;
margin-top: 4px;
}
.sidebar-rail-load:hover { background: var(--bg-elevated); color: var(--c-fg); }
/* Layer-Sharing-Tab (Admin-Modal): "schon vorhanden" abgedimmt. */
.trash-table tr.is-disabled { opacity: 0.55; }
/* Bulk-Tags-Bar im DB-Modal-Footer. */
.db-bulk-tags-bar {
display: flex; flex-wrap: wrap; gap: 12px;
align-items: center;
padding: 10px 16px;
border-top: 1px solid var(--c-border);
background: var(--bg-elevated);
}
.db-bulk-tags-bar label {
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; color: var(--c-fg-muted);
}
.db-bulk-tags-bar input[type="text"] {
height: 32px; padding: 0 10px;
border: 1px solid var(--c-border); border-radius: 4px;
background: var(--bg-input, var(--bg-elevated)); color: var(--c-fg);
font-size: 13px; min-width: 220px;
}
.db-export-format {
height: 32px; padding: 0 8px;
border: 1px solid var(--c-border); border-radius: 4px;
background: var(--bg-input, var(--bg-elevated)); color: var(--c-fg);
font-size: 13px;
}
.db-import-tags {
height: 32px; padding: 0 10px;
border: 1px solid var(--c-border); border-radius: 4px;
background: var(--bg-input, var(--bg-elevated)); color: var(--c-fg);
font-size: 13px;
}
/* ---------------------------------------------------------------------
* Polish: Admin-Tabellen vertikal zentriert, Profile-Modal
* breiter, Buttons in den Tabellen kompakter.
* ------------------------------------------------------------------- */
/* Profile-Modal default so breit wie das Admin-Einstellungen-Modal. */
#profile-modal .modal-card {
max-width: 980px;
width: 95%;
}
/* Admin-Tabellen: alle Zellen vertikal mittig, gleiche Hoehe ueber
Text/Icons/Buttons/Checkboxes/Selects. */
#admin-modal .trash-table th,
#admin-modal .trash-table td,
#admin-modal .admin-users-table th,
#admin-modal .admin-users-table td {
vertical-align: middle;
padding: 8px 10px;
line-height: 1.4;
}
#admin-modal .trash-table td button,
#admin-modal .trash-table td select,
#admin-modal .trash-table td input[type="checkbox"],
#admin-modal .admin-users-table td button,
#admin-modal .admin-users-table td select,
#admin-modal .admin-users-table td input[type="checkbox"] {
vertical-align: middle;
}
/* Tabellen-Buttons kompakter: nur das wichtigste, kein riesiges Padding. */
#admin-modal .trash-table td .ghost,
#admin-modal .trash-table td .primary,
#admin-modal .trash-table td .ghost.danger,
#admin-modal .admin-users-table td .ghost,
#admin-modal .admin-users-table td .primary,
#admin-modal .admin-users-table td .ghost.danger {
height: 32px;
padding: 0 12px;
font-size: 13px;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 4px;
}
/* Action-Cell mit mehreren Buttons: gleichmaessiger Abstand, kein Wrap. */
.admin-users-row-actions {
display: flex;
gap: 6px;
flex-wrap: nowrap;
align-items: center;
}
/* Code-URL nicht ueberlaufen. */
#admin-modal .trash-table td code {
font-size: 12px;
word-break: break-all;
}
/* Active-Checkbox in Users-Tabelle in der Mitte zentrieren. */
.admin-users-table td:has(input[type="checkbox"]) {
text-align: center;
}
/* ---------------------------------------------------------------------
* polish: DB-Modal-Refactor (3 Buttons unter Liste, Import
* separat, Auswahl-editieren / Export / Import als eigene Modals).
* ------------------------------------------------------------------- */
.db-import-row {
display: flex; align-items: center; gap: 12px;
padding: 6px 16px;
border-bottom: 1px solid var(--c-border);
}
.modal-footer--compact {
padding: 10px 16px;
gap: 8px;
}
.modal-footer--compact .ghost,
.modal-footer--compact .primary {
height: 34px;
padding: 0 14px;
font-size: 13px;
}
.bulk-edit-toolbar {
display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
padding: 10px 16px;
border-bottom: 1px solid var(--c-border);
}
.bulk-edit-toolbar label {
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; color: var(--c-fg-muted);
}
.bulk-edit-toolbar input[type="text"],
.bulk-edit-toolbar select,
.bulk-edit-toolbar input[type="date"] {
height: 32px; padding: 0 10px;
border: 1px solid var(--border); border-radius: 4px;
/* explizit input-bg + fg, sonst hatten Inputs im
Dark-Mode fast denselben Hintergrund wie der Body und waren
schwer lesbar. */
background: var(--input-bg, var(--bg-elevated, #fff));
color: var(--fg, #111);
font-size: 13px; min-width: 220px;
}
.bulk-edit-toolbar button.ghost,
.bulk-edit-toolbar button.primary {
background: var(--bg-card);
color: var(--fg);
border: 1px solid var(--border);
}
.bulk-edit-toolbar button.primary {
background: var(--c-primary, #007fb4);
color: #fff;
border-color: var(--c-primary, #007fb4);
}
.bulk-edit-color-tiles {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 4px;
}
/* Bulk-Add-Block symmetrisch zum Remove-Block - Chips
oben, Input-Feld darunter. */
.bulk-edit-add-block {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 220px;
min-width: 200px;
}
.bulk-edit-add-chips {
display: flex; flex-wrap: wrap; gap: 4px;
min-height: 32px;
padding: 4px;
border: 1px dashed var(--border);
border-radius: 4px;
background: var(--input-bg, var(--bg-elevated, #fff));
}
.bulk-edit-add-chip {
display: inline-flex;
align-items: stretch;
background: var(--c-primary, #007fb4);
color: #fff;
border-radius: 999px;
font-size: 0.85em;
overflow: hidden;
}
.bulk-edit-add-chip-body {
background: transparent;
color: inherit;
border: none;
padding: 2px 4px 2px 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.bulk-edit-add-chip-body:hover { filter: brightness(1.1); }
.bulk-edit-add-chip-x {
background: rgba(0, 0, 0, 0.18);
color: inherit;
border: none;
padding: 2px 8px;
cursor: pointer;
font-weight: bold;
}
.bulk-edit-add-chip-x:hover { background: rgba(0, 0, 0, 0.32); }
.bulk-edit-add-chip-swatch {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.5);
}
.bulk-edit-add-chip-swatch--none {
background:
repeating-linear-gradient(45deg,
rgba(255,255,255,0.3) 0 2px,
rgba(0,0,0,0.0) 2px 4px);
}
.bulk-edit-add-input {
height: 32px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--input-bg, var(--bg-elevated, #fff));
color: var(--fg, #111);
font-size: 13px;
}
.bulk-edit-list,
.import-preview-list {
list-style: none; margin: 0; padding: 0;
max-height: 60vh; overflow-y: auto;
}
.bulk-edit-list li,
.import-preview-list li {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 10px; align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--c-border);
}
.bulk-edit-list li:last-child,
.import-preview-list li:last-child { border-bottom: none; }
.import-preview-name {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 500;
}
.import-preview-name input[type="text"] {
flex: 1; min-width: 240px;
height: 28px; padding: 0 8px;
border: 1px solid transparent; border-radius: 4px;
background: transparent; color: var(--c-fg);
font-size: 14px;
}
.import-preview-name input[type="text"]:hover,
.import-preview-name input[type="text"]:focus {
border-color: var(--c-border);
background: var(--bg-input, var(--bg-elevated));
outline: none;
}
.import-preview-tags {
display: flex; flex-wrap: wrap; gap: 4px;
font-size: 12px;
}
.import-modal-settings {
padding: 12px 16px;
border-bottom: 1px solid var(--c-border);
}
.import-modal-settings label {
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; color: var(--c-fg-muted);
}
.import-modal-settings input[type="text"] {
height: 32px; padding: 0 10px;
border: 1px solid var(--c-border); border-radius: 4px;
background: var(--bg-input, var(--bg-elevated)); color: var(--c-fg);
font-size: 13px; max-width: 320px;
}
/* ============================================================
polish runde 7 - Design-Polish-Sammelblock
============================================================ */
/* Bulk-Edit "Tags entfernen" als Chip-Picker (statt Free-Text). */
.bulk-edit-remove-block {
display: flex; flex-direction: column; gap: 6px;
flex: 1 1 220px;
}
.bulk-edit-remove-block > span {
font-size: 0.85em; color: var(--muted-hi);
}
.bulk-edit-remove-chips {
display: flex; flex-wrap: wrap; gap: 6px;
min-height: 36px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-page);
align-items: center;
}
[data-theme="light"] .bulk-edit-remove-chips {
background: #f1f4f7;
border-color: #c8cfd6;
}
.bulk-edit-remove-chip {
background: var(--bg-elevated);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 10px;
font-size: 0.85em;
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.bulk-edit-remove-chip:hover {
border-color: var(--c-error);
color: var(--c-error);
}
.bulk-edit-remove-chip.is-active {
background: var(--c-error);
color: var(--c-light);
border-color: var(--c-error);
}
/* Modal-Close-Btn (X oben rechts): klar als Button hervorgehoben in
beiden Themes - frueher unauffaellig grau.
polish runde 9: ROT-Outline schon im Ruhezustand damit der
Btn eindeutig als "Schliessen"-Aktion lesbar ist. */
.modal-close-btn {
width: 32px; height: 32px;
border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-error-bg) !important;
color: var(--c-error) !important;
border: 1px solid var(--c-error) !important;
transition: background .12s, color .12s, border-color .12s;
}
.modal-close-btn:hover {
background: var(--c-error) !important;
color: var(--c-light) !important;
border-color: var(--c-error) !important;
}
[data-theme="light"] .modal-close-btn {
background: #ffe5e7 !important;
color: #b00020 !important;
border-color: #b00020 !important;
}
[data-theme="light"] .modal-close-btn:hover {
background: #b00020 !important;
color: #fff !important;
border-color: #b00020 !important;
}
/* Import-Modal Inputs: deutlich anderer BG als das Modal selbst -
gleich wie der Lade-Modal-Search-Input aus Runde 5. */
.import-modal-settings input[type="text"] {
border: 1px solid var(--border-hi);
background: var(--bg-page);
}
.import-modal-settings input[type="text"]:focus {
outline: 2px solid var(--c-primary);
outline-offset: -1px;
border-color: var(--c-primary);
}
[data-theme="light"] .import-modal-settings input[type="text"] {
background: #f1f4f7;
border-color: #c8cfd6;
}
[data-theme="light"] .import-modal-settings input[type="text"]:focus {
background: #fff;
}
/* Dark-Mode-Background analog zu den anderen
Input-Feldern im Dark-Mode . var(--bg-page) wirkte vorher
inkonsistent gegenueber den uebrigen Modal-Inputs. */
[data-theme="dark"] .import-modal-settings input[type="text"] {
background: #0D1214;
border-color: rgba(255, 255, 255, 0.18);
}
/* Save-Options-Modal: Buttons in column-layout sind alle konsistent
gross + zentriert. Die Discard-Action liegt visuell separiert vom
Speichern-Block durch margin-top. Die "Original verwerfen"-Checkbox
sitzt direkt unter den Save-Buttons als Modifier. */
#save-options-modal .modal-actions--column { gap: 8px; }
#save-options-modal .modal-actions--column > button {
height: 40px;
width: 100%;
justify-content: center;
padding: 0 14px;
}
#save-options-modal #save-options-discard-original-row {
margin: 4px 0 4px 4px;
font-size: 0.9em;
color: var(--muted-hi);
display: flex; align-items: center; gap: 6px;
}
/* Verwerfen-Button durch Margin-Abstand separiert (nicht durch
border auf dem Btn selbst, das macht das Padding kaputt). */
#save-options-modal [data-action="discard"] {
margin-top: 14px;
position: relative;
}
#save-options-modal [data-action="discard"]::before {
content: "";
position: absolute;
top: -8px; left: 0; right: 0;
border-top: 1px solid var(--border);
}
/* Confirm-Card (zB "Nutzer loeschen?", "Papierkorb leeren?"): Buttons
zentriert, etwas groesser - JP wollte sie weg vom rechten Rand.
polish runde 9: justify-content: center statt flex-end. */
.confirm-card .modal-actions {
margin-top: 20px;
gap: 12px;
justify-content: center;
}
.confirm-card .modal-actions button {
min-width: 120px;
height: 38px;
}
/* Right Sidepanel (Datenbank) im Light-Mode etwas blauer, damit
sich die Sidebar visuell vom Map-Hintergrund abhebt. */
[data-theme="light"] .features-panel {
background: linear-gradient(180deg, #eaf1f8 0%, #e3ecf4 100%);
border-left: 1px solid #c1ced9;
}
[data-theme="light"] .features-panel-rail {
background: #dde7f0;
border-left: 1px solid #c1ced9;
}
[data-theme="light"] .features-panel-head {
border-bottom: 1px solid #c1ced9;
}
/* polish runde 9: Mini-Map fuer Geometrie-Edit im Feature-
Modal. Aspect-Ratio + dunklerer Border damit der Map-Block sich
klar von den anderen Form-Feldern absetzt. Geoman-Toolbar wird
ueber pmIgnore/Klick-Toggle gesteuert (siehe map.js). */
.feature-geomedit-mini {
width: 100%;
height: 220px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-hi);
background: var(--bg-page);
overflow: hidden;
margin-top: 4px;
}
.feature-geomedit-toggle {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--muted-hi);
padding: 2px 8px;
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.feature-geomedit-toggle:hover {
background: var(--bg-card);
color: var(--fg);
border-color: var(--border-hi);
}
.feature-geomedit-toggle.is-active {
background: var(--c-primary);
color: var(--c-light);
border-color: var(--c-primary-dk);
}
.feature-geomedit-hint { color: var(--muted); }
/* DB-Vollansicht "Mehr laden"-Btn am Tabellenende. */
.db-load-more-wrap {
display: flex; justify-content: center;
padding: 14px 0 6px;
}
.db-load-more {
min-width: 200px;
}
/* ============================================================
— GCP- + ArUco-Capture-Modal
============================================================ */
.gcp-capture-body {
display: flex; flex-direction: column; gap: 14px;
padding: 12px 0;
}
.gcp-capture-list {
list-style: none; margin: 0; padding: 0;
max-height: 50vh; overflow-y: auto;
border-top: 1px solid var(--border);
}
/* GCP-Live-Layer (2026-06-11): Zeile von 3-Spalten-Grid auf Flex
umgestellt - es gibt jetzt optional ein ArUco-Thumb vor der Nummer,
einen Name+Koordinaten-Block und rechts die Aktions-Buttons
(Edit / Quick-Foto / Entfernen). */
.gcp-list-row {
display: flex;
gap: 10px; align-items: center;
padding: 8px 4px;
border-bottom: 1px solid var(--border);
}
.gcp-list-row:last-child { border-bottom: none; }
.gcp-list-num {
flex: 0 0 auto;
font-weight: 600;
font-size: 1.05em;
color: var(--c-primary-hi);
}
.gcp-list-main {
flex: 1 1 auto;
min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.gcp-list-name {
font-weight: 600;
font-size: 0.92em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gcp-list-coords {
font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
font-size: 0.85em;
}
.gcp-list-actions {
flex: 0 0 auto;
display: flex; align-items: center; gap: 2px;
}
/* Mini-ArUco-Vorschau in der Listen-Zeile (nur ArUco-Modus). */
.gcp-list-aruco {
flex: 0 0 auto;
width: 28px; height: 28px;
background: #fff;
padding: 2px; box-sizing: border-box;
border: 1px solid var(--border);
border-radius: 3px;
}
/* Quick-Foto-Btn: Badge mit Bild-Anzahl oben rechts am Button. */
.gcp-photo-btn { position: relative; }
.gcp-photo-badge {
position: absolute;
top: -4px; right: -4px;
background: var(--c-primary);
color: #fff;
border-radius: 999px;
min-width: 15px; height: 15px;
padding: 0 3px;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700;
pointer-events: none;
}
/* ArUco-Map-Marker (features.js dropPinIcon, slug "aruco-N"):
Mini-Version des echten ArUco-Markers, weisser Rand als Quiet-Zone,
zentriert auf dem Messpunkt. */
.geolyser-aruco-pin img {
display: block;
width: 26px; height: 26px;
background: #fff;
padding: 2px; box-sizing: border-box;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
image-rendering: pixelated;
}
.gcp-capture-empty {
text-align: center;
padding: 24px 16px;
color: var(--muted);
font-style: italic;
}
/* ArUco-Slot-Grid: 3 Spalten x 2 Zeilen, klickbare Bilder. */
.aruco-slots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 4px;
}
/* Das display:grid oben hat sonst das
hidden-Attribut ueberstimmt — nach einer ArUco-Session blieben die
Slots beim Re-Open in GCP-Modus sichtbar. */
.aruco-slots[hidden] { display: none; }
.aruco-slot {
position: relative;
background: var(--bg-page);
border: 2px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px;
cursor: pointer;
transition: border-color .12s, transform .08s;
}
.aruco-slot:hover { border-color: var(--c-primary-hi); }
.aruco-slot:active { transform: scale(0.97); }
.aruco-slot.is-filled {
border-color: var(--c-primary);
background: rgba(0, 179, 104, 0.10);
}
.aruco-slot img {
display: block;
width: 100%; height: auto;
pointer-events: none;
}
.aruco-slot-num {
position: absolute;
top: 4px; left: 6px;
background: var(--bg-elevated);
color: var(--fg);
border-radius: 50%;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.aruco-slot-check {
position: absolute;
bottom: 4px; right: 6px;
background: var(--c-primary);
color: #fff;
border-radius: 50%;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700;
}
[data-theme="light"] .aruco-slot {
background: #f1f4f7;
}
.gcp-capture-add {
border-color: var(--c-primary) !important;
color: var(--c-primary-hi) !important;
}
.gcp-capture-add:hover {
background: rgba(0, 179, 104, 0.10) !important;
}
/* 2026-06-29 (JP): Footer-Layout. Aufnahme-Button links (gross), rechts
* die Icon-Buttons Export + Speichern (je 40x40). */
.gcp-capture-footer {
display: flex;
align-items: center;
gap: 8px;
}
.gcp-capture-footer-right {
display: flex;
align-items: center;
gap: 8px;
/* immer rechtsbuendig — auch wenn der Aufnahme-Button (GCP) fehlt,
* weil er im ArUco-Modus ausgeblendet ist. */
margin-left: auto;
}
.gcp-capture-add {
width: 80px;
height: 40px;
min-width: 80px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.gcp-capture-export,
.gcp-capture-save {
width: 40px;
height: 40px;
min-width: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.gcp-capture-export svg,
.gcp-capture-save svg { display: block; }
/* X-Schliessen-Button im GCP/ArUco-Modal vereinheitlicht (dunkelrot,
* weisses X, Hover leuchtet auf) — analog zur Lightbox. id-Scope schlaegt
* die globalen .modal-close-btn-!important-Regeln. */
#gcp-capture-modal .modal-close-btn {
background: #8a1414 !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
#gcp-capture-modal .modal-close-btn:hover {
background: #e23b2e !important;
border-color: #ff8088 !important;
color: #fff !important;
box-shadow: 0 0 12px rgba(226, 59, 46, 0.7) !important;
}
/* Sidebar-Buttons fuer GCP + ArUco-Capture-Modi.
Farben matched die Layer-Farben der angelegten Sets (siehe
gcp-capture-modal.js): rose fuer GCP, teal fuer ArUco. */
.sidebar-gcp-accent {
/* rose / pink - matched Palette-Slug "rose" #EC4899 */
background: rgba(236, 72, 153, 0.16) !important;
color: #be185d !important;
border-color: rgba(236, 72, 153, 0.45) !important;
}
.sidebar-gcp-accent:hover {
background: rgba(236, 72, 153, 0.28) !important;
color: #9d174d !important;
}
[data-theme="dark"] .sidebar-gcp-accent {
color: #f9a8d4 !important;
}
[data-theme="dark"] .sidebar-gcp-accent:hover {
color: #fbcfe8 !important;
}
/* Das marker-pin-Icon im GCP-Btn hat
inline filter:invert(40%) — im Dark-Mode wird daraus dunkles Grau
auf dunklem Hintergrund. Hier hellen wir das Icon explizit auf. */
[data-theme="dark"] .sidebar-gcp-accent img {
filter: invert(82%) sepia(20%) saturate(800%) hue-rotate(280deg) !important;
}
.sidebar-aruco-accent {
/* teal - matched Palette-Slug "teal" #14B8A6 */
background: rgba(20, 184, 166, 0.16) !important;
color: #0f766e !important;
border-color: rgba(20, 184, 166, 0.45) !important;
}
.sidebar-aruco-accent:hover {
background: rgba(20, 184, 166, 0.28) !important;
color: #115e59 !important;
}
[data-theme="dark"] .sidebar-aruco-accent {
color: #5eead4 !important;
}
[data-theme="dark"] .sidebar-aruco-accent:hover {
color: #99f6e4 !important;
}
/* polish runde 9: "Gespeicherte Layer laden"-Btn (Folder-Icon
in der Sidebar + im collapsed Rail) violett akzentuiert, damit er
sich vom Plus-Btn (Layer erstellen, gruen-neutral) klar abhebt.
Der Klick oeffnet das Lade-Modal mit allen DB-Layern. */
.sidebar-load-accent {
background: rgba(155, 90, 200, 0.16) !important;
color: #6a3aa0 !important;
border-color: rgba(155, 90, 200, 0.45) !important;
}
.sidebar-load-accent:hover {
background: rgba(155, 90, 200, 0.32) !important;
border-color: rgba(155, 90, 200, 0.75) !important;
color: #5a2a90 !important;
}
[data-theme="light"] .sidebar-load-accent {
background: #efe2fa !important;
color: #5a2a90 !important;
border-color: #b58fdc !important;
}
[data-theme="light"] .sidebar-load-accent:hover {
background: #e0caf5 !important;
color: #401a78 !important;
border-color: #8a55c8 !important;
}
/* Im Dark-Mode war die Font-Farbe zu dunkel — Icon im Folder-SVG nutzt currentColor und verschwand
fast auf dem dunklen Hintergrund. */
[data-theme="dark"] .sidebar-load-accent {
color: #c4a5e8 !important;
}
[data-theme="dark"] .sidebar-load-accent:hover {
color: #ddc7f3 !important;
}
/* DSM-Surface-Modal mit Heatmap + 3D-Iso. */
.dsm-surface-tabs {
display: flex;
gap: 6px;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
}
/* Tab-Bar komplett wegblenden wenn nur ein
einzelner Tab sichtbar ist (z. B. "Interpolierte 3D Flaeche"). Das
hidden-Attribut auf dem Element wird vom Browser per User-Agent CSS
auf display:none gesetzt — explizit deklarieren, falls eine Spezi-
fizitaetsregel oben das override. */
.dsm-surface-tabs[hidden] {
display: none;
}
.dsm-surface-tab {
background: transparent;
border: 1px solid transparent;
border-bottom: none;
padding: 6px 14px;
border-radius: 8px 8px 0 0;
cursor: pointer;
font-size: 0.92em;
color: var(--muted-hi);
}
.dsm-contours-controls {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
margin-top: 8px;
}
.dsm-contours-label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.9em;
}
.dsm-contours-label input {
width: 84px;
padding: 4px 6px;
}
.dsm-contours-apply { padding: 5px 14px; }
.dsm-surface-tab.is-active {
background: var(--bg-card);
border-color: var(--border);
color: var(--text);
font-weight: 600;
margin-bottom: -1px;
}
.dsm-surface-tab:hover { color: var(--text); }
.dsm-surface-view {
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
background: var(--bg-elevated, rgba(0,0,0,0.04));
}
/* Footer-Bg fuer DSM-Oberflaeche +
* Interpolierte 3D Flaeche analog Public-Help-Modal:
* Dark : #272D31
* Light: #E3ECF4
* Border-top + Padding kommen ueber .modal-footer aus base.css schon
* mit, wir ueberschreiben nur die Farbe (und die Default-Bgs aus den
* generischen .modal-footer-Rules darueber). */
.dsm-surface-footer {
display: flex !important;
justify-content: flex-end;
padding: 10px 14px !important;
background: #E3ECF4 !important;
}
[data-theme="dark"] .dsm-surface-footer {
background: #272D31 !important;
}
.dsm-surface-svg {
display: block;
width: 100%;
height: auto;
max-height: 60vh;
}
/* 3D-Mesh-Modus braucht explizite Hoehe, damit
Three.js die Canvas-Groesse aus clientWidth/clientHeight liest.
Etwas hoeher als die alte SVG-View (420 -> 460), damit die
OrbitControls-Interaktion klar lesbar bleibt. */
.dsm-surface-view--mesh {
width: 100%;
height: 460px;
max-height: 60vh;
position: relative;
user-select: none;
touch-action: none;
cursor: grab;
}
.dsm-surface-view--mesh:active { cursor: grabbing; }
.dsm-surface-view--mesh canvas {
display: block;
width: 100%;
height: 100%;
}
/* Nordpfeil-Overlay im 3D-Mesh-Canvas. Rotation
per JS auf das innere