diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev.scss new file mode 100644 index 000000000..8c2471deb --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev.scss @@ -0,0 +1,24 @@ +/** + * Google+ Theme for Mastodon v1.1 + * Copyright (C) 2018-2019 Genbu Project + */ + +@charset "UTF-8"; + +// @import 'application'; +@import 'application'; +@import 'dark-gplus-theme-for-mastodon-dev/basics'; +@import 'dark-gplus-theme-for-mastodon-dev/components'; +@import 'dark-gplus-theme-for-mastodon-dev/emoji-picker'; +@import 'dark-gplus-theme-for-mastodon-dev/tables'; +@import 'dark-gplus-theme-for-mastodon-dev/columns'; +@import 'dark-gplus-theme-for-mastodon-dev/lists'; +@import 'dark-gplus-theme-for-mastodon-dev/accounts'; +@import 'dark-gplus-theme-for-mastodon-dev/statuses'; +@import 'dark-gplus-theme-for-mastodon-dev/notifications'; +@import 'dark-gplus-theme-for-mastodon-dev/searches'; +@import 'dark-gplus-theme-for-mastodon-dev/settings'; +@import 'dark-gplus-theme-for-mastodon-dev/icons'; +@import 'dark-gplus-theme-for-mastodon-dev/profile'; +@import 'dark-gplus-theme-for-mastodon-dev/about'; +@import 'dark-gplus-theme-for-mastodon-dev/explore'; \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_functions.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_functions.scss new file mode 100644 index 000000000..e5aea0e4e --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_functions.scss @@ -0,0 +1,15 @@ +@charset "UTF-8"; + + + +@function adjust-lightness ($color, $lightness) { + @if (lightness($color) - $lightness <= 0 and lightness($color) + $lightness < 100) { + @return lighten($color, $lightness); + } + + @if (0 < lightness($color) - $lightness and 100 <= lightness($color) + $lightness) { + @return darken($color, $lightness); + } + + @return change-color($color, $lightness: $lightness); +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_mixins.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_mixins.scss new file mode 100644 index 000000000..400a1ac90 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_mixins.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color } +@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color } +@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color } +@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color } +@mixin material-border { border-radius: 4px } +@mixin material-card-radius { border-radius: 2px } +@mixin material-icon-large { font-size: 20px } \ No newline at end of file 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 new file mode 100644 index 000000000..9f5098b22 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_variables.scss @@ -0,0 +1,98 @@ +@charset "UTF-8"; + + + +// Base colors +$active-color: #db4437; +$accent-color: #fbbc04; +$valid-color: #4285f4; +$error-color: #d50000; +$checked-color: #4285f4; +$verified-color: #4caf50; + + +// Text colors +$primary-text-color: #ffffff; +$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示 +$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示 +$secondary-text-color: #2196F3; // ex: リンク +$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID +$light-text-color: #000000; +$light-darker1-text-color: darken($light-text-color, 15%); +$active-text-color: $active-color; +$error-text-color: $error-color; + + +// Icon colors +$icon-color: #BDBDBD; +$icon-active-color: $active-color; + + +// Background colors +$base-color: #212121; +$base-lighter1-color: #2d2d2d; +$base-darker1-color: #000000; + +$column-header-color: $base-lighter1-color; +$column-header-hover-color: change-color($color: $column-header-color, $lightness: 10%); + +$status-color: $base-lighter1-color; +$status-direct-color: darken($status-color, 5%); +$status-actionbar-color: darken($status-color, 2%); + +$account-color: $base-lighter1-color; +$account-foreground-color: $base-darker1-color; + +$card-color: $base-lighter1-color; +$card-hover-color: $column-header-hover-color; +$card-image-color: $base-color; + +$form-color: rgba(0, 0, 0, 0.1); +$form-focused-color: lighten($form-color, 20%); +$trend-color: $base-lighter1-color; + +$setting-base-color: $base-color; +$setting-lists-selected-color: darken($base-color, 2%); +$setting-lists-hover-color: darken($base-color, 5%); +$setting-content-base-color: $base-lighter1-color; + +$setting-toggle-color: #b9b9b9; +$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5); +$setting-toggle-thumb-color: #fafafa; +$setting-toggle-thumb-checked-color: $checked-color; + +$setting-emphasis-color: $verified-color; + +$dashboard-counters-base-color: $base-color; +$dashboard-counters-hover-color: lighten($base-color, 2%); + +$log-entry-color: $base-lighter1-color; +$log-entry-extra-color: $base-color; +$log-entry-extra--neutral-color: $valid-color; +$log-entry-extra--old-color: $active-color; +$log-entry-extra--new-color: $verified-color; + +$explore-header-color: lighten($accent-color, 16%); +$explore-directory-color: $base-lighter1-color; + +$active-button-color: $valid-color; //文字入りボタン +$non-active-button-color: lighten($base-color, 20%); + +$floating-acton-button-hover-color: lighten($active-color, 10%); + + +// Shadow colors +$column-header-shadow-color: rgba(0, 0, 0, 0.3); +$status-shadow-color: rgba(0, 0, 0, 0.14); +$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3); +$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26); +$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46)); +$button-shadow-color: rgba(0, 0, 0, 0.4); + + +// Separation colors +$base-separation-color: rgba(0, 0, 0, 0.14); + + +//Border colors +$non-elevated-card-boader : #e0e0e0; \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/about.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/about.scss new file mode 100644 index 000000000..de48883a8 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/about.scss @@ -0,0 +1,138 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +// from mastodon/about.scss +$column-breakpoint: 700px; + + + +.landing-page { + h3, h4, h5, h6 { color: $primary-lighter2-text-color } + p { color: $primary-lighter1-text-color } + em { color: $primary-text-color } + + .column-0 { background: $base-darker1-color } + .column-2 { + .landing-page { + &__information { padding: 0 } + + &__short-description { + & > .row:first-child { + background: $base-darker1-color; + padding: 10px 20px; + } + + & > * { + padding-left: 40px; padding-right: 40px; + &:last-child { padding-bottom: 45px } + + @media screen and (max-width: $column-breakpoint) { + padding-left: 20px; padding-right: 20px; + &:last-child { padding-bottom: 25px } + } + } + } + } + } + + &__forms, + &__information, + &__call-to-action { + @include status-shadow; + background: $column-header-color; + } + + &__forms { + padding: 0; + + & > *:first-child { margin: inherit } + & > * { margin-left: 20px; margin-right: 20px; } + + .brand { background: $base-darker1-color } + + form { + & > .input input { + background: $form-color; + + &:focus { background: $form-focused-color } + } + } + + .separator-or { + margin-left: 20px; margin-right: 20px; + + span { + color: $primary-lighter1-text-color; + background: $column-header-color; + } + } + + @media screen and (max-width: $column-breakpoint) { + background: inherit; + box-shadow: none; + + .separator-or span { background: $base-color } + } + } + + &__information { + color: $primary-lighter1-text-color; + + &.contact-widget { + @include status-shadow; + background: $column-header-color; + + .contact-widget { + &__mail { + a { color: $primary-text-color } + } + } + } + + strong { color: inherit } + + .row:first-child { + h1 small { + color: $light-darker1-text-color; + + span { color: $light-text-color } + } + } + } + + &__call-to-action { + .row__information-board { + .information-board__section { + color: $primary-lighter2-text-color; + + & > span:last-child { color: $primary-lighter1-text-color } + } + } + } + + &__features { + .features-list { + .features-list__row { + .text { color: $primary-lighter1-text-color } + .visual .fa { color: $icon-color } + } + } + } + + &__footer { color: $primary-lighter1-text-color } + + #mastodon-timeline { + color: $primary-text-color; + background: transparent; + + p { + color: $primary-text-color; + + a { color: $secondary-text-color } + } + } +} \ No newline at end of file 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 new file mode 100644 index 000000000..984a8c9ae --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/accounts.scss @@ -0,0 +1,191 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.account { + background: $account-color; + border-color: $base-separation-color; + + .account { + &__display-name { + color: $secondary-text-color; + strong { color: $primary-text-color } + } + } + + &-role { + color: $primary-lighter2-text-color; + background-color: rgba($base-separation-color, 0.1); + border-color: rgba($base-separation-color, 0.5); + } +} + +.column { + > .column-back-button { + @include column-shadow; + background: $column-header-color; + } +} + +.account-timeline__header { + .account__header { + background-color: $account-foreground-color; + + > div { background-color: inherit } // -> v2.7.4 + + .account__header { + &__username { color: $secondary-lighter1-text-color } + &__fields { @extend .account__header__fields; } + + &__image { // v2.8.0 -> + &::after { + content: ""; + + position: absolute; + top: auto; + left: 0; + bottom: 0; + + width: 100%; + height: 30%; + background: $account-header-image-shadow-color; + box-shadow: none; + } + + > img:not([src]), + > img[src$="/headers/original/missing.png"] { + content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg"); + } + } + + &__bar { // v2.8.0 -> + background-color: $base-lighter1-color; + + .account__header { + &__tabs { + .avatar { + .account__avatar { + border-color: $base-lighter1-color; + border-radius: 50%; + } + } + + &__buttons { + .icon-button { border: 0 } + } + + &__name { + h1 { color: $primary-text-color } + small { color: $secondary-text-color } + } + } + + &__bio { + .account__header { + &__content { color: $primary-text-color } + &__fields { border-color: $base-separation-color } + } + } + + &__extra { + &__links { + &, a { color: $primary-lighter1-text-color } + strong { color: $primary-lighter2-text-color } + } + } + } + } + } + + .account--action-button { + .icon-button:not(.active) { + color: darken($light-text-color, 7%); + + &:active, + &:focus, + &:hover { + color: $light-text-color; + } + } + } + } + + .account { + &__disclaimer, + &__action-bar, + &__section-headline { + background: $base-lighter1-color; + border-color: $base-separation-color; + } + + &__action-bar { + &__tab { + border-color: $base-separation-color; + &.active { border-bottom-color: $active-color } + + > span { color: $primary-lighter1-text-color } + } + } + + &__section-headline { + a { + color: $primary-text-color; + + &.active { + color: $active-color; + + &::before { border-color: transparent transparent $base-separation-color } + &::after { border-color: transparent transparent $status-color } + } + } + } + } +} + +.account-authorize__wrapper { + @include status-shadow; + background: $base-lighter1-color; + + &:focus { @include status-focus-shadow; } + + .account { + &__header__content { + color: $primary-lighter2-text-color; + } + + &--panel { + background: $account-color; + border-color: $base-separation-color; + } + } +} + +.account__header__fields { + dl { + border-color: $base-separation-color; + + dt, + dd { + color: $primary-text-color; + background: $base-lighter1-color; + } + + dd { + &.verified { + border-color: transparentize($valid-color, 0.5); + background: transparentize($valid-color, 0.75); + + a { color: lighten($verified-color, 20%) } + } + } + } + + a { color: $secondary-text-color } +} + +.account__action-bar__tab { + strong { color: $primary-text-color } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/basics.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/basics.scss new file mode 100644 index 000000000..a141ecd13 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/basics.scss @@ -0,0 +1,47 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +body { + &, + .ui { + color: $primary-text-color; + background: $base-color; + } +} + +.focusable { + &:focus { + background: inherit; + + .status { + @include status-focus-shadow; + + &.status-direct { background: $status-direct-color } + } + + .detailed-status { + & { background: $status-color } + &__action-bar { background: $status-actionbar-color } + } + } +} + +::-webkit-scrollbar-thumb { + background: darken($base-lighter1-color, 12%); + + &:hover { background: darken($base-lighter1-color, 16%) } + &:active { background: darken($base-lighter1-color, 12%) } +} + +::-webkit-scrollbar-track { + background: $base-color; + + &:hover, + &:active { + background: darken($base-lighter1-color, 8%); + } +} \ No newline at end of file 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 new file mode 100644 index 000000000..9e5cd2621 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/columns.scss @@ -0,0 +1,263 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.tabs-bar { + @include column-shadow; + margin: 0; + background: $column-header-color; + + .tabs-bar { + &__link { + color: $icon-color; + border-bottom: 4px solid $column-header-color; + padding: 15px 10px 11px 10px; + + &.active { + border-bottom: 4px solid $active-color; + } + + .fa { + @include material-icon-large; + vertical-align: top; + } + } + } +} + +.drawer { + .drawer { + &__header { + @include column-shadow; + background: $column-header-color; + + .drawer__tab { + @include material-icon-large; + color: $icon-color; + } + + a { + &:hover { background: $column-header-hover-color } + } + } + + &__pager { + @include status-shadow; + @include material-card-radius; + + .drawer__inner { + background: $column-header-color; + + &__mastodon { display: none } + } + } + } +} + +.navigation-bar { + color: $secondary-text-color; + background: $column-header-color; + + .navigation-bar { + &__profile { + strong { color: $primary-text-color } + &-edit { color: $secondary-text-color } + } + } +} + + +.compose-form { + .compose-form { + &__buttons-wrapper { + background: $column-header-color; + + &.character-counter__wrapper { + .character-counter { color: $primary-lighter1-text-color } + } + } + + &__publish { border-top: 1px solid $base-separation-color } + &__publish-button-wrapper { @include button-shadow } + &__modifiers { background-color: $base-lighter1-color } + } + + .autosuggest-textarea__textarea { + background-color: $base-lighter1-color; + color: $primary-text-color; + } + + .character-counter { + color: $icon-color + } +} + +.column { + .column-header { + @include column-shadow; + background: $column-header-color; + + &.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: unset } + } + + &__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 } + } + } + + .column-back-button { + &__icon { + @include material-icon-large; + vertical-align: bottom; + margin-right: 8px; + } + } + + .column { + &-subheading, + &-link__badge { background: $base-color } + + &-link { + color: $primary-text-color; + background: $base-color; + + &__icon { + @include material-icon-large; + color: $icon-color; + vertical-align: bottom; + margin-right: 8px; + } + } + } + + .scrollable { + background: transparent; + + *[role="feed"] { + article { + margin: 1em 0; + &:first-of-type { margin: 0 } + + &:focus { outline: none } + } + } + + div[tabindex="-1"] { margin-bottom: 1em } + } + + .notification__filter-bar { + background: $column-header-color; + border-bottom-color: $base-separation-color; + + button { + color: $icon-color; + background: $column-header-color; + + &.active { + color: $icon-active-color; + + &::before { border-color: transparent transparent $base-separation-color } + &::after { border-color: transparent transparent $column-header-color } + } + } + } + + .empty-column-indicator { + flex-direction: column; + background: $base-color; + + &::before { + content: ""; + display: block; + + width: 100px; + height: 100px; + margin-bottom: 1em; + + background: none center / contain no-repeat; + background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif"); + } + } +} + +.getting-started { + &__wrapper, + & { + background: $base-color; + } + + & { + border-top: 1px solid $base-separation-color; + + a { color: $primary-text-color } + } +} + +.load { + &-more, + &-gap { + background: transparent; + + &:hover { background: darken($column-header-color, 10%) } + } + + &-gap { border: 0 } +} + +.confirmation-modal { + @include material-card-radius; + color: $primary-text-color; + background-color: $base-lighter1-color; + + &__action-bar { + background-color: $base-lighter1-color; + } + + &__cancel-button { + color: $primary-lighter1-text-color; + box-shadow: 0 2px 5px 0 transparent; + } +} \ No newline at end of file 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 new file mode 100644 index 000000000..42d4f8db8 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-button.scss @@ -0,0 +1,39 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.floating-action-button { + font-size: 24px; + background-color: $active-color; + width: 3.6rem; + height: 3.6rem; + + &:active { + background-color: $active-color; + } + + &:hover { + background-color: $floating-acton-button-hover-color; + } +} + +.button { + @include button-shadow; + @include material-card-radius; + background-color: $active-button-color; + + .text-icon-button { color: $primary-lighter1-text-color } +} + +.modal-root { + &__modal { + .media-modal { + &__close.icon-button { + font-size: 40px !important; + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-card.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-card.scss new file mode 100644 index 000000000..dc72775a1 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-card.scss @@ -0,0 +1,38 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.card { + //border: 1px solid $base-separation-color; + //不要(?) + + > a { + @include status-shadow; + + &:hover, + &:focus, + &:active { + .card__bar { + background: initial; + + .display-name strong { color: $secondary-text-color } + } + } + + .card__img { background: $card-image-color } + .card__bar { + background: $card-color; + + .avatar { + img { background: transparent } + } + + .display-name { + strong { color: $primary-text-color } + span { color: $primary-lighter2-text-color } + } + } + } +} \ 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 new file mode 100644 index 000000000..a9c6dc5ef --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-dropdown.scss @@ -0,0 +1,69 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + +.dropdown-menu { + background-color: $column-header-color; +} + +.dropdown-menu, +.actions-modal { + @include material-card-radius; + + & > ul { + 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; + + padding: 16px 16px; + background: $column-header-color; + + &:active, + &:focus, + &:hover { + color: $primary-text-color; + background: $column-header-hover-color; + } + } + } + + &__separator { border-bottom-color: $base-separation-color } + } + + & > li:not(:empty) { + @extend .dropdown-menu__item; + + a { + padding: 12px 16px; + color: $primary-text-color; + + &:hover { + color: $primary-text-color; + background-color: $column-header-hover-color; + } + } + } + } + + .status { + background-color: $base-lighter1-color; + padding-top: 16px; + padding-bottom: 16px; + padding-right: 16px; + padding-left: 74px; + + &__avatar { + top: 16px; + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-status-card.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-status-card.scss new file mode 100644 index 000000000..9b64572f9 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-status-card.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.status-card { + color: $primary-lighter1-text-color; + &__title, &__description { color: $primary-lighter2-text-color } + + &__image { background: transparent } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components.scss new file mode 100644 index 000000000..e735b108d --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +@import 'components-button'; +@import 'components-card'; +@import 'components-dropdown'; +@import 'components-status-card'; \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/emoji-picker.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/emoji-picker.scss new file mode 100644 index 000000000..0937158bf --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/emoji-picker.scss @@ -0,0 +1,68 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.emoji-mart { + &-bar { + border: 0 solid $base-separation-color; + + &:first-child { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + background-color: $base-color; + } + } + + &-anchors { + color: $icon-color; + } + &-anchor { + &-selected { + color: $icon-active-color; + + &:hover { + color: $icon-active-color; + } + } + + &-bar { + background-color: $icon-active-color; + } + } + + &-search { + background-color: $base-lighter1-color; + } + &-search input { + color: $primary-text-color; + background-color: $form-color; + border: 0px solid #ffffff00; + } + + &-category-label span { + color: $primary-text-color; + background-color: $base-lighter1-color; + } + + &-scroll { + background-color: $base-lighter1-color; + } +} + +.emoji-picker-dropdown { + &__modifiers { + &__menu { + @include status-shadow; + @include material-card-radius; + background-color: $base-lighter1-color; + } + } + + &__menu { + @include column-shadow; + background-color: $base-lighter1-color; + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/explore.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/explore.scss new file mode 100644 index 000000000..ae80b3884 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/explore.scss @@ -0,0 +1,47 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.public-layout { + .page-header { + background: $explore-header-color; + + h1 { color: $primary-text-color } + p { color: $primary-lighter2-text-color } + } + + .directory, + .notice-widget { @include column-shadow; } + + .directory { + background: $explore-directory-color; + + .accounts-table { + &__count { + color: $primary-lighter2-text-color; + small { color: $primary-lighter1-text-color } + } + } + + &__tag { + & > a { + @include status-shadow; + background: $explore-directory-color; + } + + h4 { color: $primary-lighter2-text-color } + .fa, small { color: $primary-lighter1-text-color } + .trends__item__current { color: $primary-text-color } + } + } + + .notice-widget { + color: $primary-lighter1-text-color; + background: $explore-directory-color; + + a { color: $secondary-text-color } + } +} \ No newline at end of file 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 new file mode 100644 index 000000000..825d18dac --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/icons.scss @@ -0,0 +1,179 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +@function hex-color($color) { + @if type-of($color) == 'color' { + $color: str-slice(ie-hex-str($color), 4); + } + + @return '%23' + unquote($color) +}; + + + +@font-face { + font-family: "Material Icons Extended"; + src: + local("Material Icons Extended"), + url("https://fonts.gstatic.com/s/materialiconsextended/v50/kJEjBvgX7BgnkSrUwT8UnLVc38YydejYY-oE_LvJ.woff2"), + url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/font-Material_Icons_Extended-v50.woff2"); +} + +.icon-button { + color: $icon-color; + + &:active, + &:focus, + &:hover { + color: lighten($icon-color, 7%); + } + + &.star-icon { + &.active { + color: $light-text-color; + background: $icon-active-color; + border-radius: 50%; + } + + .fa.fa-star { vertical-align: top } + } + + &.inverted { + color: $icon-color; + } + + &.disabled { + color: lighten($icon-color, 13%); + + .fa.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + } + } + + .fa { + @include material-icon-large; + vertical-align: middle; + + &.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + + &:active, + &:hover, + &:focus { + background-image: url("data:image/svg+xml;utf8,"); + } + } + } +} + +.fa { + &.fa-users, + &.fa-globe, + &.fa-cog, + &.fa-cogs, + &.fa-gears, + &.fa-sign-out, + &.fa-star, + &.fa-reply, + &.fa-reply-all, + &.fa-mail-reply, + &.fa-mail-reply-all, + &.fa-envelope, + &.fa-bookmark, + &.fa-home, + &.fa-bell, + &.fa-eraser, + &.fa-ellipsis-h, + &.fa-ellipsis-v, + &.fa-address-book, + &.fa-thumb-tack, + &.fa-lock, + &.fa-pencil, + &.fa-chevron-left, + &.fa-chevron-right, + &.fa-camera, + &.fa-tasks, + &.fa-sliders, + &.fa-fire, + &.fa-list-ul, + &.fa-search, + &.fa-close, + &.fa-remove, + &.fa-times, + &.fa-user, + &.fa-mobile-phone, + &.fa-mobile, + &.fa-filter, + &.fa-user-plus, + &.fa-cloud-upload, + &.fa-cloud-download, + &.fa-eye, + &.fa-eye-slash, + &.fa-share-alt, + &.fa-chevron-down, + &.fa-bars, + &.fa-navicon, + &.fa-reorder { + font-family: "Material Icons Extended"; + } + + &.fa-users::before { content: "people" } // 人々マーク(.drawer__header > .drawer__tab:2) + &.fa-globe::before { content: "public" } // 地球マーク(.drawer__header > .drawer__tab:3) + &.fa-cog::before { content: "settings" } // 歯車マーク(.drawer__header > .drawer__tab:4) + &.fa-cogs::before { content: "settings" } //歯車マーク(モバイル) + &.fa-gears::before { content: "settings" } //歯車マーク(モバイル) + &.fa-sign-out::before { content: "exit_to_app" } //サインアウト + &.fa-star::before { content: "plus_one" } // +1(.status .status__action-bar > .star-icon) + &.fa-reply::before { content: "reply" } //返信ボタン + &.fa-reply-all::before { content: "reply_all" } //全員に返信ボタン + &.fa-mail-reply::before { content: "reply" } //返信ボタン + &.fa-mail-reply-all::before { content: "reply_all" } //全員に返信ボタン + &.fa-envelope::before { content: "mail" } //ダイレクトメッセージボタン + &.fa-bookmark::before { content: "bookmark" } //ブックマークボタン + &.fa-home::before { content: "home" } // 家マーク(ホームタイムライン) + &.fa-bell::before { content: "notifications" } // ベルマーク(通知) + &.fa-eraser::before { content: "clear_all" } // 通知を消去のマーク + &.fa-ellipsis-h::before { content: "more_horiz" } // 三点リーダー(横) + &.fa-ellipsis-v::before { content: "more_vert" } // 三点リーダー(縦) + &.fa-address-book::before { content: "explore" } // discoverマーク(explore遷移タブ) + &.fa-thumb-tack::before { content: "" } // ピンマーク(ピン留め投稿) + &.fa-lock::before { content: "" } // サークルマーク(フォロワー限定投稿) + &.fa-pencil::before { content: "create" } // 鉛筆マーク(モバイル用フローティングボタン) + &.fa-chevron-left::before { content: "arrow_back" } //戻るボタン + &.fa-chevron-right::before { content: "arrow_forward" } //進むボタン + &.fa-camera::before { content: "camera_alt" } //メディアを追加ボタン + &.fa-tasks::before { content: "poll" } //投票を追加ボタン + &.fa-sliders::before { content: "tune" } //設定を表示ボタン + &.fa-fire::before { content: "whatshot" } //トレンドマーク + &.fa-list-ul::before { content: "list" } //リストマーク + &.fa-search::before { content: "search" } //検索アイコン(モバイル、トップバー内) + &.fa-close::before { content: "close" } //閉じるボタン + &.fa-remove::before { content: "close" } //閉じるボタン + &.fa-times::before { content: "close" } //閉じるボタン(メディア) + &.fa-user::before { content: "account_circle" } //ユーザーアイコン + &.fa-mobile-phone::before { content: "smartphone" } //モバイルアイコン + &.fa-mobile::before { content: "smartphone" } //モバイルアイコン + &.fa-filter::before { content: "filter_list" } //フィルターアイコン + &.fa-user-plus::before { content: "person_add" } //ユーザーの追加アイコン + &.fa-cloud-upload::before { content: "cloud_upload" } //インポートアイコン + &.fa-cloud-download::before { content: "cloud_download" } //エクスポートアイコン + &.fa-eye::before { content: "visibility" } //目のアイコン + &.fa-eye-slash::before { content : "visibility_off" } //閉じた目のアイコン + &.fa-share-alt::before { content: "share" } //モバイル共有ボタン + &.fa-chevron-down::before { content: "keyboard_arrow_down" } //メニューボタン + &.fa-bars::before { content: "menu" } //ハンバーガーボタン + &.fa-navicon::before { content: "menu" } //ハンバーガーボタン + &.fa-reorder::before { content: "menu" } //ハンバーガーボタン +} + +.fa { + &.fa-chevron-left, + &.fa-chevron-right, + &.fa.fa-times { + @include material-icon-large; + vertical-align: bottom; + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/keyboard_shortcuts.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/keyboard_shortcuts.scss new file mode 100644 index 000000000..6c664b32f --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/keyboard_shortcuts.scss @@ -0,0 +1,21 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.keyboard-shortcuts { + kbd { + @include status-shadow; + + color: $primary-text-color; + background-color: $base-lighter1-color; + border-color: $base-darker1-color; + + margin: 0 0.25em; + + &:first-child { margin-left: 0 } + &:last-child { margin-right: 0 } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/lists.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/lists.scss new file mode 100644 index 000000000..05c29a6df --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/lists.scss @@ -0,0 +1,55 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.column { + .column-back-button { background: inherit } + + .column-inline-form { + background: $column-header-color; + + label input { + color: $secondary-text-color; + &:focus { color: $primary-text-color } + } + } + + .column-inline-form ~ .scrollable { + article { margin: 0 } + } +} + +.modal-root { + .column-inline-form { + background: $column-header-color; + + .setting-text { + color: $primary-text-color; + &:active, &:focus { color: $primary-lighter2-text-color } + } + } + + .list-editor { + background: $base-color; + h4 { background: $column-header-color } + + .drawer__pager { + .drawer__inner { background: $column-header-color } + } + } + + .list-adder { + background: $base-color; + + .column-inline-form { border-bottom: 1px solid $base-separation-color } + + &__account, + &__lists { background: $column-header-color } + + &__lists { + .list { border-color: $base-separation-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/notifications.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/notifications.scss new file mode 100644 index 000000000..bab098372 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/notifications.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.notification { + &.notification-favourite { + .status { + &.status-direct { background: transparent } + } + } + + > .notification__message { + color: $primary-lighter2-text-color; + font-size: 13px; + padding: 8px 0; + + .notification__display-name { + &:hover { color: inherit } + } + + .notification__favourite-icon-wrapper { + .star-icon { color: $icon-active-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/profile.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/profile.scss new file mode 100644 index 000000000..246d24b7d --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/profile.scss @@ -0,0 +1,232 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.public-layout { + a.button { + @include button-shadow; + + color: $primary-text-color; + background: $base-lighter1-color; + + &:hover, + &:focus, + &:active { + background: darken($base-lighter1-color, 8%); + } + } + + .logo-button { + svg path { + /* Only for Itabashi-don */ + &:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important } + &#Mastodon { fill: $base-lighter1-color !important } + } + } + + .public-account-header { + @include status-shadow; + + &__image { + background: $base-lighter1-color; + + @media screen and (min-width: 600px) { height: 500px } + + &::after { + content: ""; + + position: absolute; + top: auto; + left: 0; + bottom: 0; + + width: 100%; + height: 30%; + background: $account-header-image-shadow-color; + box-shadow: none; + } + + > img:not([src]), + > img[src="/headers/original/missing.png"] { + content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg"); + } + } + + &__bar { + @media screen and (max-width: 600px) { + flex-direction: column; + background: $base-color; + } + + @media screen and (min-width: 600px) { margin-top: -140px } + + &::before { background: $base-lighter1-color } + + .avatar { + @media screen and (max-width: 600px) { + position: relative; + bottom: 30px; + + display: initial; + width: 60px; + height: 60px; + margin: 0 auto; + padding: 0; + } + + img { + border: 2px solid $base-lighter1-color; + border-radius: 50%; + background: transparent; + } + } + } + + &__tabs { + @media screen and (max-width: 600px) { + flex-wrap: wrap; + margin-left: 0; + + &__name { + width: 100%; + text-align: center; + + h1 { + color: $primary-text-color; + + small { color: $primary-lighter1-text-color } + } + } + + &__tabs { + justify-content: center; + flex: auto; + + .spacer { display: none } + + a.button.logo-button { + color: $light-text-color; + background: $secondary-text-color; + + svg path { + /* Only for Itabashi-don */ + &:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important } + &#Mastodon { fill: $secondary-text-color !important } + } + } + } + } + + .details-counters { + .counter { + color: $light-text-color; + border-right: 0; + + &::after { border-bottom-color: $base-color } + + &.active { + &::after { border-bottom-color: $active-color } + } + } + } + } + + &__extra { + .public-account-bio { + .account__header__content { text-align: center } + } + + &__links { + color: $primary-text-color; + + a { + &, strong { color: $primary-text-color } + } + } + } + } + + .public-account-bio, + .endorsements-widget, + .hero-widget { @include status-shadow; } + + .public-account-bio { + background: $base-lighter1-color; + + .account__header__content { color: $primary-text-color } + &__extra { color: $primary-lighter1-text-color } + } + + .endorsements-widget { + padding-bottom: 0; + border-radius: 4px; + + h4 { + color: $primary-lighter1-text-color; + background: $base-lighter1-color; + } + } + + .hero-widget { + &__img { background: $base-color } + &__text { + background: $base-lighter1-color; + + &, em { color: $primary-lighter2-text-color } + a { color: $secondary-text-color } + } + } + + .account__section-headline { + background: $base-lighter1-color; + border-bottom-color: $base-separation-color; + + a { + color: $primary-lighter1-text-color; + + &.active { + color: $primary-lighter2-text-color; + + &::before { border-color: transparent transparent $base-separation-color } + &::after { border-color: transparent transparent $status-color } + } + } + } + + .activity-stream { + box-shadow: none; + + .entry { + margin: 1em 0; + background: transparent; + + &:first-of-type { margin: 0 } + } + } + + .nothing-here { + @include status-shadow; + + color: $primary-lighter1-text-color; + background: $base-lighter1-color; + } + + .footer { + h4 { color: $primary-lighter1-text-color } + + ul { + a { color: $primary-lighter2-text-color } + } + + .brand { + svg path { + /* Only for Itabashi-don */ + &:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important } + &#Mastodon { fill: $base-lighter1-color !important } + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/searches.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/searches.scss new file mode 100644 index 000000000..b4478b91b --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/searches.scss @@ -0,0 +1,41 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.search { + .search { + &__input { + @include material-border; + + color: $primary-text-color; + background: $form-color; + + &:focus { background: $form-focused-color } + } + + &__icon { + .fa { color: $icon-color } + } + } + + &-results { + > .search-results { + &__header { background: $base-color } + &__section { + > h5 { background: darken($base-color, 10%) } + } + } + } +} + +.trends__item { + background: $trend-color; + + .trends__item { + &__name a { color: $secondary-text-color } + &__current { color: lighten($secondary-text-color, 10%) } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-account.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-account.scss new file mode 100644 index 000000000..02fb9eac4 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-account.scss @@ -0,0 +1,54 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.edit_account { + @media screen and (min-width: 415px) { + .card { + > a { + position: relative; + + .card__img { + border-bottom: 1px solid $base-separation-color; + + > img:not([src]), + > img[src="/headers/original/missing.png"] { + content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg"); + } + } + + .card__bar { + position: static; + padding-top: 30%; + + .avatar { + position: absolute; + left: 0; + bottom: 0; + + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + + img { + width: 128px; + height: 128px; + + border-radius: 50%; + } + } + + .display-name { + flex: auto; + margin-left: 0; + text-align: center; + } + } + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-dashboard.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-dashboard.scss new file mode 100644 index 000000000..b4303249b --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-dashboard.scss @@ -0,0 +1,30 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.dashboard { + &__counters { + & > div { + & > div, & > a { background: $dashboard-counters-base-color } + + & > a { + &:hover, + &:focus, + &:active { + background: $dashboard-counters-hover-color; + } + } + } + + &__text, + &__num { color: $primary-text-color } + + &__label { color: $primary-lighter1-text-color } + } + + &__widgets { + a:not(.name-tag) { color: $primary-lighter2-text-color } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-directory_tag.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-directory_tag.scss new file mode 100644 index 000000000..9f75646ac --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-directory_tag.scss @@ -0,0 +1,21 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.admin-wrapper { + .content { + .directory__tag { + & > a, + & > div { background: $setting-base-color } + + h4 { + & { color: $primary-lighter2-text-color } + .fa, small { color: $primary-lighter1-text-color } + } + + .trends__item__current { color: $primary-text-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-log.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-log.scss new file mode 100644 index 000000000..672a77c06 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-log.scss @@ -0,0 +1,30 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.log-entry { + .log-entry { + &__header { + color: $primary-lighter2-text-color; + background: $log-entry-color; + + .username, + .target, + a { color: $secondary-text-color } + } + + &__timestamp { color: $primary-lighter1-text-color } + &__icon { color: $icon-color } + + &__extras { + color: $primary-text-color; + background: $log-entry-extra-color; + + .diff-neutral { color: $log-entry-extra--neutral-color } + .diff-old { color: $log-entry-extra--old-color } + .diff-new { color: $log-entry-extra--new-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-report.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-report.scss new file mode 100644 index 000000000..2e198f338 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-report.scss @@ -0,0 +1,75 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.report-card { + background: $setting-content-base-color; + + &__profile__stats { + color: $primary-lighter2-text-color; + + a { + &:focus, + &:hover, + &:active { + color: lighten($primary-lighter2-text-color, 8%); + } + } + } + + &__summary { + &__item { + border-top-color: $base-separation-color; + + &:hover { background: $column-header-hover-color } + + &__reported-by, + &__assigned { + color: $primary-lighter2-text-color; + } + + &__content { + &__icon { color: $icon-color } + a { color: $primary-lighter2-text-color } + } + } + } +} + +.batch-table { + &__toolbar { + background: $base-lighter1-color; + border-color: $base-separation-color; + } + + &__row { + &, &:nth-child(2n) { background: $base-lighter1-color } + &:hover, &:nth-child(2n):hover { background: $column-header-hover-color } + + border-color: $base-separation-color; + + &__content { + .status__content { color: $primary-text-color } + .detailed-status__meta { color: $primary-lighter1-text-color } + + + .accounts-table { // v2.8.0 -> + .accounts-table { + &__count { + & {color: $primary-text-color } + small { color: $primary-lighter1-text-color } + } + } + + td .account { background: inherit } + } + } + } +} + +.speech-bubble { + &__bubble { color: $primary-text-color } + a { color: $secondary-text-color } +} \ 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 new file mode 100644 index 000000000..308c7e6a0 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings.scss @@ -0,0 +1,244 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; +@import 'settings-account'; +@import 'settings-report'; +@import 'settings-log'; +@import 'settings-dashboard'; +@import 'settings-directory_tag'; + + + +body.admin { + color: $primary-text-color; + background: $setting-base-color; + + .sidebar { + &-wrapper { background: inherit } + + ul { + border-radius: 0; + + a { + color: $primary-lighter2-text-color; + border-radius: 0; + + &:hover { + color: $primary-text-color; + background: $setting-lists-hover-color; + } + + &.selected { + color: $primary-text-color; + background: $setting-lists-selected-color; + } + + i.fa { + @include material-icon-large; + margin-right: 8px; + vertical-align: bottom; + } + } + + ul { background: darken($setting-base-color, 4%) } + + .simple-navigation-active-leaf a { + color: $icon-active-color; + background: initial; + + &:hover { background: $setting-lists-hover-color } + } + } + } + + .content { + @include column-shadow; + background: $setting-content-base-color; + + h2, h3, h4, h6 { color: $primary-text-color } + + p { + color: $primary-text-color; + strong { color: $primary-text-color } + } + + h2, h4, hr { border-bottom-color: $base-separation-color } + .muted-hint { color: $primary-lighter1-text-color } + } +} + +.simple_form { + .input { + &.boolean, + &.with_label, + &.with_floating_label { + .label_input > label { color: $primary-text-color } + } + + &.with_block_label { + & > label { color: $primary-text-color } + } + + &.radio_buttons{ + .radio label { color: $primary-text-color } + } + + &-copy { + background: $base-color; + border-color: $base-separation-color; + } + } + + .check_boxes { + .checkbox { + label { color: $primary-text-color } + } + } + + input[type=text], + input[type=number], + input[type=email], + input[type=password], + textarea { + color: $primary-text-color; + background: $setting-content-base-color; + border-color: $base-separation-color; + + &:hover { + border-color: $base-separation-color; + } + + &:active, + &:focus { + background: darken($setting-content-base-color, 8%); + } + } + + select { + color: $primary-text-color; + background-color: $setting-content-base-color; + border-color: $base-separation-color; + } + + .input.field_with_errors { + label, + .error { + color: $error-text-color; + } + } + + .hint, p.hint { + color: $primary-lighter1-text-color !important; + + code { + color: $light-text-color; + background: $setting-emphasis-color; + } + } + + .recommended { + color: $verified-color; + background-color: transparentize($verified-color, 0.75); + border-color: $verified-color; + } + + .label_input { + &__append { color: $primary-lighter1-text-color } + } + + button { + @include button-shadow; + } +} + +.simple_form, +.table-form { + .warning { background: change-color($color: $error-color, $alpha: 0.8) } +} + +.quick-nav { + a { + color: $secondary-text-color; + + &:hover, + &:focus, + &:active { + color: lighten($secondary-text-color, 8%); + } + } +} + +.pagination { + .page, + a { + color: $primary-text-color; + } + + .page { + &.current { + background: $icon-active-color; + color: $light-text-color; + } + } +} + +.filters { + .filter-subset { + strong { color: $primary-text-color } + + a { + color: $primary-lighter2-text-color; + + &:hover { color: $primary-text-color } + + &.selected { + color: $active-text-color; + border-bottom-color: $active-text-color; + } + } + } +} + +.new_form_two_factor_confirmation { + .qr-wrapper { + .qr-code { box-shadow: none } + .qr-alternative { color: $secondary-lighter1-text-color } + } +} + +label, +select#user_setting_default_privacy { + &[for=user_setting_default_privacy_public], + &[for=user_setting_default_privacy_unlisted], + option[value="public"], + option[value="unlisted"] { color: $active-text-color !important } +} + +.column-header__collapsible__extra { + .column-settings__section { color: $primary-text-color } + + .setting-toggle { + .react-toggle { + &.react-toggle--checked { + > .react-toggle-track { background: $setting-toggle-checked-color } + + > .react-toggle-thumb { + border-color: $setting-toggle-checked-color; + background-color: $setting-toggle-thumb-checked-color; + } + } + + > .react-toggle-track { background: $setting-toggle-color } + + > .react-toggle-thumb { + border-color: $setting-toggle-color; + background-color: $setting-toggle-thumb-color; + } + } + + .setting-toggle__label { color: $primary-text-color } + } + + .setting-meta__label { color: $primary-lighter1-text-color } +} \ No newline at end of file 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 new file mode 100644 index 000000000..6746032b4 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/statuses.scss @@ -0,0 +1,121 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.status { + @include status-shadow; + @include material-card-radius; + border-bottom: 0; + + transition: box-shadow 0.1s 0s ease-out; + + &.light { + .status { + &__relative-time { color: $primary-lighter1-text-color } + &__display-name { + color: $primary-text-color; + + .display-name__account { color: $primary-lighter1-text-color } + } + + &__content { color: $primary-text-color } + } + } + + &.status-direct { + background: $status-direct-color; + + &:not(.read) { + background: inherit; + border-bottom-color: initial; + } + } + + &.muted { + .status__content { + p { color: lighten($primary-text-color, 20%) } + } + } + + .status { + &__info { + .status__display-name { + color: $primary-lighter1-text-color; + + strong { color: $primary-text-color } + } + + .status__relative-time { color: $primary-lighter1-text-color } + } + } + + &__action-bar__counter__label { color: $primary-lighter1-text-color } +} + +.detailed-status { + &__display-name { + color: $secondary-text-color; + + strong { color: $primary-text-color } + } + + &__meta { + .detailed-status__datetime { color: $primary-lighter1-text-color } + + .detailed-status__link { + .fa.fa-star { vertical-align: middle } + } + } + + &__wrapper { + @include status-shadow; + + .detailed-status { @extend .detailed-status; } + .detailed-status__action-bar { + background: $status-actionbar-color; + border-color: $base-separation-color; + } + } +} + +.status, +.detailed-status { + background: $status-color; + + .status__content { + color: $primary-text-color; + + a { color: $secondary-text-color } + + .status__content__spoiler-link { + color: $primary-text-color; + background: $base-color; + } + } +} + +a.status-card, +a.status-card.compact { + &:hover { background: initial } +} + +.status-card, +.status-card.compact { + border-color: $non-elevated-card-boader; + + &__title { + color : $primary-text-color; + } + + &__host { + color: $primary-lighter1-text-color; + } +} + +.name-tag, +a.name-tag { + color: $secondary-text-color; +} \ No newline at end of file diff --git a/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/tables.scss b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/tables.scss new file mode 100644 index 000000000..e71ce7a38 --- /dev/null +++ b/app/javascript/styles/dark-gplus-theme-for-mastodon-dev/tables.scss @@ -0,0 +1,29 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.table { + thead th { border-bottom-color: $base-separation-color } + + th, + td { + color: $primary-text-color; + background-color: $base-color; + border-top: 0; + } + + & > tbody > tr:nth-child(odd) { + & > td, & > th { background: darken($base-color, 4%) } + } + + a { color: $secondary-text-color } +} + +a.table-action-link, +button.table-action-link { + color: $secondary-text-color; + + &:hover { color: darken($secondary-text-color, 8%) } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev.scss new file mode 100644 index 000000000..1c8df2bab --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev.scss @@ -0,0 +1,24 @@ +/** + * Google+ Theme for Mastodon v1.1 + * Copyright (C) 2018-2019 Genbu Project + */ + + @charset "UTF-8"; + + // @import 'application'; + @import 'application'; + @import 'gplus-theme-for-mastodon-dev/basics'; + @import 'gplus-theme-for-mastodon-dev/components'; + @import 'gplus-theme-for-mastodon-dev/emoji-picker'; + @import 'gplus-theme-for-mastodon-dev/tables'; + @import 'gplus-theme-for-mastodon-dev/columns'; + @import 'gplus-theme-for-mastodon-dev/lists'; + @import 'gplus-theme-for-mastodon-dev/accounts'; + @import 'gplus-theme-for-mastodon-dev/statuses'; + @import 'gplus-theme-for-mastodon-dev/notifications'; + @import 'gplus-theme-for-mastodon-dev/searches'; + @import 'gplus-theme-for-mastodon-dev/settings'; + @import 'gplus-theme-for-mastodon-dev/icons'; + @import 'gplus-theme-for-mastodon-dev/profile'; + @import 'gplus-theme-for-mastodon-dev/about'; + @import 'gplus-theme-for-mastodon-dev/explore'; \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/_functions.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/_functions.scss new file mode 100644 index 000000000..e5aea0e4e --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/_functions.scss @@ -0,0 +1,15 @@ +@charset "UTF-8"; + + + +@function adjust-lightness ($color, $lightness) { + @if (lightness($color) - $lightness <= 0 and lightness($color) + $lightness < 100) { + @return lighten($color, $lightness); + } + + @if (0 < lightness($color) - $lightness and 100 <= lightness($color) + $lightness) { + @return darken($color, $lightness); + } + + @return change-color($color, $lightness: $lightness); +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/_mixins.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/_mixins.scss new file mode 100644 index 000000000..400a1ac90 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/_mixins.scss @@ -0,0 +1,13 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color } +@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color } +@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color } +@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color } +@mixin material-border { border-radius: 4px } +@mixin material-card-radius { border-radius: 2px } +@mixin material-icon-large { font-size: 20px } \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/_variables.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/_variables.scss new file mode 100644 index 000000000..77a68f3b8 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/_variables.scss @@ -0,0 +1,98 @@ +@charset "UTF-8"; + + + +// Base colors +$active-color: #db4437; +$accent-color: #fbbc04; +$valid-color: #4285f4; +$error-color: #d50000; +$checked-color: #4285f4; +$verified-color: #4caf50; + + +// Text colors +$primary-text-color: rgba(0, 0, 0, 0.87); +$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示 +$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示 +$secondary-text-color: #2962ff; // ex: リンク +$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID +$light-text-color: #ffffff; +$light-darker1-text-color: darken($light-text-color, 15%); +$active-text-color: $active-color; +$error-text-color: $error-color; + + +// Icon colors +$icon-color: #757575; +$icon-active-color: $active-color; + + +// Background colors +$base-color: #f1f1f1; +$base-lighter1-color: #ffffff; +$base-darker1-color: rgba(0, 0, 0, 0.4); + +$column-header-color: $base-lighter1-color; +$column-header-hover-color: darken($column-header-color, 10%); + +$status-color: $base-lighter1-color; +$status-direct-color: darken($status-color, 5%); +$status-actionbar-color: darken($status-color, 2%); + +$account-color: $base-lighter1-color; +$account-foreground-color: $base-darker1-color; + +$card-color: $base-lighter1-color; +$card-hover-color: $column-header-hover-color; +$card-image-color: $base-color; + +$form-color: rgba(0, 0, 0, 0.1); +$form-focused-color: lighten($form-color, 20%); +$trend-color: $base-lighter1-color; + +$setting-base-color: $base-color; +$setting-lists-selected-color: darken($base-color, 2%); +$setting-lists-hover-color: darken($base-color, 5%); +$setting-content-base-color: $base-lighter1-color; + +$setting-toggle-color: #b9b9b9; +$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5); +$setting-toggle-thumb-color: #fafafa; +$setting-toggle-thumb-checked-color: $checked-color; + +$setting-emphasis-color: $verified-color; + +$dashboard-counters-base-color: $base-color; +$dashboard-counters-hover-color: lighten($base-color, 2%); + +$log-entry-color: $base-lighter1-color; +$log-entry-extra-color: $base-color; +$log-entry-extra--neutral-color: $valid-color; +$log-entry-extra--old-color: $active-color; +$log-entry-extra--new-color: $verified-color; + +$explore-header-color: lighten($accent-color, 16%); +$explore-directory-color: $base-lighter1-color; + +$active-button-color: $valid-color; //文字入りボタン +$non-active-button-color: lighten($base-color, 20%); + +$floating-acton-button-hover-color: lighten($active-color, 10%); + + +// Shadow colors +$column-header-shadow-color: rgba(0, 0, 0, 0.3); +$status-shadow-color: rgba(0, 0, 0, 0.14); +$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3); +$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26); +$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46)); +$button-shadow-color: rgba(0, 0, 0, 0.4); + + +// Separation colors +$base-separation-color: rgba(0, 0, 0, 0.14); + + +//Border colors +$non-elevated-card-boader : #e0e0e0; \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/about.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/about.scss new file mode 100644 index 000000000..de48883a8 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/about.scss @@ -0,0 +1,138 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +// from mastodon/about.scss +$column-breakpoint: 700px; + + + +.landing-page { + h3, h4, h5, h6 { color: $primary-lighter2-text-color } + p { color: $primary-lighter1-text-color } + em { color: $primary-text-color } + + .column-0 { background: $base-darker1-color } + .column-2 { + .landing-page { + &__information { padding: 0 } + + &__short-description { + & > .row:first-child { + background: $base-darker1-color; + padding: 10px 20px; + } + + & > * { + padding-left: 40px; padding-right: 40px; + &:last-child { padding-bottom: 45px } + + @media screen and (max-width: $column-breakpoint) { + padding-left: 20px; padding-right: 20px; + &:last-child { padding-bottom: 25px } + } + } + } + } + } + + &__forms, + &__information, + &__call-to-action { + @include status-shadow; + background: $column-header-color; + } + + &__forms { + padding: 0; + + & > *:first-child { margin: inherit } + & > * { margin-left: 20px; margin-right: 20px; } + + .brand { background: $base-darker1-color } + + form { + & > .input input { + background: $form-color; + + &:focus { background: $form-focused-color } + } + } + + .separator-or { + margin-left: 20px; margin-right: 20px; + + span { + color: $primary-lighter1-text-color; + background: $column-header-color; + } + } + + @media screen and (max-width: $column-breakpoint) { + background: inherit; + box-shadow: none; + + .separator-or span { background: $base-color } + } + } + + &__information { + color: $primary-lighter1-text-color; + + &.contact-widget { + @include status-shadow; + background: $column-header-color; + + .contact-widget { + &__mail { + a { color: $primary-text-color } + } + } + } + + strong { color: inherit } + + .row:first-child { + h1 small { + color: $light-darker1-text-color; + + span { color: $light-text-color } + } + } + } + + &__call-to-action { + .row__information-board { + .information-board__section { + color: $primary-lighter2-text-color; + + & > span:last-child { color: $primary-lighter1-text-color } + } + } + } + + &__features { + .features-list { + .features-list__row { + .text { color: $primary-lighter1-text-color } + .visual .fa { color: $icon-color } + } + } + } + + &__footer { color: $primary-lighter1-text-color } + + #mastodon-timeline { + color: $primary-text-color; + background: transparent; + + p { + color: $primary-text-color; + + a { color: $secondary-text-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss new file mode 100644 index 000000000..984a8c9ae --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss @@ -0,0 +1,191 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.account { + background: $account-color; + border-color: $base-separation-color; + + .account { + &__display-name { + color: $secondary-text-color; + strong { color: $primary-text-color } + } + } + + &-role { + color: $primary-lighter2-text-color; + background-color: rgba($base-separation-color, 0.1); + border-color: rgba($base-separation-color, 0.5); + } +} + +.column { + > .column-back-button { + @include column-shadow; + background: $column-header-color; + } +} + +.account-timeline__header { + .account__header { + background-color: $account-foreground-color; + + > div { background-color: inherit } // -> v2.7.4 + + .account__header { + &__username { color: $secondary-lighter1-text-color } + &__fields { @extend .account__header__fields; } + + &__image { // v2.8.0 -> + &::after { + content: ""; + + position: absolute; + top: auto; + left: 0; + bottom: 0; + + width: 100%; + height: 30%; + background: $account-header-image-shadow-color; + box-shadow: none; + } + + > img:not([src]), + > img[src$="/headers/original/missing.png"] { + content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg"); + } + } + + &__bar { // v2.8.0 -> + background-color: $base-lighter1-color; + + .account__header { + &__tabs { + .avatar { + .account__avatar { + border-color: $base-lighter1-color; + border-radius: 50%; + } + } + + &__buttons { + .icon-button { border: 0 } + } + + &__name { + h1 { color: $primary-text-color } + small { color: $secondary-text-color } + } + } + + &__bio { + .account__header { + &__content { color: $primary-text-color } + &__fields { border-color: $base-separation-color } + } + } + + &__extra { + &__links { + &, a { color: $primary-lighter1-text-color } + strong { color: $primary-lighter2-text-color } + } + } + } + } + } + + .account--action-button { + .icon-button:not(.active) { + color: darken($light-text-color, 7%); + + &:active, + &:focus, + &:hover { + color: $light-text-color; + } + } + } + } + + .account { + &__disclaimer, + &__action-bar, + &__section-headline { + background: $base-lighter1-color; + border-color: $base-separation-color; + } + + &__action-bar { + &__tab { + border-color: $base-separation-color; + &.active { border-bottom-color: $active-color } + + > span { color: $primary-lighter1-text-color } + } + } + + &__section-headline { + a { + color: $primary-text-color; + + &.active { + color: $active-color; + + &::before { border-color: transparent transparent $base-separation-color } + &::after { border-color: transparent transparent $status-color } + } + } + } + } +} + +.account-authorize__wrapper { + @include status-shadow; + background: $base-lighter1-color; + + &:focus { @include status-focus-shadow; } + + .account { + &__header__content { + color: $primary-lighter2-text-color; + } + + &--panel { + background: $account-color; + border-color: $base-separation-color; + } + } +} + +.account__header__fields { + dl { + border-color: $base-separation-color; + + dt, + dd { + color: $primary-text-color; + background: $base-lighter1-color; + } + + dd { + &.verified { + border-color: transparentize($valid-color, 0.5); + background: transparentize($valid-color, 0.75); + + a { color: lighten($verified-color, 20%) } + } + } + } + + a { color: $secondary-text-color } +} + +.account__action-bar__tab { + strong { color: $primary-text-color } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/basics.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/basics.scss new file mode 100644 index 000000000..a141ecd13 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/basics.scss @@ -0,0 +1,47 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +body { + &, + .ui { + color: $primary-text-color; + background: $base-color; + } +} + +.focusable { + &:focus { + background: inherit; + + .status { + @include status-focus-shadow; + + &.status-direct { background: $status-direct-color } + } + + .detailed-status { + & { background: $status-color } + &__action-bar { background: $status-actionbar-color } + } + } +} + +::-webkit-scrollbar-thumb { + background: darken($base-lighter1-color, 12%); + + &:hover { background: darken($base-lighter1-color, 16%) } + &:active { background: darken($base-lighter1-color, 12%) } +} + +::-webkit-scrollbar-track { + background: $base-color; + + &:hover, + &:active { + background: darken($base-lighter1-color, 8%); + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss new file mode 100644 index 000000000..6a0239562 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss @@ -0,0 +1,263 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.tabs-bar { + @include column-shadow; + margin: 0; + background: $column-header-color; + + .tabs-bar { + &__link { + color: $icon-color; + border-bottom: 4px solid $column-header-color; + padding: 15px 10px 11px 10px; + + &.active { + border-bottom: 4px solid $active-color; + } + + .fa { + @include material-icon-large; + vertical-align: top; + } + } + } +} + +.drawer { + .drawer { + &__header { + @include column-shadow; + background: $column-header-color; + + .drawer__tab { + @include material-icon-large; + color: $icon-color; + } + + a { + &:hover { background: $column-header-hover-color } + } + } + + &__pager { + @include status-shadow; + @include material-card-radius; + + .drawer__inner { + background: $column-header-color; + + &__mastodon { display: none } + } + } + } +} + +.navigation-bar { + color: $secondary-text-color; + background: $column-header-color; + + .navigation-bar { + &__profile { + strong { color: $primary-text-color } + &-edit { color: $secondary-text-color } + } + } +} + + +.compose-form { + .compose-form { + &__buttons-wrapper { + background: $column-header-color; + + &.character-counter__wrapper { + .character-counter { color: $primary-lighter1-text-color } + } + } + + &__publish { border-top: 1px solid $base-separation-color } + &__publish-button-wrapper { @include button-shadow } + &__modifiers { background-color: $base-lighter1-color } + } + + .autosuggest-textarea__textarea { + background-color: $base-lighter1-color; + color: $primary-text-color; + } + + .character-counter { + color: $icon-color + } +} + +.column { + .column-header { + @include column-shadow; + background: $column-header-color; + + &.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: unset } + } + + &__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 } + } + } + + .column-back-button { + &__icon { + @include material-icon-large; + vertical-align: bottom; + margin-right: 8px; + } + } + + .column { + &-subheading, + &-link__badge { background: darken($base-color, 10%) } + + &-link { + color: $primary-text-color; + background: $base-color; + + &__icon { + @include material-icon-large; + color: $icon-color; + vertical-align: bottom; + margin-right: 8px; + } + } + } + + .scrollable { + background: transparent; + + *[role="feed"] { + article { + margin: 1em 0; + &:first-of-type { margin: 0 } + + &:focus { outline: none } + } + } + + div[tabindex="-1"] { margin-bottom: 1em } + } + + .notification__filter-bar { + background: $column-header-color; + border-bottom-color: $base-separation-color; + + button { + color: $icon-color; + background: $column-header-color; + + &.active { + color: $icon-active-color; + + &::before { border-color: transparent transparent $base-separation-color } + &::after { border-color: transparent transparent $column-header-color } + } + } + } + + .empty-column-indicator { + flex-direction: column; + background: $base-color; + + &::before { + content: ""; + display: block; + + width: 100px; + height: 100px; + margin-bottom: 1em; + + background: none center / contain no-repeat; + background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif"); + } + } +} + +.getting-started { + &__wrapper, + & { + background: $base-color; + } + + & { + border-top: 1px solid $base-separation-color; + + a { color: $primary-text-color } + } +} + +.load { + &-more, + &-gap { + background: transparent; + + &:hover { background: darken($column-header-color, 10%) } + } + + &-gap { border: 0 } +} + +.confirmation-modal { + @include material-card-radius; + color: $primary-text-color; + background-color: $base-lighter1-color; + + &__action-bar { + background-color: $base-lighter1-color; + } + + &__cancel-button { + color: $primary-lighter1-text-color; + box-shadow: 0 2px 5px 0 transparent; + } +} \ No newline at end of file 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 new file mode 100644 index 000000000..42d4f8db8 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/components-button.scss @@ -0,0 +1,39 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.floating-action-button { + font-size: 24px; + background-color: $active-color; + width: 3.6rem; + height: 3.6rem; + + &:active { + background-color: $active-color; + } + + &:hover { + background-color: $floating-acton-button-hover-color; + } +} + +.button { + @include button-shadow; + @include material-card-radius; + background-color: $active-button-color; + + .text-icon-button { color: $primary-lighter1-text-color } +} + +.modal-root { + &__modal { + .media-modal { + &__close.icon-button { + font-size: 40px !important; + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/components-card.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/components-card.scss new file mode 100644 index 000000000..dc72775a1 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/components-card.scss @@ -0,0 +1,38 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.card { + //border: 1px solid $base-separation-color; + //不要(?) + + > a { + @include status-shadow; + + &:hover, + &:focus, + &:active { + .card__bar { + background: initial; + + .display-name strong { color: $secondary-text-color } + } + } + + .card__img { background: $card-image-color } + .card__bar { + background: $card-color; + + .avatar { + img { background: transparent } + } + + .display-name { + strong { color: $primary-text-color } + span { color: $primary-lighter2-text-color } + } + } + } +} \ 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 new file mode 100644 index 000000000..a9c6dc5ef --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/components-dropdown.scss @@ -0,0 +1,69 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + +.dropdown-menu { + background-color: $column-header-color; +} + +.dropdown-menu, +.actions-modal { + @include material-card-radius; + + & > ul { + 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; + + padding: 16px 16px; + background: $column-header-color; + + &:active, + &:focus, + &:hover { + color: $primary-text-color; + background: $column-header-hover-color; + } + } + } + + &__separator { border-bottom-color: $base-separation-color } + } + + & > li:not(:empty) { + @extend .dropdown-menu__item; + + a { + padding: 12px 16px; + color: $primary-text-color; + + &:hover { + color: $primary-text-color; + background-color: $column-header-hover-color; + } + } + } + } + + .status { + background-color: $base-lighter1-color; + padding-top: 16px; + padding-bottom: 16px; + padding-right: 16px; + padding-left: 74px; + + &__avatar { + top: 16px; + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/components-status-card.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/components-status-card.scss new file mode 100644 index 000000000..9b64572f9 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/components-status-card.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.status-card { + color: $primary-lighter1-text-color; + &__title, &__description { color: $primary-lighter2-text-color } + + &__image { background: transparent } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/components.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/components.scss new file mode 100644 index 000000000..e735b108d --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/components.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +@import 'components-button'; +@import 'components-card'; +@import 'components-dropdown'; +@import 'components-status-card'; \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/emoji-picker.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/emoji-picker.scss new file mode 100644 index 000000000..0937158bf --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/emoji-picker.scss @@ -0,0 +1,68 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.emoji-mart { + &-bar { + border: 0 solid $base-separation-color; + + &:first-child { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + background-color: $base-color; + } + } + + &-anchors { + color: $icon-color; + } + &-anchor { + &-selected { + color: $icon-active-color; + + &:hover { + color: $icon-active-color; + } + } + + &-bar { + background-color: $icon-active-color; + } + } + + &-search { + background-color: $base-lighter1-color; + } + &-search input { + color: $primary-text-color; + background-color: $form-color; + border: 0px solid #ffffff00; + } + + &-category-label span { + color: $primary-text-color; + background-color: $base-lighter1-color; + } + + &-scroll { + background-color: $base-lighter1-color; + } +} + +.emoji-picker-dropdown { + &__modifiers { + &__menu { + @include status-shadow; + @include material-card-radius; + background-color: $base-lighter1-color; + } + } + + &__menu { + @include column-shadow; + background-color: $base-lighter1-color; + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/explore.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/explore.scss new file mode 100644 index 000000000..ae80b3884 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/explore.scss @@ -0,0 +1,47 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.public-layout { + .page-header { + background: $explore-header-color; + + h1 { color: $primary-text-color } + p { color: $primary-lighter2-text-color } + } + + .directory, + .notice-widget { @include column-shadow; } + + .directory { + background: $explore-directory-color; + + .accounts-table { + &__count { + color: $primary-lighter2-text-color; + small { color: $primary-lighter1-text-color } + } + } + + &__tag { + & > a { + @include status-shadow; + background: $explore-directory-color; + } + + h4 { color: $primary-lighter2-text-color } + .fa, small { color: $primary-lighter1-text-color } + .trends__item__current { color: $primary-text-color } + } + } + + .notice-widget { + color: $primary-lighter1-text-color; + background: $explore-directory-color; + + a { color: $secondary-text-color } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss new file mode 100644 index 000000000..825d18dac --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss @@ -0,0 +1,179 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +@function hex-color($color) { + @if type-of($color) == 'color' { + $color: str-slice(ie-hex-str($color), 4); + } + + @return '%23' + unquote($color) +}; + + + +@font-face { + font-family: "Material Icons Extended"; + src: + local("Material Icons Extended"), + url("https://fonts.gstatic.com/s/materialiconsextended/v50/kJEjBvgX7BgnkSrUwT8UnLVc38YydejYY-oE_LvJ.woff2"), + url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/font-Material_Icons_Extended-v50.woff2"); +} + +.icon-button { + color: $icon-color; + + &:active, + &:focus, + &:hover { + color: lighten($icon-color, 7%); + } + + &.star-icon { + &.active { + color: $light-text-color; + background: $icon-active-color; + border-radius: 50%; + } + + .fa.fa-star { vertical-align: top } + } + + &.inverted { + color: $icon-color; + } + + &.disabled { + color: lighten($icon-color, 13%); + + .fa.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + } + } + + .fa { + @include material-icon-large; + vertical-align: middle; + + &.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + + &:active, + &:hover, + &:focus { + background-image: url("data:image/svg+xml;utf8,"); + } + } + } +} + +.fa { + &.fa-users, + &.fa-globe, + &.fa-cog, + &.fa-cogs, + &.fa-gears, + &.fa-sign-out, + &.fa-star, + &.fa-reply, + &.fa-reply-all, + &.fa-mail-reply, + &.fa-mail-reply-all, + &.fa-envelope, + &.fa-bookmark, + &.fa-home, + &.fa-bell, + &.fa-eraser, + &.fa-ellipsis-h, + &.fa-ellipsis-v, + &.fa-address-book, + &.fa-thumb-tack, + &.fa-lock, + &.fa-pencil, + &.fa-chevron-left, + &.fa-chevron-right, + &.fa-camera, + &.fa-tasks, + &.fa-sliders, + &.fa-fire, + &.fa-list-ul, + &.fa-search, + &.fa-close, + &.fa-remove, + &.fa-times, + &.fa-user, + &.fa-mobile-phone, + &.fa-mobile, + &.fa-filter, + &.fa-user-plus, + &.fa-cloud-upload, + &.fa-cloud-download, + &.fa-eye, + &.fa-eye-slash, + &.fa-share-alt, + &.fa-chevron-down, + &.fa-bars, + &.fa-navicon, + &.fa-reorder { + font-family: "Material Icons Extended"; + } + + &.fa-users::before { content: "people" } // 人々マーク(.drawer__header > .drawer__tab:2) + &.fa-globe::before { content: "public" } // 地球マーク(.drawer__header > .drawer__tab:3) + &.fa-cog::before { content: "settings" } // 歯車マーク(.drawer__header > .drawer__tab:4) + &.fa-cogs::before { content: "settings" } //歯車マーク(モバイル) + &.fa-gears::before { content: "settings" } //歯車マーク(モバイル) + &.fa-sign-out::before { content: "exit_to_app" } //サインアウト + &.fa-star::before { content: "plus_one" } // +1(.status .status__action-bar > .star-icon) + &.fa-reply::before { content: "reply" } //返信ボタン + &.fa-reply-all::before { content: "reply_all" } //全員に返信ボタン + &.fa-mail-reply::before { content: "reply" } //返信ボタン + &.fa-mail-reply-all::before { content: "reply_all" } //全員に返信ボタン + &.fa-envelope::before { content: "mail" } //ダイレクトメッセージボタン + &.fa-bookmark::before { content: "bookmark" } //ブックマークボタン + &.fa-home::before { content: "home" } // 家マーク(ホームタイムライン) + &.fa-bell::before { content: "notifications" } // ベルマーク(通知) + &.fa-eraser::before { content: "clear_all" } // 通知を消去のマーク + &.fa-ellipsis-h::before { content: "more_horiz" } // 三点リーダー(横) + &.fa-ellipsis-v::before { content: "more_vert" } // 三点リーダー(縦) + &.fa-address-book::before { content: "explore" } // discoverマーク(explore遷移タブ) + &.fa-thumb-tack::before { content: "" } // ピンマーク(ピン留め投稿) + &.fa-lock::before { content: "" } // サークルマーク(フォロワー限定投稿) + &.fa-pencil::before { content: "create" } // 鉛筆マーク(モバイル用フローティングボタン) + &.fa-chevron-left::before { content: "arrow_back" } //戻るボタン + &.fa-chevron-right::before { content: "arrow_forward" } //進むボタン + &.fa-camera::before { content: "camera_alt" } //メディアを追加ボタン + &.fa-tasks::before { content: "poll" } //投票を追加ボタン + &.fa-sliders::before { content: "tune" } //設定を表示ボタン + &.fa-fire::before { content: "whatshot" } //トレンドマーク + &.fa-list-ul::before { content: "list" } //リストマーク + &.fa-search::before { content: "search" } //検索アイコン(モバイル、トップバー内) + &.fa-close::before { content: "close" } //閉じるボタン + &.fa-remove::before { content: "close" } //閉じるボタン + &.fa-times::before { content: "close" } //閉じるボタン(メディア) + &.fa-user::before { content: "account_circle" } //ユーザーアイコン + &.fa-mobile-phone::before { content: "smartphone" } //モバイルアイコン + &.fa-mobile::before { content: "smartphone" } //モバイルアイコン + &.fa-filter::before { content: "filter_list" } //フィルターアイコン + &.fa-user-plus::before { content: "person_add" } //ユーザーの追加アイコン + &.fa-cloud-upload::before { content: "cloud_upload" } //インポートアイコン + &.fa-cloud-download::before { content: "cloud_download" } //エクスポートアイコン + &.fa-eye::before { content: "visibility" } //目のアイコン + &.fa-eye-slash::before { content : "visibility_off" } //閉じた目のアイコン + &.fa-share-alt::before { content: "share" } //モバイル共有ボタン + &.fa-chevron-down::before { content: "keyboard_arrow_down" } //メニューボタン + &.fa-bars::before { content: "menu" } //ハンバーガーボタン + &.fa-navicon::before { content: "menu" } //ハンバーガーボタン + &.fa-reorder::before { content: "menu" } //ハンバーガーボタン +} + +.fa { + &.fa-chevron-left, + &.fa-chevron-right, + &.fa.fa-times { + @include material-icon-large; + vertical-align: bottom; + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/keyboard_shortcuts.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/keyboard_shortcuts.scss new file mode 100644 index 000000000..6c664b32f --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/keyboard_shortcuts.scss @@ -0,0 +1,21 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.keyboard-shortcuts { + kbd { + @include status-shadow; + + color: $primary-text-color; + background-color: $base-lighter1-color; + border-color: $base-darker1-color; + + margin: 0 0.25em; + + &:first-child { margin-left: 0 } + &:last-child { margin-right: 0 } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/lists.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/lists.scss new file mode 100644 index 000000000..05c29a6df --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/lists.scss @@ -0,0 +1,55 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.column { + .column-back-button { background: inherit } + + .column-inline-form { + background: $column-header-color; + + label input { + color: $secondary-text-color; + &:focus { color: $primary-text-color } + } + } + + .column-inline-form ~ .scrollable { + article { margin: 0 } + } +} + +.modal-root { + .column-inline-form { + background: $column-header-color; + + .setting-text { + color: $primary-text-color; + &:active, &:focus { color: $primary-lighter2-text-color } + } + } + + .list-editor { + background: $base-color; + h4 { background: $column-header-color } + + .drawer__pager { + .drawer__inner { background: $column-header-color } + } + } + + .list-adder { + background: $base-color; + + .column-inline-form { border-bottom: 1px solid $base-separation-color } + + &__account, + &__lists { background: $column-header-color } + + &__lists { + .list { border-color: $base-separation-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/notifications.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/notifications.scss new file mode 100644 index 000000000..bab098372 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/notifications.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.notification { + &.notification-favourite { + .status { + &.status-direct { background: transparent } + } + } + + > .notification__message { + color: $primary-lighter2-text-color; + font-size: 13px; + padding: 8px 0; + + .notification__display-name { + &:hover { color: inherit } + } + + .notification__favourite-icon-wrapper { + .star-icon { color: $icon-active-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/profile.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/profile.scss new file mode 100644 index 000000000..246d24b7d --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/profile.scss @@ -0,0 +1,232 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.public-layout { + a.button { + @include button-shadow; + + color: $primary-text-color; + background: $base-lighter1-color; + + &:hover, + &:focus, + &:active { + background: darken($base-lighter1-color, 8%); + } + } + + .logo-button { + svg path { + /* Only for Itabashi-don */ + &:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important } + &#Mastodon { fill: $base-lighter1-color !important } + } + } + + .public-account-header { + @include status-shadow; + + &__image { + background: $base-lighter1-color; + + @media screen and (min-width: 600px) { height: 500px } + + &::after { + content: ""; + + position: absolute; + top: auto; + left: 0; + bottom: 0; + + width: 100%; + height: 30%; + background: $account-header-image-shadow-color; + box-shadow: none; + } + + > img:not([src]), + > img[src="/headers/original/missing.png"] { + content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg"); + } + } + + &__bar { + @media screen and (max-width: 600px) { + flex-direction: column; + background: $base-color; + } + + @media screen and (min-width: 600px) { margin-top: -140px } + + &::before { background: $base-lighter1-color } + + .avatar { + @media screen and (max-width: 600px) { + position: relative; + bottom: 30px; + + display: initial; + width: 60px; + height: 60px; + margin: 0 auto; + padding: 0; + } + + img { + border: 2px solid $base-lighter1-color; + border-radius: 50%; + background: transparent; + } + } + } + + &__tabs { + @media screen and (max-width: 600px) { + flex-wrap: wrap; + margin-left: 0; + + &__name { + width: 100%; + text-align: center; + + h1 { + color: $primary-text-color; + + small { color: $primary-lighter1-text-color } + } + } + + &__tabs { + justify-content: center; + flex: auto; + + .spacer { display: none } + + a.button.logo-button { + color: $light-text-color; + background: $secondary-text-color; + + svg path { + /* Only for Itabashi-don */ + &:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important } + &#Mastodon { fill: $secondary-text-color !important } + } + } + } + } + + .details-counters { + .counter { + color: $light-text-color; + border-right: 0; + + &::after { border-bottom-color: $base-color } + + &.active { + &::after { border-bottom-color: $active-color } + } + } + } + } + + &__extra { + .public-account-bio { + .account__header__content { text-align: center } + } + + &__links { + color: $primary-text-color; + + a { + &, strong { color: $primary-text-color } + } + } + } + } + + .public-account-bio, + .endorsements-widget, + .hero-widget { @include status-shadow; } + + .public-account-bio { + background: $base-lighter1-color; + + .account__header__content { color: $primary-text-color } + &__extra { color: $primary-lighter1-text-color } + } + + .endorsements-widget { + padding-bottom: 0; + border-radius: 4px; + + h4 { + color: $primary-lighter1-text-color; + background: $base-lighter1-color; + } + } + + .hero-widget { + &__img { background: $base-color } + &__text { + background: $base-lighter1-color; + + &, em { color: $primary-lighter2-text-color } + a { color: $secondary-text-color } + } + } + + .account__section-headline { + background: $base-lighter1-color; + border-bottom-color: $base-separation-color; + + a { + color: $primary-lighter1-text-color; + + &.active { + color: $primary-lighter2-text-color; + + &::before { border-color: transparent transparent $base-separation-color } + &::after { border-color: transparent transparent $status-color } + } + } + } + + .activity-stream { + box-shadow: none; + + .entry { + margin: 1em 0; + background: transparent; + + &:first-of-type { margin: 0 } + } + } + + .nothing-here { + @include status-shadow; + + color: $primary-lighter1-text-color; + background: $base-lighter1-color; + } + + .footer { + h4 { color: $primary-lighter1-text-color } + + ul { + a { color: $primary-lighter2-text-color } + } + + .brand { + svg path { + /* Only for Itabashi-don */ + &:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important } + &#Mastodon { fill: $base-lighter1-color !important } + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/searches.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/searches.scss new file mode 100644 index 000000000..b4478b91b --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/searches.scss @@ -0,0 +1,41 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.search { + .search { + &__input { + @include material-border; + + color: $primary-text-color; + background: $form-color; + + &:focus { background: $form-focused-color } + } + + &__icon { + .fa { color: $icon-color } + } + } + + &-results { + > .search-results { + &__header { background: $base-color } + &__section { + > h5 { background: darken($base-color, 10%) } + } + } + } +} + +.trends__item { + background: $trend-color; + + .trends__item { + &__name a { color: $secondary-text-color } + &__current { color: lighten($secondary-text-color, 10%) } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-account.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-account.scss new file mode 100644 index 000000000..02fb9eac4 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-account.scss @@ -0,0 +1,54 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.edit_account { + @media screen and (min-width: 415px) { + .card { + > a { + position: relative; + + .card__img { + border-bottom: 1px solid $base-separation-color; + + > img:not([src]), + > img[src="/headers/original/missing.png"] { + content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg"); + } + } + + .card__bar { + position: static; + padding-top: 30%; + + .avatar { + position: absolute; + left: 0; + bottom: 0; + + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + + img { + width: 128px; + height: 128px; + + border-radius: 50%; + } + } + + .display-name { + flex: auto; + margin-left: 0; + text-align: center; + } + } + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-dashboard.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-dashboard.scss new file mode 100644 index 000000000..b4303249b --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-dashboard.scss @@ -0,0 +1,30 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.dashboard { + &__counters { + & > div { + & > div, & > a { background: $dashboard-counters-base-color } + + & > a { + &:hover, + &:focus, + &:active { + background: $dashboard-counters-hover-color; + } + } + } + + &__text, + &__num { color: $primary-text-color } + + &__label { color: $primary-lighter1-text-color } + } + + &__widgets { + a:not(.name-tag) { color: $primary-lighter2-text-color } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-directory_tag.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-directory_tag.scss new file mode 100644 index 000000000..9f75646ac --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-directory_tag.scss @@ -0,0 +1,21 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.admin-wrapper { + .content { + .directory__tag { + & > a, + & > div { background: $setting-base-color } + + h4 { + & { color: $primary-lighter2-text-color } + .fa, small { color: $primary-lighter1-text-color } + } + + .trends__item__current { color: $primary-text-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-log.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-log.scss new file mode 100644 index 000000000..672a77c06 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-log.scss @@ -0,0 +1,30 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.log-entry { + .log-entry { + &__header { + color: $primary-lighter2-text-color; + background: $log-entry-color; + + .username, + .target, + a { color: $secondary-text-color } + } + + &__timestamp { color: $primary-lighter1-text-color } + &__icon { color: $icon-color } + + &__extras { + color: $primary-text-color; + background: $log-entry-extra-color; + + .diff-neutral { color: $log-entry-extra--neutral-color } + .diff-old { color: $log-entry-extra--old-color } + .diff-new { color: $log-entry-extra--new-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-report.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-report.scss new file mode 100644 index 000000000..2e198f338 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings-report.scss @@ -0,0 +1,75 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.report-card { + background: $setting-content-base-color; + + &__profile__stats { + color: $primary-lighter2-text-color; + + a { + &:focus, + &:hover, + &:active { + color: lighten($primary-lighter2-text-color, 8%); + } + } + } + + &__summary { + &__item { + border-top-color: $base-separation-color; + + &:hover { background: $column-header-hover-color } + + &__reported-by, + &__assigned { + color: $primary-lighter2-text-color; + } + + &__content { + &__icon { color: $icon-color } + a { color: $primary-lighter2-text-color } + } + } + } +} + +.batch-table { + &__toolbar { + background: $base-lighter1-color; + border-color: $base-separation-color; + } + + &__row { + &, &:nth-child(2n) { background: $base-lighter1-color } + &:hover, &:nth-child(2n):hover { background: $column-header-hover-color } + + border-color: $base-separation-color; + + &__content { + .status__content { color: $primary-text-color } + .detailed-status__meta { color: $primary-lighter1-text-color } + + + .accounts-table { // v2.8.0 -> + .accounts-table { + &__count { + & {color: $primary-text-color } + small { color: $primary-lighter1-text-color } + } + } + + td .account { background: inherit } + } + } + } +} + +.speech-bubble { + &__bubble { color: $primary-text-color } + a { color: $secondary-text-color } +} \ 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 new file mode 100644 index 000000000..308c7e6a0 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/settings.scss @@ -0,0 +1,244 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; +@import 'settings-account'; +@import 'settings-report'; +@import 'settings-log'; +@import 'settings-dashboard'; +@import 'settings-directory_tag'; + + + +body.admin { + color: $primary-text-color; + background: $setting-base-color; + + .sidebar { + &-wrapper { background: inherit } + + ul { + border-radius: 0; + + a { + color: $primary-lighter2-text-color; + border-radius: 0; + + &:hover { + color: $primary-text-color; + background: $setting-lists-hover-color; + } + + &.selected { + color: $primary-text-color; + background: $setting-lists-selected-color; + } + + i.fa { + @include material-icon-large; + margin-right: 8px; + vertical-align: bottom; + } + } + + ul { background: darken($setting-base-color, 4%) } + + .simple-navigation-active-leaf a { + color: $icon-active-color; + background: initial; + + &:hover { background: $setting-lists-hover-color } + } + } + } + + .content { + @include column-shadow; + background: $setting-content-base-color; + + h2, h3, h4, h6 { color: $primary-text-color } + + p { + color: $primary-text-color; + strong { color: $primary-text-color } + } + + h2, h4, hr { border-bottom-color: $base-separation-color } + .muted-hint { color: $primary-lighter1-text-color } + } +} + +.simple_form { + .input { + &.boolean, + &.with_label, + &.with_floating_label { + .label_input > label { color: $primary-text-color } + } + + &.with_block_label { + & > label { color: $primary-text-color } + } + + &.radio_buttons{ + .radio label { color: $primary-text-color } + } + + &-copy { + background: $base-color; + border-color: $base-separation-color; + } + } + + .check_boxes { + .checkbox { + label { color: $primary-text-color } + } + } + + input[type=text], + input[type=number], + input[type=email], + input[type=password], + textarea { + color: $primary-text-color; + background: $setting-content-base-color; + border-color: $base-separation-color; + + &:hover { + border-color: $base-separation-color; + } + + &:active, + &:focus { + background: darken($setting-content-base-color, 8%); + } + } + + select { + color: $primary-text-color; + background-color: $setting-content-base-color; + border-color: $base-separation-color; + } + + .input.field_with_errors { + label, + .error { + color: $error-text-color; + } + } + + .hint, p.hint { + color: $primary-lighter1-text-color !important; + + code { + color: $light-text-color; + background: $setting-emphasis-color; + } + } + + .recommended { + color: $verified-color; + background-color: transparentize($verified-color, 0.75); + border-color: $verified-color; + } + + .label_input { + &__append { color: $primary-lighter1-text-color } + } + + button { + @include button-shadow; + } +} + +.simple_form, +.table-form { + .warning { background: change-color($color: $error-color, $alpha: 0.8) } +} + +.quick-nav { + a { + color: $secondary-text-color; + + &:hover, + &:focus, + &:active { + color: lighten($secondary-text-color, 8%); + } + } +} + +.pagination { + .page, + a { + color: $primary-text-color; + } + + .page { + &.current { + background: $icon-active-color; + color: $light-text-color; + } + } +} + +.filters { + .filter-subset { + strong { color: $primary-text-color } + + a { + color: $primary-lighter2-text-color; + + &:hover { color: $primary-text-color } + + &.selected { + color: $active-text-color; + border-bottom-color: $active-text-color; + } + } + } +} + +.new_form_two_factor_confirmation { + .qr-wrapper { + .qr-code { box-shadow: none } + .qr-alternative { color: $secondary-lighter1-text-color } + } +} + +label, +select#user_setting_default_privacy { + &[for=user_setting_default_privacy_public], + &[for=user_setting_default_privacy_unlisted], + option[value="public"], + option[value="unlisted"] { color: $active-text-color !important } +} + +.column-header__collapsible__extra { + .column-settings__section { color: $primary-text-color } + + .setting-toggle { + .react-toggle { + &.react-toggle--checked { + > .react-toggle-track { background: $setting-toggle-checked-color } + + > .react-toggle-thumb { + border-color: $setting-toggle-checked-color; + background-color: $setting-toggle-thumb-checked-color; + } + } + + > .react-toggle-track { background: $setting-toggle-color } + + > .react-toggle-thumb { + border-color: $setting-toggle-color; + background-color: $setting-toggle-thumb-color; + } + } + + .setting-toggle__label { color: $primary-text-color } + } + + .setting-meta__label { color: $primary-lighter1-text-color } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss new file mode 100644 index 000000000..6746032b4 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss @@ -0,0 +1,121 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.status { + @include status-shadow; + @include material-card-radius; + border-bottom: 0; + + transition: box-shadow 0.1s 0s ease-out; + + &.light { + .status { + &__relative-time { color: $primary-lighter1-text-color } + &__display-name { + color: $primary-text-color; + + .display-name__account { color: $primary-lighter1-text-color } + } + + &__content { color: $primary-text-color } + } + } + + &.status-direct { + background: $status-direct-color; + + &:not(.read) { + background: inherit; + border-bottom-color: initial; + } + } + + &.muted { + .status__content { + p { color: lighten($primary-text-color, 20%) } + } + } + + .status { + &__info { + .status__display-name { + color: $primary-lighter1-text-color; + + strong { color: $primary-text-color } + } + + .status__relative-time { color: $primary-lighter1-text-color } + } + } + + &__action-bar__counter__label { color: $primary-lighter1-text-color } +} + +.detailed-status { + &__display-name { + color: $secondary-text-color; + + strong { color: $primary-text-color } + } + + &__meta { + .detailed-status__datetime { color: $primary-lighter1-text-color } + + .detailed-status__link { + .fa.fa-star { vertical-align: middle } + } + } + + &__wrapper { + @include status-shadow; + + .detailed-status { @extend .detailed-status; } + .detailed-status__action-bar { + background: $status-actionbar-color; + border-color: $base-separation-color; + } + } +} + +.status, +.detailed-status { + background: $status-color; + + .status__content { + color: $primary-text-color; + + a { color: $secondary-text-color } + + .status__content__spoiler-link { + color: $primary-text-color; + background: $base-color; + } + } +} + +a.status-card, +a.status-card.compact { + &:hover { background: initial } +} + +.status-card, +.status-card.compact { + border-color: $non-elevated-card-boader; + + &__title { + color : $primary-text-color; + } + + &__host { + color: $primary-lighter1-text-color; + } +} + +.name-tag, +a.name-tag { + color: $secondary-text-color; +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon-dev/tables.scss b/app/javascript/styles/gplus-theme-for-mastodon-dev/tables.scss new file mode 100644 index 000000000..e71ce7a38 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon-dev/tables.scss @@ -0,0 +1,29 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.table { + thead th { border-bottom-color: $base-separation-color } + + th, + td { + color: $primary-text-color; + background-color: $base-color; + border-top: 0; + } + + & > tbody > tr:nth-child(odd) { + & > td, & > th { background: darken($base-color, 4%) } + } + + a { color: $secondary-text-color } +} + +a.table-action-link, +button.table-action-link { + color: $secondary-text-color; + + &:hover { color: darken($secondary-text-color, 8%) } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon.scss b/app/javascript/styles/gplus-theme-for-mastodon.scss new file mode 100644 index 000000000..e233cfbea --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon.scss @@ -0,0 +1,22 @@ +/** + * Google+ Theme for Mastodon v1.1 + * Copyright (C) 2018-2019 Genbu Project + */ + +@charset "UTF-8"; + +@import 'application'; +@import 'gplus-theme-for-mastodon/basics'; +@import 'gplus-theme-for-mastodon/components'; +@import 'gplus-theme-for-mastodon/tables'; +@import 'gplus-theme-for-mastodon/columns'; +@import 'gplus-theme-for-mastodon/lists'; +@import 'gplus-theme-for-mastodon/accounts'; +@import 'gplus-theme-for-mastodon/statuses'; +@import 'gplus-theme-for-mastodon/notifications'; +@import 'gplus-theme-for-mastodon/searches'; +@import 'gplus-theme-for-mastodon/settings'; +@import 'gplus-theme-for-mastodon/icons'; +@import 'gplus-theme-for-mastodon/profile'; +@import 'gplus-theme-for-mastodon/about'; +@import 'gplus-theme-for-mastodon/explore'; \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/_mixins.scss b/app/javascript/styles/gplus-theme-for-mastodon/_mixins.scss new file mode 100644 index 000000000..196473f89 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/_mixins.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color } +@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color } +@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color } +@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color } +@mixin material-border { border-radius: 4px } \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/_variables.scss b/app/javascript/styles/gplus-theme-for-mastodon/_variables.scss new file mode 100644 index 000000000..2160a8fc9 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/_variables.scss @@ -0,0 +1,81 @@ +@charset "UTF-8"; + + + +// Base colors +$active-color: #db4437; +$accent-color: #fbbc04; +$valid-color: #4285f4; +$error-color: #d50000; +$checked-color: #4285f4; +$verified-color: #4caf50; + + +// Text colors +$primary-text-color: rgba(0, 0, 0, 0.87); +$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示 +$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示 +$secondary-text-color: #2962ff; +$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID +$light-text-color: #ffffff; +$light-darker1-text-color: darken($light-text-color, 15%); +$active-text-color: $active-color; +$error-text-color: $error-color; + + +// Icon colors +$icon-color: #757575; +$icon-active-color: $active-color; + + +// Background colors +$base-color: #f1f1f1; +$base-lighter1-color: #ffffff; +$base-darker1-color: rgba(0, 0, 0, 0.4); + +$column-header-color: $base-lighter1-color; +$column-header-hover-color: change-color($color: $column-header-color, $lightness: 90%); + +$status-color: $base-lighter1-color; +$status-direct-color: darken($status-color, 5%); +$status-actionbar-color: change-color($color: $status-color, $lightness: 98%); + +$account-color: $base-lighter1-color; +$account-foreground-color: $base-darker1-color; + +$card-color: $base-lighter1-color; +$card-hover-color: $column-header-hover-color; +$card-image-color: $base-color; + +$form-color: rgba(0, 0, 0, 0.1); +$form-focused-color: lighten($form-color, 20%); +$trend-color: $base-lighter1-color; + +$setting-base-color: $base-color; +$setting-lists-selected-color: darken($base-color, 2%); +$setting-lists-hover-color: darken($base-color, 5%); +$setting-content-base-color: $base-lighter1-color; + +$setting-toggle-color: #b9b9b9; +$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5); +$setting-toggle-thumb-color: #fafafa; +$setting-toggle-thumb-checked-color: $checked-color; + +$dashboard-counters-base-color: $base-color; +$dashboard-counters-hover-color: lighten($base-color, 2%); + +$explore-header-color: lighten($accent-color, 16%); +$explore-directory-color: $base-lighter1-color; + + +// Shadow colors +$column-header-shadow-color: rgba(0, 0, 0, 0.3); +$status-shadow-color: rgba(0, 0, 0, 0.14); +$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3); +$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26); +$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46)); +$button-shadow-color: rgba(0, 0, 0, 0.4); + + +// Separation colors +$base-separation-color: rgba(0, 0, 0, 0.14); \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/about.scss b/app/javascript/styles/gplus-theme-for-mastodon/about.scss new file mode 100644 index 000000000..de48883a8 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/about.scss @@ -0,0 +1,138 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +// from mastodon/about.scss +$column-breakpoint: 700px; + + + +.landing-page { + h3, h4, h5, h6 { color: $primary-lighter2-text-color } + p { color: $primary-lighter1-text-color } + em { color: $primary-text-color } + + .column-0 { background: $base-darker1-color } + .column-2 { + .landing-page { + &__information { padding: 0 } + + &__short-description { + & > .row:first-child { + background: $base-darker1-color; + padding: 10px 20px; + } + + & > * { + padding-left: 40px; padding-right: 40px; + &:last-child { padding-bottom: 45px } + + @media screen and (max-width: $column-breakpoint) { + padding-left: 20px; padding-right: 20px; + &:last-child { padding-bottom: 25px } + } + } + } + } + } + + &__forms, + &__information, + &__call-to-action { + @include status-shadow; + background: $column-header-color; + } + + &__forms { + padding: 0; + + & > *:first-child { margin: inherit } + & > * { margin-left: 20px; margin-right: 20px; } + + .brand { background: $base-darker1-color } + + form { + & > .input input { + background: $form-color; + + &:focus { background: $form-focused-color } + } + } + + .separator-or { + margin-left: 20px; margin-right: 20px; + + span { + color: $primary-lighter1-text-color; + background: $column-header-color; + } + } + + @media screen and (max-width: $column-breakpoint) { + background: inherit; + box-shadow: none; + + .separator-or span { background: $base-color } + } + } + + &__information { + color: $primary-lighter1-text-color; + + &.contact-widget { + @include status-shadow; + background: $column-header-color; + + .contact-widget { + &__mail { + a { color: $primary-text-color } + } + } + } + + strong { color: inherit } + + .row:first-child { + h1 small { + color: $light-darker1-text-color; + + span { color: $light-text-color } + } + } + } + + &__call-to-action { + .row__information-board { + .information-board__section { + color: $primary-lighter2-text-color; + + & > span:last-child { color: $primary-lighter1-text-color } + } + } + } + + &__features { + .features-list { + .features-list__row { + .text { color: $primary-lighter1-text-color } + .visual .fa { color: $icon-color } + } + } + } + + &__footer { color: $primary-lighter1-text-color } + + #mastodon-timeline { + color: $primary-text-color; + background: transparent; + + p { + color: $primary-text-color; + + a { color: $secondary-text-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/accounts.scss b/app/javascript/styles/gplus-theme-for-mastodon/accounts.scss new file mode 100644 index 000000000..16bff9ee6 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/accounts.scss @@ -0,0 +1,109 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.account { + background: $account-color; + border-color: $base-separation-color; + + .account { + &__display-name { + color: $secondary-text-color; + + strong { color: $primary-text-color } + } + } +} + +.column { + > .column-back-button { + @include column-shadow; + background: $column-header-color; + } +} + +.account-timeline__header { + .account__header { + background-color: $account-foreground-color; + + > div { background-color: inherit } + + .account__header { + &__username { color: $secondary-lighter1-text-color } + &__fields { @extend .account__header__fields; } + } + + .account--action-button { + .icon-button:not(.active) { + color: darken($light-text-color, 7%); + + &:active, + &:focus, + &:hover { + color: $light-text-color; + } + } + } + } + + .account { + &__disclaimer, + &__action-bar, + &__section-headline { + background: $column-header-color; + border-color: $base-separation-color; + } + + &__action-bar { + &__tab { + border-color: $base-separation-color; + &.active { border-bottom-color: $active-color } + + > span { color: $primary-lighter1-text-color } + } + } + + &__section-headline { + a { + color: $primary-text-color; + + &.active { + color: $primary-lighter1-text-color; + + &::before { border-color: transparent transparent $base-separation-color } + &::after { border-color: transparent transparent $status-color } + } + } + } + } +} + +.account__header__fields { + dl { + border-color: $base-separation-color; + + dt, + dd { + color: $primary-text-color; + background: $column-header-color; + } + + dd { + &.verified { + border-color: transparentize($valid-color, 0.5); + background: transparentize($valid-color, 0.75); + + a { color: lighten($verified-color, 20%) } + } + } + } + + a { color: $secondary-text-color } +} + +.account__action-bar__tab { + strong { color: $primary-text-color } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/basics.scss b/app/javascript/styles/gplus-theme-for-mastodon/basics.scss new file mode 100644 index 000000000..a141ecd13 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/basics.scss @@ -0,0 +1,47 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +body { + &, + .ui { + color: $primary-text-color; + background: $base-color; + } +} + +.focusable { + &:focus { + background: inherit; + + .status { + @include status-focus-shadow; + + &.status-direct { background: $status-direct-color } + } + + .detailed-status { + & { background: $status-color } + &__action-bar { background: $status-actionbar-color } + } + } +} + +::-webkit-scrollbar-thumb { + background: darken($base-lighter1-color, 12%); + + &:hover { background: darken($base-lighter1-color, 16%) } + &:active { background: darken($base-lighter1-color, 12%) } +} + +::-webkit-scrollbar-track { + background: $base-color; + + &:hover, + &:active { + background: darken($base-lighter1-color, 8%); + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/columns.scss b/app/javascript/styles/gplus-theme-for-mastodon/columns.scss new file mode 100644 index 000000000..9086e30bc --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/columns.scss @@ -0,0 +1,197 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.tabs-bar { + margin: 0; + background: $column-header-color; + + .tabs-bar { + &__link { + color: $icon-color; + + .fa { vertical-align: top } + } + } +} + +.drawer { + .drawer { + &__header { + @include column-shadow; + background: $column-header-color; + + .drawer__tab { color: $icon-color } + + a { + &:hover { background: $column-header-hover-color } + } + } + + &__pager { + @include status-shadow; + + .drawer__inner { + background: $column-header-color; + + &__mastodon { display: none } + } + } + } +} + +.navigation-bar { + color: $secondary-text-color; + background: $column-header-color; + + .navigation-bar { + &__profile { + strong { color: $primary-text-color } + &-edit { color: $secondary-text-color } + } + } +} + +.compose-form { + .compose-form { + &__buttons-wrapper { background: $column-header-color } + &__publish { border-top: 1px solid $base-separation-color } + } +} + +.column { + .column-header { + @include column-shadow; + background: $column-header-color; + + &.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 { + color: $icon-color; + vertical-align: top; + } + + &__buttons { + .column-header { + &__back-button { + .column-back-button__icon { vertical-align: unset } + } + + &__button { + &.active { + color: $icon-active-color; + background: inherit; + } + + .fa { vertical-align: unset } + } + } + } + + &__collapsible { + color: $secondary-text-color; + border-bottom: 1px solid $base-separation-color; + + &-inner { background: $column-header-color } + } + } + + .column-back-button { + &__icon { vertical-align: unset } + } + + .column { + &-subheading { background: darken($base-color, 10%) } + + &-link { + color: $primary-text-color; + background: $base-color; + + &__icon { + color: $icon-color; + vertical-align: top; + } + } + } + + .scrollable { + background: transparent; + + *[role="feed"] { + article { + margin: 1em 0; + &:first-of-type { margin: 0 } + } + } + + div[tabindex="-1"] { margin-bottom: 1em } + } + + .notification__filter-bar { + background: $column-header-color; + border-bottom-color: $base-separation-color; + + button { + color: $icon-color; + background: $column-header-color; + + &.active { + color: $icon-active-color; + + &::before { border-color: transparent transparent $base-separation-color } + &::after { border-color: transparent transparent $column-header-color } + } + } + } + + .empty-column-indicator { + flex-direction: column; + background: $base-color; + + &::before { + content: ""; + display: block; + + width: 100px; + height: 100px; + margin-bottom: 1em; + + background: none center / contain no-repeat; + background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif"); + } + } +} + +.getting-started { + &__wrapper, + & { + background: $base-color; + } + + & { + border-top: 1px solid $base-separation-color; + + a { color: $primary-text-color } + } +} + +.load { + &-more, + &-gap { + background: transparent; + + &:hover { background: darken($column-header-color, 10%) } + } + + &-gap { border: 0 } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/components-button.scss b/app/javascript/styles/gplus-theme-for-mastodon/components-button.scss new file mode 100644 index 000000000..ef50ce863 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/components-button.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.floating-action-button { + font-size: 24px; + background: $active-color; +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/components-card.scss b/app/javascript/styles/gplus-theme-for-mastodon/components-card.scss new file mode 100644 index 000000000..cc6bf2808 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/components-card.scss @@ -0,0 +1,37 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.card { + border: 1px solid $base-separation-color; + + > a { + @include status-shadow; + + &:hover, + &:focus, + &:active { + .card__bar { + background: initial; + + .display-name strong { color: $secondary-text-color } + } + } + + .card__img { background: $card-image-color } + .card__bar { + background: $card-color; + + .avatar { + img { background: transparent } + } + + .display-name { + strong { color: $primary-text-color } + span { color: $primary-lighter2-text-color } + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/components-dropdown.scss b/app/javascript/styles/gplus-theme-for-mastodon/components-dropdown.scss new file mode 100644 index 000000000..afc55f95f --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/components-dropdown.scss @@ -0,0 +1,42 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.dropdown-menu, +.actions-modal > ul { + @include material-border; + 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; + + padding: 8px 16px; + background: $column-header-color; + + &:active, + &:focus, + &:hover { + background: $column-header-hover-color; + } + } + } + + &__separator { border-bottom-color: $base-separation-color } + } + + & > li:not(:empty) { + @extend .dropdown-menu__item; + + a { padding: 12px 16px } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/components.scss b/app/javascript/styles/gplus-theme-for-mastodon/components.scss new file mode 100644 index 000000000..2b0e8a816 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/components.scss @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +@import 'components-button'; +@import 'components-card'; +@import 'components-dropdown'; \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/explore.scss b/app/javascript/styles/gplus-theme-for-mastodon/explore.scss new file mode 100644 index 000000000..7d4726790 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/explore.scss @@ -0,0 +1,38 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.public-layout { + .page-header { + background: $explore-header-color; + + h1 { color: $primary-text-color } + p { color: $primary-lighter2-text-color } + } + + .directory { + background: $explore-directory-color; + + .accounts-table { + &__count { + color: $primary-lighter2-text-color; + small { color: $primary-lighter1-text-color } + } + } + + &__tag { + a { background: $explore-directory-color } + h4 { color: $primary-text-color } + .fa, small { color: $primary-lighter1-text-color } + } + } + + .notice-widget { + color: $primary-lighter1-text-color; + background: $explore-directory-color; + + a { color: $secondary-text-color } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/icons.scss b/app/javascript/styles/gplus-theme-for-mastodon/icons.scss new file mode 100644 index 000000000..0125172ad --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/icons.scss @@ -0,0 +1,97 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +@function hex-color($color) { + @if type-of($color) == 'color' { + $color: str-slice(ie-hex-str($color), 4); + } + + @return '%23' + unquote($color) +}; + + + +@font-face { + font-family: "Material Icons Extended"; + src: + local("Material Icons Extended"), + url("https://fonts.gstatic.com/s/materialiconsextended/v50/kJEjBvgX7BgnkSrUwT8UnLVc38YydejYY-oE_LvJ.woff2"), + url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/font-Material_Icons_Extended-v50.woff2"); +} + +.icon-button { + color: $icon-color; + + &:active, + &:focus, + &:hover { + color: lighten($icon-color, 7%); + } + + &.star-icon { + &.active { + color: $light-text-color; + background: $icon-active-color; + border-radius: 50%; + } + + .fa.fa-star { vertical-align: top } + } + + &.disabled { + color: lighten($icon-color, 13%); + + .fa.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + } + } + + .fa { + vertical-align: middle; + + &.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); + + &:active, + &:hover, + &:focus { + background-image: url("data:image/svg+xml;utf8,"); + } + } + } +} + +.fa { + &.fa-users, + &.fa-globe, + &.fa-cog, + &.fa-star, + &.fa-home, + &.fa-bell, + &.fa-eraser, + &.fa-ellipsis-h, + &.fa-ellipsis-v, + &.fa-address-book, + &.fa-thumb-tack, + &.fa-lock, + &.fa-pencil { + font-family: "Material Icons Extended"; + } + + &.fa-users::before { content: "people" } // 人々マーク(.drawer__header > .drawer__tab:2) + &.fa-globe::before { content: "" } // 地球マーク(.drawer__header > .drawer__tab:3) + &.fa-cog::before { content: "settings" } // 歯車マーク(.drawer__header > .drawer__tab:4) + &.fa-star::before { content: "plus_one" } // +1(.status .status__action-bar > .star-icon) + &.fa-home::before { content: "home" } // 家マーク(ホームタイムライン) + &.fa-bell::before { content: "" } // ベルマーク(通知) + &.fa-eraser::before { content: "" } // 通知を消去のマーク + &.fa-ellipsis-h::before { content: "" } // 三点リーダー(横) + &.fa-ellipsis-v::before { content: "" } // 三点リーダー(縦) + &.fa-address-book::before { content: "" } // discoverマーク(explore遷移タブ) + &.fa-thumb-tack::before { content: "" } // ピンマーク(ピン留め投稿) + &.fa-lock::before { content: "" } // サークルマーク(フォロワー限定投稿) + &.fa-pencil::before { content: "" } // 鉛筆マーク(モバイル用フローティングボタン) +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/lists.scss b/app/javascript/styles/gplus-theme-for-mastodon/lists.scss new file mode 100644 index 000000000..eb770001e --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/lists.scss @@ -0,0 +1,34 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.column { + .column-back-button { background: inherit } + + .column-inline-form { + background: $column-header-color; + + label input { + color: $secondary-text-color; + &:focus { color: $primary-text-color } + } + } + + .column-inline-form ~ .scrollable { + article { margin: 0 } + } +} + +.modal-root { + .list-editor { + background: $base-color; + + h4 { background: $column-header-color } + + .drawer__pager { + .drawer__inner { background: $column-header-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/notifications.scss b/app/javascript/styles/gplus-theme-for-mastodon/notifications.scss new file mode 100644 index 000000000..bab098372 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/notifications.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.notification { + &.notification-favourite { + .status { + &.status-direct { background: transparent } + } + } + + > .notification__message { + color: $primary-lighter2-text-color; + font-size: 13px; + padding: 8px 0; + + .notification__display-name { + &:hover { color: inherit } + } + + .notification__favourite-icon-wrapper { + .star-icon { color: $icon-active-color } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/profile.scss b/app/javascript/styles/gplus-theme-for-mastodon/profile.scss new file mode 100644 index 000000000..2bfa60c45 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/profile.scss @@ -0,0 +1,231 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.public-layout { + a.button { + @include button-shadow; + + color: $primary-text-color; + background: $base-lighter1-color; + + &:hover, + &:focus, + &:active { + background: darken($base-lighter1-color, 8%); + } + } + + .logo-button { + svg path { + /* Only for Itabashi-don */ + &:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important } + &:last-child { fill: $base-lighter1-color !important } + } + } + + .public-account-header { + @include status-shadow; + + &__image { + background: $base-lighter1-color; + + @media screen and (min-width: 600px) { height: 500px } + + &::after { + position: absolute; + top: auto; + left: 0; + bottom: 0; + + width: 100%; + height: 30%; + background: $account-header-image-shadow-color; + box-shadow: none; + } + + > img:not([src]), + > img[src="/headers/original/missing.png"] { + content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg"); + } + } + + &__bar { + @media screen and (max-width: 600px) { + flex-direction: column; + background: $base-color; + } + + @media screen and (min-width: 600px) { margin-top: -140px } + + &::before { background: $base-lighter1-color } + + .avatar { + @media screen and (max-width: 600px) { + position: relative; + bottom: 30px; + + display: initial; + width: 60px; + height: 60px; + margin: 0 auto; + padding: 0; + } + + img { + border: 2px solid $base-lighter1-color; + border-radius: 50%; + background: transparent; + } + } + } + + &__tabs { + @media screen and (max-width: 600px) { + flex-wrap: wrap; + margin-left: 0; + + &__name { + width: 100%; + text-align: center; + + h1 { + color: $primary-text-color; + + small { color: $primary-lighter1-text-color } + } + } + + &__tabs { + justify-content: center; + flex: auto; + + .spacer { display: none } + + a.button.logo-button { + color: $light-text-color; + background: $secondary-text-color; + + svg path { + /* Only for Itabashi-don */ + &:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important } + &:last-child { fill: $secondary-text-color !important } + } + } + } + } + + .details-counters { + .counter { + color: $light-text-color; + border-right: 0; + + &::after { border-bottom-color: $base-color } + + &.active { + &::after { border-bottom-color: $active-color } + } + } + } + } + + &__extra { + .public-account-bio { + .account__header__content { text-align: center } + } + + &__links { + color: $primary-text-color; + + a { + &, strong { color: $primary-text-color } + } + } + } + } + + .public-account-bio { + @include column-shadow; + background: $base-lighter1-color; + + .account__header__content { color: $primary-text-color } + &__extra { color: $primary-lighter1-text-color } + } + + .endorsements-widget { + @include column-shadow; + + padding-bottom: 0; + border-radius: 4px; + + h4 { + color: $primary-lighter1-text-color; + background: $base-lighter1-color; + } + } + + .hero-widget { + @include column-shadow; + + &__img { background: $base-color } + &__text { + background: $base-lighter1-color; + + &, em { color: $primary-lighter2-text-color } + a { color: $secondary-text-color } + } + } + + .account__section-headline { + background: $base-lighter1-color; + border-bottom-color: $base-separation-color; + + a { + color: $primary-lighter1-text-color; + + &.active { + color: $primary-lighter2-text-color; + + &::before { border-color: transparent transparent $base-separation-color } + &::after { border-color: transparent transparent $status-color } + } + } + } + + .activity-stream { + box-shadow: none; + + .entry { + margin: 1em 0; + background: transparent; + + &:first-of-type { margin: 0 } + } + } + + .nothing-here { + @include status-shadow; + + color: $primary-lighter1-text-color; + background: $base-lighter1-color; + } + + .footer { + h4 { color: $primary-lighter1-text-color } + + ul { + a { color: $primary-lighter2-text-color } + } + + .brand { + svg path { + /* Only for Itabashi-don */ + &:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important } + &:last-child { fill: $base-lighter1-color !important } + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/searches.scss b/app/javascript/styles/gplus-theme-for-mastodon/searches.scss new file mode 100644 index 000000000..b4478b91b --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/searches.scss @@ -0,0 +1,41 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.search { + .search { + &__input { + @include material-border; + + color: $primary-text-color; + background: $form-color; + + &:focus { background: $form-focused-color } + } + + &__icon { + .fa { color: $icon-color } + } + } + + &-results { + > .search-results { + &__header { background: $base-color } + &__section { + > h5 { background: darken($base-color, 10%) } + } + } + } +} + +.trends__item { + background: $trend-color; + + .trends__item { + &__name a { color: $secondary-text-color } + &__current { color: lighten($secondary-text-color, 10%) } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/settings-account.scss b/app/javascript/styles/gplus-theme-for-mastodon/settings-account.scss new file mode 100644 index 000000000..d069af381 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/settings-account.scss @@ -0,0 +1,44 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.edit_account { + @media screen and (min-width: 415px) { + .card { + > a { + position: relative; + + .card__img { border-bottom: 1px solid $base-separation-color } + .card__bar { + position: static; + padding-top: 30%; + + .avatar { + position: absolute; + left: 0; + bottom: 0; + + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + + img { + width: 128px; + height: 128px; + } + } + + .display-name { + flex: auto; + margin-left: 0; + text-align: center; + } + } + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/settings-dashboard.scss b/app/javascript/styles/gplus-theme-for-mastodon/settings-dashboard.scss new file mode 100644 index 000000000..0e9c55136 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/settings-dashboard.scss @@ -0,0 +1,28 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.dashboard { + &__counters { + & > div { + & > div, & > a { background: $dashboard-counters-base-color } + + & > a { + &:hover, + &:focus, + &:active { + background: $dashboard-counters-hover-color; + } + } + } + + &__num { color: $primary-text-color } + &__label { color: $primary-lighter1-text-color } + } + + &__widgets { + a:not(.name-tag) { color: $primary-lighter2-text-color } + } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/settings-report.scss b/app/javascript/styles/gplus-theme-for-mastodon/settings-report.scss new file mode 100644 index 000000000..7912d1ddc --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/settings-report.scss @@ -0,0 +1,63 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.report-card { + background: $setting-content-base-color; + + &__profile__stats { + color: $primary-lighter2-text-color; + + a { + &:focus, + &:hover, + &:active { + color: lighten($primary-lighter2-text-color, 8%); + } + } + } + + &__summary { + &__item { + border-top-color: $base-separation-color; + + &:hover { background: $column-header-hover-color } + + &__reported-by, + &__assigned { + color: $primary-lighter2-text-color; + } + + &__content { + &__icon { color: $icon-color } + a { color: $primary-lighter2-text-color } + } + } + } +} + +.batch-table { + &__toolbar { + background: $base-lighter1-color; + border-color: $base-separation-color; + } + + &__row { + background: $base-lighter1-color; + border-color: $base-separation-color; + + &:hover { background: $column-header-hover-color } + + &__content { + .status__content { color: $primary-text-color } + .detailed-status__meta { color: $primary-lighter1-text-color } + } + } +} + +.speech-bubble { + &__bubble { color: $primary-text-color } + a { color: $secondary-text-color } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/settings.scss b/app/javascript/styles/gplus-theme-for-mastodon/settings.scss new file mode 100644 index 000000000..752d2c662 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/settings.scss @@ -0,0 +1,208 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; +@import 'settings-account'; +@import 'settings-report'; +@import 'settings-dashboard'; + + + +body.admin { + color: $primary-text-color; + background: $setting-base-color; + + .sidebar { + &-wrapper { background: inherit } + + ul { + border-radius: 0; + + a { + color: $primary-lighter2-text-color; + border-radius: 0; + + &:hover { + color: $primary-text-color; + background: $setting-lists-hover-color; + } + + &.selected { + color: $primary-text-color; + background: $setting-lists-selected-color; + } + } + + ul { background: darken($setting-base-color, 4%) } + + .simple-navigation-active-leaf a { + color: $icon-active-color; + background: initial; + + &:hover { background: $setting-lists-hover-color } + } + } + } + + .content { + @include column-shadow; + background: $setting-content-base-color; + + h2, h3, h4, h6 { color: $primary-text-color } + + p { + color: $primary-text-color; + strong { color: $primary-text-color } + } + + h2, h4, hr { border-bottom-color: $base-separation-color } + .muted-hint { color: $primary-lighter1-text-color } + } +} + +.simple_form { + .input { + &.boolean, + &.with_label, + &.with_floating_label { + .label_input > label { color: $primary-text-color } + } + + &.with_block_label { + & > label { color: $primary-text-color } + } + + &.radio_buttons{ + .radio label { color: $primary-text-color } + } + + &-copy { background: $base-color } + } + + .check_boxes { + .checkbox { + label { color: $primary-text-color } + } + } + + input[type=text], + input[type=number], + input[type=email], + input[type=password], + textarea { + color: $primary-text-color; + background: $setting-content-base-color; + border-color: $base-separation-color; + + &:hover { + border-color: $base-separation-color; + } + + &:active, + &:focus { + background: darken($setting-content-base-color, 8%); + } + } + + select { + color: $primary-text-color; + background-color: $setting-content-base-color; + border-color: $base-separation-color; + } + + .input.field_with_errors { + label, + .error { + color: $error-text-color; + } + } + + .hint, p.hint { color: $primary-lighter1-text-color !important } + + .label_input { + &__append { color: $primary-lighter1-text-color } + } +} + +.simple_form, +.table-form { + .warning { background: change-color($color: $error-color, $alpha: 0.8) } +} + +.quick-nav { + a { + color: $secondary-text-color; + + &:hover, + &:focus, + &:active { + color: lighten($secondary-text-color, 8%); + } + } +} + +.pagination { + .page, + a { + color: $primary-text-color; + } + + .page { + &.current { + background: $icon-active-color; + color: $light-text-color; + } + } +} + +.filters { + .filter-subset { + strong { color: $primary-text-color } + + a { + color: $primary-lighter2-text-color; + + &:hover { color: $primary-text-color } + + &.selected { + color: $active-text-color; + border-bottom-color: $active-text-color; + } + } + } +} + +label { + &[for=user_setting_default_privacy_public], + &[for=user_setting_default_privacy_unlisted] { + color: $active-text-color !important; + } +} + +.column-header__collapsible__extra { + .column-settings__section { color: $primary-text-color } + + .setting-toggle { + .react-toggle { + &.react-toggle--checked { + > .react-toggle-track { background: $setting-toggle-checked-color } + + > .react-toggle-thumb { + border-color: $setting-toggle-checked-color; + background-color: $setting-toggle-thumb-checked-color; + } + } + + > .react-toggle-track { background: $setting-toggle-color } + + > .react-toggle-thumb { + border-color: $setting-toggle-color; + background-color: $setting-toggle-thumb-color; + } + } + + .setting-toggle__label { color: $primary-text-color } + } + + .setting-meta__label { color: $primary-lighter1-text-color } +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/statuses.scss b/app/javascript/styles/gplus-theme-for-mastodon/statuses.scss new file mode 100644 index 000000000..0532a0b90 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/statuses.scss @@ -0,0 +1,107 @@ +@charset "UTF-8"; + +@import 'variables'; +@import 'mixins'; + + + +.status { + @include status-shadow; + border-bottom: 0; + + transition: box-shadow 0.1s 0s ease-out; + + &.light { + .status { + &__relative-time { color: $primary-lighter1-text-color } + &__display-name { + color: $primary-text-color; + + .display-name__account { color: $primary-lighter1-text-color } + } + + &__content { color: $primary-text-color } + } + } + + &.status-direct { + background: $status-direct-color; + + &:not(.read) { + background: inherit; + border-bottom-color: initial; + } + } + + &.muted { + .status__content { + p { color: lighten($primary-text-color, 20%) } + } + } + + .status { + &__info { + .status__display-name { + color: $primary-lighter1-text-color; + + strong { color: $primary-text-color } + } + + .status__relative-time { color: $primary-lighter1-text-color } + } + } +} + +.detailed-status { + .detailed-status { + &__display-name { + color: $secondary-text-color; + + strong { color: $primary-text-color } + } + + &__meta { + .detailed-status__datetime { color: $primary-lighter1-text-color } + + .detailed-status__link { + .fa.fa-star { vertical-align: middle } + } + } + } + + &__wrapper { + @include status-shadow; + + .detailed-status { @extend .detailed-status; } + .detailed-status__action-bar { + background: $status-actionbar-color; + border-color: $base-separation-color; + } + } +} + +.status, +.detailed-status { + background: $status-color; + + .status__content { + color: $primary-text-color; + + a { color: $secondary-text-color } + + .status__content__spoiler-link { + color: $primary-text-color; + background: $base-color; + } + } +} + +a.status-card, +a.status-card.compact { + &:hover { background: initial } +} + +.name-tag, +a.name-tag { + color: $secondary-text-color; +} \ No newline at end of file diff --git a/app/javascript/styles/gplus-theme-for-mastodon/tables.scss b/app/javascript/styles/gplus-theme-for-mastodon/tables.scss new file mode 100644 index 000000000..e71ce7a38 --- /dev/null +++ b/app/javascript/styles/gplus-theme-for-mastodon/tables.scss @@ -0,0 +1,29 @@ +@charset "UTF-8"; + +@import 'variables'; + + + +.table { + thead th { border-bottom-color: $base-separation-color } + + th, + td { + color: $primary-text-color; + background-color: $base-color; + border-top: 0; + } + + & > tbody > tr:nth-child(odd) { + & > td, & > th { background: darken($base-color, 4%) } + } + + a { color: $secondary-text-color } +} + +a.table-action-link, +button.table-action-link { + color: $secondary-text-color; + + &:hover { color: darken($secondary-text-color, 8%) } +} \ No newline at end of file diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb index 59cfbba17..20a609a77 100644 --- a/config/initializers/content_security_policy.rb +++ b/config/initializers/content_security_policy.rb @@ -5,12 +5,14 @@ base_host = Rails.configuration.x.web_domain assets_host = Rails.configuration.action_controller.asset_host assets_host ||= "http#{Rails.configuration.x.use_https ? 's' : ''}://#{base_host}" +google_font_host = "https://fonts.gstatic.com" +gplus_theme_host = "https://raw.githubusercontent.com" Rails.application.config.content_security_policy do |p| p.base_uri :none p.default_src :none p.frame_ancestors :none - p.font_src :self, assets_host + p.font_src :self, assets_host, google_font_host p.img_src :self, :https, :data, :blob, assets_host p.style_src :self, :unsafe_inline, assets_host p.media_src :self, :https, :data, assets_host diff --git a/config/locales/en.yml b/config/locales/en.yml index 786906e2d..7b704f667 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1056,6 +1056,10 @@ en: contrast: Mastodon (High contrast) default: Mastodon (Dark) mastodon-light: Mastodon (Light) + google-plus: Google+ + google-plus-dev: Google+ Dev + dark-google-plus-dev: Dark Google+ Dev + time: formats: default: "%b %d, %Y, %H:%M" diff --git a/config/locales/ja.yml b/config/locales/ja.yml index 1ff5a2b63..65f66fa92 100644 --- a/config/locales/ja.yml +++ b/config/locales/ja.yml @@ -987,6 +987,9 @@ ja: contrast: Mastodon (ハイコントラスト) default: Mastodon (ダーク) mastodon-light: Mastodon (ライト) + google-plus: Google+ + google-plus-dev: Google+ Dev + dark-google-plus-dev: Dark Google+ Dev time: formats: default: "%Y年%m月%d日 %H:%M" diff --git a/config/themes.yml b/config/themes.yml index 9c21c9459..ff2639be1 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -1,3 +1,6 @@ default: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss +google-plus: styles/gplus-theme-for-mastodon.scss +google-plus-dev: styles/gplus-theme-for-mastodon-dev.scss +dark-google-plus-dev: styles/dark-gplus-theme-for-mastodon-dev.scss