diff --git a/app/javascript/styles/mastodon-material-dev.scss b/app/javascript/styles/mastodon-material-dev.scss deleted file mode 100644 index 18935348a..000000000 --- a/app/javascript/styles/mastodon-material-dev.scss +++ /dev/null @@ -1,16 +0,0 @@ -@charset "UTF-8"; - -@import 'application'; -@import 'mastodon-material-dev/account'; -@import 'mastodon-material-dev/basics'; -@import 'mastodon-material-dev/button'; -// @import 'mastodon-material-dev/cards'; -@import 'mastodon-material-dev/columns'; -@import 'mastodon-material-dev/components'; -@import 'mastodon-material-dev/config'; -@import 'mastodon-material-dev/control'; -@import 'mastodon-material-dev/emoji-picker'; -@import 'mastodon-material-dev/icons'; -@import 'mastodon-material-dev/material-icons'; -@import 'mastodon-material-dev/media'; -@import 'mastodon-material-dev/statuses'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/_mixins.scss b/app/javascript/styles/mastodon-material-dev/_mixins.scss deleted file mode 100644 index 798e690e7..000000000 --- a/app/javascript/styles/mastodon-material-dev/_mixins.scss +++ /dev/null @@ -1,23 +0,0 @@ -@charset "UTF-8"; - - -$shadow-color-1: rgba(0,0,0,.2); -$shadow-color-2: rgba(0,0,0,.14); -$shadow-color-3: rgba(0,0,0,.12); - -@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 } -@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 } -@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 } -@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 } -@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 } -@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 } -@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 } -@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 } -@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 } -@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 } -@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 } -@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 } -@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 } -@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 } -@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 } -@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 } diff --git a/app/javascript/styles/mastodon-material-dev/account.scss b/app/javascript/styles/mastodon-material-dev/account.scss deleted file mode 100644 index 46203b7e4..000000000 --- a/app/javascript/styles/mastodon-material-dev/account.scss +++ /dev/null @@ -1,127 +0,0 @@ -@charset "UTF-8"; -@import 'config'; -@import 'mixins'; - -.account { - border-bottom: 1px solid $border-color; - - .account__display-name, - .account__display-name strong { color: $secondary-text-color } - - &__header { - &__bar { - background: $card-background-color; - padding: 8px; - border-bottom: 1px solid $border-color; - - .avatar .account__avatar { border: none } - } - - &__tabs { - padding: 8px; - - &__name { - padding: 8px; - - h1 { - color: $primary-text-color; - - small { color: $secondary-text-color } - } - } - - &__buttons { - .icon-button { - border: none; - border-radius: 50%; - padding: 0; - } - } - } - - &__extra { - margin-top: 0; - - &__links { - color: $secondary-text-color; - padding: 10px 0; - - a { - color: $secondary-text-color; - padding: 4px 12px; - - strong { color: $ui-text-color } - } - } - } - - &__bio { - margin: 0; - - .account__header { - &__content { - color: $primary-text-color; - padding: 8px; - } - - &__fields { - border: 1px solid $border-color; - border-radius: 4px; - - .verified { - border: none; - background: $verified-background-color; - - a, - &__mark { color: $primary-text-color } - } - - dl { - border-bottom: 1px solid $border-color; - - &:first-child .verified { border-radius: 0 } - - &:last-child { border-bottom: 0 } - } - - dt { - color: $primary-text-color; - background: $list-background-inactive-color; - } - - dd { color: $primary-text-color } - } - } - } - } - - &__section-headline { - background: $card-background-color; - border-bottom: 1px solid $border-color; - - a { - padding: 16px 0; - color: $secondary-text-color; - - &.active { - color: $tab-indicator-color; - border-bottom: 4px solid $tab-indicator-color; - - &:before, - &:after { border: none } - - &:focus { background: $tab-indicator-background-focus-color } - } - - &:hover { background: $tab-indicator-background-hover-color } - } - } -} - -.account-role { - padding: 4px 8px; - border-radius: 17px; - color: $ui-text-color; - background-color: $outlined-chip-color; - border: 1px solid $border-color; -} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/basics.scss b/app/javascript/styles/mastodon-material-dev/basics.scss deleted file mode 100644 index fd5abf7a8..000000000 --- a/app/javascript/styles/mastodon-material-dev/basics.scss +++ /dev/null @@ -1,20 +0,0 @@ -@charset "UTF-8"; -@import 'config'; - - -body { - background: $background-color; -} - -::-webkit-scrollbar-thumb { - background: $scroll-bar-thumb-color; - - &:hover { background: $scroll-bar-thumb-hover-color } - &:active { background: $scroll-bar-thumb-active-color } -} - -::-webkit-scrollbar-track, -::-webkit-scrollbar-track:hover, -::-webkit-scrollbar-track:active { - background: transparent !important; -} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/button.scss b/app/javascript/styles/mastodon-material-dev/button.scss deleted file mode 100644 index b1a0b99a3..000000000 --- a/app/javascript/styles/mastodon-material-dev/button.scss +++ /dev/null @@ -1,59 +0,0 @@ -@charset "UTF-8"; -@import 'config'; -@import 'mixins'; - -.icon-button { - color: $icon-button-color; - border-radius: 50%; - - &.active { color: $icon-button-active-color } - - &.disabled { color: $disabled-icon-color } - - &.inverted { - &:hover { - color: $icon-button-hover-color; - background-color: $icon-background-hover-color; - } - } - - &:hover { - color: $icon-button-hover-color; - background-color: $icon-background-hover-color; - } - - &:active, - &:focus { background-color: transparent } -} - -.text-icon-button { - color: $icon-button-color; - border-radius: 50%; - font-size: 12px; - - &:hover { - background-color: $icon-background-hover-color; - } -} - -.button, -.button:active, -.button:focus { - background-color: $contained-button-color; - border-radius: $button-radius; -} - -.button:hover { - @include shadow-2dp; - background-color: $contained-button-hover-color; -} - -.button.logo-button { - background: $contained-button-color; - - &:hover { background: $contained-button-hover-color } - - .button--destructive:hover { background: $contained-button-hover-color } -} - -.button.button--block { margin: 8px 0 } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/cards.scss b/app/javascript/styles/mastodon-material-dev/cards.scss deleted file mode 100644 index 08778d7a8..000000000 --- a/app/javascript/styles/mastodon-material-dev/cards.scss +++ /dev/null @@ -1 +0,0 @@ -{\rtf1} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/color/dark.scss b/app/javascript/styles/mastodon-material-dev/color/dark.scss deleted file mode 100644 index 75759126a..000000000 --- a/app/javascript/styles/mastodon-material-dev/color/dark.scss +++ /dev/null @@ -1,30 +0,0 @@ -@charset "UTF-8"; - - -// Base color -$primary-color: #db4437; -$secondary-color: #ffffff; -$error-color: #d50000; - -// Text color -$ui-text-color: #ffffff; -$secondary-text-color: #80868b; -$info-text-color: #5e5e5e; -$tips-text-color: #ffffff; -$disabled-text-color: #ffffff; -$inverted-text-color: #ffffff; -$link-text-color: #4285f4; - -// Background-color -$background-color: #121212; - -// Icon color -$icon-color: #757575; - -// Button color -$icon-button-color: #757575; -$contained-button-color: #4285f4; - -// Derived color -$top-bar-color: lighten($background-color, 10%); -$search-bar-color: lighten($background-color, 20%); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/color/light.scss b/app/javascript/styles/mastodon-material-dev/color/light.scss deleted file mode 100644 index c2c47545a..000000000 --- a/app/javascript/styles/mastodon-material-dev/color/light.scss +++ /dev/null @@ -1,93 +0,0 @@ -@charset "UTF-8"; - - -// Base color -$primary-color: #4285f4; -$secondary-color: #db4437; -$error-color: #B00020; -$verified-color: #4caf50; - -// Text color -$ui-text-color: #202124; -$ui-inverted-text-color: #ffffff; -$primary-text-color: #000000; -$secondary-text-color: #5f6368; -$section-text-color: $primary-color; -$info-text-color: #5e5e5e; -$tips-text-color: #c0c0c0; -$disabled-text-color: rgba(0,0,0,.54); -$link-text-color: #4285f4; - -// Background-color -$background-color: #ffffff; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($background-color, 6%); -$menu-background-active-color: darken($background-color, 10%); -$card-background-color: $background-color; -$card-background-inactive-color: darken($card-background-color, 6%); -$list-background-color: $background-color; -$list-background-inactive-color: darken($list-background-color, 6%); -$verified-background-color: lighten($verified-color, 20%); - -// Chip color -$contained-chip-color: #e0e0e0; -$contained-chip-hover-color: darken($contained-chip-color, 6%); -$contained-chip-selected-color: darken($contained-chip-color, 12%); -$outlined-chip-color: #ffffff; -$outlined-chip-hover-color: darken($outlined-chip-color, 6%); -$outlined-chip-selected-color: darken($outlined-chip-color, 12%); - -// Badge color -$badge-color: $primary-color; -//$badge-color: $secondary-color; - -// Icon color -$icon-color: #757575; -$icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: darken($background-color, 4%); -$icon-background-active-color: darken($background-color, 8%); -$disabled-icon-color: lighten($icon-color, 16%); -$top-bar-icon-color: $icon-color; -$media-icon-color: transparentize(#ffffff, 0.4); -$media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$control-border-color: $icon-color; - -// Button color -$icon-button-color: $icon-color; -$icon-button-hover-color: $icon-hover-color; -$icon-button-active-color: $primary-color; -$contained-button-color: $primary-color; -$contained-button-hover-color: lighten($contained-button-color, 10%); -$outlined-button-color: $primary-color; -$outlined-button-hover-color: lighten($primary-color, 36%); -$outlined-button-active-color: lighten($primary-color, 30%); -$text-button-color: $primary-color; -$text-button-hover-color: lighten($text-button-color, 36%); -$text-button-focus-color: lighten($text-button-color, 30%); - -// Toggle color -$toggle-thumb-color: #ffffff; -$toggle-track-color: $disabled-icon-color; -$toggle-thumb-active-color: $primary-color; -$toggle-track-active-color: lighten($primary-color, 26%); - -// Border color -$border-color: #dadce0; -$border-active-color: darken($border-color, 30%); - -// Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); -$scroll-bar-thumb-hover-color: darken($background-color, 30%); -$scroll-bar-thumb-active-color: darken($background-color, 38%); - -// App bar color -$top-bar-color: $background-color; -$top-bar-hover-color: $icon-background-hover-color; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; - -// Tab color -$tab-indicator-color: $primary-color; -$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%); -$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/columns.scss b/app/javascript/styles/mastodon-material-dev/columns.scss deleted file mode 100644 index 796382d31..000000000 --- a/app/javascript/styles/mastodon-material-dev/columns.scss +++ /dev/null @@ -1,351 +0,0 @@ -@charset "UTF-8"; -@import 'config'; -@import 'mixins'; - -.column { - @include shadow-1dp; - padding: 0; - margin: 10px 8px; - border-radius: $card-radius; - - &>.scrollable { background: $list-background-color } - - &:last-child { box-shadow: none } -} - -.column-header { - background: $top-bar-color; - border-radius: $bar-radius; - - > button { - padding: 16px 0 16px 16px; - color: $ui-text-color; - } - - &.active { - .column-header__icon { - color: $primary-color; - text-shadow: none; - } - } - - &__icon { - margin-right: 16px; - color: $top-bar-icon-color; - font-size: 20px; - } - - &__buttons { height: 56px } - - &__button { - background: $top-bar-color; - color: $icon-button-color; - margin: 8px 10px; - padding: 10px 12px; - border-radius: 50%; - - &.active { - color: $icon-button-active-color; - background: $icon-background-active-color; - - &:hover { - color: $icon-button-active-color; - background: $icon-background-hover-color; - } - } - - &:hover { - color: $icon-button-hover-color; - background: $icon-background-hover-color; - } - } - - &__setting-btn { - color: $icon-button-color; - - &:hover { - color: $icon-button-hover-color; - background: $icon-background-hover-color; - } - } - - &__setting-arrows { font-size: 16px } - - &__wrapper { - @include shadow-4dp; - border-radius: $bar-radius; - - .announcements { border-top: 1px solid $border-color } - - &.active { - @include shadow-4dp; - - &:before { background: transparent } - } - } - - &__collapsible { - color: $ui-text-color; - border-top: 1px solid $border-color; - - &-inner { - background: $top-bar-color; - padding: 16px; - } - } - - &__back-button { - background: $top-bar-color; - color: $icon-color; - padding: 8px; - margin: auto 0; - border-radius: 50%; - - span { display: none } - } -} - -.column-subheading { - color: $section-text-color; - background: $menu-background-color; - padding: 12px 16px; - border-top: 1px solid $border-color; -} - -.column-link { - color: $ui-text-color; - background: $menu-background-color; - padding: 16px; - border-radius: $nav-drawer-item-radius; - - &:hover { background: $menu-background-hover-color } - - &:active, - &:focus { background: $menu-background-active-color } - - &__icon { - margin-right: 32px; - font-size: 20px; - } -} - -.column-settings { - &__section { - color: $section-text-color; - margin-bottom: 0; - margin-top: 8px; - } -} - -.column-back-button { - @include shadow-4dp; - background: $top-bar-color; - color: $icon-color; - padding: 16px; -} - -.column-inline-form { - padding: 16px 0 16px 16px; - background: $card-background-color; - - .icon-button { margin: 0 16px } -} - -.setting-text { - color: $primary-text-color; - background: $search-bar-color; - border-radius: $bar-radius; - - &::placeholder { color: $tips-text-color } - - &:focus { - @include shadow-1dp; - background: $search-bar-focus-color; - } -} - -.empty-column-indicator { - color: $secondary-text-color; - background: $card-background-color; - font-size: 16px; -} - -.conversation { - border-bottom: 1px solid $border-color; - padding: 12px; - background: $list-background-inactive-color; - - &--unread { - background: $list-background-color; - - .conversation__content__relative-time { color: $info-text-color } - } - - &__unread { background: $primary-color } - - &__avatar { padding: 0 16px 0 0 } - - &__content { - padding: 0; - - &__relative-time { - font-size: 14px; - color: $info-text-color; - } - - &__names, - &__names a { - color: $primary-text-color; - font-size: 16px; - } - } -} - -.muted { - .status__content { - color: $primary-text-color; - - p { color: $primary-text-color } - - a { color: $secondary-text-color } - } -} - -.load-gap { border-bottom: 1px solid $border-color } - -.load-more { - color: $icon-color; - padding: 16px; - - &:hover { background: $menu-background-hover-color } -} - -.getting-started { - background: $background-color; - color: $ui-text-color; - - &__wrapper { - background: $background-color; - height: auto !important; - border-bottom: 1px solid $border-color; - } - - &__footer { - padding: 16px; - - p { - color: $secondary-text-color; - font-size: 12px; - margin-bottom: 16px; - } - - a { color: $ui-text-color } - - p a { color: $link-text-color } - - } -} - -.setting-toggle { - &__label { - color: $ui-text-color; - margin: 8px 8px 8px 14px; - } -} - -.announcements { - background: $background-color; - padding: 0; - - &__container { color: $primary-text-color } - - &__item { - padding: 16px; - font-size: 16px; - - &__unread { background: $badge-color } - } -} - -.reactions-bar { - .emoji-button { - color: $icon-button-color; - font-size: 20px; - - &:hover { color: $icon-button-hover-color } - - &:active { color: $icon-button-active-color } - } - - &__item { - background: $contained-chip-color; - border-radius: 17px; - margin: 2px 4px; - - &.active { - background-color: $contained-chip-selected-color; - .reactions-bar__item__count { color: $ui-text-color } - } - - &__emoji { - width: 24px; - height: 24px; - margin: 4px 0 4px 2px; - } - - &__count { - font-size: 16px; - margin: 0 8px; - color: $secondary-text-color; - } - - &:hover { background: $contained-chip-hover-color } - } -} - -.notification { - &__filter-bar { - background: $top-bar-color; - border-bottom: 1px solid $border-color; - - button { - background: $top-bar-color; - color: $secondary-text-color; - font-size: 16px; - - span { font-size: 14px } - - &.active { - color: $tab-indicator-color; - border-bottom: 4px solid $tab-indicator-color; - - &:before, - &:after { border: none } - - &:focus { background: $tab-indicator-background-focus-color } - } - - &:hover { background: $tab-indicator-background-hover-color } - } - } - - &__message { - color: $secondary-text-color; - margin: 0 16px 0 70px; - font-size: 16px; - } - - &__display-name:hover { color: inherit } -} - -div.notification.notification-favourite.focusable, -div.notification.notification-follow.focusable { background: $list-background-inactive-color } - -.notification-favourite .status.status-direct { background: transparent } - -.relationship-tag { - color: $ui-inverted-text-color; - background-color: $media-icon-background-color; - font-size: 12px; - border-radius: 17px; -} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/components.scss b/app/javascript/styles/mastodon-material-dev/components.scss deleted file mode 100644 index e2a0d6af8..000000000 --- a/app/javascript/styles/mastodon-material-dev/components.scss +++ /dev/null @@ -1,329 +0,0 @@ -@charset "UTF-8"; -@import 'config'; -@import 'mixins'; - - -.drawer { - &__header { - @include shadow-4dp; - background: $top-bar-color; - border-radius: $bar-radius; - justify-content: space-around; - - a { transition: none } - - a:hover { - background: $top-bar-hover-color; - border-radius: 50%; - } - } - - &__tab { - color: $top-bar-icon-color; - font-size: 20px; - margin: 12px auto 12px; - padding: 8px; - flex: none; - height: 16px; - - &:hover { color: $icon-button-hover-color } - } - - &__pager { - @include shadow-1dp; - border-radius: $card-radius; - } - - &__inner { - background: $background-color; - - &.darker { background: $card-background-color } - - &__mastodon { - background: $background-color - } - } -} - -.search { - &__input { - background: $search-bar-color; - color: $tips-text-color; - border-radius: $bar-radius; - padding: 12px 12px 12px 40px; - - &:focus { - @include shadow-2dp; - background: $search-bar-focus-color; - color: $ui-text-color; - } - - &::placeholder { color: $tips-text-color } - } - - &__icon { - .fa { - color: $icon-color; - font-size: 20px; - top: 12px; - right: unset; - left: 12px; - height: 6px; - transition: none; - - &.active { opacity: 1 } - - &-search { - transform: none; - opacity: 1; - } - &-times-circle.active { - right: 10px; - left: unset; - transform: none; - } - } - } -} - -.search-popout { - @include shadow-2dp; - background: $search-bar-focus-color; - border-radius: 0px $bar-radius; - border-top: 1px solid $border-color; - margin-top: 0; - color: $tips-text-color; - - h4 { - color: $secondary-text-color; - } - - em { - color: $ui-text-color; - } -} - -.search-results { - &__header { - color: $secondary-text-color; - background-color: $card-background-color; - padding: 16px; - - .fa { margin-right: 8px } - } - - &__section { - h5 { - background: $card-background-color; - border-bottom: 1px solid $border-color; - padding: 16px; - color: $section-text-color; - - .fa { margin-right: 8px } - } - } -} - -.account__avatar { - border-radius: $avater-radius; - width: 40px; - height: 40px; -} - -.navigation-bar { - color: $secondary-text-color; - - strong { - color: $ui-text-color; - } -} - -.dropdown-menu { - @include shadow-8dp; - background: $menu-background-color; - padding: 8px 0; - border-radius: $menu-radius; - - &__arrow { visibility: hidden } - - &__item a { - font-size: 14px; - padding: 9px 16px; - background: $menu-background-color; - color: $ui-text-color; - - &:hover, &:active { - background: $menu-background-hover-color; - color: $ui-text-color; - } - } - - &__separator { - margin: 8px 0; - border-bottom: 1px solid $border-color; - } -} - -.compose-form { - .autosuggest-textarea__textarea { - background: $background-color; - color: $ui-text-color; - } - - .compose-form { - &__warning { - @include shadow-1dp; - color: $secondary-text-color; - background: $card-background-color; - padding: 16px; - - a { color: $link-text-color } - } - - &__modifiers { - background: $background-color; - color: $tips-text-color; - } - - &__buttons-wrapper { - background: $background-color; - color: $tips-text-color; - } - - &__poll-wrapper { - border-top: 1px solid $border-color; - - ul { padding: 12px } - - select { - color: $ui-text-color; - background-color: $background-color; - border: 0; - - &:focus { border-color: $border-active-color } - } - - .button.button-secondary { - box-shadow: none; - color: $outlined-button-color; - border-color: $outlined-button-color; - - &:hover { background-color: $outlined-button-hover-color } - - &:active { background-color: $outlined-button-active-color } - - &:focus { background-color: $outlined-button-color } - - - } - } - - &__utilBtns { padding-top: 0 } - - &__publish .compose-form__publish-button-wrapper { box-shadow: none } - } -} - -.poll__input { - border: 2px solid $control-border-color; - width: 20px; - height: 20px; - flex: 0 0 20px; -} - -.poll__text input[type=text] { - color: $ui-text-color; - background: $background-color; - border: 1px solid $border-color; - padding: 8px 12px; - - &:focus { border-color: $border-active-color } -} - -.privacy-dropdown { - &.active .privacy-dropdown__value.active { - background: $icon-background-hover-color; - border-radius: 50%; - box-shadow: none; - - .icon-button { color: $icon-button-active-color } - } - - &__dropdown { - @include shadow-8dp; - background: $menu-background-color; - border-radius: $dialog-radius; - } - - &__option { - color: $icon-color; - padding: 8px 16px; - - &__icon { - font-size: 20px; - margin-right: 12px; - } - - &__content { - color: $secondary-text-color; - - strong { color: $ui-text-color } - } - - &.active { - background: $menu-background-active-color; - color: $icon-hover-color; - - .privacy-dropdown__option__content { - color: $secondary-text-color; - - strong { color: $ui-text-color } - } - - &:hover { - background: $menu-background-active-color; - - .privacy-dropdown__option__content { - color: $secondary-text-color; - - strong { color: $ui-text-color } - } - } - } - - &:hover { - background: $menu-background-hover-color; - color: $icon-hover-color; - - .privacy-dropdown__option__content { - color: $secondary-text-color; - - strong { color: $ui-text-color } - } - } - } -} - -.character-counter { - color: $secondary-text-color; -} - -.reply-indicator { - @include shadow-1dp; - border-radius: $card-radius; - background: $card-background-color; - padding: 16px; - - &__header { margin-bottom: 4px } - - &__display { - &-name { - color: $primary-text-color; - padding-right: 24px; - } - - &-avatar { margin-right: 8px } - } - - &__content { color: $primary-text-color } -} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/config.scss b/app/javascript/styles/mastodon-material-dev/config.scss deleted file mode 100644 index 3095407d8..000000000 --- a/app/javascript/styles/mastodon-material-dev/config.scss +++ /dev/null @@ -1,21 +0,0 @@ -@charset "UTF-8"; - - -// Color scheme -@import 'color/light'; - - -// Profile -@import 'profile/material-v1'; - - -// Material Design Icon settings -// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below. -@font-face { - font-family: "Material Icons"; - src: - local("Material Icons"), - //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub - //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts - url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting -} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/control.scss b/app/javascript/styles/mastodon-material-dev/control.scss deleted file mode 100644 index 9048d1228..000000000 --- a/app/javascript/styles/mastodon-material-dev/control.scss +++ /dev/null @@ -1,59 +0,0 @@ -@charset "UTF-8"; -@import 'config'; -@import 'mixins'; - - -.react-toggle { - width: 36px; - height: 16px; - border-radius: 15px; - - &-track { - background-color: $disabled-icon-color; - margin: 4px; - width: 36px; - height: 16px; - - &-check { visibility: hidden } - &-x { visibility: hidden } - } - - &-thumb { - @include shadow-1dp; - width: 20px; - height: 20px; - border: 0; - background-color: $toggle-thumb-color; - } - - &--checked { - .react-toggle{ - &-track { background-color: $toggle-track-active-color } - - &-thumb { - background-color: $toggle-thumb-active-color; - left: 24px; - } - } - - &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important } - - } - - &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color } -} - -.radio-button { - padding: 8px 0; - - &__input { - border: 2px solid $border-color; - - &.checked { - border-color: $icon-button-active-color; - background: $icon-button-active-color; - padding: 3px; - background-clip: content-box; - } - } -} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/emoji-picker.scss b/app/javascript/styles/mastodon-material-dev/emoji-picker.scss deleted file mode 100644 index d5eada557..000000000 --- a/app/javascript/styles/mastodon-material-dev/emoji-picker.scss +++ /dev/null @@ -1,88 +0,0 @@ -@charset "UTF-8"; -@import 'config'; -@import 'mixins'; - -.emoji-picker-dropdown { - &__menu { - @include shadow-8dp; - background: $menu-background-color; - border-radius: $menu-radius; - } - - &__modifiers__menu { - @include shadow-8dp; - background: $menu-background-color; - border-radius: $menu-radius; - - button { - padding: 8px; - } - } -} - -.emoji-mart { - width: 388px !important; - font-size: 14px; - color: $ui-text-color; - - &-bar { - border: 0 solid $border-color; - - &:first-child { - background: $menu-background-color; - } - } - - &-anchors { - color: $icon-button-color; - padding: 0; - } - - &-anchor { - padding: 10px 4px; - - &-selected { - color: $icon-button-active-color; - } - - &-bar { - background-color: $tab-indicator-color; - } - - &:hover { - color: $icon-button-hover-color; - } - } - - &-search { - background: $menu-background-color; - - input { - outline: none; - padding: 8px; - background: $search-bar-color; - color: $ui-text-color; - border: 0; - border-radius: $bar-radius; - - &:focus { - @include shadow-2dp; - background: $search-bar-focus-color; - } - } - } - - &-scroll { - padding: 0 8px 8px; - background: $menu-background-color; - } - - &-category-label span { - padding: 4px 6px; - background: $menu-background-color; - } - - &-emoji:hover:before { - background-color: $icon-background-hover-color; - } -} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/icons.scss b/app/javascript/styles/mastodon-material-dev/icons.scss deleted file mode 100644 index d4cc4ebff..000000000 --- a/app/javascript/styles/mastodon-material-dev/icons.scss +++ /dev/null @@ -1,36 +0,0 @@ -@charset "UTF-8"; -@import 'config'; -@import 'mixins'; - -.fa.fa-users.column-link, -.fa.fa-globe.column-link, -.fa.fa-address-book.column-link, -.fa.fa-bullhorn.column-link, -.fa.fa-envelope.column-link, -.fa.fa-bookmark.column-link, -.fa.fa-star.column-link, -.fa.fa-list-ul.column-link { - &__icon.fa-fw { color: $icon-color } -} - - -.fa { vertical-align: sub } //マテリアルアイコンを文字の高さにそろえる - -.fa.fa-times, -.fa.fa-eraser { vertical-align: middle } //↑の例外 - -.fa.fa-lock { text-transform: none } - -.fa-fw { width: 16px } - -.fa.fa-chevron-left.column-back-button__icon.fa-fw { - font-size: 20px; - margin-right: 16px; -} - -.icon-with-badge__badge { - background: $badge-color; - border: none; - padding: 2px 6px; - border-radius: 12px; -} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/material-icons.scss b/app/javascript/styles/mastodon-material-dev/material-icons.scss deleted file mode 100644 index d7c8fcbd7..000000000 --- a/app/javascript/styles/mastodon-material-dev/material-icons.scss +++ /dev/null @@ -1,88 +0,0 @@ -@charset "UTF-8"; -@import 'config'; - - -.fa { - &.fa-bars, - &.fa-navicon, - &.fa-reorder, - &.fa-globe, - &.fa-cog, - &.fa-cogs, - &.fa-gears, - &.fa-sign-out, - &.fa-search, - &.fa-times, - &.fa-times-circle, - &.fa-close, - &.fa-remove, - &.fa-chevron-down, - &.fa-ellipsis-v, - &.fa-paperclip, - &.fa-tasks, - &.fa-plus, - &.fa-unlock, - &.fa-lock, - &.fa-envelope, - &.fa-home, - &.fa-bullhorn, - &.fa-sliders, - &.fa-chevron-left, - &.fa-chevron-right, - &.fa-reply, - &.fa-reply-all, - &.fa-star, - &.fa-bookmark, - &.fa-ellipsis-h, - &.fa-bell, - &.fa-eraser, - &.fa-users, - &.fa-file-text, - &.fa-user-plus, - &.fa-address-book, - &.fa-list, - &.fa-list-ul, - &.fa-eye, - &.fa-eye-slash, - &.fa-pencil, - &.fa-trash { - font-family: "Material Icons"; - } -} - -.fa { - &.fa-bars:before, &.fa-navicon:before,&.fa-reorder:before { content: "menu" } - &.fa-globe:before { content: "public" } - &.fa-cog:before, &.fa-cogs:before, &.fa-gears:before { content: "settings" } - &.fa-sign-out:before { content: "exit_to_app" } - &.fa-search:before { content: "search" } - &.fa-times:before, &.fa-times-circle:before, &.fa-close:before, &.fa-remove:before { content: "close" } - &.fa-chevron-down:before, &.fa-ellipsis-v:before { content: "more_vert" } - &.fa-paperclip:before { content: "attach_file" } - &.fa-tasks:before { content: "poll" } - &.fa-plus:before { content: "add" } - &.fa-unlock:before { content: "lock_open" } - &.fa-lock:before { content: "lock" } - &.fa-envelope:before { content: "mail" } - &.fa-home:before { content: "home" } - &.fa-bullhorn:before { content: "announcement" } - &.fa-sliders:before { content: "tune" } - &.fa-chevron-left:before { content: "arrow_back" } - &.fa-chevron-right:before { content: "arrow_forward" } - &.fa-reply:before { content: "reply" } - &.fa-reply-all:before { content: "reply_all" } - &.fa-bookmark:before { content: "bookmark" } - &.fa-ellipsis-h:before { content: "more_horiz" } - &.fa-bell:before { content: "notifications" } - &.fa-eraser:before { content: "clear_all" } - &.fa-users:before { content: "people" } - &.fa-file-text:before { content: "web" } - &.fa-user-plus:before { content: "person_add" } - &.fa-address-book:before { content: "explore" } - &.fa-list:before { content: "list" } - &.fa-list-ul:before { content: "list" } - &.fa-eye:before { content: "visibility" } - &.fa-eye-slash:before { content : "visibility_off" } - &.fa-pencil:before { content: "create" } - &.fa-trash:before { content: "delete" } -} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/media.scss b/app/javascript/styles/mastodon-material-dev/media.scss deleted file mode 100644 index 14b43d4ea..000000000 --- a/app/javascript/styles/mastodon-material-dev/media.scss +++ /dev/null @@ -1,17 +0,0 @@ -@charset "UTF-8"; -@import 'config'; -@import 'mixins'; - - -.media-gallery { border-radius: $card-radius } - -.icon-button.overlayed { - border-radius: 50%; - background: $media-icon-background-color; - color: $media-icon-color; - - &:hover { - background: $media-icon-background-color; - color: $media-icon-hover-color; - } -} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/mobile.scss b/app/javascript/styles/mastodon-material-dev/mobile.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/app/javascript/styles/mastodon-material-dev/profile/material-v1.scss b/app/javascript/styles/mastodon-material-dev/profile/material-v1.scss deleted file mode 100644 index b18ec1b72..000000000 --- a/app/javascript/styles/mastodon-material-dev/profile/material-v1.scss +++ /dev/null @@ -1,52 +0,0 @@ -@charset "UTF-8"; -@import '../mixins'; - - -// Bar radius settings -$bar-radius: 2px; - - -// Button radius settings -$button-radius: 2px; - - -// Card radius settings -$card-radius: 2px; - - -// Dialog radius settings -$dialog-radius: 2px; - - -// Menu radius settings -$menu-radius: 2px; - - -// Navigation drawer item settings -$nav-drawer-item-radius: 0; - - -// Avater cropping settings -$avater-radius: 50%; // Rounded cropping -//$avater-radius: 2px // Material v1 square - - -// Favorite icon settings -.fa { - &.fa-star:before { content: "star" } // Star - //&.fa-star:before { content: "favorite" } // Heart - //&.fa-star:before { content: "plus_one" } // +1 -} - -.star-icon.active, -.notification__favourite-icon-wrapper .star-icon { - color: #ffd600; // Star - //color: #ff4081; // Heart - //color: #db4437; // +1 -} - - -// Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/profile/material-v2.scss b/app/javascript/styles/mastodon-material-dev/profile/material-v2.scss deleted file mode 100644 index 3e19b60e4..000000000 --- a/app/javascript/styles/mastodon-material-dev/profile/material-v2.scss +++ /dev/null @@ -1,66 +0,0 @@ -@charset "UTF-8"; -@import '../mixins'; - - -// Bar radius settings -$bar-radius: 8px; - - -// Button radius settings -$button-radius: 8px; - - -// Card radius settings -$card-radius: 8px; - - -// Dialog radius settings -$dialog-radius: 8px; - - -// Menu radius settings -$menu-radius: 8px; - - -// Navigation drawer item settings -$nav-drawer-item-radius: 8px; // corner rounded -//$nav-drawer-item-radius: 32px; // full rounded -//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded - - -// Avater cropping settings -$avater-radius: 50%; // Rounded cropping -//$avater-radius: 8px // Material v2 square - - -// Favorite icon settings -.fa { - &.fa-star:before { content: "star" } // Star - //&.fa-star:before { content: "favorite" } // Heart - //&.fa-star:before { content: "plus_one" } // +1 -} - -.star-icon.active, -.notification__favourite-icon-wrapper .star-icon { - color: #ffd600; // Star - //color: #ff4081; // Heart - //color: #db4437; // +1 -} - - -// Chip settings -// If you want to use contained-chip, please comment out below. -.reactions-bar__item { - background: $outlined-chip-color !important; - border: 1px solid $border-color !important; - - &.active { background-color: $outlined-chip-selected-color !important } - - &:hover { background: $outlined-chip-hover-color !important } -} - - -// Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dev/statuses.scss b/app/javascript/styles/mastodon-material-dev/statuses.scss deleted file mode 100644 index 5f1da722f..000000000 --- a/app/javascript/styles/mastodon-material-dev/statuses.scss +++ /dev/null @@ -1,135 +0,0 @@ -@charset "UTF-8"; -@import 'config'; -@import 'mixins'; - - -.status { - padding: 12px 12px 12px 70px; - border-bottom: 1px solid $border-color; - - &__expand { width: 70px } - - &__info { font-size: 16px } - - &__relative-time { color: $info-text-color } - - &__display-name { - color: $secondary-text-color; - - strong { color: $primary-text-color } - } - - &__avatar { - left: 12px; - top: 12px; - } - - &__content { - font-size: 16px; - padding-top: 4px; - color: $primary-text-color; - - a { - color: $link-text-color; - - &.unhandled-link { color: $link-text-color } - } - - .status__content__spoiler-link { - background: transparent; - - &:hover { background: $text-button-hover-color } - - &:focus { background: $text-button-focus-color } - } - - &__spoiler-link { - border: 0; - color: $text-button-color; - } - - &__read-more-button { - font-size: 14px; - color: $text-button-color; - border-radius: $button-radius; - padding: 4px 6px; - - &:hover { - background: $text-button-hover-color; - text-decoration: none; - } - - &:focus { background: $text-button-focus-color } - } - } - - &__action-bar { - &__counter__label { - font-size: 14px; - color: $info-text-color; - } - } - - &.status-direct:not(.read) { - background: transparent; - border-bottom-color: $border-color; - } -} - -.status-card { - color: $icon-color; - border-color: $border-color; - outline: none; - - &__image { - background: $card-background-color; - - &>.fa { - font-size: 26px; - } - } - - &__title { - color: $primary-text-color; - margin-bottom: 6px; - } - &.compact { - border-color: $border-color; - outline: none; - .status-card { - &__content { padding: 12px } - &__image { flex: 0 0 64px } - } - - &:hover { background-color: $card-background-color !important } - } - - &:hover { background-color: $card-background-color } -} - -.detailed-status { - background: $card-background-color; - padding: 16px; - - &__display-name { - color: $secondary-text-color; - - strong { color: $primary-text-color } - } - - &__meta { - margin-top: 16px; - color: $info-text-color; - } - - &__action-bar { - background: $card-background-color; - border-top: none; - border-bottom: 1px solid $border-color; - padding: 12px 0; - } - - &__button { - .icon-button { font-size: 20px !important } - } -} \ No newline at end of file diff --git a/app/javascript/styles/material-v1-dark.scss b/app/javascript/styles/material-v1-dark.scss index b1646b3df..98d8aaf28 100644 --- a/app/javascript/styles/material-v1-dark.scss +++ b/app/javascript/styles/material-v1-dark.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -//@import 'application'; +@import 'application'; @import 'material-v1-dark/account'; @import 'material-v1-dark/basics'; @import 'material-v1-dark/button'; diff --git a/app/javascript/styles/material-v1-light.scss b/app/javascript/styles/material-v1-light.scss index c75295e71..8668288e4 100644 --- a/app/javascript/styles/material-v1-light.scss +++ b/app/javascript/styles/material-v1-light.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -//@import 'application'; +@import 'application'; @import 'material-v1-light/account'; @import 'material-v1-light/basics'; @import 'material-v1-light/button'; diff --git a/app/javascript/styles/material-v2-dark.scss b/app/javascript/styles/material-v2-dark.scss index 04d5e399b..351cf8a73 100644 --- a/app/javascript/styles/material-v2-dark.scss +++ b/app/javascript/styles/material-v2-dark.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -//@import 'application'; +@import 'application'; @import 'material-v2-dark/account'; @import 'material-v2-dark/basics'; @import 'material-v2-dark/button'; diff --git a/app/javascript/styles/material-v2-light.scss b/app/javascript/styles/material-v2-light.scss index 51e5eabd4..3c7ccb250 100644 --- a/app/javascript/styles/material-v2-light.scss +++ b/app/javascript/styles/material-v2-light.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -//@import 'application'; +@import 'application'; @import 'material-v2-light/account'; @import 'material-v2-light/basics'; @import 'material-v2-light/button';