From b6c0ef70a2c088fecd0609a96ef1a47fb6ee7ce6 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 5 Nov 2022 18:28:13 +0100 Subject: [Glitch] Change sign-in banner to reflect disabled or moved account status Port 312d616371096235f1f317041300b8220c447613 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/styles/components/signed_out.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss index 1051b2f32..efb49305d 100644 --- a/app/javascript/flavours/glitch/styles/components/signed_out.scss +++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss @@ -4,6 +4,20 @@ p { color: $darker-text-color; margin-bottom: 20px; + + a { + color: $secondary-text-color; + text-decoration: none; + unicode-bidi: isolate; + + &:hover { + text-decoration: underline; + + .fa { + color: lighten($dark-text-color, 7%); + } + } + } } .button { -- cgit From c883799a1ff37c7c004b8dc5fedc0fe14232400d Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 31 Oct 2022 13:06:17 +0100 Subject: [Glitch] Change design of link footer Port 2d9a85db6efe0c9ccfda1420551ce3d6025bc27e to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/account.js | 8 ++- .../flavours/glitch/components/server_banner.js | 2 +- .../flavours/glitch/features/about/index.js | 7 ++- .../glitch/features/ui/components/link_footer.js | 68 +++++++++++----------- .../flavours/glitch/styles/components/about.scss | 38 +++++++++++- .../flavours/glitch/styles/components/index.scss | 37 ------------ 6 files changed, 85 insertions(+), 75 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/components/account.js b/app/javascript/flavours/glitch/components/account.js index 8bfc8e9dc..8e810ce5f 100644 --- a/app/javascript/flavours/glitch/components/account.js +++ b/app/javascript/flavours/glitch/components/account.js @@ -27,6 +27,7 @@ export default @injectIntl class Account extends ImmutablePureComponent { static propTypes = { + size: PropTypes.number, account: ImmutablePropTypes.map, onFollow: PropTypes.func.isRequired, onBlock: PropTypes.func.isRequired, @@ -41,6 +42,10 @@ class Account extends ImmutablePureComponent { onActionClick: PropTypes.func, }; + static defaultProps = { + size: 36, + }; + handleFollow = () => { this.props.onFollow(this.props.account); } @@ -75,6 +80,7 @@ class Account extends ImmutablePureComponent { actionIcon, actionTitle, defaultAction, + size, } = this.props; if (!account) { @@ -163,7 +169,7 @@ class Account extends ImmutablePureComponent {
-
+
{mute_expires_at} diff --git a/app/javascript/flavours/glitch/components/server_banner.js b/app/javascript/flavours/glitch/components/server_banner.js index 9cb0ef13c..36e0ff238 100644 --- a/app/javascript/flavours/glitch/components/server_banner.js +++ b/app/javascript/flavours/glitch/components/server_banner.js @@ -61,7 +61,7 @@ class ServerBanner extends React.PureComponent {

- +
diff --git a/app/javascript/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js index 3d26c59bc..4129c8236 100644 --- a/app/javascript/flavours/glitch/features/about/index.js +++ b/app/javascript/flavours/glitch/features/about/index.js @@ -125,7 +125,7 @@ class About extends React.PureComponent {

- +
@@ -209,6 +209,11 @@ class About extends React.PureComponent { + +
+

+

+
diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.js index 3f74c908a..d7a4cf130 100644 --- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js +++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { version, repository, source_url, profile_directory as profileDirectory } from 'flavours/glitch/initial_state'; +import { domain, version, source_url, profile_directory as profileDirectory } from 'flavours/glitch/initial_state'; import { logOut } from 'flavours/glitch/utils/log_out'; import { openModal } from 'flavours/glitch/actions/modal'; import { PERMISSION_INVITE_USERS } from 'flavours/glitch/permissions'; @@ -48,44 +48,44 @@ class LinkFooter extends React.PureComponent { render () { const { signedIn, permissions } = this.context.identity; - const items = []; - items.push(); - items.push(); - items.push(); - items.push(); - items.push(); - items.push(); - - if (profileDirectory) { - items.push(); - } - - if (signedIn) { - if ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS) { - items.push(); - } - - items.push(); - items.push(); - } + const canInvite = signedIn && ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS); + const canProfileDirectory = profileDirectory; return ( -
-
    - {items.map((item, index, array) => ( -
  • {item} { index === array.length - 1 ? null : ' · ' }
    • - ))} -
+
+

+ {domain}: + {' '} + + {canInvite && ( + <> + {' · '} + + + )} + {canProfileDirectory && ( + <> + {' · '} + + + )} + {' · '} + +

- {repository} (v{version}), - Mastodon: Mastodon }} - /> + Mastodon: + {' '} + + {' · '} + + {' · '} + + {' · '} + + {' · '} + v{version}

); diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss index ca9ba3ebf..c6cc6c615 100644 --- a/app/javascript/flavours/glitch/styles/components/about.scss +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -30,6 +30,34 @@ } } +.link-footer { + flex: 0 0 auto; + padding: 10px; + padding-top: 20px; + z-index: 1; + font-size: 13px; + + p { + color: $dark-text-color; + margin-bottom: 20px; + + strong { + font-weight: 500; + } + + a { + color: $dark-text-color; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + } +} + .about { padding: 20px; @@ -37,6 +65,14 @@ border-radius: 4px; } + &__footer { + color: $dark-text-color; + text-align: center; + font-size: 15px; + line-height: 22px; + margin-top: 20px; + } + &__header { margin-bottom: 30px; @@ -157,7 +193,7 @@ } } - .getting-started__footer { + .link-footer { padding: 0; margin-top: 60px; text-align: center; diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 28f93018d..c3276b035 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1044,43 +1044,6 @@ color: $dark-text-color; } - &__footer { - flex: 0 0 auto; - padding: 10px; - padding-top: 20px; - z-index: 1; - font-size: 13px; - - ul { - margin-bottom: 10px; - } - - ul li { - display: inline; - } - - p { - color: $dark-text-color; - margin-bottom: 20px; - - a { - color: $dark-text-color; - text-decoration: underline; - } - } - - a { - text-decoration: none; - color: $darker-text-color; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - &__trends { flex: 0 1 auto; opacity: 1; -- cgit From cbfa5ad5dd443bd1d5242491b5f269f2d830d971 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 4 Nov 2022 02:28:14 +0100 Subject: [Glitch] Fix wrong colors in the high-contrast theme Port 1c3192df6bf48eb4c3613f2a8744c809f6eeeec0 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/styles/contrast/diff.scss | 95 ++++++++++++---------- .../flavours/glitch/styles/contrast/variables.scss | 4 +- 2 files changed, 54 insertions(+), 45 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss index a9a203960..4fa1a0361 100644 --- a/app/javascript/flavours/glitch/styles/contrast/diff.scss +++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss @@ -1,69 +1,78 @@ -// components.scss +.compose-form { + .compose-form__modifiers { + .compose-form__upload { + &-description { + input { + &::placeholder { + opacity: 1; + } + } + } + } + } +} .status__content a, -.reply-indicator__content a { - color: lighten($ui-highlight-color, 12%); +.link-footer a, +.reply-indicator__content a, +.status__content__read-more-button { text-decoration: underline; - &.mention { - text-decoration: none; - } - - &.mention span { - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - &:hover, &:focus, &:active { text-decoration: none; } - &.status__content__spoiler-link { - color: $secondary-text-color; + &.mention { text-decoration: none; - } -} -.status__content__read-more-button { - text-decoration: underline; + span { + text-decoration: underline; + } - &:hover, - &:focus, - &:active { - text-decoration: none; + &:hover, + &:focus, + &:active { + span { + text-decoration: none; + } + } } } -.getting-started__footer a { - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } +.status__content a { + color: $highlight-text-color; } .nothing-here { color: $darker-text-color; } -.public-layout .public-account-header__tabs__tabs .counter.active::after { - border-bottom: 4px solid $ui-highlight-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 { + color: $inverted-text-color; } -.composer { - .composer--spoiler input, - .compose-form__autosuggest-wrapper 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; + + &:hover, + &:focus, + &:active { + text-decoration: none !important; } } diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss index ab14a7b73..e272b6ca3 100644 --- a/app/javascript/flavours/glitch/styles/contrast/variables.scss +++ b/app/javascript/flavours/glitch/styles/contrast/variables.scss @@ -14,8 +14,8 @@ $ui-highlight-color: $classic-highlight-color !default; $darker-text-color: lighten($ui-primary-color, 20%) !default; $dark-text-color: lighten($ui-primary-color, 12%) !default; $secondary-text-color: lighten($ui-secondary-color, 6%) !default; -$highlight-text-color: lighten($ui-highlight-color, 8%) !default; -$action-button-color: #8d9ac2; +$highlight-text-color: lighten($ui-highlight-color, 10%) !default; +$action-button-color: lighten($ui-base-color, 50%); $inverted-text-color: $black !default; $lighter-text-color: darken($ui-base-color,6%) !default; -- cgit From c199387558e0e0ec824b5e66c4a1e22e8b2e135b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 4 Nov 2022 02:32:26 +0100 Subject: [Glitch] Fix colors in light theme Port 20aa8881dc98264e5875fa37fc2dbf18e3f2baac to glitch-soc --- .../glitch/styles/mastodon-light/diff.scss | 701 ++++++++++++++++----- .../glitch/styles/mastodon-light/variables.scss | 19 +- 2 files changed, 559 insertions(+), 161 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index d4ac55847..f0b8a320b 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -1,237 +1,372 @@ // Notes! // Sass color functions, "darken" and "lighten" are automatically replaced. -.glitch.local-settings { - background: $ui-base-color; +html { + scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25); +} - &__navigation { - background: darken($ui-base-color, 8%); +// Change the colors of button texts +.button { + color: $white; + + &.button-alternative-2 { + color: $white; } +} - &__navigation__item { - background: darken($ui-base-color, 8%); +.status-card__actions button, +.status-card__actions a { + color: rgba($white, 0.8); - &:hover { - background: $ui-base-color; - } + &:hover, + &:active, + &:focus { + color: $white; } } -.notification__dismiss-overlay { - .wrappy { - box-shadow: unset; - } +// Change default background colors of columns +.column > .scrollable, +.getting-started, +.column-inline-form, +.error-column, +.regeneration-indicator { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} - .ckbox { - text-shadow: unset; - } +.column > .scrollable.about { + border-top: 1px solid lighten($ui-base-color, 8%); } -.status.status-direct { - background: darken($ui-base-color, 8%); - border-bottom-color: darken($ui-base-color, 12%); +.about__meta, +.about__section__title, +.interaction-modal { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); +} - &.collapsed> .status__content:after { - background: linear-gradient(rgba(darken($ui-base-color, 8%), 0), rgba(darken($ui-base-color, 8%), 1)); - } +.rules-list li::before { + background: $ui-highlight-color; } -.focusable:focus.status.status-direct { - background: darken($ui-base-color, 4%); +.directory__card__img { + background: lighten($ui-base-color, 12%); +} - &.collapsed> .status__content:after { - background: linear-gradient(rgba(darken($ui-base-color, 4%), 0), rgba(darken($ui-base-color, 4%), 1)); +.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__bar { + background: $white; } -// Change columns' default background colors -.column { - > .scrollable { - background: darken($ui-base-color, 13%); +.column-header__button.active { + color: $ui-highlight-color; + + &:hover, + &:active, + &:focus { + color: $ui-highlight-color; + background: $white; } } -.status.collapsed .status__content:after { - background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1)); +.account__header__bar .avatar .account__avatar { + border-color: $white; } -.drawer__inner { - background: $ui-base-color; +.getting-started__footer a { + color: $ui-secondary-color; + text-decoration: underline; } -.drawer__inner__mastodon { - background: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important; +.confirmation-modal__secondary-button, +.confirmation-modal__cancel-button, +.mute-modal__cancel-button, +.block-modal__cancel-button { + color: lighten($ui-base-color, 26%); - .mastodon { - filter: contrast(75%) brightness(75%) !important; + &:hover, + &:focus, + &:active { + color: $primary-text-color; } } -// Change the default appearance of the content warning button -.status__content { - - .status__content__spoiler-link { +.column-subheading { + background: darken($ui-base-color, 4%); + border-bottom: 1px solid lighten($ui-base-color, 8%); +} - background: lighten($ui-base-color, 30%); +.getting-started, +.scrollable { + .column-link { + background: $white; + border-bottom: 1px solid lighten($ui-base-color, 8%); - &:hover { - background: lighten($ui-base-color, 35%); - text-decoration: none; + &: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%); + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; } +} +.compose-form__autosuggest-wrapper, +.poll__option input[type="text"], +.compose-form .spoiler-input__input, +.compose-form__poll-wrapper select, +.search__input, +.setting-text, +.report-dialog-modal__textarea, +.audio-player { + border: 1px solid lighten($ui-base-color, 8%); } -// Change the background colors of media and video spoilers -.media-spoiler, -.video-player__spoiler, -.account-gallery__item a { - background: $ui-base-color; +.report-dialog-modal .dialog-option .poll__input { + color: $white; } -// Change the colors used in the dropdown menu -.dropdown-menu { - background: $ui-base-color; +.search__input { + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; + border-bottom: 0; + } } -.dropdown-menu__arrow { +.list-editor .search .search__input { + border-top: 0; + border-bottom: 0; +} - &.left { - border-left-color: $ui-base-color; - } +.compose-form__poll-wrapper select { + background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; +} - &.top { - border-top-color: $ui-base-color; - } +.compose-form__poll-wrapper, +.compose-form__poll-wrapper .poll__footer { + border-top-color: lighten($ui-base-color, 8%); +} - &.bottom { - border-bottom-color: $ui-base-color; - } +.notification__filter-bar { + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} - &.right { - border-right-color: $ui-base-color; - } +.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%); } -.dropdown-menu__item { - a, - button { - background: $ui-base-color; - color: $ui-secondary-color; - } +.drawer__inner__mastodon { + background: $white url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; } -// Change the default color of several parts of the compose form -.composer { +// Change the colors used in compose-form +.compose-form { + .compose-form__modifiers { + .compose-form__upload__actions .icon-button { + color: lighten($white, 7%); - .composer--spoiler input, .compose-form__autosuggest-wrapper textarea { - color: lighten($ui-base-color, 80%); + &:active, + &:focus, + &:hover { + color: $white; + } + } - &:disabled { background: lighten($simple-background-color, 10%) } + .compose-form__upload-description input { + color: lighten($white, 7%); - &::placeholder { - color: lighten($ui-base-color, 70%); + &::placeholder { + color: lighten($white, 7%); + } } } - .composer--options-wrapper { - background: lighten($ui-base-color, 10%); + .compose-form__buttons-wrapper { + background: darken($ui-base-color, 6%); } - .composer--options > hr { - display: none; + .autosuggest-textarea__suggestions { + background: darken($ui-base-color, 6%); } - .composer--options--dropdown--content--item { - color: $ui-primary-color; - - strong { - color: $ui-primary-color; + .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; +} +// Change the background colors of statuses +.focusable:focus { + background: $ui-base-color; } -.composer--upload_form--actions .icon-button { - color: lighten($white, 7%); +.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 { + background: $ui-base-color; - &:active, - &:focus, &:hover { - color: $white; + background: lighten($ui-base-color, 4%); } } -.language-dropdown__dropdown__results__item:hover, -.language-dropdown__dropdown__results__item:focus, -.language-dropdown__dropdown__results__item:active { - background-color: $ui-base-color; +// Change the background colors of media and video spoilers +.media-spoiler, +.video-player__spoiler { + background: $ui-base-color; } -.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, 12%); +.privacy-dropdown.active .privacy-dropdown__value.active .icon-button { + color: $white; } -.report-dialog-modal__container { - border-bottom-color: lighten($ui-base-color, 12%); +.account-gallery__item a { + background-color: $ui-base-color; } -.status__content, -.reply-indicator__content { - a { - color: $highlight-text-color; - } -} +// Change the colors used in the dropdown menu +.dropdown-menu { + background: $white; -.emoji-mart-bar { - border-color: darken($ui-base-color, 4%); + &__arrow { + &.left { + border-left-color: $white; + } - &:first-child { - background: lighten($ui-base-color, 10%); + &.top { + border-top-color: $white; + } + + &.bottom { + border-bottom-color: $white; + } + + &.right { + border-right-color: $white; + } } -} -.emoji-mart-search input { - background: rgba($ui-base-color, 0.3); - border-color: $ui-base-color; + &__item { + a, + button { + background: $white; + color: $darker-text-color; + } + } } -.autosuggest-textarea__suggestions { - background: lighten($ui-base-color, 10%) +// 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, +.language-dropdown__dropdown__results__item.active, +.admin-wrapper .sidebar ul .simple-navigation-active-leaf a, +.simple_form .block-button, +.simple_form .button, +.simple_form button { + color: $white; } -.autosuggest-textarea__suggestions__item { - &:hover, - &:focus, - &:active, - &.selected { - background: darken($ui-base-color, 4%); - } +.language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name { + color: lighten($ui-base-color, 8%); } -.react-toggle-track { - background: $ui-secondary-color; +.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { + color: darken($ui-base-color, 12%); } -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background: lighten($ui-secondary-color, 10%); +.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%); } -.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background: darken($ui-highlight-color, 10%); +.report-dialog-modal__container { + border-top-color: lighten($ui-base-color, 4%); } // Change the background colors of modals .actions-modal, .boost-modal, -.favourite-modal, .confirmation-modal, .mute-modal, .block-modal, @@ -243,12 +378,43 @@ .compare-history-modal, .report-modal__comment .setting-text__wrapper, .report-modal__comment .setting-text, -.report-dialog-modal__textarea { - background: $white; +.announcements, +.picture-in-picture__header, +.picture-in-picture__footer, +.reactions-bar__item { + background: $ui-base-color; border: 1px solid lighten($ui-base-color, 8%); } -.report-dialog-modal .dialog-option .poll__input { +.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 { + background-color: $ui-base-color; +} + +.reactions-bar__item.active { + background-color: mix($white, $ui-highlight-color, 80%); + border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%); +} + +.media-modal__overlay .picture-in-picture__footer { + border: 0; +} + +.picture-in-picture__header { + border-bottom: 0; +} + +.announcements, +.picture-in-picture__footer { + border-top: 0; +} + +.icon-with-badge__badge { + border-color: $white; color: $white; } @@ -260,8 +426,43 @@ border-top-color: lighten($ui-base-color, 8%); } +.column-header__collapsible-inner { + background: darken($ui-base-color, 4%); + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.dashboard__quick-access, +.focal-point__preview strong, +.admin-wrapper .content__heading__tabs a.selected { + color: $white; +} + +.button.button-tertiary { + &:hover, + &:focus, + &:active { + color: $white; + } +} + +.button.button-secondary { + border-color: $darker-text-color; + color: $darker-text-color; + + &:hover, + &:focus, + &:active { + border-color: darken($darker-text-color, 8%); + color: darken($darker-text-color, 8%); + } +} + +.flash-message.warning { + color: lighten($gold-star, 16%); +} + .boost-modal__action-bar, -.favourite-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .block-modal__action-bar, @@ -279,33 +480,134 @@ } } +.display-case__case { + background: $white; +} + +.embed-modal .embed-modal__container .embed-modal__html { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + &:focus { + border-color: lighten($ui-base-color, 12%); + background: $white; + } +} + +.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: lighten($ui-base-color, 60%); + color: $primary-text-color; + background: $white; } // 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%); +} - a { - &.active { - color: $ui-primary-color; - } +.nothing-here, +.page-header, +.directory__tag > a, +.directory__tag > div { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + @media screen and (max-width: $no-gap-breakpoint) { + border-left: 0; + border-right: 0; + border-top: 0; + } +} + +.simple_form { + input[type="text"], + input[type="number"], + input[type="email"], + input[type="password"], + textarea { + &:hover { + border-color: lighten($ui-base-color, 12%); + } + } +} + +.picture-in-picture-placeholder { + background: $white; + border-color: lighten($ui-base-color, 8%); + color: lighten($ui-base-color, 8%); +} + +.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; } @@ -315,17 +617,14 @@ color: $primary-text-color; } } - } - } .accounts-grid { .account-grid-card { - .controls { .icon-button { - color: $ui-secondary-color; + color: $darker-text-color; } } @@ -336,13 +635,53 @@ } .username { - color: $ui-secondary-color; + color: $darker-text-color; } .account__header__content { color: $primary-text-color; } + } +} +.simple_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: rgba($ui-highlight-color, 0.1); + } +} + +.compose-form .compose-form__warning { + border-color: $ui-highlight-color; + background-color: rgba($ui-highlight-color, 0.1); + + &, + a { + color: $ui-highlight-color; + } +} + +.reply-indicator { + background: transparent; + border: 1px solid lighten($ui-base-color, 8%); +} + +.dismissable-banner { + border-left: 1px solid lighten($ui-base-color, 8%); + border-right: 1px solid lighten($ui-base-color, 8%); +} + +.status__content, +.reply-indicator__content { + a { + color: $highlight-text-color; } } @@ -354,6 +693,7 @@ } } +.notification__filter-bar button.active::after, .account__section-headline a.active::after { border-color: transparent transparent $white; } @@ -364,7 +704,10 @@ .activity-stream, .nothing-here, .directory__tag > a, -.directory__tag > div { +.directory__tag > div, +.card > a, +.page-header, +.compose-form .compose-form__warning { box-shadow: none; } @@ -372,3 +715,55 @@ border: 1px solid lighten($ui-base-color, 8%); background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; } + +// Glitch-soc-specific changes + +.glitch.local-settings { + background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 8%); +} + +.glitch.local-settings__navigation { + background: darken($ui-base-color, 8%); +} + +.glitch.local-settings__navigation__item { + background: darken($ui-base-color, 8%); + border-bottom: 1px lighten($ui-base-color, 8%) solid; + + &:hover { + background: $ui-base-color; + } + + &.active { + background: $ui-highlight-color; + color: $white; + } + + &.close, &.close:hover { + background: $error-value-color; + color: $primary-text-color; + } +} + +.notification__dismiss-overlay { + .wrappy { + box-shadow: unset; + + .ckbox { + text-shadow: unset; + } + } +} + +.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,') no-repeat bottom / 100% auto !important; + + .mastodon { + filter: contrast(75%) brightness(75%) !important; + } +} diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss index f1c8a3503..cae065878 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss @@ -7,11 +7,17 @@ $classic-primary-color: #9baec8; $classic-secondary-color: #d9e1e8; $classic-highlight-color: #6364ff; +// Differences +$success-green: lighten(#3c754d, 8%); + +$base-overlay-background: $white !default; +$valid-value-color: $success-green !default; + $ui-base-color: $classic-secondary-color !default; -$ui-base-lighter-color: darken($ui-base-color, 57%); -$ui-highlight-color: $classic-highlight-color !default; -$ui-primary-color: $classic-primary-color !default; +$ui-base-lighter-color: #b0c0cf; +$ui-primary-color: #9bcbed; $ui-secondary-color: $classic-base-color !default; +$ui-highlight-color: $classic-highlight-color !default; $primary-text-color: $black !default; $darker-text-color: $classic-base-color !default; @@ -19,17 +25,14 @@ $highlight-text-color: darken($ui-highlight-color, 8%) !default; $dark-text-color: #444b5d; $action-button-color: #606984; -$success-green: lighten(#3c754d, 8%); - -$base-overlay-background: $white !default; - $inverted-text-color: $black !default; $lighter-text-color: $classic-base-color !default; $light-text-color: #444b5d; +// Newly added colors $account-background-color: $white !default; -//Invert darkened and lightened colors +// Invert darkened and lightened colors @function darken($color, $amount) { @return hsl(hue($color), saturation($color), lightness($color) + $amount); } -- cgit From 0be6da42d34f2a87864e0acab8836d3ac6463229 Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 6 Nov 2022 13:30:37 +0100 Subject: Change glitch-soc composer classes to match upstream --- .../features/compose/components/compose_form.js | 8 +- .../glitch/features/compose/components/dropdown.js | 49 +- .../features/compose/components/dropdown_menu.js | 6 +- .../glitch/features/compose/components/options.js | 3 +- .../features/compose/components/publisher.js | 32 +- .../features/compose/components/reply_indicator.js | 8 +- .../features/compose/components/textarea_icons.js | 2 +- .../glitch/features/compose/components/upload.js | 8 +- .../features/compose/components/upload_form.js | 4 +- .../features/compose/components/upload_progress.js | 13 +- .../glitch/features/compose/components/warning.js | 2 +- .../flavours/glitch/styles/accessibility.scss | 8 +- .../glitch/styles/components/compose_form.scss | 717 +++++++++++++++++++++ .../glitch/styles/components/composer.scss | 712 -------------------- .../flavours/glitch/styles/components/index.scss | 2 +- .../flavours/glitch/styles/components/modal.scss | 4 +- .../glitch/styles/components/single_column.scss | 6 +- .../flavours/glitch/styles/containers.scss | 2 +- app/javascript/flavours/glitch/styles/rtl.scss | 6 +- 19 files changed, 795 insertions(+), 797 deletions(-) create mode 100644 app/javascript/flavours/glitch/styles/components/compose_form.scss delete mode 100644 app/javascript/flavours/glitch/styles/components/composer.scss (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index 0be14e495..516648f4b 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -305,12 +305,12 @@ class ComposeForm extends ImmutablePureComponent { const countText = this.getFulltextForCharacterCounting(); return ( -
+
-
+
-
+
0)} spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler} /> -
+
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown.js b/app/javascript/flavours/glitch/features/compose/components/dropdown.js index 829f6d00f..6b6d3de94 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown.js @@ -16,7 +16,6 @@ import { assignHandlers } from 'flavours/glitch/utils/react_helpers'; export default class ComposerOptionsDropdown extends React.PureComponent { static propTypes = { - active: PropTypes.bool, disabled: PropTypes.bool, icon: PropTypes.string, items: PropTypes.arrayOf(PropTypes.shape({ @@ -162,7 +161,6 @@ export default class ComposerOptionsDropdown extends React.PureComponent { // Rendering. render () { const { - active, disabled, title, icon, @@ -174,35 +172,34 @@ export default class ComposerOptionsDropdown extends React.PureComponent { closeOnChange, } = this.props; const { open, placement } = this.state; - const computedClass = classNames('composer--options--dropdown', { - active, - open, - top: placement === 'top', - }); - // The result. + const active = value && items.findIndex(({ name }) => name === value) === (placement === 'bottom' ? 0 : (items.length - 1)); + return (
- +
+ +
+ {icon && } -
+
{text} {meta}
@@ -218,7 +218,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent // size will be used to determine the coordinate of the menu by // react-overlays
+
!!value)} disabled={disabled || isEditing} icon='ellipsis-h' items={advancedOptions ? [ diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.js b/app/javascript/flavours/glitch/features/compose/components/publisher.js index 50baad065..9d53b7ee3 100644 --- a/app/javascript/flavours/glitch/features/compose/components/publisher.js +++ b/app/javascript/flavours/glitch/features/compose/components/publisher.js @@ -48,7 +48,7 @@ class Publisher extends ImmutablePureComponent { const { countText, disabled, intl, onSecondarySubmit, privacy, sideArm, isEditing } = this.props; const diff = maxChars - length(countText || ''); - const computedClass = classNames('composer--publisher', { + const computedClass = classNames('compose-form__publish', { disabled: disabled, over: diff < 0, }); @@ -72,22 +72,26 @@ class Publisher extends ImmutablePureComponent { return (
{sideArm && !isEditing && sideArm !== 'none' ? ( +
+
+ ) : null} +
); }; diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js index 37ae9cab9..7ad9e2b64 100644 --- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js +++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js @@ -49,10 +49,10 @@ class ReplyIndicator extends ImmutablePureComponent { // The result. return ( -
-
+
+
{attachments.size > 0 && ( diff --git a/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js b/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js index b875fb15e..25c2443b1 100644 --- a/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js +++ b/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js @@ -38,7 +38,7 @@ class TextareaIcons extends ImmutablePureComponent { render () { const { advancedOptions, intl } = this.props; return ( -
+
{advancedOptions ? iconMap.map( ([key, icon, message]) => advancedOptions.get(key) ? ( +
{({ scale }) => ( -
-
+
+
{!isEditingStatus && ()}
{(media.get('description') || '').length === 0 && ( -
+
)} diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_form.js b/app/javascript/flavours/glitch/features/compose/components/upload_form.js index 35880ddcc..7ebbac963 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/upload_form.js @@ -14,11 +14,11 @@ export default class UploadForm extends ImmutablePureComponent { const { mediaIds } = this.props; return ( -
+
{mediaIds.size > 0 && ( -
+
{mediaIds.map(id => ( ))} diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_progress.js b/app/javascript/flavours/glitch/features/compose/components/upload_progress.js index c7c33c418..39ac31053 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload_progress.js +++ b/app/javascript/flavours/glitch/features/compose/components/upload_progress.js @@ -29,17 +29,18 @@ export default class UploadProgress extends React.PureComponent { } return ( -
- +
+
+ +
-
+
{message} -
+
{({ width }) => - (
) +
}
diff --git a/app/javascript/flavours/glitch/features/compose/components/warning.js b/app/javascript/flavours/glitch/features/compose/components/warning.js index 4009be8c6..803b7f86a 100644 --- a/app/javascript/flavours/glitch/features/compose/components/warning.js +++ b/app/javascript/flavours/glitch/features/compose/components/warning.js @@ -15,7 +15,7 @@ export default class Warning extends React.PureComponent { return ( {({ opacity, scaleX, scaleY }) => ( -
+
{message}
)} diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss index 9b36bfd8d..7bffb2e26 100644 --- a/app/javascript/flavours/glitch/styles/accessibility.scss +++ b/app/javascript/flavours/glitch/styles/accessibility.scss @@ -29,22 +29,22 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' .hicolor-privacy-icons { .status__visibility-icon.fa-globe, - .composer--options--dropdown--content--item .fa-globe { + .privacy-dropdown__option .fa-globe { color: #1976d2; } .status__visibility-icon.fa-unlock, - .composer--options--dropdown--content--item .fa-unlock { + .privacy-dropdown__option .fa-unlock { color: #388e3c; } .status__visibility-icon.fa-lock, - .composer--options--dropdown--content--item .fa-lock { + .privacy-dropdown__option .fa-lock { color: #ffa000; } .status__visibility-icon.fa-envelope, - .composer--options--dropdown--content--item .fa-envelope { + .privacy-dropdown__option .fa-envelope { color: #d32f2f; } } diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss new file mode 100644 index 000000000..72d3aad1d --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -0,0 +1,717 @@ +.compose-form { + padding: 10px; + + .emoji-picker-dropdown { + position: absolute; + top: 0; + right: 0; + + ::-webkit-scrollbar-track:hover, + ::-webkit-scrollbar-track:active { + background-color: rgba($base-overlay-background, 0.3); + } + } +} + +.character-counter { + cursor: default; + font-family: $font-sans-serif, sans-serif; + font-size: 14px; + font-weight: 600; + color: $lighter-text-color; + + &.character-counter--over { + color: $warning-red; + } +} + +.no-reduce-motion .spoiler-input { + transition: height 0.4s ease, opacity 0.4s ease; +} + +.spoiler-input { + height: 0; + transform-origin: bottom; + opacity: 0.0; + + &.spoiler-input--visible { + height: 36px; + margin-bottom: 11px; + opacity: 1.0; + } + + input { + display: block; + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 4px; + padding: 10px; + width: 100%; + outline: 0; + color: $inverted-text-color; + background: $simple-background-color; + font-size: 14px; + font-family: inherit; + resize: vertical; + + &::placeholder { + color: $dark-text-color; + } + + &:focus { outline: 0 } + @include single-column('screen and (max-width: 630px)') { font-size: 16px } + } +} + +.compose-form__warning { + color: $inverted-text-color; + margin-bottom: 15px; + background: $ui-primary-color; + box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); + padding: 8px 10px; + border-radius: 4px; + font-size: 13px; + font-weight: 400; + + a { + color: $lighter-text-color; + font-weight: 500; + text-decoration: underline; + + &:active, + &:focus, + &:hover { + text-decoration: none; + } + } +} + +.compose-form__sensitive-button { + padding: 10px; + padding-top: 0; + + font-size: 14px; + font-weight: 500; + + &.active { + color: $highlight-text-color; + } + + input[type=checkbox] { + display: none; + } + + .checkbox { + display: inline-block; + position: relative; + border: 1px solid $ui-primary-color; + box-sizing: border-box; + width: 18px; + height: 18px; + flex: 0 0 auto; + margin-left: 5px; + margin-right: 10px; + top: -1px; + border-radius: 4px; + vertical-align: middle; + + &.active { + border-color: $highlight-text-color; + background: $highlight-text-color; + } + } +} + +.reply-indicator { + margin: 0 0 10px; + border-radius: 4px; + padding: 10px; + background: $ui-primary-color; + min-height: 23px; + overflow-y: auto; + flex: 0 2 auto; +} + +.reply-indicator__header { + margin-bottom: 5px; + overflow: hidden; + + & > .account.small { color: $inverted-text-color; } +} + +.reply-indicator__cancel { + float: right; + line-height: 24px; +} + +.reply-indicator__content { + position: relative; + margin: 10px 0; + padding: 0 12px; + font-size: 14px; + line-height: 20px; + color: $inverted-text-color; + word-wrap: break-word; + font-weight: 400; + overflow: visible; + white-space: pre-wrap; + padding-top: 5px; + overflow: hidden; + + p, pre, blockquote { + margin-bottom: 20px; + white-space: pre-wrap; + + &:last-child { + margin-bottom: 0; + } + } + + h1, h2, h3, h4, h5 { + margin-top: 20px; + margin-bottom: 20px; + } + + h1, h2 { + font-weight: 700; + font-size: 18px; + } + + h2 { + font-size: 16px; + } + + h3, h4, h5 { + font-weight: 500; + } + + blockquote { + padding-left: 10px; + border-left: 3px solid $inverted-text-color; + color: $inverted-text-color; + white-space: normal; + + p:last-child { + margin-bottom: 0; + } + } + + b, strong { + font-weight: 700; + } + + em, i { + font-style: italic; + } + + sub { + font-size: smaller; + vertical-align: sub; + } + + sup { + font-size: smaller; + vertical-align: super; + } + + ul, ol { + margin-left: 1em; + + p { + margin: 0; + } + } + + ul { + list-style-type: disc; + } + + ol { + list-style-type: decimal; + } + + a { + color: $lighter-text-color; + text-decoration: none; + + &:hover { text-decoration: underline } + + &.mention { + &:hover { + text-decoration: none; + + span { text-decoration: underline } + } + } + } + + .emojione { + width: 20px; + height: 20px; + margin: -5px 0 0; + } +} + +.compose-form .compose-form__autosuggest-wrapper { + position: relative; +} + +.compose-form .autosuggest-textarea, +.compose-form .autosuggest-input { + position: relative; + width: 100%; + + label { + .autosuggest-textarea__textarea { + display: block; + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 4px 4px 0 0; + padding: 10px 32px 0 10px; + width: 100%; + min-height: 100px; + outline: 0; + color: $inverted-text-color; + background: $simple-background-color; + font-size: 14px; + font-family: inherit; + resize: none; + scrollbar-color: initial; + + &::placeholder { + color: $dark-text-color; + } + + &::-webkit-scrollbar { + all: unset; + } + + &:focus { + outline: 0; + } + + @include single-column('screen and (max-width: 630px)') { + font-size: 16px; + } + + @include limited-single-column('screen and (max-width: 600px)') { + height: 100px !important; // prevent auto-resize textarea + resize: vertical; + } + } + } +} + +.compose-form__textarea-icons { + display: block; + position: absolute; + top: 29px; + right: 5px; + bottom: 5px; + overflow: hidden; + + & > .textarea_icon { + display: block; + margin: 2px 0 0 2px; + width: 24px; + height: 24px; + color: $lighter-text-color; + font-size: 18px; + line-height: 24px; + text-align: center; + opacity: .8; + } +} + +.autosuggest-textarea__suggestions-wrapper { + position: relative; + height: 0; +} + +.autosuggest-textarea__suggestions { + display: block; + position: absolute; + box-sizing: border-box; + top: 100%; + border-radius: 0 0 4px 4px; + padding: 6px; + width: 100%; + color: $inverted-text-color; + background: $ui-secondary-color; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + font-size: 14px; + z-index: 99; + display: none; +} + +.autosuggest-textarea__suggestions--visible { + display: block; +} + +.autosuggest-textarea__suggestions__item { + padding: 10px; + cursor: pointer; + border-radius: 4px; + + &:hover, + &:focus, + &:active, + &.selected { background: darken($ui-secondary-color, 10%) } + + > .account, + > .emoji, + > .autosuggest-hashtag { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + line-height: 18px; + font-size: 14px; + } + + .autosuggest-hashtag { + justify-content: space-between; + + &__name { + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + strong { + font-weight: 500; + } + + &__uses { + flex: 0 0 auto; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + & > .account.small { + .display-name { + & > span { color: $lighter-text-color } + } + } +} + +.compose-form__upload-wrapper { + overflow: hidden; +} + +.compose-form__uploads-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-family: inherit; + padding: 5px; + overflow: hidden; +} + +.compose-form__upload { + flex: 1 1 0; + margin: 5px; + min-width: 40%; + + .compose-form__upload-thumbnail { + position: relative; + border-radius: 4px; + height: 140px; + width: 100%; + background-color: $base-shadow-color; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + overflow: hidden; + + & > .close { mix-blend-mode: difference } + } + + .icon-button { + flex: 0 1 auto; + color: $secondary-text-color; + font-size: 14px; + font-weight: 500; + padding: 10px; + font-family: inherit; + + &:hover, + &:focus, + &:active { + color: lighten($secondary-text-color, 7%); + } + } + + &__warning { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + box-sizing: border-box; + background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + } +} + +.compose-form__upload__actions { + background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + display: flex; + align-items: flex-start; + justify-content: space-between; +} + +.upload-progress { + display: flex; + padding: 10px; + color: $darker-text-color; + overflow: hidden; + + .fa { + font-size: 34px; + margin-right: 10px; + } + + span { + display: block; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + } +} + +.upload-progress__message { + flex: 1 1 auto; +} + +.upload-progress__backdrop { + position: relative; + margin-top: 5px; + border-radius: 6px; + width: 100%; + height: 6px; + background: $ui-base-lighter-color; +} + +.upload-progress__tracker { + position: absolute; + top: 0; + left: 0; + height: 6px; + border-radius: 6px; + background: $ui-highlight-color; +} + +.compose-form__modifiers { + color: $inverted-text-color; + font-family: inherit; + font-size: 14px; + background: $simple-background-color; +} + +.compose-form__buttons-wrapper { + padding: 10px; + background: darken($simple-background-color, 8%); + border-radius: 0 0 4px 4px; + height: 27px; + display: flex; + justify-content: space-between; + flex: 0 0 auto; +} + +.compose-form__buttons { + display: flex; + flex: 0 0 auto; + + & .icon-button, + & .text-icon-button { + display: inline-block; + box-sizing: content-box; + padding: 0 3px; + height: 27px; + line-height: 27px; + vertical-align: bottom; + } + + & > hr { + display: inline-block; + margin: 0 3px; + border-width: 0 0 0 1px; + border-style: none none none solid; + border-color: transparent transparent transparent darken($simple-background-color, 24%); + padding: 0; + width: 0; + height: 27px; + background: transparent; + } +} + +.character-counter__wrapper { + align-self: center; + margin-right: 4px; +} + +.privacy-dropdown.active { + .privacy-dropdown__value { + background: $simple-background-color; + border-radius: 4px 4px 0 0; + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + + .icon-button { + transition: none; + } + + &.active { + background: $ui-highlight-color; + + .icon-button { + color: $primary-text-color; + } + } + } + + &.top .privacy-dropdown__value { + border-radius: 0 0 4px 4px; + } + + .privacy-dropdown__dropdown { + display: block; + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + } +} + +.privacy-dropdown__dropdown { + position: absolute; + border-radius: 4px; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + background: $simple-background-color; + overflow: hidden; + transform-origin: 50% 0; +} + +.privacy-dropdown__option { + display: flex; + align-items: center; + padding: 10px; + color: $inverted-text-color; + cursor: pointer; + + .privacy-dropdown__option__content { + flex: 1 1 auto; + color: $lighter-text-color; + + &:not(:first-child) { margin-left: 10px } + + strong { + display: block; + color: $inverted-text-color; + font-weight: 500; + } + } + + &:hover, + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + + .privacy-dropdown__option__content { + color: $primary-text-color; + + strong { color: $primary-text-color } + } + } + + &.active:hover { background: lighten($ui-highlight-color, 4%) } +} + +.compose-form__publish { + display: flex; + justify-content: flex-end; + min-width: 0; + flex: 0 0 auto; + column-gap: 5px; + + .compose-form__publish-button-wrapper { + overflow: hidden; + padding-top: 10px; + + button { + padding: 7px 10px; + text-align: center; + } + + & > .side_arm { + width: 36px; + } + } +} + +.language-dropdown { + &__dropdown { + position: absolute; + background: $simple-background-color; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + border-radius: 4px; + overflow: hidden; + z-index: 2; + + &.top { + transform-origin: 50% 100%; + } + + &.bottom { + transform-origin: 50% 0; + } + + .emoji-mart-search { + padding-right: 10px; + } + + .emoji-mart-search-icon { + right: 10px + 5px; + } + + .emoji-mart-scroll { + padding: 0 10px 10px; + } + + &__results { + &__item { + cursor: pointer; + color: $inverted-text-color; + font-weight: 500; + padding: 10px; + border-radius: 4px; + + &:focus, + &:active, + &:hover { + background: $ui-secondary-color; + } + + &__common-name { + color: $darker-text-color; + } + + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + outline: 0; + + .language-dropdown__dropdown__results__item__common-name { + color: $secondary-text-color; + } + + &:hover { + background: lighten($ui-highlight-color, 4%); + } + } + } + } + } +} diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss deleted file mode 100644 index da086833c..000000000 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ /dev/null @@ -1,712 +0,0 @@ -.composer { - padding: 10px; - - .emoji-picker-dropdown { - position: absolute; - top: 0; - right: 0; - - ::-webkit-scrollbar-track:hover, - ::-webkit-scrollbar-track:active { - background-color: rgba($base-overlay-background, 0.3); - } - } -} - -.character-counter { - cursor: default; - font-family: $font-sans-serif, sans-serif; - font-size: 14px; - font-weight: 600; - color: $lighter-text-color; - - &.character-counter--over { - color: $warning-red; - } -} - -.no-reduce-motion .composer--spoiler { - transition: height 0.4s ease, opacity 0.4s ease; -} - -.composer--spoiler { - height: 0; - transform-origin: bottom; - opacity: 0.0; - - &.composer--spoiler--visible { - height: 36px; - margin-bottom: 11px; - opacity: 1.0; - } - - input { - display: block; - box-sizing: border-box; - margin: 0; - border: 0; - border-radius: 4px; - padding: 10px; - width: 100%; - outline: 0; - color: $inverted-text-color; - background: $simple-background-color; - font-size: 14px; - font-family: inherit; - resize: vertical; - - &::placeholder { - color: $dark-text-color; - } - - &:focus { outline: 0 } - @include single-column('screen and (max-width: 630px)') { font-size: 16px } - } -} - -.composer--warning { - color: $inverted-text-color; - margin-bottom: 15px; - background: $ui-primary-color; - box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); - padding: 8px 10px; - border-radius: 4px; - font-size: 13px; - font-weight: 400; - - a { - color: $lighter-text-color; - font-weight: 500; - text-decoration: underline; - - &:active, - &:focus, - &:hover { - text-decoration: none; - } - } -} - -.compose-form__sensitive-button { - padding: 10px; - padding-top: 0; - - font-size: 14px; - font-weight: 500; - - &.active { - color: $highlight-text-color; - } - - input[type=checkbox] { - display: none; - } - - .checkbox { - display: inline-block; - position: relative; - border: 1px solid $ui-primary-color; - box-sizing: border-box; - width: 18px; - height: 18px; - flex: 0 0 auto; - margin-left: 5px; - margin-right: 10px; - top: -1px; - border-radius: 4px; - vertical-align: middle; - - &.active { - border-color: $highlight-text-color; - background: $highlight-text-color; - } - } -} - -.composer--reply { - margin: 0 0 10px; - border-radius: 4px; - padding: 10px; - background: $ui-primary-color; - min-height: 23px; - overflow-y: auto; - flex: 0 2 auto; - - & > header { - margin-bottom: 5px; - overflow: hidden; - - & > .account.small { color: $inverted-text-color; } - - & > .cancel { - float: right; - line-height: 24px; - } - } - - & > .content { - position: relative; - margin: 10px 0; - padding: 0 12px; - font-size: 14px; - line-height: 20px; - color: $inverted-text-color; - word-wrap: break-word; - font-weight: 400; - overflow: visible; - white-space: pre-wrap; - padding-top: 5px; - overflow: hidden; - - p, pre, blockquote { - margin-bottom: 20px; - white-space: pre-wrap; - - &:last-child { - margin-bottom: 0; - } - } - - h1, h2, h3, h4, h5 { - margin-top: 20px; - margin-bottom: 20px; - } - - h1, h2 { - font-weight: 700; - font-size: 18px; - } - - h2 { - font-size: 16px; - } - - h3, h4, h5 { - font-weight: 500; - } - - blockquote { - padding-left: 10px; - border-left: 3px solid $inverted-text-color; - color: $inverted-text-color; - white-space: normal; - - p:last-child { - margin-bottom: 0; - } - } - - b, strong { - font-weight: 700; - } - - em, i { - font-style: italic; - } - - sub { - font-size: smaller; - vertical-align: sub; - } - - sup { - font-size: smaller; - vertical-align: super; - } - - ul, ol { - margin-left: 1em; - - p { - margin: 0; - } - } - - ul { - list-style-type: disc; - } - - ol { - list-style-type: decimal; - } - - a { - color: $lighter-text-color; - text-decoration: none; - - &:hover { text-decoration: underline } - - &.mention { - &:hover { - text-decoration: none; - - span { text-decoration: underline } - } - } - } - } - - .emojione { - width: 20px; - height: 20px; - margin: -5px 0 0; - } -} - -.compose-form__autosuggest-wrapper, -.autosuggest-input { - position: relative; - width: 100%; - - label { - .autosuggest-textarea__textarea { - display: block; - box-sizing: border-box; - margin: 0; - border: 0; - border-radius: 4px 4px 0 0; - padding: 10px 32px 0 10px; - width: 100%; - min-height: 100px; - outline: 0; - color: $inverted-text-color; - background: $simple-background-color; - font-size: 14px; - font-family: inherit; - resize: none; - scrollbar-color: initial; - - &::placeholder { - color: $dark-text-color; - } - - &::-webkit-scrollbar { - all: unset; - } - - &:disabled { - background: $ui-secondary-color; - } - - &:focus { - outline: 0; - } - - @include single-column('screen and (max-width: 630px)') { - font-size: 16px; - } - - @include limited-single-column('screen and (max-width: 600px)') { - height: 100px !important; // prevent auto-resize textarea - resize: vertical; - } - } - } -} - -.composer--textarea--icons { - display: block; - position: absolute; - top: 29px; - right: 5px; - bottom: 5px; - overflow: hidden; - - & > .textarea_icon { - display: block; - margin: 2px 0 0 2px; - width: 24px; - height: 24px; - color: $lighter-text-color; - font-size: 18px; - line-height: 24px; - text-align: center; - opacity: .8; - } -} - -.autosuggest-textarea__suggestions-wrapper { - position: relative; - height: 0; -} - -.autosuggest-textarea__suggestions { - display: block; - position: absolute; - box-sizing: border-box; - top: 100%; - border-radius: 0 0 4px 4px; - padding: 6px; - width: 100%; - color: $inverted-text-color; - background: $ui-secondary-color; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); - font-size: 14px; - z-index: 99; - display: none; -} - -.autosuggest-textarea__suggestions--visible { - display: block; -} - -.autosuggest-textarea__suggestions__item { - padding: 10px; - cursor: pointer; - border-radius: 4px; - - &:hover, - &:focus, - &:active, - &.selected { background: darken($ui-secondary-color, 10%) } - - > .account, - > .emoji, - > .autosuggest-hashtag { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - line-height: 18px; - font-size: 14px; - } - - .autosuggest-hashtag { - justify-content: space-between; - - &__name { - flex: 1 1 auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - strong { - font-weight: 500; - } - - &__uses { - flex: 0 0 auto; - text-align: right; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - & > .account.small { - .display-name { - & > span { color: $lighter-text-color } - } - } -} - -.composer--upload_form { - overflow: hidden; - - & > .content { - display: flex; - flex-direction: row; - flex-wrap: wrap; - font-family: inherit; - padding: 5px; - overflow: hidden; - } -} - -.composer--upload_form--item { - flex: 1 1 0; - margin: 5px; - min-width: 40%; - - & > div { - position: relative; - border-radius: 4px; - height: 140px; - width: 100%; - background-color: $base-shadow-color; - background-position: center; - background-size: cover; - background-repeat: no-repeat; - overflow: hidden; - - & > .close { mix-blend-mode: difference } - } - - .icon-button { - flex: 0 1 auto; - color: $secondary-text-color; - font-size: 14px; - font-weight: 500; - padding: 10px; - font-family: inherit; - - &:hover, - &:focus, - &:active { - color: lighten($secondary-text-color, 7%); - } - } - - &__warning { - position: absolute; - z-index: 2; - bottom: 0; - left: 0; - right: 0; - box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); - } -} - -.composer--upload_form--actions { - background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); - display: flex; - align-items: flex-start; - justify-content: space-between; -} - -.composer--upload_form--progress { - display: flex; - padding: 10px; - color: $darker-text-color; - overflow: hidden; - - & > .fa { - font-size: 34px; - margin-right: 10px; - } - - & > .message { - flex: 1 1 auto; - - & > span { - display: block; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - } - - & > .backdrop { - position: relative; - margin-top: 5px; - border-radius: 6px; - width: 100%; - height: 6px; - background: $ui-base-lighter-color; - - & > .tracker { - position: absolute; - top: 0; - left: 0; - height: 6px; - border-radius: 6px; - background: $ui-highlight-color; - } - } - } -} - -.compose-form__modifiers { - color: $inverted-text-color; - font-family: inherit; - font-size: 14px; - background: $simple-background-color; -} - -.composer--options-wrapper { - padding: 10px; - background: darken($simple-background-color, 8%); - border-radius: 0 0 4px 4px; - height: 27px; - display: flex; - justify-content: space-between; - flex: 0 0 auto; -} - -.composer--options { - display: flex; - flex: 0 0 auto; - - & .icon-button, - & .text-icon-button { - display: inline-block; - box-sizing: content-box; - padding: 0 3px; - height: 27px; - line-height: 27px; - vertical-align: bottom; - } - - & > hr { - display: inline-block; - margin: 0 3px; - border-width: 0 0 0 1px; - border-style: none none none solid; - border-color: transparent transparent transparent darken($simple-background-color, 24%); - padding: 0; - width: 0; - height: 27px; - background: transparent; - } -} - -.compose--counter-wrapper { - align-self: center; - margin-right: 4px; -} - -.composer--options--dropdown { - &.open { - & > .value { - border-radius: 4px 4px 0 0; - box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); - color: $primary-text-color; - background: $ui-highlight-color; - transition: none; - } - &.top { - & > .value { - border-radius: 0 0 4px 4px; - box-shadow: 0 4px 4px rgba($base-shadow-color, 0.1); - } - } - } -} - -.composer--options--dropdown--content { - position: absolute; - border-radius: 4px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - background: $simple-background-color; - overflow: hidden; - transform-origin: 50% 0; -} - -.composer--options--dropdown--content--item { - display: flex; - align-items: center; - padding: 10px; - color: $inverted-text-color; - cursor: pointer; - - & > .content { - flex: 1 1 auto; - color: $lighter-text-color; - - &:not(:first-child) { margin-left: 10px } - - strong { - display: block; - color: $inverted-text-color; - font-weight: 500; - } - } - - &:hover, - &.active { - background: $ui-highlight-color; - color: $primary-text-color; - - & > .content { - color: $primary-text-color; - - strong { color: $primary-text-color } - } - } - - &.active:hover { background: lighten($ui-highlight-color, 4%) } -} - -.composer--publisher { - padding-top: 10px; - text-align: right; - white-space: nowrap; - overflow: hidden; - justify-content: flex-end; - flex: 0 0 auto; - - & > .primary { - display: inline-block; - margin: 0; - padding: 7px 10px; - text-align: center; - } - - & > .side_arm { - display: inline-block; - margin: 0 5px; - padding: 7px 0; - width: 36px; - text-align: center; - } - - &.over { - & > .count { color: $warning-red } - } -} - -.language-dropdown { - &__dropdown { - position: absolute; - background: $simple-background-color; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - border-radius: 4px; - overflow: hidden; - z-index: 2; - - &.top { - transform-origin: 50% 100%; - } - - &.bottom { - transform-origin: 50% 0; - } - - .emoji-mart-search { - padding-right: 10px; - } - - .emoji-mart-search-icon { - right: 10px + 5px; - } - - .emoji-mart-scroll { - padding: 0 10px 10px; - } - - &__results { - &__item { - cursor: pointer; - color: $inverted-text-color; - font-weight: 500; - padding: 10px; - border-radius: 4px; - - &:focus, - &:active, - &:hover { - background: $ui-secondary-color; - } - - &__common-name { - color: $darker-text-color; - } - - &.active { - background: $ui-highlight-color; - color: $primary-text-color; - outline: 0; - - .language-dropdown__dropdown__results__item__common-name { - color: $secondary-text-color; - } - - &:hover { - background: lighten($ui-highlight-color, 4%); - } - } - } - } - } -} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index c3276b035..b00038afd 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1738,7 +1738,7 @@ noscript { @import 'domains'; @import 'status'; @import 'modal'; -@import 'composer'; +@import 'compose_form'; @import 'columns'; @import 'regeneration_indicator'; @import 'directory'; diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index cd96f83d6..711d4d5b2 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -1290,11 +1290,11 @@ } } -.modal-root__container .composer--options--dropdown { +.modal-root__container .privacy-dropdown { flex-grow: 0; } -.modal-root__container .composer--options--dropdown--content { +.modal-root__container .privacy-dropdown__dropdown { pointer-events: auto; z-index: 9999; } diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 1f1d7d68d..d91306151 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -41,7 +41,7 @@ flex: 0 1 48px; } - .composer { + .compose-form { flex: 1; overflow-y: hidden; display: flex; @@ -59,10 +59,6 @@ .autosuggest-textarea__textarea { overflow-y: hidden; } - - .compose-form__upload-thumbnail { - height: 80px; - } } .navigation-panel { diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index 75472646e..a3aee7eef 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -37,7 +37,7 @@ } .compose-standalone { - .composer { + .compose-form { width: 400px; margin: 0 auto; padding: 20px 0; diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index 31d1de376..2419691cd 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -36,15 +36,11 @@ body.rtl { margin-left: 5px; } - .composer .compose--counter-wrapper { + .compose-form .character-counter__wrapper { margin-right: 0; margin-left: 4px; } - .composer--publisher { - text-align: left; - } - .boost-modal__status-time, .favourite-modal__status-time { float: left; -- cgit