nino/manga-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Recortes con puntos en las esquinas y captura larga en lectura vertical

Browse Source 
En lectura vertical la zona sigue creciendo al llegar al borde y une varias
páginas en una sola imagen. El servidor admite hasta 8000 px y 64 MB, y la
galería y el visor se adaptan a los recortes largos. La animación de la hoja
dura 30 ms más.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
nino
2026-11-02 15:52:05 -06:00
co-authored by Claude Opus 5.5
parent 28aa0b4051
commit 52e9edc214
3 changed files with 132 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/style.css
+11 -1
View File
@@ -300,12 +300,19 @@ input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; m
box-shadow: 0 6px 24px rgba(0,0,0,.5); cursor: default; white-space: nowrap; max-width: calc(100vw - 24px); }
.crop-bar span { font-size: .85rem; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; overflow: hidden; text-overflow: ellipsis; }
.crop-rect { position: fixed; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); pointer-events: none; }
.crop-h { position: absolute; width: 44px; height: 44px; pointer-events: auto; touch-action: none; }
.crop-h::after { content: ''; position: absolute; left: 15px; top: 15px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.crop-h[data-h="nw"] { left: -23px; top: -23px; cursor: nwse-resize; }
.crop-h[data-h="ne"] { right: -23px; top: -23px; cursor: nesw-resize; }
.crop-h[data-h="sw"] { left: -23px; bottom: -23px; cursor: nesw-resize; }
.crop-h[data-h="se"] { right: -23px; bottom: -23px; cursor: nwse-resize; }
.crop-bar em { font-style: normal; }
@media (max-width: 560px) { .crop-bar span { display: none; } }
/* Recortes: galería */
.clips { columns: 220px; column-gap: 12px; }
.clip { break-inside: avoid; margin: 0 0 12px; background: var(--surface); border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.clip img { display: block; width: 100%; height: auto; background: var(--surface-2); }
.clip img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: top; background: var(--surface-2); }
.clip figcaption { padding: 6px 10px 8px; display: grid; font-size: .8rem; }
.clip figcaption b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: .85rem; }
.clip figcaption span { color: var(--muted); }
@@ -316,6 +323,9 @@ input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; m
.lightbox[hidden] { display: none; }
.lb-img { display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 0; overflow: auto; }
.lb-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
/* Recorte largo de lectura vertical: a su ancho y con desplazamiento; entero en pantalla sería una tira ilegible. */
.lb-img.long { align-items: flex-start; }
.lb-img.long img { max-height: none; height: auto; flex: none; }
.lb-side { background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.lb-side h2 a { color: var(--text); }
body.noscroll { overflow: hidden; }