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

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

Browse Source 
Materialテーマの更新など
This commit is contained in:
YorimiMochida 2021-08-03 22:49:00 +09:00 committed by GitHub
commit c2abe7ee73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 201 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,6 +48,11 @@ $avatar-radius: 50%; // Rounded cropping
//$avatar-radius: $card-radius // Fit to card radius
// Tab indicator thickness
$tab-indicator-thickness: 2px;
//$tab-indicator-thickness: 4px;
// Chip settings
$chip-type: contained; // Material v1 styled contained chip

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

@ -56,6 +56,11 @@ $avatar-radius: 50%; // Rounded cropping
//$avatar-radius: 8px // Material v2 square
// Tab indicator thickness
//$tab-indicator-thickness: 2px;
$tab-indicator-thickness: 4px;
// Chip settings
$chip-type: outlined; // Material v2 styled outlined chip
//$outlined-chip: contained; // Material v1 styled contained chip

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

@ -7,8 +7,6 @@
}
@media screen and (min-width: 415px) {
.column { padding: 0 !important }
.notification.notification,
.status {
border-radius: 0;

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

@ -1,3 +1,5 @@
$dense: true;
.drawer {
&__header { height: 48px }
@ -48,8 +50,6 @@
&__expand { width: 66px }
&__info { padding-right: 0 }
&__avatar {
left: 8px;
top: 10px;

52
app/javascript/styles/mastodon-material/plugins/itabashi.scss
View File

@ -1,52 +0,0 @@
.quote-indicator,
.reply-indicator {
@include card-elevation(false);
margin-bottom: 16px;
padding: 16px;
&__header { margin-bottom: 4px }
&__display-avatar {
margin-right: 8px;
.account__avatar {
width: 32px !important;
height: 32px !important;
background-size: 32px !important;
}
}
&__content {
padding-top: 0;
padding-left: 32px;
color: $primary-text-color;
}
}
.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;
}
}
.detailed-status__display-name {
span,
strong { @include separate-address-line }
}
.display-name { padding-left: 40px }
&>.unlisted-quote>button { color: $ui-text-color }
}

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

@ -1,3 +1,8 @@
$name: Plus;
$target-version: "1.0.0";
$website: "";
@include version-check($name, $target-version, $website);
.status__action-bar-button {
background: #eeeeee;
width: 28px !important;
@ -40,17 +45,27 @@
}
}
// Itabashi quote
// Quote
.quote-status {
border-radius: 0;
border: none;
border-top: 1px solid $border-color;
padding: 16px 0;
padding: 16px 16px 16px 48px;
margin-top: 16px;
.detailed-status__display-avatar,
.status__avatar { left: 0 !important }
.status__avatar {
left: 0 !important;
top: 16px !important;
}
}
@media screen and (min-width: 630px) {
.quote-indicator__content, .reply-indicator__content, .status__content { padding-top: 32px }
@if $dense {
.quote-status {
padding: 0;
margin-top: 16px;
.detailed-status__display-avatar,
.status__avatar { top: 8px !important }
}
}

71
app/javascript/styles/mastodon-material/plugins/quote.scss Normal file
View File

@ -0,0 +1,71 @@
.quote-indicator,
.reply-indicator {
@include card-elevation(false);
margin-bottom: 16px;
padding: 16px;
&__header { margin-bottom: 4px }
&__display-avatar {
margin-right: 8px;
.account__avatar {
width: 40px !important;
height: 40px !important;
background-size: 40px !important;
}
}
&__content {
padding-top: 4px;
color: $primary-text-color;
}
}
.quote-status {
@include card-elevation(false);
background: none;
padding: 16px 16px 16px 72px;
.detailed-status__display-avatar,
.status__avatar {
top: 16px !important;
left: 16px !important;
width: 40px !important;
height: 40px !important;
&>div {
width: 40px !important;
height: 40px !important;
background-size: 40px !important;
}
}
.status__content { padding-top: 8px }
.detailed-status__display-name {
span,
strong { display: block }
}
.display-name {
padding-left: 0;
&__account { color: $secondary-text-color }
}
&>.unlisted-quote>button { color: $ui-text-color }
}
@if $dense {
.quote-status {
padding: 8px 8px 8px 58px;
margin-top: 4px;
.detailed-status__display-avatar,
.status__avatar {
top: 8px !important;
left: 8px !important;
}
}
}

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

@ -2,5 +2,5 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
@import '../../plugins/fedibird';
@import '../../plugins/itabashi';
@import '../../plugins/quote';
//@import '../../plugins/plus';

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

@ -2,5 +2,5 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
@import '../../plugins/fedibird';
@import '../../plugins/itabashi';
@import '../../plugins/quote';
//@import '../../plugins/plus';

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

@ -2,5 +2,5 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
@import '../../plugins/fedibird';
@import '../../plugins/itabashi';
@import '../../plugins/quote';
//@import '../../plugins/plus';

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

@ -2,5 +2,5 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
@import '../../plugins/fedibird';
@import '../../plugins/itabashi';
@import '../../plugins/quote';
//@import '../../plugins/plus';

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

@ -2,5 +2,5 @@
//@import '../../plugins/cards';
//@import '../../plugins/dense';
@import '../../plugins/fedibird';
@import '../../plugins/itabashi';
@import '../../plugins/quote';
//@import '../../plugins/plus';

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

@ -2,5 +2,5 @@
@import '../../plugins/cards';
@import '../../plugins/dense';
@import '../../plugins/fedibird';
@import '../../plugins/itabashi';
@import '../../plugins/plus';
@import '../../plugins/plus';
@import '../../plugins/quote';

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

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

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

@ -2,5 +2,5 @@
//@import '../../plugins/cards';
@import '../../plugins/dense';
@import '../../plugins/fedibird';
@import '../../plugins/itabashi';
@import '../../plugins/quote';
//@import '../../plugins/plus';

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

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

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

@ -2,5 +2,5 @@
//@import '../../plugins/cards';
@import '../../plugins/dense';
@import '../../plugins/fedibird';
@import '../../plugins/itabashi';
@import '../../plugins/quote';
//@import '../../plugins/plus';

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

@ -38,10 +38,6 @@ $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;
@ -279,4 +275,11 @@ $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}";
}
}

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

@ -47,4 +47,12 @@
&__brand svg { fill: $ui-text-color }
}
.information-board__section span:last-child { color: $ui-text-color }
.information-board__section span:last-child { color: $ui-text-color }
.rules-list {
background: $card-bg-color;
border: 1px solid $border-color;
border-radius: $card-radius;
&__text { color: $primary-text-color }
}

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

@ -7,16 +7,9 @@
&__avatar {
border-radius: $avatar-radius;
width: 40px;
height: 40px;
&-overlay {
&-base {
border-radius: $avatar-radius;
width: 44px;
height: 44px;
background-size: 44px;
}
&-base { border-radius: $avatar-radius }
&-overlay { border-radius: $avatar-radius }
}
@ -27,6 +20,8 @@
margin-right: 16px;
}
&__action-bar { width: 40px }
&__header {
&__bar {
background: $card-bg-color;
@ -174,10 +169,11 @@
a {
padding: 16px 0;
color: $tab-item-color;
border-bottom: $tab-indicator-thickness solid transparent;
&.active {
color: $tab-item-active-color;
border-bottom: 4px solid $tab-item-active-color;
border-bottom: $tab-indicator-thickness solid $tab-item-active-color;
&::before,
&:after { border: none }

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

@ -21,10 +21,6 @@
$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

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

@ -11,7 +11,11 @@
&:hover { color: $icon-button-active-hover-color }
}
&.disabled { color: $disabled-icon-color }
&.disabled {
color: $disabled-icon-color;
&:hover { color: $disabled-icon-color }
}
&.inverted {
color: $icon-button-color;

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

@ -510,14 +510,14 @@
background: $tab-bg-color;
color: $tab-item-color;
font-size: 16px;
border-bottom: 2px solid transparent;
border-bottom: $tab-indicator-thickness solid transparent;
padding: 12px 0 10px;
span { font-size: 14px }
&.active {
color: $tab-item-active-color;
border-bottom: 2px solid $tab-item-active-color;
border-bottom: $tab-indicator-thickness solid $tab-item-active-color;
&::before,
&:after { border: none }
@ -538,6 +538,11 @@
}
&__display-name:hover { color: inherit }
&__relative_time {
color: $info-text-color;
padding-bottom: 0;
}
}
.notification-favourite .status.status-direct {

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

@ -740,4 +740,11 @@
color: $secondary-text-color;
}
}
}
.timeline-hint {
color: $ui-text-color;
padding: 16px;
a { color: $link-text-color }
}

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

@ -38,7 +38,7 @@
.detailed-status { padding: 16px }
.footer {
padding-top: 16px;
padding-top: 32px;
padding-bottom: 64px;
color: $ui-text-color;

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

@ -16,6 +16,6 @@
border: none;
padding: 4px;
border-radius: 50%;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
}

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

@ -223,6 +223,12 @@ button.icon-button.disabled: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" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
}
// private boost
button.icon-button.reblogPrivate i.fa-retweet,
button.icon-button.reblogPrivate:hover i.fa-retweet {
background-image: url('data:image/svg+xml;utf8,<svg height="40px" width="20px" viewBox="0 0 24 48" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 H 24 V 24 H 0 Z" fill="none" /><path d="M 17 2 L 17 5 L 5 5 L 5 11 L 7 11 L 7 7 L 17 7 L 17 10 L 21 6 L 17 2 z M 7 14 L 3 18 L 7 22 L 7 19 L 14 19 L 14 17 L 7 17 L 7 14 z " fill="#{svg-color($icon-button-color)}" /><path d="m 21,17 v -1 c 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2 v 1 c -0.55,0 -1,0.45 -1,1 v 3 c 0,0.55 0.45,1 1,1 h 4 c 0.55,0 1,-0.45 1,-1 v -3 c 0,-0.55 -0.45,-1 -1,-1 z m -1,0 h -2 v -1 c 0,-0.55 0.45,-1 1,-1 0.55,0 1,0.45 1,1 z" fill="#{svg-color($icon-button-color)}" /><path d="M 0,24 H 24 V 48 H 0 Z" fill="none" /><path d="M 17 26 L 17 29 L 5 29 L 5 35 L 7 35 L 7 31 L 17 31 L 17 34 L 21 30 L 17 26 z M 7 38 L 3 42 L 7 46 L 7 43 L 14 43 L 14 41 L 7 41 L 7 38 z" fill="#{svg-color($boosted-icon-color)}" /><path d="m 21,41 v -1 c 0,-1.1 -0.9,-2 -2,-2 -1.1,0 -2,0.9 -2,2 v 1 c -0.55,0 -1,0.45 -1,1 v 3 c 0,0.55 0.45,1 1,1 h 4 c 0.55,0 1,-0.45 1,-1 v -3 c 0,-0.55 -0.45,-1 -1,-1 z m -1,0 h -2 v -1 c 0,-0.55 0.45,-1 1,-1 0.55,0 1,0.45 1,1 z" fill="#{svg-color($boosted-icon-color)}" /></svg>');
}
// dropdown icon
.compose-form__poll-wrapper select,
.simple_form select {

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

@ -61,16 +61,19 @@
.status {
background: $card-bg-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
padding: 12px 16px;
&__avatar {
left: 12px;
width: 40px;
height: 40px;
left: 16px;
top: 12px;
}
}
}
.boost-modai__status-header { padding-left: 56px }
.report-modal {
@include shadow-24dp;
background: $card-bg-color;

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

@ -1,15 +1,19 @@
.status {
padding: 12px 12px 4px 70px;
padding: 16px 16px 8px 72px;
border-bottom: 1px solid $border-color;
&__expand { width: 70px }
&__expand { width: 72px }
&__info {
font-size: $name-font-size;
padding-right: 4px;
.status__display-name { padding-right: 24px }
}
&__relative-time { color: $info-text-color }
&__relative-time {
color: $info-text-color;
padding-bottom: 0;
}
&__display-name {
color: $secondary-text-color;
@ -18,13 +22,13 @@
}
&__avatar {
left: 12px;
top: 12px;
left: 16px;
top: 16px;
}
&__content {
font-size: $status-font-size;
padding-top: 4px;
padding-top: 8px;
color: $primary-text-color;
a {
@ -126,8 +130,9 @@
.status-card {
color: $icon-color;
border-color: $border-color;
border-radius: $card-radius;
outline: none;
margin-top: 16px;
margin: 8px 0;
&__image {
background: transparent;
@ -204,6 +209,7 @@ a.status-card {
}
.display-name { color: $secondary-text-color }
.display-name strong { color: $primary-text-color }
}
@ -259,7 +265,6 @@ a.status-card {
.display-name {
&__html { color: $primary-text-color }
&__account { color: $secondary-text-color }
strong { @include separate-address-line }
}
.activity-stream {
@ -278,4 +283,4 @@ a.status-card {
}
}
.entry.h-cite.p-comment.entry-successor { border-top: 1px solid $border-color }
.entry.h-cite.p-comment.entry-successor:first-child { border-top: 1px solid $border-color }

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

@ -3,4 +3,8 @@
* Copyright (C) 2021 Rintan, Genbu Project
*/
@import 'about', 'account', 'admin', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'forms', 'icons', 'media', 'modal', 'responsive', 'statuses', 'tables', 'variables', 'widgets';
$version: "1.0.0";
@import 'about', 'account', 'admin', 'basics', 'button', 'columns', 'components', 'containers', 'control', 'emoji-picker', 'forms', 'icons', 'media', 'modal', 'responsive', 'statuses', 'tables', 'variables', 'widgets';
$dense: false;

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

@ -66,13 +66,17 @@
.contact-widget {
color: $ui-text-color;
padding: 8px;
h4 { color: $ui-text-color }
h4 {
color: $ui-text-color;
padding: 0 0 8px;
}
.account { padding: 4px 0 8px }
.account { padding: 8px 0 }
&>a {
padding: 0 8px 4px;
padding: 8px 0;
color: $primary-text-color;
}
}

2
app/javascript/styles/y-zu-auto.scss Normal file
View File

@ -0,0 +1,2 @@
@use 'y-zu-dark';
@media (prefers-color-scheme: light) { @import 'y-zu-light'; }

1
config/locales/en.yml
View File

@ -1387,6 +1387,7 @@ en:
plus: Plus
y-zu-dark: Y-zu (Dark)
y-zu-light: Y-zu (Light)
y-zu-auto: Y-zu (Auto)
time:
formats:
default: "%b %d, %Y, %H:%M"

1
config/locales/ja.yml
View File

@ -1365,6 +1365,7 @@ ja:
plus: Plus
y-zu-dark: Y-zu (ダーク)
y-zu-light: Y-zu (ライト)
y-zu-auto: Y-zu (自動)
time:
formats:
default: "%Y年%m月%d日 %H:%M"

1
config/themes.yml
View File

@ -14,3 +14,4 @@ mastodon-material-auto: styles/mastodon-material-auto.scss
plus: styles/plus.scss
y-zu-dark: styles/y-zu-dark.scss
y-zu-light: styles/y-zu-light.scss
y-zu-auto: styles/y-zu-auto.scss