From dd0680278612ae4c48ca71d231292133581eaf30 Mon Sep 17 00:00:00 2001
From: Rintan <12230083+Rintan@users.noreply.github.com>
Date: Tue, 30 Mar 2021 14:15:07 +0900
Subject: [PATCH 1/2] update Material theme

---
 .../profiles/y-zu-dark/color.scss             |  2 +
 .../profiles/y-zu-light/color.scss            |  4 ++
 .../styles/mastodon-material/theme/about.scss | 33 ++++++++++++++++
 .../mastodon-material/theme/basics.scss       |  3 +-
 .../mastodon-material/theme/button.scss       | 11 +++++-
 .../mastodon-material/theme/columns.scss      |  9 ++++-
 .../mastodon-material/theme/components.scss   | 14 +++++++
 .../mastodon-material/theme/containers.scss   | 23 ++++++++++-
 .../styles/mastodon-material/theme/forms.scss | 39 ++++++++++++++++---
 .../theme/material-icons.scss                 |  4 +-
 .../mastodon-material/theme/responsive.scss   | 10 +++++
 .../mastodon-material/theme/widgets.scss      |  7 ++++
 12 files changed, 148 insertions(+), 11 deletions(-)

diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss
index 687c8ed00..b273c0652 100644
--- a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss
+++ b/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;
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss
index 910560fe9..63e171c06 100644
--- a/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss
+++ b/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;
diff --git a/app/javascript/styles/mastodon-material/theme/about.scss b/app/javascript/styles/mastodon-material/theme/about.scss
index 2639ed357..ea78fde16 100644
--- a/app/javascript/styles/mastodon-material/theme/about.scss
+++ b/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 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/basics.scss b/app/javascript/styles/mastodon-material/theme/basics.scss
index 79d093374..27adf1e86 100644
--- a/app/javascript/styles/mastodon-material/theme/basics.scss
+++ b/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 }
 
diff --git a/app/javascript/styles/mastodon-material/theme/button.scss b/app/javascript/styles/mastodon-material/theme/button.scss
index 0fee5ab06..fcb59dbbe 100644
--- a/app/javascript/styles/mastodon-material/theme/button.scss
+++ b/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
-    .button, .button:last-child
+    .block-button, .block-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 }
     }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/columns.scss b/app/javascript/styles/mastodon-material/theme/columns.scss
index 5313038db..c275d29e6 100644
--- a/app/javascript/styles/mastodon-material/theme/columns.scss
+++ b/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 }
diff --git a/app/javascript/styles/mastodon-material/theme/components.scss b/app/javascript/styles/mastodon-material/theme/components.scss
index 24909122a..4e3a69556 100644
--- a/app/javascript/styles/mastodon-material/theme/components.scss
+++ b/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;
     
diff --git a/app/javascript/styles/mastodon-material/theme/containers.scss b/app/javascript/styles/mastodon-material/theme/containers.scss
index c4fa3aaea..6891adb1e 100644
--- a/app/javascript/styles/mastodon-material/theme/containers.scss
+++ b/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 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/forms.scss b/app/javascript/styles/mastodon-material/theme/forms.scss
index af55dcdf9..e5e535d8c 100644
--- a/app/javascript/styles/mastodon-material/theme/forms.scss
+++ b/app/javascript/styles/mastodon-material/theme/forms.scss
@@ -36,13 +36,22 @@
         }
     }
 
-    .label_input__wrapper {
-        border-radius: $card-radius;
+    .label_input {
+        &__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,
-        &:focus { background: $dropdown-field-bg-active-color }
+            &::after { background-image: none }
+        }
     }
 
     .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;
diff --git a/app/javascript/styles/mastodon-material/theme/material-icons.scss b/app/javascript/styles/mastodon-material/theme/material-icons.scss
index 28e4b5cdd..3875d349b 100644
--- a/app/javascript/styles/mastodon-material/theme/material-icons.scss
+++ b/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
diff --git a/app/javascript/styles/mastodon-material/theme/responsive.scss b/app/javascript/styles/mastodon-material/theme/responsive.scss
index ccc145908..87cb693f9 100644
--- a/app/javascript/styles/mastodon-material/theme/responsive.scss
+++ b/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 }
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/widgets.scss b/app/javascript/styles/mastodon-material/theme/widgets.scss
index e8841f9f8..050e9b127 100644
--- a/app/javascript/styles/mastodon-material/theme/widgets.scss
+++ b/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;
 }
\ No newline at end of file

From 6b590d4a4c95977965c19b685654c0b2d2d2ae9a Mon Sep 17 00:00:00 2001
From: Rintan <12230083+Rintan@users.noreply.github.com>
Date: Tue, 30 Mar 2021 16:13:20 +0900
Subject: [PATCH 2/2] fix scroll-bar color

---
 .../styles/mastodon-material/profiles/y-zu-light/color.scss   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss
index 63e171c06..7c4349512 100644
--- a/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss
@@ -39,6 +39,10 @@ $border-color: lighten($icon-color, 30%);
 $border-hover-color: darken($border-color, 30%);
 $border-active-color: $primary-color;
 
+$scroll-bar-thumb-color: lighten($icon-color, 30%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
 $tab-indicator-color: $top-bar-icon-color;
 $tab-indicator-active-color: $top-bar-icon-color;
 $text-tab-indicator-color: lighten($top-bar-icon-color, 10%);