AkkomaGang/fedibird-fe
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

Fix Mastodon Material

Browse source
This commit is contained in:
noellabo 2022-02-19 20:29:57 +09:00
parent 4b77c6d989
commit 9232ce30f3
21 changed files with 172 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -122,7 +122,7 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #ffffff;
$search-bar-color: #d9e1e8;
$search-bar-focus-color: $bg-color;
$search-bar-focus-color: #ffffff;
// Tab color
$tab-item-color: #282c37;

5
app/javascript/styles/mastodon-material/layout/material-v1.scss
View file

@ -56,6 +56,11 @@ $tab-indicator-thickness: 2px;
// Chip settings
$chip-type: contained; // Material v1 styled contained chip
$chip-size: 16px; // Chip height: 24px, Icon size: 16px(Mastodon default)
//$chip-size: 20px; // Chip height: 28px, Icon size: 20px
//$chip-size: 24px; // Chip height: 32px, Icon size: 24px
$chip-radius: 17px; // Oval
// Button on statuses
$button-on-status: text; // Material v1 styled text button

28
app/javascript/styles/mastodon-material/layout/material-v2.scss
View file

@ -3,11 +3,13 @@
// Navigation bar radius
//$nav-bar-radius: 0;
$nav-bar-radius: 8px;
//$nav-bar-radius: 28px; // full radius
// Search bar radius
//$search-bar-radius: 0;
$search-bar-radius: 8px;
//$search-bar-radius: 21px; // full rounded
@ -18,32 +20,39 @@ $bar-radius: 0;
// Button radius settings
//$button-radius: 0;
$button-radius: 8px;
// Card radius settings
//$card-radius: 0;
$card-radius: 8px;
// Dialog radius settings
//$dialog-radius: 0;
$dialog-radius: 8px;
// Menu radius settings
//$menu-radius: 0;
$menu-radius: 8px;
// Table radius settings
$table-radius: 8px;
//$table-radius: 0;
//$table-radius: 2px;
$table-radius: 8px;
// Media radius settings
$media-radius: 0;
//$media-radius: 2px;
//$media-radius: 8px;
// Navigation drawer item settings
//$nav-drawer-item-radius: 0; // rectangle
$nav-drawer-item-radius: 8px; // corner rounded
//$nav-drawer-item-radius: 32px; // full rounded
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
@ -51,12 +60,14 @@ $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
//$avatar-radius: $card-radius; // Fit to card radius
//$avatar-radius: 0; // without cropping
//$avatar-radius: 2px; // Material v1 square
//$avatar-radius: 8px; // Material v2 square
// Tab indicator thickness
//$tab-indicator-thickness: 0;
//$tab-indicator-thickness: 2px;
$tab-indicator-thickness: 4px;
@ -65,6 +76,15 @@ $tab-indicator-thickness: 4px;
$chip-type: outlined; // Material v2 styled outlined chip
//$outlined-chip: contained; // Material v1 styled contained chip
$chip-size: 16px; // Chip height: 24px, Icon size: 16px (Mastodon default)
//$chip-size: 20px; // Chip height: 28px, Icon size: 20px
//$chip-size: 24px; // Chip hight: 32px, Icon size: 24px
//$chip-radius: 0; // Rectangle
//$chip-radius: 4px; // Rounded corner
//$chip-radius: 8px; // Rounded corner (Material v3)
$chip-radius: 17px; // Oval
// Button on statuses
$button-on-status: text; // Material v1 styled text button

2
app/javascript/styles/mastodon-material/plugins/dense.scss
View file

@ -9,8 +9,6 @@ $dense: true;
.column { margin: 10px 5px }
.column-header {
height: 48px;
> button { padding: 12px 16px }
&__buttons { height: 48px }

21
app/javascript/styles/mastodon-material/plugins/fedibird.scss
View file

@ -9,6 +9,10 @@ $website: "";
height: unset;
width: unset;
text-align: center;
&.short-label {
margin: 0px auto 4px;
}
}
.tabs-bar__wrapper .tabs-bar__link .fa {
@ -47,17 +51,26 @@ $website: "";
}
.status__action-bar-button {
flex: 0 0 auto;
flex: 1 0 auto;
&.icon-button {
padding: 8px 3px;
}
}
.status__action-bar-dropdown {
flex: 0 0 auto;
margin-right: 4px;
flex: 1 0 auto;
width: 26px !important;
margin-right: 0;
&.icon-button {
padding: 8px 3px;
}
}
body.rtl {
.status__action-bar-dropdown {
margin-right: 0;
margin-left: 4px;
margin-left: 0;
}
}

6
app/javascript/styles/mastodon-material/profiles/default/loader.scss
View file

@ -5,7 +5,9 @@
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/material-shadow';
@import '../../theme/material-icons';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

6
app/javascript/styles/mastodon-material/profiles/mastodon-material-google-plus/loader.scss
View file

@ -5,7 +5,9 @@
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/material-shadow';
@import '../../theme/material-icons';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

6
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-dark/loader.scss
View file

@ -5,7 +5,9 @@
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/material-shadow';
@import '../../theme/material-icons';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

6
app/javascript/styles/mastodon-material/profiles/mastodon-material-mastodon-light/loader.scss
View file

@ -5,7 +5,9 @@
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/material-shadow';
@import '../../theme/material-icons';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

6
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-black/loader.scss
View file

@ -5,7 +5,9 @@
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/material-shadow';
@import '../../theme/material-icons';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

6
app/javascript/styles/mastodon-material/profiles/mastodon-material-v1-dark/loader.scss
View file

@ -5,7 +5,9 @@
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/material-shadow';
@import '../../theme/material-icons';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

6
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-dark/loader.scss
View file

@ -5,7 +5,9 @@
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/material-shadow';
@import '../../theme/material-icons';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

6
app/javascript/styles/mastodon-material/profiles/mastodon-material-v2-light/loader.scss
View file

@ -5,7 +5,9 @@
@import 'color', 'layout';
@import '../../theme/functions', '../../theme/mixins';
@import '../../theme/material-shadow';
@import '../../theme/material-icons';
@import '../../theme/theme';
@import 'plugins';
@import '../../theme/material-icons';

31
app/javascript/styles/mastodon-material/theme/_mixins.scss
View file

@ -1,34 +1,3 @@
$shadow-color-1: rgba(0,0,0,.2);
$shadow-color-2: rgba(0,0,0,.14);
$shadow-color-3: rgba(0,0,0,.12);
@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
@mixin material-transition { transition: .25s cubic-bezier(0,0,0.2,1) }
@mixin search-bar-hover {

19
app/javascript/styles/mastodon-material/theme/account.scss
View file

@ -96,12 +96,21 @@
dl {
border-bottom: 1px solid $border-color;
&:first-child,
&:first-child .verified { border-radius: $table-radius $table-radius 0 0 }
&:first-child dd,
&:first-child dd .verified { border-radius: 0 $table-radius 0 0 }
&:last-child,
&:last-child .verified {
border-radius: 0 0 $table-radius $table-radius;
&:last-child dd,
&:last-child dd .verified {
border-radius: 0 0 $table-radius 0;
border-bottom: 0;
}
&:first-child dt,
&:first-child dt .verified { border-radius: $table-radius 0 0 0 }
&:last-child dt,
&:last-child dt .verified {
border-radius: 0 0 0 $table-radius;
border-bottom: 0;
}
}

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

@ -187,3 +187,5 @@ label.icon-button {
&:disabled:hover { background-color: $disabled-button-color }
}
}
.layout-multiple-columns .button.button--with-bell { padding: 0 16px }

13
app/javascript/styles/mastodon-material/theme/columns.scss
View file

@ -15,7 +15,6 @@
.column-header {
background: $top-bar-color;
border-radius: $bar-radius;
height: 56px;
> button {
padding: 16px;
@ -482,20 +481,20 @@
&__item {
@include chip-type($chip-type);
border-radius: 17px;
border-radius: $chip-radius;
margin: 2px 4px;
&.active .reactions-bar__item__count { color: $chip-selected-text-color }
&__emoji {
width: 24px;
height: 24px;
margin: 4px 0 4px 2px;
width: $chip-size;
height: $chip-size;
margin: 4px 0;
}
&__count {
font-size: 16px;
margin: 0 12px 0 8px;
font-size: 14px;
margin: 0 8px;
color: $secondary-text-color;
}

42
app/javascript/styles/mastodon-material/theme/components.scss
View file

@ -156,9 +156,17 @@
}
}
.navigation-panel hr {
border-top: 1px solid $border-color;
margin: 8px 0;
.navigation-panel {
hr {
border-top: 1px solid $border-color;
margin: 8px 0;
}
&>a {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.flex-spacer { margin: 8px 0 }
@ -386,6 +394,16 @@
&:focus { border-color: $border-hover-color }
}
&__number {
width: 48px;
flex: 0 0 48px;
}
&__number,
&__option__text { padding: 8px 0 }
&__voted { padding: 8px }
&__option {
padding: 4px;
@ -396,8 +414,6 @@
border-radius: 2px;
padding: 8px 16px;
}
&__text { padding: 8px 0 }
}
&__chart {
@ -442,9 +458,9 @@
}
&__content {
color: $secondary-text-color;
color: $info-text-color;
strong { color: $ui-text-color }
strong { color: $menu-text-color }
}
&.active {
@ -452,18 +468,18 @@
color: $icon-hover-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
color: $info-text-color;
strong { color: $ui-text-color }
strong { color: $menu-text-color }
}
&:hover {
background: $menu-bg-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
color: $info-text-color;
strong { color: $ui-text-color }
strong { color: $menu-text-color }
}
}
}
@ -473,9 +489,9 @@
color: $icon-hover-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
color: $info-text-color;
strong { color: $ui-text-color }
strong { color: $menu-text-color }
}
}
}

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

@ -92,7 +92,7 @@
color: $ui-text-color;
background-color: $dropdown-field-bg-color;
border: none;
border-radius: $menu-radius $menu-radius 0 0;
border-radius: $menu-radius;
padding-left: 16px;
padding-right: 40px;
height: 40px;

3
app/javascript/styles/mastodon-material/theme/material-icons.scss
View file

@ -257,7 +257,8 @@ button.icon-button.reblogPrivate:hover i.fa-retweet {
.fa.fa-envelope.column-header__icon.fa-fw,
.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 }
.fa.fa-list-ul.column-header__icon.fa-fw,
.fa.fa-hashtag.column-header__icon.fa-fw { vertical-align: text-bottom }
// top bar icons in single column mode
.tabs-bar__link .fa {

30
app/javascript/styles/mastodon-material/theme/material-shadow.scss Normal file
View file

@ -0,0 +1,30 @@
$shadow-color-1: rgba(0,0,0,.2);
$shadow-color-2: rgba(0,0,0,.14);
$shadow-color-3: rgba(0,0,0,.12);
@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}