update Material theme

app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss

@@ -4,6 +4,8 @@ $primary-color: #7e5f66;
 
 $section-text-color: lighten($primary-color, 10%);
 
+$unread-bg-color: transparentize($primary-color, 0.8);
+
 $icon-color: #d2d2d2;
 $icon-hover-color: #ffffff;
 $top-bar-icon-color: $icon-color;

app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss

@@ -4,6 +4,8 @@ $primary-color: #7e5f66;
 
 $section-text-color: $primary-color;
 
+$unread-bg-color: transparentize($primary-color, 0.8);
+
 $icon-color: #92787d;
 $icon-hover-color: darken($icon-color, 10%);
 $top-bar-icon-color: $icon-color;
@@ -17,6 +19,8 @@ $control-border-hover-color: transparentize($control-border-active-color, 0.8);
 
 $icon-button-color: $icon-color;
 $icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: lighten($primary-color, 20%);
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
 $contained-button-color: $primary-color;
 $contained-button-hover-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $contained-button-color;

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

@@ -14,4 +14,37 @@
     }
 }
 
+.landing {
+    .simple_form p.lead {
+        color: $ui-text-color;
+        padding: 16px;
+        margin-bottom: 0;
+    }
+
+    .directory { margin-top: 16px }
+
+    .hero-widget {
+        .account { padding: 16px 0 }
+
+        h4 { color: $ui-text-color }
+
+        &__footer {
+            background: $card-bg-color;
+            padding: 16px;
+            border-radius: 0 0 $card-radius $card-radius;
+        }
+
+        &__counter {
+            color: $primary-text-color;
+            padding: 8px;
+
+            span { color: $ui-text-color }
+        }
+    }
+
+    &__grid { grid-gap: 16px }
+
+    &__brand svg { fill: $ui-text-color }
+}
+
 .information-board__section span:last-child { color: $ui-text-color }

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

@@ -1,6 +1,7 @@
 body,
 body.embed,
-body.admin { background: $bg-color }
+body.admin,
+body.lighter { background: $bg-color }
 
 .focusable:focus { background: transparent }
 

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

@@ -49,6 +49,9 @@
         margin-left: 8px;
     }
 
+    &:active,
+    &:focus { color: $icon-button-active-color }
+
     &:focus { background-color: transparent }
 
     &:hover {
@@ -137,8 +140,8 @@ label.icon-button {
 }
 
 .simple_form {
-    .block-button, .block-button:last-child
+    .block-button, .block-button:last-child,
-    .button, .button:last-child
+    .button, .button:last-child,
     button, button:last-child {
         display: inline-block;
         border-radius: $button-radius;
@@ -149,7 +152,11 @@ label.icon-button {
         padding: 10px 16px;
         margin-left: auto;
         font-size: 14px;
+        line-height: 15px;
 
         &:hover { background: $contained-button-hover-color }
+
+        &:disabled,
+        &:disabled:hover { background-color: $disabled-button-color }
     }
 }

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

@@ -203,7 +203,12 @@
     padding: 16px 0 16px 16px;
     background: $card-bg-color;
 
-    .icon-button { margin: 0 16px }
+    .icon-button {
+        width: 36px !important;
+        height: 36px !important;
+        padding: 8px;
+        margin: 0 16px;
+    }
 }
 
 .columns-area {
@@ -483,6 +488,8 @@
         color: $secondary-text-color;
         margin: 0 16px 0 70px;
         font-size: 16px;
+
+        .fa { color: $icon-button-color }
     }
 
     &__display-name:hover { color: inherit }

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

@@ -4,6 +4,8 @@
     &__overlay { background-color: rgba(0,0,0,.7) !important }
 }
 
+.modal-layout { background-color: $bg-color }
+
 .drawer {
     &__header {
         @include shadow-4dp;
@@ -619,6 +621,18 @@
     }
 }
 
+.domain {
+    padding: 16px;
+    border-bottom: 1px solid $border-color;
+
+    .domain__domain-name { color: $primary-text-color }
+
+    &__buttons .icon-button {
+        @include icon-button;
+        padding: 8px;
+    }
+}
+
 .upload-progress {
     color: $ui-text-color;
     

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

@@ -8,7 +8,9 @@
         .brand {
             svg { fill: $top-bar-text-color }
 
-            &:hover { background: $tab-indicator-bg-hover-color }
+            &:hover,
+            &:focus,
+            &:active { background: $tab-indicator-bg-hover-color }
         }
 
         .nav-link,
@@ -123,6 +125,21 @@
             }
         }
 
+        &__extra {
+            .public-account-bio .account__header__fields { border-top: 1px solid $border-color }
+
+            &__links {
+                color: $ui-text-color;
+
+                a {
+                    color: $ui-text-color;
+                    padding: 16px;
+
+                    strong { color: $primary-text-color }
+                }
+            }
+        }
+
         &--no-bar .public-account-header {
             &__image,
             &__image img { border-radius: $card-radius }
@@ -161,4 +178,8 @@
     .grid { grid-gap: 16px }
 }
 
+.brand__tagline { color: $ui-text-color }
+
+.logo-container h1 svg { fill: $ui-text-color }
+
 .grid-4 { grid-gap: 16px }

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

@@ -36,13 +36,22 @@
         }
     }
 
-    .label_input__wrapper {
+    .label_input {
-        border-radius: $card-radius;
+        &__wrapper {
+            border-radius: $card-radius;
+    
+            &:hover { background: $dropdown-field-bg-hover-color }
+    
+            &:active,
+            &:focus { background: $dropdown-field-bg-active-color }
+        }
 
-        &:hover { background: $dropdown-field-bg-hover-color }
+        &__append {
+            padding: 16px;
+            color: $ui-text-color;
 
-        &:active,
+            &::after { background-image: none }
-        &:focus { background: $dropdown-field-bg-active-color }
+        }
     }
 
     .card { margin-bottom: 16px }
@@ -59,6 +68,8 @@
         }
     }
 
+    .actions { padding: 16px }
+
     .check_boxes .checkbox label {
         color: $primary-text-color;
         padding-top: 8px;
@@ -68,6 +79,8 @@
         padding: 16px;
         margin-bottom: 0;
         color: $ui-text-color;
+
+        &.subtle-hint { margin-top: 16px }
     }
 
     select {
@@ -105,6 +118,14 @@
 
         &::placeholder { color: $tips-text-color }
     }
+
+    input[type=email],
+    input[type=number],
+    input[type=password],
+    input[type=text] {
+        &:focus:invalid:not(:placeholder-shown),
+        &:required:invalid:not(:placeholder-shown) { border-color: $error-color }
+    }
 }
 
 .flash-message {
@@ -124,6 +145,14 @@
     &.translation-prompt { color: $ui-text-color }
 }
 
+.form-footer a { color: $ui-text-color }
+
+.follow-prompt,
+.oauth-prompt {
+    margin-bottom: 32px;
+    color: $ui-text-color;
+}
+
 .input-copy {
     background: $bg-color;
     padding-right: 8px;

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

@@ -70,7 +70,8 @@
     &.fa-exchange,
     &.fa-cloud-upload,
     &.fa-cloud-download,
-    &.fa-mobile-phone, &.fa-mobile {
+    &.fa-mobile-phone, &.fa-mobile,
+    &.fa-tablet {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -149,6 +150,7 @@
     &.fa-cloud-upload::before { content: "cloud_upload" }
     &.fa-cloud-download::before { content: "cloud_download" }
     &.fa-mobile-phone::before, &.fa-mobile::before { content: "smartphone" }
+    &.fa-tablet::before { content: "tablet" }
 }
 
 // bookmark icon

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

@@ -127,4 +127,14 @@
 
         .sidebar-wrapper { @include shadow-4dp }
     }
+
+    .public-layout .public-account-header {
+        &__bar { background: $card-bg-color }
+
+        &__tabs__name h1 {
+            color: $primary-text-color;
+
+            small { color: $secondary-text-color }
+        }
+    }
 }

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

@@ -14,6 +14,8 @@
         padding: 16px;
         color: $primary-text-color;
         border-radius: 0 0 $card-radius $card-radius;
+
+        a { color: $link-text-color }
     }
 }
 
@@ -153,4 +155,9 @@
     
         small { color: $secondary-text-color }
     }
+}
+
+.statuses-grid .detailed-status {
+    @include shadow-1dp;
+    border-radius: $card-radius;
 }