hometown/app/javascript/styles/macaron/diff.scss

// 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
.audio-player {
  border: 1px solid lighten(#eeeeee, 4%);
}

.poll__chart {
  background: darken($purple, 4%);
}

.muted .poll__chart {
  background: rgba($purple, 0.8);
}

.poll__chart.leading {
  background: $pink;
}

.muted .poll__chart.leading {
  background: rgba($pink, 0.8);
}

.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;
}

// 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;
  border-bottom: 1px solid $purple;
}

.admin-wrapper .sidebar ul a:hover {
  background: lighten($blue, 8%);
  border-bottom: 1px solid lighten($blue, 8%);
}

.admin-wrapper .sidebar ul a.selected:hover {
  background: lighten($purple, 4%);
  border-bottom: 1px solid lighten($purple, 4%);
}

.selected ul li a {
  background: $blue;
  border-bottom: 1px solid $blue;
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
  background: $blueberry;
  border-bottom: 1px solid $blueberry;
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
  background: lighten($blueberry, 4%);
  border-bottom: 1px solid lighten($blueberry, 4%);
}

.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: $purple;
    border: 1px solid lighten($purple, 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($purple, 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 $blue;
}

.public-layout .public-account-header__bar:before {
  background: $blue;
  border: 1px solid lighten($blue, 8%);
}

.public-layout .public-account-header__tabs__tabs .counter {
  border-right: 1px solid lighten($blue, 8%);
}

.public-layout .public-account-header__tabs__tabs .counter::after {
  border-bottom: 4px solid lighten($blue, 12%);
}

.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;
}

.notification-favourite .status.status-direct:not(.read) {
  background: transparent;
  border-bottom: 1px solid lighten(#eeeeee, 4%);
}

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

.public-account-bio .account__header__fields {
  border-bottom: 1px solid lighten($purple, 8%);
}

.account__header__fields dl {
  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($purple, 8%);
    background: $purple;
  }

  .admin-wrapper .sidebar ul a, .admin-wrapper .sidebar ul ul a {
    border-bottom: 1px solid $blue;
  }
}

.audio-player {
  background: $ui-base-color;
  border: 1px solid lighten($ui-base-color, 8%);

  &__progress-placeholder {
    background-color: rgba(lighten($ui-highlight-color, 8%), 0.5);
  }

  &__wave-placeholder {
    background-color: lighten($ui-base-color, 16%);
  }
}

.audio-player .video-player__controls button,
.audio-player .video-player__time-sep,
.audio-player .video-player__time-current,
.audio-player .video-player__time-total {
  color: $ui-primary-color;
}