diff options
Diffstat (limited to 'app/javascript')
5 files changed, 109 insertions, 14 deletions
diff --git a/app/javascript/mastodon/features/ui/components/embed_modal.js b/app/javascript/mastodon/features/ui/components/embed_modal.js index 982781db0..4679c9650 100644 --- a/app/javascript/mastodon/features/ui/components/embed_modal.js +++ b/app/javascript/mastodon/features/ui/components/embed_modal.js @@ -1,8 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { FormattedMessage, injectIntl } from 'react-intl'; -import api from '../../../api'; +import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; +import api from 'mastodon/api'; +import IconButton from 'mastodon/components/icon_button'; + +const messages = defineMessages({ + close: { id: 'lightbox.close', defaultMessage: 'Close' }, +}); export default @injectIntl class EmbedModal extends ImmutablePureComponent { @@ -50,13 +55,17 @@ class EmbedModal extends ImmutablePureComponent { } render () { + const { intl, onClose } = this.props; const { oembed } = this.state; return ( - <div className='modal-root__modal embed-modal'> - <h4><FormattedMessage id='status.embed' defaultMessage='Embed' /></h4> + <div className='modal-root__modal report-modal embed-modal'> + <div className='report-modal__target'> + <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} /> + <FormattedMessage id='status.embed' defaultMessage='Embed' /> + </div> - <div className='embed-modal__container'> + <div className='report-modal__container embed-modal__container' style={{ display: 'block' }}> <p className='hint'> <FormattedMessage id='embed.instructions' defaultMessage='Embed this status on your website by copying the code below.' /> </p> diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 45305d696..05e52966b 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -14,15 +14,49 @@ html { } } +.status-card__actions button, +.status-card__actions a { + color: rgba($white, 0.8); + + &:hover, + &:active, + &:focus { + color: $white; + } +} + // Change default background colors of columns .column > .scrollable, .getting-started, -.column-inline-form { +.column-inline-form, +.error-column, +.regeneration-indicator { background: $white; border: 1px solid lighten($ui-base-color, 8%); border-top: 0; } +.directory__card__img { + background: lighten($ui-base-color, 12%); +} + +.filter-form, +.directory__card__bar { + background: $white; + border-bottom: 1px solid lighten($ui-base-color, 8%); +} + +.scrollable .directory__list { + width: calc(100% + 2px); + margin-left: -1px; + margin-right: -1px; +} + +.directory__card, +.table-of-contents { + border: 1px solid lighten($ui-base-color, 8%); +} + .column-back-button, .column-header { background: $white; @@ -33,16 +67,16 @@ html { } &--slim-button { - border: 0; - top: -49px; - right: 1px; + top: -50px; + right: 0; } } .column-header__back-button, .column-header__button, .column-header__button.active, -.account__header__bar { +.account__header__bar, +.directory__card__extra { background: $white; } @@ -66,6 +100,19 @@ html { text-decoration: underline; } +.confirmation-modal__secondary-button, +.confirmation-modal__cancel-button, +.mute-modal__cancel-button, +.block-modal__cancel-button { + color: lighten($ui-base-color, 26%); + + &:hover, + &:focus, + &:active { + color: $primary-text-color; + } +} + .column-subheading { background: darken($ui-base-color, 4%); border-bottom: 1px solid lighten($ui-base-color, 8%); @@ -314,8 +361,19 @@ html { .report-modal, .embed-modal, .error-modal, -.onboarding-modal { - background: $ui-base-color; +.onboarding-modal, +.report-modal__comment .setting-text__wrapper, +.report-modal__comment .setting-text { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); +} + +.report-modal__comment { + border-right-color: lighten($ui-base-color, 8%); +} + +.report-modal__container { + border-top-color: lighten($ui-base-color, 8%); } .column-header__collapsible-inner { @@ -324,6 +382,10 @@ html { border-top: 0; } +.focal-point__preview strong { + color: $white; +} + .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, @@ -348,9 +410,11 @@ html { .embed-modal .embed-modal__container .embed-modal__html { background: $white; + border: 1px solid lighten($ui-base-color, 8%); &:focus { - background: darken($ui-base-color, 6%); + border-color: lighten($ui-base-color, 12%); + background: $white; } } diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss index 01748148f..c68944528 100644 --- a/app/javascript/styles/mastodon-light/variables.scss +++ b/app/javascript/styles/mastodon-light/variables.scss @@ -8,7 +8,7 @@ $classic-secondary-color: #d9e1e8; $classic-highlight-color: #2b90d9; // Differences -$success-green: #3c754d; +$success-green: lighten(#3c754d, 8%); $base-overlay-background: $white !default; $valid-value-color: $success-green !default; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 433370dfd..42b1adaf9 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1486,6 +1486,10 @@ a.account__display-name { color: inherit; } +.detailed-status .button.logo-button { + margin-bottom: 15px; +} + .detailed-status__display-name { color: $secondary-text-color; display: block; @@ -4854,6 +4858,7 @@ a.status-card.compact:hover { &:focus, &:active { color: darken($lighter-text-color, 4%); + background-color: transparent; } } @@ -5850,6 +5855,7 @@ noscript { } .embed-modal { + width: auto; max-width: 80vw; max-height: 80vh; @@ -5880,6 +5886,7 @@ noscript { font-size: 14px; margin: 0; margin-bottom: 15px; + border-radius: 4px; &::-moz-focus-inner { border: 0; @@ -5905,6 +5912,7 @@ noscript { max-width: 100%; overflow: hidden; border: 0; + border-radius: 4px; } } } diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 2d1bf1abd..319f8c94d 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -412,6 +412,20 @@ } } + .directory__card { + border-radius: 4px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + } + } + + .page-header { + @media screen and (max-width: $no-gap-breakpoint) { + border-bottom: 0; + } + } + .public-account-header { overflow: hidden; margin-bottom: 10px; |