diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 0fc31c07a5..49a81cc1c9 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -1115,7 +1115,6 @@ body > [data-popper-placement] { overflow: visible; } - .reply-indicator { display: grid; grid-template-columns: 46px minmax(0, 1fr); @@ -1276,8 +1275,7 @@ body > [data-popper-placement] { } .edit-indicator__content, -.reply-indicator__content, -.quote-indicator__content { +.reply-indicator__content { .emojione { width: 18px; height: 18px; @@ -1422,7 +1420,6 @@ body > [data-popper-placement] { } .focusable { - &:hover, &:focus { outline: 0; background: rgba($ui-highlight-color, 0.05); diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss index 1c2386f02d..ae607f484a 100644 --- a/app/javascript/flavours/glitch/styles/contrast/diff.scss +++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss @@ -1,20 +1,7 @@ -.compose-form { - .compose-form__modifiers { - .compose-form__upload { - &-description { - input { - &::placeholder { - opacity: 1; - } - } - } - } - } -} - .status__content a, -.link-footer a, .reply-indicator__content a, +.edit-indicator__content a, +.link-footer a, .status__content__read-more-button, .status__content__translate-button { text-decoration: underline; @@ -42,7 +29,9 @@ } } -.status__content a { +.status__content a, +.reply-indicator__content a, +.edit-indicator__content a { color: $highlight-text-color; } @@ -50,24 +39,10 @@ color: $darker-text-color; } -.compose-form__poll-wrapper .button.button-secondary, -.compose-form .autosuggest-textarea__textarea::placeholder, -.compose-form .spoiler-input__input::placeholder, -.report-dialog-modal__textarea::placeholder, -.language-dropdown__dropdown__results__item__common-name, -.compose-form .icon-button { +.report-dialog-modal__textarea::placeholder { color: $inverted-text-color; } -.text-icon-button.active { - color: $ui-highlight-color; -} - -.language-dropdown__dropdown__results__item.active { - background: $ui-highlight-color; - font-weight: 500; -} - .link-button:disabled { cursor: not-allowed; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 740d7222f8..4040ee0fe0 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -21,25 +21,6 @@ html { } // Change default background colors of columns -.column > .scrollable, -.getting-started, -.column-inline-form, -.regeneration-indicator { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); - border-top: 0; -} - -.error-column { - border: 1px solid lighten($ui-base-color, 8%); -} - -.column > .scrollable.about { - border-top: 1px solid lighten($ui-base-color, 8%); -} - -.about__meta, -.about__section__title, .interaction-modal { background: $white; border: 1px solid lighten($ui-base-color, 8%); @@ -53,29 +34,6 @@ html { background: lighten($ui-base-color, 12%); } -.filter-form { - background: $white; - border-bottom: 1px solid lighten($ui-base-color, 8%); -} - -.column-back-button, -.column-header { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); - - @media screen and (max-width: $no-gap-breakpoint) { - border-top: 0; - } - - &--slim-button { - top: -50px; - right: 0; - } -} - -.column-header__back-button, -.column-header__button, -.column-header__button.active, .account__header { background: $white; } @@ -87,7 +45,6 @@ html { &:active, &:focus { color: $ui-highlight-color; - background: $white; } } @@ -113,25 +70,6 @@ html { } } -.column-subheading { - background: darken($ui-base-color, 4%); - border-bottom: 1px solid lighten($ui-base-color, 8%); -} - -.getting-started, -.scrollable { - .column-link { - background: $white; - border-bottom: 1px solid lighten($ui-base-color, 8%); - - &:hover, - &:active, - &:focus { - background: $ui-base-color; - } - } -} - .getting-started .navigation-bar { border-top: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%); @@ -141,11 +79,8 @@ html { } } -.compose-form__autosuggest-wrapper, -.poll__option input[type='text'], -.compose-form .spoiler-input__input, -.compose-form__poll-wrapper select, .search__input, +.search__popout, .setting-text, .report-dialog-modal__textarea, .audio-player { @@ -168,86 +103,6 @@ html { 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 { - border: 1px solid lighten($ui-base-color, 8%); - border-top: 0; -} - -.compose-form .compose-form__buttons-wrapper { - background: $ui-base-color; - border: 1px solid lighten($ui-base-color, 8%); - border-top: 0; -} - -.drawer__header, -.drawer__inner { - background: $white; - border: 1px solid lighten($ui-base-color, 8%); -} - -.drawer__inner__mastodon { - background: $white - 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, - .compose-form__upload__warning .icon-button { - color: lighten($white, 7%); - - &:active, - &:focus, - &:hover { - color: $white; - } - } - } - - .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%); - } - } -} - -.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; -} - .upload-progress__backdrop { background: $ui-base-color; } @@ -257,11 +112,6 @@ html { background: lighten($white, 4%); } -.detailed-status, -.detailed-status__action-bar { - background: $white; -} - // Change the background colors of status__content__spoiler-link .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { @@ -273,52 +123,11 @@ html { } } -// 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::before { - background-color: $white; - } - - &__item { - color: $darker-text-color; - - &--dangerous { - color: $error-value-color; - } - - a, - button { - background: $white; - } - } -} - // 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:not(.dropdown-menu__item--dangerous) a:active, -.dropdown-menu__item:not(.dropdown-menu__item--dangerous) a:focus, -.dropdown-menu__item:not(.dropdown-menu__item--dangerous) 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, @@ -327,7 +136,6 @@ html { .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, -.language-dropdown__dropdown__results__item.active, .admin-wrapper .sidebar ul .simple-navigation-active-leaf a, .simple_form .block-button, .simple_form .button, @@ -335,19 +143,6 @@ html { color: $white; } -.language-dropdown__dropdown__results__item - .language-dropdown__dropdown__results__item__common-name { - color: lighten($ui-base-color, 8%); -} - -.language-dropdown__dropdown__results__item.active - .language-dropdown__dropdown__results__item__common-name { - color: darken($ui-base-color, 12%); -} - -.dropdown-menu__separator, -.dropdown-menu__item.edited-timestamp__history__item, -.dropdown-menu__container__header, .compare-history-modal .report-modal__target, .report-dialog-modal .poll__option.dialog-option { border-bottom-color: lighten($ui-base-color, 4%); @@ -381,10 +176,7 @@ html { .reactions-bar__item:hover, .reactions-bar__item:focus, -.reactions-bar__item:active, -.language-dropdown__dropdown__results__item:hover, -.language-dropdown__dropdown__results__item:focus, -.language-dropdown__dropdown__results__item:active { +.reactions-bar__item:active { background-color: $ui-base-color; } @@ -422,7 +214,7 @@ html { .column-header__collapsible-inner { background: darken($ui-base-color, 4%); border: 1px solid lighten($ui-base-color, 8%); - border-top: 0; + border-bottom: 0; } .column-settings__hashtags .column-select__option { @@ -472,11 +264,11 @@ html { } .react-toggle-track { - background: $ui-secondary-color; + background: $ui-primary-color; } .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background: darken($ui-secondary-color, 10%); + background: lighten($ui-primary-color, 10%); } .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) @@ -627,11 +419,6 @@ html { } } -.reply-indicator { - background: transparent; - border: 1px solid lighten($ui-base-color, 8%); -} - .status__content, .reply-indicator__content { a { @@ -653,7 +440,8 @@ html { .directory__tag > div, .card > a, .page-header, -.compose-form .compose-form__warning { +.compose-form, +.compose-form__warning { box-shadow: none; } @@ -725,13 +513,6 @@ html { } } -.status.collapsed .status__content::after { - background: linear-gradient( - rgba(darken($ui-base-color, 13%), 0), - rgba(darken($ui-base-color, 13%), 1) - ); -} - .drawer__inner__mastodon { background: $white url('data:image/svg+xml;utf8,') @@ -741,3 +522,47 @@ html { filter: contrast(75%) brightness(75%) !important; } } + +.compose-form__actions .icon-button.active, +.dropdown-button.active, +.privacy-dropdown__option.active, +.privacy-dropdown__option:focus, +.language-dropdown__dropdown__results__item:focus, +.language-dropdown__dropdown__results__item.active, +.privacy-dropdown__option:focus .privacy-dropdown__option__content, +.privacy-dropdown__option:focus .privacy-dropdown__option__content strong, +.privacy-dropdown__option.active .privacy-dropdown__option__content, +.privacy-dropdown__option.active .privacy-dropdown__option__content strong, +.language-dropdown__dropdown__results__item:focus + .language-dropdown__dropdown__results__item__common-name, +.language-dropdown__dropdown__results__item.active + .language-dropdown__dropdown__results__item__common-name { + color: $white; +} + +.compose-form .spoiler-input__input { + color: lighten($ui-highlight-color, 8%); +} + +.compose-form .autosuggest-textarea__textarea, +.compose-form__highlightable, +.search__input, +.search__popout, +.emoji-mart-search input, +.language-dropdown__dropdown .emoji-mart-search input, +.poll__option input[type='text'] { + background: darken($ui-base-color, 10%); +} + +.inline-follow-suggestions { + background-color: rgba($ui-highlight-color, 0.1); + border-bottom-color: rgba($ui-highlight-color, 0.3); +} + +.inline-follow-suggestions__body__scrollable__card { + background: $white; +} + +.inline-follow-suggestions__body__scroll-button__icon { + color: $white; +} diff --git a/app/javascript/flavours/glitch/styles/rich_text.scss b/app/javascript/flavours/glitch/styles/rich_text.scss index f6e740ef88..2deab6bd92 100644 --- a/app/javascript/flavours/glitch/styles/rich_text.scss +++ b/app/javascript/flavours/glitch/styles/rich_text.scss @@ -92,10 +92,3 @@ list-style-type: decimal; } } - -.reply-indicator__content { - blockquote { - border-inline-start-color: $inverted-text-color; - color: $inverted-text-color; - } -}