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

Hendidura del lomo en las páginas y en la hoja que gira

Browse Source 
En doble página va en el centro, en una página en el lado del lomo según el
sentido de lectura y en una página ancha en su centro.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
nino
2026-11-02 16:35:13 -06:00
co-authored by Claude Opus 5.5
parent a6f01b0e54
commit a80391f382
2 changed files with 50 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/style.css
+13
View File
@@ -397,6 +397,19 @@ body.reading #netbanner { display: none; }
.paged .curldrop { position: absolute; z-index: 2; pointer-events: none; opacity: 0; }
.paged .curldrop.l { background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.2) 35%, rgba(0,0,0,0) 75%); }
.paged .curldrop.r { background: linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,.2) 35%, rgba(0,0,0,0) 75%); }
/* Hendidura del lomo: la página se funde con el negro de detrás. Los puntos coinciden con gutter() en app.js. */
.paged:not(.fit-width) img[data-gutter] {
--gutter-stops: rgba(0,0,0,.4) 0, rgba(0,0,0,.6) 1.2%, rgba(0,0,0,.8) 3%, rgba(0,0,0,.93) 6%, #000 10%;
--gutter-mask: linear-gradient(var(--gutter-side), var(--gutter-stops));
-webkit-mask-image: var(--gutter-mask);
mask-image: var(--gutter-mask);
}
.paged:not(.fit-width) img[data-gutter="l"] { --gutter-side: to right; }
.paged:not(.fit-width) img[data-gutter="r"] { --gutter-side: to left; }
.paged:not(.fit-width) img[data-gutter="m"] {
--gutter-mask: linear-gradient(to right, #000 45%, rgba(0,0,0,.93) 47%, rgba(0,0,0,.8) 48.5%, rgba(0,0,0,.6) 49.4%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.6) 50.6%, rgba(0,0,0,.8) 51.5%, rgba(0,0,0,.93) 53%, #000 55%);
}
.paged .leafkeepback { position: absolute; z-index: 2; pointer-events: none; background: #000; }
.paged .leafkeep { position: absolute; z-index: 2; pointer-events: none; max-width: none; max-height: none; object-fit: fill; }
/* Info de la obra */