diff --git a/styles/boost.scss b/styles/boost.scss
new file mode 100644
index 0000000..67f9a85
--- /dev/null
+++ b/styles/boost.scss
@@ -0,0 +1,61 @@
+@function hex-color($color) {
+ @if type-of($color) == 'color' {
+ $color: str-slice(ie-hex-str($color), 4);
+ }
+ @return '%23' + unquote($color)
+}
+
+@mixin boost-svg($color) {
+ background-image: url("data:image/svg+xml;utf8,");
+}
+
+@mixin boost-locked-svg($color) {
+ background-image: url("data:image/svg+xml;utf8,");
+}
+
+@mixin boost-svg-single($color) {
+ background-image: url("data:image/svg+xml;utf8,");
+}
+
+@mixin boost-locked-svg-single($color) {
+ background-image: url("data:image/svg+xml;utf8,");
+}
+
+@mixin envelope($color) {
+ background-image: url("data:image/svg+xml;utf8,");
+}
+
+button.icon-button i.fa-retweet {
+ @include boost-svg-single($ui-base-lighter-color);
+}
+
+.status-private button.icon-button i.fa-retweet {
+ @include boost-locked-svg-single($ui-base-lighter-color);
+}
+
+// Disabled variant
+button.icon-button.disabled i.fa-retweet {
+ @include boost-locked-svg-single(lighten($ui-base-color, 13%));
+}
+
+// Disabled variant for use with DMs
+.status-direct button.icon-button.disabled i.fa-retweet {
+ @include envelope(lighten($ui-base-color, 16%));
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+
+.no-reduce-motion button.icon-button i.fa-retweet {
+ transition: none;
+ background-position: 0px 684px;
+}
+
+.no-reduce-motion button.icon-button.active i.fa-retweet {
+ @include boost-svg($ui-highlight-color);
+ transition: background-position 0.6s steps(36);
+ background-size: 22px 684px;
+ background-position: 0px 0px;
+}
+.no-reduce-motion .status-private button.icon-button.active i.fa-retweet {
+ @include boost-locked-svg($ui-highlight-color);
+}
diff --git a/styles/coffee-dark.scss b/styles/coffee-dark.scss
new file mode 100644
index 0000000..60bf96f
--- /dev/null
+++ b/styles/coffee-dark.scss
@@ -0,0 +1,7 @@
+@import 'coffee-dark/variables';
+@import 'application';
+@import 'coffee-dark/diff';
+//@import 'boost';
+//@import 'mods/display_breakname';
+//@import 'mods/display_fullname';
+@import 'mods/display_circleavatar';
diff --git a/styles/coffee-dark/diff.scss b/styles/coffee-dark/diff.scss
new file mode 100644
index 0000000..b612b87
--- /dev/null
+++ b/styles/coffee-dark/diff.scss
@@ -0,0 +1,77 @@
+// components.scss
+.compose-form {
+ .compose-form__modifiers {
+ .compose-form__upload {
+ &-description {
+ input {
+ &::placeholder {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+}
+
+.rich-formatting a,
+.rich-formatting p a,
+.rich-formatting li a,
+.landing-page__short-description p a,
+.status__content a,
+.reply-indicator__content a {
+ color: lighten($ui-highlight-color, 12%);
+ text-decoration: none;
+
+ &.mention {
+ text-decoration: none;
+ }
+
+ &.mention span {
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+
+ &.status__content__spoiler-link {
+ color: $secondary-text-color;
+ text-decoration: none;
+ }
+}
+
+.status__content__read-more-button {
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+}
+
+.getting-started__footer a {
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+}
+
+.nothing-here {
+ color: $darker-text-color;
+}
+
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
+ border-bottom: 4px solid $ui-highlight-color;
+}
diff --git a/styles/coffee-dark/variables.scss b/styles/coffee-dark/variables.scss
new file mode 100644
index 0000000..1a3d38b
--- /dev/null
+++ b/styles/coffee-dark/variables.scss
@@ -0,0 +1,56 @@
+// Commonly used web colors
+$black: #000000; // Black
+$white: #ffffff; // White
+$success-green: #79bd9a !default; // Padua
+$error-red: #df405a !default; // Cerise
+$warning-red: #ff5050 !default; // Sunset Orange
+$gold-star: #ca8f04 !default; // Dark Goldenrod
+
+$red-bookmark: $warning-red;
+
+// Values from the classic Mastodon UI
+$classic-base-color: #282c37; // Midnight Express
+$classic-primary-color: #9baec8; // Echo Blue
+$classic-secondary-color: #d9e1e8; // Pattens Blue
+$classic-highlight-color: #e7b01c; // Summer Sky
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default; // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default; // Lighter
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 415px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
diff --git a/styles/coffee-light.scss b/styles/coffee-light.scss
new file mode 100644
index 0000000..118721f
--- /dev/null
+++ b/styles/coffee-light.scss
@@ -0,0 +1,6 @@
+@import 'coffee-light/variables';
+@import 'application';
+@import 'coffee-light/diff';
+//@import 'boost';
+//@import 'mods/display_fullname';
+@import 'mods/display_circleavatar';
diff --git a/styles/coffee-light/diff.scss b/styles/coffee-light/diff.scss
new file mode 100644
index 0000000..7a846bc
--- /dev/null
+++ b/styles/coffee-light/diff.scss
@@ -0,0 +1,776 @@
+// Notes!
+// Sass color functions, "darken" and "lighten" are automatically replaced.
+
+html {
+ scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
+}
+
+// Change the colors of button texts
+.button {
+ color: $white;
+
+ &.button-alternative-2 {
+ color: $white;
+ }
+}
+
+.status-card__actions button,
+.status-card__actions a {
+ color: rgba($white, 0.8);
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $white;
+ }
+}
+
+// Change default background colors of columns
+.column > .scrollable,
+.getting-started,
+.column-inline-form,
+.error-column,
+.regeneration-indicator {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+}
+
+.directory__card__img {
+ background: lighten($ui-base-color, 12%);
+}
+
+.filter-form,
+.directory__card__bar {
+ background: $white;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+}
+
+.scrollable .directory__list {
+ width: calc(100% + 2px);
+ margin-left: -1px;
+ margin-right: -1px;
+}
+
+.directory__card,
+.table-of-contents {
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.column-back-button,
+.column-header {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ }
+
+ &--slim-button {
+ top: -50px;
+ right: 0;
+ }
+}
+
+.column-header__back-button,
+.column-header__button,
+.column-header__button.active,
+.account__header__bar,
+.directory__card__extra {
+ background: $white;
+}
+
+.column-header__button.active {
+ color: $ui-highlight-color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $ui-highlight-color;
+ background: $white;
+ }
+}
+
+.account__header__bar .avatar .account__avatar {
+ border-color: $white;
+}
+
+.getting-started__footer a {
+ color: $ui-secondary-color;
+ text-decoration: underline;
+}
+
+.confirmation-modal__secondary-button,
+.confirmation-modal__cancel-button,
+.mute-modal__cancel-button,
+.block-modal__cancel-button {
+ color: lighten($ui-base-color, 26%);
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: $primary-text-color;
+ }
+}
+
+.column-subheading {
+ background: darken($ui-base-color, 4%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+}
+
+.getting-started,
+.scrollable {
+ .column-link {
+ background: $white;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: $ui-base-color;
+ }
+ }
+}
+
+.getting-started .navigation-bar {
+ border-top: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ }
+}
+
+.compose-form__autosuggest-wrapper,
+.poll__option input[type="text"],
+.compose-form .spoiler-input__input,
+.compose-form__poll-wrapper select,
+.search__input,
+.setting-text,
+.box-widget input[type="text"],
+.box-widget input[type="email"],
+.box-widget input[type="password"],
+.box-widget textarea,
+.statuses-grid .detailed-status,
+.audio-player {
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.search__input {
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ border-bottom: 0;
+ }
+}
+
+.list-editor .search .search__input {
+ border-top: 0;
+ border-bottom: 0;
+}
+
+.compose-form__poll-wrapper select {
+ background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px;
+}
+
+.compose-form__poll-wrapper,
+.compose-form__poll-wrapper .poll__footer {
+ border-top-color: lighten($ui-base-color, 8%);
+}
+
+.notification__filter-bar {
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+}
+
+.compose-form .compose-form__buttons-wrapper {
+ background: $ui-base-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+}
+
+.drawer__header,
+.drawer__inner {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.drawer__inner__mastodon {
+ background: $white url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto;
+}
+
+// Change the colors used in compose-form
+.compose-form {
+ .compose-form__modifiers {
+ .compose-form__upload__actions .icon-button {
+ color: lighten($white, 7%);
+
+ &:active,
+ &:focus,
+ &:hover {
+ color: $white;
+ }
+ }
+
+ .compose-form__upload-description input {
+ color: lighten($white, 7%);
+
+ &::placeholder {
+ color: lighten($white, 7%);
+ }
+ }
+ }
+
+ .compose-form__buttons-wrapper {
+ background: darken($ui-base-color, 6%);
+ }
+
+ .autosuggest-textarea__suggestions {
+ background: darken($ui-base-color, 6%);
+ }
+
+ .autosuggest-textarea__suggestions__item {
+ &:hover,
+ &:focus,
+ &:active,
+ &.selected {
+ background: lighten($ui-base-color, 4%);
+ }
+ }
+}
+
+.emoji-mart-bar {
+ border-color: lighten($ui-base-color, 4%);
+
+ &:first-child {
+ background: darken($ui-base-color, 6%);
+ }
+}
+
+.emoji-mart-search input {
+ background: rgba($ui-base-color, 0.3);
+ border-color: $ui-base-color;
+}
+
+// Change the background colors of statuses
+.focusable:focus {
+ background: $ui-base-color;
+}
+
+.status.status-direct {
+ background: lighten($ui-base-color, 4%);
+}
+
+.focusable:focus .status.status-direct {
+ background: lighten($ui-base-color, 8%);
+}
+
+.detailed-status,
+.detailed-status__action-bar {
+ background: $white;
+}
+
+// Change the background colors of status__content__spoiler-link
+.reply-indicator__content .status__content__spoiler-link,
+.status__content .status__content__spoiler-link {
+ background: $ui-base-color;
+
+ &:hover {
+ background: lighten($ui-base-color, 4%);
+ }
+}
+
+// Change the background colors of media and video spoilers
+.media-spoiler,
+.video-player__spoiler {
+ background: $ui-base-color;
+}
+
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
+ color: $white;
+}
+
+.account-gallery__item a {
+ background-color: $ui-base-color;
+}
+
+// Change the colors used in the dropdown menu
+.dropdown-menu {
+ background: $white;
+
+ &__arrow {
+ &.left {
+ border-left-color: $white;
+ }
+
+ &.top {
+ border-top-color: $white;
+ }
+
+ &.bottom {
+ border-bottom-color: $white;
+ }
+
+ &.right {
+ border-right-color: $white;
+ }
+ }
+
+ &__item {
+ a {
+ background: $white;
+ color: $darker-text-color;
+ }
+ }
+}
+
+// Change the text colors on inverted background
+.privacy-dropdown__option.active,
+.privacy-dropdown__option:hover,
+.privacy-dropdown__option.active .privacy-dropdown__option__content,
+.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
+.privacy-dropdown__option:hover .privacy-dropdown__option__content,
+.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
+.dropdown-menu__item a:active,
+.dropdown-menu__item a:focus,
+.dropdown-menu__item a:hover,
+.actions-modal ul li:not(:empty) a.active,
+.actions-modal ul li:not(:empty) a.active button,
+.actions-modal ul li:not(:empty) a:active,
+.actions-modal ul li:not(:empty) a:active button,
+.actions-modal ul li:not(:empty) a:focus,
+.actions-modal ul li:not(:empty) a:focus button,
+.actions-modal ul li:not(:empty) a:hover,
+.actions-modal ul li:not(:empty) a:hover button,
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
+.simple_form .block-button,
+.simple_form .button,
+.simple_form button {
+ color: $white;
+}
+
+.dropdown-menu__separator {
+ border-bottom-color: lighten($ui-base-color, 4%);
+}
+
+// Change the background colors of modals
+.actions-modal,
+.boost-modal,
+.confirmation-modal,
+.mute-modal,
+.block-modal,
+.report-modal,
+.embed-modal,
+.error-modal,
+.onboarding-modal,
+.report-modal__comment .setting-text__wrapper,
+.report-modal__comment .setting-text {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.report-modal__comment {
+ border-right-color: lighten($ui-base-color, 8%);
+}
+
+.report-modal__container {
+ border-top-color: lighten($ui-base-color, 8%);
+}
+
+.column-header__collapsible-inner {
+ background: darken($ui-base-color, 4%);
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+}
+
+.focal-point__preview strong {
+ color: $white;
+}
+
+.boost-modal__action-bar,
+.confirmation-modal__action-bar,
+.mute-modal__action-bar,
+.block-modal__action-bar,
+.onboarding-modal__paginator,
+.error-modal__footer {
+ background: darken($ui-base-color, 6%);
+
+ .onboarding-modal__nav,
+ .error-modal__nav {
+ &:hover,
+ &:focus,
+ &:active {
+ background-color: darken($ui-base-color, 12%);
+ }
+ }
+}
+
+.display-case__case {
+ background: $white;
+}
+
+.embed-modal .embed-modal__container .embed-modal__html {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ &:focus {
+ border-color: lighten($ui-base-color, 12%);
+ background: $white;
+ }
+}
+
+.react-toggle-track {
+ background: $ui-secondary-color;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+ background: darken($ui-secondary-color, 10%);
+}
+
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+ background: lighten($ui-highlight-color, 10%);
+}
+
+// Change the default color used for the text in an empty column or on the error column
+.empty-column-indicator,
+.error-column {
+ color: $primary-text-color;
+ background: $white;
+}
+
+.tabs-bar {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 0;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ }
+
+ &__link {
+ padding-bottom: 14px;
+ border-bottom-width: 1px;
+ border-bottom-color: lighten($ui-base-color, 8%);
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: $ui-base-color;
+ }
+
+ &.active {
+ &:hover,
+ &:active,
+ &:focus {
+ background: transparent;
+ border-bottom-color: $ui-highlight-color;
+ }
+ }
+ }
+}
+
+// Change the default colors used on some parts of the profile pages
+.activity-stream-tabs {
+ background: $account-background-color;
+ border-bottom-color: lighten($ui-base-color, 8%);
+}
+
+.box-widget,
+.nothing-here,
+.page-header,
+.directory__tag > a,
+.directory__tag > div,
+.landing-page__call-to-action,
+.contact-widget,
+.landing .hero-widget__text,
+.landing-page__information.contact-widget {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-left: 0;
+ border-right: 0;
+ border-top: 0;
+ }
+}
+
+.landing .hero-widget__text {
+ border-top: 0;
+ border-bottom: 0;
+}
+
+.simple_form {
+ input[type=text],
+ input[type=number],
+ input[type=email],
+ input[type=password],
+ textarea {
+ &:hover {
+ border-color: lighten($ui-base-color, 12%);
+ }
+ }
+}
+
+.landing .hero-widget__footer {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border: 0;
+ }
+}
+
+.brand__tagline {
+ color: $ui-secondary-color;
+}
+
+.directory__tag > a {
+ &:hover,
+ &:active,
+ &:focus {
+ background: $ui-base-color;
+ }
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border: 0;
+ }
+}
+
+.directory__tag.active > a,
+.directory__tag.active > div {
+ border-color: $ui-highlight-color;
+
+ &,
+ h4,
+ h4 small,
+ .fa,
+ .trends__item__current {
+ color: $white;
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: $ui-highlight-color;
+ }
+}
+
+.batch-table {
+ &__toolbar,
+ &__row,
+ .nothing-here {
+ border-color: lighten($ui-base-color, 8%);
+ }
+}
+
+.activity-stream {
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ &--under-tabs {
+ border-top: 0;
+ }
+
+ .entry {
+ background: $account-background-color;
+
+ .detailed-status.light,
+ .more.light,
+ .status.light {
+ border-bottom-color: lighten($ui-base-color, 8%);
+ }
+ }
+
+ .status.light {
+ .status__content {
+ color: $primary-text-color;
+ }
+
+ .display-name {
+ strong {
+ color: $primary-text-color;
+ }
+ }
+ }
+}
+
+.accounts-grid {
+ .account-grid-card {
+ .controls {
+ .icon-button {
+ color: $darker-text-color;
+ }
+ }
+
+ .name {
+ a {
+ color: $primary-text-color;
+ }
+ }
+
+ .username {
+ color: $darker-text-color;
+ }
+
+ .account__header__content {
+ color: $primary-text-color;
+ }
+ }
+}
+
+.simple_form,
+.table-form {
+ .warning {
+ box-shadow: none;
+ background: rgba($error-red, 0.5);
+ text-shadow: none;
+ }
+
+ .recommended {
+ border-color: $ui-highlight-color;
+ color: $ui-highlight-color;
+ background-color: rgba($ui-highlight-color, 0.1);
+ }
+}
+
+.compose-form .compose-form__warning {
+ border-color: $ui-highlight-color;
+ background-color: rgba($ui-highlight-color, 0.1);
+
+ &,
+ a {
+ color: $ui-highlight-color;
+ }
+}
+
+.status__content,
+.reply-indicator__content {
+ a {
+ color: $highlight-text-color;
+ }
+}
+
+.button.logo-button {
+ color: $white;
+
+ svg {
+ fill: $white;
+ }
+}
+
+.public-layout {
+ .account__section-headline {
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ }
+ }
+
+ .header,
+ .public-account-header,
+ .public-account-bio {
+ box-shadow: none;
+ }
+
+ .public-account-bio,
+ .hero-widget__text {
+ background: $account-background-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+ }
+
+ .header {
+ background: $ui-base-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border: 0;
+ }
+
+ .brand {
+ &:hover,
+ &:focus,
+ &:active {
+ background: lighten($ui-base-color, 4%);
+ }
+ }
+ }
+
+ .public-account-header {
+ &__image {
+ background: lighten($ui-base-color, 12%);
+
+ &::after {
+ box-shadow: none;
+ }
+ }
+
+ &__bar {
+ &::before {
+ background: $account-background-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+ }
+
+ .avatar img {
+ border-color: $account-background-color;
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ background: $account-background-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+ }
+ }
+
+ &__tabs {
+ &__name {
+ h1,
+ h1 small {
+ color: $white;
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ color: $primary-text-color;
+ }
+ }
+ }
+ }
+
+ &__extra {
+ .public-account-bio {
+ border: 0;
+ }
+
+ .public-account-bio .account__header__fields {
+ border-color: lighten($ui-base-color, 8%);
+ }
+ }
+ }
+}
+
+.notification__filter-bar button.active::after,
+.account__section-headline a.active::after {
+ border-color: transparent transparent $white;
+}
+
+.hero-widget,
+.box-widget,
+.contact-widget,
+.landing-page__information.contact-widget,
+.moved-account-widget,
+.memoriam-widget,
+.activity-stream,
+.nothing-here,
+.directory__tag > a,
+.directory__tag > div,
+.card > a,
+.page-header,
+.compose-form .compose-form__warning {
+ box-shadow: none;
+}
+
+.audio-player .video-player__controls button,
+.audio-player .video-player__time-sep,
+.audio-player .video-player__time-current,
+.audio-player .video-player__time-total {
+ color: $primary-text-color;
+}
diff --git a/styles/coffee-light/variables.scss b/styles/coffee-light/variables.scss
new file mode 100644
index 0000000..5faae83
--- /dev/null
+++ b/styles/coffee-light/variables.scss
@@ -0,0 +1,41 @@
+// Dependent colors
+$black: #000000;
+$white: #ffffff;
+
+$classic-base-color: #282c37;
+$classic-primary-color: #9baec8;
+$classic-secondary-color: #d9e1e8;
+$classic-highlight-color: #e7b01c;
+
+// Differences
+$success-green: lighten(#3c754d, 8%);
+
+$base-overlay-background: $white !default;
+$valid-value-color: $success-green !default;
+
+$ui-base-color: $classic-secondary-color !default;
+$ui-base-lighter-color: #b0c0cf;
+$ui-primary-color: #9bcbed;
+$ui-secondary-color: $classic-base-color !default;
+$ui-highlight-color: #e7b01c;
+
+$primary-text-color: $black !default;
+$darker-text-color: $classic-base-color !default;
+$dark-text-color: #444b5d;
+$action-button-color: #606984;
+
+$inverted-text-color: $black !default;
+$lighter-text-color: $classic-base-color !default;
+$light-text-color: #444b5d;
+
+//Newly added colors
+$account-background-color: $white !default;
+
+//Invert darkened and lightened colors
+@function darken($color, $amount) {
+ @return hsl(hue($color), saturation($color), lightness($color) + $amount);
+}
+
+@function lighten($color, $amount) {
+ @return hsl(hue($color), saturation($color), lightness($color) - $amount);
+}
diff --git a/styles/cute.scss b/styles/cute.scss
new file mode 100644
index 0000000..1a3dfb0
--- /dev/null
+++ b/styles/cute.scss
@@ -0,0 +1,17 @@
+@import 'application';
+
+@import 'mfc/mastodonFlat';
+@import 'cute/palette';
+@import 'cute/overrides';
+
+@import 'mods/display_breakname';
+@import 'mods/display_fullname';
+//@import 'mods/display_browserfont';
+@import 'mods/display_circleavatar';
+//@import 'mods/display_collapsedinteractions';
+//@import 'mods/display_fadedinteractions';
+@import 'mods/display_transparentmedia';
+@import 'mods/layout_1600px';
+@import 'mods/layout_elefriend';
+//@import 'mods/layout_widercolumns';
+//@import 'mods/layout_mobile_bottombar';
diff --git a/styles/cute/overrides.scss b/styles/cute/overrides.scss
new file mode 100644
index 0000000..e69de29
diff --git a/styles/cute/palette.scss b/styles/cute/palette.scss
new file mode 100644
index 0000000..74d2bf0
--- /dev/null
+++ b/styles/cute/palette.scss
@@ -0,0 +1,57 @@
+/*------------------------------------------------------------------------------
+* DEFINE COLOR PALETTE
+*
+* Choose the CSS Variables that will be applied to recolor elements.
+* The current format is to use hex codes, e.g. #00FF00.
+*
+* A future refactor to use rgb() instead may allow transparency mods
+* via using these variables with rgba(). Hex codes currently do not
+* work with rgba(), so no transparency mods are included except for
+* those defined in absolute terms (i.e., non-variable colors).
+*
+* Foreground Colors:
+* --bg: | Background for foreground elements.
+* --text: | A color that stands out against bg.
+* --textBold: | A color that stands out strongly against bg.
+* --textMuted: | A color that stands out slightly against bg.
+*
+* Background Colors:
+* --bgPage: | Background for non-foreground elements.
+* --textPage: | A color that stands out against bgPage.
+* --textPageBold: | A color that stands out strongly against bgPage.
+* --textPageMuted: | A color that stands out slightly against bgPage.
+*
+* Highlights Colors:
+* --bgHead: | Background for column headers.
+* --textHead: | A color that stands out (strongly) against bgHead.
+* --accent: | An accent color for links and buttons.
+* --accentText: | A color that stands out (strongly) against accent.
+*
+* Palette advisories for choosing colors:
+* - Consider using an off-white or off-black for text tones,
+* but not necessary as long as there is sufficient contrast.
+* - Bold colors are highly recommended to be strong colors,
+* like pure white or pure black.
+* - Muted colors can be off-grey or any mid-tone with slight contrast.
+* - It might be best to base the background palette on a slightly
+* darker or lighter version of the foreground palette, but
+* this is no longer strictly necessary; you may use mixed palettes.
+* It is now possible to use a dark bgPage and light bg, or vice-versa.
+------------------------------------------------------------------------------*/
+
+:root {
+--bg: #222;
+--text: #ddd;
+--textBold: #fff;
+--textMuted: #777;
+
+--bgPage: #111;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #333;
+--textHead: var(--textBold);
+--accent: #f09; /* flamingo: #f09 */
+--accentText: var(--textHead);
+}
diff --git a/styles/dark-red.scss b/styles/dark-red.scss
new file mode 100644
index 0000000..60c35c0
--- /dev/null
+++ b/styles/dark-red.scss
@@ -0,0 +1,3 @@
+@import 'dark-red/variables';
+@import 'application';
+@import 'dark-red/diff';
diff --git a/styles/dark-red/diff.scss b/styles/dark-red/diff.scss
new file mode 100644
index 0000000..b612b87
--- /dev/null
+++ b/styles/dark-red/diff.scss
@@ -0,0 +1,77 @@
+// components.scss
+.compose-form {
+ .compose-form__modifiers {
+ .compose-form__upload {
+ &-description {
+ input {
+ &::placeholder {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+}
+
+.rich-formatting a,
+.rich-formatting p a,
+.rich-formatting li a,
+.landing-page__short-description p a,
+.status__content a,
+.reply-indicator__content a {
+ color: lighten($ui-highlight-color, 12%);
+ text-decoration: none;
+
+ &.mention {
+ text-decoration: none;
+ }
+
+ &.mention span {
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+
+ &.status__content__spoiler-link {
+ color: $secondary-text-color;
+ text-decoration: none;
+ }
+}
+
+.status__content__read-more-button {
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+}
+
+.getting-started__footer a {
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+}
+
+.nothing-here {
+ color: $darker-text-color;
+}
+
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
+ border-bottom: 4px solid $ui-highlight-color;
+}
diff --git a/styles/dark-red/variables.scss b/styles/dark-red/variables.scss
new file mode 100644
index 0000000..d8456fe
--- /dev/null
+++ b/styles/dark-red/variables.scss
@@ -0,0 +1,56 @@
+// Commonly used web colors
+$black: #000000; // Black
+$white: #ffffff; // White
+$success-green: #79bd9a !default; // Padua
+$error-red: #df405a !default; // Cerise
+$warning-red: #ff5050 !default; // Sunset Orange
+$gold-star: #ca8f04 !default; // Dark Goldenrod
+
+$red-bookmark: $warning-red;
+
+// Values from the classic Mastodon UI
+$classic-base-color: #282c37; // Midnight Express
+$classic-primary-color: #9baec8; // Echo Blue
+$classic-secondary-color: #d9e1e8; // Pattens Blue
+$classic-highlight-color: #d92b2b; // Summer Sky
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default; // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default; // Lighter
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 415px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
diff --git a/styles/droid.scss b/styles/droid.scss
new file mode 100644
index 0000000..846fbd7
--- /dev/null
+++ b/styles/droid.scss
@@ -0,0 +1,17 @@
+@import 'application';
+
+@import 'mfc/mastodonFlat';
+@import 'droid/palette';
+@import 'droid/overrides';
+
+@import 'mods/display_breakname';
+@import 'mods/display_fullname';
+//@import 'mods/display_browserfont';
+@import 'mods/display_circleavatar';
+//@import 'mods/display_collapsedinteractions';
+//@import 'mods/display_fadedinteractions';
+@import 'mods/display_transparentmedia';
+@import 'mods/layout_1600px';
+@import 'mods/layout_elefriend';
+//@import 'mods/layout_widercolumns';
+//@import 'mods/layout_mobile_bottombar';
diff --git a/styles/droid/overrides.scss b/styles/droid/overrides.scss
new file mode 100644
index 0000000..e69de29
diff --git a/styles/droid/palette.scss b/styles/droid/palette.scss
new file mode 100644
index 0000000..4dffdfd
--- /dev/null
+++ b/styles/droid/palette.scss
@@ -0,0 +1,59 @@
+/*------------------------------------------------------------------------------
+* DEFINE COLOR PALETTE
+*
+* Choose the CSS Variables that will be applied to recolor elements.
+* The current format is to use hex codes, e.g. #00FF00.
+*
+* A future refactor to use rgb() instead may allow transparency mods
+* via using these variables with rgba(). Hex codes currently do not
+* work with rgba(), so no transparency mods are included except for
+* those defined in absolute terms (i.e., non-variable colors).
+*
+* Foreground Colors:
+* --bg: | Background for foreground elements.
+* --text: | A color that stands out against bg.
+* --textBold: | A color that stands out strongly against bg.
+* --textMuted: | A color that stands out slightly against bg.
+*
+* Background Colors:
+* --bgPage: | Background for non-foreground elements.
+* --textPage: | A color that stands out against bgPage.
+* --textPageBold: | A color that stands out strongly against bgPage.
+* --textPageMuted: | A color that stands out slightly against bgPage.
+*
+* Highlights Colors:
+* --bgHead: | Background for column headers.
+* --textHead: | A color that stands out (strongly) against bgHead.
+* --accent: | An accent color for links and buttons.
+* --accentText: | A color that stands out (strongly) against accent.
+*
+* Palette advisories for choosing colors:
+* - Consider using an off-white or off-black for text tones,
+* but not necessary as long as there is sufficient contrast.
+* - Bold colors are highly recommended to be strong colors,
+* like pure white or pure black.
+* - Muted colors can be off-grey or any mid-tone with slight contrast.
+* - It might be best to base the background palette on a slightly
+* darker or lighter version of the foreground palette, but
+* this is no longer strictly necessary; you may use mixed palettes.
+* It is now possible to use a dark bgPage and light bg, or vice-versa.
+------------------------------------------------------------------------------*/
+
+/* linernotes dark */
+
+:root {
+--bg: #222;
+--text: #ddd;
+--textBold: #fff;
+--textMuted: #777;
+
+--bgPage: #111;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #333;
+--textHead: var(--textBold);
+--accent: #a4c639; /* flamingo: #f09 */
+--accentText: var(--textHead);
+}
diff --git a/styles/fonts/montserrat.scss b/styles/fonts/montserrat.scss
new file mode 100644
index 0000000..ea7e045
--- /dev/null
+++ b/styles/fonts/montserrat.scss
@@ -0,0 +1,19 @@
+@font-face {
+ font-family: 'mastodon-font-display';
+ src: local('Montserrat'),
+ url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
+ url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'),
+ url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
+ font-weight: 400;
+ font-display: swap;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'mastodon-font-display';
+ src: local('Montserrat Medium'),
+ url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
+ font-weight: 500;
+ font-display: swap;
+ font-style: normal;
+}
diff --git a/styles/fonts/roboto-mono.scss b/styles/fonts/roboto-mono.scss
new file mode 100644
index 0000000..bd9839a
--- /dev/null
+++ b/styles/fonts/roboto-mono.scss
@@ -0,0 +1,11 @@
+@font-face {
+ font-family: 'mastodon-font-monospace';
+ src: local('Roboto Mono'),
+ url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
+ url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
+ url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
+ url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
+ font-weight: 400;
+ font-display: swap;
+ font-style: normal;
+}
diff --git a/styles/fonts/roboto.scss b/styles/fonts/roboto.scss
new file mode 100644
index 0000000..f3a6dcb
--- /dev/null
+++ b/styles/fonts/roboto.scss
@@ -0,0 +1,47 @@
+@font-face {
+ font-family: 'mastodon-font-sans-serif';
+ src: local('Roboto Italic'),
+ url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
+ url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'),
+ url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
+ url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
+ font-weight: normal;
+ font-display: swap;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: 'mastodon-font-sans-serif';
+ src: local('Roboto Bold'),
+ url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
+ url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'),
+ url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
+ url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
+ font-weight: bold;
+ font-display: swap;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'mastodon-font-sans-serif';
+ src: local('Roboto Medium'),
+ url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
+ url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'),
+ url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
+ url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
+ font-weight: 500;
+ font-display: swap;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'mastodon-font-sans-serif';
+ src: local('Roboto'),
+ url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
+ url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'),
+ url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
+ url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
+ font-weight: normal;
+ font-display: swap;
+ font-style: normal;
+}
diff --git a/styles/fullwidth-media.scss b/styles/fullwidth-media.scss
new file mode 100644
index 0000000..f6a036d
--- /dev/null
+++ b/styles/fullwidth-media.scss
@@ -0,0 +1,48 @@
+
+.detailed-status > .media-spoiler,
+.status > .media-spoiler,
+.status .video-player,
+.media-gallery,
+.status .status-card.interactive {
+ margin-top: 20px;
+ margin-left: -68px;
+ width: calc(100% + 80px);
+}
+
+.detailed-status > .media-spoiler,
+.status > .media-spoiler,
+.video-player {
+ max-width: none;
+}
+
+/* If there's no status text, add an extra margin on top */
+.status .status__info + .media-gallery,
+.status .status__info + .media-spoiler,
+.status .status__info + .video-player,
+.status .status__info + .status-card {
+ margin-top: 40px;
+}
+
+.status__video-player-video {
+ transform: unset;
+ top: unset;
+}
+
+.detailed-status .media-gallery {
+ margin-left: -10px;
+ width: calc(100% + 22px);
+}
+
+.public-layout .status {
+ .status__content {
+ min-height: 15px;
+ }
+ & > .media-spoiler,
+ .video-player,
+ .media-gallery,
+ .status-card {
+ margin-top: 20px;
+ width: calc(100% + 94px);
+ margin-left: -78px;
+ }
+}
diff --git a/styles/light-red.scss b/styles/light-red.scss
new file mode 100644
index 0000000..6969822
--- /dev/null
+++ b/styles/light-red.scss
@@ -0,0 +1,3 @@
+@import 'light-red/variables';
+@import 'application';
+@import 'light-red/diff';
diff --git a/styles/light-red/diff.scss b/styles/light-red/diff.scss
new file mode 100644
index 0000000..7a846bc
--- /dev/null
+++ b/styles/light-red/diff.scss
@@ -0,0 +1,776 @@
+// Notes!
+// Sass color functions, "darken" and "lighten" are automatically replaced.
+
+html {
+ scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
+}
+
+// Change the colors of button texts
+.button {
+ color: $white;
+
+ &.button-alternative-2 {
+ color: $white;
+ }
+}
+
+.status-card__actions button,
+.status-card__actions a {
+ color: rgba($white, 0.8);
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $white;
+ }
+}
+
+// Change default background colors of columns
+.column > .scrollable,
+.getting-started,
+.column-inline-form,
+.error-column,
+.regeneration-indicator {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+}
+
+.directory__card__img {
+ background: lighten($ui-base-color, 12%);
+}
+
+.filter-form,
+.directory__card__bar {
+ background: $white;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+}
+
+.scrollable .directory__list {
+ width: calc(100% + 2px);
+ margin-left: -1px;
+ margin-right: -1px;
+}
+
+.directory__card,
+.table-of-contents {
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.column-back-button,
+.column-header {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ }
+
+ &--slim-button {
+ top: -50px;
+ right: 0;
+ }
+}
+
+.column-header__back-button,
+.column-header__button,
+.column-header__button.active,
+.account__header__bar,
+.directory__card__extra {
+ background: $white;
+}
+
+.column-header__button.active {
+ color: $ui-highlight-color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $ui-highlight-color;
+ background: $white;
+ }
+}
+
+.account__header__bar .avatar .account__avatar {
+ border-color: $white;
+}
+
+.getting-started__footer a {
+ color: $ui-secondary-color;
+ text-decoration: underline;
+}
+
+.confirmation-modal__secondary-button,
+.confirmation-modal__cancel-button,
+.mute-modal__cancel-button,
+.block-modal__cancel-button {
+ color: lighten($ui-base-color, 26%);
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: $primary-text-color;
+ }
+}
+
+.column-subheading {
+ background: darken($ui-base-color, 4%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+}
+
+.getting-started,
+.scrollable {
+ .column-link {
+ background: $white;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: $ui-base-color;
+ }
+ }
+}
+
+.getting-started .navigation-bar {
+ border-top: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ }
+}
+
+.compose-form__autosuggest-wrapper,
+.poll__option input[type="text"],
+.compose-form .spoiler-input__input,
+.compose-form__poll-wrapper select,
+.search__input,
+.setting-text,
+.box-widget input[type="text"],
+.box-widget input[type="email"],
+.box-widget input[type="password"],
+.box-widget textarea,
+.statuses-grid .detailed-status,
+.audio-player {
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.search__input {
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ border-bottom: 0;
+ }
+}
+
+.list-editor .search .search__input {
+ border-top: 0;
+ border-bottom: 0;
+}
+
+.compose-form__poll-wrapper select {
+ background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px;
+}
+
+.compose-form__poll-wrapper,
+.compose-form__poll-wrapper .poll__footer {
+ border-top-color: lighten($ui-base-color, 8%);
+}
+
+.notification__filter-bar {
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+}
+
+.compose-form .compose-form__buttons-wrapper {
+ background: $ui-base-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+}
+
+.drawer__header,
+.drawer__inner {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.drawer__inner__mastodon {
+ background: $white url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto;
+}
+
+// Change the colors used in compose-form
+.compose-form {
+ .compose-form__modifiers {
+ .compose-form__upload__actions .icon-button {
+ color: lighten($white, 7%);
+
+ &:active,
+ &:focus,
+ &:hover {
+ color: $white;
+ }
+ }
+
+ .compose-form__upload-description input {
+ color: lighten($white, 7%);
+
+ &::placeholder {
+ color: lighten($white, 7%);
+ }
+ }
+ }
+
+ .compose-form__buttons-wrapper {
+ background: darken($ui-base-color, 6%);
+ }
+
+ .autosuggest-textarea__suggestions {
+ background: darken($ui-base-color, 6%);
+ }
+
+ .autosuggest-textarea__suggestions__item {
+ &:hover,
+ &:focus,
+ &:active,
+ &.selected {
+ background: lighten($ui-base-color, 4%);
+ }
+ }
+}
+
+.emoji-mart-bar {
+ border-color: lighten($ui-base-color, 4%);
+
+ &:first-child {
+ background: darken($ui-base-color, 6%);
+ }
+}
+
+.emoji-mart-search input {
+ background: rgba($ui-base-color, 0.3);
+ border-color: $ui-base-color;
+}
+
+// Change the background colors of statuses
+.focusable:focus {
+ background: $ui-base-color;
+}
+
+.status.status-direct {
+ background: lighten($ui-base-color, 4%);
+}
+
+.focusable:focus .status.status-direct {
+ background: lighten($ui-base-color, 8%);
+}
+
+.detailed-status,
+.detailed-status__action-bar {
+ background: $white;
+}
+
+// Change the background colors of status__content__spoiler-link
+.reply-indicator__content .status__content__spoiler-link,
+.status__content .status__content__spoiler-link {
+ background: $ui-base-color;
+
+ &:hover {
+ background: lighten($ui-base-color, 4%);
+ }
+}
+
+// Change the background colors of media and video spoilers
+.media-spoiler,
+.video-player__spoiler {
+ background: $ui-base-color;
+}
+
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
+ color: $white;
+}
+
+.account-gallery__item a {
+ background-color: $ui-base-color;
+}
+
+// Change the colors used in the dropdown menu
+.dropdown-menu {
+ background: $white;
+
+ &__arrow {
+ &.left {
+ border-left-color: $white;
+ }
+
+ &.top {
+ border-top-color: $white;
+ }
+
+ &.bottom {
+ border-bottom-color: $white;
+ }
+
+ &.right {
+ border-right-color: $white;
+ }
+ }
+
+ &__item {
+ a {
+ background: $white;
+ color: $darker-text-color;
+ }
+ }
+}
+
+// Change the text colors on inverted background
+.privacy-dropdown__option.active,
+.privacy-dropdown__option:hover,
+.privacy-dropdown__option.active .privacy-dropdown__option__content,
+.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
+.privacy-dropdown__option:hover .privacy-dropdown__option__content,
+.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
+.dropdown-menu__item a:active,
+.dropdown-menu__item a:focus,
+.dropdown-menu__item a:hover,
+.actions-modal ul li:not(:empty) a.active,
+.actions-modal ul li:not(:empty) a.active button,
+.actions-modal ul li:not(:empty) a:active,
+.actions-modal ul li:not(:empty) a:active button,
+.actions-modal ul li:not(:empty) a:focus,
+.actions-modal ul li:not(:empty) a:focus button,
+.actions-modal ul li:not(:empty) a:hover,
+.actions-modal ul li:not(:empty) a:hover button,
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
+.simple_form .block-button,
+.simple_form .button,
+.simple_form button {
+ color: $white;
+}
+
+.dropdown-menu__separator {
+ border-bottom-color: lighten($ui-base-color, 4%);
+}
+
+// Change the background colors of modals
+.actions-modal,
+.boost-modal,
+.confirmation-modal,
+.mute-modal,
+.block-modal,
+.report-modal,
+.embed-modal,
+.error-modal,
+.onboarding-modal,
+.report-modal__comment .setting-text__wrapper,
+.report-modal__comment .setting-text {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.report-modal__comment {
+ border-right-color: lighten($ui-base-color, 8%);
+}
+
+.report-modal__container {
+ border-top-color: lighten($ui-base-color, 8%);
+}
+
+.column-header__collapsible-inner {
+ background: darken($ui-base-color, 4%);
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+}
+
+.focal-point__preview strong {
+ color: $white;
+}
+
+.boost-modal__action-bar,
+.confirmation-modal__action-bar,
+.mute-modal__action-bar,
+.block-modal__action-bar,
+.onboarding-modal__paginator,
+.error-modal__footer {
+ background: darken($ui-base-color, 6%);
+
+ .onboarding-modal__nav,
+ .error-modal__nav {
+ &:hover,
+ &:focus,
+ &:active {
+ background-color: darken($ui-base-color, 12%);
+ }
+ }
+}
+
+.display-case__case {
+ background: $white;
+}
+
+.embed-modal .embed-modal__container .embed-modal__html {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ &:focus {
+ border-color: lighten($ui-base-color, 12%);
+ background: $white;
+ }
+}
+
+.react-toggle-track {
+ background: $ui-secondary-color;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+ background: darken($ui-secondary-color, 10%);
+}
+
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+ background: lighten($ui-highlight-color, 10%);
+}
+
+// Change the default color used for the text in an empty column or on the error column
+.empty-column-indicator,
+.error-column {
+ color: $primary-text-color;
+ background: $white;
+}
+
+.tabs-bar {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 0;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ }
+
+ &__link {
+ padding-bottom: 14px;
+ border-bottom-width: 1px;
+ border-bottom-color: lighten($ui-base-color, 8%);
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: $ui-base-color;
+ }
+
+ &.active {
+ &:hover,
+ &:active,
+ &:focus {
+ background: transparent;
+ border-bottom-color: $ui-highlight-color;
+ }
+ }
+ }
+}
+
+// Change the default colors used on some parts of the profile pages
+.activity-stream-tabs {
+ background: $account-background-color;
+ border-bottom-color: lighten($ui-base-color, 8%);
+}
+
+.box-widget,
+.nothing-here,
+.page-header,
+.directory__tag > a,
+.directory__tag > div,
+.landing-page__call-to-action,
+.contact-widget,
+.landing .hero-widget__text,
+.landing-page__information.contact-widget {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-left: 0;
+ border-right: 0;
+ border-top: 0;
+ }
+}
+
+.landing .hero-widget__text {
+ border-top: 0;
+ border-bottom: 0;
+}
+
+.simple_form {
+ input[type=text],
+ input[type=number],
+ input[type=email],
+ input[type=password],
+ textarea {
+ &:hover {
+ border-color: lighten($ui-base-color, 12%);
+ }
+ }
+}
+
+.landing .hero-widget__footer {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border: 0;
+ }
+}
+
+.brand__tagline {
+ color: $ui-secondary-color;
+}
+
+.directory__tag > a {
+ &:hover,
+ &:active,
+ &:focus {
+ background: $ui-base-color;
+ }
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border: 0;
+ }
+}
+
+.directory__tag.active > a,
+.directory__tag.active > div {
+ border-color: $ui-highlight-color;
+
+ &,
+ h4,
+ h4 small,
+ .fa,
+ .trends__item__current {
+ color: $white;
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: $ui-highlight-color;
+ }
+}
+
+.batch-table {
+ &__toolbar,
+ &__row,
+ .nothing-here {
+ border-color: lighten($ui-base-color, 8%);
+ }
+}
+
+.activity-stream {
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ &--under-tabs {
+ border-top: 0;
+ }
+
+ .entry {
+ background: $account-background-color;
+
+ .detailed-status.light,
+ .more.light,
+ .status.light {
+ border-bottom-color: lighten($ui-base-color, 8%);
+ }
+ }
+
+ .status.light {
+ .status__content {
+ color: $primary-text-color;
+ }
+
+ .display-name {
+ strong {
+ color: $primary-text-color;
+ }
+ }
+ }
+}
+
+.accounts-grid {
+ .account-grid-card {
+ .controls {
+ .icon-button {
+ color: $darker-text-color;
+ }
+ }
+
+ .name {
+ a {
+ color: $primary-text-color;
+ }
+ }
+
+ .username {
+ color: $darker-text-color;
+ }
+
+ .account__header__content {
+ color: $primary-text-color;
+ }
+ }
+}
+
+.simple_form,
+.table-form {
+ .warning {
+ box-shadow: none;
+ background: rgba($error-red, 0.5);
+ text-shadow: none;
+ }
+
+ .recommended {
+ border-color: $ui-highlight-color;
+ color: $ui-highlight-color;
+ background-color: rgba($ui-highlight-color, 0.1);
+ }
+}
+
+.compose-form .compose-form__warning {
+ border-color: $ui-highlight-color;
+ background-color: rgba($ui-highlight-color, 0.1);
+
+ &,
+ a {
+ color: $ui-highlight-color;
+ }
+}
+
+.status__content,
+.reply-indicator__content {
+ a {
+ color: $highlight-text-color;
+ }
+}
+
+.button.logo-button {
+ color: $white;
+
+ svg {
+ fill: $white;
+ }
+}
+
+.public-layout {
+ .account__section-headline {
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ }
+ }
+
+ .header,
+ .public-account-header,
+ .public-account-bio {
+ box-shadow: none;
+ }
+
+ .public-account-bio,
+ .hero-widget__text {
+ background: $account-background-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+ }
+
+ .header {
+ background: $ui-base-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border: 0;
+ }
+
+ .brand {
+ &:hover,
+ &:focus,
+ &:active {
+ background: lighten($ui-base-color, 4%);
+ }
+ }
+ }
+
+ .public-account-header {
+ &__image {
+ background: lighten($ui-base-color, 12%);
+
+ &::after {
+ box-shadow: none;
+ }
+ }
+
+ &__bar {
+ &::before {
+ background: $account-background-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+ }
+
+ .avatar img {
+ border-color: $account-background-color;
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ background: $account-background-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-top: 0;
+ }
+ }
+
+ &__tabs {
+ &__name {
+ h1,
+ h1 small {
+ color: $white;
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ color: $primary-text-color;
+ }
+ }
+ }
+ }
+
+ &__extra {
+ .public-account-bio {
+ border: 0;
+ }
+
+ .public-account-bio .account__header__fields {
+ border-color: lighten($ui-base-color, 8%);
+ }
+ }
+ }
+}
+
+.notification__filter-bar button.active::after,
+.account__section-headline a.active::after {
+ border-color: transparent transparent $white;
+}
+
+.hero-widget,
+.box-widget,
+.contact-widget,
+.landing-page__information.contact-widget,
+.moved-account-widget,
+.memoriam-widget,
+.activity-stream,
+.nothing-here,
+.directory__tag > a,
+.directory__tag > div,
+.card > a,
+.page-header,
+.compose-form .compose-form__warning {
+ box-shadow: none;
+}
+
+.audio-player .video-player__controls button,
+.audio-player .video-player__time-sep,
+.audio-player .video-player__time-current,
+.audio-player .video-player__time-total {
+ color: $primary-text-color;
+}
diff --git a/styles/light-red/variables.scss b/styles/light-red/variables.scss
new file mode 100644
index 0000000..3bbef4a
--- /dev/null
+++ b/styles/light-red/variables.scss
@@ -0,0 +1,41 @@
+// Dependent colors
+$black: #000000;
+$white: #ffffff;
+
+$classic-base-color: #282c37;
+$classic-primary-color: #9baec8;
+$classic-secondary-color: #d9e1e8;
+$classic-highlight-color: #d92b2b;
+
+// Differences
+$success-green: lighten(#3c754d, 8%);
+
+$base-overlay-background: $white !default;
+$valid-value-color: $success-green !default;
+
+$ui-base-color: $classic-secondary-color !default;
+$ui-base-lighter-color: #b0c0cf;
+$ui-primary-color: #9bcbed;
+$ui-secondary-color: $classic-base-color !default;
+$ui-highlight-color: #d92b2b;
+
+$primary-text-color: $black !default;
+$darker-text-color: $classic-base-color !default;
+$dark-text-color: #444b5d;
+$action-button-color: #606984;
+
+$inverted-text-color: $black !default;
+$lighter-text-color: $classic-base-color !default;
+$light-text-color: #444b5d;
+
+//Newly added colors
+$account-background-color: $white !default;
+
+//Invert darkened and lightened colors
+@function darken($color, $amount) {
+ @return hsl(hue($color), saturation($color), lightness($color) + $amount);
+}
+
+@function lighten($color, $amount) {
+ @return hsl(hue($color), saturation($color), lightness($color) - $amount);
+}
diff --git a/styles/mailer.scss b/styles/mailer.scss
new file mode 100644
index 0000000..18fe522
--- /dev/null
+++ b/styles/mailer.scss
@@ -0,0 +1,574 @@
+@import 'mastodon/variables';
+@import 'fonts/roboto';
+
+table,
+td,
+div {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ width: 100% !important;
+ min-width: 100%;
+ margin: 0;
+ padding: 0;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+.email-body {
+ td,
+ div,
+ a,
+ span {
+ line-height: inherit;
+ }
+}
+
+a {
+ &,
+ &:visited,
+ span {
+ text-decoration: none;
+ color: $ui-highlight-color;
+ }
+
+ #outlook & {
+ padding: 0;
+ }
+}
+
+img {
+ outline: none;
+ border: 0;
+ text-decoration: none;
+ -ms-interpolation-mode: bicubic;
+ clear: both;
+ line-height: 100%;
+}
+
+table {
+ border-spacing: 0;
+ mso-table-lspace: 0;
+ mso-table-rspace: 0;
+}
+
+td {
+ vertical-align: top;
+}
+
+.auto-dir {
+ p {
+ unicode-bidi: plaintext;
+ }
+
+ a {
+ unicode-bidi: isolate;
+ }
+}
+
+.email-table,
+.content-section,
+.column,
+.column-cell {
+ width: 100%;
+ min-width: 100%;
+}
+
+.email-body {
+ font-size: 0 !important;
+ line-height: 100%;
+ text-align: center;
+ padding-left: 16px;
+ padding-right: 16px;
+}
+
+.email-start {
+ padding-top: 32px;
+}
+
+.email-end {
+ padding-bottom: 32px;
+}
+
+.email-body,
+html,
+body {
+ background-color: lighten($ui-base-color, 4%);
+}
+
+.email-container,
+.email-row,
+.col-0,
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6 {
+ font-size: 0;
+ display: inline-block;
+ width: 100%;
+ min-width: 100%;
+ min-width: 0 !important;
+ vertical-align: top;
+}
+
+.content-cell {
+ width: 100%;
+ min-width: 100%;
+ min-width: 0 !important;
+}
+
+.column-cell {
+ padding-top: 16px;
+ padding-bottom: 16px;
+ vertical-align: top;
+
+ &.button-cell {
+ padding-top: 0;
+ }
+}
+
+.email-container {
+ max-width: 632px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.email-row {
+ display: block;
+ max-width: 600px !important;
+ margin: 0 auto;
+ text-align: center;
+ clear: both;
+}
+
+.col-0 {
+ max-width: 50px;
+}
+
+.col-1 {
+ max-width: 100px;
+}
+
+.col-2 {
+ max-width: 200px;
+}
+
+.col-3 {
+ max-width: 300px;
+}
+
+.col-4 {
+ max-width: 400px;
+}
+
+.col-5 {
+ max-width: 500px;
+}
+
+.col-6 {
+ max-width: 600px;
+}
+
+.column-cell,
+.column-cell td,
+p {
+ font-family: Helvetica, Arial, sans-serif;
+
+ @media only screen {
+ font-family: $font-sans-serif, sans-serif !important;
+ }
+}
+
+.email-body .column-cell,
+.column-cell,
+p {
+ font-size: 15px;
+ line-height: 23px;
+ color: $ui-primary-color;
+ mso-line-height-rule: exactly;
+ text-rendering: optimizelegibility;
+}
+
+p {
+ display: block;
+ margin-top: 0;
+ margin-bottom: 16px;
+
+ &.small {
+ font-size: 13px;
+ }
+
+ &.lead {
+ font-size: 19px;
+ line-height: 27px;
+ }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: $ui-secondary-color;
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 20px;
+ margin-bottom: 8px;
+ padding: 0;
+ font-weight: 500;
+}
+
+h1 {
+ font-size: 26px;
+ line-height: 36px;
+}
+
+h2 {
+ font-size: 23px;
+ line-height: 30px;
+}
+
+h3 {
+ font-size: 19px;
+ line-height: 25px;
+}
+
+h5 {
+ font-size: 16px;
+ line-height: 21px;
+ font-weight: 700;
+ color: lighten($ui-base-color, 34%);
+}
+
+.input-cell {
+ h5 {
+ margin-top: 4px;
+ }
+}
+
+.input {
+ td {
+ background: darken($ui-base-color, 8%);
+ border-radius: 4px;
+ padding: 16px;
+ line-height: 20px;
+ mso-line-height-rule: exactly;
+ text-align: center;
+ font-weight: 500;
+ font-size: 17px;
+ }
+}
+
+.content-cell,
+.blank-cell {
+ width: 100%;
+ font-size: 0;
+ text-align: center;
+ vertical-align: top;
+ padding-left: 16px;
+ padding-right: 16px;
+}
+
+.content-cell {
+ background-color: darken($ui-base-color, 4%);
+
+ &.darker {
+ background-color: darken($ui-base-color, 8%);
+ }
+}
+
+.hero {
+ background-color: $ui-base-color;
+ padding-top: 20px;
+}
+
+.hero-with-button {
+ padding-bottom: 16px;
+
+ h1 {
+ margin-bottom: 4px;
+ }
+
+ p.lead {
+ margin-bottom: 32px;
+ }
+}
+
+.header {
+ border-radius: 5px 5px 0 0;
+ background-color: darken($ui-base-color, 8%);
+
+ .column-cell {
+ text-align: center;
+ padding-top: 20px;
+ padding-bottom: 8px;
+ }
+}
+
+.content-start {
+ padding-top: 32px;
+}
+
+.content-end {
+ border-radius: 0 0 5px 5px;
+ padding-top: 16px;
+}
+
+.footer {
+ .column-cell,
+ p {
+ color: lighten($ui-base-color, 34%);
+ }
+
+ p {
+ margin-bottom: 0;
+ font-size: 13px;
+
+ &.small {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ color: lighten($ui-base-color, 34%);
+ text-decoration: underline;
+ }
+
+ img {
+ opacity: 0.3;
+ }
+}
+
+.logo {
+ position: relative;
+ left: -4px;
+}
+
+.button {
+ display: table;
+ margin-left: auto;
+ margin-right: auto;
+
+ td {
+ line-height: 20px;
+ mso-line-height-rule: exactly;
+ border-radius: 4px;
+ text-align: center;
+ font-weight: 500;
+ font-size: 17px;
+ padding: 0 !important;
+
+ a,
+ a span {
+ color: $primary-text-color;
+ display: block !important;
+ text-align: center !important;
+ vertical-align: top !important;
+ line-height: inherit !important;
+ }
+
+ a {
+ padding: 10px 22px !important;
+ line-height: 26px !important;
+ font-weight: 500 !important;
+ }
+ }
+
+ &.button-small {
+ td {
+ border-radius: 4px;
+ font-size: 14px;
+ padding: 8px 16px;
+
+ a {
+ padding: 5px 16px !important;
+ line-height: 26px !important;
+ }
+ }
+ }
+}
+
+.button-default {
+ background-color: darken($ui-base-color, 8%);
+}
+
+.button-primary {
+ background-color: darken($ui-highlight-color, 3%);
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
+}
+
+.padded {
+ padding-left: 16px;
+ padding-right: 16px;
+}
+
+.padded-bottom {
+ padding-bottom: 32px;
+}
+
+.margin-bottom {
+ margin-bottom: 20px;
+}
+
+.hero-icon {
+ width: 64px;
+
+ td {
+ text-align: center;
+ vertical-align: middle;
+ line-height: 100%;
+ mso-line-height-rule: exactly;
+ padding: 16px;
+ border-radius: 80px;
+ background: $success-green;
+ }
+
+ &.warning-icon td {
+ background: $gold-star;
+ }
+
+ &.alert-icon td {
+ background: $error-red;
+ }
+
+ img {
+ max-width: 32px;
+ width: 32px;
+ height: 32px;
+ display: block;
+ line-height: 100%;
+ }
+}
+
+.hr {
+ width: 100%;
+
+ td {
+ font-size: 0;
+ line-height: 1px;
+ mso-line-height-rule: exactly;
+ min-height: 1px;
+ overflow: hidden;
+ height: 2px;
+ background-color: transparent !important;
+ border-top: 1px solid lighten($ui-base-color, 8%);
+ }
+}
+
+.status {
+ padding-bottom: 32px;
+
+ &--highlighted {
+ border: 1px solid lighten($ui-base-color, 8%);
+ border-radius: 4px;
+ padding-bottom: 16px;
+ margin-bottom: 16px;
+ }
+
+ .status-header {
+ td {
+ font-size: 14px;
+ padding-bottom: 15px;
+ }
+
+ bdi {
+ color: $white;
+ font-size: 16px;
+ display: block;
+ font-weight: 500;
+ }
+
+ td:first-child {
+ padding-right: 10px;
+ }
+
+ img {
+ width: 48px;
+ height: 48px;
+ border-radius: 4px;
+ }
+ }
+
+ p {
+ font-size: 19px;
+ margin-bottom: 20px;
+
+ &.status-footer {
+ color: lighten($ui-base-color, 26%);
+ font-size: 14px;
+ margin-bottom: 0;
+
+ a {
+ color: lighten($ui-base-color, 26%);
+ }
+ }
+ }
+}
+
+.border-top {
+ border-top: 1px solid lighten($ui-base-color, 8%);
+}
+
+ul {
+ padding-left: 15px;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 16px;
+
+ li {
+ margin-bottom: 16px;
+ color: lighten($ui-base-color, 26%);
+
+ span {
+ color: $ui-primary-color;
+ }
+ }
+}
+
+ul.rules-list {
+ padding-top: 0;
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
+ body {
+ min-height: 1024px !important;
+ }
+}
+
+@media (max-width: 697px) {
+ .email-container,
+ .col-1,
+ .col-2,
+ .col-3,
+ .col-4,
+ .col-5,
+ .col-6 {
+ width: 100% !important;
+ max-width: none !important;
+ }
+
+ .email-start {
+ padding-top: 16px !important;
+ }
+
+ .email-end {
+ padding-bottom: 16px !important;
+ }
+
+ .padded {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+}
diff --git a/styles/material-dark.scss b/styles/material-dark.scss
new file mode 100644
index 0000000..a8154f6
--- /dev/null
+++ b/styles/material-dark.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'material-dark/loader';
diff --git a/styles/material-dark/color/black.scss b/styles/material-dark/color/black.scss
new file mode 100644
index 0000000..b299981
--- /dev/null
+++ b/styles/material-dark/color/black.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-dark/color/mastodon-dark.scss b/styles/material-dark/color/mastodon-dark.scss
new file mode 100644
index 0000000..c3c1683
--- /dev/null
+++ b/styles/material-dark/color/mastodon-dark.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9baec8;
+$ui-text-color: #fff;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #606984;
+$tips-text-color: #6d7889;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4ea2df;
+$menu-text-color: #282c37;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #313543;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-color, 18%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #fff;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.7);
+$text-button-focus-color: transparentize($text-button-color, 0.6);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+
+// App bar color
+$top-bar-color: #313543;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: #d9e1e8;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-dark/color/mastodon-light.scss b/styles/material-dark/color/mastodon-light.scss
new file mode 100644
index 0000000..54d894f
--- /dev/null
+++ b/styles/material-dark/color/mastodon-light.scss
@@ -0,0 +1,134 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #217aba;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$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;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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%);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$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: #ccd7e0;
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #ffffff;
+$search-bar-color: #d9e1e8;
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-dark/color/plus-classic.scss b/styles/material-dark/color/plus-classic.scss
new file mode 100644
index 0000000..60c8370
--- /dev/null
+++ b/styles/material-dark/color/plus-classic.scss
@@ -0,0 +1,134 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$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;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// 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: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// 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($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-dark/color/v1-dark.scss b/styles/material-dark/color/v1-dark.scss
new file mode 100644
index 0000000..77cef82
--- /dev/null
+++ b/styles/material-dark/color/v1-dark.scss
@@ -0,0 +1,134 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-dark/color/v1-light.scss b/styles/material-dark/color/v1-light.scss
new file mode 100644
index 0000000..64f8d58
--- /dev/null
+++ b/styles/material-dark/color/v1-light.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$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;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// 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: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// 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($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-dark/color/v2-dark.scss b/styles/material-dark/color/v2-dark.scss
new file mode 100644
index 0000000..8c575bc
--- /dev/null
+++ b/styles/material-dark/color/v2-dark.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #272727;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-dark/color/v2-light.scss b/styles/material-dark/color/v2-light.scss
new file mode 100644
index 0000000..20336e9
--- /dev/null
+++ b/styles/material-dark/color/v2-light.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$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;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// 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: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: #ffffff;
+$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
+$floating-action-button-active-color: darken($floating-action-button-color, 10%);
+$floating-action-button-icon-color: $primary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// 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;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-dark/custom_color.scss b/styles/material-dark/custom_color.scss
new file mode 100644
index 0000000..b4ac468
--- /dev/null
+++ b/styles/material-dark/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/styles/material-dark/custom_config.scss b/styles/material-dark/custom_config.scss
new file mode 100644
index 0000000..6e82d54
--- /dev/null
+++ b/styles/material-dark/custom_config.scss
@@ -0,0 +1,2 @@
+@charset "UTF-8";
+@import 'color/v2-dark';
diff --git a/styles/material-dark/custom_layout.scss b/styles/material-dark/custom_layout.scss
new file mode 100644
index 0000000..3b4e0e6
--- /dev/null
+++ b/styles/material-dark/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
diff --git a/styles/material-dark/icon_config.scss b/styles/material-dark/icon_config.scss
new file mode 100644
index 0000000..79d5456
--- /dev/null
+++ b/styles/material-dark/icon_config.scss
@@ -0,0 +1,26 @@
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
+
+$favorite-icon-color: #ffd600; // Star
+//$favorite-icon-color: #ff4081; // Heart
+//$favorite-icon-color: #db4437; // +1
+//$favorite-icon-color: #ffffff; // inverted +1
+
+
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment"; // blooming
+
+
+// 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
+}
diff --git a/styles/material-dark/layout/material-v1.scss b/styles/material-dark/layout/material-v1.scss
new file mode 100644
index 0000000..825deaf
--- /dev/null
+++ b/styles/material-dark/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// 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
+
+
+// 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/styles/material-dark/layout/material-v2.scss b/styles/material-dark/layout/material-v2.scss
new file mode 100644
index 0000000..853d82b
--- /dev/null
+++ b/styles/material-dark/layout/material-v2.scss
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+//$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
+
+
+// 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/styles/material-dark/loader.scss b/styles/material-dark/loader.scss
new file mode 100644
index 0000000..673066e
--- /dev/null
+++ b/styles/material-dark/loader.scss
@@ -0,0 +1,7 @@
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
diff --git a/styles/material-dark/plugins/cards.scss b/styles/material-dark/plugins/cards.scss
new file mode 100644
index 0000000..c134cbe
--- /dev/null
+++ b/styles/material-dark/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+ box-shadow: none !important;
+ margin: 2px 0 !important;
+ padding: 8px !important;
+
+ > .scrollable { background: $background-color }
+}
+
+.status {
+ border-bottom: 0;
+ border-radius: $card-radius;
+ background: $card-background-color;
+
+ &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+ @include shadow-1dp;
+ margin: 8px 2px;
+ border-radius: $card-radius;
+ background: $card-background-color;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+ @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/styles/material-dark/plugins/dense.scss b/styles/material-dark/plugins/dense.scss
new file mode 100644
index 0000000..b3ba408
--- /dev/null
+++ b/styles/material-dark/plugins/dense.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+ &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+ &__buttons { height: 48px }
+
+ &__button {
+ margin: 8px;
+ padding: 10px 8px;
+
+ .fa { vertical-align: text-top }
+ }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+ padding: 12px 16px;
+
+ p { margin-bottom: 12px }
+}
+
+.compose-form {
+ .compose-form__publish { padding-top: 8px }
+}
+
+.status {
+ padding: 8px 8px 8px 66px;
+
+ &__expand { width: 66px }
+
+ &__info { padding-right: 0 }
+
+ &__avatar {
+ left: 8px;
+ top: 10px;
+ }
+
+ &__content { padding-top: 2px }
+}
+
+.detailed-status {
+ padding: 14px;
+
+ &__meta { margin-top: 14px }
+
+ &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/styles/material-dark/plugins/plus.scss b/styles/material-dark/plugins/plus.scss
new file mode 100644
index 0000000..5b22063
--- /dev/null
+++ b/styles/material-dark/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+ background: #eeeeee;
+ width: 28px !important;
+ height: 28px !important;
+
+ .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+ left: -34px;
+
+ .star-icon {
+ border-radius: 50%;
+ width: 28px;
+ height: 28px;
+ vertical-align: baseline;
+ font-size: 18px;
+
+ &.fa-fw::before { vertical-align: middle }
+ }
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/_functions.scss b/styles/material-dark/theme/_functions.scss
new file mode 100644
index 0000000..0374231
--- /dev/null
+++ b/styles/material-dark/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color ($color) {
+ @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/_mixins.scss b/styles/material-dark/theme/_mixins.scss
new file mode 100644
index 0000000..5f573e3
--- /dev/null
+++ b/styles/material-dark/theme/_mixins.scss
@@ -0,0 +1,25 @@
+@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 }
+
+@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
diff --git a/styles/material-dark/theme/account.scss b/styles/material-dark/theme/account.scss
new file mode 100644
index 0000000..34a8a18
--- /dev/null
+++ b/styles/material-dark/theme/account.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+ border-bottom: 1px solid $border-color;
+
+ .account__display-name { color: $primary-text-color }
+ .account__display-name strong { color: $secondary-text-color }
+
+ &__avatar {
+ border-radius: $avater-radius;
+ width: 40px;
+ height: 40px;
+
+ &-overlay {
+ &-base {
+ border-radius: 50%;
+ width: 44px;
+ height: 44px;
+ background-size: 44px;
+ }
+
+ &-overlay { border-radius: $avater-radius }
+ }
+ }
+
+ &__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 }
+ }
+ }
+ }
+
+ &__content { color: $secondary-text-color }
+ }
+
+ &__section-headline {
+ background: $text-tab-background-color;
+ border-bottom: 1px solid $border-color;
+
+ a {
+ padding: 16px 0;
+ color: $text-tab-indicator-color;
+
+ &.active {
+ color: $text-tab-indicator-active-color;
+ border-bottom: 4px solid $text-tab-indicator-active-color;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $text-tab-indicator-background-focus-color }
+ }
+
+ &:hover { background: $text-tab-indicator-background-hover-color }
+ }
+ }
+}
+
+.account-role {
+ padding: 4px 8px;
+ border-radius: 17px;
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+ color: $ui-text-color;
+
+ small { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/base_config.scss b/styles/material-dark/theme/base_config.scss
new file mode 100644
index 0000000..73ff009
--- /dev/null
+++ b/styles/material-dark/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+}*/
+
+
+// Status font size in timeline
+$status-font-size: 15px; // mastodon default
+//$status-font-size: 16px; // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px; // mastodon default
+//$name-font-size: 16px; // compatible with material design
\ No newline at end of file
diff --git a/styles/material-dark/theme/basics.scss b/styles/material-dark/theme/basics.scss
new file mode 100644
index 0000000..4c122d1
--- /dev/null
+++ b/styles/material-dark/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+body { background: $background-color }
+
+// Chrome & Safari scroll bar
+::-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;
+}
+
+// Firefox scroll bar
+html {
+ scrollbar-color: $scroll-bar-thumb-color transparent;
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/button.scss b/styles/material-dark/theme/button.scss
new file mode 100644
index 0000000..1231bac
--- /dev/null
+++ b/styles/material-dark/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+
+ &.active {
+ color: $icon-button-active-color;
+
+ &:hover { color: $icon-button-active-hover-color }
+ }
+
+ &.disabled { color: $disabled-icon-color }
+
+ &.inverted {
+ color: $icon-button-color;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-background-hover-color;
+ }
+ }
+
+ &.overlayed {
+ border-radius: 50%;
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+
+ &:hover {
+ background: $media-icon-background-color;
+ color: $media-icon-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;
+ color: $icon-button-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;
+ margin: 2px;
+
+ &:hover { background: $contained-button-hover-color }
+
+ .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.confirmation-modal__cancel-button {
+ box-shadow: none;
+ background-color: transparent;
+ margin: 0 8px;
+ color: $text-button-color;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
+}
+
+.spoiler-button__overlay__label {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/columns.scss b/styles/material-dark/theme/columns.scss
new file mode 100644
index 0000000..54effff
--- /dev/null
+++ b/styles/material-dark/theme/columns.scss
@@ -0,0 +1,474 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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: $top-bar-text-color;
+ }
+
+ &>.column-header__back-button { color: $top-bar-icon-color }
+
+ &.active {
+ .column-header__icon {
+ color: $top-bar-unread-icon-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: $top-bar-icon-color;
+ margin: 8px 10px;
+ padding: 10px 12px;
+ border-radius: 50%;
+
+ &.active {
+ color: $top-bar-icon-active-color;
+ background: $icon-background-active-color;
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &__setting-btn {
+ color: $icon-button-color;
+ padding: 8px 0;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ text-decoration: none;
+ }
+
+ .fa { font-size: 20px }
+
+ span { vertical-align: middle }
+ }
+
+ &__setting-arrows {
+ font-size: 16px;
+ border-bottom: 8px;
+
+ .column-header__setting-btn {
+ padding: 8px;
+ border-radius: 50%;
+
+ &:last-child { padding-right: 8px }
+ }
+ }
+
+ &__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;
+ background: $card-background-color;
+ border-top: 1px solid $border-color;
+
+ &-inner {
+ background: $card-background-color;
+ padding: 16px;
+ }
+
+ &.collapsed { border-top: none }
+ }
+
+ &__back-button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 8px;
+ margin: auto 0;
+ border-radius: 50%;
+
+ span { display: none }
+ }
+}
+
+.column-subheading {
+ color: $section-text-color;
+ background: $background-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+}
+
+.column-link {
+ color: $ui-text-color;
+ background: $background-color;
+ padding: 16px;
+ border-radius: $nav-drawer-item-radius;
+
+ &:hover { background: $list-background-hover-color }
+
+ &:active,
+ &:focus { background: $list-background-active-color }
+
+ &__icon {
+ margin-right: 32px;
+ font-size: 20px;
+ }
+
+ &--transparent {
+ &.active {
+ color: $ui-text-color;
+ background: $menu-background-active-color;
+
+ &:hover { background: $menu-background-active-hover-color }
+
+ .fa { color: $icon-color }
+ }
+
+ &:hover {
+ color: $ui-text-color;
+
+ .fa { color: $icon-color }
+ }
+ }
+
+ .fa { color: $icon-color }
+}
+
+.column-settings {
+ &__section {
+ color: $section-text-color;
+ margin-bottom: 0;
+ margin-top: 8px;
+ }
+
+ &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 16px;
+
+ span { visibility: hidden } // hide "back" string
+}
+
+.column-inline-form {
+ padding: 16px 0 16px 16px;
+ background: $card-background-color;
+
+ .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+ color: $primary-text-color;
+ background: $text-field-background-color;
+ border-radius: $bar-radius;
+
+ &::placeholder { color: $tips-text-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;
+ }
+ }
+}
+
+// read status in notification column
+.muted {
+ .status {
+ &__content {
+ color: $read-primary-text-color;
+
+ p { color: $read-primary-text-color }
+
+ a { color: $read-secondary-text-color }
+ }
+
+ &__display-name strong { color: $read-primary-text-color }
+ }
+
+ .poll {
+ color: $read-primary-text-color;
+
+ &__chart {
+ background: $read-poll-bar-color;
+
+ &.leading { background: $read-poll-bar-leading-color }
+ }
+
+ &__footer,
+ &__link { color: $read-ui-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 }
+ }
+
+ &__trends {
+ background: $background-color;
+ margin-bottom: 0;
+
+ h4 {
+ color: $section-text-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+ border-bottom: none;
+ }
+ }
+}
+
+.trends {
+ &__header {
+ color: $section-text-color;
+ background: transparent;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
+
+ .fa { margin-right: 8px }
+ }
+
+ &__item {
+ padding: 16px;
+ border-bottom: none;
+
+ &__name {
+ color: $secondary-text-color;
+ font-size: 12px;
+
+ a { color: $primary-text-color }
+ }
+
+ &__current {
+ padding-right: 16px;
+ margin-left: 4px;
+ color: $secondary-text-color;
+ }
+
+ &__sparkline path {
+ stroke: $primary-color;
+ fill: $primary-color;
+ fill-opacity: 0.5;
+ }
+ }
+}
+
+.setting-toggle {
+ &__label {
+ color: $ui-text-color;
+ margin: 8px 8px 8px 14px;
+ }
+}
+
+.announcements {
+ background: $card-background-color;
+ padding: 0;
+
+ &__container { color: $primary-text-color }
+
+ &__item {
+ padding: 16px;
+ font-size: 16px;
+
+ &__unread { background: $badge-color }
+ }
+
+ &__pagination {
+ color: $ui-text-color;
+ padding: 8px 16px;
+ bottom: 8px;
+
+ .icon-button {
+ font-size: 20px !important;
+ width: 20px !important;
+ height: 20px !important;
+ margin: 0 8px;
+ }
+ }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.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: $tab-background-color;
+ border-bottom: 1px solid $border-color;
+ z-index: 1;
+
+ button {
+ background: $tab-background-color;
+ color: $tab-indicator-color;
+ font-size: 16px;
+
+ span { font-size: 14px }
+
+ &.active {
+ color: $tab-indicator-active-color;
+ border-bottom: 4px solid $tab-indicator-active-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 }
+}
+
+.notification-favourite .status.status-direct {
+ .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+ color: $ui-text-color;
+ background-color: $relationship-tag-color;
+ font-size: 12px;
+ border-radius: 17px;
+ padding: 4px 8px;
+ opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/styles/material-dark/theme/components.scss b/styles/material-dark/theme/components.scss
new file mode 100644
index 0000000..ae5bfe1
--- /dev/null
+++ b/styles/material-dark/theme/components.scss
@@ -0,0 +1,534 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.drawer {
+ &__header {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ border-radius: $nav-bar-radius;
+ justify-content: space-around;
+
+ a { transition: none }
+
+ a:hover {
+ background: $icon-background-hover-color;
+ border-radius: 50%;
+ }
+ }
+
+ &__tab {
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ margin: 10px auto 10px;
+ padding: 8px;
+ flex: none;
+ height: 20px;
+ width: 20px;
+ border-bottom: none;
+ text-align: justify;
+
+ &:hover { color: $top-bar-icon-hover-color }
+ }
+
+ &__pager {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ }
+
+ &__inner {
+ background: $card-background-color;
+
+ &.darker {
+ background: $card-background-color;
+ position: inherit;
+ }
+
+ &__mastodon { background: $card-background-color }
+ }
+}
+
+.search {
+ &__input {
+ background: $search-bar-color;
+ color: $tips-text-color;
+ border-radius: $search-bar-radius;
+ padding: 12px 12px 12px 40px;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ color: $search-bar-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: 16px;
+ 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: $search-bar-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 }
+ }
+ }
+}
+
+.navigation-bar {
+ color: $secondary-text-color;
+ padding: 14px;
+
+ strong {
+ color: $ui-text-color;
+ }
+}
+
+.navigation-panel hr {
+ border-top: 1px solid $border-color;
+ margin: 8px 0;
+}
+
+.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: 8px 16px;
+ background: $menu-background-color;
+ color: $menu-text-color;
+
+ &:hover, &:active {
+ background: $menu-background-hover-color;
+ color: $menu-text-color;
+ }
+ }
+
+ &__separator {
+ margin: 8px 0;
+ border-bottom: 1px solid $border-color;
+ }
+}
+
+.compose-form {
+ .autosuggest-textarea {
+ &__textarea {
+ background: $text-field-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__suggestions {
+ @include shadow-1dp;
+ background: $menu-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+ font-size: 16px;
+ padding: 8px 0;
+
+ &__item {
+ padding: 8px;
+ border-radius: 0;
+
+ &:hover { background: $menu-background-hover-color }
+
+ &.selected,
+ &:focus,
+ &:active { background: $menu-background-active-color }
+ }
+ }
+ }
+
+ .spoiler-input__input {
+ color: $ui-text-color;
+ background: $card-background-color;
+
+ &::placeholder { color: $tips-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: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__buttons-wrapper {
+ background: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__poll-wrapper {
+ border-top: 1px solid $border-color;
+
+ ul { padding: 16px 12px 16px 0 }
+
+ 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 }
+ }
+}
+
+.no-reduce-motion .spoiler-input {
+ transition-duration: .2s, .2s;
+}
+
+
+.poll {
+ &__input {
+ border: 2px solid $control-border-color;
+ width: 20px;
+ height: 20px;
+ flex: 0 0 20px;
+ margin: 8px;
+
+ &.checkbox { border-radius: 2px }
+
+ &:focus,
+ &:hover { border: 2px solid $control-border-color }
+ }
+
+ &__text input[type=text] {
+ color: $ui-text-color;
+ background: $text-field-background-color;
+ border: 1px solid $border-color;
+ padding: 8px 12px;
+
+ &:focus { border-color: $border-active-color }
+ }
+
+ &__option input[type=text] {
+ color: $primary-text-color;
+ background: $text-field-background-color;
+ border: none;
+ border-radius: 2px;
+ padding: 8px 16px;
+ }
+
+ &__chart {
+ border-radius: 0;
+ background: $poll-bar-color;
+
+ &.leading { background: $poll-bar-leading-color }
+ }
+
+ &__footer {
+ padding-top: 8px;
+ padding-bottom: 0;
+ color: $ui-text-color;
+ }
+
+ &__link { color: $ui-text-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 {
+ box-shadow: none;
+ border: 1px solid $border-color;
+ 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 }
+}
+
+.attachment-list {
+ &__list a { color: $secondary-text-color }
+
+ &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__container { padding: 24px }
+
+ &__action-bar {
+ background: $card-background-color;
+ padding: 8px;
+ justify-content: flex-end;
+ }
+
+ &__cancel-button {
+ box-shadow: none !important;
+ color: $text-button-color;
+ background: transparent;
+
+ &:hover {
+ color: $text-button-color;
+ background-color: $text-button-hover-color;
+ }
+
+ &:focus,
+ &:active {
+ color: $text-button-color;
+ background-color: $text-button-focus-color;
+ }
+ }
+}
+
+.load-more {
+ color: $ui-text-color;
+
+ &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+ &__name { color: $menu-text-color }
+}
+
+.filter-form {
+ background: $background-color;
+ color: $ui-text-color;
+
+ &__column { padding: 8px 16px }
+}
+
+.directory {
+ &__card {
+ @include shadow-1dp;
+ margin: 8px 4px;
+ border-radius: $card-radius;
+
+ &__img { border-radius: $card-radius $card-radius 0 0 }
+
+ &__bar {
+ background: $card-background-color;
+ padding: 8px 16px;
+
+ .display-name {
+ margin-left: 16px;
+
+ span { color: $secondary-text-color }
+ }
+ }
+
+ &__extra {
+ background: $card-background-color;
+ border-radius: 0 0 $card-radius $card-radius;
+
+ .account__header__content {
+ padding: 8px 16px;
+ border-bottom: 1px solid $border-color;
+ }
+
+ .accounts-table__count { padding: 16px 0 }
+ }
+ }
+}
+
+.mute-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__container { padding: 24px }
+
+ &__explanation { margin-top: 16px }
+
+ &__action-bar {
+ background: $card-background-color;
+ padding: 8px;
+ justify-content: flex-end;
+ }
+
+ &__cancel-button {
+ box-shadow: none !important;
+ background: transparent;
+ margin: 0 8px;
+
+ &:hover {
+ color: $text-button-color;
+ background-color: $text-button-hover-color;
+ }
+
+ &:focus,
+ &:active {
+ color: $text-button-color;
+ background-color: $text-button-focus-color;
+ }
+ }
+
+ .setting-toggle {
+ margin-top: 16px;
+ margin-bottom: 16px;
+
+ &__label {
+ color: $ui-text-color;
+ margin: 0 0 0 12px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/control.scss b/styles/material-dark/theme/control.scss
new file mode 100644
index 0000000..a205a4c
--- /dev/null
+++ b/styles/material-dark/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+ width: 36px;
+ height: 16px;
+ border-radius: 15px;
+
+ &-track {
+ background-color: $toggle-track-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: 22px;
+ }
+ }
+
+ &: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;
+ }
+ }
+}
+
+.compose-form__sensitive-button .checkbox {
+ border: 2px solid $border-color;
+ border-radius: 2px;
+
+ &.active {
+ border-color: $primary-color;
+ background: $primary-color;
+ }
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/emoji-picker.scss b/styles/material-dark/theme/emoji-picker.scss
new file mode 100644
index 0000000..70e2275
--- /dev/null
+++ b/styles/material-dark/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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: $menu-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-active-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: $search-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-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/icons.scss b/styles/material-dark/theme/icons.scss
new file mode 100644
index 0000000..1367647
--- /dev/null
+++ b/styles/material-dark/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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 } // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle } // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+ 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/styles/material-dark/theme/material-icons.scss b/styles/material-dark/theme/material-icons.scss
new file mode 100644
index 0000000..7478562
--- /dev/null
+++ b/styles/material-dark/theme/material-icons.scss
@@ -0,0 +1,159 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.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-share-alt,
+ &.fa-star,
+ &.fa-bookmark,
+ &.fa-ellipsis-h,
+ &.fa-bell,
+ &.fa-eraser,
+ &.fa-users,
+ &.fa-file-text,
+ &.fa-user-plus,
+ &.fa-address-book,
+ &.fa-address-book-o,
+ &.fa-list,
+ &.fa-list-ul,
+ &.fa-eye,
+ &.fa-eye-slash,
+ &.fa-pencil,
+ &.fa-trash,
+ &.fa-play,
+ &.fa-external-link,
+ &.fa-retweet,
+ &.fa-link,
+ &.fa-pause,
+ &.fa-volume-up,
+ &.fa-volume-off,
+ &.fa-expand,
+ &.fa-download,
+ &.fa-arrows-alt,
+ &.fa-compress,
+ &.fa-user-times,
+ &.fa-check,
+ &.fa-quote-right {
+ 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-icon }
+ &.fa-reply-all::before { content: "reply_all" }
+ &.fa-share-alt::before { content: "share" }
+ &.fa-star::before { content: $favorite-icon }
+ &.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-address-book-o::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" }
+ &.fa-play::before { content: "play_arrow" }
+ &.fa-external-link::before { content: "open_in_new" }
+ &.fa-retweet::before { content: "repeat" }
+ &.fa-link::before { content: "link" }
+ &.fa-pause::before { content: "pause" }
+ &.fa-volume-up::before { content: "volume_up" }
+ &.fa-volume-off::before { content: "volume_off" }
+ &.fa-expand::before { content: "web_asset" }
+ &.fa-download::before { content: "file_download" }
+ &.fa-arrows-alt::before { content: "fullscreen" }
+ &.fa-compress::before { content: "fullscreen_exit" }
+ &.fa-user-times::before { content: "delete" }
+ &.fa-check::before { content: "check" }
+ &.fa-quote-right::before { content: "format_quote" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+ .fa.fa-bookmark::before { content: "bookmark_border" }
+ &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+ .fa.fa-star::before { content: $favorite-icon-border }
+
+ &.active,
+ &.active.activate {
+ .fa.fa-star::before { content: $favorite-icon }
+ }
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+ height: 18px;
+ width: 18px;
+ transition: none;
+ background-image: url('data:image/svg+xml;utf8,');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/styles/material-dark/theme/media.scss b/styles/material-dark/theme/media.scss
new file mode 100644
index 0000000..9d02038
--- /dev/null
+++ b/styles/material-dark/theme/media.scss
@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery {
+ border-radius: 0;
+
+ &__item { border-radius: 0 }
+}
+
+.media-modal__close {
+ align-content: center;
+
+ &.icon-button {
+ background: transparent;
+ color: $media-icon-color;
+ text-align: center !important;
+ font-size: 24px !important;
+ width: 48px !important;
+ height: 48px !important;
+ border: 12px;
+
+ &:hover {
+ background: $media-icon-background-hover-color;
+ color: $media-icon-hover-color;
+ }
+
+ .fa-fw { width: 24px }
+ }
+}
+
+.media-modal {
+ &__nav {
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+ height: 48px;
+ width: 48px;
+ margin: auto 16px;
+ padding: 8px;
+ border-radius: 50%;
+
+ .fa { width: 32px }
+ }
+
+ &__button {
+ background-color: $media-page-indicator-color;
+
+ &--active { background-color: $media-page-indicator-active-color }
+ }
+}
+
+.video-player {
+ &__controls {
+ background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+ padding: 0 12px;
+ }
+
+ &__seek {
+ &::before {
+ background: rgba(255,255,255,.2);
+ border-radius: 0;
+ }
+
+ &__buffer {
+ background: rgba(255,255,255,.4);
+ border-radius: 0;
+ }
+
+ &__progress {
+ background: $primary-color;
+ border-radius: 0;
+ }
+
+ &__handle {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__volume {
+ &::before {
+ background: rgba(255,255,255,.4);
+ border-radius: 0;
+ }
+
+ &__current {
+ background: $primary-color;
+ border-radius: 0;
+ }
+
+ &__handle {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__time-current { margin-left: 68px }
+
+ &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/modal.scss b/styles/material-dark/theme/modal.scss
new file mode 100644
index 0000000..2748c87
--- /dev/null
+++ b/styles/material-dark/theme/modal.scss
@@ -0,0 +1,102 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $dialog-radius;
+ width: 300px;
+
+ &__container {
+ text-align: left;
+ padding: 24px;
+ }
+
+ &__action-bar {
+ justify-content: flex-end;
+ background: $card-background-color;
+ padding: 8px;
+ }
+
+ &__secondary-button {
+ box-shadow: none !important;
+ color: $text-button-color;
+ background: transparent;
+ margin: 0 8px;
+
+ &:hover {
+ color: $text-button-color;
+ background: $text-button-hover-color;
+ }
+
+ &:focus,
+ &:active {
+ color: $text-button-color;
+ background-color: $text-button-focus-color;
+ }
+ }
+}
+
+.actions-modal {
+ background: $card-background-color;
+ border-radius: $card-radius;
+
+ ul li:not(:empty) a {
+ color: $ui-text-color;
+ font-size: 16px;
+
+ &:hover {
+ background: $card-background-hover-color;
+ color: $ui-text-color;
+ }
+ }
+
+ .dropdown-menu__separator { border-bottom-color: $border-color }
+
+ .status {
+ background: $card-background-color;
+ border-bottom-color: $border-color;
+ padding-top: 12px;
+ padding-bottom: 12px;
+
+ &__avatar {
+ left: 12px;
+ top: 12px;
+ }
+ }
+}
+
+.report-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__target {
+ padding: 24px;
+ text-align: left;
+ font-weight: bold;
+ }
+
+ &__container {
+ border-top: none;
+ }
+
+ &__comment {
+ border-right: none;
+
+ .setting-text-label { color: $ui-text-color }
+ }
+}
+
+.embed-modal .embed-modal__container {
+ padding: 0 24px 24px 24px;
+
+ .hint {
+ margin-bottom: 16px;
+ color: $secondary-text-color;
+ }
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/responsive.scss b/styles/material-dark/theme/responsive.scss
new file mode 100644
index 0000000..9ae3040
--- /dev/null
+++ b/styles/material-dark/theme/responsive.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+ background: $top-bar-color;
+
+ &__link {
+ padding: 16px 16px 12px 16px;
+ color: $top-bar-icon-color;
+ border-bottom: 4px solid transparent;
+
+ &.active {
+ border-bottom: 4px solid $tab-indicator-active-color;
+ color: $tab-indicator-active-color;
+ }
+
+ .fa { font-size: 20px }
+
+ span {
+ margin-left: 8px;
+ vertical-align: text-bottom;
+ }
+ }
+
+ &__wrapper {
+ @include shadow-4dp;
+ background: transparent;
+ }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+ @include shadow-6dp;
+ background: $floating-action-button-color;
+ color: $floating-action-button-icon-color;
+ font-size: 24px;
+
+ &:hover { background: $floating-action-button-hover-color }
+
+ &:active,
+ &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+ .column { margin: 0 !important }
+ .search__input { padding: 16px 46px }
+
+ .search__icon {
+ .fa {
+ top: 16px;
+ left: 16px;
+ }
+
+ .fa-times-circle.active { left: unset }
+ }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+ .tabs-bar {
+ margin-bottom: 0;
+
+ &__wrapper {
+ padding-top: 0;
+
+ .tabs-bar { margin-bottom: 0 }
+ }
+ }
+
+ .columns-area__panels__main {
+ @include shadow-1dp;
+ padding: 0;
+ }
+}
+
+@media screen and (min-width: 631px) {
+ .tabs-bar__link {
+ &:hover {
+ background: $tab-indicator-background-hover-color;
+ border-bottom-color: $tab-background-color;
+ }
+
+ &:active,
+ &:focus {
+ background: $tab-indicator-background-focus-color;
+ border-bottom-color: $tab-background-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/statuses.scss b/styles/material-dark/theme/statuses.scss
new file mode 100644
index 0000000..65b5fcc
--- /dev/null
+++ b/styles/material-dark/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+ padding: 12px 12px 12px 70px;
+ border-bottom: 1px solid $border-color;
+
+ &__expand { width: 70px }
+
+ &__info {
+ font-size: $name-font-size;
+ padding-right: 4px;
+ }
+
+ &__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: $status-font-size;
+ 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;
+ }
+ }
+
+ &__prepend {
+ color: $secondary-text-color;
+ margin-left: 64px;
+
+ .status__display-name strong { color: $secondary-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: transparent;
+
+ &>.fa {
+ font-size: 26px;
+ }
+ }
+
+ &__title {
+ color: $primary-text-color;
+ margin-bottom: 6px;
+ }
+
+ &__description { color: $secondary-text-color }
+
+ &__actions {
+ &>div {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ }
+
+ button,
+ a {
+ color: $media-icon-color;
+ font-size: 20px;
+ }
+
+ a { bottom: auto }
+ }
+
+ &.compact {
+ border-color: $border-color;
+ outline: none;
+ background: transparent;
+
+ .status-card {
+ &__content { padding: 12px }
+ &__image { flex: 0 0 64px }
+ }
+
+ &:hover { background-color: transparent !important }
+ }
+
+ &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+ .status {
+ &__display-name { color: $primary-text-color }
+ &__relative-time { color: $info-text-color }
+ &__content { color: $primary-text-color }
+ }
+
+ .display-name { color: $secondary-text-color }
+ .display-name strong { color: $primary-text-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 }
+ }
+}
+
+// search user trends
+.display-name {
+ &__html { color: $primary-text-color !important }
+ &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/styles/material-dark/theme/theme.scss b/styles/material-dark/theme/theme.scss
new file mode 100644
index 0000000..f922765
--- /dev/null
+++ b/styles/material-dark/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/styles/material-dark/theme/variables.scss b/styles/material-dark/theme/variables.scss
new file mode 100644
index 0000000..0b94888
--- /dev/null
+++ b/styles/material-dark/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/styles/material-light.scss b/styles/material-light.scss
new file mode 100644
index 0000000..fc45411
--- /dev/null
+++ b/styles/material-light.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'material-light/loader';
diff --git a/styles/material-light/color/black.scss b/styles/material-light/color/black.scss
new file mode 100644
index 0000000..b299981
--- /dev/null
+++ b/styles/material-light/color/black.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-light/color/mastodon-dark.scss b/styles/material-light/color/mastodon-dark.scss
new file mode 100644
index 0000000..c3c1683
--- /dev/null
+++ b/styles/material-light/color/mastodon-dark.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9baec8;
+$ui-text-color: #fff;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #606984;
+$tips-text-color: #6d7889;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4ea2df;
+$menu-text-color: #282c37;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #313543;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-color, 18%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #fff;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.7);
+$text-button-focus-color: transparentize($text-button-color, 0.6);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-color, 32%);
+
+// App bar color
+$top-bar-color: #313543;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: #d9e1e8;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-light/color/mastodon-light.scss b/styles/material-light/color/mastodon-light.scss
new file mode 100644
index 0000000..54d894f
--- /dev/null
+++ b/styles/material-light/color/mastodon-light.scss
@@ -0,0 +1,134 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #217aba;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$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;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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%);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$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: #ccd7e0;
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #ffffff;
+$search-bar-color: #d9e1e8;
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-light/color/plus-classic.scss b/styles/material-light/color/plus-classic.scss
new file mode 100644
index 0000000..60c8370
--- /dev/null
+++ b/styles/material-light/color/plus-classic.scss
@@ -0,0 +1,134 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$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;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// 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: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// 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($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-light/color/v1-dark.scss b/styles/material-light/color/v1-dark.scss
new file mode 100644
index 0000000..77cef82
--- /dev/null
+++ b/styles/material-light/color/v1-dark.scss
@@ -0,0 +1,134 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-light/color/v1-light.scss b/styles/material-light/color/v1-light.scss
new file mode 100644
index 0000000..64f8d58
--- /dev/null
+++ b/styles/material-light/color/v1-light.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$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;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// 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: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// 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($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-light/color/v2-dark.scss b/styles/material-light/color/v2-dark.scss
new file mode 100644
index 0000000..8c575bc
--- /dev/null
+++ b/styles/material-light/color/v2-dark.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #272727;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-light/color/v2-light.scss b/styles/material-light/color/v2-light.scss
new file mode 100644
index 0000000..20336e9
--- /dev/null
+++ b/styles/material-light/color/v2-light.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$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;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// 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: transparentize(#000000, 0.9);
+$icon-background-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$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;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$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: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: #ffffff;
+$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
+$floating-action-button-active-color: darken($floating-action-button-color, 10%);
+$floating-action-button-icon-color: $primary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// 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;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/styles/material-light/custom_color.scss b/styles/material-light/custom_color.scss
new file mode 100644
index 0000000..b4ac468
--- /dev/null
+++ b/styles/material-light/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/styles/material-light/custom_config.scss b/styles/material-light/custom_config.scss
new file mode 100644
index 0000000..7e28b95
--- /dev/null
+++ b/styles/material-light/custom_config.scss
@@ -0,0 +1,2 @@
+@charset "UTF-8";
+@import 'color/v1-light';
diff --git a/styles/material-light/custom_layout.scss b/styles/material-light/custom_layout.scss
new file mode 100644
index 0000000..3b4e0e6
--- /dev/null
+++ b/styles/material-light/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
diff --git a/styles/material-light/icon_config.scss b/styles/material-light/icon_config.scss
new file mode 100644
index 0000000..79d5456
--- /dev/null
+++ b/styles/material-light/icon_config.scss
@@ -0,0 +1,26 @@
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
+
+$favorite-icon-color: #ffd600; // Star
+//$favorite-icon-color: #ff4081; // Heart
+//$favorite-icon-color: #db4437; // +1
+//$favorite-icon-color: #ffffff; // inverted +1
+
+
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment"; // blooming
+
+
+// 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
+}
diff --git a/styles/material-light/layout/material-v1.scss b/styles/material-light/layout/material-v1.scss
new file mode 100644
index 0000000..825deaf
--- /dev/null
+++ b/styles/material-light/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// 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
+
+
+// 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/styles/material-light/layout/material-v2.scss b/styles/material-light/layout/material-v2.scss
new file mode 100644
index 0000000..853d82b
--- /dev/null
+++ b/styles/material-light/layout/material-v2.scss
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+//$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
+
+
+// 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/styles/material-light/loader.scss b/styles/material-light/loader.scss
new file mode 100644
index 0000000..673066e
--- /dev/null
+++ b/styles/material-light/loader.scss
@@ -0,0 +1,7 @@
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
diff --git a/styles/material-light/plugins/cards.scss b/styles/material-light/plugins/cards.scss
new file mode 100644
index 0000000..c134cbe
--- /dev/null
+++ b/styles/material-light/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+ box-shadow: none !important;
+ margin: 2px 0 !important;
+ padding: 8px !important;
+
+ > .scrollable { background: $background-color }
+}
+
+.status {
+ border-bottom: 0;
+ border-radius: $card-radius;
+ background: $card-background-color;
+
+ &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+ @include shadow-1dp;
+ margin: 8px 2px;
+ border-radius: $card-radius;
+ background: $card-background-color;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+ @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/styles/material-light/plugins/dense.scss b/styles/material-light/plugins/dense.scss
new file mode 100644
index 0000000..b3ba408
--- /dev/null
+++ b/styles/material-light/plugins/dense.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+ &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+ &__buttons { height: 48px }
+
+ &__button {
+ margin: 8px;
+ padding: 10px 8px;
+
+ .fa { vertical-align: text-top }
+ }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+ padding: 12px 16px;
+
+ p { margin-bottom: 12px }
+}
+
+.compose-form {
+ .compose-form__publish { padding-top: 8px }
+}
+
+.status {
+ padding: 8px 8px 8px 66px;
+
+ &__expand { width: 66px }
+
+ &__info { padding-right: 0 }
+
+ &__avatar {
+ left: 8px;
+ top: 10px;
+ }
+
+ &__content { padding-top: 2px }
+}
+
+.detailed-status {
+ padding: 14px;
+
+ &__meta { margin-top: 14px }
+
+ &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/styles/material-light/plugins/plus.scss b/styles/material-light/plugins/plus.scss
new file mode 100644
index 0000000..5b22063
--- /dev/null
+++ b/styles/material-light/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+ background: #eeeeee;
+ width: 28px !important;
+ height: 28px !important;
+
+ .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+ left: -34px;
+
+ .star-icon {
+ border-radius: 50%;
+ width: 28px;
+ height: 28px;
+ vertical-align: baseline;
+ font-size: 18px;
+
+ &.fa-fw::before { vertical-align: middle }
+ }
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/_functions.scss b/styles/material-light/theme/_functions.scss
new file mode 100644
index 0000000..0374231
--- /dev/null
+++ b/styles/material-light/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color ($color) {
+ @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/_mixins.scss b/styles/material-light/theme/_mixins.scss
new file mode 100644
index 0000000..5f573e3
--- /dev/null
+++ b/styles/material-light/theme/_mixins.scss
@@ -0,0 +1,25 @@
+@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 }
+
+@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
diff --git a/styles/material-light/theme/account.scss b/styles/material-light/theme/account.scss
new file mode 100644
index 0000000..34a8a18
--- /dev/null
+++ b/styles/material-light/theme/account.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+ border-bottom: 1px solid $border-color;
+
+ .account__display-name { color: $primary-text-color }
+ .account__display-name strong { color: $secondary-text-color }
+
+ &__avatar {
+ border-radius: $avater-radius;
+ width: 40px;
+ height: 40px;
+
+ &-overlay {
+ &-base {
+ border-radius: 50%;
+ width: 44px;
+ height: 44px;
+ background-size: 44px;
+ }
+
+ &-overlay { border-radius: $avater-radius }
+ }
+ }
+
+ &__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 }
+ }
+ }
+ }
+
+ &__content { color: $secondary-text-color }
+ }
+
+ &__section-headline {
+ background: $text-tab-background-color;
+ border-bottom: 1px solid $border-color;
+
+ a {
+ padding: 16px 0;
+ color: $text-tab-indicator-color;
+
+ &.active {
+ color: $text-tab-indicator-active-color;
+ border-bottom: 4px solid $text-tab-indicator-active-color;
+
+ &::before,
+ &:after { border: none }
+
+ &:focus { background: $text-tab-indicator-background-focus-color }
+ }
+
+ &:hover { background: $text-tab-indicator-background-hover-color }
+ }
+ }
+}
+
+.account-role {
+ padding: 4px 8px;
+ border-radius: 17px;
+ color: $ui-text-color;
+ background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+ color: $ui-text-color;
+
+ small { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/base_config.scss b/styles/material-light/theme/base_config.scss
new file mode 100644
index 0000000..73ff009
--- /dev/null
+++ b/styles/material-light/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+}*/
+
+
+// Status font size in timeline
+$status-font-size: 15px; // mastodon default
+//$status-font-size: 16px; // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px; // mastodon default
+//$name-font-size: 16px; // compatible with material design
\ No newline at end of file
diff --git a/styles/material-light/theme/basics.scss b/styles/material-light/theme/basics.scss
new file mode 100644
index 0000000..4c122d1
--- /dev/null
+++ b/styles/material-light/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+body { background: $background-color }
+
+// Chrome & Safari scroll bar
+::-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;
+}
+
+// Firefox scroll bar
+html {
+ scrollbar-color: $scroll-bar-thumb-color transparent;
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/button.scss b/styles/material-light/theme/button.scss
new file mode 100644
index 0000000..1231bac
--- /dev/null
+++ b/styles/material-light/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.icon-button {
+ color: $icon-button-color;
+ border-radius: 50%;
+
+ &.active {
+ color: $icon-button-active-color;
+
+ &:hover { color: $icon-button-active-hover-color }
+ }
+
+ &.disabled { color: $disabled-icon-color }
+
+ &.inverted {
+ color: $icon-button-color;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ background-color: $icon-background-hover-color;
+ }
+ }
+
+ &.overlayed {
+ border-radius: 50%;
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+
+ &:hover {
+ background: $media-icon-background-color;
+ color: $media-icon-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;
+ color: $icon-button-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;
+ margin: 2px;
+
+ &:hover { background: $contained-button-hover-color }
+
+ .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.confirmation-modal__cancel-button {
+ box-shadow: none;
+ background-color: transparent;
+ margin: 0 8px;
+ color: $text-button-color;
+
+ &:hover { background: $text-button-hover-color }
+
+ &:focus { background: $text-button-focus-color }
+}
+
+.spoiler-button__overlay__label {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/columns.scss b/styles/material-light/theme/columns.scss
new file mode 100644
index 0000000..54effff
--- /dev/null
+++ b/styles/material-light/theme/columns.scss
@@ -0,0 +1,474 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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: $top-bar-text-color;
+ }
+
+ &>.column-header__back-button { color: $top-bar-icon-color }
+
+ &.active {
+ .column-header__icon {
+ color: $top-bar-unread-icon-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: $top-bar-icon-color;
+ margin: 8px 10px;
+ padding: 10px 12px;
+ border-radius: 50%;
+
+ &.active {
+ color: $top-bar-icon-active-color;
+ background: $icon-background-active-color;
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &:hover {
+ color: $top-bar-icon-hover-color;
+ background: $icon-background-hover-color;
+ }
+ }
+
+ &__setting-btn {
+ color: $icon-button-color;
+ padding: 8px 0;
+
+ &:hover {
+ color: $icon-button-hover-color;
+ text-decoration: none;
+ }
+
+ .fa { font-size: 20px }
+
+ span { vertical-align: middle }
+ }
+
+ &__setting-arrows {
+ font-size: 16px;
+ border-bottom: 8px;
+
+ .column-header__setting-btn {
+ padding: 8px;
+ border-radius: 50%;
+
+ &:last-child { padding-right: 8px }
+ }
+ }
+
+ &__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;
+ background: $card-background-color;
+ border-top: 1px solid $border-color;
+
+ &-inner {
+ background: $card-background-color;
+ padding: 16px;
+ }
+
+ &.collapsed { border-top: none }
+ }
+
+ &__back-button {
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 8px;
+ margin: auto 0;
+ border-radius: 50%;
+
+ span { display: none }
+ }
+}
+
+.column-subheading {
+ color: $section-text-color;
+ background: $background-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+}
+
+.column-link {
+ color: $ui-text-color;
+ background: $background-color;
+ padding: 16px;
+ border-radius: $nav-drawer-item-radius;
+
+ &:hover { background: $list-background-hover-color }
+
+ &:active,
+ &:focus { background: $list-background-active-color }
+
+ &__icon {
+ margin-right: 32px;
+ font-size: 20px;
+ }
+
+ &--transparent {
+ &.active {
+ color: $ui-text-color;
+ background: $menu-background-active-color;
+
+ &:hover { background: $menu-background-active-hover-color }
+
+ .fa { color: $icon-color }
+ }
+
+ &:hover {
+ color: $ui-text-color;
+
+ .fa { color: $icon-color }
+ }
+ }
+
+ .fa { color: $icon-color }
+}
+
+.column-settings {
+ &__section {
+ color: $section-text-color;
+ margin-bottom: 0;
+ margin-top: 8px;
+ }
+
+ &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ color: $top-bar-icon-color;
+ padding: 16px;
+
+ span { visibility: hidden } // hide "back" string
+}
+
+.column-inline-form {
+ padding: 16px 0 16px 16px;
+ background: $card-background-color;
+
+ .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+ color: $primary-text-color;
+ background: $text-field-background-color;
+ border-radius: $bar-radius;
+
+ &::placeholder { color: $tips-text-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;
+ }
+ }
+}
+
+// read status in notification column
+.muted {
+ .status {
+ &__content {
+ color: $read-primary-text-color;
+
+ p { color: $read-primary-text-color }
+
+ a { color: $read-secondary-text-color }
+ }
+
+ &__display-name strong { color: $read-primary-text-color }
+ }
+
+ .poll {
+ color: $read-primary-text-color;
+
+ &__chart {
+ background: $read-poll-bar-color;
+
+ &.leading { background: $read-poll-bar-leading-color }
+ }
+
+ &__footer,
+ &__link { color: $read-ui-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 }
+ }
+
+ &__trends {
+ background: $background-color;
+ margin-bottom: 0;
+
+ h4 {
+ color: $section-text-color;
+ padding: 12px 16px;
+ border-top: 1px solid $border-color;
+ border-bottom: none;
+ }
+ }
+}
+
+.trends {
+ &__header {
+ color: $section-text-color;
+ background: transparent;
+ border-bottom: 1px solid $border-color;
+ padding: 16px;
+
+ .fa { margin-right: 8px }
+ }
+
+ &__item {
+ padding: 16px;
+ border-bottom: none;
+
+ &__name {
+ color: $secondary-text-color;
+ font-size: 12px;
+
+ a { color: $primary-text-color }
+ }
+
+ &__current {
+ padding-right: 16px;
+ margin-left: 4px;
+ color: $secondary-text-color;
+ }
+
+ &__sparkline path {
+ stroke: $primary-color;
+ fill: $primary-color;
+ fill-opacity: 0.5;
+ }
+ }
+}
+
+.setting-toggle {
+ &__label {
+ color: $ui-text-color;
+ margin: 8px 8px 8px 14px;
+ }
+}
+
+.announcements {
+ background: $card-background-color;
+ padding: 0;
+
+ &__container { color: $primary-text-color }
+
+ &__item {
+ padding: 16px;
+ font-size: 16px;
+
+ &__unread { background: $badge-color }
+ }
+
+ &__pagination {
+ color: $ui-text-color;
+ padding: 8px 16px;
+ bottom: 8px;
+
+ .icon-button {
+ font-size: 20px !important;
+ width: 20px !important;
+ height: 20px !important;
+ margin: 0 8px;
+ }
+ }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.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: $tab-background-color;
+ border-bottom: 1px solid $border-color;
+ z-index: 1;
+
+ button {
+ background: $tab-background-color;
+ color: $tab-indicator-color;
+ font-size: 16px;
+
+ span { font-size: 14px }
+
+ &.active {
+ color: $tab-indicator-active-color;
+ border-bottom: 4px solid $tab-indicator-active-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 }
+}
+
+.notification-favourite .status.status-direct {
+ .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+ color: $ui-text-color;
+ background-color: $relationship-tag-color;
+ font-size: 12px;
+ border-radius: 17px;
+ padding: 4px 8px;
+ opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/styles/material-light/theme/components.scss b/styles/material-light/theme/components.scss
new file mode 100644
index 0000000..ae5bfe1
--- /dev/null
+++ b/styles/material-light/theme/components.scss
@@ -0,0 +1,534 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.drawer {
+ &__header {
+ @include shadow-4dp;
+ background: $top-bar-color;
+ border-radius: $nav-bar-radius;
+ justify-content: space-around;
+
+ a { transition: none }
+
+ a:hover {
+ background: $icon-background-hover-color;
+ border-radius: 50%;
+ }
+ }
+
+ &__tab {
+ color: $top-bar-icon-color;
+ font-size: 20px;
+ margin: 10px auto 10px;
+ padding: 8px;
+ flex: none;
+ height: 20px;
+ width: 20px;
+ border-bottom: none;
+ text-align: justify;
+
+ &:hover { color: $top-bar-icon-hover-color }
+ }
+
+ &__pager {
+ @include shadow-1dp;
+ border-radius: $card-radius;
+ }
+
+ &__inner {
+ background: $card-background-color;
+
+ &.darker {
+ background: $card-background-color;
+ position: inherit;
+ }
+
+ &__mastodon { background: $card-background-color }
+ }
+}
+
+.search {
+ &__input {
+ background: $search-bar-color;
+ color: $tips-text-color;
+ border-radius: $search-bar-radius;
+ padding: 12px 12px 12px 40px;
+
+ &:focus {
+ @include shadow-2dp;
+ background: $search-bar-focus-color;
+ color: $search-bar-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: 16px;
+ 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: $search-bar-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 }
+ }
+ }
+}
+
+.navigation-bar {
+ color: $secondary-text-color;
+ padding: 14px;
+
+ strong {
+ color: $ui-text-color;
+ }
+}
+
+.navigation-panel hr {
+ border-top: 1px solid $border-color;
+ margin: 8px 0;
+}
+
+.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: 8px 16px;
+ background: $menu-background-color;
+ color: $menu-text-color;
+
+ &:hover, &:active {
+ background: $menu-background-hover-color;
+ color: $menu-text-color;
+ }
+ }
+
+ &__separator {
+ margin: 8px 0;
+ border-bottom: 1px solid $border-color;
+ }
+}
+
+.compose-form {
+ .autosuggest-textarea {
+ &__textarea {
+ background: $text-field-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &::placeholder { color: $tips-text-color }
+ }
+
+ &__suggestions {
+ @include shadow-1dp;
+ background: $menu-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+ font-size: 16px;
+ padding: 8px 0;
+
+ &__item {
+ padding: 8px;
+ border-radius: 0;
+
+ &:hover { background: $menu-background-hover-color }
+
+ &.selected,
+ &:focus,
+ &:active { background: $menu-background-active-color }
+ }
+ }
+ }
+
+ .spoiler-input__input {
+ color: $ui-text-color;
+ background: $card-background-color;
+
+ &::placeholder { color: $tips-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: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__buttons-wrapper {
+ background: $card-background-color;
+ color: $tips-text-color;
+ }
+
+ &__poll-wrapper {
+ border-top: 1px solid $border-color;
+
+ ul { padding: 16px 12px 16px 0 }
+
+ 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 }
+ }
+}
+
+.no-reduce-motion .spoiler-input {
+ transition-duration: .2s, .2s;
+}
+
+
+.poll {
+ &__input {
+ border: 2px solid $control-border-color;
+ width: 20px;
+ height: 20px;
+ flex: 0 0 20px;
+ margin: 8px;
+
+ &.checkbox { border-radius: 2px }
+
+ &:focus,
+ &:hover { border: 2px solid $control-border-color }
+ }
+
+ &__text input[type=text] {
+ color: $ui-text-color;
+ background: $text-field-background-color;
+ border: 1px solid $border-color;
+ padding: 8px 12px;
+
+ &:focus { border-color: $border-active-color }
+ }
+
+ &__option input[type=text] {
+ color: $primary-text-color;
+ background: $text-field-background-color;
+ border: none;
+ border-radius: 2px;
+ padding: 8px 16px;
+ }
+
+ &__chart {
+ border-radius: 0;
+ background: $poll-bar-color;
+
+ &.leading { background: $poll-bar-leading-color }
+ }
+
+ &__footer {
+ padding-top: 8px;
+ padding-bottom: 0;
+ color: $ui-text-color;
+ }
+
+ &__link { color: $ui-text-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 {
+ box-shadow: none;
+ border: 1px solid $border-color;
+ 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 }
+}
+
+.attachment-list {
+ &__list a { color: $secondary-text-color }
+
+ &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__container { padding: 24px }
+
+ &__action-bar {
+ background: $card-background-color;
+ padding: 8px;
+ justify-content: flex-end;
+ }
+
+ &__cancel-button {
+ box-shadow: none !important;
+ color: $text-button-color;
+ background: transparent;
+
+ &:hover {
+ color: $text-button-color;
+ background-color: $text-button-hover-color;
+ }
+
+ &:focus,
+ &:active {
+ color: $text-button-color;
+ background-color: $text-button-focus-color;
+ }
+ }
+}
+
+.load-more {
+ color: $ui-text-color;
+
+ &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+ &__name { color: $menu-text-color }
+}
+
+.filter-form {
+ background: $background-color;
+ color: $ui-text-color;
+
+ &__column { padding: 8px 16px }
+}
+
+.directory {
+ &__card {
+ @include shadow-1dp;
+ margin: 8px 4px;
+ border-radius: $card-radius;
+
+ &__img { border-radius: $card-radius $card-radius 0 0 }
+
+ &__bar {
+ background: $card-background-color;
+ padding: 8px 16px;
+
+ .display-name {
+ margin-left: 16px;
+
+ span { color: $secondary-text-color }
+ }
+ }
+
+ &__extra {
+ background: $card-background-color;
+ border-radius: 0 0 $card-radius $card-radius;
+
+ .account__header__content {
+ padding: 8px 16px;
+ border-bottom: 1px solid $border-color;
+ }
+
+ .accounts-table__count { padding: 16px 0 }
+ }
+ }
+}
+
+.mute-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__container { padding: 24px }
+
+ &__explanation { margin-top: 16px }
+
+ &__action-bar {
+ background: $card-background-color;
+ padding: 8px;
+ justify-content: flex-end;
+ }
+
+ &__cancel-button {
+ box-shadow: none !important;
+ background: transparent;
+ margin: 0 8px;
+
+ &:hover {
+ color: $text-button-color;
+ background-color: $text-button-hover-color;
+ }
+
+ &:focus,
+ &:active {
+ color: $text-button-color;
+ background-color: $text-button-focus-color;
+ }
+ }
+
+ .setting-toggle {
+ margin-top: 16px;
+ margin-bottom: 16px;
+
+ &__label {
+ color: $ui-text-color;
+ margin: 0 0 0 12px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/control.scss b/styles/material-light/theme/control.scss
new file mode 100644
index 0000000..a205a4c
--- /dev/null
+++ b/styles/material-light/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+ width: 36px;
+ height: 16px;
+ border-radius: 15px;
+
+ &-track {
+ background-color: $toggle-track-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: 22px;
+ }
+ }
+
+ &: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;
+ }
+ }
+}
+
+.compose-form__sensitive-button .checkbox {
+ border: 2px solid $border-color;
+ border-radius: 2px;
+
+ &.active {
+ border-color: $primary-color;
+ background: $primary-color;
+ }
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/emoji-picker.scss b/styles/material-light/theme/emoji-picker.scss
new file mode 100644
index 0000000..70e2275
--- /dev/null
+++ b/styles/material-light/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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: $menu-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-active-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: $search-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-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/icons.scss b/styles/material-light/theme/icons.scss
new file mode 100644
index 0000000..1367647
--- /dev/null
+++ b/styles/material-light/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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 } // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle } // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+ 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/styles/material-light/theme/material-icons.scss b/styles/material-light/theme/material-icons.scss
new file mode 100644
index 0000000..7478562
--- /dev/null
+++ b/styles/material-light/theme/material-icons.scss
@@ -0,0 +1,159 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.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-share-alt,
+ &.fa-star,
+ &.fa-bookmark,
+ &.fa-ellipsis-h,
+ &.fa-bell,
+ &.fa-eraser,
+ &.fa-users,
+ &.fa-file-text,
+ &.fa-user-plus,
+ &.fa-address-book,
+ &.fa-address-book-o,
+ &.fa-list,
+ &.fa-list-ul,
+ &.fa-eye,
+ &.fa-eye-slash,
+ &.fa-pencil,
+ &.fa-trash,
+ &.fa-play,
+ &.fa-external-link,
+ &.fa-retweet,
+ &.fa-link,
+ &.fa-pause,
+ &.fa-volume-up,
+ &.fa-volume-off,
+ &.fa-expand,
+ &.fa-download,
+ &.fa-arrows-alt,
+ &.fa-compress,
+ &.fa-user-times,
+ &.fa-check,
+ &.fa-quote-right {
+ 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-icon }
+ &.fa-reply-all::before { content: "reply_all" }
+ &.fa-share-alt::before { content: "share" }
+ &.fa-star::before { content: $favorite-icon }
+ &.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-address-book-o::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" }
+ &.fa-play::before { content: "play_arrow" }
+ &.fa-external-link::before { content: "open_in_new" }
+ &.fa-retweet::before { content: "repeat" }
+ &.fa-link::before { content: "link" }
+ &.fa-pause::before { content: "pause" }
+ &.fa-volume-up::before { content: "volume_up" }
+ &.fa-volume-off::before { content: "volume_off" }
+ &.fa-expand::before { content: "web_asset" }
+ &.fa-download::before { content: "file_download" }
+ &.fa-arrows-alt::before { content: "fullscreen" }
+ &.fa-compress::before { content: "fullscreen_exit" }
+ &.fa-user-times::before { content: "delete" }
+ &.fa-check::before { content: "check" }
+ &.fa-quote-right::before { content: "format_quote" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+ .fa.fa-bookmark::before { content: "bookmark_border" }
+ &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+ .fa.fa-star::before { content: $favorite-icon-border }
+
+ &.active,
+ &.active.activate {
+ .fa.fa-star::before { content: $favorite-icon }
+ }
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+ height: 18px;
+ width: 18px;
+ transition: none;
+ background-image: url('data:image/svg+xml;utf8,');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/styles/material-light/theme/media.scss b/styles/material-light/theme/media.scss
new file mode 100644
index 0000000..9d02038
--- /dev/null
+++ b/styles/material-light/theme/media.scss
@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery {
+ border-radius: 0;
+
+ &__item { border-radius: 0 }
+}
+
+.media-modal__close {
+ align-content: center;
+
+ &.icon-button {
+ background: transparent;
+ color: $media-icon-color;
+ text-align: center !important;
+ font-size: 24px !important;
+ width: 48px !important;
+ height: 48px !important;
+ border: 12px;
+
+ &:hover {
+ background: $media-icon-background-hover-color;
+ color: $media-icon-hover-color;
+ }
+
+ .fa-fw { width: 24px }
+ }
+}
+
+.media-modal {
+ &__nav {
+ background: $media-icon-background-color;
+ color: $media-icon-color;
+ height: 48px;
+ width: 48px;
+ margin: auto 16px;
+ padding: 8px;
+ border-radius: 50%;
+
+ .fa { width: 32px }
+ }
+
+ &__button {
+ background-color: $media-page-indicator-color;
+
+ &--active { background-color: $media-page-indicator-active-color }
+ }
+}
+
+.video-player {
+ &__controls {
+ background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+ padding: 0 12px;
+ }
+
+ &__seek {
+ &::before {
+ background: rgba(255,255,255,.2);
+ border-radius: 0;
+ }
+
+ &__buffer {
+ background: rgba(255,255,255,.4);
+ border-radius: 0;
+ }
+
+ &__progress {
+ background: $primary-color;
+ border-radius: 0;
+ }
+
+ &__handle {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__volume {
+ &::before {
+ background: rgba(255,255,255,.4);
+ border-radius: 0;
+ }
+
+ &__current {
+ background: $primary-color;
+ border-radius: 0;
+ }
+
+ &__handle {
+ transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+ background-color: $primary-color;
+ box-shadow: none;
+ }
+ }
+
+ &__time-current { margin-left: 68px }
+
+ &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/modal.scss b/styles/material-light/theme/modal.scss
new file mode 100644
index 0000000..2748c87
--- /dev/null
+++ b/styles/material-light/theme/modal.scss
@@ -0,0 +1,102 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $dialog-radius;
+ width: 300px;
+
+ &__container {
+ text-align: left;
+ padding: 24px;
+ }
+
+ &__action-bar {
+ justify-content: flex-end;
+ background: $card-background-color;
+ padding: 8px;
+ }
+
+ &__secondary-button {
+ box-shadow: none !important;
+ color: $text-button-color;
+ background: transparent;
+ margin: 0 8px;
+
+ &:hover {
+ color: $text-button-color;
+ background: $text-button-hover-color;
+ }
+
+ &:focus,
+ &:active {
+ color: $text-button-color;
+ background-color: $text-button-focus-color;
+ }
+ }
+}
+
+.actions-modal {
+ background: $card-background-color;
+ border-radius: $card-radius;
+
+ ul li:not(:empty) a {
+ color: $ui-text-color;
+ font-size: 16px;
+
+ &:hover {
+ background: $card-background-hover-color;
+ color: $ui-text-color;
+ }
+ }
+
+ .dropdown-menu__separator { border-bottom-color: $border-color }
+
+ .status {
+ background: $card-background-color;
+ border-bottom-color: $border-color;
+ padding-top: 12px;
+ padding-bottom: 12px;
+
+ &__avatar {
+ left: 12px;
+ top: 12px;
+ }
+ }
+}
+
+.report-modal {
+ background: $card-background-color;
+ color: $ui-text-color;
+ border-radius: $card-radius;
+
+ &__target {
+ padding: 24px;
+ text-align: left;
+ font-weight: bold;
+ }
+
+ &__container {
+ border-top: none;
+ }
+
+ &__comment {
+ border-right: none;
+
+ .setting-text-label { color: $ui-text-color }
+ }
+}
+
+.embed-modal .embed-modal__container {
+ padding: 0 24px 24px 24px;
+
+ .hint {
+ margin-bottom: 16px;
+ color: $secondary-text-color;
+ }
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/responsive.scss b/styles/material-light/theme/responsive.scss
new file mode 100644
index 0000000..9ae3040
--- /dev/null
+++ b/styles/material-light/theme/responsive.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+ background: $top-bar-color;
+
+ &__link {
+ padding: 16px 16px 12px 16px;
+ color: $top-bar-icon-color;
+ border-bottom: 4px solid transparent;
+
+ &.active {
+ border-bottom: 4px solid $tab-indicator-active-color;
+ color: $tab-indicator-active-color;
+ }
+
+ .fa { font-size: 20px }
+
+ span {
+ margin-left: 8px;
+ vertical-align: text-bottom;
+ }
+ }
+
+ &__wrapper {
+ @include shadow-4dp;
+ background: transparent;
+ }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+ @include shadow-6dp;
+ background: $floating-action-button-color;
+ color: $floating-action-button-icon-color;
+ font-size: 24px;
+
+ &:hover { background: $floating-action-button-hover-color }
+
+ &:active,
+ &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+ .column { margin: 0 !important }
+ .search__input { padding: 16px 46px }
+
+ .search__icon {
+ .fa {
+ top: 16px;
+ left: 16px;
+ }
+
+ .fa-times-circle.active { left: unset }
+ }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+ .tabs-bar {
+ margin-bottom: 0;
+
+ &__wrapper {
+ padding-top: 0;
+
+ .tabs-bar { margin-bottom: 0 }
+ }
+ }
+
+ .columns-area__panels__main {
+ @include shadow-1dp;
+ padding: 0;
+ }
+}
+
+@media screen and (min-width: 631px) {
+ .tabs-bar__link {
+ &:hover {
+ background: $tab-indicator-background-hover-color;
+ border-bottom-color: $tab-background-color;
+ }
+
+ &:active,
+ &:focus {
+ background: $tab-indicator-background-focus-color;
+ border-bottom-color: $tab-background-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/statuses.scss b/styles/material-light/theme/statuses.scss
new file mode 100644
index 0000000..65b5fcc
--- /dev/null
+++ b/styles/material-light/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+ padding: 12px 12px 12px 70px;
+ border-bottom: 1px solid $border-color;
+
+ &__expand { width: 70px }
+
+ &__info {
+ font-size: $name-font-size;
+ padding-right: 4px;
+ }
+
+ &__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: $status-font-size;
+ 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;
+ }
+ }
+
+ &__prepend {
+ color: $secondary-text-color;
+ margin-left: 64px;
+
+ .status__display-name strong { color: $secondary-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: transparent;
+
+ &>.fa {
+ font-size: 26px;
+ }
+ }
+
+ &__title {
+ color: $primary-text-color;
+ margin-bottom: 6px;
+ }
+
+ &__description { color: $secondary-text-color }
+
+ &__actions {
+ &>div {
+ background: $media-icon-background-color;
+ border-radius: $button-radius;
+ }
+
+ button,
+ a {
+ color: $media-icon-color;
+ font-size: 20px;
+ }
+
+ a { bottom: auto }
+ }
+
+ &.compact {
+ border-color: $border-color;
+ outline: none;
+ background: transparent;
+
+ .status-card {
+ &__content { padding: 12px }
+ &__image { flex: 0 0 64px }
+ }
+
+ &:hover { background-color: transparent !important }
+ }
+
+ &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+ .status {
+ &__display-name { color: $primary-text-color }
+ &__relative-time { color: $info-text-color }
+ &__content { color: $primary-text-color }
+ }
+
+ .display-name { color: $secondary-text-color }
+ .display-name strong { color: $primary-text-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 }
+ }
+}
+
+// search user trends
+.display-name {
+ &__html { color: $primary-text-color !important }
+ &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/styles/material-light/theme/theme.scss b/styles/material-light/theme/theme.scss
new file mode 100644
index 0000000..f922765
--- /dev/null
+++ b/styles/material-light/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/styles/material-light/theme/variables.scss b/styles/material-light/theme/variables.scss
new file mode 100644
index 0000000..0b94888
--- /dev/null
+++ b/styles/material-light/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/styles/mfc/0-palette.css b/styles/mfc/0-palette.css
new file mode 100644
index 0000000..19fe4d8
--- /dev/null
+++ b/styles/mfc/0-palette.css
@@ -0,0 +1,67 @@
+/*------------------------------------------------------------------------------
+* DEFINE COLOR PALETTE
+*
+* Choose the CSS Variables that will be applied to recolor elements.
+* The current format is to use hex codes, e.g. #00FF00.
+*
+* A future refactor to use rgb() instead may allow transparency mods
+* via using these variables with rgba(). Hex codes currently do not
+* work with rgba(), so no transparency mods are included except for
+* those defined in absolute terms (i.e., non-variable colors).
+*
+* Foreground Colors:
+* --bg: | Background for foreground elements.
+* --text: | A color that stands out against bg.
+* --textBold: | A color that stands out strongly against bg.
+* --textMuted: | A color that stands out slightly against bg.
+*
+* Background Colors:
+* --bgPage: | Background for non-foreground elements.
+* --textPage: | A color that stands out against bgPage.
+* --textPageBold: | A color that stands out strongly against bgPage.
+* --textPageMuted: | A color that stands out slightly against bgPage.
+*
+* Highlights Colors:
+* --bgHead: | Background for column headers.
+* --textHead: | A color that stands out (strongly) against bgHead.
+* --accent: | An accent color for links and buttons.
+* --accentText: | A color that stands out (strongly) against accent.
+*
+* Palette advisories for choosing colors:
+* - Consider using an off-white or off-black for text tones,
+* but not necessary as long as there is sufficient contrast.
+* - Bold colors are highly recommended to be strong colors,
+* like pure white or pure black.
+* - Muted colors can be off-grey or any mid-tone with slight contrast.
+* - It might be best to base the background palette on a slightly
+* darker or lighter version of the foreground palette, but
+* this is no longer strictly necessary; you may use mixed palettes.
+* It is now possible to use a dark bgPage and light bg, or vice-versa.
+------------------------------------------------------------------------------*/
+
+/* copy and paste the desired palette at the end of this section,
+* or you can delete the ones you don't want, or comment them out.
+*/
+
+
+
+
+/* Droid/Flamingo:
+* dark neutral-grey page, with either Android Green or Flamingo accent.
+*/
+:root {
+--bg: #222;
+--text: #ddd;
+--textBold: #fff;
+--textMuted: #777;
+
+--bgPage: #111;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #333;
+--textHead: var(--textBold);
+--accent: #a4c639; /* flamingo: #f09 */
+--accentText: var(--textHead);
+}
diff --git a/styles/mfc/1-foreground.css b/styles/mfc/1-foreground.css
new file mode 100644
index 0000000..8220187
--- /dev/null
+++ b/styles/mfc/1-foreground.css
@@ -0,0 +1,276 @@
+/*------------------------------------------------------------------------------
+* FOREGROUND COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/*----------------------
+base background and text
+----------------------*/
+
+/* status columns */
+.column>.scrollable,
+.status,
+ .status__content,
+.detailed-status,
+ .detailed-status__action-bar,
+ .focusable:focus .detailed-status,
+ .focusable:focus .detailed-status__action-bar,
+.setting-text,
+ .setting-text:active,
+ .setting-text:focus,
+.status-direct .status__content .status__content__spoiler-link,
+.column-link,
+ .getting-started a.column-link,
+ .getting-started__trends .trends__item__current,
+.account__header__content,
+.account__header__bio .account__header__content,
+.account--panel,
+.account__header__bar,
+.account__header__account-note textarea,
+.follow_requests-unlocked_explanation,
+.account-authorize,
+.trends__header,
+/* new conversations */
+.conversation--unread,
+.conversation__content__names,
+/* search */
+.search__input,
+ .search__input:focus,
+.search-results .account,
+.trends__item,
+ .trends__item__name a,
+ .trends__item__current,
+/* compose form */
+.reply-indicator__content, /* in reply to */
+.compose-form .spoiler-input__input, /* cw */
+.compose-form .autosuggest-textarea__textarea, /* post */
+.compose-form .compose-form__modifiers, /* image uploads */
+.compose-form .compose-form__buttons-wrapper, /* buttons */
+.compose-form .autosuggest-textarea__textarea::placeholder,
+.compose-form .spoiler-input__input::placeholder,
+/* settings page */
+.simple_form textarea,
+ .simple_form textarea:active,
+ .simple_form textarea:focus,
+.simple_form input[type=email],
+ .simple_form input[type=email]:active,
+ .simple_form input[type=email]:focus,
+.simple_form input[type=number],
+ .simple_form input[type=number]:active,
+ .simple_form input[type=number]:focus,
+.simple_form input[type=password],
+ .simple_form input[type=password]:active,
+ .simple_form input[type=password]:focus,
+.simple_form input[type=text],
+ .simple_form input[type=text]:active,
+ .simple_form input[type=text]:focus,
+.table td,
+ .table th,
+ .table.inline-table>tbody>tr:nth-child(odd)>td,
+ .table.inline-table>tbody>tr:nth-child(odd)>th,
+ .table>tbody>tr:nth-child(odd)>td,
+ .table>tbody>tr:nth-child(odd)>th,
+ .batch-table__row,
+ .batch-table__row:nth-child(2n),
+ .batch-table__row:hover,
+.column-inline-form label,
+.dashboard__counters > div > div, .dashboard__counters > div > a,
+.log-entry,
+ .log-entry__header,
+/* modals */
+.actions-modal,
+ .actions-modal .status,
+ .actions-modal ul li:not(:empty) a,
+ .status.light .display-name strong, .status.light .status__content,
+.boost-modal,
+.confirmation-modal,
+.dropdown-menu, .dropdown-menu__item a,
+.mute-modal,
+ .block-modal .setting-toggle__label, .mute-modal .setting-toggle__label,
+.report-modal,
+ .report-modal__statuses .status__content p,
+ .report-modal__comment .setting-toggle__label,
+.list-editor,
+ .list-editor .drawer__inner,
+ .list-editor .drawer__inner.backdrop,
+.account__moved-note,
+.introduction__pager,
+.introduction__text p,
+.reactions-bar__item,
+/* profile cards */
+.card__bar,
+ .card>a:active .card__bar,
+ .card>a:focus .card__bar,
+ .card>a:hover .card__bar,
+.directory__card__bar,
+ .directory__card__extra,
+ .accounts-table__count,
+ .directory__card__img,
+/* public pages */
+#new_user .lead,
+.landing .hero-widget__footer,
+ .landing .simple_form .user_agreement .label_input > label,
+ .landing .hero-widget h4,
+ .hero-widget__counter,
+ .landing .hero-widget__counter span,
+ .directory__tag > a, .directory__tag > div,
+.activity-stream .entry,
+.landing-page #mastodon-timeline,
+ .landing-page #mastodon-timeline p,
+ .landing-page__forms,
+ .landing-page__information,
+ .landing-page li,
+ .landing-page p,
+ .directory__tag h4 small,
+ .directory__tag h4 .fa,
+ .landing-page .features-list .features-list__row .text,
+ .landing-page .features-list .features-list__row .visual .fa,
+ .landing-page__short-description h1,
+ .landing-page .separator-or span,
+.box-widget,
+ .contact-widget,
+ .landing-page__information.contact-widget,
+.rich-formatting li,
+ .rich-formatting p,
+.public-layout .public-account-bio .account__header__content,
+ .public-layout .public-account-bio .roles,
+ .public-layout .public-account-bio__extra,
+ .public-layout .public-account-bio,
+.public-layout .public-account-header__bar::before,
+.account__header__fields dt,
+.account__header__fields dd,
+.hero-widget__text,
+.load-more,
+.button.button-secondary,
+.simple_form__overlay-area__overlay
+{
+background: var(--bg);
+color: var(--text)
+}
+
+/*--------------------
+override for bold text
+--------------------*/
+
+/* primary elements */
+.account__display-name strong,
+ .status__display-name strong,
+ .detailed-status__display-name strong,
+ .card__bar .display-name strong,
+ .directory__card__bar .display-name strong,
+ .account__header__tabs__name h1,
+ .account__header__extra__links a strong,
+.account__action-bar__tab strong, /* profile counters */
+.conversation__content__names a,
+.conversation--unread .conversation__content__relative-time,
+/* settings page*/
+.dashboard__counters__num, .dashboard__counters__text,
+.log-entry a,
+ .log-entry .username,
+ .log-entry .target,
+/* public pages */
+#new_user .lead strong,
+.landing-page h3,
+ .landing-page h4,
+ .landing-page em,
+ .landing-page h5,
+ .landing-page h6,
+ .directory__tag h4,
+.rich-formatting h3,
+ .rich-formatting h4,
+.public-layout .public-account-header__tabs__tabs .counter .counter-number,
+.account__header__fields dt
+{
+color: var(--textBold)
+}
+
+/*---------------------
+override for muted text
+---------------------*/
+
+/* secondary elements */
+.display-name__account,
+ .account .account__display-name,
+ .card__bar .display-name span,
+ .directory__card__bar .display-name span,
+ .accounts-table__count small,
+ .account__header__tabs__name h1 small,
+ .account__header__extra__links a,
+ .account__header__account-note label,
+ .account__header__account-note textarea::placeholder,
+ .account__header__extra__links,
+.detailed-status__meta,
+.status__relative-time,
+.status__action-bar__counter__label,
+.status__prepend,
+ .status__prepend .status__display-name strong,
+.account__moved-note__message,
+.attachment-list.compact .fa,
+.icon-button,
+ .icon-button.disabled,
+ .icon-button.active:hover,
+.account__action-bar__tab>span,
+.compose-form .icon-button.inverted,
+ .compose-form .text-icon-button,
+ .compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter,
+ .compose-form .autosuggest-textarea__textarea::placeholder,
+ .compose-form .spoiler-input__input::placeholder,
+.upload-progress,
+.search__icon .fa,
+ .search__icon .fa-times-circle,
+ .trends__item__name,
+.search__input::placeholder,
+.notification__message,
+.muted .status__content,
+ .muted .status__content a,
+ .muted .status__content p,
+ .muted .status__display-name strong,
+.attachment-list__list a,
+a.table-action-link,
+ .table a.table-action-link,
+ button.table-action-link,
+.status__wrapper--filtered,
+.conversation__content__relative-time,
+/* settings page */
+.dashboard__counters__label,
+.log-entry__timestamp,
+/* public pages */
+.landing-page__short-description h1 small,
+ .landing-page__short-description h1 small span,
+.simple_form p.hint.subtle-hint,
+.public-layout .public-account-bio .roles,
+ .public-layout .public-account-bio__extra,
+ .public-layout .public-account-header__tabs__tabs .counter,
+.load-more,
+.account__disclaimer
+{
+color: var(--textMuted)
+}
+
+/* fix announcement reactions */
+.reactions-bar__item__count {color: inherit}
+
+/* fix for conversations font weight */
+.conversation--unread .conversation__content__info {font-weight: 400}
+
+/* fix for border colors */
+.account--panel,
+.account__header__bar,
+.account__header__bio .account__header__fields,
+.status,
+.detailed-status__action-bar,
+.public-layout .public-account-header__tabs__tabs .counter,
+.account__header__fields,
+.account__header__fields dl,
+.account__header__bio .account__header__fields,
+.account,
+.directory__card__extra .account__header__content,
+.account__section-headline, .notification__filter-bar,
+.actions-modal .dropdown-menu__separator, .actions-modal .status
+{border-color: var(--textMuted)}
+
+.account__header__account-note,
+.announcements-list
+{border-color: transparent}
+
+.account__section-headline a.active::after, .account__section-headline button.active::after, .notification__filter-bar a.active::after, .notification__filter-bar button.active::after
+{border-color: transparent transparent var(--bg)}
diff --git a/styles/mfc/2-background.css b/styles/mfc/2-background.css
new file mode 100644
index 0000000..3e1e788
--- /dev/null
+++ b/styles/mfc/2-background.css
@@ -0,0 +1,182 @@
+/*------------------------------------------------------------------------------
+* BACKGROUND COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/*----------------------
+base background and text
+----------------------*/
+
+/* background and drawer */
+body.app-body,
+.ui,
+.drawer__tab,
+.drawer__inner,
+.drawer__inner.darker,
+.drawer__inner__mastodon,
+.tabs-bar,
+.tabs-bar__wrapper,
+.getting-started,
+.search-results__section h5,
+.account__section-headline,
+ .account__section-headline button,
+.notification__filter-bar,
+ .notification__filter-bar button,
+.timeline-hint,
+.introduction,
+.account__header__image,
+.account__header__account-note textarea:focus,
+.flex-spacer, .getting-started, .getting-started__wrapper,
+/* DMs */
+.status.status-direct,
+ .status.status-direct:not(.read),
+ .focusable:focus .status.status-direct,
+ .status-direct .status__content,
+ .notification-favourite .status.status-direct,
+/* column preferences */
+.column-settings__section,
+ .column-header__collapsible,
+ .column-header__collapsible-inner,
+ .column-header__button.active,
+ .setting-meta__label,
+ .setting-toggle__label,
+.column-subheading,
+.content-wrapper,
+.media-spoiler,
+ .video-player__spoiler,
+ .video-player__spoiler.active:active,
+ .video-player__spoiler.active:focus,
+.react-toggle-track,
+.filter-form,
+/* in reply to */
+.reply-indicator,
+.reply-indicator__display-name,
+.reply-indicator__content,
+.reply-indicator__cancel .icon-button.inverted,
+.reply-indicator__content .status__content__spoiler-link,
+/* cw show more */
+.status__content .status__content__spoiler-link,
+.compose__action-bar .icon-button,
+/* settings page */
+.admin-wrapper .sidebar-wrapper,
+ .admin-wrapper .sidebar-wrapper__inner,
+ .admin-wrapper .sidebar ul a,
+ .admin-wrapper .sidebar ul a.selected,
+ .admin-wrapper .sidebar ul ul a,
+ .admin-wrapper .content h2,
+ .admin-wrapper .content h6,
+/* modals */
+.boost-modal__action-bar,
+ .confirmation-modal__action-bar,
+ .mute-modal__action-bar,
+.confirmation-modal__action-bar .confirmation-modal__cancel-button,
+ .confirmation-modal__action-bar .mute-modal__cancel-button,
+ .mute-modal__action-bar .confirmation-modal__cancel-button,
+ .mute-modal__action-bar .mute-modal__cancel-button,
+.error-column,
+ .regeneration-indicator,
+ .empty-column-indicator,
+.report-modal__comment .setting-text,
+.introduction__text p code,
+.list-editor .search__input,
+.announcements__item,
+/* opengraph previews */
+.status-card__image,
+.status-card__content,
+.status-card__description,
+.button:disabled,
+/* public pages */
+body.theme-default,
+.button.button-alternative,
+ .button.button-alternative-2,
+.landing-page__call-to-action,
+.public-layout .header,
+.public-layout .header .nav-link,
+.public-layout .header .nav-button,
+.nothing-here,
+.brand__tagline,
+.table-of-contents
+{
+background: var(--bgPage);
+color: var(--textPage)
+}
+
+/*--------------------
+override for bold text
+--------------------*/
+
+/* strong elements */
+.navigation-bar strong,
+.status-card__title,
+.status-direct .display-name strong,
+.reply-indicator__display-name strong,
+.admin-wrapper .content>p strong,
+.simple_form strong,
+.regeneration-indicator__label strong,
+.account__section-headline a.active,
+ .account__section-headline button.active,
+ .notification__filter-bar a.active,
+ .notification__filter-bar button.active,
+/* public pages */
+.information-board__section,
+ .information-board__section span:last-child,
+.endorsements-widget .display-name__html,
+ .endorsements-widget h4,
+.pagination .page,
+ .pagination .gap,
+ .pagination .newer,
+ .pagination .older,
+ .pagination a
+{
+color: var(--textPageBold)
+}
+
+/*---------------------
+override for muted text
+---------------------*/
+
+/* de-emphasized elements */
+.navigation-bar,
+.navigation-panel hr,
+.getting-started,
+ .getting-started p,
+ .getting-started__footer p,
+.column-subheading,
+.account__section-headline a,
+.status-direct .icon-button,
+ .status-direct .display-name,
+ .status-direct .status__relative-time,
+ .status-direct .status__action-bar__counter__label,
+.status-direct.muted .status__content p,
+ .status-direct.muted .status__content a,
+ .status-direct.muted .display-name strong,
+.notification-favourite .status.status-direct .icon-button.disabled,
+.simple_form p.hint,
+ .simple_form span.hint,
+ .admin-wrapper .content .muted-hint,
+ .admin-wrapper .content>p,
+.status-card__host,
+.button:disabled,
+.loading-indicator,
+.list-editor .search__input::placeholder,
+ .list-editor .search__icon .fa,
+ .list-editor .search__icon .fa-times-circle,
+/* settings page */
+body .neutral-hint, .admin-wrapper .content .neutral-hint,
+/* public pages */
+.endorsements-widget .display-name__account,
+.public-layout .footer h4,
+ .public-layout .footer ul a,
+ .public-layout .footer ul li,
+ .public-layout .footer .grid .column-2 h4 a,
+ .public-layout .header .nav-button,
+/* log in, sign up, forgot passwd */
+.form-footer a,
+.lighter .simple_form p.hint.subtle-hint
+{
+color: var(--textPageMuted)
+}
+
+/* border color fix */
+.status.status-direct:not(.read),
+.table-of-contents li a
+{border-color: var(--textPageMuted)}
diff --git a/styles/mfc/3-highlights.css b/styles/mfc/3-highlights.css
new file mode 100644
index 0000000..5aba7d8
--- /dev/null
+++ b/styles/mfc/3-highlights.css
@@ -0,0 +1,229 @@
+/*------------------------------------------------------------------------------
+* HIGHLIGHTS COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/* scrollbar fix */
+html {scrollbar-color: var(--bg) var(--bgPage)}
+::-webkit-scrollbar-thumb {background: var(--bg)}
+::-webkit-scrollbar-thumb:hover {background: var(--accent)}
+::-webkit-scrollbar-track:hover {background: rgba(0,0,0,0.2)}
+
+/*------------------
+headers and warnings
+------------------*/
+
+/* columns view */
+ .column-header,
+ .column-header__button,
+ .column-header__back-button,
+ .column-header__button:hover,
+ .column-header__back-button:hover,
+ .column-back-button,
+ .column-header>.column-header__back-button,
+ .column-header.active .column-header__icon,
+ .search-results__header,
+ .keyboard-shortcuts kbd,
+ .compose-form__warning,
+ .compose-form .compose-form__warning,
+ .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track,
+ .column-link__badge,
+ .column-link--transparent.active,
+/* settings pages */
+ .list-editor h4,
+ .admin-wrapper .content h4,
+ .admin-wrapper .sidebar ul ul a.selected,
+ .flash-message,
+ .flash-message.notice,
+ .column-inline-form,
+ .column-inline-form .icon-button,
+ .simple_form .warning,
+ .table-form .warning,
+ .pagination .current,
+ .account-role,
+ .batch-table__toolbar
+{
+ background: var(--bgHead);
+ color: var(--textHead)
+}
+
+/*--------------
+accented buttons
+--------------*/
+
+/* primary buttons */
+.directory__tag > a:hover, .directory__tag > a:active, .directory__tag > a:focus,
+ .button,
+ .button:active,
+ .button:focus,
+ .button:hover,
+ .icon-button.overlayed:hover,
+ .floating-action-button,
+ .simple_form button,
+ .simple_form button:active,
+ .simple_form button:focus,
+ .simple_form button:hover,
+ .simple_form .button,
+ .simple_form .button:active,
+ .simple_form .button:focus,
+ .simple_form .button:hover,
+ .simple_form .block-button,
+ .simple_form .block-button:active,
+ .simple_form .block-button:focus,
+ .simple_form .block-button:hover,
+ .button.button-alternative:hover,
+ .button.button-alternative-2:hover,
+ .column-link:hover,
+ .getting-started a.column-link:hover,
+ .column-header__button:hover,
+ .column-header__button.active:hover,
+ .column-header__back-button:hover,
+ .column-back-button:hover,
+ .drawer__header a:hover,
+ .react-toggle--checked .react-toggle-track,
+ .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track,
+ .privacy-dropdown.active .privacy-dropdown__value.active,
+ .privacy-dropdown__option:hover,
+ .privacy-dropdown__option.active,
+ .privacy-dropdown__option.active:hover,
+ .admin-wrapper .sidebar ul a:hover,
+ .admin-wrapper .sidebar ul ul a.selected:hover,
+ .reply-indicator__content .status__content__spoiler-link:hover,
+ .status__content .status__content__spoiler-link:hover,
+ .load-more:hover,
+ .conversation__unread,
+/* modals */
+ .confirmation-modal__action-bar .confirmation-modal__cancel-button:active,
+ .confirmation-modal__action-bar .confirmation-modal__cancel-button:focus,
+ .confirmation-modal__action-bar .confirmation-modal__cancel-button:hover,
+ .confirmation-modal__action-bar .mute-modal__cancel-button:active,
+ .confirmation-modal__action-bar .mute-modal__cancel-button:focus,
+ .confirmation-modal__action-bar .mute-modal__cancel-button:hover,
+ .dropdown-menu__item a:active, .dropdown-menu__item a:focus, .dropdown-menu__item a:hover,
+ .mute-modal__action-bar .confirmation-modal__cancel-button:active,
+ .mute-modal__action-bar .confirmation-modal__cancel-button:focus,
+ .mute-modal__action-bar .confirmation-modal__cancel-button:hover,
+ .mute-modal__action-bar .mute-modal__cancel-button:active,
+ .mute-modal__action-bar .mute-modal__cancel-button:focus,
+ .mute-modal__action-bar .mute-modal__cancel-button:hover,
+ .upload-progress__tracker,
+ .radio-button__input.checked,
+/* public pages */
+ .public-layout .header .nav-button:hover,
+ .public-layout .header .brand:active,
+ .public-layout .header .brand:focus,
+ .public-layout .header .brand:hover,
+ .button.button-secondary:hover,
+/* settings pages */
+ .pagination .page.current:hover,
+ .introduction__dot.active,
+ .dashboard__counters > div > a:hover,
+ .dashboard__counters > div > a:focus,
+ .dashboard__counters > div > a:active,
+ .dashboard__counters > div > a:hover .dashboard__counters__label,
+ .dashboard__counters > div > a:focus .dashboard__counters__label,
+ .dashboard__counters > div > a:active .dashboard__counters__label,
+/* video player ui */
+ .video-player__seek__buffer,
+ .video-player__seek__progress,
+ .video-player__volume__current,
+ .video-player__volume__handle,
+/* announcements */
+ .icon-with-badge__badge,
+ .announcements__item__unread,
+ .reactions-bar__item:hover
+{
+ background: var(--accent);
+ color: var(--accentText);
+}
+
+/*------------
+accented links
+------------*/
+
+/* status links */
+ .status__content a,
+ .status__content a.unhandled-link,
+ .getting-started a,
+ .getting-started p a,
+ .getting-started__footer a,
+ .getting-started__footer p a,
+ .reply-indicator__content a,
+ .reply-indicator__content a.unhandled-link,
+ .reply-indicator__cancel .icon-button.inverted:hover,
+ .status__content__read-more-button,
+ .icon-button.active,
+ .icon-button:focus,
+ .icon-button:hover,
+ .search__icon .fa:hover,
+ .account__header__bio .account__header__fields a,
+ .notification-follow .account .icon-button:hover,
+ .notification__message .fa,
+ .notification__display-name:hover,
+ .admin-wrapper .content .muted-hint a,
+ .table a,
+ a.table-action-link:hover,
+ button.table-action-link:hover,
+ .media-spoiler:active,
+ .media-spoiler:focus,
+ .media-spoiler:hover,
+ .video-player__spoiler.active:hover,
+ .column-header__setting-btn:hover,
+ .column-inline-form .icon-button:hover,
+ .empty-column-indicator a, .error-column a,
+ .timeline-hint a,
+/* post options */
+ .compose-form .text-icon-button:hover,
+ .text-icon-button.active,
+ .drawer__inner .icon-button:hover,
+ .icon-button.inverted.active.disabled,
+ .navigation-bar__profile-edit:hover,
+ .navigation-bar__profile-account:hover,
+ .account__action-bar-dropdown .icon-button:hover,
+ .account__section-headline a:hover,
+ .compose-form .compose-form__warning a,
+/* modals */
+ .list-editor .account .icon-button:hover,
+ .list-editor .account .icon-button:active,
+ .list-editor .account .icon-button:focus,
+/* public pages */
+ .simple_form .input.boolean label a,
+ .landing-page__short-description p a,
+ .landing-page #mastodon-timeline p a,
+ .simple_form p.hint.subtle-hint a,
+ .contact-widget__mail a,
+ .public-layout .footer ul a:hover,
+ .public-layout .footer .grid .column-2 h4 a:hover,
+ .public-layout .public-account-bio .account__header__fields a,
+ .form-footer a:hover,
+/* settings pages */
+ .pagination a:hover,
+ .pagination .newer:hover,
+ .pagination .older:hover,
+ .filters .filter-subset a.selected,
+ .simple_form .hint a,
+/* mobile elements */
+ .tabs-bar__link.active
+{
+ color: var(--accent)
+}
+
+/* border fix */
+.react-toggle--checked .react-toggle-thumb,
+.radio-button__input.checked,
+.icon-with-badge__badge,
+.filters .filter-subset a.selected,
+.introduction__dot,
+.public-layout .public-account-header__tabs__tabs .counter.active::after,
+.notification.unread::before, .status__wrapper.unread::before
+{border-color: var(--accent)}
+
+/* trends fix */
+.trends__item__sparkline path:first-child {fill: transparent !important}
+.trends__item__sparkline path:last-child {stroke: var(--accent) !important}
+
+/* focus fix */
+.focusable:focus
+{
+ background: transparent;
+ border: 2px solid var(--accent);
+}
diff --git a/styles/mfc/5-material.css b/styles/mfc/5-material.css
new file mode 100644
index 0000000..533f8c5
--- /dev/null
+++ b/styles/mfc/5-material.css
@@ -0,0 +1,72 @@
+/*-----------------------
+material design overrides
+-----------------------*/
+
+/* turn statuses into cards */
+.drawer__inner darker {filter: drop-shadow(0 0 2px black)}
+.status,
+.conversation,
+.account-authorize__wrapper,
+.follow_requests-unlocked_explanation
+{
+ box-shadow: 0px 0px 2px black;
+ background: var(--bg);
+ margin: 8px;
+ border-radius: 2px;
+ border: 0
+}
+.status__wrapper--filtered {border: none}
+.detailed-status__wrapper {margin: 8px;} /*might look weird in older versions pre-2.6?*/
+
+/* recolors */
+.column>.scrollable,
+.landing-page #mastodon-timeline,
+.activity-stream .entry
+ {background: none !important}
+.account-timeline__header,
+.account,
+.conversation
+ {background: var(--bg)}
+.notification .account,
+.load-more
+ {background: var(--bgPage)}
+.status__prepend,
+.notification__message,
+.status__prepend .status__display-name strong,
+.keyboard-shortcuts
+ {color: var(--textPage) !important}
+.notification-follow .display-name__html
+ {color: var(--textPageBold)}
+.notification-follow .display-name__account,
+.notification-follow .account .icon-button,
+.status__wrapper--filtered,
+.load-more
+ {color: var(--textPageMuted)}
+
+/* borders */
+.account__section-headline, .notification__filter-bar,
+.account--panel, .account__header__bar, .account__header__bio .account__header__fields, .status, .detailed-status__action-bar, .account__header__fields dl, .account__header__bio .account__header__fields, .account, .directory__card__extra .account__header__content, .account__section-headline, .notification__filter-bar,
+.conversation,
+.account__header__fields,
+.account__header__account-note,
+.public-layout .public-account-header__tabs__tabs .counter
+
+{border-color: transparent}
+
+/* triangle tab indicator */
+.account__section-headline a.active:after,
+.account__section-headline a.active:before,
+.community-timeline__section-headline a.active:after,
+.community-timeline__section-headline a.active:before,
+.public-timeline__section-headline a.active:after,
+.public-timeline__section-headline a.active:before,
+.notification__filter-bar button.active::before,
+.notification__filter-bar button.active::after
+{
+ border-color: transparent transparent var(--bgHead)
+}
+
+/* fix rounding on end toots in stream */
+.activity-stream .entry:first-child .status,
+.activity-stream .entry:last-child .status
+{border-radius: 2px}
diff --git a/styles/mfc/6-actions.css b/styles/mfc/6-actions.css
new file mode 100644
index 0000000..7197399
--- /dev/null
+++ b/styles/mfc/6-actions.css
@@ -0,0 +1,120 @@
+/*------------------------------------------------------------------------------
+* RECOLOR STATUS ACTIONS
+*
+* This tweak gets its own section because it's pretty messy and long.
+*
+* Replies, follows, faves, dropdown menu, and share can easily be themed,
+* but I can't figure out how to make them look good against the palette.
+* Manual color selection may be required, if these colors don't fit well.
+*
+* Recoloring boosts is another nightmare altogether, because of improper
+* SVG embedding in the background-image rather than directly in HTML.
+* This leads to two options:
+*
+* 1) attempt to use filter() to manually add sepia tones and hue-shift
+* - complicated and imprecise adjustments of filter()
+* - cannot use CSS variables in url()s (as in background-image)
+* + however, it does preserve the SVG boosting animation
+*
+* 2) replace the background-image with a mask-image
+* + less complicated; override background-image with color
+* + can apply CSS variable colors from palette easily
+* - requires extremely long rule to add mask-image
+* - breaks boosting animation
+*
+* I have chosen option 2.
+*
+* EDIT: Option 1 is now better because of the new boost icons
+* introduced in 3.2.0 -- there is no longer just one icon.
+------------------------------------------------------------------------------*/
+
+/* add shadow on hover and active states */
+.status__action-bar .icon-button:hover,
+ .status__action-bar .icon-button:active,
+ .status__action-bar .icon-button.active,
+.detailed-status__action-bar .icon-button:hover,
+ .detailed-status__action-bar .icon-button:active,
+ .detailed-status__action-bar .icon-button.active
+{filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.6))}
+
+/* remove bg color on hover and active states*/
+.icon-button:active, .icon-button:focus, .icon-button:hover
+{background-color: transparent}
+
+/* replies and follows */
+.status__action-bar-button.icon-button:nth-child(1):hover,
+.status__action-bar-button.icon-button:nth-child(1):active,
+.status__action-bar-button.icon-button:nth-child(1).active,
+.status__action-bar-button.icon-button:nth-child(1):focus,
+.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:hover,
+.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:active,
+.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button.active,
+.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:focus,
+.notification__message .fa.fa-user-plus,
+.account .icon-button:active,
+.account .icon-button.active,
+.account .icon-button:focus,
+.account .icon-button:hover
+{color: #0bf;}
+
+/* favourites */
+.status__action-bar-button.icon-button:nth-child(3):hover,
+.status__action-bar-button.icon-button:nth-child(3):active,
+.status__action-bar-button.icon-button:nth-child(3).active,
+.status__action-bar-button.icon-button:nth-child(3):focus,
+.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:hover,
+.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:active,
+.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button.active,
+
+.notification__favourite-icon-wrapper .star-icon
+{color: #f90;}
+
+/* menu */
+.status__action-bar-dropdown .icon-button:hover,
+.status__action-bar-dropdown .icon-button:active,
+.status__action-bar-dropdown .icon-button.active,
+.status__action-bar-dropdown .icon-button.focus,
+.detailed-status__action-bar-dropdown .icon-button:hover,
+.detailed-status__action-bar-dropdown .icon-button:active,
+.detailed-status__action-bar-dropdown .icon-button.active,
+.detailed-status__action-bar-dropdown .icon-button:focus
+{color: #90f;}
+
+/* share */
+.icon-button:hover .fa-share-alt
+{color: #f09;}
+
+/* boosts */
+.notification__message .fa.fa-retweet,
+.icon-button:hover .fa-retweet
+{color: #0d9;}
+
+/* recolor boosts (preserve animation, unthemeable default state */
+
+button.icon-button:hover i.fa-retweet,
+.no-reduce-motion button.icon-button.active i.fa-retweet
+{
+ filter: sepia(100%)
+ hue-rotate(110deg)
+ saturate(700%)
+ brightness(100%)
+ drop-shadow(0px 1px 0px rgba(0,0,0,0.6))
+}
+
+
+/* fully recolor boosts (while breaking animation) */
+/*
+button.icon-button:hover i.fa-retweet,
+button.icon-button.active i.fa-retweet
+{background: #0d9 !important;}
+
+.no-reduce-motion button.icon-button i.fa-retweet,
+ button.icon-button i.fa-retweet,
+ button.icon-button:hover i.fa-retweet,
+ button.icon-button.active i.fa-retweet
+{
+background: var(--textMuted);
+mask: url("data:image/svg+xml;utf8,");
+-webkit-mask-image: url("data:image/svg+xml;utf8,");
+}
+*/
diff --git a/styles/mfc/mastodonFlat.scss b/styles/mfc/mastodonFlat.scss
new file mode 100644
index 0000000..47d07e9
--- /dev/null
+++ b/styles/mfc/mastodonFlat.scss
@@ -0,0 +1,6 @@
+@import '0-palette';
+@import '1-foreground';
+@import '2-background';
+@import '3-highlights';
+@import '5-material';
+@import '6-actions';
diff --git a/styles/mfc/variables.scss b/styles/mfc/variables.scss
new file mode 100644
index 0000000..42fbcb4
--- /dev/null
+++ b/styles/mfc/variables.scss
@@ -0,0 +1,11 @@
+/* define scss variables in palette.scss of subtheme */
+:root {
+--bgPage: $bgPage;
+--bg: $bg;
+--bgHead: $bgHead;
+--text: $text;
+--textBold: $textBold;
+--textMuted: $textMuted;
+--textHead: $textHead;
+--accent: $accent;
+}
\ No newline at end of file
diff --git a/styles/modern-dark.scss b/styles/modern-dark.scss
new file mode 100644
index 0000000..09a5778
--- /dev/null
+++ b/styles/modern-dark.scss
@@ -0,0 +1,8 @@
+@import 'modern/dark';
+@import 'application';
+@import 'modern/style';
+
+.layout-multiple-columns .column {
+ flex-grow: 1;
+ max-width: 500px;
+}
diff --git a/styles/modern-light.scss b/styles/modern-light.scss
new file mode 100644
index 0000000..073febc
--- /dev/null
+++ b/styles/modern-light.scss
@@ -0,0 +1,9 @@
+@import 'modern/light';
+@import 'application';
+@import 'modern/style';
+@import 'mastodon-light/diff';
+
+.layout-multiple-columns .column {
+ flex-grow: 1;
+ max-width: 500px;
+}
diff --git a/styles/modern/dark.scss b/styles/modern/dark.scss
new file mode 100644
index 0000000..1a3d38b
--- /dev/null
+++ b/styles/modern/dark.scss
@@ -0,0 +1,56 @@
+// Commonly used web colors
+$black: #000000; // Black
+$white: #ffffff; // White
+$success-green: #79bd9a !default; // Padua
+$error-red: #df405a !default; // Cerise
+$warning-red: #ff5050 !default; // Sunset Orange
+$gold-star: #ca8f04 !default; // Dark Goldenrod
+
+$red-bookmark: $warning-red;
+
+// Values from the classic Mastodon UI
+$classic-base-color: #282c37; // Midnight Express
+$classic-primary-color: #9baec8; // Echo Blue
+$classic-secondary-color: #d9e1e8; // Pattens Blue
+$classic-highlight-color: #e7b01c; // Summer Sky
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default; // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default; // Lighter
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 415px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
diff --git a/styles/modern/light.scss b/styles/modern/light.scss
new file mode 100644
index 0000000..5faae83
--- /dev/null
+++ b/styles/modern/light.scss
@@ -0,0 +1,41 @@
+// Dependent colors
+$black: #000000;
+$white: #ffffff;
+
+$classic-base-color: #282c37;
+$classic-primary-color: #9baec8;
+$classic-secondary-color: #d9e1e8;
+$classic-highlight-color: #e7b01c;
+
+// Differences
+$success-green: lighten(#3c754d, 8%);
+
+$base-overlay-background: $white !default;
+$valid-value-color: $success-green !default;
+
+$ui-base-color: $classic-secondary-color !default;
+$ui-base-lighter-color: #b0c0cf;
+$ui-primary-color: #9bcbed;
+$ui-secondary-color: $classic-base-color !default;
+$ui-highlight-color: #e7b01c;
+
+$primary-text-color: $black !default;
+$darker-text-color: $classic-base-color !default;
+$dark-text-color: #444b5d;
+$action-button-color: #606984;
+
+$inverted-text-color: $black !default;
+$lighter-text-color: $classic-base-color !default;
+$light-text-color: #444b5d;
+
+//Newly added colors
+$account-background-color: $white !default;
+
+//Invert darkened and lightened colors
+@function darken($color, $amount) {
+ @return hsl(hue($color), saturation($color), lightness($color) + $amount);
+}
+
+@function lighten($color, $amount) {
+ @return hsl(hue($color), saturation($color), lightness($color) - $amount);
+}
diff --git a/styles/modern/style.scss b/styles/modern/style.scss
new file mode 100644
index 0000000..07b07f8
--- /dev/null
+++ b/styles/modern/style.scss
@@ -0,0 +1,1045 @@
+:root {
+ --tl-width: 750px;
+ --radius: 12px;
+ --radius-round: 24px;
+ --hover-color: rgba(170,170,170,0.07);
+ --border-color: rgba(120,120,120,0.2);
+ --shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
+ --shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4);
+}
+#mastodon button,
+.public-layout button,
+#mastodon video,
+.public-layout video,
+#mastodon input,
+.public-layout input,
+#mastodon iframe,
+.public-layout iframe,
+#mastodon .privacy-dropdown__dropdown,
+.public-layout .privacy-dropdown__dropdown,
+#mastodon .react-toggle-track,
+.public-layout .react-toggle-track {
+ border-radius: var(--radius) !important;
+}
+#mastodon *,
+.public-layout * {
+ border-color: var(--border-color) !important;
+ font-display: swap !important;
+}
+#mastodon .media-gallery__item,
+.public-layout .media-gallery__item,
+#mastodon .column-link,
+.public-layout .column-link,
+#mastodon select,
+.public-layout select {
+ transition: transform 0.4s cubic-bezier(0, 0, 0, 3) !important;
+}
+#mastodon .media-gallery__item:active,
+.public-layout .media-gallery__item:active,
+#mastodon .column-link:active,
+.public-layout .column-link:active,
+#mastodon select:active,
+.public-layout select:active {
+ transform: scale(0.99);
+ transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
+}
+#mastodon .react-toggle-track,
+.public-layout .react-toggle-track,
+#mastodon .button,
+.public-layout .button,
+#mastodon .icon-button,
+.public-layout .icon-button {
+ transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important;
+}
+#mastodon .react-toggle-track:active,
+.public-layout .react-toggle-track:active,
+#mastodon .button:active,
+.public-layout .button:active,
+#mastodon .icon-button:active,
+.public-layout .icon-button:active {
+ transform: scale(0.95);
+ transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
+}
+#mastodon .react-toggle-thumb,
+.public-layout .react-toggle-thumb {
+ pointer-events: none;
+}
+#mastodon .account__avatar,
+.public-layout .account__avatar {
+ border-radius: 30%;
+}
+#mastodon .detailed-status__action-bar,
+.public-layout .detailed-status__action-bar,
+#mastodon .column-header__collapsible-inner,
+.public-layout .column-header__collapsible-inner,
+#mastodon .compose-form__buttons-wrapper,
+.public-layout .compose-form__buttons-wrapper,
+#mastodon .audio-player,
+.public-layout .audio-player,
+#mastodon .box-widget input[type="email"],
+.public-layout .box-widget input[type="email"],
+#mastodon .box-widget input[type="password"],
+.public-layout .box-widget input[type="password"],
+#mastodon .box-widget input[type="text"],
+.public-layout .box-widget input[type="text"],
+#mastodon .box-widget textarea,
+.public-layout .box-widget textarea,
+#mastodon .compose-form .spoiler-input__input,
+.public-layout .compose-form .spoiler-input__input,
+#mastodon .compose-form__autosuggest-wrapper,
+.public-layout .compose-form__autosuggest-wrapper,
+#mastodon .compose-form__poll-wrapper select,
+.public-layout .compose-form__poll-wrapper select,
+#mastodon .poll__option input[type="text"],
+.public-layout .poll__option input[type="text"],
+#mastodon .report-dialog-modal__textarea,
+.public-layout .report-dialog-modal__textarea,
+#mastodon .search__input,
+.public-layout .search__input,
+#mastodon .setting-text,
+.public-layout .setting-text,
+#mastodon .statuses-grid .detailed-status,
+.public-layout .statuses-grid .detailed-status {
+ border: 0 !important;
+}
+#mastodon .columns-area__panels__pane__inner,
+.public-layout .columns-area__panels__pane__inner {
+ margin-top: 30px;
+}
+#mastodon .compose-panel,
+.public-layout .compose-panel {
+ margin-top: 0;
+}
+#mastodon .search,
+.public-layout .search,
+.search-popout {
+ margin-inline: 5px;
+ border-radius: var(--radius);
+}
+#mastodon .search label,
+.public-layout .search label {
+ box-sizing: border-box;
+}
+#mastodon .search input,
+.public-layout .search input {
+ border-radius: var(--radius-round) !important;
+ padding-left: 20px;
+}
+#mastodon .search .search__icon > i,
+.public-layout .search .search__icon > i {
+ right: 15px;
+}
+#mastodon .compose-form .compose-form__autosuggest-wrapper,
+.public-layout .compose-form .compose-form__autosuggest-wrapper,
+#mastodon .compose-form .autosuggest-textarea__textarea,
+.public-layout .compose-form .autosuggest-textarea__textarea {
+ border-radius: var(--radius) var(--radius) 0 0 !important;
+}
+#mastodon .compose-form .compose-form__buttons-wrapper,
+.public-layout .compose-form .compose-form__buttons-wrapper {
+ border-radius: 0 0 var(--radius) var(--radius) !important;
+}
+#mastodon .getting-started__footer,
+.public-layout .getting-started__footer {
+ opacity: 0.5;
+ transition: opacity 0.4s;
+}
+#mastodon .getting-started__footer a,
+.public-layout .getting-started__footer a {
+ text-decoration: none;
+}
+#mastodon .getting-started__footer > p,
+.public-layout .getting-started__footer > p {
+ font-size: 0;
+ line-height: 0;
+ opacity: 0;
+ transition: font-size 0.2s, line-height 0.2s;
+ transition-duration: 0.2s;
+}
+#mastodon .getting-started__footer:hover,
+.public-layout .getting-started__footer:hover,
+#mastodon .getting-started__footer:focus-within,
+.public-layout .getting-started__footer:focus-within {
+ opacity: 1;
+}
+#mastodon .getting-started__footer:hover > p,
+.public-layout .getting-started__footer:hover > p,
+#mastodon .getting-started__footer:focus-within > p,
+.public-layout .getting-started__footer:focus-within > p {
+ font-size: 1em;
+ line-height: 1.5;
+ opacity: 1;
+ transform: translateY(0px);
+ transition: font-size 0.1s, line-height 0.25s cubic-bezier(0, 0, 0, 1.3), opacity 0.2s 0.1s;
+}
+#mastodon .columns-area__panels__main,
+.public-layout .columns-area__panels__main {
+ margin: 0 10px;
+ padding-top: 30px !important;
+ overflow: visible !important;
+ transition: max-width 0.2s cubic-bezier(0, 0, 0, 1.1), margin 0.2s cubic-bezier(0, 0, 0, 1.1);
+}
+@media (min-width: 1320px) {
+ #mastodon .columns-area__panels__main,
+ .public-layout .columns-area__panels__main {
+ max-width: var(--tl-width) !important;
+ padding: 0 15px;
+ }
+}
+#mastodon .columns-area__panels__main > div,
+.public-layout .columns-area__panels__main > div {
+ border-radius: var(--radius);
+}
+#mastodon .columns-area__panels__main .scrollable,
+.public-layout .columns-area__panels__main .scrollable {
+ padding-bottom: 40vh !important;
+}
+#mastodon .scrollable,
+.public-layout .scrollable,
+#mastodon .column-back-button,
+.public-layout .column-back-button,
+#mastodon .column-header,
+.public-layout .column-header {
+ border: 0;
+ border-radius: var(--radius);
+}
+#mastodon .scrollable:not(.scrollable--flex),
+.public-layout .scrollable:not(.scrollable--flex),
+#mastodon .activity-stream,
+.public-layout .activity-stream {
+ border: 0 !important;
+ contain: unset !important;
+}
+#mastodon .scrollable:not(.scrollable--flex):not(.activity-stream),
+.public-layout .scrollable:not(.scrollable--flex):not(.activity-stream),
+#mastodon .activity-stream:not(.activity-stream),
+.public-layout .activity-stream:not(.activity-stream) {
+ padding: 10px;
+}
+#mastodon .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable,
+.public-layout .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable,
+#mastodon .activity-stream > [tabindex]:first-child > .focusable,
+.public-layout .activity-stream > [tabindex]:first-child > .focusable {
+ margin-top: 0;
+}
+#mastodon .scrollable:not(.scrollable--flex) > div > [tabindex]:last-child .status,
+.public-layout .scrollable:not(.scrollable--flex) > div > [tabindex]:last-child .status,
+#mastodon .activity-stream > div > [tabindex]:last-child .status,
+.public-layout .activity-stream > div > [tabindex]:last-child .status {
+ border: 0;
+}
+#mastodon .column,
+.public-layout .column,
+#mastodon .columns-area,
+.public-layout .columns-area {
+ overflow: visible !important;
+}
+#mastodon .scrollable--flex .account-timeline__header,
+.public-layout .scrollable--flex .account-timeline__header {
+ margin: 0 !important;
+}
+#mastodon .account-timeline__header,
+.public-layout .account-timeline__header {
+ margin: -10px;
+ margin-bottom: 10px;
+}
+#mastodon .account-timeline__header .account__header,
+.public-layout .account-timeline__header .account__header {
+ overflow: visible !important;
+}
+#mastodon .account-timeline__header .account__header__info,
+.public-layout .account-timeline__header .account__header__info {
+ z-index: 2;
+}
+#mastodon .account-timeline__header .account__header__image,
+.public-layout .account-timeline__header .account__header__image {
+ height: 0;
+ padding-bottom: 35%;
+ position: sticky;
+ top: calc(0px - var(--radius));
+ border-radius: var(--radius) var(--radius) 0 0;
+}
+#mastodon .account-timeline__header .account__header__image img,
+.public-layout .account-timeline__header .account__header__image img {
+ position: absolute;
+}
+#mastodon .account-timeline__header .account__header__bar,
+.public-layout .account-timeline__header .account__header__bar {
+ padding: 10px;
+ border: 0;
+ border-radius: var(--radius) var(--radius) 0 0;
+ margin-top: calc(0px - var(--radius)) !important;
+}
+#mastodon .account-timeline__header .account__header__tabs__name h1,
+.public-layout .account-timeline__header .account__header__tabs__name h1 {
+ display: flex;
+ flex-wrap: wrap;
+}
+#mastodon .account-timeline__header .account__header__tabs__name h1 span,
+.public-layout .account-timeline__header .account__header__tabs__name h1 span {
+ margin-right: 0.4em;
+}
+#mastodon .account-timeline__header .account__header__bio,
+.public-layout .account-timeline__header .account__header__bio {
+ margin: 0;
+ margin-top: 10px;
+}
+#mastodon .account-timeline__header .account__header__bio > div,
+.public-layout .account-timeline__header .account__header__bio > div {
+ padding-inline: 10px !important;
+}
+#mastodon .account__header__fields,
+.public-layout .account__header__fields,
+#mastodon .account__header__account-note,
+.public-layout .account__header__account-note {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ border: 0;
+ gap: 10px;
+}
+.public-account-bio .account__header__fields {
+ padding: 20px !important;
+ padding-bottom: 0 !important;
+}
+#mastodon .account__header__fields dl,
+.public-layout .account__header__fields dl,
+#mastodon .account__header__account-note dl,
+.public-layout .account__header__account-note dl,
+#mastodon .account__header__fields.account__header__account-note.account__header__account-note,
+.public-layout .account__header__fields.account__header__account-note.account__header__account-note,
+#mastodon .account__header__account-note.account__header__account-note.account__header__account-note,
+.public-layout .account__header__account-note.account__header__account-note.account__header__account-note {
+ border: 0;
+ border-radius: var(--radius-round);
+ overflow: hidden;
+ background-color: var(--border-color);
+ padding: 0 !important;
+}
+#mastodon .account__header__fields dl dt,
+.public-layout .account__header__fields dl dt,
+#mastodon .account__header__account-note dl dt,
+.public-layout .account__header__account-note dl dt,
+#mastodon .account__header__fields.account__header__account-note.account__header__account-note dt,
+.public-layout .account__header__fields.account__header__account-note.account__header__account-note dt,
+#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt,
+.public-layout .account__header__account-note.account__header__account-note.account__header__account-note dt,
+#mastodon .account__header__fields dl dd,
+.public-layout .account__header__fields dl dd,
+#mastodon .account__header__account-note dl dd,
+.public-layout .account__header__account-note dl dd,
+#mastodon .account__header__fields.account__header__account-note.account__header__account-note dd,
+.public-layout .account__header__fields.account__header__account-note.account__header__account-note dd,
+#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd,
+.public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd {
+ width: unset;
+ padding-block: 0.5em;
+}
+#mastodon .account__header__fields dl dt,
+.public-layout .account__header__fields dl dt,
+#mastodon .account__header__account-note dl dt,
+.public-layout .account__header__account-note dl dt,
+#mastodon .account__header__fields.account__header__account-note.account__header__account-note dt,
+.public-layout .account__header__fields.account__header__account-note.account__header__account-note dt,
+#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt,
+.public-layout .account__header__account-note.account__header__account-note.account__header__account-note dt {
+ background: none;
+}
+#mastodon .account__header__fields dl dd,
+.public-layout .account__header__fields dl dd,
+#mastodon .account__header__account-note dl dd,
+.public-layout .account__header__account-note dl dd,
+#mastodon .account__header__fields.account__header__account-note.account__header__account-note dd,
+.public-layout .account__header__fields.account__header__account-note.account__header__account-note dd,
+#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd,
+.public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd {
+ border: 0;
+}
+#mastodon .account__header__fields dl dd:not(.verified),
+.public-layout .account__header__fields dl dd:not(.verified),
+#mastodon .account__header__account-note dl dd:not(.verified),
+.public-layout .account__header__account-note dl dd:not(.verified),
+#mastodon .account__header__fields.account__header__account-note.account__header__account-note dd:not(.verified),
+.public-layout .account__header__fields.account__header__account-note.account__header__account-note dd:not(.verified),
+#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd:not(.verified),
+.public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd:not(.verified) {
+ padding-left: 0;
+}
+#mastodon .account__header__fields.account__header__account-note,
+.public-layout .account__header__fields.account__header__account-note,
+#mastodon .account__header__account-note.account__header__account-note,
+.public-layout .account__header__account-note.account__header__account-note {
+ margin: 10px;
+ margin-bottom: 0;
+ gap: 0;
+ background: none !important;
+ border: 1px solid var(--border-color) !important;
+}
+#mastodon .account__header__fields textarea,
+.public-layout .account__header__fields textarea,
+#mastodon .account__header__account-note textarea,
+.public-layout .account__header__account-note textarea {
+ width: 0;
+ flex-grow: 1;
+ margin: 0 !important;
+ border-radius: 0;
+}
+#mastodon .account__header__fields label,
+.public-layout .account__header__fields label,
+#mastodon .account__header__account-note label,
+.public-layout .account__header__account-note label {
+ margin: 0;
+ font-weight: 600;
+ padding-inline: 14px;
+}
+#mastodon .account__section-headline,
+.public-layout .account__section-headline {
+ background: none;
+}
+.with-modals #mastodon .account__section-headline,
+.with-modals .public-layout .account__section-headline {
+ border: 0 !important;
+}
+#mastodon .account__section-headline a span,
+.public-layout .account__section-headline a span {
+ font-weight: 400;
+}
+#mastodon .account__section-headline a.active span,
+.public-layout .account__section-headline a.active span {
+ font-weight: 700;
+}
+#mastodon .notification__filter-bar,
+.public-layout .notification__filter-bar {
+ border: 0 !important;
+ margin-bottom: calc(0px - var(--radius));
+ padding-bottom: var(--radius);
+}
+#mastodon .focusable,
+.public-layout .focusable,
+#mastodon .entry,
+.public-layout .entry {
+ overflow: clip;
+ border-radius: var(--radius) !important;
+ transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s;
+ animation: fadeUp 0.4s forwards cubic-bezier(0, 1, 1, 1);
+}
+#mastodon .focusable.entry,
+.public-layout .focusable.entry,
+#mastodon .entry.entry,
+.public-layout .entry.entry {
+ margin-bottom: 10px;
+}
+#mastodon .focusable.entry .status,
+.public-layout .focusable.entry .status,
+#mastodon .entry.entry .status,
+.public-layout .entry.entry .status {
+ border: 0 !important;
+}
+#mastodon .focusable:hover,
+.public-layout .focusable:hover,
+#mastodon .entry:hover,
+.public-layout .entry:hover {
+ background-color: var(--hover-color);
+}
+#mastodon .status__info,
+.public-layout .status__info {
+ margin-top: 5px;
+}
+#mastodon .status__info .status__avatar,
+.public-layout .status__info .status__avatar {
+ top: 15px;
+ left: 15px !important;
+}
+#mastodon .status__content,
+.public-layout .status__content {
+ min-height: 1.4em;
+ padding-top: 2px;
+}
+#mastodon .media-gallery,
+.public-layout .media-gallery,
+#mastodon .video-player,
+.public-layout .video-player {
+ margin-left: -62px;
+ width: unset;
+ box-shadow: var(--shadow-low);
+ border-radius: var(--radius);
+ margin-block: 15px !important;
+ animation: scaleIn 0.4s;
+ max-width: unset !important;
+ max-height: 80vh !important;
+}
+#mastodon .detailed-status__wrapper,
+.public-layout .detailed-status__wrapper,
+#mastodon .detailed-status,
+.public-layout .detailed-status {
+ box-shadow: var(--shadow);
+}
+#mastodon .detailed-status__wrapper.detailed-status__wrapper,
+.public-layout .detailed-status__wrapper.detailed-status__wrapper,
+#mastodon .detailed-status.detailed-status__wrapper,
+.public-layout .detailed-status.detailed-status__wrapper {
+ margin-block: 15px;
+}
+#mastodon .detailed-status__wrapper .media-gallery,
+.public-layout .detailed-status__wrapper .media-gallery,
+#mastodon .detailed-status .media-gallery,
+.public-layout .detailed-status .media-gallery,
+#mastodon .detailed-status__wrapper .video-player,
+.public-layout .detailed-status__wrapper .video-player,
+#mastodon .detailed-status .video-player,
+.public-layout .detailed-status .video-player {
+ margin-left: 0 !important;
+ max-height: unset !important;
+}
+#mastodon .status__action-bar,
+.public-layout .status__action-bar,
+#mastodon .detailed-status__action-bar,
+.public-layout .detailed-status__action-bar {
+ padding-top: 0;
+}
+#mastodon .status__action-bar .icon-button,
+.public-layout .status__action-bar .icon-button,
+#mastodon .detailed-status__action-bar .icon-button,
+.public-layout .detailed-status__action-bar .icon-button {
+ display: inline-flex;
+ align-items: center;
+ width: unset !important;
+ padding: 0.3em 0.5em !important;
+ height: unset !important;
+ flex: 0 1 auto !important;
+ min-width: 0;
+}
+#mastodon .status__action-bar .icon-button::after,
+.public-layout .status__action-bar .icon-button::after,
+#mastodon .detailed-status__action-bar .icon-button::after,
+.public-layout .detailed-status__action-bar .icon-button::after {
+ content: attr(aria-label);
+ font-size: 0.7em;
+ margin-left: 0.5em;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+#mastodon .status__action-bar .status__action-bar-dropdown,
+.public-layout .status__action-bar .status__action-bar-dropdown,
+#mastodon .detailed-status__action-bar .status__action-bar-dropdown,
+.public-layout .detailed-status__action-bar .status__action-bar-dropdown,
+#mastodon .status__action-bar .detailed-status__action-bar-dropdown,
+.public-layout .status__action-bar .detailed-status__action-bar-dropdown,
+#mastodon .detailed-status__action-bar .detailed-status__action-bar-dropdown,
+.public-layout .detailed-status__action-bar .detailed-status__action-bar-dropdown,
+#mastodon .status__action-bar .detailed-status__button,
+.public-layout .status__action-bar .detailed-status__button,
+#mastodon .detailed-status__action-bar .detailed-status__button,
+.public-layout .detailed-status__action-bar .detailed-status__button {
+ display: contents;
+}
+#mastodon .status__action-bar.detailed-status__action-bar,
+.public-layout .status__action-bar.detailed-status__action-bar,
+#mastodon .detailed-status__action-bar.detailed-status__action-bar,
+.public-layout .detailed-status__action-bar.detailed-status__action-bar {
+ padding-right: 15px !important;
+ padding-left: 15px !important;
+}
+#mastodon .status__action-bar.detailed-status__action-bar .icon-button,
+.public-layout .status__action-bar.detailed-status__action-bar .icon-button,
+#mastodon .detailed-status__action-bar.detailed-status__action-bar .icon-button,
+.public-layout .detailed-status__action-bar.detailed-status__action-bar .icon-button {
+ flex-grow: 1 !important;
+ justify-content: center;
+}
+#mastodon .status,
+.public-layout .status {
+ overflow: visible !important;
+ padding: 15px 15px 15px 78px !important;
+}
+#mastodon .detailed-status,
+.public-layout .detailed-status {
+ padding: 15px !important;
+}
+#mastodon .tabs-bar__wrapper,
+.public-layout .tabs-bar__wrapper {
+ transition: margin-left 0.2s cubic-bezier(0, 0, 0, 1.1);
+}
+@media (min-width: 1191px) {
+ #mastodon .tabs-bar__wrapper,
+ .public-layout .tabs-bar__wrapper {
+ position: fixed;
+ width: 285px;
+ margin-left: 600px;
+ padding-top: 0;
+ margin-top: 30px;
+ overflow: clip;
+ border-radius: var(--radius) var(--radius) !important;
+ box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1);
+ }
+ #mastodon .tabs-bar__wrapper .column-header,
+ .public-layout .tabs-bar__wrapper .column-header,
+ #mastodon .tabs-bar__wrapper .column-header__buttons button,
+ .public-layout .tabs-bar__wrapper .column-header__buttons button {
+ background: none !important;
+ }
+ #mastodon .tabs-bar__wrapper .column-header,
+ .public-layout .tabs-bar__wrapper .column-header {
+ font-weight: 600;
+ }
+}
+@media (min-width: 895px) and (max-width: 1191px) {
+ #mastodon .tabs-bar__wrapper,
+ .public-layout .tabs-bar__wrapper {
+ padding-top: 0;
+ }
+ #mastodon .tabs-bar__wrapper .tabs-bar,
+ .public-layout .tabs-bar__wrapper .tabs-bar {
+ margin-bottom: 0;
+ border: 0 !important;
+ }
+ #mastodon .tabs-bar__wrapper #tabs-bar__portal,
+ .public-layout .tabs-bar__wrapper #tabs-bar__portal {
+ border-radius: 0 !important;
+ }
+ #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header,
+ .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header,
+ #mastodon .tabs-bar__wrapper #tabs-bar__portal button,
+ .public-layout .tabs-bar__wrapper #tabs-bar__portal button {
+ border-radius: 0 !important;
+ }
+ #mastodon .tabs-bar__wrapper ~ .columns-area .scrollable,
+ .public-layout .tabs-bar__wrapper ~ .columns-area .scrollable {
+ border-radius: 0 !important;
+ }
+}
+@media (min-width: 1191px) and (min-width: 1320px) {
+ #mastodon .tabs-bar__wrapper,
+ .public-layout .tabs-bar__wrapper {
+ margin-left: calc(var(--tl-width) - 5px);
+ }
+}
+#mastodon .navigation-panel,
+.public-layout .navigation-panel {
+ padding-top: 50px;
+ padding-bottom: 20px;
+ height: calc(100% - 30px);
+ box-sizing: border-box;
+}
+#mastodon .column-link,
+.public-layout .column-link {
+ flex-grow: 2 !important;
+ display: flex !important;
+ align-items: center !important;
+ align-content: center;
+ max-height: 3.3em;
+ min-height: 2.7em !important;
+ padding-block: 0;
+ position: relative;
+ box-sizing: border-box;
+}
+#mastodon .column-link .column-link__icon,
+.public-layout .column-link .column-link__icon,
+.column-header__icon {
+ margin-right: 1em !important;
+}
+#mastodon .column-link::before,
+.public-layout .column-link::before {
+ content: "" !important;
+ position: absolute;
+ border-radius: 100px !important;
+ width: unset !important;
+ height: unset !important;
+ inset: 0px 0px !important;
+ opacity: 0 !important;
+ background-color: rgba(150,150,150,0.1);
+ transition: opacity 0.2s;
+}
+#mastodon .column-link:hover:before,
+.public-layout .column-link:hover:before,
+#mastodon .column-link:focus:before,
+.public-layout .column-link:focus:before {
+ opacity: 1 !important;
+}
+#mastodon.public-layout .header,
+.public-layout.public-layout .header {
+ border-radius: var(--radius);
+}
+#mastodon.public-layout .public-account-header,
+.public-layout.public-layout .public-account-header {
+ border-radius: var(--radius);
+ --border-color: transparent !important;
+ border: 0 !important;
+}
+#mastodon.public-layout .public-account-header .public-account-header__bar::before,
+.public-layout.public-layout .public-account-header .public-account-header__bar::before {
+ border: 0;
+}
+#mastodon.public-layout .grid,
+.public-layout.public-layout .grid {
+ gap: 20px;
+}
+#mastodon.public-layout .public-account-header + .grid .column-1,
+.public-layout.public-layout .public-account-header + .grid .column-1 {
+ position: sticky;
+ align-self: flex-end;
+ bottom: 0;
+ min-height: calc(100vh - 80px);
+}
+#mastodon.public-layout .public-account-header + .grid .column-1 > *,
+.public-layout.public-layout .public-account-header + .grid .column-1 > * {
+ border-radius: var(--radius);
+ overflow: hidden;
+ border: 0 !important;
+}
+#mastodon.public-layout .public-account-header + .grid .column-1 a,
+.public-layout.public-layout .public-account-header + .grid .column-1 a,
+#mastodon.public-layout .public-account-header + .grid .column-1 .hero-widget__text,
+.public-layout.public-layout .public-account-header + .grid .column-1 .hero-widget__text {
+ border: 0 !important;
+}
+#mastodon.public-layout .box-widget,
+.public-layout.public-layout .box-widget,
+#mastodon.public-layout .directory__tag > a,
+.public-layout.public-layout .directory__tag > a,
+#mastodon.public-layout .hero-widget,
+.public-layout.public-layout .hero-widget,
+#mastodon.public-layout .landing-page__call-to-action,
+.public-layout.public-layout .landing-page__call-to-action,
+#mastodon.public-layout .table-of-contents,
+.public-layout.public-layout .table-of-contents,
+#mastodon.public-layout .rules-list,
+.public-layout.public-layout .rules-list {
+ border-radius: var(--radius);
+ overflow: hidden;
+}
+#mastodon.public-layout .footer .column-3,
+.public-layout.public-layout .footer .column-3,
+#mastodon.public-layout .footer .column-4,
+.public-layout.public-layout .footer .column-4 {
+ text-align: right;
+}
+@media (max-width: 895px) {
+ #mastodon .columns-area__panels__main,
+ .public-layout .columns-area__panels__main {
+ padding: 0 !important;
+ }
+ #mastodon .is-composing .columns-area__panels__main,
+ .public-layout .is-composing .columns-area__panels__main {
+ padding-bottom: 40px !important;
+ }
+ #mastodon .columns-area__panels__main .scrollable,
+ .public-layout .columns-area__panels__main .scrollable,
+ #mastodon .columns-area__panels__main .account__header__image,
+ .public-layout .columns-area__panels__main .account__header__image {
+ border-radius: 0 !important;
+ }
+ #mastodon .tabs-bar__wrapper,
+ .public-layout .tabs-bar__wrapper {
+ position: fixed !important;
+ top: unset !important;
+ bottom: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ display: flex;
+ flex-direction: column;
+ box-shadow: none !important;
+ padding: 0;
+ background: none;
+ border-radius: 0 !important;
+ pointer-events: none;
+ filter: brightness(0.95);
+ }
+ #mastodon .tabs-bar__wrapper > *,
+ .public-layout .tabs-bar__wrapper > * {
+ pointer-events: all;
+ }
+ #mastodon .tabs-bar__wrapper .tabs-bar,
+ .public-layout .tabs-bar__wrapper .tabs-bar {
+ order: 2;
+ margin: 0;
+ border: 0;
+ border-radius: var(--radius-round) var(--radius-round) 0 0;
+ color: #fff !important;
+ overflow: visible !important;
+ padding-inline: 5px;
+ }
+ #mastodon .tabs-bar__wrapper .tabs-bar a,
+ .public-layout .tabs-bar__wrapper .tabs-bar a {
+ flex-grow: 1 !important;
+ padding-block: 20px;
+ position: relative;
+ border: 0;
+ background: none !important;
+ transition: transform 0.4s cubic-bezier(0, 0, 0, 4), filter 0.1s;
+ }
+ #mastodon .tabs-bar__wrapper .tabs-bar a > i,
+ .public-layout .tabs-bar__wrapper .tabs-bar a > i {
+ font-size: 18px;
+ filter: opacity(0.7);
+ transition: transform 0.2s cubic-bezier(0, 0, 0, 1.2);
+ }
+ #mastodon .tabs-bar__wrapper .tabs-bar a > i .icon-with-badge__badge,
+ .public-layout .tabs-bar__wrapper .tabs-bar a > i .icon-with-badge__badge {
+ font-size: 0.5em;
+ border-radius: var(--radius-round);
+ }
+ #mastodon .tabs-bar__wrapper .tabs-bar a::before,
+ .public-layout .tabs-bar__wrapper .tabs-bar a::before {
+ content: "";
+ position: absolute;
+ bottom: -10px;
+ width: 5px;
+ height: 10px;
+ border-radius: 100px;
+ background-color: currentColor;
+ left: 50%;
+ margin-left: -2.5px;
+ transition: bottom 0.2s cubic-bezier(0, 0, 0, 4), width 0.2s, margin-left 0.2s;
+ }
+ #mastodon .tabs-bar__wrapper .tabs-bar a:active,
+ .public-layout .tabs-bar__wrapper .tabs-bar a:active {
+ transform: translateY(5px);
+ transition: transform 1s;
+ }
+ #mastodon .tabs-bar__wrapper .tabs-bar a.active,
+ .public-layout .tabs-bar__wrapper .tabs-bar a.active {
+ transform: translateY(-2px);
+ }
+ #mastodon .tabs-bar__wrapper .tabs-bar a.active i,
+ .public-layout .tabs-bar__wrapper .tabs-bar a.active i {
+ filter: none !important;
+ }
+ #mastodon .tabs-bar__wrapper .tabs-bar a.active::before,
+ .public-layout .tabs-bar__wrapper .tabs-bar a.active::before {
+ bottom: -6px;
+ width: 10px;
+ margin-left: -5px;
+ }
+ #mastodon .tabs-bar__wrapper #tabs-bar__portal,
+ .public-layout .tabs-bar__wrapper #tabs-bar__portal {
+ margin: 10px 20px !important;
+ width: max-content !important;
+ box-shadow: var(--shadow) !important;
+ max-width: calc(100vw - 130px);
+ }
+ #mastodon .tabs-bar__wrapper #tabs-bar__portal > button,
+ .public-layout .tabs-bar__wrapper #tabs-bar__portal > button {
+ padding-inline: 20px;
+ }
+ #mastodon .tabs-bar__wrapper #tabs-bar__portal button,
+ .public-layout .tabs-bar__wrapper #tabs-bar__portal button {
+ min-width: 60px;
+ }
+ #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible,
+ .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible {
+ transition: margin-top 0.2s cubic-bezier(0, 0, 0, 2);
+ max-width: 100%;
+ border-radius: var(--radius);
+ }
+ #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible:not(.collapsed),
+ .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible:not(.collapsed) {
+ width: calc(100vw - 40px);
+ margin-top: 5px;
+ }
+ .floating-action-button {
+ bottom: 70px;
+ }
+ #mastodon .icon-button:after,
+ .public-layout .icon-button:after {
+ content: unset !important;
+ }
+ #mastodon .status__action-bar,
+ .public-layout .status__action-bar {
+ margin-left: -63px;
+ margin-bottom: -10px;
+ }
+ #mastodon .status__action-bar .icon-button,
+ .public-layout .status__action-bar .icon-button {
+ flex-grow: 1 !important;
+ margin: 0 !important;
+ justify-content: center;
+ padding: 0.7em !important;
+ }
+ #mastodon .modal-root__modal .status.light,
+ .public-layout .modal-root__modal .status.light {
+ overflow: hidden !important;
+ padding-left: 70px !important;
+ }
+}
+.layout-multiple-columns #mastodon .columns-area {
+ overflow: auto hidden !important;
+}
+.layout-multiple-columns #mastodon .columns-area .column-header,
+.layout-multiple-columns #mastodon .columns-area .scrollable,
+.layout-multiple-columns #mastodon .columns-area .column-back-button,
+.layout-multiple-columns #mastodon .columns-area .account__header__image {
+ border-radius: 0 !important;
+}
+.layout-multiple-columns #mastodon .columns-area .icon-button:after {
+ content: unset !important;
+}
+.layout-multiple-columns #mastodon .columns-area > div {
+ border: 0 !important;
+ padding: 0 !important;
+}
+.layout-multiple-columns #mastodon .columns-area > div:not(:last-child):not(.drawer) {
+ padding-right: 2px !important;
+}
+.layout-multiple-columns #mastodon .columns-area > div.column {
+ flex-grow: 1;
+ max-width: 600px;
+}
+.layout-multiple-columns #mastodon .columns-area > div:first-child {
+ margin-left: auto !important;
+}
+.layout-multiple-columns #mastodon .columns-area > div:last-child {
+ margin-right: auto !important;
+}
+.layout-multiple-columns #mastodon .columns-area .drawer {
+ padding-inline: 10px !important;
+ padding-top: 20px !important;
+}
+.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header {
+ border-radius: var(--radius-round);
+ margin-inline: 5px;
+ overflow: hidden;
+ border: 0 !important;
+}
+.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a {
+ border: 0;
+}
+.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a:first-child {
+ padding-left: 15px !important;
+}
+.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a:last-child {
+ padding-right: 15px !important;
+}
+.layout-multiple-columns #mastodon .columns-area .drawer__inner:not(.darker),
+.layout-multiple-columns #mastodon .columns-area .drawer__inner__mastodon {
+ background-color: transparent;
+ border: 0 !important;
+}
+.layout-multiple-columns #mastodon .columns-area .drawer__inner.darker {
+ border-radius: var(--radius) var(--radius) 0 0;
+ margin-inline: 5px;
+ width: calc(100% - 10px);
+}
+#mastodon .modal-root__container,
+.public-layout .modal-root__container {
+ animation: bounceIn 0.7s;
+}
+@media (prefers-reduced-motion: no-preference) {
+@-moz-keyframes bounceIn {
+ 0% {
+ transform: scale(1.1);
+ opacity: 0;
+ }
+ 30% {
+ transform: scale(0.99);
+ opacity: 1;
+ }
+ 60% {
+ transform: scale(1.005);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+@-webkit-keyframes bounceIn {
+ 0% {
+ transform: scale(1.1);
+ opacity: 0;
+ }
+ 30% {
+ transform: scale(0.99);
+ opacity: 1;
+ }
+ 60% {
+ transform: scale(1.005);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+@-o-keyframes bounceIn {
+ 0% {
+ transform: scale(1.1);
+ opacity: 0;
+ }
+ 30% {
+ transform: scale(0.99);
+ opacity: 1;
+ }
+ 60% {
+ transform: scale(1.005);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+@keyframes bounceIn {
+ 0% {
+ transform: scale(1.1);
+ opacity: 0;
+ }
+ 30% {
+ transform: scale(0.99);
+ opacity: 1;
+ }
+ 60% {
+ transform: scale(1.005);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+@-moz-keyframes fadeUp {
+ from {
+ transform: translateY(20px);
+ }
+}
+@-webkit-keyframes fadeUp {
+ from {
+ transform: translateY(20px);
+ }
+}
+@-o-keyframes fadeUp {
+ from {
+ transform: translateY(20px);
+ }
+}
+@keyframes fadeUp {
+ from {
+ transform: translateY(20px);
+ }
+}
+@-moz-keyframes scaleIn {
+ from {
+ transform: scale(0.98);
+ opacity: 0;
+ }
+}
+@-webkit-keyframes scaleIn {
+ from {
+ transform: scale(0.98);
+ opacity: 0;
+ }
+}
+@-o-keyframes scaleIn {
+ from {
+ transform: scale(0.98);
+ opacity: 0;
+ }
+}
+@keyframes scaleIn {
+ from {
+ transform: scale(0.98);
+ opacity: 0;
+ }
+}
+}
diff --git a/styles/mods/deprecated/display_bettersearch.css b/styles/mods/deprecated/display_bettersearch.css
new file mode 100644
index 0000000..c9bf885
--- /dev/null
+++ b/styles/mods/deprecated/display_bettersearch.css
@@ -0,0 +1,10 @@
+/*
+Make search results look better:
+- adds contrast to search icon
+- overlay-style shadowed background
+
+author: trwnh
+license: Public Domain
+*/
+.search__icon .fa.active {opacity: 1}
+.drawer__inner.darker {background: rgba(0,0,0,0.5)}
diff --git a/styles/mods/display_breakname.css b/styles/mods/display_breakname.css
new file mode 100644
index 0000000..fc3936e
--- /dev/null
+++ b/styles/mods/display_breakname.css
@@ -0,0 +1,9 @@
+/*
+Add a line break between display name and account handle:
+- this allows user/display names to expand more by default.
+- it also makes names look better in general.
+
+author: trwnh
+license: Public Domain
+*/
+.display-name__html {display: block;}
\ No newline at end of file
diff --git a/styles/mods/display_browserfont.css b/styles/mods/display_browserfont.css
new file mode 100644
index 0000000..6389f20
--- /dev/null
+++ b/styles/mods/display_browserfont.css
@@ -0,0 +1,20 @@
+/*
+Use browser default font:
+- override mastodon-font-sans-serif with sans-serif
+- note: this is not the same as "use system default font"
+ in mastodon's preferences! that option uses a font that
+ would be *expected to load on that system*, and ignores
+ your browser's settings entirely. for example, if you
+ are running ms windows, you will see segoe ui, even if
+ your browser's default font is something else!
+
+author: trwnh
+license: Public Domain
+*/
+body,
+.landing-page #mastodon-timeline,
+.landing-page li,
+.landing-page p
+{
+ font-family: sans-serif
+}
\ No newline at end of file
diff --git a/styles/mods/display_circleavatar.css b/styles/mods/display_circleavatar.css
new file mode 100644
index 0000000..b7d5d49
--- /dev/null
+++ b/styles/mods/display_circleavatar.css
@@ -0,0 +1,15 @@
+/*
+* Rounded avatars:
+* - adjust the border radius around all avatar elements.
+* - default override is 50% (i.e. turn squares into circles),
+* but you can set it to whatever you want.
+*
+* author: trwnh
+* license: Public Domain
+*/
+.card .avatar img,
+.activity-stream .status.light .status__avatar img,
+.account__avatar,
+ .account__avatar-overlay-base,
+ .account__avatar-overlay-overlay
+{border-radius: 50%}
diff --git a/styles/mods/display_collapsedinteractions.css b/styles/mods/display_collapsedinteractions.css
new file mode 100644
index 0000000..7cb1f7c
--- /dev/null
+++ b/styles/mods/display_collapsedinteractions.css
@@ -0,0 +1,37 @@
+/*
+Collapse fave/boost/poll notifications
+- limits display to just a few lines (~3), so you can at least identify it
+- hides the display name on fave/boost, because you already know you posted it
+- tighter margins, remove space between CW and content
+- hides the buttons, but you can expand a status to interact with it
+
+author: trwnh
+license: Public Domain
+*/
+
+.notification-favourite .status,
+.notification-reblog .status,
+.notification-poll .status{
+ max-height: 4em;
+ overflow: hidden;
+}
+
+.notification-favourite .display-name,
+.notification-reblog .display-name {
+ display: none;
+}
+
+.notification-favourite .status__content,
+.notification-reblog .status__content {
+ margin-top: -4px;
+}
+
+.notification-favourite .status__content p,
+.notification-reblog .status__content p {
+ margin-bottom: 0px;
+}
+
+.notification-favourite .status__action-bar,
+.notification-reblog .status__action-bar {
+ display: none;
+}
diff --git a/styles/mods/display_emojizoom.css b/styles/mods/display_emojizoom.css
new file mode 100644
index 0000000..32ba536
--- /dev/null
+++ b/styles/mods/display_emojizoom.css
@@ -0,0 +1,23 @@
+ /*
+ Emoji hover zoom:
+ - makes emoji grow in size when moused over
+
+ author: noiob
+ license: CC0 - Public Domain
+ source: https://userstyles.org/styles/150165
+ */
+
+ .emojione:hover
+ {
+ width: 50px !important;
+ /* set the width and height of the expanded emojo here */
+ height: 50px !important;
+ transition: all 0.3s ease-in-out !important;
+ /* the 0.3s is the animation time for growing the emojo, it can be set to 0 */;
+ }
+
+ .emojione
+ {
+ transition: all 0.2s ease-in-out;
+ /* the 0.2s is the animation time for shrinking the emojo, it can be set to 0 */;
+ }
\ No newline at end of file
diff --git a/styles/mods/display_fadedinteractions.css b/styles/mods/display_fadedinteractions.css
new file mode 100644
index 0000000..8945d26
--- /dev/null
+++ b/styles/mods/display_fadedinteractions.css
@@ -0,0 +1,9 @@
+/*
+Fade out faved/boosted toots in notifications:
+- for "x favourited your toot" / "x boosted your toot",
+ make the faved/boosted toot half-transparent.
+
+author: trwnh
+license: Public Domain
+*/
+.status.muted {opacity: 0.5}
\ No newline at end of file
diff --git a/styles/mods/display_fullmedia.css b/styles/mods/display_fullmedia.css
new file mode 100644
index 0000000..04cdbf5
--- /dev/null
+++ b/styles/mods/display_fullmedia.css
@@ -0,0 +1,31 @@
+/*
+Full-height media previews:
+- normal media previews are forced to be 16:9 for consistency
+- use this if you prefer to see the aspect ratio unchanged
+
+author: Kevin
+license: CC0 - Public Domain
+source: https://userstyles.org/styles/167207 [in part]
+*/
+
+.media-gallery {
+ max-height: 100% !important;
+ height: 100% !important;
+}
+
+.media-gallery__item-gifv-thumbnail, .media-gallery__item-gifv-thumbnail img {
+ transform: translateY(0%) !important;
+ max-height: 100% !important;
+}
+
+.media-gallery__item-thumbnail, .media-gallery__item-thumbnail img, .media-gallery__gifv {
+ max-height: 100% !important;
+}
+
+.media-gallery__item {
+ width: 100% !important;
+ height: 100% !important;
+ max-height: 100% !important;
+ inset: 0 !important;
+ margin-bottom: 4px;
+}
diff --git a/styles/mods/display_fullname.css b/styles/mods/display_fullname.css
new file mode 100644
index 0000000..1f2e541
--- /dev/null
+++ b/styles/mods/display_fullname.css
@@ -0,0 +1,11 @@
+/*
+Always show full name and handle:
+- this removes the `...` and allows text to overflow past the column.
+- this can look worse, but it can also prevent having to mouse over
+ to see the full name or handle.
+- by default, it will also break long names onto a new line.
+
+author: trwnh
+license: Public Domain
+*/
+.display-name {overflow: visible; white-space: normal; word-wrap: break-word}
\ No newline at end of file
diff --git a/styles/mods/display_hidefollowcounts.css b/styles/mods/display_hidefollowcounts.css
new file mode 100644
index 0000000..e9ac9ed
--- /dev/null
+++ b/styles/mods/display_hidefollowcounts.css
@@ -0,0 +1,10 @@
+/*
+Hide the following and follower counters on profiles.
+- full counts are still available by hovering over the text, though
+author: trwnh
+license: Public Domain
+*/
+.account__header__extra__links a:not(:first-child) strong
+{display: none}
+.details-counters .counter:not(:first-child) .counter-number
+{visibility: hidden}
diff --git a/styles/mods/display_hidereplycounts.css b/styles/mods/display_hidereplycounts.css
new file mode 100644
index 0000000..513251c
--- /dev/null
+++ b/styles/mods/display_hidereplycounts.css
@@ -0,0 +1,7 @@
+/*
+Hide the 0/1/1+ counters of replies.
+
+author: trwnh
+license: Public Domain
+*/
+.status__action-bar__counter__label {display: none}
\ No newline at end of file
diff --git a/styles/mods/display_starstohearts.css b/styles/mods/display_starstohearts.css
new file mode 100644
index 0000000..53efb55
--- /dev/null
+++ b/styles/mods/display_starstohearts.css
@@ -0,0 +1,16 @@
+/*
+Turn stars into hearts:
+- similar to twitter's change
+
+author: numimyon
+license: CC0 - Public Domain
+source: https://userstyles.org/styles/151233
+*/
+
+.notification__favourite-icon-wrapper .star-icon,
+.star-icon.active,
+.star-icon:hover,
+.star-icon:active
+{color: crimson !important;}
+
+.fa-star:before {content: "";}
diff --git a/styles/mods/display_transparentmedia.css b/styles/mods/display_transparentmedia.css
new file mode 100644
index 0000000..afa18a1
--- /dev/null
+++ b/styles/mods/display_transparentmedia.css
@@ -0,0 +1,10 @@
+/*
+Remove the checker-board background from the media modal:
+- this makes transparent images actually transparent
+
+author: trwnh
+license: Public Domain
+*/
+.media-modal canvas,
+.media-modal img
+{background: none}
\ No newline at end of file
diff --git a/styles/mods/layout_1600px.css b/styles/mods/layout_1600px.css
new file mode 100644
index 0000000..f81af00
--- /dev/null
+++ b/styles/mods/layout_1600px.css
@@ -0,0 +1,12 @@
+/*
+Allow for wider layout on bigger screens
+- vanilla max-width is 1200px
+- there is no penalty to slightly expanding flexbox on bigger screens
+- only applies on landing pages (webapp will expand as you add columns)
+
+author: trwnh
+license: Public Domain
+*/
+@media (min-width: 1600px) {
+ .landing-page .container {max-width: 1600px}
+}
\ No newline at end of file
diff --git a/styles/mods/layout_elefriend.css b/styles/mods/layout_elefriend.css
new file mode 100644
index 0000000..3d79a2c
--- /dev/null
+++ b/styles/mods/layout_elefriend.css
@@ -0,0 +1,20 @@
+/*
+Release elephant friend from their confines:
+- elephant friend will now hang out in the corner of your browser,
+ instead of being trapped in the drawer.
+
+author: trwnh
+license: Public Domain
+*/
+.drawer__inner, .drawer__inner__mastodon {
+ background: none; z-index: 0
+}
+.drawer__inner__mastodon > img {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ height: 180px;
+ z-index: -1
+}
+.compose-form {z-index: 1}
+.drawer__inner {height: 100%} /* firefox bug highlights drawer text on click? */
\ No newline at end of file
diff --git a/styles/mods/layout_gettingstartedheight.css b/styles/mods/layout_gettingstartedheight.css
new file mode 100644
index 0000000..536a707
--- /dev/null
+++ b/styles/mods/layout_gettingstartedheight.css
@@ -0,0 +1,13 @@
+/*
+Make "getting started" column height consistent with all other columns:
+- puts the footer back at the bottom of the page, instead of floating.
+
+author: trwnh
+license: Public Domain
+*/
+.getting-started {
+ height: 100%;
+ display: flex;
+ flex-flow: column;
+ justify-content: space-between
+}
\ No newline at end of file
diff --git a/styles/mods/layout_hidedisabled.css b/styles/mods/layout_hidedisabled.css
new file mode 100644
index 0000000..3196db9
--- /dev/null
+++ b/styles/mods/layout_hidedisabled.css
@@ -0,0 +1,17 @@
+/*
+Hide buttons that can't be clicked
+- columns on /about and tag pages have buttons that don't work.
+- so, this snippet hides those nonworking buttons to save space
+- and to avoid confusion.
+- unboostable buttons are made transparent on hover instead.
+
+this is fixed in https://github.com/tootsuite/mastodon/pull/10054
+
+author: trwnh
+license: Public Domain
+*/
+.status__action-bar .icon-button.disabled:hover,
+.notification-favourite .status.status-direct .icon-button.disabled:hover
+{color: transparent !important}
+
+#mastodon-timeline .status__action-bar {display: none}
\ No newline at end of file
diff --git a/styles/mods/layout_hidefiltered.css b/styles/mods/layout_hidefiltered.css
new file mode 100644
index 0000000..f701e5f
--- /dev/null
+++ b/styles/mods/layout_hidefiltered.css
@@ -0,0 +1,9 @@
+/*
+Remove the "Filtered" tombstone from timelines.
+- WARNING: this breaks keyboard scrolling with j/k!
+
+author: trwnh
+license: Public Domain
+*/
+
+.status__wrapper--filtered {display: none}
diff --git a/styles/mods/layout_mobile_bottombar.css b/styles/mods/layout_mobile_bottombar.css
new file mode 100644
index 0000000..e5ddaf4
--- /dev/null
+++ b/styles/mods/layout_mobile_bottombar.css
@@ -0,0 +1,29 @@
+/*
+Bottom tabs on mobile:
+- Places the tab bar at the bottom instead of the top.
+- Fixes layout errors that are a result of this change.
+
+author: trwnh
+license: Public Domain
+*/
+@media (max-width: 630px) {
+
+.tabs-bar {
+position: fixed;
+bottom: 0;
+z-index: 1;
+width: 100%;
+margin: 0 !important;
+}
+
+.getting-started {overflow: auto} /* can be removed after PR #10075 is merged */
+
+.columns-area {padding: 0}
+.getting-started__trends, .getting-started__wrapper, .search {margin: 0}
+.columns-area__panels__main, .tabs-bar__wrapper {padding: 0}
+
+.floating-action-button, .column .scrollable > div:last-child {margin-bottom: 50px}
+.react-swipeable-view-container {height: calc(100% - 50px)}
+.react-swipeable-view-container .columns-area {height: 100% !important}
+
+}
diff --git a/styles/mods/layout_singlecolumn.css b/styles/mods/layout_singlecolumn.css
new file mode 100644
index 0000000..88bf19e
--- /dev/null
+++ b/styles/mods/layout_singlecolumn.css
@@ -0,0 +1,25 @@
+/*
+Single column layout:
+- re-uses tab bar from mobile layout
+- hides search from drawer (redundant with search tab)
+
+author: trwnh
+license: Public Domain
+*/
+
+@media (min-width: 1024px) {
+ /* place constraints on app layout */
+ .ui {max-width: 960px; max-height: 100vh;}
+ .drawer {width: 300px}
+ .column:last-child, .drawer:last-child
+ {display: flex; flex: 1 1 100%;}
+ /* show tabs bar (from mobile layout) as header */
+ .tabs-bar {display: flex;}
+ /* hide redundant ui elements */
+ .column,
+ .drawer__header,
+ .drawer:first-child .search,
+ .drawer:first-child .search-results
+ {display: none;}
+ .drawer:first-child .drawer__inner.darker {z-index: -1}
+}
\ No newline at end of file
diff --git a/styles/mods/layout_widercolumns.css b/styles/mods/layout_widercolumns.css
new file mode 100644
index 0000000..b5d91dc
--- /dev/null
+++ b/styles/mods/layout_widercolumns.css
@@ -0,0 +1,10 @@
+/*
+* Wider columns:
+* - Make the multi-column layout use wider columns by default.
+*
+* author: trwnh
+* license: Public Domain
+*/
+@media (min-width: 640px) {
+ .column, #mastodon-timeline {min-width: 60ch;}
+}
\ No newline at end of file
diff --git a/styles/mods/test_colorizedlogo.css b/styles/mods/test_colorizedlogo.css
new file mode 100644
index 0000000..634ae5f
--- /dev/null
+++ b/styles/mods/test_colorizedlogo.css
@@ -0,0 +1,12 @@
+/*
+Colorize logo on landing page:
+- DO NOT IMPORT. It works as standalone CSS, but it makes Sass choke.
+
+author: trwnh
+license: Public Domain
+*/
+
+.landing-page__logo img {
+ filter: sepia(100%) hue-rotate(160deg) saturate(400%) brightness(40%);
+ mix-blend-mode: normal
+}
\ No newline at end of file
diff --git a/styles/photon.scss b/styles/photon.scss
new file mode 100644
index 0000000..5269048
--- /dev/null
+++ b/styles/photon.scss
@@ -0,0 +1,82 @@
+// http://design.firefox.com/photon/visuals/color.html
+
+// Firefox Blue is one of our primary colors. We use blue as accent color for highlighting buttons, links, and active states like the current tab in Firefox for desktop.
+$photon_blue_40: #45a1ff;
+$photon_blue_50: #0a84ff;
+$photon_blue_60: #0060df;
+$photon_blue_70: #003eaa;
+$photon_blue_80: #002275;
+$photon_blue_90: #000f40;
+
+// Firefox Teal is one of our primary colors. We use teal as an attention color.
+$photon_teal_50: #00feff;
+$photon_teal_60: #00c8d7;
+$photon_teal_70: #008ea4;
+$photon_teal_80: #005a71;
+$photon_teal_90: #002d3e;
+
+// Firefox Magenta is one of our primary colors. We currently have no common usage for it.
+$photon_magenta_50: #ff1ad9;
+$photon_magenta_60: #ed00b5;
+$photon_magenta_70: #b5007f;
+$photon_magenta_80: #7d004f;
+$photon_magenta_90: #440027;
+
+// Firefox Green is commonly used to indicate success.
+$photon_green_50: #30e60b;
+$photon_green_60: #12bc00;
+$photon_green_70: #058b00;
+$photon_green_80: #006504;
+$photon_green_90: #003706;
+
+// Firefox Yellow is commonly used for warnings.
+$photon_yellow_50: #ffe900;
+$photon_yellow_60: #d7b600;
+$photon_yellow_70: #a47f00;
+$photon_yellow_80: #715100;
+$photon_yellow_90: #3e2800;
+
+// Firefox Red is commonly used for errors.
+$photon_red_50: #ff0039;
+$photon_red_60: #d70022;
+$photon_red_70: #a4000f;
+$photon_red_80: #5a0002;
+$photon_red_90: #3e0200;
+
+// Firefox Purple is commonly used to indicate privacy.
+$photon_purple_50: #9400ff;
+$photon_purple_60: #8000d7;
+$photon_purple_70: #6200a4;
+$photon_purple_80: #440071;
+$photon_purple_90: #25003e;
+
+// Firefox Orange is only used for branding. Do not use it otherwise.
+$photon_orange_50: #ff9400;
+$photon_orange_60: #d76e00;
+$photon_orange_70: #a44900;
+$photon_orange_80: #712b00;
+$photon_orange_90: #3e1300;
+
+// Firefox Ink is commonly used for interfaces (e.g., the Firefox for desktop dark theme).
+$photon_ink_70: #363959;
+$photon_ink_80: #202340;
+$photon_ink_90: #0f1126;
+
+// Firefox Grey is commonly used for interfaces (e.g., the Firefox for desktop light theme).
+$photon_grey_10: #f9f9fa;
+$photon_grey_20: #ededf0;
+$photon_grey_30: #d7d7db;
+$photon_grey_40: #b1b1b3;
+$photon_grey_50: #737373;
+$photon_grey_60: #4a4a4f;
+$photon_grey_70: #38383d;
+$photon_grey_80: #2a2a2e;
+$photon_grey_90: #0c0c0d;
+
+// We use white for the background of doorhangers or in-content menus.
+$photon_white: #ffffff;
+
+div.column {
+ flex-grow: 1;
+}
+
diff --git a/styles/photon_dark.scss b/styles/photon_dark.scss
new file mode 100644
index 0000000..3573409
--- /dev/null
+++ b/styles/photon_dark.scss
@@ -0,0 +1,24 @@
+@import 'photon.scss';
+
+$color1: $photon_grey_90; // darkest
+$color2: lighten($photon_blue_50, 20%); // lightest
+$color3: lighten($photon_blue_50, 10%); // lighter
+$color4: $photon_blue_50; // vibrant
+$color5: $photon_white; // white
+$color6: $photon_red_50; // error red
+$color7: $photon_green_50; // succ green
+$color8: $photon_grey_90; // black
+
+$ui-base-color: $color1;
+$ui-secondary-color: $color2;
+$ui-primary-color: $color3;
+$ui-highlight-color: $color4;
+$base-border-color: $color5;
+$simple-background-color: $color5;
+$primary-text-color: $color5;
+$error-value-color: $color6;
+$valid-value-color: $color7;
+$base-shadow-color: $color8;
+$base-overlay-background: $color8;
+
+@import 'application';
diff --git a/styles/photon_green.scss b/styles/photon_green.scss
new file mode 100644
index 0000000..d789f9e
--- /dev/null
+++ b/styles/photon_green.scss
@@ -0,0 +1,24 @@
+@import 'photon.scss';
+
+$color1: $photon_grey_90; // darkest
+$color2: lighten($photon_green_50, 20%); // lightest
+$color3: lighten($photon_green_50, 10%); // lighter
+$color4: $photon_green_50; // vibrant
+$color5: $photon_white; // white
+$color6: $photon_red_50; // error red
+$color7: $photon_green_50; // succ green
+$color8: $photon_grey_90; // black
+
+$ui-base-color: $color1;
+$ui-secondary-color: $color2;
+$ui-primary-color: $color3;
+$ui-highlight-color: $color4;
+$base-border-color: $color5;
+$simple-background-color: $color5;
+$primary-text-color: $color5;
+$error-value-color: $color6;
+$valid-value-color: $color7;
+$base-shadow-color: $color8;
+$base-overlay-background: $color8;
+
+@import 'application';
diff --git a/styles/photon_light.scss b/styles/photon_light.scss
new file mode 100644
index 0000000..5a915e0
--- /dev/null
+++ b/styles/photon_light.scss
@@ -0,0 +1,29 @@
+@import 'photon.scss';
+
+$color1: $photon_grey_10; // darkest
+$color2: lighten($photon_blue_50, 20%); // lightest
+$color3: lighten($photon_blue_50, 10%); // lighter
+$color4: $photon_blue_50; // vibrant
+$color5: $photon_grey_90; // white
+$color6: $photon_red_50; // error red
+$color7: $photon_green_50; // succ green
+$color8: $photon_white; // black
+
+// Avoid making text unreadable
+@function lighten ($color, $percentage) {
+ @return darken($color, $percentage);
+}
+
+$ui-base-color: $color1;
+$ui-secondary-color: $color2;
+$ui-primary-color: $color3;
+$ui-highlight-color: $color4;
+$base-border-color: $color5;
+$simple-background-color: $color5;
+$primary-text-color: $color5;
+$error-value-color: $color6;
+$valid-value-color: $color7;
+$base-shadow-color: $color8;
+$base-overlay-background: $color8;
+
+@import 'application';
diff --git a/styles/photon_purple.scss b/styles/photon_purple.scss
new file mode 100644
index 0000000..55cd60d
--- /dev/null
+++ b/styles/photon_purple.scss
@@ -0,0 +1,24 @@
+@import 'photon.scss';
+
+$color1: $photon_grey_90; // darkest
+$color2: lighten($photon_purple_50, 20%); // lightest
+$color3: lighten($photon_purple_50, 10%); // lighter
+$color4: $photon_purple_50; // vibrant
+$color5: $photon_white; // white
+$color6: $photon_red_50; // error red
+$color7: $photon_green_50; // succ green
+$color8: $photon_grey_90; // black
+
+$ui-base-color: $color1;
+$ui-secondary-color: $color2;
+$ui-primary-color: $color3;
+$ui-highlight-color: $color4;
+$base-border-color: $color5;
+$simple-background-color: $color5;
+$primary-text-color: $color5;
+$error-value-color: $color6;
+$valid-value-color: $color7;
+$base-shadow-color: $color8;
+$base-overlay-background: $color8;
+
+@import 'application';
diff --git a/styles/sleepingtown.scss b/styles/sleepingtown.scss
new file mode 100644
index 0000000..543d761
--- /dev/null
+++ b/styles/sleepingtown.scss
@@ -0,0 +1,888 @@
+// ==========================================================================
+//
+// Name: UI Color Palette
+// Description: The color palette of material design.
+// Version: 2.3.1
+//
+// Author: Denis Malinochkin
+// Git: https://github.com/mrmlnc/material-color
+//
+// twitter: @mrmlnc
+//
+// ==========================================================================
+
+
+//
+// List of base colors
+//
+
+// $clr-red
+// $clr-pink
+// $clr-purple
+// $clr-deep-purple
+// $clr-indigo
+// $clr-blue
+// $clr-light-blue
+// $clr-cyan
+// $clr-teal
+// $clr-green
+// $clr-light-green
+// $clr-lime
+// $clr-yellow
+// $clr-amber
+// $clr-orange
+// $clr-deep-orange
+// $clr-brown
+// $clr-grey
+// $clr-blue-grey
+// $clr-black
+// $clr-white
+
+
+//
+// Red
+//
+
+$clr-red-list: (
+ "base": #f44336,
+ "50": #ffebee,
+ "100": #ffcdd2,
+ "200": #ef9a9a,
+ "300": #e57373,
+ "400": #ef5350,
+ "500": #f44336,
+ "600": #e53935,
+ "700": #d32f2f,
+ "800": #c62828,
+ "900": #b71c1c,
+ "a100": #ff8a80,
+ "a200": #ff5252,
+ "a400": #ff1744,
+ "a700": #d50000
+);
+
+$clr-red: map-get($clr-red-list, "base");
+
+$clr-red-50: map-get($clr-red-list, "50");
+$clr-red-100: map-get($clr-red-list, "100");
+$clr-red-200: map-get($clr-red-list, "200");
+$clr-red-300: map-get($clr-red-list, "300");
+$clr-red-400: map-get($clr-red-list, "400");
+$clr-red-500: map-get($clr-red-list, "500");
+$clr-red-600: map-get($clr-red-list, "600");
+$clr-red-700: map-get($clr-red-list, "700");
+$clr-red-800: map-get($clr-red-list, "800");
+$clr-red-900: map-get($clr-red-list, "900");
+$clr-red-a100: map-get($clr-red-list, "a100");
+$clr-red-a200: map-get($clr-red-list, "a200");
+$clr-red-a400: map-get($clr-red-list, "a400");
+$clr-red-a700: map-get($clr-red-list, "a700");
+
+
+//
+// Pink
+//
+
+$clr-pink-list: (
+ "base": #e91e63,
+ "50": #fce4ec,
+ "100": #f8bbd0,
+ "200": #f48fb1,
+ "300": #f06292,
+ "400": #ec407a,
+ "500": #e91e63,
+ "600": #d81b60,
+ "700": #c2185b,
+ "800": #ad1457,
+ "900": #880e4f,
+ "a100": #ff80ab,
+ "a200": #ff4081,
+ "a400": #f50057,
+ "a700": #c51162
+);
+
+$clr-pink: map-get($clr-pink-list, "base");
+
+$clr-pink-50: map-get($clr-pink-list, "50");
+$clr-pink-100: map-get($clr-pink-list, "100");
+$clr-pink-200: map-get($clr-pink-list, "200");
+$clr-pink-300: map-get($clr-pink-list, "300");
+$clr-pink-400: map-get($clr-pink-list, "400");
+$clr-pink-500: map-get($clr-pink-list, "500");
+$clr-pink-600: map-get($clr-pink-list, "600");
+$clr-pink-700: map-get($clr-pink-list, "700");
+$clr-pink-800: map-get($clr-pink-list, "800");
+$clr-pink-900: map-get($clr-pink-list, "900");
+$clr-pink-a100: map-get($clr-pink-list, "a100");
+$clr-pink-a200: map-get($clr-pink-list, "a200");
+$clr-pink-a400: map-get($clr-pink-list, "a400");
+$clr-pink-a700: map-get($clr-pink-list, "a700");
+
+
+//
+// Purple
+//
+
+$clr-purple-list: (
+ "base": #9c27b0,
+ "50": #f3e5f5,
+ "100": #e1bee7,
+ "200": #ce93d8,
+ "300": #ba68c8,
+ "400": #ab47bc,
+ "500": #9c27b0,
+ "600": #8e24aa,
+ "700": #7b1fa2,
+ "800": #6a1b9a,
+ "900": #4a148c,
+ "a100": #ea80fc,
+ "a200": #e040fb,
+ "a400": #d500f9,
+ "a700": #aa00ff
+);
+
+$clr-purple: map-get($clr-purple-list, "base");
+
+$clr-purple-50: map-get($clr-purple-list, "50");
+$clr-purple-100: map-get($clr-purple-list, "100");
+$clr-purple-200: map-get($clr-purple-list, "200");
+$clr-purple-300: map-get($clr-purple-list, "300");
+$clr-purple-400: map-get($clr-purple-list, "400");
+$clr-purple-500: map-get($clr-purple-list, "500");
+$clr-purple-600: map-get($clr-purple-list, "600");
+$clr-purple-700: map-get($clr-purple-list, "700");
+$clr-purple-800: map-get($clr-purple-list, "800");
+$clr-purple-900: map-get($clr-purple-list, "900");
+$clr-purple-a100: map-get($clr-purple-list, "a100");
+$clr-purple-a200: map-get($clr-purple-list, "a200");
+$clr-purple-a400: map-get($clr-purple-list, "a400");
+$clr-purple-a700: map-get($clr-purple-list, "a700");
+
+
+//
+// Deep purple
+//
+
+$clr-deep-purple-list: (
+ "base": #673ab7,
+ "50": #ede7f6,
+ "100": #d1c4e9,
+ "200": #b39ddb,
+ "300": #9575cd,
+ "400": #7e57c2,
+ "500": #673ab7,
+ "600": #5e35b1,
+ "700": #512da8,
+ "800": #4527a0,
+ "900": #311b92,
+ "a100": #b388ff,
+ "a200": #7c4dff,
+ "a400": #651fff,
+ "a700": #6200ea
+);
+
+$clr-deep-purple: map-get($clr-deep-purple-list, "base");
+
+$clr-deep-purple-50: map-get($clr-deep-purple-list, "50");
+$clr-deep-purple-100: map-get($clr-deep-purple-list, "100");
+$clr-deep-purple-200: map-get($clr-deep-purple-list, "200");
+$clr-deep-purple-300: map-get($clr-deep-purple-list, "300");
+$clr-deep-purple-400: map-get($clr-deep-purple-list, "400");
+$clr-deep-purple-500: map-get($clr-deep-purple-list, "500");
+$clr-deep-purple-600: map-get($clr-deep-purple-list, "600");
+$clr-deep-purple-700: map-get($clr-deep-purple-list, "700");
+$clr-deep-purple-800: map-get($clr-deep-purple-list, "800");
+$clr-deep-purple-900: map-get($clr-deep-purple-list, "900");
+$clr-deep-purple-a100: map-get($clr-deep-purple-list, "a100");
+$clr-deep-purple-a200: map-get($clr-deep-purple-list, "a200");
+$clr-deep-purple-a400: map-get($clr-deep-purple-list, "a400");
+$clr-deep-purple-a700: map-get($clr-deep-purple-list, "a700");
+
+
+//
+// Indigo
+//
+
+$clr-indigo-list: (
+ "base": #3f51b5,
+ "50": #e8eaf6,
+ "100": #c5cae9,
+ "200": #9fa8da,
+ "300": #7986cb,
+ "400": #5c6bc0,
+ "500": #3f51b5,
+ "600": #3949ab,
+ "700": #303f9f,
+ "800": #283593,
+ "900": #1a237e,
+ "a100": #8c9eff,
+ "a200": #536dfe,
+ "a400": #3d5afe,
+ "a700": #304ffe
+);
+
+$clr-indigo: map-get($clr-indigo-list, "base");
+
+$clr-indigo-50: map-get($clr-indigo-list, "50");
+$clr-indigo-100: map-get($clr-indigo-list, "100");
+$clr-indigo-200: map-get($clr-indigo-list, "200");
+$clr-indigo-300: map-get($clr-indigo-list, "300");
+$clr-indigo-400: map-get($clr-indigo-list, "400");
+$clr-indigo-500: map-get($clr-indigo-list, "500");
+$clr-indigo-600: map-get($clr-indigo-list, "600");
+$clr-indigo-700: map-get($clr-indigo-list, "700");
+$clr-indigo-800: map-get($clr-indigo-list, "800");
+$clr-indigo-900: map-get($clr-indigo-list, "900");
+$clr-indigo-a100: map-get($clr-indigo-list, "a100");
+$clr-indigo-a200: map-get($clr-indigo-list, "a200");
+$clr-indigo-a400: map-get($clr-indigo-list, "a400");
+$clr-indigo-a700: map-get($clr-indigo-list, "a700");
+
+
+//
+// Blue
+//
+
+$clr-blue-list: (
+ "base": #2196f3,
+ "50": #e3f2fd,
+ "100": #bbdefb,
+ "200": #90caf9,
+ "300": #64b5f6,
+ "400": #42a5f5,
+ "500": #2196f3,
+ "600": #1e88e5,
+ "700": #1976d2,
+ "800": #1565c0,
+ "900": #0d47a1,
+ "a100": #82b1ff,
+ "a200": #448aff,
+ "a400": #2979ff,
+ "a700": #2962ff
+);
+
+$clr-blue: map-get($clr-blue-list, "base");
+
+$clr-blue-50: map-get($clr-blue-list, "50");
+$clr-blue-100: map-get($clr-blue-list, "100");
+$clr-blue-200: map-get($clr-blue-list, "200");
+$clr-blue-300: map-get($clr-blue-list, "300");
+$clr-blue-400: map-get($clr-blue-list, "400");
+$clr-blue-500: map-get($clr-blue-list, "500");
+$clr-blue-600: map-get($clr-blue-list, "600");
+$clr-blue-700: map-get($clr-blue-list, "700");
+$clr-blue-800: map-get($clr-blue-list, "800");
+$clr-blue-900: map-get($clr-blue-list, "900");
+$clr-blue-a100: map-get($clr-blue-list, "a100");
+$clr-blue-a200: map-get($clr-blue-list, "a200");
+$clr-blue-a400: map-get($clr-blue-list, "a400");
+$clr-blue-a700: map-get($clr-blue-list, "a700");
+
+
+//
+// Light Blue
+//
+
+$clr-light-blue-list: (
+ "base": #03a9f4,
+ "50": #e1f5fe,
+ "100": #b3e5fc,
+ "200": #81d4fa,
+ "300": #4fc3f7,
+ "400": #29b6f6,
+ "500": #03a9f4,
+ "600": #039be5,
+ "700": #0288d1,
+ "800": #0277bd,
+ "900": #01579b,
+ "a100": #80d8ff,
+ "a200": #40c4ff,
+ "a400": #00b0ff,
+ "a700": #0091ea
+);
+
+$clr-light-blue: map-get($clr-light-blue-list, "base");
+
+$clr-light-blue-50: map-get($clr-light-blue-list, "50");
+$clr-light-blue-100: map-get($clr-light-blue-list, "100");
+$clr-light-blue-200: map-get($clr-light-blue-list, "200");
+$clr-light-blue-300: map-get($clr-light-blue-list, "300");
+$clr-light-blue-400: map-get($clr-light-blue-list, "400");
+$clr-light-blue-500: map-get($clr-light-blue-list, "500");
+$clr-light-blue-600: map-get($clr-light-blue-list, "600");
+$clr-light-blue-700: map-get($clr-light-blue-list, "700");
+$clr-light-blue-800: map-get($clr-light-blue-list, "800");
+$clr-light-blue-900: map-get($clr-light-blue-list, "900");
+$clr-light-blue-a100: map-get($clr-light-blue-list, "a100");
+$clr-light-blue-a200: map-get($clr-light-blue-list, "a200");
+$clr-light-blue-a400: map-get($clr-light-blue-list, "a400");
+$clr-light-blue-a700: map-get($clr-light-blue-list, "a700");
+
+
+//
+// Cyan
+//
+
+$clr-cyan-list: (
+ "base": #00bcd4,
+ "50": #e0f7fa,
+ "100": #b2ebf2,
+ "200": #80deea,
+ "300": #4dd0e1,
+ "400": #26c6da,
+ "500": #00bcd4,
+ "600": #00acc1,
+ "700": #0097a7,
+ "800": #00838f,
+ "900": #006064,
+ "a100": #84ffff,
+ "a200": #18ffff,
+ "a400": #00e5ff,
+ "a700": #00b8d4
+);
+
+$clr-cyan: map-get($clr-cyan-list, "base");
+
+$clr-cyan-50: map-get($clr-cyan-list, "50");
+$clr-cyan-100: map-get($clr-cyan-list, "100");
+$clr-cyan-200: map-get($clr-cyan-list, "200");
+$clr-cyan-300: map-get($clr-cyan-list, "300");
+$clr-cyan-400: map-get($clr-cyan-list, "400");
+$clr-cyan-500: map-get($clr-cyan-list, "500");
+$clr-cyan-600: map-get($clr-cyan-list, "600");
+$clr-cyan-700: map-get($clr-cyan-list, "700");
+$clr-cyan-800: map-get($clr-cyan-list, "800");
+$clr-cyan-900: map-get($clr-cyan-list, "900");
+$clr-cyan-a100: map-get($clr-cyan-list, "a100");
+$clr-cyan-a200: map-get($clr-cyan-list, "a200");
+$clr-cyan-a400: map-get($clr-cyan-list, "a400");
+$clr-cyan-a700: map-get($clr-cyan-list, "a700");
+
+
+//
+// Teal
+//
+
+$clr-teal-list: (
+ "base": #009688,
+ "50": #e0f2f1,
+ "100": #b2dfdb,
+ "200": #80cbc4,
+ "300": #4db6ac,
+ "400": #26a69a,
+ "500": #009688,
+ "600": #00897b,
+ "700": #00796b,
+ "800": #00695c,
+ "900": #004d40,
+ "a100": #a7ffeb,
+ "a200": #64ffda,
+ "a400": #1de9b6,
+ "a700": #00bfa5
+);
+
+$clr-teal: map-get($clr-teal-list, "base");
+
+$clr-teal-50: map-get($clr-teal-list, "50");
+$clr-teal-100: map-get($clr-teal-list, "100");
+$clr-teal-200: map-get($clr-teal-list, "200");
+$clr-teal-300: map-get($clr-teal-list, "300");
+$clr-teal-400: map-get($clr-teal-list, "400");
+$clr-teal-500: map-get($clr-teal-list, "500");
+$clr-teal-600: map-get($clr-teal-list, "600");
+$clr-teal-700: map-get($clr-teal-list, "700");
+$clr-teal-800: map-get($clr-teal-list, "800");
+$clr-teal-900: map-get($clr-teal-list, "900");
+$clr-teal-a100: map-get($clr-teal-list, "a100");
+$clr-teal-a200: map-get($clr-teal-list, "a200");
+$clr-teal-a400: map-get($clr-teal-list, "a400");
+$clr-teal-a700: map-get($clr-teal-list, "a700");
+
+
+//
+// Green
+//
+
+$clr-green-list: (
+ "base": #4caf50,
+ "50": #e8f5e9,
+ "100": #c8e6c9,
+ "200": #a5d6a7,
+ "300": #81c784,
+ "400": #66bb6a,
+ "500": #4caf50,
+ "600": #43a047,
+ "700": #388e3c,
+ "800": #2e7d32,
+ "900": #1b5e20,
+ "a100": #b9f6ca,
+ "a200": #69f0ae,
+ "a400": #00e676,
+ "a700": #00c853
+);
+
+$clr-green: map-get($clr-green-list, "base");
+
+$clr-green-50: map-get($clr-green-list, "50");
+$clr-green-100: map-get($clr-green-list, "100");
+$clr-green-200: map-get($clr-green-list, "200");
+$clr-green-300: map-get($clr-green-list, "300");
+$clr-green-400: map-get($clr-green-list, "400");
+$clr-green-500: map-get($clr-green-list, "500");
+$clr-green-600: map-get($clr-green-list, "600");
+$clr-green-700: map-get($clr-green-list, "700");
+$clr-green-800: map-get($clr-green-list, "800");
+$clr-green-900: map-get($clr-green-list, "900");
+$clr-green-a100: map-get($clr-green-list, "a100");
+$clr-green-a200: map-get($clr-green-list, "a200");
+$clr-green-a400: map-get($clr-green-list, "a400");
+$clr-green-a700: map-get($clr-green-list, "a700");
+
+
+//
+// Light green
+//
+
+$clr-light-green-list: (
+ "base": #8bc34a,
+ "50": #f1f8e9,
+ "100": #dcedc8,
+ "200": #c5e1a5,
+ "300": #aed581,
+ "400": #9ccc65,
+ "500": #8bc34a,
+ "600": #7cb342,
+ "700": #689f38,
+ "800": #558b2f,
+ "900": #33691e,
+ "a100": #ccff90,
+ "a200": #b2ff59,
+ "a400": #76ff03,
+ "a700": #64dd17
+);
+
+$clr-light-green: map-get($clr-light-green-list, "base");
+
+$clr-light-green-50: map-get($clr-light-green-list, "50");
+$clr-light-green-100: map-get($clr-light-green-list, "100");
+$clr-light-green-200: map-get($clr-light-green-list, "200");
+$clr-light-green-300: map-get($clr-light-green-list, "300");
+$clr-light-green-400: map-get($clr-light-green-list, "400");
+$clr-light-green-500: map-get($clr-light-green-list, "500");
+$clr-light-green-600: map-get($clr-light-green-list, "600");
+$clr-light-green-700: map-get($clr-light-green-list, "700");
+$clr-light-green-800: map-get($clr-light-green-list, "800");
+$clr-light-green-900: map-get($clr-light-green-list, "900");
+$clr-light-green-a100: map-get($clr-light-green-list, "a100");
+$clr-light-green-a200: map-get($clr-light-green-list, "a200");
+$clr-light-green-a400: map-get($clr-light-green-list, "a400");
+$clr-light-green-a700: map-get($clr-light-green-list, "a700");
+
+
+//
+// Lime
+//
+
+$clr-lime-list: (
+ "base": #cddc39,
+ "50": #f9fbe7,
+ "100": #f0f4c3,
+ "200": #e6ee9c,
+ "300": #dce775,
+ "400": #d4e157,
+ "500": #cddc39,
+ "600": #c0ca33,
+ "700": #afb42b,
+ "800": #9e9d24,
+ "900": #827717,
+ "a100": #f4ff81,
+ "a200": #eeff41,
+ "a400": #c6ff00,
+ "a700": #aeea00
+);
+
+$clr-lime: map-get($clr-lime-list, "base");
+
+$clr-lime-50: map-get($clr-lime-list, "50");
+$clr-lime-100: map-get($clr-lime-list, "100");
+$clr-lime-200: map-get($clr-lime-list, "200");
+$clr-lime-300: map-get($clr-lime-list, "300");
+$clr-lime-400: map-get($clr-lime-list, "400");
+$clr-lime-500: map-get($clr-lime-list, "500");
+$clr-lime-600: map-get($clr-lime-list, "600");
+$clr-lime-700: map-get($clr-lime-list, "700");
+$clr-lime-800: map-get($clr-lime-list, "800");
+$clr-lime-900: map-get($clr-lime-list, "900");
+$clr-lime-a100: map-get($clr-lime-list, "a100");
+$clr-lime-a200: map-get($clr-lime-list, "a200");
+$clr-lime-a400: map-get($clr-lime-list, "a400");
+$clr-lime-a700: map-get($clr-lime-list, "a700");
+
+
+//
+// Yellow
+//
+
+$clr-yellow-list: (
+ "base": #ffeb3b,
+ "50": #fffde7,
+ "100": #fff9c4,
+ "200": #fff59d,
+ "300": #fff176,
+ "400": #ffee58,
+ "500": #ffeb3b,
+ "600": #fdd835,
+ "700": #fbc02d,
+ "800": #f9a825,
+ "900": #f57f17,
+ "a100": #ffff8d,
+ "a200": #ffff00,
+ "a400": #ffea00,
+ "a700": #ffd600
+);
+
+$clr-yellow: map-get($clr-yellow-list, "base");
+
+$clr-yellow-50: map-get($clr-yellow-list, "50");
+$clr-yellow-100: map-get($clr-yellow-list, "100");
+$clr-yellow-200: map-get($clr-yellow-list, "200");
+$clr-yellow-300: map-get($clr-yellow-list, "300");
+$clr-yellow-400: map-get($clr-yellow-list, "400");
+$clr-yellow-500: map-get($clr-yellow-list, "500");
+$clr-yellow-600: map-get($clr-yellow-list, "600");
+$clr-yellow-700: map-get($clr-yellow-list, "700");
+$clr-yellow-800: map-get($clr-yellow-list, "800");
+$clr-yellow-900: map-get($clr-yellow-list, "900");
+$clr-yellow-a100: map-get($clr-yellow-list, "a100");
+$clr-yellow-a200: map-get($clr-yellow-list, "a200");
+$clr-yellow-a400: map-get($clr-yellow-list, "a400");
+$clr-yellow-a700: map-get($clr-yellow-list, "a700");
+
+
+//
+// amber
+//
+
+$clr-amber-list: (
+ "base": #ffc107,
+ "50": #fff8e1,
+ "100": #ffecb3,
+ "200": #ffe082,
+ "300": #ffd54f,
+ "400": #ffca28,
+ "500": #ffc107,
+ "600": #ffb300,
+ "700": #ffa000,
+ "800": #ff8f00,
+ "900": #ff6f00,
+ "a100": #ffe57f,
+ "a200": #ffd740,
+ "a400": #ffc400,
+ "a700": #ffab00
+);
+
+$clr-amber: map-get($clr-amber-list, "base");
+
+$clr-amber-50: map-get($clr-amber-list, "50");
+$clr-amber-100: map-get($clr-amber-list, "100");
+$clr-amber-200: map-get($clr-amber-list, "200");
+$clr-amber-300: map-get($clr-amber-list, "300");
+$clr-amber-400: map-get($clr-amber-list, "400");
+$clr-amber-500: map-get($clr-amber-list, "500");
+$clr-amber-600: map-get($clr-amber-list, "600");
+$clr-amber-700: map-get($clr-amber-list, "700");
+$clr-amber-800: map-get($clr-amber-list, "800");
+$clr-amber-900: map-get($clr-amber-list, "900");
+$clr-amber-a100: map-get($clr-amber-list, "a100");
+$clr-amber-a200: map-get($clr-amber-list, "a200");
+$clr-amber-a400: map-get($clr-amber-list, "a400");
+$clr-amber-a700: map-get($clr-amber-list, "a700");
+
+
+//
+// Orange
+//
+
+$clr-orange-list: (
+ "base": #ff9800,
+ "50": #fff3e0,
+ "100": #ffe0b2,
+ "200": #ffcc80,
+ "300": #ffb74d,
+ "400": #ffa726,
+ "500": #ff9800,
+ "600": #fb8c00,
+ "700": #f57c00,
+ "800": #ef6c00,
+ "900": #e65100,
+ "a100": #ffd180,
+ "a200": #ffab40,
+ "a400": #ff9100,
+ "a700": #ff6d00
+);
+
+$clr-orange: map-get($clr-orange-list, "base");
+
+$clr-orange-50: map-get($clr-orange-list, "50");
+$clr-orange-100: map-get($clr-orange-list, "100");
+$clr-orange-200: map-get($clr-orange-list, "200");
+$clr-orange-300: map-get($clr-orange-list, "300");
+$clr-orange-400: map-get($clr-orange-list, "400");
+$clr-orange-500: map-get($clr-orange-list, "500");
+$clr-orange-600: map-get($clr-orange-list, "600");
+$clr-orange-700: map-get($clr-orange-list, "700");
+$clr-orange-800: map-get($clr-orange-list, "800");
+$clr-orange-900: map-get($clr-orange-list, "900");
+$clr-orange-a100: map-get($clr-orange-list, "a100");
+$clr-orange-a200: map-get($clr-orange-list, "a200");
+$clr-orange-a400: map-get($clr-orange-list, "a400");
+$clr-orange-a700: map-get($clr-orange-list, "a700");
+
+
+//
+// Deep orange
+//
+
+$clr-deep-orange-list: (
+ "base": #ff5722,
+ "50": #fbe9e7,
+ "100": #ffccbc,
+ "200": #ffab91,
+ "300": #ff8a65,
+ "400": #ff7043,
+ "500": #ff5722,
+ "600": #f4511e,
+ "700": #e64a19,
+ "800": #d84315,
+ "900": #bf360c,
+ "a100": #ff9e80,
+ "a200": #ff6e40,
+ "a400": #ff3d00,
+ "a700": #dd2c00
+);
+
+$clr-deep-orange: map-get($clr-deep-orange-list, "base");
+
+$clr-deep-orange-50: map-get($clr-deep-orange-list, "50");
+$clr-deep-orange-100: map-get($clr-deep-orange-list, "100");
+$clr-deep-orange-200: map-get($clr-deep-orange-list, "200");
+$clr-deep-orange-300: map-get($clr-deep-orange-list, "300");
+$clr-deep-orange-400: map-get($clr-deep-orange-list, "400");
+$clr-deep-orange-500: map-get($clr-deep-orange-list, "500");
+$clr-deep-orange-600: map-get($clr-deep-orange-list, "600");
+$clr-deep-orange-700: map-get($clr-deep-orange-list, "700");
+$clr-deep-orange-800: map-get($clr-deep-orange-list, "800");
+$clr-deep-orange-900: map-get($clr-deep-orange-list, "900");
+$clr-deep-orange-a100: map-get($clr-deep-orange-list, "a100");
+$clr-deep-orange-a200: map-get($clr-deep-orange-list, "a200");
+$clr-deep-orange-a400: map-get($clr-deep-orange-list, "a400");
+$clr-deep-orange-a700: map-get($clr-deep-orange-list, "a700");
+
+
+//
+// Brown
+//
+
+$clr-brown-list: (
+ "base": #795548,
+ "50": #efebe9,
+ "100": #d7ccc8,
+ "200": #bcaaa4,
+ "300": #a1887f,
+ "400": #8d6e63,
+ "500": #795548,
+ "600": #6d4c41,
+ "700": #5d4037,
+ "800": #4e342e,
+ "900": #3e2723,
+);
+
+$clr-brown: map-get($clr-brown-list, "base");
+
+$clr-brown-50: map-get($clr-brown-list, "50");
+$clr-brown-100: map-get($clr-brown-list, "100");
+$clr-brown-200: map-get($clr-brown-list, "200");
+$clr-brown-300: map-get($clr-brown-list, "300");
+$clr-brown-400: map-get($clr-brown-list, "400");
+$clr-brown-500: map-get($clr-brown-list, "500");
+$clr-brown-600: map-get($clr-brown-list, "600");
+$clr-brown-700: map-get($clr-brown-list, "700");
+$clr-brown-800: map-get($clr-brown-list, "800");
+$clr-brown-900: map-get($clr-brown-list, "900");
+
+
+//
+// Grey
+//
+
+$clr-grey-list: (
+ "base": #9e9e9e,
+ "50": #fafafa,
+ "100": #f5f5f5,
+ "200": #eeeeee,
+ "300": #e0e0e0,
+ "400": #bdbdbd,
+ "500": #9e9e9e,
+ "600": #757575,
+ "700": #616161,
+ "800": #424242,
+ "900": #212121,
+);
+
+$clr-grey: map-get($clr-grey-list, "base");
+
+$clr-grey-50: map-get($clr-grey-list, "50");
+$clr-grey-100: map-get($clr-grey-list, "100");
+$clr-grey-200: map-get($clr-grey-list, "200");
+$clr-grey-300: map-get($clr-grey-list, "300");
+$clr-grey-400: map-get($clr-grey-list, "400");
+$clr-grey-500: map-get($clr-grey-list, "500");
+$clr-grey-600: map-get($clr-grey-list, "600");
+$clr-grey-700: map-get($clr-grey-list, "700");
+$clr-grey-800: map-get($clr-grey-list, "800");
+$clr-grey-900: map-get($clr-grey-list, "900");
+
+
+//
+// Blue grey
+//
+
+$clr-blue-grey-list: (
+ "base": #607d8b,
+ "50": #eceff1,
+ "100": #cfd8dc,
+ "200": #b0bec5,
+ "300": #90a4ae,
+ "400": #78909c,
+ "500": #607d8b,
+ "600": #546e7a,
+ "700": #455a64,
+ "800": #37474f,
+ "900": #263238,
+);
+
+$clr-blue-grey: map-get($clr-blue-grey-list, "base");
+
+$clr-blue-grey-50: map-get($clr-blue-grey-list, "50");
+$clr-blue-grey-100: map-get($clr-blue-grey-list, "100");
+$clr-blue-grey-200: map-get($clr-blue-grey-list, "200");
+$clr-blue-grey-300: map-get($clr-blue-grey-list, "300");
+$clr-blue-grey-400: map-get($clr-blue-grey-list, "400");
+$clr-blue-grey-500: map-get($clr-blue-grey-list, "500");
+$clr-blue-grey-600: map-get($clr-blue-grey-list, "600");
+$clr-blue-grey-700: map-get($clr-blue-grey-list, "700");
+$clr-blue-grey-800: map-get($clr-blue-grey-list, "800");
+$clr-blue-grey-900: map-get($clr-blue-grey-list, "900");
+
+
+//
+// Black
+//
+
+$clr-black-list: (
+ "base": #000
+);
+
+$clr-black: map-get($clr-black-list, "base");
+
+
+//
+// White
+//
+
+$clr-white-list: (
+ "base": #fff
+);
+
+$clr-white: map-get($clr-white-list, "base");
+
+
+//
+// List for all Colors for looping
+//
+
+$clr-list-all: (
+ "red": $clr-red-list,
+ "pink": $clr-pink-list,
+ "purple": $clr-purple-list,
+ "deep-purple": $clr-deep-purple-list,
+ "indigo": $clr-indigo-list,
+ "blue": $clr-blue-list,
+ "light-blue": $clr-light-blue-list,
+ "cyan": $clr-cyan-list,
+ "teal": $clr-teal-list,
+ "green": $clr-green-list,
+ "light-green": $clr-light-green-list,
+ "lime": $clr-lime-list,
+ "yellow": $clr-yellow-list,
+ "amber": $clr-amber-list,
+ "orange": $clr-orange-list,
+ "deep-orange": $clr-deep-orange-list,
+ "brown": $clr-brown-list,
+ "grey": $clr-grey-list,
+ "blue-grey": $clr-blue-grey-list,
+ "black": $clr-black-list,
+ "white": $clr-white-list
+);
+
+
+//
+// Typography
+//
+
+$clr-ui-display-4: $clr-grey-600;
+$clr-ui-display-3: $clr-grey-600;
+$clr-ui-display-2: $clr-grey-600;
+$clr-ui-display-1: $clr-grey-600;
+$clr-ui-headline: $clr-grey-900;
+$clr-ui-title: $clr-grey-900;
+$clr-ui-subhead-1: $clr-grey-900;
+$clr-ui-body-2: $clr-grey-900;
+$clr-ui-body-1: $clr-grey-900;
+$clr-ui-caption: $clr-grey-600;
+$clr-ui-menu: $clr-grey-900;
+$clr-ui-button: $clr-grey-900;
+
+
+$error-red: $clr-red-500;
+$success-green: $clr-green-500;
+
+$valid-value-color: $clr-green-a400;
+$error-value-color: $clr-red-a400;
+
+$base-shadow-color: #000;
+$base-overlay-background: #000;
+$base-border-color: #fff;
+$simple-background-color: #fff;
+$primary-text-color: #FFF;
+
+$gold-star: $clr-amber-500;
+
+$ui-base-dark-color: $clr-blue-grey-900;
+$ui-base-color: $clr-blue-grey-800;
+$ui-base-light-color: $clr-blue-grey-700;
+$ui-base-lighter-color: $clr-blue-grey-400;
+$ui-base-lightest-color: $clr-blue-grey-300;
+$ui-primary-color: $clr-blue-grey-100;
+$ui-secondary-color: $clr-blue-grey-200;
+$ui-highlight-color: $clr-pink-a200;
+
+$secondary-text-color: $ui-secondary-color;
+$darker-text-color: rgba($primary-text-color, 0.7);
+$dark-text-color: rgba($primary-text-color, 0.5);
+$inverted-text-color: #000 !default;
+$lighter-text-color: rgba($inverted-text-color, 0.7);
+$light-text-color: rgba($inverted-text-color, 0.5);
+
+$primary: $clr-teal-500;
+$accent: $clr-pink-a200;
+
+$ui-avatar-border-size: 0%;
+
+@import 'application';
+.activity-stream .status.light .status__content a.status__content__spoiler-link {
+ color: #000;
+}
+$ui-highlight-color: $clr-light-blue-500;
+@import 'boost';
+//@import 'fullwidth-media';