diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_variables.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_variables.scss index 9f5098b22..6907a668f 100644 --- a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_variables.scss +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_variables.scss @@ -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; diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/columns.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/columns.scss index 9e5cd2621..8fbd6be10 100644 --- a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/columns.scss +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/columns.scss @@ -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, & { diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-button.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-button.scss index 42d4f8db8..2b6644215 100644 --- a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-button.scss +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-button.scss @@ -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 { diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/icons.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/icons.scss index 825d18dac..d28fa367d 100644 --- a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/icons.scss +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/icons.scss @@ -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 { diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss index 6a0239562..8fbd6be10 100644 --- a/app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss @@ -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, & { diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/components-button.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/components-button.scss index 42d4f8db8..2b6644215 100644 --- a/app/javascript/styles/gplus-theme-for-mastodon-dev/components-button.scss +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/components-button.scss @@ -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 { diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss index 825d18dac..d28fa367d 100644 --- a/app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss @@ -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 {