diff options
Diffstat (limited to 'app/javascript')
| -rw-r--r-- | app/javascript/styles/basics.scss | 12 |
1 files changed, 10 insertions, 2 deletions
diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss index 4e51b555c..e524b7f26 100644 --- a/app/javascript/styles/basics.scss +++ b/app/javascript/styles/basics.scss @@ -1,5 +1,4 @@ body { - font-family: 'mastodon-font-sans-serif', sans-serif; background: $ui-base-color; background-size: cover; background-attachment: fixed; @@ -14,6 +13,11 @@ body { -webkit-tap-highlight-color: rgba(0,0,0,0); -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 { position: fixed; width: 100%; @@ -69,7 +73,7 @@ button { justify-content: center; } -.system-font { +.ui.system-font { // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+) // -apple-system => Safari <11 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) 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; +} |