Merge pull request #3 from GenbuProject/develop

Release 1.0.0

.gitignore

@@ -1,6 +1,10 @@
+src/mastodon-material/color/plus-classic.scss
 src/mastodon-material/plugins/astarte.scss
+src/mastodon-material/plugins/fedibird.scss
+src/mastodon-material/plugins/quote.scss
+src/mastodon-material/plugins/plus.scss
 src/mastodon-material/profiles/test
 build/test.bat
 build/test.sh
 build/build.css
-build/build.css.map
+build/build.css.map

README.md

@@ -1,6 +1,6 @@
 # Mastodon Material
 
-<img src="docs/res/top.png" alt="mastodon-material">
+![Mastodon Material](docs/res/top.png)
 
 ## Language | 言語
 
@@ -10,7 +10,31 @@
 
 Mastodon Material is the native theme for Mastodon, which based on [Material Design](https://material.io). Development policy is [here (Japanese)](docs/development_policy_ja.md).
 
-> Note: This theme is now beta version. Many features may not be implemented or not work properly. 
+## Screenshots
+<details>
+<summary>show/hide</summary>
+
+v1-light + material-v1
+![v1-light](docs/res/v1-light.png)
+
+v1-dark + material-v1
+![v1-dark](docs/res/v1-dark.png)
+
+black + material-v1
+![black](docs/res/black.png)
+
+v2-light + material-v2
+![v2-light](docs/res/v2-light.png)
+
+v2-dark + material-v2
+![v2-dark](docs/res/v2-dark.png)
+
+mastodon-light + material-v1
+![mastodon-light](docs/res/mastodon-light.png)
+
+mastodon-dark + material-v1
+![mastodon-dark](docs/res/mastodon-dark.png)
+</details>
 
 ## Requirement
 

README_ja.md

@@ -1,6 +1,6 @@
 # Mastodon Material
 
-<img src="docs/res/top.png" alt="mastodon-material">
+![Mastodon Material](docs/res/top.png)
 
 ## 言語 | Language
 
@@ -10,7 +10,31 @@
 
 Mastodon Materialは、[Material Design](https://material.io)準拠のMastodon向けネイティブテーマです。開発方針は[こちら](docs/development_policy_ja.md)
 
-> お知らせ: このテーマは現在ベータ版です。様々な要素が不安定または未実装の場合があります。
+## スクリーンショット
+<details>
+<summary>表示/非表示</summary>
+
+v1-light + material-v1
+![v1-light](docs/res/v1-light.png)
+
+v1-dark + material-v1
+![v1-dark](docs/res/v1-dark.png)
+
+black + material-v1
+![black](docs/res/black.png)
+
+v2-light + material-v2
+![v2-light](docs/res/v2-light.png)
+
+v2-dark + material-v2
+![v2-dark](docs/res/v2-dark.png)
+
+mastodon-light + material-v1
+![mastodon-light](docs/res/mastodon-light.png)
+
+mastodon-dark + material-v1
+![mastodon-dark](docs/res/mastodon-dark.png)
+</details>
 
 ## 動作環境
 

docs/customization_guide.md

@@ -72,18 +72,35 @@ The default setting loads the icon fonts on Google Fonts.
 The icon fonts have 5 styles, Filled, Outlined, Rounded, Two-Tone and Sharp. You can check how they look in [Icons - Material Design](https://material.io/resources/icons/). Edit `// Material Icon style settings` section to change it. The default style is Filled.
 
 ## Plugins
-Uncomment what you want to enable in `mastodon-material/profiles/{profile_name}/loader.scss`.
+Uncomment what you want to enable in `mastodon-material/profiles/{profile_name}/loader.scss`.  
+Check other resources in [this page](https://github.com/GenbuProject/Mastodon-Material-Gallery).
 
 ### Display statuses on timeline in a card style
 Change a default list style statuses in timeline into a card one. If you enable it, the less information are displayed in a card style than in a list one in a same density.
 
 Uncomment `@import 'plugins/cards';` to enable it.
 
+<details>
+<summary>show/hide screenshots</summary>
+
+![cards](res/cards.png)
+</details>
+
 ### Improve the browseability
 This theme based on Material Design Guideline strictly, the less information are displayed by the default settings than the mastodon default ones in a same density. This plugin (dense plugin) can make the information displayed more by ignoring the guideline.
 
 Uncomment `@import 'plugins/dense';` to enable it.
 
+<details>
+<summary>show/hide screenshots</summary>
+
+Before
+![before](res/mastodon-light.png)
+
+After
+![after](res/dense.png)
+</details>
+
 ## (etc) Disable the material design icon font
 This theme use [Material Icons Font](https://google.github.io/material-design-icons/#icon-font-for-the-web) by Google to display Material Design icon. If you have some problem about license, you can use [Font Awesome](https://fontawesome.com/), default icon font without any bad effect on other UI in this theme.
 

docs/customization_guide_ja.md

@@ -71,18 +71,35 @@
 アイコンフォントにはFilled, Outlined, Rounded, Two-Tone, Sharpの5種類のスタイルがあります。実際のスタイルは[Icons - Material Design](https://material.io/resources/icons/)から確認できます。`// Material Icon style settings`セクションを編集します。デフォルトはFilledです。
 
 ## プラグイン
-`mastodon-material/profiles/{プロファイル名}/loader.scss`で必要なものをアンコメントしてください。
+`mastodon-material/profiles/{プロファイル名}/loader.scss`で必要なものをアンコメントしてください。  
+その他のリソースは[こちらのリポジトリ](https://github.com/GenbuProject/Mastodon-Material-Gallery)を参照してください。
 
 ### タイムラインの投稿をカード化する
 タイムライン上の投稿をカード化します。(デフォルトはリスト型) リスト型と比べ、一覧性が低下します。
 
 `@import 'plugins/cards';`をアンコメントしてください。
 
+<details>
+<summary>スクリーンショットの表示/非表示</summary>
+
+![cards](res/cards.png)
+</details>
+
 ### 一覧性を向上させる
 このテーマのデフォルト設定では、マテリアルデザインガイドラインに完全準拠しているため、Mastodonデフォルトのテーマと比較して情報密度が低くなっています。ガイドライン非準拠ですが「密モード(denseプラグイン)」を適用することによって、一覧性を向上させることができます。
 
 `@import 'plugins/dense';`をアンコメントしてください。
 
+<details>
+<summary>スクリーンショットの表示/非表示</summary>
+
+Before
+![before](res/mastodon-light.png)
+
+After
+![after](res/dense.png)
+</details>
+
 ## (参考)マテリアルデザインアイコンフォントを利用しない
 このテーマでは、マテリアルデザインアイコンの表示にGoogle製[Material Iconsフォント](https://google.github.io/material-design-icons/#icon-font-for-the-web)を採用しています。ライセンス上の問題がある場合などに、このテーマの他のUIに影響を及ぼすことなくデフォルトのアイコンフォントである[Font Awesome](https://fontawesome.com/)を利用できます。
 

src/mastodon-material/color/black.scss

@@ -34,6 +34,7 @@ $menu-bg-active-color: lighten($menu-bg-color, 10%);
 $menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
 $card-bg-color: #121212;
 $card-bg-hover-color: lighten($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
 $list-bg-color: #000000;
 $list-bg-hover-color: lighten($list-bg-color, 6%);
 $list-bg-active-color: lighten($list-bg-color, 10%);
@@ -89,7 +90,8 @@ $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%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);
@@ -124,18 +126,11 @@ $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-item-color: transparentize(#ffffff, 0.5);
+$tab-item-active-color: $primary-color;
 $tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #121212;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
 
 // Media indicator color
 $media-page-indicator-color: #9e9e9e;

src/mastodon-material/color/mastodon-dark.scss

@@ -34,6 +34,7 @@ $menu-bg-active-color: lighten($menu-bg-color, 10%);
 $menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
 $card-bg-color: #313543;
 $card-bg-hover-color: lighten($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
 $list-bg-color: #282c37;
 $list-bg-hover-color: lighten($list-bg-color, 6%);
 $list-bg-active-color: lighten($list-bg-color, 10%);
@@ -89,7 +90,8 @@ $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%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);
@@ -124,18 +126,11 @@ $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-item-color: #d9e1e8;
+$tab-item-active-color: $primary-color;
 $tab-bg-color: #1f232b;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
 
 // Media indicator color
 $media-page-indicator-color: #9e9e9e;

src/mastodon-material/color/mastodon-light.scss

@@ -33,6 +33,7 @@ $menu-bg-active-color: darken($bg-color, 10%);
 $menu-bg-active-hover-color: darken($bg-color, 16%);
 $card-bg-color: #ffffff;
 $card-bg-hover-color: darken($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
 $list-bg-color: #ffffff;
 $list-bg-hover-color: darken($list-bg-color, 6%);
 $list-bg-active-color: darken($list-bg-color, 10%);
@@ -88,7 +89,8 @@ $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%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);
@@ -123,18 +125,11 @@ $search-bar-color: #d9e1e8;
 $search-bar-focus-color: $bg-color;
 
 // Tab color
-$tab-indicator-color: #282c37;
-$tab-indicator-active-color: $top-bar-icon-color;
+$tab-item-color: #282c37;
+$tab-item-active-color: $primary-color;
 $tab-bg-color: #e6ebf0;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
 
 // Media indicator color
 $media-page-indicator-color: #9e9e9e;