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 6907a668f..250491a45 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 @@ -46,6 +46,7 @@ $account-foreground-color: $base-darker1-color; $card-color: $base-lighter1-color; $card-hover-color: $column-header-hover-color; $card-image-color: $base-color; +$warning-card-color: #26a69a; $form-color: rgba(0, 0, 0, 0.1); $form-focused-color: lighten($form-color, 20%); diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/accounts.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/accounts.scss index 984a8c9ae..7c4bcb5bf 100644 --- a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/accounts.scss +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/accounts.scss @@ -74,7 +74,10 @@ } &__buttons { - .icon-button { border: 0 } + .icon-button { + border: 0; + border-radius: 50%; + } } &__name { 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 8fbd6be10..ce5f082b1 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 @@ -9,7 +9,6 @@ margin: 0; background: $column-header-color; position: relative; - z-index: 2; .tabs-bar { &__link { @@ -81,8 +80,11 @@ } } + &__warning { + background-color: $warning-card-color; + } + &__publish { border-top: 1px solid $base-separation-color } - &__publish-button-wrapper { @include button-shadow } &__modifiers { background-color: $base-lighter1-color } } @@ -100,7 +102,6 @@ .column-header { @include column-shadow; background: $column-header-color; - z-index: 1; &.active { .column-header__icon { @@ -151,6 +152,9 @@ } .column-back-button { + background-color: $column-header-color; + color: $secondary-text-color; + &__icon { @include material-icon-large; vertical-align: bottom; @@ -228,11 +232,10 @@ } } -// v2.9.0以降 +// v2.9.0以降に対応 .column-header { @include column-shadow; background: $column-header-color; - z-index: 1; &.active { .column-header__icon { @@ -281,6 +284,16 @@ &-inner { background: $column-header-color } } } +.column-back-button { + background-color: $column-header-color; + color: $secondary-text-color; + + &__icon { + @include material-icon-large; + vertical-align: bottom; + margin-right: 8px; + } +} .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 2b6644215..8abd2ad5e 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 @@ -29,14 +29,32 @@ color: $primary-lighter1-text-color; border-radius: 50%; } + + .button--block { @include button-shadow } + + .button-secondary { + background-color: $primary-lighter1-text-color; + border: 0px; + } } .modal-root { &__modal { .media-modal { &__close.icon-button { - font-size: 40px !important; + font-size: 40px; + width: 40px; + height: 40px; + + &:hover { + background-color: darken($base-lighter1-color, 40%); + } } } } -} \ No newline at end of file +} + +// DOM操作によりpaddingが調整できないもの +.privacy-dropdown__value-icon.icon-button.inverted, +.compose-form__poll-button-icon.icon-button.inverted, +.compose-form__upload-button-icon.icon-button.inverted { padding: 4px } \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-dropdown.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-dropdown.scss index a9c6dc5ef..b84fae3be 100644 --- a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-dropdown.scss +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-dropdown.scss @@ -6,6 +6,13 @@ .dropdown-menu { background-color: $column-header-color; + + &__arrow { + &.top { border-top-color: $column-header-color } + &.bottom { border-bottom-color: $column-header-color } + } + + &__separator { margin: 4px 0 } } .dropdown-menu, @@ -16,11 +23,6 @@ background: $base-lighter1-color; .dropdown-menu { - &__arrow { - &.top { border-top-color: $column-header-color } - &.bottom { border-bottom-color: $column-header-color } - } - &__item { a { color: $primary-lighter2-text-color; 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 d28fa367d..ee45f5712 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 @@ -25,9 +25,12 @@ .icon-button { color: $icon-color; border-radius: 50%; + width: 28px !important; // UIの密度が下がる代わりに、ホバー時に正常に表示 + height: 28px !important; // !importantを付けないと動作しない…? &:active, - &:focus, + &:focus { background-color: transparent } + &:hover { color: lighten($icon-color, 7%); background-color: $column-header-hover-color; @@ -43,9 +46,9 @@ .fa.fa-star { vertical-align: top } } - &.inverted { - color: $icon-color; - } + &.inverted { color: $icon-color } + + &.overlayed { border-radius: 50% } &.disabled { color: lighten($icon-color, 13%); @@ -175,7 +178,7 @@ &.fa-bars::before { content: "menu" } //ハンバーガーボタン &.fa-navicon::before { content: "menu" } //ハンバーガーボタン &.fa-reorder::before { content: "menu" } //ハンバーガーボタン - &.fa-desktop::before { content: "desktop-windows" } //外観設定のアイコン + &.fa-desktop::before { content: "desktop_windows" } //外観設定のアイコン &.fa-code::before { content: "code" } //開発アイコン &.fa-list::before { content: "list" } //リストアイコン &.fa-paperclip::before { content: "attach_file" } //メディアを追加のアイコン @@ -186,8 +189,17 @@ .fa { &.fa-chevron-left, &.fa-chevron-right, - &.fa.fa-times { + &.fa-plus { @include material-icon-large; vertical-align: bottom; } + + &.fa-times { + @include material-icon-large; + vertical-align: top; + &.fa-fw { + font-size: 24px; + vertical-align: 8px; + } + } } \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings.scss index 308c7e6a0..bfabd1e6e 100644 --- a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings.scss +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings.scss @@ -149,6 +149,7 @@ body.admin { button { @include button-shadow; + background-color: $active-button-color; } } diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/statuses.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/statuses.scss index 6746032b4..b3f5ffae3 100644 --- a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/statuses.scss +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/statuses.scss @@ -23,6 +23,8 @@ &__content { color: $primary-text-color } } + + .display-name strong { color: $primary-text-color } } &.status-direct { diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/_variables.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/_variables.scss index 77a68f3b8..8ae2a027a 100644 --- a/app/javascript/styles/gplus-theme-for-mastodon-dev/_variables.scss +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/_variables.scss @@ -46,6 +46,7 @@ $account-foreground-color: $base-darker1-color; $card-color: $base-lighter1-color; $card-hover-color: $column-header-hover-color; $card-image-color: $base-color; +$warning-card-color: #26a69a; $form-color: rgba(0, 0, 0, 0.1); $form-focused-color: lighten($form-color, 20%); diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss index 984a8c9ae..7c4bcb5bf 100644 --- a/app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss @@ -74,7 +74,10 @@ } &__buttons { - .icon-button { border: 0 } + .icon-button { + border: 0; + border-radius: 50%; + } } &__name { 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 8fbd6be10..ce5f082b1 100644 --- a/app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss @@ -9,7 +9,6 @@ margin: 0; background: $column-header-color; position: relative; - z-index: 2; .tabs-bar { &__link { @@ -81,8 +80,11 @@ } } + &__warning { + background-color: $warning-card-color; + } + &__publish { border-top: 1px solid $base-separation-color } - &__publish-button-wrapper { @include button-shadow } &__modifiers { background-color: $base-lighter1-color } } @@ -100,7 +102,6 @@ .column-header { @include column-shadow; background: $column-header-color; - z-index: 1; &.active { .column-header__icon { @@ -151,6 +152,9 @@ } .column-back-button { + background-color: $column-header-color; + color: $secondary-text-color; + &__icon { @include material-icon-large; vertical-align: bottom; @@ -228,11 +232,10 @@ } } -// v2.9.0以降 +// v2.9.0以降に対応 .column-header { @include column-shadow; background: $column-header-color; - z-index: 1; &.active { .column-header__icon { @@ -281,6 +284,16 @@ &-inner { background: $column-header-color } } } +.column-back-button { + background-color: $column-header-color; + color: $secondary-text-color; + + &__icon { + @include material-icon-large; + vertical-align: bottom; + margin-right: 8px; + } +} .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 2b6644215..8abd2ad5e 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 @@ -29,14 +29,32 @@ color: $primary-lighter1-text-color; border-radius: 50%; } + + .button--block { @include button-shadow } + + .button-secondary { + background-color: $primary-lighter1-text-color; + border: 0px; + } } .modal-root { &__modal { .media-modal { &__close.icon-button { - font-size: 40px !important; + font-size: 40px; + width: 40px; + height: 40px; + + &:hover { + background-color: darken($base-lighter1-color, 40%); + } } } } -} \ No newline at end of file +} + +// DOM操作によりpaddingが調整できないもの +.privacy-dropdown__value-icon.icon-button.inverted, +.compose-form__poll-button-icon.icon-button.inverted, +.compose-form__upload-button-icon.icon-button.inverted { padding: 4px } \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/components-dropdown.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/components-dropdown.scss index a9c6dc5ef..b84fae3be 100644 --- a/app/javascript/styles/gplus-theme-for-mastodon-dev/components-dropdown.scss +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/components-dropdown.scss @@ -6,6 +6,13 @@ .dropdown-menu { background-color: $column-header-color; + + &__arrow { + &.top { border-top-color: $column-header-color } + &.bottom { border-bottom-color: $column-header-color } + } + + &__separator { margin: 4px 0 } } .dropdown-menu, @@ -16,11 +23,6 @@ background: $base-lighter1-color; .dropdown-menu { - &__arrow { - &.top { border-top-color: $column-header-color } - &.bottom { border-bottom-color: $column-header-color } - } - &__item { a { color: $primary-lighter2-text-color; 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 d28fa367d..ee45f5712 100644 --- a/app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss @@ -25,9 +25,12 @@ .icon-button { color: $icon-color; border-radius: 50%; + width: 28px !important; // UIの密度が下がる代わりに、ホバー時に正常に表示 + height: 28px !important; // !importantを付けないと動作しない…? &:active, - &:focus, + &:focus { background-color: transparent } + &:hover { color: lighten($icon-color, 7%); background-color: $column-header-hover-color; @@ -43,9 +46,9 @@ .fa.fa-star { vertical-align: top } } - &.inverted { - color: $icon-color; - } + &.inverted { color: $icon-color } + + &.overlayed { border-radius: 50% } &.disabled { color: lighten($icon-color, 13%); @@ -175,7 +178,7 @@ &.fa-bars::before { content: "menu" } //ハンバーガーボタン &.fa-navicon::before { content: "menu" } //ハンバーガーボタン &.fa-reorder::before { content: "menu" } //ハンバーガーボタン - &.fa-desktop::before { content: "desktop-windows" } //外観設定のアイコン + &.fa-desktop::before { content: "desktop_windows" } //外観設定のアイコン &.fa-code::before { content: "code" } //開発アイコン &.fa-list::before { content: "list" } //リストアイコン &.fa-paperclip::before { content: "attach_file" } //メディアを追加のアイコン @@ -186,8 +189,17 @@ .fa { &.fa-chevron-left, &.fa-chevron-right, - &.fa.fa-times { + &.fa-plus { @include material-icon-large; vertical-align: bottom; } + + &.fa-times { + @include material-icon-large; + vertical-align: top; + &.fa-fw { + font-size: 24px; + vertical-align: 8px; + } + } } \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/settings.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings.scss index 308c7e6a0..bfabd1e6e 100644 --- a/app/javascript/styles/gplus-theme-for-mastodon-dev/settings.scss +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings.scss @@ -149,6 +149,7 @@ body.admin { button { @include button-shadow; + background-color: $active-button-color; } } diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss index 6746032b4..b3f5ffae3 100644 --- a/app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss @@ -23,6 +23,8 @@ &__content { color: $primary-text-color } } + + .display-name strong { color: $primary-text-color } } &.status-direct {