Skip to content

Commit be4eeea

Browse files
silverwindsilverwind
committed
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: go-gitea#11045
1 parent 4077993 commit be4eeea

11 files changed

+111
-652
lines changed

‎.stylelintrc

+1
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@ rules:
1313
rule-empty-line-before: null
1414
selector-pseudo-element-colon-notation: null
1515
shorthand-property-no-redundant-values: true
16+
value-keyword-case: null

‎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

+78-93
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,29 @@
1+
:root {
2+
--fonts-proportional: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial;
3+
--fonts-monospace: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console', monospace;
4+
--fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
5+
}
6+
7+
:root:lang(ja) {
8+
--fonts-proportional: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Droid Sans Japanese', 'Meiryo', 'MS PGothic';
9+
}
10+
11+
:root:lang(zh-CN) {
12+
--fonts-proportional: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Heiti SC', SimHei;
13+
}
14+
15+
:root:lang(zh-TW) {
16+
--fonts-proportional: 'PingFang TC', 'Hiragino Sans TC', 'Source Han Sans TW', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU;
17+
}
18+
19+
:root:lang(zh-HK) {
20+
--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;
21+
}
22+
23+
:root:lang(ko) {
24+
--fonts-proportional: 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Malgun Gothic', 'Gulim', 'Dotum', 'Nanum Gothic', 'Source Han Sans KR', 'Noto Sans CJK KR';
25+
}
26+
127
@font-face {
228
font-family: 'Yu Gothic';
329
src: local('Yu Gothic Medium');
@@ -18,68 +44,52 @@
1844
url('../fonts/noto-color-emoji/NotoColorEmoji.ttf') format('truetype');
1945
}
2046

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;);
47+
/* Most of these selectors override fomantic ui */
48+
body,
49+
textarea,
50+
h1,
51+
h2,
52+
h3,
53+
h4,
54+
h5,
55+
.markdown:not(code),
56+
.ui.accordion .title:not(.ui),
57+
.ui.button,
58+
.ui.card > .content > .header.ui.card > .content > .header,
59+
.ui.category.search > .results .category > .name,
60+
.ui.form input:not([type]),
61+
.ui.form input[type="date"],
62+
.ui.form input[type="datetime-local"],
63+
.ui.form input[type="email"],
64+
.ui.form input[type="file"],
65+
.ui.form input[type="number"],
66+
.ui.form input[type="password"],
67+
.ui.form input[type="search"],
68+
.ui.form input[type="tel"],
69+
.ui.form input[type="text"],
70+
.ui.form input[type="time"],
71+
.ui.form input[type="url"],
72+
.ui.header,
73+
.ui.items > .item > .content > .header,
74+
.ui.list .list > .item .header,
75+
.ui.list > .item .header,
76+
.ui.menu,
77+
.ui.message .header,
78+
.ui.modal > .header,
79+
.ui.popup > .header,
80+
.ui.search > .results .result .title,
81+
.ui.search > .results > .message .header,
82+
.ui.input > input,
83+
.ui.input input,
84+
.ui.statistics .statistic > .value,
85+
.ui.statistic > .value,
86+
.ui.statistics .statistic > .label,
87+
.ui.statistic > .label,
88+
.ui.steps .step .title,
89+
.ui.text.container,
90+
.ui.language > .menu > .item {
91+
font-family: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
92+
}
8393

8494
body {
8595
background-color: #ffffff;
@@ -88,31 +98,6 @@ body {
8898
flex-direction: column;
8999
}
90100

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-
116101
img {
117102
border-radius: 3px;
118103
}
@@ -137,7 +122,7 @@ a {
137122
pre,
138123
code,
139124
.mono {
140-
font: 12px @monospaced-fonts, monospace;
125+
font: 12px var(--fonts-monospace);
141126

142127
&.raw {
143128
padding: 7px 12px;
@@ -545,7 +530,7 @@ code,
545530
}
546531

547532
.sha.label {
548-
font-family: @monospaced-fonts, monospace;
533+
font-family: var(--fonts-monospace);
549534
font-size: 13px;
550535
padding: 6px 10px 4px;
551536
font-weight: normal;
@@ -694,7 +679,7 @@ code,
694679
}
695680

696681
.file-comment {
697-
font: 12px @monospaced-fonts, monospace;
682+
font: 12px var(--fonts-monospace);
698683
color: rgba(0, 0, 0, .87);
699684
}
700685

@@ -1008,7 +993,7 @@ i.icon.centerlock {
1008993
color: rgba(27, 31, 35, .3);
1009994
width: 1%;
1010995
user-select: none;
1011-
font-family: @monospaced-fonts, monospace;
996+
font-family: var(--fonts-monospace);
1012997

1013998
span {
1014999
&.bottom-line {
@@ -1089,7 +1074,7 @@ i.icon.centerlock {
10891074

10901075
.blame-data {
10911076
display: flex;
1092-
font-family: @default-fonts, sans-serif;
1077+
font-family: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
10931078

10941079
.blame-message {
10951080
flex-grow: 2;
@@ -1131,7 +1116,7 @@ i.icon.centerlock {
11311116

11321117
*:not(.fa):not(.svg):not(.icon) {
11331118
font-size: 12px;
1134-
font-family: @monospaced-fonts, monospace;
1119+
font-family: var(--fonts-monospace);
11351120
line-height: 20px;
11361121
}
11371122

‎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
@@ -538,7 +538,7 @@
538538
.branch-name {
539539
display: inline-block;
540540
padding: 3px 6px;
541-
font: 12px @monospaced-fonts, monospace;
541+
font: 12px var(--fonts-monospace);
542542
color: rgba(0, 0, 0, .65);
543543
background-color: rgba(209, 227, 237, .45);
544544
border-radius: 3px;
@@ -1155,7 +1155,7 @@
11551155

11561156
textarea {
11571157
height: 200px;
1158-
font-family: @monospaced-fonts, monospace;
1158+
font-family: var(--fonts-monospace);
11591159
}
11601160
}
11611161

@@ -1270,7 +1270,7 @@
12701270

12711271
textarea {
12721272
height: 200px;
1273-
font-family: @monospaced-fonts, monospace;
1273+
font-family: var(--fonts-monospace);
12741274
}
12751275
}
12761276
}
@@ -2089,7 +2089,7 @@
20892089
&.new {
20902090
.CodeMirror {
20912091
.CodeMirror-code {
2092-
font-family: @monospaced-fonts, monospace;
2092+
font-family: var(--fonts-monospace);
20932093

20942094
.cm-comment {
20952095
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

‎webpack.config.js

+1-38
Original file line numberDiff line numberDiff line change
@@ -168,29 +168,10 @@ module.exports = {
168168
loader: 'css-loader',
169169
options: {
170170
sourceMap: true,
171-
importLoaders: 1,
172171
url: filterCssImport,
173172
import: filterCssImport,
174173
},
175174
},
176-
{
177-
loader: 'postcss-loader',
178-
options: {
179-
sourceMap: true,
180-
postcssOptions: {
181-
plugins: [
182-
[
183-
'postcss-preset-env',
184-
{
185-
features: {
186-
'system-ui-font-family': false,
187-
},
188-
},
189-
],
190-
],
191-
},
192-
},
193-
},
194175
],
195176
},
196177
{
@@ -203,29 +184,11 @@ module.exports = {
203184
loader: 'css-loader',
204185
options: {
205186
sourceMap: true,
206-
importLoaders: 2,
187+
importLoaders: 1,
207188
url: filterCssImport,
208189
import: filterCssImport,
209190
},
210191
},
211-
{
212-
loader: 'postcss-loader',
213-
options: {
214-
sourceMap: true,
215-
postcssOptions: {
216-
plugins: [
217-
[
218-
'postcss-preset-env',
219-
{
220-
features: {
221-
'system-ui-font-family': false,
222-
},
223-
},
224-
],
225-
],
226-
},
227-
},
228-
},
229192
{
230193
loader: 'less-loader',
231194
options: {

0 commit comments

Comments
 (0)