Enable CodeClimate SCSS Lint checks (#2886)

* add scss_lint to Gemfile

* add .scss-lint.yml

* fix warnings of scss-lint

* chmod -x styles/variables.scss

* Enable CodeClimate SCSS Lint checks

15 files changed, 503 insertions, 124 deletions

diff --git a/.codeclimate.yml b/.codeclimate.yml
index 5ad9a7192..29701a777 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -9,10 +9,13 @@ engines:
     enabled: true
   rubocop:
     enabled: true
+  scss-lint:
+    enabled: true
 ratings:
   paths:
   - "**.rb"
   - "**.js"
+  - "**.scss"
 exclude_paths:
 - spec/
 - vendor/asset
diff --git a/.scss-lint.yml b/.scss-lint.yml
new file mode 100644
index 000000000..5d7cc4da5
--- /dev/null
+++ b/.scss-lint.yml
@@ -0,0 +1,264 @@
+# Linter Documentation:
+# https://github.com/brigade/scss-lint/blob/v0.42.2/lib/scss_lint/linter/README.md
+
+scss_files: 'app/javascript/styles/**/*.scss'
+
+exclude:
+  - app/javascript/styles/reset.scss
+
+linters:
+  # Reports when you use improper spacing around ! (the "bang") in !default,
+  # !global, !important, and !optional flags.
+  BangFormat:
+    enabled: false
+
+  # Whether or not to prefer `border: 0` over `border: none`.
+  BorderZero:
+    enabled: false
+
+  # Reports when you define a rule set using a selector with chained classes
+  # (a.k.a. adjoining classes).
+  ChainedClasses:
+    enabled: false
+
+  # Prefer hexadecimal color codes over color keywords.
+  # (e.g. `color: green` is a color keyword)
+  ColorKeyword:
+    enabled: false
+
+  # Prefer color literals (keywords or hexadecimal codes) to be used only in
+  # variable declarations. They should be referred to via variables everywhere
+  # else.
+  ColorVariable:
+    enabled: true
+
+  # Which form of comments to prefer in CSS.
+  Comment:
+    enabled: false
+
+  # Reports @debug statements (which you probably left behind accidentally).
+  DebugStatement:
+    enabled: false
+
+  # Rule sets should be ordered as follows:
+  # - @extend declarations
+  # - @include declarations without inner @content
+  # - properties, @include declarations with inner @content
+  # - nested rule sets.
+  DeclarationOrder:
+    enabled: false
+
+  # `scss-lint:disable` control comments should be preceded by a comment
+  # explaining why these linters are being disabled for this file.
+  # See https://github.com/brigade/scss-lint#disabling-linters-via-source for
+  # more information.
+  DisableLinterReason:
+    enabled: true
+
+  # Reports when you define the same property twice in a single rule set.
+  DuplicateProperty:
+    enabled: false
+
+  # Separate rule, function, and mixin declarations with empty lines.
+  EmptyLineBetweenBlocks:
+    enabled: true
+
+  # Reports when you have an empty rule set.
+  EmptyRule:
+    enabled: true
+
+  # Reports when you have an @extend directive.
+  ExtendDirective:
+    enabled: false
+
+  # Files should always have a final newline. This results in better diffs
+  # when adding lines to the file, since SCM systems such as git won't
+  # think that you touched the last line.
+  FinalNewline:
+    enabled: false
+
+  # HEX colors should use three-character values where possible.
+  HexLength:
+    enabled: false
+
+  # HEX color values should use lower-case colors to differentiate between
+  # letters and numbers, e.g. `#E3E3E3` vs. `#e3e3e3`.
+  HexNotation:
+    enabled: true
+
+  # Avoid using ID selectors.
+  IdSelector:
+    enabled: false
+
+  # The basenames of @imported SCSS partials should not begin with an
+  # underscore and should not include the filename extension.
+  ImportPath:
+    enabled: false
+
+  # Avoid using !important in properties. It is usually indicative of a
+  # misunderstanding of CSS specificity and can lead to brittle code.
+  ImportantRule:
+    enabled: false
+
+  # Indentation should always be done in increments of 2 spaces.
+  Indentation:
+    enabled: true
+    width: 2
+
+  # Don't write leading zeros for numeric values with a decimal point.
+  LeadingZero:
+    enabled: false
+
+  # Reports when you define the same selector twice in a single sheet.
+  MergeableSelector:
+    enabled: false
+
+  # Functions, mixins, variables, and placeholders should be declared
+  # with all lowercase letters and hyphens instead of underscores.
+  NameFormat:
+    enabled: false
+
+  # Avoid nesting selectors too deeply.
+  NestingDepth:
+    enabled: false
+
+  # Always use placeholder selectors in @extend.
+  PlaceholderInExtend:
+    enabled: false
+
+  # Sort properties in a strict order.
+  PropertySortOrder:
+    enabled: false
+
+  # Reports when you use an unknown or disabled CSS property
+  # (ignoring vendor-prefixed properties).
+  PropertySpelling:
+    enabled: false
+
+  # Configure which units are allowed for property values.
+  PropertyUnits:
+    enabled: false
+
+  # Pseudo-elements, like ::before, and ::first-letter, should be declared
+  # with two colons. Pseudo-classes, like :hover and :first-child, should
+  # be declared with one colon.
+  PseudoElement:
+    enabled: true
+
+  # Avoid qualifying elements in selectors (also known as "tag-qualifying").
+  QualifyingElement:
+    enabled: false
+
+  # Don't write selectors with a depth of applicability greater than 3.
+  SelectorDepth:
+    enabled: false
+
+  # Selectors should always use hyphenated-lowercase, rather than camelCase or
+  # snake_case.
+  SelectorFormat:
+    enabled: false
+    convention: hyphenated_lowercase
+
+  # Prefer the shortest shorthand form possible for properties that support it.
+  Shorthand:
+    enabled: true
+
+  # Each property should have its own line, except in the special case of
+  # single line rulesets.
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  # Split selectors onto separate lines after each comma, and have each
+  # individual selector occupy a single line.
+  SingleLinePerSelector:
+    enabled: true
+
+  # Commas in lists should be followed by a space.
+  SpaceAfterComma:
+    enabled: false
+
+  # Properties should be formatted with a single space separating the colon
+  # from the property's value.
+  SpaceAfterPropertyColon:
+    enabled: true
+
+  # Properties should be formatted with no space between the name and the
+  # colon.
+  SpaceAfterPropertyName:
+    enabled: true
+
+  # Variables should be formatted with a single space separating the colon
+  # from the variable's value.
+  SpaceAfterVariableColon:
+    enabled: true
+
+  # Variables should be formatted with no space between the name and the
+  # colon.
+  SpaceAfterVariableName:
+    enabled: false
+
+  # Operators should be formatted with a single space on both sides of an
+  # infix operator.
+  SpaceAroundOperator:
+    enabled: true
+
+  # Opening braces should be preceded by a single space.
+  SpaceBeforeBrace:
+    enabled: true
+
+  # Parentheses should not be padded with spaces.
+  SpaceBetweenParens:
+    enabled: false
+
+  # Enforces that string literals should be written with a consistent form
+  # of quotes (single or double).
+  StringQuotes:
+    enabled: false
+
+  # Property values, @extend, @include, and @import directives, and variable
+  # declarations should always end with a semicolon.
+  TrailingSemicolon:
+    enabled: true
+
+  # Reports lines containing trailing whitespace.
+  TrailingWhitespace:
+    enabled: true
+
+  # Don't write trailing zeros for numeric values with a decimal point.
+  TrailingZero:
+    enabled: false
+
+  # Don't use the `all` keyword to specify transition properties.
+  TransitionAll:
+    enabled: false
+
+  # Numeric values should not contain unnecessary fractional portions.
+  UnnecessaryMantissa:
+    enabled: false
+
+  # Do not use parent selector references (&) when they would otherwise
+  # be unnecessary.
+  UnnecessaryParentReference:
+    enabled: false
+
+  # URLs should be valid and not contain protocols or domain names.
+  UrlFormat:
+    enabled: true
+
+  # URLs should always be enclosed within quotes.
+  UrlQuotes:
+    enabled: true
+
+  # Properties, like color and font, are easier to read and maintain
+  # when defined using variables rather than literals.
+  VariableForProperty:
+    enabled: false
+
+  # Avoid vendor prefixes. Or rather: don't write them yourself.
+  VendorPrefix:
+    enabled: false
+
+  # Omit length units on zero values, e.g. `0px` vs. `0`.
+  ZeroUnit:
+    enabled: true
diff --git a/Gemfile b/Gemfile
index ff8e8a3d1..7a2a16c3a 100644
--- a/Gemfile
+++ b/Gemfile
@@ -88,6 +88,7 @@ group :development do
   gem 'rubocop', '0.46.0', require: false
   gem 'brakeman', '~> 3.6.0', require: false
   gem 'bundler-audit', '~> 0.4.0', require: false
+  gem 'scss_lint', '0.42.2', require: false
 
   gem 'capistrano', '3.8.0'
   gem 'capistrano-rails'
diff --git a/Gemfile.lock b/Gemfile.lock
index 99f07bc12..0c9c15e52 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -392,6 +392,10 @@ GEM
       crass (~> 1.0.2)
       nokogiri (>= 1.4.4)
       nokogumbo (~> 1.4.1)
+    sass (3.4.23)
+    scss_lint (0.42.2)
+      rainbow (~> 2.0)
+      sass (~> 3.4.15)
     sidekiq (5.0.0)
       concurrent-ruby (~> 1.0)
       connection_pool (~> 2.2, >= 2.2.0)
@@ -534,6 +538,7 @@ DEPENDENCIES
   rubocop (= 0.46.0)
   ruby-oembed
   sanitize
+  scss_lint (= 0.42.2)
   sidekiq
   sidekiq-scheduler
   sidekiq-unique-jobs
diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss
index c87452996..b5626551e 100644
--- a/app/javascript/styles/about.scss
+++ b/app/javascript/styles/about.scss
@@ -44,7 +44,8 @@
     color: $color2;
   }
 
-  ul, ol {
+  ul,
+  ol {
     list-style: inherit;
     margin-left: 20px;
 
@@ -57,11 +58,13 @@
     }
   }
 
-  li > ol, li > ul {
+  li > ol,
+  li > ul {
     margin-top: 20px;
   }
 
-  p, li {
+  p,
+  li {
     font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
     font-weight: 400;
     margin-bottom: 12px;
@@ -74,7 +77,7 @@
 
   em {
     display: inline-block;
-    padding: 7px 7px 5px 7px;
+    padding: 7px 7px 5px;
     margin: 0 2px;
     background: $color3;
     color: $color1;
@@ -134,7 +137,8 @@
     text-align: right;
     font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
 
-    span, strong {
+    span,
+    strong {
       display: block;
     }
 
@@ -333,7 +337,8 @@
     }
   }
 
-  .simple_form, .closed-registrations-message {
+  .simple_form,
+  .closed-registrations-message {
     width: 300px;
     flex: 0 0 auto;
     background: rgba(darken($color1, 7%), 0.5);
@@ -359,7 +364,8 @@
       display: none;
     }
 
-    .simple_form, .closed-registrations-message {
+    .simple_form,
+    .closed-registrations-message {
       flex: auto;
     }
   }
diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss
index 99af9c982..e1fa28f43 100644
--- a/app/javascript/styles/accounts.scss
+++ b/app/javascript/styles/accounts.scss
@@ -13,7 +13,7 @@
     box-shadow: none;
   }
 
-  &:after {
+  &::after {
     background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8));
     display: block;
     content: "";
@@ -83,7 +83,7 @@
   .counter {
     width: 80px;
     color: $color3;
-    padding: 5px 10px 0px;
+    padding: 5px 10px 0;
     margin-bottom: 10px;
     border-right: 1px solid $color3;
     cursor: default;
@@ -93,7 +93,7 @@
       display: block;
     }
 
-    &:after {
+    &::after {
       display: block;
       content: "";
       position: absolute;
@@ -106,14 +106,14 @@
     }
 
     &.active {
-      &:after {
+      &::after {
         border-bottom: 4px solid $color4;
         opacity: 1;
       }
     }
 
     &:hover {
-      &:after {
+      &::after {
         opacity: 1;
         transition-duration: 0.2s;
       }
@@ -173,7 +173,12 @@
   text-align: center;
   overflow: hidden;
 
-  a, .current, .next, .prev, .page, .gap {
+  a,
+  .current,
+  .next,
+  .prev,
+  .page,
+  .gap {
     font-size: 14px;
     color: $color5;
     font-weight: 500;
@@ -194,7 +199,8 @@
     cursor: default;
   }
 
-  .prev, .next {
+  .prev,
+  .next {
     text-transform: uppercase;
     color: $color2;
   }
@@ -227,11 +233,16 @@
   @media screen and (max-width: 360px) {
     padding: 30px 20px;
 
-    a, .current, .next, .prev, .gap {
+    a,
+    .current,
+    .next,
+    .prev,
+    .gap {
       display: none;
     }
 
-    .next, .prev {
+    .next,
+    .prev {
       display: inline-block;
     }
   }
diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss
index 6d246ded2..3442464e7 100644
--- a/app/javascript/styles/admin.scss
+++ b/app/javascript/styles/admin.scss
@@ -16,7 +16,7 @@
     height: 100%;
     padding: 0;
     overflow-y: auto;
-    
+
     .logo {
       display: block;
       margin: 40px auto;
@@ -50,7 +50,7 @@
 
         &.selected {
           background: darken($color1, 2%);
-          border-radius: 4px 0 0 0;
+          border-radius: 4px 0 0;
         }
       }
 
@@ -118,10 +118,12 @@
 
   .simple_form {
     max-width: 400px;
+
     .label_input {
       label.select {
         width: 50%;
       }
+
       select {
         width: 50%;
         float: right;
@@ -134,7 +136,8 @@
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 
-    .sidebar-wrapper, .content-wrapper {
+    .sidebar-wrapper,
+    .content-wrapper {
       flex: 0 0 auto;
       height: auto;
       overflow: initial;
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 17a4e09d4..8e9286572 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1,8 +1,8 @@
 @import 'variables';
 
 .app-body {
- -webkit-overflow-scrolling: touch;
- -ms-overflow-style: -ms-autohiding-scrollbar;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 
 .button {
@@ -91,7 +91,9 @@
   cursor: pointer;
   transition: color 100ms ease-in;
 
-  &:hover, &:active, &:focus {
+  &:hover,
+  &:active,
+  &:focus {
     color: lighten($color1, 33%);
     transition: color 200ms ease-out;
   }
@@ -109,14 +111,18 @@
     border: 0;
   }
 
-  &::-moz-focus-inner, &:focus, &:active {
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
     outline: 0 !important;
   }
 
   &.inverted {
     color: lighten($color1, 33%);
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
       color: lighten($color1, 26%);
     }
 
@@ -154,7 +160,9 @@
   outline: 0;
   transition: color 100ms ease-in;
 
-  &:hover, &:active, &:focus {
+  &:hover,
+  &:active,
+  &:focus {
     color: lighten($color1, 26%);
     transition: color 200ms ease-out;
   }
@@ -172,7 +180,9 @@
     border: 0;
   }
 
-  &::-moz-focus-inner, &:focus, &:active {
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
     outline: 0 !important;
   }
 }
@@ -181,15 +191,15 @@
   color: $color4;
 }
 
-.dropdown--active:after {
+.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;
+  border-width: 0 4.5px 7.8px;
+  border-color: transparent transparent $color2;
   bottom: 8px;
   right: 104px;
 }
@@ -202,7 +212,7 @@
 }
 
 .ellipsis {
-  &:after {
+  &::after {
     content: "…";
   }
 }
@@ -235,7 +245,9 @@
     font-weight: 500;
     text-decoration: underline;
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
       text-decoration: none;
     }
   }
@@ -246,7 +258,7 @@
   font-family: inherit;
   font-size: 14px;
   background: $color5;
-  border-radius: 0 0 4px 0;
+  border-radius: 0 0 4px;
 }
 
 .compose-form__buttons-wrapper {
@@ -320,7 +332,8 @@
   }
 }
 
-.compose-form__textarea, .follow-form__input {
+.compose-form__textarea,
+.follow-form__input {
   background: $color5;
 
   &:disabled {
@@ -331,8 +344,8 @@
 .compose-form__autosuggest-wrapper {
   position: relative;
 
-  .dropdown--active:after {
-    border-color: transparent transparent $color5 transparent;
+  .dropdown--active::after {
+    border-color: transparent transparent $color5;
     bottom: -1px;
     right: 8px;
   }
@@ -467,7 +480,7 @@ a.status__content__spoiler-link {
   color: lighten($color1, 8%);
   font-weight: 500;
   font-size: 11px;
-  padding: 0px 6px;
+  padding: 0 6px;
   text-transform: uppercase;
   line-height: inherit;
 }
@@ -784,7 +797,7 @@ a.status__content__spoiler-link {
       right: initial;
     }
 
-    &:after {
+    &::after {
       bottom: initial;
       margin-left: 11px;
       margin-top: -7px;
@@ -964,12 +977,12 @@ a.status__content__spoiler-link {
   position: absolute;
 
   .star-icon {
-    color: #ca8f04;
+    color: $color10;
   }
 }
 
 .star-icon.active {
-  color: #ca8f04;
+  color: $color10;
 }
 
 .notification__display-name {
@@ -1006,7 +1019,8 @@ a.status__content__spoiler-link {
   }
 }
 
-.transparent-background, .imageloader {
+.transparent-background,
+.imageloader {
   background: url('../images/void.png');
 }
 
@@ -1140,7 +1154,7 @@ a.status__content__spoiler-link {
   flex-direction: row;
   justify-content: flex-start;
   overflow-x: auto;
-  position:   relative;
+  position: relative;
 }
 
 @media screen and (min-width: 360px) {
@@ -1190,7 +1204,8 @@ a.status__content__spoiler-link {
   border-bottom: 2px solid transparent;
 }
 
-.column, .drawer {
+.column,
+.drawer {
   flex: 1 1 100%;
   overflow: hidden;
 }
@@ -1207,7 +1222,8 @@ a.status__content__spoiler-link {
 }
 
 @media screen and (max-width: 1024px) {
-  .column, .drawer {
+  .column,
+  .drawer {
     width: 100%;
     padding: 0;
   }
@@ -1216,7 +1232,8 @@ a.status__content__spoiler-link {
     flex-direction: column;
   }
 
-  .search__input, .autosuggest-textarea__textarea {
+  .search__input,
+  .autosuggest-textarea__textarea {
     font-size: 16px;
   }
 }
@@ -1226,7 +1243,8 @@ a.status__content__spoiler-link {
     padding: 0;
   }
 
-  .column, .drawer {
+  .column,
+  .drawer {
     flex: 0 0 auto;
     padding: 10px;
     padding-left: 5px;
@@ -1242,7 +1260,8 @@ a.status__content__spoiler-link {
   }
 
   .columns-area > div {
-    .column, .drawer {
+    .column,
+    .drawer {
       padding-left: 5px;
       padding-right: 5px;
     }
@@ -1257,7 +1276,8 @@ a.status__content__spoiler-link {
 }
 
 @media screen and (min-width: 1900px) {
-  .column, .drawer {
+  .column,
+  .drawer {
     width: 400px;
     border-radius: 4px;
     height: 96vh;
@@ -1346,7 +1366,9 @@ a.status__content__spoiler-link {
     color: $color4;
   }
 
-  &:hover, &:focus, &:active {
+  &:hover,
+  &:focus,
+  &:active {
     background: lighten($color1, 14%);
     transition: all 100ms linear;
   }
@@ -1508,8 +1530,8 @@ a.status__content__spoiler-link {
   position: absolute;
   width: 14px;
   height: 10px;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   margin-top: auto;
   margin-bottom: auto;
   line-height: 0;
@@ -1527,8 +1549,8 @@ a.status__content__spoiler-link {
   position: absolute;
   width: 10px;
   height: 10px;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   margin-top: auto;
   margin-bottom: auto;
   line-height: 0;
@@ -1696,7 +1718,7 @@ a.status__content__spoiler-link {
 }
 
 .character-counter--over {
-  color: #ff5050;
+  color: $color9;
 }
 
 .getting-started__wrapper {
@@ -1706,7 +1728,7 @@ a.status__content__spoiler-link {
 .getting-started {
   box-sizing: border-box;
   padding-bottom: 235px;
-  background: url('../images/mastodon-getting-started.png') no-repeat 0 100%/contain local;
+  background: url('../images/mastodon-getting-started.png') no-repeat 0 100% / contain local;
   flex: 1 0 auto;
 
   p {
@@ -1727,10 +1749,11 @@ a.status__content__spoiler-link {
   display: block;
   font-family: inherit;
   margin-bottom: 10px;
-  padding: 7px 0px;
+  padding: 7px 0;
   width: 100%;
 
-  &:focus, &:active {
+  &:focus,
+  &:active {
     color: $color5;
     border-bottom-color: $color4;
   }
@@ -1776,7 +1799,9 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.status-card-video, .status-card-rich, .status-card-photo {
+.status-card-video,
+.status-card-rich,
+.status-card-photo {
   margin-top: 14px;
   overflow: hidden;
 
@@ -1850,7 +1875,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .status-card__image-image {
-  border-radius: 4px 0px 0px 4px;
+  border-radius: 4px 0 0 4px;
   display: block;
   height: auto;
   margin: 0;
@@ -1913,7 +1938,8 @@ button.icon-button.active i.fa-retweet {
     }
   }
 
-  &:focus, &:active {
+  &:focus,
+  &:active {
     outline: 0;
   }
 }
@@ -1989,7 +2015,7 @@ button.icon-button.active i.fa-retweet {
 .spoiler-button {
   left: 4px;
   position: absolute;
-  text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+  text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
   top: 4px;
   z-index: 100;
 }
@@ -2004,7 +2030,7 @@ button.icon-button.active i.fa-retweet {
   border-bottom: 1px solid lighten($color1, 8%);
   display: flex;
   flex-direction: row;
-  padding: 10px 0px;
+  padding: 10px 0;
 }
 
 .account--panel__button,
@@ -2028,7 +2054,7 @@ button.icon-button.active i.fa-retweet {
 
 .modal-container__nav {
   align-items: center;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba($color8, 0.5);
   box-sizing: border-box;
   color: $color5;
   cursor: pointer;
@@ -2111,7 +2137,8 @@ button.icon-button.active i.fa-retweet {
   resize: vertical;
   width: 100%;
 
-  &:active, &:focus {
+  &:active,
+  &:focus {
     border-bottom-color: $color4;
     background: rgba($color8, 0.1);
   }
@@ -2148,7 +2175,8 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.status-list__unread-indicator, .notifications__unread-indicator {
+.status-list__unread-indicator,
+.notifications__unread-indicator {
   position: absolute;
   top: 35px;
   left: 0;
@@ -2165,6 +2193,7 @@ button.icon-button.active i.fa-retweet {
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0.5;
   }
@@ -2212,14 +2241,16 @@ button.icon-button.active i.fa-retweet {
         height: 18px;
       }
 
-      img, svg {
+      img,
+      svg {
         width: 18px;
         height: 18px;
         filter: grayscale(100%);
       }
 
       &:hover {
-        img, svg {
+        img,
+        svg {
           filter: grayscale(0);
         }
       }
@@ -2227,7 +2258,8 @@ button.icon-button.active i.fa-retweet {
       &.active {
         border-bottom-color: $color4;
 
-        img, svg {
+        img,
+        svg {
           filter: grayscale(0);
         }
       }
@@ -2295,7 +2327,7 @@ button.icon-button.active i.fa-retweet {
       position: relative;
       cursor: pointer;
 
-      &.active:after {
+      &.active::after {
         content: "";
         display: block;
         position: absolute;
@@ -2340,14 +2372,16 @@ button.icon-button.active i.fa-retweet {
   }
 
   .emoji-row .emoji {
-    img, svg {
+    img,
+    svg {
       transition: transform 60ms ease-in-out;
     }
 
     &:hover {
       background: lighten($color2, 3%);
 
-      img, svg {
+      img,
+      svg {
         transform: translateZ(0) scale(1.2);
       }
     }
@@ -2460,7 +2494,8 @@ button.icon-button.active i.fa-retweet {
 .emoji-button {
   outline: 0;
 
-  &:active, &:focus {
+  &:active,
+  &:focus {
     outline: 0 !important;
   }
 
@@ -2474,7 +2509,9 @@ button.icon-button.active i.fa-retweet {
     margin-top: 2px;
   }
 
-  &:hover, &:active, &:focus {
+  &:hover,
+  &:active,
+  &:focus {
     img {
       opacity: 1;
       filter: none;
@@ -2498,7 +2535,7 @@ button.icon-button.active i.fa-retweet {
   top: 27px;
   width: 230px;
   background: $color5;
-  border-radius: 0 4px 4px 4px;
+  border-radius: 0 4px 4px;
   z-index: 2;
   overflow: hidden;
 }
@@ -2509,7 +2546,8 @@ button.icon-button.active i.fa-retweet {
   cursor: pointer;
   display: flex;
 
-  &:hover, &.active {
+  &:hover,
+  &.active {
     background: $color4;
     color: $color5;
 
@@ -2582,7 +2620,9 @@ button.icon-button.active i.fa-retweet {
     border: 0;
   }
 
-  &::-moz-focus-inner, &:focus, &:active {
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
     outline: 0 !important;
   }
 
@@ -2656,7 +2696,9 @@ button.icon-button.active i.fa-retweet {
   color: $color2;
   text-decoration: none;
 
-  &:hover, &:active, &:focus {
+  &:hover,
+  &:active,
+  &:focus {
     color: lighten($color2, 4%);
     text-decoration: underline;
   }
@@ -2671,7 +2713,7 @@ button.icon-button.active i.fa-retweet {
   z-index: 9999;
   opacity: 0;
   background: rgba($color8, 0.7);
-  transform: translateZ(0px);
+  transform: translateZ(0);
 }
 
 .modal-root__container {
@@ -2702,7 +2744,8 @@ button.icon-button.active i.fa-retweet {
   max-height: 80vh;
   position: relative;
 
-  img, video {
+  img,
+  video {
     max-width: 80vw;
     max-height: 80vh;
   }
@@ -2781,11 +2824,14 @@ button.icon-button.active i.fa-retweet {
     font-size: 14px;
     font-weight: 500;
 
-    &:hover, &:focus, &:active {
+    &:hover,
+    &:focus,
+    &:active {
       color: darken($color2, 38%);
     }
 
-    &.onboarding-modal__done, &.onboarding-modal__next {
+    &.onboarding-modal__done,
+    &.onboarding-modal__next {
       color: $color4;
     }
   }
@@ -2830,7 +2876,9 @@ button.icon-button.active i.fa-retweet {
   a {
     color: $color4;
 
-    &:hover, &:focus, &:active {
+    &:hover,
+    &:focus,
+    &:active {
       color: lighten($color4, 4%);
     }
   }
@@ -2861,7 +2909,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .onboarding-modal__page-one__elephant-friend {
-  background: url('../images/elephant-friend.png') no-repeat center center/contain;
+  background: url('../images/elephant-friend.png') no-repeat center center / contain;
   width: 147px;
   height: 160px;
   margin-right: 10px;
@@ -2983,7 +3031,8 @@ button.icon-button.active i.fa-retweet {
   margin-left: 10px;
 }
 
-.boost-modal, .confirmation-modal {
+.boost-modal,
+.confirmation-modal {
   background: lighten($color2, 8%);
   color: $color1;
   border-radius: 8px;
@@ -3018,7 +3067,8 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.boost-modal__action-bar, .confirmation-modal__action-bar {
+.boost-modal__action-bar,
+.confirmation-modal__action-bar {
   display: flex;
   background: $color2;
   padding: 10px;
@@ -3065,7 +3115,9 @@ button.icon-button.active i.fa-retweet {
     font-size: 14px;
     font-weight: 500;
 
-    &:hover, &:focus, &:active {
+    &:hover,
+    &:focus,
+    &:active {
       color: darken($color2, 38%);
     }
   }
@@ -3226,7 +3278,7 @@ button.icon-button.active i.fa-retweet {
 
 /* Status Video Player */
 .status__video-player {
-  background: #000;
+  background: $color8;
   box-sizing: border-box;
   cursor: default; /* May not be needed */
   margin-top: 8px;
@@ -3246,18 +3298,18 @@ button.icon-button.active i.fa-retweet {
 
 .status__video-player-expand,
 .status__video-player-mute {
-  color: #fff;
+  color: $color5;
   opacity: 0.8;
   position: absolute;
   right: 4px;
-  text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+  text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
 }
 
 .status__video-player-spoiler {
-  color: #fff;
+  color: $color5;
   left: 4px;
   position: absolute;
-  text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+  text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
   top: 4px;
   z-index: 100;
 }
@@ -3281,7 +3333,7 @@ button.icon-button.active i.fa-retweet {
 
 .media-spoiler-video-play-icon {
   border-radius: 100px;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba($color5, 0.8);
   font-size: 36px;
   left: 50%;
   padding: 5px;
diff --git a/app/javascript/styles/footer.scss b/app/javascript/styles/footer.scss
index 07ecb5e75..90d430dfa 100644
--- a/app/javascript/styles/footer.scss
+++ b/app/javascript/styles/footer.scss
@@ -13,7 +13,8 @@
     }
   }
 
-  .powered-by, .single-user-login {
+  .powered-by,
+  .single-user-login {
     font-weight: 400;
 
     a {
diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss
index 70c049a4b..20d28acb6 100644
--- a/app/javascript/styles/forms.scss
+++ b/app/javascript/styles/forms.scss
@@ -42,7 +42,9 @@ code {
     }
   }
 
-  .input.file, .input.select, .input.radio_buttons {
+  .input.file,
+  .input.select,
+  .input.radio_buttons {
     padding: 15px 0;
     margin-bottom: 0;
 
@@ -63,7 +65,7 @@ code {
     margin-bottom: 5px;
     font-family: inherit;
     font-size: 14px;
-    color: white;
+    color: $color5;
     display: block;
     width: auto;
   }
@@ -74,7 +76,7 @@ code {
     label {
       font-family: inherit;
       font-size: 14px;
-      color: white;
+      color: $color5;
       display: block;
       width: auto;
     }
@@ -86,8 +88,8 @@ code {
     }
 
     input[type=checkbox] {
-	    position: absolute;
-	    left: 0;
+      position: absolute;
+      left: 0;
       top: 1px;
       margin: 0;
     }
@@ -98,7 +100,11 @@ code {
     }
   }
 
-  input[type=text], input[type=number], input[type=email], input[type=password], textarea {
+  input[type=text],
+  input[type=number],
+  input[type=email],
+  input[type=password],
+  textarea {
     background: transparent;
     box-sizing: border-box;
     border: 0;
@@ -125,7 +131,8 @@ code {
       border-bottom-color: $color7;
     }
 
-    &:active, &:focus {
+    &:active,
+    &:focus {
       border-bottom-color: $color4;
       background: rgba($color8, 0.1);
     }
@@ -136,7 +143,9 @@ code {
       color: $color6;
     }
 
-    input[type=text], input[type=email], input[type=password] {
+    input[type=text],
+    input[type=email],
+    input[type=password] {
       border-bottom-color: $color6;
     }
 
@@ -152,7 +161,8 @@ code {
     margin-top: 30px;
   }
 
-  button, .block-button {
+  button,
+  .block-button {
     display: block;
     width: 100%;
     border: 0;
@@ -174,7 +184,8 @@ code {
       background-color: lighten($color4, 5%);
     }
 
-    &:active, &:focus {
+    &:active,
+    &:focus {
       position: relative;
       top: 1px;
       background-color: darken($color4, 5%);
@@ -187,7 +198,8 @@ code {
         background-color: lighten($color6, 5%);
       }
 
-      &:active, &:focus {
+      &:active,
+      &:focus {
         background-color: darken($color6, 5%);
       }
     }
@@ -226,7 +238,8 @@ code {
   }
 }
 
-.oauth-prompt, .follow-prompt {
+.oauth-prompt,
+.follow-prompt {
   margin-bottom: 30px;
   text-align: center;
   color: $color3;
@@ -248,7 +261,7 @@ code {
 
 .qr-code {
   flex: 0 0 auto;
-  background: #fff;
+  background: $color5;
   padding: 4px;
   margin-bottom: 20px;
   box-shadow: 0 0 15px rgba($color8, 0.2);
@@ -295,7 +308,9 @@ code {
       color: $color5;
       text-decoration: underline;
 
-      &:hover, &:focus, &:active {
+      &:hover,
+      &:focus,
+      &:active {
         text-decoration: none;
       }
     }
@@ -316,7 +331,8 @@ code {
   display: flex;
   align-items: center;
 
-  .actions, .pagination {
+  .actions,
+  .pagination {
     flex: 1 1 auto;
   }
 
diff --git a/app/javascript/styles/landing_strip.scss b/app/javascript/styles/landing_strip.scss
index 4c2403160..077827180 100644
--- a/app/javascript/styles/landing_strip.scss
+++ b/app/javascript/styles/landing_strip.scss
@@ -6,7 +6,8 @@
   border-radius: 4px;
   margin-bottom: 20px;
 
-  strong, a {
+  strong,
+  a {
     font-weight: 500;
   }
 
diff --git a/app/javascript/styles/rtl.scss b/app/javascript/styles/rtl.scss
index 6abb2d25c..93cbd77d1 100644
--- a/app/javascript/styles/rtl.scss
+++ b/app/javascript/styles/rtl.scss
@@ -1,7 +1,8 @@
 body.rtl {
   direction: rtl;
 
-  .column-link__icon, .column-header__icon {
+  .column-link__icon,
+  .column-header__icon {
     margin-right: 0;
     margin-left: 5px;
   }
@@ -105,13 +106,15 @@ body.rtl {
     float: right;
   }
 
-  .detailed-status__favorites, .detailed-status__reblogs {
+  .detailed-status__favorites,
+  .detailed-status__reblogs {
     margin-left: 0;
     margin-right: 6px;
   }
 
   @media screen and (min-width: 1025px) {
-    .column, .drawer {
+    .column,
+    .drawer {
       padding-left: 5px;
       padding-right: 5px;
 
@@ -121,13 +124,14 @@ body.rtl {
       }
 
       &:last-child {
-        padding-right: 0px;
+        padding-right: 0;
         padding-left: 10px;
       }
     }
 
     .columns-area > div {
-      .column, .drawer {
+      .column,
+      .drawer {
         padding-left: 5px;
         padding-right: 5px;
       }
diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss
index fac4703b9..bd679f00b 100644
--- a/app/javascript/styles/stream_entries.scss
+++ b/app/javascript/styles/stream_entries.scss
@@ -5,24 +5,31 @@
   .entry {
     background: $color5;
 
-    .detailed-status.light, .status.light {
+    .detailed-status.light,
+    .status.light {
       border-bottom: 1px solid $color2;
     }
 
     &:last-child {
-      &, .detailed-status.light, .status.light {
+      &,
+      .detailed-status.light,
+      .status.light {
         border-bottom: 0;
         border-radius: 0 0 4px 4px;
       }
     }
 
     &:first-child {
-      &, .detailed-status.light, .status.light {
+      &,
+      .detailed-status.light,
+      .status.light {
         border-radius: 4px 4px 0 0;
       }
 
       &:last-child {
-        &, .detailed-status.light, .status.light {
+        &,
+        .detailed-status.light,
+        .status.light {
           border-radius: 4px;
         }
       }
@@ -30,7 +37,7 @@
   }
 
   .status.light {
-    padding: 14px 14px 14px (48px + 14px*2);
+    padding: 14px 14px 14px (48px + 14px * 2);
     position: relative;
     min-height: 48px;
     cursor: default;
@@ -232,7 +239,8 @@
     }
   }
 
-  .media-item, .video-item {
+  .media-item,
+  .video-item {
     box-sizing: border-box;
     position: relative;
     left: auto;
@@ -323,8 +331,8 @@
   }
 
   .pre-header {
-    padding: 14px 0px;
-    padding-left: (48px + 14px*2);
+    padding: 14px 0;
+    padding-left: (48px + 14px * 2);
     padding-bottom: 0;
     margin-bottom: -4px;
     color: $color3;
@@ -333,7 +341,7 @@
 
     .pre-header__icon {
       position: absolute;
-      left: (48px + 14px*2 - 30px);
+      left: (48px + 14px * 2 - 30px);
     }
 
     .status__display-name.muted strong {
diff --git a/app/javascript/styles/tables.scss b/app/javascript/styles/tables.scss
index 0568a0760..ed0ef4468 100644
--- a/app/javascript/styles/tables.scss
+++ b/app/javascript/styles/tables.scss
@@ -5,7 +5,8 @@
   border-collapse: collapse;
   margin-bottom: 20px;
 
-  th, td {
+  th,
+  td {
     padding: 8px;
     line-height: 18px;
     vertical-align: top;
@@ -24,7 +25,8 @@
     font-weight: 500;
   }
 
-  & > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th {
+  & > tbody > tr:nth-child(odd) > td,
+  & > tbody > tr:nth-child(odd) > th {
     background: $color1;
   }
 
diff --git a/app/javascript/styles/variables.scss b/app/javascript/styles/variables.scss
index 0dded90b0..76b58426a 100755..100644
--- a/app/javascript/styles/variables.scss
+++ b/app/javascript/styles/variables.scss
@@ -6,3 +6,5 @@ $color5: #ffffff !default; // white
 $color6: #df405a !default; // error red
 $color7: #79bd9a !default; // succ green
 $color8: #000000 !default; // black
+$color9: #ff5050 !default; // red
+$color10: #ca8f04 !default; // dark goldenrod