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,") 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,') 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%);
+}