mirror of
https://github.com/wekan/wekan.git
synced 2026-11-08 03:22:32 -05:00
Lauri Ojansivu
d5b69137cc
Picking Largest grew the page heading and the minicards and left the header bar, the left menu, the lists, the swimlane header and every popup exactly as they were. The preset was a percentage on the root element, and a root percentage only reaches text whose size is written in a relative unit: rem is measured against the root, em against its parent. WeKan writes most of its sizes in px, and px is absolute, so exactly the rem-sized parts scaled. The base rule made it worse: html, body, input, select, textarea, button re-stated font: 14px, so the body took the stock size straight back off the scaled root. The preset is published as a number as well (--wekan-ui-font-scale), and every px font-size and line-height in the client stylesheets - 433 declarations across 37 files - is written calc(14px * var(--wekan-ui-font-scale, 1)). line-height scales with the size on purpose: 21px of type in an 18px line box is the same setting half-applied. The base font rule is split into font-family and font-size, because the shorthand's size was the one thing the setting had to be able to move. Nothing renders differently until a preset is chosen: the fallback is 1 and the variable is removed for Default. tests/uiFonts.test.cjs fails on any bare px font-size or line-height, so a new one cannot quietly opt out of the setting; the two density guards unwrap the calc as they read the file, so each still pins the size it means. Thanks to xet7 !
124 lines
4.3 KiB
CSS
124 lines
4.3 KiB
CSS
#header #header-main-bar .setting-header-btn {
|
|
border-radius: 3px;
|
|
color: #f2f2f2;
|
|
margin-inline-start: 20px;
|
|
padding-inline-end: 10px;
|
|
height: 28px;
|
|
font-size: calc(13px * var(--wekan-ui-font-scale, 1));
|
|
float: inline-start;
|
|
overflow: hidden;
|
|
line-height: calc(28px * var(--wekan-ui-font-scale, 1));
|
|
margin: 0 2px;
|
|
}
|
|
#header #header-main-bar .setting-header-btn.active,
|
|
#header #header-main-bar .setting-header-btn:hover:not(.is-disabled) {
|
|
background: rgba(0,0,0,0.15);
|
|
}
|
|
#header #header-main-bar .setting-header-btn i.fa {
|
|
float: inline-start;
|
|
display: block;
|
|
line-height: calc(28px * var(--wekan-ui-font-scale, 1));
|
|
color: #f2f2f2;
|
|
margin: 0 10px;
|
|
}
|
|
#header #header-main-bar .setting-header-btn + span {
|
|
display: inline-block;
|
|
margin-top: 1px;
|
|
margin-inline-end: 10px;
|
|
}
|
|
|
|
/* Keep all admin tabs (Settings, People, Reports, Attachments, Translation,
|
|
Version) visible on narrow screens. The bar is a fixed 40px tall and the
|
|
tabs float, so on narrow widths they wrapped below the bar and were clipped
|
|
(disappeared). Let the bar grow and wrap the tabs to as many rows as needed
|
|
so none are ever hidden. Scoped via :has() so the board header is untouched. */
|
|
#header #header-main-bar:has(.setting-header-btns) {
|
|
height: auto;
|
|
min-height: 40px;
|
|
padding-bottom: 6px;
|
|
overflow: visible;
|
|
}
|
|
#header #header-main-bar .setting-header-btns.left {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 4px;
|
|
float: none;
|
|
}
|
|
#header #header-main-bar .setting-header-btn {
|
|
float: none;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
/* #6419: the admin panel's 2nd top bar (settingHeaderBar) is rendered inside
|
|
#header-quick-access, whose mobile rules scale ALL text/icons 2x
|
|
(`#header-quick-access * { font-size: inherit }` + `.fa { font-size: 2em }`).
|
|
That made the admin tab buttons 28px text / 56px icons — huge, overlapping the
|
|
"Version" label and the content below. Cap them at a normal touch size on small
|
|
screens. Selectors are more specific than the 2em rules (and repeated for the
|
|
.iphone-device JS-detection fallback) so they win. */
|
|
@media screen and (max-width: 800px) {
|
|
#header-quick-access .setting-header-btns .setting-header-btn,
|
|
#header #header-main-bar .setting-header-btns .setting-header-btn,
|
|
#header-quick-access .setting-header-btns .setting-header-btn span,
|
|
#header #header-main-bar .setting-header-btns .setting-header-btn span {
|
|
font-size: calc(15px * var(--wekan-ui-font-scale, 1)) !important;
|
|
}
|
|
#header-quick-access .setting-header-btns .setting-header-btn i.fa,
|
|
#header #header-main-bar .setting-header-btns .setting-header-btn i.fa {
|
|
font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
|
|
}
|
|
}
|
|
.iphone-device #header-quick-access .setting-header-btns .setting-header-btn,
|
|
.iphone-device #header-quick-access .setting-header-btns .setting-header-btn span {
|
|
font-size: calc(15px * var(--wekan-ui-font-scale, 1)) !important;
|
|
}
|
|
.iphone-device #header-quick-access .setting-header-btns .setting-header-btn i.fa {
|
|
font-size: calc(18px * var(--wekan-ui-font-scale, 1)) !important;
|
|
}
|
|
|
|
/* Admin Panel problem banner (Reports → Security/Speed/Tests new-problem info).
|
|
Design: docs/Security/Remediation/WeKan.md. Shown under the settingHeaderBar h1;
|
|
each area names its menu path + new count and has an Acknowledge button. */
|
|
.admin-problem-banner {
|
|
margin: 6px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.admin-problem-banner .admin-problem-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
background: #fdecea;
|
|
color: #611a15;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.admin-problem-banner .admin-problem-item .fa-exclamation-triangle {
|
|
color: #c0392b;
|
|
}
|
|
.admin-problem-banner .admin-problem-path {
|
|
font-weight: bold;
|
|
}
|
|
.admin-problem-banner .admin-problem-count {
|
|
margin-inline-start: auto;
|
|
}
|
|
.admin-problem-banner .js-ack-problems {
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Problems button turns red when there are new (unacknowledged) Security/Speed/
|
|
Tests problems (settingHeader.js problemsClass). */
|
|
.setting-header-btn.problems.has-problems,
|
|
.setting-header-btn.problems.has-problems:hover {
|
|
background-color: #c0392b;
|
|
color: #fff;
|
|
}
|
|
.setting-header-btn.problems.has-problems i,
|
|
.setting-header-btn.problems.has-problems span {
|
|
color: #fff;
|
|
}
|