diff --git a/app/javascript/styles/mastodon-material-dark.scss b/app/javascript/styles/mastodon-material-dark.scss
index 889983ed4..84558ad33 100644
--- a/app/javascript/styles/mastodon-material-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark.scss
@@ -1,2 +1,2 @@
@import 'application';
-@import 'mastodon-material-dark/loader';
\ No newline at end of file
+@import 'mastodon-material/profiles/mastodon-material-dark/loader';
\ 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
deleted file mode 100644
index b2e6bf27a..000000000
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9baec8;
-$ui-text-color: #fff;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #606984;
-$tips-text-color: #6d7889;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4ea2df;
-$menu-text-color: #282c37;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #191b22;
-$menu-bg-color: #d9e1e8;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #313543;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #282c37;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #42485a;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #393f4f;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#42485a, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #9baec8;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-bg-hover-color: lighten($bg-color, 14%);
-$icon-bg-active-color: lighten($bg-color, 18%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #fff;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($primary-color, 18%);
-
-// Border color
-$border-color: #393f4f;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
-
-// App bar color
-$top-bar-color: #313543;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: #d9e1e8;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #1f232b;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
deleted file mode 100644
index 7e94b8de7..000000000
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #217aba;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #eff3f5;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($bg-color, 6%);
-$menu-bg-active-color: darken($bg-color, 10%);
-$menu-bg-active-hover-color: darken($bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #282c37;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: darken($bg-color, 4%);
-$icon-bg-active-color: darken($bg-color, 8%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: $primary-color;
-$toggle-track-active-color: lighten($primary-color, 26%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: #ccd7e0;
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #ffffff;
-$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: #282c37;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #e6ebf0;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
deleted file mode 100644
index d94bbe90f..000000000
--- a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #db4437;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
deleted file mode 100644
index d31fbf04f..000000000
--- a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #303030;
-$menu-bg-color: #424242;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #424242;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #424242;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
-
-// App bar color
-$top-bar-color: #1565C0;
-$search-bar-color: lighten($bg-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #424242;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
deleted file mode 100644
index 025b238f5..000000000
--- a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #121212;
-$menu-bg-color: #1e1e1e;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #1e1e1e;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #1e1e1e;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($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-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #1e1e1e;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/custom_color.scss b/app/javascript/styles/mastodon-material-dark/custom_color.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/mastodon-material-dark/custom_color.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@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
deleted file mode 100644
index 03e8e0c81..000000000
--- a/app/javascript/styles/mastodon-material-dark/custom_config.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@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
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/mastodon-material-dark/custom_layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ 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
deleted file mode 100644
index 23c9a0616..000000000
--- a/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 2px;
-
-
-// Search bar radius
-$search-bar-radius: 2px;
-
-
-// Bar radius settings
-$bar-radius: 0;
-
-
-// Button radius settings
-$button-radius: 2px;
-
-
-// Card radius settings
-$card-radius: 2px;
-
-
-// Dialog radius settings
-$dialog-radius: 2px;
-
-
-// Menu radius settings
-$menu-radius: 2px;
-
-
-// Media radius settings
-$media-radius: 0;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 0;
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 2px // Material v1 square
-
-
-// Chip settings
-$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px;
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
deleted file mode 100644
index 5700a99c8..000000000
--- a/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 8px;
-//$nav-bar-radius: 28px; // full radius
-
-
-// Search bar radius
-$search-bar-radius: 8px;
-//$search-bar-radius: 21px; // full rounded
-
-
-// Bar radius settings
-$bar-radius: 0;
-//$bar-radius: 8px;
-
-
-// Button radius settings
-$button-radius: 8px;
-
-
-// Card radius settings
-$card-radius: 8px;
-
-
-// Dialog radius settings
-$dialog-radius: 8px;
-
-
-// Menu radius settings
-$menu-radius: 8px;
-
-
-// Media radius settings
-$media-radius: 0;
-//$media-radius: 2px;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 8px; // corner rounded
-//$nav-drawer-item-radius: 32px; // full rounded
-//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 8px // Material v2 square
-
-
-// Chip settings
-$outlined-chip: true; // Material v2 styled outlined chip
-//$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: false; // Material v2 styled colored button without shadow
-//$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px; // Regular
-//$fab-size: 40px; // Mini
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
-//$text-area-border: outlined;
\ 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
deleted file mode 100644
index 1ddf9883f..000000000
--- a/app/javascript/styles/mastodon-material-dark/loader.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'theme/theme';
-@import 'theme/material-icons';
-
-// Plugins
-@import 'plugins/astarte';
-//@import 'plugins/cards';
-//@import 'plugins/dense';
-//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/cards.scss b/app/javascript/styles/mastodon-material-dark/plugins/cards.scss
deleted file mode 100644
index d9b3906a5..000000000
--- a/app/javascript/styles/mastodon-material-dark/plugins/cards.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@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: $bg-color }
-}
-
-.status {
- border-bottom: 0;
- border-radius: $card-radius;
- background: $card-bg-color;
-
- &__prepend { padding: 8px 8px 2px 0 }
-}
-
-.account { border-bottom: 0 !important }
-
-.status__wrapper.status__wrapper,
-.notification.notification {
- @include shadow-1dp;
- margin: 8px 2px;
- border-radius: $card-radius;
- background: $card-bg-color;
-}
-
-.notification .status__wrapper.status__wrapper { box-shadow: none !important }
-
-.notification__filter-bar {
- @include non-overflow-shadow-4dp;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/_functions.scss b/app/javascript/styles/mastodon-material-dark/theme/_functions.scss
deleted file mode 100644
index 0374231ed..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/_functions.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@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/theme/base_config.scss b/app/javascript/styles/mastodon-material-dark/theme/base_config.scss
deleted file mode 100644
index f36a139ba..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/base_config.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@charset "UTF-8";
-
-
-// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
-
-
-// Color scheme
-@import '../color/v1-light';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'color/v2-light';
-
-
-// Layout profile
-@import '../layout/material-v1';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'layout/material-v2';
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-$search-bar-hover: false;
-
-
-// Status font size in timeline
-$status-font-size: 15px; // mastodon default
-//$status-font-size: 16px; // compatible with material design
-
-
-// Name font size in timeline status
-$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
-
-
-// Background image
-// If you want to use the local image, please put it in "../"
-$bg-image: none;
-//$bg-image: "./image.png";
-//$bg-image: "https://example.com/img/image.png";
-
-
-// Columns transparency settings
-$bar-transparency: 1.0; // opacity
-//$bar-transparency: 0.8; // semi-transparent
-
-$column-transparency: 1.0; // opacity
-//$column-transparency: 0.8; // semi-transparent
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/basics.scss b/app/javascript/styles/mastodon-material-dark/theme/basics.scss
deleted file mode 100644
index bb8f68bf0..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/basics.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-body,
-body.embed { background: $bg-color }
-
-.focusable:focus { background: transparent }
-
-// Chrome & Safari scroll bar
-::-webkit-scrollbar-thumb {
- background: $scroll-bar-thumb-color;
-
- &:hover { background: $scroll-bar-thumb-hover-color }
- &:active { background: $scroll-bar-thumb-active-color }
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
- background: transparent !important;
-}
-
-// Firefox scroll bar
-html { scrollbar-color: $scroll-bar-thumb-color transparent }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/button.scss b/app/javascript/styles/mastodon-material-dark/theme/button.scss
deleted file mode 100644
index 5f909d843..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/button.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include button-shadow;
-
-.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;
-
- &.active { color: $icon-button-active-color }
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
- }
-
- &.overlayed {
- @include icon-button;
- border-radius: 50%;
- background: $media-icon-bg-color;
- color: $media-icon-color;
- padding: 4px;
- line-height: 20px !important;
-
- &:hover {
- background: $media-icon-bg-color;
- color: $media-icon-hover-color;
- }
- }
-
- &__counter {
- width: 16px;
- margin-left: 8px;
- }
-
- &:hover {
- @include material-transition;
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
-}
-
-// Checkbox with label
-label.icon-button {
- &.active {
- color: $ui-text-color;
- background-color: transparent;
- }
-
- &:hover {
- @include material-transition;
- background-color: transparent;
- }
-}
-
-.text-icon-button {
- color: $icon-button-color;
- border-radius: 50%;
- font-size: 14px;
-
- &.active {
- background-color: $icon-bg-hover-color;
- color: $icon-button-active-color;
- }
-
- &:hover {
- background-color: $icon-bg-hover-color;
- color: $icon-button-hover-color;
- }
-}
-
-.button {
- background-color: $contained-button-color;
- border-radius: $button-radius;
-
- &:active,
- &:focus {
- background-color: $contained-button-color;
- border-radius: $button-radius;
- }
-
- &:hover {
- @include shadow-2dp;
- background-color: $contained-button-hover-color;
- }
-
- &.logo-button {
- background: $contained-button-color;
- margin: 2px;
-
- &:hover { background: $contained-button-hover-color }
-
- .button--destructive:hover { background: $contained-button-hover-color }
- }
-
- &.button--block { margin: 8px 0 }
-
- &.button-secondary {
- color: $text-button-color;
- border: none;
- box-shadow: none;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
- }
-
- &.confirmation-modal__cancel-button {
- box-shadow: none;
- background-color: transparent;
- margin: 0 8px;
- color: $text-button-color;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
- }
-}
-
-.spoiler-button__overlay__label {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- color: $media-icon-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/columns.scss b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
deleted file mode 100644
index 77a5c777a..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/columns.scss
+++ /dev/null
@@ -1,511 +0,0 @@
-@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-bg-color;
- opacity: $column-transparency;
- }
-
- &:last-child { box-shadow: none }
-}
-
-.column-header {
- background: $top-bar-color;
- border-radius: $bar-radius;
- height: 56px;
-
- > button {
- padding: 16px;
- color: $top-bar-text-color;
- }
-
- &>.column-header__back-button { color: $top-bar-icon-color }
-
- &.active {
- .column-header__icon {
- color: $top-bar-unread-icon-color;
- text-shadow: none;
- }
- }
-
- &__icon {
- margin-right: 16px;
- color: $top-bar-icon-color;
- font-size: 20px;
- }
-
- &__buttons { height: 56px }
-
- &__button {
- @include icon-button;
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 8px;
- margin: 10px;
- border-radius: 50%;
- box-sizing: content-box;
-
- &.active {
- color: $top-bar-icon-active-color;
- background: $icon-bg-active-color;
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &__setting-btn {
- color: $icon-button-color;
- padding: 8px 0;
-
- &:hover {
- color: $icon-button-hover-color;
- text-decoration: none;
- }
-
- .fa { font-size: 20px }
-
- span { vertical-align: middle }
- }
-
- &__setting-arrows {
- font-size: 16px;
- border-bottom: 8px;
-
- .column-header__setting-btn {
- padding: 8px;
- border-radius: 50%;
-
- &:last-child { padding-right: 8px }
- }
- }
-
- &__wrapper {
- @include shadow-4dp;
- border-radius: $bar-radius;
- opacity: $bar-transparency;
-
- .announcements { border-top: 1px solid $border-color }
-
- &.active {
- @include shadow-4dp;
-
- &::before { background: transparent }
- }
- }
-
- &__collapsible {
- color: $ui-text-color;
- background: $card-bg-color;
- border-top: 1px solid $border-color;
-
- &-inner {
- background: $card-bg-color;
- padding: 16px;
- }
-
- &.collapsed { border-top: none }
- }
-
- &__back-button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- margin: 8px 10px;
- padding: 10px;
- font-size: 20px;
-
- span { display: none }
- }
-}
-
-.column-subheading {
- color: $section-text-color;
- background: $bg-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
-}
-
-.column-link {
- color: $ui-text-color;
- background: $bg-color;
- padding: 16px;
- border-radius: $nav-drawer-item-radius;
-
- &:hover { background: $list-bg-hover-color }
-
- &:active,
- &:focus { background: $list-bg-active-color }
-
- &__icon {
- margin-right: 32px;
- font-size: 20px;
- }
-
- &--transparent {
- &.active {
- color: $ui-text-color;
- background: $menu-bg-active-color;
-
- &:hover { background: $menu-bg-active-hover-color }
-
- .fa { color: $icon-color }
- }
-
- &:hover {
- color: $ui-text-color;
-
- .fa { color: $icon-color }
- }
- }
-
- .fa { color: $icon-color }
-}
-
-.column-settings {
- &__section {
- color: $section-text-color;
- margin-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
-
- &--slim-button { top: -54px }
-}
-
-.column-inline-form {
- padding: 16px 0 16px 16px;
- background: $card-bg-color;
-
- .icon-button { margin: 0 16px }
-}
-
-.columns-area {
- @include bg-image;
- background-size: contain;
-}
-
-.setting-text {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border-radius: $bar-radius;
-
- &::placeholder { color: $tips-text-color }
-}
-
-.empty-column-indicator {
- color: $secondary-text-color;
- background: $card-bg-color;
- font-size: 16px;
- contain: initial; // padding fix
-}
-
-.conversation {
- border-bottom: 1px solid $border-color;
- padding: 12px;
- background: $list-bg-inactive-color;
-
- &--unread {
- background: $list-bg-color;
-
- .conversation__content__relative-time { color: $info-text-color }
- }
-
- &__unread { background: $primary-color }
-
- &__avatar { padding: 0 16px 0 0 }
-
- &__content {
- padding: 0;
-
- &__relative-time {
- font-size: 14px;
- color: $info-text-color;
- }
-
- &__names,
- &__names a {
- color: $primary-text-color;
- font-size: 16px;
- }
- }
-}
-
-// read status in notification column
-.muted {
- .status {
- &__content {
- color: $read-primary-text-color;
-
- 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-bg-hover-color }
-}
-
-.getting-started {
- background: $bg-color;
- color: $ui-text-color;
- opacity: $column-transparency;
-
- &__wrapper {
- background: $bg-color;
- height: auto !important;
- padding-bottom: 8px;
- border-bottom: 1px solid $border-color;
- }
-
- &__footer {
- padding: 16px;
-
- p {
- color: $secondary-text-color;
- font-size: 12px;
- margin-bottom: 16px;
- }
-
- a { color: $ui-text-color }
-
- p a { color: $link-text-color }
- }
-
- &__trends {
- background: $bg-color;
- margin-bottom: 0;
- opacity: $column-transparency;
-
- h4 {
- color: $section-text-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
- border-bottom: none;
- }
- }
-}
-
-.trends {
- &__header {
- color: $section-text-color;
- background: transparent;
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .fa { margin-right: 8px }
- }
-
- &__item {
- padding: 16px;
- border-bottom: none;
-
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
- }
-
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
- }
- }
-}
-
-.setting-toggle {
- &__label {
- color: $ui-text-color;
- margin: 8px 8px 8px 14px;
- }
-}
-
-.announcements {
- background: $card-bg-color;
- padding: 0 8px;
-
- &__container { color: $primary-text-color }
-
- &__item {
- padding: 16px;
- font-size: 16px;
-
- &__unread { background: $badge-color }
- }
-
- &__pagination {
- color: $ui-text-color;
- padding: 16px;
- bottom: 0;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- margin: 0 4px;
- line-height: normal !important;
- box-sizing: content-box;
- }
-
- span { vertical-align: super }
- }
-}
-
-.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 }
-
-@include outlined-chip;
-
-.reactions-bar {
- margin-top: 16px;
- width: calc(100% - 72px);
-
- .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: $chip-selected-text-color }
-
- &:hover { background-color: $contained-chip-selected-color }
- }
-
- &__emoji {
- width: 24px;
- height: 24px;
- margin: 4px 0 4px 2px;
- }
-
- &__count {
- font-size: 16px;
- margin: 0 12px 0 8px;
- color: $secondary-text-color;
- }
-
- &:hover { background: $contained-chip-hover-color }
- }
-}
-
-.notification {
- &__filter-bar {
- background: $tab-bg-color;
- border-bottom: 1px solid $border-color;
- z-index: 1;
- opacity: $bar-transparency;
-
- button {
- background: $tab-bg-color;
- color: $tab-indicator-color;
- font-size: 16px;
-
- span { font-size: 14px }
-
- &.active {
- color: $tab-indicator-active-color;
- border-bottom: 4px solid $tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
- }
-
- &__message {
- color: $secondary-text-color;
- margin: 0 16px 0 70px;
- font-size: 16px;
- }
-
- &__display-name:hover { color: inherit }
-}
-
-.notification-favourite .status.status-direct {
- .icon-button.disabled { color: $disabled-icon-color }
-}
-
-.relationship-tag {
- color: $ui-text-color;
- background-color: $relationship-tag-color;
- font-size: 12px;
- border-radius: 17px;
- padding: 4px 8px;
- opacity: 1;
-}
-
-.attachment-list__list a { color: $secondary-text-color }
-
-// unread notification
-.notification.unread:before, .status__wrapper.unread:before { border-left: none }
-
-.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/components.scss b/app/javascript/styles/mastodon-material-dark/theme/components.scss
deleted file mode 100644
index aa64aabc5..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/components.scss
+++ /dev/null
@@ -1,647 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include text-area-border;
-
-.modal-root {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-
- &__overlay { background-color: rgba(0,0,0,.32) !important }
-
- &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
-}
-
-.drawer {
- &__header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- justify-content: space-around;
- opacity: $bar-transparency;
-
- a { transition: none }
-
- a:hover {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- }
- }
-
- &__tab {
- color: $top-bar-icon-color;
- font-size: 20px;
- margin: 10px auto 10px;
- padding: 8px;
- flex: none;
- height: 20px;
- width: 20px;
- border-bottom: none;
- text-align: justify;
-
- &:hover { color: $top-bar-icon-hover-color }
- }
-
- &__pager {
- @include shadow-1dp;
- border-radius: $card-radius;
- }
-
- &__inner {
- background: $card-bg-color;
- opacity: $column-transparency;
-
- &.darker {
- background: $card-bg-color;
- position: inherit;
- }
-
- &__mastodon { background: $card-bg-color }
- }
-}
-
-.search {
- &__input {
- background: $search-bar-color;
- color: $tips-text-color;
- border-radius: $search-bar-radius;
- padding: 12px 12px 12px 40px;
- opacity: $bar-transparency;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
-
- &:hover { @include search-bar-hover }
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__icon {
- .fa {
- color: $icon-color;
- font-size: 20px;
- top: 12px;
- right: unset;
- left: 12px;
- height: 6px;
- transition: none;
-
- &.active { opacity: 1 }
-
- &-search {
- transform: none;
- opacity: 1;
- }
- &-times-circle.active {
- right: 16px;
- left: unset;
- transform: none;
- }
- }
- }
-}
-
-.search-popout {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- border-radius: 0px $bar-radius;
- border-top: 1px solid $border-color;
- margin-top: 0;
- color: $tips-text-color;
-
- h4 {
- color: $secondary-text-color;
- }
-
- em {
- color: $search-bar-text-color;
- }
-}
-
-.search-results {
- &__header {
- color: $secondary-text-color;
- background-color: $card-bg-color;
- padding: 16px;
-
- .fa { margin-right: 16px }
- }
-
- &__section {
- h5 {
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- padding: 16px;
- color: $section-text-color;
-
- .fa { margin-right: 8px }
- }
- }
-}
-
-.navigation-bar {
- color: $secondary-text-color;
- padding: 14px;
-
- strong {
- color: $ui-text-color;
- }
-
- .navigation-bar__actions .compose__action-bar .icon-button {
- width: 36px !important;
- height: 36px !important;
- padding: 8px;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
-}
-
-.navigation-panel hr {
- border-top: 1px solid $border-color;
- margin: 8px 0;
-}
-
-.flex-spacer { margin: 8px 0 }
-
-.dropdown-menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- padding: 8px 0;
- border-radius: $menu-radius;
-
- &__arrow { visibility: hidden }
-
- &__item a {
- font-size: 14px;
- padding: 8px 16px;
- background: $menu-bg-color;
- color: $menu-text-color;
-
- &:hover, &:active {
- background: $menu-bg-hover-color;
- color: $menu-text-color;
- }
- }
-
- &__separator {
- margin: 8px 0;
- border-bottom: 1px solid $border-color;
- }
-}
-
-.compose-form {
- .autosuggest-textarea {
- &__textarea {
- background: $text-field-bg-color;
- color: $ui-text-color;
- padding: 8px 42px 8px 16px;
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__suggestions {
- @include shadow-1dp;
- background: $menu-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
- font-size: 16px;
- padding: 8px 0;
-
- &__item {
- padding: 8px;
- border-radius: 0;
-
- &:hover { background: $menu-bg-hover-color }
-
- &.selected,
- &:focus,
- &:active { background: $menu-bg-active-color }
- }
- }
- }
-
- .spoiler-input {
- &.spoiler-input--visible { margin-bottom: 16px }
-
- &__input {
- color: $ui-text-color;
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- border-radius: 0;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- .compose-form {
- &__warning {
- color: $secondary-text-color;
- background: $card-bg-color;
- padding: 16px;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- box-shadow: none;
-
- a { color: $link-text-color }
- }
-
- &__modifiers {
- background: $card-bg-color;
- color: $tips-text-color;
-
- .compose-form {
- &__upload-thumbnail { border-radius: 0 }
-
- &__upload__actions {
- @include material-transition;
-
- .icon-button {
- color: $media-icon-color;
- font-size: 16px;
-
- &:hover { background-color: transparent }
- }
- }
- }
- }
-
- &__buttons-wrapper {
- background: $card-bg-color;
- color: $tips-text-color;
- padding: 8px;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- }
-
- .text-icon-button {
- width: 20px !important;
- height: 20px !important;
- padding: 8px;
- line-height: 20px !important;
- }
- }
-
- &__poll-wrapper {
- border-top: 1px solid $border-color;
-
- ul { padding: 16px 12px 16px 0 }
-
- select {
- color: $ui-text-color;
- background-color: $bg-color;
- border: 0;
-
- &:focus { border-color: $border-hover-color }
- }
-
- .button.button-secondary {
- box-shadow: none;
- color: $text-button-color;
-
- &:hover { background-color: $text-button-hover-color }
-
- &:active,
- &:focus { background-color: $text-button-focus-color }
- }
-
- .poll__footer { border-top: none }
- }
-
- &__publish .compose-form__publish-button-wrapper { box-shadow: none }
- }
-}
-
-.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
-
-
-.poll {
- .button { margin-right: 8px }
-
- li { margin-bottom: 0 }
-
- &__input {
- border: none;
- width: 20px;
- height: 20px;
- flex: 0 0 20px;
- padding: 18px;
- margin: 0 2px;
- background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
-
- &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
-
- &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
-
- &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-
- &.checkbox {
- border-radius: 2px;
- border: 2px solid $control-border-color;
- padding: 8px;
- margin: 8px 10px;
- background: none;
- }
- }
-
- &__text input[type=text] {
- color: $ui-text-color;
- background: $text-field-bg-color;
- border: 1px solid $border-color;
- padding: 8px 12px;
-
- &:focus { border-color: $border-hover-color }
- }
-
- &__option {
- padding: 16px 0 8px;
-
- input[type=text] {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border: none;
- border-radius: 2px;
- padding: 8px 16px;
- }
-
- &__text { line-height: 34px }
- }
-
- &__chart {
- border-radius: 0;
- background: $progress-indicator-track-color;
-
- &.leading { background: $progress-indicator-color }
- }
-
- &__footer {
- padding-top: 8px;
- padding-bottom: 0;
- color: $ui-text-color;
- }
-
- &__link { color: $ui-text-color }
-}
-
-.privacy-dropdown {
- &.active .privacy-dropdown__value.active {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- box-shadow: none;
-
- .icon-button { color: $icon-button-active-color }
- }
-
- &__dropdown {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $dialog-radius;
- }
-
- &__option {
- color: $icon-color;
- padding: 8px 16px;
-
- &__icon {
- font-size: 20px;
- margin-right: 12px;
- }
-
- &__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &.active {
- background: $menu-bg-active-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &:hover {
- background: $menu-bg-active-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &:hover {
- background: $menu-bg-hover-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-}
-
-.character-counter {
- color: $secondary-text-color;
-}
-
-.reply-indicator {
- box-shadow: none;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- background: $card-bg-color;
- padding: 16px;
-
- &__header { margin-bottom: 4px }
-
- &__display {
- &-name {
- color: $primary-text-color;
- padding-right: 24px;
- }
-
- &-avatar { margin-right: 8px }
- }
-
- &__content {
- color: $primary-text-color;
-
- p { margin-bottom: 16px }
- }
-}
-
-.attachment-list {
- &__list a { color: $secondary-text-color }
-
- &.compact .fa { color: $icon-color }
-}
-
-.block-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.load-more {
- color: $ui-text-color;
-
- &:hover { background: transparent }
-}
-
-.autosuggest-hashtag {
- &__name { color: $menu-text-color }
-}
-
-.filter-form {
- background: $bg-color;
- color: $ui-text-color;
-
- &__column { padding: 8px 16px }
-}
-
-.directory {
- &__card {
- @include shadow-1dp;
- margin: 8px 4px;
- border-radius: $card-radius;
-
- &__img { border-radius: $card-radius $card-radius 0 0 }
-
- &__bar {
- background: $card-bg-color;
- padding: 8px 16px;
-
- .display-name {
- margin-left: 16px;
-
- strong {
- font-size: 16px;
- color: $primary-text-color;
- }
-
- span { color: $secondary-text-color }
- }
- }
-
- &__extra {
- background: $card-bg-color;
- border-radius: 0 0 $card-radius $card-radius;
-
- .account__header__content {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
- }
-
- .accounts-table__count { padding: 16px 0 }
- }
- }
-}
-
-.mute-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__explanation { margin-top: 16px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-
- .setting-toggle {
- margin-top: 16px;
- margin-bottom: 16px;
-
- &__label {
- color: $ui-text-color;
- margin: 0 0 0 12px;
- }
- }
-}
-
-.upload-progress {
- color: $ui-text-color;
-
- &__backdrop {
- border-radius: 0;
- background: $progress-indicator-track-color;
- margin-top: 6px;
- }
-
- &__tracker {
- border-radius: 0;
- background: $progress-indicator-color;
- }
-}
-
-.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/containers.scss b/app/javascript/styles/mastodon-material-dark/theme/containers.scss
deleted file mode 100644
index 09af289b0..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/containers.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.public-layout {
- .header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- margin: 16px 0;
-
- .brand:hover { background: $tab-indicator-bg-hover-color }
-
- .nav-link,
- .nav-link.optional {
- color: $top-bar-text-color;
-
- &:hover {
- background: $tab-indicator-bg-hover-color;
- text-decoration: none;
- }
- }
-
- .nav-button {
- background: transparent;
- margin: 0;
- border-radius: 0;
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
-
- .detailed-status__meta { margin-top: 16px }
- }
-
- .detailed-status { padding: 16px }
-
- .footer {
- padding-top: 16px;
- padding-bottom: 64px;
- color: $ui-text-color;
-
- h4 { color: $ui-text-color }
-
- ul a { color: $secondary-text-color }
-
- .grid .column-2 h4 a { color: $ui-text-color }
-
- .brand {
- svg { fill: $icon-color }
-
- &:hover svg { fill: $icon-hover-color }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/control.scss b/app/javascript/styles/mastodon-material-dark/theme/control.scss
deleted file mode 100644
index a205a4cb7..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/control.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@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/mastodon-material-dark/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
deleted file mode 100644
index 91663fb93..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@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-bg-color;
- border-radius: $menu-radius;
- }
-
- &__modifiers__menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $menu-radius;
-
- button {
- padding: 8px;
- }
- }
-}
-
-.emoji-mart {
- width: 388px !important;
- font-size: 14px;
- color: $menu-text-color;
-
- &-bar {
- border: 0 solid $border-color;
-
- &:first-child {
- background: $menu-bg-color;
- }
- }
-
- &-anchor {
- color: $text-tab-indicator-color;
- padding: 10px 4px;
-
- &-bar { background-color: $icon-tab-indicator-active-color }
-
- &-selected { color: $icon-tab-indicator-hover-color }
-
- &:hover { color: $icon-tab-indicator-hover-color }
- }
-
- &-search {
- background: $menu-bg-color;
-
- input {
- outline: none;
- padding: 8px;
- background: $search-bar-color;
- color: $ui-text-color;
- border: 0;
- border-radius: $search-bar-radius;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
- }
- }
-
- &-scroll {
- padding: 0 8px 8px;
- background: $menu-bg-color;
- }
-
- &-category {
- &-label span {
- padding: 4px 6px;
- background: $menu-bg-color;
- }
-
- .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
- }
-
- &-no-results { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
deleted file mode 100644
index dd01ce3d6..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config', '../icon_config';
-@import '../custom_color', '../custom_layout';
-@import 'functions';
-@import 'mixins';
-
-
-@include icon-font;
-
-.fa-fw {
- width: 20px;
- height: 20px;
- font-size: 20px;
-}
-
-.fa {
- &.fa-bars,
- &.fa-navicon,
- &.fa-reorder,
- &.fa-globe,
- &.fa-cog,
- &.fa-cogs,
- &.fa-gears,
- &.fa-sign-out,
- &.fa-search,
- &.fa-times,
- &.fa-times-circle,
- &.fa-close,
- &.fa-remove,
- &.fa-chevron-down,
- &.fa-ellipsis-v,
- &.fa-paperclip,
- &.fa-tasks,
- &.fa-plus,
- &.fa-unlock,
- &.fa-lock,
- &.fa-envelope,
- &.fa-home,
- &.fa-bullhorn,
- &.fa-sliders,
- &.fa-chevron-left,
- &.fa-chevron-right,
- &.fa-reply,
- &.fa-reply-all,
- &.fa-share-alt,
- &.fa-star,
- &.fa-bookmark,
- &.fa-ellipsis-h,
- &.fa-bell,
- &.fa-bell-o,
- &.fa-eraser,
- &.fa-users,
- &.fa-file-text,
- &.fa-user-plus,
- &.fa-address-book,
- &.fa-address-book-o,
- &.fa-list,
- &.fa-list-ul,
- &.fa-eye,
- &.fa-eye-slash,
- &.fa-pencil,
- &.fa-trash,
- &.fa-play,
- &.fa-external-link,
- &.fa-retweet,
- &.fa-link,
- &.fa-pause,
- &.fa-volume-up,
- &.fa-volume-off,
- &.fa-expand,
- &.fa-download,
- &.fa-arrows-alt,
- &.fa-compress,
- &.fa-user-times,
- &.fa-check,
- &.fa-quote-right,
- &.fa-upload,
- &.fa-comments,
- &.fa-angle-right,
- &.fa-thumb-tack {
- @include icon-font-style;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- }
-}
-
-.fa {
- &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
- &.fa-globe::before { content: "public" }
- &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
- &.fa-sign-out::before { content: "exit_to_app" }
- &.fa-search::before { content: "search" }
- &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
- &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
- &.fa-paperclip::before { content: "attach_file" }
- &.fa-tasks::before { content: "poll" }
- &.fa-plus::before { content: "add" }
- &.fa-unlock::before { content: "lock_open" }
- &.fa-lock::before { content: "lock" }
- &.fa-envelope::before { content: "mail" }
- &.fa-home::before { content: "home" }
- &.fa-bullhorn::before { content: "announcement" }
- &.fa-sliders::before { content: "tune" }
- &.fa-chevron-left::before { content: "arrow_back" }
- &.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: $reply-icon }
- &.fa-reply-all::before { content: "reply_all" }
- &.fa-share-alt::before { content: "share" }
- &.fa-star::before { content: $favorite-icon }
- &.fa-bookmark::before { content: "bookmark" }
- &.fa-ellipsis-h::before { content: "more_horiz" }
- &.fa-bell::before { content: "notifications" }
- &.fa-bell-o::before { content: "notifications" }
- &.fa-eraser::before { content: "clear_all" }
- &.fa-users::before { content: "people" }
- &.fa-file-text::before { content: "web" }
- &.fa-user-plus::before { content: "person_add" }
- &.fa-address-book::before { 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: "person_remove" }
- &.fa-check::before { content: "check" }
- &.fa-quote-right::before { content: "format_quote" }
- &.fa-upload::before { content: "file_upload" }
- &.fa-comments::before { content: "forum" }
- &.fa-angle-right::before { content: "chevron_right" }
- &.fa-thumb-tack::before { content: "push_pin" }
-}
-
-// 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
-button.icon-button i.fa-retweet {
- height: 20px;
- width: 20px;
- transition: none;
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,') }
-
-button.icon-button i.fa-retweet:hover,
-button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover,
-button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-// dropdown icon
-.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px}
-
-// icon in tab settings
-.text-btn.column-header__setting-btn {
- .fa {
- vertical-align: middle;
-
- &.fa-eraser { margin-right: 8px } // clear notification
- }
-}
-
-// top bar icons align
-.fa.fa-bell.column-header__icon.fa-fw,
-.fa.fa-home.column-header__icon.fa-fw,
-.fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw,
-.fa.fa-bars.column-header__icon.fa-fw,
-.fa.fa-bookmark.column-header__icon.fa-fw,
-.fa.fa-address-book-o.column-header__icon.fa-fw,
-.fa.fa-envelope.column-header__icon.fa-fw,
-.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
-
-// top bar icons in single column mode
-.tabs-bar__link {
- .fa.fa-home.fa-fw,
- .fa.fa-bell.fa-fw,
- .fa.fa-users.fa-fw,
- .fa.fa-globe.fa-fw { vertical-align: text-bottom }
-}
-
-// getting-started and side bar icons
-.column-link .fa,
-.column-link--transparent .fa { vertical-align: text-bottom }
-
-// uploaded media icons align
-.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
- font-size: 20px;
- vertical-align: text-bottom;
-}
-
-// search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
-
-// read more icon
-.status__content__read-more-button .fa { vertical-align: bottom }
-
-// Attachment icon
-.attachment-list__list a .fa { vertical-align: middle }
-
-// status detail icon
-.detailed-status .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
-
-// status scope
-.status__visibility-icon .fa,
-.account__header__tabs__name .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/media.scss b/app/javascript/styles/mastodon-material-dark/theme/media.scss
deleted file mode 100644
index b8ac12414..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/media.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.media-gallery {
- border-radius: $media-radius;
-
- &__item { border-radius: $media-radius }
-}
-
-.media-modal {
- &__nav {
- background: $media-icon-bg-color;
- color: $media-icon-color;
- height: 48px;
- width: 48px;
- margin: auto 16px;
- padding: 8px;
- border-radius: 50%;
-
- .fa { width: 32px }
- }
-
- &__button {
- background-color: $media-page-indicator-color;
-
- &--active { background-color: $media-page-indicator-active-color }
- }
-
- &__close {
- &.icon-button {
- background: transparent;
- color: $media-icon-color;
- font-size: 24px !important;
- width: 24px !important;
- height: 24px !important;
- padding: 8px;
- box-sizing: content-box;
- line-height: normal !important;
-
- &:hover {
- background: $media-icon-bg-hover-color;
- color: $media-icon-hover-color;
- }
-
- .fa-fw {
- width: 24px;
- height: 24px;
- }
- }
- }
-
- &__meta {
- bottom: 24px;
-
- a { color: $media-icon-color }
- }
-
- &__overlay {
- .picture-in-picture__footer .icon-button {
- color: $media-icon-color;
-
- &:active,
- &:focus,
- &:hover {
- color: $media-icon-hover-color;
- background-color: transparent;
- }
- }
- }
-}
-
-.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 {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__volume {
- &::before {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__current {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__time-current { margin-left: 68px }
-
- &__buttons button { font-size: 20px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/modal.scss b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
deleted file mode 100644
index 93e5b24c1..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/modal.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.confirmation-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $dialog-radius;
-
- &__container {
- text-align: left;
- padding: 24px;
- }
-
- &__action-bar {
- justify-content: flex-end;
- background: $card-bg-color;
- padding: 8px;
- }
-
- &__secondary-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.actions-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- border-radius: $card-radius;
-
- ul li:not(:empty) a {
- color: $ui-text-color;
- font-size: 16px;
-
- &:hover {
- background: $card-bg-hover-color;
- color: $ui-text-color;
- }
- }
-
- .dropdown-menu__separator { border-bottom-color: $border-color }
-
- .status {
- background: $card-bg-color;
- border-bottom-color: $border-color;
- padding-top: 12px;
- padding-bottom: 12px;
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
- }
-}
-
-.report-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__target {
- padding: 24px;
- text-align: left;
- font-weight: bold;
- }
-
- &__container {
- border-top: none;
- }
-
- &__comment {
- border-right: none;
-
- .setting-text-label { color: $ui-text-color }
- }
-}
-
-.embed-modal .embed-modal__container {
- padding: 0 24px 24px 24px;
-
- .hint {
- margin-bottom: 16px;
- color: $secondary-text-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/responsive.scss b/app/javascript/styles/mastodon-material-dark/theme/responsive.scss
deleted file mode 100644
index 8618f7ed7..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/responsive.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@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;
- width: $fab-size;
- height: $fab-size;
- bottom: 16px;
- right: 16px;
-
- &:hover { background: $floating-action-button-hover-color }
-
- &:active,
- &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
- .column { margin: 0 !important }
- .search__input { padding: 16px 46px }
-
- .search__icon {
- .fa {
- top: 16px;
- left: 16px;
- }
-
- .fa-times-circle.active { left: unset }
- }
-}
-
-// small size screen
-@media screen and (max-width: 415px) {
- .public-layout { padding-top: 64px }
-}
-
-// middle size screen
-@media screen and (min-width: 415px) {
- .tabs-bar {
- margin-bottom: 0;
-
- &__wrapper {
- padding-top: 0;
-
- .tabs-bar { margin-bottom: 0 }
- }
- }
-
- .columns-area__panels {
- &__main {
- @include shadow-1dp;
- padding: 0;
- }
-
- &__pane { padding: 0 16px }
- }
-}
-
-//single column mode
-@media screen and (min-width: 631px) {
- .tabs-bar__link {
- &:hover {
- background: $tab-indicator-bg-hover-color;
- border-bottom-color: transparent;
- }
-
- &:active,
- &:focus {
- background: $tab-indicator-bg-focus-color;
- border-bottom-color: $tab-bg-color;
- }
-
- &.active { border-bottom-color: $tab-indicator-active-color }
- }
-}
\ 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
deleted file mode 100644
index 367893682..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
-* Mastodon Material 0.2.1
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ 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
deleted file mode 100644
index 0b948881b..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@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-dark/theme/widgets.scss b/app/javascript/styles/mastodon-material-dark/theme/widgets.scss
deleted file mode 100644
index 4abdfbae9..000000000
--- a/app/javascript/styles/mastodon-material-dark/theme/widgets.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.hero-widget {
- @include shadow-2dp;
- margin-bottom: 16px;
-
- &__img {
- border-radius: $card-radius $card-radius 0 0;
- background: $card-bg-color;
-
- img { border-radius: $card-radius $card-radius 0 0 }
- }
-
- &__text {
- background: $card-bg-color;
- padding: 16px;
- color: $primary-text-color;
- border-radius: 0 0 $card-radius $card-radius;
- }
-}
-
-.endorsements-widget {
- padding-bottom: 8px;
- margin-bottom: 8px;
-}
-
-.trends-widget h4 { color: $section-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 5068d6386..9e1ac730e 100644
--- a/app/javascript/styles/mastodon-material-light.scss
+++ b/app/javascript/styles/mastodon-material-light.scss
@@ -1,2 +1,2 @@
@import 'application';
-@import 'mastodon-material-light/loader';
\ No newline at end of file
+@import 'mastodon-material/profiles/mastodon-material-light/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/black.scss b/app/javascript/styles/mastodon-material-light/color/black.scss
deleted file mode 100644
index 693caa813..000000000
--- a/app/javascript/styles/mastodon-material-light/color/black.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #000000;
-$menu-bg-color: #121212;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #121212;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #000000;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #1e1e1e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #121212;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #1e1e1e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #1e1e1e;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #121212;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
deleted file mode 100644
index 7e94b8de7..000000000
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #217aba;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #eff3f5;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($bg-color, 6%);
-$menu-bg-active-color: darken($bg-color, 10%);
-$menu-bg-active-hover-color: darken($bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #282c37;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: darken($bg-color, 4%);
-$icon-bg-active-color: darken($bg-color, 8%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: $primary-color;
-$toggle-track-active-color: lighten($primary-color, 26%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: #ccd7e0;
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #ffffff;
-$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: #282c37;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #e6ebf0;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
deleted file mode 100644
index d94bbe90f..000000000
--- a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #db4437;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v1-light.scss b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
deleted file mode 100644
index 2888e81b4..000000000
--- a/app/javascript/styles/mastodon-material-light/color/v1-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$top-bar-unread-icon-color: darken($primary-color, 30%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #2196f3;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
deleted file mode 100644
index 025b238f5..000000000
--- a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #121212;
-$menu-bg-color: #1e1e1e;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #1e1e1e;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #1e1e1e;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($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-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #1e1e1e;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v2-light.scss b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
deleted file mode 100644
index fd9469961..000000000
--- a/app/javascript/styles/mastodon-material-light/color/v2-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #ffffff;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: $bg-color;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: $bg-color;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
-$scroll-bar-thumb-active-color: darken($bg-color, 38%);
-
-// App bar color
-$top-bar-color: $bg-color;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/custom_color.scss b/app/javascript/styles/mastodon-material-light/custom_color.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/mastodon-material-light/custom_color.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@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
deleted file mode 100644
index cf51584fc..000000000
--- a/app/javascript/styles/mastodon-material-light/custom_config.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@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
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/mastodon-material-light/custom_layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/icon_config.scss b/app/javascript/styles/mastodon-material-light/icon_config.scss
deleted file mode 100644
index 99046e176..000000000
--- a/app/javascript/styles/mastodon-material-light/icon_config.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
-
-
-// Reply icon settings
-$reply-icon: "reply";
-//$reply-icon: "comment"; // blooming
-
-
-// Material Design Icon settings
-// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-//$icon-font-source: google; // Google Fonts
-//$icon-font-source: github; // GitHub
-$icon-font-source: self; // Self-hosting
-
-// Material Icon style settings
-$icon-font-style: filled;
-//$icon-font-style: outlined;
-//$icon-font-style: round;
-//$icon-font-style: sharp;
-//$icon-font-style: two-tone;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/layout/material-v2.scss b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
deleted file mode 100644
index 5700a99c8..000000000
--- a/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 8px;
-//$nav-bar-radius: 28px; // full radius
-
-
-// Search bar radius
-$search-bar-radius: 8px;
-//$search-bar-radius: 21px; // full rounded
-
-
-// Bar radius settings
-$bar-radius: 0;
-//$bar-radius: 8px;
-
-
-// Button radius settings
-$button-radius: 8px;
-
-
-// Card radius settings
-$card-radius: 8px;
-
-
-// Dialog radius settings
-$dialog-radius: 8px;
-
-
-// Menu radius settings
-$menu-radius: 8px;
-
-
-// Media radius settings
-$media-radius: 0;
-//$media-radius: 2px;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 8px; // corner rounded
-//$nav-drawer-item-radius: 32px; // full rounded
-//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 8px // Material v2 square
-
-
-// Chip settings
-$outlined-chip: true; // Material v2 styled outlined chip
-//$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: false; // Material v2 styled colored button without shadow
-//$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px; // Regular
-//$fab-size: 40px; // Mini
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
-//$text-area-border: outlined;
\ 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
deleted file mode 100644
index 1ddf9883f..000000000
--- a/app/javascript/styles/mastodon-material-light/loader.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'theme/theme';
-@import 'theme/material-icons';
-
-// Plugins
-@import 'plugins/astarte';
-//@import 'plugins/cards';
-//@import 'plugins/dense';
-//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/plugins/astarte.scss b/app/javascript/styles/mastodon-material-light/plugins/astarte.scss
deleted file mode 100644
index 8c2e534bb..000000000
--- a/app/javascript/styles/mastodon-material-light/plugins/astarte.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.announcements {
- li {
- padding: 8px 16px;
- background: $card-bg-color;
- border-radius: $card-radius;
- border: 1px solid $border-color;
- }
-
- &__icon {
- margin: 0;
- right: 16px;
- height: 20px;
-
- .icon-button {
- @include icon-button;
-
- &:hover { background: transparent }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/plugins/dense.scss b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
deleted file mode 100644
index 413336d04..000000000
--- a/app/javascript/styles/mastodon-material-light/plugins/dense.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.drawer {
- &__header { height: 48px }
-
- &__tab { margin: 6px auto 6px }
-}
-
-.column { margin: 10px 5px }
-
-.column-header {
- height: 48px;
-
- > button { padding: 12px 16px }
-
- &__buttons { height: 48px }
-
- &__button { margin: 6px }
-}
-
-.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 }
-
- &__buttons-wrapper {
- .icon-button,
- .text-icon-button { padding: 4px }
- }
- }
-}
-
-.status {
- padding: 8px 8px 4px 66px;
-
- &__expand { width: 66px }
-
- &__info { padding-right: 0 }
-
- &__avatar {
- left: 8px;
- top: 10px;
- }
-
- &__content { padding-top: 2px }
-
- &__action-bar-button {
- margin: 0 4px;
-
- &.icon-button { padding: 4px }
- }
-
- &__action-bar-dropdown {
- width: 28px !important;
- height: 28px !important;
- margin: 0 4px;
-
- .icon-button { padding: 4px }
- }
-}
-
-.detailed-status {
- padding: 14px;
-
- &__meta { margin-top: 14px }
-
- &__action-bar { padding: 10px 0 }
-}
-
-.reply-indicator { padding: 8px }
-
-.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/plugins/plus.scss b/app/javascript/styles/mastodon-material-light/plugins/plus.scss
deleted file mode 100644
index e356e937b..000000000
--- a/app/javascript/styles/mastodon-material-light/plugins/plus.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@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 }
-}
-
-// exception
-.media-modal__overlay .picture-in-picture__footer .icon-button,
-.status__action-bar-button.icon-button--with-counter { background: transparent }
-
-// favorite icon
-.star-icon.active,
-.star-icon.icon-button.active.activate,
-.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
-
-.notification__favourite-icon-wrapper {
- left: -34px;
-
- .star-icon {
- border-radius: 50%;
- width: 28px;
- height: 28px;
- vertical-align: baseline;
- font-size: 18px;
-
- &.fa-fw::before { vertical-align: middle }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/_mixins.scss b/app/javascript/styles/mastodon-material-light/theme/_mixins.scss
deleted file mode 100644
index fcd556f2b..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/_mixins.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-@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 shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
-@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
-@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
-@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
-@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
-@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
-@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
-@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
-
-@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
-
-@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
-
-@mixin search-bar-hover {
- @if $search-bar-hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- }
-}
-
-@mixin outlined-chip {
- @if $outlined-chip {
- .reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $outlined-chip-selected-border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
- }
- }
-}
-
-@mixin button-shadow {
- @if $button-shadow {
- .button,
- .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
- }
-}
-
-@mixin text-area-border {
- @if $text-area-border == underlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius $card-radius 0 0;
- border-bottom: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
- }
- }
-
- @if $text-area-border == outlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius;
- border: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus {
- border: 2px solid $border-active-color;
- padding: 7px 41px 7px 15px;
- }
- }
- }
-}
-
-@mixin icon-button {
- width: 20px !important;
- height: 20px !important;
- font-size: 20px !important;
-}
-
-// check background-image value
-@mixin bg-image {
- @if $bg-image == none {
- } @else { background-image: url($bg-image) }
-}
-
-
-@mixin icon-font-style {
- @if $icon-font-style == filled { font-family: "Material Icons" }
- @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
- @if $icon-font-style == round { font-family: "Material Icons Round" }
- @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
- @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
-}
-
-@mixin icon-font {
- @if $icon-font-source == github {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-
- @if $icon-font-source == google {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
- }
- }
- }
-
- @if $icon-font-source == self {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons"),
- url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/account.scss b/app/javascript/styles/mastodon-material-light/theme/account.scss
deleted file mode 100644
index 551b4f4a8..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/account.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.account {
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .account__display-name,
- .account__display-name strong { color: $primary-text-color }
-
- &__avatar {
- border-radius: $avater-radius;
- width: 40px;
- height: 40px;
-
- &-overlay {
- &-base {
- border-radius: $avater-radius;
- width: 44px;
- height: 44px;
- background-size: 44px;
- }
-
- &-overlay { border-radius: $avater-radius }
- }
- }
-
- &__avatar-wrapper {
- margin-left: 0;
- margin-right: 16px;
- }
-
- &__header {
- &__bar {
- background: $card-bg-color;
- padding: 8px;
- border-bottom: none;
-
- .avatar .account__avatar { border: none }
- }
-
- &__tabs {
- padding: 8px;
-
- &__name {
- padding: 8px;
-
- h1 {
- color: $primary-text-color;
-
- small { color: $secondary-text-color }
- }
- }
-
- &__buttons {
- .icon-button {
- @include icon-button;
- border: none;
- border-radius: 50%;
- padding: 8px;
- margin-left: 8px;
- }
- }
- }
-
- &__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-bg-color;
-
- a,
- &__mark { color: $primary-text-color }
- }
-
- dl {
- border-bottom: 1px solid $border-color;
-
- &:first-child .verified { border-radius: 0 }
-
- &:last-child { border-bottom: 0 }
- }
-
- dt {
- color: $primary-text-color;
- background: $list-bg-inactive-color;
- }
-
- dd { color: $primary-text-color }
- }
- }
- }
-
- &__account-note {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
-
- label {
- color: $ui-text-color;
- margin-bottom: 8px;
- }
-
- textarea {
- color: $primary-text-color;
- padding: 8px 16px;
- border-radius: 0;
-
- &:focus { background: transparent }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- &__content { color: $secondary-text-color }
- }
-
- &__section-headline {
- background: $text-tab-bg-color;
- border-bottom: 1px solid $border-color;
-
- a {
- padding: 16px 0;
- color: $text-tab-indicator-color;
-
- &.active {
- color: $text-tab-indicator-active-color;
- border-bottom: 4px solid $text-tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $text-tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $text-tab-indicator-bg-hover-color }
- }
- }
-
- &__relationship {
- padding: 0;
- height: auto;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-}
-
-.account-role {
- padding: 4px 8px;
- border-radius: 17px;
- color: $ui-text-color;
- background-color: $contained-chip-color;
-}
-
-.accounts-table__count {
- color: $ui-text-color;
-
- small { color: $secondary-text-color }
-}
-
-.account-gallery {
- &__item { border-radius: 0 }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/base_config.scss b/app/javascript/styles/mastodon-material-light/theme/base_config.scss
deleted file mode 100644
index f36a139ba..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/base_config.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@charset "UTF-8";
-
-
-// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
-
-
-// Color scheme
-@import '../color/v1-light';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'color/v2-light';
-
-
-// Layout profile
-@import '../layout/material-v1';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'layout/material-v2';
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-$search-bar-hover: false;
-
-
-// Status font size in timeline
-$status-font-size: 15px; // mastodon default
-//$status-font-size: 16px; // compatible with material design
-
-
-// Name font size in timeline status
-$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
-
-
-// Background image
-// If you want to use the local image, please put it in "../"
-$bg-image: none;
-//$bg-image: "./image.png";
-//$bg-image: "https://example.com/img/image.png";
-
-
-// Columns transparency settings
-$bar-transparency: 1.0; // opacity
-//$bar-transparency: 0.8; // semi-transparent
-
-$column-transparency: 1.0; // opacity
-//$column-transparency: 0.8; // semi-transparent
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/button.scss b/app/javascript/styles/mastodon-material-light/theme/button.scss
deleted file mode 100644
index 5f909d843..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/button.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include button-shadow;
-
-.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;
-
- &.active { color: $icon-button-active-color }
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
- }
-
- &.overlayed {
- @include icon-button;
- border-radius: 50%;
- background: $media-icon-bg-color;
- color: $media-icon-color;
- padding: 4px;
- line-height: 20px !important;
-
- &:hover {
- background: $media-icon-bg-color;
- color: $media-icon-hover-color;
- }
- }
-
- &__counter {
- width: 16px;
- margin-left: 8px;
- }
-
- &:hover {
- @include material-transition;
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
-}
-
-// Checkbox with label
-label.icon-button {
- &.active {
- color: $ui-text-color;
- background-color: transparent;
- }
-
- &:hover {
- @include material-transition;
- background-color: transparent;
- }
-}
-
-.text-icon-button {
- color: $icon-button-color;
- border-radius: 50%;
- font-size: 14px;
-
- &.active {
- background-color: $icon-bg-hover-color;
- color: $icon-button-active-color;
- }
-
- &:hover {
- background-color: $icon-bg-hover-color;
- color: $icon-button-hover-color;
- }
-}
-
-.button {
- background-color: $contained-button-color;
- border-radius: $button-radius;
-
- &:active,
- &:focus {
- background-color: $contained-button-color;
- border-radius: $button-radius;
- }
-
- &:hover {
- @include shadow-2dp;
- background-color: $contained-button-hover-color;
- }
-
- &.logo-button {
- background: $contained-button-color;
- margin: 2px;
-
- &:hover { background: $contained-button-hover-color }
-
- .button--destructive:hover { background: $contained-button-hover-color }
- }
-
- &.button--block { margin: 8px 0 }
-
- &.button-secondary {
- color: $text-button-color;
- border: none;
- box-shadow: none;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
- }
-
- &.confirmation-modal__cancel-button {
- box-shadow: none;
- background-color: transparent;
- margin: 0 8px;
- color: $text-button-color;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
- }
-}
-
-.spoiler-button__overlay__label {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- color: $media-icon-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/components.scss b/app/javascript/styles/mastodon-material-light/theme/components.scss
deleted file mode 100644
index aa64aabc5..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/components.scss
+++ /dev/null
@@ -1,647 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include text-area-border;
-
-.modal-root {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-
- &__overlay { background-color: rgba(0,0,0,.32) !important }
-
- &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
-}
-
-.drawer {
- &__header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- justify-content: space-around;
- opacity: $bar-transparency;
-
- a { transition: none }
-
- a:hover {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- }
- }
-
- &__tab {
- color: $top-bar-icon-color;
- font-size: 20px;
- margin: 10px auto 10px;
- padding: 8px;
- flex: none;
- height: 20px;
- width: 20px;
- border-bottom: none;
- text-align: justify;
-
- &:hover { color: $top-bar-icon-hover-color }
- }
-
- &__pager {
- @include shadow-1dp;
- border-radius: $card-radius;
- }
-
- &__inner {
- background: $card-bg-color;
- opacity: $column-transparency;
-
- &.darker {
- background: $card-bg-color;
- position: inherit;
- }
-
- &__mastodon { background: $card-bg-color }
- }
-}
-
-.search {
- &__input {
- background: $search-bar-color;
- color: $tips-text-color;
- border-radius: $search-bar-radius;
- padding: 12px 12px 12px 40px;
- opacity: $bar-transparency;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
-
- &:hover { @include search-bar-hover }
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__icon {
- .fa {
- color: $icon-color;
- font-size: 20px;
- top: 12px;
- right: unset;
- left: 12px;
- height: 6px;
- transition: none;
-
- &.active { opacity: 1 }
-
- &-search {
- transform: none;
- opacity: 1;
- }
- &-times-circle.active {
- right: 16px;
- left: unset;
- transform: none;
- }
- }
- }
-}
-
-.search-popout {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- border-radius: 0px $bar-radius;
- border-top: 1px solid $border-color;
- margin-top: 0;
- color: $tips-text-color;
-
- h4 {
- color: $secondary-text-color;
- }
-
- em {
- color: $search-bar-text-color;
- }
-}
-
-.search-results {
- &__header {
- color: $secondary-text-color;
- background-color: $card-bg-color;
- padding: 16px;
-
- .fa { margin-right: 16px }
- }
-
- &__section {
- h5 {
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- padding: 16px;
- color: $section-text-color;
-
- .fa { margin-right: 8px }
- }
- }
-}
-
-.navigation-bar {
- color: $secondary-text-color;
- padding: 14px;
-
- strong {
- color: $ui-text-color;
- }
-
- .navigation-bar__actions .compose__action-bar .icon-button {
- width: 36px !important;
- height: 36px !important;
- padding: 8px;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
-}
-
-.navigation-panel hr {
- border-top: 1px solid $border-color;
- margin: 8px 0;
-}
-
-.flex-spacer { margin: 8px 0 }
-
-.dropdown-menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- padding: 8px 0;
- border-radius: $menu-radius;
-
- &__arrow { visibility: hidden }
-
- &__item a {
- font-size: 14px;
- padding: 8px 16px;
- background: $menu-bg-color;
- color: $menu-text-color;
-
- &:hover, &:active {
- background: $menu-bg-hover-color;
- color: $menu-text-color;
- }
- }
-
- &__separator {
- margin: 8px 0;
- border-bottom: 1px solid $border-color;
- }
-}
-
-.compose-form {
- .autosuggest-textarea {
- &__textarea {
- background: $text-field-bg-color;
- color: $ui-text-color;
- padding: 8px 42px 8px 16px;
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__suggestions {
- @include shadow-1dp;
- background: $menu-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
- font-size: 16px;
- padding: 8px 0;
-
- &__item {
- padding: 8px;
- border-radius: 0;
-
- &:hover { background: $menu-bg-hover-color }
-
- &.selected,
- &:focus,
- &:active { background: $menu-bg-active-color }
- }
- }
- }
-
- .spoiler-input {
- &.spoiler-input--visible { margin-bottom: 16px }
-
- &__input {
- color: $ui-text-color;
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- border-radius: 0;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- .compose-form {
- &__warning {
- color: $secondary-text-color;
- background: $card-bg-color;
- padding: 16px;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- box-shadow: none;
-
- a { color: $link-text-color }
- }
-
- &__modifiers {
- background: $card-bg-color;
- color: $tips-text-color;
-
- .compose-form {
- &__upload-thumbnail { border-radius: 0 }
-
- &__upload__actions {
- @include material-transition;
-
- .icon-button {
- color: $media-icon-color;
- font-size: 16px;
-
- &:hover { background-color: transparent }
- }
- }
- }
- }
-
- &__buttons-wrapper {
- background: $card-bg-color;
- color: $tips-text-color;
- padding: 8px;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- }
-
- .text-icon-button {
- width: 20px !important;
- height: 20px !important;
- padding: 8px;
- line-height: 20px !important;
- }
- }
-
- &__poll-wrapper {
- border-top: 1px solid $border-color;
-
- ul { padding: 16px 12px 16px 0 }
-
- select {
- color: $ui-text-color;
- background-color: $bg-color;
- border: 0;
-
- &:focus { border-color: $border-hover-color }
- }
-
- .button.button-secondary {
- box-shadow: none;
- color: $text-button-color;
-
- &:hover { background-color: $text-button-hover-color }
-
- &:active,
- &:focus { background-color: $text-button-focus-color }
- }
-
- .poll__footer { border-top: none }
- }
-
- &__publish .compose-form__publish-button-wrapper { box-shadow: none }
- }
-}
-
-.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
-
-
-.poll {
- .button { margin-right: 8px }
-
- li { margin-bottom: 0 }
-
- &__input {
- border: none;
- width: 20px;
- height: 20px;
- flex: 0 0 20px;
- padding: 18px;
- margin: 0 2px;
- background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
-
- &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
-
- &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
-
- &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-
- &.checkbox {
- border-radius: 2px;
- border: 2px solid $control-border-color;
- padding: 8px;
- margin: 8px 10px;
- background: none;
- }
- }
-
- &__text input[type=text] {
- color: $ui-text-color;
- background: $text-field-bg-color;
- border: 1px solid $border-color;
- padding: 8px 12px;
-
- &:focus { border-color: $border-hover-color }
- }
-
- &__option {
- padding: 16px 0 8px;
-
- input[type=text] {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border: none;
- border-radius: 2px;
- padding: 8px 16px;
- }
-
- &__text { line-height: 34px }
- }
-
- &__chart {
- border-radius: 0;
- background: $progress-indicator-track-color;
-
- &.leading { background: $progress-indicator-color }
- }
-
- &__footer {
- padding-top: 8px;
- padding-bottom: 0;
- color: $ui-text-color;
- }
-
- &__link { color: $ui-text-color }
-}
-
-.privacy-dropdown {
- &.active .privacy-dropdown__value.active {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- box-shadow: none;
-
- .icon-button { color: $icon-button-active-color }
- }
-
- &__dropdown {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $dialog-radius;
- }
-
- &__option {
- color: $icon-color;
- padding: 8px 16px;
-
- &__icon {
- font-size: 20px;
- margin-right: 12px;
- }
-
- &__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &.active {
- background: $menu-bg-active-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &:hover {
- background: $menu-bg-active-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &:hover {
- background: $menu-bg-hover-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-}
-
-.character-counter {
- color: $secondary-text-color;
-}
-
-.reply-indicator {
- box-shadow: none;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- background: $card-bg-color;
- padding: 16px;
-
- &__header { margin-bottom: 4px }
-
- &__display {
- &-name {
- color: $primary-text-color;
- padding-right: 24px;
- }
-
- &-avatar { margin-right: 8px }
- }
-
- &__content {
- color: $primary-text-color;
-
- p { margin-bottom: 16px }
- }
-}
-
-.attachment-list {
- &__list a { color: $secondary-text-color }
-
- &.compact .fa { color: $icon-color }
-}
-
-.block-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.load-more {
- color: $ui-text-color;
-
- &:hover { background: transparent }
-}
-
-.autosuggest-hashtag {
- &__name { color: $menu-text-color }
-}
-
-.filter-form {
- background: $bg-color;
- color: $ui-text-color;
-
- &__column { padding: 8px 16px }
-}
-
-.directory {
- &__card {
- @include shadow-1dp;
- margin: 8px 4px;
- border-radius: $card-radius;
-
- &__img { border-radius: $card-radius $card-radius 0 0 }
-
- &__bar {
- background: $card-bg-color;
- padding: 8px 16px;
-
- .display-name {
- margin-left: 16px;
-
- strong {
- font-size: 16px;
- color: $primary-text-color;
- }
-
- span { color: $secondary-text-color }
- }
- }
-
- &__extra {
- background: $card-bg-color;
- border-radius: 0 0 $card-radius $card-radius;
-
- .account__header__content {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
- }
-
- .accounts-table__count { padding: 16px 0 }
- }
- }
-}
-
-.mute-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__explanation { margin-top: 16px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-
- .setting-toggle {
- margin-top: 16px;
- margin-bottom: 16px;
-
- &__label {
- color: $ui-text-color;
- margin: 0 0 0 12px;
- }
- }
-}
-
-.upload-progress {
- color: $ui-text-color;
-
- &__backdrop {
- border-radius: 0;
- background: $progress-indicator-track-color;
- margin-top: 6px;
- }
-
- &__tracker {
- border-radius: 0;
- background: $progress-indicator-color;
- }
-}
-
-.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/containers.scss b/app/javascript/styles/mastodon-material-light/theme/containers.scss
deleted file mode 100644
index 09af289b0..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/containers.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.public-layout {
- .header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- margin: 16px 0;
-
- .brand:hover { background: $tab-indicator-bg-hover-color }
-
- .nav-link,
- .nav-link.optional {
- color: $top-bar-text-color;
-
- &:hover {
- background: $tab-indicator-bg-hover-color;
- text-decoration: none;
- }
- }
-
- .nav-button {
- background: transparent;
- margin: 0;
- border-radius: 0;
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
-
- .detailed-status__meta { margin-top: 16px }
- }
-
- .detailed-status { padding: 16px }
-
- .footer {
- padding-top: 16px;
- padding-bottom: 64px;
- color: $ui-text-color;
-
- h4 { color: $ui-text-color }
-
- ul a { color: $secondary-text-color }
-
- .grid .column-2 h4 a { color: $ui-text-color }
-
- .brand {
- svg { fill: $icon-color }
-
- &:hover svg { fill: $icon-hover-color }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
deleted file mode 100644
index 91663fb93..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@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-bg-color;
- border-radius: $menu-radius;
- }
-
- &__modifiers__menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $menu-radius;
-
- button {
- padding: 8px;
- }
- }
-}
-
-.emoji-mart {
- width: 388px !important;
- font-size: 14px;
- color: $menu-text-color;
-
- &-bar {
- border: 0 solid $border-color;
-
- &:first-child {
- background: $menu-bg-color;
- }
- }
-
- &-anchor {
- color: $text-tab-indicator-color;
- padding: 10px 4px;
-
- &-bar { background-color: $icon-tab-indicator-active-color }
-
- &-selected { color: $icon-tab-indicator-hover-color }
-
- &:hover { color: $icon-tab-indicator-hover-color }
- }
-
- &-search {
- background: $menu-bg-color;
-
- input {
- outline: none;
- padding: 8px;
- background: $search-bar-color;
- color: $ui-text-color;
- border: 0;
- border-radius: $search-bar-radius;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
- }
- }
-
- &-scroll {
- padding: 0 8px 8px;
- background: $menu-bg-color;
- }
-
- &-category {
- &-label span {
- padding: 4px 6px;
- background: $menu-bg-color;
- }
-
- .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
- }
-
- &-no-results { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/icons.scss b/app/javascript/styles/mastodon-material-light/theme/icons.scss
deleted file mode 100644
index 987767544..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/icons.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@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.fa-lock { text-transform: none }
-
-.icon-with-badge__badge {
- background: $badge-color;
- border: none;
- padding: 2px 6px;
- border-radius: 12px;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
deleted file mode 100644
index dd01ce3d6..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config', '../icon_config';
-@import '../custom_color', '../custom_layout';
-@import 'functions';
-@import 'mixins';
-
-
-@include icon-font;
-
-.fa-fw {
- width: 20px;
- height: 20px;
- font-size: 20px;
-}
-
-.fa {
- &.fa-bars,
- &.fa-navicon,
- &.fa-reorder,
- &.fa-globe,
- &.fa-cog,
- &.fa-cogs,
- &.fa-gears,
- &.fa-sign-out,
- &.fa-search,
- &.fa-times,
- &.fa-times-circle,
- &.fa-close,
- &.fa-remove,
- &.fa-chevron-down,
- &.fa-ellipsis-v,
- &.fa-paperclip,
- &.fa-tasks,
- &.fa-plus,
- &.fa-unlock,
- &.fa-lock,
- &.fa-envelope,
- &.fa-home,
- &.fa-bullhorn,
- &.fa-sliders,
- &.fa-chevron-left,
- &.fa-chevron-right,
- &.fa-reply,
- &.fa-reply-all,
- &.fa-share-alt,
- &.fa-star,
- &.fa-bookmark,
- &.fa-ellipsis-h,
- &.fa-bell,
- &.fa-bell-o,
- &.fa-eraser,
- &.fa-users,
- &.fa-file-text,
- &.fa-user-plus,
- &.fa-address-book,
- &.fa-address-book-o,
- &.fa-list,
- &.fa-list-ul,
- &.fa-eye,
- &.fa-eye-slash,
- &.fa-pencil,
- &.fa-trash,
- &.fa-play,
- &.fa-external-link,
- &.fa-retweet,
- &.fa-link,
- &.fa-pause,
- &.fa-volume-up,
- &.fa-volume-off,
- &.fa-expand,
- &.fa-download,
- &.fa-arrows-alt,
- &.fa-compress,
- &.fa-user-times,
- &.fa-check,
- &.fa-quote-right,
- &.fa-upload,
- &.fa-comments,
- &.fa-angle-right,
- &.fa-thumb-tack {
- @include icon-font-style;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- }
-}
-
-.fa {
- &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
- &.fa-globe::before { content: "public" }
- &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
- &.fa-sign-out::before { content: "exit_to_app" }
- &.fa-search::before { content: "search" }
- &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
- &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
- &.fa-paperclip::before { content: "attach_file" }
- &.fa-tasks::before { content: "poll" }
- &.fa-plus::before { content: "add" }
- &.fa-unlock::before { content: "lock_open" }
- &.fa-lock::before { content: "lock" }
- &.fa-envelope::before { content: "mail" }
- &.fa-home::before { content: "home" }
- &.fa-bullhorn::before { content: "announcement" }
- &.fa-sliders::before { content: "tune" }
- &.fa-chevron-left::before { content: "arrow_back" }
- &.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: $reply-icon }
- &.fa-reply-all::before { content: "reply_all" }
- &.fa-share-alt::before { content: "share" }
- &.fa-star::before { content: $favorite-icon }
- &.fa-bookmark::before { content: "bookmark" }
- &.fa-ellipsis-h::before { content: "more_horiz" }
- &.fa-bell::before { content: "notifications" }
- &.fa-bell-o::before { content: "notifications" }
- &.fa-eraser::before { content: "clear_all" }
- &.fa-users::before { content: "people" }
- &.fa-file-text::before { content: "web" }
- &.fa-user-plus::before { content: "person_add" }
- &.fa-address-book::before { 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: "person_remove" }
- &.fa-check::before { content: "check" }
- &.fa-quote-right::before { content: "format_quote" }
- &.fa-upload::before { content: "file_upload" }
- &.fa-comments::before { content: "forum" }
- &.fa-angle-right::before { content: "chevron_right" }
- &.fa-thumb-tack::before { content: "push_pin" }
-}
-
-// 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
-button.icon-button i.fa-retweet {
- height: 20px;
- width: 20px;
- transition: none;
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,') }
-
-button.icon-button i.fa-retweet:hover,
-button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover,
-button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-// dropdown icon
-.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px}
-
-// icon in tab settings
-.text-btn.column-header__setting-btn {
- .fa {
- vertical-align: middle;
-
- &.fa-eraser { margin-right: 8px } // clear notification
- }
-}
-
-// top bar icons align
-.fa.fa-bell.column-header__icon.fa-fw,
-.fa.fa-home.column-header__icon.fa-fw,
-.fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw,
-.fa.fa-bars.column-header__icon.fa-fw,
-.fa.fa-bookmark.column-header__icon.fa-fw,
-.fa.fa-address-book-o.column-header__icon.fa-fw,
-.fa.fa-envelope.column-header__icon.fa-fw,
-.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
-
-// top bar icons in single column mode
-.tabs-bar__link {
- .fa.fa-home.fa-fw,
- .fa.fa-bell.fa-fw,
- .fa.fa-users.fa-fw,
- .fa.fa-globe.fa-fw { vertical-align: text-bottom }
-}
-
-// getting-started and side bar icons
-.column-link .fa,
-.column-link--transparent .fa { vertical-align: text-bottom }
-
-// uploaded media icons align
-.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
- font-size: 20px;
- vertical-align: text-bottom;
-}
-
-// search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
-
-// read more icon
-.status__content__read-more-button .fa { vertical-align: bottom }
-
-// Attachment icon
-.attachment-list__list a .fa { vertical-align: middle }
-
-// status detail icon
-.detailed-status .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
-
-// status scope
-.status__visibility-icon .fa,
-.account__header__tabs__name .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/media.scss b/app/javascript/styles/mastodon-material-light/theme/media.scss
deleted file mode 100644
index b8ac12414..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/media.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.media-gallery {
- border-radius: $media-radius;
-
- &__item { border-radius: $media-radius }
-}
-
-.media-modal {
- &__nav {
- background: $media-icon-bg-color;
- color: $media-icon-color;
- height: 48px;
- width: 48px;
- margin: auto 16px;
- padding: 8px;
- border-radius: 50%;
-
- .fa { width: 32px }
- }
-
- &__button {
- background-color: $media-page-indicator-color;
-
- &--active { background-color: $media-page-indicator-active-color }
- }
-
- &__close {
- &.icon-button {
- background: transparent;
- color: $media-icon-color;
- font-size: 24px !important;
- width: 24px !important;
- height: 24px !important;
- padding: 8px;
- box-sizing: content-box;
- line-height: normal !important;
-
- &:hover {
- background: $media-icon-bg-hover-color;
- color: $media-icon-hover-color;
- }
-
- .fa-fw {
- width: 24px;
- height: 24px;
- }
- }
- }
-
- &__meta {
- bottom: 24px;
-
- a { color: $media-icon-color }
- }
-
- &__overlay {
- .picture-in-picture__footer .icon-button {
- color: $media-icon-color;
-
- &:active,
- &:focus,
- &:hover {
- color: $media-icon-hover-color;
- background-color: transparent;
- }
- }
- }
-}
-
-.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 {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__volume {
- &::before {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__current {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__time-current { margin-left: 68px }
-
- &__buttons button { font-size: 20px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/modal.scss b/app/javascript/styles/mastodon-material-light/theme/modal.scss
deleted file mode 100644
index 93e5b24c1..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/modal.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.confirmation-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $dialog-radius;
-
- &__container {
- text-align: left;
- padding: 24px;
- }
-
- &__action-bar {
- justify-content: flex-end;
- background: $card-bg-color;
- padding: 8px;
- }
-
- &__secondary-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.actions-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- border-radius: $card-radius;
-
- ul li:not(:empty) a {
- color: $ui-text-color;
- font-size: 16px;
-
- &:hover {
- background: $card-bg-hover-color;
- color: $ui-text-color;
- }
- }
-
- .dropdown-menu__separator { border-bottom-color: $border-color }
-
- .status {
- background: $card-bg-color;
- border-bottom-color: $border-color;
- padding-top: 12px;
- padding-bottom: 12px;
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
- }
-}
-
-.report-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__target {
- padding: 24px;
- text-align: left;
- font-weight: bold;
- }
-
- &__container {
- border-top: none;
- }
-
- &__comment {
- border-right: none;
-
- .setting-text-label { color: $ui-text-color }
- }
-}
-
-.embed-modal .embed-modal__container {
- padding: 0 24px 24px 24px;
-
- .hint {
- margin-bottom: 16px;
- color: $secondary-text-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/responsive.scss b/app/javascript/styles/mastodon-material-light/theme/responsive.scss
deleted file mode 100644
index 8618f7ed7..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/responsive.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@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;
- width: $fab-size;
- height: $fab-size;
- bottom: 16px;
- right: 16px;
-
- &:hover { background: $floating-action-button-hover-color }
-
- &:active,
- &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
- .column { margin: 0 !important }
- .search__input { padding: 16px 46px }
-
- .search__icon {
- .fa {
- top: 16px;
- left: 16px;
- }
-
- .fa-times-circle.active { left: unset }
- }
-}
-
-// small size screen
-@media screen and (max-width: 415px) {
- .public-layout { padding-top: 64px }
-}
-
-// middle size screen
-@media screen and (min-width: 415px) {
- .tabs-bar {
- margin-bottom: 0;
-
- &__wrapper {
- padding-top: 0;
-
- .tabs-bar { margin-bottom: 0 }
- }
- }
-
- .columns-area__panels {
- &__main {
- @include shadow-1dp;
- padding: 0;
- }
-
- &__pane { padding: 0 16px }
- }
-}
-
-//single column mode
-@media screen and (min-width: 631px) {
- .tabs-bar__link {
- &:hover {
- background: $tab-indicator-bg-hover-color;
- border-bottom-color: transparent;
- }
-
- &:active,
- &:focus {
- background: $tab-indicator-bg-focus-color;
- border-bottom-color: $tab-bg-color;
- }
-
- &.active { border-bottom-color: $tab-indicator-active-color }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/statuses.scss b/app/javascript/styles/mastodon-material-light/theme/statuses.scss
deleted file mode 100644
index 7e4374014..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/statuses.scss
+++ /dev/null
@@ -1,292 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.status {
- padding: 12px 12px 4px 70px;
- border-bottom: 1px solid $border-color;
-
- &__expand { width: 70px }
-
- &__info {
- font-size: $name-font-size;
- padding-right: 4px;
- }
-
- &__relative-time { color: $info-text-color }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
-
- &__content {
- font-size: $status-font-size;
- padding-top: 4px;
- color: $primary-text-color;
-
- a {
- color: $link-text-color;
-
- &.unhandled-link { color: $link-text-color }
- }
-
- p { margin-bottom: 16px }
-
- .status__content__spoiler-link {
- 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 {
- margin-top: 4px;
-
- &__counter {
- margin-right: 6px;
-
- &__label {
- font-size: 14px;
- color: $info-text-color;
- }
- }
- }
-
- &__action-bar-button {
- margin-right: 4px;
-
- &.icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &--with-counter {
- margin-right: 4px;
- width: auto !important;
-
- &:hover { background: transparent }
- }
- }
- }
-
- &__action-bar-dropdown {
- width: 36px !important;
- height: 36px !important;
- box-sizing: content-box;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
-
- &:hover {
- color:$icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
- }
-
- &__prepend {
- color: $secondary-text-color;
- margin-left: 64px;
-
- .status__display-name strong { color: $secondary-text-color }
- }
-
- &.status-direct:not(.read) {
- background: transparent;
- border-bottom-color: $border-color;
- }
-
- &__visibility-icon { color: $icon-color }
-}
-
-.status-card {
- color: $icon-color;
- border-color: $border-color;
- outline: none;
- margin-top: 16px;
-
- &__image {
- background: transparent;
-
- &>.fa {
- font-size: 26px;
- }
- }
-
- &__title {
- color: $primary-text-color;
- margin-bottom: 6px;
- }
-
- &__description { color: $secondary-text-color }
-
- &__actions {
- &>div {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- }
-
- button,
- a {
- color: $media-icon-color;
- font-size: 20px;
- }
-
- a { bottom: auto }
- }
-
- &.compact {
- border-color: $border-color;
- outline: none;
- background: transparent;
-
- .status-card {
- &__content { padding: 12px }
- &__image { flex: 0 0 64px }
- }
-
- &:hover { background-color: transparent !important }
- }
-
- &.horizontal {
- border-radius: 0;
-
- .status-card {
- &__image-preview { border-radius: 0 }
-
- &__image-image { border-radius: 0 }
- }
- }
-}
-
-a.status-card {
- &:hover { background-color: $card-bg-color }
-}
-
-.embed .status,
-.public-layout .status { padding: 16px 16px 16px 80px }
-
-// Detailed status in mobile
-.status.light {
- .status {
- &__display-name { color: $primary-text-color }
- &__relative-time { color: $info-text-color }
- &__content { color: $primary-text-color }
- }
-
- .display-name { color: $secondary-text-color }
- .display-name strong { color: $primary-text-color }
-}
-
-.detailed-status {
- background: $card-bg-color;
- padding: 16px;
-
- &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__meta {
- margin-top: 16px;
- color: $info-text-color;
- }
-
- &__action-bar {
- background: $card-bg-color;
- border-top: none;
- border-bottom: 1px solid $border-color;
- padding: 8px 0;
- }
-
- &__action-bar-dropdown {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
- }
-
- &__button {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-
- .button.logo-button {
- margin-bottom: 16px;
- line-height: 36px;
- }
-}
-
-// search user trends
-.display-name {
- &__html { color: $primary-text-color }
- &__account { color: $secondary-text-color }
-}
-
-.activity-stream {
- @include shadow-1dp;
- margin-bottom: 16px;
- border-radius: $card-radius;
-
- .entry {
- background: $card-bg-color;
-
- &:first-child {
- .detailed-status,
- .load-more,
- .status { border-radius: $card-radius $card-radius 0 0 }
- }
- }
-}
-
-.entry.entry-center { border-bottom: 1px solid $border-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
deleted file mode 100644
index 367893682..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
-* Mastodon Material 0.2.1
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ 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
deleted file mode 100644
index 0b948881b..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@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/theme/widgets.scss b/app/javascript/styles/mastodon-material-light/theme/widgets.scss
deleted file mode 100644
index 4abdfbae9..000000000
--- a/app/javascript/styles/mastodon-material-light/theme/widgets.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.hero-widget {
- @include shadow-2dp;
- margin-bottom: 16px;
-
- &__img {
- border-radius: $card-radius $card-radius 0 0;
- background: $card-bg-color;
-
- img { border-radius: $card-radius $card-radius 0 0 }
- }
-
- &__text {
- background: $card-bg-color;
- padding: 16px;
- color: $primary-text-color;
- border-radius: 0 0 $card-radius $card-radius;
- }
-}
-
-.endorsements-widget {
- padding-bottom: 8px;
- margin-bottom: 8px;
-}
-
-.trends-widget h4 { color: $section-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/black.scss b/app/javascript/styles/mastodon-material/color/black.scss
similarity index 96%
rename from app/javascript/styles/mastodon-material-dark/color/black.scss
rename to app/javascript/styles/mastodon-material/color/black.scss
index 693caa813..04674b6ff 100644
--- a/app/javascript/styles/mastodon-material-dark/color/black.scss
+++ b/app/javascript/styles/mastodon-material/color/black.scss
@@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
// Background-color
$bg-color: #000000;
@@ -85,8 +87,8 @@ $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%);
+$outlined-button-hover-color: transparentize($primary-color, 0.8);
+$outlined-button-active-color: transparentize($primary-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material/color/mastodon-dark.scss
similarity index 96%
rename from app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
rename to app/javascript/styles/mastodon-material/color/mastodon-dark.scss
index b2e6bf27a..f78894243 100644
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material/color/mastodon-dark.scss
@@ -23,6 +23,8 @@ $menu-text-color: #282c37;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
// Background-color
$bg-color: #191b22;
@@ -85,8 +87,8 @@ $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%);
+$outlined-button-hover-color: transparentize($primary-color, 0.8);
+$outlined-button-active-color: transparentize($primary-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.7);
$text-button-focus-color: transparentize($text-button-color, 0.6);
diff --git a/app/javascript/styles/material-black/color/mastodon-light.scss b/app/javascript/styles/mastodon-material/color/mastodon-light.scss
similarity index 96%
rename from app/javascript/styles/material-black/color/mastodon-light.scss
rename to app/javascript/styles/mastodon-material/color/mastodon-light.scss
index 7e94b8de7..d6877379c 100644
--- a/app/javascript/styles/material-black/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material/color/mastodon-light.scss
@@ -22,6 +22,8 @@ $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
// Background-color
$bg-color: #eff3f5;
@@ -84,8 +86,8 @@ $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%);
+$outlined-button-hover-color: transparentize($primary-color, 0.8);
+$outlined-button-active-color: transparentize($primary-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: lighten($text-button-color, 36%);
$text-button-focus-color: lighten($text-button-color, 30%);
diff --git a/app/javascript/styles/material-black/color/plus-classic.scss b/app/javascript/styles/mastodon-material/color/plus-classic.scss
similarity index 96%
rename from app/javascript/styles/material-black/color/plus-classic.scss
rename to app/javascript/styles/mastodon-material/color/plus-classic.scss
index d94bbe90f..5d8da861e 100644
--- a/app/javascript/styles/material-black/color/plus-classic.scss
+++ b/app/javascript/styles/mastodon-material/color/plus-classic.scss
@@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
// Background-color
$bg-color: #fafafa;
@@ -84,8 +86,8 @@ $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%);
+$outlined-button-hover-color: transparentize($primary-color, 0.8);
+$outlined-button-active-color: transparentize($primary-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
diff --git a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss b/app/javascript/styles/mastodon-material/color/v1-dark.scss
similarity index 96%
rename from app/javascript/styles/mastodon-material-light/color/v1-dark.scss
rename to app/javascript/styles/mastodon-material/color/v1-dark.scss
index d31fbf04f..06b7d2276 100644
--- a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
+++ b/app/javascript/styles/mastodon-material/color/v1-dark.scss
@@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
// Background-color
$bg-color: #303030;
@@ -84,8 +86,8 @@ $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%);
+$outlined-button-hover-color: transparentize($primary-color, 0.8);
+$outlined-button-active-color: transparentize($primary-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss b/app/javascript/styles/mastodon-material/color/v1-light.scss
similarity index 96%
rename from app/javascript/styles/mastodon-material-dark/color/v1-light.scss
rename to app/javascript/styles/mastodon-material/color/v1-light.scss
index 2888e81b4..aedcf3caf 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
+++ b/app/javascript/styles/mastodon-material/color/v1-light.scss
@@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
// Background-color
$bg-color: #fafafa;
@@ -85,8 +87,8 @@ $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%);
+$outlined-button-hover-color: transparentize($primary-color, 0.8);
+$outlined-button-active-color: transparentize($primary-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
diff --git a/app/javascript/styles/material-black/color/v2-dark.scss b/app/javascript/styles/mastodon-material/color/v2-dark.scss
similarity index 94%
rename from app/javascript/styles/material-black/color/v2-dark.scss
rename to app/javascript/styles/mastodon-material/color/v2-dark.scss
index 025b238f5..706ecb5f3 100644
--- a/app/javascript/styles/material-black/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material/color/v2-dark.scss
@@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
// Background-color
$bg-color: #121212;
@@ -85,8 +87,8 @@ $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%);
+$outlined-button-hover-color: transparentize($primary-color, 0.8);
+$outlined-button-active-color: transparentize($primary-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
@@ -102,7 +104,7 @@ $toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
-$border-color: #2e2e2e;
+$border-color: #5f6368;
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
@@ -113,7 +115,7 @@ $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-color: lighten($top-bar-color, 18%);
$search-bar-focus-color: #ffffff;
// Tab color
diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss b/app/javascript/styles/mastodon-material/color/v2-light.scss
similarity index 96%
rename from app/javascript/styles/mastodon-material-dark/color/v2-light.scss
rename to app/javascript/styles/mastodon-material/color/v2-light.scss
index fd9469961..7c5840794 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
+++ b/app/javascript/styles/mastodon-material/color/v2-light.scss
@@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
+$primary-text-on-shadow-color: #ffffff;
+$text-field-color: $ui-text-color;
// Background-color
$bg-color: #ffffff;
@@ -85,8 +87,8 @@ $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%);
+$outlined-button-hover-color: transparentize($primary-color, 0.8);
+$outlined-button-active-color: transparentize($primary-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
diff --git a/app/javascript/styles/mastodon-material-light/layout/material-v1.scss b/app/javascript/styles/mastodon-material/layout/material-v1.scss
similarity index 56%
rename from app/javascript/styles/mastodon-material-light/layout/material-v1.scss
rename to app/javascript/styles/mastodon-material/layout/material-v1.scss
index 23c9a0616..6fcc39ef5 100644
--- a/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
+++ b/app/javascript/styles/mastodon-material/layout/material-v1.scss
@@ -38,13 +38,18 @@ $media-radius: 0;
$nav-drawer-item-radius: 0;
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 2px // Material v1 square
+// Avatar cropping settings
+$avatar-radius: 50%; // Rounded cropping
+//$avatar-radius: 2px // Material v1 square
// Chip settings
-$outlined-chip: false; // Material v1 styled contained chip
+$chip-type: contained; // Material v1 styled contained chip
+
+
+// Button on statuses
+$button-on-status: text; // Material v1 styled text button
+//$button-on-status: outlined; // Material v2 styled outlined button
// Button shadow
@@ -55,6 +60,10 @@ $button-shadow: true; // Material v1 styled colored button with shadow
$fab-size: 56px;
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
\ No newline at end of file
+// CW text area border
+$cw-area-border: none;
+//$cw-area-border: underlined;
+
+// Compose text area border
+$compose-area-border: none;
+//$compose-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/layout/material-v2.scss b/app/javascript/styles/mastodon-material/layout/material-v2.scss
similarity index 61%
rename from app/javascript/styles/material-black/layout/material-v2.scss
rename to app/javascript/styles/mastodon-material/layout/material-v2.scss
index 5700a99c8..24b5add29 100644
--- a/app/javascript/styles/material-black/layout/material-v2.scss
+++ b/app/javascript/styles/mastodon-material/layout/material-v2.scss
@@ -44,14 +44,19 @@ $nav-drawer-item-radius: 8px; // corner 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
+// Avatar cropping settings
+$avatar-radius: 50%; // Rounded cropping
+//$avatar-radius: 8px // Material v2 square
// Chip settings
-$outlined-chip: true; // Material v2 styled outlined chip
-//$outlined-chip: false; // Material v1 styled contained chip
+$chip-type: outlined; // Material v2 styled outlined chip
+//$outlined-chip: contained; // Material v1 styled contained chip
+
+
+// Button on statuses
+$button-on-status: text; // Material v1 styled text button
+//$button-on-status: outlined; // Material v2 styled outlined button
// Button shadow
@@ -64,7 +69,12 @@ $fab-size: 56px; // Regular
//$fab-size: 40px; // Mini
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
-//$text-area-border: outlined;
\ No newline at end of file
+// CW text area border
+$cw-area-border: none;
+//$cw-area-border: underlined;
+//$cw-area-border: outlined;
+
+// Compose text area border
+$compose-area-border: none;
+//$compose-area-border: underlined;
+//$compose-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/astarte.scss b/app/javascript/styles/mastodon-material/plugins/astarte.scss
similarity index 74%
rename from app/javascript/styles/mastodon-material-dark/plugins/astarte.scss
rename to app/javascript/styles/mastodon-material/plugins/astarte.scss
index 8c2e534bb..4e4ff54ae 100644
--- a/app/javascript/styles/mastodon-material-dark/plugins/astarte.scss
+++ b/app/javascript/styles/mastodon-material/plugins/astarte.scss
@@ -1,13 +1,8 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
.announcements {
li {
padding: 8px 16px;
background: $card-bg-color;
+ color: $primary-text-color;
border-radius: $card-radius;
border: 1px solid $border-color;
}
diff --git a/app/javascript/styles/mastodon-material-light/plugins/cards.scss b/app/javascript/styles/mastodon-material/plugins/cards.scss
similarity index 80%
rename from app/javascript/styles/mastodon-material-light/plugins/cards.scss
rename to app/javascript/styles/mastodon-material/plugins/cards.scss
index d9b3906a5..48faf1ea1 100644
--- a/app/javascript/styles/mastodon-material-light/plugins/cards.scss
+++ b/app/javascript/styles/mastodon-material/plugins/cards.scss
@@ -1,10 +1,3 @@
-@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;
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/dense.scss b/app/javascript/styles/mastodon-material/plugins/dense.scss
similarity index 88%
rename from app/javascript/styles/mastodon-material-dark/plugins/dense.scss
rename to app/javascript/styles/mastodon-material/plugins/dense.scss
index 413336d04..070bd9d69 100644
--- a/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
+++ b/app/javascript/styles/mastodon-material/plugins/dense.scss
@@ -1,9 +1,3 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
.drawer {
&__header { height: 48px }
@@ -20,12 +14,16 @@
&__buttons { height: 48px }
&__button { margin: 6px }
+
+ &__back-button { margin: 6px }
}
.column-subheading { padding: 8px 16px }
.column-link { padding: 12px 16px }
+.tabs-bar__link { padding: 12px 16px 8px 16px }
+
.notification__filter-bar button { padding: 12px 0 }
.getting-started__footer {
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/plus.scss b/app/javascript/styles/mastodon-material/plugins/plus.scss
similarity index 84%
rename from app/javascript/styles/mastodon-material-dark/plugins/plus.scss
rename to app/javascript/styles/mastodon-material/plugins/plus.scss
index e356e937b..36ef1cebb 100644
--- a/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
+++ b/app/javascript/styles/mastodon-material/plugins/plus.scss
@@ -1,9 +1,3 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
.status__action-bar-button {
background: #eeeeee;
width: 28px !important;
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/color.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/config.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/config.scss
new file mode 100644
index 000000000..12e2b691f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/mastodon-dark.scss';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/layout.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/loader.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss
new file mode 100644
index 000000000..e17916a49
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+//@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/color.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/config.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/config.scss
new file mode 100644
index 000000000..8e59a4fb4
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/mastodon-light.scss';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/layout.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/loader.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss
new file mode 100644
index 000000000..e17916a49
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+//@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/color.scss b/app/javascript/styles/mastodon-material/profiles/material-black/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/config.scss b/app/javascript/styles/mastodon-material/profiles/material-black/config.scss
new file mode 100644
index 000000000..46d921e34
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/black';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/material-black/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/layout.scss b/app/javascript/styles/mastodon-material/profiles/material-black/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/loader.scss b/app/javascript/styles/mastodon-material/profiles/material-black/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss b/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss
new file mode 100644
index 000000000..e17916a49
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+//@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/color.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/config.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/config.scss
new file mode 100644
index 000000000..1197655f3
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/v2-dark.scss';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/layout.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/loader.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss
new file mode 100644
index 000000000..e17916a49
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+//@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/color.scss b/app/javascript/styles/mastodon-material/profiles/material-light/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/config.scss b/app/javascript/styles/mastodon-material/profiles/material-light/config.scss
new file mode 100644
index 000000000..986befe53
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/config.scss
@@ -0,0 +1 @@
+// Add your settings below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/material-light/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/layout.scss b/app/javascript/styles/mastodon-material/profiles/material-light/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/loader.scss b/app/javascript/styles/mastodon-material/profiles/material-light/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss b/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss
new file mode 100644
index 000000000..e17916a49
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+//@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/color.scss b/app/javascript/styles/mastodon-material/profiles/plus/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/config.scss b/app/javascript/styles/mastodon-material/profiles/plus/config.scss
new file mode 100644
index 000000000..56cd971c1
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/plus-classic';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/plus/icon_config.scss
new file mode 100644
index 000000000..d2a44c6d5
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/icon_config.scss
@@ -0,0 +1,9 @@
+// Add your icon customization below
+
+$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";
+
+$favorite-icon-color: #ffffff;
+
+$reply-icon: "comment";
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/layout.scss b/app/javascript/styles/mastodon-material/profiles/plus/layout.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/layout.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/loader.scss b/app/javascript/styles/mastodon-material/profiles/plus/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss b/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss
new file mode 100644
index 000000000..89adaca8a
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+@import '../../plugins/cards';
+@import '../../plugins/dense';
+@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss
new file mode 100644
index 000000000..25466d633
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss
@@ -0,0 +1 @@
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss
new file mode 100644
index 000000000..fb818fab0
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/v2-dark';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/custom_layout.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/layout.scss
similarity index 53%
rename from app/javascript/styles/y-zu-dark/custom_layout.scss
rename to app/javascript/styles/mastodon-material/profiles/y-zu-dark/layout.scss
index fb9dbbe00..88c66fb64 100644
--- a/app/javascript/styles/y-zu-dark/custom_layout.scss
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/layout.scss
@@ -1,6 +1,3 @@
-@charset "UTF-8";
-
-
// Add your customization below
$avater-radius: 2px;
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/loader.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/plugins.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/plugins.scss
new file mode 100644
index 000000000..292ec7fa6
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss
new file mode 100644
index 000000000..87a4fed42
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss
@@ -0,0 +1,32 @@
+// Add your customization below
+
+$bg-color: #fafafa;
+
+$primary-color: #6D4C41;
+
+$icon-color: #92787D;
+
+$icon-hover-color: darken($icon-color, 10%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $contained-button-color;
+$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
+$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
+$text-button-color: $contained-button-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+
+$border-color: lighten($icon-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$icon-tab-indicator-active-color: $top-bar-icon-color;
+$icon-tab-indicator-hover-color: $top-bar-icon-hover-color;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss
new file mode 100644
index 000000000..d250ece15
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss
@@ -0,0 +1,3 @@
+// Add your settings below
+
+@import '../../color/v2-light';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss
new file mode 100644
index 000000000..f109ac61c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss
@@ -0,0 +1,3 @@
+// Add your icon customization below
+
+$icon-font-source: self;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/custom_layout.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/layout.scss
similarity index 53%
rename from app/javascript/styles/y-zu-light/custom_layout.scss
rename to app/javascript/styles/mastodon-material/profiles/y-zu-light/layout.scss
index fb9dbbe00..88c66fb64 100644
--- a/app/javascript/styles/y-zu-light/custom_layout.scss
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/layout.scss
@@ -1,6 +1,3 @@
-@charset "UTF-8";
-
-
// Add your customization below
$avater-radius: 2px;
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/loader.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/loader.scss
new file mode 100644
index 000000000..539b6b38f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/loader.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import '../../theme/base_config', '../../theme/base_icon_config';
+@import 'config', 'icon_config';
+@import 'color', 'layout';
+
+@import '../../theme/functions', '../../theme/mixins';
+@import '../../theme/theme';
+@import 'plugins';
+
+@import '../../theme/material-icons';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss
new file mode 100644
index 000000000..292ec7fa6
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss
@@ -0,0 +1,4 @@
+@import '../../plugins/astarte';
+//@import '../../plugins/cards';
+@import '../../plugins/dense';
+//@import '../../plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/_functions.scss b/app/javascript/styles/mastodon-material/theme/_functions.scss
similarity index 73%
rename from app/javascript/styles/mastodon-material-light/theme/_functions.scss
rename to app/javascript/styles/mastodon-material/theme/_functions.scss
index 0374231ed..20ce3f055 100644
--- a/app/javascript/styles/mastodon-material-light/theme/_functions.scss
+++ b/app/javascript/styles/mastodon-material/theme/_functions.scss
@@ -1,8 +1,7 @@
-@charset "UTF-8";
@use "sass:string";
// convert hex color code to svg styled ascii color code
-@function svg-color ($color) {
+@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/theme/_mixins.scss b/app/javascript/styles/mastodon-material/theme/_mixins.scss
similarity index 82%
rename from app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
rename to app/javascript/styles/mastodon-material/theme/_mixins.scss
index fcd556f2b..56dc92b20 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
+++ b/app/javascript/styles/mastodon-material/theme/_mixins.scss
@@ -1,6 +1,3 @@
-@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);
@@ -32,7 +29,7 @@ $shadow-color-3: rgba(0,0,0,.12);
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
-@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
+@mixin material-transition { transition: .25s cubic-bezier(0,0,0.2,1) }
@mixin search-bar-hover {
@if $search-bar-hover {
@@ -41,16 +38,54 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
-@mixin outlined-chip {
- @if $outlined-chip {
- .reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $outlined-chip-selected-border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
- }
+@mixin chip-type($chip-type) {
+ @if $chip-type == contained {
+ background: $contained-chip-color;
+
+ &.active { background-color: $contained-chip-selected-color }
+
+ &:hover { background-color: $contained-chip-selected-color }
+ }
+
+ @if $chip-type == outlined {
+ background: $outlined-chip-color;
+ border: 1px solid $outlined-chip-selected-border-color;
+
+ &.active { background-color: $outlined-chip-selected-color }
+
+ &:hover { background: $outlined-chip-hover-color }
+ }
+}
+
+@mixin button-type($button-type) {
+ @if $button-type == contained {
+ @if $button-shadow { @include shadow-1dp }
+ background: $contained-button-color;
+ color: $contained-button-text-color;
+
+ &:hover { background: $contained-button-hover-color }
+
+ &:focus { background: $contained-button-color }
+ }
+
+ @if $button-type == outlined {
+ box-shadow: none;
+ background: transparent;
+ color: $outlined-button-color;
+ border: 1px solid $outlined-button-color;
+
+ &:hover { background: $outlined-button-hover-color }
+
+ &:focus { background: $outlined-button-hover-color }
+ }
+
+ @if $button-type == text {
+ box-shadow: none;
+ background: transparent;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
}
}
@@ -61,31 +96,27 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
-@mixin text-area-border {
+@mixin text-area-border($text-area-border) {
+ background: $text-field-bg-color;
+ color: $text-field-color;
+
+ &:hover { border-color: $border-hover-color }
+
@if $text-area-border == underlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius $card-radius 0 0;
- border-bottom: 1px solid $border-color;
+ border-radius: $card-radius $card-radius 0 0;
+ border-bottom: 1px solid $border-color;
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
- }
+ &:active,
+ &:focus { border-bottom: 2px solid $border-active-color }
}
@if $text-area-border == outlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius;
- border: 1px solid $border-color;
+ border-radius: $card-radius;
+ border: 1px solid $border-color;
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus {
- border: 2px solid $border-active-color;
- padding: 7px 41px 7px 15px;
- }
+ &:active,
+ &:focus {
+ border: 2px solid $border-active-color;
}
}
}
diff --git a/app/javascript/styles/mastodon-material/theme/about.scss b/app/javascript/styles/mastodon-material/theme/about.scss
new file mode 100644
index 000000000..2639ed357
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/about.scss
@@ -0,0 +1,17 @@
+.landing-page {
+ &__call-to-action {
+ @include shadow-2dp;
+ background: $card-bg-color;
+ border-radius: $card-radius;
+ padding: 24px 36px;
+
+ .row__information-board {
+ .information-board__section {
+ padding: 0 16px;
+ color: $primary-text-color;
+ }
+ }
+ }
+}
+
+.information-board__section span:last-child { color: $ui-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/account.scss b/app/javascript/styles/mastodon-material/theme/account.scss
similarity index 85%
rename from app/javascript/styles/mastodon-material-dark/theme/account.scss
rename to app/javascript/styles/mastodon-material/theme/account.scss
index 551b4f4a8..3b1c58138 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/account.scss
+++ b/app/javascript/styles/mastodon-material/theme/account.scss
@@ -1,9 +1,3 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
.account {
border-bottom: 1px solid $border-color;
padding: 16px;
@@ -12,19 +6,19 @@
.account__display-name strong { color: $primary-text-color }
&__avatar {
- border-radius: $avater-radius;
+ border-radius: $avatar-radius;
width: 40px;
height: 40px;
&-overlay {
&-base {
- border-radius: $avater-radius;
+ border-radius: $avatar-radius;
width: 44px;
height: 44px;
background-size: 44px;
}
- &-overlay { border-radius: $avater-radius }
+ &-overlay { border-radius: $avatar-radius }
}
}
@@ -62,6 +56,7 @@
border-radius: 50%;
padding: 8px;
margin-left: 8px;
+ margin-right: 0;
}
}
}
@@ -71,7 +66,7 @@
&__links {
color: $secondary-text-color;
- padding: 10px 0;
+ padding: 8px 0;
a {
color: $secondary-text-color;
@@ -142,6 +137,26 @@
}
&__content { color: $secondary-text-color }
+
+ &__fields {
+ border-color: $border-color;
+
+ dl { border-bottom: 1px solid $border-color }
+
+ dt {
+ color: $primary-text-color;
+ background: $list-bg-inactive-color;
+ }
+
+ dd { color: $primary-text-color }
+
+ .verified {
+ border: none;
+ background: $verified-color;
+
+ &__mark { color: $primary-text-color }
+ }
+ }
}
&__section-headline {
@@ -167,7 +182,7 @@
}
&__relationship {
- padding: 0;
+ padding: 8px;
height: auto;
.icon-button {
diff --git a/app/javascript/styles/material-black/theme/base_config.scss b/app/javascript/styles/mastodon-material/theme/base_config.scss
similarity index 90%
rename from app/javascript/styles/material-black/theme/base_config.scss
rename to app/javascript/styles/mastodon-material/theme/base_config.scss
index f36a139ba..a3f28a18e 100644
--- a/app/javascript/styles/material-black/theme/base_config.scss
+++ b/app/javascript/styles/mastodon-material/theme/base_config.scss
@@ -7,13 +7,13 @@
// 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';
+// @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';
+// @import '../../layout/material-v2';
// Search bar hover settings
diff --git a/app/javascript/styles/mastodon-material-dark/icon_config.scss b/app/javascript/styles/mastodon-material/theme/base_icon_config.scss
similarity index 88%
rename from app/javascript/styles/mastodon-material-dark/icon_config.scss
rename to app/javascript/styles/mastodon-material/theme/base_icon_config.scss
index 99046e176..2081d8828 100644
--- a/app/javascript/styles/mastodon-material-dark/icon_config.scss
+++ b/app/javascript/styles/mastodon-material/theme/base_icon_config.scss
@@ -16,9 +16,9 @@ $reply-icon: "reply";
// Material Design Icon settings
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-//$icon-font-source: google; // Google Fonts
+$icon-font-source: google; // Google Fonts
//$icon-font-source: github; // GitHub
-$icon-font-source: self; // Self-hosting
+//$icon-font-source: self; // Self-hosting
// Material Icon style settings
$icon-font-style: filled;
diff --git a/app/javascript/styles/mastodon-material-light/theme/basics.scss b/app/javascript/styles/mastodon-material/theme/basics.scss
similarity index 72%
rename from app/javascript/styles/mastodon-material-light/theme/basics.scss
rename to app/javascript/styles/mastodon-material/theme/basics.scss
index bb8f68bf0..96a12ee24 100644
--- a/app/javascript/styles/mastodon-material-light/theme/basics.scss
+++ b/app/javascript/styles/mastodon-material/theme/basics.scss
@@ -1,9 +1,3 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
body,
body.embed { background: $bg-color }
diff --git a/app/javascript/styles/material-black/theme/button.scss b/app/javascript/styles/mastodon-material/theme/button.scss
similarity index 84%
rename from app/javascript/styles/material-black/theme/button.scss
rename to app/javascript/styles/mastodon-material/theme/button.scss
index 5f909d843..ebb064595 100644
--- a/app/javascript/styles/material-black/theme/button.scss
+++ b/app/javascript/styles/mastodon-material/theme/button.scss
@@ -1,13 +1,7 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
@include button-shadow;
.icon-button {
+ @include material-transition;
color: $icon-button-color;
border-radius: 50%;
@@ -22,14 +16,18 @@
&.inverted {
color: $icon-button-color;
- &.active { color: $icon-button-active-color }
+ &.active,
+ &:active { color: $icon-button-active-color }
+
+ &:focus {
+ color: $icon-button-active-color;
+ background-color: transparent;
+ }
&:hover {
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
-
- &:focus { background-color: transparent }
}
&.overlayed {
@@ -51,13 +49,13 @@
margin-left: 8px;
}
+ &:focus { background-color: transparent }
+
&:hover {
@include material-transition;
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
-
- &:focus { background-color: transparent }
}
// Checkbox with label
@@ -115,16 +113,7 @@ label.icon-button {
&.button--block { margin: 8px 0 }
- &.button-secondary {
- color: $text-button-color;
- border: none;
- box-shadow: none;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
- }
+ &.button-secondary { @include button-type($button-on-status) }
&.confirmation-modal__cancel-button {
box-shadow: none;
diff --git a/app/javascript/styles/mastodon-material-light/theme/columns.scss b/app/javascript/styles/mastodon-material/theme/columns.scss
similarity index 90%
rename from app/javascript/styles/mastodon-material-light/theme/columns.scss
rename to app/javascript/styles/mastodon-material/theme/columns.scss
index 77a5c777a..5313038db 100644
--- a/app/javascript/styles/mastodon-material-light/theme/columns.scss
+++ b/app/javascript/styles/mastodon-material/theme/columns.scss
@@ -1,9 +1,3 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
.column {
@include shadow-1dp;
padding: 0;
@@ -90,6 +84,7 @@
.column-header__setting-btn {
padding: 8px;
+ margin: 0 8px;
border-radius: 50%;
&:last-child { padding-right: 8px }
@@ -111,6 +106,7 @@
}
&__collapsible {
+ transition: .25s cubic-bezier(0.0,0.0,0.2,1), .25s cubic-bezier(1,0.2,0,0);
color: $ui-text-color;
background: $card-bg-color;
border-top: 1px solid $border-color;
@@ -120,14 +116,17 @@
padding: 16px;
}
- &.collapsed { border-top: none }
+ &.collapsed {
+ opacity: 1;
+ border-top: none;
+ }
}
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
- margin: 8px 10px;
- padding: 10px;
+ margin: 10px;
+ padding: 8px;
font-size: 20px;
span { display: none }
@@ -140,6 +139,8 @@
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
+
+ &:first-child { border-top: none }
}
.column-link {
@@ -181,8 +182,7 @@
.column-settings {
&__section {
color: $section-text-color;
- margin-bottom: 0;
- margin-top: 8px;
+ margin: 16px 0 8px;
}
&__row .text-btn { margin-bottom: 0 }
@@ -261,11 +261,11 @@
.muted {
.status {
&__content {
- color: $read-primary-text-color;
+ color: $read-primary-text-color !important;
- p { color: $read-primary-text-color }
+ p { color: $read-primary-text-color !important }
- a { color: $read-secondary-text-color }
+ a { color: $read-secondary-text-color !important }
}
&__display-name strong { color: $read-primary-text-color }
@@ -384,21 +384,28 @@
&__container { color: $primary-text-color }
&__item {
- padding: 16px;
+ padding: 16px 8px;
font-size: 16px;
&__unread { background: $badge-color }
+
+ &__range {
+ margin-bottom: 8px;
+ padding-right: 16px;
+ }
}
&__pagination {
color: $ui-text-color;
- padding: 16px;
+ padding: 0 8px 16px;
bottom: 0;
+ position: initial;
+ float: right;
.icon-button {
@include icon-button;
padding: 8px;
- margin: 0 4px;
+ margin: 0 8px;
line-height: normal !important;
box-sizing: content-box;
}
@@ -407,13 +414,9 @@
}
}
-.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 }
-
-@include outlined-chip;
-
.reactions-bar {
margin-top: 16px;
- width: calc(100% - 72px);
+ width: auto;
.emoji-button {
color: $icon-button-color;
@@ -425,17 +428,11 @@
}
&__item {
- background: $contained-chip-color;
+ @include chip-type($chip-type);
border-radius: 17px;
margin: 2px 4px;
- &.active {
- background-color: $contained-chip-selected-color;
-
- .reactions-bar__item__count { color: $chip-selected-text-color }
-
- &:hover { background-color: $contained-chip-selected-color }
- }
+ &.active .reactions-bar__item__count { color: $chip-selected-text-color }
&__emoji {
width: 24px;
@@ -470,6 +467,7 @@
&.active {
color: $tab-indicator-active-color;
border-bottom: 4px solid $tab-indicator-active-color;
+ padding: 12px 0 8px;
&::before,
&:after { border: none }
diff --git a/app/javascript/styles/material-black/theme/components.scss b/app/javascript/styles/mastodon-material/theme/components.scss
similarity index 90%
rename from app/javascript/styles/material-black/theme/components.scss
rename to app/javascript/styles/mastodon-material/theme/components.scss
index aa64aabc5..dec609cbd 100644
--- a/app/javascript/styles/material-black/theme/components.scss
+++ b/app/javascript/styles/mastodon-material/theme/components.scss
@@ -1,18 +1,9 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include text-area-border;
-
.modal-root {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
&__overlay { background-color: rgba(0,0,0,.32) !important }
- &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
+ &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 5%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 95%) }
}
.drawer {
@@ -60,6 +51,10 @@
}
&__mastodon { background: $card-bg-color }
+
+ &:hover,
+ &:active,
+ &:focus { opacity: 1.0 }
}
}
@@ -115,13 +110,9 @@
margin-top: 0;
color: $tips-text-color;
- h4 {
- color: $secondary-text-color;
- }
+ h4 { color: $secondary-text-color }
- em {
- color: $search-bar-text-color;
- }
+ em { color: $search-bar-text-color }
}
.search-results {
@@ -201,9 +192,12 @@
.compose-form {
.autosuggest-textarea {
&__textarea {
- background: $text-field-bg-color;
- color: $ui-text-color;
+ @include text-area-border($compose-area-border);
padding: 8px 42px 8px 16px;
+
+ @if $compose-area-border == outlined {
+ &:focus { padding: 7px 41px 7px 15px }
+ }
&::placeholder { color: $tips-text-color }
}
@@ -233,16 +227,13 @@
&.spoiler-input--visible { margin-bottom: 16px }
&__input {
- color: $ui-text-color;
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- border-radius: 0;
+ @include text-area-border($cw-area-border);
+ padding: 8px 16px;
- &:hover { border-color: $border-hover-color }
+ @if $cw-area-border == outlined {
+ &:focus { padding: 7px 15px }
+ }
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
-
&::placeholder { color: $tips-text-color }
}
}
@@ -287,18 +278,22 @@
.icon-button {
@include icon-button;
padding: 8px;
+ margin: 0 2px;
}
.text-icon-button {
width: 20px !important;
height: 20px !important;
padding: 8px;
+ margin: 0 2px;
line-height: 20px !important;
}
}
&__poll-wrapper {
- border-top: 1px solid $border-color;
+ @if $compose-area-border == none {
+ border-top: 1px solid $border-color;
+ } @else { border-top: none }
ul { padding: 16px 12px 16px 0 }
@@ -310,15 +305,7 @@
&:focus { border-color: $border-hover-color }
}
- .button.button-secondary {
- box-shadow: none;
- color: $text-button-color;
-
- &:hover { background-color: $text-button-hover-color }
-
- &:active,
- &:focus { background-color: $text-button-focus-color }
- }
+ .button.button-secondary { @include button-type($button-on-status) }
.poll__footer { border-top: none }
}
@@ -331,6 +318,8 @@
.poll {
+ margin-top: 8px;
+
.button { margin-right: 8px }
li { margin-bottom: 0 }
@@ -348,7 +337,7 @@
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
- &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
+ &.active:hover { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, $control-border-hover-color 5px, $control-border-hover-color 7px, $control-border-active-color 8px, $control-border-active-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
&.checkbox {
border-radius: 2px;
@@ -369,8 +358,6 @@
}
&__option {
- padding: 16px 0 8px;
-
input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
@@ -378,8 +365,6 @@
border-radius: 2px;
padding: 8px 16px;
}
-
- &__text { line-height: 34px }
}
&__chart {
@@ -462,9 +447,7 @@
}
}
-.character-counter {
- color: $secondary-text-color;
-}
+.character-counter { color: $secondary-text-color }
.reply-indicator {
box-shadow: none;
@@ -549,8 +532,8 @@
.directory {
&__card {
@include shadow-1dp;
- margin: 8px 4px;
border-radius: $card-radius;
+ margin-bottom: 16px;
&__img { border-radius: $card-radius $card-radius 0 0 }
@@ -558,6 +541,8 @@
background: $card-bg-color;
padding: 8px 16px;
+ &__relationship { width: auto }
+
.display-name {
margin-left: 16px;
@@ -582,6 +567,11 @@
.accounts-table__count { padding: 16px 0 }
}
}
+
+ &__list {
+ @include material-transition;
+ margin: 16px 0;
+ }
}
.mute-modal {
diff --git a/app/javascript/styles/mastodon-material/theme/containers.scss b/app/javascript/styles/mastodon-material/theme/containers.scss
new file mode 100644
index 000000000..42a12a1ac
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/containers.scss
@@ -0,0 +1,161 @@
+.public-layout {
+ .header {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ border-radius: $nav-bar-radius;
+ margin: 16px 0;
+
+ .brand {
+ svg { fill: $top-bar-text-color }
+
+ &:hover { background: $tab-indicator-bg-hover-color }
+ }
+
+ .nav-link,
+ .nav-link.optional {
+ color: $top-bar-text-color;
+
+ &:hover {
+ background: $tab-indicator-bg-hover-color;
+ text-decoration: none;
+ }
+ }
+
+ .nav-button {
+ background: transparent;
+ margin: 0;
+ border-radius: 0;
+
+ &:hover { background: $tab-indicator-bg-hover-color }
+ }
+
+ .detailed-status__meta { margin-top: 16px }
+ }
+
+ .detailed-status { padding: 16px }
+
+ .footer {
+ padding-top: 16px;
+ padding-bottom: 64px;
+ color: $ui-text-color;
+
+ h4 { color: $ui-text-color }
+
+ ul a { color: $secondary-text-color }
+
+ .grid .column-2 h4 a { color: $ui-text-color }
+
+ .brand {
+ svg { fill: $icon-color }
+
+ &:hover svg { fill: $icon-hover-color }
+ }
+ }
+
+ .account__section-headline {
+ @include shadow-1dp;
+ border-radius: $card-radius $card-radius 0 0;
+ }
+
+ .public-account-header {
+ @include shadow-2dp;
+ margin-bottom: 16px;
+
+ &__image {
+ border-radius: $card-radius $card-radius 0 0;
+ background: $card-bg-color;
+
+ &::after { box-shadow: none }
+ }
+
+ &__bar {
+ background: linear-gradient(0deg, transparent, transparent 60px, rgba(0, 0, 0, 0.5) 60px, rgba(0, 0, 0, 0.2) 80%, transparent);
+
+ &::before {
+ background: $text-tab-bg-color;
+ border-radius: 0 0 $card-radius $card-radius;
+ }
+
+ .avatar img {
+ border-radius: $avatar-radius;
+ border: 2px solid $border-color;
+ background: $card-bg-color;
+ }
+ }
+
+ &__tabs {
+ margin-left: 24px;
+
+ &__name {
+ h1 {
+ color: $primary-text-on-shadow-color;
+ text-shadow: none;
+
+ small { color: $primary-text-on-shadow-color }
+ }
+ }
+
+ &__tabs {
+ .counter {
+ color: $secondary-text-color;
+ padding: 8px 16px;
+ border-right: none;
+
+ &.active {
+ &::after { border-bottom: 4px solid $text-tab-indicator-active-color }
+ }
+
+ &::after {
+ border-bottom: none;
+ opacity: 1;
+ }
+
+ &:hover { background: $text-tab-indicator-bg-hover-color }
+
+ .counter-number {
+ color: $ui-text-color;
+ margin-bottom: 6px;
+ }
+ }
+ }
+ }
+
+ &--no-bar .public-account-header {
+ &__image,
+ &__image img { border-radius: $card-radius }
+ }
+ }
+
+ .public-account-bio {
+ @include shadow-2dp;
+ background: $card-bg-color;
+ border-radius: $card-radius;
+ margin-bottom: 16px;
+
+ &__extra,
+ .roles {
+ padding: 16px;
+ color: $info-text-color;
+ }
+
+ .account__header {
+ &__content {
+ padding: 16px 16px 0;
+ color: $primary-text-color;
+ }
+
+ &__fields {
+ a,
+ .verified a { color: $primary-text-color }
+
+ dl:first-child .verified { border-radius: 0 $card-radius 0 0 }
+ }
+ }
+ }
+
+ .directory__list { grid-gap: 16px }
+
+ .grid { grid-gap: 16px }
+}
+
+.grid-4 { grid-gap: 16px }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/control.scss b/app/javascript/styles/mastodon-material/theme/control.scss
similarity index 79%
rename from app/javascript/styles/mastodon-material-light/theme/control.scss
rename to app/javascript/styles/mastodon-material/theme/control.scss
index a205a4cb7..67d8160a7 100644
--- a/app/javascript/styles/mastodon-material-light/theme/control.scss
+++ b/app/javascript/styles/mastodon-material/theme/control.scss
@@ -1,10 +1,3 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
.react-toggle {
width: 36px;
height: 16px;
@@ -49,11 +42,11 @@
padding: 8px 0;
&__input {
- border: 2px solid $border-color;
+ border: 2px solid $control-border-color;
&.checked {
- border-color: $icon-button-active-color;
- background: $icon-button-active-color;
+ border-color: $control-border-active-color;
+ background: $control-border-active-color;
padding: 3px;
background-clip: content-box;
}
@@ -61,7 +54,7 @@
}
.compose-form__sensitive-button .checkbox {
- border: 2px solid $border-color;
+ border: 2px solid $control-border-color;
border-radius: 2px;
&.active {
diff --git a/app/javascript/styles/material-black/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material/theme/emoji-picker.scss
similarity index 80%
rename from app/javascript/styles/material-black/theme/emoji-picker.scss
rename to app/javascript/styles/mastodon-material/theme/emoji-picker.scss
index 91663fb93..d6959dbcc 100644
--- a/app/javascript/styles/material-black/theme/emoji-picker.scss
+++ b/app/javascript/styles/mastodon-material/theme/emoji-picker.scss
@@ -1,14 +1,23 @@
-@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-bg-color;
border-radius: $menu-radius;
+ margin-top: 0;
+
+ // bubble
+ // unable to fit the position
+ /*&::before {
+ @include shadow-8dp;
+ content: "";
+ position: absolute;
+ background: $menu-bg-color;
+ top: -6px;
+ width: 12px;
+ height: 12px;
+ transform: rotate(45deg);
+ z-index: -1;
+ }*/
}
&__modifiers__menu {
@@ -30,9 +39,7 @@
&-bar {
border: 0 solid $border-color;
- &:first-child {
- background: $menu-bg-color;
- }
+ &:first-child { background: $menu-bg-color }
}
&-anchor {
diff --git a/app/javascript/styles/mastodon-material-dark/theme/icons.scss b/app/javascript/styles/mastodon-material/theme/icons.scss
similarity index 75%
rename from app/javascript/styles/mastodon-material-dark/theme/icons.scss
rename to app/javascript/styles/mastodon-material/theme/icons.scss
index 987767544..bb4b28eac 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/icons.scss
+++ b/app/javascript/styles/mastodon-material/theme/icons.scss
@@ -1,10 +1,3 @@
-@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,
diff --git a/app/javascript/styles/material-black/theme/material-icons.scss b/app/javascript/styles/mastodon-material/theme/material-icons.scss
similarity index 93%
rename from app/javascript/styles/material-black/theme/material-icons.scss
rename to app/javascript/styles/mastodon-material/theme/material-icons.scss
index dd01ce3d6..4599453d2 100644
--- a/app/javascript/styles/material-black/theme/material-icons.scss
+++ b/app/javascript/styles/mastodon-material/theme/material-icons.scss
@@ -1,11 +1,3 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config', '../icon_config';
-@import '../custom_color', '../custom_layout';
-@import 'functions';
-@import 'mixins';
-
-
@include icon-font;
.fa-fw {
@@ -78,7 +70,9 @@
&.fa-upload,
&.fa-comments,
&.fa-angle-right,
- &.fa-thumb-tack {
+ &.fa-thumb-tack,
+ &.fa-hashtag,
+ &.fa-expand {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
@@ -149,6 +143,8 @@
&.fa-comments::before { content: "forum" }
&.fa-angle-right::before { content: "chevron_right" }
&.fa-thumb-tack::before { content: "push_pin" }
+ &.fa-hashtag::before { content: "tag" }
+ &.fa-expand::before { content: "open_in_full" }
}
// bookmark icon
@@ -173,7 +169,8 @@
.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 }
+.status__action-bar-button.star-icon.icon-button.active,
+.media-modal__overlay .picture-in-picture__footer .icon-button.star-icon.active { color: $favorite-icon-color }
// boost icon
button.icon-button i.fa-retweet {
@@ -220,11 +217,14 @@ button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
// top bar icons in single column mode
-.tabs-bar__link {
- .fa.fa-home.fa-fw,
- .fa.fa-bell.fa-fw,
- .fa.fa-users.fa-fw,
- .fa.fa-globe.fa-fw { vertical-align: text-bottom }
+.tabs-bar__link .fa {
+ &.fa-home,
+ &.fa-bell,
+ &.fa-users,
+ &.fa-globe,
+ &.fa-search {
+ &.fa-fw { vertical-align: text-bottom }
+ }
}
// getting-started and side bar icons
@@ -246,6 +246,12 @@ button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
// Attachment icon
.attachment-list__list a .fa { vertical-align: middle }
+// verified icon
+.verified__mark { vertical-align: middle }
+
+// tag icon
+.directory__tag h4 .fa { vertical-align: bottom }
+
// status detail icon
.detailed-status .fa {
font-size: 16px;
diff --git a/app/javascript/styles/material-black/theme/media.scss b/app/javascript/styles/mastodon-material/theme/media.scss
similarity index 92%
rename from app/javascript/styles/material-black/theme/media.scss
rename to app/javascript/styles/mastodon-material/theme/media.scss
index b8ac12414..6040e3a5f 100644
--- a/app/javascript/styles/material-black/theme/media.scss
+++ b/app/javascript/styles/mastodon-material/theme/media.scss
@@ -1,10 +1,3 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
.media-gallery {
border-radius: $media-radius;
@@ -30,7 +23,8 @@
&--active { background-color: $media-page-indicator-active-color }
}
- &__close {
+ &__close,
+ &__zoom-button {
&.icon-button {
background: transparent;
color: $media-icon-color;
@@ -69,11 +63,19 @@
color: $media-icon-hover-color;
background-color: transparent;
}
+
+ &.star-icon.active {
+ &:active,
+ &:focus,
+ &:hover { background: transparent }
+ }
}
}
}
.video-player {
+ border-radius: 0;
+
&__controls {
background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
padding: 0 12px;
diff --git a/app/javascript/styles/material-black/theme/modal.scss b/app/javascript/styles/mastodon-material/theme/modal.scss
similarity index 93%
rename from app/javascript/styles/material-black/theme/modal.scss
rename to app/javascript/styles/mastodon-material/theme/modal.scss
index 93e5b24c1..6efb8bb3c 100644
--- a/app/javascript/styles/material-black/theme/modal.scss
+++ b/app/javascript/styles/mastodon-material/theme/modal.scss
@@ -1,10 +1,3 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
.confirmation-modal {
@include shadow-24dp;
background: $card-bg-color;
diff --git a/app/javascript/styles/material-black/theme/responsive.scss b/app/javascript/styles/mastodon-material/theme/responsive.scss
similarity index 89%
rename from app/javascript/styles/material-black/theme/responsive.scss
rename to app/javascript/styles/mastodon-material/theme/responsive.scss
index 8618f7ed7..53635cee4 100644
--- a/app/javascript/styles/material-black/theme/responsive.scss
+++ b/app/javascript/styles/mastodon-material/theme/responsive.scss
@@ -1,10 +1,3 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
.tabs-bar {
background: $top-bar-color;
@@ -52,6 +45,12 @@
.columns-area--mobile {
.column { margin: 0 !important }
+
+ .account__header {
+ &__account-note,
+ &__bio .account__header__content { padding: 8px 16px }
+ }
+
.search__input { padding: 16px 46px }
.search__icon {
@@ -93,6 +92,12 @@
//single column mode
@media screen and (min-width: 631px) {
+ .column:first-child,
+ .drawer:first-child { padding-left: 8px }
+
+ .column:last-child,
+ .drawer:last-child { padding-right: 8px }
+
.tabs-bar__link {
&:hover {
background: $tab-indicator-bg-hover-color;
diff --git a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss b/app/javascript/styles/mastodon-material/theme/statuses.scss
similarity index 91%
rename from app/javascript/styles/mastodon-material-dark/theme/statuses.scss
rename to app/javascript/styles/mastodon-material/theme/statuses.scss
index 7e4374014..1c2408bce 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
+++ b/app/javascript/styles/mastodon-material/theme/statuses.scss
@@ -1,10 +1,3 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
.status {
padding: 12px 12px 4px 70px;
border-bottom: 1px solid $border-color;
@@ -42,16 +35,11 @@
p { margin-bottom: 16px }
- .status__content__spoiler-link {
- background: transparent;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
- }
+ .status__content__spoiler-link { @include button-type($button-on-status) }
&__spoiler-link {
border: 0;
+ margin: 0 4px;
color: $text-button-color;
}
@@ -261,10 +249,7 @@ a.status-card {
}
}
- .button.logo-button {
- margin-bottom: 16px;
- line-height: 36px;
- }
+ .button.logo-button { margin-bottom: 16px }
}
// search user trends
diff --git a/app/javascript/styles/mastodon-material/theme/theme.scss b/app/javascript/styles/mastodon-material/theme/theme.scss
new file mode 100644
index 000000000..34c523277
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/theme.scss
@@ -0,0 +1,6 @@
+/*
+* Mastodon Material 0.3.0
+* Copyright (C) 2021 Rintan, Genbu Project
+*/
+
+@import 'about', 'account', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/variables.scss b/app/javascript/styles/mastodon-material/theme/variables.scss
new file mode 100644
index 000000000..2ad8824b8
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/variables.scss
@@ -0,0 +1 @@
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/widgets.scss b/app/javascript/styles/mastodon-material/theme/widgets.scss
new file mode 100644
index 000000000..9090ea45f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/theme/widgets.scss
@@ -0,0 +1,123 @@
+.hero-widget {
+ @include shadow-2dp;
+ margin-bottom: 16px;
+
+ &__img {
+ border-radius: $card-radius $card-radius 0 0;
+ background: $card-bg-color;
+
+ img { border-radius: $card-radius $card-radius 0 0 }
+ }
+
+ &__text {
+ background: $card-bg-color;
+ padding: 16px;
+ color: $primary-text-color;
+ border-radius: 0 0 $card-radius $card-radius;
+ }
+}
+
+.endorsements-widget {
+ padding-bottom: 8px;
+ margin-bottom: 8px;
+
+ h4 {
+ padding: 12px 16px;
+ color: $section-text-color;
+ }
+
+ .account { padding: 8px 16px }
+}
+
+.trends-widget h4 { color: $section-text-color }
+
+.placeholder-widget {
+ border-radius: 0;
+ border: none;
+ color: $tips-text-color;
+ margin-bottom: 16px;
+}
+
+.directory__tag {
+ margin-bottom: 16px;
+
+ &>a,
+ &>div {
+ @include shadow-2dp;
+ background: $card-bg-color;
+ border-radius: $card-radius;
+ padding: 16px;
+
+ &:active,
+ &:focus,
+ &:hover { background: $card-bg-color }
+ }
+
+ h4 {
+ color: $primary-text-color;
+
+ .fa { color: $icon-color }
+
+ small { color: $info-text-color }
+ }
+}
+
+.contact-widget {
+ color: $ui-text-color;
+
+ h4 { color: $ui-text-color }
+
+ .account { padding: 4px 0 8px }
+
+ &>a {
+ padding: 0 8px 4px;
+ color: $primary-text-color;
+ }
+}
+
+.box-widget {
+ @include shadow-2dp;
+ padding: 16px;
+ border-radius: $card-radius;
+ background: $card-bg-color;
+}
+
+.rich-formatting {
+ color: $ui-text-color;
+
+ h1, h2, h3, h4, h5, h6 { color: $primary-text-color }
+
+ a { color: $link-text-color }
+
+ li, p { color: $ui-text-color }
+}
+
+.table-of-contents {
+ background: $bg-color;
+ border-radius: 0;
+
+ li a {
+ padding: 16px;
+ color: $ui-text-color;
+ border-bottom: 1px solid $border-color;
+ }
+}
+
+.page-header {
+ background: $card-bg-color;
+ padding: 42px 16px;
+ margin: 16px 0;
+
+ h1 {
+ color: $primary-text-color;
+ margin-bottom: 8px;
+ }
+
+ p { color: $ui-text-color }
+}
+
+.memoriam-widget,
+.page-header {
+ @include shadow-4dp;
+ border-radius: $card-radius;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black.scss b/app/javascript/styles/material-black.scss
index 19f29bc08..6383c8bd1 100644
--- a/app/javascript/styles/material-black.scss
+++ b/app/javascript/styles/material-black.scss
@@ -1,2 +1,2 @@
@import 'application';
-@import 'material-black/loader';
\ No newline at end of file
+@import 'mastodon-material/profiles/material-black/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/black.scss b/app/javascript/styles/material-black/color/black.scss
deleted file mode 100644
index 693caa813..000000000
--- a/app/javascript/styles/material-black/color/black.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #000000;
-$menu-bg-color: #121212;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #121212;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #000000;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #1e1e1e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #121212;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #1e1e1e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #1e1e1e;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #121212;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/mastodon-dark.scss b/app/javascript/styles/material-black/color/mastodon-dark.scss
deleted file mode 100644
index b2e6bf27a..000000000
--- a/app/javascript/styles/material-black/color/mastodon-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9baec8;
-$ui-text-color: #fff;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #606984;
-$tips-text-color: #6d7889;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4ea2df;
-$menu-text-color: #282c37;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #191b22;
-$menu-bg-color: #d9e1e8;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #313543;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #282c37;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #42485a;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #393f4f;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#42485a, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #9baec8;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-bg-hover-color: lighten($bg-color, 14%);
-$icon-bg-active-color: lighten($bg-color, 18%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #fff;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($primary-color, 18%);
-
-// Border color
-$border-color: #393f4f;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
-
-// App bar color
-$top-bar-color: #313543;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: #d9e1e8;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #1f232b;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/v1-dark.scss b/app/javascript/styles/material-black/color/v1-dark.scss
deleted file mode 100644
index d31fbf04f..000000000
--- a/app/javascript/styles/material-black/color/v1-dark.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #303030;
-$menu-bg-color: #424242;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #424242;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #424242;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
-
-// App bar color
-$top-bar-color: #1565C0;
-$search-bar-color: lighten($bg-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #424242;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/v1-light.scss b/app/javascript/styles/material-black/color/v1-light.scss
deleted file mode 100644
index 2888e81b4..000000000
--- a/app/javascript/styles/material-black/color/v1-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$top-bar-unread-icon-color: darken($primary-color, 30%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #2196f3;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/v2-light.scss b/app/javascript/styles/material-black/color/v2-light.scss
deleted file mode 100644
index fd9469961..000000000
--- a/app/javascript/styles/material-black/color/v2-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #ffffff;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: $bg-color;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: $bg-color;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
-$scroll-bar-thumb-active-color: darken($bg-color, 38%);
-
-// App bar color
-$top-bar-color: $bg-color;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/custom_color.scss b/app/javascript/styles/material-black/custom_color.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/material-black/custom_color.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/custom_config.scss b/app/javascript/styles/material-black/custom_config.scss
deleted file mode 100644
index b85ed3d23..000000000
--- a/app/javascript/styles/material-black/custom_config.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your settings below
-@import 'color/black';
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/custom_layout.scss b/app/javascript/styles/material-black/custom_layout.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/material-black/custom_layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/icon_config.scss b/app/javascript/styles/material-black/icon_config.scss
deleted file mode 100644
index 99046e176..000000000
--- a/app/javascript/styles/material-black/icon_config.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
-
-
-// Reply icon settings
-$reply-icon: "reply";
-//$reply-icon: "comment"; // blooming
-
-
-// Material Design Icon settings
-// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-//$icon-font-source: google; // Google Fonts
-//$icon-font-source: github; // GitHub
-$icon-font-source: self; // Self-hosting
-
-// Material Icon style settings
-$icon-font-style: filled;
-//$icon-font-style: outlined;
-//$icon-font-style: round;
-//$icon-font-style: sharp;
-//$icon-font-style: two-tone;
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/layout/material-v1.scss b/app/javascript/styles/material-black/layout/material-v1.scss
deleted file mode 100644
index 23c9a0616..000000000
--- a/app/javascript/styles/material-black/layout/material-v1.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 2px;
-
-
-// Search bar radius
-$search-bar-radius: 2px;
-
-
-// Bar radius settings
-$bar-radius: 0;
-
-
-// Button radius settings
-$button-radius: 2px;
-
-
-// Card radius settings
-$card-radius: 2px;
-
-
-// Dialog radius settings
-$dialog-radius: 2px;
-
-
-// Menu radius settings
-$menu-radius: 2px;
-
-
-// Media radius settings
-$media-radius: 0;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 0;
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 2px // Material v1 square
-
-
-// Chip settings
-$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px;
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/loader.scss b/app/javascript/styles/material-black/loader.scss
deleted file mode 100644
index 1ddf9883f..000000000
--- a/app/javascript/styles/material-black/loader.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'theme/theme';
-@import 'theme/material-icons';
-
-// Plugins
-@import 'plugins/astarte';
-//@import 'plugins/cards';
-//@import 'plugins/dense';
-//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/plugins/astarte.scss b/app/javascript/styles/material-black/plugins/astarte.scss
deleted file mode 100644
index 8c2e534bb..000000000
--- a/app/javascript/styles/material-black/plugins/astarte.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.announcements {
- li {
- padding: 8px 16px;
- background: $card-bg-color;
- border-radius: $card-radius;
- border: 1px solid $border-color;
- }
-
- &__icon {
- margin: 0;
- right: 16px;
- height: 20px;
-
- .icon-button {
- @include icon-button;
-
- &:hover { background: transparent }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/plugins/cards.scss b/app/javascript/styles/material-black/plugins/cards.scss
deleted file mode 100644
index d9b3906a5..000000000
--- a/app/javascript/styles/material-black/plugins/cards.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@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: $bg-color }
-}
-
-.status {
- border-bottom: 0;
- border-radius: $card-radius;
- background: $card-bg-color;
-
- &__prepend { padding: 8px 8px 2px 0 }
-}
-
-.account { border-bottom: 0 !important }
-
-.status__wrapper.status__wrapper,
-.notification.notification {
- @include shadow-1dp;
- margin: 8px 2px;
- border-radius: $card-radius;
- background: $card-bg-color;
-}
-
-.notification .status__wrapper.status__wrapper { box-shadow: none !important }
-
-.notification__filter-bar {
- @include non-overflow-shadow-4dp;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/plugins/dense.scss b/app/javascript/styles/material-black/plugins/dense.scss
deleted file mode 100644
index 413336d04..000000000
--- a/app/javascript/styles/material-black/plugins/dense.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.drawer {
- &__header { height: 48px }
-
- &__tab { margin: 6px auto 6px }
-}
-
-.column { margin: 10px 5px }
-
-.column-header {
- height: 48px;
-
- > button { padding: 12px 16px }
-
- &__buttons { height: 48px }
-
- &__button { margin: 6px }
-}
-
-.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 }
-
- &__buttons-wrapper {
- .icon-button,
- .text-icon-button { padding: 4px }
- }
- }
-}
-
-.status {
- padding: 8px 8px 4px 66px;
-
- &__expand { width: 66px }
-
- &__info { padding-right: 0 }
-
- &__avatar {
- left: 8px;
- top: 10px;
- }
-
- &__content { padding-top: 2px }
-
- &__action-bar-button {
- margin: 0 4px;
-
- &.icon-button { padding: 4px }
- }
-
- &__action-bar-dropdown {
- width: 28px !important;
- height: 28px !important;
- margin: 0 4px;
-
- .icon-button { padding: 4px }
- }
-}
-
-.detailed-status {
- padding: 14px;
-
- &__meta { margin-top: 14px }
-
- &__action-bar { padding: 10px 0 }
-}
-
-.reply-indicator { padding: 8px }
-
-.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/plugins/plus.scss b/app/javascript/styles/material-black/plugins/plus.scss
deleted file mode 100644
index e356e937b..000000000
--- a/app/javascript/styles/material-black/plugins/plus.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@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 }
-}
-
-// exception
-.media-modal__overlay .picture-in-picture__footer .icon-button,
-.status__action-bar-button.icon-button--with-counter { background: transparent }
-
-// favorite icon
-.star-icon.active,
-.star-icon.icon-button.active.activate,
-.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
-
-.notification__favourite-icon-wrapper {
- left: -34px;
-
- .star-icon {
- border-radius: 50%;
- width: 28px;
- height: 28px;
- vertical-align: baseline;
- font-size: 18px;
-
- &.fa-fw::before { vertical-align: middle }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/_functions.scss b/app/javascript/styles/material-black/theme/_functions.scss
deleted file mode 100644
index 0374231ed..000000000
--- a/app/javascript/styles/material-black/theme/_functions.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@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-black/theme/_mixins.scss b/app/javascript/styles/material-black/theme/_mixins.scss
deleted file mode 100644
index fcd556f2b..000000000
--- a/app/javascript/styles/material-black/theme/_mixins.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-@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 shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
-@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
-@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
-@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
-@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
-@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
-@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
-@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
-
-@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
-
-@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
-
-@mixin search-bar-hover {
- @if $search-bar-hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- }
-}
-
-@mixin outlined-chip {
- @if $outlined-chip {
- .reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $outlined-chip-selected-border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
- }
- }
-}
-
-@mixin button-shadow {
- @if $button-shadow {
- .button,
- .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
- }
-}
-
-@mixin text-area-border {
- @if $text-area-border == underlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius $card-radius 0 0;
- border-bottom: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
- }
- }
-
- @if $text-area-border == outlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius;
- border: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus {
- border: 2px solid $border-active-color;
- padding: 7px 41px 7px 15px;
- }
- }
- }
-}
-
-@mixin icon-button {
- width: 20px !important;
- height: 20px !important;
- font-size: 20px !important;
-}
-
-// check background-image value
-@mixin bg-image {
- @if $bg-image == none {
- } @else { background-image: url($bg-image) }
-}
-
-
-@mixin icon-font-style {
- @if $icon-font-style == filled { font-family: "Material Icons" }
- @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
- @if $icon-font-style == round { font-family: "Material Icons Round" }
- @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
- @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
-}
-
-@mixin icon-font {
- @if $icon-font-source == github {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-
- @if $icon-font-source == google {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
- }
- }
- }
-
- @if $icon-font-source == self {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons"),
- url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/account.scss b/app/javascript/styles/material-black/theme/account.scss
deleted file mode 100644
index 551b4f4a8..000000000
--- a/app/javascript/styles/material-black/theme/account.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.account {
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .account__display-name,
- .account__display-name strong { color: $primary-text-color }
-
- &__avatar {
- border-radius: $avater-radius;
- width: 40px;
- height: 40px;
-
- &-overlay {
- &-base {
- border-radius: $avater-radius;
- width: 44px;
- height: 44px;
- background-size: 44px;
- }
-
- &-overlay { border-radius: $avater-radius }
- }
- }
-
- &__avatar-wrapper {
- margin-left: 0;
- margin-right: 16px;
- }
-
- &__header {
- &__bar {
- background: $card-bg-color;
- padding: 8px;
- border-bottom: none;
-
- .avatar .account__avatar { border: none }
- }
-
- &__tabs {
- padding: 8px;
-
- &__name {
- padding: 8px;
-
- h1 {
- color: $primary-text-color;
-
- small { color: $secondary-text-color }
- }
- }
-
- &__buttons {
- .icon-button {
- @include icon-button;
- border: none;
- border-radius: 50%;
- padding: 8px;
- margin-left: 8px;
- }
- }
- }
-
- &__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-bg-color;
-
- a,
- &__mark { color: $primary-text-color }
- }
-
- dl {
- border-bottom: 1px solid $border-color;
-
- &:first-child .verified { border-radius: 0 }
-
- &:last-child { border-bottom: 0 }
- }
-
- dt {
- color: $primary-text-color;
- background: $list-bg-inactive-color;
- }
-
- dd { color: $primary-text-color }
- }
- }
- }
-
- &__account-note {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
-
- label {
- color: $ui-text-color;
- margin-bottom: 8px;
- }
-
- textarea {
- color: $primary-text-color;
- padding: 8px 16px;
- border-radius: 0;
-
- &:focus { background: transparent }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- &__content { color: $secondary-text-color }
- }
-
- &__section-headline {
- background: $text-tab-bg-color;
- border-bottom: 1px solid $border-color;
-
- a {
- padding: 16px 0;
- color: $text-tab-indicator-color;
-
- &.active {
- color: $text-tab-indicator-active-color;
- border-bottom: 4px solid $text-tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $text-tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $text-tab-indicator-bg-hover-color }
- }
- }
-
- &__relationship {
- padding: 0;
- height: auto;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-}
-
-.account-role {
- padding: 4px 8px;
- border-radius: 17px;
- color: $ui-text-color;
- background-color: $contained-chip-color;
-}
-
-.accounts-table__count {
- color: $ui-text-color;
-
- small { color: $secondary-text-color }
-}
-
-.account-gallery {
- &__item { border-radius: 0 }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/basics.scss b/app/javascript/styles/material-black/theme/basics.scss
deleted file mode 100644
index bb8f68bf0..000000000
--- a/app/javascript/styles/material-black/theme/basics.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-body,
-body.embed { background: $bg-color }
-
-.focusable:focus { background: transparent }
-
-// Chrome & Safari scroll bar
-::-webkit-scrollbar-thumb {
- background: $scroll-bar-thumb-color;
-
- &:hover { background: $scroll-bar-thumb-hover-color }
- &:active { background: $scroll-bar-thumb-active-color }
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
- background: transparent !important;
-}
-
-// Firefox scroll bar
-html { scrollbar-color: $scroll-bar-thumb-color transparent }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/columns.scss b/app/javascript/styles/material-black/theme/columns.scss
deleted file mode 100644
index 77a5c777a..000000000
--- a/app/javascript/styles/material-black/theme/columns.scss
+++ /dev/null
@@ -1,511 +0,0 @@
-@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-bg-color;
- opacity: $column-transparency;
- }
-
- &:last-child { box-shadow: none }
-}
-
-.column-header {
- background: $top-bar-color;
- border-radius: $bar-radius;
- height: 56px;
-
- > button {
- padding: 16px;
- color: $top-bar-text-color;
- }
-
- &>.column-header__back-button { color: $top-bar-icon-color }
-
- &.active {
- .column-header__icon {
- color: $top-bar-unread-icon-color;
- text-shadow: none;
- }
- }
-
- &__icon {
- margin-right: 16px;
- color: $top-bar-icon-color;
- font-size: 20px;
- }
-
- &__buttons { height: 56px }
-
- &__button {
- @include icon-button;
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 8px;
- margin: 10px;
- border-radius: 50%;
- box-sizing: content-box;
-
- &.active {
- color: $top-bar-icon-active-color;
- background: $icon-bg-active-color;
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &__setting-btn {
- color: $icon-button-color;
- padding: 8px 0;
-
- &:hover {
- color: $icon-button-hover-color;
- text-decoration: none;
- }
-
- .fa { font-size: 20px }
-
- span { vertical-align: middle }
- }
-
- &__setting-arrows {
- font-size: 16px;
- border-bottom: 8px;
-
- .column-header__setting-btn {
- padding: 8px;
- border-radius: 50%;
-
- &:last-child { padding-right: 8px }
- }
- }
-
- &__wrapper {
- @include shadow-4dp;
- border-radius: $bar-radius;
- opacity: $bar-transparency;
-
- .announcements { border-top: 1px solid $border-color }
-
- &.active {
- @include shadow-4dp;
-
- &::before { background: transparent }
- }
- }
-
- &__collapsible {
- color: $ui-text-color;
- background: $card-bg-color;
- border-top: 1px solid $border-color;
-
- &-inner {
- background: $card-bg-color;
- padding: 16px;
- }
-
- &.collapsed { border-top: none }
- }
-
- &__back-button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- margin: 8px 10px;
- padding: 10px;
- font-size: 20px;
-
- span { display: none }
- }
-}
-
-.column-subheading {
- color: $section-text-color;
- background: $bg-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
-}
-
-.column-link {
- color: $ui-text-color;
- background: $bg-color;
- padding: 16px;
- border-radius: $nav-drawer-item-radius;
-
- &:hover { background: $list-bg-hover-color }
-
- &:active,
- &:focus { background: $list-bg-active-color }
-
- &__icon {
- margin-right: 32px;
- font-size: 20px;
- }
-
- &--transparent {
- &.active {
- color: $ui-text-color;
- background: $menu-bg-active-color;
-
- &:hover { background: $menu-bg-active-hover-color }
-
- .fa { color: $icon-color }
- }
-
- &:hover {
- color: $ui-text-color;
-
- .fa { color: $icon-color }
- }
- }
-
- .fa { color: $icon-color }
-}
-
-.column-settings {
- &__section {
- color: $section-text-color;
- margin-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
-
- &--slim-button { top: -54px }
-}
-
-.column-inline-form {
- padding: 16px 0 16px 16px;
- background: $card-bg-color;
-
- .icon-button { margin: 0 16px }
-}
-
-.columns-area {
- @include bg-image;
- background-size: contain;
-}
-
-.setting-text {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border-radius: $bar-radius;
-
- &::placeholder { color: $tips-text-color }
-}
-
-.empty-column-indicator {
- color: $secondary-text-color;
- background: $card-bg-color;
- font-size: 16px;
- contain: initial; // padding fix
-}
-
-.conversation {
- border-bottom: 1px solid $border-color;
- padding: 12px;
- background: $list-bg-inactive-color;
-
- &--unread {
- background: $list-bg-color;
-
- .conversation__content__relative-time { color: $info-text-color }
- }
-
- &__unread { background: $primary-color }
-
- &__avatar { padding: 0 16px 0 0 }
-
- &__content {
- padding: 0;
-
- &__relative-time {
- font-size: 14px;
- color: $info-text-color;
- }
-
- &__names,
- &__names a {
- color: $primary-text-color;
- font-size: 16px;
- }
- }
-}
-
-// read status in notification column
-.muted {
- .status {
- &__content {
- color: $read-primary-text-color;
-
- 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-bg-hover-color }
-}
-
-.getting-started {
- background: $bg-color;
- color: $ui-text-color;
- opacity: $column-transparency;
-
- &__wrapper {
- background: $bg-color;
- height: auto !important;
- padding-bottom: 8px;
- border-bottom: 1px solid $border-color;
- }
-
- &__footer {
- padding: 16px;
-
- p {
- color: $secondary-text-color;
- font-size: 12px;
- margin-bottom: 16px;
- }
-
- a { color: $ui-text-color }
-
- p a { color: $link-text-color }
- }
-
- &__trends {
- background: $bg-color;
- margin-bottom: 0;
- opacity: $column-transparency;
-
- h4 {
- color: $section-text-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
- border-bottom: none;
- }
- }
-}
-
-.trends {
- &__header {
- color: $section-text-color;
- background: transparent;
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .fa { margin-right: 8px }
- }
-
- &__item {
- padding: 16px;
- border-bottom: none;
-
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
- }
-
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
- }
- }
-}
-
-.setting-toggle {
- &__label {
- color: $ui-text-color;
- margin: 8px 8px 8px 14px;
- }
-}
-
-.announcements {
- background: $card-bg-color;
- padding: 0 8px;
-
- &__container { color: $primary-text-color }
-
- &__item {
- padding: 16px;
- font-size: 16px;
-
- &__unread { background: $badge-color }
- }
-
- &__pagination {
- color: $ui-text-color;
- padding: 16px;
- bottom: 0;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- margin: 0 4px;
- line-height: normal !important;
- box-sizing: content-box;
- }
-
- span { vertical-align: super }
- }
-}
-
-.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 }
-
-@include outlined-chip;
-
-.reactions-bar {
- margin-top: 16px;
- width: calc(100% - 72px);
-
- .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: $chip-selected-text-color }
-
- &:hover { background-color: $contained-chip-selected-color }
- }
-
- &__emoji {
- width: 24px;
- height: 24px;
- margin: 4px 0 4px 2px;
- }
-
- &__count {
- font-size: 16px;
- margin: 0 12px 0 8px;
- color: $secondary-text-color;
- }
-
- &:hover { background: $contained-chip-hover-color }
- }
-}
-
-.notification {
- &__filter-bar {
- background: $tab-bg-color;
- border-bottom: 1px solid $border-color;
- z-index: 1;
- opacity: $bar-transparency;
-
- button {
- background: $tab-bg-color;
- color: $tab-indicator-color;
- font-size: 16px;
-
- span { font-size: 14px }
-
- &.active {
- color: $tab-indicator-active-color;
- border-bottom: 4px solid $tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
- }
-
- &__message {
- color: $secondary-text-color;
- margin: 0 16px 0 70px;
- font-size: 16px;
- }
-
- &__display-name:hover { color: inherit }
-}
-
-.notification-favourite .status.status-direct {
- .icon-button.disabled { color: $disabled-icon-color }
-}
-
-.relationship-tag {
- color: $ui-text-color;
- background-color: $relationship-tag-color;
- font-size: 12px;
- border-radius: 17px;
- padding: 4px 8px;
- opacity: 1;
-}
-
-.attachment-list__list a { color: $secondary-text-color }
-
-// unread notification
-.notification.unread:before, .status__wrapper.unread:before { border-left: none }
-
-.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/containers.scss b/app/javascript/styles/material-black/theme/containers.scss
deleted file mode 100644
index 09af289b0..000000000
--- a/app/javascript/styles/material-black/theme/containers.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.public-layout {
- .header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- margin: 16px 0;
-
- .brand:hover { background: $tab-indicator-bg-hover-color }
-
- .nav-link,
- .nav-link.optional {
- color: $top-bar-text-color;
-
- &:hover {
- background: $tab-indicator-bg-hover-color;
- text-decoration: none;
- }
- }
-
- .nav-button {
- background: transparent;
- margin: 0;
- border-radius: 0;
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
-
- .detailed-status__meta { margin-top: 16px }
- }
-
- .detailed-status { padding: 16px }
-
- .footer {
- padding-top: 16px;
- padding-bottom: 64px;
- color: $ui-text-color;
-
- h4 { color: $ui-text-color }
-
- ul a { color: $secondary-text-color }
-
- .grid .column-2 h4 a { color: $ui-text-color }
-
- .brand {
- svg { fill: $icon-color }
-
- &:hover svg { fill: $icon-hover-color }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/control.scss b/app/javascript/styles/material-black/theme/control.scss
deleted file mode 100644
index a205a4cb7..000000000
--- a/app/javascript/styles/material-black/theme/control.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@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-black/theme/icons.scss b/app/javascript/styles/material-black/theme/icons.scss
deleted file mode 100644
index 987767544..000000000
--- a/app/javascript/styles/material-black/theme/icons.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@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.fa-lock { text-transform: none }
-
-.icon-with-badge__badge {
- background: $badge-color;
- border: none;
- padding: 2px 6px;
- border-radius: 12px;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/statuses.scss b/app/javascript/styles/material-black/theme/statuses.scss
deleted file mode 100644
index 7e4374014..000000000
--- a/app/javascript/styles/material-black/theme/statuses.scss
+++ /dev/null
@@ -1,292 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.status {
- padding: 12px 12px 4px 70px;
- border-bottom: 1px solid $border-color;
-
- &__expand { width: 70px }
-
- &__info {
- font-size: $name-font-size;
- padding-right: 4px;
- }
-
- &__relative-time { color: $info-text-color }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
-
- &__content {
- font-size: $status-font-size;
- padding-top: 4px;
- color: $primary-text-color;
-
- a {
- color: $link-text-color;
-
- &.unhandled-link { color: $link-text-color }
- }
-
- p { margin-bottom: 16px }
-
- .status__content__spoiler-link {
- 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 {
- margin-top: 4px;
-
- &__counter {
- margin-right: 6px;
-
- &__label {
- font-size: 14px;
- color: $info-text-color;
- }
- }
- }
-
- &__action-bar-button {
- margin-right: 4px;
-
- &.icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &--with-counter {
- margin-right: 4px;
- width: auto !important;
-
- &:hover { background: transparent }
- }
- }
- }
-
- &__action-bar-dropdown {
- width: 36px !important;
- height: 36px !important;
- box-sizing: content-box;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
-
- &:hover {
- color:$icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
- }
-
- &__prepend {
- color: $secondary-text-color;
- margin-left: 64px;
-
- .status__display-name strong { color: $secondary-text-color }
- }
-
- &.status-direct:not(.read) {
- background: transparent;
- border-bottom-color: $border-color;
- }
-
- &__visibility-icon { color: $icon-color }
-}
-
-.status-card {
- color: $icon-color;
- border-color: $border-color;
- outline: none;
- margin-top: 16px;
-
- &__image {
- background: transparent;
-
- &>.fa {
- font-size: 26px;
- }
- }
-
- &__title {
- color: $primary-text-color;
- margin-bottom: 6px;
- }
-
- &__description { color: $secondary-text-color }
-
- &__actions {
- &>div {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- }
-
- button,
- a {
- color: $media-icon-color;
- font-size: 20px;
- }
-
- a { bottom: auto }
- }
-
- &.compact {
- border-color: $border-color;
- outline: none;
- background: transparent;
-
- .status-card {
- &__content { padding: 12px }
- &__image { flex: 0 0 64px }
- }
-
- &:hover { background-color: transparent !important }
- }
-
- &.horizontal {
- border-radius: 0;
-
- .status-card {
- &__image-preview { border-radius: 0 }
-
- &__image-image { border-radius: 0 }
- }
- }
-}
-
-a.status-card {
- &:hover { background-color: $card-bg-color }
-}
-
-.embed .status,
-.public-layout .status { padding: 16px 16px 16px 80px }
-
-// Detailed status in mobile
-.status.light {
- .status {
- &__display-name { color: $primary-text-color }
- &__relative-time { color: $info-text-color }
- &__content { color: $primary-text-color }
- }
-
- .display-name { color: $secondary-text-color }
- .display-name strong { color: $primary-text-color }
-}
-
-.detailed-status {
- background: $card-bg-color;
- padding: 16px;
-
- &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__meta {
- margin-top: 16px;
- color: $info-text-color;
- }
-
- &__action-bar {
- background: $card-bg-color;
- border-top: none;
- border-bottom: 1px solid $border-color;
- padding: 8px 0;
- }
-
- &__action-bar-dropdown {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
- }
-
- &__button {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-
- .button.logo-button {
- margin-bottom: 16px;
- line-height: 36px;
- }
-}
-
-// search user trends
-.display-name {
- &__html { color: $primary-text-color }
- &__account { color: $secondary-text-color }
-}
-
-.activity-stream {
- @include shadow-1dp;
- margin-bottom: 16px;
- border-radius: $card-radius;
-
- .entry {
- background: $card-bg-color;
-
- &:first-child {
- .detailed-status,
- .load-more,
- .status { border-radius: $card-radius $card-radius 0 0 }
- }
- }
-}
-
-.entry.entry-center { border-bottom: 1px solid $border-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/theme.scss b/app/javascript/styles/material-black/theme/theme.scss
deleted file mode 100644
index 367893682..000000000
--- a/app/javascript/styles/material-black/theme/theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
-* Mastodon Material 0.2.1
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/variables.scss b/app/javascript/styles/material-black/theme/variables.scss
deleted file mode 100644
index 0b948881b..000000000
--- a/app/javascript/styles/material-black/theme/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@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-black/theme/widgets.scss b/app/javascript/styles/material-black/theme/widgets.scss
deleted file mode 100644
index 4abdfbae9..000000000
--- a/app/javascript/styles/material-black/theme/widgets.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.hero-widget {
- @include shadow-2dp;
- margin-bottom: 16px;
-
- &__img {
- border-radius: $card-radius $card-radius 0 0;
- background: $card-bg-color;
-
- img { border-radius: $card-radius $card-radius 0 0 }
- }
-
- &__text {
- background: $card-bg-color;
- padding: 16px;
- color: $primary-text-color;
- border-radius: 0 0 $card-radius $card-radius;
- }
-}
-
-.endorsements-widget {
- padding-bottom: 8px;
- margin-bottom: 8px;
-}
-
-.trends-widget h4 { color: $section-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark.scss b/app/javascript/styles/material-dark.scss
index 8cfd6c6be..9a4be9797 100644
--- a/app/javascript/styles/material-dark.scss
+++ b/app/javascript/styles/material-dark.scss
@@ -1,2 +1,2 @@
@import 'application';
-@import 'material-dark/loader';
\ No newline at end of file
+@import 'mastodon-material/profiles/material-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/black.scss b/app/javascript/styles/material-dark/color/black.scss
deleted file mode 100644
index 693caa813..000000000
--- a/app/javascript/styles/material-dark/color/black.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #000000;
-$menu-bg-color: #121212;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #121212;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #000000;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #1e1e1e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #121212;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #1e1e1e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #1e1e1e;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #121212;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/mastodon-dark.scss b/app/javascript/styles/material-dark/color/mastodon-dark.scss
deleted file mode 100644
index b2e6bf27a..000000000
--- a/app/javascript/styles/material-dark/color/mastodon-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9baec8;
-$ui-text-color: #fff;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #606984;
-$tips-text-color: #6d7889;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4ea2df;
-$menu-text-color: #282c37;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #191b22;
-$menu-bg-color: #d9e1e8;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #313543;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #282c37;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #42485a;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #393f4f;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#42485a, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #9baec8;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-bg-hover-color: lighten($bg-color, 14%);
-$icon-bg-active-color: lighten($bg-color, 18%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #fff;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($primary-color, 18%);
-
-// Border color
-$border-color: #393f4f;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
-
-// App bar color
-$top-bar-color: #313543;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: #d9e1e8;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #1f232b;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/mastodon-light.scss b/app/javascript/styles/material-dark/color/mastodon-light.scss
deleted file mode 100644
index 7e94b8de7..000000000
--- a/app/javascript/styles/material-dark/color/mastodon-light.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #217aba;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #eff3f5;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($bg-color, 6%);
-$menu-bg-active-color: darken($bg-color, 10%);
-$menu-bg-active-hover-color: darken($bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #282c37;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: darken($bg-color, 4%);
-$icon-bg-active-color: darken($bg-color, 8%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: $primary-color;
-$toggle-track-active-color: lighten($primary-color, 26%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: #ccd7e0;
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #ffffff;
-$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: #282c37;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #e6ebf0;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/plus-classic.scss b/app/javascript/styles/material-dark/color/plus-classic.scss
deleted file mode 100644
index d94bbe90f..000000000
--- a/app/javascript/styles/material-dark/color/plus-classic.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #db4437;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/v1-dark.scss b/app/javascript/styles/material-dark/color/v1-dark.scss
deleted file mode 100644
index d31fbf04f..000000000
--- a/app/javascript/styles/material-dark/color/v1-dark.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #303030;
-$menu-bg-color: #424242;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #424242;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #424242;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
-
-// App bar color
-$top-bar-color: #1565C0;
-$search-bar-color: lighten($bg-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #424242;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/v1-light.scss b/app/javascript/styles/material-dark/color/v1-light.scss
deleted file mode 100644
index 2888e81b4..000000000
--- a/app/javascript/styles/material-dark/color/v1-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$top-bar-unread-icon-color: darken($primary-color, 30%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #2196f3;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/v2-dark.scss b/app/javascript/styles/material-dark/color/v2-dark.scss
deleted file mode 100644
index 025b238f5..000000000
--- a/app/javascript/styles/material-dark/color/v2-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #121212;
-$menu-bg-color: #1e1e1e;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #1e1e1e;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #1e1e1e;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($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-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #1e1e1e;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/v2-light.scss b/app/javascript/styles/material-dark/color/v2-light.scss
deleted file mode 100644
index fd9469961..000000000
--- a/app/javascript/styles/material-dark/color/v2-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #ffffff;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: $bg-color;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: $bg-color;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
-$scroll-bar-thumb-active-color: darken($bg-color, 38%);
-
-// App bar color
-$top-bar-color: $bg-color;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/custom_color.scss b/app/javascript/styles/material-dark/custom_color.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/material-dark/custom_color.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/custom_config.scss b/app/javascript/styles/material-dark/custom_config.scss
deleted file mode 100644
index 2a0c9e0fd..000000000
--- a/app/javascript/styles/material-dark/custom_config.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your settings below
-@import 'color/v2-dark';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/custom_layout.scss b/app/javascript/styles/material-dark/custom_layout.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/material-dark/custom_layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/icon_config.scss b/app/javascript/styles/material-dark/icon_config.scss
deleted file mode 100644
index 99046e176..000000000
--- a/app/javascript/styles/material-dark/icon_config.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
-
-
-// Reply icon settings
-$reply-icon: "reply";
-//$reply-icon: "comment"; // blooming
-
-
-// Material Design Icon settings
-// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-//$icon-font-source: google; // Google Fonts
-//$icon-font-source: github; // GitHub
-$icon-font-source: self; // Self-hosting
-
-// Material Icon style settings
-$icon-font-style: filled;
-//$icon-font-style: outlined;
-//$icon-font-style: round;
-//$icon-font-style: sharp;
-//$icon-font-style: two-tone;
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/layout/material-v1.scss b/app/javascript/styles/material-dark/layout/material-v1.scss
deleted file mode 100644
index 23c9a0616..000000000
--- a/app/javascript/styles/material-dark/layout/material-v1.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 2px;
-
-
-// Search bar radius
-$search-bar-radius: 2px;
-
-
-// Bar radius settings
-$bar-radius: 0;
-
-
-// Button radius settings
-$button-radius: 2px;
-
-
-// Card radius settings
-$card-radius: 2px;
-
-
-// Dialog radius settings
-$dialog-radius: 2px;
-
-
-// Menu radius settings
-$menu-radius: 2px;
-
-
-// Media radius settings
-$media-radius: 0;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 0;
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 2px // Material v1 square
-
-
-// Chip settings
-$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px;
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/layout/material-v2.scss b/app/javascript/styles/material-dark/layout/material-v2.scss
deleted file mode 100644
index 5700a99c8..000000000
--- a/app/javascript/styles/material-dark/layout/material-v2.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 8px;
-//$nav-bar-radius: 28px; // full radius
-
-
-// Search bar radius
-$search-bar-radius: 8px;
-//$search-bar-radius: 21px; // full rounded
-
-
-// Bar radius settings
-$bar-radius: 0;
-//$bar-radius: 8px;
-
-
-// Button radius settings
-$button-radius: 8px;
-
-
-// Card radius settings
-$card-radius: 8px;
-
-
-// Dialog radius settings
-$dialog-radius: 8px;
-
-
-// Menu radius settings
-$menu-radius: 8px;
-
-
-// Media radius settings
-$media-radius: 0;
-//$media-radius: 2px;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 8px; // corner rounded
-//$nav-drawer-item-radius: 32px; // full rounded
-//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 8px // Material v2 square
-
-
-// Chip settings
-$outlined-chip: true; // Material v2 styled outlined chip
-//$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: false; // Material v2 styled colored button without shadow
-//$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px; // Regular
-//$fab-size: 40px; // Mini
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
-//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/loader.scss b/app/javascript/styles/material-dark/loader.scss
deleted file mode 100644
index 1ddf9883f..000000000
--- a/app/javascript/styles/material-dark/loader.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'theme/theme';
-@import 'theme/material-icons';
-
-// Plugins
-@import 'plugins/astarte';
-//@import 'plugins/cards';
-//@import 'plugins/dense';
-//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/plugins/astarte.scss b/app/javascript/styles/material-dark/plugins/astarte.scss
deleted file mode 100644
index 8c2e534bb..000000000
--- a/app/javascript/styles/material-dark/plugins/astarte.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.announcements {
- li {
- padding: 8px 16px;
- background: $card-bg-color;
- border-radius: $card-radius;
- border: 1px solid $border-color;
- }
-
- &__icon {
- margin: 0;
- right: 16px;
- height: 20px;
-
- .icon-button {
- @include icon-button;
-
- &:hover { background: transparent }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/plugins/cards.scss b/app/javascript/styles/material-dark/plugins/cards.scss
deleted file mode 100644
index d9b3906a5..000000000
--- a/app/javascript/styles/material-dark/plugins/cards.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@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: $bg-color }
-}
-
-.status {
- border-bottom: 0;
- border-radius: $card-radius;
- background: $card-bg-color;
-
- &__prepend { padding: 8px 8px 2px 0 }
-}
-
-.account { border-bottom: 0 !important }
-
-.status__wrapper.status__wrapper,
-.notification.notification {
- @include shadow-1dp;
- margin: 8px 2px;
- border-radius: $card-radius;
- background: $card-bg-color;
-}
-
-.notification .status__wrapper.status__wrapper { box-shadow: none !important }
-
-.notification__filter-bar {
- @include non-overflow-shadow-4dp;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/plugins/dense.scss b/app/javascript/styles/material-dark/plugins/dense.scss
deleted file mode 100644
index 413336d04..000000000
--- a/app/javascript/styles/material-dark/plugins/dense.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.drawer {
- &__header { height: 48px }
-
- &__tab { margin: 6px auto 6px }
-}
-
-.column { margin: 10px 5px }
-
-.column-header {
- height: 48px;
-
- > button { padding: 12px 16px }
-
- &__buttons { height: 48px }
-
- &__button { margin: 6px }
-}
-
-.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 }
-
- &__buttons-wrapper {
- .icon-button,
- .text-icon-button { padding: 4px }
- }
- }
-}
-
-.status {
- padding: 8px 8px 4px 66px;
-
- &__expand { width: 66px }
-
- &__info { padding-right: 0 }
-
- &__avatar {
- left: 8px;
- top: 10px;
- }
-
- &__content { padding-top: 2px }
-
- &__action-bar-button {
- margin: 0 4px;
-
- &.icon-button { padding: 4px }
- }
-
- &__action-bar-dropdown {
- width: 28px !important;
- height: 28px !important;
- margin: 0 4px;
-
- .icon-button { padding: 4px }
- }
-}
-
-.detailed-status {
- padding: 14px;
-
- &__meta { margin-top: 14px }
-
- &__action-bar { padding: 10px 0 }
-}
-
-.reply-indicator { padding: 8px }
-
-.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/plugins/plus.scss b/app/javascript/styles/material-dark/plugins/plus.scss
deleted file mode 100644
index e356e937b..000000000
--- a/app/javascript/styles/material-dark/plugins/plus.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@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 }
-}
-
-// exception
-.media-modal__overlay .picture-in-picture__footer .icon-button,
-.status__action-bar-button.icon-button--with-counter { background: transparent }
-
-// favorite icon
-.star-icon.active,
-.star-icon.icon-button.active.activate,
-.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
-
-.notification__favourite-icon-wrapper {
- left: -34px;
-
- .star-icon {
- border-radius: 50%;
- width: 28px;
- height: 28px;
- vertical-align: baseline;
- font-size: 18px;
-
- &.fa-fw::before { vertical-align: middle }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/_functions.scss b/app/javascript/styles/material-dark/theme/_functions.scss
deleted file mode 100644
index 0374231ed..000000000
--- a/app/javascript/styles/material-dark/theme/_functions.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@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-dark/theme/_mixins.scss b/app/javascript/styles/material-dark/theme/_mixins.scss
deleted file mode 100644
index fcd556f2b..000000000
--- a/app/javascript/styles/material-dark/theme/_mixins.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-@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 shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
-@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
-@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
-@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
-@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
-@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
-@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
-@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
-
-@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
-
-@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
-
-@mixin search-bar-hover {
- @if $search-bar-hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- }
-}
-
-@mixin outlined-chip {
- @if $outlined-chip {
- .reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $outlined-chip-selected-border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
- }
- }
-}
-
-@mixin button-shadow {
- @if $button-shadow {
- .button,
- .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
- }
-}
-
-@mixin text-area-border {
- @if $text-area-border == underlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius $card-radius 0 0;
- border-bottom: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
- }
- }
-
- @if $text-area-border == outlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius;
- border: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus {
- border: 2px solid $border-active-color;
- padding: 7px 41px 7px 15px;
- }
- }
- }
-}
-
-@mixin icon-button {
- width: 20px !important;
- height: 20px !important;
- font-size: 20px !important;
-}
-
-// check background-image value
-@mixin bg-image {
- @if $bg-image == none {
- } @else { background-image: url($bg-image) }
-}
-
-
-@mixin icon-font-style {
- @if $icon-font-style == filled { font-family: "Material Icons" }
- @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
- @if $icon-font-style == round { font-family: "Material Icons Round" }
- @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
- @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
-}
-
-@mixin icon-font {
- @if $icon-font-source == github {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-
- @if $icon-font-source == google {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
- }
- }
- }
-
- @if $icon-font-source == self {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons"),
- url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/account.scss b/app/javascript/styles/material-dark/theme/account.scss
deleted file mode 100644
index 551b4f4a8..000000000
--- a/app/javascript/styles/material-dark/theme/account.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.account {
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .account__display-name,
- .account__display-name strong { color: $primary-text-color }
-
- &__avatar {
- border-radius: $avater-radius;
- width: 40px;
- height: 40px;
-
- &-overlay {
- &-base {
- border-radius: $avater-radius;
- width: 44px;
- height: 44px;
- background-size: 44px;
- }
-
- &-overlay { border-radius: $avater-radius }
- }
- }
-
- &__avatar-wrapper {
- margin-left: 0;
- margin-right: 16px;
- }
-
- &__header {
- &__bar {
- background: $card-bg-color;
- padding: 8px;
- border-bottom: none;
-
- .avatar .account__avatar { border: none }
- }
-
- &__tabs {
- padding: 8px;
-
- &__name {
- padding: 8px;
-
- h1 {
- color: $primary-text-color;
-
- small { color: $secondary-text-color }
- }
- }
-
- &__buttons {
- .icon-button {
- @include icon-button;
- border: none;
- border-radius: 50%;
- padding: 8px;
- margin-left: 8px;
- }
- }
- }
-
- &__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-bg-color;
-
- a,
- &__mark { color: $primary-text-color }
- }
-
- dl {
- border-bottom: 1px solid $border-color;
-
- &:first-child .verified { border-radius: 0 }
-
- &:last-child { border-bottom: 0 }
- }
-
- dt {
- color: $primary-text-color;
- background: $list-bg-inactive-color;
- }
-
- dd { color: $primary-text-color }
- }
- }
- }
-
- &__account-note {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
-
- label {
- color: $ui-text-color;
- margin-bottom: 8px;
- }
-
- textarea {
- color: $primary-text-color;
- padding: 8px 16px;
- border-radius: 0;
-
- &:focus { background: transparent }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- &__content { color: $secondary-text-color }
- }
-
- &__section-headline {
- background: $text-tab-bg-color;
- border-bottom: 1px solid $border-color;
-
- a {
- padding: 16px 0;
- color: $text-tab-indicator-color;
-
- &.active {
- color: $text-tab-indicator-active-color;
- border-bottom: 4px solid $text-tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $text-tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $text-tab-indicator-bg-hover-color }
- }
- }
-
- &__relationship {
- padding: 0;
- height: auto;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-}
-
-.account-role {
- padding: 4px 8px;
- border-radius: 17px;
- color: $ui-text-color;
- background-color: $contained-chip-color;
-}
-
-.accounts-table__count {
- color: $ui-text-color;
-
- small { color: $secondary-text-color }
-}
-
-.account-gallery {
- &__item { border-radius: 0 }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/base_config.scss b/app/javascript/styles/material-dark/theme/base_config.scss
deleted file mode 100644
index f36a139ba..000000000
--- a/app/javascript/styles/material-dark/theme/base_config.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@charset "UTF-8";
-
-
-// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
-
-
-// Color scheme
-@import '../color/v1-light';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'color/v2-light';
-
-
-// Layout profile
-@import '../layout/material-v1';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'layout/material-v2';
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-$search-bar-hover: false;
-
-
-// Status font size in timeline
-$status-font-size: 15px; // mastodon default
-//$status-font-size: 16px; // compatible with material design
-
-
-// Name font size in timeline status
-$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
-
-
-// Background image
-// If you want to use the local image, please put it in "../"
-$bg-image: none;
-//$bg-image: "./image.png";
-//$bg-image: "https://example.com/img/image.png";
-
-
-// Columns transparency settings
-$bar-transparency: 1.0; // opacity
-//$bar-transparency: 0.8; // semi-transparent
-
-$column-transparency: 1.0; // opacity
-//$column-transparency: 0.8; // semi-transparent
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/basics.scss b/app/javascript/styles/material-dark/theme/basics.scss
deleted file mode 100644
index bb8f68bf0..000000000
--- a/app/javascript/styles/material-dark/theme/basics.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-body,
-body.embed { background: $bg-color }
-
-.focusable:focus { background: transparent }
-
-// Chrome & Safari scroll bar
-::-webkit-scrollbar-thumb {
- background: $scroll-bar-thumb-color;
-
- &:hover { background: $scroll-bar-thumb-hover-color }
- &:active { background: $scroll-bar-thumb-active-color }
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
- background: transparent !important;
-}
-
-// Firefox scroll bar
-html { scrollbar-color: $scroll-bar-thumb-color transparent }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/button.scss b/app/javascript/styles/material-dark/theme/button.scss
deleted file mode 100644
index 5f909d843..000000000
--- a/app/javascript/styles/material-dark/theme/button.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include button-shadow;
-
-.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;
-
- &.active { color: $icon-button-active-color }
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
- }
-
- &.overlayed {
- @include icon-button;
- border-radius: 50%;
- background: $media-icon-bg-color;
- color: $media-icon-color;
- padding: 4px;
- line-height: 20px !important;
-
- &:hover {
- background: $media-icon-bg-color;
- color: $media-icon-hover-color;
- }
- }
-
- &__counter {
- width: 16px;
- margin-left: 8px;
- }
-
- &:hover {
- @include material-transition;
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
-}
-
-// Checkbox with label
-label.icon-button {
- &.active {
- color: $ui-text-color;
- background-color: transparent;
- }
-
- &:hover {
- @include material-transition;
- background-color: transparent;
- }
-}
-
-.text-icon-button {
- color: $icon-button-color;
- border-radius: 50%;
- font-size: 14px;
-
- &.active {
- background-color: $icon-bg-hover-color;
- color: $icon-button-active-color;
- }
-
- &:hover {
- background-color: $icon-bg-hover-color;
- color: $icon-button-hover-color;
- }
-}
-
-.button {
- background-color: $contained-button-color;
- border-radius: $button-radius;
-
- &:active,
- &:focus {
- background-color: $contained-button-color;
- border-radius: $button-radius;
- }
-
- &:hover {
- @include shadow-2dp;
- background-color: $contained-button-hover-color;
- }
-
- &.logo-button {
- background: $contained-button-color;
- margin: 2px;
-
- &:hover { background: $contained-button-hover-color }
-
- .button--destructive:hover { background: $contained-button-hover-color }
- }
-
- &.button--block { margin: 8px 0 }
-
- &.button-secondary {
- color: $text-button-color;
- border: none;
- box-shadow: none;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
- }
-
- &.confirmation-modal__cancel-button {
- box-shadow: none;
- background-color: transparent;
- margin: 0 8px;
- color: $text-button-color;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
- }
-}
-
-.spoiler-button__overlay__label {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- color: $media-icon-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/columns.scss b/app/javascript/styles/material-dark/theme/columns.scss
deleted file mode 100644
index 77a5c777a..000000000
--- a/app/javascript/styles/material-dark/theme/columns.scss
+++ /dev/null
@@ -1,511 +0,0 @@
-@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-bg-color;
- opacity: $column-transparency;
- }
-
- &:last-child { box-shadow: none }
-}
-
-.column-header {
- background: $top-bar-color;
- border-radius: $bar-radius;
- height: 56px;
-
- > button {
- padding: 16px;
- color: $top-bar-text-color;
- }
-
- &>.column-header__back-button { color: $top-bar-icon-color }
-
- &.active {
- .column-header__icon {
- color: $top-bar-unread-icon-color;
- text-shadow: none;
- }
- }
-
- &__icon {
- margin-right: 16px;
- color: $top-bar-icon-color;
- font-size: 20px;
- }
-
- &__buttons { height: 56px }
-
- &__button {
- @include icon-button;
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 8px;
- margin: 10px;
- border-radius: 50%;
- box-sizing: content-box;
-
- &.active {
- color: $top-bar-icon-active-color;
- background: $icon-bg-active-color;
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &__setting-btn {
- color: $icon-button-color;
- padding: 8px 0;
-
- &:hover {
- color: $icon-button-hover-color;
- text-decoration: none;
- }
-
- .fa { font-size: 20px }
-
- span { vertical-align: middle }
- }
-
- &__setting-arrows {
- font-size: 16px;
- border-bottom: 8px;
-
- .column-header__setting-btn {
- padding: 8px;
- border-radius: 50%;
-
- &:last-child { padding-right: 8px }
- }
- }
-
- &__wrapper {
- @include shadow-4dp;
- border-radius: $bar-radius;
- opacity: $bar-transparency;
-
- .announcements { border-top: 1px solid $border-color }
-
- &.active {
- @include shadow-4dp;
-
- &::before { background: transparent }
- }
- }
-
- &__collapsible {
- color: $ui-text-color;
- background: $card-bg-color;
- border-top: 1px solid $border-color;
-
- &-inner {
- background: $card-bg-color;
- padding: 16px;
- }
-
- &.collapsed { border-top: none }
- }
-
- &__back-button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- margin: 8px 10px;
- padding: 10px;
- font-size: 20px;
-
- span { display: none }
- }
-}
-
-.column-subheading {
- color: $section-text-color;
- background: $bg-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
-}
-
-.column-link {
- color: $ui-text-color;
- background: $bg-color;
- padding: 16px;
- border-radius: $nav-drawer-item-radius;
-
- &:hover { background: $list-bg-hover-color }
-
- &:active,
- &:focus { background: $list-bg-active-color }
-
- &__icon {
- margin-right: 32px;
- font-size: 20px;
- }
-
- &--transparent {
- &.active {
- color: $ui-text-color;
- background: $menu-bg-active-color;
-
- &:hover { background: $menu-bg-active-hover-color }
-
- .fa { color: $icon-color }
- }
-
- &:hover {
- color: $ui-text-color;
-
- .fa { color: $icon-color }
- }
- }
-
- .fa { color: $icon-color }
-}
-
-.column-settings {
- &__section {
- color: $section-text-color;
- margin-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
-
- &--slim-button { top: -54px }
-}
-
-.column-inline-form {
- padding: 16px 0 16px 16px;
- background: $card-bg-color;
-
- .icon-button { margin: 0 16px }
-}
-
-.columns-area {
- @include bg-image;
- background-size: contain;
-}
-
-.setting-text {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border-radius: $bar-radius;
-
- &::placeholder { color: $tips-text-color }
-}
-
-.empty-column-indicator {
- color: $secondary-text-color;
- background: $card-bg-color;
- font-size: 16px;
- contain: initial; // padding fix
-}
-
-.conversation {
- border-bottom: 1px solid $border-color;
- padding: 12px;
- background: $list-bg-inactive-color;
-
- &--unread {
- background: $list-bg-color;
-
- .conversation__content__relative-time { color: $info-text-color }
- }
-
- &__unread { background: $primary-color }
-
- &__avatar { padding: 0 16px 0 0 }
-
- &__content {
- padding: 0;
-
- &__relative-time {
- font-size: 14px;
- color: $info-text-color;
- }
-
- &__names,
- &__names a {
- color: $primary-text-color;
- font-size: 16px;
- }
- }
-}
-
-// read status in notification column
-.muted {
- .status {
- &__content {
- color: $read-primary-text-color;
-
- 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-bg-hover-color }
-}
-
-.getting-started {
- background: $bg-color;
- color: $ui-text-color;
- opacity: $column-transparency;
-
- &__wrapper {
- background: $bg-color;
- height: auto !important;
- padding-bottom: 8px;
- border-bottom: 1px solid $border-color;
- }
-
- &__footer {
- padding: 16px;
-
- p {
- color: $secondary-text-color;
- font-size: 12px;
- margin-bottom: 16px;
- }
-
- a { color: $ui-text-color }
-
- p a { color: $link-text-color }
- }
-
- &__trends {
- background: $bg-color;
- margin-bottom: 0;
- opacity: $column-transparency;
-
- h4 {
- color: $section-text-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
- border-bottom: none;
- }
- }
-}
-
-.trends {
- &__header {
- color: $section-text-color;
- background: transparent;
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .fa { margin-right: 8px }
- }
-
- &__item {
- padding: 16px;
- border-bottom: none;
-
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
- }
-
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
- }
- }
-}
-
-.setting-toggle {
- &__label {
- color: $ui-text-color;
- margin: 8px 8px 8px 14px;
- }
-}
-
-.announcements {
- background: $card-bg-color;
- padding: 0 8px;
-
- &__container { color: $primary-text-color }
-
- &__item {
- padding: 16px;
- font-size: 16px;
-
- &__unread { background: $badge-color }
- }
-
- &__pagination {
- color: $ui-text-color;
- padding: 16px;
- bottom: 0;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- margin: 0 4px;
- line-height: normal !important;
- box-sizing: content-box;
- }
-
- span { vertical-align: super }
- }
-}
-
-.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 }
-
-@include outlined-chip;
-
-.reactions-bar {
- margin-top: 16px;
- width: calc(100% - 72px);
-
- .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: $chip-selected-text-color }
-
- &:hover { background-color: $contained-chip-selected-color }
- }
-
- &__emoji {
- width: 24px;
- height: 24px;
- margin: 4px 0 4px 2px;
- }
-
- &__count {
- font-size: 16px;
- margin: 0 12px 0 8px;
- color: $secondary-text-color;
- }
-
- &:hover { background: $contained-chip-hover-color }
- }
-}
-
-.notification {
- &__filter-bar {
- background: $tab-bg-color;
- border-bottom: 1px solid $border-color;
- z-index: 1;
- opacity: $bar-transparency;
-
- button {
- background: $tab-bg-color;
- color: $tab-indicator-color;
- font-size: 16px;
-
- span { font-size: 14px }
-
- &.active {
- color: $tab-indicator-active-color;
- border-bottom: 4px solid $tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
- }
-
- &__message {
- color: $secondary-text-color;
- margin: 0 16px 0 70px;
- font-size: 16px;
- }
-
- &__display-name:hover { color: inherit }
-}
-
-.notification-favourite .status.status-direct {
- .icon-button.disabled { color: $disabled-icon-color }
-}
-
-.relationship-tag {
- color: $ui-text-color;
- background-color: $relationship-tag-color;
- font-size: 12px;
- border-radius: 17px;
- padding: 4px 8px;
- opacity: 1;
-}
-
-.attachment-list__list a { color: $secondary-text-color }
-
-// unread notification
-.notification.unread:before, .status__wrapper.unread:before { border-left: none }
-
-.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/components.scss b/app/javascript/styles/material-dark/theme/components.scss
deleted file mode 100644
index aa64aabc5..000000000
--- a/app/javascript/styles/material-dark/theme/components.scss
+++ /dev/null
@@ -1,647 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include text-area-border;
-
-.modal-root {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-
- &__overlay { background-color: rgba(0,0,0,.32) !important }
-
- &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
-}
-
-.drawer {
- &__header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- justify-content: space-around;
- opacity: $bar-transparency;
-
- a { transition: none }
-
- a:hover {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- }
- }
-
- &__tab {
- color: $top-bar-icon-color;
- font-size: 20px;
- margin: 10px auto 10px;
- padding: 8px;
- flex: none;
- height: 20px;
- width: 20px;
- border-bottom: none;
- text-align: justify;
-
- &:hover { color: $top-bar-icon-hover-color }
- }
-
- &__pager {
- @include shadow-1dp;
- border-radius: $card-radius;
- }
-
- &__inner {
- background: $card-bg-color;
- opacity: $column-transparency;
-
- &.darker {
- background: $card-bg-color;
- position: inherit;
- }
-
- &__mastodon { background: $card-bg-color }
- }
-}
-
-.search {
- &__input {
- background: $search-bar-color;
- color: $tips-text-color;
- border-radius: $search-bar-radius;
- padding: 12px 12px 12px 40px;
- opacity: $bar-transparency;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
-
- &:hover { @include search-bar-hover }
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__icon {
- .fa {
- color: $icon-color;
- font-size: 20px;
- top: 12px;
- right: unset;
- left: 12px;
- height: 6px;
- transition: none;
-
- &.active { opacity: 1 }
-
- &-search {
- transform: none;
- opacity: 1;
- }
- &-times-circle.active {
- right: 16px;
- left: unset;
- transform: none;
- }
- }
- }
-}
-
-.search-popout {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- border-radius: 0px $bar-radius;
- border-top: 1px solid $border-color;
- margin-top: 0;
- color: $tips-text-color;
-
- h4 {
- color: $secondary-text-color;
- }
-
- em {
- color: $search-bar-text-color;
- }
-}
-
-.search-results {
- &__header {
- color: $secondary-text-color;
- background-color: $card-bg-color;
- padding: 16px;
-
- .fa { margin-right: 16px }
- }
-
- &__section {
- h5 {
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- padding: 16px;
- color: $section-text-color;
-
- .fa { margin-right: 8px }
- }
- }
-}
-
-.navigation-bar {
- color: $secondary-text-color;
- padding: 14px;
-
- strong {
- color: $ui-text-color;
- }
-
- .navigation-bar__actions .compose__action-bar .icon-button {
- width: 36px !important;
- height: 36px !important;
- padding: 8px;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
-}
-
-.navigation-panel hr {
- border-top: 1px solid $border-color;
- margin: 8px 0;
-}
-
-.flex-spacer { margin: 8px 0 }
-
-.dropdown-menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- padding: 8px 0;
- border-radius: $menu-radius;
-
- &__arrow { visibility: hidden }
-
- &__item a {
- font-size: 14px;
- padding: 8px 16px;
- background: $menu-bg-color;
- color: $menu-text-color;
-
- &:hover, &:active {
- background: $menu-bg-hover-color;
- color: $menu-text-color;
- }
- }
-
- &__separator {
- margin: 8px 0;
- border-bottom: 1px solid $border-color;
- }
-}
-
-.compose-form {
- .autosuggest-textarea {
- &__textarea {
- background: $text-field-bg-color;
- color: $ui-text-color;
- padding: 8px 42px 8px 16px;
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__suggestions {
- @include shadow-1dp;
- background: $menu-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
- font-size: 16px;
- padding: 8px 0;
-
- &__item {
- padding: 8px;
- border-radius: 0;
-
- &:hover { background: $menu-bg-hover-color }
-
- &.selected,
- &:focus,
- &:active { background: $menu-bg-active-color }
- }
- }
- }
-
- .spoiler-input {
- &.spoiler-input--visible { margin-bottom: 16px }
-
- &__input {
- color: $ui-text-color;
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- border-radius: 0;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- .compose-form {
- &__warning {
- color: $secondary-text-color;
- background: $card-bg-color;
- padding: 16px;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- box-shadow: none;
-
- a { color: $link-text-color }
- }
-
- &__modifiers {
- background: $card-bg-color;
- color: $tips-text-color;
-
- .compose-form {
- &__upload-thumbnail { border-radius: 0 }
-
- &__upload__actions {
- @include material-transition;
-
- .icon-button {
- color: $media-icon-color;
- font-size: 16px;
-
- &:hover { background-color: transparent }
- }
- }
- }
- }
-
- &__buttons-wrapper {
- background: $card-bg-color;
- color: $tips-text-color;
- padding: 8px;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- }
-
- .text-icon-button {
- width: 20px !important;
- height: 20px !important;
- padding: 8px;
- line-height: 20px !important;
- }
- }
-
- &__poll-wrapper {
- border-top: 1px solid $border-color;
-
- ul { padding: 16px 12px 16px 0 }
-
- select {
- color: $ui-text-color;
- background-color: $bg-color;
- border: 0;
-
- &:focus { border-color: $border-hover-color }
- }
-
- .button.button-secondary {
- box-shadow: none;
- color: $text-button-color;
-
- &:hover { background-color: $text-button-hover-color }
-
- &:active,
- &:focus { background-color: $text-button-focus-color }
- }
-
- .poll__footer { border-top: none }
- }
-
- &__publish .compose-form__publish-button-wrapper { box-shadow: none }
- }
-}
-
-.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
-
-
-.poll {
- .button { margin-right: 8px }
-
- li { margin-bottom: 0 }
-
- &__input {
- border: none;
- width: 20px;
- height: 20px;
- flex: 0 0 20px;
- padding: 18px;
- margin: 0 2px;
- background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
-
- &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
-
- &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
-
- &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-
- &.checkbox {
- border-radius: 2px;
- border: 2px solid $control-border-color;
- padding: 8px;
- margin: 8px 10px;
- background: none;
- }
- }
-
- &__text input[type=text] {
- color: $ui-text-color;
- background: $text-field-bg-color;
- border: 1px solid $border-color;
- padding: 8px 12px;
-
- &:focus { border-color: $border-hover-color }
- }
-
- &__option {
- padding: 16px 0 8px;
-
- input[type=text] {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border: none;
- border-radius: 2px;
- padding: 8px 16px;
- }
-
- &__text { line-height: 34px }
- }
-
- &__chart {
- border-radius: 0;
- background: $progress-indicator-track-color;
-
- &.leading { background: $progress-indicator-color }
- }
-
- &__footer {
- padding-top: 8px;
- padding-bottom: 0;
- color: $ui-text-color;
- }
-
- &__link { color: $ui-text-color }
-}
-
-.privacy-dropdown {
- &.active .privacy-dropdown__value.active {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- box-shadow: none;
-
- .icon-button { color: $icon-button-active-color }
- }
-
- &__dropdown {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $dialog-radius;
- }
-
- &__option {
- color: $icon-color;
- padding: 8px 16px;
-
- &__icon {
- font-size: 20px;
- margin-right: 12px;
- }
-
- &__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &.active {
- background: $menu-bg-active-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &:hover {
- background: $menu-bg-active-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &:hover {
- background: $menu-bg-hover-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-}
-
-.character-counter {
- color: $secondary-text-color;
-}
-
-.reply-indicator {
- box-shadow: none;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- background: $card-bg-color;
- padding: 16px;
-
- &__header { margin-bottom: 4px }
-
- &__display {
- &-name {
- color: $primary-text-color;
- padding-right: 24px;
- }
-
- &-avatar { margin-right: 8px }
- }
-
- &__content {
- color: $primary-text-color;
-
- p { margin-bottom: 16px }
- }
-}
-
-.attachment-list {
- &__list a { color: $secondary-text-color }
-
- &.compact .fa { color: $icon-color }
-}
-
-.block-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.load-more {
- color: $ui-text-color;
-
- &:hover { background: transparent }
-}
-
-.autosuggest-hashtag {
- &__name { color: $menu-text-color }
-}
-
-.filter-form {
- background: $bg-color;
- color: $ui-text-color;
-
- &__column { padding: 8px 16px }
-}
-
-.directory {
- &__card {
- @include shadow-1dp;
- margin: 8px 4px;
- border-radius: $card-radius;
-
- &__img { border-radius: $card-radius $card-radius 0 0 }
-
- &__bar {
- background: $card-bg-color;
- padding: 8px 16px;
-
- .display-name {
- margin-left: 16px;
-
- strong {
- font-size: 16px;
- color: $primary-text-color;
- }
-
- span { color: $secondary-text-color }
- }
- }
-
- &__extra {
- background: $card-bg-color;
- border-radius: 0 0 $card-radius $card-radius;
-
- .account__header__content {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
- }
-
- .accounts-table__count { padding: 16px 0 }
- }
- }
-}
-
-.mute-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__explanation { margin-top: 16px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-
- .setting-toggle {
- margin-top: 16px;
- margin-bottom: 16px;
-
- &__label {
- color: $ui-text-color;
- margin: 0 0 0 12px;
- }
- }
-}
-
-.upload-progress {
- color: $ui-text-color;
-
- &__backdrop {
- border-radius: 0;
- background: $progress-indicator-track-color;
- margin-top: 6px;
- }
-
- &__tracker {
- border-radius: 0;
- background: $progress-indicator-color;
- }
-}
-
-.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/containers.scss b/app/javascript/styles/material-dark/theme/containers.scss
deleted file mode 100644
index 09af289b0..000000000
--- a/app/javascript/styles/material-dark/theme/containers.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.public-layout {
- .header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- margin: 16px 0;
-
- .brand:hover { background: $tab-indicator-bg-hover-color }
-
- .nav-link,
- .nav-link.optional {
- color: $top-bar-text-color;
-
- &:hover {
- background: $tab-indicator-bg-hover-color;
- text-decoration: none;
- }
- }
-
- .nav-button {
- background: transparent;
- margin: 0;
- border-radius: 0;
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
-
- .detailed-status__meta { margin-top: 16px }
- }
-
- .detailed-status { padding: 16px }
-
- .footer {
- padding-top: 16px;
- padding-bottom: 64px;
- color: $ui-text-color;
-
- h4 { color: $ui-text-color }
-
- ul a { color: $secondary-text-color }
-
- .grid .column-2 h4 a { color: $ui-text-color }
-
- .brand {
- svg { fill: $icon-color }
-
- &:hover svg { fill: $icon-hover-color }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/control.scss b/app/javascript/styles/material-dark/theme/control.scss
deleted file mode 100644
index a205a4cb7..000000000
--- a/app/javascript/styles/material-dark/theme/control.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@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-dark/theme/emoji-picker.scss b/app/javascript/styles/material-dark/theme/emoji-picker.scss
deleted file mode 100644
index 91663fb93..000000000
--- a/app/javascript/styles/material-dark/theme/emoji-picker.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@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-bg-color;
- border-radius: $menu-radius;
- }
-
- &__modifiers__menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $menu-radius;
-
- button {
- padding: 8px;
- }
- }
-}
-
-.emoji-mart {
- width: 388px !important;
- font-size: 14px;
- color: $menu-text-color;
-
- &-bar {
- border: 0 solid $border-color;
-
- &:first-child {
- background: $menu-bg-color;
- }
- }
-
- &-anchor {
- color: $text-tab-indicator-color;
- padding: 10px 4px;
-
- &-bar { background-color: $icon-tab-indicator-active-color }
-
- &-selected { color: $icon-tab-indicator-hover-color }
-
- &:hover { color: $icon-tab-indicator-hover-color }
- }
-
- &-search {
- background: $menu-bg-color;
-
- input {
- outline: none;
- padding: 8px;
- background: $search-bar-color;
- color: $ui-text-color;
- border: 0;
- border-radius: $search-bar-radius;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
- }
- }
-
- &-scroll {
- padding: 0 8px 8px;
- background: $menu-bg-color;
- }
-
- &-category {
- &-label span {
- padding: 4px 6px;
- background: $menu-bg-color;
- }
-
- .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
- }
-
- &-no-results { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/icons.scss b/app/javascript/styles/material-dark/theme/icons.scss
deleted file mode 100644
index 987767544..000000000
--- a/app/javascript/styles/material-dark/theme/icons.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@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.fa-lock { text-transform: none }
-
-.icon-with-badge__badge {
- background: $badge-color;
- border: none;
- padding: 2px 6px;
- border-radius: 12px;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/material-icons.scss b/app/javascript/styles/material-dark/theme/material-icons.scss
deleted file mode 100644
index dd01ce3d6..000000000
--- a/app/javascript/styles/material-dark/theme/material-icons.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config', '../icon_config';
-@import '../custom_color', '../custom_layout';
-@import 'functions';
-@import 'mixins';
-
-
-@include icon-font;
-
-.fa-fw {
- width: 20px;
- height: 20px;
- font-size: 20px;
-}
-
-.fa {
- &.fa-bars,
- &.fa-navicon,
- &.fa-reorder,
- &.fa-globe,
- &.fa-cog,
- &.fa-cogs,
- &.fa-gears,
- &.fa-sign-out,
- &.fa-search,
- &.fa-times,
- &.fa-times-circle,
- &.fa-close,
- &.fa-remove,
- &.fa-chevron-down,
- &.fa-ellipsis-v,
- &.fa-paperclip,
- &.fa-tasks,
- &.fa-plus,
- &.fa-unlock,
- &.fa-lock,
- &.fa-envelope,
- &.fa-home,
- &.fa-bullhorn,
- &.fa-sliders,
- &.fa-chevron-left,
- &.fa-chevron-right,
- &.fa-reply,
- &.fa-reply-all,
- &.fa-share-alt,
- &.fa-star,
- &.fa-bookmark,
- &.fa-ellipsis-h,
- &.fa-bell,
- &.fa-bell-o,
- &.fa-eraser,
- &.fa-users,
- &.fa-file-text,
- &.fa-user-plus,
- &.fa-address-book,
- &.fa-address-book-o,
- &.fa-list,
- &.fa-list-ul,
- &.fa-eye,
- &.fa-eye-slash,
- &.fa-pencil,
- &.fa-trash,
- &.fa-play,
- &.fa-external-link,
- &.fa-retweet,
- &.fa-link,
- &.fa-pause,
- &.fa-volume-up,
- &.fa-volume-off,
- &.fa-expand,
- &.fa-download,
- &.fa-arrows-alt,
- &.fa-compress,
- &.fa-user-times,
- &.fa-check,
- &.fa-quote-right,
- &.fa-upload,
- &.fa-comments,
- &.fa-angle-right,
- &.fa-thumb-tack {
- @include icon-font-style;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- }
-}
-
-.fa {
- &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
- &.fa-globe::before { content: "public" }
- &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
- &.fa-sign-out::before { content: "exit_to_app" }
- &.fa-search::before { content: "search" }
- &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
- &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
- &.fa-paperclip::before { content: "attach_file" }
- &.fa-tasks::before { content: "poll" }
- &.fa-plus::before { content: "add" }
- &.fa-unlock::before { content: "lock_open" }
- &.fa-lock::before { content: "lock" }
- &.fa-envelope::before { content: "mail" }
- &.fa-home::before { content: "home" }
- &.fa-bullhorn::before { content: "announcement" }
- &.fa-sliders::before { content: "tune" }
- &.fa-chevron-left::before { content: "arrow_back" }
- &.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: $reply-icon }
- &.fa-reply-all::before { content: "reply_all" }
- &.fa-share-alt::before { content: "share" }
- &.fa-star::before { content: $favorite-icon }
- &.fa-bookmark::before { content: "bookmark" }
- &.fa-ellipsis-h::before { content: "more_horiz" }
- &.fa-bell::before { content: "notifications" }
- &.fa-bell-o::before { content: "notifications" }
- &.fa-eraser::before { content: "clear_all" }
- &.fa-users::before { content: "people" }
- &.fa-file-text::before { content: "web" }
- &.fa-user-plus::before { content: "person_add" }
- &.fa-address-book::before { 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: "person_remove" }
- &.fa-check::before { content: "check" }
- &.fa-quote-right::before { content: "format_quote" }
- &.fa-upload::before { content: "file_upload" }
- &.fa-comments::before { content: "forum" }
- &.fa-angle-right::before { content: "chevron_right" }
- &.fa-thumb-tack::before { content: "push_pin" }
-}
-
-// 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
-button.icon-button i.fa-retweet {
- height: 20px;
- width: 20px;
- transition: none;
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,') }
-
-button.icon-button i.fa-retweet:hover,
-button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover,
-button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-// dropdown icon
-.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px}
-
-// icon in tab settings
-.text-btn.column-header__setting-btn {
- .fa {
- vertical-align: middle;
-
- &.fa-eraser { margin-right: 8px } // clear notification
- }
-}
-
-// top bar icons align
-.fa.fa-bell.column-header__icon.fa-fw,
-.fa.fa-home.column-header__icon.fa-fw,
-.fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw,
-.fa.fa-bars.column-header__icon.fa-fw,
-.fa.fa-bookmark.column-header__icon.fa-fw,
-.fa.fa-address-book-o.column-header__icon.fa-fw,
-.fa.fa-envelope.column-header__icon.fa-fw,
-.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
-
-// top bar icons in single column mode
-.tabs-bar__link {
- .fa.fa-home.fa-fw,
- .fa.fa-bell.fa-fw,
- .fa.fa-users.fa-fw,
- .fa.fa-globe.fa-fw { vertical-align: text-bottom }
-}
-
-// getting-started and side bar icons
-.column-link .fa,
-.column-link--transparent .fa { vertical-align: text-bottom }
-
-// uploaded media icons align
-.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
- font-size: 20px;
- vertical-align: text-bottom;
-}
-
-// search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
-
-// read more icon
-.status__content__read-more-button .fa { vertical-align: bottom }
-
-// Attachment icon
-.attachment-list__list a .fa { vertical-align: middle }
-
-// status detail icon
-.detailed-status .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
-
-// status scope
-.status__visibility-icon .fa,
-.account__header__tabs__name .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/media.scss b/app/javascript/styles/material-dark/theme/media.scss
deleted file mode 100644
index b8ac12414..000000000
--- a/app/javascript/styles/material-dark/theme/media.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.media-gallery {
- border-radius: $media-radius;
-
- &__item { border-radius: $media-radius }
-}
-
-.media-modal {
- &__nav {
- background: $media-icon-bg-color;
- color: $media-icon-color;
- height: 48px;
- width: 48px;
- margin: auto 16px;
- padding: 8px;
- border-radius: 50%;
-
- .fa { width: 32px }
- }
-
- &__button {
- background-color: $media-page-indicator-color;
-
- &--active { background-color: $media-page-indicator-active-color }
- }
-
- &__close {
- &.icon-button {
- background: transparent;
- color: $media-icon-color;
- font-size: 24px !important;
- width: 24px !important;
- height: 24px !important;
- padding: 8px;
- box-sizing: content-box;
- line-height: normal !important;
-
- &:hover {
- background: $media-icon-bg-hover-color;
- color: $media-icon-hover-color;
- }
-
- .fa-fw {
- width: 24px;
- height: 24px;
- }
- }
- }
-
- &__meta {
- bottom: 24px;
-
- a { color: $media-icon-color }
- }
-
- &__overlay {
- .picture-in-picture__footer .icon-button {
- color: $media-icon-color;
-
- &:active,
- &:focus,
- &:hover {
- color: $media-icon-hover-color;
- background-color: transparent;
- }
- }
- }
-}
-
-.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 {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__volume {
- &::before {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__current {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__time-current { margin-left: 68px }
-
- &__buttons button { font-size: 20px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/modal.scss b/app/javascript/styles/material-dark/theme/modal.scss
deleted file mode 100644
index 93e5b24c1..000000000
--- a/app/javascript/styles/material-dark/theme/modal.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.confirmation-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $dialog-radius;
-
- &__container {
- text-align: left;
- padding: 24px;
- }
-
- &__action-bar {
- justify-content: flex-end;
- background: $card-bg-color;
- padding: 8px;
- }
-
- &__secondary-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.actions-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- border-radius: $card-radius;
-
- ul li:not(:empty) a {
- color: $ui-text-color;
- font-size: 16px;
-
- &:hover {
- background: $card-bg-hover-color;
- color: $ui-text-color;
- }
- }
-
- .dropdown-menu__separator { border-bottom-color: $border-color }
-
- .status {
- background: $card-bg-color;
- border-bottom-color: $border-color;
- padding-top: 12px;
- padding-bottom: 12px;
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
- }
-}
-
-.report-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__target {
- padding: 24px;
- text-align: left;
- font-weight: bold;
- }
-
- &__container {
- border-top: none;
- }
-
- &__comment {
- border-right: none;
-
- .setting-text-label { color: $ui-text-color }
- }
-}
-
-.embed-modal .embed-modal__container {
- padding: 0 24px 24px 24px;
-
- .hint {
- margin-bottom: 16px;
- color: $secondary-text-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/responsive.scss b/app/javascript/styles/material-dark/theme/responsive.scss
deleted file mode 100644
index 8618f7ed7..000000000
--- a/app/javascript/styles/material-dark/theme/responsive.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@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;
- width: $fab-size;
- height: $fab-size;
- bottom: 16px;
- right: 16px;
-
- &:hover { background: $floating-action-button-hover-color }
-
- &:active,
- &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
- .column { margin: 0 !important }
- .search__input { padding: 16px 46px }
-
- .search__icon {
- .fa {
- top: 16px;
- left: 16px;
- }
-
- .fa-times-circle.active { left: unset }
- }
-}
-
-// small size screen
-@media screen and (max-width: 415px) {
- .public-layout { padding-top: 64px }
-}
-
-// middle size screen
-@media screen and (min-width: 415px) {
- .tabs-bar {
- margin-bottom: 0;
-
- &__wrapper {
- padding-top: 0;
-
- .tabs-bar { margin-bottom: 0 }
- }
- }
-
- .columns-area__panels {
- &__main {
- @include shadow-1dp;
- padding: 0;
- }
-
- &__pane { padding: 0 16px }
- }
-}
-
-//single column mode
-@media screen and (min-width: 631px) {
- .tabs-bar__link {
- &:hover {
- background: $tab-indicator-bg-hover-color;
- border-bottom-color: transparent;
- }
-
- &:active,
- &:focus {
- background: $tab-indicator-bg-focus-color;
- border-bottom-color: $tab-bg-color;
- }
-
- &.active { border-bottom-color: $tab-indicator-active-color }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/statuses.scss b/app/javascript/styles/material-dark/theme/statuses.scss
deleted file mode 100644
index 7e4374014..000000000
--- a/app/javascript/styles/material-dark/theme/statuses.scss
+++ /dev/null
@@ -1,292 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.status {
- padding: 12px 12px 4px 70px;
- border-bottom: 1px solid $border-color;
-
- &__expand { width: 70px }
-
- &__info {
- font-size: $name-font-size;
- padding-right: 4px;
- }
-
- &__relative-time { color: $info-text-color }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
-
- &__content {
- font-size: $status-font-size;
- padding-top: 4px;
- color: $primary-text-color;
-
- a {
- color: $link-text-color;
-
- &.unhandled-link { color: $link-text-color }
- }
-
- p { margin-bottom: 16px }
-
- .status__content__spoiler-link {
- 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 {
- margin-top: 4px;
-
- &__counter {
- margin-right: 6px;
-
- &__label {
- font-size: 14px;
- color: $info-text-color;
- }
- }
- }
-
- &__action-bar-button {
- margin-right: 4px;
-
- &.icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &--with-counter {
- margin-right: 4px;
- width: auto !important;
-
- &:hover { background: transparent }
- }
- }
- }
-
- &__action-bar-dropdown {
- width: 36px !important;
- height: 36px !important;
- box-sizing: content-box;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
-
- &:hover {
- color:$icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
- }
-
- &__prepend {
- color: $secondary-text-color;
- margin-left: 64px;
-
- .status__display-name strong { color: $secondary-text-color }
- }
-
- &.status-direct:not(.read) {
- background: transparent;
- border-bottom-color: $border-color;
- }
-
- &__visibility-icon { color: $icon-color }
-}
-
-.status-card {
- color: $icon-color;
- border-color: $border-color;
- outline: none;
- margin-top: 16px;
-
- &__image {
- background: transparent;
-
- &>.fa {
- font-size: 26px;
- }
- }
-
- &__title {
- color: $primary-text-color;
- margin-bottom: 6px;
- }
-
- &__description { color: $secondary-text-color }
-
- &__actions {
- &>div {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- }
-
- button,
- a {
- color: $media-icon-color;
- font-size: 20px;
- }
-
- a { bottom: auto }
- }
-
- &.compact {
- border-color: $border-color;
- outline: none;
- background: transparent;
-
- .status-card {
- &__content { padding: 12px }
- &__image { flex: 0 0 64px }
- }
-
- &:hover { background-color: transparent !important }
- }
-
- &.horizontal {
- border-radius: 0;
-
- .status-card {
- &__image-preview { border-radius: 0 }
-
- &__image-image { border-radius: 0 }
- }
- }
-}
-
-a.status-card {
- &:hover { background-color: $card-bg-color }
-}
-
-.embed .status,
-.public-layout .status { padding: 16px 16px 16px 80px }
-
-// Detailed status in mobile
-.status.light {
- .status {
- &__display-name { color: $primary-text-color }
- &__relative-time { color: $info-text-color }
- &__content { color: $primary-text-color }
- }
-
- .display-name { color: $secondary-text-color }
- .display-name strong { color: $primary-text-color }
-}
-
-.detailed-status {
- background: $card-bg-color;
- padding: 16px;
-
- &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__meta {
- margin-top: 16px;
- color: $info-text-color;
- }
-
- &__action-bar {
- background: $card-bg-color;
- border-top: none;
- border-bottom: 1px solid $border-color;
- padding: 8px 0;
- }
-
- &__action-bar-dropdown {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
- }
-
- &__button {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-
- .button.logo-button {
- margin-bottom: 16px;
- line-height: 36px;
- }
-}
-
-// search user trends
-.display-name {
- &__html { color: $primary-text-color }
- &__account { color: $secondary-text-color }
-}
-
-.activity-stream {
- @include shadow-1dp;
- margin-bottom: 16px;
- border-radius: $card-radius;
-
- .entry {
- background: $card-bg-color;
-
- &:first-child {
- .detailed-status,
- .load-more,
- .status { border-radius: $card-radius $card-radius 0 0 }
- }
- }
-}
-
-.entry.entry-center { border-bottom: 1px solid $border-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/theme.scss b/app/javascript/styles/material-dark/theme/theme.scss
deleted file mode 100644
index 367893682..000000000
--- a/app/javascript/styles/material-dark/theme/theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
-* Mastodon Material 0.2.1
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/variables.scss b/app/javascript/styles/material-dark/theme/variables.scss
deleted file mode 100644
index 0b948881b..000000000
--- a/app/javascript/styles/material-dark/theme/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@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-dark/theme/widgets.scss b/app/javascript/styles/material-dark/theme/widgets.scss
deleted file mode 100644
index 4abdfbae9..000000000
--- a/app/javascript/styles/material-dark/theme/widgets.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.hero-widget {
- @include shadow-2dp;
- margin-bottom: 16px;
-
- &__img {
- border-radius: $card-radius $card-radius 0 0;
- background: $card-bg-color;
-
- img { border-radius: $card-radius $card-radius 0 0 }
- }
-
- &__text {
- background: $card-bg-color;
- padding: 16px;
- color: $primary-text-color;
- border-radius: 0 0 $card-radius $card-radius;
- }
-}
-
-.endorsements-widget {
- padding-bottom: 8px;
- margin-bottom: 8px;
-}
-
-.trends-widget h4 { color: $section-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light.scss b/app/javascript/styles/material-light.scss
index 9818f14f5..047c5802d 100644
--- a/app/javascript/styles/material-light.scss
+++ b/app/javascript/styles/material-light.scss
@@ -1,2 +1,2 @@
@import 'application';
-@import 'material-light/loader';
\ No newline at end of file
+@import 'mastodon-material/profiles/material-light/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/black.scss b/app/javascript/styles/material-light/color/black.scss
deleted file mode 100644
index 693caa813..000000000
--- a/app/javascript/styles/material-light/color/black.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #000000;
-$menu-bg-color: #121212;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #121212;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #000000;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #1e1e1e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #121212;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #1e1e1e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #1e1e1e;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #121212;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/mastodon-dark.scss b/app/javascript/styles/material-light/color/mastodon-dark.scss
deleted file mode 100644
index b2e6bf27a..000000000
--- a/app/javascript/styles/material-light/color/mastodon-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9baec8;
-$ui-text-color: #fff;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #606984;
-$tips-text-color: #6d7889;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4ea2df;
-$menu-text-color: #282c37;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #191b22;
-$menu-bg-color: #d9e1e8;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #313543;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #282c37;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #42485a;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #393f4f;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#42485a, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #9baec8;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-bg-hover-color: lighten($bg-color, 14%);
-$icon-bg-active-color: lighten($bg-color, 18%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #fff;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($primary-color, 18%);
-
-// Border color
-$border-color: #393f4f;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
-
-// App bar color
-$top-bar-color: #313543;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: #d9e1e8;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #1f232b;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/mastodon-light.scss b/app/javascript/styles/material-light/color/mastodon-light.scss
deleted file mode 100644
index 7e94b8de7..000000000
--- a/app/javascript/styles/material-light/color/mastodon-light.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #217aba;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #eff3f5;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($bg-color, 6%);
-$menu-bg-active-color: darken($bg-color, 10%);
-$menu-bg-active-hover-color: darken($bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #282c37;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: darken($bg-color, 4%);
-$icon-bg-active-color: darken($bg-color, 8%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: $primary-color;
-$toggle-track-active-color: lighten($primary-color, 26%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: #ccd7e0;
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #ffffff;
-$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: #282c37;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #e6ebf0;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/plus-classic.scss b/app/javascript/styles/material-light/color/plus-classic.scss
deleted file mode 100644
index d94bbe90f..000000000
--- a/app/javascript/styles/material-light/color/plus-classic.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #db4437;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/v1-dark.scss b/app/javascript/styles/material-light/color/v1-dark.scss
deleted file mode 100644
index d31fbf04f..000000000
--- a/app/javascript/styles/material-light/color/v1-dark.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #303030;
-$menu-bg-color: #424242;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #424242;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #424242;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
-
-// App bar color
-$top-bar-color: #1565C0;
-$search-bar-color: lighten($bg-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #424242;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/v1-light.scss b/app/javascript/styles/material-light/color/v1-light.scss
deleted file mode 100644
index 2888e81b4..000000000
--- a/app/javascript/styles/material-light/color/v1-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$top-bar-unread-icon-color: darken($primary-color, 30%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #2196f3;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/v2-dark.scss b/app/javascript/styles/material-light/color/v2-dark.scss
deleted file mode 100644
index 025b238f5..000000000
--- a/app/javascript/styles/material-light/color/v2-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #121212;
-$menu-bg-color: #1e1e1e;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #1e1e1e;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #1e1e1e;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($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-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #1e1e1e;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/v2-light.scss b/app/javascript/styles/material-light/color/v2-light.scss
deleted file mode 100644
index fd9469961..000000000
--- a/app/javascript/styles/material-light/color/v2-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #ffffff;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: $bg-color;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: $bg-color;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
-$scroll-bar-thumb-active-color: darken($bg-color, 38%);
-
-// App bar color
-$top-bar-color: $bg-color;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/custom_color.scss b/app/javascript/styles/material-light/custom_color.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/material-light/custom_color.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/custom_config.scss b/app/javascript/styles/material-light/custom_config.scss
deleted file mode 100644
index 43b6488b6..000000000
--- a/app/javascript/styles/material-light/custom_config.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your settings below
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/custom_layout.scss b/app/javascript/styles/material-light/custom_layout.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/material-light/custom_layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/icon_config.scss b/app/javascript/styles/material-light/icon_config.scss
deleted file mode 100644
index 99046e176..000000000
--- a/app/javascript/styles/material-light/icon_config.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
-
-
-// Reply icon settings
-$reply-icon: "reply";
-//$reply-icon: "comment"; // blooming
-
-
-// Material Design Icon settings
-// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-//$icon-font-source: google; // Google Fonts
-//$icon-font-source: github; // GitHub
-$icon-font-source: self; // Self-hosting
-
-// Material Icon style settings
-$icon-font-style: filled;
-//$icon-font-style: outlined;
-//$icon-font-style: round;
-//$icon-font-style: sharp;
-//$icon-font-style: two-tone;
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/layout/material-v1.scss b/app/javascript/styles/material-light/layout/material-v1.scss
deleted file mode 100644
index 23c9a0616..000000000
--- a/app/javascript/styles/material-light/layout/material-v1.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 2px;
-
-
-// Search bar radius
-$search-bar-radius: 2px;
-
-
-// Bar radius settings
-$bar-radius: 0;
-
-
-// Button radius settings
-$button-radius: 2px;
-
-
-// Card radius settings
-$card-radius: 2px;
-
-
-// Dialog radius settings
-$dialog-radius: 2px;
-
-
-// Menu radius settings
-$menu-radius: 2px;
-
-
-// Media radius settings
-$media-radius: 0;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 0;
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 2px // Material v1 square
-
-
-// Chip settings
-$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px;
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/layout/material-v2.scss b/app/javascript/styles/material-light/layout/material-v2.scss
deleted file mode 100644
index 5700a99c8..000000000
--- a/app/javascript/styles/material-light/layout/material-v2.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 8px;
-//$nav-bar-radius: 28px; // full radius
-
-
-// Search bar radius
-$search-bar-radius: 8px;
-//$search-bar-radius: 21px; // full rounded
-
-
-// Bar radius settings
-$bar-radius: 0;
-//$bar-radius: 8px;
-
-
-// Button radius settings
-$button-radius: 8px;
-
-
-// Card radius settings
-$card-radius: 8px;
-
-
-// Dialog radius settings
-$dialog-radius: 8px;
-
-
-// Menu radius settings
-$menu-radius: 8px;
-
-
-// Media radius settings
-$media-radius: 0;
-//$media-radius: 2px;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 8px; // corner rounded
-//$nav-drawer-item-radius: 32px; // full rounded
-//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 8px // Material v2 square
-
-
-// Chip settings
-$outlined-chip: true; // Material v2 styled outlined chip
-//$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: false; // Material v2 styled colored button without shadow
-//$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px; // Regular
-//$fab-size: 40px; // Mini
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
-//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/loader.scss b/app/javascript/styles/material-light/loader.scss
deleted file mode 100644
index 1ddf9883f..000000000
--- a/app/javascript/styles/material-light/loader.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'theme/theme';
-@import 'theme/material-icons';
-
-// Plugins
-@import 'plugins/astarte';
-//@import 'plugins/cards';
-//@import 'plugins/dense';
-//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/plugins/astarte.scss b/app/javascript/styles/material-light/plugins/astarte.scss
deleted file mode 100644
index 8c2e534bb..000000000
--- a/app/javascript/styles/material-light/plugins/astarte.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.announcements {
- li {
- padding: 8px 16px;
- background: $card-bg-color;
- border-radius: $card-radius;
- border: 1px solid $border-color;
- }
-
- &__icon {
- margin: 0;
- right: 16px;
- height: 20px;
-
- .icon-button {
- @include icon-button;
-
- &:hover { background: transparent }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/plugins/cards.scss b/app/javascript/styles/material-light/plugins/cards.scss
deleted file mode 100644
index d9b3906a5..000000000
--- a/app/javascript/styles/material-light/plugins/cards.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@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: $bg-color }
-}
-
-.status {
- border-bottom: 0;
- border-radius: $card-radius;
- background: $card-bg-color;
-
- &__prepend { padding: 8px 8px 2px 0 }
-}
-
-.account { border-bottom: 0 !important }
-
-.status__wrapper.status__wrapper,
-.notification.notification {
- @include shadow-1dp;
- margin: 8px 2px;
- border-radius: $card-radius;
- background: $card-bg-color;
-}
-
-.notification .status__wrapper.status__wrapper { box-shadow: none !important }
-
-.notification__filter-bar {
- @include non-overflow-shadow-4dp;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/plugins/dense.scss b/app/javascript/styles/material-light/plugins/dense.scss
deleted file mode 100644
index 413336d04..000000000
--- a/app/javascript/styles/material-light/plugins/dense.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.drawer {
- &__header { height: 48px }
-
- &__tab { margin: 6px auto 6px }
-}
-
-.column { margin: 10px 5px }
-
-.column-header {
- height: 48px;
-
- > button { padding: 12px 16px }
-
- &__buttons { height: 48px }
-
- &__button { margin: 6px }
-}
-
-.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 }
-
- &__buttons-wrapper {
- .icon-button,
- .text-icon-button { padding: 4px }
- }
- }
-}
-
-.status {
- padding: 8px 8px 4px 66px;
-
- &__expand { width: 66px }
-
- &__info { padding-right: 0 }
-
- &__avatar {
- left: 8px;
- top: 10px;
- }
-
- &__content { padding-top: 2px }
-
- &__action-bar-button {
- margin: 0 4px;
-
- &.icon-button { padding: 4px }
- }
-
- &__action-bar-dropdown {
- width: 28px !important;
- height: 28px !important;
- margin: 0 4px;
-
- .icon-button { padding: 4px }
- }
-}
-
-.detailed-status {
- padding: 14px;
-
- &__meta { margin-top: 14px }
-
- &__action-bar { padding: 10px 0 }
-}
-
-.reply-indicator { padding: 8px }
-
-.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/plugins/plus.scss b/app/javascript/styles/material-light/plugins/plus.scss
deleted file mode 100644
index e356e937b..000000000
--- a/app/javascript/styles/material-light/plugins/plus.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@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 }
-}
-
-// exception
-.media-modal__overlay .picture-in-picture__footer .icon-button,
-.status__action-bar-button.icon-button--with-counter { background: transparent }
-
-// favorite icon
-.star-icon.active,
-.star-icon.icon-button.active.activate,
-.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
-
-.notification__favourite-icon-wrapper {
- left: -34px;
-
- .star-icon {
- border-radius: 50%;
- width: 28px;
- height: 28px;
- vertical-align: baseline;
- font-size: 18px;
-
- &.fa-fw::before { vertical-align: middle }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/_functions.scss b/app/javascript/styles/material-light/theme/_functions.scss
deleted file mode 100644
index 0374231ed..000000000
--- a/app/javascript/styles/material-light/theme/_functions.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@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-light/theme/_mixins.scss b/app/javascript/styles/material-light/theme/_mixins.scss
deleted file mode 100644
index fcd556f2b..000000000
--- a/app/javascript/styles/material-light/theme/_mixins.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-@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 shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
-@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
-@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
-@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
-@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
-@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
-@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
-@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
-
-@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
-
-@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
-
-@mixin search-bar-hover {
- @if $search-bar-hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- }
-}
-
-@mixin outlined-chip {
- @if $outlined-chip {
- .reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $outlined-chip-selected-border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
- }
- }
-}
-
-@mixin button-shadow {
- @if $button-shadow {
- .button,
- .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
- }
-}
-
-@mixin text-area-border {
- @if $text-area-border == underlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius $card-radius 0 0;
- border-bottom: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
- }
- }
-
- @if $text-area-border == outlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius;
- border: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus {
- border: 2px solid $border-active-color;
- padding: 7px 41px 7px 15px;
- }
- }
- }
-}
-
-@mixin icon-button {
- width: 20px !important;
- height: 20px !important;
- font-size: 20px !important;
-}
-
-// check background-image value
-@mixin bg-image {
- @if $bg-image == none {
- } @else { background-image: url($bg-image) }
-}
-
-
-@mixin icon-font-style {
- @if $icon-font-style == filled { font-family: "Material Icons" }
- @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
- @if $icon-font-style == round { font-family: "Material Icons Round" }
- @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
- @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
-}
-
-@mixin icon-font {
- @if $icon-font-source == github {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-
- @if $icon-font-source == google {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
- }
- }
- }
-
- @if $icon-font-source == self {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons"),
- url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/account.scss b/app/javascript/styles/material-light/theme/account.scss
deleted file mode 100644
index 551b4f4a8..000000000
--- a/app/javascript/styles/material-light/theme/account.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.account {
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .account__display-name,
- .account__display-name strong { color: $primary-text-color }
-
- &__avatar {
- border-radius: $avater-radius;
- width: 40px;
- height: 40px;
-
- &-overlay {
- &-base {
- border-radius: $avater-radius;
- width: 44px;
- height: 44px;
- background-size: 44px;
- }
-
- &-overlay { border-radius: $avater-radius }
- }
- }
-
- &__avatar-wrapper {
- margin-left: 0;
- margin-right: 16px;
- }
-
- &__header {
- &__bar {
- background: $card-bg-color;
- padding: 8px;
- border-bottom: none;
-
- .avatar .account__avatar { border: none }
- }
-
- &__tabs {
- padding: 8px;
-
- &__name {
- padding: 8px;
-
- h1 {
- color: $primary-text-color;
-
- small { color: $secondary-text-color }
- }
- }
-
- &__buttons {
- .icon-button {
- @include icon-button;
- border: none;
- border-radius: 50%;
- padding: 8px;
- margin-left: 8px;
- }
- }
- }
-
- &__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-bg-color;
-
- a,
- &__mark { color: $primary-text-color }
- }
-
- dl {
- border-bottom: 1px solid $border-color;
-
- &:first-child .verified { border-radius: 0 }
-
- &:last-child { border-bottom: 0 }
- }
-
- dt {
- color: $primary-text-color;
- background: $list-bg-inactive-color;
- }
-
- dd { color: $primary-text-color }
- }
- }
- }
-
- &__account-note {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
-
- label {
- color: $ui-text-color;
- margin-bottom: 8px;
- }
-
- textarea {
- color: $primary-text-color;
- padding: 8px 16px;
- border-radius: 0;
-
- &:focus { background: transparent }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- &__content { color: $secondary-text-color }
- }
-
- &__section-headline {
- background: $text-tab-bg-color;
- border-bottom: 1px solid $border-color;
-
- a {
- padding: 16px 0;
- color: $text-tab-indicator-color;
-
- &.active {
- color: $text-tab-indicator-active-color;
- border-bottom: 4px solid $text-tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $text-tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $text-tab-indicator-bg-hover-color }
- }
- }
-
- &__relationship {
- padding: 0;
- height: auto;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-}
-
-.account-role {
- padding: 4px 8px;
- border-radius: 17px;
- color: $ui-text-color;
- background-color: $contained-chip-color;
-}
-
-.accounts-table__count {
- color: $ui-text-color;
-
- small { color: $secondary-text-color }
-}
-
-.account-gallery {
- &__item { border-radius: 0 }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/base_config.scss b/app/javascript/styles/material-light/theme/base_config.scss
deleted file mode 100644
index f36a139ba..000000000
--- a/app/javascript/styles/material-light/theme/base_config.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@charset "UTF-8";
-
-
-// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
-
-
-// Color scheme
-@import '../color/v1-light';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'color/v2-light';
-
-
-// Layout profile
-@import '../layout/material-v1';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'layout/material-v2';
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-$search-bar-hover: false;
-
-
-// Status font size in timeline
-$status-font-size: 15px; // mastodon default
-//$status-font-size: 16px; // compatible with material design
-
-
-// Name font size in timeline status
-$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
-
-
-// Background image
-// If you want to use the local image, please put it in "../"
-$bg-image: none;
-//$bg-image: "./image.png";
-//$bg-image: "https://example.com/img/image.png";
-
-
-// Columns transparency settings
-$bar-transparency: 1.0; // opacity
-//$bar-transparency: 0.8; // semi-transparent
-
-$column-transparency: 1.0; // opacity
-//$column-transparency: 0.8; // semi-transparent
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/basics.scss b/app/javascript/styles/material-light/theme/basics.scss
deleted file mode 100644
index bb8f68bf0..000000000
--- a/app/javascript/styles/material-light/theme/basics.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-body,
-body.embed { background: $bg-color }
-
-.focusable:focus { background: transparent }
-
-// Chrome & Safari scroll bar
-::-webkit-scrollbar-thumb {
- background: $scroll-bar-thumb-color;
-
- &:hover { background: $scroll-bar-thumb-hover-color }
- &:active { background: $scroll-bar-thumb-active-color }
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
- background: transparent !important;
-}
-
-// Firefox scroll bar
-html { scrollbar-color: $scroll-bar-thumb-color transparent }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/button.scss b/app/javascript/styles/material-light/theme/button.scss
deleted file mode 100644
index 5f909d843..000000000
--- a/app/javascript/styles/material-light/theme/button.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include button-shadow;
-
-.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;
-
- &.active { color: $icon-button-active-color }
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
- }
-
- &.overlayed {
- @include icon-button;
- border-radius: 50%;
- background: $media-icon-bg-color;
- color: $media-icon-color;
- padding: 4px;
- line-height: 20px !important;
-
- &:hover {
- background: $media-icon-bg-color;
- color: $media-icon-hover-color;
- }
- }
-
- &__counter {
- width: 16px;
- margin-left: 8px;
- }
-
- &:hover {
- @include material-transition;
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
-}
-
-// Checkbox with label
-label.icon-button {
- &.active {
- color: $ui-text-color;
- background-color: transparent;
- }
-
- &:hover {
- @include material-transition;
- background-color: transparent;
- }
-}
-
-.text-icon-button {
- color: $icon-button-color;
- border-radius: 50%;
- font-size: 14px;
-
- &.active {
- background-color: $icon-bg-hover-color;
- color: $icon-button-active-color;
- }
-
- &:hover {
- background-color: $icon-bg-hover-color;
- color: $icon-button-hover-color;
- }
-}
-
-.button {
- background-color: $contained-button-color;
- border-radius: $button-radius;
-
- &:active,
- &:focus {
- background-color: $contained-button-color;
- border-radius: $button-radius;
- }
-
- &:hover {
- @include shadow-2dp;
- background-color: $contained-button-hover-color;
- }
-
- &.logo-button {
- background: $contained-button-color;
- margin: 2px;
-
- &:hover { background: $contained-button-hover-color }
-
- .button--destructive:hover { background: $contained-button-hover-color }
- }
-
- &.button--block { margin: 8px 0 }
-
- &.button-secondary {
- color: $text-button-color;
- border: none;
- box-shadow: none;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
- }
-
- &.confirmation-modal__cancel-button {
- box-shadow: none;
- background-color: transparent;
- margin: 0 8px;
- color: $text-button-color;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
- }
-}
-
-.spoiler-button__overlay__label {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- color: $media-icon-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/columns.scss b/app/javascript/styles/material-light/theme/columns.scss
deleted file mode 100644
index 77a5c777a..000000000
--- a/app/javascript/styles/material-light/theme/columns.scss
+++ /dev/null
@@ -1,511 +0,0 @@
-@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-bg-color;
- opacity: $column-transparency;
- }
-
- &:last-child { box-shadow: none }
-}
-
-.column-header {
- background: $top-bar-color;
- border-radius: $bar-radius;
- height: 56px;
-
- > button {
- padding: 16px;
- color: $top-bar-text-color;
- }
-
- &>.column-header__back-button { color: $top-bar-icon-color }
-
- &.active {
- .column-header__icon {
- color: $top-bar-unread-icon-color;
- text-shadow: none;
- }
- }
-
- &__icon {
- margin-right: 16px;
- color: $top-bar-icon-color;
- font-size: 20px;
- }
-
- &__buttons { height: 56px }
-
- &__button {
- @include icon-button;
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 8px;
- margin: 10px;
- border-radius: 50%;
- box-sizing: content-box;
-
- &.active {
- color: $top-bar-icon-active-color;
- background: $icon-bg-active-color;
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &__setting-btn {
- color: $icon-button-color;
- padding: 8px 0;
-
- &:hover {
- color: $icon-button-hover-color;
- text-decoration: none;
- }
-
- .fa { font-size: 20px }
-
- span { vertical-align: middle }
- }
-
- &__setting-arrows {
- font-size: 16px;
- border-bottom: 8px;
-
- .column-header__setting-btn {
- padding: 8px;
- border-radius: 50%;
-
- &:last-child { padding-right: 8px }
- }
- }
-
- &__wrapper {
- @include shadow-4dp;
- border-radius: $bar-radius;
- opacity: $bar-transparency;
-
- .announcements { border-top: 1px solid $border-color }
-
- &.active {
- @include shadow-4dp;
-
- &::before { background: transparent }
- }
- }
-
- &__collapsible {
- color: $ui-text-color;
- background: $card-bg-color;
- border-top: 1px solid $border-color;
-
- &-inner {
- background: $card-bg-color;
- padding: 16px;
- }
-
- &.collapsed { border-top: none }
- }
-
- &__back-button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- margin: 8px 10px;
- padding: 10px;
- font-size: 20px;
-
- span { display: none }
- }
-}
-
-.column-subheading {
- color: $section-text-color;
- background: $bg-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
-}
-
-.column-link {
- color: $ui-text-color;
- background: $bg-color;
- padding: 16px;
- border-radius: $nav-drawer-item-radius;
-
- &:hover { background: $list-bg-hover-color }
-
- &:active,
- &:focus { background: $list-bg-active-color }
-
- &__icon {
- margin-right: 32px;
- font-size: 20px;
- }
-
- &--transparent {
- &.active {
- color: $ui-text-color;
- background: $menu-bg-active-color;
-
- &:hover { background: $menu-bg-active-hover-color }
-
- .fa { color: $icon-color }
- }
-
- &:hover {
- color: $ui-text-color;
-
- .fa { color: $icon-color }
- }
- }
-
- .fa { color: $icon-color }
-}
-
-.column-settings {
- &__section {
- color: $section-text-color;
- margin-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
-
- &--slim-button { top: -54px }
-}
-
-.column-inline-form {
- padding: 16px 0 16px 16px;
- background: $card-bg-color;
-
- .icon-button { margin: 0 16px }
-}
-
-.columns-area {
- @include bg-image;
- background-size: contain;
-}
-
-.setting-text {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border-radius: $bar-radius;
-
- &::placeholder { color: $tips-text-color }
-}
-
-.empty-column-indicator {
- color: $secondary-text-color;
- background: $card-bg-color;
- font-size: 16px;
- contain: initial; // padding fix
-}
-
-.conversation {
- border-bottom: 1px solid $border-color;
- padding: 12px;
- background: $list-bg-inactive-color;
-
- &--unread {
- background: $list-bg-color;
-
- .conversation__content__relative-time { color: $info-text-color }
- }
-
- &__unread { background: $primary-color }
-
- &__avatar { padding: 0 16px 0 0 }
-
- &__content {
- padding: 0;
-
- &__relative-time {
- font-size: 14px;
- color: $info-text-color;
- }
-
- &__names,
- &__names a {
- color: $primary-text-color;
- font-size: 16px;
- }
- }
-}
-
-// read status in notification column
-.muted {
- .status {
- &__content {
- color: $read-primary-text-color;
-
- 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-bg-hover-color }
-}
-
-.getting-started {
- background: $bg-color;
- color: $ui-text-color;
- opacity: $column-transparency;
-
- &__wrapper {
- background: $bg-color;
- height: auto !important;
- padding-bottom: 8px;
- border-bottom: 1px solid $border-color;
- }
-
- &__footer {
- padding: 16px;
-
- p {
- color: $secondary-text-color;
- font-size: 12px;
- margin-bottom: 16px;
- }
-
- a { color: $ui-text-color }
-
- p a { color: $link-text-color }
- }
-
- &__trends {
- background: $bg-color;
- margin-bottom: 0;
- opacity: $column-transparency;
-
- h4 {
- color: $section-text-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
- border-bottom: none;
- }
- }
-}
-
-.trends {
- &__header {
- color: $section-text-color;
- background: transparent;
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .fa { margin-right: 8px }
- }
-
- &__item {
- padding: 16px;
- border-bottom: none;
-
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
- }
-
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
- }
- }
-}
-
-.setting-toggle {
- &__label {
- color: $ui-text-color;
- margin: 8px 8px 8px 14px;
- }
-}
-
-.announcements {
- background: $card-bg-color;
- padding: 0 8px;
-
- &__container { color: $primary-text-color }
-
- &__item {
- padding: 16px;
- font-size: 16px;
-
- &__unread { background: $badge-color }
- }
-
- &__pagination {
- color: $ui-text-color;
- padding: 16px;
- bottom: 0;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- margin: 0 4px;
- line-height: normal !important;
- box-sizing: content-box;
- }
-
- span { vertical-align: super }
- }
-}
-
-.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 }
-
-@include outlined-chip;
-
-.reactions-bar {
- margin-top: 16px;
- width: calc(100% - 72px);
-
- .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: $chip-selected-text-color }
-
- &:hover { background-color: $contained-chip-selected-color }
- }
-
- &__emoji {
- width: 24px;
- height: 24px;
- margin: 4px 0 4px 2px;
- }
-
- &__count {
- font-size: 16px;
- margin: 0 12px 0 8px;
- color: $secondary-text-color;
- }
-
- &:hover { background: $contained-chip-hover-color }
- }
-}
-
-.notification {
- &__filter-bar {
- background: $tab-bg-color;
- border-bottom: 1px solid $border-color;
- z-index: 1;
- opacity: $bar-transparency;
-
- button {
- background: $tab-bg-color;
- color: $tab-indicator-color;
- font-size: 16px;
-
- span { font-size: 14px }
-
- &.active {
- color: $tab-indicator-active-color;
- border-bottom: 4px solid $tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
- }
-
- &__message {
- color: $secondary-text-color;
- margin: 0 16px 0 70px;
- font-size: 16px;
- }
-
- &__display-name:hover { color: inherit }
-}
-
-.notification-favourite .status.status-direct {
- .icon-button.disabled { color: $disabled-icon-color }
-}
-
-.relationship-tag {
- color: $ui-text-color;
- background-color: $relationship-tag-color;
- font-size: 12px;
- border-radius: 17px;
- padding: 4px 8px;
- opacity: 1;
-}
-
-.attachment-list__list a { color: $secondary-text-color }
-
-// unread notification
-.notification.unread:before, .status__wrapper.unread:before { border-left: none }
-
-.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/components.scss b/app/javascript/styles/material-light/theme/components.scss
deleted file mode 100644
index aa64aabc5..000000000
--- a/app/javascript/styles/material-light/theme/components.scss
+++ /dev/null
@@ -1,647 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include text-area-border;
-
-.modal-root {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-
- &__overlay { background-color: rgba(0,0,0,.32) !important }
-
- &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
-}
-
-.drawer {
- &__header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- justify-content: space-around;
- opacity: $bar-transparency;
-
- a { transition: none }
-
- a:hover {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- }
- }
-
- &__tab {
- color: $top-bar-icon-color;
- font-size: 20px;
- margin: 10px auto 10px;
- padding: 8px;
- flex: none;
- height: 20px;
- width: 20px;
- border-bottom: none;
- text-align: justify;
-
- &:hover { color: $top-bar-icon-hover-color }
- }
-
- &__pager {
- @include shadow-1dp;
- border-radius: $card-radius;
- }
-
- &__inner {
- background: $card-bg-color;
- opacity: $column-transparency;
-
- &.darker {
- background: $card-bg-color;
- position: inherit;
- }
-
- &__mastodon { background: $card-bg-color }
- }
-}
-
-.search {
- &__input {
- background: $search-bar-color;
- color: $tips-text-color;
- border-radius: $search-bar-radius;
- padding: 12px 12px 12px 40px;
- opacity: $bar-transparency;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
-
- &:hover { @include search-bar-hover }
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__icon {
- .fa {
- color: $icon-color;
- font-size: 20px;
- top: 12px;
- right: unset;
- left: 12px;
- height: 6px;
- transition: none;
-
- &.active { opacity: 1 }
-
- &-search {
- transform: none;
- opacity: 1;
- }
- &-times-circle.active {
- right: 16px;
- left: unset;
- transform: none;
- }
- }
- }
-}
-
-.search-popout {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- border-radius: 0px $bar-radius;
- border-top: 1px solid $border-color;
- margin-top: 0;
- color: $tips-text-color;
-
- h4 {
- color: $secondary-text-color;
- }
-
- em {
- color: $search-bar-text-color;
- }
-}
-
-.search-results {
- &__header {
- color: $secondary-text-color;
- background-color: $card-bg-color;
- padding: 16px;
-
- .fa { margin-right: 16px }
- }
-
- &__section {
- h5 {
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- padding: 16px;
- color: $section-text-color;
-
- .fa { margin-right: 8px }
- }
- }
-}
-
-.navigation-bar {
- color: $secondary-text-color;
- padding: 14px;
-
- strong {
- color: $ui-text-color;
- }
-
- .navigation-bar__actions .compose__action-bar .icon-button {
- width: 36px !important;
- height: 36px !important;
- padding: 8px;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
-}
-
-.navigation-panel hr {
- border-top: 1px solid $border-color;
- margin: 8px 0;
-}
-
-.flex-spacer { margin: 8px 0 }
-
-.dropdown-menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- padding: 8px 0;
- border-radius: $menu-radius;
-
- &__arrow { visibility: hidden }
-
- &__item a {
- font-size: 14px;
- padding: 8px 16px;
- background: $menu-bg-color;
- color: $menu-text-color;
-
- &:hover, &:active {
- background: $menu-bg-hover-color;
- color: $menu-text-color;
- }
- }
-
- &__separator {
- margin: 8px 0;
- border-bottom: 1px solid $border-color;
- }
-}
-
-.compose-form {
- .autosuggest-textarea {
- &__textarea {
- background: $text-field-bg-color;
- color: $ui-text-color;
- padding: 8px 42px 8px 16px;
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__suggestions {
- @include shadow-1dp;
- background: $menu-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
- font-size: 16px;
- padding: 8px 0;
-
- &__item {
- padding: 8px;
- border-radius: 0;
-
- &:hover { background: $menu-bg-hover-color }
-
- &.selected,
- &:focus,
- &:active { background: $menu-bg-active-color }
- }
- }
- }
-
- .spoiler-input {
- &.spoiler-input--visible { margin-bottom: 16px }
-
- &__input {
- color: $ui-text-color;
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- border-radius: 0;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- .compose-form {
- &__warning {
- color: $secondary-text-color;
- background: $card-bg-color;
- padding: 16px;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- box-shadow: none;
-
- a { color: $link-text-color }
- }
-
- &__modifiers {
- background: $card-bg-color;
- color: $tips-text-color;
-
- .compose-form {
- &__upload-thumbnail { border-radius: 0 }
-
- &__upload__actions {
- @include material-transition;
-
- .icon-button {
- color: $media-icon-color;
- font-size: 16px;
-
- &:hover { background-color: transparent }
- }
- }
- }
- }
-
- &__buttons-wrapper {
- background: $card-bg-color;
- color: $tips-text-color;
- padding: 8px;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- }
-
- .text-icon-button {
- width: 20px !important;
- height: 20px !important;
- padding: 8px;
- line-height: 20px !important;
- }
- }
-
- &__poll-wrapper {
- border-top: 1px solid $border-color;
-
- ul { padding: 16px 12px 16px 0 }
-
- select {
- color: $ui-text-color;
- background-color: $bg-color;
- border: 0;
-
- &:focus { border-color: $border-hover-color }
- }
-
- .button.button-secondary {
- box-shadow: none;
- color: $text-button-color;
-
- &:hover { background-color: $text-button-hover-color }
-
- &:active,
- &:focus { background-color: $text-button-focus-color }
- }
-
- .poll__footer { border-top: none }
- }
-
- &__publish .compose-form__publish-button-wrapper { box-shadow: none }
- }
-}
-
-.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
-
-
-.poll {
- .button { margin-right: 8px }
-
- li { margin-bottom: 0 }
-
- &__input {
- border: none;
- width: 20px;
- height: 20px;
- flex: 0 0 20px;
- padding: 18px;
- margin: 0 2px;
- background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
-
- &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
-
- &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
-
- &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-
- &.checkbox {
- border-radius: 2px;
- border: 2px solid $control-border-color;
- padding: 8px;
- margin: 8px 10px;
- background: none;
- }
- }
-
- &__text input[type=text] {
- color: $ui-text-color;
- background: $text-field-bg-color;
- border: 1px solid $border-color;
- padding: 8px 12px;
-
- &:focus { border-color: $border-hover-color }
- }
-
- &__option {
- padding: 16px 0 8px;
-
- input[type=text] {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border: none;
- border-radius: 2px;
- padding: 8px 16px;
- }
-
- &__text { line-height: 34px }
- }
-
- &__chart {
- border-radius: 0;
- background: $progress-indicator-track-color;
-
- &.leading { background: $progress-indicator-color }
- }
-
- &__footer {
- padding-top: 8px;
- padding-bottom: 0;
- color: $ui-text-color;
- }
-
- &__link { color: $ui-text-color }
-}
-
-.privacy-dropdown {
- &.active .privacy-dropdown__value.active {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- box-shadow: none;
-
- .icon-button { color: $icon-button-active-color }
- }
-
- &__dropdown {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $dialog-radius;
- }
-
- &__option {
- color: $icon-color;
- padding: 8px 16px;
-
- &__icon {
- font-size: 20px;
- margin-right: 12px;
- }
-
- &__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &.active {
- background: $menu-bg-active-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &:hover {
- background: $menu-bg-active-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &:hover {
- background: $menu-bg-hover-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-}
-
-.character-counter {
- color: $secondary-text-color;
-}
-
-.reply-indicator {
- box-shadow: none;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- background: $card-bg-color;
- padding: 16px;
-
- &__header { margin-bottom: 4px }
-
- &__display {
- &-name {
- color: $primary-text-color;
- padding-right: 24px;
- }
-
- &-avatar { margin-right: 8px }
- }
-
- &__content {
- color: $primary-text-color;
-
- p { margin-bottom: 16px }
- }
-}
-
-.attachment-list {
- &__list a { color: $secondary-text-color }
-
- &.compact .fa { color: $icon-color }
-}
-
-.block-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.load-more {
- color: $ui-text-color;
-
- &:hover { background: transparent }
-}
-
-.autosuggest-hashtag {
- &__name { color: $menu-text-color }
-}
-
-.filter-form {
- background: $bg-color;
- color: $ui-text-color;
-
- &__column { padding: 8px 16px }
-}
-
-.directory {
- &__card {
- @include shadow-1dp;
- margin: 8px 4px;
- border-radius: $card-radius;
-
- &__img { border-radius: $card-radius $card-radius 0 0 }
-
- &__bar {
- background: $card-bg-color;
- padding: 8px 16px;
-
- .display-name {
- margin-left: 16px;
-
- strong {
- font-size: 16px;
- color: $primary-text-color;
- }
-
- span { color: $secondary-text-color }
- }
- }
-
- &__extra {
- background: $card-bg-color;
- border-radius: 0 0 $card-radius $card-radius;
-
- .account__header__content {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
- }
-
- .accounts-table__count { padding: 16px 0 }
- }
- }
-}
-
-.mute-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__explanation { margin-top: 16px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-
- .setting-toggle {
- margin-top: 16px;
- margin-bottom: 16px;
-
- &__label {
- color: $ui-text-color;
- margin: 0 0 0 12px;
- }
- }
-}
-
-.upload-progress {
- color: $ui-text-color;
-
- &__backdrop {
- border-radius: 0;
- background: $progress-indicator-track-color;
- margin-top: 6px;
- }
-
- &__tracker {
- border-radius: 0;
- background: $progress-indicator-color;
- }
-}
-
-.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/containers.scss b/app/javascript/styles/material-light/theme/containers.scss
deleted file mode 100644
index 09af289b0..000000000
--- a/app/javascript/styles/material-light/theme/containers.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.public-layout {
- .header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- margin: 16px 0;
-
- .brand:hover { background: $tab-indicator-bg-hover-color }
-
- .nav-link,
- .nav-link.optional {
- color: $top-bar-text-color;
-
- &:hover {
- background: $tab-indicator-bg-hover-color;
- text-decoration: none;
- }
- }
-
- .nav-button {
- background: transparent;
- margin: 0;
- border-radius: 0;
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
-
- .detailed-status__meta { margin-top: 16px }
- }
-
- .detailed-status { padding: 16px }
-
- .footer {
- padding-top: 16px;
- padding-bottom: 64px;
- color: $ui-text-color;
-
- h4 { color: $ui-text-color }
-
- ul a { color: $secondary-text-color }
-
- .grid .column-2 h4 a { color: $ui-text-color }
-
- .brand {
- svg { fill: $icon-color }
-
- &:hover svg { fill: $icon-hover-color }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/control.scss b/app/javascript/styles/material-light/theme/control.scss
deleted file mode 100644
index a205a4cb7..000000000
--- a/app/javascript/styles/material-light/theme/control.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@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-light/theme/emoji-picker.scss b/app/javascript/styles/material-light/theme/emoji-picker.scss
deleted file mode 100644
index 91663fb93..000000000
--- a/app/javascript/styles/material-light/theme/emoji-picker.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@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-bg-color;
- border-radius: $menu-radius;
- }
-
- &__modifiers__menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $menu-radius;
-
- button {
- padding: 8px;
- }
- }
-}
-
-.emoji-mart {
- width: 388px !important;
- font-size: 14px;
- color: $menu-text-color;
-
- &-bar {
- border: 0 solid $border-color;
-
- &:first-child {
- background: $menu-bg-color;
- }
- }
-
- &-anchor {
- color: $text-tab-indicator-color;
- padding: 10px 4px;
-
- &-bar { background-color: $icon-tab-indicator-active-color }
-
- &-selected { color: $icon-tab-indicator-hover-color }
-
- &:hover { color: $icon-tab-indicator-hover-color }
- }
-
- &-search {
- background: $menu-bg-color;
-
- input {
- outline: none;
- padding: 8px;
- background: $search-bar-color;
- color: $ui-text-color;
- border: 0;
- border-radius: $search-bar-radius;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
- }
- }
-
- &-scroll {
- padding: 0 8px 8px;
- background: $menu-bg-color;
- }
-
- &-category {
- &-label span {
- padding: 4px 6px;
- background: $menu-bg-color;
- }
-
- .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
- }
-
- &-no-results { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/icons.scss b/app/javascript/styles/material-light/theme/icons.scss
deleted file mode 100644
index 987767544..000000000
--- a/app/javascript/styles/material-light/theme/icons.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@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.fa-lock { text-transform: none }
-
-.icon-with-badge__badge {
- background: $badge-color;
- border: none;
- padding: 2px 6px;
- border-radius: 12px;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/material-icons.scss b/app/javascript/styles/material-light/theme/material-icons.scss
deleted file mode 100644
index dd01ce3d6..000000000
--- a/app/javascript/styles/material-light/theme/material-icons.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config', '../icon_config';
-@import '../custom_color', '../custom_layout';
-@import 'functions';
-@import 'mixins';
-
-
-@include icon-font;
-
-.fa-fw {
- width: 20px;
- height: 20px;
- font-size: 20px;
-}
-
-.fa {
- &.fa-bars,
- &.fa-navicon,
- &.fa-reorder,
- &.fa-globe,
- &.fa-cog,
- &.fa-cogs,
- &.fa-gears,
- &.fa-sign-out,
- &.fa-search,
- &.fa-times,
- &.fa-times-circle,
- &.fa-close,
- &.fa-remove,
- &.fa-chevron-down,
- &.fa-ellipsis-v,
- &.fa-paperclip,
- &.fa-tasks,
- &.fa-plus,
- &.fa-unlock,
- &.fa-lock,
- &.fa-envelope,
- &.fa-home,
- &.fa-bullhorn,
- &.fa-sliders,
- &.fa-chevron-left,
- &.fa-chevron-right,
- &.fa-reply,
- &.fa-reply-all,
- &.fa-share-alt,
- &.fa-star,
- &.fa-bookmark,
- &.fa-ellipsis-h,
- &.fa-bell,
- &.fa-bell-o,
- &.fa-eraser,
- &.fa-users,
- &.fa-file-text,
- &.fa-user-plus,
- &.fa-address-book,
- &.fa-address-book-o,
- &.fa-list,
- &.fa-list-ul,
- &.fa-eye,
- &.fa-eye-slash,
- &.fa-pencil,
- &.fa-trash,
- &.fa-play,
- &.fa-external-link,
- &.fa-retweet,
- &.fa-link,
- &.fa-pause,
- &.fa-volume-up,
- &.fa-volume-off,
- &.fa-expand,
- &.fa-download,
- &.fa-arrows-alt,
- &.fa-compress,
- &.fa-user-times,
- &.fa-check,
- &.fa-quote-right,
- &.fa-upload,
- &.fa-comments,
- &.fa-angle-right,
- &.fa-thumb-tack {
- @include icon-font-style;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- }
-}
-
-.fa {
- &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
- &.fa-globe::before { content: "public" }
- &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
- &.fa-sign-out::before { content: "exit_to_app" }
- &.fa-search::before { content: "search" }
- &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
- &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
- &.fa-paperclip::before { content: "attach_file" }
- &.fa-tasks::before { content: "poll" }
- &.fa-plus::before { content: "add" }
- &.fa-unlock::before { content: "lock_open" }
- &.fa-lock::before { content: "lock" }
- &.fa-envelope::before { content: "mail" }
- &.fa-home::before { content: "home" }
- &.fa-bullhorn::before { content: "announcement" }
- &.fa-sliders::before { content: "tune" }
- &.fa-chevron-left::before { content: "arrow_back" }
- &.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: $reply-icon }
- &.fa-reply-all::before { content: "reply_all" }
- &.fa-share-alt::before { content: "share" }
- &.fa-star::before { content: $favorite-icon }
- &.fa-bookmark::before { content: "bookmark" }
- &.fa-ellipsis-h::before { content: "more_horiz" }
- &.fa-bell::before { content: "notifications" }
- &.fa-bell-o::before { content: "notifications" }
- &.fa-eraser::before { content: "clear_all" }
- &.fa-users::before { content: "people" }
- &.fa-file-text::before { content: "web" }
- &.fa-user-plus::before { content: "person_add" }
- &.fa-address-book::before { 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: "person_remove" }
- &.fa-check::before { content: "check" }
- &.fa-quote-right::before { content: "format_quote" }
- &.fa-upload::before { content: "file_upload" }
- &.fa-comments::before { content: "forum" }
- &.fa-angle-right::before { content: "chevron_right" }
- &.fa-thumb-tack::before { content: "push_pin" }
-}
-
-// 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
-button.icon-button i.fa-retweet {
- height: 20px;
- width: 20px;
- transition: none;
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,') }
-
-button.icon-button i.fa-retweet:hover,
-button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover,
-button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-// dropdown icon
-.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px}
-
-// icon in tab settings
-.text-btn.column-header__setting-btn {
- .fa {
- vertical-align: middle;
-
- &.fa-eraser { margin-right: 8px } // clear notification
- }
-}
-
-// top bar icons align
-.fa.fa-bell.column-header__icon.fa-fw,
-.fa.fa-home.column-header__icon.fa-fw,
-.fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw,
-.fa.fa-bars.column-header__icon.fa-fw,
-.fa.fa-bookmark.column-header__icon.fa-fw,
-.fa.fa-address-book-o.column-header__icon.fa-fw,
-.fa.fa-envelope.column-header__icon.fa-fw,
-.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
-
-// top bar icons in single column mode
-.tabs-bar__link {
- .fa.fa-home.fa-fw,
- .fa.fa-bell.fa-fw,
- .fa.fa-users.fa-fw,
- .fa.fa-globe.fa-fw { vertical-align: text-bottom }
-}
-
-// getting-started and side bar icons
-.column-link .fa,
-.column-link--transparent .fa { vertical-align: text-bottom }
-
-// uploaded media icons align
-.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
- font-size: 20px;
- vertical-align: text-bottom;
-}
-
-// search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
-
-// read more icon
-.status__content__read-more-button .fa { vertical-align: bottom }
-
-// Attachment icon
-.attachment-list__list a .fa { vertical-align: middle }
-
-// status detail icon
-.detailed-status .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
-
-// status scope
-.status__visibility-icon .fa,
-.account__header__tabs__name .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/media.scss b/app/javascript/styles/material-light/theme/media.scss
deleted file mode 100644
index b8ac12414..000000000
--- a/app/javascript/styles/material-light/theme/media.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.media-gallery {
- border-radius: $media-radius;
-
- &__item { border-radius: $media-radius }
-}
-
-.media-modal {
- &__nav {
- background: $media-icon-bg-color;
- color: $media-icon-color;
- height: 48px;
- width: 48px;
- margin: auto 16px;
- padding: 8px;
- border-radius: 50%;
-
- .fa { width: 32px }
- }
-
- &__button {
- background-color: $media-page-indicator-color;
-
- &--active { background-color: $media-page-indicator-active-color }
- }
-
- &__close {
- &.icon-button {
- background: transparent;
- color: $media-icon-color;
- font-size: 24px !important;
- width: 24px !important;
- height: 24px !important;
- padding: 8px;
- box-sizing: content-box;
- line-height: normal !important;
-
- &:hover {
- background: $media-icon-bg-hover-color;
- color: $media-icon-hover-color;
- }
-
- .fa-fw {
- width: 24px;
- height: 24px;
- }
- }
- }
-
- &__meta {
- bottom: 24px;
-
- a { color: $media-icon-color }
- }
-
- &__overlay {
- .picture-in-picture__footer .icon-button {
- color: $media-icon-color;
-
- &:active,
- &:focus,
- &:hover {
- color: $media-icon-hover-color;
- background-color: transparent;
- }
- }
- }
-}
-
-.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 {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__volume {
- &::before {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__current {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__time-current { margin-left: 68px }
-
- &__buttons button { font-size: 20px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/modal.scss b/app/javascript/styles/material-light/theme/modal.scss
deleted file mode 100644
index 93e5b24c1..000000000
--- a/app/javascript/styles/material-light/theme/modal.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.confirmation-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $dialog-radius;
-
- &__container {
- text-align: left;
- padding: 24px;
- }
-
- &__action-bar {
- justify-content: flex-end;
- background: $card-bg-color;
- padding: 8px;
- }
-
- &__secondary-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.actions-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- border-radius: $card-radius;
-
- ul li:not(:empty) a {
- color: $ui-text-color;
- font-size: 16px;
-
- &:hover {
- background: $card-bg-hover-color;
- color: $ui-text-color;
- }
- }
-
- .dropdown-menu__separator { border-bottom-color: $border-color }
-
- .status {
- background: $card-bg-color;
- border-bottom-color: $border-color;
- padding-top: 12px;
- padding-bottom: 12px;
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
- }
-}
-
-.report-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__target {
- padding: 24px;
- text-align: left;
- font-weight: bold;
- }
-
- &__container {
- border-top: none;
- }
-
- &__comment {
- border-right: none;
-
- .setting-text-label { color: $ui-text-color }
- }
-}
-
-.embed-modal .embed-modal__container {
- padding: 0 24px 24px 24px;
-
- .hint {
- margin-bottom: 16px;
- color: $secondary-text-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/responsive.scss b/app/javascript/styles/material-light/theme/responsive.scss
deleted file mode 100644
index 8618f7ed7..000000000
--- a/app/javascript/styles/material-light/theme/responsive.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@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;
- width: $fab-size;
- height: $fab-size;
- bottom: 16px;
- right: 16px;
-
- &:hover { background: $floating-action-button-hover-color }
-
- &:active,
- &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
- .column { margin: 0 !important }
- .search__input { padding: 16px 46px }
-
- .search__icon {
- .fa {
- top: 16px;
- left: 16px;
- }
-
- .fa-times-circle.active { left: unset }
- }
-}
-
-// small size screen
-@media screen and (max-width: 415px) {
- .public-layout { padding-top: 64px }
-}
-
-// middle size screen
-@media screen and (min-width: 415px) {
- .tabs-bar {
- margin-bottom: 0;
-
- &__wrapper {
- padding-top: 0;
-
- .tabs-bar { margin-bottom: 0 }
- }
- }
-
- .columns-area__panels {
- &__main {
- @include shadow-1dp;
- padding: 0;
- }
-
- &__pane { padding: 0 16px }
- }
-}
-
-//single column mode
-@media screen and (min-width: 631px) {
- .tabs-bar__link {
- &:hover {
- background: $tab-indicator-bg-hover-color;
- border-bottom-color: transparent;
- }
-
- &:active,
- &:focus {
- background: $tab-indicator-bg-focus-color;
- border-bottom-color: $tab-bg-color;
- }
-
- &.active { border-bottom-color: $tab-indicator-active-color }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/statuses.scss b/app/javascript/styles/material-light/theme/statuses.scss
deleted file mode 100644
index 7e4374014..000000000
--- a/app/javascript/styles/material-light/theme/statuses.scss
+++ /dev/null
@@ -1,292 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.status {
- padding: 12px 12px 4px 70px;
- border-bottom: 1px solid $border-color;
-
- &__expand { width: 70px }
-
- &__info {
- font-size: $name-font-size;
- padding-right: 4px;
- }
-
- &__relative-time { color: $info-text-color }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
-
- &__content {
- font-size: $status-font-size;
- padding-top: 4px;
- color: $primary-text-color;
-
- a {
- color: $link-text-color;
-
- &.unhandled-link { color: $link-text-color }
- }
-
- p { margin-bottom: 16px }
-
- .status__content__spoiler-link {
- 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 {
- margin-top: 4px;
-
- &__counter {
- margin-right: 6px;
-
- &__label {
- font-size: 14px;
- color: $info-text-color;
- }
- }
- }
-
- &__action-bar-button {
- margin-right: 4px;
-
- &.icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &--with-counter {
- margin-right: 4px;
- width: auto !important;
-
- &:hover { background: transparent }
- }
- }
- }
-
- &__action-bar-dropdown {
- width: 36px !important;
- height: 36px !important;
- box-sizing: content-box;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
-
- &:hover {
- color:$icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
- }
-
- &__prepend {
- color: $secondary-text-color;
- margin-left: 64px;
-
- .status__display-name strong { color: $secondary-text-color }
- }
-
- &.status-direct:not(.read) {
- background: transparent;
- border-bottom-color: $border-color;
- }
-
- &__visibility-icon { color: $icon-color }
-}
-
-.status-card {
- color: $icon-color;
- border-color: $border-color;
- outline: none;
- margin-top: 16px;
-
- &__image {
- background: transparent;
-
- &>.fa {
- font-size: 26px;
- }
- }
-
- &__title {
- color: $primary-text-color;
- margin-bottom: 6px;
- }
-
- &__description { color: $secondary-text-color }
-
- &__actions {
- &>div {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- }
-
- button,
- a {
- color: $media-icon-color;
- font-size: 20px;
- }
-
- a { bottom: auto }
- }
-
- &.compact {
- border-color: $border-color;
- outline: none;
- background: transparent;
-
- .status-card {
- &__content { padding: 12px }
- &__image { flex: 0 0 64px }
- }
-
- &:hover { background-color: transparent !important }
- }
-
- &.horizontal {
- border-radius: 0;
-
- .status-card {
- &__image-preview { border-radius: 0 }
-
- &__image-image { border-radius: 0 }
- }
- }
-}
-
-a.status-card {
- &:hover { background-color: $card-bg-color }
-}
-
-.embed .status,
-.public-layout .status { padding: 16px 16px 16px 80px }
-
-// Detailed status in mobile
-.status.light {
- .status {
- &__display-name { color: $primary-text-color }
- &__relative-time { color: $info-text-color }
- &__content { color: $primary-text-color }
- }
-
- .display-name { color: $secondary-text-color }
- .display-name strong { color: $primary-text-color }
-}
-
-.detailed-status {
- background: $card-bg-color;
- padding: 16px;
-
- &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__meta {
- margin-top: 16px;
- color: $info-text-color;
- }
-
- &__action-bar {
- background: $card-bg-color;
- border-top: none;
- border-bottom: 1px solid $border-color;
- padding: 8px 0;
- }
-
- &__action-bar-dropdown {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
- }
-
- &__button {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-
- .button.logo-button {
- margin-bottom: 16px;
- line-height: 36px;
- }
-}
-
-// search user trends
-.display-name {
- &__html { color: $primary-text-color }
- &__account { color: $secondary-text-color }
-}
-
-.activity-stream {
- @include shadow-1dp;
- margin-bottom: 16px;
- border-radius: $card-radius;
-
- .entry {
- background: $card-bg-color;
-
- &:first-child {
- .detailed-status,
- .load-more,
- .status { border-radius: $card-radius $card-radius 0 0 }
- }
- }
-}
-
-.entry.entry-center { border-bottom: 1px solid $border-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/theme.scss b/app/javascript/styles/material-light/theme/theme.scss
deleted file mode 100644
index 367893682..000000000
--- a/app/javascript/styles/material-light/theme/theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
-* Mastodon Material 0.2.1
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/variables.scss b/app/javascript/styles/material-light/theme/variables.scss
deleted file mode 100644
index 0b948881b..000000000
--- a/app/javascript/styles/material-light/theme/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@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-light/theme/widgets.scss b/app/javascript/styles/material-light/theme/widgets.scss
deleted file mode 100644
index 4abdfbae9..000000000
--- a/app/javascript/styles/material-light/theme/widgets.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.hero-widget {
- @include shadow-2dp;
- margin-bottom: 16px;
-
- &__img {
- border-radius: $card-radius $card-radius 0 0;
- background: $card-bg-color;
-
- img { border-radius: $card-radius $card-radius 0 0 }
- }
-
- &__text {
- background: $card-bg-color;
- padding: 16px;
- color: $primary-text-color;
- border-radius: 0 0 $card-radius $card-radius;
- }
-}
-
-.endorsements-widget {
- padding-bottom: 8px;
- margin-bottom: 8px;
-}
-
-.trends-widget h4 { color: $section-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/plus.scss b/app/javascript/styles/plus.scss
index 9cbccaa5f..75d6f9452 100644
--- a/app/javascript/styles/plus.scss
+++ b/app/javascript/styles/plus.scss
@@ -1,2 +1,2 @@
@import 'application';
-@import 'plus/loader';
\ No newline at end of file
+@import 'mastodon-material/profiles/plus/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/black.scss b/app/javascript/styles/plus/color/black.scss
deleted file mode 100644
index 693caa813..000000000
--- a/app/javascript/styles/plus/color/black.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #000000;
-$menu-bg-color: #121212;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #121212;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #000000;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #1e1e1e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #121212;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #1e1e1e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #1e1e1e;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #121212;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/mastodon-dark.scss b/app/javascript/styles/plus/color/mastodon-dark.scss
deleted file mode 100644
index b2e6bf27a..000000000
--- a/app/javascript/styles/plus/color/mastodon-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9baec8;
-$ui-text-color: #fff;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #606984;
-$tips-text-color: #6d7889;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4ea2df;
-$menu-text-color: #282c37;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #191b22;
-$menu-bg-color: #d9e1e8;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #313543;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #282c37;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #42485a;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #393f4f;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#42485a, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #9baec8;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-bg-hover-color: lighten($bg-color, 14%);
-$icon-bg-active-color: lighten($bg-color, 18%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #fff;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($primary-color, 18%);
-
-// Border color
-$border-color: #393f4f;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
-
-// App bar color
-$top-bar-color: #313543;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: #d9e1e8;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #1f232b;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/mastodon-light.scss b/app/javascript/styles/plus/color/mastodon-light.scss
deleted file mode 100644
index 7e94b8de7..000000000
--- a/app/javascript/styles/plus/color/mastodon-light.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #217aba;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #eff3f5;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($bg-color, 6%);
-$menu-bg-active-color: darken($bg-color, 10%);
-$menu-bg-active-hover-color: darken($bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #282c37;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: darken($bg-color, 4%);
-$icon-bg-active-color: darken($bg-color, 8%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: $primary-color;
-$toggle-track-active-color: lighten($primary-color, 26%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: #ccd7e0;
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #ffffff;
-$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: #282c37;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #e6ebf0;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/plus-classic.scss b/app/javascript/styles/plus/color/plus-classic.scss
deleted file mode 100644
index d94bbe90f..000000000
--- a/app/javascript/styles/plus/color/plus-classic.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #db4437;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v1-dark.scss b/app/javascript/styles/plus/color/v1-dark.scss
deleted file mode 100644
index d31fbf04f..000000000
--- a/app/javascript/styles/plus/color/v1-dark.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #303030;
-$menu-bg-color: #424242;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #424242;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #424242;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
-
-// App bar color
-$top-bar-color: #1565C0;
-$search-bar-color: lighten($bg-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #424242;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v1-light.scss b/app/javascript/styles/plus/color/v1-light.scss
deleted file mode 100644
index 2888e81b4..000000000
--- a/app/javascript/styles/plus/color/v1-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$top-bar-unread-icon-color: darken($primary-color, 30%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #2196f3;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v2-dark.scss b/app/javascript/styles/plus/color/v2-dark.scss
deleted file mode 100644
index 025b238f5..000000000
--- a/app/javascript/styles/plus/color/v2-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #121212;
-$menu-bg-color: #1e1e1e;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #1e1e1e;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #1e1e1e;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($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-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #1e1e1e;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v2-light.scss b/app/javascript/styles/plus/color/v2-light.scss
deleted file mode 100644
index fd9469961..000000000
--- a/app/javascript/styles/plus/color/v2-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #ffffff;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: $bg-color;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: $bg-color;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
-$scroll-bar-thumb-active-color: darken($bg-color, 38%);
-
-// App bar color
-$top-bar-color: $bg-color;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/custom_color.scss b/app/javascript/styles/plus/custom_color.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/plus/custom_color.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@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
deleted file mode 100644
index cd403efed..000000000
--- a/app/javascript/styles/plus/custom_config.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@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
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/plus/custom_layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@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
deleted file mode 100644
index 3e06e0820..000000000
--- a/app/javascript/styles/plus/icon_config.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Favorite icon settings
-//$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-//$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
-$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
-
-
-// Reply icon settings
-//$reply-icon: "reply";
-$reply-icon: "comment"; // blooming
-
-
-// Material Design Icon settings
-// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-//$icon-font-source: google; // Google Fonts
-//$icon-font-source: github; // GitHub
-$icon-font-source: self; // Self-hosting
-
-// Material Icon style settings
-$icon-font-style: filled;
-//$icon-font-style: outlined;
-//$icon-font-style: round;
-//$icon-font-style: sharp;
-//$icon-font-style: two-tone;
\ No newline at end of file
diff --git a/app/javascript/styles/plus/layout/material-v1.scss b/app/javascript/styles/plus/layout/material-v1.scss
deleted file mode 100644
index 23c9a0616..000000000
--- a/app/javascript/styles/plus/layout/material-v1.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 2px;
-
-
-// Search bar radius
-$search-bar-radius: 2px;
-
-
-// Bar radius settings
-$bar-radius: 0;
-
-
-// Button radius settings
-$button-radius: 2px;
-
-
-// Card radius settings
-$card-radius: 2px;
-
-
-// Dialog radius settings
-$dialog-radius: 2px;
-
-
-// Menu radius settings
-$menu-radius: 2px;
-
-
-// Media radius settings
-$media-radius: 0;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 0;
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 2px // Material v1 square
-
-
-// Chip settings
-$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px;
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
\ 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
deleted file mode 100644
index 5700a99c8..000000000
--- a/app/javascript/styles/plus/layout/material-v2.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 8px;
-//$nav-bar-radius: 28px; // full radius
-
-
-// Search bar radius
-$search-bar-radius: 8px;
-//$search-bar-radius: 21px; // full rounded
-
-
-// Bar radius settings
-$bar-radius: 0;
-//$bar-radius: 8px;
-
-
-// Button radius settings
-$button-radius: 8px;
-
-
-// Card radius settings
-$card-radius: 8px;
-
-
-// Dialog radius settings
-$dialog-radius: 8px;
-
-
-// Menu radius settings
-$menu-radius: 8px;
-
-
-// Media radius settings
-$media-radius: 0;
-//$media-radius: 2px;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 8px; // corner rounded
-//$nav-drawer-item-radius: 32px; // full rounded
-//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 8px // Material v2 square
-
-
-// Chip settings
-$outlined-chip: true; // Material v2 styled outlined chip
-//$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: false; // Material v2 styled colored button without shadow
-//$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px; // Regular
-//$fab-size: 40px; // Mini
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
-//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/plus/loader.scss b/app/javascript/styles/plus/loader.scss
deleted file mode 100644
index 804d14f3e..000000000
--- a/app/javascript/styles/plus/loader.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'theme/theme';
-@import 'theme/material-icons';
-
-// Plugins
-@import 'plugins/astarte';
-@import 'plugins/cards';
-@import 'plugins/dense';
-@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/astarte.scss b/app/javascript/styles/plus/plugins/astarte.scss
deleted file mode 100644
index 8c2e534bb..000000000
--- a/app/javascript/styles/plus/plugins/astarte.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.announcements {
- li {
- padding: 8px 16px;
- background: $card-bg-color;
- border-radius: $card-radius;
- border: 1px solid $border-color;
- }
-
- &__icon {
- margin: 0;
- right: 16px;
- height: 20px;
-
- .icon-button {
- @include icon-button;
-
- &:hover { background: transparent }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/cards.scss b/app/javascript/styles/plus/plugins/cards.scss
deleted file mode 100644
index d9b3906a5..000000000
--- a/app/javascript/styles/plus/plugins/cards.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@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: $bg-color }
-}
-
-.status {
- border-bottom: 0;
- border-radius: $card-radius;
- background: $card-bg-color;
-
- &__prepend { padding: 8px 8px 2px 0 }
-}
-
-.account { border-bottom: 0 !important }
-
-.status__wrapper.status__wrapper,
-.notification.notification {
- @include shadow-1dp;
- margin: 8px 2px;
- border-radius: $card-radius;
- background: $card-bg-color;
-}
-
-.notification .status__wrapper.status__wrapper { box-shadow: none !important }
-
-.notification__filter-bar {
- @include non-overflow-shadow-4dp;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/dense.scss b/app/javascript/styles/plus/plugins/dense.scss
deleted file mode 100644
index 413336d04..000000000
--- a/app/javascript/styles/plus/plugins/dense.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.drawer {
- &__header { height: 48px }
-
- &__tab { margin: 6px auto 6px }
-}
-
-.column { margin: 10px 5px }
-
-.column-header {
- height: 48px;
-
- > button { padding: 12px 16px }
-
- &__buttons { height: 48px }
-
- &__button { margin: 6px }
-}
-
-.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 }
-
- &__buttons-wrapper {
- .icon-button,
- .text-icon-button { padding: 4px }
- }
- }
-}
-
-.status {
- padding: 8px 8px 4px 66px;
-
- &__expand { width: 66px }
-
- &__info { padding-right: 0 }
-
- &__avatar {
- left: 8px;
- top: 10px;
- }
-
- &__content { padding-top: 2px }
-
- &__action-bar-button {
- margin: 0 4px;
-
- &.icon-button { padding: 4px }
- }
-
- &__action-bar-dropdown {
- width: 28px !important;
- height: 28px !important;
- margin: 0 4px;
-
- .icon-button { padding: 4px }
- }
-}
-
-.detailed-status {
- padding: 14px;
-
- &__meta { margin-top: 14px }
-
- &__action-bar { padding: 10px 0 }
-}
-
-.reply-indicator { padding: 8px }
-
-.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/plus.scss b/app/javascript/styles/plus/plugins/plus.scss
deleted file mode 100644
index e356e937b..000000000
--- a/app/javascript/styles/plus/plugins/plus.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@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 }
-}
-
-// exception
-.media-modal__overlay .picture-in-picture__footer .icon-button,
-.status__action-bar-button.icon-button--with-counter { background: transparent }
-
-// favorite icon
-.star-icon.active,
-.star-icon.icon-button.active.activate,
-.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
-
-.notification__favourite-icon-wrapper {
- left: -34px;
-
- .star-icon {
- border-radius: 50%;
- width: 28px;
- height: 28px;
- vertical-align: baseline;
- font-size: 18px;
-
- &.fa-fw::before { vertical-align: middle }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/_functions.scss b/app/javascript/styles/plus/theme/_functions.scss
deleted file mode 100644
index 0374231ed..000000000
--- a/app/javascript/styles/plus/theme/_functions.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@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
deleted file mode 100644
index fcd556f2b..000000000
--- a/app/javascript/styles/plus/theme/_mixins.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-@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 shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
-@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
-@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
-@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
-@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
-@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
-@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
-@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
-
-@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
-
-@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
-
-@mixin search-bar-hover {
- @if $search-bar-hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- }
-}
-
-@mixin outlined-chip {
- @if $outlined-chip {
- .reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $outlined-chip-selected-border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
- }
- }
-}
-
-@mixin button-shadow {
- @if $button-shadow {
- .button,
- .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
- }
-}
-
-@mixin text-area-border {
- @if $text-area-border == underlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius $card-radius 0 0;
- border-bottom: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
- }
- }
-
- @if $text-area-border == outlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius;
- border: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus {
- border: 2px solid $border-active-color;
- padding: 7px 41px 7px 15px;
- }
- }
- }
-}
-
-@mixin icon-button {
- width: 20px !important;
- height: 20px !important;
- font-size: 20px !important;
-}
-
-// check background-image value
-@mixin bg-image {
- @if $bg-image == none {
- } @else { background-image: url($bg-image) }
-}
-
-
-@mixin icon-font-style {
- @if $icon-font-style == filled { font-family: "Material Icons" }
- @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
- @if $icon-font-style == round { font-family: "Material Icons Round" }
- @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
- @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
-}
-
-@mixin icon-font {
- @if $icon-font-source == github {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-
- @if $icon-font-source == google {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
- }
- }
- }
-
- @if $icon-font-source == self {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons"),
- url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/account.scss b/app/javascript/styles/plus/theme/account.scss
deleted file mode 100644
index 551b4f4a8..000000000
--- a/app/javascript/styles/plus/theme/account.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.account {
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .account__display-name,
- .account__display-name strong { color: $primary-text-color }
-
- &__avatar {
- border-radius: $avater-radius;
- width: 40px;
- height: 40px;
-
- &-overlay {
- &-base {
- border-radius: $avater-radius;
- width: 44px;
- height: 44px;
- background-size: 44px;
- }
-
- &-overlay { border-radius: $avater-radius }
- }
- }
-
- &__avatar-wrapper {
- margin-left: 0;
- margin-right: 16px;
- }
-
- &__header {
- &__bar {
- background: $card-bg-color;
- padding: 8px;
- border-bottom: none;
-
- .avatar .account__avatar { border: none }
- }
-
- &__tabs {
- padding: 8px;
-
- &__name {
- padding: 8px;
-
- h1 {
- color: $primary-text-color;
-
- small { color: $secondary-text-color }
- }
- }
-
- &__buttons {
- .icon-button {
- @include icon-button;
- border: none;
- border-radius: 50%;
- padding: 8px;
- margin-left: 8px;
- }
- }
- }
-
- &__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-bg-color;
-
- a,
- &__mark { color: $primary-text-color }
- }
-
- dl {
- border-bottom: 1px solid $border-color;
-
- &:first-child .verified { border-radius: 0 }
-
- &:last-child { border-bottom: 0 }
- }
-
- dt {
- color: $primary-text-color;
- background: $list-bg-inactive-color;
- }
-
- dd { color: $primary-text-color }
- }
- }
- }
-
- &__account-note {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
-
- label {
- color: $ui-text-color;
- margin-bottom: 8px;
- }
-
- textarea {
- color: $primary-text-color;
- padding: 8px 16px;
- border-radius: 0;
-
- &:focus { background: transparent }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- &__content { color: $secondary-text-color }
- }
-
- &__section-headline {
- background: $text-tab-bg-color;
- border-bottom: 1px solid $border-color;
-
- a {
- padding: 16px 0;
- color: $text-tab-indicator-color;
-
- &.active {
- color: $text-tab-indicator-active-color;
- border-bottom: 4px solid $text-tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $text-tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $text-tab-indicator-bg-hover-color }
- }
- }
-
- &__relationship {
- padding: 0;
- height: auto;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-}
-
-.account-role {
- padding: 4px 8px;
- border-radius: 17px;
- color: $ui-text-color;
- background-color: $contained-chip-color;
-}
-
-.accounts-table__count {
- color: $ui-text-color;
-
- small { color: $secondary-text-color }
-}
-
-.account-gallery {
- &__item { border-radius: 0 }
-}
\ 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
deleted file mode 100644
index f36a139ba..000000000
--- a/app/javascript/styles/plus/theme/base_config.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@charset "UTF-8";
-
-
-// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
-
-
-// Color scheme
-@import '../color/v1-light';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'color/v2-light';
-
-
-// Layout profile
-@import '../layout/material-v1';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'layout/material-v2';
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-$search-bar-hover: false;
-
-
-// Status font size in timeline
-$status-font-size: 15px; // mastodon default
-//$status-font-size: 16px; // compatible with material design
-
-
-// Name font size in timeline status
-$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
-
-
-// Background image
-// If you want to use the local image, please put it in "../"
-$bg-image: none;
-//$bg-image: "./image.png";
-//$bg-image: "https://example.com/img/image.png";
-
-
-// Columns transparency settings
-$bar-transparency: 1.0; // opacity
-//$bar-transparency: 0.8; // semi-transparent
-
-$column-transparency: 1.0; // opacity
-//$column-transparency: 0.8; // semi-transparent
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/basics.scss b/app/javascript/styles/plus/theme/basics.scss
deleted file mode 100644
index bb8f68bf0..000000000
--- a/app/javascript/styles/plus/theme/basics.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-body,
-body.embed { background: $bg-color }
-
-.focusable:focus { background: transparent }
-
-// Chrome & Safari scroll bar
-::-webkit-scrollbar-thumb {
- background: $scroll-bar-thumb-color;
-
- &:hover { background: $scroll-bar-thumb-hover-color }
- &:active { background: $scroll-bar-thumb-active-color }
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
- background: transparent !important;
-}
-
-// Firefox scroll bar
-html { scrollbar-color: $scroll-bar-thumb-color transparent }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/button.scss b/app/javascript/styles/plus/theme/button.scss
deleted file mode 100644
index 5f909d843..000000000
--- a/app/javascript/styles/plus/theme/button.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include button-shadow;
-
-.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;
-
- &.active { color: $icon-button-active-color }
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
- }
-
- &.overlayed {
- @include icon-button;
- border-radius: 50%;
- background: $media-icon-bg-color;
- color: $media-icon-color;
- padding: 4px;
- line-height: 20px !important;
-
- &:hover {
- background: $media-icon-bg-color;
- color: $media-icon-hover-color;
- }
- }
-
- &__counter {
- width: 16px;
- margin-left: 8px;
- }
-
- &:hover {
- @include material-transition;
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
-}
-
-// Checkbox with label
-label.icon-button {
- &.active {
- color: $ui-text-color;
- background-color: transparent;
- }
-
- &:hover {
- @include material-transition;
- background-color: transparent;
- }
-}
-
-.text-icon-button {
- color: $icon-button-color;
- border-radius: 50%;
- font-size: 14px;
-
- &.active {
- background-color: $icon-bg-hover-color;
- color: $icon-button-active-color;
- }
-
- &:hover {
- background-color: $icon-bg-hover-color;
- color: $icon-button-hover-color;
- }
-}
-
-.button {
- background-color: $contained-button-color;
- border-radius: $button-radius;
-
- &:active,
- &:focus {
- background-color: $contained-button-color;
- border-radius: $button-radius;
- }
-
- &:hover {
- @include shadow-2dp;
- background-color: $contained-button-hover-color;
- }
-
- &.logo-button {
- background: $contained-button-color;
- margin: 2px;
-
- &:hover { background: $contained-button-hover-color }
-
- .button--destructive:hover { background: $contained-button-hover-color }
- }
-
- &.button--block { margin: 8px 0 }
-
- &.button-secondary {
- color: $text-button-color;
- border: none;
- box-shadow: none;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
- }
-
- &.confirmation-modal__cancel-button {
- box-shadow: none;
- background-color: transparent;
- margin: 0 8px;
- color: $text-button-color;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
- }
-}
-
-.spoiler-button__overlay__label {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- color: $media-icon-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/columns.scss b/app/javascript/styles/plus/theme/columns.scss
deleted file mode 100644
index 77a5c777a..000000000
--- a/app/javascript/styles/plus/theme/columns.scss
+++ /dev/null
@@ -1,511 +0,0 @@
-@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-bg-color;
- opacity: $column-transparency;
- }
-
- &:last-child { box-shadow: none }
-}
-
-.column-header {
- background: $top-bar-color;
- border-radius: $bar-radius;
- height: 56px;
-
- > button {
- padding: 16px;
- color: $top-bar-text-color;
- }
-
- &>.column-header__back-button { color: $top-bar-icon-color }
-
- &.active {
- .column-header__icon {
- color: $top-bar-unread-icon-color;
- text-shadow: none;
- }
- }
-
- &__icon {
- margin-right: 16px;
- color: $top-bar-icon-color;
- font-size: 20px;
- }
-
- &__buttons { height: 56px }
-
- &__button {
- @include icon-button;
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 8px;
- margin: 10px;
- border-radius: 50%;
- box-sizing: content-box;
-
- &.active {
- color: $top-bar-icon-active-color;
- background: $icon-bg-active-color;
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &__setting-btn {
- color: $icon-button-color;
- padding: 8px 0;
-
- &:hover {
- color: $icon-button-hover-color;
- text-decoration: none;
- }
-
- .fa { font-size: 20px }
-
- span { vertical-align: middle }
- }
-
- &__setting-arrows {
- font-size: 16px;
- border-bottom: 8px;
-
- .column-header__setting-btn {
- padding: 8px;
- border-radius: 50%;
-
- &:last-child { padding-right: 8px }
- }
- }
-
- &__wrapper {
- @include shadow-4dp;
- border-radius: $bar-radius;
- opacity: $bar-transparency;
-
- .announcements { border-top: 1px solid $border-color }
-
- &.active {
- @include shadow-4dp;
-
- &::before { background: transparent }
- }
- }
-
- &__collapsible {
- color: $ui-text-color;
- background: $card-bg-color;
- border-top: 1px solid $border-color;
-
- &-inner {
- background: $card-bg-color;
- padding: 16px;
- }
-
- &.collapsed { border-top: none }
- }
-
- &__back-button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- margin: 8px 10px;
- padding: 10px;
- font-size: 20px;
-
- span { display: none }
- }
-}
-
-.column-subheading {
- color: $section-text-color;
- background: $bg-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
-}
-
-.column-link {
- color: $ui-text-color;
- background: $bg-color;
- padding: 16px;
- border-radius: $nav-drawer-item-radius;
-
- &:hover { background: $list-bg-hover-color }
-
- &:active,
- &:focus { background: $list-bg-active-color }
-
- &__icon {
- margin-right: 32px;
- font-size: 20px;
- }
-
- &--transparent {
- &.active {
- color: $ui-text-color;
- background: $menu-bg-active-color;
-
- &:hover { background: $menu-bg-active-hover-color }
-
- .fa { color: $icon-color }
- }
-
- &:hover {
- color: $ui-text-color;
-
- .fa { color: $icon-color }
- }
- }
-
- .fa { color: $icon-color }
-}
-
-.column-settings {
- &__section {
- color: $section-text-color;
- margin-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
-
- &--slim-button { top: -54px }
-}
-
-.column-inline-form {
- padding: 16px 0 16px 16px;
- background: $card-bg-color;
-
- .icon-button { margin: 0 16px }
-}
-
-.columns-area {
- @include bg-image;
- background-size: contain;
-}
-
-.setting-text {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border-radius: $bar-radius;
-
- &::placeholder { color: $tips-text-color }
-}
-
-.empty-column-indicator {
- color: $secondary-text-color;
- background: $card-bg-color;
- font-size: 16px;
- contain: initial; // padding fix
-}
-
-.conversation {
- border-bottom: 1px solid $border-color;
- padding: 12px;
- background: $list-bg-inactive-color;
-
- &--unread {
- background: $list-bg-color;
-
- .conversation__content__relative-time { color: $info-text-color }
- }
-
- &__unread { background: $primary-color }
-
- &__avatar { padding: 0 16px 0 0 }
-
- &__content {
- padding: 0;
-
- &__relative-time {
- font-size: 14px;
- color: $info-text-color;
- }
-
- &__names,
- &__names a {
- color: $primary-text-color;
- font-size: 16px;
- }
- }
-}
-
-// read status in notification column
-.muted {
- .status {
- &__content {
- color: $read-primary-text-color;
-
- 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-bg-hover-color }
-}
-
-.getting-started {
- background: $bg-color;
- color: $ui-text-color;
- opacity: $column-transparency;
-
- &__wrapper {
- background: $bg-color;
- height: auto !important;
- padding-bottom: 8px;
- border-bottom: 1px solid $border-color;
- }
-
- &__footer {
- padding: 16px;
-
- p {
- color: $secondary-text-color;
- font-size: 12px;
- margin-bottom: 16px;
- }
-
- a { color: $ui-text-color }
-
- p a { color: $link-text-color }
- }
-
- &__trends {
- background: $bg-color;
- margin-bottom: 0;
- opacity: $column-transparency;
-
- h4 {
- color: $section-text-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
- border-bottom: none;
- }
- }
-}
-
-.trends {
- &__header {
- color: $section-text-color;
- background: transparent;
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .fa { margin-right: 8px }
- }
-
- &__item {
- padding: 16px;
- border-bottom: none;
-
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
- }
-
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
- }
- }
-}
-
-.setting-toggle {
- &__label {
- color: $ui-text-color;
- margin: 8px 8px 8px 14px;
- }
-}
-
-.announcements {
- background: $card-bg-color;
- padding: 0 8px;
-
- &__container { color: $primary-text-color }
-
- &__item {
- padding: 16px;
- font-size: 16px;
-
- &__unread { background: $badge-color }
- }
-
- &__pagination {
- color: $ui-text-color;
- padding: 16px;
- bottom: 0;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- margin: 0 4px;
- line-height: normal !important;
- box-sizing: content-box;
- }
-
- span { vertical-align: super }
- }
-}
-
-.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 }
-
-@include outlined-chip;
-
-.reactions-bar {
- margin-top: 16px;
- width: calc(100% - 72px);
-
- .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: $chip-selected-text-color }
-
- &:hover { background-color: $contained-chip-selected-color }
- }
-
- &__emoji {
- width: 24px;
- height: 24px;
- margin: 4px 0 4px 2px;
- }
-
- &__count {
- font-size: 16px;
- margin: 0 12px 0 8px;
- color: $secondary-text-color;
- }
-
- &:hover { background: $contained-chip-hover-color }
- }
-}
-
-.notification {
- &__filter-bar {
- background: $tab-bg-color;
- border-bottom: 1px solid $border-color;
- z-index: 1;
- opacity: $bar-transparency;
-
- button {
- background: $tab-bg-color;
- color: $tab-indicator-color;
- font-size: 16px;
-
- span { font-size: 14px }
-
- &.active {
- color: $tab-indicator-active-color;
- border-bottom: 4px solid $tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
- }
-
- &__message {
- color: $secondary-text-color;
- margin: 0 16px 0 70px;
- font-size: 16px;
- }
-
- &__display-name:hover { color: inherit }
-}
-
-.notification-favourite .status.status-direct {
- .icon-button.disabled { color: $disabled-icon-color }
-}
-
-.relationship-tag {
- color: $ui-text-color;
- background-color: $relationship-tag-color;
- font-size: 12px;
- border-radius: 17px;
- padding: 4px 8px;
- opacity: 1;
-}
-
-.attachment-list__list a { color: $secondary-text-color }
-
-// unread notification
-.notification.unread:before, .status__wrapper.unread:before { border-left: none }
-
-.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/components.scss b/app/javascript/styles/plus/theme/components.scss
deleted file mode 100644
index aa64aabc5..000000000
--- a/app/javascript/styles/plus/theme/components.scss
+++ /dev/null
@@ -1,647 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include text-area-border;
-
-.modal-root {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-
- &__overlay { background-color: rgba(0,0,0,.32) !important }
-
- &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
-}
-
-.drawer {
- &__header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- justify-content: space-around;
- opacity: $bar-transparency;
-
- a { transition: none }
-
- a:hover {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- }
- }
-
- &__tab {
- color: $top-bar-icon-color;
- font-size: 20px;
- margin: 10px auto 10px;
- padding: 8px;
- flex: none;
- height: 20px;
- width: 20px;
- border-bottom: none;
- text-align: justify;
-
- &:hover { color: $top-bar-icon-hover-color }
- }
-
- &__pager {
- @include shadow-1dp;
- border-radius: $card-radius;
- }
-
- &__inner {
- background: $card-bg-color;
- opacity: $column-transparency;
-
- &.darker {
- background: $card-bg-color;
- position: inherit;
- }
-
- &__mastodon { background: $card-bg-color }
- }
-}
-
-.search {
- &__input {
- background: $search-bar-color;
- color: $tips-text-color;
- border-radius: $search-bar-radius;
- padding: 12px 12px 12px 40px;
- opacity: $bar-transparency;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
-
- &:hover { @include search-bar-hover }
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__icon {
- .fa {
- color: $icon-color;
- font-size: 20px;
- top: 12px;
- right: unset;
- left: 12px;
- height: 6px;
- transition: none;
-
- &.active { opacity: 1 }
-
- &-search {
- transform: none;
- opacity: 1;
- }
- &-times-circle.active {
- right: 16px;
- left: unset;
- transform: none;
- }
- }
- }
-}
-
-.search-popout {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- border-radius: 0px $bar-radius;
- border-top: 1px solid $border-color;
- margin-top: 0;
- color: $tips-text-color;
-
- h4 {
- color: $secondary-text-color;
- }
-
- em {
- color: $search-bar-text-color;
- }
-}
-
-.search-results {
- &__header {
- color: $secondary-text-color;
- background-color: $card-bg-color;
- padding: 16px;
-
- .fa { margin-right: 16px }
- }
-
- &__section {
- h5 {
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- padding: 16px;
- color: $section-text-color;
-
- .fa { margin-right: 8px }
- }
- }
-}
-
-.navigation-bar {
- color: $secondary-text-color;
- padding: 14px;
-
- strong {
- color: $ui-text-color;
- }
-
- .navigation-bar__actions .compose__action-bar .icon-button {
- width: 36px !important;
- height: 36px !important;
- padding: 8px;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
-}
-
-.navigation-panel hr {
- border-top: 1px solid $border-color;
- margin: 8px 0;
-}
-
-.flex-spacer { margin: 8px 0 }
-
-.dropdown-menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- padding: 8px 0;
- border-radius: $menu-radius;
-
- &__arrow { visibility: hidden }
-
- &__item a {
- font-size: 14px;
- padding: 8px 16px;
- background: $menu-bg-color;
- color: $menu-text-color;
-
- &:hover, &:active {
- background: $menu-bg-hover-color;
- color: $menu-text-color;
- }
- }
-
- &__separator {
- margin: 8px 0;
- border-bottom: 1px solid $border-color;
- }
-}
-
-.compose-form {
- .autosuggest-textarea {
- &__textarea {
- background: $text-field-bg-color;
- color: $ui-text-color;
- padding: 8px 42px 8px 16px;
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__suggestions {
- @include shadow-1dp;
- background: $menu-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
- font-size: 16px;
- padding: 8px 0;
-
- &__item {
- padding: 8px;
- border-radius: 0;
-
- &:hover { background: $menu-bg-hover-color }
-
- &.selected,
- &:focus,
- &:active { background: $menu-bg-active-color }
- }
- }
- }
-
- .spoiler-input {
- &.spoiler-input--visible { margin-bottom: 16px }
-
- &__input {
- color: $ui-text-color;
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- border-radius: 0;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- .compose-form {
- &__warning {
- color: $secondary-text-color;
- background: $card-bg-color;
- padding: 16px;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- box-shadow: none;
-
- a { color: $link-text-color }
- }
-
- &__modifiers {
- background: $card-bg-color;
- color: $tips-text-color;
-
- .compose-form {
- &__upload-thumbnail { border-radius: 0 }
-
- &__upload__actions {
- @include material-transition;
-
- .icon-button {
- color: $media-icon-color;
- font-size: 16px;
-
- &:hover { background-color: transparent }
- }
- }
- }
- }
-
- &__buttons-wrapper {
- background: $card-bg-color;
- color: $tips-text-color;
- padding: 8px;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- }
-
- .text-icon-button {
- width: 20px !important;
- height: 20px !important;
- padding: 8px;
- line-height: 20px !important;
- }
- }
-
- &__poll-wrapper {
- border-top: 1px solid $border-color;
-
- ul { padding: 16px 12px 16px 0 }
-
- select {
- color: $ui-text-color;
- background-color: $bg-color;
- border: 0;
-
- &:focus { border-color: $border-hover-color }
- }
-
- .button.button-secondary {
- box-shadow: none;
- color: $text-button-color;
-
- &:hover { background-color: $text-button-hover-color }
-
- &:active,
- &:focus { background-color: $text-button-focus-color }
- }
-
- .poll__footer { border-top: none }
- }
-
- &__publish .compose-form__publish-button-wrapper { box-shadow: none }
- }
-}
-
-.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
-
-
-.poll {
- .button { margin-right: 8px }
-
- li { margin-bottom: 0 }
-
- &__input {
- border: none;
- width: 20px;
- height: 20px;
- flex: 0 0 20px;
- padding: 18px;
- margin: 0 2px;
- background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
-
- &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
-
- &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
-
- &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-
- &.checkbox {
- border-radius: 2px;
- border: 2px solid $control-border-color;
- padding: 8px;
- margin: 8px 10px;
- background: none;
- }
- }
-
- &__text input[type=text] {
- color: $ui-text-color;
- background: $text-field-bg-color;
- border: 1px solid $border-color;
- padding: 8px 12px;
-
- &:focus { border-color: $border-hover-color }
- }
-
- &__option {
- padding: 16px 0 8px;
-
- input[type=text] {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border: none;
- border-radius: 2px;
- padding: 8px 16px;
- }
-
- &__text { line-height: 34px }
- }
-
- &__chart {
- border-radius: 0;
- background: $progress-indicator-track-color;
-
- &.leading { background: $progress-indicator-color }
- }
-
- &__footer {
- padding-top: 8px;
- padding-bottom: 0;
- color: $ui-text-color;
- }
-
- &__link { color: $ui-text-color }
-}
-
-.privacy-dropdown {
- &.active .privacy-dropdown__value.active {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- box-shadow: none;
-
- .icon-button { color: $icon-button-active-color }
- }
-
- &__dropdown {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $dialog-radius;
- }
-
- &__option {
- color: $icon-color;
- padding: 8px 16px;
-
- &__icon {
- font-size: 20px;
- margin-right: 12px;
- }
-
- &__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &.active {
- background: $menu-bg-active-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &:hover {
- background: $menu-bg-active-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &:hover {
- background: $menu-bg-hover-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-}
-
-.character-counter {
- color: $secondary-text-color;
-}
-
-.reply-indicator {
- box-shadow: none;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- background: $card-bg-color;
- padding: 16px;
-
- &__header { margin-bottom: 4px }
-
- &__display {
- &-name {
- color: $primary-text-color;
- padding-right: 24px;
- }
-
- &-avatar { margin-right: 8px }
- }
-
- &__content {
- color: $primary-text-color;
-
- p { margin-bottom: 16px }
- }
-}
-
-.attachment-list {
- &__list a { color: $secondary-text-color }
-
- &.compact .fa { color: $icon-color }
-}
-
-.block-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.load-more {
- color: $ui-text-color;
-
- &:hover { background: transparent }
-}
-
-.autosuggest-hashtag {
- &__name { color: $menu-text-color }
-}
-
-.filter-form {
- background: $bg-color;
- color: $ui-text-color;
-
- &__column { padding: 8px 16px }
-}
-
-.directory {
- &__card {
- @include shadow-1dp;
- margin: 8px 4px;
- border-radius: $card-radius;
-
- &__img { border-radius: $card-radius $card-radius 0 0 }
-
- &__bar {
- background: $card-bg-color;
- padding: 8px 16px;
-
- .display-name {
- margin-left: 16px;
-
- strong {
- font-size: 16px;
- color: $primary-text-color;
- }
-
- span { color: $secondary-text-color }
- }
- }
-
- &__extra {
- background: $card-bg-color;
- border-radius: 0 0 $card-radius $card-radius;
-
- .account__header__content {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
- }
-
- .accounts-table__count { padding: 16px 0 }
- }
- }
-}
-
-.mute-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__explanation { margin-top: 16px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-
- .setting-toggle {
- margin-top: 16px;
- margin-bottom: 16px;
-
- &__label {
- color: $ui-text-color;
- margin: 0 0 0 12px;
- }
- }
-}
-
-.upload-progress {
- color: $ui-text-color;
-
- &__backdrop {
- border-radius: 0;
- background: $progress-indicator-track-color;
- margin-top: 6px;
- }
-
- &__tracker {
- border-radius: 0;
- background: $progress-indicator-color;
- }
-}
-
-.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/containers.scss b/app/javascript/styles/plus/theme/containers.scss
deleted file mode 100644
index 09af289b0..000000000
--- a/app/javascript/styles/plus/theme/containers.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.public-layout {
- .header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- margin: 16px 0;
-
- .brand:hover { background: $tab-indicator-bg-hover-color }
-
- .nav-link,
- .nav-link.optional {
- color: $top-bar-text-color;
-
- &:hover {
- background: $tab-indicator-bg-hover-color;
- text-decoration: none;
- }
- }
-
- .nav-button {
- background: transparent;
- margin: 0;
- border-radius: 0;
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
-
- .detailed-status__meta { margin-top: 16px }
- }
-
- .detailed-status { padding: 16px }
-
- .footer {
- padding-top: 16px;
- padding-bottom: 64px;
- color: $ui-text-color;
-
- h4 { color: $ui-text-color }
-
- ul a { color: $secondary-text-color }
-
- .grid .column-2 h4 a { color: $ui-text-color }
-
- .brand {
- svg { fill: $icon-color }
-
- &:hover svg { fill: $icon-hover-color }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/control.scss b/app/javascript/styles/plus/theme/control.scss
deleted file mode 100644
index a205a4cb7..000000000
--- a/app/javascript/styles/plus/theme/control.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@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
deleted file mode 100644
index 91663fb93..000000000
--- a/app/javascript/styles/plus/theme/emoji-picker.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@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-bg-color;
- border-radius: $menu-radius;
- }
-
- &__modifiers__menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $menu-radius;
-
- button {
- padding: 8px;
- }
- }
-}
-
-.emoji-mart {
- width: 388px !important;
- font-size: 14px;
- color: $menu-text-color;
-
- &-bar {
- border: 0 solid $border-color;
-
- &:first-child {
- background: $menu-bg-color;
- }
- }
-
- &-anchor {
- color: $text-tab-indicator-color;
- padding: 10px 4px;
-
- &-bar { background-color: $icon-tab-indicator-active-color }
-
- &-selected { color: $icon-tab-indicator-hover-color }
-
- &:hover { color: $icon-tab-indicator-hover-color }
- }
-
- &-search {
- background: $menu-bg-color;
-
- input {
- outline: none;
- padding: 8px;
- background: $search-bar-color;
- color: $ui-text-color;
- border: 0;
- border-radius: $search-bar-radius;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
- }
- }
-
- &-scroll {
- padding: 0 8px 8px;
- background: $menu-bg-color;
- }
-
- &-category {
- &-label span {
- padding: 4px 6px;
- background: $menu-bg-color;
- }
-
- .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
- }
-
- &-no-results { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/icons.scss b/app/javascript/styles/plus/theme/icons.scss
deleted file mode 100644
index 987767544..000000000
--- a/app/javascript/styles/plus/theme/icons.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@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.fa-lock { text-transform: none }
-
-.icon-with-badge__badge {
- background: $badge-color;
- border: none;
- padding: 2px 6px;
- border-radius: 12px;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/material-icons.scss b/app/javascript/styles/plus/theme/material-icons.scss
deleted file mode 100644
index dd01ce3d6..000000000
--- a/app/javascript/styles/plus/theme/material-icons.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config', '../icon_config';
-@import '../custom_color', '../custom_layout';
-@import 'functions';
-@import 'mixins';
-
-
-@include icon-font;
-
-.fa-fw {
- width: 20px;
- height: 20px;
- font-size: 20px;
-}
-
-.fa {
- &.fa-bars,
- &.fa-navicon,
- &.fa-reorder,
- &.fa-globe,
- &.fa-cog,
- &.fa-cogs,
- &.fa-gears,
- &.fa-sign-out,
- &.fa-search,
- &.fa-times,
- &.fa-times-circle,
- &.fa-close,
- &.fa-remove,
- &.fa-chevron-down,
- &.fa-ellipsis-v,
- &.fa-paperclip,
- &.fa-tasks,
- &.fa-plus,
- &.fa-unlock,
- &.fa-lock,
- &.fa-envelope,
- &.fa-home,
- &.fa-bullhorn,
- &.fa-sliders,
- &.fa-chevron-left,
- &.fa-chevron-right,
- &.fa-reply,
- &.fa-reply-all,
- &.fa-share-alt,
- &.fa-star,
- &.fa-bookmark,
- &.fa-ellipsis-h,
- &.fa-bell,
- &.fa-bell-o,
- &.fa-eraser,
- &.fa-users,
- &.fa-file-text,
- &.fa-user-plus,
- &.fa-address-book,
- &.fa-address-book-o,
- &.fa-list,
- &.fa-list-ul,
- &.fa-eye,
- &.fa-eye-slash,
- &.fa-pencil,
- &.fa-trash,
- &.fa-play,
- &.fa-external-link,
- &.fa-retweet,
- &.fa-link,
- &.fa-pause,
- &.fa-volume-up,
- &.fa-volume-off,
- &.fa-expand,
- &.fa-download,
- &.fa-arrows-alt,
- &.fa-compress,
- &.fa-user-times,
- &.fa-check,
- &.fa-quote-right,
- &.fa-upload,
- &.fa-comments,
- &.fa-angle-right,
- &.fa-thumb-tack {
- @include icon-font-style;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- }
-}
-
-.fa {
- &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
- &.fa-globe::before { content: "public" }
- &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
- &.fa-sign-out::before { content: "exit_to_app" }
- &.fa-search::before { content: "search" }
- &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
- &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
- &.fa-paperclip::before { content: "attach_file" }
- &.fa-tasks::before { content: "poll" }
- &.fa-plus::before { content: "add" }
- &.fa-unlock::before { content: "lock_open" }
- &.fa-lock::before { content: "lock" }
- &.fa-envelope::before { content: "mail" }
- &.fa-home::before { content: "home" }
- &.fa-bullhorn::before { content: "announcement" }
- &.fa-sliders::before { content: "tune" }
- &.fa-chevron-left::before { content: "arrow_back" }
- &.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: $reply-icon }
- &.fa-reply-all::before { content: "reply_all" }
- &.fa-share-alt::before { content: "share" }
- &.fa-star::before { content: $favorite-icon }
- &.fa-bookmark::before { content: "bookmark" }
- &.fa-ellipsis-h::before { content: "more_horiz" }
- &.fa-bell::before { content: "notifications" }
- &.fa-bell-o::before { content: "notifications" }
- &.fa-eraser::before { content: "clear_all" }
- &.fa-users::before { content: "people" }
- &.fa-file-text::before { content: "web" }
- &.fa-user-plus::before { content: "person_add" }
- &.fa-address-book::before { 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: "person_remove" }
- &.fa-check::before { content: "check" }
- &.fa-quote-right::before { content: "format_quote" }
- &.fa-upload::before { content: "file_upload" }
- &.fa-comments::before { content: "forum" }
- &.fa-angle-right::before { content: "chevron_right" }
- &.fa-thumb-tack::before { content: "push_pin" }
-}
-
-// 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
-button.icon-button i.fa-retweet {
- height: 20px;
- width: 20px;
- transition: none;
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,') }
-
-button.icon-button i.fa-retweet:hover,
-button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover,
-button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-// dropdown icon
-.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px}
-
-// icon in tab settings
-.text-btn.column-header__setting-btn {
- .fa {
- vertical-align: middle;
-
- &.fa-eraser { margin-right: 8px } // clear notification
- }
-}
-
-// top bar icons align
-.fa.fa-bell.column-header__icon.fa-fw,
-.fa.fa-home.column-header__icon.fa-fw,
-.fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw,
-.fa.fa-bars.column-header__icon.fa-fw,
-.fa.fa-bookmark.column-header__icon.fa-fw,
-.fa.fa-address-book-o.column-header__icon.fa-fw,
-.fa.fa-envelope.column-header__icon.fa-fw,
-.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
-
-// top bar icons in single column mode
-.tabs-bar__link {
- .fa.fa-home.fa-fw,
- .fa.fa-bell.fa-fw,
- .fa.fa-users.fa-fw,
- .fa.fa-globe.fa-fw { vertical-align: text-bottom }
-}
-
-// getting-started and side bar icons
-.column-link .fa,
-.column-link--transparent .fa { vertical-align: text-bottom }
-
-// uploaded media icons align
-.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
- font-size: 20px;
- vertical-align: text-bottom;
-}
-
-// search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
-
-// read more icon
-.status__content__read-more-button .fa { vertical-align: bottom }
-
-// Attachment icon
-.attachment-list__list a .fa { vertical-align: middle }
-
-// status detail icon
-.detailed-status .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
-
-// status scope
-.status__visibility-icon .fa,
-.account__header__tabs__name .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/media.scss b/app/javascript/styles/plus/theme/media.scss
deleted file mode 100644
index b8ac12414..000000000
--- a/app/javascript/styles/plus/theme/media.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.media-gallery {
- border-radius: $media-radius;
-
- &__item { border-radius: $media-radius }
-}
-
-.media-modal {
- &__nav {
- background: $media-icon-bg-color;
- color: $media-icon-color;
- height: 48px;
- width: 48px;
- margin: auto 16px;
- padding: 8px;
- border-radius: 50%;
-
- .fa { width: 32px }
- }
-
- &__button {
- background-color: $media-page-indicator-color;
-
- &--active { background-color: $media-page-indicator-active-color }
- }
-
- &__close {
- &.icon-button {
- background: transparent;
- color: $media-icon-color;
- font-size: 24px !important;
- width: 24px !important;
- height: 24px !important;
- padding: 8px;
- box-sizing: content-box;
- line-height: normal !important;
-
- &:hover {
- background: $media-icon-bg-hover-color;
- color: $media-icon-hover-color;
- }
-
- .fa-fw {
- width: 24px;
- height: 24px;
- }
- }
- }
-
- &__meta {
- bottom: 24px;
-
- a { color: $media-icon-color }
- }
-
- &__overlay {
- .picture-in-picture__footer .icon-button {
- color: $media-icon-color;
-
- &:active,
- &:focus,
- &:hover {
- color: $media-icon-hover-color;
- background-color: transparent;
- }
- }
- }
-}
-
-.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 {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__volume {
- &::before {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__current {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__time-current { margin-left: 68px }
-
- &__buttons button { font-size: 20px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/modal.scss b/app/javascript/styles/plus/theme/modal.scss
deleted file mode 100644
index 93e5b24c1..000000000
--- a/app/javascript/styles/plus/theme/modal.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.confirmation-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $dialog-radius;
-
- &__container {
- text-align: left;
- padding: 24px;
- }
-
- &__action-bar {
- justify-content: flex-end;
- background: $card-bg-color;
- padding: 8px;
- }
-
- &__secondary-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.actions-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- border-radius: $card-radius;
-
- ul li:not(:empty) a {
- color: $ui-text-color;
- font-size: 16px;
-
- &:hover {
- background: $card-bg-hover-color;
- color: $ui-text-color;
- }
- }
-
- .dropdown-menu__separator { border-bottom-color: $border-color }
-
- .status {
- background: $card-bg-color;
- border-bottom-color: $border-color;
- padding-top: 12px;
- padding-bottom: 12px;
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
- }
-}
-
-.report-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__target {
- padding: 24px;
- text-align: left;
- font-weight: bold;
- }
-
- &__container {
- border-top: none;
- }
-
- &__comment {
- border-right: none;
-
- .setting-text-label { color: $ui-text-color }
- }
-}
-
-.embed-modal .embed-modal__container {
- padding: 0 24px 24px 24px;
-
- .hint {
- margin-bottom: 16px;
- color: $secondary-text-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/responsive.scss b/app/javascript/styles/plus/theme/responsive.scss
deleted file mode 100644
index 8618f7ed7..000000000
--- a/app/javascript/styles/plus/theme/responsive.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@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;
- width: $fab-size;
- height: $fab-size;
- bottom: 16px;
- right: 16px;
-
- &:hover { background: $floating-action-button-hover-color }
-
- &:active,
- &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
- .column { margin: 0 !important }
- .search__input { padding: 16px 46px }
-
- .search__icon {
- .fa {
- top: 16px;
- left: 16px;
- }
-
- .fa-times-circle.active { left: unset }
- }
-}
-
-// small size screen
-@media screen and (max-width: 415px) {
- .public-layout { padding-top: 64px }
-}
-
-// middle size screen
-@media screen and (min-width: 415px) {
- .tabs-bar {
- margin-bottom: 0;
-
- &__wrapper {
- padding-top: 0;
-
- .tabs-bar { margin-bottom: 0 }
- }
- }
-
- .columns-area__panels {
- &__main {
- @include shadow-1dp;
- padding: 0;
- }
-
- &__pane { padding: 0 16px }
- }
-}
-
-//single column mode
-@media screen and (min-width: 631px) {
- .tabs-bar__link {
- &:hover {
- background: $tab-indicator-bg-hover-color;
- border-bottom-color: transparent;
- }
-
- &:active,
- &:focus {
- background: $tab-indicator-bg-focus-color;
- border-bottom-color: $tab-bg-color;
- }
-
- &.active { border-bottom-color: $tab-indicator-active-color }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/statuses.scss b/app/javascript/styles/plus/theme/statuses.scss
deleted file mode 100644
index 7e4374014..000000000
--- a/app/javascript/styles/plus/theme/statuses.scss
+++ /dev/null
@@ -1,292 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.status {
- padding: 12px 12px 4px 70px;
- border-bottom: 1px solid $border-color;
-
- &__expand { width: 70px }
-
- &__info {
- font-size: $name-font-size;
- padding-right: 4px;
- }
-
- &__relative-time { color: $info-text-color }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
-
- &__content {
- font-size: $status-font-size;
- padding-top: 4px;
- color: $primary-text-color;
-
- a {
- color: $link-text-color;
-
- &.unhandled-link { color: $link-text-color }
- }
-
- p { margin-bottom: 16px }
-
- .status__content__spoiler-link {
- 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 {
- margin-top: 4px;
-
- &__counter {
- margin-right: 6px;
-
- &__label {
- font-size: 14px;
- color: $info-text-color;
- }
- }
- }
-
- &__action-bar-button {
- margin-right: 4px;
-
- &.icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &--with-counter {
- margin-right: 4px;
- width: auto !important;
-
- &:hover { background: transparent }
- }
- }
- }
-
- &__action-bar-dropdown {
- width: 36px !important;
- height: 36px !important;
- box-sizing: content-box;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
-
- &:hover {
- color:$icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
- }
-
- &__prepend {
- color: $secondary-text-color;
- margin-left: 64px;
-
- .status__display-name strong { color: $secondary-text-color }
- }
-
- &.status-direct:not(.read) {
- background: transparent;
- border-bottom-color: $border-color;
- }
-
- &__visibility-icon { color: $icon-color }
-}
-
-.status-card {
- color: $icon-color;
- border-color: $border-color;
- outline: none;
- margin-top: 16px;
-
- &__image {
- background: transparent;
-
- &>.fa {
- font-size: 26px;
- }
- }
-
- &__title {
- color: $primary-text-color;
- margin-bottom: 6px;
- }
-
- &__description { color: $secondary-text-color }
-
- &__actions {
- &>div {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- }
-
- button,
- a {
- color: $media-icon-color;
- font-size: 20px;
- }
-
- a { bottom: auto }
- }
-
- &.compact {
- border-color: $border-color;
- outline: none;
- background: transparent;
-
- .status-card {
- &__content { padding: 12px }
- &__image { flex: 0 0 64px }
- }
-
- &:hover { background-color: transparent !important }
- }
-
- &.horizontal {
- border-radius: 0;
-
- .status-card {
- &__image-preview { border-radius: 0 }
-
- &__image-image { border-radius: 0 }
- }
- }
-}
-
-a.status-card {
- &:hover { background-color: $card-bg-color }
-}
-
-.embed .status,
-.public-layout .status { padding: 16px 16px 16px 80px }
-
-// Detailed status in mobile
-.status.light {
- .status {
- &__display-name { color: $primary-text-color }
- &__relative-time { color: $info-text-color }
- &__content { color: $primary-text-color }
- }
-
- .display-name { color: $secondary-text-color }
- .display-name strong { color: $primary-text-color }
-}
-
-.detailed-status {
- background: $card-bg-color;
- padding: 16px;
-
- &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__meta {
- margin-top: 16px;
- color: $info-text-color;
- }
-
- &__action-bar {
- background: $card-bg-color;
- border-top: none;
- border-bottom: 1px solid $border-color;
- padding: 8px 0;
- }
-
- &__action-bar-dropdown {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
- }
-
- &__button {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-
- .button.logo-button {
- margin-bottom: 16px;
- line-height: 36px;
- }
-}
-
-// search user trends
-.display-name {
- &__html { color: $primary-text-color }
- &__account { color: $secondary-text-color }
-}
-
-.activity-stream {
- @include shadow-1dp;
- margin-bottom: 16px;
- border-radius: $card-radius;
-
- .entry {
- background: $card-bg-color;
-
- &:first-child {
- .detailed-status,
- .load-more,
- .status { border-radius: $card-radius $card-radius 0 0 }
- }
- }
-}
-
-.entry.entry-center { border-bottom: 1px solid $border-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
deleted file mode 100644
index 367893682..000000000
--- a/app/javascript/styles/plus/theme/theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
-* Mastodon Material 0.2.1
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/variables.scss b/app/javascript/styles/plus/theme/variables.scss
deleted file mode 100644
index 0b948881b..000000000
--- a/app/javascript/styles/plus/theme/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@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/theme/widgets.scss b/app/javascript/styles/plus/theme/widgets.scss
deleted file mode 100644
index 4abdfbae9..000000000
--- a/app/javascript/styles/plus/theme/widgets.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.hero-widget {
- @include shadow-2dp;
- margin-bottom: 16px;
-
- &__img {
- border-radius: $card-radius $card-radius 0 0;
- background: $card-bg-color;
-
- img { border-radius: $card-radius $card-radius 0 0 }
- }
-
- &__text {
- background: $card-bg-color;
- padding: 16px;
- color: $primary-text-color;
- border-radius: 0 0 $card-radius $card-radius;
- }
-}
-
-.endorsements-widget {
- padding-bottom: 8px;
- margin-bottom: 8px;
-}
-
-.trends-widget h4 { color: $section-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark.scss b/app/javascript/styles/y-zu-dark.scss
index 90bfe0053..248f4441b 100644
--- a/app/javascript/styles/y-zu-dark.scss
+++ b/app/javascript/styles/y-zu-dark.scss
@@ -1,2 +1,2 @@
@import 'application';
-@import 'y-zu-dark/loader';
\ No newline at end of file
+@import 'mastodon-material/profiles/y-zu-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/black.scss b/app/javascript/styles/y-zu-dark/color/black.scss
deleted file mode 100644
index 693caa813..000000000
--- a/app/javascript/styles/y-zu-dark/color/black.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #000000;
-$menu-bg-color: #121212;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #121212;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #000000;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #1e1e1e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #121212;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #1e1e1e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #1e1e1e;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #121212;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/mastodon-dark.scss b/app/javascript/styles/y-zu-dark/color/mastodon-dark.scss
deleted file mode 100644
index b2e6bf27a..000000000
--- a/app/javascript/styles/y-zu-dark/color/mastodon-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9baec8;
-$ui-text-color: #fff;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #606984;
-$tips-text-color: #6d7889;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4ea2df;
-$menu-text-color: #282c37;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #191b22;
-$menu-bg-color: #d9e1e8;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #313543;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #282c37;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #42485a;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #393f4f;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#42485a, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #9baec8;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-bg-hover-color: lighten($bg-color, 14%);
-$icon-bg-active-color: lighten($bg-color, 18%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #fff;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($primary-color, 18%);
-
-// Border color
-$border-color: #393f4f;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
-
-// App bar color
-$top-bar-color: #313543;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: #d9e1e8;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #1f232b;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/mastodon-light.scss b/app/javascript/styles/y-zu-dark/color/mastodon-light.scss
deleted file mode 100644
index 7e94b8de7..000000000
--- a/app/javascript/styles/y-zu-dark/color/mastodon-light.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #217aba;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #eff3f5;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($bg-color, 6%);
-$menu-bg-active-color: darken($bg-color, 10%);
-$menu-bg-active-hover-color: darken($bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #282c37;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: darken($bg-color, 4%);
-$icon-bg-active-color: darken($bg-color, 8%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: $primary-color;
-$toggle-track-active-color: lighten($primary-color, 26%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: #ccd7e0;
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #ffffff;
-$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: #282c37;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #e6ebf0;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/plus-classic.scss b/app/javascript/styles/y-zu-dark/color/plus-classic.scss
deleted file mode 100644
index d94bbe90f..000000000
--- a/app/javascript/styles/y-zu-dark/color/plus-classic.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #db4437;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/v1-dark.scss b/app/javascript/styles/y-zu-dark/color/v1-dark.scss
deleted file mode 100644
index d31fbf04f..000000000
--- a/app/javascript/styles/y-zu-dark/color/v1-dark.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #303030;
-$menu-bg-color: #424242;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #424242;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #424242;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
-
-// App bar color
-$top-bar-color: #1565C0;
-$search-bar-color: lighten($bg-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #424242;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/v1-light.scss b/app/javascript/styles/y-zu-dark/color/v1-light.scss
deleted file mode 100644
index 2888e81b4..000000000
--- a/app/javascript/styles/y-zu-dark/color/v1-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$top-bar-unread-icon-color: darken($primary-color, 30%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #2196f3;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/v2-dark.scss b/app/javascript/styles/y-zu-dark/color/v2-dark.scss
deleted file mode 100644
index 025b238f5..000000000
--- a/app/javascript/styles/y-zu-dark/color/v2-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #121212;
-$menu-bg-color: #1e1e1e;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #1e1e1e;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #1e1e1e;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($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-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #1e1e1e;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/v2-light.scss b/app/javascript/styles/y-zu-dark/color/v2-light.scss
deleted file mode 100644
index fd9469961..000000000
--- a/app/javascript/styles/y-zu-dark/color/v2-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #ffffff;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: $bg-color;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: $bg-color;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
-$scroll-bar-thumb-active-color: darken($bg-color, 38%);
-
-// App bar color
-$top-bar-color: $bg-color;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/custom_color.scss b/app/javascript/styles/y-zu-dark/custom_color.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/y-zu-dark/custom_color.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/custom_config.scss b/app/javascript/styles/y-zu-dark/custom_config.scss
deleted file mode 100644
index e974e139c..000000000
--- a/app/javascript/styles/y-zu-dark/custom_config.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your settings below
-
-@import "color/v2-dark.scss";
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/icon_config.scss b/app/javascript/styles/y-zu-dark/icon_config.scss
deleted file mode 100644
index 99046e176..000000000
--- a/app/javascript/styles/y-zu-dark/icon_config.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
-
-
-// Reply icon settings
-$reply-icon: "reply";
-//$reply-icon: "comment"; // blooming
-
-
-// Material Design Icon settings
-// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-//$icon-font-source: google; // Google Fonts
-//$icon-font-source: github; // GitHub
-$icon-font-source: self; // Self-hosting
-
-// Material Icon style settings
-$icon-font-style: filled;
-//$icon-font-style: outlined;
-//$icon-font-style: round;
-//$icon-font-style: sharp;
-//$icon-font-style: two-tone;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/layout/material-v1.scss b/app/javascript/styles/y-zu-dark/layout/material-v1.scss
deleted file mode 100644
index 23c9a0616..000000000
--- a/app/javascript/styles/y-zu-dark/layout/material-v1.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 2px;
-
-
-// Search bar radius
-$search-bar-radius: 2px;
-
-
-// Bar radius settings
-$bar-radius: 0;
-
-
-// Button radius settings
-$button-radius: 2px;
-
-
-// Card radius settings
-$card-radius: 2px;
-
-
-// Dialog radius settings
-$dialog-radius: 2px;
-
-
-// Menu radius settings
-$menu-radius: 2px;
-
-
-// Media radius settings
-$media-radius: 0;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 0;
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 2px // Material v1 square
-
-
-// Chip settings
-$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px;
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/layout/material-v2.scss b/app/javascript/styles/y-zu-dark/layout/material-v2.scss
deleted file mode 100644
index 5700a99c8..000000000
--- a/app/javascript/styles/y-zu-dark/layout/material-v2.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 8px;
-//$nav-bar-radius: 28px; // full radius
-
-
-// Search bar radius
-$search-bar-radius: 8px;
-//$search-bar-radius: 21px; // full rounded
-
-
-// Bar radius settings
-$bar-radius: 0;
-//$bar-radius: 8px;
-
-
-// Button radius settings
-$button-radius: 8px;
-
-
-// Card radius settings
-$card-radius: 8px;
-
-
-// Dialog radius settings
-$dialog-radius: 8px;
-
-
-// Menu radius settings
-$menu-radius: 8px;
-
-
-// Media radius settings
-$media-radius: 0;
-//$media-radius: 2px;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 8px; // corner rounded
-//$nav-drawer-item-radius: 32px; // full rounded
-//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 8px // Material v2 square
-
-
-// Chip settings
-$outlined-chip: true; // Material v2 styled outlined chip
-//$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: false; // Material v2 styled colored button without shadow
-//$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px; // Regular
-//$fab-size: 40px; // Mini
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
-//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/loader.scss b/app/javascript/styles/y-zu-dark/loader.scss
deleted file mode 100644
index f51dde3e4..000000000
--- a/app/javascript/styles/y-zu-dark/loader.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'theme/theme';
-@import 'theme/material-icons';
-
-// Plugins
-@import 'plugins/astarte';
-//@import 'plugins/cards';
-@import 'plugins/dense';
-//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/plugins/astarte.scss b/app/javascript/styles/y-zu-dark/plugins/astarte.scss
deleted file mode 100644
index 8c2e534bb..000000000
--- a/app/javascript/styles/y-zu-dark/plugins/astarte.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.announcements {
- li {
- padding: 8px 16px;
- background: $card-bg-color;
- border-radius: $card-radius;
- border: 1px solid $border-color;
- }
-
- &__icon {
- margin: 0;
- right: 16px;
- height: 20px;
-
- .icon-button {
- @include icon-button;
-
- &:hover { background: transparent }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/plugins/cards.scss b/app/javascript/styles/y-zu-dark/plugins/cards.scss
deleted file mode 100644
index d9b3906a5..000000000
--- a/app/javascript/styles/y-zu-dark/plugins/cards.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@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: $bg-color }
-}
-
-.status {
- border-bottom: 0;
- border-radius: $card-radius;
- background: $card-bg-color;
-
- &__prepend { padding: 8px 8px 2px 0 }
-}
-
-.account { border-bottom: 0 !important }
-
-.status__wrapper.status__wrapper,
-.notification.notification {
- @include shadow-1dp;
- margin: 8px 2px;
- border-radius: $card-radius;
- background: $card-bg-color;
-}
-
-.notification .status__wrapper.status__wrapper { box-shadow: none !important }
-
-.notification__filter-bar {
- @include non-overflow-shadow-4dp;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/plugins/dense.scss b/app/javascript/styles/y-zu-dark/plugins/dense.scss
deleted file mode 100644
index 413336d04..000000000
--- a/app/javascript/styles/y-zu-dark/plugins/dense.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.drawer {
- &__header { height: 48px }
-
- &__tab { margin: 6px auto 6px }
-}
-
-.column { margin: 10px 5px }
-
-.column-header {
- height: 48px;
-
- > button { padding: 12px 16px }
-
- &__buttons { height: 48px }
-
- &__button { margin: 6px }
-}
-
-.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 }
-
- &__buttons-wrapper {
- .icon-button,
- .text-icon-button { padding: 4px }
- }
- }
-}
-
-.status {
- padding: 8px 8px 4px 66px;
-
- &__expand { width: 66px }
-
- &__info { padding-right: 0 }
-
- &__avatar {
- left: 8px;
- top: 10px;
- }
-
- &__content { padding-top: 2px }
-
- &__action-bar-button {
- margin: 0 4px;
-
- &.icon-button { padding: 4px }
- }
-
- &__action-bar-dropdown {
- width: 28px !important;
- height: 28px !important;
- margin: 0 4px;
-
- .icon-button { padding: 4px }
- }
-}
-
-.detailed-status {
- padding: 14px;
-
- &__meta { margin-top: 14px }
-
- &__action-bar { padding: 10px 0 }
-}
-
-.reply-indicator { padding: 8px }
-
-.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/plugins/plus.scss b/app/javascript/styles/y-zu-dark/plugins/plus.scss
deleted file mode 100644
index e356e937b..000000000
--- a/app/javascript/styles/y-zu-dark/plugins/plus.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@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 }
-}
-
-// exception
-.media-modal__overlay .picture-in-picture__footer .icon-button,
-.status__action-bar-button.icon-button--with-counter { background: transparent }
-
-// favorite icon
-.star-icon.active,
-.star-icon.icon-button.active.activate,
-.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
-
-.notification__favourite-icon-wrapper {
- left: -34px;
-
- .star-icon {
- border-radius: 50%;
- width: 28px;
- height: 28px;
- vertical-align: baseline;
- font-size: 18px;
-
- &.fa-fw::before { vertical-align: middle }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/_functions.scss b/app/javascript/styles/y-zu-dark/theme/_functions.scss
deleted file mode 100644
index 0374231ed..000000000
--- a/app/javascript/styles/y-zu-dark/theme/_functions.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@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/y-zu-dark/theme/_mixins.scss b/app/javascript/styles/y-zu-dark/theme/_mixins.scss
deleted file mode 100644
index fcd556f2b..000000000
--- a/app/javascript/styles/y-zu-dark/theme/_mixins.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-@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 shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
-@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
-@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
-@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
-@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
-@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
-@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
-@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
-
-@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
-
-@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
-
-@mixin search-bar-hover {
- @if $search-bar-hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- }
-}
-
-@mixin outlined-chip {
- @if $outlined-chip {
- .reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $outlined-chip-selected-border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
- }
- }
-}
-
-@mixin button-shadow {
- @if $button-shadow {
- .button,
- .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
- }
-}
-
-@mixin text-area-border {
- @if $text-area-border == underlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius $card-radius 0 0;
- border-bottom: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
- }
- }
-
- @if $text-area-border == outlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius;
- border: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus {
- border: 2px solid $border-active-color;
- padding: 7px 41px 7px 15px;
- }
- }
- }
-}
-
-@mixin icon-button {
- width: 20px !important;
- height: 20px !important;
- font-size: 20px !important;
-}
-
-// check background-image value
-@mixin bg-image {
- @if $bg-image == none {
- } @else { background-image: url($bg-image) }
-}
-
-
-@mixin icon-font-style {
- @if $icon-font-style == filled { font-family: "Material Icons" }
- @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
- @if $icon-font-style == round { font-family: "Material Icons Round" }
- @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
- @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
-}
-
-@mixin icon-font {
- @if $icon-font-source == github {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-
- @if $icon-font-source == google {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
- }
- }
- }
-
- @if $icon-font-source == self {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons"),
- url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/account.scss b/app/javascript/styles/y-zu-dark/theme/account.scss
deleted file mode 100644
index 551b4f4a8..000000000
--- a/app/javascript/styles/y-zu-dark/theme/account.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.account {
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .account__display-name,
- .account__display-name strong { color: $primary-text-color }
-
- &__avatar {
- border-radius: $avater-radius;
- width: 40px;
- height: 40px;
-
- &-overlay {
- &-base {
- border-radius: $avater-radius;
- width: 44px;
- height: 44px;
- background-size: 44px;
- }
-
- &-overlay { border-radius: $avater-radius }
- }
- }
-
- &__avatar-wrapper {
- margin-left: 0;
- margin-right: 16px;
- }
-
- &__header {
- &__bar {
- background: $card-bg-color;
- padding: 8px;
- border-bottom: none;
-
- .avatar .account__avatar { border: none }
- }
-
- &__tabs {
- padding: 8px;
-
- &__name {
- padding: 8px;
-
- h1 {
- color: $primary-text-color;
-
- small { color: $secondary-text-color }
- }
- }
-
- &__buttons {
- .icon-button {
- @include icon-button;
- border: none;
- border-radius: 50%;
- padding: 8px;
- margin-left: 8px;
- }
- }
- }
-
- &__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-bg-color;
-
- a,
- &__mark { color: $primary-text-color }
- }
-
- dl {
- border-bottom: 1px solid $border-color;
-
- &:first-child .verified { border-radius: 0 }
-
- &:last-child { border-bottom: 0 }
- }
-
- dt {
- color: $primary-text-color;
- background: $list-bg-inactive-color;
- }
-
- dd { color: $primary-text-color }
- }
- }
- }
-
- &__account-note {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
-
- label {
- color: $ui-text-color;
- margin-bottom: 8px;
- }
-
- textarea {
- color: $primary-text-color;
- padding: 8px 16px;
- border-radius: 0;
-
- &:focus { background: transparent }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- &__content { color: $secondary-text-color }
- }
-
- &__section-headline {
- background: $text-tab-bg-color;
- border-bottom: 1px solid $border-color;
-
- a {
- padding: 16px 0;
- color: $text-tab-indicator-color;
-
- &.active {
- color: $text-tab-indicator-active-color;
- border-bottom: 4px solid $text-tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $text-tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $text-tab-indicator-bg-hover-color }
- }
- }
-
- &__relationship {
- padding: 0;
- height: auto;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-}
-
-.account-role {
- padding: 4px 8px;
- border-radius: 17px;
- color: $ui-text-color;
- background-color: $contained-chip-color;
-}
-
-.accounts-table__count {
- color: $ui-text-color;
-
- small { color: $secondary-text-color }
-}
-
-.account-gallery {
- &__item { border-radius: 0 }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/base_config.scss b/app/javascript/styles/y-zu-dark/theme/base_config.scss
deleted file mode 100644
index f36a139ba..000000000
--- a/app/javascript/styles/y-zu-dark/theme/base_config.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@charset "UTF-8";
-
-
-// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
-
-
-// Color scheme
-@import '../color/v1-light';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'color/v2-light';
-
-
-// Layout profile
-@import '../layout/material-v1';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'layout/material-v2';
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-$search-bar-hover: false;
-
-
-// Status font size in timeline
-$status-font-size: 15px; // mastodon default
-//$status-font-size: 16px; // compatible with material design
-
-
-// Name font size in timeline status
-$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
-
-
-// Background image
-// If you want to use the local image, please put it in "../"
-$bg-image: none;
-//$bg-image: "./image.png";
-//$bg-image: "https://example.com/img/image.png";
-
-
-// Columns transparency settings
-$bar-transparency: 1.0; // opacity
-//$bar-transparency: 0.8; // semi-transparent
-
-$column-transparency: 1.0; // opacity
-//$column-transparency: 0.8; // semi-transparent
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/basics.scss b/app/javascript/styles/y-zu-dark/theme/basics.scss
deleted file mode 100644
index bb8f68bf0..000000000
--- a/app/javascript/styles/y-zu-dark/theme/basics.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-body,
-body.embed { background: $bg-color }
-
-.focusable:focus { background: transparent }
-
-// Chrome & Safari scroll bar
-::-webkit-scrollbar-thumb {
- background: $scroll-bar-thumb-color;
-
- &:hover { background: $scroll-bar-thumb-hover-color }
- &:active { background: $scroll-bar-thumb-active-color }
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
- background: transparent !important;
-}
-
-// Firefox scroll bar
-html { scrollbar-color: $scroll-bar-thumb-color transparent }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/button.scss b/app/javascript/styles/y-zu-dark/theme/button.scss
deleted file mode 100644
index 5f909d843..000000000
--- a/app/javascript/styles/y-zu-dark/theme/button.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include button-shadow;
-
-.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;
-
- &.active { color: $icon-button-active-color }
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
- }
-
- &.overlayed {
- @include icon-button;
- border-radius: 50%;
- background: $media-icon-bg-color;
- color: $media-icon-color;
- padding: 4px;
- line-height: 20px !important;
-
- &:hover {
- background: $media-icon-bg-color;
- color: $media-icon-hover-color;
- }
- }
-
- &__counter {
- width: 16px;
- margin-left: 8px;
- }
-
- &:hover {
- @include material-transition;
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
-}
-
-// Checkbox with label
-label.icon-button {
- &.active {
- color: $ui-text-color;
- background-color: transparent;
- }
-
- &:hover {
- @include material-transition;
- background-color: transparent;
- }
-}
-
-.text-icon-button {
- color: $icon-button-color;
- border-radius: 50%;
- font-size: 14px;
-
- &.active {
- background-color: $icon-bg-hover-color;
- color: $icon-button-active-color;
- }
-
- &:hover {
- background-color: $icon-bg-hover-color;
- color: $icon-button-hover-color;
- }
-}
-
-.button {
- background-color: $contained-button-color;
- border-radius: $button-radius;
-
- &:active,
- &:focus {
- background-color: $contained-button-color;
- border-radius: $button-radius;
- }
-
- &:hover {
- @include shadow-2dp;
- background-color: $contained-button-hover-color;
- }
-
- &.logo-button {
- background: $contained-button-color;
- margin: 2px;
-
- &:hover { background: $contained-button-hover-color }
-
- .button--destructive:hover { background: $contained-button-hover-color }
- }
-
- &.button--block { margin: 8px 0 }
-
- &.button-secondary {
- color: $text-button-color;
- border: none;
- box-shadow: none;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
- }
-
- &.confirmation-modal__cancel-button {
- box-shadow: none;
- background-color: transparent;
- margin: 0 8px;
- color: $text-button-color;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
- }
-}
-
-.spoiler-button__overlay__label {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- color: $media-icon-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/columns.scss b/app/javascript/styles/y-zu-dark/theme/columns.scss
deleted file mode 100644
index 77a5c777a..000000000
--- a/app/javascript/styles/y-zu-dark/theme/columns.scss
+++ /dev/null
@@ -1,511 +0,0 @@
-@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-bg-color;
- opacity: $column-transparency;
- }
-
- &:last-child { box-shadow: none }
-}
-
-.column-header {
- background: $top-bar-color;
- border-radius: $bar-radius;
- height: 56px;
-
- > button {
- padding: 16px;
- color: $top-bar-text-color;
- }
-
- &>.column-header__back-button { color: $top-bar-icon-color }
-
- &.active {
- .column-header__icon {
- color: $top-bar-unread-icon-color;
- text-shadow: none;
- }
- }
-
- &__icon {
- margin-right: 16px;
- color: $top-bar-icon-color;
- font-size: 20px;
- }
-
- &__buttons { height: 56px }
-
- &__button {
- @include icon-button;
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 8px;
- margin: 10px;
- border-radius: 50%;
- box-sizing: content-box;
-
- &.active {
- color: $top-bar-icon-active-color;
- background: $icon-bg-active-color;
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &__setting-btn {
- color: $icon-button-color;
- padding: 8px 0;
-
- &:hover {
- color: $icon-button-hover-color;
- text-decoration: none;
- }
-
- .fa { font-size: 20px }
-
- span { vertical-align: middle }
- }
-
- &__setting-arrows {
- font-size: 16px;
- border-bottom: 8px;
-
- .column-header__setting-btn {
- padding: 8px;
- border-radius: 50%;
-
- &:last-child { padding-right: 8px }
- }
- }
-
- &__wrapper {
- @include shadow-4dp;
- border-radius: $bar-radius;
- opacity: $bar-transparency;
-
- .announcements { border-top: 1px solid $border-color }
-
- &.active {
- @include shadow-4dp;
-
- &::before { background: transparent }
- }
- }
-
- &__collapsible {
- color: $ui-text-color;
- background: $card-bg-color;
- border-top: 1px solid $border-color;
-
- &-inner {
- background: $card-bg-color;
- padding: 16px;
- }
-
- &.collapsed { border-top: none }
- }
-
- &__back-button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- margin: 8px 10px;
- padding: 10px;
- font-size: 20px;
-
- span { display: none }
- }
-}
-
-.column-subheading {
- color: $section-text-color;
- background: $bg-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
-}
-
-.column-link {
- color: $ui-text-color;
- background: $bg-color;
- padding: 16px;
- border-radius: $nav-drawer-item-radius;
-
- &:hover { background: $list-bg-hover-color }
-
- &:active,
- &:focus { background: $list-bg-active-color }
-
- &__icon {
- margin-right: 32px;
- font-size: 20px;
- }
-
- &--transparent {
- &.active {
- color: $ui-text-color;
- background: $menu-bg-active-color;
-
- &:hover { background: $menu-bg-active-hover-color }
-
- .fa { color: $icon-color }
- }
-
- &:hover {
- color: $ui-text-color;
-
- .fa { color: $icon-color }
- }
- }
-
- .fa { color: $icon-color }
-}
-
-.column-settings {
- &__section {
- color: $section-text-color;
- margin-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
-
- &--slim-button { top: -54px }
-}
-
-.column-inline-form {
- padding: 16px 0 16px 16px;
- background: $card-bg-color;
-
- .icon-button { margin: 0 16px }
-}
-
-.columns-area {
- @include bg-image;
- background-size: contain;
-}
-
-.setting-text {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border-radius: $bar-radius;
-
- &::placeholder { color: $tips-text-color }
-}
-
-.empty-column-indicator {
- color: $secondary-text-color;
- background: $card-bg-color;
- font-size: 16px;
- contain: initial; // padding fix
-}
-
-.conversation {
- border-bottom: 1px solid $border-color;
- padding: 12px;
- background: $list-bg-inactive-color;
-
- &--unread {
- background: $list-bg-color;
-
- .conversation__content__relative-time { color: $info-text-color }
- }
-
- &__unread { background: $primary-color }
-
- &__avatar { padding: 0 16px 0 0 }
-
- &__content {
- padding: 0;
-
- &__relative-time {
- font-size: 14px;
- color: $info-text-color;
- }
-
- &__names,
- &__names a {
- color: $primary-text-color;
- font-size: 16px;
- }
- }
-}
-
-// read status in notification column
-.muted {
- .status {
- &__content {
- color: $read-primary-text-color;
-
- 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-bg-hover-color }
-}
-
-.getting-started {
- background: $bg-color;
- color: $ui-text-color;
- opacity: $column-transparency;
-
- &__wrapper {
- background: $bg-color;
- height: auto !important;
- padding-bottom: 8px;
- border-bottom: 1px solid $border-color;
- }
-
- &__footer {
- padding: 16px;
-
- p {
- color: $secondary-text-color;
- font-size: 12px;
- margin-bottom: 16px;
- }
-
- a { color: $ui-text-color }
-
- p a { color: $link-text-color }
- }
-
- &__trends {
- background: $bg-color;
- margin-bottom: 0;
- opacity: $column-transparency;
-
- h4 {
- color: $section-text-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
- border-bottom: none;
- }
- }
-}
-
-.trends {
- &__header {
- color: $section-text-color;
- background: transparent;
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .fa { margin-right: 8px }
- }
-
- &__item {
- padding: 16px;
- border-bottom: none;
-
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
- }
-
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
- }
- }
-}
-
-.setting-toggle {
- &__label {
- color: $ui-text-color;
- margin: 8px 8px 8px 14px;
- }
-}
-
-.announcements {
- background: $card-bg-color;
- padding: 0 8px;
-
- &__container { color: $primary-text-color }
-
- &__item {
- padding: 16px;
- font-size: 16px;
-
- &__unread { background: $badge-color }
- }
-
- &__pagination {
- color: $ui-text-color;
- padding: 16px;
- bottom: 0;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- margin: 0 4px;
- line-height: normal !important;
- box-sizing: content-box;
- }
-
- span { vertical-align: super }
- }
-}
-
-.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 }
-
-@include outlined-chip;
-
-.reactions-bar {
- margin-top: 16px;
- width: calc(100% - 72px);
-
- .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: $chip-selected-text-color }
-
- &:hover { background-color: $contained-chip-selected-color }
- }
-
- &__emoji {
- width: 24px;
- height: 24px;
- margin: 4px 0 4px 2px;
- }
-
- &__count {
- font-size: 16px;
- margin: 0 12px 0 8px;
- color: $secondary-text-color;
- }
-
- &:hover { background: $contained-chip-hover-color }
- }
-}
-
-.notification {
- &__filter-bar {
- background: $tab-bg-color;
- border-bottom: 1px solid $border-color;
- z-index: 1;
- opacity: $bar-transparency;
-
- button {
- background: $tab-bg-color;
- color: $tab-indicator-color;
- font-size: 16px;
-
- span { font-size: 14px }
-
- &.active {
- color: $tab-indicator-active-color;
- border-bottom: 4px solid $tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
- }
-
- &__message {
- color: $secondary-text-color;
- margin: 0 16px 0 70px;
- font-size: 16px;
- }
-
- &__display-name:hover { color: inherit }
-}
-
-.notification-favourite .status.status-direct {
- .icon-button.disabled { color: $disabled-icon-color }
-}
-
-.relationship-tag {
- color: $ui-text-color;
- background-color: $relationship-tag-color;
- font-size: 12px;
- border-radius: 17px;
- padding: 4px 8px;
- opacity: 1;
-}
-
-.attachment-list__list a { color: $secondary-text-color }
-
-// unread notification
-.notification.unread:before, .status__wrapper.unread:before { border-left: none }
-
-.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/components.scss b/app/javascript/styles/y-zu-dark/theme/components.scss
deleted file mode 100644
index aa64aabc5..000000000
--- a/app/javascript/styles/y-zu-dark/theme/components.scss
+++ /dev/null
@@ -1,647 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include text-area-border;
-
-.modal-root {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-
- &__overlay { background-color: rgba(0,0,0,.32) !important }
-
- &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
-}
-
-.drawer {
- &__header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- justify-content: space-around;
- opacity: $bar-transparency;
-
- a { transition: none }
-
- a:hover {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- }
- }
-
- &__tab {
- color: $top-bar-icon-color;
- font-size: 20px;
- margin: 10px auto 10px;
- padding: 8px;
- flex: none;
- height: 20px;
- width: 20px;
- border-bottom: none;
- text-align: justify;
-
- &:hover { color: $top-bar-icon-hover-color }
- }
-
- &__pager {
- @include shadow-1dp;
- border-radius: $card-radius;
- }
-
- &__inner {
- background: $card-bg-color;
- opacity: $column-transparency;
-
- &.darker {
- background: $card-bg-color;
- position: inherit;
- }
-
- &__mastodon { background: $card-bg-color }
- }
-}
-
-.search {
- &__input {
- background: $search-bar-color;
- color: $tips-text-color;
- border-radius: $search-bar-radius;
- padding: 12px 12px 12px 40px;
- opacity: $bar-transparency;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
-
- &:hover { @include search-bar-hover }
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__icon {
- .fa {
- color: $icon-color;
- font-size: 20px;
- top: 12px;
- right: unset;
- left: 12px;
- height: 6px;
- transition: none;
-
- &.active { opacity: 1 }
-
- &-search {
- transform: none;
- opacity: 1;
- }
- &-times-circle.active {
- right: 16px;
- left: unset;
- transform: none;
- }
- }
- }
-}
-
-.search-popout {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- border-radius: 0px $bar-radius;
- border-top: 1px solid $border-color;
- margin-top: 0;
- color: $tips-text-color;
-
- h4 {
- color: $secondary-text-color;
- }
-
- em {
- color: $search-bar-text-color;
- }
-}
-
-.search-results {
- &__header {
- color: $secondary-text-color;
- background-color: $card-bg-color;
- padding: 16px;
-
- .fa { margin-right: 16px }
- }
-
- &__section {
- h5 {
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- padding: 16px;
- color: $section-text-color;
-
- .fa { margin-right: 8px }
- }
- }
-}
-
-.navigation-bar {
- color: $secondary-text-color;
- padding: 14px;
-
- strong {
- color: $ui-text-color;
- }
-
- .navigation-bar__actions .compose__action-bar .icon-button {
- width: 36px !important;
- height: 36px !important;
- padding: 8px;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
-}
-
-.navigation-panel hr {
- border-top: 1px solid $border-color;
- margin: 8px 0;
-}
-
-.flex-spacer { margin: 8px 0 }
-
-.dropdown-menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- padding: 8px 0;
- border-radius: $menu-radius;
-
- &__arrow { visibility: hidden }
-
- &__item a {
- font-size: 14px;
- padding: 8px 16px;
- background: $menu-bg-color;
- color: $menu-text-color;
-
- &:hover, &:active {
- background: $menu-bg-hover-color;
- color: $menu-text-color;
- }
- }
-
- &__separator {
- margin: 8px 0;
- border-bottom: 1px solid $border-color;
- }
-}
-
-.compose-form {
- .autosuggest-textarea {
- &__textarea {
- background: $text-field-bg-color;
- color: $ui-text-color;
- padding: 8px 42px 8px 16px;
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__suggestions {
- @include shadow-1dp;
- background: $menu-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
- font-size: 16px;
- padding: 8px 0;
-
- &__item {
- padding: 8px;
- border-radius: 0;
-
- &:hover { background: $menu-bg-hover-color }
-
- &.selected,
- &:focus,
- &:active { background: $menu-bg-active-color }
- }
- }
- }
-
- .spoiler-input {
- &.spoiler-input--visible { margin-bottom: 16px }
-
- &__input {
- color: $ui-text-color;
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- border-radius: 0;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- .compose-form {
- &__warning {
- color: $secondary-text-color;
- background: $card-bg-color;
- padding: 16px;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- box-shadow: none;
-
- a { color: $link-text-color }
- }
-
- &__modifiers {
- background: $card-bg-color;
- color: $tips-text-color;
-
- .compose-form {
- &__upload-thumbnail { border-radius: 0 }
-
- &__upload__actions {
- @include material-transition;
-
- .icon-button {
- color: $media-icon-color;
- font-size: 16px;
-
- &:hover { background-color: transparent }
- }
- }
- }
- }
-
- &__buttons-wrapper {
- background: $card-bg-color;
- color: $tips-text-color;
- padding: 8px;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- }
-
- .text-icon-button {
- width: 20px !important;
- height: 20px !important;
- padding: 8px;
- line-height: 20px !important;
- }
- }
-
- &__poll-wrapper {
- border-top: 1px solid $border-color;
-
- ul { padding: 16px 12px 16px 0 }
-
- select {
- color: $ui-text-color;
- background-color: $bg-color;
- border: 0;
-
- &:focus { border-color: $border-hover-color }
- }
-
- .button.button-secondary {
- box-shadow: none;
- color: $text-button-color;
-
- &:hover { background-color: $text-button-hover-color }
-
- &:active,
- &:focus { background-color: $text-button-focus-color }
- }
-
- .poll__footer { border-top: none }
- }
-
- &__publish .compose-form__publish-button-wrapper { box-shadow: none }
- }
-}
-
-.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
-
-
-.poll {
- .button { margin-right: 8px }
-
- li { margin-bottom: 0 }
-
- &__input {
- border: none;
- width: 20px;
- height: 20px;
- flex: 0 0 20px;
- padding: 18px;
- margin: 0 2px;
- background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
-
- &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
-
- &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
-
- &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-
- &.checkbox {
- border-radius: 2px;
- border: 2px solid $control-border-color;
- padding: 8px;
- margin: 8px 10px;
- background: none;
- }
- }
-
- &__text input[type=text] {
- color: $ui-text-color;
- background: $text-field-bg-color;
- border: 1px solid $border-color;
- padding: 8px 12px;
-
- &:focus { border-color: $border-hover-color }
- }
-
- &__option {
- padding: 16px 0 8px;
-
- input[type=text] {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border: none;
- border-radius: 2px;
- padding: 8px 16px;
- }
-
- &__text { line-height: 34px }
- }
-
- &__chart {
- border-radius: 0;
- background: $progress-indicator-track-color;
-
- &.leading { background: $progress-indicator-color }
- }
-
- &__footer {
- padding-top: 8px;
- padding-bottom: 0;
- color: $ui-text-color;
- }
-
- &__link { color: $ui-text-color }
-}
-
-.privacy-dropdown {
- &.active .privacy-dropdown__value.active {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- box-shadow: none;
-
- .icon-button { color: $icon-button-active-color }
- }
-
- &__dropdown {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $dialog-radius;
- }
-
- &__option {
- color: $icon-color;
- padding: 8px 16px;
-
- &__icon {
- font-size: 20px;
- margin-right: 12px;
- }
-
- &__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &.active {
- background: $menu-bg-active-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &:hover {
- background: $menu-bg-active-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &:hover {
- background: $menu-bg-hover-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-}
-
-.character-counter {
- color: $secondary-text-color;
-}
-
-.reply-indicator {
- box-shadow: none;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- background: $card-bg-color;
- padding: 16px;
-
- &__header { margin-bottom: 4px }
-
- &__display {
- &-name {
- color: $primary-text-color;
- padding-right: 24px;
- }
-
- &-avatar { margin-right: 8px }
- }
-
- &__content {
- color: $primary-text-color;
-
- p { margin-bottom: 16px }
- }
-}
-
-.attachment-list {
- &__list a { color: $secondary-text-color }
-
- &.compact .fa { color: $icon-color }
-}
-
-.block-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.load-more {
- color: $ui-text-color;
-
- &:hover { background: transparent }
-}
-
-.autosuggest-hashtag {
- &__name { color: $menu-text-color }
-}
-
-.filter-form {
- background: $bg-color;
- color: $ui-text-color;
-
- &__column { padding: 8px 16px }
-}
-
-.directory {
- &__card {
- @include shadow-1dp;
- margin: 8px 4px;
- border-radius: $card-radius;
-
- &__img { border-radius: $card-radius $card-radius 0 0 }
-
- &__bar {
- background: $card-bg-color;
- padding: 8px 16px;
-
- .display-name {
- margin-left: 16px;
-
- strong {
- font-size: 16px;
- color: $primary-text-color;
- }
-
- span { color: $secondary-text-color }
- }
- }
-
- &__extra {
- background: $card-bg-color;
- border-radius: 0 0 $card-radius $card-radius;
-
- .account__header__content {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
- }
-
- .accounts-table__count { padding: 16px 0 }
- }
- }
-}
-
-.mute-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__explanation { margin-top: 16px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-
- .setting-toggle {
- margin-top: 16px;
- margin-bottom: 16px;
-
- &__label {
- color: $ui-text-color;
- margin: 0 0 0 12px;
- }
- }
-}
-
-.upload-progress {
- color: $ui-text-color;
-
- &__backdrop {
- border-radius: 0;
- background: $progress-indicator-track-color;
- margin-top: 6px;
- }
-
- &__tracker {
- border-radius: 0;
- background: $progress-indicator-color;
- }
-}
-
-.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/containers.scss b/app/javascript/styles/y-zu-dark/theme/containers.scss
deleted file mode 100644
index 09af289b0..000000000
--- a/app/javascript/styles/y-zu-dark/theme/containers.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.public-layout {
- .header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- margin: 16px 0;
-
- .brand:hover { background: $tab-indicator-bg-hover-color }
-
- .nav-link,
- .nav-link.optional {
- color: $top-bar-text-color;
-
- &:hover {
- background: $tab-indicator-bg-hover-color;
- text-decoration: none;
- }
- }
-
- .nav-button {
- background: transparent;
- margin: 0;
- border-radius: 0;
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
-
- .detailed-status__meta { margin-top: 16px }
- }
-
- .detailed-status { padding: 16px }
-
- .footer {
- padding-top: 16px;
- padding-bottom: 64px;
- color: $ui-text-color;
-
- h4 { color: $ui-text-color }
-
- ul a { color: $secondary-text-color }
-
- .grid .column-2 h4 a { color: $ui-text-color }
-
- .brand {
- svg { fill: $icon-color }
-
- &:hover svg { fill: $icon-hover-color }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/control.scss b/app/javascript/styles/y-zu-dark/theme/control.scss
deleted file mode 100644
index a205a4cb7..000000000
--- a/app/javascript/styles/y-zu-dark/theme/control.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@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/y-zu-dark/theme/emoji-picker.scss b/app/javascript/styles/y-zu-dark/theme/emoji-picker.scss
deleted file mode 100644
index 91663fb93..000000000
--- a/app/javascript/styles/y-zu-dark/theme/emoji-picker.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@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-bg-color;
- border-radius: $menu-radius;
- }
-
- &__modifiers__menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $menu-radius;
-
- button {
- padding: 8px;
- }
- }
-}
-
-.emoji-mart {
- width: 388px !important;
- font-size: 14px;
- color: $menu-text-color;
-
- &-bar {
- border: 0 solid $border-color;
-
- &:first-child {
- background: $menu-bg-color;
- }
- }
-
- &-anchor {
- color: $text-tab-indicator-color;
- padding: 10px 4px;
-
- &-bar { background-color: $icon-tab-indicator-active-color }
-
- &-selected { color: $icon-tab-indicator-hover-color }
-
- &:hover { color: $icon-tab-indicator-hover-color }
- }
-
- &-search {
- background: $menu-bg-color;
-
- input {
- outline: none;
- padding: 8px;
- background: $search-bar-color;
- color: $ui-text-color;
- border: 0;
- border-radius: $search-bar-radius;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
- }
- }
-
- &-scroll {
- padding: 0 8px 8px;
- background: $menu-bg-color;
- }
-
- &-category {
- &-label span {
- padding: 4px 6px;
- background: $menu-bg-color;
- }
-
- .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
- }
-
- &-no-results { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/icons.scss b/app/javascript/styles/y-zu-dark/theme/icons.scss
deleted file mode 100644
index 987767544..000000000
--- a/app/javascript/styles/y-zu-dark/theme/icons.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@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.fa-lock { text-transform: none }
-
-.icon-with-badge__badge {
- background: $badge-color;
- border: none;
- padding: 2px 6px;
- border-radius: 12px;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/material-icons.scss b/app/javascript/styles/y-zu-dark/theme/material-icons.scss
deleted file mode 100644
index dd01ce3d6..000000000
--- a/app/javascript/styles/y-zu-dark/theme/material-icons.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config', '../icon_config';
-@import '../custom_color', '../custom_layout';
-@import 'functions';
-@import 'mixins';
-
-
-@include icon-font;
-
-.fa-fw {
- width: 20px;
- height: 20px;
- font-size: 20px;
-}
-
-.fa {
- &.fa-bars,
- &.fa-navicon,
- &.fa-reorder,
- &.fa-globe,
- &.fa-cog,
- &.fa-cogs,
- &.fa-gears,
- &.fa-sign-out,
- &.fa-search,
- &.fa-times,
- &.fa-times-circle,
- &.fa-close,
- &.fa-remove,
- &.fa-chevron-down,
- &.fa-ellipsis-v,
- &.fa-paperclip,
- &.fa-tasks,
- &.fa-plus,
- &.fa-unlock,
- &.fa-lock,
- &.fa-envelope,
- &.fa-home,
- &.fa-bullhorn,
- &.fa-sliders,
- &.fa-chevron-left,
- &.fa-chevron-right,
- &.fa-reply,
- &.fa-reply-all,
- &.fa-share-alt,
- &.fa-star,
- &.fa-bookmark,
- &.fa-ellipsis-h,
- &.fa-bell,
- &.fa-bell-o,
- &.fa-eraser,
- &.fa-users,
- &.fa-file-text,
- &.fa-user-plus,
- &.fa-address-book,
- &.fa-address-book-o,
- &.fa-list,
- &.fa-list-ul,
- &.fa-eye,
- &.fa-eye-slash,
- &.fa-pencil,
- &.fa-trash,
- &.fa-play,
- &.fa-external-link,
- &.fa-retweet,
- &.fa-link,
- &.fa-pause,
- &.fa-volume-up,
- &.fa-volume-off,
- &.fa-expand,
- &.fa-download,
- &.fa-arrows-alt,
- &.fa-compress,
- &.fa-user-times,
- &.fa-check,
- &.fa-quote-right,
- &.fa-upload,
- &.fa-comments,
- &.fa-angle-right,
- &.fa-thumb-tack {
- @include icon-font-style;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- }
-}
-
-.fa {
- &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
- &.fa-globe::before { content: "public" }
- &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
- &.fa-sign-out::before { content: "exit_to_app" }
- &.fa-search::before { content: "search" }
- &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
- &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
- &.fa-paperclip::before { content: "attach_file" }
- &.fa-tasks::before { content: "poll" }
- &.fa-plus::before { content: "add" }
- &.fa-unlock::before { content: "lock_open" }
- &.fa-lock::before { content: "lock" }
- &.fa-envelope::before { content: "mail" }
- &.fa-home::before { content: "home" }
- &.fa-bullhorn::before { content: "announcement" }
- &.fa-sliders::before { content: "tune" }
- &.fa-chevron-left::before { content: "arrow_back" }
- &.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: $reply-icon }
- &.fa-reply-all::before { content: "reply_all" }
- &.fa-share-alt::before { content: "share" }
- &.fa-star::before { content: $favorite-icon }
- &.fa-bookmark::before { content: "bookmark" }
- &.fa-ellipsis-h::before { content: "more_horiz" }
- &.fa-bell::before { content: "notifications" }
- &.fa-bell-o::before { content: "notifications" }
- &.fa-eraser::before { content: "clear_all" }
- &.fa-users::before { content: "people" }
- &.fa-file-text::before { content: "web" }
- &.fa-user-plus::before { content: "person_add" }
- &.fa-address-book::before { 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: "person_remove" }
- &.fa-check::before { content: "check" }
- &.fa-quote-right::before { content: "format_quote" }
- &.fa-upload::before { content: "file_upload" }
- &.fa-comments::before { content: "forum" }
- &.fa-angle-right::before { content: "chevron_right" }
- &.fa-thumb-tack::before { content: "push_pin" }
-}
-
-// 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
-button.icon-button i.fa-retweet {
- height: 20px;
- width: 20px;
- transition: none;
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,') }
-
-button.icon-button i.fa-retweet:hover,
-button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover,
-button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-// dropdown icon
-.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px}
-
-// icon in tab settings
-.text-btn.column-header__setting-btn {
- .fa {
- vertical-align: middle;
-
- &.fa-eraser { margin-right: 8px } // clear notification
- }
-}
-
-// top bar icons align
-.fa.fa-bell.column-header__icon.fa-fw,
-.fa.fa-home.column-header__icon.fa-fw,
-.fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw,
-.fa.fa-bars.column-header__icon.fa-fw,
-.fa.fa-bookmark.column-header__icon.fa-fw,
-.fa.fa-address-book-o.column-header__icon.fa-fw,
-.fa.fa-envelope.column-header__icon.fa-fw,
-.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
-
-// top bar icons in single column mode
-.tabs-bar__link {
- .fa.fa-home.fa-fw,
- .fa.fa-bell.fa-fw,
- .fa.fa-users.fa-fw,
- .fa.fa-globe.fa-fw { vertical-align: text-bottom }
-}
-
-// getting-started and side bar icons
-.column-link .fa,
-.column-link--transparent .fa { vertical-align: text-bottom }
-
-// uploaded media icons align
-.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
- font-size: 20px;
- vertical-align: text-bottom;
-}
-
-// search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
-
-// read more icon
-.status__content__read-more-button .fa { vertical-align: bottom }
-
-// Attachment icon
-.attachment-list__list a .fa { vertical-align: middle }
-
-// status detail icon
-.detailed-status .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
-
-// status scope
-.status__visibility-icon .fa,
-.account__header__tabs__name .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/media.scss b/app/javascript/styles/y-zu-dark/theme/media.scss
deleted file mode 100644
index b8ac12414..000000000
--- a/app/javascript/styles/y-zu-dark/theme/media.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.media-gallery {
- border-radius: $media-radius;
-
- &__item { border-radius: $media-radius }
-}
-
-.media-modal {
- &__nav {
- background: $media-icon-bg-color;
- color: $media-icon-color;
- height: 48px;
- width: 48px;
- margin: auto 16px;
- padding: 8px;
- border-radius: 50%;
-
- .fa { width: 32px }
- }
-
- &__button {
- background-color: $media-page-indicator-color;
-
- &--active { background-color: $media-page-indicator-active-color }
- }
-
- &__close {
- &.icon-button {
- background: transparent;
- color: $media-icon-color;
- font-size: 24px !important;
- width: 24px !important;
- height: 24px !important;
- padding: 8px;
- box-sizing: content-box;
- line-height: normal !important;
-
- &:hover {
- background: $media-icon-bg-hover-color;
- color: $media-icon-hover-color;
- }
-
- .fa-fw {
- width: 24px;
- height: 24px;
- }
- }
- }
-
- &__meta {
- bottom: 24px;
-
- a { color: $media-icon-color }
- }
-
- &__overlay {
- .picture-in-picture__footer .icon-button {
- color: $media-icon-color;
-
- &:active,
- &:focus,
- &:hover {
- color: $media-icon-hover-color;
- background-color: transparent;
- }
- }
- }
-}
-
-.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 {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__volume {
- &::before {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__current {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__time-current { margin-left: 68px }
-
- &__buttons button { font-size: 20px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/modal.scss b/app/javascript/styles/y-zu-dark/theme/modal.scss
deleted file mode 100644
index 93e5b24c1..000000000
--- a/app/javascript/styles/y-zu-dark/theme/modal.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.confirmation-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $dialog-radius;
-
- &__container {
- text-align: left;
- padding: 24px;
- }
-
- &__action-bar {
- justify-content: flex-end;
- background: $card-bg-color;
- padding: 8px;
- }
-
- &__secondary-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.actions-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- border-radius: $card-radius;
-
- ul li:not(:empty) a {
- color: $ui-text-color;
- font-size: 16px;
-
- &:hover {
- background: $card-bg-hover-color;
- color: $ui-text-color;
- }
- }
-
- .dropdown-menu__separator { border-bottom-color: $border-color }
-
- .status {
- background: $card-bg-color;
- border-bottom-color: $border-color;
- padding-top: 12px;
- padding-bottom: 12px;
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
- }
-}
-
-.report-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__target {
- padding: 24px;
- text-align: left;
- font-weight: bold;
- }
-
- &__container {
- border-top: none;
- }
-
- &__comment {
- border-right: none;
-
- .setting-text-label { color: $ui-text-color }
- }
-}
-
-.embed-modal .embed-modal__container {
- padding: 0 24px 24px 24px;
-
- .hint {
- margin-bottom: 16px;
- color: $secondary-text-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/responsive.scss b/app/javascript/styles/y-zu-dark/theme/responsive.scss
deleted file mode 100644
index 8618f7ed7..000000000
--- a/app/javascript/styles/y-zu-dark/theme/responsive.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@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;
- width: $fab-size;
- height: $fab-size;
- bottom: 16px;
- right: 16px;
-
- &:hover { background: $floating-action-button-hover-color }
-
- &:active,
- &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
- .column { margin: 0 !important }
- .search__input { padding: 16px 46px }
-
- .search__icon {
- .fa {
- top: 16px;
- left: 16px;
- }
-
- .fa-times-circle.active { left: unset }
- }
-}
-
-// small size screen
-@media screen and (max-width: 415px) {
- .public-layout { padding-top: 64px }
-}
-
-// middle size screen
-@media screen and (min-width: 415px) {
- .tabs-bar {
- margin-bottom: 0;
-
- &__wrapper {
- padding-top: 0;
-
- .tabs-bar { margin-bottom: 0 }
- }
- }
-
- .columns-area__panels {
- &__main {
- @include shadow-1dp;
- padding: 0;
- }
-
- &__pane { padding: 0 16px }
- }
-}
-
-//single column mode
-@media screen and (min-width: 631px) {
- .tabs-bar__link {
- &:hover {
- background: $tab-indicator-bg-hover-color;
- border-bottom-color: transparent;
- }
-
- &:active,
- &:focus {
- background: $tab-indicator-bg-focus-color;
- border-bottom-color: $tab-bg-color;
- }
-
- &.active { border-bottom-color: $tab-indicator-active-color }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/statuses.scss b/app/javascript/styles/y-zu-dark/theme/statuses.scss
deleted file mode 100644
index 7e4374014..000000000
--- a/app/javascript/styles/y-zu-dark/theme/statuses.scss
+++ /dev/null
@@ -1,292 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.status {
- padding: 12px 12px 4px 70px;
- border-bottom: 1px solid $border-color;
-
- &__expand { width: 70px }
-
- &__info {
- font-size: $name-font-size;
- padding-right: 4px;
- }
-
- &__relative-time { color: $info-text-color }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
-
- &__content {
- font-size: $status-font-size;
- padding-top: 4px;
- color: $primary-text-color;
-
- a {
- color: $link-text-color;
-
- &.unhandled-link { color: $link-text-color }
- }
-
- p { margin-bottom: 16px }
-
- .status__content__spoiler-link {
- 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 {
- margin-top: 4px;
-
- &__counter {
- margin-right: 6px;
-
- &__label {
- font-size: 14px;
- color: $info-text-color;
- }
- }
- }
-
- &__action-bar-button {
- margin-right: 4px;
-
- &.icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &--with-counter {
- margin-right: 4px;
- width: auto !important;
-
- &:hover { background: transparent }
- }
- }
- }
-
- &__action-bar-dropdown {
- width: 36px !important;
- height: 36px !important;
- box-sizing: content-box;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
-
- &:hover {
- color:$icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
- }
-
- &__prepend {
- color: $secondary-text-color;
- margin-left: 64px;
-
- .status__display-name strong { color: $secondary-text-color }
- }
-
- &.status-direct:not(.read) {
- background: transparent;
- border-bottom-color: $border-color;
- }
-
- &__visibility-icon { color: $icon-color }
-}
-
-.status-card {
- color: $icon-color;
- border-color: $border-color;
- outline: none;
- margin-top: 16px;
-
- &__image {
- background: transparent;
-
- &>.fa {
- font-size: 26px;
- }
- }
-
- &__title {
- color: $primary-text-color;
- margin-bottom: 6px;
- }
-
- &__description { color: $secondary-text-color }
-
- &__actions {
- &>div {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- }
-
- button,
- a {
- color: $media-icon-color;
- font-size: 20px;
- }
-
- a { bottom: auto }
- }
-
- &.compact {
- border-color: $border-color;
- outline: none;
- background: transparent;
-
- .status-card {
- &__content { padding: 12px }
- &__image { flex: 0 0 64px }
- }
-
- &:hover { background-color: transparent !important }
- }
-
- &.horizontal {
- border-radius: 0;
-
- .status-card {
- &__image-preview { border-radius: 0 }
-
- &__image-image { border-radius: 0 }
- }
- }
-}
-
-a.status-card {
- &:hover { background-color: $card-bg-color }
-}
-
-.embed .status,
-.public-layout .status { padding: 16px 16px 16px 80px }
-
-// Detailed status in mobile
-.status.light {
- .status {
- &__display-name { color: $primary-text-color }
- &__relative-time { color: $info-text-color }
- &__content { color: $primary-text-color }
- }
-
- .display-name { color: $secondary-text-color }
- .display-name strong { color: $primary-text-color }
-}
-
-.detailed-status {
- background: $card-bg-color;
- padding: 16px;
-
- &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__meta {
- margin-top: 16px;
- color: $info-text-color;
- }
-
- &__action-bar {
- background: $card-bg-color;
- border-top: none;
- border-bottom: 1px solid $border-color;
- padding: 8px 0;
- }
-
- &__action-bar-dropdown {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
- }
-
- &__button {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-
- .button.logo-button {
- margin-bottom: 16px;
- line-height: 36px;
- }
-}
-
-// search user trends
-.display-name {
- &__html { color: $primary-text-color }
- &__account { color: $secondary-text-color }
-}
-
-.activity-stream {
- @include shadow-1dp;
- margin-bottom: 16px;
- border-radius: $card-radius;
-
- .entry {
- background: $card-bg-color;
-
- &:first-child {
- .detailed-status,
- .load-more,
- .status { border-radius: $card-radius $card-radius 0 0 }
- }
- }
-}
-
-.entry.entry-center { border-bottom: 1px solid $border-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/theme.scss b/app/javascript/styles/y-zu-dark/theme/theme.scss
deleted file mode 100644
index 367893682..000000000
--- a/app/javascript/styles/y-zu-dark/theme/theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
-* Mastodon Material 0.2.1
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/variables.scss b/app/javascript/styles/y-zu-dark/theme/variables.scss
deleted file mode 100644
index 0b948881b..000000000
--- a/app/javascript/styles/y-zu-dark/theme/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@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/y-zu-dark/theme/widgets.scss b/app/javascript/styles/y-zu-dark/theme/widgets.scss
deleted file mode 100644
index 4abdfbae9..000000000
--- a/app/javascript/styles/y-zu-dark/theme/widgets.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.hero-widget {
- @include shadow-2dp;
- margin-bottom: 16px;
-
- &__img {
- border-radius: $card-radius $card-radius 0 0;
- background: $card-bg-color;
-
- img { border-radius: $card-radius $card-radius 0 0 }
- }
-
- &__text {
- background: $card-bg-color;
- padding: 16px;
- color: $primary-text-color;
- border-radius: 0 0 $card-radius $card-radius;
- }
-}
-
-.endorsements-widget {
- padding-bottom: 8px;
- margin-bottom: 8px;
-}
-
-.trends-widget h4 { color: $section-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light.scss b/app/javascript/styles/y-zu-light.scss
index c769a7cef..090f0c00e 100644
--- a/app/javascript/styles/y-zu-light.scss
+++ b/app/javascript/styles/y-zu-light.scss
@@ -1,2 +1,2 @@
@import 'application';
-@import 'y-zu-light/loader';
\ No newline at end of file
+@import 'mastodon-material/profiles/y-zu-light/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/black.scss b/app/javascript/styles/y-zu-light/color/black.scss
deleted file mode 100644
index 693caa813..000000000
--- a/app/javascript/styles/y-zu-light/color/black.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #000000;
-$menu-bg-color: #121212;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #121212;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #000000;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #1e1e1e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #121212;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #1e1e1e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #1e1e1e;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #121212;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/mastodon-dark.scss b/app/javascript/styles/y-zu-light/color/mastodon-dark.scss
deleted file mode 100644
index b2e6bf27a..000000000
--- a/app/javascript/styles/y-zu-light/color/mastodon-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9baec8;
-$ui-text-color: #fff;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #606984;
-$tips-text-color: #6d7889;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4ea2df;
-$menu-text-color: #282c37;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #191b22;
-$menu-bg-color: #d9e1e8;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #313543;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #282c37;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #42485a;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #393f4f;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#42485a, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #9baec8;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-bg-hover-color: lighten($bg-color, 14%);
-$icon-bg-active-color: lighten($bg-color, 18%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #fff;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($primary-color, 18%);
-
-// Border color
-$border-color: #393f4f;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
-
-// App bar color
-$top-bar-color: #313543;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: #d9e1e8;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #1f232b;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/mastodon-light.scss b/app/javascript/styles/y-zu-light/color/mastodon-light.scss
deleted file mode 100644
index 7e94b8de7..000000000
--- a/app/javascript/styles/y-zu-light/color/mastodon-light.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #217aba;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #eff3f5;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($bg-color, 6%);
-$menu-bg-active-color: darken($bg-color, 10%);
-$menu-bg-active-hover-color: darken($bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #282c37;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: darken($bg-color, 4%);
-$icon-bg-active-color: darken($bg-color, 8%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: $primary-color;
-$toggle-track-active-color: lighten($primary-color, 26%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: #ccd7e0;
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #ffffff;
-$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: #282c37;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: #e6ebf0;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/plus-classic.scss b/app/javascript/styles/y-zu-light/color/plus-classic.scss
deleted file mode 100644
index d94bbe90f..000000000
--- a/app/javascript/styles/y-zu-light/color/plus-classic.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #db4437;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/v1-dark.scss b/app/javascript/styles/y-zu-light/color/v1-dark.scss
deleted file mode 100644
index d31fbf04f..000000000
--- a/app/javascript/styles/y-zu-light/color/v1-dark.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #303030;
-$menu-bg-color: #424242;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #424242;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #424242;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
-$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
-
-// App bar color
-$top-bar-color: #1565C0;
-$search-bar-color: lighten($bg-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #424242;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/v1-light.scss b/app/javascript/styles/y-zu-light/color/v1-light.scss
deleted file mode 100644
index 2888e81b4..000000000
--- a/app/javascript/styles/y-zu-light/color/v1-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #fafafa;
-$menu-bg-color: #ffffff;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: #ffffff;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: #ffffff;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$top-bar-unread-icon-color: darken($primary-color, 30%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #2196f3;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/v2-dark.scss b/app/javascript/styles/y-zu-light/color/v2-dark.scss
deleted file mode 100644
index 025b238f5..000000000
--- a/app/javascript/styles/y-zu-light/color/v2-dark.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: dark;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #121212;
-$menu-bg-color: #1e1e1e;
-$menu-bg-hover-color: lighten($menu-bg-color, 6%);
-$menu-bg-active-color: lighten($menu-bg-color, 10%);
-$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
-$card-bg-color: #1e1e1e;
-$card-bg-hover-color: lighten($card-bg-color, 6%);
-$list-bg-color: #1e1e1e;
-$list-bg-hover-color: lighten($list-bg-color, 6%);
-$list-bg-active-color: lighten($list-bg-color, 10%);
-$list-bg-inactive-color: lighten($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: darken($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#2e2e2e, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: #ffffff;
-$icon-bg-hover-color: transparentize(#ffffff, 0.8);
-$icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: darken($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-hover-color: lighten($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($bg-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($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-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #1e1e1e;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/v2-light.scss b/app/javascript/styles/y-zu-light/color/v2-light.scss
deleted file mode 100644
index fd9469961..000000000
--- a/app/javascript/styles/y-zu-light/color/v2-light.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@charset "UTF-8";
-
-
-$color-scheme: light;
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-$contained-button-text-color: #ffffff;
-
-// Background-color
-$bg-color: #ffffff;
-$menu-bg-color: $bg-color;
-$menu-bg-hover-color: darken($menu-bg-color, 6%);
-$menu-bg-active-color: darken($menu-bg-color, 10%);
-$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
-$card-bg-color: $bg-color;
-$card-bg-hover-color: darken($card-bg-color, 6%);
-$list-bg-color: $bg-color;
-$list-bg-hover-color: darken($list-bg-color, 6%);
-$list-bg-active-color: darken($list-bg-color, 10%);
-$list-bg-inactive-color: darken($list-bg-color, 10%);
-$text-field-bg-color: $card-bg-color;
-$verified-bg-color: lighten($verified-color, 20%);
-$unread-bg-color: transparentize($primary-color, 0.8);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$chip-selected-text-color: $primary-color;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
-$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
-
-// Relationship tag color
-$relationship-tag-color: transparentize(#e0e0e0, 0.2);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-bg-hover-color: transparentize(#000000, 0.9);
-$icon-bg-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-bg-color: transparentize(#000000, 0.5);
-$media-icon-bg-hover-color: transparentize(#000000, 0.8);
-
-// Control color
-$control-border-color: $icon-color;
-$control-border-active-color: $primary-color;
-$control-border-hover-color: transparentize($control-border-active-color, 0.8);
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: 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: $primary-color;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-hover-color: darken($border-color, 30%);
-$border-active-color: $primary-color;
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($bg-color, 20%);
-$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
-$scroll-bar-thumb-active-color: darken($bg-color, 38%);
-
-// App bar color
-$top-bar-color: $bg-color;
-$search-bar-color: darken($bg-color, 6%);
-$search-bar-focus-color: $bg-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Progress indicator color
-$progress-indicator-color: $primary-color;
-$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
-$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/custom_color.scss b/app/javascript/styles/y-zu-light/custom_color.scss
deleted file mode 100644
index 7ace77932..000000000
--- a/app/javascript/styles/y-zu-light/custom_color.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
-$bg-color: #fafafa;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/custom_config.scss b/app/javascript/styles/y-zu-light/custom_config.scss
deleted file mode 100644
index 84a5a659a..000000000
--- a/app/javascript/styles/y-zu-light/custom_config.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your settings below
-
-@import "color/v2-light.scss";
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/icon_config.scss b/app/javascript/styles/y-zu-light/icon_config.scss
deleted file mode 100644
index 99046e176..000000000
--- a/app/javascript/styles/y-zu-light/icon_config.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
-
-$favorite-icon-color: #ffd600; // Star
-//$favorite-icon-color: #ff4081; // Heart
-//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
-
-
-// Reply icon settings
-$reply-icon: "reply";
-//$reply-icon: "comment"; // blooming
-
-
-// Material Design Icon settings
-// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-//$icon-font-source: google; // Google Fonts
-//$icon-font-source: github; // GitHub
-$icon-font-source: self; // Self-hosting
-
-// Material Icon style settings
-$icon-font-style: filled;
-//$icon-font-style: outlined;
-//$icon-font-style: round;
-//$icon-font-style: sharp;
-//$icon-font-style: two-tone;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/layout/material-v1.scss b/app/javascript/styles/y-zu-light/layout/material-v1.scss
deleted file mode 100644
index 23c9a0616..000000000
--- a/app/javascript/styles/y-zu-light/layout/material-v1.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 2px;
-
-
-// Search bar radius
-$search-bar-radius: 2px;
-
-
-// Bar radius settings
-$bar-radius: 0;
-
-
-// Button radius settings
-$button-radius: 2px;
-
-
-// Card radius settings
-$card-radius: 2px;
-
-
-// Dialog radius settings
-$dialog-radius: 2px;
-
-
-// Menu radius settings
-$menu-radius: 2px;
-
-
-// Media radius settings
-$media-radius: 0;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 0;
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 2px // Material v1 square
-
-
-// Chip settings
-$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px;
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/layout/material-v2.scss b/app/javascript/styles/y-zu-light/layout/material-v2.scss
deleted file mode 100644
index 5700a99c8..000000000
--- a/app/javascript/styles/y-zu-light/layout/material-v2.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 8px;
-//$nav-bar-radius: 28px; // full radius
-
-
-// Search bar radius
-$search-bar-radius: 8px;
-//$search-bar-radius: 21px; // full rounded
-
-
-// Bar radius settings
-$bar-radius: 0;
-//$bar-radius: 8px;
-
-
-// Button radius settings
-$button-radius: 8px;
-
-
-// Card radius settings
-$card-radius: 8px;
-
-
-// Dialog radius settings
-$dialog-radius: 8px;
-
-
-// Menu radius settings
-$menu-radius: 8px;
-
-
-// Media radius settings
-$media-radius: 0;
-//$media-radius: 2px;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 8px; // corner rounded
-//$nav-drawer-item-radius: 32px; // full rounded
-//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
-
-
-// Avater cropping settings
-$avater-radius: 50%; // Rounded cropping
-//$avater-radius: 8px // Material v2 square
-
-
-// Chip settings
-$outlined-chip: true; // Material v2 styled outlined chip
-//$outlined-chip: false; // Material v1 styled contained chip
-
-
-// Button shadow
-$button-shadow: false; // Material v2 styled colored button without shadow
-//$button-shadow: true; // Material v1 styled colored button with shadow
-
-
-// Floating Action Button size
-$fab-size: 56px; // Regular
-//$fab-size: 40px; // Mini
-
-
-// Text area border
-$text-area-border: false;
-//$text-area-border: underlined;
-//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/loader.scss b/app/javascript/styles/y-zu-light/loader.scss
deleted file mode 100644
index f51dde3e4..000000000
--- a/app/javascript/styles/y-zu-light/loader.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'theme/theme';
-@import 'theme/material-icons';
-
-// Plugins
-@import 'plugins/astarte';
-//@import 'plugins/cards';
-@import 'plugins/dense';
-//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/plugins/astarte.scss b/app/javascript/styles/y-zu-light/plugins/astarte.scss
deleted file mode 100644
index 8c2e534bb..000000000
--- a/app/javascript/styles/y-zu-light/plugins/astarte.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.announcements {
- li {
- padding: 8px 16px;
- background: $card-bg-color;
- border-radius: $card-radius;
- border: 1px solid $border-color;
- }
-
- &__icon {
- margin: 0;
- right: 16px;
- height: 20px;
-
- .icon-button {
- @include icon-button;
-
- &:hover { background: transparent }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/plugins/cards.scss b/app/javascript/styles/y-zu-light/plugins/cards.scss
deleted file mode 100644
index d9b3906a5..000000000
--- a/app/javascript/styles/y-zu-light/plugins/cards.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@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: $bg-color }
-}
-
-.status {
- border-bottom: 0;
- border-radius: $card-radius;
- background: $card-bg-color;
-
- &__prepend { padding: 8px 8px 2px 0 }
-}
-
-.account { border-bottom: 0 !important }
-
-.status__wrapper.status__wrapper,
-.notification.notification {
- @include shadow-1dp;
- margin: 8px 2px;
- border-radius: $card-radius;
- background: $card-bg-color;
-}
-
-.notification .status__wrapper.status__wrapper { box-shadow: none !important }
-
-.notification__filter-bar {
- @include non-overflow-shadow-4dp;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/plugins/dense.scss b/app/javascript/styles/y-zu-light/plugins/dense.scss
deleted file mode 100644
index 413336d04..000000000
--- a/app/javascript/styles/y-zu-light/plugins/dense.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.drawer {
- &__header { height: 48px }
-
- &__tab { margin: 6px auto 6px }
-}
-
-.column { margin: 10px 5px }
-
-.column-header {
- height: 48px;
-
- > button { padding: 12px 16px }
-
- &__buttons { height: 48px }
-
- &__button { margin: 6px }
-}
-
-.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 }
-
- &__buttons-wrapper {
- .icon-button,
- .text-icon-button { padding: 4px }
- }
- }
-}
-
-.status {
- padding: 8px 8px 4px 66px;
-
- &__expand { width: 66px }
-
- &__info { padding-right: 0 }
-
- &__avatar {
- left: 8px;
- top: 10px;
- }
-
- &__content { padding-top: 2px }
-
- &__action-bar-button {
- margin: 0 4px;
-
- &.icon-button { padding: 4px }
- }
-
- &__action-bar-dropdown {
- width: 28px !important;
- height: 28px !important;
- margin: 0 4px;
-
- .icon-button { padding: 4px }
- }
-}
-
-.detailed-status {
- padding: 14px;
-
- &__meta { margin-top: 14px }
-
- &__action-bar { padding: 10px 0 }
-}
-
-.reply-indicator { padding: 8px }
-
-.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/plugins/plus.scss b/app/javascript/styles/y-zu-light/plugins/plus.scss
deleted file mode 100644
index e356e937b..000000000
--- a/app/javascript/styles/y-zu-light/plugins/plus.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@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 }
-}
-
-// exception
-.media-modal__overlay .picture-in-picture__footer .icon-button,
-.status__action-bar-button.icon-button--with-counter { background: transparent }
-
-// favorite icon
-.star-icon.active,
-.star-icon.icon-button.active.activate,
-.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
-
-.notification__favourite-icon-wrapper {
- left: -34px;
-
- .star-icon {
- border-radius: 50%;
- width: 28px;
- height: 28px;
- vertical-align: baseline;
- font-size: 18px;
-
- &.fa-fw::before { vertical-align: middle }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/_functions.scss b/app/javascript/styles/y-zu-light/theme/_functions.scss
deleted file mode 100644
index 0374231ed..000000000
--- a/app/javascript/styles/y-zu-light/theme/_functions.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@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/y-zu-light/theme/_mixins.scss b/app/javascript/styles/y-zu-light/theme/_mixins.scss
deleted file mode 100644
index fcd556f2b..000000000
--- a/app/javascript/styles/y-zu-light/theme/_mixins.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-@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 shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
-@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
-@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
-@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
-@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
-@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
-@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
-@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
-
-@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
-
-@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
-
-@mixin search-bar-hover {
- @if $search-bar-hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- }
-}
-
-@mixin outlined-chip {
- @if $outlined-chip {
- .reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $outlined-chip-selected-border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
- }
- }
-}
-
-@mixin button-shadow {
- @if $button-shadow {
- .button,
- .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
- }
-}
-
-@mixin text-area-border {
- @if $text-area-border == underlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius $card-radius 0 0;
- border-bottom: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
- }
- }
-
- @if $text-area-border == outlined {
- .compose-form .autosuggest-textarea__textarea {
- border-radius: $card-radius;
- border: 1px solid $border-color;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus {
- border: 2px solid $border-active-color;
- padding: 7px 41px 7px 15px;
- }
- }
- }
-}
-
-@mixin icon-button {
- width: 20px !important;
- height: 20px !important;
- font-size: 20px !important;
-}
-
-// check background-image value
-@mixin bg-image {
- @if $bg-image == none {
- } @else { background-image: url($bg-image) }
-}
-
-
-@mixin icon-font-style {
- @if $icon-font-style == filled { font-family: "Material Icons" }
- @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
- @if $icon-font-style == round { font-family: "Material Icons Round" }
- @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
- @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
-}
-
-@mixin icon-font {
- @if $icon-font-source == github {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-
- @if $icon-font-source == google {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons Round"),
- url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
- }
- }
- }
-
- @if $icon-font-source == self {
- @if $icon-font-style == filled {
- @font-face {
- font-family: "Material Icons";
- src: local("Material Icons"),
- url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
- }
- }
- @if $icon-font-style == outlined {
- @font-face {
- font-family: "Material Icons Outlined";
- src: local("Material Icons Outlined"),
- url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == round {
- @font-face {
- font-family: "Material Icons Round";
- src: local("Material Icons"),
- url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == sharp {
- @font-face {
- font-family: "Material Icons Sharp";
- src: local("Material Icons Sharp"),
- url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
- }
- }
- @if $icon-font-style == two-tone {
- @font-face {
- font-family: "Material Icons Two Tone";
- src: local("Material Icons Two Tone"),
- url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
- }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/account.scss b/app/javascript/styles/y-zu-light/theme/account.scss
deleted file mode 100644
index 551b4f4a8..000000000
--- a/app/javascript/styles/y-zu-light/theme/account.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.account {
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .account__display-name,
- .account__display-name strong { color: $primary-text-color }
-
- &__avatar {
- border-radius: $avater-radius;
- width: 40px;
- height: 40px;
-
- &-overlay {
- &-base {
- border-radius: $avater-radius;
- width: 44px;
- height: 44px;
- background-size: 44px;
- }
-
- &-overlay { border-radius: $avater-radius }
- }
- }
-
- &__avatar-wrapper {
- margin-left: 0;
- margin-right: 16px;
- }
-
- &__header {
- &__bar {
- background: $card-bg-color;
- padding: 8px;
- border-bottom: none;
-
- .avatar .account__avatar { border: none }
- }
-
- &__tabs {
- padding: 8px;
-
- &__name {
- padding: 8px;
-
- h1 {
- color: $primary-text-color;
-
- small { color: $secondary-text-color }
- }
- }
-
- &__buttons {
- .icon-button {
- @include icon-button;
- border: none;
- border-radius: 50%;
- padding: 8px;
- margin-left: 8px;
- }
- }
- }
-
- &__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-bg-color;
-
- a,
- &__mark { color: $primary-text-color }
- }
-
- dl {
- border-bottom: 1px solid $border-color;
-
- &:first-child .verified { border-radius: 0 }
-
- &:last-child { border-bottom: 0 }
- }
-
- dt {
- color: $primary-text-color;
- background: $list-bg-inactive-color;
- }
-
- dd { color: $primary-text-color }
- }
- }
- }
-
- &__account-note {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
-
- label {
- color: $ui-text-color;
- margin-bottom: 8px;
- }
-
- textarea {
- color: $primary-text-color;
- padding: 8px 16px;
- border-radius: 0;
-
- &:focus { background: transparent }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- &__content { color: $secondary-text-color }
- }
-
- &__section-headline {
- background: $text-tab-bg-color;
- border-bottom: 1px solid $border-color;
-
- a {
- padding: 16px 0;
- color: $text-tab-indicator-color;
-
- &.active {
- color: $text-tab-indicator-active-color;
- border-bottom: 4px solid $text-tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $text-tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $text-tab-indicator-bg-hover-color }
- }
- }
-
- &__relationship {
- padding: 0;
- height: auto;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-}
-
-.account-role {
- padding: 4px 8px;
- border-radius: 17px;
- color: $ui-text-color;
- background-color: $contained-chip-color;
-}
-
-.accounts-table__count {
- color: $ui-text-color;
-
- small { color: $secondary-text-color }
-}
-
-.account-gallery {
- &__item { border-radius: 0 }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/base_config.scss b/app/javascript/styles/y-zu-light/theme/base_config.scss
deleted file mode 100644
index f36a139ba..000000000
--- a/app/javascript/styles/y-zu-light/theme/base_config.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@charset "UTF-8";
-
-
-// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
-
-
-// Color scheme
-@import '../color/v1-light';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'color/v2-light';
-
-
-// Layout profile
-@import '../layout/material-v1';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'layout/material-v2';
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-$search-bar-hover: false;
-
-
-// Status font size in timeline
-$status-font-size: 15px; // mastodon default
-//$status-font-size: 16px; // compatible with material design
-
-
-// Name font size in timeline status
-$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
-
-
-// Background image
-// If you want to use the local image, please put it in "../"
-$bg-image: none;
-//$bg-image: "./image.png";
-//$bg-image: "https://example.com/img/image.png";
-
-
-// Columns transparency settings
-$bar-transparency: 1.0; // opacity
-//$bar-transparency: 0.8; // semi-transparent
-
-$column-transparency: 1.0; // opacity
-//$column-transparency: 0.8; // semi-transparent
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/basics.scss b/app/javascript/styles/y-zu-light/theme/basics.scss
deleted file mode 100644
index bb8f68bf0..000000000
--- a/app/javascript/styles/y-zu-light/theme/basics.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-body,
-body.embed { background: $bg-color }
-
-.focusable:focus { background: transparent }
-
-// Chrome & Safari scroll bar
-::-webkit-scrollbar-thumb {
- background: $scroll-bar-thumb-color;
-
- &:hover { background: $scroll-bar-thumb-hover-color }
- &:active { background: $scroll-bar-thumb-active-color }
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
- background: transparent !important;
-}
-
-// Firefox scroll bar
-html { scrollbar-color: $scroll-bar-thumb-color transparent }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/button.scss b/app/javascript/styles/y-zu-light/theme/button.scss
deleted file mode 100644
index 5f909d843..000000000
--- a/app/javascript/styles/y-zu-light/theme/button.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include button-shadow;
-
-.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;
-
- &.active { color: $icon-button-active-color }
-
- &:hover {
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
- }
-
- &.overlayed {
- @include icon-button;
- border-radius: 50%;
- background: $media-icon-bg-color;
- color: $media-icon-color;
- padding: 4px;
- line-height: 20px !important;
-
- &:hover {
- background: $media-icon-bg-color;
- color: $media-icon-hover-color;
- }
- }
-
- &__counter {
- width: 16px;
- margin-left: 8px;
- }
-
- &:hover {
- @include material-transition;
- color: $icon-button-hover-color;
- background-color: $icon-bg-hover-color;
- }
-
- &:focus { background-color: transparent }
-}
-
-// Checkbox with label
-label.icon-button {
- &.active {
- color: $ui-text-color;
- background-color: transparent;
- }
-
- &:hover {
- @include material-transition;
- background-color: transparent;
- }
-}
-
-.text-icon-button {
- color: $icon-button-color;
- border-radius: 50%;
- font-size: 14px;
-
- &.active {
- background-color: $icon-bg-hover-color;
- color: $icon-button-active-color;
- }
-
- &:hover {
- background-color: $icon-bg-hover-color;
- color: $icon-button-hover-color;
- }
-}
-
-.button {
- background-color: $contained-button-color;
- border-radius: $button-radius;
-
- &:active,
- &:focus {
- background-color: $contained-button-color;
- border-radius: $button-radius;
- }
-
- &:hover {
- @include shadow-2dp;
- background-color: $contained-button-hover-color;
- }
-
- &.logo-button {
- background: $contained-button-color;
- margin: 2px;
-
- &:hover { background: $contained-button-hover-color }
-
- .button--destructive:hover { background: $contained-button-hover-color }
- }
-
- &.button--block { margin: 8px 0 }
-
- &.button-secondary {
- color: $text-button-color;
- border: none;
- box-shadow: none;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
- }
-
- &.confirmation-modal__cancel-button {
- box-shadow: none;
- background-color: transparent;
- margin: 0 8px;
- color: $text-button-color;
-
- &:hover { background: $text-button-hover-color }
-
- &:focus { background: $text-button-focus-color }
- }
-}
-
-.spoiler-button__overlay__label {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- color: $media-icon-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/columns.scss b/app/javascript/styles/y-zu-light/theme/columns.scss
deleted file mode 100644
index 77a5c777a..000000000
--- a/app/javascript/styles/y-zu-light/theme/columns.scss
+++ /dev/null
@@ -1,511 +0,0 @@
-@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-bg-color;
- opacity: $column-transparency;
- }
-
- &:last-child { box-shadow: none }
-}
-
-.column-header {
- background: $top-bar-color;
- border-radius: $bar-radius;
- height: 56px;
-
- > button {
- padding: 16px;
- color: $top-bar-text-color;
- }
-
- &>.column-header__back-button { color: $top-bar-icon-color }
-
- &.active {
- .column-header__icon {
- color: $top-bar-unread-icon-color;
- text-shadow: none;
- }
- }
-
- &__icon {
- margin-right: 16px;
- color: $top-bar-icon-color;
- font-size: 20px;
- }
-
- &__buttons { height: 56px }
-
- &__button {
- @include icon-button;
- background: $top-bar-color;
- color: $top-bar-icon-color;
- padding: 8px;
- margin: 10px;
- border-radius: 50%;
- box-sizing: content-box;
-
- &.active {
- color: $top-bar-icon-active-color;
- background: $icon-bg-active-color;
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &:hover {
- color: $top-bar-icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
-
- &__setting-btn {
- color: $icon-button-color;
- padding: 8px 0;
-
- &:hover {
- color: $icon-button-hover-color;
- text-decoration: none;
- }
-
- .fa { font-size: 20px }
-
- span { vertical-align: middle }
- }
-
- &__setting-arrows {
- font-size: 16px;
- border-bottom: 8px;
-
- .column-header__setting-btn {
- padding: 8px;
- border-radius: 50%;
-
- &:last-child { padding-right: 8px }
- }
- }
-
- &__wrapper {
- @include shadow-4dp;
- border-radius: $bar-radius;
- opacity: $bar-transparency;
-
- .announcements { border-top: 1px solid $border-color }
-
- &.active {
- @include shadow-4dp;
-
- &::before { background: transparent }
- }
- }
-
- &__collapsible {
- color: $ui-text-color;
- background: $card-bg-color;
- border-top: 1px solid $border-color;
-
- &-inner {
- background: $card-bg-color;
- padding: 16px;
- }
-
- &.collapsed { border-top: none }
- }
-
- &__back-button {
- background: $top-bar-color;
- color: $top-bar-icon-color;
- margin: 8px 10px;
- padding: 10px;
- font-size: 20px;
-
- span { display: none }
- }
-}
-
-.column-subheading {
- color: $section-text-color;
- background: $bg-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
-}
-
-.column-link {
- color: $ui-text-color;
- background: $bg-color;
- padding: 16px;
- border-radius: $nav-drawer-item-radius;
-
- &:hover { background: $list-bg-hover-color }
-
- &:active,
- &:focus { background: $list-bg-active-color }
-
- &__icon {
- margin-right: 32px;
- font-size: 20px;
- }
-
- &--transparent {
- &.active {
- color: $ui-text-color;
- background: $menu-bg-active-color;
-
- &:hover { background: $menu-bg-active-hover-color }
-
- .fa { color: $icon-color }
- }
-
- &:hover {
- color: $ui-text-color;
-
- .fa { color: $icon-color }
- }
- }
-
- .fa { color: $icon-color }
-}
-
-.column-settings {
- &__section {
- color: $section-text-color;
- margin-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
-
- &--slim-button { top: -54px }
-}
-
-.column-inline-form {
- padding: 16px 0 16px 16px;
- background: $card-bg-color;
-
- .icon-button { margin: 0 16px }
-}
-
-.columns-area {
- @include bg-image;
- background-size: contain;
-}
-
-.setting-text {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border-radius: $bar-radius;
-
- &::placeholder { color: $tips-text-color }
-}
-
-.empty-column-indicator {
- color: $secondary-text-color;
- background: $card-bg-color;
- font-size: 16px;
- contain: initial; // padding fix
-}
-
-.conversation {
- border-bottom: 1px solid $border-color;
- padding: 12px;
- background: $list-bg-inactive-color;
-
- &--unread {
- background: $list-bg-color;
-
- .conversation__content__relative-time { color: $info-text-color }
- }
-
- &__unread { background: $primary-color }
-
- &__avatar { padding: 0 16px 0 0 }
-
- &__content {
- padding: 0;
-
- &__relative-time {
- font-size: 14px;
- color: $info-text-color;
- }
-
- &__names,
- &__names a {
- color: $primary-text-color;
- font-size: 16px;
- }
- }
-}
-
-// read status in notification column
-.muted {
- .status {
- &__content {
- color: $read-primary-text-color;
-
- 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-bg-hover-color }
-}
-
-.getting-started {
- background: $bg-color;
- color: $ui-text-color;
- opacity: $column-transparency;
-
- &__wrapper {
- background: $bg-color;
- height: auto !important;
- padding-bottom: 8px;
- border-bottom: 1px solid $border-color;
- }
-
- &__footer {
- padding: 16px;
-
- p {
- color: $secondary-text-color;
- font-size: 12px;
- margin-bottom: 16px;
- }
-
- a { color: $ui-text-color }
-
- p a { color: $link-text-color }
- }
-
- &__trends {
- background: $bg-color;
- margin-bottom: 0;
- opacity: $column-transparency;
-
- h4 {
- color: $section-text-color;
- padding: 12px 16px;
- margin-top: 8px;
- border-top: 1px solid $border-color;
- border-bottom: none;
- }
- }
-}
-
-.trends {
- &__header {
- color: $section-text-color;
- background: transparent;
- border-bottom: 1px solid $border-color;
- padding: 16px;
-
- .fa { margin-right: 8px }
- }
-
- &__item {
- padding: 16px;
- border-bottom: none;
-
- &__name {
- color: $secondary-text-color;
- font-size: 12px;
-
- a { color: $primary-text-color }
- }
-
- &__current {
- padding-right: 16px;
- margin-left: 4px;
- color: $secondary-text-color;
- }
-
- &__sparkline path {
- stroke: $primary-color;
- fill: $primary-color;
- fill-opacity: 0.5;
- }
- }
-}
-
-.setting-toggle {
- &__label {
- color: $ui-text-color;
- margin: 8px 8px 8px 14px;
- }
-}
-
-.announcements {
- background: $card-bg-color;
- padding: 0 8px;
-
- &__container { color: $primary-text-color }
-
- &__item {
- padding: 16px;
- font-size: 16px;
-
- &__unread { background: $badge-color }
- }
-
- &__pagination {
- color: $ui-text-color;
- padding: 16px;
- bottom: 0;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- margin: 0 4px;
- line-height: normal !important;
- box-sizing: content-box;
- }
-
- span { vertical-align: super }
- }
-}
-
-.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 }
-
-@include outlined-chip;
-
-.reactions-bar {
- margin-top: 16px;
- width: calc(100% - 72px);
-
- .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: $chip-selected-text-color }
-
- &:hover { background-color: $contained-chip-selected-color }
- }
-
- &__emoji {
- width: 24px;
- height: 24px;
- margin: 4px 0 4px 2px;
- }
-
- &__count {
- font-size: 16px;
- margin: 0 12px 0 8px;
- color: $secondary-text-color;
- }
-
- &:hover { background: $contained-chip-hover-color }
- }
-}
-
-.notification {
- &__filter-bar {
- background: $tab-bg-color;
- border-bottom: 1px solid $border-color;
- z-index: 1;
- opacity: $bar-transparency;
-
- button {
- background: $tab-bg-color;
- color: $tab-indicator-color;
- font-size: 16px;
-
- span { font-size: 14px }
-
- &.active {
- color: $tab-indicator-active-color;
- border-bottom: 4px solid $tab-indicator-active-color;
-
- &::before,
- &:after { border: none }
-
- &:focus { background: $tab-indicator-bg-focus-color }
- }
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
- }
-
- &__message {
- color: $secondary-text-color;
- margin: 0 16px 0 70px;
- font-size: 16px;
- }
-
- &__display-name:hover { color: inherit }
-}
-
-.notification-favourite .status.status-direct {
- .icon-button.disabled { color: $disabled-icon-color }
-}
-
-.relationship-tag {
- color: $ui-text-color;
- background-color: $relationship-tag-color;
- font-size: 12px;
- border-radius: 17px;
- padding: 4px 8px;
- opacity: 1;
-}
-
-.attachment-list__list a { color: $secondary-text-color }
-
-// unread notification
-.notification.unread:before, .status__wrapper.unread:before { border-left: none }
-
-.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/components.scss b/app/javascript/styles/y-zu-light/theme/components.scss
deleted file mode 100644
index aa64aabc5..000000000
--- a/app/javascript/styles/y-zu-light/theme/components.scss
+++ /dev/null
@@ -1,647 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-@include text-area-border;
-
-.modal-root {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-
- &__overlay { background-color: rgba(0,0,0,.32) !important }
-
- &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
-}
-
-.drawer {
- &__header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- justify-content: space-around;
- opacity: $bar-transparency;
-
- a { transition: none }
-
- a:hover {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- }
- }
-
- &__tab {
- color: $top-bar-icon-color;
- font-size: 20px;
- margin: 10px auto 10px;
- padding: 8px;
- flex: none;
- height: 20px;
- width: 20px;
- border-bottom: none;
- text-align: justify;
-
- &:hover { color: $top-bar-icon-hover-color }
- }
-
- &__pager {
- @include shadow-1dp;
- border-radius: $card-radius;
- }
-
- &__inner {
- background: $card-bg-color;
- opacity: $column-transparency;
-
- &.darker {
- background: $card-bg-color;
- position: inherit;
- }
-
- &__mastodon { background: $card-bg-color }
- }
-}
-
-.search {
- &__input {
- background: $search-bar-color;
- color: $tips-text-color;
- border-radius: $search-bar-radius;
- padding: 12px 12px 12px 40px;
- opacity: $bar-transparency;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
-
- &:hover { @include search-bar-hover }
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__icon {
- .fa {
- color: $icon-color;
- font-size: 20px;
- top: 12px;
- right: unset;
- left: 12px;
- height: 6px;
- transition: none;
-
- &.active { opacity: 1 }
-
- &-search {
- transform: none;
- opacity: 1;
- }
- &-times-circle.active {
- right: 16px;
- left: unset;
- transform: none;
- }
- }
- }
-}
-
-.search-popout {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- border-radius: 0px $bar-radius;
- border-top: 1px solid $border-color;
- margin-top: 0;
- color: $tips-text-color;
-
- h4 {
- color: $secondary-text-color;
- }
-
- em {
- color: $search-bar-text-color;
- }
-}
-
-.search-results {
- &__header {
- color: $secondary-text-color;
- background-color: $card-bg-color;
- padding: 16px;
-
- .fa { margin-right: 16px }
- }
-
- &__section {
- h5 {
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- padding: 16px;
- color: $section-text-color;
-
- .fa { margin-right: 8px }
- }
- }
-}
-
-.navigation-bar {
- color: $secondary-text-color;
- padding: 14px;
-
- strong {
- color: $ui-text-color;
- }
-
- .navigation-bar__actions .compose__action-bar .icon-button {
- width: 36px !important;
- height: 36px !important;
- padding: 8px;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
-}
-
-.navigation-panel hr {
- border-top: 1px solid $border-color;
- margin: 8px 0;
-}
-
-.flex-spacer { margin: 8px 0 }
-
-.dropdown-menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- padding: 8px 0;
- border-radius: $menu-radius;
-
- &__arrow { visibility: hidden }
-
- &__item a {
- font-size: 14px;
- padding: 8px 16px;
- background: $menu-bg-color;
- color: $menu-text-color;
-
- &:hover, &:active {
- background: $menu-bg-hover-color;
- color: $menu-text-color;
- }
- }
-
- &__separator {
- margin: 8px 0;
- border-bottom: 1px solid $border-color;
- }
-}
-
-.compose-form {
- .autosuggest-textarea {
- &__textarea {
- background: $text-field-bg-color;
- color: $ui-text-color;
- padding: 8px 42px 8px 16px;
-
- &::placeholder { color: $tips-text-color }
- }
-
- &__suggestions {
- @include shadow-1dp;
- background: $menu-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
- font-size: 16px;
- padding: 8px 0;
-
- &__item {
- padding: 8px;
- border-radius: 0;
-
- &:hover { background: $menu-bg-hover-color }
-
- &.selected,
- &:focus,
- &:active { background: $menu-bg-active-color }
- }
- }
- }
-
- .spoiler-input {
- &.spoiler-input--visible { margin-bottom: 16px }
-
- &__input {
- color: $ui-text-color;
- background: $card-bg-color;
- border-bottom: 1px solid $border-color;
- border-radius: 0;
-
- &:hover { border-color: $border-hover-color }
-
- &:active,
- &:focus { border-bottom: 2px solid $border-active-color }
-
- &::placeholder { color: $tips-text-color }
- }
- }
-
- .compose-form {
- &__warning {
- color: $secondary-text-color;
- background: $card-bg-color;
- padding: 16px;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- box-shadow: none;
-
- a { color: $link-text-color }
- }
-
- &__modifiers {
- background: $card-bg-color;
- color: $tips-text-color;
-
- .compose-form {
- &__upload-thumbnail { border-radius: 0 }
-
- &__upload__actions {
- @include material-transition;
-
- .icon-button {
- color: $media-icon-color;
- font-size: 16px;
-
- &:hover { background-color: transparent }
- }
- }
- }
- }
-
- &__buttons-wrapper {
- background: $card-bg-color;
- color: $tips-text-color;
- padding: 8px;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- }
-
- .text-icon-button {
- width: 20px !important;
- height: 20px !important;
- padding: 8px;
- line-height: 20px !important;
- }
- }
-
- &__poll-wrapper {
- border-top: 1px solid $border-color;
-
- ul { padding: 16px 12px 16px 0 }
-
- select {
- color: $ui-text-color;
- background-color: $bg-color;
- border: 0;
-
- &:focus { border-color: $border-hover-color }
- }
-
- .button.button-secondary {
- box-shadow: none;
- color: $text-button-color;
-
- &:hover { background-color: $text-button-hover-color }
-
- &:active,
- &:focus { background-color: $text-button-focus-color }
- }
-
- .poll__footer { border-top: none }
- }
-
- &__publish .compose-form__publish-button-wrapper { box-shadow: none }
- }
-}
-
-.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
-
-
-.poll {
- .button { margin-right: 8px }
-
- li { margin-bottom: 0 }
-
- &__input {
- border: none;
- width: 20px;
- height: 20px;
- flex: 0 0 20px;
- padding: 18px;
- margin: 0 2px;
- background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
-
- &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
-
- &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
-
- &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-
- &.checkbox {
- border-radius: 2px;
- border: 2px solid $control-border-color;
- padding: 8px;
- margin: 8px 10px;
- background: none;
- }
- }
-
- &__text input[type=text] {
- color: $ui-text-color;
- background: $text-field-bg-color;
- border: 1px solid $border-color;
- padding: 8px 12px;
-
- &:focus { border-color: $border-hover-color }
- }
-
- &__option {
- padding: 16px 0 8px;
-
- input[type=text] {
- color: $primary-text-color;
- background: $text-field-bg-color;
- border: none;
- border-radius: 2px;
- padding: 8px 16px;
- }
-
- &__text { line-height: 34px }
- }
-
- &__chart {
- border-radius: 0;
- background: $progress-indicator-track-color;
-
- &.leading { background: $progress-indicator-color }
- }
-
- &__footer {
- padding-top: 8px;
- padding-bottom: 0;
- color: $ui-text-color;
- }
-
- &__link { color: $ui-text-color }
-}
-
-.privacy-dropdown {
- &.active .privacy-dropdown__value.active {
- background: $icon-bg-hover-color;
- border-radius: 50%;
- box-shadow: none;
-
- .icon-button { color: $icon-button-active-color }
- }
-
- &__dropdown {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $dialog-radius;
- }
-
- &__option {
- color: $icon-color;
- padding: 8px 16px;
-
- &__icon {
- font-size: 20px;
- margin-right: 12px;
- }
-
- &__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &.active {
- background: $menu-bg-active-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
-
- &:hover {
- background: $menu-bg-active-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-
- &:hover {
- background: $menu-bg-hover-color;
- color: $icon-hover-color;
-
- .privacy-dropdown__option__content {
- color: $secondary-text-color;
-
- strong { color: $ui-text-color }
- }
- }
- }
-}
-
-.character-counter {
- color: $secondary-text-color;
-}
-
-.reply-indicator {
- box-shadow: none;
- border: 1px solid $border-color;
- border-radius: $card-radius;
- background: $card-bg-color;
- padding: 16px;
-
- &__header { margin-bottom: 4px }
-
- &__display {
- &-name {
- color: $primary-text-color;
- padding-right: 24px;
- }
-
- &-avatar { margin-right: 8px }
- }
-
- &__content {
- color: $primary-text-color;
-
- p { margin-bottom: 16px }
- }
-}
-
-.attachment-list {
- &__list a { color: $secondary-text-color }
-
- &.compact .fa { color: $icon-color }
-}
-
-.block-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.load-more {
- color: $ui-text-color;
-
- &:hover { background: transparent }
-}
-
-.autosuggest-hashtag {
- &__name { color: $menu-text-color }
-}
-
-.filter-form {
- background: $bg-color;
- color: $ui-text-color;
-
- &__column { padding: 8px 16px }
-}
-
-.directory {
- &__card {
- @include shadow-1dp;
- margin: 8px 4px;
- border-radius: $card-radius;
-
- &__img { border-radius: $card-radius $card-radius 0 0 }
-
- &__bar {
- background: $card-bg-color;
- padding: 8px 16px;
-
- .display-name {
- margin-left: 16px;
-
- strong {
- font-size: 16px;
- color: $primary-text-color;
- }
-
- span { color: $secondary-text-color }
- }
- }
-
- &__extra {
- background: $card-bg-color;
- border-radius: 0 0 $card-radius $card-radius;
-
- .account__header__content {
- padding: 8px 16px;
- border-bottom: 1px solid $border-color;
- }
-
- .accounts-table__count { padding: 16px 0 }
- }
- }
-}
-
-.mute-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__container { padding: 24px }
-
- &__explanation { margin-top: 16px }
-
- &__action-bar {
- background: $card-bg-color;
- padding: 8px;
- justify-content: flex-end;
- }
-
- &__cancel-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background-color: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-
- .setting-toggle {
- margin-top: 16px;
- margin-bottom: 16px;
-
- &__label {
- color: $ui-text-color;
- margin: 0 0 0 12px;
- }
- }
-}
-
-.upload-progress {
- color: $ui-text-color;
-
- &__backdrop {
- border-radius: 0;
- background: $progress-indicator-track-color;
- margin-top: 6px;
- }
-
- &__tracker {
- border-radius: 0;
- background: $progress-indicator-color;
- }
-}
-
-.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/containers.scss b/app/javascript/styles/y-zu-light/theme/containers.scss
deleted file mode 100644
index 09af289b0..000000000
--- a/app/javascript/styles/y-zu-light/theme/containers.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.public-layout {
- .header {
- @include shadow-4dp;
- background: $top-bar-color;
- border-radius: $nav-bar-radius;
- margin: 16px 0;
-
- .brand:hover { background: $tab-indicator-bg-hover-color }
-
- .nav-link,
- .nav-link.optional {
- color: $top-bar-text-color;
-
- &:hover {
- background: $tab-indicator-bg-hover-color;
- text-decoration: none;
- }
- }
-
- .nav-button {
- background: transparent;
- margin: 0;
- border-radius: 0;
-
- &:hover { background: $tab-indicator-bg-hover-color }
- }
-
- .detailed-status__meta { margin-top: 16px }
- }
-
- .detailed-status { padding: 16px }
-
- .footer {
- padding-top: 16px;
- padding-bottom: 64px;
- color: $ui-text-color;
-
- h4 { color: $ui-text-color }
-
- ul a { color: $secondary-text-color }
-
- .grid .column-2 h4 a { color: $ui-text-color }
-
- .brand {
- svg { fill: $icon-color }
-
- &:hover svg { fill: $icon-hover-color }
- }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/control.scss b/app/javascript/styles/y-zu-light/theme/control.scss
deleted file mode 100644
index a205a4cb7..000000000
--- a/app/javascript/styles/y-zu-light/theme/control.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@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/y-zu-light/theme/emoji-picker.scss b/app/javascript/styles/y-zu-light/theme/emoji-picker.scss
deleted file mode 100644
index 91663fb93..000000000
--- a/app/javascript/styles/y-zu-light/theme/emoji-picker.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@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-bg-color;
- border-radius: $menu-radius;
- }
-
- &__modifiers__menu {
- @include shadow-8dp;
- background: $menu-bg-color;
- border-radius: $menu-radius;
-
- button {
- padding: 8px;
- }
- }
-}
-
-.emoji-mart {
- width: 388px !important;
- font-size: 14px;
- color: $menu-text-color;
-
- &-bar {
- border: 0 solid $border-color;
-
- &:first-child {
- background: $menu-bg-color;
- }
- }
-
- &-anchor {
- color: $text-tab-indicator-color;
- padding: 10px 4px;
-
- &-bar { background-color: $icon-tab-indicator-active-color }
-
- &-selected { color: $icon-tab-indicator-hover-color }
-
- &:hover { color: $icon-tab-indicator-hover-color }
- }
-
- &-search {
- background: $menu-bg-color;
-
- input {
- outline: none;
- padding: 8px;
- background: $search-bar-color;
- color: $ui-text-color;
- border: 0;
- border-radius: $search-bar-radius;
-
- &:focus {
- @include shadow-2dp;
- background: $search-bar-focus-color;
- color: $search-bar-text-color;
- }
- }
- }
-
- &-scroll {
- padding: 0 8px 8px;
- background: $menu-bg-color;
- }
-
- &-category {
- &-label span {
- padding: 4px 6px;
- background: $menu-bg-color;
- }
-
- .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
- }
-
- &-no-results { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/icons.scss b/app/javascript/styles/y-zu-light/theme/icons.scss
deleted file mode 100644
index 987767544..000000000
--- a/app/javascript/styles/y-zu-light/theme/icons.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@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.fa-lock { text-transform: none }
-
-.icon-with-badge__badge {
- background: $badge-color;
- border: none;
- padding: 2px 6px;
- border-radius: 12px;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/material-icons.scss b/app/javascript/styles/y-zu-light/theme/material-icons.scss
deleted file mode 100644
index dd01ce3d6..000000000
--- a/app/javascript/styles/y-zu-light/theme/material-icons.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config', '../icon_config';
-@import '../custom_color', '../custom_layout';
-@import 'functions';
-@import 'mixins';
-
-
-@include icon-font;
-
-.fa-fw {
- width: 20px;
- height: 20px;
- font-size: 20px;
-}
-
-.fa {
- &.fa-bars,
- &.fa-navicon,
- &.fa-reorder,
- &.fa-globe,
- &.fa-cog,
- &.fa-cogs,
- &.fa-gears,
- &.fa-sign-out,
- &.fa-search,
- &.fa-times,
- &.fa-times-circle,
- &.fa-close,
- &.fa-remove,
- &.fa-chevron-down,
- &.fa-ellipsis-v,
- &.fa-paperclip,
- &.fa-tasks,
- &.fa-plus,
- &.fa-unlock,
- &.fa-lock,
- &.fa-envelope,
- &.fa-home,
- &.fa-bullhorn,
- &.fa-sliders,
- &.fa-chevron-left,
- &.fa-chevron-right,
- &.fa-reply,
- &.fa-reply-all,
- &.fa-share-alt,
- &.fa-star,
- &.fa-bookmark,
- &.fa-ellipsis-h,
- &.fa-bell,
- &.fa-bell-o,
- &.fa-eraser,
- &.fa-users,
- &.fa-file-text,
- &.fa-user-plus,
- &.fa-address-book,
- &.fa-address-book-o,
- &.fa-list,
- &.fa-list-ul,
- &.fa-eye,
- &.fa-eye-slash,
- &.fa-pencil,
- &.fa-trash,
- &.fa-play,
- &.fa-external-link,
- &.fa-retweet,
- &.fa-link,
- &.fa-pause,
- &.fa-volume-up,
- &.fa-volume-off,
- &.fa-expand,
- &.fa-download,
- &.fa-arrows-alt,
- &.fa-compress,
- &.fa-user-times,
- &.fa-check,
- &.fa-quote-right,
- &.fa-upload,
- &.fa-comments,
- &.fa-angle-right,
- &.fa-thumb-tack {
- @include icon-font-style;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- }
-}
-
-.fa {
- &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
- &.fa-globe::before { content: "public" }
- &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
- &.fa-sign-out::before { content: "exit_to_app" }
- &.fa-search::before { content: "search" }
- &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
- &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
- &.fa-paperclip::before { content: "attach_file" }
- &.fa-tasks::before { content: "poll" }
- &.fa-plus::before { content: "add" }
- &.fa-unlock::before { content: "lock_open" }
- &.fa-lock::before { content: "lock" }
- &.fa-envelope::before { content: "mail" }
- &.fa-home::before { content: "home" }
- &.fa-bullhorn::before { content: "announcement" }
- &.fa-sliders::before { content: "tune" }
- &.fa-chevron-left::before { content: "arrow_back" }
- &.fa-chevron-right::before { content: "arrow_forward" }
- &.fa-reply::before { content: $reply-icon }
- &.fa-reply-all::before { content: "reply_all" }
- &.fa-share-alt::before { content: "share" }
- &.fa-star::before { content: $favorite-icon }
- &.fa-bookmark::before { content: "bookmark" }
- &.fa-ellipsis-h::before { content: "more_horiz" }
- &.fa-bell::before { content: "notifications" }
- &.fa-bell-o::before { content: "notifications" }
- &.fa-eraser::before { content: "clear_all" }
- &.fa-users::before { content: "people" }
- &.fa-file-text::before { content: "web" }
- &.fa-user-plus::before { content: "person_add" }
- &.fa-address-book::before { 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: "person_remove" }
- &.fa-check::before { content: "check" }
- &.fa-quote-right::before { content: "format_quote" }
- &.fa-upload::before { content: "file_upload" }
- &.fa-comments::before { content: "forum" }
- &.fa-angle-right::before { content: "chevron_right" }
- &.fa-thumb-tack::before { content: "push_pin" }
-}
-
-// 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
-button.icon-button i.fa-retweet {
- height: 20px;
- width: 20px;
- transition: none;
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,') }
-
-button.icon-button i.fa-retweet:hover,
-button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover,
-button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
-}
-
-// dropdown icon
-.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px}
-
-// icon in tab settings
-.text-btn.column-header__setting-btn {
- .fa {
- vertical-align: middle;
-
- &.fa-eraser { margin-right: 8px } // clear notification
- }
-}
-
-// top bar icons align
-.fa.fa-bell.column-header__icon.fa-fw,
-.fa.fa-home.column-header__icon.fa-fw,
-.fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw,
-.fa.fa-bars.column-header__icon.fa-fw,
-.fa.fa-bookmark.column-header__icon.fa-fw,
-.fa.fa-address-book-o.column-header__icon.fa-fw,
-.fa.fa-envelope.column-header__icon.fa-fw,
-.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
-
-// top bar icons in single column mode
-.tabs-bar__link {
- .fa.fa-home.fa-fw,
- .fa.fa-bell.fa-fw,
- .fa.fa-users.fa-fw,
- .fa.fa-globe.fa-fw { vertical-align: text-bottom }
-}
-
-// getting-started and side bar icons
-.column-link .fa,
-.column-link--transparent .fa { vertical-align: text-bottom }
-
-// uploaded media icons align
-.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
- font-size: 20px;
- vertical-align: text-bottom;
-}
-
-// search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
-
-// read more icon
-.status__content__read-more-button .fa { vertical-align: bottom }
-
-// Attachment icon
-.attachment-list__list a .fa { vertical-align: middle }
-
-// status detail icon
-.detailed-status .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
-
-// status scope
-.status__visibility-icon .fa,
-.account__header__tabs__name .fa {
- font-size: 16px;
- vertical-align: text-bottom;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/media.scss b/app/javascript/styles/y-zu-light/theme/media.scss
deleted file mode 100644
index b8ac12414..000000000
--- a/app/javascript/styles/y-zu-light/theme/media.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.media-gallery {
- border-radius: $media-radius;
-
- &__item { border-radius: $media-radius }
-}
-
-.media-modal {
- &__nav {
- background: $media-icon-bg-color;
- color: $media-icon-color;
- height: 48px;
- width: 48px;
- margin: auto 16px;
- padding: 8px;
- border-radius: 50%;
-
- .fa { width: 32px }
- }
-
- &__button {
- background-color: $media-page-indicator-color;
-
- &--active { background-color: $media-page-indicator-active-color }
- }
-
- &__close {
- &.icon-button {
- background: transparent;
- color: $media-icon-color;
- font-size: 24px !important;
- width: 24px !important;
- height: 24px !important;
- padding: 8px;
- box-sizing: content-box;
- line-height: normal !important;
-
- &:hover {
- background: $media-icon-bg-hover-color;
- color: $media-icon-hover-color;
- }
-
- .fa-fw {
- width: 24px;
- height: 24px;
- }
- }
- }
-
- &__meta {
- bottom: 24px;
-
- a { color: $media-icon-color }
- }
-
- &__overlay {
- .picture-in-picture__footer .icon-button {
- color: $media-icon-color;
-
- &:active,
- &:focus,
- &:hover {
- color: $media-icon-hover-color;
- background-color: transparent;
- }
- }
- }
-}
-
-.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 {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__volume {
- &::before {
- background: rgba(255,255,255,.4);
- border-radius: 0;
- }
-
- &__current {
- background: $primary-color;
- border-radius: 0;
- }
-
- &__handle {
- @include material-transition;
- background-color: $primary-color;
- box-shadow: none;
- }
- }
-
- &__time-current { margin-left: 68px }
-
- &__buttons button { font-size: 20px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/modal.scss b/app/javascript/styles/y-zu-light/theme/modal.scss
deleted file mode 100644
index 93e5b24c1..000000000
--- a/app/javascript/styles/y-zu-light/theme/modal.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.confirmation-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $dialog-radius;
-
- &__container {
- text-align: left;
- padding: 24px;
- }
-
- &__action-bar {
- justify-content: flex-end;
- background: $card-bg-color;
- padding: 8px;
- }
-
- &__secondary-button {
- box-shadow: none !important;
- color: $text-button-color;
- background: transparent;
- margin: 0 8px;
-
- &:hover {
- color: $text-button-color;
- background: $text-button-hover-color;
- }
-
- &:focus,
- &:active {
- color: $text-button-color;
- background-color: $text-button-focus-color;
- }
- }
-}
-
-.actions-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- border-radius: $card-radius;
-
- ul li:not(:empty) a {
- color: $ui-text-color;
- font-size: 16px;
-
- &:hover {
- background: $card-bg-hover-color;
- color: $ui-text-color;
- }
- }
-
- .dropdown-menu__separator { border-bottom-color: $border-color }
-
- .status {
- background: $card-bg-color;
- border-bottom-color: $border-color;
- padding-top: 12px;
- padding-bottom: 12px;
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
- }
-}
-
-.report-modal {
- @include shadow-24dp;
- background: $card-bg-color;
- color: $ui-text-color;
- border-radius: $card-radius;
-
- &__target {
- padding: 24px;
- text-align: left;
- font-weight: bold;
- }
-
- &__container {
- border-top: none;
- }
-
- &__comment {
- border-right: none;
-
- .setting-text-label { color: $ui-text-color }
- }
-}
-
-.embed-modal .embed-modal__container {
- padding: 0 24px 24px 24px;
-
- .hint {
- margin-bottom: 16px;
- color: $secondary-text-color;
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/responsive.scss b/app/javascript/styles/y-zu-light/theme/responsive.scss
deleted file mode 100644
index 8618f7ed7..000000000
--- a/app/javascript/styles/y-zu-light/theme/responsive.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@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;
- width: $fab-size;
- height: $fab-size;
- bottom: 16px;
- right: 16px;
-
- &:hover { background: $floating-action-button-hover-color }
-
- &:active,
- &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
- .column { margin: 0 !important }
- .search__input { padding: 16px 46px }
-
- .search__icon {
- .fa {
- top: 16px;
- left: 16px;
- }
-
- .fa-times-circle.active { left: unset }
- }
-}
-
-// small size screen
-@media screen and (max-width: 415px) {
- .public-layout { padding-top: 64px }
-}
-
-// middle size screen
-@media screen and (min-width: 415px) {
- .tabs-bar {
- margin-bottom: 0;
-
- &__wrapper {
- padding-top: 0;
-
- .tabs-bar { margin-bottom: 0 }
- }
- }
-
- .columns-area__panels {
- &__main {
- @include shadow-1dp;
- padding: 0;
- }
-
- &__pane { padding: 0 16px }
- }
-}
-
-//single column mode
-@media screen and (min-width: 631px) {
- .tabs-bar__link {
- &:hover {
- background: $tab-indicator-bg-hover-color;
- border-bottom-color: transparent;
- }
-
- &:active,
- &:focus {
- background: $tab-indicator-bg-focus-color;
- border-bottom-color: $tab-bg-color;
- }
-
- &.active { border-bottom-color: $tab-indicator-active-color }
- }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/statuses.scss b/app/javascript/styles/y-zu-light/theme/statuses.scss
deleted file mode 100644
index 7e4374014..000000000
--- a/app/javascript/styles/y-zu-light/theme/statuses.scss
+++ /dev/null
@@ -1,292 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.status {
- padding: 12px 12px 4px 70px;
- border-bottom: 1px solid $border-color;
-
- &__expand { width: 70px }
-
- &__info {
- font-size: $name-font-size;
- padding-right: 4px;
- }
-
- &__relative-time { color: $info-text-color }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__avatar {
- left: 12px;
- top: 12px;
- }
-
- &__content {
- font-size: $status-font-size;
- padding-top: 4px;
- color: $primary-text-color;
-
- a {
- color: $link-text-color;
-
- &.unhandled-link { color: $link-text-color }
- }
-
- p { margin-bottom: 16px }
-
- .status__content__spoiler-link {
- 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 {
- margin-top: 4px;
-
- &__counter {
- margin-right: 6px;
-
- &__label {
- font-size: 14px;
- color: $info-text-color;
- }
- }
- }
-
- &__action-bar-button {
- margin-right: 4px;
-
- &.icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &--with-counter {
- margin-right: 4px;
- width: auto !important;
-
- &:hover { background: transparent }
- }
- }
- }
-
- &__action-bar-dropdown {
- width: 36px !important;
- height: 36px !important;
- box-sizing: content-box;
-
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
-
- &:hover {
- color:$icon-hover-color;
- background: $icon-bg-hover-color;
- }
- }
- }
-
- &__prepend {
- color: $secondary-text-color;
- margin-left: 64px;
-
- .status__display-name strong { color: $secondary-text-color }
- }
-
- &.status-direct:not(.read) {
- background: transparent;
- border-bottom-color: $border-color;
- }
-
- &__visibility-icon { color: $icon-color }
-}
-
-.status-card {
- color: $icon-color;
- border-color: $border-color;
- outline: none;
- margin-top: 16px;
-
- &__image {
- background: transparent;
-
- &>.fa {
- font-size: 26px;
- }
- }
-
- &__title {
- color: $primary-text-color;
- margin-bottom: 6px;
- }
-
- &__description { color: $secondary-text-color }
-
- &__actions {
- &>div {
- background: $media-icon-bg-color;
- border-radius: $button-radius;
- }
-
- button,
- a {
- color: $media-icon-color;
- font-size: 20px;
- }
-
- a { bottom: auto }
- }
-
- &.compact {
- border-color: $border-color;
- outline: none;
- background: transparent;
-
- .status-card {
- &__content { padding: 12px }
- &__image { flex: 0 0 64px }
- }
-
- &:hover { background-color: transparent !important }
- }
-
- &.horizontal {
- border-radius: 0;
-
- .status-card {
- &__image-preview { border-radius: 0 }
-
- &__image-image { border-radius: 0 }
- }
- }
-}
-
-a.status-card {
- &:hover { background-color: $card-bg-color }
-}
-
-.embed .status,
-.public-layout .status { padding: 16px 16px 16px 80px }
-
-// Detailed status in mobile
-.status.light {
- .status {
- &__display-name { color: $primary-text-color }
- &__relative-time { color: $info-text-color }
- &__content { color: $primary-text-color }
- }
-
- .display-name { color: $secondary-text-color }
- .display-name strong { color: $primary-text-color }
-}
-
-.detailed-status {
- background: $card-bg-color;
- padding: 16px;
-
- &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
-
- &__display-name {
- color: $secondary-text-color;
-
- strong { color: $primary-text-color }
- }
-
- &__meta {
- margin-top: 16px;
- color: $info-text-color;
- }
-
- &__action-bar {
- background: $card-bg-color;
- border-top: none;
- border-bottom: 1px solid $border-color;
- padding: 8px 0;
- }
-
- &__action-bar-dropdown {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
-
- &.active {
- color: $icon-hover-color;
- background: $icon-bg-active-color;
- }
- }
- }
-
- &__button {
- .icon-button {
- @include icon-button;
- padding: 8px;
- box-sizing: content-box;
- }
- }
-
- .button.logo-button {
- margin-bottom: 16px;
- line-height: 36px;
- }
-}
-
-// search user trends
-.display-name {
- &__html { color: $primary-text-color }
- &__account { color: $secondary-text-color }
-}
-
-.activity-stream {
- @include shadow-1dp;
- margin-bottom: 16px;
- border-radius: $card-radius;
-
- .entry {
- background: $card-bg-color;
-
- &:first-child {
- .detailed-status,
- .load-more,
- .status { border-radius: $card-radius $card-radius 0 0 }
- }
- }
-}
-
-.entry.entry-center { border-bottom: 1px solid $border-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/theme.scss b/app/javascript/styles/y-zu-light/theme/theme.scss
deleted file mode 100644
index 367893682..000000000
--- a/app/javascript/styles/y-zu-light/theme/theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
-* Mastodon Material 0.2.1
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/variables.scss b/app/javascript/styles/y-zu-light/theme/variables.scss
deleted file mode 100644
index 0b948881b..000000000
--- a/app/javascript/styles/y-zu-light/theme/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@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/y-zu-light/theme/widgets.scss b/app/javascript/styles/y-zu-light/theme/widgets.scss
deleted file mode 100644
index 4abdfbae9..000000000
--- a/app/javascript/styles/y-zu-light/theme/widgets.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.hero-widget {
- @include shadow-2dp;
- margin-bottom: 16px;
-
- &__img {
- border-radius: $card-radius $card-radius 0 0;
- background: $card-bg-color;
-
- img { border-radius: $card-radius $card-radius 0 0 }
- }
-
- &__text {
- background: $card-bg-color;
- padding: 16px;
- color: $primary-text-color;
- border-radius: 0 0 $card-radius $card-radius;
- }
-}
-
-.endorsements-widget {
- padding-bottom: 8px;
- margin-bottom: 8px;
-}
-
-.trends-widget h4 { color: $section-text-color }
\ No newline at end of file