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:
1 parent
2106ea14f0
commit
f4d6361b62
2 files changed
+26
-8
No files matched your search
+25
-7
@@ -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; }
|
||||
|
||||
Reference in new issue
Block a user