luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-05-14 05:52:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Use CSS Variables for fonts, remove postcss-loader (#13204)

Browse source 
* Use CSS Variables for fonts, remove postcss-loader

- Use CSS variables for fonts, making the fonts easier to customize
- Remove postcss-loader, it's not doing anything useful and is actually
  applying strange transforms on our CSS.

Fixes: https://github.com/go-gitea/gitea/issues/11045

* introduce helper variable, mark documented vars

* work around case issue by always quoting specific fonts
This commit is contained in:
silverwind 2020-10-19 22:01:06 +02:00 • committed by GitHub
parent d67172b136
commit 3ddf3f93d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 120 additions and 659 deletions
Download patch file Download diff file Expand all files Collapse all files

188
web_src/less/_base.less
View file

@ -1,86 +1,99 @@
:root {
/* documented customizable variables */
--fonts-proportional: -apple-system, "BlinkMacSystemFont", system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial";
--fonts-monospace: "SF Mono", "Consolas", "Menlo", "Liberation Mono", "Monaco", "Lucida Console", monospace;
--fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
/* other variables */
--fonts-regular: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
}
:root:lang(ja) {
--fonts-proportional: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Source Han Sans JP", "Noto Sans CJK JP", "Droid Sans Japanese", "Meiryo", "MS PGothic";
}
:root:lang(zh-CN) {
--fonts-proportional: "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Heiti SC", "SimHei";
}
:root:lang(zh-TW) {
--fonts-proportional: "PingFang TC", "Hiragino Sans TC", "Source Han Sans TW", "Source Han Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", "PMingLiU";
}
:root:lang(zh-HK) {
--fonts-proportional: "PingFang HK", "Hiragino Sans TC", "Source Han Sans HK", "Source Han Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", "PMingLiU_HKSCS", "PMingLiU";
}
:root:lang(ko) {
--fonts-proportional: "Apple SD Gothic Neo", "NanumBarunGothic", "Malgun Gothic", "Gulim", "Dotum", "Nanum Gothic", "Source Han Sans KR", "Noto Sans CJK KR";
}
@font-face {
font-family: 'Yu Gothic';
src: local('Yu Gothic Medium');
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: 'Yu Gothic';
src: local('Yu Gothic Bold');
font-family: "Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: 700;
}
@font-face {
font-family: 'Noto Color Emoji';
font-family: "Noto Color Emoji";
src:
local('Noto Color Emoji'),
local('Noto-Color-Emoji'),
url('../fonts/noto-color-emoji/NotoColorEmoji.ttf') format('truetype');
local("Noto Color Emoji"),
local("Noto-Color-Emoji"),
url("../fonts/noto-color-emoji/NotoColorEmoji.ttf") format("truetype");
}
@default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
@monospaced-fonts: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console';
.override-fonts(@fonts) {
textarea {
font-family: @fonts;
}
.markdown:not(code) {
font-family: @fonts;
}
/* We're going to just override the semantic fonts here */
h1,
h2,
h3,
h4,
h5 {
font-family: @fonts;
}
.ui.accordion .title:not(.ui),
.ui.button,
.ui.card > .content > .header.ui.card > .content > .header,
.ui.category.search > .results .category > .name,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.header,
.ui.items > .item > .content > .header,
.ui.list .list > .item .header,
.ui.list > .item .header,
.ui.menu,
.ui.message .header,
.ui.modal > .header,
.ui.popup > .header,
.ui.search > .results .result .title,
.ui.search > .results > .message .header,
body,
.ui.input > input,
.ui.input input,
.ui.statistics .statistic > .value,
.ui.statistic > .value,
.ui.statistics .statistic > .label,
.ui.statistic > .label,
.ui.steps .step .title,
.ui.text.container,
.ui.language > .menu > .item& {
font-family: @fonts;
}
/* Most of these selectors override fomantic ui */
body,
textarea,
h1,
h2,
h3,
h4,
h5,
.markdown:not(code),
.ui.accordion .title:not(.ui),
.ui.button,
.ui.card > .content > .header.ui.card > .content > .header,
.ui.category.search > .results .category > .name,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.header,
.ui.items > .item > .content > .header,
.ui.list .list > .item .header,
.ui.list > .item .header,
.ui.menu,
.ui.message .header,
.ui.modal > .header,
.ui.popup > .header,
.ui.search > .results .result .title,
.ui.search > .results > .message .header,
.ui.input > input,
.ui.input input,
.ui.statistics .statistic > .value,
.ui.statistic > .value,
.ui.statistics .statistic > .label,
.ui.statistic > .label,
.ui.steps .step .title,
.ui.text.container,
.ui.language > .menu > .item {
font-family: var(--fonts-regular);
}
.override-fonts(@default-fonts, sans-serif;);
body {
background-color: #ffffff;
overflow-y: auto;
@ -88,31 +101,6 @@ body {
flex-direction: column;
}
@ja-fonts: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Droid Sans Japanese', 'Meiryo', 'MS PGothic';
:lang(ja) {
.override-fonts(@default-fonts, @ja-fonts, sans-serif;);
}
@zh-CN-fonts: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Heiti SC', SimHei;
:lang(zh-CN) {
.override-fonts(@default-fonts, @zh-CN-fonts, sans-serif;);
}
@zh-TW-fonts: 'PingFang TC', 'Hiragino Sans TC', 'Source Han Sans TW', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU;
:lang(zh-TW) {
.override-fonts(@default-fonts, @zh-TW-fonts, sans-serif;);
}
@zh-HK-fonts: 'PingFang HK', 'Hiragino Sans TC', 'Source Han Sans HK', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU_HKSCS, PMingLiU;
:lang(zh-HK) {
.override-fonts(@default-fonts, @zh-HK-fonts, sans-serif;);
}
@ko-fonts: 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Malgun Gothic', 'Gulim', 'Dotum', 'Nanum Gothic', 'Source Han Sans KR', 'Noto Sans CJK KR';
:lang(ko) {
.override-fonts(@default-fonts, @ko-fonts, sans-serif;);
}
img {
border-radius: 3px;
}
@ -137,7 +125,7 @@ a {
pre,
code,
.mono {
font: 12px @monospaced-fonts, monospace;
font: 12px var(--fonts-monospace);
&.raw {
padding: 7px 12px;
@ -545,7 +533,7 @@ code,
}
.sha.label {
font-family: @monospaced-fonts, monospace;
font-family: var(--fonts-monospace);
font-size: 13px;
padding: 6px 10px 4px;
font-weight: normal;
@ -694,7 +682,7 @@ code,
}
.file-comment {
font: 12px @monospaced-fonts, monospace;
font: 12px var(--fonts-monospace);
color: rgba(0, 0, 0, .87);
}
@ -1008,7 +996,7 @@ i.icon.centerlock {
color: rgba(27, 31, 35, .3);
width: 1%;
user-select: none;
font-family: @monospaced-fonts, monospace;
font-family: var(--fonts-monospace);
span {
&.bottom-line {
@ -1089,7 +1077,7 @@ i.icon.centerlock {
.blame-data {
display: flex;
font-family: @default-fonts, sans-serif;
font-family: var(--fonts-regular);
.blame-message {
flex-grow: 2;
@ -1131,7 +1119,7 @@ i.icon.centerlock {
*:not(.fa):not(.svg):not(.icon) {
font-size: 12px;
font-family: @monospaced-fonts, monospace;
font-family: var(--fonts-monospace);
line-height: 20px;
}

2
web_src/less/_dashboard.less
View file

@ -128,7 +128,7 @@
}
.commit-id {
font-family: @monospaced-fonts, monospace;
font-family: var(--fonts-monospace);
}
code {

2
web_src/less/_editor.less
View file

@ -1,5 +1,5 @@
.CodeMirror {
font: 14px @monospaced-fonts, monospace;
font: 14px var(--fonts-monospace);
&.cm-s-default {
border-radius: 3px;

2
web_src/less/_form.less
View file

@ -238,7 +238,7 @@
.githook {
textarea {
font-family: @monospaced-fonts, monospace;
font-family: var(--fonts-monospace);
}
}

8
web_src/less/_repository.less
View file

@ -545,7 +545,7 @@
.branch-name {
display: inline-block;
padding: 3px 6px;
font: 12px @monospaced-fonts, monospace;
font: 12px var(--fonts-monospace);
color: rgba(0, 0, 0, .65);
background-color: rgba(209, 227, 237, .45);
border-radius: 3px;
@ -1162,7 +1162,7 @@
textarea {
height: 200px;
font-family: @monospaced-fonts, monospace;
font-family: var(--fonts-monospace);
}
}
@ -1277,7 +1277,7 @@
textarea {
height: 200px;
font-family: @monospaced-fonts, monospace;
font-family: var(--fonts-monospace);
}
}
}
@ -2096,7 +2096,7 @@
&.new {
.CodeMirror {
.CodeMirror-code {
font-family: @monospaced-fonts, monospace;
font-family: var(--fonts-monospace);
.cm-comment {
background: inherit;

2
web_src/less/_review.less
View file

@ -129,7 +129,7 @@
}
.file-comment {
font: 12px @monospaced-fonts, monospace;
font: 12px var(--fonts-monospace);
color: rgba(0, 0, 0, .87);
}