diff options
Diffstat (limited to 'app/javascript/styles')
| -rw-r--r-- | app/javascript/styles/about.scss | 875 | ||||
| -rw-r--r-- | app/javascript/styles/accounts.scss | 347 | ||||
| -rw-r--r-- | app/javascript/styles/admin.scss | 75 | ||||
| -rw-r--r-- | app/javascript/styles/application.scss | 1 | ||||
| -rw-r--r-- | app/javascript/styles/basics.scss | 53 | ||||
| -rw-r--r-- | app/javascript/styles/boost.scss | 14 | ||||
| -rw-r--r-- | app/javascript/styles/compact_header.scss | 8 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 985 | ||||
| -rw-r--r-- | app/javascript/styles/containers.scss | 76 | ||||
| -rw-r--r-- | app/javascript/styles/custom.scss | 1 | ||||
| -rw-r--r-- | app/javascript/styles/emoji_picker.scss | 199 | ||||
| -rw-r--r-- | app/javascript/styles/forms.scss | 86 | ||||
| -rw-r--r-- | app/javascript/styles/landing_strip.scss | 13 | ||||
| -rw-r--r-- | app/javascript/styles/rtl.scss | 131 | ||||
| -rw-r--r-- | app/javascript/styles/stream_entries.scss | 219 | ||||
| -rw-r--r-- | app/javascript/styles/tables.scss | 19 |
16 files changed, 1863 insertions, 1239 deletions
diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index 66da44086..2adcb5ba2 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -1,52 +1,96 @@ -.about-body { - .wrapper { - max-width: 600px; - margin: 0 auto; +.landing-page { + p, + li { + font-family: 'mastodon-font-sans-serif', sans-serif; + font-size: 16px; + font-weight: 400; + font-size: 16px; + line-height: 30px; + margin-bottom: 12px; color: $ui-primary-color; - padding-top: 50px; - padding-bottom: 50px; - &.thicc { - max-width: 800px; + a { + color: $ui-highlight-color; + text-decoration: underline; } } + em { + display: inline; + margin: 0; + padding: 0; + font-weight: 500; + background: transparent; + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: lighten($ui-primary-color, 10%); + } + h1 { - font: 46px/52px 'mastodon-font-sans-serif', sans-serif; - font-weight: 600; + font-family: 'mastodon-font-display', sans-serif; + font-size: 26px; + line-height: 30px; + font-weight: 500; margin-bottom: 20px; - color: $ui-highlight-color; - padding: 20px 0; + color: $ui-secondary-color; - img { - margin-bottom: -5px; - margin-right: 5px; - width: 46px; - height: 46px; + small { + font-family: 'mastodon-font-sans-serif', sans-serif; + display: block; + font-size: 18px; + font-weight: 400; + color: $ui-base-lighter-color; } } h2 { font-family: 'mastodon-font-display', sans-serif; - font-size: 24px; - line-height: 28px; - font-weight: 400; + font-size: 22px; + line-height: 26px; + font-weight: 500; margin-bottom: 20px; - color: $primary-text-color; + color: $ui-secondary-color; } h3 { font-family: 'mastodon-font-display', sans-serif; - font-size: 20px; - line-height: 28px; - font-weight: 400; + font-size: 18px; + line-height: 24px; + font-weight: 500; + margin-bottom: 20px; + color: $ui-secondary-color; + } + + h4 { + font-family: 'mastodon-font-display', sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 500; + margin-bottom: 20px; + color: $ui-secondary-color; + } + + h5 { + font-family: 'mastodon-font-display', sans-serif; + font-size: 14px; + line-height: 24px; + font-weight: 500; + margin-bottom: 20px; + color: $ui-secondary-color; + } + + h6 { + font-family: 'mastodon-font-display', sans-serif; + font-size: 12px; + line-height: 24px; + font-weight: 500; margin-bottom: 20px; color: $ui-secondary-color; } ul, ol { - list-style: inherit; margin-left: 20px; &[type='a'] { @@ -58,219 +102,30 @@ } } - li > ol, - li > ul { - margin-top: 20px; - } - - p, - li { - font: 16px/28px 'mastodon-font-sans-serif', sans-serif; - font-weight: 400; - margin-bottom: 12px; - - a { - color: $ui-highlight-color; - text-decoration: underline; - } - } - - em { - display: inline-block; - padding: 7px 7px 5px; - margin: 0 2px; - background: $ui-primary-color; - color: $ui-base-color; - font: 16px/16px 'mastodon-font-sans-serif', sans-serif; - font-weight: 300; - } - - .screenshot { - box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); - margin-bottom: 26px; - - img { - max-width: 100%; - height: auto; - display: block; - } + ul { + list-style: disc; } - .actions { - overflow: hidden; - margin-bottom: 20px; - - .info { - float: right; - text-align: right; - line-height: 36px; - - a { - color: $ui-primary-color; - text-decoration: underline; - } - } + ol { + list-style: decimal; } - @media screen and (max-width: 625px) { - .wrapper { - padding: 20px; - } + li > ol, + li > ul { + margin-top: 6px; } -} - -.information-board { - background: darken($ui-base-color, 4%); - padding: 20px 0; - - .panel { - position: absolute; - width: 280px; - box-sizing: border-box; - background: darken($ui-base-color, 8%); - padding: 20px; - padding-top: 10px; - border-radius: 4px 4px 0 0; - right: 0; - bottom: -40px; - - .panel-header { - font-family: 'mastodon-font-display', sans-serif; - font-size: 14px; - line-height: 24px; - font-weight: 500; - color: $ui-base-lighter-color; - padding-bottom: 5px; - margin-bottom: 15px; - border-bottom: 1px solid lighten($ui-base-color, 4%); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - a, - span { - font-weight: 400; - color: lighten($ui-base-color, 34%); - } - a { - text-decoration: none; - } - } + hr { + border-color: rgba($ui-base-lighter-color, .6); } .container { - position: relative; - padding-right: 280px + 15px; - } - - .information-board-sections { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - - .section { - flex: 1 0 0; - font: 16px/28px 'mastodon-font-sans-serif', sans-serif; - text-align: right; - padding: 10px 15px; - - span, - strong { - display: block; - } - - span { - font-size: 16px; - - &:last-child { - color: $ui-secondary-color; - } - } - - strong { - font-weight: 500; - font-size: 32px; - line-height: 48px; - color: $primary-text-color; - } - } -} - -.owner { - text-align: center; - - .avatar { - @include avatar-size(80px); + width: 100%; + box-sizing: border-box; + max-width: 800px; margin: 0 auto; - margin-bottom: 15px; - - img { - @include avatar-radius(); - @include avatar-size(80px); - display: block; - } - } - - .name { - font-size: 14px; - - a { - display: block; - color: $primary-text-color; - text-decoration: none; - - &:hover { - .display_name { - text-decoration: underline; - } - } - } - - .username { - display: block; - color: $ui-primary-color; - } - } -} - -.features-list__row { - display: flex; - padding: 10px 0; - justify-content: space-between; - - &:first-child { - padding-top: 0; - } - - .visual { - flex: 0 0 auto; - display: flex; - align-items: center; - margin-left: 15px; - - .fa { - display: block; - color: $ui-primary-color; - font-size: 48px; - } - } - - .text { - font-size: 16px; - line-height: 30px; - color: $ui-base-lighter-color; - - h6 { - font-weight: 500; - color: $ui-primary-color; - } + word-wrap: break-word; } -} - -.landing-page { - $lp-par-color: lighten($ui-base-color, 36%); .header-wrapper { padding-top: 15px; @@ -283,14 +138,17 @@ padding-bottom: 15px; .hero .heading { - padding-bottom: 30px; - - p, li { - color: lighten($ui-base-color, 50%); - } + padding-bottom: 20px; + font-family: 'mastodon-font-sans-serif', sans-serif; + font-size: 16px; + font-weight: 400; + font-size: 16px; + line-height: 30px; + color: $ui-primary-color; - li { - margin: 2px 0; + a { + color: $ui-highlight-color; + text-decoration: underline; } } } @@ -315,17 +173,6 @@ } } - p, - li { - font: inherit; - font-weight: inherit; - margin-bottom: 0; - } - - hr { - border-color: rgba($ui-base-lighter-color, .6); - } - .header { line-height: 30px; overflow: hidden; @@ -335,6 +182,62 @@ justify-content: space-between; } + .links { + position: relative; + z-index: 4; + + a { + display: flex; + justify-content: center; + align-items: center; + color: $ui-primary-color; + text-decoration: none; + padding: 12px 16px; + line-height: 32px; + font-family: 'mastodon-font-display', sans-serif; + font-weight: 500; + font-size: 14px; + + &:hover { + color: $ui-secondary-color; + } + } + + .brand { + a { + padding-left: 0; + padding-right: 0; + color: $white; + } + + img { + height: 32px; + position: relative; + top: 4px; + left: -10px; + } + } + + ul { + list-style: none; + margin: 0; + + li { + display: inline-block; + vertical-align: bottom; + margin: 0; + + &:first-child a { + padding-left: 0; + } + + &:last-child a { + padding-right: 0; + } + } + } + } + .hero { margin-top: 50px; align-items: center; @@ -387,6 +290,12 @@ } } + .heading { + position: relative; + z-index: 4; + padding-bottom: 150px; + } + .simple_form, .closed-registrations-message { background: darken($ui-base-color, 4%); @@ -408,12 +317,6 @@ } } - .heading { - position: relative; - z-index: 4; - padding-bottom: 150px; - } - .closed-registrations-message { min-height: 330px; display: flex; @@ -421,136 +324,140 @@ justify-content: space-between; } } + } - .links { + .about-short { + background: darken($ui-base-color, 4%); + padding: 50px 0 30px; + font-family: 'mastodon-font-sans-serif', sans-serif; + font-size: 16px; + font-weight: 400; + font-size: 16px; + line-height: 30px; + color: $ui-primary-color; + + a { + color: $ui-highlight-color; + text-decoration: underline; + } + } + + .information-board { + background: darken($ui-base-color, 4%); + padding: 20px 0; + + .container { position: relative; - z-index: 4; + padding-right: 280px + 15px; + } - ul { - list-style: none; - margin: 0; + .information-board-sections { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } - li { - display: inline-block; - vertical-align: bottom; - margin: 0; + .section { + flex: 1 0 0; + font-family: 'mastodon-font-sans-serif', sans-serif; + font-size: 16px; + line-height: 28px; + color: $primary-text-color; + text-align: right; + padding: 10px 15px; - &:last-child a { - padding-right: 0; - } - } + span, + strong { + display: block; } - a { - display: flex; - justify-content: center; - align-items: center; - color: $ui-primary-color; - text-decoration: none; - padding: 12px 16px; - line-height: 32px; - font-family: 'mastodon-font-display', sans-serif; - font-weight: 500; - font-size: 14px; - - &:hover { + span { + &:last-child { color: $ui-secondary-color; } } - .brand { - a { - padding-left: 0; - padding-right: 0; - color: $white; - } - - img { - height: 32px; - position: relative; - top: 4px; - left: -10px; - } + strong { + font-weight: 500; + font-size: 32px; + line-height: 48px; } } - } - - .container { - width: 100%; - box-sizing: border-box; - max-width: 800px; - margin: 0 auto; - } - - .wrapper { - max-width: 800px; - margin: 0 auto; - padding: 0; - } - - .learn-more-cta, .extended-description { - padding: 50px 0; - font-weight: 400; - color: $lp-par-color; - font: 16px/1.6 'mastodon-font-sans-serif', sans-serif; - ul, - ol { - list-style: inherit; - margin-left: 20px; + .panel { + position: absolute; + width: 280px; + box-sizing: border-box; + background: darken($ui-base-color, 8%); + padding: 20px; + padding-top: 10px; + border-radius: 4px 4px 0 0; + right: 0; + bottom: -40px; - &[type='a'] { - list-style-type: lower-alpha; - } + .panel-header { + font-family: 'mastodon-font-display', sans-serif; + font-size: 14px; + line-height: 24px; + font-weight: 500; + color: $ui-primary-color; + padding-bottom: 5px; + margin-bottom: 15px; + border-bottom: 1px solid lighten($ui-base-color, 4%); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + a, + span { + font-weight: 400; + color: darken($ui-primary-color, 10%); + } - &[type='i'] { - list-style-type: lower-roman; + a { + text-decoration: none; + } } } - li > ol, - li > ul { - margin-top: 20px; - } + .owner { + text-align: center; - p, - li { - color: $lp-par-color; - margin-bottom: 6px; + .avatar { + width: 80px; + height: 80px; + margin: 0 auto; + margin-bottom: 15px; - a { - color: $ui-highlight-color; - text-decoration: underline; + img { + display: block; + width: 80px; + height: 80px; + border-radius: 48px; + } } - } - - li { - margin: 2px 0; - } - } - .learn-more-cta { - background: darken($ui-base-color, 4%); - padding: 50px 0; - p { - font-size: 16px; - line-height: 28px; - } - } + .name { + font-size: 14px; - h3 { - font-family: 'mastodon-font-display', sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 500; - margin-bottom: 20px; - color: $ui-primary-color; - } + a { + display: block; + color: $primary-text-color; + text-decoration: none; + + &:hover { + .display_name { + text-decoration: underline; + } + } + } - p { - font-size: 16px; - line-height: 28px; - color: $lp-par-color; + .username { + display: block; + color: $ui-primary-color; + } + } + } } .features { @@ -559,100 +466,121 @@ .container { display: flex; } - } - #mastodon-timeline { - display: flex; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; - font-family: 'mastodon-font-sans-serif', sans-serif; - font-size: 13px; - line-height: 18px; - font-weight: 400; - color: $primary-text-color; - width: 330px; - margin-right: 30px; - flex: 0 0 auto; - background: $ui-base-color; - overflow: hidden; - box-shadow: 0 0 6px rgba($black, 0.1); + #mastodon-timeline { + display: flex; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + font-family: 'mastodon-font-sans-serif', sans-serif; + font-size: 13px; + line-height: 18px; + font-weight: 400; + color: $primary-text-color; + width: 330px; + margin-right: 30px; + flex: 0 0 auto; + background: $ui-base-color; + overflow: hidden; + box-shadow: 0 0 6px rgba($black, 0.1); + + .column-header { + color: inherit; + font-family: inherit; + font-size: 16px; + line-height: inherit; + font-weight: inherit; + margin: 0; + padding: 15px; + } - .column-header { - color: inherit; - font-family: inherit; - font-size: 16px; - line-height: inherit; - font-weight: inherit; - margin: 0; - padding: 15px; - } + .column { + padding: 0; + border-radius: 4px; + overflow: hidden; + } - .column { - padding: 0; - border-radius: 4px; - overflow: hidden; - } + .scrollable { + height: 400px; + } - .scrollable { - height: 400px; - } + p { + font-size: inherit; + line-height: inherit; + font-weight: inherit; + color: $primary-text-color; + margin-bottom: 20px; - p { - font-size: inherit; - line-height: inherit; - font-weight: inherit; - color: $primary-text-color; - margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } - &:last-child { - margin-bottom: 0; + a { + color: $ui-secondary-color; + text-decoration: none; + } } + } - a { - color: $ui-secondary-color; - text-decoration: none; + .about-mastodon { + max-width: 675px; + + p { + margin-bottom: 20px; } - } - } - .about-mastodon { - max-width: 675px; + .features-list { + margin-top: 20px; - p { - margin-bottom: 20px; - } + .features-list__row { + display: flex; + padding: 10px 0; + justify-content: space-between; - .features-list { - margin-top: 20px; - } - } + &:first-child { + padding-top: 0; + } - em { - display: inline; - margin: 0; - padding: 0; - font-weight: 500; - background: transparent; - font-family: inherit; - font-size: inherit; - line-height: inherit; - color: $ui-primary-color; + .visual { + flex: 0 0 auto; + display: flex; + align-items: center; + margin-left: 15px; + + .fa { + display: block; + color: $ui-primary-color; + font-size: 48px; + } + } + + .text { + font-size: 16px; + line-height: 30px; + color: $ui-primary-color; + + h6 { + font-size: inherit; + line-height: inherit; + margin-bottom: 0; + } + } + } + } + } } - h1 { - font-family: 'mastodon-font-display', sans-serif; - font-size: 26px; + .extended-description { + padding: 50px 0; + font-family: 'mastodon-font-sans-serif', sans-serif; + font-size: 16px; + font-weight: 400; + font-size: 16px; line-height: 30px; - margin-bottom: 0; - font-weight: 500; - color: $ui-secondary-color; + color: $ui-primary-color; - small { - font-family: 'mastodon-font-sans-serif', sans-serif; - display: block; - font-size: 18px; - font-weight: 400; - color: $ui-base-lighter-color; + a { + color: $ui-highlight-color; + text-decoration: underline; } } @@ -676,8 +604,15 @@ padding: 0 20px; } - .information-board .container { - padding-right: 20px; + .information-board { + + .container { + padding-right: 20px; + } + + .section { + text-align: center; + } .panel { position: static; @@ -691,10 +626,6 @@ } } - .information-board .section { - text-align: center; - } - .header-wrapper .mascot { left: 20px; } @@ -710,8 +641,12 @@ .header-wrapper { padding-top: 0; + &.compact { + padding-bottom: 0; + } + &.compact .hero .heading { - padding-bottom: 20px; + text-align: initial; } } @@ -720,51 +655,41 @@ display: block; } - .links { - padding-top: 15px; - background: darken($ui-base-color, 4%); - } - .header { - .hero { - margin-top: 30px; - padding: 0; + .links { + padding-top: 15px; + background: darken($ui-base-color, 4%); - .heading { - padding: 0 20px 20px; + a { + padding: 12px 8px; } - } - - .floats { - display: none; - } - .heading, - .nav { - text-align: center; - } + .nav { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + } - .nav { - display: flex; - flex-flow: row wrap; - justify-content: space-around; + .brand img { + left: 0; + top: 0; + } } - .links a { - padding: 12px 8px; - } + .hero { + margin-top: 30px; + padding: 0; - .heading h1 { - padding: 30px 0; - } + .floats { + display: none; + } - .links .brand img { - left: 0; - top: 0; - } + .heading { + padding: 30px 20px; + text-align: center; + } - .hero { .simple_form, .closed-registrations-message { background: darken($ui-base-color, 8%); @@ -775,7 +700,7 @@ } } - #mastodon-timeline { + .features #mastodon-timeline { height: 70vh; width: 100%; margin-bottom: 50px; diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index 3d5c1a692..744650554 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -1,34 +1,48 @@ .card { - display: flex; - background: $ui-base-color; + background-color: lighten($ui-base-color, 4%); background-size: cover; background-position: center; border-radius: 4px 4px 0 0; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); overflow: hidden; + position: relative; + display: flex; + + &::after { + background: rgba(darken($ui-base-color, 8%), 0.5); + display: block; + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + } - @media screen and (max-width: 700px) { + @media screen and (max-width: 740px) { border-radius: 0; box-shadow: none; } - .details { + .card__illustration { + padding: 60px 0; position: relative; - padding: 60px 0 0; - text-align: center; - flex: auto; + flex: 1 1 auto; + display: flex; + justify-content: center; + align-items: center; + } - &::after { - background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8)); - display: block; - content: ""; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; - } + .card__bio { + max-width: 260px; + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: space-between; + background: rgba(darken($ui-base-color, 8%), 0.8); + position: relative; + z-index: 2; } &.compact { @@ -46,14 +60,15 @@ .name { display: block; - position: relative; font-size: 20px; line-height: 18px * 1.5; color: $primary-text-color; + padding: 10px 15px; + padding-bottom: 0; font-weight: 500; - text-align: center; - text-shadow: 0 0 2px $base-shadow-color; + position: relative; z-index: 2; + margin-bottom: 30px; small { display: block; @@ -64,56 +79,102 @@ } .avatar { - position: relative; - @include avatar-size(120px); + width: 120px; margin: 0 auto; - margin-bottom: 15px; + position: relative; z-index: 2; img { - @include avatar-radius(); - @include avatar-size(120px); + width: 120px; + height: 120px; display: block; + border-radius: 120px; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); } } .controls { position: absolute; - top: 10px; - right: 10px; + top: 15px; + left: 15px; z-index: 2; + + .icon-button { + color: rgba($white, 0.8); + text-decoration: none; + font-size: 13px; + line-height: 13px; + font-weight: 500; + + .fa { + font-weight: 400; + margin-right: 5px; + } + + &:hover, + &:active, + &:focus { + color: $white; + } + } + } + + .roles { + margin-bottom: 30px; + padding: 0 15px; } .details-counters { - display: inline-flex; - position: relative; + margin-top: 30px; + display: flex; flex-direction: row; - margin: 15px 0; - z-index: 2; + width: 100%; } .counter { - width: 80px; + width: 33.3%; + box-sizing: border-box; + flex: 0 0 auto; color: $ui-primary-color; padding: 5px 10px 0; + margin-bottom: 10px; + border-right: 1px solid lighten($ui-base-color, 4%); cursor: default; + text-align: center; position: relative; - & + .counter { - border-left: 1px solid $ui-primary-color; + a { + display: block; + } + + &:last-child { + border-right: 0; } - & > * { - opacity: .7; - transition: opacity .3s ease; + &::after { + display: block; + content: ""; + position: absolute; + bottom: -10px; + left: 0; + width: 100%; + border-bottom: 4px solid $ui-primary-color; + opacity: 0.5; + transition: all 400ms ease; } - &.active > *, &:hover > * { - opacity: 1; + &.active { + &::after { + border-bottom: 4px solid $ui-highlight-color; + opacity: 1; + } } - a { - display: block; + &:hover { + &::after { + opacity: 1; + transition-duration: 100ms; + } } a { @@ -123,87 +184,40 @@ .counter-label { font-size: 12px; - text-transform: uppercase; display: block; margin-bottom: 5px; - text-shadow: 0 0 2px $base-shadow-color; } .counter-number { font-weight: 500; font-size: 18px; color: $primary-text-color; + font-family: 'mastodon-font-display', sans-serif; } } .bio { - position: relative; font-size: 14px; line-height: 18px; - margin: 15px 0; - padding: 5px 10px; + padding: 0 15px; color: $ui-secondary-color; - z-index: 2; - } - - .metadata { - position: relative; - min-width: 180px; - max-width: 40%; - background: rgba($base-shadow-color, 0.8); - color: $primary-text-color; - text-align: left; - overflow-y: auto; - white-space: pre-wrap; - z-index: 3; - - .metadata-item { - border-bottom: 1px $ui-primary-color solid; - padding: 15px 10px; - font-size: 18px; - line-height: 24px; - overflow: hidden; - text-overflow: ellipsis; - - a { - color: $ui-highlight-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - - b { - display: block; - font-size: 12px; - line-height: 16px; - text-transform: uppercase; - color: $ui-primary-color; - - a { - color: $ui-primary-color; - } - } - } } -} - - - -@media screen and (max-width: 500px) { - .card { + @media screen and (max-width: 480px) { display: block; - .metadata { + .card__bio { max-width: none; - background: $base-shadow-color; - border-top: 1px $ui-primary-color solid; + } - .metadata-item { - padding: 15px 20px; - } + .name, + .roles { + text-align: center; + margin-bottom: 15px; + } + + .bio { + margin-bottom: 15px; } } } @@ -282,7 +296,9 @@ } .next, - .prev { + .prev, + .next a, + .prev a { display: inline-block; } } @@ -290,15 +306,17 @@ .accounts-grid { box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - background: $simple-background-color; + background: darken($simple-background-color, 8%); border-radius: 0 0 4px 4px; - padding: 20px 10px; + padding: 20px 5px; padding-bottom: 10px; overflow: hidden; display: flex; flex-wrap: wrap; + z-index: 2; + position: relative; - @media screen and (max-width: 700px) { + @media screen and (max-width: 740px) { border-radius: 0; box-shadow: none; } @@ -306,35 +324,64 @@ .account-grid-card { box-sizing: border-box; width: 335px; - border: 1px solid $ui-secondary-color; + background: $simple-background-color; border-radius: 4px; color: $ui-base-color; - margin-bottom: 10px; + margin: 0 5px 10px; + position: relative; - &:nth-child(odd) { - margin-right: 10px; + @media screen and (max-width: 740px) { + width: calc(100% - 10px); } .account-grid-card__header { overflow: hidden; - padding: 10px; - border-bottom: 1px solid $ui-secondary-color; + height: 100px; + border-radius: 4px 4px 0 0; + background-color: lighten($ui-base-color, 4%); + background-size: cover; + background-position: center; + position: relative; + + &::after { + background: rgba(darken($ui-base-color, 8%), 0.5); + display: block; + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + } + } + + .account-grid-card__avatar { + box-sizing: border-box; + padding: 15px; + position: absolute; + z-index: 2; + top: 100px - (40px + 2px); + left: -2px; } .avatar { - @include avatar-size(60px); - float: left; - margin-right: 15px; + width: 80px; + height: 80px; img { - @include avatar-radius(); - @include avatar-size(60px); display: block; + width: 80px; + height: 80px; + border-radius: 80px; + border: 2px solid $simple-background-color; } } .name { + padding: 15px; padding-top: 10px; + padding-left: 15px + 80px + 15px; a { display: block; @@ -342,6 +389,7 @@ text-decoration: none; text-overflow: ellipsis; overflow: hidden; + font-weight: 500; &:hover { .display_name { @@ -352,30 +400,38 @@ } .display_name { - font-size: 14px; + font-size: 16px; display: block; + text-overflow: ellipsis; + overflow: hidden; } .username { - color: $ui-highlight-color; + color: lighten($ui-base-color, 34%); + font-size: 14px; + font-weight: 400; } .note { - padding: 10px; + padding: 10px 15px; padding-top: 15px; - color: $ui-primary-color; + box-sizing: border-box; + color: lighten($ui-base-color, 26%); word-wrap: break-word; + min-height: 80px; } } } .nothing-here { + width: 100%; + display: block; color: $ui-primary-color; font-size: 14px; font-weight: 500; text-align: center; - padding: 15px 0; - padding-bottom: 25px; + padding: 60px 0; + padding-top: 55px; cursor: default; } @@ -396,14 +452,15 @@ } & > div { - @include avatar-size(48px); float: left; margin-right: 10px; + width: 48px; + height: 48px; } .avatar { - @include avatar-radius(); display: block; + border-radius: 4px; } .display-name { @@ -439,3 +496,43 @@ color: $ui-base-color; } } + +.activity-stream-tabs { + background: $simple-background-color; + border-bottom: 1px solid $ui-secondary-color; + position: relative; + z-index: 2; + + a { + display: inline-block; + padding: 15px; + text-decoration: none; + color: $ui-highlight-color; + text-transform: uppercase; + font-weight: 500; + + &:hover, + &:active, + &:focus { + color: lighten($ui-highlight-color, 8%); + } + + &.active { + color: $ui-base-color; + cursor: default; + } + } +} + +.account-role { + display: inline-block; + padding: 4px 6px; + cursor: default; + border-radius: 3px; + font-size: 12px; + line-height: 12px; + font-weight: 500; + color: $success-green; + background-color: rgba($success-green, 0.1); + border: 1px solid rgba($success-green, 0.5); +} diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss index 4c3bbdfc5..87bc710af 100644 --- a/app/javascript/styles/admin.scss +++ b/app/javascript/styles/admin.scss @@ -32,7 +32,7 @@ a { display: block; - padding: 15px 25px; + padding: 15px; color: rgba($primary-text-color, 0.7); text-decoration: none; transition: all 200ms linear; @@ -61,6 +61,7 @@ a { border: 0; + padding: 15px 35px; &.selected { color: $primary-text-color; @@ -96,9 +97,17 @@ margin-bottom: 40px; } + h3 { + color: $ui-secondary-color; + font-size: 20px; + line-height: 28px; + font-weight: 400; + margin-bottom: 30px; + } + h6 { font-size: 16px; - color: $ui-primary-color; + color: $ui-secondary-color; line-height: 28px; font-weight: 400; } @@ -123,10 +132,10 @@ } .muted-hint { - color: lighten($ui-base-color, 27%); + color: $ui-primary-color; a { - color: $ui-primary-color; + color: $ui-highlight-color; } } @@ -139,15 +148,23 @@ .simple_form { max-width: 400px; - .label_input { - label.select { - width: 50%; - } + &.edit_user, + &.new_form_admin_settings, + &.new_form_two_factor_confirmation, + &.new_form_delete_confirmation, + &.new_import, + &.new_domain_block, + &.edit_domain_block { + max-width: none; + } - select { - width: 50%; - float: right; - } + .form_two_factor_confirmation_code, + .form_delete_confirmation_password { + max-width: 400px; + } + + .actions { + max-width: 400px; } } @@ -181,11 +198,15 @@ .filters { display: flex; - margin-bottom: 20px; + flex-wrap: wrap; .filter-subset { flex: 0 0 auto; - margin-right: 40px; + margin: 0 40px 10px 0; + + &:last-child { + margin-bottom: 20px; + } ul { margin-top: 5px; @@ -227,27 +248,25 @@ .report-accounts { display: flex; + flex-wrap: wrap; margin-bottom: 20px; } .report-accounts__item { - flex: 1 1 0; display: flex; + flex: 250px; flex-direction: column; + margin: 0 5px; & > strong { display: block; - margin-bottom: 10px; + margin: 0 0 10px -5px; font-weight: 500; font-size: 14px; line-height: 18px; color: $ui-secondary-color; } - &:first-child { - margin-right: 10px; - } - .account-card { flex: 1 1 auto; } @@ -261,6 +280,11 @@ .activity-stream { flex: 2 0 0; margin-right: 20px; + max-width: calc(100% - 60px); + + .entry { + border-radius: 4px; + } } } @@ -280,18 +304,25 @@ .batch-form-box { display: flex; - margin-bottom: 10px; + flex-wrap: wrap; + margin-bottom: 5px; #form_status_batch_action { - margin-right: 5px; + margin: 0 5px 5px 0; font-size: 14px; } + input.button { + margin: 0 5px 5px 0; + } + .media-spoiler-toggle-buttons { margin-left: auto; .button { overflow: visible; + margin: 0 0 5px 5px; + float: right; } } } diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index 33c7783f3..e35937be1 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -13,6 +13,7 @@ @import 'accounts'; @import 'stream_entries'; @import 'components'; +@import 'emoji_picker'; @import 'about'; @import 'tables'; @import 'admin'; diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss index 182ea36a4..96f0023c3 100644 --- a/app/javascript/styles/basics.scss +++ b/app/javascript/styles/basics.scss @@ -7,13 +7,28 @@ body { line-height: 18px; font-weight: 400; color: $primary-text-color; - padding-bottom: 140px; + 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%; @@ -30,6 +45,7 @@ body { &.embed { background: transparent; margin: 0; + padding-bottom: 0; .container { position: absolute; @@ -47,8 +63,24 @@ body { padding: 0; } - @media screen and (max-width: 360px) { - padding-bottom: 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; + } } } @@ -68,18 +100,3 @@ button { align-items: center; justify-content: center; } - -.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; -} diff --git a/app/javascript/styles/boost.scss b/app/javascript/styles/boost.scss index bcd97359a..b07b72f8e 100644 --- a/app/javascript/styles/boost.scss +++ b/app/javascript/styles/boost.scss @@ -16,21 +16,13 @@ button.icon-button i.fa-retweet { // Disabled variant button.icon-button.disabled i.fa-retweet { &, &:hover { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{lighten($ui-base-color, 13%)}' stroke-width='0'/></svg>"); + background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(lighten($ui-base-color, 13%))}' stroke-width='0'/></svg>"); } } -// Darker disabled variant for DMs +// Disabled variant for use with DMs .status-direct button.icon-button.disabled i.fa-retweet { &, &:hover { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{lighten($ui-base-color, 16%)}' stroke-width='0'/></svg>"); + background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(lighten($ui-base-color, 16%))}' stroke-width='0'/></svg>"); } } - -// Mastodon gave us this one, but I'm not sure if it's better. - @kibi@glitch.social - -/* -button.icon-button.disabled i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(lighten($ui-base-color, 13%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($ui-highlight-color)}' stroke-width='0'/></svg>"); -} -*/ diff --git a/app/javascript/styles/compact_header.scss b/app/javascript/styles/compact_header.scss index 27a67135f..90d98cc8c 100644 --- a/app/javascript/styles/compact_header.scss +++ b/app/javascript/styles/compact_header.scss @@ -3,9 +3,15 @@ font-size: 24px; line-height: 28px; color: $ui-primary-color; - overflow: hidden; font-weight: 500; margin-bottom: 20px; + padding: 0 10px; + word-wrap: break-word; + + @media screen and (max-width: 740px) { + text-align: center; + padding: 20px 10px 0; + } a { color: inherit; diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index fa604df5c..2f02af098 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1,6 +1,14 @@ @import 'variables'; @import 'variables-glitch'; +@mixin fullwidth-gallery { + &.full-width { + margin-left: -22px; + margin-right: -22px; + width: inherit; + } +} + .app-body { -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; @@ -214,12 +222,16 @@ } } +.dropdown-menu { + position: absolute; +} + .dropdown--active .icon-button { color: $ui-highlight-color; } .dropdown--active::after { - @media screen and (min-width: 1025px) { + @media screen and (min-width: 631px) { content: ""; display: block; position: absolute; @@ -238,6 +250,8 @@ line-height: 0; display: inline-block; width: 0; + height: 0; + position: absolute; } .ellipsis { @@ -385,15 +399,14 @@ .compose-form__autosuggest-wrapper { position: relative; - .emoji-picker__dropdown { + .emoji-picker-dropdown { position: absolute; right: 5px; top: 5px; - &.dropdown--active::after { - border-color: transparent transparent $base-border-color; - bottom: -1px; - right: 8px; + ::-webkit-scrollbar-track:hover, + ::-webkit-scrollbar-track:active { + background-color: rgba($base-overlay-background, 0.3); } } } @@ -406,12 +419,30 @@ .compose-form__publish-button-wrapper { overflow: hidden; padding-top: 10px; + white-space: nowrap; + display: flex; + + button { + text-overflow: unset; + } +} + +.compose-form__publish__side-arm { + padding: 0 !important; + width: 4em; + text-align: center; + margin-right: 2px; +} + +.compose-form__publish__primary { + padding: 0 10px !important; } .emojione { display: inline-block; font-size: inherit; vertical-align: middle; + object-fit: contain; margin: -.2ex .15em .2ex; width: 16px; height: 16px; @@ -458,78 +489,6 @@ cursor: pointer; } -// --- Extra clickable area in the status gutter --- -.ui.wide { - @mixin xtraspaces-full { - height: calc(100% + 10px); - bottom: -40px; - } - @mixin xtraspaces-short { - height: calc(100% - 35px); - bottom: 0; - } - - // Avi must go on top if the toot is too short - .status__avatar { - z-index: 10; - } - - // Base styles - .status__content--with-action > div::after { - content: ''; - display: block; - width: 64px; - position: absolute; - left: -68px; - - // more than 4 never fit on FullHD, short - @include xtraspaces-short; - } - - @media screen and (min-width: 1800px) { - // 4, very wide screen - .column:nth-child(2):nth-last-child(4) { - &, & ~ .column { - .status__content--with-action > div::after { - @include xtraspaces-full; - } - } - } - } - - // 1 or 2, always fit - .column:nth-child(2):nth-last-child(1), - .column:nth-child(2):nth-last-child(2), - .column:nth-child(2):nth-last-child(3) { - &, & ~ .column { - .status__content--with-action > div::after { - @include xtraspaces-full; - } - } - } - - @media screen and (max-width: 1440px) { - // 3, small screen - .column:nth-child(2):nth-last-child(3) { - &, & ~ .column { - .status__content--with-action > div::after { - @include xtraspaces-short; - } - } - } - } - - // Phone or iPad - @media screen and (max-width: 1060px) { - .status__content--with-action > div::after { - display: none; - } - } - - // I am very sorry -} -// --- end extra clickable spaces --- - .status-check-box { .status__content, .reply-indicator__content { @@ -543,6 +502,8 @@ .status__content, .reply-indicator__content { position: relative; + margin: 10px 0; + padding: 0 12px; font-size: 15px; line-height: 20px; color: $primary-text-color; @@ -630,8 +591,10 @@ } .status__prepend-icon-wrapper { - left: -26px; - position: absolute; + float: left; + margin: 0 10px 0 -58px; + width: 48px; + text-align: right; } .notif-cleaning { @@ -653,7 +616,6 @@ .status { padding: 8px 10px; - padding-left: 68px; position: relative; height: auto; min-height: 48px; @@ -668,6 +630,10 @@ opacity: 1; animation: fade 150ms linear; + .video-player { + margin-top: 8px; + } + &.status-direct { background: lighten($ui-base-color, 8%); @@ -729,7 +695,7 @@ content: ""; } - .status__display-name:hover strong { + .display-name:hover .display-name__html { text-decoration: none; } @@ -745,7 +711,7 @@ } .notification__message { - margin: -10px 0 10px; + margin: -10px -10px 10px; } } @@ -773,25 +739,21 @@ } .status__display-name { + margin: 0 auto 0 0; color: $ui-base-lighter-color; -} - -.status__info .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; + overflow: hidden; } .status__info { - margin: 2px 0 0; + display: flex; + margin: 2px 0 5px; font-size: 15px; line-height: 24px; } .status__info__icons { - display: inline-block; + flex: none; position: relative; - float: right; color: lighten($ui-base-color, 26%); .status__visibility-icon { @@ -821,9 +783,9 @@ } .status__prepend { - margin: -10px 0 10px; + margin: -10px -10px 10px; color: $ui-base-lighter-color; - padding: 8px 0 2px; + padding: 8px 10px 0 68px; font-size: 14px; position: relative; @@ -835,15 +797,7 @@ .status__action-bar { align-items: center; display: flex; - margin-top: 10px; - margin-left: -58px; - - &::before { - display: block; - flex: 1 1 0; - max-width: 58px; - content: ""; - } + margin: 10px 4px 0; } .status__action-bar-button { @@ -854,8 +808,8 @@ .status__action-bar-dropdown { float: left; - height: 18px; - width: 18px; + height: 23.15px; + width: 23.15px; // Dropdown style override for centering on the icon .dropdown--active { @@ -881,26 +835,6 @@ align-items: center; justify-content: center; position: relative; - - .dropdown { - display: block; - width: 18px; - height: 18px; - } - - .dropdown--active { - .dropdown__content.dropdown__left { - left: 20px; - right: initial; - } - - &::after { - bottom: initial; - margin-left: 7px; - margin-top: -7px; - right: initial; - } - } } .detailed-status { @@ -916,6 +850,10 @@ height: 22px; } } + + .video-player { + margin-top: 8px; + } } .detailed-status__meta { @@ -976,8 +914,7 @@ .account__avatar-wrapper { float: left; - margin-left: 12px; - margin-right: 12px; + margin: 6px 16px 6px 6px; } .account__avatar { @@ -993,6 +930,7 @@ } .account__avatar-overlay { + position: relative; @include avatar-size(48px); &-base { @@ -1013,7 +951,8 @@ .account__relationship { height: 18px; - padding: 10px; + padding: 12px 10px; + white-space: nowrap; } .account__header__wrapper { @@ -1171,7 +1110,7 @@ } .account__action-bar-dropdown { - flex: 1 1 auto; + flex: 0 1 calc(50% - 140px); padding: 10px; .dropdown--active { @@ -1198,7 +1137,7 @@ .account__action-bar__tab { text-decoration: none; overflow: hidden; - width: 80px; + flex: 0 1 80px; border-left: 1px solid lighten($ui-base-color, 8%); padding: 10px 5px; @@ -1260,15 +1199,6 @@ } } -.status__display-name, -.reply-indicator__display-name, -.detailed-status__display-name, -.account__display-name { - &:hover strong { - text-decoration: underline; - } -} - .account__display-name strong { display: block; } @@ -1288,6 +1218,8 @@ strong, span { display: block; + text-overflow: ellipsis; + overflow: hidden; } strong { @@ -1302,8 +1234,8 @@ } .status__avatar { - position: absolute; - margin-left: -58px; + flex: none; + margin: 0 10px 0 0; height: 48px; width: 48px; } @@ -1334,9 +1266,7 @@ } .notification__message { - margin-left: 68px; - padding: 8px 0; - padding-bottom: 0; + padding: 8px 10px 0 68px; cursor: default; color: $ui-primary-color; font-size: 15px; @@ -1348,8 +1278,10 @@ } .notification__favourite-icon-wrapper { - left: -26px; - position: absolute; + float: left; + margin: 0 10px 0 -58px; + width: 48px; + text-align: right; .star-icon { color: $gold-star; @@ -1373,19 +1305,37 @@ .display-name { display: block; - position: relative; + padding: 6px 0; max-width: 100%; + height: 36px; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.display-name__html { - font-weight: 500; -} + strong { + display: block; + height: 18px; + font-size: 16px; + font-weight: 500; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } -.display-name__account { - font-size: 14px; + span { + display: block; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + &:hover { + strong { + text-decoration: underline; + } + } } .status__relative-time, @@ -1474,10 +1424,80 @@ position: absolute; } -.dropdown__sep { +.dropdown-menu__separator { border-bottom: 1px solid darken($ui-secondary-color, 8%); margin: 5px 7px 6px; - padding-top: 1px; + height: 0; +} + +.dropdown-menu { + background: $ui-secondary-color; + padding: 4px 0; + border-radius: 4px; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); + + ul { + list-style: none; + } +} + +.dropdown-menu__arrow { + position: absolute; + width: 0; + height: 0; + border: 0 solid transparent; + + &.left { + right: -5px; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: $ui-secondary-color; + } + + &.top { + bottom: -5px; + margin-left: -13px; + border-width: 5px 7px 0; + border-top-color: $ui-secondary-color; + } + + &.bottom { + top: -5px; + margin-left: -13px; + border-width: 0 7px 5px; + border-bottom-color: $ui-secondary-color; + } + + &.right { + left: -5px; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: $ui-secondary-color; + } +} + +.dropdown-menu__item { + a { + font-size: 13px; + line-height: 18px; + display: block; + padding: 4px 14px; + box-sizing: border-box; + text-decoration: none; + background: $ui-secondary-color; + color: $ui-base-color; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:focus, + &:hover, + &:active { + background: $ui-highlight-color; + color: $ui-secondary-color; + outline: 0; + } + } } .dropdown--active .dropdown__content { @@ -1647,9 +1667,8 @@ .column, .drawer { - @supports(display: grid) { // hack to fix Chrome <57 - contain: strict; - } + flex: 1 1 100%; + overflow: hidden; } @include limited-single-column('screen and (max-width: 360px)', $parent: null) { @@ -1663,7 +1682,7 @@ } :root { // Overrides .wide stylings for mobile view - @include single-column('screen and (max-width: 1024px)', $parent: null) { + @include single-column('screen and (max-width: 630px)', $parent: null) { .column, .drawer { flex: auto; @@ -1684,7 +1703,7 @@ } } -@include multi-columns('screen and (min-width: 1025px)', $parent: null) { +@include multi-columns('screen and (min-width: 631px)', $parent: null) { .columns-area { padding: 0; } @@ -1796,7 +1815,7 @@ &:hover, &:focus, &:active { - @include multi-columns('screen and (min-width: 1025px)') { + @include multi-columns('screen and (min-width: 631px)') { background: lighten($ui-base-color, 14%); transition: all 100ms linear; } @@ -1816,7 +1835,7 @@ } } -@include multi-columns('screen and (min-width: 1025px)', $parent: null) { +@include multi-columns('screen and (min-width: 631px)', $parent: null) { .tabs-bar { display: none; } @@ -1826,11 +1845,8 @@ overflow-y: scroll; overflow-x: hidden; flex: 1 1 auto; - backface-visibility: hidden; -webkit-overflow-scrolling: touch; - @supports(display: grid) { // hack to fix Chrome <57 - contain: strict; - } + will-change: transform; // improves perf in mobile Chrome &.optionally-scrollable { overflow-y: auto; @@ -1844,8 +1860,9 @@ flex: 0 0 auto; font-size: 16px; border: 0; - text-align: start; + text-align: unset; padding: 15px; + margin: 0; z-index: 3; &:hover { @@ -1867,6 +1884,10 @@ &:hover { text-decoration: underline; } + + &:last-child { + padding: 0 15px 0 0; + } } .column-back-button__icon { @@ -2071,15 +2092,18 @@ } .autosuggest-textarea__suggestions { + box-sizing: border-box; display: none; position: absolute; top: 100%; width: 100%; z-index: 99; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); background: $ui-secondary-color; + border-radius: 0 0 4px 4px; color: $ui-base-color; font-size: 14px; + padding: 6px; &.autosuggest-textarea__suggestions--visible { display: block; @@ -2089,39 +2113,41 @@ .autosuggest-textarea__suggestions__item { padding: 10px; cursor: pointer; + border-radius: 4px; - &:hover { - background: darken($ui-secondary-color, 10%); - } - + &:hover, + &:focus, + &:active, &.selected { - background: $ui-highlight-color; - color: $base-border-color; + background: darken($ui-secondary-color, 10%); } } -.autosuggest-account { - overflow: hidden; +.autosuggest-account, +.autosuggest-emoji { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + line-height: 18px; + font-size: 14px; } -.autosuggest-account-icon { - float: left; - margin-right: 5px; +.autosuggest-account-icon, +.autosuggest-emoji img { + display: block; + margin-right: 8px; + width: 16px; + height: 16px; } -.autosuggest-status { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - strong { - font-weight: 500; - } +.autosuggest-account .display-name__account { + color: lighten($ui-base-color, 36%); } .character-counter__wrapper { line-height: 36px; - margin-right: 16px; + margin: 0 16px 0 8px; padding-top: 10px; } @@ -2304,6 +2330,18 @@ button.icon-button.active i.fa-retweet { background: lighten($ui-base-color, 8%); } +.status-card.horizontal { + display: block; + + .status-card__image { + width: 100%; + } + + .status-card__image-image { + border-radius: 4px 4px 0 0; + } +} + .status-card__image-image { border-radius: 4px 0 0 4px; display: block; @@ -2662,12 +2700,8 @@ button.icon-button.active i.fa-retweet { } .media-spoiler { - align-items: center; background: $base-overlay-background; - color: $primary-text-color; - cursor: pointer; - display: flex; - flex-direction: column; + color: $ui-primary-color; border: 0; width: 100%; height: 100%; @@ -2675,15 +2709,14 @@ button.icon-button.active i.fa-retweet { position: relative; text-align: center; z-index: 100; + display: flex; + flex-direction: column; .status__content > & { margin-top: 15px; // Add margin when used bare for NSFW video player } - &.full-width { - margin-left: -68px; - width: calc(100% + 80px); - } + @include fullwidth-gallery; } .media-spoiler__warning { @@ -2858,197 +2891,61 @@ button.icon-button.active i.fa-retweet { animation-direction: alternate; } -.emoji-dialog { - width: 245px; - height: 270px; +.emoji-picker-dropdown__menu { background: $simple-background-color; - box-sizing: border-box; + position: absolute; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); border-radius: 4px; - overflow: hidden; - position: relative; - box-shadow: 0 0 8px rgba($base-shadow-color, 0.2); - - .emojione { - margin: 0; - width: 100%; - height: auto; - } - - .emoji-dialog-header { - padding: 0 10px; - - ul { - padding: 0; - margin: 0; - list-style: none; - } - - li { - display: inline-block; - box-sizing: border-box; - padding: 10px 5px; - cursor: pointer; - border-bottom: 2px solid transparent; - - .emoji { - width: 18px; - height: 18px; - } - - img, - svg { - width: 18px; - height: 18px; - filter: grayscale(100%); - } - - &:hover { - img, - svg { - filter: grayscale(0); - } - } - - &.active { - border-bottom-color: $ui-highlight-color; - - img, - svg { - filter: grayscale(0); - } - } - } - } - - .emoji-row { - box-sizing: border-box; - overflow-y: hidden; - padding-left: 10px; - - .emoji { - display: inline-block; - padding: 2.5px; - border-radius: 4px; - } - } - - .emoji-category-header { - box-sizing: border-box; - overflow-y: hidden; - padding: 10px 8px 10px 16px; - display: table; - - > * { - display: table-cell; - vertical-align: middle; - } - } + margin-top: 5px; - .emoji-category-title { - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - color: darken($ui-secondary-color, 18%); - cursor: default; + .emoji-mart-scroll { + transition: opacity 200ms ease; } - .emoji-category-heading-decoration { - text-align: right; + &.selecting .emoji-mart-scroll { + opacity: 0.5; } +} - .modifiers { - list-style: none; - padding: 0; - margin: 0; - vertical-align: middle; - white-space: nowrap; - margin-top: 4px; - - li { - display: inline-block; - padding: 0 2px; - - &:last-of-type { - padding-right: 0; - } - } - - .modifier { - display: inline-block; - border-radius: 10px; - width: 15px; - height: 15px; - position: relative; - cursor: pointer; - - &.active::after { - content: ""; - display: block; - position: absolute; - width: 7px; - height: 7px; - border-radius: 10px; - border: 2px solid $base-border-color; - top: 2px; - left: 2px; - } - } - } +.emoji-picker-dropdown__modifiers { + position: absolute; + top: 60px; + right: 11px; + cursor: pointer; +} - .emoji-search-wrapper { - padding: 10px; - border-bottom: 1px solid lighten($ui-secondary-color, 4%); - } +.emoji-picker-dropdown__modifiers__menu { + position: absolute; + z-index: 4; + top: -4px; + left: -8px; + background: $simple-background-color; + border-radius: 4px; + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + overflow: hidden; - .emoji-search { - font-size: 14px; - font-weight: 400; - padding: 7px 9px; - font-family: inherit; + button { display: block; - width: 100%; - background: rgba($ui-secondary-color, 0.3); - color: darken($ui-secondary-color, 18%); - border: 1px solid $ui-secondary-color; - border-radius: 4px; - } - - .emoji-categories-wrapper { - position: absolute; - top: 42px; - bottom: 0; - left: 0; - right: 0; - } - - .emoji-search-wrapper + .emoji-categories-wrapper { - top: 93px; - } - - .emoji-row .emoji { - img, - svg { - transition: transform 60ms ease-in-out; - } - - &:hover { - background: lighten($ui-secondary-color, 3%); + cursor: pointer; + border: 0; + padding: 4px 8px; + background: transparent; - img, - svg { - transform: translateZ(0) scale(1.2); - } + &:hover, + &:focus, + &:active { + background: rgba($ui-secondary-color, 0.4); } } - .emoji { - width: 22px; + .emoji-mart-emoji { height: 22px; - cursor: pointer; + } +} - &:focus { - outline: 0; - } +.emoji-mart-emoji { + span { + background-repeat: no-repeat; } } @@ -3335,8 +3232,6 @@ button.icon-button.active i.fa-retweet { } .search__input { - padding-right: 30px; - color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -3524,7 +3419,8 @@ button.icon-button.active i.fa-retweet { } .onboarding-modal, -.error-modal { +.error-modal, +.embed-modal { background: $ui-secondary-color; color: $ui-base-color; border-radius: 8px; @@ -3848,7 +3744,8 @@ button.icon-button.active i.fa-retweet { .boost-modal, .confirmation-modal, .report-modal, -.actions-modal { +.actions-modal, +.mute-modal { background: lighten($ui-secondary-color, 8%); color: $ui-base-color; border-radius: 8px; @@ -3859,17 +3756,7 @@ button.icon-button.active i.fa-retweet { flex-direction: column; .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; - } - - .status__avatar { - height: 28px; - left: 10px; - position: absolute; - top: 10px; - width: 48px; + display: flex; } } @@ -3880,6 +3767,10 @@ button.icon-button.active i.fa-retweet { padding-top: 10px; padding-bottom: 10px; } + + .dropdown-menu__separator { + border-bottom-color: $ui-secondary-color; + } } .boost-modal__container { @@ -3894,6 +3785,7 @@ button.icon-button.active i.fa-retweet { .boost-modal__action-bar, .confirmation-modal__action-bar, +.mute-modal__action-bar, .report-modal__action-bar { display: flex; justify-content: space-between; @@ -3957,6 +3849,10 @@ button.icon-button.active i.fa-retweet { max-height: 80vh; max-width: 80vw; + .actions-modal__item-label { + font-weight: 500; + } + ul { overflow-y: auto; flex-shrink: 0; @@ -3969,11 +3865,20 @@ button.icon-button.active i.fa-retweet { a { color: $ui-base-color; display: flex; - padding: 10px; + padding: 12px 16px; + font-size: 15px; align-items: center; text-decoration: none; - &.active { + &, + button { + transition: none; + } + + &.active, + &:hover, + &:active, + &:focus { &, button { background: $ui-highlight-color; @@ -3989,8 +3894,10 @@ button.icon-button.active i.fa-retweet { } } -.confirmation-modal__action-bar { - .confirmation-modal__cancel-button { +.confirmation-modal__action-bar, +.mute-modal__action-bar { + .confirmation-modal__cancel-button, + .mute-modal__cancel-button { background-color: transparent; color: darken($ui-secondary-color, 34%); font-size: 14px; @@ -4005,6 +3912,7 @@ button.icon-button.active i.fa-retweet { } .confirmation-modal__container, +.mute-modal__container, .report-modal__target { padding: 30px; font-size: 16px; @@ -4113,15 +4021,12 @@ button.icon-button.active i.fa-retweet { background: $base-shadow-color; width: 100%; - &.full-width { - margin-left: -68px; - width: calc(100% + 80px); - } - .detailed-status & { margin-left:-10px; width: calc(100% + 22px); } + + @include fullwidth-gallery; } .media-gallery__item { @@ -4130,6 +4035,12 @@ button.icon-button.active i.fa-retweet { display: block; float: left; position: relative; + + &.standalone { + .media-gallery__item-gifv-thumbnail { + transform: none; + } + } } .media-gallery__item-thumbnail { @@ -4137,6 +4048,7 @@ button.icon-button.active i.fa-retweet { text-decoration: none; width: 100%; height: 100%; + line-height: 0; display: flex; img { @@ -4192,10 +4104,7 @@ button.icon-button.active i.fa-retweet { position: relative; width: 100%; - &.full-width { - margin-left: -68px; - width: calc(100% + 80px); - } + @include fullwidth-gallery; } .status__video-player-video { @@ -4242,6 +4151,182 @@ button.icon-button.active i.fa-retweet { z-index: 5; } +.video-player { + overflow: hidden; + position: relative; + background: $base-shadow-color; + max-width: 100%; + + video { + height: 100%; + width: 100%; + z-index: 1; + } + + &.fullscreen { + width: 100% !important; + height: 100% !important; + margin: 0; + + video { + max-width: 100% !important; + max-height: 100% !important; + } + } + + &.inline { + video { + object-fit: cover; + position: relative; + top: 50%; + transform: translateY(-50%); + } + } + + &__controls { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + box-sizing: border-box; + background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 60%, transparent); + padding: 0 10px; + opacity: 0; + transition: opacity .1s ease; + + &.active { + opacity: 1; + } + } + + &.inactive { + video, + .video-player__controls { + visibility: hidden; + } + } + + &__spoiler { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 4; + border: 0; + background: $base-shadow-color; + color: $ui-primary-color; + transition: none; + pointer-events: none; + + &.active { + display: block; + pointer-events: auto; + + &:hover, + &:active, + &:focus { + color: lighten($ui-primary-color, 8%); + } + } + + &__title { + display: block; + font-size: 14px; + } + + &__subtitle { + display: block; + font-size: 11px; + font-weight: 500; + } + } + + &__buttons { + padding-bottom: 10px; + font-size: 16px; + + &.left { + float: left; + + button { + padding-right: 10px; + } + } + + &.right { + float: right; + + button { + padding-left: 10px; + } + } + + button { + background: transparent; + padding: 0; + border: 0; + color: $white; + + &:active, + &:hover, + &:focus { + color: $ui-highlight-color; + } + } + } + + &__seek { + cursor: pointer; + height: 24px; + position: relative; + + &::before { + content: ""; + width: 100%; + background: rgba($white, 0.35); + display: block; + position: absolute; + height: 4px; + top: 10px; + } + + &__progress { + display: block; + position: absolute; + height: 4px; + top: 10px; + background: $ui-highlight-color; + } + + &__handle { + position: absolute; + z-index: 3; + opacity: 0; + border-radius: 50%; + width: 12px; + height: 12px; + top: 6px; + margin-left: -6px; + transition: opacity .1s ease; + background: $ui-highlight-color; + pointer-events: none; + + &.active { + opacity: 1; + } + } + + &:hover { + .video-player__seek__handle { + opacity: 1; + } + } + } +} + .media-spoiler-video { background-size: cover; background-repeat: no-repeat; @@ -4251,10 +4336,10 @@ button.icon-button.active i.fa-retweet { position: relative; width: 100%; - &.full-width { - margin-left: -68px; - width: calc(100% + 80px); - } + @include fullwidth-gallery; + + border: 0; + display: block; } .media-spoiler-video-play-icon { @@ -4272,12 +4357,14 @@ button.icon-button.active i.fa-retweet { .account-gallery__container { margin: -2px; padding: 4px; + display: flex; + flex-wrap: wrap; } .account-gallery__item { - float: left; - width: 96px; - height: 96px; + flex: 1 1 auto; + width: calc(100% / 3 - 4px); + height: 95px; margin: 2px; a { @@ -4288,6 +4375,14 @@ button.icon-button.active i.fa-retweet { background-size: cover; background-position: center; position: relative; + color: inherit; + text-decoration: none; + + &:hover, + &:active, + &:focus { + outline: 0; + } } } @@ -4339,6 +4434,15 @@ noscript { margin: 30px auto; color: $ui-secondary-color; max-width: 400px; + + a { + color: $ui-highlight-color; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } } } @@ -4348,7 +4452,7 @@ noscript { 100% { opacity: 1; } } -@media screen and (max-width: 1024px) and (max-height: 400px) { +@media screen and (max-width: 630px) and (max-height: 400px) { $duration: 400ms; $delay: 100ms; @@ -4446,3 +4550,64 @@ noscript { height: 100% !important; } } + +.embed-modal { + max-width: 80vw; + max-height: 80vh; + + h4 { + padding: 30px; + font-weight: 500; + font-size: 16px; + text-align: center; + } + + .embed-modal__container { + padding: 10px; + + .hint { + margin-bottom: 15px; + } + + .embed-modal__html { + color: $ui-secondary-color; + outline: 0; + box-sizing: border-box; + display: block; + width: 100%; + border: none; + padding: 10px; + font-family: 'mastodon-font-monospace', monospace; + background: $ui-base-color; + color: $ui-primary-color; + font-size: 14px; + margin: 0; + margin-bottom: 15px; + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: lighten($ui-base-color, 4%); + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } + } + + .embed-modal__iframe { + width: 400px; + max-width: 100%; + overflow: hidden; + border: 0; + } + } +} diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss index 7dcf2c006..af2589e23 100644 --- a/app/javascript/styles/containers.scss +++ b/app/javascript/styles/containers.scss @@ -3,7 +3,7 @@ margin: 0 auto; margin-top: 40px; - @media screen and (max-width: 700px) { + @media screen and (max-width: 740px) { width: 100%; margin: 0; } @@ -13,8 +13,9 @@ margin: 100px auto; margin-bottom: 50px; - @media screen and (max-width: 360px) { + @media screen and (max-width: 400px) { margin: 30px auto; + margin-bottom: 20px; } h1 { @@ -42,3 +43,74 @@ } } } + +.compose-standalone { + .compose-form { + width: 400px; + margin: 0 auto; + padding: 20px 0; + margin-top: 40px; + box-sizing: border-box; + + @media screen and (max-width: 400px) { + width: 100%; + margin-top: 0; + padding: 20px; + } + } +} + +.account-header { + width: 400px; + margin: 0 auto; + display: flex; + font-size: 13px; + line-height: 18px; + box-sizing: border-box; + padding: 20px 0; + padding-bottom: 0; + margin-bottom: -30px; + margin-top: 40px; + + @media screen and (max-width: 440px) { + width: 100%; + margin: 0; + margin-bottom: 10px; + padding: 20px; + padding-bottom: 0; + } + + .avatar { + width: 40px; + height: 40px; + margin-right: 8px; + + img { + width: 100%; + height: 100%; + display: block; + margin: 0; + border-radius: 4px; + } + } + + .name { + flex: 1 1 auto; + color: $ui-secondary-color; + width: calc(100% - 88px); + + .username { + display: block; + font-weight: 500; + text-overflow: ellipsis; + overflow: hidden; + } + } + + .logout-link { + display: block; + font-size: 32px; + line-height: 40px; + margin-left: 8px; + } +} diff --git a/app/javascript/styles/custom.scss b/app/javascript/styles/custom.scss deleted file mode 100644 index 97a981243..000000000 --- a/app/javascript/styles/custom.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'application'; diff --git a/app/javascript/styles/emoji_picker.scss b/app/javascript/styles/emoji_picker.scss new file mode 100644 index 000000000..2b46d30fc --- /dev/null +++ b/app/javascript/styles/emoji_picker.scss @@ -0,0 +1,199 @@ +.emoji-mart { + &, + * { + box-sizing: border-box; + line-height: 1.15; + } + + font-size: 13px; + display: inline-block; + color: $ui-base-color; + + .emoji-mart-emoji { + padding: 6px; + } +} + +.emoji-mart-bar { + border: 0 solid darken($ui-secondary-color, 8%); + + &:first-child { + border-bottom-width: 1px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + background: $ui-secondary-color; + } + + &:last-child { + border-top-width: 1px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + display: none; + } +} + +.emoji-mart-anchors { + display: flex; + justify-content: space-between; + padding: 0 6px; + color: $ui-primary-color; + line-height: 0; +} + +.emoji-mart-anchor { + position: relative; + flex: 1; + text-align: center; + padding: 12px 4px; + overflow: hidden; + transition: color .1s ease-out; + cursor: pointer; + + &:hover { + color: darken($ui-primary-color, 4%); + } +} + +.emoji-mart-anchor-selected { + color: darken($ui-highlight-color, 3%); + + &:hover { + color: darken($ui-highlight-color, 3%); + } + + .emoji-mart-anchor-bar { + bottom: 0; + } +} + +.emoji-mart-anchor-bar { + position: absolute; + bottom: -3px; + left: 0; + width: 100%; + height: 3px; + background-color: darken($ui-highlight-color, 3%); +} + +.emoji-mart-anchors { + i { + display: inline-block; + width: 100%; + max-width: 22px; + } + + svg { + fill: currentColor; + max-height: 18px; + } +} + +.emoji-mart-scroll { + overflow-y: scroll; + height: 270px; + max-height: 35vh; + padding: 0 6px 6px; + background: $simple-background-color; + will-change: transform; +} + +.emoji-mart-search { + padding: 10px; + padding-right: 45px; + background: $simple-background-color; + + input { + font-size: 14px; + font-weight: 400; + padding: 7px 9px; + font-family: inherit; + display: block; + width: 100%; + background: rgba($ui-secondary-color, 0.3); + color: $ui-primary-color; + border: 1px solid $ui-secondary-color; + border-radius: 4px; + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + } +} + +.emoji-mart-category .emoji-mart-emoji { + cursor: pointer; + + span { + z-index: 1; + position: relative; + text-align: center; + } + + &:hover::before { + z-index: 0; + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba($ui-secondary-color, 0.7); + border-radius: 100%; + } +} + +.emoji-mart-category-label { + z-index: 2; + position: relative; + position: -webkit-sticky; + position: sticky; + top: 0; + + span { + display: block; + width: 100%; + font-weight: 500; + padding: 5px 6px; + background: $simple-background-color; + } +} + +.emoji-mart-emoji { + position: relative; + display: inline-block; + font-size: 0; + + span { + width: 22px; + height: 22px; + } +} + +.emoji-mart-no-results { + font-size: 14px; + text-align: center; + padding-top: 70px; + color: $ui-primary-color; + + .emoji-mart-category-label { + display: none; + } + + .emoji-mart-no-results-label { + margin-top: .2em; + } + + .emoji-mart-emoji:hover::before { + content: none; + } +} + +.emoji-mart-preview { + display: none; +} diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss index cffb6f197..0526f174c 100644 --- a/app/javascript/styles/forms.scss +++ b/app/javascript/styles/forms.scss @@ -24,7 +24,7 @@ code { p.hint { margin-bottom: 15px; - color: lighten($ui-base-color, 32%); + color: $ui-primary-color; &.subtle-hint { text-align: center; @@ -32,10 +32,10 @@ code { line-height: 18px; margin-top: 15px; margin-bottom: 0; - color: $ui-base-lighter-color; + color: $ui-primary-color; a { - color: $ui-primary-color; + color: $ui-highlight-color; } } } @@ -53,7 +53,6 @@ code { label { flex: 0 0 auto; - width: 100px; } input { @@ -65,12 +64,37 @@ code { padding: 15px 0; margin-bottom: 0; + .label_input { + flex-wrap: wrap; + align-items: flex-start; + } + + &.select .label_input { + align-items: initial; + } + .label_input > label { font-family: inherit; font-size: 16px; color: $primary-text-color; display: block; padding-top: 5px; + margin-bottom: 5px; + flex: 1; + min-width: 150px; + word-wrap: break-word; + + &.select { + flex: 0; + } + + & ~ * { + margin-left: 10px; + } + } + + ul { + flex: 390px; } &.boolean { @@ -317,7 +341,7 @@ code { } .flash-message { - background: $ui-base-color; + background: lighten($ui-base-color, 8%); color: $ui-primary-color; border-radius: 4px; padding: 15px 10px; @@ -325,9 +349,46 @@ code { box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); text-align: center; + p { + margin-bottom: 15px; + } + + .oauth-code { + color: $ui-secondary-color; + outline: 0; + box-sizing: border-box; + display: block; + width: 100%; + border: none; + padding: 10px; + font-family: 'mastodon-font-monospace', monospace; + background: $ui-base-color; + color: $ui-primary-color; + font-size: 14px; + margin: 0; + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: lighten($ui-base-color, 4%); + } + } + strong { font-weight: 500; } + + @media screen and (max-width: 740px) and (min-width: 441px) { + margin-top: 40px; + } } .form-footer { @@ -359,17 +420,23 @@ code { color: $ui-secondary-color; font-weight: 500; } + + @media screen and (max-width: 740px) and (min-width: 441px) { + margin-top: 40px; + } } .qr-wrapper { display: flex; + flex-wrap: wrap; + align-items: flex-start; } .qr-code { flex: 0 0 auto; background: $simple-background-color; padding: 4px; - margin-bottom: 20px; + margin: 0 10px 20px 0; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); display: inline-block; @@ -380,8 +447,9 @@ code { } .qr-alternative { - margin-left: 10px; - color: $ui-primary-color; + margin-bottom: 20px; + color: $ui-secondary-color; + flex: 150px; samp { display: block; @@ -391,7 +459,6 @@ code { .table-form { p { - max-width: 400px; margin-bottom: 15px; strong { @@ -403,7 +470,6 @@ code { .simple_form, .table-form { .warning { - max-width: 400px; box-sizing: border-box; background: rgba($error-value-color, 0.5); color: $primary-text-color; diff --git a/app/javascript/styles/landing_strip.scss b/app/javascript/styles/landing_strip.scss index d2ac5b822..15ff84912 100644 --- a/app/javascript/styles/landing_strip.scss +++ b/app/javascript/styles/landing_strip.scss @@ -5,6 +5,8 @@ padding: 14px; border-radius: 4px; margin-bottom: 20px; + display: flex; + align-items: center; strong, a { @@ -15,4 +17,15 @@ color: inherit; text-decoration: underline; } + + .logo { + width: 30px; + height: 30px; + flex: 0 0 auto; + margin-right: 15px; + } + + @media screen and (max-width: 740px) { + margin-bottom: 0; + } } diff --git a/app/javascript/styles/rtl.scss b/app/javascript/styles/rtl.scss index 4966fbc21..0fdeccd9c 100644 --- a/app/javascript/styles/rtl.scss +++ b/app/javascript/styles/rtl.scss @@ -8,7 +8,7 @@ body.rtl { } .character-counter__wrapper { - margin-right: 0; + margin-right: 8px; margin-left: 16px; } @@ -32,6 +32,11 @@ body.rtl { right: auto; } + .column-header__back-button { + padding-left: 5px; + padding-right: 0; + } + .column-header__setting-arrows { float: left; } @@ -54,25 +59,64 @@ body.rtl { right: 10px; } - .status { + .status, + .activity-stream .status.light { padding-left: 10px; padding-right: 68px; } - .status__info .status__display-name { + .status__info .status__display-name, + .activity-stream .status.light .status__display-name { padding-left: 25px; padding-right: 0; } + .activity-stream .pre-header { + padding-right: 68px; + padding-left: 0; + } + + .status__prepend { + margin-left: 0; + margin-right: 68px; + } + + .status__prepend-icon-wrapper { + left: auto; + right: -26px; + } + + .activity-stream .pre-header .pre-header__icon { + left: auto; + right: 42px; + } + + .account__avatar-overlay-overlay { + right: auto; + left: 0; + } + .column-back-button--slim-button { right: auto; left: 0; } - .status__relative-time { + .status__relative-time, + .activity-stream .status.light .status__header .status__meta { float: left; } + .activity-stream .detailed-status.light .detailed-status__display-name > div { + float: right; + margin-right: 0; + margin-left: 10px; + } + + .activity-stream .detailed-status.light .detailed-status__meta span > span { + margin-left: 0; + margin-right: 6px; + } + .status__action-bar-button { float: right; margin-right: 0; @@ -129,7 +173,79 @@ body.rtl { right: -2.14285714em; } - @media screen and (min-width: 1025px) { + .admin-wrapper .sidebar ul a i.fa, + a.table-action-link i.fa { + margin-right: 0; + margin-left: 5px; + } + + .simple_form .check_boxes .checkbox label, + .simple_form .input.with_label.boolean label.checkbox { + padding-left: 0; + padding-right: 25px; + } + + .simple_form .check_boxes .checkbox input[type="checkbox"], + .simple_form .input.boolean input[type="checkbox"] { + left: auto; + right: 0; + } + + .simple_form .input-with-append .input input { + padding-left: 127px; + padding-right: 0; + } + + .simple_form .input-with-append .append { + right: auto; + left: 0; + } + + .table th, + .table td { + text-align: right; + } + + .filters .filter-subset { + margin-right: 0; + margin-left: 45px; + } + + .landing-page .header-wrapper .mascot { + right: 60px; + left: auto; + } + + .landing-page .header .hero .floats .float-1 { + left: -120px; + right: auto; + } + + .landing-page .header .hero .floats .float-2 { + left: 210px; + right: auto; + } + + .landing-page .header .hero .floats .float-3 { + left: 110px; + right: auto; + } + + .landing-page .header .links .brand img { + left: 0; + } + + .landing-page .fa-external-link { + padding-right: 5px; + padding-left: 0 !important; + } + + .landing-page .features #mastodon-timeline { + margin-right: 0; + margin-left: 30px; + } + + @media screen and (min-width: 631px) { .column, .drawer { padding-left: 5px; @@ -139,11 +255,6 @@ body.rtl { padding-left: 5px; padding-right: 10px; } - - &:last-child { - padding-right: 0; - padding-left: 10px; - } } .columns-area > div { diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss index baacb4913..453070b7c 100644 --- a/app/javascript/styles/stream_entries.scss +++ b/app/javascript/styles/stream_entries.scss @@ -8,6 +8,7 @@ .detailed-status.light, .status.light { border-bottom: 1px solid $ui-secondary-color; + animation: none; } &:last-child { @@ -34,6 +35,14 @@ } } } + + @media screen and (max-width: 740px) { + &, + .detailed-status.light, + .status.light { + border-radius: 0 !important; + } + } } &.with-header { @@ -44,6 +53,14 @@ .status.light { border-radius: 0; } + + &:last-child { + &, + .detailed-status.light, + .status.light { + border-radius: 0 0 4px 4px; + } + } } } } @@ -92,9 +109,9 @@ .display-name { display: block; max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + //overflow: hidden; + //white-space: nowrap; + //text-overflow: ellipsis; strong { font-weight: 500; @@ -123,19 +140,6 @@ } } } - - .status__attachments { - margin-top: 8px; - overflow: hidden; - width: 100%; - box-sizing: border-box; - position: relative; - - .status__attachments__inner { - display: flex; - height: 214px; - } - } } .detailed-status.light { @@ -216,139 +220,35 @@ } } - .detailed-status__attachments { - margin-top: 8px; - overflow: hidden; - width: 100%; - box-sizing: border-box; - position: relative; + .status-card { + border-color: lighten($ui-secondary-color, 4%); + color: darken($ui-primary-color, 4%); - .status__attachments__inner { - display: flex; - height: 360px; + &:hover { + background: lighten($ui-secondary-color, 4%); } } - .video-player { - margin-top: 8px; - height: 300px; - overflow: hidden; - position: relative; - - video { - position: relative; - z-index: 1; - width: 100%; - height: 100%; - object-fit: cover; - top: 50%; - transform: translateY(-50%); - } - } - } - - .media-item, - .video-item { - box-sizing: border-box; - position: relative; - left: auto; - top: auto; - right: auto; - bottom: auto; - float: left; - border: medium none; - display: block; - flex: 1 1 auto; - width: 100%; - height: 100%; - overflow: hidden; - margin-right: 2px; - - &:last-child { - margin-right: 0; - } - - a { - display: block; - width: 100%; - height: 100%; - background: no-repeat scroll center center / cover; - text-decoration: none; - cursor: zoom-in; + .status-card__title, + .status-card__description { + color: $ui-base-color; } - video { - position: relative; - z-index: 1; - width: 100%; - height: 100%; - object-fit: cover; - top: 50%; - transform: translateY(-50%); - } - } - - .video-item { - a { - cursor: pointer; - } - - .video-item__play { - position: absolute; - top: 50%; - left: 50%; - font-size: 36px; - transform: translate(-50%, -50%); - padding: 5px; - border-radius: 100px; - color: rgba($primary-text-color, 0.8); - z-index: 1; + .status-card__image { + background: $ui-secondary-color; } } .media-spoiler { background: $ui-primary-color; - width: 100%; - height: 100%; - cursor: pointer; - position: absolute; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - text-align: center; + color: $white; transition: all 100ms linear; - z-index: 2; - &:hover { + &:hover, + &:active, + &:focus { background: darken($ui-primary-color, 5%); - } - - span { - display: block; - - &:first-child { - font-size: 14px; - } - - &:last-child { - font-size: 11px; - font-weight: 500; - } - } - } - - .media-spoiler-wrapper { - &.media-spoiler-wrapper__visible { - .media-spoiler { - display: none; - } - - .spoiler-button { - display: block; - } + color: unset; } } @@ -382,19 +282,52 @@ .embed { .activity-stream { - border-radius: 4px; box-shadow: none; .entry { - &:last-child { - border-radius: 0 0 4px 4px; - } - &:first-child { - border-radius: 4px 4px 0 0; + .detailed-status.light { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; - &:last-child { - border-radius: 4px; + .detailed-status__display-name { + flex: 1; + margin: 0 5px 15px 0; + } + + .button.button-secondary.logo-button { + flex: 0 auto; + font-size: 14px; + + svg { + width: 20px; + height: auto; + vertical-align: middle; + margin-right: 5px; + + path:first-child { + fill: $ui-primary-color; + } + + path:last-child { + fill: $simple-background-color; + } + } + + &:active, + &:focus, + &:hover { + svg path:first-child { + fill: lighten($ui-primary-color, 4%); + } + } + } + + .status__content, + .detailed-status__meta { + flex: 100%; } } } diff --git a/app/javascript/styles/tables.scss b/app/javascript/styles/tables.scss index 6e54c59c0..ad46f5f9f 100644 --- a/app/javascript/styles/tables.scss +++ b/app/javascript/styles/tables.scss @@ -3,7 +3,6 @@ max-width: 100%; border-spacing: 0; border-collapse: collapse; - margin-bottom: 20px; th, td { @@ -43,19 +42,17 @@ font-weight: 500; } - &.inline-table { - td, - th { - padding: 8px 0; - } - - & > tbody > tr:nth-child(odd) > td, - & > tbody > tr:nth-child(odd) > th { - background: transparent; - } + &.inline-table > tbody > tr:nth-child(odd) > td, + &.inline-table > tbody > tr:nth-child(odd) > th { + background: transparent; } } +.table-wrapper { + overflow: auto; + margin-bottom: 20px; +} + samp { font-family: 'mastodon-font-monospace', monospace; } |