From c199387558e0e0ec824b5e66c4a1e22e8b2e135b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 4 Nov 2022 02:32:26 +0100 Subject: [PATCH] [Glitch] Fix colors in light theme Port 20aa8881dc98264e5875fa37fc2dbf18e3f2baac to glitch-soc --- .../glitch/styles/mastodon-light/diff.scss | 753 +++++++++++++----- .../styles/mastodon-light/variables.scss | 19 +- 2 files changed, 585 insertions(+), 187 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index d4ac5584761..f0b8a320b6d 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -1,200 +1,250 @@ // Notes! // Sass color functions, "darken" and "lighten" are automatically replaced. -.glitch.local-settings { - background: $ui-base-color; +html { + scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25); +} - &__navigation { - background: darken($ui-base-color, 8%); +// Change the colors of button texts +.button { + color: $white; + + &.button-alternative-2 { + color: $white; + } +} + +.status-card__actions button, +.status-card__actions a { + color: rgba($white, 0.8); + + &:hover, + &:active, + &:focus { + color: $white; + } +} + +// Change default background colors of columns +.column > .scrollable, +.getting-started, +.column-inline-form, +.error-column, +.regeneration-indicator { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.column > .scrollable.about { + border-top: 1px solid lighten($ui-base-color, 8%); +} + +.about__meta, +.about__section__title, +.interaction-modal { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); +} + +.rules-list li::before { + background: $ui-highlight-color; +} + +.directory__card__img { + background: lighten($ui-base-color, 12%); +} + +.filter-form { + background: $white; + border-bottom: 1px solid lighten($ui-base-color, 8%); +} + +.column-back-button, +.column-header { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; } - &__navigation__item { - background: darken($ui-base-color, 8%); + &--slim-button { + top: -50px; + right: 0; + } +} - &:hover { +.column-header__back-button, +.column-header__button, +.column-header__button.active, +.account__header__bar { + background: $white; +} + +.column-header__button.active { + color: $ui-highlight-color; + + &:hover, + &:active, + &:focus { + color: $ui-highlight-color; + background: $white; + } +} + +.account__header__bar .avatar .account__avatar { + border-color: $white; +} + +.getting-started__footer a { + color: $ui-secondary-color; + text-decoration: underline; +} + +.confirmation-modal__secondary-button, +.confirmation-modal__cancel-button, +.mute-modal__cancel-button, +.block-modal__cancel-button { + color: lighten($ui-base-color, 26%); + + &:hover, + &:focus, + &:active { + color: $primary-text-color; + } +} + +.column-subheading { + background: darken($ui-base-color, 4%); + border-bottom: 1px solid lighten($ui-base-color, 8%); +} + +.getting-started, +.scrollable { + .column-link { + background: $white; + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &:hover, + &:active, + &:focus { background: $ui-base-color; } } } -.notification__dismiss-overlay { - .wrappy { - box-shadow: unset; - } +.getting-started .navigation-bar { + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); - .ckbox { - text-shadow: unset; + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; } } -.status.status-direct { - background: darken($ui-base-color, 8%); - border-bottom-color: darken($ui-base-color, 12%); +.compose-form__autosuggest-wrapper, +.poll__option input[type="text"], +.compose-form .spoiler-input__input, +.compose-form__poll-wrapper select, +.search__input, +.setting-text, +.report-dialog-modal__textarea, +.audio-player { + border: 1px solid lighten($ui-base-color, 8%); +} - &.collapsed> .status__content:after { - background: linear-gradient(rgba(darken($ui-base-color, 8%), 0), rgba(darken($ui-base-color, 8%), 1)); +.report-dialog-modal .dialog-option .poll__input { + color: $white; +} + +.search__input { + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; + border-bottom: 0; } } -.focusable:focus.status.status-direct { - background: darken($ui-base-color, 4%); - - &.collapsed> .status__content:after { - background: linear-gradient(rgba(darken($ui-base-color, 4%), 0), rgba(darken($ui-base-color, 4%), 1)); - } +.list-editor .search .search__input { + border-top: 0; + border-bottom: 0; } -// Change columns' default background colors -.column { - > .scrollable { - background: darken($ui-base-color, 13%); - } +.compose-form__poll-wrapper select { + background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; } -.status.collapsed .status__content:after { - background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1)); +.compose-form__poll-wrapper, +.compose-form__poll-wrapper .poll__footer { + border-top-color: lighten($ui-base-color, 8%); } -.drawer__inner { +.notification__filter-bar { + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.compose-form .compose-form__buttons-wrapper { background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.drawer__header, +.drawer__inner { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); } .drawer__inner__mastodon { - background: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important; - - .mastodon { - filter: contrast(75%) brightness(75%) !important; - } + background: $white url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; } -// Change the default appearance of the content warning button -.status__content { +// Change the colors used in compose-form +.compose-form { + .compose-form__modifiers { + .compose-form__upload__actions .icon-button { + color: lighten($white, 7%); - .status__content__spoiler-link { - - background: lighten($ui-base-color, 30%); - - &:hover { - background: lighten($ui-base-color, 35%); - text-decoration: none; + &:active, + &:focus, + &:hover { + color: $white; + } } - } + .compose-form__upload-description input { + color: lighten($white, 7%); -} - -// Change the background colors of media and video spoilers -.media-spoiler, -.video-player__spoiler, -.account-gallery__item a { - background: $ui-base-color; -} - -// Change the colors used in the dropdown menu -.dropdown-menu { - background: $ui-base-color; -} - -.dropdown-menu__arrow { - - &.left { - border-left-color: $ui-base-color; - } - - &.top { - border-top-color: $ui-base-color; - } - - &.bottom { - border-bottom-color: $ui-base-color; - } - - &.right { - border-right-color: $ui-base-color; - } - -} - -.dropdown-menu__item { - a, - button { - background: $ui-base-color; - color: $ui-secondary-color; - } -} - -// Change the default color of several parts of the compose form -.composer { - - .composer--spoiler input, .compose-form__autosuggest-wrapper textarea { - color: lighten($ui-base-color, 80%); - - &:disabled { background: lighten($simple-background-color, 10%) } - - &::placeholder { - color: lighten($ui-base-color, 70%); + &::placeholder { + color: lighten($white, 7%); + } } } - .composer--options-wrapper { - background: lighten($ui-base-color, 10%); + .compose-form__buttons-wrapper { + background: darken($ui-base-color, 6%); } - .composer--options > hr { - display: none; + .autosuggest-textarea__suggestions { + background: darken($ui-base-color, 6%); } - .composer--options--dropdown--content--item { - color: $ui-primary-color; - - strong { - color: $ui-primary-color; + .autosuggest-textarea__suggestions__item { + &:hover, + &:focus, + &:active, + &.selected { + background: lighten($ui-base-color, 4%); } - - } - -} - -.composer--upload_form--actions .icon-button { - color: lighten($white, 7%); - - &:active, - &:focus, - &:hover { - color: $white; - } -} - -.language-dropdown__dropdown__results__item:hover, -.language-dropdown__dropdown__results__item:focus, -.language-dropdown__dropdown__results__item:active { - background-color: $ui-base-color; -} - -.dropdown-menu__separator, -.dropdown-menu__item.edited-timestamp__history__item, -.dropdown-menu__container__header, -.compare-history-modal .report-modal__target, -.report-dialog-modal .poll__option.dialog-option { - border-bottom-color: lighten($ui-base-color, 12%); -} - -.report-dialog-modal__container { - border-bottom-color: lighten($ui-base-color, 12%); -} - -.status__content, -.reply-indicator__content { - a { - color: $highlight-text-color; } } .emoji-mart-bar { - border-color: darken($ui-base-color, 4%); + border-color: lighten($ui-base-color, 4%); &:first-child { - background: lighten($ui-base-color, 10%); + background: darken($ui-base-color, 6%); } } @@ -203,35 +253,120 @@ border-color: $ui-base-color; } -.autosuggest-textarea__suggestions { - background: lighten($ui-base-color, 10%) +// Change the background colors of statuses +.focusable:focus { + background: $ui-base-color; } -.autosuggest-textarea__suggestions__item { - &:hover, - &:focus, - &:active, - &.selected { - background: darken($ui-base-color, 4%); +.detailed-status, +.detailed-status__action-bar { + background: $white; +} + +// Change the background colors of status__content__spoiler-link +.reply-indicator__content .status__content__spoiler-link, +.status__content .status__content__spoiler-link { + background: $ui-base-color; + + &:hover { + background: lighten($ui-base-color, 4%); } } -.react-toggle-track { - background: $ui-secondary-color; +// Change the background colors of media and video spoilers +.media-spoiler, +.video-player__spoiler { + background: $ui-base-color; } -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background: lighten($ui-secondary-color, 10%); +.privacy-dropdown.active .privacy-dropdown__value.active .icon-button { + color: $white; } -.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background: darken($ui-highlight-color, 10%); +.account-gallery__item a { + background-color: $ui-base-color; +} + +// Change the colors used in the dropdown menu +.dropdown-menu { + background: $white; + + &__arrow { + &.left { + border-left-color: $white; + } + + &.top { + border-top-color: $white; + } + + &.bottom { + border-bottom-color: $white; + } + + &.right { + border-right-color: $white; + } + } + + &__item { + a, + button { + background: $white; + color: $darker-text-color; + } + } +} + +// Change the text colors on inverted background +.privacy-dropdown__option.active, +.privacy-dropdown__option:hover, +.privacy-dropdown__option.active .privacy-dropdown__option__content, +.privacy-dropdown__option.active .privacy-dropdown__option__content strong, +.privacy-dropdown__option:hover .privacy-dropdown__option__content, +.privacy-dropdown__option:hover .privacy-dropdown__option__content strong, +.dropdown-menu__item a:active, +.dropdown-menu__item a:focus, +.dropdown-menu__item a:hover, +.actions-modal ul li:not(:empty) a.active, +.actions-modal ul li:not(:empty) a.active button, +.actions-modal ul li:not(:empty) a:active, +.actions-modal ul li:not(:empty) a:active button, +.actions-modal ul li:not(:empty) a:focus, +.actions-modal ul li:not(:empty) a:focus button, +.actions-modal ul li:not(:empty) a:hover, +.actions-modal ul li:not(:empty) a:hover button, +.language-dropdown__dropdown__results__item.active, +.admin-wrapper .sidebar ul .simple-navigation-active-leaf a, +.simple_form .block-button, +.simple_form .button, +.simple_form button { + color: $white; +} + +.language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name { + color: lighten($ui-base-color, 8%); +} + +.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { + color: darken($ui-base-color, 12%); +} + +.dropdown-menu__separator, +.dropdown-menu__item.edited-timestamp__history__item, +.dropdown-menu__container__header, +.compare-history-modal .report-modal__target, +.report-dialog-modal .poll__option.dialog-option { + border-bottom-color: lighten($ui-base-color, 4%); +} + +.report-dialog-modal__container { + border-top-color: lighten($ui-base-color, 4%); } // Change the background colors of modals .actions-modal, .boost-modal, -.favourite-modal, .confirmation-modal, .mute-modal, .block-modal, @@ -243,12 +378,43 @@ .compare-history-modal, .report-modal__comment .setting-text__wrapper, .report-modal__comment .setting-text, -.report-dialog-modal__textarea { - background: $white; +.announcements, +.picture-in-picture__header, +.picture-in-picture__footer, +.reactions-bar__item { + background: $ui-base-color; border: 1px solid lighten($ui-base-color, 8%); } -.report-dialog-modal .dialog-option .poll__input { +.reactions-bar__item:hover, +.reactions-bar__item:focus, +.reactions-bar__item:active, +.language-dropdown__dropdown__results__item:hover, +.language-dropdown__dropdown__results__item:focus, +.language-dropdown__dropdown__results__item:active { + background-color: $ui-base-color; +} + +.reactions-bar__item.active { + background-color: mix($white, $ui-highlight-color, 80%); + border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%); +} + +.media-modal__overlay .picture-in-picture__footer { + border: 0; +} + +.picture-in-picture__header { + border-bottom: 0; +} + +.announcements, +.picture-in-picture__footer { + border-top: 0; +} + +.icon-with-badge__badge { + border-color: $white; color: $white; } @@ -260,8 +426,43 @@ border-top-color: lighten($ui-base-color, 8%); } +.column-header__collapsible-inner { + background: darken($ui-base-color, 4%); + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.dashboard__quick-access, +.focal-point__preview strong, +.admin-wrapper .content__heading__tabs a.selected { + color: $white; +} + +.button.button-tertiary { + &:hover, + &:focus, + &:active { + color: $white; + } +} + +.button.button-secondary { + border-color: $darker-text-color; + color: $darker-text-color; + + &:hover, + &:focus, + &:active { + border-color: darken($darker-text-color, 8%); + color: darken($darker-text-color, 8%); + } +} + +.flash-message.warning { + color: lighten($gold-star, 16%); +} + .boost-modal__action-bar, -.favourite-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .block-modal__action-bar, @@ -279,33 +480,134 @@ } } +.display-case__case { + background: $white; +} + +.embed-modal .embed-modal__container .embed-modal__html { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + &:focus { + border-color: lighten($ui-base-color, 12%); + background: $white; + } +} + +.react-toggle-track { + background: $ui-secondary-color; +} + +.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { + background: darken($ui-secondary-color, 10%); +} + +.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { + background: lighten($ui-highlight-color, 10%); +} + // Change the default color used for the text in an empty column or on the error column .empty-column-indicator, .error-column { - color: lighten($ui-base-color, 60%); + color: $primary-text-color; + background: $white; } // Change the default colors used on some parts of the profile pages .activity-stream-tabs { - background: $account-background-color; + border-bottom-color: lighten($ui-base-color, 8%); +} - a { - &.active { - color: $ui-primary-color; - } +.nothing-here, +.page-header, +.directory__tag > a, +.directory__tag > div { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + @media screen and (max-width: $no-gap-breakpoint) { + border-left: 0; + border-right: 0; + border-top: 0; + } +} + +.simple_form { + input[type="text"], + input[type="number"], + input[type="email"], + input[type="password"], + textarea { + &:hover { + border-color: lighten($ui-base-color, 12%); + } + } +} + +.picture-in-picture-placeholder { + background: $white; + border-color: lighten($ui-base-color, 8%); + color: lighten($ui-base-color, 8%); +} + +.directory__tag > a { + &:hover, + &:active, + &:focus { + background: $ui-base-color; } + @media screen and (max-width: $no-gap-breakpoint) { + border: 0; + } +} + +.directory__tag.active > a, +.directory__tag.active > div { + border-color: $ui-highlight-color; + + &, + h4, + h4 small, + .fa, + .trends__item__current { + color: $white; + } + + &:hover, + &:active, + &:focus { + background: $ui-highlight-color; + } +} + +.batch-table { + &__toolbar, + &__row, + .nothing-here { + border-color: lighten($ui-base-color, 8%); + } } .activity-stream { + border: 1px solid lighten($ui-base-color, 8%); + + &--under-tabs { + border-top: 0; + } .entry { background: $account-background-color; + + .detailed-status.light, + .more.light, + .status.light { + border-bottom-color: lighten($ui-base-color, 8%); + } } .status.light { - .status__content { color: $primary-text-color; } @@ -315,17 +617,14 @@ color: $primary-text-color; } } - } - } .accounts-grid { .account-grid-card { - .controls { .icon-button { - color: $ui-secondary-color; + color: $darker-text-color; } } @@ -336,13 +635,53 @@ } .username { - color: $ui-secondary-color; + color: $darker-text-color; } .account__header__content { color: $primary-text-color; } + } +} +.simple_form { + .warning { + box-shadow: none; + background: rgba($error-red, 0.5); + text-shadow: none; + } + + .recommended { + border-color: $ui-highlight-color; + color: $ui-highlight-color; + background-color: rgba($ui-highlight-color, 0.1); + } +} + +.compose-form .compose-form__warning { + border-color: $ui-highlight-color; + background-color: rgba($ui-highlight-color, 0.1); + + &, + a { + color: $ui-highlight-color; + } +} + +.reply-indicator { + background: transparent; + border: 1px solid lighten($ui-base-color, 8%); +} + +.dismissable-banner { + border-left: 1px solid lighten($ui-base-color, 8%); + border-right: 1px solid lighten($ui-base-color, 8%); +} + +.status__content, +.reply-indicator__content { + a { + color: $highlight-text-color; } } @@ -354,6 +693,7 @@ } } +.notification__filter-bar button.active::after, .account__section-headline a.active::after { border-color: transparent transparent $white; } @@ -364,7 +704,10 @@ .activity-stream, .nothing-here, .directory__tag > a, -.directory__tag > div { +.directory__tag > div, +.card > a, +.page-header, +.compose-form .compose-form__warning { box-shadow: none; } @@ -372,3 +715,55 @@ border: 1px solid lighten($ui-base-color, 8%); background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; } + +// Glitch-soc-specific changes + +.glitch.local-settings { + background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 8%); +} + +.glitch.local-settings__navigation { + background: darken($ui-base-color, 8%); +} + +.glitch.local-settings__navigation__item { + background: darken($ui-base-color, 8%); + border-bottom: 1px lighten($ui-base-color, 8%) solid; + + &:hover { + background: $ui-base-color; + } + + &.active { + background: $ui-highlight-color; + color: $white; + } + + &.close, &.close:hover { + background: $error-value-color; + color: $primary-text-color; + } +} + +.notification__dismiss-overlay { + .wrappy { + box-shadow: unset; + + .ckbox { + text-shadow: unset; + } + } +} + +.status.collapsed .status__content:after { + background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1)); +} + +.drawer__inner__mastodon { + background: $white url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important; + + .mastodon { + filter: contrast(75%) brightness(75%) !important; + } +} diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss index f1c8a3503a8..cae065878c5 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss @@ -7,11 +7,17 @@ $classic-primary-color: #9baec8; $classic-secondary-color: #d9e1e8; $classic-highlight-color: #6364ff; +// Differences +$success-green: lighten(#3c754d, 8%); + +$base-overlay-background: $white !default; +$valid-value-color: $success-green !default; + $ui-base-color: $classic-secondary-color !default; -$ui-base-lighter-color: darken($ui-base-color, 57%); -$ui-highlight-color: $classic-highlight-color !default; -$ui-primary-color: $classic-primary-color !default; +$ui-base-lighter-color: #b0c0cf; +$ui-primary-color: #9bcbed; $ui-secondary-color: $classic-base-color !default; +$ui-highlight-color: $classic-highlight-color !default; $primary-text-color: $black !default; $darker-text-color: $classic-base-color !default; @@ -19,17 +25,14 @@ $highlight-text-color: darken($ui-highlight-color, 8%) !default; $dark-text-color: #444b5d; $action-button-color: #606984; -$success-green: lighten(#3c754d, 8%); - -$base-overlay-background: $white !default; - $inverted-text-color: $black !default; $lighter-text-color: $classic-base-color !default; $light-text-color: #444b5d; +// Newly added colors $account-background-color: $white !default; -//Invert darkened and lightened colors +// Invert darkened and lightened colors @function darken($color, $amount) { @return hsl(hue($color), saturation($color), lightness($color) + $amount); }