From fd7f212f150a285844dade6dad6551852bfa5442 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sun, 29 Apr 2018 16:30:05 +0200 Subject: [PATCH 01/24] Fix style of account fields form --- app/javascript/flavours/glitch/styles/forms.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 2bef53cff7..0a43f14b73 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -15,6 +15,18 @@ code { overflow: hidden; } + .row { + display: flex; + margin: 0 -5px; + + .input { + box-sizing: border-box; + flex: 1 1 auto; + width: 50%; + padding: 0 5px; + } + } + span.hint { display: block; color: $ui-primary-color; From 2df57af401535da74eeab18940efdfb7fb785631 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sun, 29 Apr 2018 16:24:15 +0200 Subject: [PATCH 02/24] Implement tootsuite-style account fields glitch-soc-style still in backup, both sharing the same SCSS style --- .../features/account/components/header.js | 52 ++++++++++++------- .../flavours/glitch/reducers/accounts.js | 8 +++ .../glitch/styles/components/metadata.scss | 5 +- .../flavours/glitch/styles/metadata.scss | 2 +- app/views/accounts/_header.html.haml | 15 +++--- 5 files changed, 52 insertions(+), 30 deletions(-) diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index a208f1a8e5..7a0a2dfa96 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -37,6 +37,7 @@ export default class Header extends ImmutablePureComponent { } let displayName = account.get('display_name_html'); + let fields = account.get('fields'); let info = ''; let mutingInfo = ''; let actionBtn = ''; @@ -100,30 +101,43 @@ export default class Header extends ImmutablePureComponent { @{account.get('acct')} {account.get('locked') ? : null}
+ {fields.size > 0 && ( + + + {fields.map((pair, i) => ( + + + ))} + +
+ +
+ )} + + {fields.size == 0 && metadata.length && ( + + + {(() => { + let data = []; + for (let i = 0; i < metadata.length; i++) { + data.push( + + + + + ); + } + return data; + })()} + +
+ ) || null} + {info} {mutingInfo} {actionBtn}
- - {metadata.length && ( - - - {(() => { - let data = []; - for (let i = 0; i < metadata.length; i++) { - data.push( - - - - - ); - } - return data; - })()} - -
- ) || null} ); } diff --git a/app/javascript/flavours/glitch/reducers/accounts.js b/app/javascript/flavours/glitch/reducers/accounts.js index 61354f2e1b..23fbd999cd 100644 --- a/app/javascript/flavours/glitch/reducers/accounts.js +++ b/app/javascript/flavours/glitch/reducers/accounts.js @@ -69,6 +69,14 @@ const normalizeAccount = (state, account) => { account.display_name_html = emojify(escapeTextContentForBrowser(displayName)); account.note_emojified = emojify(account.note); + if (account.fields) { + account.fields = account.fields.map(pair => ({ + ...pair, + name_emojified: emojify(escapeTextContentForBrowser(pair.name)), + value_emojified: emojify(pair.value), + })); + } + if (account.moved) { state = normalizeAccount(state, account.moved); account.moved = account.moved.id; diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss index d56de19ea1..9ca03fc2c3 100644 --- a/app/javascript/flavours/glitch/styles/components/metadata.scss +++ b/app/javascript/flavours/glitch/styles/components/metadata.scss @@ -1,9 +1,10 @@ -.account__metadata { - width: 100%; +.account__header .account__header__fields { font-size: 15px; line-height: 20px; overflow: hidden; border-collapse: collapse; + margin: 20px -10px -20px; + border-bottom: 0; a { text-decoration: none; diff --git a/app/javascript/flavours/glitch/styles/metadata.scss b/app/javascript/flavours/glitch/styles/metadata.scss index 484410befc..b66cce3c1f 100644 --- a/app/javascript/flavours/glitch/styles/metadata.scss +++ b/app/javascript/flavours/glitch/styles/metadata.scss @@ -1,4 +1,4 @@ -.metadata { +.account__header__fields { $meta-table-border: lighten($ui-base-color, 8%); border-collapse: collapse; diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml index 76f29d5916..af79922c24 100644 --- a/app/views/accounts/_header.html.haml +++ b/app/views/accounts/_header.html.haml @@ -21,20 +21,19 @@ = t 'accounts.roles.moderator' .bio .account__header__content.p-note.emojify!=processed_bio[:text] - - if processed_bio[:metadata].length > 0 - %table.metadata< - - processed_bio[:metadata].each do |i| - %tr.metadata-item>< - %th.emojify>!=i[0] - %td.emojify>!=i[1] - - - unless account.fields.empty? + - if !account.fields.empty? %table.account__header__fields %tbody - account.fields.each do |field| %tr %th.emojify= field.name %td.emojify= Formatter.instance.format_field(account, field.value) + - elsif processed_bio[:metadata].length > 0 + %table.account__header__fields< + - processed_bio[:metadata].each do |i| + %tr + %th.emojify>!=i[0] + %td.emojify>!=i[1] .details-counters .counter{ class: active_nav_class(short_account_url(account)) } From 73e3585042b4f9cf7830fc6f4923ee60bd4cbedd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcin=20Miko=C5=82ajczak?= Date: Fri, 4 May 2018 20:25:58 +0200 Subject: [PATCH 03/24] Add a light theme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marcin Mikołajczak --- .../skins/vanilla/mastodon-light/common.scss | 1 + .../skins/vanilla/mastodon-light/names.yml | 4 + app/javascript/styles/mastodon-light.scss | 228 ++++++++++++++++++ 3 files changed, 233 insertions(+) create mode 100644 app/javascript/skins/vanilla/mastodon-light/common.scss create mode 100644 app/javascript/skins/vanilla/mastodon-light/names.yml create mode 100644 app/javascript/styles/mastodon-light.scss diff --git a/app/javascript/skins/vanilla/mastodon-light/common.scss b/app/javascript/skins/vanilla/mastodon-light/common.scss new file mode 100644 index 0000000000..e1a3ea2c6e --- /dev/null +++ b/app/javascript/skins/vanilla/mastodon-light/common.scss @@ -0,0 +1 @@ +@import 'styles/mastodon-light'; diff --git a/app/javascript/skins/vanilla/mastodon-light/names.yml b/app/javascript/skins/vanilla/mastodon-light/names.yml new file mode 100644 index 0000000000..bb14ad2e0c --- /dev/null +++ b/app/javascript/skins/vanilla/mastodon-light/names.yml @@ -0,0 +1,4 @@ +en: + skins: + vanilla: + mastodon-light: Mastodon (light) diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss new file mode 100644 index 0000000000..6a22a78226 --- /dev/null +++ b/app/javascript/styles/mastodon-light.scss @@ -0,0 +1,228 @@ +// Set variables +$ui-base-color: #d9e1e8; +$ui-base-lighter-color: darken($ui-base-color, 57%); +$ui-highlight-color: #2b90d9; +$ui-primary-color: darken($ui-highlight-color, 28%); +$ui-secondary-color: #282c37; + +$primary-text-color: black; +$base-overlay-background: $ui-base-color; + +$login-button-color: white; +$account-background-color: white; + +// Import defaults +@import 'application'; + +// Change the color of the log in button +.button { + &.button-alternative-2 { + color: $login-button-color; + } +} + +// Change columns' default background colors +.column { + > .scrollable { + background: lighten($ui-base-color, 13%); + } +} + +.drawer__inner { + background: $ui-base-color; +} + +.drawer__inner__mastodon { + background: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; +} + +// Change the default appearance of the content warning button +.status__content, +.reply-indicator__content { + + .status__content__spoiler-link { + + background: darken($ui-base-color, 30%); + + &:hover { + background: darken($ui-base-color, 35%); + text-decoration: none; + } + + } + +} + +// Change the default appearance of the action buttons +.icon-button { + + &:hover, + &:active, + &:focus { + color: darken($ui-base-color, 40%); + transition: color 200ms ease-out; + } + + &.disabled { + color: darken($ui-base-color, 30%); + } + +} + +.status { + &.status-direct { + .icon-button.disabled { + color: darken($ui-base-color, 30%); + } + } +} + +button.icon-button i.fa-retweet { + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } +} + +button.icon-button.disabled i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); +} + +// Change the colors used in the dropdown menu +.dropdown-menu { + background: $ui-base-color; +} + +.dropdown-menu__arrow { + + &.left { + border-left-color: $ui-base-color; + } + + &.top { + border-top-color: $ui-base-color; + } + + &.bottom { + border-bottom-color: $ui-base-color; + } + + &.right { + border-right-color: $ui-base-color; + } + +} + +.dropdown-menu__item { + a { + background: $ui-base-color; + color: $ui-secondary-color; + } +} + +// Change the default color of several parts of the compose form +.compose-form { + + .compose-form__warning { + color: lighten($ui-secondary-color, 65%); + } + + strong { + color: lighten($ui-secondary-color, 65%); + } + + .autosuggest-textarea__textarea, + .spoiler-input__input { + + color: darken($ui-base-color, 80%); + + &::placeholder { + color: darken($ui-base-color, 70%); + } + + } + + .compose-form__buttons-wrapper { + background: darken($ui-base-color, 10%); + } + + .privacy-dropdown__option { + color: $ui-primary-color; + } + + .privacy-dropdown__option__content { + + strong { + color: $ui-primary-color; + } + + } + +} + +// Change the default color used for the text in an empty column or on the error column +.empty-column-indicator, +.error-column { + color: darken($ui-base-color, 60%); +} + +// Change the default colors used on some parts of the profile pages +.activity-stream-tabs { + + background: $account-background-color; + + a { + &.active { + color: $ui-primary-color; + } + } + +} + +.activity-stream { + + .entry { + background: $account-background-color; + } + + .status.light { + + .status__content { + color: $primary-text-color; + } + + .display-name { + strong { + color: $primary-text-color; + } + } + + } + +} + +.accounts-grid { + .account-grid-card { + + .controls { + .icon-button { + color: $ui-secondary-color; + } + } + + .name { + a { + color: $primary-text-color; + } + } + + .username { + color: $ui-secondary-color; + } + + .account__header__content { + color: $primary-text-color; + } + + } +} + From b60e38c9859e6dc3730df18e316465605b3f53ca Mon Sep 17 00:00:00 2001 From: Daggertooth Date: Fri, 4 May 2018 14:58:11 -0500 Subject: [PATCH 04/24] Escape metachars in keywords --- app/models/glitch/keyword_mute.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/models/glitch/keyword_mute.rb b/app/models/glitch/keyword_mute.rb index f9c380f393..17ebc5b5e1 100644 --- a/app/models/glitch/keyword_mute.rb +++ b/app/models/glitch/keyword_mute.rb @@ -70,7 +70,7 @@ class Glitch::KeywordMute < ApplicationRecord def make_regex_text kws = keywords.map! do |whole_word, keyword| - whole_word ? boundary_regex_for_keyword(keyword) : /(?i:#{keyword})/ + whole_word ? boundary_regex_for_keyword(keyword) : /(?i:#{Regexp.escape(keyword)})/ end Regexp.union(kws).source From 02876fd33c09e6c31269260e2b1add4066fe346f Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 16:58:20 +0200 Subject: [PATCH 05/24] [Glitch] Place emoji picker top if it is closer to the bottom of the viewport Port a661a258456be040ae3ffa897024bb255d642f5a to glitch-soc --- .../flavours/glitch/features/emoji_picker/index.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js index 4b1ef6c972..4cf833a3ec 100644 --- a/app/javascript/flavours/glitch/features/emoji_picker/index.js +++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js @@ -241,12 +241,12 @@ class EmojiPickerMenu extends React.PureComponent { static defaultProps = { style: {}, loading: true, - placement: 'bottom', frequentlyUsedEmojis: [], }; state = { modifierOpen: false, + placement: null, }; handleDocumentClick = e => { @@ -378,7 +378,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { this.dropdown = c; } - onShowDropdown = () => { + onShowDropdown = ({ target }) => { this.setState({ active: true }); if (!EmojiPicker) { @@ -393,6 +393,9 @@ export default class EmojiPickerDropdown extends React.PureComponent { this.setState({ loading: false }); }); } + + const { top } = target.getBoundingClientRect(); + this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' }); } onHideDropdown = () => { @@ -404,7 +407,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { if (this.state.active) { this.onHideDropdown(); } else { - this.onShowDropdown(); + this.onShowDropdown(e); } } } @@ -426,7 +429,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { render () { const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props; const title = intl.formatMessage(messages.emoji); - const { active, loading } = this.state; + const { active, loading, placement } = this.state; return (
@@ -438,7 +441,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { />
- + Date: Sat, 5 May 2018 17:11:48 +0200 Subject: [PATCH 06/24] Improve accessibility of toot dropdown menu * Prevent Enter keypresses from triggering dropdown display toggle twice * Give focus to first/selected item of dropdown menus * Implement keyboard navigation in generic dropdown menus Partial port from ef7d64c80109074b39983b50cc8cf701c337cdcc to glitch-soc --- .../glitch/components/dropdown_menu.js | 46 +++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.js b/app/javascript/flavours/glitch/components/dropdown_menu.js index 245bebef33..27b2586e5e 100644 --- a/app/javascript/flavours/glitch/components/dropdown_menu.js +++ b/app/javascript/flavours/glitch/components/dropdown_menu.js @@ -43,6 +43,7 @@ class DropdownMenu extends React.PureComponent { componentDidMount () { document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); + if (this.focusedItem) this.focusedItem.focus(); this.setState({ mounted: true }); } @@ -55,6 +56,46 @@ class DropdownMenu extends React.PureComponent { this.node = c; } + setFocusRef = c => { + this.focusedItem = c; + } + + handleKeyDown = e => { + const items = Array.from(this.node.getElementsByTagName('a')); + const index = items.indexOf(e.currentTarget); + let element; + + switch(e.key) { + case 'Enter': + this.handleClick(e); + break; + case 'ArrowDown': + element = items[index+1]; + if (element) { + element.focus(); + } + break; + case 'ArrowUp': + element = items[index-1]; + if (element) { + element.focus(); + } + break; + case 'Home': + element = items[0]; + if (element) { + element.focus(); + } + break; + case 'End': + element = items[items.length-1]; + if (element) { + element.focus(); + } + break; + } + } + handleClick = e => { const i = Number(e.currentTarget.getAttribute('data-index')); const { action, to } = this.props.items[i]; @@ -79,7 +120,7 @@ class DropdownMenu extends React.PureComponent { return (
  • - + {text}
    • @@ -156,9 +197,6 @@ export default class Dropdown extends React.PureComponent { handleKeyDown = e => { switch(e.key) { - case 'Enter': - this.handleClick(e); - break; case 'Escape': this.handleClose(); break; From 1c75c7901fc750f678cf90844cb5879d0d5046ce Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 17:18:25 +0200 Subject: [PATCH 07/24] [Glitch] Prevent timeline from moving when cursor is hovering over it Port 9188537f5f10f9b6960857cd1292ef5db8d5a411 to glitch-soc --- .../flavours/glitch/components/scrollable_list.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index df3ace4c19..56e91f8642 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -35,6 +35,7 @@ export default class ScrollableList extends PureComponent { state = { fullscreen: null, + mouseOver: false, }; intersectionObserverWrapper = new IntersectionObserverWrapper(); @@ -85,7 +86,7 @@ export default class ScrollableList extends PureComponent { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); - if (someItemInserted && this.node.scrollTop > 0) { + if (someItemInserted && this.node.scrollTop > 0 || this.state.mouseOver) { return this.node.scrollHeight - this.node.scrollTop; } else { return null; @@ -147,6 +148,14 @@ export default class ScrollableList extends PureComponent { this.props.onScrollToBottom(); } + handleMouseEnter = () => { + this.setState({ mouseOver: true }); + } + + handleMouseLeave = () => { + this.setState({ mouseOver: false }); + } + render () { const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props; const { fullscreen } = this.state; @@ -157,7 +166,7 @@ export default class ScrollableList extends PureComponent { if (isLoading || childrenCount > 0 || !emptyMessage) { scrollableArea = ( -
    +
    {prepend} From ca62d8bcc6175891670611c557bda1793c11ff46 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 17:18:55 +0200 Subject: [PATCH 08/24] [Glitch] Do not re-position scroll when loading more (inserting items from below) Port 554653a4233c94fdf1e294ef9ed2a8b1b1742c13 to glitch-soc --- app/javascript/flavours/glitch/components/scrollable_list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index 56e91f8642..b8281b1ee2 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -86,7 +86,7 @@ export default class ScrollableList extends PureComponent { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); - if (someItemInserted && this.node.scrollTop > 0 || this.state.mouseOver) { + if (someItemInserted && this.node.scrollTop > 0 || (this.state.mouseOver && !prevProps.isLoading)) { return this.node.scrollHeight - this.node.scrollTop; } else { return null; From 6c4ea9c000bffe303d1bbe21b27672137d3fe683 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 17:43:09 +0200 Subject: [PATCH 09/24] [Glitch] Improve styling of closed registrations message Port SCSS changes from f67fe3ebe823c25eae236b1a732b3758ea2e1019 to glitch-soc --- .../flavours/glitch/styles/about.scss | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index d97e236963..8a7d3412da 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -194,6 +194,28 @@ $small-breakpoint: 960px; } } + .closed-registrations-message { + margin-top: 20px; + + &, + p { + text-align: center; + font-size: 12px; + line-height: 18px; + color: $ui-primary-color; + margin-bottom: 0; + + a { + color: $ui-highlight-color; + text-decoration: underline; + } + } + + p:last-child { + margin-bottom: 0; + } + } + em { display: inline; margin: 0; From a565aa6530d641f65baf377700baacdde38b4136 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 17:58:01 +0200 Subject: [PATCH 10/24] [Glitch] Update SCSS of admin and setting pages Port the SCSS changes from 18d4e03e6b495c42b74a61a48cd5f0d3ba148b63 to glitch-soc --- app/javascript/flavours/glitch/styles/admin.scss | 10 ++++++++++ app/javascript/flavours/glitch/styles/forms.scss | 10 ---------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 3146a343d0..23c9a67421 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -105,6 +105,16 @@ margin-bottom: 30px; } + h4 { + text-transform: uppercase; + font-size: 13px; + font-weight: 500; + color: $ui-primary-color; + padding-bottom: 8px; + margin-bottom: 8px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + } + h6 { font-size: 16px; color: $ui-secondary-color; diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 2bef53cff7..ca6228612a 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -22,16 +22,6 @@ code { margin-top: 4px; } - h4 { - text-transform: uppercase; - font-size: 13px; - font-weight: 500; - color: $ui-primary-color; - padding-bottom: 8px; - margin-bottom: 8px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - } - p.hint { margin-bottom: 15px; color: $ui-primary-color; From c58ee8402212446ad71253617dbd88780d04d061 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 17:58:46 +0200 Subject: [PATCH 11/24] [Glitch] Add color variables of texts for better accesibility Port e5ad96390eb409725b56a2ae801c7e4f75cd8ebe and related to glitch-soc --- .../flavours/glitch/styles/about.scss | 64 ++++++------- .../flavours/glitch/styles/accounts.scss | 36 +++---- .../flavours/glitch/styles/admin.scss | 42 ++++---- .../flavours/glitch/styles/basics.scss | 2 +- .../glitch/styles/compact_header.scss | 4 +- .../glitch/styles/components/accounts.scss | 28 +++--- .../glitch/styles/components/boost.scss | 8 +- .../glitch/styles/components/columns.scss | 38 +++----- .../glitch/styles/components/composer.scss | 34 +++---- .../glitch/styles/components/drawer.scss | 22 ++--- .../styles/components/emoji_picker.scss | 14 +-- .../glitch/styles/components/index.scss | 96 +++++++------------ .../glitch/styles/components/lists.scss | 6 +- .../styles/components/local_settings.scss | 6 +- .../glitch/styles/components/media.scss | 8 +- .../glitch/styles/components/metadata.scss | 4 +- .../glitch/styles/components/modal.scss | 47 +++++---- .../components/regeneration_indicator.scss | 4 +- .../glitch/styles/components/search.scss | 10 +- .../glitch/styles/components/status.scss | 52 +++++----- .../flavours/glitch/styles/containers.scss | 2 +- .../flavours/glitch/styles/footer.scss | 2 +- .../flavours/glitch/styles/forms.scss | 33 ++++--- .../flavours/glitch/styles/landing_strip.scss | 8 +- .../glitch/styles/stream_entries.scss | 32 +++---- .../flavours/glitch/styles/tables.scss | 4 +- .../flavours/glitch/styles/variables.scss | 15 ++- 27 files changed, 293 insertions(+), 328 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 8a7d3412da..55f31266f5 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -169,7 +169,7 @@ $small-breakpoint: 960px; background: $ui-base-color; font-size: 12px; font-weight: 500; - color: $ui-primary-color; + color: $darker-text-color; text-transform: uppercase; position: relative; z-index: 1; @@ -186,10 +186,10 @@ $small-breakpoint: 960px; font-size: 16px; line-height: 30px; margin-bottom: 12px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -202,11 +202,11 @@ $small-breakpoint: 960px; text-align: center; font-size: 12px; line-height: 18px; - color: $ui-primary-color; + color: $darker-text-color; margin-bottom: 0; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -225,7 +225,7 @@ $small-breakpoint: 960px; font-family: inherit; font-size: inherit; line-height: inherit; - color: lighten($ui-primary-color, 10%); + color: lighten($darker-text-color, 10%); } h1 { @@ -234,14 +234,14 @@ $small-breakpoint: 960px; line-height: 30px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; small { font-family: 'mastodon-font-sans-serif', sans-serif; display: block; font-size: 18px; font-weight: 400; - color: $ui-base-lighter-color; + color: lighten($darker-text-color, 10%); } } @@ -251,7 +251,7 @@ $small-breakpoint: 960px; line-height: 26px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; } h3 { @@ -260,7 +260,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; } h4 { @@ -269,7 +269,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; } h5 { @@ -278,7 +278,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; } h6 { @@ -287,7 +287,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; } ul, @@ -349,10 +349,10 @@ $small-breakpoint: 960px; font-weight: 400; font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -400,7 +400,7 @@ $small-breakpoint: 960px; font-size: 14px; &:hover { - color: $ui-secondary-color; + color: $secondary-text-color; } } @@ -473,10 +473,10 @@ $small-breakpoint: 960px; font-weight: 400; font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -512,7 +512,7 @@ $small-breakpoint: 960px; span { &:last-child { - color: $ui-secondary-color; + color: $secondary-text-color; } } @@ -543,7 +543,7 @@ $small-breakpoint: 960px; font-size: 14px; line-height: 24px; font-weight: 500; - color: $ui-primary-color; + color: $darker-text-color; padding-bottom: 5px; margin-bottom: 15px; border-bottom: 1px solid lighten($ui-base-color, 4%); @@ -554,7 +554,7 @@ $small-breakpoint: 960px; a, span { font-weight: 400; - color: darken($ui-primary-color, 10%); + color: darken($darker-text-color, 10%); } a { @@ -597,7 +597,7 @@ $small-breakpoint: 960px; .username { display: block; - color: $ui-primary-color; + color: $darker-text-color; } } } @@ -722,7 +722,7 @@ $small-breakpoint: 960px; } p a { - color: $ui-secondary-color; + color: $secondary-text-color; } h1 { @@ -731,10 +731,10 @@ $small-breakpoint: 960px; margin-bottom: 0; small { - color: $ui-primary-color; + color: $darker-text-color; span { - color: $ui-secondary-color; + color: $secondary-text-color; } } } @@ -841,7 +841,7 @@ $small-breakpoint: 960px; } a { - color: $ui-secondary-color; + color: $secondary-text-color; text-decoration: none; } } @@ -881,7 +881,7 @@ $small-breakpoint: 960px; .fa { display: block; - color: $ui-primary-color; + color: $darker-text-color; font-size: 48px; } } @@ -889,7 +889,7 @@ $small-breakpoint: 960px; .text { font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; h6 { font-size: inherit; @@ -907,10 +907,10 @@ $small-breakpoint: 960px; font-weight: 400; font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -918,7 +918,7 @@ $small-breakpoint: 960px; .footer-links { padding-bottom: 50px; text-align: right; - color: $ui-base-lighter-color; + color: $dark-text-color; p { font-size: 14px; @@ -933,7 +933,7 @@ $small-breakpoint: 960px; &__footer { margin-top: 10px; text-align: center; - color: $ui-base-lighter-color; + color: $dark-text-color; p { font-size: 14px; diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 082867f17b..eff964e504 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -75,7 +75,7 @@ small { display: block; font-size: 14px; - color: $ui-highlight-color; + color: $highlight-text-color; font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -116,7 +116,7 @@ width: 33.3%; box-sizing: border-box; flex: 0 0 auto; - color: $ui-primary-color; + color: $darker-text-color; padding: 5px 10px 0; margin-bottom: 10px; border-right: 1px solid lighten($ui-base-color, 4%); @@ -146,7 +146,7 @@ &.active { &::after { - border-bottom: 4px solid $ui-highlight-color; + border-bottom: 4px solid $highlight-text-color; opacity: 1; } } @@ -182,7 +182,7 @@ line-height: 18px; padding: 0 15px; text-align: center; - color: $ui-secondary-color; + color: $secondary-text-color; } @media screen and (max-width: 480px) { @@ -260,7 +260,7 @@ .current { background: $simple-background-color; border-radius: 100px; - color: $ui-base-color; + color: $inverted-text-color; cursor: default; margin: 0 10px; } @@ -272,7 +272,7 @@ .older, .newer { text-transform: uppercase; - color: $ui-secondary-color; + color: $secondary-text-color; } .older { @@ -297,7 +297,7 @@ .disabled { cursor: default; - color: lighten($ui-base-color, 10%); + color: lighten($inverted-text-color, 10%); } @media screen and (max-width: 700px) { @@ -336,7 +336,7 @@ width: 335px; background: $simple-background-color; border-radius: 4px; - color: $ui-base-color; + color: $inverted-text-color; margin: 0 5px 10px; position: relative; @@ -348,7 +348,7 @@ overflow: hidden; height: 100px; border-radius: 4px 4px 0 0; - background-color: lighten($ui-base-color, 4%); + background-color: lighten($inverted-text-color, 4%); background-size: cover; background-position: center; position: relative; @@ -399,7 +399,7 @@ a { display: block; - color: $ui-base-color; + color: $inverted-text-color; text-decoration: none; text-overflow: ellipsis; overflow: hidden; @@ -421,7 +421,7 @@ } .username { - color: lighten($ui-base-color, 34%); + color: $lighter-text-color; font-size: 14px; font-weight: 400; } @@ -429,7 +429,7 @@ .account__header__content { padding: 10px 15px; padding-top: 15px; - color: lighten($ui-base-color, 26%); + color: $lighter-text-color; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; @@ -441,7 +441,7 @@ .nothing-here { width: 100%; display: block; - color: $ui-primary-color; + color: $light-text-color; font-size: 14px; font-weight: 500; text-align: center; @@ -502,7 +502,7 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $light-text-color; } } @@ -517,7 +517,7 @@ .account__header__content { font-size: 14px; - color: $ui-base-color; + color: $inverted-text-color; } } @@ -531,18 +531,18 @@ display: inline-block; padding: 15px; text-decoration: none; - color: $ui-highlight-color; + color: $highlight-text-color; text-transform: uppercase; font-weight: 500; &:hover, &:active, &:focus { - color: lighten($ui-highlight-color, 8%); + color: lighten($highlight-text-color, 8%); } &.active { - color: $ui-base-color; + color: $inverted-text-color; cursor: default; } } diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 23c9a67421..b077df1450 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -33,7 +33,7 @@ a { display: block; padding: 15px; - color: rgba($primary-text-color, 0.7); + color: $darker-text-color; text-decoration: none; transition: all 200ms linear; border-radius: 4px 0 0 4px; @@ -90,7 +90,7 @@ padding-left: 25px; h2 { - color: $ui-secondary-color; + color: $secondary-text-color; font-size: 24px; line-height: 28px; font-weight: 400; @@ -98,7 +98,7 @@ } h3 { - color: $ui-secondary-color; + color: $secondary-text-color; font-size: 20px; line-height: 28px; font-weight: 400; @@ -109,7 +109,7 @@ text-transform: uppercase; font-size: 13px; font-weight: 500; - color: $ui-primary-color; + color: $darker-text-color; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid lighten($ui-base-color, 8%); @@ -117,7 +117,7 @@ h6 { font-size: 16px; - color: $ui-secondary-color; + color: $secondary-text-color; line-height: 28px; font-weight: 400; } @@ -125,7 +125,7 @@ & > p { font-size: 14px; line-height: 18px; - color: $ui-secondary-color; + color: $secondary-text-color; margin-bottom: 20px; strong { @@ -153,10 +153,10 @@ } .muted-hint { - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } } @@ -253,7 +253,7 @@ a { display: inline-block; - color: rgba($primary-text-color, 0.7); + color: $darker-text-color; text-decoration: none; text-transform: uppercase; font-size: 12px; @@ -266,7 +266,7 @@ } &.selected { - color: $ui-highlight-color; + color: $highlight-text-color; border-bottom: 2px solid $ui-highlight-color; } } @@ -307,7 +307,7 @@ font-weight: 500; font-size: 14px; line-height: 18px; - color: $ui-secondary-color; + color: $secondary-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -364,7 +364,7 @@ padding: 7px 4px; margin-bottom: 10px; font-size: 16px; - color: $ui-base-color; + color: $inverted-text-color; display: block; width: 100%; outline: 0; @@ -418,7 +418,7 @@ font-size: 14px; a { - color: $classic-highlight-color; + color: $highlight-text-color; text-decoration: none; &:hover { @@ -441,7 +441,7 @@ align-items: center; padding: 10px; background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; border-radius: 4px 4px 0 0; font-size: 14px; position: relative; @@ -468,14 +468,14 @@ } &__timestamp { - color: lighten($ui-base-color, 34%); + color: $dark-text-color; } &__extras { background: lighten($ui-base-color, 6%); border-radius: 0 0 4px 4px; padding: 10px; - color: $ui-primary-color; + color: $darker-text-color; font-family: 'mastodon-font-monospace', monospace; font-size: 12px; word-wrap: break-word; @@ -485,7 +485,7 @@ &__icon { font-size: 28px; margin-right: 10px; - color: lighten($ui-base-color, 34%); + color: $dark-text-color; } &__icon__overlay { @@ -501,7 +501,7 @@ } &.negative { - background: $error-red; + background: lighten($error-red, 12%); } &.neutral { @@ -512,17 +512,17 @@ a, .username, .target { - color: $ui-secondary-color; + color: $secondary-text-color; text-decoration: none; font-weight: 500; } .diff-old { - color: $error-red; + color: lighten($error-red, 12%); } .diff-neutral { - color: $ui-secondary-color; + color: $secondary-text-color; } .diff-new { diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index 15fbb1c892..8e3db25726 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -71,7 +71,7 @@ body { &.error { position: absolute; text-align: center; - color: $ui-primary-color; + color: $darker-text-color; background: $ui-base-color; width: 100%; height: 100%; diff --git a/app/javascript/flavours/glitch/styles/compact_header.scss b/app/javascript/flavours/glitch/styles/compact_header.scss index 90d98cc8c5..4980ab5f1a 100644 --- a/app/javascript/flavours/glitch/styles/compact_header.scss +++ b/app/javascript/flavours/glitch/styles/compact_header.scss @@ -2,7 +2,7 @@ h1 { font-size: 24px; line-height: 28px; - color: $ui-primary-color; + color: $darker-text-color; font-weight: 500; margin-bottom: 20px; padding: 0 10px; @@ -20,7 +20,7 @@ small { font-weight: 400; - color: $ui-secondary-color; + color: $secondary-text-color; } img { diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index a86120e085..84d3f6adef 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -7,7 +7,7 @@ .account__display-name { flex: 1 1 auto; display: block; - color: $ui-primary-color; + color: $darker-text-color; overflow: hidden; text-decoration: none; font-size: 14px; @@ -102,7 +102,7 @@ } .account__header__username { - color: $ui-primary-color; + color: $secondary-text-color; } } @@ -112,7 +112,7 @@ } .account__header__content { - color: $ui-secondary-color; + color: $secondary-text-color; } .account__header__display-name { @@ -127,7 +127,7 @@ } .account__header__username { - color: $ui-highlight-color; + color: $highlight-text-color; font-size: 14px; font-weight: 400; display: block; @@ -140,7 +140,7 @@ .account__disclaimer { padding: 10px; border-top: 1px solid lighten($ui-base-color, 8%); - color: $ui-base-lighter-color; + color: $dark-text-color; strong { font-weight: 500; @@ -166,7 +166,7 @@ } .account__header__content { - color: $ui-primary-color; + color: $darker-text-color; font-size: 14px; font-weight: 400; overflow: hidden; @@ -243,7 +243,7 @@ display: block; text-transform: uppercase; font-size: 11px; - color: $ui-primary-color; + color: $darker-text-color; } strong { @@ -260,7 +260,7 @@ } abbr { - color: $ui-base-lighter-color; + color: $highlight-text-color; } } @@ -292,12 +292,12 @@ margin-left: 42px; padding: 8px 0 0 26px; cursor: default; - color: $ui-primary-color; + color: $darker-text-color; font-size: 15px; position: relative; .fa { - color: $ui-highlight-color; + color: $highlight-text-color; } > span { @@ -328,7 +328,7 @@ } .column-settings__section { - color: $ui-primary-color; + color: $darker-text-color; cursor: default; display: block; font-weight: 500; @@ -439,7 +439,7 @@ a { display: block; flex: 1 1 auto; - color: $ui-primary-color; + color: $darker-text-color; padding: 15px 0; font-size: 14px; font-weight: 500; @@ -448,7 +448,7 @@ position: relative; &.active { - color: $ui-secondary-color; + color: $secondary-text-color; &::before, &::after { @@ -483,7 +483,7 @@ &__message { position: relative; margin-left: 58px; - color: $ui-base-lighter-color; + color: $dark-text-color; padding: 8px 0; padding-top: 0; padding-bottom: 4px; diff --git a/app/javascript/flavours/glitch/styles/components/boost.scss b/app/javascript/flavours/glitch/styles/components/boost.scss index b07b72f8eb..66bc83bcb3 100644 --- a/app/javascript/flavours/glitch/styles/components/boost.scss +++ b/app/javascript/flavours/glitch/styles/components/boost.scss @@ -6,23 +6,23 @@ } button.icon-button i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } // Disabled variant button.icon-button.disabled i.fa-retweet { &, &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } // Disabled variant for use with DMs .status-direct button.icon-button.disabled i.fa-retweet { &, &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 34175685eb..6847cf788f 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -4,22 +4,6 @@ position: relative; } -.column-icon { - background: lighten($ui-base-color, 4%); - color: $ui-primary-color; - cursor: pointer; - font-size: 16px; - padding: 15px; - position: absolute; - right: 0; - top: -48px; - z-index: 3; - - &:hover { - color: lighten($ui-primary-color, 7%); - } -} - .columns-area { display: flex; flex: 1 1 auto; @@ -136,7 +120,7 @@ .column-back-button { background: lighten($ui-base-color, 4%); - color: $ui-highlight-color; + color: $highlight-text-color; cursor: pointer; flex: 0 0 auto; font-size: 16px; @@ -155,7 +139,7 @@ background: lighten($ui-base-color, 4%); border: 0; font-family: inherit; - color: $ui-highlight-color; + color: $highlight-text-color; cursor: pointer; flex: 0 0 auto; font-size: 16px; @@ -210,7 +194,7 @@ .column-subheading { background: $ui-base-color; - color: $ui-base-lighter-color; + color: $dark-text-color; padding: 8px 20px; font-size: 12px; font-weight: 500; @@ -266,14 +250,14 @@ } & > .column-header__back-button { - color: $ui-highlight-color; + color: $highlight-text-color; } &.active { box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); .column-header__icon { - color: $ui-highlight-color; + color: $highlight-text-color; text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); } } @@ -316,13 +300,13 @@ .column-header__button { background: lighten($ui-base-color, 4%); border: 0; - color: $ui-primary-color; + color: $darker-text-color; cursor: pointer; font-size: 16px; padding: 0 15px; &:hover { - color: lighten($ui-primary-color, 7%); + color: lighten($darker-text-color, 7%); } &.active { @@ -368,7 +352,7 @@ max-height: 70vh; overflow: hidden; overflow-y: auto; - color: $ui-primary-color; + color: $darker-text-color; transition: max-height 150ms ease-in-out, opacity 300ms linear; opacity: 1; @@ -406,7 +390,7 @@ .column-header__setting-btn { &:hover { - color: lighten($ui-primary-color, 4%); + color: $darker-text-color; text-decoration: underline; } } @@ -438,7 +422,7 @@ .empty-column-indicator, .error-column { - color: lighten($ui-base-color, 20%); + color: $dark-text-color; background: $ui-base-color; text-align: center; padding: 20px; @@ -454,7 +438,7 @@ } a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: none; &:hover { diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 7112400f41..dd21eae06c 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -12,7 +12,7 @@ padding: 10px; width: 100%; outline: 0; - color: $ui-base-color; + color: $inverted-text-color; background: $simple-background-color; font-size: 14px; font-family: inherit; @@ -24,7 +24,7 @@ } .composer--warning { - color: darken($ui-secondary-color, 65%); + color: $inverted-text-color; margin-bottom: 15px; background: $ui-primary-color; box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); @@ -34,7 +34,7 @@ font-weight: 400; a { - color: darken($ui-primary-color, 33%); + color: $lighter-text-color; font-weight: 500; text-decoration: underline; @@ -54,7 +54,7 @@ margin-bottom: 5px; overflow: hidden; - & > .account.small { color: $ui-base-color } + & > .account.small { color: $inverted-text-color; } & > .cancel { float: right; @@ -68,7 +68,7 @@ padding: 0 12px; font-size: 14px; line-height: 20px; - color: $ui-base-color; + color: $inverted-text-color; word-wrap: break-word; font-weight: 400; overflow: visible; @@ -82,7 +82,7 @@ } a { - color: lighten($ui-base-color, 20%); + color: $lighter-text-color; text-decoration: none; &:hover { text-decoration: underline } @@ -129,7 +129,7 @@ width: 100%; min-height: 100px; outline: 0; - color: $ui-base-color; + color: $inverted-text-color; background: $simple-background-color; font-size: 14px; font-family: inherit; @@ -160,7 +160,7 @@ margin: 2px 0 0 2px; width: 24px; height: 24px; - color: darken($ui-primary-color, 24%); + color: $lighter-text-color; font-size: 18px; line-height: 24px; text-align: center; @@ -176,7 +176,7 @@ border-radius: 0 0 4px 4px; padding: 6px; width: 100%; - color: $ui-base-color; + color: $inverted-text-color; background: $ui-secondary-color; box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); font-size: 14px; @@ -214,14 +214,14 @@ & > .account.small { .display-name { - & > span { color: lighten($ui-base-color, 36%) } + & > span { color: $lighter-text-color } } } } .composer--upload_form { padding: 5px; - color: $ui-base-color; + color: $inverted-text-color; background: $simple-background-color; font-size: 14px; @@ -258,7 +258,7 @@ border: 0; padding: 10px; width: 100%; - color: $ui-secondary-color; + color: $secondary-text-color; background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); font-size: 14px; font-family: inherit; @@ -271,7 +271,7 @@ &::placeholder { opacity: 0.54; - color: $ui-secondary-color; + color: $secondary-text-color; } } @@ -288,7 +288,7 @@ .composer--upload_form--progress { display: flex; padding: 10px; - color: $ui-base-lighter-color; + color: $darker-text-color; overflow: hidden; & > .fa { @@ -380,18 +380,18 @@ display: flex; align-items: center; padding: 10px; - color: $ui-base-color; + color: $inverted-text-color; cursor: pointer; & > .content { flex: 1 1 auto; - color: darken($ui-primary-color, 24%); + color: $lighter-text-color; &:not(:first-child) { margin-left: 10px } strong { display: block; - color: $ui-base-color; + color: $inverted-text-color; font-weight: 500; } } diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 0ed8c392ae..df239dba79 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -92,7 +92,7 @@ padding: 15px 5px 13px; height: 48px; flex: 1 1 auto; - color: $ui-primary-color; + color: $darker-text-color; text-align: center; text-decoration: none; cursor: pointer; @@ -127,7 +127,7 @@ width: 100%; height: 36px; outline: 0; - color: $ui-primary-color; + color: $darker-text-color; background: $ui-base-color; font-size: 14px; font-family: inherit; @@ -146,7 +146,7 @@ right: 10px; width: 18px; height: 18px; - color: $ui-secondary-color; + color: $secondary-text-color; font-size: 18px; line-height: 18px; z-index: 2; @@ -199,12 +199,12 @@ border-radius: 4px; padding: 10px 14px 14px 14px; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - color: $ui-primary-color; + color: $light-text-color; background: $simple-background-color; h4 { margin-bottom: 10px; - color: $ui-primary-color; + color: $light-text-color; font-size: 13px; font-weight: 500; text-transform: uppercase; @@ -214,14 +214,14 @@ li { padding: 4px 0 } em { - color: $ui-base-color; + color: $inverted-text-color; font-weight: 500; } } .drawer--account { padding: 10px; - color: $ui-primary-color; + color: $darker-text-color; & > a { color: inherit; @@ -235,7 +235,7 @@ & > .acct { display: block; - color: $primary-text-color; + color: $secondary-text-color; font-weight: 500; white-space: nowrap; overflow: hidden; @@ -258,7 +258,7 @@ & > header { border-bottom: 1px solid darken($ui-base-color, 4%); padding: 15px 10px; - color: $ui-base-lighter-color; + color: $dark-text-color; background: lighten($ui-base-color, 2%); font-size: 14px; font-weight: 500; @@ -270,13 +270,13 @@ & > .hashtag { display: block; padding: 10px; - color: $ui-secondary-color; + color: $secondary-text-color; text-decoration: none; &:hover, &:active, &:focus { - color: lighten($ui-secondary-color, 4%); + color: lighten($secondary-text-color, 4%); text-decoration: underline; } } diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 4161cc0456..dcc551c5b2 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -7,7 +7,7 @@ font-size: 13px; display: inline-block; - color: $ui-base-color; + color: $inverted-text-color; .emoji-mart-emoji { padding: 6px; @@ -36,7 +36,7 @@ display: flex; justify-content: space-between; padding: 0 6px; - color: $ui-primary-color; + color: $lighter-text-color; line-height: 0; } @@ -50,15 +50,15 @@ cursor: pointer; &:hover { - color: darken($ui-primary-color, 4%); + color: darken($lighter-text-color, 4%); } } .emoji-mart-anchor-selected { - color: darken($ui-highlight-color, 3%); + color: $highlight-text-color; &:hover { - color: darken($ui-highlight-color, 3%); + color: darken($highlight-text-color, 4%); } .emoji-mart-anchor-bar { @@ -115,7 +115,7 @@ display: block; width: 100%; background: rgba($ui-secondary-color, 0.3); - color: $ui-primary-color; + color: $inverted-text-color; border: 1px solid $ui-secondary-color; border-radius: 4px; @@ -184,7 +184,7 @@ font-size: 14px; text-align: center; padding-top: 70px; - color: $ui-primary-color; + color: $light-text-color; .emoji-mart-category-label { display: none; diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index afb54056c8..6f3338605e 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -52,7 +52,7 @@ } &.button-alternative { - color: $ui-base-color; + color: $inverted-text-color; background: $ui-primary-color; &:active, @@ -76,7 +76,7 @@ font-size: 16px; line-height: 36px; height: auto; - color: $ui-primary-color; + color: $darker-text-color; text-transform: none; background: transparent; padding: 3px 15px; @@ -87,7 +87,7 @@ &:focus, &:hover { border-color: lighten($ui-primary-color, 4%); - color: lighten($ui-primary-color, 4%); + color: lighten($darker-text-color, 4%); } } @@ -100,7 +100,7 @@ .icon-button { display: inline-block; padding: 0; - color: $ui-base-lighter-color; + color: $action-button-color; border: none; background: transparent; cursor: pointer; @@ -109,17 +109,17 @@ &:hover, &:active, &:focus { - color: lighten($ui-base-color, 33%); + color: lighten($action-button-color, 7%); transition: color 200ms ease-out; } &.disabled { - color: lighten($ui-base-color, 13%); + color: darken($action-button-color, 13%); cursor: default; } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; } &::-moz-focus-inner { @@ -133,23 +133,23 @@ } &.inverted { - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; &:hover, &:active, &:focus { - color: $ui-base-lighter-color; + color: darken($lighter-text-color, 7%); } &.disabled { - color: $ui-primary-color; + color: lighten($lighter-text-color, 7%); } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; &.disabled { - color: lighten($ui-highlight-color, 13%); + color: lighten($highlight-text-color, 13%); } } } @@ -168,7 +168,7 @@ } .text-icon-button { - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; border: none; background: transparent; cursor: pointer; @@ -182,17 +182,17 @@ &:hover, &:active, &:focus { - color: $ui-base-lighter-color; + color: darken($lighter-text-color, 7%); transition: color 200ms ease-out; } &.disabled { - color: lighten($ui-base-color, 13%); + color: lighten($lighter-text-color, 20%); cursor: default; } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; } &::-moz-focus-inner { @@ -211,25 +211,6 @@ transform-origin: 50% 0; } -.dropdown--active .icon-button { - color: $ui-highlight-color; -} - -.dropdown--active::after { - @media screen and (min-width: 631px) { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 0 4.5px 7.8px; - border-color: transparent transparent $ui-secondary-color; - bottom: 8px; - right: 104px; - } -} - .invisible { font-size: 0; line-height: 0; @@ -254,10 +235,6 @@ } } -.lightbox .icon-button { - color: $ui-base-color; -} - .notification__favourite-icon-wrapper { left: 0; position: absolute; @@ -462,7 +439,7 @@ box-sizing: border-box; text-decoration: none; background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -471,7 +448,7 @@ &:hover, &:active { background: $ui-highlight-color; - color: $ui-secondary-color; + color: $secondary-text-color; outline: 0; } } @@ -513,7 +490,7 @@ box-sizing: border-box; text-decoration: none; background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -524,7 +501,7 @@ &:hover { background: $ui-highlight-color; - color: $ui-secondary-color; + color: $secondary-text-color; } } } @@ -536,7 +513,7 @@ .static-content { padding: 10px; padding-top: 20px; - color: $ui-base-lighter-color; + color: $dark-text-color; h1 { font-size: 16px; @@ -577,7 +554,7 @@ &.active { border-bottom: 2px solid $ui-highlight-color; - color: $ui-highlight-color; + color: $highlight-text-color; } &:hover, @@ -752,11 +729,11 @@ flex: 1 0 auto; p { - color: $ui-secondary-color; + color: $secondary-text-color; } a { - color: $ui-base-lighter-color; + color: $dark-text-color; } } @@ -793,7 +770,7 @@ } .setting-text { - color: $ui-primary-color; + color: $darker-text-color; background: transparent; border: none; border-bottom: 2px solid $ui-primary-color; @@ -815,12 +792,12 @@ } &.light { - color: $ui-base-color; + color: $inverted-text-color; border-bottom: 2px solid lighten($ui-base-color, 27%); &:focus, &:active { - color: $ui-base-color; + color: $inverted-text-color; border-bottom-color: $ui-highlight-color; } } @@ -845,17 +822,17 @@ } .reduce-motion button.icon-button i.fa-retweet { - color: $ui-base-lighter-color; + color: $action-button-color; transition: color 100ms ease-in; } .reduce-motion button.icon-button.active i.fa-retweet { - color: $ui-highlight-color; + color: $highlight-text-color; } .load-more { display: block; - color: $ui-base-lighter-color; + color: $dark-text-color; background-color: transparent; border: 0; font-size: inherit; @@ -917,7 +894,7 @@ width: 30px; height: 30px; font-size: 20px; - color: $ui-primary-color; + color: $inverted-text-color; text-shadow: 0 0 5px black; display: flex; justify-content: center; @@ -945,7 +922,7 @@ } .loading-indicator { - color: lighten($ui-base-color, 26%); + color: $dark-text-color; font-size: 12px; font-weight: 400; text-transform: uppercase; @@ -1033,7 +1010,7 @@ .setting-toggle__label, .setting-meta__label { - color: $ui-primary-color; + color: $darker-text-color; display: inline-block; margin-bottom: 14px; margin-left: 8px; @@ -1041,7 +1018,6 @@ } .setting-meta__label { - color: $ui-primary-color; float: right; } @@ -1122,7 +1098,7 @@ display: flex; align-items: center; justify-content: center; - color: $ui-secondary-color; + color: $secondary-text-color; font-size: 18px; font-weight: 500; border: 2px dashed $ui-base-lighter-color; @@ -1158,11 +1134,11 @@ noscript { div { font-size: 14px; margin: 30px auto; - color: $ui-secondary-color; + color: $secondary-text-color; max-width: 400px; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; &:hover { diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss index 85f416ceb5..24efe60dfb 100644 --- a/app/javascript/flavours/glitch/styles/components/lists.scss +++ b/app/javascript/flavours/glitch/styles/components/lists.scss @@ -8,7 +8,7 @@ &__icon { flex: 0 0 auto; - color: $ui-base-lighter-color; + color: $dark-text-color; padding: 8px 18px; cursor: default; border-right: 1px solid lighten($ui-base-color, 8%); @@ -38,7 +38,7 @@ a { text-decoration: none; - color: $ui-base-lighter-color; + color: $dark-text-color; font-weight: 500; &:hover { @@ -57,7 +57,7 @@ } .fa { - color: $ui-base-lighter-color; + color: $dark-text-color; } } } diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 16c8cf0030..9e1606e995 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -3,7 +3,7 @@ display: flex; flex-direction: row; background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; border-radius: 8px; height: 80vh; width: 80vw; @@ -58,8 +58,8 @@ } .glitch.local-settings__navigation { - background: $primary-text-color; - color: $ui-base-color; + background: $simple-background-color; + color: $inverted-text-color; width: 200px; font-size: 15px; line-height: 20px; diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 9d06a508e5..90674612d3 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -15,7 +15,7 @@ .media-spoiler { background: $base-overlay-background; - color: $ui-primary-color; + color: $darker-text-color; border: 0; width: 100%; height: 100%; @@ -23,7 +23,7 @@ &:hover, &:active, &:focus { - color: lighten($ui-primary-color, 8%); + color: lighten($darker-text-color, 8%); } .status__content > & { @@ -350,7 +350,7 @@ z-index: 4; border: 0; background: $base-shadow-color; - color: $ui-primary-color; + color: $darker-text-color; transition: none; pointer-events: none; @@ -361,7 +361,7 @@ &:hover, &:active, &:focus { - color: lighten($ui-primary-color, 8%); + color: lighten($darker-text-color, 7%); } } diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss index d56de19ea1..fd940026bc 100644 --- a/app/javascript/flavours/glitch/styles/components/metadata.scss +++ b/app/javascript/flavours/glitch/styles/components/metadata.scss @@ -31,7 +31,7 @@ } th { - color: $ui-primary-color; + color: $darker-text-color; background: lighten($ui-base-color, 13%); max-width: 120px; @@ -46,7 +46,7 @@ background: $ui-base-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } } } diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 2eb80aba83..6e4e741bdf 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -44,7 +44,7 @@ .error-modal, .embed-modal { background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; border-radius: 8px; overflow: hidden; display: flex; @@ -132,7 +132,7 @@ .onboarding-modal__nav, .error-modal__nav { - color: darken($ui-secondary-color, 34%); + color: $lighter-text-color; border: 0; font-size: 14px; font-weight: 500; @@ -146,18 +146,18 @@ &:hover, &:focus, &:active { - color: darken($ui-secondary-color, 38%); + color: darken($lighter-text-color, 4%); background-color: darken($ui-secondary-color, 16%); } &.onboarding-modal__done, &.onboarding-modal__next { - color: $ui-base-color; + color: $inverted-text-color; &:hover, &:focus, &:active { - color: darken($ui-base-color, 4%); + color: lighten($inverted-text-color, 4%); } } } @@ -209,17 +209,17 @@ h1 { font-size: 18px; font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; margin-bottom: 20px; } a { - color: $ui-highlight-color; + color: $highlight-text-color; &:hover, &:focus, &:active { - color: lighten($ui-highlight-color, 4%); + color: lighten($highlight-text-color, 4%); } } @@ -229,7 +229,7 @@ p { font-size: 16px; - color: lighten($ui-base-color, 8%); + color: $lighter-text-color; margin-top: 10px; margin-bottom: 10px; @@ -240,7 +240,7 @@ strong { font-weight: 500; background: $ui-base-color; - color: $ui-secondary-color; + color: $secondary-text-color; border-radius: 4px; font-size: 14px; padding: 3px 6px; @@ -292,7 +292,7 @@ &__label { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; margin-bottom: 5px; text-transform: uppercase; font-size: 12px; @@ -300,7 +300,7 @@ &__case { background: $ui-base-color; - color: $ui-secondary-color; + color: $secondary-text-color; font-weight: 500; padding: 10px; border-radius: 4px; @@ -317,7 +317,7 @@ .figure { background: darken($ui-base-color, 8%); - color: $ui-secondary-color; + color: $secondary-text-color; margin-bottom: 20px; border-radius: 4px; padding: 10px; @@ -407,7 +407,7 @@ .actions-modal, .mute-modal { background: lighten($ui-secondary-color, 8%); - color: $ui-base-color; + color: $inverted-text-color; border-radius: 8px; overflow: hidden; max-width: 90vw; @@ -464,7 +464,7 @@ & > div { flex: 1 1 auto; text-align: right; - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; padding-right: 10px; } @@ -553,7 +553,7 @@ box-sizing: border-box; width: 100%; margin: 0; - color: $ui-base-color; + color: $inverted-text-color; background: $white; padding: 10px; font-family: inherit; @@ -575,7 +575,7 @@ margin-bottom: 24px; &__label { - color: $ui-base-color; + color: $inverted-text-color; font-size: 14px; } } @@ -628,7 +628,7 @@ li:not(:empty) { a { - color: $ui-base-color; + color: $inverted-text-color; display: flex; padding: 12px 16px; font-size: 15px; @@ -646,8 +646,8 @@ &:focus { &, button { - background: $ui-highlight-color; - color: $primary-text-color; + background: $ui-highlight-color; + color: $primary-text-color; } } @@ -666,14 +666,14 @@ .confirmation-modal__cancel-button, .mute-modal__cancel-button { background-color: transparent; - color: darken($ui-secondary-color, 34%); + color: $lighter-text-color; font-size: 14px; font-weight: 500; &:hover, &:focus, &:active { - color: darken($ui-secondary-color, 38%); + color: darken($lighter-text-color, 4%); } } } @@ -715,7 +715,6 @@ } .embed-modal__html { - color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -724,7 +723,7 @@ padding: 10px; font-family: 'mastodon-font-monospace', monospace; background: $ui-base-color; - color: $ui-primary-color; + color: $primary-text-color; font-size: 14px; margin: 0; margin-bottom: 15px; diff --git a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss index 9c1873cdff..178df66525 100644 --- a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss +++ b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss @@ -2,7 +2,7 @@ text-align: center; font-size: 16px; font-weight: 500; - color: lighten($ui-base-color, 16%); + color: $dark-text-color; background: $ui-base-color; cursor: default; display: flex; @@ -42,7 +42,7 @@ strong { display: block; margin-bottom: 10px; - color: lighten($ui-base-color, 34%); + color: $dark-text-color; } span { diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index 5466971767..91861ea19b 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -12,7 +12,7 @@ padding-right: 30px; font-family: inherit; background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; font-size: 14px; margin: 0; @@ -47,7 +47,7 @@ font-size: 18px; width: 18px; height: 18px; - color: $ui-secondary-color; + color: $secondary-text-color; cursor: default; pointer-events: none; @@ -82,7 +82,7 @@ } .search-results__header { - color: $ui-base-lighter-color; + color: $dark-text-color; background: lighten($ui-base-color, 2%); border-bottom: 1px solid darken($ui-base-color, 4%); padding: 15px 10px; @@ -93,13 +93,13 @@ .search-results__hashtag { display: block; padding: 10px; - color: $ui-secondary-color; + color: $secondary-text-color; text-decoration: none; &:hover, &:active, &:focus { - color: lighten($ui-secondary-color, 4%); + color: lighten($secondary-text-color, 4%); text-decoration: underline; } } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 2946b39e10..cc0a1c5b17 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -33,14 +33,14 @@ } a { - color: $ui-secondary-color; + color: $secondary-text-color; text-decoration: none; &:hover { text-decoration: underline; .fa { - color: lighten($ui-base-color, 40%); + color: lighten($dark-text-color, 7%); } } @@ -55,7 +55,7 @@ } .fa { - color: lighten($ui-base-color, 30%); + color: $dark-text-color; } } @@ -82,7 +82,7 @@ border-radius: 2px; background: lighten($ui-base-color, 30%); border: none; - color: lighten($ui-base-color, 8%); + color: $inverted-text-color; font-weight: 500; font-size: 11px; padding: 0 5px; @@ -177,36 +177,32 @@ &.status-direct { background: lighten($ui-base-color, 8%); - - .icon-button.disabled { - color: lighten($ui-base-color, 16%); - } } &.light { .status__relative-time { - color: $ui-primary-color; + color: $lighter-text-color; } .status__display-name { - color: $ui-base-color; + color: $inverted-text-color; } .display-name { strong { - color: $ui-base-color; + color: $inverted-text-color; } span { - color: $ui-primary-color; + color: $lighter-text-color; } } .status__content { - color: $ui-base-color; + color: $inverted-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } a.status__content__spoiler-link { @@ -285,7 +281,7 @@ background: transparent; .icon-button.disabled { - color: lighten($ui-base-color, 13%); + color: lighten($action-button-color, 13%); } } } @@ -295,7 +291,7 @@ margin-left: auto; padding-left: 18px; width: 120px; - color: $ui-base-lighter-color; + color: $dark-text-color; font-size: 14px; text-align: right; white-space: nowrap; @@ -305,7 +301,7 @@ .status__display-name { margin: 0 auto 0 0; - color: $ui-base-lighter-color; + color: $dark-text-color; overflow: hidden; } @@ -333,7 +329,7 @@ display: flex; align-items: center; height: 1em; - color: lighten($ui-base-color, 26%); + color: transparentize($lighter-text-color, 0.1); .status__visibility-icon { padding-left: 6px; @@ -382,13 +378,13 @@ .status__prepend { margin: -10px -10px 10px; - color: $ui-base-lighter-color; + color: $dark-text-color; padding: 8px 10px 0 68px; font-size: 14px; position: relative; .status__display-name strong { - color: $ui-base-lighter-color; + color: $dark-text-color; } > span { @@ -445,7 +441,7 @@ .detailed-status__meta { margin-top: 15px; - color: $ui-base-lighter-color; + color: $dark-text-color; font-size: 14px; line-height: 18px; } @@ -515,7 +511,7 @@ } .detailed-status__display-name { - color: $ui-secondary-color; + color: $secondary-text-color; display: block; line-height: 24px; margin-bottom: 15px; @@ -549,11 +545,11 @@ .muted { .status__content p, .status__content a { - color: $ui-base-lighter-color; + color: $dark-text-color; } .status__display-name strong { - color: $ui-base-lighter-color; + color: $dark-text-color; } .status__avatar { @@ -562,7 +558,7 @@ a.status__content__spoiler-link { background: $ui-base-lighter-color; - color: lighten($ui-base-color, 4%); + color: $inverted-text-color; &:hover { background: lighten($ui-base-color, 29%); @@ -584,7 +580,7 @@ font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; - color: $ui-base-lighter-color; + color: $dark-text-color; margin-top: 14px; text-decoration: none; overflow: hidden; @@ -626,7 +622,7 @@ display: block; font-weight: 500; margin-bottom: 5px; - color: $ui-primary-color; + color: $darker-text-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -639,7 +635,7 @@ } .status-card__description { - color: $ui-primary-color; + color: $darker-text-color; } .status-card__host { diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index e761f58eb2..9d5ab66a48 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -100,7 +100,7 @@ .name { flex: 1 1 auto; - color: $ui-secondary-color; + color: $secondary-text-color; width: calc(100% - 88px); .username { diff --git a/app/javascript/flavours/glitch/styles/footer.scss b/app/javascript/flavours/glitch/styles/footer.scss index 2d953b34e7..ba2a06954e 100644 --- a/app/javascript/flavours/glitch/styles/footer.scss +++ b/app/javascript/flavours/glitch/styles/footer.scss @@ -2,7 +2,7 @@ text-align: center; margin-top: 30px; font-size: 12px; - color: darken($ui-secondary-color, 25%); + color: $darker-text-color; .domain { font-weight: 500; diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index ca6228612a..8dbc557d45 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -17,14 +17,14 @@ code { span.hint { display: block; - color: $ui-primary-color; + color: $darker-text-color; font-size: 12px; margin-top: 4px; } p.hint { margin-bottom: 15px; - color: $ui-primary-color; + color: $darker-text-color; &.subtle-hint { text-align: center; @@ -32,10 +32,10 @@ code { line-height: 18px; margin-top: 15px; margin-bottom: 0; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } } } @@ -232,7 +232,7 @@ code { } &:focus:invalid { - border-bottom-color: $error-value-color; + border-bottom-color: lighten($error-red, 12%); } &:required:valid { @@ -241,26 +241,26 @@ code { &:active, &:focus { - border-bottom-color: $ui-highlight-color; + border-bottom-color: $highlight-text-color; background: rgba($base-overlay-background, 0.1); } } .input.field_with_errors { label { - color: $error-value-color; + color: lighten($error-red, 12%); } input[type=text], input[type=email], input[type=password] { - border-bottom-color: $error-value-color; + border-bottom-color: $valid-value-color; } .error { display: block; font-weight: 500; - color: $error-value-color; + color: lighten($error-red, 12%); margin-top: 4px; } } @@ -339,7 +339,7 @@ code { padding: 7px 4px; padding-bottom: 9px; font-size: 16px; - color: $ui-base-lighter-color; + color: $dark-text-color; font-family: inherit; pointer-events: none; cursor: default; @@ -349,7 +349,7 @@ code { .flash-message { background: lighten($ui-base-color, 8%); - color: $ui-primary-color; + color: $darker-text-color; border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; @@ -361,7 +361,6 @@ code { } .oauth-code { - color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -370,7 +369,7 @@ code { padding: 10px; font-family: 'mastodon-font-monospace', monospace; background: $ui-base-color; - color: $ui-primary-color; + color: $primary-text-color; font-size: 14px; margin: 0; @@ -409,7 +408,7 @@ code { text-align: center; a { - color: $ui-primary-color; + color: $darker-text-color; text-decoration: none; &:hover { @@ -422,7 +421,7 @@ code { .follow-prompt { margin-bottom: 30px; text-align: center; - color: $ui-primary-color; + color: $darker-text-color; h2 { font-size: 16px; @@ -430,7 +429,7 @@ code { } strong { - color: $ui-secondary-color; + color: $secondary-text-color; font-weight: 500; @each $lang in $cjk-langs { @@ -467,7 +466,7 @@ code { .qr-alternative { margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; flex: 150px; samp { diff --git a/app/javascript/flavours/glitch/styles/landing_strip.scss b/app/javascript/flavours/glitch/styles/landing_strip.scss index ffa1e149da..86614b89bc 100644 --- a/app/javascript/flavours/glitch/styles/landing_strip.scss +++ b/app/javascript/flavours/glitch/styles/landing_strip.scss @@ -1,7 +1,7 @@ .landing-strip, .memoriam-strip { background: rgba(darken($ui-base-color, 7%), 0.8); - color: $ui-primary-color; + color: $darker-text-color; font-weight: 400; padding: 14px; border-radius: 4px; @@ -45,7 +45,7 @@ padding: 14px; border-radius: 4px; background: rgba(darken($ui-base-color, 7%), 0.8); - color: $ui-secondary-color; + color: $secondary-text-color; font-weight: 400; margin-bottom: 20px; @@ -88,7 +88,7 @@ .fa { margin-right: 5px; - color: $ui-primary-color; + color: $darker-text-color; } } @@ -103,7 +103,7 @@ text-decoration: none; span { - color: $ui-highlight-color; + color: $highlight-text-color; font-weight: 400; } } diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index 343e3591f7..b505c15806 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -79,7 +79,7 @@ font-size: 14px; .status__relative-time { - color: $ui-primary-color; + color: $lighter-text-color; } } } @@ -88,7 +88,7 @@ display: block; max-width: 100%; padding-right: 25px; - color: $ui-base-color; + color: $inverted-text-color; } .status__avatar { @@ -121,7 +121,7 @@ strong { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -132,15 +132,15 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $light-text-color; } } .status__content { - color: $ui-base-color; + color: $inverted-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } a.status__content__spoiler-link { @@ -178,7 +178,7 @@ strong { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -189,7 +189,7 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $light-text-color; } } } @@ -207,10 +207,10 @@ } .status__content { - color: $ui-base-color; + color: $inverted-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } a.status__content__spoiler-link { @@ -225,7 +225,7 @@ .detailed-status__meta { margin-top: 15px; - color: $ui-primary-color; + color: $light-text-color; font-size: 14px; line-height: 18px; @@ -243,7 +243,7 @@ .status-card { border-color: lighten($ui-secondary-color, 4%); - color: darken($ui-primary-color, 4%); + color: $lighter-text-color; &:hover { background: lighten($ui-secondary-color, 4%); @@ -252,7 +252,7 @@ .status-card__title, .status-card__description { - color: $ui-base-color; + color: $inverted-text-color; } .status-card__image { @@ -262,7 +262,7 @@ .media-spoiler { background: $ui-primary-color; - color: $white; + color: $inverted-text-color; transition: all 100ms linear; &:hover, @@ -278,7 +278,7 @@ padding-left: (48px + 14px * 2); padding-bottom: 0; margin-bottom: -4px; - color: $ui-primary-color; + color: $light-text-color; font-size: 14px; position: relative; @@ -288,7 +288,7 @@ } .status__display-name.muted strong { - color: $ui-primary-color; + color: $light-text-color; } } diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index 92870e6790..c12d84f1c0 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -30,7 +30,7 @@ } a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; &:hover { @@ -68,7 +68,7 @@ a.table-action-link { display: inline-block; margin-right: 5px; padding: 0 10px; - color: rgba($primary-text-color, 0.7); + color: $darker-text-color; font-weight: 500; &:hover { diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index e3ba725c44..cc08fd06fd 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -17,7 +17,6 @@ $base-shadow-color: $black !default; $base-overlay-background: $black !default; $base-border-color: $white !default; $simple-background-color: $white !default; -$primary-text-color: $white !default; $valid-value-color: $success-green !default; $error-value-color: $error-red !default; @@ -26,7 +25,19 @@ $ui-base-color: $classic-base-color !default; // Darkest $ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest $ui-primary-color: $classic-primary-color !default; // Lighter $ui-secondary-color: $classic-secondary-color !default; // Lightest -$ui-highlight-color: $classic-highlight-color !default; // Vibrant +$ui-highlight-color: $classic-highlight-color !default; + +// Variables for texts +$primary-text-color: $white !default; +$darker-text-color: $ui-primary-color !default; +$dark-text-color: $ui-base-lighter-color !default; +$secondary-text-color: $ui-secondary-color !default; +$highlight-text-color: $ui-highlight-color !default; +$action-button-color: $ui-base-lighter-color !default; +// For texts on inverted backgrounds +$inverted-text-color: $ui-base-color !default; +$lighter-text-color: $ui-base-lighter-color !default; +$light-text-color: $ui-primary-color !default; // Language codes that uses CJK fonts $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; From 0bf81fde9b9881e6129cf5fa839c8ab058b9c59c Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 21:01:15 +0200 Subject: [PATCH 12/24] Fix link colors in report modal --- app/javascript/flavours/glitch/styles/components/modal.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 6e4e741bdf..b6795c1a22 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -532,6 +532,10 @@ overflow-y: auto; overflow-x: hidden; + .status__content a { + color: $highlight-text-color; + } + @media screen and (max-width: 480px) { max-height: 10vh; } From 995eea18363cc921c384f55601ced81116b5b560 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 21:03:38 +0200 Subject: [PATCH 13/24] [Glitch] Fix text color in "show more" link inside boost confirmation modal Port b5d0bf338c3b3a56062bc0384ffa90fcf297bf4d to glitch-soc --- app/javascript/flavours/glitch/styles/components/modal.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index b6795c1a22..e3f74cb34d 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -425,6 +425,10 @@ top: 10px; width: 48px; } + + .status__content__spoiler-link { + color: lighten($secondary-text-color, 8%); + } } .actions-modal { From 18c7b739eb5223cbc18a2d1dd09ea7370b988834 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 21:06:46 +0200 Subject: [PATCH 14/24] Move attachment-lists out of lists.scss --- .../glitch/styles/components/lists.scss | 64 ------------------- .../glitch/styles/components/status.scss | 64 +++++++++++++++++++ 2 files changed, 64 insertions(+), 64 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss index 24efe60dfb..f5837c6c4c 100644 --- a/app/javascript/flavours/glitch/styles/components/lists.scss +++ b/app/javascript/flavours/glitch/styles/components/lists.scss @@ -1,67 +1,3 @@ -.attachment-list { - display: flex; - font-size: 14px; - border: 1px solid lighten($ui-base-color, 8%); - border-radius: 4px; - margin-top: 14px; - overflow: hidden; - - &__icon { - flex: 0 0 auto; - color: $dark-text-color; - padding: 8px 18px; - cursor: default; - border-right: 1px solid lighten($ui-base-color, 8%); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 26px; - - .fa { - display: block; - } - } - - &__list { - list-style: none; - padding: 4px 0; - padding-left: 8px; - display: flex; - flex-direction: column; - justify-content: center; - - li { - display: block; - padding: 4px 0; - } - - a { - text-decoration: none; - color: $dark-text-color; - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } - } - - &.compact { - border: 0; - margin-top: 4px; - - .attachment-list__list { - padding: 0; - display: block; - } - - .fa { - color: $dark-text-color; - } - } -} - .list-editor { background: $ui-base-color; flex-direction: column; diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index cc0a1c5b17..7c7f9824ae 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -734,3 +734,67 @@ top: 4px; z-index: 5; } + +.attachment-list { + display: flex; + font-size: 14px; + border: 1px solid lighten($ui-base-color, 8%); + border-radius: 4px; + margin-top: 14px; + overflow: hidden; + + &__icon { + flex: 0 0 auto; + color: $dark-text-color; + padding: 8px 18px; + cursor: default; + border-right: 1px solid lighten($ui-base-color, 8%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 26px; + + .fa { + display: block; + } + } + + &__list { + list-style: none; + padding: 4px 0; + padding-left: 8px; + display: flex; + flex-direction: column; + justify-content: center; + + li { + display: block; + padding: 4px 0; + } + + a { + text-decoration: none; + color: $dark-text-color; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + } + + &.compact { + border: 0; + margin-top: 4px; + + .attachment-list__list { + padding: 0; + display: block; + } + + .fa { + color: $dark-text-color; + } + } +} From 345d5aeba1e3f5147abaf2bee9ac391df0d4f40c Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 21:58:19 +0200 Subject: [PATCH 15/24] [Glitch] Add high-contrast theme --- .../flavours/glitch/styles/contrast.scss | 3 +++ .../flavours/glitch/styles/contrast/diff.scss | 14 ++++++++++++ .../glitch/styles/contrast/variables.scss | 22 +++++++++++++++++++ .../skins/glitch/contrast/common.scss | 1 + .../skins/glitch/contrast/names.yml | 4 ++++ 5 files changed, 44 insertions(+) create mode 100644 app/javascript/flavours/glitch/styles/contrast.scss create mode 100644 app/javascript/flavours/glitch/styles/contrast/diff.scss create mode 100644 app/javascript/flavours/glitch/styles/contrast/variables.scss create mode 100644 app/javascript/skins/glitch/contrast/common.scss create mode 100644 app/javascript/skins/glitch/contrast/names.yml diff --git a/app/javascript/flavours/glitch/styles/contrast.scss b/app/javascript/flavours/glitch/styles/contrast.scss new file mode 100644 index 0000000000..4de31db9ae --- /dev/null +++ b/app/javascript/flavours/glitch/styles/contrast.scss @@ -0,0 +1,3 @@ +@import 'contrast/variables'; +@import 'index'; +@import 'contrast/diff'; diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss new file mode 100644 index 0000000000..eee9ecc3ef --- /dev/null +++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss @@ -0,0 +1,14 @@ +// components.scss +.compose-form { + .compose-form__modifiers { + .compose-form__upload { + &-description { + input { + &::placeholder { + opacity: 1.0; + } + } + } + } + } +} diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss new file mode 100644 index 0000000000..35d11060eb --- /dev/null +++ b/app/javascript/flavours/glitch/styles/contrast/variables.scss @@ -0,0 +1,22 @@ +// Dependent colors +$black: #000000; + +$classic-base-color: #282c37; +$classic-primary-color: #9baec8; +$classic-secondary-color: #d9e1e8; + +$ui-base-color: $classic-base-color !default; +$ui-primary-color: $classic-primary-color !default; +$ui-secondary-color: $classic-secondary-color !default; + +// Differences +$ui-highlight-color: #2b5fd9; + +$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; +$action-button-color: #8d9ac2; + +$inverted-text-color: $black !default; +$lighter-text-color: darken($ui-base-color,6%) !default; +$light-text-color: darken($ui-primary-color, 40%) !default; diff --git a/app/javascript/skins/glitch/contrast/common.scss b/app/javascript/skins/glitch/contrast/common.scss new file mode 100644 index 0000000000..90919d6d48 --- /dev/null +++ b/app/javascript/skins/glitch/contrast/common.scss @@ -0,0 +1 @@ +@import 'flavours/glitch/styles/contrast'; diff --git a/app/javascript/skins/glitch/contrast/names.yml b/app/javascript/skins/glitch/contrast/names.yml new file mode 100644 index 0000000000..f60c4acd00 --- /dev/null +++ b/app/javascript/skins/glitch/contrast/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + contrast: High contrast From 8abac3dcb828398bb1a066c32c8765ae35ab9ae4 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 22:38:15 +0200 Subject: [PATCH 16/24] minor fix --- app/javascript/flavours/glitch/styles/components/status.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 7c7f9824ae..aa476678cd 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -329,7 +329,7 @@ display: flex; align-items: center; height: 1em; - color: transparentize($lighter-text-color, 0.1); + color: $lighter-text-color; .status__visibility-icon { padding-left: 6px; From 2b5821b86b43d4f4f0c26f1a12480b479d1a1314 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sun, 6 May 2018 11:31:05 +0200 Subject: [PATCH 17/24] Fix color of status icons in glitch-soc high contrast skin --- app/javascript/flavours/glitch/styles/components/status.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index aa476678cd..733845c5f8 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -329,7 +329,7 @@ display: flex; align-items: center; height: 1em; - color: $lighter-text-color; + color: $action-button-color; .status__visibility-icon { padding-left: 6px; From 1bc1d8e6764214fa773980a747928c8ad5958be6 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sun, 6 May 2018 20:43:54 +0200 Subject: [PATCH 18/24] Fix glitch high-contrast skin text colors Port from e0c3d950d18c1eb25ed9826e7113b01499c277e8 --- app/javascript/flavours/glitch/styles/contrast/variables.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss index 35d11060eb..f6cadf0298 100644 --- a/app/javascript/flavours/glitch/styles/contrast/variables.scss +++ b/app/javascript/flavours/glitch/styles/contrast/variables.scss @@ -4,6 +4,7 @@ $black: #000000; $classic-base-color: #282c37; $classic-primary-color: #9baec8; $classic-secondary-color: #d9e1e8; +$classic-highlight-color: #2b90d9; $ui-base-color: $classic-base-color !default; $ui-primary-color: $classic-primary-color !default; @@ -15,6 +16,7 @@ $ui-highlight-color: #2b5fd9; $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: $classic-highlight-color !default; $action-button-color: #8d9ac2; $inverted-text-color: $black !default; From 82421dc2e2fc54e2d89645d7b1fc460978584097 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sun, 6 May 2018 21:50:26 +0200 Subject: [PATCH 19/24] Revert "[Glitch] Do not re-position scroll when loading more (inserting items from below)" This reverts commit ca62d8bcc6175891670611c557bda1793c11ff46. --- app/javascript/flavours/glitch/components/scrollable_list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index b8281b1ee2..56e91f8642 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -86,7 +86,7 @@ export default class ScrollableList extends PureComponent { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); - if (someItemInserted && this.node.scrollTop > 0 || (this.state.mouseOver && !prevProps.isLoading)) { + if (someItemInserted && this.node.scrollTop > 0 || this.state.mouseOver) { return this.node.scrollHeight - this.node.scrollTop; } else { return null; From 04a8aef9d2bb6cb14d1ad021e3fc8f3d4a31a4a5 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sun, 6 May 2018 21:50:33 +0200 Subject: [PATCH 20/24] Revert "[Glitch] Prevent timeline from moving when cursor is hovering over it" This reverts commit 1c75c7901fc750f678cf90844cb5879d0d5046ce. --- .../flavours/glitch/components/scrollable_list.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index 56e91f8642..df3ace4c19 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -35,7 +35,6 @@ export default class ScrollableList extends PureComponent { state = { fullscreen: null, - mouseOver: false, }; intersectionObserverWrapper = new IntersectionObserverWrapper(); @@ -86,7 +85,7 @@ export default class ScrollableList extends PureComponent { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); - if (someItemInserted && this.node.scrollTop > 0 || this.state.mouseOver) { + if (someItemInserted && this.node.scrollTop > 0) { return this.node.scrollHeight - this.node.scrollTop; } else { return null; @@ -148,14 +147,6 @@ export default class ScrollableList extends PureComponent { this.props.onScrollToBottom(); } - handleMouseEnter = () => { - this.setState({ mouseOver: true }); - } - - handleMouseLeave = () => { - this.setState({ mouseOver: false }); - } - render () { const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props; const { fullscreen } = this.state; @@ -166,7 +157,7 @@ export default class ScrollableList extends PureComponent { if (isLoading || childrenCount > 0 || !emptyMessage) { scrollableArea = ( -
    +
    {prepend} From 557db7ae6dbf757961b3834e4a4ac9435a97304c Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 7 May 2018 12:30:55 +0200 Subject: [PATCH 21/24] Fix color of disabled boost buttons (fixes #466) --- app/javascript/flavours/glitch/styles/components/boost.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components/boost.scss b/app/javascript/flavours/glitch/styles/components/boost.scss index 66bc83bcb3..d924440425 100644 --- a/app/javascript/flavours/glitch/styles/components/boost.scss +++ b/app/javascript/flavours/glitch/styles/components/boost.scss @@ -16,13 +16,13 @@ button.icon-button i.fa-retweet { // Disabled variant button.icon-button.disabled i.fa-retweet { &, &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } // Disabled variant for use with DMs .status-direct button.icon-button.disabled i.fa-retweet { &, &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } From d5e0e665dffa8683f794334cd4f6b4876301c46a Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 7 May 2018 14:55:16 +0200 Subject: [PATCH 22/24] [Glitch] Also display replies in report modal Port c88e12fca622c46a361a5c751a529e77aa5bf2ba to glitch-soc --- .../flavours/glitch/features/ui/components/report_modal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/javascript/flavours/glitch/features/ui/components/report_modal.js b/app/javascript/flavours/glitch/features/ui/components/report_modal.js index b5fc33d036..3b7a5ff206 100644 --- a/app/javascript/flavours/glitch/features/ui/components/report_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/report_modal.js @@ -30,7 +30,7 @@ const makeMapStateToProps = () => { account: getAccount(state, accountId), comment: state.getIn(['reports', 'new', 'comment']), forward: state.getIn(['reports', 'new', 'forward']), - statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])), + statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}:with_replies`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])), }; }; @@ -64,12 +64,12 @@ export default class ReportModal extends ImmutablePureComponent { } componentDidMount () { - this.props.dispatch(refreshAccountTimeline(this.props.account.get('id'))); + this.props.dispatch(refreshAccountTimeline(this.props.account.get('id'), true)); } componentWillReceiveProps (nextProps) { if (this.props.account !== nextProps.account && nextProps.account) { - this.props.dispatch(refreshAccountTimeline(nextProps.account.get('id'))); + this.props.dispatch(refreshAccountTimeline(nextProps.account.get('id'), true)); } } From 49181d497ff837e4a50431f710c4eefd0a7314b8 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 7 May 2018 14:59:22 +0200 Subject: [PATCH 23/24] [Glitch] Allow report modal to be up to 80% of viewport height Port bddb330a8a08b7459c299fb56ae8770c3ac69af5 to glitch-soc --- app/javascript/flavours/glitch/styles/components/modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index e3f74cb34d..49ed474407 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -532,7 +532,7 @@ .report-modal__statuses { flex: 1 1 auto; min-height: 20vh; - max-height: 40vh; + max-height: 80vh; overflow-y: auto; overflow-x: hidden; From 3333cce41ecf721a89fa37a3de2733f53586729b Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 7 May 2018 15:00:55 +0200 Subject: [PATCH 24/24] Hide media in report modal regardless of whether they are marked sensitive MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The rationale behind this is that if the user wants to report violent media, they might not want to see it repeatedly. The “sensitive” property is still kept, displaying different messages for hidden media depending on whether they are marked as sensitive. --- .../flavours/glitch/components/media_gallery.js | 3 ++- .../features/report/components/status_check_box.js | 3 ++- .../flavours/glitch/features/video/index.js | 14 +++++++++++--- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 925132b077..7f5150f7bc 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -202,6 +202,7 @@ export default class MediaGallery extends React.PureComponent { static propTypes = { sensitive: PropTypes.bool, + revealed: PropTypes.bool, standalone: PropTypes.bool, letterbox: PropTypes.bool, fullwidth: PropTypes.bool, @@ -216,7 +217,7 @@ export default class MediaGallery extends React.PureComponent { }; state = { - visible: !this.props.sensitive || displaySensitiveMedia, + visible: this.props.revealed === undefined ? (!this.props.sensitive || displaySensitiveMedia) : this.props.revealed, }; componentWillReceiveProps (nextProps) { diff --git a/app/javascript/flavours/glitch/features/report/components/status_check_box.js b/app/javascript/flavours/glitch/features/report/components/status_check_box.js index d72a0fd07c..a685132b0d 100644 --- a/app/javascript/flavours/glitch/features/report/components/status_check_box.js +++ b/app/javascript/flavours/glitch/features/report/components/status_check_box.js @@ -40,6 +40,7 @@ export default class StatusCheckBox extends React.PureComponent { height={110} inline sensitive={status.get('sensitive')} + revealed={false} onOpenVideo={noop} /> )} @@ -48,7 +49,7 @@ export default class StatusCheckBox extends React.PureComponent { } else { media = ( - {Component => } + {Component => } ); } diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 8c6d68dc41..3be6e19f78 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -92,6 +92,7 @@ export default class Video extends React.PureComponent { width: PropTypes.number, height: PropTypes.number, sensitive: PropTypes.bool, + revealed: PropTypes.bool, startTime: PropTypes.number, onOpenVideo: PropTypes.func, onCloseVideo: PropTypes.func, @@ -111,7 +112,7 @@ export default class Video extends React.PureComponent { fullscreen: false, hovered: false, muted: false, - revealed: !this.props.sensitive || displaySensitiveMedia, + revealed: this.props.revealed === undefined ? (!this.props.sensitive || displaySensitiveMedia) : this.props.revealed, }; setPlayerRef = c => { @@ -255,7 +256,7 @@ export default class Video extends React.PureComponent { } render () { - const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props; + const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed, sensitive } = this.props; const { containerWidth, currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; const progress = (currentTime / duration) * 100; const playerStyle = {}; @@ -270,6 +271,13 @@ export default class Video extends React.PureComponent { playerStyle.height = height; } + let warning; + if (sensitive) { + warning = ; + } else { + warning = ; + } + return (