This repository has been archived by the owner on Dec 30, 2022. It is now read-only.
forked from mastodon/mastodon
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'features/material-theme' into features/mild-master
- Loading branch information
Showing
21 changed files
with
1,612 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| @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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| @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 } |
127 changes: 127 additions & 0 deletions
127
app/javascript/styles/mastodon-material-dev/account.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| @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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| @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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| @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 } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {\rtf1} |
30 changes: 30 additions & 0 deletions
30
app/javascript/styles/mastodon-material-dev/color/dark.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| @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%); |
93 changes: 93 additions & 0 deletions
93
app/javascript/styles/mastodon-material-dev/color/light.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| @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%); |
Oops, something went wrong.