diff --git a/web/css/app.css b/web/css/app.css index 8ea4bec..bb3b851 100644 --- a/web/css/app.css +++ b/web/css/app.css @@ -336,10 +336,11 @@ body.no-gutter #gutter { display: none; } inset: 0; z-index: 1; overflow: hidden; - padding: var(--pad-y) var(--pad-x); + padding: var(--pad-y) calc(var(--pad-x) + var(--sbw, 0px)) var(--pad-y) var(--pad-x); font-family: var(--editor-font); font-size: var(--editor-size); line-height: var(--line-h); + font-synthesis: none; /* negrito sintetizado alonga glifos e desloca a quebra vs textarea */ color: var(--fg); white-space: pre-wrap; overflow-wrap: break-word; @@ -367,6 +368,7 @@ body.no-gutter #gutter { display: none; } border: 0; resize: none; overflow: auto; + scrollbar-gutter: stable; /* reserva a barra clássica sempre: largura de texto constante p/ casar com o overlay */ padding: var(--pad-y) var(--pad-x); font-family: var(--editor-font); font-size: var(--editor-size); @@ -381,8 +383,8 @@ body.no-gutter #gutter { display: none; } #editor::placeholder { color: var(--muted); } /* tokens de colorização */ -.tk-h { color: var(--tk-heading); font-weight: 700; } -.tk-strong { color: var(--tk-strong); font-weight: 700; } +.tk-h { color: var(--tk-heading); font-weight: 700; text-shadow: .35px 0 currentColor; } +.tk-strong { color: var(--tk-strong); font-weight: 700; text-shadow: .35px 0 currentColor; } .tk-em { color: var(--tk-em); font-style: italic; } .tk-strike { color: var(--tk-strike); text-decoration: line-through; } .tk-code { color: var(--tk-code); background: var(--tk-code-bg); } @@ -391,7 +393,7 @@ body.no-gutter #gutter { display: none; } .tk-link { color: var(--tk-link); text-decoration: underline; } .tk-url { color: var(--tk-url); text-decoration: underline; } .tk-tag { color: var(--tk-tag); font-weight: 600; } -.tk-mark { color: var(--tk-mark); font-weight: 700; } +.tk-mark { color: var(--tk-mark); font-weight: 700; text-shadow: .35px 0 currentColor; } .tk-quote { color: var(--tk-quote); font-style: italic; } .tk-html { color: var(--tk-html); } .tk-attr { color: var(--tk-attr); } diff --git a/web/js/app.js b/web/js/app.js index c3d526b..55cd322 100644 --- a/web/js/app.js +++ b/web/js/app.js @@ -1157,6 +1157,10 @@ const frag = document.createDocumentFragment(); for (const r of rowEls) frag.appendChild(r); E.hl.replaceChildren(frag); + // paridade de largura com o textarea: com scrollbar-gutter:stable o valor é + // constante por plataforma (clássico ~15-17px; overlay 0) e o espelha aqui + const sbw = E.editor.offsetWidth - E.editor.clientWidth; + E.hl.style.setProperty('--sbw', sbw > 0 ? sbw + 'px' : '0px'); if (lines.length !== lastGutterCount) { const gf = document.createDocumentFragment(); for (let i = 1; i <= lines.length; i++) { @@ -1172,6 +1176,10 @@ const rows = E.gutterInner.children; for (let i = 0; i < rowEls.length; i++) rows[i].style.height = E.hl.children[i].offsetHeight + 'px'; } + // replaceChildren zera o scroll do overlay/gutter — reassincroniza com o textarea + E.hl.scrollTop = E.editor.scrollTop; + E.hl.scrollLeft = E.editor.scrollLeft; + E.gutter.scrollTop = E.editor.scrollTop; updateMarker(); } diff --git a/web/sw.js b/web/sw.js index c79b12c..c71a53c 100644 --- a/web/sw.js +++ b/web/sw.js @@ -1,7 +1,7 @@ /* Service Worker do Notas — caches versionados. * BUMP de CACHE em todo deploy que mude shell/assets (o activate limpa os antigos). */ -const CACHE = 'notas-shell-v13'; +const CACHE = 'notas-shell-v14'; const SHELL = [ '/', '/css/app.css',