Skip to content

Commit 3ddf3f9

Browse files
silverwindsilverwind
authored
Use CSS Variables for fonts, remove postcss-loader (#13204)
* 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: #11045 * introduce helper variable, mark documented vars * work around case issue by always quoting specific fonts
1 parent d67172b commit 3ddf3f9

10 files changed

+123
-662
lines changed

‎docs/content/doc/advanced/customizing-gitea.en-us.md

+12
Original file line numberDiff line numberDiff line change
@@ -295,3 +295,15 @@ A full list of supported emoji's is at [emoji list](https://gitea.com/gitea/gite
295295

296296
As of version 1.6.0 Gitea has built-in themes. The two built-in themes are, the default theme `gitea`, and a dark theme `arc-green`. To change the look of your Gitea install change the value of `DEFAULT_THEME` in the [ui](https://docs.gitea.io/en-us/config-cheat-sheet/#ui-ui) section of `app.ini` to another one of the available options.
297297
As of version 1.8.0 Gitea also has per-user themes. The list of themes a user can choose from can be configured with the `THEMES` value in the [ui](https://docs.gitea.io/en-us/config-cheat-sheet/#ui-ui) section of `app.ini` (defaults to `gitea` and `arc-green`, light and dark respectively)
298+
299+
## Customizing fonts
300+
301+
Fonts can be customized using CSS variables:
302+
303+
```css
304+
:root {
305+
--fonts-proportional: /* custom proportional fonts */ !important;
306+
--fonts-monospace: /* custom monospace fonts */ !important;
307+
--fonts-emoji: /* custom emoji fonts */ !important;
308+
}
309+
```

‎package-lock.json

+11-510
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

-3
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,6 @@
3232
"mini-css-extract-plugin": "0.11.1",
3333
"monaco-editor": "0.20.0",
3434
"monaco-editor-webpack-plugin": "1.9.0",
35-
"postcss": "7.0.32",
36-
"postcss-loader": "4.0.1",
37-
"postcss-preset-env": "6.7.0",
3835
"raw-loader": "4.0.1",
3936
"sortablejs": "1.10.2",
4037
"swagger-ui": "3.32.5",

‎web_src/less/_base.less

+91-103
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,98 @@
1+
:root {
2+
/* documented customizable variables */
3+
--fonts-proportional: -apple-system, "BlinkMacSystemFont", system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial";
4+
--fonts-monospace: "SF Mono", "Consolas", "Menlo", "Liberation Mono", "Monaco", "Lucida Console", monospace;
5+
--fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
6+
/* other variables */
7+
--fonts-regular: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
8+
}
9+
10+
:root:lang(ja) {
11+
--fonts-proportional: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Source Han Sans JP", "Noto Sans CJK JP", "Droid Sans Japanese", "Meiryo", "MS PGothic";
12+
}
13+
14+
:root:lang(zh-CN) {
15+
--fonts-proportional: "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Heiti SC", "SimHei";
16+
}
17+
18+
:root:lang(zh-TW) {
19+
--fonts-proportional: "PingFang TC", "Hiragino Sans TC", "Source Han Sans TW", "Source Han Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", "PMingLiU";
20+
}
21+
22+
:root:lang(zh-HK) {
23+
--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";
24+
}
25+
26+
:root:lang(ko) {
27+
--fonts-proportional: "Apple SD Gothic Neo", "NanumBarunGothic", "Malgun Gothic", "Gulim", "Dotum", "Nanum Gothic", "Source Han Sans KR", "Noto Sans CJK KR";
28+
}
29+
130
@font-face {
2-
font-family: 'Yu Gothic';
3-
src: local('Yu Gothic Medium');
31+
font-family: "Yu Gothic";
32+
src: local("Yu Gothic Medium");
433
font-weight: 400;
534
}
635

736
@font-face {
8-
font-family: 'Yu Gothic';
9-
src: local('Yu Gothic Bold');
37+
font-family: "Yu Gothic";
38+
src: local("Yu Gothic Bold");
1039
font-weight: 700;
1140
}
1241

1342
@font-face {
14-
font-family: 'Noto Color Emoji';
43+
font-family: "Noto Color Emoji";
1544
src:
16-
local('Noto Color Emoji'),
17-
local('Noto-Color-Emoji'),
18-
url('../fonts/noto-color-emoji/NotoColorEmoji.ttf') format('truetype');
19-
}
20-
21-
@default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
22-
@monospaced-fonts: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console';
23-
24-
.override-fonts(@fonts) {
25-
textarea {
26-
font-family: @fonts;
27-
}
28-
29-
.markdown:not(code) {
30-
font-family: @fonts;
31-
}
32-
33-
/* We're going to just override the semantic fonts here */
34-
h1,
35-
h2,
36-
h3,
37-
h4,
38-
h5 {
39-
font-family: @fonts;
40-
}
41-
42-
.ui.accordion .title:not(.ui),
43-
.ui.button,
44-
.ui.card > .content > .header.ui.card > .content > .header,
45-
.ui.category.search > .results .category > .name,
46-
.ui.form input:not([type]),
47-
.ui.form input[type="date"],
48-
.ui.form input[type="datetime-local"],
49-
.ui.form input[type="email"],
50-
.ui.form input[type="file"],
51-
.ui.form input[type="number"],
52-
.ui.form input[type="password"],
53-
.ui.form input[type="search"],
54-
.ui.form input[type="tel"],
55-
.ui.form input[type="text"],
56-
.ui.form input[type="time"],
57-
.ui.form input[type="url"],
58-
.ui.header,
59-
.ui.items > .item > .content > .header,
60-
.ui.list .list > .item .header,
61-
.ui.list > .item .header,
62-
.ui.menu,
63-
.ui.message .header,
64-
.ui.modal > .header,
65-
.ui.popup > .header,
66-
.ui.search > .results .result .title,
67-
.ui.search > .results > .message .header,
68-
body,
69-
.ui.input > input,
70-
.ui.input input,
71-
.ui.statistics .statistic > .value,
72-
.ui.statistic > .value,
73-
.ui.statistics .statistic > .label,
74-
.ui.statistic > .label,
75-
.ui.steps .step .title,
76-
.ui.text.container,
77-
.ui.language > .menu > .item& {
78-
font-family: @fonts;
79-
}
80-
}
81-
82-
.override-fonts(@default-fonts, sans-serif;);
45+
local("Noto Color Emoji"),
46+
local("Noto-Color-Emoji"),
47+
url("../fonts/noto-color-emoji/NotoColorEmoji.ttf") format("truetype");
48+
}
49+
50+
/* Most of these selectors override fomantic ui */
51+
body,
52+
textarea,
53+
h1,
54+
h2,
55+
h3,
56+
h4,
57+
h5,
58+
.markdown:not(code),
59+
.ui.accordion .title:not(.ui),
60+
.ui.button,
61+
.ui.card > .content > .header.ui.card > .content > .header,
62+
.ui.category.search > .results .category > .name,
63+
.ui.form input:not([type]),
64+
.ui.form input[type="date"],
65+
.ui.form input[type="datetime-local"],
66+
.ui.form input[type="email"],
67+
.ui.form input[type="file"],
68+
.ui.form input[type="number"],
69+
.ui.form input[type="password"],
70+
.ui.form input[type="search"],
71+
.ui.form input[type="tel"],
72+
.ui.form input[type="text"],
73+
.ui.form input[type="time"],
74+
.ui.form input[type="url"],
75+
.ui.header,
76+
.ui.items > .item > .content > .header,
77+
.ui.list .list > .item .header,
78+
.ui.list > .item .header,
79+
.ui.menu,
80+
.ui.message .header,
81+
.ui.modal > .header,
82+
.ui.popup > .header,
83+
.ui.search > .results .result .title,
84+
.ui.search > .results > .message .header,
85+
.ui.input > input,
86+
.ui.input input,
87+
.ui.statistics .statistic > .value,
88+
.ui.statistic > .value,
89+
.ui.statistics .statistic > .label,
90+
.ui.statistic > .label,
91+
.ui.steps .step .title,
92+
.ui.text.container,
93+
.ui.language > .menu > .item {
94+
font-family: var(--fonts-regular);
95+
}
8396

8497
body {
8598
background-color: #ffffff;
@@ -88,31 +101,6 @@ body {
88101
flex-direction: column;
89102
}
90103

91-
@ja-fonts: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Droid Sans Japanese', 'Meiryo', 'MS PGothic';
92-
:lang(ja) {
93-
.override-fonts(@default-fonts, @ja-fonts, sans-serif;);
94-
}
95-
96-
@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;
97-
:lang(zh-CN) {
98-
.override-fonts(@default-fonts, @zh-CN-fonts, sans-serif;);
99-
}
100-
101-
@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;
102-
:lang(zh-TW) {
103-
.override-fonts(@default-fonts, @zh-TW-fonts, sans-serif;);
104-
}
105-
106-
@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;
107-
:lang(zh-HK) {
108-
.override-fonts(@default-fonts, @zh-HK-fonts, sans-serif;);
109-
}
110-
111-
@ko-fonts: 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Malgun Gothic', 'Gulim', 'Dotum', 'Nanum Gothic', 'Source Han Sans KR', 'Noto Sans CJK KR';
112-
:lang(ko) {
113-
.override-fonts(@default-fonts, @ko-fonts, sans-serif;);
114-
}
115-
116104
img {
117105
border-radius: 3px;
118106
}
@@ -137,7 +125,7 @@ a {
137125
pre,
138126
code,
139127
.mono {
140-
font: 12px @monospaced-fonts, monospace;
128+
font: 12px var(--fonts-monospace);
141129

142130
&.raw {
143131
padding: 7px 12px;
@@ -545,7 +533,7 @@ code,
545533
}
546534

547535
.sha.label {
548-
font-family: @monospaced-fonts, monospace;
536+
font-family: var(--fonts-monospace);
549537
font-size: 13px;
550538
padding: 6px 10px 4px;
551539
font-weight: normal;
@@ -694,7 +682,7 @@ code,
694682
}
695683

696684
.file-comment {
697-
font: 12px @monospaced-fonts, monospace;
685+
font: 12px var(--fonts-monospace);
698686
color: rgba(0, 0, 0, .87);
699687
}
700688

@@ -1008,7 +996,7 @@ i.icon.centerlock {
1008996
color: rgba(27, 31, 35, .3);
1009997
width: 1%;
1010998
user-select: none;
1011-
font-family: @monospaced-fonts, monospace;
999+
font-family: var(--fonts-monospace);
10121000

10131001
span {
10141002
&.bottom-line {
@@ -1089,7 +1077,7 @@ i.icon.centerlock {
10891077

10901078
.blame-data {
10911079
display: flex;
1092-
font-family: @default-fonts, sans-serif;
1080+
font-family: var(--fonts-regular);
10931081

10941082
.blame-message {
10951083
flex-grow: 2;
@@ -1131,7 +1119,7 @@ i.icon.centerlock {
11311119

11321120
*:not(.fa):not(.svg):not(.icon) {
11331121
font-size: 12px;
1134-
font-family: @monospaced-fonts, monospace;
1122+
font-family: var(--fonts-monospace);
11351123
line-height: 20px;
11361124
}
11371125

‎web_src/less/_dashboard.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@
128128
}
129129

130130
.commit-id {
131-
font-family: @monospaced-fonts, monospace;
131+
font-family: var(--fonts-monospace);
132132
}
133133

134134
code {

‎web_src/less/_editor.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.CodeMirror {
2-
font: 14px @monospaced-fonts, monospace;
2+
font: 14px var(--fonts-monospace);
33

44
&.cm-s-default {
55
border-radius: 3px;

‎web_src/less/_form.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@
238238

239239
.githook {
240240
textarea {
241-
font-family: @monospaced-fonts, monospace;
241+
font-family: var(--fonts-monospace);
242242
}
243243
}
244244

‎web_src/less/_repository.less

+4-4
Original file line numberDiff line numberDiff line change
@@ -545,7 +545,7 @@
545545
.branch-name {
546546
display: inline-block;
547547
padding: 3px 6px;
548-
font: 12px @monospaced-fonts, monospace;
548+
font: 12px var(--fonts-monospace);
549549
color: rgba(0, 0, 0, .65);
550550
background-color: rgba(209, 227, 237, .45);
551551
border-radius: 3px;
@@ -1162,7 +1162,7 @@
11621162

11631163
textarea {
11641164
height: 200px;
1165-
font-family: @monospaced-fonts, monospace;
1165+
font-family: var(--fonts-monospace);
11661166
}
11671167
}
11681168

@@ -1277,7 +1277,7 @@
12771277

12781278
textarea {
12791279
height: 200px;
1280-
font-family: @monospaced-fonts, monospace;
1280+
font-family: var(--fonts-monospace);
12811281
}
12821282
}
12831283
}
@@ -2096,7 +2096,7 @@
20962096
&.new {
20972097
.CodeMirror {
20982098
.CodeMirror-code {
2099-
font-family: @monospaced-fonts, monospace;
2099+
font-family: var(--fonts-monospace);
21002100

21012101
.cm-comment {
21022102
background: inherit;

‎web_src/less/_review.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
}
130130

131131
.file-comment {
132-
font: 12px @monospaced-fonts, monospace;
132+
font: 12px var(--fonts-monospace);
133133
color: rgba(0, 0, 0, .87);
134134
}
135135

0 commit comments

Comments
 (0)