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

Merge pull request #456 from Rintan/features/material-theme

Browse Source 
bug fixes
This commit is contained in:
YorimiMochida 2021-08-08 15:41:33 +09:00 committed by GitHub
commit 5e9611e0fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 117 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -90,7 +90,8 @@ $icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$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%);
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@ -90,7 +90,8 @@ $icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$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%);
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@ -89,7 +89,8 @@ $icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$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%);
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@ -1,5 +1,7 @@
@charset "UTF-8";
$name: "Plus Classic";
$target-version: "1.0.0";
$website: "";
@include version-check($name, $target-version, $website);
$color-scheme: light;
@ -89,7 +91,8 @@ $icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$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%);
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@ -89,7 +89,8 @@ $icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$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%);
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@ -90,7 +90,8 @@ $icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$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%);
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@ -90,7 +90,8 @@ $icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$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%);
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@ -90,7 +90,8 @@ $icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$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%);
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);

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

@ -34,6 +34,11 @@ $website: "";
}
}
// single column mode
@media screen and (min-width: 415px) {
.columns-area__panels__main { box-shadow: none }
}
// Fedibird bottom bar in mobile
.tabs-bar.bottom-bar {
background: #212121;

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

@ -9,8 +9,8 @@ $unread-bg-color: transparentize($primary-color, 0.8);
$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: lighten($primary-color, 20%);
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
@ -21,7 +21,8 @@ $icon-button-hover-color: $icon-hover-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%);
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
@ -38,7 +39,7 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
$border-active-color: $primary-color;
$tab-item-active-color: $primary-color;
$tab-item-active-color: lighten($primary-color, 10%);
$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/profiles/y-zu-dark/icon_config.scss
View File

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

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

@ -1,9 +1,12 @@
// Add your customization below
$color-scheme: light;
$primary-color: #7e5f66;
$section-text-color: $primary-color;
$bg-color: #fafafa;
$unread-bg-color: transparentize($primary-color, 0.8);
$icon-color: #92787d;
@ -11,7 +14,6 @@ $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;
@ -22,15 +24,15 @@ $icon-button-hover-color: $icon-hover-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%);
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $contained-button-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
$text-button-color: $contained-button-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$bg-color: #fafafa;
$floating-action-button-icon-color: $primary-color;
$toggle-thumb-active-color: $primary-color;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);

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

@ -280,6 +280,6 @@ $shadow-color-3: rgba(0,0,0,.12);
// version checker
@mixin version-check($name, $target-version, $website) {
@if $target-version != $version {
@debug "[Info] #{$name} is made for Mastodon Material #{$target-version}. Some css elements might be broken! Check plugin website: #{$website}";
@debug "[Info] #{$name} is made for Mastodon Material #{$target-version}. Some css elements might be broken! Please check plugin website: #{$website}";
}
}

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

@ -24,7 +24,7 @@
&__header {
&__bar {
background: $card-bg-color;
background: $tab-bg-color;
padding: 8px;
border-bottom: none;
@ -96,9 +96,14 @@
dl {
border-bottom: 1px solid $border-color;
&:first-child .verified { border-radius: 0 }
&:first-child,
&:first-child .verified { border-radius: $table-radius $table-radius 0 0 }
&:last-child { border-bottom: 0 }
&:last-child,
&:last-child .verified {
border-radius: 0 0 $table-radius $table-radius;
border-bottom: 0;
}
}
dd,

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

@ -105,6 +105,31 @@
}
}
.admin-account-bio {
margin: 16px 0 0;
.account__header {
&__content {
padding: 16px;
color: $primary-text-color;
}
&__content,
&__fields {
@include shadow-1dp;
background: $list-bg-color;
border-radius: $table-radius;
a { color: $link-text-color }
}
}
&>div {
padding: 0 8px;
margin-bottom: 16px;
}
}
.filters .filter-subset {
padding: 0 16px;
margin: 0 0 16px;
@ -217,6 +242,8 @@ body {
.dashboard {
&__counters {
margin: 0 0 16px;
&__num,
&__text {
color: $secondary-text-color;
@ -241,6 +268,8 @@ body {
&:hover { background: $card-bg-hover-color }
}
}
&.admin-account-counters { margin-top: 16px }
}
&__widgets {

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

@ -177,6 +177,12 @@ label.icon-button {
&:hover { background: $contained-button-hover-color }
&:active,
&:focus { background: $contained-button-active-color }
&.negative:active,
&.negative:focus { background: $error-color }
&:disabled,
&:disabled:hover { background-color: $disabled-button-color }
}

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

@ -434,13 +434,17 @@
.announcements-list {
border: 1px solid $border-color;
border-radius: $table-radius;
&__item {
padding: 16px 0;
background: $list-bg-color;
border-radius: $table-radius;
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 }
&__title {
padding: 0 16px;
color: $primary-text-color;

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

@ -318,6 +318,7 @@
}
}
// compose-panel in single column mode
.compose-panel {
overflow: visible;
border-radius: $card-radius;
@ -327,6 +328,7 @@
background: $card-bg-color;
padding-bottom: 16px;
margin-bottom: 0;
border-radius: $card-radius;
}
}

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

@ -45,10 +45,15 @@
&-anchor {
color: $tab-item-color;
padding: 10px 4px;
border-radius: 0;
&-bar { background-color: $tab-item-active-color }
&-selected { color: $tab-item-color }
&-selected {
color: $tab-item-active-color;
&:hover { color: $tab-item-active-color }
}
&:hover { color: $tab-item-color }
}
@ -56,9 +61,15 @@
&-search {
background: $menu-bg-color;
&-icon {
right: auto;
left: 16px;
padding: 2px 6px;
}
input {
outline: none;
padding: 8px;
padding: 8px 8px 8px 33px;
background: $search-bar-color;
color: $ui-text-color;
border: 0;

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

@ -1,7 +1,7 @@
.simple_form {
.fields-row {
padding-top: 8px;
margin: 0 -8px 28px;
margin: 0 0 16px;
&__column { padding: 0 8px }
}

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

@ -83,7 +83,8 @@
&.fa-power-off,
&.fa-copy, &.fa-files-o,
&.fa-smile-o,
&.fa-database {
&.fa-database,
&.fa-floppy-o, &.fa-save {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
@ -175,6 +176,7 @@
&.fa-copy::before, &.fa-files-o::before { content: "content_copy" }
&.fa-smile-o::before { content: "emoji_emotions" }
&.fa-database::before { content: "storage" }
&.fa-floppy-o::before, &.fa-save::before { content: "save" }
}
// bookmark icon
@ -253,7 +255,9 @@ button.icon-button.reblogPrivate:hover i.fa-retweet {
.fa.fa-bookmark.column-header__icon.fa-fw,
.fa.fa-address-book-o.column-header__icon.fa-fw,
.fa.fa-envelope.column-header__icon.fa-fw,
.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
.fa.fa-star.column-header__icon.fa-fw,
.fa.fa-list.column-header__icon.fa-fw,
.fa.fa-list-ul.column-header__icon.fa-fw { vertical-align: text-bottom }
// top bar icons in single column mode
.tabs-bar__link .fa {
@ -302,12 +306,16 @@ 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;
}
// you might like
.trends__header .fa { vertical-align: bottom }
// status scope
.status__visibility-icon .fa,
.account__header__tabs__name .fa {

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

@ -61,14 +61,6 @@
.status {
background: $card-bg-color;
border-bottom-color: $border-color;
padding: 12px 16px;
&__avatar {
width: 40px;
height: 40px;
left: 16px;
top: 12px;
}
}
}

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

@ -35,6 +35,11 @@
&:hover { background: $list-bg-hover-color }
}
&__form {
border: 1px solid $border-color;
background: $list-bg-color;
}
.nothing-here { border: none }
}