nune/gitea
nune/gitea
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Change --font-weight-bold to --font-weight-semibold and 600 value, introduce new font weight variables (#24827)

Browse source 
There was some recent discussion about this in Discord `ui-design`
channel and the conclusion was that
https://github.com/go-gitea/gitea/issues/24305 should have fixed their
OS font installation to have semibold weights.

I have now tested this 601 weight on a Windows 10 machine on Firefox
myself, and I immediately noticed that bold was excessivly bold and
rendering as 700 because browsers are biased towards bolder fonts. So
revert this back to the previous value.
This commit is contained in:
silverwind 2023-05-22 01:37:32 +02:00 • committed by GitHub
parent 4647660776
commit 19993d8814
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 82 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

35
web_src/css/base.css
View file

@ -3,10 +3,11 @@
--fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
--fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
--fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
/* "font-weight: bold" starts from 700, some fonts do not provide "bolding" for weight 600. */
/* But some users consider "700" is too heavy, so use 601, which is when Segoe UI on Linux */
/* starts bolding. */
--font-weight-bold: 601;
/* font weights - use between 400 and 600 for general purposes */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* backgrounds */
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
@ -218,7 +219,7 @@ h3,
h4,
h5,
h6 {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
}
body {
@ -891,7 +892,7 @@ a.label,
.ui.dropdown .menu .active.item {
color: var(--color-text);
background: var(--color-active);
font-weight: normal;
font-weight: var(--font-weight-normal);
}
/* fix misaligned images in webhook dropdown */
@ -1436,7 +1437,7 @@ img.ui.avatar,
}
.ui.form .ui.button {
font-weight: normal;
font-weight: var(--font-weight-normal);
}
.ui.floating.label {
@ -1494,7 +1495,7 @@ img.ui.avatar,
}
.ui .text.normal {
font-weight: normal;
font-weight: var(--font-weight-normal);
}
.ui .text.italic {
@ -1509,7 +1510,7 @@ img.ui.avatar,
}
.ui .text.thin {
font-weight: normal;
font-weight: var(--font-weight-normal);
}
.ui .text.middle {
@ -1546,7 +1547,7 @@ img.ui.avatar,
}
.ui .normal.header {
font-weight: normal;
font-weight: var(--font-weight-normal);
}
.ui .form .autofill-dummy {
@ -1565,7 +1566,7 @@ img.ui.avatar,
font-family: var(--fonts-monospace);
font-size: 13px;
padding: 6px 10px 4px;
font-weight: normal;
font-weight: var(--font-weight-normal);
margin: 0 6px;
}
@ -1592,7 +1593,7 @@ img.ui.avatar,
.ui.inline.delete-button {
padding: 8px 15px;
font-weight: normal;
font-weight: var(--font-weight-normal);
}
.ui .background.red {
@ -1736,7 +1737,7 @@ img.ui.avatar,
}
.scrolling.menu .item.selected {
font-weight: var(--font-weight-bold) !important;
font-weight: var(--font-weight-semibold) !important;
}
.ui.dropdown .scrolling.menu {
@ -2486,7 +2487,7 @@ a.ui.basic.label:hover {
.ui.attached.header .right .button {
padding: 8px 10px;
font-weight: normal;
font-weight: var(--font-weight-normal);
}
/* reduce height of buttons with dropdown icon */
@ -2534,7 +2535,7 @@ a.ui.basic.label:hover {
padding: 2.75px;
border-radius: 1em;
font-size: 11px;
font-weight: 700;
font-weight: var(--font-weight-semibold);
line-height: .67em;
}
@ -2614,7 +2615,7 @@ table th[data-sortt-desc] .svg {
font-size: 1.25em;
line-height: 1;
font-style: normal !important;
font-weight: normal !important;
font-weight: var(--font-weight-normal) !important;
vertical-align: -0.075em;
}
@ -2721,7 +2722,7 @@ table th[data-sortt-desc] .svg {
.ellipsis-button {
padding: 0 5px 8px !important;
display: inline-block !important;
font-weight: var(--font-weight-bold) !important;
font-weight: var(--font-weight-semibold) !important;
line-height: 6px !important;
vertical-align: middle !important;
}