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/javascript/styles | |
| 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/javascript/styles')
21 files changed, 5535 insertions, 0 deletions
diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss new file mode 100644 index 000000000..b1139b86f --- /dev/null +++ b/app/javascript/styles/about.scss @@ -0,0 +1,374 @@ +.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/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss new file mode 100644 index 000000000..99af9c982 --- /dev/null +++ b/app/javascript/styles/accounts.scss @@ -0,0 +1,391 @@ +.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/javascript/styles/admin.scss b/app/javascript/styles/admin.scss new file mode 100644 index 000000000..6d246ded2 --- /dev/null +++ b/app/javascript/styles/admin.scss @@ -0,0 +1,245 @@ +.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/javascript/styles/application.scss b/app/javascript/styles/application.scss new file mode 100644 index 000000000..5895dd81f --- /dev/null +++ b/app/javascript/styles/application.scss @@ -0,0 +1,20 @@ +@import 'variables'; +@import 'fonts/roboto'; +@import 'fonts/roboto-mono'; +@import 'fonts/montserrat'; + +@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/javascript/styles/basics.scss b/app/javascript/styles/basics.scss new file mode 100644 index 000000000..78c142860 --- /dev/null +++ b/app/javascript/styles/basics.scss @@ -0,0 +1,58 @@ +body { + font-family: 'Roboto', sans-serif; + background: $color1 url('../images/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/javascript/styles/boost.scss b/app/javascript/styles/boost.scss new file mode 100644 index 000000000..90511c88c --- /dev/null +++ b/app/javascript/styles/boost.scss @@ -0,0 +1,11 @@ +@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/javascript/styles/compact_header.scss b/app/javascript/styles/compact_header.scss new file mode 100644 index 000000000..8fef05f0f --- /dev/null +++ b/app/javascript/styles/compact_header.scss @@ -0,0 +1,28 @@ +.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/javascript/styles/components.scss b/app/javascript/styles/components.scss new file mode 100644 index 000000000..178ac05de --- /dev/null +++ b/app/javascript/styles/components.scss @@ -0,0 +1,3189 @@ +@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: url('../images/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: url('../images/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%); + background: $color1; + cursor: default; + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; + + & > div { + background: url('../images/mastodon-not-found.png') no-repeat center -50px; + padding-top: 210px; + width: 100%; + } +} + +.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: url('../images/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/javascript/styles/containers.scss b/app/javascript/styles/containers.scss new file mode 100644 index 000000000..6f339f998 --- /dev/null +++ b/app/javascript/styles/containers.scss @@ -0,0 +1,71 @@ +.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/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss new file mode 100644 index 000000000..7496e0800 --- /dev/null +++ b/app/javascript/styles/fonts/montserrat.scss @@ -0,0 +1,11 @@ +@font-face { + font-family: 'Montserrat'; + src: local('Montserrat'); + src: url('../fonts/montserrat/Montserrat-Regular.eot'); + src: url('../fonts/montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), + url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'), + url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'), + url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss new file mode 100644 index 000000000..846519d9f --- /dev/null +++ b/app/javascript/styles/fonts/roboto-mono.scss @@ -0,0 +1,12 @@ +@font-face { + font-family: 'Roboto Mono'; + src: local('Roboto Mono'); + src: url('../fonts/roboto-mono/robotomono-regular-webfont.eot'); + src: url('../fonts/roboto-mono/robotomono-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'), + url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'), + url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'), + url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg'); + font-weight: 400; + font-style: normal; +} diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss new file mode 100644 index 000000000..6198a580f --- /dev/null +++ b/app/javascript/styles/fonts/roboto.scss @@ -0,0 +1,52 @@ +@font-face { + font-family: 'Roboto'; + src: local('Roboto'); + src: url('../fonts/roboto/roboto-italic-webfont.eot'); + src: url('../fonts/roboto/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'), + url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'), + url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'), + url('../fonts/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: url('../fonts/roboto/roboto-bold-webfont.eot'); + src: local('Roboto bold'), local('roboto-bold'), + url('../fonts/roboto/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'), + url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'), + url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'), + url('../fonts/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: url('../fonts/roboto/roboto-medium-webfont.eot'); + src: url('../fonts/roboto/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'), + url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'), + url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'), + url('../fonts/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: url('../fonts/roboto/roboto-regular-webfont.eot'); + src: url('../fonts/roboto/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'), + url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'), + url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'), + url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/app/javascript/styles/footer.scss b/app/javascript/styles/footer.scss new file mode 100644 index 000000000..07ecb5e75 --- /dev/null +++ b/app/javascript/styles/footer.scss @@ -0,0 +1,29 @@ +.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/javascript/styles/forms.scss b/app/javascript/styles/forms.scss new file mode 100644 index 000000000..18258099b --- /dev/null +++ b/app/javascript/styles/forms.scss @@ -0,0 +1,335 @@ +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/javascript/styles/landing_strip.scss b/app/javascript/styles/landing_strip.scss new file mode 100644 index 000000000..4c2403160 --- /dev/null +++ b/app/javascript/styles/landing_strip.scss @@ -0,0 +1,17 @@ +.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/javascript/styles/lists.scss b/app/javascript/styles/lists.scss new file mode 100644 index 000000000..47805663f --- /dev/null +++ b/app/javascript/styles/lists.scss @@ -0,0 +1,20 @@ +.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/javascript/styles/reset.scss b/app/javascript/styles/reset.scss new file mode 100644 index 000000000..71064cc31 --- /dev/null +++ b/app/javascript/styles/reset.scss @@ -0,0 +1,91 @@ +/* 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/javascript/styles/rtl.scss b/app/javascript/styles/rtl.scss new file mode 100644 index 000000000..6abb2d25c --- /dev/null +++ b/app/javascript/styles/rtl.scss @@ -0,0 +1,136 @@ +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/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss new file mode 100644 index 000000000..fac4703b9 --- /dev/null +++ b/app/javascript/styles/stream_entries.scss @@ -0,0 +1,372 @@ +.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/javascript/styles/tables.scss b/app/javascript/styles/tables.scss new file mode 100644 index 000000000..ad8050580 --- /dev/null +++ b/app/javascript/styles/tables.scss @@ -0,0 +1,65 @@ +.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/javascript/styles/variables.scss b/app/javascript/styles/variables.scss new file mode 100755 index 000000000..0dded90b0 --- /dev/null +++ b/app/javascript/styles/variables.scss @@ -0,0 +1,8 @@ +$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 |