From 4b8f6985d59df820b10e7b631133c3b099400daa Mon Sep 17 00:00:00 2001 From: Rintan <12230083+Rintan@users.noreply.github.com> Date: Mon, 29 Mar 2021 12:38:22 +0900 Subject: [PATCH] update material theme --- .../styles/mastodon-material/color/black.scss | 10 +- .../color/mastodon-dark.scss | 10 +- .../color/mastodon-light.scss | 10 +- .../mastodon-material/color/plus-classic.scss | 10 +- .../mastodon-material/color/v1-dark.scss | 10 +- .../mastodon-material/color/v1-light.scss | 10 +- .../mastodon-material/color/v2-dark.scss | 14 +- .../mastodon-material/color/v2-light.scss | 10 +- .../mastodon-material/layout/material-v1.scss | 15 +- .../mastodon-material/layout/material-v2.scss | 17 +- .../profiles/y-zu-dark/color.scss | 25 ++- .../profiles/y-zu-light/color.scss | 13 +- .../mastodon-material/theme/_mixins.scss | 7 + .../mastodon-material/theme/account.scss | 74 +++++++-- .../styles/mastodon-material/theme/admin.scss | 151 ++++++++++++++++++ .../mastodon-material/theme/basics.scss | 3 +- .../mastodon-material/theme/button.scss | 21 +++ .../mastodon-material/theme/components.scss | 63 +++++++- .../mastodon-material/theme/containers.scss | 3 + .../styles/mastodon-material/theme/forms.scss | 137 ++++++++++++++++ .../theme/material-icons.scss | 71 +++++--- .../mastodon-material/theme/responsive.scss | 15 ++ .../mastodon-material/theme/statuses.scss | 14 +- .../mastodon-material/theme/tables.scss | 83 ++++++++++ .../styles/mastodon-material/theme/theme.scss | 2 +- .../mastodon-material/theme/widgets.scss | 41 ++++- 26 files changed, 744 insertions(+), 95 deletions(-) create mode 100644 app/javascript/styles/mastodon-material/theme/admin.scss create mode 100644 app/javascript/styles/mastodon-material/theme/forms.scss create mode 100644 app/javascript/styles/mastodon-material/theme/tables.scss diff --git a/app/javascript/styles/mastodon-material/color/black.scss b/app/javascript/styles/mastodon-material/color/black.scss index 04674b6ff..67c8cd7d5 100644 --- a/app/javascript/styles/mastodon-material/color/black.scss +++ b/app/javascript/styles/mastodon-material/color/black.scss @@ -37,8 +37,12 @@ $card-bg-hover-color: lighten($card-bg-color, 6%); $list-bg-color: #000000; $list-bg-hover-color: lighten($list-bg-color, 6%); $list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-active-hover-color: lighten($list-bg-color, 16%); $list-bg-inactive-color: lighten($list-bg-color, 10%); $text-field-bg-color: $card-bg-color; +$dropdown-field-bg-color: lighten($bg-color, 6%); +$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%); +$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%); $verified-bg-color: darken($verified-color, 20%); $unread-bg-color: transparentize($primary-color, 0.8); @@ -87,11 +91,12 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%); $contained-button-color: $primary-color; $contained-button-hover-color: lighten($contained-button-color, 10%); $outlined-button-color: $primary-color; -$outlined-button-hover-color: transparentize($primary-color, 0.8); -$outlined-button-active-color: transparentize($primary-color, 0.7); +$outlined-button-hover-color: transparentize($outlined-button-color, 0.8); +$outlined-button-active-color: transparentize($outlined-button-color, 0.7); $text-button-color: $primary-color; $text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-focus-color: transparentize($text-button-color, 0.7); +$disabled-button-color: #cccccc; $floating-action-button-color: $primary-color; $floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%); @@ -139,6 +144,7 @@ $media-page-indicator-active-color: #e6e6e6; // Progress indicator color $progress-indicator-color: $primary-color; $progress-indicator-track-color: lighten($progress-indicator-color, 30%); +$loading-indicator-color: $primary-color; // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); diff --git a/app/javascript/styles/mastodon-material/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material/color/mastodon-dark.scss index f78894243..626de6075 100644 --- a/app/javascript/styles/mastodon-material/color/mastodon-dark.scss +++ b/app/javascript/styles/mastodon-material/color/mastodon-dark.scss @@ -37,8 +37,12 @@ $card-bg-hover-color: lighten($card-bg-color, 6%); $list-bg-color: #282c37; $list-bg-hover-color: lighten($list-bg-color, 6%); $list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-active-hover-color: lighten($list-bg-color, 16%); $list-bg-inactive-color: lighten($list-bg-color, 10%); $text-field-bg-color: $card-bg-color; +$dropdown-field-bg-color: lighten($bg-color, 6%); +$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%); +$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%); $verified-bg-color: darken($verified-color, 20%); $unread-bg-color: transparentize($primary-color, 0.8); @@ -87,11 +91,12 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%); $contained-button-color: $primary-color; $contained-button-hover-color: lighten($contained-button-color, 10%); $outlined-button-color: $primary-color; -$outlined-button-hover-color: transparentize($primary-color, 0.8); -$outlined-button-active-color: transparentize($primary-color, 0.7); +$outlined-button-hover-color: transparentize($outlined-button-color, 0.8); +$outlined-button-active-color: transparentize($outlined-button-color, 0.7); $text-button-color: $primary-color; $text-button-hover-color: transparentize($text-button-color, 0.7); $text-button-focus-color: transparentize($text-button-color, 0.6); +$disabled-button-color: #cccccc; $floating-action-button-color: $primary-color; $floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%); @@ -139,6 +144,7 @@ $media-page-indicator-active-color: #e6e6e6; // Progress indicator color $progress-indicator-color: $primary-color; $progress-indicator-track-color: lighten($progress-indicator-color, 30%); +$loading-indicator-color: $primary-color; // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); diff --git a/app/javascript/styles/mastodon-material/color/mastodon-light.scss b/app/javascript/styles/mastodon-material/color/mastodon-light.scss index d6877379c..833dca194 100644 --- a/app/javascript/styles/mastodon-material/color/mastodon-light.scss +++ b/app/javascript/styles/mastodon-material/color/mastodon-light.scss @@ -36,8 +36,12 @@ $card-bg-hover-color: darken($card-bg-color, 6%); $list-bg-color: #ffffff; $list-bg-hover-color: darken($list-bg-color, 6%); $list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-active-hover-color: darken($list-bg-color, 16%); $list-bg-inactive-color: darken($list-bg-color, 10%); $text-field-bg-color: $card-bg-color; +$dropdown-field-bg-color: darken($bg-color, 6%); +$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%); +$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%); $verified-bg-color: lighten($verified-color, 20%); $unread-bg-color: transparentize($primary-color, 0.8); @@ -86,11 +90,12 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%); $contained-button-color: $primary-color; $contained-button-hover-color: lighten($contained-button-color, 10%); $outlined-button-color: $primary-color; -$outlined-button-hover-color: transparentize($primary-color, 0.8); -$outlined-button-active-color: transparentize($primary-color, 0.7); +$outlined-button-hover-color: transparentize($outlined-button-color, 0.8); +$outlined-button-active-color: transparentize($outlined-button-color, 0.7); $text-button-color: $primary-color; $text-button-hover-color: lighten($text-button-color, 36%); $text-button-focus-color: lighten($text-button-color, 30%); +$disabled-button-color: #cccccc; $floating-action-button-color: $primary-color; $floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%); @@ -138,6 +143,7 @@ $media-page-indicator-active-color: #e6e6e6; // Progress indicator color $progress-indicator-color: $primary-color; $progress-indicator-track-color: lighten($progress-indicator-color, 30%); +$loading-indicator-color: $primary-color; // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); diff --git a/app/javascript/styles/mastodon-material/color/plus-classic.scss b/app/javascript/styles/mastodon-material/color/plus-classic.scss index 5d8da861e..cc8b89f2f 100644 --- a/app/javascript/styles/mastodon-material/color/plus-classic.scss +++ b/app/javascript/styles/mastodon-material/color/plus-classic.scss @@ -37,8 +37,12 @@ $card-bg-hover-color: darken($card-bg-color, 6%); $list-bg-color: #ffffff; $list-bg-hover-color: darken($list-bg-color, 6%); $list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-active-hover-color: darken($list-bg-color, 16%); $list-bg-inactive-color: darken($list-bg-color, 10%); $text-field-bg-color: $card-bg-color; +$dropdown-field-bg-color: darken($bg-color, 6%); +$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%); +$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%); $verified-bg-color: lighten($verified-color, 20%); $unread-bg-color: transparentize($primary-color, 0.8); @@ -86,11 +90,12 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%); $contained-button-color: $primary-color; $contained-button-hover-color: lighten($contained-button-color, 10%); $outlined-button-color: $primary-color; -$outlined-button-hover-color: transparentize($primary-color, 0.8); -$outlined-button-active-color: transparentize($primary-color, 0.7); +$outlined-button-hover-color: transparentize($outlined-button-color, 0.8); +$outlined-button-active-color: transparentize($outlined-button-color, 0.7); $text-button-color: $primary-color; $text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-focus-color: transparentize($text-button-color, 0.7); +$disabled-button-color: #cccccc; $floating-action-button-color: $secondary-color; $floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%); @@ -138,6 +143,7 @@ $media-page-indicator-active-color: #e6e6e6; // Progress indicator color $progress-indicator-color: $primary-color; $progress-indicator-track-color: lighten($progress-indicator-color, 30%); +$loading-indicator-color: $primary-color; // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); diff --git a/app/javascript/styles/mastodon-material/color/v1-dark.scss b/app/javascript/styles/mastodon-material/color/v1-dark.scss index 06b7d2276..d0bde6154 100644 --- a/app/javascript/styles/mastodon-material/color/v1-dark.scss +++ b/app/javascript/styles/mastodon-material/color/v1-dark.scss @@ -37,8 +37,12 @@ $card-bg-hover-color: lighten($card-bg-color, 6%); $list-bg-color: #424242; $list-bg-hover-color: lighten($list-bg-color, 6%); $list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-active-hover-color: lighten($list-bg-color, 16%); $list-bg-inactive-color: lighten($list-bg-color, 10%); $text-field-bg-color: $card-bg-color; +$dropdown-field-bg-color: lighten($bg-color, 6%); +$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%); +$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%); $verified-bg-color: darken($verified-color, 20%); $unread-bg-color: transparentize($primary-color, 0.8); @@ -86,11 +90,12 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%); $contained-button-color: $primary-color; $contained-button-hover-color: lighten($contained-button-color, 10%); $outlined-button-color: $primary-color; -$outlined-button-hover-color: transparentize($primary-color, 0.8); -$outlined-button-active-color: transparentize($primary-color, 0.7); +$outlined-button-hover-color: transparentize($outlined-button-color, 0.8); +$outlined-button-active-color: transparentize($outlined-button-color, 0.7); $text-button-color: $primary-color; $text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-focus-color: transparentize($text-button-color, 0.7); +$disabled-button-color: #cccccc; $floating-action-button-color: $primary-color; $floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%); @@ -138,6 +143,7 @@ $media-page-indicator-active-color: #e6e6e6; // Progress indicator color $progress-indicator-color: $primary-color; $progress-indicator-track-color: lighten($progress-indicator-color, 30%); +$loading-indicator-color: $primary-color; // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); diff --git a/app/javascript/styles/mastodon-material/color/v1-light.scss b/app/javascript/styles/mastodon-material/color/v1-light.scss index aedcf3caf..58bb0ad4e 100644 --- a/app/javascript/styles/mastodon-material/color/v1-light.scss +++ b/app/javascript/styles/mastodon-material/color/v1-light.scss @@ -37,8 +37,12 @@ $card-bg-hover-color: darken($card-bg-color, 6%); $list-bg-color: #ffffff; $list-bg-hover-color: darken($list-bg-color, 6%); $list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-active-hover-color: darken($list-bg-color, 16%); $list-bg-inactive-color: darken($list-bg-color, 10%); $text-field-bg-color: $card-bg-color; +$dropdown-field-bg-color: darken($bg-color, 6%); +$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%); +$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%); $verified-bg-color: lighten($verified-color, 20%); $unread-bg-color: transparentize($primary-color, 0.8); @@ -87,11 +91,12 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%); $contained-button-color: $primary-color; $contained-button-hover-color: lighten($contained-button-color, 10%); $outlined-button-color: $primary-color; -$outlined-button-hover-color: transparentize($primary-color, 0.8); -$outlined-button-active-color: transparentize($primary-color, 0.7); +$outlined-button-hover-color: transparentize($outlined-button-color, 0.8); +$outlined-button-active-color: transparentize($outlined-button-color, 0.7); $text-button-color: $primary-color; $text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-focus-color: transparentize($text-button-color, 0.7); +$disabled-button-color: #cccccc; $floating-action-button-color: $primary-color; $floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%); @@ -139,6 +144,7 @@ $media-page-indicator-active-color: #e6e6e6; // Progress indicator color $progress-indicator-color: $primary-color; $progress-indicator-track-color: lighten($progress-indicator-color, 30%); +$loading-indicator-color: $primary-color; // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); diff --git a/app/javascript/styles/mastodon-material/color/v2-dark.scss b/app/javascript/styles/mastodon-material/color/v2-dark.scss index 706ecb5f3..842c6f648 100644 --- a/app/javascript/styles/mastodon-material/color/v2-dark.scss +++ b/app/javascript/styles/mastodon-material/color/v2-dark.scss @@ -37,8 +37,12 @@ $card-bg-hover-color: lighten($card-bg-color, 6%); $list-bg-color: #1e1e1e; $list-bg-hover-color: lighten($list-bg-color, 6%); $list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-active-hover-color: lighten($list-bg-color, 16%); $list-bg-inactive-color: lighten($list-bg-color, 10%); $text-field-bg-color: $card-bg-color; +$dropdown-field-bg-color: lighten($bg-color, 6%); +$dropdown-field-bg-hover-color: lighten($dropdown-field-bg-color, 6%); +$dropdown-field-bg-active-color: lighten($dropdown-field-bg-color, 10%); $verified-bg-color: darken($verified-color, 20%); $unread-bg-color: transparentize($primary-color, 0.8); @@ -87,15 +91,16 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%); $contained-button-color: $primary-color; $contained-button-hover-color: lighten($contained-button-color, 10%); $outlined-button-color: $primary-color; -$outlined-button-hover-color: transparentize($primary-color, 0.8); -$outlined-button-active-color: transparentize($primary-color, 0.7); +$outlined-button-hover-color: transparentize($outlined-button-color, 0.8); +$outlined-button-active-color: transparentize($outlined-button-color, 0.7); $text-button-color: $primary-color; $text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-focus-color: transparentize($text-button-color, 0.7); -$floating-action-button-color: $primary-color; +$disabled-button-color: #cccccc; +$floating-action-button-color: #272727; $floating-action-button-hover-color: lighten($floating-action-button-color, 6%); $floating-action-button-active-color: lighten($floating-action-button-color, 10%); -$floating-action-button-icon-color: #ffffff; +$floating-action-button-icon-color: $primary-color; // Toggle color $toggle-thumb-color: #ffffff; @@ -139,6 +144,7 @@ $media-page-indicator-active-color: #e6e6e6; // Progress indicator color $progress-indicator-color: $primary-color; $progress-indicator-track-color: lighten($progress-indicator-color, 30%); +$loading-indicator-color: $primary-color; // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); diff --git a/app/javascript/styles/mastodon-material/color/v2-light.scss b/app/javascript/styles/mastodon-material/color/v2-light.scss index 7c5840794..10e7a0b91 100644 --- a/app/javascript/styles/mastodon-material/color/v2-light.scss +++ b/app/javascript/styles/mastodon-material/color/v2-light.scss @@ -37,8 +37,12 @@ $card-bg-hover-color: darken($card-bg-color, 6%); $list-bg-color: $bg-color; $list-bg-hover-color: darken($list-bg-color, 6%); $list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-active-hover-color: darken($list-bg-color, 16%); $list-bg-inactive-color: darken($list-bg-color, 10%); $text-field-bg-color: $card-bg-color; +$dropdown-field-bg-color: darken($bg-color, 6%); +$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%); +$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%); $verified-bg-color: lighten($verified-color, 20%); $unread-bg-color: transparentize($primary-color, 0.8); @@ -87,11 +91,12 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%); $contained-button-color: $primary-color; $contained-button-hover-color: lighten($contained-button-color, 10%); $outlined-button-color: $primary-color; -$outlined-button-hover-color: transparentize($primary-color, 0.8); -$outlined-button-active-color: transparentize($primary-color, 0.7); +$outlined-button-hover-color: transparentize($outlined-button-color, 0.8); +$outlined-button-active-color: transparentize($outlined-button-color, 0.7); $text-button-color: $primary-color; $text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-focus-color: transparentize($text-button-color, 0.7); +$disabled-button-color: #cccccc; $floating-action-button-color: #ffffff; $floating-action-button-hover-color: darken($floating-action-button-color, 6%); $floating-action-button-active-color: darken($floating-action-button-color, 10%); @@ -139,6 +144,7 @@ $media-page-indicator-active-color: #e6e6e6; // Progress indicator color $progress-indicator-color: $primary-color; $progress-indicator-track-color: lighten($progress-indicator-color, 30%); +$loading-indicator-color: $primary-color; // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); diff --git a/app/javascript/styles/mastodon-material/layout/material-v1.scss b/app/javascript/styles/mastodon-material/layout/material-v1.scss index 6fcc39ef5..661cc55a4 100644 --- a/app/javascript/styles/mastodon-material/layout/material-v1.scss +++ b/app/javascript/styles/mastodon-material/layout/material-v1.scss @@ -41,6 +41,7 @@ $nav-drawer-item-radius: 0; // Avatar cropping settings $avatar-radius: 50%; // Rounded cropping //$avatar-radius: 2px // Material v1 square +//$avatar-radius: $card-radius // Fit to card radius // Chip settings @@ -60,10 +61,14 @@ $button-shadow: true; // Material v1 styled colored button with shadow $fab-size: 56px; -// CW text area border -$cw-area-border: none; -//$cw-area-border: underlined; +// CW text field border +$cw-area-border: underlined; +//$cw-area-border: none; -// Compose text area border +// Compose text field border $compose-area-border: none; -//$compose-area-border: underlined; \ No newline at end of file +//$compose-area-border: underlined; + +// Other text field border +$other-text-area-border: underlined; +//$other-text-area-border: none; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/layout/material-v2.scss b/app/javascript/styles/mastodon-material/layout/material-v2.scss index 24b5add29..98a3285c7 100644 --- a/app/javascript/styles/mastodon-material/layout/material-v2.scss +++ b/app/javascript/styles/mastodon-material/layout/material-v2.scss @@ -46,6 +46,8 @@ $nav-drawer-item-radius: 8px; // corner rounded // Avatar cropping settings $avatar-radius: 50%; // Rounded cropping +//$avatar-radius: $card-radius // Fit to card radius +//$avatar-radius: 2px // Material v1 square //$avatar-radius: 8px // Material v2 square @@ -60,8 +62,8 @@ $button-on-status: text; // Material v1 styled text button // Button shadow -$button-shadow: false; // Material v2 styled colored button without shadow -//$button-shadow: true; // Material v1 styled colored button with shadow +$button-shadow: true; // Material v1 styled colored button with shadow +//$button-shadow: false; // Material v2 styled colored button without shadow // Floating Action Button size @@ -69,12 +71,17 @@ $fab-size: 56px; // Regular //$fab-size: 40px; // Mini -// CW text area border +// CW text field border $cw-area-border: none; //$cw-area-border: underlined; //$cw-area-border: outlined; -// Compose text area border +// Compose text field border $compose-area-border: none; //$compose-area-border: underlined; -//$compose-area-border: outlined; \ No newline at end of file +//$compose-area-border: outlined; + +// Other text field border +$other-text-area-border: underlined; +//$other-text-area-border: outlined; +//$other-text-area-border: none; \ 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 f97e21926..687c8ed00 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 @@ -1,14 +1,14 @@ // Add your customization below -$primary-color: #8D6E63; +$primary-color: #7e5f66; -$section-text-color: $primary-color; +$section-text-color: lighten($primary-color, 10%); -$icon-color: #D7CCC8; +$icon-color: #d2d2d2; $icon-hover-color: #ffffff; $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; -$top-bar-icon-active-color: $primary-color; +$top-bar-icon-active-color: lighten($primary-color, 20%); $control-border-color: $icon-color; $control-border-active-color: $primary-color; @@ -16,7 +16,7 @@ $control-border-hover-color: transparentize($control-border-active-color, 0.8); $icon-button-color: $icon-color; $icon-button-hover-color: $icon-hover-color; -$icon-button-active-color: $primary-color; +$icon-button-active-color: lighten($primary-color, 20%); $icon-button-active-hover-color: lighten($icon-button-active-color, 10%); $contained-button-color: $primary-color; $contained-button-hover-color: lighten($contained-button-color, 10%); @@ -26,14 +26,23 @@ $outlined-button-active-color: transparentize($outlined-button-color, 0.7); $text-button-color: $primary-color; $text-button-hover-color: transparentize($text-button-color, 0.8); $text-button-focus-color: transparentize($text-button-color, 0.7); -$floating-action-button-icon-color: $primary-color; +$floating-action-button-color: $primary-color; +$floating-action-button-hover-color: lighten($floating-action-button-color, 6%); +$floating-action-button-active-color: lighten($floating-action-button-color, 10%); +$floating-action-button-icon-color: #ffffff; -$toggle-thumb-active-color: #795548; +$toggle-thumb-active-color: $primary-color; $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; \ No newline at end of file +$icon-tab-indicator-hover-color: $icon-hover-color; + +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); +$loading-indicator-color: $primary-color; \ 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 5e389df40..910560fe9 100644 --- a/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss +++ b/app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss @@ -1,14 +1,15 @@ // Add your customization below -$primary-color: #6D4C41; +$primary-color: #7e5f66; $section-text-color: $primary-color; -$icon-color: #92787D; +$icon-color: #92787d; $icon-hover-color: darken($icon-color, 10%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); +$floating-action-button-icon-color: $primary-color; $control-border-color: $icon-color; $control-border-active-color: $primary-color; @@ -36,5 +37,11 @@ $border-active-color: $primary-color; $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; \ No newline at end of file +$icon-tab-indicator-hover-color: $top-bar-icon-hover-color; + +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); +$loading-indicator-color: $primary-color; \ 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 56dc92b20..7c45fb0b7 100644 --- a/app/javascript/styles/mastodon-material/theme/_mixins.scss +++ b/app/javascript/styles/mastodon-material/theme/_mixins.scss @@ -58,6 +58,9 @@ $shadow-color-3: rgba(0,0,0,.12); } @mixin button-type($button-type) { + border-radius: $button-radius; + display: inline-block; + @if $button-type == contained { @if $button-shadow { @include shadow-1dp } background: $contained-button-color; @@ -91,7 +94,10 @@ $shadow-color-3: rgba(0,0,0,.12); @mixin button-shadow { @if $button-shadow { + button.btn, .button, + .block-button, + .input-copy button, .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } } } @@ -104,6 +110,7 @@ $shadow-color-3: rgba(0,0,0,.12); @if $text-area-border == underlined { border-radius: $card-radius $card-radius 0 0; + border: 0; border-bottom: 1px solid $border-color; &:active, diff --git a/app/javascript/styles/mastodon-material/theme/account.scss b/app/javascript/styles/mastodon-material/theme/account.scss index 3b1c58138..b045a96cb 100644 --- a/app/javascript/styles/mastodon-material/theme/account.scss +++ b/app/javascript/styles/mastodon-material/theme/account.scss @@ -152,7 +152,7 @@ .verified { border: none; - background: $verified-color; + background: $verified-bg-color; &__mark { color: $primary-text-color } } @@ -183,7 +183,6 @@ &__relationship { padding: 8px; - height: auto; .icon-button { @include icon-button; @@ -193,19 +192,76 @@ } } -.account-role { +.account-role, +.simple_form .recommended { padding: 4px 8px; border-radius: 17px; color: $ui-text-color; background-color: $contained-chip-color; } -.accounts-table__count { - color: $ui-text-color; - - small { color: $secondary-text-color } -} - .account-gallery { &__item { border-radius: 0 } +} + +.card { + &>a { + @include shadow-1dp; + + &:active .card__bar, + &:focus .card__bar, + &:hover .card__bar { background: $card-bg-color } + } + + &__img { + background: $card-bg-color; + border-radius: $card-radius $card-radius 0 0; + + img { border-radius: $card-radius $card-radius 0 0 } + } + + &__bar { + padding: 16px; + background: $card-bg-color; + border-radius: 0 0 $card-radius $card-radius; + + .avatar { + padding-top: 0; + + img { + border-radius: $avatar-radius; + background: $card-bg-color; + } + } + + .display-name { + margin-left: 16px; + + strong { color: $primary-text-color } + + span { color: $secondary-text-color } + } + } +} + +.pagination { + padding: 28px; + + .gap, + .newer, + .older, + .page, + a { + color: $ui-text-color; + padding: 8px; + } + + .current { + background: $contained-chip-color; + color: $ui-text-color; + margin: 0 8px; + border-radius: 50%; + width: 16px; + height: 16px; + } } \ 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 new file mode 100644 index 000000000..dd9509a94 --- /dev/null +++ b/app/javascript/styles/mastodon-material/theme/admin.scss @@ -0,0 +1,151 @@ +.admin-wrapper { + .sidebar-wrapper__inner { background: $bg-color } + + .sidebar { + &__toggle { + background: $top-bar-color; + + &__icon { color: $top-bar-icon-color } + + &__logo svg { fill: $top-bar-text-color } + + a { + border-radius: 50%; + + &:hover { background: $icon-bg-hover-color } + } + } + + ul { + a { + padding: 16px; + color: $ui-text-color; + border-radius: 0; + + i.fa { + margin-right: 32px; + color: $icon-color; + } + + &.selected { + background: $list-bg-active-color; + + &:hover { background: $list-bg-active-hover-color } + } + + &:hover { + color: $ui-text-color; + background-color: $list-bg-hover-color; + } + } + + ul { + background: $bg-color; + + a { padding: 16px 36px } + } + + .simple-navigation-active-leaf a { + color: $ui-text-color; + background-color: $list-bg-active-color; + + &:hover { background-color: $list-bg-active-hover-color } + } + } + } + + .content { + padding: 60px 16px 16px; + + h2, + h3, + h6 { color: $ui-text-color } + + h3 { margin-bottom: 28px } + + h4 { + color: $section-text-color; + border-top: 1px solid $border-color; + border-bottom: none; + padding: 12px 16px; + } + + hr { + border-bottom: 1px solid $border-color; + margin: 16px 0; + } + + .muted-hint { + color: $ui-text-color; + + a { color: $link-text-color } + } + + .positive-hint { color: $verified-color } + + .directory__tag h4 { color: $ui-text-color } + + &>p { + color: $ui-text-color; + margin-bottom: 16px; + + strong { color: $primary-text-color } + } + } + + .content-heading { + border-bottom: none; + margin: -16px -16px 40px 0; + + &>* { + margin-top: 16px; + margin-right: 16px; + } + } +} + +.filters .filter-subset { + padding: 0 16px; + margin: 0 0 16px; + border-right: 1px solid $border-color; + + strong { color: $ui-text-color } + + ul { + margin-top: 0; + + li { margin-right: 0 } + } + + a { + color: $text-tab-indicator-color; + border-bottom: 2px solid transparent; + padding: 8px; + + &.selected { + color: $text-tab-indicator-active-color; + border-bottom: 2px solid $text-tab-indicator-active-color; + + &:hover { + color: $text-tab-indicator-active-color; + border-bottom: 2px solid $text-tab-indicator-active-color; + } + } + + &:hover { + color: $text-tab-indicator-color; + background: $text-tab-indicator-bg-hover-color; + border-bottom: 2px solid transparent; + } + } +} + +body { + .positive-hint { color: $verified-color } + + .muted-hint { + color: $ui-text-color; + + a { color: $link-text-color } + } +} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/basics.scss b/app/javascript/styles/mastodon-material/theme/basics.scss index 96a12ee24..79d093374 100644 --- a/app/javascript/styles/mastodon-material/theme/basics.scss +++ b/app/javascript/styles/mastodon-material/theme/basics.scss @@ -1,5 +1,6 @@ body, -body.embed { background: $bg-color } +body.embed, +body.admin { background: $bg-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 ebb064595..0fee5ab06 100644 --- a/app/javascript/styles/mastodon-material/theme/button.scss +++ b/app/javascript/styles/mastodon-material/theme/button.scss @@ -111,6 +111,9 @@ label.icon-button { .button--destructive:hover { background: $contained-button-hover-color } } + &:disabled, + &.disabled { background-color: $disabled-button-color } + &.button--block { margin: 8px 0 } &.button-secondary { @include button-type($button-on-status) } @@ -131,4 +134,22 @@ label.icon-button { background: $media-icon-bg-color; border-radius: $button-radius; color: $media-icon-color; +} + +.simple_form { + .block-button, .block-button:last-child + .button, .button:last-child + button, button:last-child { + display: inline-block; + border-radius: $button-radius; + background: $contained-button-color; + color: $contained-button-text-color; + width: auto; + height: 36px; + padding: 10px 16px; + margin-left: auto; + font-size: 14px; + + &:hover { background: $contained-button-hover-color } + } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/components.scss b/app/javascript/styles/mastodon-material/theme/components.scss index dec609cbd..24909122a 100644 --- a/app/javascript/styles/mastodon-material/theme/components.scss +++ b/app/javascript/styles/mastodon-material/theme/components.scss @@ -1,9 +1,7 @@ .modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); - &__overlay { background-color: rgba(0,0,0,.32) !important } - - &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 5%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 95%) } + &__overlay { background-color: rgba(0,0,0,.7) !important } } .drawer { @@ -299,9 +297,11 @@ select { color: $ui-text-color; - background-color: $bg-color; + background-color: $dropdown-field-bg-color; border: 0; + option { background: $list-bg-color } + &:focus { border-color: $border-hover-color } } @@ -322,7 +322,7 @@ .button { margin-right: 8px } - li { margin-bottom: 0 } + li { margin-bottom: 8px } &__input { border: none; @@ -634,4 +634,55 @@ } } -.emoji-button { padding: 8px } \ No newline at end of file +.emoji-button { padding: 8px } + +.focusable:focus .detailed-status, +.focusable:focus .detailed-status__action-bar { background: transparent } + +.no-reduce-motion .loading-indicator { + display: inline-block; + position: relative; + color: transparent; + width: 80px; + height: 80px; + + &__figure { + box-sizing: border-box; + display: block; + position: absolute; + width: 48px; + height: 48px; + top: 10%; + left: 10%; + margin: 8px; + border: 4px solid transparent; + border-radius: 50%; + animation: loading-indicator 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: $loading-indicator-color transparent transparent transparent; + + &:nth-child(1) { + animation-delay: -0.45s; + } + + &:nth-child(2) { + animation-delay: -0.3s; + } + + &:nth-child(3) { + animation-delay: -0.15s; + } + } +} +@keyframes loading-indicator { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.loading-bar { + background-color: $loading-indicator-color; + height: 4px; +} \ 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 42a12a1ac..c4fa3aaea 100644 --- a/app/javascript/styles/mastodon-material/theme/containers.scss +++ b/app/javascript/styles/mastodon-material/theme/containers.scss @@ -16,6 +16,7 @@ color: $top-bar-text-color; &:hover { + color: $top-bar-text-color; background: $tab-indicator-bg-hover-color; text-decoration: none; } @@ -66,6 +67,8 @@ background: $card-bg-color; &::after { box-shadow: none } + + img { border-radius: $card-radius $card-radius 0 0 } } &__bar { diff --git a/app/javascript/styles/mastodon-material/theme/forms.scss b/app/javascript/styles/mastodon-material/theme/forms.scss new file mode 100644 index 000000000..af55dcdf9 --- /dev/null +++ b/app/javascript/styles/mastodon-material/theme/forms.scss @@ -0,0 +1,137 @@ +.simple_form { + .fields-row { + padding-top: 8px; + margin: 0 -8px 28px; + + &__column { padding: 0 8px } + } + + .fields-group { + padding: 16px; + margin-bottom: 0; + } + + .input { + margin-bottom: 16px; + + &.with_label .label_input>label, + &.with_block_label>label, + &.with_floating_label .label_input>label { color: $ui-text-color } + + &.with_block_label .hint { margin-bottom: 16px } + + &.boolean { + .recommended { margin: 0 8px } + + .label_input>label { padding-top: 3px } + } + + &.radio_buttons .radio { + margin-bottom: 16px; + + label { + margin-bottom: 0; + color: $ui-text-color; + } + } + } + + .label_input__wrapper { + border-radius: $card-radius; + + &:hover { background: $dropdown-field-bg-hover-color } + + &:active, + &:focus { background: $dropdown-field-bg-active-color } + } + + .card { margin-bottom: 16px } + + .row .input { padding: 0 4px } + + .hint { + color: $ui-text-color; + + code { + border-radius: 2px; + background: $contained-chip-color; + color: $ui-text-color; + } + } + + .check_boxes .checkbox label { + color: $primary-text-color; + padding-top: 8px; + } + + p.hint { + padding: 16px; + margin-bottom: 0; + color: $ui-text-color; + } + + select { + color: $ui-text-color; + background-color: $dropdown-field-bg-color; + border: none; + border-radius: $menu-radius $menu-radius 0 0; + padding-left: 16px; + padding-right: 40px; + height: 40px; + + option { background-color: $menu-bg-color } + + &:hover { background-color: $dropdown-field-bg-hover-color } + + &:active, + &:focus { background-color: $dropdown-field-bg-active-color } + } + + h4 { margin-bottom: 0 !important } + + input[type=email], + input[type=number], + input[type=password], + input[type=text], + 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 } + + &::placeholder { color: $tips-text-color } + } +} + +.flash-message { + @include shadow-1dp; + background: $card-bg-color; + color: $ui-text-color; + border-radius: $card-radius; + padding: 16px; + margin: 0 16px 32px; + + a { + color: $link-text-color; + + &:hover { color: $link-text-color } + } + + &.translation-prompt { color: $ui-text-color } +} + +.input-copy { + background: $bg-color; + padding-right: 8px; + border: 0; +} + +input { + &#account_header.file.optional, + &#account_avatar.file.optional, + &#import_data.file.optional { color: $ui-text-color } +} \ 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 4599453d2..28e4b5cdd 100644 --- a/app/javascript/styles/mastodon-material/theme/material-icons.scss +++ b/app/javascript/styles/mastodon-material/theme/material-icons.scss @@ -7,21 +7,13 @@ } .fa { - &.fa-bars, - &.fa-navicon, - &.fa-reorder, + &.fa-bars, &.fa-navicon, &.fa-reorder, &.fa-globe, - &.fa-cog, - &.fa-cogs, - &.fa-gears, + &.fa-cog, &.fa-cogs, &.fa-gears, &.fa-sign-out, &.fa-search, - &.fa-times, - &.fa-times-circle, - &.fa-close, - &.fa-remove, - &.fa-chevron-down, - &.fa-ellipsis-v, + &.fa-times, &.fa-times-circle, &.fa-close, &.fa-remove, + &.fa-chevron-down, &.fa-ellipsis-v, &.fa-paperclip, &.fa-tasks, &.fa-plus, @@ -33,6 +25,7 @@ &.fa-sliders, &.fa-chevron-left, &.fa-chevron-right, + &.fa-arrow-right, &.fa-reply, &.fa-reply-all, &.fa-share-alt, @@ -45,10 +38,8 @@ &.fa-users, &.fa-file-text, &.fa-user-plus, - &.fa-address-book, - &.fa-address-book-o, - &.fa-list, - &.fa-list-ul, + &.fa-address-book, &.fa-address-book-o, + &.fa-list, &.fa-list-ul, &.fa-eye, &.fa-eye-slash, &.fa-pencil, @@ -72,7 +63,14 @@ &.fa-angle-right, &.fa-thumb-tack, &.fa-hashtag, - &.fa-expand { + &.fa-expand, + &.fa-refresh, + &.fa-user, + &.fa-desktop, + &.fa-exchange, + &.fa-cloud-upload, + &.fa-cloud-download, + &.fa-mobile-phone, &.fa-mobile { @include icon-font-style; line-height: 1; letter-spacing: normal; @@ -105,6 +103,7 @@ &.fa-sliders::before { content: "tune" } &.fa-chevron-left::before { content: "arrow_back" } &.fa-chevron-right::before { content: "arrow_forward" } + &.fa-arrow-right::before { content: "arrow_forward" } &.fa-reply::before { content: $reply-icon } &.fa-reply-all::before { content: "reply_all" } &.fa-share-alt::before { content: "share" } @@ -117,10 +116,8 @@ &.fa-users::before { content: "people" } &.fa-file-text::before { content: "web" } &.fa-user-plus::before { content: "person_add" } - &.fa-address-book::before { content: "explore" } - &.fa-address-book-o::before { content: "explore" } - &.fa-list::before { content: "list" } - &.fa-list-ul::before { content: "list" } + &.fa-address-book::before, &.fa-address-book-o::before { content: "explore" } + &.fa-list::before, &.fa-list-ul::before { content: "list" } &.fa-eye::before { content: "visibility" } &.fa-eye-slash::before { content : "visibility_off" } &.fa-pencil::before { content: "create" } @@ -145,6 +142,13 @@ &.fa-thumb-tack::before { content: "push_pin" } &.fa-hashtag::before { content: "tag" } &.fa-expand::before { content: "open_in_full" } + &.fa-refresh::before { content: "refresh" } + &.fa-user::before { content: "person" } + &.fa-desktop::before { content: "web_asset" } + &.fa-exchange::before { content: "sync_alt" } + &.fa-cloud-upload::before { content: "cloud_upload" } + &.fa-cloud-download::before { content: "cloud_download" } + &.fa-mobile-phone::before, &.fa-mobile::before { content: "smartphone" } } // bookmark icon @@ -177,14 +181,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,') } 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, @@ -194,7 +198,10 @@ button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ { } // dropdown icon -.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} +.compose-form__poll-wrapper select, +.simple_form select { + background-image: url('data:image/svg+xml;utf8,'); +} // icon in tab settings .text-btn.column-header__setting-btn { @@ -258,9 +265,23 @@ button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ { vertical-align: text-bottom; } +// Icons in lists or tables +tbody tr td span .fa { + color: $icon-color; + vertical-align: bottom; +} +a.table-action-link i.fa, +button.table-action-link i.fa { + font-size: 16px; + vertical-align: bottom; +} + // status scope .status__visibility-icon .fa, .account__header__tabs__name .fa { font-size: 16px; vertical-align: text-bottom; -} \ No newline at end of file +} + +// sidebar icon in settings +.admin-wrapper .sidebar ul a i.fa { vertical-align: text-bottom } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/responsive.scss b/app/javascript/styles/mastodon-material/theme/responsive.scss index 53635cee4..ccc145908 100644 --- a/app/javascript/styles/mastodon-material/theme/responsive.scss +++ b/app/javascript/styles/mastodon-material/theme/responsive.scss @@ -112,4 +112,19 @@ &.active { border-bottom-color: $tab-indicator-active-color } } +} + +@media screen and (max-width: 600px) { + .admin-wrapper { + .sidebar { + ul { + background: $card-bg-color; + + a, + ul a { border-bottom: none } + } + } + + .sidebar-wrapper { @include shadow-4dp } + } } \ 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 1c2408bce..00b587298 100644 --- a/app/javascript/styles/mastodon-material/theme/statuses.scss +++ b/app/javascript/styles/mastodon-material/theme/statuses.scss @@ -44,17 +44,11 @@ } &__read-more-button { - font-size: 14px; - color: $text-button-color; - border-radius: $button-radius; + @include button-type($button-on-status); padding: 4px 6px; + margin: 4px; - &:hover { - background: $text-button-hover-color; - text-decoration: none; - } - - &:focus { background: $text-button-focus-color } + &:hover { text-decoration: none } } } @@ -274,4 +268,4 @@ a.status-card { } } -.entry.entry-center { border-bottom: 1px solid $border-color } \ No newline at end of file +.entry.h-cite.p-comment.entry-successor { border-top: 1px solid $border-color } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/tables.scss b/app/javascript/styles/mastodon-material/theme/tables.scss new file mode 100644 index 000000000..3e39d086b --- /dev/null +++ b/app/javascript/styles/mastodon-material/theme/tables.scss @@ -0,0 +1,83 @@ +.batch-table { + border: 1px solid $border-color; + border-radius: 4px; + + &__toolbar { + border: none; + border-bottom: 1px solid $border-color; + background: $list-bg-color; + border-radius: 4px 4px 0 0; + + &__actions { padding-right: 16px } + } + + &__row { + border: none; + border-bottom: 1px solid $border-color; + background: $list-bg-color; + + &:nth-child(2n) { + background: $list-bg-color; + + &:hover { background: $list-bg-hover-color } + } + + &:last-child { + border-bottom: none; + border-radius: 0 0 4px 4px; + } + + &:hover { background: $list-bg-hover-color } + } +} + +a.table-action-link, +button.table-action-link { + padding: 4px 8px; + margin-right: 0; + color: $text-button-color; + border-radius: $button-radius; + + i.fa { margin-right: 8px } + + &:hover { + color: $text-button-color; + background: $text-button-hover-color; + } + + &:first-child { padding-left: 8px } +} + +.table-wrapper { + margin-bottom: 24px; + border-radius: 2px; +} + +.table { + border: 1px solid $border-color; + + td, + th { + background: $list-bg-color; + border-top: 1px solid $border-color; + } + + &>thead { + color: $ui-text-color; + + &>tr>th { border-bottom: 1px solid $border-color } + } + + &>tbody { + color: $ui-text-color; + + &>tr { + &>td { vertical-align: middle } + + &:nth-child(odd) { + &>td, + &>th { background: transparent } + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material/theme/theme.scss b/app/javascript/styles/mastodon-material/theme/theme.scss index 34c523277..a9421cd43 100644 --- a/app/javascript/styles/mastodon-material/theme/theme.scss +++ b/app/javascript/styles/mastodon-material/theme/theme.scss @@ -3,4 +3,4 @@ * Copyright (C) 2021 Rintan, Genbu Project */ -@import 'about', 'account', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets'; \ No newline at end of file +@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 diff --git a/app/javascript/styles/mastodon-material/theme/widgets.scss b/app/javascript/styles/mastodon-material/theme/widgets.scss index 9090ea45f..e8841f9f8 100644 --- a/app/javascript/styles/mastodon-material/theme/widgets.scss +++ b/app/javascript/styles/mastodon-material/theme/widgets.scss @@ -90,16 +90,36 @@ a { color: $link-text-color } li, p { color: $ui-text-color } + + strong { color: $primary-text-color } + + table { + border-radius: 4px; + border: 1px solid $border-color; + + thead tr, + tbody tr { + color: $ui-text-color; + border-bottom: 1px solid $border-color; + } + } } .table-of-contents { background: $bg-color; border-radius: 0; - li a { - padding: 16px; - color: $ui-text-color; - border-bottom: 1px solid $border-color; + li { + ul { + padding-left: 16px; + border-bottom: 1px solid $border-color; + } + + a { + padding: 16px; + color: $ui-text-color; + border-bottom: 1px solid $border-color; + } } } @@ -120,4 +140,17 @@ .page-header { @include shadow-4dp; border-radius: $card-radius; +} + +.accounts-table { + tbody td { padding: 16px 8px } + + .fa.active, + .fa.active.passive { color: $icon-color } + + &__count { + color: $ui-text-color; + + small { color: $secondary-text-color } + } } \ No newline at end of file