@@ -106,6 +109,10 @@ class ColumnSettings extends React.PureComponent {
{this.modeSelect('none')}
)}
+
+
+ } />
+
);
}
diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.js b/app/javascript/mastodon/features/hashtag_timeline/index.js
index 28200e6c2..3e06e3652 100644
--- a/app/javascript/mastodon/features/hashtag_timeline/index.js
+++ b/app/javascript/mastodon/features/hashtag_timeline/index.js
@@ -98,21 +98,21 @@ class HashtagTimeline extends React.PureComponent {
componentDidMount () {
const { dispatch } = this.props;
- const { id, tags } = this.props.params;
+ const { id, tags, local } = this.props.params;
this._subscribe(dispatch, id, tags);
- dispatch(expandHashtagTimeline(id, { tags }));
+ dispatch(expandHashtagTimeline(id, { tags, local }));
}
componentWillReceiveProps (nextProps) {
const { dispatch, params } = this.props;
- const { id, tags } = nextProps.params;
+ const { id, tags, local } = nextProps.params;
- if (id !== params.id || !isEqual(tags, params.tags)) {
+ if (id !== params.id || !isEqual(tags, params.tags) || !isEqual(local, params.local)) {
this._unsubscribe();
this._subscribe(dispatch, id, tags);
- this.props.dispatch(clearTimeline(`hashtag:${id}`));
- 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 () {
diff --git a/app/javascript/mastodon/features/mutes/index.js b/app/javascript/mastodon/features/mutes/index.js
index 3f58a62d2..17ff5c762 100644
--- a/app/javascript/mastodon/features/mutes/index.js
+++ b/app/javascript/mastodon/features/mutes/index.js
@@ -19,6 +19,7 @@ const messages = defineMessages({
const mapStateToProps = state => ({
accountIds: state.getIn(['user_lists', 'mutes', 'items']),
hasMore: !!state.getIn(['user_lists', 'mutes', 'next']),
+ isLoading: state.getIn(['user_lists', 'mutes', 'isLoading'], true),
});
export default @connect(mapStateToProps)
@@ -30,6 +31,7 @@ class Mutes extends ImmutablePureComponent {
dispatch: PropTypes.func.isRequired,
shouldUpdateScroll: PropTypes.func,
hasMore: PropTypes.bool,
+ isLoading: PropTypes.bool,
accountIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
multiColumn: PropTypes.bool,
@@ -44,7 +46,7 @@ class Mutes extends ImmutablePureComponent {
}, 300, { leading: true });
render () {
- const { intl, shouldUpdateScroll, hasMore, accountIds, multiColumn } = this.props;
+ const { intl, shouldUpdateScroll, hasMore, accountIds, multiColumn, isLoading } = this.props;
if (!accountIds) {
return (
@@ -63,6 +65,7 @@ class Mutes extends ImmutablePureComponent {
scrollKey='mutes'
onLoadMore={this.handleLoadMore}
hasMore={hasMore}
+ isLoading={isLoading}
shouldUpdateScroll={shouldUpdateScroll}
emptyMessage={emptyMessage}
bindToDocument={!multiColumn}
diff --git a/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js b/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js
index 73919c39d..d3d8a6507 100644
--- a/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js
+++ b/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js
@@ -24,19 +24,25 @@ class HashtagTimeline extends React.PureComponent {
isLoading: PropTypes.bool.isRequired,
hasMore: PropTypes.bool.isRequired,
hashtag: PropTypes.string.isRequired,
+ local: PropTypes.bool.isRequired,
+ };
+
+ static defaultProps = {
+ local: false,
};
componentDidMount () {
- const { dispatch, hashtag } = this.props;
+ const { dispatch, hashtag, local } = this.props;
- dispatch(expandHashtagTimeline(hashtag));
+ dispatch(expandHashtagTimeline(hashtag, { local }));
}
handleLoadMore = () => {
- const maxId = this.props.statusIds.last();
+ const { dispatch, hashtag, local, statusIds } = this.props;
+ const maxId = statusIds.last();
if (maxId) {
- this.props.dispatch(expandHashtagTimeline(this.props.hashtag, { maxId }));
+ dispatch(expandHashtagTimeline(hashtag, { maxId, local }));
}
}
diff --git a/app/javascript/mastodon/reducers/user_lists.js b/app/javascript/mastodon/reducers/user_lists.js
index a7853452f..e7eef2364 100644
--- a/app/javascript/mastodon/reducers/user_lists.js
+++ b/app/javascript/mastodon/reducers/user_lists.js
@@ -2,12 +2,24 @@ import {
NOTIFICATIONS_UPDATE,
} from '../actions/notifications';
import {
+ FOLLOWERS_FETCH_REQUEST,
FOLLOWERS_FETCH_SUCCESS,
+ FOLLOWERS_FETCH_FAIL,
+ FOLLOWERS_EXPAND_REQUEST,
FOLLOWERS_EXPAND_SUCCESS,
+ FOLLOWERS_EXPAND_FAIL,
+ FOLLOWING_FETCH_REQUEST,
FOLLOWING_FETCH_SUCCESS,
+ FOLLOWING_FETCH_FAIL,
+ FOLLOWING_EXPAND_REQUEST,
FOLLOWING_EXPAND_SUCCESS,
+ FOLLOWING_EXPAND_FAIL,
+ FOLLOW_REQUESTS_FETCH_REQUEST,
FOLLOW_REQUESTS_FETCH_SUCCESS,
+ FOLLOW_REQUESTS_FETCH_FAIL,
+ FOLLOW_REQUESTS_EXPAND_REQUEST,
FOLLOW_REQUESTS_EXPAND_SUCCESS,
+ FOLLOW_REQUESTS_EXPAND_FAIL,
FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
FOLLOW_REQUEST_REJECT_SUCCESS,
} from '../actions/accounts';
@@ -16,12 +28,20 @@ import {
FAVOURITES_FETCH_SUCCESS,
} from '../actions/interactions';
import {
+ BLOCKS_FETCH_REQUEST,
BLOCKS_FETCH_SUCCESS,
+ BLOCKS_FETCH_FAIL,
+ BLOCKS_EXPAND_REQUEST,
BLOCKS_EXPAND_SUCCESS,
+ BLOCKS_EXPAND_FAIL,
} from '../actions/blocks';
import {
+ MUTES_FETCH_REQUEST,
MUTES_FETCH_SUCCESS,
+ MUTES_FETCH_FAIL,
+ MUTES_EXPAND_REQUEST,
MUTES_EXPAND_SUCCESS,
+ MUTES_EXPAND_FAIL,
} from '../actions/mutes';
import {
DIRECTORY_FETCH_REQUEST,
@@ -47,12 +67,13 @@ const normalizeList = (state, type, id, accounts, next) => {
return state.setIn([type, id], ImmutableMap({
next,
items: ImmutableList(accounts.map(item => item.id)),
+ isLoading: false,
}));
};
const appendToList = (state, type, id, accounts, next) => {
return state.updateIn([type, id], map => {
- return map.set('next', next).update('items', list => list.concat(accounts.map(item => item.id)));
+ return map.set('next', next).set('isLoading', false).update('items', list => list.concat(accounts.map(item => item.id)));
});
};
@@ -68,10 +89,22 @@ export default function userLists(state = initialState, action) {
return normalizeList(state, 'followers', action.id, action.accounts, action.next);
case FOLLOWERS_EXPAND_SUCCESS:
return appendToList(state, 'followers', action.id, action.accounts, action.next);
+ case FOLLOWERS_FETCH_REQUEST:
+ case FOLLOWERS_EXPAND_REQUEST:
+ return state.setIn(['followers', action.id, 'isLoading'], true);
+ case FOLLOWERS_FETCH_FAIL:
+ case FOLLOWERS_EXPAND_FAIL:
+ return state.setIn(['followers', action.id, 'isLoading'], false);
case FOLLOWING_FETCH_SUCCESS:
return normalizeList(state, 'following', action.id, action.accounts, action.next);
case FOLLOWING_EXPAND_SUCCESS:
return appendToList(state, 'following', action.id, action.accounts, action.next);
+ case FOLLOWING_FETCH_REQUEST:
+ case FOLLOWING_EXPAND_REQUEST:
+ return state.setIn(['following', action.id, 'isLoading'], true);
+ case FOLLOWING_FETCH_FAIL:
+ case FOLLOWING_EXPAND_FAIL:
+ return state.setIn(['following', action.id, 'isLoading'], false);
case REBLOGS_FETCH_SUCCESS:
return state.setIn(['reblogged_by', action.id], ImmutableList(action.accounts.map(item => item.id)));
case FAVOURITES_FETCH_SUCCESS:
@@ -79,9 +112,15 @@ export default function userLists(state = initialState, action) {
case NOTIFICATIONS_UPDATE:
return action.notification.type === 'follow_request' ? normalizeFollowRequest(state, action.notification) : state;
case FOLLOW_REQUESTS_FETCH_SUCCESS:
- return state.setIn(['follow_requests', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next);
+ return state.setIn(['follow_requests', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next).setIn(['follow_requests', 'isLoading'], false);
case FOLLOW_REQUESTS_EXPAND_SUCCESS:
- return state.updateIn(['follow_requests', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next);
+ return state.updateIn(['follow_requests', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next).setIn(['follow_requests', 'isLoading'], false);
+ case FOLLOW_REQUESTS_FETCH_REQUEST:
+ case FOLLOW_REQUESTS_EXPAND_REQUEST:
+ return state.setIn(['follow_requests', 'isLoading'], true);
+ case FOLLOW_REQUESTS_FETCH_FAIL:
+ case FOLLOW_REQUESTS_EXPAND_FAIL:
+ return state.setIn(['follow_requests', 'isLoading'], false);
case FOLLOW_REQUEST_AUTHORIZE_SUCCESS:
case FOLLOW_REQUEST_REJECT_SUCCESS:
return state.updateIn(['follow_requests', 'items'], list => list.filterNot(item => item === action.id));
@@ -89,10 +128,22 @@ export default function userLists(state = initialState, action) {
return state.setIn(['blocks', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['blocks', 'next'], action.next);
case BLOCKS_EXPAND_SUCCESS:
return state.updateIn(['blocks', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['blocks', 'next'], action.next);
+ case BLOCKS_FETCH_REQUEST:
+ case BLOCKS_EXPAND_REQUEST:
+ return state.setIn(['blocks', 'isLoading'], true);
+ case BLOCKS_FETCH_FAIL:
+ case BLOCKS_EXPAND_FAIL:
+ return state.setIn(['blocks', 'isLoading'], false);
case MUTES_FETCH_SUCCESS:
return state.setIn(['mutes', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['mutes', 'next'], action.next);
case MUTES_EXPAND_SUCCESS:
return state.updateIn(['mutes', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['mutes', 'next'], action.next);
+ case MUTES_FETCH_REQUEST:
+ case MUTES_EXPAND_REQUEST:
+ return state.setIn(['mutes', 'isLoading'], true);
+ case MUTES_FETCH_FAIL:
+ case MUTES_EXPAND_FAIL:
+ return state.setIn(['mutes', 'isLoading'], false);
case DIRECTORY_FETCH_SUCCESS:
return state.setIn(['directory', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['directory', 'isLoading'], false);
case DIRECTORY_EXPAND_SUCCESS:
diff --git a/app/javascript/mastodon/utils/resize_image.js b/app/javascript/mastodon/utils/resize_image.js
index 7196dc96b..710a08f7c 100644
--- a/app/javascript/mastodon/utils/resize_image.js
+++ b/app/javascript/mastodon/utils/resize_image.js
@@ -2,6 +2,45 @@ import EXIF from 'exif-js';
const MAX_IMAGE_PIXELS = 1638400; // 1280x1280px
+const _browser_quirks = {};
+
+// Some browsers will automatically draw images respecting their EXIF orientation
+// while others won't, and the safest way to detect that is to examine how it
+// is done on a known image.
+// See https://github.com/w3c/csswg-drafts/issues/4666
+// and https://github.com/blueimp/JavaScript-Load-Image/commit/1e4df707821a0afcc11ea0720ee403b8759f3881
+const dropOrientationIfNeeded = (orientation) => new Promise(resolve => {
+ switch (_browser_quirks['image-orientation-automatic']) {
+ case true:
+ resolve(1);
+ break;
+ case false:
+ resolve(orientation);
+ break;
+ default:
+ // black 2x1 JPEG, with the following meta information set:
+ // - EXIF Orientation: 6 (Rotated 90ยฐ CCW)
+ const testImageURL =
+ 'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' +
+ 'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' +
+ 'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' +
+ 'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/x' +
+ 'ABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAA' +
+ 'AAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==';
+ const img = new Image();
+ img.onload = () => {
+ const automatic = (img.width === 1 && img.height === 2);
+ _browser_quirks['image-orientation-automatic'] = automatic;
+ resolve(automatic ? 1 : orientation);
+ };
+ img.onerror = () => {
+ _browser_quirks['image-orientation-automatic'] = false;
+ resolve(orientation);
+ };
+ img.src = testImageURL;
+ }
+});
+
const getImageUrl = inputFile => new Promise((resolve, reject) => {
if (window.URL && URL.createObjectURL) {
try {
@@ -38,7 +77,11 @@ const getOrientation = (img, type = 'image/png') => new Promise(resolve => {
EXIF.getData(img, () => {
const orientation = EXIF.getTag(img, 'Orientation');
- resolve(orientation);
+ if (orientation !== 1) {
+ dropOrientationIfNeeded(orientation).then(resolve).catch(() => resolve(orientation));
+ } else {
+ resolve(orientation);
+ }
});
});
diff --git a/app/javascript/styles/mastodon-material-dark.scss b/app/javascript/styles/mastodon-material-dark.scss
new file mode 100644
index 000000000..901a441be
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark.scss
@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+@import 'application';
+@import 'mastodon-material-dark/account';
+@import 'mastodon-material-dark/basics';
+@import 'mastodon-material-dark/button';
+//@import 'mastodon-material-dark/cards';
+@import 'mastodon-material-dark/columns';
+@import 'mastodon-material-dark/components';
+@import 'mastodon-material-dark/config';
+@import 'mastodon-material-dark/control';
+@import 'mastodon-material-dark/emoji-picker';
+@import 'mastodon-material-dark/icons';
+@import 'mastodon-material-dark/material-icons';
+@import 'mastodon-material-dark/media';
+@import 'mastodon-material-dark/mobile';
+@import 'mastodon-material-dark/modal';
+@import 'mastodon-material-dark/statuses';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/_functions.scss b/app/javascript/styles/mastodon-material-dark/_functions.scss
new file mode 100644
index 000000000..54750d029
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/_functions.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+@function to-string($value) {
+ @return inspect($value);
+}
+
+// convert hex color code to svg styled color code
+@function svg-color ($color) {
+ @return '%23' + string.slice(to-string($color), 2, 7);
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/_mixins.scss b/app/javascript/styles/mastodon-material-dark/_mixins.scss
new file mode 100644
index 000000000..5f573e339
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/_mixins.scss
@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+
+$shadow-color-1: rgba(0,0,0,.2);
+$shadow-color-2: rgba(0,0,0,.14);
+$shadow-color-3: rgba(0,0,0,.12);
+
+@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
+@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
+@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
+@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
+@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
+@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
+@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
+@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
+@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
+@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
+@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
+@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
+@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
+@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
+@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
+@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
+
+@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
diff --git a/app/javascript/styles/mastodon-material-dark/account.scss b/app/javascript/styles/mastodon-material-dark/account.scss
new file mode 100644
index 000000000..b43194729
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/account.scss
@@ -0,0 +1,143 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.account {
+ border-bottom: 1px solid $border-color;
+
+ .account__display-name { color: $primary-text-color }
+ .account__display-name strong { color: $secondary-text-color }
+
+ &__avatar {
+ border-radius: $avater-radius;
+ width: 40px;
+ height: 40px;
+
+ &-overlay {
+ &-base {
+ border-radius: 50%;
+ width: 44px;
+ height: 44px;
+ background-size: 44px;
+ }
+
+ &-overlay { border-radius: $avater-radius }
+ }
+ }
+
+ &__header {
+ &__bar {
+ background: $card-background-color;
+ padding: 8px;
+ border-bottom: 1px solid $border-color;
+
+ .avatar .account__avatar { border: none }
+ }
+
+ &__tabs {
+ padding: 8px;
+
+ &__name {
+ padding: 8px;
+
+ h1 {
+ color: $primary-text-color;
+
+ small { color: $secondary-text-color }
+ }
+ }
+
+ &__buttons {
+ .icon-button {
+ border: none;
+ border-radius: 50%;
+ padding: 0;
+ }
+ }
+ }
+
+ &__extra {
+ margin-top: 0;
+
+ &__links {
+ color: $secondary-text-color;
+ padding: 10px 0;
+
+ a {
+ color: $secondary-text-color;
+ padding: 4px 12px;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+
+ &__bio {
+ margin: 0;
+
+ .account__header {
+ &__content {
+ color: $primary-text-color;
+ padding: 8px;
+ }
+
+ &__fields {
+ border: 1px solid $border-color;
+ border-radius: 4px;
+
+ .verified {
+ border: none;
+ background: $verified-background-color;
+
+ a,
+ &__mark { color: $primary-text-color }
+ }
+
+ dl {
+ border-bottom: 1px solid $border-color;
+
+ &:first-child .verified { border-radius: 0 }
+
+ &:last-child { border-bottom: 0 }
+ }
+
+ dt {
+ color: $primary-text-color;
+ background: $list-background-inactive-color;
+ }
+
+ dd { color: $primary-text-color }
+ }
+ }
+ }
+ }
+
+ &__section-headline {
+ background: $text-tab-background-color;
+ border-bottom: 1px solid $border-color;
+
+ a {
+ padding: 16px 0;
+ color: $text-tab-indicator-color;
+
+ &.active {
+ color: $text-tab-indicator-active-color;
+ border-bottom: 4px solid $text-tab-indicator-active-color;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $text-tab-indicator-background-focus-color }
+ }
+
+ &:hover { background: $text-tab-indicator-background-hover-color }
+ }
+ }
+}
+
+.account-role {
+ padding: 4px 8px;
+ border-radius: 17px;
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/basics.scss b/app/javascript/styles/mastodon-material-dark/basics.scss
new file mode 100644
index 000000000..5c7c3dc04
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/basics.scss
@@ -0,0 +1,24 @@
+@charset "UTF-8";
+@import 'config';
+
+
+body { background: $background-color }
+
+// Chrome & Safari scroll bar
+::-webkit-scrollbar-thumb {
+ background: $scroll-bar-thumb-color;
+
+ &:hover { background: $scroll-bar-thumb-hover-color }
+ &:active { background: $scroll-bar-thumb-active-color }
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track:hover,
+::-webkit-scrollbar-track:active {
+ background: transparent !important;
+}
+
+// Firefox scroll bar
+html {
+ scrollbar-color: $scroll-bar-thumb-color transparent;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/button.scss b/app/javascript/styles/mastodon-material-dark/button.scss
new file mode 100644
index 000000000..38fd1a3c1
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/button.scss
@@ -0,0 +1,95 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+
+ &.active {
+ color: $icon-button-active-color;
+
+ &:hover { color: $icon-button-active-hover-color }
+ }
+
+ &.disabled { color: $disabled-icon-color }
+
+ &.inverted {
+ color: $icon-button-color;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-background-hover-color;
+ }
+ }
+
+ &.overlayed {
+ border-radius: 50%;
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+
+ &:hover {
+ background: $media-icon-background-color;
+ color: $media-icon-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-background-hover-color;
+ }
+
+ &:active,
+ &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+ font-size: 12px;
+
+ &:hover {
+ background-color: $icon-background-hover-color;
+ color: $icon-button-hover-color;
+ }
+}
+
+.button,
+.button:active,
+.button:focus {
+ background-color: $contained-button-color;
+ border-radius: $button-radius;
+}
+
+.button:hover {
+ @include shadow-2dp;
+ background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+ background: $contained-button-color;
+ margin: 2px;
+
+ &:hover { background: $contained-button-hover-color }
+
+ .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.confirmation-modal__cancel-button {
+ box-shadow: none;
+ background-color: transparent;
+ margin: 0 8px;
+ color: $text-button-color;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
+}
+
+.spoiler-button__overlay__label {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/cards.scss b/app/javascript/styles/mastodon-material-dark/cards.scss
new file mode 100644
index 000000000..96988f2c9
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/cards.scss
@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.column {
+ box-shadow: none !important;
+ margin: 2px 0 !important;
+ padding: 8px !important;
+}
+
+.status {
+ border-bottom: 0 !important;
+ border-radius: $card-radius;
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+ @include shadow-1dp;
+ margin: 8px 2px;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+ @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
similarity index 77%
rename from app/javascript/styles/material-v1-dark/color/mastodon-dark.scss
rename to app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
index 14ef148f4..47f990072 100644
--- a/app/javascript/styles/material-v1-dark/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
@@ -27,7 +27,7 @@ $menu-background-color: #d9e1e8;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #444b5d;
+$card-background-color: #313543;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #282c37;
@@ -60,7 +60,7 @@ $top-bar-icon-active-color: $icon-hover-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -103,5 +103,27 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.7);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);
\ No newline at end of file
+$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);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/columns.scss b/app/javascript/styles/mastodon-material-dark/columns.scss
new file mode 100644
index 000000000..689028581
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/columns.scss
@@ -0,0 +1,461 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.column {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 10px 8px;
+ border-radius: $card-radius;
+
+ &>.scrollable { background: $list-background-color }
+
+ &:last-child { box-shadow: none }
+}
+
+.column-header {
+ background: $top-bar-color;
+ border-radius: $bar-radius;
+
+ > button {
+ padding: 16px 0 16px 16px;
+ color: $top-bar-text-color;
+ }
+
+ &>.column-header__back-button { color: $top-bar-icon-color }
+
+ &.active {
+ .column-header__icon {
+ color: $secondary-color;
+ text-shadow: none;
+ }
+ }
+
+ &__icon {
+ margin-right: 16px;
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ }
+
+ &__buttons { height: 56px }
+
+ &__button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ margin: 8px 10px;
+ padding: 10px 12px;
+ border-radius: 50%;
+
+ &.active {
+ color: $top-bar-icon-active-color;
+ background: $icon-background-active-color;
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &__setting-btn {
+ color: $icon-button-color;
+ padding: 8px 0;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ text-decoration: none;
+ }
+
+ .fa { font-size: 20px }
+
+ span { vertical-align: middle }
+ }
+
+ &__setting-arrows {
+ font-size: 16px;
+ border-bottom: 8px;
+
+ .column-header__setting-btn {
+ padding: 8px;
+ border-radius: 50%;
+
+ &:last-child { padding-right: 8px }
+ }
+ }
+
+ &__wrapper {
+ @include shadow-4dp;
+ border-radius: $bar-radius;
+
+ .announcements { border-top: 1px solid $border-color }
+
+ &.active {
+ @include shadow-4dp;
+
+ &::before { background: transparent }
+ }
+ }
+
+ &__collapsible {
+ color: $ui-text-color;
+ background: $card-background-color;
+ border-top: 1px solid $border-color;
+
+ &-inner {
+ background: $card-background-color;
+ padding: 16px;
+ }
+
+ &.collapsed { border-top: none }
+ }
+
+ &__back-button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 8px;
+ margin: auto 0;
+ border-radius: 50%;
+
+ span { display: none }
+ }
+}
+
+.column-subheading {
+ color: $section-text-color;
+ background: $background-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+}
+
+.column-link {
+ color: $ui-text-color;
+ background: $background-color;
+ padding: 16px;
+ border-radius: $nav-drawer-item-radius;
+
+ &:hover { background: $list-background-hover-color }
+
+ &:active,
+ &:focus { background: $list-background-active-color }
+
+ &__icon {
+ margin-right: 32px;
+ font-size: 20px;
+ }
+
+ &--transparent {
+ &.active {
+ color: $ui-text-color;
+ background: $menu-background-active-color;
+
+ &:hover { background: $menu-background-active-hover-color }
+
+ .fa { color: $icon-color }
+ }
+
+ &:hover {
+ color: $ui-text-color;
+
+ .fa { color: $icon-color }
+ }
+ }
+
+ .fa { color: $icon-color }
+}
+
+.column-settings {
+ &__section {
+ color: $section-text-color;
+ margin-bottom: 0;
+ margin-top: 8px;
+ }
+
+ &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 16px;
+
+ span { visibility: hidden } // hide "back" string
+}
+
+.column-inline-form {
+ padding: 16px 0 16px 16px;
+ background: $card-background-color;
+
+ .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+ color: $primary-text-color;
+ background: $search-bar-color;
+ border-radius: $bar-radius;
+
+ &::placeholder { color: $tips-text-color }
+
+ &:focus {
+ @include shadow-1dp;
+ background: $search-bar-focus-color;
+ }
+}
+
+.empty-column-indicator {
+ color: $secondary-text-color;
+ background: $card-background-color;
+ font-size: 16px;
+}
+
+.conversation {
+ border-bottom: 1px solid $border-color;
+ padding: 12px;
+ background: $list-background-inactive-color;
+
+ &--unread {
+ background: $list-background-color;
+
+ .conversation__content__relative-time { color: $info-text-color }
+ }
+
+ &__unread { background: $primary-color }
+
+ &__avatar { padding: 0 16px 0 0 }
+
+ &__content {
+ padding: 0;
+
+ &__relative-time {
+ font-size: 14px;
+ color: $info-text-color;
+ }
+
+ &__names,
+ &__names a {
+ color: $primary-text-color;
+ font-size: 16px;
+ }
+ }
+}
+
+// read status in notification column
+.muted {
+ .status {
+ &__content {
+ color: $read-primary-text-color;
+
+ p { color: $read-primary-text-color }
+
+ a { color: $read-secondary-text-color }
+ }
+
+ &__display-name strong { color: $read-primary-text-color }
+ }
+
+ .poll {
+ color: $read-primary-text-color;
+
+ &__chart {
+ background: $read-poll-bar-color;
+
+ &.leading { background: $read-poll-bar-leading-color }
+ }
+
+ &__footer,
+ &__link { color: $read-ui-text-color }
+ }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+ color: $icon-color;
+ padding: 16px;
+
+ &:hover { background: $menu-background-hover-color }
+}
+
+.getting-started {
+ background: $background-color;
+ color: $ui-text-color;
+
+ &__wrapper {
+ background: $background-color;
+ height: auto !important;
+ border-bottom: 1px solid $border-color;
+ }
+
+ &__footer {
+ padding: 16px;
+
+ p {
+ color: $secondary-text-color;
+ font-size: 12px;
+ margin-bottom: 16px;
+ }
+
+ a { color: $ui-text-color }
+
+ p a { color: $link-text-color }
+ }
+
+ &__trends {
+ background: $background-color;
+ margin-bottom: 0;
+
+ h4 {
+ color: $section-text-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+ border-bottom: none;
+ }
+ }
+}
+
+.trends__item {
+ padding: 16px;
+ border-bottom: none;
+
+ &__name {
+ color: $secondary-text-color;
+ font-size: 12px;
+
+ a { color: $primary-text-color }
+ }
+
+ &__current {
+ padding-right: 16px;
+ margin-left: 4px;
+ color: $secondary-text-color;
+ }
+
+ &__sparkline path {
+ stroke: $primary-color;
+ fill: $primary-color;
+ fill-opacity: 0.5;
+ }
+}
+
+.setting-toggle {
+ &__label {
+ color: $ui-text-color;
+ margin: 8px 8px 8px 14px;
+ }
+}
+
+.announcements {
+ background: $card-background-color;
+ padding: 0;
+
+ &__container { color: $primary-text-color }
+
+ &__item {
+ padding: 16px;
+ font-size: 16px;
+
+ &__unread { background: $badge-color }
+ }
+}
+
+.reactions-bar {
+ .emoji-button {
+ color: $icon-button-color;
+ font-size: 20px;
+
+ &:hover { color: $icon-button-hover-color }
+
+ &:active { color: $icon-button-active-color }
+ }
+
+ &__item {
+ background: $contained-chip-color;
+ border-radius: 17px;
+ margin: 2px 4px;
+
+ &.active {
+ background-color: $contained-chip-selected-color;
+ .reactions-bar__item__count { color: $ui-text-color }
+ }
+
+ &__emoji {
+ width: 24px;
+ height: 24px;
+ margin: 4px 0 4px 2px;
+ }
+
+ &__count {
+ font-size: 16px;
+ margin: 0 8px;
+ color: $secondary-text-color;
+ }
+
+ &:hover { background: $contained-chip-hover-color }
+ }
+}
+
+.notification {
+ &__filter-bar {
+ background: $tab-background-color;
+ border-bottom: 1px solid $border-color;
+ z-index: 1;
+
+ button {
+ background: $tab-background-color;
+ color: $tab-indicator-color;
+ font-size: 16px;
+
+ span { font-size: 14px }
+
+ &.active {
+ color: $tab-indicator-active-color;
+ border-bottom: 4px solid $tab-indicator-active-color;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $tab-indicator-background-focus-color }
+ }
+
+ &:hover { background: $tab-indicator-background-hover-color }
+ }
+ }
+
+ &__message {
+ color: $secondary-text-color;
+ margin: 0 16px 0 70px;
+ font-size: 16px;
+ }
+
+ &__display-name:hover { color: inherit }
+}
+
+.notification-favourite .status.status-direct {
+ background: transparent;
+
+ .icon-button.disabled { color: $disabled-icon-color }
+}
+
+// read notification
+.notification.notification-favourite.focusable,
+.notification.notification-follow.focusable { background: $list-background-inactive-color }
+
+.relationship-tag {
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+ font-size: 12px;
+ border-radius: 17px;
+ padding: 4px 8px;
+ opacity: 1;
+}
+
+.react-swipeable-view-container { height: auto }
+
+.attachment-list__list a { color: $secondary-text-color }
+
+.focusable { background: transparent !important }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/components.scss b/app/javascript/styles/mastodon-material-dark/components.scss
new file mode 100644
index 000000000..92d2801f4
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/components.scss
@@ -0,0 +1,389 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.drawer {
+ &__header {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ border-radius: $nav-bar-radius;
+ justify-content: space-around;
+
+ a { transition: none }
+
+ a:hover {
+ background: $icon-background-hover-color;
+ border-radius: 50%;
+ }
+ }
+
+ &__tab {
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ margin: 10px auto 10px;
+ padding: 8px;
+ flex: none;
+ height: 20px;
+ width: 20px;
+ border-bottom: none;
+ text-align: justify;
+
+ &:hover { color: $top-bar-icon-hover-color }
+ }
+
+ &__pager {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ }
+
+ &__inner {
+ background: $card-background-color;
+
+ &.darker { background: $card-background-color }
+
+ &__mastodon { background: $card-background-color }
+ }
+}
+
+.search {
+ &__input {
+ background: $search-bar-color;
+ color: $tips-text-color;
+ border-radius: $search-bar-radius;
+ padding: 12px 12px 12px 40px;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ color: $search-bar-text-color;
+ }
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__icon {
+ .fa {
+ color: $icon-color;
+ font-size: 20px;
+ top: 12px;
+ right: unset;
+ left: 12px;
+ height: 6px;
+ transition: none;
+
+ &.active { opacity: 1 }
+
+ &-search {
+ transform: none;
+ opacity: 1;
+ }
+ &-times-circle.active {
+ right: 10px;
+ left: unset;
+ transform: none;
+ }
+ }
+ }
+}
+
+.search-popout {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ border-radius: 0px $bar-radius;
+ border-top: 1px solid $border-color;
+ margin-top: 0;
+ color: $tips-text-color;
+
+ h4 {
+ color: $secondary-text-color;
+ }
+
+ em {
+ color: $search-bar-text-color;
+ }
+}
+
+.search-results {
+ &__header {
+ color: $secondary-text-color;
+ background-color: $card-background-color;
+ padding: 16px;
+
+ .fa { margin-right: 8px }
+ }
+
+ &__section {
+ h5 {
+ background: $card-background-color;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
+ color: $section-text-color;
+
+ .fa { margin-right: 8px }
+ }
+ }
+}
+
+.navigation-bar {
+ color: $secondary-text-color;
+ padding: 14px;
+
+ strong {
+ color: $ui-text-color;
+ }
+}
+
+.navigation-panel hr {
+ border-top: 1px solid $border-color;
+ margin: 8px 0;
+}
+
+.dropdown-menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ padding: 8px 0;
+ border-radius: $menu-radius;
+
+ &__arrow { visibility: hidden }
+
+ &__item a {
+ font-size: 14px;
+ padding: 8px 16px;
+ background: $menu-background-color;
+ color: $menu-text-color;
+
+ &:hover, &:active {
+ background: $menu-background-hover-color;
+ color: $menu-text-color;
+ }
+ }
+
+ &__separator {
+ margin: 8px 0;
+ border-bottom: 1px solid $border-color;
+ }
+}
+
+.compose-form {
+ .autosuggest-textarea {
+ &__textarea {
+ background: $card-background-color;
+ color: $ui-text-color;
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__suggestions {
+ @include shadow-1dp;
+ background: $menu-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+ font-size: 16px;
+ padding: 8px 0;
+
+ &__item {
+ padding: 8px;
+ border-radius: 0;
+
+ &:hover { background: $menu-background-hover-color }
+
+ &.selected,
+ &:focus,
+ &:active { background: $menu-background-active-color }
+ }
+ }
+ }
+
+ .spoiler-input__input {
+ color: $ui-text-color;
+ background: $card-background-color;
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ .compose-form {
+ &__warning {
+ @include shadow-1dp;
+ color: $secondary-text-color;
+ background: $card-background-color;
+ padding: 16px;
+
+ a { color: $link-text-color }
+ }
+
+ &__modifiers {
+ background: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__buttons-wrapper {
+ background: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__poll-wrapper {
+ border-top: 1px solid $border-color;
+
+ ul { padding: 12px }
+
+ select {
+ color: $ui-text-color;
+ background-color: $background-color;
+ border: 0;
+
+ &:focus { border-color: $border-active-color }
+ }
+
+ .button.button-secondary {
+ box-shadow: none;
+ color: $outlined-button-color;
+ border-color: $outlined-button-color;
+
+ &:hover { background-color: $outlined-button-hover-color }
+
+ &:active { background-color: $outlined-button-active-color }
+
+ &:focus { background-color: $outlined-button-color }
+
+
+ }
+ }
+
+ &__utilBtns { padding-top: 0 }
+
+ &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+ }
+}
+
+.no-reduce-motion .spoiler-input {
+ transition-duration: .2s, .2s;
+}
+
+
+.poll {
+ &__input {
+ border: 2px solid $control-border-color;
+ width: 20px;
+ height: 20px;
+ flex: 0 0 20px;
+ }
+
+ &__text input[type=text] {
+ color: $ui-text-color;
+ background: $background-color;
+ border: 1px solid $border-color;
+ padding: 8px 12px;
+
+ &:focus { border-color: $border-active-color }
+ }
+
+ &__chart {
+ border-radius: 0;
+ background: $poll-bar-color;
+
+ &.leading { background: $poll-bar-leading-color }
+ }
+
+ &__footer {
+ padding-top: 8px;
+ padding-bottom: 0;
+ color: $ui-text-color;
+ }
+
+ &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+ &.active .privacy-dropdown__value.active {
+ background: $icon-background-hover-color;
+ border-radius: 50%;
+ box-shadow: none;
+
+ .icon-button { color: $icon-button-active-color }
+ }
+
+ &__dropdown {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $dialog-radius;
+ }
+
+ &__option {
+ color: $icon-color;
+ padding: 8px 16px;
+
+ &__icon {
+ font-size: 20px;
+ margin-right: 12px;
+ }
+
+ &__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+
+ &.active {
+ background: $menu-background-active-color;
+ color: $icon-hover-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+
+ &:hover {
+ background: $menu-background-active-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+
+ &:hover {
+ background: $menu-background-hover-color;
+ color: $icon-hover-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+}
+
+.character-counter {
+ color: $secondary-text-color;
+}
+
+.reply-indicator {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ background: $card-background-color;
+ padding: 16px;
+
+ &__header { margin-bottom: 4px }
+
+ &__display {
+ &-name {
+ color: $primary-text-color;
+ padding-right: 24px;
+ }
+
+ &-avatar { margin-right: 8px }
+ }
+
+ &__content { color: $primary-text-color }
+}
+
+.attachment-list {
+ &__list a { color: $secondary-text-color }
+
+ &.compact .fa { color: $icon-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/config.scss b/app/javascript/styles/mastodon-material-dark/config.scss
new file mode 100644
index 000000000..77d7982e4
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/config.scss
@@ -0,0 +1,39 @@
+@charset "UTF-8";
+
+
+// Color scheme
+@import 'color/mastodon-dark';
+
+
+// Layout profile
+@import 'layout/material-v1';
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@font-face {
+ font-family: "Material Icons";
+ src:
+ local("Material Icons"),
+ //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
+ //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
+ url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
+}
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+}*/
+
+
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
+
+$favorite-icon-color: #ffd600; // Star
+//$favorite-icon-color: #ff4081; // Heart
+//$favorite-icon-color: #db4437; // +1
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/control.scss b/app/javascript/styles/mastodon-material-dark/control.scss
new file mode 100644
index 000000000..7bd251291
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/control.scss
@@ -0,0 +1,69 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.react-toggle {
+ width: 36px;
+ height: 16px;
+ border-radius: 15px;
+
+ &-track {
+ background-color: $toggle-track-color;
+ margin: 4px;
+ width: 36px;
+ height: 16px;
+
+ &-check { visibility: hidden }
+ &-x { visibility: hidden }
+ }
+
+ &-thumb {
+ @include shadow-1dp;
+ width: 20px;
+ height: 20px;
+ border: 0;
+ background-color: $toggle-thumb-color;
+ }
+
+ &--checked {
+ .react-toggle{
+ &-track { background-color: $toggle-track-active-color }
+
+ &-thumb {
+ background-color: $toggle-thumb-active-color;
+ left: 22px;
+ }
+ }
+
+ &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+ }
+
+ &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+ padding: 8px 0;
+
+ &__input {
+ border: 2px solid $border-color;
+
+ &.checked {
+ border-color: $icon-button-active-color;
+ background: $icon-button-active-color;
+ padding: 3px;
+ background-clip: content-box;
+ }
+ }
+}
+
+.compose-form__sensitive-button .checkbox {
+ border: 2px solid $border-color;
+ border-radius: 2px;
+
+ &.active {
+ border-color: $primary-color;
+ background: $primary-color;
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/emoji-picker.scss b/app/javascript/styles/mastodon-material-dark/emoji-picker.scss
new file mode 100644
index 000000000..2c17701cf
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/emoji-picker.scss
@@ -0,0 +1,90 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+ &__menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $menu-radius;
+ }
+
+ &__modifiers__menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $menu-radius;
+
+ button {
+ padding: 8px;
+ }
+ }
+}
+
+.emoji-mart {
+ width: 388px !important;
+ font-size: 14px;
+ color: $ui-text-color;
+
+ &-bar {
+ border: 0 solid $border-color;
+
+ &:first-child {
+ background: $menu-background-color;
+ }
+ }
+
+ &-anchors {
+ color: $icon-button-color;
+ padding: 0;
+ }
+
+ &-anchor {
+ padding: 10px 4px;
+
+ &-selected {
+ color: $icon-button-active-color;
+ }
+
+ &-bar {
+ background-color: $tab-indicator-active-color;
+ }
+
+ &:hover {
+ color: $icon-button-hover-color;
+ }
+ }
+
+ &-search {
+ background: $menu-background-color;
+
+ input {
+ outline: none;
+ padding: 8px;
+ background: $search-bar-color;
+ color: $ui-text-color;
+ border: 0;
+ border-radius: $search-bar-radius;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ }
+ }
+ }
+
+ &-scroll {
+ padding: 0 8px 8px;
+ background: $menu-background-color;
+ }
+
+ &-category-label span {
+ padding: 4px 6px;
+ background: $menu-background-color;
+ }
+
+ &-emoji:hover::before {
+ background-color: $icon-background-hover-color;
+ }
+
+ &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/icons.scss b/app/javascript/styles/mastodon-material-dark/icons.scss
new file mode 100644
index 000000000..beca11a6f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/icons.scss
@@ -0,0 +1,48 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+ &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub } // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle } // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+ font-size: 20px;
+ margin-right: 16px;
+}
+
+.icon-with-badge__badge {
+ background: $badge-color;
+ border: none;
+ padding: 2px 6px;
+ border-radius: 12px;
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/layout/material-v1.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/layout/material-v1.scss
rename to app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
diff --git a/app/javascript/styles/mastodon-material-dark/material-icons.scss b/app/javascript/styles/mastodon-material-dark/material-icons.scss
new file mode 100644
index 000000000..e473dfe31
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/material-icons.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+@import 'config';
+@import 'functions';
+
+
+.fa {
+ &.fa-bars,
+ &.fa-navicon,
+ &.fa-reorder,
+ &.fa-globe,
+ &.fa-cog,
+ &.fa-cogs,
+ &.fa-gears,
+ &.fa-sign-out,
+ &.fa-search,
+ &.fa-times,
+ &.fa-times-circle,
+ &.fa-close,
+ &.fa-remove,
+ &.fa-chevron-down,
+ &.fa-ellipsis-v,
+ &.fa-paperclip,
+ &.fa-tasks,
+ &.fa-plus,
+ &.fa-unlock,
+ &.fa-lock,
+ &.fa-envelope,
+ &.fa-home,
+ &.fa-bullhorn,
+ &.fa-sliders,
+ &.fa-chevron-left,
+ &.fa-chevron-right,
+ &.fa-reply,
+ &.fa-reply-all,
+ &.fa-share-alt,
+ &.fa-star,
+ &.fa-bookmark,
+ &.fa-ellipsis-h,
+ &.fa-bell,
+ &.fa-eraser,
+ &.fa-users,
+ &.fa-file-text,
+ &.fa-user-plus,
+ &.fa-address-book,
+ &.fa-address-book-o,
+ &.fa-list,
+ &.fa-list-ul,
+ &.fa-eye,
+ &.fa-eye-slash,
+ &.fa-pencil,
+ &.fa-trash,
+ &.fa-play,
+ &.fa-external-link,
+ &.fa-retweet,
+ &.fa-link,
+ &.fa-pause,
+ &.fa-volume-up,
+ &.fa-volume-off,
+ &.fa-expand,
+ &.fa-download,
+ &.fa-arrows-alt,
+ &.fa-compress,
+ &.fa-user-times,
+ &.fa-check {
+ font-family: "Material Icons";
+ }
+}
+
+.fa {
+ &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
+ &.fa-globe::before { content: "public" }
+ &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
+ &.fa-sign-out::before { content: "exit_to_app" }
+ &.fa-search::before { content: "search" }
+ &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
+ &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
+ &.fa-paperclip::before { content: "attach_file" }
+ &.fa-tasks::before { content: "poll" }
+ &.fa-plus::before { content: "add" }
+ &.fa-unlock::before { content: "lock_open" }
+ &.fa-lock::before { content: "lock" }
+ &.fa-envelope::before { content: "mail" }
+ &.fa-home::before { content: "home" }
+ &.fa-bullhorn::before { content: "announcement" }
+ &.fa-sliders::before { content: "tune" }
+ &.fa-chevron-left::before { content: "arrow_back" }
+ &.fa-chevron-right::before { content: "arrow_forward" }
+ &.fa-reply::before { content: "reply" }
+ &.fa-reply-all::before { content: "reply_all" }
+ &.fa-share-alt::before { content: "share" }
+ &.fa-star::before { content: $favorite-icon }
+ &.fa-bookmark::before { content: "bookmark" }
+ &.fa-ellipsis-h::before { content: "more_horiz" }
+ &.fa-bell::before { content: "notifications" }
+ &.fa-eraser::before { content: "clear_all" }
+ &.fa-users::before { content: "people" }
+ &.fa-file-text::before { content: "web" }
+ &.fa-user-plus::before { content: "person_add" }
+ &.fa-address-book::before { content: "explore" }
+ &.fa-address-book-o::before { content: "explore" }
+ &.fa-list::before { content: "list" }
+ &.fa-list-ul::before { content: "list" }
+ &.fa-eye::before { content: "visibility" }
+ &.fa-eye-slash::before { content : "visibility_off" }
+ &.fa-pencil::before { content: "create" }
+ &.fa-trash::before { content: "delete" }
+ &.fa-play::before { content: "play_arrow" }
+ &.fa-external-link::before { content: "open_in_new" }
+ &.fa-retweet::before { content: "repeat" }
+ &.fa-link::before { content: "link" }
+ &.fa-pause::before { content: "pause" }
+ &.fa-volume-up::before { content: "volume_up" }
+ &.fa-volume-off::before { content: "volume_off" }
+ &.fa-expand::before { content: "web_asset" }
+ &.fa-download::before { content: "file_download" }
+ &.fa-arrows-alt::before { content: "fullscreen" }
+ &.fa-compress::before { content: "fullscreen_exit" }
+ &.fa-user-times::before { content: "delete" }
+ &.fa-check::before { content: "check" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+ .fa.fa-bookmark::before { content: "bookmark_border" }
+ &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+ .fa.fa-star::before { content: $favorite-icon-border }
+
+ &.active,
+ &.active.activate {
+ .fa.fa-star::before { content: $favorite-icon }
+ }
+}
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+ height: 18px;
+ width: 18px;
+ transition: background-position .3s steps(1);
+ background-image: url('data:image/svg+xml;utf8,