From 91fb82a4ddfc13fb916d1b539f6a8fcb164166f5 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 2bef53cff780b..0a43f14b73927 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 356d0214c93da79f0583a62a6ca748828d721326 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 a208f1a8e5b64..7a0a2dfa96186 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 61354f2e1b679..23fbd999cdc6a 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 d56de19ea1eae..9ca03fc2c3cf8 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 484410befc243..b66cce3c1fa44 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 76f29d591639a..af79922c247a4 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 4c2b522a606a73c7bfbc28b3046ce2940b145a20 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 0000000000000..e1a3ea2c6ef61 --- /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 0000000000000..bb14ad2e0c51d --- /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 0000000000000..6a22a78226c59 --- /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 b25278180a5a53572222e7c5784cb2abbff96217 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 f9c380f39345c..17ebc5b5e1e91 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 bfa5bdde2c3fef9fbc08ebb10112047274607f28 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 ad5d3134e406c2bcfceca6a1b7dd3dceb6ec1061 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 4b1ef6c97241c..4cf833a3ec73b 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 245bebef33178..27b2586e5e6ff 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 553cc2824040ba0b745644eb4633840129ffc13b 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 58852695c8ec490239ed3812f82971f8c1e6c172 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 df3ace4c19a70..56e91f86420db 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 32974a58dcf5a8db39a9c0378f923a40d787cad3 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 8c601b54ccf530bd193b4500fee439aa4e9162d0 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 56e91f86420db..b8281b1ee284e 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 9edc5cafe444f0647c91b086f733903e15093260 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 5acd5315f23b4472f31c4a0bb612b7356032defc 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 d97e236963e14..8a7d3412da219 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 390cfdef2e81f8d3a58c4a5e1d1656e8484f395d 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 cb74c0cfe4aa89f9656c054253665ef4965b41df 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 3146a343d0ee3..23c9a674216d2 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 2bef53cff780b..ca6228612ae33 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 b3a236637e124f2f2e6f70af099cbedb13895b15 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 74dae9458d118b066cd74b16aab2aa9cafbf3fba 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 8a7d3412da219..55f31266f5f0b 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 082867f17be17..eff964e504881 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 23c9a674216d2..b077df145092a 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 15fbb1c892733..8e3db257262dc 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 90d98cc8c5e0d..4980ab5f1ac7c 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 a86120e085bb4..84d3f6adefd63 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 b07b72f8eb169..66bc83bcb39fe 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 34175685eb7bd..6847cf788f25b 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 7112400f41249..dd21eae06cce6 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 0ed8c392aeaf6..df239dba79670 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 4161cc0456771..dcc551c5b2219 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 afb54056c8010..6f3338605e59e 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 85f416ceb529c..24efe60dfba0b 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 16c8cf00303f5..9e1606e995563 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 9d06a508e59e6..90674612d350d 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 d56de19ea1eae..fd940026bc97f 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 2eb80aba83bbd..6e4e741bdff36 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 9c1873cdffc9c..178df66525a11 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 54669717678eb..91861ea19b2c9 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 2946b39e10f5f..cc0a1c5b17ba6 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 e761f58eb2858..9d5ab66a486de 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 2d953b34e78ac..ba2a06954ec21 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 ca6228612ae33..8dbc557d45612 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 ffa1e149dad91..86614b89bc580 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 343e3591f7ad6..b505c15806cfa 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 92870e67900e0..c12d84f1c0bac 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 e3ba725c44095..cc08fd06fd873 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 983328376bb3e64c4863d7d3304c3ef8d218e08c 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 6e4e741bdff36..b6795c1a22a2f 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 bd3b9bf7b9b0fa934475684d631b3fa18928c084 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 ba917e15f66c7848fe943e571d1ec5eeb549b59d 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 b6795c1a22a2f..e3f74cb34d5b4 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 caebf69e77e1d7be9102e0bc9f59412462fed3ae 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 24efe60dfba0b..f5837c6c4cb48 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 cc0a1c5b17ba6..7c7f9824ae358 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 f7a076eded6517c9cf235524dd95e6bcdad4974a 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 0000000000000..4de31db9aec57 --- /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 0000000000000..eee9ecc3ef7f2 --- /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 0000000000000..35d11060eb349 --- /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 0000000000000..90919d6d4840a --- /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 0000000000000..f60c4acd00ff1 --- /dev/null +++ b/app/javascript/skins/glitch/contrast/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + contrast: High contrast From 2d065ceaf6f069a4a91691daac03ea3f2078a0fc 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 7c7f9824ae358..aa476678cdef3 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 65349bc155b4e3fb99721758944e19dd5af31489 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 aa476678cdef3..733845c5f825e 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 1adca9b0407bd9d1e27a921e66c373468cf2a09c 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 3c5006ec7fa98ec53df619b0e6e52b3bbdb6f046 --- 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 35d11060eb349..f6cadf0298cf4 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 4133f70902c0c88f511ef8f09b665b2ea4b8dc3a 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 32974a58dcf5a8db39a9c0378f923a40d787cad3. --- 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 b8281b1ee284e..56e91f86420db 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 de7feea30ea4ed3a514740706f1d2023e3103429 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 553cc2824040ba0b745644eb4633840129ffc13b. --- .../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 56e91f86420db..df3ace4c19a70 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 ffdb85f8591cf9e836e2b1d3854a78f3a37133c4 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 66bc83bcb39fe..d924440425533 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 7972464e71adf0e5cc327d40b9b75b15a22bbe5a 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 b5fc33d036950..3b7a5ff20603b 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 6b94237810fefde05b3732ae2d657ce4f342b3b5 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 e3f74cb34d5b4..49ed474407a6f 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 658ac4396cf1b7cab034701082645747c39f7af2 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 925132b077e81..7f5150f7bcb76 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 d72a0fd07c3a0..a685132b0d1e6 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 8c6d68dc41eeb..3be6e19f78c6f 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 (