mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update material theme

Browse Source
This commit is contained in:
Rintan 2021-03-29 12:38:22 +09:00
parent 1474d573d0
commit 4b8f6985d5
26 changed files with 744 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/styles/mastodon-material/color/black.scss
View File

@ -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);

10
app/javascript/styles/mastodon-material/color/mastodon-dark.scss
View File

@ -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);

10
app/javascript/styles/mastodon-material/color/mastodon-light.scss
View File

@ -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);

10
app/javascript/styles/mastodon-material/color/plus-classic.scss
View File

@ -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);

10
app/javascript/styles/mastodon-material/color/v1-dark.scss
View File

@ -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);

10
app/javascript/styles/mastodon-material/color/v1-light.scss
View File

@ -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);

14
app/javascript/styles/mastodon-material/color/v2-dark.scss
View File

@ -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);

10
app/javascript/styles/mastodon-material/color/v2-light.scss
View File

@ -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);

15
app/javascript/styles/mastodon-material/layout/material-v1.scss
View File

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

17
app/javascript/styles/mastodon-material/layout/material-v2.scss
View File

@ -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;

25
app/javascript/styles/mastodon-material/profiles/y-zu-dark/color.scss
View File

@ -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;

13
app/javascript/styles/mastodon-material/profiles/y-zu-light/color.scss
View File

@ -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;

7
app/javascript/styles/mastodon-material/theme/_mixins.scss
View File

@ -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,

74
app/javascript/styles/mastodon-material/theme/account.scss
View File

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

151
app/javascript/styles/mastodon-material/theme/admin.scss Normal file
View File

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

3
app/javascript/styles/mastodon-material/theme/basics.scss
View File

@ -1,5 +1,6 @@
body,
body.embed { background: $bg-color }
body.embed,
body.admin { background: $bg-color }
.focusable:focus { background: transparent }

21
app/javascript/styles/mastodon-material/theme/button.scss
View File

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

63
app/javascript/styles/mastodon-material/theme/components.scss
View File

@ -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 }
.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;
}

3
app/javascript/styles/mastodon-material/theme/containers.scss
View File

@ -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 {

137
app/javascript/styles/mastodon-material/theme/forms.scss Normal file
View File

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

71
app/javascript/styles/mastodon-material/theme/material-icons.scss
View File

@ -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,<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 }

15
app/javascript/styles/mastodon-material/theme/responsive.scss
View File

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

14
app/javascript/styles/mastodon-material/theme/statuses.scss
View File

@ -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 }
.entry.h-cite.p-comment.entry-successor { border-top: 1px solid $border-color }

83
app/javascript/styles/mastodon-material/theme/tables.scss Normal file
View File

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

2
app/javascript/styles/mastodon-material/theme/theme.scss
View File

@ -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';

41
app/javascript/styles/mastodon-material/theme/widgets.scss
View File

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