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/layout.css
+10 -10
View File
@@ -68,7 +68,7 @@ body.has-main-menu #header { padding-block-end: 48px; }
#quick-search { min-block-size: 3rem; color: var(--md-sys-color-on-surface-variant); }
#quick-search #q {
inline-size: 220px;
block-size: 40px;
block-size: calc(40px + var(--nm-density));
padding-inline: 16px;
border: 0;
border-radius: var(--md-sys-shape-corner-full);
@@ -81,14 +81,14 @@ body.has-main-menu #header { padding-block-end: 48px; }
#project-jump.drdn { margin-inline-start: 8px; }
#project-jump .drdn-trigger {
block-size: 40px;
block-size: calc(40px + var(--nm-density));
padding-inline: 16px 36px;
border: 1px solid var(--md-sys-color-outline-variant);
border-radius: var(--md-sys-shape-corner-full);
background-color: transparent;
color: var(--md-sys-color-on-surface);
font: var(--md-sys-typescale-label-large);
line-height: 38px;
line-height: calc(38px + var(--nm-density));
}
#project-jump .drdn-trigger:hover { background-image: var(--nm-state-hover); }
@@ -99,7 +99,7 @@ body.has-main-menu #header { padding-block-end: 48px; }
padding-block: 0;
padding-inline: 16px;
}
#main-menu ul { min-block-size: 48px; }
#main-menu ul { min-block-size: calc(48px + var(--nm-density)); }
#main-menu li a {
position: relative;
color: var(--md-sys-color-on-surface-variant);
@@ -136,8 +136,8 @@ body.has-main-menu #header { padding-block-end: 48px; }
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;
margin-block: 0;
border: 0;
@@ -158,7 +158,7 @@ body.has-main-menu #header { padding-block-end: 48px; }
align-items: center;
gap: 4px;
inline-size: auto;
block-size: 48px;
block-size: calc(48px + var(--nm-density));
inset-inline-end: 0;
padding-inline: 8px;
border: 0;
@@ -290,7 +290,7 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
display: flex;
align-items: center;
gap: 12px;
min-block-size: 32px;
min-block-size: calc(32px + var(--nm-density));
}
#sidebar :is(li, form > p) > label:has(input[type="checkbox"]) { flex: 1; }
#sidebar input[type="checkbox"] { inline-size: 18px; block-size: 18px; margin: 0; flex-shrink: 0; }
@@ -302,7 +302,7 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
#sidebar li > a:is(:only-child, .query), #admin-menu li a {
display: flex;
align-items: center;
min-block-size: 36px;
min-block-size: calc(36px + var(--nm-density));
padding-block: 8px; /* long names wrap: keep the items apart */
padding-inline: 12px;
box-sizing: border-box;
@@ -345,4 +345,4 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
border-radius: var(--md-sys-shape-corner-extra-large);
}
#login-form label { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
#login-form input { block-size: 40px; }
#login-form input { block-size: calc(40px + var(--nm-density)); }