From 09ec02601bf1d66b3e162dc247221f0e329107c3 Mon Sep 17 00:00:00 2001
From: Emma Winston <emma.winston@gmail.com>
Date: Tue, 20 Aug 2019 15:28:36 +0100
Subject: [PATCH 1/4] Small changes to macaron theme

- Change hover colour for shared links to purple
- Change background colour of textbox in list editing popup to blue
- Fix bug which made a border green instead of grey when being notified of a new follower
---
 app/javascript/styles/macaron/diff.scss | 2019 +++++++++++++++++++++++
 1 file changed, 2019 insertions(+)
 create mode 100644 app/javascript/styles/macaron/diff.scss

diff --git a/app/javascript/styles/macaron/diff.scss b/app/javascript/styles/macaron/diff.scss
new file mode 100644
index 000000000..b20a6578f
--- /dev/null
+++ b/app/javascript/styles/macaron/diff.scss
@@ -0,0 +1,2019 @@
+// Notes!
+// Sass color functions, "darken" and "lighten" are automatically replaced.
+
+html {
+  scrollbar-color: $pink rgba($pink, 0.25);
+}
+
+.loading-bar
+  {
+    background-color: $green;
+  }
+
+.status__content a, .reply-indicator__content a {
+  &:hover, &:active, &:focus {
+    color: $bilberry;
+  }
+}
+
+::-webkit-scrollbar-thumb {
+    background: $pink;
+    border: 0;
+}
+
+::-webkit-scrollbar-thumb {
+    background: $pink;
+    border: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: $pink;
+    border: 0;
+}
+
+::-webkit-scrollbar-track:hover {
+    background: $green;
+}
+
+.ui {
+  background: $cream;
+}
+
+// Change the colors of button texts
+.button {
+  color: $white;
+
+  &.button-alternative-2 {
+    color: $white;
+  }
+}
+
+// Change default background colors of columns
+.column > .scrollable,
+.getting-started,
+.column-inline-form {
+  background: $white;
+  border: 1px solid lighten(#eeeeee, 4%);
+  border-top: 0;
+}
+
+.getting-started {
+  background: $green;
+  border: 1px solid lighten($green, 8%);
+}
+
+.column-back-button,
+.column-header {
+  background: #c8c4dd;
+  border: 1px solid lighten($purple, 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: $purple;
+}
+
+.column-header__button.active {
+  color: $ui-highlight-color;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $ui-highlight-color;
+    background: lighten($purple, 4%);
+  }
+}
+
+.account__header__bar .avatar .account__avatar {
+  border-color: $white;
+}
+
+.getting-started__footer a {
+  color: $ui-secondary-color;
+  text-decoration: underline;
+}
+
+.column-subheading {
+  background: $green;
+  border-bottom: 1px solid lighten($green, 8%);
+}
+
+.getting-started,
+.scrollable {
+  .column-link {
+    background: $blue;
+    border-bottom: 1px solid lighten($blue, 8%);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: lighten($blue, 8%);
+    }
+  }
+}
+
+.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(#eeeeee, 4%);
+}
+
+.poll__chart {
+  background: darken($purple, 4%)
+}
+
+.poll__chart.leading {
+  background: $pink;
+}
+
+.status {
+    border-bottom: 1px solid lighten(#eeeeee, 4%);
+}
+
+.detailed-status__action-bar {
+    border-top: 1px solid lighten($purple, 4%);
+    border-bottom: 1px solid lighten($purple, 4%);
+}
+
+.search__input {
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+    border-bottom: 0;
+  }
+
+  background: $green;
+  border: 1px solid lighten($green, 8%);
+}
+
+.search__input {
+  &:focus{
+    background: $purple;
+    border: 1px solid lighten($purple, 8%);
+  }
+}
+
+.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, .account__section-headline {
+  background: $green;
+  border: 1px solid lighten($green, 8%);
+  border-top: 0;
+}
+
+.notification__filter-bar button {
+  background: $green;
+}
+
+.compose-form .compose-form__buttons-wrapper {
+  background: $ui-base-color;
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-top: 0;
+}
+
+.drawer__inner {
+  background: $pink;
+  border: 1px solid lighten($pink, 8%);
+}
+
+.drawer__header {
+  background: $blue;
+  border: 1px solid lighten($blue, 8%);
+}
+
+.drawer__header a {
+  &:active,
+  &:focus,
+  &:hover {
+    background: lighten($blue, 4%);
+  }
+}
+
+.drawer__inner__mastodon {
+  background: $pink 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-lighter-color)}"/></svg>') no-repeat bottom / 100% auto;
+}
+
+// Change the colors used in compose-form
+.compose-form {
+  .compose-form__modifiers {
+    .compose-form__upload__actions .icon-button {
+      color: lighten($white, 7%);
+
+      &:active,
+      &:focus,
+      &:hover {
+        color: $white;
+      }
+    }
+
+    .compose-form__upload-description input {
+      color: lighten($white, 7%);
+
+      &::placeholder {
+        color: lighten($white, 7%);
+      }
+    }
+  }
+
+  .compose-form__buttons-wrapper {
+    background: darken($ui-base-color, 6%);
+  }
+
+  .autosuggest-textarea__suggestions {
+    background: darken($ui-base-color, 6%);
+  }
+
+  .autosuggest-textarea__suggestions__item {
+    &:hover,
+    &:focus,
+    &:active,
+    &.selected {
+      background: lighten($ui-base-color, 4%);
+    }
+  }
+}
+
+.account__header__tabs__buttons .icon-button {
+  border-color: lighten($purple, 8%);
+}
+
+.emoji-mart-bar {
+  border-color: lighten($ui-base-color, 4%);
+
+  &:first-child {
+    background: darken($ui-base-color, 6%);
+  }
+}
+
+.emoji-mart-search input {
+  background: rgba($ui-base-color, 0.3);
+  border-color: $ui-base-color;
+}
+
+// Change the background colors of statuses
+.focusable:focus {
+  background: darken($green, 2%);
+}
+
+.status.status-direct {
+  background: darken($ui-base-color, 2%);
+}
+
+.focusable:focus .status.status-direct {
+  background: $ui-base-color;
+}
+
+.status.status-direct:not(.read) {
+    background: $ui-base-color;
+    border-bottom-color: lighten($ui-base-color, 4%);
+}
+
+.detailed-status,
+.detailed-status__action-bar {
+  background: darken($purple, 10%);
+}
+
+.reply-indicator {
+  background: darken($purple, 8%);
+}
+
+// Change the background colors of status__content__spoiler-link
+.reply-indicator__content .status__content__spoiler-link,
+.status__content .status__content__spoiler-link {
+  background: $pink;
+
+  &:hover {
+    background: lighten($pink, 4%);
+  }
+}
+
+// Change the background colors of media and video spoilers
+.media-spoiler,
+.video-player__spoiler {
+  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: $white;
+
+  &__arrow {
+    &.left {
+      border-left-color: $white;
+    }
+
+    &.top {
+      border-top-color: $white;
+    }
+
+    &.bottom {
+      border-bottom-color: $white;
+    }
+
+    &.right {
+      border-right-color: $white;
+    }
+  }
+
+  &__item {
+    a {
+      background: $white;
+      color: $darker-text-color;
+    }
+  }
+}
+
+body.admin {
+  background: $cream;
+}
+
+.card>a:hover {
+  .card__bar {
+    background: $blue;
+  }
+}
+
+.batch-table__toolbar {
+  background: $green;
+}
+
+.batch-table__row {
+  border-top: 0;
+  border: 1px solid #fffdef;
+  background: $blue;
+}
+
+.batch-table__row:nth-child(2n) {
+  background: $green;
+}
+
+.filters .filter-subset a {
+  border-bottom: 2px solid $green;
+}
+
+.filters .filter-subset a:hover,
+.filters .filter-subset a:focus {
+  border-bottom: 2px solid lighten($green, 8%);
+}
+
+.filters .filter-subset a.selected:hover,
+.filters .filter-subset a.selected:focus {
+  border-bottom: 2px solid lighten($blueberry, 8%);
+}
+
+.table>tbody>tr:nth-child(odd)>td, .table>tbody>tr:nth-child(odd)>th {
+    background: $green;
+}
+
+.table td, .table th {
+    padding: 8px;
+    line-height: 18px;
+    vertical-align: top;
+    border-top: 1px solid $green;
+    text-align: left;
+    background: $blue;
+}
+
+.card__bar {
+  background: $purple;
+}
+
+.admin-wrapper .sidebar {
+  background: $green;
+}
+
+.admin-wrapper .content h2, .admin-wrapper .content h4 {
+  border-bottom: 1px solid #eeeeee;
+}
+
+.admin-wrapper .sidebar ul a.selected {
+  background: $purple;
+}
+
+.admin-wrapper .sidebar ul a:hover {
+  background: lighten($blue, 8%);
+}
+
+.selected ul li a {
+  background: $blue;
+}
+
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
+  background: $blueberry;
+}
+
+.dashboard__counters > div > div,
+.dashboard__counters > div > a {
+  background: $pink;
+}
+
+.dashboard__counters > div > a:hover,
+.dashboard__counters > div > a:focus {
+  background: lighten($pink, 4%);
+}
+
+// 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,
+.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
+.dropdown-menu__item a:active,
+.dropdown-menu__item a:focus,
+.dropdown-menu__item a:hover,
+.actions-modal ul li:not(:empty) a.active,
+.actions-modal ul li:not(:empty) a.active button,
+.actions-modal ul li:not(:empty) a:active,
+.actions-modal ul li:not(:empty) a:active button,
+.actions-modal ul li:not(:empty) a:focus,
+.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 .simple-navigation-active-leaf a,
+.simple_form .block-button,
+.simple_form .button,
+.simple_form button {
+  color: $white;
+}
+
+.dropdown-menu__separator {
+  border-bottom-color: lighten($ui-base-color, 4%);
+}
+
+// Change the background colors of modals
+.actions-modal,
+.boost-modal,
+.confirmation-modal,
+.mute-modal,
+.report-modal,
+.embed-modal,
+.error-modal,
+.onboarding-modal {
+  background: $ui-base-color;
+}
+
+.column-header__collapsible-inner {
+  background: darken($blue, 4%);
+  border: 1px solid lighten($blue, 8%);
+  border-top: 0;
+}
+
+.boost-modal__action-bar,
+.confirmation-modal__action-bar,
+.mute-modal__action-bar,
+.onboarding-modal__paginator,
+.error-modal__footer {
+  background: darken($ui-base-color, 6%);
+
+  .onboarding-modal__nav,
+  .error-modal__nav {
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: darken($ui-base-color, 12%);
+    }
+  }
+}
+
+.display-case__case {
+  background: $white;
+}
+
+.embed-modal .embed-modal__container .embed-modal__html {
+  background: $white;
+
+  &:focus {
+    background: darken($ui-base-color, 6%);
+  }
+}
+
+.react-toggle-track {
+  background: $ui-secondary-color;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background: darken($ui-secondary-color, 10%);
+}
+
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background: lighten($ui-highlight-color, 10%);
+}
+
+// Change the default color used for the text in an empty column or on the error column
+.empty-column-indicator,
+.error-column {
+  color: $primary-text-color;
+  background: $white;
+}
+
+.tabs-bar {
+  background: $blue;
+  border: 1px solid lighten($blue, 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($blue, 8%);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: lighten($blue,4%);
+    }
+
+    &.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%);
+}
+
+.getting-started__wrapper, .getting-started, .flex-spacer {
+  background: $purple;
+}
+
+.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(#eeeeee, 4%);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+  }
+}
+
+.directory__tag a:hover, .directory__tag a:focus {
+  background: $blue;
+  border: 1px solid lighten($blue, 4%);
+}
+
+.page-header {
+  background: $purple;
+  border: 1px solid lighten($purple, 4%);
+}
+
+.directory, .nothing-here, .directory__tag a {
+  background: $green;
+  border: 1px solid lighten($green, 4%);
+}
+
+.box-widget {
+  background: $blue;
+  border: 1px solid lighten($blue, 4%);
+}
+
+.landing__grid__column-login .box-widget {
+  background: $pink;
+  border: 1px solid lighten($pink, 4%);
+}
+
+.landing .hero-widget__text {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.simple_form {
+  input[type=text],
+  input[type=number],
+  input[type=email],
+  input[type=password],
+  select,
+  textarea {
+    border-color: $blueberry;
+    &:hover {
+      border-color: $bilberry;
+    }
+  }
+}
+
+.landing .hero-widget__footer {
+  background: $purple;
+  border: 1px solid lighten($purple, 8%);
+  border-top: 0;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border: 0;
+  }
+}
+
+.brand__tagline {
+  color: $ui-secondary-color;
+}
+
+.landing-page__call-to-action {
+  background: $purple;
+}
+
+.landing-page__information.contact-widget {
+  background: $green;
+}
+
+.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;
+
+    .detailed-status.light,
+    .more.light,
+    .status.light {
+      border-bottom-color: lighten($ui-base-color, 8%);
+    }
+  }
+
+  .status.light {
+    .status__content {
+      color: $primary-text-color;
+    }
+
+    .display-name {
+      strong {
+        color: $primary-text-color;
+      }
+    }
+  }
+}
+
+.accounts-grid {
+  .account-grid-card {
+    .controls {
+      .icon-button {
+        color: $darker-text-color;
+      }
+    }
+
+    .name {
+      a {
+        color: $primary-text-color;
+      }
+    }
+
+    .username {
+      color: $darker-text-color;
+    }
+
+    .account__header__content {
+      color: $primary-text-color;
+    }
+  }
+}
+
+.simple_form,
+.table-form {
+  .warning {
+    box-shadow: none;
+    background: rgba($error-red, 0.5);
+    text-shadow: none;
+  }
+
+  .recommended {
+    border-color: $ui-highlight-color;
+    color: $ui-highlight-color;
+    background-color: $blue;
+  }
+}
+
+.compose-form .compose-form__warning {
+  border-color: $ui-highlight-color;
+  background-color: darken($blue, 6%);
+
+  &,
+  a {
+    color: $ui-highlight-color;
+  }
+}
+
+.status__content,
+.reply-indicator__content {
+  a {
+    color: $highlight-text-color;
+  }
+}
+
+.status.status-direct {
+  background: darken($green, 6%);
+}
+
+.button.logo-button {
+  color: $white;
+
+  svg {
+    fill: $white;
+  }
+}
+
+.public-layout {
+  .activity-stream {
+    border-color: lighten(#eeeeee, 4%);
+  }
+
+  .account__section-headline {
+    background: $green;
+    border: 1px solid lighten($green, 8%);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-top: 0;
+    }
+  }
+
+  .header,
+  .public-account-header,
+  .public-account-bio {
+    box-shadow: none;
+  }
+
+  .hero-widget__text {
+    background: darken($blue, 4%);
+    border: 1px solid lighten($blue, 4%);
+  }
+
+  .public-account-bio {
+    background: $blue;
+    border: 1px solid lighten($blue, 4%);
+  }
+
+  .header {
+    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: darken($pink, 4%);
+      }
+    }
+  }
+
+  .public-account-header {
+    &__image {
+      background: lighten($ui-base-color, 12%);
+
+      &::after {
+        box-shadow: none;
+      }
+    }
+
+    &__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;
+}
+
+.hero-widget,
+.box-widget,
+.contact-widget,
+.landing-page__information.contact-widget,
+.moved-account-widget,
+.memoriam-widget,
+.activity-stream,
+.nothing-here,
+.directory__tag > a,
+.directory__tag > div,
+.card > a,
+.page-header,
+.compose-form .compose-form__warning {
+  box-shadow: none;
+}
+
+body {
+  background: $cream;
+}
+
+.public-layout .header, .public-layout .public-account-header__image {
+  background: $pink;
+  border: 1px solid lighten($pink, 8%);
+}
+
+.public-layout .header .nav-button {
+  background: darken($pink, 4%);
+
+  &:hover, &:focus {
+    background: darken($pink, 6%);
+  }
+}
+
+.public-layout .public-account-header__bar .avatar img {
+  border: 4px solid $purple;
+}
+
+.public-layout .public-account-header__bar:before {
+  background: $purple;
+}
+
+.public-layout .public-account-header__tabs__tabs .counter {
+  border-right: 1px solid lighten($purple, 8%);
+}
+
+.public-layout .public-account-header__tabs__tabs .counter::after {
+  border-bottom: 4px solid lighten($purple, 8%);
+}
+
+.public-layout .public-account-header__image {
+  background: $pink;
+}
+
+.notification__filter-bar button.active::before, .notification__filter-bar button.active::after, .notification__filter-bar a.active::before, .notification__filter-bar a.active::after, .account__section-headline button.active::before, .account__section-headline button.active::after, .account__section-headline a.active::before, .account__section-headline a.active::after {
+  border-color: transparent transparent $white;
+}
+
+.public-layout .footer .grid .column-2 h4 a,
+.public-layout .footer,
+.public-layout .footer h4,
+.public-layout .footer ul a {
+  color: $blueberry;
+}
+
+.public-layout .footer .brand svg {
+  fill: $blueberry;
+}
+
+.account__header__image {
+  background: $pink;
+}
+
+.detailed-status__wrapper {
+  background: $purple;
+}
+
+// Notes!
+// Sass color functions, "darken" and "lighten" are automatically replaced.
+
+html {
+  scrollbar-color: $pink rgba($pink, 0.25);
+}
+
+.loading-bar
+  {
+    background-color: $green;
+  }
+
+.status__content a, .reply-indicator__content a {
+  &:hover, &:active, &:focus {
+    color: $bilberry;
+  }
+}
+
+::-webkit-scrollbar-thumb {
+    background: $pink;
+    border: 0;
+}
+
+::-webkit-scrollbar-thumb {
+    background: $pink;
+    border: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: $pink;
+    border: 0;
+}
+
+::-webkit-scrollbar-track:hover {
+    background: $green;
+}
+
+.ui {
+  background: $cream;
+}
+
+// Change the colors of button texts
+.button {
+  color: $white;
+
+  &.button-alternative-2 {
+    color: $white;
+  }
+}
+
+// Change default background colors of columns
+.column > .scrollable,
+.getting-started,
+.column-inline-form {
+  background: $white;
+  border: 1px solid lighten(#eeeeee, 4%);
+  border-top: 0;
+}
+
+.getting-started {
+  background: $green;
+  border: 1px solid lighten($green, 8%);
+}
+
+.column-back-button,
+.column-header {
+  background: #c8c4dd;
+  border: 1px solid lighten($purple, 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: $purple;
+}
+
+.column-header__button.active {
+  color: $ui-highlight-color;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $ui-highlight-color;
+    background: lighten($purple, 4%);
+  }
+}
+
+.account__header__bar .avatar .account__avatar {
+  border-color: $white;
+}
+
+.getting-started__footer a {
+  color: $ui-secondary-color;
+  text-decoration: underline;
+}
+
+.column-subheading {
+  background: $green;
+  border-bottom: 1px solid lighten($green, 8%);
+}
+
+.getting-started,
+.scrollable {
+  .column-link {
+    background: $blue;
+    border-bottom: 1px solid lighten($blue, 8%);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: lighten($blue, 8%);
+    }
+  }
+}
+
+.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(#eeeeee, 4%);
+}
+
+.poll__chart {
+  background: darken($purple, 4%)
+}
+
+.poll__chart.leading {
+  background: $pink;
+}
+
+.status {
+    border-bottom: 1px solid lighten(#eeeeee, 4%);
+}
+
+.detailed-status__action-bar {
+    border-top: 1px solid lighten($purple, 4%);
+    border-bottom: 1px solid lighten($purple, 4%);
+}
+
+.search__input {
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+    border-bottom: 0;
+  }
+
+  background: $green;
+  border: 1px solid lighten($green, 8%);
+}
+
+.search__input {
+  &:focus{
+    background: $purple;
+    border: 1px solid lighten($purple, 8%);
+  }
+}
+
+.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, .account__section-headline {
+  background: $green;
+  border: 1px solid lighten($green, 8%);
+  border-top: 0;
+}
+
+.notification__filter-bar button {
+  background: $green;
+}
+
+.compose-form .compose-form__buttons-wrapper {
+  background: $ui-base-color;
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-top: 0;
+}
+
+.drawer__inner {
+  background: $pink;
+  border: 1px solid lighten($pink, 8%);
+}
+
+.drawer__header {
+  background: $blue;
+  border: 1px solid lighten($blue, 8%);
+}
+
+.drawer__header a {
+  &:active,
+  &:focus,
+  &:hover {
+    background: lighten($blue, 4%);
+  }
+}
+
+.drawer__inner__mastodon {
+  background: $pink 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-lighter-color)}"/></svg>') no-repeat bottom / 100% auto;
+}
+
+// Change the colors used in compose-form
+.compose-form {
+  .compose-form__modifiers {
+    .compose-form__upload__actions .icon-button {
+      color: lighten($white, 7%);
+
+      &:active,
+      &:focus,
+      &:hover {
+        color: $white;
+      }
+    }
+
+    .compose-form__upload-description input {
+      color: lighten($white, 7%);
+
+      &::placeholder {
+        color: lighten($white, 7%);
+      }
+    }
+  }
+
+  .compose-form__buttons-wrapper {
+    background: darken($ui-base-color, 6%);
+  }
+
+  .autosuggest-textarea__suggestions {
+    background: darken($ui-base-color, 6%);
+  }
+
+  .autosuggest-textarea__suggestions__item {
+    &:hover,
+    &:focus,
+    &:active,
+    &.selected {
+      background: lighten($ui-base-color, 4%);
+    }
+  }
+}
+
+.account__header__tabs__buttons .icon-button {
+  border-color: lighten($purple, 8%);
+}
+
+.emoji-mart-bar {
+  border-color: lighten($ui-base-color, 4%);
+
+  &:first-child {
+    background: darken($ui-base-color, 6%);
+  }
+}
+
+.emoji-mart-search input {
+  background: rgba($ui-base-color, 0.3);
+  border-color: $ui-base-color;
+}
+
+// Change the background colors of statuses
+.focusable:focus {
+  background: darken($green, 2%);
+}
+
+.status.status-direct {
+  background: darken($ui-base-color, 2%);
+}
+
+.focusable:focus .status.status-direct {
+  background: $ui-base-color;
+}
+
+.status.status-direct:not(.read) {
+    background: $ui-base-color;
+    border-bottom-color: lighten($ui-base-color, 4%);
+}
+
+.detailed-status,
+.detailed-status__action-bar {
+  background: darken($purple, 10%);
+}
+
+.reply-indicator {
+  background: darken($purple, 8%);
+}
+
+// Change the background colors of status__content__spoiler-link
+.reply-indicator__content .status__content__spoiler-link,
+.status__content .status__content__spoiler-link {
+  background: $pink;
+
+  &:hover {
+    background: lighten($pink, 4%);
+  }
+}
+
+// Change the background colors of media and video spoilers
+.media-spoiler,
+.video-player__spoiler {
+  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: $white;
+
+  &__arrow {
+    &.left {
+      border-left-color: $white;
+    }
+
+    &.top {
+      border-top-color: $white;
+    }
+
+    &.bottom {
+      border-bottom-color: $white;
+    }
+
+    &.right {
+      border-right-color: $white;
+    }
+  }
+
+  &__item {
+    a {
+      background: $white;
+      color: $darker-text-color;
+    }
+  }
+}
+
+body.admin {
+  background: $cream;
+}
+
+.card>a:hover {
+  .card__bar {
+    background: $blue;
+  }
+}
+
+.batch-table__toolbar {
+  background: $green;
+}
+
+.batch-table__row {
+  border-top: 0;
+  border: 1px solid #fffdef;
+  background: $blue;
+}
+
+.batch-table__row:nth-child(2n) {
+  background: $green;
+}
+
+.filters .filter-subset a {
+  border-bottom: 2px solid $green;
+}
+
+.filters .filter-subset a:hover,
+.filters .filter-subset a:focus {
+  border-bottom: 2px solid lighten($green, 8%);
+}
+
+.filters .filter-subset a.selected:hover,
+.filters .filter-subset a.selected:focus {
+  border-bottom: 2px solid lighten($blueberry, 8%);
+}
+
+.table>tbody>tr:nth-child(odd)>td, .table>tbody>tr:nth-child(odd)>th {
+    background: $green;
+}
+
+.table td, .table th {
+    padding: 8px;
+    line-height: 18px;
+    vertical-align: top;
+    border-top: 1px solid $green;
+    text-align: left;
+    background: $blue;
+}
+
+.card__bar {
+  background: $purple;
+}
+
+.admin-wrapper .sidebar {
+  background: $green;
+}
+
+.admin-wrapper .content h2, .admin-wrapper .content h4 {
+  border-bottom: 1px solid #eeeeee;
+}
+
+.admin-wrapper .sidebar ul a.selected {
+  background: $purple;
+}
+
+.admin-wrapper .sidebar ul a:hover {
+  background: lighten($blue, 8%);
+}
+
+.selected ul li a {
+  background: $blue;
+}
+
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
+  background: $blueberry;
+}
+
+.dashboard__counters > div > div,
+.dashboard__counters > div > a {
+  background: $pink;
+}
+
+.dashboard__counters > div > a:hover,
+.dashboard__counters > div > a:focus {
+  background: lighten($pink, 4%);
+}
+
+// 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,
+.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
+.dropdown-menu__item a:active,
+.dropdown-menu__item a:focus,
+.dropdown-menu__item a:hover,
+.actions-modal ul li:not(:empty) a.active,
+.actions-modal ul li:not(:empty) a.active button,
+.actions-modal ul li:not(:empty) a:active,
+.actions-modal ul li:not(:empty) a:active button,
+.actions-modal ul li:not(:empty) a:focus,
+.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 .simple-navigation-active-leaf a,
+.simple_form .block-button,
+.simple_form .button,
+.simple_form button {
+  color: $white;
+}
+
+.dropdown-menu__separator {
+  border-bottom-color: lighten($ui-base-color, 4%);
+}
+
+// Change the background colors of modals
+.actions-modal,
+.boost-modal,
+.confirmation-modal,
+.mute-modal,
+.report-modal,
+.embed-modal,
+.error-modal,
+.onboarding-modal {
+  background: $ui-base-color;
+}
+
+.column-header__collapsible-inner {
+  background: darken($blue, 4%);
+  border: 1px solid lighten($blue, 8%);
+  border-top: 0;
+}
+
+.boost-modal__action-bar,
+.confirmation-modal__action-bar,
+.mute-modal__action-bar,
+.onboarding-modal__paginator,
+.error-modal__footer {
+  background: darken($ui-base-color, 6%);
+
+  .onboarding-modal__nav,
+  .error-modal__nav {
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: darken($ui-base-color, 12%);
+    }
+  }
+}
+
+.display-case__case {
+  background: $white;
+}
+
+.embed-modal .embed-modal__container .embed-modal__html {
+  background: $white;
+
+  &:focus {
+    background: darken($ui-base-color, 6%);
+  }
+}
+
+.react-toggle-track {
+  background: $ui-secondary-color;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background: darken($ui-secondary-color, 10%);
+}
+
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background: lighten($ui-highlight-color, 10%);
+}
+
+// Change the default color used for the text in an empty column or on the error column
+.empty-column-indicator,
+.error-column {
+  color: $primary-text-color;
+  background: $white;
+}
+
+.tabs-bar {
+  background: $blue;
+  border: 1px solid lighten($blue, 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($blue, 8%);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: lighten($blue,4%);
+    }
+
+    &.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%);
+}
+
+.getting-started__wrapper, .getting-started, .flex-spacer {
+  background: $purple;
+}
+
+.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(#eeeeee, 4%);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+  }
+}
+
+.directory__tag a:hover, .directory__tag a:focus {
+  background: $blue;
+  border: 1px solid lighten($blue, 4%);
+}
+
+.page-header {
+  background: $purple;
+  border: 1px solid lighten($purple, 4%);
+}
+
+.directory, .nothing-here, .directory__tag a {
+  background: $green;
+  border: 1px solid lighten($green, 4%);
+}
+
+.box-widget {
+  background: $blue;
+  border: 1px solid lighten($blue, 4%);
+}
+
+.landing__grid__column-login .box-widget {
+  background: $pink;
+  border: 1px solid lighten($pink, 4%);
+}
+
+.landing .hero-widget__text {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.simple_form {
+  input[type=text],
+  input[type=number],
+  input[type=email],
+  input[type=password],
+  select,
+  textarea {
+    border-color: $blueberry;
+    &:hover {
+      border-color: $bilberry;
+    }
+  }
+}
+
+.landing .hero-widget__footer {
+  background: $purple;
+  border: 1px solid lighten($purple, 8%);
+  border-top: 0;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border: 0;
+  }
+}
+
+.brand__tagline {
+  color: $ui-secondary-color;
+}
+
+.landing-page__call-to-action {
+  background: $purple;
+}
+
+.landing-page__information.contact-widget {
+  background: $green;
+}
+
+.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;
+
+    .detailed-status.light,
+    .more.light,
+    .status.light {
+      border-bottom-color: lighten($ui-base-color, 8%);
+    }
+  }
+
+  .status.light {
+    .status__content {
+      color: $primary-text-color;
+    }
+
+    .display-name {
+      strong {
+        color: $primary-text-color;
+      }
+    }
+  }
+}
+
+.accounts-grid {
+  .account-grid-card {
+    .controls {
+      .icon-button {
+        color: $darker-text-color;
+      }
+    }
+
+    .name {
+      a {
+        color: $primary-text-color;
+      }
+    }
+
+    .username {
+      color: $darker-text-color;
+    }
+
+    .account__header__content {
+      color: $primary-text-color;
+    }
+  }
+}
+
+.simple_form,
+.table-form {
+  .warning {
+    box-shadow: none;
+    background: rgba($error-red, 0.5);
+    text-shadow: none;
+  }
+
+  .recommended {
+    border-color: $ui-highlight-color;
+    color: $ui-highlight-color;
+    background-color: $blue;
+  }
+}
+
+.compose-form .compose-form__warning {
+  border-color: $ui-highlight-color;
+  background-color: darken($blue, 6%);
+
+  &,
+  a {
+    color: $ui-highlight-color;
+  }
+}
+
+.status__content,
+.reply-indicator__content {
+  a {
+    color: $highlight-text-color;
+  }
+}
+
+.status.status-direct {
+  background: darken($green, 6%);
+}
+
+.button.logo-button {
+  color: $white;
+
+  svg {
+    fill: $white;
+  }
+}
+
+.public-layout {
+  .activity-stream {
+    border-color: lighten(#eeeeee, 4%);
+  }
+
+  .account__section-headline {
+    background: $green;
+    border: 1px solid lighten($green, 8%);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-top: 0;
+    }
+  }
+
+  .header,
+  .public-account-header,
+  .public-account-bio {
+    box-shadow: none;
+  }
+
+  .hero-widget__text {
+    background: darken($blue, 4%);
+    border: 1px solid lighten($blue, 4%);
+  }
+
+  .public-account-bio {
+    background: $blue;
+    border: 1px solid lighten($blue, 4%);
+  }
+
+  .header {
+    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: darken($pink, 4%);
+      }
+    }
+  }
+
+  .public-account-header {
+    &__image {
+      background: lighten($ui-base-color, 12%);
+
+      &::after {
+        box-shadow: none;
+      }
+    }
+
+    &__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;
+}
+
+.hero-widget,
+.box-widget,
+.contact-widget,
+.landing-page__information.contact-widget,
+.moved-account-widget,
+.memoriam-widget,
+.activity-stream,
+.nothing-here,
+.directory__tag > a,
+.directory__tag > div,
+.card > a,
+.page-header,
+.compose-form .compose-form__warning {
+  box-shadow: none;
+}
+
+body {
+  background: $cream;
+}
+
+.public-layout .header, .public-layout .public-account-header__image {
+  background: $pink;
+  border: 1px solid lighten($pink, 8%);
+}
+
+.public-layout .header .nav-button {
+  background: darken($pink, 4%);
+
+  &:hover, &:focus {
+    background: darken($pink, 6%);
+  }
+}
+
+.public-layout .public-account-header__bar .avatar img {
+  border: 4px solid $purple;
+}
+
+.public-layout .public-account-header__bar:before {
+  background: $purple;
+}
+
+.public-layout .public-account-header__tabs__tabs .counter {
+  border-right: 1px solid lighten($purple, 8%);
+}
+
+.public-layout .public-account-header__tabs__tabs .counter::after {
+  border-bottom: 4px solid lighten($purple, 8%);
+}
+
+.public-layout .public-account-header__image {
+  background: $pink;
+}
+
+.notification__filter-bar button.active::before, .notification__filter-bar button.active::after, .notification__filter-bar a.active::before, .notification__filter-bar a.active::after, .account__section-headline button.active::before, .account__section-headline button.active::after, .account__section-headline a.active::before, .account__section-headline a.active::after {
+  border-color: transparent transparent $white;
+}
+
+.public-layout .footer .grid .column-2 h4 a,
+.public-layout .footer,
+.public-layout .footer h4,
+.public-layout .footer ul a {
+  color: $blueberry;
+}
+
+.public-layout .footer .brand svg {
+  fill: $blueberry;
+}
+
+.account__header__image {
+  background: $pink;
+}
+
+.detailed-status__wrapper {
+  background: $purple;
+}
+
+a.status-card.compact:hover {
+  background: $purple;
+  border: 1px solid lighten($purple, 4%);
+}
+
+.column-inline-form {
+  background: $blue;
+  border: 1px solid lighten($blue, 4%);
+}
+
+.account {
+  border-bottom: 1px solid #eeeeee;
+}

From 7ee0582c3472f27b800d5f30a6fef96a1462698f Mon Sep 17 00:00:00 2001
From: Emma Winston <emma.winston@gmail.com>
Date: Tue, 20 Aug 2019 21:32:48 +0100
Subject: [PATCH 2/4] Additional theme tweaks for macaron

Additional refinements and bugfixes:

- fixed bug where notifications of DMs showed as the wrong colour
- fixed colours of poll notifications
- fixed colours of borders in profile
- made loading indicator more pastel green
---
 app/javascript/styles/macaron/diff.scss | 1023 +----------------------
 1 file changed, 21 insertions(+), 1002 deletions(-)

diff --git a/app/javascript/styles/macaron/diff.scss b/app/javascript/styles/macaron/diff.scss
index b20a6578f..b86c4c068 100644
--- a/app/javascript/styles/macaron/diff.scss
+++ b/app/javascript/styles/macaron/diff.scss
@@ -150,1014 +150,19 @@ html {
 }
 
 .poll__chart {
-  background: darken($purple, 4%)
+  background: darken($purple, 4%);
+}
+
+.muted .poll__chart {
+  background: rgba($purple, 0.8);
 }
 
 .poll__chart.leading {
   background: $pink;
 }
 
-.status {
-    border-bottom: 1px solid lighten(#eeeeee, 4%);
-}
-
-.detailed-status__action-bar {
-    border-top: 1px solid lighten($purple, 4%);
-    border-bottom: 1px solid lighten($purple, 4%);
-}
-
-.search__input {
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border-top: 0;
-    border-bottom: 0;
-  }
-
-  background: $green;
-  border: 1px solid lighten($green, 8%);
-}
-
-.search__input {
-  &:focus{
-    background: $purple;
-    border: 1px solid lighten($purple, 8%);
-  }
-}
-
-.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, .account__section-headline {
-  background: $green;
-  border: 1px solid lighten($green, 8%);
-  border-top: 0;
-}
-
-.notification__filter-bar button {
-  background: $green;
-}
-
-.compose-form .compose-form__buttons-wrapper {
-  background: $ui-base-color;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-top: 0;
-}
-
-.drawer__inner {
-  background: $pink;
-  border: 1px solid lighten($pink, 8%);
-}
-
-.drawer__header {
-  background: $blue;
-  border: 1px solid lighten($blue, 8%);
-}
-
-.drawer__header a {
-  &:active,
-  &:focus,
-  &:hover {
-    background: lighten($blue, 4%);
-  }
-}
-
-.drawer__inner__mastodon {
-  background: $pink 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-lighter-color)}"/></svg>') no-repeat bottom / 100% auto;
-}
-
-// Change the colors used in compose-form
-.compose-form {
-  .compose-form__modifiers {
-    .compose-form__upload__actions .icon-button {
-      color: lighten($white, 7%);
-
-      &:active,
-      &:focus,
-      &:hover {
-        color: $white;
-      }
-    }
-
-    .compose-form__upload-description input {
-      color: lighten($white, 7%);
-
-      &::placeholder {
-        color: lighten($white, 7%);
-      }
-    }
-  }
-
-  .compose-form__buttons-wrapper {
-    background: darken($ui-base-color, 6%);
-  }
-
-  .autosuggest-textarea__suggestions {
-    background: darken($ui-base-color, 6%);
-  }
-
-  .autosuggest-textarea__suggestions__item {
-    &:hover,
-    &:focus,
-    &:active,
-    &.selected {
-      background: lighten($ui-base-color, 4%);
-    }
-  }
-}
-
-.account__header__tabs__buttons .icon-button {
-  border-color: lighten($purple, 8%);
-}
-
-.emoji-mart-bar {
-  border-color: lighten($ui-base-color, 4%);
-
-  &:first-child {
-    background: darken($ui-base-color, 6%);
-  }
-}
-
-.emoji-mart-search input {
-  background: rgba($ui-base-color, 0.3);
-  border-color: $ui-base-color;
-}
-
-// Change the background colors of statuses
-.focusable:focus {
-  background: darken($green, 2%);
-}
-
-.status.status-direct {
-  background: darken($ui-base-color, 2%);
-}
-
-.focusable:focus .status.status-direct {
-  background: $ui-base-color;
-}
-
-.status.status-direct:not(.read) {
-    background: $ui-base-color;
-    border-bottom-color: lighten($ui-base-color, 4%);
-}
-
-.detailed-status,
-.detailed-status__action-bar {
-  background: darken($purple, 10%);
-}
-
-.reply-indicator {
-  background: darken($purple, 8%);
-}
-
-// Change the background colors of status__content__spoiler-link
-.reply-indicator__content .status__content__spoiler-link,
-.status__content .status__content__spoiler-link {
-  background: $pink;
-
-  &:hover {
-    background: lighten($pink, 4%);
-  }
-}
-
-// Change the background colors of media and video spoilers
-.media-spoiler,
-.video-player__spoiler {
-  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: $white;
-
-  &__arrow {
-    &.left {
-      border-left-color: $white;
-    }
-
-    &.top {
-      border-top-color: $white;
-    }
-
-    &.bottom {
-      border-bottom-color: $white;
-    }
-
-    &.right {
-      border-right-color: $white;
-    }
-  }
-
-  &__item {
-    a {
-      background: $white;
-      color: $darker-text-color;
-    }
-  }
-}
-
-body.admin {
-  background: $cream;
-}
-
-.card>a:hover {
-  .card__bar {
-    background: $blue;
-  }
-}
-
-.batch-table__toolbar {
-  background: $green;
-}
-
-.batch-table__row {
-  border-top: 0;
-  border: 1px solid #fffdef;
-  background: $blue;
-}
-
-.batch-table__row:nth-child(2n) {
-  background: $green;
-}
-
-.filters .filter-subset a {
-  border-bottom: 2px solid $green;
-}
-
-.filters .filter-subset a:hover,
-.filters .filter-subset a:focus {
-  border-bottom: 2px solid lighten($green, 8%);
-}
-
-.filters .filter-subset a.selected:hover,
-.filters .filter-subset a.selected:focus {
-  border-bottom: 2px solid lighten($blueberry, 8%);
-}
-
-.table>tbody>tr:nth-child(odd)>td, .table>tbody>tr:nth-child(odd)>th {
-    background: $green;
-}
-
-.table td, .table th {
-    padding: 8px;
-    line-height: 18px;
-    vertical-align: top;
-    border-top: 1px solid $green;
-    text-align: left;
-    background: $blue;
-}
-
-.card__bar {
-  background: $purple;
-}
-
-.admin-wrapper .sidebar {
-  background: $green;
-}
-
-.admin-wrapper .content h2, .admin-wrapper .content h4 {
-  border-bottom: 1px solid #eeeeee;
-}
-
-.admin-wrapper .sidebar ul a.selected {
-  background: $purple;
-}
-
-.admin-wrapper .sidebar ul a:hover {
-  background: lighten($blue, 8%);
-}
-
-.selected ul li a {
-  background: $blue;
-}
-
-.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
-  background: $blueberry;
-}
-
-.dashboard__counters > div > div,
-.dashboard__counters > div > a {
-  background: $pink;
-}
-
-.dashboard__counters > div > a:hover,
-.dashboard__counters > div > a:focus {
-  background: lighten($pink, 4%);
-}
-
-// 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,
-.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
-.dropdown-menu__item a:active,
-.dropdown-menu__item a:focus,
-.dropdown-menu__item a:hover,
-.actions-modal ul li:not(:empty) a.active,
-.actions-modal ul li:not(:empty) a.active button,
-.actions-modal ul li:not(:empty) a:active,
-.actions-modal ul li:not(:empty) a:active button,
-.actions-modal ul li:not(:empty) a:focus,
-.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 .simple-navigation-active-leaf a,
-.simple_form .block-button,
-.simple_form .button,
-.simple_form button {
-  color: $white;
-}
-
-.dropdown-menu__separator {
-  border-bottom-color: lighten($ui-base-color, 4%);
-}
-
-// Change the background colors of modals
-.actions-modal,
-.boost-modal,
-.confirmation-modal,
-.mute-modal,
-.report-modal,
-.embed-modal,
-.error-modal,
-.onboarding-modal {
-  background: $ui-base-color;
-}
-
-.column-header__collapsible-inner {
-  background: darken($blue, 4%);
-  border: 1px solid lighten($blue, 8%);
-  border-top: 0;
-}
-
-.boost-modal__action-bar,
-.confirmation-modal__action-bar,
-.mute-modal__action-bar,
-.onboarding-modal__paginator,
-.error-modal__footer {
-  background: darken($ui-base-color, 6%);
-
-  .onboarding-modal__nav,
-  .error-modal__nav {
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: darken($ui-base-color, 12%);
-    }
-  }
-}
-
-.display-case__case {
-  background: $white;
-}
-
-.embed-modal .embed-modal__container .embed-modal__html {
-  background: $white;
-
-  &:focus {
-    background: darken($ui-base-color, 6%);
-  }
-}
-
-.react-toggle-track {
-  background: $ui-secondary-color;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background: darken($ui-secondary-color, 10%);
-}
-
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background: lighten($ui-highlight-color, 10%);
-}
-
-// Change the default color used for the text in an empty column or on the error column
-.empty-column-indicator,
-.error-column {
-  color: $primary-text-color;
-  background: $white;
-}
-
-.tabs-bar {
-  background: $blue;
-  border: 1px solid lighten($blue, 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($blue, 8%);
-
-    &:hover,
-    &:active,
-    &:focus {
-      background: lighten($blue,4%);
-    }
-
-    &.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%);
-}
-
-.getting-started__wrapper, .getting-started, .flex-spacer {
-  background: $purple;
-}
-
-.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(#eeeeee, 4%);
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border-left: 0;
-    border-right: 0;
-    border-top: 0;
-  }
-}
-
-.directory__tag a:hover, .directory__tag a:focus {
-  background: $blue;
-  border: 1px solid lighten($blue, 4%);
-}
-
-.page-header {
-  background: $purple;
-  border: 1px solid lighten($purple, 4%);
-}
-
-.directory, .nothing-here, .directory__tag a {
-  background: $green;
-  border: 1px solid lighten($green, 4%);
-}
-
-.box-widget {
-  background: $blue;
-  border: 1px solid lighten($blue, 4%);
-}
-
-.landing__grid__column-login .box-widget {
-  background: $pink;
-  border: 1px solid lighten($pink, 4%);
-}
-
-.landing .hero-widget__text {
-  border-top: 0;
-  border-bottom: 0;
-}
-
-.simple_form {
-  input[type=text],
-  input[type=number],
-  input[type=email],
-  input[type=password],
-  select,
-  textarea {
-    border-color: $blueberry;
-    &:hover {
-      border-color: $bilberry;
-    }
-  }
-}
-
-.landing .hero-widget__footer {
-  background: $purple;
-  border: 1px solid lighten($purple, 8%);
-  border-top: 0;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border: 0;
-  }
-}
-
-.brand__tagline {
-  color: $ui-secondary-color;
-}
-
-.landing-page__call-to-action {
-  background: $purple;
-}
-
-.landing-page__information.contact-widget {
-  background: $green;
-}
-
-.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;
-
-    .detailed-status.light,
-    .more.light,
-    .status.light {
-      border-bottom-color: lighten($ui-base-color, 8%);
-    }
-  }
-
-  .status.light {
-    .status__content {
-      color: $primary-text-color;
-    }
-
-    .display-name {
-      strong {
-        color: $primary-text-color;
-      }
-    }
-  }
-}
-
-.accounts-grid {
-  .account-grid-card {
-    .controls {
-      .icon-button {
-        color: $darker-text-color;
-      }
-    }
-
-    .name {
-      a {
-        color: $primary-text-color;
-      }
-    }
-
-    .username {
-      color: $darker-text-color;
-    }
-
-    .account__header__content {
-      color: $primary-text-color;
-    }
-  }
-}
-
-.simple_form,
-.table-form {
-  .warning {
-    box-shadow: none;
-    background: rgba($error-red, 0.5);
-    text-shadow: none;
-  }
-
-  .recommended {
-    border-color: $ui-highlight-color;
-    color: $ui-highlight-color;
-    background-color: $blue;
-  }
-}
-
-.compose-form .compose-form__warning {
-  border-color: $ui-highlight-color;
-  background-color: darken($blue, 6%);
-
-  &,
-  a {
-    color: $ui-highlight-color;
-  }
-}
-
-.status__content,
-.reply-indicator__content {
-  a {
-    color: $highlight-text-color;
-  }
-}
-
-.status.status-direct {
-  background: darken($green, 6%);
-}
-
-.button.logo-button {
-  color: $white;
-
-  svg {
-    fill: $white;
-  }
-}
-
-.public-layout {
-  .activity-stream {
-    border-color: lighten(#eeeeee, 4%);
-  }
-
-  .account__section-headline {
-    background: $green;
-    border: 1px solid lighten($green, 8%);
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 0;
-    }
-  }
-
-  .header,
-  .public-account-header,
-  .public-account-bio {
-    box-shadow: none;
-  }
-
-  .hero-widget__text {
-    background: darken($blue, 4%);
-    border: 1px solid lighten($blue, 4%);
-  }
-
-  .public-account-bio {
-    background: $blue;
-    border: 1px solid lighten($blue, 4%);
-  }
-
-  .header {
-    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: darken($pink, 4%);
-      }
-    }
-  }
-
-  .public-account-header {
-    &__image {
-      background: lighten($ui-base-color, 12%);
-
-      &::after {
-        box-shadow: none;
-      }
-    }
-
-    &__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;
-}
-
-.hero-widget,
-.box-widget,
-.contact-widget,
-.landing-page__information.contact-widget,
-.moved-account-widget,
-.memoriam-widget,
-.activity-stream,
-.nothing-here,
-.directory__tag > a,
-.directory__tag > div,
-.card > a,
-.page-header,
-.compose-form .compose-form__warning {
-  box-shadow: none;
-}
-
-body {
-  background: $cream;
-}
-
-.public-layout .header, .public-layout .public-account-header__image {
-  background: $pink;
-  border: 1px solid lighten($pink, 8%);
-}
-
-.public-layout .header .nav-button {
-  background: darken($pink, 4%);
-
-  &:hover, &:focus {
-    background: darken($pink, 6%);
-  }
-}
-
-.public-layout .public-account-header__bar .avatar img {
-  border: 4px solid $purple;
-}
-
-.public-layout .public-account-header__bar:before {
-  background: $purple;
-}
-
-.public-layout .public-account-header__tabs__tabs .counter {
-  border-right: 1px solid lighten($purple, 8%);
-}
-
-.public-layout .public-account-header__tabs__tabs .counter::after {
-  border-bottom: 4px solid lighten($purple, 8%);
-}
-
-.public-layout .public-account-header__image {
-  background: $pink;
-}
-
-.notification__filter-bar button.active::before, .notification__filter-bar button.active::after, .notification__filter-bar a.active::before, .notification__filter-bar a.active::after, .account__section-headline button.active::before, .account__section-headline button.active::after, .account__section-headline a.active::before, .account__section-headline a.active::after {
-  border-color: transparent transparent $white;
-}
-
-.public-layout .footer .grid .column-2 h4 a,
-.public-layout .footer,
-.public-layout .footer h4,
-.public-layout .footer ul a {
-  color: $blueberry;
-}
-
-.public-layout .footer .brand svg {
-  fill: $blueberry;
-}
-
-.account__header__image {
-  background: $pink;
-}
-
-.detailed-status__wrapper {
-  background: $purple;
-}
-
-// Notes!
-// Sass color functions, "darken" and "lighten" are automatically replaced.
-
-html {
-  scrollbar-color: $pink rgba($pink, 0.25);
-}
-
-.loading-bar
-  {
-    background-color: $green;
-  }
-
-.status__content a, .reply-indicator__content a {
-  &:hover, &:active, &:focus {
-    color: $bilberry;
-  }
-}
-
-::-webkit-scrollbar-thumb {
-    background: $pink;
-    border: 0;
-}
-
-::-webkit-scrollbar-thumb {
-    background: $pink;
-    border: 0;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: $pink;
-    border: 0;
-}
-
-::-webkit-scrollbar-track:hover {
-    background: $green;
-}
-
-.ui {
-  background: $cream;
-}
-
-// Change the colors of button texts
-.button {
-  color: $white;
-
-  &.button-alternative-2 {
-    color: $white;
-  }
-}
-
-// Change default background colors of columns
-.column > .scrollable,
-.getting-started,
-.column-inline-form {
-  background: $white;
-  border: 1px solid lighten(#eeeeee, 4%);
-  border-top: 0;
-}
-
-.getting-started {
-  background: $green;
-  border: 1px solid lighten($green, 8%);
-}
-
-.column-back-button,
-.column-header {
-  background: #c8c4dd;
-  border: 1px solid lighten($purple, 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: $purple;
-}
-
-.column-header__button.active {
-  color: $ui-highlight-color;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: $ui-highlight-color;
-    background: lighten($purple, 4%);
-  }
-}
-
-.account__header__bar .avatar .account__avatar {
-  border-color: $white;
-}
-
-.getting-started__footer a {
-  color: $ui-secondary-color;
-  text-decoration: underline;
-}
-
-.column-subheading {
-  background: $green;
-  border-bottom: 1px solid lighten($green, 8%);
-}
-
-.getting-started,
-.scrollable {
-  .column-link {
-    background: $blue;
-    border-bottom: 1px solid lighten($blue, 8%);
-
-    &:hover,
-    &:active,
-    &:focus {
-      background: lighten($blue, 8%);
-    }
-  }
-}
-
-.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(#eeeeee, 4%);
-}
-
-.poll__chart {
-  background: darken($purple, 4%)
-}
-
-.poll__chart.leading {
-  background: $pink;
+.muted .poll__chart.leading {
+  background: rgba($pink, 0.8);
 }
 
 .status {
@@ -2017,3 +1022,17 @@ a.status-card.compact:hover {
 .account {
   border-bottom: 1px solid #eeeeee;
 }
+
+.notification-favourite .status.status-direct:not(.read) {
+  background: transparent;
+  border-bottom: #eeeeee;
+}
+
+.loading-indicator__figure {
+  border: 0 solid lighten($green, 12%);
+}
+
+.account__header__bio .account__header__fields {
+  border-top: 1px solid lighten($purple, 8%);
+  border-bottom: 1px solid lighten($purple, 8%);
+}

From 18f6b7e9949f2634398153ec2f62f735326b48f6 Mon Sep 17 00:00:00 2001
From: Emma Winston <emma.winston@gmail.com>
Date: Thu, 22 Aug 2019 21:16:44 +0100
Subject: [PATCH 3/4] Fix public account page header colours

---
 app/javascript/styles/macaron/diff.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/javascript/styles/macaron/diff.scss b/app/javascript/styles/macaron/diff.scss
index b86c4c068..1e7f0422a 100644
--- a/app/javascript/styles/macaron/diff.scss
+++ b/app/javascript/styles/macaron/diff.scss
@@ -1036,3 +1036,13 @@ a.status-card.compact:hover {
   border-top: 1px solid lighten($purple, 8%);
   border-bottom: 1px solid lighten($purple, 8%);
 }
+
+@media screen and (max-width: 600px) {
+  .public-layout .public-account-header__bar {
+    background: $blue;
+  }
+
+  .public-layout .public-account-header__extra .public-account-bio .account__header__fields {
+    border-color: lighten($blue, 8%);
+  }
+}

From 3da7ff7230a4de11f87724aa1d33d776f0616706 Mon Sep 17 00:00:00 2001
From: Emma Winston <emma.winston@gmail.com>
Date: Thu, 22 Aug 2019 21:49:43 +0100
Subject: [PATCH 4/4] fix colour of bottom border of favourite notifications

---
 app/javascript/styles/macaron/diff.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/styles/macaron/diff.scss b/app/javascript/styles/macaron/diff.scss
index 1e7f0422a..d513dbdee 100644
--- a/app/javascript/styles/macaron/diff.scss
+++ b/app/javascript/styles/macaron/diff.scss
@@ -1025,7 +1025,7 @@ a.status-card.compact:hover {
 
 .notification-favourite .status.status-direct:not(.read) {
   background: transparent;
-  border-bottom: #eeeeee;
+  border-bottom: 1px solid lighten(#eeeeee, 4%);
 }
 
 .loading-indicator__figure {