fedibird-fe/app/javascript/styles/basics.scss
Eugen Rochko 3b60832214 New error page graphic. Other error page improvements (#5099)
- 500.html generated with admin-set default locale if set
- Error page `<title>` includes Mastodon site title
- 500 title changed to "This page is not
  correct" (ref: <https://www.youtube.com/watch?v=2VCAP_seh1A>)
- 500 content appended with "on our end" to make clear it's
  not user's fault
2017-09-25 23:05:54 +02:00

102 lines
2.2 KiB
SCSS

body {
font-family: 'mastodon-font-sans-serif', sans-serif;
background: $ui-base-color;
background-size: cover;
background-attachment: fixed;
font-size: 13px;
line-height: 18px;
font-weight: 400;
color: $primary-text-color;
padding-bottom: 20px;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
&.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
// Segoe UI => Windows 7/8/10
// Oxygen => KDE
// Ubuntu => Unity/Ubuntu
// Cantarell => GNOME
// Fira Sans => Firefox OS
// Droid Sans => Older Androids (<4.0)
// Helvetica Neue => Older macOS <10.11
// 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;
}
&.app-body {
position: fixed;
width: 100%;
height: 100%;
padding: 0;
background: $ui-base-color;
}
&.about-body {
background: darken($ui-base-color, 8%);
padding-bottom: 0;
}
&.embed {
background: transparent;
margin: 0;
padding-bottom: 0;
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
}
&.admin {
background: darken($ui-base-color, 4%);
position: fixed;
width: 100%;
height: 100%;
padding: 0;
}
&.error {
text-align: center;
color: $ui-primary-color;
padding: 20px;
.dialog img {
display: block;
margin: 0 auto;
max-width: 470px;
width: 100%;
height: auto;
}
.dialog h1 {
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
}
}
button {
font-family: inherit;
cursor: pointer;
&:focus {
outline: none;
}
}
.app-holder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}