diff --git a/app/javascript/styles/mastodon-material/color/plus-classic.scss b/app/javascript/styles/mastodon-material/color/plus-classic.scss index 837b850cb..1c1f9f200 100644 --- a/app/javascript/styles/mastodon-material/color/plus-classic.scss +++ b/app/javascript/styles/mastodon-material/color/plus-classic.scss @@ -125,7 +125,7 @@ $search-bar-focus-color: $bg-color; // Tab color $tab-item-color: transparentize(#ffffff, 0.5); -$tab-item-active-color: $primary-color; +$tab-item-active-color: #ffffff; $tab-bg-color: $top-bar-color; $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/color/v1-light.scss b/app/javascript/styles/mastodon-material/color/v1-light.scss index 35e1054ae..506f27588 100644 --- a/app/javascript/styles/mastodon-material/color/v1-light.scss +++ b/app/javascript/styles/mastodon-material/color/v1-light.scss @@ -126,7 +126,7 @@ $search-bar-focus-color: $bg-color; // Tab color $tab-item-color: transparentize(#ffffff, 0.5); -$tab-item-active-color: $primary-color; +$tab-item-active-color: #ffffff; $tab-bg-color: $top-bar-color; $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/plugins/cards.scss b/app/javascript/styles/mastodon-material/plugins/cards.scss index 48faf1ea1..be070c74a 100644 --- a/app/javascript/styles/mastodon-material/plugins/cards.scss +++ b/app/javascript/styles/mastodon-material/plugins/cards.scss @@ -6,6 +6,20 @@ > .scrollable { background: $bg-color } } +@media screen and (min-width: 415px) { + .column { padding: 0 !important } + + .notification.notification, + .status { + border-radius: 0; + + &__wrapper.status__wrapper { + margin: 8px 0; + border-radius: 0; + } + } +} + .status { border-bottom: 0; border-radius: $card-radius; @@ -26,6 +40,4 @@ .notification .status__wrapper.status__wrapper { box-shadow: none !important } -.notification__filter-bar { - @include non-overflow-shadow-4dp; -} \ No newline at end of file +.notification__filter-bar { @include non-overflow-shadow-4dp } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/plugins/fedibird.scss b/app/javascript/styles/mastodon-material/plugins/fedibird.scss index 2d92ecbf3..bf37885da 100644 --- a/app/javascript/styles/mastodon-material/plugins/fedibird.scss +++ b/app/javascript/styles/mastodon-material/plugins/fedibird.scss @@ -13,6 +13,7 @@ @include shadow-4dp; .tabs-bar { + &__link, &__link.active { border-bottom: none } } diff --git a/app/javascript/styles/mastodon-material/plugins/itabashi.scss b/app/javascript/styles/mastodon-material/plugins/itabashi.scss new file mode 100644 index 000000000..abcb30704 --- /dev/null +++ b/app/javascript/styles/mastodon-material/plugins/itabashi.scss @@ -0,0 +1,32 @@ +.quote-indicator { + @include card-elevation(false); + margin-bottom: 16px; + padding: 16px; + + &__header { margin-bottom: 4px } + + &__display-avatar { margin-right: 8px } + + &__content { padding-top: 0 } +} + +.quote-status { + @include card-elevation(false); + padding: 16px; + + .detailed-status__display-avatar, + .status__avatar { + height: 32px; + width: 232px; + top: 16px !important; + left: 16px !important; + + &>div { + width: 32px !important; + height: 32px !important; + background-size: 32px !important; + } + } + + .display-name { padding-left: 40px } +} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/plugins/plus.scss b/app/javascript/styles/mastodon-material/plugins/plus.scss index ad0ed709c..9a5f93d43 100644 --- a/app/javascript/styles/mastodon-material/plugins/plus.scss +++ b/app/javascript/styles/mastodon-material/plugins/plus.scss @@ -38,4 +38,19 @@ &.active { color: #ffffff } } +} + +// Itabashi quote +.quote-status { + border-radius: 0; + border: none; + border-top: 1px solid $border-color; + padding: 16px 0; + + .detailed-status__display-avatar, + .status__avatar { left: 0 !important } +} + +@media screen and (min-width: 630px) { + .quote-indicator__content, .reply-indicator__content, .status__content { padding-top: 32px } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss index e17916a49..0f869efac 100644 --- a/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss @@ -1,4 +1,6 @@ @import '../../plugins/astarte'; //@import '../../plugins/cards'; //@import '../../plugins/dense'; +@import '../../plugins/fedibird'; +@import '../../plugins/itabashi'; //@import '../../plugins/plus'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss index e17916a49..0f869efac 100644 --- a/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss @@ -1,4 +1,6 @@ @import '../../plugins/astarte'; //@import '../../plugins/cards'; //@import '../../plugins/dense'; +@import '../../plugins/fedibird'; +@import '../../plugins/itabashi'; //@import '../../plugins/plus'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss b/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss index e17916a49..0f869efac 100644 --- a/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss @@ -1,4 +1,6 @@ @import '../../plugins/astarte'; //@import '../../plugins/cards'; //@import '../../plugins/dense'; +@import '../../plugins/fedibird'; +@import '../../plugins/itabashi'; //@import '../../plugins/plus'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss b/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss index e17916a49..0f869efac 100644 --- a/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss @@ -1,4 +1,6 @@ @import '../../plugins/astarte'; //@import '../../plugins/cards'; //@import '../../plugins/dense'; +@import '../../plugins/fedibird'; +@import '../../plugins/itabashi'; //@import '../../plugins/plus'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss b/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss index e17916a49..0f869efac 100644 --- a/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss @@ -1,4 +1,6 @@ @import '../../plugins/astarte'; //@import '../../plugins/cards'; //@import '../../plugins/dense'; +@import '../../plugins/fedibird'; +@import '../../plugins/itabashi'; //@import '../../plugins/plus'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss b/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss index 89adaca8a..25d7fc413 100644 --- a/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss @@ -1,4 +1,6 @@ @import '../../plugins/astarte'; @import '../../plugins/cards'; @import '../../plugins/dense'; +@import '../../plugins/fedibird'; +@import '../../plugins/itabashi'; @import '../../plugins/plus'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss index fb818fab0..52cce4073 100644 --- a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss +++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss @@ -1,3 +1,5 @@ // Add your settings below -@import '../../color/v2-dark'; \ No newline at end of file +@import '../../color/v2-dark'; + +$separate-address-line: true; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/plugins.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/plugins.scss index 292ec7fa6..77477b80a 100644 --- a/app/javascript/styles/mastodon-material/profiles/y-zu-dark/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/y-zu-dark/plugins.scss @@ -1,4 +1,6 @@ @import '../../plugins/astarte'; //@import '../../plugins/cards'; @import '../../plugins/dense'; +@import '../../plugins/fedibird'; +@import '../../plugins/itabashi'; //@import '../../plugins/plus'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss index d250ece15..1a8cac504 100644 --- a/app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss +++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss @@ -1,3 +1,5 @@ // Add your settings below -@import '../../color/v2-light'; \ No newline at end of file +@import '../../color/v2-light'; + +$separate-address-line: true; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss index 7a2d83e4d..77477b80a 100644 --- a/app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss @@ -1,5 +1,6 @@ @import '../../plugins/astarte'; //@import '../../plugins/cards'; @import '../../plugins/dense'; -@import '../../plugins/fedibird' +@import '../../plugins/fedibird'; +@import '../../plugins/itabashi'; //@import '../../plugins/plus'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/_mixins.scss b/app/javascript/styles/mastodon-material/theme/_mixins.scss index a1520380d..8035eb9ba 100644 --- a/app/javascript/styles/mastodon-material/theme/_mixins.scss +++ b/app/javascript/styles/mastodon-material/theme/_mixins.scss @@ -38,6 +38,23 @@ $shadow-color-3: rgba(0,0,0,.12); } } +@mixin separate-address-line { + @if $separate-address-line { display: block } +} + +@mixin card-elevation($elevation) { + border-radius: $card-radius; + background: $card-bg-color; + + @if $elevation { + @include shadow-1dp; + border: none; + } @else { + box-shadow: none; + border: 1px solid $border-color; + } +} + @mixin chip-type($chip-type) { @if $chip-type == contained { background: $contained-chip-color; @@ -123,9 +140,7 @@ $shadow-color-3: rgba(0,0,0,.12); border: 1px solid $border-color; &:active, - &:focus { - border: 2px solid $border-active-color; - } + &:focus { border: 2px solid $border-active-color } } } diff --git a/app/javascript/styles/mastodon-material/theme/base_config.scss b/app/javascript/styles/mastodon-material/theme/base_config.scss index a3f28a18e..16af30390 100644 --- a/app/javascript/styles/mastodon-material/theme/base_config.scss +++ b/app/javascript/styles/mastodon-material/theme/base_config.scss @@ -21,6 +21,10 @@ $search-bar-hover: false; +// Separate an address from a name line +$separate-address-line: false; + + // Status font size in timeline $status-font-size: 15px; // mastodon default //$status-font-size: 16px; // compatible with material design diff --git a/app/javascript/styles/mastodon-material/theme/button.scss b/app/javascript/styles/mastodon-material/theme/button.scss index 2caa05ab9..19c5dae19 100644 --- a/app/javascript/styles/mastodon-material/theme/button.scss +++ b/app/javascript/styles/mastodon-material/theme/button.scss @@ -109,8 +109,9 @@ label.icon-button { background: $contained-button-color; margin: 2px; - &:hover { background: $contained-button-hover-color } - + &:active, + &:focus, + &:hover, .button--destructive:hover { background: $contained-button-hover-color } } diff --git a/app/javascript/styles/mastodon-material/theme/columns.scss b/app/javascript/styles/mastodon-material/theme/columns.scss index ca3f2d6f7..c543d7bd7 100644 --- a/app/javascript/styles/mastodon-material/theme/columns.scss +++ b/app/javascript/styles/mastodon-material/theme/columns.scss @@ -152,7 +152,10 @@ &:hover { background: $list-bg-hover-color } &:active, - &:focus { background: $list-bg-active-color } + &:focus { + color: $ui-text-color; + background: $list-bg-active-color; + } &__icon { margin-right: 32px; diff --git a/app/javascript/styles/mastodon-material/theme/components.scss b/app/javascript/styles/mastodon-material/theme/components.scss index d3aa51a2d..23c8ce941 100644 --- a/app/javascript/styles/mastodon-material/theme/components.scss +++ b/app/javascript/styles/mastodon-material/theme/components.scss @@ -394,8 +394,6 @@ border-radius: 2px; padding: 8px 16px; } - - &__text { line-height: 36px } } &__chart { @@ -412,11 +410,10 @@ } &__link { color: $ui-text-color } - - &__number { line-height: 36px } } .privacy-dropdown { + &.active .privacy-dropdown__value, &.active .privacy-dropdown__value.active { background: $icon-bg-hover-color; border-radius: 50%; @@ -483,10 +480,7 @@ .character-counter { color: $secondary-text-color } .reply-indicator { - box-shadow: none; - border: 1px solid $border-color; - border-radius: $card-radius; - background: $card-bg-color; + @include card-elevation(false); padding: 16px; &__header { margin-bottom: 4px } @@ -731,4 +725,19 @@ .loading-bar { background-color: $loading-indicator-color; height: 4px; +} + +.regeneration-indicator { + color: $ui-text-color; + background: $bg-color; + padding: 16px; + + &__label { + margin-top: 32px; + + strong { + margin-bottom: 16px; + color: $secondary-text-color; + } + } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material/theme/emoji-picker.scss index 9f8eeffaf..018264cb9 100644 --- a/app/javascript/styles/mastodon-material/theme/emoji-picker.scss +++ b/app/javascript/styles/mastodon-material/theme/emoji-picker.scss @@ -39,7 +39,7 @@ &-bar { border: 0 solid $border-color; - &:first-child { background: $menu-bg-color } + &:first-child { background: $tab-bg-color } } &-anchor { diff --git a/app/javascript/styles/mastodon-material/theme/icons.scss b/app/javascript/styles/mastodon-material/theme/icons.scss index bb4b28eac..fa3cd7d6e 100644 --- a/app/javascript/styles/mastodon-material/theme/icons.scss +++ b/app/javascript/styles/mastodon-material/theme/icons.scss @@ -14,6 +14,6 @@ .icon-with-badge__badge { background: $badge-color; border: none; - padding: 2px 6px; - border-radius: 12px; + padding: 4px; + border-radius: 50%; } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/responsive.scss b/app/javascript/styles/mastodon-material/theme/responsive.scss index 90c3af01e..2fc5cae79 100644 --- a/app/javascript/styles/mastodon-material/theme/responsive.scss +++ b/app/javascript/styles/mastodon-material/theme/responsive.scss @@ -4,10 +4,10 @@ &__link { padding: 16px 16px 12px 16px; color: $tab-item-color; - border-bottom: 4px solid transparent; + border-bottom: 2px solid transparent; &.active { - border-bottom: 4px solid $tab-item-active-color; + border-bottom: 2px solid $tab-item-active-color; color: $tab-item-active-color; } diff --git a/app/javascript/styles/mastodon-material/theme/statuses.scss b/app/javascript/styles/mastodon-material/theme/statuses.scss index 7fd2daa1f..55851e24a 100644 --- a/app/javascript/styles/mastodon-material/theme/statuses.scss +++ b/app/javascript/styles/mastodon-material/theme/statuses.scss @@ -259,6 +259,7 @@ a.status-card { .display-name { &__html { color: $primary-text-color } &__account { color: $secondary-text-color } + strong { @include separate-address-line } } .activity-stream {