From 534da5edab65eb8f8902c44ff2564f512e746c61 Mon Sep 17 00:00:00 2001 From: Misty De Meo Date: Fri, 30 Jan 2026 23:40:45 -0800 Subject: [PATCH] macaron: initial fixing work --- app/javascript/styles/macaron.scss | 1 + .../styles/macaron/css_variables.scss | 22 +++ app/javascript/styles/macaron/diff.scss | 147 +++++++++++++++++- 3 files changed, 166 insertions(+), 4 deletions(-) create mode 100644 app/javascript/styles/macaron/css_variables.scss diff --git a/app/javascript/styles/macaron.scss b/app/javascript/styles/macaron.scss index 68d41a624..2a4237e29 100644 --- a/app/javascript/styles/macaron.scss +++ b/app/javascript/styles/macaron.scss @@ -1,3 +1,4 @@ @use 'macaron/variables'; +@use 'macaron/css_variables'; @use 'application'; @use 'macaron/diff'; diff --git a/app/javascript/styles/macaron/css_variables.scss b/app/javascript/styles/macaron/css_variables.scss new file mode 100644 index 000000000..09b053728 --- /dev/null +++ b/app/javascript/styles/macaron/css_variables.scss @@ -0,0 +1,22 @@ +@use 'sass:color'; +@use '../mastodon/variables' as *; +@use '../mastodon/functions' as *; + +body { + --dropdown-border-color: hsl(240deg, 25%, 88%); + --dropdown-background-color: #fff; + --modal-border-color: hsl(240deg, 25%, 88%); + --modal-background-color: var(--background-color); + --background-border-color: hsl(240deg, 25%, 88%); + --background-color: #fff; + --background-color-tint: rgba(255, 255, 255, 80%); + --background-filter: blur(10px); + --surface-variant-background-color: #f1ebfb; + --surface-border-color: #cac4d0; + --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)}; + --rich-text-container-color: rgba(255, 216, 231, 100%); + --rich-text-text-color: rgba(114, 47, 83, 100%); + --rich-text-decorations-color: rgba(255, 175, 212, 100%); + --input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)}; + --input-background-color: #{darken($ui-base-color, 10%)}; +} diff --git a/app/javascript/styles/macaron/diff.scss b/app/javascript/styles/macaron/diff.scss index 25c4c00c4..f2839cdc1 100644 --- a/app/javascript/styles/macaron/diff.scss +++ b/app/javascript/styles/macaron/diff.scss @@ -12,6 +12,17 @@ html { background-color: $green; } +.autosuggest-textarea__textarea, +.spoiler-input__input { + background: $white !important; + color: $black !important; +} + +.compose-form__modifiers { + background: $white !important; + color: $black !important; +} + .status__content a, .reply-indicator__content a { &:hover, @@ -67,6 +78,23 @@ html { border: 1px solid lighten($green, 8%); } +.status__relative-time { + color: $dark-text-color; +} + +.compose-form .compose-form__highlightable { + background: $ui-base-color; +} + +.compose-form__poll__select__value { + color: $classic-base-color; + background: darken($ui-base-color, 6%); +} + +.compose-form__poll__select__label { + color: $dark-text-color; +} + .column-back-button, .column-header { background: #c8c4dd; @@ -126,6 +154,11 @@ html { } } +.column-link, +.column-header { + color: $classic-base-color !important; +} + .getting-started .navigation-bar { border-top: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%); @@ -165,7 +198,7 @@ html { background: rgba($pink, 0.8); } -.status { +.status:not(.status--is-quote) { border-bottom: 1px solid lighten(#eee, 4%); } @@ -218,7 +251,7 @@ html { background: $green; } -.compose-form .compose-form__buttons-wrapper { +.compose-form .compose-form__highlightable { background: $ui-base-color; border: 1px solid lighten($ui-base-color, 8%); border-top: 0; @@ -268,7 +301,7 @@ html { } } - .compose-form__buttons-wrapper { + .compose-form__highlightable { background: darken($ui-base-color, 6%); } @@ -290,6 +323,10 @@ html { border-color: lighten($purple, 8%); } +.poll__option input[type='text'] { + background: $white; +} + .emoji-mart-bar { border-color: lighten($ui-base-color, 4%); @@ -299,7 +336,7 @@ html { } .emoji-mart-search input { - background: rgba($ui-base-color, 0.3); + background: rgba($ui-base-color, 0.3) !important; border-color: $ui-base-color; } @@ -340,6 +377,10 @@ html { } } +.navigation-panel__menu { + background: $cream; +} + // Change the background colors of media and video spoilers .media-spoiler, .video-player__spoiler { @@ -395,6 +436,29 @@ body.admin { background: $cream; } +.character-counter { + color: $classic-base-color; + font-weight: bold; +} + +.dropdown-button { + color: $classic-base-color !important; + border: 1px solid $classic-base-color; + + &.active { + color: $white !important; + background-color: $blueberry; + } +} + +.icon-button { + color: $darker-text-color !important; +} + +.compose-form__footer .icon-button { + color: $lighter-text-color !important; +} + .card > a:hover { .card__bar { background: $blue; @@ -806,6 +870,11 @@ body.admin { } } +.status__display-name .display-name strong, +.account__display-name .display-name strong { + color: $primary-text-color; +} + .accounts-grid { .account-grid-card { .controls { @@ -1169,6 +1238,76 @@ a.status-card.compact:hover { } } +.privacy-dropdown__option, +.visibility-dropdown__option { + &:focus, + &.active { + background: $blueberry; + } + + background: $white; + color: $black; + + .privacy-dropdown__option__content, + .privacy-dropdown__option__content strong, + .privacy-dropdown__option__additional, + .visibility-dropdown__option__content, + .visibility-dropdown__option__content strong, + .visibility-dropdown__option__additional { + color: $black; + } + + &:hover, + &:active { + background: $blueberry; + color: var(--dropdown-text-color); + + .privacy-dropdown__option__content, + .privacy-dropdown__option__content strong, + .privacy-dropdown__option__additional, + .visibility-dropdown__option__content, + .visibility-dropdown__option__content strong, + .visibility-dropdown__option__additional { + color: var(--dropdown-text-color); + } + } + + // Make sure adjacent hover/active states don't have a meeting radius. + &:hover + &:is(:focus, .active), + &:is(:focus, .active) + &:hover, + &:is(:focus, .active) + &:is(:focus, .active) { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} + +.dialog-modal__header, +.dialog-modal__content__description { + color: darken($lighter-text-color, 10%); +} + +.visibility-dropdown > label { + color: darken($lighter-text-color, 10%); +} + +.visibility-dropdown__button { + color: darken($lighter-text-color, 10%); + background-color: $white; +} + +.language-dropdown__dropdown__results__item { + color: $lighter-text-color; +} + +.language-dropdown__dropdown__results__item:focus, +.language-dropdown__dropdown__results__item.active, +.language-dropdown__dropdown__results__item:focus + .language-dropdown__dropdown__results__item__common-name, +.language-dropdown__dropdown__results__item.active + .language-dropdown__dropdown__results__item__common-name { + background-color: $blueberry; +} + // Tablet layout @media screen and (max-width: mastodon.$no-gap-breakpoint - 1px) { .tabs-bar__wrapper {