Merge tag 'v3.4.0rc2'

app/javascript/styles/mastodon-light/diff.scss

@@ -707,7 +707,6 @@ html {
   .public-account-bio,
   .hero-widget__text {
     background: $account-background-color;
-    border: 1px solid lighten($ui-base-color, 8%);
   }
 
   .header {

app/javascript/styles/mastodon/about.scss

@@ -884,3 +884,24 @@ $small-breakpoint: 960px;
   }
 }
 
+.rules-list {
+  background: darken($ui-base-color, 2%);
+  border: 1px solid darken($ui-base-color, 8%);
+  border-radius: 4px;
+  padding: 0.5em 2.5em !important;
+  margin-top: 1.85em !important;
+
+  li {
+    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    color: $dark-text-color;
+    padding: 1em;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  &__text {
+    color: $primary-text-color;
+  }
+}

app/javascript/styles/mastodon/components.scss

@@ -1307,6 +1307,29 @@
     overflow: hidden;
     text-decoration: none;
     font-size: 14px;
+
+    &--with-note {
+      strong {
+        display: inline;
+      }
+    }
+  }
+
+  &__note {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $ui-secondary-color;
+  }
+}
+
+.follow-recommendations-account {
+  .icon-button {
+    color: $ui-primary-color;
+
+    &.active {
+      color: $valid-value-color;
+    }
   }
 }
 
@@ -2459,6 +2482,65 @@ a.account__display-name {
   border-color: darken($ui-base-color, 8%);
 }
 
+.column-title {
+  text-align: center;
+  padding: 40px;
+
+  .logo {
+    fill: $primary-text-color;
+    width: 50px;
+    margin: 0 auto;
+    margin-bottom: 40px;
+  }
+
+  h3 {
+    font-size: 24px;
+    line-height: 1.5;
+    font-weight: 700;
+    margin-bottom: 10px;
+  }
+
+  p {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color: $darker-text-color;
+  }
+}
+
+.column-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  padding-top: 40px;
+  padding-bottom: 200px;
+
+  &__background {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 220px;
+    width: auto;
+  }
+}
+
+.column-list {
+  margin: 0 20px;
+  border: 1px solid lighten($ui-base-color, 8%);
+  background: darken($ui-base-color, 2%);
+  border-radius: 4px;
+
+  &__empty-message {
+    padding: 40px;
+    text-align: center;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color: $darker-text-color;
+  }
+}
+
 .compose-panel {
   width: 285px;
   margin-top: 10px;
@@ -2884,6 +2966,7 @@ a.account__display-name {
     flex: 0 0 auto;
     padding: 10px;
     padding-top: 20px;
+    z-index: 1;
 
     ul {
       margin-bottom: 10px;
@@ -4208,6 +4291,7 @@ a.status-card.compact:hover {
   border-radius: 4px;
   margin-left: 40px;
   overflow: hidden;
+  z-index: 2;
 
   &.top {
     transform-origin: 50% 100%;
@@ -4218,6 +4302,15 @@ a.status-card.compact:hover {
   }
 }
 
+.modal-root__container .privacy-dropdown {
+  flex-grow: 0;
+}
+
+.modal-root__container .privacy-dropdown__dropdown {
+  pointer-events: auto;
+  z-index: 9999;
+}
+
 .privacy-dropdown__option {
   color: $inverted-text-color;
   padding: 10px;
@@ -4461,6 +4554,7 @@ a.status-card.compact:hover {
   right: 0;
   bottom: 0;
   background: rgba($base-overlay-background, 0.7);
+  transition: background 0.5s;
 }
 
 .modal-root__container {
@@ -6675,6 +6769,17 @@ noscript {
       }
     }
 
+    .account__header__joined {
+      font-size: 14px;
+      padding: 5px 15px;
+      color: $darker-text-color;
+
+      .columns-area--mobile & {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+    }
+
     .account__header__fields {
       margin: 0;
       border-top: 1px solid lighten($ui-base-color, 12%);

app/javascript/styles/mastodon/containers.scss

@@ -445,7 +445,6 @@
     }
 
     .logo-button {
-      line-height: 36px;
       padding: 3px 15px;
     }
 

app/javascript/styles/mastodon/forms.scss

@@ -604,6 +604,12 @@ code {
     color: $valid-value-color;
   }
 
+  &.warning {
+    border: 1px solid rgba($gold-star, 0.5);
+    background: rgba($gold-star, 0.25);
+    color: $gold-star;
+  }
+
   &.alert {
     border: 1px solid rgba($error-value-color, 0.5);
     background: rgba($error-value-color, 0.1);
@@ -625,6 +631,19 @@ code {
     }
   }
 
+  &.warning a {
+    font-weight: 700;
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
   p {
     margin-bottom: 15px;
   }
@@ -681,6 +700,29 @@ code {
   }
 }
 
+.flash-message-stack {
+  margin-bottom: 30px;
+
+  .flash-message {
+    border-radius: 0;
+    margin-bottom: 0;
+    border-top-width: 0;
+
+    &:first-child {
+      border-radius: 4px 4px 0 0;
+      border-top-width: 1px;
+    }
+
+    &:last-child {
+      border-radius: 0 0 4px 4px;
+
+      &:first-child {
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
 .form-footer {
   margin-top: 30px;
   text-align: center;

app/javascript/styles/mastodon/modal.scss

@@ -12,10 +12,19 @@
   flex-direction: column;
   justify-content: flex-end;
 
-  > * {
+  > div {
     flex: 1;
     max-height: 235px;
-    background: url('../images/elephant_ui_plane.svg') no-repeat left bottom / contain;
+    position: relative;
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+      height: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
   }
 }
 

app/javascript/styles/mastodon/statuses.scss

@@ -83,7 +83,7 @@
   background: $ui-highlight-color;
   color: $primary-text-color;
   text-transform: none;
-  line-height: 16px;
+  line-height: 1.2;
   height: auto;
   min-height: 36px;
   min-width: 88px;
@@ -131,6 +131,12 @@
   }
 }
 
+a.button.logo-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .embed,
 .public-layout {
   .status__content[data-spoiler=folded] {