lianguan/gitea
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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
10 changed files with 120 additions and 659 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/content/doc/advanced/customizing-gitea.en-us.md
View File

@ -295,3 +295,15 @@ A full list of supported emoji's is at [emoji list](https://gitea.com/gitea/gite
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.
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)
## Customizing fonts
Fonts can be customized using CSS variables:
```css
:root {
--fonts-proportional: /* custom proportional fonts */ !important;
--fonts-monospace: /* custom monospace fonts */ !important;
--fonts-emoji: /* custom emoji fonts */ !important;
}
```

521
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -32,9 +32,6 @@
"mini-css-extract-plugin": "0.11.1",
"monaco-editor": "0.20.0",
"monaco-editor-webpack-plugin": "1.9.0",
"postcss": "7.0.32",
"postcss-loader": "4.0.1",
"postcss-preset-env": "6.7.0",
"raw-loader": "4.0.1",
"sortablejs": "1.10.2",
"swagger-ui": "3.32.5",

112
web_src/less/_base.less
View File

@ -1,44 +1,61 @@
: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 */
/* Most of these selectors override fomantic ui */
body,
textarea,
h1,
h2,
h3,
h4,
h5 {
font-family: @fonts;
}
h5,
.markdown:not(code),
.ui.accordion .title:not(.ui),
.ui.button,
.ui.card > .content > .header.ui.card > .content > .header,
@ -65,7 +82,6 @@
.ui.popup > .header,
.ui.search > .results .result .title,
.ui.search > .results > .message .header,
body,
.ui.input > input,
.ui.input input,
.ui.statistics .statistic > .value,
@ -74,12 +90,9 @@
.ui.statistic > .label,
.ui.steps .step .title,
.ui.text.container,
.ui.language > .menu > .item& {
font-family: @fonts;
.ui.language > .menu > .item {
font-family: var(--fonts-regular);
}
}
.override-fonts(@default-fonts, sans-serif;);
body {
background-color: #ffffff;
@ -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);
}

39
webpack.config.js
View File

@ -168,29 +168,10 @@ module.exports = {
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
url: filterCssImport,
import: filterCssImport,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
features: {
'system-ui-font-family': false,
},
},
],
],
},
},
},
],
},
{
@ -203,29 +184,11 @@ module.exports = {
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
importLoaders: 1,
url: filterCssImport,
import: filterCssImport,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
features: {
'system-ui-font-family': false,
},
},
],
],
},
},
},
{
loader: 'less-loader',
options: {