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;