From c9dc797ef215a4a20feb7b24ab159640d42750e6 Mon Sep 17 00:00:00 2001
From: Lumb <lumb@git.multiple-creature.party>
Date: Mon, 12 Aug 2019 10:53:02 +0000
Subject: remove negative margin

this should fix the names being cut off on the notification bar uwu uwu
---
 .../glitch/styles/components/-1status.scss         | 1044 ++++++++++++++++++++
 .../flavours/glitch/styles/components/status.scss  | 1044 --------------------
 2 files changed, 1044 insertions(+), 1044 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/styles/components/-1status.scss
 delete mode 100644 app/javascript/flavours/glitch/styles/components/status.scss

(limited to 'app/javascript')

diff --git a/app/javascript/flavours/glitch/styles/components/-1status.scss b/app/javascript/flavours/glitch/styles/components/-1status.scss
new file mode 100644
index 000000000..ea3427917
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/-1status.scss
@@ -0,0 +1,1044 @@
+.status__content--with-action {
+  cursor: pointer;
+}
+
+.status__content {
+  position: relative;
+  margin: 10px 0;
+  font-size: 15px;
+  line-height: 20px;
+  word-wrap: break-word;
+  font-weight: 400;
+  overflow: visible;
+  padding-top: 5px;
+
+  &:focus {
+    outline: 0;
+  }
+
+  .emojione {
+    width: 20px;
+    height: 20px;
+    margin: -3px 0 0;
+  }
+
+  .hoverplay:hover { padding-left: 20px }
+
+  p, pre, blockquote {
+    margin-bottom: 20px;
+    white-space: pre-wrap;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .status__content__text,
+  .e-content {
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+    h1, h2 {
+      font-weight: 700;
+      font-size: 18px;
+    }
+
+    h2 {
+      font-size: 16px;
+    }
+
+    h3, h4, h5, h6 {
+      font-weight: 500;
+    }
+
+    blockquote {
+      padding-left: 10px;
+      border-left: 3px solid $darker-text-color;
+      color: $darker-text-color;
+      white-space: normal;
+      font-style: italic;
+
+      p:last-child {
+        margin-bottom: 20px;
+      }
+    }
+
+    b, strong {
+      font-weight: 700;
+    }
+
+    em, i {
+      font-style: italic;
+    }
+
+    sub {
+      font-size: smaller;
+      text-align: sub;
+    }
+
+    sup {
+      vertical-align: super;
+      font-size: smaller;
+    }
+
+    ul, ol {
+      margin-left: 1em;
+
+      p {
+        margin: 0;
+      }
+
+      li:last-child {
+        margin-bottom: 20px;
+      }
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    s, del {
+      text-decoration: line-through;
+    }
+
+    hr {
+      border-color: lighten($dark-text-color, 10%);
+    }
+
+    pre, code {
+      color: lighten($dark-text-color, 33%);
+    }
+
+    mark {
+      background-color: #ccff15;
+      color: black;
+    }
+
+    p.signature {
+      color: lighten($dark-text-color, 20%);
+      font-style: italic;
+      font-size: 12px;
+      text-align: right;
+    }
+  }
+
+  a {
+    background-color: lighten($ui-base-color, 7%);
+    color: darken($secondary-text-color, 10%);
+    text-decoration: none;
+    padding: 2px;
+    border-radius: 8px;
+
+    &:hover {
+      text-decoration: underline;
+      color: lighten($dark-text-color, 10%);
+    }
+
+    &.mention {
+      &:hover {
+        text-decoration: none;
+
+        span {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .fa {
+      color: $dark-text-color;
+    }
+  }
+
+  .status__content__spoiler {
+    display: none;
+
+    &.status__content__spoiler--visible {
+      display: block;
+    }
+  }
+
+  .status__content__spoiler-link {
+    background: lighten($ui-base-color, 30%);
+
+    &:hover {
+      background: lighten($ui-base-color, 33%);
+      text-decoration: none;
+    }
+  }
+}
+
+.status__content__spoiler-link {
+  display: inline-block;
+  border-radius: 2px;
+  background: lighten($ui-base-color, 30%);
+  border: none;
+  color: $inverted-text-color;
+  font-weight: 500;
+  font-size: 11px;
+  padding: 0 5px;
+  text-transform: uppercase;
+  line-height: inherit;
+  cursor: pointer;
+  vertical-align: bottom;
+
+  &:hover {
+    background: lighten($ui-base-color, 33%);
+    text-decoration: none;
+  }
+
+  .status__content__spoiler-icon {
+    display: inline-block;
+    margin: 0 0 0 5px;
+    border-left: 1px solid currentColor;
+    padding: 0 0 0 4px;
+    font-size: 16px;
+    vertical-align: -2px;
+  }
+}
+
+.notif-cleaning {
+  .status, .notification-follow {
+    padding-right: ($dismiss-overlay-width + 0.5rem);
+  }
+}
+
+.status__wrapper--filtered {
+  color: $dark-text-color;
+  border: 0;
+  font-size: inherit;
+  text-align: center;
+  line-height: inherit;
+  margin: 0;
+  padding: 15px;
+  box-sizing: border-box;
+  width: 100%;
+  clear: both;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+}
+
+.status__prepend-icon-wrapper {
+  float: left;
+  margin: 0 10px 0 -58px;
+  width: 48px;
+  text-align: right;
+}
+
+.notification-follow {
+  position: relative;
+
+  // same like Status
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+  .account {
+    border-bottom: 0 none;
+  }
+}
+
+.focusable {
+  &:focus {
+    outline: 0;
+    background: lighten($ui-base-color, 4%);
+
+    .status.status-direct {
+      background: lighten($ui-base-color, 12%);
+
+      &.muted {
+        background: transparent;
+      }
+    }
+
+    .detailed-status,
+    .detailed-status__action-bar {
+      background: lighten($ui-base-color, 8%);
+    }
+  }
+}
+
+.status {
+  padding: 10px 14px;
+  position: relative;
+  height: auto;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  cursor: default;
+
+  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
+    // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
+    // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
+    padding-right: 28px; // 12px + 16px
+  }
+
+  @keyframes fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  opacity: 1;
+  animation: fade 150ms linear;
+
+  .video-player {
+    margin-top: 8px;
+  }
+
+  &.status-direct {
+    background: lighten($ui-base-color, 8%);
+  }
+
+  &.light {
+    .status__relative-time {
+      color: $lighter-text-color;
+    }
+
+    .status__display-name {
+      color: $inverted-text-color;
+    }
+
+    .display-name {
+      strong {
+        color: $inverted-text-color;
+      }
+
+      span {
+        color: $lighter-text-color;
+      }
+    }
+
+    .status__content {
+      color: $inverted-text-color;
+
+      a {
+        color: $highlight-text-color;
+      }
+
+      a.status__content__spoiler-link {
+        color: $primary-text-color;
+        background: $ui-primary-color;
+
+        &:hover {
+          background: lighten($ui-primary-color, 8%);
+        }
+      }
+    }
+  }
+
+  &.collapsed {
+    background-position: center;
+    background-size: cover;
+    user-select: none;
+
+    &.has-background::before {
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8));
+      pointer-events: none;
+      content: "";
+    }
+
+    .display-name:hover .display-name__html {
+      text-decoration: none;
+    }
+
+    .status__content {
+      height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-top: 0;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0; bottom: 0;
+        left: 0; right: 0;
+        background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1));
+        pointer-events: none;
+      }
+
+      a:hover {
+        text-decoration: none;
+      }
+    }
+    &:focus > .status__content:after {
+      background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1));
+    }
+    &.status-direct> .status__content:after {
+      background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1));
+    }
+
+    .notification__message {
+      margin-bottom: 0;
+    }
+
+    .status__info .notification__message > span {
+      white-space: nowrap;
+    }
+  }
+
+  .notification__message {
+    margin: 10px 0px 10px 0;
+  }
+}
+
+.notification-favourite {
+  .status.status-direct {
+    background: transparent;
+
+    .icon-button.disabled {
+      color: lighten($action-button-color, 13%);
+    }
+  }
+}
+
+.status__relative-time {
+  display: inline-block;
+  margin-left: auto;
+  padding-left: 18px;
+  width: 120px;
+  color: $dark-text-color;
+  font-size: 14px;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.status__display-name {
+  margin: 0 auto 0 0;
+  color: $dark-text-color;
+  overflow: hidden;
+}
+
+.status__info__account .status__display-name {
+  display: block;
+  max-width: 100%;
+}
+
+.status__info {
+  display: flex;
+  font-size: 15px;
+
+  > span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .notification__message > span {
+    word-wrap: break-word;
+  }
+}
+
+.status__info__icons {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  height: 1em;
+  color: $action-button-color;
+
+  .status__media-icon {
+    padding-left: 6px;
+    padding-right: 1px;
+  }
+
+  .status__visibility-icon {
+    padding-left: 4px;
+  }
+}
+
+.status__info__account {
+  display: flex;
+  align-items: center;
+}
+
+.status-check-box {
+  border-bottom: 1px solid $ui-secondary-color;
+  display: flex;
+
+  .status-check-box__status {
+    margin: 10px 0 10px 10px;
+    flex: 1;
+
+    .media-gallery {
+      max-width: 250px;
+    }
+
+    .status__content {
+      padding: 0;
+      white-space: normal;
+    }
+
+    .video-player {
+      margin-top: 8px;
+      max-width: 250px;
+    }
+
+    .media-gallery__item-thumbnail {
+      cursor: default;
+    }
+  }
+}
+
+.status-check-box-toggle {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  padding: 10px;
+}
+
+.status__prepend {
+  margin: -10px -10px 10px;
+  color: $dark-text-color;
+  padding: 8px 10px 0 68px;
+  font-size: 14px;
+  position: relative;
+
+  .status__display-name strong {
+    color: $dark-text-color;
+  }
+
+  > span {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.status__action-bar {
+  align-items: center;
+  display: flex;
+  margin-top: 8px;
+
+  &__counter {
+    display: inline-flex;
+    margin-right: 11px;
+    align-items: center;
+
+    .status__action-bar-button {
+      margin-right: 4px;
+    }
+
+    &__label {
+      display: inline-block;
+      width: 14px;
+      font-size: 12px;
+      font-weight: 500;
+      color: $action-button-color;
+    }
+  }
+}
+
+.status__action-bar-button {
+  margin-right: 18px;
+}
+
+.status__action-bar-dropdown {
+  height: 23.15px;
+  width: 23.15px;
+}
+
+.detailed-status__action-bar-dropdown {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.detailed-status {
+  background: lighten($ui-base-color, 4%);
+  padding: 14px 10px;
+
+  &--flex {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .status__content,
+    .detailed-status__meta {
+      flex: 100%;
+    }
+  }
+
+  .status__content {
+    font-size: 19px;
+    line-height: 24px;
+
+    .emojione {
+      width: 24px;
+      height: 24px;
+      margin: -1px 0 0;
+    }
+
+    .hoverplay:hover { padding-left: 24px }
+  }
+
+  .video-player {
+    margin-top: 8px;
+  }
+}
+
+.detailed-status__meta {
+  margin-top: 15px;
+  color: $dark-text-color;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.detailed-status__action-bar {
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  display: flex;
+  flex-direction: row;
+  padding: 10px 0;
+}
+
+.detailed-status__link {
+  color: inherit;
+  text-decoration: none;
+
+}
+
+.detailed-status__star-icon {
+  color: $gold-star;
+}
+
+.detailed-status__boost-icon {
+  color: $red-bookmark;
+}
+
+.detailed-status__favorites,
+.detailed-status__reblogs {
+  display: inline-block;
+  font-weight: 500;
+  font-size: 12px;
+  margin-left: 6px;
+}
+
+.status__display-name,
+.status__relative-time,
+.detailed-status__display-name,
+.detailed-status__datetime,
+.detailed-status__application,
+.account__display-name {
+  text-decoration: none;
+}
+
+.status__display-name,
+.account__display-name {
+  strong {
+    color: $primary-text-color;
+  }
+}
+
+.muted {
+  .emojione {
+    opacity: 0.5;
+  }
+}
+
+.status__display-name,
+.reply-indicator__display-name,
+.detailed-status__display-name,
+.account__display-name {
+  &:hover strong {
+    text-decoration: underline;
+  }
+}
+
+.account__display-name strong {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detailed-status__application,
+.detailed-status__datetime {
+  color: inherit;
+}
+
+.detailed-status__display-name {
+  color: $secondary-text-color;
+  display: block;
+  line-height: 24px;
+  margin-bottom: 15px;
+  overflow: hidden;
+
+  strong,
+  span {
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  strong {
+    font-size: 16px;
+    color: $primary-text-color;
+  }
+}
+
+.detailed-status__display-avatar {
+  float: left;
+  margin-right: 10px;
+}
+
+.status__avatar {
+  flex: none;
+  margin: 0 10px 0 0;
+  height: 48px;
+  width: 48px;
+}
+
+.muted {
+  .status__content p,
+  .status__content a,
+  .status__content__text {
+    color: $dark-text-color;
+  }
+
+  .status__display-name strong {
+    color: $dark-text-color;
+  }
+
+  .status__avatar {
+    opacity: 0.5;
+  }
+
+  a.status__content__spoiler-link {
+    background: $ui-base-lighter-color;
+    color: $inverted-text-color;
+
+    &:hover {
+      background: lighten($ui-base-color, 29%);
+      text-decoration: none;
+    }
+  }
+}
+
+.status__relative-time,
+.detailed-status__datetime {
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+div > span.detailed-status__datetime,
+div > a.detailed-status__datetime {
+  position: relative;
+  float: right;
+}
+
+.status-card {
+  display: flex;
+  font-size: 14px;
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-radius: 4px;
+  color: $dark-text-color;
+  margin-top: 14px;
+  text-decoration: none;
+  overflow: hidden;
+
+  &__actions {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    & > div {
+      background: rgba($base-shadow-color, 0.6);
+      border-radius: 8px;
+      padding: 12px 9px;
+      flex: 0 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    button,
+    a {
+      display: inline;
+      color: $secondary-text-color;
+      background: transparent;
+      border: 0;
+      padding: 0 8px;
+      text-decoration: none;
+      font-size: 18px;
+      line-height: 18px;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $primary-text-color;
+      }
+    }
+
+    a {
+      font-size: 19px;
+      position: relative;
+      bottom: -1px;
+    }
+
+    a .fa, a:hover .fa {
+      color: inherit;
+    }
+  }
+}
+
+a.status-card {
+  cursor: pointer;
+
+  &:hover {
+    background: lighten($ui-base-color, 8%);
+  }
+}
+
+.status-card-photo {
+  cursor: zoom-in;
+  display: block;
+  text-decoration: none;
+    width: 100%;
+    height: auto;
+    margin: 0;
+}
+
+.status-card-video {
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.status-card__title {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 5px;
+  color: $darker-text-color;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.status-card__content {
+  flex: 1 1 auto;
+  overflow: hidden;
+  padding: 14px 14px 14px 8px;
+}
+
+.status-card__description {
+  color: $darker-text-color;
+}
+
+.status-card__host {
+  display: block;
+  margin-top: 5px;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-card__image {
+  flex: 0 0 100px;
+  background: lighten($ui-base-color, 8%);
+  position: relative;
+
+  & > .fa {
+    font-size: 21px;
+    position: absolute;
+    transform-origin: 50% 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.status-card.horizontal {
+  display: block;
+
+  .status-card__image {
+    width: 100%;
+  }
+
+  .status-card__image-image {
+    border-radius: 4px 4px 0 0;
+  }
+
+  .status-card__title {
+    white-space: inherit;
+  }
+}
+
+.status-card.compact {
+  border-color: lighten($ui-base-color, 4%);
+
+  &.interactive {
+    border: 0;
+  }
+
+  .status-card__content {
+    padding: 8px;
+    padding-top: 10px;
+  }
+
+  .status-card__title {
+    white-space: nowrap;
+  }
+
+  .status-card__image {
+    flex: 0 0 60px;
+  }
+}
+
+a.status-card.compact:hover {
+  background-color: lighten($ui-base-color, 4%);
+}
+
+.status-card__image-image {
+  border-radius: 4px 0 0 4px;
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background-size: cover;
+  background-position: center center;
+}
+
+.status__video-player {
+  display: flex;
+  align-items: center;
+  background: $base-shadow-color;
+  box-sizing: border-box;
+  cursor: default; /* May not be needed */
+  margin-top: 8px;
+  overflow: hidden;
+  position: relative;
+
+  @include fullwidth-gallery;
+}
+
+.status__video-player-video {
+  height: 100%;
+  object-fit: contain;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+  z-index: 1;
+
+  &:not(.letterbox) {
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.status__video-player-expand,
+.status__video-player-mute {
+  color: $primary-text-color;
+  opacity: 0.8;
+  position: absolute;
+  right: 4px;
+  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
+}
+
+.status__video-player-spoiler {
+  display: none;
+  color: $primary-text-color;
+  left: 4px;
+  position: absolute;
+  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
+  top: 4px;
+  z-index: 100;
+
+  &.status__video-player-spoiler--visible {
+    display: block;
+  }
+}
+
+.status__video-player-expand {
+  bottom: 4px;
+  z-index: 100;
+}
+
+.status__video-player-mute {
+  top: 4px;
+  z-index: 5;
+}
+
+.attachment-list {
+  display: flex;
+  font-size: 14px;
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-radius: 4px;
+  margin-top: 14px;
+  overflow: hidden;
+
+  &__icon {
+    flex: 0 0 auto;
+    color: $dark-text-color;
+    padding: 8px 18px;
+    cursor: default;
+    border-right: 1px solid lighten($ui-base-color, 8%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 26px;
+
+    .fa {
+      display: block;
+    }
+  }
+
+  &__list {
+    list-style: none;
+    padding: 4px 0;
+    padding-left: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    li {
+      display: block;
+      padding: 4px 0;
+    }
+
+    a {
+      text-decoration: none;
+      color: $dark-text-color;
+      font-weight: 500;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &.compact {
+    border: 0;
+    margin-top: 4px;
+
+    .attachment-list__list {
+      padding: 0;
+      display: block;
+    }
+
+    .fa {
+      color: $dark-text-color;
+    }
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
deleted file mode 100644
index fe75919bf..000000000
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ /dev/null
@@ -1,1044 +0,0 @@
-.status__content--with-action {
-  cursor: pointer;
-}
-
-.status__content {
-  position: relative;
-  margin: 10px 0;
-  font-size: 15px;
-  line-height: 20px;
-  word-wrap: break-word;
-  font-weight: 400;
-  overflow: visible;
-  padding-top: 5px;
-
-  &:focus {
-    outline: 0;
-  }
-
-  .emojione {
-    width: 20px;
-    height: 20px;
-    margin: -3px 0 0;
-  }
-
-  .hoverplay:hover { padding-left: 20px }
-
-  p, pre, blockquote {
-    margin-bottom: 20px;
-    white-space: pre-wrap;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .status__content__text,
-  .e-content {
-    h1, h2, h3, h4, h5, h6 {
-      margin-top: 20px;
-      margin-bottom: 20px;
-    }
-
-    h1, h2 {
-      font-weight: 700;
-      font-size: 18px;
-    }
-
-    h2 {
-      font-size: 16px;
-    }
-
-    h3, h4, h5, h6 {
-      font-weight: 500;
-    }
-
-    blockquote {
-      padding-left: 10px;
-      border-left: 3px solid $darker-text-color;
-      color: $darker-text-color;
-      white-space: normal;
-      font-style: italic;
-
-      p:last-child {
-        margin-bottom: 20px;
-      }
-    }
-
-    b, strong {
-      font-weight: 700;
-    }
-
-    em, i {
-      font-style: italic;
-    }
-
-    sub {
-      font-size: smaller;
-      text-align: sub;
-    }
-
-    sup {
-      vertical-align: super;
-      font-size: smaller;
-    }
-
-    ul, ol {
-      margin-left: 1em;
-
-      p {
-        margin: 0;
-      }
-
-      li:last-child {
-        margin-bottom: 20px;
-      }
-    }
-
-    ul {
-      list-style-type: disc;
-    }
-
-    ol {
-      list-style-type: decimal;
-    }
-
-    s, del {
-      text-decoration: line-through;
-    }
-
-    hr {
-      border-color: lighten($dark-text-color, 10%);
-    }
-
-    pre, code {
-      color: lighten($dark-text-color, 33%);
-    }
-
-    mark {
-      background-color: #ccff15;
-      color: black;
-    }
-
-    p.signature {
-      color: lighten($dark-text-color, 20%);
-      font-style: italic;
-      font-size: 12px;
-      text-align: right;
-    }
-  }
-
-  a {
-    background-color: lighten($ui-base-color, 7%);
-    color: darken($secondary-text-color, 10%);
-    text-decoration: none;
-    padding: 2px;
-    border-radius: 8px;
-
-    &:hover {
-      text-decoration: underline;
-      color: lighten($dark-text-color, 10%);
-    }
-
-    &.mention {
-      &:hover {
-        text-decoration: none;
-
-        span {
-          text-decoration: underline;
-        }
-      }
-    }
-
-    .fa {
-      color: $dark-text-color;
-    }
-  }
-
-  .status__content__spoiler {
-    display: none;
-
-    &.status__content__spoiler--visible {
-      display: block;
-    }
-  }
-
-  .status__content__spoiler-link {
-    background: lighten($ui-base-color, 30%);
-
-    &:hover {
-      background: lighten($ui-base-color, 33%);
-      text-decoration: none;
-    }
-  }
-}
-
-.status__content__spoiler-link {
-  display: inline-block;
-  border-radius: 2px;
-  background: lighten($ui-base-color, 30%);
-  border: none;
-  color: $inverted-text-color;
-  font-weight: 500;
-  font-size: 11px;
-  padding: 0 5px;
-  text-transform: uppercase;
-  line-height: inherit;
-  cursor: pointer;
-  vertical-align: bottom;
-
-  &:hover {
-    background: lighten($ui-base-color, 33%);
-    text-decoration: none;
-  }
-
-  .status__content__spoiler-icon {
-    display: inline-block;
-    margin: 0 0 0 5px;
-    border-left: 1px solid currentColor;
-    padding: 0 0 0 4px;
-    font-size: 16px;
-    vertical-align: -2px;
-  }
-}
-
-.notif-cleaning {
-  .status, .notification-follow {
-    padding-right: ($dismiss-overlay-width + 0.5rem);
-  }
-}
-
-.status__wrapper--filtered {
-  color: $dark-text-color;
-  border: 0;
-  font-size: inherit;
-  text-align: center;
-  line-height: inherit;
-  margin: 0;
-  padding: 15px;
-  box-sizing: border-box;
-  width: 100%;
-  clear: both;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-}
-
-.status__prepend-icon-wrapper {
-  float: left;
-  margin: 0 10px 0 -58px;
-  width: 48px;
-  text-align: right;
-}
-
-.notification-follow {
-  position: relative;
-
-  // same like Status
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-
-  .account {
-    border-bottom: 0 none;
-  }
-}
-
-.focusable {
-  &:focus {
-    outline: 0;
-    background: lighten($ui-base-color, 4%);
-
-    .status.status-direct {
-      background: lighten($ui-base-color, 12%);
-
-      &.muted {
-        background: transparent;
-      }
-    }
-
-    .detailed-status,
-    .detailed-status__action-bar {
-      background: lighten($ui-base-color, 8%);
-    }
-  }
-}
-
-.status {
-  padding: 10px 14px;
-  position: relative;
-  height: auto;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-  cursor: default;
-
-  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
-    // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
-    // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
-    padding-right: 28px; // 12px + 16px
-  }
-
-  @keyframes fade {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-  }
-
-  opacity: 1;
-  animation: fade 150ms linear;
-
-  .video-player {
-    margin-top: 8px;
-  }
-
-  &.status-direct {
-    background: lighten($ui-base-color, 8%);
-  }
-
-  &.light {
-    .status__relative-time {
-      color: $lighter-text-color;
-    }
-
-    .status__display-name {
-      color: $inverted-text-color;
-    }
-
-    .display-name {
-      strong {
-        color: $inverted-text-color;
-      }
-
-      span {
-        color: $lighter-text-color;
-      }
-    }
-
-    .status__content {
-      color: $inverted-text-color;
-
-      a {
-        color: $highlight-text-color;
-      }
-
-      a.status__content__spoiler-link {
-        color: $primary-text-color;
-        background: $ui-primary-color;
-
-        &:hover {
-          background: lighten($ui-primary-color, 8%);
-        }
-      }
-    }
-  }
-
-  &.collapsed {
-    background-position: center;
-    background-size: cover;
-    user-select: none;
-
-    &.has-background::before {
-      display: block;
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8));
-      pointer-events: none;
-      content: "";
-    }
-
-    .display-name:hover .display-name__html {
-      text-decoration: none;
-    }
-
-    .status__content {
-      height: 20px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding-top: 0;
-
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0; bottom: 0;
-        left: 0; right: 0;
-        background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1));
-        pointer-events: none;
-      }
-
-      a:hover {
-        text-decoration: none;
-      }
-    }
-    &:focus > .status__content:after {
-      background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1));
-    }
-    &.status-direct> .status__content:after {
-      background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1));
-    }
-
-    .notification__message {
-      margin-bottom: 0;
-    }
-
-    .status__info .notification__message > span {
-      white-space: nowrap;
-    }
-  }
-
-  .notification__message {
-    margin: -10px 0px 10px 0;
-  }
-}
-
-.notification-favourite {
-  .status.status-direct {
-    background: transparent;
-
-    .icon-button.disabled {
-      color: lighten($action-button-color, 13%);
-    }
-  }
-}
-
-.status__relative-time {
-  display: inline-block;
-  margin-left: auto;
-  padding-left: 18px;
-  width: 120px;
-  color: $dark-text-color;
-  font-size: 14px;
-  text-align: right;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.status__display-name {
-  margin: 0 auto 0 0;
-  color: $dark-text-color;
-  overflow: hidden;
-}
-
-.status__info__account .status__display-name {
-  display: block;
-  max-width: 100%;
-}
-
-.status__info {
-  display: flex;
-  font-size: 15px;
-
-  > span {
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .notification__message > span {
-    word-wrap: break-word;
-  }
-}
-
-.status__info__icons {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  height: 1em;
-  color: $action-button-color;
-
-  .status__media-icon {
-    padding-left: 6px;
-    padding-right: 1px;
-  }
-
-  .status__visibility-icon {
-    padding-left: 4px;
-  }
-}
-
-.status__info__account {
-  display: flex;
-  align-items: center;
-}
-
-.status-check-box {
-  border-bottom: 1px solid $ui-secondary-color;
-  display: flex;
-
-  .status-check-box__status {
-    margin: 10px 0 10px 10px;
-    flex: 1;
-
-    .media-gallery {
-      max-width: 250px;
-    }
-
-    .status__content {
-      padding: 0;
-      white-space: normal;
-    }
-
-    .video-player {
-      margin-top: 8px;
-      max-width: 250px;
-    }
-
-    .media-gallery__item-thumbnail {
-      cursor: default;
-    }
-  }
-}
-
-.status-check-box-toggle {
-  align-items: center;
-  display: flex;
-  flex: 0 0 auto;
-  justify-content: center;
-  padding: 10px;
-}
-
-.status__prepend {
-  margin: -10px -10px 10px;
-  color: $dark-text-color;
-  padding: 8px 10px 0 68px;
-  font-size: 14px;
-  position: relative;
-
-  .status__display-name strong {
-    color: $dark-text-color;
-  }
-
-  > span {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.status__action-bar {
-  align-items: center;
-  display: flex;
-  margin-top: 8px;
-
-  &__counter {
-    display: inline-flex;
-    margin-right: 11px;
-    align-items: center;
-
-    .status__action-bar-button {
-      margin-right: 4px;
-    }
-
-    &__label {
-      display: inline-block;
-      width: 14px;
-      font-size: 12px;
-      font-weight: 500;
-      color: $action-button-color;
-    }
-  }
-}
-
-.status__action-bar-button {
-  margin-right: 18px;
-}
-
-.status__action-bar-dropdown {
-  height: 23.15px;
-  width: 23.15px;
-}
-
-.detailed-status__action-bar-dropdown {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.detailed-status {
-  background: lighten($ui-base-color, 4%);
-  padding: 14px 10px;
-
-  &--flex {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: flex-start;
-
-    .status__content,
-    .detailed-status__meta {
-      flex: 100%;
-    }
-  }
-
-  .status__content {
-    font-size: 19px;
-    line-height: 24px;
-
-    .emojione {
-      width: 24px;
-      height: 24px;
-      margin: -1px 0 0;
-    }
-
-    .hoverplay:hover { padding-left: 24px }
-  }
-
-  .video-player {
-    margin-top: 8px;
-  }
-}
-
-.detailed-status__meta {
-  margin-top: 15px;
-  color: $dark-text-color;
-  font-size: 14px;
-  line-height: 18px;
-}
-
-.detailed-status__action-bar {
-  background: lighten($ui-base-color, 4%);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-  display: flex;
-  flex-direction: row;
-  padding: 10px 0;
-}
-
-.detailed-status__link {
-  color: inherit;
-  text-decoration: none;
-
-}
-
-.detailed-status__star-icon {
-  color: $gold-star;
-}
-
-.detailed-status__boost-icon {
-  color: $red-bookmark;
-}
-
-.detailed-status__favorites,
-.detailed-status__reblogs {
-  display: inline-block;
-  font-weight: 500;
-  font-size: 12px;
-  margin-left: 6px;
-}
-
-.status__display-name,
-.status__relative-time,
-.detailed-status__display-name,
-.detailed-status__datetime,
-.detailed-status__application,
-.account__display-name {
-  text-decoration: none;
-}
-
-.status__display-name,
-.account__display-name {
-  strong {
-    color: $primary-text-color;
-  }
-}
-
-.muted {
-  .emojione {
-    opacity: 0.5;
-  }
-}
-
-.status__display-name,
-.reply-indicator__display-name,
-.detailed-status__display-name,
-.account__display-name {
-  &:hover strong {
-    text-decoration: underline;
-  }
-}
-
-.account__display-name strong {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.detailed-status__application,
-.detailed-status__datetime {
-  color: inherit;
-}
-
-.detailed-status__display-name {
-  color: $secondary-text-color;
-  display: block;
-  line-height: 24px;
-  margin-bottom: 15px;
-  overflow: hidden;
-
-  strong,
-  span {
-    display: block;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  strong {
-    font-size: 16px;
-    color: $primary-text-color;
-  }
-}
-
-.detailed-status__display-avatar {
-  float: left;
-  margin-right: 10px;
-}
-
-.status__avatar {
-  flex: none;
-  margin: 0 10px 0 0;
-  height: 48px;
-  width: 48px;
-}
-
-.muted {
-  .status__content p,
-  .status__content a,
-  .status__content__text {
-    color: $dark-text-color;
-  }
-
-  .status__display-name strong {
-    color: $dark-text-color;
-  }
-
-  .status__avatar {
-    opacity: 0.5;
-  }
-
-  a.status__content__spoiler-link {
-    background: $ui-base-lighter-color;
-    color: $inverted-text-color;
-
-    &:hover {
-      background: lighten($ui-base-color, 29%);
-      text-decoration: none;
-    }
-  }
-}
-
-.status__relative-time,
-.detailed-status__datetime {
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-div > span.detailed-status__datetime,
-div > a.detailed-status__datetime {
-  position: relative;
-  float: right;
-}
-
-.status-card {
-  display: flex;
-  font-size: 14px;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-radius: 4px;
-  color: $dark-text-color;
-  margin-top: 14px;
-  text-decoration: none;
-  overflow: hidden;
-
-  &__actions {
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    & > div {
-      background: rgba($base-shadow-color, 0.6);
-      border-radius: 8px;
-      padding: 12px 9px;
-      flex: 0 0 auto;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    button,
-    a {
-      display: inline;
-      color: $secondary-text-color;
-      background: transparent;
-      border: 0;
-      padding: 0 8px;
-      text-decoration: none;
-      font-size: 18px;
-      line-height: 18px;
-
-      &:hover,
-      &:active,
-      &:focus {
-        color: $primary-text-color;
-      }
-    }
-
-    a {
-      font-size: 19px;
-      position: relative;
-      bottom: -1px;
-    }
-
-    a .fa, a:hover .fa {
-      color: inherit;
-    }
-  }
-}
-
-a.status-card {
-  cursor: pointer;
-
-  &:hover {
-    background: lighten($ui-base-color, 8%);
-  }
-}
-
-.status-card-photo {
-  cursor: zoom-in;
-  display: block;
-  text-decoration: none;
-    width: 100%;
-    height: auto;
-    margin: 0;
-}
-
-.status-card-video {
-  iframe {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.status-card__title {
-  display: block;
-  font-weight: 500;
-  margin-bottom: 5px;
-  color: $darker-text-color;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-decoration: none;
-}
-
-.status-card__content {
-  flex: 1 1 auto;
-  overflow: hidden;
-  padding: 14px 14px 14px 8px;
-}
-
-.status-card__description {
-  color: $darker-text-color;
-}
-
-.status-card__host {
-  display: block;
-  margin-top: 5px;
-  font-size: 13px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.status-card__image {
-  flex: 0 0 100px;
-  background: lighten($ui-base-color, 8%);
-  position: relative;
-
-  & > .fa {
-    font-size: 21px;
-    position: absolute;
-    transform-origin: 50% 50%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-.status-card.horizontal {
-  display: block;
-
-  .status-card__image {
-    width: 100%;
-  }
-
-  .status-card__image-image {
-    border-radius: 4px 4px 0 0;
-  }
-
-  .status-card__title {
-    white-space: inherit;
-  }
-}
-
-.status-card.compact {
-  border-color: lighten($ui-base-color, 4%);
-
-  &.interactive {
-    border: 0;
-  }
-
-  .status-card__content {
-    padding: 8px;
-    padding-top: 10px;
-  }
-
-  .status-card__title {
-    white-space: nowrap;
-  }
-
-  .status-card__image {
-    flex: 0 0 60px;
-  }
-}
-
-a.status-card.compact:hover {
-  background-color: lighten($ui-base-color, 4%);
-}
-
-.status-card__image-image {
-  border-radius: 4px 0 0 4px;
-  display: block;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  background-size: cover;
-  background-position: center center;
-}
-
-.status__video-player {
-  display: flex;
-  align-items: center;
-  background: $base-shadow-color;
-  box-sizing: border-box;
-  cursor: default; /* May not be needed */
-  margin-top: 8px;
-  overflow: hidden;
-  position: relative;
-
-  @include fullwidth-gallery;
-}
-
-.status__video-player-video {
-  height: 100%;
-  object-fit: contain;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
-  z-index: 1;
-
-  &:not(.letterbox) {
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.status__video-player-expand,
-.status__video-player-mute {
-  color: $primary-text-color;
-  opacity: 0.8;
-  position: absolute;
-  right: 4px;
-  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
-}
-
-.status__video-player-spoiler {
-  display: none;
-  color: $primary-text-color;
-  left: 4px;
-  position: absolute;
-  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
-  top: 4px;
-  z-index: 100;
-
-  &.status__video-player-spoiler--visible {
-    display: block;
-  }
-}
-
-.status__video-player-expand {
-  bottom: 4px;
-  z-index: 100;
-}
-
-.status__video-player-mute {
-  top: 4px;
-  z-index: 5;
-}
-
-.attachment-list {
-  display: flex;
-  font-size: 14px;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-radius: 4px;
-  margin-top: 14px;
-  overflow: hidden;
-
-  &__icon {
-    flex: 0 0 auto;
-    color: $dark-text-color;
-    padding: 8px 18px;
-    cursor: default;
-    border-right: 1px solid lighten($ui-base-color, 8%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: 26px;
-
-    .fa {
-      display: block;
-    }
-  }
-
-  &__list {
-    list-style: none;
-    padding: 4px 0;
-    padding-left: 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    li {
-      display: block;
-      padding: 4px 0;
-    }
-
-    a {
-      text-decoration: none;
-      color: $dark-text-color;
-      font-weight: 500;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &.compact {
-    border: 0;
-    margin-top: 4px;
-
-    .attachment-list__list {
-      padding: 0;
-      display: block;
-    }
-
-    .fa {
-      color: $dark-text-color;
-    }
-  }
-}
-- 
cgit