diff options
| author | Eugen Rochko <eugen@zeonfederated.com> | 2017-05-03 02:04:16 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-05-03 02:04:16 +0200 |
| commit | f5bf5ebb82e3af420dcd23d602b1be6cc86838e1 (patch) | |
| tree | 92eef08642a038cf44ccbc6d16a884293e7a0814 /app/assets/stylesheets | |
| parent | 26bc5915727e0a0173c03cb49f5193dd612fb888 (diff) | |
Replace sprockets/browserify with Webpack (#2617)
* Replace browserify with webpack * Add react-intl-translations-manager * Do not minify in development, add offline-plugin for ServiceWorker background cache updates * Adjust tests and dependencies * Fix production deployments * Fix tests * More optimizations * Improve travis cache for npm stuff * Re-run travis * Add back support for custom.scss as before * Remove offline-plugin and babili * Fix issue with Immutable.List().unshift(...values) not working as expected * Make travis load schema instead of running all migrations in sequence * Fix missing React import in WarningContainer. Optimize rendering performance by using ImmutablePureComponent instead of React.PureComponent. ImmutablePureComponent uses Immutable.is() to compare props. Replace dynamic callback bindings in <UI /> * Add react definitions to places that use JSX * Add Procfile.dev for running rails, webpack and streaming API at the same time
Diffstat (limited to 'app/assets/stylesheets')
22 files changed, 0 insertions, 5527 deletions
diff --git a/app/assets/stylesheets/.gitkeep b/app/assets/stylesheets/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/app/assets/stylesheets/.gitkeep diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss deleted file mode 100644 index b1139b86f..000000000 --- a/app/assets/stylesheets/about.scss +++ /dev/null @@ -1,374 +0,0 @@ -.about-body { - .wrapper { - max-width: 600px; - margin: 0 auto; - color: $color3; - padding-top: 50px; - padding-bottom: 50px; - - &.thicc { - max-width: 700px; - } - } - - h1 { - font: 46px/52px 'Roboto', sans-serif; - font-weight: 600; - margin-bottom: 20px; - color: $color4; - padding: 20px 0; - - img { - margin-bottom: -5px; - margin-right: 5px; - width: 46px; - height: 46px; - } - } - - h2 { - font-family: 'Montserrat', sans-serif; - font-size: 24px; - line-height: 28px; - font-weight: 400; - margin-bottom: 20px; - color: $color5; - } - - h3 { - font-family: 'Montserrat', sans-serif; - font-size: 20px; - line-height: 28px; - font-weight: 400; - margin-bottom: 20px; - color: $color2; - } - - ul, ol { - list-style: inherit; - margin-left: 20px; - - &[type='a'] { - list-style-type: lower-alpha; - } - - &[type='i'] { - list-style-type: lower-roman; - } - } - - li > ol, li > ul { - margin-top: 20px; - } - - p, li { - font: 16px/28px 'Montserrat', sans-serif; - font-weight: 400; - margin-bottom: 12px; - - a { - color: $color4; - text-decoration: underline; - } - } - - em { - display: inline-block; - padding: 7px 7px 5px 7px; - margin: 0 2px; - background: $color3; - color: $color1; - font: 16px/16px 'Montserrat', sans-serif; - font-weight: 300; - } - - .screenshot { - box-shadow: 0 0 15px rgba($color8, 0.4); - margin-bottom: 26px; - - img { - max-width: 100%; - height: auto; - display: block; - } - } - - .actions { - overflow: hidden; - margin-bottom: 20px; - - .info { - float: right; - text-align: right; - line-height: 36px; - - a { - color: $color3; - text-decoration: underline; - } - } - } - - @media screen and (max-width: 625px) { - .wrapper { - padding: 20px; - } - - .features-list { - display: block; - } - } -} - -.information-board { - margin: 20px 0; - display: flex; - justify-content: space-between; - border-top: 1px solid lighten($color1, 10%); - border-bottom: 1px solid lighten($color1, 10%); - padding-right: 14px; - - .section { - flex: 1 0 0; - padding: 14px; - text-align: right; - font: 16px/28px 'Montserrat', sans-serif; - - span, strong { - display: block; - } - - span { - font-size: 16px; - - &:last-child { - color: $color2; - font-size: 14px; - } - } - - strong { - font-weight: 500; - font-size: 32px; - line-height: 48px; - color: $color5; - } - } - - @media screen and (max-width: 500px) { - flex-direction: column; - - .section { - text-align: left; - } - } -} - -.owner { - text-align: center; - - .avatar { - width: 80px; - height: 80px; - margin: 0 auto; - margin-bottom: 15px; - - img { - display: block; - width: 80px; - height: 80px; - border-radius: 48px; - } - } - - .name { - font-size: 14px; - - a { - display: block; - color: $color5; - text-decoration: none; - - &:hover { - .display_name { - text-decoration: underline; - } - } - } - - .username { - display: block; - color: $color3; - } - } -} - -.contact-email { - text-align: center; - margin: 40px 0; - - strong { - display: block; - color: $color5; - word-break: break-word; - } -} - -.sidebar-layout { - display: flex; - - .main { - flex: 1 1 auto; - padding: 14px 0; - - .panel { - padding-right: 14px; - } - } - - .sidebar { - border-left: 1px solid lighten($color1, 10%); - width: 180px; - flex: 0 0 auto; - } - - .panel { - .panel-header { - background: lighten($color1, 10%); - padding: 7px 14px; - text-transform: uppercase; - font-size: 12px; - font-weight: 500; - } - - .panel-body { - padding: 14px; - } - - .panel-list { - ul { - list-style: none; - margin: 0; - - li { - margin: 0; - font-family: inherit; - font-size: 13px; - line-height: 18px; - - a { - display: block; - padding: 7px 14px; - color: rgba($color5, 0.7); - text-decoration: none; - transition: all 200ms linear; - - i.fa { - margin-right: 5px; - } - - &:hover { - color: $color5; - background-color: darken($color1, 5%); - transition: all 100ms linear; - } - - &.selected { - color: $color5; - background-color: $color4; - - &:hover { - background-color: lighten($color4, 5%); - } - } - } - } - } - } - } - - @media screen and (max-width: 625px) { - flex-direction: column; - - .sidebar { - border: 1px solid lighten($color1, 10%); - width: auto; - } - } -} - -.features-list { - display: flex; - margin-bottom: 20px; - - .features-list__column { - flex: 1 1 0; - - ul { - list-style: none; - } - - li { - margin: 0; - } - } -} - -.screenshot-with-signup { - display: flex; - margin-bottom: 20px; - - .mascot { - flex: 1 1 auto; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - - img { - display: block; - margin: 0 auto; - max-width: 100%; - height: auto; - } - } - - .simple_form, .closed-registrations-message { - width: 300px; - flex: 0 0 auto; - background: rgba(darken($color1, 7%), 0.5); - padding: 14px; - border-radius: 4px; - box-shadow: 0 0 15px rgba($color8, 0.4); - - .actions { - margin-bottom: 0; - } - - .info { - text-align: center; - - a { - color: $color2; - } - } - } - - @media screen and (max-width: 625px) { - .mascot { - display: none; - } - - .simple_form, .closed-registrations-message { - flex: auto; - } - } -} - -.closed-registrations-message { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; -} diff --git a/app/assets/stylesheets/accounts.scss b/app/assets/stylesheets/accounts.scss deleted file mode 100644 index 99af9c982..000000000 --- a/app/assets/stylesheets/accounts.scss +++ /dev/null @@ -1,391 +0,0 @@ -.card { - background: $color1; - background-size: cover; - padding: 60px 0; - padding-bottom: 0; - border-radius: 4px 4px 0 0; - box-shadow: 0 0 15px rgba($color8, 0.2); - overflow: hidden; - position: relative; - - @media screen and (max-width: 700px) { - border-radius: 0; - box-shadow: none; - } - - &:after { - background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8)); - display: block; - content: ""; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; - } - - .name { - display: block; - font-size: 20px; - line-height: 18px * 1.5; - color: $color5; - font-weight: 500; - text-align: center; - position: relative; - z-index: 2; - text-shadow: 0 0 2px $color8; - - small { - display: block; - font-size: 14px; - color: $color4; - font-weight: 400; - } - } - - .avatar { - width: 120px; - margin: 0 auto; - margin-bottom: 15px; - position: relative; - z-index: 2; - - img { - width: 120px; - height: 120px; - display: block; - border-radius: 120px; - } - } - - .controls { - position: absolute; - top: 10px; - right: 10px; - z-index: 2; - } - - .details { - display: flex; - margin-top: 30px; - position: relative; - z-index: 2; - flex-direction: row; - } - - .details-counters { - display: flex; - flex-direction: row; - order: 0; - } - - .counter { - width: 80px; - color: $color3; - padding: 5px 10px 0px; - margin-bottom: 10px; - border-right: 1px solid $color3; - cursor: default; - position: relative; - - a { - display: block; - } - - &:after { - display: block; - content: ""; - position: absolute; - bottom: -10px; - left: 0; - width: 100%; - border-bottom: 4px solid $color3; - opacity: 0.5; - transition: all 0.8s ease; - } - - &.active { - &:after { - border-bottom: 4px solid $color4; - opacity: 1; - } - } - - &:hover { - &:after { - opacity: 1; - transition-duration: 0.2s; - } - } - - a { - text-decoration: none; - color: inherit; - } - - .counter-label { - font-size: 12px; - text-transform: uppercase; - display: block; - margin-bottom: 5px; - text-shadow: 0 0 2px $color8; - } - - .counter-number { - font-weight: 500; - font-size: 18px; - color: $color5; - } - } - - .bio { - flex: 1; - font-size: 14px; - line-height: 18px; - padding: 5px 10px; - color: $color2; - order: 1; - } - - @media screen and (max-width: 480px) { - .details { - display: block; - } - - .bio { - text-align: center; - margin-bottom: 20px; - } - - .counter { - flex: 1 1 auto; - } - - .counter:last-child { - border-right: none; - } - } -} - -.pagination { - padding: 30px 0; - text-align: center; - overflow: hidden; - - a, .current, .next, .prev, .page, .gap { - font-size: 14px; - color: $color5; - font-weight: 500; - display: inline-block; - padding: 6px 10px; - text-decoration: none; - } - - .current { - background: $color5; - border-radius: 100px; - color: $color1; - cursor: default; - margin: 0 10px; - } - - .gap { - cursor: default; - } - - .prev, .next { - text-transform: uppercase; - color: $color2; - } - - .prev { - float: left; - padding-left: 0; - - .fa { - display: inline-block; - margin-right: 5px; - } - } - - .next { - float: right; - padding-right: 0; - - .fa { - display: inline-block; - margin-left: 5px; - } - } - - .disabled { - cursor: default; - color: lighten($color1, 10%); - } - - @media screen and (max-width: 360px) { - padding: 30px 20px; - - a, .current, .next, .prev, .gap { - display: none; - } - - .next, .prev { - display: inline-block; - } - } -} - -.accounts-grid { - box-shadow: 0 0 15px rgba($color8, 0.2); - background: $color5; - border-radius: 0 0 4px 4px; - padding: 20px 10px; - padding-bottom: 10px; - overflow: hidden; - display: flex; - flex-wrap: wrap; - - @media screen and (max-width: 700px) { - border-radius: 0; - box-shadow: none; - } - - .account-grid-card { - box-sizing: border-box; - width: 335px; - border: 1px solid $color2; - border-radius: 4px; - color: $color1; - margin-bottom: 10px; - - &:nth-child(odd) { - margin-right: 10px; - } - - .account-grid-card__header { - overflow: hidden; - padding: 10px; - border-bottom: 1px solid $color2; - } - - .avatar { - width: 60px; - height: 60px; - float: left; - margin-right: 15px; - - img { - display: block; - width: 60px; - height: 60px; - border-radius: 60px; - } - } - - .name { - padding-top: 10px; - - a { - display: block; - color: $color1; - text-decoration: none; - - &:hover { - .display_name { - text-decoration: underline; - } - } - } - } - - .display_name { - font-size: 14px; - display: block; - } - - .username { - color: $color4; - } - - .note { - padding: 10px; - padding-top: 15px; - color: $color3; - word-wrap: break-word; - } - } -} - -.nothing-here { - color: $color3; - font-size: 14px; - font-weight: 500; - text-align: center; - padding: 15px 0; - padding-bottom: 25px; - cursor: default; -} - -.account-card { - padding: 14px 10px; - background: $color5; - border-radius: 4px; - text-align: left; - box-shadow: 0 0 15px rgba($color8, 0.2); - - .detailed-status__display-name { - display: block; - overflow: hidden; - margin-bottom: 15px; - - &:last-child { - margin-bottom: 0; - } - - & > div { - float: left; - margin-right: 10px; - width: 48px; - height: 48px; - } - - .avatar { - display: block; - border-radius: 4px; - } - - .display-name { - display: block; - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - cursor: default; - - strong { - font-weight: 500; - color: $color1; - } - - span { - font-size: 14px; - color: $color3; - } - } - - &:hover { - .display-name { - strong { - text-decoration: none; - } - } - } - } - - .account__header__content { - font-size: 14px; - color: $color1; - } -} diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss deleted file mode 100644 index 6d246ded2..000000000 --- a/app/assets/stylesheets/admin.scss +++ /dev/null @@ -1,245 +0,0 @@ -.admin-wrapper { - display: flex; - justify-content: center; - height: 100%; - - .sidebar-wrapper { - flex: 1; - height: 100%; - background: $color1; - display: flex; - justify-content: flex-end; - } - - .sidebar { - width: 240px; - height: 100%; - padding: 0; - overflow-y: auto; - - .logo { - display: block; - margin: 40px auto; - width: 100px; - height: 100px; - } - - ul { - list-style: none; - border-radius: 4px 0 0 4px; - overflow: hidden; - margin-bottom: 20px; - - a { - display: block; - padding: 15px 25px; - color: rgba($color5, 0.7); - text-decoration: none; - transition: all 200ms linear; - border-radius: 4px 0 0 4px; - - i.fa { - margin-right: 5px; - } - - &:hover { - color: $color5; - background-color: darken($color1, 5%); - transition: all 100ms linear; - } - - &.selected { - background: darken($color1, 2%); - border-radius: 4px 0 0 0; - } - } - - ul { - background: darken($color1, 4%); - border-radius: 0 0 0 4px; - margin: 0; - - a { - border: 0; - - &.selected { - color: $color5; - background-color: $color4; - border-bottom: 0; - border-radius: 0; - - &:hover { - background-color: lighten($color4, 5%); - } - } - } - } - } - } - - .content-wrapper { - flex: 2; - overflow: auto; - } - - .content { - max-width: 700px; - padding: 20px 15px; - padding-top: 60px; - padding-left: 25px; - - h2 { - color: $color2; - font-size: 24px; - line-height: 28px; - font-weight: 400; - margin-bottom: 40px; - } - - & > p { - font-size: 14px; - line-height: 18px; - color: $color2; - margin-bottom: 20px; - - strong { - color: $color5; - font-weight: 500; - } - } - - hr { - margin: 20px 0; - border: 0; - background: transparent; - border-bottom: 1px solid $color1; - } - } - - .simple_form { - max-width: 400px; - .label_input { - label.select { - width: 50%; - } - select { - width: 50%; - float: right; - } - } - } - - @media screen and (max-width: 600px) { - display: block; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - - .sidebar-wrapper, .content-wrapper { - flex: 0 0 auto; - height: auto; - overflow: initial; - } - - .sidebar { - width: 100%; - padding: 10px 0; - height: auto; - - .logo { - margin: 20px auto; - } - } - - .content { - padding-top: 20px; - } - } -} - -.filters { - display: flex; - margin-bottom: 20px; - - .filter-subset { - flex: 0 0 auto; - margin-right: 40px; - - ul { - margin-top: 5px; - list-style: none; - - li { - display: inline-block; - margin-right: 5px; - } - } - - strong { - font-weight: 500; - text-transform: uppercase; - font-size: 12px; - } - - a { - display: inline-block; - color: rgba($color5, 0.7); - text-decoration: none; - text-transform: uppercase; - font-size: 12px; - font-weight: 500; - border-bottom: 2px solid $color1; - - &:hover { - color: $color5; - border-bottom: 2px solid lighten($color1, 5%); - } - - &.selected { - color: $color4; - border-bottom: 2px solid $color4; - } - } - } -} - -.report-accounts { - display: flex; - margin-bottom: 20px; -} - -.report-accounts__item { - flex: 1 1 0; - display: flex; - flex-direction: column; - - & > strong { - display: block; - margin-bottom: 10px; - font-weight: 500; - font-size: 14px; - line-height: 18px; - color: $color2; - } - - &:first-child { - margin-right: 10px; - } - - .account-card { - flex: 1 1 auto; - } -} - -.report-status { - display: flex; - margin-bottom: 10px; - - .activity-stream { - flex: 2 0 0; - margin-right: 20px; - } -} - -.report-status__actions { - flex: 0 0 auto; -} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss deleted file mode 100644 index fb1767954..000000000 --- a/app/assets/stylesheets/application.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import 'variables'; -@import 'fonts/roboto'; -@import 'fonts/roboto-mono'; -@import 'fonts/montserrat'; -@import 'font-awesome'; - -@import 'reset'; -@import 'basics'; -@import 'containers'; -@import 'lists'; -@import 'footer'; -@import 'compact_header'; -@import 'landing_strip'; -@import 'forms'; -@import 'accounts'; -@import 'stream_entries'; -@import 'components'; -@import 'about'; -@import 'tables'; -@import 'admin'; -@import 'rtl'; diff --git a/app/assets/stylesheets/basics.scss b/app/assets/stylesheets/basics.scss deleted file mode 100644 index e2485e695..000000000 --- a/app/assets/stylesheets/basics.scss +++ /dev/null @@ -1,58 +0,0 @@ -body { - font-family: 'Roboto', sans-serif; - background: $color1 image-url('background-photo.jpg'); - background-size: cover; - background-attachment: fixed; - font-size: 13px; - line-height: 18px; - font-weight: 400; - color: $color5; - padding-bottom: 140px; - text-rendering: optimizelegibility; - font-feature-settings: "kern"; - text-size-adjust: none; - - &.app-body { - position: fixed; - width: 100%; - height: 100%; - padding: 0; - background: $color1; - } - - &.embed { - background: transparent; - margin: 0; - - .container { - position: absolute; - width: 100%; - height: 100%; - overflow: hidden; - } - } - - &.admin { - background: darken($color1, 4%); - position: fixed; - width: 100%; - height: 100%; - padding: 0; - } - - @media screen and (max-width: 360px) { - padding-bottom: 0; - } -} - -button:focus { - outline: none; -} - -.app-holder { - display: flex; - width: 100%; - height: 100%; - align-items: center; - justify-content: center; -} diff --git a/app/assets/stylesheets/boost.scss b/app/assets/stylesheets/boost.scss deleted file mode 100644 index 90511c88c..000000000 --- a/app/assets/stylesheets/boost.scss +++ /dev/null @@ -1,11 +0,0 @@ -@function url-friendly-colour($colour) { - @return '%23' + str-slice('#{$colour}', 2, -1) -} - -button.icon-button 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='#{url-friendly-colour(lighten($color1, 26%))}' 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='#{url-friendly-colour($color4)}' stroke-width='0'/></svg>"); - - &: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='#{url-friendly-colour(lighten($color1, 33%))}' 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='#{url-friendly-colour($color4)}' stroke-width='0'/></svg>"); - } -} diff --git a/app/assets/stylesheets/compact_header.scss b/app/assets/stylesheets/compact_header.scss deleted file mode 100644 index 8fef05f0f..000000000 --- a/app/assets/stylesheets/compact_header.scss +++ /dev/null @@ -1,28 +0,0 @@ -.compact-header { - h1 { - font-size: 24px; - line-height: 28px; - color: $color3; - overflow: hidden; - font-weight: 500; - margin-bottom: 20px; - - a { - color: inherit; - text-decoration: none; - } - - small { - font-weight: 400; - color: $color2; - } - - img { - display: inline-block; - margin-bottom: -5px; - margin-right: 15px; - width: 36px; - height: 36px; - } - } -} diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss deleted file mode 100644 index fdff6eb9f..000000000 --- a/app/assets/stylesheets/components.scss +++ /dev/null @@ -1,3180 +0,0 @@ -@import 'variables'; - -.app-body { - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; -} - -.button { - background-color: darken($color4, 3%); - border: 10px none; - border-radius: 4px; - box-sizing: border-box; - color: $color5; - cursor: pointer; - display: inline-block; - font-family: inherit; - font-size: 14px; - font-weight: 500; - height: 36px; - letter-spacing: 0; - line-height: 36px; - overflow: hidden; - padding: 0 16px; - position: relative; - text-align: center; - text-transform: uppercase; - text-decoration: none; - text-overflow: ellipsis; - transition: all 100ms ease-in; - white-space: nowrap; - - &:active, - &:focus, - &:hover { - background-color: lighten($color4, 7%); - transition: all 200ms ease-out; - } - - &:disabled { - background-color: $color3; - cursor: default; - } - - &.button-secondary { - // - } -} - -.column-collapsable { - position: relative; -} - -.column-icon { - background: lighten($color1, 4%); - color: $color3; - cursor: pointer; - font-size: 16px; - padding: 15px; - position: absolute; - right: 0; - top: -48px; - z-index: 3; - - &:hover { - color: lighten($color3, 7%); - } -} - -.column-icon-clear { - font-size: 16px; - padding: 15px; - position: absolute; - right: 48px; - top: 0; - cursor: pointer; - z-index: 2; -} - -@media screen and (min-width: 1025px) { - .column-icon-clear { - top: 10px; - } -} - -.icon-button { - display: inline-block; - padding: 0; - color: lighten($color1, 26%); - border: none; - background: transparent; - cursor: pointer; - transition: color 100ms ease-in; - - &:hover, &:active, &:focus { - color: lighten($color1, 33%); - transition: color 200ms ease-out; - } - - &.disabled { - color: lighten($color1, 13%); - cursor: default; - } - - &.active { - color: $color4; - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, &:focus, &:active { - outline: 0 !important; - } - - &.inverted { - color: lighten($color1, 33%); - - &:hover, &:active, &:focus { - color: lighten($color1, 26%); - } - - &.active { - color: $color4; - } - - &.disabled { - color: $color3; - } - } - - &.overlayed { - box-sizing: content-box; - background: rgba($color8, 0.6); - color: rgba($color5, 0.7); - border-radius: 4px; - padding: 2px; - - &:hover { - background: rgba($color8, 0.9); - } - } -} - -.text-icon-button { - color: lighten($color1, 33%); - border: none; - background: transparent; - cursor: pointer; - font-weight: 600; - font-size: 11px; - padding: 0 3px; - line-height: 27px; - outline: 0; - transition: color 100ms ease-in; - - &:hover, &:active, &:focus { - color: lighten($color1, 26%); - transition: color 200ms ease-out; - } - - &.disabled { - color: lighten($color1, 13%); - cursor: default; - } - - &.active { - color: $color4; - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, &:focus, &:active { - outline: 0 !important; - } -} - -.dropdown--active .icon-button { - color: $color4; -} - -.dropdown--active:after { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 0 4.5px 7.8px 4.5px; - border-color: transparent transparent $color2 transparent; - bottom: 8px; - right: 104px; -} - -.invisible { - font-size: 0; - line-height: 0; - display: inline-block; - width: 0; -} - -.ellipsis { - &:after { - content: "…"; - } -} - -.lightbox .icon-button { - color: $color1; -} - -.compose-form { - padding: 10px; -} - -.compose-form__warning { - color: darken($color3, 33%); - margin-bottom: 15px; - background: $color3; - box-shadow: 0 2px 6px rgba($color8, 0.3); - padding: 8px 10px; - border-radius: 4px; - font-size: 13px; - font-weight: 400; - - strong { - color: darken($color3, 33%); - font-weight: 500; - } - - a { - color: darken($color3, 33%); - font-weight: 500; - text-decoration: underline; - - &:hover, &:active, &:focus { - text-decoration: none; - } - } -} - -.compose-form__modifiers { - color: $color1; - font-family: inherit; - font-size: 14px; - background: $color5; - border-radius: 0 0 4px 0; -} - -.compose-form__buttons-wrapper { - display: flex; - justify-content: space-between; -} - -.compose-form__buttons { - padding: 10px; - background: darken($color5, 8%); - box-shadow: inset 0 5px 5px rgba($color8, 0.05); - border-radius: 0 0 4px 4px; - display: flex; - - .icon-button { - box-sizing: content-box; - padding: 0 3px; - } -} - -.compose-form__upload-button-icon { - line-height: 27px; -} - -.compose-form__upload-wrapper { - overflow: hidden; -} - -.compose-form__uploads-wrapper { - display: flex; - padding: 5px; -} - -.compose-form__upload { - flex: 1 1 0; - margin: 5px; -} - -.compose-form__upload-thumbnail { - border-radius: 4px; - background-position: center; - background-size: cover; - background-repeat: no-repeat; - height: 100px; - width: 100%; -} - -.compose-form__upload-cancel { - background-size: cover; - border-radius: 4px; - height: 100px; - width: 100px; -} - -.compose-form__label { - display: block; - line-height: 24px; - vertical-align: middle; - - &.with-border { - border-top: 1px solid $color1; - padding-top: 10px; - } - - .compose-form__label__text { - display: inline-block; - vertical-align: middle; - margin-bottom: 14px; - margin-left: 8px; - color: $color3; - } -} - -.compose-form__textarea, .follow-form__input { - background: $color5; - - &:disabled { - background: $color2; - } -} - -.compose-form__autosuggest-wrapper { - position: relative; - - .dropdown--active:after { - border-color: transparent transparent $color5 transparent; - bottom: -1px; - right: 8px; - } -} - -.compose-form__publish { - display: flex; - min-width: 0; -} - -.compose-form__publish-button-wrapper { - overflow: hidden; - padding-top: 10px; -} - -.emojione { - display: inline-block; - font-size: inherit; - vertical-align: middle; - margin: -.2ex .15em .2ex; - width: 16px; - height: 16px; - - img { - width: auto; - } -} - -.reply-indicator { - border-radius: 4px 4px 0 0; - position: relative; - bottom: -2px; - background: $color3; - padding: 10px; -} - -.reply-indicator__header { - margin-bottom: 5px; - overflow: hidden; -} - -.reply-indicator__cancel { - float: right; - line-height: 24px; -} - -.reply-indicator__display-name { - color: $color1; - display: block; - max-width: 100%; - line-height: 24px; - overflow: hidden; - padding-right: 25px; - text-decoration: none; -} - -.reply-indicator__display-avatar { - float: left; - margin-right: 5px; -} - -.status__content { - cursor: pointer; -} - -.status__content--no-action { - cursor: default; -} - -.status__content, -.reply-indicator__content { - font-size: 15px; - line-height: 20px; - word-wrap: break-word; - font-weight: 400; - overflow: hidden; - white-space: pre-wrap; - - .emojione { - width: 18px; - height: 18px; - } - - p { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: $color2; - text-decoration: none; - - &:hover { - text-decoration: underline; - - .fa { - color: lighten($color1, 40%); - } - } - - &.mention { - &:hover { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - - .fa { - color: lighten($color1, 30%); - } - } - - .status__content__spoiler-link { - background: lighten($color1, 30%); - - &:hover { - background: lighten($color1, 33%); - text-decoration: none; - } - } -} - -a.status__content__spoiler-link { - display: inline-block; - border-radius: 2px; - color: lighten($color1, 8%); - font-weight: 500; - font-size: 11px; - padding: 0px 6px; - text-transform: uppercase; - line-height: inherit; -} - -.status__prepend-icon-wrapper { - left: -26px; - position: absolute; -} - -.status { - padding: 8px 10px; - padding-left: 68px; - position: relative; - min-height: 48px; - border-bottom: 1px solid lighten($color1, 8%); - cursor: default; - - &.light { - .status__relative-time { - color: $color3; - } - - .status__display-name { - color: $color1; - } - - .display-name { - strong { - color: $color1; - } - - span { - color: $color3; - } - } - - .status__content { - color: $color1; - - a { - color: $color4; - } - - a.status__content__spoiler-link { - color: $color5; - background: $color3; - - &:hover { - background: lighten($color3, 8%); - } - } - } - } -} - -.status__relative-time { - color: lighten($color1, 26%); -} - -.status__display-name { - color: lighten($color1, 26%); -} - -.status__info .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; -} - -.status__info { - font-size: 15px; -} - -.status__info-time { - float: right; - font-size: 14px; -} - -.status-check-box { - border-bottom: 1px solid lighten($color1, 8%); - display: flex; - - .status__content { - background: lighten($color1, 4%); - flex: 1 1 auto; - padding: 10px; - } -} - -.status-check-box-toggle { - align-items: center; - display: flex; - flex: 0 0 auto; - justify-content: center; - padding: 10px; -} - -.status__prepend { - margin-left: 68px; - color: lighten($color1, 26%); - padding: 8px 0; - padding-bottom: 2px; - font-size: 14px; - position: relative; - - .status__display-name strong { - color: lighten($color1, 26%); - } -} - -.status__action-bar { - align-items: center; - display: flex; - margin-top: 10px; -} - -.status__action-bar-button-wrapper { - float: left; - margin-right: 18px; -} - -.status__action-bar-dropdown { - float: left; - height: 18px; - width: 18px; -} - -.detailed-status { - background: lighten($color1, 4%); - padding: 14px 10px; - - .status__content { - font-size: 19px; - line-height: 24px; - - .emojione { - width: 22px; - height: 22px; - } - } -} - -.detailed-status__meta { - margin-top: 15px; - color: lighten($color1, 26%); - font-size: 14px; - line-height: 18px; -} - -.detailed-status__action-bar { - background: lighten($color1, 4%); - border-top: 1px solid lighten($color1, 8%); - border-bottom: 1px solid lighten($color1, 8%); - display: flex; - flex-direction: row; - padding: 10px 0; -} - -.detailed-status__link { - color: inherit; - text-decoration: none; -} - -.detailed-status__favorites, -.detailed-status__reblogs { - display: inline-block; - font-weight: 500; - font-size: 12px; - margin-left: 6px; -} - -.reply-indicator__content { - color: $color1; - font-size: 14px; - - a { - color: lighten($color1, 20%); - } -} - -.account { - padding: 10px; - border-bottom: 1px solid lighten($color1, 8%); - - .account__display-name { - flex: 1 1 auto; - display: block; - color: $color3; - overflow: hidden; - text-decoration: none; - font-size: 14px; - } -} - -.account__wrapper { - display: flex; -} - -.account__avatar-wrapper { - float: left; - margin-left: 12px; - margin-right: 12px; -} - -.account__avatar { - border-radius: 4px; - background: transparent no-repeat; - background-position: 50%; - background-clip: padding-box; - position: relative; -} - -.account__relationship { - height: 18px; - padding: 10px; -} - -.account__header { - flex: 0 0 auto; - background: lighten($color1, 4%); - text-align: center; - background-size: cover; - background-position: center; - position: relative; - - & > div { - background: rgba(lighten($color1, 4%), 0.9); - } - - .account__header__content { - color: $color2; - } - - .account__header__display-name { - color: $color5; - } - - .account__header__username { - color: $color4; - } -} - -.account__header__content { - color: $color3; - font-size: 14px; - font-weight: 400; - overflow: hidden; - word-break: normal; - word-wrap: break-word; - - p { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: inherit; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } -} - -.account__header__display-name { - .emojione { - width: 25px; - height: 25px; - } -} - -.account__action-bar { - border-top: 1px solid lighten($color1, 8%); - border-bottom: 1px solid lighten($color1, 8%); - line-height: 36px; - overflow: hidden; - flex: 0 0 auto; - display: flex; -} - -.account__action-bar-dropdown { - flex: 1 1 auto; - padding: 10px; - - .dropdown--active { - .dropdown__content.dropdown__right { - left: 6px; - right: initial; - } - - &:after { - bottom: initial; - margin-left: 11px; - margin-top: -7px; - right: initial; - } - } -} - -.account__action-bar-links { - display: flex; - flex: 1 1 auto; - line-height: 18px; -} - -.account__action-bar__tab { - text-decoration: none; - overflow: hidden; - width: 80px; - border-left: 1px solid lighten($color1, 8%); - padding: 10px 5px; - - & > span { - display: block; - text-transform: uppercase; - font-size: 11px; - color: $color3; - } - - strong { - display: block; - font-size: 15px; - font-weight: 500; - color: $color5; - } - - abbr { - color: lighten($color1, 26%); - } -} - -.account__header__avatar { - background-size: 90px 90px; - display: block; - height: 90px; - margin: 0 auto 10px; - overflow: hidden; - width: 90px; -} - -.account-authorize { - padding: 14px 10px; - - .detailed-status__display-name { - display: block; - margin-bottom: 15px; - overflow: hidden; - } -} - -.account-authorize__avatar { - float: left; - margin-right: 10px; -} - -.status__display-name, -.status__relative-time, -.detailed-status__display-name, -.detailed-status__datetime, -.detailed-status__application, -.account__display-name { - text-decoration: none; -} - -.status__display-name, -.account__display-name { - strong { - color: $color5; - } - - &.muted { - .emojione { - opacity: 0.5; - } - } -} - -.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; -} - -.detailed-status__application, -.detailed-status__datetime { - color: inherit; -} - -.detailed-status__display-name { - color: $color2; - display: block; - line-height: 24px; - margin-bottom: 15px; - overflow: hidden; - - strong, - span { - display: block; - } - - strong { - font-size: 16px; - color: $color5; - } -} - -.detailed-status__display-avatar { - float: left; - margin-right: 10px; -} - -.status__avatar { - height: 48px; - left: 10px; - position: absolute; - top: 10px; - width: 48px; -} - -.muted { - .status__content p, - .status__content a { - color: lighten($color1, 26%); - } - - .status__display-name strong { - color: lighten($color1, 26%); - } - - .status__avatar { - opacity: 0.5; - } - - a.status__content__spoiler-link { - background: lighten($color1, 26%); - color: lighten($color1, 4%); - - &:hover { - background: lighten($color1, 29%); - text-decoration: none; - } - } -} - -.notification__message { - margin-left: 68px; - padding: 8px 0; - padding-bottom: 0; - cursor: default; - color: $color3; - font-size: 15px; - position: relative; - - .fa { - color: $color4; - } -} - -.notification__favourite-icon-wrapper { - left: -26px; - position: absolute; - - .star-icon { - color: #ca8f04; - } -} - -.star-icon.active { - color: #ca8f04; -} - -.notification__display-name { - color: inherit; - font-weight: 500; - text-decoration: none; - - &:hover { - color: $color5; - text-decoration: underline; - } -} - -.display-name { - display: block; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.display-name__html { - font-weight: 500; -} - -.display-name__account { - font-size: 14px; -} - -.status__relative-time, -.detailed-status__datetime { - &:hover { - text-decoration: underline; - } -} - -.transparent-background, .imageloader { - background: image-url('void.png'); -} - -.imageloader { - display: block; -} - -.navigation-bar { - padding: 10px; - display: flex; - flex-shrink: 0; - cursor: default; - color: $color3; - - strong { - color: $color5; - } - - .permalink { - text-decoration: none; - } -} - -.navigation-bar__profile { - flex: 1 1 auto; - margin-left: 8px; -} - -.navigation-bar__profile-account { - display: block; - font-weight: 500; -} - -.navigation-bar__profile-edit { - color: inherit; - text-decoration: none; -} - -.dropdown { - display: inline-block; -} - -.dropdown__content { - display: none; - position: absolute; -} - -.dropdown__sep { - border-bottom: 1px solid darken($color2, 8%); - margin: 5px 7px 6px; - padding-top: 1px; -} - -.dropdown--active .dropdown__content { - display: block; - line-height: 18px; - max-width: 311px; - right: 0; - text-align: left; - z-index: 9999; - - & > ul { - list-style: none; - background: $color2; - padding: 4px 0; - border-radius: 4px; - box-shadow: 0 0 15px rgba($color8, 0.4); - min-width: 140px; - position: relative; - } - - &.dropdown__right { - right: 0; - } - - &.dropdown__left { - & > ul { - left: -98px; - } - } - - & > ul > li > a { - font-size: 13px; - line-height: 18px; - display: block; - padding: 4px 14px; - box-sizing: border-box; - text-decoration: none; - background: $color2; - color: $color1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:focus { - outline: 0; - } - - &:hover { - background: $color4; - color: $color2; - } - } -} - -.dropdown__icon { - vertical-align: middle; -} - -.static-content { - padding: 10px; - padding-top: 20px; - color: lighten($color1, 26%); - - h1 { - font-size: 16px; - font-weight: 500; - margin-bottom: 40px; - text-align: center; - } - - p { - font-size: 13px; - margin-bottom: 20px; - } -} - -.columns-area { - display: flex; - flex: 1 1 auto; - flex-direction: row; - justify-content: flex-start; - overflow-x: auto; - position: relative; -} - -@media screen and (min-width: 360px) { - .columns-area { - padding: 10px; - } -} - -.column { - width: 330px; - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - - > .scrollable { - background: $color1; - } -} - -.ui { - flex: 0 0 auto; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - background: darken($color1, 7%); -} - -.drawer { - width: 300px; - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow-y: hidden; -} - -.drawer__tab { - display: block; - flex: 1 1 auto; - padding: 15px; - padding-bottom: 13px; - color: $color3; - text-decoration: none; - text-align: center; - font-size: 16px; - border-bottom: 2px solid transparent; -} - -.column, .drawer { - flex: 1 1 100%; - overflow: hidden; -} - -@media screen and (min-width: 360px) { - .tabs-bar { - margin: 10px; - margin-bottom: 0; - } - - .search { - margin-bottom: 10px; - } -} - -@media screen and (max-width: 1024px) { - .column, .drawer { - width: 100%; - padding: 0; - } - - .columns-area { - flex-direction: column; - } - - .search__input, .autosuggest-textarea__textarea { - font-size: 16px; - } -} - -@media screen and (min-width: 1025px) { - .columns-area { - padding: 0; - } - - .column, .drawer { - flex: 0 0 auto; - padding: 10px; - padding-left: 5px; - padding-right: 5px; - - &:first-child { - padding-left: 10px; - } - - &:last-child { - padding-right: 10px; - } - } - - .columns-area > div { - .column, .drawer { - padding-left: 5px; - padding-right: 5px; - } - } -} - -@media screen and (min-width: 1397px) { /* Width of 4 columns with margins */ - .columns-area { - margin-left: auto; - margin-right: auto; - } -} - -@media screen and (min-width: 1900px) { - .column, .drawer { - width: 400px; - border-radius: 4px; - height: 96vh; - margin-top: 2vh; - } -} - -.drawer__pager { - box-sizing: border-box; - padding: 0; - flex-grow: 1; - position: relative; - overflow: hidden; - display: flex; -} - -.drawer__inner { - position: absolute; - top: 0; - left: 0; - background: lighten($color1, 13%); - box-sizing: border-box; - padding: 0; - display: flex; - flex-direction: column; - overflow: hidden; - overflow-y: auto; - width: 100%; - height: 100%; - - &.darker { - background: $color1; - } -} - -.pseudo-drawer { - background: lighten($color1, 13%); - font-size: 13px; - text-align: left; -} - -.drawer__header { - flex: 0 0 auto; - font-size: 16px; - background: lighten($color1, 8%); - margin-bottom: 10px; - display: flex; - flex-direction: row; - - a { - transition: background 100ms ease-in; - - &:hover { - background: lighten($color1, 3%); - transition: background 200ms ease-out; - } - } -} - -.tabs-bar { - display: flex; - background: lighten($color1, 8%); - flex: 0 0 auto; - overflow-y: auto; -} - -.tabs-bar__link { - display: block; - flex: 1 1 auto; - padding: 15px 10px; - color: $color5; - text-decoration: none; - text-align: center; - font-size: 14px; - font-weight: 500; - border-bottom: 2px solid lighten($color1, 8%); - transition: all 200ms linear; - - .fa { - font-weight: 400; - font-size: 16px; - } - - &.active { - border-bottom: 2px solid $color4; - color: $color4; - } - - &:hover, &:focus, &:active { - background: lighten($color1, 14%); - transition: all 100ms linear; - } - - span { - margin-left: 5px; - display: none; - } -} - -@media screen and (min-width: 600px) { - .tabs-bar__link { - span { - display: inline; - } - } -} - -@media screen and (min-width: 1025px) { - .tabs-bar { - display: none; - } -} - -.react-autosuggest__container { - position: relative; -} - -.react-autosuggest__suggestions-container { - position: absolute; - top: 100%; - width: 100%; - z-index: 99; - box-shadow: 0 0 15px rgba($color8, 0.4); -} - -.react-autosuggest__section-title { - background: $color3; - padding: 4px 10px; - font-weight: 500; - cursor: default; - color: $color1; - text-transform: uppercase; - font-size: 11px; -} - -.react-autosuggest__suggestions-list { - background: $color2; - color: $color1; - font-size: 14px; -} - -.react-autosuggest__suggestion { - padding: 10px; - cursor: pointer; -} - -.react-autosuggest__suggestion--focused { - background: $color4; - color: $color5; -} - -.scrollable { - overflow-y: scroll; - overflow-x: hidden; - flex: 1 1 auto; - backface-visibility: hidden; - -webkit-overflow-scrolling: touch; - - &.optionally-scrollable { - overflow-y: auto; - } -} - -.column-back-button { - background: lighten($color1, 4%); - color: $color4; - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - padding: 15px; - z-index: 3; - - &:hover { - text-decoration: underline; - } -} - -.column-back-button__icon { - display: inline-block; - margin-right: 5px; -} - -.column-back-button--slim { - position: relative; -} - -.column-back-button--slim-button { - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - padding: 15px; - position: absolute; - right: 0; - top: -48px; -} - -.react-toggle { - display: inline-block; - position: relative; - cursor: pointer; - background-color: transparent; - border: 0; - padding: 0; - user-select: none; - -webkit-tap-highlight-color: rgba($color8, 0); - -webkit-tap-highlight-color: transparent; -} - -.react-toggle-screenreader-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.react-toggle--disabled { - cursor: not-allowed; - opacity: 0.5; - transition: opacity 0.25s; -} - -.react-toggle-track { - width: 50px; - height: 24px; - padding: 0; - border-radius: 30px; - background-color: $color1; - transition: all 0.2s ease; -} - -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: darken($color1, 10%); -} - -.react-toggle--checked .react-toggle-track { - background-color: $color4; -} - -.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: lighten($color4, 10%); -} - -.react-toggle-track-check { - position: absolute; - width: 14px; - height: 10px; - top: 0px; - bottom: 0px; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - left: 8px; - opacity: 0; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-check { - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle-track-x { - position: absolute; - width: 10px; - height: 10px; - top: 0px; - bottom: 0px; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - right: 10px; - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-x { - opacity: 0; -} - -.react-toggle-thumb { - transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; - position: absolute; - top: 1px; - left: 1px; - width: 22px; - height: 22px; - border: 1px solid $color1; - border-radius: 50%; - background-color: darken($color5, 2%); - box-sizing: border-box; - transition: all 0.25s ease; -} - -.react-toggle--checked .react-toggle-thumb { - left: 27px; - border-color: $color4; -} - -.column-link { - background: lighten($color1, 8%); - color: $color5; - display: block; - font-size: 16px; - padding: 15px; - text-decoration: none; - - &:hover { - background: lighten($color1, 11%); - } - - &.hidden-on-mobile { - @media screen and (max-width: 1024px) { - display: none; - } - } -} - -.column-link__icon { - display: inline-block; - margin-right: 5px; -} - -.column-subheading { - background: $color1; - color: lighten($color1, 26%); - padding: 8px 20px; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - cursor: default; -} - -.autosuggest-textarea, -.spoiler-input { - position: relative; -} - -.autosuggest-textarea__textarea, -.spoiler-input__input { - display: block; - box-sizing: border-box; - width: 100%; - margin: 0; - color: $color1; - padding: 10px; - font-family: inherit; - font-size: 14px; - resize: vertical; - border: 0; - outline: 0; - - &:focus { - outline: 0; - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } -} - -.spoiler-input__input { - border-radius: 4px; -} - -.autosuggest-textarea__textarea { - min-height: 100px; - background: $color5; - border-radius: 4px 4px 0 0; - padding-bottom: 0; - padding-right: 10px + 22px; - resize: none; - - @media screen and (max-width: 600px) { - height: 100px !important; // prevent auto-resize textarea - resize: vertical; - } -} - -.autosuggest-textarea__suggestions { - position: absolute; - top: 100%; - width: 100%; - z-index: 99; - box-shadow: 0 0 15px rgba($color8, 0.4); - background: $color2; - color: $color1; - font-size: 14px; -} - -.autosuggest-textarea__suggestions__item { - padding: 10px; - cursor: pointer; - - &:hover { - background: darken($color2, 10%); - } - - &.selected { - background: $color4; - color: $color5; - } -} - -.autosuggest-account { - overflow: hidden; -} - -.autosuggest-account-icon { - float: left; - margin-right: 5px; -} - -.autosuggest-status { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - strong { - font-weight: 500; - } -} - -.character-counter__wrapper { - line-height: 36px; - margin-right: 16px; - padding-top: 10px; -} - -.character-counter { - cursor: default; - font-size: 16px; -} - -.character-counter--over { - color: #ff5050; -} - -.getting-started__wrapper { - position: relative; -} - -.getting-started { - box-sizing: border-box; - padding-bottom: 235px; - background: image-url('mastodon-getting-started.png') no-repeat 0 100%/contain local; - flex: 1 0 auto; - - p { - color: $color2; - } - - a { - color: lighten($color1, 26%); - } -} - -.setting-text { - color: $color3; - background: transparent; - border: none; - border-bottom: 2px solid $color3; - box-sizing: border-box; - display: block; - font-family: inherit; - margin-bottom: 10px; - padding: 7px 0px; - width: 100%; - - &:focus, &:active { - color: $color5; - border-bottom-color: $color4; - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } -} - -@import 'boost'; - -button.icon-button i.fa-retweet { - background-position: 0 0; - height: 19px; - transition: background-position 0.9s steps(10); - transition-duration: 0s; - vertical-align: middle; - width: 22px; - - &::before { - display: none !important; - } -} - -button.icon-button.active i.fa-retweet { - transition-duration: 0.9s; - background-position: 0 100%; -} - -.status-card { - display: flex; - cursor: pointer; - font-size: 14px; - border: 1px solid lighten($color1, 8%); - border-radius: 4px; - color: lighten($color1, 26%); - margin-top: 14px; - text-decoration: none; - overflow: hidden; - - &:hover { - background: lighten($color1, 8%); - } -} - -.status-card-video, .status-card-rich, .status-card-photo { - margin-top: 14px; - overflow: hidden; - - iframe { - width: 100%; - height: auto; - } -} - -.status-card-photo { - display: block; - text-decoration: none; - - img { - display: block; - width: 100%; - height: auto; - margin: 0; - } -} - -.status-card__title { - display: block; - font-weight: 500; - margin-bottom: 5px; - color: $color3; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.status-card__content { - flex: 1 1 auto; - overflow: hidden; - padding: 14px 14px 14px 8px; -} - -.status-card__description { - color: $color3; -} - -.status-card__image { - flex: 0 0 100px; - background: lighten($color1, 8%); -} - -.status-card__image-image { - border-radius: 4px 0px 0px 4px; - display: block; - height: auto; - margin: 0; - width: 100%; -} - -.load-more { - display: block; - color: lighten($color1, 26%); - text-align: center; - padding: 15px; - text-decoration: none; - - &:hover { - background: lighten($color1, 2%); - } -} - -.missing-indicator { - text-align: center; - font-size: 16px; - font-weight: 500; - color: lighten($color1, 16%); - padding-top: 210px; - background: image-url('mastodon-not-found.png') no-repeat center -50px; - cursor: default; -} - -.column-header { - padding: 15px; - font-size: 16px; - background: lighten($color1, 4%); - flex: 0 0 auto; - cursor: pointer; - position: relative; - z-index: 2; - outline: 0; - - &.active { - box-shadow: 0 1px 0 rgba($color4, 0.3); - } - - &.active .fa { - color: $color4; - text-shadow: 0 0 10px rgba($color4, 0.4); - } - - &.hidden-on-mobile { - @media screen and (max-width: 1024px) { - display: none; - } - } - - &:focus, &:active { - outline: 0; - } -} - -.column-header__icon { - display: inline-block; - margin-right: 5px; -} - -.loading-indicator { - color: $color2; - font-size: 16px; - font-weight: 500; - padding-top: 120px; - text-align: center; -} - -.collapsable-collapsed { - color: $color3; - background: lighten($color1, 4%); -} - -.collapsable { - color: $color5; - background: lighten($color1, 8%); - - &:hover { - color: $color5; - background: lighten($color1, 8%); - } -} - -.video-error-cover { - align-items: center; - background: $color8; - color: $color5; - cursor: pointer; - display: flex; - flex-direction: column; - height: 100%; - justify-content: center; - margin-top: 8px; - position: relative; - text-align: center; - z-index: 100; -} - -.media-spoiler { - align-items: center; - background: $color8; - color: $color5; - cursor: pointer; - display: flex; - flex-direction: column; - height: 100%; - justify-content: center; - position: relative; - text-align: center; - z-index: 100; -} - -.media-spoiler__warning { - display: block; - font-size: 14px; -} - -.media-spoiler__trigger { - display: block; - font-size: 11px; - font-weight: 500; -} - -.spoiler-button { - left: 4px; - position: absolute; - text-shadow: 0px 1px 1px #000, 1px 0px 1px #000; - top: 4px; - z-index: 100; -} - -.modal-container--preloader { - background: lighten($color1, 8%); -} - -.account--panel { - background: lighten($color1, 4%); - border-top: 1px solid lighten($color1, 8%); - border-bottom: 1px solid lighten($color1, 8%); - display: flex; - flex-direction: row; - padding: 10px 0px; -} - -.account--panel__button, -.detailed-status__button { - flex: 1 1 auto; - text-align: center; -} - -.column-settings__outer { - background: lighten($color1, 8%); - padding: 15px; -} - -.column-settings__section { - color: $color3; - cursor: default; - display: block; - font-weight: 500; - margin-bottom: 10px; -} - -.modal-container__nav { - align-items: center; - background: rgba(0, 0, 0, 0.5); - box-sizing: border-box; - color: $color5; - cursor: pointer; - display: flex; - font-size: 24px; - height: 100%; - padding: 30px 15px; - position: absolute; - top: 0; -} - -.modal-container__nav--left { - left: -61px; -} - -.modal-container__nav--right { - right: -61px; -} - -.account--follows-info { - color: $color5; -} - -.setting-toggle__label { - display: block; - line-height: 24px; - vertical-align: middle; -} - -.setting-toggle { - color: $color3; - display: inline-block; - margin-bottom: 14px; - margin-left: 8px; - vertical-align: middle; -} - -.report.scrollable { - box-sizing: border-box; - display: flex; - flex-direction: column; - max-height: 100%; -} - -.report__target { - border-bottom: 1px solid lighten($color1, 4%); - color: $color2; - flex: 0 0 auto; - padding: 10px; - - strong { - display: block; - color: $color5; - font-weight: 500; - } -} - -.report__statuses { - flex: 1 1 auto; -} - -.report__textarea-wrapper { - flex: 0 0 100px; - padding: 10px; -} - -.report__textarea { - background: transparent; - box-sizing: border-box; - border: 0; - border-bottom: 2px solid $color3; - border-radius: 2px 2px 0 0; - color: $color5; - display: block; - font-family: inherit; - font-size: 14px; - margin-bottom: 10px; - outline: 0; - padding: 7px 4px; - resize: vertical; - width: 100%; - - &:active, &:focus { - border-bottom-color: $color4; - background: rgba($color8, 0.1); - } -} - -.report__submit { - margin-top: 10px; - overflow: hidden; -} - -.report__submit-button { - float: right; -} - -.empty-column-indicator { - color: lighten($color1, 20%); - background: $color1; - text-align: center; - padding: 20px; - font-size: 15px; - font-weight: 400; - cursor: default; - display: flex; - flex: 1 1 auto; - align-items: center; - - a { - color: $color4; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.status-list__unread-indicator, .notifications__unread-indicator { - position: absolute; - top: 35px; - left: 0; - right: 0; - margin: 0 auto; - width: 60%; - pointer-events: none; - height: 28px; - z-index: 1; - background: radial-gradient(ellipse, rgba($color4, 0.23) 0%, rgba($color4, 0) 60%); -} - -.emoji-dialog { - width: 245px; - height: 270px; - background: $color5; - box-sizing: border-box; - border-radius: 4px; - overflow: hidden; - position: relative; - box-shadow: 0 0 8px rgba($color8, 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: $color4; - - 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; - } - } - - .emoji-category-title { - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - color: darken($color2, 18%); - cursor: default; - } - - .emoji-category-heading-decoration { - text-align: right; - } - - .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 $color5; - top: 2px; - left: 2px; - } - } - } - - .emoji-search-wrapper { - padding: 10px; - border-bottom: 1px solid lighten($color2, 4%); - } - - .emoji-search { - font-size: 14px; - font-weight: 400; - padding: 7px 9px; - font-family: inherit; - display: block; - width: 100%; - background: rgba($color2, 0.3); - color: darken($color2, 18%); - border: 1px solid $color2; - 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($color2, 3%); - - img, svg { - transform: translateZ(0) scale(1.2); - } - } - } - - .emoji { - width: 22px; - height: 22px; - cursor: pointer; - - &:focus { - outline: 0; - } - } -} - -.upload-area { - align-items: center; - background: rgba($color8, 0.8); - display: flex; - height: 100%; - justify-content: center; - left: 0; - opacity: 0; - position: absolute; - top: 0; - visibility: hidden; - width: 100%; - z-index: 2000; - - * { - pointer-events: none; - } -} - -.upload-area__drop { - width: 320px; - height: 160px; - display: flex; - box-sizing: border-box; - position: relative; - padding: 8px; -} - -.upload-area__background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - border-radius: 4px; - background: $color1; - box-shadow: 0 0 5px rgba($color8, 0.2); -} - -.upload-area__content { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - color: $color2; - font-size: 18px; - font-weight: 500; - border: 2px dashed lighten($color1, 26%); - border-radius: 4px; -} - -.upload-progress { - padding: 10px; - color: lighten($color1, 26%); - overflow: hidden; - display: flex; - - .fa { - font-size: 34px; - margin-right: 10px; - } - - span { - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - display: block; - } -} - -.upload-progess__message { - flex: 1 1 auto; -} - -.upload-progress__backdrop { - width: 100%; - height: 6px; - border-radius: 6px; - background: lighten($color1, 26%); - position: relative; - margin-top: 5px; -} - -.upload-progress__tracker { - position: absolute; - left: 0; - top: 0; - height: 6px; - background: $color4; - border-radius: 6px; -} - -.emoji-button { - outline: 0; - - &:active, &:focus { - outline: 0 !important; - } - - img { - filter: grayscale(100%); - opacity: 0.8; - display: block; - margin: 0; - width: 22px; - height: 22px; - margin-top: 2px; - } - - &:hover, &:active, &:focus { - img { - opacity: 1; - filter: none; - } - } -} - -.dropdown--active .emoji-button img { - opacity: 1; - filter: none; -} - -.privacy-dropdown { - position: relative; -} - -.privacy-dropdown__dropdown { - display: none; - position: absolute; - left: 0; - top: 27px; - width: 230px; - background: $color5; - border-radius: 0 4px 4px 4px; - z-index: 2; - overflow: hidden; -} - -.privacy-dropdown__option { - color: $color1; - padding: 10px; - cursor: pointer; - display: flex; - - &:hover, &.active { - background: $color4; - color: $color5; - - .privacy-dropdown__option__content { - color: $color5; - - strong { - color: $color5; - } - } - } - - &.active:hover { - background: lighten($color4, 4%); - } -} - -.privacy-dropdown__option__icon { - display: flex; - align-items: center; - justify-content: center; - margin-right: 10px; -} - -.privacy-dropdown__option__content { - flex: 1 1 auto; - color: darken($color3, 24%); - - strong { - font-weight: 500; - display: block; - color: $color1; - } -} - -.privacy-dropdown.active { - .privacy-dropdown__value { - background: $color5; - border-radius: 4px 4px 0 0; - box-shadow: 0 -4px 4px rgba($color8, 0.1); - } - - .privacy-dropdown__dropdown { - display: block; - box-shadow: 2px 4px 6px rgba($color8, 0.1); - } -} - -.search { - position: relative; -} - -.search__input { - padding-right: 30px; - color: $color2; - outline: 0; - box-sizing: border-box; - display: block; - width: 100%; - border: none; - padding: 10px; - padding-right: 30px; - font-family: inherit; - background: $color1; - color: $color3; - font-size: 14px; - margin: 0; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, &:focus, &:active { - outline: 0 !important; - } - - &:focus { - background: lighten($color1, 4%); - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } -} - -.search__icon { - .fa { - position: absolute; - top: 10px; - right: 10px; - z-index: 2; - display: inline-block; - opacity: 0; - transition: all 100ms linear; - font-size: 18px; - width: 18px; - height: 18px; - color: $color2; - cursor: default; - pointer-events: none; - - &.active { - pointer-events: auto; - opacity: 0.3; - } - } - - .fa-search { - transform: translateZ(0) rotate(90deg); - - &.active { - pointer-events: none; - transform: translateZ(0) rotate(0deg); - } - } - - .fa-times-circle { - top: 11px; - transform: translateZ(0) rotate(0deg); - cursor: pointer; - - &.active { - transform: translateZ(0) rotate(90deg); - } - - &:hover { - color: $color5; - } - } -} - -.search-results__header { - color: lighten($color1, 26%); - background: lighten($color1, 2%); - border-bottom: 1px solid darken($color1, 4%); - padding: 15px 10px; - font-size: 14px; - font-weight: 500; -} - -.search-results__hashtag { - display: block; - padding: 10px; - color: $color2; - text-decoration: none; - - &:hover, &:active, &:focus { - color: lighten($color2, 4%); - text-decoration: underline; - } -} - -.modal-root__overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 9999; - opacity: 0; - background: rgba($color8, 0.7); - transform: translateZ(0px); -} - -.modal-root__container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - align-content: space-around; - z-index: 9999; - opacity: 0; - pointer-events: none; - user-select: none; -} - -.modal-root__modal { - pointer-events: auto; - display: flex; - z-index: 9999; -} - -.media-modal { - max-width: 80vw; - max-height: 80vh; - position: relative; - - img, video { - max-width: 80vw; - max-height: 80vh; - } -} - -.media-modal__close { - position: absolute; - right: 4px; - top: 4px; - z-index: 100; -} - -.onboarding-modal { - background: $color2; - color: $color1; - border-radius: 8px; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.onboarding-modal__pager { - height: 80vh; - width: 80vw; - max-width: 520px; - max-height: 420px; - position: relative; - - & > div { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 25px; - display: none; - flex-direction: column; - align-items: center; - justify-content: center; - display: flex; - opacity: 0; - user-select: text; - } -} - -@media screen and (max-width: 550px) { - .onboarding-modal { - width: 100%; - height: 100%; - border-radius: 0; - } - - .onboarding-modal__pager { - width: 100%; - height: auto; - max-width: none; - max-height: none; - flex: 1 1 auto; - } -} - -.onboarding-modal__paginator { - flex: 0 0 auto; - background: darken($color2, 8%); - display: flex; - padding: 25px; - - & > div { - min-width: 33px; - } - - a { - color: darken($color2, 34%); - text-decoration: none; - font-size: 14px; - font-weight: 500; - - &:hover, &:focus, &:active { - color: darken($color2, 38%); - } - - &.onboarding-modal__done, &.onboarding-modal__next { - color: $color4; - } - } -} - -.onboarding-modal__dots { - flex: 1 1 auto; - display: flex; - align-items: center; - justify-content: center; -} - -.onboarding-modal__dot { - width: 14px; - height: 14px; - border-radius: 14px; - background: darken($color2, 16%); - margin: 0 3px; - cursor: pointer; - - &:hover { - background: darken($color2, 18%); - } - - &.active { - cursor: default; - background: darken($color2, 24%); - } -} - -.onboarding-modal__page { - cursor: default; - line-height: 21px; - - h1 { - font-size: 18px; - font-weight: 500; - color: $color1; - margin-bottom: 20px; - } - - a { - color: $color4; - - &:hover, &:focus, &:active { - color: lighten($color4, 4%); - } - } - - p { - font-size: 16px; - color: lighten($color1, 8%); - margin-top: 10px; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - - strong { - font-weight: 500; - background: $color1; - color: $color2; - border-radius: 4px; - font-size: 14px; - padding: 3px 6px; - } - } -} - -.onboarding-modal__page-one { - display: flex; -} - -.onboarding-modal__page-one__elephant-friend { - background: image-url('elephant-friend.png') no-repeat center center/contain; - width: 147px; - height: 160px; - margin-right: 10px; -} - -.onboarding-modal__page-two, -.onboarding-modal__page-three, -.onboarding-modal__page-four, -.onboarding-modal__page-five { - p { - text-align: left; - } - - .figure { - background: darken($color1, 8%); - color: $color2; - margin-bottom: 20px; - border-radius: 4px; - padding: 10px; - text-align: center; - font-size: 14px; - box-shadow: 1px 2px 6px rgba($color8, 0.3); - - .onboarding-modal__image { - border-radius: 4px; - margin-bottom: 10px; - } - - &.non-interactive { - pointer-events: none; - text-align: left; - } - } -} - -.onboarding-modal__page-four__columns { - .row { - display: flex; - margin-bottom: 20px; - - & > div { - flex: 1 1 0; - margin: 0 10px; - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - - p { - text-align: center; - } - } - - &:last-child { - margin-bottom: 0; - } - } - - .column-header { - color: $color5; - } -} - -.onboarding-modal__image { - border-radius: 8px; - width: 70vw; - max-width: 450px; - max-height: auto; - display: block; - margin: auto; - margin-bottom: 20px; -} - -.onboard-sliders { - display: inline-block; - max-width: 30px; - max-height: auto; - margin-left: 10px; -} - -.boost-modal, .confirmation-modal { - background: lighten($color2, 8%); - color: $color1; - border-radius: 8px; - overflow: hidden; - max-width: 90vw; - width: 480px; - position: relative; - 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; - } -} - -.boost-modal__container { - overflow-x: scroll; - padding: 10px; - - .status { - user-select: text; - border-bottom: 0; - } -} - -.boost-modal__action-bar, .confirmation-modal__action-bar { - display: flex; - background: $color2; - padding: 10px; - line-height: 36px; - - & > div { - flex: 1 1 auto; - text-align: right; - color: lighten($color1, 33%); - padding-right: 10px; - } - - .button { - flex: 0 0 auto; - } -} - -.boost-modal__status-header { - font-size: 15px; -} - -.boost-modal__status-time { - float: right; - font-size: 14px; -} - -.confirmation-modal { - max-width: 380px; -} - -.confirmation-modal__action-bar { - & > div { - text-align: left; - padding: 0 16px; - } - - a { - color: darken($color2, 34%); - text-decoration: none; - font-size: 14px; - font-weight: 500; - - &:hover, &:focus, &:active { - color: darken($color2, 38%); - } - } -} - -.confirmation-modal__container { - padding: 30px; - font-size: 16px; - text-align: center; - - strong { - font-weight: 500; - } -} - -.loading-bar { - background-color: $color4; - height: 3px; - position: absolute; - top: 0; - left: 0; -} - -.media-gallery__gifv__label { - display: block; - position: absolute; - color: $color5; - background: rgba($color8, 0.5); - bottom: 6px; - left: 6px; - padding: 2px 6px; - border-radius: 2px; - font-size: 11px; - font-weight: 600; - z-index: 1; - pointer-events: none; - opacity: 0.9; - transition: opacity 0.1s ease; -} - -.media-gallery__gifv { - &.autoplay { - .media-gallery__gifv__label { - display: none; - } - } - - &:hover { - .media-gallery__gifv__label { - opacity: 1; - } - } -} - -.attachment-list { - display: flex; - font-size: 14px; - border: 1px solid lighten($color1, 8%); - border-radius: 4px; - margin-top: 14px; - overflow: hidden; -} - -.attachment-list__icon { - flex: 0 0 auto; - color: lighten($color1, 26%); - padding: 8px 18px; - cursor: default; - border-right: 1px solid lighten($color1, 8%); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 26px; - - .fa { - display: block; - } -} - -.attachment-list__list { - list-style: none; - padding: 4px 0; - padding-left: 8px; - display: flex; - flex-direction: column; - justify-content: center; - - li { - display: block; - padding: 4px 0; - } - - a { - text-decoration: none; - color: lighten($color1, 26%); - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } -} - -/* Media Gallery */ -.media-gallery { - box-sizing: border-box; - margin-top: 8px; - overflow: hidden; - position: relative; - width: 100%; -} - -.media-gallery__item { - border: none; - box-sizing: border-box; - display: block; - float: left; - position: relative; -} - -.media-gallery__item-thumbnail { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - cursor: zoom-in; - display: block; - height: 100%; - text-decoration: none; - width: 100%; -} - -.media-gallery__gifv { - height: 100%; - overflow: hidden; - position: relative; - width: 100%; -} - -.media-gallery__item-gifv-thumbnail { - cursor: zoom-in; - height: 100%; - object-fit: cover; - position: relative; - top: 50%; - transform: translateY(-50%); - width: 100%; - z-index: 1; -} - -.media-gallery__item-thumbnail-label { - clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); - overflow: hidden; - position: absolute; -} -/* End Media Gallery */ - -/* Status Video Player */ -.status__video-player { - background: #000; - box-sizing: border-box; - cursor: default; /* May not be needed */ - margin-top: 8px; - overflow: hidden; - position: relative; -} - -.status__video-player-video { - height: 100%; - object-fit: cover; - position: relative; - top: 50%; - transform: translateY(-35%); - width: 100%; - z-index: 1; -} - -.status__video-player-expand, -.status__video-player-mute { - color: #fff; - opacity: 0.8; - position: absolute; - right: 4px; - text-shadow: 0px 1px 1px #000, 1px 0px 1px #000; -} - -.status__video-player-spoiler { - color: #fff; - left: 4px; - position: absolute; - text-shadow: 0px 1px 1px #000, 1px 0px 1px #000; - top: 4px; - z-index: 100; -} - -.status__video-player-expand { - bottom: 4px; - z-index: 100; -} - -.status__video-player-mute { - top: 4px; - z-index: 5; -} - -.media-spoiler-video { - background-size: cover; - cursor: pointer; - margin-top: 8px; - position: relative; -} - -.media-spoiler-video-play-icon { - border-radius: 100px; - color: rgba(255, 255, 255, 0.8); - font-size: 36px; - left: 50%; - padding: 5px; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); -} -/* End Video Player */ diff --git a/app/assets/stylesheets/containers.scss b/app/assets/stylesheets/containers.scss deleted file mode 100644 index 6f339f998..000000000 --- a/app/assets/stylesheets/containers.scss +++ /dev/null @@ -1,71 +0,0 @@ -.container { - width: 700px; - margin: 0 auto; - margin-top: 40px; - - @media screen and (max-width: 700px) { - width: 100%; - margin: 0; - } -} - -.mastodon-column-container { - display: flex; - height: 100%; - width: 100%; - - // 707568 - height 100% doesn't work on child of a flex item - chromium - Monorail - // https://bugs.chromium.org/p/chromium/issues/detail?id=707568 - flex: 1 1 auto; -} - -.logo-container { - max-width: 400px; - margin: 100px auto; - margin-bottom: 0; - cursor: default; - - @media screen and (max-width: 360px) { - margin: 30px auto; - } - - h1 { - display: block; - text-align: center; - color: $color5; - font-size: 48px; - font-weight: 500; - - img { - display: block; - margin: 20px auto; - width: 180px; - height: 180px; - } - - a { - color: inherit; - text-decoration: none; - outline: 0; - - img { - opacity: 0.8; - transition: opacity 0.8s ease; - } - - &:hover { - img { - opacity: 1; - transition-duration: 0.2s; - } - } - } - - small { - display: block; - font-size: 12px; - font-weight: 400; - font-family: 'Roboto Mono', monospace; - } - } -} diff --git a/app/assets/stylesheets/fonts/montserrat.scss b/app/assets/stylesheets/fonts/montserrat.scss deleted file mode 100644 index 8705b3fa9..000000000 --- a/app/assets/stylesheets/fonts/montserrat.scss +++ /dev/null @@ -1,11 +0,0 @@ -@font-face { - font-family: 'Montserrat'; - src: local('Montserrat'); - src: font-url('montserrat/Montserrat-Regular.eot'); - src: font-url('montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), - font-url('montserrat/Montserrat-Regular.woff2') format('woff2'), - font-url('montserrat/Montserrat-Regular.woff') format('woff'), - font-url('montserrat/Montserrat-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; -} diff --git a/app/assets/stylesheets/fonts/roboto-mono.scss b/app/assets/stylesheets/fonts/roboto-mono.scss deleted file mode 100644 index f46ce6b68..000000000 --- a/app/assets/stylesheets/fonts/roboto-mono.scss +++ /dev/null @@ -1,12 +0,0 @@ -@font-face { - font-family: 'Roboto Mono'; - src: local('Roboto Mono'); - src: font-url('roboto-mono/robotomono-regular-webfont.eot'); - src: font-url('roboto-mono/robotomono-regular-webfont.eot?#iefix') format('embedded-opentype'), - font-url('roboto-mono/robotomono-regular-webfont.woff2') format('woff2'), - font-url('roboto-mono/robotomono-regular-webfont.woff') format('woff'), - font-url('roboto-mono/robotomono-regular-webfont.ttf') format('truetype'), - font-url('roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg'); - font-weight: 400; - font-style: normal; -} diff --git a/app/assets/stylesheets/fonts/roboto.scss b/app/assets/stylesheets/fonts/roboto.scss deleted file mode 100644 index fc62869d4..000000000 --- a/app/assets/stylesheets/fonts/roboto.scss +++ /dev/null @@ -1,52 +0,0 @@ -@font-face { - font-family: 'Roboto'; - src: local('Roboto'); - src: font-url('roboto/roboto-italic-webfont.eot'); - src: font-url('roboto/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'), - font-url('roboto/roboto-italic-webfont.woff2') format('woff2'), - font-url('roboto/roboto-italic-webfont.woff') format('woff'), - font-url('roboto/roboto-italic-webfont.ttf') format('truetype'), - font-url('roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg'); - font-weight: normal; - font-style: italic; -} - -@font-face { - font-family: 'Roboto'; - src: local('Roboto'); - src: font-url('roboto/roboto-bold-webfont.eot'); - src: local('Roboto bold'), local('roboto-bold'), - font-url('roboto/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'), - font-url('roboto/roboto-bold-webfont.woff2') format('woff2'), - font-url('roboto/roboto-bold-webfont.woff') format('woff'), - font-url('roboto/roboto-bold-webfont.ttf') format('truetype'), - font-url('roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg'); - font-weight: bold; - font-style: normal; -} - -@font-face { - font-family: 'Roboto'; - src: local('Roboto'); - src: font-url('roboto/roboto-medium-webfont.eot'); - src: font-url('roboto/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'), - font-url('roboto/roboto-medium-webfont.woff2') format('woff2'), - font-url('roboto/roboto-medium-webfont.woff') format('woff'), - font-url('roboto/roboto-medium-webfont.ttf') format('truetype'), - font-url('roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg'); - font-weight: 500; - font-style: normal; -} - -@font-face { - font-family: 'Roboto'; - src: local('Roboto'); - src: font-url('roboto/roboto-regular-webfont.eot'); - src: font-url('roboto/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'), - font-url('roboto/roboto-regular-webfont.woff2') format('woff2'), - font-url('roboto/roboto-regular-webfont.woff') format('woff'), - font-url('roboto/roboto-regular-webfont.ttf') format('truetype'), - font-url('roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg'); - font-weight: normal; - font-style: normal; -} diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/footer.scss deleted file mode 100644 index 07ecb5e75..000000000 --- a/app/assets/stylesheets/footer.scss +++ /dev/null @@ -1,29 +0,0 @@ -.footer { - text-align: center; - margin-top: 30px; - font-size: 12px; - color: darken($color2, 25%); - - .domain { - font-weight: 500; - - a { - color: inherit; - text-decoration: none; - } - } - - .powered-by, .single-user-login { - font-weight: 400; - - a { - color: inherit; - text-decoration: underline; - font-weight: 500; - - &:hover { - text-decoration: none; - } - } - } -} diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss deleted file mode 100644 index 18258099b..000000000 --- a/app/assets/stylesheets/forms.scss +++ /dev/null @@ -1,335 +0,0 @@ -code { - font-family: 'Roboto Mono', monospace; - font-weight: 400; -} - -.form-container { - max-width: 400px; - padding: 20px; - margin: 0 auto; -} - -.simple_form { - .input { - margin-bottom: 15px; - } - - span.hint { - display: block; - color: $color3; - font-size: 12px; - margin-top: 4px; - } - - p.hint { - margin-bottom: 15px; - } - - strong { - font-weight: 500; - } - - .label_input { - display: flex; - - label { - flex: 0 0 auto; - width: 100px; - } - - input { - flex: 1 1 auto; - } - } - - .input.file, .input.select, .input.radio_buttons { - padding: 15px 0; - margin-bottom: 0; - - label { - font-family: inherit; - font-size: 16px; - color: $color5; - display: block; - padding-top: 5px; - } - } - - .fields-group { - margin-bottom: 25px; - } - - .input.radio_buttons .radio label { - margin-bottom: 5px; - font-family: inherit; - font-size: 14px; - color: white; - display: block; - width: auto; - } - - .input.boolean { - margin-bottom: 5px; - - label { - font-family: inherit; - font-size: 14px; - color: white; - display: block; - width: auto; - } - - label.checkbox { - position: relative; - padding-left: 25px; - flex: 1 1 auto; - } - - input[type=checkbox] { - position: absolute; - left: 0; - top: 1px; - margin: 0; - } - - .hint { - padding-left: 25px; - margin-left: 0; - } - } - - input[type=text], input[type=number], input[type=email], input[type=password], textarea { - background: transparent; - box-sizing: border-box; - border: 0; - border-bottom: 2px solid $color3; - border-radius: 2px 2px 0 0; - padding: 7px 4px; - font-size: 16px; - color: $color5; - display: block; - width: 100%; - outline: 0; - font-family: inherit; - resize: vertical; - - &:invalid { - box-shadow: none; - } - - &:focus:invalid { - border-bottom-color: $color6; - } - - &:required:valid { - border-bottom-color: $color7; - } - - &:active, &:focus { - border-bottom-color: $color4; - background: rgba($color8, 0.1); - } - } - - .input.field_with_errors { - label { - color: $color6; - } - - input[type=text], input[type=email], input[type=password] { - border-bottom-color: $color6; - } - - .error { - display: block; - font-weight: 500; - color: $color6; - margin-top: 4px; - } - } - - .actions { - margin-top: 30px; - } - - button, .block-button { - display: block; - width: 100%; - border: 0; - border-radius: 4px; - background: $color4; - color: $color5; - font-size: 18px; - padding: 10px; - text-transform: uppercase; - text-decoration: none; - text-align: center; - box-sizing: border-box; - cursor: pointer; - font-weight: 500; - outline: 0; - margin-bottom: 10px; - - &:hover { - background-color: lighten($color4, 5%); - } - - &:active, &:focus { - position: relative; - top: 1px; - background-color: darken($color4, 5%); - } - - &.negative { - background: $color6; - - &:hover { - background-color: lighten($color6, 5%); - } - - &:active, &:focus { - background-color: darken($color6, 5%); - } - } - } - - select { - font-size: 16px; - } -} - -.flash-message { - background: $color1; - color: $color3; - border-radius: 4px; - padding: 15px 10px; - margin-bottom: 30px; - box-shadow: 0 0 5px rgba($color8, 0.2); - text-align: center; - - strong { - font-weight: 500; - } -} - -.form-footer { - margin-top: 30px; - text-align: center; - - a { - color: $color5; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.oauth-prompt, .follow-prompt { - margin-bottom: 30px; - text-align: center; - color: $color3; - - h2 { - font-size: 16px; - margin-bottom: 30px; - } - - strong { - color: $color2; - font-weight: 500; - } -} - -.qr-wrapper { - display: flex; -} - -.qr-code { - flex: 0 0 auto; - background: #fff; - padding: 4px; - margin-bottom: 20px; - box-shadow: 0 0 15px rgba($color8, 0.2); - display: inline-block; - - svg { - display: block; - margin: 0; - } -} - -.qr-alternative { - margin-left: 10px; - color: $color3; - - samp { - display: block; - font-size: 14px; - } -} - -.table-form { - p { - max-width: 400px; - margin-bottom: 15px; - - strong { - font-weight: 500; - } - } - - .warning { - max-width: 400px; - box-sizing: border-box; - background: rgba($color6, 0.5); - color: $color5; - text-shadow: 1px 1px 0 rgba($color8, 0.3); - box-shadow: 0 2px 6px rgba($color8, 0.4); - border-radius: 4px; - padding: 10px; - margin-bottom: 15px; - - a { - color: $color5; - text-decoration: underline; - - &:hover, &:focus, &:active { - text-decoration: none; - } - } - - strong { - font-weight: 600; - display: block; - margin-bottom: 5px; - - .fa { - font-weight: 400; - } - } - } -} - -.action-pagination { - display: flex; - align-items: center; - - .actions, .pagination { - flex: 1 1 auto; - } - - .actions { - padding: 30px 0; - padding-right: 20px; - flex: 0 0 auto; - } -} - -.user_allowed_languages { - li { - float: left; - width: 50%; - } -} diff --git a/app/assets/stylesheets/landing_strip.scss b/app/assets/stylesheets/landing_strip.scss deleted file mode 100644 index 4c2403160..000000000 --- a/app/assets/stylesheets/landing_strip.scss +++ /dev/null @@ -1,17 +0,0 @@ -.landing-strip { - background: rgba(darken($color1, 7%), 0.8); - color: $color3; - font-weight: 400; - padding: 14px; - border-radius: 4px; - margin-bottom: 20px; - - strong, a { - font-weight: 500; - } - - a { - color: inherit; - text-decoration: underline; - } -} diff --git a/app/assets/stylesheets/lists.scss b/app/assets/stylesheets/lists.scss deleted file mode 100644 index 47805663f..000000000 --- a/app/assets/stylesheets/lists.scss +++ /dev/null @@ -1,20 +0,0 @@ -.no-list { - list-style: none; - - li { - display: inline-block; - margin: 0 5px; - } -} - -.recovery-codes { - list-style: none; - margin: 0 auto; - text-align: center; - - li { - font-size: 125%; - line-height: 1.5; - letter-spacing: 1px; - } -} diff --git a/app/assets/stylesheets/reset.scss b/app/assets/stylesheets/reset.scss deleted file mode 100644 index 71064cc31..000000000 --- a/app/assets/stylesheets/reset.scss +++ /dev/null @@ -1,91 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-thumb { - background: lighten($color1, 4%); - border: 0px none $color5; - border-radius: 50px; -} - -::-webkit-scrollbar-thumb:hover { - background: lighten($color1, 6%); -} - -::-webkit-scrollbar-thumb:active { - background: lighten($color1, 4%); -} - -::-webkit-scrollbar-track { - border: 0px none $color5; - border-radius: 0; - background: rgba($color8, 0.1); -} - -::-webkit-scrollbar-track:hover { - background: $color1; -} - -::-webkit-scrollbar-track:active { - background: $color1; -} - -::-webkit-scrollbar-corner { - background: transparent; -} diff --git a/app/assets/stylesheets/rtl.scss b/app/assets/stylesheets/rtl.scss deleted file mode 100644 index 6abb2d25c..000000000 --- a/app/assets/stylesheets/rtl.scss +++ /dev/null @@ -1,136 +0,0 @@ -body.rtl { - direction: rtl; - - .column-link__icon, .column-header__icon { - margin-right: 0; - margin-left: 5px; - } - - .character-counter__wrapper { - margin-right: 0; - margin-left: 16px; - } - - .navigation-bar__profile { - margin-left: 0; - margin-right: 8px; - } - - .search__input { - padding-right: 10px; - padding-left: 30px; - } - - .search__icon .fa { - right: auto; - left: 10px; - } - - .column-icon-clear { - right: auto; - left: 48px; - } - - .column-icon { - right: auto; - left: 5px; - } - - .setting-toggle { - margin-left: 0; - margin-right: 8px; - } - - .status__avatar { - left: auto; - right: 10px; - } - - .status { - padding-left: 10px; - padding-right: 68px; - } - - .status__info .status__display-name { - padding-left: 25px; - padding-right: 0; - } - - .column-back-button--slim-button { - right: auto; - left: 0; - } - - .status__info-time { - float: left; - } - - .status__action-bar-button-wrapper { - float: right; - margin-right: 0; - margin-left: 18px; - } - - .status__action-bar-dropdown { - float: right; - } - - .privacy-dropdown__dropdown { - left: auto; - right: 0; - } - - .dropdown--active .dropdown__content { - text-align: right; - } - - .dropdown--active .dropdown__content::before { - left: auto; - right: 8px; - } - - .dropdown--active .dropdown__content > ul { - left: auto; - right: -10px; - } - - .privacy-dropdown__option__icon { - margin-left: 10px; - margin-right: 0; - } - - .detailed-status__display-avatar { - margin-right: 0; - margin-left: 10px; - float: right; - } - - .detailed-status__favorites, .detailed-status__reblogs { - margin-left: 0; - margin-right: 6px; - } - - @media screen and (min-width: 1025px) { - .column, .drawer { - padding-left: 5px; - padding-right: 5px; - - &:first-child { - padding-left: 5px; - padding-right: 10px; - } - - &:last-child { - padding-right: 0px; - padding-left: 10px; - } - } - - .columns-area > div { - .column, .drawer { - padding-left: 5px; - padding-right: 5px; - } - } - } -} diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss deleted file mode 100644 index fac4703b9..000000000 --- a/app/assets/stylesheets/stream_entries.scss +++ /dev/null @@ -1,372 +0,0 @@ -.activity-stream { - clear: both; - box-shadow: 0 0 15px rgba($color8, 0.2); - - .entry { - background: $color5; - - .detailed-status.light, .status.light { - border-bottom: 1px solid $color2; - } - - &:last-child { - &, .detailed-status.light, .status.light { - border-bottom: 0; - border-radius: 0 0 4px 4px; - } - } - - &:first-child { - &, .detailed-status.light, .status.light { - border-radius: 4px 4px 0 0; - } - - &:last-child { - &, .detailed-status.light, .status.light { - border-radius: 4px; - } - } - } - } - - .status.light { - padding: 14px 14px 14px (48px + 14px*2); - position: relative; - min-height: 48px; - cursor: default; - - .status__header { - font-size: 15px; - - .status__meta { - float: right; - font-size: 14px; - - .status__relative-time { - color: $color4; - } - } - } - - .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; - color: $color1; - } - - .status__avatar { - position: absolute; - left: 14px; - top: 14px; - width: 48px; - height: 48px; - - & > div { - width: 48px; - height: 48px; - } - - img { - display: block; - border-radius: 4px; - } - } - - .display-name { - display: block; - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - strong { - font-weight: 500; - color: $color1; - } - - span { - font-size: 14px; - color: $color4; - } - } - - .status__content { - color: $color1; - - a { - color: $color4; - } - - a.status__content__spoiler-link { - color: $color5; - background: $color3; - - &:hover { - background: lighten($color3, 8%); - } - } - } - - .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 { - padding: 14px; - background: $color5; - cursor: default; - - .detailed-status__display-name { - display: block; - overflow: hidden; - margin-bottom: 15px; - - & > div { - float: left; - margin-right: 10px; - } - - .display-name { - display: block; - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - strong { - font-weight: 500; - color: $color1; - } - - span { - font-size: 14px; - color: $color3; - } - } - } - - .avatar { - width: 48px; - height: 48px; - - img { - display: block; - border-radius: 4px; - } - } - - .status__content { - color: $color1; - - a { - color: $color4; - } - - a.status__content__spoiler-link { - color: $color5; - background: $color3; - - &:hover { - background: lighten($color3, 8%); - } - } - } - - .detailed-status__meta { - margin-top: 15px; - color: $color3; - font-size: 14px; - line-height: 18px; - - a { - color: inherit; - } - - span > span { - font-weight: 500; - font-size: 12px; - margin-left: 6px; - display: inline-block; - } - } - - .detailed-status__attachments { - margin-top: 8px; - overflow: hidden; - width: 100%; - box-sizing: border-box; - position: relative; - - .status__attachments__inner { - display: flex; - height: 360px; - } - } - - .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; - height: 100%; - 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; - } - - 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($color5, 0.8); - z-index: 1; - } - } - - .media-spoiler { - background: $color3; - 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; - transition: all 100ms linear; - z-index: 2; - - &:hover { - background: darken($color3, 5%); - } - - span { - display: block; - - &:first-child { - font-size: 14px; - } - - &:last-child { - font-size: 11px; - font-weight: 500; - } - } - } - - .pre-header { - padding: 14px 0px; - padding-left: (48px + 14px*2); - padding-bottom: 0; - margin-bottom: -4px; - color: $color3; - font-size: 14px; - position: relative; - - .pre-header__icon { - position: absolute; - left: (48px + 14px*2 - 30px); - } - - .status__display-name.muted strong { - color: $color3; - } - } - - .open-in-web-link { - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.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; - - &:last-child { - border-radius: 4px; - } - } - } - } -} diff --git a/app/assets/stylesheets/tables.scss b/app/assets/stylesheets/tables.scss deleted file mode 100644 index ad8050580..000000000 --- a/app/assets/stylesheets/tables.scss +++ /dev/null @@ -1,65 +0,0 @@ -.table { - width: 100%; - max-width: 100%; - border-spacing: 0; - border-collapse: collapse; - margin-bottom: 20px; - - th, td { - padding: 8px; - line-height: 18px; - vertical-align: top; - border-top: 1px solid $color1; - text-align: left; - } - - & > thead > tr > th { - vertical-align: bottom; - border-bottom: 2px solid $color1; - border-top: 0; - font-weight: 500; - } - - & > tbody > tr > th { - font-weight: 500; - } - - & > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th { - background: $color1; - } - - a { - color: $color4; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } - - strong { - font-weight: 500; - } -} - -samp { - font-family: 'Roboto Mono', monospace; -} - -a.table-action-link { - text-decoration: none; - display: inline-block; - margin-right: 5px; - padding: 0 10px; - color: rgba($color5, 0.7); - font-weight: 500; - - &:hover { - color: $color5; - } - - i.fa { - font-weight: 400; - margin-right: 5px; - } -} diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss deleted file mode 100755 index 0dded90b0..000000000 --- a/app/assets/stylesheets/variables.scss +++ /dev/null @@ -1,8 +0,0 @@ -$color1: #282c37 !default; // darkest -$color2: #d9e1e8 !default; // lightest -$color3: #9baec8 !default; // lighter -$color4: #2b90d9 !default; // vibrant -$color5: #ffffff !default; // white -$color6: #df405a !default; // error red -$color7: #79bd9a !default; // succ green -$color8: #000000 !default; // black |