From 1bf6f683a9f9f6f83a7bcb06382e57c18bc7ab96 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sun, 9 Jul 2023 22:58:35 +0000
Subject: [PATCH] homogay skin redesign

---
 .../flavours/glitch/styles/homogay.scss       |   2 +-
 .../flavours/glitch/styles/homogay/diff.scss  | 193 ++++++++++++++++--
 .../glitch/styles/homogay/variables.scss      |  50 +++--
 3 files changed, 203 insertions(+), 42 deletions(-)

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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($simple-background-color, 14%))}'/></svg>")
+      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;
+}