1
0
Fork 0
forked from forgejo/forgejo

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

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

View file

@ -32,7 +32,7 @@
}
.admin dl.admin-dl-horizontal dt {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
width: 220px;
margin-right: 5px;
overflow: hidden;

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;
}

View file

@ -41,7 +41,7 @@
/* GenericStrong */
.chroma .gs {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
}
/* GenericUnderline */

View file

@ -91,7 +91,7 @@ text-expander .suggestions li {
align-items: center;
cursor: pointer;
padding: 4px 8px;
font-weight: 500;
font-weight: var(--font-weight-medium);
}
text-expander .suggestions li + li {
@ -115,7 +115,7 @@ text-expander .suggestions li:hover {
}
text-expander .suggestions .fullname {
font-weight: normal;
font-weight: var(--font-weight-normal);
margin-left: 4px;
color: var(--color-text-light-1);
}

View file

@ -26,7 +26,7 @@
}
.image-diff-container .diff-side-by-side .side .side-header {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
}
.image-diff-container .diff-swipe {

View file

@ -15,7 +15,7 @@
}
.tribute-container li span.fullname {
font-weight: normal;
font-weight: var(--font-weight-normal);
font-size: 0.8rem;
margin-left: 3px;
}

View file

@ -51,7 +51,7 @@
local("SourceHanSans-Light"), local("Yu Gothic Regular"),
local("YuGothic Regular"), local("Droid Sans Japanese"), local("Meiryo"),
local("MS PGothic");
font-weight: 300;
font-weight: var(--font-weight-light);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -66,7 +66,7 @@
local("SourceHanSans-Regular"), local("Yu Gothic Medium"),
local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
local("MS PGothic");
font-weight: 400;
font-weight: var(--font-weight-normal);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -81,7 +81,7 @@
local("SourceHanSans-Medium"), local("Yu Gothic Medium"),
local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
local("MS PGothic");
font-weight: 500;
font-weight: var(--font-weight-medium);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -95,7 +95,7 @@
local("NotoSansCJKJP-Bold"), local("Source Han Sans Bold"),
local("SourceHanSans-Bold"), local("Yu Gothic Bold"), local("YuGothic Bold"),
local("Droid Sans Japanese"), local("Meiryo Bold"), local("MS PGothic");
font-weight: 700;
font-weight: var(--font-weight-semibold);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -124,7 +124,7 @@
local("NotoSansCJKSC-Light"), local("HiraginoSansGB-W3"),
local("Hiragino Sans GB W3"), local("Microsoft YaHei Light"),
local("Heiti SC Light"), local("SimHei");
font-weight: 300;
font-weight: var(--font-weight-light);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -137,7 +137,7 @@
local("NotoSansCJKSC-Regular"), local("HiraginoSansGB-W3"),
local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
local("Heiti SC Light"), local("SimHei");
font-weight: 400;
font-weight: var(--font-weight-normal);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -150,7 +150,7 @@
local("NotoSansCJKSC-Medium"), local("HiraginoSansGB-W3"),
local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
local("Heiti SC Light"), local("SimHei");
font-weight: 500;
font-weight: var(--font-weight-medium);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -163,7 +163,7 @@
local("NotoSansCJKSC-Bold"), local("HiraginoSansGB-W6"),
local("Hiragino Sans GB W6"), local("Microsoft YaHei Bold"),
local("Heiti SC Medium"), local("SimHei");
font-weight: 700;
font-weight: var(--font-weight-semibold);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -192,7 +192,7 @@
local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
local("Heiti TC Light"), local("PMingLiU");
font-weight: 300;
font-weight: var(--font-weight-light);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -205,7 +205,7 @@
local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
local("Heiti TC Light"), local("PMingLiU");
font-weight: 400;
font-weight: var(--font-weight-normal);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -218,7 +218,7 @@
local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
local("Heiti TC Light"), local("PMingLiU");
font-weight: 500;
font-weight: var(--font-weight-medium);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -231,7 +231,7 @@
local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
local("Heiti TC Medium"), local("PMingLiU");
font-weight: 700;
font-weight: var(--font-weight-semibold);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -262,7 +262,7 @@
local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
font-weight: 300;
font-weight: var(--font-weight-light);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -277,7 +277,7 @@
local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
font-weight: 400;
font-weight: var(--font-weight-normal);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -292,7 +292,7 @@
local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
font-weight: 500;
font-weight: var(--font-weight-medium);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -307,7 +307,7 @@
local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
local("Heiti TC Medium"), local("PMingLiU_HKSCS"), local("PMingLiU");
font-weight: 700;
font-weight: var(--font-weight-semibold);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -335,7 +335,7 @@
local("SourceHanSansK-Light"), local("Noto Sans CJK KR Light"),
local("NotoSansCJKKR-Light"), local("NanumBarunGothic Light"),
local("Malgun Gothic Semilight"), local("Nanum Gothic"), local("Dotum");
font-weight: 300;
font-weight: var(--font-weight-light);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -347,7 +347,7 @@
local("SourceHanSansK-Regular"), local("Noto Sans CJK KR Regular"),
local("NotoSansCJKKR-Regular"), local("NanumBarunGothic"),
local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
font-weight: 400;
font-weight: var(--font-weight-normal);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -359,7 +359,7 @@
local("SourceHanSansK-Medium"), local("Noto Sans CJK KR Medium"),
local("NotoSansCJKKR-Medium"), local("NanumBarunGothic"),
local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
font-weight: 500;
font-weight: var(--font-weight-medium);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}
@ -371,7 +371,7 @@
local("SourceHanSansK-Bold"), local("Noto Sans CJK KR Bold"),
local("NotoSansCJKKR-Bold"), local("NanumBarunGothic Bold"),
local("Malgun Gothic Bold"), local("Nanum Gothic Bold"), local("Dotum");
font-weight: 700;
font-weight: var(--font-weight-semibold);
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
}

View file

@ -29,8 +29,6 @@ Gitea's private styles use `g-` prefix.
font-size: .95em !important; /* compensate for monospace fonts being usually slightly larger */
}
.gt-bold { font-weight: var(--font-weight-bold) !important; }
.gt-word-break {
word-wrap: break-word !important;
word-break: break-word; /* compat: Safari */
@ -86,6 +84,11 @@ Gitea's private styles use `g-` prefix.
.gt-float-left { float: left !important; }
.gt-float-right { float: right !important; }
.gt-font-light { font-weight: var(--font-weight-light) !important };
.gt-font-normal { font-weight: var(--font-weight-normal) !important };
.gt-font-medium { font-weight: var(--font-weight-medium) !important };
.gt-font-semibold { font-weight: var(--font-weight-semibold) !important };
.gt-rounded { border-radius: var(--border-radius) !important; }
.gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
.gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }

View file

@ -55,7 +55,7 @@
margin: 20px auto;
color: var(--color-red);
text-align: left;
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
}
.page-content.install .ui .reinstall-confirm {

View file

@ -74,7 +74,7 @@
.markup h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
line-height: 1.25;
}
@ -252,7 +252,7 @@
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
}
.markup dl dd {
@ -284,7 +284,7 @@
}
.markup table th {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
}
.markup table th,

View file

@ -56,7 +56,7 @@
.ui.cards > .card > .content > .header:not(.ui),
.ui.card > .content > .header:not(.ui) {
font-weight: 500;
font-weight: var(--font-weight-medium);
font-size: 1.28571429em;
margin-top: -.21425em;
line-height: 1.28571429em;

View file

@ -61,7 +61,7 @@
.ui.comments .comment .author {
font-size: 1em;
font-weight: 500;
font-weight: var(--font-weight-medium);
}
.ui.comments .comment a.author {

View file

@ -230,7 +230,7 @@
.repository.file.list #repo-files-table thead th {
padding-top: 8px;
padding-bottom: 5px;
font-weight: normal;
font-weight: var(--font-weight-normal);
}
.repository.file.list #repo-files-table thead .ui.avatar {
@ -627,7 +627,7 @@
align-items: center;
flex: 1;
width: 100%;
font-weight: 300;
font-weight: var(--font-weight-normal);
font-size: 32px;
line-height: 40px;
margin: 0;
@ -1305,7 +1305,7 @@
}
.repository.commits .header .search input {
font-weight: normal;
font-weight: var(--font-weight-normal);
padding: 5px 10px;
}
@ -1533,7 +1533,7 @@
}
.repository .data-table th {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
background: var(--color-box-header);
border-top: 0;
}
@ -1880,7 +1880,7 @@
}
.repository.quickstart .guide .item small {
font-weight: normal;
font-weight: var(--font-weight-normal);
}
.repository.quickstart .guide .clone.button:first-child {
@ -1991,7 +1991,7 @@
}
.repository.settings.branches .branch-protection .status-check-matched-mark {
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
font-style: italic;
}
@ -2185,7 +2185,7 @@
border-radius: 0;
margin: 0;
font-size: 14px;
font-weight: normal;
font-weight: var(--font-weight-normal);
border-color: var(--color-secondary) !important;
background: var(--color-reaction-bg);
}
@ -2347,7 +2347,7 @@
.user-cards .list .item .name {
margin-top: 0;
margin-bottom: 0;
font-weight: normal;
font-weight: var(--font-weight-normal);
}
.user-cards .list .item .meta {
@ -2465,7 +2465,7 @@
border: none !important;
background: var(--color-box-header);
border-bottom: 1px solid var(--color-secondary) !important;
font-weight: normal !important;
font-weight: var(--font-weight-normal) !important;
padding: 0.5rem 1rem;
margin: 0 !important;
position: relative;
@ -2828,7 +2828,7 @@ tbody.commit-list {
}
#repo-topics .repo-topic {
font-weight: normal;
font-weight: var(--font-weight-normal);
cursor: pointer;
margin: 2px;
}
@ -2933,7 +2933,7 @@ tbody.commit-list {
}
.resolved-placeholder {
font-weight: normal !important;
font-weight: var(--font-weight-normal) !important;
border: 1px solid var(--color-secondary) !important;
border-radius: var(--border-radius) !important;
margin: 4px !important;

View file

@ -6,7 +6,7 @@
.repository.releases #release-list .release-list-title {
font-size: 2rem;
font-weight: normal;
font-weight: var(--font-weight-normal);
margin-top: -4px;
margin-bottom: 0;
}
@ -87,7 +87,7 @@
.repository.tags #tags-table .release-tag-name {
font-size: 18px;
font-weight: normal;
font-weight: var(--font-weight-normal);
}
.repository.new.release .target {

View file

@ -33,7 +33,7 @@
color: var(--color-text);
font-size: 16px;
min-width: 0;
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
}
.issue.list > .item .issue-item-top-row a.index {

View file

@ -1,6 +1,6 @@
.user.profile .ui.card .header {
display: block;
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-semibold);
font-size: 1.3rem;
margin-top: -0.2rem;
line-height: 1.3rem;