diff --git a/app/javascript/styles/boost.scss b/app/javascript/styles/boost.scss
new file mode 100644
index 000000000..67f9a85d7
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/coffee-dark.scss b/app/javascript/styles/coffee-dark.scss
new file mode 100644
index 000000000..6d613982f
--- /dev/null
+++ b/app/javascript/styles/coffee-dark.scss
@@ -0,0 +1,11 @@
+@import 'coffee-dark/variables';
+@import 'application';
+@import 'coffee-dark/diff';
+//@import 'boost';
+//@import 'mods/display_browserfont';
+@import 'mods/display_breakname';
+@import 'mods/display_fullname';
+@import 'mods/display_emojizoom';
+//@import 'mods/display_circleavatar';
+@import 'mods/layout_1600px';
+@import 'mods/layout_widercolumns';
diff --git a/app/javascript/styles/coffee-dark/diff.scss b/app/javascript/styles/coffee-dark/diff.scss
new file mode 100644
index 000000000..b612b87f4
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/coffee-dark/variables.scss b/app/javascript/styles/coffee-dark/variables.scss
new file mode 100644
index 000000000..e90d6842a
--- /dev/null
+++ b/app/javascript/styles/coffee-dark/variables.scss
@@ -0,0 +1,65 @@
+// 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
+//$classic-highlight-color: #4285f4; // OE7DRT (new) Blue
+//$classic-highlight-color: #1e57b6; // OE7DRT (new) Blue (darker) (this is a bit too dark)
+//$classic-highlight-color: #3a74d5; // OE7DRT (new) Blue (darker) (use this)
+//$classic-highlight-color: #7612cc; // OE7DRT violet (too dark)
+//$classic-highlight-color: #8737cc; // OE7DRT violet (still a bit too dark)
+//$classic-highlight-color: #9d59d8; // OE7DRT violet (damn white)
+
+//$classic-highlight-color: #4c7899; // OE7DRT /\rch (not bad) bit too high
+//$classic-highlight-color: #00bc8c; // OE7DRT /\rch (greenish like cloudlog)
+
+// 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/app/javascript/styles/coffee-light.scss b/app/javascript/styles/coffee-light.scss
new file mode 100644
index 000000000..118721f73
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/coffee-light/diff.scss b/app/javascript/styles/coffee-light/diff.scss
new file mode 100644
index 000000000..7a846bcc6
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/coffee-light/variables.scss b/app/javascript/styles/coffee-light/variables.scss
new file mode 100644
index 000000000..5faae83b6
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/cute.scss b/app/javascript/styles/cute.scss
new file mode 100644
index 000000000..1a3dfb04e
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/cute/overrides.scss b/app/javascript/styles/cute/overrides.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/javascript/styles/cute/palette.scss b/app/javascript/styles/cute/palette.scss
new file mode 100644
index 000000000..74d2bf093
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/dark-red.scss b/app/javascript/styles/dark-red.scss
new file mode 100644
index 000000000..60c35c04e
--- /dev/null
+++ b/app/javascript/styles/dark-red.scss
@@ -0,0 +1,3 @@
+@import 'dark-red/variables';
+@import 'application';
+@import 'dark-red/diff';
diff --git a/app/javascript/styles/dark-red/diff.scss b/app/javascript/styles/dark-red/diff.scss
new file mode 100644
index 000000000..b612b87f4
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/dark-red/variables.scss b/app/javascript/styles/dark-red/variables.scss
new file mode 100644
index 000000000..d8456fe12
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/droid.scss b/app/javascript/styles/droid.scss
new file mode 100644
index 000000000..846fbd7ef
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/droid/overrides.scss b/app/javascript/styles/droid/overrides.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/javascript/styles/droid/palette.scss b/app/javascript/styles/droid/palette.scss
new file mode 100644
index 000000000..4dffdfddf
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss
new file mode 100644
index 000000000..f6a036d4f
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/light-red.scss b/app/javascript/styles/light-red.scss
new file mode 100644
index 000000000..6969822c1
--- /dev/null
+++ b/app/javascript/styles/light-red.scss
@@ -0,0 +1,3 @@
+@import 'light-red/variables';
+@import 'application';
+@import 'light-red/diff';
diff --git a/app/javascript/styles/light-red/diff.scss b/app/javascript/styles/light-red/diff.scss
new file mode 100644
index 000000000..7a846bcc6
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/light-red/variables.scss b/app/javascript/styles/light-red/variables.scss
new file mode 100644
index 000000000..3bbef4ae0
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/deprecated/display_bettersearch.css b/app/javascript/styles/mods/deprecated/display_bettersearch.css
new file mode 100644
index 000000000..c9bf8850f
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_breakname.css b/app/javascript/styles/mods/display_breakname.css
new file mode 100644
index 000000000..fc3936e23
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_browserfont.css b/app/javascript/styles/mods/display_browserfont.css
new file mode 100644
index 000000000..6389f20b4
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_circleavatar.css b/app/javascript/styles/mods/display_circleavatar.css
new file mode 100644
index 000000000..b7d5d4955
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_collapsedinteractions.css b/app/javascript/styles/mods/display_collapsedinteractions.css
new file mode 100644
index 000000000..7cb1f7c6a
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_emojizoom.css b/app/javascript/styles/mods/display_emojizoom.css
new file mode 100644
index 000000000..32ba536bb
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_fadedinteractions.css b/app/javascript/styles/mods/display_fadedinteractions.css
new file mode 100644
index 000000000..8945d2699
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_fullmedia.css b/app/javascript/styles/mods/display_fullmedia.css
new file mode 100644
index 000000000..04cdbf574
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_fullname.css b/app/javascript/styles/mods/display_fullname.css
new file mode 100644
index 000000000..1f2e541af
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_hidefollowcounts.css b/app/javascript/styles/mods/display_hidefollowcounts.css
new file mode 100644
index 000000000..e9ac9ed56
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_hidereplycounts.css b/app/javascript/styles/mods/display_hidereplycounts.css
new file mode 100644
index 000000000..513251cde
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_starstohearts.css b/app/javascript/styles/mods/display_starstohearts.css
new file mode 100644
index 000000000..53efb5576
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/display_transparentmedia.css b/app/javascript/styles/mods/display_transparentmedia.css
new file mode 100644
index 000000000..afa18a18a
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/layout_1600px.css b/app/javascript/styles/mods/layout_1600px.css
new file mode 100644
index 000000000..f81af0046
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/layout_elefriend.css b/app/javascript/styles/mods/layout_elefriend.css
new file mode 100644
index 000000000..3d79a2cf2
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/layout_gettingstartedheight.css b/app/javascript/styles/mods/layout_gettingstartedheight.css
new file mode 100644
index 000000000..536a70751
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/layout_hidedisabled.css b/app/javascript/styles/mods/layout_hidedisabled.css
new file mode 100644
index 000000000..3196db9b1
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/layout_hidefiltered.css b/app/javascript/styles/mods/layout_hidefiltered.css
new file mode 100644
index 000000000..f701e5f53
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/layout_mobile_bottombar.css b/app/javascript/styles/mods/layout_mobile_bottombar.css
new file mode 100644
index 000000000..e5ddaf4e7
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/layout_singlecolumn.css b/app/javascript/styles/mods/layout_singlecolumn.css
new file mode 100644
index 000000000..88bf19ee4
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/mods/layout_widercolumns.css b/app/javascript/styles/mods/layout_widercolumns.css
new file mode 100644
index 000000000..557297cf6
--- /dev/null
+++ b/app/javascript/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: 580px) {
+ .column, #mastodon-timeline {min-width: 55ch;}
+}
diff --git a/app/javascript/styles/mods/test_colorizedlogo.css b/app/javascript/styles/mods/test_colorizedlogo.css
new file mode 100644
index 000000000..634ae5f0c
--- /dev/null
+++ b/app/javascript/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/app/javascript/styles/oe7drt-blue.scss b/app/javascript/styles/oe7drt-blue.scss
new file mode 100644
index 000000000..efde78635
--- /dev/null
+++ b/app/javascript/styles/oe7drt-blue.scss
@@ -0,0 +1,11 @@
+@import 'oe7drt-blue/variables';
+@import 'application';
+@import 'oe7drt-blue/diff';
+//@import 'boost';
+//@import 'mods/display_browserfont';
+@import 'mods/display_breakname';
+@import 'mods/display_fullname';
+@import 'mods/display_emojizoom';
+//@import 'mods/display_circleavatar';
+@import 'mods/layout_1600px';
+@import 'mods/layout_widercolumns';
diff --git a/app/javascript/styles/oe7drt-blue/diff.scss b/app/javascript/styles/oe7drt-blue/diff.scss
new file mode 100644
index 000000000..b612b87f4
--- /dev/null
+++ b/app/javascript/styles/oe7drt-blue/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/app/javascript/styles/oe7drt-blue/variables.scss b/app/javascript/styles/oe7drt-blue/variables.scss
new file mode 100644
index 000000000..d3f858a74
--- /dev/null
+++ b/app/javascript/styles/oe7drt-blue/variables.scss
@@ -0,0 +1,66 @@
+// 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
+//$classic-highlight-color: #4285f4; // OE7DRT (new) Blue
+//$classic-highlight-color: #1e57b6; // OE7DRT (new) Blue (darker) (this is a bit too dark)
+//$classic-highlight-color: #3a74d5; // OE7DRT (new) Blue (darker) (use this)
+//$classic-highlight-color: #7612cc; // OE7DRT violet (too dark)
+//$classic-highlight-color: #8737cc; // OE7DRT violet (still a bit too dark)
+//$classic-highlight-color: #9d59d8; // OE7DRT violet (damn white)
+
+//$classic-highlight-color: #4c7899; // OE7DRT /\rch (not bad) bit too high
+//$classic-highlight-color: #00bc8c; // OE7DRT /\rch (greenish like cloudlog)
+$classic-highlight-color: #1b83c8; // OE7DRT /\dark (blue like chaos.social)
+
+// 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/app/javascript/styles/oe7drt-greeny.scss b/app/javascript/styles/oe7drt-greeny.scss
new file mode 100644
index 000000000..993c3bbbb
--- /dev/null
+++ b/app/javascript/styles/oe7drt-greeny.scss
@@ -0,0 +1,11 @@
+@import 'oe7drt-greeny/variables';
+@import 'application';
+@import 'oe7drt-greeny/diff';
+//@import 'boost';
+//@import 'mods/display_browserfont';
+@import 'mods/display_breakname';
+@import 'mods/display_fullname';
+@import 'mods/display_emojizoom';
+//@import 'mods/display_circleavatar';
+@import 'mods/layout_1600px';
+@import 'mods/layout_widercolumns';
diff --git a/app/javascript/styles/oe7drt-greeny/diff.scss b/app/javascript/styles/oe7drt-greeny/diff.scss
new file mode 100644
index 000000000..b612b87f4
--- /dev/null
+++ b/app/javascript/styles/oe7drt-greeny/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/app/javascript/styles/oe7drt-greeny/variables.scss b/app/javascript/styles/oe7drt-greeny/variables.scss
new file mode 100644
index 000000000..34db656a8
--- /dev/null
+++ b/app/javascript/styles/oe7drt-greeny/variables.scss
@@ -0,0 +1,66 @@
+// 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
+//$classic-highlight-color: #4285f4; // OE7DRT (new) Blue
+//$classic-highlight-color: #1e57b6; // OE7DRT (new) Blue (darker) (this is a bit too dark)
+//$classic-highlight-color: #3a74d5; // OE7DRT (new) Blue (darker) (use this)
+//$classic-highlight-color: #7612cc; // OE7DRT violet (too dark)
+//$classic-highlight-color: #8737cc; // OE7DRT violet (still a bit too dark)
+//$classic-highlight-color: #9d59d8; // OE7DRT violet (damn white)
+
+//$classic-highlight-color: #4c7899; // OE7DRT /\rch (not bad) bit too high
+$classic-highlight-color: #00bc8c; // OE7DRT /\rch (greenish like cloudlog)
+//$classic-highlight-color: #1b83c8; // OE7DRT /\dark (blue like chaos.social)
+
+// 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/app/javascript/styles/oe7drt.scss b/app/javascript/styles/oe7drt.scss
new file mode 100644
index 000000000..8fbe5534b
--- /dev/null
+++ b/app/javascript/styles/oe7drt.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material/profiles/oe7drt/loader';