Don't load Roboto webfont when system font is used in the app (#4591)

* Don't load Roboto webfont when system font is used in the app

* remove trailing whitespace
pull/4686/head
Damien Erambert 2017-08-24 10:28:49 -07:00 committed by Eugen Rochko
parent da172a8b1b
commit f72ed21cd6
1 changed files with 10 additions and 2 deletions

View File

@ -1,5 +1,4 @@
body { body {
font-family: 'mastodon-font-sans-serif', sans-serif;
background: $ui-base-color; background: $ui-base-color;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
@ -14,6 +13,11 @@ body {
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
// This is done because we want to use mastodon-font-sans-serif (a.k.a Roboto) on the `.ui` element in the app UI
&:not(.app-body) {
font-family: 'mastodon-font-sans-serif', sans-serif;
}
&.app-body { &.app-body {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -69,7 +73,7 @@ button {
justify-content: center; justify-content: center;
} }
.system-font { .ui.system-font {
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+) // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
// -apple-system => Safari <11 specific // -apple-system => Safari <11 specific
// BlinkMacSystemFont => Chrome <56 on macOS specific // BlinkMacSystemFont => Chrome <56 on macOS specific
@ -83,3 +87,7 @@ button {
// mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
font-family: system-ui, -apple-system,BlinkMacSystemFont, "Segoe UI","Oxygen", "Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",mastodon-font-sans-serif, sans-serif; font-family: system-ui, -apple-system,BlinkMacSystemFont, "Segoe UI","Oxygen", "Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",mastodon-font-sans-serif, sans-serif;
} }
.ui:not(.system-font) {
font-family: 'mastodon-font-sans-serif', sans-serif;
}