mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #292 from YoheiZuho/features/material-theme

Browse Source 
Features/material theme
This commit is contained in:
YorimiMochida 2020-07-07 23:41:56 +09:00 committed by GitHub
commit f620398a77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
224 changed files with 2540 additions and 3723 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/styles/mastodon-material-auto.scss Normal file
View File

@ -0,0 +1,2 @@
@use 'mastodon-material-dark';
@media (prefers-color-scheme: light) { @import 'mastodon-material-light'; }

5
app/javascript/styles/mastodon-material-dark.scss
View File

@ -1,3 +1,2 @@
@charset "UTF-8"; @import 'application';
@import 'mastodon-material-dark/loader';
@import 'mastodon-material-dark/loader'

25
app/javascript/styles/material-v1-light/color/v2-dark.scss → app/javascript/styles/mastodon-material-dark/color/black.scss
View File

@ -20,30 +20,35 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #121212; $background-color: #000000;
$menu-background-color: #1e1e1e; $menu-background-color: #121212;
$menu-background-hover-color: lighten($menu-background-color, 6%); $menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%); $menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%); $menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #1e1e1e; $card-background-color: #121212;
$card-background-hover-color: lighten($card-background-color, 6%); $card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%); $card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #1e1e1e; $list-background-color: #000000;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
$contained-chip-color: #2e2e2e; $contained-chip-color: #1e1e1e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%); $contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%); $contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #1e1e1e; $outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;
@ -89,7 +94,7 @@ $toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%); $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color // Border color
$border-color: #2e2e2e; $border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%); $border-active-color: lighten($border-color, 30%);
// Scroll bar color // Scroll bar color
@ -98,7 +103,7 @@ $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color // App bar color
$top-bar-color: #272727; $top-bar-color: #1e1e1e;
$search-bar-color: lighten($top-bar-color, 6%); $search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff; $search-bar-focus-color: #ffffff;
@ -110,7 +115,7 @@ $tab-indicator-background-hover-color: transparentize($tab-indicator-active-colo
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); $tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color; $text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #1e1e1e; $text-tab-background-color: #121212;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); $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-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);

7
app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
$menu-text-color: #282c37; $menu-text-color: #282c37;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #191b22; $background-color: #191b22;
@ -34,6 +35,7 @@ $list-background-color: #282c37;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.7); $text-button-hover-color: transparentize($text-button-color, 0.7);
$text-button-focus-color: transparentize($text-button-color, 0.6); $text-button-focus-color: transparentize($text-button-color, 0.6);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
View File

@ -19,6 +19,7 @@ $link-text-color: #217aba;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #eff3f5; $background-color: #eff3f5;
@ -33,6 +34,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: lighten($text-button-color, 36%); $text-button-hover-color: lighten($text-button-color, 36%);
$text-button-focus-color: lighten($text-button-color, 30%); $text-button-focus-color: lighten($text-button-color, 30%);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

5
app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color; $top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #fafafa; $background-color: #fafafa;
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;

9
app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #303030; $background-color: #303030;
@ -34,16 +35,20 @@ $list-background-color: #424242;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
$contained-chip-color: #2e2e2e; $contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%); $contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%); $contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #1e1e1e; $outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/mastodon-material-dark/color/v1-light.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color; $top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #fafafa; $background-color: #fafafa;
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #121212; $background-color: #121212;
@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/mastodon-material-dark/color/v2-light.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #ffffff; $background-color: #ffffff;
@ -34,6 +35,7 @@ $list-background-color: $background-color;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -80,7 +85,7 @@ $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: #ffffff; $floating-action-button-color: #ffffff;
$floating-action-button-hover-color: darken($floating-action-button-color, 6%); $floating-action-button-hover-color: darken($floating-action-button-color, 6%);
$floating-action-button-active-color: darken($floating-action-button-color, 10%); $floating-action-button-active-color: darken($floating-action-button-color, 10%);
$floating-action-button-icon-color: $secondary-color; $floating-action-button-icon-color: $primary-color;
// Toggle color // Toggle color
$toggle-thumb-color: #ffffff; $toggle-thumb-color: #ffffff;

5
app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
View File

@ -52,11 +52,6 @@ $avater-radius: 50%; // Rounded cropping
&:hover { background: $outlined-chip-hover-color !important } &:hover { background: $outlined-chip-hover-color !important }
} }
.relationship-tag,
.account-role {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
}
// Button shadow // Button shadow

5
app/javascript/styles/mastodon-material-dark/loader.scss
View File

@ -1,8 +1,3 @@
@charset "UTF-8";
@import '../application';
@import 'theme/theme'; @import 'theme/theme';
@import 'theme/material-icons'; @import 'theme/material-icons';

2
app/javascript/styles/mastodon-material-dark/plugins/dense.scss
View File

@ -60,4 +60,6 @@
&__action-bar { padding: 10px 0 } &__action-bar { padding: 10px 0 }
} }
.reply-indicator { padding: 8px }
.button.button--block { margin: 6px 0 } .button.button--block { margin: 6px 0 }

8
app/javascript/styles/mastodon-material-dark/theme/account.scss
View File

@ -112,6 +112,8 @@
} }
} }
} }
&__content { color: $secondary-text-color }
} }
&__section-headline { &__section-headline {
@ -142,4 +144,10 @@
border-radius: 17px; border-radius: 17px;
color: $ui-text-color; color: $ui-text-color;
background-color: $contained-chip-color; background-color: $contained-chip-color;
}
.accounts-table__count {
color: $ui-text-color;
small { color: $secondary-text-color }
} }

58
app/javascript/styles/mastodon-material-dark/theme/columns.scss
View File

@ -198,15 +198,10 @@
.setting-text { .setting-text {
color: $primary-text-color; color: $primary-text-color;
background: $search-bar-color; background: $text-field-background-color;
border-radius: $bar-radius; border-radius: $bar-radius;
&::placeholder { color: $tips-text-color } &::placeholder { color: $tips-text-color }
&:focus {
@include shadow-1dp;
background: $search-bar-focus-color;
}
} }
.empty-column-indicator { .empty-column-indicator {
@ -375,7 +370,18 @@
&__unread { background: $badge-color } &__unread { background: $badge-color }
} }
&__pagination { color: $ui-text-color } &__pagination {
color: $ui-text-color;
padding: 8px 16px;
bottom: 8px;
.icon-button {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
margin: 0 8px;
}
}
} }
.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 } .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 }
@ -458,45 +464,11 @@
.relationship-tag { .relationship-tag {
color: $ui-text-color; color: $ui-text-color;
background-color: $contained-chip-color; background-color: $relationship-tag-color;
font-size: 12px; font-size: 12px;
border-radius: 17px; border-radius: 17px;
padding: 4px 8px; padding: 4px 8px;
opacity: 1; opacity: 1;
} }
.attachment-list__list a { color: $secondary-text-color } .attachment-list__list a { color: $secondary-text-color }
.focusable {
&:focus { background: $card-background-color }
}
// single column mode
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper { padding-top: 0 }
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
margin: 12px 12px 0;
}
}
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-background-hover-color;
border-bottom-color: $tab-background-color;
}
&:active,
&:focus {
background: $tab-indicator-background-focus-color;
border-bottom-color: $tab-background-color;
}
}
}

148
app/javascript/styles/mastodon-material-dark/theme/components.scss
View File

@ -173,8 +173,9 @@
.compose-form { .compose-form {
.autosuggest-textarea { .autosuggest-textarea {
&__textarea { &__textarea {
background: $card-background-color; background: $text-field-background-color;
color: $ui-text-color; color: $ui-text-color;
border-radius: $card-radius;
&::placeholder { color: $tips-text-color } &::placeholder { color: $tips-text-color }
} }
@ -230,7 +231,7 @@
&__poll-wrapper { &__poll-wrapper {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
ul { padding: 12px } ul { padding: 16px 12px 16px 0 }
select { select {
color: $ui-text-color; color: $ui-text-color;
@ -272,17 +273,31 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
flex: 0 0 20px; flex: 0 0 20px;
margin: 8px;
&.checkbox { border-radius: 2px }
&:focus,
&:hover { border: 2px solid $control-border-color }
} }
&__text input[type=text] { &__text input[type=text] {
color: $ui-text-color; color: $ui-text-color;
background: $background-color; background: $text-field-background-color;
border: 1px solid $border-color; border: 1px solid $border-color;
padding: 8px 12px; padding: 8px 12px;
&:focus { border-color: $border-active-color } &:focus { border-color: $border-active-color }
} }
&__option input[type=text] {
color: $primary-text-color;
background: $text-field-background-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
&__chart { &__chart {
border-radius: 0; border-radius: 0;
background: $poll-bar-color; background: $poll-bar-color;
@ -368,7 +383,8 @@
} }
.reply-indicator { .reply-indicator {
@include shadow-1dp; box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius; border-radius: $card-radius;
background: $card-background-color; background: $card-background-color;
padding: 16px; padding: 16px;
@ -391,4 +407,128 @@
&__list a { color: $secondary-text-color } &__list a { color: $secondary-text-color }
&.compact .fa { color: $icon-color } &.compact .fa { color: $icon-color }
}
.block-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
background: $card-background-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
}
.load-more {
color: $ui-text-color;
&:hover { background: transparent }
}
.autosuggest-hashtag {
&__name { color: $menu-text-color }
}
.filter-form {
background: $background-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
}
.directory {
&__card {
@include shadow-1dp;
margin: 8px 4px;
border-radius: $card-radius;
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
background: $card-background-color;
padding: 8px 16px;
.display-name {
margin-left: 16px;
span { color: $secondary-text-color }
}
}
&__extra {
background: $card-background-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
padding: 8px 16px;
border-bottom: 1px solid $border-color;
}
.accounts-table__count { padding: 16px 0 }
}
}
}
.mute-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__explanation { margin-top: 16px }
&__action-bar {
background: $card-background-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
.setting-toggle {
margin-top: 16px;
margin-bottom: 16px;
&__label {
color: $ui-text-color;
margin: 0 0 0 12px;
}
}
} }

7
app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
View File

@ -151,6 +151,9 @@
.no-reduce-motion button.icon-button i.fa-retweet { .no-reduce-motion button.icon-button i.fa-retweet {
height: 18px; height: 18px;
width: 18px; width: 18px;
transition: background-position .3s steps(1); transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>'); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
} }
// dropdown icon
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}

6
app/javascript/styles/mastodon-material-dark/theme/media.scss
View File

@ -5,7 +5,11 @@
@import 'mixins'; @import 'mixins';
.media-gallery { border-radius: $card-radius } .media-gallery {
border-radius: 0;
&__item { border-radius: 0 }
}
.media-modal__close { .media-modal__close {
align-content: center; align-content: center;

20
app/javascript/styles/mastodon-material-dark/theme/modal.scss
View File

@ -9,7 +9,7 @@
background: $card-background-color; background: $card-background-color;
color: $ui-text-color; color: $ui-text-color;
border-radius: $dialog-radius; border-radius: $dialog-radius;
width: 280px; width: 300px;
&__container { &__container {
text-align: left; text-align: left;
@ -21,6 +21,24 @@
background: $card-background-color; background: $card-background-color;
padding: 8px; padding: 8px;
} }
&__secondary-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
} }
.actions-modal { .actions-modal {

44
app/javascript/styles/mastodon-material-dark/theme/mobile.scss → app/javascript/styles/mastodon-material-dark/theme/responsive.scss
View File

@ -32,7 +32,6 @@
} }
} }
#tabs-bar__portal { overflow-y: hidden } #tabs-bar__portal { overflow-y: hidden }
.floating-action-button { .floating-action-button {
@ -51,8 +50,45 @@
.column { margin: 0 !important } .column { margin: 0 !important }
.search__input { padding: 16px 46px } .search__input { padding: 16px 46px }
.search__icon .fa { .search__icon {
top: 16px; .fa {
left: 16px; top: 16px;
left: 16px;
}
.fa-times-circle.active { left: unset }
}
}
// middle size screen
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper {
padding-top: 0;
.tabs-bar { margin-bottom: 0 }
}
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
}
}
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-background-hover-color;
border-bottom-color: $tab-background-color;
}
&:active,
&:focus {
background: $tab-indicator-background-focus-color;
border-bottom-color: $tab-background-color;
}
} }
} }

2
app/javascript/styles/mastodon-material-dark/theme/statuses.scss
View File

@ -180,6 +180,6 @@
// search user trends // search user trends
.display-name { .display-name {
&__html { color: $primary-text-color !important } &__html { color: $primary-text-color }
&__account { color: $secondary-text-color } &__account { color: $secondary-text-color }
} }

2
app/javascript/styles/mastodon-material-dark/theme/theme.scss
View File

@ -1,4 +1,4 @@
@charset "UTF-8"; @charset "UTF-8";
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables'; @import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';

5
app/javascript/styles/mastodon-material-light.scss
View File

@ -1,3 +1,2 @@
@charset "UTF-8"; @import 'application';
@import 'mastodon-material-light/loader';
@import 'mastodon-material-light/loader'

135
app/javascript/styles/mastodon-material-light/color/black.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$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%);
// Chip color
$contained-chip-color: #1e1e1e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: transparentize(#ffffff, 0.8);
$icon-background-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 20%);
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #1e1e1e;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #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);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

7
app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
$menu-text-color: #282c37; $menu-text-color: #282c37;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #191b22; $background-color: #191b22;
@ -34,6 +35,7 @@ $list-background-color: #282c37;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.7); $text-button-hover-color: transparentize($text-button-color, 0.7);
$text-button-focus-color: transparentize($text-button-color, 0.6); $text-button-focus-color: transparentize($text-button-color, 0.6);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
View File

@ -19,6 +19,7 @@ $link-text-color: #217aba;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #eff3f5; $background-color: #eff3f5;
@ -33,6 +34,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: lighten($text-button-color, 36%); $text-button-hover-color: lighten($text-button-color, 36%);
$text-button-focus-color: lighten($text-button-color, 30%); $text-button-focus-color: lighten($text-button-color, 30%);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

5
app/javascript/styles/mastodon-material-light/color/plus-classic.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color; $top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #fafafa; $background-color: #fafafa;
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;

9
app/javascript/styles/mastodon-material-light/color/v1-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #303030; $background-color: #303030;
@ -34,16 +35,20 @@ $list-background-color: #424242;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
$contained-chip-color: #2e2e2e; $contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%); $contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%); $contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #1e1e1e; $outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/mastodon-material-light/color/v1-light.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color; $top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #fafafa; $background-color: #fafafa;
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/mastodon-material-light/color/v2-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #121212; $background-color: #121212;
@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/mastodon-material-light/color/v2-light.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #ffffff; $background-color: #ffffff;
@ -34,6 +35,7 @@ $list-background-color: $background-color;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -80,7 +85,7 @@ $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: #ffffff; $floating-action-button-color: #ffffff;
$floating-action-button-hover-color: darken($floating-action-button-color, 6%); $floating-action-button-hover-color: darken($floating-action-button-color, 6%);
$floating-action-button-active-color: darken($floating-action-button-color, 10%); $floating-action-button-active-color: darken($floating-action-button-color, 10%);
$floating-action-button-icon-color: $secondary-color; $floating-action-button-icon-color: $primary-color;
// Toggle color // Toggle color
$toggle-thumb-color: #ffffff; $toggle-thumb-color: #ffffff;

5
app/javascript/styles/mastodon-material-light/layout/material-v2.scss
View File

@ -52,11 +52,6 @@ $avater-radius: 50%; // Rounded cropping
&:hover { background: $outlined-chip-hover-color !important } &:hover { background: $outlined-chip-hover-color !important }
} }
.relationship-tag,
.account-role {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
}
// Button shadow // Button shadow

5
app/javascript/styles/mastodon-material-light/loader.scss
View File

@ -1,8 +1,3 @@
@charset "UTF-8";
@import '../application';
@import 'theme/theme'; @import 'theme/theme';
@import 'theme/material-icons'; @import 'theme/material-icons';

2
app/javascript/styles/mastodon-material-light/plugins/dense.scss
View File

@ -60,4 +60,6 @@
&__action-bar { padding: 10px 0 } &__action-bar { padding: 10px 0 }
} }
.reply-indicator { padding: 8px }
.button.button--block { margin: 6px 0 } .button.button--block { margin: 6px 0 }

8
app/javascript/styles/mastodon-material-light/theme/account.scss
View File

@ -112,6 +112,8 @@
} }
} }
} }
&__content { color: $secondary-text-color }
} }
&__section-headline { &__section-headline {
@ -142,4 +144,10 @@
border-radius: 17px; border-radius: 17px;
color: $ui-text-color; color: $ui-text-color;
background-color: $contained-chip-color; background-color: $contained-chip-color;
}
.accounts-table__count {
color: $ui-text-color;
small { color: $secondary-text-color }
} }

58
app/javascript/styles/mastodon-material-light/theme/columns.scss
View File

@ -198,15 +198,10 @@
.setting-text { .setting-text {
color: $primary-text-color; color: $primary-text-color;
background: $search-bar-color; background: $text-field-background-color;
border-radius: $bar-radius; border-radius: $bar-radius;
&::placeholder { color: $tips-text-color } &::placeholder { color: $tips-text-color }
&:focus {
@include shadow-1dp;
background: $search-bar-focus-color;
}
} }
.empty-column-indicator { .empty-column-indicator {
@ -375,7 +370,18 @@
&__unread { background: $badge-color } &__unread { background: $badge-color }
} }
&__pagination { color: $ui-text-color } &__pagination {
color: $ui-text-color;
padding: 8px 16px;
bottom: 8px;
.icon-button {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
margin: 0 8px;
}
}
} }
.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 } .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 }
@ -458,45 +464,11 @@
.relationship-tag { .relationship-tag {
color: $ui-text-color; color: $ui-text-color;
background-color: $contained-chip-color; background-color: $relationship-tag-color;
font-size: 12px; font-size: 12px;
border-radius: 17px; border-radius: 17px;
padding: 4px 8px; padding: 4px 8px;
opacity: 1; opacity: 1;
} }
.attachment-list__list a { color: $secondary-text-color } .attachment-list__list a { color: $secondary-text-color }
.focusable {
&:focus { background: $card-background-color }
}
// single column mode
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper { padding-top: 0 }
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
margin: 12px 12px 0;
}
}
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-background-hover-color;
border-bottom-color: $tab-background-color;
}
&:active,
&:focus {
background: $tab-indicator-background-focus-color;
border-bottom-color: $tab-background-color;
}
}
}

148
app/javascript/styles/mastodon-material-light/theme/components.scss
View File

@ -173,8 +173,9 @@
.compose-form { .compose-form {
.autosuggest-textarea { .autosuggest-textarea {
&__textarea { &__textarea {
background: $card-background-color; background: $text-field-background-color;
color: $ui-text-color; color: $ui-text-color;
border-radius: $card-radius;
&::placeholder { color: $tips-text-color } &::placeholder { color: $tips-text-color }
} }
@ -230,7 +231,7 @@
&__poll-wrapper { &__poll-wrapper {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
ul { padding: 12px } ul { padding: 16px 12px 16px 0 }
select { select {
color: $ui-text-color; color: $ui-text-color;
@ -272,17 +273,31 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
flex: 0 0 20px; flex: 0 0 20px;
margin: 8px;
&.checkbox { border-radius: 2px }
&:focus,
&:hover { border: 2px solid $control-border-color }
} }
&__text input[type=text] { &__text input[type=text] {
color: $ui-text-color; color: $ui-text-color;
background: $background-color; background: $text-field-background-color;
border: 1px solid $border-color; border: 1px solid $border-color;
padding: 8px 12px; padding: 8px 12px;
&:focus { border-color: $border-active-color } &:focus { border-color: $border-active-color }
} }
&__option input[type=text] {
color: $primary-text-color;
background: $text-field-background-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
&__chart { &__chart {
border-radius: 0; border-radius: 0;
background: $poll-bar-color; background: $poll-bar-color;
@ -368,7 +383,8 @@
} }
.reply-indicator { .reply-indicator {
@include shadow-1dp; box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius; border-radius: $card-radius;
background: $card-background-color; background: $card-background-color;
padding: 16px; padding: 16px;
@ -391,4 +407,128 @@
&__list a { color: $secondary-text-color } &__list a { color: $secondary-text-color }
&.compact .fa { color: $icon-color } &.compact .fa { color: $icon-color }
}
.block-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
background: $card-background-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
}
.load-more {
color: $ui-text-color;
&:hover { background: transparent }
}
.autosuggest-hashtag {
&__name { color: $menu-text-color }
}
.filter-form {
background: $background-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
}
.directory {
&__card {
@include shadow-1dp;
margin: 8px 4px;
border-radius: $card-radius;
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
background: $card-background-color;
padding: 8px 16px;
.display-name {
margin-left: 16px;
span { color: $secondary-text-color }
}
}
&__extra {
background: $card-background-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
padding: 8px 16px;
border-bottom: 1px solid $border-color;
}
.accounts-table__count { padding: 16px 0 }
}
}
}
.mute-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__explanation { margin-top: 16px }
&__action-bar {
background: $card-background-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
.setting-toggle {
margin-top: 16px;
margin-bottom: 16px;
&__label {
color: $ui-text-color;
margin: 0 0 0 12px;
}
}
} }

7
app/javascript/styles/mastodon-material-light/theme/material-icons.scss
View File

@ -151,6 +151,9 @@
.no-reduce-motion button.icon-button i.fa-retweet { .no-reduce-motion button.icon-button i.fa-retweet {
height: 18px; height: 18px;
width: 18px; width: 18px;
transition: background-position .3s steps(1); transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>'); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
} }
// dropdown icon
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}

6
app/javascript/styles/mastodon-material-light/theme/media.scss
View File

@ -5,7 +5,11 @@
@import 'mixins'; @import 'mixins';
.media-gallery { border-radius: $card-radius } .media-gallery {
border-radius: 0;
&__item { border-radius: 0 }
}
.media-modal__close { .media-modal__close {
align-content: center; align-content: center;

20
app/javascript/styles/mastodon-material-light/theme/modal.scss
View File

@ -9,7 +9,7 @@
background: $card-background-color; background: $card-background-color;
color: $ui-text-color; color: $ui-text-color;
border-radius: $dialog-radius; border-radius: $dialog-radius;
width: 280px; width: 300px;
&__container { &__container {
text-align: left; text-align: left;
@ -21,6 +21,24 @@
background: $card-background-color; background: $card-background-color;
padding: 8px; padding: 8px;
} }
&__secondary-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
} }
.actions-modal { .actions-modal {

44
app/javascript/styles/mastodon-material-light/theme/mobile.scss → app/javascript/styles/mastodon-material-light/theme/responsive.scss
View File

@ -32,7 +32,6 @@
} }
} }
#tabs-bar__portal { overflow-y: hidden } #tabs-bar__portal { overflow-y: hidden }
.floating-action-button { .floating-action-button {
@ -51,8 +50,45 @@
.column { margin: 0 !important } .column { margin: 0 !important }
.search__input { padding: 16px 46px } .search__input { padding: 16px 46px }
.search__icon .fa { .search__icon {
top: 16px; .fa {
left: 16px; top: 16px;
left: 16px;
}
.fa-times-circle.active { left: unset }
}
}
// middle size screen
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper {
padding-top: 0;
.tabs-bar { margin-bottom: 0 }
}
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
}
}
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-background-hover-color;
border-bottom-color: $tab-background-color;
}
&:active,
&:focus {
background: $tab-indicator-background-focus-color;
border-bottom-color: $tab-background-color;
}
} }
} }

2
app/javascript/styles/mastodon-material-light/theme/statuses.scss
View File

@ -180,6 +180,6 @@
// search user trends // search user trends
.display-name { .display-name {
&__html { color: $primary-text-color !important } &__html { color: $primary-text-color }
&__account { color: $secondary-text-color } &__account { color: $secondary-text-color }
} }

2
app/javascript/styles/mastodon-material-light/theme/theme.scss
View File

@ -1,4 +1,4 @@
@charset "UTF-8"; @charset "UTF-8";
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables'; @import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';

2
app/javascript/styles/material-auto.scss Normal file
View File

@ -0,0 +1,2 @@
@use 'material-dark';
@media (prefers-color-scheme: light) { @import 'material-light'; }

2
app/javascript/styles/material-black.scss Normal file
View File

@ -0,0 +1,2 @@
@import 'application';
@import 'material-black/loader';

135
app/javascript/styles/material-black/color/black.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$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%);
// Chip color
$contained-chip-color: #1e1e1e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: transparentize(#ffffff, 0.8);
$icon-background-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 20%);
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #1e1e1e;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #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);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

7
app/javascript/styles/material-v1-light/color/mastodon-dark.scss → app/javascript/styles/material-black/color/mastodon-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
$menu-text-color: #282c37; $menu-text-color: #282c37;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #191b22; $background-color: #191b22;
@ -34,6 +35,7 @@ $list-background-color: #282c37;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.7); $text-button-hover-color: transparentize($text-button-color, 0.7);
$text-button-focus-color: transparentize($text-button-color, 0.6); $text-button-focus-color: transparentize($text-button-color, 0.6);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/material-v1-dark/color/mastodon-light.scss → app/javascript/styles/material-black/color/mastodon-light.scss
View File

@ -19,6 +19,7 @@ $link-text-color: #217aba;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #eff3f5; $background-color: #eff3f5;
@ -33,6 +34,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: lighten($text-button-color, 36%); $text-button-hover-color: lighten($text-button-color, 36%);
$text-button-focus-color: lighten($text-button-color, 30%); $text-button-focus-color: lighten($text-button-color, 30%);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

5
app/javascript/styles/material-v1-light/color/plus-classic.scss → app/javascript/styles/material-black/color/plus-classic.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color; $top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #fafafa; $background-color: #fafafa;
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;

9
app/javascript/styles/material-v2-dark/color/v1-dark.scss → app/javascript/styles/material-black/color/v1-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #303030; $background-color: #303030;
@ -34,16 +35,20 @@ $list-background-color: #424242;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
$contained-chip-color: #2e2e2e; $contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%); $contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%); $contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #1e1e1e; $outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/material-v2-dark/color/v1-light.scss → app/javascript/styles/material-black/color/v1-light.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color; $top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #fafafa; $background-color: #fafafa;
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/material-v1-dark/color/v2-dark.scss → app/javascript/styles/material-black/color/v2-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #121212; $background-color: #121212;
@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/material-v1-light/color/v2-light.scss → app/javascript/styles/material-black/color/v2-light.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #ffffff; $background-color: #ffffff;
@ -34,6 +35,7 @@ $list-background-color: $background-color;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -80,7 +85,7 @@ $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: #ffffff; $floating-action-button-color: #ffffff;
$floating-action-button-hover-color: darken($floating-action-button-color, 6%); $floating-action-button-hover-color: darken($floating-action-button-color, 6%);
$floating-action-button-active-color: darken($floating-action-button-color, 10%); $floating-action-button-active-color: darken($floating-action-button-color, 10%);
$floating-action-button-icon-color: $secondary-color; $floating-action-button-icon-color: $primary-color;
// Toggle color // Toggle color
$toggle-thumb-color: #ffffff; $toggle-thumb-color: #ffffff;

0
app/javascript/styles/material-v1-dark/custom_color.scss → app/javascript/styles/material-black/custom_color.scss
View File

2
app/javascript/styles/material-v1-dark/custom_config.scss → app/javascript/styles/material-black/custom_config.scss
View File

@ -2,4 +2,4 @@
// Add your settings below // Add your settings below
@import 'color/v1-dark'; @import 'color/black';

0
app/javascript/styles/material-v1-dark/custom_layout.scss → app/javascript/styles/material-black/custom_layout.scss
View File

0
app/javascript/styles/material-v1-dark/icon_config.scss → app/javascript/styles/material-black/icon_config.scss
View File

0
app/javascript/styles/material-v1-dark/layout/material-v1.scss → app/javascript/styles/material-black/layout/material-v1.scss
View File

5
app/javascript/styles/material-v1-light/layout/material-v2.scss → app/javascript/styles/material-black/layout/material-v2.scss
View File

@ -52,11 +52,6 @@ $avater-radius: 50%; // Rounded cropping
&:hover { background: $outlined-chip-hover-color !important } &:hover { background: $outlined-chip-hover-color !important }
} }
.relationship-tag,
.account-role {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
}
// Button shadow // Button shadow

5
app/javascript/styles/material-v1-dark/loader.scss → app/javascript/styles/material-black/loader.scss
View File

@ -1,8 +1,3 @@
@charset "UTF-8";
@import '../application';
@import 'theme/theme'; @import 'theme/theme';
@import 'theme/material-icons'; @import 'theme/material-icons';

0
app/javascript/styles/material-v1-dark/plugins/cards.scss → app/javascript/styles/material-black/plugins/cards.scss
View File

2
app/javascript/styles/material-v1-light/plugins/dense.scss → app/javascript/styles/material-black/plugins/dense.scss
View File

@ -60,4 +60,6 @@
&__action-bar { padding: 10px 0 } &__action-bar { padding: 10px 0 }
} }
.reply-indicator { padding: 8px }
.button.button--block { margin: 6px 0 } .button.button--block { margin: 6px 0 }

0
app/javascript/styles/material-v1-dark/plugins/plus.scss → app/javascript/styles/material-black/plugins/plus.scss
View File

0
app/javascript/styles/material-v1-dark/theme/_functions.scss → app/javascript/styles/material-black/theme/_functions.scss
View File

0
app/javascript/styles/material-v1-dark/theme/_mixins.scss → app/javascript/styles/material-black/theme/_mixins.scss
View File

8
app/javascript/styles/material-v1-dark/theme/account.scss → app/javascript/styles/material-black/theme/account.scss
View File

@ -112,6 +112,8 @@
} }
} }
} }
&__content { color: $secondary-text-color }
} }
&__section-headline { &__section-headline {
@ -142,4 +144,10 @@
border-radius: 17px; border-radius: 17px;
color: $ui-text-color; color: $ui-text-color;
background-color: $contained-chip-color; background-color: $contained-chip-color;
}
.accounts-table__count {
color: $ui-text-color;
small { color: $secondary-text-color }
} }

0
app/javascript/styles/material-v1-dark/theme/base_config.scss → app/javascript/styles/material-black/theme/base_config.scss
View File

0
app/javascript/styles/material-v1-dark/theme/basics.scss → app/javascript/styles/material-black/theme/basics.scss
View File

0
app/javascript/styles/material-v1-dark/theme/button.scss → app/javascript/styles/material-black/theme/button.scss
View File

58
app/javascript/styles/material-v2-dark/theme/columns.scss → app/javascript/styles/material-black/theme/columns.scss
View File

@ -198,15 +198,10 @@
.setting-text { .setting-text {
color: $primary-text-color; color: $primary-text-color;
background: $search-bar-color; background: $text-field-background-color;
border-radius: $bar-radius; border-radius: $bar-radius;
&::placeholder { color: $tips-text-color } &::placeholder { color: $tips-text-color }
&:focus {
@include shadow-1dp;
background: $search-bar-focus-color;
}
} }
.empty-column-indicator { .empty-column-indicator {
@ -375,7 +370,18 @@
&__unread { background: $badge-color } &__unread { background: $badge-color }
} }
&__pagination { color: $ui-text-color } &__pagination {
color: $ui-text-color;
padding: 8px 16px;
bottom: 8px;
.icon-button {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
margin: 0 8px;
}
}
} }
.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 } .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 }
@ -458,45 +464,11 @@
.relationship-tag { .relationship-tag {
color: $ui-text-color; color: $ui-text-color;
background-color: $contained-chip-color; background-color: $relationship-tag-color;
font-size: 12px; font-size: 12px;
border-radius: 17px; border-radius: 17px;
padding: 4px 8px; padding: 4px 8px;
opacity: 1; opacity: 1;
} }
.attachment-list__list a { color: $secondary-text-color } .attachment-list__list a { color: $secondary-text-color }
.focusable {
&:focus { background: $card-background-color }
}
// single column mode
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper { padding-top: 0 }
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
margin: 12px 12px 0;
}
}
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-background-hover-color;
border-bottom-color: $tab-background-color;
}
&:active,
&:focus {
background: $tab-indicator-background-focus-color;
border-bottom-color: $tab-background-color;
}
}
}

148
app/javascript/styles/material-v2-dark/theme/components.scss → app/javascript/styles/material-black/theme/components.scss
View File

@ -173,8 +173,9 @@
.compose-form { .compose-form {
.autosuggest-textarea { .autosuggest-textarea {
&__textarea { &__textarea {
background: $card-background-color; background: $text-field-background-color;
color: $ui-text-color; color: $ui-text-color;
border-radius: $card-radius;
&::placeholder { color: $tips-text-color } &::placeholder { color: $tips-text-color }
} }
@ -230,7 +231,7 @@
&__poll-wrapper { &__poll-wrapper {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
ul { padding: 12px } ul { padding: 16px 12px 16px 0 }
select { select {
color: $ui-text-color; color: $ui-text-color;
@ -272,17 +273,31 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
flex: 0 0 20px; flex: 0 0 20px;
margin: 8px;
&.checkbox { border-radius: 2px }
&:focus,
&:hover { border: 2px solid $control-border-color }
} }
&__text input[type=text] { &__text input[type=text] {
color: $ui-text-color; color: $ui-text-color;
background: $background-color; background: $text-field-background-color;
border: 1px solid $border-color; border: 1px solid $border-color;
padding: 8px 12px; padding: 8px 12px;
&:focus { border-color: $border-active-color } &:focus { border-color: $border-active-color }
} }
&__option input[type=text] {
color: $primary-text-color;
background: $text-field-background-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
&__chart { &__chart {
border-radius: 0; border-radius: 0;
background: $poll-bar-color; background: $poll-bar-color;
@ -368,7 +383,8 @@
} }
.reply-indicator { .reply-indicator {
@include shadow-1dp; box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius; border-radius: $card-radius;
background: $card-background-color; background: $card-background-color;
padding: 16px; padding: 16px;
@ -391,4 +407,128 @@
&__list a { color: $secondary-text-color } &__list a { color: $secondary-text-color }
&.compact .fa { color: $icon-color } &.compact .fa { color: $icon-color }
}
.block-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
background: $card-background-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
}
.load-more {
color: $ui-text-color;
&:hover { background: transparent }
}
.autosuggest-hashtag {
&__name { color: $menu-text-color }
}
.filter-form {
background: $background-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
}
.directory {
&__card {
@include shadow-1dp;
margin: 8px 4px;
border-radius: $card-radius;
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
background: $card-background-color;
padding: 8px 16px;
.display-name {
margin-left: 16px;
span { color: $secondary-text-color }
}
}
&__extra {
background: $card-background-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
padding: 8px 16px;
border-bottom: 1px solid $border-color;
}
.accounts-table__count { padding: 16px 0 }
}
}
}
.mute-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__explanation { margin-top: 16px }
&__action-bar {
background: $card-background-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
.setting-toggle {
margin-top: 16px;
margin-bottom: 16px;
&__label {
color: $ui-text-color;
margin: 0 0 0 12px;
}
}
} }

0
app/javascript/styles/material-v1-dark/theme/control.scss → app/javascript/styles/material-black/theme/control.scss
View File

0
app/javascript/styles/material-v1-dark/theme/emoji-picker.scss → app/javascript/styles/material-black/theme/emoji-picker.scss
View File

0
app/javascript/styles/material-v1-dark/theme/icons.scss → app/javascript/styles/material-black/theme/icons.scss
View File

7
app/javascript/styles/material-v1-light/theme/material-icons.scss → app/javascript/styles/material-black/theme/material-icons.scss
View File

@ -151,6 +151,9 @@
.no-reduce-motion button.icon-button i.fa-retweet { .no-reduce-motion button.icon-button i.fa-retweet {
height: 18px; height: 18px;
width: 18px; width: 18px;
transition: background-position .3s steps(1); transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>'); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
} }
// dropdown icon
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}

6
app/javascript/styles/material-v2-dark/theme/media.scss → app/javascript/styles/material-black/theme/media.scss
View File

@ -5,7 +5,11 @@
@import 'mixins'; @import 'mixins';
.media-gallery { border-radius: $card-radius } .media-gallery {
border-radius: 0;
&__item { border-radius: 0 }
}
.media-modal__close { .media-modal__close {
align-content: center; align-content: center;

20
app/javascript/styles/material-v1-dark/theme/modal.scss → app/javascript/styles/material-black/theme/modal.scss
View File

@ -9,7 +9,7 @@
background: $card-background-color; background: $card-background-color;
color: $ui-text-color; color: $ui-text-color;
border-radius: $dialog-radius; border-radius: $dialog-radius;
width: 280px; width: 300px;
&__container { &__container {
text-align: left; text-align: left;
@ -21,6 +21,24 @@
background: $card-background-color; background: $card-background-color;
padding: 8px; padding: 8px;
} }
&__secondary-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
} }
.actions-modal { .actions-modal {

44
app/javascript/styles/material-v1-light/theme/mobile.scss → app/javascript/styles/material-black/theme/responsive.scss
View File

@ -32,7 +32,6 @@
} }
} }
#tabs-bar__portal { overflow-y: hidden } #tabs-bar__portal { overflow-y: hidden }
.floating-action-button { .floating-action-button {
@ -51,8 +50,45 @@
.column { margin: 0 !important } .column { margin: 0 !important }
.search__input { padding: 16px 46px } .search__input { padding: 16px 46px }
.search__icon .fa { .search__icon {
top: 16px; .fa {
left: 16px; top: 16px;
left: 16px;
}
.fa-times-circle.active { left: unset }
}
}
// middle size screen
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper {
padding-top: 0;
.tabs-bar { margin-bottom: 0 }
}
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
}
}
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-background-hover-color;
border-bottom-color: $tab-background-color;
}
&:active,
&:focus {
background: $tab-indicator-background-focus-color;
border-bottom-color: $tab-background-color;
}
} }
} }

2
app/javascript/styles/material-v1-light/theme/statuses.scss → app/javascript/styles/material-black/theme/statuses.scss
View File

@ -180,6 +180,6 @@
// search user trends // search user trends
.display-name { .display-name {
&__html { color: $primary-text-color !important } &__html { color: $primary-text-color }
&__account { color: $secondary-text-color } &__account { color: $secondary-text-color }
} }

4
app/javascript/styles/material-black/theme/theme.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';

0
app/javascript/styles/material-v1-dark/theme/variables.scss → app/javascript/styles/material-black/theme/variables.scss
View File

2
app/javascript/styles/material-dark.scss Normal file
View File

@ -0,0 +1,2 @@
@import 'application';
@import 'material-dark/loader';

135
app/javascript/styles/material-dark/color/black.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$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%);
// Chip color
$contained-chip-color: #1e1e1e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: transparentize(#ffffff, 0.8);
$icon-background-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 20%);
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #1e1e1e;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #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);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

7
app/javascript/styles/material-v2-dark/color/mastodon-dark.scss → app/javascript/styles/material-dark/color/mastodon-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
$menu-text-color: #282c37; $menu-text-color: #282c37;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #191b22; $background-color: #191b22;
@ -34,6 +35,7 @@ $list-background-color: #282c37;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.7); $text-button-hover-color: transparentize($text-button-color, 0.7);
$text-button-focus-color: transparentize($text-button-color, 0.6); $text-button-focus-color: transparentize($text-button-color, 0.6);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/material-v1-light/color/mastodon-light.scss → app/javascript/styles/material-dark/color/mastodon-light.scss
View File

@ -19,6 +19,7 @@ $link-text-color: #217aba;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #eff3f5; $background-color: #eff3f5;
@ -33,6 +34,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: lighten($text-button-color, 36%); $text-button-hover-color: lighten($text-button-color, 36%);
$text-button-focus-color: lighten($text-button-color, 30%); $text-button-focus-color: lighten($text-button-color, 30%);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

5
app/javascript/styles/material-v1-dark/color/plus-classic.scss → app/javascript/styles/material-dark/color/plus-classic.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color; $top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #fafafa; $background-color: #fafafa;
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;

9
app/javascript/styles/material-v1-light/color/v1-dark.scss → app/javascript/styles/material-dark/color/v1-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #303030; $background-color: #303030;
@ -34,16 +35,20 @@ $list-background-color: #424242;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
$contained-chip-color: #2e2e2e; $contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%); $contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%); $contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #1e1e1e; $outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/material-v2-light/color/v1-light.scss → app/javascript/styles/material-dark/color/v1-light.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color; $top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #fafafa; $background-color: #fafafa;
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/material-v2-dark/color/v2-dark.scss → app/javascript/styles/material-dark/color/v2-dark.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color; $search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #121212; $background-color: #121212;
@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
$list-background-hover-color: lighten($list-background-color, 6%); $list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%); $list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: darken($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%); $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color; $text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color; $floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff; $floating-action-button-icon-color: #ffffff;

7
app/javascript/styles/material-v2-dark/color/v2-light.scss → app/javascript/styles/material-dark/color/v2-light.scss
View File

@ -20,6 +20,7 @@ $link-text-color: #4285f4;
$menu-text-color: $ui-text-color; $menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color; $top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color; $search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color // Background-color
$background-color: #ffffff; $background-color: #ffffff;
@ -34,6 +35,7 @@ $list-background-color: $background-color;
$list-background-hover-color: darken($list-background-color, 6%); $list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%); $list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-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%); $verified-background-color: lighten($verified-color, 20%);
// Chip color // Chip color
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%); $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%); $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color // Badge color
$badge-color: $primary-color; $badge-color: $primary-color;
//$badge-color: $secondary-color; //$badge-color: $secondary-color;
@ -80,7 +85,7 @@ $text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: #ffffff; $floating-action-button-color: #ffffff;
$floating-action-button-hover-color: darken($floating-action-button-color, 6%); $floating-action-button-hover-color: darken($floating-action-button-color, 6%);
$floating-action-button-active-color: darken($floating-action-button-color, 10%); $floating-action-button-active-color: darken($floating-action-button-color, 10%);
$floating-action-button-icon-color: $secondary-color; $floating-action-button-icon-color: $primary-color;
// Toggle color // Toggle color
$toggle-thumb-color: #ffffff; $toggle-thumb-color: #ffffff;

0
app/javascript/styles/material-v1-light/custom_color.scss → app/javascript/styles/material-dark/custom_color.scss
View File

5
app/javascript/styles/material-dark/custom_config.scss Normal file
View File

@ -0,0 +1,5 @@
@charset "UTF-8";
// Add your settings below
@import 'color/v2-dark';

0
app/javascript/styles/material-v1-light/custom_layout.scss → app/javascript/styles/material-dark/custom_layout.scss
View File

0
app/javascript/styles/material-v1-light/icon_config.scss → app/javascript/styles/material-dark/icon_config.scss
View File

0
app/javascript/styles/material-v1-light/layout/material-v1.scss → app/javascript/styles/material-dark/layout/material-v1.scss
View File

5
app/javascript/styles/material-v2-dark/layout/material-v2.scss → app/javascript/styles/material-dark/layout/material-v2.scss
View File

@ -52,11 +52,6 @@ $avater-radius: 50%; // Rounded cropping
&:hover { background: $outlined-chip-hover-color !important } &:hover { background: $outlined-chip-hover-color !important }
} }
.relationship-tag,
.account-role {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
}
// Button shadow // Button shadow

5
app/javascript/styles/material-v2-light/loader.scss → app/javascript/styles/material-dark/loader.scss
View File

@ -1,8 +1,3 @@
@charset "UTF-8";
@import '../application';
@import 'theme/theme'; @import 'theme/theme';
@import 'theme/material-icons'; @import 'theme/material-icons';

0
app/javascript/styles/material-v1-light/plugins/cards.scss → app/javascript/styles/material-dark/plugins/cards.scss
View File

2
app/javascript/styles/material-v2-dark/plugins/dense.scss → app/javascript/styles/material-dark/plugins/dense.scss
View File

@ -60,4 +60,6 @@
&__action-bar { padding: 10px 0 } &__action-bar { padding: 10px 0 }
} }
.reply-indicator { padding: 8px }
.button.button--block { margin: 6px 0 } .button.button--block { margin: 6px 0 }

0
app/javascript/styles/material-v1-light/plugins/plus.scss → app/javascript/styles/material-dark/plugins/plus.scss
View File

Some files were not shown because too many files have changed in this diff Show More