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

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

Browse Source 
Y-zu テーマの追加
This commit is contained in:
YorimiMochida 2020-12-29 17:13:34 +09:00 committed by GitHub
commit c61f12558e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
203 changed files with 9745 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
// Border color
$border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 16%);

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: #ccd7e0;

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -52,4 +52,9 @@ $button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;
$fab-size: 56px;
// Text area border
$text-area-border: false;
//$text-area-border: underlined;

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

@ -61,4 +61,10 @@ $button-shadow: false; // Material v2 styled colored button without shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini
//$fab-size: 40px; // Mini
// Text area border
$text-area-border: false;
//$text-area-border: underlined;
//$text-area-border: outlined;

1
app/javascript/styles/mastodon-material-dark/loader.scss
View File

@ -2,6 +2,7 @@
@import 'theme/material-icons';
// Plugins
@import 'plugins/astarte';
//@import 'plugins/cards';
//@import 'plugins/dense';
//@import 'plugins/plus';

26
app/javascript/styles/mastodon-material-dark/plugins/astarte.scss Normal file
View File

@ -0,0 +1,26 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.announcements {
li {
padding: 8px 16px;
background: $card-bg-color;
border-radius: $card-radius;
border: 1px solid $border-color;
}
&__icon {
margin: 0;
right: 16px;
height: 20px;
.icon-button {
@include icon-button;
&:hover { background: transparent }
}
}
}

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

@ -35,7 +35,14 @@
}
.compose-form {
.compose-form__publish { padding-top: 8px }
.compose-form {
&__publish { padding-top: 8px }
&__buttons-wrapper {
.icon-button,
.text-icon-button { padding: 4px }
}
}
}
.status {

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

@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
@mixin text-area-border {
@if $text-area-border == underlined {
.compose-form .autosuggest-textarea__textarea {
border-radius: $card-radius $card-radius 0 0;
border-bottom: 1px solid $border-color;
&:hover { border-color: $border-hover-color }
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
}
}
@if $text-area-border == outlined {
.compose-form .autosuggest-textarea__textarea {
border-radius: $card-radius;
border: 1px solid $border-color;
&:hover { border-color: $border-hover-color }
&:active,
&:focus {
border: 2px solid $border-active-color;
padding: 7px 41px 7px 15px;
}
}
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;

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

@ -18,7 +18,7 @@
&-overlay {
&-base {
border-radius: 50%;
border-radius: $avater-radius;
width: 44px;
height: 44px;
background-size: 44px;

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

@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include button-shadow;
.icon-button {

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

@ -379,7 +379,7 @@
.announcements {
background: $card-bg-color;
padding: 0;
padding: 0 8px;
&__container { color: $primary-text-color }

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

@ -4,6 +4,9 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include text-area-border;
.modal-root {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
@ -200,7 +203,7 @@
&__textarea {
background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
padding: 8px 42px 8px 16px;
&::placeholder { color: $tips-text-color }
}
@ -227,13 +230,18 @@
}
.spoiler-input {
&.spoiler-input--visible { margin-bottom: 8px }
&.spoiler-input--visible { margin-bottom: 16px }
&__input {
color: $ui-text-color;
background: $card-bg-color;
border-bottom: 1px solid $border-color;
border-radius: 0;
&:hover { border-color: $border-hover-color }
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
&::placeholder { color: $tips-text-color }
}
@ -299,7 +307,7 @@
background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
&:focus { border-color: $border-hover-color }
}
.button.button-secondary {
@ -357,7 +365,7 @@
border: 1px solid $border-color;
padding: 8px 12px;
&:focus { border-color: $border-active-color }
&:focus { border-color: $border-hover-color }
}
&__option {
@ -634,4 +642,6 @@
border-radius: 0;
background: $progress-indicator-color;
}
}
}
.emoji-button { padding: 8px }

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

@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// Attachment icon
.attachment-list__list a .fa { vertical-align: middle }
// status detail icon
.detailed-status .fa {
font-size: 16px;

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

@ -42,6 +42,7 @@
}
.actions-modal {
@include shadow-24dp;
background: $card-bg-color;
border-radius: $card-radius;

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
// Border color
$border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 16%);

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: #ccd7e0;

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -52,4 +52,9 @@ $button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;
$fab-size: 56px;
// Text area border
$text-area-border: false;
//$text-area-border: underlined;

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

@ -61,4 +61,10 @@ $button-shadow: false; // Material v2 styled colored button without shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini
//$fab-size: 40px; // Mini
// Text area border
$text-area-border: false;
//$text-area-border: underlined;
//$text-area-border: outlined;

1
app/javascript/styles/mastodon-material-light/loader.scss
View File

@ -2,6 +2,7 @@
@import 'theme/material-icons';
// Plugins
@import 'plugins/astarte';
//@import 'plugins/cards';
//@import 'plugins/dense';
//@import 'plugins/plus';

26
app/javascript/styles/mastodon-material-light/plugins/astarte.scss Normal file
View File

@ -0,0 +1,26 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.announcements {
li {
padding: 8px 16px;
background: $card-bg-color;
border-radius: $card-radius;
border: 1px solid $border-color;
}
&__icon {
margin: 0;
right: 16px;
height: 20px;
.icon-button {
@include icon-button;
&:hover { background: transparent }
}
}
}

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

@ -35,7 +35,14 @@
}
.compose-form {
.compose-form__publish { padding-top: 8px }
.compose-form {
&__publish { padding-top: 8px }
&__buttons-wrapper {
.icon-button,
.text-icon-button { padding: 4px }
}
}
}
.status {

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

@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
@mixin text-area-border {
@if $text-area-border == underlined {
.compose-form .autosuggest-textarea__textarea {
border-radius: $card-radius $card-radius 0 0;
border-bottom: 1px solid $border-color;
&:hover { border-color: $border-hover-color }
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
}
}
@if $text-area-border == outlined {
.compose-form .autosuggest-textarea__textarea {
border-radius: $card-radius;
border: 1px solid $border-color;
&:hover { border-color: $border-hover-color }
&:active,
&:focus {
border: 2px solid $border-active-color;
padding: 7px 41px 7px 15px;
}
}
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;

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

@ -18,7 +18,7 @@
&-overlay {
&-base {
border-radius: 50%;
border-radius: $avater-radius;
width: 44px;
height: 44px;
background-size: 44px;

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

@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include button-shadow;
.icon-button {

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

@ -379,7 +379,7 @@
.announcements {
background: $card-bg-color;
padding: 0;
padding: 0 8px;
&__container { color: $primary-text-color }

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

@ -4,6 +4,9 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include text-area-border;
.modal-root {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
@ -200,7 +203,7 @@
&__textarea {
background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
padding: 8px 42px 8px 16px;
&::placeholder { color: $tips-text-color }
}
@ -227,13 +230,18 @@
}
.spoiler-input {
&.spoiler-input--visible { margin-bottom: 8px }
&.spoiler-input--visible { margin-bottom: 16px }
&__input {
color: $ui-text-color;
background: $card-bg-color;
border-bottom: 1px solid $border-color;
border-radius: 0;
&:hover { border-color: $border-hover-color }
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
&::placeholder { color: $tips-text-color }
}
@ -299,7 +307,7 @@
background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
&:focus { border-color: $border-hover-color }
}
.button.button-secondary {
@ -357,7 +365,7 @@
border: 1px solid $border-color;
padding: 8px 12px;
&:focus { border-color: $border-active-color }
&:focus { border-color: $border-hover-color }
}
&__option {
@ -634,4 +642,6 @@
border-radius: 0;
background: $progress-indicator-color;
}
}
}
.emoji-button { padding: 8px }

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

@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// Attachment icon
.attachment-list__list a .fa { vertical-align: middle }
// status detail icon
.detailed-status .fa {
font-size: 16px;

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

@ -42,6 +42,7 @@
}
.actions-modal {
@include shadow-24dp;
background: $card-bg-color;
border-radius: $card-radius;

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
// Border color
$border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 16%);

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: #ccd7e0;

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

7
app/javascript/styles/material-black/layout/material-v1.scss
View File

@ -52,4 +52,9 @@ $button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;
$fab-size: 56px;
// Text area border
$text-area-border: false;
//$text-area-border: underlined;

8
app/javascript/styles/material-black/layout/material-v2.scss
View File

@ -61,4 +61,10 @@ $button-shadow: false; // Material v2 styled colored button without shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini
//$fab-size: 40px; // Mini
// Text area border
$text-area-border: false;
//$text-area-border: underlined;
//$text-area-border: outlined;

1
app/javascript/styles/material-black/loader.scss
View File

@ -2,6 +2,7 @@
@import 'theme/material-icons';
// Plugins
@import 'plugins/astarte';
//@import 'plugins/cards';
//@import 'plugins/dense';
//@import 'plugins/plus';

26
app/javascript/styles/material-black/plugins/astarte.scss Normal file
View File

@ -0,0 +1,26 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.announcements {
li {
padding: 8px 16px;
background: $card-bg-color;
border-radius: $card-radius;
border: 1px solid $border-color;
}
&__icon {
margin: 0;
right: 16px;
height: 20px;
.icon-button {
@include icon-button;
&:hover { background: transparent }
}
}
}

9
app/javascript/styles/material-black/plugins/dense.scss
View File

@ -35,7 +35,14 @@
}
.compose-form {
.compose-form__publish { padding-top: 8px }
.compose-form {
&__publish { padding-top: 8px }
&__buttons-wrapper {
.icon-button,
.text-icon-button { padding: 4px }
}
}
}
.status {

29
app/javascript/styles/material-black/theme/_mixins.scss
View File

@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
@mixin text-area-border {
@if $text-area-border == underlined {
.compose-form .autosuggest-textarea__textarea {
border-radius: $card-radius $card-radius 0 0;
border-bottom: 1px solid $border-color;
&:hover { border-color: $border-hover-color }
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
}
}
@if $text-area-border == outlined {
.compose-form .autosuggest-textarea__textarea {
border-radius: $card-radius;
border: 1px solid $border-color;
&:hover { border-color: $border-hover-color }
&:active,
&:focus {
border: 2px solid $border-active-color;
padding: 7px 41px 7px 15px;
}
}
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;

2
app/javascript/styles/material-black/theme/account.scss
View File

@ -18,7 +18,7 @@
&-overlay {
&-base {
border-radius: 50%;
border-radius: $avater-radius;
width: 44px;
height: 44px;
background-size: 44px;

1
app/javascript/styles/material-black/theme/button.scss
View File

@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include button-shadow;
.icon-button {

2
app/javascript/styles/material-black/theme/columns.scss
View File

@ -379,7 +379,7 @@
.announcements {
background: $card-bg-color;
padding: 0;
padding: 0 8px;
&__container { color: $primary-text-color }

20
app/javascript/styles/material-black/theme/components.scss
View File

@ -4,6 +4,9 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include text-area-border;
.modal-root {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
@ -200,7 +203,7 @@
&__textarea {
background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
padding: 8px 42px 8px 16px;
&::placeholder { color: $tips-text-color }
}
@ -227,13 +230,18 @@
}
.spoiler-input {
&.spoiler-input--visible { margin-bottom: 8px }
&.spoiler-input--visible { margin-bottom: 16px }
&__input {
color: $ui-text-color;
background: $card-bg-color;
border-bottom: 1px solid $border-color;
border-radius: 0;
&:hover { border-color: $border-hover-color }
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
&::placeholder { color: $tips-text-color }
}
@ -299,7 +307,7 @@
background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
&:focus { border-color: $border-hover-color }
}
.button.button-secondary {
@ -357,7 +365,7 @@
border: 1px solid $border-color;
padding: 8px 12px;
&:focus { border-color: $border-active-color }
&:focus { border-color: $border-hover-color }
}
&__option {
@ -634,4 +642,6 @@
border-radius: 0;
background: $progress-indicator-color;
}
}
}
.emoji-button { padding: 8px }

3
app/javascript/styles/material-black/theme/material-icons.scss
View File

@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// Attachment icon
.attachment-list__list a .fa { vertical-align: middle }
// status detail icon
.detailed-status .fa {
font-size: 16px;

1
app/javascript/styles/material-black/theme/modal.scss
View File

@ -42,6 +42,7 @@
}
.actions-modal {
@include shadow-24dp;
background: $card-bg-color;
border-radius: $card-radius;

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
// Border color
$border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 16%);

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: #ccd7e0;

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

7
app/javascript/styles/material-dark/layout/material-v1.scss
View File

@ -52,4 +52,9 @@ $button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;
$fab-size: 56px;
// Text area border
$text-area-border: false;
//$text-area-border: underlined;

8
app/javascript/styles/material-dark/layout/material-v2.scss
View File

@ -61,4 +61,10 @@ $button-shadow: false; // Material v2 styled colored button without shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini
//$fab-size: 40px; // Mini
// Text area border
$text-area-border: false;
//$text-area-border: underlined;
//$text-area-border: outlined;

1
app/javascript/styles/material-dark/loader.scss
View File

@ -2,6 +2,7 @@
@import 'theme/material-icons';
// Plugins
@import 'plugins/astarte';
//@import 'plugins/cards';
//@import 'plugins/dense';
//@import 'plugins/plus';

26
app/javascript/styles/material-dark/plugins/astarte.scss Normal file
View File

@ -0,0 +1,26 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.announcements {
li {
padding: 8px 16px;
background: $card-bg-color;
border-radius: $card-radius;
border: 1px solid $border-color;
}
&__icon {
margin: 0;
right: 16px;
height: 20px;
.icon-button {
@include icon-button;
&:hover { background: transparent }
}
}
}

9
app/javascript/styles/material-dark/plugins/dense.scss
View File

@ -35,7 +35,14 @@
}
.compose-form {
.compose-form__publish { padding-top: 8px }
.compose-form {
&__publish { padding-top: 8px }
&__buttons-wrapper {
.icon-button,
.text-icon-button { padding: 4px }
}
}
}
.status {

29
app/javascript/styles/material-dark/theme/_mixins.scss
View File

@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
@mixin text-area-border {
@if $text-area-border == underlined {
.compose-form .autosuggest-textarea__textarea {
border-radius: $card-radius $card-radius 0 0;
border-bottom: 1px solid $border-color;
&:hover { border-color: $border-hover-color }
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
}
}
@if $text-area-border == outlined {
.compose-form .autosuggest-textarea__textarea {
border-radius: $card-radius;
border: 1px solid $border-color;
&:hover { border-color: $border-hover-color }
&:active,
&:focus {
border: 2px solid $border-active-color;
padding: 7px 41px 7px 15px;
}
}
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;

2
app/javascript/styles/material-dark/theme/account.scss
View File

@ -18,7 +18,7 @@
&-overlay {
&-base {
border-radius: 50%;
border-radius: $avater-radius;
width: 44px;
height: 44px;
background-size: 44px;

1
app/javascript/styles/material-dark/theme/button.scss
View File

@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include button-shadow;
.icon-button {

2
app/javascript/styles/material-dark/theme/columns.scss
View File

@ -379,7 +379,7 @@
.announcements {
background: $card-bg-color;
padding: 0;
padding: 0 8px;
&__container { color: $primary-text-color }

20
app/javascript/styles/material-dark/theme/components.scss
View File

@ -4,6 +4,9 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include text-area-border;
.modal-root {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
@ -200,7 +203,7 @@
&__textarea {
background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
padding: 8px 42px 8px 16px;
&::placeholder { color: $tips-text-color }
}
@ -227,13 +230,18 @@
}
.spoiler-input {
&.spoiler-input--visible { margin-bottom: 8px }
&.spoiler-input--visible { margin-bottom: 16px }
&__input {
color: $ui-text-color;
background: $card-bg-color;
border-bottom: 1px solid $border-color;
border-radius: 0;
&:hover { border-color: $border-hover-color }
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
&::placeholder { color: $tips-text-color }
}
@ -299,7 +307,7 @@
background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
&:focus { border-color: $border-hover-color }
}
.button.button-secondary {
@ -357,7 +365,7 @@
border: 1px solid $border-color;
padding: 8px 12px;
&:focus { border-color: $border-active-color }
&:focus { border-color: $border-hover-color }
}
&__option {
@ -634,4 +642,6 @@
border-radius: 0;
background: $progress-indicator-color;
}
}
}
.emoji-button { padding: 8px }

3
app/javascript/styles/material-dark/theme/material-icons.scss
View File

@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// Attachment icon
.attachment-list__list a .fa { vertical-align: middle }
// status detail icon
.detailed-status .fa {
font-size: 16px;

1
app/javascript/styles/material-dark/theme/modal.scss
View File

@ -42,6 +42,7 @@
}
.actions-modal {
@include shadow-24dp;
background: $card-bg-color;
border-radius: $card-radius;

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
// Border color
$border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 16%);

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: #ccd7e0;

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
$border-hover-color: lighten($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: lighten($bg-color, 20%);

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

@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);

7
app/javascript/styles/material-light/layout/material-v1.scss
View File

@ -52,4 +52,9 @@ $button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;
$fab-size: 56px;
// Text area border
$text-area-border: false;
//$text-area-border: underlined;

8
app/javascript/styles/material-light/layout/material-v2.scss
View File

@ -61,4 +61,10 @@ $button-shadow: false; // Material v2 styled colored button without shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini
//$fab-size: 40px; // Mini
// Text area border
$text-area-border: false;
//$text-area-border: underlined;
//$text-area-border: outlined;

1
app/javascript/styles/material-light/loader.scss
View File

@ -2,6 +2,7 @@
@import 'theme/material-icons';
// Plugins
@import 'plugins/astarte';
//@import 'plugins/cards';
//@import 'plugins/dense';
//@import 'plugins/plus';

26
app/javascript/styles/material-light/plugins/astarte.scss Normal file
View File

@ -0,0 +1,26 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.announcements {
li {
padding: 8px 16px;
background: $card-bg-color;
border-radius: $card-radius;
border: 1px solid $border-color;
}
&__icon {
margin: 0;
right: 16px;
height: 20px;
.icon-button {
@include icon-button;
&:hover { background: transparent }
}
}
}

9
app/javascript/styles/material-light/plugins/dense.scss
View File

@ -35,7 +35,14 @@
}
.compose-form {
.compose-form__publish { padding-top: 8px }
.compose-form {
&__publish { padding-top: 8px }
&__buttons-wrapper {
.icon-button,
.text-icon-button { padding: 4px }
}
}
}
.status {

29
app/javascript/styles/material-light/theme/_mixins.scss
View File

@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
@mixin text-area-border {
@if $text-area-border == underlined {
.compose-form .autosuggest-textarea__textarea {
border-radius: $card-radius $card-radius 0 0;
border-bottom: 1px solid $border-color;
&:hover { border-color: $border-hover-color }
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
}
}
@if $text-area-border == outlined {
.compose-form .autosuggest-textarea__textarea {
border-radius: $card-radius;
border: 1px solid $border-color;
&:hover { border-color: $border-hover-color }
&:active,
&:focus {
border: 2px solid $border-active-color;
padding: 7px 41px 7px 15px;
}
}
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;

2
app/javascript/styles/material-light/theme/account.scss
View File

@ -18,7 +18,7 @@
&-overlay {
&-base {
border-radius: 50%;
border-radius: $avater-radius;
width: 44px;
height: 44px;
background-size: 44px;

1
app/javascript/styles/material-light/theme/button.scss
View File

@ -4,6 +4,7 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include button-shadow;
.icon-button {

2
app/javascript/styles/material-light/theme/columns.scss
View File

@ -379,7 +379,7 @@
.announcements {
background: $card-bg-color;
padding: 0;
padding: 0 8px;
&__container { color: $primary-text-color }

20
app/javascript/styles/material-light/theme/components.scss
View File

@ -4,6 +4,9 @@
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include text-area-border;
.modal-root {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
@ -200,7 +203,7 @@
&__textarea {
background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
padding: 8px 42px 8px 16px;
&::placeholder { color: $tips-text-color }
}
@ -227,13 +230,18 @@
}
.spoiler-input {
&.spoiler-input--visible { margin-bottom: 8px }
&.spoiler-input--visible { margin-bottom: 16px }
&__input {
color: $ui-text-color;
background: $card-bg-color;
border-bottom: 1px solid $border-color;
border-radius: 0;
&:hover { border-color: $border-hover-color }
&:active,
&:focus { border-bottom: 2px solid $border-active-color }
&::placeholder { color: $tips-text-color }
}
@ -299,7 +307,7 @@
background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
&:focus { border-color: $border-hover-color }
}
.button.button-secondary {
@ -357,7 +365,7 @@
border: 1px solid $border-color;
padding: 8px 12px;
&:focus { border-color: $border-active-color }
&:focus { border-color: $border-hover-color }
}
&__option {
@ -634,4 +642,6 @@
border-radius: 0;
background: $progress-indicator-color;
}
}
}
.emoji-button { padding: 8px }

3
app/javascript/styles/material-light/theme/material-icons.scss
View File

@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// Attachment icon
.attachment-list__list a .fa { vertical-align: middle }
// status detail icon
.detailed-status .fa {
font-size: 16px;

1
app/javascript/styles/material-light/theme/modal.scss
View File

@ -42,6 +42,7 @@
}
.actions-modal {
@include shadow-24dp;
background: $card-bg-color;
border-radius: $card-radius;

Some files were not shown because too many files have changed in this diff Show More