noNameWEB/redmine-theme-tonalmine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: center text vertically in Compact and Large

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
surtic86
2026-10-15 10:18:45 +02:00
co-authored by Claude Opus 5.5
parent f5119bba50
commit f08d2c3f6c
4 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tonalmine/stylesheets/components.css
+2
View File
@@ -578,6 +578,7 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
.nm-segmented button { .nm-segmented button {
border-radius: 0; border-radius: 0;
block-size: calc(32px + var(--nm-density)); 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; padding-inline: 8px;
border: 1px solid var(--md-sys-color-outline); border: 1px solid var(--md-sys-color-outline);
background: transparent; background: transparent;
@@ -614,6 +615,7 @@ label.nm-swatch--custom { position: relative; inline-size: 28px; background: var
.nm-appearance__reset { .nm-appearance__reset {
margin-block-start: 12px; margin-block-start: 12px;
block-size: calc(32px + var(--nm-density)); block-size: calc(32px + var(--nm-density));
padding-block: 0;
padding-inline: 12px; padding-inline: 12px;
border: 0; border: 0;
border-radius: var(--md-sys-shape-corner-full); border-radius: var(--md-sys-shape-corner-full);
tonalmine/stylesheets/layout.css
+3 -2
View File
@@ -56,7 +56,7 @@ body.has-main-menu #header { padding-block-end: 48px; }
#header h1 { #header h1 {
font: var(--md-sys-typescale-title-large); 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 { #header h1 .breadcrumbs {
font: var(--md-sys-typescale-label-medium); 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); } #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 { #quick-search #q {
inline-size: 220px; inline-size: 220px;
block-size: calc(40px + var(--nm-density)); 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 { margin-inline-start: 8px; }
#project-jump .drdn-trigger { #project-jump .drdn-trigger {
block-size: calc(40px + var(--nm-density)); block-size: calc(40px + var(--nm-density));
padding-block: 0; /* core's 1.5px / 3px pushed the text down */
padding-inline: 16px 36px; padding-inline: 16px 36px;
border: 1px solid var(--md-sys-color-outline-variant); border: 1px solid var(--md-sys-color-outline-variant);
border-radius: var(--md-sys-shape-corner-full); border-radius: var(--md-sys-shape-corner-full);
tonalmine/stylesheets/mobile.css
+1
View File
@@ -13,6 +13,7 @@
color: var(--md-sys-color-on-surface); color: var(--md-sys-color-on-surface);
font: var(--md-sys-typescale-title-large); font: var(--md-sys-typescale-title-large);
line-height: calc(50px + var(--nm-density)); 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; } html #project-jump.drdn { padding-inline-start: 8px; }
/* Header icons: Material Symbols masks instead of core's scaled "^" and "≡" text glyphs */ /* Header icons: Material Symbols masks instead of core's scaled "^" and "≡" text glyphs */
tonalmine/stylesheets/tokens.css
+17 -16
View File
@@ -7,22 +7,23 @@
/* Typeface */ /* Typeface */
--md-ref-typeface-plain: Roboto, system-ui, sans-serif; --md-ref-typeface-plain: Roboto, system-ui, sans-serif;
/* Type scale, as `font` shorthand values: weight size/line-height family */ /* Type scale, as `font` shorthand values: weight size/line-height family. Line heights are rounded to
--md-sys-typescale-display-large: 400 3.5625rem/4rem var(--md-ref-typeface-plain); whole px: in the size modes 1.25rem is e.g. 22.857px, and the rounding moved text off center */
--md-sys-typescale-display-medium: 400 2.8125rem/3.25rem var(--md-ref-typeface-plain); --md-sys-typescale-display-large: 400 3.5625rem/round(4rem, 1px) var(--md-ref-typeface-plain);
--md-sys-typescale-display-small: 400 2.25rem/2.75rem 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-headline-large: 400 2rem/2.5rem 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-medium: 400 1.75rem/2.25rem 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-small: 400 1.5rem/2rem 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-title-large: 400 1.375rem/1.75rem 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-medium: 500 1rem/1.5rem 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-small: 500 0.875rem/1.25rem var(--md-ref-typeface-plain); --md-sys-typescale-title-medium: 500 1rem/round(1.5rem, 1px) var(--md-ref-typeface-plain);
--md-sys-typescale-body-large: 400 1rem/1.5rem 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-medium: 400 0.875rem/1.25rem 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-small: 400 0.75rem/1rem 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-label-large: 500 0.875rem/1.25rem 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-medium: 500 0.75rem/1rem 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-small: 500 0.6875rem/1rem 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 */ /* Tracking (letter-spacing) per type role */
--md-sys-typescale-display-large-tracking: -0.25px; --md-sys-typescale-display-large-tracking: -0.25px;