mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
テーマのアップデートなど
This commit is contained in:
YoheiZuho 2020-05-02 07:39:21 +09:00 committed by GitHub
commit deed13d313
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
741 changed files with 7229 additions and 3474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.dependabot/config.yml
View File

@ -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

2
.gitignore vendored
View File

@ -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

6
Gemfile
View File

@ -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'

76
Gemfile.lock
View File

@ -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-partitions (1.286.0)
aws-sdk-core (3.92.0)
aws-eventstream (~> 1.0, >= 1.0.2)
aws-eventstream (1.1.0)
aws-partitions (1.296.0)
aws-sdk-core (3.94.0)
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-api (= 7.5.0)
elasticsearch-transport (= 7.5.0)
elasticsearch-api (7.5.0)
elasticsearch (7.6.0)
elasticsearch-api (= 7.6.0)
elasticsearch-transport (= 7.6.0)
elasticsearch-api (7.6.0)
multi_json
elasticsearch-dsl (0.1.8)
elasticsearch-transport (7.5.0)
faraday (>= 0.14, < 1)
elasticsearch-dsl (0.1.9)
elasticsearch-transport (7.6.0)
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)
fabrication (2.21.0)
excon (0.73.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)
actionpack (>= 4.0, < 6)
redis-rack (>= 1, < 3)
redis-actionpack (5.2.0)
actionpack (>= 5, < 7)
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)
rack (>= 1.5, < 3)
redis-rack (2.1.2)
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 (>= 2.2, < 5)
regexp_parser (1.6.0)
redis-store (1.8.2)
redis (>= 4, < 5)
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)

2
README.md
View File

@ -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

2
app/controllers/activitypub/inboxes_controller.rb
View File

@ -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

2
app/controllers/admin/instances_controller.rb
View File

@ -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

37
app/controllers/settings/pictures_controller.rb Normal file
View File

@ -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

9
app/controllers/tags_controller.rb
View File

@ -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

2
app/helpers/admin/action_logs_helper.rb
View File

@ -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

9
app/helpers/settings_helper.rb
View File

@ -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

3
app/javascript/mastodon/actions/timelines.js
View File

@ -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);
};

29
app/javascript/mastodon/components/dropdown_menu.js
View File

@ -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];
if (element) {
element.focus();
}
element = items[index+1] || items[0];
break;
case 'ArrowUp':
element = items[index-1];
if (element) {
element.focus();
}
element = items[index-1] || items[items.length-1];
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 => {

8
app/javascript/mastodon/components/poll.js
View File

@ -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) {

19
app/javascript/mastodon/containers/poll_container.js
View File

@ -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);

2
app/javascript/mastodon/containers/timeline_container.js
View File

@ -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} />;
}

5
app/javascript/mastodon/features/blocks/index.js
View File

@ -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}

35
app/javascript/mastodon/features/compose/components/privacy_dropdown.js
View File

@ -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];
if (element) {
element.focus();
this.props.onChange(element.getAttribute('data-index'));
}
element = this.node.childNodes[index + 1] || this.node.firstChild;
break;
case 'ArrowUp':
element = this.node.childNodes[index - 1];
if (element) {
element.focus();
this.props.onChange(element.getAttribute('data-index'));
}
element = this.node.childNodes[index - 1] || this.node.lastChild;
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 => {

2
app/javascript/mastodon/features/emoji/emoji_map.json
View File

File diff suppressed because one or more lines are too long

5
app/javascript/mastodon/features/follow_requests/index.js
View File

@ -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}

5
app/javascript/mastodon/features/followers/index.js
View File

@ -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 />}

5
app/javascript/mastodon/features/following/index.js
View File

@ -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 />}

7
app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js
View File

@ -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>
);
}

16
app/javascript/mastodon/features/hashtag_timeline/index.js
View File

@ -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}`));
this.props.dispatch(expandHashtagTimeline(id, { tags }));
dispatch(clearTimeline(`hashtag:${id}`));
dispatch(expandHashtagTimeline(id, { tags, local }));
}
}
@ -125,8 +125,8 @@ class HashtagTimeline extends React.PureComponent {
}
handleLoadMore = maxId => {
const { id, tags } = this.props.params;
this.props.dispatch(expandHashtagTimeline(id, { maxId, tags }));
const { id, tags, local } = this.props.params;
this.props.dispatch(expandHashtagTimeline(id, { maxId, tags, local }));
}
render () {

5
app/javascript/mastodon/features/mutes/index.js
View File

@ -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}

14
app/javascript/mastodon/features/standalone/hashtag_timeline/index.js
View File

@ -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 }));
}
}

57
app/javascript/mastodon/reducers/user_lists.js
View File

@ -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:

45
app/javascript/mastodon/utils/resize_image.js
View File

@ -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);
}
});
});

18
app/javascript/styles/mastodon-material-dark.scss Normal file
View File

@ -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';

12
app/javascript/styles/mastodon-material-dark/_functions.scss Normal file
View File

@ -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);
}

25
app/javascript/styles/mastodon-material-dark/_mixins.scss Normal file
View File

@ -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}

143
app/javascript/styles/mastodon-material-dark/account.scss Normal file
View File

@ -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;
}

24
app/javascript/styles/mastodon-material-dark/basics.scss Normal file
View File

@ -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;
}

95
app/javascript/styles/mastodon-material-dark/button.scss Normal file
View File

@ -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;
}

29
app/javascript/styles/mastodon-material-dark/cards.scss Normal file
View File

@ -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;
}

30
app/javascript/styles/material-v1-dark/color/mastodon-dark.scss → app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
View File

@ -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-background-focus-color: transparentize($tab-indicator-color, 0.6);
$tab-indicator-active-color: $top-bar-icon-color;
$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);

461
app/javascript/styles/mastodon-material-dark/columns.scss Normal file
View File

@ -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 }

389
app/javascript/styles/mastodon-material-dark/components.scss Normal file
View File

@ -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 }
}

39
app/javascript/styles/mastodon-material-dark/config.scss Normal file
View File

@ -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

69
app/javascript/styles/mastodon-material-dark/control.scss Normal file
View File

@ -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;
}
}

90
app/javascript/styles/mastodon-material-dark/emoji-picker.scss Normal file
View File

@ -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 }
}

48
app/javascript/styles/mastodon-material-dark/icons.scss Normal file
View File

@ -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 }

0
app/javascript/styles/material-v2-dark/layout/material-v1.scss → app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
View File

146
app/javascript/styles/mastodon-material-dark/material-icons.scss Normal file
View File

@ -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>');
}

99
app/javascript/styles/mastodon-material-dark/media.scss Normal file
View File

@ -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 }
}

48
app/javascript/styles/mastodon-material-dark/mobile.scss Normal file
View File

@ -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 }
}

76
app/javascript/styles/mastodon-material-dark/modal.scss Normal file
View File

@ -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;
}
}

172
app/javascript/styles/mastodon-material-dark/statuses.scss Normal file
View File

@ -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 }
}
}

18
app/javascript/styles/mastodon-material-light.scss Normal file
View File

@ -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';

12
app/javascript/styles/mastodon-material-light/_functions.scss Normal file
View File

@ -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);
}

25
app/javascript/styles/mastodon-material-light/_mixins.scss Normal file
View File

@ -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}

143
app/javascript/styles/mastodon-material-light/account.scss Normal file
View File

@ -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;
}

24
app/javascript/styles/mastodon-material-light/basics.scss Normal file
View File

@ -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;
}

95
app/javascript/styles/mastodon-material-light/button.scss Normal file
View File

@ -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;
}

29
app/javascript/styles/mastodon-material-light/cards.scss Normal file
View File

@ -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;
}

30
app/javascript/styles/material-v1-light/color/mastodon-light.scss → app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
View File

@ -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-background-hover-color: lighten($tab-indicator-color, 36%);
$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
$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);

461
app/javascript/styles/mastodon-material-light/columns.scss Normal file
View File

@ -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 }

389
app/javascript/styles/mastodon-material-light/components.scss Normal file
View File

@ -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 }
}

39
app/javascript/styles/mastodon-material-light/config.scss Normal file
View File

@ -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

69
app/javascript/styles/mastodon-material-light/control.scss Normal file
View File

@ -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;
}
}

90
app/javascript/styles/mastodon-material-light/emoji-picker.scss Normal file
View File

@ -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 }
}

48
app/javascript/styles/mastodon-material-light/icons.scss Normal file
View File

@ -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 }

0
app/javascript/styles/material-v2-light/layout/material-v1.scss → app/javascript/styles/mastodon-material-light/layout/material-v1.scss
View File

146
app/javascript/styles/mastodon-material-light/material-icons.scss Normal file
View File

@ -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>');
}

99
app/javascript/styles/mastodon-material-light/media.scss Normal file
View File

@ -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 }
}

48
app/javascript/styles/mastodon-material-light/mobile.scss Normal file
View File

@ -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 }
}

76
app/javascript/styles/mastodon-material-light/modal.scss Normal file
View File

@ -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;
}
}

172
app/javascript/styles/mastodon-material-light/statuses.scss Normal file
View File

@ -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 }
}
}

12
app/javascript/styles/material-v1-dark/_functions.scss Normal file
View File

@ -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);
}

30
app/javascript/styles/material-v1-dark/account.scss
View File

@ -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 {
border-radius: 50%;
width: 44px;
height: 44px;
background-size: 44px;
&-overlay {
&-base {
border-radius: 50%;
width: 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;
border-bottom: 4px solid $tab-indicator-color;
color: $text-tab-indicator-active-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 }
}
}
}

17
app/javascript/styles/material-v1-dark/button.scss
View File

@ -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;
}

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

@ -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%);

30
app/javascript/styles/material-v1-dark/color/v1-dark.scss
View File

@ -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-background-focus-color: transparentize($tab-indicator-color, 0.7);
$tab-indicator-active-color: $top-bar-icon-color;
$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);

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

@ -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);

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

@ -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);

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

@ -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);

102
app/javascript/styles/material-v1-dark/columns.scss
View File

@ -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;
color: $top-bar-icon-color;
background: $tab-background-color;
color: $tab-indicator-color;
font-size: 16px;
span { font-size: 14px }
&.active {
color: $tab-indicator-color;
border-bottom: 4px solid $tab-indicator-color;
color: $tab-indicator-active-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 }

82
app/javascript/styles/material-v1-dark/components.scss
View File

@ -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 {
background: $card-background-color;
color: $ui-text-color;
.autosuggest-textarea {
&__textarea {
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 {
border: 2px solid $control-border-color;
width: 20px;
height: 20px;
flex: 0 0 20px;
.no-reduce-motion .spoiler-input {
transition-duration: .2s, .2s;
}
.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 }
}

34
app/javascript/styles/material-v1-dark/config.scss
View File

@ -30,32 +30,10 @@
// Favorite icon settings
// If you exclude 'material-icons.scss', please comment out this section.
.fa {
&.fa-star:before { content: "star" } // Star
//&.fa-star:before { content: "favorite" } // Heart
//&.fa-star:before { content: "plus_one" } // +1
}
$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
.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: #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
}
}
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1

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

@ -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;
}

19
app/javascript/styles/material-v1-dark/icons.scss
View File

@ -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 }

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

@ -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 }

126
app/javascript/styles/material-v1-dark/material-icons.scss
View File

@ -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-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-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-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" }
.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>');
}

75
app/javascript/styles/material-v1-dark/media.scss
View File

@ -26,13 +26,74 @@
}
}
.icon-button.overlayed {
border-radius: 50%;
background: $media-icon-background-color;
color: $media-icon-color;
&:hover {
.media-modal {
&__nav {
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 }
}

9
app/javascript/styles/material-v1-dark/mobile.scss
View File

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

17
app/javascript/styles/material-v1-dark/modal.scss
View File

@ -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 {

28
app/javascript/styles/material-v1-dark/statuses.scss
View File

@ -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 {

12
app/javascript/styles/material-v1-light/_functions.scss Normal file
View File

@ -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);
}

30
app/javascript/styles/material-v1-light/account.scss
View File

@ -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 {
border-radius: 50%;
width: 44px;
height: 44px;
background-size: 44px;
&-overlay {
&-base {
border-radius: 50%;
width: 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;
border-bottom: 4px solid $tab-indicator-color;
color: $text-tab-indicator-active-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 }
}
}
}

17
app/javascript/styles/material-v1-light/button.scss
View File

@ -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;
}

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

@ -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);

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

@ -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);

28
app/javascript/styles/material-v1-light/color/v1-light.scss
View File

@ -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-background-focus-color: transparentize($tab-indicator-color, 0.7);
$tab-indicator-active-color: $top-bar-icon-color;
$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);

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

@ -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);

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

@ -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);

102
app/javascript/styles/material-v1-light/columns.scss
View File

@ -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;
color: $top-bar-icon-color;
background: $tab-background-color;
color: $tab-indicator-color;
font-size: 16px;
span { font-size: 14px }
&.active {
color: $tab-indicator-color;
border-bottom: 4px solid $tab-indicator-color;
color: $tab-indicator-active-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 }

82
app/javascript/styles/material-v1-light/components.scss
View File

@ -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 {
background: $card-background-color;
color: $ui-text-color;
.autosuggest-textarea {
&__textarea {
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 {
border: 2px solid $control-border-color;
width: 20px;
height: 20px;
flex: 0 0 20px;
.no-reduce-motion .spoiler-input {
transition-duration: .2s, .2s;
}
.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 }
}

34
app/javascript/styles/material-v1-light/config.scss
View File

@ -30,32 +30,10 @@
// Favorite icon settings
// If you exclude 'material-icons.scss', please comment out this section.
.fa {
&.fa-star:before { content: "star" } // Star
//&.fa-star:before { content: "favorite" } // Heart
//&.fa-star:before { content: "plus_one" } // +1
}
$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
.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: #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
}
}
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1

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

@ -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;
}

19
app/javascript/styles/material-v1-light/icons.scss
View File

@ -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 }

Some files were not shown because too many files have changed in this diff Show More