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-03-30 14:15:07 +09:00
parent 17e357e43b
commit dd06802786
12 changed files with 148 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,8 @@ $primary-color: #7e5f66;
$section-text-color: lighten($primary-color, 10%);
$unread-bg-color: transparentize($primary-color, 0.8);
$icon-color: #d2d2d2;
$icon-hover-color: #ffffff;
$top-bar-icon-color: $icon-color;

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

@ -4,6 +4,8 @@ $primary-color: #7e5f66;
$section-text-color: $primary-color;
$unread-bg-color: transparentize($primary-color, 0.8);
$icon-color: #92787d;
$icon-hover-color: darken($icon-color, 10%);
$top-bar-icon-color: $icon-color;
@ -17,6 +19,8 @@ $control-border-hover-color: transparentize($control-border-active-color, 0.8);
$icon-button-color: $icon-color;
$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%);
$outlined-button-color: $contained-button-color;

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

@ -14,4 +14,37 @@
}
}
.landing {
.simple_form p.lead {
color: $ui-text-color;
padding: 16px;
margin-bottom: 0;
}
.directory { margin-top: 16px }
.hero-widget {
.account { padding: 16px 0 }
h4 { color: $ui-text-color }
&__footer {
background: $card-bg-color;
padding: 16px;
border-radius: 0 0 $card-radius $card-radius;
}
&__counter {
color: $primary-text-color;
padding: 8px;
span { color: $ui-text-color }
}
}
&__grid { grid-gap: 16px }
&__brand svg { fill: $ui-text-color }
}
.information-board__section span:last-child { color: $ui-text-color }

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

@ -1,6 +1,7 @@
body,
body.embed,
body.admin { background: $bg-color }
body.admin,
body.lighter { background: $bg-color }
.focusable:focus { background: transparent }

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

@ -49,6 +49,9 @@
margin-left: 8px;
}
&:active,
&:focus { color: $icon-button-active-color }
&:focus { background-color: transparent }
&:hover {
@ -137,8 +140,8 @@ label.icon-button {
}
.simple_form {
.block-button, .block-button:last-child
.button, .button:last-child
.block-button, .block-button:last-child,
.button, .button:last-child,
button, button:last-child {
display: inline-block;
border-radius: $button-radius;
@ -149,7 +152,11 @@ label.icon-button {
padding: 10px 16px;
margin-left: auto;
font-size: 14px;
line-height: 15px;
&:hover { background: $contained-button-hover-color }
&:disabled,
&:disabled:hover { background-color: $disabled-button-color }
}
}

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

@ -203,7 +203,12 @@
padding: 16px 0 16px 16px;
background: $card-bg-color;
.icon-button { margin: 0 16px }
.icon-button {
width: 36px !important;
height: 36px !important;
padding: 8px;
margin: 0 16px;
}
}
.columns-area {
@ -483,6 +488,8 @@
color: $secondary-text-color;
margin: 0 16px 0 70px;
font-size: 16px;
.fa { color: $icon-button-color }
}
&__display-name:hover { color: inherit }

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

@ -4,6 +4,8 @@
&__overlay { background-color: rgba(0,0,0,.7) !important }
}
.modal-layout { background-color: $bg-color }
.drawer {
&__header {
@include shadow-4dp;
@ -619,6 +621,18 @@
}
}
.domain {
padding: 16px;
border-bottom: 1px solid $border-color;
.domain__domain-name { color: $primary-text-color }
&__buttons .icon-button {
@include icon-button;
padding: 8px;
}
}
.upload-progress {
color: $ui-text-color;

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

@ -8,7 +8,9 @@
.brand {
svg { fill: $top-bar-text-color }
&:hover { background: $tab-indicator-bg-hover-color }
&:hover,
&:focus,
&:active { background: $tab-indicator-bg-hover-color }
}
.nav-link,
@ -123,6 +125,21 @@
}
}
&__extra {
.public-account-bio .account__header__fields { border-top: 1px solid $border-color }
&__links {
color: $ui-text-color;
a {
color: $ui-text-color;
padding: 16px;
strong { color: $primary-text-color }
}
}
}
&--no-bar .public-account-header {
&__image,
&__image img { border-radius: $card-radius }
@ -161,4 +178,8 @@
.grid { grid-gap: 16px }
}
.brand__tagline { color: $ui-text-color }
.logo-container h1 svg { fill: $ui-text-color }
.grid-4 { grid-gap: 16px }

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

@ -36,13 +36,22 @@
}
}
.label_input__wrapper {
border-radius: $card-radius;
.label_input {
&__wrapper {
border-radius: $card-radius;
&:hover { background: $dropdown-field-bg-hover-color }
&:active,
&:focus { background: $dropdown-field-bg-active-color }
}
&:hover { background: $dropdown-field-bg-hover-color }
&__append {
padding: 16px;
color: $ui-text-color;
&:active,
&:focus { background: $dropdown-field-bg-active-color }
&::after { background-image: none }
}
}
.card { margin-bottom: 16px }
@ -59,6 +68,8 @@
}
}
.actions { padding: 16px }
.check_boxes .checkbox label {
color: $primary-text-color;
padding-top: 8px;
@ -68,6 +79,8 @@
padding: 16px;
margin-bottom: 0;
color: $ui-text-color;
&.subtle-hint { margin-top: 16px }
}
select {
@ -105,6 +118,14 @@
&::placeholder { color: $tips-text-color }
}
input[type=email],
input[type=number],
input[type=password],
input[type=text] {
&:focus:invalid:not(:placeholder-shown),
&:required:invalid:not(:placeholder-shown) { border-color: $error-color }
}
}
.flash-message {
@ -124,6 +145,14 @@
&.translation-prompt { color: $ui-text-color }
}
.form-footer a { color: $ui-text-color }
.follow-prompt,
.oauth-prompt {
margin-bottom: 32px;
color: $ui-text-color;
}
.input-copy {
background: $bg-color;
padding-right: 8px;

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

@ -70,7 +70,8 @@
&.fa-exchange,
&.fa-cloud-upload,
&.fa-cloud-download,
&.fa-mobile-phone, &.fa-mobile {
&.fa-mobile-phone, &.fa-mobile,
&.fa-tablet {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
@ -149,6 +150,7 @@
&.fa-cloud-upload::before { content: "cloud_upload" }
&.fa-cloud-download::before { content: "cloud_download" }
&.fa-mobile-phone::before, &.fa-mobile::before { content: "smartphone" }
&.fa-tablet::before { content: "tablet" }
}
// bookmark icon

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

@ -127,4 +127,14 @@
.sidebar-wrapper { @include shadow-4dp }
}
.public-layout .public-account-header {
&__bar { background: $card-bg-color }
&__tabs__name h1 {
color: $primary-text-color;
small { color: $secondary-text-color }
}
}
}

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

@ -14,6 +14,8 @@
padding: 16px;
color: $primary-text-color;
border-radius: 0 0 $card-radius $card-radius;
a { color: $link-text-color }
}
}
@ -153,4 +155,9 @@
small { color: $secondary-text-color }
}
}
.statuses-grid .detailed-status {
@include shadow-1dp;
border-radius: $card-radius;
}