/* idf-list-tree-indent - Einruecken/Ausruecken ohne Drag --------------------------------------------------------------------- Ein Overlay, `position: fixed` und direkt am : .idf-tree-indent-flyout Mini-Menue am Drag-Griff Warum am und nicht in der Zeile: Listen-Rows haben `overflow` und Grid-Zellen mit fester Breite, ein Overlay in der Zelle wuerde abgeschnitten. Die Position rechnet das JS aus `getBoundingClientRect`. Bis v1.71.1 gab es hier ein zweites Overlay, `.idf-tree-indent-bar`: zwei Pfeil-Pillen am fokussierten Inline-Edit-Feld. Raus, weil Tab und das Flyout reichen (Joerg). Farben, Radien, Schatten und Z-Index kommen aus den Tokens, hier steht keine einzige Roh-Farbe. */ .idf-tree-indent-flyout { position: fixed; display: none; z-index: var(--z-dropdown, 100); } .idf-tree-indent-flyout.is-open { display: block; } /* === Flyout am Drag-Griff =========================================== */ .idf-tree-indent-flyout { min-width: 176px; padding: 4px; border: 1px solid var(--line, #e5e5e5); border-radius: var(--radius-md, 6px); background: var(--white, #fff); box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12)); } .idf-tree-indent-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-sm, 4px); background: transparent; color: var(--ink, #111); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .idf-tree-indent-item:hover:not(:disabled) { background: var(--bg-hover, #f8f8f8); } .idf-tree-indent-item:disabled { opacity: 0.35; cursor: default; } .idf-tree-indent-item i { width: 14px; color: var(--soft, #999); text-align: center; } .idf-tree-indent-item span { flex: 1; } /* Tastenkuerzel-Hinweis. Der eigentliche Zweck des Flyouts ist nicht der Klick, sondern dass man hier erfaehrt, dass Tab dasselbe tut. */ .idf-tree-indent-item kbd { padding: 1px 5px; border: 1px solid var(--line, #e5e5e5); border-radius: var(--radius-xs, 3px); background: var(--neutral-bg, #f0f1f3); color: var(--soft, #999); font-family: inherit; font-size: 11px; white-space: nowrap; } /* Waehrend eines Drags hat das Overlay nichts zu suchen: die Liste ist dann in Bewegung und die gerechnete Position ist sofort alt. */ body.idf-sortable-dragging .idf-tree-indent-flyout { display: none; }