update material theme to the latest

app/javascript/styles/mastodon-material-dark.scss

@@ -1,9 +1,2 @@
-/*
-* Mastodon Material 0.2.0
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-
 @import 'application';
 @import 'mastodon-material-dark/loader';

app/javascript/styles/mastodon-material-dark/color/black.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #1e1e1e;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #121212;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: $icon-color;
 $top-bar-icon-hover-color: $icon-hover-color;
 $top-bar-icon-active-color: $primary-color;
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #42485a;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #393f4f;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#42485a, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -40,11 +40,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
+$chip-selected-text-color: $primary-color;
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: #ffffff;
 $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
 $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: $icon-color;
 $top-bar-icon-hover-color: $icon-hover-color;
 $top-bar-icon-active-color: $primary-color;
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -48,4 +48,8 @@ $outlined-chip: false;  // Material v1 styled contained chip
 
 
 // Button shadow
-$button-shadow: true;  // Material v1 styled colored button with shadow
+$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;

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

@@ -56,4 +56,9 @@ $outlined-chip: true;  // Material v2 styled outlined chip
 
 // Button shadow
 $button-shadow: false;  // Material v2 styled colored button without shadow
-//$button-shadow: true;  // Material v1 styled colored button with shadow
+//$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;  // Regular
+//$fab-size: 40px;  // Mini

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

@@ -5,20 +5,21 @@
 
 
 .drawer {
-    &__tab { margin: 8px auto 8px }
+    &__header { height: 48px }
+
+    &__tab { margin: 6px auto 6px }
 }
 
 .column { margin: 10px 5px }
 
 .column-header {
+    height: 48px;
+
+    > button { padding: 12px 16px }
+    
     &__buttons { height: 48px }
 
-    &__button {
+    &__button { margin: 6px }
-        margin: 8px;
-        padding: 10px 8px;
-
-        .fa { vertical-align: text-top }
-    }
 }
 
 .column-subheading { padding: 8px 16px }
@@ -38,7 +39,7 @@
 }
 
 .status {
-    padding: 8px 8px 8px 66px;
+    padding: 8px 8px 4px 66px;
 
     &__expand { width: 66px }
 

app/javascript/styles/mastodon-material-dark/theme/_mixins.scss

@@ -45,7 +45,7 @@ $shadow-color-3: rgba(0,0,0,.12);
     @if $outlined-chip {
         .reactions-bar__item {
             background: $outlined-chip-color !important;
-            border: 1px solid $border-color !important;
+            border: 1px solid $outlined-chip-selected-border-color !important;
         
             &.active { background-color: $outlined-chip-selected-color !important }
         
@@ -61,6 +61,12 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin icon-button {
+    width: 20px !important;
+    height: 20px !important;
+    font-size: 20px !important;
+}
+
 // check background-image value
 @mixin bg-image {
     @if $bg-image == none {        

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

@@ -6,6 +6,7 @@
 
 .account {
     border-bottom: 1px solid $border-color;
+    padding: 16px;
 
     .account__display-name,
     .account__display-name strong { color: $primary-text-color }
@@ -27,6 +28,11 @@
         }
     }
 
+    &__avatar-wrapper {
+        margin-left: 0;
+        margin-right: 16px;
+    }
+
     &__header {
         &__bar {
             background: $card-bg-color;
@@ -51,9 +57,11 @@
 
             &__buttons {
                 .icon-button {
+                    @include icon-button;
                     border: none;
                     border-radius: 50%;
-                    padding: 0;
+                    padding: 8px;
+                    margin-left: 8px;
                 }
             }
         }
@@ -157,6 +165,17 @@
             &:hover { background: $text-tab-indicator-bg-hover-color }
         }
     }
+
+    &__relationship {
+        padding: 0;
+        height: auto;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
 }
 
 .account-role {

app/javascript/styles/mastodon-material-dark/theme/button.scss

@@ -21,16 +21,23 @@
     &.inverted {
         color: $icon-button-color;
 
+        &.active { color: $icon-button-active-color }
+
         &:hover {
             color: $icon-button-hover-color;
             background-color: $icon-bg-hover-color;
         }
+
+        &:focus { background-color: transparent }
     }
 
     &.overlayed {
+        @include icon-button;
         border-radius: 50%;
         background: $media-icon-bg-color;
         color: $media-icon-color;
+        padding: 4px;
+        line-height: 20px !important;
     
         &:hover {
             background: $media-icon-bg-color;
@@ -76,38 +83,53 @@ label.icon-button {
     }
 }
 
-.button,
+.button {
-.button:active,
-.button:focus {
     background-color: $contained-button-color;
     border-radius: $button-radius;
-}
 
-.button:hover {
+    &:active,
-    @include shadow-2dp;
+    &:focus {
-    background-color: $contained-button-hover-color;
+        background-color: $contained-button-color;
-}
+        border-radius: $button-radius;
+    }
 
-.button.logo-button {
+    &:hover {
-    background: $contained-button-color;
+        @include shadow-2dp;
-    margin: 2px;
+        background-color: $contained-button-hover-color;
+    }
 
-    &:hover { background: $contained-button-hover-color }
+    &.logo-button {
+        background: $contained-button-color;
+        margin: 2px;
+    
+        &:hover { background: $contained-button-hover-color }
+    
+        .button--destructive:hover { background: $contained-button-hover-color }
+    }
 
-    .button--destructive:hover { background: $contained-button-hover-color }
+    &.button--block { margin: 8px 0 }
-}
 
-.button.button--block { margin: 8px 0 }
+    &.button-secondary {
+        color: $text-button-color;
+        border: none;
+        box-shadow: none;
+    
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+    }
 
-.button.confirmation-modal__cancel-button {
+    &.confirmation-modal__cancel-button {
-    box-shadow: none;
+        box-shadow: none;
-    background-color: transparent;
+        background-color: transparent;
-    margin: 0 8px;
+        margin: 0 8px;
-    color: $text-button-color;
+        color: $text-button-color;
-
+    
-    &:hover { background: $text-button-hover-color }
+        &:hover { background: $text-button-hover-color }
-
+    
-    &:focus { background: $text-button-focus-color }
+        &:focus { background: $text-button-focus-color }
+    }
 }
 
 .spoiler-button__overlay__label {

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

@@ -21,9 +21,10 @@
 .column-header {
     background: $top-bar-color;
     border-radius: $bar-radius;
+    height: 56px;
 
     > button {
-        padding: 16px 0 16px 16px;
+        padding: 16px;
         color: $top-bar-text-color;
     }
 
@@ -45,12 +46,13 @@
     &__buttons { height: 56px }
 
     &__button {
+        @include icon-button;
         background: $top-bar-color;
         color: $top-bar-icon-color;
-        margin: 8px 10px;
+        padding: 8px;
-        padding: 10px;
+        margin: 10px;
         border-radius: 50%;
-        font-size: 20px;
+        box-sizing: content-box;
 
         &.active {
             color: $top-bar-icon-active-color;
@@ -136,6 +138,7 @@
     color: $section-text-color;
     background: $bg-color;
     padding: 12px 16px;
+    margin-top: 8px;
     border-top: 1px solid $border-color;
 }
 
@@ -192,6 +195,8 @@
     padding: 16px;
 
     span { visibility: hidden }  // hide "back" string
+
+    &--slim-button { top: -54px }
 }
 
 .column-inline-form {
@@ -296,6 +301,7 @@
     &__wrapper {
         background: $bg-color;
         height: auto !important;
+        padding-bottom: 8px;
         border-bottom: 1px solid $border-color;
     }
 
@@ -321,6 +327,7 @@
         h4 {
             color: $section-text-color;
             padding: 12px 16px;
+            margin-top: 8px;
             border-top: 1px solid $border-color;
             border-bottom: none;
         }
@@ -384,15 +391,18 @@
 
     &__pagination {
         color: $ui-text-color;
-        padding: 8px 16px;
+        padding: 16px;
-        bottom: 8px;
+        bottom: 0;
 
         .icon-button {
-            font-size: 20px !important;
+            @include icon-button;
-            width: 20px !important;
+            padding: 8px;
-            height: 20px !important;
+            margin: 0 4px;
-            margin: 0 8px;
+            line-height: normal !important;
+            box-sizing: content-box;
         }
+
+        span { vertical-align: super }
     }
 }
 
@@ -401,6 +411,9 @@
 @include outlined-chip;
 
 .reactions-bar {
+    margin-top: 16px;
+    width: calc(100% - 72px);
+
     .emoji-button {
         color: $icon-button-color;
         font-size: 20px;
@@ -417,7 +430,10 @@
 
         &.active {
             background-color: $contained-chip-selected-color;
-            .reactions-bar__item__count { color: $ui-text-color }
+
+            .reactions-bar__item__count { color: $chip-selected-text-color }
+
+            &:hover { background-color: $contained-chip-selected-color }
         }
 
         &__emoji {
@@ -428,7 +444,7 @@
 
         &__count {
             font-size: 16px;
-            margin: 0 8px;
+            margin: 0 12px 0 8px;
             color: $secondary-text-color;
         }
 

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

@@ -121,7 +121,7 @@
         background-color: $card-bg-color;
         padding: 16px;
 
-        .fa { margin-right: 8px }
+        .fa { margin-right: 16px }
     }
 
     &__section {
@@ -148,6 +148,11 @@
         width: 36px !important;
         height: 36px !important;
         padding: 8px;
+
+        &.active {
+            color: $icon-hover-color;
+            background: $icon-bg-active-color;
+        }
     }
 }
 
@@ -156,6 +161,8 @@
     margin: 8px 0;
 }
 
+.flex-spacer { margin: 8px 0 }
+
 .dropdown-menu {
     @include shadow-8dp;
     background: $menu-bg-color;
@@ -233,6 +240,7 @@
             padding: 16px;
             border: 1px solid $border-color;
             border-radius: $card-radius;
+            box-shadow: none;
 
             a { color: $link-text-color }
         }
@@ -263,8 +271,7 @@
             padding: 8px;
 
             .icon-button {
-                width: 20px !important;
+                @include icon-button;
-                height: 20px !important;
                 padding: 8px;
             }
 
@@ -291,14 +298,12 @@
 
             .button.button-secondary {
                 box-shadow: none;
-                color: $outlined-button-color;
+                color: $text-button-color;
-                border-color: $outlined-button-color;
 
-                &:hover { background-color: $outlined-button-hover-color }
+                &:hover { background-color: $text-button-hover-color }
 
-                &:active { background-color: $outlined-button-active-color }
+                &:active,
-
+                &:focus { background-color: $text-button-focus-color }
-                &:focus { background-color: $outlined-button-color }
             }
 
             .poll__footer { border-top: none }
@@ -312,17 +317,32 @@
 
 
 .poll {
+    .button { margin-right: 8px }
+
+    li { margin-bottom: 0 }
+
     &__input {
-        border: 2px solid $control-border-color;
+        border: none;
         width: 20px;
         height: 20px;
         flex: 0 0 20px;
-        margin: 8px;
+        padding: 18px;
+        margin: 0 2px;
+        background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
+        
+        &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
 
-        &.checkbox { border-radius: 2px }
+        &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
 
-        &:focus,
+        &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-        &:hover { border: 2px solid $control-border-color }
+
+        &.checkbox {
+            border-radius: 2px;
+            border: 2px solid $control-border-color;
+            padding: 8px;
+            margin: 8px 10px;
+            background: none;
+        }
     }
 
     &__text input[type=text] {
@@ -334,12 +354,16 @@
         &:focus { border-color: $border-active-color }
     }
 
-    &__option input[type=text] {
+    &__option {
-        color: $primary-text-color;
+        padding: 16px 0 8px;
-        background: $text-field-bg-color;
+
-        border: none;
+        input[type=text] {
-        border-radius: 2px;
+            color: $primary-text-color;
-        padding: 8px 16px;
+            background: $text-field-bg-color;
+            border: none;
+            border-radius: 2px;
+            padding: 8px 16px;
+        }
     }
 
     &__chart {
@@ -444,7 +468,11 @@
         &-avatar { margin-right: 8px }
     }
 
-    &__content { color: $primary-text-color }
+    &__content {
+        color: $primary-text-color;
+
+        p { margin-bottom: 16px }
+    }
 }
 
 .attachment-list {

app/javascript/styles/mastodon-material-dark/theme/containers.scss

@@ -0,0 +1,57 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.public-layout {
+    .header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        margin: 16px 0;
+
+        .brand:hover { background: $tab-indicator-bg-hover-color }
+
+        .nav-link,
+        .nav-link.optional {
+            color: $top-bar-text-color;
+
+            &:hover {
+                background: $tab-indicator-bg-hover-color;
+                text-decoration: none;
+            }
+        }
+
+        .nav-button {
+            background: transparent;
+            margin: 0;
+            border-radius: 0;
+
+            &:hover { background: $tab-indicator-bg-hover-color }
+        }
+
+        .detailed-status__meta { margin-top: 16px }
+    }
+
+    .detailed-status { padding: 16px }
+
+    .footer {
+        padding-top: 16px;
+        padding-bottom: 64px;
+        color: $ui-text-color;
+
+        h4 { color: $ui-text-color }
+
+        ul a { color: $secondary-text-color }
+
+        .grid .column-2 h4 a { color: $ui-text-color }
+
+        .brand {
+            svg { fill: $icon-color }
+
+            &:hover svg { fill: $icon-hover-color }
+        }
+    }
+}

app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss

@@ -69,13 +69,13 @@
         background: $menu-bg-color;
     }
 
-    &-category-label span {
+    &-category {
-        padding: 4px 6px;
+        &-label span {
-        background: $menu-bg-color;
+            padding: 4px 6px;
-    }
+            background: $menu-bg-color;
+        }
 
-    &-emoji:hover::before {
+        .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
-        background-color: $icon-bg-hover-color;
     }
 
     &-no-results { color: $secondary-text-color }

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

@@ -75,7 +75,8 @@
     &.fa-check,
     &.fa-quote-right,
     &.fa-upload,
-    &.fa-comments {
+    &.fa-comments,
+    &.fa-angle-right {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -143,6 +144,7 @@
     &.fa-quote-right::before { content: "format_quote" }
     &.fa-upload::before { content: "file_upload" }
     &.fa-comments::before { content: "forum" }
+    &.fa-angle-right::before { content: "chevron_right" }
 }
 
 // bookmark icon
@@ -170,17 +172,20 @@
 .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
 
 // boost icon
-button.icon-button i.fa-retweet,
+button.icon-button i.fa-retweet {
-button.icon-button i.fa-retweet:hover {
+    height: 20px;
-    height: 18px;
+    width: 20px;
-    width: 18px;
     transition: none;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+button.icon-button i.fa-retweet:hover {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
 }
 
 button.icon-button.disabled i.fa-retweet,
 button.icon-button.disabled i.fa-retweet:hover {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
 }
 
 // dropdown icon
@@ -199,7 +204,24 @@ button.icon-button.disabled i.fa-retweet:hover {
 .fa.fa-bell.column-header__icon.fa-fw,
 .fa.fa-home.column-header__icon.fa-fw,
 .fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom }
+.fa.fa-globe.column-header__icon.fa-fw,
+.fa.fa-bars.column-header__icon.fa-fw,
+.fa.fa-bookmark.column-header__icon.fa-fw,
+.fa.fa-address-book-o.column-header__icon.fa-fw,
+.fa.fa-envelope.column-header__icon.fa-fw,
+.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
+
+// top bar icons in single column mode
+.tabs-bar__link {
+    .fa.fa-home.fa-fw,
+    .fa.fa-bell.fa-fw,
+    .fa.fa-users.fa-fw,
+    .fa.fa-globe.fa-fw { vertical-align: text-bottom }
+}
+
+// getting-started and side bar icons
+.column-link .fa,
+.column-link--transparent .fa { vertical-align: text-bottom }
 
 // uploaded media icons align
 .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
@@ -208,4 +230,19 @@ button.icon-button.disabled i.fa-retweet:hover {
 }
 
 // search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
+.search-results__header .fa { vertical-align: text-bottom }
+
+// read more icon
+.status__content__read-more-button .fa { vertical-align: bottom }
+
+// status detail icon
+.detailed-status .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}
+
+// status scope
+.status__visibility-icon .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}

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

@@ -12,23 +12,25 @@
 }
 
 .media-modal__close {
-    align-content: center;
-
     &.icon-button {
         background: transparent;
         color: $media-icon-color;
-        text-align: center !important;
         font-size: 24px !important;
-        width: 48px !important;
+        width: 24px !important;
-        height: 48px !important;
+        height: 24px !important;
-        border: 12px;
+        padding: 8px;
+        box-sizing: content-box;
+        line-height: normal !important;
 
         &:hover {
             background: $media-icon-bg-hover-color;
             color: $media-icon-hover-color;
         }
 
-        .fa-fw { width: 24px }
+        .fa-fw {
+            width: 24px;
+            height: 24px;
+        }
     }
 }
 

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

@@ -10,7 +10,6 @@
     background: $card-bg-color;
     color: $ui-text-color;
     border-radius: $dialog-radius;
-    width: 300px;
 
     &__container {
         text-align: left;

app/javascript/styles/mastodon-material-dark/theme/responsive.scss

@@ -39,6 +39,10 @@
     background: $floating-action-button-color;
     color: $floating-action-button-icon-color;
     font-size: 24px;
+    width: $fab-size;
+    height: $fab-size;
+    bottom: 16px;
+    right: 16px;
 
     &:hover { background: $floating-action-button-hover-color }
 
@@ -60,6 +64,11 @@
     }
 }
 
+// small size screen
+@media screen and (max-width: 415px) {
+    .public-layout { padding-top: 64px }
+}
+
 // middle size screen
 @media screen and (min-width: 415px) {
     .tabs-bar {
@@ -72,17 +81,22 @@
         }
     }
 
-    .columns-area__panels__main {
+    .columns-area__panels {
-        @include shadow-1dp;
+        &__main {
-        padding: 0;
+            @include shadow-1dp;
+            padding: 0;
+        }
+
+        &__pane { padding: 0 16px }
     }
 }
 
+//single column mode
 @media screen and (min-width: 631px) {
     .tabs-bar__link {
         &:hover {
             background: $tab-indicator-bg-hover-color;
-            border-bottom-color: $tab-bg-color;
+            border-bottom-color: transparent;
         }
 
         &:active,
@@ -90,5 +104,7 @@
             background: $tab-indicator-bg-focus-color;
             border-bottom-color: $tab-bg-color;
         }
+
+        &.active { border-bottom-color: $tab-indicator-active-color }
     }
 }

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

@@ -6,7 +6,7 @@
 
 
 .status {
-    padding: 12px 12px 12px 70px;
+    padding: 12px 12px 4px 70px;
     border-bottom: 1px solid $border-color;
 
     &__expand { width: 70px }
@@ -40,6 +40,8 @@
             &.unhandled-link { color: $link-text-color }
         }
 
+        p { margin-bottom: 16px }
+
         .status__content__spoiler-link {
             background: transparent;
 
@@ -69,9 +71,47 @@
     }
 
     &__action-bar {
-        &__counter__label {
+        margin-top: 4px;
-            font-size: 14px;
+
-            color: $info-text-color;
+        &__counter {
+            margin-right: 6px;
+
+            &__label {
+                font-size: 14px;
+                color: $info-text-color;
+            }
+        }
+    }
+
+    &__action-bar-button {
+        margin-right: 6px;
+
+        &.icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
+
+    &__action-bar-dropdown {
+        width: 36px !important;
+        height: 36px !important;
+        box-sizing: content-box;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &.active {
+                color: $icon-hover-color;
+                background: $icon-bg-active-color;
+            }
+
+            &:hover {
+                color:$icon-hover-color;
+                background: $icon-bg-hover-color;
+            }
         }
     }
 
@@ -154,6 +194,9 @@ a.status-card {
     &:hover { background-color: $card-bg-color }
 }
 
+.embed .status,
+.public-layout .status { padding: 16px 16px 16px 80px }
+
 // Detailed status in mobile
 .status.light {
     .status {
@@ -170,6 +213,8 @@ a.status-card {
     background: $card-bg-color;
     padding: 16px;
 
+    &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
+
     &__display-name {
         color: $secondary-text-color;
 
@@ -185,11 +230,28 @@ a.status-card {
         background: $card-bg-color;
         border-top: none;
         border-bottom: 1px solid $border-color;
-        padding: 12px 0;
+        padding: 8px 0;
+    }
+
+    &__action-bar-dropdown {
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &.active {
+                color: $icon-hover-color;
+                background: $icon-bg-active-color;
+            }
+        }
     }
 
     &__button {
-        .icon-button { font-size: 20px !important }
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
     }
 }
 
@@ -197,4 +259,22 @@ a.status-card {
 .display-name {
     &__html { color: $primary-text-color }
     &__account { color: $secondary-text-color }
-}
+}
+
+.activity-stream {
+    @include shadow-1dp;
+    margin-bottom: 16px;
+    border-radius: $card-radius;
+
+    .entry {
+        background: $card-bg-color;
+
+        &:first-child {
+            .detailed-status,
+            .load-more,
+            .status { border-radius: $card-radius $card-radius 0 0 }
+        }
+    }
+}
+
+.entry.entry-center { border-bottom: 1px solid $border-color }

app/javascript/styles/mastodon-material-dark/theme/theme.scss

@@ -1,4 +1,10 @@
+/*
+* Mastodon Material 0.2.0
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
 @charset "UTF-8";
 
 
-@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
+@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';

app/javascript/styles/mastodon-material-dark/theme/widgets.scss

@@ -0,0 +1,32 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.hero-widget {
+    @include shadow-2dp;
+    margin-bottom: 16px;
+
+    &__img {
+        border-radius: $card-radius $card-radius 0 0;
+        background: $card-bg-color;
+
+        img { border-radius: $card-radius $card-radius 0 0 }
+    }
+
+    &__text {
+        background: $card-bg-color;
+        padding: 16px;
+        color: $primary-text-color;
+        border-radius: 0 0 $card-radius $card-radius;
+    }
+}
+
+.endorsements-widget {
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+}
+
+.trends-widget h4 { color: $section-text-color }

app/javascript/styles/mastodon-material-light.scss

@@ -1,9 +1,2 @@
-/*
-* Mastodon Material 0.2.0
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-
 @import 'application';
 @import 'mastodon-material-light/loader';

app/javascript/styles/mastodon-material-light/color/black.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #1e1e1e;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #121212;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: $icon-color;
 $top-bar-icon-hover-color: $icon-hover-color;
 $top-bar-icon-active-color: $primary-color;
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #42485a;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #393f4f;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#42485a, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/mastodon-material-light/color/mastodon-light.scss

@@ -40,11 +40,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
+$chip-selected-text-color: $primary-color;
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: #ffffff;
 $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
 $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: $icon-color;
 $top-bar-icon-hover-color: $icon-hover-color;
 $top-bar-icon-active-color: $primary-color;
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -48,4 +48,8 @@ $outlined-chip: false;  // Material v1 styled contained chip
 
 
 // Button shadow
-$button-shadow: true;  // Material v1 styled colored button with shadow
+$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;

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

@@ -56,4 +56,9 @@ $outlined-chip: true;  // Material v2 styled outlined chip
 
 // Button shadow
 $button-shadow: false;  // Material v2 styled colored button without shadow
-//$button-shadow: true;  // Material v1 styled colored button with shadow
+//$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;  // Regular
+//$fab-size: 40px;  // Mini

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

@@ -5,20 +5,21 @@
 
 
 .drawer {
-    &__tab { margin: 8px auto 8px }
+    &__header { height: 48px }
+
+    &__tab { margin: 6px auto 6px }
 }
 
 .column { margin: 10px 5px }
 
 .column-header {
+    height: 48px;
+
+    > button { padding: 12px 16px }
+    
     &__buttons { height: 48px }
 
-    &__button {
+    &__button { margin: 6px }
-        margin: 8px;
-        padding: 10px 8px;
-
-        .fa { vertical-align: text-top }
-    }
 }
 
 .column-subheading { padding: 8px 16px }
@@ -38,7 +39,7 @@
 }
 
 .status {
-    padding: 8px 8px 8px 66px;
+    padding: 8px 8px 4px 66px;
 
     &__expand { width: 66px }
 

app/javascript/styles/mastodon-material-light/theme/_mixins.scss

@@ -45,7 +45,7 @@ $shadow-color-3: rgba(0,0,0,.12);
     @if $outlined-chip {
         .reactions-bar__item {
             background: $outlined-chip-color !important;
-            border: 1px solid $border-color !important;
+            border: 1px solid $outlined-chip-selected-border-color !important;
         
             &.active { background-color: $outlined-chip-selected-color !important }
         
@@ -61,6 +61,12 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin icon-button {
+    width: 20px !important;
+    height: 20px !important;
+    font-size: 20px !important;
+}
+
 // check background-image value
 @mixin bg-image {
     @if $bg-image == none {        

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

@@ -6,6 +6,7 @@
 
 .account {
     border-bottom: 1px solid $border-color;
+    padding: 16px;
 
     .account__display-name,
     .account__display-name strong { color: $primary-text-color }
@@ -27,6 +28,11 @@
         }
     }
 
+    &__avatar-wrapper {
+        margin-left: 0;
+        margin-right: 16px;
+    }
+
     &__header {
         &__bar {
             background: $card-bg-color;
@@ -51,9 +57,11 @@
 
             &__buttons {
                 .icon-button {
+                    @include icon-button;
                     border: none;
                     border-radius: 50%;
-                    padding: 0;
+                    padding: 8px;
+                    margin-left: 8px;
                 }
             }
         }
@@ -157,6 +165,17 @@
             &:hover { background: $text-tab-indicator-bg-hover-color }
         }
     }
+
+    &__relationship {
+        padding: 0;
+        height: auto;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
 }
 
 .account-role {

app/javascript/styles/mastodon-material-light/theme/button.scss

@@ -21,16 +21,23 @@
     &.inverted {
         color: $icon-button-color;
 
+        &.active { color: $icon-button-active-color }
+
         &:hover {
             color: $icon-button-hover-color;
             background-color: $icon-bg-hover-color;
         }
+
+        &:focus { background-color: transparent }
     }
 
     &.overlayed {
+        @include icon-button;
         border-radius: 50%;
         background: $media-icon-bg-color;
         color: $media-icon-color;
+        padding: 4px;
+        line-height: 20px !important;
     
         &:hover {
             background: $media-icon-bg-color;
@@ -76,38 +83,53 @@ label.icon-button {
     }
 }
 
-.button,
+.button {
-.button:active,
-.button:focus {
     background-color: $contained-button-color;
     border-radius: $button-radius;
-}
 
-.button:hover {
+    &:active,
-    @include shadow-2dp;
+    &:focus {
-    background-color: $contained-button-hover-color;
+        background-color: $contained-button-color;
-}
+        border-radius: $button-radius;
+    }
 
-.button.logo-button {
+    &:hover {
-    background: $contained-button-color;
+        @include shadow-2dp;
-    margin: 2px;
+        background-color: $contained-button-hover-color;
+    }
 
-    &:hover { background: $contained-button-hover-color }
+    &.logo-button {
+        background: $contained-button-color;
+        margin: 2px;
+    
+        &:hover { background: $contained-button-hover-color }
+    
+        .button--destructive:hover { background: $contained-button-hover-color }
+    }
 
-    .button--destructive:hover { background: $contained-button-hover-color }
+    &.button--block { margin: 8px 0 }
-}
 
-.button.button--block { margin: 8px 0 }
+    &.button-secondary {
+        color: $text-button-color;
+        border: none;
+        box-shadow: none;
+    
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+    }
 
-.button.confirmation-modal__cancel-button {
+    &.confirmation-modal__cancel-button {
-    box-shadow: none;
+        box-shadow: none;
-    background-color: transparent;
+        background-color: transparent;
-    margin: 0 8px;
+        margin: 0 8px;
-    color: $text-button-color;
+        color: $text-button-color;
-
+    
-    &:hover { background: $text-button-hover-color }
+        &:hover { background: $text-button-hover-color }
-
+    
-    &:focus { background: $text-button-focus-color }
+        &:focus { background: $text-button-focus-color }
+    }
 }
 
 .spoiler-button__overlay__label {

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

@@ -21,9 +21,10 @@
 .column-header {
     background: $top-bar-color;
     border-radius: $bar-radius;
+    height: 56px;
 
     > button {
-        padding: 16px 0 16px 16px;
+        padding: 16px;
         color: $top-bar-text-color;
     }
 
@@ -45,12 +46,13 @@
     &__buttons { height: 56px }
 
     &__button {
+        @include icon-button;
         background: $top-bar-color;
         color: $top-bar-icon-color;
-        margin: 8px 10px;
+        padding: 8px;
-        padding: 10px;
+        margin: 10px;
         border-radius: 50%;
-        font-size: 20px;
+        box-sizing: content-box;
 
         &.active {
             color: $top-bar-icon-active-color;
@@ -136,6 +138,7 @@
     color: $section-text-color;
     background: $bg-color;
     padding: 12px 16px;
+    margin-top: 8px;
     border-top: 1px solid $border-color;
 }
 
@@ -192,6 +195,8 @@
     padding: 16px;
 
     span { visibility: hidden }  // hide "back" string
+
+    &--slim-button { top: -54px }
 }
 
 .column-inline-form {
@@ -296,6 +301,7 @@
     &__wrapper {
         background: $bg-color;
         height: auto !important;
+        padding-bottom: 8px;
         border-bottom: 1px solid $border-color;
     }
 
@@ -321,6 +327,7 @@
         h4 {
             color: $section-text-color;
             padding: 12px 16px;
+            margin-top: 8px;
             border-top: 1px solid $border-color;
             border-bottom: none;
         }
@@ -384,15 +391,18 @@
 
     &__pagination {
         color: $ui-text-color;
-        padding: 8px 16px;
+        padding: 16px;
-        bottom: 8px;
+        bottom: 0;
 
         .icon-button {
-            font-size: 20px !important;
+            @include icon-button;
-            width: 20px !important;
+            padding: 8px;
-            height: 20px !important;
+            margin: 0 4px;
-            margin: 0 8px;
+            line-height: normal !important;
+            box-sizing: content-box;
         }
+
+        span { vertical-align: super }
     }
 }
 
@@ -401,6 +411,9 @@
 @include outlined-chip;
 
 .reactions-bar {
+    margin-top: 16px;
+    width: calc(100% - 72px);
+
     .emoji-button {
         color: $icon-button-color;
         font-size: 20px;
@@ -417,7 +430,10 @@
 
         &.active {
             background-color: $contained-chip-selected-color;
-            .reactions-bar__item__count { color: $ui-text-color }
+
+            .reactions-bar__item__count { color: $chip-selected-text-color }
+
+            &:hover { background-color: $contained-chip-selected-color }
         }
 
         &__emoji {
@@ -428,7 +444,7 @@
 
         &__count {
             font-size: 16px;
-            margin: 0 8px;
+            margin: 0 12px 0 8px;
             color: $secondary-text-color;
         }
 

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

@@ -121,7 +121,7 @@
         background-color: $card-bg-color;
         padding: 16px;
 
-        .fa { margin-right: 8px }
+        .fa { margin-right: 16px }
     }
 
     &__section {
@@ -148,6 +148,11 @@
         width: 36px !important;
         height: 36px !important;
         padding: 8px;
+
+        &.active {
+            color: $icon-hover-color;
+            background: $icon-bg-active-color;
+        }
     }
 }
 
@@ -156,6 +161,8 @@
     margin: 8px 0;
 }
 
+.flex-spacer { margin: 8px 0 }
+
 .dropdown-menu {
     @include shadow-8dp;
     background: $menu-bg-color;
@@ -233,6 +240,7 @@
             padding: 16px;
             border: 1px solid $border-color;
             border-radius: $card-radius;
+            box-shadow: none;
 
             a { color: $link-text-color }
         }
@@ -263,8 +271,7 @@
             padding: 8px;
 
             .icon-button {
-                width: 20px !important;
+                @include icon-button;
-                height: 20px !important;
                 padding: 8px;
             }
 
@@ -291,14 +298,12 @@
 
             .button.button-secondary {
                 box-shadow: none;
-                color: $outlined-button-color;
+                color: $text-button-color;
-                border-color: $outlined-button-color;
 
-                &:hover { background-color: $outlined-button-hover-color }
+                &:hover { background-color: $text-button-hover-color }
 
-                &:active { background-color: $outlined-button-active-color }
+                &:active,
-
+                &:focus { background-color: $text-button-focus-color }
-                &:focus { background-color: $outlined-button-color }
             }
 
             .poll__footer { border-top: none }
@@ -312,17 +317,32 @@
 
 
 .poll {
+    .button { margin-right: 8px }
+
+    li { margin-bottom: 0 }
+
     &__input {
-        border: 2px solid $control-border-color;
+        border: none;
         width: 20px;
         height: 20px;
         flex: 0 0 20px;
-        margin: 8px;
+        padding: 18px;
+        margin: 0 2px;
+        background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
+        
+        &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
 
-        &.checkbox { border-radius: 2px }
+        &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
 
-        &:focus,
+        &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-        &:hover { border: 2px solid $control-border-color }
+
+        &.checkbox {
+            border-radius: 2px;
+            border: 2px solid $control-border-color;
+            padding: 8px;
+            margin: 8px 10px;
+            background: none;
+        }
     }
 
     &__text input[type=text] {
@@ -334,12 +354,16 @@
         &:focus { border-color: $border-active-color }
     }
 
-    &__option input[type=text] {
+    &__option {
-        color: $primary-text-color;
+        padding: 16px 0 8px;
-        background: $text-field-bg-color;
+
-        border: none;
+        input[type=text] {
-        border-radius: 2px;
+            color: $primary-text-color;
-        padding: 8px 16px;
+            background: $text-field-bg-color;
+            border: none;
+            border-radius: 2px;
+            padding: 8px 16px;
+        }
     }
 
     &__chart {
@@ -444,7 +468,11 @@
         &-avatar { margin-right: 8px }
     }
 
-    &__content { color: $primary-text-color }
+    &__content {
+        color: $primary-text-color;
+
+        p { margin-bottom: 16px }
+    }
 }
 
 .attachment-list {

app/javascript/styles/mastodon-material-light/theme/containers.scss

@@ -0,0 +1,57 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.public-layout {
+    .header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        margin: 16px 0;
+
+        .brand:hover { background: $tab-indicator-bg-hover-color }
+
+        .nav-link,
+        .nav-link.optional {
+            color: $top-bar-text-color;
+
+            &:hover {
+                background: $tab-indicator-bg-hover-color;
+                text-decoration: none;
+            }
+        }
+
+        .nav-button {
+            background: transparent;
+            margin: 0;
+            border-radius: 0;
+
+            &:hover { background: $tab-indicator-bg-hover-color }
+        }
+
+        .detailed-status__meta { margin-top: 16px }
+    }
+
+    .detailed-status { padding: 16px }
+
+    .footer {
+        padding-top: 16px;
+        padding-bottom: 64px;
+        color: $ui-text-color;
+
+        h4 { color: $ui-text-color }
+
+        ul a { color: $secondary-text-color }
+
+        .grid .column-2 h4 a { color: $ui-text-color }
+
+        .brand {
+            svg { fill: $icon-color }
+
+            &:hover svg { fill: $icon-hover-color }
+        }
+    }
+}

app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss

@@ -69,13 +69,13 @@
         background: $menu-bg-color;
     }
 
-    &-category-label span {
+    &-category {
-        padding: 4px 6px;
+        &-label span {
-        background: $menu-bg-color;
+            padding: 4px 6px;
-    }
+            background: $menu-bg-color;
+        }
 
-    &-emoji:hover::before {
+        .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
-        background-color: $icon-bg-hover-color;
     }
 
     &-no-results { color: $secondary-text-color }

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

@@ -75,7 +75,8 @@
     &.fa-check,
     &.fa-quote-right,
     &.fa-upload,
-    &.fa-comments {
+    &.fa-comments,
+    &.fa-angle-right {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -143,6 +144,7 @@
     &.fa-quote-right::before { content: "format_quote" }
     &.fa-upload::before { content: "file_upload" }
     &.fa-comments::before { content: "forum" }
+    &.fa-angle-right::before { content: "chevron_right" }
 }
 
 // bookmark icon
@@ -170,17 +172,20 @@
 .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
 
 // boost icon
-button.icon-button i.fa-retweet,
+button.icon-button i.fa-retweet {
-button.icon-button i.fa-retweet:hover {
+    height: 20px;
-    height: 18px;
+    width: 20px;
-    width: 18px;
     transition: none;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+button.icon-button i.fa-retweet:hover {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
 }
 
 button.icon-button.disabled i.fa-retweet,
 button.icon-button.disabled i.fa-retweet:hover {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
 }
 
 // dropdown icon
@@ -199,7 +204,24 @@ button.icon-button.disabled i.fa-retweet:hover {
 .fa.fa-bell.column-header__icon.fa-fw,
 .fa.fa-home.column-header__icon.fa-fw,
 .fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom }
+.fa.fa-globe.column-header__icon.fa-fw,
+.fa.fa-bars.column-header__icon.fa-fw,
+.fa.fa-bookmark.column-header__icon.fa-fw,
+.fa.fa-address-book-o.column-header__icon.fa-fw,
+.fa.fa-envelope.column-header__icon.fa-fw,
+.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
+
+// top bar icons in single column mode
+.tabs-bar__link {
+    .fa.fa-home.fa-fw,
+    .fa.fa-bell.fa-fw,
+    .fa.fa-users.fa-fw,
+    .fa.fa-globe.fa-fw { vertical-align: text-bottom }
+}
+
+// getting-started and side bar icons
+.column-link .fa,
+.column-link--transparent .fa { vertical-align: text-bottom }
 
 // uploaded media icons align
 .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
@@ -208,4 +230,19 @@ button.icon-button.disabled i.fa-retweet:hover {
 }
 
 // search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
+.search-results__header .fa { vertical-align: text-bottom }
+
+// read more icon
+.status__content__read-more-button .fa { vertical-align: bottom }
+
+// status detail icon
+.detailed-status .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}
+
+// status scope
+.status__visibility-icon .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}

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

@@ -12,23 +12,25 @@
 }
 
 .media-modal__close {
-    align-content: center;
-
     &.icon-button {
         background: transparent;
         color: $media-icon-color;
-        text-align: center !important;
         font-size: 24px !important;
-        width: 48px !important;
+        width: 24px !important;
-        height: 48px !important;
+        height: 24px !important;
-        border: 12px;
+        padding: 8px;
+        box-sizing: content-box;
+        line-height: normal !important;
 
         &:hover {
             background: $media-icon-bg-hover-color;
             color: $media-icon-hover-color;
         }
 
-        .fa-fw { width: 24px }
+        .fa-fw {
+            width: 24px;
+            height: 24px;
+        }
     }
 }
 

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

@@ -10,7 +10,6 @@
     background: $card-bg-color;
     color: $ui-text-color;
     border-radius: $dialog-radius;
-    width: 300px;
 
     &__container {
         text-align: left;

app/javascript/styles/mastodon-material-light/theme/responsive.scss

@@ -39,6 +39,10 @@
     background: $floating-action-button-color;
     color: $floating-action-button-icon-color;
     font-size: 24px;
+    width: $fab-size;
+    height: $fab-size;
+    bottom: 16px;
+    right: 16px;
 
     &:hover { background: $floating-action-button-hover-color }
 
@@ -60,6 +64,11 @@
     }
 }
 
+// small size screen
+@media screen and (max-width: 415px) {
+    .public-layout { padding-top: 64px }
+}
+
 // middle size screen
 @media screen and (min-width: 415px) {
     .tabs-bar {
@@ -72,17 +81,22 @@
         }
     }
 
-    .columns-area__panels__main {
+    .columns-area__panels {
-        @include shadow-1dp;
+        &__main {
-        padding: 0;
+            @include shadow-1dp;
+            padding: 0;
+        }
+
+        &__pane { padding: 0 16px }
     }
 }
 
+//single column mode
 @media screen and (min-width: 631px) {
     .tabs-bar__link {
         &:hover {
             background: $tab-indicator-bg-hover-color;
-            border-bottom-color: $tab-bg-color;
+            border-bottom-color: transparent;
         }
 
         &:active,
@@ -90,5 +104,7 @@
             background: $tab-indicator-bg-focus-color;
             border-bottom-color: $tab-bg-color;
         }
+
+        &.active { border-bottom-color: $tab-indicator-active-color }
     }
 }

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

@@ -6,7 +6,7 @@
 
 
 .status {
-    padding: 12px 12px 12px 70px;
+    padding: 12px 12px 4px 70px;
     border-bottom: 1px solid $border-color;
 
     &__expand { width: 70px }
@@ -40,6 +40,8 @@
             &.unhandled-link { color: $link-text-color }
         }
 
+        p { margin-bottom: 16px }
+
         .status__content__spoiler-link {
             background: transparent;
 
@@ -69,9 +71,47 @@
     }
 
     &__action-bar {
-        &__counter__label {
+        margin-top: 4px;
-            font-size: 14px;
+
-            color: $info-text-color;
+        &__counter {
+            margin-right: 6px;
+
+            &__label {
+                font-size: 14px;
+                color: $info-text-color;
+            }
+        }
+    }
+
+    &__action-bar-button {
+        margin-right: 6px;
+
+        &.icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
+
+    &__action-bar-dropdown {
+        width: 36px !important;
+        height: 36px !important;
+        box-sizing: content-box;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &.active {
+                color: $icon-hover-color;
+                background: $icon-bg-active-color;
+            }
+
+            &:hover {
+                color:$icon-hover-color;
+                background: $icon-bg-hover-color;
+            }
         }
     }
 
@@ -154,6 +194,9 @@ a.status-card {
     &:hover { background-color: $card-bg-color }
 }
 
+.embed .status,
+.public-layout .status { padding: 16px 16px 16px 80px }
+
 // Detailed status in mobile
 .status.light {
     .status {
@@ -170,6 +213,8 @@ a.status-card {
     background: $card-bg-color;
     padding: 16px;
 
+    &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
+
     &__display-name {
         color: $secondary-text-color;
 
@@ -185,11 +230,28 @@ a.status-card {
         background: $card-bg-color;
         border-top: none;
         border-bottom: 1px solid $border-color;
-        padding: 12px 0;
+        padding: 8px 0;
+    }
+
+    &__action-bar-dropdown {
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &.active {
+                color: $icon-hover-color;
+                background: $icon-bg-active-color;
+            }
+        }
     }
 
     &__button {
-        .icon-button { font-size: 20px !important }
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
     }
 }
 
@@ -197,4 +259,22 @@ a.status-card {
 .display-name {
     &__html { color: $primary-text-color }
     &__account { color: $secondary-text-color }
-}
+}
+
+.activity-stream {
+    @include shadow-1dp;
+    margin-bottom: 16px;
+    border-radius: $card-radius;
+
+    .entry {
+        background: $card-bg-color;
+
+        &:first-child {
+            .detailed-status,
+            .load-more,
+            .status { border-radius: $card-radius $card-radius 0 0 }
+        }
+    }
+}
+
+.entry.entry-center { border-bottom: 1px solid $border-color }

app/javascript/styles/mastodon-material-light/theme/theme.scss

@@ -1,4 +1,10 @@
+/*
+* Mastodon Material 0.2.0
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
 @charset "UTF-8";
 
 
-@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
+@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';

app/javascript/styles/mastodon-material-light/theme/widgets.scss

@@ -0,0 +1,32 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.hero-widget {
+    @include shadow-2dp;
+    margin-bottom: 16px;
+
+    &__img {
+        border-radius: $card-radius $card-radius 0 0;
+        background: $card-bg-color;
+
+        img { border-radius: $card-radius $card-radius 0 0 }
+    }
+
+    &__text {
+        background: $card-bg-color;
+        padding: 16px;
+        color: $primary-text-color;
+        border-radius: 0 0 $card-radius $card-radius;
+    }
+}
+
+.endorsements-widget {
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+}
+
+.trends-widget h4 { color: $section-text-color }

app/javascript/styles/material-black.scss

@@ -1,9 +1,2 @@
-/*
-* Mastodon Material 0.2.0
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-
 @import 'application';
 @import 'material-black/loader';

app/javascript/styles/material-black/color/black.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #1e1e1e;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #121212;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: $icon-color;
 $top-bar-icon-hover-color: $icon-hover-color;
 $top-bar-icon-active-color: $primary-color;
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-black/color/mastodon-dark.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #42485a;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #393f4f;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#42485a, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-black/color/mastodon-light.scss

@@ -40,11 +40,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-black/color/plus-classic.scss

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-black/color/v1-dark.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
+$chip-selected-text-color: $primary-color;
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: #ffffff;
 $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
 $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-black/color/v1-light.scss

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-black/color/v2-dark.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: $icon-color;
 $top-bar-icon-hover-color: $icon-hover-color;
 $top-bar-icon-active-color: $primary-color;
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-black/color/v2-light.scss

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-black/layout/material-v1.scss

@@ -48,4 +48,8 @@ $outlined-chip: false;  // Material v1 styled contained chip
 
 
 // Button shadow
-$button-shadow: true;  // Material v1 styled colored button with shadow
+$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;

app/javascript/styles/material-black/layout/material-v2.scss

@@ -56,4 +56,9 @@ $outlined-chip: true;  // Material v2 styled outlined chip
 
 // Button shadow
 $button-shadow: false;  // Material v2 styled colored button without shadow
-//$button-shadow: true;  // Material v1 styled colored button with shadow
+//$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;  // Regular
+//$fab-size: 40px;  // Mini

app/javascript/styles/material-black/plugins/dense.scss

@@ -5,20 +5,21 @@
 
 
 .drawer {
-    &__tab { margin: 8px auto 8px }
+    &__header { height: 48px }
+
+    &__tab { margin: 6px auto 6px }
 }
 
 .column { margin: 10px 5px }
 
 .column-header {
+    height: 48px;
+
+    > button { padding: 12px 16px }
+    
     &__buttons { height: 48px }
 
-    &__button {
+    &__button { margin: 6px }
-        margin: 8px;
-        padding: 10px 8px;
-
-        .fa { vertical-align: text-top }
-    }
 }
 
 .column-subheading { padding: 8px 16px }
@@ -38,7 +39,7 @@
 }
 
 .status {
-    padding: 8px 8px 8px 66px;
+    padding: 8px 8px 4px 66px;
 
     &__expand { width: 66px }
 

app/javascript/styles/material-black/theme/_mixins.scss

@@ -45,7 +45,7 @@ $shadow-color-3: rgba(0,0,0,.12);
     @if $outlined-chip {
         .reactions-bar__item {
             background: $outlined-chip-color !important;
-            border: 1px solid $border-color !important;
+            border: 1px solid $outlined-chip-selected-border-color !important;
         
             &.active { background-color: $outlined-chip-selected-color !important }
         
@@ -61,6 +61,12 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin icon-button {
+    width: 20px !important;
+    height: 20px !important;
+    font-size: 20px !important;
+}
+
 // check background-image value
 @mixin bg-image {
     @if $bg-image == none {        

app/javascript/styles/material-black/theme/account.scss

@@ -6,6 +6,7 @@
 
 .account {
     border-bottom: 1px solid $border-color;
+    padding: 16px;
 
     .account__display-name,
     .account__display-name strong { color: $primary-text-color }
@@ -27,6 +28,11 @@
         }
     }
 
+    &__avatar-wrapper {
+        margin-left: 0;
+        margin-right: 16px;
+    }
+
     &__header {
         &__bar {
             background: $card-bg-color;
@@ -51,9 +57,11 @@
 
             &__buttons {
                 .icon-button {
+                    @include icon-button;
                     border: none;
                     border-radius: 50%;
-                    padding: 0;
+                    padding: 8px;
+                    margin-left: 8px;
                 }
             }
         }
@@ -157,6 +165,17 @@
             &:hover { background: $text-tab-indicator-bg-hover-color }
         }
     }
+
+    &__relationship {
+        padding: 0;
+        height: auto;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
 }
 
 .account-role {

app/javascript/styles/material-black/theme/button.scss

@@ -21,16 +21,23 @@
     &.inverted {
         color: $icon-button-color;
 
+        &.active { color: $icon-button-active-color }
+
         &:hover {
             color: $icon-button-hover-color;
             background-color: $icon-bg-hover-color;
         }
+
+        &:focus { background-color: transparent }
     }
 
     &.overlayed {
+        @include icon-button;
         border-radius: 50%;
         background: $media-icon-bg-color;
         color: $media-icon-color;
+        padding: 4px;
+        line-height: 20px !important;
     
         &:hover {
             background: $media-icon-bg-color;
@@ -76,38 +83,53 @@ label.icon-button {
     }
 }
 
-.button,
+.button {
-.button:active,
-.button:focus {
     background-color: $contained-button-color;
     border-radius: $button-radius;
-}
 
-.button:hover {
+    &:active,
-    @include shadow-2dp;
+    &:focus {
-    background-color: $contained-button-hover-color;
+        background-color: $contained-button-color;
-}
+        border-radius: $button-radius;
+    }
 
-.button.logo-button {
+    &:hover {
-    background: $contained-button-color;
+        @include shadow-2dp;
-    margin: 2px;
+        background-color: $contained-button-hover-color;
+    }
 
-    &:hover { background: $contained-button-hover-color }
+    &.logo-button {
+        background: $contained-button-color;
+        margin: 2px;
+    
+        &:hover { background: $contained-button-hover-color }
+    
+        .button--destructive:hover { background: $contained-button-hover-color }
+    }
 
-    .button--destructive:hover { background: $contained-button-hover-color }
+    &.button--block { margin: 8px 0 }
-}
 
-.button.button--block { margin: 8px 0 }
+    &.button-secondary {
+        color: $text-button-color;
+        border: none;
+        box-shadow: none;
+    
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+    }
 
-.button.confirmation-modal__cancel-button {
+    &.confirmation-modal__cancel-button {
-    box-shadow: none;
+        box-shadow: none;
-    background-color: transparent;
+        background-color: transparent;
-    margin: 0 8px;
+        margin: 0 8px;
-    color: $text-button-color;
+        color: $text-button-color;
-
+    
-    &:hover { background: $text-button-hover-color }
+        &:hover { background: $text-button-hover-color }
-
+    
-    &:focus { background: $text-button-focus-color }
+        &:focus { background: $text-button-focus-color }
+    }
 }
 
 .spoiler-button__overlay__label {

app/javascript/styles/material-black/theme/columns.scss

@@ -21,9 +21,10 @@
 .column-header {
     background: $top-bar-color;
     border-radius: $bar-radius;
+    height: 56px;
 
     > button {
-        padding: 16px 0 16px 16px;
+        padding: 16px;
         color: $top-bar-text-color;
     }
 
@@ -45,12 +46,13 @@
     &__buttons { height: 56px }
 
     &__button {
+        @include icon-button;
         background: $top-bar-color;
         color: $top-bar-icon-color;
-        margin: 8px 10px;
+        padding: 8px;
-        padding: 10px;
+        margin: 10px;
         border-radius: 50%;
-        font-size: 20px;
+        box-sizing: content-box;
 
         &.active {
             color: $top-bar-icon-active-color;
@@ -136,6 +138,7 @@
     color: $section-text-color;
     background: $bg-color;
     padding: 12px 16px;
+    margin-top: 8px;
     border-top: 1px solid $border-color;
 }
 
@@ -192,6 +195,8 @@
     padding: 16px;
 
     span { visibility: hidden }  // hide "back" string
+
+    &--slim-button { top: -54px }
 }
 
 .column-inline-form {
@@ -296,6 +301,7 @@
     &__wrapper {
         background: $bg-color;
         height: auto !important;
+        padding-bottom: 8px;
         border-bottom: 1px solid $border-color;
     }
 
@@ -321,6 +327,7 @@
         h4 {
             color: $section-text-color;
             padding: 12px 16px;
+            margin-top: 8px;
             border-top: 1px solid $border-color;
             border-bottom: none;
         }
@@ -384,15 +391,18 @@
 
     &__pagination {
         color: $ui-text-color;
-        padding: 8px 16px;
+        padding: 16px;
-        bottom: 8px;
+        bottom: 0;
 
         .icon-button {
-            font-size: 20px !important;
+            @include icon-button;
-            width: 20px !important;
+            padding: 8px;
-            height: 20px !important;
+            margin: 0 4px;
-            margin: 0 8px;
+            line-height: normal !important;
+            box-sizing: content-box;
         }
+
+        span { vertical-align: super }
     }
 }
 
@@ -401,6 +411,9 @@
 @include outlined-chip;
 
 .reactions-bar {
+    margin-top: 16px;
+    width: calc(100% - 72px);
+
     .emoji-button {
         color: $icon-button-color;
         font-size: 20px;
@@ -417,7 +430,10 @@
 
         &.active {
             background-color: $contained-chip-selected-color;
-            .reactions-bar__item__count { color: $ui-text-color }
+
+            .reactions-bar__item__count { color: $chip-selected-text-color }
+
+            &:hover { background-color: $contained-chip-selected-color }
         }
 
         &__emoji {
@@ -428,7 +444,7 @@
 
         &__count {
             font-size: 16px;
-            margin: 0 8px;
+            margin: 0 12px 0 8px;
             color: $secondary-text-color;
         }
 

app/javascript/styles/material-black/theme/components.scss

@@ -121,7 +121,7 @@
         background-color: $card-bg-color;
         padding: 16px;
 
-        .fa { margin-right: 8px }
+        .fa { margin-right: 16px }
     }
 
     &__section {
@@ -148,6 +148,11 @@
         width: 36px !important;
         height: 36px !important;
         padding: 8px;
+
+        &.active {
+            color: $icon-hover-color;
+            background: $icon-bg-active-color;
+        }
     }
 }
 
@@ -156,6 +161,8 @@
     margin: 8px 0;
 }
 
+.flex-spacer { margin: 8px 0 }
+
 .dropdown-menu {
     @include shadow-8dp;
     background: $menu-bg-color;
@@ -233,6 +240,7 @@
             padding: 16px;
             border: 1px solid $border-color;
             border-radius: $card-radius;
+            box-shadow: none;
 
             a { color: $link-text-color }
         }
@@ -263,8 +271,7 @@
             padding: 8px;
 
             .icon-button {
-                width: 20px !important;
+                @include icon-button;
-                height: 20px !important;
                 padding: 8px;
             }
 
@@ -291,14 +298,12 @@
 
             .button.button-secondary {
                 box-shadow: none;
-                color: $outlined-button-color;
+                color: $text-button-color;
-                border-color: $outlined-button-color;
 
-                &:hover { background-color: $outlined-button-hover-color }
+                &:hover { background-color: $text-button-hover-color }
 
-                &:active { background-color: $outlined-button-active-color }
+                &:active,
-
+                &:focus { background-color: $text-button-focus-color }
-                &:focus { background-color: $outlined-button-color }
             }
 
             .poll__footer { border-top: none }
@@ -312,17 +317,32 @@
 
 
 .poll {
+    .button { margin-right: 8px }
+
+    li { margin-bottom: 0 }
+
     &__input {
-        border: 2px solid $control-border-color;
+        border: none;
         width: 20px;
         height: 20px;
         flex: 0 0 20px;
-        margin: 8px;
+        padding: 18px;
+        margin: 0 2px;
+        background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
+        
+        &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
 
-        &.checkbox { border-radius: 2px }
+        &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
 
-        &:focus,
+        &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-        &:hover { border: 2px solid $control-border-color }
+
+        &.checkbox {
+            border-radius: 2px;
+            border: 2px solid $control-border-color;
+            padding: 8px;
+            margin: 8px 10px;
+            background: none;
+        }
     }
 
     &__text input[type=text] {
@@ -334,12 +354,16 @@
         &:focus { border-color: $border-active-color }
     }
 
-    &__option input[type=text] {
+    &__option {
-        color: $primary-text-color;
+        padding: 16px 0 8px;
-        background: $text-field-bg-color;
+
-        border: none;
+        input[type=text] {
-        border-radius: 2px;
+            color: $primary-text-color;
-        padding: 8px 16px;
+            background: $text-field-bg-color;
+            border: none;
+            border-radius: 2px;
+            padding: 8px 16px;
+        }
     }
 
     &__chart {
@@ -444,7 +468,11 @@
         &-avatar { margin-right: 8px }
     }
 
-    &__content { color: $primary-text-color }
+    &__content {
+        color: $primary-text-color;
+
+        p { margin-bottom: 16px }
+    }
 }
 
 .attachment-list {

app/javascript/styles/material-black/theme/containers.scss

@@ -0,0 +1,57 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.public-layout {
+    .header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        margin: 16px 0;
+
+        .brand:hover { background: $tab-indicator-bg-hover-color }
+
+        .nav-link,
+        .nav-link.optional {
+            color: $top-bar-text-color;
+
+            &:hover {
+                background: $tab-indicator-bg-hover-color;
+                text-decoration: none;
+            }
+        }
+
+        .nav-button {
+            background: transparent;
+            margin: 0;
+            border-radius: 0;
+
+            &:hover { background: $tab-indicator-bg-hover-color }
+        }
+
+        .detailed-status__meta { margin-top: 16px }
+    }
+
+    .detailed-status { padding: 16px }
+
+    .footer {
+        padding-top: 16px;
+        padding-bottom: 64px;
+        color: $ui-text-color;
+
+        h4 { color: $ui-text-color }
+
+        ul a { color: $secondary-text-color }
+
+        .grid .column-2 h4 a { color: $ui-text-color }
+
+        .brand {
+            svg { fill: $icon-color }
+
+            &:hover svg { fill: $icon-hover-color }
+        }
+    }
+}

app/javascript/styles/material-black/theme/emoji-picker.scss

@@ -69,13 +69,13 @@
         background: $menu-bg-color;
     }
 
-    &-category-label span {
+    &-category {
-        padding: 4px 6px;
+        &-label span {
-        background: $menu-bg-color;
+            padding: 4px 6px;
-    }
+            background: $menu-bg-color;
+        }
 
-    &-emoji:hover::before {
+        .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
-        background-color: $icon-bg-hover-color;
     }
 
     &-no-results { color: $secondary-text-color }

app/javascript/styles/material-black/theme/material-icons.scss

@@ -75,7 +75,8 @@
     &.fa-check,
     &.fa-quote-right,
     &.fa-upload,
-    &.fa-comments {
+    &.fa-comments,
+    &.fa-angle-right {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -143,6 +144,7 @@
     &.fa-quote-right::before { content: "format_quote" }
     &.fa-upload::before { content: "file_upload" }
     &.fa-comments::before { content: "forum" }
+    &.fa-angle-right::before { content: "chevron_right" }
 }
 
 // bookmark icon
@@ -170,17 +172,20 @@
 .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
 
 // boost icon
-button.icon-button i.fa-retweet,
+button.icon-button i.fa-retweet {
-button.icon-button i.fa-retweet:hover {
+    height: 20px;
-    height: 18px;
+    width: 20px;
-    width: 18px;
     transition: none;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+button.icon-button i.fa-retweet:hover {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
 }
 
 button.icon-button.disabled i.fa-retweet,
 button.icon-button.disabled i.fa-retweet:hover {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
 }
 
 // dropdown icon
@@ -199,7 +204,24 @@ button.icon-button.disabled i.fa-retweet:hover {
 .fa.fa-bell.column-header__icon.fa-fw,
 .fa.fa-home.column-header__icon.fa-fw,
 .fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom }
+.fa.fa-globe.column-header__icon.fa-fw,
+.fa.fa-bars.column-header__icon.fa-fw,
+.fa.fa-bookmark.column-header__icon.fa-fw,
+.fa.fa-address-book-o.column-header__icon.fa-fw,
+.fa.fa-envelope.column-header__icon.fa-fw,
+.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
+
+// top bar icons in single column mode
+.tabs-bar__link {
+    .fa.fa-home.fa-fw,
+    .fa.fa-bell.fa-fw,
+    .fa.fa-users.fa-fw,
+    .fa.fa-globe.fa-fw { vertical-align: text-bottom }
+}
+
+// getting-started and side bar icons
+.column-link .fa,
+.column-link--transparent .fa { vertical-align: text-bottom }
 
 // uploaded media icons align
 .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
@@ -208,4 +230,19 @@ button.icon-button.disabled i.fa-retweet:hover {
 }
 
 // search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
+.search-results__header .fa { vertical-align: text-bottom }
+
+// read more icon
+.status__content__read-more-button .fa { vertical-align: bottom }
+
+// status detail icon
+.detailed-status .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}
+
+// status scope
+.status__visibility-icon .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}

app/javascript/styles/material-black/theme/media.scss

@@ -12,23 +12,25 @@
 }
 
 .media-modal__close {
-    align-content: center;
-
     &.icon-button {
         background: transparent;
         color: $media-icon-color;
-        text-align: center !important;
         font-size: 24px !important;
-        width: 48px !important;
+        width: 24px !important;
-        height: 48px !important;
+        height: 24px !important;
-        border: 12px;
+        padding: 8px;
+        box-sizing: content-box;
+        line-height: normal !important;
 
         &:hover {
             background: $media-icon-bg-hover-color;
             color: $media-icon-hover-color;
         }
 
-        .fa-fw { width: 24px }
+        .fa-fw {
+            width: 24px;
+            height: 24px;
+        }
     }
 }
 

app/javascript/styles/material-black/theme/modal.scss

@@ -10,7 +10,6 @@
     background: $card-bg-color;
     color: $ui-text-color;
     border-radius: $dialog-radius;
-    width: 300px;
 
     &__container {
         text-align: left;

app/javascript/styles/material-black/theme/responsive.scss

@@ -39,6 +39,10 @@
     background: $floating-action-button-color;
     color: $floating-action-button-icon-color;
     font-size: 24px;
+    width: $fab-size;
+    height: $fab-size;
+    bottom: 16px;
+    right: 16px;
 
     &:hover { background: $floating-action-button-hover-color }
 
@@ -60,6 +64,11 @@
     }
 }
 
+// small size screen
+@media screen and (max-width: 415px) {
+    .public-layout { padding-top: 64px }
+}
+
 // middle size screen
 @media screen and (min-width: 415px) {
     .tabs-bar {
@@ -72,17 +81,22 @@
         }
     }
 
-    .columns-area__panels__main {
+    .columns-area__panels {
-        @include shadow-1dp;
+        &__main {
-        padding: 0;
+            @include shadow-1dp;
+            padding: 0;
+        }
+
+        &__pane { padding: 0 16px }
     }
 }
 
+//single column mode
 @media screen and (min-width: 631px) {
     .tabs-bar__link {
         &:hover {
             background: $tab-indicator-bg-hover-color;
-            border-bottom-color: $tab-bg-color;
+            border-bottom-color: transparent;
         }
 
         &:active,
@@ -90,5 +104,7 @@
             background: $tab-indicator-bg-focus-color;
             border-bottom-color: $tab-bg-color;
         }
+
+        &.active { border-bottom-color: $tab-indicator-active-color }
     }
 }

app/javascript/styles/material-black/theme/statuses.scss

@@ -6,7 +6,7 @@
 
 
 .status {
-    padding: 12px 12px 12px 70px;
+    padding: 12px 12px 4px 70px;
     border-bottom: 1px solid $border-color;
 
     &__expand { width: 70px }
@@ -40,6 +40,8 @@
             &.unhandled-link { color: $link-text-color }
         }
 
+        p { margin-bottom: 16px }
+
         .status__content__spoiler-link {
             background: transparent;
 
@@ -69,9 +71,47 @@
     }
 
     &__action-bar {
-        &__counter__label {
+        margin-top: 4px;
-            font-size: 14px;
+
-            color: $info-text-color;
+        &__counter {
+            margin-right: 6px;
+
+            &__label {
+                font-size: 14px;
+                color: $info-text-color;
+            }
+        }
+    }
+
+    &__action-bar-button {
+        margin-right: 6px;
+
+        &.icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
+
+    &__action-bar-dropdown {
+        width: 36px !important;
+        height: 36px !important;
+        box-sizing: content-box;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &.active {
+                color: $icon-hover-color;
+                background: $icon-bg-active-color;
+            }
+
+            &:hover {
+                color:$icon-hover-color;
+                background: $icon-bg-hover-color;
+            }
         }
     }
 
@@ -154,6 +194,9 @@ a.status-card {
     &:hover { background-color: $card-bg-color }
 }
 
+.embed .status,
+.public-layout .status { padding: 16px 16px 16px 80px }
+
 // Detailed status in mobile
 .status.light {
     .status {
@@ -170,6 +213,8 @@ a.status-card {
     background: $card-bg-color;
     padding: 16px;
 
+    &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
+
     &__display-name {
         color: $secondary-text-color;
 
@@ -185,11 +230,28 @@ a.status-card {
         background: $card-bg-color;
         border-top: none;
         border-bottom: 1px solid $border-color;
-        padding: 12px 0;
+        padding: 8px 0;
+    }
+
+    &__action-bar-dropdown {
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &.active {
+                color: $icon-hover-color;
+                background: $icon-bg-active-color;
+            }
+        }
     }
 
     &__button {
-        .icon-button { font-size: 20px !important }
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
     }
 }
 
@@ -197,4 +259,22 @@ a.status-card {
 .display-name {
     &__html { color: $primary-text-color }
     &__account { color: $secondary-text-color }
-}
+}
+
+.activity-stream {
+    @include shadow-1dp;
+    margin-bottom: 16px;
+    border-radius: $card-radius;
+
+    .entry {
+        background: $card-bg-color;
+
+        &:first-child {
+            .detailed-status,
+            .load-more,
+            .status { border-radius: $card-radius $card-radius 0 0 }
+        }
+    }
+}
+
+.entry.entry-center { border-bottom: 1px solid $border-color }

app/javascript/styles/material-black/theme/theme.scss

@@ -1,4 +1,10 @@
+/*
+* Mastodon Material 0.2.0
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
 @charset "UTF-8";
 
 
-@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
+@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';

app/javascript/styles/material-black/theme/widgets.scss

@@ -0,0 +1,32 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.hero-widget {
+    @include shadow-2dp;
+    margin-bottom: 16px;
+
+    &__img {
+        border-radius: $card-radius $card-radius 0 0;
+        background: $card-bg-color;
+
+        img { border-radius: $card-radius $card-radius 0 0 }
+    }
+
+    &__text {
+        background: $card-bg-color;
+        padding: 16px;
+        color: $primary-text-color;
+        border-radius: 0 0 $card-radius $card-radius;
+    }
+}
+
+.endorsements-widget {
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+}
+
+.trends-widget h4 { color: $section-text-color }

app/javascript/styles/material-dark.scss

@@ -1,9 +1,2 @@
-/*
-* Mastodon Material 0.2.0
-* Author: Rintan, Genbu Project
-* Copyright (C) 2020 Rintan, Genbu Project
-*/
-
-
 @import 'application';
 @import 'material-dark/loader';

app/javascript/styles/material-dark/color/black.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #1e1e1e;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #121212;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: $icon-color;
 $top-bar-icon-hover-color: $icon-hover-color;
 $top-bar-icon-active-color: $primary-color;
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-dark/color/mastodon-dark.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #42485a;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #393f4f;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#42485a, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

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

@@ -40,11 +40,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-dark/color/plus-classic.scss

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-dark/color/v1-dark.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
+$chip-selected-text-color: $primary-color;
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: #ffffff;
 $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
 $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
@@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-dark/color/v1-light.scss

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-dark/color/v2-dark.scss

@@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#2e2e2e, 0.2);
@@ -56,10 +58,10 @@ $badge-color: $primary-color;
 
 // Icon color
 $icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
+$icon-hover-color: #ffffff;
 $icon-bg-hover-color: transparentize(#ffffff, 0.8);
 $icon-bg-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
+$disabled-icon-color: darken($icon-color, 16%);
 $top-bar-icon-color: $icon-color;
 $top-bar-icon-hover-color: $icon-hover-color;
 $top-bar-icon-active-color: $primary-color;
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-dark/color/v2-light.scss

@@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
 $contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
 $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
 
 // Relationship tag color
 $relationship-tag-color: transparentize(#e0e0e0, 0.2);
@@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
 $media-icon-hover-color: transparentize(#ffffff, 0.2);
 $media-icon-bg-color: transparentize(#000000, 0.5);
 $media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
 $control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 // Button color
 $icon-button-color: $icon-color;

app/javascript/styles/material-dark/layout/material-v1.scss

@@ -48,4 +48,8 @@ $outlined-chip: false;  // Material v1 styled contained chip
 
 
 // Button shadow
-$button-shadow: true;  // Material v1 styled colored button with shadow
+$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;

app/javascript/styles/material-dark/layout/material-v2.scss

@@ -56,4 +56,9 @@ $outlined-chip: true;  // Material v2 styled outlined chip
 
 // Button shadow
 $button-shadow: false;  // Material v2 styled colored button without shadow
-//$button-shadow: true;  // Material v1 styled colored button with shadow
+//$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;  // Regular
+//$fab-size: 40px;  // Mini

app/javascript/styles/material-dark/plugins/dense.scss

@@ -5,20 +5,21 @@
 
 
 .drawer {
-    &__tab { margin: 8px auto 8px }
+    &__header { height: 48px }
+
+    &__tab { margin: 6px auto 6px }
 }
 
 .column { margin: 10px 5px }
 
 .column-header {
+    height: 48px;
+
+    > button { padding: 12px 16px }
+    
     &__buttons { height: 48px }
 
-    &__button {
+    &__button { margin: 6px }
-        margin: 8px;
-        padding: 10px 8px;
-
-        .fa { vertical-align: text-top }
-    }
 }
 
 .column-subheading { padding: 8px 16px }
@@ -38,7 +39,7 @@
 }
 
 .status {
-    padding: 8px 8px 8px 66px;
+    padding: 8px 8px 4px 66px;
 
     &__expand { width: 66px }
 

app/javascript/styles/material-dark/theme/_mixins.scss

@@ -45,7 +45,7 @@ $shadow-color-3: rgba(0,0,0,.12);
     @if $outlined-chip {
         .reactions-bar__item {
             background: $outlined-chip-color !important;
-            border: 1px solid $border-color !important;
+            border: 1px solid $outlined-chip-selected-border-color !important;
         
             &.active { background-color: $outlined-chip-selected-color !important }
         
@@ -61,6 +61,12 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin icon-button {
+    width: 20px !important;
+    height: 20px !important;
+    font-size: 20px !important;
+}
+
 // check background-image value
 @mixin bg-image {
     @if $bg-image == none {        

app/javascript/styles/material-dark/theme/account.scss

@@ -6,6 +6,7 @@
 
 .account {
     border-bottom: 1px solid $border-color;
+    padding: 16px;
 
     .account__display-name,
     .account__display-name strong { color: $primary-text-color }
@@ -27,6 +28,11 @@
         }
     }
 
+    &__avatar-wrapper {
+        margin-left: 0;
+        margin-right: 16px;
+    }
+
     &__header {
         &__bar {
             background: $card-bg-color;
@@ -51,9 +57,11 @@
 
             &__buttons {
                 .icon-button {
+                    @include icon-button;
                     border: none;
                     border-radius: 50%;
-                    padding: 0;
+                    padding: 8px;
+                    margin-left: 8px;
                 }
             }
         }
@@ -157,6 +165,17 @@
             &:hover { background: $text-tab-indicator-bg-hover-color }
         }
     }
+
+    &__relationship {
+        padding: 0;
+        height: auto;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
 }
 
 .account-role {

app/javascript/styles/material-dark/theme/button.scss

@@ -21,16 +21,23 @@
     &.inverted {
         color: $icon-button-color;
 
+        &.active { color: $icon-button-active-color }
+
         &:hover {
             color: $icon-button-hover-color;
             background-color: $icon-bg-hover-color;
         }
+
+        &:focus { background-color: transparent }
     }
 
     &.overlayed {
+        @include icon-button;
         border-radius: 50%;
         background: $media-icon-bg-color;
         color: $media-icon-color;
+        padding: 4px;
+        line-height: 20px !important;
     
         &:hover {
             background: $media-icon-bg-color;
@@ -76,38 +83,53 @@ label.icon-button {
     }
 }
 
-.button,
+.button {
-.button:active,
-.button:focus {
     background-color: $contained-button-color;
     border-radius: $button-radius;
-}
 
-.button:hover {
+    &:active,
-    @include shadow-2dp;
+    &:focus {
-    background-color: $contained-button-hover-color;
+        background-color: $contained-button-color;
-}
+        border-radius: $button-radius;
+    }
 
-.button.logo-button {
+    &:hover {
-    background: $contained-button-color;
+        @include shadow-2dp;
-    margin: 2px;
+        background-color: $contained-button-hover-color;
+    }
 
-    &:hover { background: $contained-button-hover-color }
+    &.logo-button {
+        background: $contained-button-color;
+        margin: 2px;
+    
+        &:hover { background: $contained-button-hover-color }
+    
+        .button--destructive:hover { background: $contained-button-hover-color }
+    }
 
-    .button--destructive:hover { background: $contained-button-hover-color }
+    &.button--block { margin: 8px 0 }
-}
 
-.button.button--block { margin: 8px 0 }
+    &.button-secondary {
+        color: $text-button-color;
+        border: none;
+        box-shadow: none;
+    
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+    }
 
-.button.confirmation-modal__cancel-button {
+    &.confirmation-modal__cancel-button {
-    box-shadow: none;
+        box-shadow: none;
-    background-color: transparent;
+        background-color: transparent;
-    margin: 0 8px;
+        margin: 0 8px;
-    color: $text-button-color;
+        color: $text-button-color;
-
+    
-    &:hover { background: $text-button-hover-color }
+        &:hover { background: $text-button-hover-color }
-
+    
-    &:focus { background: $text-button-focus-color }
+        &:focus { background: $text-button-focus-color }
+    }
 }
 
 .spoiler-button__overlay__label {

app/javascript/styles/material-dark/theme/columns.scss

@@ -21,9 +21,10 @@
 .column-header {
     background: $top-bar-color;
     border-radius: $bar-radius;
+    height: 56px;
 
     > button {
-        padding: 16px 0 16px 16px;
+        padding: 16px;
         color: $top-bar-text-color;
     }
 
@@ -45,12 +46,13 @@
     &__buttons { height: 56px }
 
     &__button {
+        @include icon-button;
         background: $top-bar-color;
         color: $top-bar-icon-color;
-        margin: 8px 10px;
+        padding: 8px;
-        padding: 10px;
+        margin: 10px;
         border-radius: 50%;
-        font-size: 20px;
+        box-sizing: content-box;
 
         &.active {
             color: $top-bar-icon-active-color;
@@ -136,6 +138,7 @@
     color: $section-text-color;
     background: $bg-color;
     padding: 12px 16px;
+    margin-top: 8px;
     border-top: 1px solid $border-color;
 }
 
@@ -192,6 +195,8 @@
     padding: 16px;
 
     span { visibility: hidden }  // hide "back" string
+
+    &--slim-button { top: -54px }
 }
 
 .column-inline-form {
@@ -296,6 +301,7 @@
     &__wrapper {
         background: $bg-color;
         height: auto !important;
+        padding-bottom: 8px;
         border-bottom: 1px solid $border-color;
     }
 
@@ -321,6 +327,7 @@
         h4 {
             color: $section-text-color;
             padding: 12px 16px;
+            margin-top: 8px;
             border-top: 1px solid $border-color;
             border-bottom: none;
         }
@@ -384,15 +391,18 @@
 
     &__pagination {
         color: $ui-text-color;
-        padding: 8px 16px;
+        padding: 16px;
-        bottom: 8px;
+        bottom: 0;
 
         .icon-button {
-            font-size: 20px !important;
+            @include icon-button;
-            width: 20px !important;
+            padding: 8px;
-            height: 20px !important;
+            margin: 0 4px;
-            margin: 0 8px;
+            line-height: normal !important;
+            box-sizing: content-box;
         }
+
+        span { vertical-align: super }
     }
 }
 
@@ -401,6 +411,9 @@
 @include outlined-chip;
 
 .reactions-bar {
+    margin-top: 16px;
+    width: calc(100% - 72px);
+
     .emoji-button {
         color: $icon-button-color;
         font-size: 20px;
@@ -417,7 +430,10 @@
 
         &.active {
             background-color: $contained-chip-selected-color;
-            .reactions-bar__item__count { color: $ui-text-color }
+
+            .reactions-bar__item__count { color: $chip-selected-text-color }
+
+            &:hover { background-color: $contained-chip-selected-color }
         }
 
         &__emoji {
@@ -428,7 +444,7 @@
 
         &__count {
             font-size: 16px;
-            margin: 0 8px;
+            margin: 0 12px 0 8px;
             color: $secondary-text-color;
         }
 

app/javascript/styles/material-dark/theme/components.scss

@@ -121,7 +121,7 @@
         background-color: $card-bg-color;
         padding: 16px;
 
-        .fa { margin-right: 8px }
+        .fa { margin-right: 16px }
     }
 
     &__section {
@@ -148,6 +148,11 @@
         width: 36px !important;
         height: 36px !important;
         padding: 8px;
+
+        &.active {
+            color: $icon-hover-color;
+            background: $icon-bg-active-color;
+        }
     }
 }
 
@@ -156,6 +161,8 @@
     margin: 8px 0;
 }
 
+.flex-spacer { margin: 8px 0 }
+
 .dropdown-menu {
     @include shadow-8dp;
     background: $menu-bg-color;
@@ -233,6 +240,7 @@
             padding: 16px;
             border: 1px solid $border-color;
             border-radius: $card-radius;
+            box-shadow: none;
 
             a { color: $link-text-color }
         }
@@ -263,8 +271,7 @@
             padding: 8px;
 
             .icon-button {
-                width: 20px !important;
+                @include icon-button;
-                height: 20px !important;
                 padding: 8px;
             }
 
@@ -291,14 +298,12 @@
 
             .button.button-secondary {
                 box-shadow: none;
-                color: $outlined-button-color;
+                color: $text-button-color;
-                border-color: $outlined-button-color;
 
-                &:hover { background-color: $outlined-button-hover-color }
+                &:hover { background-color: $text-button-hover-color }
 
-                &:active { background-color: $outlined-button-active-color }
+                &:active,
-
+                &:focus { background-color: $text-button-focus-color }
-                &:focus { background-color: $outlined-button-color }
             }
 
             .poll__footer { border-top: none }
@@ -312,17 +317,32 @@
 
 
 .poll {
+    .button { margin-right: 8px }
+
+    li { margin-bottom: 0 }
+
     &__input {
-        border: 2px solid $control-border-color;
+        border: none;
         width: 20px;
         height: 20px;
         flex: 0 0 20px;
-        margin: 8px;
+        padding: 18px;
+        margin: 0 2px;
+        background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
+        
+        &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
 
-        &.checkbox { border-radius: 2px }
+        &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
 
-        &:focus,
+        &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
-        &:hover { border: 2px solid $control-border-color }
+
+        &.checkbox {
+            border-radius: 2px;
+            border: 2px solid $control-border-color;
+            padding: 8px;
+            margin: 8px 10px;
+            background: none;
+        }
     }
 
     &__text input[type=text] {
@@ -334,12 +354,16 @@
         &:focus { border-color: $border-active-color }
     }
 
-    &__option input[type=text] {
+    &__option {
-        color: $primary-text-color;
+        padding: 16px 0 8px;
-        background: $text-field-bg-color;
+
-        border: none;
+        input[type=text] {
-        border-radius: 2px;
+            color: $primary-text-color;
-        padding: 8px 16px;
+            background: $text-field-bg-color;
+            border: none;
+            border-radius: 2px;
+            padding: 8px 16px;
+        }
     }
 
     &__chart {
@@ -444,7 +468,11 @@
         &-avatar { margin-right: 8px }
     }
 
-    &__content { color: $primary-text-color }
+    &__content {
+        color: $primary-text-color;
+
+        p { margin-bottom: 16px }
+    }
 }
 
 .attachment-list {

app/javascript/styles/material-dark/theme/containers.scss

@@ -0,0 +1,57 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.public-layout {
+    .header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        margin: 16px 0;
+
+        .brand:hover { background: $tab-indicator-bg-hover-color }
+
+        .nav-link,
+        .nav-link.optional {
+            color: $top-bar-text-color;
+
+            &:hover {
+                background: $tab-indicator-bg-hover-color;
+                text-decoration: none;
+            }
+        }
+
+        .nav-button {
+            background: transparent;
+            margin: 0;
+            border-radius: 0;
+
+            &:hover { background: $tab-indicator-bg-hover-color }
+        }
+
+        .detailed-status__meta { margin-top: 16px }
+    }
+
+    .detailed-status { padding: 16px }
+
+    .footer {
+        padding-top: 16px;
+        padding-bottom: 64px;
+        color: $ui-text-color;
+
+        h4 { color: $ui-text-color }
+
+        ul a { color: $secondary-text-color }
+
+        .grid .column-2 h4 a { color: $ui-text-color }
+
+        .brand {
+            svg { fill: $icon-color }
+
+            &:hover svg { fill: $icon-hover-color }
+        }
+    }
+}

app/javascript/styles/material-dark/theme/emoji-picker.scss

@@ -69,13 +69,13 @@
         background: $menu-bg-color;
     }
 
-    &-category-label span {
+    &-category {
-        padding: 4px 6px;
+        &-label span {
-        background: $menu-bg-color;
+            padding: 4px 6px;
-    }
+            background: $menu-bg-color;
+        }
 
-    &-emoji:hover::before {
+        .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
-        background-color: $icon-bg-hover-color;
     }
 
     &-no-results { color: $secondary-text-color }

app/javascript/styles/material-dark/theme/material-icons.scss

@@ -75,7 +75,8 @@
     &.fa-check,
     &.fa-quote-right,
     &.fa-upload,
-    &.fa-comments {
+    &.fa-comments,
+    &.fa-angle-right {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -143,6 +144,7 @@
     &.fa-quote-right::before { content: "format_quote" }
     &.fa-upload::before { content: "file_upload" }
     &.fa-comments::before { content: "forum" }
+    &.fa-angle-right::before { content: "chevron_right" }
 }
 
 // bookmark icon
@@ -170,17 +172,20 @@
 .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
 
 // boost icon
-button.icon-button i.fa-retweet,
+button.icon-button i.fa-retweet {
-button.icon-button i.fa-retweet:hover {
+    height: 20px;
-    height: 18px;
+    width: 20px;
-    width: 18px;
     transition: none;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+button.icon-button i.fa-retweet:hover {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
 }
 
 button.icon-button.disabled i.fa-retweet,
 button.icon-button.disabled i.fa-retweet:hover {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
 }
 
 // dropdown icon
@@ -199,7 +204,24 @@ button.icon-button.disabled i.fa-retweet:hover {
 .fa.fa-bell.column-header__icon.fa-fw,
 .fa.fa-home.column-header__icon.fa-fw,
 .fa.fa-users.column-header__icon.fa-fw,
-.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom }
+.fa.fa-globe.column-header__icon.fa-fw,
+.fa.fa-bars.column-header__icon.fa-fw,
+.fa.fa-bookmark.column-header__icon.fa-fw,
+.fa.fa-address-book-o.column-header__icon.fa-fw,
+.fa.fa-envelope.column-header__icon.fa-fw,
+.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
+
+// top bar icons in single column mode
+.tabs-bar__link {
+    .fa.fa-home.fa-fw,
+    .fa.fa-bell.fa-fw,
+    .fa.fa-users.fa-fw,
+    .fa.fa-globe.fa-fw { vertical-align: text-bottom }
+}
+
+// getting-started and side bar icons
+.column-link .fa,
+.column-link--transparent .fa { vertical-align: text-bottom }
 
 // uploaded media icons align
 .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
@@ -208,4 +230,19 @@ button.icon-button.disabled i.fa-retweet:hover {
 }
 
 // search results icons align
-.search-results__header .fa { vertical-align: text-bottom }
+.search-results__header .fa { vertical-align: text-bottom }
+
+// read more icon
+.status__content__read-more-button .fa { vertical-align: bottom }
+
+// status detail icon
+.detailed-status .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}
+
+// status scope
+.status__visibility-icon .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}

app/javascript/styles/material-dark/theme/media.scss

@@ -12,23 +12,25 @@
 }
 
 .media-modal__close {
-    align-content: center;
-
     &.icon-button {
         background: transparent;
         color: $media-icon-color;
-        text-align: center !important;
         font-size: 24px !important;
-        width: 48px !important;
+        width: 24px !important;
-        height: 48px !important;
+        height: 24px !important;
-        border: 12px;
+        padding: 8px;
+        box-sizing: content-box;
+        line-height: normal !important;
 
         &:hover {
             background: $media-icon-bg-hover-color;
             color: $media-icon-hover-color;
         }
 
-        .fa-fw { width: 24px }
+        .fa-fw {
+            width: 24px;
+            height: 24px;
+        }
     }
 }
 

app/javascript/styles/material-dark/theme/modal.scss

@@ -10,7 +10,6 @@
     background: $card-bg-color;
     color: $ui-text-color;
     border-radius: $dialog-radius;
-    width: 300px;
 
     &__container {
         text-align: left;