Moritz Weinmann
54d9194d22
Toolbar-Presets liefern jetzt frische Arrays (Factory-Pattern), damit mehrere Editor-Instanzen auf einer Seite sich nicht gegenseitig beeinflussen. Resize-Modul und CSS angepasst. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
60 lines
1.2 KiB
CSS
60 lines
1.2 KiB
CSS
/* Drag-Handle Overlay für Quill Image Resize */
|
|
|
|
.ql-image-overlay {
|
|
box-sizing: border-box;
|
|
border: 1px dashed #2684ff;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ql-image-handle {
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: #ffffff;
|
|
border: 2px solid #2684ff;
|
|
border-radius: 2px;
|
|
pointer-events: auto;
|
|
z-index: 10001;
|
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.ql-image-handle:hover {
|
|
background: #2684ff;
|
|
}
|
|
|
|
.ql-image-handle-nw {
|
|
left: -6px;
|
|
top: -6px;
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
.ql-image-handle-ne {
|
|
right: -6px;
|
|
top: -6px;
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
.ql-image-handle-sw {
|
|
left: -6px;
|
|
bottom: -6px;
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
.ql-image-handle-se {
|
|
right: -6px;
|
|
bottom: -6px;
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
/* Während des Drags Text-Selection global unterdrücken */
|
|
.ql-image-overlay.is-dragging,
|
|
.ql-image-overlay.is-dragging * {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
/* Im Editor selbst soll das Bild visuell ein leichtes Outline bekommen,
|
|
wenn es aktiv ist — aber CSS kann nicht aus dem Overlay zurückgreifen,
|
|
daher: ein dünner Schatten ist genug; der gestrichelte Rand am Overlay
|
|
markiert das aktive Bild klar genug. */
|