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

最新版Materialテーマのテスト

Browse Source
This commit is contained in:
Rintan 2021-05-17 02:31:09 +09:00 committed by YoheiZuho
parent 3f97d2b39c
commit 15b28354e4
35 changed files with 491 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,6 +34,7 @@ $menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #121212;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #000000;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
@ -124,18 +125,11 @@ $search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-bg-color: #121212;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;

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

@ -34,6 +34,7 @@ $menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #313543;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #282c37;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
@ -124,18 +125,11 @@ $search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-item-color: #d9e1e8;
$tab-item-active-color: $primary-color;
$tab-bg-color: #1f232b;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $tab-indicator-color;
$text-tab-indicator-active-color: $tab-indicator-active-color;
$text-tab-bg-color: $tab-bg-color;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;

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

@ -33,6 +33,7 @@ $menu-bg-active-color: darken($bg-color, 10%);
$menu-bg-active-hover-color: darken($bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
@ -123,18 +124,11 @@ $search-bar-color: #d9e1e8;
$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-item-color: #282c37;
$tab-item-active-color: $primary-color;
$tab-bg-color: #e6ebf0;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $tab-indicator-color;
$text-tab-indicator-active-color: $tab-indicator-active-color;
$text-tab-bg-color: $tab-bg-color;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;

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

@ -34,6 +34,7 @@ $menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
@ -123,18 +124,11 @@ $search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
$text-tab-bg-color: #ffffff;
$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;

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

@ -34,6 +34,7 @@ $menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #424242;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #424242;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
@ -123,18 +124,11 @@ $search-bar-color: lighten($bg-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
$text-tab-bg-color: #424242;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;

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

@ -34,6 +34,7 @@ $menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
@ -124,18 +125,11 @@ $search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
$text-tab-bg-color: #ffffff;
$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;

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

@ -34,6 +34,7 @@ $menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #1e1e1e;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #1e1e1e;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
@ -124,18 +125,11 @@ $search-bar-color: lighten($top-bar-color, 18%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-bg-color: #1e1e1e;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;

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

@ -34,6 +34,7 @@ $menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: $bg-color;
$card-bg-hover-color: darken($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: $bg-color;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
@ -124,18 +125,12 @@ $search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-item-color: transparentize(#000000, 0.5);
$tab-item-active-color: $primary-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-bg-color: #ffffff;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;

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

@ -30,6 +30,10 @@ $dialog-radius: 2px;
$menu-radius: 2px;
// Table radius settings
$table-radius: 2px;
// Media radius settings
$media-radius: 0;

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

@ -33,6 +33,11 @@ $dialog-radius: 8px;
$menu-radius: 8px;
// Table radius settings
$table-radius: 8px;
//$table-radius: 2px;
// Media radius settings
$media-radius: 0;
//$media-radius: 2px;

14
app/javascript/styles/mastodon-material/plugins/dense.scss
View File

@ -55,7 +55,15 @@
top: 10px;
}
&__content { padding-top: 2px }
&__content {
padding-top: 2px;
&__spoiler-link,
&__read-more-button {
height: auto;
padding: 4px 8px;
}
}
&__action-bar-button {
margin: 0 4px;
@ -72,6 +80,10 @@
}
}
@media screen and (min-width: 630px) {
.columns-area--mobile .status { padding: 8px 8px 8px 78px }
}
.detailed-status {
padding: 14px;

24
app/javascript/styles/mastodon-material/plugins/fedibird.scss Normal file
View File

@ -0,0 +1,24 @@
.drawer__tab.short-label {
padding: 8px;
.drawer__tab__short-label {
overflow-x: visible;
display: none;
}
i { margin: 0 }
}
.tabs-bar.bottom-bar {
@include shadow-4dp;
.tabs-bar {
&__link.active { border-bottom: none }
}
&__link span { margin-left: 0 }
}
@media screen and (max-width: 1190px) {
.tabs-bar__wrapper .tabs-bar.bottom-bar { width: 100% }
}

11
app/javascript/styles/mastodon-material/plugins/plus.scss
View File

@ -28,3 +28,14 @@
&.fa-fw::before { vertical-align: middle }
}
}
// Fedibird bottom bar in mobile
.tabs-bar.bottom-bar {
background: #212121;
.tabs-bar__link {
color: transparentize(#ffffff, 0.5);
&.active { color: #ffffff }
}
}

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

@ -38,12 +38,9 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
$border-active-color: $primary-color;
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
$tab-item-active-color: $primary-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);

2
app/javascript/styles/mastodon-material/profiles/y-zu-dark/icon_config.scss
View File

@ -1,3 +1,5 @@
// Add your icon customization below
$boost-icon-color: #00ACC1;
$icon-font-source: self;

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

@ -43,12 +43,9 @@ $scroll-bar-thumb-color: lighten($icon-color, 30%);
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$text-tab-indicator-color: lighten($top-bar-icon-color, 10%);
$text-tab-indicator-active-color: $top-bar-icon-color;
$icon-tab-indicator-active-color: $top-bar-icon-color;
$icon-tab-indicator-hover-color: $top-bar-icon-hover-color;
$tab-item-active-color: $primary-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);

3
app/javascript/styles/mastodon-material/profiles/y-zu-light/icon_config.scss
View File

@ -1,3 +1,6 @@
// Add your icon customization below
$boosted-icon-color: #009688;
$icon-font-source: self;

1
app/javascript/styles/mastodon-material/profiles/y-zu-light/plugins.scss
View File

@ -1,4 +1,5 @@
@import '../../plugins/astarte';
//@import '../../plugins/cards';
@import '../../plugins/dense';
@import '../../plugins/fedibird'
//@import '../../plugins/plus';

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

@ -60,6 +60,7 @@ $shadow-color-3: rgba(0,0,0,.12);
@mixin button-type($button-type) {
border-radius: $button-radius;
display: inline-block;
font-weight: 500;
@if $button-type == contained {
@if $button-shadow { @include shadow-1dp }

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

@ -88,7 +88,7 @@
&__fields {
border: 1px solid $border-color;
border-radius: 4px;
border-radius: $table-radius;
.verified {
border: none;
@ -106,12 +106,20 @@
&:last-child { border-bottom: 0 }
}
dd,
dt {
color: $primary-text-color;
background: $list-bg-inactive-color;
padding: 16px;
}
dd { color: $primary-text-color }
dt { background: $list-bg-inactive-color }
}
&__joined {
padding: 8px;
color: $info-text-color;
}
}
}
@ -160,24 +168,24 @@
}
&__section-headline {
background: $text-tab-bg-color;
background: $tab-bg-color;
border-bottom: 1px solid $border-color;
a {
padding: 16px 0;
color: $text-tab-indicator-color;
color: $tab-item-color;
&.active {
color: $text-tab-indicator-active-color;
border-bottom: 4px solid $text-tab-indicator-active-color;
color: $tab-item-active-color;
border-bottom: 4px solid $tab-item-active-color;
&::before,
&:after { border: none }
&:focus { background: $text-tab-indicator-bg-focus-color }
&:focus { background: $tab-bg-focus-color }
}
&:hover { background: $text-tab-indicator-bg-hover-color }
&:hover { background: $tab-bg-hover-color }
}
}
@ -265,3 +273,11 @@
height: 16px;
}
}
.nothing-here {
background: $card-bg-color;
color: $ui-text-color;
padding: 16px;
&--under-tabs { border-radius: 0 0 $card-radius $card-radius }
}

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

@ -65,7 +65,6 @@
h4 {
color: $section-text-color;
border-top: 1px solid $border-color;
border-bottom: none;
padding: 12px 16px;
}
@ -83,6 +82,8 @@
.positive-hint { color: $verified-color }
.neutral-hint { color: $tips-text-color }
.directory__tag h4 { color: $ui-text-color }
&>p {
@ -118,23 +119,23 @@
}
a {
color: $text-tab-indicator-color;
color: $tab-item-color;
border-bottom: 2px solid transparent;
padding: 8px;
&.selected {
color: $text-tab-indicator-active-color;
border-bottom: 2px solid $text-tab-indicator-active-color;
color: $tab-item-active-color;
border-bottom: 2px solid $tab-item-active-color;
&:hover {
color: $text-tab-indicator-active-color;
border-bottom: 2px solid $text-tab-indicator-active-color;
color: $tab-item-active-color;
border-bottom: 2px solid $tab-item-active-color;
}
}
&:hover {
color: $text-tab-indicator-color;
background: $text-tab-indicator-bg-hover-color;
color: $tab-item-color;
background: $tab-bg-hover-color;
border-bottom: 2px solid transparent;
}
}
@ -148,4 +149,112 @@ body {
a { color: $link-text-color }
}
.neutral-hint { color: $tips-text-color }
}
.report-card {
@include shadow-1dp;
background: $card-bg-color;
border-radius: $card-radius;
margin-bottom: 16px;
&__profile {
padding: 16px;
&__stats {
color: $info-text-color;
.red { color: $error-color }
}
}
&__summary__item {
border-top: 1px solid $border-color;
&:hover { background: $card-bg-color }
&__assigned,
&__reported-by { color: $ui-text-color }
&__content {
a {
padding: 16px;
color: $primary-text-color;
}
&__icon {
color: $icon-color;
margin-right: 8px;
}
}
}
}
.log-entry {
padding: 16px 0;
background: $list-bg-color;
border-bottom: 1px solid $border-color;
&:first-child { border-radius: $table-radius $table-radius 0 0 }
&:last-child { border-radius: 0 0 $table-radius $table-radius }
&__header {
color: $ui-text-color;
padding: 0 16px;
}
&__avatar { margin-right: 16px }
&__timestamp { color: $info-text-color }
.target,
.username,
a { color: $primary-text-color }
}
.dashboard {
&__counters {
&__num,
&__text {
color: $secondary-text-color;
margin-bottom: 16px;
}
&__label { color: $ui-text-color }
&>div {
padding: 0 8px;
margin-bottom: 16px;
&>div,
&>a {
@include shadow-1dp;
padding: 16px;
background: $card-bg-color;
border-radius: $card-radius;
&:active,
&:focus,
&:hover { background: $card-bg-hover-color }
}
}
}
&__widgets {
&>div {
margin-bottom: 16px;
&>div { padding: 0 8px }
}
a:not(.name-tag) { color: $ui-text-color }
}
}
.inline-name-tag,
.name-tag,
a.inline-name-tag,
a.name-tag { color: $ui-text-color }

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

@ -8,6 +8,8 @@ $favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #db4437; // +1
//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
$boosted-icon-color: $primary-color;
// Reply icon settings
$reply-icon: "reply";

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

@ -1,7 +1,11 @@
body,
body.embed,
body.admin,
body.lighter { background: $bg-color }
body.lighter,
body.error {
background: $bg-color;
color: $ui-text-color;
}
.focusable:focus { background: transparent }

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

@ -119,7 +119,23 @@ label.icon-button {
&.button--block { margin: 8px 0 }
&.button-secondary { @include button-type($button-on-status) }
&.button-secondary {
@include button-type($button-on-status);
&:disabled {
color: $disabled-button-color;
border: 1px solid $disabled-button-color;
opacity: 1;
&:hover,
&:focus,
&:active { @include button-type($button-on-status) }
}
&:hover,
&:focus,
&:active { @include button-type($button-on-status) }
}
&.confirmation-modal__cancel-button {
box-shadow: none;

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

@ -193,6 +193,7 @@
background: $top-bar-color;
color: $top-bar-icon-color;
padding: 16px;
height: 48px;
span { visibility: hidden } // hide "back" string
@ -214,6 +215,8 @@
.columns-area {
@include bg-image;
background-size: contain;
&__panels__pane { overflow: visible }
}
.setting-text {
@ -229,8 +232,13 @@
background: $card-bg-color;
font-size: 16px;
contain: initial; // padding fix
a { color: $link-text-color }
}
.error-column a,
.follow_requests-unlocked_explanation a { color: $link-text-color }
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
@ -323,6 +331,8 @@
a { color: $ui-text-color }
p a { color: $link-text-color }
ul { margin-bottom: 16px }
}
&__trends {
@ -419,6 +429,37 @@
}
}
.announcements-list {
border: 1px solid $border-color;
&__item {
padding: 16px 0;
background: $list-bg-color;
border-radius: $table-radius;
border-bottom: 1px solid $border-color;
&__title {
padding: 0 16px;
color: $primary-text-color;
margin-bottom: 8px;
&:active,
&:focus,
&:hover { color: $primary-text-color }
}
&__meta {
padding: 0 16px;
color: $info-text-color;
}
&:hover { background: $list-bg-hover-color }
&:active,
&:focus { background: $list-bg-active-color }
}
}
.reactions-bar {
margin-top: 16px;
width: auto;
@ -464,23 +505,24 @@
button {
background: $tab-bg-color;
color: $tab-indicator-color;
color: $tab-item-color;
font-size: 16px;
border-bottom: 2px solid transparent;
padding: 12px 0 10px;
span { font-size: 14px }
&.active {
color: $tab-indicator-active-color;
border-bottom: 4px solid $tab-indicator-active-color;
padding: 12px 0 8px;
color: $tab-item-active-color;
border-bottom: 2px solid $tab-item-active-color;
&::before,
&:after { border: none }
&:focus { background: $tab-indicator-bg-focus-color }
&:focus { background: $tab-bg-focus-color }
}
&:hover { background: $tab-indicator-bg-hover-color }
&:hover { background: $tab-bg-hover-color }
}
}

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

@ -190,6 +190,8 @@
}
.compose-form {
padding: 16px;
.autosuggest-textarea {
&__textarea {
@include text-area-border($compose-area-border);
@ -316,6 +318,18 @@
}
}
.compose-panel {
overflow: visible;
border-radius: $card-radius;
.compose-form {
@include shadow-1dp;
background: $card-bg-color;
padding-bottom: 16px;
margin-bottom: 0;
}
}
.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
@ -343,10 +357,21 @@
&.checkbox {
border-radius: 2px;
border: 2px solid $control-border-color;
border: 2px solid $control-border-active-color;
padding: 8px;
margin: 8px 10px;
background: none;
&.active {
height: 50%;
padding: 5px 0;
transform: rotate(-45deg);
border: 2px solid $control-border-active-color;
border-top-style: none;
border-right-style: none;
&:hover { background: none }
}
}
}
@ -360,6 +385,8 @@
}
&__option {
padding: 4px;
input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
@ -367,6 +394,8 @@
border-radius: 2px;
padding: 8px 16px;
}
&__text { line-height: 36px }
}
&__chart {
@ -383,6 +412,8 @@
}
&__link { color: $ui-text-color }
&__number { line-height: 36px }
}
.privacy-dropdown {
@ -573,6 +604,7 @@
&__list {
@include material-transition;
margin: 16px 0;
width: auto;
}
}

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

@ -10,7 +10,7 @@
&:hover,
&:focus,
&:active { background: $tab-indicator-bg-hover-color }
&:active { background: $tab-bg-hover-color }
}
.nav-link,
@ -19,7 +19,7 @@
&:hover {
color: $top-bar-text-color;
background: $tab-indicator-bg-hover-color;
background: $tab-bg-hover-color;
text-decoration: none;
}
}
@ -29,7 +29,7 @@
margin: 0;
border-radius: 0;
&:hover { background: $tab-indicator-bg-hover-color }
&:hover { background: $tab-bg-hover-color }
}
.detailed-status__meta { margin-top: 16px }
@ -77,7 +77,7 @@
background: linear-gradient(0deg, transparent, transparent 60px, rgba(0, 0, 0, 0.5) 60px, rgba(0, 0, 0, 0.2) 80%, transparent);
&::before {
background: $text-tab-bg-color;
background: $tab-bg-color;
border-radius: 0 0 $card-radius $card-radius;
}
@ -107,7 +107,7 @@
border-right: none;
&.active {
&::after { border-bottom: 4px solid $text-tab-indicator-active-color }
&::after { border-bottom: 4px solid $tab-item-active-color }
}
&::after {
@ -115,7 +115,7 @@
opacity: 1;
}
&:hover { background: $text-tab-indicator-bg-hover-color }
&:hover { background: $tab-bg-hover-color }
.counter-number {
color: $ui-text-color;
@ -178,6 +178,8 @@
.grid { grid-gap: 16px }
}
.account-header .name { color: $ui-text-color }
.brand__tagline { color: $ui-text-color }
.logo-container h1 svg { fill: $ui-text-color }

8
app/javascript/styles/mastodon-material/theme/emoji-picker.scss
View File

@ -43,14 +43,14 @@
}
&-anchor {
color: $text-tab-indicator-color;
color: $tab-item-color;
padding: 10px 4px;
&-bar { background-color: $icon-tab-indicator-active-color }
&-bar { background-color: $tab-item-active-color }
&-selected { color: $icon-tab-indicator-hover-color }
&-selected { color: $tab-item-color }
&:hover { color: $icon-tab-indicator-hover-color }
&:hover { color: $tab-item-color }
}
&-search {

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

@ -68,7 +68,10 @@
}
}
.actions { padding: 16px }
.actions {
padding: 16px;
margin-top: 0;
}
.check_boxes .checkbox label {
color: $primary-text-color;
@ -109,12 +112,13 @@
input[type=url],
textarea {
@include text-area-border($other-text-area-border);
color: $text-field-color;
background: $text-field-bg-color;
padding: 16px;
&:active,
&:focus { background: $text-field-bg-color }
&:focus {
background: $text-field-bg-color;
padding: 16px 16px 15px;
}
&::placeholder { color: $tips-text-color }
}
@ -143,6 +147,12 @@
}
&.translation-prompt { color: $ui-text-color }
&.notice {
border: none;
background: $succeeded-card-bg-color;
color: $verified-color;
}
}
.form-footer a { color: $ui-text-color }
@ -151,6 +161,8 @@
.oauth-prompt {
margin-bottom: 32px;
color: $ui-text-color;
strong { color: $primary-text-color }
}
.input-copy {

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

@ -71,7 +71,19 @@
&.fa-cloud-upload,
&.fa-cloud-download,
&.fa-mobile-phone, &.fa-mobile,
&.fa-tablet {
&.fa-tablet,
&.fa-gavel, &.fa-legal,
&.fa-comment,
&.fa-camera,
&.fa-flag,
&.fa-circle,
&.fa-dashboard, &.fa-tachometer,
&.fa-cloud,
&.fa-ban,
&.fa-power-off,
&.fa-copy, &.fa-files-o,
&.fa-smile-o,
&.fa-database {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
@ -151,6 +163,18 @@
&.fa-cloud-download::before { content: "cloud_download" }
&.fa-mobile-phone::before, &.fa-mobile::before { content: "smartphone" }
&.fa-tablet::before { content: "tablet" }
&.fa-gavel::before, &.fa-legal::before { content: "admin_panel_settings" }
&.fa-comment::before { content: "comment" }
&.fa-camera::before { content: "photo_camera" }
&.fa-flag::before { content: "flag" }
&.fa-circle::before { content: "circle" }
&.fa-dashboard::before, &.fa-tachometer::before { content: "dashboard" }
&.fa-cloud::before { content: "cloud" }
&.fa-ban::before { content: "block" }
&.fa-power-off::before { content: "power_settings_new" }
&.fa-copy::before, &.fa-files-o::before { content: "content_copy" }
&.fa-smile-o::before { content: "emoji_emotions" }
&.fa-database::before { content: "storage" }
}
// bookmark icon
@ -183,14 +207,14 @@ button.icon-button i.fa-retweet {
height: 20px;
width: 20px;
transition: none;
background-image: url('data:image/svg+xml;utf8,<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>');
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($boosted-icon-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>') }
.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($boosted-icon-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-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>');
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($boosted-icon-color)}" stroke-width="0"/></svg>');
}
button.icon-button.disabled i.fa-retweet,
@ -287,3 +311,6 @@ button.table-action-link i.fa {
// sidebar icon in settings
.admin-wrapper .sidebar ul a i.fa { vertical-align: text-bottom }
.back-link a .fa { vertical-align: middle }

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

@ -43,7 +43,14 @@
color: $ui-text-color;
font-size: 16px;
&:hover {
&.active,
&.active button,
&:active,
&:active button,
&:focus,
&:focus button,
&:hover,
&:hover button {
background: $card-bg-hover-color;
color: $ui-text-color;
}

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

@ -3,12 +3,12 @@
&__link {
padding: 16px 16px 12px 16px;
color: $top-bar-icon-color;
color: $tab-item-color;
border-bottom: 4px solid transparent;
&.active {
border-bottom: 4px solid $tab-indicator-active-color;
color: $tab-indicator-active-color;
border-bottom: 4px solid $tab-item-active-color;
color: $tab-item-active-color;
}
.fa { font-size: 20px }
@ -61,11 +61,24 @@
.fa-times-circle.active { left: unset }
}
.directory {
&__list {
grid-gap: 16px;
margin: 16px;
}
&__card { margin-bottom: 16px }
}
}
// small size screen
@media screen and (max-width: 415px) {
.public-layout { padding-top: 64px }
.public-layout {
padding-top: 64px;
.header { margin: 0 }
}
}
// middle size screen
@ -91,26 +104,29 @@
}
//single column mode
@media screen and (min-width: 631px) {
.column:first-child,
.drawer:first-child { padding-left: 8px }
.column:last-child,
.drawer:last-child { padding-right: 8px }
@media screen and (min-width: 630px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-bg-hover-color;
background: $tab-bg-hover-color;
border-bottom-color: transparent;
}
&:active,
&:focus {
background: $tab-indicator-bg-focus-color;
background: $tab-bg-focus-color;
border-bottom-color: $tab-bg-color;
}
&.active { border-bottom-color: $tab-indicator-active-color }
&.active { border-bottom-color: $tab-item-active-color }
}
.columns-area--mobile .status {
padding: 16px 16px 16px 80px;
&__prepend {
margin-left: 80px;
padding-top: 16px;
}
}
}
@ -131,10 +147,14 @@
.public-layout .public-account-header {
&__bar { background: $card-bg-color }
&__tabs__name h1 {
color: $primary-text-color;
&__tabs {
margin-left: 16px;
small { color: $secondary-text-color }
&__name h1 {
color: $primary-text-color;
small { color: $secondary-text-color }
}
}
}
}

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

@ -39,14 +39,18 @@
&__spoiler-link {
border: 0;
margin: 0 4px;
font-size: 15px;
height: 36px;
padding: 0 16px;
margin: 8px;
color: $text-button-color;
}
&__read-more-button {
@include button-type($button-on-status);
padding: 4px 6px;
margin: 4px;
height: 36px;
padding: 0 16px;
margin: 8px 0;
&:hover { text-decoration: none }
}
@ -155,6 +159,11 @@
a { bottom: auto }
}
&__host {
margin-top: 6px;
color: $secondary-text-color;
}
&.compact {
border-color: $border-color;
outline: none;

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

@ -1,12 +1,12 @@
.batch-table {
border: 1px solid $border-color;
border-radius: 4px;
border-radius: $table-radius;
&__toolbar {
border: none;
border-bottom: 1px solid $border-color;
background: $list-bg-color;
border-radius: 4px 4px 0 0;
border-radius: $table-radius $table-radius 0 0;
&__actions { padding-right: 16px }
}
@ -16,6 +16,12 @@
border-bottom: 1px solid $border-color;
background: $list-bg-color;
&__content {
padding-top: 16px;
&__extra { color: $info-text-color }
}
&:nth-child(2n) {
background: $list-bg-color;
@ -24,11 +30,13 @@
&:last-child {
border-bottom: none;
border-radius: 0 0 4px 4px;
border-radius: 0 0 $table-radius $table-radius;
}
&:hover { background: $list-bg-hover-color }
}
.nothing-here { border: none }
}
a.table-action-link,
@ -50,11 +58,12 @@ button.table-action-link {
.table-wrapper {
margin-bottom: 24px;
border-radius: 2px;
border: 1px solid $border-color;
border-radius: $table-radius;
}
.table {
border: 1px solid $border-color;
border-radius: $table-radius;
td,
th {

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

@ -1,6 +1,6 @@
/*
* Mastodon Material 0.3.0
* Mastodon Material 1.0.0
* Copyright (C) 2021 Rintan, Genbu Project
*/
@import 'about', 'account', 'admin', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'icons', 'forms', 'media', 'modal', 'responsive', 'statuses', 'tables', 'variables', 'widgets';
@import 'about', 'account', 'admin', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'forms', 'icons', 'media', 'modal', 'responsive', 'statuses', 'tables', 'variables', 'widgets';