Merge branch 'master' into glitch-soc/merge-upstream

Conflicts:
- app/controllers/settings/notifications_controller.rb
- app/javascript/packs/public.js
- app/views/settings/preferences/show.html.haml
- app/views/stream_entries/_simple_status.html.haml
- config/locales/simple_form.en.yml
- config/locales/simple_form.pl.yml
- config/navigation.rb
- config/routes.rb

9 files changed, 410 insertions, 56 deletions

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index d35a59821..ee8a7d265 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -1,6 +1,10 @@
 // Notes!
 // Sass color functions, "darken" and "lighten" are automatically replaced.
 
+html {
+  scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
+}
+
 // Change the colors of button texts
 .button {
   color: $white;
@@ -11,18 +15,139 @@
 }
 
 // Change default background colors of columns
-.column {
-  > .scrollable {
+.column > .scrollable,
+.getting-started,
+.column-inline-form {
+  background: $white;
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-top: 0;
+}
+
+.column-back-button,
+.column-header {
+  background: $white;
+  border: 1px solid lighten($ui-base-color, 8%);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+  }
+
+  &--slim-button {
+    border: 0;
+    top: -49px;
+    right: 1px;
+  }
+}
+
+.column-header__back-button,
+.column-header__button,
+.column-header__button.active,
+.account__header__bar {
+  background: $white;
+}
+
+.column-header__button.active {
+  color: $ui-highlight-color;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $ui-highlight-color;
     background: $white;
   }
 }
 
-.drawer__inner {
+.account__header__bar .avatar .account__avatar {
+  border-color: $white;
+}
+
+.getting-started__footer a {
+  color: $ui-secondary-color;
+  text-decoration: underline;
+}
+
+.column-subheading {
+  background: darken($ui-base-color, 4%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+}
+
+.getting-started,
+.scrollable {
+  .column-link {
+    background: $white;
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: $ui-base-color;
+    }
+  }
+}
+
+.getting-started .navigation-bar {
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+  }
+}
+
+.compose-form__autosuggest-wrapper,
+.poll__text input[type="text"],
+.compose-form .spoiler-input__input,
+.compose-form__poll-wrapper select,
+.search__input,
+.setting-text,
+.box-widget input[type="text"],
+.box-widget input[type="email"],
+.box-widget input[type="password"],
+.box-widget textarea,
+.statuses-grid .detailed-status {
+  border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.search__input {
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+    border-bottom: 0;
+  }
+}
+
+.list-editor .search .search__input {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.compose-form__poll-wrapper select {
+  background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
+}
+
+.compose-form__poll-wrapper,
+.compose-form__poll-wrapper .poll__footer {
+  border-top-color: lighten($ui-base-color, 8%);
+}
+
+.notification__filter-bar {
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-top: 0;
+}
+
+.compose-form .compose-form__buttons-wrapper {
   background: $ui-base-color;
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-top: 0;
+}
+
+.drawer__header,
+.drawer__inner {
+  background: $white;
+  border: 1px solid lighten($ui-base-color, 8%);
 }
 
 .drawer__inner__mastodon {
-  background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($white)}"/></svg>') no-repeat bottom / 100% auto;
+  background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
 }
 
 // Change the colors used in compose-form
@@ -93,16 +218,16 @@
 
 .detailed-status,
 .detailed-status__action-bar {
-  background: darken($ui-base-color, 6%);
+  background: $white;
 }
 
 // Change the background colors of status__content__spoiler-link
 .reply-indicator__content .status__content__spoiler-link,
 .status__content .status__content__spoiler-link {
-  background: $ui-base-lighter-color;
+  background: $ui-base-color;
 
   &:hover {
-    background: lighten($ui-base-lighter-color, 6%);
+    background: lighten($ui-base-color, 4%);
   }
 }
 
@@ -112,41 +237,47 @@
   background: $ui-base-color;
 }
 
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
+  color: $white;
+}
+
 .account-gallery__item a {
   background-color: $ui-base-color;
 }
 
 // Change the colors used in the dropdown menu
 .dropdown-menu {
-  background: $ui-base-color;
+  background: $white;
 
   &__arrow {
     &.left {
-      border-left-color: $ui-base-color;
+      border-left-color: $white;
     }
 
     &.top {
-      border-top-color: $ui-base-color;
+      border-top-color: $white;
     }
 
     &.bottom {
-      border-bottom-color: $ui-base-color;
+      border-bottom-color: $white;
     }
 
     &.right {
-      border-right-color: $ui-base-color;
+      border-right-color: $white;
     }
   }
 
   &__item {
     a {
-      background: $ui-base-color;
+      background: $white;
       color: $darker-text-color;
     }
   }
 }
 
 // Change the text colors on inverted background
+.privacy-dropdown__option.active,
+.privacy-dropdown__option:hover,
 .privacy-dropdown__option.active .privacy-dropdown__option__content,
 .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
 .privacy-dropdown__option:hover .privacy-dropdown__option__content,
@@ -162,7 +293,7 @@
 .actions-modal ul li:not(:empty) a:focus button,
 .actions-modal ul li:not(:empty) a:hover,
 .actions-modal ul li:not(:empty) a:hover button,
-.admin-wrapper .sidebar ul li a.selected,
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
 .simple_form .block-button,
 .simple_form .button,
 .simple_form button {
@@ -170,7 +301,7 @@
 }
 
 .dropdown-menu__separator {
-  border-bottom-color: lighten($ui-base-color, 12%);
+  border-bottom-color: lighten($ui-base-color, 4%);
 }
 
 // Change the background colors of modals
@@ -185,6 +316,12 @@
   background: $ui-base-color;
 }
 
+.column-header__collapsible-inner {
+  background: darken($ui-base-color, 4%);
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-top: 0;
+}
+
 .boost-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
@@ -233,13 +370,139 @@
   background: $white;
 }
 
+.tabs-bar {
+  background: $white;
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 0;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+  }
+
+  &__link {
+    padding-bottom: 14px;
+    border-bottom-width: 1px;
+    border-bottom-color: lighten($ui-base-color, 8%);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: $ui-base-color;
+    }
+
+    &.active {
+      &:hover,
+      &:active,
+      &:focus {
+        background: transparent;
+        border-bottom-color: $ui-highlight-color;
+      }
+    }
+  }
+}
+
 // Change the default colors used on some parts of the profile pages
 .activity-stream-tabs {
   background: $account-background-color;
   border-bottom-color: lighten($ui-base-color, 8%);
 }
 
+.box-widget,
+.nothing-here,
+.page-header,
+.directory__tag > a,
+.directory__tag > div,
+.landing-page__call-to-action,
+.contact-widget,
+.landing .hero-widget__text,
+.landing-page__information.contact-widget {
+  background: $white;
+  border: 1px solid lighten($ui-base-color, 8%);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+  }
+}
+
+.landing .hero-widget__text {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.simple_form {
+  input[type=text],
+  input[type=number],
+  input[type=email],
+  input[type=password],
+  textarea {
+    &:hover {
+      border-color: lighten($ui-base-color, 12%);
+    }
+  }
+}
+
+.landing .hero-widget__footer {
+  background: $white;
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-top: 0;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border: 0;
+  }
+}
+
+.brand__tagline {
+  color: $ui-secondary-color;
+}
+
+.directory__tag > a {
+  &:hover,
+  &:active,
+  &:focus {
+    background: $ui-base-color;
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border: 0;
+  }
+}
+
+.directory__tag.active > a,
+.directory__tag.active > div {
+  border-color: $ui-highlight-color;
+
+  &,
+  h4,
+  h4 small,
+  .fa,
+  .trends__item__current {
+    color: $white;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: $ui-highlight-color;
+  }
+}
+
+.batch-table {
+  &__toolbar,
+  &__row,
+  .nothing-here {
+    border-color: lighten($ui-base-color, 8%);
+  }
+}
+
 .activity-stream {
+  border: 1px solid lighten($ui-base-color, 8%);
+
+  &--under-tabs {
+    border-top: 0;
+  }
+
   .entry {
     background: $account-background-color;
 
@@ -294,6 +557,22 @@
     background: rgba($error-red, 0.5);
     text-shadow: none;
   }
+
+  .recommended {
+    border-color: $ui-highlight-color;
+    color: $ui-highlight-color;
+    background-color: rgba($ui-highlight-color, 0.1);
+  }
+}
+
+.compose-form .compose-form__warning {
+  border-color: $ui-highlight-color;
+  background-color: rgba($ui-highlight-color, 0.1);
+
+  &,
+  a {
+    color: $ui-highlight-color;
+  }
 }
 
 .status__content,
@@ -312,14 +591,41 @@
 }
 
 .public-layout {
+  .account__section-headline {
+    border: 1px solid lighten($ui-base-color, 8%);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-top: 0;
+    }
+  }
+
   .header,
   .public-account-header,
   .public-account-bio {
     box-shadow: none;
   }
 
+  .public-account-bio,
+  .hero-widget__text {
+    background: $account-background-color;
+    border: 1px solid lighten($ui-base-color, 8%);
+  }
+
   .header {
-    background: lighten($ui-base-color, 12%);
+    background: $ui-base-color;
+    border: 1px solid lighten($ui-base-color, 8%);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border: 0;
+    }
+
+    .brand {
+      &:hover,
+      &:focus,
+      &:active {
+        background: lighten($ui-base-color, 4%);
+      }
+    }
   }
 
   .public-account-header {
@@ -331,17 +637,50 @@
       }
     }
 
+    &__bar {
+      &::before {
+        background: $account-background-color;
+        border: 1px solid lighten($ui-base-color, 8%);
+        border-top: 0;
+      }
+
+      .avatar img {
+        border-color: $account-background-color;
+      }
+
+      @media screen and (max-width: $no-columns-breakpoint) {
+        background: $account-background-color;
+        border: 1px solid lighten($ui-base-color, 8%);
+        border-top: 0;
+      }
+    }
+
     &__tabs {
       &__name {
         h1,
         h1 small {
           color: $white;
+
+          @media screen and (max-width: $no-columns-breakpoint) {
+            color: $primary-text-color;
+          }
         }
       }
     }
+
+    &__extra {
+      .public-account-bio {
+        border: 0;
+      }
+
+      .public-account-bio .account__header__fields {
+        border-color: lighten($ui-base-color, 8%);
+      }
+    }
   }
 }
 
+.notification__filter-bar button.active::after,
 .account__section-headline a.active::after {
   border-color: transparent transparent $white;
 }
@@ -355,6 +694,9 @@
 .activity-stream,
 .nothing-here,
 .directory__tag > a,
-.directory__tag > div {
+.directory__tag > div,
+.card > a,
+.page-header,
+.compose-form .compose-form__warning {
   box-shadow: none;
 }
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index 9f6d470b1..01748148f 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -17,7 +17,7 @@ $ui-base-color: $classic-secondary-color !default;
 $ui-base-lighter-color: #b0c0cf;
 $ui-primary-color: #9bcbed;
 $ui-secondary-color: $classic-base-color !default;
-$ui-highlight-color: #2b5fd9;
+$ui-highlight-color: #2b90d9;
 
 $primary-text-color: $black !default;
 $darker-text-color: $classic-base-color !default;
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index d3b4a5909..61637ce96 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -659,7 +659,8 @@ $small-breakpoint: 960px;
     align-items: center;
     padding: 50px;
 
-    img {
+    svg {
+      fill: $primary-text-color;
       height: 52px;
     }
 
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index a93e1ea12..f95313a25 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -197,7 +197,8 @@
   }
 }
 
-.account-role {
+.account-role,
+.simple_form .recommended {
   display: inline-block;
   padding: 4px 6px;
   cursor: default;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 63c38ff42..578e98990 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1839,7 +1839,7 @@ a.account__display-name {
       display: flex;
       flex-direction: column;
 
-      @media screen and (min-width: 360px) {
+      @media screen and (min-width: $no-gap-breakpoint) {
         padding: 0 10px;
       }
     }
@@ -2021,7 +2021,7 @@ a.account__display-name {
     top: 15px;
   }
 
-  @media screen and (min-width: 360px) {
+  @media screen and (min-width: $no-gap-breakpoint) {
     padding: 10px 0;
   }
 
@@ -2135,7 +2135,7 @@ a.account__display-name {
   }
 }
 
-@media screen and (min-width: 360px) {
+@media screen and (min-width: $no-gap-breakpoint) {
   .tabs-bar {
     margin: 10px auto;
     margin-bottom: 0;
@@ -2212,17 +2212,6 @@ a.account__display-name {
   height: calc(100% - 10px);
   overflow-y: hidden;
 
-  .search__input {
-    line-height: 18px;
-    font-size: 16px;
-    padding: 15px;
-    padding-right: 30px;
-  }
-
-  .search__icon .fa {
-    top: 15px;
-  }
-
   .navigation-bar {
     padding-top: 20px;
     padding-bottom: 20px;
@@ -2709,21 +2698,22 @@ a.account__display-name {
 }
 
 .setting-text {
-  color: $darker-text-color;
-  background: transparent;
-  border: 0;
-  border-bottom: 2px solid $ui-primary-color;
-  box-sizing: border-box;
   display: block;
-  font-family: inherit;
-  margin-bottom: 10px;
-  padding: 7px 0;
+  box-sizing: border-box;
   width: 100%;
+  margin: 0;
+  color: $inverted-text-color;
+  background: $simple-background-color;
+  padding: 10px;
+  font-family: inherit;
+  font-size: 14px;
+  resize: vertical;
+  border: 0;
+  outline: 0;
+  border-radius: 4px;
 
-  &:focus,
-  &:active {
-    color: $primary-text-color;
-    border-bottom-color: $highlight-text-color;
+  &:focus {
+    outline: 0;
   }
 
   @media screen and (max-width: 600px) {
@@ -3895,8 +3885,10 @@ a.status-card.compact:hover {
   @include search-input;
 
   display: block;
-  padding: 10px;
+  padding: 15px;
   padding-right: 30px;
+  line-height: 18px;
+  font-size: 16px;
 }
 
 .search__icon {
@@ -3911,7 +3903,7 @@ a.status-card.compact:hover {
 
   .fa {
     position: absolute;
-    top: 10px;
+    top: 16px;
     right: 10px;
     z-index: 2;
     display: inline-block;
@@ -3941,7 +3933,7 @@ a.status-card.compact:hover {
   }
 
   .fa-times-circle {
-    top: 11px;
+    top: 17px;
     transform: rotate(0deg);
     color: $action-button-color;
     cursor: pointer;
@@ -4747,7 +4739,6 @@ a.status-card.compact:hover {
   display: block;
   text-decoration: none;
   color: $secondary-text-color;
-  line-height: 0;
   position: relative;
   z-index: 1;
 
@@ -5474,8 +5465,8 @@ noscript {
 }
 
 .column-inline-form {
-  padding: 7px 15px;
-  padding-right: 5px;
+  padding: 15px;
+  padding-right: 0;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -5486,7 +5477,6 @@ noscript {
 
     input {
       width: 100%;
-      margin-bottom: 6px;
 
       &:focus {
         outline: 0;
@@ -5496,7 +5486,7 @@ noscript {
 
   .icon-button {
     flex: 0 0 auto;
-    margin: 0 5px;
+    margin: 0 10px;
   }
 }
 
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 2d68d2b70..3564bf07b 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -21,7 +21,8 @@
     justify-content: center;
     align-items: center;
 
-    img {
+    svg {
+      fill: $primary-text-color;
       height: 42px;
       margin-right: 10px;
     }
@@ -256,12 +257,13 @@
       display: block;
       padding: 15px;
 
-      img {
+      svg {
         display: block;
         height: 18px;
         width: auto;
         position: relative;
         bottom: -2px;
+        fill: $primary-text-color;
 
         @media screen and (max-width: $no-gap-breakpoint) {
           height: 20px;
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index f3de87791..456ee4e0d 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -79,6 +79,12 @@ code {
           text-decoration: none;
         }
       }
+
+      .recommended {
+        position: absolute;
+        margin: 0 4px;
+        margin-top: -2px;
+      }
     }
   }
 
@@ -443,6 +449,10 @@ code {
     height: 41px;
   }
 
+  h4 {
+    margin-bottom: 15px !important;
+  }
+
   .label_input {
     &__wrapper {
       position: relative;
diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
index a59f59f59..58bc53b14 100644
--- a/app/javascript/styles/mastodon/rtl.scss
+++ b/app/javascript/styles/mastodon/rtl.scss
@@ -43,6 +43,10 @@ body.rtl {
     left: 10px;
   }
 
+  .columns-area {
+    direction: rtl;
+  }
+
   .column-header__buttons {
     left: 0;
     right: auto;
diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss
index bfbb907e0..19ce0ab8f 100644
--- a/app/javascript/styles/mastodon/stream_entries.scss
+++ b/app/javascript/styles/mastodon/stream_entries.scss
@@ -4,6 +4,10 @@
   overflow: hidden;
   margin-bottom: 10px;
 
+  &--under-tabs {
+    border-radius: 0 0 4px 4px;
+  }
+
   @media screen and (max-width: $no-gap-breakpoint) {
     margin-bottom: 0;
     border-radius: 0;