Merge pull request #456 from Rintan/features/material-theme

bug fixes

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

@@ -90,7 +90,8 @@ $icon-button-hover-color: $icon-hover-color;
 $icon-button-active-color: $primary-color;
 $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
 $contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@@ -90,7 +90,8 @@ $icon-button-hover-color: $icon-hover-color;
 $icon-button-active-color: $primary-color;
 $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
 $contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@@ -89,7 +89,8 @@ $icon-button-hover-color: $icon-hover-color;
 $icon-button-active-color: $primary-color;
 $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
 $contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@@ -1,5 +1,7 @@
-@charset "UTF-8";
+$name: "Plus Classic";
-
+$target-version: "1.0.0";
+$website: "";
+@include version-check($name, $target-version, $website);
 
 $color-scheme: light;
 
@@ -89,7 +91,8 @@ $icon-button-hover-color: $icon-hover-color;
 $icon-button-active-color: $primary-color;
 $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
 $contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@@ -89,7 +89,8 @@ $icon-button-hover-color: $icon-hover-color;
 $icon-button-active-color: $primary-color;
 $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
 $contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@@ -90,7 +90,8 @@ $icon-button-hover-color: $icon-hover-color;
 $icon-button-active-color: $primary-color;
 $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
 $contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@@ -90,7 +90,8 @@ $icon-button-hover-color: $icon-hover-color;
 $icon-button-active-color: $primary-color;
 $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
 $contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@@ -90,7 +90,8 @@ $icon-button-hover-color: $icon-hover-color;
 $icon-button-active-color: $primary-color;
 $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
 $contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);

app/javascript/styles/mastodon-material/plugins/plus.scss

@@ -34,6 +34,11 @@ $website: "";
     }
 }
 
+// single column mode
+@media screen and (min-width: 415px) {
+    .columns-area__panels__main { box-shadow: none }
+}
+
 // Fedibird bottom bar in mobile
 .tabs-bar.bottom-bar {
     background: #212121;

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

@@ -9,8 +9,8 @@ $unread-bg-color: transparentize($primary-color, 0.8);
 $icon-color: #d2d2d2;
 $icon-hover-color: #ffffff;
 $top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: lighten($primary-color, 20%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
 
 $control-border-color: $icon-color;
 $control-border-active-color: $primary-color;
@@ -21,7 +21,8 @@ $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%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $primary-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);
@@ -38,7 +39,7 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 $border-active-color: $primary-color;
 
-$tab-item-active-color: $primary-color;
+$tab-item-active-color: lighten($primary-color, 10%);
 $tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
 $tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
 

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

@@ -1,5 +1,5 @@
 // Add your icon customization below
 
-$boost-icon-color: #00ACC1;
+$boosted-icon-color: #00ACC1;
 
 $icon-font-source: self;

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

@@ -1,9 +1,12 @@
 // Add your customization below
+$color-scheme: light;
 
 $primary-color: #7e5f66;
 
 $section-text-color: $primary-color;
 
+$bg-color: #fafafa;
+
 $unread-bg-color: transparentize($primary-color, 0.8);
 
 $icon-color: #92787d;
@@ -11,7 +14,6 @@ $icon-hover-color: darken($icon-color, 10%);
 $top-bar-icon-color: $icon-color;
 $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
 $top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$floating-action-button-icon-color: $primary-color;
 
 $control-border-color: $icon-color;
 $control-border-active-color: $primary-color;
@@ -22,15 +24,15 @@ $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%);
+$contained-button-hover-color: lighten($contained-button-color, 6%);
+$contained-button-active-color: lighten($contained-button-color, 10%);
 $outlined-button-color: $contained-button-color;
 $outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
 $outlined-button-active-color: transparentize($outlined-button-color, 0.7);
 $text-button-color: $contained-button-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-
+$floating-action-button-icon-color: $primary-color;
-$bg-color: #fafafa;
 
 $toggle-thumb-active-color: $primary-color;
 $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);

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

@@ -280,6 +280,6 @@ $shadow-color-3: rgba(0,0,0,.12);
 // version checker
 @mixin version-check($name, $target-version, $website) {
     @if $target-version != $version {
-        @debug "[Info] #{$name} is made for Mastodon Material #{$target-version}. Some css elements might be broken! Check plugin website: #{$website}";
+        @debug "[Info] #{$name} is made for Mastodon Material #{$target-version}. Some css elements might be broken! Please check plugin website: #{$website}";
     }
 }

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

@@ -24,7 +24,7 @@
 
     &__header {
         &__bar {
-            background: $card-bg-color;
+            background: $tab-bg-color;
             padding: 8px;
             border-bottom: none;
 
@@ -96,9 +96,14 @@
                     dl {
                         border-bottom: 1px solid $border-color;
 
-                        &:first-child .verified { border-radius: 0 }
+                        &:first-child,
+                        &:first-child .verified { border-radius: $table-radius $table-radius 0 0 }
 
-                        &:last-child { border-bottom: 0 }
+                        &:last-child,
+                        &:last-child .verified {
+                            border-radius: 0 0 $table-radius $table-radius;
+                            border-bottom: 0;
+                        }
                     }
 
                     dd,

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

@@ -105,6 +105,31 @@
     }
 }
 
+.admin-account-bio {
+    margin: 16px 0 0;
+
+    .account__header {
+        &__content {
+            padding: 16px;
+            color: $primary-text-color;
+        }
+
+        &__content,
+        &__fields {
+            @include shadow-1dp;
+            background: $list-bg-color;
+            border-radius: $table-radius;
+    
+            a { color: $link-text-color }
+        }
+    }
+
+    &>div {
+        padding: 0 8px;
+        margin-bottom: 16px;
+    }
+}
+
 .filters .filter-subset {
     padding: 0 16px;
     margin: 0 0 16px;
@@ -217,6 +242,8 @@ body {
 
 .dashboard {
     &__counters {
+        margin: 0 0 16px;
+
         &__num,
         &__text {
             color: $secondary-text-color;
@@ -241,6 +268,8 @@ body {
                 &:hover { background: $card-bg-hover-color }
             }
         }
+
+        &.admin-account-counters { margin-top: 16px }
     }
 
     &__widgets {

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

@@ -177,6 +177,12 @@ label.icon-button {
 
         &:hover { background: $contained-button-hover-color }
 
+        &:active,
+        &:focus { background: $contained-button-active-color }
+
+        &.negative:active,
+        &.negative:focus { background: $error-color }
+
         &:disabled,
         &:disabled:hover { background-color: $disabled-button-color }
     }

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

@@ -434,13 +434,17 @@
 
 .announcements-list {
     border: 1px solid $border-color;
+    border-radius: $table-radius;
 
     &__item {
         padding: 16px 0;
         background: $list-bg-color;
-        border-radius: $table-radius;
         border-bottom: 1px solid $border-color;
 
+        &:first-child { border-radius: $table-radius $table-radius 0 0 }
+
+        &:last-child { border-radius: 0 0 $table-radius $table-radius }
+
         &__title {
             padding: 0 16px;
             color: $primary-text-color;

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

@@ -318,6 +318,7 @@
     }
 }
 
+// compose-panel in single column mode
 .compose-panel {
     overflow: visible;
     border-radius: $card-radius;
@@ -327,6 +328,7 @@
         background: $card-bg-color;
         padding-bottom: 16px;
         margin-bottom: 0;
+        border-radius: $card-radius;
     }
 }
 

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

@@ -45,10 +45,15 @@
     &-anchor {
         color: $tab-item-color;
         padding: 10px 4px;
+        border-radius: 0;
 
         &-bar { background-color: $tab-item-active-color }
 
-        &-selected { color: $tab-item-color }
+        &-selected {
+            color: $tab-item-active-color;
+
+            &:hover { color: $tab-item-active-color }
+        }
 
         &:hover { color: $tab-item-color }
     }
@@ -56,9 +61,15 @@
     &-search {
         background: $menu-bg-color;
 
+        &-icon {
+            right: auto;
+            left: 16px;
+            padding: 2px 6px;
+        }
+
         input {
             outline: none;
-            padding: 8px;
+            padding: 8px 8px 8px 33px;
             background: $search-bar-color;
             color: $ui-text-color;
             border: 0;

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

@@ -1,7 +1,7 @@
 .simple_form {
     .fields-row {
         padding-top: 8px;
-        margin: 0 -8px 28px;
+        margin: 0 0 16px;
     
         &__column { padding: 0 8px }
     }

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

@@ -83,7 +83,8 @@
     &.fa-power-off,
     &.fa-copy, &.fa-files-o,
     &.fa-smile-o,
-    &.fa-database {
+    &.fa-database,
+    &.fa-floppy-o, &.fa-save {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -175,6 +176,7 @@
     &.fa-copy::before, &.fa-files-o::before { content: "content_copy" }
     &.fa-smile-o::before { content: "emoji_emotions" }
     &.fa-database::before { content: "storage" }
+    &.fa-floppy-o::before, &.fa-save::before { content: "save" }
 }
 
 // bookmark icon
@@ -253,7 +255,9 @@ button.icon-button.reblogPrivate:hover i.fa-retweet {
 .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 }
+.fa.fa-star.column-header__icon.fa-fw,
+.fa.fa-list.column-header__icon.fa-fw,
+.fa.fa-list-ul.column-header__icon.fa-fw { vertical-align: text-bottom }
 
 // top bar icons in single column mode
 .tabs-bar__link .fa {
@@ -302,12 +306,16 @@ tbody tr td span .fa {
     color: $icon-color;
     vertical-align: bottom;
 }
+
 a.table-action-link i.fa,
 button.table-action-link i.fa {
     font-size: 16px;
     vertical-align: bottom;
 }
 
+// you might like
+.trends__header .fa { vertical-align: bottom }
+
 // status scope
 .status__visibility-icon .fa,
 .account__header__tabs__name .fa {

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

@@ -61,14 +61,6 @@
     .status {
         background: $card-bg-color;
         border-bottom-color: $border-color;
-        padding: 12px 16px;
-
-        &__avatar {
-            width: 40px;
-            height: 40px;
-            left: 16px;
-            top: 12px;
-        }
     }
 }
 

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

@@ -35,6 +35,11 @@
 
         &:hover { background: $list-bg-hover-color }
     }
+
+    &__form {
+        border: 1px solid $border-color;
+        background: $list-bg-color;
+    }
     
     .nothing-here { border: none }
 }