diff --git a/app/public/style.css b/app/public/style.css index d25e6f1..b9fa4b4 100644 --- a/app/public/style.css +++ b/app/public/style.css @@ -398,15 +398,15 @@ body.reading #netbanner { display: none; } .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] { +.paged 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"] { +.paged img[data-gutter="l"] { --gutter-side: to right; } +.paged img[data-gutter="r"] { --gutter-side: to left; } +.paged 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; }