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

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

Browse Source 
Features/material theme
This commit is contained in:
YorimiMochida 2020-06-09 00:08:03 +09:00 committed by GitHub
commit 7aae99e7aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
291 changed files with 14075 additions and 4384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,3 @@
@charset "UTF-8";
@import 'application';
@import 'mastodon-material-dark/account';
@import 'mastodon-material-dark/basics';
@import 'mastodon-material-dark/button';
//@import 'mastodon-material-dark/cards';
@import 'mastodon-material-dark/columns';
@import 'mastodon-material-dark/components';
@import 'mastodon-material-dark/config';
@import 'mastodon-material-dark/control';
@import 'mastodon-material-dark/emoji-picker';
@import 'mastodon-material-dark/icons';
@import 'mastodon-material-dark/material-icons';
@import 'mastodon-material-dark/media';
@import 'mastodon-material-dark/mobile';
@import 'mastodon-material-dark/modal';
@import 'mastodon-material-dark/statuses';
@import 'mastodon-material-dark/loader'

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

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

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

@ -57,6 +57,7 @@ $disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #fff;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);

129
app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss Normal file
View File

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

129
app/javascript/styles/mastodon-material-dark/color/plus-classic.scss Normal file
View File

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

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

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

130
app/javascript/styles/mastodon-material-dark/color/v1-light.scss Normal file
View File

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

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

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

130
app/javascript/styles/mastodon-material-dark/color/v2-light.scss Normal file
View File

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

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

@ -1,39 +0,0 @@
@charset "UTF-8";
// Color scheme
@import 'color/mastodon-dark';
// Layout profile
@import 'layout/material-v1';
// Material Design Icon settings
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
@font-face {
font-family: "Material Icons";
src:
local("Material Icons"),
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
}
// Search bar hover settings
// You can enable/disable search bar floating.
/*.search__input:hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}*/
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1

4
app/javascript/styles/mastodon-material-dark/custom_color.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
// Add your customization below

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

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

4
app/javascript/styles/mastodon-material-dark/custom_layout.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
// Add your customization below

39
app/javascript/styles/material-v2-dark/config.scss → app/javascript/styles/mastodon-material-dark/icon_config.scss
View File

@ -1,12 +1,17 @@
@charset "UTF-8";
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
//$favorite-icon-color: #ffffff; // inverted +1
// Color scheme
@import 'color/v2-dark';
// Layout profile
@import 'layout/material-v2';
// Reply icon settings
$reply-icon: "reply";
//$reply-icon: "comment"; // blooming
// Material Design Icon settings
@ -18,22 +23,4 @@
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
}
// Search bar hover settings
// You can enable/disable search bar floating.
/*.search__input:hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}*/
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
}

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

@ -1,5 +1,5 @@
@charset "UTF-8";
@import '../mixins';
@import '../theme/mixins';
// Navigation bar radius

65
app/javascript/styles/mastodon-material-dark/layout/material-v2.scss Normal file
View File

@ -0,0 +1,65 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 8px;
// Search bar radius
$search-bar-radius: 8px;
// Bar radius settings
$bar-radius: 0;
//$bar-radius: 8px;
// Button radius settings
$button-radius: 8px;
// Card radius settings
$card-radius: 8px;
// Dialog radius settings
$dialog-radius: 8px;
// Menu radius settings
$menu-radius: 8px;
// Navigation drawer item settings
$nav-drawer-item-radius: 8px; // corner rounded
//$nav-drawer-item-radius: 32px; // full rounded
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
// Avater cropping settings
$avater-radius: 50%; // Rounded cropping
//$avater-radius: 8px // Material v2 square
// Chip settings
// If you want to use contained-chip, please comment out below.
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
&:hover { background: $outlined-chip-hover-color !important }
}
.relationship-tag,
.account-role {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
}
// Button shadow
// If you want to use material v2 styled non-shadow button, please comment out this section.
.button,
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }

12
app/javascript/styles/mastodon-material-dark/loader.scss Normal file
View File

@ -0,0 +1,12 @@
@charset "UTF-8";
@import '../application';
@import 'theme/theme';
@import 'theme/material-icons';
// Plugins
//@import 'plugins/cards';
//@import 'plugins/dense';
//@import 'plugins/plus';

15
app/javascript/styles/mastodon-material-dark/cards.scss → app/javascript/styles/mastodon-material-dark/plugins/cards.scss
View File

@ -1,17 +1,24 @@
@charset "UTF-8";
@import 'config';
@import 'mixins';
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import '../theme/mixins';
.column {
box-shadow: none !important;
margin: 2px 0 !important;
padding: 8px !important;
> .scrollable { background: $background-color }
}
.status {
border-bottom: 0 !important;
border-bottom: 0;
border-radius: $card-radius;
background: $card-background-color;
&__prepend { padding: 8px 8px 2px 0 }
}
.account { border-bottom: 0 !important }
@ -20,6 +27,8 @@
.notification.notification {
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
background: $card-background-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }

63
app/javascript/styles/mastodon-material-dark/plugins/dense.scss Normal file
View File

@ -0,0 +1,63 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.drawer {
&__tab { margin: 8px auto 8px }
}
.column { margin: 10px 5px }
.column-header {
&__buttons { height: 48px }
&__button {
margin: 8px;
padding: 10px 8px;
.fa { vertical-align: text-top }
}
}
.column-subheading { padding: 8px 16px }
.column-link { padding: 12px 16px }
.notification__filter-bar button { padding: 12px 0 }
.getting-started__footer {
padding: 12px 16px;
p { margin-bottom: 12px }
}
.compose-form {
.compose-form__publish { padding-top: 8px }
}
.status {
padding: 8px 8px 8px 66px;
&__expand { width: 66px }
&__info { padding-right: 0 }
&__avatar {
left: 8px;
top: 10px;
}
&__content { padding-top: 2px }
}
.detailed-status {
padding: 14px;
&__meta { margin-top: 14px }
&__action-bar { padding: 10px 0 }
}
.button.button--block { margin: 6px 0 }

33
app/javascript/styles/mastodon-material-dark/plugins/plus.scss Normal file
View File

@ -0,0 +1,33 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.status__action-bar-button {
background: #eeeeee;
width: 28px !important;
height: 28px !important;
.fa { vertical-align: bottom }
}
// favorite icon
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
.star-icon {
border-radius: 50%;
width: 28px;
height: 28px;
vertical-align: baseline;
font-size: 18px;
&.fa-fw::before { vertical-align: middle }
}
}

8
app/javascript/styles/mastodon-material-dark/theme/_functions.scss Normal file
View File

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

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

4
app/javascript/styles/material-v1-dark/account.scss → app/javascript/styles/mastodon-material-dark/theme/account.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {

34
app/javascript/styles/mastodon-material-dark/theme/base_config.scss Normal file
View File

@ -0,0 +1,34 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// Color scheme
@import '../color/v1-light';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import 'color/v2-light';
// Layout profile
@import '../layout/material-v1';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import 'layout/material-v2';
// Search bar hover settings
// You can enable/disable search bar floating.
/*.search__input:hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}*/
// Status font size in timeline
$status-font-size: 15px; // mastodon default
//$status-font-size: 16px; // compatible with material design
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
//$name-font-size: 16px; // compatible with material design

4
app/javascript/styles/material-v1-dark/basics.scss → app/javascript/styles/mastodon-material-dark/theme/basics.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
body { background: $background-color }

4
app/javascript/styles/material-v1-dark/button.scss → app/javascript/styles/mastodon-material-dark/theme/button.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.icon-button {

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

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.column {
@ -26,7 +28,7 @@
&.active {
.column-header__icon {
color: $secondary-color;
color: $top-bar-unread-icon-color;
text-shadow: none;
}
}
@ -318,27 +320,38 @@
}
}
.trends__item {
padding: 16px;
border-bottom: none;
.trends {
&__header {
color: $section-text-color;
background: transparent;
border-bottom: 1px solid $border-color;
padding: 16px;
&__name {
color: $secondary-text-color;
font-size: 12px;
a { color: $primary-text-color }
.fa { margin-right: 8px }
}
&__current {
padding-right: 16px;
margin-left: 4px;
color: $secondary-text-color;
}
&__sparkline path {
stroke: $primary-color;
fill: $primary-color;
fill-opacity: 0.5;
&__item {
padding: 16px;
border-bottom: none;
&__name {
color: $secondary-text-color;
font-size: 12px;
a { color: $primary-text-color }
}
&__current {
padding-right: 16px;
margin-left: 4px;
color: $secondary-text-color;
}
&__sparkline path {
stroke: $primary-color;
fill: $primary-color;
fill-opacity: 0.5;
}
}
}
@ -361,8 +374,12 @@
&__unread { background: $badge-color }
}
&__pagination { color: $ui-text-color }
}
.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
.reactions-bar {
.emoji-button {
color: $icon-button-color;
@ -436,15 +453,9 @@
}
.notification-favourite .status.status-direct {
background: transparent;
.icon-button.disabled { color: $disabled-icon-color }
}
// read notification
.notification.notification-favourite.focusable,
.notification.notification-follow.focusable { background: $list-background-inactive-color }
.relationship-tag {
color: $ui-text-color;
background-color: $contained-chip-color;
@ -454,8 +465,38 @@
opacity: 1;
}
.react-swipeable-view-container { height: auto }
.attachment-list__list a { color: $secondary-text-color }
.focusable { background: transparent !important }
.focusable {
&:focus { background: $card-background-color }
}
// single column mode
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper { padding-top: 0 }
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
margin: 12px 12px 0;
}
}
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-background-hover-color;
border-bottom-color: $tab-background-color;
}
&:active,
&:focus {
background: $tab-indicator-background-focus-color;
border-bottom-color: $tab-background-color;
}
}
}

11
app/javascript/styles/material-v1-dark/components.scss → app/javascript/styles/mastodon-material-dark/theme/components.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@ -40,7 +42,10 @@
&__inner {
background: $card-background-color;
&.darker { background: $card-background-color }
&.darker {
background: $card-background-color;
position: inherit;
}
&__mastodon { background: $card-background-color }
}
@ -79,7 +84,7 @@
opacity: 1;
}
&-times-circle.active {
right: 10px;
right: 16px;
left: unset;
transform: none;
}

4
app/javascript/styles/material-v1-dark/control.scss → app/javascript/styles/mastodon-material-dark/theme/control.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';

6
app/javascript/styles/mastodon-material-dark/emoji-picker.scss → app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.emoji-picker-dropdown {
@ -23,7 +25,7 @@
.emoji-mart {
width: 388px !important;
font-size: 14px;
color: $ui-text-color;
color: $menu-text-color;
&-bar {
border: 0 solid $border-color;

12
app/javascript/styles/mastodon-material-light/icons.scss → app/javascript/styles/mastodon-material-dark/theme/icons.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@ -39,10 +41,4 @@
border: none;
padding: 2px 6px;
border-radius: 12px;
}
// favorite icon color
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
}

16
app/javascript/styles/material-v1-dark/material-icons.scss → app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config', '../icon_config';
@import '../custom_color', '../custom_layout';
@import 'functions';
@ -61,7 +63,8 @@
&.fa-arrows-alt,
&.fa-compress,
&.fa-user-times,
&.fa-check {
&.fa-check,
&.fa-quote-right {
font-family: "Material Icons";
}
}
@ -85,7 +88,7 @@
&.fa-sliders::before { content: "tune" }
&.fa-chevron-left::before { content: "arrow_back" }
&.fa-chevron-right::before { content: "arrow_forward" }
&.fa-reply::before { content: "reply" }
&.fa-reply::before { content: $reply-icon }
&.fa-reply-all::before { content: "reply_all" }
&.fa-share-alt::before { content: "share" }
&.fa-star::before { content: $favorite-icon }
@ -117,6 +120,7 @@
&.fa-compress::before { content: "fullscreen_exit" }
&.fa-user-times::before { content: "delete" }
&.fa-check::before { content: "check" }
&.fa-quote-right::before { content: "format_quote" }
}
// bookmark icon
@ -137,6 +141,12 @@
}
}
// favorite icon color
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
.no-reduce-motion button.icon-button i.fa-retweet {
height: 18px;

4
app/javascript/styles/mastodon-material-light/media.scss → app/javascript/styles/mastodon-material-dark/theme/media.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';

16
app/javascript/styles/mastodon-material-light/mobile.scss → app/javascript/styles/mastodon-material-dark/theme/mobile.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@ -17,6 +19,11 @@
}
.fa { font-size: 20px }
span {
margin-left: 8px;
vertical-align: text-bottom;
}
}
&__wrapper {
@ -41,8 +48,11 @@
}
.columns-area--mobile {
.column { margin: 0 !important }
.search__input { padding: 16px 46px }
.search__input { padding: 16px 38px }
.search__icon .fa {
top: 16px;
left: 16px;
}
}

10
app/javascript/styles/mastodon-material-light/modal.scss → app/javascript/styles/mastodon-material-dark/theme/modal.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@ -64,6 +66,12 @@
&__container {
border-top: none;
}
&__comment {
border-right: none;
.setting-text-label { color: $ui-text-color }
}
}
.embed-modal .embed-modal__container {

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

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@ -10,7 +12,7 @@
&__expand { width: 70px }
&__info {
font-size: 16px;
font-size: $name-font-size;
padding-right: 4px;
}
@ -28,7 +30,7 @@
}
&__content {
font-size: 16px;
font-size: $status-font-size;
padding-top: 4px;
color: $primary-text-color;
@ -73,7 +75,12 @@
}
}
&__prepend { color: $secondary-text-color }
&__prepend {
color: $secondary-text-color;
margin-left: 64px;
.status__display-name strong { color: $secondary-text-color }
}
&.status-direct:not(.read) {
background: transparent;
@ -169,4 +176,10 @@
&__button {
.icon-button { font-size: 20px !important }
}
}
// search user trends
.display-name {
&__html { color: $primary-text-color !important }
&__account { color: $secondary-text-color }
}

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

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

7
app/javascript/styles/mastodon-material-dark/theme/variables.scss Normal file
View File

@ -0,0 +1,7 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.link-button { color: $link-text-color }

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

@ -1,18 +1,3 @@
@charset "UTF-8";
@import 'application';
@import 'mastodon-material-light/account';
@import 'mastodon-material-light/basics';
@import 'mastodon-material-light/button';
//@import 'mastodon-material-light/cards';
@import 'mastodon-material-light/columns';
@import 'mastodon-material-light/components';
@import 'mastodon-material-light/config';
@import 'mastodon-material-light/control';
@import 'mastodon-material-light/emoji-picker';
@import 'mastodon-material-light/icons';
@import 'mastodon-material-light/material-icons';
@import 'mastodon-material-light/media';
@import 'mastodon-material-light/mobile';
@import 'mastodon-material-light/modal';
@import 'mastodon-material-light/statuses';
@import 'mastodon-material-light/loader'

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

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

130
app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss Normal file
View File

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

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

@ -56,6 +56,7 @@ $disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);

129
app/javascript/styles/mastodon-material-light/color/plus-classic.scss Normal file
View File

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

129
app/javascript/styles/mastodon-material-light/color/v1-dark.scss Normal file
View File

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

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

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

130
app/javascript/styles/mastodon-material-light/color/v2-dark.scss Normal file
View File

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

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

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

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

@ -1,39 +0,0 @@
@charset "UTF-8";
// Color scheme
@import 'color/mastodon-light';
// Layout profile
@import 'layout/material-v1';
// Material Design Icon settings
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
@font-face {
font-family: "Material Icons";
src:
local("Material Icons"),
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
}
// Search bar hover settings
// You can enable/disable search bar floating.
/*.search__input:hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}*/
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1

4
app/javascript/styles/mastodon-material-light/custom_color.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
// Add your customization below

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

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

4
app/javascript/styles/mastodon-material-light/custom_layout.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
// Add your customization below

39
app/javascript/styles/material-v1-dark/config.scss → app/javascript/styles/mastodon-material-light/icon_config.scss
View File

@ -1,12 +1,17 @@
@charset "UTF-8";
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
//$favorite-icon-color: #ffffff; // inverted +1
// Color scheme
@import 'color/v1-dark';
// Layout profile
@import 'layout/material-v1';
// Reply icon settings
$reply-icon: "reply";
//$reply-icon: "comment"; // blooming
// Material Design Icon settings
@ -18,22 +23,4 @@
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
}
// Search bar hover settings
// You can enable/disable search bar floating.
/*.search__input:hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}*/
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
}

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

@ -1,5 +1,5 @@
@charset "UTF-8";
@import '../mixins';
@import '../theme/mixins';
// Navigation bar radius

65
app/javascript/styles/mastodon-material-light/layout/material-v2.scss Normal file
View File

@ -0,0 +1,65 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 8px;
// Search bar radius
$search-bar-radius: 8px;
// Bar radius settings
$bar-radius: 0;
//$bar-radius: 8px;
// Button radius settings
$button-radius: 8px;
// Card radius settings
$card-radius: 8px;
// Dialog radius settings
$dialog-radius: 8px;
// Menu radius settings
$menu-radius: 8px;
// Navigation drawer item settings
$nav-drawer-item-radius: 8px; // corner rounded
//$nav-drawer-item-radius: 32px; // full rounded
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
// Avater cropping settings
$avater-radius: 50%; // Rounded cropping
//$avater-radius: 8px // Material v2 square
// Chip settings
// If you want to use contained-chip, please comment out below.
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
&:hover { background: $outlined-chip-hover-color !important }
}
.relationship-tag,
.account-role {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
}
// Button shadow
// If you want to use material v2 styled non-shadow button, please comment out this section.
.button,
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }

12
app/javascript/styles/mastodon-material-light/loader.scss Normal file
View File

@ -0,0 +1,12 @@
@charset "UTF-8";
@import '../application';
@import 'theme/theme';
@import 'theme/material-icons';
// Plugins
//@import 'plugins/cards';
//@import 'plugins/dense';
//@import 'plugins/plus';

15
app/javascript/styles/mastodon-material-light/cards.scss → app/javascript/styles/mastodon-material-light/plugins/cards.scss
View File

@ -1,17 +1,24 @@
@charset "UTF-8";
@import 'config';
@import 'mixins';
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import '../theme/mixins';
.column {
box-shadow: none !important;
margin: 2px 0 !important;
padding: 8px !important;
> .scrollable { background: $background-color }
}
.status {
border-bottom: 0 !important;
border-bottom: 0;
border-radius: $card-radius;
background: $card-background-color;
&__prepend { padding: 8px 8px 2px 0 }
}
.account { border-bottom: 0 !important }
@ -20,6 +27,8 @@
.notification.notification {
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
background: $card-background-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }

63
app/javascript/styles/mastodon-material-light/plugins/dense.scss Normal file
View File

@ -0,0 +1,63 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.drawer {
&__tab { margin: 8px auto 8px }
}
.column { margin: 10px 5px }
.column-header {
&__buttons { height: 48px }
&__button {
margin: 8px;
padding: 10px 8px;
.fa { vertical-align: text-top }
}
}
.column-subheading { padding: 8px 16px }
.column-link { padding: 12px 16px }
.notification__filter-bar button { padding: 12px 0 }
.getting-started__footer {
padding: 12px 16px;
p { margin-bottom: 12px }
}
.compose-form {
.compose-form__publish { padding-top: 8px }
}
.status {
padding: 8px 8px 8px 66px;
&__expand { width: 66px }
&__info { padding-right: 0 }
&__avatar {
left: 8px;
top: 10px;
}
&__content { padding-top: 2px }
}
.detailed-status {
padding: 14px;
&__meta { margin-top: 14px }
&__action-bar { padding: 10px 0 }
}
.button.button--block { margin: 6px 0 }

33
app/javascript/styles/mastodon-material-light/plugins/plus.scss Normal file
View File

@ -0,0 +1,33 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.status__action-bar-button {
background: #eeeeee;
width: 28px !important;
height: 28px !important;
.fa { vertical-align: bottom }
}
// favorite icon
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
.star-icon {
border-radius: 50%;
width: 28px;
height: 28px;
vertical-align: baseline;
font-size: 18px;
&.fa-fw::before { vertical-align: middle }
}
}

8
app/javascript/styles/mastodon-material-light/theme/_functions.scss Normal file
View File

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

0
app/javascript/styles/mastodon-material-light/_mixins.scss → app/javascript/styles/mastodon-material-light/theme/_mixins.scss
View File

4
app/javascript/styles/mastodon-material-dark/account.scss → app/javascript/styles/mastodon-material-light/theme/account.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {

34
app/javascript/styles/mastodon-material-light/theme/base_config.scss Normal file
View File

@ -0,0 +1,34 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// Color scheme
@import '../color/v1-light';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import 'color/v2-light';
// Layout profile
@import '../layout/material-v1';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import 'layout/material-v2';
// Search bar hover settings
// You can enable/disable search bar floating.
/*.search__input:hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}*/
// Status font size in timeline
$status-font-size: 15px; // mastodon default
//$status-font-size: 16px; // compatible with material design
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
//$name-font-size: 16px; // compatible with material design

4
app/javascript/styles/mastodon-material-light/basics.scss → app/javascript/styles/mastodon-material-light/theme/basics.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
body { background: $background-color }

4
app/javascript/styles/material-v1-light/button.scss → app/javascript/styles/mastodon-material-light/theme/button.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.icon-button {

99
app/javascript/styles/material-v1-dark/columns.scss → app/javascript/styles/mastodon-material-light/theme/columns.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.column {
@ -26,7 +28,7 @@
&.active {
.column-header__icon {
color: $secondary-color;
color: $top-bar-unread-icon-color;
text-shadow: none;
}
}
@ -318,27 +320,38 @@
}
}
.trends__item {
padding: 16px;
border-bottom: none;
.trends {
&__header {
color: $section-text-color;
background: transparent;
border-bottom: 1px solid $border-color;
padding: 16px;
&__name {
color: $secondary-text-color;
font-size: 12px;
a { color: $primary-text-color }
.fa { margin-right: 8px }
}
&__current {
padding-right: 16px;
margin-left: 4px;
color: $secondary-text-color;
}
&__sparkline path {
stroke: $primary-color;
fill: $primary-color;
fill-opacity: 0.5;
&__item {
padding: 16px;
border-bottom: none;
&__name {
color: $secondary-text-color;
font-size: 12px;
a { color: $primary-text-color }
}
&__current {
padding-right: 16px;
margin-left: 4px;
color: $secondary-text-color;
}
&__sparkline path {
stroke: $primary-color;
fill: $primary-color;
fill-opacity: 0.5;
}
}
}
@ -361,8 +374,12 @@
&__unread { background: $badge-color }
}
&__pagination { color: $ui-text-color }
}
.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
.reactions-bar {
.emoji-button {
color: $icon-button-color;
@ -436,15 +453,9 @@
}
.notification-favourite .status.status-direct {
background: transparent;
.icon-button.disabled { color: $disabled-icon-color }
}
// read notification
.notification.notification-favourite.focusable,
.notification.notification-follow.focusable { background: $list-background-inactive-color }
.relationship-tag {
color: $ui-text-color;
background-color: $contained-chip-color;
@ -454,8 +465,38 @@
opacity: 1;
}
.react-swipeable-view-container { height: auto }
.attachment-list__list a { color: $secondary-text-color }
.focusable { background: transparent !important }
.focusable {
&:focus { background: $card-background-color }
}
// single column mode
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper { padding-top: 0 }
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
margin: 12px 12px 0;
}
}
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-background-hover-color;
border-bottom-color: $tab-background-color;
}
&:active,
&:focus {
background: $tab-indicator-background-focus-color;
border-bottom-color: $tab-background-color;
}
}
}

11
app/javascript/styles/mastodon-material-dark/components.scss → app/javascript/styles/mastodon-material-light/theme/components.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@ -40,7 +42,10 @@
&__inner {
background: $card-background-color;
&.darker { background: $card-background-color }
&.darker {
background: $card-background-color;
position: inherit;
}
&__mastodon { background: $card-background-color }
}
@ -79,7 +84,7 @@
opacity: 1;
}
&-times-circle.active {
right: 10px;
right: 16px;
left: unset;
transform: none;
}

4
app/javascript/styles/mastodon-material-dark/control.scss → app/javascript/styles/mastodon-material-light/theme/control.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';

6
app/javascript/styles/material-v1-dark/emoji-picker.scss → app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.emoji-picker-dropdown {
@ -23,7 +25,7 @@
.emoji-mart {
width: 388px !important;
font-size: 14px;
color: $ui-text-color;
color: $menu-text-color;
&-bar {
border: 0 solid $border-color;

12
app/javascript/styles/mastodon-material-dark/icons.scss → app/javascript/styles/mastodon-material-light/theme/icons.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@ -39,10 +41,4 @@
border: none;
padding: 2px 6px;
border-radius: 12px;
}
// favorite icon color
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
}

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

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config', '../icon_config';
@import '../custom_color', '../custom_layout';
@import 'functions';
@ -61,7 +63,8 @@
&.fa-arrows-alt,
&.fa-compress,
&.fa-user-times,
&.fa-check {
&.fa-check,
&.fa-quote-right {
font-family: "Material Icons";
}
}
@ -85,7 +88,7 @@
&.fa-sliders::before { content: "tune" }
&.fa-chevron-left::before { content: "arrow_back" }
&.fa-chevron-right::before { content: "arrow_forward" }
&.fa-reply::before { content: "reply" }
&.fa-reply::before { content: $reply-icon }
&.fa-reply-all::before { content: "reply_all" }
&.fa-share-alt::before { content: "share" }
&.fa-star::before { content: $favorite-icon }
@ -117,6 +120,7 @@
&.fa-compress::before { content: "fullscreen_exit" }
&.fa-user-times::before { content: "delete" }
&.fa-check::before { content: "check" }
&.fa-quote-right::before { content: "format_quote" }
}
// bookmark icon
@ -137,6 +141,12 @@
}
}
// favorite icon color
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
.no-reduce-motion button.icon-button i.fa-retweet {
height: 18px;

4
app/javascript/styles/mastodon-material-dark/media.scss → app/javascript/styles/mastodon-material-light/theme/media.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';

16
app/javascript/styles/material-v1-dark/mobile.scss → app/javascript/styles/mastodon-material-light/theme/mobile.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@ -17,6 +19,11 @@
}
.fa { font-size: 20px }
span {
margin-left: 8px;
vertical-align: text-bottom;
}
}
&__wrapper {
@ -41,8 +48,11 @@
}
.columns-area--mobile {
.column { margin: 0 !important }
.search__input { padding: 16px 46px }
.search__input { padding: 16px 38px }
.search__icon .fa {
top: 16px;
left: 16px;
}
}

10
app/javascript/styles/material-v1-dark/modal.scss → app/javascript/styles/mastodon-material-light/theme/modal.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@ -64,6 +66,12 @@
&__container {
border-top: none;
}
&__comment {
border-right: none;
.setting-text-label { color: $ui-text-color }
}
}
.embed-modal .embed-modal__container {

21
app/javascript/styles/material-v1-dark/statuses.scss → app/javascript/styles/mastodon-material-light/theme/statuses.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@ -10,7 +12,7 @@
&__expand { width: 70px }
&__info {
font-size: 16px;
font-size: $name-font-size;
padding-right: 4px;
}
@ -28,7 +30,7 @@
}
&__content {
font-size: 16px;
font-size: $status-font-size;
padding-top: 4px;
color: $primary-text-color;
@ -73,7 +75,12 @@
}
}
&__prepend { color: $secondary-text-color }
&__prepend {
color: $secondary-text-color;
margin-left: 64px;
.status__display-name strong { color: $secondary-text-color }
}
&.status-direct:not(.read) {
background: transparent;
@ -169,4 +176,10 @@
&__button {
.icon-button { font-size: 20px !important }
}
}
// search user trends
.display-name {
&__html { color: $primary-text-color !important }
&__account { color: $secondary-text-color }
}

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

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

7
app/javascript/styles/mastodon-material-light/theme/variables.scss Normal file
View File

@ -0,0 +1,7 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.link-button { color: $link-text-color }

17
app/javascript/styles/material-v1-dark.scss
View File

@ -1,18 +1,3 @@
@charset "UTF-8";
@import 'application';
@import 'material-v1-dark/account';
@import 'material-v1-dark/basics';
@import 'material-v1-dark/button';
//@import 'material-v1-dark/cards';
@import 'material-v1-dark/columns';
@import 'material-v1-dark/components';
@import 'material-v1-dark/config';
@import 'material-v1-dark/control';
@import 'material-v1-dark/emoji-picker';
@import 'material-v1-dark/icons';
@import 'material-v1-dark/material-icons';
@import 'material-v1-dark/media';
@import 'material-v1-dark/mobile';
@import 'material-v1-dark/modal';
@import 'material-v1-dark/statuses';
@import 'material-v1-dark/loader'

12
app/javascript/styles/material-v1-dark/_functions.scss
View File

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

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

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

129
app/javascript/styles/material-v1-dark/color/mastodon-light.scss Normal file
View File

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

129
app/javascript/styles/material-v1-dark/color/plus-classic.scss Normal file
View File

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

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

@ -23,14 +23,14 @@ $search-bar-text-color: $inverted-text-color;
// Background-color
$background-color: #303030;
$menu-background-color: #1e1e1e;
$menu-background-color: #424242;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #1e1e1e;
$card-background-color: #424242;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #1e1e1e;
$list-background-color: #424242;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
@ -88,7 +88,7 @@ $toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #5f6368;
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
@ -109,7 +109,7 @@ $tab-indicator-background-hover-color: transparentize($tab-indicator-active-colo
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
$text-tab-background-color: #1e1e1e;
$text-tab-background-color: #424242;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);

130
app/javascript/styles/material-v1-dark/color/v1-light.scss Normal file
View File

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

130
app/javascript/styles/material-v1-dark/color/v2-dark.scss Normal file
View File

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

130
app/javascript/styles/material-v1-dark/color/v2-light.scss Normal file
View File

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

4
app/javascript/styles/material-v1-dark/custom_color.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
// Add your customization below

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

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

4
app/javascript/styles/material-v1-dark/custom_layout.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
// Add your customization below

39
app/javascript/styles/material-v2-light/config.scss → app/javascript/styles/material-v1-dark/icon_config.scss
View File

@ -1,12 +1,17 @@
@charset "UTF-8";
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
//$favorite-icon-color: #ffffff; // inverted +1
// Color scheme
@import 'color/v2-light';
// Layout profile
@import 'layout/material-v2';
// Reply icon settings
$reply-icon: "reply";
//$reply-icon: "comment"; // blooming
// Material Design Icon settings
@ -18,22 +23,4 @@
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
}
// Search bar hover settings
// You can enable/disable search bar floating.
/*.search__input:hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}*/
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
}

2
app/javascript/styles/material-v1-dark/layout/material-v1.scss
View File

@ -1,5 +1,5 @@
@charset "UTF-8";
@import '../mixins';
@import '../theme/mixins';
// Navigation bar radius

65
app/javascript/styles/material-v1-dark/layout/material-v2.scss Normal file
View File

@ -0,0 +1,65 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 8px;
// Search bar radius
$search-bar-radius: 8px;
// Bar radius settings
$bar-radius: 0;
//$bar-radius: 8px;
// Button radius settings
$button-radius: 8px;
// Card radius settings
$card-radius: 8px;
// Dialog radius settings
$dialog-radius: 8px;
// Menu radius settings
$menu-radius: 8px;
// Navigation drawer item settings
$nav-drawer-item-radius: 8px; // corner rounded
//$nav-drawer-item-radius: 32px; // full rounded
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
// Avater cropping settings
$avater-radius: 50%; // Rounded cropping
//$avater-radius: 8px // Material v2 square
// Chip settings
// If you want to use contained-chip, please comment out below.
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
&:hover { background: $outlined-chip-hover-color !important }
}
.relationship-tag,
.account-role {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
}
// Button shadow
// If you want to use material v2 styled non-shadow button, please comment out this section.
.button,
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }

12
app/javascript/styles/material-v1-dark/loader.scss Normal file
View File

@ -0,0 +1,12 @@
@charset "UTF-8";
@import '../application';
@import 'theme/theme';
@import 'theme/material-icons';
// Plugins
//@import 'plugins/cards';
//@import 'plugins/dense';
//@import 'plugins/plus';

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

@ -1,17 +1,24 @@
@charset "UTF-8";
@import 'config';
@import 'mixins';
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import '../theme/mixins';
.column {
box-shadow: none !important;
margin: 2px 0 !important;
padding: 8px !important;
> .scrollable { background: $background-color }
}
.status {
border-bottom: 0 !important;
border-bottom: 0;
border-radius: $card-radius;
background: $card-background-color;
&__prepend { padding: 8px 8px 2px 0 }
}
.account { border-bottom: 0 !important }
@ -20,6 +27,8 @@
.notification.notification {
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
background: $card-background-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }

63
app/javascript/styles/material-v1-dark/plugins/dense.scss Normal file
View File

@ -0,0 +1,63 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.drawer {
&__tab { margin: 8px auto 8px }
}
.column { margin: 10px 5px }
.column-header {
&__buttons { height: 48px }
&__button {
margin: 8px;
padding: 10px 8px;
.fa { vertical-align: text-top }
}
}
.column-subheading { padding: 8px 16px }
.column-link { padding: 12px 16px }
.notification__filter-bar button { padding: 12px 0 }
.getting-started__footer {
padding: 12px 16px;
p { margin-bottom: 12px }
}
.compose-form {
.compose-form__publish { padding-top: 8px }
}
.status {
padding: 8px 8px 8px 66px;
&__expand { width: 66px }
&__info { padding-right: 0 }
&__avatar {
left: 8px;
top: 10px;
}
&__content { padding-top: 2px }
}
.detailed-status {
padding: 14px;
&__meta { margin-top: 14px }
&__action-bar { padding: 10px 0 }
}
.button.button--block { margin: 6px 0 }

33
app/javascript/styles/material-v1-dark/plugins/plus.scss Normal file
View File

@ -0,0 +1,33 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.status__action-bar-button {
background: #eeeeee;
width: 28px !important;
height: 28px !important;
.fa { vertical-align: bottom }
}
// favorite icon
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
.star-icon {
border-radius: 50%;
width: 28px;
height: 28px;
vertical-align: baseline;
font-size: 18px;
&.fa-fw::before { vertical-align: middle }
}
}

8
app/javascript/styles/material-v1-dark/theme/_functions.scss Normal file
View File

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

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

4
app/javascript/styles/material-v1-light/account.scss → app/javascript/styles/material-v1-dark/theme/account.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {

34
app/javascript/styles/material-v1-dark/theme/base_config.scss Normal file
View File

@ -0,0 +1,34 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// Color scheme
@import '../color/v1-light';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import 'color/v2-light';
// Layout profile
@import '../layout/material-v1';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import 'layout/material-v2';
// Search bar hover settings
// You can enable/disable search bar floating.
/*.search__input:hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}*/
// Status font size in timeline
$status-font-size: 15px; // mastodon default
//$status-font-size: 16px; // compatible with material design
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
//$name-font-size: 16px; // compatible with material design

4
app/javascript/styles/mastodon-material-dark/basics.scss → app/javascript/styles/material-v1-dark/theme/basics.scss
View File

@ -1,5 +1,7 @@
@charset "UTF-8";
@import 'config';
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
body { background: $background-color }

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