commit 7e52095f9e9aed46cc5b78e3b3be46cc7fc43342 Author: Dominic Reich Date: Sat Mar 25 19:36:33 2023 +0000 initial commit diff --git a/google-fonts-policy.patch b/google-fonts-policy.patch new file mode 100644 index 0000000..12b35f8 --- /dev/null +++ b/google-fonts-policy.patch @@ -0,0 +1,19 @@ +diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb +index cb5629337..bf7b7edb0 100644 +--- a/config/initializers/content_security_policy.rb ++++ b/config/initializers/content_security_policy.rb +@@ -16,11 +16,13 @@ media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST']) + media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true' + media_host ||= assets_host + ++google_fonts_host = "https://fonts.gstatic.com" # Google Fonts ++ + Rails.application.config.content_security_policy do |p| + p.base_uri :none + p.default_src :none + p.frame_ancestors :none +- p.font_src :self, assets_host ++ p.font_src :self, assets_host, google_fonts_host + p.img_src :self, :https, :data, :blob, assets_host + p.style_src :self, assets_host + p.media_src :self, :https, :data, assets_host diff --git a/more-polls.patch b/more-polls.patch new file mode 100644 index 0000000..78ecc62 --- /dev/null +++ b/more-polls.patch @@ -0,0 +1,28 @@ +diff --git a/app/models/account.rb b/app/models/account.rb +index 28bd828b0..d144ef540 100644 +--- a/app/models/account.rb ++++ b/app/models/account.rb +@@ -92,7 +92,7 @@ class Account < ApplicationRecord + validates_with UnreservedUsernameValidator, if: -> { local? && will_save_change_to_username? && actor_type != 'Application' } + validates :display_name, length: { maximum: 30 }, if: -> { local? && will_save_change_to_display_name? } + validates :note, note_length: { maximum: 500 }, if: -> { local? && will_save_change_to_note? } +- validates :fields, length: { maximum: 4 }, if: -> { local? && will_save_change_to_fields? } ++ validates :fields, length: { maximum: 12 }, if: -> { local? && will_save_change_to_fields? } + + scope :remote, -> { where.not(domain: nil) } + scope :local, -> { where(domain: nil) } +diff --git a/app/validators/poll_validator.rb b/app/validators/poll_validator.rb +index a32727796..b5e380cb4 100644 +--- a/app/validators/poll_validator.rb ++++ b/app/validators/poll_validator.rb +@@ -1,8 +1,8 @@ + # frozen_string_literal: true + + class PollValidator < ActiveModel::Validator +- MAX_OPTIONS = 4 +- MAX_OPTION_CHARS = 50 ++ MAX_OPTIONS = 12 ++ MAX_OPTION_CHARS = 180 + MAX_EXPIRATION = 1.month.freeze + MIN_EXPIRATION = 5.minutes.freeze + diff --git a/robotstxt.patch b/robotstxt.patch new file mode 100644 index 0000000..5c01a8f --- /dev/null +++ b/robotstxt.patch @@ -0,0 +1,22 @@ +diff --git a/public/robots.txt b/public/robots.txt +index 771bf2160..e5cbdc31f 100644 +--- a/public/robots.txt ++++ b/public/robots.txt +@@ -3,3 +3,17 @@ + User-agent: * + Disallow: /media_proxy/ + Disallow: /interact/ ++Allow: /about ++Disallow: / ++Disallow: /users/*/followers ++Disallow: /users/*/following ++Disallow: /@*/media ++Disallow: /@*/with_replies ++Disallow: /@*/tagged/* ++Disallow: /media_proxy/* ++Disallow: /emoji/* ++Disallow: /packs/* ++Disallow: /sounds/* ++Disallow: /system/* ++Disallow: /avatars/* ++Disallow: /headers/* diff --git a/status-length.patch b/status-length.patch new file mode 100644 index 0000000..38c3ebf --- /dev/null +++ b/status-length.patch @@ -0,0 +1,35 @@ +diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js +index e641d59f4..7aab42479 100644 +--- a/app/javascript/mastodon/features/compose/components/compose_form.js ++++ b/app/javascript/mastodon/features/compose/components/compose_form.js +@@ -90,7 +90,7 @@ class ComposeForm extends ImmutablePureComponent { + const fulltext = this.getFulltextForCharacterCounting(); + const isOnlyWhitespace = fulltext.length !== 0 && fulltext.trim().length === 0; + +- return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 500 || (isOnlyWhitespace && !anyMedia)); ++ return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 2000 || (isOnlyWhitespace && !anyMedia)); + }; + + handleSubmit = (e) => { +@@ -280,7 +280,7 @@ class ComposeForm extends ImmutablePureComponent { + + +
+- ++ +
+ + +diff --git a/app/validators/status_length_validator.rb b/app/validators/status_length_validator.rb +index e107912b7..5e2641db7 100644 +--- a/app/validators/status_length_validator.rb ++++ b/app/validators/status_length_validator.rb +@@ -1,7 +1,7 @@ + # frozen_string_literal: true + + class StatusLengthValidator < ActiveModel::Validator +- MAX_CHARS = 500 ++ MAX_CHARS = 2000 + URL_PLACEHOLDER_CHARS = 23 + URL_PLACEHOLDER = 'x' * 23 + diff --git a/styles-config.patch b/styles-config.patch new file mode 100644 index 0000000..777f582 --- /dev/null +++ b/styles-config.patch @@ -0,0 +1,16 @@ +diff --git a/config/themes.yml b/config/themes.yml +index 9c21c9459..77a8a5538 100644 +--- a/config/themes.yml ++++ b/config/themes.yml +@@ -1,3 +1,11 @@ + default: styles/application.scss + contrast: styles/contrast.scss + mastodon-light: styles/mastodon-light.scss ++coffee-dark: styles/coffee-dark.scss ++coffee-light: styles/coffee-light.scss ++oe7drt-blue: styles/oe7drt-blue.scss ++oe7drt-greeny: styles/oe7drt-greeny.scss ++dark-red: styles/dark-red.scss ++light-red: styles/light-red.scss ++#cute: styles/cute.scss ++#droid: styles/droid.scss diff --git a/styles.patch b/styles.patch new file mode 100644 index 0000000..24e8d74 --- /dev/null +++ b/styles.patch @@ -0,0 +1,3157 @@ +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';