Change glitch-soc composer classes to match upstream

1 files changed, 0 insertions, 712 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
deleted file mode 100644
index da086833c..000000000
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ /dev/null
@@ -1,712 +0,0 @@
-.composer {
-  padding: 10px;
-
-  .emoji-picker-dropdown {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    ::-webkit-scrollbar-track:hover,
-    ::-webkit-scrollbar-track:active {
-      background-color: rgba($base-overlay-background, 0.3);
-    }
-  }
-}
-
-.character-counter {
-  cursor: default;
-  font-family: $font-sans-serif, sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  color: $lighter-text-color;
-
-  &.character-counter--over {
-    color: $warning-red;
-  }
-}
-
-.no-reduce-motion .composer--spoiler {
-  transition: height 0.4s ease, opacity 0.4s ease;
-}
-
-.composer--spoiler {
-  height: 0;
-  transform-origin: bottom;
-  opacity: 0.0;
-
-  &.composer--spoiler--visible {
-    height: 36px;
-    margin-bottom: 11px;
-    opacity: 1.0;
-  }
-
-  input {
-    display: block;
-    box-sizing: border-box;
-    margin: 0;
-    border: 0;
-    border-radius: 4px;
-    padding: 10px;
-    width: 100%;
-    outline: 0;
-    color: $inverted-text-color;
-    background: $simple-background-color;
-    font-size: 14px;
-    font-family: inherit;
-    resize: vertical;
-
-    &::placeholder {
-      color: $dark-text-color;
-    }
-
-    &:focus { outline: 0 }
-    @include single-column('screen and (max-width: 630px)') { font-size: 16px }
-  }
-}
-
-.composer--warning {
-  color: $inverted-text-color;
-  margin-bottom: 15px;
-  background: $ui-primary-color;
-  box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
-  padding: 8px 10px;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 400;
-
-  a {
-    color: $lighter-text-color;
-    font-weight: 500;
-    text-decoration: underline;
-
-    &:active,
-    &:focus,
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
-.compose-form__sensitive-button {
-  padding: 10px;
-  padding-top: 0;
-
-  font-size: 14px;
-  font-weight: 500;
-
-  &.active {
-    color: $highlight-text-color;
-  }
-
-  input[type=checkbox] {
-    display: none;
-  }
-
-  .checkbox {
-    display: inline-block;
-    position: relative;
-    border: 1px solid $ui-primary-color;
-    box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-    flex: 0 0 auto;
-    margin-left: 5px;
-    margin-right: 10px;
-    top: -1px;
-    border-radius: 4px;
-    vertical-align: middle;
-
-    &.active {
-      border-color: $highlight-text-color;
-      background: $highlight-text-color;
-    }
-  }
-}
-
-.composer--reply {
-  margin: 0 0 10px;
-  border-radius: 4px;
-  padding: 10px;
-  background: $ui-primary-color;
-  min-height: 23px;
-  overflow-y: auto;
-  flex: 0 2 auto;
-
-  & > header {
-    margin-bottom: 5px;
-    overflow: hidden;
-
-    & > .account.small { color: $inverted-text-color; }
-
-    & > .cancel {
-      float: right;
-      line-height: 24px;
-    }
-  }
-
-  & > .content {
-    position: relative;
-    margin: 10px 0;
-    padding: 0 12px;
-    font-size: 14px;
-    line-height: 20px;
-    color: $inverted-text-color;
-    word-wrap: break-word;
-    font-weight: 400;
-    overflow: visible;
-    white-space: pre-wrap;
-    padding-top: 5px;
-    overflow: hidden;
-
-    p, pre, blockquote {
-      margin-bottom: 20px;
-      white-space: pre-wrap;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    h1, h2, h3, h4, h5 {
-      margin-top: 20px;
-      margin-bottom: 20px;
-    }
-
-    h1, h2 {
-      font-weight: 700;
-      font-size: 18px;
-    }
-
-    h2 {
-      font-size: 16px;
-    }
-
-    h3, h4, h5 {
-      font-weight: 500;
-    }
-
-    blockquote {
-      padding-left: 10px;
-      border-left: 3px solid $inverted-text-color;
-      color: $inverted-text-color;
-      white-space: normal;
-
-      p:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    b, strong {
-      font-weight: 700;
-    }
-
-    em, i {
-      font-style: italic;
-    }
-
-    sub {
-      font-size: smaller;
-      vertical-align: sub;
-    }
-
-    sup {
-      font-size: smaller;
-      vertical-align: super;
-    }
-
-    ul, ol {
-      margin-left: 1em;
-
-      p {
-        margin: 0;
-      }
-    }
-
-    ul {
-      list-style-type: disc;
-    }
-
-    ol {
-      list-style-type: decimal;
-    }
-
-    a {
-      color: $lighter-text-color;
-      text-decoration: none;
-
-      &:hover { text-decoration: underline }
-
-      &.mention {
-        &:hover {
-          text-decoration: none;
-
-          span { text-decoration: underline }
-        }
-      }
-    }
-  }
-
-  .emojione {
-    width: 20px;
-    height: 20px;
-    margin: -5px 0 0;
-  }
-}
-
-.compose-form__autosuggest-wrapper,
-.autosuggest-input {
-  position: relative;
-  width: 100%;
-
-  label {
-    .autosuggest-textarea__textarea {
-      display: block;
-      box-sizing: border-box;
-      margin: 0;
-      border: 0;
-      border-radius: 4px 4px 0 0;
-      padding: 10px 32px 0 10px;
-      width: 100%;
-      min-height: 100px;
-      outline: 0;
-      color: $inverted-text-color;
-      background: $simple-background-color;
-      font-size: 14px;
-      font-family: inherit;
-      resize: none;
-      scrollbar-color: initial;
-
-      &::placeholder {
-        color: $dark-text-color;
-      }
-
-      &::-webkit-scrollbar {
-        all: unset;
-      }
-
-      &:disabled {
-        background: $ui-secondary-color;
-      }
-
-      &:focus {
-        outline: 0;
-      }
-
-      @include single-column('screen and (max-width: 630px)') {
-        font-size: 16px;
-      }
-
-      @include limited-single-column('screen and (max-width: 600px)') {
-        height: 100px !important; // prevent auto-resize textarea
-        resize: vertical;
-      }
-    }
-  }
-}
-
-.composer--textarea--icons {
-  display: block;
-  position: absolute;
-  top: 29px;
-  right: 5px;
-  bottom: 5px;
-  overflow: hidden;
-
-  & > .textarea_icon {
-    display: block;
-    margin: 2px 0 0 2px;
-    width: 24px;
-    height: 24px;
-    color: $lighter-text-color;
-    font-size: 18px;
-    line-height: 24px;
-    text-align: center;
-    opacity: .8;
-  }
-}
-
-.autosuggest-textarea__suggestions-wrapper {
-  position: relative;
-  height: 0;
-}
-
-.autosuggest-textarea__suggestions {
-  display: block;
-  position: absolute;
-  box-sizing: border-box;
-  top: 100%;
-  border-radius: 0 0 4px 4px;
-  padding: 6px;
-  width: 100%;
-  color: $inverted-text-color;
-  background: $ui-secondary-color;
-  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-  font-size: 14px;
-  z-index: 99;
-  display: none;
-}
-
-.autosuggest-textarea__suggestions--visible {
-  display: block;
-}
-
-.autosuggest-textarea__suggestions__item {
-  padding: 10px;
-  cursor: pointer;
-  border-radius: 4px;
-
-  &:hover,
-  &:focus,
-  &:active,
-  &.selected { background: darken($ui-secondary-color, 10%) }
-
-  > .account,
-  > .emoji,
-  > .autosuggest-hashtag {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    line-height: 18px;
-    font-size: 14px;
-  }
-
-  .autosuggest-hashtag {
-    justify-content: space-between;
-
-    &__name {
-      flex: 1 1 auto;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    strong {
-      font-weight: 500;
-    }
-
-    &__uses {
-      flex: 0 0 auto;
-      text-align: right;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  & > .account.small {
-    .display-name {
-      & > span { color: $lighter-text-color }
-    }
-  }
-}
-
-.composer--upload_form {
-  overflow: hidden;
-
-  & > .content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    font-family: inherit;
-    padding: 5px;
-    overflow: hidden;
-  }
-}
-
-.composer--upload_form--item {
-  flex: 1 1 0;
-  margin: 5px;
-  min-width: 40%;
-
-  & > div {
-    position: relative;
-    border-radius: 4px;
-    height: 140px;
-    width: 100%;
-    background-color: $base-shadow-color;
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    overflow: hidden;
-
-    & > .close { mix-blend-mode: difference }
-  }
-
-  .icon-button {
-    flex: 0 1 auto;
-    color: $secondary-text-color;
-    font-size: 14px;
-    font-weight: 500;
-    padding: 10px;
-    font-family: inherit;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: lighten($secondary-text-color, 7%);
-    }
-  }
-
-  &__warning {
-    position: absolute;
-    z-index: 2;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    box-sizing: border-box;
-    background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-  }
-}
-
-.composer--upload_form--actions {
-  background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.composer--upload_form--progress {
-  display: flex;
-  padding: 10px;
-  color: $darker-text-color;
-  overflow: hidden;
-
-  & > .fa {
-    font-size: 34px;
-    margin-right: 10px;
-  }
-
-  & > .message {
-    flex: 1 1 auto;
-
-    & > span {
-      display: block;
-      font-size: 12px;
-      font-weight: 500;
-      text-transform: uppercase;
-    }
-
-    & > .backdrop {
-      position: relative;
-      margin-top: 5px;
-      border-radius: 6px;
-      width: 100%;
-      height: 6px;
-      background: $ui-base-lighter-color;
-
-      & > .tracker {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 6px;
-        border-radius: 6px;
-        background: $ui-highlight-color;
-      }
-    }
-  }
-}
-
-.compose-form__modifiers {
-  color: $inverted-text-color;
-  font-family: inherit;
-  font-size: 14px;
-  background: $simple-background-color;
-}
-
-.composer--options-wrapper {
-  padding: 10px;
-  background: darken($simple-background-color, 8%);
-  border-radius: 0 0 4px 4px;
-  height: 27px;
-  display: flex;
-  justify-content: space-between;
-  flex: 0 0 auto;
-}
-
-.composer--options {
-  display: flex;
-  flex: 0 0 auto;
-
-  & .icon-button,
-  & .text-icon-button {
-    display: inline-block;
-    box-sizing: content-box;
-    padding: 0 3px;
-    height: 27px;
-    line-height: 27px;
-    vertical-align: bottom;
-  }
-
-  & > hr {
-    display: inline-block;
-    margin: 0 3px;
-    border-width: 0 0 0 1px;
-    border-style: none none none solid;
-    border-color: transparent transparent transparent darken($simple-background-color, 24%);
-    padding: 0;
-    width: 0;
-    height: 27px;
-    background: transparent;
-  }
-}
-
-.compose--counter-wrapper {
-  align-self: center;
-  margin-right: 4px;
-}
-
-.composer--options--dropdown {
-  &.open {
-    & > .value {
-      border-radius: 4px 4px 0 0;
-      box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
-      color: $primary-text-color;
-      background: $ui-highlight-color;
-      transition: none;
-    }
-    &.top {
-      & > .value {
-        border-radius: 0 0 4px 4px;
-        box-shadow: 0 4px 4px rgba($base-shadow-color, 0.1);
-      }
-    }
-  }
-}
-
-.composer--options--dropdown--content {
-  position: absolute;
-  border-radius: 4px;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-  background: $simple-background-color;
-  overflow: hidden;
-  transform-origin: 50% 0;
-}
-
-.composer--options--dropdown--content--item {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  color: $inverted-text-color;
-  cursor: pointer;
-
-  & > .content {
-    flex: 1 1 auto;
-    color: $lighter-text-color;
-
-    &:not(:first-child) { margin-left: 10px }
-
-    strong {
-      display: block;
-      color: $inverted-text-color;
-      font-weight: 500;
-    }
-  }
-
-  &:hover,
-  &.active {
-    background: $ui-highlight-color;
-    color: $primary-text-color;
-
-    & > .content {
-      color: $primary-text-color;
-
-      strong { color: $primary-text-color }
-    }
-  }
-
-  &.active:hover { background: lighten($ui-highlight-color, 4%) }
-}
-
-.composer--publisher {
-  padding-top: 10px;
-  text-align: right;
-  white-space: nowrap;
-  overflow: hidden;
-  justify-content: flex-end;
-  flex: 0 0 auto;
-
-  & > .primary {
-    display: inline-block;
-    margin: 0;
-    padding: 7px 10px;
-    text-align: center;
-  }
-
-  & > .side_arm {
-    display: inline-block;
-    margin: 0 5px;
-    padding: 7px 0;
-    width: 36px;
-    text-align: center;
-  }
-
-  &.over {
-    & > .count { color: $warning-red }
-  }
-}
-
-.language-dropdown {
-  &__dropdown {
-    position: absolute;
-    background: $simple-background-color;
-    box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-    border-radius: 4px;
-    overflow: hidden;
-    z-index: 2;
-
-    &.top {
-      transform-origin: 50% 100%;
-    }
-
-    &.bottom {
-      transform-origin: 50% 0;
-    }
-
-    .emoji-mart-search {
-      padding-right: 10px;
-    }
-
-    .emoji-mart-search-icon {
-      right: 10px + 5px;
-    }
-
-    .emoji-mart-scroll {
-      padding: 0 10px 10px;
-    }
-
-    &__results {
-      &__item {
-        cursor: pointer;
-        color: $inverted-text-color;
-        font-weight: 500;
-        padding: 10px;
-        border-radius: 4px;
-
-        &:focus,
-        &:active,
-        &:hover {
-          background: $ui-secondary-color;
-        }
-
-        &__common-name {
-          color: $darker-text-color;
-        }
-
-        &.active {
-          background: $ui-highlight-color;
-          color: $primary-text-color;
-          outline: 0;
-
-          .language-dropdown__dropdown__results__item__common-name {
-            color: $secondary-text-color;
-          }
-
-          &:hover {
-            background: lighten($ui-highlight-color, 4%);
-          }
-        }
-      }
-    }
-  }
-}