From f08d2c3f6c0dd71c953523b9cead65cff3b17bcd Mon Sep 17 00:00:00 2001 From: surtic86 Date: Thu, 15 Oct 2026 10:18:45 +0200 Subject: [PATCH] fix: center text vertically in Compact and Large The size modes scale rem line heights to fractions (1.25rem = 22.857px in Large), and pixel rounding moved text up to 1.2px off center. Type scale line heights and the header's 3rem now round to whole px (no change in Normal). Segmented buttons, Reset to default and the project select drop core's vertical padding, which made the line overflow and sink. Co-Authored-By: Claude Opus 5.5 --- tonalmine/stylesheets/components.css | 2 ++ tonalmine/stylesheets/layout.css | 5 +++-- tonalmine/stylesheets/mobile.css | 1 + tonalmine/stylesheets/tokens.css | 33 ++++++++++++++-------------- 4 files changed, 23 insertions(+), 18 deletions(-) diff --git a/tonalmine/stylesheets/components.css b/tonalmine/stylesheets/components.css index 4bc2cfc..1918536 100644 --- a/tonalmine/stylesheets/components.css +++ b/tonalmine/stylesheets/components.css @@ -578,6 +578,7 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro .nm-segmented button { border-radius: 0; block-size: calc(32px + var(--nm-density)); + padding-block: 0; /* the box centers the line; core's 4px made it overflow (and sink) in Compact */ padding-inline: 8px; border: 1px solid var(--md-sys-color-outline); background: transparent; @@ -614,6 +615,7 @@ label.nm-swatch--custom { position: relative; inline-size: 28px; background: var .nm-appearance__reset { margin-block-start: 12px; block-size: calc(32px + var(--nm-density)); + padding-block: 0; padding-inline: 12px; border: 0; border-radius: var(--md-sys-shape-corner-full); diff --git a/tonalmine/stylesheets/layout.css b/tonalmine/stylesheets/layout.css index c8f7c5c..f2e63c3 100644 --- a/tonalmine/stylesheets/layout.css +++ b/tonalmine/stylesheets/layout.css @@ -56,7 +56,7 @@ body.has-main-menu #header { padding-block-end: 48px; } #header h1 { font: var(--md-sys-typescale-title-large); - min-block-size: 3rem; + min-block-size: round(3rem, 1px); /* whole px, so the header controls do not sit between pixels */ } #header h1 .breadcrumbs { font: var(--md-sys-typescale-label-medium); @@ -65,7 +65,7 @@ body.has-main-menu #header { padding-block-end: 48px; } } #header h1 .breadcrumbs a { color: var(--md-sys-color-on-surface-variant); } -#quick-search { min-block-size: 3rem; color: var(--md-sys-color-on-surface-variant); } +#quick-search { min-block-size: round(3rem, 1px); color: var(--md-sys-color-on-surface-variant); } #quick-search #q { inline-size: 220px; block-size: calc(40px + var(--nm-density)); @@ -82,6 +82,7 @@ body.has-main-menu #header { padding-block-end: 48px; } #project-jump.drdn { margin-inline-start: 8px; } #project-jump .drdn-trigger { block-size: calc(40px + var(--nm-density)); + padding-block: 0; /* core's 1.5px / 3px pushed the text down */ padding-inline: 16px 36px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-full); diff --git a/tonalmine/stylesheets/mobile.css b/tonalmine/stylesheets/mobile.css index 04a35c4..23af3a7 100644 --- a/tonalmine/stylesheets/mobile.css +++ b/tonalmine/stylesheets/mobile.css @@ -13,6 +13,7 @@ color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-title-large); line-height: calc(50px + var(--nm-density)); + padding-block: 1.5px 3px; /* core's, which layout.css removes: keeps the title level with the ▾ icon */ } html #project-jump.drdn { padding-inline-start: 8px; } /* Header icons: Material Symbols masks instead of core's scaled "^" and "≡" text glyphs */ diff --git a/tonalmine/stylesheets/tokens.css b/tonalmine/stylesheets/tokens.css index 9f5160c..acda6ca 100644 --- a/tonalmine/stylesheets/tokens.css +++ b/tonalmine/stylesheets/tokens.css @@ -7,22 +7,23 @@ /* Typeface */ --md-ref-typeface-plain: Roboto, system-ui, sans-serif; - /* Type scale, as `font` shorthand values: weight size/line-height family */ - --md-sys-typescale-display-large: 400 3.5625rem/4rem var(--md-ref-typeface-plain); - --md-sys-typescale-display-medium: 400 2.8125rem/3.25rem var(--md-ref-typeface-plain); - --md-sys-typescale-display-small: 400 2.25rem/2.75rem var(--md-ref-typeface-plain); - --md-sys-typescale-headline-large: 400 2rem/2.5rem var(--md-ref-typeface-plain); - --md-sys-typescale-headline-medium: 400 1.75rem/2.25rem var(--md-ref-typeface-plain); - --md-sys-typescale-headline-small: 400 1.5rem/2rem var(--md-ref-typeface-plain); - --md-sys-typescale-title-large: 400 1.375rem/1.75rem var(--md-ref-typeface-plain); - --md-sys-typescale-title-medium: 500 1rem/1.5rem var(--md-ref-typeface-plain); - --md-sys-typescale-title-small: 500 0.875rem/1.25rem var(--md-ref-typeface-plain); - --md-sys-typescale-body-large: 400 1rem/1.5rem var(--md-ref-typeface-plain); - --md-sys-typescale-body-medium: 400 0.875rem/1.25rem var(--md-ref-typeface-plain); - --md-sys-typescale-body-small: 400 0.75rem/1rem var(--md-ref-typeface-plain); - --md-sys-typescale-label-large: 500 0.875rem/1.25rem var(--md-ref-typeface-plain); - --md-sys-typescale-label-medium: 500 0.75rem/1rem var(--md-ref-typeface-plain); - --md-sys-typescale-label-small: 500 0.6875rem/1rem var(--md-ref-typeface-plain); + /* Type scale, as `font` shorthand values: weight size/line-height family. Line heights are rounded to + whole px: in the size modes 1.25rem is e.g. 22.857px, and the rounding moved text off center */ + --md-sys-typescale-display-large: 400 3.5625rem/round(4rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-display-medium: 400 2.8125rem/round(3.25rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-display-small: 400 2.25rem/round(2.75rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-headline-large: 400 2rem/round(2.5rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-headline-medium: 400 1.75rem/round(2.25rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-headline-small: 400 1.5rem/round(2rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-title-large: 400 1.375rem/round(1.75rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-title-medium: 500 1rem/round(1.5rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-title-small: 500 0.875rem/round(1.25rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-body-large: 400 1rem/round(1.5rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-body-medium: 400 0.875rem/round(1.25rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-body-small: 400 0.75rem/round(1rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-label-large: 500 0.875rem/round(1.25rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-label-medium: 500 0.75rem/round(1rem, 1px) var(--md-ref-typeface-plain); + --md-sys-typescale-label-small: 500 0.6875rem/round(1rem, 1px) var(--md-ref-typeface-plain); /* Tracking (letter-spacing) per type role */ --md-sys-typescale-display-large-tracking: -0.25px;