From 15b28354e4d2d5fd4e17ad87d8019000e9e72f27 Mon Sep 17 00:00:00 2001
From: Rintan <12230083+Rintan@users.noreply.github.com>
Date: Mon, 17 May 2021 02:31:09 +0900
Subject: [PATCH] =?UTF-8?q?=E6=9C=80=E6=96=B0=E7=89=88Material=E3=83=86?=
=?UTF-8?q?=E3=83=BC=E3=83=9E=E3=81=AE=E3=83=86=E3=82=B9=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../styles/mastodon-material/color/black.scss | 16 +--
.../color/mastodon-dark.scss | 16 +--
.../color/mastodon-light.scss | 16 +--
.../mastodon-material/color/plus-classic.scss | 16 +--
.../mastodon-material/color/v1-dark.scss | 16 +--
.../mastodon-material/color/v1-light.scss | 16 +--
.../mastodon-material/color/v2-dark.scss | 16 +--
.../mastodon-material/color/v2-light.scss | 17 +--
.../mastodon-material/layout/material-v1.scss | 4 +
.../mastodon-material/layout/material-v2.scss | 5 +
.../mastodon-material/plugins/dense.scss | 14 +-
.../mastodon-material/plugins/fedibird.scss | 24 ++++
.../mastodon-material/plugins/plus.scss | 11 ++
.../profiles/y-zu-dark/color.scss | 9 +-
.../profiles/y-zu-dark/icon_config.scss | 2 +
.../profiles/y-zu-light/color.scss | 9 +-
.../profiles/y-zu-light/icon_config.scss | 3 +
.../profiles/y-zu-light/plugins.scss | 1 +
.../mastodon-material/theme/_mixins.scss | 1 +
.../mastodon-material/theme/account.scss | 32 +++--
.../styles/mastodon-material/theme/admin.scss | 127 ++++++++++++++++--
.../theme/base_icon_config.scss | 2 +
.../mastodon-material/theme/basics.scss | 6 +-
.../mastodon-material/theme/button.scss | 18 ++-
.../mastodon-material/theme/columns.scss | 54 +++++++-
.../mastodon-material/theme/components.scss | 34 ++++-
.../mastodon-material/theme/containers.scss | 14 +-
.../mastodon-material/theme/emoji-picker.scss | 8 +-
.../styles/mastodon-material/theme/forms.scss | 20 ++-
.../theme/material-icons.scss | 37 ++++-
.../styles/mastodon-material/theme/modal.scss | 9 +-
.../mastodon-material/theme/responsive.scss | 54 +++++---
.../mastodon-material/theme/statuses.scss | 15 ++-
.../mastodon-material/theme/tables.scss | 19 ++-
.../styles/mastodon-material/theme/theme.scss | 4 +-
35 files changed, 491 insertions(+), 174 deletions(-)
create mode 100644 app/javascript/styles/mastodon-material/plugins/fedibird.scss
diff --git a/app/javascript/styles/mastodon-material/color/black.scss b/app/javascript/styles/mastodon-material/color/black.scss
index 67c8cd7d5..3e7eca223 100644
--- a/app/javascript/styles/mastodon-material/color/black.scss
+++ b/app/javascript/styles/mastodon-material/color/black.scss
@@ -34,6 +34,7 @@ $menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #121212;
$card-bg-hover-color: lighten($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #000000;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
@@ -124,18 +125,11 @@ $search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
+$tab-item-color: transparentize(#ffffff, 0.5);
+$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #121212;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
diff --git a/app/javascript/styles/mastodon-material/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material/color/mastodon-dark.scss
index 626de6075..d697c5ee5 100644
--- a/app/javascript/styles/mastodon-material/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material/color/mastodon-dark.scss
@@ -34,6 +34,7 @@ $menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #313543;
$card-bg-hover-color: lighten($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #282c37;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
@@ -124,18 +125,11 @@ $search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
-$tab-indicator-color: #d9e1e8;
-$tab-indicator-active-color: $top-bar-icon-color;
+$tab-item-color: #d9e1e8;
+$tab-item-active-color: $primary-color;
$tab-bg-color: #1f232b;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
diff --git a/app/javascript/styles/mastodon-material/color/mastodon-light.scss b/app/javascript/styles/mastodon-material/color/mastodon-light.scss
index 833dca194..d2e890f04 100644
--- a/app/javascript/styles/mastodon-material/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material/color/mastodon-light.scss
@@ -33,6 +33,7 @@ $menu-bg-active-color: darken($bg-color, 10%);
$menu-bg-active-hover-color: darken($bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
@@ -123,18 +124,11 @@ $search-bar-color: #d9e1e8;
$search-bar-focus-color: $bg-color;
// Tab color
-$tab-indicator-color: #282c37;
-$tab-indicator-active-color: $top-bar-icon-color;
+$tab-item-color: #282c37;
+$tab-item-active-color: $primary-color;
$tab-bg-color: #e6ebf0;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-bg-color: $tab-bg-color;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
diff --git a/app/javascript/styles/mastodon-material/color/plus-classic.scss b/app/javascript/styles/mastodon-material/color/plus-classic.scss
index cc8b89f2f..837b850cb 100644
--- a/app/javascript/styles/mastodon-material/color/plus-classic.scss
+++ b/app/javascript/styles/mastodon-material/color/plus-classic.scss
@@ -34,6 +34,7 @@ $menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
@@ -123,18 +124,11 @@ $search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
+$tab-item-color: transparentize(#ffffff, 0.5);
+$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
diff --git a/app/javascript/styles/mastodon-material/color/v1-dark.scss b/app/javascript/styles/mastodon-material/color/v1-dark.scss
index d0bde6154..d8d65d4f4 100644
--- a/app/javascript/styles/mastodon-material/color/v1-dark.scss
+++ b/app/javascript/styles/mastodon-material/color/v1-dark.scss
@@ -34,6 +34,7 @@ $menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #424242;
$card-bg-hover-color: lighten($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #424242;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
@@ -123,18 +124,11 @@ $search-bar-color: lighten($bg-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
+$tab-item-color: transparentize(#ffffff, 0.5);
+$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #424242;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
diff --git a/app/javascript/styles/mastodon-material/color/v1-light.scss b/app/javascript/styles/mastodon-material/color/v1-light.scss
index 58bb0ad4e..35e1054ae 100644
--- a/app/javascript/styles/mastodon-material/color/v1-light.scss
+++ b/app/javascript/styles/mastodon-material/color/v1-light.scss
@@ -34,6 +34,7 @@ $menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
@@ -124,18 +125,11 @@ $search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
+$tab-item-color: transparentize(#ffffff, 0.5);
+$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
diff --git a/app/javascript/styles/mastodon-material/color/v2-dark.scss b/app/javascript/styles/mastodon-material/color/v2-dark.scss
index 842c6f648..feb8669a3 100644
--- a/app/javascript/styles/mastodon-material/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material/color/v2-dark.scss
@@ -34,6 +34,7 @@ $menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #1e1e1e;
$card-bg-hover-color: lighten($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #1e1e1e;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
@@ -124,18 +125,11 @@ $search-bar-color: lighten($top-bar-color, 18%);
$search-bar-focus-color: #ffffff;
// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
+$tab-item-color: transparentize(#ffffff, 0.5);
+$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #1e1e1e;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
diff --git a/app/javascript/styles/mastodon-material/color/v2-light.scss b/app/javascript/styles/mastodon-material/color/v2-light.scss
index 10e7a0b91..0e853ed39 100644
--- a/app/javascript/styles/mastodon-material/color/v2-light.scss
+++ b/app/javascript/styles/mastodon-material/color/v2-light.scss
@@ -34,6 +34,7 @@ $menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: $bg-color;
$card-bg-hover-color: darken($card-bg-color, 6%);
+$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: $bg-color;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
@@ -124,18 +125,12 @@ $search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
+$tab-item-color: transparentize(#000000, 0.5);
+$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-bg-color: #ffffff;
-$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
+
// Media indicator color
$media-page-indicator-color: #9e9e9e;
diff --git a/app/javascript/styles/mastodon-material/layout/material-v1.scss b/app/javascript/styles/mastodon-material/layout/material-v1.scss
index 661cc55a4..7746e0eb7 100644
--- a/app/javascript/styles/mastodon-material/layout/material-v1.scss
+++ b/app/javascript/styles/mastodon-material/layout/material-v1.scss
@@ -30,6 +30,10 @@ $dialog-radius: 2px;
$menu-radius: 2px;
+// Table radius settings
+$table-radius: 2px;
+
+
// Media radius settings
$media-radius: 0;
diff --git a/app/javascript/styles/mastodon-material/layout/material-v2.scss b/app/javascript/styles/mastodon-material/layout/material-v2.scss
index 98a3285c7..cc2c8d298 100644
--- a/app/javascript/styles/mastodon-material/layout/material-v2.scss
+++ b/app/javascript/styles/mastodon-material/layout/material-v2.scss
@@ -33,6 +33,11 @@ $dialog-radius: 8px;
$menu-radius: 8px;
+// Table radius settings
+$table-radius: 8px;
+//$table-radius: 2px;
+
+
// Media radius settings
$media-radius: 0;
//$media-radius: 2px;
diff --git a/app/javascript/styles/mastodon-material/plugins/dense.scss b/app/javascript/styles/mastodon-material/plugins/dense.scss
index 070bd9d69..1a9ad31d1 100644
--- a/app/javascript/styles/mastodon-material/plugins/dense.scss
+++ b/app/javascript/styles/mastodon-material/plugins/dense.scss
@@ -55,7 +55,15 @@
top: 10px;
}
- &__content { padding-top: 2px }
+ &__content {
+ padding-top: 2px;
+
+ &__spoiler-link,
+ &__read-more-button {
+ height: auto;
+ padding: 4px 8px;
+ }
+ }
&__action-bar-button {
margin: 0 4px;
@@ -72,6 +80,10 @@
}
}
+@media screen and (min-width: 630px) {
+ .columns-area--mobile .status { padding: 8px 8px 8px 78px }
+}
+
.detailed-status {
padding: 14px;
diff --git a/app/javascript/styles/mastodon-material/plugins/fedibird.scss b/app/javascript/styles/mastodon-material/plugins/fedibird.scss
new file mode 100644
index 000000000..2d92ecbf3
--- /dev/null
+++ b/app/javascript/styles/mastodon-material/plugins/fedibird.scss
@@ -0,0 +1,24 @@
+.drawer__tab.short-label {
+ padding: 8px;
+
+ .drawer__tab__short-label {
+ overflow-x: visible;
+ display: none;
+ }
+
+ i { margin: 0 }
+}
+
+.tabs-bar.bottom-bar {
+ @include shadow-4dp;
+
+ .tabs-bar {
+ &__link.active { border-bottom: none }
+ }
+
+ &__link span { margin-left: 0 }
+}
+
+@media screen and (max-width: 1190px) {
+ .tabs-bar__wrapper .tabs-bar.bottom-bar { width: 100% }
+}
\ 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 36ef1cebb..ad0ed709c 100644
--- a/app/javascript/styles/mastodon-material/plugins/plus.scss
+++ b/app/javascript/styles/mastodon-material/plugins/plus.scss
@@ -27,4 +27,15 @@
&.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 }
+ }
}
\ No newline at end of file
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 b273c0652..92ee05675 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
@@ -38,12 +38,9 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
$border-active-color: $primary-color;
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$icon-tab-indicator-active-color: $primary-color;
-$icon-tab-indicator-hover-color: $icon-hover-color;
+$tab-item-active-color: $primary-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
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 f109ac61c..87566d783 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,3 +1,5 @@
// Add your icon customization below
+$boost-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 7c4349512..7c5023298 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
@@ -43,12 +43,9 @@ $scroll-bar-thumb-color: lighten($icon-color, 30%);
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$text-tab-indicator-color: lighten($top-bar-icon-color, 10%);
-$text-tab-indicator-active-color: $top-bar-icon-color;
-$icon-tab-indicator-active-color: $top-bar-icon-color;
-$icon-tab-indicator-hover-color: $top-bar-icon-hover-color;
+$tab-item-active-color: $primary-color;
+$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
+$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
diff --git a/app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss b/app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss
index f109ac61c..5004c2d1e 100644
--- a/app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss
+++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss
@@ -1,3 +1,6 @@
// Add your icon customization below
+
+$boosted-icon-color: #009688;
+
$icon-font-source: self;
\ 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 292ec7fa6..7a2d83e4d 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,4 +1,5 @@
@import '../../plugins/astarte';
//@import '../../plugins/cards';
@import '../../plugins/dense';
+@import '../../plugins/fedibird'
//@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 7c45fb0b7..a1520380d 100644
--- a/app/javascript/styles/mastodon-material/theme/_mixins.scss
+++ b/app/javascript/styles/mastodon-material/theme/_mixins.scss
@@ -60,6 +60,7 @@ $shadow-color-3: rgba(0,0,0,.12);
@mixin button-type($button-type) {
border-radius: $button-radius;
display: inline-block;
+ font-weight: 500;
@if $button-type == contained {
@if $button-shadow { @include shadow-1dp }
diff --git a/app/javascript/styles/mastodon-material/theme/account.scss b/app/javascript/styles/mastodon-material/theme/account.scss
index b045a96cb..c8663156c 100644
--- a/app/javascript/styles/mastodon-material/theme/account.scss
+++ b/app/javascript/styles/mastodon-material/theme/account.scss
@@ -88,7 +88,7 @@
&__fields {
border: 1px solid $border-color;
- border-radius: 4px;
+ border-radius: $table-radius;
.verified {
border: none;
@@ -106,12 +106,20 @@
&:last-child { border-bottom: 0 }
}
+ dd,
dt {
color: $primary-text-color;
- background: $list-bg-inactive-color;
+ padding: 16px;
}
dd { color: $primary-text-color }
+
+ dt { background: $list-bg-inactive-color }
+ }
+
+ &__joined {
+ padding: 8px;
+ color: $info-text-color;
}
}
}
@@ -160,24 +168,24 @@
}
&__section-headline {
- background: $text-tab-bg-color;
+ background: $tab-bg-color;
border-bottom: 1px solid $border-color;
a {
padding: 16px 0;
- color: $text-tab-indicator-color;
+ color: $tab-item-color;
&.active {
- color: $text-tab-indicator-active-color;
- border-bottom: 4px solid $text-tab-indicator-active-color;
+ color: $tab-item-active-color;
+ border-bottom: 4px solid $tab-item-active-color;
&::before,
&:after { border: none }
- &:focus { background: $text-tab-indicator-bg-focus-color }
+ &:focus { background: $tab-bg-focus-color }
}
- &:hover { background: $text-tab-indicator-bg-hover-color }
+ &:hover { background: $tab-bg-hover-color }
}
}
@@ -264,4 +272,12 @@
width: 16px;
height: 16px;
}
+}
+
+.nothing-here {
+ background: $card-bg-color;
+ color: $ui-text-color;
+ padding: 16px;
+
+ &--under-tabs { border-radius: 0 0 $card-radius $card-radius }
}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/admin.scss b/app/javascript/styles/mastodon-material/theme/admin.scss
index dd9509a94..d8b5bf57f 100644
--- a/app/javascript/styles/mastodon-material/theme/admin.scss
+++ b/app/javascript/styles/mastodon-material/theme/admin.scss
@@ -65,7 +65,6 @@
h4 {
color: $section-text-color;
- border-top: 1px solid $border-color;
border-bottom: none;
padding: 12px 16px;
}
@@ -83,6 +82,8 @@
.positive-hint { color: $verified-color }
+ .neutral-hint { color: $tips-text-color }
+
.directory__tag h4 { color: $ui-text-color }
&>p {
@@ -118,23 +119,23 @@
}
a {
- color: $text-tab-indicator-color;
+ color: $tab-item-color;
border-bottom: 2px solid transparent;
padding: 8px;
&.selected {
- color: $text-tab-indicator-active-color;
- border-bottom: 2px solid $text-tab-indicator-active-color;
+ color: $tab-item-active-color;
+ border-bottom: 2px solid $tab-item-active-color;
&:hover {
- color: $text-tab-indicator-active-color;
- border-bottom: 2px solid $text-tab-indicator-active-color;
+ color: $tab-item-active-color;
+ border-bottom: 2px solid $tab-item-active-color;
}
}
&:hover {
- color: $text-tab-indicator-color;
- background: $text-tab-indicator-bg-hover-color;
+ color: $tab-item-color;
+ background: $tab-bg-hover-color;
border-bottom: 2px solid transparent;
}
}
@@ -148,4 +149,112 @@ body {
a { color: $link-text-color }
}
-}
\ No newline at end of file
+
+ .neutral-hint { color: $tips-text-color }
+}
+
+.report-card {
+ @include shadow-1dp;
+ background: $card-bg-color;
+ border-radius: $card-radius;
+ margin-bottom: 16px;
+
+ &__profile {
+ padding: 16px;
+
+ &__stats {
+ color: $info-text-color;
+
+ .red { color: $error-color }
+ }
+ }
+
+ &__summary__item {
+ border-top: 1px solid $border-color;
+
+ &:hover { background: $card-bg-color }
+
+ &__assigned,
+ &__reported-by { color: $ui-text-color }
+
+ &__content {
+ a {
+ padding: 16px;
+ color: $primary-text-color;
+ }
+
+ &__icon {
+ color: $icon-color;
+ margin-right: 8px;
+ }
+ }
+ }
+}
+
+
+.log-entry {
+ padding: 16px 0;
+ background: $list-bg-color;
+ 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 }
+
+ &__header {
+ color: $ui-text-color;
+ padding: 0 16px;
+ }
+
+ &__avatar { margin-right: 16px }
+
+ &__timestamp { color: $info-text-color }
+
+ .target,
+ .username,
+ a { color: $primary-text-color }
+}
+
+.dashboard {
+ &__counters {
+ &__num,
+ &__text {
+ color: $secondary-text-color;
+ margin-bottom: 16px;
+ }
+
+ &__label { color: $ui-text-color }
+
+ &>div {
+ padding: 0 8px;
+ margin-bottom: 16px;
+
+ &>div,
+ &>a {
+ @include shadow-1dp;
+ padding: 16px;
+ background: $card-bg-color;
+ border-radius: $card-radius;
+
+ &:active,
+ &:focus,
+ &:hover { background: $card-bg-hover-color }
+ }
+ }
+ }
+
+ &__widgets {
+ &>div {
+ margin-bottom: 16px;
+
+ &>div { padding: 0 8px }
+ }
+
+ a:not(.name-tag) { color: $ui-text-color }
+ }
+}
+
+.inline-name-tag,
+.name-tag,
+a.inline-name-tag,
+a.name-tag { color: $ui-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/base_icon_config.scss b/app/javascript/styles/mastodon-material/theme/base_icon_config.scss
index 2081d8828..e8c895904 100644
--- a/app/javascript/styles/mastodon-material/theme/base_icon_config.scss
+++ b/app/javascript/styles/mastodon-material/theme/base_icon_config.scss
@@ -8,6 +8,8 @@ $favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #db4437; // +1
//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
+$boosted-icon-color: $primary-color;
+
// Reply icon settings
$reply-icon: "reply";
diff --git a/app/javascript/styles/mastodon-material/theme/basics.scss b/app/javascript/styles/mastodon-material/theme/basics.scss
index 27adf1e86..9045db11f 100644
--- a/app/javascript/styles/mastodon-material/theme/basics.scss
+++ b/app/javascript/styles/mastodon-material/theme/basics.scss
@@ -1,7 +1,11 @@
body,
body.embed,
body.admin,
-body.lighter { background: $bg-color }
+body.lighter,
+body.error {
+ background: $bg-color;
+ color: $ui-text-color;
+}
.focusable:focus { background: transparent }
diff --git a/app/javascript/styles/mastodon-material/theme/button.scss b/app/javascript/styles/mastodon-material/theme/button.scss
index fcb59dbbe..2caa05ab9 100644
--- a/app/javascript/styles/mastodon-material/theme/button.scss
+++ b/app/javascript/styles/mastodon-material/theme/button.scss
@@ -119,7 +119,23 @@ label.icon-button {
&.button--block { margin: 8px 0 }
- &.button-secondary { @include button-type($button-on-status) }
+ &.button-secondary {
+ @include button-type($button-on-status);
+
+ &:disabled {
+ color: $disabled-button-color;
+ border: 1px solid $disabled-button-color;
+ opacity: 1;
+
+ &:hover,
+ &:focus,
+ &:active { @include button-type($button-on-status) }
+ }
+
+ &:hover,
+ &:focus,
+ &:active { @include button-type($button-on-status) }
+ }
&.confirmation-modal__cancel-button {
box-shadow: none;
diff --git a/app/javascript/styles/mastodon-material/theme/columns.scss b/app/javascript/styles/mastodon-material/theme/columns.scss
index c275d29e6..ca3f2d6f7 100644
--- a/app/javascript/styles/mastodon-material/theme/columns.scss
+++ b/app/javascript/styles/mastodon-material/theme/columns.scss
@@ -193,6 +193,7 @@
background: $top-bar-color;
color: $top-bar-icon-color;
padding: 16px;
+ height: 48px;
span { visibility: hidden } // hide "back" string
@@ -214,6 +215,8 @@
.columns-area {
@include bg-image;
background-size: contain;
+
+ &__panels__pane { overflow: visible }
}
.setting-text {
@@ -229,8 +232,13 @@
background: $card-bg-color;
font-size: 16px;
contain: initial; // padding fix
+
+ a { color: $link-text-color }
}
+.error-column a,
+.follow_requests-unlocked_explanation a { color: $link-text-color }
+
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
@@ -323,6 +331,8 @@
a { color: $ui-text-color }
p a { color: $link-text-color }
+
+ ul { margin-bottom: 16px }
}
&__trends {
@@ -419,6 +429,37 @@
}
}
+.announcements-list {
+ border: 1px solid $border-color;
+
+ &__item {
+ padding: 16px 0;
+ background: $list-bg-color;
+ border-radius: $table-radius;
+ border-bottom: 1px solid $border-color;
+
+ &__title {
+ padding: 0 16px;
+ color: $primary-text-color;
+ margin-bottom: 8px;
+
+ &:active,
+ &:focus,
+ &:hover { color: $primary-text-color }
+ }
+
+ &__meta {
+ padding: 0 16px;
+ color: $info-text-color;
+ }
+
+ &:hover { background: $list-bg-hover-color }
+
+ &:active,
+ &:focus { background: $list-bg-active-color }
+ }
+}
+
.reactions-bar {
margin-top: 16px;
width: auto;
@@ -464,23 +505,24 @@
button {
background: $tab-bg-color;
- color: $tab-indicator-color;
+ color: $tab-item-color;
font-size: 16px;
+ border-bottom: 2px solid transparent;
+ padding: 12px 0 10px;
span { font-size: 14px }
&.active {
- color: $tab-indicator-active-color;
- border-bottom: 4px solid $tab-indicator-active-color;
- padding: 12px 0 8px;
+ color: $tab-item-active-color;
+ border-bottom: 2px solid $tab-item-active-color;
&::before,
&:after { border: none }
- &:focus { background: $tab-indicator-bg-focus-color }
+ &:focus { background: $tab-bg-focus-color }
}
- &:hover { background: $tab-indicator-bg-hover-color }
+ &:hover { background: $tab-bg-hover-color }
}
}
diff --git a/app/javascript/styles/mastodon-material/theme/components.scss b/app/javascript/styles/mastodon-material/theme/components.scss
index 4e3a69556..d3aa51a2d 100644
--- a/app/javascript/styles/mastodon-material/theme/components.scss
+++ b/app/javascript/styles/mastodon-material/theme/components.scss
@@ -190,6 +190,8 @@
}
.compose-form {
+ padding: 16px;
+
.autosuggest-textarea {
&__textarea {
@include text-area-border($compose-area-border);
@@ -316,6 +318,18 @@
}
}
+.compose-panel {
+ overflow: visible;
+ border-radius: $card-radius;
+
+ .compose-form {
+ @include shadow-1dp;
+ background: $card-bg-color;
+ padding-bottom: 16px;
+ margin-bottom: 0;
+ }
+}
+
.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
@@ -343,10 +357,21 @@
&.checkbox {
border-radius: 2px;
- border: 2px solid $control-border-color;
+ border: 2px solid $control-border-active-color;
padding: 8px;
margin: 8px 10px;
background: none;
+
+ &.active {
+ height: 50%;
+ padding: 5px 0;
+ transform: rotate(-45deg);
+ border: 2px solid $control-border-active-color;
+ border-top-style: none;
+ border-right-style: none;
+
+ &:hover { background: none }
+ }
}
}
@@ -360,6 +385,8 @@
}
&__option {
+ padding: 4px;
+
input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
@@ -367,6 +394,8 @@
border-radius: 2px;
padding: 8px 16px;
}
+
+ &__text { line-height: 36px }
}
&__chart {
@@ -383,6 +412,8 @@
}
&__link { color: $ui-text-color }
+
+ &__number { line-height: 36px }
}
.privacy-dropdown {
@@ -573,6 +604,7 @@
&__list {
@include material-transition;
margin: 16px 0;
+ width: auto;
}
}
diff --git a/app/javascript/styles/mastodon-material/theme/containers.scss b/app/javascript/styles/mastodon-material/theme/containers.scss
index 6891adb1e..cef368f09 100644
--- a/app/javascript/styles/mastodon-material/theme/containers.scss
+++ b/app/javascript/styles/mastodon-material/theme/containers.scss
@@ -10,7 +10,7 @@
&:hover,
&:focus,
- &:active { background: $tab-indicator-bg-hover-color }
+ &:active { background: $tab-bg-hover-color }
}
.nav-link,
@@ -19,7 +19,7 @@
&:hover {
color: $top-bar-text-color;
- background: $tab-indicator-bg-hover-color;
+ background: $tab-bg-hover-color;
text-decoration: none;
}
}
@@ -29,7 +29,7 @@
margin: 0;
border-radius: 0;
- &:hover { background: $tab-indicator-bg-hover-color }
+ &:hover { background: $tab-bg-hover-color }
}
.detailed-status__meta { margin-top: 16px }
@@ -77,7 +77,7 @@
background: linear-gradient(0deg, transparent, transparent 60px, rgba(0, 0, 0, 0.5) 60px, rgba(0, 0, 0, 0.2) 80%, transparent);
&::before {
- background: $text-tab-bg-color;
+ background: $tab-bg-color;
border-radius: 0 0 $card-radius $card-radius;
}
@@ -107,7 +107,7 @@
border-right: none;
&.active {
- &::after { border-bottom: 4px solid $text-tab-indicator-active-color }
+ &::after { border-bottom: 4px solid $tab-item-active-color }
}
&::after {
@@ -115,7 +115,7 @@
opacity: 1;
}
- &:hover { background: $text-tab-indicator-bg-hover-color }
+ &:hover { background: $tab-bg-hover-color }
.counter-number {
color: $ui-text-color;
@@ -178,6 +178,8 @@
.grid { grid-gap: 16px }
}
+.account-header .name { color: $ui-text-color }
+
.brand__tagline { color: $ui-text-color }
.logo-container h1 svg { fill: $ui-text-color }
diff --git a/app/javascript/styles/mastodon-material/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material/theme/emoji-picker.scss
index d6959dbcc..9f8eeffaf 100644
--- a/app/javascript/styles/mastodon-material/theme/emoji-picker.scss
+++ b/app/javascript/styles/mastodon-material/theme/emoji-picker.scss
@@ -43,14 +43,14 @@
}
&-anchor {
- color: $text-tab-indicator-color;
+ color: $tab-item-color;
padding: 10px 4px;
- &-bar { background-color: $icon-tab-indicator-active-color }
+ &-bar { background-color: $tab-item-active-color }
- &-selected { color: $icon-tab-indicator-hover-color }
+ &-selected { color: $tab-item-color }
- &:hover { color: $icon-tab-indicator-hover-color }
+ &:hover { color: $tab-item-color }
}
&-search {
diff --git a/app/javascript/styles/mastodon-material/theme/forms.scss b/app/javascript/styles/mastodon-material/theme/forms.scss
index e5e535d8c..7ca756c70 100644
--- a/app/javascript/styles/mastodon-material/theme/forms.scss
+++ b/app/javascript/styles/mastodon-material/theme/forms.scss
@@ -68,7 +68,10 @@
}
}
- .actions { padding: 16px }
+ .actions {
+ padding: 16px;
+ margin-top: 0;
+ }
.check_boxes .checkbox label {
color: $primary-text-color;
@@ -109,12 +112,13 @@
input[type=url],
textarea {
@include text-area-border($other-text-area-border);
- color: $text-field-color;
- background: $text-field-bg-color;
padding: 16px;
&:active,
- &:focus { background: $text-field-bg-color }
+ &:focus {
+ background: $text-field-bg-color;
+ padding: 16px 16px 15px;
+ }
&::placeholder { color: $tips-text-color }
}
@@ -143,6 +147,12 @@
}
&.translation-prompt { color: $ui-text-color }
+
+ &.notice {
+ border: none;
+ background: $succeeded-card-bg-color;
+ color: $verified-color;
+ }
}
.form-footer a { color: $ui-text-color }
@@ -151,6 +161,8 @@
.oauth-prompt {
margin-bottom: 32px;
color: $ui-text-color;
+
+ strong { color: $primary-text-color }
}
.input-copy {
diff --git a/app/javascript/styles/mastodon-material/theme/material-icons.scss b/app/javascript/styles/mastodon-material/theme/material-icons.scss
index 3875d349b..e070f98f9 100644
--- a/app/javascript/styles/mastodon-material/theme/material-icons.scss
+++ b/app/javascript/styles/mastodon-material/theme/material-icons.scss
@@ -71,7 +71,19 @@
&.fa-cloud-upload,
&.fa-cloud-download,
&.fa-mobile-phone, &.fa-mobile,
- &.fa-tablet {
+ &.fa-tablet,
+ &.fa-gavel, &.fa-legal,
+ &.fa-comment,
+ &.fa-camera,
+ &.fa-flag,
+ &.fa-circle,
+ &.fa-dashboard, &.fa-tachometer,
+ &.fa-cloud,
+ &.fa-ban,
+ &.fa-power-off,
+ &.fa-copy, &.fa-files-o,
+ &.fa-smile-o,
+ &.fa-database {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
@@ -151,6 +163,18 @@
&.fa-cloud-download::before { content: "cloud_download" }
&.fa-mobile-phone::before, &.fa-mobile::before { content: "smartphone" }
&.fa-tablet::before { content: "tablet" }
+ &.fa-gavel::before, &.fa-legal::before { content: "admin_panel_settings" }
+ &.fa-comment::before { content: "comment" }
+ &.fa-camera::before { content: "photo_camera" }
+ &.fa-flag::before { content: "flag" }
+ &.fa-circle::before { content: "circle" }
+ &.fa-dashboard::before, &.fa-tachometer::before { content: "dashboard" }
+ &.fa-cloud::before { content: "cloud" }
+ &.fa-ban::before { content: "block" }
+ &.fa-power-off::before { content: "power_settings_new" }
+ &.fa-copy::before, &.fa-files-o::before { content: "content_copy" }
+ &.fa-smile-o::before { content: "emoji_emotions" }
+ &.fa-database::before { content: "storage" }
}
// bookmark icon
@@ -183,14 +207,14 @@ button.icon-button i.fa-retweet {
height: 20px;
width: 20px;
transition: none;
- background-image: url('data:image/svg+xml;utf8,');
+ background-image: url('data:image/svg+xml;utf8,');
}
-.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,') }
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,') }
button.icon-button i.fa-retweet:hover,
button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
- background-image: url('data:image/svg+xml;utf8,');
+ background-image: url('data:image/svg+xml;utf8,');
}
button.icon-button.disabled i.fa-retweet,
@@ -286,4 +310,7 @@ button.table-action-link i.fa {
}
// sidebar icon in settings
-.admin-wrapper .sidebar ul a i.fa { vertical-align: text-bottom }
\ No newline at end of file
+.admin-wrapper .sidebar ul a i.fa { vertical-align: text-bottom }
+
+
+.back-link a .fa { vertical-align: middle }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material/theme/modal.scss b/app/javascript/styles/mastodon-material/theme/modal.scss
index 6efb8bb3c..9a07977ce 100644
--- a/app/javascript/styles/mastodon-material/theme/modal.scss
+++ b/app/javascript/styles/mastodon-material/theme/modal.scss
@@ -43,7 +43,14 @@
color: $ui-text-color;
font-size: 16px;
- &:hover {
+ &.active,
+ &.active button,
+ &:active,
+ &:active button,
+ &:focus,
+ &:focus button,
+ &:hover,
+ &:hover button {
background: $card-bg-hover-color;
color: $ui-text-color;
}
diff --git a/app/javascript/styles/mastodon-material/theme/responsive.scss b/app/javascript/styles/mastodon-material/theme/responsive.scss
index 87cb693f9..90c3af01e 100644
--- a/app/javascript/styles/mastodon-material/theme/responsive.scss
+++ b/app/javascript/styles/mastodon-material/theme/responsive.scss
@@ -3,12 +3,12 @@
&__link {
padding: 16px 16px 12px 16px;
- color: $top-bar-icon-color;
+ color: $tab-item-color;
border-bottom: 4px solid transparent;
&.active {
- border-bottom: 4px solid $tab-indicator-active-color;
- color: $tab-indicator-active-color;
+ border-bottom: 4px solid $tab-item-active-color;
+ color: $tab-item-active-color;
}
.fa { font-size: 20px }
@@ -61,11 +61,24 @@
.fa-times-circle.active { left: unset }
}
+
+ .directory {
+ &__list {
+ grid-gap: 16px;
+ margin: 16px;
+ }
+
+ &__card { margin-bottom: 16px }
+ }
}
// small size screen
@media screen and (max-width: 415px) {
- .public-layout { padding-top: 64px }
+ .public-layout {
+ padding-top: 64px;
+
+ .header { margin: 0 }
+ }
}
// middle size screen
@@ -91,26 +104,29 @@
}
//single column mode
-@media screen and (min-width: 631px) {
- .column:first-child,
- .drawer:first-child { padding-left: 8px }
-
- .column:last-child,
- .drawer:last-child { padding-right: 8px }
-
+@media screen and (min-width: 630px) {
.tabs-bar__link {
&:hover {
- background: $tab-indicator-bg-hover-color;
+ background: $tab-bg-hover-color;
border-bottom-color: transparent;
}
&:active,
&:focus {
- background: $tab-indicator-bg-focus-color;
+ background: $tab-bg-focus-color;
border-bottom-color: $tab-bg-color;
}
- &.active { border-bottom-color: $tab-indicator-active-color }
+ &.active { border-bottom-color: $tab-item-active-color }
+ }
+
+ .columns-area--mobile .status {
+ padding: 16px 16px 16px 80px;
+
+ &__prepend {
+ margin-left: 80px;
+ padding-top: 16px;
+ }
}
}
@@ -131,10 +147,14 @@
.public-layout .public-account-header {
&__bar { background: $card-bg-color }
- &__tabs__name h1 {
- color: $primary-text-color;
+ &__tabs {
+ margin-left: 16px;
- small { color: $secondary-text-color }
+ &__name h1 {
+ color: $primary-text-color;
+
+ small { color: $secondary-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 00b587298..7fd2daa1f 100644
--- a/app/javascript/styles/mastodon-material/theme/statuses.scss
+++ b/app/javascript/styles/mastodon-material/theme/statuses.scss
@@ -39,14 +39,18 @@
&__spoiler-link {
border: 0;
- margin: 0 4px;
+ font-size: 15px;
+ height: 36px;
+ padding: 0 16px;
+ margin: 8px;
color: $text-button-color;
}
&__read-more-button {
@include button-type($button-on-status);
- padding: 4px 6px;
- margin: 4px;
+ height: 36px;
+ padding: 0 16px;
+ margin: 8px 0;
&:hover { text-decoration: none }
}
@@ -155,6 +159,11 @@
a { bottom: auto }
}
+ &__host {
+ margin-top: 6px;
+ color: $secondary-text-color;
+ }
+
&.compact {
border-color: $border-color;
outline: none;
diff --git a/app/javascript/styles/mastodon-material/theme/tables.scss b/app/javascript/styles/mastodon-material/theme/tables.scss
index 3e39d086b..17feb642a 100644
--- a/app/javascript/styles/mastodon-material/theme/tables.scss
+++ b/app/javascript/styles/mastodon-material/theme/tables.scss
@@ -1,12 +1,12 @@
.batch-table {
border: 1px solid $border-color;
- border-radius: 4px;
+ border-radius: $table-radius;
&__toolbar {
border: none;
border-bottom: 1px solid $border-color;
background: $list-bg-color;
- border-radius: 4px 4px 0 0;
+ border-radius: $table-radius $table-radius 0 0;
&__actions { padding-right: 16px }
}
@@ -16,6 +16,12 @@
border-bottom: 1px solid $border-color;
background: $list-bg-color;
+ &__content {
+ padding-top: 16px;
+
+ &__extra { color: $info-text-color }
+ }
+
&:nth-child(2n) {
background: $list-bg-color;
@@ -24,11 +30,13 @@
&:last-child {
border-bottom: none;
- border-radius: 0 0 4px 4px;
+ border-radius: 0 0 $table-radius $table-radius;
}
&:hover { background: $list-bg-hover-color }
}
+
+ .nothing-here { border: none }
}
a.table-action-link,
@@ -50,11 +58,12 @@ button.table-action-link {
.table-wrapper {
margin-bottom: 24px;
- border-radius: 2px;
+ border: 1px solid $border-color;
+ border-radius: $table-radius;
}
.table {
- border: 1px solid $border-color;
+ border-radius: $table-radius;
td,
th {
diff --git a/app/javascript/styles/mastodon-material/theme/theme.scss b/app/javascript/styles/mastodon-material/theme/theme.scss
index a9421cd43..c66c07979 100644
--- a/app/javascript/styles/mastodon-material/theme/theme.scss
+++ b/app/javascript/styles/mastodon-material/theme/theme.scss
@@ -1,6 +1,6 @@
/*
-* Mastodon Material 0.3.0
+* Mastodon Material 1.0.0
* Copyright (C) 2021 Rintan, Genbu Project
*/
-@import 'about', 'account', 'admin', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'icons', 'forms', 'media', 'modal', 'responsive', 'statuses', 'tables', 'variables', 'widgets';
\ No newline at end of file
+@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