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] 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%);
+}