From f8f603b2b303c7483d42baca386b208c0ed1f886 Mon Sep 17 00:00:00 2001 From: Rintan <12230083+Rintan@users.noreply.github.com> Date: Tue, 3 Aug 2021 15:14:46 +0900 Subject: [PATCH 1/2] update material theme --- .../mastodon-material/layout/material-v1.scss | 5 ++ .../mastodon-material/layout/material-v2.scss | 5 ++ .../mastodon-material/plugins/cards.scss | 2 - .../mastodon-material/plugins/dense.scss | 4 +- .../mastodon-material/plugins/itabashi.scss | 52 -------------- .../mastodon-material/plugins/plus.scss | 56 --------------- .../mastodon-material/plugins/quote.scss | 71 +++++++++++++++++++ .../mastodon-material-dark/plugins.scss | 2 +- .../mastodon-material-light/plugins.scss | 2 +- .../profiles/material-black/plugins.scss | 2 +- .../profiles/material-dark/plugins.scss | 2 +- .../profiles/material-light/plugins.scss | 2 +- .../profiles/plus/plugins.scss | 4 +- .../profiles/y-zu-dark/config.scss | 4 +- .../profiles/y-zu-dark/plugins.scss | 2 +- .../profiles/y-zu-light/config.scss | 4 +- .../profiles/y-zu-light/plugins.scss | 2 +- .../mastodon-material/theme/_mixins.scss | 11 +-- .../styles/mastodon-material/theme/about.scss | 8 ++- .../mastodon-material/theme/account.scss | 14 ++-- .../mastodon-material/theme/base_config.scss | 4 -- .../mastodon-material/theme/button.scss | 6 +- .../mastodon-material/theme/columns.scss | 9 ++- .../mastodon-material/theme/components.scss | 7 ++ .../mastodon-material/theme/containers.scss | 2 +- .../styles/mastodon-material/theme/icons.scss | 4 +- .../theme/material-icons.scss | 6 ++ .../styles/mastodon-material/theme/modal.scss | 9 ++- .../mastodon-material/theme/statuses.scss | 23 +++--- .../styles/mastodon-material/theme/theme.scss | 6 +- 30 files changed, 166 insertions(+), 164 deletions(-) delete mode 100644 app/javascript/styles/mastodon-material/plugins/itabashi.scss delete mode 100644 app/javascript/styles/mastodon-material/plugins/plus.scss create mode 100644 app/javascript/styles/mastodon-material/plugins/quote.scss diff --git a/app/javascript/styles/mastodon-material/layout/material-v1.scss b/app/javascript/styles/mastodon-material/layout/material-v1.scss index 7746e0eb7..fd709eded 100644 --- a/app/javascript/styles/mastodon-material/layout/material-v1.scss +++ b/app/javascript/styles/mastodon-material/layout/material-v1.scss @@ -48,6 +48,11 @@ $avatar-radius: 50%; // Rounded cropping //$avatar-radius: $card-radius // Fit to card radius +// Tab indicator thickness +$tab-indicator-thickness: 2px; +//$tab-indicator-thickness: 4px; + + // Chip settings $chip-type: contained; // Material v1 styled contained chip diff --git a/app/javascript/styles/mastodon-material/layout/material-v2.scss b/app/javascript/styles/mastodon-material/layout/material-v2.scss index cc2c8d298..5ec6370a7 100644 --- a/app/javascript/styles/mastodon-material/layout/material-v2.scss +++ b/app/javascript/styles/mastodon-material/layout/material-v2.scss @@ -56,6 +56,11 @@ $avatar-radius: 50%; // Rounded cropping //$avatar-radius: 8px // Material v2 square +// Tab indicator thickness +//$tab-indicator-thickness: 2px; +$tab-indicator-thickness: 4px; + + // Chip settings $chip-type: outlined; // Material v2 styled outlined chip //$outlined-chip: contained; // Material v1 styled contained chip diff --git a/app/javascript/styles/mastodon-material/plugins/cards.scss b/app/javascript/styles/mastodon-material/plugins/cards.scss index be070c74a..804cff785 100644 --- a/app/javascript/styles/mastodon-material/plugins/cards.scss +++ b/app/javascript/styles/mastodon-material/plugins/cards.scss @@ -7,8 +7,6 @@ } @media screen and (min-width: 415px) { - .column { padding: 0 !important } - .notification.notification, .status { border-radius: 0; diff --git a/app/javascript/styles/mastodon-material/plugins/dense.scss b/app/javascript/styles/mastodon-material/plugins/dense.scss index 1a9ad31d1..6e9e9683a 100644 --- a/app/javascript/styles/mastodon-material/plugins/dense.scss +++ b/app/javascript/styles/mastodon-material/plugins/dense.scss @@ -1,3 +1,5 @@ +$dense: true; + .drawer { &__header { height: 48px } @@ -48,8 +50,6 @@ &__expand { width: 66px } - &__info { padding-right: 0 } - &__avatar { left: 8px; top: 10px; diff --git a/app/javascript/styles/mastodon-material/plugins/itabashi.scss b/app/javascript/styles/mastodon-material/plugins/itabashi.scss deleted file mode 100644 index 76f1168f0..000000000 --- a/app/javascript/styles/mastodon-material/plugins/itabashi.scss +++ /dev/null @@ -1,52 +0,0 @@ -.quote-indicator, -.reply-indicator { - @include card-elevation(false); - margin-bottom: 16px; - padding: 16px; - - &__header { margin-bottom: 4px } - - &__display-avatar { - margin-right: 8px; - - .account__avatar { - width: 32px !important; - height: 32px !important; - background-size: 32px !important; - } - } - - &__content { - padding-top: 0; - padding-left: 32px; - color: $primary-text-color; - } -} - -.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; - } - } - - .detailed-status__display-name { - span, - strong { @include separate-address-line } - } - - .display-name { padding-left: 40px } - - &>.unlisted-quote>button { color: $ui-text-color } -} \ 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 deleted file mode 100644 index 9a5f93d43..000000000 --- a/app/javascript/styles/mastodon-material/plugins/plus.scss +++ /dev/null @@ -1,56 +0,0 @@ -.status__action-bar-button { - background: #eeeeee; - width: 28px !important; - height: 28px !important; - - .fa { vertical-align: bottom } -} - -// exception -.media-modal__overlay .picture-in-picture__footer .icon-button, -.status__action-bar-button.icon-button--with-counter { background: transparent } - -// favorite icon -.star-icon.active, -.star-icon.icon-button.active.activate, -.notification__favourite-icon-wrapper .star-icon { background: #db4437 } - -.notification__favourite-icon-wrapper { - left: -34px; - - .star-icon { - border-radius: 50%; - width: 28px; - height: 28px; - vertical-align: baseline; - font-size: 18px; - - &.fa-fw::before { vertical-align: middle } - } -} - -// Fedibird bottom bar in mobile -.tabs-bar.bottom-bar { - background: #212121; - - .tabs-bar__link { - color: transparentize(#ffffff, 0.5); - - &.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/plugins/quote.scss b/app/javascript/styles/mastodon-material/plugins/quote.scss new file mode 100644 index 000000000..14c1ffe2a --- /dev/null +++ b/app/javascript/styles/mastodon-material/plugins/quote.scss @@ -0,0 +1,71 @@ +.quote-indicator, +.reply-indicator { + @include card-elevation(false); + margin-bottom: 16px; + padding: 16px; + + &__header { margin-bottom: 4px } + + &__display-avatar { + margin-right: 8px; + + .account__avatar { + width: 40px !important; + height: 40px !important; + background-size: 40px !important; + } + } + + &__content { + padding-top: 4px; + color: $primary-text-color; + } +} + +.quote-status { + @include card-elevation(false); + background: none; + padding: 16px 16px 16px 72px; + + .detailed-status__display-avatar, + .status__avatar { + top: 16px !important; + left: 16px !important; + width: 40px !important; + height: 40px !important; + + &>div { + width: 40px !important; + height: 40px !important; + background-size: 40px !important; + } + } + + .status__content { padding-top: 8px } + + .detailed-status__display-name { + span, + strong { display: block } + } + + .display-name { + padding-left: 0; + + &__account { color: $secondary-text-color } + } + + &>.unlisted-quote>button { color: $ui-text-color } +} + +@if $dense { + .quote-status { + padding: 8px 8px 8px 58px; + margin-top: 4px; + + .detailed-status__display-avatar, + .status__avatar { + top: 8px !important; + left: 8px !important; + } + } +} \ 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 0f869efac..aa5f7a607 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 @@ -2,5 +2,5 @@ //@import '../../plugins/cards'; //@import '../../plugins/dense'; @import '../../plugins/fedibird'; -@import '../../plugins/itabashi'; +@import '../../plugins/quote'; //@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 0f869efac..aa5f7a607 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 @@ -2,5 +2,5 @@ //@import '../../plugins/cards'; //@import '../../plugins/dense'; @import '../../plugins/fedibird'; -@import '../../plugins/itabashi'; +@import '../../plugins/quote'; //@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 0f869efac..aa5f7a607 100644 --- a/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss @@ -2,5 +2,5 @@ //@import '../../plugins/cards'; //@import '../../plugins/dense'; @import '../../plugins/fedibird'; -@import '../../plugins/itabashi'; +@import '../../plugins/quote'; //@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 0f869efac..aa5f7a607 100644 --- a/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss @@ -2,5 +2,5 @@ //@import '../../plugins/cards'; //@import '../../plugins/dense'; @import '../../plugins/fedibird'; -@import '../../plugins/itabashi'; +@import '../../plugins/quote'; //@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 0f869efac..aa5f7a607 100644 --- a/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss @@ -2,5 +2,5 @@ //@import '../../plugins/cards'; //@import '../../plugins/dense'; @import '../../plugins/fedibird'; -@import '../../plugins/itabashi'; +@import '../../plugins/quote'; //@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 25d7fc413..6c70c314a 100644 --- a/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss +++ b/app/javascript/styles/mastodon-material/profiles/plus/plugins.scss @@ -2,5 +2,5 @@ @import '../../plugins/cards'; @import '../../plugins/dense'; @import '../../plugins/fedibird'; -@import '../../plugins/itabashi'; -@import '../../plugins/plus'; \ No newline at end of file +@import '../../plugins/plus'; +@import '../../plugins/quote'; \ 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 52cce4073..fb818fab0 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,5 +1,3 @@ // Add your settings below -@import '../../color/v2-dark'; - -$separate-address-line: true; \ No newline at end of file +@import '../../color/v2-dark'; \ 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 77477b80a..fd7e7a42e 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 @@ -2,5 +2,5 @@ //@import '../../plugins/cards'; @import '../../plugins/dense'; @import '../../plugins/fedibird'; -@import '../../plugins/itabashi'; +@import '../../plugins/quote'; //@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 1a8cac504..d250ece15 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,5 +1,3 @@ // Add your settings below -@import '../../color/v2-light'; - -$separate-address-line: true; \ No newline at end of file +@import '../../color/v2-light'; \ 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 77477b80a..fd7e7a42e 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 @@ -2,5 +2,5 @@ //@import '../../plugins/cards'; @import '../../plugins/dense'; @import '../../plugins/fedibird'; -@import '../../plugins/itabashi'; +@import '../../plugins/quote'; //@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 8035eb9ba..e6bc6dba3 100644 --- a/app/javascript/styles/mastodon-material/theme/_mixins.scss +++ b/app/javascript/styles/mastodon-material/theme/_mixins.scss @@ -38,10 +38,6 @@ $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; @@ -279,4 +275,11 @@ $shadow-color-3: rgba(0,0,0,.12); } } } +} + +// plugin version checker +@mixin plugin-version-check($plugin-name, $target-version, $website) { + @if $target-version != $version { + @debug "[Info] #{$plugin-name} is made for Mastodon Material #{$target-version}. Some css elements might be broken! Check plugin website: #{$website}"; + } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/about.scss b/app/javascript/styles/mastodon-material/theme/about.scss index ea78fde16..5010eb1ab 100644 --- a/app/javascript/styles/mastodon-material/theme/about.scss +++ b/app/javascript/styles/mastodon-material/theme/about.scss @@ -47,4 +47,10 @@ &__brand svg { fill: $ui-text-color } } -.information-board__section span:last-child { color: $ui-text-color } \ No newline at end of file +.information-board__section span:last-child { color: $ui-text-color } + +.rules-list { + background: $card-bg-color; + border: 1px solid $border-color; + border-radius: $card-radius; +} \ 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 c8663156c..7f03b706d 100644 --- a/app/javascript/styles/mastodon-material/theme/account.scss +++ b/app/javascript/styles/mastodon-material/theme/account.scss @@ -7,16 +7,9 @@ &__avatar { border-radius: $avatar-radius; - width: 40px; - height: 40px; &-overlay { - &-base { - border-radius: $avatar-radius; - width: 44px; - height: 44px; - background-size: 44px; - } + &-base { border-radius: $avatar-radius } &-overlay { border-radius: $avatar-radius } } @@ -27,6 +20,8 @@ margin-right: 16px; } + &__action-bar { width: 40px } + &__header { &__bar { background: $card-bg-color; @@ -174,10 +169,11 @@ a { padding: 16px 0; color: $tab-item-color; + border-bottom: $tab-indicator-thickness solid transparent; &.active { color: $tab-item-active-color; - border-bottom: 4px solid $tab-item-active-color; + border-bottom: $tab-indicator-thickness solid $tab-item-active-color; &::before, &:after { border: none } diff --git a/app/javascript/styles/mastodon-material/theme/base_config.scss b/app/javascript/styles/mastodon-material/theme/base_config.scss index 16af30390..a3f28a18e 100644 --- a/app/javascript/styles/mastodon-material/theme/base_config.scss +++ b/app/javascript/styles/mastodon-material/theme/base_config.scss @@ -21,10 +21,6 @@ $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 19c5dae19..3c8c52ca7 100644 --- a/app/javascript/styles/mastodon-material/theme/button.scss +++ b/app/javascript/styles/mastodon-material/theme/button.scss @@ -11,7 +11,11 @@ &:hover { color: $icon-button-active-hover-color } } - &.disabled { color: $disabled-icon-color } + &.disabled { + color: $disabled-icon-color; + + &:hover { color: $disabled-icon-color } + } &.inverted { color: $icon-button-color; diff --git a/app/javascript/styles/mastodon-material/theme/columns.scss b/app/javascript/styles/mastodon-material/theme/columns.scss index c543d7bd7..57204f20e 100644 --- a/app/javascript/styles/mastodon-material/theme/columns.scss +++ b/app/javascript/styles/mastodon-material/theme/columns.scss @@ -510,14 +510,14 @@ background: $tab-bg-color; color: $tab-item-color; font-size: 16px; - border-bottom: 2px solid transparent; + border-bottom: $tab-indicator-thickness solid transparent; padding: 12px 0 10px; span { font-size: 14px } &.active { color: $tab-item-active-color; - border-bottom: 2px solid $tab-item-active-color; + border-bottom: $tab-indicator-thickness solid $tab-item-active-color; &::before, &:after { border: none } @@ -538,6 +538,11 @@ } &__display-name:hover { color: inherit } + + &__relative_time { + color: $info-text-color; + padding-bottom: 0; + } } .notification-favourite .status.status-direct { diff --git a/app/javascript/styles/mastodon-material/theme/components.scss b/app/javascript/styles/mastodon-material/theme/components.scss index 23c8ce941..55a289b9b 100644 --- a/app/javascript/styles/mastodon-material/theme/components.scss +++ b/app/javascript/styles/mastodon-material/theme/components.scss @@ -740,4 +740,11 @@ color: $secondary-text-color; } } +} + +.timeline-hint { + color: $ui-text-color; + padding: 16px; + + a { color: $link-text-color } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/containers.scss b/app/javascript/styles/mastodon-material/theme/containers.scss index cef368f09..7ef6a6495 100644 --- a/app/javascript/styles/mastodon-material/theme/containers.scss +++ b/app/javascript/styles/mastodon-material/theme/containers.scss @@ -38,7 +38,7 @@ .detailed-status { padding: 16px } .footer { - padding-top: 16px; + padding-top: 32px; padding-bottom: 64px; color: $ui-text-color; diff --git a/app/javascript/styles/mastodon-material/theme/icons.scss b/app/javascript/styles/mastodon-material/theme/icons.scss index 091ccf247..a03920fe5 100644 --- a/app/javascript/styles/mastodon-material/theme/icons.scss +++ b/app/javascript/styles/mastodon-material/theme/icons.scss @@ -16,6 +16,6 @@ border: none; padding: 4px; border-radius: 50%; - width: 16px; - height: 16px; + width: 14px; + height: 14px; } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/material-icons.scss b/app/javascript/styles/mastodon-material/theme/material-icons.scss index e070f98f9..9460e79a2 100644 --- a/app/javascript/styles/mastodon-material/theme/material-icons.scss +++ b/app/javascript/styles/mastodon-material/theme/material-icons.scss @@ -223,6 +223,12 @@ button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ { background-image: url('data:image/svg+xml;utf8,'); } +// private boost +button.icon-button.reblogPrivate i.fa-retweet, +button.icon-button.reblogPrivate:hover i.fa-retweet { + background-image: url('data:image/svg+xml;utf8,'); +} + // dropdown icon .compose-form__poll-wrapper select, .simple_form select { diff --git a/app/javascript/styles/mastodon-material/theme/modal.scss b/app/javascript/styles/mastodon-material/theme/modal.scss index 9a07977ce..d9e9cfdad 100644 --- a/app/javascript/styles/mastodon-material/theme/modal.scss +++ b/app/javascript/styles/mastodon-material/theme/modal.scss @@ -61,16 +61,19 @@ .status { background: $card-bg-color; border-bottom-color: $border-color; - padding-top: 12px; - padding-bottom: 12px; + padding: 12px 16px; &__avatar { - left: 12px; + width: 40px; + height: 40px; + left: 16px; top: 12px; } } } +.boost-modai__status-header { padding-left: 56px } + .report-modal { @include shadow-24dp; background: $card-bg-color; diff --git a/app/javascript/styles/mastodon-material/theme/statuses.scss b/app/javascript/styles/mastodon-material/theme/statuses.scss index 55851e24a..6208f8e00 100644 --- a/app/javascript/styles/mastodon-material/theme/statuses.scss +++ b/app/javascript/styles/mastodon-material/theme/statuses.scss @@ -1,15 +1,19 @@ .status { - padding: 12px 12px 4px 70px; + padding: 16px 16px 8px 72px; border-bottom: 1px solid $border-color; - &__expand { width: 70px } + &__expand { width: 72px } &__info { font-size: $name-font-size; - padding-right: 4px; + + .status__display-name { padding-right: 24px } } - &__relative-time { color: $info-text-color } + &__relative-time { + color: $info-text-color; + padding-bottom: 0; + } &__display-name { color: $secondary-text-color; @@ -18,13 +22,13 @@ } &__avatar { - left: 12px; - top: 12px; + left: 16px; + top: 16px; } &__content { font-size: $status-font-size; - padding-top: 4px; + padding-top: 8px; color: $primary-text-color; a { @@ -126,8 +130,9 @@ .status-card { color: $icon-color; border-color: $border-color; + border-radius: $card-radius; outline: none; - margin-top: 16px; + margin: 8px 0; &__image { background: transparent; @@ -204,6 +209,7 @@ a.status-card { } .display-name { color: $secondary-text-color } + .display-name strong { color: $primary-text-color } } @@ -259,7 +265,6 @@ a.status-card { .display-name { &__html { color: $primary-text-color } &__account { color: $secondary-text-color } - strong { @include separate-address-line } } .activity-stream { diff --git a/app/javascript/styles/mastodon-material/theme/theme.scss b/app/javascript/styles/mastodon-material/theme/theme.scss index c66c07979..ca2234c0a 100644 --- a/app/javascript/styles/mastodon-material/theme/theme.scss +++ b/app/javascript/styles/mastodon-material/theme/theme.scss @@ -3,4 +3,8 @@ * Copyright (C) 2021 Rintan, Genbu Project */ -@import 'about', 'account', 'admin', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'forms', 'icons', 'media', 'modal', 'responsive', 'statuses', 'tables', 'variables', 'widgets'; \ No newline at end of file +$version: "1.0.0"; + +@import 'about', 'account', 'admin', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'forms', 'icons', 'media', 'modal', 'responsive', 'statuses', 'tables', 'variables', 'widgets'; + +$dense: false; \ No newline at end of file From a78f7b62aab211607ed6f66b3bcc7c7757a15617 Mon Sep 17 00:00:00 2001 From: Rintan <12230083+Rintan@users.noreply.github.com> Date: Tue, 3 Aug 2021 22:39:48 +0900 Subject: [PATCH 2/2] update material theme add y-zu auto theme --- .../mastodon-material/plugins/plus.scss | 71 +++++++++++++++++++ .../mastodon-material/theme/_mixins.scss | 6 +- .../styles/mastodon-material/theme/about.scss | 2 + .../mastodon-material/theme/statuses.scss | 2 +- .../mastodon-material/theme/widgets.scss | 10 ++- app/javascript/styles/y-zu-auto.scss | 2 + config/locales/en.yml | 1 + config/locales/ja.yml | 1 + config/themes.yml | 1 + 9 files changed, 89 insertions(+), 7 deletions(-) create mode 100644 app/javascript/styles/mastodon-material/plugins/plus.scss create mode 100644 app/javascript/styles/y-zu-auto.scss diff --git a/app/javascript/styles/mastodon-material/plugins/plus.scss b/app/javascript/styles/mastodon-material/plugins/plus.scss new file mode 100644 index 000000000..7d5486561 --- /dev/null +++ b/app/javascript/styles/mastodon-material/plugins/plus.scss @@ -0,0 +1,71 @@ +$name: Plus; +$target-version: "1.0.0"; +$website: ""; +@include version-check($name, $target-version, $website); + +.status__action-bar-button { + background: #eeeeee; + width: 28px !important; + height: 28px !important; + + .fa { vertical-align: bottom } +} + +// exception +.media-modal__overlay .picture-in-picture__footer .icon-button, +.status__action-bar-button.icon-button--with-counter { background: transparent } + +// favorite icon +.star-icon.active, +.star-icon.icon-button.active.activate, +.notification__favourite-icon-wrapper .star-icon { background: #db4437 } + +.notification__favourite-icon-wrapper { + left: -34px; + + .star-icon { + border-radius: 50%; + width: 28px; + height: 28px; + vertical-align: baseline; + font-size: 18px; + + &.fa-fw::before { vertical-align: middle } + } +} + +// Fedibird bottom bar in mobile +.tabs-bar.bottom-bar { + background: #212121; + + .tabs-bar__link { + color: transparentize(#ffffff, 0.5); + + &.active { color: #ffffff } + } +} + +// Quote +.quote-status { + border-radius: 0; + border: none; + border-top: 1px solid $border-color; + padding: 16px 16px 16px 48px; + margin-top: 16px; + + .detailed-status__display-avatar, + .status__avatar { + left: 0 !important; + top: 16px !important; + } +} + +@if $dense { + .quote-status { + padding: 0; + margin-top: 16px; + + .detailed-status__display-avatar, + .status__avatar { top: 8px !important } + } +} \ 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 e6bc6dba3..412c4c762 100644 --- a/app/javascript/styles/mastodon-material/theme/_mixins.scss +++ b/app/javascript/styles/mastodon-material/theme/_mixins.scss @@ -277,9 +277,9 @@ $shadow-color-3: rgba(0,0,0,.12); } } -// plugin version checker -@mixin plugin-version-check($plugin-name, $target-version, $website) { +// version checker +@mixin version-check($name, $target-version, $website) { @if $target-version != $version { - @debug "[Info] #{$plugin-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! Check plugin website: #{$website}"; } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/about.scss b/app/javascript/styles/mastodon-material/theme/about.scss index 5010eb1ab..69ee6e664 100644 --- a/app/javascript/styles/mastodon-material/theme/about.scss +++ b/app/javascript/styles/mastodon-material/theme/about.scss @@ -53,4 +53,6 @@ background: $card-bg-color; border: 1px solid $border-color; border-radius: $card-radius; + + &__text { color: $primary-text-color } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/statuses.scss b/app/javascript/styles/mastodon-material/theme/statuses.scss index 6208f8e00..18054c4f4 100644 --- a/app/javascript/styles/mastodon-material/theme/statuses.scss +++ b/app/javascript/styles/mastodon-material/theme/statuses.scss @@ -283,4 +283,4 @@ a.status-card { } } -.entry.h-cite.p-comment.entry-successor { border-top: 1px solid $border-color } \ No newline at end of file +.entry.h-cite.p-comment.entry-successor:first-child { border-top: 1px solid $border-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 050e9b127..4dc9a78f3 100644 --- a/app/javascript/styles/mastodon-material/theme/widgets.scss +++ b/app/javascript/styles/mastodon-material/theme/widgets.scss @@ -66,13 +66,17 @@ .contact-widget { color: $ui-text-color; + padding: 8px; - h4 { color: $ui-text-color } + h4 { + color: $ui-text-color; + padding: 0 0 8px; + } - .account { padding: 4px 0 8px } + .account { padding: 8px 0 } &>a { - padding: 0 8px 4px; + padding: 8px 0; color: $primary-text-color; } } diff --git a/app/javascript/styles/y-zu-auto.scss b/app/javascript/styles/y-zu-auto.scss new file mode 100644 index 000000000..c9bd70433 --- /dev/null +++ b/app/javascript/styles/y-zu-auto.scss @@ -0,0 +1,2 @@ +@use 'y-zu-dark'; +@media (prefers-color-scheme: light) { @import 'y-zu-light'; } \ No newline at end of file diff --git a/config/locales/en.yml b/config/locales/en.yml index 54b21660f..3fc38dbc8 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1387,6 +1387,7 @@ en: plus: Plus y-zu-dark: Y-zu (Dark) y-zu-light: Y-zu (Light) + y-zu-auto: Y-zu (Auto) time: formats: default: "%b %d, %Y, %H:%M" diff --git a/config/locales/ja.yml b/config/locales/ja.yml index 5284ad799..a7ab70945 100644 --- a/config/locales/ja.yml +++ b/config/locales/ja.yml @@ -1365,6 +1365,7 @@ ja: plus: Plus y-zu-dark: Y-zu (ダーク) y-zu-light: Y-zu (ライト) + y-zu-auto: Y-zu (自動) time: formats: default: "%Y年%m月%d日 %H:%M" diff --git a/config/themes.yml b/config/themes.yml index df530bd65..cea5258c2 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -14,3 +14,4 @@ mastodon-material-auto: styles/mastodon-material-auto.scss plus: styles/plus.scss y-zu-dark: styles/y-zu-dark.scss y-zu-light: styles/y-zu-light.scss +y-zu-auto: styles/y-zu-auto.scss