diff --git a/app/javascript/flavours/glitch/styles/homogay/diff.scss b/app/javascript/flavours/glitch/styles/homogay/diff.scss index f8a24191d2..5eca3c308d 100644 --- a/app/javascript/flavours/glitch/styles/homogay/diff.scss +++ b/app/javascript/flavours/glitch/styles/homogay/diff.scss @@ -2,6 +2,18 @@ body { background: $ui-base-darker-color; } +.button { + text-shadow: 0 0 6px $faint-shadow-color; +} + +.button:disabled { + background-color: $ui-button-disabled-background-color; +} + +.icon-with-badge__badge { + text-shadow: 0 0 2px $base-shadow-color; +} + // hashtags in primary color .status__content a { color: $highlight-text-color; @@ -22,18 +34,18 @@ body { .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-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__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; @@ -61,14 +73,15 @@ body { } select { + // s/o to whoever decided this is the way to colorize SVGs background: url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; } } -.spoiler-input input { - border: 1px solid $ui-base-extra-light-color; -} +// .spoiler-input input { +// border: 1px solid $ui-base-extra-light-color; +// } .poll__option input[type='text']::placeholder { color: $darker-text-color; @@ -125,7 +138,8 @@ body { .search__input { background: $ui-base-semi-lighter-color; - border: 1px solid $ui-base-lighter-color; + + // border: 1px solid $ui-base-lighter-color; &::placeholder { color: $dark-text-color; @@ -133,6 +147,7 @@ body { } .emoji-button img { + // fancier "grayscale" mode for the emoji picker button mix-blend-mode: luminosity; opacity: 0.65; } @@ -265,9 +280,10 @@ body { .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; + + // 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, @@ -296,13 +312,30 @@ body { } // timed line -.status { - border-bottom: 0; // no separators between posts +// .status { +// border-bottom: 0; // no separators between posts +// } + +// .column > .scrollable { +// border-left: 1px solid $ui-base-lighter-color; +// border-right: 1px solid $ui-base-lighter-color; +// } + +.column-header__back-button { + background: none; + color: $highlight-text-color; } -.column > .scrollable { - border-left: 1px solid $ui-base-lighter-color; - border-right: 1px solid $ui-base-lighter-color; +.reactions-bar__item { + background: $ui-base-extra-light-color; + + &.active { + background: adjust-color($ui-button-background-color, $alpha: -0.5); + + .reactions-bar__item__count { + color: $ui-button-color; + } + } } .media-gallery__item.letterbox { @@ -330,3 +363,13 @@ body { background-color: $ui-base-color; } } + +// settings + +.admin-wrapper { + .sidebar ul .simple-navigation-active-leaf a, + .content__heading__tabs a.selected { + background-color: $ui-highlight-color; + text-shadow: 0 0 6px $faint-shadow-color; + } +} diff --git a/app/javascript/flavours/glitch/styles/homogay/variables.scss b/app/javascript/flavours/glitch/styles/homogay/variables.scss index 7494cc0a49..510415015c 100644 --- a/app/javascript/flavours/glitch/styles/homogay/variables.scss +++ b/app/javascript/flavours/glitch/styles/homogay/variables.scss @@ -20,10 +20,11 @@ $red-bookmark: $success-green !default; $classic-base-color: #190e25; $classic-primary-color: #d4b6cb; $classic-secondary-color: #ffe8fc; -$classic-highlight-color: $blurple-600; +$classic-highlight-color: $blurple-500; // Variables for defaults in UI $base-shadow-color: $black !default; +$faint-shadow-color: adjust-color($base-shadow-color, $alpha: -0.6); $base-overlay-background: $black !default; $base-border-color: $white !default; $valid-value-color: $success-green !default; @@ -40,8 +41,9 @@ $ui-primary-color: $classic-primary-color !default; $ui-secondary-color: $classic-secondary-color !default; $ui-highlight-color: $classic-highlight-color !default; $ui-button-color: #ffe9fc; -$ui-button-background-color: $blurple-600; +$ui-button-background-color: $blurple-500; $ui-button-focus-background-color: $blurple-500; +$ui-button-disabled-background-color: #a686a2; $ui-button-secondary-color: $blurple-500 !default; $ui-button-secondary-border-color: $blurple-500 !default; @@ -53,22 +55,22 @@ $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; -$ui-button-destructive-focus-background-color: $red-600 !default; +$ui-button-destructive-background-color: $red-600 !default; +$ui-button-destructive-focus-background-color: $red-500 !default; // Variables for texts $primary-text-color: $classic-secondary-color !default; -$darker-text-color: #907ca6 !default; -$dark-text-color: darken($darker-text-color, 5%) !default; +$darker-text-color: #847198 !default; +$dark-text-color: $darker-text-color !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; +$action-button-color: $dark-text-color !default; $passive-text-color: $gold-star !default; $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: lighten($darker-text-color, 5%) !default; +$lighter-text-color: lighten($darker-text-color, 7%) !default; $light-text-color: $ui-primary-color !default; // Variables for components @@ -78,8 +80,3 @@ $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; -}