diff --git a/app/javascript/styles/mastodon-material-dark.scss b/app/javascript/styles/mastodon-material-dark.scss
index 901a441be..f35131435 100644
--- a/app/javascript/styles/mastodon-material-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark.scss
@@ -1,18 +1,3 @@
@charset "UTF-8";
-@import 'application';
-@import 'mastodon-material-dark/account';
-@import 'mastodon-material-dark/basics';
-@import 'mastodon-material-dark/button';
-//@import 'mastodon-material-dark/cards';
-@import 'mastodon-material-dark/columns';
-@import 'mastodon-material-dark/components';
-@import 'mastodon-material-dark/config';
-@import 'mastodon-material-dark/control';
-@import 'mastodon-material-dark/emoji-picker';
-@import 'mastodon-material-dark/icons';
-@import 'mastodon-material-dark/material-icons';
-@import 'mastodon-material-dark/media';
-@import 'mastodon-material-dark/mobile';
-@import 'mastodon-material-dark/modal';
-@import 'mastodon-material-dark/statuses';
\ No newline at end of file
+@import 'mastodon-material-dark/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/_functions.scss b/app/javascript/styles/mastodon-material-dark/_functions.scss
deleted file mode 100644
index 54750d029..000000000
--- a/app/javascript/styles/mastodon-material-dark/_functions.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-
-
-@function to-string($value) {
- @return inspect($value);
-}
-
-// convert hex color code to svg styled color code
-@function svg-color ($color) {
- @return '%23' + string.slice(to-string($color), 2, 7);
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
index 47f990072..de22c451b 100644
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
@@ -57,6 +57,7 @@ $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-background-color: transparentize(#000000, 0.5);
diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
new file mode 100644
index 000000000..134b18e10
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #217aba;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: darken($background-color, 4%);
+$icon-background-active-color: darken($background-color, 8%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: lighten($text-button-color, 36%);
+$text-button-focus-color: lighten($text-button-color, 30%);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: #ccd7e0;
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #ffffff;
+$search-bar-color: #d9e1e8;
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
new file mode 100644
index 000000000..3e817cde4
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
new file mode 100644
index 000000000..652ffe37e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($background-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-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
new file mode 100644
index 000000000..4000eead0
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
new file mode 100644
index 000000000..c990d6b1e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #272727;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
new file mode 100644
index 000000000..6fd1dea9e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: #ffffff;
+$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
+$floating-action-button-active-color: darken($floating-action-button-color, 10%);
+$floating-action-button-icon-color: $secondary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($background-color, 30%);
+$scroll-bar-thumb-active-color: darken($background-color, 38%);
+
+// App bar color
+$top-bar-color: $background-color;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/config.scss b/app/javascript/styles/mastodon-material-dark/config.scss
deleted file mode 100644
index 77d7982e4..000000000
--- a/app/javascript/styles/mastodon-material-dark/config.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@charset "UTF-8";
-
-
-// Color scheme
-@import 'color/mastodon-dark';
-
-
-// Layout profile
-@import 'layout/material-v1';
-
-
-// Material Design Icon settings
-// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-@font-face {
- font-family: "Material Icons";
- src:
- local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
- //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
-
-
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/custom_color.scss b/app/javascript/styles/mastodon-material-dark/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/custom_config.scss b/app/javascript/styles/mastodon-material-dark/custom_config.scss
new file mode 100644
index 000000000..03e8e0c81
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/custom_config.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/mastodon-dark';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/custom_layout.scss b/app/javascript/styles/mastodon-material-dark/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/config.scss b/app/javascript/styles/mastodon-material-dark/icon_config.scss
similarity index 57%
rename from app/javascript/styles/material-v2-dark/config.scss
rename to app/javascript/styles/mastodon-material-dark/icon_config.scss
index 25becc639..3274efde8 100644
--- a/app/javascript/styles/material-v2-dark/config.scss
+++ b/app/javascript/styles/mastodon-material-dark/icon_config.scss
@@ -1,12 +1,17 @@
-@charset "UTF-8";
+// 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
-// Color scheme
-@import 'color/v2-dark';
-
-
-// Layout profile
-@import 'layout/material-v2';
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment"; // blooming
// Material Design Icon settings
@@ -15,25 +20,7 @@
font-family: "Material Icons";
src:
local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
-
-
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
\ No newline at end of file
+ //url(".../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
index 92f369245..825deaf8c 100644
--- a/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
+++ b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
@@ -1,5 +1,5 @@
@charset "UTF-8";
-@import '../mixins';
+@import '../theme/mixins';
// Navigation bar radius
diff --git a/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
new file mode 100644
index 000000000..6c81dc3e4
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+//$bar-radius: 8px;
+
+
+// Button radius settings
+$button-radius: 8px;
+
+
+// Card radius settings
+$card-radius: 8px;
+
+
+// Dialog radius settings
+$dialog-radius: 8px;
+
+
+// Menu radius settings
+$menu-radius: 8px;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 8px; // corner rounded
+//$nav-drawer-item-radius: 32px; // full rounded
+//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
+
+
+// Avater cropping settings
+$avater-radius: 50%; // Rounded cropping
+//$avater-radius: 8px // Material v2 square
+
+
+// Chip settings
+// If you want to use contained-chip, please comment out below.
+.reactions-bar__item {
+ background: $outlined-chip-color !important;
+ border: 1px solid $border-color !important;
+
+ &.active { background-color: $outlined-chip-selected-color !important }
+
+ &:hover { background: $outlined-chip-hover-color !important }
+}
+.relationship-tag,
+.account-role {
+ background: $outlined-chip-color !important;
+ border: 1px solid $border-color !important;
+}
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/loader.scss b/app/javascript/styles/mastodon-material-dark/loader.scss
new file mode 100644
index 000000000..04d588001
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/loader.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+
+@import '../application';
+
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/cards.scss b/app/javascript/styles/mastodon-material-dark/plugins/cards.scss
similarity index 56%
rename from app/javascript/styles/mastodon-material-dark/cards.scss
rename to app/javascript/styles/mastodon-material-dark/plugins/cards.scss
index 96988f2c9..c134cbeeb 100644
--- a/app/javascript/styles/mastodon-material-dark/cards.scss
+++ b/app/javascript/styles/mastodon-material-dark/plugins/cards.scss
@@ -1,17 +1,24 @@
@charset "UTF-8";
-@import 'config';
-@import 'mixins';
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
.column {
box-shadow: none !important;
margin: 2px 0 !important;
padding: 8px !important;
+
+ > .scrollable { background: $background-color }
}
.status {
- border-bottom: 0 !important;
+ border-bottom: 0;
border-radius: $card-radius;
+ background: $card-background-color;
+
+ &__prepend { padding: 8px 8px 2px 0 }
}
.account { border-bottom: 0 !important }
@@ -20,6 +27,8 @@
.notification.notification {
@include shadow-1dp;
margin: 8px 2px;
+ border-radius: $card-radius;
+ background: $card-background-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/dense.scss b/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
new file mode 100644
index 000000000..42417124b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
@@ -0,0 +1,63 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+ &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+ &__buttons { height: 48px }
+
+ &__button {
+ margin: 8px;
+ padding: 10px 8px;
+
+ .fa { vertical-align: text-top }
+ }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 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 }
+}
+
+.status {
+ padding: 8px 8px 8px 66px;
+
+ &__expand { width: 66px }
+
+ &__info { padding-right: 0 }
+
+ &__avatar {
+ left: 8px;
+ top: 10px;
+ }
+
+ &__content { padding-top: 2px }
+}
+
+.detailed-status {
+ padding: 14px;
+
+ &__meta { margin-top: 14px }
+
+ &__action-bar { padding: 10px 0 }
+}
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/plus.scss b/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+ background: #eeeeee;
+ width: 28px !important;
+ height: 28px !important;
+
+ .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { 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-dark/theme/_functions.scss b/app/javascript/styles/mastodon-material-dark/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@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-dark/_mixins.scss b/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
similarity index 100%
rename from app/javascript/styles/mastodon-material-dark/_mixins.scss
rename to app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
diff --git a/app/javascript/styles/material-v1-dark/account.scss b/app/javascript/styles/mastodon-material-dark/theme/account.scss
similarity index 97%
rename from app/javascript/styles/material-v1-dark/account.scss
rename to app/javascript/styles/mastodon-material-dark/theme/account.scss
index b43194729..44d68d1e9 100644
--- a/app/javascript/styles/material-v1-dark/account.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/account.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {
diff --git a/app/javascript/styles/mastodon-material-dark/theme/base_config.scss b/app/javascript/styles/mastodon-material-dark/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../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__input:hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+}*/
+
+
+// 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
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/basics.scss b/app/javascript/styles/mastodon-material-dark/theme/basics.scss
similarity index 83%
rename from app/javascript/styles/material-v1-dark/basics.scss
rename to app/javascript/styles/mastodon-material-dark/theme/basics.scss
index 5c7c3dc04..4c122d1c6 100644
--- a/app/javascript/styles/material-v1-dark/basics.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/basics.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
body { background: $background-color }
diff --git a/app/javascript/styles/material-v1-dark/button.scss b/app/javascript/styles/mastodon-material-dark/theme/button.scss
similarity index 95%
rename from app/javascript/styles/material-v1-dark/button.scss
rename to app/javascript/styles/mastodon-material-dark/theme/button.scss
index 38fd1a3c1..1231bac98 100644
--- a/app/javascript/styles/material-v1-dark/button.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/button.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.icon-button {
diff --git a/app/javascript/styles/mastodon-material-dark/columns.scss b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
similarity index 83%
rename from app/javascript/styles/mastodon-material-dark/columns.scss
rename to app/javascript/styles/mastodon-material-dark/theme/columns.scss
index 689028581..a6892adf2 100644
--- a/app/javascript/styles/mastodon-material-dark/columns.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.column {
@@ -26,7 +28,7 @@
&.active {
.column-header__icon {
- color: $secondary-color;
+ color: $top-bar-unread-icon-color;
text-shadow: none;
}
}
@@ -318,27 +320,38 @@
}
}
-.trends__item {
- padding: 16px;
- border-bottom: none;
+.trends {
+ &__header {
+ color: $section-text-color;
+ background: transparent;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
+ .fa { margin-right: 8px }
}
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
+ &__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;
+ }
}
}
@@ -361,8 +374,12 @@
&__unread { background: $badge-color }
}
+
+ &__pagination { color: $ui-text-color }
}
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
.reactions-bar {
.emoji-button {
color: $icon-button-color;
@@ -436,15 +453,9 @@
}
.notification-favourite .status.status-direct {
- background: transparent;
-
.icon-button.disabled { color: $disabled-icon-color }
}
-// read notification
-.notification.notification-favourite.focusable,
-.notification.notification-follow.focusable { background: $list-background-inactive-color }
-
.relationship-tag {
color: $ui-text-color;
background-color: $contained-chip-color;
@@ -454,8 +465,38 @@
opacity: 1;
}
-.react-swipeable-view-container { height: auto }
-
.attachment-list__list a { color: $secondary-text-color }
-.focusable { background: transparent !important }
\ No newline at end of file
+.focusable {
+ &:focus { background: $card-background-color }
+}
+
+// single column mode
+@media screen and (min-width: 415px) {
+ .tabs-bar {
+ margin-bottom: 0;
+
+ &__wrapper { padding-top: 0 }
+ }
+
+ .columns-area__panels__main {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 12px 12px 0;
+ }
+}
+
+@media screen and (min-width: 631px) {
+ .tabs-bar__link {
+ &:hover {
+ background: $tab-indicator-background-hover-color;
+ border-bottom-color: $tab-background-color;
+ }
+
+ &:active,
+ &:focus {
+ background: $tab-indicator-background-focus-color;
+ border-bottom-color: $tab-background-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/components.scss b/app/javascript/styles/mastodon-material-dark/theme/components.scss
similarity index 97%
rename from app/javascript/styles/material-v1-dark/components.scss
rename to app/javascript/styles/mastodon-material-dark/theme/components.scss
index 92d2801f4..4f844229c 100644
--- a/app/javascript/styles/material-v1-dark/components.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/components.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -40,7 +42,10 @@
&__inner {
background: $card-background-color;
- &.darker { background: $card-background-color }
+ &.darker {
+ background: $card-background-color;
+ position: inherit;
+ }
&__mastodon { background: $card-background-color }
}
@@ -79,7 +84,7 @@
opacity: 1;
}
&-times-circle.active {
- right: 10px;
+ right: 16px;
left: unset;
transform: none;
}
diff --git a/app/javascript/styles/material-v1-dark/control.scss b/app/javascript/styles/mastodon-material-dark/theme/control.scss
similarity index 93%
rename from app/javascript/styles/material-v1-dark/control.scss
rename to app/javascript/styles/mastodon-material-dark/theme/control.scss
index 7bd251291..a205a4cb7 100644
--- a/app/javascript/styles/material-v1-dark/control.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/control.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
diff --git a/app/javascript/styles/mastodon-material-dark/emoji-picker.scss b/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
similarity index 93%
rename from app/javascript/styles/mastodon-material-dark/emoji-picker.scss
rename to app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
index 2c17701cf..70e22752d 100644
--- a/app/javascript/styles/mastodon-material-dark/emoji-picker.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.emoji-picker-dropdown {
@@ -23,7 +25,7 @@
.emoji-mart {
width: 388px !important;
font-size: 14px;
- color: $ui-text-color;
+ color: $menu-text-color;
&-bar {
border: 0 solid $border-color;
diff --git a/app/javascript/styles/mastodon-material-light/icons.scss b/app/javascript/styles/mastodon-material-dark/theme/icons.scss
similarity index 78%
rename from app/javascript/styles/mastodon-material-light/icons.scss
rename to app/javascript/styles/mastodon-material-dark/theme/icons.scss
index beca11a6f..1367647ec 100644
--- a/app/javascript/styles/mastodon-material-light/icons.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/icons.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -39,10 +41,4 @@
border: none;
padding: 2px 6px;
border-radius: 12px;
-}
-
-// favorite icon color
-.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/material-icons.scss b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
similarity index 90%
rename from app/javascript/styles/material-v1-dark/material-icons.scss
rename to app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
index e473dfe31..51631eab5 100644
--- a/app/javascript/styles/material-v1-dark/material-icons.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
@import 'functions';
@@ -61,7 +63,8 @@
&.fa-arrows-alt,
&.fa-compress,
&.fa-user-times,
- &.fa-check {
+ &.fa-check,
+ &.fa-quote-right {
font-family: "Material Icons";
}
}
@@ -85,7 +88,7 @@
&.fa-sliders::before { content: "tune" }
&.fa-chevron-left::before { content: "arrow_back" }
&.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: "reply" }
+ &.fa-reply::before { content: $reply-icon }
&.fa-reply-all::before { content: "reply_all" }
&.fa-share-alt::before { content: "share" }
&.fa-star::before { content: $favorite-icon }
@@ -117,6 +120,7 @@
&.fa-compress::before { content: "fullscreen_exit" }
&.fa-user-times::before { content: "delete" }
&.fa-check::before { content: "check" }
+ &.fa-quote-right::before { content: "format_quote" }
}
// bookmark icon
@@ -137,6 +141,12 @@
}
}
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
// boost icon
.no-reduce-motion button.icon-button i.fa-retweet {
height: 18px;
diff --git a/app/javascript/styles/mastodon-material-light/media.scss b/app/javascript/styles/mastodon-material-dark/theme/media.scss
similarity index 95%
rename from app/javascript/styles/mastodon-material-light/media.scss
rename to app/javascript/styles/mastodon-material-dark/theme/media.scss
index 64a69a129..28de8db85 100644
--- a/app/javascript/styles/mastodon-material-light/media.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/media.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
diff --git a/app/javascript/styles/mastodon-material-light/mobile.scss b/app/javascript/styles/mastodon-material-dark/theme/mobile.scss
similarity index 74%
rename from app/javascript/styles/mastodon-material-light/mobile.scss
rename to app/javascript/styles/mastodon-material-dark/theme/mobile.scss
index de6f4e94c..ed6467ebc 100644
--- a/app/javascript/styles/mastodon-material-light/mobile.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/mobile.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -17,6 +19,11 @@
}
.fa { font-size: 20px }
+
+ span {
+ margin-left: 8px;
+ vertical-align: text-bottom;
+ }
}
&__wrapper {
@@ -41,8 +48,11 @@
}
.columns-area--mobile {
-
.column { margin: 0 !important }
+ .search__input { padding: 16px 46px }
- .search__input { padding: 16px 38px }
+ .search__icon .fa {
+ top: 16px;
+ left: 16px;
+ }
}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/modal.scss b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
similarity index 87%
rename from app/javascript/styles/mastodon-material-light/modal.scss
rename to app/javascript/styles/mastodon-material-dark/theme/modal.scss
index 7734c8dfa..287dcf804 100644
--- a/app/javascript/styles/mastodon-material-light/modal.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -64,6 +66,12 @@
&__container {
border-top: none;
}
+
+ &__comment {
+ border-right: none;
+
+ .setting-text-label { color: $ui-text-color }
+ }
}
.embed-modal .embed-modal__container {
diff --git a/app/javascript/styles/mastodon-material-dark/statuses.scss b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
similarity index 87%
rename from app/javascript/styles/mastodon-material-dark/statuses.scss
rename to app/javascript/styles/mastodon-material-dark/theme/statuses.scss
index f60c2d859..65b5fcc41 100644
--- a/app/javascript/styles/mastodon-material-dark/statuses.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -10,7 +12,7 @@
&__expand { width: 70px }
&__info {
- font-size: 16px;
+ font-size: $name-font-size;
padding-right: 4px;
}
@@ -28,7 +30,7 @@
}
&__content {
- font-size: 16px;
+ font-size: $status-font-size;
padding-top: 4px;
color: $primary-text-color;
@@ -73,7 +75,12 @@
}
}
- &__prepend { color: $secondary-text-color }
+ &__prepend {
+ color: $secondary-text-color;
+ margin-left: 64px;
+
+ .status__display-name strong { color: $secondary-text-color }
+ }
&.status-direct:not(.read) {
background: transparent;
@@ -169,4 +176,10 @@
&__button {
.icon-button { font-size: 20px !important }
}
+}
+
+// search user trends
+.display-name {
+ &__html { color: $primary-text-color !important }
+ &__account { color: $secondary-text-color }
}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/theme.scss b/app/javascript/styles/mastodon-material-dark/theme/theme.scss
new file mode 100644
index 000000000..5b7daddf6
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/variables.scss b/app/javascript/styles/mastodon-material-dark/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light.scss b/app/javascript/styles/mastodon-material-light.scss
index 7a725f929..49340df17 100644
--- a/app/javascript/styles/mastodon-material-light.scss
+++ b/app/javascript/styles/mastodon-material-light.scss
@@ -1,18 +1,3 @@
@charset "UTF-8";
-@import 'application';
-@import 'mastodon-material-light/account';
-@import 'mastodon-material-light/basics';
-@import 'mastodon-material-light/button';
-//@import 'mastodon-material-light/cards';
-@import 'mastodon-material-light/columns';
-@import 'mastodon-material-light/components';
-@import 'mastodon-material-light/config';
-@import 'mastodon-material-light/control';
-@import 'mastodon-material-light/emoji-picker';
-@import 'mastodon-material-light/icons';
-@import 'mastodon-material-light/material-icons';
-@import 'mastodon-material-light/media';
-@import 'mastodon-material-light/mobile';
-@import 'mastodon-material-light/modal';
-@import 'mastodon-material-light/statuses';
\ No newline at end of file
+@import 'mastodon-material-light/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/_functions.scss b/app/javascript/styles/mastodon-material-light/_functions.scss
deleted file mode 100644
index 54750d029..000000000
--- a/app/javascript/styles/mastodon-material-light/_functions.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-
-
-@function to-string($value) {
- @return inspect($value);
-}
-
-// convert hex color code to svg styled color code
-@function svg-color ($color) {
- @return '%23' + string.slice(to-string($color), 2, 7);
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
new file mode 100644
index 000000000..de22c451b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9baec8;
+$ui-text-color: #fff;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #606984;
+$tips-text-color: #6d7889;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4ea2df;
+$menu-text-color: #282c37;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #313543;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-color, 18%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #fff;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.7);
+$text-button-focus-color: transparentize($text-button-color, 0.6);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+
+// App bar color
+$top-bar-color: #313543;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: #d9e1e8;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
index 22bcc9f91..134b18e10 100644
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
@@ -56,6 +56,7 @@ $disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $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-background-color: transparentize(#000000, 0.5);
diff --git a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
new file mode 100644
index 000000000..3e817cde4
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
new file mode 100644
index 000000000..652ffe37e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($background-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-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v1-light.scss b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
new file mode 100644
index 000000000..4000eead0
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
new file mode 100644
index 000000000..c990d6b1e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #272727;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v2-light.scss b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
new file mode 100644
index 000000000..6fd1dea9e
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: #ffffff;
+$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
+$floating-action-button-active-color: darken($floating-action-button-color, 10%);
+$floating-action-button-icon-color: $secondary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($background-color, 30%);
+$scroll-bar-thumb-active-color: darken($background-color, 38%);
+
+// App bar color
+$top-bar-color: $background-color;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/config.scss b/app/javascript/styles/mastodon-material-light/config.scss
deleted file mode 100644
index 3bcd48014..000000000
--- a/app/javascript/styles/mastodon-material-light/config.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@charset "UTF-8";
-
-
-// Color scheme
-@import 'color/mastodon-light';
-
-
-// Layout profile
-@import 'layout/material-v1';
-
-
-// Material Design Icon settings
-// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-@font-face {
- font-family: "Material Icons";
- src:
- local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
- //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
-
-
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/custom_color.scss b/app/javascript/styles/mastodon-material-light/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/custom_config.scss b/app/javascript/styles/mastodon-material-light/custom_config.scss
new file mode 100644
index 000000000..cf51584fc
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/custom_config.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/mastodon-light';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/custom_layout.scss b/app/javascript/styles/mastodon-material-light/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/config.scss b/app/javascript/styles/mastodon-material-light/icon_config.scss
similarity index 57%
rename from app/javascript/styles/material-v1-dark/config.scss
rename to app/javascript/styles/mastodon-material-light/icon_config.scss
index c8cc5eef4..3274efde8 100644
--- a/app/javascript/styles/material-v1-dark/config.scss
+++ b/app/javascript/styles/mastodon-material-light/icon_config.scss
@@ -1,12 +1,17 @@
-@charset "UTF-8";
+// 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
-// Color scheme
-@import 'color/v1-dark';
-
-
-// Layout profile
-@import 'layout/material-v1';
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment"; // blooming
// Material Design Icon settings
@@ -15,25 +20,7 @@
font-family: "Material Icons";
src:
local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
-
-
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
\ No newline at end of file
+ //url(".../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/layout/material-v1.scss b/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
index 92f369245..825deaf8c 100644
--- a/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
+++ b/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
@@ -1,5 +1,5 @@
@charset "UTF-8";
-@import '../mixins';
+@import '../theme/mixins';
// Navigation bar radius
diff --git a/app/javascript/styles/mastodon-material-light/layout/material-v2.scss b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
new file mode 100644
index 000000000..6c81dc3e4
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+//$bar-radius: 8px;
+
+
+// Button radius settings
+$button-radius: 8px;
+
+
+// Card radius settings
+$card-radius: 8px;
+
+
+// Dialog radius settings
+$dialog-radius: 8px;
+
+
+// Menu radius settings
+$menu-radius: 8px;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 8px; // corner rounded
+//$nav-drawer-item-radius: 32px; // full rounded
+//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
+
+
+// Avater cropping settings
+$avater-radius: 50%; // Rounded cropping
+//$avater-radius: 8px // Material v2 square
+
+
+// Chip settings
+// If you want to use contained-chip, please comment out below.
+.reactions-bar__item {
+ background: $outlined-chip-color !important;
+ border: 1px solid $border-color !important;
+
+ &.active { background-color: $outlined-chip-selected-color !important }
+
+ &:hover { background: $outlined-chip-hover-color !important }
+}
+.relationship-tag,
+.account-role {
+ background: $outlined-chip-color !important;
+ border: 1px solid $border-color !important;
+}
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/loader.scss b/app/javascript/styles/mastodon-material-light/loader.scss
new file mode 100644
index 000000000..04d588001
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/loader.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+
+@import '../application';
+
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/cards.scss b/app/javascript/styles/mastodon-material-light/plugins/cards.scss
similarity index 56%
rename from app/javascript/styles/mastodon-material-light/cards.scss
rename to app/javascript/styles/mastodon-material-light/plugins/cards.scss
index 96988f2c9..c134cbeeb 100644
--- a/app/javascript/styles/mastodon-material-light/cards.scss
+++ b/app/javascript/styles/mastodon-material-light/plugins/cards.scss
@@ -1,17 +1,24 @@
@charset "UTF-8";
-@import 'config';
-@import 'mixins';
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
.column {
box-shadow: none !important;
margin: 2px 0 !important;
padding: 8px !important;
+
+ > .scrollable { background: $background-color }
}
.status {
- border-bottom: 0 !important;
+ border-bottom: 0;
border-radius: $card-radius;
+ background: $card-background-color;
+
+ &__prepend { padding: 8px 8px 2px 0 }
}
.account { border-bottom: 0 !important }
@@ -20,6 +27,8 @@
.notification.notification {
@include shadow-1dp;
margin: 8px 2px;
+ border-radius: $card-radius;
+ background: $card-background-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
diff --git a/app/javascript/styles/mastodon-material-light/plugins/dense.scss b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
new file mode 100644
index 000000000..42417124b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
@@ -0,0 +1,63 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+ &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+ &__buttons { height: 48px }
+
+ &__button {
+ margin: 8px;
+ padding: 10px 8px;
+
+ .fa { vertical-align: text-top }
+ }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 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 }
+}
+
+.status {
+ padding: 8px 8px 8px 66px;
+
+ &__expand { width: 66px }
+
+ &__info { padding-right: 0 }
+
+ &__avatar {
+ left: 8px;
+ top: 10px;
+ }
+
+ &__content { padding-top: 2px }
+}
+
+.detailed-status {
+ padding: 14px;
+
+ &__meta { margin-top: 14px }
+
+ &__action-bar { padding: 10px 0 }
+}
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/plugins/plus.scss b/app/javascript/styles/mastodon-material-light/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+ background: #eeeeee;
+ width: 28px !important;
+ height: 28px !important;
+
+ .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { 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-light/theme/_functions.scss b/app/javascript/styles/mastodon-material-light/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@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-light/_mixins.scss b/app/javascript/styles/mastodon-material-light/theme/_mixins.scss
similarity index 100%
rename from app/javascript/styles/mastodon-material-light/_mixins.scss
rename to app/javascript/styles/mastodon-material-light/theme/_mixins.scss
diff --git a/app/javascript/styles/mastodon-material-dark/account.scss b/app/javascript/styles/mastodon-material-light/theme/account.scss
similarity index 97%
rename from app/javascript/styles/mastodon-material-dark/account.scss
rename to app/javascript/styles/mastodon-material-light/theme/account.scss
index b43194729..44d68d1e9 100644
--- a/app/javascript/styles/mastodon-material-dark/account.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/account.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {
diff --git a/app/javascript/styles/mastodon-material-light/theme/base_config.scss b/app/javascript/styles/mastodon-material-light/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../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__input:hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+}*/
+
+
+// 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
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/basics.scss b/app/javascript/styles/mastodon-material-light/theme/basics.scss
similarity index 83%
rename from app/javascript/styles/mastodon-material-light/basics.scss
rename to app/javascript/styles/mastodon-material-light/theme/basics.scss
index 5c7c3dc04..4c122d1c6 100644
--- a/app/javascript/styles/mastodon-material-light/basics.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/basics.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
body { background: $background-color }
diff --git a/app/javascript/styles/material-v1-light/button.scss b/app/javascript/styles/mastodon-material-light/theme/button.scss
similarity index 95%
rename from app/javascript/styles/material-v1-light/button.scss
rename to app/javascript/styles/mastodon-material-light/theme/button.scss
index 38fd1a3c1..1231bac98 100644
--- a/app/javascript/styles/material-v1-light/button.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/button.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.icon-button {
diff --git a/app/javascript/styles/material-v1-dark/columns.scss b/app/javascript/styles/mastodon-material-light/theme/columns.scss
similarity index 83%
rename from app/javascript/styles/material-v1-dark/columns.scss
rename to app/javascript/styles/mastodon-material-light/theme/columns.scss
index 689028581..a6892adf2 100644
--- a/app/javascript/styles/material-v1-dark/columns.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/columns.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.column {
@@ -26,7 +28,7 @@
&.active {
.column-header__icon {
- color: $secondary-color;
+ color: $top-bar-unread-icon-color;
text-shadow: none;
}
}
@@ -318,27 +320,38 @@
}
}
-.trends__item {
- padding: 16px;
- border-bottom: none;
+.trends {
+ &__header {
+ color: $section-text-color;
+ background: transparent;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
+ .fa { margin-right: 8px }
}
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
+ &__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;
+ }
}
}
@@ -361,8 +374,12 @@
&__unread { background: $badge-color }
}
+
+ &__pagination { color: $ui-text-color }
}
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
.reactions-bar {
.emoji-button {
color: $icon-button-color;
@@ -436,15 +453,9 @@
}
.notification-favourite .status.status-direct {
- background: transparent;
-
.icon-button.disabled { color: $disabled-icon-color }
}
-// read notification
-.notification.notification-favourite.focusable,
-.notification.notification-follow.focusable { background: $list-background-inactive-color }
-
.relationship-tag {
color: $ui-text-color;
background-color: $contained-chip-color;
@@ -454,8 +465,38 @@
opacity: 1;
}
-.react-swipeable-view-container { height: auto }
-
.attachment-list__list a { color: $secondary-text-color }
-.focusable { background: transparent !important }
\ No newline at end of file
+.focusable {
+ &:focus { background: $card-background-color }
+}
+
+// single column mode
+@media screen and (min-width: 415px) {
+ .tabs-bar {
+ margin-bottom: 0;
+
+ &__wrapper { padding-top: 0 }
+ }
+
+ .columns-area__panels__main {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 12px 12px 0;
+ }
+}
+
+@media screen and (min-width: 631px) {
+ .tabs-bar__link {
+ &:hover {
+ background: $tab-indicator-background-hover-color;
+ border-bottom-color: $tab-background-color;
+ }
+
+ &:active,
+ &:focus {
+ background: $tab-indicator-background-focus-color;
+ border-bottom-color: $tab-background-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/components.scss b/app/javascript/styles/mastodon-material-light/theme/components.scss
similarity index 97%
rename from app/javascript/styles/mastodon-material-dark/components.scss
rename to app/javascript/styles/mastodon-material-light/theme/components.scss
index 92d2801f4..4f844229c 100644
--- a/app/javascript/styles/mastodon-material-dark/components.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/components.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -40,7 +42,10 @@
&__inner {
background: $card-background-color;
- &.darker { background: $card-background-color }
+ &.darker {
+ background: $card-background-color;
+ position: inherit;
+ }
&__mastodon { background: $card-background-color }
}
@@ -79,7 +84,7 @@
opacity: 1;
}
&-times-circle.active {
- right: 10px;
+ right: 16px;
left: unset;
transform: none;
}
diff --git a/app/javascript/styles/mastodon-material-dark/control.scss b/app/javascript/styles/mastodon-material-light/theme/control.scss
similarity index 93%
rename from app/javascript/styles/mastodon-material-dark/control.scss
rename to app/javascript/styles/mastodon-material-light/theme/control.scss
index 7bd251291..a205a4cb7 100644
--- a/app/javascript/styles/mastodon-material-dark/control.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/control.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
diff --git a/app/javascript/styles/material-v1-dark/emoji-picker.scss b/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
similarity index 93%
rename from app/javascript/styles/material-v1-dark/emoji-picker.scss
rename to app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
index 2c17701cf..70e22752d 100644
--- a/app/javascript/styles/material-v1-dark/emoji-picker.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.emoji-picker-dropdown {
@@ -23,7 +25,7 @@
.emoji-mart {
width: 388px !important;
font-size: 14px;
- color: $ui-text-color;
+ color: $menu-text-color;
&-bar {
border: 0 solid $border-color;
diff --git a/app/javascript/styles/mastodon-material-dark/icons.scss b/app/javascript/styles/mastodon-material-light/theme/icons.scss
similarity index 78%
rename from app/javascript/styles/mastodon-material-dark/icons.scss
rename to app/javascript/styles/mastodon-material-light/theme/icons.scss
index beca11a6f..1367647ec 100644
--- a/app/javascript/styles/mastodon-material-dark/icons.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/icons.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -39,10 +41,4 @@
border: none;
padding: 2px 6px;
border-radius: 12px;
-}
-
-// favorite icon color
-.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/material-icons.scss b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
similarity index 90%
rename from app/javascript/styles/mastodon-material-light/material-icons.scss
rename to app/javascript/styles/mastodon-material-light/theme/material-icons.scss
index e473dfe31..51631eab5 100644
--- a/app/javascript/styles/mastodon-material-light/material-icons.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
@import 'functions';
@@ -61,7 +63,8 @@
&.fa-arrows-alt,
&.fa-compress,
&.fa-user-times,
- &.fa-check {
+ &.fa-check,
+ &.fa-quote-right {
font-family: "Material Icons";
}
}
@@ -85,7 +88,7 @@
&.fa-sliders::before { content: "tune" }
&.fa-chevron-left::before { content: "arrow_back" }
&.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: "reply" }
+ &.fa-reply::before { content: $reply-icon }
&.fa-reply-all::before { content: "reply_all" }
&.fa-share-alt::before { content: "share" }
&.fa-star::before { content: $favorite-icon }
@@ -117,6 +120,7 @@
&.fa-compress::before { content: "fullscreen_exit" }
&.fa-user-times::before { content: "delete" }
&.fa-check::before { content: "check" }
+ &.fa-quote-right::before { content: "format_quote" }
}
// bookmark icon
@@ -137,6 +141,12 @@
}
}
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
// boost icon
.no-reduce-motion button.icon-button i.fa-retweet {
height: 18px;
diff --git a/app/javascript/styles/mastodon-material-dark/media.scss b/app/javascript/styles/mastodon-material-light/theme/media.scss
similarity index 95%
rename from app/javascript/styles/mastodon-material-dark/media.scss
rename to app/javascript/styles/mastodon-material-light/theme/media.scss
index 64a69a129..28de8db85 100644
--- a/app/javascript/styles/mastodon-material-dark/media.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/media.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
diff --git a/app/javascript/styles/material-v1-dark/mobile.scss b/app/javascript/styles/mastodon-material-light/theme/mobile.scss
similarity index 74%
rename from app/javascript/styles/material-v1-dark/mobile.scss
rename to app/javascript/styles/mastodon-material-light/theme/mobile.scss
index de6f4e94c..ed6467ebc 100644
--- a/app/javascript/styles/material-v1-dark/mobile.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/mobile.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -17,6 +19,11 @@
}
.fa { font-size: 20px }
+
+ span {
+ margin-left: 8px;
+ vertical-align: text-bottom;
+ }
}
&__wrapper {
@@ -41,8 +48,11 @@
}
.columns-area--mobile {
-
.column { margin: 0 !important }
+ .search__input { padding: 16px 46px }
- .search__input { padding: 16px 38px }
+ .search__icon .fa {
+ top: 16px;
+ left: 16px;
+ }
}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/modal.scss b/app/javascript/styles/mastodon-material-light/theme/modal.scss
similarity index 87%
rename from app/javascript/styles/material-v1-dark/modal.scss
rename to app/javascript/styles/mastodon-material-light/theme/modal.scss
index 7734c8dfa..287dcf804 100644
--- a/app/javascript/styles/material-v1-dark/modal.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/modal.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -64,6 +66,12 @@
&__container {
border-top: none;
}
+
+ &__comment {
+ border-right: none;
+
+ .setting-text-label { color: $ui-text-color }
+ }
}
.embed-modal .embed-modal__container {
diff --git a/app/javascript/styles/material-v1-dark/statuses.scss b/app/javascript/styles/mastodon-material-light/theme/statuses.scss
similarity index 87%
rename from app/javascript/styles/material-v1-dark/statuses.scss
rename to app/javascript/styles/mastodon-material-light/theme/statuses.scss
index f60c2d859..65b5fcc41 100644
--- a/app/javascript/styles/material-v1-dark/statuses.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/statuses.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -10,7 +12,7 @@
&__expand { width: 70px }
&__info {
- font-size: 16px;
+ font-size: $name-font-size;
padding-right: 4px;
}
@@ -28,7 +30,7 @@
}
&__content {
- font-size: 16px;
+ font-size: $status-font-size;
padding-top: 4px;
color: $primary-text-color;
@@ -73,7 +75,12 @@
}
}
- &__prepend { color: $secondary-text-color }
+ &__prepend {
+ color: $secondary-text-color;
+ margin-left: 64px;
+
+ .status__display-name strong { color: $secondary-text-color }
+ }
&.status-direct:not(.read) {
background: transparent;
@@ -169,4 +176,10 @@
&__button {
.icon-button { font-size: 20px !important }
}
+}
+
+// search user trends
+.display-name {
+ &__html { color: $primary-text-color !important }
+ &__account { color: $secondary-text-color }
}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/theme.scss b/app/javascript/styles/mastodon-material-light/theme/theme.scss
new file mode 100644
index 000000000..5b7daddf6
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/variables.scss b/app/javascript/styles/mastodon-material-light/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark.scss b/app/javascript/styles/material-v1-dark.scss
index 98d8aaf28..e7071bb85 100644
--- a/app/javascript/styles/material-v1-dark.scss
+++ b/app/javascript/styles/material-v1-dark.scss
@@ -1,18 +1,3 @@
@charset "UTF-8";
-@import 'application';
-@import 'material-v1-dark/account';
-@import 'material-v1-dark/basics';
-@import 'material-v1-dark/button';
-//@import 'material-v1-dark/cards';
-@import 'material-v1-dark/columns';
-@import 'material-v1-dark/components';
-@import 'material-v1-dark/config';
-@import 'material-v1-dark/control';
-@import 'material-v1-dark/emoji-picker';
-@import 'material-v1-dark/icons';
-@import 'material-v1-dark/material-icons';
-@import 'material-v1-dark/media';
-@import 'material-v1-dark/mobile';
-@import 'material-v1-dark/modal';
-@import 'material-v1-dark/statuses';
\ No newline at end of file
+@import 'material-v1-dark/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/_functions.scss b/app/javascript/styles/material-v1-dark/_functions.scss
deleted file mode 100644
index 54750d029..000000000
--- a/app/javascript/styles/material-v1-dark/_functions.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-
-
-@function to-string($value) {
- @return inspect($value);
-}
-
-// convert hex color code to svg styled color code
-@function svg-color ($color) {
- @return '%23' + string.slice(to-string($color), 2, 7);
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/mastodon-dark.scss b/app/javascript/styles/material-v1-dark/color/mastodon-dark.scss
new file mode 100644
index 000000000..de22c451b
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/mastodon-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9baec8;
+$ui-text-color: #fff;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #606984;
+$tips-text-color: #6d7889;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4ea2df;
+$menu-text-color: #282c37;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #313543;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-color, 18%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #fff;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.7);
+$text-button-focus-color: transparentize($text-button-color, 0.6);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+
+// App bar color
+$top-bar-color: #313543;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: #d9e1e8;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/mastodon-light.scss b/app/javascript/styles/material-v1-dark/color/mastodon-light.scss
new file mode 100644
index 000000000..134b18e10
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/mastodon-light.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #217aba;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: darken($background-color, 4%);
+$icon-background-active-color: darken($background-color, 8%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: lighten($text-button-color, 36%);
+$text-button-focus-color: lighten($text-button-color, 30%);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: #ccd7e0;
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #ffffff;
+$search-bar-color: #d9e1e8;
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/plus-classic.scss b/app/javascript/styles/material-v1-dark/color/plus-classic.scss
new file mode 100644
index 000000000..3e817cde4
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/plus-classic.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/v1-dark.scss b/app/javascript/styles/material-v1-dark/color/v1-dark.scss
index a9289ce25..652ffe37e 100644
--- a/app/javascript/styles/material-v1-dark/color/v1-dark.scss
+++ b/app/javascript/styles/material-v1-dark/color/v1-dark.scss
@@ -23,14 +23,14 @@ $search-bar-text-color: $inverted-text-color;
// Background-color
$background-color: #303030;
-$menu-background-color: #1e1e1e;
+$menu-background-color: #424242;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
+$card-background-color: #424242;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
+$list-background-color: #424242;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
@@ -88,7 +88,7 @@ $toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
-$border-color: #5f6368;
+$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
@@ -109,7 +109,7 @@ $tab-indicator-background-hover-color: transparentize($tab-indicator-active-colo
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-background-color: #1e1e1e;
+$text-tab-background-color: #424242;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
diff --git a/app/javascript/styles/material-v1-dark/color/v1-light.scss b/app/javascript/styles/material-v1-dark/color/v1-light.scss
new file mode 100644
index 000000000..4000eead0
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/v1-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/v2-dark.scss b/app/javascript/styles/material-v1-dark/color/v2-dark.scss
new file mode 100644
index 000000000..c990d6b1e
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/v2-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #272727;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/v2-light.scss b/app/javascript/styles/material-v1-dark/color/v2-light.scss
new file mode 100644
index 000000000..6fd1dea9e
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/v2-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: #ffffff;
+$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
+$floating-action-button-active-color: darken($floating-action-button-color, 10%);
+$floating-action-button-icon-color: $secondary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($background-color, 30%);
+$scroll-bar-thumb-active-color: darken($background-color, 38%);
+
+// App bar color
+$top-bar-color: $background-color;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/custom_color.scss b/app/javascript/styles/material-v1-dark/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/custom_config.scss b/app/javascript/styles/material-v1-dark/custom_config.scss
new file mode 100644
index 000000000..9b055476b
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/custom_config.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/v1-dark';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/custom_layout.scss b/app/javascript/styles/material-v1-dark/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/config.scss b/app/javascript/styles/material-v1-dark/icon_config.scss
similarity index 57%
rename from app/javascript/styles/material-v2-light/config.scss
rename to app/javascript/styles/material-v1-dark/icon_config.scss
index f53c47791..3274efde8 100644
--- a/app/javascript/styles/material-v2-light/config.scss
+++ b/app/javascript/styles/material-v1-dark/icon_config.scss
@@ -1,12 +1,17 @@
-@charset "UTF-8";
+// 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
-// Color scheme
-@import 'color/v2-light';
-
-
-// Layout profile
-@import 'layout/material-v2';
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment"; // blooming
// Material Design Icon settings
@@ -15,25 +20,7 @@
font-family: "Material Icons";
src:
local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
-
-
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
\ No newline at end of file
+ //url(".../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/layout/material-v1.scss b/app/javascript/styles/material-v1-dark/layout/material-v1.scss
index 92f369245..825deaf8c 100644
--- a/app/javascript/styles/material-v1-dark/layout/material-v1.scss
+++ b/app/javascript/styles/material-v1-dark/layout/material-v1.scss
@@ -1,5 +1,5 @@
@charset "UTF-8";
-@import '../mixins';
+@import '../theme/mixins';
// Navigation bar radius
diff --git a/app/javascript/styles/material-v1-dark/layout/material-v2.scss b/app/javascript/styles/material-v1-dark/layout/material-v2.scss
new file mode 100644
index 000000000..6c81dc3e4
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/layout/material-v2.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+//$bar-radius: 8px;
+
+
+// Button radius settings
+$button-radius: 8px;
+
+
+// Card radius settings
+$card-radius: 8px;
+
+
+// Dialog radius settings
+$dialog-radius: 8px;
+
+
+// Menu radius settings
+$menu-radius: 8px;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 8px; // corner rounded
+//$nav-drawer-item-radius: 32px; // full rounded
+//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
+
+
+// Avater cropping settings
+$avater-radius: 50%; // Rounded cropping
+//$avater-radius: 8px // Material v2 square
+
+
+// Chip settings
+// If you want to use contained-chip, please comment out below.
+.reactions-bar__item {
+ background: $outlined-chip-color !important;
+ border: 1px solid $border-color !important;
+
+ &.active { background-color: $outlined-chip-selected-color !important }
+
+ &:hover { background: $outlined-chip-hover-color !important }
+}
+.relationship-tag,
+.account-role {
+ background: $outlined-chip-color !important;
+ border: 1px solid $border-color !important;
+}
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/loader.scss b/app/javascript/styles/material-v1-dark/loader.scss
new file mode 100644
index 000000000..04d588001
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/loader.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+
+@import '../application';
+
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/cards.scss b/app/javascript/styles/material-v1-dark/plugins/cards.scss
similarity index 56%
rename from app/javascript/styles/material-v1-dark/cards.scss
rename to app/javascript/styles/material-v1-dark/plugins/cards.scss
index 96988f2c9..c134cbeeb 100644
--- a/app/javascript/styles/material-v1-dark/cards.scss
+++ b/app/javascript/styles/material-v1-dark/plugins/cards.scss
@@ -1,17 +1,24 @@
@charset "UTF-8";
-@import 'config';
-@import 'mixins';
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
.column {
box-shadow: none !important;
margin: 2px 0 !important;
padding: 8px !important;
+
+ > .scrollable { background: $background-color }
}
.status {
- border-bottom: 0 !important;
+ border-bottom: 0;
border-radius: $card-radius;
+ background: $card-background-color;
+
+ &__prepend { padding: 8px 8px 2px 0 }
}
.account { border-bottom: 0 !important }
@@ -20,6 +27,8 @@
.notification.notification {
@include shadow-1dp;
margin: 8px 2px;
+ border-radius: $card-radius;
+ background: $card-background-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
diff --git a/app/javascript/styles/material-v1-dark/plugins/dense.scss b/app/javascript/styles/material-v1-dark/plugins/dense.scss
new file mode 100644
index 000000000..42417124b
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/plugins/dense.scss
@@ -0,0 +1,63 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+ &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+ &__buttons { height: 48px }
+
+ &__button {
+ margin: 8px;
+ padding: 10px 8px;
+
+ .fa { vertical-align: text-top }
+ }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 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 }
+}
+
+.status {
+ padding: 8px 8px 8px 66px;
+
+ &__expand { width: 66px }
+
+ &__info { padding-right: 0 }
+
+ &__avatar {
+ left: 8px;
+ top: 10px;
+ }
+
+ &__content { padding-top: 2px }
+}
+
+.detailed-status {
+ padding: 14px;
+
+ &__meta { margin-top: 14px }
+
+ &__action-bar { padding: 10px 0 }
+}
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/plugins/plus.scss b/app/javascript/styles/material-v1-dark/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+ background: #eeeeee;
+ width: 28px !important;
+ height: 28px !important;
+
+ .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { 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/material-v1-dark/theme/_functions.scss b/app/javascript/styles/material-v1-dark/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@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/material-v1-dark/_mixins.scss b/app/javascript/styles/material-v1-dark/theme/_mixins.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/_mixins.scss
rename to app/javascript/styles/material-v1-dark/theme/_mixins.scss
diff --git a/app/javascript/styles/material-v1-light/account.scss b/app/javascript/styles/material-v1-dark/theme/account.scss
similarity index 97%
rename from app/javascript/styles/material-v1-light/account.scss
rename to app/javascript/styles/material-v1-dark/theme/account.scss
index b43194729..44d68d1e9 100644
--- a/app/javascript/styles/material-v1-light/account.scss
+++ b/app/javascript/styles/material-v1-dark/theme/account.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {
diff --git a/app/javascript/styles/material-v1-dark/theme/base_config.scss b/app/javascript/styles/material-v1-dark/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../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__input:hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+}*/
+
+
+// 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
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/basics.scss b/app/javascript/styles/material-v1-dark/theme/basics.scss
similarity index 83%
rename from app/javascript/styles/mastodon-material-dark/basics.scss
rename to app/javascript/styles/material-v1-dark/theme/basics.scss
index 5c7c3dc04..4c122d1c6 100644
--- a/app/javascript/styles/mastodon-material-dark/basics.scss
+++ b/app/javascript/styles/material-v1-dark/theme/basics.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
body { background: $background-color }
diff --git a/app/javascript/styles/mastodon-material-light/button.scss b/app/javascript/styles/material-v1-dark/theme/button.scss
similarity index 95%
rename from app/javascript/styles/mastodon-material-light/button.scss
rename to app/javascript/styles/material-v1-dark/theme/button.scss
index 38fd1a3c1..1231bac98 100644
--- a/app/javascript/styles/mastodon-material-light/button.scss
+++ b/app/javascript/styles/material-v1-dark/theme/button.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.icon-button {
diff --git a/app/javascript/styles/mastodon-material-light/columns.scss b/app/javascript/styles/material-v1-dark/theme/columns.scss
similarity index 83%
rename from app/javascript/styles/mastodon-material-light/columns.scss
rename to app/javascript/styles/material-v1-dark/theme/columns.scss
index 689028581..a6892adf2 100644
--- a/app/javascript/styles/mastodon-material-light/columns.scss
+++ b/app/javascript/styles/material-v1-dark/theme/columns.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.column {
@@ -26,7 +28,7 @@
&.active {
.column-header__icon {
- color: $secondary-color;
+ color: $top-bar-unread-icon-color;
text-shadow: none;
}
}
@@ -318,27 +320,38 @@
}
}
-.trends__item {
- padding: 16px;
- border-bottom: none;
+.trends {
+ &__header {
+ color: $section-text-color;
+ background: transparent;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
+ .fa { margin-right: 8px }
}
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
+ &__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;
+ }
}
}
@@ -361,8 +374,12 @@
&__unread { background: $badge-color }
}
+
+ &__pagination { color: $ui-text-color }
}
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
.reactions-bar {
.emoji-button {
color: $icon-button-color;
@@ -436,15 +453,9 @@
}
.notification-favourite .status.status-direct {
- background: transparent;
-
.icon-button.disabled { color: $disabled-icon-color }
}
-// read notification
-.notification.notification-favourite.focusable,
-.notification.notification-follow.focusable { background: $list-background-inactive-color }
-
.relationship-tag {
color: $ui-text-color;
background-color: $contained-chip-color;
@@ -454,8 +465,38 @@
opacity: 1;
}
-.react-swipeable-view-container { height: auto }
-
.attachment-list__list a { color: $secondary-text-color }
-.focusable { background: transparent !important }
\ No newline at end of file
+.focusable {
+ &:focus { background: $card-background-color }
+}
+
+// single column mode
+@media screen and (min-width: 415px) {
+ .tabs-bar {
+ margin-bottom: 0;
+
+ &__wrapper { padding-top: 0 }
+ }
+
+ .columns-area__panels__main {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 12px 12px 0;
+ }
+}
+
+@media screen and (min-width: 631px) {
+ .tabs-bar__link {
+ &:hover {
+ background: $tab-indicator-background-hover-color;
+ border-bottom-color: $tab-background-color;
+ }
+
+ &:active,
+ &:focus {
+ background: $tab-indicator-background-focus-color;
+ border-bottom-color: $tab-background-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/components.scss b/app/javascript/styles/material-v1-dark/theme/components.scss
similarity index 97%
rename from app/javascript/styles/mastodon-material-light/components.scss
rename to app/javascript/styles/material-v1-dark/theme/components.scss
index 92d2801f4..4f844229c 100644
--- a/app/javascript/styles/mastodon-material-light/components.scss
+++ b/app/javascript/styles/material-v1-dark/theme/components.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -40,7 +42,10 @@
&__inner {
background: $card-background-color;
- &.darker { background: $card-background-color }
+ &.darker {
+ background: $card-background-color;
+ position: inherit;
+ }
&__mastodon { background: $card-background-color }
}
@@ -79,7 +84,7 @@
opacity: 1;
}
&-times-circle.active {
- right: 10px;
+ right: 16px;
left: unset;
transform: none;
}
diff --git a/app/javascript/styles/material-v1-light/control.scss b/app/javascript/styles/material-v1-dark/theme/control.scss
similarity index 93%
rename from app/javascript/styles/material-v1-light/control.scss
rename to app/javascript/styles/material-v1-dark/theme/control.scss
index 7bd251291..a205a4cb7 100644
--- a/app/javascript/styles/material-v1-light/control.scss
+++ b/app/javascript/styles/material-v1-dark/theme/control.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
diff --git a/app/javascript/styles/mastodon-material-light/emoji-picker.scss b/app/javascript/styles/material-v1-dark/theme/emoji-picker.scss
similarity index 93%
rename from app/javascript/styles/mastodon-material-light/emoji-picker.scss
rename to app/javascript/styles/material-v1-dark/theme/emoji-picker.scss
index 2c17701cf..70e22752d 100644
--- a/app/javascript/styles/mastodon-material-light/emoji-picker.scss
+++ b/app/javascript/styles/material-v1-dark/theme/emoji-picker.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.emoji-picker-dropdown {
@@ -23,7 +25,7 @@
.emoji-mart {
width: 388px !important;
font-size: 14px;
- color: $ui-text-color;
+ color: $menu-text-color;
&-bar {
border: 0 solid $border-color;
diff --git a/app/javascript/styles/material-v1-dark/icons.scss b/app/javascript/styles/material-v1-dark/theme/icons.scss
similarity index 78%
rename from app/javascript/styles/material-v1-dark/icons.scss
rename to app/javascript/styles/material-v1-dark/theme/icons.scss
index beca11a6f..1367647ec 100644
--- a/app/javascript/styles/material-v1-dark/icons.scss
+++ b/app/javascript/styles/material-v1-dark/theme/icons.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -39,10 +41,4 @@
border: none;
padding: 2px 6px;
border-radius: 12px;
-}
-
-// favorite icon color
-.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/material-icons.scss b/app/javascript/styles/material-v1-dark/theme/material-icons.scss
similarity index 90%
rename from app/javascript/styles/material-v1-light/material-icons.scss
rename to app/javascript/styles/material-v1-dark/theme/material-icons.scss
index e473dfe31..51631eab5 100644
--- a/app/javascript/styles/material-v1-light/material-icons.scss
+++ b/app/javascript/styles/material-v1-dark/theme/material-icons.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
@import 'functions';
@@ -61,7 +63,8 @@
&.fa-arrows-alt,
&.fa-compress,
&.fa-user-times,
- &.fa-check {
+ &.fa-check,
+ &.fa-quote-right {
font-family: "Material Icons";
}
}
@@ -85,7 +88,7 @@
&.fa-sliders::before { content: "tune" }
&.fa-chevron-left::before { content: "arrow_back" }
&.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: "reply" }
+ &.fa-reply::before { content: $reply-icon }
&.fa-reply-all::before { content: "reply_all" }
&.fa-share-alt::before { content: "share" }
&.fa-star::before { content: $favorite-icon }
@@ -117,6 +120,7 @@
&.fa-compress::before { content: "fullscreen_exit" }
&.fa-user-times::before { content: "delete" }
&.fa-check::before { content: "check" }
+ &.fa-quote-right::before { content: "format_quote" }
}
// bookmark icon
@@ -137,6 +141,12 @@
}
}
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
// boost icon
.no-reduce-motion button.icon-button i.fa-retweet {
height: 18px;
diff --git a/app/javascript/styles/material-v1-dark/media.scss b/app/javascript/styles/material-v1-dark/theme/media.scss
similarity index 95%
rename from app/javascript/styles/material-v1-dark/media.scss
rename to app/javascript/styles/material-v1-dark/theme/media.scss
index 64a69a129..28de8db85 100644
--- a/app/javascript/styles/material-v1-dark/media.scss
+++ b/app/javascript/styles/material-v1-dark/theme/media.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
diff --git a/app/javascript/styles/mastodon-material-dark/mobile.scss b/app/javascript/styles/material-v1-dark/theme/mobile.scss
similarity index 74%
rename from app/javascript/styles/mastodon-material-dark/mobile.scss
rename to app/javascript/styles/material-v1-dark/theme/mobile.scss
index de6f4e94c..ed6467ebc 100644
--- a/app/javascript/styles/mastodon-material-dark/mobile.scss
+++ b/app/javascript/styles/material-v1-dark/theme/mobile.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -17,6 +19,11 @@
}
.fa { font-size: 20px }
+
+ span {
+ margin-left: 8px;
+ vertical-align: text-bottom;
+ }
}
&__wrapper {
@@ -41,8 +48,11 @@
}
.columns-area--mobile {
-
.column { margin: 0 !important }
+ .search__input { padding: 16px 46px }
- .search__input { padding: 16px 38px }
+ .search__icon .fa {
+ top: 16px;
+ left: 16px;
+ }
}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/modal.scss b/app/javascript/styles/material-v1-dark/theme/modal.scss
similarity index 87%
rename from app/javascript/styles/material-v1-light/modal.scss
rename to app/javascript/styles/material-v1-dark/theme/modal.scss
index 7734c8dfa..287dcf804 100644
--- a/app/javascript/styles/material-v1-light/modal.scss
+++ b/app/javascript/styles/material-v1-dark/theme/modal.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -64,6 +66,12 @@
&__container {
border-top: none;
}
+
+ &__comment {
+ border-right: none;
+
+ .setting-text-label { color: $ui-text-color }
+ }
}
.embed-modal .embed-modal__container {
diff --git a/app/javascript/styles/mastodon-material-light/statuses.scss b/app/javascript/styles/material-v1-dark/theme/statuses.scss
similarity index 87%
rename from app/javascript/styles/mastodon-material-light/statuses.scss
rename to app/javascript/styles/material-v1-dark/theme/statuses.scss
index f60c2d859..65b5fcc41 100644
--- a/app/javascript/styles/mastodon-material-light/statuses.scss
+++ b/app/javascript/styles/material-v1-dark/theme/statuses.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -10,7 +12,7 @@
&__expand { width: 70px }
&__info {
- font-size: 16px;
+ font-size: $name-font-size;
padding-right: 4px;
}
@@ -28,7 +30,7 @@
}
&__content {
- font-size: 16px;
+ font-size: $status-font-size;
padding-top: 4px;
color: $primary-text-color;
@@ -73,7 +75,12 @@
}
}
- &__prepend { color: $secondary-text-color }
+ &__prepend {
+ color: $secondary-text-color;
+ margin-left: 64px;
+
+ .status__display-name strong { color: $secondary-text-color }
+ }
&.status-direct:not(.read) {
background: transparent;
@@ -169,4 +176,10 @@
&__button {
.icon-button { font-size: 20px !important }
}
+}
+
+// search user trends
+.display-name {
+ &__html { color: $primary-text-color !important }
+ &__account { color: $secondary-text-color }
}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/theme/theme.scss b/app/javascript/styles/material-v1-dark/theme/theme.scss
new file mode 100644
index 000000000..5b7daddf6
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/theme/variables.scss b/app/javascript/styles/material-v1-dark/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light.scss b/app/javascript/styles/material-v1-light.scss
index 8668288e4..b56b4408a 100644
--- a/app/javascript/styles/material-v1-light.scss
+++ b/app/javascript/styles/material-v1-light.scss
@@ -1,18 +1,3 @@
@charset "UTF-8";
-@import 'application';
-@import 'material-v1-light/account';
-@import 'material-v1-light/basics';
-@import 'material-v1-light/button';
-//@import 'material-v1-light/cards';
-@import 'material-v1-light/columns';
-@import 'material-v1-light/components';
-@import 'material-v1-light/config';
-@import 'material-v1-light/control';
-@import 'material-v1-light/emoji-picker';
-@import 'material-v1-light/icons';
-@import 'material-v1-light/material-icons';
-@import 'material-v1-light/media';
-@import 'material-v1-light/mobile';
-@import 'material-v1-light/modal';
-@import 'material-v1-light/statuses';
\ No newline at end of file
+@import 'material-v1-light/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/_functions.scss b/app/javascript/styles/material-v1-light/_functions.scss
deleted file mode 100644
index 54750d029..000000000
--- a/app/javascript/styles/material-v1-light/_functions.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-
-
-@function to-string($value) {
- @return inspect($value);
-}
-
-// convert hex color code to svg styled color code
-@function svg-color ($color) {
- @return '%23' + string.slice(to-string($color), 2, 7);
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/mastodon-dark.scss b/app/javascript/styles/material-v1-light/color/mastodon-dark.scss
new file mode 100644
index 000000000..de22c451b
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/mastodon-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9baec8;
+$ui-text-color: #fff;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #606984;
+$tips-text-color: #6d7889;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4ea2df;
+$menu-text-color: #282c37;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #313543;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-color, 18%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #fff;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.7);
+$text-button-focus-color: transparentize($text-button-color, 0.6);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+
+// App bar color
+$top-bar-color: #313543;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: #d9e1e8;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/mastodon-light.scss b/app/javascript/styles/material-v1-light/color/mastodon-light.scss
new file mode 100644
index 000000000..134b18e10
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/mastodon-light.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #217aba;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: darken($background-color, 4%);
+$icon-background-active-color: darken($background-color, 8%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: lighten($text-button-color, 36%);
+$text-button-focus-color: lighten($text-button-color, 30%);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: #ccd7e0;
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #ffffff;
+$search-bar-color: #d9e1e8;
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/plus-classic.scss b/app/javascript/styles/material-v1-light/color/plus-classic.scss
new file mode 100644
index 000000000..3e817cde4
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/plus-classic.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/v1-dark.scss b/app/javascript/styles/material-v1-light/color/v1-dark.scss
new file mode 100644
index 000000000..652ffe37e
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/v1-dark.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($background-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-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/v1-light.scss b/app/javascript/styles/material-v1-light/color/v1-light.scss
index e672b5640..4000eead0 100644
--- a/app/javascript/styles/material-v1-light/color/v1-light.scss
+++ b/app/javascript/styles/material-v1-light/color/v1-light.scss
@@ -57,6 +57,7 @@ $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-background-color: transparentize(#000000, 0.5);
diff --git a/app/javascript/styles/material-v1-light/color/v2-dark.scss b/app/javascript/styles/material-v1-light/color/v2-dark.scss
new file mode 100644
index 000000000..c990d6b1e
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/v2-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #272727;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/v2-light.scss b/app/javascript/styles/material-v1-light/color/v2-light.scss
new file mode 100644
index 000000000..6fd1dea9e
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/v2-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: #ffffff;
+$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
+$floating-action-button-active-color: darken($floating-action-button-color, 10%);
+$floating-action-button-icon-color: $secondary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($background-color, 30%);
+$scroll-bar-thumb-active-color: darken($background-color, 38%);
+
+// App bar color
+$top-bar-color: $background-color;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/custom_color.scss b/app/javascript/styles/material-v1-light/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/custom_config.scss b/app/javascript/styles/material-v1-light/custom_config.scss
new file mode 100644
index 000000000..43b6488b6
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/custom_config.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your settings below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/custom_layout.scss b/app/javascript/styles/material-v1-light/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/config.scss b/app/javascript/styles/material-v1-light/icon_config.scss
similarity index 57%
rename from app/javascript/styles/material-v1-light/config.scss
rename to app/javascript/styles/material-v1-light/icon_config.scss
index 294c254c3..3274efde8 100644
--- a/app/javascript/styles/material-v1-light/config.scss
+++ b/app/javascript/styles/material-v1-light/icon_config.scss
@@ -1,12 +1,17 @@
-@charset "UTF-8";
+// 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
-// Color scheme
-@import 'color/v1-light';
-
-
-// Layout profile
-@import 'layout/material-v1';
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment"; // blooming
// Material Design Icon settings
@@ -15,25 +20,7 @@
font-family: "Material Icons";
src:
local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
-
-
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
\ No newline at end of file
+ //url(".../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/layout/material-v1.scss b/app/javascript/styles/material-v1-light/layout/material-v1.scss
index 92f369245..825deaf8c 100644
--- a/app/javascript/styles/material-v1-light/layout/material-v1.scss
+++ b/app/javascript/styles/material-v1-light/layout/material-v1.scss
@@ -1,5 +1,5 @@
@charset "UTF-8";
-@import '../mixins';
+@import '../theme/mixins';
// Navigation bar radius
diff --git a/app/javascript/styles/material-v1-light/layout/material-v2.scss b/app/javascript/styles/material-v1-light/layout/material-v2.scss
new file mode 100644
index 000000000..6c81dc3e4
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/layout/material-v2.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+//$bar-radius: 8px;
+
+
+// Button radius settings
+$button-radius: 8px;
+
+
+// Card radius settings
+$card-radius: 8px;
+
+
+// Dialog radius settings
+$dialog-radius: 8px;
+
+
+// Menu radius settings
+$menu-radius: 8px;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 8px; // corner rounded
+//$nav-drawer-item-radius: 32px; // full rounded
+//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
+
+
+// Avater cropping settings
+$avater-radius: 50%; // Rounded cropping
+//$avater-radius: 8px // Material v2 square
+
+
+// Chip settings
+// If you want to use contained-chip, please comment out below.
+.reactions-bar__item {
+ background: $outlined-chip-color !important;
+ border: 1px solid $border-color !important;
+
+ &.active { background-color: $outlined-chip-selected-color !important }
+
+ &:hover { background: $outlined-chip-hover-color !important }
+}
+.relationship-tag,
+.account-role {
+ background: $outlined-chip-color !important;
+ border: 1px solid $border-color !important;
+}
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/loader.scss b/app/javascript/styles/material-v1-light/loader.scss
new file mode 100644
index 000000000..04d588001
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/loader.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+
+@import '../application';
+
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/cards.scss b/app/javascript/styles/material-v1-light/plugins/cards.scss
similarity index 56%
rename from app/javascript/styles/material-v1-light/cards.scss
rename to app/javascript/styles/material-v1-light/plugins/cards.scss
index 96988f2c9..c134cbeeb 100644
--- a/app/javascript/styles/material-v1-light/cards.scss
+++ b/app/javascript/styles/material-v1-light/plugins/cards.scss
@@ -1,17 +1,24 @@
@charset "UTF-8";
-@import 'config';
-@import 'mixins';
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
.column {
box-shadow: none !important;
margin: 2px 0 !important;
padding: 8px !important;
+
+ > .scrollable { background: $background-color }
}
.status {
- border-bottom: 0 !important;
+ border-bottom: 0;
border-radius: $card-radius;
+ background: $card-background-color;
+
+ &__prepend { padding: 8px 8px 2px 0 }
}
.account { border-bottom: 0 !important }
@@ -20,6 +27,8 @@
.notification.notification {
@include shadow-1dp;
margin: 8px 2px;
+ border-radius: $card-radius;
+ background: $card-background-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
diff --git a/app/javascript/styles/material-v1-light/plugins/dense.scss b/app/javascript/styles/material-v1-light/plugins/dense.scss
new file mode 100644
index 000000000..42417124b
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/plugins/dense.scss
@@ -0,0 +1,63 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+ &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+ &__buttons { height: 48px }
+
+ &__button {
+ margin: 8px;
+ padding: 10px 8px;
+
+ .fa { vertical-align: text-top }
+ }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 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 }
+}
+
+.status {
+ padding: 8px 8px 8px 66px;
+
+ &__expand { width: 66px }
+
+ &__info { padding-right: 0 }
+
+ &__avatar {
+ left: 8px;
+ top: 10px;
+ }
+
+ &__content { padding-top: 2px }
+}
+
+.detailed-status {
+ padding: 14px;
+
+ &__meta { margin-top: 14px }
+
+ &__action-bar { padding: 10px 0 }
+}
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/plugins/plus.scss b/app/javascript/styles/material-v1-light/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+ background: #eeeeee;
+ width: 28px !important;
+ height: 28px !important;
+
+ .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { 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/material-v1-light/theme/_functions.scss b/app/javascript/styles/material-v1-light/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@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/material-v1-light/_mixins.scss b/app/javascript/styles/material-v1-light/theme/_mixins.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/_mixins.scss
rename to app/javascript/styles/material-v1-light/theme/_mixins.scss
diff --git a/app/javascript/styles/mastodon-material-light/account.scss b/app/javascript/styles/material-v1-light/theme/account.scss
similarity index 97%
rename from app/javascript/styles/mastodon-material-light/account.scss
rename to app/javascript/styles/material-v1-light/theme/account.scss
index b43194729..44d68d1e9 100644
--- a/app/javascript/styles/mastodon-material-light/account.scss
+++ b/app/javascript/styles/material-v1-light/theme/account.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {
diff --git a/app/javascript/styles/material-v1-light/theme/base_config.scss b/app/javascript/styles/material-v1-light/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../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__input:hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+}*/
+
+
+// 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
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/basics.scss b/app/javascript/styles/material-v1-light/theme/basics.scss
similarity index 83%
rename from app/javascript/styles/material-v1-light/basics.scss
rename to app/javascript/styles/material-v1-light/theme/basics.scss
index 5c7c3dc04..4c122d1c6 100644
--- a/app/javascript/styles/material-v1-light/basics.scss
+++ b/app/javascript/styles/material-v1-light/theme/basics.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
body { background: $background-color }
diff --git a/app/javascript/styles/mastodon-material-dark/button.scss b/app/javascript/styles/material-v1-light/theme/button.scss
similarity index 95%
rename from app/javascript/styles/mastodon-material-dark/button.scss
rename to app/javascript/styles/material-v1-light/theme/button.scss
index 38fd1a3c1..1231bac98 100644
--- a/app/javascript/styles/mastodon-material-dark/button.scss
+++ b/app/javascript/styles/material-v1-light/theme/button.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.icon-button {
diff --git a/app/javascript/styles/material-v1-light/columns.scss b/app/javascript/styles/material-v1-light/theme/columns.scss
similarity index 83%
rename from app/javascript/styles/material-v1-light/columns.scss
rename to app/javascript/styles/material-v1-light/theme/columns.scss
index 689028581..a6892adf2 100644
--- a/app/javascript/styles/material-v1-light/columns.scss
+++ b/app/javascript/styles/material-v1-light/theme/columns.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.column {
@@ -26,7 +28,7 @@
&.active {
.column-header__icon {
- color: $secondary-color;
+ color: $top-bar-unread-icon-color;
text-shadow: none;
}
}
@@ -318,27 +320,38 @@
}
}
-.trends__item {
- padding: 16px;
- border-bottom: none;
+.trends {
+ &__header {
+ color: $section-text-color;
+ background: transparent;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
+ .fa { margin-right: 8px }
}
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
+ &__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;
+ }
}
}
@@ -361,8 +374,12 @@
&__unread { background: $badge-color }
}
+
+ &__pagination { color: $ui-text-color }
}
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
.reactions-bar {
.emoji-button {
color: $icon-button-color;
@@ -436,15 +453,9 @@
}
.notification-favourite .status.status-direct {
- background: transparent;
-
.icon-button.disabled { color: $disabled-icon-color }
}
-// read notification
-.notification.notification-favourite.focusable,
-.notification.notification-follow.focusable { background: $list-background-inactive-color }
-
.relationship-tag {
color: $ui-text-color;
background-color: $contained-chip-color;
@@ -454,8 +465,38 @@
opacity: 1;
}
-.react-swipeable-view-container { height: auto }
-
.attachment-list__list a { color: $secondary-text-color }
-.focusable { background: transparent !important }
\ No newline at end of file
+.focusable {
+ &:focus { background: $card-background-color }
+}
+
+// single column mode
+@media screen and (min-width: 415px) {
+ .tabs-bar {
+ margin-bottom: 0;
+
+ &__wrapper { padding-top: 0 }
+ }
+
+ .columns-area__panels__main {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 12px 12px 0;
+ }
+}
+
+@media screen and (min-width: 631px) {
+ .tabs-bar__link {
+ &:hover {
+ background: $tab-indicator-background-hover-color;
+ border-bottom-color: $tab-background-color;
+ }
+
+ &:active,
+ &:focus {
+ background: $tab-indicator-background-focus-color;
+ border-bottom-color: $tab-background-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/components.scss b/app/javascript/styles/material-v1-light/theme/components.scss
similarity index 97%
rename from app/javascript/styles/material-v1-light/components.scss
rename to app/javascript/styles/material-v1-light/theme/components.scss
index 92d2801f4..4f844229c 100644
--- a/app/javascript/styles/material-v1-light/components.scss
+++ b/app/javascript/styles/material-v1-light/theme/components.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -40,7 +42,10 @@
&__inner {
background: $card-background-color;
- &.darker { background: $card-background-color }
+ &.darker {
+ background: $card-background-color;
+ position: inherit;
+ }
&__mastodon { background: $card-background-color }
}
@@ -79,7 +84,7 @@
opacity: 1;
}
&-times-circle.active {
- right: 10px;
+ right: 16px;
left: unset;
transform: none;
}
diff --git a/app/javascript/styles/mastodon-material-light/control.scss b/app/javascript/styles/material-v1-light/theme/control.scss
similarity index 93%
rename from app/javascript/styles/mastodon-material-light/control.scss
rename to app/javascript/styles/material-v1-light/theme/control.scss
index 7bd251291..a205a4cb7 100644
--- a/app/javascript/styles/mastodon-material-light/control.scss
+++ b/app/javascript/styles/material-v1-light/theme/control.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
diff --git a/app/javascript/styles/material-v1-light/emoji-picker.scss b/app/javascript/styles/material-v1-light/theme/emoji-picker.scss
similarity index 93%
rename from app/javascript/styles/material-v1-light/emoji-picker.scss
rename to app/javascript/styles/material-v1-light/theme/emoji-picker.scss
index 2c17701cf..70e22752d 100644
--- a/app/javascript/styles/material-v1-light/emoji-picker.scss
+++ b/app/javascript/styles/material-v1-light/theme/emoji-picker.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
.emoji-picker-dropdown {
@@ -23,7 +25,7 @@
.emoji-mart {
width: 388px !important;
font-size: 14px;
- color: $ui-text-color;
+ color: $menu-text-color;
&-bar {
border: 0 solid $border-color;
diff --git a/app/javascript/styles/material-v1-light/icons.scss b/app/javascript/styles/material-v1-light/theme/icons.scss
similarity index 78%
rename from app/javascript/styles/material-v1-light/icons.scss
rename to app/javascript/styles/material-v1-light/theme/icons.scss
index beca11a6f..1367647ec 100644
--- a/app/javascript/styles/material-v1-light/icons.scss
+++ b/app/javascript/styles/material-v1-light/theme/icons.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -39,10 +41,4 @@
border: none;
padding: 2px 6px;
border-radius: 12px;
-}
-
-// favorite icon color
-.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/material-icons.scss b/app/javascript/styles/material-v1-light/theme/material-icons.scss
similarity index 90%
rename from app/javascript/styles/mastodon-material-dark/material-icons.scss
rename to app/javascript/styles/material-v1-light/theme/material-icons.scss
index e473dfe31..51631eab5 100644
--- a/app/javascript/styles/mastodon-material-dark/material-icons.scss
+++ b/app/javascript/styles/material-v1-light/theme/material-icons.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
@import 'functions';
@@ -61,7 +63,8 @@
&.fa-arrows-alt,
&.fa-compress,
&.fa-user-times,
- &.fa-check {
+ &.fa-check,
+ &.fa-quote-right {
font-family: "Material Icons";
}
}
@@ -85,7 +88,7 @@
&.fa-sliders::before { content: "tune" }
&.fa-chevron-left::before { content: "arrow_back" }
&.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: "reply" }
+ &.fa-reply::before { content: $reply-icon }
&.fa-reply-all::before { content: "reply_all" }
&.fa-share-alt::before { content: "share" }
&.fa-star::before { content: $favorite-icon }
@@ -117,6 +120,7 @@
&.fa-compress::before { content: "fullscreen_exit" }
&.fa-user-times::before { content: "delete" }
&.fa-check::before { content: "check" }
+ &.fa-quote-right::before { content: "format_quote" }
}
// bookmark icon
@@ -137,6 +141,12 @@
}
}
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
// boost icon
.no-reduce-motion button.icon-button i.fa-retweet {
height: 18px;
diff --git a/app/javascript/styles/material-v1-light/media.scss b/app/javascript/styles/material-v1-light/theme/media.scss
similarity index 95%
rename from app/javascript/styles/material-v1-light/media.scss
rename to app/javascript/styles/material-v1-light/theme/media.scss
index 64a69a129..28de8db85 100644
--- a/app/javascript/styles/material-v1-light/media.scss
+++ b/app/javascript/styles/material-v1-light/theme/media.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
diff --git a/app/javascript/styles/material-v1-light/mobile.scss b/app/javascript/styles/material-v1-light/theme/mobile.scss
similarity index 74%
rename from app/javascript/styles/material-v1-light/mobile.scss
rename to app/javascript/styles/material-v1-light/theme/mobile.scss
index de6f4e94c..ed6467ebc 100644
--- a/app/javascript/styles/material-v1-light/mobile.scss
+++ b/app/javascript/styles/material-v1-light/theme/mobile.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -17,6 +19,11 @@
}
.fa { font-size: 20px }
+
+ span {
+ margin-left: 8px;
+ vertical-align: text-bottom;
+ }
}
&__wrapper {
@@ -41,8 +48,11 @@
}
.columns-area--mobile {
-
.column { margin: 0 !important }
+ .search__input { padding: 16px 46px }
- .search__input { padding: 16px 38px }
+ .search__icon .fa {
+ top: 16px;
+ left: 16px;
+ }
}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/modal.scss b/app/javascript/styles/material-v1-light/theme/modal.scss
similarity index 87%
rename from app/javascript/styles/mastodon-material-dark/modal.scss
rename to app/javascript/styles/material-v1-light/theme/modal.scss
index 7734c8dfa..287dcf804 100644
--- a/app/javascript/styles/mastodon-material-dark/modal.scss
+++ b/app/javascript/styles/material-v1-light/theme/modal.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -64,6 +66,12 @@
&__container {
border-top: none;
}
+
+ &__comment {
+ border-right: none;
+
+ .setting-text-label { color: $ui-text-color }
+ }
}
.embed-modal .embed-modal__container {
diff --git a/app/javascript/styles/material-v1-light/statuses.scss b/app/javascript/styles/material-v1-light/theme/statuses.scss
similarity index 87%
rename from app/javascript/styles/material-v1-light/statuses.scss
rename to app/javascript/styles/material-v1-light/theme/statuses.scss
index f60c2d859..65b5fcc41 100644
--- a/app/javascript/styles/material-v1-light/statuses.scss
+++ b/app/javascript/styles/material-v1-light/theme/statuses.scss
@@ -1,5 +1,7 @@
@charset "UTF-8";
-@import 'config';
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
@import 'mixins';
@@ -10,7 +12,7 @@
&__expand { width: 70px }
&__info {
- font-size: 16px;
+ font-size: $name-font-size;
padding-right: 4px;
}
@@ -28,7 +30,7 @@
}
&__content {
- font-size: 16px;
+ font-size: $status-font-size;
padding-top: 4px;
color: $primary-text-color;
@@ -73,7 +75,12 @@
}
}
- &__prepend { color: $secondary-text-color }
+ &__prepend {
+ color: $secondary-text-color;
+ margin-left: 64px;
+
+ .status__display-name strong { color: $secondary-text-color }
+ }
&.status-direct:not(.read) {
background: transparent;
@@ -169,4 +176,10 @@
&__button {
.icon-button { font-size: 20px !important }
}
+}
+
+// search user trends
+.display-name {
+ &__html { color: $primary-text-color !important }
+ &__account { color: $secondary-text-color }
}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/theme/theme.scss b/app/javascript/styles/material-v1-light/theme/theme.scss
new file mode 100644
index 000000000..5b7daddf6
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/theme/variables.scss b/app/javascript/styles/material-v1-light/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark.scss b/app/javascript/styles/material-v2-dark.scss
index 351cf8a73..6a342731c 100644
--- a/app/javascript/styles/material-v2-dark.scss
+++ b/app/javascript/styles/material-v2-dark.scss
@@ -1,18 +1,3 @@
@charset "UTF-8";
-@import 'application';
-@import 'material-v2-dark/account';
-@import 'material-v2-dark/basics';
-@import 'material-v2-dark/button';
-//@import 'material-v2-dark/cards';
-@import 'material-v2-dark/columns';
-@import 'material-v2-dark/components';
-@import 'material-v2-dark/config';
-@import 'material-v2-dark/control';
-@import 'material-v2-dark/emoji-picker';
-@import 'material-v2-dark/icons';
-@import 'material-v2-dark/material-icons';
-@import 'material-v2-dark/media';
-@import 'material-v2-dark/mobile';
-@import 'material-v2-dark/modal';
-@import 'material-v2-dark/statuses';
\ No newline at end of file
+@import 'material-v2-dark/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/_functions.scss b/app/javascript/styles/material-v2-dark/_functions.scss
deleted file mode 100644
index 54750d029..000000000
--- a/app/javascript/styles/material-v2-dark/_functions.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-
-
-@function to-string($value) {
- @return inspect($value);
-}
-
-// convert hex color code to svg styled color code
-@function svg-color ($color) {
- @return '%23' + string.slice(to-string($color), 2, 7);
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/account.scss b/app/javascript/styles/material-v2-dark/account.scss
deleted file mode 100644
index b43194729..000000000
--- a/app/javascript/styles/material-v2-dark/account.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-.account {
- border-bottom: 1px solid $border-color;
-
- .account__display-name { color: $primary-text-color }
- .account__display-name strong { color: $secondary-text-color }
-
- &__avatar {
- border-radius: $avater-radius;
- width: 40px;
- height: 40px;
-
- &-overlay {
- &-base {
- border-radius: 50%;
- width: 44px;
- height: 44px;
- background-size: 44px;
- }
-
- &-overlay { border-radius: $avater-radius }
- }
- }
-
- &__header {
- &__bar {
- background: $card-background-color;
- padding: 8px;
- border-bottom: 1px solid $border-color;
-
- .avatar .account__avatar { border: none }
- }
-
- &__tabs {
- padding: 8px;
-
- &__name {
- padding: 8px;
-
- h1 {
- color: $primary-text-color;
-
- small { color: $secondary-text-color }
- }
- }
-
- &__buttons {
- .icon-button {
- border: none;
- border-radius: 50%;
- padding: 0;
- }
- }
- }
-
- &__extra {
- margin-top: 0;
-
- &__links {
- color: $secondary-text-color;
- padding: 10px 0;
-
- a {
- color: $secondary-text-color;
- padding: 4px 12px;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &__bio {
- margin: 0;
-
- .account__header {
- &__content {
- color: $primary-text-color;
- padding: 8px;
- }
-
- &__fields {
- border: 1px solid $border-color;
- border-radius: 4px;
-
- .verified {
- border: none;
- background: $verified-background-color;
-
- a,
- &__mark { color: $primary-text-color }
- }
-
- dl {
- border-bottom: 1px solid $border-color;
-
- &:first-child .verified { border-radius: 0 }
-
- &:last-child { border-bottom: 0 }
- }
-
- dt {
- color: $primary-text-color;
- background: $list-background-inactive-color;
- }
-
- dd { color: $primary-text-color }
- }
- }
- }
- }
-
- &__section-headline {
- background: $text-tab-background-color;
- border-bottom: 1px solid $border-color;
-
- a {
- padding: 16px 0;
- color: $text-tab-indicator-color;
-
- &.active {
- color: $text-tab-indicator-active-color;
- border-bottom: 4px solid $text-tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $text-tab-indicator-background-focus-color }
- }
-
- &:hover { background: $text-tab-indicator-background-hover-color }
- }
- }
-}
-
-.account-role {
- padding: 4px 8px;
- border-radius: 17px;
- color: $ui-text-color;
- background-color: $contained-chip-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/basics.scss b/app/javascript/styles/material-v2-dark/basics.scss
deleted file mode 100644
index 5c7c3dc04..000000000
--- a/app/javascript/styles/material-v2-dark/basics.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-
-
-body { background: $background-color }
-
-// Chrome & Safari scroll bar
-::-webkit-scrollbar-thumb {
- background: $scroll-bar-thumb-color;
-
- &:hover { background: $scroll-bar-thumb-hover-color }
- &:active { background: $scroll-bar-thumb-active-color }
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
- background: transparent !important;
-}
-
-// Firefox scroll bar
-html {
- scrollbar-color: $scroll-bar-thumb-color transparent;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/button.scss b/app/javascript/styles/material-v2-dark/button.scss
deleted file mode 100644
index 38fd1a3c1..000000000
--- a/app/javascript/styles/material-v2-dark/button.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-.icon-button {
- color: $icon-button-color;
- border-radius: 50%;
-
- &.active {
- color: $icon-button-active-color;
-
- &:hover { color: $icon-button-active-hover-color }
- }
-
- &.disabled { color: $disabled-icon-color }
-
- &.inverted {
- color: $icon-button-color;
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
- }
- }
-
- &.overlayed {
- border-radius: 50%;
- background: $media-icon-background-color;
- color: $media-icon-color;
-
- &:hover {
- background: $media-icon-background-color;
- color: $media-icon-hover-color;
- }
- }
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
- }
-
- &:active,
- &:focus { background-color: transparent }
-}
-
-.text-icon-button {
- color: $icon-button-color;
- border-radius: 50%;
- font-size: 12px;
-
- &:hover {
- background-color: $icon-background-hover-color;
- color: $icon-button-hover-color;
- }
-}
-
-.button,
-.button:active,
-.button:focus {
- background-color: $contained-button-color;
- border-radius: $button-radius;
-}
-
-.button:hover {
- @include shadow-2dp;
- background-color: $contained-button-hover-color;
-}
-
-.button.logo-button {
- background: $contained-button-color;
- margin: 2px;
-
- &:hover { background: $contained-button-hover-color }
-
- .button--destructive:hover { background: $contained-button-hover-color }
-}
-
-.button.button--block { margin: 8px 0 }
-
-.button.confirmation-modal__cancel-button {
- box-shadow: none;
- background-color: transparent;
- margin: 0 8px;
- color: $text-button-color;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
-}
-
-.spoiler-button__overlay__label {
- background: $media-icon-background-color;
- border-radius: $button-radius;
- color: $media-icon-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/cards.scss b/app/javascript/styles/material-v2-dark/cards.scss
deleted file mode 100644
index 96988f2c9..000000000
--- a/app/javascript/styles/material-v2-dark/cards.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.column {
- box-shadow: none !important;
- margin: 2px 0 !important;
- padding: 8px !important;
-}
-
-.status {
- border-bottom: 0 !important;
- border-radius: $card-radius;
-}
-
-.account { border-bottom: 0 !important }
-
-.status__wrapper.status__wrapper,
-.notification.notification {
- @include shadow-1dp;
- margin: 8px 2px;
-}
-
-.notification .status__wrapper.status__wrapper { box-shadow: none !important }
-
-.notification__filter-bar {
- @include non-overflow-shadow-4dp;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/mastodon-dark.scss b/app/javascript/styles/material-v2-dark/color/mastodon-dark.scss
new file mode 100644
index 000000000..de22c451b
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/mastodon-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9baec8;
+$ui-text-color: #fff;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #606984;
+$tips-text-color: #6d7889;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4ea2df;
+$menu-text-color: #282c37;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #313543;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-color, 18%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #fff;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.7);
+$text-button-focus-color: transparentize($text-button-color, 0.6);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+
+// App bar color
+$top-bar-color: #313543;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: #d9e1e8;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/mastodon-light.scss b/app/javascript/styles/material-v2-dark/color/mastodon-light.scss
new file mode 100644
index 000000000..134b18e10
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/mastodon-light.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #217aba;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: darken($background-color, 4%);
+$icon-background-active-color: darken($background-color, 8%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: lighten($text-button-color, 36%);
+$text-button-focus-color: lighten($text-button-color, 30%);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: #ccd7e0;
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #ffffff;
+$search-bar-color: #d9e1e8;
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/plus-classic.scss b/app/javascript/styles/material-v2-dark/color/plus-classic.scss
new file mode 100644
index 000000000..3e817cde4
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/plus-classic.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/v1-dark.scss b/app/javascript/styles/material-v2-dark/color/v1-dark.scss
new file mode 100644
index 000000000..652ffe37e
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/v1-dark.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($background-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-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/v1-light.scss b/app/javascript/styles/material-v2-dark/color/v1-light.scss
new file mode 100644
index 000000000..4000eead0
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/v1-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/v2-dark.scss b/app/javascript/styles/material-v2-dark/color/v2-dark.scss
index 3c0de2770..c990d6b1e 100644
--- a/app/javascript/styles/material-v2-dark/color/v2-dark.scss
+++ b/app/javascript/styles/material-v2-dark/color/v2-dark.scss
@@ -57,6 +57,7 @@ $disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
@@ -88,7 +89,7 @@ $toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
-$border-color: #5f6368;
+$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
diff --git a/app/javascript/styles/material-v2-dark/color/v2-light.scss b/app/javascript/styles/material-v2-dark/color/v2-light.scss
new file mode 100644
index 000000000..6fd1dea9e
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/v2-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: #ffffff;
+$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
+$floating-action-button-active-color: darken($floating-action-button-color, 10%);
+$floating-action-button-icon-color: $secondary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($background-color, 30%);
+$scroll-bar-thumb-active-color: darken($background-color, 38%);
+
+// App bar color
+$top-bar-color: $background-color;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/columns.scss b/app/javascript/styles/material-v2-dark/columns.scss
deleted file mode 100644
index 689028581..000000000
--- a/app/javascript/styles/material-v2-dark/columns.scss
+++ /dev/null
@@ -1,461 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-.column {
- @include shadow-1dp;
- padding: 0;
- margin: 10px 8px;
- border-radius: $card-radius;
-
- &>.scrollable { background: $list-background-color }
-
- &:last-child { box-shadow: none }
-}
-
-.column-header {
- background: $top-bar-color;
- border-radius: $bar-radius;
-
- > button {
- padding: 16px 0 16px 16px;
- color: $top-bar-text-color;
- }
-
- &>.column-header__back-button { color: $top-bar-icon-color }
-
- &.active {
- .column-header__icon {
- color: $secondary-color;
- text-shadow: none;
- }
- }
-
- &__icon {
- margin-right: 16px;
- color: $top-bar-icon-color;
- font-size: 20px;
- }
-
- &__buttons { height: 56px }
-
- &__button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- margin: 8px 10px;
- padding: 10px 12px;
- border-radius: 50%;
-
- &.active {
- color: $top-bar-icon-active-color;
- background: $icon-background-active-color;
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
- }
- }
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
- }
- }
-
- &__setting-btn {
- color: $icon-button-color;
- padding: 8px 0;
-
- &:hover {
- color: $icon-button-hover-color;
- text-decoration: none;
- }
-
- .fa { font-size: 20px }
-
- span { vertical-align: middle }
- }
-
- &__setting-arrows {
- font-size: 16px;
- border-bottom: 8px;
-
- .column-header__setting-btn {
- padding: 8px;
- border-radius: 50%;
-
- &:last-child { padding-right: 8px }
- }
- }
-
- &__wrapper {
- @include shadow-4dp;
- border-radius: $bar-radius;
-
- .announcements { border-top: 1px solid $border-color }
-
- &.active {
- @include shadow-4dp;
-
- &::before { background: transparent }
- }
- }
-
- &__collapsible {
- color: $ui-text-color;
- background: $card-background-color;
- border-top: 1px solid $border-color;
-
- &-inner {
- background: $card-background-color;
- padding: 16px;
- }
-
- &.collapsed { border-top: none }
- }
-
- &__back-button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 8px;
- margin: auto 0;
- border-radius: 50%;
-
- span { display: none }
- }
-}
-
-.column-subheading {
- color: $section-text-color;
- background: $background-color;
- padding: 12px 16px;
- border-top: 1px solid $border-color;
-}
-
-.column-link {
- color: $ui-text-color;
- background: $background-color;
- padding: 16px;
- border-radius: $nav-drawer-item-radius;
-
- &:hover { background: $list-background-hover-color }
-
- &:active,
- &:focus { background: $list-background-active-color }
-
- &__icon {
- margin-right: 32px;
- font-size: 20px;
- }
-
- &--transparent {
- &.active {
- color: $ui-text-color;
- background: $menu-background-active-color;
-
- &:hover { background: $menu-background-active-hover-color }
-
- .fa { color: $icon-color }
- }
-
- &:hover {
- color: $ui-text-color;
-
- .fa { color: $icon-color }
- }
- }
-
- .fa { color: $icon-color }
-}
-
-.column-settings {
- &__section {
- color: $section-text-color;
- margin-bottom: 0;
- margin-top: 8px;
- }
-
- &__row .text-btn { margin-bottom: 0 }
-}
-
-.column-back-button {
- @include shadow-4dp;
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 16px;
-
- span { visibility: hidden } // hide "back" string
-}
-
-.column-inline-form {
- padding: 16px 0 16px 16px;
- background: $card-background-color;
-
- .icon-button { margin: 0 16px }
-}
-
-.setting-text {
- color: $primary-text-color;
- background: $search-bar-color;
- border-radius: $bar-radius;
-
- &::placeholder { color: $tips-text-color }
-
- &:focus {
- @include shadow-1dp;
- background: $search-bar-focus-color;
- }
-}
-
-.empty-column-indicator {
- color: $secondary-text-color;
- background: $card-background-color;
- font-size: 16px;
-}
-
-.conversation {
- border-bottom: 1px solid $border-color;
- padding: 12px;
- background: $list-background-inactive-color;
-
- &--unread {
- background: $list-background-color;
-
- .conversation__content__relative-time { color: $info-text-color }
- }
-
- &__unread { background: $primary-color }
-
- &__avatar { padding: 0 16px 0 0 }
-
- &__content {
- padding: 0;
-
- &__relative-time {
- font-size: 14px;
- color: $info-text-color;
- }
-
- &__names,
- &__names a {
- color: $primary-text-color;
- font-size: 16px;
- }
- }
-}
-
-// read status in notification column
-.muted {
- .status {
- &__content {
- color: $read-primary-text-color;
-
- p { color: $read-primary-text-color }
-
- a { color: $read-secondary-text-color }
- }
-
- &__display-name strong { color: $read-primary-text-color }
- }
-
- .poll {
- color: $read-primary-text-color;
-
- &__chart {
- background: $read-poll-bar-color;
-
- &.leading { background: $read-poll-bar-leading-color }
- }
-
- &__footer,
- &__link { color: $read-ui-text-color }
- }
-}
-
-.load-gap { border-bottom: 1px solid $border-color }
-
-.load-more {
- color: $icon-color;
- padding: 16px;
-
- &:hover { background: $menu-background-hover-color }
-}
-
-.getting-started {
- background: $background-color;
- color: $ui-text-color;
-
- &__wrapper {
- background: $background-color;
- height: auto !important;
- border-bottom: 1px solid $border-color;
- }
-
- &__footer {
- padding: 16px;
-
- p {
- color: $secondary-text-color;
- font-size: 12px;
- margin-bottom: 16px;
- }
-
- a { color: $ui-text-color }
-
- p a { color: $link-text-color }
- }
-
- &__trends {
- background: $background-color;
- margin-bottom: 0;
-
- h4 {
- color: $section-text-color;
- padding: 12px 16px;
- border-top: 1px solid $border-color;
- border-bottom: none;
- }
- }
-}
-
-.trends__item {
- padding: 16px;
- border-bottom: none;
-
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
- }
-
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
- }
-}
-
-.setting-toggle {
- &__label {
- color: $ui-text-color;
- margin: 8px 8px 8px 14px;
- }
-}
-
-.announcements {
- background: $card-background-color;
- padding: 0;
-
- &__container { color: $primary-text-color }
-
- &__item {
- padding: 16px;
- font-size: 16px;
-
- &__unread { background: $badge-color }
- }
-}
-
-.reactions-bar {
- .emoji-button {
- color: $icon-button-color;
- font-size: 20px;
-
- &:hover { color: $icon-button-hover-color }
-
- &:active { color: $icon-button-active-color }
- }
-
- &__item {
- background: $contained-chip-color;
- border-radius: 17px;
- margin: 2px 4px;
-
- &.active {
- background-color: $contained-chip-selected-color;
- .reactions-bar__item__count { color: $ui-text-color }
- }
-
- &__emoji {
- width: 24px;
- height: 24px;
- margin: 4px 0 4px 2px;
- }
-
- &__count {
- font-size: 16px;
- margin: 0 8px;
- color: $secondary-text-color;
- }
-
- &:hover { background: $contained-chip-hover-color }
- }
-}
-
-.notification {
- &__filter-bar {
- background: $tab-background-color;
- border-bottom: 1px solid $border-color;
- z-index: 1;
-
- button {
- background: $tab-background-color;
- color: $tab-indicator-color;
- font-size: 16px;
-
- span { font-size: 14px }
-
- &.active {
- color: $tab-indicator-active-color;
- border-bottom: 4px solid $tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $tab-indicator-background-focus-color }
- }
-
- &:hover { background: $tab-indicator-background-hover-color }
- }
- }
-
- &__message {
- color: $secondary-text-color;
- margin: 0 16px 0 70px;
- font-size: 16px;
- }
-
- &__display-name:hover { color: inherit }
-}
-
-.notification-favourite .status.status-direct {
- background: transparent;
-
- .icon-button.disabled { color: $disabled-icon-color }
-}
-
-// read notification
-.notification.notification-favourite.focusable,
-.notification.notification-follow.focusable { background: $list-background-inactive-color }
-
-.relationship-tag {
- color: $ui-text-color;
- background-color: $contained-chip-color;
- font-size: 12px;
- border-radius: 17px;
- padding: 4px 8px;
- opacity: 1;
-}
-
-.react-swipeable-view-container { height: auto }
-
-.attachment-list__list a { color: $secondary-text-color }
-
-.focusable { background: transparent !important }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/components.scss b/app/javascript/styles/material-v2-dark/components.scss
deleted file mode 100644
index 92d2801f4..000000000
--- a/app/javascript/styles/material-v2-dark/components.scss
+++ /dev/null
@@ -1,389 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.drawer {
- &__header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- justify-content: space-around;
-
- a { transition: none }
-
- a:hover {
- background: $icon-background-hover-color;
- border-radius: 50%;
- }
- }
-
- &__tab {
- color: $top-bar-icon-color;
- font-size: 20px;
- margin: 10px auto 10px;
- padding: 8px;
- flex: none;
- height: 20px;
- width: 20px;
- border-bottom: none;
- text-align: justify;
-
- &:hover { color: $top-bar-icon-hover-color }
- }
-
- &__pager {
- @include shadow-1dp;
- border-radius: $card-radius;
- }
-
- &__inner {
- background: $card-background-color;
-
- &.darker { background: $card-background-color }
-
- &__mastodon { background: $card-background-color }
- }
-}
-
-.search {
- &__input {
- background: $search-bar-color;
- color: $tips-text-color;
- border-radius: $search-bar-radius;
- padding: 12px 12px 12px 40px;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__icon {
- .fa {
- color: $icon-color;
- font-size: 20px;
- top: 12px;
- right: unset;
- left: 12px;
- height: 6px;
- transition: none;
-
- &.active { opacity: 1 }
-
- &-search {
- transform: none;
- opacity: 1;
- }
- &-times-circle.active {
- right: 10px;
- left: unset;
- transform: none;
- }
- }
- }
-}
-
-.search-popout {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- border-radius: 0px $bar-radius;
- border-top: 1px solid $border-color;
- margin-top: 0;
- color: $tips-text-color;
-
- h4 {
- color: $secondary-text-color;
- }
-
- em {
- color: $search-bar-text-color;
- }
-}
-
-.search-results {
- &__header {
- color: $secondary-text-color;
- background-color: $card-background-color;
- padding: 16px;
-
- .fa { margin-right: 8px }
- }
-
- &__section {
- h5 {
- background: $card-background-color;
- border-bottom: 1px solid $border-color;
- padding: 16px;
- color: $section-text-color;
-
- .fa { margin-right: 8px }
- }
- }
-}
-
-.navigation-bar {
- color: $secondary-text-color;
- padding: 14px;
-
- strong {
- color: $ui-text-color;
- }
-}
-
-.navigation-panel hr {
- border-top: 1px solid $border-color;
- margin: 8px 0;
-}
-
-.dropdown-menu {
- @include shadow-8dp;
- background: $menu-background-color;
- padding: 8px 0;
- border-radius: $menu-radius;
-
- &__arrow { visibility: hidden }
-
- &__item a {
- font-size: 14px;
- padding: 8px 16px;
- background: $menu-background-color;
- color: $menu-text-color;
-
- &:hover, &:active {
- background: $menu-background-hover-color;
- color: $menu-text-color;
- }
- }
-
- &__separator {
- margin: 8px 0;
- border-bottom: 1px solid $border-color;
- }
-}
-
-.compose-form {
- .autosuggest-textarea {
- &__textarea {
- background: $card-background-color;
- color: $ui-text-color;
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__suggestions {
- @include shadow-1dp;
- background: $menu-background-color;
- color: $ui-text-color;
- border-radius: $card-radius;
- font-size: 16px;
- padding: 8px 0;
-
- &__item {
- padding: 8px;
- border-radius: 0;
-
- &:hover { background: $menu-background-hover-color }
-
- &.selected,
- &:focus,
- &:active { background: $menu-background-active-color }
- }
- }
- }
-
- .spoiler-input__input {
- color: $ui-text-color;
- background: $card-background-color;
-
- &::placeholder { color: $tips-text-color }
- }
-
- .compose-form {
- &__warning {
- @include shadow-1dp;
- color: $secondary-text-color;
- background: $card-background-color;
- padding: 16px;
-
- a { color: $link-text-color }
- }
-
- &__modifiers {
- background: $card-background-color;
- color: $tips-text-color;
- }
-
- &__buttons-wrapper {
- background: $card-background-color;
- color: $tips-text-color;
- }
-
- &__poll-wrapper {
- border-top: 1px solid $border-color;
-
- ul { padding: 12px }
-
- select {
- color: $ui-text-color;
- background-color: $background-color;
- border: 0;
-
- &:focus { border-color: $border-active-color }
- }
-
- .button.button-secondary {
- box-shadow: none;
- color: $outlined-button-color;
- border-color: $outlined-button-color;
-
- &:hover { background-color: $outlined-button-hover-color }
-
- &:active { background-color: $outlined-button-active-color }
-
- &:focus { background-color: $outlined-button-color }
-
-
- }
- }
-
- &__utilBtns { padding-top: 0 }
-
- &__publish .compose-form__publish-button-wrapper { box-shadow: none }
- }
-}
-
-.no-reduce-motion .spoiler-input {
- transition-duration: .2s, .2s;
-}
-
-
-.poll {
- &__input {
- border: 2px solid $control-border-color;
- width: 20px;
- height: 20px;
- flex: 0 0 20px;
- }
-
- &__text input[type=text] {
- color: $ui-text-color;
- background: $background-color;
- border: 1px solid $border-color;
- padding: 8px 12px;
-
- &:focus { border-color: $border-active-color }
- }
-
- &__chart {
- border-radius: 0;
- background: $poll-bar-color;
-
- &.leading { background: $poll-bar-leading-color }
- }
-
- &__footer {
- padding-top: 8px;
- padding-bottom: 0;
- color: $ui-text-color;
- }
-
- &__link { color: $ui-text-color }
-}
-
-.privacy-dropdown {
- &.active .privacy-dropdown__value.active {
- background: $icon-background-hover-color;
- border-radius: 50%;
- box-shadow: none;
-
- .icon-button { color: $icon-button-active-color }
- }
-
- &__dropdown {
- @include shadow-8dp;
- background: $menu-background-color;
- border-radius: $dialog-radius;
- }
-
- &__option {
- color: $icon-color;
- padding: 8px 16px;
-
- &__icon {
- font-size: 20px;
- margin-right: 12px;
- }
-
- &__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &.active {
- background: $menu-background-active-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &:hover {
- background: $menu-background-active-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &:hover {
- background: $menu-background-hover-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-}
-
-.character-counter {
- color: $secondary-text-color;
-}
-
-.reply-indicator {
- @include shadow-1dp;
- border-radius: $card-radius;
- background: $card-background-color;
- padding: 16px;
-
- &__header { margin-bottom: 4px }
-
- &__display {
- &-name {
- color: $primary-text-color;
- padding-right: 24px;
- }
-
- &-avatar { margin-right: 8px }
- }
-
- &__content { color: $primary-text-color }
-}
-
-.attachment-list {
- &__list a { color: $secondary-text-color }
-
- &.compact .fa { color: $icon-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/control.scss b/app/javascript/styles/material-v2-dark/control.scss
deleted file mode 100644
index 7bd251291..000000000
--- a/app/javascript/styles/material-v2-dark/control.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.react-toggle {
- width: 36px;
- height: 16px;
- border-radius: 15px;
-
- &-track {
- background-color: $toggle-track-color;
- margin: 4px;
- width: 36px;
- height: 16px;
-
- &-check { visibility: hidden }
- &-x { visibility: hidden }
- }
-
- &-thumb {
- @include shadow-1dp;
- width: 20px;
- height: 20px;
- border: 0;
- background-color: $toggle-thumb-color;
- }
-
- &--checked {
- .react-toggle{
- &-track { background-color: $toggle-track-active-color }
-
- &-thumb {
- background-color: $toggle-thumb-active-color;
- left: 22px;
- }
- }
-
- &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
-
- }
-
- &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
-}
-
-.radio-button {
- padding: 8px 0;
-
- &__input {
- border: 2px solid $border-color;
-
- &.checked {
- border-color: $icon-button-active-color;
- background: $icon-button-active-color;
- padding: 3px;
- background-clip: content-box;
- }
- }
-}
-
-.compose-form__sensitive-button .checkbox {
- border: 2px solid $border-color;
- border-radius: 2px;
-
- &.active {
- border-color: $primary-color;
- background: $primary-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/custom_color.scss b/app/javascript/styles/material-v2-dark/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/custom_config.scss b/app/javascript/styles/material-v2-dark/custom_config.scss
new file mode 100644
index 000000000..c0e23398a
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/custom_config.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/v2-dark';
+
+@import 'layout/material-v2';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/custom_layout.scss b/app/javascript/styles/material-v2-dark/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/emoji-picker.scss b/app/javascript/styles/material-v2-dark/emoji-picker.scss
deleted file mode 100644
index 2c17701cf..000000000
--- a/app/javascript/styles/material-v2-dark/emoji-picker.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-.emoji-picker-dropdown {
- &__menu {
- @include shadow-8dp;
- background: $menu-background-color;
- border-radius: $menu-radius;
- }
-
- &__modifiers__menu {
- @include shadow-8dp;
- background: $menu-background-color;
- border-radius: $menu-radius;
-
- button {
- padding: 8px;
- }
- }
-}
-
-.emoji-mart {
- width: 388px !important;
- font-size: 14px;
- color: $ui-text-color;
-
- &-bar {
- border: 0 solid $border-color;
-
- &:first-child {
- background: $menu-background-color;
- }
- }
-
- &-anchors {
- color: $icon-button-color;
- padding: 0;
- }
-
- &-anchor {
- padding: 10px 4px;
-
- &-selected {
- color: $icon-button-active-color;
- }
-
- &-bar {
- background-color: $tab-indicator-active-color;
- }
-
- &:hover {
- color: $icon-button-hover-color;
- }
- }
-
- &-search {
- background: $menu-background-color;
-
- input {
- outline: none;
- padding: 8px;
- background: $search-bar-color;
- color: $ui-text-color;
- border: 0;
- border-radius: $search-bar-radius;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- }
- }
- }
-
- &-scroll {
- padding: 0 8px 8px;
- background: $menu-background-color;
- }
-
- &-category-label span {
- padding: 4px 6px;
- background: $menu-background-color;
- }
-
- &-emoji:hover::before {
- background-color: $icon-background-hover-color;
- }
-
- &-no-results { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/icon_config.scss b/app/javascript/styles/material-v2-dark/icon_config.scss
new file mode 100644
index 000000000..3274efde8
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/icon_config.scss
@@ -0,0 +1,26 @@
+// 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
+
+
+// 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.
+@font-face {
+ font-family: "Material Icons";
+ src:
+ local("Material Icons"),
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
+ //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
+ //url(".../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/icons.scss b/app/javascript/styles/material-v2-dark/icons.scss
deleted file mode 100644
index beca11a6f..000000000
--- a/app/javascript/styles/material-v2-dark/icons.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.fa.fa-users.column-link,
-.fa.fa-globe.column-link,
-.fa.fa-address-book.column-link,
-.fa.fa-bullhorn.column-link,
-.fa.fa-envelope.column-link,
-.fa.fa-bookmark.column-link,
-.fa.fa-star.column-link,
-.fa.fa-list-ul.column-link {
- &__icon.fa-fw { color: $icon-color }
-}
-
-
-.fa { vertical-align: sub } // adjust material icon font baseline to other font
-
-.fa.fa-times,
-.fa.fa-eraser,
-.fa.fa-plus { vertical-align: middle } // adjustment exception
-
-.fa.fa-check { vertical-align: initial }
-
-.fa.fa-lock { text-transform: none }
-
-.fa-fw { width: 16px }
-
-// icon in tab settings
-.fa.fa-chevron-left.column-back-button__icon.fa-fw,
-.text-btn.column-header__setting-btn .fa.fa-eraser {
- font-size: 20px;
- margin-right: 16px;
-}
-
-.icon-with-badge__badge {
- background: $badge-color;
- border: none;
- padding: 2px 6px;
- border-radius: 12px;
-}
-
-// favorite icon color
-.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/layout/material-v1.scss b/app/javascript/styles/material-v2-dark/layout/material-v1.scss
new file mode 100644
index 000000000..825deaf8c
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@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;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 0;
+
+
+// Avater cropping settings
+$avater-radius: 50%; // Rounded cropping
+//$avater-radius: 2px // Material v1 square
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/layout/material-v2.scss b/app/javascript/styles/material-v2-dark/layout/material-v2.scss
index 86d2c496f..6c81dc3e4 100644
--- a/app/javascript/styles/material-v2-dark/layout/material-v2.scss
+++ b/app/javascript/styles/material-v2-dark/layout/material-v2.scss
@@ -1,5 +1,5 @@
@charset "UTF-8";
-@import '../mixins';
+@import '../theme/mixins';
// Navigation bar radius
diff --git a/app/javascript/styles/material-v2-dark/loader.scss b/app/javascript/styles/material-v2-dark/loader.scss
new file mode 100644
index 000000000..04d588001
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/loader.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+
+@import '../application';
+
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/material-icons.scss b/app/javascript/styles/material-v2-dark/material-icons.scss
deleted file mode 100644
index e473dfe31..000000000
--- a/app/javascript/styles/material-v2-dark/material-icons.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'functions';
-
-
-.fa {
- &.fa-bars,
- &.fa-navicon,
- &.fa-reorder,
- &.fa-globe,
- &.fa-cog,
- &.fa-cogs,
- &.fa-gears,
- &.fa-sign-out,
- &.fa-search,
- &.fa-times,
- &.fa-times-circle,
- &.fa-close,
- &.fa-remove,
- &.fa-chevron-down,
- &.fa-ellipsis-v,
- &.fa-paperclip,
- &.fa-tasks,
- &.fa-plus,
- &.fa-unlock,
- &.fa-lock,
- &.fa-envelope,
- &.fa-home,
- &.fa-bullhorn,
- &.fa-sliders,
- &.fa-chevron-left,
- &.fa-chevron-right,
- &.fa-reply,
- &.fa-reply-all,
- &.fa-share-alt,
- &.fa-star,
- &.fa-bookmark,
- &.fa-ellipsis-h,
- &.fa-bell,
- &.fa-eraser,
- &.fa-users,
- &.fa-file-text,
- &.fa-user-plus,
- &.fa-address-book,
- &.fa-address-book-o,
- &.fa-list,
- &.fa-list-ul,
- &.fa-eye,
- &.fa-eye-slash,
- &.fa-pencil,
- &.fa-trash,
- &.fa-play,
- &.fa-external-link,
- &.fa-retweet,
- &.fa-link,
- &.fa-pause,
- &.fa-volume-up,
- &.fa-volume-off,
- &.fa-expand,
- &.fa-download,
- &.fa-arrows-alt,
- &.fa-compress,
- &.fa-user-times,
- &.fa-check {
- font-family: "Material Icons";
- }
-}
-
-.fa {
- &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
- &.fa-globe::before { content: "public" }
- &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
- &.fa-sign-out::before { content: "exit_to_app" }
- &.fa-search::before { content: "search" }
- &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
- &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
- &.fa-paperclip::before { content: "attach_file" }
- &.fa-tasks::before { content: "poll" }
- &.fa-plus::before { content: "add" }
- &.fa-unlock::before { content: "lock_open" }
- &.fa-lock::before { content: "lock" }
- &.fa-envelope::before { content: "mail" }
- &.fa-home::before { content: "home" }
- &.fa-bullhorn::before { content: "announcement" }
- &.fa-sliders::before { content: "tune" }
- &.fa-chevron-left::before { content: "arrow_back" }
- &.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: "reply" }
- &.fa-reply-all::before { content: "reply_all" }
- &.fa-share-alt::before { content: "share" }
- &.fa-star::before { content: $favorite-icon }
- &.fa-bookmark::before { content: "bookmark" }
- &.fa-ellipsis-h::before { content: "more_horiz" }
- &.fa-bell::before { content: "notifications" }
- &.fa-eraser::before { content: "clear_all" }
- &.fa-users::before { content: "people" }
- &.fa-file-text::before { content: "web" }
- &.fa-user-plus::before { content: "person_add" }
- &.fa-address-book::before { content: "explore" }
- &.fa-address-book-o::before { content: "explore" }
- &.fa-list::before { content: "list" }
- &.fa-list-ul::before { content: "list" }
- &.fa-eye::before { content: "visibility" }
- &.fa-eye-slash::before { content : "visibility_off" }
- &.fa-pencil::before { content: "create" }
- &.fa-trash::before { content: "delete" }
- &.fa-play::before { content: "play_arrow" }
- &.fa-external-link::before { content: "open_in_new" }
- &.fa-retweet::before { content: "repeat" }
- &.fa-link::before { content: "link" }
- &.fa-pause::before { content: "pause" }
- &.fa-volume-up::before { content: "volume_up" }
- &.fa-volume-off::before { content: "volume_off" }
- &.fa-expand::before { content: "web_asset" }
- &.fa-download::before { content: "file_download" }
- &.fa-arrows-alt::before { content: "fullscreen" }
- &.fa-compress::before { content: "fullscreen_exit" }
- &.fa-user-times::before { content: "delete" }
- &.fa-check::before { content: "check" }
-}
-
-// bookmark icon
-.status__action-bar-button.icon-button,
-.bookmark-icon.icon-button {
- .fa.fa-bookmark::before { content: "bookmark_border" }
- &.active .fa.fa-bookmark::before { content: "bookmark" }
-}
-
-// favorite icon
-.status__action-bar-button.star-icon.icon-button,
-.star-icon.icon-button {
- .fa.fa-star::before { content: $favorite-icon-border }
-
- &.active,
- &.active.activate {
- .fa.fa-star::before { content: $favorite-icon }
- }
-}
-
-// boost icon
-.no-reduce-motion button.icon-button i.fa-retweet {
- height: 18px;
- width: 18px;
- transition: background-position .3s steps(1);
- background-image: url('data:image/svg+xml;utf8,');
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/media.scss b/app/javascript/styles/material-v2-dark/media.scss
deleted file mode 100644
index 64a69a129..000000000
--- a/app/javascript/styles/material-v2-dark/media.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.media-gallery { border-radius: $card-radius }
-
-.media-modal__close {
- align-content: center;
-
- &.icon-button {
- background: transparent;
- color: $media-icon-color;
- text-align: center !important;
- font-size: 24px !important;
- width: 48px !important;
- height: 48px !important;
- border: 12px;
-
- &:hover {
- background: $media-icon-background-hover-color;
- color: $media-icon-hover-color;
- }
-
- .fa-fw { width: 24px }
- }
-}
-
-.media-modal {
- &__nav {
- background: $media-icon-background-color;
- color: $media-icon-color;
- height: 48px;
- width: 48px;
- margin: auto 16px;
- padding: 8px;
- border-radius: 50%;
-
- .fa { width: 32px }
- }
-
- &__button {
- background-color: $media-page-indicator-color;
-
- &--active { background-color: $media-page-indicator-active-color }
- }
-}
-
-.video-player {
- &__controls {
- background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
- padding: 0 12px;
- }
-
- &__seek {
- &::before {
- background: rgba(255,255,255,.2);
- border-radius: 0;
- }
-
- &__buffer {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__progress {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__volume {
- &::before {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__current {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__time-current { margin-left: 68px }
-
- &__buttons button { font-size: 20px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/mobile.scss b/app/javascript/styles/material-v2-dark/mobile.scss
deleted file mode 100644
index de6f4e94c..000000000
--- a/app/javascript/styles/material-v2-dark/mobile.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.tabs-bar {
- background: $top-bar-color;
-
- &__link {
- padding: 16px 16px 12px 16px;
- color: $top-bar-icon-color;
- border-bottom: 4px solid transparent;
-
- &.active {
- border-bottom: 4px solid $tab-indicator-active-color;
- color: $tab-indicator-active-color;
- }
-
- .fa { font-size: 20px }
- }
-
- &__wrapper {
- @include shadow-4dp;
- background: transparent;
- }
-}
-
-
-#tabs-bar__portal { overflow-y: hidden }
-
-.floating-action-button {
- @include shadow-6dp;
- background: $floating-action-button-color;
- color: $floating-action-button-icon-color;
- font-size: 24px;
-
- &:hover { background: $floating-action-button-hover-color }
-
- &:active,
- &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
-
- .column { margin: 0 !important }
-
- .search__input { padding: 16px 38px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/modal.scss b/app/javascript/styles/material-v2-dark/modal.scss
deleted file mode 100644
index 7734c8dfa..000000000
--- a/app/javascript/styles/material-v2-dark/modal.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.confirmation-modal {
- background: $card-background-color;
- color: $ui-text-color;
- border-radius: $dialog-radius;
- width: 280px;
-
- &__container {
- text-align: left;
- padding: 24px;
- }
-
- &__action-bar {
- justify-content: flex-end;
- background: $card-background-color;
- padding: 8px;
- }
-}
-
-.actions-modal {
- background: $card-background-color;
- border-radius: $card-radius;
-
- ul li:not(:empty) a {
- color: $ui-text-color;
- font-size: 16px;
-
- &:hover {
- background: $card-background-hover-color;
- color: $ui-text-color;
- }
- }
-
- .dropdown-menu__separator { border-bottom-color: $border-color }
-
- .status {
- background: $card-background-color;
- border-bottom-color: $border-color;
- padding-top: 12px;
- padding-bottom: 12px;
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
- }
-}
-
-.report-modal {
- background: $card-background-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__target {
- padding: 24px;
- text-align: left;
- font-weight: bold;
- }
-
- &__container {
- border-top: none;
- }
-}
-
-.embed-modal .embed-modal__container {
- padding: 0 24px 24px 24px;
-
- .hint {
- margin-bottom: 16px;
- color: $secondary-text-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/plugins/cards.scss b/app/javascript/styles/material-v2-dark/plugins/cards.scss
new file mode 100644
index 000000000..c134cbeeb
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+ box-shadow: none !important;
+ margin: 2px 0 !important;
+ padding: 8px !important;
+
+ > .scrollable { background: $background-color }
+}
+
+.status {
+ border-bottom: 0;
+ border-radius: $card-radius;
+ background: $card-background-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-background-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/material-v2-dark/plugins/dense.scss b/app/javascript/styles/material-v2-dark/plugins/dense.scss
new file mode 100644
index 000000000..42417124b
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/plugins/dense.scss
@@ -0,0 +1,63 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+ &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+ &__buttons { height: 48px }
+
+ &__button {
+ margin: 8px;
+ padding: 10px 8px;
+
+ .fa { vertical-align: text-top }
+ }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 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 }
+}
+
+.status {
+ padding: 8px 8px 8px 66px;
+
+ &__expand { width: 66px }
+
+ &__info { padding-right: 0 }
+
+ &__avatar {
+ left: 8px;
+ top: 10px;
+ }
+
+ &__content { padding-top: 2px }
+}
+
+.detailed-status {
+ padding: 14px;
+
+ &__meta { margin-top: 14px }
+
+ &__action-bar { padding: 10px 0 }
+}
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/plugins/plus.scss b/app/javascript/styles/material-v2-dark/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+ background: #eeeeee;
+ width: 28px !important;
+ height: 28px !important;
+
+ .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { 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/material-v2-dark/statuses.scss b/app/javascript/styles/material-v2-dark/statuses.scss
deleted file mode 100644
index f60c2d859..000000000
--- a/app/javascript/styles/material-v2-dark/statuses.scss
+++ /dev/null
@@ -1,172 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.status {
- padding: 12px 12px 12px 70px;
- border-bottom: 1px solid $border-color;
-
- &__expand { width: 70px }
-
- &__info {
- font-size: 16px;
- padding-right: 4px;
- }
-
- &__relative-time { color: $info-text-color }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
-
- &__content {
- font-size: 16px;
- padding-top: 4px;
- color: $primary-text-color;
-
- a {
- color: $link-text-color;
-
- &.unhandled-link { color: $link-text-color }
- }
-
- .status__content__spoiler-link {
- background: transparent;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
- }
-
- &__spoiler-link {
- border: 0;
- color: $text-button-color;
- }
-
- &__read-more-button {
- font-size: 14px;
- color: $text-button-color;
- border-radius: $button-radius;
- padding: 4px 6px;
-
- &:hover {
- background: $text-button-hover-color;
- text-decoration: none;
- }
-
- &:focus { background: $text-button-focus-color }
- }
- }
-
- &__action-bar {
- &__counter__label {
- font-size: 14px;
- color: $info-text-color;
- }
- }
-
- &__prepend { color: $secondary-text-color }
-
- &.status-direct:not(.read) {
- background: transparent;
- border-bottom-color: $border-color;
- }
-}
-
-.status-card {
- color: $icon-color;
- border-color: $border-color;
- outline: none;
-
- &__image {
- background: transparent;
-
- &>.fa {
- font-size: 26px;
- }
- }
-
- &__title {
- color: $primary-text-color;
- margin-bottom: 6px;
- }
-
- &__description { color: $secondary-text-color }
-
- &__actions {
- &>div {
- background: $media-icon-background-color;
- border-radius: $button-radius;
- }
-
- button,
- a {
- color: $media-icon-color;
- font-size: 20px;
- }
-
- a { bottom: auto }
- }
-
- &.compact {
- border-color: $border-color;
- outline: none;
- background: transparent;
-
- .status-card {
- &__content { padding: 12px }
- &__image { flex: 0 0 64px }
- }
-
- &:hover { background-color: transparent !important }
- }
-
- &:hover { background-color: $card-background-color }
-}
-
-// Detailed status in mobile
-.status.light {
- .status {
- &__display-name { color: $primary-text-color }
- &__relative-time { color: $info-text-color }
- &__content { color: $primary-text-color }
- }
-
- .display-name { color: $secondary-text-color }
- .display-name strong { color: $primary-text-color }
-}
-
-.detailed-status {
- background: $card-background-color;
- padding: 16px;
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__meta {
- margin-top: 16px;
- color: $info-text-color;
- }
-
- &__action-bar {
- background: $card-background-color;
- border-top: none;
- border-bottom: 1px solid $border-color;
- padding: 12px 0;
- }
-
- &__button {
- .icon-button { font-size: 20px !important }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/_functions.scss b/app/javascript/styles/material-v2-dark/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@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/material-v2-dark/_mixins.scss b/app/javascript/styles/material-v2-dark/theme/_mixins.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/_mixins.scss
rename to app/javascript/styles/material-v2-dark/theme/_mixins.scss
diff --git a/app/javascript/styles/material-v2-dark/theme/account.scss b/app/javascript/styles/material-v2-dark/theme/account.scss
new file mode 100644
index 000000000..44d68d1e9
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/account.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+ border-bottom: 1px solid $border-color;
+
+ .account__display-name { color: $primary-text-color }
+ .account__display-name strong { color: $secondary-text-color }
+
+ &__avatar {
+ border-radius: $avater-radius;
+ width: 40px;
+ height: 40px;
+
+ &-overlay {
+ &-base {
+ border-radius: 50%;
+ width: 44px;
+ height: 44px;
+ background-size: 44px;
+ }
+
+ &-overlay { border-radius: $avater-radius }
+ }
+ }
+
+ &__header {
+ &__bar {
+ background: $card-background-color;
+ padding: 8px;
+ border-bottom: 1px solid $border-color;
+
+ .avatar .account__avatar { border: none }
+ }
+
+ &__tabs {
+ padding: 8px;
+
+ &__name {
+ padding: 8px;
+
+ h1 {
+ color: $primary-text-color;
+
+ small { color: $secondary-text-color }
+ }
+ }
+
+ &__buttons {
+ .icon-button {
+ border: none;
+ border-radius: 50%;
+ padding: 0;
+ }
+ }
+ }
+
+ &__extra {
+ margin-top: 0;
+
+ &__links {
+ color: $secondary-text-color;
+ padding: 10px 0;
+
+ a {
+ color: $secondary-text-color;
+ padding: 4px 12px;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+
+ &__bio {
+ margin: 0;
+
+ .account__header {
+ &__content {
+ color: $primary-text-color;
+ padding: 8px;
+ }
+
+ &__fields {
+ border: 1px solid $border-color;
+ border-radius: 4px;
+
+ .verified {
+ border: none;
+ background: $verified-background-color;
+
+ a,
+ &__mark { color: $primary-text-color }
+ }
+
+ dl {
+ border-bottom: 1px solid $border-color;
+
+ &:first-child .verified { border-radius: 0 }
+
+ &:last-child { border-bottom: 0 }
+ }
+
+ dt {
+ color: $primary-text-color;
+ background: $list-background-inactive-color;
+ }
+
+ dd { color: $primary-text-color }
+ }
+ }
+ }
+ }
+
+ &__section-headline {
+ background: $text-tab-background-color;
+ border-bottom: 1px solid $border-color;
+
+ a {
+ padding: 16px 0;
+ color: $text-tab-indicator-color;
+
+ &.active {
+ color: $text-tab-indicator-active-color;
+ border-bottom: 4px solid $text-tab-indicator-active-color;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $text-tab-indicator-background-focus-color }
+ }
+
+ &:hover { background: $text-tab-indicator-background-hover-color }
+ }
+ }
+}
+
+.account-role {
+ padding: 4px 8px;
+ border-radius: 17px;
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/base_config.scss b/app/javascript/styles/material-v2-dark/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../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__input:hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+}*/
+
+
+// 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
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/basics.scss b/app/javascript/styles/material-v2-dark/theme/basics.scss
new file mode 100644
index 000000000..4c122d1c6
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+body { background: $background-color }
+
+// Chrome & Safari scroll bar
+::-webkit-scrollbar-thumb {
+ background: $scroll-bar-thumb-color;
+
+ &:hover { background: $scroll-bar-thumb-hover-color }
+ &:active { background: $scroll-bar-thumb-active-color }
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track:hover,
+::-webkit-scrollbar-track:active {
+ background: transparent !important;
+}
+
+// Firefox scroll bar
+html {
+ scrollbar-color: $scroll-bar-thumb-color transparent;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/button.scss b/app/javascript/styles/material-v2-dark/theme/button.scss
new file mode 100644
index 000000000..1231bac98
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+
+ &.active {
+ color: $icon-button-active-color;
+
+ &:hover { color: $icon-button-active-hover-color }
+ }
+
+ &.disabled { color: $disabled-icon-color }
+
+ &.inverted {
+ color: $icon-button-color;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-background-hover-color;
+ }
+ }
+
+ &.overlayed {
+ border-radius: 50%;
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+
+ &:hover {
+ background: $media-icon-background-color;
+ color: $media-icon-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-background-hover-color;
+ }
+
+ &:active,
+ &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+ font-size: 12px;
+
+ &:hover {
+ background-color: $icon-background-hover-color;
+ color: $icon-button-hover-color;
+ }
+}
+
+.button,
+.button:active,
+.button:focus {
+ background-color: $contained-button-color;
+ border-radius: $button-radius;
+}
+
+.button:hover {
+ @include shadow-2dp;
+ background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+ background: $contained-button-color;
+ margin: 2px;
+
+ &:hover { background: $contained-button-hover-color }
+
+ .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.confirmation-modal__cancel-button {
+ box-shadow: none;
+ background-color: transparent;
+ margin: 0 8px;
+ color: $text-button-color;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
+}
+
+.spoiler-button__overlay__label {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/columns.scss b/app/javascript/styles/material-v2-dark/theme/columns.scss
new file mode 100644
index 000000000..a6892adf2
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/columns.scss
@@ -0,0 +1,502 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 10px 8px;
+ border-radius: $card-radius;
+
+ &>.scrollable { background: $list-background-color }
+
+ &:last-child { box-shadow: none }
+}
+
+.column-header {
+ background: $top-bar-color;
+ border-radius: $bar-radius;
+
+ > button {
+ padding: 16px 0 16px 16px;
+ color: $top-bar-text-color;
+ }
+
+ &>.column-header__back-button { color: $top-bar-icon-color }
+
+ &.active {
+ .column-header__icon {
+ color: $top-bar-unread-icon-color;
+ text-shadow: none;
+ }
+ }
+
+ &__icon {
+ margin-right: 16px;
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ }
+
+ &__buttons { height: 56px }
+
+ &__button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ margin: 8px 10px;
+ padding: 10px 12px;
+ border-radius: 50%;
+
+ &.active {
+ color: $top-bar-icon-active-color;
+ background: $icon-background-active-color;
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &__setting-btn {
+ color: $icon-button-color;
+ padding: 8px 0;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ text-decoration: none;
+ }
+
+ .fa { font-size: 20px }
+
+ span { vertical-align: middle }
+ }
+
+ &__setting-arrows {
+ font-size: 16px;
+ border-bottom: 8px;
+
+ .column-header__setting-btn {
+ padding: 8px;
+ border-radius: 50%;
+
+ &:last-child { padding-right: 8px }
+ }
+ }
+
+ &__wrapper {
+ @include shadow-4dp;
+ border-radius: $bar-radius;
+
+ .announcements { border-top: 1px solid $border-color }
+
+ &.active {
+ @include shadow-4dp;
+
+ &::before { background: transparent }
+ }
+ }
+
+ &__collapsible {
+ color: $ui-text-color;
+ background: $card-background-color;
+ border-top: 1px solid $border-color;
+
+ &-inner {
+ background: $card-background-color;
+ padding: 16px;
+ }
+
+ &.collapsed { border-top: none }
+ }
+
+ &__back-button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 8px;
+ margin: auto 0;
+ border-radius: 50%;
+
+ span { display: none }
+ }
+}
+
+.column-subheading {
+ color: $section-text-color;
+ background: $background-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+}
+
+.column-link {
+ color: $ui-text-color;
+ background: $background-color;
+ padding: 16px;
+ border-radius: $nav-drawer-item-radius;
+
+ &:hover { background: $list-background-hover-color }
+
+ &:active,
+ &:focus { background: $list-background-active-color }
+
+ &__icon {
+ margin-right: 32px;
+ font-size: 20px;
+ }
+
+ &--transparent {
+ &.active {
+ color: $ui-text-color;
+ background: $menu-background-active-color;
+
+ &:hover { background: $menu-background-active-hover-color }
+
+ .fa { color: $icon-color }
+ }
+
+ &:hover {
+ color: $ui-text-color;
+
+ .fa { color: $icon-color }
+ }
+ }
+
+ .fa { color: $icon-color }
+}
+
+.column-settings {
+ &__section {
+ color: $section-text-color;
+ margin-bottom: 0;
+ margin-top: 8px;
+ }
+
+ &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 16px;
+
+ span { visibility: hidden } // hide "back" string
+}
+
+.column-inline-form {
+ padding: 16px 0 16px 16px;
+ background: $card-background-color;
+
+ .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+ color: $primary-text-color;
+ background: $search-bar-color;
+ border-radius: $bar-radius;
+
+ &::placeholder { color: $tips-text-color }
+
+ &:focus {
+ @include shadow-1dp;
+ background: $search-bar-focus-color;
+ }
+}
+
+.empty-column-indicator {
+ color: $secondary-text-color;
+ background: $card-background-color;
+ font-size: 16px;
+}
+
+.conversation {
+ border-bottom: 1px solid $border-color;
+ padding: 12px;
+ background: $list-background-inactive-color;
+
+ &--unread {
+ background: $list-background-color;
+
+ .conversation__content__relative-time { color: $info-text-color }
+ }
+
+ &__unread { background: $primary-color }
+
+ &__avatar { padding: 0 16px 0 0 }
+
+ &__content {
+ padding: 0;
+
+ &__relative-time {
+ font-size: 14px;
+ color: $info-text-color;
+ }
+
+ &__names,
+ &__names a {
+ color: $primary-text-color;
+ font-size: 16px;
+ }
+ }
+}
+
+// read status in notification column
+.muted {
+ .status {
+ &__content {
+ color: $read-primary-text-color;
+
+ p { color: $read-primary-text-color }
+
+ a { color: $read-secondary-text-color }
+ }
+
+ &__display-name strong { color: $read-primary-text-color }
+ }
+
+ .poll {
+ color: $read-primary-text-color;
+
+ &__chart {
+ background: $read-poll-bar-color;
+
+ &.leading { background: $read-poll-bar-leading-color }
+ }
+
+ &__footer,
+ &__link { color: $read-ui-text-color }
+ }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+ color: $icon-color;
+ padding: 16px;
+
+ &:hover { background: $menu-background-hover-color }
+}
+
+.getting-started {
+ background: $background-color;
+ color: $ui-text-color;
+
+ &__wrapper {
+ background: $background-color;
+ height: auto !important;
+ border-bottom: 1px solid $border-color;
+ }
+
+ &__footer {
+ padding: 16px;
+
+ p {
+ color: $secondary-text-color;
+ font-size: 12px;
+ margin-bottom: 16px;
+ }
+
+ a { color: $ui-text-color }
+
+ p a { color: $link-text-color }
+ }
+
+ &__trends {
+ background: $background-color;
+ margin-bottom: 0;
+
+ h4 {
+ color: $section-text-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+ border-bottom: none;
+ }
+ }
+}
+
+.trends {
+ &__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-background-color;
+ padding: 0;
+
+ &__container { color: $primary-text-color }
+
+ &__item {
+ padding: 16px;
+ font-size: 16px;
+
+ &__unread { background: $badge-color }
+ }
+
+ &__pagination { color: $ui-text-color }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.reactions-bar {
+ .emoji-button {
+ color: $icon-button-color;
+ font-size: 20px;
+
+ &:hover { color: $icon-button-hover-color }
+
+ &:active { color: $icon-button-active-color }
+ }
+
+ &__item {
+ background: $contained-chip-color;
+ border-radius: 17px;
+ margin: 2px 4px;
+
+ &.active {
+ background-color: $contained-chip-selected-color;
+ .reactions-bar__item__count { color: $ui-text-color }
+ }
+
+ &__emoji {
+ width: 24px;
+ height: 24px;
+ margin: 4px 0 4px 2px;
+ }
+
+ &__count {
+ font-size: 16px;
+ margin: 0 8px;
+ color: $secondary-text-color;
+ }
+
+ &:hover { background: $contained-chip-hover-color }
+ }
+}
+
+.notification {
+ &__filter-bar {
+ background: $tab-background-color;
+ border-bottom: 1px solid $border-color;
+ z-index: 1;
+
+ button {
+ background: $tab-background-color;
+ color: $tab-indicator-color;
+ font-size: 16px;
+
+ span { font-size: 14px }
+
+ &.active {
+ color: $tab-indicator-active-color;
+ border-bottom: 4px solid $tab-indicator-active-color;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $tab-indicator-background-focus-color }
+ }
+
+ &:hover { background: $tab-indicator-background-hover-color }
+ }
+ }
+
+ &__message {
+ color: $secondary-text-color;
+ margin: 0 16px 0 70px;
+ font-size: 16px;
+ }
+
+ &__display-name:hover { color: inherit }
+}
+
+.notification-favourite .status.status-direct {
+ .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+ font-size: 12px;
+ border-radius: 17px;
+ padding: 4px 8px;
+ opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
+
+.focusable {
+ &:focus { background: $card-background-color }
+}
+
+// single column mode
+@media screen and (min-width: 415px) {
+ .tabs-bar {
+ margin-bottom: 0;
+
+ &__wrapper { padding-top: 0 }
+ }
+
+ .columns-area__panels__main {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 12px 12px 0;
+ }
+}
+
+@media screen and (min-width: 631px) {
+ .tabs-bar__link {
+ &:hover {
+ background: $tab-indicator-background-hover-color;
+ border-bottom-color: $tab-background-color;
+ }
+
+ &:active,
+ &:focus {
+ background: $tab-indicator-background-focus-color;
+ border-bottom-color: $tab-background-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/components.scss b/app/javascript/styles/material-v2-dark/theme/components.scss
new file mode 100644
index 000000000..4f844229c
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/components.scss
@@ -0,0 +1,394 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.drawer {
+ &__header {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ border-radius: $nav-bar-radius;
+ justify-content: space-around;
+
+ a { transition: none }
+
+ a:hover {
+ background: $icon-background-hover-color;
+ border-radius: 50%;
+ }
+ }
+
+ &__tab {
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ margin: 10px auto 10px;
+ padding: 8px;
+ flex: none;
+ height: 20px;
+ width: 20px;
+ border-bottom: none;
+ text-align: justify;
+
+ &:hover { color: $top-bar-icon-hover-color }
+ }
+
+ &__pager {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ }
+
+ &__inner {
+ background: $card-background-color;
+
+ &.darker {
+ background: $card-background-color;
+ position: inherit;
+ }
+
+ &__mastodon { background: $card-background-color }
+ }
+}
+
+.search {
+ &__input {
+ background: $search-bar-color;
+ color: $tips-text-color;
+ border-radius: $search-bar-radius;
+ padding: 12px 12px 12px 40px;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ color: $search-bar-text-color;
+ }
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__icon {
+ .fa {
+ color: $icon-color;
+ font-size: 20px;
+ top: 12px;
+ right: unset;
+ left: 12px;
+ height: 6px;
+ transition: none;
+
+ &.active { opacity: 1 }
+
+ &-search {
+ transform: none;
+ opacity: 1;
+ }
+ &-times-circle.active {
+ right: 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-background-color;
+ padding: 16px;
+
+ .fa { margin-right: 8px }
+ }
+
+ &__section {
+ h5 {
+ background: $card-background-color;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
+ color: $section-text-color;
+
+ .fa { margin-right: 8px }
+ }
+ }
+}
+
+.navigation-bar {
+ color: $secondary-text-color;
+ padding: 14px;
+
+ strong {
+ color: $ui-text-color;
+ }
+}
+
+.navigation-panel hr {
+ border-top: 1px solid $border-color;
+ margin: 8px 0;
+}
+
+.dropdown-menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ padding: 8px 0;
+ border-radius: $menu-radius;
+
+ &__arrow { visibility: hidden }
+
+ &__item a {
+ font-size: 14px;
+ padding: 8px 16px;
+ background: $menu-background-color;
+ color: $menu-text-color;
+
+ &:hover, &:active {
+ background: $menu-background-hover-color;
+ color: $menu-text-color;
+ }
+ }
+
+ &__separator {
+ margin: 8px 0;
+ border-bottom: 1px solid $border-color;
+ }
+}
+
+.compose-form {
+ .autosuggest-textarea {
+ &__textarea {
+ background: $card-background-color;
+ color: $ui-text-color;
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__suggestions {
+ @include shadow-1dp;
+ background: $menu-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+ font-size: 16px;
+ padding: 8px 0;
+
+ &__item {
+ padding: 8px;
+ border-radius: 0;
+
+ &:hover { background: $menu-background-hover-color }
+
+ &.selected,
+ &:focus,
+ &:active { background: $menu-background-active-color }
+ }
+ }
+ }
+
+ .spoiler-input__input {
+ color: $ui-text-color;
+ background: $card-background-color;
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ .compose-form {
+ &__warning {
+ @include shadow-1dp;
+ color: $secondary-text-color;
+ background: $card-background-color;
+ padding: 16px;
+
+ a { color: $link-text-color }
+ }
+
+ &__modifiers {
+ background: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__buttons-wrapper {
+ background: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__poll-wrapper {
+ border-top: 1px solid $border-color;
+
+ ul { padding: 12px }
+
+ select {
+ color: $ui-text-color;
+ background-color: $background-color;
+ border: 0;
+
+ &:focus { border-color: $border-active-color }
+ }
+
+ .button.button-secondary {
+ box-shadow: none;
+ color: $outlined-button-color;
+ border-color: $outlined-button-color;
+
+ &:hover { background-color: $outlined-button-hover-color }
+
+ &:active { background-color: $outlined-button-active-color }
+
+ &:focus { background-color: $outlined-button-color }
+
+
+ }
+ }
+
+ &__utilBtns { padding-top: 0 }
+
+ &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+ }
+}
+
+.no-reduce-motion .spoiler-input {
+ transition-duration: .2s, .2s;
+}
+
+
+.poll {
+ &__input {
+ border: 2px solid $control-border-color;
+ width: 20px;
+ height: 20px;
+ flex: 0 0 20px;
+ }
+
+ &__text input[type=text] {
+ color: $ui-text-color;
+ background: $background-color;
+ border: 1px solid $border-color;
+ padding: 8px 12px;
+
+ &:focus { border-color: $border-active-color }
+ }
+
+ &__chart {
+ border-radius: 0;
+ background: $poll-bar-color;
+
+ &.leading { background: $poll-bar-leading-color }
+ }
+
+ &__footer {
+ padding-top: 8px;
+ padding-bottom: 0;
+ color: $ui-text-color;
+ }
+
+ &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+ &.active .privacy-dropdown__value.active {
+ background: $icon-background-hover-color;
+ border-radius: 50%;
+ box-shadow: none;
+
+ .icon-button { color: $icon-button-active-color }
+ }
+
+ &__dropdown {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $dialog-radius;
+ }
+
+ &__option {
+ color: $icon-color;
+ padding: 8px 16px;
+
+ &__icon {
+ font-size: 20px;
+ margin-right: 12px;
+ }
+
+ &__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+
+ &.active {
+ background: $menu-background-active-color;
+ color: $icon-hover-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+
+ &:hover {
+ background: $menu-background-active-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+
+ &:hover {
+ background: $menu-background-hover-color;
+ color: $icon-hover-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+}
+
+.character-counter {
+ color: $secondary-text-color;
+}
+
+.reply-indicator {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ background: $card-background-color;
+ padding: 16px;
+
+ &__header { margin-bottom: 4px }
+
+ &__display {
+ &-name {
+ color: $primary-text-color;
+ padding-right: 24px;
+ }
+
+ &-avatar { margin-right: 8px }
+ }
+
+ &__content { color: $primary-text-color }
+}
+
+.attachment-list {
+ &__list a { color: $secondary-text-color }
+
+ &.compact .fa { color: $icon-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/control.scss b/app/javascript/styles/material-v2-dark/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+ width: 36px;
+ height: 16px;
+ border-radius: 15px;
+
+ &-track {
+ background-color: $toggle-track-color;
+ margin: 4px;
+ width: 36px;
+ height: 16px;
+
+ &-check { visibility: hidden }
+ &-x { visibility: hidden }
+ }
+
+ &-thumb {
+ @include shadow-1dp;
+ width: 20px;
+ height: 20px;
+ border: 0;
+ background-color: $toggle-thumb-color;
+ }
+
+ &--checked {
+ .react-toggle{
+ &-track { background-color: $toggle-track-active-color }
+
+ &-thumb {
+ background-color: $toggle-thumb-active-color;
+ left: 22px;
+ }
+ }
+
+ &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+ }
+
+ &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+ padding: 8px 0;
+
+ &__input {
+ border: 2px solid $border-color;
+
+ &.checked {
+ border-color: $icon-button-active-color;
+ background: $icon-button-active-color;
+ padding: 3px;
+ background-clip: content-box;
+ }
+ }
+}
+
+.compose-form__sensitive-button .checkbox {
+ border: 2px solid $border-color;
+ border-radius: 2px;
+
+ &.active {
+ border-color: $primary-color;
+ background: $primary-color;
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/emoji-picker.scss b/app/javascript/styles/material-v2-dark/theme/emoji-picker.scss
new file mode 100644
index 000000000..70e22752d
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+ &__menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $menu-radius;
+ }
+
+ &__modifiers__menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $menu-radius;
+
+ button {
+ padding: 8px;
+ }
+ }
+}
+
+.emoji-mart {
+ width: 388px !important;
+ font-size: 14px;
+ color: $menu-text-color;
+
+ &-bar {
+ border: 0 solid $border-color;
+
+ &:first-child {
+ background: $menu-background-color;
+ }
+ }
+
+ &-anchors {
+ color: $icon-button-color;
+ padding: 0;
+ }
+
+ &-anchor {
+ padding: 10px 4px;
+
+ &-selected {
+ color: $icon-button-active-color;
+ }
+
+ &-bar {
+ background-color: $tab-indicator-active-color;
+ }
+
+ &:hover {
+ color: $icon-button-hover-color;
+ }
+ }
+
+ &-search {
+ background: $menu-background-color;
+
+ input {
+ outline: none;
+ padding: 8px;
+ background: $search-bar-color;
+ color: $ui-text-color;
+ border: 0;
+ border-radius: $search-bar-radius;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ }
+ }
+ }
+
+ &-scroll {
+ padding: 0 8px 8px;
+ background: $menu-background-color;
+ }
+
+ &-category-label span {
+ padding: 4px 6px;
+ background: $menu-background-color;
+ }
+
+ &-emoji:hover::before {
+ background-color: $icon-background-hover-color;
+ }
+
+ &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/icons.scss b/app/javascript/styles/material-v2-dark/theme/icons.scss
new file mode 100644
index 000000000..1367647ec
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+ &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub } // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle } // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+ font-size: 20px;
+ margin-right: 16px;
+}
+
+.icon-with-badge__badge {
+ background: $badge-color;
+ border: none;
+ padding: 2px 6px;
+ border-radius: 12px;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/material-icons.scss b/app/javascript/styles/material-v2-dark/theme/material-icons.scss
new file mode 100644
index 000000000..51631eab5
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/material-icons.scss
@@ -0,0 +1,156 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.fa {
+ &.fa-bars,
+ &.fa-navicon,
+ &.fa-reorder,
+ &.fa-globe,
+ &.fa-cog,
+ &.fa-cogs,
+ &.fa-gears,
+ &.fa-sign-out,
+ &.fa-search,
+ &.fa-times,
+ &.fa-times-circle,
+ &.fa-close,
+ &.fa-remove,
+ &.fa-chevron-down,
+ &.fa-ellipsis-v,
+ &.fa-paperclip,
+ &.fa-tasks,
+ &.fa-plus,
+ &.fa-unlock,
+ &.fa-lock,
+ &.fa-envelope,
+ &.fa-home,
+ &.fa-bullhorn,
+ &.fa-sliders,
+ &.fa-chevron-left,
+ &.fa-chevron-right,
+ &.fa-reply,
+ &.fa-reply-all,
+ &.fa-share-alt,
+ &.fa-star,
+ &.fa-bookmark,
+ &.fa-ellipsis-h,
+ &.fa-bell,
+ &.fa-eraser,
+ &.fa-users,
+ &.fa-file-text,
+ &.fa-user-plus,
+ &.fa-address-book,
+ &.fa-address-book-o,
+ &.fa-list,
+ &.fa-list-ul,
+ &.fa-eye,
+ &.fa-eye-slash,
+ &.fa-pencil,
+ &.fa-trash,
+ &.fa-play,
+ &.fa-external-link,
+ &.fa-retweet,
+ &.fa-link,
+ &.fa-pause,
+ &.fa-volume-up,
+ &.fa-volume-off,
+ &.fa-expand,
+ &.fa-download,
+ &.fa-arrows-alt,
+ &.fa-compress,
+ &.fa-user-times,
+ &.fa-check,
+ &.fa-quote-right {
+ font-family: "Material Icons";
+ }
+}
+
+.fa {
+ &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
+ &.fa-globe::before { content: "public" }
+ &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
+ &.fa-sign-out::before { content: "exit_to_app" }
+ &.fa-search::before { content: "search" }
+ &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
+ &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
+ &.fa-paperclip::before { content: "attach_file" }
+ &.fa-tasks::before { content: "poll" }
+ &.fa-plus::before { content: "add" }
+ &.fa-unlock::before { content: "lock_open" }
+ &.fa-lock::before { content: "lock" }
+ &.fa-envelope::before { content: "mail" }
+ &.fa-home::before { content: "home" }
+ &.fa-bullhorn::before { content: "announcement" }
+ &.fa-sliders::before { content: "tune" }
+ &.fa-chevron-left::before { content: "arrow_back" }
+ &.fa-chevron-right::before { content: "arrow_forward" }
+ &.fa-reply::before { content: $reply-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-eraser::before { content: "clear_all" }
+ &.fa-users::before { content: "people" }
+ &.fa-file-text::before { content: "web" }
+ &.fa-user-plus::before { content: "person_add" }
+ &.fa-address-book::before { content: "explore" }
+ &.fa-address-book-o::before { content: "explore" }
+ &.fa-list::before { content: "list" }
+ &.fa-list-ul::before { content: "list" }
+ &.fa-eye::before { content: "visibility" }
+ &.fa-eye-slash::before { content : "visibility_off" }
+ &.fa-pencil::before { content: "create" }
+ &.fa-trash::before { content: "delete" }
+ &.fa-play::before { content: "play_arrow" }
+ &.fa-external-link::before { content: "open_in_new" }
+ &.fa-retweet::before { content: "repeat" }
+ &.fa-link::before { content: "link" }
+ &.fa-pause::before { content: "pause" }
+ &.fa-volume-up::before { content: "volume_up" }
+ &.fa-volume-off::before { content: "volume_off" }
+ &.fa-expand::before { content: "web_asset" }
+ &.fa-download::before { content: "file_download" }
+ &.fa-arrows-alt::before { content: "fullscreen" }
+ &.fa-compress::before { content: "fullscreen_exit" }
+ &.fa-user-times::before { content: "delete" }
+ &.fa-check::before { content: "check" }
+ &.fa-quote-right::before { content: "format_quote" }
+}
+
+// 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 { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+ height: 18px;
+ width: 18px;
+ transition: background-position .3s steps(1);
+ background-image: url('data:image/svg+xml;utf8,');
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/media.scss b/app/javascript/styles/material-v2-dark/theme/media.scss
new file mode 100644
index 000000000..28de8db85
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/media.scss
@@ -0,0 +1,101 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery { border-radius: $card-radius }
+
+.media-modal__close {
+ align-content: center;
+
+ &.icon-button {
+ background: transparent;
+ color: $media-icon-color;
+ text-align: center !important;
+ font-size: 24px !important;
+ width: 48px !important;
+ height: 48px !important;
+ border: 12px;
+
+ &:hover {
+ background: $media-icon-background-hover-color;
+ color: $media-icon-hover-color;
+ }
+
+ .fa-fw { width: 24px }
+ }
+}
+
+.media-modal {
+ &__nav {
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+ height: 48px;
+ width: 48px;
+ margin: auto 16px;
+ padding: 8px;
+ border-radius: 50%;
+
+ .fa { width: 32px }
+ }
+
+ &__button {
+ background-color: $media-page-indicator-color;
+
+ &--active { background-color: $media-page-indicator-active-color }
+ }
+}
+
+.video-player {
+ &__controls {
+ background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+ padding: 0 12px;
+ }
+
+ &__seek {
+ &::before {
+ background: rgba(255,255,255,.2);
+ border-radius: 0;
+ }
+
+ &__buffer {
+ background: rgba(255,255,255,.4);
+ border-radius: 0;
+ }
+
+ &__progress {
+ background: $primary-color;
+ border-radius: 0;
+ }
+
+ &__handle {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__volume {
+ &::before {
+ background: rgba(255,255,255,.4);
+ border-radius: 0;
+ }
+
+ &__current {
+ background: $primary-color;
+ border-radius: 0;
+ }
+
+ &__handle {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__time-current { margin-left: 68px }
+
+ &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/mobile.scss b/app/javascript/styles/material-v2-dark/theme/mobile.scss
new file mode 100644
index 000000000..ed6467ebc
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/mobile.scss
@@ -0,0 +1,58 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+ background: $top-bar-color;
+
+ &__link {
+ padding: 16px 16px 12px 16px;
+ color: $top-bar-icon-color;
+ border-bottom: 4px solid transparent;
+
+ &.active {
+ border-bottom: 4px solid $tab-indicator-active-color;
+ color: $tab-indicator-active-color;
+ }
+
+ .fa { font-size: 20px }
+
+ 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;
+
+ &:hover { background: $floating-action-button-hover-color }
+
+ &:active,
+ &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+ .column { margin: 0 !important }
+ .search__input { padding: 16px 46px }
+
+ .search__icon .fa {
+ top: 16px;
+ left: 16px;
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/modal.scss b/app/javascript/styles/material-v2-dark/theme/modal.scss
new file mode 100644
index 000000000..287dcf804
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/modal.scss
@@ -0,0 +1,84 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $dialog-radius;
+ width: 280px;
+
+ &__container {
+ text-align: left;
+ padding: 24px;
+ }
+
+ &__action-bar {
+ justify-content: flex-end;
+ background: $card-background-color;
+ padding: 8px;
+ }
+}
+
+.actions-modal {
+ background: $card-background-color;
+ border-radius: $card-radius;
+
+ ul li:not(:empty) a {
+ color: $ui-text-color;
+ font-size: 16px;
+
+ &:hover {
+ background: $card-background-hover-color;
+ color: $ui-text-color;
+ }
+ }
+
+ .dropdown-menu__separator { border-bottom-color: $border-color }
+
+ .status {
+ background: $card-background-color;
+ border-bottom-color: $border-color;
+ padding-top: 12px;
+ padding-bottom: 12px;
+
+ &__avatar {
+ left: 12px;
+ top: 12px;
+ }
+ }
+}
+
+.report-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__target {
+ padding: 24px;
+ text-align: left;
+ font-weight: bold;
+ }
+
+ &__container {
+ border-top: none;
+ }
+
+ &__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/material-v2-dark/theme/statuses.scss b/app/javascript/styles/material-v2-dark/theme/statuses.scss
new file mode 100644
index 000000000..65b5fcc41
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+ padding: 12px 12px 12px 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 }
+ }
+
+ .status__content__spoiler-link {
+ background: transparent;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
+ }
+
+ &__spoiler-link {
+ border: 0;
+ color: $text-button-color;
+ }
+
+ &__read-more-button {
+ font-size: 14px;
+ color: $text-button-color;
+ border-radius: $button-radius;
+ padding: 4px 6px;
+
+ &:hover {
+ background: $text-button-hover-color;
+ text-decoration: none;
+ }
+
+ &:focus { background: $text-button-focus-color }
+ }
+ }
+
+ &__action-bar {
+ &__counter__label {
+ font-size: 14px;
+ color: $info-text-color;
+ }
+ }
+
+ &__prepend {
+ color: $secondary-text-color;
+ margin-left: 64px;
+
+ .status__display-name strong { color: $secondary-text-color }
+ }
+
+ &.status-direct:not(.read) {
+ background: transparent;
+ border-bottom-color: $border-color;
+ }
+}
+
+.status-card {
+ color: $icon-color;
+ border-color: $border-color;
+ outline: none;
+
+ &__image {
+ background: transparent;
+
+ &>.fa {
+ font-size: 26px;
+ }
+ }
+
+ &__title {
+ color: $primary-text-color;
+ margin-bottom: 6px;
+ }
+
+ &__description { color: $secondary-text-color }
+
+ &__actions {
+ &>div {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ }
+
+ button,
+ a {
+ color: $media-icon-color;
+ font-size: 20px;
+ }
+
+ a { bottom: auto }
+ }
+
+ &.compact {
+ border-color: $border-color;
+ outline: none;
+ background: transparent;
+
+ .status-card {
+ &__content { padding: 12px }
+ &__image { flex: 0 0 64px }
+ }
+
+ &:hover { background-color: transparent !important }
+ }
+
+ &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+ .status {
+ &__display-name { color: $primary-text-color }
+ &__relative-time { color: $info-text-color }
+ &__content { color: $primary-text-color }
+ }
+
+ .display-name { color: $secondary-text-color }
+ .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+ background: $card-background-color;
+ padding: 16px;
+
+ &__display-name {
+ color: $secondary-text-color;
+
+ strong { color: $primary-text-color }
+ }
+
+ &__meta {
+ margin-top: 16px;
+ color: $info-text-color;
+ }
+
+ &__action-bar {
+ background: $card-background-color;
+ border-top: none;
+ border-bottom: 1px solid $border-color;
+ padding: 12px 0;
+ }
+
+ &__button {
+ .icon-button { font-size: 20px !important }
+ }
+}
+
+// search user trends
+.display-name {
+ &__html { color: $primary-text-color !important }
+ &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/theme.scss b/app/javascript/styles/material-v2-dark/theme/theme.scss
new file mode 100644
index 000000000..5b7daddf6
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/variables.scss b/app/javascript/styles/material-v2-dark/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light.scss b/app/javascript/styles/material-v2-light.scss
index 3c7ccb250..e8875d39d 100644
--- a/app/javascript/styles/material-v2-light.scss
+++ b/app/javascript/styles/material-v2-light.scss
@@ -1,18 +1,3 @@
@charset "UTF-8";
-@import 'application';
-@import 'material-v2-light/account';
-@import 'material-v2-light/basics';
-@import 'material-v2-light/button';
-//@import 'material-v2-light/cards';
-@import 'material-v2-light/columns';
-@import 'material-v2-light/components';
-@import 'material-v2-light/config';
-@import 'material-v2-light/control';
-@import 'material-v2-light/emoji-picker';
-@import 'material-v2-light/icons';
-@import 'material-v2-light/material-icons';
-@import 'material-v2-light/media';
-@import 'material-v2-light/mobile';
-@import 'material-v2-light/modal';
-@import 'material-v2-light/statuses';
\ No newline at end of file
+@import 'material-v2-light/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/_functions.scss b/app/javascript/styles/material-v2-light/_functions.scss
deleted file mode 100644
index 54750d029..000000000
--- a/app/javascript/styles/material-v2-light/_functions.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-
-
-@function to-string($value) {
- @return inspect($value);
-}
-
-// convert hex color code to svg styled color code
-@function svg-color ($color) {
- @return '%23' + string.slice(to-string($color), 2, 7);
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/account.scss b/app/javascript/styles/material-v2-light/account.scss
deleted file mode 100644
index b43194729..000000000
--- a/app/javascript/styles/material-v2-light/account.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-.account {
- border-bottom: 1px solid $border-color;
-
- .account__display-name { color: $primary-text-color }
- .account__display-name strong { color: $secondary-text-color }
-
- &__avatar {
- border-radius: $avater-radius;
- width: 40px;
- height: 40px;
-
- &-overlay {
- &-base {
- border-radius: 50%;
- width: 44px;
- height: 44px;
- background-size: 44px;
- }
-
- &-overlay { border-radius: $avater-radius }
- }
- }
-
- &__header {
- &__bar {
- background: $card-background-color;
- padding: 8px;
- border-bottom: 1px solid $border-color;
-
- .avatar .account__avatar { border: none }
- }
-
- &__tabs {
- padding: 8px;
-
- &__name {
- padding: 8px;
-
- h1 {
- color: $primary-text-color;
-
- small { color: $secondary-text-color }
- }
- }
-
- &__buttons {
- .icon-button {
- border: none;
- border-radius: 50%;
- padding: 0;
- }
- }
- }
-
- &__extra {
- margin-top: 0;
-
- &__links {
- color: $secondary-text-color;
- padding: 10px 0;
-
- a {
- color: $secondary-text-color;
- padding: 4px 12px;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &__bio {
- margin: 0;
-
- .account__header {
- &__content {
- color: $primary-text-color;
- padding: 8px;
- }
-
- &__fields {
- border: 1px solid $border-color;
- border-radius: 4px;
-
- .verified {
- border: none;
- background: $verified-background-color;
-
- a,
- &__mark { color: $primary-text-color }
- }
-
- dl {
- border-bottom: 1px solid $border-color;
-
- &:first-child .verified { border-radius: 0 }
-
- &:last-child { border-bottom: 0 }
- }
-
- dt {
- color: $primary-text-color;
- background: $list-background-inactive-color;
- }
-
- dd { color: $primary-text-color }
- }
- }
- }
- }
-
- &__section-headline {
- background: $text-tab-background-color;
- border-bottom: 1px solid $border-color;
-
- a {
- padding: 16px 0;
- color: $text-tab-indicator-color;
-
- &.active {
- color: $text-tab-indicator-active-color;
- border-bottom: 4px solid $text-tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $text-tab-indicator-background-focus-color }
- }
-
- &:hover { background: $text-tab-indicator-background-hover-color }
- }
- }
-}
-
-.account-role {
- padding: 4px 8px;
- border-radius: 17px;
- color: $ui-text-color;
- background-color: $contained-chip-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/basics.scss b/app/javascript/styles/material-v2-light/basics.scss
deleted file mode 100644
index 5c7c3dc04..000000000
--- a/app/javascript/styles/material-v2-light/basics.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-
-
-body { background: $background-color }
-
-// Chrome & Safari scroll bar
-::-webkit-scrollbar-thumb {
- background: $scroll-bar-thumb-color;
-
- &:hover { background: $scroll-bar-thumb-hover-color }
- &:active { background: $scroll-bar-thumb-active-color }
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
- background: transparent !important;
-}
-
-// Firefox scroll bar
-html {
- scrollbar-color: $scroll-bar-thumb-color transparent;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/button.scss b/app/javascript/styles/material-v2-light/button.scss
deleted file mode 100644
index 38fd1a3c1..000000000
--- a/app/javascript/styles/material-v2-light/button.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-.icon-button {
- color: $icon-button-color;
- border-radius: 50%;
-
- &.active {
- color: $icon-button-active-color;
-
- &:hover { color: $icon-button-active-hover-color }
- }
-
- &.disabled { color: $disabled-icon-color }
-
- &.inverted {
- color: $icon-button-color;
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
- }
- }
-
- &.overlayed {
- border-radius: 50%;
- background: $media-icon-background-color;
- color: $media-icon-color;
-
- &:hover {
- background: $media-icon-background-color;
- color: $media-icon-hover-color;
- }
- }
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
- }
-
- &:active,
- &:focus { background-color: transparent }
-}
-
-.text-icon-button {
- color: $icon-button-color;
- border-radius: 50%;
- font-size: 12px;
-
- &:hover {
- background-color: $icon-background-hover-color;
- color: $icon-button-hover-color;
- }
-}
-
-.button,
-.button:active,
-.button:focus {
- background-color: $contained-button-color;
- border-radius: $button-radius;
-}
-
-.button:hover {
- @include shadow-2dp;
- background-color: $contained-button-hover-color;
-}
-
-.button.logo-button {
- background: $contained-button-color;
- margin: 2px;
-
- &:hover { background: $contained-button-hover-color }
-
- .button--destructive:hover { background: $contained-button-hover-color }
-}
-
-.button.button--block { margin: 8px 0 }
-
-.button.confirmation-modal__cancel-button {
- box-shadow: none;
- background-color: transparent;
- margin: 0 8px;
- color: $text-button-color;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
-}
-
-.spoiler-button__overlay__label {
- background: $media-icon-background-color;
- border-radius: $button-radius;
- color: $media-icon-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/cards.scss b/app/javascript/styles/material-v2-light/cards.scss
deleted file mode 100644
index 96988f2c9..000000000
--- a/app/javascript/styles/material-v2-light/cards.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.column {
- box-shadow: none !important;
- margin: 2px 0 !important;
- padding: 8px !important;
-}
-
-.status {
- border-bottom: 0 !important;
- border-radius: $card-radius;
-}
-
-.account { border-bottom: 0 !important }
-
-.status__wrapper.status__wrapper,
-.notification.notification {
- @include shadow-1dp;
- margin: 8px 2px;
-}
-
-.notification .status__wrapper.status__wrapper { box-shadow: none !important }
-
-.notification__filter-bar {
- @include non-overflow-shadow-4dp;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/mastodon-dark.scss b/app/javascript/styles/material-v2-light/color/mastodon-dark.scss
new file mode 100644
index 000000000..de22c451b
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/mastodon-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9baec8;
+$ui-text-color: #fff;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #606984;
+$tips-text-color: #6d7889;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4ea2df;
+$menu-text-color: #282c37;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #313543;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-color, 18%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #fff;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.7);
+$text-button-focus-color: transparentize($text-button-color, 0.6);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+
+// App bar color
+$top-bar-color: #313543;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: #d9e1e8;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/mastodon-light.scss b/app/javascript/styles/material-v2-light/color/mastodon-light.scss
new file mode 100644
index 000000000..134b18e10
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/mastodon-light.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #217aba;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: darken($background-color, 4%);
+$icon-background-active-color: darken($background-color, 8%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: lighten($text-button-color, 36%);
+$text-button-focus-color: lighten($text-button-color, 30%);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: #ccd7e0;
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #ffffff;
+$search-bar-color: #d9e1e8;
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/plus-classic.scss b/app/javascript/styles/material-v2-light/color/plus-classic.scss
new file mode 100644
index 000000000..3e817cde4
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/plus-classic.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/v1-dark.scss b/app/javascript/styles/material-v2-light/color/v1-dark.scss
new file mode 100644
index 000000000..652ffe37e
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/v1-dark.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($background-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-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/v1-light.scss b/app/javascript/styles/material-v2-light/color/v1-light.scss
new file mode 100644
index 000000000..4000eead0
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/v1-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/v2-dark.scss b/app/javascript/styles/material-v2-light/color/v2-dark.scss
new file mode 100644
index 000000000..c990d6b1e
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/v2-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #272727;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/v2-light.scss b/app/javascript/styles/material-v2-light/color/v2-light.scss
index 74115f87c..6fd1dea9e 100644
--- a/app/javascript/styles/material-v2-light/color/v2-light.scss
+++ b/app/javascript/styles/material-v2-light/color/v2-light.scss
@@ -57,6 +57,7 @@ $disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
diff --git a/app/javascript/styles/material-v2-light/columns.scss b/app/javascript/styles/material-v2-light/columns.scss
deleted file mode 100644
index 689028581..000000000
--- a/app/javascript/styles/material-v2-light/columns.scss
+++ /dev/null
@@ -1,461 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-.column {
- @include shadow-1dp;
- padding: 0;
- margin: 10px 8px;
- border-radius: $card-radius;
-
- &>.scrollable { background: $list-background-color }
-
- &:last-child { box-shadow: none }
-}
-
-.column-header {
- background: $top-bar-color;
- border-radius: $bar-radius;
-
- > button {
- padding: 16px 0 16px 16px;
- color: $top-bar-text-color;
- }
-
- &>.column-header__back-button { color: $top-bar-icon-color }
-
- &.active {
- .column-header__icon {
- color: $secondary-color;
- text-shadow: none;
- }
- }
-
- &__icon {
- margin-right: 16px;
- color: $top-bar-icon-color;
- font-size: 20px;
- }
-
- &__buttons { height: 56px }
-
- &__button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- margin: 8px 10px;
- padding: 10px 12px;
- border-radius: 50%;
-
- &.active {
- color: $top-bar-icon-active-color;
- background: $icon-background-active-color;
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
- }
- }
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
- }
- }
-
- &__setting-btn {
- color: $icon-button-color;
- padding: 8px 0;
-
- &:hover {
- color: $icon-button-hover-color;
- text-decoration: none;
- }
-
- .fa { font-size: 20px }
-
- span { vertical-align: middle }
- }
-
- &__setting-arrows {
- font-size: 16px;
- border-bottom: 8px;
-
- .column-header__setting-btn {
- padding: 8px;
- border-radius: 50%;
-
- &:last-child { padding-right: 8px }
- }
- }
-
- &__wrapper {
- @include shadow-4dp;
- border-radius: $bar-radius;
-
- .announcements { border-top: 1px solid $border-color }
-
- &.active {
- @include shadow-4dp;
-
- &::before { background: transparent }
- }
- }
-
- &__collapsible {
- color: $ui-text-color;
- background: $card-background-color;
- border-top: 1px solid $border-color;
-
- &-inner {
- background: $card-background-color;
- padding: 16px;
- }
-
- &.collapsed { border-top: none }
- }
-
- &__back-button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 8px;
- margin: auto 0;
- border-radius: 50%;
-
- span { display: none }
- }
-}
-
-.column-subheading {
- color: $section-text-color;
- background: $background-color;
- padding: 12px 16px;
- border-top: 1px solid $border-color;
-}
-
-.column-link {
- color: $ui-text-color;
- background: $background-color;
- padding: 16px;
- border-radius: $nav-drawer-item-radius;
-
- &:hover { background: $list-background-hover-color }
-
- &:active,
- &:focus { background: $list-background-active-color }
-
- &__icon {
- margin-right: 32px;
- font-size: 20px;
- }
-
- &--transparent {
- &.active {
- color: $ui-text-color;
- background: $menu-background-active-color;
-
- &:hover { background: $menu-background-active-hover-color }
-
- .fa { color: $icon-color }
- }
-
- &:hover {
- color: $ui-text-color;
-
- .fa { color: $icon-color }
- }
- }
-
- .fa { color: $icon-color }
-}
-
-.column-settings {
- &__section {
- color: $section-text-color;
- margin-bottom: 0;
- margin-top: 8px;
- }
-
- &__row .text-btn { margin-bottom: 0 }
-}
-
-.column-back-button {
- @include shadow-4dp;
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 16px;
-
- span { visibility: hidden } // hide "back" string
-}
-
-.column-inline-form {
- padding: 16px 0 16px 16px;
- background: $card-background-color;
-
- .icon-button { margin: 0 16px }
-}
-
-.setting-text {
- color: $primary-text-color;
- background: $search-bar-color;
- border-radius: $bar-radius;
-
- &::placeholder { color: $tips-text-color }
-
- &:focus {
- @include shadow-1dp;
- background: $search-bar-focus-color;
- }
-}
-
-.empty-column-indicator {
- color: $secondary-text-color;
- background: $card-background-color;
- font-size: 16px;
-}
-
-.conversation {
- border-bottom: 1px solid $border-color;
- padding: 12px;
- background: $list-background-inactive-color;
-
- &--unread {
- background: $list-background-color;
-
- .conversation__content__relative-time { color: $info-text-color }
- }
-
- &__unread { background: $primary-color }
-
- &__avatar { padding: 0 16px 0 0 }
-
- &__content {
- padding: 0;
-
- &__relative-time {
- font-size: 14px;
- color: $info-text-color;
- }
-
- &__names,
- &__names a {
- color: $primary-text-color;
- font-size: 16px;
- }
- }
-}
-
-// read status in notification column
-.muted {
- .status {
- &__content {
- color: $read-primary-text-color;
-
- p { color: $read-primary-text-color }
-
- a { color: $read-secondary-text-color }
- }
-
- &__display-name strong { color: $read-primary-text-color }
- }
-
- .poll {
- color: $read-primary-text-color;
-
- &__chart {
- background: $read-poll-bar-color;
-
- &.leading { background: $read-poll-bar-leading-color }
- }
-
- &__footer,
- &__link { color: $read-ui-text-color }
- }
-}
-
-.load-gap { border-bottom: 1px solid $border-color }
-
-.load-more {
- color: $icon-color;
- padding: 16px;
-
- &:hover { background: $menu-background-hover-color }
-}
-
-.getting-started {
- background: $background-color;
- color: $ui-text-color;
-
- &__wrapper {
- background: $background-color;
- height: auto !important;
- border-bottom: 1px solid $border-color;
- }
-
- &__footer {
- padding: 16px;
-
- p {
- color: $secondary-text-color;
- font-size: 12px;
- margin-bottom: 16px;
- }
-
- a { color: $ui-text-color }
-
- p a { color: $link-text-color }
- }
-
- &__trends {
- background: $background-color;
- margin-bottom: 0;
-
- h4 {
- color: $section-text-color;
- padding: 12px 16px;
- border-top: 1px solid $border-color;
- border-bottom: none;
- }
- }
-}
-
-.trends__item {
- padding: 16px;
- border-bottom: none;
-
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
- }
-
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
- }
-}
-
-.setting-toggle {
- &__label {
- color: $ui-text-color;
- margin: 8px 8px 8px 14px;
- }
-}
-
-.announcements {
- background: $card-background-color;
- padding: 0;
-
- &__container { color: $primary-text-color }
-
- &__item {
- padding: 16px;
- font-size: 16px;
-
- &__unread { background: $badge-color }
- }
-}
-
-.reactions-bar {
- .emoji-button {
- color: $icon-button-color;
- font-size: 20px;
-
- &:hover { color: $icon-button-hover-color }
-
- &:active { color: $icon-button-active-color }
- }
-
- &__item {
- background: $contained-chip-color;
- border-radius: 17px;
- margin: 2px 4px;
-
- &.active {
- background-color: $contained-chip-selected-color;
- .reactions-bar__item__count { color: $ui-text-color }
- }
-
- &__emoji {
- width: 24px;
- height: 24px;
- margin: 4px 0 4px 2px;
- }
-
- &__count {
- font-size: 16px;
- margin: 0 8px;
- color: $secondary-text-color;
- }
-
- &:hover { background: $contained-chip-hover-color }
- }
-}
-
-.notification {
- &__filter-bar {
- background: $tab-background-color;
- border-bottom: 1px solid $border-color;
- z-index: 1;
-
- button {
- background: $tab-background-color;
- color: $tab-indicator-color;
- font-size: 16px;
-
- span { font-size: 14px }
-
- &.active {
- color: $tab-indicator-active-color;
- border-bottom: 4px solid $tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $tab-indicator-background-focus-color }
- }
-
- &:hover { background: $tab-indicator-background-hover-color }
- }
- }
-
- &__message {
- color: $secondary-text-color;
- margin: 0 16px 0 70px;
- font-size: 16px;
- }
-
- &__display-name:hover { color: inherit }
-}
-
-.notification-favourite .status.status-direct {
- background: transparent;
-
- .icon-button.disabled { color: $disabled-icon-color }
-}
-
-// read notification
-.notification.notification-favourite.focusable,
-.notification.notification-follow.focusable { background: $list-background-inactive-color }
-
-.relationship-tag {
- color: $ui-text-color;
- background-color: $contained-chip-color;
- font-size: 12px;
- border-radius: 17px;
- padding: 4px 8px;
- opacity: 1;
-}
-
-.react-swipeable-view-container { height: auto }
-
-.attachment-list__list a { color: $secondary-text-color }
-
-.focusable { background: transparent !important }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/components.scss b/app/javascript/styles/material-v2-light/components.scss
deleted file mode 100644
index 92d2801f4..000000000
--- a/app/javascript/styles/material-v2-light/components.scss
+++ /dev/null
@@ -1,389 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.drawer {
- &__header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- justify-content: space-around;
-
- a { transition: none }
-
- a:hover {
- background: $icon-background-hover-color;
- border-radius: 50%;
- }
- }
-
- &__tab {
- color: $top-bar-icon-color;
- font-size: 20px;
- margin: 10px auto 10px;
- padding: 8px;
- flex: none;
- height: 20px;
- width: 20px;
- border-bottom: none;
- text-align: justify;
-
- &:hover { color: $top-bar-icon-hover-color }
- }
-
- &__pager {
- @include shadow-1dp;
- border-radius: $card-radius;
- }
-
- &__inner {
- background: $card-background-color;
-
- &.darker { background: $card-background-color }
-
- &__mastodon { background: $card-background-color }
- }
-}
-
-.search {
- &__input {
- background: $search-bar-color;
- color: $tips-text-color;
- border-radius: $search-bar-radius;
- padding: 12px 12px 12px 40px;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__icon {
- .fa {
- color: $icon-color;
- font-size: 20px;
- top: 12px;
- right: unset;
- left: 12px;
- height: 6px;
- transition: none;
-
- &.active { opacity: 1 }
-
- &-search {
- transform: none;
- opacity: 1;
- }
- &-times-circle.active {
- right: 10px;
- left: unset;
- transform: none;
- }
- }
- }
-}
-
-.search-popout {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- border-radius: 0px $bar-radius;
- border-top: 1px solid $border-color;
- margin-top: 0;
- color: $tips-text-color;
-
- h4 {
- color: $secondary-text-color;
- }
-
- em {
- color: $search-bar-text-color;
- }
-}
-
-.search-results {
- &__header {
- color: $secondary-text-color;
- background-color: $card-background-color;
- padding: 16px;
-
- .fa { margin-right: 8px }
- }
-
- &__section {
- h5 {
- background: $card-background-color;
- border-bottom: 1px solid $border-color;
- padding: 16px;
- color: $section-text-color;
-
- .fa { margin-right: 8px }
- }
- }
-}
-
-.navigation-bar {
- color: $secondary-text-color;
- padding: 14px;
-
- strong {
- color: $ui-text-color;
- }
-}
-
-.navigation-panel hr {
- border-top: 1px solid $border-color;
- margin: 8px 0;
-}
-
-.dropdown-menu {
- @include shadow-8dp;
- background: $menu-background-color;
- padding: 8px 0;
- border-radius: $menu-radius;
-
- &__arrow { visibility: hidden }
-
- &__item a {
- font-size: 14px;
- padding: 8px 16px;
- background: $menu-background-color;
- color: $menu-text-color;
-
- &:hover, &:active {
- background: $menu-background-hover-color;
- color: $menu-text-color;
- }
- }
-
- &__separator {
- margin: 8px 0;
- border-bottom: 1px solid $border-color;
- }
-}
-
-.compose-form {
- .autosuggest-textarea {
- &__textarea {
- background: $card-background-color;
- color: $ui-text-color;
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__suggestions {
- @include shadow-1dp;
- background: $menu-background-color;
- color: $ui-text-color;
- border-radius: $card-radius;
- font-size: 16px;
- padding: 8px 0;
-
- &__item {
- padding: 8px;
- border-radius: 0;
-
- &:hover { background: $menu-background-hover-color }
-
- &.selected,
- &:focus,
- &:active { background: $menu-background-active-color }
- }
- }
- }
-
- .spoiler-input__input {
- color: $ui-text-color;
- background: $card-background-color;
-
- &::placeholder { color: $tips-text-color }
- }
-
- .compose-form {
- &__warning {
- @include shadow-1dp;
- color: $secondary-text-color;
- background: $card-background-color;
- padding: 16px;
-
- a { color: $link-text-color }
- }
-
- &__modifiers {
- background: $card-background-color;
- color: $tips-text-color;
- }
-
- &__buttons-wrapper {
- background: $card-background-color;
- color: $tips-text-color;
- }
-
- &__poll-wrapper {
- border-top: 1px solid $border-color;
-
- ul { padding: 12px }
-
- select {
- color: $ui-text-color;
- background-color: $background-color;
- border: 0;
-
- &:focus { border-color: $border-active-color }
- }
-
- .button.button-secondary {
- box-shadow: none;
- color: $outlined-button-color;
- border-color: $outlined-button-color;
-
- &:hover { background-color: $outlined-button-hover-color }
-
- &:active { background-color: $outlined-button-active-color }
-
- &:focus { background-color: $outlined-button-color }
-
-
- }
- }
-
- &__utilBtns { padding-top: 0 }
-
- &__publish .compose-form__publish-button-wrapper { box-shadow: none }
- }
-}
-
-.no-reduce-motion .spoiler-input {
- transition-duration: .2s, .2s;
-}
-
-
-.poll {
- &__input {
- border: 2px solid $control-border-color;
- width: 20px;
- height: 20px;
- flex: 0 0 20px;
- }
-
- &__text input[type=text] {
- color: $ui-text-color;
- background: $background-color;
- border: 1px solid $border-color;
- padding: 8px 12px;
-
- &:focus { border-color: $border-active-color }
- }
-
- &__chart {
- border-radius: 0;
- background: $poll-bar-color;
-
- &.leading { background: $poll-bar-leading-color }
- }
-
- &__footer {
- padding-top: 8px;
- padding-bottom: 0;
- color: $ui-text-color;
- }
-
- &__link { color: $ui-text-color }
-}
-
-.privacy-dropdown {
- &.active .privacy-dropdown__value.active {
- background: $icon-background-hover-color;
- border-radius: 50%;
- box-shadow: none;
-
- .icon-button { color: $icon-button-active-color }
- }
-
- &__dropdown {
- @include shadow-8dp;
- background: $menu-background-color;
- border-radius: $dialog-radius;
- }
-
- &__option {
- color: $icon-color;
- padding: 8px 16px;
-
- &__icon {
- font-size: 20px;
- margin-right: 12px;
- }
-
- &__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &.active {
- background: $menu-background-active-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &:hover {
- background: $menu-background-active-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &:hover {
- background: $menu-background-hover-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-}
-
-.character-counter {
- color: $secondary-text-color;
-}
-
-.reply-indicator {
- @include shadow-1dp;
- border-radius: $card-radius;
- background: $card-background-color;
- padding: 16px;
-
- &__header { margin-bottom: 4px }
-
- &__display {
- &-name {
- color: $primary-text-color;
- padding-right: 24px;
- }
-
- &-avatar { margin-right: 8px }
- }
-
- &__content { color: $primary-text-color }
-}
-
-.attachment-list {
- &__list a { color: $secondary-text-color }
-
- &.compact .fa { color: $icon-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/control.scss b/app/javascript/styles/material-v2-light/control.scss
deleted file mode 100644
index 7bd251291..000000000
--- a/app/javascript/styles/material-v2-light/control.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.react-toggle {
- width: 36px;
- height: 16px;
- border-radius: 15px;
-
- &-track {
- background-color: $toggle-track-color;
- margin: 4px;
- width: 36px;
- height: 16px;
-
- &-check { visibility: hidden }
- &-x { visibility: hidden }
- }
-
- &-thumb {
- @include shadow-1dp;
- width: 20px;
- height: 20px;
- border: 0;
- background-color: $toggle-thumb-color;
- }
-
- &--checked {
- .react-toggle{
- &-track { background-color: $toggle-track-active-color }
-
- &-thumb {
- background-color: $toggle-thumb-active-color;
- left: 22px;
- }
- }
-
- &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
-
- }
-
- &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
-}
-
-.radio-button {
- padding: 8px 0;
-
- &__input {
- border: 2px solid $border-color;
-
- &.checked {
- border-color: $icon-button-active-color;
- background: $icon-button-active-color;
- padding: 3px;
- background-clip: content-box;
- }
- }
-}
-
-.compose-form__sensitive-button .checkbox {
- border: 2px solid $border-color;
- border-radius: 2px;
-
- &.active {
- border-color: $primary-color;
- background: $primary-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/custom_color.scss b/app/javascript/styles/material-v2-light/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/custom_config.scss b/app/javascript/styles/material-v2-light/custom_config.scss
new file mode 100644
index 000000000..38d8cd324
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/custom_config.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/v2-light';
+
+@import 'layout/material-v2';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/custom_layout.scss b/app/javascript/styles/material-v2-light/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/emoji-picker.scss b/app/javascript/styles/material-v2-light/emoji-picker.scss
deleted file mode 100644
index 2c17701cf..000000000
--- a/app/javascript/styles/material-v2-light/emoji-picker.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-.emoji-picker-dropdown {
- &__menu {
- @include shadow-8dp;
- background: $menu-background-color;
- border-radius: $menu-radius;
- }
-
- &__modifiers__menu {
- @include shadow-8dp;
- background: $menu-background-color;
- border-radius: $menu-radius;
-
- button {
- padding: 8px;
- }
- }
-}
-
-.emoji-mart {
- width: 388px !important;
- font-size: 14px;
- color: $ui-text-color;
-
- &-bar {
- border: 0 solid $border-color;
-
- &:first-child {
- background: $menu-background-color;
- }
- }
-
- &-anchors {
- color: $icon-button-color;
- padding: 0;
- }
-
- &-anchor {
- padding: 10px 4px;
-
- &-selected {
- color: $icon-button-active-color;
- }
-
- &-bar {
- background-color: $tab-indicator-active-color;
- }
-
- &:hover {
- color: $icon-button-hover-color;
- }
- }
-
- &-search {
- background: $menu-background-color;
-
- input {
- outline: none;
- padding: 8px;
- background: $search-bar-color;
- color: $ui-text-color;
- border: 0;
- border-radius: $search-bar-radius;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- }
- }
- }
-
- &-scroll {
- padding: 0 8px 8px;
- background: $menu-background-color;
- }
-
- &-category-label span {
- padding: 4px 6px;
- background: $menu-background-color;
- }
-
- &-emoji:hover::before {
- background-color: $icon-background-hover-color;
- }
-
- &-no-results { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/icon_config.scss b/app/javascript/styles/material-v2-light/icon_config.scss
new file mode 100644
index 000000000..3274efde8
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/icon_config.scss
@@ -0,0 +1,26 @@
+// 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
+
+
+// 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.
+@font-face {
+ font-family: "Material Icons";
+ src:
+ local("Material Icons"),
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
+ //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
+ //url(".../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/icons.scss b/app/javascript/styles/material-v2-light/icons.scss
deleted file mode 100644
index beca11a6f..000000000
--- a/app/javascript/styles/material-v2-light/icons.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.fa.fa-users.column-link,
-.fa.fa-globe.column-link,
-.fa.fa-address-book.column-link,
-.fa.fa-bullhorn.column-link,
-.fa.fa-envelope.column-link,
-.fa.fa-bookmark.column-link,
-.fa.fa-star.column-link,
-.fa.fa-list-ul.column-link {
- &__icon.fa-fw { color: $icon-color }
-}
-
-
-.fa { vertical-align: sub } // adjust material icon font baseline to other font
-
-.fa.fa-times,
-.fa.fa-eraser,
-.fa.fa-plus { vertical-align: middle } // adjustment exception
-
-.fa.fa-check { vertical-align: initial }
-
-.fa.fa-lock { text-transform: none }
-
-.fa-fw { width: 16px }
-
-// icon in tab settings
-.fa.fa-chevron-left.column-back-button__icon.fa-fw,
-.text-btn.column-header__setting-btn .fa.fa-eraser {
- font-size: 20px;
- margin-right: 16px;
-}
-
-.icon-with-badge__badge {
- background: $badge-color;
- border: none;
- padding: 2px 6px;
- border-radius: 12px;
-}
-
-// favorite icon color
-.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/layout/material-v1.scss b/app/javascript/styles/material-v2-light/layout/material-v1.scss
new file mode 100644
index 000000000..825deaf8c
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@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;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 0;
+
+
+// Avater cropping settings
+$avater-radius: 50%; // Rounded cropping
+//$avater-radius: 2px // Material v1 square
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/layout/material-v2.scss b/app/javascript/styles/material-v2-light/layout/material-v2.scss
index 86d2c496f..6c81dc3e4 100644
--- a/app/javascript/styles/material-v2-light/layout/material-v2.scss
+++ b/app/javascript/styles/material-v2-light/layout/material-v2.scss
@@ -1,5 +1,5 @@
@charset "UTF-8";
-@import '../mixins';
+@import '../theme/mixins';
// Navigation bar radius
diff --git a/app/javascript/styles/material-v2-light/loader.scss b/app/javascript/styles/material-v2-light/loader.scss
new file mode 100644
index 000000000..04d588001
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/loader.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+
+@import '../application';
+
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/material-icons.scss b/app/javascript/styles/material-v2-light/material-icons.scss
deleted file mode 100644
index e473dfe31..000000000
--- a/app/javascript/styles/material-v2-light/material-icons.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'functions';
-
-
-.fa {
- &.fa-bars,
- &.fa-navicon,
- &.fa-reorder,
- &.fa-globe,
- &.fa-cog,
- &.fa-cogs,
- &.fa-gears,
- &.fa-sign-out,
- &.fa-search,
- &.fa-times,
- &.fa-times-circle,
- &.fa-close,
- &.fa-remove,
- &.fa-chevron-down,
- &.fa-ellipsis-v,
- &.fa-paperclip,
- &.fa-tasks,
- &.fa-plus,
- &.fa-unlock,
- &.fa-lock,
- &.fa-envelope,
- &.fa-home,
- &.fa-bullhorn,
- &.fa-sliders,
- &.fa-chevron-left,
- &.fa-chevron-right,
- &.fa-reply,
- &.fa-reply-all,
- &.fa-share-alt,
- &.fa-star,
- &.fa-bookmark,
- &.fa-ellipsis-h,
- &.fa-bell,
- &.fa-eraser,
- &.fa-users,
- &.fa-file-text,
- &.fa-user-plus,
- &.fa-address-book,
- &.fa-address-book-o,
- &.fa-list,
- &.fa-list-ul,
- &.fa-eye,
- &.fa-eye-slash,
- &.fa-pencil,
- &.fa-trash,
- &.fa-play,
- &.fa-external-link,
- &.fa-retweet,
- &.fa-link,
- &.fa-pause,
- &.fa-volume-up,
- &.fa-volume-off,
- &.fa-expand,
- &.fa-download,
- &.fa-arrows-alt,
- &.fa-compress,
- &.fa-user-times,
- &.fa-check {
- font-family: "Material Icons";
- }
-}
-
-.fa {
- &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
- &.fa-globe::before { content: "public" }
- &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
- &.fa-sign-out::before { content: "exit_to_app" }
- &.fa-search::before { content: "search" }
- &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
- &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
- &.fa-paperclip::before { content: "attach_file" }
- &.fa-tasks::before { content: "poll" }
- &.fa-plus::before { content: "add" }
- &.fa-unlock::before { content: "lock_open" }
- &.fa-lock::before { content: "lock" }
- &.fa-envelope::before { content: "mail" }
- &.fa-home::before { content: "home" }
- &.fa-bullhorn::before { content: "announcement" }
- &.fa-sliders::before { content: "tune" }
- &.fa-chevron-left::before { content: "arrow_back" }
- &.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: "reply" }
- &.fa-reply-all::before { content: "reply_all" }
- &.fa-share-alt::before { content: "share" }
- &.fa-star::before { content: $favorite-icon }
- &.fa-bookmark::before { content: "bookmark" }
- &.fa-ellipsis-h::before { content: "more_horiz" }
- &.fa-bell::before { content: "notifications" }
- &.fa-eraser::before { content: "clear_all" }
- &.fa-users::before { content: "people" }
- &.fa-file-text::before { content: "web" }
- &.fa-user-plus::before { content: "person_add" }
- &.fa-address-book::before { content: "explore" }
- &.fa-address-book-o::before { content: "explore" }
- &.fa-list::before { content: "list" }
- &.fa-list-ul::before { content: "list" }
- &.fa-eye::before { content: "visibility" }
- &.fa-eye-slash::before { content : "visibility_off" }
- &.fa-pencil::before { content: "create" }
- &.fa-trash::before { content: "delete" }
- &.fa-play::before { content: "play_arrow" }
- &.fa-external-link::before { content: "open_in_new" }
- &.fa-retweet::before { content: "repeat" }
- &.fa-link::before { content: "link" }
- &.fa-pause::before { content: "pause" }
- &.fa-volume-up::before { content: "volume_up" }
- &.fa-volume-off::before { content: "volume_off" }
- &.fa-expand::before { content: "web_asset" }
- &.fa-download::before { content: "file_download" }
- &.fa-arrows-alt::before { content: "fullscreen" }
- &.fa-compress::before { content: "fullscreen_exit" }
- &.fa-user-times::before { content: "delete" }
- &.fa-check::before { content: "check" }
-}
-
-// bookmark icon
-.status__action-bar-button.icon-button,
-.bookmark-icon.icon-button {
- .fa.fa-bookmark::before { content: "bookmark_border" }
- &.active .fa.fa-bookmark::before { content: "bookmark" }
-}
-
-// favorite icon
-.status__action-bar-button.star-icon.icon-button,
-.star-icon.icon-button {
- .fa.fa-star::before { content: $favorite-icon-border }
-
- &.active,
- &.active.activate {
- .fa.fa-star::before { content: $favorite-icon }
- }
-}
-
-// boost icon
-.no-reduce-motion button.icon-button i.fa-retweet {
- height: 18px;
- width: 18px;
- transition: background-position .3s steps(1);
- background-image: url('data:image/svg+xml;utf8,');
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/media.scss b/app/javascript/styles/material-v2-light/media.scss
deleted file mode 100644
index 64a69a129..000000000
--- a/app/javascript/styles/material-v2-light/media.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.media-gallery { border-radius: $card-radius }
-
-.media-modal__close {
- align-content: center;
-
- &.icon-button {
- background: transparent;
- color: $media-icon-color;
- text-align: center !important;
- font-size: 24px !important;
- width: 48px !important;
- height: 48px !important;
- border: 12px;
-
- &:hover {
- background: $media-icon-background-hover-color;
- color: $media-icon-hover-color;
- }
-
- .fa-fw { width: 24px }
- }
-}
-
-.media-modal {
- &__nav {
- background: $media-icon-background-color;
- color: $media-icon-color;
- height: 48px;
- width: 48px;
- margin: auto 16px;
- padding: 8px;
- border-radius: 50%;
-
- .fa { width: 32px }
- }
-
- &__button {
- background-color: $media-page-indicator-color;
-
- &--active { background-color: $media-page-indicator-active-color }
- }
-}
-
-.video-player {
- &__controls {
- background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
- padding: 0 12px;
- }
-
- &__seek {
- &::before {
- background: rgba(255,255,255,.2);
- border-radius: 0;
- }
-
- &__buffer {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__progress {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__volume {
- &::before {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__current {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__time-current { margin-left: 68px }
-
- &__buttons button { font-size: 20px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/mobile.scss b/app/javascript/styles/material-v2-light/mobile.scss
deleted file mode 100644
index de6f4e94c..000000000
--- a/app/javascript/styles/material-v2-light/mobile.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.tabs-bar {
- background: $top-bar-color;
-
- &__link {
- padding: 16px 16px 12px 16px;
- color: $top-bar-icon-color;
- border-bottom: 4px solid transparent;
-
- &.active {
- border-bottom: 4px solid $tab-indicator-active-color;
- color: $tab-indicator-active-color;
- }
-
- .fa { font-size: 20px }
- }
-
- &__wrapper {
- @include shadow-4dp;
- background: transparent;
- }
-}
-
-
-#tabs-bar__portal { overflow-y: hidden }
-
-.floating-action-button {
- @include shadow-6dp;
- background: $floating-action-button-color;
- color: $floating-action-button-icon-color;
- font-size: 24px;
-
- &:hover { background: $floating-action-button-hover-color }
-
- &:active,
- &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
-
- .column { margin: 0 !important }
-
- .search__input { padding: 16px 38px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/modal.scss b/app/javascript/styles/material-v2-light/modal.scss
deleted file mode 100644
index 7734c8dfa..000000000
--- a/app/javascript/styles/material-v2-light/modal.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.confirmation-modal {
- background: $card-background-color;
- color: $ui-text-color;
- border-radius: $dialog-radius;
- width: 280px;
-
- &__container {
- text-align: left;
- padding: 24px;
- }
-
- &__action-bar {
- justify-content: flex-end;
- background: $card-background-color;
- padding: 8px;
- }
-}
-
-.actions-modal {
- background: $card-background-color;
- border-radius: $card-radius;
-
- ul li:not(:empty) a {
- color: $ui-text-color;
- font-size: 16px;
-
- &:hover {
- background: $card-background-hover-color;
- color: $ui-text-color;
- }
- }
-
- .dropdown-menu__separator { border-bottom-color: $border-color }
-
- .status {
- background: $card-background-color;
- border-bottom-color: $border-color;
- padding-top: 12px;
- padding-bottom: 12px;
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
- }
-}
-
-.report-modal {
- background: $card-background-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__target {
- padding: 24px;
- text-align: left;
- font-weight: bold;
- }
-
- &__container {
- border-top: none;
- }
-}
-
-.embed-modal .embed-modal__container {
- padding: 0 24px 24px 24px;
-
- .hint {
- margin-bottom: 16px;
- color: $secondary-text-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/plugins/cards.scss b/app/javascript/styles/material-v2-light/plugins/cards.scss
new file mode 100644
index 000000000..c134cbeeb
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+ box-shadow: none !important;
+ margin: 2px 0 !important;
+ padding: 8px !important;
+
+ > .scrollable { background: $background-color }
+}
+
+.status {
+ border-bottom: 0;
+ border-radius: $card-radius;
+ background: $card-background-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-background-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/material-v2-light/plugins/dense.scss b/app/javascript/styles/material-v2-light/plugins/dense.scss
new file mode 100644
index 000000000..42417124b
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/plugins/dense.scss
@@ -0,0 +1,63 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+ &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+ &__buttons { height: 48px }
+
+ &__button {
+ margin: 8px;
+ padding: 10px 8px;
+
+ .fa { vertical-align: text-top }
+ }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 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 }
+}
+
+.status {
+ padding: 8px 8px 8px 66px;
+
+ &__expand { width: 66px }
+
+ &__info { padding-right: 0 }
+
+ &__avatar {
+ left: 8px;
+ top: 10px;
+ }
+
+ &__content { padding-top: 2px }
+}
+
+.detailed-status {
+ padding: 14px;
+
+ &__meta { margin-top: 14px }
+
+ &__action-bar { padding: 10px 0 }
+}
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/plugins/plus.scss b/app/javascript/styles/material-v2-light/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+ background: #eeeeee;
+ width: 28px !important;
+ height: 28px !important;
+
+ .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { 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/material-v2-light/statuses.scss b/app/javascript/styles/material-v2-light/statuses.scss
deleted file mode 100644
index f60c2d859..000000000
--- a/app/javascript/styles/material-v2-light/statuses.scss
+++ /dev/null
@@ -1,172 +0,0 @@
-@charset "UTF-8";
-@import 'config';
-@import 'mixins';
-
-
-.status {
- padding: 12px 12px 12px 70px;
- border-bottom: 1px solid $border-color;
-
- &__expand { width: 70px }
-
- &__info {
- font-size: 16px;
- padding-right: 4px;
- }
-
- &__relative-time { color: $info-text-color }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
-
- &__content {
- font-size: 16px;
- padding-top: 4px;
- color: $primary-text-color;
-
- a {
- color: $link-text-color;
-
- &.unhandled-link { color: $link-text-color }
- }
-
- .status__content__spoiler-link {
- background: transparent;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
- }
-
- &__spoiler-link {
- border: 0;
- color: $text-button-color;
- }
-
- &__read-more-button {
- font-size: 14px;
- color: $text-button-color;
- border-radius: $button-radius;
- padding: 4px 6px;
-
- &:hover {
- background: $text-button-hover-color;
- text-decoration: none;
- }
-
- &:focus { background: $text-button-focus-color }
- }
- }
-
- &__action-bar {
- &__counter__label {
- font-size: 14px;
- color: $info-text-color;
- }
- }
-
- &__prepend { color: $secondary-text-color }
-
- &.status-direct:not(.read) {
- background: transparent;
- border-bottom-color: $border-color;
- }
-}
-
-.status-card {
- color: $icon-color;
- border-color: $border-color;
- outline: none;
-
- &__image {
- background: transparent;
-
- &>.fa {
- font-size: 26px;
- }
- }
-
- &__title {
- color: $primary-text-color;
- margin-bottom: 6px;
- }
-
- &__description { color: $secondary-text-color }
-
- &__actions {
- &>div {
- background: $media-icon-background-color;
- border-radius: $button-radius;
- }
-
- button,
- a {
- color: $media-icon-color;
- font-size: 20px;
- }
-
- a { bottom: auto }
- }
-
- &.compact {
- border-color: $border-color;
- outline: none;
- background: transparent;
-
- .status-card {
- &__content { padding: 12px }
- &__image { flex: 0 0 64px }
- }
-
- &:hover { background-color: transparent !important }
- }
-
- &:hover { background-color: $card-background-color }
-}
-
-// Detailed status in mobile
-.status.light {
- .status {
- &__display-name { color: $primary-text-color }
- &__relative-time { color: $info-text-color }
- &__content { color: $primary-text-color }
- }
-
- .display-name { color: $secondary-text-color }
- .display-name strong { color: $primary-text-color }
-}
-
-.detailed-status {
- background: $card-background-color;
- padding: 16px;
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__meta {
- margin-top: 16px;
- color: $info-text-color;
- }
-
- &__action-bar {
- background: $card-background-color;
- border-top: none;
- border-bottom: 1px solid $border-color;
- padding: 12px 0;
- }
-
- &__button {
- .icon-button { font-size: 20px !important }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/_functions.scss b/app/javascript/styles/material-v2-light/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@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/material-v2-light/_mixins.scss b/app/javascript/styles/material-v2-light/theme/_mixins.scss
similarity index 100%
rename from app/javascript/styles/material-v2-light/_mixins.scss
rename to app/javascript/styles/material-v2-light/theme/_mixins.scss
diff --git a/app/javascript/styles/material-v2-light/theme/account.scss b/app/javascript/styles/material-v2-light/theme/account.scss
new file mode 100644
index 000000000..44d68d1e9
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/account.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+ border-bottom: 1px solid $border-color;
+
+ .account__display-name { color: $primary-text-color }
+ .account__display-name strong { color: $secondary-text-color }
+
+ &__avatar {
+ border-radius: $avater-radius;
+ width: 40px;
+ height: 40px;
+
+ &-overlay {
+ &-base {
+ border-radius: 50%;
+ width: 44px;
+ height: 44px;
+ background-size: 44px;
+ }
+
+ &-overlay { border-radius: $avater-radius }
+ }
+ }
+
+ &__header {
+ &__bar {
+ background: $card-background-color;
+ padding: 8px;
+ border-bottom: 1px solid $border-color;
+
+ .avatar .account__avatar { border: none }
+ }
+
+ &__tabs {
+ padding: 8px;
+
+ &__name {
+ padding: 8px;
+
+ h1 {
+ color: $primary-text-color;
+
+ small { color: $secondary-text-color }
+ }
+ }
+
+ &__buttons {
+ .icon-button {
+ border: none;
+ border-radius: 50%;
+ padding: 0;
+ }
+ }
+ }
+
+ &__extra {
+ margin-top: 0;
+
+ &__links {
+ color: $secondary-text-color;
+ padding: 10px 0;
+
+ a {
+ color: $secondary-text-color;
+ padding: 4px 12px;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+
+ &__bio {
+ margin: 0;
+
+ .account__header {
+ &__content {
+ color: $primary-text-color;
+ padding: 8px;
+ }
+
+ &__fields {
+ border: 1px solid $border-color;
+ border-radius: 4px;
+
+ .verified {
+ border: none;
+ background: $verified-background-color;
+
+ a,
+ &__mark { color: $primary-text-color }
+ }
+
+ dl {
+ border-bottom: 1px solid $border-color;
+
+ &:first-child .verified { border-radius: 0 }
+
+ &:last-child { border-bottom: 0 }
+ }
+
+ dt {
+ color: $primary-text-color;
+ background: $list-background-inactive-color;
+ }
+
+ dd { color: $primary-text-color }
+ }
+ }
+ }
+ }
+
+ &__section-headline {
+ background: $text-tab-background-color;
+ border-bottom: 1px solid $border-color;
+
+ a {
+ padding: 16px 0;
+ color: $text-tab-indicator-color;
+
+ &.active {
+ color: $text-tab-indicator-active-color;
+ border-bottom: 4px solid $text-tab-indicator-active-color;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $text-tab-indicator-background-focus-color }
+ }
+
+ &:hover { background: $text-tab-indicator-background-hover-color }
+ }
+ }
+}
+
+.account-role {
+ padding: 4px 8px;
+ border-radius: 17px;
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/base_config.scss b/app/javascript/styles/material-v2-light/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../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__input:hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+}*/
+
+
+// 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
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/basics.scss b/app/javascript/styles/material-v2-light/theme/basics.scss
new file mode 100644
index 000000000..4c122d1c6
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+body { background: $background-color }
+
+// Chrome & Safari scroll bar
+::-webkit-scrollbar-thumb {
+ background: $scroll-bar-thumb-color;
+
+ &:hover { background: $scroll-bar-thumb-hover-color }
+ &:active { background: $scroll-bar-thumb-active-color }
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track:hover,
+::-webkit-scrollbar-track:active {
+ background: transparent !important;
+}
+
+// Firefox scroll bar
+html {
+ scrollbar-color: $scroll-bar-thumb-color transparent;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/button.scss b/app/javascript/styles/material-v2-light/theme/button.scss
new file mode 100644
index 000000000..1231bac98
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+
+ &.active {
+ color: $icon-button-active-color;
+
+ &:hover { color: $icon-button-active-hover-color }
+ }
+
+ &.disabled { color: $disabled-icon-color }
+
+ &.inverted {
+ color: $icon-button-color;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-background-hover-color;
+ }
+ }
+
+ &.overlayed {
+ border-radius: 50%;
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+
+ &:hover {
+ background: $media-icon-background-color;
+ color: $media-icon-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-background-hover-color;
+ }
+
+ &:active,
+ &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+ font-size: 12px;
+
+ &:hover {
+ background-color: $icon-background-hover-color;
+ color: $icon-button-hover-color;
+ }
+}
+
+.button,
+.button:active,
+.button:focus {
+ background-color: $contained-button-color;
+ border-radius: $button-radius;
+}
+
+.button:hover {
+ @include shadow-2dp;
+ background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+ background: $contained-button-color;
+ margin: 2px;
+
+ &:hover { background: $contained-button-hover-color }
+
+ .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.confirmation-modal__cancel-button {
+ box-shadow: none;
+ background-color: transparent;
+ margin: 0 8px;
+ color: $text-button-color;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
+}
+
+.spoiler-button__overlay__label {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/columns.scss b/app/javascript/styles/material-v2-light/theme/columns.scss
new file mode 100644
index 000000000..a6892adf2
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/columns.scss
@@ -0,0 +1,502 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 10px 8px;
+ border-radius: $card-radius;
+
+ &>.scrollable { background: $list-background-color }
+
+ &:last-child { box-shadow: none }
+}
+
+.column-header {
+ background: $top-bar-color;
+ border-radius: $bar-radius;
+
+ > button {
+ padding: 16px 0 16px 16px;
+ color: $top-bar-text-color;
+ }
+
+ &>.column-header__back-button { color: $top-bar-icon-color }
+
+ &.active {
+ .column-header__icon {
+ color: $top-bar-unread-icon-color;
+ text-shadow: none;
+ }
+ }
+
+ &__icon {
+ margin-right: 16px;
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ }
+
+ &__buttons { height: 56px }
+
+ &__button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ margin: 8px 10px;
+ padding: 10px 12px;
+ border-radius: 50%;
+
+ &.active {
+ color: $top-bar-icon-active-color;
+ background: $icon-background-active-color;
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &__setting-btn {
+ color: $icon-button-color;
+ padding: 8px 0;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ text-decoration: none;
+ }
+
+ .fa { font-size: 20px }
+
+ span { vertical-align: middle }
+ }
+
+ &__setting-arrows {
+ font-size: 16px;
+ border-bottom: 8px;
+
+ .column-header__setting-btn {
+ padding: 8px;
+ border-radius: 50%;
+
+ &:last-child { padding-right: 8px }
+ }
+ }
+
+ &__wrapper {
+ @include shadow-4dp;
+ border-radius: $bar-radius;
+
+ .announcements { border-top: 1px solid $border-color }
+
+ &.active {
+ @include shadow-4dp;
+
+ &::before { background: transparent }
+ }
+ }
+
+ &__collapsible {
+ color: $ui-text-color;
+ background: $card-background-color;
+ border-top: 1px solid $border-color;
+
+ &-inner {
+ background: $card-background-color;
+ padding: 16px;
+ }
+
+ &.collapsed { border-top: none }
+ }
+
+ &__back-button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 8px;
+ margin: auto 0;
+ border-radius: 50%;
+
+ span { display: none }
+ }
+}
+
+.column-subheading {
+ color: $section-text-color;
+ background: $background-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+}
+
+.column-link {
+ color: $ui-text-color;
+ background: $background-color;
+ padding: 16px;
+ border-radius: $nav-drawer-item-radius;
+
+ &:hover { background: $list-background-hover-color }
+
+ &:active,
+ &:focus { background: $list-background-active-color }
+
+ &__icon {
+ margin-right: 32px;
+ font-size: 20px;
+ }
+
+ &--transparent {
+ &.active {
+ color: $ui-text-color;
+ background: $menu-background-active-color;
+
+ &:hover { background: $menu-background-active-hover-color }
+
+ .fa { color: $icon-color }
+ }
+
+ &:hover {
+ color: $ui-text-color;
+
+ .fa { color: $icon-color }
+ }
+ }
+
+ .fa { color: $icon-color }
+}
+
+.column-settings {
+ &__section {
+ color: $section-text-color;
+ margin-bottom: 0;
+ margin-top: 8px;
+ }
+
+ &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 16px;
+
+ span { visibility: hidden } // hide "back" string
+}
+
+.column-inline-form {
+ padding: 16px 0 16px 16px;
+ background: $card-background-color;
+
+ .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+ color: $primary-text-color;
+ background: $search-bar-color;
+ border-radius: $bar-radius;
+
+ &::placeholder { color: $tips-text-color }
+
+ &:focus {
+ @include shadow-1dp;
+ background: $search-bar-focus-color;
+ }
+}
+
+.empty-column-indicator {
+ color: $secondary-text-color;
+ background: $card-background-color;
+ font-size: 16px;
+}
+
+.conversation {
+ border-bottom: 1px solid $border-color;
+ padding: 12px;
+ background: $list-background-inactive-color;
+
+ &--unread {
+ background: $list-background-color;
+
+ .conversation__content__relative-time { color: $info-text-color }
+ }
+
+ &__unread { background: $primary-color }
+
+ &__avatar { padding: 0 16px 0 0 }
+
+ &__content {
+ padding: 0;
+
+ &__relative-time {
+ font-size: 14px;
+ color: $info-text-color;
+ }
+
+ &__names,
+ &__names a {
+ color: $primary-text-color;
+ font-size: 16px;
+ }
+ }
+}
+
+// read status in notification column
+.muted {
+ .status {
+ &__content {
+ color: $read-primary-text-color;
+
+ p { color: $read-primary-text-color }
+
+ a { color: $read-secondary-text-color }
+ }
+
+ &__display-name strong { color: $read-primary-text-color }
+ }
+
+ .poll {
+ color: $read-primary-text-color;
+
+ &__chart {
+ background: $read-poll-bar-color;
+
+ &.leading { background: $read-poll-bar-leading-color }
+ }
+
+ &__footer,
+ &__link { color: $read-ui-text-color }
+ }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+ color: $icon-color;
+ padding: 16px;
+
+ &:hover { background: $menu-background-hover-color }
+}
+
+.getting-started {
+ background: $background-color;
+ color: $ui-text-color;
+
+ &__wrapper {
+ background: $background-color;
+ height: auto !important;
+ border-bottom: 1px solid $border-color;
+ }
+
+ &__footer {
+ padding: 16px;
+
+ p {
+ color: $secondary-text-color;
+ font-size: 12px;
+ margin-bottom: 16px;
+ }
+
+ a { color: $ui-text-color }
+
+ p a { color: $link-text-color }
+ }
+
+ &__trends {
+ background: $background-color;
+ margin-bottom: 0;
+
+ h4 {
+ color: $section-text-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+ border-bottom: none;
+ }
+ }
+}
+
+.trends {
+ &__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-background-color;
+ padding: 0;
+
+ &__container { color: $primary-text-color }
+
+ &__item {
+ padding: 16px;
+ font-size: 16px;
+
+ &__unread { background: $badge-color }
+ }
+
+ &__pagination { color: $ui-text-color }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.reactions-bar {
+ .emoji-button {
+ color: $icon-button-color;
+ font-size: 20px;
+
+ &:hover { color: $icon-button-hover-color }
+
+ &:active { color: $icon-button-active-color }
+ }
+
+ &__item {
+ background: $contained-chip-color;
+ border-radius: 17px;
+ margin: 2px 4px;
+
+ &.active {
+ background-color: $contained-chip-selected-color;
+ .reactions-bar__item__count { color: $ui-text-color }
+ }
+
+ &__emoji {
+ width: 24px;
+ height: 24px;
+ margin: 4px 0 4px 2px;
+ }
+
+ &__count {
+ font-size: 16px;
+ margin: 0 8px;
+ color: $secondary-text-color;
+ }
+
+ &:hover { background: $contained-chip-hover-color }
+ }
+}
+
+.notification {
+ &__filter-bar {
+ background: $tab-background-color;
+ border-bottom: 1px solid $border-color;
+ z-index: 1;
+
+ button {
+ background: $tab-background-color;
+ color: $tab-indicator-color;
+ font-size: 16px;
+
+ span { font-size: 14px }
+
+ &.active {
+ color: $tab-indicator-active-color;
+ border-bottom: 4px solid $tab-indicator-active-color;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $tab-indicator-background-focus-color }
+ }
+
+ &:hover { background: $tab-indicator-background-hover-color }
+ }
+ }
+
+ &__message {
+ color: $secondary-text-color;
+ margin: 0 16px 0 70px;
+ font-size: 16px;
+ }
+
+ &__display-name:hover { color: inherit }
+}
+
+.notification-favourite .status.status-direct {
+ .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+ font-size: 12px;
+ border-radius: 17px;
+ padding: 4px 8px;
+ opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
+
+.focusable {
+ &:focus { background: $card-background-color }
+}
+
+// single column mode
+@media screen and (min-width: 415px) {
+ .tabs-bar {
+ margin-bottom: 0;
+
+ &__wrapper { padding-top: 0 }
+ }
+
+ .columns-area__panels__main {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 12px 12px 0;
+ }
+}
+
+@media screen and (min-width: 631px) {
+ .tabs-bar__link {
+ &:hover {
+ background: $tab-indicator-background-hover-color;
+ border-bottom-color: $tab-background-color;
+ }
+
+ &:active,
+ &:focus {
+ background: $tab-indicator-background-focus-color;
+ border-bottom-color: $tab-background-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/components.scss b/app/javascript/styles/material-v2-light/theme/components.scss
new file mode 100644
index 000000000..4f844229c
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/components.scss
@@ -0,0 +1,394 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.drawer {
+ &__header {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ border-radius: $nav-bar-radius;
+ justify-content: space-around;
+
+ a { transition: none }
+
+ a:hover {
+ background: $icon-background-hover-color;
+ border-radius: 50%;
+ }
+ }
+
+ &__tab {
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ margin: 10px auto 10px;
+ padding: 8px;
+ flex: none;
+ height: 20px;
+ width: 20px;
+ border-bottom: none;
+ text-align: justify;
+
+ &:hover { color: $top-bar-icon-hover-color }
+ }
+
+ &__pager {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ }
+
+ &__inner {
+ background: $card-background-color;
+
+ &.darker {
+ background: $card-background-color;
+ position: inherit;
+ }
+
+ &__mastodon { background: $card-background-color }
+ }
+}
+
+.search {
+ &__input {
+ background: $search-bar-color;
+ color: $tips-text-color;
+ border-radius: $search-bar-radius;
+ padding: 12px 12px 12px 40px;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ color: $search-bar-text-color;
+ }
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__icon {
+ .fa {
+ color: $icon-color;
+ font-size: 20px;
+ top: 12px;
+ right: unset;
+ left: 12px;
+ height: 6px;
+ transition: none;
+
+ &.active { opacity: 1 }
+
+ &-search {
+ transform: none;
+ opacity: 1;
+ }
+ &-times-circle.active {
+ right: 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-background-color;
+ padding: 16px;
+
+ .fa { margin-right: 8px }
+ }
+
+ &__section {
+ h5 {
+ background: $card-background-color;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
+ color: $section-text-color;
+
+ .fa { margin-right: 8px }
+ }
+ }
+}
+
+.navigation-bar {
+ color: $secondary-text-color;
+ padding: 14px;
+
+ strong {
+ color: $ui-text-color;
+ }
+}
+
+.navigation-panel hr {
+ border-top: 1px solid $border-color;
+ margin: 8px 0;
+}
+
+.dropdown-menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ padding: 8px 0;
+ border-radius: $menu-radius;
+
+ &__arrow { visibility: hidden }
+
+ &__item a {
+ font-size: 14px;
+ padding: 8px 16px;
+ background: $menu-background-color;
+ color: $menu-text-color;
+
+ &:hover, &:active {
+ background: $menu-background-hover-color;
+ color: $menu-text-color;
+ }
+ }
+
+ &__separator {
+ margin: 8px 0;
+ border-bottom: 1px solid $border-color;
+ }
+}
+
+.compose-form {
+ .autosuggest-textarea {
+ &__textarea {
+ background: $card-background-color;
+ color: $ui-text-color;
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__suggestions {
+ @include shadow-1dp;
+ background: $menu-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+ font-size: 16px;
+ padding: 8px 0;
+
+ &__item {
+ padding: 8px;
+ border-radius: 0;
+
+ &:hover { background: $menu-background-hover-color }
+
+ &.selected,
+ &:focus,
+ &:active { background: $menu-background-active-color }
+ }
+ }
+ }
+
+ .spoiler-input__input {
+ color: $ui-text-color;
+ background: $card-background-color;
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ .compose-form {
+ &__warning {
+ @include shadow-1dp;
+ color: $secondary-text-color;
+ background: $card-background-color;
+ padding: 16px;
+
+ a { color: $link-text-color }
+ }
+
+ &__modifiers {
+ background: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__buttons-wrapper {
+ background: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__poll-wrapper {
+ border-top: 1px solid $border-color;
+
+ ul { padding: 12px }
+
+ select {
+ color: $ui-text-color;
+ background-color: $background-color;
+ border: 0;
+
+ &:focus { border-color: $border-active-color }
+ }
+
+ .button.button-secondary {
+ box-shadow: none;
+ color: $outlined-button-color;
+ border-color: $outlined-button-color;
+
+ &:hover { background-color: $outlined-button-hover-color }
+
+ &:active { background-color: $outlined-button-active-color }
+
+ &:focus { background-color: $outlined-button-color }
+
+
+ }
+ }
+
+ &__utilBtns { padding-top: 0 }
+
+ &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+ }
+}
+
+.no-reduce-motion .spoiler-input {
+ transition-duration: .2s, .2s;
+}
+
+
+.poll {
+ &__input {
+ border: 2px solid $control-border-color;
+ width: 20px;
+ height: 20px;
+ flex: 0 0 20px;
+ }
+
+ &__text input[type=text] {
+ color: $ui-text-color;
+ background: $background-color;
+ border: 1px solid $border-color;
+ padding: 8px 12px;
+
+ &:focus { border-color: $border-active-color }
+ }
+
+ &__chart {
+ border-radius: 0;
+ background: $poll-bar-color;
+
+ &.leading { background: $poll-bar-leading-color }
+ }
+
+ &__footer {
+ padding-top: 8px;
+ padding-bottom: 0;
+ color: $ui-text-color;
+ }
+
+ &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+ &.active .privacy-dropdown__value.active {
+ background: $icon-background-hover-color;
+ border-radius: 50%;
+ box-shadow: none;
+
+ .icon-button { color: $icon-button-active-color }
+ }
+
+ &__dropdown {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $dialog-radius;
+ }
+
+ &__option {
+ color: $icon-color;
+ padding: 8px 16px;
+
+ &__icon {
+ font-size: 20px;
+ margin-right: 12px;
+ }
+
+ &__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+
+ &.active {
+ background: $menu-background-active-color;
+ color: $icon-hover-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+
+ &:hover {
+ background: $menu-background-active-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+
+ &:hover {
+ background: $menu-background-hover-color;
+ color: $icon-hover-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+}
+
+.character-counter {
+ color: $secondary-text-color;
+}
+
+.reply-indicator {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ background: $card-background-color;
+ padding: 16px;
+
+ &__header { margin-bottom: 4px }
+
+ &__display {
+ &-name {
+ color: $primary-text-color;
+ padding-right: 24px;
+ }
+
+ &-avatar { margin-right: 8px }
+ }
+
+ &__content { color: $primary-text-color }
+}
+
+.attachment-list {
+ &__list a { color: $secondary-text-color }
+
+ &.compact .fa { color: $icon-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/control.scss b/app/javascript/styles/material-v2-light/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+ width: 36px;
+ height: 16px;
+ border-radius: 15px;
+
+ &-track {
+ background-color: $toggle-track-color;
+ margin: 4px;
+ width: 36px;
+ height: 16px;
+
+ &-check { visibility: hidden }
+ &-x { visibility: hidden }
+ }
+
+ &-thumb {
+ @include shadow-1dp;
+ width: 20px;
+ height: 20px;
+ border: 0;
+ background-color: $toggle-thumb-color;
+ }
+
+ &--checked {
+ .react-toggle{
+ &-track { background-color: $toggle-track-active-color }
+
+ &-thumb {
+ background-color: $toggle-thumb-active-color;
+ left: 22px;
+ }
+ }
+
+ &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+ }
+
+ &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+ padding: 8px 0;
+
+ &__input {
+ border: 2px solid $border-color;
+
+ &.checked {
+ border-color: $icon-button-active-color;
+ background: $icon-button-active-color;
+ padding: 3px;
+ background-clip: content-box;
+ }
+ }
+}
+
+.compose-form__sensitive-button .checkbox {
+ border: 2px solid $border-color;
+ border-radius: 2px;
+
+ &.active {
+ border-color: $primary-color;
+ background: $primary-color;
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/emoji-picker.scss b/app/javascript/styles/material-v2-light/theme/emoji-picker.scss
new file mode 100644
index 000000000..70e22752d
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+ &__menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $menu-radius;
+ }
+
+ &__modifiers__menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $menu-radius;
+
+ button {
+ padding: 8px;
+ }
+ }
+}
+
+.emoji-mart {
+ width: 388px !important;
+ font-size: 14px;
+ color: $menu-text-color;
+
+ &-bar {
+ border: 0 solid $border-color;
+
+ &:first-child {
+ background: $menu-background-color;
+ }
+ }
+
+ &-anchors {
+ color: $icon-button-color;
+ padding: 0;
+ }
+
+ &-anchor {
+ padding: 10px 4px;
+
+ &-selected {
+ color: $icon-button-active-color;
+ }
+
+ &-bar {
+ background-color: $tab-indicator-active-color;
+ }
+
+ &:hover {
+ color: $icon-button-hover-color;
+ }
+ }
+
+ &-search {
+ background: $menu-background-color;
+
+ input {
+ outline: none;
+ padding: 8px;
+ background: $search-bar-color;
+ color: $ui-text-color;
+ border: 0;
+ border-radius: $search-bar-radius;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ }
+ }
+ }
+
+ &-scroll {
+ padding: 0 8px 8px;
+ background: $menu-background-color;
+ }
+
+ &-category-label span {
+ padding: 4px 6px;
+ background: $menu-background-color;
+ }
+
+ &-emoji:hover::before {
+ background-color: $icon-background-hover-color;
+ }
+
+ &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/icons.scss b/app/javascript/styles/material-v2-light/theme/icons.scss
new file mode 100644
index 000000000..1367647ec
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+ &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub } // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle } // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+ font-size: 20px;
+ margin-right: 16px;
+}
+
+.icon-with-badge__badge {
+ background: $badge-color;
+ border: none;
+ padding: 2px 6px;
+ border-radius: 12px;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/material-icons.scss b/app/javascript/styles/material-v2-light/theme/material-icons.scss
new file mode 100644
index 000000000..51631eab5
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/material-icons.scss
@@ -0,0 +1,156 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.fa {
+ &.fa-bars,
+ &.fa-navicon,
+ &.fa-reorder,
+ &.fa-globe,
+ &.fa-cog,
+ &.fa-cogs,
+ &.fa-gears,
+ &.fa-sign-out,
+ &.fa-search,
+ &.fa-times,
+ &.fa-times-circle,
+ &.fa-close,
+ &.fa-remove,
+ &.fa-chevron-down,
+ &.fa-ellipsis-v,
+ &.fa-paperclip,
+ &.fa-tasks,
+ &.fa-plus,
+ &.fa-unlock,
+ &.fa-lock,
+ &.fa-envelope,
+ &.fa-home,
+ &.fa-bullhorn,
+ &.fa-sliders,
+ &.fa-chevron-left,
+ &.fa-chevron-right,
+ &.fa-reply,
+ &.fa-reply-all,
+ &.fa-share-alt,
+ &.fa-star,
+ &.fa-bookmark,
+ &.fa-ellipsis-h,
+ &.fa-bell,
+ &.fa-eraser,
+ &.fa-users,
+ &.fa-file-text,
+ &.fa-user-plus,
+ &.fa-address-book,
+ &.fa-address-book-o,
+ &.fa-list,
+ &.fa-list-ul,
+ &.fa-eye,
+ &.fa-eye-slash,
+ &.fa-pencil,
+ &.fa-trash,
+ &.fa-play,
+ &.fa-external-link,
+ &.fa-retweet,
+ &.fa-link,
+ &.fa-pause,
+ &.fa-volume-up,
+ &.fa-volume-off,
+ &.fa-expand,
+ &.fa-download,
+ &.fa-arrows-alt,
+ &.fa-compress,
+ &.fa-user-times,
+ &.fa-check,
+ &.fa-quote-right {
+ font-family: "Material Icons";
+ }
+}
+
+.fa {
+ &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
+ &.fa-globe::before { content: "public" }
+ &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
+ &.fa-sign-out::before { content: "exit_to_app" }
+ &.fa-search::before { content: "search" }
+ &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
+ &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
+ &.fa-paperclip::before { content: "attach_file" }
+ &.fa-tasks::before { content: "poll" }
+ &.fa-plus::before { content: "add" }
+ &.fa-unlock::before { content: "lock_open" }
+ &.fa-lock::before { content: "lock" }
+ &.fa-envelope::before { content: "mail" }
+ &.fa-home::before { content: "home" }
+ &.fa-bullhorn::before { content: "announcement" }
+ &.fa-sliders::before { content: "tune" }
+ &.fa-chevron-left::before { content: "arrow_back" }
+ &.fa-chevron-right::before { content: "arrow_forward" }
+ &.fa-reply::before { content: $reply-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-eraser::before { content: "clear_all" }
+ &.fa-users::before { content: "people" }
+ &.fa-file-text::before { content: "web" }
+ &.fa-user-plus::before { content: "person_add" }
+ &.fa-address-book::before { content: "explore" }
+ &.fa-address-book-o::before { content: "explore" }
+ &.fa-list::before { content: "list" }
+ &.fa-list-ul::before { content: "list" }
+ &.fa-eye::before { content: "visibility" }
+ &.fa-eye-slash::before { content : "visibility_off" }
+ &.fa-pencil::before { content: "create" }
+ &.fa-trash::before { content: "delete" }
+ &.fa-play::before { content: "play_arrow" }
+ &.fa-external-link::before { content: "open_in_new" }
+ &.fa-retweet::before { content: "repeat" }
+ &.fa-link::before { content: "link" }
+ &.fa-pause::before { content: "pause" }
+ &.fa-volume-up::before { content: "volume_up" }
+ &.fa-volume-off::before { content: "volume_off" }
+ &.fa-expand::before { content: "web_asset" }
+ &.fa-download::before { content: "file_download" }
+ &.fa-arrows-alt::before { content: "fullscreen" }
+ &.fa-compress::before { content: "fullscreen_exit" }
+ &.fa-user-times::before { content: "delete" }
+ &.fa-check::before { content: "check" }
+ &.fa-quote-right::before { content: "format_quote" }
+}
+
+// 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 { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+ height: 18px;
+ width: 18px;
+ transition: background-position .3s steps(1);
+ background-image: url('data:image/svg+xml;utf8,');
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/media.scss b/app/javascript/styles/material-v2-light/theme/media.scss
new file mode 100644
index 000000000..28de8db85
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/media.scss
@@ -0,0 +1,101 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery { border-radius: $card-radius }
+
+.media-modal__close {
+ align-content: center;
+
+ &.icon-button {
+ background: transparent;
+ color: $media-icon-color;
+ text-align: center !important;
+ font-size: 24px !important;
+ width: 48px !important;
+ height: 48px !important;
+ border: 12px;
+
+ &:hover {
+ background: $media-icon-background-hover-color;
+ color: $media-icon-hover-color;
+ }
+
+ .fa-fw { width: 24px }
+ }
+}
+
+.media-modal {
+ &__nav {
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+ height: 48px;
+ width: 48px;
+ margin: auto 16px;
+ padding: 8px;
+ border-radius: 50%;
+
+ .fa { width: 32px }
+ }
+
+ &__button {
+ background-color: $media-page-indicator-color;
+
+ &--active { background-color: $media-page-indicator-active-color }
+ }
+}
+
+.video-player {
+ &__controls {
+ background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+ padding: 0 12px;
+ }
+
+ &__seek {
+ &::before {
+ background: rgba(255,255,255,.2);
+ border-radius: 0;
+ }
+
+ &__buffer {
+ background: rgba(255,255,255,.4);
+ border-radius: 0;
+ }
+
+ &__progress {
+ background: $primary-color;
+ border-radius: 0;
+ }
+
+ &__handle {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__volume {
+ &::before {
+ background: rgba(255,255,255,.4);
+ border-radius: 0;
+ }
+
+ &__current {
+ background: $primary-color;
+ border-radius: 0;
+ }
+
+ &__handle {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__time-current { margin-left: 68px }
+
+ &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/mobile.scss b/app/javascript/styles/material-v2-light/theme/mobile.scss
new file mode 100644
index 000000000..ed6467ebc
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/mobile.scss
@@ -0,0 +1,58 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+ background: $top-bar-color;
+
+ &__link {
+ padding: 16px 16px 12px 16px;
+ color: $top-bar-icon-color;
+ border-bottom: 4px solid transparent;
+
+ &.active {
+ border-bottom: 4px solid $tab-indicator-active-color;
+ color: $tab-indicator-active-color;
+ }
+
+ .fa { font-size: 20px }
+
+ 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;
+
+ &:hover { background: $floating-action-button-hover-color }
+
+ &:active,
+ &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+ .column { margin: 0 !important }
+ .search__input { padding: 16px 46px }
+
+ .search__icon .fa {
+ top: 16px;
+ left: 16px;
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/modal.scss b/app/javascript/styles/material-v2-light/theme/modal.scss
new file mode 100644
index 000000000..287dcf804
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/modal.scss
@@ -0,0 +1,84 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $dialog-radius;
+ width: 280px;
+
+ &__container {
+ text-align: left;
+ padding: 24px;
+ }
+
+ &__action-bar {
+ justify-content: flex-end;
+ background: $card-background-color;
+ padding: 8px;
+ }
+}
+
+.actions-modal {
+ background: $card-background-color;
+ border-radius: $card-radius;
+
+ ul li:not(:empty) a {
+ color: $ui-text-color;
+ font-size: 16px;
+
+ &:hover {
+ background: $card-background-hover-color;
+ color: $ui-text-color;
+ }
+ }
+
+ .dropdown-menu__separator { border-bottom-color: $border-color }
+
+ .status {
+ background: $card-background-color;
+ border-bottom-color: $border-color;
+ padding-top: 12px;
+ padding-bottom: 12px;
+
+ &__avatar {
+ left: 12px;
+ top: 12px;
+ }
+ }
+}
+
+.report-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__target {
+ padding: 24px;
+ text-align: left;
+ font-weight: bold;
+ }
+
+ &__container {
+ border-top: none;
+ }
+
+ &__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/material-v2-light/theme/statuses.scss b/app/javascript/styles/material-v2-light/theme/statuses.scss
new file mode 100644
index 000000000..65b5fcc41
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+ padding: 12px 12px 12px 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 }
+ }
+
+ .status__content__spoiler-link {
+ background: transparent;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
+ }
+
+ &__spoiler-link {
+ border: 0;
+ color: $text-button-color;
+ }
+
+ &__read-more-button {
+ font-size: 14px;
+ color: $text-button-color;
+ border-radius: $button-radius;
+ padding: 4px 6px;
+
+ &:hover {
+ background: $text-button-hover-color;
+ text-decoration: none;
+ }
+
+ &:focus { background: $text-button-focus-color }
+ }
+ }
+
+ &__action-bar {
+ &__counter__label {
+ font-size: 14px;
+ color: $info-text-color;
+ }
+ }
+
+ &__prepend {
+ color: $secondary-text-color;
+ margin-left: 64px;
+
+ .status__display-name strong { color: $secondary-text-color }
+ }
+
+ &.status-direct:not(.read) {
+ background: transparent;
+ border-bottom-color: $border-color;
+ }
+}
+
+.status-card {
+ color: $icon-color;
+ border-color: $border-color;
+ outline: none;
+
+ &__image {
+ background: transparent;
+
+ &>.fa {
+ font-size: 26px;
+ }
+ }
+
+ &__title {
+ color: $primary-text-color;
+ margin-bottom: 6px;
+ }
+
+ &__description { color: $secondary-text-color }
+
+ &__actions {
+ &>div {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ }
+
+ button,
+ a {
+ color: $media-icon-color;
+ font-size: 20px;
+ }
+
+ a { bottom: auto }
+ }
+
+ &.compact {
+ border-color: $border-color;
+ outline: none;
+ background: transparent;
+
+ .status-card {
+ &__content { padding: 12px }
+ &__image { flex: 0 0 64px }
+ }
+
+ &:hover { background-color: transparent !important }
+ }
+
+ &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+ .status {
+ &__display-name { color: $primary-text-color }
+ &__relative-time { color: $info-text-color }
+ &__content { color: $primary-text-color }
+ }
+
+ .display-name { color: $secondary-text-color }
+ .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+ background: $card-background-color;
+ padding: 16px;
+
+ &__display-name {
+ color: $secondary-text-color;
+
+ strong { color: $primary-text-color }
+ }
+
+ &__meta {
+ margin-top: 16px;
+ color: $info-text-color;
+ }
+
+ &__action-bar {
+ background: $card-background-color;
+ border-top: none;
+ border-bottom: 1px solid $border-color;
+ padding: 12px 0;
+ }
+
+ &__button {
+ .icon-button { font-size: 20px !important }
+ }
+}
+
+// search user trends
+.display-name {
+ &__html { color: $primary-text-color !important }
+ &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/theme.scss b/app/javascript/styles/material-v2-light/theme/theme.scss
new file mode 100644
index 000000000..5b7daddf6
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/variables.scss b/app/javascript/styles/material-v2-light/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ 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..a78e9e34e
--- /dev/null
+++ b/app/javascript/styles/plus.scss
@@ -0,0 +1,3 @@
+@charset "UTF-8";
+
+@import 'plus/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/mastodon-dark.scss b/app/javascript/styles/plus/color/mastodon-dark.scss
new file mode 100644
index 000000000..de22c451b
--- /dev/null
+++ b/app/javascript/styles/plus/color/mastodon-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9baec8;
+$ui-text-color: #fff;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #606984;
+$tips-text-color: #6d7889;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4ea2df;
+$menu-text-color: #282c37;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #313543;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-color, 18%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #fff;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.7);
+$text-button-focus-color: transparentize($text-button-color, 0.6);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+
+// App bar color
+$top-bar-color: #313543;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: #d9e1e8;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/mastodon-light.scss b/app/javascript/styles/plus/color/mastodon-light.scss
new file mode 100644
index 000000000..134b18e10
--- /dev/null
+++ b/app/javascript/styles/plus/color/mastodon-light.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #217aba;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: darken($background-color, 4%);
+$icon-background-active-color: darken($background-color, 8%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: lighten($text-button-color, 36%);
+$text-button-focus-color: lighten($text-button-color, 30%);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: #ccd7e0;
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #ffffff;
+$search-bar-color: #d9e1e8;
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/plus-classic.scss b/app/javascript/styles/plus/color/plus-classic.scss
new file mode 100644
index 000000000..3e817cde4
--- /dev/null
+++ b/app/javascript/styles/plus/color/plus-classic.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v1-dark.scss b/app/javascript/styles/plus/color/v1-dark.scss
new file mode 100644
index 000000000..652ffe37e
--- /dev/null
+++ b/app/javascript/styles/plus/color/v1-dark.scss
@@ -0,0 +1,129 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($background-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-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v1-light.scss b/app/javascript/styles/plus/color/v1-light.scss
new file mode 100644
index 000000000..4000eead0
--- /dev/null
+++ b/app/javascript/styles/plus/color/v1-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v2-dark.scss b/app/javascript/styles/plus/color/v2-dark.scss
new file mode 100644
index 000000000..c990d6b1e
--- /dev/null
+++ b/app/javascript/styles/plus/color/v2-dark.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #272727;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v2-light.scss b/app/javascript/styles/plus/color/v2-light.scss
new file mode 100644
index 000000000..6fd1dea9e
--- /dev/null
+++ b/app/javascript/styles/plus/color/v2-light.scss
@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: #ffffff;
+$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
+$floating-action-button-active-color: darken($floating-action-button-color, 10%);
+$floating-action-button-icon-color: $secondary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($background-color, 30%);
+$scroll-bar-thumb-active-color: darken($background-color, 38%);
+
+// App bar color
+$top-bar-color: $background-color;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/custom_color.scss b/app/javascript/styles/plus/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/plus/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/plus/custom_config.scss b/app/javascript/styles/plus/custom_config.scss
new file mode 100644
index 000000000..cd403efed
--- /dev/null
+++ b/app/javascript/styles/plus/custom_config.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/plus-classic';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/custom_layout.scss b/app/javascript/styles/plus/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/plus/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/plus/icon_config.scss b/app/javascript/styles/plus/icon_config.scss
new file mode 100644
index 000000000..3274efde8
--- /dev/null
+++ b/app/javascript/styles/plus/icon_config.scss
@@ -0,0 +1,26 @@
+// 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
+
+
+// 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.
+@font-face {
+ font-family: "Material Icons";
+ src:
+ local("Material Icons"),
+ url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
+ //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
+ //url(".../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/layout/material-v1.scss b/app/javascript/styles/plus/layout/material-v1.scss
new file mode 100644
index 000000000..825deaf8c
--- /dev/null
+++ b/app/javascript/styles/plus/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@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;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 0;
+
+
+// Avater cropping settings
+$avater-radius: 50%; // Rounded cropping
+//$avater-radius: 2px // Material v1 square
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/layout/material-v2.scss b/app/javascript/styles/plus/layout/material-v2.scss
new file mode 100644
index 000000000..6c81dc3e4
--- /dev/null
+++ b/app/javascript/styles/plus/layout/material-v2.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+//$bar-radius: 8px;
+
+
+// Button radius settings
+$button-radius: 8px;
+
+
+// Card radius settings
+$card-radius: 8px;
+
+
+// Dialog radius settings
+$dialog-radius: 8px;
+
+
+// Menu radius settings
+$menu-radius: 8px;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 8px; // corner rounded
+//$nav-drawer-item-radius: 32px; // full rounded
+//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
+
+
+// Avater cropping settings
+$avater-radius: 50%; // Rounded cropping
+//$avater-radius: 8px // Material v2 square
+
+
+// Chip settings
+// If you want to use contained-chip, please comment out below.
+.reactions-bar__item {
+ background: $outlined-chip-color !important;
+ border: 1px solid $border-color !important;
+
+ &.active { background-color: $outlined-chip-selected-color !important }
+
+ &:hover { background: $outlined-chip-hover-color !important }
+}
+.relationship-tag,
+.account-role {
+ background: $outlined-chip-color !important;
+ border: 1px solid $border-color !important;
+}
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/loader.scss b/app/javascript/styles/plus/loader.scss
new file mode 100644
index 000000000..ab6ad96b5
--- /dev/null
+++ b/app/javascript/styles/plus/loader.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+
+@import '../application';
+
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+@import 'plugins/cards';
+@import 'plugins/dense';
+@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/cards.scss b/app/javascript/styles/plus/plugins/cards.scss
new file mode 100644
index 000000000..c134cbeeb
--- /dev/null
+++ b/app/javascript/styles/plus/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+ box-shadow: none !important;
+ margin: 2px 0 !important;
+ padding: 8px !important;
+
+ > .scrollable { background: $background-color }
+}
+
+.status {
+ border-bottom: 0;
+ border-radius: $card-radius;
+ background: $card-background-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-background-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/plus/plugins/dense.scss b/app/javascript/styles/plus/plugins/dense.scss
new file mode 100644
index 000000000..42417124b
--- /dev/null
+++ b/app/javascript/styles/plus/plugins/dense.scss
@@ -0,0 +1,63 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+ &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+ &__buttons { height: 48px }
+
+ &__button {
+ margin: 8px;
+ padding: 10px 8px;
+
+ .fa { vertical-align: text-top }
+ }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 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 }
+}
+
+.status {
+ padding: 8px 8px 8px 66px;
+
+ &__expand { width: 66px }
+
+ &__info { padding-right: 0 }
+
+ &__avatar {
+ left: 8px;
+ top: 10px;
+ }
+
+ &__content { padding-top: 2px }
+}
+
+.detailed-status {
+ padding: 14px;
+
+ &__meta { margin-top: 14px }
+
+ &__action-bar { padding: 10px 0 }
+}
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/plus.scss b/app/javascript/styles/plus/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/plus/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+ background: #eeeeee;
+ width: 28px !important;
+ height: 28px !important;
+
+ .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { 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/plus/theme/_functions.scss b/app/javascript/styles/plus/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/plus/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@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/plus/theme/_mixins.scss b/app/javascript/styles/plus/theme/_mixins.scss
new file mode 100644
index 000000000..5f573e339
--- /dev/null
+++ b/app/javascript/styles/plus/theme/_mixins.scss
@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+
+$shadow-color-1: rgba(0,0,0,.2);
+$shadow-color-2: rgba(0,0,0,.14);
+$shadow-color-3: rgba(0,0,0,.12);
+
+@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
+@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
+@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
+@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
+@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
+@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
+@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
+@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
+@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
+@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
+@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
+@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
+@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
+@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
+@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
+@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
+
+@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
diff --git a/app/javascript/styles/plus/theme/account.scss b/app/javascript/styles/plus/theme/account.scss
new file mode 100644
index 000000000..44d68d1e9
--- /dev/null
+++ b/app/javascript/styles/plus/theme/account.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+ border-bottom: 1px solid $border-color;
+
+ .account__display-name { color: $primary-text-color }
+ .account__display-name strong { color: $secondary-text-color }
+
+ &__avatar {
+ border-radius: $avater-radius;
+ width: 40px;
+ height: 40px;
+
+ &-overlay {
+ &-base {
+ border-radius: 50%;
+ width: 44px;
+ height: 44px;
+ background-size: 44px;
+ }
+
+ &-overlay { border-radius: $avater-radius }
+ }
+ }
+
+ &__header {
+ &__bar {
+ background: $card-background-color;
+ padding: 8px;
+ border-bottom: 1px solid $border-color;
+
+ .avatar .account__avatar { border: none }
+ }
+
+ &__tabs {
+ padding: 8px;
+
+ &__name {
+ padding: 8px;
+
+ h1 {
+ color: $primary-text-color;
+
+ small { color: $secondary-text-color }
+ }
+ }
+
+ &__buttons {
+ .icon-button {
+ border: none;
+ border-radius: 50%;
+ padding: 0;
+ }
+ }
+ }
+
+ &__extra {
+ margin-top: 0;
+
+ &__links {
+ color: $secondary-text-color;
+ padding: 10px 0;
+
+ a {
+ color: $secondary-text-color;
+ padding: 4px 12px;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+
+ &__bio {
+ margin: 0;
+
+ .account__header {
+ &__content {
+ color: $primary-text-color;
+ padding: 8px;
+ }
+
+ &__fields {
+ border: 1px solid $border-color;
+ border-radius: 4px;
+
+ .verified {
+ border: none;
+ background: $verified-background-color;
+
+ a,
+ &__mark { color: $primary-text-color }
+ }
+
+ dl {
+ border-bottom: 1px solid $border-color;
+
+ &:first-child .verified { border-radius: 0 }
+
+ &:last-child { border-bottom: 0 }
+ }
+
+ dt {
+ color: $primary-text-color;
+ background: $list-background-inactive-color;
+ }
+
+ dd { color: $primary-text-color }
+ }
+ }
+ }
+ }
+
+ &__section-headline {
+ background: $text-tab-background-color;
+ border-bottom: 1px solid $border-color;
+
+ a {
+ padding: 16px 0;
+ color: $text-tab-indicator-color;
+
+ &.active {
+ color: $text-tab-indicator-active-color;
+ border-bottom: 4px solid $text-tab-indicator-active-color;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $text-tab-indicator-background-focus-color }
+ }
+
+ &:hover { background: $text-tab-indicator-background-hover-color }
+ }
+ }
+}
+
+.account-role {
+ padding: 4px 8px;
+ border-radius: 17px;
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/base_config.scss b/app/javascript/styles/plus/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/plus/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../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__input:hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+}*/
+
+
+// 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
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/basics.scss b/app/javascript/styles/plus/theme/basics.scss
new file mode 100644
index 000000000..4c122d1c6
--- /dev/null
+++ b/app/javascript/styles/plus/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+body { background: $background-color }
+
+// Chrome & Safari scroll bar
+::-webkit-scrollbar-thumb {
+ background: $scroll-bar-thumb-color;
+
+ &:hover { background: $scroll-bar-thumb-hover-color }
+ &:active { background: $scroll-bar-thumb-active-color }
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track:hover,
+::-webkit-scrollbar-track:active {
+ background: transparent !important;
+}
+
+// Firefox scroll bar
+html {
+ scrollbar-color: $scroll-bar-thumb-color transparent;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/button.scss b/app/javascript/styles/plus/theme/button.scss
new file mode 100644
index 000000000..1231bac98
--- /dev/null
+++ b/app/javascript/styles/plus/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+
+ &.active {
+ color: $icon-button-active-color;
+
+ &:hover { color: $icon-button-active-hover-color }
+ }
+
+ &.disabled { color: $disabled-icon-color }
+
+ &.inverted {
+ color: $icon-button-color;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-background-hover-color;
+ }
+ }
+
+ &.overlayed {
+ border-radius: 50%;
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+
+ &:hover {
+ background: $media-icon-background-color;
+ color: $media-icon-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-background-hover-color;
+ }
+
+ &:active,
+ &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+ font-size: 12px;
+
+ &:hover {
+ background-color: $icon-background-hover-color;
+ color: $icon-button-hover-color;
+ }
+}
+
+.button,
+.button:active,
+.button:focus {
+ background-color: $contained-button-color;
+ border-radius: $button-radius;
+}
+
+.button:hover {
+ @include shadow-2dp;
+ background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+ background: $contained-button-color;
+ margin: 2px;
+
+ &:hover { background: $contained-button-hover-color }
+
+ .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.confirmation-modal__cancel-button {
+ box-shadow: none;
+ background-color: transparent;
+ margin: 0 8px;
+ color: $text-button-color;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
+}
+
+.spoiler-button__overlay__label {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/columns.scss b/app/javascript/styles/plus/theme/columns.scss
new file mode 100644
index 000000000..a6892adf2
--- /dev/null
+++ b/app/javascript/styles/plus/theme/columns.scss
@@ -0,0 +1,502 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 10px 8px;
+ border-radius: $card-radius;
+
+ &>.scrollable { background: $list-background-color }
+
+ &:last-child { box-shadow: none }
+}
+
+.column-header {
+ background: $top-bar-color;
+ border-radius: $bar-radius;
+
+ > button {
+ padding: 16px 0 16px 16px;
+ color: $top-bar-text-color;
+ }
+
+ &>.column-header__back-button { color: $top-bar-icon-color }
+
+ &.active {
+ .column-header__icon {
+ color: $top-bar-unread-icon-color;
+ text-shadow: none;
+ }
+ }
+
+ &__icon {
+ margin-right: 16px;
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ }
+
+ &__buttons { height: 56px }
+
+ &__button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ margin: 8px 10px;
+ padding: 10px 12px;
+ border-radius: 50%;
+
+ &.active {
+ color: $top-bar-icon-active-color;
+ background: $icon-background-active-color;
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &__setting-btn {
+ color: $icon-button-color;
+ padding: 8px 0;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ text-decoration: none;
+ }
+
+ .fa { font-size: 20px }
+
+ span { vertical-align: middle }
+ }
+
+ &__setting-arrows {
+ font-size: 16px;
+ border-bottom: 8px;
+
+ .column-header__setting-btn {
+ padding: 8px;
+ border-radius: 50%;
+
+ &:last-child { padding-right: 8px }
+ }
+ }
+
+ &__wrapper {
+ @include shadow-4dp;
+ border-radius: $bar-radius;
+
+ .announcements { border-top: 1px solid $border-color }
+
+ &.active {
+ @include shadow-4dp;
+
+ &::before { background: transparent }
+ }
+ }
+
+ &__collapsible {
+ color: $ui-text-color;
+ background: $card-background-color;
+ border-top: 1px solid $border-color;
+
+ &-inner {
+ background: $card-background-color;
+ padding: 16px;
+ }
+
+ &.collapsed { border-top: none }
+ }
+
+ &__back-button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 8px;
+ margin: auto 0;
+ border-radius: 50%;
+
+ span { display: none }
+ }
+}
+
+.column-subheading {
+ color: $section-text-color;
+ background: $background-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+}
+
+.column-link {
+ color: $ui-text-color;
+ background: $background-color;
+ padding: 16px;
+ border-radius: $nav-drawer-item-radius;
+
+ &:hover { background: $list-background-hover-color }
+
+ &:active,
+ &:focus { background: $list-background-active-color }
+
+ &__icon {
+ margin-right: 32px;
+ font-size: 20px;
+ }
+
+ &--transparent {
+ &.active {
+ color: $ui-text-color;
+ background: $menu-background-active-color;
+
+ &:hover { background: $menu-background-active-hover-color }
+
+ .fa { color: $icon-color }
+ }
+
+ &:hover {
+ color: $ui-text-color;
+
+ .fa { color: $icon-color }
+ }
+ }
+
+ .fa { color: $icon-color }
+}
+
+.column-settings {
+ &__section {
+ color: $section-text-color;
+ margin-bottom: 0;
+ margin-top: 8px;
+ }
+
+ &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 16px;
+
+ span { visibility: hidden } // hide "back" string
+}
+
+.column-inline-form {
+ padding: 16px 0 16px 16px;
+ background: $card-background-color;
+
+ .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+ color: $primary-text-color;
+ background: $search-bar-color;
+ border-radius: $bar-radius;
+
+ &::placeholder { color: $tips-text-color }
+
+ &:focus {
+ @include shadow-1dp;
+ background: $search-bar-focus-color;
+ }
+}
+
+.empty-column-indicator {
+ color: $secondary-text-color;
+ background: $card-background-color;
+ font-size: 16px;
+}
+
+.conversation {
+ border-bottom: 1px solid $border-color;
+ padding: 12px;
+ background: $list-background-inactive-color;
+
+ &--unread {
+ background: $list-background-color;
+
+ .conversation__content__relative-time { color: $info-text-color }
+ }
+
+ &__unread { background: $primary-color }
+
+ &__avatar { padding: 0 16px 0 0 }
+
+ &__content {
+ padding: 0;
+
+ &__relative-time {
+ font-size: 14px;
+ color: $info-text-color;
+ }
+
+ &__names,
+ &__names a {
+ color: $primary-text-color;
+ font-size: 16px;
+ }
+ }
+}
+
+// read status in notification column
+.muted {
+ .status {
+ &__content {
+ color: $read-primary-text-color;
+
+ p { color: $read-primary-text-color }
+
+ a { color: $read-secondary-text-color }
+ }
+
+ &__display-name strong { color: $read-primary-text-color }
+ }
+
+ .poll {
+ color: $read-primary-text-color;
+
+ &__chart {
+ background: $read-poll-bar-color;
+
+ &.leading { background: $read-poll-bar-leading-color }
+ }
+
+ &__footer,
+ &__link { color: $read-ui-text-color }
+ }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+ color: $icon-color;
+ padding: 16px;
+
+ &:hover { background: $menu-background-hover-color }
+}
+
+.getting-started {
+ background: $background-color;
+ color: $ui-text-color;
+
+ &__wrapper {
+ background: $background-color;
+ height: auto !important;
+ border-bottom: 1px solid $border-color;
+ }
+
+ &__footer {
+ padding: 16px;
+
+ p {
+ color: $secondary-text-color;
+ font-size: 12px;
+ margin-bottom: 16px;
+ }
+
+ a { color: $ui-text-color }
+
+ p a { color: $link-text-color }
+ }
+
+ &__trends {
+ background: $background-color;
+ margin-bottom: 0;
+
+ h4 {
+ color: $section-text-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+ border-bottom: none;
+ }
+ }
+}
+
+.trends {
+ &__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-background-color;
+ padding: 0;
+
+ &__container { color: $primary-text-color }
+
+ &__item {
+ padding: 16px;
+ font-size: 16px;
+
+ &__unread { background: $badge-color }
+ }
+
+ &__pagination { color: $ui-text-color }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.reactions-bar {
+ .emoji-button {
+ color: $icon-button-color;
+ font-size: 20px;
+
+ &:hover { color: $icon-button-hover-color }
+
+ &:active { color: $icon-button-active-color }
+ }
+
+ &__item {
+ background: $contained-chip-color;
+ border-radius: 17px;
+ margin: 2px 4px;
+
+ &.active {
+ background-color: $contained-chip-selected-color;
+ .reactions-bar__item__count { color: $ui-text-color }
+ }
+
+ &__emoji {
+ width: 24px;
+ height: 24px;
+ margin: 4px 0 4px 2px;
+ }
+
+ &__count {
+ font-size: 16px;
+ margin: 0 8px;
+ color: $secondary-text-color;
+ }
+
+ &:hover { background: $contained-chip-hover-color }
+ }
+}
+
+.notification {
+ &__filter-bar {
+ background: $tab-background-color;
+ border-bottom: 1px solid $border-color;
+ z-index: 1;
+
+ button {
+ background: $tab-background-color;
+ color: $tab-indicator-color;
+ font-size: 16px;
+
+ span { font-size: 14px }
+
+ &.active {
+ color: $tab-indicator-active-color;
+ border-bottom: 4px solid $tab-indicator-active-color;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $tab-indicator-background-focus-color }
+ }
+
+ &:hover { background: $tab-indicator-background-hover-color }
+ }
+ }
+
+ &__message {
+ color: $secondary-text-color;
+ margin: 0 16px 0 70px;
+ font-size: 16px;
+ }
+
+ &__display-name:hover { color: inherit }
+}
+
+.notification-favourite .status.status-direct {
+ .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+ font-size: 12px;
+ border-radius: 17px;
+ padding: 4px 8px;
+ opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
+
+.focusable {
+ &:focus { background: $card-background-color }
+}
+
+// single column mode
+@media screen and (min-width: 415px) {
+ .tabs-bar {
+ margin-bottom: 0;
+
+ &__wrapper { padding-top: 0 }
+ }
+
+ .columns-area__panels__main {
+ @include shadow-1dp;
+ padding: 0;
+ margin: 12px 12px 0;
+ }
+}
+
+@media screen and (min-width: 631px) {
+ .tabs-bar__link {
+ &:hover {
+ background: $tab-indicator-background-hover-color;
+ border-bottom-color: $tab-background-color;
+ }
+
+ &:active,
+ &:focus {
+ background: $tab-indicator-background-focus-color;
+ border-bottom-color: $tab-background-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/components.scss b/app/javascript/styles/plus/theme/components.scss
new file mode 100644
index 000000000..4f844229c
--- /dev/null
+++ b/app/javascript/styles/plus/theme/components.scss
@@ -0,0 +1,394 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.drawer {
+ &__header {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ border-radius: $nav-bar-radius;
+ justify-content: space-around;
+
+ a { transition: none }
+
+ a:hover {
+ background: $icon-background-hover-color;
+ border-radius: 50%;
+ }
+ }
+
+ &__tab {
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ margin: 10px auto 10px;
+ padding: 8px;
+ flex: none;
+ height: 20px;
+ width: 20px;
+ border-bottom: none;
+ text-align: justify;
+
+ &:hover { color: $top-bar-icon-hover-color }
+ }
+
+ &__pager {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ }
+
+ &__inner {
+ background: $card-background-color;
+
+ &.darker {
+ background: $card-background-color;
+ position: inherit;
+ }
+
+ &__mastodon { background: $card-background-color }
+ }
+}
+
+.search {
+ &__input {
+ background: $search-bar-color;
+ color: $tips-text-color;
+ border-radius: $search-bar-radius;
+ padding: 12px 12px 12px 40px;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ color: $search-bar-text-color;
+ }
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__icon {
+ .fa {
+ color: $icon-color;
+ font-size: 20px;
+ top: 12px;
+ right: unset;
+ left: 12px;
+ height: 6px;
+ transition: none;
+
+ &.active { opacity: 1 }
+
+ &-search {
+ transform: none;
+ opacity: 1;
+ }
+ &-times-circle.active {
+ right: 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-background-color;
+ padding: 16px;
+
+ .fa { margin-right: 8px }
+ }
+
+ &__section {
+ h5 {
+ background: $card-background-color;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
+ color: $section-text-color;
+
+ .fa { margin-right: 8px }
+ }
+ }
+}
+
+.navigation-bar {
+ color: $secondary-text-color;
+ padding: 14px;
+
+ strong {
+ color: $ui-text-color;
+ }
+}
+
+.navigation-panel hr {
+ border-top: 1px solid $border-color;
+ margin: 8px 0;
+}
+
+.dropdown-menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ padding: 8px 0;
+ border-radius: $menu-radius;
+
+ &__arrow { visibility: hidden }
+
+ &__item a {
+ font-size: 14px;
+ padding: 8px 16px;
+ background: $menu-background-color;
+ color: $menu-text-color;
+
+ &:hover, &:active {
+ background: $menu-background-hover-color;
+ color: $menu-text-color;
+ }
+ }
+
+ &__separator {
+ margin: 8px 0;
+ border-bottom: 1px solid $border-color;
+ }
+}
+
+.compose-form {
+ .autosuggest-textarea {
+ &__textarea {
+ background: $card-background-color;
+ color: $ui-text-color;
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__suggestions {
+ @include shadow-1dp;
+ background: $menu-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+ font-size: 16px;
+ padding: 8px 0;
+
+ &__item {
+ padding: 8px;
+ border-radius: 0;
+
+ &:hover { background: $menu-background-hover-color }
+
+ &.selected,
+ &:focus,
+ &:active { background: $menu-background-active-color }
+ }
+ }
+ }
+
+ .spoiler-input__input {
+ color: $ui-text-color;
+ background: $card-background-color;
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ .compose-form {
+ &__warning {
+ @include shadow-1dp;
+ color: $secondary-text-color;
+ background: $card-background-color;
+ padding: 16px;
+
+ a { color: $link-text-color }
+ }
+
+ &__modifiers {
+ background: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__buttons-wrapper {
+ background: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__poll-wrapper {
+ border-top: 1px solid $border-color;
+
+ ul { padding: 12px }
+
+ select {
+ color: $ui-text-color;
+ background-color: $background-color;
+ border: 0;
+
+ &:focus { border-color: $border-active-color }
+ }
+
+ .button.button-secondary {
+ box-shadow: none;
+ color: $outlined-button-color;
+ border-color: $outlined-button-color;
+
+ &:hover { background-color: $outlined-button-hover-color }
+
+ &:active { background-color: $outlined-button-active-color }
+
+ &:focus { background-color: $outlined-button-color }
+
+
+ }
+ }
+
+ &__utilBtns { padding-top: 0 }
+
+ &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+ }
+}
+
+.no-reduce-motion .spoiler-input {
+ transition-duration: .2s, .2s;
+}
+
+
+.poll {
+ &__input {
+ border: 2px solid $control-border-color;
+ width: 20px;
+ height: 20px;
+ flex: 0 0 20px;
+ }
+
+ &__text input[type=text] {
+ color: $ui-text-color;
+ background: $background-color;
+ border: 1px solid $border-color;
+ padding: 8px 12px;
+
+ &:focus { border-color: $border-active-color }
+ }
+
+ &__chart {
+ border-radius: 0;
+ background: $poll-bar-color;
+
+ &.leading { background: $poll-bar-leading-color }
+ }
+
+ &__footer {
+ padding-top: 8px;
+ padding-bottom: 0;
+ color: $ui-text-color;
+ }
+
+ &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+ &.active .privacy-dropdown__value.active {
+ background: $icon-background-hover-color;
+ border-radius: 50%;
+ box-shadow: none;
+
+ .icon-button { color: $icon-button-active-color }
+ }
+
+ &__dropdown {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $dialog-radius;
+ }
+
+ &__option {
+ color: $icon-color;
+ padding: 8px 16px;
+
+ &__icon {
+ font-size: 20px;
+ margin-right: 12px;
+ }
+
+ &__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+
+ &.active {
+ background: $menu-background-active-color;
+ color: $icon-hover-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+
+ &:hover {
+ background: $menu-background-active-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+
+ &:hover {
+ background: $menu-background-hover-color;
+ color: $icon-hover-color;
+
+ .privacy-dropdown__option__content {
+ color: $secondary-text-color;
+
+ strong { color: $ui-text-color }
+ }
+ }
+ }
+}
+
+.character-counter {
+ color: $secondary-text-color;
+}
+
+.reply-indicator {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ background: $card-background-color;
+ padding: 16px;
+
+ &__header { margin-bottom: 4px }
+
+ &__display {
+ &-name {
+ color: $primary-text-color;
+ padding-right: 24px;
+ }
+
+ &-avatar { margin-right: 8px }
+ }
+
+ &__content { color: $primary-text-color }
+}
+
+.attachment-list {
+ &__list a { color: $secondary-text-color }
+
+ &.compact .fa { color: $icon-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/control.scss b/app/javascript/styles/plus/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/plus/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+ width: 36px;
+ height: 16px;
+ border-radius: 15px;
+
+ &-track {
+ background-color: $toggle-track-color;
+ margin: 4px;
+ width: 36px;
+ height: 16px;
+
+ &-check { visibility: hidden }
+ &-x { visibility: hidden }
+ }
+
+ &-thumb {
+ @include shadow-1dp;
+ width: 20px;
+ height: 20px;
+ border: 0;
+ background-color: $toggle-thumb-color;
+ }
+
+ &--checked {
+ .react-toggle{
+ &-track { background-color: $toggle-track-active-color }
+
+ &-thumb {
+ background-color: $toggle-thumb-active-color;
+ left: 22px;
+ }
+ }
+
+ &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+ }
+
+ &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+ padding: 8px 0;
+
+ &__input {
+ border: 2px solid $border-color;
+
+ &.checked {
+ border-color: $icon-button-active-color;
+ background: $icon-button-active-color;
+ padding: 3px;
+ background-clip: content-box;
+ }
+ }
+}
+
+.compose-form__sensitive-button .checkbox {
+ border: 2px solid $border-color;
+ border-radius: 2px;
+
+ &.active {
+ border-color: $primary-color;
+ background: $primary-color;
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/emoji-picker.scss b/app/javascript/styles/plus/theme/emoji-picker.scss
new file mode 100644
index 000000000..70e22752d
--- /dev/null
+++ b/app/javascript/styles/plus/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+ &__menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $menu-radius;
+ }
+
+ &__modifiers__menu {
+ @include shadow-8dp;
+ background: $menu-background-color;
+ border-radius: $menu-radius;
+
+ button {
+ padding: 8px;
+ }
+ }
+}
+
+.emoji-mart {
+ width: 388px !important;
+ font-size: 14px;
+ color: $menu-text-color;
+
+ &-bar {
+ border: 0 solid $border-color;
+
+ &:first-child {
+ background: $menu-background-color;
+ }
+ }
+
+ &-anchors {
+ color: $icon-button-color;
+ padding: 0;
+ }
+
+ &-anchor {
+ padding: 10px 4px;
+
+ &-selected {
+ color: $icon-button-active-color;
+ }
+
+ &-bar {
+ background-color: $tab-indicator-active-color;
+ }
+
+ &:hover {
+ color: $icon-button-hover-color;
+ }
+ }
+
+ &-search {
+ background: $menu-background-color;
+
+ input {
+ outline: none;
+ padding: 8px;
+ background: $search-bar-color;
+ color: $ui-text-color;
+ border: 0;
+ border-radius: $search-bar-radius;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ }
+ }
+ }
+
+ &-scroll {
+ padding: 0 8px 8px;
+ background: $menu-background-color;
+ }
+
+ &-category-label span {
+ padding: 4px 6px;
+ background: $menu-background-color;
+ }
+
+ &-emoji:hover::before {
+ background-color: $icon-background-hover-color;
+ }
+
+ &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/icons.scss b/app/javascript/styles/plus/theme/icons.scss
new file mode 100644
index 000000000..1367647ec
--- /dev/null
+++ b/app/javascript/styles/plus/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+ &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub } // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle } // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+ font-size: 20px;
+ margin-right: 16px;
+}
+
+.icon-with-badge__badge {
+ background: $badge-color;
+ border: none;
+ padding: 2px 6px;
+ border-radius: 12px;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/material-icons.scss b/app/javascript/styles/plus/theme/material-icons.scss
new file mode 100644
index 000000000..51631eab5
--- /dev/null
+++ b/app/javascript/styles/plus/theme/material-icons.scss
@@ -0,0 +1,156 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.fa {
+ &.fa-bars,
+ &.fa-navicon,
+ &.fa-reorder,
+ &.fa-globe,
+ &.fa-cog,
+ &.fa-cogs,
+ &.fa-gears,
+ &.fa-sign-out,
+ &.fa-search,
+ &.fa-times,
+ &.fa-times-circle,
+ &.fa-close,
+ &.fa-remove,
+ &.fa-chevron-down,
+ &.fa-ellipsis-v,
+ &.fa-paperclip,
+ &.fa-tasks,
+ &.fa-plus,
+ &.fa-unlock,
+ &.fa-lock,
+ &.fa-envelope,
+ &.fa-home,
+ &.fa-bullhorn,
+ &.fa-sliders,
+ &.fa-chevron-left,
+ &.fa-chevron-right,
+ &.fa-reply,
+ &.fa-reply-all,
+ &.fa-share-alt,
+ &.fa-star,
+ &.fa-bookmark,
+ &.fa-ellipsis-h,
+ &.fa-bell,
+ &.fa-eraser,
+ &.fa-users,
+ &.fa-file-text,
+ &.fa-user-plus,
+ &.fa-address-book,
+ &.fa-address-book-o,
+ &.fa-list,
+ &.fa-list-ul,
+ &.fa-eye,
+ &.fa-eye-slash,
+ &.fa-pencil,
+ &.fa-trash,
+ &.fa-play,
+ &.fa-external-link,
+ &.fa-retweet,
+ &.fa-link,
+ &.fa-pause,
+ &.fa-volume-up,
+ &.fa-volume-off,
+ &.fa-expand,
+ &.fa-download,
+ &.fa-arrows-alt,
+ &.fa-compress,
+ &.fa-user-times,
+ &.fa-check,
+ &.fa-quote-right {
+ font-family: "Material Icons";
+ }
+}
+
+.fa {
+ &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
+ &.fa-globe::before { content: "public" }
+ &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
+ &.fa-sign-out::before { content: "exit_to_app" }
+ &.fa-search::before { content: "search" }
+ &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
+ &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
+ &.fa-paperclip::before { content: "attach_file" }
+ &.fa-tasks::before { content: "poll" }
+ &.fa-plus::before { content: "add" }
+ &.fa-unlock::before { content: "lock_open" }
+ &.fa-lock::before { content: "lock" }
+ &.fa-envelope::before { content: "mail" }
+ &.fa-home::before { content: "home" }
+ &.fa-bullhorn::before { content: "announcement" }
+ &.fa-sliders::before { content: "tune" }
+ &.fa-chevron-left::before { content: "arrow_back" }
+ &.fa-chevron-right::before { content: "arrow_forward" }
+ &.fa-reply::before { content: $reply-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-eraser::before { content: "clear_all" }
+ &.fa-users::before { content: "people" }
+ &.fa-file-text::before { content: "web" }
+ &.fa-user-plus::before { content: "person_add" }
+ &.fa-address-book::before { content: "explore" }
+ &.fa-address-book-o::before { content: "explore" }
+ &.fa-list::before { content: "list" }
+ &.fa-list-ul::before { content: "list" }
+ &.fa-eye::before { content: "visibility" }
+ &.fa-eye-slash::before { content : "visibility_off" }
+ &.fa-pencil::before { content: "create" }
+ &.fa-trash::before { content: "delete" }
+ &.fa-play::before { content: "play_arrow" }
+ &.fa-external-link::before { content: "open_in_new" }
+ &.fa-retweet::before { content: "repeat" }
+ &.fa-link::before { content: "link" }
+ &.fa-pause::before { content: "pause" }
+ &.fa-volume-up::before { content: "volume_up" }
+ &.fa-volume-off::before { content: "volume_off" }
+ &.fa-expand::before { content: "web_asset" }
+ &.fa-download::before { content: "file_download" }
+ &.fa-arrows-alt::before { content: "fullscreen" }
+ &.fa-compress::before { content: "fullscreen_exit" }
+ &.fa-user-times::before { content: "delete" }
+ &.fa-check::before { content: "check" }
+ &.fa-quote-right::before { content: "format_quote" }
+}
+
+// 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 { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+ height: 18px;
+ width: 18px;
+ transition: background-position .3s steps(1);
+ background-image: url('data:image/svg+xml;utf8,');
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/media.scss b/app/javascript/styles/plus/theme/media.scss
new file mode 100644
index 000000000..28de8db85
--- /dev/null
+++ b/app/javascript/styles/plus/theme/media.scss
@@ -0,0 +1,101 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery { border-radius: $card-radius }
+
+.media-modal__close {
+ align-content: center;
+
+ &.icon-button {
+ background: transparent;
+ color: $media-icon-color;
+ text-align: center !important;
+ font-size: 24px !important;
+ width: 48px !important;
+ height: 48px !important;
+ border: 12px;
+
+ &:hover {
+ background: $media-icon-background-hover-color;
+ color: $media-icon-hover-color;
+ }
+
+ .fa-fw { width: 24px }
+ }
+}
+
+.media-modal {
+ &__nav {
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+ height: 48px;
+ width: 48px;
+ margin: auto 16px;
+ padding: 8px;
+ border-radius: 50%;
+
+ .fa { width: 32px }
+ }
+
+ &__button {
+ background-color: $media-page-indicator-color;
+
+ &--active { background-color: $media-page-indicator-active-color }
+ }
+}
+
+.video-player {
+ &__controls {
+ background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+ padding: 0 12px;
+ }
+
+ &__seek {
+ &::before {
+ background: rgba(255,255,255,.2);
+ border-radius: 0;
+ }
+
+ &__buffer {
+ background: rgba(255,255,255,.4);
+ border-radius: 0;
+ }
+
+ &__progress {
+ background: $primary-color;
+ border-radius: 0;
+ }
+
+ &__handle {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__volume {
+ &::before {
+ background: rgba(255,255,255,.4);
+ border-radius: 0;
+ }
+
+ &__current {
+ background: $primary-color;
+ border-radius: 0;
+ }
+
+ &__handle {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__time-current { margin-left: 68px }
+
+ &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/mobile.scss b/app/javascript/styles/plus/theme/mobile.scss
new file mode 100644
index 000000000..ed6467ebc
--- /dev/null
+++ b/app/javascript/styles/plus/theme/mobile.scss
@@ -0,0 +1,58 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+ background: $top-bar-color;
+
+ &__link {
+ padding: 16px 16px 12px 16px;
+ color: $top-bar-icon-color;
+ border-bottom: 4px solid transparent;
+
+ &.active {
+ border-bottom: 4px solid $tab-indicator-active-color;
+ color: $tab-indicator-active-color;
+ }
+
+ .fa { font-size: 20px }
+
+ 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;
+
+ &:hover { background: $floating-action-button-hover-color }
+
+ &:active,
+ &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+ .column { margin: 0 !important }
+ .search__input { padding: 16px 46px }
+
+ .search__icon .fa {
+ top: 16px;
+ left: 16px;
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/modal.scss b/app/javascript/styles/plus/theme/modal.scss
new file mode 100644
index 000000000..287dcf804
--- /dev/null
+++ b/app/javascript/styles/plus/theme/modal.scss
@@ -0,0 +1,84 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $dialog-radius;
+ width: 280px;
+
+ &__container {
+ text-align: left;
+ padding: 24px;
+ }
+
+ &__action-bar {
+ justify-content: flex-end;
+ background: $card-background-color;
+ padding: 8px;
+ }
+}
+
+.actions-modal {
+ background: $card-background-color;
+ border-radius: $card-radius;
+
+ ul li:not(:empty) a {
+ color: $ui-text-color;
+ font-size: 16px;
+
+ &:hover {
+ background: $card-background-hover-color;
+ color: $ui-text-color;
+ }
+ }
+
+ .dropdown-menu__separator { border-bottom-color: $border-color }
+
+ .status {
+ background: $card-background-color;
+ border-bottom-color: $border-color;
+ padding-top: 12px;
+ padding-bottom: 12px;
+
+ &__avatar {
+ left: 12px;
+ top: 12px;
+ }
+ }
+}
+
+.report-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__target {
+ padding: 24px;
+ text-align: left;
+ font-weight: bold;
+ }
+
+ &__container {
+ border-top: none;
+ }
+
+ &__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/plus/theme/statuses.scss b/app/javascript/styles/plus/theme/statuses.scss
new file mode 100644
index 000000000..65b5fcc41
--- /dev/null
+++ b/app/javascript/styles/plus/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+ padding: 12px 12px 12px 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 }
+ }
+
+ .status__content__spoiler-link {
+ background: transparent;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
+ }
+
+ &__spoiler-link {
+ border: 0;
+ color: $text-button-color;
+ }
+
+ &__read-more-button {
+ font-size: 14px;
+ color: $text-button-color;
+ border-radius: $button-radius;
+ padding: 4px 6px;
+
+ &:hover {
+ background: $text-button-hover-color;
+ text-decoration: none;
+ }
+
+ &:focus { background: $text-button-focus-color }
+ }
+ }
+
+ &__action-bar {
+ &__counter__label {
+ font-size: 14px;
+ color: $info-text-color;
+ }
+ }
+
+ &__prepend {
+ color: $secondary-text-color;
+ margin-left: 64px;
+
+ .status__display-name strong { color: $secondary-text-color }
+ }
+
+ &.status-direct:not(.read) {
+ background: transparent;
+ border-bottom-color: $border-color;
+ }
+}
+
+.status-card {
+ color: $icon-color;
+ border-color: $border-color;
+ outline: none;
+
+ &__image {
+ background: transparent;
+
+ &>.fa {
+ font-size: 26px;
+ }
+ }
+
+ &__title {
+ color: $primary-text-color;
+ margin-bottom: 6px;
+ }
+
+ &__description { color: $secondary-text-color }
+
+ &__actions {
+ &>div {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ }
+
+ button,
+ a {
+ color: $media-icon-color;
+ font-size: 20px;
+ }
+
+ a { bottom: auto }
+ }
+
+ &.compact {
+ border-color: $border-color;
+ outline: none;
+ background: transparent;
+
+ .status-card {
+ &__content { padding: 12px }
+ &__image { flex: 0 0 64px }
+ }
+
+ &:hover { background-color: transparent !important }
+ }
+
+ &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+ .status {
+ &__display-name { color: $primary-text-color }
+ &__relative-time { color: $info-text-color }
+ &__content { color: $primary-text-color }
+ }
+
+ .display-name { color: $secondary-text-color }
+ .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+ background: $card-background-color;
+ padding: 16px;
+
+ &__display-name {
+ color: $secondary-text-color;
+
+ strong { color: $primary-text-color }
+ }
+
+ &__meta {
+ margin-top: 16px;
+ color: $info-text-color;
+ }
+
+ &__action-bar {
+ background: $card-background-color;
+ border-top: none;
+ border-bottom: 1px solid $border-color;
+ padding: 12px 0;
+ }
+
+ &__button {
+ .icon-button { font-size: 20px !important }
+ }
+}
+
+// search user trends
+.display-name {
+ &__html { color: $primary-text-color !important }
+ &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/theme.scss b/app/javascript/styles/plus/theme/theme.scss
new file mode 100644
index 000000000..5b7daddf6
--- /dev/null
+++ b/app/javascript/styles/plus/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/variables.scss b/app/javascript/styles/plus/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/plus/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 5e42bce4a..e8393484d 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1249,6 +1249,7 @@ en:
material-v2-light: Material v2 (Light)
mastodon-material-dark: Mastodon Material (Dark)
mastodon-material-light: Mastodon Material (Light)
+ plus: Plus
time:
formats:
default: "%b %d, %Y, %H:%M"
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index 17c44ab69..9c7aeaa68 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -1231,6 +1231,7 @@ ja:
material-v2-light: Material v2 (ライト)
mastodon-material-dark: Mastodon Material (ダーク)
mastodon-material-light: Mastodon Material (ライト)
+ plus: Plus
time:
formats:
default: "%Y年%m月%d日 %H:%M"
diff --git a/config/themes.yml b/config/themes.yml
index cfd4d16fa..17945f652 100644
--- a/config/themes.yml
+++ b/config/themes.yml
@@ -9,3 +9,4 @@ material-v2-dark: styles/material-v2-dark.scss
material-v2-light: styles/material-v2-light.scss
mastodon-material-dark: styles/mastodon-material-dark.scss
mastodon-material-light: styles/mastodon-material-light.scss
+plus: styles/plus.scss