AkkomaGang/fedibird-fe
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

Add Mastodon Material theme 1.0.0

Browse source
This commit is contained in:
noellabo 2021-07-30 15:49:15 +09:00
parent cf642b0b8f
commit 893e6eb401
99 changed files with 6230 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/styles/mastodon-material-google-plus.scss Normal file
View file

@ -0,0 +1,2 @@
@import 'application';
@import 'mastodon-material/profiles/mastodon-material-google-plus/loader';

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

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

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

@ -0,0 +1,2 @@
@import 'application';
@import 'mastodon-material/profiles/mastodon-material-mastodon-light/loader';

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

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

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

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

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

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

2
app/javascript/styles/mastodon-material-v2-light.scss Normal file
View file

@ -0,0 +1,2 @@
@import 'application';
@import 'mastodon-material/profiles/mastodon-material-v2-light/loader';

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

@ -0,0 +1,2 @@
@import 'application';
@import 'mastodon-material/profiles/default/loader';

149
app/javascript/styles/mastodon-material/color/black.scss Normal file
View file

@ -0,0 +1,149 @@
@charset "UTF-8";
$color-scheme: dark;
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
$primary-text-on-shadow-color: #ffffff;
$text-field-color: $ui-text-color;
// Background-color
$bg-color: #000000;
$menu-bg-color: #121212;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #121212;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #000000;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-active-hover-color: lighten($list-bg-color, 16%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$dropdown-field-bg-color: lighten($bg-color, 6%);
$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
$verified-bg-color: darken($verified-color, 20%);
$unread-bg-color: transparentize($primary-color, 0.8);
// Chip color
$contained-chip-color: #1e1e1e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$disabled-button-color: #cccccc;
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #1e1e1e;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
$loading-indicator-color: $primary-color;
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

149
app/javascript/styles/mastodon-material/color/mastodon-dark.scss Normal file
View file

@ -0,0 +1,149 @@
@charset "UTF-8";
$color-scheme: dark;
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9baec8;
$ui-text-color: #fff;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #606984;
$tips-text-color: #6d7889;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4ea2df;
$menu-text-color: #282c37;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
$primary-text-on-shadow-color: #ffffff;
$text-field-color: $ui-text-color;
// Background-color
$bg-color: #191b22;
$menu-bg-color: #d9e1e8;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #313543;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #282c37;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-active-hover-color: lighten($list-bg-color, 16%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$dropdown-field-bg-color: lighten($bg-color, 6%);
$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
$verified-bg-color: darken($verified-color, 20%);
$unread-bg-color: transparentize($primary-color, 0.8);
// Chip color
$contained-chip-color: #42485a;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #9baec8;
$icon-hover-color: lighten($icon-color, 30%);
$icon-bg-hover-color: lighten($bg-color, 14%);
$icon-bg-active-color: lighten($bg-color, 18%);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #fff;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.7);
$text-button-focus-color: transparentize($text-button-color, 0.6);
$disabled-button-color: #cccccc;
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($primary-color, 18%);
// Border color
$border-color: #393f4f;
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 16%);
$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
// App bar color
$top-bar-color: #313543;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-item-color: #d9e1e8;
$tab-item-active-color: $primary-color;
$tab-bg-color: #1f232b;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
$loading-indicator-color: $primary-color;
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

148
app/javascript/styles/mastodon-material/color/mastodon-light.scss Normal file
View file

@ -0,0 +1,148 @@
@charset "UTF-8";
$color-scheme: light;
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #217aba;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
$primary-text-on-shadow-color: #ffffff;
$text-field-color: $ui-text-color;
// Background-color
$bg-color: #eff3f5;
$menu-bg-color: $bg-color;
$menu-bg-hover-color: darken($bg-color, 6%);
$menu-bg-active-color: darken($bg-color, 10%);
$menu-bg-active-hover-color: darken($bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-active-hover-color: darken($list-bg-color, 16%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$dropdown-field-bg-color: darken($bg-color, 6%);
$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
$verified-bg-color: lighten($verified-color, 20%);
$unread-bg-color: transparentize($primary-color, 0.8);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #282c37;
$icon-hover-color: darken($icon-color, 30%);
$icon-bg-hover-color: darken($bg-color, 4%);
$icon-bg-active-color: darken($bg-color, 8%);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: lighten($text-button-color, 36%);
$text-button-focus-color: lighten($text-button-color, 30%);
$disabled-button-color: #cccccc;
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: $primary-color;
$toggle-track-active-color: lighten($primary-color, 26%);
// Border color
$border-color: #dadce0;
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: #ccd7e0;
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #ffffff;
$search-bar-color: #d9e1e8;
$search-bar-focus-color: $bg-color;
// Tab color
$tab-item-color: #282c37;
$tab-item-active-color: $primary-color;
$tab-bg-color: #e6ebf0;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
$loading-indicator-color: $primary-color;
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

145
app/javascript/styles/mastodon-material/color/plus-classic.scss Normal file
View file

@ -0,0 +1,145 @@
$color-scheme: light;
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$inverted-text-color: #ffffff;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
$primary-text-on-shadow-color: #ffffff;
$text-field-color: $ui-text-color;
// Background-color
$bg-color: #fafafa;
$menu-bg-color: #ffffff;
$menu-bg-hover-color: darken($menu-bg-color, 6%);
$menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-active-hover-color: darken($list-bg-color, 16%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$dropdown-field-bg-color: darken($bg-color, 6%);
$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
$verified-bg-color: lighten($verified-color, 20%);
$unread-bg-color: transparentize($primary-color, 0.8);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
$icon-bg-hover-color: transparentize(#000000, 0.9);
$icon-bg-active-color: transparentize(#000000, 0.8);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$disabled-button-color: #cccccc;
$floating-action-button-color: $secondary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #db4437;
$search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: #ffffff;
$tab-bg-color: $top-bar-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
$loading-indicator-color: $primary-color;
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

148
app/javascript/styles/mastodon-material/color/v1-dark.scss Normal file
View file

@ -0,0 +1,148 @@
@charset "UTF-8";
$color-scheme: dark;
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
$primary-text-on-shadow-color: #ffffff;
$text-field-color: $ui-text-color;
// Background-color
$bg-color: #303030;
$menu-bg-color: #424242;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #424242;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #424242;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-active-hover-color: lighten($list-bg-color, 16%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$dropdown-field-bg-color: lighten($bg-color, 6%);
$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
$verified-bg-color: darken($verified-color, 20%);
$unread-bg-color: transparentize($primary-color, 0.8);
// Chip color
$contained-chip-color: #2e2e2e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$disabled-button-color: #cccccc;
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);
$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
// App bar color
$top-bar-color: #1565C0;
$search-bar-color: lighten($bg-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: #ffffff;
$tab-bg-color: $top-bar-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
$loading-indicator-color: $primary-color;
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

149
app/javascript/styles/mastodon-material/color/v1-light.scss Normal file
View file

@ -0,0 +1,149 @@
@charset "UTF-8";
$color-scheme: light;
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$inverted-text-color: #ffffff;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
$primary-text-on-shadow-color: #ffffff;
$text-field-color: $ui-text-color;
// Background-color
$bg-color: #fafafa;
$menu-bg-color: #ffffff;
$menu-bg-hover-color: darken($menu-bg-color, 6%);
$menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-active-hover-color: darken($list-bg-color, 16%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$dropdown-field-bg-color: darken($bg-color, 6%);
$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
$verified-bg-color: lighten($verified-color, 20%);
$unread-bg-color: transparentize($primary-color, 0.8);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
$icon-bg-hover-color: transparentize(#000000, 0.9);
$icon-bg-active-color: transparentize(#000000, 0.8);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$top-bar-unread-icon-color: darken($primary-color, 30%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$disabled-button-color: #cccccc;
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #2196f3;
$search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: #ffffff;
$tab-bg-color: $top-bar-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
$loading-indicator-color: $primary-color;
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

149
app/javascript/styles/mastodon-material/color/v2-dark.scss Normal file
View file

@ -0,0 +1,149 @@
@charset "UTF-8";
$color-scheme: dark;
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
$primary-text-on-shadow-color: #ffffff;
$text-field-color: $ui-text-color;
// Background-color
$bg-color: #121212;
$menu-bg-color: #1e1e1e;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #1e1e1e;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #1e1e1e;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-active-hover-color: lighten($list-bg-color, 16%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$dropdown-field-bg-color: lighten($bg-color, 6%);
$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%);
$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%);
$verified-bg-color: darken($verified-color, 20%);
$unread-bg-color: transparentize($primary-color, 0.8);
// Chip color
$contained-chip-color: #2e2e2e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$disabled-button-color: #cccccc;
$floating-action-button-color: #272727;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: $primary-color;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #5f6368;
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #272727;
$search-bar-color: lighten($top-bar-color, 18%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
$loading-indicator-color: $primary-color;
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

149
app/javascript/styles/mastodon-material/color/v2-light.scss Normal file
View file

@ -0,0 +1,149 @@
@charset "UTF-8";
$color-scheme: light;
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$inverted-text-color: #ffffff;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
$primary-text-on-shadow-color: #ffffff;
$text-field-color: $ui-text-color;
// Background-color
$bg-color: #ffffff;
$menu-bg-color: $bg-color;
$menu-bg-hover-color: darken($menu-bg-color, 6%);
$menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: $bg-color;
$card-bg-hover-color: darken($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: $bg-color;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-active-hover-color: darken($list-bg-color, 16%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$dropdown-field-bg-color: darken($bg-color, 6%);
$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
$verified-bg-color: lighten($verified-color, 20%);
$unread-bg-color: transparentize($primary-color, 0.8);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
$icon-bg-hover-color: transparentize(#000000, 0.9);
$icon-bg-active-color: transparentize(#000000, 0.8);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$disabled-button-color: #cccccc;
$floating-action-button-color: #ffffff;
$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
$floating-action-button-active-color: darken($floating-action-button-color, 10%);
$floating-action-button-icon-color: $primary-color;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);
$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
$scroll-bar-thumb-active-color: darken($bg-color, 38%);
// App bar color
$top-bar-color: $bg-color;
$search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-item-color: transparentize(#000000, 0.5);
$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
$loading-indicator-color: $primary-color;
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

83
app/javascript/styles/mastodon-material/layout/material-v1.scss Normal file
View file

@ -0,0 +1,83 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 2px;
// Search bar radius
$search-bar-radius: 2px;
// Bar radius settings
$bar-radius: 0;
// Button radius settings
$button-radius: 2px;
// Card radius settings
$card-radius: 2px;
// Dialog radius settings
$dialog-radius: 2px;
// Menu radius settings
$menu-radius: 2px;
// Table radius settings
$table-radius: 2px;
// Media radius settings
$media-radius: 0;
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
// Avatar cropping settings
$avatar-radius: 50%; // Rounded cropping
//$avatar-radius: 2px // Material v1 square
//$avatar-radius: $card-radius // Fit to card radius
// Tab indicator thickness
$tab-indicator-thickness: 2px;
//$tab-indicator-thickness: 4px;
// Chip settings
$chip-type: contained; // Material v1 styled contained chip
// Button on statuses
$button-on-status: text; // Material v1 styled text button
//$button-on-status: outlined; // Material v2 styled outlined button
// Button shadow
$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;
// CW text field border
$cw-area-border: underlined;
//$cw-area-border: none;
// Compose text field border
$compose-area-border: none;
//$compose-area-border: underlined;
// Other text field border
$other-text-area-border: underlined;
//$other-text-area-border: none;

97
app/javascript/styles/mastodon-material/layout/material-v2.scss Normal file
View file

@ -0,0 +1,97 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 8px;
//$nav-bar-radius: 28px; // full radius
// Search bar radius
$search-bar-radius: 8px;
//$search-bar-radius: 21px; // full rounded
// Bar radius settings
$bar-radius: 0;
//$bar-radius: 8px;
// Button radius settings
$button-radius: 8px;
// Card radius settings
$card-radius: 8px;
// Dialog radius settings
$dialog-radius: 8px;
// Menu radius settings
$menu-radius: 8px;
// Table radius settings
$table-radius: 8px;
//$table-radius: 2px;
// Media radius settings
$media-radius: 0;
//$media-radius: 2px;
// Navigation drawer item settings
$nav-drawer-item-radius: 8px; // corner rounded
//$nav-drawer-item-radius: 32px; // full rounded
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
// Avatar cropping settings
$avatar-radius: 50%; // Rounded cropping
//$avatar-radius: $card-radius // Fit to card radius
//$avatar-radius: 2px // Material v1 square
//$avatar-radius: 8px // Material v2 square
// Tab indicator thickness
//$tab-indicator-thickness: 2px;
$tab-indicator-thickness: 4px;
// Chip settings
$chip-type: outlined; // Material v2 styled outlined chip
//$outlined-chip: contained; // Material v1 styled contained chip
// Button on statuses
$button-on-status: text; // Material v1 styled text button
//$button-on-status: outlined; // Material v2 styled outlined button
// Button shadow
$button-shadow: true; // Material v1 styled colored button with shadow
//$button-shadow: false; // Material v2 styled colored button without shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini
// CW text field border
$cw-area-border: none;
//$cw-area-border: underlined;
//$cw-area-border: outlined;
// Compose text field border
$compose-area-border: none;
//$compose-area-border: underlined;
//$compose-area-border: outlined;
// Other text field border
$other-text-area-border: underlined;
//$other-text-area-border: outlined;
//$other-text-area-border: none;

45
app/javascript/styles/mastodon-material/plugins/cards.scss Normal file
View file

@ -0,0 +1,45 @@
.column {
box-shadow: none !important;
margin: 2px 0 !important;
padding: 8px !important;
> .scrollable { background: $bg-color }
}
@media screen and (min-width: 415px) {
.notification.notification,
.status {
border-radius: 0;
&__wrapper.status__wrapper {
margin: 8px 0;
border-radius: 0;
}
}
.columns-area__panels__main { box-shadow: none }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
background: $card-bg-color;
&__prepend { padding: 8px 8px 2px 0 }
}
.account { border-bottom: 0 !important }
.status__wrapper.status__wrapper,
.notification.notification {
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
background: $card-bg-color;
}
.notification {
.status__wrapper.status__wrapper { box-shadow: none !important }
&__filter-bar { @include non-overflow-shadow-4dp }
}

97
app/javascript/styles/mastodon-material/plugins/dense.scss Normal file
View file

@ -0,0 +1,97 @@
$dense: true;
.drawer {
&__header { height: 48px }
&__tab { margin: 6px auto 6px }
}
.column { margin: 10px 5px }
.column-header {
height: 48px;
> button { padding: 12px 16px }
&__buttons { height: 48px }
&__button { margin: 6px }
&__back-button { margin: 6px }
}
.column-subheading { padding: 8px 16px }
.column-link { padding: 12px 16px }
.tabs-bar__link { padding: 12px 16px 8px 16px }
.notification__filter-bar button { padding: 12px 0 }
.getting-started__footer {
padding: 12px 16px;
p { margin-bottom: 12px }
}
.compose-form {
.compose-form {
&__publish { padding-top: 8px }
&__buttons-wrapper {
.icon-button,
.text-icon-button { padding: 4px }
}
}
}
.status {
padding: 8px 8px 4px 66px;
&__expand { width: 66px }
&__avatar {
left: 8px;
top: 10px;
}
&__content {
padding-top: 2px;
&__spoiler-link,
&__read-more-button {
height: auto;
padding: 4px 8px;
}
}
&__action-bar-button {
margin: 0 4px;
&.icon-button { padding: 4px }
}
&__action-bar-dropdown {
width: 28px !important;
height: 28px !important;
margin: 0 4px;
.icon-button { padding: 4px }
}
}
@media screen and (min-width: 630px) {
.columns-area--mobile .status { padding: 8px 8px 8px 78px }
}
.detailed-status {
padding: 14px;
&__meta { margin-top: 14px }
&__action-bar { padding: 10px 0 }
}
.reply-indicator { padding: 8px }
.button.button--block { margin: 6px 0 }

73
app/javascript/styles/mastodon-material/plugins/plus.scss Normal file
View file

@ -0,0 +1,73 @@
$name: "Plus";
$plugin-version: "1.0.0";
$target-version: "1.0.0";
$website: "";
@include version-check($name, $plugin-version, $target-version, $website);
.status__action-bar-button {
background: #eeeeee;
width: 28px !important;
height: 28px !important;
border-radius: 50%;
.fa { vertical-align: bottom }
}
// exception
.media-modal__overlay .picture-in-picture__footer .icon-button,
.status__action-bar-button.icon-button--with-counter { background: transparent }
// favorite icon
.star-icon.active,
.star-icon.icon-button.active.activate,
.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
.star-icon {
border-radius: 50%;
width: 28px;
height: 28px;
vertical-align: baseline;
font-size: 18px;
&.fa-fw::before { vertical-align: middle }
}
}
// Fedibird bottom bar in mobile
.tabs-bar.bottom-bar {
background: #212121;
.tabs-bar__link {
color: transparentize(#ffffff, 0.5);
&.active { color: #ffffff }
}
}
// Quote
.quote-status {
border-radius: 0;
border: none;
border-top: 1px solid $border-color;
padding: 16px 16px 16px 48px;
margin-top: 16px;
.detailed-status__display-avatar,
.status__avatar {
left: 0 !important;
top: 16px !important;
}
}
@if $dense {
.quote-status {
padding: 0;
margin-top: 16px;
.detailed-status__display-avatar,
.status__avatar { top: 8px !important }
}
}

77
app/javascript/styles/mastodon-material/plugins/quote.scss Normal file
View file

@ -0,0 +1,77 @@
$name: "Quote";
$plugin-version: "1.0.0";
$target-version: "1.0.0";
$website: "";
@include version-check($name, $plugin-version, $target-version, $website);
.quote-indicator,
.reply-indicator {
@include card-elevation(false);
margin-bottom: 16px;
padding: 16px;
&__header { margin-bottom: 4px }
&__display-avatar {
margin-right: 8px;
.account__avatar {
width: 40px !important;
height: 40px !important;
background-size: 40px !important;
}
}
&__content {
padding-top: 4px;
color: $primary-text-color;
}
}
.quote-status {
@include card-elevation(false);
background: none;
padding: 16px 16px 16px 72px;
.detailed-status__display-avatar,
.status__avatar {
top: 16px !important;
left: 16px !important;
width: 40px !important;
height: 40px !important;
&>div {
width: 40px !important;
height: 40px !important;
background-size: 40px !important;
}
}
.status__content { padding-top: 8px }
.detailed-status__display-name {
span,
strong { display: block }
}
.display-name {
padding-left: 0;
&__account { color: $secondary-text-color }
}
&>.unlisted-quote>button { color: $ui-text-color }
}
@if $dense {
.quote-status {
padding: 8px 8px 8px 58px;
margin-top: 4px;
.detailed-status__display-avatar,
.status__avatar {
top: 8px !important;
left: 8px !important;
}
}
}

1
app/javascript/styles/mastodon-material/profiles/default/color.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

1
app/javascript/styles/mastodon-material/profiles/default/config.scss Normal file
View file

@ -0,0 +1 @@
// Add your settings below

1
app/javascript/styles/mastodon-material/profiles/default/icon_config.scss Normal file
View file

@ -0,0 +1 @@
// Add your icon customization below

1
app/javascript/styles/mastodon-material/profiles/default/layout.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

11
app/javascript/styles/mastodon-material/profiles/default/loader.scss Normal file
View file

@ -0,0 +1,11 @@
@charset "UTF-8";
@import '../../theme/base_config', '../../theme/base_icon_config';
@import 'config', 'icon_config';
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

4
app/javascript/styles/mastodon-material/profiles/default/plugins.scss Normal file
View file

@ -0,0 +1,4 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
//@import '../../plugins/plus';
@import '../../plugins/quote';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-google-plus/color.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

2
app/javascript/styles/mastodon-material/profiles/mastodon-material-google-plus/config.scss Normal file
View file

@ -0,0 +1,2 @@
// Add your settings below
@import '../../color/plus-classic';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-google-plus/icon_config.scss Normal file
View file

@ -0,0 +1 @@
// Add your icon customization below

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-google-plus/layout.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

11
app/javascript/styles/mastodon-material/profiles/mastodon-material-google-plus/loader.scss Normal file
View file

@ -0,0 +1,11 @@
@charset "UTF-8";
@import '../../theme/base_config', '../../theme/base_icon_config';
@import 'config', 'icon_config';
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

5
app/javascript/styles/mastodon-material/profiles/mastodon-material-google-plus/plugins.scss Normal file
View file

@ -0,0 +1,5 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
//@import '../../plugins/plus';
@import '../../plugins/quote';
@import '../../plugins/plus';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-dark/color.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

2
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-dark/config.scss Normal file
View file

@ -0,0 +1,2 @@
// Add your settings below
@import '../../color/mastodon-dark';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-dark/icon_config.scss Normal file
View file

@ -0,0 +1 @@
// Add your icon customization below

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-dark/layout.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

11
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-dark/loader.scss Normal file
View file

@ -0,0 +1,11 @@
@charset "UTF-8";
@import '../../theme/base_config', '../../theme/base_icon_config';
@import 'config', 'icon_config';
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

4
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-dark/plugins.scss Normal file
View file

@ -0,0 +1,4 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
//@import '../../plugins/plus';
@import '../../plugins/quote';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-light/color.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

2
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-light/config.scss Normal file
View file

@ -0,0 +1,2 @@
// Add your settings below
@import '../../color/mastodon-light';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-light/icon_config.scss Normal file
View file

@ -0,0 +1 @@
// Add your icon customization below

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-light/layout.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

11
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-light/loader.scss Normal file
View file

@ -0,0 +1,11 @@
@charset "UTF-8";
@import '../../theme/base_config', '../../theme/base_icon_config';
@import 'config', 'icon_config';
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

4
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-light/plugins.scss Normal file
View file

@ -0,0 +1,4 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
//@import '../../plugins/plus';
@import '../../plugins/quote';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-black/color.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

2
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-black/config.scss Normal file
View file

@ -0,0 +1,2 @@
// Add your settings below
@import '../../color/black';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-black/icon_config.scss Normal file
View file

@ -0,0 +1 @@
// Add your icon customization below

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-black/layout.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

11
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-black/loader.scss Normal file
View file

@ -0,0 +1,11 @@
@charset "UTF-8";
@import '../../theme/base_config', '../../theme/base_icon_config';
@import 'config', 'icon_config';
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

4
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-black/plugins.scss Normal file
View file

@ -0,0 +1,4 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
//@import '../../plugins/plus';
@import '../../plugins/quote';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-dark/color.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

2
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-dark/config.scss Normal file
View file

@ -0,0 +1,2 @@
// Add your settings below
@import '../../color/v1-dark';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-dark/icon_config.scss Normal file
View file

@ -0,0 +1 @@
// Add your icon customization below

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-dark/layout.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

11
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-dark/loader.scss Normal file
View file

@ -0,0 +1,11 @@
@charset "UTF-8";
@import '../../theme/base_config', '../../theme/base_icon_config';
@import 'config', 'icon_config';
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

4
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-dark/plugins.scss Normal file
View file

@ -0,0 +1,4 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
//@import '../../plugins/plus';
@import '../../plugins/quote';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-dark/color.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

3
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-dark/config.scss Normal file
View file

@ -0,0 +1,3 @@
// Add your settings below
@import '../../color/v2-dark';
@import '../../layout/material-v2.scss';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-dark/icon_config.scss Normal file
View file

@ -0,0 +1 @@
// Add your icon customization below

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-dark/layout.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

11
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-dark/loader.scss Normal file
View file

@ -0,0 +1,11 @@
@charset "UTF-8";
@import '../../theme/base_config', '../../theme/base_icon_config';
@import 'config', 'icon_config';
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

4
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-dark/plugins.scss Normal file
View file

@ -0,0 +1,4 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
//@import '../../plugins/plus';
@import '../../plugins/quote';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-light/color.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

3
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-light/config.scss Normal file
View file

@ -0,0 +1,3 @@
// Add your settings below
@import '../../color/v2-light';
@import '../../layout/material-v2.scss';

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-light/icon_config.scss Normal file
View file

@ -0,0 +1 @@
// Add your icon customization below

1
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-light/layout.scss Normal file
View file

@ -0,0 +1 @@
// Add your customization below

11
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-light/loader.scss Normal file
View file

@ -0,0 +1,11 @@
@charset "UTF-8";
@import '../../theme/base_config', '../../theme/base_icon_config';
@import 'config', 'icon_config';
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

4
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-light/plugins.scss Normal file
View file

@ -0,0 +1,4 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
//@import '../../plugins/plus';
@import '../../plugins/quote';

7
app/javascript/styles/mastodon-material/theme/_functions.scss Normal file
View file

@ -0,0 +1,7 @@
@use "sass:string";
// convert hex color code to svg styled ascii color code
@function svg-color($color) {
@return '%23' + string.slice(inspect($color), 2, 7);
}

284
app/javascript/styles/mastodon-material/theme/_mixins.scss Normal file
View file

@ -0,0 +1,284 @@
$shadow-color-1: rgba(0,0,0,.2);
$shadow-color-2: rgba(0,0,0,.14);
$shadow-color-3: rgba(0,0,0,.12);
@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
@mixin material-transition { transition: .25s cubic-bezier(0,0,0.2,1) }
@mixin search-bar-hover {
@if $search-bar-hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}
}
@mixin card-elevation($elevation) {
border-radius: $card-radius;
background: $card-bg-color;
@if $elevation {
@include shadow-1dp;
border: none;
} @else {
box-shadow: none;
border: 1px solid $border-color;
}
}
@mixin chip-type($chip-type) {
@if $chip-type == contained {
background: $contained-chip-color;
&.active { background-color: $contained-chip-selected-color }
&:hover { background-color: $contained-chip-selected-color }
}
@if $chip-type == outlined {
background: $outlined-chip-color;
border: 1px solid $outlined-chip-selected-border-color;
&.active { background-color: $outlined-chip-selected-color }
&:hover { background: $outlined-chip-hover-color }
}
}
@mixin button-type($button-type) {
border-radius: $button-radius;
display: inline-block;
font-weight: 500;
@if $button-type == contained {
@if $button-shadow { @include shadow-1dp }
background: $contained-button-color;
color: $contained-button-text-color;
&:hover { background: $contained-button-hover-color }
&:focus { background: $contained-button-color }
}
@if $button-type == outlined {
box-shadow: none;
background: transparent;
color: $outlined-button-color;
border: 1px solid $outlined-button-color;
&:hover { background: $outlined-button-hover-color }
&:focus { background: $outlined-button-hover-color }
}
@if $button-type == text {
box-shadow: none;
background: transparent;
&:hover { background: $text-button-hover-color }
&:focus { background: $text-button-focus-color }
}
}
@mixin button-shadow {
@if $button-shadow {
button.btn,
.button,
.block-button,
.input-copy button,
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
}
}
@mixin text-area-border($text-area-border) {
background: $text-field-bg-color;
color: $text-field-color;
&:hover { border-color: $border-hover-color }
@if $text-area-border == underlined {
border-radius: $card-radius $card-radius 0 0;
border: 0;
border-bottom: 1px solid $border-color;
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
}
@if $text-area-border == outlined {
border-radius: $card-radius;
border: 1px solid $border-color;
&:active,
&:focus { border: 2px solid $border-active-color }
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {
} @else { background-image: url($bg-image) }
}
@mixin icon-font-style {
@if $icon-font-style == filled { font-family: "Material Icons" }
@if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
@if $icon-font-style == round { font-family: "Material Icons Round" }
@if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
@if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
}
@mixin icon-font {
@if $icon-font-source == github {
@if $icon-font-style == filled {
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons Round"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}
@if $icon-font-source == google {
@if $icon-font-style == filled {
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons Round"),
url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
}
}
}
@if $icon-font-source == self {
@if $icon-font-style == filled {
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons"),
url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}
}
@mixin version-check($name, $plugin-version, $target-version, $website) {
@if $target-version != $version {
@debug "[Info] #{$name} #{$plugin-version} is made for Mastodon Material #{$target-version}. Some css elements might be broken! Please check the following website: #{$website}";
}
}

58
app/javascript/styles/mastodon-material/theme/about.scss Normal file
View file

@ -0,0 +1,58 @@
.landing-page {
&__call-to-action {
@include shadow-2dp;
background: $card-bg-color;
border-radius: $card-radius;
padding: 24px 36px;
.row__information-board {
.information-board__section {
padding: 0 16px;
color: $primary-text-color;
}
}
}
}
.landing {
.simple_form p.lead {
color: $ui-text-color;
padding: 16px;
margin-bottom: 0;
}
.directory { margin-top: 16px }
.hero-widget {
.account { padding: 16px 0 }
h4 { color: $ui-text-color }
&__footer {
background: $card-bg-color;
padding: 16px;
border-radius: 0 0 $card-radius $card-radius;
}
&__counter {
color: $primary-text-color;
padding: 8px;
span { color: $ui-text-color }
}
}
&__grid { grid-gap: 16px }
&__brand svg { fill: $ui-text-color }
}
.information-board__section span:last-child { color: $ui-text-color }
.rules-list {
background: $card-bg-color;
border: 1px solid $border-color;
border-radius: $card-radius;
&__text { color: $primary-text-color }
}

284
app/javascript/styles/mastodon-material/theme/account.scss Normal file
View file

@ -0,0 +1,284 @@
.account {
border-bottom: 1px solid $border-color;
padding: 16px;
.account__display-name,
.account__display-name strong { color: $primary-text-color }
&__avatar {
border-radius: $avatar-radius;
&-overlay {
&-base { border-radius: $avatar-radius }
&-overlay { border-radius: $avatar-radius }
}
}
&__avatar-wrapper {
margin-left: 0;
margin-right: 16px;
}
&__action-bar { width: 40px }
&__header {
&__bar {
background: $card-bg-color;
padding: 8px;
border-bottom: none;
.avatar .account__avatar { border: none }
}
&__tabs {
padding: 8px;
&__name {
padding: 8px;
h1 {
color: $primary-text-color;
small { color: $secondary-text-color }
}
}
&__buttons {
.icon-button {
@include icon-button;
border: none;
border-radius: 50%;
padding: 8px;
margin-left: 8px;
margin-right: 0;
}
}
}
&__extra {
margin-top: 0;
&__links {
color: $secondary-text-color;
padding: 8px 0;
a {
color: $secondary-text-color;
padding: 4px 12px;
strong { color: $ui-text-color }
}
}
}
&__bio {
margin: 0;
.account__header {
&__content {
color: $primary-text-color;
padding: 8px;
}
&__fields {
border: 1px solid $border-color;
border-radius: $table-radius;
.verified {
border: none;
background: $verified-bg-color;
a,
&__mark { color: $primary-text-color }
}
dl {
border-bottom: 1px solid $border-color;
&:first-child,
&:first-child .verified { border-radius: $table-radius $table-radius 0 0 }
&:last-child,
&:last-child .verified {
border-radius: 0 0 $table-radius $table-radius;
border-bottom: 0;
}
}
dd,
dt {
color: $primary-text-color;
padding: 16px;
}
dd { color: $primary-text-color }
dt { background: $list-bg-inactive-color }
}
&__joined {
padding: 8px;
color: $info-text-color;
}
}
}
&__account-note {
padding: 8px 16px;
border-bottom: 1px solid $border-color;
label {
color: $ui-text-color;
margin-bottom: 8px;
}
textarea {
color: $primary-text-color;
padding: 8px 16px;
border-radius: 0;
&:focus { background: transparent }
&::placeholder { color: $tips-text-color }
}
}
&__content { color: $secondary-text-color }
&__fields {
border-color: $border-color;
dl { border-bottom: 1px solid $border-color }
dt {
color: $primary-text-color;
background: $list-bg-inactive-color;
}
dd { color: $primary-text-color }
.verified {
border: none;
background: $verified-bg-color;
&__mark { color: $primary-text-color }
}
}
}
&__section-headline {
background: $tab-bg-color;
border-bottom: 1px solid $border-color;
a {
padding: 16px 0;
color: $tab-item-color;
border-bottom: $tab-indicator-thickness solid transparent;
&.active {
color: $tab-item-active-color;
border-bottom: $tab-indicator-thickness solid $tab-item-active-color;
&::before,
&:after { border: none }
&:focus { background: $tab-bg-focus-color }
}
&:hover { background: $tab-bg-hover-color }
}
}
&__relationship {
padding: 8px;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
.account-role,
.simple_form .recommended {
padding: 4px 8px;
border-radius: 17px;
color: $ui-text-color;
background-color: $contained-chip-color;
}
.account-gallery {
&__item { border-radius: 0 }
}
.card {
&>a {
@include shadow-1dp;
&:active .card__bar,
&:focus .card__bar,
&:hover .card__bar { background: $card-bg-color }
}
&__img {
background: $card-bg-color;
border-radius: $card-radius $card-radius 0 0;
img { border-radius: $card-radius $card-radius 0 0 }
}
&__bar {
padding: 16px;
background: $card-bg-color;
border-radius: 0 0 $card-radius $card-radius;
.avatar {
padding-top: 0;
img {
border-radius: $avatar-radius;
background: $card-bg-color;
}
}
.display-name {
margin-left: 16px;
strong { color: $primary-text-color }
span { color: $secondary-text-color }
}
}
}
.pagination {
padding: 28px;
.gap,
.newer,
.older,
.page,
a {
color: $ui-text-color;
padding: 8px;
}
.current {
background: $contained-chip-color;
color: $ui-text-color;
margin: 0 8px;
border-radius: 50%;
width: 16px;
height: 16px;
}
}
.nothing-here {
background: $card-bg-color;
color: $ui-text-color;
padding: 16px;
&--under-tabs { border-radius: 0 0 $card-radius $card-radius }
}

289
app/javascript/styles/mastodon-material/theme/admin.scss Normal file
View file

@ -0,0 +1,289 @@
.admin-wrapper {
.sidebar-wrapper__inner { background: $bg-color }
.sidebar {
&__toggle {
background: $top-bar-color;
&__icon { color: $top-bar-icon-color }
&__logo svg { fill: $top-bar-text-color }
a {
border-radius: 50%;
&:hover { background: $icon-bg-hover-color }
}
}
ul {
a {
padding: 16px;
color: $ui-text-color;
border-radius: 0;
i.fa {
margin-right: 32px;
color: $icon-color;
}
&.selected {
background: $list-bg-active-color;
&:hover { background: $list-bg-active-hover-color }
}
&:hover {
color: $ui-text-color;
background-color: $list-bg-hover-color;
}
}
ul {
background: $bg-color;
a { padding: 16px 36px }
}
.simple-navigation-active-leaf a {
color: $ui-text-color;
background-color: $list-bg-active-color;
&:hover { background-color: $list-bg-active-hover-color }
}
}
}
.content {
padding: 60px 16px 16px;
h2,
h3,
h6 { color: $ui-text-color }
h3 { margin-bottom: 28px }
h4 {
color: $section-text-color;
border-bottom: none;
padding: 12px 16px;
}
hr {
border-bottom: 1px solid $border-color;
margin: 16px 0;
}
.muted-hint {
color: $ui-text-color;
a { color: $link-text-color }
}
.positive-hint { color: $verified-color }
.neutral-hint { color: $tips-text-color }
.directory__tag h4 { color: $ui-text-color }
&>p {
color: $ui-text-color;
margin-bottom: 16px;
strong { color: $primary-text-color }
}
}
.content-heading {
border-bottom: none;
margin: -16px -16px 40px 0;
&>* {
margin-top: 16px;
margin-right: 16px;
}
}
}
.admin-account-bio {
margin: 16px 0 0;
.account__header {
&__content {
padding: 16px;
color: $primary-text-color;
}
&__content,
&__fields {
@include shadow-1dp;
background: $list-bg-color;
border-radius: $table-radius;
a { color: $link-text-color }
}
}
&>div {
padding: 0 8px;
margin-bottom: 16px;
}
}
.filters .filter-subset {
padding: 0 16px;
margin: 0 0 16px;
border-right: 1px solid $border-color;
strong { color: $ui-text-color }
ul {
margin-top: 0;
li { margin-right: 0 }
}
a {
color: $tab-item-color;
border-bottom: 2px solid transparent;
padding: 8px;
&.selected {
color: $tab-item-active-color;
border-bottom: 2px solid $tab-item-active-color;
&:hover {
color: $tab-item-active-color;
border-bottom: 2px solid $tab-item-active-color;
}
}
&:hover {
color: $tab-item-color;
background: $tab-bg-hover-color;
border-bottom: 2px solid transparent;
}
}
}
body {
.positive-hint { color: $verified-color }
.muted-hint {
color: $ui-text-color;
a { color: $link-text-color }
}
.neutral-hint { color: $tips-text-color }
}
.report-card {
@include shadow-1dp;
background: $card-bg-color;
border-radius: $card-radius;
margin-bottom: 16px;
&__profile {
padding: 16px;
&__stats {
color: $info-text-color;
.red { color: $error-color }
}
}
&__summary__item {
border-top: 1px solid $border-color;
&:hover { background: $card-bg-color }
&__assigned,
&__reported-by { color: $ui-text-color }
&__content {
a {
padding: 16px;
color: $primary-text-color;
}
&__icon {
color: $icon-color;
margin-right: 8px;
}
}
}
}
.log-entry {
padding: 16px 0;
background: $list-bg-color;
border-bottom: 1px solid $border-color;
&:first-child { border-radius: $table-radius $table-radius 0 0 }
&:last-child { border-radius: 0 0 $table-radius $table-radius }
&__header {
color: $ui-text-color;
padding: 0 16px;
}
&__avatar { margin-right: 16px }
&__timestamp { color: $info-text-color }
.target,
.username,
a { color: $primary-text-color }
}
.dashboard {
&__counters {
margin: 0 0 16px;
&__num,
&__text {
color: $secondary-text-color;
margin-bottom: 16px;
}
&__label { color: $ui-text-color }
&>div {
padding: 0 8px;
margin-bottom: 16px;
&>div,
&>a {
@include shadow-1dp;
padding: 16px;
background: $card-bg-color;
border-radius: $card-radius;
&:active,
&:focus,
&:hover { background: $card-bg-hover-color }
}
}
&.admin-account-counters { margin-top: 16px }
}
&__widgets {
&>div {
margin-bottom: 16px;
&>div { padding: 0 8px }
}
a:not(.name-tag) { color: $ui-text-color }
}
}
.inline-name-tag,
.name-tag,
a.inline-name-tag,
a.name-tag { color: $ui-text-color }

46
app/javascript/styles/mastodon-material/theme/base_config.scss Normal file
View file

@ -0,0 +1,46 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
// Color scheme
@import '../color/v1-light';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import '../../color/v2-light';
// Layout profile
@import '../layout/material-v1';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import '../../layout/material-v2';
// Search bar hover settings
// You can enable/disable search bar floating.
$search-bar-hover: false;
// Status font size in timeline
$status-font-size: 15px; // mastodon default
//$status-font-size: 16px; // compatible with material design
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
//$name-font-size: 16px; // compatible with material design
// Background image
// If you want to use the local image, please put it in "../"
$bg-image: none;
//$bg-image: "./image.png";
//$bg-image: "https://example.com/img/image.png";
// Columns transparency settings
$bar-transparency: 1.0; // opacity
//$bar-transparency: 0.8; // semi-transparent
$column-transparency: 1.0; // opacity
//$column-transparency: 0.8; // semi-transparent

30
app/javascript/styles/mastodon-material/theme/base_icon_config.scss Normal file
View file

@ -0,0 +1,30 @@
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
$boosted-icon-color: $primary-color;
// Reply icon settings
$reply-icon: "reply";
//$reply-icon: "comment"; // blooming
// Material Design Icon settings
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
$icon-font-source: google; // Google Fonts
//$icon-font-source: github; // GitHub
//$icon-font-source: self; // Self-hosting
// Material Icon style settings
$icon-font-style: filled;
//$icon-font-style: outlined;
//$icon-font-style: round;
//$icon-font-style: sharp;
//$icon-font-style: two-tone;

27
app/javascript/styles/mastodon-material/theme/basics.scss Normal file
View file

@ -0,0 +1,27 @@
body,
body.embed,
body.admin,
body.lighter,
body.error {
background: $bg-color;
color: $ui-text-color;
}
.focusable:focus { background: transparent }
// Chrome & Safari scroll bar
::-webkit-scrollbar-thumb {
background: $scroll-bar-thumb-color;
&:hover { background: $scroll-bar-thumb-hover-color }
&:active { background: $scroll-bar-thumb-active-color }
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {
background: transparent !important;
}
// Firefox scroll bar
html { scrollbar-color: $scroll-bar-thumb-color transparent }

189
app/javascript/styles/mastodon-material/theme/button.scss Normal file
View file

@ -0,0 +1,189 @@
@include button-shadow;
.icon-button {
@include material-transition;
color: $icon-button-color;
border-radius: 50%;
&.active {
color: $icon-button-active-color;
&:hover { color: $icon-button-active-hover-color }
}
&.disabled {
color: $disabled-icon-color;
&:hover { color: $disabled-icon-color }
}
&.inverted {
color: $icon-button-color;
&.active,
&:active { color: $icon-button-active-color }
&:focus {
color: $icon-button-active-color;
background-color: transparent;
}
&:hover {
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
}
&.overlayed {
@include icon-button;
border-radius: 50%;
background: $media-icon-bg-color;
color: $media-icon-color;
padding: 4px;
line-height: 20px !important;
&:hover {
background: $media-icon-bg-color;
color: $media-icon-hover-color;
}
}
&__counter {
width: 16px;
margin-left: 8px;
}
&:active,
&:focus { color: $icon-button-active-color }
&:focus { background-color: transparent }
&:hover {
@include material-transition;
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
}
// Checkbox with label
label.icon-button {
&.active {
color: $ui-text-color;
background-color: transparent;
}
&:hover {
@include material-transition;
background-color: transparent;
}
}
.text-icon-button {
color: $icon-button-color;
border-radius: 50%;
font-size: 14px;
&.active {
background-color: $icon-bg-hover-color;
color: $icon-button-active-color;
}
&:hover {
background-color: $icon-bg-hover-color;
color: $icon-button-hover-color;
}
}
.button {
background-color: $contained-button-color;
border-radius: $button-radius;
&:active,
&:focus {
background-color: $contained-button-color;
border-radius: $button-radius;
}
&:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&.logo-button {
background: $contained-button-color;
margin: 2px;
&:active,
&:focus,
&:hover,
.button--destructive:hover { background: $contained-button-hover-color }
}
&:disabled,
&.disabled { background-color: $disabled-button-color }
&.button--block { margin: 8px 0 }
&.button-secondary {
@include button-type($button-on-status);
&:disabled {
color: $disabled-button-color;
border: 1px solid $disabled-button-color;
opacity: 1;
&:hover,
&:focus,
&:active { @include button-type($button-on-status) }
}
&:hover,
&:focus,
&:active { @include button-type($button-on-status) }
}
&.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&:hover { background: $text-button-hover-color }
&:focus { background: $text-button-focus-color }
}
}
.spoiler-button__overlay__label {
background: $media-icon-bg-color;
border-radius: $button-radius;
color: $media-icon-color;
}
.simple_form {
.block-button, .block-button:last-child,
.button, .button:last-child,
button, button:last-child {
display: inline-block;
border-radius: $button-radius;
background: $contained-button-color;
color: $contained-button-text-color;
width: auto;
height: 36px;
padding: 10px 16px;
margin-left: auto;
font-size: 14px;
line-height: 15px;
&:hover { background: $contained-button-hover-color }
&:active,
&:focus { background: $contained-button-active-color }
&.negative:active,
&.negative:focus { background: $error-color }
&:disabled,
&:disabled:hover { background-color: $disabled-button-color }
}
}

570
app/javascript/styles/mastodon-material/theme/columns.scss Normal file
View file

@ -0,0 +1,570 @@
.column {
@include shadow-1dp;
padding: 0;
margin: 10px 8px;
border-radius: $card-radius;
&>.scrollable {
background: $list-bg-color;
opacity: $column-transparency;
}
&:last-child { box-shadow: none }
}
.column-header {
background: $top-bar-color;
border-radius: $bar-radius;
height: 56px;
> button {
padding: 16px;
color: $top-bar-text-color;
}
&>.column-header__back-button { color: $top-bar-icon-color }
&.active {
.column-header__icon {
color: $top-bar-unread-icon-color;
text-shadow: none;
}
}
&__icon {
margin-right: 16px;
color: $top-bar-icon-color;
font-size: 20px;
}
&__buttons { height: 56px }
&__button {
@include icon-button;
background: $top-bar-color;
color: $top-bar-icon-color;
padding: 8px;
margin: 10px;
border-radius: 50%;
box-sizing: content-box;
&.active {
color: $top-bar-icon-active-color;
background: $icon-bg-active-color;
&:hover {
color: $top-bar-icon-hover-color;
background: $icon-bg-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
background: $icon-bg-hover-color;
}
}
&__setting-btn {
color: $icon-button-color;
padding: 8px 0;
&:hover {
color: $icon-button-hover-color;
text-decoration: none;
}
.fa { font-size: 20px }
span { vertical-align: middle }
}
&__setting-arrows {
font-size: 16px;
border-bottom: 8px;
.column-header__setting-btn {
padding: 8px;
margin: 0 8px;
border-radius: 50%;
&:last-child { padding-right: 8px }
}
}
&__wrapper {
@include shadow-4dp;
border-radius: $bar-radius;
opacity: $bar-transparency;
.announcements { border-top: 1px solid $border-color }
&.active {
@include shadow-4dp;
&::before { background: transparent }
}
}
&__collapsible {
transition: .25s cubic-bezier(0.0,0.0,0.2,1), .25s cubic-bezier(1,0.2,0,0);
color: $ui-text-color;
background: $card-bg-color;
border-top: 1px solid $border-color;
&-inner {
background: $card-bg-color;
padding: 16px;
}
&.collapsed {
opacity: 1;
border-top: none;
}
}
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 10px;
padding: 8px;
font-size: 20px;
span { display: none }
}
}
.column-subheading {
color: $section-text-color;
background: $bg-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
&:first-child { border-top: none }
}
.column-link {
color: $ui-text-color;
background: $bg-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
&:hover { background: $list-bg-hover-color }
&:active,
&:focus {
color: $ui-text-color;
background: $list-bg-active-color;
}
&__icon {
margin-right: 32px;
font-size: 20px;
}
&--transparent {
&.active {
color: $ui-text-color;
background: $menu-bg-active-color;
&:hover { background: $menu-bg-active-hover-color }
.fa { color: $icon-color }
}
&:hover {
color: $ui-text-color;
.fa { color: $icon-color }
}
}
.fa { color: $icon-color }
}
.column-settings {
&__section {
color: $section-text-color;
margin: 16px 0 8px;
}
&__row .text-btn { margin-bottom: 0 }
}
.column-back-button {
@include shadow-4dp;
background: $top-bar-color;
color: $top-bar-icon-color;
padding: 16px;
height: 48px;
span { visibility: hidden } // hide "back" string
&--slim-button { top: -54px }
}
.column-inline-form {
padding: 16px 0 16px 16px;
background: $card-bg-color;
.icon-button {
width: 36px !important;
height: 36px !important;
padding: 8px;
margin: 0 16px;
}
}
.columns-area {
@include bg-image;
background-size: contain;
&__panels__pane { overflow: visible }
}
.setting-text {
color: $primary-text-color;
background: $text-field-bg-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
}
.empty-column-indicator {
color: $secondary-text-color;
background: $card-bg-color;
font-size: 16px;
contain: initial; // padding fix
a { color: $link-text-color }
}
.error-column a,
.follow_requests-unlocked_explanation a { color: $link-text-color }
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
background: $list-bg-inactive-color;
&--unread {
background: $list-bg-color;
.conversation__content__relative-time { color: $info-text-color }
}
&__unread { background: $primary-color }
&__avatar { padding: 0 16px 0 0 }
&__content {
padding: 0;
&__relative-time {
font-size: 14px;
color: $info-text-color;
}
&__names,
&__names a {
color: $primary-text-color;
font-size: 16px;
}
}
}
// read status in notification column
.muted {
.status {
&__content {
color: $read-primary-text-color;
p { color: $read-primary-text-color }
a { color: $read-secondary-text-color }
}
&__display-name strong { color: $read-primary-text-color }
}
.poll {
color: $read-primary-text-color;
&__chart {
background: $read-poll-bar-color;
&.leading { background: $read-poll-bar-leading-color }
}
&__footer,
&__link { color: $read-ui-text-color }
}
}
.load-gap { border-bottom: 1px solid $border-color }
.load-more {
color: $icon-color;
padding: 16px;
&:hover { background: $menu-bg-hover-color }
}
.getting-started {
background: $bg-color;
color: $ui-text-color;
opacity: $column-transparency;
&__wrapper {
background: $bg-color;
height: auto !important;
padding-bottom: 8px;
border-bottom: 1px solid $border-color;
}
&__footer {
padding: 16px;
p {
color: $secondary-text-color;
font-size: 12px;
margin-bottom: 16px;
}
a { color: $ui-text-color }
p a { color: $link-text-color }
ul { margin-bottom: 16px }
}
&__trends {
background: $bg-color;
margin-bottom: 0;
opacity: $column-transparency;
h4 {
color: $section-text-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
border-bottom: none;
}
}
}
.trends {
&__header {
color: $section-text-color;
background: transparent;
border-bottom: 1px solid $border-color;
padding: 16px;
.fa { margin-right: 8px }
}
&__item {
padding: 16px;
border-bottom: none;
&__name {
color: $secondary-text-color;
font-size: 12px;
a { color: $primary-text-color }
}
&__current {
padding-right: 16px;
margin-left: 4px;
color: $secondary-text-color;
}
&__sparkline path {
stroke: $primary-color;
fill: $primary-color;
fill-opacity: 0.5;
}
}
}
.setting-toggle {
&__label {
color: $ui-text-color;
margin: 8px 8px 8px 14px;
}
}
.announcements {
background: $card-bg-color;
padding: 0 8px;
&__container { color: $primary-text-color }
&__item {
padding: 16px 8px;
font-size: 16px;
&__unread { background: $badge-color }
&__range {
margin-bottom: 8px;
padding-right: 16px;
}
}
&__pagination {
color: $ui-text-color;
padding: 0 8px 16px;
bottom: 0;
position: initial;
float: right;
.icon-button {
@include icon-button;
padding: 8px;
margin: 0 8px;
line-height: normal !important;
box-sizing: content-box;
}
span { vertical-align: super }
}
}
.announcements-list {
border: 1px solid $border-color;
border-radius: $table-radius;
&__item {
padding: 16px 0;
background: $list-bg-color;
border-bottom: 1px solid $border-color;
&:first-child { border-radius: $table-radius $table-radius 0 0 }
&:last-child { border-radius: 0 0 $table-radius $table-radius }
&__title {
padding: 0 16px;
color: $primary-text-color;
margin-bottom: 8px;
&:active,
&:focus,
&:hover { color: $primary-text-color }
}
&__meta {
padding: 0 16px;
color: $info-text-color;
}
&:hover { background: $list-bg-hover-color }
&:active,
&:focus { background: $list-bg-active-color }
}
}
.reactions-bar {
margin-top: 16px;
width: auto;
.emoji-button {
color: $icon-button-color;
font-size: 20px;
&:hover { color: $icon-button-hover-color }
&:active { color: $icon-button-active-color }
}
&__item {
@include chip-type($chip-type);
border-radius: 17px;
margin: 2px 4px;
&.active .reactions-bar__item__count { color: $chip-selected-text-color }
&__emoji {
width: 24px;
height: 24px;
margin: 4px 0 4px 2px;
}
&__count {
font-size: 16px;
margin: 0 12px 0 8px;
color: $secondary-text-color;
}
&:hover { background: $contained-chip-hover-color }
}
}
.notification {
&__filter-bar {
background: $tab-bg-color;
border-bottom: 1px solid $border-color;
z-index: 1;
opacity: $bar-transparency;
button {
background: $tab-bg-color;
color: $tab-item-color;
font-size: 16px;
border-bottom: $tab-indicator-thickness solid transparent;
padding: 12px 0 10px;
span { font-size: 14px }
&.active {
color: $tab-item-active-color;
border-bottom: $tab-indicator-thickness solid $tab-item-active-color;
&::before,
&:after { border: none }
&:focus { background: $tab-bg-focus-color }
}
&:hover { background: $tab-bg-hover-color }
}
}
&__message {
color: $secondary-text-color;
margin: 0 16px 0 70px;
font-size: 16px;
.fa { color: $icon-button-color }
}
&__display-name:hover { color: inherit }
&__relative_time {
color: $info-text-color;
padding-bottom: 0;
}
}
.notification-favourite .status.status-direct {
.icon-button.disabled { color: $disabled-icon-color }
}
.relationship-tag {
color: $ui-text-color;
background-color: $relationship-tag-color;
font-size: 12px;
border-radius: 17px;
padding: 4px 8px;
opacity: 1;
}
.attachment-list__list a { color: $secondary-text-color }
// unread notification
.notification.unread:before, .status__wrapper.unread:before { border-left: none }
.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }

754
app/javascript/styles/mastodon-material/theme/components.scss Normal file
View file

@ -0,0 +1,754 @@
.modal-root {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
&__overlay { background-color: rgba(0,0,0,.7) !important }
}
.modal-layout { background-color: $bg-color }
.drawer {
&__header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
opacity: $bar-transparency;
a { transition: none }
a:hover {
background: $icon-bg-hover-color;
border-radius: 50%;
}
}
&__tab {
color: $top-bar-icon-color;
font-size: 20px;
margin: 10px auto 10px;
padding: 8px;
flex: none;
height: 20px;
width: 20px;
border-bottom: none;
text-align: justify;
&:hover { color: $top-bar-icon-hover-color }
}
&__pager {
@include shadow-1dp;
border-radius: $card-radius;
}
&__inner {
background: $card-bg-color;
opacity: $column-transparency;
&.darker {
background: $card-bg-color;
position: inherit;
}
&__mastodon { background: $card-bg-color }
&:hover,
&:active,
&:focus { opacity: 1.0 }
}
}
.search {
&__input {
background: $search-bar-color;
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
opacity: $bar-transparency;
&:focus {
@include shadow-2dp;
background: $search-bar-focus-color;
color: $search-bar-text-color;
}
&:hover { @include search-bar-hover }
&::placeholder { color: $tips-text-color }
}
&__icon {
.fa {
color: $icon-color;
font-size: 20px;
top: 12px;
right: unset;
left: 12px;
height: 6px;
transition: none;
&.active { opacity: 1 }
&-search {
transform: none;
opacity: 1;
}
&-times-circle.active {
right: 16px;
left: unset;
transform: none;
}
}
}
}
.search-popout {
@include shadow-2dp;
background: $search-bar-focus-color;
border-radius: 0px $bar-radius;
border-top: 1px solid $border-color;
margin-top: 0;
color: $tips-text-color;
h4 { color: $secondary-text-color }
em { color: $search-bar-text-color }
}
.search-results {
&__header {
color: $secondary-text-color;
background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 16px }
}
&__section {
h5 {
background: $card-bg-color;
border-bottom: 1px solid $border-color;
padding: 16px;
color: $section-text-color;
.fa { margin-right: 8px }
}
}
}
.navigation-bar {
color: $secondary-text-color;
padding: 14px;
strong {
color: $ui-text-color;
}
.navigation-bar__actions .compose__action-bar .icon-button {
width: 36px !important;
height: 36px !important;
padding: 8px;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
.navigation-panel hr {
border-top: 1px solid $border-color;
margin: 8px 0;
}
.flex-spacer { margin: 8px 0 }
.dropdown-menu {
@include shadow-8dp;
background: $menu-bg-color;
padding: 8px 0;
border-radius: $menu-radius;
&__arrow { visibility: hidden }
&__item a {
font-size: 14px;
padding: 8px 16px;
background: $menu-bg-color;
color: $menu-text-color;
&:hover, &:active {
background: $menu-bg-hover-color;
color: $menu-text-color;
}
}
&__separator {
margin: 8px 0;
border-bottom: 1px solid $border-color;
}
}
.compose-form {
padding: 16px;
.autosuggest-textarea {
&__textarea {
@include text-area-border($compose-area-border);
padding: 8px 42px 8px 16px;
@if $compose-area-border == outlined {
&:focus { padding: 7px 41px 7px 15px }
}
&::placeholder { color: $tips-text-color }
}
&__suggestions {
@include shadow-1dp;
background: $menu-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
padding: 8px 0;
&__item {
padding: 8px;
border-radius: 0;
&:hover { background: $menu-bg-hover-color }
&.selected,
&:focus,
&:active { background: $menu-bg-active-color }
}
}
}
.spoiler-input {
&.spoiler-input--visible { margin-bottom: 16px }
&__input {
@include text-area-border($cw-area-border);
padding: 8px 16px;
@if $cw-area-border == outlined {
&:focus { padding: 7px 15px }
}
&::placeholder { color: $tips-text-color }
}
}
.compose-form {
&__warning {
color: $secondary-text-color;
background: $card-bg-color;
padding: 16px;
border: 1px solid $border-color;
border-radius: $card-radius;
box-shadow: none;
a { color: $link-text-color }
}
&__modifiers {
background: $card-bg-color;
color: $tips-text-color;
.compose-form {
&__upload-thumbnail { border-radius: 0 }
&__upload__actions {
@include material-transition;
.icon-button {
color: $media-icon-color;
font-size: 16px;
&:hover { background-color: transparent }
}
}
}
}
&__buttons-wrapper {
background: $card-bg-color;
color: $tips-text-color;
padding: 8px;
.icon-button {
@include icon-button;
padding: 8px;
margin: 0 2px;
}
.text-icon-button {
width: 20px !important;
height: 20px !important;
padding: 8px;
margin: 0 2px;
line-height: 20px !important;
}
}
&__poll-wrapper {
@if $compose-area-border == none {
border-top: 1px solid $border-color;
} @else { border-top: none }
ul { padding: 16px 12px 16px 0 }
select {
color: $ui-text-color;
background-color: $dropdown-field-bg-color;
border: 0;
option { background: $list-bg-color }
&:focus { border-color: $border-hover-color }
}
.button.button-secondary { @include button-type($button-on-status) }
.poll__footer { border-top: none }
}
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
// compose-panel in single column mode
.compose-panel {
overflow: visible;
border-radius: $card-radius;
.compose-form {
@include shadow-1dp;
background: $card-bg-color;
padding-bottom: 16px;
margin-bottom: 0;
border-radius: $card-radius;
}
}
.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
.poll {
margin-top: 8px;
.button { margin-right: 8px }
li { margin-bottom: 8px }
&__input {
border: none;
width: 20px;
height: 20px;
flex: 0 0 20px;
padding: 18px;
margin: 0 2px;
background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
&:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
&.active:hover { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, $control-border-hover-color 5px, $control-border-hover-color 7px, $control-border-active-color 8px, $control-border-active-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
&.checkbox {
border-radius: 2px;
border: 2px solid $control-border-active-color;
padding: 8px;
margin: 8px 10px;
background: none;
&.active {
height: 50%;
padding: 5px 0;
transform: rotate(-45deg);
border: 2px solid $control-border-active-color;
border-top-style: none;
border-right-style: none;
&:hover { background: none }
}
}
}
&__text input[type=text] {
color: $ui-text-color;
background: $text-field-bg-color;
border: 1px solid $border-color;
padding: 8px 12px;
&:focus { border-color: $border-hover-color }
}
&__option {
padding: 4px;
input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
&__text { padding: 8px 0 }
}
&__chart {
border-radius: 0;
background: $progress-indicator-track-color;
&.leading { background: $progress-indicator-color }
}
&__footer {
padding-top: 8px;
padding-bottom: 0;
color: $ui-text-color;
}
&__link { color: $ui-text-color }
}
.privacy-dropdown {
&.active .privacy-dropdown__value,
&.active .privacy-dropdown__value.active {
background: $icon-bg-hover-color;
border-radius: 50%;
box-shadow: none;
.icon-button { color: $icon-button-active-color }
}
&__dropdown {
@include shadow-8dp;
background: $menu-bg-color;
border-radius: $dialog-radius;
}
&__option {
color: $icon-color;
padding: 8px 16px;
&__icon {
font-size: 20px;
margin-right: 12px;
}
&__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
&.active {
background: $menu-bg-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
&:hover {
background: $menu-bg-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
}
}
&:hover {
background: $menu-bg-hover-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
}
}
}
.character-counter { color: $secondary-text-color }
.reply-indicator {
@include card-elevation(false);
padding: 16px;
&__header { margin-bottom: 4px }
&__display {
&-name {
color: $primary-text-color;
padding-right: 24px;
}
&-avatar { margin-right: 8px }
}
&__content {
color: $primary-text-color;
p { margin-bottom: 16px }
}
}
.attachment-list {
&__list a { color: $secondary-text-color }
&.compact .fa { color: $icon-color }
}
.block-modal {
@include shadow-24dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
background: $card-bg-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
}
.load-more {
color: $ui-text-color;
&:hover { background: transparent }
}
.autosuggest-hashtag {
&__name { color: $menu-text-color }
}
.filter-form {
background: $bg-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
}
.directory {
&__card {
@include shadow-1dp;
border-radius: $card-radius;
margin-bottom: 16px;
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
background: $card-bg-color;
padding: 8px 16px;
&__relationship { width: auto }
.display-name {
margin-left: 16px;
strong {
font-size: 16px;
color: $primary-text-color;
}
span { color: $secondary-text-color }
}
}
&__extra {
background: $card-bg-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
padding: 8px 16px;
border-bottom: 1px solid $border-color;
}
.accounts-table__count { padding: 16px 0 }
}
}
&__list {
@include material-transition;
margin: 16px 0;
width: auto;
}
}
.mute-modal {
@include shadow-24dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__explanation { margin-top: 16px }
&__action-bar {
background: $card-bg-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
.setting-toggle {
margin-top: 16px;
margin-bottom: 16px;
&__label {
color: $ui-text-color;
margin: 0 0 0 12px;
}
}
}
.domain {
padding: 16px;
border-bottom: 1px solid $border-color;
.domain__domain-name { color: $primary-text-color }
&__buttons .icon-button {
@include icon-button;
padding: 8px;
}
}
.upload-progress {
color: $ui-text-color;
&__backdrop {
border-radius: 0;
background: $progress-indicator-track-color;
margin-top: 6px;
}
&__tracker {
border-radius: 0;
background: $progress-indicator-color;
}
}
.emoji-button { padding: 8px }
.focusable:focus .detailed-status,
.focusable:focus .detailed-status__action-bar { background: transparent }
.no-reduce-motion .loading-indicator {
display: inline-block;
position: relative;
color: transparent;
width: 80px;
height: 80px;
&__figure {
box-sizing: border-box;
display: block;
position: absolute;
width: 48px;
height: 48px;
top: 10%;
left: 10%;
margin: 8px;
border: 4px solid transparent;
border-radius: 50%;
animation: loading-indicator 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: $loading-indicator-color transparent transparent transparent;
&:nth-child(1) {
animation-delay: -0.45s;
}
&:nth-child(2) {
animation-delay: -0.3s;
}
&:nth-child(3) {
animation-delay: -0.15s;
}
}
}
@keyframes loading-indicator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-bar {
background-color: $loading-indicator-color;
height: 4px;
}
.regeneration-indicator {
color: $ui-text-color;
background: $bg-color;
padding: 16px;
&__label {
margin-top: 32px;
strong {
margin-bottom: 16px;
color: $secondary-text-color;
}
}
}
.timeline-hint {
color: $ui-text-color;
padding: 16px;
a { color: $link-text-color }
}

187
app/javascript/styles/mastodon-material/theme/containers.scss Normal file
View file

@ -0,0 +1,187 @@
.public-layout {
.header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
margin: 16px 0;
.brand {
svg { fill: $top-bar-text-color }
&:hover,
&:focus,
&:active { background: $tab-bg-hover-color }
}
.nav-link,
.nav-link.optional {
color: $top-bar-text-color;
&:hover {
color: $top-bar-text-color;
background: $tab-bg-hover-color;
text-decoration: none;
}
}
.nav-button {
background: transparent;
margin: 0;
border-radius: 0;
&:hover { background: $tab-bg-hover-color }
}
.detailed-status__meta { margin-top: 16px }
}
.detailed-status { padding: 16px }
.footer {
padding-top: 32px;
padding-bottom: 64px;
color: $ui-text-color;
h4 { color: $ui-text-color }
ul a { color: $secondary-text-color }
.grid .column-2 h4 a { color: $ui-text-color }
.brand {
svg { fill: $icon-color }
&:hover svg { fill: $icon-hover-color }
}
}
.account__section-headline {
@include shadow-1dp;
border-radius: $card-radius $card-radius 0 0;
}
.public-account-header {
@include shadow-2dp;
margin-bottom: 16px;
&__image {
border-radius: $card-radius $card-radius 0 0;
background: $card-bg-color;
&::after { box-shadow: none }
img { border-radius: $card-radius $card-radius 0 0 }
}
&__bar {
background: linear-gradient(0deg, transparent, transparent 60px, rgba(0, 0, 0, 0.5) 60px, rgba(0, 0, 0, 0.2) 80%, transparent);
&::before {
background: $tab-bg-color;
border-radius: 0 0 $card-radius $card-radius;
}
.avatar img {
border-radius: $avatar-radius;
border: 2px solid $border-color;
background: $card-bg-color;
}
}
&__tabs {
margin-left: 24px;
&__name {
h1 {
color: $primary-text-on-shadow-color;
text-shadow: none;
small { color: $primary-text-on-shadow-color }
}
}
&__tabs {
.counter {
color: $secondary-text-color;
padding: 8px 16px;
border-right: none;
&.active {
&::after { border-bottom: 4px solid $tab-item-active-color }
}
&::after {
border-bottom: none;
opacity: 1;
}
&:hover { background: $tab-bg-hover-color }
.counter-number {
color: $ui-text-color;
margin-bottom: 6px;
}
}
}
}
&__extra {
.public-account-bio .account__header__fields { border-top: 1px solid $border-color }
&__links {
color: $ui-text-color;
a {
color: $ui-text-color;
padding: 16px;
strong { color: $primary-text-color }
}
}
}
&--no-bar .public-account-header {
&__image,
&__image img { border-radius: $card-radius }
}
}
.public-account-bio {
@include shadow-2dp;
background: $card-bg-color;
border-radius: $card-radius;
margin-bottom: 16px;
&__extra,
.roles {
padding: 16px;
color: $info-text-color;
}
.account__header {
&__content {
padding: 16px 16px 0;
color: $primary-text-color;
}
&__fields {
a,
.verified a { color: $primary-text-color }
dl:first-child .verified { border-radius: 0 $card-radius 0 0 }
}
}
}
.directory__list { grid-gap: 16px }
.grid { grid-gap: 16px }
}
.account-header .name { color: $ui-text-color }
.brand__tagline { color: $ui-text-color }
.logo-container h1 svg { fill: $ui-text-color }
.grid-4 { grid-gap: 16px }

64
app/javascript/styles/mastodon-material/theme/control.scss Normal file
View file

@ -0,0 +1,64 @@
.react-toggle {
width: 36px;
height: 16px;
border-radius: 15px;
&-track {
background-color: $toggle-track-color;
margin: 4px;
width: 36px;
height: 16px;
&-check { visibility: hidden }
&-x { visibility: hidden }
}
&-thumb {
@include shadow-1dp;
width: 20px;
height: 20px;
border: 0;
background-color: $toggle-thumb-color;
}
&--checked {
.react-toggle{
&-track { background-color: $toggle-track-active-color }
&-thumb {
background-color: $toggle-thumb-active-color;
left: 22px;
}
}
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
}
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
}
.radio-button {
padding: 8px 0;
&__input {
border: 2px solid $control-border-color;
&.checked {
border-color: $control-border-active-color;
background: $control-border-active-color;
padding: 3px;
background-clip: content-box;
}
}
}
.compose-form__sensitive-button .checkbox {
border: 2px solid $control-border-color;
border-radius: 2px;
&.active {
border-color: $primary-color;
background: $primary-color;
}
}

95
app/javascript/styles/mastodon-material/theme/emoji-picker.scss Normal file
View file

@ -0,0 +1,95 @@
.emoji-picker-dropdown {
&__menu {
@include shadow-8dp;
background: $menu-bg-color;
border-radius: $menu-radius;
margin-top: 0;
}
&__modifiers__menu {
@include shadow-8dp;
background: $menu-bg-color;
border-radius: $menu-radius;
button {
padding: 8px;
}
}
}
.emoji-mart {
font-size: 14px;
color: $menu-text-color;
&-bar {
border: 0 solid $border-color;
&:first-child {
background: $tab-bg-color;
border-radius: $card-radius $card-radius 0 0;
}
}
&-anchor {
color: $tab-item-color;
padding: 10px 4px;
border-radius: 0;
&-bar { background-color: $tab-item-active-color }
&-selected {
color: $tab-item-active-color;
&:hover { color: $tab-item-active-color }
}
&:hover { color: $tab-item-active-color }
}
&-search {
background: $menu-bg-color;
&-icon {
right: auto;
left: 16px;
padding: 2px 6px;
svg { fill: $icon-color }
&:disabled { opacity: 1 }
}
input {
outline: none;
padding: 8px 8px 8px 33px;
background: $search-bar-color;
color: $ui-text-color;
border: 0;
border-radius: $search-bar-radius;
&:focus {
@include shadow-2dp;
background: $search-bar-focus-color;
color: $search-bar-text-color;
}
&::placeholder { color: $tips-text-color }
}
}
&-scroll {
padding: 0 8px 8px;
background: $menu-bg-color;
}
&-category {
&-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
.emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
}
&-no-results { color: $secondary-text-color }
}

181
app/javascript/styles/mastodon-material/theme/forms.scss Normal file
View file

@ -0,0 +1,181 @@
.simple_form {
.fields-row {
padding-top: 8px;
margin: 0 0 16px;
&__column { padding: 0 8px }
}
.fields-group {
padding: 16px;
margin-bottom: 0;
}
.input {
margin-bottom: 16px;
&.with_label .label_input>label,
&.with_block_label>label,
&.with_floating_label .label_input>label { color: $ui-text-color }
&.with_block_label .hint { margin-bottom: 16px }
&.boolean {
.recommended { margin: 0 8px }
.label_input>label { padding-top: 3px }
}
&.radio_buttons .radio {
margin-bottom: 16px;
label {
margin-bottom: 0;
color: $ui-text-color;
}
}
}
.label_input {
&__wrapper {
border-radius: $card-radius;
&:hover { background: $dropdown-field-bg-hover-color }
&:active,
&:focus { background: $dropdown-field-bg-active-color }
}
&__append {
padding: 16px;
color: $ui-text-color;
&::after { background-image: none }
}
}
.card { margin-bottom: 16px }
.row .input { padding: 0 4px }
.hint {
color: $ui-text-color;
code {
border-radius: 2px;
background: $contained-chip-color;
color: $ui-text-color;
}
}
.actions {
padding: 16px;
margin-top: 0;
}
.check_boxes .checkbox label {
color: $primary-text-color;
padding-top: 8px;
}
p.hint {
padding: 16px;
margin-bottom: 0;
color: $ui-text-color;
&.subtle-hint { margin-top: 16px }
}
select {
color: $ui-text-color;
background-color: $dropdown-field-bg-color;
border: none;
border-radius: $menu-radius $menu-radius 0 0;
padding-left: 16px;
padding-right: 40px;
height: 40px;
option {
color: $menu-text-color;
background-color: $menu-bg-color;
}
&:hover { background-color: $dropdown-field-bg-hover-color }
&:active,
&:focus { background-color: $dropdown-field-bg-active-color }
}
h4 { margin-bottom: 0 !important }
input[type=email],
input[type=number],
input[type=password],
input[type=text],
input[type=url],
textarea {
@include text-area-border($other-text-area-border);
padding: 16px;
&:active,
&:focus {
background: $text-field-bg-color;
padding: 16px 16px 15px;
}
&::placeholder { color: $tips-text-color }
}
input[type=email],
input[type=number],
input[type=password],
input[type=text] {
&:focus:invalid:not(:placeholder-shown),
&:required:invalid:not(:placeholder-shown) { border-color: $error-color }
}
}
.flash-message {
@include shadow-1dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
padding: 16px;
margin: 0 16px 32px;
a {
color: $link-text-color;
&:hover { color: $link-text-color }
}
&.translation-prompt { color: $ui-text-color }
&.notice {
border: none;
background: $succeeded-card-bg-color;
color: $verified-color;
}
}
.form-footer a { color: $ui-text-color }
.follow-prompt,
.oauth-prompt {
margin-bottom: 32px;
color: $ui-text-color;
strong { color: $primary-text-color }
}
.input-copy {
background: $bg-color;
padding-right: 8px;
border: 0;
}
input {
&#account_header.file.optional,
&#account_avatar.file.optional,
&#import_data.file.optional { color: $ui-text-color }
}

21
app/javascript/styles/mastodon-material/theme/icons.scss Normal file
View file

@ -0,0 +1,21 @@
.fa.fa-users.column-link,
.fa.fa-globe.column-link,
.fa.fa-address-book.column-link,
.fa.fa-bullhorn.column-link,
.fa.fa-envelope.column-link,
.fa.fa-bookmark.column-link,
.fa.fa-star.column-link,
.fa.fa-list-ul.column-link {
&__icon.fa-fw { color: $icon-color }
}
.fa.fa-lock { text-transform: none }
.icon-with-badge__badge {
background: $badge-color;
border: none;
padding: 4px;
border-radius: 50%;
width: 14px;
height: 14px;
}

330
app/javascript/styles/mastodon-material/theme/material-icons.scss Normal file
View file

@ -0,0 +1,330 @@
@include icon-font;
.fa-fw {
width: 20px;
height: 20px;
font-size: 20px;
}
.fa {
&.fa-bars, &.fa-navicon, &.fa-reorder,
&.fa-globe,
&.fa-cog, &.fa-cogs, &.fa-gears,
&.fa-sign-out,
&.fa-search,
&.fa-times, &.fa-times-circle, &.fa-close, &.fa-remove,
&.fa-chevron-down, &.fa-ellipsis-v,
&.fa-paperclip,
&.fa-tasks,
&.fa-plus,
&.fa-unlock,
&.fa-lock,
&.fa-envelope,
&.fa-home,
&.fa-bullhorn,
&.fa-sliders,
&.fa-chevron-left,
&.fa-chevron-right,
&.fa-arrow-right,
&.fa-reply,
&.fa-reply-all,
&.fa-share-alt,
&.fa-star,
&.fa-bookmark,
&.fa-ellipsis-h,
&.fa-bell,
&.fa-bell-o,
&.fa-eraser,
&.fa-users,
&.fa-file-text,
&.fa-user-plus,
&.fa-address-book, &.fa-address-book-o,
&.fa-list, &.fa-list-ul,
&.fa-eye,
&.fa-eye-slash,
&.fa-pencil,
&.fa-trash,
&.fa-play,
&.fa-external-link,
&.fa-retweet,
&.fa-link,
&.fa-pause,
&.fa-volume-up,
&.fa-volume-off,
&.fa-expand,
&.fa-download,
&.fa-arrows-alt,
&.fa-compress,
&.fa-user-times,
&.fa-check,
&.fa-quote-right,
&.fa-upload,
&.fa-comments,
&.fa-angle-right,
&.fa-thumb-tack,
&.fa-hashtag,
&.fa-expand,
&.fa-refresh,
&.fa-user,
&.fa-desktop,
&.fa-exchange,
&.fa-cloud-upload,
&.fa-cloud-download,
&.fa-mobile-phone, &.fa-mobile,
&.fa-tablet,
&.fa-gavel, &.fa-legal,
&.fa-comment,
&.fa-camera,
&.fa-flag,
&.fa-circle,
&.fa-dashboard, &.fa-tachometer,
&.fa-cloud,
&.fa-ban,
&.fa-power-off,
&.fa-copy, &.fa-files-o,
&.fa-smile-o,
&.fa-database,
&.fa-floppy-o, &.fa-save {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
}
.fa {
&.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
&.fa-globe::before { content: "public" }
&.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
&.fa-sign-out::before { content: "exit_to_app" }
&.fa-search::before { content: "search" }
&.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
&.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
&.fa-paperclip::before { content: "attach_file" }
&.fa-tasks::before { content: "poll" }
&.fa-plus::before { content: "add" }
&.fa-unlock::before { content: "lock_open" }
&.fa-lock::before { content: "lock" }
&.fa-envelope::before { content: "mail" }
&.fa-home::before { content: "home" }
&.fa-bullhorn::before { content: "announcement" }
&.fa-sliders::before { content: "tune" }
&.fa-chevron-left::before { content: "arrow_back" }
&.fa-chevron-right::before { content: "arrow_forward" }
&.fa-arrow-right::before { content: "arrow_forward" }
&.fa-reply::before { content: $reply-icon }
&.fa-reply-all::before { content: "reply_all" }
&.fa-share-alt::before { content: "share" }
&.fa-star::before { content: $favorite-icon }
&.fa-bookmark::before { content: "bookmark" }
&.fa-ellipsis-h::before { content: "more_horiz" }
&.fa-bell::before { content: "notifications" }
&.fa-bell-o::before { content: "notifications" }
&.fa-eraser::before { content: "clear_all" }
&.fa-users::before { content: "people" }
&.fa-file-text::before { content: "web" }
&.fa-user-plus::before { content: "person_add" }
&.fa-address-book::before, &.fa-address-book-o::before { content: "explore" }
&.fa-list::before, &.fa-list-ul::before { content: "list" }
&.fa-eye::before { content: "visibility" }
&.fa-eye-slash::before { content : "visibility_off" }
&.fa-pencil::before { content: "create" }
&.fa-trash::before { content: "delete" }
&.fa-play::before { content: "play_arrow" }
&.fa-external-link::before { content: "open_in_new" }
&.fa-retweet::before { content: "repeat" }
&.fa-link::before { content: "link" }
&.fa-pause::before { content: "pause" }
&.fa-volume-up::before { content: "volume_up" }
&.fa-volume-off::before { content: "volume_off" }
&.fa-expand::before { content: "web_asset" }
&.fa-download::before { content: "file_download" }
&.fa-arrows-alt::before { content: "fullscreen" }
&.fa-compress::before { content: "fullscreen_exit" }
&.fa-user-times::before { content: "person_remove" }
&.fa-check::before { content: "check" }
&.fa-quote-right::before { content: "format_quote" }
&.fa-upload::before { content: "file_upload" }
&.fa-comments::before { content: "forum" }
&.fa-angle-right::before { content: "chevron_right" }
&.fa-thumb-tack::before { content: "push_pin" }
&.fa-hashtag::before { content: "tag" }
&.fa-expand::before { content: "open_in_full" }
&.fa-refresh::before { content: "refresh" }
&.fa-user::before { content: "person" }
&.fa-desktop::before { content: "web_asset" }
&.fa-exchange::before { content: "sync_alt" }
&.fa-cloud-upload::before { content: "cloud_upload" }
&.fa-cloud-download::before { content: "cloud_download" }
&.fa-mobile-phone::before, &.fa-mobile::before { content: "smartphone" }
&.fa-tablet::before { content: "tablet" }
&.fa-gavel::before, &.fa-legal::before { content: "admin_panel_settings" }
&.fa-comment::before { content: "comment" }
&.fa-camera::before { content: "photo_camera" }
&.fa-flag::before { content: "flag" }
&.fa-circle::before { content: "circle" }
&.fa-dashboard::before, &.fa-tachometer::before { content: "dashboard" }
&.fa-cloud::before { content: "cloud" }
&.fa-ban::before { content: "block" }
&.fa-power-off::before { content: "power_settings_new" }
&.fa-copy::before, &.fa-files-o::before { content: "content_copy" }
&.fa-smile-o::before { content: "emoji_emotions" }
&.fa-database::before { content: "storage" }
&.fa-floppy-o::before, &.fa-save::before { content: "save" }
}
// bookmark icon
.status__action-bar-button.icon-button,
.bookmark-icon.icon-button {
.fa.fa-bookmark::before { content: "bookmark_border" }
&.active .fa.fa-bookmark::before { content: "bookmark" }
}
// favorite icon
.status__action-bar-button.star-icon.icon-button,
.star-icon.icon-button {
.fa.fa-star::before { content: $favorite-icon-border }
&.active,
&.active.activate {
.fa.fa-star::before { content: $favorite-icon }
}
}
// favorite icon color
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active,
.media-modal__overlay .picture-in-picture__footer .icon-button.star-icon.active { color: $favorite-icon-color }
// boost icon
button.icon-button i.fa-retweet {
height: 20px;
width: 20px;
transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><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-button-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($boosted-icon-color)}" stroke-width="0"/></svg>');
}
.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="40px" width="20px"><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="#{$media-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($boosted-icon-color)}" stroke-width="0"/></svg>') }
button.icon-button i.fa-retweet:hover,
button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><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-button-hover-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($boosted-icon-color)}" stroke-width="0"/></svg>');
}
button.icon-button.disabled i.fa-retweet,
button.icon-button.disabled i.fa-retweet:hover,
button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
}
// private boost
button.icon-button.reblogPrivate i.fa-retweet,
button.icon-button.reblogPrivate:hover i.fa-retweet {
background-image: url('data:image/svg+xml;utf8,<svg height="40px" width="20px" viewBox="0 0 24 48" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 H 24 V 24 H 0 Z" fill="none" /><path d="M 17 2 L 17 5 L 5 5 L 5 11 L 7 11 L 7 7 L 17 7 L 17 10 L 21 6 L 17 2 z M 7 14 L 3 18 L 7 22 L 7 19 L 14 19 L 14 17 L 7 17 L 7 14 z " fill="#{svg-color($icon-button-color)}" /><path d="m 21,17 v -1 c 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2 v 1 c -0.55,0 -1,0.45 -1,1 v 3 c 0,0.55 0.45,1 1,1 h 4 c 0.55,0 1,-0.45 1,-1 v -3 c 0,-0.55 -0.45,-1 -1,-1 z m -1,0 h -2 v -1 c 0,-0.55 0.45,-1 1,-1 0.55,0 1,0.45 1,1 z" fill="#{svg-color($icon-button-color)}" /><path d="M 0,24 H 24 V 48 H 0 Z" fill="none" /><path d="M 17 26 L 17 29 L 5 29 L 5 35 L 7 35 L 7 31 L 17 31 L 17 34 L 21 30 L 17 26 z M 7 38 L 3 42 L 7 46 L 7 43 L 14 43 L 14 41 L 7 41 L 7 38 z" fill="#{svg-color($boosted-icon-color)}" /><path d="m 21,41 v -1 c 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2 v 1 c -0.55,0 -1,0.45 -1,1 v 3 c 0,0.55 0.45,1 1,1 h 4 c 0.55,0 1,-0.45 1,-1 v -3 c 0,-0.55 -0.45,-1 -1,-1 z m -1,0 h -2 v -1 c 0,-0.55 0.45,-1 1,-1 0.55,0 1,0.45 1,1 z" fill="#{svg-color($boosted-icon-color)}" /></svg>');
}
// dropdown icon
.compose-form__poll-wrapper select,
.simple_form select {
background-image: 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>');
}
// icon in tab settings
.text-btn.column-header__setting-btn {
.fa {
vertical-align: middle;
&.fa-eraser { margin-right: 8px } // clear notification
}
}
// top bar icons align
.fa.fa-bell.column-header__icon.fa-fw,
.fa.fa-home.column-header__icon.fa-fw,
.fa.fa-users.column-header__icon.fa-fw,
.fa.fa-globe.column-header__icon.fa-fw,
.fa.fa-bars.column-header__icon.fa-fw,
.fa.fa-bookmark.column-header__icon.fa-fw,
.fa.fa-address-book-o.column-header__icon.fa-fw,
.fa.fa-envelope.column-header__icon.fa-fw,
.fa.fa-star.column-header__icon.fa-fw,
.fa.fa-list.column-header__icon.fa-fw,
.fa.fa-list-ul.column-header__icon.fa-fw { vertical-align: text-bottom }
// top bar icons in single column mode
.tabs-bar__link .fa {
&.fa-home,
&.fa-bell,
&.fa-users,
&.fa-globe,
&.fa-search {
&.fa-fw { vertical-align: text-bottom }
}
}
// getting-started and side bar icons
.column-link .fa,
.column-link--transparent .fa { vertical-align: text-bottom }
// uploaded media icons align
.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
font-size: 20px;
vertical-align: text-bottom;
}
// search results icons align
.search-results__header .fa { vertical-align: text-bottom }
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// Attachment icon
.attachment-list__list a .fa { vertical-align: middle }
// verified icon
.verified__mark { vertical-align: middle }
// tag icon
.directory__tag h4 .fa { vertical-align: bottom }
// status detail icon
.detailed-status .fa {
font-size: 16px;
vertical-align: text-bottom;
}
// Icons in lists or tables
tbody tr td span .fa {
color: $icon-color;
vertical-align: bottom;
}
a.table-action-link i.fa,
button.table-action-link i.fa {
font-size: 16px;
vertical-align: bottom;
}
// you might like
.trends__header .fa { vertical-align: bottom }
// status scope
.status__visibility-icon .fa,
.account__header__tabs__name .fa {
font-size: 16px;
vertical-align: text-bottom;
}
// sidebar icon in settings
.admin-wrapper .sidebar ul a i.fa { vertical-align: text-bottom }
.back-link a .fa { vertical-align: middle }

128
app/javascript/styles/mastodon-material/theme/media.scss Normal file
View file

@ -0,0 +1,128 @@
.media-gallery {
border-radius: $media-radius;
&__item { border-radius: $media-radius }
}
.media-modal {
&__nav {
background: $media-icon-bg-color;
color: $media-icon-color;
height: 48px;
width: 48px;
margin: auto 16px;
padding: 8px;
border-radius: 50%;
.fa { width: 32px }
}
&__button {
background-color: $media-page-indicator-color;
&--active { background-color: $media-page-indicator-active-color }
}
&__close,
&__zoom-button {
&.icon-button {
background: transparent;
color: $media-icon-color;
font-size: 24px !important;
width: 24px !important;
height: 24px !important;
padding: 8px;
box-sizing: content-box;
line-height: normal !important;
&:hover {
background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
.fa-fw {
width: 24px;
height: 24px;
}
}
}
&__meta {
bottom: 24px;
a { color: $media-icon-color }
}
&__overlay {
.picture-in-picture__footer .icon-button {
color: $media-icon-color;
&:active,
&:focus,
&:hover {
color: $media-icon-hover-color;
background-color: transparent;
}
&.star-icon.active {
&:active,
&:focus,
&:hover { background: transparent }
}
}
}
}
.video-player {
border-radius: 0;
&__controls {
background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
padding: 0 12px;
}
&__seek {
&::before {
background: rgba(255,255,255,.2);
border-radius: 0;
}
&__buffer {
background: rgba(255,255,255,.4);
border-radius: 0;
}
&__progress {
background: $primary-color;
border-radius: 0;
}
&__handle {
@include material-transition;
background-color: $primary-color;
box-shadow: none;
}
}
&__volume {
&::before {
background: rgba(255,255,255,.4);
border-radius: 0;
}
&__current {
background: $primary-color;
border-radius: 0;
}
&__handle {
@include material-transition;
background-color: $primary-color;
box-shadow: none;
}
}
&__time-current { margin-left: 68px }
&__buttons button { font-size: 20px }
}

99
app/javascript/styles/mastodon-material/theme/modal.scss Normal file
View file

@ -0,0 +1,99 @@
.confirmation-modal {
@include shadow-24dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
&__container {
text-align: left;
padding: 24px;
}
&__action-bar {
justify-content: flex-end;
background: $card-bg-color;
padding: 8px;
}
&__secondary-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
}
.actions-modal {
@include shadow-24dp;
background: $card-bg-color;
border-radius: $card-radius;
ul li:not(:empty) a {
color: $ui-text-color;
font-size: 16px;
&.active,
&.active button,
&:active,
&:active button,
&:focus,
&:focus button,
&:hover,
&:hover button {
background: $card-bg-hover-color;
color: $ui-text-color;
}
}
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
background: $card-bg-color;
border-bottom-color: $border-color;
}
}
.boost-modai__status-header { padding-left: 56px }
.report-modal {
@include shadow-24dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__target {
padding: 24px;
text-align: left;
font-weight: bold;
}
&__container {
border-top: none;
}
&__comment {
border-right: none;
.setting-text-label { color: $ui-text-color }
}
}
.embed-modal .embed-modal__container {
padding: 0 24px 24px 24px;
.hint {
margin-bottom: 16px;
color: $secondary-text-color;
}
}

160
app/javascript/styles/mastodon-material/theme/responsive.scss Normal file
View file

@ -0,0 +1,160 @@
.tabs-bar {
background: $top-bar-color;
&__link {
padding: 16px 16px 12px 16px;
color: $tab-item-color;
border-bottom: 2px solid transparent;
&.active {
border-bottom: 2px solid $tab-item-active-color;
color: $tab-item-active-color;
}
.fa { font-size: 20px }
span {
margin-left: 8px;
vertical-align: text-bottom;
}
}
&__wrapper {
@include shadow-4dp;
background: transparent;
}
}
#tabs-bar__portal { overflow-y: hidden }
.floating-action-button {
@include shadow-6dp;
background: $floating-action-button-color;
color: $floating-action-button-icon-color;
font-size: 24px;
width: $fab-size;
height: $fab-size;
bottom: 16px;
right: 16px;
&:hover { background: $floating-action-button-hover-color }
&:active,
&:focus { background: $floating-action-button-active-color }
}
.columns-area--mobile {
.column { margin: 0 !important }
.account__header {
&__account-note,
&__bio .account__header__content { padding: 8px 16px }
}
.search__input { padding: 16px 46px }
.search__icon {
.fa {
top: 16px;
left: 16px;
}
.fa-times-circle.active { left: unset }
}
.directory {
&__list {
grid-gap: 16px;
margin: 16px;
}
&__card { margin-bottom: 16px }
}
}
// small size screen
@media screen and (max-width: 415px) {
.public-layout {
padding-top: 64px;
.header { margin: 0 }
}
}
// middle size screen
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper {
padding-top: 0;
.tabs-bar { margin-bottom: 0 }
}
}
.columns-area__panels {
&__main {
@include shadow-1dp;
padding: 0;
}
&__pane { padding: 0 16px }
}
}
// single column mode
@media screen and (min-width: 630px) {
.tabs-bar__link {
&:hover {
background: $tab-bg-hover-color;
border-bottom-color: transparent;
}
&:active,
&:focus {
background: $tab-bg-focus-color;
border-bottom-color: $tab-bg-color;
}
&.active { border-bottom-color: $tab-item-active-color }
}
.columns-area--mobile .status {
padding: 16px 16px 16px 80px;
&__prepend {
margin-left: 80px;
padding-top: 16px;
}
}
}
@media screen and (max-width: 600px) {
.admin-wrapper {
.sidebar {
ul {
background: $card-bg-color;
a,
ul a { border-bottom: none }
}
}
.sidebar-wrapper { @include shadow-4dp }
}
.public-layout .public-account-header {
&__bar { background: $card-bg-color }
&__tabs {
margin-left: 16px;
&__name h1 {
color: $primary-text-color;
small { color: $secondary-text-color }
}
}
}
}

288
app/javascript/styles/mastodon-material/theme/statuses.scss Normal file
View file

@ -0,0 +1,288 @@
.status {
padding: 16px 16px 8px 72px;
border-bottom: 1px solid $border-color;
&__expand { width: 72px }
&__info {
font-size: $name-font-size;
.status__display-name { padding-right: 24px }
}
&__relative-time {
color: $info-text-color;
padding-bottom: 0;
}
&__display-name {
color: $secondary-text-color;
strong { color: $primary-text-color }
}
&__avatar {
left: 16px;
top: 16px;
}
&__content {
font-size: $status-font-size;
padding-top: 8px;
color: $primary-text-color;
a {
color: $link-text-color;
&.unhandled-link { color: $link-text-color }
}
p { margin-bottom: 16px }
.status__content__spoiler-link { @include button-type($button-on-status) }
&__spoiler-link {
border: 0;
font-size: 15px;
height: 36px;
padding: 0 16px;
margin: 8px;
color: $text-button-color;
}
&__read-more-button {
@include button-type($button-on-status);
height: 36px;
padding: 0 16px;
margin: 8px 0;
&:hover { text-decoration: none }
}
}
&__action-bar {
margin-top: 4px;
&__counter {
margin-right: 6px;
&__label {
font-size: 14px;
color: $info-text-color;
}
}
}
&__action-bar-button {
margin-right: 4px;
&.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&--with-counter {
margin-right: 4px;
width: auto !important;
&:hover { background: transparent }
}
}
}
&__action-bar-dropdown {
width: 36px !important;
height: 36px !important;
box-sizing: content-box;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
&:hover {
color:$icon-hover-color;
background: $icon-bg-hover-color;
}
}
}
&__prepend {
color: $secondary-text-color;
margin-left: 64px;
.status__display-name strong { color: $secondary-text-color }
}
&.status-direct:not(.read) {
background: transparent;
border-bottom-color: $border-color;
}
&__visibility-icon { color: $icon-color }
}
.status-card {
color: $icon-color;
border-color: $border-color;
border-radius: $card-radius;
outline: none;
margin: 8px 0;
&__image {
background: transparent;
&>.fa {
font-size: 26px;
}
&-image { border-radius: $card-radius 0 0 $card-radius }
}
&__title {
color: $primary-text-color;
margin-bottom: 6px;
}
&__description { color: $secondary-text-color }
&__actions {
&>div {
background: $media-icon-bg-color;
border-radius: $button-radius;
}
button,
a {
color: $media-icon-color;
font-size: 20px;
}
a { bottom: auto }
}
&__host {
margin-top: 6px;
color: $secondary-text-color;
}
&.compact {
border-color: $border-color;
outline: none;
background: transparent;
.status-card {
&__content { padding: 12px }
&__image { flex: 0 0 64px }
}
&:hover { background-color: transparent !important }
}
&.horizontal {
border-radius: 0;
.status-card {
&__image-preview { border-radius: 0 }
&__image-image { border-radius: 0 }
}
}
}
a.status-card {
&:hover { background-color: $card-bg-color }
}
.embed .status,
.public-layout .status { padding: 16px 16px 16px 80px }
// Detailed status in mobile
.status.light {
.status {
&__display-name { color: $primary-text-color }
&__relative-time { color: $info-text-color }
&__content { color: $primary-text-color }
}
.display-name { color: $secondary-text-color }
.display-name strong { color: $primary-text-color }
}
.detailed-status {
background: $card-bg-color;
padding: 16px;
&.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
&__display-name {
color: $secondary-text-color;
strong { color: $primary-text-color }
}
&__meta {
margin-top: 16px;
color: $info-text-color;
}
&__action-bar {
background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 8px 0;
}
&__action-bar-dropdown {
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
&__button {
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
.button.logo-button { margin-bottom: 16px }
}
// search user trends
.display-name {
&__html { color: $primary-text-color }
&__account { color: $secondary-text-color }
}
.activity-stream {
@include shadow-1dp;
margin-bottom: 16px;
border-radius: $card-radius;
.entry {
background: $card-bg-color;
&:first-child {
.detailed-status,
.load-more,
.status { border-radius: $card-radius $card-radius 0 0 }
}
}
}
.entry.h-cite.p-comment.entry-successor:first-child { border-top: 1px solid $border-color }

97
app/javascript/styles/mastodon-material/theme/tables.scss Normal file
View file

@ -0,0 +1,97 @@
.batch-table {
border: 1px solid $border-color;
border-radius: $table-radius;
&__toolbar {
border: none;
border-bottom: 1px solid $border-color;
background: $list-bg-color;
border-radius: $table-radius $table-radius 0 0;
&__actions { padding-right: 16px }
}
&__row {
border: none;
border-bottom: 1px solid $border-color;
background: $list-bg-color;
&__content {
padding-top: 16px;
&__extra { color: $info-text-color }
}
&:nth-child(2n) {
background: $list-bg-color;
&:hover { background: $list-bg-hover-color }
}
&:last-child {
border-bottom: none;
border-radius: 0 0 $table-radius $table-radius;
}
&:hover { background: $list-bg-hover-color }
}
&__form {
border: 1px solid $border-color;
background: $list-bg-color;
}
.nothing-here { border: none }
}
a.table-action-link,
button.table-action-link {
padding: 4px 8px;
margin-right: 0;
color: $text-button-color;
border-radius: $button-radius;
i.fa { margin-right: 8px }
&:hover {
color: $text-button-color;
background: $text-button-hover-color;
}
&:first-child { padding-left: 8px }
}
.table-wrapper {
margin-bottom: 24px;
border: 1px solid $border-color;
border-radius: $table-radius;
}
.table {
border-radius: $table-radius;
td,
th {
background: $list-bg-color;
border-top: 1px solid $border-color;
}
&>thead {
color: $ui-text-color;
&>tr>th { border-bottom: 1px solid $border-color }
}
&>tbody {
color: $ui-text-color;
&>tr {
&>td { vertical-align: middle }
&:nth-child(odd) {
&>td,
&>th { background: transparent }
}
}
}
}

10
app/javascript/styles/mastodon-material/theme/theme.scss Normal file
View file

@ -0,0 +1,10 @@
/*
* Mastodon Material 1.0.0
* Copyright (C) 2021 Rintan, Genbu Project
*/
$version: "1.0.0";
@import 'about', 'account', 'admin', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'forms', 'icons', 'media', 'modal', 'responsive', 'statuses', 'tables', 'variables', 'widgets';
$dense: false;

1
app/javascript/styles/mastodon-material/theme/variables.scss Normal file
View file

@ -0,0 +1 @@
.link-button { color: $link-text-color }

167
app/javascript/styles/mastodon-material/theme/widgets.scss Normal file
View file

@ -0,0 +1,167 @@
.hero-widget {
@include shadow-2dp;
margin-bottom: 16px;
&__img {
border-radius: $card-radius $card-radius 0 0;
background: $card-bg-color;
img { border-radius: $card-radius $card-radius 0 0 }
}
&__text {
background: $card-bg-color;
padding: 16px;
color: $primary-text-color;
border-radius: 0 0 $card-radius $card-radius;
a { color: $link-text-color }
}
}
.endorsements-widget {
padding-bottom: 8px;
margin-bottom: 8px;
h4 {
padding: 12px 16px;
color: $section-text-color;
}
.account { padding: 8px 16px }
}
.trends-widget h4 { color: $section-text-color }
.placeholder-widget {
border-radius: 0;
border: none;
color: $tips-text-color;
margin-bottom: 16px;
}
.directory__tag {
margin-bottom: 16px;
&>a,
&>div {
@include shadow-2dp;
background: $card-bg-color;
border-radius: $card-radius;
padding: 16px;
&:active,
&:focus,
&:hover { background: $card-bg-color }
}
h4 {
color: $primary-text-color;
.fa { color: $icon-color }
small { color: $info-text-color }
}
}
.contact-widget {
color: $ui-text-color;
padding: 8px;
h4 {
color: $ui-text-color;
padding: 0 0 8px;
}
.account { padding: 8px 0 }
&>a {
padding: 8px 0;
color: $primary-text-color;
}
}
.box-widget {
@include shadow-2dp;
padding: 16px;
border-radius: $card-radius;
background: $card-bg-color;
}
.rich-formatting {
color: $ui-text-color;
h1, h2, h3, h4, h5, h6 { color: $primary-text-color }
a { color: $link-text-color }
li, p { color: $ui-text-color }
strong { color: $primary-text-color }
table {
border-radius: 4px;
border: 1px solid $border-color;
thead tr,
tbody tr {
color: $ui-text-color;
border-bottom: 1px solid $border-color;
}
}
}
.table-of-contents {
background: $bg-color;
border-radius: 0;
li {
ul {
padding-left: 16px;
border-bottom: 1px solid $border-color;
}
a {
padding: 16px;
color: $ui-text-color;
border-bottom: 1px solid $border-color;
}
}
}
.page-header {
background: $card-bg-color;
padding: 42px 16px;
margin: 16px 0;
h1 {
color: $primary-text-color;
margin-bottom: 8px;
}
p { color: $ui-text-color }
}
.memoriam-widget,
.page-header {
@include shadow-4dp;
border-radius: $card-radius;
}
.accounts-table {
tbody td { padding: 16px 8px }
.fa.active,
.fa.active.passive { color: $icon-color }
&__count {
color: $ui-text-color;
small { color: $secondary-text-color }
}
}
.statuses-grid .detailed-status {
@include shadow-1dp;
border-radius: $card-radius;
}

4
config/initializers/content_security_policy.rb
View file

@ -17,12 +17,14 @@ media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true'
media_host ||= assets_host
instance_ticker_host = 'https://inst.ance.tk'
github_host = "https://raw.githubusercontent.com" # GitHub
google_fonts_host = "https://fonts.gstatic.com" # Google Fonts
Rails.application.config.content_security_policy do |p|
p.base_uri :none
p.default_src :none
p.frame_ancestors :none
p.font_src :self, assets_host
p.font_src :self, assets_host, github_host, google_fonts_host
p.img_src :self, :https, :data, :blob, assets_host
p.style_src :self, assets_host, instance_ticker_host
p.media_src :self, :https, :data, assets_host

8
config/locales/en.yml
View file

@ -1545,6 +1545,14 @@ en:
instance-ticker-type-3-contrast: Mastodon instance ticker Type-3 (High contrast / Favicon Images(Black Back) Style)
instance-ticker-type-3-light: Mastodon instance ticker Type-3 (Light / Favicon Images(Black Back) Style)
instance-ticker-type-3: Mastodon instance ticker Type-3 (Dark / Favicon Images(Black back) Style)
mastodon-material: Material (v1-light)
mastodon-material-google-plus: Material (google-plus)
mastodon-material-mastodon-dark: Material (mastodon-dark)
mastodon-material-mastodon-light: Material (mastodon-light)
mastodon-material-v1-black: Material (v1-black)
mastodon-material-v1-dark: Material (v1-dark)
mastodon-material-v2-dark: Material (v2-dark)
mastodon-material-v2-light: Material (v2-light)
mastodon-light: Mastodon (Light)
missing: Mastodon-missing (Dark)
missing-contrast: Mastodon-missing (High contrast)

8
config/locales/ja.yml
View file

@ -1449,6 +1449,14 @@ ja:
instance-ticker-type-3-light: Mastodon instance ticker Type-3 (ライト / Favicon Images(Black Back))
instance-ticker-type-3: Mastodon instance ticker Type-3 (ダーク / Favicon Images(Black Back))
mastodon-light: Mastodon (ライト)
mastodon-material: マテリアル (v1-light)
mastodon-material-google-plus: マテリアル (google-plus)
mastodon-material-mastodon-dark: マテリアル (mastodon-dark)
mastodon-material-mastodon-light: マテリアル (mastodon-light)
mastodon-material-v1-black: マテリアル (v1-black)
mastodon-material-v1-dark: マテリアル (v1-dark)
mastodon-material-v2-dark: マテリアル (v2-dark)
mastodon-material-v2-light: マテリアル (v2-light)
missing: Mastodon-missing (ダーク)
missing-contrast: Mastodon-missing (ハイコントラスト)
missing-light: Mastodon-missing (ライト)

8
config/themes.yml
View file

@ -17,3 +17,11 @@ instance-ticker-type-3-light: styles/instance-ticker-type-3-light.scss
missing: styles/missing.scss
missing-contrast: styles/missing-contrast.scss
missing-light: styles/missing-light.scss
mastodon-material: styles/mastodon-material.scss
mastodon-material-v1-dark: styles/mastodon-material-v1-dark.scss
mastodon-material-v1-black: styles/mastodon-material-v1-black.scss
mastodon-material-v2-light: styles/mastodon-material-v2-light.scss
mastodon-material-v2-dark: styles/mastodon-material-v2-dark.scss
mastodon-material-mastodon-light: styles/mastodon-material-mastodon-light.scss
mastodon-material-mastodon-dark: styles/mastodon-material-mastodon-dark.scss
mastodon-material-google-plus: styles/mastodon-material-google-plus.scss