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

feat: density token and root font size for size modes (T1-T4)

Browse Source 
Compact, Normal and Large scale the text (13/14/16px) and the control
heights (32/40/48px) via data-size on <html>. Normal is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
surtic86
2026-10-15 09:16:40 +02:00
co-authored by Claude Opus 5.5
parent dc927062a3
commit 9a04f94118
5 changed files with 46 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tonalmine/stylesheets/components.css
+20 -20
View File
@@ -6,7 +6,7 @@
/***** Buttons *****/
input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"] {
block-size: 40px;
block-size: calc(40px + var(--nm-density));
padding-block: 0;
padding-inline: 24px;
margin-block: 4px;
@@ -51,8 +51,8 @@ input[type="submit"]:disabled, input[type="button"]:disabled, button:disabled {
/***** Text fields (outlined) *****/
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], input:not([type]), select, textarea {
min-block-size: 40px;
padding-block: 8px;
min-block-size: calc(40px + var(--nm-density));
padding-block: calc(8px + min(var(--nm-density), 0px) / 2);
padding-inline: 12px;
border: 1px solid var(--md-sys-color-outline);
border-radius: var(--md-sys-shape-corner-extra-small);
@@ -104,7 +104,7 @@ input::placeholder, textarea::placeholder { color: var(--md-sys-color-outline);
input[type="checkbox"], input[type="radio"] { accent-color: var(--md-sys-color-primary); }
input[type="file"] { color: var(--md-sys-color-on-surface-variant); }
input[type="file"]::file-selector-button {
block-size: 40px;
block-size: calc(40px + var(--nm-density));
margin-inline-end: 12px;
padding-inline: 24px;
border: 0;
@@ -165,10 +165,10 @@ fieldset.collapsible > legend { display: flex; align-items: center; gap: 4px; }
.tabular label { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }
.tabular p { padding-block: 4px; }
/* Center the 24px label line on the 40px fields next to it */
.tabular label:not(.floating):not(.block):not(.inline):not(.no-css) { padding-block-start: 8px; }
.tabular label:not(.floating):not(.block):not(.inline):not(.no-css) { padding-block-start: calc(8px + var(--nm-density) / 2); }
/* Checkboxes and radios placed directly in a row align with that label line too */
/* Checkboxes and radios next to such a label align with its text line */
.tabular p:has(> label:not(.floating):not(.block):not(.inline):not(.no-css)) > input:is([type="checkbox"], [type="radio"]) { margin-block: 13px 0; }
.tabular p:has(> label:not(.floating):not(.block):not(.inline):not(.no-css)) > input:is([type="checkbox"], [type="radio"]) { margin-block: calc(13px + var(--nm-density) / 2) 0; }
/* Rows without a field at the label's height start at the top: checkbox lists (watchers)
and the issue description, whose editor stays hidden until "Edit" is clicked */
.tabular p:is(:has(label.floating), :has(> #issue_description_and_toolbar[style*="none"])) > label:not(.floating):not(.block):not(.inline):not(.no-css) { padding-block-start: 0; }
@@ -251,7 +251,7 @@ div.flash.error svg.icon-svg, #errorExplanation svg.icon-svg,
div.flash.notice svg.icon-svg, div.flash.warning svg.icon-svg, .conflict svg.icon-svg { stroke: currentColor; }
/***** Secondary tabs (settings, history, admin) *****/
#content .tabs { block-size: 48px; margin-block-end: 16px; }
#content .tabs { block-size: calc(48px + var(--nm-density)); margin-block-end: 16px; }
#content .tabs ul { padding-inline-start: 0; border-block-end: 1px solid var(--md-sys-color-outline-variant); }
#content .tabs ul li { margin-inline-end: 0; margin-block-end: 0; }
#content .tabs ul li a, #content .tabs ul li a:hover {
@@ -280,7 +280,7 @@ div.flash.notice svg.icon-svg, div.flash.warning svg.icon-svg, .conflict svg.ico
justify-content: end;
gap: 4px;
inline-size: auto;
block-size: 48px;
block-size: calc(48px + var(--nm-density));
padding-inline-start: 8px;
box-sizing: border-box;
background: var(--md-sys-color-surface);
@@ -292,8 +292,8 @@ div.flash.notice svg.icon-svg, div.flash.warning svg.icon-svg, .conflict svg.ico
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
inline-size: calc(40px + var(--nm-density));
block-size: calc(40px + var(--nm-density));
padding: 0;
border: 0;
border-radius: var(--md-sys-shape-corner-full);
@@ -335,8 +335,8 @@ span.pagination { margin-inline-start: 0; color: var(--md-sys-color-on-surface-v
margin-inline-end: 4px;
border: 0;
border-radius: var(--md-sys-shape-corner-full);
line-height: 40px;
min-inline-size: 40px;
line-height: calc(40px + var(--nm-density));
min-inline-size: calc(40px + var(--nm-density));
}
.pagination ul.pages li a, .pagination ul.pages li span {
display: block;
@@ -451,8 +451,8 @@ div.tooltip span.nm-tip .nm-tip__fields > span {
.ui-dialog .ui-dialog-title { font: var(--md-sys-typescale-headline-small); }
.ui-dialog .ui-dialog-content { padding-inline: 16px; }
.ui-dialog .ui-dialog-titlebar-close {
inline-size: 40px;
block-size: 40px;
inline-size: calc(40px + var(--nm-density));
block-size: calc(40px + var(--nm-density));
margin-block-start: -20px;
border: 0;
border-radius: var(--md-sys-shape-corner-full);
@@ -520,8 +520,8 @@ html .context-menu-selection svg.icon-svg { color: var(--md-sys-color-on-seconda
html .jstElements { block-size: auto; padding-block-end: 4px; }
html .jstElements button {
position: relative;
inline-size: 32px;
block-size: 32px;
inline-size: calc(32px + var(--nm-density));
block-size: calc(32px + var(--nm-density));
margin-inline-end: 0;
padding: 0;
border: 0;
@@ -577,7 +577,7 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
.nm-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-block-end: 12px; } /* equal segments */
.nm-segmented button {
border-radius: 0;
block-size: 32px;
block-size: calc(32px + var(--nm-density));
padding-inline: 8px;
border: 1px solid var(--md-sys-color-outline);
background: transparent;
@@ -613,7 +613,7 @@ label.nm-swatch--custom { position: relative; inline-size: 28px; background: var
/* Reset to default: M3 text button, shown once the user changed something */
.nm-appearance__reset {
margin-block-start: 12px;
block-size: 32px;
block-size: calc(32px + var(--nm-density));
padding-inline: 12px;
border: 0;
border-radius: var(--md-sys-shape-corner-full);
@@ -628,8 +628,8 @@ label.nm-swatch--custom { position: relative; inline-size: 28px; background: var
/* Each group is its own form row: 40px tall like the fields (M3 segmented button height), so
the label lines up; the row padding spaces them */
.nm-appearance--default .nm-segmented { margin: 0; }
.nm-appearance--default .nm-segmented button { block-size: 40px; margin-block: 0; }
.nm-appearance--default .nm-swatches { min-block-size: 40px; align-items: center; }
.nm-appearance--default .nm-segmented button { block-size: calc(40px + var(--nm-density)); margin-block: 0; }
.nm-appearance--default .nm-swatches { min-block-size: calc(40px + var(--nm-density)); align-items: center; }
/* The custom swatch is a <label class="no-css">; also undo .tabular.settings label margins and mobile full width */
html .tabular label.nm-swatch--custom { display: block; margin: 0; inline-size: 28px; }
html .flyout-menu .nm-appearance { padding-inline: 16px; }