diff --git a/app/javascript/flavours/glitch/styles/homogay.scss b/app/javascript/flavours/glitch/styles/homogay.scss index 481c6492ee..9b89db990c 100644 --- a/app/javascript/flavours/glitch/styles/homogay.scss +++ b/app/javascript/flavours/glitch/styles/homogay.scss @@ -1,4 +1,4 @@ @import 'homogay/variables'; @import 'index'; @import 'homogay/diff'; - +@import 'homogay/animations'; diff --git a/app/javascript/flavours/glitch/styles/homogay/diff.scss b/app/javascript/flavours/glitch/styles/homogay/diff.scss index 667cf6ed8e..acafc066ba 100644 --- a/app/javascript/flavours/glitch/styles/homogay/diff.scss +++ b/app/javascript/flavours/glitch/styles/homogay/diff.scss @@ -1,5 +1,5 @@ body { - background: darken($ui-base-color, 5%); + background: $ui-base-darker-color; } // hashtags in primary color @@ -15,44 +15,134 @@ body { .spoiler-input input, .compose-form__modifiers, .reply-indicator { - background: lighten($ui-base-color, 4%); + background: $ui-base-semi-lighter-color; color: $primary-text-color; } -.compose-form .autosuggest-textarea label .autosuggest-textarea__textarea { - border-top-left-radius: $border-radius; - border-top-right-radius: $border-radius; + +.compose-panel { + .compose-form__autosuggest-wrapper { + background-color: #fff0; // transparent background so it doesn't mess with border-radius + border-left: 1px solid $ui-base-lighter-color; + border-top: 1px solid $ui-base-lighter-color; + border-right: 1px solid $ui-base-lighter-color; + border-radius: $border-radius $border-radius 0 0; + } + + .compose-form__buttons-wrapper { + border-left: 1px solid $ui-base-lighter-color; + border-right: 1px solid $ui-base-lighter-color; + border-bottom: 1px solid $ui-base-lighter-color; + border-radius: 0 0 $border-radius $border-radius; + } + + .compose-form__poll-wrapper .icon-button { + color: $lighter-text-color; + + &.disabled { + color: transparent; + } + } } -.compose-form__buttons-wrapper { - border-bottom-left-radius: $border-radius; - border-bottom-right-radius: $border-radius; + +.compose-form__poll-wrapper { + .button.button-secondary { + // this is the "add poll option" button. its styles have been overridden + // to kinda make it look like a tertiary one, except whoever did this seems + // to have forgotten a bunch of stuff. do some damage control. + color: $ui-button-tertiary-color; + border-color: $ui-button-tertiary-border-color; + + &:active, + &:focus, + &:hover { + color: $ui-button-tertiary-focus-color; + background-color: $ui-button-tertiary-focus-background-color; + } + } + + select { + background: url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; + } } -.compose-panel .compose-form__autosuggest-wrapper { - background-color: #fff0; // transparent background so it doesn't mess with border-radius + +.poll__option input[type='text']::placeholder { + color: $darker-text-color; } -.poll__option input[type="text"], + +.poll__option input[type='text'], .compose-form__poll-wrapper select { - border-color: $ui-base-lighter-color; + border: 1px solid $ui-base-extra-light-color; } + .autosuggest-textarea__suggestions { background: lighten($ui-base-color, 4%); } + .autosuggest-textarea__suggestions__item.selected, .autosuggest-textarea__suggestions__item:hover { background: $ui-highlight-color; } +.compose-form__publish .compose-form__publish-button-wrapper button { + box-shadow: rgba(0, 0, 0, 50%) 0 -2px 10px 2px inset, + rgba(0, 0, 0, 40%) 0 0 4px 0 inset; + padding: 7px 18px; + transition-duration: 50ms; + transition-timing-function: ease-in-out; + transition-property: background-color, color, transform; + transform-origin: center; + + &:active { + transform: scale(96%); + } + + &[disabled]:active { + transform: none; + } +} + +.emoji-picker-dropdown__menu { + width: 286px; + box-shadow: 0 2px 8px 0 $base-shadow-color; +} + +.emoji-mart-anchor { + padding: 12px 0; +} + .emoji-mart-bar:first-child { - background: lighten($ui-base-color, 7%); + background: $ui-base-extra-light-color; border-bottom-color: #fff0; border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; } + .emoji-mart-anchor:not(.emoji-mart-anchor-selected) { - color: $ui-base-lighter-color; + color: $ui-button-tertiary-color; } .search__input { - background: lighten($ui-base-color, 4%); + background: $ui-base-semi-lighter-color; + border: 1px solid $ui-base-lighter-color; + + &::placeholder { + color: $dark-text-color; + } +} + +.emoji-button img { + mix-blend-mode: luminosity; + opacity: 0.65; +} + +.emoji-button:active, +.emoji-button:focus, +.emoji-button:hover { + img { + opacity: 1; + mix-blend-mode: normal; + } } // dropdowns @@ -61,38 +151,54 @@ body { .dropdown-menu__item button { background: $ui-base-lighter-color; } + .dropdown-menu__arrow.top { border-top-color: $ui-base-lighter-color; } + .dropdown-menu__arrow.bottom { border-bottom-color: $ui-base-lighter-color; } +.language-dropdown__dropdown__results__item { + &:focus, + &:active, + &:hover { + background: $ui-base-extra-light-color; + } +} + // general modals .modal-root__modal { background: $ui-base-color; } + .report-modal__container { border-top-color: $ui-base-lighter-color; } + .report-modal__comment { border-right-color: $ui-base-lighter-color; } + .report-modal__comment .setting-text { background: $ui-base-color; } + .boost-modal__action-bar, .doodle-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .block-modal__action-bar { - background: lighten($ui-base-color, 5%); + background: $ui-base-semi-lighter-color; } + .confirmation-modal__secondary-button, .confirmation-modal__cancel-button, .mute-modal__cancel-button, .block-modal__cancel-button { color: $primary-text-color; + &:hover { color: $ui-highlight-color; } @@ -102,12 +208,23 @@ body { .glitch.local-settings { background: $ui-base-color; } + .glitch.local-settings__navigation, .glitch.local-settings__navigation__item { - background: lighten($ui-base-color, 4%); + background: $ui-base-semi-lighter-color; } + .glitch.local-settings__navigation__item { - border-bottom-color: $ui-base-lighter-color; + border-bottom-color: $ui-base-extra-light-color; + + &.active, + &.active:hover { + background: $ui-highlight-color; + } + + &:hover { + background: $ui-base-extra-light-color; + } } // border radius @@ -119,7 +236,7 @@ body { .status-card, .language-dropdown__dropdown, .privacy-dropdown__dropdown, -.poll__option input[type="text"], +.poll__option input[type='text'], .compose-form__poll-wrapper select, .account__header__tabs__buttons .icon-button, .emoji-picker-dropdown__menu, @@ -133,29 +250,65 @@ body { .compare-history-modal { border-radius: $border-radius; } + .dropdown-menu { padding-top: $border-radius; padding-bottom: $border-radius; } + .emoji-mart-scroll { margin-bottom: $border-radius; padding-bottom: 0; } + .column-header { border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; + border-left: 1px solid $ui-base-lighter-color; + border-top: 1px solid $ui-base-lighter-color; + border-right: 1px solid $ui-base-lighter-color; } + +.column-header, +.column-header__button, +.search__input { + background: $ui-base-semi-lighter-color; +} + .column > .scrollable { border-bottom-left-radius: $border-radius; border-bottom-right-radius: $border-radius; } +// button fixes +.button.button-tertiary { + &:active, + &:focus, + &:hover { + padding: 6.5px 18px 7.5px; + } +} + +.column-link--transparent.active { + border-left: 4px solid $highlight-text-color; + padding-left: 11px; +} + // timed line .status { border-bottom: 0; // no separators between posts } + +.columns-area { + border-left: 1px solid $ui-base-lighter-color; + border-right: 1px solid $ui-base-lighter-color; + width: calc(100% - 2px); +} + .media-gallery__item.letterbox { background: none; // remove the black background from letterbox images } -@import 'animations'; +.tabs-bar__wrapper { + background: $ui-base-darker-color; // this hides posts scrolling above the column header +} diff --git a/app/javascript/flavours/glitch/styles/homogay/variables.scss b/app/javascript/flavours/glitch/styles/homogay/variables.scss index 33ef22836d..7494cc0a49 100644 --- a/app/javascript/flavours/glitch/styles/homogay/variables.scss +++ b/app/javascript/flavours/glitch/styles/homogay/variables.scss @@ -3,9 +3,9 @@ $black: #000000; $white: #ffffff; $red-600: #b7253d !default; // Deep Carmine $red-500: #df405a !default; // Cerise -$blurple-600: #de18a3; -$blurple-500: lighten($blurple-600, 7%); -$blurple-300: lighten($blurple-600, 21%); +$blurple-600: #a71494; +$blurple-500: #d61ebe; +$blurple-300: #ef6ede; $grey-600: #4e4c5a; // Trout $grey-100: #dadaf3; // Topaz @@ -17,37 +17,40 @@ $gold-star: #e4ba3d !default; $red-bookmark: $success-green !default; // Values from the classic Mastodon UI -$classic-base-color: #150f21; +$classic-base-color: #190e25; $classic-primary-color: #d4b6cb; -$classic-secondary-color: #eaddf4; -$classic-highlight-color: #de18a3; +$classic-secondary-color: #ffe8fc; +$classic-highlight-color: $blurple-600; // Variables for defaults in UI $base-shadow-color: $black !default; $base-overlay-background: $black !default; $base-border-color: $white !default; -$simple-background-color: lighten($classic-base-color, 7%) !default; $valid-value-color: $success-green !default; $error-value-color: $error-red !default; // Tell UI to use selected colors +$ui-base-darker-color: darken($classic-base-color, 5%) !default; $ui-base-color: $classic-base-color !default; -$ui-base-lighter-color: #5f4a6e !default; +$ui-base-semi-lighter-color: lighten($ui-base-color, 3%) !default; +$ui-base-lighter-color: lighten($ui-base-color, 10%) !default; +$ui-base-extra-light-color: lighten($ui-base-color, 18%) !default; +$simple-background-color: $ui-base-lighter-color !default; $ui-primary-color: $classic-primary-color !default; $ui-secondary-color: $classic-secondary-color !default; $ui-highlight-color: $classic-highlight-color !default; -$ui-button-color: $white; -$ui-button-background-color: $blurple-500; -$ui-button-focus-background-color: $blurple-600; +$ui-button-color: #ffe9fc; +$ui-button-background-color: $blurple-600; +$ui-button-focus-background-color: $blurple-500; -$ui-button-secondary-color: $grey-100 !default; -$ui-button-secondary-border-color: $grey-100 !default; -$ui-button-secondary-focus-background-color: $grey-600 !default; -$ui-button-secondary-focus-color: $white !default; +$ui-button-secondary-color: $blurple-500 !default; +$ui-button-secondary-border-color: $blurple-500 !default; +$ui-button-secondary-focus-background-color: $blurple-600 !default; +$ui-button-secondary-focus-color: $ui-button-color !default; -$ui-button-tertiary-color: $blurple-300 !default; -$ui-button-tertiary-border-color: $blurple-300 !default; -$ui-button-tertiary-focus-background-color: $blurple-600 !default; +$ui-button-tertiary-color: #d0adf6 !default; +$ui-button-tertiary-border-color: #d0adf6 !default; +$ui-button-tertiary-focus-background-color: #674e83 !default; $ui-button-tertiary-focus-color: $white !default; $ui-button-destructive-background-color: $red-500 !default; @@ -55,8 +58,8 @@ $ui-button-destructive-focus-background-color: $red-600 !default; // Variables for texts $primary-text-color: $classic-secondary-color !default; -$darker-text-color: $ui-primary-color !default; -$dark-text-color: $ui-base-lighter-color !default; +$darker-text-color: #907ca6 !default; +$dark-text-color: darken($darker-text-color, 5%) !default; $secondary-text-color: $ui-secondary-color !default; $highlight-text-color: lighten($ui-highlight-color, 8%) !default; $action-button-color: $ui-base-lighter-color !default; @@ -65,7 +68,7 @@ $active-passive-text-color: $success-green !default; // For texts on inverted backgrounds $inverted-text-color: $primary-text-color !default; // we don't do inverted backgrounds -$lighter-text-color: $ui-base-lighter-color !default; +$lighter-text-color: lighten($darker-text-color, 5%) !default; $light-text-color: $ui-primary-color !default; // Variables for components @@ -75,3 +78,8 @@ $media-modal-media-max-width: 100%; $media-modal-media-max-height: 80%; $border-radius: 8px; +$border-glow: 0 0 4px 1px $blurple-300, 0 0 4px 1px $blurple-300 inset; + +.glowing-border { + box-shadow: $border-glow; +}