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-05-23 01:12:55 +09:00 committed by YoheiZuho
parent 9bb16ac0e6
commit a865832ab0
25 changed files with 139 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -125,7 +125,7 @@ $search-bar-focus-color: $bg-color;
// Tab color
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: $primary-color;
$tab-item-active-color: #ffffff;
$tab-bg-color: $top-bar-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);

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

@ -126,7 +126,7 @@ $search-bar-focus-color: $bg-color;
// Tab color
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: $primary-color;
$tab-item-active-color: #ffffff;
$tab-bg-color: $top-bar-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);

18
app/javascript/styles/mastodon-material/plugins/cards.scss
View File

@ -6,6 +6,20 @@
> .scrollable { background: $bg-color }
}
@media screen and (min-width: 415px) {
.column { padding: 0 !important }
.notification.notification,
.status {
border-radius: 0;
&__wrapper.status__wrapper {
margin: 8px 0;
border-radius: 0;
}
}
}
.status {
border-bottom: 0;
border-radius: $card-radius;
@ -26,6 +40,4 @@
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
.notification__filter-bar {
@include non-overflow-shadow-4dp;
}
.notification__filter-bar { @include non-overflow-shadow-4dp }

1
app/javascript/styles/mastodon-material/plugins/fedibird.scss
View File

@ -13,6 +13,7 @@
@include shadow-4dp;
.tabs-bar {
&__link,
&__link.active { border-bottom: none }
}

32
app/javascript/styles/mastodon-material/plugins/itabashi.scss Normal file
View File

@ -0,0 +1,32 @@
.quote-indicator {
@include card-elevation(false);
margin-bottom: 16px;
padding: 16px;
&__header { margin-bottom: 4px }
&__display-avatar { margin-right: 8px }
&__content { padding-top: 0 }
}
.quote-status {
@include card-elevation(false);
padding: 16px;
.detailed-status__display-avatar,
.status__avatar {
height: 32px;
width: 232px;
top: 16px !important;
left: 16px !important;
&>div {
width: 32px !important;
height: 32px !important;
background-size: 32px !important;
}
}
.display-name { padding-left: 40px }
}

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

@ -38,4 +38,19 @@
&.active { color: #ffffff }
}
}
// Itabashi quote
.quote-status {
border-radius: 0;
border: none;
border-top: 1px solid $border-color;
padding: 16px 0;
.detailed-status__display-avatar,
.status__avatar { left: 0 !important }
}
@media screen and (min-width: 630px) {
.quote-indicator__content, .reply-indicator__content, .status__content { padding-top: 32px }
}

2
app/javascript/styles/mastodon-material/profiles/mastodon-material-dark/plugins.scss
View File

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

2
app/javascript/styles/mastodon-material/profiles/mastodon-material-light/plugins.scss
View File

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

2
app/javascript/styles/mastodon-material/profiles/material-black/plugins.scss
View File

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

2
app/javascript/styles/mastodon-material/profiles/material-dark/plugins.scss
View File

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

2
app/javascript/styles/mastodon-material/profiles/material-light/plugins.scss
View File

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

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

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

4
app/javascript/styles/mastodon-material/profiles/y-zu-dark/config.scss
View File

@ -1,3 +1,5 @@
// Add your settings below
@import '../../color/v2-dark';
@import '../../color/v2-dark';
$separate-address-line: true;

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

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

4
app/javascript/styles/mastodon-material/profiles/y-zu-light/config.scss
View File

@ -1,3 +1,5 @@
// Add your settings below
@import '../../color/v2-light';
@import '../../color/v2-light';
$separate-address-line: true;

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

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

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

@ -38,6 +38,23 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
@mixin separate-address-line {
@if $separate-address-line { display: block }
}
@mixin card-elevation($elevation) {
border-radius: $card-radius;
background: $card-bg-color;
@if $elevation {
@include shadow-1dp;
border: none;
} @else {
box-shadow: none;
border: 1px solid $border-color;
}
}
@mixin chip-type($chip-type) {
@if $chip-type == contained {
background: $contained-chip-color;
@ -123,9 +140,7 @@ $shadow-color-3: rgba(0,0,0,.12);
border: 1px solid $border-color;
&:active,
&:focus {
border: 2px solid $border-active-color;
}
&:focus { border: 2px solid $border-active-color }
}
}

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

@ -21,6 +21,10 @@
$search-bar-hover: false;
// Separate an address from a name line
$separate-address-line: false;
// Status font size in timeline
$status-font-size: 15px; // mastodon default
//$status-font-size: 16px; // compatible with material design

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

@ -109,8 +109,9 @@ label.icon-button {
background: $contained-button-color;
margin: 2px;
&:hover { background: $contained-button-hover-color }
&:active,
&:focus,
&:hover,
.button--destructive:hover { background: $contained-button-hover-color }
}

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

@ -152,7 +152,10 @@
&:hover { background: $list-bg-hover-color }
&:active,
&:focus { background: $list-bg-active-color }
&:focus {
color: $ui-text-color;
background: $list-bg-active-color;
}
&__icon {
margin-right: 32px;

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

@ -394,8 +394,6 @@
border-radius: 2px;
padding: 8px 16px;
}
&__text { line-height: 36px }
}
&__chart {
@ -412,11 +410,10 @@
}
&__link { color: $ui-text-color }
&__number { line-height: 36px }
}
.privacy-dropdown {
&.active .privacy-dropdown__value,
&.active .privacy-dropdown__value.active {
background: $icon-bg-hover-color;
border-radius: 50%;
@ -483,10 +480,7 @@
.character-counter { color: $secondary-text-color }
.reply-indicator {
box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius;
background: $card-bg-color;
@include card-elevation(false);
padding: 16px;
&__header { margin-bottom: 4px }
@ -731,4 +725,19 @@
.loading-bar {
background-color: $loading-indicator-color;
height: 4px;
}
.regeneration-indicator {
color: $ui-text-color;
background: $bg-color;
padding: 16px;
&__label {
margin-top: 32px;
strong {
margin-bottom: 16px;
color: $secondary-text-color;
}
}
}

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

@ -39,7 +39,7 @@
&-bar {
border: 0 solid $border-color;
&:first-child { background: $menu-bg-color }
&:first-child { background: $tab-bg-color }
}
&-anchor {

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

@ -14,6 +14,6 @@
.icon-with-badge__badge {
background: $badge-color;
border: none;
padding: 2px 6px;
border-radius: 12px;
padding: 4px;
border-radius: 50%;
}

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

@ -4,10 +4,10 @@
&__link {
padding: 16px 16px 12px 16px;
color: $tab-item-color;
border-bottom: 4px solid transparent;
border-bottom: 2px solid transparent;
&.active {
border-bottom: 4px solid $tab-item-active-color;
border-bottom: 2px solid $tab-item-active-color;
color: $tab-item-active-color;
}

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

@ -259,6 +259,7 @@ a.status-card {
.display-name {
&__html { color: $primary-text-color }
&__account { color: $secondary-text-color }
strong { @include separate-address-line }
}
.activity-stream {