/* LDR Media Manager – Frontend KI-Kennzeichnung */ /* v0.9.10: Alle automatischen Badges leben in einem eigenen Layer direkt unter und werden per JS exakt an die Medien-Kante gesetzt (dokument-absolute Koordinaten). Das Theme-Markup wird dafür überhaupt nicht mehr verändert. */ #ldr-mm-badge-layer { position: absolute; top: 0; left: 0; width: 100%; height: 0; overflow: visible; pointer-events: none; z-index: 9990; /* über Inhalt/Slidern, unter WP-Adminbar (99999) */ } #ldr-mm-badge-layer .ldr-mm-ai-badge { position: absolute; pointer-events: auto; top: auto; bottom: auto; left: auto; right: auto; margin: 0; } /* Ausrichtung des Badges am berechneten Ankerpunkt (Ecke des sichtbaren Medien-Rechtecks). */ #ldr-mm-badge-layer .ldr-mm-pos-bottom-right { transform: translate(-100%, -100%); } #ldr-mm-badge-layer .ldr-mm-pos-bottom-left { transform: translate(0, -100%); } #ldr-mm-badge-layer .ldr-mm-pos-top-right { transform: translate(-100%, 0); } #ldr-mm-badge-layer .ldr-mm-pos-top-left { transform: none; } /* Wrapper für Shortcode-/Template-Tag-Einsatz (Badge direkt neben dem Medium platziert). */ .ldr-mm-ai-wrap { position: relative; display: inline-block; max-width: 100%; } /* Alt-Kontext (bis v0.9.9) — falls ein Badge noch klassisch in einem Container liegt. */ .ldr-mm-ai-host { position: relative; } .ldr-mm-ai-badge { position: absolute; z-index: 5; line-height: normal; } /* Ecken-Klassen für Wrapper-/Shortcode-/Alt-Kontext (im Layer per ID-Regel neutralisiert). */ .ldr-mm-pos-bottom-right { bottom: 8px; right: 8px; } .ldr-mm-pos-bottom-left { bottom: 8px; left: 8px; } .ldr-mm-pos-top-right { top: 8px; right: 8px; } .ldr-mm-pos-top-left { top: 8px; left: 8px; } .ldr-mm-ai-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border: none; border-radius: 13px; background: rgba(17, 17, 17, .82); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .03em; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); } .ldr-mm-ai-btn:hover, .ldr-mm-ai-btn:focus { background: #76972E; outline: 2px solid #fff; outline-offset: 1px; } .ldr-mm-ai-pop { position: absolute; bottom: calc(100% + 8px); right: 0; width: max-content; max-width: 240px; padding: 8px 10px; background: #fff; color: #222; font-size: 12px; line-height: 1.4; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none; } .ldr-mm-pos-bottom-left .ldr-mm-ai-pop, .ldr-mm-pos-top-left .ldr-mm-ai-pop { right: auto; left: 0; } .ldr-mm-pos-top-right .ldr-mm-ai-pop, .ldr-mm-pos-top-left .ldr-mm-ai-pop { bottom: auto; top: calc(100% + 8px); transform: translateY(-4px); } /* Hover UND aktiv-Klasse (Klick/Tap) zeigen das Popup */ .ldr-mm-ai-badge:hover .ldr-mm-ai-pop, .ldr-mm-ai-badge.ldr-mm-open .ldr-mm-ai-pop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Diagnose-Panel (nur Admins mit ?ldr_mm_badge_debug=1) */ #ldr-mm-badge-debugpanel { position: fixed; left: 10px; bottom: 10px; z-index: 99998; max-width: 320px; padding: 10px 12px; background: rgba(17, 17, 17, .92); color: #fff; font-size: 12px; line-height: 1.5; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); } #ldr-mm-badge-debugpanel strong { display: block; margin-bottom: 4px; color: #a6c455; } #ldr-mm-badge-debugpanel button { margin-top: 6px; padding: 4px 10px; border: none; border-radius: 4px; background: #76972E; color: #fff; font-size: 12px; cursor: pointer; }