From 9e868509371888fabc080889d9ea7ac77aa12752 Mon Sep 17 00:00:00 2001 From: Misty De Meo Date: Thu, 29 Jan 2026 23:18:06 -0800 Subject: [PATCH] fairy-floss: further fixing work --- app/javascript/styles/fairy-floss.scss | 1 + .../styles/fairy-floss/css_variables.scss | 24 ++++ app/javascript/styles/fairy-floss/diff.scss | 122 +++++++++++++++++- .../styles/fairy-floss/variables.scss | 1 + 4 files changed, 146 insertions(+), 2 deletions(-) create mode 100644 app/javascript/styles/fairy-floss/css_variables.scss diff --git a/app/javascript/styles/fairy-floss.scss b/app/javascript/styles/fairy-floss.scss index 083c50994..34fc5adca 100644 --- a/app/javascript/styles/fairy-floss.scss +++ b/app/javascript/styles/fairy-floss.scss @@ -1,3 +1,4 @@ +@use 'fairy-floss/css_variables'; @import 'fairy-floss/variables'; @import 'application'; @import 'fairy-floss/diff'; diff --git a/app/javascript/styles/fairy-floss/css_variables.scss b/app/javascript/styles/fairy-floss/css_variables.scss new file mode 100644 index 000000000..b64cd0def --- /dev/null +++ b/app/javascript/styles/fairy-floss/css_variables.scss @@ -0,0 +1,24 @@ +@use 'sass:color'; +@use '../mastodon/variables' as *; +@use 'variables' as *; +@use '../mastodon/functions' as *; + +body { + --dropdown-background-color: #fff; + --modal-border-color: hsl(240deg, 25%, 88%); + --modal-background-color: var(--background-color); + --background-color: #c8c4d4; + --background-color-tint: rgba(255, 255, 255, 80%); + --background-filter: blur(10px); + --surface-variant-background-color: #f1ebfb; + --on-surface-color: #{color.adjust(#2e2b3b, $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(#ada6bf, $alpha: -0.5)}; + --input-background-color: #{darken(#2e2b3b, 10%)}; +} + +body.admin { + --background-color: #2e2b3b; +} diff --git a/app/javascript/styles/fairy-floss/diff.scss b/app/javascript/styles/fairy-floss/diff.scss index 95a4293a5..f52443c03 100644 --- a/app/javascript/styles/fairy-floss/diff.scss +++ b/app/javascript/styles/fairy-floss/diff.scss @@ -16,6 +16,12 @@ .autosuggest-textarea__textarea, .spoiler-input__input { background: $simple-background-color !important; + color: $black !important; +} + +.compose-form__modifiers { + background: $simple-background-color !important; + color: $black !important; } .reply-indicator__content, @@ -68,6 +74,10 @@ } } +.status__relative-time { + color: $purpleicon; +} + .getting-started__footer a { text-decoration: underline; @@ -168,6 +178,14 @@ body.admin { background: lighten($purple4, 8%); } +.compose-form__poll__select__value { + background: lighten($purple4, 8%); +} + +.compose-form__poll__select__label { + color: $black; +} + .text-icon-button.active { color: darken($pink, 12%); } @@ -274,7 +292,7 @@ body.admin { background: $purple2; } -.status { +.status:not(.status--is-quote) { border-bottom: 1px solid lighten($purple2, 8%); } @@ -310,8 +328,32 @@ body.admin { } } +.character-counter { + color: $classic-lighter-text-color; + font-weight: bold; +} + +.dropdown-button { + color: $classic-lighter-text-color !important; + border: 1px solid $classic-lighter-text-color; + + &.active { + color: darken($pink, 8%) !important; + background-color: lighten($purple4, 8%); + } +} + +.icon-button { + color: $purpleicon !important; +} + +.compose-form__footer .icon-button { + color: $classic-lighter-text-color !important; +} + .icon-button.active { - color: $pink; + color: darken($pink, 8%) !important; + background-color: lighten($purple4, 8%) !important; } .notification__favourite-icon-wrapper .star-icon, @@ -346,6 +388,12 @@ a.mention, color: $coral; } +.emoji-mart-search input, +.language-dropdown__dropdown .emoji-mart-search input, +.poll__option input[type='text'] { + background: $white; +} + .emoji-mart-bar:first-child { background: $purple4; } @@ -650,3 +698,73 @@ a.mention, color: $lighter-text-color; font-weight: 900; } + +.privacy-dropdown__option, +.visibility-dropdown__option { + &:focus, + &.active { + background: $coral; + } + + 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: $purple1; + } + + &:hover, + &:active { + background: $coral; + 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($classic-lighter-text-color, 10%); +} + +.visibility-dropdown > label { + color: darken($classic-lighter-text-color, 10%); +} + +.visibility-dropdown__button { + color: darken($classic-lighter-text-color, 10%); + background-color: $white; +} + +.language-dropdown__dropdown__results__item { + color: $classic-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: $coral; +} diff --git a/app/javascript/styles/fairy-floss/variables.scss b/app/javascript/styles/fairy-floss/variables.scss index 801c14f71..36dd88662 100644 --- a/app/javascript/styles/fairy-floss/variables.scss +++ b/app/javascript/styles/fairy-floss/variables.scss @@ -27,6 +27,7 @@ $classic-base-color: $purple1; // Midnight Express $classic-primary-color: $purple4; // Echo Blue $classic-secondary-color: #d9e1e8; // Pattens Blue $classic-highlight-color: #ff857f; // Summer Sky +$classic-lighter-text-color: #6a6388; // Variables for defaults in UI $base-shadow-color: $black !default;