diff --git a/app/javascript/styles/mastodon-material/color/black.scss b/app/javascript/styles/mastodon-material/color/black.scss index 3e7eca223..0b1aefaeb 100644 --- a/app/javascript/styles/mastodon-material/color/black.scss +++ b/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); diff --git a/app/javascript/styles/mastodon-material/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material/color/mastodon-dark.scss index d697c5ee5..09b27a26e 100644 --- a/app/javascript/styles/mastodon-material/color/mastodon-dark.scss +++ b/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); diff --git a/app/javascript/styles/mastodon-material/color/mastodon-light.scss b/app/javascript/styles/mastodon-material/color/mastodon-light.scss index d2e890f04..93f2898f9 100644 --- a/app/javascript/styles/mastodon-material/color/mastodon-light.scss +++ b/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); diff --git a/app/javascript/styles/mastodon-material/color/plus-classic.scss b/app/javascript/styles/mastodon-material/color/plus-classic.scss index 1c1f9f200..f0470dfa6 100644 --- a/app/javascript/styles/mastodon-material/color/plus-classic.scss +++ b/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); diff --git a/app/javascript/styles/mastodon-material/color/v1-dark.scss b/app/javascript/styles/mastodon-material/color/v1-dark.scss index d8d65d4f4..a1accfd73 100644 --- a/app/javascript/styles/mastodon-material/color/v1-dark.scss +++ b/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); diff --git a/app/javascript/styles/mastodon-material/color/v1-light.scss b/app/javascript/styles/mastodon-material/color/v1-light.scss index 506f27588..a6344cdb4 100644 --- a/app/javascript/styles/mastodon-material/color/v1-light.scss +++ b/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); diff --git a/app/javascript/styles/mastodon-material/color/v2-dark.scss b/app/javascript/styles/mastodon-material/color/v2-dark.scss index feb8669a3..8e8b103b4 100644 --- a/app/javascript/styles/mastodon-material/color/v2-dark.scss +++ b/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); diff --git a/app/javascript/styles/mastodon-material/color/v2-light.scss b/app/javascript/styles/mastodon-material/color/v2-light.scss index 3f08216e2..f16ea862f 100644 --- a/app/javascript/styles/mastodon-material/color/v2-light.scss +++ b/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); diff --git a/app/javascript/styles/mastodon-material/plugins/plus.scss b/app/javascript/styles/mastodon-material/plugins/plus.scss index 7d5486561..96d0bd3f6 100644 --- a/app/javascript/styles/mastodon-material/plugins/plus.scss +++ b/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; 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 92ee05675..4e97569d5 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 @@ -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-active-color: lighten($primary-color, 20%); +$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%); +$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); diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/icon_config.scss index 87566d783..da3ac5caa 100644 --- a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/icon_config.scss +++ b/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; \ No newline at end of file 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 7c5023298..7ecf324bf 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 @@ -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); - -$bg-color: #fafafa; +$floating-action-button-icon-color: $primary-color; $toggle-thumb-active-color: $primary-color; $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%); diff --git a/app/javascript/styles/mastodon-material/theme/_mixins.scss b/app/javascript/styles/mastodon-material/theme/_mixins.scss index 412c4c762..7c0229770 100644 --- a/app/javascript/styles/mastodon-material/theme/_mixins.scss +++ b/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}"; } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/account.scss b/app/javascript/styles/mastodon-material/theme/account.scss index 7f03b706d..7684ca8ac 100644 --- a/app/javascript/styles/mastodon-material/theme/account.scss +++ b/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, diff --git a/app/javascript/styles/mastodon-material/theme/admin.scss b/app/javascript/styles/mastodon-material/theme/admin.scss index d8b5bf57f..029e4bf36 100644 --- a/app/javascript/styles/mastodon-material/theme/admin.scss +++ b/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 { diff --git a/app/javascript/styles/mastodon-material/theme/button.scss b/app/javascript/styles/mastodon-material/theme/button.scss index 3c8c52ca7..e57317e58 100644 --- a/app/javascript/styles/mastodon-material/theme/button.scss +++ b/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 } } diff --git a/app/javascript/styles/mastodon-material/theme/columns.scss b/app/javascript/styles/mastodon-material/theme/columns.scss index 57204f20e..80dff5771 100644 --- a/app/javascript/styles/mastodon-material/theme/columns.scss +++ b/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; diff --git a/app/javascript/styles/mastodon-material/theme/components.scss b/app/javascript/styles/mastodon-material/theme/components.scss index 55a289b9b..c016e5db4 100644 --- a/app/javascript/styles/mastodon-material/theme/components.scss +++ b/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; } } diff --git a/app/javascript/styles/mastodon-material/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material/theme/emoji-picker.scss index 018264cb9..545bab92c 100644 --- a/app/javascript/styles/mastodon-material/theme/emoji-picker.scss +++ b/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; diff --git a/app/javascript/styles/mastodon-material/theme/forms.scss b/app/javascript/styles/mastodon-material/theme/forms.scss index 7ca756c70..ec8fc865c 100644 --- a/app/javascript/styles/mastodon-material/theme/forms.scss +++ b/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 } } diff --git a/app/javascript/styles/mastodon-material/theme/material-icons.scss b/app/javascript/styles/mastodon-material/theme/material-icons.scss index 9460e79a2..d74cb7fc0 100644 --- a/app/javascript/styles/mastodon-material/theme/material-icons.scss +++ b/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 { diff --git a/app/javascript/styles/mastodon-material/theme/modal.scss b/app/javascript/styles/mastodon-material/theme/modal.scss index d9e9cfdad..f0efad9a9 100644 --- a/app/javascript/styles/mastodon-material/theme/modal.scss +++ b/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; - } } } diff --git a/app/javascript/styles/mastodon-material/theme/tables.scss b/app/javascript/styles/mastodon-material/theme/tables.scss index 17feb642a..d27c3498e 100644 --- a/app/javascript/styles/mastodon-material/theme/tables.scss +++ b/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 } }