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

Merge pull request #250 from Rintan/g+theme

Browse Source 
ダークテーマの修正、v2.9.xへの対応など
This commit is contained in:
YoheiZuho 2019-08-14 22:27:50 +09:00 committed by GitHub
commit 361be6af15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 167 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_variables.scss
View File

@ -29,7 +29,7 @@ $icon-active-color: $active-color;
// Background colors
$base-color: #212121;
$base-color: #121212;
$base-lighter1-color: #2d2d2d;
$base-darker1-color: #000000;

69
app/javascript/styles/dark-gplus-theme-for-mastodon-dev/columns.scss
View File

@ -6,9 +6,10 @@
.tabs-bar {
@include column-shadow;
margin: 0;
background: $column-header-color;
position: relative;
z-index: 2;
.tabs-bar {
&__link {
@ -99,6 +100,7 @@
.column-header {
@include column-shadow;
background: $column-header-color;
z-index: 1;
&.active {
.column-header__icon {
@ -121,9 +123,9 @@
.column-header {
&__back-button {
.column-back-button__icon { vertical-align: unset }
.column-back-button__icon { vertical-align: bottom }
}
&__button {
&.active {
color: $icon-active-color;
@ -143,7 +145,7 @@
&__collapsible {
color: $secondary-text-color;
border-bottom: 1px solid $base-separation-color;
&-inner { background: $column-header-color }
}
}
@ -158,7 +160,10 @@
.column {
&-subheading,
&-link__badge { background: $base-color }
&-link__badge {
background: $base-color;
color: $secondary-text-color;
}
&-link {
color: $primary-text-color;
@ -223,6 +228,60 @@
}
}
// v2.9.0以降
.column-header {
@include column-shadow;
background: $column-header-color;
z-index: 1;
&.active {
.column-header__icon {
color: $icon-active-color;
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
}
}
* { background: inherit }
&__icon {
@include material-icon-large;
color: $icon-color;
vertical-align: bottom;
margin-right: 10px;
}
&__buttons {
height: 50px;
.column-header {
&__back-button {
.column-back-button__icon { vertical-align: bottom }
}
&__button {
&.active {
color: $icon-active-color;
background: inherit;
}
.fa { vertical-align: unset }
}
}
}
&__button {
color: $icon-color;
padding: 0 16px;
}
&__collapsible {
color: $secondary-text-color;
border-bottom: 1px solid $base-separation-color;
&-inner { background: $column-header-color }
}
}
.getting-started {
&__wrapper,
& {

5
app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-button.scss
View File

@ -25,7 +25,10 @@
@include material-card-radius;
background-color: $active-button-color;
.text-icon-button { color: $primary-lighter1-text-color }
.text-icon-button {
color: $primary-lighter1-text-color;
border-radius: 50%;
}
}
.modal-root {

16
app/javascript/styles/dark-gplus-theme-for-mastodon-dev/icons.scss
View File

@ -24,11 +24,13 @@
.icon-button {
color: $icon-color;
border-radius: 50%;
&:active,
&:focus,
&:hover {
color: lighten($icon-color, 7%);
background-color: $column-header-hover-color;
}
&.star-icon {
@ -116,7 +118,13 @@
&.fa-chevron-down,
&.fa-bars,
&.fa-navicon,
&.fa-reorder {
&.fa-reorder,
&.fa-desktop,
&.fa-code,
&.fa-list,
&.fa-paperclip,
&.fa-plus,
&.fa-bullhorn {
font-family: "Material Icons Extended";
}
@ -167,6 +175,12 @@
&.fa-bars::before { content: "menu" } //ハンバーガーボタン
&.fa-navicon::before { content: "menu" } //ハンバーガーボタン
&.fa-reorder::before { content: "menu" } //ハンバーガーボタン
&.fa-desktop::before { content: "desktop-windows" } //外観設定のアイコン
&.fa-code::before { content: "code" } //開発アイコン
&.fa-list::before { content: "list" } //リストアイコン
&.fa-paperclip::before { content: "attach_file" } //メディアを追加のアイコン
&.fa-plus::before { content: "add" } // 追加ボタン
&.fa-bullhorn::before { content: "announcement"} //Adminからのお知らせ(一部サーバーのみ)
}
.fa {

69
app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss
View File

@ -6,9 +6,10 @@
.tabs-bar {
@include column-shadow;
margin: 0;
background: $column-header-color;
position: relative;
z-index: 2;
.tabs-bar {
&__link {
@ -99,6 +100,7 @@
.column-header {
@include column-shadow;
background: $column-header-color;
z-index: 1;
&.active {
.column-header__icon {
@ -121,9 +123,9 @@
.column-header {
&__back-button {
.column-back-button__icon { vertical-align: unset }
.column-back-button__icon { vertical-align: bottom }
}
&__button {
&.active {
color: $icon-active-color;
@ -143,7 +145,7 @@
&__collapsible {
color: $secondary-text-color;
border-bottom: 1px solid $base-separation-color;
&-inner { background: $column-header-color }
}
}
@ -158,7 +160,10 @@
.column {
&-subheading,
&-link__badge { background: darken($base-color, 10%) }
&-link__badge {
background: $base-color;
color: $secondary-text-color;
}
&-link {
color: $primary-text-color;
@ -223,6 +228,60 @@
}
}
// v2.9.0以降
.column-header {
@include column-shadow;
background: $column-header-color;
z-index: 1;
&.active {
.column-header__icon {
color: $icon-active-color;
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
}
}
* { background: inherit }
&__icon {
@include material-icon-large;
color: $icon-color;
vertical-align: bottom;
margin-right: 10px;
}
&__buttons {
height: 50px;
.column-header {
&__back-button {
.column-back-button__icon { vertical-align: bottom }
}
&__button {
&.active {
color: $icon-active-color;
background: inherit;
}
.fa { vertical-align: unset }
}
}
}
&__button {
color: $icon-color;
padding: 0 16px;
}
&__collapsible {
color: $secondary-text-color;
border-bottom: 1px solid $base-separation-color;
&-inner { background: $column-header-color }
}
}
.getting-started {
&__wrapper,
& {

5
app/javascript/styles/gplus-theme-for-mastodon-dev/components-button.scss
View File

@ -25,7 +25,10 @@
@include material-card-radius;
background-color: $active-button-color;
.text-icon-button { color: $primary-lighter1-text-color }
.text-icon-button {
color: $primary-lighter1-text-color;
border-radius: 50%;
}
}
.modal-root {

16
app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss
View File

@ -24,11 +24,13 @@
.icon-button {
color: $icon-color;
border-radius: 50%;
&:active,
&:focus,
&:hover {
color: lighten($icon-color, 7%);
background-color: $column-header-hover-color;
}
&.star-icon {
@ -116,7 +118,13 @@
&.fa-chevron-down,
&.fa-bars,
&.fa-navicon,
&.fa-reorder {
&.fa-reorder,
&.fa-desktop,
&.fa-code,
&.fa-list,
&.fa-paperclip,
&.fa-plus,
&.fa-bullhorn {
font-family: "Material Icons Extended";
}
@ -167,6 +175,12 @@
&.fa-bars::before { content: "menu" } //ハンバーガーボタン
&.fa-navicon::before { content: "menu" } //ハンバーガーボタン
&.fa-reorder::before { content: "menu" } //ハンバーガーボタン
&.fa-desktop::before { content: "desktop-windows" } //外観設定のアイコン
&.fa-code::before { content: "code" } //開発アイコン
&.fa-list::before { content: "list" } //リストアイコン
&.fa-paperclip::before { content: "attach_file" } //メディアを追加のアイコン
&.fa-plus::before { content: "add" } // 追加ボタン
&.fa-bullhorn::before { content: "announcement"} //Adminからのお知らせ(一部サーバーのみ)
}
.fa {