diff --git a/.github/dependabot.yml b/.github/dependabot.yml
deleted file mode 100644
index c4cd48878..000000000
--- a/.github/dependabot.yml
+++ /dev/null
@@ -1,22 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
- - package-ecosystem: npm
- directory: "/"
- schedule:
- interval: weekly
- open-pull-requests-limit: 99
- allow:
- - dependency-type: direct
-
- - package-ecosystem: bundler
- directory: "/"
- schedule:
- interval: weekly
- open-pull-requests-limit: 99
- allow:
- - dependency-type: direct
diff --git a/Gemfile b/Gemfile
index 614aeb205..0c23d08d8 100644
--- a/Gemfile
+++ b/Gemfile
@@ -99,6 +99,8 @@ gem 'json-ld'
gem 'json-ld-preloaded', '~> 3.1'
gem 'rdf-normalize', '~> 0.4'
+gem 'redcarpet', "~> 3.4.0"
+
group :development, :test do
gem 'fabrication', '~> 2.22'
gem 'fuubar', '~> 2.5'
diff --git a/Gemfile.lock b/Gemfile.lock
index 8cd4a97f1..378333036 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -486,6 +486,14 @@ GEM
rdf-normalize (0.4.0)
rdf (~> 3.1)
redis (4.2.5)
+ redcarpet (3.4.0)
+ redis-actionpack (5.2.0)
+ actionpack (>= 5, < 7)
+ redis-rack (>= 2.1.0, < 3)
+ redis-store (>= 1.1.0, < 2)
+ redis-activesupport (5.2.0)
+ activesupport (>= 3, < 7)
+ redis-store (>= 1.3, < 2)
redis-namespace (1.8.1)
redis (>= 3.0.4)
regexp_parser (2.1.1)
@@ -762,6 +770,7 @@ DEPENDENCIES
rails-i18n (~> 6.0)
rails-settings-cached (~> 0.6)
rdf-normalize (~> 0.4)
+ redcarpet (~> 3.4.0)
redis (~> 4.2)
redis-namespace (~> 1.8)
resolv (~> 0.1.0)
diff --git a/app/controllers/api/v2/media_controller.rb b/app/controllers/api/v2/media_controller.rb
index 0c1baf01d..de2c72313 100644
--- a/app/controllers/api/v2/media_controller.rb
+++ b/app/controllers/api/v2/media_controller.rb
@@ -1,5 +1,8 @@
# frozen_string_literal: true
+class Api::V2::MediaController < Api::V1::MediaController
+end
+__END__
class Api::V2::MediaController < Api::V1::MediaController
def create
@media_attachment = current_account.media_attachments.create!({ delay_processing: true }.merge(media_attachment_params))
diff --git a/app/javascript/fonts/MaterialIcons-Regular.ttf b/app/javascript/fonts/MaterialIcons-Regular.ttf
new file mode 100644
index 000000000..e50801b3b
Binary files /dev/null and b/app/javascript/fonts/MaterialIcons-Regular.ttf differ
diff --git a/app/javascript/images/logo.svg b/app/javascript/images/logo.svg
index 034a9c221..82a6025a7 100644
--- a/app/javascript/images/logo.svg
+++ b/app/javascript/images/logo.svg
@@ -1 +1,17 @@
-
+
+
+
diff --git a/app/javascript/images/logo_alt.svg b/app/javascript/images/logo_alt.svg
index 102d4c787..4c04c93b8 100644
--- a/app/javascript/images/logo_alt.svg
+++ b/app/javascript/images/logo_alt.svg
@@ -1 +1,16 @@
-
+
+
+
diff --git a/app/javascript/mastodon/actions/UtilBtns.js b/app/javascript/mastodon/actions/UtilBtns.js
new file mode 100644
index 000000000..52ccc6877
--- /dev/null
+++ b/app/javascript/mastodon/actions/UtilBtns.js
@@ -0,0 +1,71 @@
+import { changeCompose } from '../actions/compose';
+
+
+
+export const UTILBTNS_GOJI = 'UTILBTNS_GOJI';
+export const UTILBTNS_HARUKIN = 'UTILBTNS_HARUKIN';
+
+
+
+export function submitGoji (textarea) {
+ return function (dispatch, getState) {
+ if (!textarea.value) {
+ let text = [
+ "#ゴジモリィィィィイイ",
+ ":goji:"
+ ].join("\r\n");
+
+ dispatch(submitGojiRequest());
+ dispatch(changeCompose(text));
+
+ textarea.focus();
+ }
+ }
+}
+
+export function submitGojiRequest () {
+ return {
+ type: UTILBTNS_GOJI
+ }
+}
+
+export function submitHarukin (textarea) {
+ return function (dispatch, getState) {
+ const HARUKINS = [":harukin: ", ":harukin_old: ", ":harukin_ika: ", ":harukin_tako: "];
+ const MAX = 6;
+
+ if (!textarea.value) {
+ let text = "";
+
+ let quantity = Math.round(Math.random() * MAX + 1);
+ let type = Math.round(Math.random() * (HARUKINS.length - 1));
+
+ let harukin = HARUKINS[type];
+
+ switch (quantity) {
+ default:
+ text = [
+ harukin.repeat(quantity),
+ "🔥 ".repeat(quantity)
+ ].join("\r\n");
+
+ break;
+
+ case MAX + 1:
+ text = `${harukin}💕\r\n`.repeat(6);
+ break;
+ }
+
+ dispatch(submitHarukinRequest());
+ dispatch(changeCompose(text));
+
+ textarea.focus();
+ }
+ }
+}
+
+export function submitHarukinRequest () {
+ return {
+ type: UTILBTNS_HARUKIN
+ }
+}
diff --git a/app/javascript/mastodon/components/announcement_icon_button.js b/app/javascript/mastodon/components/announcement_icon_button.js
new file mode 100644
index 000000000..0de58c6f7
--- /dev/null
+++ b/app/javascript/mastodon/components/announcement_icon_button.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import Motion from 'react-motion/lib/Motion';
+import spring from 'react-motion/lib/spring';
+import PropTypes from 'prop-types';
+
+class IconButton extends React.PureComponent {
+
+ static propTypes = {
+ className: PropTypes.string,
+ title: PropTypes.string.isRequired,
+ icon: PropTypes.string.isRequired,
+ onClick: PropTypes.func,
+ size: PropTypes.number,
+ active: PropTypes.bool,
+ style: PropTypes.object,
+ activeStyle: PropTypes.object,
+ disabled: PropTypes.bool,
+ inverted: PropTypes.bool,
+ animate: PropTypes.bool,
+ overlay: PropTypes.bool,
+ };
+
+ static defaultProps = {
+ size: 18,
+ active: false,
+ disabled: false,
+ animate: false,
+ overlay: false,
+ };
+
+ handleClick = (e) => {
+ e.preventDefault();
+
+ if (!this.props.disabled) {
+ this.props.onClick(e);
+ }
+ }
+
+ render () {
+ const style = {
+ fontSize: `${this.props.size}px`,
+ width: `${this.props.size * 1.28571429}px`,
+ height: `${this.props.size * 1.28571429}px`,
+ lineHeight: `${this.props.size}px`,
+ ...this.props.style,
+ ...(this.props.active ? this.props.activeStyle : {}),
+ };
+
+ const classes = ['icon-button'];
+
+ if (this.props.active) {
+ classes.push('active');
+ }
+
+ if (this.props.disabled) {
+ classes.push('disabled');
+ }
+
+ if (this.props.inverted) {
+ classes.push('inverted');
+ }
+
+ if (this.props.overlay) {
+ classes.push('overlayed');
+ }
+
+ if (this.props.className) {
+ classes.push(this.props.className);
+ }
+
+ return (
+
+ {({ rotate }) =>
+
+ }
+
+ );
+ }
+
+}
+
+export default IconButton;
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 9981f2449..7dbbb99cc 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -121,6 +121,14 @@ class StatusActionBar extends ImmutablePureComponent {
}
}
+ handleBookmarkClick = () => {
+ this.props.onBookmark(this.props.status);
+ }
+
+ handleReblogClick = (e) => {
+ this.props.onReblog(this.props.status, e);
+ }
+
_openInteractionDialog = type => {
window.open(`/interact/${this.props.status.get('id')}?type=${type}`, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
}
@@ -328,6 +336,7 @@ class StatusActionBar extends ImmutablePureComponent {
{shareButton}
+

diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js
index 1b9994612..67cb7db1a 100644
--- a/app/javascript/mastodon/features/getting_started/index.js
+++ b/app/javascript/mastodon/features/getting_started/index.js
@@ -18,6 +18,7 @@ import TrendsContainer from './containers/trends_container';
const messages = defineMessages({
home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
+ admin_notifications: { id: 'tabs_bar.admin_notifications', defaultMessage: 'Admin Notifications' },
public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
@@ -107,9 +108,10 @@ class GettingStarted extends ImmutablePureComponent {
if (profile_directory) {
navItems.push(
,
+
,
);
- height += 48;
+ height += 48*2;
}
navItems.push(
@@ -120,9 +122,10 @@ class GettingStarted extends ImmutablePureComponent {
} else if (profile_directory) {
navItems.push(
,
+
,
);
- height += 48;
+ height += 48*2;
}
if (multiColumn && !columns.find(item => item.get('id') === 'HOME')) {
diff --git a/app/javascript/mastodon/locales/ja.json b/app/javascript/mastodon/locales/ja.json
index 697f41196..ecc938ac3 100644
--- a/app/javascript/mastodon/locales/ja.json
+++ b/app/javascript/mastodon/locales/ja.json
@@ -72,7 +72,7 @@
"column.lists": "リスト",
"column.mutes": "ミュートしたユーザー",
"column.notifications": "通知",
- "column.pins": "固定されたトゥート",
+ "column.pins": "固定された投稿",
"column.public": "連合タイムライン",
"column_back_button.label": "戻る",
"column_header.hide_settings": "設定を隠す",
@@ -90,7 +90,7 @@
"compose_form.hashtag_warning": "このトゥートは公開設定ではないのでハッシュタグの一覧に表示されません。公開トゥートだけがハッシュタグで検索できます。",
"compose_form.lock_disclaimer": "あなたのアカウントは{locked}になっていません。誰でもあなたをフォローすることができ、フォロワー限定の投稿を見ることができます。",
"compose_form.lock_disclaimer.lock": "承認制",
- "compose_form.placeholder": "今なにしてる?",
+ "compose_form.placeholder": "ちょうどL.A.に到着しました。",
"compose_form.poll.add_option": "追加",
"compose_form.poll.duration": "アンケート期間",
"compose_form.poll.option_placeholder": "項目 {number}",
@@ -105,6 +105,8 @@
"compose_form.spoiler.marked": "本文は警告の後ろに隠されます",
"compose_form.spoiler.unmarked": "本文は隠されていません",
"compose_form.spoiler_placeholder": "ここに警告を書いてください",
+ "compose_form.utilBtns_goji": "誤字盛!",
+ "compose_form.utilBtns_harukin": "はるきん焼却",
"confirmation_modal.cancel": "キャンセル",
"confirmations.block.block_and_report": "ブロックし通報",
"confirmations.block.confirm": "ブロック",
@@ -190,7 +192,8 @@
"getting_started.invite": "招待",
"getting_started.open_source_notice": "Mastodonはオープンソースソフトウェアです。誰でもGitHub ( {github} ) から開発に参加したり、問題を報告したりできます。",
"getting_started.security": "アカウント設定",
- "getting_started.terms": "プライバシーポリシー",
+ "getting_started.security": "セキュリティ",
+ "getting_started.terms": "利用規約とプライバシーポリシー",
"hashtag.column_header.tag_mode.all": "と {additional}",
"hashtag.column_header.tag_mode.any": "か {additional}",
"hashtag.column_header.tag_mode.none": "({additional} を除く)",
@@ -200,6 +203,7 @@
"hashtag.column_settings.tag_mode.any": "いずれかを含む",
"hashtag.column_settings.tag_mode.none": "これらを除く",
"hashtag.column_settings.tag_toggle": "このカラムに追加のタグを含める",
+ "home.column_settings.advanced": "高度な設定",
"home.column_settings.basic": "基本設定",
"home.column_settings.show_reblogs": "ブースト表示",
"home.column_settings.show_replies": "返信表示",
@@ -281,7 +285,8 @@
"navigation_bar.filters": "フィルター設定",
"navigation_bar.follow_requests": "フォローリクエスト",
"navigation_bar.follows_and_followers": "フォロー・フォロワー",
- "navigation_bar.info": "このサーバーについて",
+ "navigation_bar.generate_qrcode": "プロフィールのQRコードを生成",
+ "navigation_bar.info": "Yづドンについて",
"navigation_bar.keyboard_shortcuts": "ホットキー",
"navigation_bar.lists": "リスト",
"navigation_bar.logout": "ログアウト",
@@ -291,7 +296,12 @@
"navigation_bar.preferences": "ユーザー設定",
"navigation_bar.public_timeline": "連合タイムライン",
"navigation_bar.security": "セキュリティ",
- "notification.favourite": "{name}さんがあなたのトゥートをお気に入りに登録しました",
+ "notification.and_n_others": "and {count, plural, one {# other} other {# others}}",
+ "notification.and_n_others": "と、他 {count} 件",
+ "navigation_bar.announcements": "運営からのお知らせ",
+ "navigation_bar.trends": "トレンド",
+ "navigation_bar.bookmarks": "ブックマーク",
+ "notification.favourite": "{name}さんがあなたのトゥートに╰( ^o^)╮-=ニ=一=三★しました",
"notification.follow": "{name}さんにフォローされました",
"notification.follow_request": "{name} さんがあなたにフォローリクエストしました",
"notification.mention": "{name}さんがあなたに返信しました",
@@ -351,6 +361,7 @@
"privacy.unlisted.long": "誰でも閲覧可、公開TLに非表示",
"privacy.unlisted.short": "未収載",
"refresh": "更新",
+ "qr_modal.description": "QRコードを読み取って簡単にプロフィールにアクセスしましょう。",
"regeneration_indicator.label": "読み込み中…",
"regeneration_indicator.sublabel": "ホームタイムラインは準備中です!",
"relative_time.days": "{number}日前",
@@ -422,6 +433,7 @@
"status.unpin": "プロフィールへの固定を解除",
"suggestions.dismiss": "隠す",
"suggestions.header": "興味あるかもしれません…",
+ "tabs_bar.admin_notifications": "Adminからのお知らせ",
"tabs_bar.federated_timeline": "連合",
"tabs_bar.home": "ホーム",
"tabs_bar.local_timeline": "ローカル",
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 8ebc45b62..4a4975a21 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -26,3 +26,6 @@
@import 'mastodon/dashboard';
@import 'mastodon/rtl';
@import 'mastodon/accessibility';
+
+@import 'markdown';
+@import 'astarte';
diff --git a/app/javascript/styles/astarte.scss b/app/javascript/styles/astarte.scss
new file mode 100644
index 000000000..66507b944
--- /dev/null
+++ b/app/javascript/styles/astarte.scss
@@ -0,0 +1,59 @@
+
+ .announcements {
+ padding: 0 10px;
+
+ li {
+ display: flex;
+ padding: 10px;
+ color: #282c37;
+ background: darken($white, 10%);
+ border-radius: 4px;
+
+ & + li {
+ margin-top: 10px;
+ }
+ }
+ }
+
+ .announcements__admin {
+ width: 100%;
+ position: relative;
+
+ p {
+ padding: 0 5px;
+ font-size: 14px;
+ }
+ }
+
+ .announcements__icon {
+ display: inline-block;
+ position: absolute;
+ margin: -5px 5px;
+ right: 10px;
+ }
+
+ .announcements__body {
+ width: 100%;
+ position: relative;
+
+ p {
+ padding: 0 5px;
+ font-size: 14px;
+ }
+
+ a {
+ display: inline-block;
+ float: right;
+ clear: both;
+ color: #282c37;
+ background: darken($white, 5%);
+ text-decoration: none;
+ padding: 1px 10px 0;
+ border: solid 1px #282c37;
+ font-size: 10px;
+ font-weight: 600;
+ border-radius: 4px;
+ margin-top: 5px;
+ }
+ }
+
diff --git a/app/javascript/styles/contrast.scss b/app/javascript/styles/contrast.scss
index 5b43aecbe..31805363c 100644
--- a/app/javascript/styles/contrast.scss
+++ b/app/javascript/styles/contrast.scss
@@ -1,3 +1,5 @@
@import 'contrast/variables';
@import 'application';
@import 'contrast/diff';
+
+@import 'markdown';
diff --git a/app/javascript/styles/markdown.scss b/app/javascript/styles/markdown.scss
new file mode 100644
index 000000000..be08de0cd
--- /dev/null
+++ b/app/javascript/styles/markdown.scss
@@ -0,0 +1,266 @@
+.status__content {
+
+ font-family: inherit;
+
+ h1{
+ color: #ec840d;
+ font-weight: bold;
+ font-size: 1.6em;
+ padding: 0.5em;
+ display: inline-block;
+ line-height: 1.3;
+ background: #dbebf8;
+ vertical-align: middle;
+ border-radius: 25px 25px 25px 25px;
+ text-align: center;
+ border-bottom: solid 3px #ff0000;
+ }
+
+ h2{
+ color: #ec840d;
+ font-weight: bold;
+ font-size: 1.5em;
+ padding: 0.5em;
+ display: inline-block;
+ line-height: 1.3;
+ background: #dbebf8;
+ vertical-align: middle;
+ border-radius: 25px 25px 25px 25px;
+ text-align: center;
+ border-bottom: solid 3px #fffb00;
+ }
+
+ h3{
+ color: #ec840d;
+ font-weight: bold;
+ font-size: 1.4em;
+ padding: 0.5em;
+ display: inline-block;
+ line-height: 1.3;
+ background: #dbebf8;
+ vertical-align: middle;
+ border-radius: 25px 25px 25px 25px;
+ text-align: center;
+ border-bottom: solid 3px #2bff00;
+ }
+
+ h4{
+ color: #ec840d;
+ font-weight: bold;
+ font-size: 1.3em;
+ padding: 0.5em;
+ display: inline-block;
+ line-height: 1.3;
+ background: #dbebf8;
+ vertical-align: middle;
+ border-radius: 25px 25px 25px 25px;
+ text-align: center;
+ border-bottom: solid 3px #00ffea;
+ }
+
+ h5{
+ color: #ec840d;
+ font-weight: bold;
+ font-size: 1.2em;
+ padding: 0.5em;
+ display: inline-block;
+ line-height: 1.3;
+ background: #dbebf8;
+ vertical-align: middle;
+ border-radius: 25px 25px 25px 25px;
+ text-align: center;
+ border-bottom: solid 3px #0004ff;
+ }
+
+ h6{
+ color: #ec840d;
+ font-weight: bold;
+ font-size: 1.1em;
+ padding: 0.5em;
+ display: inline-block;
+ line-height: 1.3;
+ background: #dbebf8;
+ vertical-align: middle;
+ border-radius: 25px 25px 25px 25px;
+ text-align: center;
+ border-bottom: solid 3px #7700ff;
+ }
+
+ em{
+ font-style: italic;
+ }
+
+ strong{
+ font-weight: bold;
+ }
+
+ code{
+ display: block;
+ border-left: 2px solid;
+ border-color: #079903;
+ color: $white;
+ padding-left: 10px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ margin-left: 5px;
+ background-color: #000000;
+
+ .positive{
+ color: #5bda57;
+ }
+
+ .negative{
+ color: #ff4949;
+ }
+
+ .rust-fanc{
+ color: #ba7eff;
+ }
+
+ .ruby-func{
+ color: #24a8e6;
+ }
+
+ .rust-macro{
+ color: #d2ff6a;
+ }
+
+ .contents{
+ color: #ff9925;
+ }
+ }
+
+ pre{
+ display: inline-block;
+ font-family: 'Noto Sans Japanese', sans-serif;
+ font-weight: 400;
+ }
+
+ p ~ blockquote {
+ margin-top: -8px;
+ }
+
+ blockquote{
+ padding-left: 8px;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ color: $primary-text-color;
+ background-color: $ui-base-color;
+ display: block;
+ border-left: 4px solid $classic-highlight-color;
+ }
+
+ ul.md-contents {
+ border: double 4px #21b384;
+ padding: 0.5em 1em 0.5em 2.3em;
+ position: relative;
+ }
+ ul li.md-contents {
+ line-height: 1.5;
+ padding: 0.2em 0;
+ list-style-type: none!important;
+ }
+ ul li.md-contents:before {
+ font-family: FontAwesome;
+ content: "\f0a4";
+ position: absolute;
+ left : 1em;
+ color: #21b384;
+ }
+
+ ol.md-contents {
+ border: double 4px #ff954f;
+ padding: 0.5em 1em 0.5em 1em;
+ position: relative;
+ list-style: inside decimal;
+ }
+
+ ol li.md-contents {
+ line-height: 1.5;
+ padding: 0.2em 0;
+ }
+
+ hr {
+ border-width: 2px 0px 0px 0px;
+ border-style: dashed;
+ border-color: #ff7676;
+ height: 1px;
+ }
+
+ p>a>img{
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+
+ a>img{
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+
+ p>a{
+ color: #1FBFF9;
+ }
+
+ a{
+ color: #1FBFF9;
+ }
+
+ sup{
+ font-size: 75.5%;
+ vertical-align: top;
+ position: relative;
+ top: -0.5em;
+ }
+
+ sub{
+ font-size: 75.5%;
+ vertical-align: bottom;
+ position: relative;
+ top: 0.5em;
+ }
+
+ small{
+ font-size: 50.0%;
+ vertical-align: bottom;
+ position: relative;
+ }
+
+ table {
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ color: $classic-highlight-color;
+ display: block;
+ width: 100%;
+ overflow: auto;
+ border-spacing: 0;
+ border-collapse: collapse;
+ }
+
+ table tr{
+ background-color: #000000;
+ }
+
+ table th, table td{
+ padding: 6px 13px;
+ border: 1px solid $classic-highlight-color;
+ }
+
+ table th{
+ font-weight: 600;
+ }
+
+ table thead tr{
+ background-color: $black;
+ }
+
+ td, th{
+ padding: 0;
+ }
+
+ span.img_FTL {
+ display: none;
+ }
+
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-auto.scss b/app/javascript/styles/mastodon-auto.scss
new file mode 100644
index 000000000..ccb5d24eb
--- /dev/null
+++ b/app/javascript/styles/mastodon-auto.scss
@@ -0,0 +1,2 @@
+@use 'application';
+@media (prefers-color-scheme: light) { @import 'mastodon-light'; }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss
index 756a12d86..c99938bfa 100644
--- a/app/javascript/styles/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-light.scss
@@ -1,3 +1,5 @@
@import 'mastodon-light/variables';
@import 'application';
@import 'mastodon-light/diff';
+
+@import 'markdown';
diff --git a/app/javascript/styles/mastodon-material-auto.scss b/app/javascript/styles/mastodon-material-auto.scss
new file mode 100644
index 000000000..189b2891c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-auto.scss
@@ -0,0 +1,2 @@
+@use 'mastodon-material-dark';
+@media (prefers-color-scheme: light) { @import 'mastodon-material-light'; }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark.scss b/app/javascript/styles/mastodon-material-dark.scss
new file mode 100644
index 000000000..84558ad33
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material/profiles/mastodon-material-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light.scss b/app/javascript/styles/mastodon-material-light.scss
new file mode 100644
index 000000000..9e1ac730e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material/profiles/mastodon-material-light/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/color/black.scss b/app/javascript/styles/mastodon-material/color/black.scss
new file mode 100644
index 000000000..67c8cd7d5
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/color/black.scss
@@ -0,0 +1,154 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// 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;
+$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
+
+// Background-color
+$bg-color: #000000;
+$menu-bg-color: #121212;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #121212;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #000000;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-active-hover-color: lighten($list-bg-color, 16%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$dropdown-field-bg-color: lighten($bg-color, 6%);
+$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
+$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: #ffffff;
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: darken($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// 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: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$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);
+$disabled-button-color: #cccccc;
+$floating-action-button-color: $primary-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: #1e1e1e;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-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: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-bg-color: #121212;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+$loading-indicator-color: $primary-color;
+
+// 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($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material/color/mastodon-dark.scss
new file mode 100644
index 000000000..626de6075
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/color/mastodon-dark.scss
@@ -0,0 +1,154 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// 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;
+$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
+
+// Background-color
+$bg-color: #191b22;
+$menu-bg-color: #d9e1e8;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #313543;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #282c37;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-active-hover-color: lighten($list-bg-color, 16%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$dropdown-field-bg-color: lighten($bg-color, 6%);
+$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
+$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #42485a;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-bg-hover-color: lighten($bg-color, 14%);
+$icon-bg-active-color: lighten($bg-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;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// 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: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$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);
+$disabled-button-color: #cccccc;
+$floating-action-button-color: $primary-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-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
+$scroll-bar-thumb-active-color: lighten($bg-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-active-color: $top-bar-icon-color;
+$tab-bg-color: #1f232b;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-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-bg-color: $tab-bg-color;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+$loading-indicator-color: $primary-color;
+
+// 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($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/color/mastodon-light.scss b/app/javascript/styles/mastodon-material/color/mastodon-light.scss
new file mode 100644
index 000000000..833dca194
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/color/mastodon-light.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// 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;
+$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
+
+// Background-color
+$bg-color: #eff3f5;
+$menu-bg-color: $bg-color;
+$menu-bg-hover-color: darken($bg-color, 6%);
+$menu-bg-active-color: darken($bg-color, 10%);
+$menu-bg-active-hover-color: darken($bg-color, 16%);
+$card-bg-color: #ffffff;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: #ffffff;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-active-hover-color: darken($list-bg-color, 16%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$dropdown-field-bg-color: darken($bg-color, 6%);
+$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
+$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: darken($bg-color, 4%);
+$icon-bg-active-color: darken($bg-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;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// 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: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$text-button-color: $primary-color;
+$text-button-hover-color: lighten($text-button-color, 36%);
+$text-button-focus-color: lighten($text-button-color, 30%);
+$disabled-button-color: #cccccc;
+$floating-action-button-color: $primary-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-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// 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: $bg-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: #e6ebf0;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-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-bg-color: $tab-bg-color;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+$loading-indicator-color: $primary-color;
+
+// 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($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/color/plus-classic.scss b/app/javascript/styles/mastodon-material/color/plus-classic.scss
new file mode 100644
index 000000000..cc8b89f2f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/color/plus-classic.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// 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;
+$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
+
+// Background-color
+$bg-color: #fafafa;
+$menu-bg-color: #ffffff;
+$menu-bg-hover-color: darken($menu-bg-color, 6%);
+$menu-bg-active-color: darken($menu-bg-color, 10%);
+$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
+$card-bg-color: #ffffff;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: #ffffff;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-active-hover-color: darken($list-bg-color, 16%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$dropdown-field-bg-color: darken($bg-color, 6%);
+$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
+$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: transparentize(#000000, 0.9);
+$icon-bg-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-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// 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: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$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);
+$disabled-button-color: #cccccc;
+$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-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($bg-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: #db4437;
+$search-bar-color: darken($bg-color, 6%);
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-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-bg-color: #ffffff;
+$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+$loading-indicator-color: $primary-color;
+
+// 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($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/color/v1-dark.scss b/app/javascript/styles/mastodon-material/color/v1-dark.scss
new file mode 100644
index 000000000..d0bde6154
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/color/v1-dark.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// 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;
+$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
+
+// Background-color
+$bg-color: #303030;
+$menu-bg-color: #424242;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #424242;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #424242;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-active-hover-color: lighten($list-bg-color, 16%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$dropdown-field-bg-color: lighten($bg-color, 6%);
+$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
+$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: #ffffff;
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: darken($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-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// 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: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$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);
+$disabled-button-color: #cccccc;
+$floating-action-button-color: $primary-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: #2e2e2e;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
+$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($bg-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-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-bg-color: #424242;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+$loading-indicator-color: $primary-color;
+
+// 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($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/color/v1-light.scss b/app/javascript/styles/mastodon-material/color/v1-light.scss
new file mode 100644
index 000000000..58bb0ad4e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/color/v1-light.scss
@@ -0,0 +1,154 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// 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;
+$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
+
+// Background-color
+$bg-color: #fafafa;
+$menu-bg-color: #ffffff;
+$menu-bg-hover-color: darken($menu-bg-color, 6%);
+$menu-bg-active-color: darken($menu-bg-color, 10%);
+$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
+$card-bg-color: #ffffff;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: #ffffff;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-active-hover-color: darken($list-bg-color, 16%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$dropdown-field-bg-color: darken($bg-color, 6%);
+$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
+$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: transparentize(#000000, 0.9);
+$icon-bg-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%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// 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: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$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);
+$disabled-button-color: #cccccc;
+$floating-action-button-color: $primary-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-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($bg-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($bg-color, 6%);
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-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-bg-color: #ffffff;
+$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+$loading-indicator-color: $primary-color;
+
+// 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($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/color/v2-dark.scss b/app/javascript/styles/mastodon-material/color/v2-dark.scss
new file mode 100644
index 000000000..842c6f648
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/color/v2-dark.scss
@@ -0,0 +1,154 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// 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;
+$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
+
+// Background-color
+$bg-color: #121212;
+$menu-bg-color: #1e1e1e;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #1e1e1e;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #1e1e1e;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-active-hover-color: lighten($list-bg-color, 16%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$dropdown-field-bg-color: lighten($bg-color, 6%);
+$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
+$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: #ffffff;
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: darken($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// 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: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$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);
+$disabled-button-color: #cccccc;
+$floating-action-button-color: #272727;
+$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: $primary-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: #5f6368;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-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, 18%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-bg-color: #1e1e1e;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+$loading-indicator-color: $primary-color;
+
+// 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($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/color/v2-light.scss b/app/javascript/styles/mastodon-material/color/v2-light.scss
new file mode 100644
index 000000000..10e7a0b91
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/color/v2-light.scss
@@ -0,0 +1,154 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// 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;
+$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
+
+// Background-color
+$bg-color: #ffffff;
+$menu-bg-color: $bg-color;
+$menu-bg-hover-color: darken($menu-bg-color, 6%);
+$menu-bg-active-color: darken($menu-bg-color, 10%);
+$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
+$card-bg-color: $bg-color;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: $bg-color;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-active-hover-color: darken($list-bg-color, 16%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$dropdown-field-bg-color: darken($bg-color, 6%);
+$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
+$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: transparentize(#000000, 0.9);
+$icon-bg-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;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// 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: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$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);
+$disabled-button-color: #cccccc;
+$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: $primary-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-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($bg-color, 20%);
+$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
+$scroll-bar-thumb-active-color: darken($bg-color, 38%);
+
+// App bar color
+$top-bar-color: $bg-color;
+$search-bar-color: darken($bg-color, 6%);
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-bg-color: #ffffff;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+$loading-indicator-color: $primary-color;
+
+// 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($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/layout/material-v1.scss b/app/javascript/styles/mastodon-material/layout/material-v1.scss
new file mode 100644
index 000000000..661cc55a4
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/layout/material-v1.scss
@@ -0,0 +1,74 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// Button radius settings
+$button-radius: 2px;
+
+
+// Card radius settings
+$card-radius: 2px;
+
+
+// Dialog radius settings
+$dialog-radius: 2px;
+
+
+// Menu radius settings
+$menu-radius: 2px;
+
+
+// Media radius settings
+$media-radius: 0;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 0;
+
+
+// Avatar cropping settings
+$avatar-radius: 50%; // Rounded cropping
+//$avatar-radius: 2px // Material v1 square
+//$avatar-radius: $card-radius // Fit to card radius
+
+
+// Chip settings
+$chip-type: contained; // Material v1 styled contained chip
+
+
+// Button on statuses
+$button-on-status: text; // Material v1 styled text button
+//$button-on-status: outlined; // Material v2 styled outlined button
+
+
+// Button shadow
+$button-shadow: true; // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;
+
+
+// CW text field border
+$cw-area-border: underlined;
+//$cw-area-border: none;
+
+// Compose text field border
+$compose-area-border: none;
+//$compose-area-border: underlined;
+
+// Other text field border
+$other-text-area-border: underlined;
+//$other-text-area-border: none;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/layout/material-v2.scss b/app/javascript/styles/mastodon-material/layout/material-v2.scss
new file mode 100644
index 000000000..98a3285c7
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/layout/material-v2.scss
@@ -0,0 +1,87 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+//$nav-bar-radius: 28px; // full radius
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+//$search-bar-radius: 21px; // full rounded
+
+
+// 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;
+
+
+// Media radius settings
+$media-radius: 0;
+//$media-radius: 2px;
+
+
+// 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
+
+
+// Avatar cropping settings
+$avatar-radius: 50%; // Rounded cropping
+//$avatar-radius: $card-radius // Fit to card radius
+//$avatar-radius: 2px // Material v1 square
+//$avatar-radius: 8px // Material v2 square
+
+
+// Chip settings
+$chip-type: outlined; // Material v2 styled outlined chip
+//$outlined-chip: contained; // Material v1 styled contained chip
+
+
+// Button on statuses
+$button-on-status: text; // Material v1 styled text button
+//$button-on-status: outlined; // Material v2 styled outlined button
+
+
+// Button shadow
+$button-shadow: true; // Material v1 styled colored button with shadow
+//$button-shadow: false; // Material v2 styled colored button without shadow
+
+
+// Floating Action Button size
+$fab-size: 56px; // Regular
+//$fab-size: 40px; // Mini
+
+
+// CW text field border
+$cw-area-border: none;
+//$cw-area-border: underlined;
+//$cw-area-border: outlined;
+
+// Compose text field border
+$compose-area-border: none;
+//$compose-area-border: underlined;
+//$compose-area-border: outlined;
+
+// Other text field border
+$other-text-area-border: underlined;
+//$other-text-area-border: outlined;
+//$other-text-area-border: none;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/plugins/astarte.scss b/app/javascript/styles/mastodon-material/plugins/astarte.scss
new file mode 100644
index 000000000..4e4ff54ae
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/plugins/astarte.scss
@@ -0,0 +1,21 @@
+.announcements {
+ li {
+ padding: 8px 16px;
+ background: $card-bg-color;
+ color: $primary-text-color;
+ border-radius: $card-radius;
+ border: 1px solid $border-color;
+ }
+
+ &__icon {
+ margin: 0;
+ right: 16px;
+ height: 20px;
+
+ .icon-button {
+ @include icon-button;
+
+ &:hover { background: transparent }
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/plugins/cards.scss b/app/javascript/styles/mastodon-material/plugins/cards.scss
new file mode 100644
index 000000000..48faf1ea1
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/plugins/cards.scss
@@ -0,0 +1,31 @@
+.column {
+ box-shadow: none !important;
+ margin: 2px 0 !important;
+ padding: 8px !important;
+
+ > .scrollable { background: $bg-color }
+}
+
+.status {
+ border-bottom: 0;
+ border-radius: $card-radius;
+ background: $card-bg-color;
+
+ &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+ @include shadow-1dp;
+ margin: 8px 2px;
+ border-radius: $card-radius;
+ background: $card-bg-color;
+}
+
+.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/mastodon-material/plugins/dense.scss b/app/javascript/styles/mastodon-material/plugins/dense.scss
new file mode 100644
index 000000000..070bd9d69
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/plugins/dense.scss
@@ -0,0 +1,85 @@
+.drawer {
+ &__header { height: 48px }
+
+ &__tab { margin: 6px auto 6px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+ height: 48px;
+
+ > button { padding: 12px 16px }
+
+ &__buttons { height: 48px }
+
+ &__button { margin: 6px }
+
+ &__back-button { margin: 6px }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.tabs-bar__link { padding: 12px 16px 8px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+ padding: 12px 16px;
+
+ p { margin-bottom: 12px }
+}
+
+.compose-form {
+ .compose-form {
+ &__publish { padding-top: 8px }
+
+ &__buttons-wrapper {
+ .icon-button,
+ .text-icon-button { padding: 4px }
+ }
+ }
+}
+
+.status {
+ padding: 8px 8px 4px 66px;
+
+ &__expand { width: 66px }
+
+ &__info { padding-right: 0 }
+
+ &__avatar {
+ left: 8px;
+ top: 10px;
+ }
+
+ &__content { padding-top: 2px }
+
+ &__action-bar-button {
+ margin: 0 4px;
+
+ &.icon-button { padding: 4px }
+ }
+
+ &__action-bar-dropdown {
+ width: 28px !important;
+ height: 28px !important;
+ margin: 0 4px;
+
+ .icon-button { padding: 4px }
+ }
+}
+
+.detailed-status {
+ padding: 14px;
+
+ &__meta { margin-top: 14px }
+
+ &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/plugins/plus.scss b/app/javascript/styles/mastodon-material/plugins/plus.scss
new file mode 100644
index 000000000..36ef1cebb
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/plugins/plus.scss
@@ -0,0 +1,30 @@
+.status__action-bar-button {
+ background: #eeeeee;
+ width: 28px !important;
+ height: 28px !important;
+
+ .fa { vertical-align: bottom }
+}
+
+// exception
+.media-modal__overlay .picture-in-picture__footer .icon-button,
+.status__action-bar-button.icon-button--with-counter { background: transparent }
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.activate,
+.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+ left: -34px;
+
+ .star-icon {
+ border-radius: 50%;
+ width: 28px;
+ height: 28px;
+ vertical-align: baseline;
+ font-size: 18px;
+
+ &.fa-fw::before { vertical-align: middle }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/color.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/config.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/config.scss
new file mode 100644
index 000000000..12e2b691f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/mastodon-dark.scss';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/layout.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/loader.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss
new file mode 100644
index 000000000..e17916a49
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+//@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/color.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/config.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/config.scss
new file mode 100644
index 000000000..8e59a4fb4
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/mastodon-light.scss';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/layout.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/loader.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss
new file mode 100644
index 000000000..e17916a49
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+//@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/color.scss b/app/javascript/styles/mastodon-material/profiles/material-black/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/config.scss b/app/javascript/styles/mastodon-material/profiles/material-black/config.scss
new file mode 100644
index 000000000..46d921e34
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/black';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/material-black/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/layout.scss b/app/javascript/styles/mastodon-material/profiles/material-black/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/loader.scss b/app/javascript/styles/mastodon-material/profiles/material-black/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss b/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss
new file mode 100644
index 000000000..e17916a49
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+//@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/color.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/config.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/config.scss
new file mode 100644
index 000000000..1197655f3
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/v2-dark.scss';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/layout.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/loader.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss
new file mode 100644
index 000000000..e17916a49
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+//@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/color.scss b/app/javascript/styles/mastodon-material/profiles/material-light/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/config.scss b/app/javascript/styles/mastodon-material/profiles/material-light/config.scss
new file mode 100644
index 000000000..986befe53
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/config.scss
@@ -0,0 +1 @@
+// Add your settings below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/material-light/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/layout.scss b/app/javascript/styles/mastodon-material/profiles/material-light/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/loader.scss b/app/javascript/styles/mastodon-material/profiles/material-light/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss b/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss
new file mode 100644
index 000000000..e17916a49
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+//@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/color.scss b/app/javascript/styles/mastodon-material/profiles/plus/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/config.scss b/app/javascript/styles/mastodon-material/profiles/plus/config.scss
new file mode 100644
index 000000000..56cd971c1
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/plus-classic';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/plus/icon_config.scss
new file mode 100644
index 000000000..d2a44c6d5
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/icon_config.scss
@@ -0,0 +1,9 @@
+// Add your icon customization below
+
+$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";
+
+$favorite-icon-color: #ffffff;
+
+$reply-icon: "comment";
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/layout.scss b/app/javascript/styles/mastodon-material/profiles/plus/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/loader.scss b/app/javascript/styles/mastodon-material/profiles/plus/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss b/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss
new file mode 100644
index 000000000..89adaca8a
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+@import '../../plugins/cards';
+@import '../../plugins/dense';
+@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss
new file mode 100644
index 000000000..b273c0652
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss
@@ -0,0 +1,50 @@
+// Add your customization below
+
+$primary-color: #7e5f66;
+
+$section-text-color: lighten($primary-color, 10%);
+
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+$icon-color: #d2d2d2;
+$icon-hover-color: #ffffff;
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: lighten($primary-color, 20%);
+
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: lighten($primary-color, 20%);
+$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: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$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: $primary-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-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+$border-active-color: $primary-color;
+
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+$loading-indicator-color: $primary-color;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss
new file mode 100644
index 000000000..fb818fab0
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/v2-dark';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/layout.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/layout.scss
new file mode 100644
index 000000000..0c3d2a73e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/layout.scss
@@ -0,0 +1,9 @@
+// Add your customization below
+
+$avatar-radius: 2px;
+
+$button-on-status: outlined;
+
+$cw-area-border: outlined;
+
+$compose-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/loader.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/plugins.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/plugins.scss
new file mode 100644
index 000000000..292ec7fa6
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss
new file mode 100644
index 000000000..7c4349512
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss
@@ -0,0 +1,55 @@
+// Add your customization below
+
+$primary-color: #7e5f66;
+
+$section-text-color: $primary-color;
+
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+$icon-color: #92787d;
+$icon-hover-color: darken($icon-color, 10%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$floating-action-button-icon-color: $primary-color;
+
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: lighten($primary-color, 20%);
+$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: $contained-button-color;
+$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$text-button-color: $contained-button-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+
+$bg-color: #fafafa;
+
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+$border-color: lighten($icon-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+$scroll-bar-thumb-color: lighten($icon-color, 30%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$text-tab-indicator-color: lighten($top-bar-icon-color, 10%);
+$text-tab-indicator-active-color: $top-bar-icon-color;
+$icon-tab-indicator-active-color: $top-bar-icon-color;
+$icon-tab-indicator-hover-color: $top-bar-icon-hover-color;
+
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+$loading-indicator-color: $primary-color;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss
new file mode 100644
index 000000000..d250ece15
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/v2-light';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/layout.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/layout.scss
new file mode 100644
index 000000000..0c3d2a73e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/layout.scss
@@ -0,0 +1,9 @@
+// Add your customization below
+
+$avatar-radius: 2px;
+
+$button-on-status: outlined;
+
+$cw-area-border: outlined;
+
+$compose-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/loader.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss
new file mode 100644
index 000000000..292ec7fa6
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/_functions.scss b/app/javascript/styles/mastodon-material/theme/_functions.scss
new file mode 100644
index 000000000..20ce3f055
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/_functions.scss
@@ -0,0 +1,7 @@
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color($color) {
+ @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/_mixins.scss b/app/javascript/styles/mastodon-material/theme/_mixins.scss
new file mode 100644
index 000000000..7c45fb0b7
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/_mixins.scss
@@ -0,0 +1,266 @@
+$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 shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
+@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
+@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
+@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
+@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
+@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
+@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
+@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
+
+@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
+
+@mixin material-transition { transition: .25s cubic-bezier(0,0,0.2,1) }
+
+@mixin search-bar-hover {
+ @if $search-bar-hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ }
+}
+
+@mixin chip-type($chip-type) {
+ @if $chip-type == contained {
+ background: $contained-chip-color;
+
+ &.active { background-color: $contained-chip-selected-color }
+
+ &:hover { background-color: $contained-chip-selected-color }
+ }
+
+ @if $chip-type == outlined {
+ background: $outlined-chip-color;
+ border: 1px solid $outlined-chip-selected-border-color;
+
+ &.active { background-color: $outlined-chip-selected-color }
+
+ &:hover { background: $outlined-chip-hover-color }
+ }
+}
+
+@mixin button-type($button-type) {
+ border-radius: $button-radius;
+ display: inline-block;
+
+ @if $button-type == contained {
+ @if $button-shadow { @include shadow-1dp }
+ background: $contained-button-color;
+ color: $contained-button-text-color;
+
+ &:hover { background: $contained-button-hover-color }
+
+ &:focus { background: $contained-button-color }
+ }
+
+ @if $button-type == outlined {
+ box-shadow: none;
+ background: transparent;
+ color: $outlined-button-color;
+ border: 1px solid $outlined-button-color;
+
+ &:hover { background: $outlined-button-hover-color }
+
+ &:focus { background: $outlined-button-hover-color }
+ }
+
+ @if $button-type == text {
+ box-shadow: none;
+ background: transparent;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
+ }
+}
+
+@mixin button-shadow {
+ @if $button-shadow {
+ button.btn,
+ .button,
+ .block-button,
+ .input-copy button,
+ .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
+ }
+}
+
+@mixin text-area-border($text-area-border) {
+ background: $text-field-bg-color;
+ color: $text-field-color;
+
+ &:hover { border-color: $border-hover-color }
+
+ @if $text-area-border == underlined {
+ border-radius: $card-radius $card-radius 0 0;
+ border: 0;
+ border-bottom: 1px solid $border-color;
+
+ &:active,
+ &:focus { border-bottom: 2px solid $border-active-color }
+ }
+
+ @if $text-area-border == outlined {
+ border-radius: $card-radius;
+ border: 1px solid $border-color;
+
+ &:active,
+ &:focus {
+ border: 2px solid $border-active-color;
+ }
+ }
+}
+
+@mixin icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ font-size: 20px !important;
+}
+
+// check background-image value
+@mixin bg-image {
+ @if $bg-image == none {
+ } @else { background-image: url($bg-image) }
+}
+
+
+@mixin icon-font-style {
+ @if $icon-font-style == filled { font-family: "Material Icons" }
+ @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
+ @if $icon-font-style == round { font-family: "Material Icons Round" }
+ @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
+ @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
+}
+
+@mixin icon-font {
+ @if $icon-font-source == github {
+ @if $icon-font-style == filled {
+ @font-face {
+ font-family: "Material Icons";
+ src: local("Material Icons"),
+ url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
+ }
+ }
+ @if $icon-font-style == outlined {
+ @font-face {
+ font-family: "Material Icons Outlined";
+ src: local("Material Icons Outlined"),
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
+ }
+ }
+ @if $icon-font-style == round {
+ @font-face {
+ font-family: "Material Icons Round";
+ src: local("Material Icons Round"),
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
+ }
+ }
+ @if $icon-font-style == sharp {
+ @font-face {
+ font-family: "Material Icons Sharp";
+ src: local("Material Icons Sharp"),
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
+ }
+ }
+ @if $icon-font-style == two-tone {
+ @font-face {
+ font-family: "Material Icons Two Tone";
+ src: local("Material Icons Two Tone"),
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
+ }
+ }
+ }
+
+ @if $icon-font-source == google {
+ @if $icon-font-style == filled {
+ @font-face {
+ font-family: "Material Icons";
+ src: local("Material Icons"),
+ url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
+ }
+ }
+ @if $icon-font-style == outlined {
+ @font-face {
+ font-family: "Material Icons Outlined";
+ src: local("Material Icons Outlined"),
+ url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
+ }
+ }
+ @if $icon-font-style == round {
+ @font-face {
+ font-family: "Material Icons Round";
+ src: local("Material Icons Round"),
+ url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
+ }
+ }
+ @if $icon-font-style == sharp {
+ @font-face {
+ font-family: "Material Icons Sharp";
+ src: local("Material Icons Sharp"),
+ url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
+ }
+ }
+ @if $icon-font-style == two-tone {
+ @font-face {
+ font-family: "Material Icons Two Tone";
+ src: local("Material Icons Two Tone"),
+ url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
+ }
+ }
+ }
+
+ @if $icon-font-source == self {
+ @if $icon-font-style == filled {
+ @font-face {
+ font-family: "Material Icons";
+ src: local("Material Icons"),
+ url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
+ }
+ }
+ @if $icon-font-style == outlined {
+ @font-face {
+ font-family: "Material Icons Outlined";
+ src: local("Material Icons Outlined"),
+ url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
+ }
+ }
+ @if $icon-font-style == round {
+ @font-face {
+ font-family: "Material Icons Round";
+ src: local("Material Icons"),
+ url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
+ }
+ }
+ @if $icon-font-style == sharp {
+ @font-face {
+ font-family: "Material Icons Sharp";
+ src: local("Material Icons Sharp"),
+ url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
+ }
+ }
+ @if $icon-font-style == two-tone {
+ @font-face {
+ font-family: "Material Icons Two Tone";
+ src: local("Material Icons Two Tone"),
+ url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/about.scss b/app/javascript/styles/mastodon-material/theme/about.scss
new file mode 100644
index 000000000..ea78fde16
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/about.scss
@@ -0,0 +1,50 @@
+.landing-page {
+ &__call-to-action {
+ @include shadow-2dp;
+ background: $card-bg-color;
+ border-radius: $card-radius;
+ padding: 24px 36px;
+
+ .row__information-board {
+ .information-board__section {
+ padding: 0 16px;
+ color: $primary-text-color;
+ }
+ }
+ }
+}
+
+.landing {
+ .simple_form p.lead {
+ color: $ui-text-color;
+ padding: 16px;
+ margin-bottom: 0;
+ }
+
+ .directory { margin-top: 16px }
+
+ .hero-widget {
+ .account { padding: 16px 0 }
+
+ h4 { color: $ui-text-color }
+
+ &__footer {
+ background: $card-bg-color;
+ padding: 16px;
+ border-radius: 0 0 $card-radius $card-radius;
+ }
+
+ &__counter {
+ color: $primary-text-color;
+ padding: 8px;
+
+ span { color: $ui-text-color }
+ }
+ }
+
+ &__grid { grid-gap: 16px }
+
+ &__brand svg { fill: $ui-text-color }
+}
+
+.information-board__section span:last-child { color: $ui-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/account.scss b/app/javascript/styles/mastodon-material/theme/account.scss
new file mode 100644
index 000000000..b045a96cb
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/account.scss
@@ -0,0 +1,267 @@
+.account {
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
+
+ .account__display-name,
+ .account__display-name strong { color: $primary-text-color }
+
+ &__avatar {
+ border-radius: $avatar-radius;
+ width: 40px;
+ height: 40px;
+
+ &-overlay {
+ &-base {
+ border-radius: $avatar-radius;
+ width: 44px;
+ height: 44px;
+ background-size: 44px;
+ }
+
+ &-overlay { border-radius: $avatar-radius }
+ }
+ }
+
+ &__avatar-wrapper {
+ margin-left: 0;
+ margin-right: 16px;
+ }
+
+ &__header {
+ &__bar {
+ background: $card-bg-color;
+ padding: 8px;
+ border-bottom: none;
+
+ .avatar .account__avatar { border: none }
+ }
+
+ &__tabs {
+ padding: 8px;
+
+ &__name {
+ padding: 8px;
+
+ h1 {
+ color: $primary-text-color;
+
+ small { color: $secondary-text-color }
+ }
+ }
+
+ &__buttons {
+ .icon-button {
+ @include icon-button;
+ border: none;
+ border-radius: 50%;
+ padding: 8px;
+ margin-left: 8px;
+ margin-right: 0;
+ }
+ }
+ }
+
+ &__extra {
+ margin-top: 0;
+
+ &__links {
+ color: $secondary-text-color;
+ padding: 8px 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-bg-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-bg-inactive-color;
+ }
+
+ dd { color: $primary-text-color }
+ }
+ }
+ }
+
+ &__account-note {
+ padding: 8px 16px;
+ border-bottom: 1px solid $border-color;
+
+ label {
+ color: $ui-text-color;
+ margin-bottom: 8px;
+ }
+
+ textarea {
+ color: $primary-text-color;
+ padding: 8px 16px;
+ border-radius: 0;
+
+ &:focus { background: transparent }
+
+ &::placeholder { color: $tips-text-color }
+ }
+ }
+
+ &__content { color: $secondary-text-color }
+
+ &__fields {
+ border-color: $border-color;
+
+ dl { border-bottom: 1px solid $border-color }
+
+ dt {
+ color: $primary-text-color;
+ background: $list-bg-inactive-color;
+ }
+
+ dd { color: $primary-text-color }
+
+ .verified {
+ border: none;
+ background: $verified-bg-color;
+
+ &__mark { color: $primary-text-color }
+ }
+ }
+ }
+
+ &__section-headline {
+ background: $text-tab-bg-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-bg-focus-color }
+ }
+
+ &:hover { background: $text-tab-indicator-bg-hover-color }
+ }
+ }
+
+ &__relationship {
+ padding: 8px;
+
+ .icon-button {
+ @include icon-button;
+ padding: 8px;
+ box-sizing: content-box;
+ }
+ }
+}
+
+.account-role,
+.simple_form .recommended {
+ padding: 4px 8px;
+ border-radius: 17px;
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+}
+
+.account-gallery {
+ &__item { border-radius: 0 }
+}
+
+.card {
+ &>a {
+ @include shadow-1dp;
+
+ &:active .card__bar,
+ &:focus .card__bar,
+ &:hover .card__bar { background: $card-bg-color }
+ }
+
+ &__img {
+ background: $card-bg-color;
+ border-radius: $card-radius $card-radius 0 0;
+
+ img { border-radius: $card-radius $card-radius 0 0 }
+ }
+
+ &__bar {
+ padding: 16px;
+ background: $card-bg-color;
+ border-radius: 0 0 $card-radius $card-radius;
+
+ .avatar {
+ padding-top: 0;
+
+ img {
+ border-radius: $avatar-radius;
+ background: $card-bg-color;
+ }
+ }
+
+ .display-name {
+ margin-left: 16px;
+
+ strong { color: $primary-text-color }
+
+ span { color: $secondary-text-color }
+ }
+ }
+}
+
+.pagination {
+ padding: 28px;
+
+ .gap,
+ .newer,
+ .older,
+ .page,
+ a {
+ color: $ui-text-color;
+ padding: 8px;
+ }
+
+ .current {
+ background: $contained-chip-color;
+ color: $ui-text-color;
+ margin: 0 8px;
+ border-radius: 50%;
+ width: 16px;
+ height: 16px;
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/admin.scss b/app/javascript/styles/mastodon-material/theme/admin.scss
new file mode 100644
index 000000000..dd9509a94
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/admin.scss
@@ -0,0 +1,151 @@
+.admin-wrapper {
+ .sidebar-wrapper__inner { background: $bg-color }
+
+ .sidebar {
+ &__toggle {
+ background: $top-bar-color;
+
+ &__icon { color: $top-bar-icon-color }
+
+ &__logo svg { fill: $top-bar-text-color }
+
+ a {
+ border-radius: 50%;
+
+ &:hover { background: $icon-bg-hover-color }
+ }
+ }
+
+ ul {
+ a {
+ padding: 16px;
+ color: $ui-text-color;
+ border-radius: 0;
+
+ i.fa {
+ margin-right: 32px;
+ color: $icon-color;
+ }
+
+ &.selected {
+ background: $list-bg-active-color;
+
+ &:hover { background: $list-bg-active-hover-color }
+ }
+
+ &:hover {
+ color: $ui-text-color;
+ background-color: $list-bg-hover-color;
+ }
+ }
+
+ ul {
+ background: $bg-color;
+
+ a { padding: 16px 36px }
+ }
+
+ .simple-navigation-active-leaf a {
+ color: $ui-text-color;
+ background-color: $list-bg-active-color;
+
+ &:hover { background-color: $list-bg-active-hover-color }
+ }
+ }
+ }
+
+ .content {
+ padding: 60px 16px 16px;
+
+ h2,
+ h3,
+ h6 { color: $ui-text-color }
+
+ h3 { margin-bottom: 28px }
+
+ h4 {
+ color: $section-text-color;
+ border-top: 1px solid $border-color;
+ border-bottom: none;
+ padding: 12px 16px;
+ }
+
+ hr {
+ border-bottom: 1px solid $border-color;
+ margin: 16px 0;
+ }
+
+ .muted-hint {
+ color: $ui-text-color;
+
+ a { color: $link-text-color }
+ }
+
+ .positive-hint { color: $verified-color }
+
+ .directory__tag h4 { color: $ui-text-color }
+
+ &>p {
+ color: $ui-text-color;
+ margin-bottom: 16px;
+
+ strong { color: $primary-text-color }
+ }
+ }
+
+ .content-heading {
+ border-bottom: none;
+ margin: -16px -16px 40px 0;
+
+ &>* {
+ margin-top: 16px;
+ margin-right: 16px;
+ }
+ }
+}
+
+.filters .filter-subset {
+ padding: 0 16px;
+ margin: 0 0 16px;
+ border-right: 1px solid $border-color;
+
+ strong { color: $ui-text-color }
+
+ ul {
+ margin-top: 0;
+
+ li { margin-right: 0 }
+ }
+
+ a {
+ color: $text-tab-indicator-color;
+ border-bottom: 2px solid transparent;
+ padding: 8px;
+
+ &.selected {
+ color: $text-tab-indicator-active-color;
+ border-bottom: 2px solid $text-tab-indicator-active-color;
+
+ &:hover {
+ color: $text-tab-indicator-active-color;
+ border-bottom: 2px solid $text-tab-indicator-active-color;
+ }
+ }
+
+ &:hover {
+ color: $text-tab-indicator-color;
+ background: $text-tab-indicator-bg-hover-color;
+ border-bottom: 2px solid transparent;
+ }
+ }
+}
+
+body {
+ .positive-hint { color: $verified-color }
+
+ .muted-hint {
+ color: $ui-text-color;
+
+ a { color: $link-text-color }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/base_config.scss b/app/javascript/styles/mastodon-material/theme/base_config.scss
new file mode 100644
index 000000000..a3f28a18e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/base_config.scss
@@ -0,0 +1,46 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import '../../color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import '../../layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+$search-bar-hover: false;
+
+
+// Status font size in timeline
+$status-font-size: 15px; // mastodon default
+//$status-font-size: 16px; // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px; // mastodon default
+//$name-font-size: 16px; // compatible with material design
+
+
+// Background image
+// If you want to use the local image, please put it in "../"
+$bg-image: none;
+//$bg-image: "./image.png";
+//$bg-image: "https://example.com/img/image.png";
+
+
+// Columns transparency settings
+$bar-transparency: 1.0; // opacity
+//$bar-transparency: 0.8; // semi-transparent
+
+$column-transparency: 1.0; // opacity
+//$column-transparency: 0.8; // semi-transparent
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/base_icon_config.scss b/app/javascript/styles/mastodon-material/theme/base_icon_config.scss
new file mode 100644
index 000000000..2081d8828
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/base_icon_config.scss
@@ -0,0 +1,28 @@
+// 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
+//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
+
+
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment"; // blooming
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+$icon-font-source: google; // Google Fonts
+//$icon-font-source: github; // GitHub
+//$icon-font-source: self; // Self-hosting
+
+// Material Icon style settings
+$icon-font-style: filled;
+//$icon-font-style: outlined;
+//$icon-font-style: round;
+//$icon-font-style: sharp;
+//$icon-font-style: two-tone;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/basics.scss b/app/javascript/styles/mastodon-material/theme/basics.scss
new file mode 100644
index 000000000..27adf1e86
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/basics.scss
@@ -0,0 +1,23 @@
+body,
+body.embed,
+body.admin,
+body.lighter { background: $bg-color }
+
+.focusable:focus { background: transparent }
+
+// 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/theme/button.scss b/app/javascript/styles/mastodon-material/theme/button.scss
new file mode 100644
index 000000000..fcb59dbbe
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/button.scss
@@ -0,0 +1,162 @@
+@include button-shadow;
+
+.icon-button {
+ @include material-transition;
+ 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;
+
+ &.active,
+ &:active { color: $icon-button-active-color }
+
+ &:focus {
+ color: $icon-button-active-color;
+ background-color: transparent;
+ }
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-bg-hover-color;
+ }
+ }
+
+ &.overlayed {
+ @include icon-button;
+ border-radius: 50%;
+ background: $media-icon-bg-color;
+ color: $media-icon-color;
+ padding: 4px;
+ line-height: 20px !important;
+
+ &:hover {
+ background: $media-icon-bg-color;
+ color: $media-icon-hover-color;
+ }
+ }
+
+ &__counter {
+ width: 16px;
+ margin-left: 8px;
+ }
+
+ &:active,
+ &:focus { color: $icon-button-active-color }
+
+ &:focus { background-color: transparent }
+
+ &:hover {
+ @include material-transition;
+ color: $icon-button-hover-color;
+ background-color: $icon-bg-hover-color;
+ }
+}
+
+// Checkbox with label
+label.icon-button {
+ &.active {
+ color: $ui-text-color;
+ background-color: transparent;
+ }
+
+ &:hover {
+ @include material-transition;
+ background-color: transparent;
+ }
+}
+
+.text-icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+ font-size: 14px;
+
+ &.active {
+ background-color: $icon-bg-hover-color;
+ color: $icon-button-active-color;
+ }
+
+ &:hover {
+ background-color: $icon-bg-hover-color;
+ color: $icon-button-hover-color;
+ }
+}
+
+.button {
+ background-color: $contained-button-color;
+ border-radius: $button-radius;
+
+ &:active,
+ &:focus {
+ background-color: $contained-button-color;
+ border-radius: $button-radius;
+ }
+
+ &:hover {
+ @include shadow-2dp;
+ background-color: $contained-button-hover-color;
+ }
+
+ &.logo-button {
+ background: $contained-button-color;
+ margin: 2px;
+
+ &:hover { background: $contained-button-hover-color }
+
+ .button--destructive:hover { background: $contained-button-hover-color }
+ }
+
+ &:disabled,
+ &.disabled { background-color: $disabled-button-color }
+
+ &.button--block { margin: 8px 0 }
+
+ &.button-secondary { @include button-type($button-on-status) }
+
+ &.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-bg-color;
+ border-radius: $button-radius;
+ color: $media-icon-color;
+}
+
+.simple_form {
+ .block-button, .block-button:last-child,
+ .button, .button:last-child,
+ button, button:last-child {
+ display: inline-block;
+ border-radius: $button-radius;
+ background: $contained-button-color;
+ color: $contained-button-text-color;
+ width: auto;
+ height: 36px;
+ padding: 10px 16px;
+ margin-left: auto;
+ font-size: 14px;
+ line-height: 15px;
+
+ &:hover { background: $contained-button-hover-color }
+
+ &:disabled,
+ &:disabled:hover { background-color: $disabled-button-color }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/columns.scss b/app/javascript/styles/mastodon-material/theme/columns.scss
new file mode 100644
index 000000000..c275d29e6
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/columns.scss
@@ -0,0 +1,516 @@
+.column {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 10px 8px;
+ border-radius: $card-radius;
+
+ &>.scrollable {
+ background: $list-bg-color;
+ opacity: $column-transparency;
+ }
+
+ &:last-child { box-shadow: none }
+}
+
+.column-header {
+ background: $top-bar-color;
+ border-radius: $bar-radius;
+ height: 56px;
+
+ > button {
+ padding: 16px;
+ color: $top-bar-text-color;
+ }
+
+ &>.column-header__back-button { color: $top-bar-icon-color }
+
+ &.active {
+ .column-header__icon {
+ color: $top-bar-unread-icon-color;
+ text-shadow: none;
+ }
+ }
+
+ &__icon {
+ margin-right: 16px;
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ }
+
+ &__buttons { height: 56px }
+
+ &__button {
+ @include icon-button;
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 8px;
+ margin: 10px;
+ border-radius: 50%;
+ box-sizing: content-box;
+
+ &.active {
+ color: $top-bar-icon-active-color;
+ background: $icon-bg-active-color;
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-bg-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-bg-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;
+ margin: 0 8px;
+ border-radius: 50%;
+
+ &:last-child { padding-right: 8px }
+ }
+ }
+
+ &__wrapper {
+ @include shadow-4dp;
+ border-radius: $bar-radius;
+ opacity: $bar-transparency;
+
+ .announcements { border-top: 1px solid $border-color }
+
+ &.active {
+ @include shadow-4dp;
+
+ &::before { background: transparent }
+ }
+ }
+
+ &__collapsible {
+ transition: .25s cubic-bezier(0.0,0.0,0.2,1), .25s cubic-bezier(1,0.2,0,0);
+ color: $ui-text-color;
+ background: $card-bg-color;
+ border-top: 1px solid $border-color;
+
+ &-inner {
+ background: $card-bg-color;
+ padding: 16px;
+ }
+
+ &.collapsed {
+ opacity: 1;
+ border-top: none;
+ }
+ }
+
+ &__back-button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ margin: 10px;
+ padding: 8px;
+ font-size: 20px;
+
+ span { display: none }
+ }
+}
+
+.column-subheading {
+ color: $section-text-color;
+ background: $bg-color;
+ padding: 12px 16px;
+ margin-top: 8px;
+ border-top: 1px solid $border-color;
+
+ &:first-child { border-top: none }
+}
+
+.column-link {
+ color: $ui-text-color;
+ background: $bg-color;
+ padding: 16px;
+ border-radius: $nav-drawer-item-radius;
+
+ &:hover { background: $list-bg-hover-color }
+
+ &:active,
+ &:focus { background: $list-bg-active-color }
+
+ &__icon {
+ margin-right: 32px;
+ font-size: 20px;
+ }
+
+ &--transparent {
+ &.active {
+ color: $ui-text-color;
+ background: $menu-bg-active-color;
+
+ &:hover { background: $menu-bg-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: 16px 0 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
+
+ &--slim-button { top: -54px }
+}
+
+.column-inline-form {
+ padding: 16px 0 16px 16px;
+ background: $card-bg-color;
+
+ .icon-button {
+ width: 36px !important;
+ height: 36px !important;
+ padding: 8px;
+ margin: 0 16px;
+ }
+}
+
+.columns-area {
+ @include bg-image;
+ background-size: contain;
+}
+
+.setting-text {
+ color: $primary-text-color;
+ background: $text-field-bg-color;
+ border-radius: $bar-radius;
+
+ &::placeholder { color: $tips-text-color }
+}
+
+.empty-column-indicator {
+ color: $secondary-text-color;
+ background: $card-bg-color;
+ font-size: 16px;
+ contain: initial; // padding fix
+}
+
+.conversation {
+ border-bottom: 1px solid $border-color;
+ padding: 12px;
+ background: $list-bg-inactive-color;
+
+ &--unread {
+ background: $list-bg-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 !important;
+
+ p { color: $read-primary-text-color !important }
+
+ a { color: $read-secondary-text-color !important }
+ }
+
+ &__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-bg-hover-color }
+}
+
+.getting-started {
+ background: $bg-color;
+ color: $ui-text-color;
+ opacity: $column-transparency;
+
+ &__wrapper {
+ background: $bg-color;
+ height: auto !important;
+ padding-bottom: 8px;
+ 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: $bg-color;
+ margin-bottom: 0;
+ opacity: $column-transparency;
+
+ h4 {
+ color: $section-text-color;
+ padding: 12px 16px;
+ margin-top: 8px;
+ border-top: 1px solid $border-color;
+ border-bottom: none;
+ }
+ }
+}
+
+.trends {
+ &__header {
+ color: $section-text-color;
+ background: transparent;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
+
+ .fa { margin-right: 8px }
+ }
+
+ &__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-bg-color;
+ padding: 0 8px;
+
+ &__container { color: $primary-text-color }
+
+ &__item {
+ padding: 16px 8px;
+ font-size: 16px;
+
+ &__unread { background: $badge-color }
+
+ &__range {
+ margin-bottom: 8px;
+ padding-right: 16px;
+ }
+ }
+
+ &__pagination {
+ color: $ui-text-color;
+ padding: 0 8px 16px;
+ bottom: 0;
+ position: initial;
+ float: right;
+
+ .icon-button {
+ @include icon-button;
+ padding: 8px;
+ margin: 0 8px;
+ line-height: normal !important;
+ box-sizing: content-box;
+ }
+
+ span { vertical-align: super }
+ }
+}
+
+.reactions-bar {
+ margin-top: 16px;
+ width: auto;
+
+ .emoji-button {
+ color: $icon-button-color;
+ font-size: 20px;
+
+ &:hover { color: $icon-button-hover-color }
+
+ &:active { color: $icon-button-active-color }
+ }
+
+ &__item {
+ @include chip-type($chip-type);
+ border-radius: 17px;
+ margin: 2px 4px;
+
+ &.active .reactions-bar__item__count { color: $chip-selected-text-color }
+
+ &__emoji {
+ width: 24px;
+ height: 24px;
+ margin: 4px 0 4px 2px;
+ }
+
+ &__count {
+ font-size: 16px;
+ margin: 0 12px 0 8px;
+ color: $secondary-text-color;
+ }
+
+ &:hover { background: $contained-chip-hover-color }
+ }
+}
+
+.notification {
+ &__filter-bar {
+ background: $tab-bg-color;
+ border-bottom: 1px solid $border-color;
+ z-index: 1;
+ opacity: $bar-transparency;
+
+ button {
+ background: $tab-bg-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;
+ padding: 12px 0 8px;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $tab-indicator-bg-focus-color }
+ }
+
+ &:hover { background: $tab-indicator-bg-hover-color }
+ }
+ }
+
+ &__message {
+ color: $secondary-text-color;
+ margin: 0 16px 0 70px;
+ font-size: 16px;
+
+ .fa { color: $icon-button-color }
+ }
+
+ &__display-name:hover { color: inherit }
+}
+
+.notification-favourite .status.status-direct {
+ .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+ color: $ui-text-color;
+ background-color: $relationship-tag-color;
+ font-size: 12px;
+ border-radius: 17px;
+ padding: 4px 8px;
+ opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
+
+// unread notification
+.notification.unread:before, .status__wrapper.unread:before { border-left: none }
+
+.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/components.scss b/app/javascript/styles/mastodon-material/theme/components.scss
new file mode 100644
index 000000000..4e3a69556
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/components.scss
@@ -0,0 +1,702 @@
+.modal-root {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+
+ &__overlay { background-color: rgba(0,0,0,.7) !important }
+}
+
+.modal-layout { background-color: $bg-color }
+
+.drawer {
+ &__header {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ border-radius: $nav-bar-radius;
+ justify-content: space-around;
+ opacity: $bar-transparency;
+
+ a { transition: none }
+
+ a:hover {
+ background: $icon-bg-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-bg-color;
+ opacity: $column-transparency;
+
+ &.darker {
+ background: $card-bg-color;
+ position: inherit;
+ }
+
+ &__mastodon { background: $card-bg-color }
+
+ &:hover,
+ &:active,
+ &:focus { opacity: 1.0 }
+ }
+}
+
+.search {
+ &__input {
+ background: $search-bar-color;
+ color: $tips-text-color;
+ border-radius: $search-bar-radius;
+ padding: 12px 12px 12px 40px;
+ opacity: $bar-transparency;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ color: $search-bar-text-color;
+ }
+
+ &:hover { @include search-bar-hover }
+
+ &::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: 16px;
+ 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-bg-color;
+ padding: 16px;
+
+ .fa { margin-right: 16px }
+ }
+
+ &__section {
+ h5 {
+ background: $card-bg-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-bar__actions .compose__action-bar .icon-button {
+ width: 36px !important;
+ height: 36px !important;
+ padding: 8px;
+
+ &.active {
+ color: $icon-hover-color;
+ background: $icon-bg-active-color;
+ }
+ }
+}
+
+.navigation-panel hr {
+ border-top: 1px solid $border-color;
+ margin: 8px 0;
+}
+
+.flex-spacer { margin: 8px 0 }
+
+.dropdown-menu {
+ @include shadow-8dp;
+ background: $menu-bg-color;
+ padding: 8px 0;
+ border-radius: $menu-radius;
+
+ &__arrow { visibility: hidden }
+
+ &__item a {
+ font-size: 14px;
+ padding: 8px 16px;
+ background: $menu-bg-color;
+ color: $menu-text-color;
+
+ &:hover, &:active {
+ background: $menu-bg-hover-color;
+ color: $menu-text-color;
+ }
+ }
+
+ &__separator {
+ margin: 8px 0;
+ border-bottom: 1px solid $border-color;
+ }
+}
+
+.compose-form {
+ .autosuggest-textarea {
+ &__textarea {
+ @include text-area-border($compose-area-border);
+ padding: 8px 42px 8px 16px;
+
+ @if $compose-area-border == outlined {
+ &:focus { padding: 7px 41px 7px 15px }
+ }
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__suggestions {
+ @include shadow-1dp;
+ background: $menu-bg-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+ font-size: 16px;
+ padding: 8px 0;
+
+ &__item {
+ padding: 8px;
+ border-radius: 0;
+
+ &:hover { background: $menu-bg-hover-color }
+
+ &.selected,
+ &:focus,
+ &:active { background: $menu-bg-active-color }
+ }
+ }
+ }
+
+ .spoiler-input {
+ &.spoiler-input--visible { margin-bottom: 16px }
+
+ &__input {
+ @include text-area-border($cw-area-border);
+ padding: 8px 16px;
+
+ @if $cw-area-border == outlined {
+ &:focus { padding: 7px 15px }
+ }
+
+ &::placeholder { color: $tips-text-color }
+ }
+ }
+
+ .compose-form {
+ &__warning {
+ color: $secondary-text-color;
+ background: $card-bg-color;
+ padding: 16px;
+ border: 1px solid $border-color;
+ border-radius: $card-radius;
+ box-shadow: none;
+
+ a { color: $link-text-color }
+ }
+
+ &__modifiers {
+ background: $card-bg-color;
+ color: $tips-text-color;
+
+ .compose-form {
+ &__upload-thumbnail { border-radius: 0 }
+
+ &__upload__actions {
+ @include material-transition;
+
+ .icon-button {
+ color: $media-icon-color;
+ font-size: 16px;
+
+ &:hover { background-color: transparent }
+ }
+ }
+ }
+ }
+
+ &__buttons-wrapper {
+ background: $card-bg-color;
+ color: $tips-text-color;
+ padding: 8px;
+
+ .icon-button {
+ @include icon-button;
+ padding: 8px;
+ margin: 0 2px;
+ }
+
+ .text-icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ margin: 0 2px;
+ line-height: 20px !important;
+ }
+ }
+
+ &__poll-wrapper {
+ @if $compose-area-border == none {
+ border-top: 1px solid $border-color;
+ } @else { border-top: none }
+
+ ul { padding: 16px 12px 16px 0 }
+
+ select {
+ color: $ui-text-color;
+ background-color: $dropdown-field-bg-color;
+ border: 0;
+
+ option { background: $list-bg-color }
+
+ &:focus { border-color: $border-hover-color }
+ }
+
+ .button.button-secondary { @include button-type($button-on-status) }
+
+ .poll__footer { border-top: none }
+ }
+
+ &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+ }
+}
+
+.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
+
+
+.poll {
+ margin-top: 8px;
+
+ .button { margin-right: 8px }
+
+ li { margin-bottom: 8px }
+
+ &__input {
+ border: none;
+ width: 20px;
+ height: 20px;
+ flex: 0 0 20px;
+ padding: 18px;
+ margin: 0 2px;
+ background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
+
+ &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
+
+ &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
+
+ &.active:hover { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, $control-border-hover-color 5px, $control-border-hover-color 7px, $control-border-active-color 8px, $control-border-active-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
+
+ &.checkbox {
+ border-radius: 2px;
+ border: 2px solid $control-border-color;
+ padding: 8px;
+ margin: 8px 10px;
+ background: none;
+ }
+ }
+
+ &__text input[type=text] {
+ color: $ui-text-color;
+ background: $text-field-bg-color;
+ border: 1px solid $border-color;
+ padding: 8px 12px;
+
+ &:focus { border-color: $border-hover-color }
+ }
+
+ &__option {
+ input[type=text] {
+ color: $primary-text-color;
+ background: $text-field-bg-color;
+ border: none;
+ border-radius: 2px;
+ padding: 8px 16px;
+ }
+ }
+
+ &__chart {
+ border-radius: 0;
+ background: $progress-indicator-track-color;
+
+ &.leading { background: $progress-indicator-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-bg-hover-color;
+ border-radius: 50%;
+ box-shadow: none;
+
+ .icon-button { color: $icon-button-active-color }
+ }
+
+ &__dropdown {
+ @include shadow-8dp;
+ background: $menu-bg-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-bg-active-color;
+ color: $icon-hover-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+
+ &:hover {
+ background: $menu-bg-active-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+
+ &:hover {
+ background: $menu-bg-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 {
+ box-shadow: none;
+ border: 1px solid $border-color;
+ border-radius: $card-radius;
+ background: $card-bg-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;
+
+ p { margin-bottom: 16px }
+ }
+}
+
+.attachment-list {
+ &__list a { color: $secondary-text-color }
+
+ &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+ @include shadow-24dp;
+ background: $card-bg-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__container { padding: 24px }
+
+ &__action-bar {
+ background: $card-bg-color;
+ padding: 8px;
+ justify-content: flex-end;
+ }
+
+ &__cancel-button {
+ box-shadow: none !important;
+ color: $text-button-color;
+ background: transparent;
+
+ &:hover {
+ color: $text-button-color;
+ background-color: $text-button-hover-color;
+ }
+
+ &:focus,
+ &:active {
+ color: $text-button-color;
+ background-color: $text-button-focus-color;
+ }
+ }
+}
+
+.load-more {
+ color: $ui-text-color;
+
+ &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+ &__name { color: $menu-text-color }
+}
+
+.filter-form {
+ background: $bg-color;
+ color: $ui-text-color;
+
+ &__column { padding: 8px 16px }
+}
+
+.directory {
+ &__card {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ margin-bottom: 16px;
+
+ &__img { border-radius: $card-radius $card-radius 0 0 }
+
+ &__bar {
+ background: $card-bg-color;
+ padding: 8px 16px;
+
+ &__relationship { width: auto }
+
+ .display-name {
+ margin-left: 16px;
+
+ strong {
+ font-size: 16px;
+ color: $primary-text-color;
+ }
+
+ span { color: $secondary-text-color }
+ }
+ }
+
+ &__extra {
+ background: $card-bg-color;
+ border-radius: 0 0 $card-radius $card-radius;
+
+ .account__header__content {
+ padding: 8px 16px;
+ border-bottom: 1px solid $border-color;
+ }
+
+ .accounts-table__count { padding: 16px 0 }
+ }
+ }
+
+ &__list {
+ @include material-transition;
+ margin: 16px 0;
+ }
+}
+
+.mute-modal {
+ @include shadow-24dp;
+ background: $card-bg-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__container { padding: 24px }
+
+ &__explanation { margin-top: 16px }
+
+ &__action-bar {
+ background: $card-bg-color;
+ padding: 8px;
+ justify-content: flex-end;
+ }
+
+ &__cancel-button {
+ box-shadow: none !important;
+ color: $text-button-color;
+ background: transparent;
+ margin: 0 8px;
+
+ &:hover {
+ color: $text-button-color;
+ background-color: $text-button-hover-color;
+ }
+
+ &:focus,
+ &:active {
+ color: $text-button-color;
+ background-color: $text-button-focus-color;
+ }
+ }
+
+ .setting-toggle {
+ margin-top: 16px;
+ margin-bottom: 16px;
+
+ &__label {
+ color: $ui-text-color;
+ margin: 0 0 0 12px;
+ }
+ }
+}
+
+.domain {
+ padding: 16px;
+ border-bottom: 1px solid $border-color;
+
+ .domain__domain-name { color: $primary-text-color }
+
+ &__buttons .icon-button {
+ @include icon-button;
+ padding: 8px;
+ }
+}
+
+.upload-progress {
+ color: $ui-text-color;
+
+ &__backdrop {
+ border-radius: 0;
+ background: $progress-indicator-track-color;
+ margin-top: 6px;
+ }
+
+ &__tracker {
+ border-radius: 0;
+ background: $progress-indicator-color;
+ }
+}
+
+.emoji-button { padding: 8px }
+
+.focusable:focus .detailed-status,
+.focusable:focus .detailed-status__action-bar { background: transparent }
+
+.no-reduce-motion .loading-indicator {
+ display: inline-block;
+ position: relative;
+ color: transparent;
+ width: 80px;
+ height: 80px;
+
+ &__figure {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ top: 10%;
+ left: 10%;
+ margin: 8px;
+ border: 4px solid transparent;
+ border-radius: 50%;
+ animation: loading-indicator 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: $loading-indicator-color transparent transparent transparent;
+
+ &:nth-child(1) {
+ animation-delay: -0.45s;
+ }
+
+ &:nth-child(2) {
+ animation-delay: -0.3s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: -0.15s;
+ }
+ }
+}
+@keyframes loading-indicator {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.loading-bar {
+ background-color: $loading-indicator-color;
+ height: 4px;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/containers.scss b/app/javascript/styles/mastodon-material/theme/containers.scss
new file mode 100644
index 000000000..6891adb1e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/containers.scss
@@ -0,0 +1,185 @@
+.public-layout {
+ .header {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ border-radius: $nav-bar-radius;
+ margin: 16px 0;
+
+ .brand {
+ svg { fill: $top-bar-text-color }
+
+ &:hover,
+ &:focus,
+ &:active { background: $tab-indicator-bg-hover-color }
+ }
+
+ .nav-link,
+ .nav-link.optional {
+ color: $top-bar-text-color;
+
+ &:hover {
+ color: $top-bar-text-color;
+ background: $tab-indicator-bg-hover-color;
+ text-decoration: none;
+ }
+ }
+
+ .nav-button {
+ background: transparent;
+ margin: 0;
+ border-radius: 0;
+
+ &:hover { background: $tab-indicator-bg-hover-color }
+ }
+
+ .detailed-status__meta { margin-top: 16px }
+ }
+
+ .detailed-status { padding: 16px }
+
+ .footer {
+ padding-top: 16px;
+ padding-bottom: 64px;
+ color: $ui-text-color;
+
+ h4 { color: $ui-text-color }
+
+ ul a { color: $secondary-text-color }
+
+ .grid .column-2 h4 a { color: $ui-text-color }
+
+ .brand {
+ svg { fill: $icon-color }
+
+ &:hover svg { fill: $icon-hover-color }
+ }
+ }
+
+ .account__section-headline {
+ @include shadow-1dp;
+ border-radius: $card-radius $card-radius 0 0;
+ }
+
+ .public-account-header {
+ @include shadow-2dp;
+ margin-bottom: 16px;
+
+ &__image {
+ border-radius: $card-radius $card-radius 0 0;
+ background: $card-bg-color;
+
+ &::after { box-shadow: none }
+
+ img { border-radius: $card-radius $card-radius 0 0 }
+ }
+
+ &__bar {
+ background: linear-gradient(0deg, transparent, transparent 60px, rgba(0, 0, 0, 0.5) 60px, rgba(0, 0, 0, 0.2) 80%, transparent);
+
+ &::before {
+ background: $text-tab-bg-color;
+ border-radius: 0 0 $card-radius $card-radius;
+ }
+
+ .avatar img {
+ border-radius: $avatar-radius;
+ border: 2px solid $border-color;
+ background: $card-bg-color;
+ }
+ }
+
+ &__tabs {
+ margin-left: 24px;
+
+ &__name {
+ h1 {
+ color: $primary-text-on-shadow-color;
+ text-shadow: none;
+
+ small { color: $primary-text-on-shadow-color }
+ }
+ }
+
+ &__tabs {
+ .counter {
+ color: $secondary-text-color;
+ padding: 8px 16px;
+ border-right: none;
+
+ &.active {
+ &::after { border-bottom: 4px solid $text-tab-indicator-active-color }
+ }
+
+ &::after {
+ border-bottom: none;
+ opacity: 1;
+ }
+
+ &:hover { background: $text-tab-indicator-bg-hover-color }
+
+ .counter-number {
+ color: $ui-text-color;
+ margin-bottom: 6px;
+ }
+ }
+ }
+ }
+
+ &__extra {
+ .public-account-bio .account__header__fields { border-top: 1px solid $border-color }
+
+ &__links {
+ color: $ui-text-color;
+
+ a {
+ color: $ui-text-color;
+ padding: 16px;
+
+ strong { color: $primary-text-color }
+ }
+ }
+ }
+
+ &--no-bar .public-account-header {
+ &__image,
+ &__image img { border-radius: $card-radius }
+ }
+ }
+
+ .public-account-bio {
+ @include shadow-2dp;
+ background: $card-bg-color;
+ border-radius: $card-radius;
+ margin-bottom: 16px;
+
+ &__extra,
+ .roles {
+ padding: 16px;
+ color: $info-text-color;
+ }
+
+ .account__header {
+ &__content {
+ padding: 16px 16px 0;
+ color: $primary-text-color;
+ }
+
+ &__fields {
+ a,
+ .verified a { color: $primary-text-color }
+
+ dl:first-child .verified { border-radius: 0 $card-radius 0 0 }
+ }
+ }
+ }
+
+ .directory__list { grid-gap: 16px }
+
+ .grid { grid-gap: 16px }
+}
+
+.brand__tagline { color: $ui-text-color }
+
+.logo-container h1 svg { fill: $ui-text-color }
+
+.grid-4 { grid-gap: 16px }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/control.scss b/app/javascript/styles/mastodon-material/theme/control.scss
new file mode 100644
index 000000000..67d8160a7
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/control.scss
@@ -0,0 +1,64 @@
+.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 $control-border-color;
+
+ &.checked {
+ border-color: $control-border-active-color;
+ background: $control-border-active-color;
+ padding: 3px;
+ background-clip: content-box;
+ }
+ }
+}
+
+.compose-form__sensitive-button .checkbox {
+ border: 2px solid $control-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/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material/theme/emoji-picker.scss
new file mode 100644
index 000000000..d6959dbcc
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/emoji-picker.scss
@@ -0,0 +1,90 @@
+.emoji-picker-dropdown {
+ &__menu {
+ @include shadow-8dp;
+ background: $menu-bg-color;
+ border-radius: $menu-radius;
+ margin-top: 0;
+
+ // bubble
+ // unable to fit the position
+ /*&::before {
+ @include shadow-8dp;
+ content: "";
+ position: absolute;
+ background: $menu-bg-color;
+ top: -6px;
+ width: 12px;
+ height: 12px;
+ transform: rotate(45deg);
+ z-index: -1;
+ }*/
+ }
+
+ &__modifiers__menu {
+ @include shadow-8dp;
+ background: $menu-bg-color;
+ border-radius: $menu-radius;
+
+ button {
+ padding: 8px;
+ }
+ }
+}
+
+.emoji-mart {
+ width: 388px !important;
+ font-size: 14px;
+ color: $menu-text-color;
+
+ &-bar {
+ border: 0 solid $border-color;
+
+ &:first-child { background: $menu-bg-color }
+ }
+
+ &-anchor {
+ color: $text-tab-indicator-color;
+ padding: 10px 4px;
+
+ &-bar { background-color: $icon-tab-indicator-active-color }
+
+ &-selected { color: $icon-tab-indicator-hover-color }
+
+ &:hover { color: $icon-tab-indicator-hover-color }
+ }
+
+ &-search {
+ background: $menu-bg-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;
+ color: $search-bar-text-color;
+ }
+ }
+ }
+
+ &-scroll {
+ padding: 0 8px 8px;
+ background: $menu-bg-color;
+ }
+
+ &-category {
+ &-label span {
+ padding: 4px 6px;
+ background: $menu-bg-color;
+ }
+
+ .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
+ }
+
+ &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/forms.scss b/app/javascript/styles/mastodon-material/theme/forms.scss
new file mode 100644
index 000000000..e5e535d8c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/forms.scss
@@ -0,0 +1,166 @@
+.simple_form {
+ .fields-row {
+ padding-top: 8px;
+ margin: 0 -8px 28px;
+
+ &__column { padding: 0 8px }
+ }
+
+ .fields-group {
+ padding: 16px;
+ margin-bottom: 0;
+ }
+
+ .input {
+ margin-bottom: 16px;
+
+ &.with_label .label_input>label,
+ &.with_block_label>label,
+ &.with_floating_label .label_input>label { color: $ui-text-color }
+
+ &.with_block_label .hint { margin-bottom: 16px }
+
+ &.boolean {
+ .recommended { margin: 0 8px }
+
+ .label_input>label { padding-top: 3px }
+ }
+
+ &.radio_buttons .radio {
+ margin-bottom: 16px;
+
+ label {
+ margin-bottom: 0;
+ color: $ui-text-color;
+ }
+ }
+ }
+
+ .label_input {
+ &__wrapper {
+ border-radius: $card-radius;
+
+ &:hover { background: $dropdown-field-bg-hover-color }
+
+ &:active,
+ &:focus { background: $dropdown-field-bg-active-color }
+ }
+
+ &__append {
+ padding: 16px;
+ color: $ui-text-color;
+
+ &::after { background-image: none }
+ }
+ }
+
+ .card { margin-bottom: 16px }
+
+ .row .input { padding: 0 4px }
+
+ .hint {
+ color: $ui-text-color;
+
+ code {
+ border-radius: 2px;
+ background: $contained-chip-color;
+ color: $ui-text-color;
+ }
+ }
+
+ .actions { padding: 16px }
+
+ .check_boxes .checkbox label {
+ color: $primary-text-color;
+ padding-top: 8px;
+ }
+
+ p.hint {
+ padding: 16px;
+ margin-bottom: 0;
+ color: $ui-text-color;
+
+ &.subtle-hint { margin-top: 16px }
+ }
+
+ select {
+ color: $ui-text-color;
+ background-color: $dropdown-field-bg-color;
+ border: none;
+ border-radius: $menu-radius $menu-radius 0 0;
+ padding-left: 16px;
+ padding-right: 40px;
+ height: 40px;
+
+ option { background-color: $menu-bg-color }
+
+ &:hover { background-color: $dropdown-field-bg-hover-color }
+
+ &:active,
+ &:focus { background-color: $dropdown-field-bg-active-color }
+ }
+
+ h4 { margin-bottom: 0 !important }
+
+ input[type=email],
+ input[type=number],
+ input[type=password],
+ input[type=text],
+ input[type=url],
+ textarea {
+ @include text-area-border($other-text-area-border);
+ color: $text-field-color;
+ background: $text-field-bg-color;
+ padding: 16px;
+
+ &:active,
+ &:focus { background: $text-field-bg-color }
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ input[type=email],
+ input[type=number],
+ input[type=password],
+ input[type=text] {
+ &:focus:invalid:not(:placeholder-shown),
+ &:required:invalid:not(:placeholder-shown) { border-color: $error-color }
+ }
+}
+
+.flash-message {
+ @include shadow-1dp;
+ background: $card-bg-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+ padding: 16px;
+ margin: 0 16px 32px;
+
+ a {
+ color: $link-text-color;
+
+ &:hover { color: $link-text-color }
+ }
+
+ &.translation-prompt { color: $ui-text-color }
+}
+
+.form-footer a { color: $ui-text-color }
+
+.follow-prompt,
+.oauth-prompt {
+ margin-bottom: 32px;
+ color: $ui-text-color;
+}
+
+.input-copy {
+ background: $bg-color;
+ padding-right: 8px;
+ border: 0;
+}
+
+input {
+ account_header.file.optional,
+ account_avatar.file.optional,
+ import_data.file.optional { color: $ui-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/icons.scss b/app/javascript/styles/mastodon-material/theme/icons.scss
new file mode 100644
index 000000000..bb4b28eac
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/icons.scss
@@ -0,0 +1,19 @@
+.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.fa-lock { text-transform: none }
+
+.icon-with-badge__badge {
+ background: $badge-color;
+ border: none;
+ padding: 2px 6px;
+ border-radius: 12px;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/material-icons.scss b/app/javascript/styles/mastodon-material/theme/material-icons.scss
new file mode 100644
index 000000000..3875d349b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/material-icons.scss
@@ -0,0 +1,289 @@
+@include icon-font;
+
+.fa-fw {
+ width: 20px;
+ height: 20px;
+ font-size: 20px;
+}
+
+.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-arrow-right,
+ &.fa-reply,
+ &.fa-reply-all,
+ &.fa-share-alt,
+ &.fa-star,
+ &.fa-bookmark,
+ &.fa-ellipsis-h,
+ &.fa-bell,
+ &.fa-bell-o,
+ &.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,
+ &.fa-quote-right,
+ &.fa-upload,
+ &.fa-comments,
+ &.fa-angle-right,
+ &.fa-thumb-tack,
+ &.fa-hashtag,
+ &.fa-expand,
+ &.fa-refresh,
+ &.fa-user,
+ &.fa-desktop,
+ &.fa-exchange,
+ &.fa-cloud-upload,
+ &.fa-cloud-download,
+ &.fa-mobile-phone, &.fa-mobile,
+ &.fa-tablet {
+ @include icon-font-style;
+ line-height: 1;
+ letter-spacing: normal;
+ text-transform: none;
+ display: inline-block;
+ white-space: nowrap;
+ word-wrap: normal;
+ direction: ltr;
+ font-feature-settings: 'liga';
+ -webkit-font-smoothing: antialiased;
+ }
+}
+
+.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-arrow-right::before { content: "arrow_forward" }
+ &.fa-reply::before { content: $reply-icon }
+ &.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-bell-o::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, &.fa-address-book-o::before { content: "explore" }
+ &.fa-list::before, &.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: "person_remove" }
+ &.fa-check::before { content: "check" }
+ &.fa-quote-right::before { content: "format_quote" }
+ &.fa-upload::before { content: "file_upload" }
+ &.fa-comments::before { content: "forum" }
+ &.fa-angle-right::before { content: "chevron_right" }
+ &.fa-thumb-tack::before { content: "push_pin" }
+ &.fa-hashtag::before { content: "tag" }
+ &.fa-expand::before { content: "open_in_full" }
+ &.fa-refresh::before { content: "refresh" }
+ &.fa-user::before { content: "person" }
+ &.fa-desktop::before { content: "web_asset" }
+ &.fa-exchange::before { content: "sync_alt" }
+ &.fa-cloud-upload::before { content: "cloud_upload" }
+ &.fa-cloud-download::before { content: "cloud_download" }
+ &.fa-mobile-phone::before, &.fa-mobile::before { content: "smartphone" }
+ &.fa-tablet::before { content: "tablet" }
+}
+
+// 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 }
+ }
+}
+
+// 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,
+.media-modal__overlay .picture-in-picture__footer .icon-button.star-icon.active { color: $favorite-icon-color }
+
+// boost icon
+button.icon-button i.fa-retweet {
+ height: 20px;
+ width: 20px;
+ transition: none;
+ background-image: url('data:image/svg+xml;utf8,
');
+}
+
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,
') }
+
+button.icon-button i.fa-retweet:hover,
+button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
+ background-image: url('data:image/svg+xml;utf8,
');
+}
+
+button.icon-button.disabled i.fa-retweet,
+button.icon-button.disabled i.fa-retweet:hover,
+button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
+ background-image: url('data:image/svg+xml;utf8,
');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select,
+.simple_form select {
+ background-image: url('data:image/svg+xml;utf8,
');
+}
+
+// icon in tab settings
+.text-btn.column-header__setting-btn {
+ .fa {
+ vertical-align: middle;
+
+ &.fa-eraser { margin-right: 8px } // clear notification
+ }
+}
+
+// top bar icons align
+.fa.fa-bell.column-header__icon.fa-fw,
+.fa.fa-home.column-header__icon.fa-fw,
+.fa.fa-users.column-header__icon.fa-fw,
+.fa.fa-globe.column-header__icon.fa-fw,
+.fa.fa-bars.column-header__icon.fa-fw,
+.fa.fa-bookmark.column-header__icon.fa-fw,
+.fa.fa-address-book-o.column-header__icon.fa-fw,
+.fa.fa-envelope.column-header__icon.fa-fw,
+.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
+
+// top bar icons in single column mode
+.tabs-bar__link .fa {
+ &.fa-home,
+ &.fa-bell,
+ &.fa-users,
+ &.fa-globe,
+ &.fa-search {
+ &.fa-fw { vertical-align: text-bottom }
+ }
+}
+
+// getting-started and side bar icons
+.column-link .fa,
+.column-link--transparent .fa { vertical-align: text-bottom }
+
+// uploaded media icons align
+.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
+ font-size: 20px;
+ vertical-align: text-bottom;
+}
+
+// search results icons align
+.search-results__header .fa { vertical-align: text-bottom }
+
+// read more icon
+.status__content__read-more-button .fa { vertical-align: bottom }
+
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
+// verified icon
+.verified__mark { vertical-align: middle }
+
+// tag icon
+.directory__tag h4 .fa { vertical-align: bottom }
+
+// status detail icon
+.detailed-status .fa {
+ font-size: 16px;
+ vertical-align: text-bottom;
+}
+
+// Icons in lists or tables
+tbody tr td span .fa {
+ color: $icon-color;
+ vertical-align: bottom;
+}
+a.table-action-link i.fa,
+button.table-action-link i.fa {
+ font-size: 16px;
+ vertical-align: bottom;
+}
+
+// status scope
+.status__visibility-icon .fa,
+.account__header__tabs__name .fa {
+ font-size: 16px;
+ vertical-align: text-bottom;
+}
+
+// sidebar icon in settings
+.admin-wrapper .sidebar ul a i.fa { vertical-align: text-bottom }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/media.scss b/app/javascript/styles/mastodon-material/theme/media.scss
new file mode 100644
index 000000000..6040e3a5f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/media.scss
@@ -0,0 +1,128 @@
+.media-gallery {
+ border-radius: $media-radius;
+
+ &__item { border-radius: $media-radius }
+}
+
+.media-modal {
+ &__nav {
+ background: $media-icon-bg-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 }
+ }
+
+ &__close,
+ &__zoom-button {
+ &.icon-button {
+ background: transparent;
+ color: $media-icon-color;
+ font-size: 24px !important;
+ width: 24px !important;
+ height: 24px !important;
+ padding: 8px;
+ box-sizing: content-box;
+ line-height: normal !important;
+
+ &:hover {
+ background: $media-icon-bg-hover-color;
+ color: $media-icon-hover-color;
+ }
+
+ .fa-fw {
+ width: 24px;
+ height: 24px;
+ }
+ }
+ }
+
+ &__meta {
+ bottom: 24px;
+
+ a { color: $media-icon-color }
+ }
+
+ &__overlay {
+ .picture-in-picture__footer .icon-button {
+ color: $media-icon-color;
+
+ &:active,
+ &:focus,
+ &:hover {
+ color: $media-icon-hover-color;
+ background-color: transparent;
+ }
+
+ &.star-icon.active {
+ &:active,
+ &:focus,
+ &:hover { background: transparent }
+ }
+ }
+ }
+}
+
+.video-player {
+ border-radius: 0;
+
+ &__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 {
+ @include material-transition;
+ 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 {
+ @include material-transition;
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__time-current { margin-left: 68px }
+
+ &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/modal.scss b/app/javascript/styles/mastodon-material/theme/modal.scss
new file mode 100644
index 000000000..6efb8bb3c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/modal.scss
@@ -0,0 +1,97 @@
+.confirmation-modal {
+ @include shadow-24dp;
+ background: $card-bg-color;
+ color: $ui-text-color;
+ border-radius: $dialog-radius;
+
+ &__container {
+ text-align: left;
+ padding: 24px;
+ }
+
+ &__action-bar {
+ justify-content: flex-end;
+ background: $card-bg-color;
+ padding: 8px;
+ }
+
+ &__secondary-button {
+ box-shadow: none !important;
+ color: $text-button-color;
+ background: transparent;
+ margin: 0 8px;
+
+ &:hover {
+ color: $text-button-color;
+ background: $text-button-hover-color;
+ }
+
+ &:focus,
+ &:active {
+ color: $text-button-color;
+ background-color: $text-button-focus-color;
+ }
+ }
+}
+
+.actions-modal {
+ @include shadow-24dp;
+ background: $card-bg-color;
+ border-radius: $card-radius;
+
+ ul li:not(:empty) a {
+ color: $ui-text-color;
+ font-size: 16px;
+
+ &:hover {
+ background: $card-bg-hover-color;
+ color: $ui-text-color;
+ }
+ }
+
+ .dropdown-menu__separator { border-bottom-color: $border-color }
+
+ .status {
+ background: $card-bg-color;
+ border-bottom-color: $border-color;
+ padding-top: 12px;
+ padding-bottom: 12px;
+
+ &__avatar {
+ left: 12px;
+ top: 12px;
+ }
+ }
+}
+
+.report-modal {
+ @include shadow-24dp;
+ background: $card-bg-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__target {
+ padding: 24px;
+ text-align: left;
+ font-weight: bold;
+ }
+
+ &__container {
+ border-top: none;
+ }
+
+ &__comment {
+ border-right: none;
+
+ .setting-text-label { color: $ui-text-color }
+ }
+}
+
+.embed-modal .embed-modal__container {
+ padding: 0 24px 24px 24px;
+
+ .hint {
+ margin-bottom: 16px;
+ color: $secondary-text-color;
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/responsive.scss b/app/javascript/styles/mastodon-material/theme/responsive.scss
new file mode 100644
index 000000000..87cb693f9
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/responsive.scss
@@ -0,0 +1,140 @@
+.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 }
+
+ span {
+ margin-left: 8px;
+ vertical-align: text-bottom;
+ }
+ }
+
+ &__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;
+ width: $fab-size;
+ height: $fab-size;
+ bottom: 16px;
+ right: 16px;
+
+ &:hover { background: $floating-action-button-hover-color }
+
+ &:active,
+ &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+ .column { margin: 0 !important }
+
+ .account__header {
+ &__account-note,
+ &__bio .account__header__content { padding: 8px 16px }
+ }
+
+ .search__input { padding: 16px 46px }
+
+ .search__icon {
+ .fa {
+ top: 16px;
+ left: 16px;
+ }
+
+ .fa-times-circle.active { left: unset }
+ }
+}
+
+// small size screen
+@media screen and (max-width: 415px) {
+ .public-layout { padding-top: 64px }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+ .tabs-bar {
+ margin-bottom: 0;
+
+ &__wrapper {
+ padding-top: 0;
+
+ .tabs-bar { margin-bottom: 0 }
+ }
+ }
+
+ .columns-area__panels {
+ &__main {
+ @include shadow-1dp;
+ padding: 0;
+ }
+
+ &__pane { padding: 0 16px }
+ }
+}
+
+//single column mode
+@media screen and (min-width: 631px) {
+ .column:first-child,
+ .drawer:first-child { padding-left: 8px }
+
+ .column:last-child,
+ .drawer:last-child { padding-right: 8px }
+
+ .tabs-bar__link {
+ &:hover {
+ background: $tab-indicator-bg-hover-color;
+ border-bottom-color: transparent;
+ }
+
+ &:active,
+ &:focus {
+ background: $tab-indicator-bg-focus-color;
+ border-bottom-color: $tab-bg-color;
+ }
+
+ &.active { border-bottom-color: $tab-indicator-active-color }
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .admin-wrapper {
+ .sidebar {
+ ul {
+ background: $card-bg-color;
+
+ a,
+ ul a { border-bottom: none }
+ }
+ }
+
+ .sidebar-wrapper { @include shadow-4dp }
+ }
+
+ .public-layout .public-account-header {
+ &__bar { background: $card-bg-color }
+
+ &__tabs__name h1 {
+ color: $primary-text-color;
+
+ small { color: $secondary-text-color }
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/statuses.scss b/app/javascript/styles/mastodon-material/theme/statuses.scss
new file mode 100644
index 000000000..00b587298
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/statuses.scss
@@ -0,0 +1,271 @@
+.status {
+ padding: 12px 12px 4px 70px;
+ border-bottom: 1px solid $border-color;
+
+ &__expand { width: 70px }
+
+ &__info {
+ font-size: $name-font-size;
+ 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: $status-font-size;
+ padding-top: 4px;
+ color: $primary-text-color;
+
+ a {
+ color: $link-text-color;
+
+ &.unhandled-link { color: $link-text-color }
+ }
+
+ p { margin-bottom: 16px }
+
+ .status__content__spoiler-link { @include button-type($button-on-status) }
+
+ &__spoiler-link {
+ border: 0;
+ margin: 0 4px;
+ color: $text-button-color;
+ }
+
+ &__read-more-button {
+ @include button-type($button-on-status);
+ padding: 4px 6px;
+ margin: 4px;
+
+ &:hover { text-decoration: none }
+ }
+ }
+
+ &__action-bar {
+ margin-top: 4px;
+
+ &__counter {
+ margin-right: 6px;
+
+ &__label {
+ font-size: 14px;
+ color: $info-text-color;
+ }
+ }
+ }
+
+ &__action-bar-button {
+ margin-right: 4px;
+
+ &.icon-button {
+ @include icon-button;
+ padding: 8px;
+ box-sizing: content-box;
+
+ &--with-counter {
+ margin-right: 4px;
+ width: auto !important;
+
+ &:hover { background: transparent }
+ }
+ }
+ }
+
+ &__action-bar-dropdown {
+ width: 36px !important;
+ height: 36px !important;
+ box-sizing: content-box;
+
+ .icon-button {
+ @include icon-button;
+ padding: 8px;
+ box-sizing: content-box;
+
+ &.active {
+ color: $icon-hover-color;
+ background: $icon-bg-active-color;
+ }
+
+ &:hover {
+ color:$icon-hover-color;
+ background: $icon-bg-hover-color;
+ }
+ }
+ }
+
+ &__prepend {
+ color: $secondary-text-color;
+ margin-left: 64px;
+
+ .status__display-name strong { color: $secondary-text-color }
+ }
+
+ &.status-direct:not(.read) {
+ background: transparent;
+ border-bottom-color: $border-color;
+ }
+
+ &__visibility-icon { color: $icon-color }
+}
+
+.status-card {
+ color: $icon-color;
+ border-color: $border-color;
+ outline: none;
+ margin-top: 16px;
+
+ &__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-bg-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 }
+ }
+
+ &.horizontal {
+ border-radius: 0;
+
+ .status-card {
+ &__image-preview { border-radius: 0 }
+
+ &__image-image { border-radius: 0 }
+ }
+ }
+}
+
+a.status-card {
+ &:hover { background-color: $card-bg-color }
+}
+
+.embed .status,
+.public-layout .status { padding: 16px 16px 16px 80px }
+
+// 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-bg-color;
+ padding: 16px;
+
+ &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
+
+ &__display-name {
+ color: $secondary-text-color;
+
+ strong { color: $primary-text-color }
+ }
+
+ &__meta {
+ margin-top: 16px;
+ color: $info-text-color;
+ }
+
+ &__action-bar {
+ background: $card-bg-color;
+ border-top: none;
+ border-bottom: 1px solid $border-color;
+ padding: 8px 0;
+ }
+
+ &__action-bar-dropdown {
+ .icon-button {
+ @include icon-button;
+ padding: 8px;
+ box-sizing: content-box;
+
+ &.active {
+ color: $icon-hover-color;
+ background: $icon-bg-active-color;
+ }
+ }
+ }
+
+ &__button {
+ .icon-button {
+ @include icon-button;
+ padding: 8px;
+ box-sizing: content-box;
+ }
+ }
+
+ .button.logo-button { margin-bottom: 16px }
+}
+
+// search user trends
+.display-name {
+ &__html { color: $primary-text-color }
+ &__account { color: $secondary-text-color }
+}
+
+.activity-stream {
+ @include shadow-1dp;
+ margin-bottom: 16px;
+ border-radius: $card-radius;
+
+ .entry {
+ background: $card-bg-color;
+
+ &:first-child {
+ .detailed-status,
+ .load-more,
+ .status { border-radius: $card-radius $card-radius 0 0 }
+ }
+ }
+}
+
+.entry.h-cite.p-comment.entry-successor { border-top: 1px solid $border-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/tables.scss b/app/javascript/styles/mastodon-material/theme/tables.scss
new file mode 100644
index 000000000..3e39d086b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/tables.scss
@@ -0,0 +1,83 @@
+.batch-table {
+ border: 1px solid $border-color;
+ border-radius: 4px;
+
+ &__toolbar {
+ border: none;
+ border-bottom: 1px solid $border-color;
+ background: $list-bg-color;
+ border-radius: 4px 4px 0 0;
+
+ &__actions { padding-right: 16px }
+ }
+
+ &__row {
+ border: none;
+ border-bottom: 1px solid $border-color;
+ background: $list-bg-color;
+
+ &:nth-child(2n) {
+ background: $list-bg-color;
+
+ &:hover { background: $list-bg-hover-color }
+ }
+
+ &:last-child {
+ border-bottom: none;
+ border-radius: 0 0 4px 4px;
+ }
+
+ &:hover { background: $list-bg-hover-color }
+ }
+}
+
+a.table-action-link,
+button.table-action-link {
+ padding: 4px 8px;
+ margin-right: 0;
+ color: $text-button-color;
+ border-radius: $button-radius;
+
+ i.fa { margin-right: 8px }
+
+ &:hover {
+ color: $text-button-color;
+ background: $text-button-hover-color;
+ }
+
+ &:first-child { padding-left: 8px }
+}
+
+.table-wrapper {
+ margin-bottom: 24px;
+ border-radius: 2px;
+}
+
+.table {
+ border: 1px solid $border-color;
+
+ td,
+ th {
+ background: $list-bg-color;
+ border-top: 1px solid $border-color;
+ }
+
+ &>thead {
+ color: $ui-text-color;
+
+ &>tr>th { border-bottom: 1px solid $border-color }
+ }
+
+ &>tbody {
+ color: $ui-text-color;
+
+ &>tr {
+ &>td { vertical-align: middle }
+
+ &:nth-child(odd) {
+ &>td,
+ &>th { background: transparent }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/theme.scss b/app/javascript/styles/mastodon-material/theme/theme.scss
new file mode 100644
index 000000000..a9421cd43
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/theme.scss
@@ -0,0 +1,6 @@
+/*
+* Mastodon Material 0.3.0
+* Copyright (C) 2021 Rintan, Genbu Project
+*/
+
+@import 'about', 'account', 'admin', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'icons', 'forms', 'media', 'modal', 'responsive', 'statuses', 'tables', 'variables', 'widgets';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/variables.scss b/app/javascript/styles/mastodon-material/theme/variables.scss
new file mode 100644
index 000000000..2ad8824b8
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/variables.scss
@@ -0,0 +1 @@
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/widgets.scss b/app/javascript/styles/mastodon-material/theme/widgets.scss
new file mode 100644
index 000000000..050e9b127
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/widgets.scss
@@ -0,0 +1,163 @@
+.hero-widget {
+ @include shadow-2dp;
+ margin-bottom: 16px;
+
+ &__img {
+ border-radius: $card-radius $card-radius 0 0;
+ background: $card-bg-color;
+
+ img { border-radius: $card-radius $card-radius 0 0 }
+ }
+
+ &__text {
+ background: $card-bg-color;
+ padding: 16px;
+ color: $primary-text-color;
+ border-radius: 0 0 $card-radius $card-radius;
+
+ a { color: $link-text-color }
+ }
+}
+
+.endorsements-widget {
+ padding-bottom: 8px;
+ margin-bottom: 8px;
+
+ h4 {
+ padding: 12px 16px;
+ color: $section-text-color;
+ }
+
+ .account { padding: 8px 16px }
+}
+
+.trends-widget h4 { color: $section-text-color }
+
+.placeholder-widget {
+ border-radius: 0;
+ border: none;
+ color: $tips-text-color;
+ margin-bottom: 16px;
+}
+
+.directory__tag {
+ margin-bottom: 16px;
+
+ &>a,
+ &>div {
+ @include shadow-2dp;
+ background: $card-bg-color;
+ border-radius: $card-radius;
+ padding: 16px;
+
+ &:active,
+ &:focus,
+ &:hover { background: $card-bg-color }
+ }
+
+ h4 {
+ color: $primary-text-color;
+
+ .fa { color: $icon-color }
+
+ small { color: $info-text-color }
+ }
+}
+
+.contact-widget {
+ color: $ui-text-color;
+
+ h4 { color: $ui-text-color }
+
+ .account { padding: 4px 0 8px }
+
+ &>a {
+ padding: 0 8px 4px;
+ color: $primary-text-color;
+ }
+}
+
+.box-widget {
+ @include shadow-2dp;
+ padding: 16px;
+ border-radius: $card-radius;
+ background: $card-bg-color;
+}
+
+.rich-formatting {
+ color: $ui-text-color;
+
+ h1, h2, h3, h4, h5, h6 { color: $primary-text-color }
+
+ a { color: $link-text-color }
+
+ li, p { color: $ui-text-color }
+
+ strong { color: $primary-text-color }
+
+ table {
+ border-radius: 4px;
+ border: 1px solid $border-color;
+
+ thead tr,
+ tbody tr {
+ color: $ui-text-color;
+ border-bottom: 1px solid $border-color;
+ }
+ }
+}
+
+.table-of-contents {
+ background: $bg-color;
+ border-radius: 0;
+
+ li {
+ ul {
+ padding-left: 16px;
+ border-bottom: 1px solid $border-color;
+ }
+
+ a {
+ padding: 16px;
+ color: $ui-text-color;
+ border-bottom: 1px solid $border-color;
+ }
+ }
+}
+
+.page-header {
+ background: $card-bg-color;
+ padding: 42px 16px;
+ margin: 16px 0;
+
+ h1 {
+ color: $primary-text-color;
+ margin-bottom: 8px;
+ }
+
+ p { color: $ui-text-color }
+}
+
+.memoriam-widget,
+.page-header {
+ @include shadow-4dp;
+ border-radius: $card-radius;
+}
+
+.accounts-table {
+ tbody td { padding: 16px 8px }
+
+ .fa.active,
+ .fa.active.passive { color: $icon-color }
+
+ &__count {
+ color: $ui-text-color;
+
+ small { color: $secondary-text-color }
+ }
+}
+
+.statuses-grid .detailed-status {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon/accessibility.scss b/app/javascript/styles/mastodon/accessibility.scss
index c5bcb5941..a4040f736 100644
--- a/app/javascript/styles/mastodon/accessibility.scss
+++ b/app/javascript/styles/mastodon/accessibility.scss
@@ -7,7 +7,7 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
.emojione {
@each $emoji in $emojis-requiring-inversion {
&[title=':#{$emoji}:'] {
- @extend %emoji-color-inversion;
+ filter: invert(1);
}
}
}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d3dd1af60..6fdb3d600 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -723,10 +723,29 @@
justify-content: flex-end;
min-width: 0;
flex: 0 0 auto;
-
+ padding-top: 10px;
+
.compose-form__publish-button-wrapper {
overflow: hidden;
- padding-top: 10px;
+
+ button {
+ display: inline-block;
+ width: auto;
+
+ margin-right: 0.5em;
+ }
+
+ button:last-child {
+ margin-right: auto;
+ }
+ }
+ }
+
+ .compose-form__utilBtns {
+ padding-top: 10px;
+
+ * {
+ margin-bottom: 1em;
}
}
}
@@ -2046,7 +2065,7 @@ a.account__display-name {
}
&__inner {
- position: fixed;
+ position: static;
width: 285px;
pointer-events: auto;
height: 100%;
@@ -2415,6 +2434,7 @@ a.account__display-name {
}
.getting-started__wrapper,
+ .getting-started__trends,
.search {
margin-bottom: 10px;
}
@@ -2591,24 +2611,13 @@ a.account__display-name {
margin-bottom: 10px;
height: calc(100% - 20px);
overflow-y: auto;
- display: flex;
- flex-direction: column;
-
- & > a {
- flex: 0 0 auto;
- }
hr {
- flex: 0 0 auto;
border: 0;
background: transparent;
border-top: 1px solid lighten($ui-base-color, 4%);
margin: 10px 0;
}
-
- .flex-spacer {
- background: transparent;
- }
}
.drawer__pager {
@@ -3000,10 +3009,8 @@ a.account__display-name {
}
&__trends {
+ background: $ui-base-color;
flex: 0 1 auto;
- opacity: 1;
- animation: fade 150ms linear;
- margin-top: 10px;
h4 {
font-size: 12px;
@@ -3029,15 +3036,11 @@ a.account__display-name {
@media screen and (max-height: 670px) {
display: none;
}
+ }
- .trends__item {
- border-bottom: 0;
- padding: 10px;
-
- &__current {
- color: $darker-text-color;
- }
- }
+ &__scrollable {
+ max-height: 100%;
+ overflow-y: auto;
}
}
@@ -6365,6 +6368,12 @@ noscript {
}
}
+.embed-modal__qrcode {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
.account__moved-note {
padding: 14px 10px;
padding-bottom: 16px;
@@ -6932,7 +6941,7 @@ noscript {
font-size: 24px;
line-height: 36px;
font-weight: 500;
- text-align: right;
+ text-align: center;
padding-right: 15px;
margin-left: 5px;
color: $secondary-text-color;
@@ -6942,12 +6951,7 @@ noscript {
flex: 0 0 auto;
width: 50px;
- path:first-child {
- fill: rgba($highlight-text-color, 0.25) !important;
- fill-opacity: 1 !important;
- }
-
- path:last-child {
+ path {
stroke: lighten($highlight-text-color, 6%) !important;
fill: none !important;
}
diff --git a/app/javascript/styles/material-auto.scss b/app/javascript/styles/material-auto.scss
new file mode 100644
index 000000000..116958187
--- /dev/null
+++ b/app/javascript/styles/material-auto.scss
@@ -0,0 +1,2 @@
+@use 'material-dark';
+@media (prefers-color-scheme: light) { @import 'material-light'; }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black.scss b/app/javascript/styles/material-black.scss
new file mode 100644
index 000000000..6383c8bd1
--- /dev/null
+++ b/app/javascript/styles/material-black.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material/profiles/material-black/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark.scss b/app/javascript/styles/material-dark.scss
new file mode 100644
index 000000000..9a4be9797
--- /dev/null
+++ b/app/javascript/styles/material-dark.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material/profiles/material-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-light.scss b/app/javascript/styles/material-light.scss
new file mode 100644
index 000000000..047c5802d
--- /dev/null
+++ b/app/javascript/styles/material-light.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material/profiles/material-light/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/plus.scss b/app/javascript/styles/plus.scss
new file mode 100644
index 000000000..75d6f9452
--- /dev/null
+++ b/app/javascript/styles/plus.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material/profiles/plus/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark.scss b/app/javascript/styles/y-zu-dark.scss
new file mode 100644
index 000000000..248f4441b
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material/profiles/y-zu-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light.scss b/app/javascript/styles/y-zu-light.scss
new file mode 100644
index 000000000..090f0c00e
--- /dev/null
+++ b/app/javascript/styles/y-zu-light.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material/profiles/y-zu-light/loader';
\ No newline at end of file
diff --git a/app/lib/formatter.rb b/app/lib/formatter.rb
index fd6537526..843446414 100644
--- a/app/lib/formatter.rb
+++ b/app/lib/formatter.rb
@@ -1,6 +1,7 @@
# frozen_string_literal: true
require 'singleton'
+require_relative './formatter_markdown'
class Formatter
include Singleton
@@ -34,12 +35,21 @@ class Formatter
linkable_accounts << status.account
html = raw_content
+
+ mdFormatter = Formatter_Markdown.new(html)
+ html = mdFormatter.formatted
+
html = "RT @#{prepend_reblog} #{html}" if prepend_reblog
html = encode_and_link_urls(html, linkable_accounts)
html = encode_custom_emojis(html, status.emojis, options[:autoplay]) if options[:custom_emojify]
html = simple_format(html, {}, sanitize: false)
html = html.delete("\n")
+ mdLinkDecoder = MDLinkDecoder.new(html)
+ html = mdLinkDecoder.decode
+
+ html.gsub!(/(&)/){"&"}
+
html.html_safe # rubocop:disable Rails/OutputSafety
end
@@ -111,13 +121,18 @@ class Formatter
def encode_and_link_urls(html, accounts = nil, options = {})
entities = utf8_friendly_extractor(html, extract_url_without_protocol: false)
+ mdExtractor = MDExtractor.new(html)
+ entities.concat(mdExtractor.extractEntities)
+
if accounts.is_a?(Hash)
options = accounts
accounts = nil
end
rewrite(html.dup, entities) do |entity|
- if entity[:url]
+ if entity[:markdown]
+ html[entity[:indices][0]...entity[:indices][1]]
+ elsif entity[:url]
link_to_url(entity, options)
elsif entity[:hashtag]
link_to_hashtag(entity)
diff --git a/app/lib/formatter_markdown.rb b/app/lib/formatter_markdown.rb
new file mode 100644
index 000000000..13399069a
--- /dev/null
+++ b/app/lib/formatter_markdown.rb
@@ -0,0 +1,367 @@
+require 'uri'
+require 'redcarpet'
+require 'redcarpet/render_strip'
+
+class Formatter_Markdown
+ def initialize(html)
+ @html = html.dup
+ end
+
+ def formatted
+ mdRenderer = CustomMDRenderer.new(
+ strikethrough: true,
+ hard_wrap: true,
+ autolink: false,
+ superscript:false,
+ fenced_link: true,
+ fenced_image: true,
+ no_intra_emphasis: true,
+ no_links: true,
+ no_styles: true,
+ no_images: true,
+ filter_html: true,
+ escape_html: true,
+ safe_links_only: true,
+ with_toc_data: true,
+ xhtml: false,
+ prettify: true,
+ link_attributes: true
+ )
+
+ md = Redcarpet::Markdown.new(
+ mdRenderer,
+ strikethrough: true,
+ hard_wrap: true,
+ superscript:false,
+ autolink: false,
+ space_after_headers: true,
+ no_intra_emphasis: true,
+ no_links: true,
+ no_styles: true,
+ no_images: true,
+ filter_html: true,
+ escape_html: true,
+ safe_links_only: true,
+ with_toc_data: true,
+ xhtml: false,
+ prettify: true,
+ link_attributes: true
+ )
+ s = @html
+ s.gsub!(/\n[\n]+/) {"\n \n"}# 改行周りの問題を修正
+ s.gsub!(/`[ ]+`/) {"` `"}# code内が半角スペースのみだとHTMLが壊れるのでそれの回避
+
+ renderedMD = md.render(s)
+
+ result = renderedMD
+ result.gsub!(/(<\w+)([^>]*>)/) { "#{$1} data-md='true' #{$2}" }# ToDo data-md="true" を認識して他鯖の人にmarkdownの使用を伝える機能の実装
+ result.gsub!(/(https?:\/\/[^<>"\[\] ]+)/){"#{$1} "}#URLの後ろにスペースをねじ込む奴 mastodonのURL認識がゆるいのをmarkdownで対処
+
+ result
+
+ end
+
+ class CustomMDRenderer < Redcarpet::Render::HTML
+
+ #基本的な実装の流れ
+ #URLの削除(mastodonの機能上URLとして認識されると十中八九HTMLが壊れるので)
+ #markdownコンテンツ内でのmarkdownコンテンツの禁止(意図しないHTMLタグの生成によってHTMLの不正出力を防ぐ目的)
+ #最後にHTMLに出力される際にHTML的にヤバイ子たちのエスケープ
+
+ def paragraph(text)
+ %(#{text.strip})
+ end
+
+ def linebreak()
+ %(
)
+ end
+
+ def block_quote(quote)
+ urlRemoved = "#{remove_url(quote)}"
+ escapedContents = "#{blockquote_markdown_escape(urlRemoved)}"
+ %(
#{escapedContents.strip}
)
+ end
+
+ def header(text, header_level)
+ urlRemoved = "#{remove_url(text)}"
+ mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+ %(
#{encode(mdContentsRemoved)}\n)
+ end
+
+ def block_code(code, language)
+ %(
#{code.strip})
+ end
+
+ def codespan(code)
+ urlRemoved = "#{remove_url(code)}"
+ escapedCode = "#{escape_bbcode(urlRemoved)}"
+ encoded = "#{encode(escapedCode)}"
+ %(
#{code_contents(encoded)}
)
+ end
+
+ def list(contents, list_type)
+ if list_type == :unordered
+ %(
)
+ elsif list_type == :ordered
+ %(
#{contents.strip}
)
+ else
+ %(<#{list_type} class='md-contents'>#{contents.strip}#{list_type}>)
+ end
+ end
+
+ def list_item(text, list_type)
+ urlRemoved = "#{remove_url(text)}"
+ mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+ %(
#{encode(mdContentsRemoved)})
+ end
+
+ def emphasis(text)
+ urlRemoved = "#{remove_url(text)}"
+ mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+ %(
#{encode(mdContentsRemoved)})
+ end
+
+ def double_emphasis(text)
+ urlRemoved = "#{remove_url(text)}"
+ mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+ %(
#{encode(mdContentsRemoved)})
+ end
+
+ def triple_emphasis(text)
+ urlRemoved = "#{remove_url(text)}"
+ mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+ %(
#{encode(mdContentsRemoved)})
+ end
+
+ def strikethrough(text)
+ urlRemoved = "#{remove_url(text)}"
+ mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+ %(
#{encode(mdContentsRemoved)})
+ end
+
+ def superscript(text)
+ urlRemoved = "#{remove_url(text)}"
+ mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+ %(
#{encode(mdContentsRemoved)})
+ end
+
+ def underline(text)
+ urlRemoved = "#{remove_url(text)}"
+ mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+ %(
#{encode(mdContentsRemoved)})
+ end
+
+ def highlight(text)
+ urlRemoved = "#{remove_url(text)}"
+ mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+ %(
#{encode(mdContentsRemoved)})
+ end
+
+ #オートリンクはmastodonとの相性が悪いので基本的には使わない
+
+ def autolink(link, link_type)
+ %(
リンク)
+ end
+
+ #https以外の物がURLとして記入された時にTextをHTML的に考えて安全に表示するように変更
+
+ def image(link, title, alt_text)
+
+ if alt_text =~ /[<>"\[\] ]+/
+ alt_text = "設定なし"
+ end
+
+ imgcheck = "#{link}"
+ if imgcheck !~ /\Ahttps:\/\/[^<>"\[\] ]+\z/
+ %(#{encode(alt_text)})
+ else
+ %(
画像が添付されています。})
)
+ end
+ end
+
+ def link(link, title, content)
+
+ if content =~ /([<>"\[\] ]+|https?:\/\/|#|@)/
+ content = "リンク"
+ elsif content !~ /.+/
+ content = "リンク"
+ end
+
+ linkcheck = "#{link}"
+ if linkcheck !~ /\Ahttps:\/\/[^<>"\[\] ]+\z/
+ %(#{encode(content)})
+ else
+ %(
#{encode(content)})
+ end
+ end
+
+ #ここから下はいろいろエスケープするための奴
+
+ #HTML的に考えてよろしくない子たちをエスケープする奴
+ def encode(html)
+ HTMLEntities.new.encode(html)
+ end
+
+ #markdownコンテンツないでURLが生成されるのを防ぐためのエスケープする奴
+ def remove_url(string)
+ url = string.gsub(/https?:\/\//){ "URL:" }
+ reply = url.gsub(/@/){ "@" }
+ hashTag = reply.gsub(/#/){ "#" }
+ end
+
+ #前々から要望があったcode内でBBCodeを無効化するための奴
+ def escape_bbcode(string)
+ string.gsub(/\[/){ "[" }
+ end
+
+ #markdownの中でmarkdownを展開させないためのエスケープする奴
+
+ #blockquote以外は下のが使える
+ def markdown_escape(string)
+ string.gsub(/<[^>]+>/) { "" }
+ end
+
+ #blockquoteコンテンツ内でblockquoteタグだけを許可するためのエスケープ
+ def blockquote_markdown_escape(string)
+ string.gsub(/<([\/]?a[^>]*|[\/]?img[^>]*|[\/]?code[^>]*|[\/]?h[1-6][^>]*|[\/]?sup[^>]*|[\/]?sub[^>]*|[\/]?small[^>]*|[\/]?ul[^>]*|[\/]?ol[^>]*|[\/]?li[^>]*|[\/]?hr[^>]*|[\/]?s[^>]*|[\/]?u[^>]*|[\/]?mark[^>]*)>/) { "" }
+ end
+
+ #code内の一部を色分けするための変更
+ def code_contents(string)
+ simple = string.gsub(/(true|error|false|failed|def|puts|end|fn|let|mut|use|String|println!)/ ,
+ "true" => "
#{:true}",
+ "error" => "
#{:error}",
+ "false" => "
#{:false}",
+ "failed" => "
#{:failed}",
+ "def" => "
#{:def}",
+ "puts" => "
#{:puts}",
+ "end" => "
#{:end}",
+ "fn" => "
#{:fn}",
+ "let" => "
#{:let}",
+ "mut" => "
#{:mut}",
+ "use" => "
#{:use}",
+ "String" => "
#{:String}",
+ "println!" => "
#{:println!}",
+ )
+ simple.gsub(/("[a-zA-Z0-9_ ,]+")/){ "
#{$1}" }
+# "" => "
#{:}",
+ end
+
+ #テストで書きなぐった奴
+ def html_escape(string)
+ string.gsub(/['&\"<>\/]/, {
+ '&' => '&',
+ '<' => '<',
+ '>' => '>',
+ '"' => '"',
+ "'" => ''',
+ "/" => '/',
+ })
+ end
+
+ end
+
+end
+
+#URLとかいう人類には早すぎたやばい子たちを大人しくするために必要な機構
+
+class MDLinkDecoder
+ def initialize(html)
+ @html = html.dup
+ end
+
+ def decode
+ imageDecoded = @html.gsub(/
![]()
]*)>/) { "

" }
+
+ imageDecoded.gsub(/
]*)>/) { "" }
+ end
+end
+
+#エスケープを回避するHTMLタグの設定とかその他
+
+class MDExtractor
+ def initialize(html)
+ @html = html.dup
+ end
+
+ def extractEntities
+ [
+ extractByHTMLTagName("h1"),
+ extractByHTMLTagName("h2"),
+ extractByHTMLTagName("h3"),
+ extractByHTMLTagName("h4"),
+ extractByHTMLTagName("h5"),
+ extractByHTMLTagName("h6"),
+ extractByHTMLTagName("em"),
+ extractByHTMLTagName("sup"),
+ extractByHTMLTagName("sub"),
+ extractByHTMLTagName("small"),
+ extractByHTMLTagName("u"),
+ extractByHTMLTagName("strong"),
+ extractByHTMLTagName("ul", false, false, "li"),
+ extractByHTMLTagName("ol", false, false, "li"),
+ extractByHTMLTagName("code"),
+ extractByHTMLTagName("blockquote", false),
+ extractByHTMLTagName("hr", false, true),
+ extractByHTMLTagName("br", false, true),
+ extractByHTMLTagName("a"),
+ extractByHTMLTagName("img", false, true),
+ extractByHTMLTagName("s"),
+ extractByHTMLTagName("span")
+ ].flatten.compact
+ end
+
+ def extractByHTMLTagName(tagName, isNoNest = true, isSingle = false, itemTagName = nil)
+ entities = []
+
+ @html.to_s.scan(htmlTagPatternByCond(tagName, isNoNest, isSingle, itemTagName)) do
+ match = $~
+
+ beginPos = match.char_begin(0)
+ endPos = match.char_end(0)
+ #puts "MDExtractor extracted with:\n" + @html + "\nbeginPos: " + beginPos.to_s + ", endPos: " + endPos.to_s + ", length: " + @html.length.to_s
+
+ entity = {
+ :markdown => true,
+ :indices => [beginPos, endPos]
+ }
+
+ entities.push(entity)
+ end
+
+ entities
+ end
+
+ def htmlTagPatternByCond(tagName, isNoNest, isSingle, itemTagName)
+ if isSingle
+ htmlTagPatternSingle(tagName)
+ elsif isNoNest
+ htmlTagPatternNoNest(tagName)
+ elsif itemTagName && itemTagName.length > 0
+ htmlTagPatternOuterMostWithItem(tagName, itemTagName)
+ else
+ htmlTagPatternOuterMost(tagName)
+ end
+ end
+
+ def htmlTagPattern(tagName)
+ Regexp.compile("<#{tagName} data-md=[^>]*>(?:[^<]|<#{tagName} data-md=[^>]*>|<\\/#{tagName}>)*(?:<\\/#{tagName}>)*")
+ end
+
+ def htmlTagPatternNoNest(tagName)
+ Regexp.compile("<#{tagName} data-md=[^>]*>(?:.|\n)*?<\\/#{tagName}>")
+ end
+
+ def htmlTagPatternSingle(tagName)
+ Regexp.compile("<#{tagName} data-md=[^>]*>")
+ end
+
+ # https://stackoverflow.com/questions/546433/regular-expression-to-match-outer-brackets
+ def htmlTagPatternOuterMost(tagName)
+ Regexp.compile("<#{tagName} data-md=[^>]*>(?:[^<>]|(\\g<0>))*<\/#{tagName}>")
+ end
+
+ def htmlTagPatternOuterMostWithItem(tagName, itemTagName)
+ Regexp.compile("<#{tagName} data-md=[^>]*>(?:[^<>]|<#{itemTagName} data-md=[^>]*>|<\\/#{itemTagName}>|(\\g<0>))*<\/#{tagName}>")
+ end
+end
diff --git a/app/validators/status_length_validator.rb b/app/validators/status_length_validator.rb
index d036f1925..90924e0ce 100644
--- a/app/validators/status_length_validator.rb
+++ b/app/validators/status_length_validator.rb
@@ -1,7 +1,7 @@
# frozen_string_literal: true
class StatusLengthValidator < ActiveModel::Validator
- MAX_CHARS = 500
+ MAX_CHARS = 2048
URL_PLACEHOLDER = "\1#{'x' * 23}"
def validate(status)
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d8ad5bd84..441a7c0dc 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1375,6 +1375,18 @@ en:
contrast: Mastodon (High contrast)
default: Mastodon (Dark)
mastodon-light: Mastodon (Light)
+ mastodon-auto: Mastodon (Auto)
+ # additional theme
+ material-black: Material (Black)
+ material-dark: Material (Dark)
+ material-light: Material (Light)
+ material-auto: Material (Auto)
+ mastodon-material-dark: Mastodon Material (Dark)
+ mastodon-material-light: Mastodon Material (Light)
+ mastodon-material-auto: Mastodon Material (Auto)
+ plus: Plus
+ y-zu-dark: Y-zu (Dark)
+ y-zu-light: Y-zu (Light)
time:
formats:
default: "%b %d, %Y, %H:%M"
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index b43b31e39..4ef627e22 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -1344,6 +1344,18 @@ ja:
contrast: Mastodon (ハイコントラスト)
default: Mastodon (ダーク)
mastodon-light: Mastodon (ライト)
+ mastodon-auto: Mastodon (自動)
+ # 追加テーマ
+ material-black: Material (黒)
+ material-dark: Material (ダーク)
+ material-light: Material (ライト)
+ material-auto: Material (自動)
+ mastodon-material-dark: Mastodon Material (ダーク)
+ mastodon-material-light: Mastodon Material (ライト)
+ mastodon-material-auto: Mastodon Material (自動)
+ plus: Plus
+ y-zu-dark: Y-zu (ダーク)
+ y-zu-light: Y-zu (ライト)
time:
formats:
default: "%Y年%m月%d日 %H:%M"
diff --git a/config/settings.yml b/config/settings.yml
index 06cee2532..b3a77f6c3 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -30,7 +30,7 @@ defaults: &defaults
show_application: true
system_font_ui: false
noindex: false
- theme: 'default'
+ theme: 'mastodon-auto'
aggregate_reblogs: true
advanced_layout: false
use_blurhash: true
diff --git a/config/themes.yml b/config/themes.yml
index 9c21c9459..df530bd65 100644
--- a/config/themes.yml
+++ b/config/themes.yml
@@ -1,3 +1,16 @@
default: styles/application.scss
contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss
+mastodon-auto: styles/mastodon-auto.scss
+
+# 追加テーマ
+material-black: styles/material-black.scss
+material-dark: styles/material-dark.scss
+material-light: styles/material-light.scss
+material-auto: styles/material-auto.scss
+mastodon-material-dark: styles/mastodon-material-dark.scss
+mastodon-material-light: styles/mastodon-material-light.scss
+mastodon-material-auto: styles/mastodon-material-auto.scss
+plus: styles/plus.scss
+y-zu-dark: styles/y-zu-dark.scss
+y-zu-light: styles/y-zu-light.scss
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
index 7a99a1964..1aa62f0c3 100644
Binary files a/public/android-chrome-192x192.png and b/public/android-chrome-192x192.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
index b12aa55a3..b584148ce 100644
Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ
diff --git a/public/avatars/original/missing.png b/public/avatars/original/missing.png
index 34c8e45e6..fb27b84df 100644
Binary files a/public/avatars/original/missing.png and b/public/avatars/original/missing.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 79000c9cc..c18e3bbde 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/yarn.lock b/yarn.lock
index c0ec8587d..2a75bc009 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3619,7 +3619,7 @@ csstype@^3.0.2:
version "3.0.6"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.6.tgz#865d0b5833d7d8d40f4e5b8a6d76aea3de4725ef"
integrity sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==
-
+
cyclist@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -6156,6 +6156,24 @@ istanbul-lib-coverage@^3.0.0:
resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
+istanbul-lib-coverage@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
+ integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
+
+istanbul-lib-instrument@^3.0.0, istanbul-lib-instrument@^3.0.1:
+ version "3.3.0"
+ resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
+ integrity sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==
+ dependencies:
+ "@babel/generator" "^7.4.0"
+ "@babel/parser" "^7.4.3"
+ "@babel/template" "^7.4.0"
+ "@babel/traverse" "^7.4.3"
+ "@babel/types" "^7.4.0"
+ istanbul-lib-coverage "^2.0.5"
+ semver "^6.0.0"
+
istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
@@ -6166,6 +6184,19 @@ istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
istanbul-lib-coverage "^3.0.0"
semver "^6.3.0"
+istanbul-lib-instrument@^4.0.0:
+ version "4.0.1"
+ resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.1.tgz#61f13ac2c96cfefb076fe7131156cc05907874e6"
+ integrity sha512-imIchxnodll7pvQBYOqUu88EufLCU56LMeFPZZM/fJZ1irYcYdqroaV+ACK1Ila8ls09iEYArp+nqyC6lW1Vfg==
+ dependencies:
+ "@babel/core" "^7.7.5"
+ "@babel/parser" "^7.7.5"
+ "@babel/template" "^7.7.4"
+ "@babel/traverse" "^7.7.4"
+ "@istanbuljs/schema" "^0.1.2"
+ istanbul-lib-coverage "^3.0.0"
+ semver "^6.3.0"
+
istanbul-lib-report@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
@@ -7218,6 +7249,11 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+minimist@~0.0.1:
+ version "0.0.10"
+ resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+ integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
+
minipass-collect@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
@@ -8104,6 +8140,11 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+picomatch@^2.0.5:
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
+ integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
+
pify@^2.0.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -10895,6 +10936,11 @@ unicode-match-property-value-ecmascript@^1.2.0:
resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
+unicode-match-property-value-ecmascript@^1.2.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
+ integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
+
unicode-property-aliases-ecmascript@^1.0.4:
version "1.1.0"
resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"