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 2bef53cff..0a43f14b7 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 a208f1a8e..7a0a2dfa9 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 61354f2e1..23fbd999c 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 d56de19ea..9ca03fc2c 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 484410bef..b66cce3c1 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 76f29d591..af79922c2 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 000000000..e1a3ea2c6 --- /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 000000000..bb14ad2e0 --- /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 000000000..6a22a7822 --- /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 f9c380f39..17ebc5b5e 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 4b1ef6c97..4cf833a3e 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 245bebef3..27b2586e5 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 df3ace4c1..56e91f864 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 56e91f864..b8281b1ee 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 d97e23696..8a7d3412d 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 3146a343d..23c9a6742 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 2bef53cff..ca6228612 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 8a7d3412d..55f31266f 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 082867f17..eff964e50 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 23c9a6742..b077df145 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 15fbb1c89..8e3db2572 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 90d98cc8c..4980ab5f1 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 a86120e08..84d3f6ade 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 b07b72f8e..66bc83bcb 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 34175685e..6847cf788 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 7112400f4..dd21eae06 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 0ed8c392a..df239dba7 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 4161cc045..dcc551c5b 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 afb54056c..6f3338605 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 85f416ceb..24efe60df 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 16c8cf003..9e1606e99 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 9d06a508e..90674612d 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 d56de19ea..fd940026b 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 2eb80aba8..6e4e741bd 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 9c1873cdf..178df6652 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 546697176..91861ea19 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 2946b39e1..cc0a1c5b1 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 e761f58eb..9d5ab66a4 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 2d953b34e..ba2a06954 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 ca6228612..8dbc557d4 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 ffa1e149d..86614b89b 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 343e3591f..b505c1580 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 92870e679..c12d84f1c 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 e3ba725c4..cc08fd06f 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 6e4e741bd..b6795c1a2 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 b6795c1a2..e3f74cb34 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 24efe60df..f5837c6c4 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 cc0a1c5b1..7c7f9824a 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 000000000..4de31db9a --- /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 000000000..eee9ecc3e --- /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 000000000..35d11060e --- /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 000000000..90919d6d4 --- /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 000000000..f60c4acd0 --- /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 7c7f9824a..aa476678c 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 aa476678c..733845c5f 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 35d11060e..f6cadf029 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 b8281b1ee..56e91f864 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 56e91f864..df3ace4c1 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 66bc83bcb..d92444042 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 b5fc33d03..3b7a5ff20 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 e3f74cb34..49ed47440 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 925132b07..7f5150f7b 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 d72a0fd07..a685132b0 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 8c6d68dc4..3be6e19f7 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 (