summaryrefslogtreecommitdiffstats
path: root/web_src/less/_base.less
diff options
context:
space:
mode:
Diffstat (limited to 'web_src/less/_base.less')
-rw-r--r--web_src/less/_base.less194
1 files changed, 91 insertions, 103 deletions
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index dc4f4c6daa..c25af2126e 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1,85 +1,98 @@
+: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');
-}
-
-@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;
- }
-}
-
-.override-fonts(@default-fonts, sans-serif;);
+ local("Noto Color Emoji"),
+ local("Noto-Color-Emoji"),
+ url("../fonts/noto-color-emoji/NotoColorEmoji.ttf") format("truetype");
+}
+
+/* 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);
+}
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;
}