3 files changed, 99 insertions, 42 deletions

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index fe304317d..460dc53a9 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -26,20 +26,20 @@
 }
 
 .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button {
-  color: $ui-base-color;
+  color: lighten($white, 7%);
 
   &:active,
   &:focus,
   &:hover {
-    color: darken($ui-base-color, 7%);
+    color: $white;
   }
 }
 
 .compose-form .compose-form__modifiers .compose-form__upload-description input {
-  color: $ui-base-color;
+  color: lighten($white, 7%);
 
   &::placeholder {
-    color: $ui-base-color;
+    color: lighten($white, 7%);
   }
 }
 
@@ -100,7 +100,7 @@
 .dropdown-menu__item {
   a {
     background: $ui-base-color;
-    color: $ui-secondary-color;
+    color: $darker-text-color;
   }
 }
 
@@ -189,17 +189,18 @@
 // Change the default colors used on some parts of the profile pages
 .activity-stream-tabs {
   background: $account-background-color;
-
-  a {
-    &.active {
-      color: $ui-primary-color;
-    }
-  }
+  border-bottom-color: lighten($ui-base-color, 8%);
 }
 
 .activity-stream {
   .entry {
     background: $account-background-color;
+
+    .detailed-status.light,
+    .more.light,
+    .status.light {
+      border-bottom-color: lighten($ui-base-color, 8%);
+    }
   }
 
   .status.light {
@@ -219,7 +220,7 @@
   .account-grid-card {
     .controls {
       .icon-button {
-        color: $ui-secondary-color;
+        color: $darker-text-color;
       }
     }
 
@@ -230,7 +231,7 @@
     }
 
     .username {
-      color: $ui-secondary-color;
+      color: $darker-text-color;
     }
 
     .account__header__content {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 712b6f813..a261b582b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -251,7 +251,7 @@
 
   .compose-form__warning {
     color: $inverted-text-color;
-    margin-bottom: 15px;
+    margin-bottom: 10px;
     background: $ui-primary-color;
     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
     padding: 8px 10px;
@@ -298,6 +298,19 @@
     position: relative;
   }
 
+  .spoiler-input {
+    height: 0;
+    transform-origin: bottom;
+    opacity: 0.0;
+    transition: all 0.4s ease;
+
+    &.spoiler-input--visible {
+      height: 47px;
+      opacity: 1.0;
+      transition: all 0.4s ease;
+    }
+  }
+
   .autosuggest-textarea__textarea,
   .spoiler-input__input {
     display: block;
@@ -569,9 +582,8 @@
 }
 
 .reply-indicator {
-  border-radius: 4px 4px 0 0;
-  position: relative;
-  bottom: -2px;
+  border-radius: 4px;
+  margin-bottom: 10px;
   background: $ui-primary-color;
   padding: 10px;
 }
@@ -1663,24 +1675,6 @@ a.account__display-name {
   vertical-align: middle;
 }
 
-.static-content {
-  padding: 10px;
-  padding-top: 20px;
-  color: $dark-text-color;
-
-  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;
@@ -1772,6 +1766,8 @@ a.account__display-name {
     margin-bottom: 0;
   }
 
+  .getting-started__wrapper,
+  .getting-started__trends,
   .search {
     margin-bottom: 10px;
   }
@@ -2175,25 +2171,82 @@ a.account__display-name {
 }
 
 .getting-started__wrapper,
-.getting_started {
+.getting-started,
+.flex-spacer {
   background: $ui-base-color;
 }
 
 .getting-started__wrapper {
-  position: relative;
-  overflow-y: auto;
+  flex: 0 0 auto;
+}
+
+.flex-spacer {
+  flex: 1 1 auto;
 }
 
 .getting-started {
-  background: $ui-base-color;
-  flex: 1 0 auto;
+  color: $dark-text-color;
 
   p {
-    color: $secondary-text-color;
+    color: $dark-text-color;
+    font-size: 13px;
+    margin-bottom: 20px;
+
+    a {
+      color: $dark-text-color;
+      text-decoration: underline;
+    }
   }
 
   a {
-    color: $dark-text-color;
+    text-decoration: none;
+    color: $darker-text-color;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  &__footer {
+    flex: 0 0 auto;
+    padding: 10px;
+    padding-top: 20px;
+
+    ul {
+      margin-bottom: 10px;
+    }
+
+    ul li {
+      display: inline;
+    }
+  }
+
+  &__trends {
+    background: $ui-base-color;
+    flex: 0 1 auto;
+
+    @media screen and (max-height: 810px) {
+      .trends__item:nth-child(3) {
+        display: none;
+      }
+    }
+
+    @media screen and (max-height: 720px) {
+      .trends__item:nth-child(2) {
+        display: none;
+      }
+    }
+
+    @media screen and (max-height: 670px) {
+      display: none;
+    }
+  }
+
+  &__scrollable {
+    max-height: 100%;
+    overflow-y: auto;
   }
 }
 
@@ -2420,8 +2473,10 @@ a.status-card {
   line-height: inherit;
   margin: 0;
   padding: 15px;
+  box-sizing: border-box;
   width: 100%;
   clear: both;
+  text-decoration: none;
 
   &:hover {
     background: lighten($ui-base-color, 2%);
diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss
index 982bfd990..e54c55947 100644
--- a/app/javascript/styles/mastodon/tables.scss
+++ b/app/javascript/styles/mastodon/tables.scss
@@ -195,6 +195,7 @@ a.table-action-link {
       font-weight: 700;
       background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet,orange , yellow, green, cyan, blue, violet);
       background-size: 200% 100%;
+      -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       animation: Swag 2s linear 0s infinite;