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