diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index d4ac558476..f0b8a320b6 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -1,200 +1,250 @@
// Notes!
// Sass color functions, "darken" and "lighten" are automatically replaced.
-.glitch.local-settings {
- background: $ui-base-color;
+html {
+ scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
+}
- &__navigation {
- background: darken($ui-base-color, 8%);
+// 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;
+}
+
+.column > .scrollable.about {
+ border-top: 1px solid lighten($ui-base-color, 8%);
+}
+
+.about__meta,
+.about__section__title,
+.interaction-modal {
+ background: $white;
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.rules-list li::before {
+ background: $ui-highlight-color;
+}
+
+.directory__card__img {
+ background: lighten($ui-base-color, 12%);
+}
+
+.filter-form {
+ background: $white;
+ border-bottom: 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;
}
- &__navigation__item {
- background: darken($ui-base-color, 8%);
+ &--slim-button {
+ top: -50px;
+ right: 0;
+ }
+}
- &:hover {
+.column-header__back-button,
+.column-header__button,
+.column-header__button.active,
+.account__header__bar {
+ 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;
}
}
}
-.notification__dismiss-overlay {
- .wrappy {
- box-shadow: unset;
- }
+.getting-started .navigation-bar {
+ border-top: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
- .ckbox {
- text-shadow: unset;
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
}
}
-.status.status-direct {
- background: darken($ui-base-color, 8%);
- border-bottom-color: darken($ui-base-color, 12%);
+.compose-form__autosuggest-wrapper,
+.poll__option input[type="text"],
+.compose-form .spoiler-input__input,
+.compose-form__poll-wrapper select,
+.search__input,
+.setting-text,
+.report-dialog-modal__textarea,
+.audio-player {
+ border: 1px solid lighten($ui-base-color, 8%);
+}
- &.collapsed> .status__content:after {
- background: linear-gradient(rgba(darken($ui-base-color, 8%), 0), rgba(darken($ui-base-color, 8%), 1));
+.report-dialog-modal .dialog-option .poll__input {
+ color: $white;
+}
+
+.search__input {
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-top: 0;
+ border-bottom: 0;
}
}
-.focusable:focus.status.status-direct {
- background: darken($ui-base-color, 4%);
-
- &.collapsed> .status__content:after {
- background: linear-gradient(rgba(darken($ui-base-color, 4%), 0), rgba(darken($ui-base-color, 4%), 1));
- }
+.list-editor .search .search__input {
+ border-top: 0;
+ border-bottom: 0;
}
-// Change columns' default background colors
-.column {
- > .scrollable {
- background: darken($ui-base-color, 13%);
- }
+.compose-form__poll-wrapper select {
+ background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px;
}
-.status.collapsed .status__content:after {
- background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1));
+.compose-form__poll-wrapper,
+.compose-form__poll-wrapper .poll__footer {
+ border-top-color: lighten($ui-base-color, 8%);
}
-.drawer__inner {
+.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: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important;
-
- .mastodon {
- filter: contrast(75%) brightness(75%) !important;
- }
+ background: $white url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto;
}
-// Change the default appearance of the content warning button
-.status__content {
+// Change the colors used in compose-form
+.compose-form {
+ .compose-form__modifiers {
+ .compose-form__upload__actions .icon-button {
+ color: lighten($white, 7%);
- .status__content__spoiler-link {
-
- background: lighten($ui-base-color, 30%);
-
- &:hover {
- background: lighten($ui-base-color, 35%);
- text-decoration: none;
+ &:active,
+ &:focus,
+ &:hover {
+ color: $white;
+ }
}
- }
+ .compose-form__upload-description input {
+ color: lighten($white, 7%);
-}
-
-// Change the background colors of media and video spoilers
-.media-spoiler,
-.video-player__spoiler,
-.account-gallery__item a {
- background: $ui-base-color;
-}
-
-// Change the colors used in the dropdown menu
-.dropdown-menu {
- background: $ui-base-color;
-}
-
-.dropdown-menu__arrow {
-
- &.left {
- border-left-color: $ui-base-color;
- }
-
- &.top {
- border-top-color: $ui-base-color;
- }
-
- &.bottom {
- border-bottom-color: $ui-base-color;
- }
-
- &.right {
- border-right-color: $ui-base-color;
- }
-
-}
-
-.dropdown-menu__item {
- a,
- button {
- background: $ui-base-color;
- color: $ui-secondary-color;
- }
-}
-
-// Change the default color of several parts of the compose form
-.composer {
-
- .composer--spoiler input, .compose-form__autosuggest-wrapper textarea {
- color: lighten($ui-base-color, 80%);
-
- &:disabled { background: lighten($simple-background-color, 10%) }
-
- &::placeholder {
- color: lighten($ui-base-color, 70%);
+ &::placeholder {
+ color: lighten($white, 7%);
+ }
}
}
- .composer--options-wrapper {
- background: lighten($ui-base-color, 10%);
+ .compose-form__buttons-wrapper {
+ background: darken($ui-base-color, 6%);
}
- .composer--options > hr {
- display: none;
+ .autosuggest-textarea__suggestions {
+ background: darken($ui-base-color, 6%);
}
- .composer--options--dropdown--content--item {
- color: $ui-primary-color;
-
- strong {
- color: $ui-primary-color;
+ .autosuggest-textarea__suggestions__item {
+ &:hover,
+ &:focus,
+ &:active,
+ &.selected {
+ background: lighten($ui-base-color, 4%);
}
-
- }
-
-}
-
-.composer--upload_form--actions .icon-button {
- color: lighten($white, 7%);
-
- &:active,
- &:focus,
- &:hover {
- color: $white;
- }
-}
-
-.language-dropdown__dropdown__results__item:hover,
-.language-dropdown__dropdown__results__item:focus,
-.language-dropdown__dropdown__results__item:active {
- background-color: $ui-base-color;
-}
-
-.dropdown-menu__separator,
-.dropdown-menu__item.edited-timestamp__history__item,
-.dropdown-menu__container__header,
-.compare-history-modal .report-modal__target,
-.report-dialog-modal .poll__option.dialog-option {
- border-bottom-color: lighten($ui-base-color, 12%);
-}
-
-.report-dialog-modal__container {
- border-bottom-color: lighten($ui-base-color, 12%);
-}
-
-.status__content,
-.reply-indicator__content {
- a {
- color: $highlight-text-color;
}
}
.emoji-mart-bar {
- border-color: darken($ui-base-color, 4%);
+ border-color: lighten($ui-base-color, 4%);
&:first-child {
- background: lighten($ui-base-color, 10%);
+ background: darken($ui-base-color, 6%);
}
}
@@ -203,35 +253,120 @@
border-color: $ui-base-color;
}
-.autosuggest-textarea__suggestions {
- background: lighten($ui-base-color, 10%)
+// Change the background colors of statuses
+.focusable:focus {
+ background: $ui-base-color;
}
-.autosuggest-textarea__suggestions__item {
- &:hover,
- &:focus,
- &:active,
- &.selected {
- background: darken($ui-base-color, 4%);
+.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%);
}
}
-.react-toggle-track {
- background: $ui-secondary-color;
+// Change the background colors of media and video spoilers
+.media-spoiler,
+.video-player__spoiler {
+ background: $ui-base-color;
}
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
- background: lighten($ui-secondary-color, 10%);
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
+ color: $white;
}
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
- background: darken($ui-highlight-color, 10%);
+.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,
+ button {
+ 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,
+.language-dropdown__dropdown__results__item.active,
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
+.simple_form .block-button,
+.simple_form .button,
+.simple_form button {
+ color: $white;
+}
+
+.language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name {
+ color: lighten($ui-base-color, 8%);
+}
+
+.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name {
+ color: darken($ui-base-color, 12%);
+}
+
+.dropdown-menu__separator,
+.dropdown-menu__item.edited-timestamp__history__item,
+.dropdown-menu__container__header,
+.compare-history-modal .report-modal__target,
+.report-dialog-modal .poll__option.dialog-option {
+ border-bottom-color: lighten($ui-base-color, 4%);
+}
+
+.report-dialog-modal__container {
+ border-top-color: lighten($ui-base-color, 4%);
}
// Change the background colors of modals
.actions-modal,
.boost-modal,
-.favourite-modal,
.confirmation-modal,
.mute-modal,
.block-modal,
@@ -243,12 +378,43 @@
.compare-history-modal,
.report-modal__comment .setting-text__wrapper,
.report-modal__comment .setting-text,
-.report-dialog-modal__textarea {
- background: $white;
+.announcements,
+.picture-in-picture__header,
+.picture-in-picture__footer,
+.reactions-bar__item {
+ background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 8%);
}
-.report-dialog-modal .dialog-option .poll__input {
+.reactions-bar__item:hover,
+.reactions-bar__item:focus,
+.reactions-bar__item:active,
+.language-dropdown__dropdown__results__item:hover,
+.language-dropdown__dropdown__results__item:focus,
+.language-dropdown__dropdown__results__item:active {
+ background-color: $ui-base-color;
+}
+
+.reactions-bar__item.active {
+ background-color: mix($white, $ui-highlight-color, 80%);
+ border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
+}
+
+.media-modal__overlay .picture-in-picture__footer {
+ border: 0;
+}
+
+.picture-in-picture__header {
+ border-bottom: 0;
+}
+
+.announcements,
+.picture-in-picture__footer {
+ border-top: 0;
+}
+
+.icon-with-badge__badge {
+ border-color: $white;
color: $white;
}
@@ -260,8 +426,43 @@
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;
+}
+
+.dashboard__quick-access,
+.focal-point__preview strong,
+.admin-wrapper .content__heading__tabs a.selected {
+ color: $white;
+}
+
+.button.button-tertiary {
+ &:hover,
+ &:focus,
+ &:active {
+ color: $white;
+ }
+}
+
+.button.button-secondary {
+ border-color: $darker-text-color;
+ color: $darker-text-color;
+
+ &:hover,
+ &:focus,
+ &:active {
+ border-color: darken($darker-text-color, 8%);
+ color: darken($darker-text-color, 8%);
+ }
+}
+
+.flash-message.warning {
+ color: lighten($gold-star, 16%);
+}
+
.boost-modal__action-bar,
-.favourite-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar,
.block-modal__action-bar,
@@ -279,33 +480,134 @@
}
}
+.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: lighten($ui-base-color, 60%);
+ color: $primary-text-color;
+ background: $white;
}
// 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%);
+}
- a {
- &.active {
- color: $ui-primary-color;
- }
+.nothing-here,
+.page-header,
+.directory__tag > a,
+.directory__tag > div {
+ 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;
+ }
+}
+
+.simple_form {
+ input[type="text"],
+ input[type="number"],
+ input[type="email"],
+ input[type="password"],
+ textarea {
+ &:hover {
+ border-color: lighten($ui-base-color, 12%);
+ }
+ }
+}
+
+.picture-in-picture-placeholder {
+ background: $white;
+ border-color: lighten($ui-base-color, 8%);
+ color: lighten($ui-base-color, 8%);
+}
+
+.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;
}
@@ -315,17 +617,14 @@
color: $primary-text-color;
}
}
-
}
-
}
.accounts-grid {
.account-grid-card {
-
.controls {
.icon-button {
- color: $ui-secondary-color;
+ color: $darker-text-color;
}
}
@@ -336,13 +635,53 @@
}
.username {
- color: $ui-secondary-color;
+ color: $darker-text-color;
}
.account__header__content {
color: $primary-text-color;
}
+ }
+}
+.simple_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;
+ }
+}
+
+.reply-indicator {
+ background: transparent;
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.dismissable-banner {
+ border-left: 1px solid lighten($ui-base-color, 8%);
+ border-right: 1px solid lighten($ui-base-color, 8%);
+}
+
+.status__content,
+.reply-indicator__content {
+ a {
+ color: $highlight-text-color;
}
}
@@ -354,6 +693,7 @@
}
}
+.notification__filter-bar button.active::after,
.account__section-headline a.active::after {
border-color: transparent transparent $white;
}
@@ -364,7 +704,10 @@
.activity-stream,
.nothing-here,
.directory__tag > a,
-.directory__tag > div {
+.directory__tag > div,
+.card > a,
+.page-header,
+.compose-form .compose-form__warning {
box-shadow: none;
}
@@ -372,3 +715,55 @@
border: 1px solid lighten($ui-base-color, 8%);
background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px;
}
+
+// Glitch-soc-specific changes
+
+.glitch.local-settings {
+ background: $ui-base-color;
+ border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.glitch.local-settings__navigation {
+ background: darken($ui-base-color, 8%);
+}
+
+.glitch.local-settings__navigation__item {
+ background: darken($ui-base-color, 8%);
+ border-bottom: 1px lighten($ui-base-color, 8%) solid;
+
+ &:hover {
+ background: $ui-base-color;
+ }
+
+ &.active {
+ background: $ui-highlight-color;
+ color: $white;
+ }
+
+ &.close, &.close:hover {
+ background: $error-value-color;
+ color: $primary-text-color;
+ }
+}
+
+.notification__dismiss-overlay {
+ .wrappy {
+ box-shadow: unset;
+
+ .ckbox {
+ text-shadow: unset;
+ }
+ }
+}
+
+.status.collapsed .status__content:after {
+ background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1));
+}
+
+.drawer__inner__mastodon {
+ background: $white url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important;
+
+ .mastodon {
+ filter: contrast(75%) brightness(75%) !important;
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
index f1c8a3503a..cae065878c 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
@@ -7,11 +7,17 @@ $classic-primary-color: #9baec8;
$classic-secondary-color: #d9e1e8;
$classic-highlight-color: #6364ff;
+// 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: darken($ui-base-color, 57%);
-$ui-highlight-color: $classic-highlight-color !default;
-$ui-primary-color: $classic-primary-color !default;
+$ui-base-lighter-color: #b0c0cf;
+$ui-primary-color: #9bcbed;
$ui-secondary-color: $classic-base-color !default;
+$ui-highlight-color: $classic-highlight-color !default;
$primary-text-color: $black !default;
$darker-text-color: $classic-base-color !default;
@@ -19,17 +25,14 @@ $highlight-text-color: darken($ui-highlight-color, 8%) !default;
$dark-text-color: #444b5d;
$action-button-color: #606984;
-$success-green: lighten(#3c754d, 8%);
-
-$base-overlay-background: $white !default;
-
$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
+// Invert darkened and lightened colors
@function darken($color, $amount) {
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
}