diff --git a/app/javascript/fonts/MaterialIcons-Regular.ttf b/app/javascript/fonts/MaterialIcons-Regular.ttf
new file mode 100644
index 000000000..e50801b3b
Binary files /dev/null and b/app/javascript/fonts/MaterialIcons-Regular.ttf differ
diff --git a/app/javascript/fonts/MaterialIcons-Regular.woff2 b/app/javascript/fonts/MaterialIcons-Regular.woff2
deleted file mode 100644
index 9fa211252..000000000
Binary files a/app/javascript/fonts/MaterialIcons-Regular.woff2 and /dev/null differ
diff --git a/app/javascript/styles/mastodon-material-dark.scss b/app/javascript/styles/mastodon-material-dark.scss
index 889983ed4..a4645d3f8 100644
--- a/app/javascript/styles/mastodon-material-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark.scss
@@ -1,2 +1,9 @@
+/*
+* Mastodon Material 0.2.0
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
+
@import 'application';
@import 'mastodon-material-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/black.scss b/app/javascript/styles/mastodon-material-dark/color/black.scss
index b299981b0..6aa7ebfdb 100644
--- a/app/javascript/styles/mastodon-material-dark/color/black.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/black.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #000000;
-$menu-background-color: #121212;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #121212;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #000000;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #1e1e1e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #121212;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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-dark.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
index c3c168316..4ed9a7e07 100644
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #191b22;
-$menu-background-color: #d9e1e8;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #313543;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #282c37;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #42485a;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #9baec8;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: lighten($background-color, 14%);
-$icon-background-active-color: lighten($background-color, 18%);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,9 +99,9 @@ $border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
-$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+$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;
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #1f232b;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 54d894fec..d4d84a626 100644
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #eff3f5;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($background-color, 6%);
-$menu-background-active-color: darken($background-color, 10%);
-$menu-background-active-hover-color: darken($background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -55,8 +56,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #282c37;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: darken($background-color, 4%);
-$icon-background-active-color: darken($background-color, 8%);
+$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;
@@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #ffffff;
$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $background-color;
+$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #e6ebf0;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 60c8370a2..eba9c0f18 100644
--- a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 77cef824f..d925f3d65 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #303030;
-$menu-background-color: #424242;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #424242;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #424242;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
-$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+$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($background-color, 6%);
+$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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #424242;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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-light.scss b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
index 64f8d5842..906b8e459 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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%);
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$top-bar-unread-icon-color: darken($primary-color, 30%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 8c575bce5..94c381ee7 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #121212;
-$menu-background-color: #1e1e1e;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #1e1e1e;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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-light.scss b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
index 20336e96d..9317004e9 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #ffffff;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: $background-color;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: $background-color;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($background-color, 30%);
-$scroll-bar-thumb-active-color: darken($background-color, 38%);
+$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: $background-color;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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/icon_config.scss b/app/javascript/styles/mastodon-material-dark/icon_config.scss
index 610c7e308..99046e176 100644
--- a/app/javascript/styles/mastodon-material-dark/icon_config.scss
+++ b/app/javascript/styles/mastodon-material-dark/icon_config.scss
@@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1
+//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
// Reply icon settings
@@ -16,11 +16,13 @@ $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.
-@font-face {
- font-family: "Material Icons";
- src:
- local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
- //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
\ No newline at end of file
+//$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-dark/layout/material-v1.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
index 825deaf8c..926c3325a 100644
--- a/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
+++ b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
@@ -30,6 +30,10 @@ $dialog-radius: 2px;
$menu-radius: 2px;
+// Media radius settings
+$media-radius: 0;
+
+
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
@@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping
//$avater-radius: 2px // Material v1 square
+// Chip settings
+$outlined-chip: false; // Material v1 styled contained chip
+
+
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: true; // Material v1 styled colored button with shadow
\ 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
index 853d82b15..f79f91005 100644
--- a/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
+++ b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
@@ -4,10 +4,12 @@
// 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
@@ -31,6 +33,11 @@ $dialog-radius: 8px;
$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
@@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping
// Chip settings
-// If you want to use contained-chip, please comment out below.
-.reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
-}
+$outlined-chip: true; // Material v2 styled outlined chip
+//$outlined-chip: false; // Material v1 styled contained chip
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: false; // Material v2 styled colored button without shadow
+//$button-shadow: true; // Material v1 styled colored button with shadow
\ 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
index c134cbeeb..d9b3906a5 100644
--- a/app/javascript/styles/mastodon-material-dark/plugins/cards.scss
+++ b/app/javascript/styles/mastodon-material-dark/plugins/cards.scss
@@ -10,13 +10,13 @@
margin: 2px 0 !important;
padding: 8px !important;
- > .scrollable { background: $background-color }
+ > .scrollable { background: $bg-color }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
&__prepend { padding: 8px 8px 2px 0 }
}
@@ -28,7 +28,7 @@
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/plus.scss b/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
index 5b220631b..86a5f3e1e 100644
--- a/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
+++ b/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
@@ -14,9 +14,8 @@
// favorite icon
.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+.star-icon.icon-button.active.activate,
+.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
diff --git a/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss b/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
index 5f573e339..fc965880f 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
@@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12);
@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 $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 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-dark/theme/account.scss b/app/javascript/styles/mastodon-material-dark/theme/account.scss
index 34a8a1816..b6d517e12 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/account.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/account.scss
@@ -7,8 +7,8 @@
.account {
border-bottom: 1px solid $border-color;
- .account__display-name { color: $primary-text-color }
- .account__display-name strong { color: $secondary-text-color }
+ .account__display-name,
+ .account__display-name strong { color: $primary-text-color }
&__avatar {
border-radius: $avater-radius;
@@ -29,9 +29,9 @@
&__header {
&__bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
- border-bottom: 1px solid $border-color;
+ border-bottom: none;
.avatar .account__avatar { border: none }
}
@@ -89,7 +89,7 @@
.verified {
border: none;
- background: $verified-background-color;
+ background: $verified-bg-color;
a,
&__mark { color: $primary-text-color }
@@ -105,7 +105,7 @@
dt {
color: $primary-text-color;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
}
dd { color: $primary-text-color }
@@ -113,11 +113,31 @@
}
}
+ &__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-background-color;
+ background: $text-tab-bg-color;
border-bottom: 1px solid $border-color;
a {
@@ -131,10 +151,10 @@
&::before,
&:after { border: none }
- &:focus { background: $text-tab-indicator-background-focus-color }
+ &:focus { background: $text-tab-indicator-bg-focus-color }
}
- &:hover { background: $text-tab-indicator-background-hover-color }
+ &:hover { background: $text-tab-indicator-bg-hover-color }
}
}
}
@@ -150,4 +170,8 @@
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-dark/theme/base_config.scss b/app/javascript/styles/mastodon-material-dark/theme/base_config.scss
index 73ff009e1..13fb4ad75 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/base_config.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/base_config.scss
@@ -18,10 +18,7 @@
// Search bar hover settings
// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
+$search-bar-hover: false;
// Status font size in timeline
@@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
\ No newline at end of file
+//$name-font-size: 16px; // compatible with material design
+
+
+// Background image
+// If you want to use the local image, please put it in /mastodon-material
+$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
index 4c122d1c6..32ba6dc8c 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/basics.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/basics.scss
@@ -4,7 +4,9 @@
@import '../custom_color', '../custom_layout';
-body { background: $background-color }
+body { background: $bg-color }
+
+.focusable:focus { background: transparent }
// Chrome & Safari scroll bar
::-webkit-scrollbar-thumb {
@@ -21,6 +23,4 @@ body { background: $background-color }
}
// Firefox scroll bar
-html {
- scrollbar-color: $scroll-bar-thumb-color transparent;
-}
\ No newline at end of file
+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
index 1231bac98..7c2ad7937 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/button.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/button.scss
@@ -4,6 +4,8 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+@include button-shadow;
+
.icon-button {
color: $icon-button-color;
border-radius: 50%;
@@ -21,37 +23,54 @@
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
}
&.overlayed {
border-radius: 50%;
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
&:hover {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-hover-color;
}
}
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
- &:active,
- &:focus { background-color: transparent }
+ &:focus { transition: none }
+}
+
+// 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: 12px;
+ font-size: 14px;
+
+ &.active {
+ background-color: $icon-bg-hover-color;
+ color: $icon-button-active-color;
+ }
&:hover {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
color: $icon-button-hover-color;
}
}
@@ -91,7 +110,7 @@
}
.spoiler-button__overlay__label {
- background: $media-icon-background-color;
+ 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
index 54effffd3..af7776a0c 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/columns.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
@@ -10,7 +10,10 @@
margin: 10px 8px;
border-radius: $card-radius;
- &>.scrollable { background: $list-background-color }
+ &>.scrollable {
+ background: $list-bg-color;
+ opacity: $column-transparency;
+ }
&:last-child { box-shadow: none }
}
@@ -45,22 +48,23 @@
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
- padding: 10px 12px;
+ padding: 10px;
border-radius: 50%;
+ font-size: 20px;
&.active {
color: $top-bar-icon-active-color;
- background: $icon-background-active-color;
+ background: $icon-bg-active-color;
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
@@ -93,6 +97,7 @@
&__wrapper {
@include shadow-4dp;
border-radius: $bar-radius;
+ opacity: $bar-transparency;
.announcements { border-top: 1px solid $border-color }
@@ -105,11 +110,11 @@
&__collapsible {
color: $ui-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
border-top: 1px solid $border-color;
&-inner {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
}
@@ -119,9 +124,9 @@
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
- padding: 8px;
- margin: auto 0;
- border-radius: 50%;
+ margin: 8px 10px;
+ padding: 10px;
+ font-size: 20px;
span { display: none }
}
@@ -129,21 +134,21 @@
.column-subheading {
color: $section-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 12px 16px;
border-top: 1px solid $border-color;
}
.column-link {
color: $ui-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
- &:hover { background: $list-background-hover-color }
+ &:hover { background: $list-bg-hover-color }
&:active,
- &:focus { background: $list-background-active-color }
+ &:focus { background: $list-bg-active-color }
&__icon {
margin-right: 32px;
@@ -153,9 +158,9 @@
&--transparent {
&.active {
color: $ui-text-color;
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
- &:hover { background: $menu-background-active-hover-color }
+ &:hover { background: $menu-bg-active-hover-color }
.fa { color: $icon-color }
}
@@ -191,14 +196,19 @@
.column-inline-form {
padding: 16px 0 16px 16px;
- background: $card-background-color;
+ background: $card-bg-color;
.icon-button { margin: 0 16px }
}
+.columns-area {
+ background-image: url($bg-image);
+ background-size: contain;
+}
+
.setting-text {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
@@ -206,17 +216,17 @@
.empty-column-indicator {
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
font-size: 16px;
}
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
&--unread {
- background: $list-background-color;
+ background: $list-bg-color;
.conversation__content__relative-time { color: $info-text-color }
}
@@ -275,15 +285,16 @@
color: $icon-color;
padding: 16px;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
}
.getting-started {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
+ opacity: $column-transparency;
&__wrapper {
- background: $background-color;
+ background: $bg-color;
height: auto !important;
border-bottom: 1px solid $border-color;
}
@@ -303,8 +314,9 @@
}
&__trends {
- background: $background-color;
+ background: $bg-color;
margin-bottom: 0;
+ opacity: $column-transparency;
h4 {
color: $section-text-color;
@@ -358,7 +370,7 @@
}
.announcements {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 0;
&__container { color: $primary-text-color }
@@ -386,6 +398,8 @@
.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 {
.emoji-button {
color: $icon-button-color;
@@ -424,12 +438,13 @@
.notification {
&__filter-bar {
- background: $tab-background-color;
+ background: $tab-bg-color;
border-bottom: 1px solid $border-color;
z-index: 1;
+ opacity: $bar-transparency;
button {
- background: $tab-background-color;
+ background: $tab-bg-color;
color: $tab-indicator-color;
font-size: 16px;
@@ -442,10 +457,10 @@
&::before,
&:after { border: none }
- &:focus { background: $tab-indicator-background-focus-color }
+ &:focus { background: $tab-indicator-bg-focus-color }
}
- &:hover { background: $tab-indicator-background-hover-color }
+ &:hover { background: $tab-indicator-bg-hover-color }
}
}
diff --git a/app/javascript/styles/mastodon-material-dark/theme/components.scss b/app/javascript/styles/mastodon-material-dark/theme/components.scss
index ae5bfe158..46483923e 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/components.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/components.scss
@@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
.drawer {
&__header {
@@ -11,11 +12,12 @@
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
+ opacity: $bar-transparency;
a { transition: none }
a:hover {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
}
}
@@ -40,14 +42,15 @@
}
&__inner {
- background: $card-background-color;
+ background: $card-bg-color;
+ opacity: $column-transparency;
&.darker {
- background: $card-background-color;
+ background: $card-bg-color;
position: inherit;
}
- &__mastodon { background: $card-background-color }
+ &__mastodon { background: $card-bg-color }
}
}
@@ -57,6 +60,7 @@
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
+ opacity: $bar-transparency;
&:focus {
@include shadow-2dp;
@@ -64,6 +68,8 @@
color: $search-bar-text-color;
}
+ &:hover { @include search-bar-hover }
+
&::placeholder { color: $tips-text-color }
}
@@ -112,7 +118,7 @@
.search-results {
&__header {
color: $secondary-text-color;
- background-color: $card-background-color;
+ background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 8px }
@@ -120,7 +126,7 @@
&__section {
h5 {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom: 1px solid $border-color;
padding: 16px;
color: $section-text-color;
@@ -137,6 +143,12 @@
strong {
color: $ui-text-color;
}
+
+ .navigation-bar__actions .compose__action-bar .icon-button {
+ width: 36px !important;
+ height: 36px !important;
+ padding: 8px;
+ }
}
.navigation-panel hr {
@@ -146,7 +158,7 @@
.dropdown-menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
padding: 8px 0;
border-radius: $menu-radius;
@@ -155,11 +167,11 @@
&__item a {
font-size: 14px;
padding: 8px 16px;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $menu-text-color;
&:hover, &:active {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $menu-text-color;
}
}
@@ -173,7 +185,7 @@
.compose-form {
.autosuggest-textarea {
&__textarea {
- background: $text-field-background-color;
+ background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -182,7 +194,7 @@
&__suggestions {
@include shadow-1dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
@@ -192,40 +204,76 @@
padding: 8px;
border-radius: 0;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
&.selected,
&:focus,
- &:active { background: $menu-background-active-color }
+ &:active { background: $menu-bg-active-color }
}
}
}
- .spoiler-input__input {
- color: $ui-text-color;
- background: $card-background-color;
+ .spoiler-input {
+ &.spoiler-input--visible { margin-bottom: 8px }
- &::placeholder { color: $tips-text-color }
+ &__input {
+ color: $ui-text-color;
+ background: $card-bg-color;
+ border-bottom: 1px solid $border-color;
+ border-radius: 0;
+
+ &::placeholder { color: $tips-text-color }
+ }
}
.compose-form {
&__warning {
- @include shadow-1dp;
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
+ border: 1px solid $border-color;
+ border-radius: $card-radius;
a { color: $link-text-color }
}
&__modifiers {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
color: $tips-text-color;
+ padding: 8px;
+
+ .icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ }
+
+ .text-icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ line-height: 20px !important;
+ }
}
&__poll-wrapper {
@@ -235,7 +283,7 @@
select {
color: $ui-text-color;
- background-color: $background-color;
+ background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
@@ -251,20 +299,16 @@
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
-
-
}
- }
- &__utilBtns { padding-top: 0 }
+ .poll__footer { border-top: none }
+ }
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
-.no-reduce-motion .spoiler-input {
- transition-duration: .2s, .2s;
-}
+.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
.poll {
@@ -283,7 +327,7 @@
&__text input[type=text] {
color: $ui-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: 1px solid $border-color;
padding: 8px 12px;
@@ -292,7 +336,7 @@
&__option input[type=text] {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
@@ -300,9 +344,9 @@
&__chart {
border-radius: 0;
- background: $poll-bar-color;
+ background: $progress-indicator-track-color;
- &.leading { background: $poll-bar-leading-color }
+ &.leading { background: $progress-indicator-color }
}
&__footer {
@@ -316,7 +360,7 @@
.privacy-dropdown {
&.active .privacy-dropdown__value.active {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
box-shadow: none;
@@ -325,7 +369,7 @@
&__dropdown {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $dialog-radius;
}
@@ -345,7 +389,7 @@
}
&.active {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -355,7 +399,7 @@
}
&:hover {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
@@ -366,7 +410,7 @@
}
&:hover {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -386,7 +430,7 @@
box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__header { margin-bottom: 4px }
@@ -410,14 +454,15 @@
}
.block-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
justify-content: flex-end;
}
@@ -451,7 +496,7 @@
}
.filter-form {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
@@ -466,18 +511,23 @@
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
@@ -491,7 +541,8 @@
}
.mute-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -500,13 +551,14 @@
&__explanation { margin-top: 16px }
&__action-bar {
- background: $card-background-color;
+ 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;
@@ -531,4 +583,19 @@
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;
+ }
}
\ 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
index 70e22752d..1b42121be 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
@@ -7,13 +7,13 @@
.emoji-picker-dropdown {
&__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
}
&__modifiers__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
button {
@@ -31,33 +31,23 @@
border: 0 solid $border-color;
&:first-child {
- background: $menu-background-color;
+ background: $menu-bg-color;
}
}
- &-anchors {
- color: $icon-button-color;
- padding: 0;
- }
-
&-anchor {
+ color: $text-tab-indicator-color;
padding: 10px 4px;
- &-selected {
- color: $icon-button-active-color;
- }
+ &-bar { background-color: $icon-tab-indicator-active-color }
- &-bar {
- background-color: $tab-indicator-active-color;
- }
+ &-selected { color: $icon-tab-indicator-hover-color }
- &:hover {
- color: $icon-button-hover-color;
- }
+ &:hover { color: $icon-tab-indicator-hover-color }
}
&-search {
- background: $menu-background-color;
+ background: $menu-bg-color;
input {
outline: none;
@@ -76,16 +66,16 @@
&-scroll {
padding: 0 8px 8px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-category-label span {
padding: 4px 6px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-emoji:hover::before {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
&-no-results { color: $secondary-text-color }
diff --git a/app/javascript/styles/mastodon-material-dark/theme/icons.scss b/app/javascript/styles/mastodon-material-dark/theme/icons.scss
index 1367647ec..987767544 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/icons.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/icons.scss
@@ -16,26 +16,8 @@
&__icon.fa-fw { color: $icon-color }
}
-
-.fa { vertical-align: sub } // adjust material icon font baseline to other font
-
-.fa.fa-times,
-.fa.fa-eraser,
-.fa.fa-plus { vertical-align: middle } // adjustment exception
-
-.fa.fa-check { vertical-align: initial }
-
.fa.fa-lock { text-transform: none }
-.fa-fw { width: 16px }
-
-// icon in tab settings
-.fa.fa-chevron-left.column-back-button__icon.fa-fw,
-.text-btn.column-header__setting-btn .fa.fa-eraser {
- font-size: 20px;
- margin-right: 16px;
-}
-
.icon-with-badge__badge {
background: $badge-color;
border: none;
diff --git a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
index 747856253..f27de96e8 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
@@ -3,8 +3,17 @@
@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,
@@ -64,8 +73,19 @@
&.fa-compress,
&.fa-user-times,
&.fa-check,
- &.fa-quote-right {
- font-family: "Material Icons";
+ &.fa-quote-right,
+ &.fa-upload,
+ &.fa-comments {
+ @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;
}
}
@@ -118,9 +138,11 @@
&.fa-download::before { content: "file_download" }
&.fa-arrows-alt::before { content: "fullscreen" }
&.fa-compress::before { content: "fullscreen_exit" }
- &.fa-user-times::before { content: "delete" }
+ &.fa-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" }
}
// bookmark icon
@@ -148,12 +170,42 @@
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
-.no-reduce-motion button.icon-button i.fa-retweet {
+button.icon-button i.fa-retweet,
+button.icon-button i.fa-retweet:hover {
height: 18px;
width: 18px;
transition: none;
background-image: url('data:image/svg+xml;utf8,');
}
+button.icon-button.disabled i.fa-retweet,
+button.icon-button.disabled i.fa-retweet:hover {
+ 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}
\ No newline at end of file
+.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 { 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 }
\ 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
index 9d0203828..0b8b92acf 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/media.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/media.scss
@@ -6,9 +6,9 @@
.media-gallery {
- border-radius: 0;
+ border-radius: $media-radius;
- &__item { border-radius: 0 }
+ &__item { border-radius: $media-radius }
}
.media-modal__close {
@@ -24,7 +24,7 @@
border: 12px;
&:hover {
- background: $media-icon-background-hover-color;
+ background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
@@ -34,7 +34,7 @@
.media-modal {
&__nav {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
height: 48px;
width: 48px;
@@ -50,6 +50,12 @@
&--active { background-color: $media-page-indicator-active-color }
}
+
+ &__meta {
+ bottom: 24px;
+
+ a { color: $media-icon-color }
+ }
}
.video-player {
@@ -75,7 +81,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
@@ -93,7 +99,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
diff --git a/app/javascript/styles/mastodon-material-dark/theme/modal.scss b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
index 2748c8723..209678c84 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/modal.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
@@ -6,7 +6,8 @@
.confirmation-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
@@ -18,7 +19,7 @@
&__action-bar {
justify-content: flex-end;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
}
@@ -42,7 +43,7 @@
}
.actions-modal {
- background: $card-background-color;
+ background: $card-bg-color;
border-radius: $card-radius;
ul li:not(:empty) a {
@@ -50,7 +51,7 @@
font-size: 16px;
&:hover {
- background: $card-background-hover-color;
+ background: $card-bg-hover-color;
color: $ui-text-color;
}
}
@@ -58,7 +59,7 @@
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
@@ -71,7 +72,8 @@
}
.report-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
diff --git a/app/javascript/styles/mastodon-material-dark/theme/responsive.scss b/app/javascript/styles/mastodon-material-dark/theme/responsive.scss
index 9ae304041..d0e1a6635 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/responsive.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/responsive.scss
@@ -81,14 +81,14 @@
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
- background: $tab-indicator-background-hover-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-hover-color;
+ border-bottom-color: $tab-bg-color;
}
&:active,
&:focus {
- background: $tab-indicator-background-focus-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-focus-color;
+ border-bottom-color: $tab-bg-color;
}
}
}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
index eedf77c2a..d095c2292 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
@@ -86,12 +86,15 @@
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;
@@ -110,7 +113,7 @@
&__actions {
&>div {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
border-radius: $button-radius;
}
@@ -136,7 +139,19 @@
&:hover { background-color: transparent !important }
}
- &:hover { background-color: $card-background-color }
+ &.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 }
}
// Detailed status in mobile
@@ -152,7 +167,7 @@
}
.detailed-status {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__display-name {
@@ -167,7 +182,7 @@
}
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;
diff --git a/app/javascript/styles/mastodon-material-light.scss b/app/javascript/styles/mastodon-material-light.scss
index 5068d6386..cda781b7a 100644
--- a/app/javascript/styles/mastodon-material-light.scss
+++ b/app/javascript/styles/mastodon-material-light.scss
@@ -1,2 +1,9 @@
+/*
+* Mastodon Material 0.2.0
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
+
@import 'application';
@import '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
index b299981b0..6aa7ebfdb 100644
--- a/app/javascript/styles/mastodon-material-light/color/black.scss
+++ b/app/javascript/styles/mastodon-material-light/color/black.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #000000;
-$menu-background-color: #121212;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #121212;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #000000;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #1e1e1e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #121212;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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-dark.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
index c3c168316..4ed9a7e07 100644
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #191b22;
-$menu-background-color: #d9e1e8;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #313543;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #282c37;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #42485a;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #9baec8;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: lighten($background-color, 14%);
-$icon-background-active-color: lighten($background-color, 18%);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,9 +99,9 @@ $border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
-$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+$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;
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #1f232b;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 54d894fec..d4d84a626 100644
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #eff3f5;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($background-color, 6%);
-$menu-background-active-color: darken($background-color, 10%);
-$menu-background-active-hover-color: darken($background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -55,8 +56,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #282c37;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: darken($background-color, 4%);
-$icon-background-active-color: darken($background-color, 8%);
+$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;
@@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #ffffff;
$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $background-color;
+$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #e6ebf0;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 60c8370a2..eba9c0f18 100644
--- a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
+++ b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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-dark.scss b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
index 77cef824f..d925f3d65 100644
--- a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #303030;
-$menu-background-color: #424242;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #424242;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #424242;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
-$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+$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($background-color, 6%);
+$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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #424242;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 64f8d5842..906b8e459 100644
--- a/app/javascript/styles/mastodon-material-light/color/v1-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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%);
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$top-bar-unread-icon-color: darken($primary-color, 30%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 8c575bce5..94c381ee7 100644
--- a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #121212;
-$menu-background-color: #1e1e1e;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #1e1e1e;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 20336e96d..9317004e9 100644
--- a/app/javascript/styles/mastodon-material-light/color/v2-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #ffffff;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: $background-color;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: $background-color;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($background-color, 30%);
-$scroll-bar-thumb-active-color: darken($background-color, 38%);
+$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: $background-color;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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/icon_config.scss b/app/javascript/styles/mastodon-material-light/icon_config.scss
index 610c7e308..99046e176 100644
--- a/app/javascript/styles/mastodon-material-light/icon_config.scss
+++ b/app/javascript/styles/mastodon-material-light/icon_config.scss
@@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1
+//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
// Reply icon settings
@@ -16,11 +16,13 @@ $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.
-@font-face {
- font-family: "Material Icons";
- src:
- local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
- //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
\ No newline at end of file
+//$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-v1.scss b/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
index 825deaf8c..926c3325a 100644
--- a/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
+++ b/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
@@ -30,6 +30,10 @@ $dialog-radius: 2px;
$menu-radius: 2px;
+// Media radius settings
+$media-radius: 0;
+
+
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
@@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping
//$avater-radius: 2px // Material v1 square
+// Chip settings
+$outlined-chip: false; // Material v1 styled contained chip
+
+
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: true; // Material v1 styled colored button with shadow
\ 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
index 853d82b15..f79f91005 100644
--- a/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
+++ b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
@@ -4,10 +4,12 @@
// 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
@@ -31,6 +33,11 @@ $dialog-radius: 8px;
$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
@@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping
// Chip settings
-// If you want to use contained-chip, please comment out below.
-.reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
-}
+$outlined-chip: true; // Material v2 styled outlined chip
+//$outlined-chip: false; // Material v1 styled contained chip
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: false; // Material v2 styled colored button without shadow
+//$button-shadow: true; // Material v1 styled colored button with shadow
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/plugins/cards.scss b/app/javascript/styles/mastodon-material-light/plugins/cards.scss
index c134cbeeb..d9b3906a5 100644
--- a/app/javascript/styles/mastodon-material-light/plugins/cards.scss
+++ b/app/javascript/styles/mastodon-material-light/plugins/cards.scss
@@ -10,13 +10,13 @@
margin: 2px 0 !important;
padding: 8px !important;
- > .scrollable { background: $background-color }
+ > .scrollable { background: $bg-color }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
&__prepend { padding: 8px 8px 2px 0 }
}
@@ -28,7 +28,7 @@
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
diff --git a/app/javascript/styles/mastodon-material-light/plugins/plus.scss b/app/javascript/styles/mastodon-material-light/plugins/plus.scss
index 5b220631b..86a5f3e1e 100644
--- a/app/javascript/styles/mastodon-material-light/plugins/plus.scss
+++ b/app/javascript/styles/mastodon-material-light/plugins/plus.scss
@@ -14,9 +14,8 @@
// favorite icon
.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+.star-icon.icon-button.active.activate,
+.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
diff --git a/app/javascript/styles/mastodon-material-light/theme/_mixins.scss b/app/javascript/styles/mastodon-material-light/theme/_mixins.scss
index 5f573e339..fc965880f 100644
--- a/app/javascript/styles/mastodon-material-light/theme/_mixins.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/_mixins.scss
@@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12);
@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 $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 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
index 34a8a1816..b6d517e12 100644
--- a/app/javascript/styles/mastodon-material-light/theme/account.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/account.scss
@@ -7,8 +7,8 @@
.account {
border-bottom: 1px solid $border-color;
- .account__display-name { color: $primary-text-color }
- .account__display-name strong { color: $secondary-text-color }
+ .account__display-name,
+ .account__display-name strong { color: $primary-text-color }
&__avatar {
border-radius: $avater-radius;
@@ -29,9 +29,9 @@
&__header {
&__bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
- border-bottom: 1px solid $border-color;
+ border-bottom: none;
.avatar .account__avatar { border: none }
}
@@ -89,7 +89,7 @@
.verified {
border: none;
- background: $verified-background-color;
+ background: $verified-bg-color;
a,
&__mark { color: $primary-text-color }
@@ -105,7 +105,7 @@
dt {
color: $primary-text-color;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
}
dd { color: $primary-text-color }
@@ -113,11 +113,31 @@
}
}
+ &__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-background-color;
+ background: $text-tab-bg-color;
border-bottom: 1px solid $border-color;
a {
@@ -131,10 +151,10 @@
&::before,
&:after { border: none }
- &:focus { background: $text-tab-indicator-background-focus-color }
+ &:focus { background: $text-tab-indicator-bg-focus-color }
}
- &:hover { background: $text-tab-indicator-background-hover-color }
+ &:hover { background: $text-tab-indicator-bg-hover-color }
}
}
}
@@ -150,4 +170,8 @@
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
index 73ff009e1..13fb4ad75 100644
--- a/app/javascript/styles/mastodon-material-light/theme/base_config.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/base_config.scss
@@ -18,10 +18,7 @@
// Search bar hover settings
// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
+$search-bar-hover: false;
// Status font size in timeline
@@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
\ No newline at end of file
+//$name-font-size: 16px; // compatible with material design
+
+
+// Background image
+// If you want to use the local image, please put it in /mastodon-material
+$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/basics.scss b/app/javascript/styles/mastodon-material-light/theme/basics.scss
index 4c122d1c6..32ba6dc8c 100644
--- a/app/javascript/styles/mastodon-material-light/theme/basics.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/basics.scss
@@ -4,7 +4,9 @@
@import '../custom_color', '../custom_layout';
-body { background: $background-color }
+body { background: $bg-color }
+
+.focusable:focus { background: transparent }
// Chrome & Safari scroll bar
::-webkit-scrollbar-thumb {
@@ -21,6 +23,4 @@ body { background: $background-color }
}
// Firefox scroll bar
-html {
- scrollbar-color: $scroll-bar-thumb-color transparent;
-}
\ No newline at end of file
+html { scrollbar-color: $scroll-bar-thumb-color 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
index 1231bac98..7c2ad7937 100644
--- a/app/javascript/styles/mastodon-material-light/theme/button.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/button.scss
@@ -4,6 +4,8 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+@include button-shadow;
+
.icon-button {
color: $icon-button-color;
border-radius: 50%;
@@ -21,37 +23,54 @@
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
}
&.overlayed {
border-radius: 50%;
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
&:hover {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-hover-color;
}
}
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
- &:active,
- &:focus { background-color: transparent }
+ &:focus { transition: none }
+}
+
+// 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: 12px;
+ font-size: 14px;
+
+ &.active {
+ background-color: $icon-bg-hover-color;
+ color: $icon-button-active-color;
+ }
&:hover {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
color: $icon-button-hover-color;
}
}
@@ -91,7 +110,7 @@
}
.spoiler-button__overlay__label {
- background: $media-icon-background-color;
+ 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/columns.scss b/app/javascript/styles/mastodon-material-light/theme/columns.scss
index 54effffd3..af7776a0c 100644
--- a/app/javascript/styles/mastodon-material-light/theme/columns.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/columns.scss
@@ -10,7 +10,10 @@
margin: 10px 8px;
border-radius: $card-radius;
- &>.scrollable { background: $list-background-color }
+ &>.scrollable {
+ background: $list-bg-color;
+ opacity: $column-transparency;
+ }
&:last-child { box-shadow: none }
}
@@ -45,22 +48,23 @@
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
- padding: 10px 12px;
+ padding: 10px;
border-radius: 50%;
+ font-size: 20px;
&.active {
color: $top-bar-icon-active-color;
- background: $icon-background-active-color;
+ background: $icon-bg-active-color;
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
@@ -93,6 +97,7 @@
&__wrapper {
@include shadow-4dp;
border-radius: $bar-radius;
+ opacity: $bar-transparency;
.announcements { border-top: 1px solid $border-color }
@@ -105,11 +110,11 @@
&__collapsible {
color: $ui-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
border-top: 1px solid $border-color;
&-inner {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
}
@@ -119,9 +124,9 @@
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
- padding: 8px;
- margin: auto 0;
- border-radius: 50%;
+ margin: 8px 10px;
+ padding: 10px;
+ font-size: 20px;
span { display: none }
}
@@ -129,21 +134,21 @@
.column-subheading {
color: $section-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 12px 16px;
border-top: 1px solid $border-color;
}
.column-link {
color: $ui-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
- &:hover { background: $list-background-hover-color }
+ &:hover { background: $list-bg-hover-color }
&:active,
- &:focus { background: $list-background-active-color }
+ &:focus { background: $list-bg-active-color }
&__icon {
margin-right: 32px;
@@ -153,9 +158,9 @@
&--transparent {
&.active {
color: $ui-text-color;
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
- &:hover { background: $menu-background-active-hover-color }
+ &:hover { background: $menu-bg-active-hover-color }
.fa { color: $icon-color }
}
@@ -191,14 +196,19 @@
.column-inline-form {
padding: 16px 0 16px 16px;
- background: $card-background-color;
+ background: $card-bg-color;
.icon-button { margin: 0 16px }
}
+.columns-area {
+ background-image: url($bg-image);
+ background-size: contain;
+}
+
.setting-text {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
@@ -206,17 +216,17 @@
.empty-column-indicator {
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
font-size: 16px;
}
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
&--unread {
- background: $list-background-color;
+ background: $list-bg-color;
.conversation__content__relative-time { color: $info-text-color }
}
@@ -275,15 +285,16 @@
color: $icon-color;
padding: 16px;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
}
.getting-started {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
+ opacity: $column-transparency;
&__wrapper {
- background: $background-color;
+ background: $bg-color;
height: auto !important;
border-bottom: 1px solid $border-color;
}
@@ -303,8 +314,9 @@
}
&__trends {
- background: $background-color;
+ background: $bg-color;
margin-bottom: 0;
+ opacity: $column-transparency;
h4 {
color: $section-text-color;
@@ -358,7 +370,7 @@
}
.announcements {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 0;
&__container { color: $primary-text-color }
@@ -386,6 +398,8 @@
.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 {
.emoji-button {
color: $icon-button-color;
@@ -424,12 +438,13 @@
.notification {
&__filter-bar {
- background: $tab-background-color;
+ background: $tab-bg-color;
border-bottom: 1px solid $border-color;
z-index: 1;
+ opacity: $bar-transparency;
button {
- background: $tab-background-color;
+ background: $tab-bg-color;
color: $tab-indicator-color;
font-size: 16px;
@@ -442,10 +457,10 @@
&::before,
&:after { border: none }
- &:focus { background: $tab-indicator-background-focus-color }
+ &:focus { background: $tab-indicator-bg-focus-color }
}
- &:hover { background: $tab-indicator-background-hover-color }
+ &:hover { background: $tab-indicator-bg-hover-color }
}
}
diff --git a/app/javascript/styles/mastodon-material-light/theme/components.scss b/app/javascript/styles/mastodon-material-light/theme/components.scss
index ae5bfe158..46483923e 100644
--- a/app/javascript/styles/mastodon-material-light/theme/components.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/components.scss
@@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
.drawer {
&__header {
@@ -11,11 +12,12 @@
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
+ opacity: $bar-transparency;
a { transition: none }
a:hover {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
}
}
@@ -40,14 +42,15 @@
}
&__inner {
- background: $card-background-color;
+ background: $card-bg-color;
+ opacity: $column-transparency;
&.darker {
- background: $card-background-color;
+ background: $card-bg-color;
position: inherit;
}
- &__mastodon { background: $card-background-color }
+ &__mastodon { background: $card-bg-color }
}
}
@@ -57,6 +60,7 @@
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
+ opacity: $bar-transparency;
&:focus {
@include shadow-2dp;
@@ -64,6 +68,8 @@
color: $search-bar-text-color;
}
+ &:hover { @include search-bar-hover }
+
&::placeholder { color: $tips-text-color }
}
@@ -112,7 +118,7 @@
.search-results {
&__header {
color: $secondary-text-color;
- background-color: $card-background-color;
+ background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 8px }
@@ -120,7 +126,7 @@
&__section {
h5 {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom: 1px solid $border-color;
padding: 16px;
color: $section-text-color;
@@ -137,6 +143,12 @@
strong {
color: $ui-text-color;
}
+
+ .navigation-bar__actions .compose__action-bar .icon-button {
+ width: 36px !important;
+ height: 36px !important;
+ padding: 8px;
+ }
}
.navigation-panel hr {
@@ -146,7 +158,7 @@
.dropdown-menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
padding: 8px 0;
border-radius: $menu-radius;
@@ -155,11 +167,11 @@
&__item a {
font-size: 14px;
padding: 8px 16px;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $menu-text-color;
&:hover, &:active {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $menu-text-color;
}
}
@@ -173,7 +185,7 @@
.compose-form {
.autosuggest-textarea {
&__textarea {
- background: $text-field-background-color;
+ background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -182,7 +194,7 @@
&__suggestions {
@include shadow-1dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
@@ -192,40 +204,76 @@
padding: 8px;
border-radius: 0;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
&.selected,
&:focus,
- &:active { background: $menu-background-active-color }
+ &:active { background: $menu-bg-active-color }
}
}
}
- .spoiler-input__input {
- color: $ui-text-color;
- background: $card-background-color;
+ .spoiler-input {
+ &.spoiler-input--visible { margin-bottom: 8px }
- &::placeholder { color: $tips-text-color }
+ &__input {
+ color: $ui-text-color;
+ background: $card-bg-color;
+ border-bottom: 1px solid $border-color;
+ border-radius: 0;
+
+ &::placeholder { color: $tips-text-color }
+ }
}
.compose-form {
&__warning {
- @include shadow-1dp;
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
+ border: 1px solid $border-color;
+ border-radius: $card-radius;
a { color: $link-text-color }
}
&__modifiers {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
color: $tips-text-color;
+ padding: 8px;
+
+ .icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ }
+
+ .text-icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ line-height: 20px !important;
+ }
}
&__poll-wrapper {
@@ -235,7 +283,7 @@
select {
color: $ui-text-color;
- background-color: $background-color;
+ background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
@@ -251,20 +299,16 @@
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
-
-
}
- }
- &__utilBtns { padding-top: 0 }
+ .poll__footer { border-top: none }
+ }
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
-.no-reduce-motion .spoiler-input {
- transition-duration: .2s, .2s;
-}
+.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
.poll {
@@ -283,7 +327,7 @@
&__text input[type=text] {
color: $ui-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: 1px solid $border-color;
padding: 8px 12px;
@@ -292,7 +336,7 @@
&__option input[type=text] {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
@@ -300,9 +344,9 @@
&__chart {
border-radius: 0;
- background: $poll-bar-color;
+ background: $progress-indicator-track-color;
- &.leading { background: $poll-bar-leading-color }
+ &.leading { background: $progress-indicator-color }
}
&__footer {
@@ -316,7 +360,7 @@
.privacy-dropdown {
&.active .privacy-dropdown__value.active {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
box-shadow: none;
@@ -325,7 +369,7 @@
&__dropdown {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $dialog-radius;
}
@@ -345,7 +389,7 @@
}
&.active {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -355,7 +399,7 @@
}
&:hover {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
@@ -366,7 +410,7 @@
}
&:hover {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -386,7 +430,7 @@
box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__header { margin-bottom: 4px }
@@ -410,14 +454,15 @@
}
.block-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
justify-content: flex-end;
}
@@ -451,7 +496,7 @@
}
.filter-form {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
@@ -466,18 +511,23 @@
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
@@ -491,7 +541,8 @@
}
.mute-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -500,13 +551,14 @@
&__explanation { margin-top: 16px }
&__action-bar {
- background: $card-background-color;
+ 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;
@@ -531,4 +583,19 @@
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;
+ }
}
\ 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
index 70e22752d..1b42121be 100644
--- a/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
@@ -7,13 +7,13 @@
.emoji-picker-dropdown {
&__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
}
&__modifiers__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
button {
@@ -31,33 +31,23 @@
border: 0 solid $border-color;
&:first-child {
- background: $menu-background-color;
+ background: $menu-bg-color;
}
}
- &-anchors {
- color: $icon-button-color;
- padding: 0;
- }
-
&-anchor {
+ color: $text-tab-indicator-color;
padding: 10px 4px;
- &-selected {
- color: $icon-button-active-color;
- }
+ &-bar { background-color: $icon-tab-indicator-active-color }
- &-bar {
- background-color: $tab-indicator-active-color;
- }
+ &-selected { color: $icon-tab-indicator-hover-color }
- &:hover {
- color: $icon-button-hover-color;
- }
+ &:hover { color: $icon-tab-indicator-hover-color }
}
&-search {
- background: $menu-background-color;
+ background: $menu-bg-color;
input {
outline: none;
@@ -76,16 +66,16 @@
&-scroll {
padding: 0 8px 8px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-category-label span {
padding: 4px 6px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-emoji:hover::before {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
&-no-results { color: $secondary-text-color }
diff --git a/app/javascript/styles/mastodon-material-light/theme/icons.scss b/app/javascript/styles/mastodon-material-light/theme/icons.scss
index 1367647ec..987767544 100644
--- a/app/javascript/styles/mastodon-material-light/theme/icons.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/icons.scss
@@ -16,26 +16,8 @@
&__icon.fa-fw { color: $icon-color }
}
-
-.fa { vertical-align: sub } // adjust material icon font baseline to other font
-
-.fa.fa-times,
-.fa.fa-eraser,
-.fa.fa-plus { vertical-align: middle } // adjustment exception
-
-.fa.fa-check { vertical-align: initial }
-
.fa.fa-lock { text-transform: none }
-.fa-fw { width: 16px }
-
-// icon in tab settings
-.fa.fa-chevron-left.column-back-button__icon.fa-fw,
-.text-btn.column-header__setting-btn .fa.fa-eraser {
- font-size: 20px;
- margin-right: 16px;
-}
-
.icon-with-badge__badge {
background: $badge-color;
border: none;
diff --git a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
index 747856253..f27de96e8 100644
--- a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
@@ -3,8 +3,17 @@
@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,
@@ -64,8 +73,19 @@
&.fa-compress,
&.fa-user-times,
&.fa-check,
- &.fa-quote-right {
- font-family: "Material Icons";
+ &.fa-quote-right,
+ &.fa-upload,
+ &.fa-comments {
+ @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;
}
}
@@ -118,9 +138,11 @@
&.fa-download::before { content: "file_download" }
&.fa-arrows-alt::before { content: "fullscreen" }
&.fa-compress::before { content: "fullscreen_exit" }
- &.fa-user-times::before { content: "delete" }
+ &.fa-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" }
}
// bookmark icon
@@ -148,12 +170,42 @@
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
-.no-reduce-motion button.icon-button i.fa-retweet {
+button.icon-button i.fa-retweet,
+button.icon-button i.fa-retweet:hover {
height: 18px;
width: 18px;
transition: none;
background-image: url('data:image/svg+xml;utf8,');
}
+button.icon-button.disabled i.fa-retweet,
+button.icon-button.disabled i.fa-retweet:hover {
+ 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}
\ No newline at end of file
+.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 { 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 }
\ 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
index 9d0203828..0b8b92acf 100644
--- a/app/javascript/styles/mastodon-material-light/theme/media.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/media.scss
@@ -6,9 +6,9 @@
.media-gallery {
- border-radius: 0;
+ border-radius: $media-radius;
- &__item { border-radius: 0 }
+ &__item { border-radius: $media-radius }
}
.media-modal__close {
@@ -24,7 +24,7 @@
border: 12px;
&:hover {
- background: $media-icon-background-hover-color;
+ background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
@@ -34,7 +34,7 @@
.media-modal {
&__nav {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
height: 48px;
width: 48px;
@@ -50,6 +50,12 @@
&--active { background-color: $media-page-indicator-active-color }
}
+
+ &__meta {
+ bottom: 24px;
+
+ a { color: $media-icon-color }
+ }
}
.video-player {
@@ -75,7 +81,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
@@ -93,7 +99,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
diff --git a/app/javascript/styles/mastodon-material-light/theme/modal.scss b/app/javascript/styles/mastodon-material-light/theme/modal.scss
index 2748c8723..209678c84 100644
--- a/app/javascript/styles/mastodon-material-light/theme/modal.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/modal.scss
@@ -6,7 +6,8 @@
.confirmation-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
@@ -18,7 +19,7 @@
&__action-bar {
justify-content: flex-end;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
}
@@ -42,7 +43,7 @@
}
.actions-modal {
- background: $card-background-color;
+ background: $card-bg-color;
border-radius: $card-radius;
ul li:not(:empty) a {
@@ -50,7 +51,7 @@
font-size: 16px;
&:hover {
- background: $card-background-hover-color;
+ background: $card-bg-hover-color;
color: $ui-text-color;
}
}
@@ -58,7 +59,7 @@
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
@@ -71,7 +72,8 @@
}
.report-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
diff --git a/app/javascript/styles/mastodon-material-light/theme/responsive.scss b/app/javascript/styles/mastodon-material-light/theme/responsive.scss
index 9ae304041..d0e1a6635 100644
--- a/app/javascript/styles/mastodon-material-light/theme/responsive.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/responsive.scss
@@ -81,14 +81,14 @@
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
- background: $tab-indicator-background-hover-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-hover-color;
+ border-bottom-color: $tab-bg-color;
}
&:active,
&:focus {
- background: $tab-indicator-background-focus-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-focus-color;
+ border-bottom-color: $tab-bg-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
index eedf77c2a..d095c2292 100644
--- a/app/javascript/styles/mastodon-material-light/theme/statuses.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/statuses.scss
@@ -86,12 +86,15 @@
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;
@@ -110,7 +113,7 @@
&__actions {
&>div {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
border-radius: $button-radius;
}
@@ -136,7 +139,19 @@
&:hover { background-color: transparent !important }
}
- &:hover { background-color: $card-background-color }
+ &.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 }
}
// Detailed status in mobile
@@ -152,7 +167,7 @@
}
.detailed-status {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__display-name {
@@ -167,7 +182,7 @@
}
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;
diff --git a/app/javascript/styles/material-black.scss b/app/javascript/styles/material-black.scss
index 19f29bc08..345077ab5 100644
--- a/app/javascript/styles/material-black.scss
+++ b/app/javascript/styles/material-black.scss
@@ -1,2 +1,9 @@
+/*
+* Mastodon Material 0.2.0
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
+
@import 'application';
@import '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
index b299981b0..6aa7ebfdb 100644
--- a/app/javascript/styles/material-black/color/black.scss
+++ b/app/javascript/styles/material-black/color/black.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #000000;
-$menu-background-color: #121212;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #121212;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #000000;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #1e1e1e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #121212;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index c3c168316..4ed9a7e07 100644
--- a/app/javascript/styles/material-black/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-black/color/mastodon-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #191b22;
-$menu-background-color: #d9e1e8;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #313543;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #282c37;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #42485a;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #9baec8;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: lighten($background-color, 14%);
-$icon-background-active-color: lighten($background-color, 18%);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,9 +99,9 @@ $border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
-$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+$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;
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #1f232b;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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-light.scss b/app/javascript/styles/material-black/color/mastodon-light.scss
index 54d894fec..d4d84a626 100644
--- a/app/javascript/styles/material-black/color/mastodon-light.scss
+++ b/app/javascript/styles/material-black/color/mastodon-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #eff3f5;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($background-color, 6%);
-$menu-background-active-color: darken($background-color, 10%);
-$menu-background-active-hover-color: darken($background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -55,8 +56,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #282c37;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: darken($background-color, 4%);
-$icon-background-active-color: darken($background-color, 8%);
+$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;
@@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #ffffff;
$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $background-color;
+$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #e6ebf0;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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/plus-classic.scss b/app/javascript/styles/material-black/color/plus-classic.scss
index 60c8370a2..eba9c0f18 100644
--- a/app/javascript/styles/material-black/color/plus-classic.scss
+++ b/app/javascript/styles/material-black/color/plus-classic.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 77cef824f..d925f3d65 100644
--- a/app/javascript/styles/material-black/color/v1-dark.scss
+++ b/app/javascript/styles/material-black/color/v1-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #303030;
-$menu-background-color: #424242;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #424242;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #424242;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
-$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+$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($background-color, 6%);
+$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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #424242;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 64f8d5842..906b8e459 100644
--- a/app/javascript/styles/material-black/color/v1-light.scss
+++ b/app/javascript/styles/material-black/color/v1-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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%);
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$top-bar-unread-icon-color: darken($primary-color, 30%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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-dark.scss b/app/javascript/styles/material-black/color/v2-dark.scss
index 8c575bce5..94c381ee7 100644
--- a/app/javascript/styles/material-black/color/v2-dark.scss
+++ b/app/javascript/styles/material-black/color/v2-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #121212;
-$menu-background-color: #1e1e1e;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #1e1e1e;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 20336e96d..9317004e9 100644
--- a/app/javascript/styles/material-black/color/v2-light.scss
+++ b/app/javascript/styles/material-black/color/v2-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #ffffff;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: $background-color;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: $background-color;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($background-color, 30%);
-$scroll-bar-thumb-active-color: darken($background-color, 38%);
+$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: $background-color;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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/icon_config.scss b/app/javascript/styles/material-black/icon_config.scss
index 610c7e308..99046e176 100644
--- a/app/javascript/styles/material-black/icon_config.scss
+++ b/app/javascript/styles/material-black/icon_config.scss
@@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1
+//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
// Reply icon settings
@@ -16,11 +16,13 @@ $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.
-@font-face {
- font-family: "Material Icons";
- src:
- local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
- //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
\ No newline at end of file
+//$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
index 825deaf8c..926c3325a 100644
--- a/app/javascript/styles/material-black/layout/material-v1.scss
+++ b/app/javascript/styles/material-black/layout/material-v1.scss
@@ -30,6 +30,10 @@ $dialog-radius: 2px;
$menu-radius: 2px;
+// Media radius settings
+$media-radius: 0;
+
+
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
@@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping
//$avater-radius: 2px // Material v1 square
+// Chip settings
+$outlined-chip: false; // Material v1 styled contained chip
+
+
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: true; // Material v1 styled colored button with shadow
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/layout/material-v2.scss b/app/javascript/styles/material-black/layout/material-v2.scss
index 853d82b15..f79f91005 100644
--- a/app/javascript/styles/material-black/layout/material-v2.scss
+++ b/app/javascript/styles/material-black/layout/material-v2.scss
@@ -4,10 +4,12 @@
// 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
@@ -31,6 +33,11 @@ $dialog-radius: 8px;
$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
@@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping
// Chip settings
-// If you want to use contained-chip, please comment out below.
-.reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
-}
+$outlined-chip: true; // Material v2 styled outlined chip
+//$outlined-chip: false; // Material v1 styled contained chip
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: false; // Material v2 styled colored button without shadow
+//$button-shadow: true; // Material v1 styled colored button with shadow
\ 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
index c134cbeeb..d9b3906a5 100644
--- a/app/javascript/styles/material-black/plugins/cards.scss
+++ b/app/javascript/styles/material-black/plugins/cards.scss
@@ -10,13 +10,13 @@
margin: 2px 0 !important;
padding: 8px !important;
- > .scrollable { background: $background-color }
+ > .scrollable { background: $bg-color }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
&__prepend { padding: 8px 8px 2px 0 }
}
@@ -28,7 +28,7 @@
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
diff --git a/app/javascript/styles/material-black/plugins/plus.scss b/app/javascript/styles/material-black/plugins/plus.scss
index 5b220631b..86a5f3e1e 100644
--- a/app/javascript/styles/material-black/plugins/plus.scss
+++ b/app/javascript/styles/material-black/plugins/plus.scss
@@ -14,9 +14,8 @@
// favorite icon
.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+.star-icon.icon-button.active.activate,
+.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
diff --git a/app/javascript/styles/material-black/theme/_mixins.scss b/app/javascript/styles/material-black/theme/_mixins.scss
index 5f573e339..fc965880f 100644
--- a/app/javascript/styles/material-black/theme/_mixins.scss
+++ b/app/javascript/styles/material-black/theme/_mixins.scss
@@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12);
@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 $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 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
index 34a8a1816..b6d517e12 100644
--- a/app/javascript/styles/material-black/theme/account.scss
+++ b/app/javascript/styles/material-black/theme/account.scss
@@ -7,8 +7,8 @@
.account {
border-bottom: 1px solid $border-color;
- .account__display-name { color: $primary-text-color }
- .account__display-name strong { color: $secondary-text-color }
+ .account__display-name,
+ .account__display-name strong { color: $primary-text-color }
&__avatar {
border-radius: $avater-radius;
@@ -29,9 +29,9 @@
&__header {
&__bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
- border-bottom: 1px solid $border-color;
+ border-bottom: none;
.avatar .account__avatar { border: none }
}
@@ -89,7 +89,7 @@
.verified {
border: none;
- background: $verified-background-color;
+ background: $verified-bg-color;
a,
&__mark { color: $primary-text-color }
@@ -105,7 +105,7 @@
dt {
color: $primary-text-color;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
}
dd { color: $primary-text-color }
@@ -113,11 +113,31 @@
}
}
+ &__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-background-color;
+ background: $text-tab-bg-color;
border-bottom: 1px solid $border-color;
a {
@@ -131,10 +151,10 @@
&::before,
&:after { border: none }
- &:focus { background: $text-tab-indicator-background-focus-color }
+ &:focus { background: $text-tab-indicator-bg-focus-color }
}
- &:hover { background: $text-tab-indicator-background-hover-color }
+ &:hover { background: $text-tab-indicator-bg-hover-color }
}
}
}
@@ -150,4 +170,8 @@
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/base_config.scss b/app/javascript/styles/material-black/theme/base_config.scss
index 73ff009e1..13fb4ad75 100644
--- a/app/javascript/styles/material-black/theme/base_config.scss
+++ b/app/javascript/styles/material-black/theme/base_config.scss
@@ -18,10 +18,7 @@
// Search bar hover settings
// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
+$search-bar-hover: false;
// Status font size in timeline
@@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
\ No newline at end of file
+//$name-font-size: 16px; // compatible with material design
+
+
+// Background image
+// If you want to use the local image, please put it in /mastodon-material
+$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-black/theme/basics.scss b/app/javascript/styles/material-black/theme/basics.scss
index 4c122d1c6..32ba6dc8c 100644
--- a/app/javascript/styles/material-black/theme/basics.scss
+++ b/app/javascript/styles/material-black/theme/basics.scss
@@ -4,7 +4,9 @@
@import '../custom_color', '../custom_layout';
-body { background: $background-color }
+body { background: $bg-color }
+
+.focusable:focus { background: transparent }
// Chrome & Safari scroll bar
::-webkit-scrollbar-thumb {
@@ -21,6 +23,4 @@ body { background: $background-color }
}
// Firefox scroll bar
-html {
- scrollbar-color: $scroll-bar-thumb-color transparent;
-}
\ No newline at end of file
+html { scrollbar-color: $scroll-bar-thumb-color transparent }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/button.scss b/app/javascript/styles/material-black/theme/button.scss
index 1231bac98..7c2ad7937 100644
--- a/app/javascript/styles/material-black/theme/button.scss
+++ b/app/javascript/styles/material-black/theme/button.scss
@@ -4,6 +4,8 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+@include button-shadow;
+
.icon-button {
color: $icon-button-color;
border-radius: 50%;
@@ -21,37 +23,54 @@
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
}
&.overlayed {
border-radius: 50%;
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
&:hover {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-hover-color;
}
}
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
- &:active,
- &:focus { background-color: transparent }
+ &:focus { transition: none }
+}
+
+// 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: 12px;
+ font-size: 14px;
+
+ &.active {
+ background-color: $icon-bg-hover-color;
+ color: $icon-button-active-color;
+ }
&:hover {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
color: $icon-button-hover-color;
}
}
@@ -91,7 +110,7 @@
}
.spoiler-button__overlay__label {
- background: $media-icon-background-color;
+ 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-black/theme/columns.scss b/app/javascript/styles/material-black/theme/columns.scss
index 54effffd3..af7776a0c 100644
--- a/app/javascript/styles/material-black/theme/columns.scss
+++ b/app/javascript/styles/material-black/theme/columns.scss
@@ -10,7 +10,10 @@
margin: 10px 8px;
border-radius: $card-radius;
- &>.scrollable { background: $list-background-color }
+ &>.scrollable {
+ background: $list-bg-color;
+ opacity: $column-transparency;
+ }
&:last-child { box-shadow: none }
}
@@ -45,22 +48,23 @@
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
- padding: 10px 12px;
+ padding: 10px;
border-radius: 50%;
+ font-size: 20px;
&.active {
color: $top-bar-icon-active-color;
- background: $icon-background-active-color;
+ background: $icon-bg-active-color;
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
@@ -93,6 +97,7 @@
&__wrapper {
@include shadow-4dp;
border-radius: $bar-radius;
+ opacity: $bar-transparency;
.announcements { border-top: 1px solid $border-color }
@@ -105,11 +110,11 @@
&__collapsible {
color: $ui-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
border-top: 1px solid $border-color;
&-inner {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
}
@@ -119,9 +124,9 @@
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
- padding: 8px;
- margin: auto 0;
- border-radius: 50%;
+ margin: 8px 10px;
+ padding: 10px;
+ font-size: 20px;
span { display: none }
}
@@ -129,21 +134,21 @@
.column-subheading {
color: $section-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 12px 16px;
border-top: 1px solid $border-color;
}
.column-link {
color: $ui-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
- &:hover { background: $list-background-hover-color }
+ &:hover { background: $list-bg-hover-color }
&:active,
- &:focus { background: $list-background-active-color }
+ &:focus { background: $list-bg-active-color }
&__icon {
margin-right: 32px;
@@ -153,9 +158,9 @@
&--transparent {
&.active {
color: $ui-text-color;
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
- &:hover { background: $menu-background-active-hover-color }
+ &:hover { background: $menu-bg-active-hover-color }
.fa { color: $icon-color }
}
@@ -191,14 +196,19 @@
.column-inline-form {
padding: 16px 0 16px 16px;
- background: $card-background-color;
+ background: $card-bg-color;
.icon-button { margin: 0 16px }
}
+.columns-area {
+ background-image: url($bg-image);
+ background-size: contain;
+}
+
.setting-text {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
@@ -206,17 +216,17 @@
.empty-column-indicator {
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
font-size: 16px;
}
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
&--unread {
- background: $list-background-color;
+ background: $list-bg-color;
.conversation__content__relative-time { color: $info-text-color }
}
@@ -275,15 +285,16 @@
color: $icon-color;
padding: 16px;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
}
.getting-started {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
+ opacity: $column-transparency;
&__wrapper {
- background: $background-color;
+ background: $bg-color;
height: auto !important;
border-bottom: 1px solid $border-color;
}
@@ -303,8 +314,9 @@
}
&__trends {
- background: $background-color;
+ background: $bg-color;
margin-bottom: 0;
+ opacity: $column-transparency;
h4 {
color: $section-text-color;
@@ -358,7 +370,7 @@
}
.announcements {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 0;
&__container { color: $primary-text-color }
@@ -386,6 +398,8 @@
.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 {
.emoji-button {
color: $icon-button-color;
@@ -424,12 +438,13 @@
.notification {
&__filter-bar {
- background: $tab-background-color;
+ background: $tab-bg-color;
border-bottom: 1px solid $border-color;
z-index: 1;
+ opacity: $bar-transparency;
button {
- background: $tab-background-color;
+ background: $tab-bg-color;
color: $tab-indicator-color;
font-size: 16px;
@@ -442,10 +457,10 @@
&::before,
&:after { border: none }
- &:focus { background: $tab-indicator-background-focus-color }
+ &:focus { background: $tab-indicator-bg-focus-color }
}
- &:hover { background: $tab-indicator-background-hover-color }
+ &:hover { background: $tab-indicator-bg-hover-color }
}
}
diff --git a/app/javascript/styles/material-black/theme/components.scss b/app/javascript/styles/material-black/theme/components.scss
index ae5bfe158..46483923e 100644
--- a/app/javascript/styles/material-black/theme/components.scss
+++ b/app/javascript/styles/material-black/theme/components.scss
@@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
.drawer {
&__header {
@@ -11,11 +12,12 @@
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
+ opacity: $bar-transparency;
a { transition: none }
a:hover {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
}
}
@@ -40,14 +42,15 @@
}
&__inner {
- background: $card-background-color;
+ background: $card-bg-color;
+ opacity: $column-transparency;
&.darker {
- background: $card-background-color;
+ background: $card-bg-color;
position: inherit;
}
- &__mastodon { background: $card-background-color }
+ &__mastodon { background: $card-bg-color }
}
}
@@ -57,6 +60,7 @@
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
+ opacity: $bar-transparency;
&:focus {
@include shadow-2dp;
@@ -64,6 +68,8 @@
color: $search-bar-text-color;
}
+ &:hover { @include search-bar-hover }
+
&::placeholder { color: $tips-text-color }
}
@@ -112,7 +118,7 @@
.search-results {
&__header {
color: $secondary-text-color;
- background-color: $card-background-color;
+ background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 8px }
@@ -120,7 +126,7 @@
&__section {
h5 {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom: 1px solid $border-color;
padding: 16px;
color: $section-text-color;
@@ -137,6 +143,12 @@
strong {
color: $ui-text-color;
}
+
+ .navigation-bar__actions .compose__action-bar .icon-button {
+ width: 36px !important;
+ height: 36px !important;
+ padding: 8px;
+ }
}
.navigation-panel hr {
@@ -146,7 +158,7 @@
.dropdown-menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
padding: 8px 0;
border-radius: $menu-radius;
@@ -155,11 +167,11 @@
&__item a {
font-size: 14px;
padding: 8px 16px;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $menu-text-color;
&:hover, &:active {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $menu-text-color;
}
}
@@ -173,7 +185,7 @@
.compose-form {
.autosuggest-textarea {
&__textarea {
- background: $text-field-background-color;
+ background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -182,7 +194,7 @@
&__suggestions {
@include shadow-1dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
@@ -192,40 +204,76 @@
padding: 8px;
border-radius: 0;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
&.selected,
&:focus,
- &:active { background: $menu-background-active-color }
+ &:active { background: $menu-bg-active-color }
}
}
}
- .spoiler-input__input {
- color: $ui-text-color;
- background: $card-background-color;
+ .spoiler-input {
+ &.spoiler-input--visible { margin-bottom: 8px }
- &::placeholder { color: $tips-text-color }
+ &__input {
+ color: $ui-text-color;
+ background: $card-bg-color;
+ border-bottom: 1px solid $border-color;
+ border-radius: 0;
+
+ &::placeholder { color: $tips-text-color }
+ }
}
.compose-form {
&__warning {
- @include shadow-1dp;
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
+ border: 1px solid $border-color;
+ border-radius: $card-radius;
a { color: $link-text-color }
}
&__modifiers {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
color: $tips-text-color;
+ padding: 8px;
+
+ .icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ }
+
+ .text-icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ line-height: 20px !important;
+ }
}
&__poll-wrapper {
@@ -235,7 +283,7 @@
select {
color: $ui-text-color;
- background-color: $background-color;
+ background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
@@ -251,20 +299,16 @@
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
-
-
}
- }
- &__utilBtns { padding-top: 0 }
+ .poll__footer { border-top: none }
+ }
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
-.no-reduce-motion .spoiler-input {
- transition-duration: .2s, .2s;
-}
+.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
.poll {
@@ -283,7 +327,7 @@
&__text input[type=text] {
color: $ui-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: 1px solid $border-color;
padding: 8px 12px;
@@ -292,7 +336,7 @@
&__option input[type=text] {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
@@ -300,9 +344,9 @@
&__chart {
border-radius: 0;
- background: $poll-bar-color;
+ background: $progress-indicator-track-color;
- &.leading { background: $poll-bar-leading-color }
+ &.leading { background: $progress-indicator-color }
}
&__footer {
@@ -316,7 +360,7 @@
.privacy-dropdown {
&.active .privacy-dropdown__value.active {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
box-shadow: none;
@@ -325,7 +369,7 @@
&__dropdown {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $dialog-radius;
}
@@ -345,7 +389,7 @@
}
&.active {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -355,7 +399,7 @@
}
&:hover {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
@@ -366,7 +410,7 @@
}
&:hover {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -386,7 +430,7 @@
box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__header { margin-bottom: 4px }
@@ -410,14 +454,15 @@
}
.block-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
justify-content: flex-end;
}
@@ -451,7 +496,7 @@
}
.filter-form {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
@@ -466,18 +511,23 @@
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
@@ -491,7 +541,8 @@
}
.mute-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -500,13 +551,14 @@
&__explanation { margin-top: 16px }
&__action-bar {
- background: $card-background-color;
+ 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;
@@ -531,4 +583,19 @@
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;
+ }
}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/emoji-picker.scss b/app/javascript/styles/material-black/theme/emoji-picker.scss
index 70e22752d..1b42121be 100644
--- a/app/javascript/styles/material-black/theme/emoji-picker.scss
+++ b/app/javascript/styles/material-black/theme/emoji-picker.scss
@@ -7,13 +7,13 @@
.emoji-picker-dropdown {
&__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
}
&__modifiers__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
button {
@@ -31,33 +31,23 @@
border: 0 solid $border-color;
&:first-child {
- background: $menu-background-color;
+ background: $menu-bg-color;
}
}
- &-anchors {
- color: $icon-button-color;
- padding: 0;
- }
-
&-anchor {
+ color: $text-tab-indicator-color;
padding: 10px 4px;
- &-selected {
- color: $icon-button-active-color;
- }
+ &-bar { background-color: $icon-tab-indicator-active-color }
- &-bar {
- background-color: $tab-indicator-active-color;
- }
+ &-selected { color: $icon-tab-indicator-hover-color }
- &:hover {
- color: $icon-button-hover-color;
- }
+ &:hover { color: $icon-tab-indicator-hover-color }
}
&-search {
- background: $menu-background-color;
+ background: $menu-bg-color;
input {
outline: none;
@@ -76,16 +66,16 @@
&-scroll {
padding: 0 8px 8px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-category-label span {
padding: 4px 6px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-emoji:hover::before {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
&-no-results { color: $secondary-text-color }
diff --git a/app/javascript/styles/material-black/theme/icons.scss b/app/javascript/styles/material-black/theme/icons.scss
index 1367647ec..987767544 100644
--- a/app/javascript/styles/material-black/theme/icons.scss
+++ b/app/javascript/styles/material-black/theme/icons.scss
@@ -16,26 +16,8 @@
&__icon.fa-fw { color: $icon-color }
}
-
-.fa { vertical-align: sub } // adjust material icon font baseline to other font
-
-.fa.fa-times,
-.fa.fa-eraser,
-.fa.fa-plus { vertical-align: middle } // adjustment exception
-
-.fa.fa-check { vertical-align: initial }
-
.fa.fa-lock { text-transform: none }
-.fa-fw { width: 16px }
-
-// icon in tab settings
-.fa.fa-chevron-left.column-back-button__icon.fa-fw,
-.text-btn.column-header__setting-btn .fa.fa-eraser {
- font-size: 20px;
- margin-right: 16px;
-}
-
.icon-with-badge__badge {
background: $badge-color;
border: none;
diff --git a/app/javascript/styles/material-black/theme/material-icons.scss b/app/javascript/styles/material-black/theme/material-icons.scss
index 747856253..f27de96e8 100644
--- a/app/javascript/styles/material-black/theme/material-icons.scss
+++ b/app/javascript/styles/material-black/theme/material-icons.scss
@@ -3,8 +3,17 @@
@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,
@@ -64,8 +73,19 @@
&.fa-compress,
&.fa-user-times,
&.fa-check,
- &.fa-quote-right {
- font-family: "Material Icons";
+ &.fa-quote-right,
+ &.fa-upload,
+ &.fa-comments {
+ @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;
}
}
@@ -118,9 +138,11 @@
&.fa-download::before { content: "file_download" }
&.fa-arrows-alt::before { content: "fullscreen" }
&.fa-compress::before { content: "fullscreen_exit" }
- &.fa-user-times::before { content: "delete" }
+ &.fa-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" }
}
// bookmark icon
@@ -148,12 +170,42 @@
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
-.no-reduce-motion button.icon-button i.fa-retweet {
+button.icon-button i.fa-retweet,
+button.icon-button i.fa-retweet:hover {
height: 18px;
width: 18px;
transition: none;
background-image: url('data:image/svg+xml;utf8,');
}
+button.icon-button.disabled i.fa-retweet,
+button.icon-button.disabled i.fa-retweet:hover {
+ 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}
\ No newline at end of file
+.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 { 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 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/media.scss b/app/javascript/styles/material-black/theme/media.scss
index 9d0203828..0b8b92acf 100644
--- a/app/javascript/styles/material-black/theme/media.scss
+++ b/app/javascript/styles/material-black/theme/media.scss
@@ -6,9 +6,9 @@
.media-gallery {
- border-radius: 0;
+ border-radius: $media-radius;
- &__item { border-radius: 0 }
+ &__item { border-radius: $media-radius }
}
.media-modal__close {
@@ -24,7 +24,7 @@
border: 12px;
&:hover {
- background: $media-icon-background-hover-color;
+ background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
@@ -34,7 +34,7 @@
.media-modal {
&__nav {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
height: 48px;
width: 48px;
@@ -50,6 +50,12 @@
&--active { background-color: $media-page-indicator-active-color }
}
+
+ &__meta {
+ bottom: 24px;
+
+ a { color: $media-icon-color }
+ }
}
.video-player {
@@ -75,7 +81,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
@@ -93,7 +99,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
diff --git a/app/javascript/styles/material-black/theme/modal.scss b/app/javascript/styles/material-black/theme/modal.scss
index 2748c8723..209678c84 100644
--- a/app/javascript/styles/material-black/theme/modal.scss
+++ b/app/javascript/styles/material-black/theme/modal.scss
@@ -6,7 +6,8 @@
.confirmation-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
@@ -18,7 +19,7 @@
&__action-bar {
justify-content: flex-end;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
}
@@ -42,7 +43,7 @@
}
.actions-modal {
- background: $card-background-color;
+ background: $card-bg-color;
border-radius: $card-radius;
ul li:not(:empty) a {
@@ -50,7 +51,7 @@
font-size: 16px;
&:hover {
- background: $card-background-hover-color;
+ background: $card-bg-hover-color;
color: $ui-text-color;
}
}
@@ -58,7 +59,7 @@
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
@@ -71,7 +72,8 @@
}
.report-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
diff --git a/app/javascript/styles/material-black/theme/responsive.scss b/app/javascript/styles/material-black/theme/responsive.scss
index 9ae304041..d0e1a6635 100644
--- a/app/javascript/styles/material-black/theme/responsive.scss
+++ b/app/javascript/styles/material-black/theme/responsive.scss
@@ -81,14 +81,14 @@
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
- background: $tab-indicator-background-hover-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-hover-color;
+ border-bottom-color: $tab-bg-color;
}
&:active,
&:focus {
- background: $tab-indicator-background-focus-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-focus-color;
+ border-bottom-color: $tab-bg-color;
}
}
}
\ 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
index eedf77c2a..d095c2292 100644
--- a/app/javascript/styles/material-black/theme/statuses.scss
+++ b/app/javascript/styles/material-black/theme/statuses.scss
@@ -86,12 +86,15 @@
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;
@@ -110,7 +113,7 @@
&__actions {
&>div {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
border-radius: $button-radius;
}
@@ -136,7 +139,19 @@
&:hover { background-color: transparent !important }
}
- &:hover { background-color: $card-background-color }
+ &.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 }
}
// Detailed status in mobile
@@ -152,7 +167,7 @@
}
.detailed-status {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__display-name {
@@ -167,7 +182,7 @@
}
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;
diff --git a/app/javascript/styles/material-dark.scss b/app/javascript/styles/material-dark.scss
index 8cfd6c6be..ee4230ba9 100644
--- a/app/javascript/styles/material-dark.scss
+++ b/app/javascript/styles/material-dark.scss
@@ -1,2 +1,9 @@
+/*
+* Mastodon Material 0.2.0
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
+
@import 'application';
@import '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
index b299981b0..6aa7ebfdb 100644
--- a/app/javascript/styles/material-dark/color/black.scss
+++ b/app/javascript/styles/material-dark/color/black.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #000000;
-$menu-background-color: #121212;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #121212;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #000000;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #1e1e1e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #121212;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index c3c168316..4ed9a7e07 100644
--- a/app/javascript/styles/material-dark/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-dark/color/mastodon-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #191b22;
-$menu-background-color: #d9e1e8;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #313543;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #282c37;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #42485a;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #9baec8;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: lighten($background-color, 14%);
-$icon-background-active-color: lighten($background-color, 18%);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,9 +99,9 @@ $border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
-$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+$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;
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #1f232b;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 54d894fec..d4d84a626 100644
--- a/app/javascript/styles/material-dark/color/mastodon-light.scss
+++ b/app/javascript/styles/material-dark/color/mastodon-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #eff3f5;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($background-color, 6%);
-$menu-background-active-color: darken($background-color, 10%);
-$menu-background-active-hover-color: darken($background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -55,8 +56,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #282c37;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: darken($background-color, 4%);
-$icon-background-active-color: darken($background-color, 8%);
+$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;
@@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #ffffff;
$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $background-color;
+$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #e6ebf0;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 60c8370a2..eba9c0f18 100644
--- a/app/javascript/styles/material-dark/color/plus-classic.scss
+++ b/app/javascript/styles/material-dark/color/plus-classic.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 77cef824f..d925f3d65 100644
--- a/app/javascript/styles/material-dark/color/v1-dark.scss
+++ b/app/javascript/styles/material-dark/color/v1-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #303030;
-$menu-background-color: #424242;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #424242;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #424242;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
-$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+$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($background-color, 6%);
+$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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #424242;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 64f8d5842..906b8e459 100644
--- a/app/javascript/styles/material-dark/color/v1-light.scss
+++ b/app/javascript/styles/material-dark/color/v1-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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%);
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$top-bar-unread-icon-color: darken($primary-color, 30%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 8c575bce5..94c381ee7 100644
--- a/app/javascript/styles/material-dark/color/v2-dark.scss
+++ b/app/javascript/styles/material-dark/color/v2-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #121212;
-$menu-background-color: #1e1e1e;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #1e1e1e;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 20336e96d..9317004e9 100644
--- a/app/javascript/styles/material-dark/color/v2-light.scss
+++ b/app/javascript/styles/material-dark/color/v2-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #ffffff;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: $background-color;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: $background-color;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($background-color, 30%);
-$scroll-bar-thumb-active-color: darken($background-color, 38%);
+$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: $background-color;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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/icon_config.scss b/app/javascript/styles/material-dark/icon_config.scss
index 610c7e308..99046e176 100644
--- a/app/javascript/styles/material-dark/icon_config.scss
+++ b/app/javascript/styles/material-dark/icon_config.scss
@@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1
+//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
// Reply icon settings
@@ -16,11 +16,13 @@ $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.
-@font-face {
- font-family: "Material Icons";
- src:
- local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
- //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
\ No newline at end of file
+//$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
index 825deaf8c..926c3325a 100644
--- a/app/javascript/styles/material-dark/layout/material-v1.scss
+++ b/app/javascript/styles/material-dark/layout/material-v1.scss
@@ -30,6 +30,10 @@ $dialog-radius: 2px;
$menu-radius: 2px;
+// Media radius settings
+$media-radius: 0;
+
+
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
@@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping
//$avater-radius: 2px // Material v1 square
+// Chip settings
+$outlined-chip: false; // Material v1 styled contained chip
+
+
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: true; // Material v1 styled colored button with shadow
\ 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
index 853d82b15..f79f91005 100644
--- a/app/javascript/styles/material-dark/layout/material-v2.scss
+++ b/app/javascript/styles/material-dark/layout/material-v2.scss
@@ -4,10 +4,12 @@
// 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
@@ -31,6 +33,11 @@ $dialog-radius: 8px;
$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
@@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping
// Chip settings
-// If you want to use contained-chip, please comment out below.
-.reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
-}
+$outlined-chip: true; // Material v2 styled outlined chip
+//$outlined-chip: false; // Material v1 styled contained chip
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: false; // Material v2 styled colored button without shadow
+//$button-shadow: true; // Material v1 styled colored button with shadow
\ 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
index c134cbeeb..d9b3906a5 100644
--- a/app/javascript/styles/material-dark/plugins/cards.scss
+++ b/app/javascript/styles/material-dark/plugins/cards.scss
@@ -10,13 +10,13 @@
margin: 2px 0 !important;
padding: 8px !important;
- > .scrollable { background: $background-color }
+ > .scrollable { background: $bg-color }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
&__prepend { padding: 8px 8px 2px 0 }
}
@@ -28,7 +28,7 @@
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
diff --git a/app/javascript/styles/material-dark/plugins/plus.scss b/app/javascript/styles/material-dark/plugins/plus.scss
index 5b220631b..86a5f3e1e 100644
--- a/app/javascript/styles/material-dark/plugins/plus.scss
+++ b/app/javascript/styles/material-dark/plugins/plus.scss
@@ -14,9 +14,8 @@
// favorite icon
.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+.star-icon.icon-button.active.activate,
+.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
diff --git a/app/javascript/styles/material-dark/theme/_mixins.scss b/app/javascript/styles/material-dark/theme/_mixins.scss
index 5f573e339..fc965880f 100644
--- a/app/javascript/styles/material-dark/theme/_mixins.scss
+++ b/app/javascript/styles/material-dark/theme/_mixins.scss
@@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12);
@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 $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 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
index 34a8a1816..b6d517e12 100644
--- a/app/javascript/styles/material-dark/theme/account.scss
+++ b/app/javascript/styles/material-dark/theme/account.scss
@@ -7,8 +7,8 @@
.account {
border-bottom: 1px solid $border-color;
- .account__display-name { color: $primary-text-color }
- .account__display-name strong { color: $secondary-text-color }
+ .account__display-name,
+ .account__display-name strong { color: $primary-text-color }
&__avatar {
border-radius: $avater-radius;
@@ -29,9 +29,9 @@
&__header {
&__bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
- border-bottom: 1px solid $border-color;
+ border-bottom: none;
.avatar .account__avatar { border: none }
}
@@ -89,7 +89,7 @@
.verified {
border: none;
- background: $verified-background-color;
+ background: $verified-bg-color;
a,
&__mark { color: $primary-text-color }
@@ -105,7 +105,7 @@
dt {
color: $primary-text-color;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
}
dd { color: $primary-text-color }
@@ -113,11 +113,31 @@
}
}
+ &__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-background-color;
+ background: $text-tab-bg-color;
border-bottom: 1px solid $border-color;
a {
@@ -131,10 +151,10 @@
&::before,
&:after { border: none }
- &:focus { background: $text-tab-indicator-background-focus-color }
+ &:focus { background: $text-tab-indicator-bg-focus-color }
}
- &:hover { background: $text-tab-indicator-background-hover-color }
+ &:hover { background: $text-tab-indicator-bg-hover-color }
}
}
}
@@ -150,4 +170,8 @@
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
index 73ff009e1..13fb4ad75 100644
--- a/app/javascript/styles/material-dark/theme/base_config.scss
+++ b/app/javascript/styles/material-dark/theme/base_config.scss
@@ -18,10 +18,7 @@
// Search bar hover settings
// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
+$search-bar-hover: false;
// Status font size in timeline
@@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
\ No newline at end of file
+//$name-font-size: 16px; // compatible with material design
+
+
+// Background image
+// If you want to use the local image, please put it in /mastodon-material
+$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
index 4c122d1c6..32ba6dc8c 100644
--- a/app/javascript/styles/material-dark/theme/basics.scss
+++ b/app/javascript/styles/material-dark/theme/basics.scss
@@ -4,7 +4,9 @@
@import '../custom_color', '../custom_layout';
-body { background: $background-color }
+body { background: $bg-color }
+
+.focusable:focus { background: transparent }
// Chrome & Safari scroll bar
::-webkit-scrollbar-thumb {
@@ -21,6 +23,4 @@ body { background: $background-color }
}
// Firefox scroll bar
-html {
- scrollbar-color: $scroll-bar-thumb-color transparent;
-}
\ No newline at end of file
+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
index 1231bac98..7c2ad7937 100644
--- a/app/javascript/styles/material-dark/theme/button.scss
+++ b/app/javascript/styles/material-dark/theme/button.scss
@@ -4,6 +4,8 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+@include button-shadow;
+
.icon-button {
color: $icon-button-color;
border-radius: 50%;
@@ -21,37 +23,54 @@
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
}
&.overlayed {
border-radius: 50%;
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
&:hover {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-hover-color;
}
}
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
- &:active,
- &:focus { background-color: transparent }
+ &:focus { transition: none }
+}
+
+// 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: 12px;
+ font-size: 14px;
+
+ &.active {
+ background-color: $icon-bg-hover-color;
+ color: $icon-button-active-color;
+ }
&:hover {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
color: $icon-button-hover-color;
}
}
@@ -91,7 +110,7 @@
}
.spoiler-button__overlay__label {
- background: $media-icon-background-color;
+ 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
index 54effffd3..af7776a0c 100644
--- a/app/javascript/styles/material-dark/theme/columns.scss
+++ b/app/javascript/styles/material-dark/theme/columns.scss
@@ -10,7 +10,10 @@
margin: 10px 8px;
border-radius: $card-radius;
- &>.scrollable { background: $list-background-color }
+ &>.scrollable {
+ background: $list-bg-color;
+ opacity: $column-transparency;
+ }
&:last-child { box-shadow: none }
}
@@ -45,22 +48,23 @@
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
- padding: 10px 12px;
+ padding: 10px;
border-radius: 50%;
+ font-size: 20px;
&.active {
color: $top-bar-icon-active-color;
- background: $icon-background-active-color;
+ background: $icon-bg-active-color;
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
@@ -93,6 +97,7 @@
&__wrapper {
@include shadow-4dp;
border-radius: $bar-radius;
+ opacity: $bar-transparency;
.announcements { border-top: 1px solid $border-color }
@@ -105,11 +110,11 @@
&__collapsible {
color: $ui-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
border-top: 1px solid $border-color;
&-inner {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
}
@@ -119,9 +124,9 @@
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
- padding: 8px;
- margin: auto 0;
- border-radius: 50%;
+ margin: 8px 10px;
+ padding: 10px;
+ font-size: 20px;
span { display: none }
}
@@ -129,21 +134,21 @@
.column-subheading {
color: $section-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 12px 16px;
border-top: 1px solid $border-color;
}
.column-link {
color: $ui-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
- &:hover { background: $list-background-hover-color }
+ &:hover { background: $list-bg-hover-color }
&:active,
- &:focus { background: $list-background-active-color }
+ &:focus { background: $list-bg-active-color }
&__icon {
margin-right: 32px;
@@ -153,9 +158,9 @@
&--transparent {
&.active {
color: $ui-text-color;
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
- &:hover { background: $menu-background-active-hover-color }
+ &:hover { background: $menu-bg-active-hover-color }
.fa { color: $icon-color }
}
@@ -191,14 +196,19 @@
.column-inline-form {
padding: 16px 0 16px 16px;
- background: $card-background-color;
+ background: $card-bg-color;
.icon-button { margin: 0 16px }
}
+.columns-area {
+ background-image: url($bg-image);
+ background-size: contain;
+}
+
.setting-text {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
@@ -206,17 +216,17 @@
.empty-column-indicator {
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
font-size: 16px;
}
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
&--unread {
- background: $list-background-color;
+ background: $list-bg-color;
.conversation__content__relative-time { color: $info-text-color }
}
@@ -275,15 +285,16 @@
color: $icon-color;
padding: 16px;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
}
.getting-started {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
+ opacity: $column-transparency;
&__wrapper {
- background: $background-color;
+ background: $bg-color;
height: auto !important;
border-bottom: 1px solid $border-color;
}
@@ -303,8 +314,9 @@
}
&__trends {
- background: $background-color;
+ background: $bg-color;
margin-bottom: 0;
+ opacity: $column-transparency;
h4 {
color: $section-text-color;
@@ -358,7 +370,7 @@
}
.announcements {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 0;
&__container { color: $primary-text-color }
@@ -386,6 +398,8 @@
.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 {
.emoji-button {
color: $icon-button-color;
@@ -424,12 +438,13 @@
.notification {
&__filter-bar {
- background: $tab-background-color;
+ background: $tab-bg-color;
border-bottom: 1px solid $border-color;
z-index: 1;
+ opacity: $bar-transparency;
button {
- background: $tab-background-color;
+ background: $tab-bg-color;
color: $tab-indicator-color;
font-size: 16px;
@@ -442,10 +457,10 @@
&::before,
&:after { border: none }
- &:focus { background: $tab-indicator-background-focus-color }
+ &:focus { background: $tab-indicator-bg-focus-color }
}
- &:hover { background: $tab-indicator-background-hover-color }
+ &:hover { background: $tab-indicator-bg-hover-color }
}
}
diff --git a/app/javascript/styles/material-dark/theme/components.scss b/app/javascript/styles/material-dark/theme/components.scss
index ae5bfe158..46483923e 100644
--- a/app/javascript/styles/material-dark/theme/components.scss
+++ b/app/javascript/styles/material-dark/theme/components.scss
@@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
.drawer {
&__header {
@@ -11,11 +12,12 @@
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
+ opacity: $bar-transparency;
a { transition: none }
a:hover {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
}
}
@@ -40,14 +42,15 @@
}
&__inner {
- background: $card-background-color;
+ background: $card-bg-color;
+ opacity: $column-transparency;
&.darker {
- background: $card-background-color;
+ background: $card-bg-color;
position: inherit;
}
- &__mastodon { background: $card-background-color }
+ &__mastodon { background: $card-bg-color }
}
}
@@ -57,6 +60,7 @@
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
+ opacity: $bar-transparency;
&:focus {
@include shadow-2dp;
@@ -64,6 +68,8 @@
color: $search-bar-text-color;
}
+ &:hover { @include search-bar-hover }
+
&::placeholder { color: $tips-text-color }
}
@@ -112,7 +118,7 @@
.search-results {
&__header {
color: $secondary-text-color;
- background-color: $card-background-color;
+ background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 8px }
@@ -120,7 +126,7 @@
&__section {
h5 {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom: 1px solid $border-color;
padding: 16px;
color: $section-text-color;
@@ -137,6 +143,12 @@
strong {
color: $ui-text-color;
}
+
+ .navigation-bar__actions .compose__action-bar .icon-button {
+ width: 36px !important;
+ height: 36px !important;
+ padding: 8px;
+ }
}
.navigation-panel hr {
@@ -146,7 +158,7 @@
.dropdown-menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
padding: 8px 0;
border-radius: $menu-radius;
@@ -155,11 +167,11 @@
&__item a {
font-size: 14px;
padding: 8px 16px;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $menu-text-color;
&:hover, &:active {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $menu-text-color;
}
}
@@ -173,7 +185,7 @@
.compose-form {
.autosuggest-textarea {
&__textarea {
- background: $text-field-background-color;
+ background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -182,7 +194,7 @@
&__suggestions {
@include shadow-1dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
@@ -192,40 +204,76 @@
padding: 8px;
border-radius: 0;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
&.selected,
&:focus,
- &:active { background: $menu-background-active-color }
+ &:active { background: $menu-bg-active-color }
}
}
}
- .spoiler-input__input {
- color: $ui-text-color;
- background: $card-background-color;
+ .spoiler-input {
+ &.spoiler-input--visible { margin-bottom: 8px }
- &::placeholder { color: $tips-text-color }
+ &__input {
+ color: $ui-text-color;
+ background: $card-bg-color;
+ border-bottom: 1px solid $border-color;
+ border-radius: 0;
+
+ &::placeholder { color: $tips-text-color }
+ }
}
.compose-form {
&__warning {
- @include shadow-1dp;
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
+ border: 1px solid $border-color;
+ border-radius: $card-radius;
a { color: $link-text-color }
}
&__modifiers {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
color: $tips-text-color;
+ padding: 8px;
+
+ .icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ }
+
+ .text-icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ line-height: 20px !important;
+ }
}
&__poll-wrapper {
@@ -235,7 +283,7 @@
select {
color: $ui-text-color;
- background-color: $background-color;
+ background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
@@ -251,20 +299,16 @@
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
-
-
}
- }
- &__utilBtns { padding-top: 0 }
+ .poll__footer { border-top: none }
+ }
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
-.no-reduce-motion .spoiler-input {
- transition-duration: .2s, .2s;
-}
+.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
.poll {
@@ -283,7 +327,7 @@
&__text input[type=text] {
color: $ui-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: 1px solid $border-color;
padding: 8px 12px;
@@ -292,7 +336,7 @@
&__option input[type=text] {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
@@ -300,9 +344,9 @@
&__chart {
border-radius: 0;
- background: $poll-bar-color;
+ background: $progress-indicator-track-color;
- &.leading { background: $poll-bar-leading-color }
+ &.leading { background: $progress-indicator-color }
}
&__footer {
@@ -316,7 +360,7 @@
.privacy-dropdown {
&.active .privacy-dropdown__value.active {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
box-shadow: none;
@@ -325,7 +369,7 @@
&__dropdown {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $dialog-radius;
}
@@ -345,7 +389,7 @@
}
&.active {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -355,7 +399,7 @@
}
&:hover {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
@@ -366,7 +410,7 @@
}
&:hover {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -386,7 +430,7 @@
box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__header { margin-bottom: 4px }
@@ -410,14 +454,15 @@
}
.block-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
justify-content: flex-end;
}
@@ -451,7 +496,7 @@
}
.filter-form {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
@@ -466,18 +511,23 @@
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
@@ -491,7 +541,8 @@
}
.mute-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -500,13 +551,14 @@
&__explanation { margin-top: 16px }
&__action-bar {
- background: $card-background-color;
+ 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;
@@ -531,4 +583,19 @@
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;
+ }
}
\ 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
index 70e22752d..1b42121be 100644
--- a/app/javascript/styles/material-dark/theme/emoji-picker.scss
+++ b/app/javascript/styles/material-dark/theme/emoji-picker.scss
@@ -7,13 +7,13 @@
.emoji-picker-dropdown {
&__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
}
&__modifiers__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
button {
@@ -31,33 +31,23 @@
border: 0 solid $border-color;
&:first-child {
- background: $menu-background-color;
+ background: $menu-bg-color;
}
}
- &-anchors {
- color: $icon-button-color;
- padding: 0;
- }
-
&-anchor {
+ color: $text-tab-indicator-color;
padding: 10px 4px;
- &-selected {
- color: $icon-button-active-color;
- }
+ &-bar { background-color: $icon-tab-indicator-active-color }
- &-bar {
- background-color: $tab-indicator-active-color;
- }
+ &-selected { color: $icon-tab-indicator-hover-color }
- &:hover {
- color: $icon-button-hover-color;
- }
+ &:hover { color: $icon-tab-indicator-hover-color }
}
&-search {
- background: $menu-background-color;
+ background: $menu-bg-color;
input {
outline: none;
@@ -76,16 +66,16 @@
&-scroll {
padding: 0 8px 8px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-category-label span {
padding: 4px 6px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-emoji:hover::before {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
&-no-results { color: $secondary-text-color }
diff --git a/app/javascript/styles/material-dark/theme/icons.scss b/app/javascript/styles/material-dark/theme/icons.scss
index 1367647ec..987767544 100644
--- a/app/javascript/styles/material-dark/theme/icons.scss
+++ b/app/javascript/styles/material-dark/theme/icons.scss
@@ -16,26 +16,8 @@
&__icon.fa-fw { color: $icon-color }
}
-
-.fa { vertical-align: sub } // adjust material icon font baseline to other font
-
-.fa.fa-times,
-.fa.fa-eraser,
-.fa.fa-plus { vertical-align: middle } // adjustment exception
-
-.fa.fa-check { vertical-align: initial }
-
.fa.fa-lock { text-transform: none }
-.fa-fw { width: 16px }
-
-// icon in tab settings
-.fa.fa-chevron-left.column-back-button__icon.fa-fw,
-.text-btn.column-header__setting-btn .fa.fa-eraser {
- font-size: 20px;
- margin-right: 16px;
-}
-
.icon-with-badge__badge {
background: $badge-color;
border: none;
diff --git a/app/javascript/styles/material-dark/theme/material-icons.scss b/app/javascript/styles/material-dark/theme/material-icons.scss
index 747856253..f27de96e8 100644
--- a/app/javascript/styles/material-dark/theme/material-icons.scss
+++ b/app/javascript/styles/material-dark/theme/material-icons.scss
@@ -3,8 +3,17 @@
@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,
@@ -64,8 +73,19 @@
&.fa-compress,
&.fa-user-times,
&.fa-check,
- &.fa-quote-right {
- font-family: "Material Icons";
+ &.fa-quote-right,
+ &.fa-upload,
+ &.fa-comments {
+ @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;
}
}
@@ -118,9 +138,11 @@
&.fa-download::before { content: "file_download" }
&.fa-arrows-alt::before { content: "fullscreen" }
&.fa-compress::before { content: "fullscreen_exit" }
- &.fa-user-times::before { content: "delete" }
+ &.fa-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" }
}
// bookmark icon
@@ -148,12 +170,42 @@
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
-.no-reduce-motion button.icon-button i.fa-retweet {
+button.icon-button i.fa-retweet,
+button.icon-button i.fa-retweet:hover {
height: 18px;
width: 18px;
transition: none;
background-image: url('data:image/svg+xml;utf8,');
}
+button.icon-button.disabled i.fa-retweet,
+button.icon-button.disabled i.fa-retweet:hover {
+ 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}
\ No newline at end of file
+.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 { 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 }
\ 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
index 9d0203828..0b8b92acf 100644
--- a/app/javascript/styles/material-dark/theme/media.scss
+++ b/app/javascript/styles/material-dark/theme/media.scss
@@ -6,9 +6,9 @@
.media-gallery {
- border-radius: 0;
+ border-radius: $media-radius;
- &__item { border-radius: 0 }
+ &__item { border-radius: $media-radius }
}
.media-modal__close {
@@ -24,7 +24,7 @@
border: 12px;
&:hover {
- background: $media-icon-background-hover-color;
+ background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
@@ -34,7 +34,7 @@
.media-modal {
&__nav {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
height: 48px;
width: 48px;
@@ -50,6 +50,12 @@
&--active { background-color: $media-page-indicator-active-color }
}
+
+ &__meta {
+ bottom: 24px;
+
+ a { color: $media-icon-color }
+ }
}
.video-player {
@@ -75,7 +81,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
@@ -93,7 +99,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
diff --git a/app/javascript/styles/material-dark/theme/modal.scss b/app/javascript/styles/material-dark/theme/modal.scss
index 2748c8723..209678c84 100644
--- a/app/javascript/styles/material-dark/theme/modal.scss
+++ b/app/javascript/styles/material-dark/theme/modal.scss
@@ -6,7 +6,8 @@
.confirmation-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
@@ -18,7 +19,7 @@
&__action-bar {
justify-content: flex-end;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
}
@@ -42,7 +43,7 @@
}
.actions-modal {
- background: $card-background-color;
+ background: $card-bg-color;
border-radius: $card-radius;
ul li:not(:empty) a {
@@ -50,7 +51,7 @@
font-size: 16px;
&:hover {
- background: $card-background-hover-color;
+ background: $card-bg-hover-color;
color: $ui-text-color;
}
}
@@ -58,7 +59,7 @@
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
@@ -71,7 +72,8 @@
}
.report-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
diff --git a/app/javascript/styles/material-dark/theme/responsive.scss b/app/javascript/styles/material-dark/theme/responsive.scss
index 9ae304041..d0e1a6635 100644
--- a/app/javascript/styles/material-dark/theme/responsive.scss
+++ b/app/javascript/styles/material-dark/theme/responsive.scss
@@ -81,14 +81,14 @@
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
- background: $tab-indicator-background-hover-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-hover-color;
+ border-bottom-color: $tab-bg-color;
}
&:active,
&:focus {
- background: $tab-indicator-background-focus-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-focus-color;
+ border-bottom-color: $tab-bg-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
index eedf77c2a..d095c2292 100644
--- a/app/javascript/styles/material-dark/theme/statuses.scss
+++ b/app/javascript/styles/material-dark/theme/statuses.scss
@@ -86,12 +86,15 @@
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;
@@ -110,7 +113,7 @@
&__actions {
&>div {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
border-radius: $button-radius;
}
@@ -136,7 +139,19 @@
&:hover { background-color: transparent !important }
}
- &:hover { background-color: $card-background-color }
+ &.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 }
}
// Detailed status in mobile
@@ -152,7 +167,7 @@
}
.detailed-status {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__display-name {
@@ -167,7 +182,7 @@
}
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;
diff --git a/app/javascript/styles/material-light.scss b/app/javascript/styles/material-light.scss
index 9818f14f5..228057b12 100644
--- a/app/javascript/styles/material-light.scss
+++ b/app/javascript/styles/material-light.scss
@@ -1,2 +1,9 @@
+/*
+* Mastodon Material 0.2.0
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
+
@import 'application';
@import '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
index b299981b0..6aa7ebfdb 100644
--- a/app/javascript/styles/material-light/color/black.scss
+++ b/app/javascript/styles/material-light/color/black.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #000000;
-$menu-background-color: #121212;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #121212;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #000000;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #1e1e1e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #121212;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index c3c168316..4ed9a7e07 100644
--- a/app/javascript/styles/material-light/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-light/color/mastodon-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #191b22;
-$menu-background-color: #d9e1e8;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #313543;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #282c37;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #42485a;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #9baec8;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: lighten($background-color, 14%);
-$icon-background-active-color: lighten($background-color, 18%);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,9 +99,9 @@ $border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
-$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+$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;
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #1f232b;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 54d894fec..d4d84a626 100644
--- a/app/javascript/styles/material-light/color/mastodon-light.scss
+++ b/app/javascript/styles/material-light/color/mastodon-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #eff3f5;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($background-color, 6%);
-$menu-background-active-color: darken($background-color, 10%);
-$menu-background-active-hover-color: darken($background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -55,8 +56,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #282c37;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: darken($background-color, 4%);
-$icon-background-active-color: darken($background-color, 8%);
+$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;
@@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #ffffff;
$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $background-color;
+$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #e6ebf0;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 60c8370a2..eba9c0f18 100644
--- a/app/javascript/styles/material-light/color/plus-classic.scss
+++ b/app/javascript/styles/material-light/color/plus-classic.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 77cef824f..d925f3d65 100644
--- a/app/javascript/styles/material-light/color/v1-dark.scss
+++ b/app/javascript/styles/material-light/color/v1-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #303030;
-$menu-background-color: #424242;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #424242;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #424242;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
-$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+$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($background-color, 6%);
+$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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #424242;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 64f8d5842..906b8e459 100644
--- a/app/javascript/styles/material-light/color/v1-light.scss
+++ b/app/javascript/styles/material-light/color/v1-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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%);
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$top-bar-unread-icon-color: darken($primary-color, 30%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 8c575bce5..94c381ee7 100644
--- a/app/javascript/styles/material-light/color/v2-dark.scss
+++ b/app/javascript/styles/material-light/color/v2-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #121212;
-$menu-background-color: #1e1e1e;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #1e1e1e;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 20336e96d..9317004e9 100644
--- a/app/javascript/styles/material-light/color/v2-light.scss
+++ b/app/javascript/styles/material-light/color/v2-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #ffffff;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: $background-color;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: $background-color;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($background-color, 30%);
-$scroll-bar-thumb-active-color: darken($background-color, 38%);
+$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: $background-color;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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/icon_config.scss b/app/javascript/styles/material-light/icon_config.scss
index 610c7e308..99046e176 100644
--- a/app/javascript/styles/material-light/icon_config.scss
+++ b/app/javascript/styles/material-light/icon_config.scss
@@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
-//$favorite-icon-color: #ffffff; // inverted +1
+//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
// Reply icon settings
@@ -16,11 +16,13 @@ $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.
-@font-face {
- font-family: "Material Icons";
- src:
- local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
- //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
\ No newline at end of file
+//$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
index 825deaf8c..926c3325a 100644
--- a/app/javascript/styles/material-light/layout/material-v1.scss
+++ b/app/javascript/styles/material-light/layout/material-v1.scss
@@ -30,6 +30,10 @@ $dialog-radius: 2px;
$menu-radius: 2px;
+// Media radius settings
+$media-radius: 0;
+
+
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
@@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping
//$avater-radius: 2px // Material v1 square
+// Chip settings
+$outlined-chip: false; // Material v1 styled contained chip
+
+
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: true; // Material v1 styled colored button with shadow
\ 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
index 853d82b15..f79f91005 100644
--- a/app/javascript/styles/material-light/layout/material-v2.scss
+++ b/app/javascript/styles/material-light/layout/material-v2.scss
@@ -4,10 +4,12 @@
// 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
@@ -31,6 +33,11 @@ $dialog-radius: 8px;
$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
@@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping
// Chip settings
-// If you want to use contained-chip, please comment out below.
-.reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
-}
+$outlined-chip: true; // Material v2 styled outlined chip
+//$outlined-chip: false; // Material v1 styled contained chip
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: false; // Material v2 styled colored button without shadow
+//$button-shadow: true; // Material v1 styled colored button with shadow
\ 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
index c134cbeeb..d9b3906a5 100644
--- a/app/javascript/styles/material-light/plugins/cards.scss
+++ b/app/javascript/styles/material-light/plugins/cards.scss
@@ -10,13 +10,13 @@
margin: 2px 0 !important;
padding: 8px !important;
- > .scrollable { background: $background-color }
+ > .scrollable { background: $bg-color }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
&__prepend { padding: 8px 8px 2px 0 }
}
@@ -28,7 +28,7 @@
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
diff --git a/app/javascript/styles/material-light/plugins/plus.scss b/app/javascript/styles/material-light/plugins/plus.scss
index 5b220631b..86a5f3e1e 100644
--- a/app/javascript/styles/material-light/plugins/plus.scss
+++ b/app/javascript/styles/material-light/plugins/plus.scss
@@ -14,9 +14,8 @@
// favorite icon
.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+.star-icon.icon-button.active.activate,
+.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
diff --git a/app/javascript/styles/material-light/theme/_mixins.scss b/app/javascript/styles/material-light/theme/_mixins.scss
index 5f573e339..fc965880f 100644
--- a/app/javascript/styles/material-light/theme/_mixins.scss
+++ b/app/javascript/styles/material-light/theme/_mixins.scss
@@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12);
@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 $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 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
index 34a8a1816..b6d517e12 100644
--- a/app/javascript/styles/material-light/theme/account.scss
+++ b/app/javascript/styles/material-light/theme/account.scss
@@ -7,8 +7,8 @@
.account {
border-bottom: 1px solid $border-color;
- .account__display-name { color: $primary-text-color }
- .account__display-name strong { color: $secondary-text-color }
+ .account__display-name,
+ .account__display-name strong { color: $primary-text-color }
&__avatar {
border-radius: $avater-radius;
@@ -29,9 +29,9 @@
&__header {
&__bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
- border-bottom: 1px solid $border-color;
+ border-bottom: none;
.avatar .account__avatar { border: none }
}
@@ -89,7 +89,7 @@
.verified {
border: none;
- background: $verified-background-color;
+ background: $verified-bg-color;
a,
&__mark { color: $primary-text-color }
@@ -105,7 +105,7 @@
dt {
color: $primary-text-color;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
}
dd { color: $primary-text-color }
@@ -113,11 +113,31 @@
}
}
+ &__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-background-color;
+ background: $text-tab-bg-color;
border-bottom: 1px solid $border-color;
a {
@@ -131,10 +151,10 @@
&::before,
&:after { border: none }
- &:focus { background: $text-tab-indicator-background-focus-color }
+ &:focus { background: $text-tab-indicator-bg-focus-color }
}
- &:hover { background: $text-tab-indicator-background-hover-color }
+ &:hover { background: $text-tab-indicator-bg-hover-color }
}
}
}
@@ -150,4 +170,8 @@
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
index 73ff009e1..13fb4ad75 100644
--- a/app/javascript/styles/material-light/theme/base_config.scss
+++ b/app/javascript/styles/material-light/theme/base_config.scss
@@ -18,10 +18,7 @@
// Search bar hover settings
// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
+$search-bar-hover: false;
// Status font size in timeline
@@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
\ No newline at end of file
+//$name-font-size: 16px; // compatible with material design
+
+
+// Background image
+// If you want to use the local image, please put it in /mastodon-material
+$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
index 4c122d1c6..32ba6dc8c 100644
--- a/app/javascript/styles/material-light/theme/basics.scss
+++ b/app/javascript/styles/material-light/theme/basics.scss
@@ -4,7 +4,9 @@
@import '../custom_color', '../custom_layout';
-body { background: $background-color }
+body { background: $bg-color }
+
+.focusable:focus { background: transparent }
// Chrome & Safari scroll bar
::-webkit-scrollbar-thumb {
@@ -21,6 +23,4 @@ body { background: $background-color }
}
// Firefox scroll bar
-html {
- scrollbar-color: $scroll-bar-thumb-color transparent;
-}
\ No newline at end of file
+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
index 1231bac98..7c2ad7937 100644
--- a/app/javascript/styles/material-light/theme/button.scss
+++ b/app/javascript/styles/material-light/theme/button.scss
@@ -4,6 +4,8 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+@include button-shadow;
+
.icon-button {
color: $icon-button-color;
border-radius: 50%;
@@ -21,37 +23,54 @@
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
}
&.overlayed {
border-radius: 50%;
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
&:hover {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-hover-color;
}
}
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
- &:active,
- &:focus { background-color: transparent }
+ &:focus { transition: none }
+}
+
+// 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: 12px;
+ font-size: 14px;
+
+ &.active {
+ background-color: $icon-bg-hover-color;
+ color: $icon-button-active-color;
+ }
&:hover {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
color: $icon-button-hover-color;
}
}
@@ -91,7 +110,7 @@
}
.spoiler-button__overlay__label {
- background: $media-icon-background-color;
+ 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
index 54effffd3..af7776a0c 100644
--- a/app/javascript/styles/material-light/theme/columns.scss
+++ b/app/javascript/styles/material-light/theme/columns.scss
@@ -10,7 +10,10 @@
margin: 10px 8px;
border-radius: $card-radius;
- &>.scrollable { background: $list-background-color }
+ &>.scrollable {
+ background: $list-bg-color;
+ opacity: $column-transparency;
+ }
&:last-child { box-shadow: none }
}
@@ -45,22 +48,23 @@
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
- padding: 10px 12px;
+ padding: 10px;
border-radius: 50%;
+ font-size: 20px;
&.active {
color: $top-bar-icon-active-color;
- background: $icon-background-active-color;
+ background: $icon-bg-active-color;
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
@@ -93,6 +97,7 @@
&__wrapper {
@include shadow-4dp;
border-radius: $bar-radius;
+ opacity: $bar-transparency;
.announcements { border-top: 1px solid $border-color }
@@ -105,11 +110,11 @@
&__collapsible {
color: $ui-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
border-top: 1px solid $border-color;
&-inner {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
}
@@ -119,9 +124,9 @@
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
- padding: 8px;
- margin: auto 0;
- border-radius: 50%;
+ margin: 8px 10px;
+ padding: 10px;
+ font-size: 20px;
span { display: none }
}
@@ -129,21 +134,21 @@
.column-subheading {
color: $section-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 12px 16px;
border-top: 1px solid $border-color;
}
.column-link {
color: $ui-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
- &:hover { background: $list-background-hover-color }
+ &:hover { background: $list-bg-hover-color }
&:active,
- &:focus { background: $list-background-active-color }
+ &:focus { background: $list-bg-active-color }
&__icon {
margin-right: 32px;
@@ -153,9 +158,9 @@
&--transparent {
&.active {
color: $ui-text-color;
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
- &:hover { background: $menu-background-active-hover-color }
+ &:hover { background: $menu-bg-active-hover-color }
.fa { color: $icon-color }
}
@@ -191,14 +196,19 @@
.column-inline-form {
padding: 16px 0 16px 16px;
- background: $card-background-color;
+ background: $card-bg-color;
.icon-button { margin: 0 16px }
}
+.columns-area {
+ background-image: url($bg-image);
+ background-size: contain;
+}
+
.setting-text {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
@@ -206,17 +216,17 @@
.empty-column-indicator {
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
font-size: 16px;
}
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
&--unread {
- background: $list-background-color;
+ background: $list-bg-color;
.conversation__content__relative-time { color: $info-text-color }
}
@@ -275,15 +285,16 @@
color: $icon-color;
padding: 16px;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
}
.getting-started {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
+ opacity: $column-transparency;
&__wrapper {
- background: $background-color;
+ background: $bg-color;
height: auto !important;
border-bottom: 1px solid $border-color;
}
@@ -303,8 +314,9 @@
}
&__trends {
- background: $background-color;
+ background: $bg-color;
margin-bottom: 0;
+ opacity: $column-transparency;
h4 {
color: $section-text-color;
@@ -358,7 +370,7 @@
}
.announcements {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 0;
&__container { color: $primary-text-color }
@@ -386,6 +398,8 @@
.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 {
.emoji-button {
color: $icon-button-color;
@@ -424,12 +438,13 @@
.notification {
&__filter-bar {
- background: $tab-background-color;
+ background: $tab-bg-color;
border-bottom: 1px solid $border-color;
z-index: 1;
+ opacity: $bar-transparency;
button {
- background: $tab-background-color;
+ background: $tab-bg-color;
color: $tab-indicator-color;
font-size: 16px;
@@ -442,10 +457,10 @@
&::before,
&:after { border: none }
- &:focus { background: $tab-indicator-background-focus-color }
+ &:focus { background: $tab-indicator-bg-focus-color }
}
- &:hover { background: $tab-indicator-background-hover-color }
+ &:hover { background: $tab-indicator-bg-hover-color }
}
}
diff --git a/app/javascript/styles/material-light/theme/components.scss b/app/javascript/styles/material-light/theme/components.scss
index ae5bfe158..46483923e 100644
--- a/app/javascript/styles/material-light/theme/components.scss
+++ b/app/javascript/styles/material-light/theme/components.scss
@@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
.drawer {
&__header {
@@ -11,11 +12,12 @@
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
+ opacity: $bar-transparency;
a { transition: none }
a:hover {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
}
}
@@ -40,14 +42,15 @@
}
&__inner {
- background: $card-background-color;
+ background: $card-bg-color;
+ opacity: $column-transparency;
&.darker {
- background: $card-background-color;
+ background: $card-bg-color;
position: inherit;
}
- &__mastodon { background: $card-background-color }
+ &__mastodon { background: $card-bg-color }
}
}
@@ -57,6 +60,7 @@
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
+ opacity: $bar-transparency;
&:focus {
@include shadow-2dp;
@@ -64,6 +68,8 @@
color: $search-bar-text-color;
}
+ &:hover { @include search-bar-hover }
+
&::placeholder { color: $tips-text-color }
}
@@ -112,7 +118,7 @@
.search-results {
&__header {
color: $secondary-text-color;
- background-color: $card-background-color;
+ background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 8px }
@@ -120,7 +126,7 @@
&__section {
h5 {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom: 1px solid $border-color;
padding: 16px;
color: $section-text-color;
@@ -137,6 +143,12 @@
strong {
color: $ui-text-color;
}
+
+ .navigation-bar__actions .compose__action-bar .icon-button {
+ width: 36px !important;
+ height: 36px !important;
+ padding: 8px;
+ }
}
.navigation-panel hr {
@@ -146,7 +158,7 @@
.dropdown-menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
padding: 8px 0;
border-radius: $menu-radius;
@@ -155,11 +167,11 @@
&__item a {
font-size: 14px;
padding: 8px 16px;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $menu-text-color;
&:hover, &:active {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $menu-text-color;
}
}
@@ -173,7 +185,7 @@
.compose-form {
.autosuggest-textarea {
&__textarea {
- background: $text-field-background-color;
+ background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -182,7 +194,7 @@
&__suggestions {
@include shadow-1dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
@@ -192,40 +204,76 @@
padding: 8px;
border-radius: 0;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
&.selected,
&:focus,
- &:active { background: $menu-background-active-color }
+ &:active { background: $menu-bg-active-color }
}
}
}
- .spoiler-input__input {
- color: $ui-text-color;
- background: $card-background-color;
+ .spoiler-input {
+ &.spoiler-input--visible { margin-bottom: 8px }
- &::placeholder { color: $tips-text-color }
+ &__input {
+ color: $ui-text-color;
+ background: $card-bg-color;
+ border-bottom: 1px solid $border-color;
+ border-radius: 0;
+
+ &::placeholder { color: $tips-text-color }
+ }
}
.compose-form {
&__warning {
- @include shadow-1dp;
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
+ border: 1px solid $border-color;
+ border-radius: $card-radius;
a { color: $link-text-color }
}
&__modifiers {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
color: $tips-text-color;
+ padding: 8px;
+
+ .icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ }
+
+ .text-icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ line-height: 20px !important;
+ }
}
&__poll-wrapper {
@@ -235,7 +283,7 @@
select {
color: $ui-text-color;
- background-color: $background-color;
+ background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
@@ -251,20 +299,16 @@
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
-
-
}
- }
- &__utilBtns { padding-top: 0 }
+ .poll__footer { border-top: none }
+ }
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
-.no-reduce-motion .spoiler-input {
- transition-duration: .2s, .2s;
-}
+.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
.poll {
@@ -283,7 +327,7 @@
&__text input[type=text] {
color: $ui-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: 1px solid $border-color;
padding: 8px 12px;
@@ -292,7 +336,7 @@
&__option input[type=text] {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
@@ -300,9 +344,9 @@
&__chart {
border-radius: 0;
- background: $poll-bar-color;
+ background: $progress-indicator-track-color;
- &.leading { background: $poll-bar-leading-color }
+ &.leading { background: $progress-indicator-color }
}
&__footer {
@@ -316,7 +360,7 @@
.privacy-dropdown {
&.active .privacy-dropdown__value.active {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
box-shadow: none;
@@ -325,7 +369,7 @@
&__dropdown {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $dialog-radius;
}
@@ -345,7 +389,7 @@
}
&.active {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -355,7 +399,7 @@
}
&:hover {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
@@ -366,7 +410,7 @@
}
&:hover {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -386,7 +430,7 @@
box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__header { margin-bottom: 4px }
@@ -410,14 +454,15 @@
}
.block-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
justify-content: flex-end;
}
@@ -451,7 +496,7 @@
}
.filter-form {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
@@ -466,18 +511,23 @@
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
@@ -491,7 +541,8 @@
}
.mute-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -500,13 +551,14 @@
&__explanation { margin-top: 16px }
&__action-bar {
- background: $card-background-color;
+ 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;
@@ -531,4 +583,19 @@
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;
+ }
}
\ 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
index 70e22752d..1b42121be 100644
--- a/app/javascript/styles/material-light/theme/emoji-picker.scss
+++ b/app/javascript/styles/material-light/theme/emoji-picker.scss
@@ -7,13 +7,13 @@
.emoji-picker-dropdown {
&__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
}
&__modifiers__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
button {
@@ -31,33 +31,23 @@
border: 0 solid $border-color;
&:first-child {
- background: $menu-background-color;
+ background: $menu-bg-color;
}
}
- &-anchors {
- color: $icon-button-color;
- padding: 0;
- }
-
&-anchor {
+ color: $text-tab-indicator-color;
padding: 10px 4px;
- &-selected {
- color: $icon-button-active-color;
- }
+ &-bar { background-color: $icon-tab-indicator-active-color }
- &-bar {
- background-color: $tab-indicator-active-color;
- }
+ &-selected { color: $icon-tab-indicator-hover-color }
- &:hover {
- color: $icon-button-hover-color;
- }
+ &:hover { color: $icon-tab-indicator-hover-color }
}
&-search {
- background: $menu-background-color;
+ background: $menu-bg-color;
input {
outline: none;
@@ -76,16 +66,16 @@
&-scroll {
padding: 0 8px 8px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-category-label span {
padding: 4px 6px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-emoji:hover::before {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
&-no-results { color: $secondary-text-color }
diff --git a/app/javascript/styles/material-light/theme/icons.scss b/app/javascript/styles/material-light/theme/icons.scss
index 1367647ec..987767544 100644
--- a/app/javascript/styles/material-light/theme/icons.scss
+++ b/app/javascript/styles/material-light/theme/icons.scss
@@ -16,26 +16,8 @@
&__icon.fa-fw { color: $icon-color }
}
-
-.fa { vertical-align: sub } // adjust material icon font baseline to other font
-
-.fa.fa-times,
-.fa.fa-eraser,
-.fa.fa-plus { vertical-align: middle } // adjustment exception
-
-.fa.fa-check { vertical-align: initial }
-
.fa.fa-lock { text-transform: none }
-.fa-fw { width: 16px }
-
-// icon in tab settings
-.fa.fa-chevron-left.column-back-button__icon.fa-fw,
-.text-btn.column-header__setting-btn .fa.fa-eraser {
- font-size: 20px;
- margin-right: 16px;
-}
-
.icon-with-badge__badge {
background: $badge-color;
border: none;
diff --git a/app/javascript/styles/material-light/theme/material-icons.scss b/app/javascript/styles/material-light/theme/material-icons.scss
index 747856253..f27de96e8 100644
--- a/app/javascript/styles/material-light/theme/material-icons.scss
+++ b/app/javascript/styles/material-light/theme/material-icons.scss
@@ -3,8 +3,17 @@
@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,
@@ -64,8 +73,19 @@
&.fa-compress,
&.fa-user-times,
&.fa-check,
- &.fa-quote-right {
- font-family: "Material Icons";
+ &.fa-quote-right,
+ &.fa-upload,
+ &.fa-comments {
+ @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;
}
}
@@ -118,9 +138,11 @@
&.fa-download::before { content: "file_download" }
&.fa-arrows-alt::before { content: "fullscreen" }
&.fa-compress::before { content: "fullscreen_exit" }
- &.fa-user-times::before { content: "delete" }
+ &.fa-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" }
}
// bookmark icon
@@ -148,12 +170,42 @@
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
-.no-reduce-motion button.icon-button i.fa-retweet {
+button.icon-button i.fa-retweet,
+button.icon-button i.fa-retweet:hover {
height: 18px;
width: 18px;
transition: none;
background-image: url('data:image/svg+xml;utf8,');
}
+button.icon-button.disabled i.fa-retweet,
+button.icon-button.disabled i.fa-retweet:hover {
+ 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}
\ No newline at end of file
+.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 { 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 }
\ 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
index 9d0203828..0b8b92acf 100644
--- a/app/javascript/styles/material-light/theme/media.scss
+++ b/app/javascript/styles/material-light/theme/media.scss
@@ -6,9 +6,9 @@
.media-gallery {
- border-radius: 0;
+ border-radius: $media-radius;
- &__item { border-radius: 0 }
+ &__item { border-radius: $media-radius }
}
.media-modal__close {
@@ -24,7 +24,7 @@
border: 12px;
&:hover {
- background: $media-icon-background-hover-color;
+ background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
@@ -34,7 +34,7 @@
.media-modal {
&__nav {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
height: 48px;
width: 48px;
@@ -50,6 +50,12 @@
&--active { background-color: $media-page-indicator-active-color }
}
+
+ &__meta {
+ bottom: 24px;
+
+ a { color: $media-icon-color }
+ }
}
.video-player {
@@ -75,7 +81,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
@@ -93,7 +99,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
diff --git a/app/javascript/styles/material-light/theme/modal.scss b/app/javascript/styles/material-light/theme/modal.scss
index 2748c8723..209678c84 100644
--- a/app/javascript/styles/material-light/theme/modal.scss
+++ b/app/javascript/styles/material-light/theme/modal.scss
@@ -6,7 +6,8 @@
.confirmation-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
@@ -18,7 +19,7 @@
&__action-bar {
justify-content: flex-end;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
}
@@ -42,7 +43,7 @@
}
.actions-modal {
- background: $card-background-color;
+ background: $card-bg-color;
border-radius: $card-radius;
ul li:not(:empty) a {
@@ -50,7 +51,7 @@
font-size: 16px;
&:hover {
- background: $card-background-hover-color;
+ background: $card-bg-hover-color;
color: $ui-text-color;
}
}
@@ -58,7 +59,7 @@
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
@@ -71,7 +72,8 @@
}
.report-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
diff --git a/app/javascript/styles/material-light/theme/responsive.scss b/app/javascript/styles/material-light/theme/responsive.scss
index 9ae304041..d0e1a6635 100644
--- a/app/javascript/styles/material-light/theme/responsive.scss
+++ b/app/javascript/styles/material-light/theme/responsive.scss
@@ -81,14 +81,14 @@
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
- background: $tab-indicator-background-hover-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-hover-color;
+ border-bottom-color: $tab-bg-color;
}
&:active,
&:focus {
- background: $tab-indicator-background-focus-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-focus-color;
+ border-bottom-color: $tab-bg-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
index eedf77c2a..d095c2292 100644
--- a/app/javascript/styles/material-light/theme/statuses.scss
+++ b/app/javascript/styles/material-light/theme/statuses.scss
@@ -86,12 +86,15 @@
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;
@@ -110,7 +113,7 @@
&__actions {
&>div {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
border-radius: $button-radius;
}
@@ -136,7 +139,19 @@
&:hover { background-color: transparent !important }
}
- &:hover { background-color: $card-background-color }
+ &.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 }
}
// Detailed status in mobile
@@ -152,7 +167,7 @@
}
.detailed-status {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__display-name {
@@ -167,7 +182,7 @@
}
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;
diff --git a/app/javascript/styles/plus.scss b/app/javascript/styles/plus.scss
index 9cbccaa5f..45fa7f979 100644
--- a/app/javascript/styles/plus.scss
+++ b/app/javascript/styles/plus.scss
@@ -1,2 +1,9 @@
+/*
+* Mastodon Material 0.2.0
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
+
@import 'application';
@import '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
index b299981b0..6aa7ebfdb 100644
--- a/app/javascript/styles/plus/color/black.scss
+++ b/app/javascript/styles/plus/color/black.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #000000;
-$menu-background-color: #121212;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #121212;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #000000;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #1e1e1e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #121212;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index c3c168316..4ed9a7e07 100644
--- a/app/javascript/styles/plus/color/mastodon-dark.scss
+++ b/app/javascript/styles/plus/color/mastodon-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #191b22;
-$menu-background-color: #d9e1e8;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #313543;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #282c37;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #42485a;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #9baec8;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: lighten($background-color, 14%);
-$icon-background-active-color: lighten($background-color, 18%);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,9 +99,9 @@ $border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
-$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+$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;
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #1f232b;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 54d894fec..d4d84a626 100644
--- a/app/javascript/styles/plus/color/mastodon-light.scss
+++ b/app/javascript/styles/plus/color/mastodon-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
@@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #eff3f5;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($background-color, 6%);
-$menu-background-active-color: darken($background-color, 10%);
-$menu-background-active-hover-color: darken($background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -55,8 +56,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #282c37;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: darken($background-color, 4%);
-$icon-background-active-color: darken($background-color, 8%);
+$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;
@@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #ffffff;
$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $background-color;
+$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #e6ebf0;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 60c8370a2..eba9c0f18 100644
--- a/app/javascript/styles/plus/color/plus-classic.scss
+++ b/app/javascript/styles/plus/color/plus-classic.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 77cef824f..d925f3d65 100644
--- a/app/javascript/styles/plus/color/v1-dark.scss
+++ b/app/javascript/styles/plus/color/v1-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #303030;
-$menu-background-color: #424242;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #424242;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #424242;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,16 +57,16 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -97,38 +98,40 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
-$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+$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($background-color, 6%);
+$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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #424242;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 64f8d5842..906b8e459 100644
--- a/app/javascript/styles/plus/color/v1-light.scss
+++ b/app/javascript/styles/plus/color/v1-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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%);
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$top-bar-unread-icon-color: darken($primary-color, 30%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
+$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($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 8c575bce5..94c381ee7 100644
--- a/app/javascript/styles/plus/color/v2-dark.scss
+++ b/app/javascript/styles/plus/color/v2-dark.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: dark;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #121212;
-$menu-background-color: #1e1e1e;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: darken($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #2e2e2e;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,7 +99,7 @@ $border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
+$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%);
@@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #1e1e1e;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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
index 20336e96d..9317004e9 100644
--- a/app/javascript/styles/plus/color/v2-light.scss
+++ b/app/javascript/styles/plus/color/v2-light.scss
@@ -1,6 +1,8 @@
@charset "UTF-8";
+$color-scheme: light;
+
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
@@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
-$background-color: #ffffff;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: $background-color;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: $background-color;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$text-field-background-color: $card-background-color;
-$verified-background-color: lighten($verified-color, 20%);
+$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%);
// Chip color
$contained-chip-color: #e0e0e0;
@@ -56,8 +57,8 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
+$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;
@@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
@@ -98,38 +99,40 @@ $border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($background-color, 30%);
-$scroll-bar-thumb-active-color: darken($background-color, 38%);
+$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: $background-color;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-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-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$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-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$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;
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+// 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($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
+$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/icon_config.scss b/app/javascript/styles/plus/icon_config.scss
index e39986220..3e06e0820 100644
--- a/app/javascript/styles/plus/icon_config.scss
+++ b/app/javascript/styles/plus/icon_config.scss
@@ -6,7 +6,7 @@ $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
+$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
// Reply icon settings
@@ -16,11 +16,13 @@ $reply-icon: "comment"; // blooming
// Material Design Icon settings
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-@font-face {
- font-family: "Material Icons";
- src:
- local("Material Icons"),
- //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
- //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
- url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
-}
\ No newline at end of file
+//$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
index 825deaf8c..926c3325a 100644
--- a/app/javascript/styles/plus/layout/material-v1.scss
+++ b/app/javascript/styles/plus/layout/material-v1.scss
@@ -30,6 +30,10 @@ $dialog-radius: 2px;
$menu-radius: 2px;
+// Media radius settings
+$media-radius: 0;
+
+
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
@@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping
//$avater-radius: 2px // Material v1 square
+// Chip settings
+$outlined-chip: false; // Material v1 styled contained chip
+
+
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: true; // Material v1 styled colored button with shadow
\ 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
index 853d82b15..f79f91005 100644
--- a/app/javascript/styles/plus/layout/material-v2.scss
+++ b/app/javascript/styles/plus/layout/material-v2.scss
@@ -4,10 +4,12 @@
// 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
@@ -31,6 +33,11 @@ $dialog-radius: 8px;
$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
@@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping
// Chip settings
-// If you want to use contained-chip, please comment out below.
-.reactions-bar__item {
- background: $outlined-chip-color !important;
- border: 1px solid $border-color !important;
-
- &.active { background-color: $outlined-chip-selected-color !important }
-
- &:hover { background: $outlined-chip-hover-color !important }
-}
+$outlined-chip: true; // Material v2 styled outlined chip
+//$outlined-chip: false; // Material v1 styled contained chip
// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
+$button-shadow: false; // Material v2 styled colored button without shadow
+//$button-shadow: true; // Material v1 styled colored button with shadow
\ No newline at end of file
diff --git a/app/javascript/styles/plus/loader.scss b/app/javascript/styles/plus/loader.scss
index e962aa921..80df5cab0 100644
--- a/app/javascript/styles/plus/loader.scss
+++ b/app/javascript/styles/plus/loader.scss
@@ -2,6 +2,6 @@
@import 'theme/material-icons';
// Plugins
-//@import 'plugins/cards';
-//@import 'plugins/dense';
-//@import 'plugins/plus';
\ No newline at end of file
+@import 'plugins/cards';
+@import 'plugins/dense';
+@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/cards.scss b/app/javascript/styles/plus/plugins/cards.scss
index c134cbeeb..d9b3906a5 100644
--- a/app/javascript/styles/plus/plugins/cards.scss
+++ b/app/javascript/styles/plus/plugins/cards.scss
@@ -10,13 +10,13 @@
margin: 2px 0 !important;
padding: 8px !important;
- > .scrollable { background: $background-color }
+ > .scrollable { background: $bg-color }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
&__prepend { padding: 8px 8px 2px 0 }
}
@@ -28,7 +28,7 @@
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
diff --git a/app/javascript/styles/plus/plugins/plus.scss b/app/javascript/styles/plus/plugins/plus.scss
index 5b220631b..86a5f3e1e 100644
--- a/app/javascript/styles/plus/plugins/plus.scss
+++ b/app/javascript/styles/plus/plugins/plus.scss
@@ -14,9 +14,8 @@
// favorite icon
.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+.star-icon.icon-button.active.activate,
+.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
diff --git a/app/javascript/styles/plus/theme/_mixins.scss b/app/javascript/styles/plus/theme/_mixins.scss
index 5f573e339..fc965880f 100644
--- a/app/javascript/styles/plus/theme/_mixins.scss
+++ b/app/javascript/styles/plus/theme/_mixins.scss
@@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12);
@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 $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 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
index 34a8a1816..b6d517e12 100644
--- a/app/javascript/styles/plus/theme/account.scss
+++ b/app/javascript/styles/plus/theme/account.scss
@@ -7,8 +7,8 @@
.account {
border-bottom: 1px solid $border-color;
- .account__display-name { color: $primary-text-color }
- .account__display-name strong { color: $secondary-text-color }
+ .account__display-name,
+ .account__display-name strong { color: $primary-text-color }
&__avatar {
border-radius: $avater-radius;
@@ -29,9 +29,9 @@
&__header {
&__bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
- border-bottom: 1px solid $border-color;
+ border-bottom: none;
.avatar .account__avatar { border: none }
}
@@ -89,7 +89,7 @@
.verified {
border: none;
- background: $verified-background-color;
+ background: $verified-bg-color;
a,
&__mark { color: $primary-text-color }
@@ -105,7 +105,7 @@
dt {
color: $primary-text-color;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
}
dd { color: $primary-text-color }
@@ -113,11 +113,31 @@
}
}
+ &__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-background-color;
+ background: $text-tab-bg-color;
border-bottom: 1px solid $border-color;
a {
@@ -131,10 +151,10 @@
&::before,
&:after { border: none }
- &:focus { background: $text-tab-indicator-background-focus-color }
+ &:focus { background: $text-tab-indicator-bg-focus-color }
}
- &:hover { background: $text-tab-indicator-background-hover-color }
+ &:hover { background: $text-tab-indicator-bg-hover-color }
}
}
}
@@ -150,4 +170,8 @@
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
index 73ff009e1..13fb4ad75 100644
--- a/app/javascript/styles/plus/theme/base_config.scss
+++ b/app/javascript/styles/plus/theme/base_config.scss
@@ -18,10 +18,7 @@
// Search bar hover settings
// You can enable/disable search bar floating.
-/*.search__input:hover {
- @include shadow-2dp;
- background: $search-bar-focus-color;
-}*/
+$search-bar-hover: false;
// Status font size in timeline
@@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
-//$name-font-size: 16px; // compatible with material design
\ No newline at end of file
+//$name-font-size: 16px; // compatible with material design
+
+
+// Background image
+// If you want to use the local image, please put it in /mastodon-material
+$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
index 4c122d1c6..32ba6dc8c 100644
--- a/app/javascript/styles/plus/theme/basics.scss
+++ b/app/javascript/styles/plus/theme/basics.scss
@@ -4,7 +4,9 @@
@import '../custom_color', '../custom_layout';
-body { background: $background-color }
+body { background: $bg-color }
+
+.focusable:focus { background: transparent }
// Chrome & Safari scroll bar
::-webkit-scrollbar-thumb {
@@ -21,6 +23,4 @@ body { background: $background-color }
}
// Firefox scroll bar
-html {
- scrollbar-color: $scroll-bar-thumb-color transparent;
-}
\ No newline at end of file
+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
index 1231bac98..7c2ad7937 100644
--- a/app/javascript/styles/plus/theme/button.scss
+++ b/app/javascript/styles/plus/theme/button.scss
@@ -4,6 +4,8 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+@include button-shadow;
+
.icon-button {
color: $icon-button-color;
border-radius: 50%;
@@ -21,37 +23,54 @@
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
}
&.overlayed {
border-radius: 50%;
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
&:hover {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-hover-color;
}
}
&:hover {
color: $icon-button-hover-color;
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
- &:active,
- &:focus { background-color: transparent }
+ &:focus { transition: none }
+}
+
+// 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: 12px;
+ font-size: 14px;
+
+ &.active {
+ background-color: $icon-bg-hover-color;
+ color: $icon-button-active-color;
+ }
&:hover {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
color: $icon-button-hover-color;
}
}
@@ -91,7 +110,7 @@
}
.spoiler-button__overlay__label {
- background: $media-icon-background-color;
+ 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
index 54effffd3..af7776a0c 100644
--- a/app/javascript/styles/plus/theme/columns.scss
+++ b/app/javascript/styles/plus/theme/columns.scss
@@ -10,7 +10,10 @@
margin: 10px 8px;
border-radius: $card-radius;
- &>.scrollable { background: $list-background-color }
+ &>.scrollable {
+ background: $list-bg-color;
+ opacity: $column-transparency;
+ }
&:last-child { box-shadow: none }
}
@@ -45,22 +48,23 @@
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
- padding: 10px 12px;
+ padding: 10px;
border-radius: 50%;
+ font-size: 20px;
&.active {
color: $top-bar-icon-active-color;
- background: $icon-background-active-color;
+ background: $icon-bg-active-color;
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
}
}
@@ -93,6 +97,7 @@
&__wrapper {
@include shadow-4dp;
border-radius: $bar-radius;
+ opacity: $bar-transparency;
.announcements { border-top: 1px solid $border-color }
@@ -105,11 +110,11 @@
&__collapsible {
color: $ui-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
border-top: 1px solid $border-color;
&-inner {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
}
@@ -119,9 +124,9 @@
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
- padding: 8px;
- margin: auto 0;
- border-radius: 50%;
+ margin: 8px 10px;
+ padding: 10px;
+ font-size: 20px;
span { display: none }
}
@@ -129,21 +134,21 @@
.column-subheading {
color: $section-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 12px 16px;
border-top: 1px solid $border-color;
}
.column-link {
color: $ui-text-color;
- background: $background-color;
+ background: $bg-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
- &:hover { background: $list-background-hover-color }
+ &:hover { background: $list-bg-hover-color }
&:active,
- &:focus { background: $list-background-active-color }
+ &:focus { background: $list-bg-active-color }
&__icon {
margin-right: 32px;
@@ -153,9 +158,9 @@
&--transparent {
&.active {
color: $ui-text-color;
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
- &:hover { background: $menu-background-active-hover-color }
+ &:hover { background: $menu-bg-active-hover-color }
.fa { color: $icon-color }
}
@@ -191,14 +196,19 @@
.column-inline-form {
padding: 16px 0 16px 16px;
- background: $card-background-color;
+ background: $card-bg-color;
.icon-button { margin: 0 16px }
}
+.columns-area {
+ background-image: url($bg-image);
+ background-size: contain;
+}
+
.setting-text {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
@@ -206,17 +216,17 @@
.empty-column-indicator {
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
font-size: 16px;
}
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
- background: $list-background-inactive-color;
+ background: $list-bg-inactive-color;
&--unread {
- background: $list-background-color;
+ background: $list-bg-color;
.conversation__content__relative-time { color: $info-text-color }
}
@@ -275,15 +285,16 @@
color: $icon-color;
padding: 16px;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
}
.getting-started {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
+ opacity: $column-transparency;
&__wrapper {
- background: $background-color;
+ background: $bg-color;
height: auto !important;
border-bottom: 1px solid $border-color;
}
@@ -303,8 +314,9 @@
}
&__trends {
- background: $background-color;
+ background: $bg-color;
margin-bottom: 0;
+ opacity: $column-transparency;
h4 {
color: $section-text-color;
@@ -358,7 +370,7 @@
}
.announcements {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 0;
&__container { color: $primary-text-color }
@@ -386,6 +398,8 @@
.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 {
.emoji-button {
color: $icon-button-color;
@@ -424,12 +438,13 @@
.notification {
&__filter-bar {
- background: $tab-background-color;
+ background: $tab-bg-color;
border-bottom: 1px solid $border-color;
z-index: 1;
+ opacity: $bar-transparency;
button {
- background: $tab-background-color;
+ background: $tab-bg-color;
color: $tab-indicator-color;
font-size: 16px;
@@ -442,10 +457,10 @@
&::before,
&:after { border: none }
- &:focus { background: $tab-indicator-background-focus-color }
+ &:focus { background: $tab-indicator-bg-focus-color }
}
- &:hover { background: $tab-indicator-background-hover-color }
+ &:hover { background: $tab-indicator-bg-hover-color }
}
}
diff --git a/app/javascript/styles/plus/theme/components.scss b/app/javascript/styles/plus/theme/components.scss
index ae5bfe158..46483923e 100644
--- a/app/javascript/styles/plus/theme/components.scss
+++ b/app/javascript/styles/plus/theme/components.scss
@@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
+.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
.drawer {
&__header {
@@ -11,11 +12,12 @@
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
+ opacity: $bar-transparency;
a { transition: none }
a:hover {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
}
}
@@ -40,14 +42,15 @@
}
&__inner {
- background: $card-background-color;
+ background: $card-bg-color;
+ opacity: $column-transparency;
&.darker {
- background: $card-background-color;
+ background: $card-bg-color;
position: inherit;
}
- &__mastodon { background: $card-background-color }
+ &__mastodon { background: $card-bg-color }
}
}
@@ -57,6 +60,7 @@
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
+ opacity: $bar-transparency;
&:focus {
@include shadow-2dp;
@@ -64,6 +68,8 @@
color: $search-bar-text-color;
}
+ &:hover { @include search-bar-hover }
+
&::placeholder { color: $tips-text-color }
}
@@ -112,7 +118,7 @@
.search-results {
&__header {
color: $secondary-text-color;
- background-color: $card-background-color;
+ background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 8px }
@@ -120,7 +126,7 @@
&__section {
h5 {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom: 1px solid $border-color;
padding: 16px;
color: $section-text-color;
@@ -137,6 +143,12 @@
strong {
color: $ui-text-color;
}
+
+ .navigation-bar__actions .compose__action-bar .icon-button {
+ width: 36px !important;
+ height: 36px !important;
+ padding: 8px;
+ }
}
.navigation-panel hr {
@@ -146,7 +158,7 @@
.dropdown-menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
padding: 8px 0;
border-radius: $menu-radius;
@@ -155,11 +167,11 @@
&__item a {
font-size: 14px;
padding: 8px 16px;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $menu-text-color;
&:hover, &:active {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $menu-text-color;
}
}
@@ -173,7 +185,7 @@
.compose-form {
.autosuggest-textarea {
&__textarea {
- background: $text-field-background-color;
+ background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -182,7 +194,7 @@
&__suggestions {
@include shadow-1dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
@@ -192,40 +204,76 @@
padding: 8px;
border-radius: 0;
- &:hover { background: $menu-background-hover-color }
+ &:hover { background: $menu-bg-hover-color }
&.selected,
&:focus,
- &:active { background: $menu-background-active-color }
+ &:active { background: $menu-bg-active-color }
}
}
}
- .spoiler-input__input {
- color: $ui-text-color;
- background: $card-background-color;
+ .spoiler-input {
+ &.spoiler-input--visible { margin-bottom: 8px }
- &::placeholder { color: $tips-text-color }
+ &__input {
+ color: $ui-text-color;
+ background: $card-bg-color;
+ border-bottom: 1px solid $border-color;
+ border-radius: 0;
+
+ &::placeholder { color: $tips-text-color }
+ }
}
.compose-form {
&__warning {
- @include shadow-1dp;
color: $secondary-text-color;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
+ border: 1px solid $border-color;
+ border-radius: $card-radius;
a { color: $link-text-color }
}
&__modifiers {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
color: $tips-text-color;
+ padding: 8px;
+
+ .icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ }
+
+ .text-icon-button {
+ width: 20px !important;
+ height: 20px !important;
+ padding: 8px;
+ line-height: 20px !important;
+ }
}
&__poll-wrapper {
@@ -235,7 +283,7 @@
select {
color: $ui-text-color;
- background-color: $background-color;
+ background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
@@ -251,20 +299,16 @@
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
-
-
}
- }
- &__utilBtns { padding-top: 0 }
+ .poll__footer { border-top: none }
+ }
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
-.no-reduce-motion .spoiler-input {
- transition-duration: .2s, .2s;
-}
+.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
.poll {
@@ -283,7 +327,7 @@
&__text input[type=text] {
color: $ui-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: 1px solid $border-color;
padding: 8px 12px;
@@ -292,7 +336,7 @@
&__option input[type=text] {
color: $primary-text-color;
- background: $text-field-background-color;
+ background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
@@ -300,9 +344,9 @@
&__chart {
border-radius: 0;
- background: $poll-bar-color;
+ background: $progress-indicator-track-color;
- &.leading { background: $poll-bar-leading-color }
+ &.leading { background: $progress-indicator-color }
}
&__footer {
@@ -316,7 +360,7 @@
.privacy-dropdown {
&.active .privacy-dropdown__value.active {
- background: $icon-background-hover-color;
+ background: $icon-bg-hover-color;
border-radius: 50%;
box-shadow: none;
@@ -325,7 +369,7 @@
&__dropdown {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $dialog-radius;
}
@@ -345,7 +389,7 @@
}
&.active {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -355,7 +399,7 @@
}
&:hover {
- background: $menu-background-active-color;
+ background: $menu-bg-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
@@ -366,7 +410,7 @@
}
&:hover {
- background: $menu-background-hover-color;
+ background: $menu-bg-hover-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
@@ -386,7 +430,7 @@
box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__header { margin-bottom: 4px }
@@ -410,14 +454,15 @@
}
.block-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
justify-content: flex-end;
}
@@ -451,7 +496,7 @@
}
.filter-form {
- background: $background-color;
+ background: $bg-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
@@ -466,18 +511,23 @@
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
- background: $card-background-color;
+ 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-background-color;
+ background: $card-bg-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
@@ -491,7 +541,8 @@
}
.mute-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
@@ -500,13 +551,14 @@
&__explanation { margin-top: 16px }
&__action-bar {
- background: $card-background-color;
+ 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;
@@ -531,4 +583,19 @@
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;
+ }
}
\ 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
index 70e22752d..1b42121be 100644
--- a/app/javascript/styles/plus/theme/emoji-picker.scss
+++ b/app/javascript/styles/plus/theme/emoji-picker.scss
@@ -7,13 +7,13 @@
.emoji-picker-dropdown {
&__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
}
&__modifiers__menu {
@include shadow-8dp;
- background: $menu-background-color;
+ background: $menu-bg-color;
border-radius: $menu-radius;
button {
@@ -31,33 +31,23 @@
border: 0 solid $border-color;
&:first-child {
- background: $menu-background-color;
+ background: $menu-bg-color;
}
}
- &-anchors {
- color: $icon-button-color;
- padding: 0;
- }
-
&-anchor {
+ color: $text-tab-indicator-color;
padding: 10px 4px;
- &-selected {
- color: $icon-button-active-color;
- }
+ &-bar { background-color: $icon-tab-indicator-active-color }
- &-bar {
- background-color: $tab-indicator-active-color;
- }
+ &-selected { color: $icon-tab-indicator-hover-color }
- &:hover {
- color: $icon-button-hover-color;
- }
+ &:hover { color: $icon-tab-indicator-hover-color }
}
&-search {
- background: $menu-background-color;
+ background: $menu-bg-color;
input {
outline: none;
@@ -76,16 +66,16 @@
&-scroll {
padding: 0 8px 8px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-category-label span {
padding: 4px 6px;
- background: $menu-background-color;
+ background: $menu-bg-color;
}
&-emoji:hover::before {
- background-color: $icon-background-hover-color;
+ background-color: $icon-bg-hover-color;
}
&-no-results { color: $secondary-text-color }
diff --git a/app/javascript/styles/plus/theme/icons.scss b/app/javascript/styles/plus/theme/icons.scss
index 1367647ec..987767544 100644
--- a/app/javascript/styles/plus/theme/icons.scss
+++ b/app/javascript/styles/plus/theme/icons.scss
@@ -16,26 +16,8 @@
&__icon.fa-fw { color: $icon-color }
}
-
-.fa { vertical-align: sub } // adjust material icon font baseline to other font
-
-.fa.fa-times,
-.fa.fa-eraser,
-.fa.fa-plus { vertical-align: middle } // adjustment exception
-
-.fa.fa-check { vertical-align: initial }
-
.fa.fa-lock { text-transform: none }
-.fa-fw { width: 16px }
-
-// icon in tab settings
-.fa.fa-chevron-left.column-back-button__icon.fa-fw,
-.text-btn.column-header__setting-btn .fa.fa-eraser {
- font-size: 20px;
- margin-right: 16px;
-}
-
.icon-with-badge__badge {
background: $badge-color;
border: none;
diff --git a/app/javascript/styles/plus/theme/material-icons.scss b/app/javascript/styles/plus/theme/material-icons.scss
index 747856253..f27de96e8 100644
--- a/app/javascript/styles/plus/theme/material-icons.scss
+++ b/app/javascript/styles/plus/theme/material-icons.scss
@@ -3,8 +3,17 @@
@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,
@@ -64,8 +73,19 @@
&.fa-compress,
&.fa-user-times,
&.fa-check,
- &.fa-quote-right {
- font-family: "Material Icons";
+ &.fa-quote-right,
+ &.fa-upload,
+ &.fa-comments {
+ @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;
}
}
@@ -118,9 +138,11 @@
&.fa-download::before { content: "file_download" }
&.fa-arrows-alt::before { content: "fullscreen" }
&.fa-compress::before { content: "fullscreen_exit" }
- &.fa-user-times::before { content: "delete" }
+ &.fa-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" }
}
// bookmark icon
@@ -148,12 +170,42 @@
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
-.no-reduce-motion button.icon-button i.fa-retweet {
+button.icon-button i.fa-retweet,
+button.icon-button i.fa-retweet:hover {
height: 18px;
width: 18px;
transition: none;
background-image: url('data:image/svg+xml;utf8,');
}
+button.icon-button.disabled i.fa-retweet,
+button.icon-button.disabled i.fa-retweet:hover {
+ 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}
\ No newline at end of file
+.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 { 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 }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/media.scss b/app/javascript/styles/plus/theme/media.scss
index 9d0203828..0b8b92acf 100644
--- a/app/javascript/styles/plus/theme/media.scss
+++ b/app/javascript/styles/plus/theme/media.scss
@@ -6,9 +6,9 @@
.media-gallery {
- border-radius: 0;
+ border-radius: $media-radius;
- &__item { border-radius: 0 }
+ &__item { border-radius: $media-radius }
}
.media-modal__close {
@@ -24,7 +24,7 @@
border: 12px;
&:hover {
- background: $media-icon-background-hover-color;
+ background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
@@ -34,7 +34,7 @@
.media-modal {
&__nav {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
color: $media-icon-color;
height: 48px;
width: 48px;
@@ -50,6 +50,12 @@
&--active { background-color: $media-page-indicator-active-color }
}
+
+ &__meta {
+ bottom: 24px;
+
+ a { color: $media-icon-color }
+ }
}
.video-player {
@@ -75,7 +81,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
@@ -93,7 +99,7 @@
}
&__handle {
- transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ @include material-transition;
background-color: $primary-color;
box-shadow: none;
}
diff --git a/app/javascript/styles/plus/theme/modal.scss b/app/javascript/styles/plus/theme/modal.scss
index 2748c8723..209678c84 100644
--- a/app/javascript/styles/plus/theme/modal.scss
+++ b/app/javascript/styles/plus/theme/modal.scss
@@ -6,7 +6,8 @@
.confirmation-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
@@ -18,7 +19,7 @@
&__action-bar {
justify-content: flex-end;
- background: $card-background-color;
+ background: $card-bg-color;
padding: 8px;
}
@@ -42,7 +43,7 @@
}
.actions-modal {
- background: $card-background-color;
+ background: $card-bg-color;
border-radius: $card-radius;
ul li:not(:empty) a {
@@ -50,7 +51,7 @@
font-size: 16px;
&:hover {
- background: $card-background-hover-color;
+ background: $card-bg-hover-color;
color: $ui-text-color;
}
}
@@ -58,7 +59,7 @@
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
- background: $card-background-color;
+ background: $card-bg-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
@@ -71,7 +72,8 @@
}
.report-modal {
- background: $card-background-color;
+ @include shadow-24dp;
+ background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
diff --git a/app/javascript/styles/plus/theme/responsive.scss b/app/javascript/styles/plus/theme/responsive.scss
index 9ae304041..d0e1a6635 100644
--- a/app/javascript/styles/plus/theme/responsive.scss
+++ b/app/javascript/styles/plus/theme/responsive.scss
@@ -81,14 +81,14 @@
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
- background: $tab-indicator-background-hover-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-hover-color;
+ border-bottom-color: $tab-bg-color;
}
&:active,
&:focus {
- background: $tab-indicator-background-focus-color;
- border-bottom-color: $tab-background-color;
+ background: $tab-indicator-bg-focus-color;
+ border-bottom-color: $tab-bg-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
index eedf77c2a..d095c2292 100644
--- a/app/javascript/styles/plus/theme/statuses.scss
+++ b/app/javascript/styles/plus/theme/statuses.scss
@@ -86,12 +86,15 @@
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;
@@ -110,7 +113,7 @@
&__actions {
&>div {
- background: $media-icon-background-color;
+ background: $media-icon-bg-color;
border-radius: $button-radius;
}
@@ -136,7 +139,19 @@
&:hover { background-color: transparent !important }
}
- &:hover { background-color: $card-background-color }
+ &.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 }
}
// Detailed status in mobile
@@ -152,7 +167,7 @@
}
.detailed-status {
- background: $card-background-color;
+ background: $card-bg-color;
padding: 16px;
&__display-name {
@@ -167,7 +182,7 @@
}
&__action-bar {
- background: $card-background-color;
+ background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;