From 41a87bc5adf5eedb96829f4870cee61f2f9c512e Mon Sep 17 00:00:00 2001 From: Nino Date: Sun, 1 Nov 2026 16:58:21 -0600 Subject: [PATCH] Filtro de luz azul en el lector MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Capa ámbar en modo multiplicar sobre las páginas (también durante las animaciones), bajo las barras. Co-Authored-By: Claude Opus 5.5 --- app/public/app.js | 4 ++++ app/public/style.css | 3 +++ 2 files changed, 7 insertions(+) diff --git a/app/public/app.js b/app/public/app.js index 574fcfe..1f06a74 100644 --- a/app/public/app.js +++ b/app/public/app.js @@ -63,6 +63,9 @@ const FILTERS = { gray: ['Blanco y negro', 'grayscale(1)'], contrast: ['Alto contraste', 'contrast(1.35) brightness(1.03)'], vivid: ['Colores vivos', 'saturate(1.45) contrast(1.05)'], + // Sin filtro CSS: una capa ámbar en modo multiplicar sobre todo el lector (.reader.bluelight), que + // quita azul a todo lo que hay en pantalla, también durante las animaciones. + blue: ['Filtro de luz azul', ''], } const DL_ACTIVE = ['queued', 'downloading'] const plural = (n, w) => `${n} ${w}${n === 1 ? '' : 's'}` @@ -1381,6 +1384,7 @@ async function viewReader(mangaId, chapterId, startPage) { const applyFilter = () => { const f = [FILTERS[settings.filter]?.[1] || '', settings.brightness != 100 ? `brightness(${settings.brightness / 100})` : ''].join(' ').trim() box.style.setProperty('--page-filter', f || 'none') + reader.classList.toggle('bluelight', settings.filter === 'blue') } applyFilter() if ($('#saver')) $('#saver').checked = settings.saver diff --git a/app/public/style.css b/app/public/style.css index fbbdc3a..49dc219 100644 --- a/app/public/style.css +++ b/app/public/style.css @@ -91,6 +91,9 @@ input:focus, select:focus { border-color: var(--accent); } /* ---- Lector ---- */ .reader { min-height: 100vh; background: #000; position: relative; } +/* Filtro de luz azul: tono ámbar multiplicado sobre las páginas (bajo las barras del lector). */ +.reader.bluelight::after { content: ''; position: fixed; inset: 0; z-index: 25; pointer-events: none; + background: #ff9a3c; mix-blend-mode: multiply; opacity: .42; } .rbar { position: fixed; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(10, 9, 14, .9); backdrop-filter: blur(6px); transition: transform .2s; flex-wrap: wrap; } .rbar.top { top: 0; padding-top: max(8px, env(safe-area-inset-top)); }