Merge pull request #282 from Rintan/features/material-theme

テーマのアップデートなど

.dependabot/config.yml

@@ -4,7 +4,25 @@ update_configs:
   - package_manager: "ruby:bundler"
     directory: "/"
     update_schedule: "weekly"
+    # Supported update schedule: live daily weekly monthly
+    version_requirement_updates: "auto"
+    # Supported version requirements: auto widen_ranges increase_versions increase_versions_if_necessary
+    allowed_updates:
+      - match:
+          dependency_type: "all"
+          # Supported dependency types: all indirect direct production development
+          update_type: "all"
+          # Supported update types: all security
 
   - package_manager: "javascript"
     directory: "/"
     update_schedule: "weekly"
+    # Supported update schedule: live daily weekly monthly
+    version_requirement_updates: "auto"
+    # Supported version requirements: auto widen_ranges increase_versions increase_versions_if_necessary
+    allowed_updates:
+      - match:
+          dependency_type: "all"
+          # Supported dependency types: all indirect direct production development
+          update_type: "all"
+          # Supported update types: all security

.gitignore

@@ -58,7 +58,7 @@ yarn-error.log
 yarn-debug.log
 
 # Ignore vagrant log files
-ubuntu-xenial-16.04-cloudimg-console.log
+*-cloudimg-console.log
 
 # Ignore Docker option files
 docker-compose.override.yml

Gemfile

@@ -133,7 +133,7 @@ end
 
 group :development do
   gem 'active_record_query_trace', '~> 1.7'
-  gem 'annotate', '~> 3.0'
+  gem 'annotate', '~> 3.1'
   gem 'better_errors', '~> 2.6'
   gem 'binding_of_caller', '~> 0.7'
   gem 'bullet', '~> 6.1'
@@ -141,11 +141,11 @@ group :development do
   gem 'letter_opener_web', '~> 1.4'
   gem 'memory_profiler'
   gem 'rubocop', '~> 0.79', require: false
-  gem 'rubocop-rails', '~> 2.4', require: false
+  gem 'rubocop-rails', '~> 2.5', require: false
   gem 'brakeman', '~> 4.8', require: false
   gem 'bundler-audit', '~> 0.6', require: false
 
-  gem 'capistrano', '~> 3.12'
+  gem 'capistrano', '~> 3.13'
   gem 'capistrano-rails', '~> 1.4'
   gem 'capistrano-rbenv', '~> 2.1'
   gem 'capistrano-yarn', '~> 2.0'

Gemfile.lock

@@ -82,7 +82,7 @@ GEM
       public_suffix (>= 2.0.2, < 5.0)
     airbrussh (1.4.0)
       sshkit (>= 1.6.1, != 1.7.0)
-    annotate (3.0.3)
+    annotate (3.1.1)
       activerecord (>= 3.2, < 7.0)
       rake (>= 10.4, < 14.0)
     arel (9.0.0)
@@ -91,23 +91,23 @@ GEM
       encryptor (~> 3.0.0)
     av (0.9.0)
       cocaine (~> 0.5.3)
-    aws-eventstream (1.0.3)
+    aws-eventstream (1.1.0)
-    aws-partitions (1.286.0)
+    aws-partitions (1.296.0)
-    aws-sdk-core (3.92.0)
+    aws-sdk-core (3.94.0)
-      aws-eventstream (~> 1.0, >= 1.0.2)
+      aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.239.0)
       aws-sigv4 (~> 1.1)
       jmespath (~> 1.0)
     aws-sdk-kms (1.30.0)
       aws-sdk-core (~> 3, >= 3.71.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.61.1)
+    aws-sdk-s3 (1.61.2)
       aws-sdk-core (~> 3, >= 3.83.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.1)
-    aws-sigv4 (1.1.1)
+    aws-sigv4 (1.1.2)
       aws-eventstream (~> 1.0, >= 1.0.2)
-    bcrypt (3.1.12)
+    bcrypt (3.1.13)
     better_errors (2.6.0)
       coderay (>= 1.0.0)
       erubi (>= 1.0.0)
@@ -128,14 +128,13 @@ GEM
       bundler (>= 1.2.0, < 3)
       thor (~> 0.18)
     byebug (11.1.1)
-    capistrano (3.12.1)
+    capistrano (3.13.0)
       airbrussh (>= 1.0.0)
       i18n
       rake (>= 10.0.0)
       sshkit (>= 1.9.0)
-    capistrano-bundler (1.3.0)
+    capistrano-bundler (1.6.0)
       capistrano (~> 3.1)
-      sshkit (~> 1.2)
     capistrano-rails (1.4.0)
       capistrano (~> 3.1)
       capistrano-bundler (~> 1.1)
@@ -202,25 +201,25 @@ GEM
       dotenv (= 2.7.5)
       railties (>= 3.2, < 6.1)
     e2mmap (0.1.0)
-    elasticsearch (7.5.0)
+    elasticsearch (7.6.0)
-      elasticsearch-api (= 7.5.0)
+      elasticsearch-api (= 7.6.0)
-      elasticsearch-transport (= 7.5.0)
+      elasticsearch-transport (= 7.6.0)
-    elasticsearch-api (7.5.0)
+    elasticsearch-api (7.6.0)
       multi_json
-    elasticsearch-dsl (0.1.8)
+    elasticsearch-dsl (0.1.9)
-    elasticsearch-transport (7.5.0)
+    elasticsearch-transport (7.6.0)
-      faraday (>= 0.14, < 1)
+      faraday (~> 1)
       multi_json
     encryptor (3.0.0)
     equatable (0.6.1)
     erubi (1.9.0)
     et-orbi (1.2.3)
       tzinfo
-    excon (0.71.0)
+    excon (0.73.0)
-    fabrication (2.21.0)
+    fabrication (2.21.1)
     faker (2.11.0)
       i18n (>= 1.6, < 2)
-    faraday (0.17.3)
+    faraday (1.0.1)
       multipart-post (>= 1.2, < 3)
     fast_blank (1.0.0)
     fastimage (2.1.7)
@@ -342,7 +341,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.4.0)
+    loofah (2.5.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -376,7 +375,7 @@ GEM
     nio4r (2.5.2)
     nokogiri (1.10.9)
       mini_portile2 (~> 2.4.0)
-    nokogumbo (2.0.1)
+    nokogumbo (2.0.2)
       nokogiri (~> 1.8, >= 1.8.4)
     nsa (0.2.7)
       activesupport (>= 4.2, < 6)
@@ -408,7 +407,7 @@ GEM
     parallel (1.19.1)
     parallel_tests (2.32.0)
       parallel
-    parser (2.7.0.5)
+    parser (2.7.1.1)
       ast (~> 2.4.0)
     parslet (1.8.2)
     pastel (0.7.3)
@@ -434,7 +433,7 @@ GEM
       pry (~> 0.10)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (4.0.3)
+    public_suffix (4.0.4)
     puma (4.3.3)
       nio4r (~> 2.0)
     pundit (2.1.0)
@@ -493,25 +492,25 @@ GEM
       rdf (~> 3.1)
     redcarpet (3.4.0)
     redis (4.1.3)
-    redis-actionpack (5.0.2)
+    redis-actionpack (5.2.0)
-      actionpack (>= 4.0, < 6)
+      actionpack (>= 5, < 7)
-      redis-rack (>= 1, < 3)
+      redis-rack (>= 2.1.0, < 3)
       redis-store (>= 1.1.0, < 2)
     redis-activesupport (5.0.4)
       activesupport (>= 3, < 6)
       redis-store (>= 1.3, < 2)
     redis-namespace (1.7.0)
       redis (>= 3.0.4)
-    redis-rack (2.0.4)
+    redis-rack (2.1.2)
-      rack (>= 1.5, < 3)
+      rack (>= 2.0.8, < 3)
       redis-store (>= 1.2, < 2)
     redis-rails (5.0.2)
       redis-actionpack (>= 5.0, < 6)
       redis-activesupport (>= 5.0, < 6)
       redis-store (>= 1.2, < 2)
-    redis-store (1.5.0)
+    redis-store (1.8.2)
-      redis (>= 2.2, < 5)
+      redis (>= 4, < 5)
-    regexp_parser (1.6.0)
+    regexp_parser (1.7.0)
     request_store (1.5.0)
       rack (>= 1.4)
     responders (3.0.0)
@@ -522,7 +521,7 @@ GEM
     rqrcode (1.1.2)
       chunky_png (~> 1.0)
       rqrcode_core (~> 0.1)
-    rqrcode_core (0.1.1)
+    rqrcode_core (0.1.2)
     rspec-core (3.9.1)
       rspec-support (~> 3.9.1)
     rspec-expectations (3.9.1)
@@ -550,7 +549,8 @@ GEM
       rainbow (>= 2.2.2, < 4.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 1.7)
-    rubocop-rails (2.4.2)
+    rubocop-rails (2.5.2)
+      activesupport
       rack (>= 1.1)
       rubocop (>= 0.72.0)
     ruby-progressbar (1.10.1)
@@ -667,7 +667,7 @@ DEPENDENCIES
   active_model_serializers (~> 0.10)
   active_record_query_trace (~> 1.7)
   addressable (~> 2.7)
-  annotate (~> 3.0)
+  annotate (~> 3.1)
   aws-sdk-s3 (~> 1.61)
   better_errors (~> 2.6)
   binding_of_caller (~> 0.7)
@@ -677,7 +677,7 @@ DEPENDENCIES
   browser
   bullet (~> 6.1)
   bundler-audit (~> 0.6)
-  capistrano (~> 3.12)
+  capistrano (~> 3.13)
   capistrano-rails (~> 1.4)
   capistrano-rbenv (~> 2.1)
   capistrano-yarn (~> 2.0)
@@ -766,7 +766,7 @@ DEPENDENCIES
   rspec-rails (~> 4.0)
   rspec-sidekiq (~> 3.0)
   rubocop (~> 0.79)
-  rubocop-rails (~> 2.4)
+  rubocop-rails (~> 2.5)
   ruby-progressbar (~> 1.10)
   sanitize (~> 5.1)
   sidekiq (~> 6.0)

README.md

@@ -80,7 +80,7 @@ A **Vagrant** configuration is included for development purposes.
 
 Mastodon is **free, open-source software** licensed under **AGPLv3**.
 
-You can open issues for bugs you've found or features you think are missing. You can also submit pull requests to this repository, or submit translations using Weblate. To get started, take a look at [CONTRIBUTING.md](CONTRIBUTING.md). If your contributions are accepted into Mastodon, you can request to be paid through [our OpenCollective](https://opencollective.com/mastodon).
+You can open issues for bugs you've found or features you think are missing. You can also submit pull requests to this repository, or submit translations using Crowdin. To get started, take a look at [CONTRIBUTING.md](CONTRIBUTING.md). If your contributions are accepted into Mastodon, you can request to be paid through [our OpenCollective](https://opencollective.com/mastodon).
 
 **IRC channel**: #mastodon on irc.freenode.net
 

app/controllers/activitypub/inboxes_controller.rb

@@ -49,7 +49,7 @@ class ActivityPub::InboxesController < ActivityPub::BaseController
       ResolveAccountWorker.perform_async(signed_request_account.acct)
     end
 
-    DeliveryFailureTracker.track_inverse_success!(signed_request_account)
+    DeliveryFailureTracker.reset!(signed_request_account.inbox_url)
   end
 
   def process_payload

app/controllers/admin/instances_controller.rb

@@ -19,7 +19,7 @@ module Admin
       @followers_count = Follow.where(target_account: Account.where(domain: params[:id])).count
       @reports_count   = Report.where(target_account: Account.where(domain: params[:id])).count
       @blocks_count    = Block.where(target_account: Account.where(domain: params[:id])).count
-      @available       = DeliveryFailureTracker.available?(Account.select(:shared_inbox_url).where(domain: params[:id]).first&.shared_inbox_url)
+      @available       = DeliveryFailureTracker.available?(params[:id])
       @media_storage   = MediaAttachment.where(account: Account.where(domain: params[:id])).sum(:file_file_size)
       @private_comment = @domain_block&.private_comment
       @public_comment  = @domain_block&.public_comment

app/controllers/settings/pictures_controller.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Settings
+  class PicturesController < BaseController
+    before_action :authenticate_user!
+    before_action :set_account
+    before_action :set_picture
+
+    def destroy
+      if valid_picture
+        account_params = {
+          @picture => nil,
+          (@picture + '_remote_url') => nil,
+        }
+
+        msg = UpdateAccountService.new.call(@account, account_params) ? I18n.t('generic.changes_saved_msg') : nil
+        redirect_to settings_profile_path, notice: msg, status: 303
+      else
+        bad_request
+      end
+    end
+
+    private
+
+    def set_account
+      @account = current_account
+    end
+
+    def set_picture
+      @picture = params[:id]
+    end
+
+    def valid_picture
+      @picture == 'avatar' || @picture == 'header'
+    end
+  end
+end

app/controllers/tags_controller.rb

@@ -10,6 +10,7 @@ class TagsController < ApplicationController
   before_action :require_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
   before_action :authenticate_user!, if: :whitelist_mode?
   before_action :set_tag
+  before_action :set_local
   before_action :set_body_classes
   before_action :set_instance_presenter
 
@@ -24,7 +25,7 @@ class TagsController < ApplicationController
       format.rss do
         expires_in 0, public: true
 
-        @statuses = HashtagQueryService.new.call(@tag, filter_params).limit(PAGE_SIZE)
+        @statuses = HashtagQueryService.new.call(@tag, filter_params, nil, @local).limit(PAGE_SIZE)
         @statuses = cache_collection(@statuses, Status)
 
         render xml: RSS::TagSerializer.render(@tag, @statuses)
@@ -33,7 +34,7 @@ class TagsController < ApplicationController
       format.json do
         expires_in 3.minutes, public: public_fetch_mode?
 
-        @statuses = HashtagQueryService.new.call(@tag, filter_params, current_account, params[:local]).paginate_by_max_id(PAGE_SIZE, params[:max_id])
+        @statuses = HashtagQueryService.new.call(@tag, filter_params, current_account, @local).paginate_by_max_id(PAGE_SIZE, params[:max_id])
         @statuses = cache_collection(@statuses, Status)
 
         render json: collection_presenter, serializer: ActivityPub::CollectionSerializer, adapter: ActivityPub::Adapter, content_type: 'application/activity+json'
@@ -47,6 +48,10 @@ class TagsController < ApplicationController
     @tag = Tag.usable.find_normalized!(params[:id])
   end
 
+  def set_local
+    @local = truthy_param?(:local)
+  end
+
   def set_body_classes
     @body_classes = 'with-modals'
   end

app/helpers/admin/action_logs_helper.rb

@@ -47,7 +47,7 @@ module Admin::ActionLogsHelper
         I18n.t('admin.action_logs.deleted_status')
       end
     when 'Announcement'
-      truncate(attributes['text'])
+      truncate(attributes['text'].is_a?(Array) ? attributes['text'].last : attributes['text'])
     end
   end
 end

app/helpers/settings_helper.rb

@@ -105,4 +105,13 @@ module SettingsHelper
       safe_join([image_tag(account.avatar.url, width: 15, height: 15, alt: display_name(account), class: 'avatar'), content_tag(:span, account.acct, class: 'username')], ' ')
     end
   end
+
+  def picture_hint(hint, picture)
+    if picture.original_filename.nil?
+      hint
+    else
+      link = link_to t('generic.delete'), settings_profile_picture_path(picture.name.to_s), data: { method: :delete }
+      safe_join([hint, link], '<br/>'.html_safe)
+    end
+  end
 end

app/javascript/mastodon/actions/timelines.js

@@ -113,12 +113,13 @@ export const expandAccountTimeline         = (accountId, { maxId, withReplies }
 export const expandAccountFeaturedTimeline = accountId => expandTimeline(`account:${accountId}:pinned`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true });
 export const expandAccountMediaTimeline    = (accountId, { maxId } = {}) => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { max_id: maxId, only_media: true, limit: 40 });
 export const expandListTimeline            = (id, { maxId } = {}, done = noOp) => expandTimeline(`list:${id}`, `/api/v1/timelines/list/${id}`, { max_id: maxId }, done);
-export const expandHashtagTimeline         = (hashtag, { maxId, tags } = {}, done = noOp) => {
+export const expandHashtagTimeline         = (hashtag, { maxId, tags, local } = {}, done = noOp) => {
   return expandTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`, {
     max_id: maxId,
     any:    parseTags(tags, 'any'),
     all:    parseTags(tags, 'all'),
     none:   parseTags(tags, 'none'),
+    local:  local,
   }, done);
 };
 

app/javascript/mastodon/components/dropdown_menu.js

@@ -68,20 +68,14 @@ class DropdownMenu extends React.PureComponent {
   handleKeyDown = e => {
     const items = Array.from(this.node.getElementsByTagName('a'));
     const index = items.indexOf(document.activeElement);
-    let element;
+    let element = null;
 
     switch(e.key) {
     case 'ArrowDown':
-      element = items[index+1];
+      element = items[index+1] || items[0];
-      if (element) {
-        element.focus();
-      }
       break;
     case 'ArrowUp':
-      element = items[index-1];
+      element = items[index-1] || items[items.length-1];
-      if (element) {
-        element.focus();
-      }
       break;
     case 'Tab':
       if (e.shiftKey) {
@@ -89,28 +83,23 @@ class DropdownMenu extends React.PureComponent {
       } else {
         element = items[index+1] || items[0];
       }
-      if (element) {
-        element.focus();
-        e.preventDefault();
-        e.stopPropagation();
-      }
       break;
     case 'Home':
       element = items[0];
-      if (element) {
-        element.focus();
-      }
       break;
     case 'End':
       element = items[items.length-1];
-      if (element) {
-        element.focus();
-      }
       break;
     case 'Escape':
       this.props.onClose();
       break;
     }
+
+    if (element) {
+      element.focus();
+      e.preventDefault();
+      e.stopPropagation();
+    }
   }
 
   handleItemKeyPress = e => {

app/javascript/mastodon/components/poll.js

@@ -4,7 +4,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { vote, fetchPoll } from 'mastodon/actions/polls';
 import Motion from 'mastodon/features/ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import escapeTextContentForBrowser from 'escape-html';
@@ -28,8 +27,9 @@ class Poll extends ImmutablePureComponent {
   static propTypes = {
     poll: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
-    dispatch: PropTypes.func,
     disabled: PropTypes.bool,
+    refresh: PropTypes.func,
+    onVote: PropTypes.func,
   };
 
   state = {
@@ -100,7 +100,7 @@ class Poll extends ImmutablePureComponent {
       return;
     }
 
-    this.props.dispatch(vote(this.props.poll.get('id'), Object.keys(this.state.selected)));
+    this.props.onVote(Object.keys(this.state.selected));
   };
 
   handleRefresh = () => {
@@ -108,7 +108,7 @@ class Poll extends ImmutablePureComponent {
       return;
     }
 
-    this.props.dispatch(fetchPoll(this.props.poll.get('id')));
+    this.props.refresh();
   };
 
   renderOption (option, optionIndex, showResults) {

app/javascript/mastodon/containers/poll_container.js

@@ -1,8 +1,25 @@
 import { connect } from 'react-redux';
+import { debounce } from 'lodash';
+
 import Poll from 'mastodon/components/poll';
+import { fetchPoll, vote } from 'mastodon/actions/polls';
+
+const mapDispatchToProps = (dispatch, { pollId }) => ({
+  refresh: debounce(
+    () => {
+      dispatch(fetchPoll(pollId));
+    },
+    1000,
+    { leading: true },
+  ),
+
+  onVote (choices) {
+    dispatch(vote(pollId, choices));
+  },
+});
 
 const mapStateToProps = (state, { pollId }) => ({
   poll: state.getIn(['polls', pollId]),
 });
 
-export default connect(mapStateToProps)(Poll);
+export default connect(mapStateToProps, mapDispatchToProps)(Poll);

app/javascript/mastodon/containers/timeline_container.js

@@ -38,7 +38,7 @@ export default class TimelineContainer extends React.PureComponent {
     let timeline;
 
     if (hashtag) {
-      timeline = <HashtagTimeline hashtag={hashtag} />;
+      timeline = <HashtagTimeline hashtag={hashtag} local={local} />;
     } else {
       timeline = <PublicTimeline local={local} />;
     }

app/javascript/mastodon/features/blocks/index.js

@@ -19,6 +19,7 @@ const messages = defineMessages({
 const mapStateToProps = state => ({
   accountIds: state.getIn(['user_lists', 'blocks', 'items']),
   hasMore: !!state.getIn(['user_lists', 'blocks', 'next']),
+  isLoading: state.getIn(['user_lists', 'blocks', 'isLoading'], true),
 });
 
 export default @connect(mapStateToProps)
@@ -31,6 +32,7 @@ class Blocks extends ImmutablePureComponent {
     shouldUpdateScroll: PropTypes.func,
     accountIds: ImmutablePropTypes.list,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     multiColumn: PropTypes.bool,
   };
@@ -44,7 +46,7 @@ class Blocks extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render () {
-    const { intl, accountIds, shouldUpdateScroll, hasMore, multiColumn } = this.props;
+    const { intl, accountIds, shouldUpdateScroll, hasMore, multiColumn, isLoading } = this.props;
 
     if (!accountIds) {
       return (
@@ -63,6 +65,7 @@ class Blocks extends ImmutablePureComponent {
           scrollKey='blocks'
           onLoadMore={this.handleLoadMore}
           hasMore={hasMore}
+          isLoading={isLoading}
           shouldUpdateScroll={shouldUpdateScroll}
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}

app/javascript/mastodon/features/compose/components/privacy_dropdown.js

@@ -50,7 +50,7 @@ class PrivacyDropdownMenu extends React.PureComponent {
     const index = items.findIndex(item => {
       return (item.value === value);
     });
-    let element;
+    let element = null;
 
     switch(e.key) {
     case 'Escape':
@@ -60,18 +60,10 @@ class PrivacyDropdownMenu extends React.PureComponent {
       this.handleClick(e);
       break;
     case 'ArrowDown':
-      element = this.node.childNodes[index + 1];
+      element = this.node.childNodes[index + 1] || this.node.firstChild;
-      if (element) {
-        element.focus();
-        this.props.onChange(element.getAttribute('data-index'));
-      }
       break;
     case 'ArrowUp':
-      element = this.node.childNodes[index - 1];
+      element = this.node.childNodes[index - 1] || this.node.lastChild;
-      if (element) {
-        element.focus();
-        this.props.onChange(element.getAttribute('data-index'));
-      }
       break;
     case 'Tab':
       if (e.shiftKey) {
@@ -79,28 +71,21 @@ class PrivacyDropdownMenu extends React.PureComponent {
       } else {
         element = this.node.childNodes[index + 1] || this.node.firstChild;
       }
-      if (element) {
-        element.focus();
-        this.props.onChange(element.getAttribute('data-index'));
-        e.preventDefault();
-        e.stopPropagation();
-      }
       break;
     case 'Home':
       element = this.node.firstChild;
-      if (element) {
-        element.focus();
-        this.props.onChange(element.getAttribute('data-index'));
-      }
       break;
     case 'End':
       element = this.node.lastChild;
-      if (element) {
-        element.focus();
-        this.props.onChange(element.getAttribute('data-index'));
-      }
       break;
     }
+
+    if (element) {
+      element.focus();
+      this.props.onChange(element.getAttribute('data-index'));
+      e.preventDefault();
+      e.stopPropagation();
+    }
   }
 
   handleClick = e => {

app/javascript/mastodon/features/follow_requests/index.js

@@ -19,6 +19,7 @@ const messages = defineMessages({
 
 const mapStateToProps = state => ({
   accountIds: state.getIn(['user_lists', 'follow_requests', 'items']),
+  isLoading: state.getIn(['user_lists', 'follow_requests', 'isLoading'], true),
   hasMore: !!state.getIn(['user_lists', 'follow_requests', 'next']),
   locked: !!state.getIn(['accounts', me, 'locked']),
   domain: state.getIn(['meta', 'domain']),
@@ -33,6 +34,7 @@ class FollowRequests extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
     shouldUpdateScroll: PropTypes.func,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
     accountIds: ImmutablePropTypes.list,
     locked: PropTypes.bool,
     domain: PropTypes.string,
@@ -49,7 +51,7 @@ class FollowRequests extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render () {
-    const { intl, shouldUpdateScroll, accountIds, hasMore, multiColumn, locked, domain } = this.props;
+    const { intl, shouldUpdateScroll, accountIds, hasMore, multiColumn, locked, domain, isLoading } = this.props;
 
     if (!accountIds) {
       return (
@@ -77,6 +79,7 @@ class FollowRequests extends ImmutablePureComponent {
           scrollKey='follow_requests'
           onLoadMore={this.handleLoadMore}
           hasMore={hasMore}
+          isLoading={isLoading}
           shouldUpdateScroll={shouldUpdateScroll}
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}

app/javascript/mastodon/features/followers/index.js

@@ -22,6 +22,7 @@ const mapStateToProps = (state, props) => ({
   isAccount: !!state.getIn(['accounts', props.params.accountId]),
   accountIds: state.getIn(['user_lists', 'followers', props.params.accountId, 'items']),
   hasMore: !!state.getIn(['user_lists', 'followers', props.params.accountId, 'next']),
+  isLoading: state.getIn(['user_lists', 'followers', props.params.accountId, 'isLoading'], true),
   blockedBy: state.getIn(['relationships', props.params.accountId, 'blocked_by'], false),
 });
 
@@ -34,6 +35,7 @@ class Followers extends ImmutablePureComponent {
     shouldUpdateScroll: PropTypes.func,
     accountIds: ImmutablePropTypes.list,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
     blockedBy: PropTypes.bool,
     isAccount: PropTypes.bool,
     multiColumn: PropTypes.bool,
@@ -58,7 +60,7 @@ class Followers extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render () {
-    const { shouldUpdateScroll, accountIds, hasMore, blockedBy, isAccount, multiColumn } = this.props;
+    const { shouldUpdateScroll, accountIds, hasMore, blockedBy, isAccount, multiColumn, isLoading } = this.props;
 
     if (!isAccount) {
       return (
@@ -85,6 +87,7 @@ class Followers extends ImmutablePureComponent {
         <ScrollableList
           scrollKey='followers'
           hasMore={hasMore}
+          isLoading={isLoading}
           onLoadMore={this.handleLoadMore}
           shouldUpdateScroll={shouldUpdateScroll}
           prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}

app/javascript/mastodon/features/following/index.js

@@ -22,6 +22,7 @@ const mapStateToProps = (state, props) => ({
   isAccount: !!state.getIn(['accounts', props.params.accountId]),
   accountIds: state.getIn(['user_lists', 'following', props.params.accountId, 'items']),
   hasMore: !!state.getIn(['user_lists', 'following', props.params.accountId, 'next']),
+  isLoading: state.getIn(['user_lists', 'following', props.params.accountId, 'isLoading'], true),
   blockedBy: state.getIn(['relationships', props.params.accountId, 'blocked_by'], false),
 });
 
@@ -34,6 +35,7 @@ class Following extends ImmutablePureComponent {
     shouldUpdateScroll: PropTypes.func,
     accountIds: ImmutablePropTypes.list,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
     blockedBy: PropTypes.bool,
     isAccount: PropTypes.bool,
     multiColumn: PropTypes.bool,
@@ -58,7 +60,7 @@ class Following extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render () {
-    const { shouldUpdateScroll, accountIds, hasMore, blockedBy, isAccount, multiColumn } = this.props;
+    const { shouldUpdateScroll, accountIds, hasMore, blockedBy, isAccount, multiColumn, isLoading } = this.props;
 
     if (!isAccount) {
       return (
@@ -85,6 +87,7 @@ class Following extends ImmutablePureComponent {
         <ScrollableList
           scrollKey='following'
           hasMore={hasMore}
+          isLoading={isLoading}
           onLoadMore={this.handleLoadMore}
           shouldUpdateScroll={shouldUpdateScroll}
           prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}

app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js

@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import Toggle from 'react-toggle';
 import AsyncSelect from 'react-select/async';
+import SettingToggle from '../../notifications/components/setting_toggle';
 
 const messages = defineMessages({
   placeholder: { id: 'hashtag.column_settings.select.placeholder', defaultMessage: 'Enter hashtags…' },
@@ -87,6 +88,8 @@ class ColumnSettings extends React.PureComponent {
   };
 
   render () {
+    const { settings, onChange } = this.props;
+
     return (
       <div>
         <div className='column-settings__row'>
@@ -106,6 +109,10 @@ class ColumnSettings extends React.PureComponent {
             {this.modeSelect('none')}
           </div>
         )}
+
+        <div className='column-settings__row'>
+          <SettingToggle settings={settings} settingPath={['local']} onChange={onChange} label={<FormattedMessage id='community.column_settings.local_only' defaultMessage='Local only' />} />
+        </div>
       </div>
     );
   }

app/javascript/mastodon/features/hashtag_timeline/index.js

@@ -98,21 +98,21 @@ class HashtagTimeline extends React.PureComponent {
 
   componentDidMount () {
     const { dispatch } = this.props;
-    const { id, tags } = this.props.params;
+    const { id, tags, local } = this.props.params;
 
     this._subscribe(dispatch, id, tags);
-    dispatch(expandHashtagTimeline(id, { tags }));
+    dispatch(expandHashtagTimeline(id, { tags, local }));
   }
 
   componentWillReceiveProps (nextProps) {
     const { dispatch, params } = this.props;
-    const { id, tags } = nextProps.params;
+    const { id, tags, local } = nextProps.params;
 
-    if (id !== params.id || !isEqual(tags, params.tags)) {
+    if (id !== params.id || !isEqual(tags, params.tags) || !isEqual(local, params.local)) {
       this._unsubscribe();
       this._subscribe(dispatch, id, tags);
-      this.props.dispatch(clearTimeline(`hashtag:${id}`));
+      dispatch(clearTimeline(`hashtag:${id}`));
-      this.props.dispatch(expandHashtagTimeline(id, { tags }));
+      dispatch(expandHashtagTimeline(id, { tags, local }));
     }
   }
 
@@ -125,8 +125,8 @@ class HashtagTimeline extends React.PureComponent {
   }
 
   handleLoadMore = maxId => {
-    const { id, tags } = this.props.params;
+    const { id, tags, local } = this.props.params;
-    this.props.dispatch(expandHashtagTimeline(id, { maxId, tags }));
+    this.props.dispatch(expandHashtagTimeline(id, { maxId, tags, local }));
   }
 
   render () {

app/javascript/mastodon/features/mutes/index.js

@@ -19,6 +19,7 @@ const messages = defineMessages({
 const mapStateToProps = state => ({
   accountIds: state.getIn(['user_lists', 'mutes', 'items']),
   hasMore: !!state.getIn(['user_lists', 'mutes', 'next']),
+  isLoading: state.getIn(['user_lists', 'mutes', 'isLoading'], true),
 });
 
 export default @connect(mapStateToProps)
@@ -30,6 +31,7 @@ class Mutes extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
     shouldUpdateScroll: PropTypes.func,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
     accountIds: ImmutablePropTypes.list,
     intl: PropTypes.object.isRequired,
     multiColumn: PropTypes.bool,
@@ -44,7 +46,7 @@ class Mutes extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render () {
-    const { intl, shouldUpdateScroll, hasMore, accountIds, multiColumn } = this.props;
+    const { intl, shouldUpdateScroll, hasMore, accountIds, multiColumn, isLoading } = this.props;
 
     if (!accountIds) {
       return (
@@ -63,6 +65,7 @@ class Mutes extends ImmutablePureComponent {
           scrollKey='mutes'
           onLoadMore={this.handleLoadMore}
           hasMore={hasMore}
+          isLoading={isLoading}
           shouldUpdateScroll={shouldUpdateScroll}
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}

app/javascript/mastodon/features/standalone/hashtag_timeline/index.js

@@ -24,19 +24,25 @@ class HashtagTimeline extends React.PureComponent {
     isLoading: PropTypes.bool.isRequired,
     hasMore: PropTypes.bool.isRequired,
     hashtag: PropTypes.string.isRequired,
+    local: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    local: false,
   };
 
   componentDidMount () {
-    const { dispatch, hashtag } = this.props;
+    const { dispatch, hashtag, local } = this.props;
 
-    dispatch(expandHashtagTimeline(hashtag));
+    dispatch(expandHashtagTimeline(hashtag, { local }));
   }
 
   handleLoadMore = () => {
-    const maxId = this.props.statusIds.last();
+    const { dispatch, hashtag, local, statusIds } = this.props;
+    const maxId = statusIds.last();
 
     if (maxId) {
-      this.props.dispatch(expandHashtagTimeline(this.props.hashtag, { maxId }));
+      dispatch(expandHashtagTimeline(hashtag, { maxId, local }));
     }
   }
 

app/javascript/mastodon/reducers/user_lists.js

@@ -2,12 +2,24 @@ import {
   NOTIFICATIONS_UPDATE,
 } from '../actions/notifications';
 import {
+  FOLLOWERS_FETCH_REQUEST,
   FOLLOWERS_FETCH_SUCCESS,
+  FOLLOWERS_FETCH_FAIL,
+  FOLLOWERS_EXPAND_REQUEST,
   FOLLOWERS_EXPAND_SUCCESS,
+  FOLLOWERS_EXPAND_FAIL,
+  FOLLOWING_FETCH_REQUEST,
   FOLLOWING_FETCH_SUCCESS,
+  FOLLOWING_FETCH_FAIL,
+  FOLLOWING_EXPAND_REQUEST,
   FOLLOWING_EXPAND_SUCCESS,
+  FOLLOWING_EXPAND_FAIL,
+  FOLLOW_REQUESTS_FETCH_REQUEST,
   FOLLOW_REQUESTS_FETCH_SUCCESS,
+  FOLLOW_REQUESTS_FETCH_FAIL,
+  FOLLOW_REQUESTS_EXPAND_REQUEST,
   FOLLOW_REQUESTS_EXPAND_SUCCESS,
+  FOLLOW_REQUESTS_EXPAND_FAIL,
   FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
   FOLLOW_REQUEST_REJECT_SUCCESS,
 } from '../actions/accounts';
@@ -16,12 +28,20 @@ import {
   FAVOURITES_FETCH_SUCCESS,
 } from '../actions/interactions';
 import {
+  BLOCKS_FETCH_REQUEST,
   BLOCKS_FETCH_SUCCESS,
+  BLOCKS_FETCH_FAIL,
+  BLOCKS_EXPAND_REQUEST,
   BLOCKS_EXPAND_SUCCESS,
+  BLOCKS_EXPAND_FAIL,
 } from '../actions/blocks';
 import {
+  MUTES_FETCH_REQUEST,
   MUTES_FETCH_SUCCESS,
+  MUTES_FETCH_FAIL,
+  MUTES_EXPAND_REQUEST,
   MUTES_EXPAND_SUCCESS,
+  MUTES_EXPAND_FAIL,
 } from '../actions/mutes';
 import {
   DIRECTORY_FETCH_REQUEST,
@@ -47,12 +67,13 @@ const normalizeList = (state, type, id, accounts, next) => {
   return state.setIn([type, id], ImmutableMap({
     next,
     items: ImmutableList(accounts.map(item => item.id)),
+    isLoading: false,
   }));
 };
 
 const appendToList = (state, type, id, accounts, next) => {
   return state.updateIn([type, id], map => {
-    return map.set('next', next).update('items', list => list.concat(accounts.map(item => item.id)));
+    return map.set('next', next).set('isLoading', false).update('items', list => list.concat(accounts.map(item => item.id)));
   });
 };
 
@@ -68,10 +89,22 @@ export default function userLists(state = initialState, action) {
     return normalizeList(state, 'followers', action.id, action.accounts, action.next);
   case FOLLOWERS_EXPAND_SUCCESS:
     return appendToList(state, 'followers', action.id, action.accounts, action.next);
+  case FOLLOWERS_FETCH_REQUEST:
+  case FOLLOWERS_EXPAND_REQUEST:
+    return state.setIn(['followers', action.id, 'isLoading'], true);
+  case FOLLOWERS_FETCH_FAIL:
+  case FOLLOWERS_EXPAND_FAIL:
+    return state.setIn(['followers', action.id, 'isLoading'], false);
   case FOLLOWING_FETCH_SUCCESS:
     return normalizeList(state, 'following', action.id, action.accounts, action.next);
   case FOLLOWING_EXPAND_SUCCESS:
     return appendToList(state, 'following', action.id, action.accounts, action.next);
+  case FOLLOWING_FETCH_REQUEST:
+  case FOLLOWING_EXPAND_REQUEST:
+    return state.setIn(['following', action.id, 'isLoading'], true);
+  case FOLLOWING_FETCH_FAIL:
+  case FOLLOWING_EXPAND_FAIL:
+    return state.setIn(['following', action.id, 'isLoading'], false);
   case REBLOGS_FETCH_SUCCESS:
     return state.setIn(['reblogged_by', action.id], ImmutableList(action.accounts.map(item => item.id)));
   case FAVOURITES_FETCH_SUCCESS:
@@ -79,9 +112,15 @@ export default function userLists(state = initialState, action) {
   case NOTIFICATIONS_UPDATE:
     return action.notification.type === 'follow_request' ? normalizeFollowRequest(state, action.notification) : state;
   case FOLLOW_REQUESTS_FETCH_SUCCESS:
-    return state.setIn(['follow_requests', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next);
+    return state.setIn(['follow_requests', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next).setIn(['follow_requests', 'isLoading'], false);
   case FOLLOW_REQUESTS_EXPAND_SUCCESS:
-    return state.updateIn(['follow_requests', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next);
+    return state.updateIn(['follow_requests', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next).setIn(['follow_requests', 'isLoading'], false);
+  case FOLLOW_REQUESTS_FETCH_REQUEST:
+  case FOLLOW_REQUESTS_EXPAND_REQUEST:
+    return state.setIn(['follow_requests', 'isLoading'], true);
+  case FOLLOW_REQUESTS_FETCH_FAIL:
+  case FOLLOW_REQUESTS_EXPAND_FAIL:
+    return state.setIn(['follow_requests', 'isLoading'], false);
   case FOLLOW_REQUEST_AUTHORIZE_SUCCESS:
   case FOLLOW_REQUEST_REJECT_SUCCESS:
     return state.updateIn(['follow_requests', 'items'], list => list.filterNot(item => item === action.id));
@@ -89,10 +128,22 @@ export default function userLists(state = initialState, action) {
     return state.setIn(['blocks', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['blocks', 'next'], action.next);
   case BLOCKS_EXPAND_SUCCESS:
     return state.updateIn(['blocks', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['blocks', 'next'], action.next);
+  case BLOCKS_FETCH_REQUEST:
+  case BLOCKS_EXPAND_REQUEST:
+    return state.setIn(['blocks', 'isLoading'], true);
+  case BLOCKS_FETCH_FAIL:
+  case BLOCKS_EXPAND_FAIL:
+    return state.setIn(['blocks', 'isLoading'], false);
   case MUTES_FETCH_SUCCESS:
     return state.setIn(['mutes', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['mutes', 'next'], action.next);
   case MUTES_EXPAND_SUCCESS:
     return state.updateIn(['mutes', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['mutes', 'next'], action.next);
+  case MUTES_FETCH_REQUEST:
+  case MUTES_EXPAND_REQUEST:
+    return state.setIn(['mutes', 'isLoading'], true);
+  case MUTES_FETCH_FAIL:
+  case MUTES_EXPAND_FAIL:
+    return state.setIn(['mutes', 'isLoading'], false);
   case DIRECTORY_FETCH_SUCCESS:
     return state.setIn(['directory', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['directory', 'isLoading'], false);
   case DIRECTORY_EXPAND_SUCCESS:

app/javascript/mastodon/utils/resize_image.js

@@ -2,6 +2,45 @@ import EXIF from 'exif-js';
 
 const MAX_IMAGE_PIXELS = 1638400; // 1280x1280px
 
+const _browser_quirks = {};
+
+// Some browsers will automatically draw images respecting their EXIF orientation
+// while others won't, and the safest way to detect that is to examine how it
+// is done on a known image.
+// See https://github.com/w3c/csswg-drafts/issues/4666
+// and https://github.com/blueimp/JavaScript-Load-Image/commit/1e4df707821a0afcc11ea0720ee403b8759f3881
+const dropOrientationIfNeeded = (orientation) => new Promise(resolve => {
+  switch (_browser_quirks['image-orientation-automatic']) {
+  case true:
+    resolve(1);
+    break;
+  case false:
+    resolve(orientation);
+    break;
+  default:
+    // black 2x1 JPEG, with the following meta information set:
+    // - EXIF Orientation: 6 (Rotated 90° CCW)
+    const testImageURL =
+      'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' +
+      'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' +
+      'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' +
+      'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/x' +
+      'ABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAA' +
+      'AAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==';
+    const img = new Image();
+    img.onload = () => {
+      const automatic = (img.width === 1 && img.height === 2);
+      _browser_quirks['image-orientation-automatic'] = automatic;
+      resolve(automatic ? 1 : orientation);
+    };
+    img.onerror = () => {
+      _browser_quirks['image-orientation-automatic'] = false;
+      resolve(orientation);
+    };
+    img.src = testImageURL;
+  }
+});
+
 const getImageUrl = inputFile => new Promise((resolve, reject) => {
   if (window.URL && URL.createObjectURL) {
     try {
@@ -38,7 +77,11 @@ const getOrientation = (img, type = 'image/png') => new Promise(resolve => {
 
   EXIF.getData(img, () => {
     const orientation = EXIF.getTag(img, 'Orientation');
-    resolve(orientation);
+    if (orientation !== 1) {
+      dropOrientationIfNeeded(orientation).then(resolve).catch(() => resolve(orientation));
+    } else {
+      resolve(orientation);
+    }
   });
 });
 

app/javascript/styles/mastodon-material-dark.scss

@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+@import 'application';
+@import 'mastodon-material-dark/account';
+@import 'mastodon-material-dark/basics';
+@import 'mastodon-material-dark/button';
+//@import 'mastodon-material-dark/cards';
+@import 'mastodon-material-dark/columns';
+@import 'mastodon-material-dark/components';
+@import 'mastodon-material-dark/config';
+@import 'mastodon-material-dark/control';
+@import 'mastodon-material-dark/emoji-picker';
+@import 'mastodon-material-dark/icons';
+@import 'mastodon-material-dark/material-icons';
+@import 'mastodon-material-dark/media';
+@import 'mastodon-material-dark/mobile';
+@import 'mastodon-material-dark/modal';
+@import 'mastodon-material-dark/statuses';

app/javascript/styles/mastodon-material-dark/_functions.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+@function to-string($value) {
+    @return inspect($value);
+}
+
+// convert hex color code to svg styled color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(to-string($color), 2, 7);
+}

app/javascript/styles/mastodon-material-dark/_mixins.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+
+$shadow-color-1: rgba(0,0,0,.2);
+$shadow-color-2: rgba(0,0,0,.14);
+$shadow-color-3: rgba(0,0,0,.12);
+
+@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
+@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
+@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
+@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
+@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
+@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
+@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
+@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
+@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
+@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
+@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
+@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
+@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
+@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
+@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
+@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
+
+@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}

app/javascript/styles/mastodon-material-dark/account.scss

@@ -0,0 +1,143 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name { color: $primary-text-color }
+    .account__display-name strong { color: $secondary-text-color }
+
+    &__avatar {
+        border-radius: $avater-radius;
+        width: 40px;
+        height: 40px;
+
+        &-overlay {
+            &-base {
+                border-radius: 50%;
+                width: 44px;
+                height: 44px;
+                background-size: 44px;
+            }
+
+            &-overlay { border-radius: $avater-radius }
+        }
+    }
+
+    &__header {
+        &__bar {
+            background: $card-background-color;
+            padding: 8px;
+            border-bottom: 1px solid $border-color;
+
+            .avatar .account__avatar { border: none }
+        }
+
+        &__tabs {
+            padding: 8px;
+
+            &__name {
+                padding: 8px;
+
+                h1 {
+                    color: $primary-text-color;
+
+                    small { color: $secondary-text-color }
+                }
+            }
+
+            &__buttons {
+                .icon-button {
+                    border: none;
+                    border-radius: 50%;
+                    padding: 0;
+                }
+            }
+        }
+
+        &__extra {
+            margin-top: 0;
+
+            &__links {
+                color: $secondary-text-color;
+                padding: 10px 0;
+
+                a {
+                    color: $secondary-text-color;
+                    padding: 4px 12px;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &__bio {
+            margin: 0;
+
+            .account__header {
+                &__content {
+                    color: $primary-text-color;
+                    padding: 8px;
+                }
+
+                &__fields {
+                    border: 1px solid $border-color;
+                    border-radius: 4px;
+
+                    .verified {
+                        border: none;
+                        background: $verified-background-color;
+
+                        a,
+                        &__mark { color: $primary-text-color }
+                    }
+
+                    dl {
+                        border-bottom: 1px solid $border-color;
+
+                        &:first-child .verified { border-radius: 0 }
+
+                        &:last-child { border-bottom: 0 }
+                    }
+
+                    dt {
+                        color: $primary-text-color;
+                        background: $list-background-inactive-color;
+                    }
+
+                    dd { color: $primary-text-color }
+                }
+            }
+        }
+    }
+
+    &__section-headline {
+        background: $text-tab-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $text-tab-indicator-color;
+
+            &.active {
+                color: $text-tab-indicator-active-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
+
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $text-tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $text-tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}

app/javascript/styles/mastodon-material-dark/basics.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+@import 'config';
+
+
+body { background: $background-color }
+
+// Chrome & Safari scroll bar
+::-webkit-scrollbar-thumb {
+    background: $scroll-bar-thumb-color;
+
+    &:hover { background: $scroll-bar-thumb-hover-color }
+    &:active { background: $scroll-bar-thumb-active-color }
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track:hover,
+::-webkit-scrollbar-track:active {
+    background: transparent !important;
+}
+
+// Firefox scroll bar
+html {
+    scrollbar-color: $scroll-bar-thumb-color transparent;
+}

app/javascript/styles/mastodon-material-dark/button.scss

@@ -0,0 +1,95 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+
+    &.active {
+        color: $icon-button-active-color;
+
+        &:hover { color: $icon-button-active-hover-color }
+    }
+
+    &.disabled { color: $disabled-icon-color }
+
+    &.inverted {
+        color: $icon-button-color;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background-color: $icon-background-hover-color;
+        }
+    }
+
+    &.overlayed {
+        border-radius: 50%;
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+    
+        &:hover {
+            background: $media-icon-background-color;
+            color: $media-icon-hover-color;
+        }
+    }
+
+    &:hover {
+        color: $icon-button-hover-color;
+        background-color: $icon-background-hover-color;
+    }
+
+    &:active,
+    &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+    font-size: 12px;
+
+    &:hover {
+        background-color: $icon-background-hover-color;
+        color: $icon-button-hover-color;
+    }
+}
+
+.button,
+.button:active,
+.button:focus {
+    background-color: $contained-button-color;
+    border-radius: $button-radius;
+}
+
+.button:hover {
+    @include shadow-2dp;
+    background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+    background: $contained-button-color;
+    margin: 2px;
+
+    &:hover { background: $contained-button-hover-color }
+
+    .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.confirmation-modal__cancel-button {
+    box-shadow: none;
+    background-color: transparent;
+    margin: 0 8px;
+    color: $text-button-color;
+
+    &:hover { background: $text-button-hover-color }
+
+    &:focus { background: $text-button-focus-color }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-background-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
+}

app/javascript/styles/mastodon-material-dark/cards.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+}
+
+.status {
+    border-bottom: 0 !important;
+    border-radius: $card-radius;
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}

app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss

@@ -27,7 +27,7 @@ $menu-background-color: #d9e1e8;
 $menu-background-hover-color: lighten($menu-background-color, 6%);
 $menu-background-active-color: lighten($menu-background-color, 10%);
 $menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #444b5d;
+$card-background-color: #313543;
 $card-background-hover-color: lighten($card-background-color, 6%);
 $card-background-inactive-color: lighten($card-background-color, 10%);
 $list-background-color: #282c37;
@@ -60,7 +60,7 @@ $top-bar-icon-active-color: $icon-hover-color;
 $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
 $control-border-color: $icon-color;
 
 // Button color
@@ -103,5 +103,27 @@ $search-bar-focus-color: #ffffff;
 
 // Tab color
 $tab-indicator-color: #d9e1e8;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.7);
+$tab-indicator-active-color: $top-bar-icon-color;
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

app/javascript/styles/mastodon-material-dark/columns.scss

@@ -0,0 +1,461 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-background-color }
+
+    &:last-child { box-shadow: none }
+}
+
+.column-header {
+    background: $top-bar-color;
+    border-radius: $bar-radius;
+
+    > button {
+        padding: 16px 0 16px 16px;
+        color: $top-bar-text-color;
+    }
+
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
+    &.active {
+        .column-header__icon {
+            color: $secondary-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        margin: 8px 10px;
+        padding: 10px 12px;
+        border-radius: 50%;
+
+        &.active {
+            color: $top-bar-icon-active-color;
+            background: $icon-background-active-color;
+
+            &:hover {
+                color: $top-bar-icon-hover-color;
+                background: $icon-background-hover-color;
+            }
+        }
+
+        &:hover {
+            color: $top-bar-icon-hover-color;
+            background: $icon-background-hover-color;
+        }
+    }
+
+    &__setting-btn {
+        color: $icon-button-color;
+        padding: 8px 0;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            text-decoration: none;
+        }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
+    }
+
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &::before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        background: $card-background-color;
+        border-top: 1px solid $border-color;
+
+        &-inner {
+            background: $card-background-color;
+            padding: 16px;
+        }
+
+        &.collapsed { border-top: none }
+    }
+
+    &__back-button {
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        padding: 8px;
+        margin: auto 0;
+        border-radius: 50%;
+
+        span { display: none }
+    }
+}
+
+.column-subheading {
+    color: $section-text-color;
+    background: $background-color;
+    padding: 12px 16px;
+    border-top: 1px solid $border-color;
+}
+
+.column-link {
+    color: $ui-text-color;
+    background: $background-color;
+    padding: 16px;
+    border-radius: $nav-drawer-item-radius;
+
+    &:hover { background: $list-background-hover-color }
+
+    &:active,
+    &:focus { background: $list-background-active-color }
+
+    &__icon {
+        margin-right: 32px;
+        font-size: 20px;
+    }
+
+    &--transparent {
+        &.active {
+            color: $ui-text-color;
+            background: $menu-background-active-color;
+
+            &:hover { background: $menu-background-active-hover-color }
+    
+            .fa { color: $icon-color }
+        }
+
+        &:hover {
+            color: $ui-text-color;
+
+            .fa { color: $icon-color }
+        }
+    }
+
+    .fa { color: $icon-color }
+}
+
+.column-settings {
+    &__section {
+        color: $section-text-color;
+        margin-bottom: 0;
+        margin-top: 8px;
+    }
+
+    &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $search-bar-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-color }
+
+    &:focus {
+        @include shadow-1dp;
+        background: $search-bar-focus-color;
+    }
+}
+
+.empty-column-indicator {
+    color: $secondary-text-color;
+    background: $card-background-color;
+    font-size: 16px;
+}
+
+.conversation {
+    border-bottom: 1px solid $border-color;
+    padding: 12px;
+    background: $list-background-inactive-color;
+
+    &--unread {
+        background: $list-background-color;
+
+        .conversation__content__relative-time { color: $info-text-color }
+    }
+
+    &__unread { background: $primary-color }
+
+    &__avatar { padding: 0 16px 0 0 }
+
+    &__content {
+        padding: 0;
+
+        &__relative-time {
+            font-size: 14px;
+            color: $info-text-color;
+        }
+
+        &__names,
+        &__names a {
+            color: $primary-text-color;
+            font-size: 16px;
+        }
+    }
+}
+
+// read status in notification column
+.muted {
+    .status {
+        &__content {
+            color: $read-primary-text-color;
+    
+            p { color: $read-primary-text-color }
+    
+            a { color: $read-secondary-text-color }
+        }
+
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-background-hover-color }
+}
+
+.getting-started {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__wrapper {
+        background: $background-color;
+        height: auto !important;
+        border-bottom: 1px solid $border-color;
+    }
+
+    &__footer {
+        padding: 16px;
+        
+        p {
+            color: $secondary-text-color;
+            font-size: 12px;
+            margin-bottom: 16px;
+        }
+
+        a { color: $ui-text-color }
+
+        p a { color: $link-text-color }
+    }
+
+    &__trends {
+        background: $background-color;
+        margin-bottom: 0;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends__item {
+    padding: 16px;
+    border-bottom: none;
+
+    &__name {
+        color: $secondary-text-color;
+        font-size: 12px;
+
+        a { color: $primary-text-color }
+    }
+
+    &__current {
+        padding-right: 16px;
+        margin-left: 4px;
+        color: $secondary-text-color;
+    }
+
+    &__sparkline path {
+        stroke: $primary-color;
+        fill: $primary-color;
+        fill-opacity: 0.5;
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+}
+
+.reactions-bar {
+    .emoji-button {
+        color: $icon-button-color;
+        font-size: 20px;
+
+        &:hover { color: $icon-button-hover-color }
+
+        &:active { color: $icon-button-active-color }
+    }
+
+    &__item {
+        background: $contained-chip-color;
+        border-radius: 17px;
+        margin: 2px 4px;
+
+        &.active {
+            background-color: $contained-chip-selected-color;
+            .reactions-bar__item__count { color: $ui-text-color }
+        }
+
+        &__emoji {
+            width: 24px;
+            height: 24px;
+            margin: 4px 0 4px 2px;
+        }
+
+        &__count {
+            font-size: 16px;
+            margin: 0 8px;
+            color: $secondary-text-color;
+        }
+
+        &:hover { background: $contained-chip-hover-color }
+    }
+}
+
+.notification {
+    &__filter-bar {
+        background: $tab-background-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $tab-background-color;
+            color: $tab-indicator-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-active-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
+    
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-hover-color }
+        }
+    }
+
+    &__message {
+        color: $secondary-text-color;
+        margin: 0 16px 0 70px;
+        font-size: 16px;
+    }
+
+    &__display-name:hover { color: inherit }
+}
+
+.notification-favourite .status.status-direct {
+    background: transparent;
+
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+// read notification
+.notification.notification-favourite.focusable,
+.notification.notification-follow.focusable { background: $list-background-inactive-color }
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.react-swipeable-view-container { height: auto }
+
+.attachment-list__list a { color: $secondary-text-color }
+
+.focusable { background: transparent !important }

app/javascript/styles/mastodon-material-dark/components.scss

@@ -0,0 +1,389 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.drawer {
+    &__header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        justify-content: space-around;
+    
+        a { transition: none }
+    
+        a:hover {
+            background: $icon-background-hover-color;
+            border-radius: 50%;
+        }
+    }
+
+    &__tab {
+        color: $top-bar-icon-color;
+        font-size: 20px;
+        margin: 10px auto 10px;
+        padding: 8px;
+        flex: none;
+        height: 20px;
+        width: 20px;
+        border-bottom: none;
+        text-align: justify;
+    
+        &:hover { color: $top-bar-icon-hover-color }
+    }
+
+    &__pager {
+        @include shadow-1dp;
+        border-radius: $card-radius;
+    }
+
+    &__inner {
+        background: $card-background-color;
+
+        &.darker { background: $card-background-color }
+
+        &__mastodon { background: $card-background-color }
+    }
+}
+
+.search {
+    &__input {
+        background: $search-bar-color;
+        color: $tips-text-color;
+        border-radius: $search-bar-radius;
+        padding: 12px 12px 12px 40px;
+
+        &:focus {
+            @include shadow-2dp;
+            background: $search-bar-focus-color;
+            color: $search-bar-text-color;
+        }
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    &__icon {
+        .fa {
+            color: $icon-color;
+            font-size: 20px;
+            top: 12px;
+            right: unset;
+            left: 12px;
+            height: 6px;
+            transition: none;
+
+            &.active { opacity: 1 }
+
+            &-search {
+                transform: none;
+                opacity: 1;
+            }
+            &-times-circle.active {
+                right: 10px;
+                left: unset;
+                transform: none;
+            }
+        }
+    }
+}
+
+.search-popout {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+    border-radius: 0px $bar-radius;
+    border-top: 1px solid $border-color;
+    margin-top: 0;
+    color: $tips-text-color;
+
+    h4 {
+        color: $secondary-text-color;
+    }
+
+    em {
+        color: $search-bar-text-color;
+    }
+}
+
+.search-results {
+    &__header {
+        color: $secondary-text-color;
+        background-color: $card-background-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__section {
+        h5 {
+            background: $card-background-color;
+            border-bottom: 1px solid $border-color;
+            padding: 16px;
+            color: $section-text-color;
+
+            .fa { margin-right: 8px }
+        }
+    }
+}
+
+.navigation-bar {
+    color: $secondary-text-color;
+    padding: 14px;
+
+    strong {
+        color: $ui-text-color;
+    }
+}
+
+.navigation-panel hr {
+    border-top: 1px solid $border-color;
+    margin: 8px 0;
+}
+
+.dropdown-menu {
+    @include shadow-8dp;
+    background: $menu-background-color;
+    padding: 8px 0;
+    border-radius: $menu-radius;
+
+    &__arrow { visibility: hidden }
+
+    &__item a {
+        font-size: 14px;
+        padding: 8px 16px;
+        background: $menu-background-color;
+        color: $menu-text-color;
+
+        &:hover, &:active {
+            background: $menu-background-hover-color;
+            color: $menu-text-color;
+        }
+    }
+
+    &__separator {
+        margin: 8px 0;
+        border-bottom: 1px solid $border-color;
+    }
+}
+
+.compose-form {
+    .autosuggest-textarea {
+        &__textarea {
+            background: $card-background-color;
+            color: $ui-text-color;
+    
+            &::placeholder { color: $tips-text-color }
+        }
+
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-background-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-background-active-color }
+            }
+        }
+    }
+
+    .spoiler-input__input {
+        color: $ui-text-color;
+        background: $card-background-color;
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    .compose-form {
+        &__warning {
+            @include shadow-1dp;
+            color: $secondary-text-color;
+            background: $card-background-color;
+            padding: 16px;
+
+            a { color: $link-text-color }
+        }
+
+        &__modifiers {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__buttons-wrapper {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__poll-wrapper {
+            border-top: 1px solid $border-color;
+
+            ul { padding: 12px }
+
+            select {
+                color: $ui-text-color;
+                background-color: $background-color;
+                border: 0;
+
+                &:focus { border-color: $border-active-color }
+            }
+
+            .button.button-secondary {
+                box-shadow: none;
+                color: $outlined-button-color;
+                border-color: $outlined-button-color;
+
+                &:hover { background-color: $outlined-button-hover-color }
+
+                &:active { background-color: $outlined-button-active-color }
+
+                &:focus { background-color: $outlined-button-color }
+
+
+            }
+        }
+
+        &__utilBtns { padding-top: 0 }
+
+        &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+    }
+}
+
+.no-reduce-motion .spoiler-input {
+    transition-duration: .2s, .2s;
+}
+
+
+.poll {
+    &__input {
+        border: 2px solid $control-border-color;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $background-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-active-color }
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $poll-bar-color;
+    
+        &.leading { background: $poll-bar-leading-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-background-hover-color;
+        border-radius: 50%;
+        box-shadow: none;
+
+        .icon-button { color: $icon-button-active-color }
+    }
+
+    &__dropdown {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $dialog-radius;
+    }
+
+    &__option {
+        color: $icon-color;
+        padding: 8px 16px;
+
+        &__icon {
+            font-size: 20px;
+            margin-right: 12px;
+        }
+
+        &__content {
+            color: $secondary-text-color;
+
+            strong { color: $ui-text-color }
+        }
+
+        &.active {
+            background: $menu-background-active-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+
+            &:hover {
+                background: $menu-background-active-color;
+                
+                .privacy-dropdown__option__content {
+                    color: $secondary-text-color;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &:hover {
+            background: $menu-background-hover-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+        }
+    }
+}
+
+.character-counter {
+    color: $secondary-text-color;
+}
+
+.reply-indicator {
+    @include shadow-1dp;
+    border-radius: $card-radius;
+    background: $card-background-color;
+    padding: 16px;
+
+    &__header { margin-bottom: 4px }
+
+    &__display {
+        &-name {
+            color: $primary-text-color;
+            padding-right: 24px;
+        }
+
+        &-avatar { margin-right: 8px }
+    }
+
+    &__content { color: $primary-text-color }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
+}

app/javascript/styles/mastodon-material-dark/config.scss

@@ -0,0 +1,39 @@
+@charset "UTF-8";
+
+
+// Color scheme
+@import 'color/mastodon-dark';
+
+
+// Layout profile
+@import 'layout/material-v1';
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@font-face {
+    font-family: "Material Icons";
+    src:
+        local("Material Icons"),
+        //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2");  // GitHub
+        //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2");  // Google Fonts
+        url("../fonts/MaterialIcons-Regular.woff2");  // Self-hosting
+}
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
+
+$favorite-icon-color: #ffd600;  // Star
+//$favorite-icon-color: #ff4081;  // Heart
+//$favorite-icon-color: #db4437;  // +1

app/javascript/styles/mastodon-material-dark/control.scss

@@ -0,0 +1,69 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.react-toggle {
+    width: 36px;
+    height: 16px;
+    border-radius: 15px;
+
+    &-track {
+        background-color: $toggle-track-color;
+        margin: 4px;
+        width: 36px;
+        height: 16px;
+
+        &-check { visibility: hidden }
+        &-x { visibility: hidden }
+    }
+
+    &-thumb {
+        @include shadow-1dp;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        background-color: $toggle-thumb-color;
+    }
+
+    &--checked {
+        .react-toggle{
+            &-track { background-color: $toggle-track-active-color }
+
+            &-thumb {
+                background-color: $toggle-thumb-active-color;
+                left: 22px;
+            }
+        }
+
+        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+    }
+
+    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+    padding: 8px 0;
+
+    &__input {
+        border: 2px solid $border-color;
+
+        &.checked {
+            border-color: $icon-button-active-color;
+            background: $icon-button-active-color;
+            padding: 3px;
+            background-clip: content-box;
+        }
+    }
+}
+
+.compose-form__sensitive-button .checkbox {
+    border: 2px solid $border-color;
+    border-radius: 2px;
+
+    &.active {
+        border-color: $primary-color;
+        background: $primary-color;
+    }
+}

app/javascript/styles/mastodon-material-dark/emoji-picker.scss

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+    }
+
+    &__modifiers__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+
+        button {
+            padding: 8px;
+        }
+    }
+}
+
+.emoji-mart {
+    width: 388px !important;
+    font-size: 14px;
+    color: $ui-text-color;
+
+    &-bar {
+        border: 0 solid $border-color;
+
+        &:first-child {
+            background: $menu-background-color;
+        }
+    }
+
+    &-anchors {
+        color: $icon-button-color;
+        padding: 0;
+    }
+
+    &-anchor {
+        padding: 10px 4px;
+
+        &-selected {
+            color: $icon-button-active-color;
+        }
+
+        &-bar {
+            background-color: $tab-indicator-active-color;
+        }
+
+        &:hover {
+            color: $icon-button-hover-color;
+        }
+    }
+
+    &-search {
+        background: $menu-background-color;
+
+        input {
+            outline: none;
+            padding: 8px;
+            background: $search-bar-color;
+            color: $ui-text-color;
+            border: 0;
+            border-radius: $search-bar-radius;
+
+            &:focus {
+                @include shadow-2dp;
+                background: $search-bar-focus-color;
+            }
+        }
+    }
+
+    &-scroll {
+        padding: 0 8px 8px;
+        background: $menu-background-color;
+    }
+
+    &-category-label span {
+        padding: 4px 6px;
+        background: $menu-background-color;
+    }
+
+    &-emoji:hover::before {
+        background-color: $icon-background-hover-color;
+    }
+
+    &-no-results { color: $secondary-text-color }
+}

app/javascript/styles/mastodon-material-dark/icons.scss

@@ -0,0 +1,48 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+    &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub }  // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle }  // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+    font-size: 20px;
+    margin-right: 16px;
+}
+
+.icon-with-badge__badge {
+    background: $badge-color;
+    border: none;
+    padding: 2px 6px;
+    border-radius: 12px;
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }

app/javascript/styles/mastodon-material-dark/material-icons.scss

@@ -0,0 +1,146 @@
+@charset "UTF-8";
+@import 'config';
+@import 'functions';
+
+
+.fa {
+    &.fa-bars,
+    &.fa-navicon,
+    &.fa-reorder,
+    &.fa-globe,
+    &.fa-cog,
+    &.fa-cogs,
+    &.fa-gears,
+    &.fa-sign-out,
+    &.fa-search,
+    &.fa-times,
+    &.fa-times-circle,
+    &.fa-close,
+    &.fa-remove,
+    &.fa-chevron-down,
+    &.fa-ellipsis-v,
+    &.fa-paperclip,
+    &.fa-tasks,
+    &.fa-plus,
+    &.fa-unlock,
+    &.fa-lock,
+    &.fa-envelope,
+    &.fa-home,
+    &.fa-bullhorn,
+    &.fa-sliders,
+    &.fa-chevron-left,
+    &.fa-chevron-right,
+    &.fa-reply,
+    &.fa-reply-all,
+    &.fa-share-alt,
+    &.fa-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.fa-eraser,
+    &.fa-users,
+    &.fa-file-text,
+    &.fa-user-plus,
+    &.fa-address-book,
+    &.fa-address-book-o,
+    &.fa-list,
+    &.fa-list-ul,
+    &.fa-eye,
+    &.fa-eye-slash,
+    &.fa-pencil,
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check {
+        font-family: "Material Icons";
+    }
+}
+
+.fa {
+    &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
+    &.fa-globe::before { content: "public" }
+    &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
+    &.fa-sign-out::before { content: "exit_to_app" }
+    &.fa-search::before { content: "search" }
+    &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
+    &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
+    &.fa-paperclip::before { content: "attach_file" }
+    &.fa-tasks::before { content: "poll" }
+    &.fa-plus::before { content: "add" }
+    &.fa-unlock::before { content: "lock_open" }
+    &.fa-lock::before { content: "lock" }
+    &.fa-envelope::before { content: "mail" }
+    &.fa-home::before { content: "home" }
+    &.fa-bullhorn::before { content: "announcement" }
+    &.fa-sliders::before { content: "tune" }
+    &.fa-chevron-left::before { content: "arrow_back" }
+    &.fa-chevron-right::before { content: "arrow_forward" }
+    &.fa-reply::before { content: "reply" }
+    &.fa-reply-all::before { content: "reply_all" }
+    &.fa-share-alt::before { content: "share" }
+    &.fa-star::before { content: $favorite-icon }
+    &.fa-bookmark::before { content: "bookmark" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
+    &.fa-bell::before { content: "notifications" }
+    &.fa-eraser::before { content: "clear_all" }
+    &.fa-users::before { content: "people" }
+    &.fa-file-text::before { content: "web" }
+    &.fa-user-plus::before { content: "person_add" }
+    &.fa-address-book::before { content: "explore" }
+    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before { content: "list" }
+    &.fa-list-ul::before { content: "list" }
+    &.fa-eye::before { content: "visibility" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "delete" }
+    &.fa-check::before { content: "check" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark::before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+    height: 18px;
+    width: 18px;
+    transition: background-position .3s steps(1);
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}

app/javascript/styles/mastodon-material-dark/media.scss

@@ -0,0 +1,99 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.media-gallery { border-radius: $card-radius }
+
+.media-modal__close {
+    align-content: center;
+
+    &.icon-button {
+        background: transparent;
+        color: $media-icon-color;
+        text-align: center !important;
+        font-size: 24px !important;
+        width: 48px !important;
+        height: 48px !important;
+        border: 12px;
+
+        &:hover {
+            background: $media-icon-background-hover-color;
+            color: $media-icon-hover-color;
+        }
+
+        .fa-fw { width: 24px }
+    }
+}
+
+.media-modal {
+    &__nav {
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
+    }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
+}

app/javascript/styles/mastodon-material-dark/mobile.scss

@@ -0,0 +1,48 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    
+    .column { margin: 0 !important }
+
+    .search__input { padding: 16px 38px }
+}

app/javascript/styles/mastodon-material-dark/modal.scss

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 280px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+}
+
+.actions-modal {
+    background: $card-background-color;
+    border-radius: $card-radius;
+
+    ul li:not(:empty) a {
+        color: $ui-text-color;
+        font-size: 16px;
+
+        &:hover {
+            background: $card-background-hover-color;
+            color: $ui-text-color;
+        }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-background-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
+}
+
+.report-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__target {
+        padding: 24px;
+        text-align: left;
+        font-weight: bold;
+    }
+
+    &__container {
+        border-top: none;
+    }
+}
+
+.embed-modal .embed-modal__container {
+    padding: 0 24px 24px 24px;
+
+    .hint {
+        margin-bottom: 16px;
+        color: $secondary-text-color;
+    }
+}

app/javascript/styles/mastodon-material-dark/statuses.scss

@@ -0,0 +1,172 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: 16px;
+        padding-right: 4px;
+    }
+
+    &__relative-time { color: $info-text-color }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__avatar {
+        left: 12px;
+        top: 12px;
+    }
+
+    &__content {
+        font-size: 16px;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .status__content__spoiler-link {
+            background: transparent;
+
+            &:hover { background: $text-button-hover-color }
+
+            &:focus { background: $text-button-focus-color }
+        }
+
+        &__spoiler-link {
+            border: 0;
+            color: $text-button-color;
+        }
+
+        &__read-more-button {
+            font-size: 14px;
+            color: $text-button-color;
+            border-radius: $button-radius;
+            padding: 4px 6px;
+
+            &:hover {
+                background: $text-button-hover-color;
+                text-decoration: none;
+            }
+
+            &:focus { background: $text-button-focus-color }
+        }
+    }
+
+    &__action-bar {
+        &__counter__label {
+            font-size: 14px;
+            color: $info-text-color;
+        }
+    }
+
+    &__prepend { color: $secondary-text-color }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.status-card {
+    color: $icon-color;
+    border-color: $border-color;
+    outline: none;
+
+    &__image {
+        background: transparent;
+
+        &>.fa {
+            font-size: 26px;
+        }
+    }
+
+    &__title {
+        color: $primary-text-color;
+        margin-bottom: 6px;
+    }
+
+    &__description { color: $secondary-text-color }
+
+    &__actions {
+        &>div {
+            background: $media-icon-background-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        background: transparent;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+    background: $card-background-color;
+    padding: 16px;
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__meta {
+        margin-top: 16px;
+        color: $info-text-color;
+    }
+
+    &__action-bar {
+        background: $card-background-color;
+        border-top: none;
+        border-bottom: 1px solid $border-color;
+        padding: 12px 0;
+    }
+
+    &__button {
+        .icon-button { font-size: 20px !important }
+    }
+}

app/javascript/styles/mastodon-material-light.scss

@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+@import 'application';
+@import 'mastodon-material-light/account';
+@import 'mastodon-material-light/basics';
+@import 'mastodon-material-light/button';
+//@import 'mastodon-material-light/cards';
+@import 'mastodon-material-light/columns';
+@import 'mastodon-material-light/components';
+@import 'mastodon-material-light/config';
+@import 'mastodon-material-light/control';
+@import 'mastodon-material-light/emoji-picker';
+@import 'mastodon-material-light/icons';
+@import 'mastodon-material-light/material-icons';
+@import 'mastodon-material-light/media';
+@import 'mastodon-material-light/mobile';
+@import 'mastodon-material-light/modal';
+@import 'mastodon-material-light/statuses';

app/javascript/styles/mastodon-material-light/_functions.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+@function to-string($value) {
+    @return inspect($value);
+}
+
+// convert hex color code to svg styled color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(to-string($color), 2, 7);
+}

app/javascript/styles/mastodon-material-light/_mixins.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+
+$shadow-color-1: rgba(0,0,0,.2);
+$shadow-color-2: rgba(0,0,0,.14);
+$shadow-color-3: rgba(0,0,0,.12);
+
+@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
+@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
+@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
+@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
+@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
+@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
+@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
+@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
+@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
+@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
+@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
+@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
+@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
+@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
+@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
+@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
+
+@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}

app/javascript/styles/mastodon-material-light/account.scss

@@ -0,0 +1,143 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name { color: $primary-text-color }
+    .account__display-name strong { color: $secondary-text-color }
+
+    &__avatar {
+        border-radius: $avater-radius;
+        width: 40px;
+        height: 40px;
+
+        &-overlay {
+            &-base {
+                border-radius: 50%;
+                width: 44px;
+                height: 44px;
+                background-size: 44px;
+            }
+
+            &-overlay { border-radius: $avater-radius }
+        }
+    }
+
+    &__header {
+        &__bar {
+            background: $card-background-color;
+            padding: 8px;
+            border-bottom: 1px solid $border-color;
+
+            .avatar .account__avatar { border: none }
+        }
+
+        &__tabs {
+            padding: 8px;
+
+            &__name {
+                padding: 8px;
+
+                h1 {
+                    color: $primary-text-color;
+
+                    small { color: $secondary-text-color }
+                }
+            }
+
+            &__buttons {
+                .icon-button {
+                    border: none;
+                    border-radius: 50%;
+                    padding: 0;
+                }
+            }
+        }
+
+        &__extra {
+            margin-top: 0;
+
+            &__links {
+                color: $secondary-text-color;
+                padding: 10px 0;
+
+                a {
+                    color: $secondary-text-color;
+                    padding: 4px 12px;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &__bio {
+            margin: 0;
+
+            .account__header {
+                &__content {
+                    color: $primary-text-color;
+                    padding: 8px;
+                }
+
+                &__fields {
+                    border: 1px solid $border-color;
+                    border-radius: 4px;
+
+                    .verified {
+                        border: none;
+                        background: $verified-background-color;
+
+                        a,
+                        &__mark { color: $primary-text-color }
+                    }
+
+                    dl {
+                        border-bottom: 1px solid $border-color;
+
+                        &:first-child .verified { border-radius: 0 }
+
+                        &:last-child { border-bottom: 0 }
+                    }
+
+                    dt {
+                        color: $primary-text-color;
+                        background: $list-background-inactive-color;
+                    }
+
+                    dd { color: $primary-text-color }
+                }
+            }
+        }
+    }
+
+    &__section-headline {
+        background: $text-tab-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $text-tab-indicator-color;
+
+            &.active {
+                color: $text-tab-indicator-active-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
+
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $text-tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $text-tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}

app/javascript/styles/mastodon-material-light/basics.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+@import 'config';
+
+
+body { background: $background-color }
+
+// Chrome & Safari scroll bar
+::-webkit-scrollbar-thumb {
+    background: $scroll-bar-thumb-color;
+
+    &:hover { background: $scroll-bar-thumb-hover-color }
+    &:active { background: $scroll-bar-thumb-active-color }
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track:hover,
+::-webkit-scrollbar-track:active {
+    background: transparent !important;
+}
+
+// Firefox scroll bar
+html {
+    scrollbar-color: $scroll-bar-thumb-color transparent;
+}

app/javascript/styles/mastodon-material-light/button.scss

@@ -0,0 +1,95 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+
+    &.active {
+        color: $icon-button-active-color;
+
+        &:hover { color: $icon-button-active-hover-color }
+    }
+
+    &.disabled { color: $disabled-icon-color }
+
+    &.inverted {
+        color: $icon-button-color;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background-color: $icon-background-hover-color;
+        }
+    }
+
+    &.overlayed {
+        border-radius: 50%;
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+    
+        &:hover {
+            background: $media-icon-background-color;
+            color: $media-icon-hover-color;
+        }
+    }
+
+    &:hover {
+        color: $icon-button-hover-color;
+        background-color: $icon-background-hover-color;
+    }
+
+    &:active,
+    &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+    font-size: 12px;
+
+    &:hover {
+        background-color: $icon-background-hover-color;
+        color: $icon-button-hover-color;
+    }
+}
+
+.button,
+.button:active,
+.button:focus {
+    background-color: $contained-button-color;
+    border-radius: $button-radius;
+}
+
+.button:hover {
+    @include shadow-2dp;
+    background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+    background: $contained-button-color;
+    margin: 2px;
+
+    &:hover { background: $contained-button-hover-color }
+
+    .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.confirmation-modal__cancel-button {
+    box-shadow: none;
+    background-color: transparent;
+    margin: 0 8px;
+    color: $text-button-color;
+
+    &:hover { background: $text-button-hover-color }
+
+    &:focus { background: $text-button-focus-color }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-background-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
+}

app/javascript/styles/mastodon-material-light/cards.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+}
+
+.status {
+    border-bottom: 0 !important;
+    border-radius: $card-radius;
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}

app/javascript/styles/mastodon-material-light/color/mastodon-light.scss

@@ -59,7 +59,7 @@ $top-bar-icon-active-color: $icon-hover-color;
 $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
 $control-border-color: $icon-color;
 
 // Button color
@@ -101,6 +101,28 @@ $search-bar-color: #d9e1e8;
 $search-bar-focus-color: $background-color;
 
 // Tab color
-$tab-indicator-color: $primary-color;
+$tab-indicator-color: #282c37;
-$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%);
+$tab-indicator-active-color: $top-bar-icon-color;
-$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

app/javascript/styles/mastodon-material-light/columns.scss

@@ -0,0 +1,461 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-background-color }
+
+    &:last-child { box-shadow: none }
+}
+
+.column-header {
+    background: $top-bar-color;
+    border-radius: $bar-radius;
+
+    > button {
+        padding: 16px 0 16px 16px;
+        color: $top-bar-text-color;
+    }
+
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
+    &.active {
+        .column-header__icon {
+            color: $secondary-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        margin: 8px 10px;
+        padding: 10px 12px;
+        border-radius: 50%;
+
+        &.active {
+            color: $top-bar-icon-active-color;
+            background: $icon-background-active-color;
+
+            &:hover {
+                color: $top-bar-icon-hover-color;
+                background: $icon-background-hover-color;
+            }
+        }
+
+        &:hover {
+            color: $top-bar-icon-hover-color;
+            background: $icon-background-hover-color;
+        }
+    }
+
+    &__setting-btn {
+        color: $icon-button-color;
+        padding: 8px 0;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            text-decoration: none;
+        }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
+    }
+
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &::before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        background: $card-background-color;
+        border-top: 1px solid $border-color;
+
+        &-inner {
+            background: $card-background-color;
+            padding: 16px;
+        }
+
+        &.collapsed { border-top: none }
+    }
+
+    &__back-button {
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        padding: 8px;
+        margin: auto 0;
+        border-radius: 50%;
+
+        span { display: none }
+    }
+}
+
+.column-subheading {
+    color: $section-text-color;
+    background: $background-color;
+    padding: 12px 16px;
+    border-top: 1px solid $border-color;
+}
+
+.column-link {
+    color: $ui-text-color;
+    background: $background-color;
+    padding: 16px;
+    border-radius: $nav-drawer-item-radius;
+
+    &:hover { background: $list-background-hover-color }
+
+    &:active,
+    &:focus { background: $list-background-active-color }
+
+    &__icon {
+        margin-right: 32px;
+        font-size: 20px;
+    }
+
+    &--transparent {
+        &.active {
+            color: $ui-text-color;
+            background: $menu-background-active-color;
+
+            &:hover { background: $menu-background-active-hover-color }
+    
+            .fa { color: $icon-color }
+        }
+
+        &:hover {
+            color: $ui-text-color;
+
+            .fa { color: $icon-color }
+        }
+    }
+
+    .fa { color: $icon-color }
+}
+
+.column-settings {
+    &__section {
+        color: $section-text-color;
+        margin-bottom: 0;
+        margin-top: 8px;
+    }
+
+    &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $search-bar-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-color }
+
+    &:focus {
+        @include shadow-1dp;
+        background: $search-bar-focus-color;
+    }
+}
+
+.empty-column-indicator {
+    color: $secondary-text-color;
+    background: $card-background-color;
+    font-size: 16px;
+}
+
+.conversation {
+    border-bottom: 1px solid $border-color;
+    padding: 12px;
+    background: $list-background-inactive-color;
+
+    &--unread {
+        background: $list-background-color;
+
+        .conversation__content__relative-time { color: $info-text-color }
+    }
+
+    &__unread { background: $primary-color }
+
+    &__avatar { padding: 0 16px 0 0 }
+
+    &__content {
+        padding: 0;
+
+        &__relative-time {
+            font-size: 14px;
+            color: $info-text-color;
+        }
+
+        &__names,
+        &__names a {
+            color: $primary-text-color;
+            font-size: 16px;
+        }
+    }
+}
+
+// read status in notification column
+.muted {
+    .status {
+        &__content {
+            color: $read-primary-text-color;
+    
+            p { color: $read-primary-text-color }
+    
+            a { color: $read-secondary-text-color }
+        }
+
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-background-hover-color }
+}
+
+.getting-started {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__wrapper {
+        background: $background-color;
+        height: auto !important;
+        border-bottom: 1px solid $border-color;
+    }
+
+    &__footer {
+        padding: 16px;
+        
+        p {
+            color: $secondary-text-color;
+            font-size: 12px;
+            margin-bottom: 16px;
+        }
+
+        a { color: $ui-text-color }
+
+        p a { color: $link-text-color }
+    }
+
+    &__trends {
+        background: $background-color;
+        margin-bottom: 0;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends__item {
+    padding: 16px;
+    border-bottom: none;
+
+    &__name {
+        color: $secondary-text-color;
+        font-size: 12px;
+
+        a { color: $primary-text-color }
+    }
+
+    &__current {
+        padding-right: 16px;
+        margin-left: 4px;
+        color: $secondary-text-color;
+    }
+
+    &__sparkline path {
+        stroke: $primary-color;
+        fill: $primary-color;
+        fill-opacity: 0.5;
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+}
+
+.reactions-bar {
+    .emoji-button {
+        color: $icon-button-color;
+        font-size: 20px;
+
+        &:hover { color: $icon-button-hover-color }
+
+        &:active { color: $icon-button-active-color }
+    }
+
+    &__item {
+        background: $contained-chip-color;
+        border-radius: 17px;
+        margin: 2px 4px;
+
+        &.active {
+            background-color: $contained-chip-selected-color;
+            .reactions-bar__item__count { color: $ui-text-color }
+        }
+
+        &__emoji {
+            width: 24px;
+            height: 24px;
+            margin: 4px 0 4px 2px;
+        }
+
+        &__count {
+            font-size: 16px;
+            margin: 0 8px;
+            color: $secondary-text-color;
+        }
+
+        &:hover { background: $contained-chip-hover-color }
+    }
+}
+
+.notification {
+    &__filter-bar {
+        background: $tab-background-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $tab-background-color;
+            color: $tab-indicator-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-active-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
+    
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-hover-color }
+        }
+    }
+
+    &__message {
+        color: $secondary-text-color;
+        margin: 0 16px 0 70px;
+        font-size: 16px;
+    }
+
+    &__display-name:hover { color: inherit }
+}
+
+.notification-favourite .status.status-direct {
+    background: transparent;
+
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+// read notification
+.notification.notification-favourite.focusable,
+.notification.notification-follow.focusable { background: $list-background-inactive-color }
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.react-swipeable-view-container { height: auto }
+
+.attachment-list__list a { color: $secondary-text-color }
+
+.focusable { background: transparent !important }

app/javascript/styles/mastodon-material-light/components.scss

@@ -0,0 +1,389 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.drawer {
+    &__header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        justify-content: space-around;
+    
+        a { transition: none }
+    
+        a:hover {
+            background: $icon-background-hover-color;
+            border-radius: 50%;
+        }
+    }
+
+    &__tab {
+        color: $top-bar-icon-color;
+        font-size: 20px;
+        margin: 10px auto 10px;
+        padding: 8px;
+        flex: none;
+        height: 20px;
+        width: 20px;
+        border-bottom: none;
+        text-align: justify;
+    
+        &:hover { color: $top-bar-icon-hover-color }
+    }
+
+    &__pager {
+        @include shadow-1dp;
+        border-radius: $card-radius;
+    }
+
+    &__inner {
+        background: $card-background-color;
+
+        &.darker { background: $card-background-color }
+
+        &__mastodon { background: $card-background-color }
+    }
+}
+
+.search {
+    &__input {
+        background: $search-bar-color;
+        color: $tips-text-color;
+        border-radius: $search-bar-radius;
+        padding: 12px 12px 12px 40px;
+
+        &:focus {
+            @include shadow-2dp;
+            background: $search-bar-focus-color;
+            color: $search-bar-text-color;
+        }
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    &__icon {
+        .fa {
+            color: $icon-color;
+            font-size: 20px;
+            top: 12px;
+            right: unset;
+            left: 12px;
+            height: 6px;
+            transition: none;
+
+            &.active { opacity: 1 }
+
+            &-search {
+                transform: none;
+                opacity: 1;
+            }
+            &-times-circle.active {
+                right: 10px;
+                left: unset;
+                transform: none;
+            }
+        }
+    }
+}
+
+.search-popout {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+    border-radius: 0px $bar-radius;
+    border-top: 1px solid $border-color;
+    margin-top: 0;
+    color: $tips-text-color;
+
+    h4 {
+        color: $secondary-text-color;
+    }
+
+    em {
+        color: $search-bar-text-color;
+    }
+}
+
+.search-results {
+    &__header {
+        color: $secondary-text-color;
+        background-color: $card-background-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__section {
+        h5 {
+            background: $card-background-color;
+            border-bottom: 1px solid $border-color;
+            padding: 16px;
+            color: $section-text-color;
+
+            .fa { margin-right: 8px }
+        }
+    }
+}
+
+.navigation-bar {
+    color: $secondary-text-color;
+    padding: 14px;
+
+    strong {
+        color: $ui-text-color;
+    }
+}
+
+.navigation-panel hr {
+    border-top: 1px solid $border-color;
+    margin: 8px 0;
+}
+
+.dropdown-menu {
+    @include shadow-8dp;
+    background: $menu-background-color;
+    padding: 8px 0;
+    border-radius: $menu-radius;
+
+    &__arrow { visibility: hidden }
+
+    &__item a {
+        font-size: 14px;
+        padding: 8px 16px;
+        background: $menu-background-color;
+        color: $menu-text-color;
+
+        &:hover, &:active {
+            background: $menu-background-hover-color;
+            color: $menu-text-color;
+        }
+    }
+
+    &__separator {
+        margin: 8px 0;
+        border-bottom: 1px solid $border-color;
+    }
+}
+
+.compose-form {
+    .autosuggest-textarea {
+        &__textarea {
+            background: $card-background-color;
+            color: $ui-text-color;
+    
+            &::placeholder { color: $tips-text-color }
+        }
+
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-background-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-background-active-color }
+            }
+        }
+    }
+
+    .spoiler-input__input {
+        color: $ui-text-color;
+        background: $card-background-color;
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    .compose-form {
+        &__warning {
+            @include shadow-1dp;
+            color: $secondary-text-color;
+            background: $card-background-color;
+            padding: 16px;
+
+            a { color: $link-text-color }
+        }
+
+        &__modifiers {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__buttons-wrapper {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__poll-wrapper {
+            border-top: 1px solid $border-color;
+
+            ul { padding: 12px }
+
+            select {
+                color: $ui-text-color;
+                background-color: $background-color;
+                border: 0;
+
+                &:focus { border-color: $border-active-color }
+            }
+
+            .button.button-secondary {
+                box-shadow: none;
+                color: $outlined-button-color;
+                border-color: $outlined-button-color;
+
+                &:hover { background-color: $outlined-button-hover-color }
+
+                &:active { background-color: $outlined-button-active-color }
+
+                &:focus { background-color: $outlined-button-color }
+
+
+            }
+        }
+
+        &__utilBtns { padding-top: 0 }
+
+        &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+    }
+}
+
+.no-reduce-motion .spoiler-input {
+    transition-duration: .2s, .2s;
+}
+
+
+.poll {
+    &__input {
+        border: 2px solid $control-border-color;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $background-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-active-color }
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $poll-bar-color;
+    
+        &.leading { background: $poll-bar-leading-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-background-hover-color;
+        border-radius: 50%;
+        box-shadow: none;
+
+        .icon-button { color: $icon-button-active-color }
+    }
+
+    &__dropdown {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $dialog-radius;
+    }
+
+    &__option {
+        color: $icon-color;
+        padding: 8px 16px;
+
+        &__icon {
+            font-size: 20px;
+            margin-right: 12px;
+        }
+
+        &__content {
+            color: $secondary-text-color;
+
+            strong { color: $ui-text-color }
+        }
+
+        &.active {
+            background: $menu-background-active-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+
+            &:hover {
+                background: $menu-background-active-color;
+                
+                .privacy-dropdown__option__content {
+                    color: $secondary-text-color;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &:hover {
+            background: $menu-background-hover-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+        }
+    }
+}
+
+.character-counter {
+    color: $secondary-text-color;
+}
+
+.reply-indicator {
+    @include shadow-1dp;
+    border-radius: $card-radius;
+    background: $card-background-color;
+    padding: 16px;
+
+    &__header { margin-bottom: 4px }
+
+    &__display {
+        &-name {
+            color: $primary-text-color;
+            padding-right: 24px;
+        }
+
+        &-avatar { margin-right: 8px }
+    }
+
+    &__content { color: $primary-text-color }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
+}

app/javascript/styles/mastodon-material-light/config.scss

@@ -0,0 +1,39 @@
+@charset "UTF-8";
+
+
+// Color scheme
+@import 'color/mastodon-light';
+
+
+// Layout profile
+@import 'layout/material-v1';
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@font-face {
+    font-family: "Material Icons";
+    src:
+        local("Material Icons"),
+        //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2");  // GitHub
+        //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2");  // Google Fonts
+        url("../fonts/MaterialIcons-Regular.woff2");  // Self-hosting
+}
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
+
+$favorite-icon-color: #ffd600;  // Star
+//$favorite-icon-color: #ff4081;  // Heart
+//$favorite-icon-color: #db4437;  // +1

app/javascript/styles/mastodon-material-light/control.scss

@@ -0,0 +1,69 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.react-toggle {
+    width: 36px;
+    height: 16px;
+    border-radius: 15px;
+
+    &-track {
+        background-color: $toggle-track-color;
+        margin: 4px;
+        width: 36px;
+        height: 16px;
+
+        &-check { visibility: hidden }
+        &-x { visibility: hidden }
+    }
+
+    &-thumb {
+        @include shadow-1dp;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        background-color: $toggle-thumb-color;
+    }
+
+    &--checked {
+        .react-toggle{
+            &-track { background-color: $toggle-track-active-color }
+
+            &-thumb {
+                background-color: $toggle-thumb-active-color;
+                left: 22px;
+            }
+        }
+
+        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+    }
+
+    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+    padding: 8px 0;
+
+    &__input {
+        border: 2px solid $border-color;
+
+        &.checked {
+            border-color: $icon-button-active-color;
+            background: $icon-button-active-color;
+            padding: 3px;
+            background-clip: content-box;
+        }
+    }
+}
+
+.compose-form__sensitive-button .checkbox {
+    border: 2px solid $border-color;
+    border-radius: 2px;
+
+    &.active {
+        border-color: $primary-color;
+        background: $primary-color;
+    }
+}

app/javascript/styles/mastodon-material-light/emoji-picker.scss

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+    }
+
+    &__modifiers__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+
+        button {
+            padding: 8px;
+        }
+    }
+}
+
+.emoji-mart {
+    width: 388px !important;
+    font-size: 14px;
+    color: $ui-text-color;
+
+    &-bar {
+        border: 0 solid $border-color;
+
+        &:first-child {
+            background: $menu-background-color;
+        }
+    }
+
+    &-anchors {
+        color: $icon-button-color;
+        padding: 0;
+    }
+
+    &-anchor {
+        padding: 10px 4px;
+
+        &-selected {
+            color: $icon-button-active-color;
+        }
+
+        &-bar {
+            background-color: $tab-indicator-active-color;
+        }
+
+        &:hover {
+            color: $icon-button-hover-color;
+        }
+    }
+
+    &-search {
+        background: $menu-background-color;
+
+        input {
+            outline: none;
+            padding: 8px;
+            background: $search-bar-color;
+            color: $ui-text-color;
+            border: 0;
+            border-radius: $search-bar-radius;
+
+            &:focus {
+                @include shadow-2dp;
+                background: $search-bar-focus-color;
+            }
+        }
+    }
+
+    &-scroll {
+        padding: 0 8px 8px;
+        background: $menu-background-color;
+    }
+
+    &-category-label span {
+        padding: 4px 6px;
+        background: $menu-background-color;
+    }
+
+    &-emoji:hover::before {
+        background-color: $icon-background-hover-color;
+    }
+
+    &-no-results { color: $secondary-text-color }
+}

app/javascript/styles/mastodon-material-light/icons.scss

@@ -0,0 +1,48 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+    &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub }  // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle }  // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+    font-size: 20px;
+    margin-right: 16px;
+}
+
+.icon-with-badge__badge {
+    background: $badge-color;
+    border: none;
+    padding: 2px 6px;
+    border-radius: 12px;
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }

app/javascript/styles/mastodon-material-light/material-icons.scss

@@ -0,0 +1,146 @@
+@charset "UTF-8";
+@import 'config';
+@import 'functions';
+
+
+.fa {
+    &.fa-bars,
+    &.fa-navicon,
+    &.fa-reorder,
+    &.fa-globe,
+    &.fa-cog,
+    &.fa-cogs,
+    &.fa-gears,
+    &.fa-sign-out,
+    &.fa-search,
+    &.fa-times,
+    &.fa-times-circle,
+    &.fa-close,
+    &.fa-remove,
+    &.fa-chevron-down,
+    &.fa-ellipsis-v,
+    &.fa-paperclip,
+    &.fa-tasks,
+    &.fa-plus,
+    &.fa-unlock,
+    &.fa-lock,
+    &.fa-envelope,
+    &.fa-home,
+    &.fa-bullhorn,
+    &.fa-sliders,
+    &.fa-chevron-left,
+    &.fa-chevron-right,
+    &.fa-reply,
+    &.fa-reply-all,
+    &.fa-share-alt,
+    &.fa-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.fa-eraser,
+    &.fa-users,
+    &.fa-file-text,
+    &.fa-user-plus,
+    &.fa-address-book,
+    &.fa-address-book-o,
+    &.fa-list,
+    &.fa-list-ul,
+    &.fa-eye,
+    &.fa-eye-slash,
+    &.fa-pencil,
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check {
+        font-family: "Material Icons";
+    }
+}
+
+.fa {
+    &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
+    &.fa-globe::before { content: "public" }
+    &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
+    &.fa-sign-out::before { content: "exit_to_app" }
+    &.fa-search::before { content: "search" }
+    &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
+    &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
+    &.fa-paperclip::before { content: "attach_file" }
+    &.fa-tasks::before { content: "poll" }
+    &.fa-plus::before { content: "add" }
+    &.fa-unlock::before { content: "lock_open" }
+    &.fa-lock::before { content: "lock" }
+    &.fa-envelope::before { content: "mail" }
+    &.fa-home::before { content: "home" }
+    &.fa-bullhorn::before { content: "announcement" }
+    &.fa-sliders::before { content: "tune" }
+    &.fa-chevron-left::before { content: "arrow_back" }
+    &.fa-chevron-right::before { content: "arrow_forward" }
+    &.fa-reply::before { content: "reply" }
+    &.fa-reply-all::before { content: "reply_all" }
+    &.fa-share-alt::before { content: "share" }
+    &.fa-star::before { content: $favorite-icon }
+    &.fa-bookmark::before { content: "bookmark" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
+    &.fa-bell::before { content: "notifications" }
+    &.fa-eraser::before { content: "clear_all" }
+    &.fa-users::before { content: "people" }
+    &.fa-file-text::before { content: "web" }
+    &.fa-user-plus::before { content: "person_add" }
+    &.fa-address-book::before { content: "explore" }
+    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before { content: "list" }
+    &.fa-list-ul::before { content: "list" }
+    &.fa-eye::before { content: "visibility" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "delete" }
+    &.fa-check::before { content: "check" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark::before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+    height: 18px;
+    width: 18px;
+    transition: background-position .3s steps(1);
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}

app/javascript/styles/mastodon-material-light/media.scss

@@ -0,0 +1,99 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.media-gallery { border-radius: $card-radius }
+
+.media-modal__close {
+    align-content: center;
+
+    &.icon-button {
+        background: transparent;
+        color: $media-icon-color;
+        text-align: center !important;
+        font-size: 24px !important;
+        width: 48px !important;
+        height: 48px !important;
+        border: 12px;
+
+        &:hover {
+            background: $media-icon-background-hover-color;
+            color: $media-icon-hover-color;
+        }
+
+        .fa-fw { width: 24px }
+    }
+}
+
+.media-modal {
+    &__nav {
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
+    }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
+}

app/javascript/styles/mastodon-material-light/mobile.scss

@@ -0,0 +1,48 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    
+    .column { margin: 0 !important }
+
+    .search__input { padding: 16px 38px }
+}

app/javascript/styles/mastodon-material-light/modal.scss

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 280px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+}
+
+.actions-modal {
+    background: $card-background-color;
+    border-radius: $card-radius;
+
+    ul li:not(:empty) a {
+        color: $ui-text-color;
+        font-size: 16px;
+
+        &:hover {
+            background: $card-background-hover-color;
+            color: $ui-text-color;
+        }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-background-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
+}
+
+.report-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__target {
+        padding: 24px;
+        text-align: left;
+        font-weight: bold;
+    }
+
+    &__container {
+        border-top: none;
+    }
+}
+
+.embed-modal .embed-modal__container {
+    padding: 0 24px 24px 24px;
+
+    .hint {
+        margin-bottom: 16px;
+        color: $secondary-text-color;
+    }
+}

app/javascript/styles/mastodon-material-light/statuses.scss

@@ -0,0 +1,172 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: 16px;
+        padding-right: 4px;
+    }
+
+    &__relative-time { color: $info-text-color }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__avatar {
+        left: 12px;
+        top: 12px;
+    }
+
+    &__content {
+        font-size: 16px;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .status__content__spoiler-link {
+            background: transparent;
+
+            &:hover { background: $text-button-hover-color }
+
+            &:focus { background: $text-button-focus-color }
+        }
+
+        &__spoiler-link {
+            border: 0;
+            color: $text-button-color;
+        }
+
+        &__read-more-button {
+            font-size: 14px;
+            color: $text-button-color;
+            border-radius: $button-radius;
+            padding: 4px 6px;
+
+            &:hover {
+                background: $text-button-hover-color;
+                text-decoration: none;
+            }
+
+            &:focus { background: $text-button-focus-color }
+        }
+    }
+
+    &__action-bar {
+        &__counter__label {
+            font-size: 14px;
+            color: $info-text-color;
+        }
+    }
+
+    &__prepend { color: $secondary-text-color }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.status-card {
+    color: $icon-color;
+    border-color: $border-color;
+    outline: none;
+
+    &__image {
+        background: transparent;
+
+        &>.fa {
+            font-size: 26px;
+        }
+    }
+
+    &__title {
+        color: $primary-text-color;
+        margin-bottom: 6px;
+    }
+
+    &__description { color: $secondary-text-color }
+
+    &__actions {
+        &>div {
+            background: $media-icon-background-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        background: transparent;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+    background: $card-background-color;
+    padding: 16px;
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__meta {
+        margin-top: 16px;
+        color: $info-text-color;
+    }
+
+    &__action-bar {
+        background: $card-background-color;
+        border-top: none;
+        border-bottom: 1px solid $border-color;
+        padding: 12px 0;
+    }
+
+    &__button {
+        .icon-button { font-size: 20px !important }
+    }
+}

app/javascript/styles/material-v1-dark/_functions.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+@function to-string($value) {
+    @return inspect($value);
+}
+
+// convert hex color code to svg styled color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(to-string($color), 2, 7);
+}

app/javascript/styles/material-v1-dark/account.scss

@@ -5,7 +5,7 @@
 .account {
     border-bottom: 1px solid $border-color;
 
-    .account__display-name,
+    .account__display-name { color: $primary-text-color }
     .account__display-name strong { color: $secondary-text-color }
 
     &__avatar {
@@ -13,11 +13,15 @@
         width: 40px;
         height: 40px;
 
-        &-overlay-base {
+        &-overlay {
-            border-radius: 50%;
+            &-base {
-            width: 44px;
+                border-radius: 50%;
-            height: 44px;
+                width: 44px;
-            background-size: 44px;
+                height: 44px;
+                background-size: 44px;
+            }
+
+            &-overlay { border-radius: $avater-radius }
         }
     }
 
@@ -109,24 +113,24 @@
     }
 
     &__section-headline {
-        background: $card-background-color;
+        background: $text-tab-background-color;
         border-bottom: 1px solid $border-color;
 
         a {
             padding: 16px 0;
-            color: $secondary-text-color;
+            color: $text-tab-indicator-color;
 
             &.active {
-                color: $tab-indicator-color;
+                color: $text-tab-indicator-active-color;
-                border-bottom: 4px solid $tab-indicator-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
 
-                &:before,
+                &::before,
                 &:after { border: none }
 
-                &:focus { background: $tab-indicator-background-focus-color }
+                &:focus { background: $text-tab-indicator-background-focus-color }
             }
 
-            &:hover { background: $tab-indicator-background-hover-color }
+            &:hover { background: $text-tab-indicator-background-hover-color }
         }
     }
 }

app/javascript/styles/material-v1-dark/button.scss

@@ -23,6 +23,17 @@
         }
     }
 
+    &.overlayed {
+        border-radius: 50%;
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+    
+        &:hover {
+            background: $media-icon-background-color;
+            color: $media-icon-hover-color;
+        }
+    }
+
     &:hover {
         color: $icon-button-hover-color;
         background-color: $icon-background-hover-color;
@@ -75,4 +86,10 @@
     &:hover { background: $text-button-hover-color }
 
     &:focus { background: $text-button-focus-color }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-background-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
 }

app/javascript/styles/material-v1-dark/color/mastodon-light.scss

@@ -1,106 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #217aba;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-
-// Background-color
-$background-color: #eff3f5;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($background-color, 6%);
-$menu-background-active-color: darken($background-color, 10%);
-$menu-background-active-hover-color: darken($background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$verified-background-color: lighten($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #282c37;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: darken($background-color, 4%);
-$icon-background-active-color: darken($background-color, 8%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: lighten($text-button-color, 36%);
-$text-button-focus-color: lighten($text-button-color, 30%);
-$floating-action-button-color: $secondary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: $primary-color;
-$toggle-track-active-color: lighten($primary-color, 26%);
-
-// Border color
-$border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: #ccd7e0;
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #ffffff;
-$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $background-color;
-
-// Tab color
-$tab-indicator-color: $primary-color;
-$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%);
-$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);

app/javascript/styles/material-v1-dark/color/v1-dark.scss

@@ -60,7 +60,7 @@ $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
 $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
 $control-border-color: $icon-color;
 
 // Button color
@@ -97,11 +97,33 @@ $scroll-bar-thumb-hover-color: lighten($background-color, 30%);
 $scroll-bar-thumb-active-color: lighten($background-color, 38%);
 
 // App bar color
-$top-bar-color: #2196f3;
+$top-bar-color: #1565C0;
 $search-bar-color: lighten($background-color, 6%);
 $search-bar-focus-color: #ffffff;
 
 // Tab color
 $tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-active-color: $top-bar-icon-color;
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

app/javascript/styles/material-v1-dark/color/v1-light.scss

@@ -1,107 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-
-// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$verified-background-color: lighten($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.8);
-$text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #2196f3;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);

app/javascript/styles/material-v1-dark/color/v2-dark.scss

@@ -1,107 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-
-// Background-color
-$background-color: #121212;
-$menu-background-color: #1e1e1e;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$verified-background-color: darken($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.8);
-$text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: #1e1e1e;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #5f6368;
-$border-active-color: lighten($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #272727;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $primary-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);

app/javascript/styles/material-v1-dark/color/v2-light.scss

@@ -1,107 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-
-// Background-color
-$background-color: #ffffff;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: $background-color;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: $background-color;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$verified-background-color: lighten($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.8);
-$text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: #ffffff;
-$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
-$floating-action-button-active-color: darken($floating-action-button-color, 10%);
-$floating-action-button-icon-color: $secondary-color;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($background-color, 30%);
-$scroll-bar-thumb-active-color: darken($background-color, 38%);
-
-// App bar color
-$top-bar-color: $background-color;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-color;
-
-// Tab color
-$tab-indicator-color: $primary-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);

app/javascript/styles/material-v1-dark/columns.scss

@@ -22,6 +22,8 @@
         color: $top-bar-text-color;
     }
 
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
     &.active {
         .column-header__icon {
             color: $secondary-color;
@@ -62,14 +64,29 @@
 
     &__setting-btn {
         color: $icon-button-color;
+        padding: 8px 0;
 
         &:hover {
             color: $icon-button-hover-color;
-            background: $icon-background-hover-color;
+            text-decoration: none;
         }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
     }
 
-    &__setting-arrows { font-size: 16px }
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
 
     &__wrapper {
         @include shadow-4dp;
@@ -80,12 +97,13 @@
         &.active {
             @include shadow-4dp;
 
-            &:before { background: transparent }
+            &::before { background: transparent }
         }
     }
 
     &__collapsible {
         color: $ui-text-color;
+        background: $card-background-color;
         border-top: 1px solid $border-color;
 
         &-inner {
@@ -98,7 +116,7 @@
 
     &__back-button {
         background: $top-bar-color;
-        color: $icon-color;
+        color: $top-bar-icon-color;
         padding: 8px;
         margin: auto 0;
         border-radius: 50%;
@@ -156,6 +174,8 @@
         margin-bottom: 0;
         margin-top: 8px;
     }
+
+    &__row .text-btn { margin-bottom: 0 }
 }
 
 .column-back-button {
@@ -163,6 +183,8 @@
     background: $top-bar-color;
     color: $top-bar-icon-color;
     padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
 }
 
 .column-inline-form {
@@ -222,17 +244,31 @@
     }
 }
 
+// read status in notification column
 .muted {
     .status {
         &__content {
-            color: $primary-text-color;
+            color: $read-primary-text-color;
     
-            p { color: $primary-text-color }
+            p { color: $read-primary-text-color }
     
-            a { color: $secondary-text-color }
+            a { color: $read-secondary-text-color }
         }
 
-        &__display-name strong { color: $primary-text-color }
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
     }
 }
 
@@ -267,7 +303,42 @@
         a { color: $ui-text-color }
 
         p a { color: $link-text-color }
+    }
 
+    &__trends {
+        background: $background-color;
+        margin-bottom: 0;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends__item {
+    padding: 16px;
+    border-bottom: none;
+
+    &__name {
+        color: $secondary-text-color;
+        font-size: 12px;
+
+        a { color: $primary-text-color }
+    }
+
+    &__current {
+        padding-right: 16px;
+        margin-left: 4px;
+        color: $secondary-text-color;
+    }
+
+    &__sparkline path {
+        stroke: $primary-color;
+        fill: $primary-color;
+        fill-opacity: 0.5;
     }
 }
 
@@ -330,22 +401,22 @@
 
 .notification {
     &__filter-bar {
-        background: $top-bar-color;
+        background: $tab-background-color;
         border-bottom: 1px solid $border-color;
         z-index: 1;
     
         button {
-            background: $top-bar-color;
+            background: $tab-background-color;
-            color: $top-bar-icon-color;
+            color: $tab-indicator-color;
             font-size: 16px;
 
             span { font-size: 14px }
     
             &.active {
-                color: $tab-indicator-color;
+                color: $tab-indicator-active-color;
-                border-bottom: 4px solid $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
     
-                &:before,
+                &::before,
                 &:after { border: none }
 
                 &:focus { background: $tab-indicator-background-focus-color }
@@ -370,6 +441,7 @@
     .icon-button.disabled { color: $disabled-icon-color }
 }
 
+// read notification
 .notification.notification-favourite.focusable,
 .notification.notification-follow.focusable { background: $list-background-inactive-color }
 
@@ -384,8 +456,6 @@
 
 .react-swipeable-view-container { height: auto }
 
-.tabs-bar__wrapper { background: transparent }
-
 .attachment-list__list a { color: $secondary-text-color }
 
 .focusable { background: transparent !important }

app/javascript/styles/material-v1-dark/components.scss

@@ -149,7 +149,7 @@
 
     &__item a {
         font-size: 14px;
-        padding: 9px 16px;
+        padding: 8px 16px;
         background: $menu-background-color;
         color: $menu-text-color;
 
@@ -166,11 +166,33 @@
 }
 
 .compose-form {
-    .autosuggest-textarea__textarea {
+    .autosuggest-textarea {
-        background: $card-background-color;
+        &__textarea {
-        color: $ui-text-color;
+            background: $card-background-color;
+            color: $ui-text-color;
+    
+            &::placeholder { color: $tips-text-color }
+        }
 
-        &::placeholder { color: $tips-text-color }
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-background-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-background-active-color }
+            }
+        }
     }
 
     .spoiler-input__input {
@@ -234,20 +256,42 @@
     }
 }
 
-.poll__input {
+.no-reduce-motion .spoiler-input {
-    border: 2px solid $control-border-color;
+    transition-duration: .2s, .2s;
-    width: 20px;
-    height: 20px;
-    flex: 0 0 20px;
 }
 
-.poll__text input[type=text] {
-    color: $ui-text-color;
-    background: $background-color;
-    border: 1px solid $border-color;
-    padding: 8px 12px;
 
-    &:focus { border-color: $border-active-color }
+.poll {
+    &__input {
+        border: 2px solid $control-border-color;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $background-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-active-color }
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $poll-bar-color;
+    
+        &.leading { background: $poll-bar-leading-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
 }
 
 .privacy-dropdown {
@@ -336,4 +380,10 @@
     }
 
     &__content { color: $primary-text-color }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
 }

app/javascript/styles/material-v1-dark/config.scss

@@ -30,32 +30,10 @@
 
 
 // Favorite icon settings
-// If you exclude 'material-icons.scss', please comment out this section.
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
-.fa {
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
-    &.fa-star:before { content: "star" }  // Star
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
-    //&.fa-star:before { content: "favorite" }  // Heart
-    //&.fa-star:before { content: "plus_one" }  // +1
-}
 
-.star-icon.active,
+$favorite-icon-color: #ffd600;  // Star
-.star-icon.icon-button.active.active,
+//$favorite-icon-color: #ff4081;  // Heart
-.notification__favourite-icon-wrapper .star-icon,
+//$favorite-icon-color: #db4437;  // +1
-.status__action-bar-button.star-icon.icon-button.active {
-    color: #ffd600;  // Star
-    //color: #ff4081;  // Heart
-    //color: #db4437;  // +1
-}
-
-.status__action-bar-button.star-icon.icon-button,
-.star-icon.icon-button {
-    .fa.fa-star:before { content: "star_border" }  // Star
-    //.fa.fa-star:before { content: "favorite_border" }  // Heart
-    //.fa.fa-star:before { content: "plus_one" }  // +1
-
-    &.active,
-    &.active.activate {
-        .fa.fa-star:before { content: "star" }  // Star
-        //.fa.fa-star:before { content: "favorite" }  // Heart
-        //.fa.fa-star:before { content: "plus_one" }  // +1
-    }
-}

app/javascript/styles/material-v1-dark/emoji-picker.scss

@@ -46,7 +46,7 @@
         }
 
         &-bar {
-            background-color: $tab-indicator-color;
+            background-color: $tab-indicator-active-color;
         }
 
         &:hover {
@@ -63,7 +63,7 @@
             background: $search-bar-color;
             color: $ui-text-color;
             border: 0;
-            border-radius: $bar-radius;
+            border-radius: $search-bar-radius;
 
             &:focus {
                 @include shadow-2dp;
@@ -82,7 +82,7 @@
         background: $menu-background-color;
     }
 
-    &-emoji:hover:before {
+    &-emoji:hover::before {
         background-color: $icon-background-hover-color;
     }
 

app/javascript/styles/material-v1-dark/icons.scss

@@ -15,16 +15,21 @@
 }
 
 
-.fa { vertical-align: sub }  //マテリアルアイコンを文字の高さにそろえる
+.fa { vertical-align: sub }  // adjust material icon font baseline to other font
 
 .fa.fa-times,
-.fa.fa-eraser { vertical-align: middle }  //↑の例外
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle }  // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
 
 .fa.fa-lock { text-transform: none }
 
 .fa-fw { width: 16px }
 
-.fa.fa-chevron-left.column-back-button__icon.fa-fw {
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
     font-size: 20px;
     margin-right: 16px;
 }
@@ -34,4 +39,10 @@
     border: none;
     padding: 2px 6px;
     border-radius: 12px;
-}
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }

app/javascript/styles/material-v1-dark/layout/material-v2.scss

@@ -1,65 +0,0 @@
-@charset "UTF-8";
-@import '../mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 8px;
-
-
-// Search bar radius
-$search-bar-radius: 8px;
-
-
-// Bar radius settings
-$bar-radius: 0;
-//$bar-radius: 8px;
-
-
-// Button radius settings
-$button-radius: 8px;
-
-
-// Card radius settings
-$card-radius: 8px;
-
-
-// Dialog radius settings
-$dialog-radius: 8px;
-
-
-// Menu radius settings
-$menu-radius: 8px;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 8px;  // corner rounded
-//$nav-drawer-item-radius: 32px;  // full rounded
-//$nav-drawer-item-radius: 32px 0 0 32px;  // left rounded
-
-
-// Avater cropping settings
-$avater-radius: 50%;  // Rounded cropping
-//$avater-radius: 8px  // Material v2 square
-
-
-// Chip settings
-// If you want to use contained-chip, please comment out below.
-.reactions-bar__item {
-    background: $outlined-chip-color !important;
-    border: 1px solid $border-color !important;
-
-    &.active { background-color: $outlined-chip-selected-color !important }
-
-    &:hover { background: $outlined-chip-hover-color !important }
-}
-.relationship-tag,
-.account-role {
-    background: $outlined-chip-color !important;
-    border: 1px solid $border-color !important;
-}
-
-
-// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }

app/javascript/styles/material-v1-dark/material-icons.scss

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 @import 'config';
+@import 'functions';
 
 
 .fa {
@@ -31,6 +32,7 @@
     &.fa-chevron-right,
     &.fa-reply,
     &.fa-reply-all,
+    &.fa-share-alt,
     &.fa-star,
     &.fa-bookmark,
     &.fa-ellipsis-h,
@@ -46,51 +48,99 @@
     &.fa-eye,
     &.fa-eye-slash,
     &.fa-pencil,
-    &.fa-trash {
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check {
         font-family: "Material Icons";
     }
 }
 
 .fa {
-    &.fa-bars:before, &.fa-navicon:before,&.fa-reorder:before { content: "menu" }
+    &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
-    &.fa-globe:before { content: "public" }
+    &.fa-globe::before { content: "public" }
-    &.fa-cog:before, &.fa-cogs:before, &.fa-gears:before { content: "settings" }
+    &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
-    &.fa-sign-out:before { content: "exit_to_app" }
+    &.fa-sign-out::before { content: "exit_to_app" }
-    &.fa-search:before { content: "search" }
+    &.fa-search::before { content: "search" }
-    &.fa-times:before, &.fa-times-circle:before, &.fa-close:before, &.fa-remove:before { content: "close" }
+    &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
-    &.fa-chevron-down:before, &.fa-ellipsis-v:before { content: "more_vert" }
+    &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
-    &.fa-paperclip:before { content: "attach_file" }
+    &.fa-paperclip::before { content: "attach_file" }
-    &.fa-tasks:before { content: "poll" }
+    &.fa-tasks::before { content: "poll" }
-    &.fa-plus:before { content: "add" }
+    &.fa-plus::before { content: "add" }
-    &.fa-unlock:before { content: "lock_open" }
+    &.fa-unlock::before { content: "lock_open" }
-    &.fa-lock:before { content: "lock" }
+    &.fa-lock::before { content: "lock" }
-    &.fa-envelope:before { content: "mail" }
+    &.fa-envelope::before { content: "mail" }
-    &.fa-home:before { content: "home" }
+    &.fa-home::before { content: "home" }
-    &.fa-bullhorn:before { content: "announcement" }
+    &.fa-bullhorn::before { content: "announcement" }
-    &.fa-sliders:before { content: "tune" }
+    &.fa-sliders::before { content: "tune" }
-    &.fa-chevron-left:before { content: "arrow_back" }
+    &.fa-chevron-left::before { content: "arrow_back" }
-    &.fa-chevron-right:before { content: "arrow_forward" }
+    &.fa-chevron-right::before { content: "arrow_forward" }
-    &.fa-reply:before { content: "reply" }
+    &.fa-reply::before { content: "reply" }
-    &.fa-reply-all:before { content: "reply_all" }
+    &.fa-reply-all::before { content: "reply_all" }
-    &.fa-bookmark:before { content: "bookmark" }
+    &.fa-share-alt::before { content: "share" }
-    &.fa-ellipsis-h:before { content: "more_horiz" }
+    &.fa-star::before { content: $favorite-icon }
-    &.fa-bell:before { content: "notifications" }
+    &.fa-bookmark::before { content: "bookmark" }
-    &.fa-eraser:before { content: "clear_all" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
-    &.fa-users:before { content: "people" }
+    &.fa-bell::before { content: "notifications" }
-    &.fa-file-text:before { content: "web" }
+    &.fa-eraser::before { content: "clear_all" }
-    &.fa-user-plus:before { content: "person_add" }
+    &.fa-users::before { content: "people" }
-    &.fa-address-book:before { content: "explore" }
+    &.fa-file-text::before { content: "web" }
-    &.fa-address-book-o:before { content: "explore" }
+    &.fa-user-plus::before { content: "person_add" }
-    &.fa-list:before { content: "list" }
+    &.fa-address-book::before { content: "explore" }
-    &.fa-list-ul:before { content: "list" }
+    &.fa-address-book-o::before { content: "explore" }
-    &.fa-eye:before { content: "visibility" }
+    &.fa-list::before { content: "list" }
-    &.fa-eye-slash:before { content : "visibility_off" }
+    &.fa-list-ul::before { content: "list" }
-    &.fa-pencil:before { content: "create" }
+    &.fa-eye::before { content: "visibility" }
-    &.fa-trash:before { content: "delete" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "delete" }
+    &.fa-check::before { content: "check" }
 }
 
+// bookmark icon
 .status__action-bar-button.icon-button,
 .bookmark-icon.icon-button {
-    .fa.fa-bookmark:before { content: "bookmark_border" }
+    .fa.fa-bookmark::before { content: "bookmark_border" }
-    &.active .fa.fa-bookmark:before { content: "bookmark" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+    height: 18px;
+    width: 18px;
+    transition: background-position .3s steps(1);
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
 }

app/javascript/styles/material-v1-dark/media.scss

@@ -26,13 +26,74 @@
     }
 }
 
-.icon-button.overlayed {
+.media-modal {
-    border-radius: 50%;
+    &__nav {
-    background: $media-icon-background-color;
-    color: $media-icon-color;
-
-    &:hover {
         background: $media-icon-background-color;
-        color: $media-icon-hover-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
     }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
 }

app/javascript/styles/material-v1-dark/mobile.scss

@@ -12,14 +12,17 @@
         border-bottom: 4px solid transparent;
 
         &.active {
-            border-bottom: 4px solid $tab-indicator-color;
+            border-bottom: 4px solid $tab-indicator-active-color;
-            color: $tab-indicator-color;
+            color: $tab-indicator-active-color;
         }
 
         .fa { font-size: 20px }
     }
 
-    &__wrapper { @include shadow-4dp }
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
 }
 
 

app/javascript/styles/material-v1-dark/modal.scss

@@ -29,10 +29,25 @@
         color: $ui-text-color;
         font-size: 16px;
 
-        &:hover { background: $card-background-hover-color }
+        &:hover {
+            background: $card-background-hover-color;
+            color: $ui-text-color;
+        }
     }
 
     .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-background-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
 }
 
 .report-modal {

app/javascript/styles/material-v1-dark/statuses.scss

@@ -73,6 +73,8 @@
         }
     }
 
+    &__prepend { color: $secondary-text-color }
+
     &.status-direct:not(.read) {
         background: transparent;
         border-bottom-color: $border-color;
@@ -99,9 +101,25 @@
 
     &__description { color: $secondary-text-color }
 
+    &__actions {
+        &>div {
+            background: $media-icon-background-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
     &.compact {
         border-color: $border-color;
         outline: none;
+        background: transparent;
         
         .status-card {
             &__content { padding: 12px }
@@ -114,8 +132,16 @@
     &:hover { background-color: $card-background-color }
 }
 
+// Detailed status in mobile
 .status.light {
-    .display-name span { color: $info-text-color }
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
 }
 
 .detailed-status {

app/javascript/styles/material-v1-light/_functions.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+@function to-string($value) {
+    @return inspect($value);
+}
+
+// convert hex color code to svg styled color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(to-string($color), 2, 7);
+}

app/javascript/styles/material-v1-light/account.scss

@@ -5,7 +5,7 @@
 .account {
     border-bottom: 1px solid $border-color;
 
-    .account__display-name,
+    .account__display-name { color: $primary-text-color }
     .account__display-name strong { color: $secondary-text-color }
 
     &__avatar {
@@ -13,11 +13,15 @@
         width: 40px;
         height: 40px;
 
-        &-overlay-base {
+        &-overlay {
-            border-radius: 50%;
+            &-base {
-            width: 44px;
+                border-radius: 50%;
-            height: 44px;
+                width: 44px;
-            background-size: 44px;
+                height: 44px;
+                background-size: 44px;
+            }
+
+            &-overlay { border-radius: $avater-radius }
         }
     }
 
@@ -109,24 +113,24 @@
     }
 
     &__section-headline {
-        background: $card-background-color;
+        background: $text-tab-background-color;
         border-bottom: 1px solid $border-color;
 
         a {
             padding: 16px 0;
-            color: $secondary-text-color;
+            color: $text-tab-indicator-color;
 
             &.active {
-                color: $tab-indicator-color;
+                color: $text-tab-indicator-active-color;
-                border-bottom: 4px solid $tab-indicator-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
 
-                &:before,
+                &::before,
                 &:after { border: none }
 
-                &:focus { background: $tab-indicator-background-focus-color }
+                &:focus { background: $text-tab-indicator-background-focus-color }
             }
 
-            &:hover { background: $tab-indicator-background-hover-color }
+            &:hover { background: $text-tab-indicator-background-hover-color }
         }
     }
 }

app/javascript/styles/material-v1-light/button.scss

@@ -23,6 +23,17 @@
         }
     }
 
+    &.overlayed {
+        border-radius: 50%;
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+    
+        &:hover {
+            background: $media-icon-background-color;
+            color: $media-icon-hover-color;
+        }
+    }
+
     &:hover {
         color: $icon-button-hover-color;
         background-color: $icon-background-hover-color;
@@ -75,4 +86,10 @@
     &:hover { background: $text-button-hover-color }
 
     &:focus { background: $text-button-focus-color }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-background-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
 }

app/javascript/styles/material-v1-light/color/mastodon-dark.scss

@@ -1,107 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9baec8;
-$ui-text-color: #fff;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #606984;
-$tips-text-color: #6d7889;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4ea2df;
-$menu-text-color: #282c37;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-
-// Background-color
-$background-color: #191b22;
-$menu-background-color: #d9e1e8;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #444b5d;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #282c37;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$verified-background-color: darken($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #42485a;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
-$outlined-chip-color: #393f4f;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #9baec8;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: lighten($background-color, 14%);
-$icon-background-active-color: lighten($background-color, 18%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #fff;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.7);
-$text-button-focus-color: transparentize($text-button-color, 0.6);
-$floating-action-button-color: $secondary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($primary-color, 18%);
-
-// Border color
-$border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
-$scroll-bar-thumb-active-color: lighten($background-color, 32%);
-
-// App bar color
-$top-bar-color: #313543;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: #d9e1e8;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.7);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);

app/javascript/styles/material-v1-light/color/v1-dark.scss

@@ -1,107 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-
-// Background-color
-$background-color: #303030;
-$menu-background-color: #1e1e1e;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$verified-background-color: darken($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.8);
-$text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #5f6368;
-$border-active-color: lighten($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
-$scroll-bar-thumb-active-color: lighten($background-color, 38%);
-
-// App bar color
-$top-bar-color: #2196f3;
-$search-bar-color: lighten($background-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);

app/javascript/styles/material-v1-light/color/v1-light.scss

@@ -60,7 +60,7 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
 $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
 $control-border-color: $icon-color;
 
 // Button color
@@ -103,5 +103,27 @@ $search-bar-focus-color: $background-color;
 
 // Tab color
 $tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-active-color: $top-bar-icon-color;
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

app/javascript/styles/material-v1-light/color/v2-dark.scss

@@ -1,107 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-
-// Background-color
-$background-color: #121212;
-$menu-background-color: #1e1e1e;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$verified-background-color: darken($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.8);
-$text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: #1e1e1e;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #5f6368;
-$border-active-color: lighten($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #272727;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $primary-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);

app/javascript/styles/material-v1-light/color/v2-light.scss

@@ -1,107 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-
-// Background-color
-$background-color: #ffffff;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: $background-color;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: $background-color;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$verified-background-color: lighten($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.8);
-$text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: #ffffff;
-$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
-$floating-action-button-active-color: darken($floating-action-button-color, 10%);
-$floating-action-button-icon-color: $secondary-color;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($background-color, 30%);
-$scroll-bar-thumb-active-color: darken($background-color, 38%);
-
-// App bar color
-$top-bar-color: $background-color;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-color;
-
-// Tab color
-$tab-indicator-color: $primary-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);

app/javascript/styles/material-v1-light/columns.scss

@@ -22,6 +22,8 @@
         color: $top-bar-text-color;
     }
 
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
     &.active {
         .column-header__icon {
             color: $secondary-color;
@@ -62,14 +64,29 @@
 
     &__setting-btn {
         color: $icon-button-color;
+        padding: 8px 0;
 
         &:hover {
             color: $icon-button-hover-color;
-            background: $icon-background-hover-color;
+            text-decoration: none;
         }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
     }
 
-    &__setting-arrows { font-size: 16px }
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
 
     &__wrapper {
         @include shadow-4dp;
@@ -80,12 +97,13 @@
         &.active {
             @include shadow-4dp;
 
-            &:before { background: transparent }
+            &::before { background: transparent }
         }
     }
 
     &__collapsible {
         color: $ui-text-color;
+        background: $card-background-color;
         border-top: 1px solid $border-color;
 
         &-inner {
@@ -98,7 +116,7 @@
 
     &__back-button {
         background: $top-bar-color;
-        color: $icon-color;
+        color: $top-bar-icon-color;
         padding: 8px;
         margin: auto 0;
         border-radius: 50%;
@@ -156,6 +174,8 @@
         margin-bottom: 0;
         margin-top: 8px;
     }
+
+    &__row .text-btn { margin-bottom: 0 }
 }
 
 .column-back-button {
@@ -163,6 +183,8 @@
     background: $top-bar-color;
     color: $top-bar-icon-color;
     padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
 }
 
 .column-inline-form {
@@ -222,17 +244,31 @@
     }
 }
 
+// read status in notification column
 .muted {
     .status {
         &__content {
-            color: $primary-text-color;
+            color: $read-primary-text-color;
     
-            p { color: $primary-text-color }
+            p { color: $read-primary-text-color }
     
-            a { color: $secondary-text-color }
+            a { color: $read-secondary-text-color }
         }
 
-        &__display-name strong { color: $primary-text-color }
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
     }
 }
 
@@ -267,7 +303,42 @@
         a { color: $ui-text-color }
 
         p a { color: $link-text-color }
+    }
 
+    &__trends {
+        background: $background-color;
+        margin-bottom: 0;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends__item {
+    padding: 16px;
+    border-bottom: none;
+
+    &__name {
+        color: $secondary-text-color;
+        font-size: 12px;
+
+        a { color: $primary-text-color }
+    }
+
+    &__current {
+        padding-right: 16px;
+        margin-left: 4px;
+        color: $secondary-text-color;
+    }
+
+    &__sparkline path {
+        stroke: $primary-color;
+        fill: $primary-color;
+        fill-opacity: 0.5;
     }
 }
 
@@ -330,22 +401,22 @@
 
 .notification {
     &__filter-bar {
-        background: $top-bar-color;
+        background: $tab-background-color;
         border-bottom: 1px solid $border-color;
         z-index: 1;
     
         button {
-            background: $top-bar-color;
+            background: $tab-background-color;
-            color: $top-bar-icon-color;
+            color: $tab-indicator-color;
             font-size: 16px;
 
             span { font-size: 14px }
     
             &.active {
-                color: $tab-indicator-color;
+                color: $tab-indicator-active-color;
-                border-bottom: 4px solid $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
     
-                &:before,
+                &::before,
                 &:after { border: none }
 
                 &:focus { background: $tab-indicator-background-focus-color }
@@ -370,6 +441,7 @@
     .icon-button.disabled { color: $disabled-icon-color }
 }
 
+// read notification
 .notification.notification-favourite.focusable,
 .notification.notification-follow.focusable { background: $list-background-inactive-color }
 
@@ -384,8 +456,6 @@
 
 .react-swipeable-view-container { height: auto }
 
-.tabs-bar__wrapper { background: transparent }
-
 .attachment-list__list a { color: $secondary-text-color }
 
 .focusable { background: transparent !important }

app/javascript/styles/material-v1-light/components.scss

@@ -149,7 +149,7 @@
 
     &__item a {
         font-size: 14px;
-        padding: 9px 16px;
+        padding: 8px 16px;
         background: $menu-background-color;
         color: $menu-text-color;
 
@@ -166,11 +166,33 @@
 }
 
 .compose-form {
-    .autosuggest-textarea__textarea {
+    .autosuggest-textarea {
-        background: $card-background-color;
+        &__textarea {
-        color: $ui-text-color;
+            background: $card-background-color;
+            color: $ui-text-color;
+    
+            &::placeholder { color: $tips-text-color }
+        }
 
-        &::placeholder { color: $tips-text-color }
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-background-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-background-active-color }
+            }
+        }
     }
 
     .spoiler-input__input {
@@ -234,20 +256,42 @@
     }
 }
 
-.poll__input {
+.no-reduce-motion .spoiler-input {
-    border: 2px solid $control-border-color;
+    transition-duration: .2s, .2s;
-    width: 20px;
-    height: 20px;
-    flex: 0 0 20px;
 }
 
-.poll__text input[type=text] {
-    color: $ui-text-color;
-    background: $background-color;
-    border: 1px solid $border-color;
-    padding: 8px 12px;
 
-    &:focus { border-color: $border-active-color }
+.poll {
+    &__input {
+        border: 2px solid $control-border-color;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $background-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-active-color }
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $poll-bar-color;
+    
+        &.leading { background: $poll-bar-leading-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
 }
 
 .privacy-dropdown {
@@ -336,4 +380,10 @@
     }
 
     &__content { color: $primary-text-color }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
 }

app/javascript/styles/material-v1-light/config.scss

@@ -30,32 +30,10 @@
 
 
 // Favorite icon settings
-// If you exclude 'material-icons.scss', please comment out this section.
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
-.fa {
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
-    &.fa-star:before { content: "star" }  // Star
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
-    //&.fa-star:before { content: "favorite" }  // Heart
-    //&.fa-star:before { content: "plus_one" }  // +1
-}
 
-.star-icon.active,
+$favorite-icon-color: #ffd600;  // Star
-.star-icon.icon-button.active.active,
+//$favorite-icon-color: #ff4081;  // Heart
-.notification__favourite-icon-wrapper .star-icon,
+//$favorite-icon-color: #db4437;  // +1
-.status__action-bar-button.star-icon.icon-button.active {
-    color: #ffd600;  // Star
-    //color: #ff4081;  // Heart
-    //color: #db4437;  // +1
-}
-
-.status__action-bar-button.star-icon.icon-button,
-.star-icon.icon-button {
-    .fa.fa-star:before { content: "star_border" }  // Star
-    //.fa.fa-star:before { content: "favorite_border" }  // Heart
-    //.fa.fa-star:before { content: "plus_one" }  // +1
-
-    &.active,
-    &.active.activate {
-        .fa.fa-star:before { content: "star" }  // Star
-        //.fa.fa-star:before { content: "favorite" }  // Heart
-        //.fa.fa-star:before { content: "plus_one" }  // +1
-    }
-}

app/javascript/styles/material-v1-light/emoji-picker.scss

@@ -46,7 +46,7 @@
         }
 
         &-bar {
-            background-color: $tab-indicator-color;
+            background-color: $tab-indicator-active-color;
         }
 
         &:hover {
@@ -63,7 +63,7 @@
             background: $search-bar-color;
             color: $ui-text-color;
             border: 0;
-            border-radius: $bar-radius;
+            border-radius: $search-bar-radius;
 
             &:focus {
                 @include shadow-2dp;
@@ -82,7 +82,7 @@
         background: $menu-background-color;
     }
 
-    &-emoji:hover:before {
+    &-emoji:hover::before {
         background-color: $icon-background-hover-color;
     }
 

app/javascript/styles/material-v1-light/icons.scss

@@ -15,16 +15,21 @@
 }
 
 
-.fa { vertical-align: sub }  //マテリアルアイコンを文字の高さにそろえる
+.fa { vertical-align: sub }  // adjust material icon font baseline to other font
 
 .fa.fa-times,
-.fa.fa-eraser { vertical-align: middle }  //↑の例外
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle }  // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
 
 .fa.fa-lock { text-transform: none }
 
 .fa-fw { width: 16px }
 
-.fa.fa-chevron-left.column-back-button__icon.fa-fw {
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
     font-size: 20px;
     margin-right: 16px;
 }
@@ -34,4 +39,10 @@
     border: none;
     padding: 2px 6px;
     border-radius: 12px;
-}
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }