JonKazama-Hellion/Hellion-NewTab
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

feat(image-ref): Bild-Referenz Widget mit Session-Storage

Browse Source 
Opt-in Widget fuer Bild-Referenzen (max. 3 gleichzeitig).
Canvas API konvertiert zu WebP, sessionStorage fuer Bilddaten.
Positionen und Labels bleiben persistent, Bilder nur pro Session.
This commit is contained in:
Jon Kazama
2026-03-22 00:47:51 +01:00
parent 2f0b76eb4e
commit 51947b229c
7 changed files with 621 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.css
+85
View File
@@ -1364,6 +1364,91 @@ body.show-desc .bm-desc { display: block; }
color: var(--bg-primary);
}
/* ============================================
IMAGE REFERENCE WIDGET
============================================ */
.imgref-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 8px;
}
.imgref-img-wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: var(--radius-sm);
min-height: 80px;
}
.imgref-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--radius-sm);
}
.imgref-dropzone {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px dashed var(--border);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 12px;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
min-height: 80px;
gap: 8px;
}
.imgref-dropzone:hover,
.imgref-dropzone.dragover {
border-color: var(--accent);
color: var(--text-secondary);
}
.imgref-dropzone-icon {
font-size: 24px;
opacity: 0.5;
}
.imgref-label {
width: 100%;
margin-top: 8px;
font-size: 11px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
padding: 4px 8px;
flex-shrink: 0;
}
.imgref-label:focus {
border-color: var(--accent);
outline: none;
}
.imgref-label::placeholder {
color: var(--text-muted);
}
.imgref-replace-btn {
width: 100%;
height: 24px;
margin-top: 6px;
font-size: 10px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s;
}
.imgref-replace-btn:hover {
border-color: var(--accent);
color: var(--text-secondary);
}
/* ============================================
WIDGET TOOLBAR
============================================ */