update material theme

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-hover-color: transparentize($outlined-button-color, 0.8);
-$outlined-button-active-color: transparentize($primary-color, 0.7);
+$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);

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-hover-color: transparentize($outlined-button-color, 0.8);
-$outlined-button-active-color: transparentize($primary-color, 0.7);
+$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);

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-hover-color: transparentize($outlined-button-color, 0.8);
-$outlined-button-active-color: transparentize($primary-color, 0.7);
+$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);

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-hover-color: transparentize($outlined-button-color, 0.8);
-$outlined-button-active-color: transparentize($primary-color, 0.7);
+$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);

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-hover-color: transparentize($outlined-button-color, 0.8);
-$outlined-button-active-color: transparentize($primary-color, 0.7);
+$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);

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-hover-color: transparentize($outlined-button-color, 0.8);
-$outlined-button-active-color: transparentize($primary-color, 0.7);
+$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);

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-hover-color: transparentize($outlined-button-color, 0.8);
-$outlined-button-active-color: transparentize($primary-color, 0.7);
+$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);

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-hover-color: transparentize($outlined-button-color, 0.8);
-$outlined-button-active-color: transparentize($primary-color, 0.7);
+$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);

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 text field border
-$cw-area-border: none;
+$cw-area-border: underlined;
-//$cw-area-border: underlined;
+//$cw-area-border: none;
 
-// Compose text area border
+// Compose text field border
 $compose-area-border: none;
-//$compose-area-border: underlined;
+//$compose-area-border: underlined;
+
+// Other text field border
+$other-text-area-border: underlined;
+//$other-text-area-border: none;

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;
+//$compose-area-border: outlined;
+
+// Other text field border
+$other-text-area-border: underlined;
+//$other-text-area-border: outlined;
+//$other-text-area-border: none;

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;
+$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;

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;
+$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;

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,

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;
+    }
 }

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 }
+    }
+}

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 }
 

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 }
+    }
 }

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 }
+    &__overlay { background-color: rgba(0,0,0,.7) !important }
-
-    &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 5%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 95%) }
 }
 
 .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 }
+.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;
+}

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 {

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 }
+}

app/javascript/styles/mastodon-material/theme/material-icons.scss

@@ -7,21 +7,13 @@
 }
 
 .fa {
-    &.fa-bars,
+    &.fa-bars, &.fa-navicon, &.fa-reorder,
-    &.fa-navicon,
-    &.fa-reorder,
     &.fa-globe,
-    &.fa-cog,
+    &.fa-cog, &.fa-cogs, &.fa-gears,
-    &.fa-cogs,
-    &.fa-gears,
     &.fa-sign-out,
     &.fa-search,
-    &.fa-times,
+    &.fa-times, &.fa-times-circle, &.fa-close, &.fa-remove,
-    &.fa-times-circle,
+    &.fa-chevron-down, &.fa-ellipsis-v,
-    &.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, &.fa-address-book-o,
-    &.fa-address-book-o,
+    &.fa-list, &.fa-list-ul,
-    &.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::before, &.fa-address-book-o::before { content: "explore" }
-    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before, &.fa-list-ul::before { content: "list" }
-    &.fa-list::before { content: "list" }
-    &.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,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-button-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
 }
 
 .media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{$media-icon-color}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>') }
 
 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,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-button-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
 }
 
 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
+.compose-form__poll-wrapper select,
+.simple_form select {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>');
+}
 
 // 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;
-}
+}
+
+// sidebar icon in settings
+.admin-wrapper .sidebar ul a i.fa { vertical-align: text-bottom }

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 }
+    }
 }

app/javascript/styles/mastodon-material/theme/statuses.scss

@@ -44,17 +44,11 @@
         }
 
         &__read-more-button {
-            font-size: 14px;
+            @include button-type($button-on-status);
-            color: $text-button-color;
-            border-radius: $button-radius;
             padding: 4px 6px;
+            margin: 4px;
 
-            &:hover {
+            &:hover { text-decoration: none }
-                background: $text-button-hover-color;
-                text-decoration: none;
-            }
-
-            &:focus { background: $text-button-focus-color }
         }
     }
 
@@ -274,4 +268,4 @@ a.status-card {
     }
 }
 
-.entry.entry-center { border-bottom: 1px solid $border-color }
+.entry.h-cite.p-comment.entry-successor { border-top: 1px solid $border-color }

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 }
+            }
+        }
+    }
+}

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';
+@import 'about', 'account', 'admin', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'icons', 'forms', 'media', 'modal', 'responsive', 'statuses', 'tables', 'variables', 'widgets';

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 {
+    li {
-        padding: 16px;
+        ul {
-        color: $ui-text-color;
+            padding-left: 16px;
-        border-bottom: 1px solid $border-color;
+            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 }
+    }
 }