fix(ui): paridade Firefox nos botões da toolbar — alturas fixas, sem inflar com métricas de emoji

Firefox calcula line-height:normal pelas métricas verticais da fonte do
conteúdo (Noto Color Emoji infla botões com ícone; glifos simples ficam
menores) → linha desalinhada/desproporcional, igual em Chrome.

- .btn: inline-flex + height 28px (small 22px) — conteúdo não afeta a caixa
- .segmented .seg: height 26px (container 28 com a borda); select da toolbar 28px
- .tag-chip 20px; .tree-menu/.ftree-act line-height 1
- resets ::-moz-focus-inner/-outer
- sw v13

Verificado com Firefox 159 headless e Chromium no mesmo harness e no app
real: alturas idênticas (28/26/22/20 desktop; 40/40/38 mobile via min-height).
This commit is contained in:
lgcosta committed 2026-11-05 11:46:12 -03:00
1 parent 2106ea14f0
commit f4d6361b62
2 files changed
+26 -8

No files matched your search

+25 -7
View File
@@ -149,16 +149,24 @@ code { font-family: var(--mono); font-size: 0.92em; }
fundo com o tom de painel imediatamente mais escuro.
--------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
font: inherit;
font-size: 13px;
color: var(--fg);
border: 1px solid var(--border);
border-radius: 0;
padding: 4px 12px;
padding: 0 12px;
cursor: pointer;
background: var(--panel);
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
/* paridade Firefox: sem a borda/padding internos do foco e sem inflar a
linha com as métricas verticais da fonte de emoji (altura é fixa acima) */
button::-moz-focus-inner { border-style: none; padding: 0; }
button::-moz-focus-outer { border: 0; }
.btn:hover { background: var(--panel-2); border-color: color-mix(in oklab, var(--border), var(--fg) 20%); }
.btn:active { background: color-mix(in oklab, var(--panel-2), var(--fg) 8%); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@@ -170,7 +178,7 @@ code { font-family: var(--mono); font-size: 0.92em; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: color-mix(in oklab, var(--danger), black 12%); border-color: color-mix(in oklab, var(--danger), black 12%); color: #fff; }
.btn-danger:active { background: color-mix(in oklab, var(--danger), black 20%); color: #fff; }
.btn-small { font-size: 12px; padding: 2px 9px; }
.btn-small { font-size: 12px; padding: 0 9px; height: 22px; }
.fmt { min-width: 32px; justify-content: center; font-size: 13px; }
#fmt-tools.disabled { opacity: .45; pointer-events: none; }
@@ -181,7 +189,8 @@ code { font-family: var(--mono); font-size: 0.92em; }
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0;
padding: 4px 8px;
height: 28px;
padding: 0 8px;
}
.segmented {
@@ -191,12 +200,15 @@ code { font-family: var(--mono); font-size: 0.92em; }
background: var(--panel);
}
.segmented .seg {
display: inline-flex;
align-items: center;
height: 26px;
border: 0;
border-right: 1px solid var(--border-soft);
background: transparent;
font: inherit;
font-size: 12px;
padding: 4px 14px;
padding: 0 14px;
cursor: pointer;
color: var(--muted);
transition: background .15s ease, color .15s ease;
@@ -241,13 +253,16 @@ body.sidebar-off #sidebar { display: none; }
}
#tag-cloud { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip {
display: inline-flex;
align-items: center;
height: 20px;
font: inherit;
font-size: 12px;
border: 1px solid var(--border);
background: var(--panel);
color: var(--accent-dark);
border-radius: 0;
padding: 1px 8px;
padding: 0 8px;
cursor: pointer;
}
.tag-chip:hover { border-color: var(--accent); }
@@ -640,7 +655,9 @@ body.no-gutter #gutter { display: none; }
background: none;
color: var(--muted);
cursor: pointer;
padding: 0 4px;
font-size: 12px;
line-height: 1;
padding: 3px 4px;
border-radius: 0;
visibility: hidden;
}
@@ -1769,8 +1786,9 @@ html[data-theme="carbon-paper"] #revisions-list li:hover { background: #e6e5dd;
background: none;
cursor: pointer;
font-size: 11px;
line-height: 1;
color: var(--muted);
padding: 1px 4px;
padding: 3px 4px;
border-radius: 0;
}
.ftree-act:hover { background: var(--accent); color: #fff; }
+1 -1
View File
@@ -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-v12';
const CACHE = 'notas-shell-v13';
const SHELL = [
'/',
'/css/app.css',