diff options
Diffstat (limited to 'app/javascript/styles/mastodon/basics.scss')
-rw-r--r-- | app/javascript/styles/mastodon/basics.scss | 111 |
1 files changed, 100 insertions, 11 deletions
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index b5a77ce94..2b10b5ad3 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -8,7 +8,7 @@ body { font-family: $font-sans-serif, sans-serif; - background: darken($ui-base-color, 8%); + background: darken($ui-base-color, 7%); font-size: 13px; line-height: 18px; font-weight: 400; @@ -35,11 +35,19 @@ body { } &.app-body { - position: absolute; - width: 100%; - height: 100%; padding: 0; - background: $ui-base-color; + + &.layout-single-column { + height: auto; + min-height: 100vh; + overflow-y: scroll; + } + + &.layout-multiple-columns { + position: absolute; + width: 100%; + height: 100%; + } &.with-modals--active { overflow-y: hidden; @@ -56,7 +64,6 @@ body { &--active { overflow-y: hidden; - margin-right: 13px; } } @@ -79,9 +86,6 @@ body { &.admin { background: darken($ui-base-color, 4%); - position: fixed; - width: 100%; - height: 100%; padding: 0; } @@ -131,12 +135,97 @@ button { .app-holder { &, - & > div { + & > div, + & > noscript { display: flex; width: 100%; - height: 100%; align-items: center; justify-content: center; outline: 0 !important; } + + & > noscript { + height: 100vh; + } +} + +.layout-single-column .app-holder { + &, + & > div { + min-height: 100vh; + } +} + +.layout-multiple-columns .app-holder { + &, + & > div { + height: 100%; + } +} + +.error-boundary, +.app-holder noscript { + flex-direction: column; + font-size: 16px; + font-weight: 400; + line-height: 1.7; + color: lighten($error-red, 4%); + text-align: center; + + & > div { + max-width: 500px; + } + + p { + margin-bottom: .85em; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: $highlight-text-color; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + + &__footer { + color: $dark-text-color; + font-size: 13px; + + a { + color: $dark-text-color; + } + } + + button { + display: inline; + border: 0; + background: transparent; + color: $dark-text-color; + font: inherit; + padding: 0; + margin: 0; + line-height: inherit; + cursor: pointer; + outline: 0; + transition: color 300ms linear; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + + &.copied { + color: $valid-value-color; + transition: none; + } + } } |