Selection-Mode: Gesamtes Bild klickbar, Checkbox nach unten-rechts

- Capture-Listener auf document statt #main (aggressivster Ansatz)
- stopImmediatePropagation blockt Poptrox komplett
- Checkbox von oben-links nach unten-rechts verschoben
  (wird nicht mehr von Toolbar ueberlagert)
- Nicht-ausgewaehlte Bilder leicht abgedunkelt (opacity 0.85)
- Ausgewaehlte Bilder volle Helligkeit + gruener Rahmen
- Mobile: Checkbox 2em gross fuer bessere Sichtbarkeit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kroonk
2026-04-16 23:43:33 +02:00
parent 096d766358
commit b65ade8381
6 changed files with 32 additions and 19 deletions

View File

@@ -44,21 +44,32 @@ body.selection-mode {
cursor: pointer;
position: relative;
// Checkbox unten-rechts (wird nicht von Toolbar ueberlagert)
&::before {
content: '';
position: absolute;
top: 0.6em;
left: 0.6em;
width: 1.4em;
height: 1.4em;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 3px;
background: rgba(0, 0, 0, 0.4);
bottom: 0.6em;
right: 0.6em;
width: 1.6em;
height: 1.6em;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 4px;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
transition: all 0.2s ease;
pointer-events: none;
}
// Leichtes Overlay damit klar ist: gesamtes Bild anklickbar
.image {
opacity: 0.85;
transition: opacity 0.2s ease;
}
&:active .image {
opacity: 0.6;
}
&.selected {
&::before {
background: _palette(accent1);
@@ -66,6 +77,7 @@ body.selection-mode {
}
.image {
opacity: 1;
outline: 3px solid _palette(accent1);
outline-offset: -3px;
}
@@ -91,10 +103,10 @@ body.selection-mode {
body.selection-mode #main .thumb {
&::before {
top: 0.4em;
left: 0.4em;
width: 1.8em;
height: 1.8em;
bottom: 0.3em;
right: 0.3em;
width: 2em;
height: 2em;
border-width: 2.5px;
}