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