add y-zu theme

fix some bugs

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;

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

@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;

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

@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 //@import 'plugins/cards';
 //@import 'plugins/dense';
 //@import 'plugins/plus';

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

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}

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

@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {

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

@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;

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

@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;

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

@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {

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

@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 

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

@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
+}
+
+.emoji-button { padding: 8px }

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

@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;

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

@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;
 

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;

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

@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;

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

@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 //@import 'plugins/cards';
 //@import 'plugins/dense';
 //@import 'plugins/plus';

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

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}

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

@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {

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

@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;

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

@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;

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

@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {

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

@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 

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

@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
+}
+
+.emoji-button { padding: 8px }

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

@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;

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

@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;
 

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;

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

@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;

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

@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 //@import 'plugins/cards';
 //@import 'plugins/dense';
 //@import 'plugins/plus';

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

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}

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

@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {

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

@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;

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

@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;

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

@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {

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

@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 

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

@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
+}
+
+.emoji-button { padding: 8px }

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

@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;

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

@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;
 

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;

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

@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;

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

@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 //@import 'plugins/cards';
 //@import 'plugins/dense';
 //@import 'plugins/plus';

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

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}

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

@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {

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

@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;

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

@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;

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

@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {

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

@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 

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

@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
+}
+
+.emoji-button { padding: 8px }

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

@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;

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

@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;
 

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);

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

@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;

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

@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;

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

@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 //@import 'plugins/cards';
 //@import 'plugins/dense';
 //@import 'plugins/plus';

app/javascript/styles/material-light/plugins/astarte.scss

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}

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

@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {

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

@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;

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

@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;

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

@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {

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

@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 

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

@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
+}
+
+.emoji-button { padding: 8px }

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

@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;

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

@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;