Rename app/ --> src/

src/styles/components/aliases.scss

@@ -0,0 +1,14 @@
+.aliases {
+  &__accounts {
+    overflow-y: auto;
+
+    &.empty-column-indicator {
+      min-height: unset;
+      overflow-y: unset;
+    }
+  }
+}
+
+.aliases-settings-panel {
+  flex: 1;
+}

src/styles/components/audio-player.scss

@@ -0,0 +1,51 @@
+.audio-player {
+  @apply relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
+  direction: ltr;
+
+  &.editable {
+    @apply rounded-none h-full;
+  }
+
+  .video-player__volume::before,
+  .video-player__seek::before {
+    @apply bg-white/10;
+  }
+
+  .video-player__seek__buffer {
+    @apply bg-white/20;
+  }
+
+  .video-player__buttons button {
+    @apply text-current opacity-[75];
+
+    &:active,
+    &:hover,
+    &:focus {
+      @apply text-current opacity-100;
+    }
+  }
+
+  .video-player__time-sep,
+  .video-player__time-total,
+  .video-player__time-current {
+    @apply text-current;
+  }
+
+  .video-player__seek::before,
+  .video-player__seek__buffer,
+  .video-player__seek__progress {
+    @apply top-0;
+  }
+
+  .video-player__seek__handle {
+    @apply -top-1;
+  }
+
+  .video-player__controls {
+    @apply pt-2.5 bg-transparent;
+  }
+}
+
+.media-spoiler-audio {
+  @apply relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat;
+}

src/styles/components/buttons.scss

@@ -0,0 +1,8 @@
+button {
+  font-family: inherit;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+}

src/styles/components/columns.scss

@@ -0,0 +1,26 @@
+.empty-column-indicator,
+.error-column {
+  @apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;
+
+  @supports (display: grid) { // hack to fix Chrome <57
+    contain: strict;
+  }
+
+  & > span {
+    @apply max-w-[400px];
+  }
+
+  a {
+    @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
+  }
+}
+
+.error-column {
+  flex-direction: column;
+
+  .svg-icon {
+    width: 70px;
+    height: 70px;
+    margin-bottom: 30px;
+  }
+}

src/styles/components/compose-form.scss

@@ -0,0 +1,179 @@
+.compose-form {
+  &__warning {
+    @apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
+
+    strong {
+      @apply font-medium;
+
+      @each $lang in $cjk-langs {
+        &:lang(#{$lang}) {
+          @apply font-bold;
+        }
+      }
+    }
+
+    a {
+      font-weight: 500;
+      text-decoration: underline;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &__modifiers {
+    @apply text-gray-900 text-sm;
+    font-family: inherit;
+  }
+
+  &__upload-wrapper { overflow: hidden; }
+
+  &__uploads-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    &.contains-media {
+      padding: 5px;
+    }
+  }
+
+  &__upload {
+    flex: 1 1 0;
+    min-width: 40%;
+    margin: 5px;
+    position: relative;
+    border-radius: 4px;
+    overflow: hidden;
+
+    &__actions {
+      @apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear;
+
+      &.active {
+        @apply opacity-100;
+      }
+
+      .icon-button {
+        @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
+      }
+    }
+
+    &-description {
+      @apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
+
+      &.active {
+        @apply opacity-100;
+      }
+
+      textarea {
+        @apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
+
+        &::placeholder {
+          @apply text-white/60;
+        }
+      }
+    }
+
+    &-preview {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  &__upload-thumbnail {
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    height: 160px;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+
+    &.video {
+      background-image: url('../assets/images/video-placeholder.png');
+      background-size: cover;
+    }
+
+    &.audio {
+      background-image: url('../assets/images/audio-placeholder.png');
+      background-size: cover;
+    }
+  }
+}
+
+.privacy-dropdown {
+  &.active {
+    &.top .privacy-dropdown__value {
+      @apply rounded-t-md;
+    }
+
+    .privacy-dropdown__dropdown {
+      @apply block shadow-md;
+    }
+  }
+
+  &__dropdown {
+    @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden;
+
+    &.top {
+      transform-origin: 50% 100%;
+    }
+
+    &.bottom {
+      transform-origin: 50% 0;
+    }
+  }
+
+  &__option {
+    @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer;
+
+    &.active {
+      @apply bg-gray-100 dark:bg-gray-800;
+    }
+
+    &:hover,
+    &.active {
+      .privacy-dropdown__option__content,
+      .privacy-dropdown__option__content strong {
+        @apply text-black dark:text-white;
+      }
+    }
+
+    &.active {
+      @apply hover:bg-gray-200 dark:hover:bg-gray-700;
+    }
+
+    &__icon {
+      @apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5;
+    }
+
+    &__content {
+      @apply flex-auto text-primary-600 dark:text-primary-400;
+
+      strong {
+        @apply block font-medium text-black dark:text-white;
+
+        @each $lang in $cjk-langs {
+          &:lang(#{$lang}) {
+            @apply font-bold;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/components/crypto-donate.scss

@@ -0,0 +1,47 @@
+.crypto-address {
+  @apply flex flex-col p-5;
+
+  &__head {
+    @apply flex items-center mb-1.5;
+  }
+
+  &__title {
+    @apply font-bold;
+  }
+
+  &__icon {
+    @apply flex items-start justify-center w-6 mr-2.5;
+
+    img {
+      @apply w-full;
+    }
+  }
+
+  &__actions {
+    @apply flex ml-auto;
+
+    a {
+      @apply text-gray-400 ml-2;
+    }
+
+    .svg-icon {
+      @apply h-4.5 w-4.5;
+    }
+  }
+
+  &__note {
+    @apply mb-2.5;
+  }
+
+  &__qrcode {
+    @apply flex items-center justify-center mb-3 p-2.5;
+  }
+
+  &__address {
+    @apply mt-auto;
+  }
+}
+
+.crypto-donate-modal .crypto-address {
+  @apply p-0;
+}

src/styles/components/datepicker.scss

@@ -0,0 +1,148 @@
+.react-datepicker {
+  @apply dark:bg-gray-900 dark:border-gray-700 p-4 font-sans text-xs text-gray-900 dark:text-gray-300 border border-solid border-gray-200 rounded-lg;
+}
+
+.react-datepicker__input-container > input {
+  @apply dark:bg-gray-900 dark:text-gray-100 block w-full sm:text-sm border-gray-400 dark:border-gray-800 rounded-md focus:ring-primary-500 focus:border-primary-500;
+
+  &.has-error {
+    @apply text-red-600 border-red-600;
+  }
+}
+
+.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,
+.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
+  @apply border-b-white dark:border-b-gray-900;
+}
+
+.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
+  @apply border-b-gray-200 dark:border-b-gray-700;
+}
+
+.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
+  @apply rounded-tr-lg;
+}
+
+.react-datepicker__header {
+  @apply bg-white dark:bg-gray-900 border-b-0 py-1 px-0;
+}
+
+.react-datepicker__current-month,
+.react-datepicker-time__header,
+.react-datepicker-year-header {
+  @apply text-gray-900 dark:text-gray-300 font-bold text-sm;
+}
+
+.react-datepicker__current-month {
+  margin-top: 2px;
+}
+
+.react-datepicker__navigation {
+  @apply top-4 h-8 w-8 rounded hover:bg-gray-50 dark:hover:bg-gray-900/50;
+}
+
+.react-datepicker__navigation-icon {
+  margin-top: -3px;
+}
+
+.react-datepicker__navigation-icon--previous::before {
+  right: -5px;
+}
+
+.react-datepicker__navigation-icon--next::before {
+  left: -5px;
+}
+
+.react-datepicker__navigation--previous {
+  left: 16px;
+}
+
+.react-datepicker__navigation--next {
+  right: 16px;
+
+  &--with-time:not(.react-datepicker__navigation--next--with-today-button) {
+    right: 100px;
+  }
+}
+
+.react-datepicker__year-read-view--down-arrow,
+.react-datepicker__month-read-view--down-arrow,
+.react-datepicker__month-year-read-view--down-arrow,
+.react-datepicker__navigation-icon::before {
+  border-width: 2px 2px 0 0;
+  height: 7px;
+  width: 7px;
+  top: 8px;
+}
+
+.react-datepicker__header__dropdown {
+  @apply py-4;
+}
+
+.react-datepicker__day-names,
+.react-datepicker__week {
+  @apply flex justify-between;
+}
+
+.react-datepicker__time {
+  @apply dark:bg-gray-900;
+}
+
+.react-datepicker__time-container {
+  @apply dark:border-gray-700;
+}
+
+.react-datepicker__day-name,
+.react-datepicker__day,
+.react-datepicker__time-name {
+  @apply text-gray-900 dark:text-gray-300;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.react-datepicker__time-list-item--disabled,
+.react-datepicker__day--disabled {
+  @apply text-gray-400 dark:text-gray-500;
+}
+
+.react-datepicker__day:hover,
+.react-datepicker__month-text:hover,
+.react-datepicker__quarter-text:hover,
+.react-datepicker__year-text:hover,
+.react-datepicker__time-list-item:hover {
+  @apply bg-gray-100 dark:bg-gray-700 rounded;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--in-selecting-range,
+.react-datepicker__day--in-range,
+.react-datepicker__month-text--selected,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--selected,
+.react-datepicker__quarter-text--in-selecting-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--selected,
+.react-datepicker__year-text--in-selecting-range,
+.react-datepicker__year-text--in-range {
+  @apply bg-primary-600 hover:bg-primary-700 dark:bg-gray-300 dark:hover:bg-gray-200 text-white dark:text-black rounded;
+}
+
+.react-datepicker__day--keyboard-selected,
+.react-datepicker__month-text--keyboard-selected,
+.react-datepicker__quarter-text--keyboard-selected,
+.react-datepicker__year-text--keyboard-selected {
+  @apply bg-primary-50 hover:bg-primary-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-primary-600 dark:text-primary-400;
+}
+
+.react-datepicker__close-icon {
+  @apply rtl:left-0 rtl:right-auto rtl:pr-0 rtl:pl-[6px];
+}
+
+.react-datepicker__close-icon::after {
+  @apply bg-transparent text-gray-600 dark:text-gray-400 text-base;
+  font-family: 'Font Awesome 5 Free';
+  content: '';
+  font-weight: 900;
+}

src/styles/components/detailed-status.scss

@@ -0,0 +1,15 @@
+.thread {
+  @apply bg-white dark:bg-primary-900;
+
+  &__status {
+    @apply relative pb-4;
+
+    .status__wrapper {
+      @apply shadow-none p-0;
+    }
+  }
+
+  .status__content-wrapper {
+    @apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)];
+  }
+}

src/styles/components/display-name.scss

@@ -0,0 +1,18 @@
+.display-name {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+
+  bdi {
+    min-width: 0;
+  }
+
+  &__account {
+    position: relative;
+    font-weight: 600;
+    font-size: 14px;
+  }
+}

src/styles/components/icon.scss

@@ -0,0 +1,21 @@
+.svg-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.2s;
+
+  svg {
+    // Apparently this won't skew the image as long as it has a viewbox
+    width: 100%;
+    height: 100%;
+    transition: 0.2s;
+  }
+}
+
+.icon-button > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/styles/components/media-gallery.scss

@@ -0,0 +1,152 @@
+$media-compact-size: 50px;
+
+.media-gallery {
+  @apply rounded-lg;
+  box-sizing: border-box;
+  overflow: hidden;
+  isolation: isolate;
+  position: relative;
+  width: 100%;
+  height: auto;
+
+  &__item {
+    @apply rounded-sm;
+    border: 0;
+    box-sizing: border-box;
+    display: block;
+    float: left;
+    position: relative;
+    overflow: hidden;
+
+    &__icons {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      .svg-icon {
+        @apply h-24 w-24;
+      }
+    }
+
+    &-overflow {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.75);
+      z-index: 2;
+      color: #333;
+      text-align: center;
+      font-weight: bold;
+      font-size: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+    }
+
+    &-thumbnail {
+      @apply text-gray-400;
+      cursor: zoom-in;
+      display: block;
+      text-decoration: none;
+      line-height: 0;
+      position: relative;
+      z-index: 1;
+      height: 100%;
+      width: 100%;
+
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  &__preview {
+    @apply bg-gray-200 dark:bg-gray-900 rounded-lg;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &__gifv {
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+
+  &__item-gifv-thumbnail {
+    @apply rounded-md;
+    cursor: zoom-in;
+    height: 100%;
+    object-fit: cover;
+    position: relative;
+    width: 100%;
+    z-index: 1;
+    transform: none;
+    top: 0;
+  }
+
+  &__gifv__label,
+  &__filename__label,
+  &__file-extension__label {
+    @apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90;
+    font-size: 11px;
+    transition: opacity 0.1s ease;
+    line-height: 18px;
+  }
+
+  &__gifv {
+    &.autoplay {
+      .media-gallery__gifv__label {
+        display: none;
+      }
+    }
+
+    &:hover {
+      .media-gallery__gifv__label {
+        opacity: 1;
+      }
+    }
+  }
+
+  &--compact {
+    height: $media-compact-size !important;
+    background: transparent;
+
+    .media-gallery__item {
+      width: $media-compact-size !important;
+      height: $media-compact-size !important;
+      inset: auto !important;
+      float: left !important;
+      margin-right: 5px;
+
+      &-overflow {
+        font-size: 20px;
+      }
+
+      &__icons .svg-icon {
+        @apply h-8 w-8;
+      }
+    }
+
+    .media-gallery__file-extension__label {
+      display: none;
+    }
+  }
+}

src/styles/components/modal.scss

@@ -0,0 +1,177 @@
+.modal-root__modal {
+  pointer-events: auto;
+  display: flex;
+  z-index: 9999;
+  max-height: 100%;
+  overflow-y: hidden;
+}
+
+.media-modal {
+  .audio-player.detailed,
+  .extended-video-player {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .audio-player {
+    max-width: 800px;
+    max-height: 600px;
+  }
+
+  .extended-video-player {
+    width: 100%;
+    height: 100%;
+
+    video {
+      @apply max-w-full max-h-[80%];
+    }
+  }
+}
+
+.error-modal {
+  @apply text-gray-900;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 80vh;
+    width: 80vw;
+    max-width: 520px;
+    max-height: 420px;
+    position: relative;
+    text-align: center;
+
+    & > div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 25px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      user-select: text;
+    }
+  }
+
+  &__footer {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    padding: 25px;
+
+    & > div {
+      min-width: 33px;
+    }
+  }
+}
+
+.actions-modal {
+  @apply flex-col relative text-gray-400 overflow-hidden w-full max-w-lg m-auto bg-white dark:bg-gray-900 shadow-xl rounded-2xl;
+  max-height: calc(100vh - 3rem);
+
+  &__item-label {
+    font-weight: 500;
+  }
+
+  .dropdown-menu__separator {
+    @apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600;
+  }
+
+  &__status {
+    @apply overflow-y-auto max-h-[300px];
+  }
+
+  ul {
+    @apply my-2 flex-shrink-0 overflow-y-auto;
+    max-height: calc(100vh - 147px);
+
+    &.with-status { max-height: calc(80vh - 75px); }
+
+    li:not(:empty) {
+      a,
+      button {
+        @apply flex items-center px-4 py-3 text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 no-underline text-left;
+
+        &.destructive {
+          @apply text-danger-600 dark:text-danger-400;
+        }
+
+        .svg-icon:first-child {
+          @apply min-w-[1.25rem] w-5 h-5;
+
+          svg {
+            stroke-width: 1.5;
+          }
+        }
+      }
+
+      button[type='button'] {
+        @apply w-full justify-center text-center;
+      }
+    }
+  }
+}
+
+.reply-mentions-modal__accounts {
+  display: block;
+  flex-direction: row;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 300px;
+}
+
+.remote-interaction-modal {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+  }
+
+  &__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+
+    button {
+      align-self: flex-end;
+    }
+  }
+
+  &__divider {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0 -10px;
+
+    &::before,
+    &::after {
+      @apply border-b border-gray-300 dark:border-gray-600;
+      content: '';
+      flex: 1;
+    }
+  }
+
+  @media screen and (width <= 895px) {
+    margin: 0;
+    border-radius: 6px;
+    height: unset !important;
+    width: 440px !important;
+  }
+
+  @media screen and (width <= 480px) {
+    width: 330px !important;
+  }
+}

src/styles/components/notification.scss

@@ -0,0 +1,3 @@
+.notification .status__wrapper {
+  @apply p-0 shadow-none rounded-none;
+}

src/styles/components/reply-mentions.scss

@@ -0,0 +1,18 @@
+.reply-mentions {
+  @apply text-gray-700 dark:text-gray-600 mb-1 text-sm;
+
+  &__account {
+    @apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline inline-block;
+    direction: ltr;
+  }
+}
+
+.status__wrapper {
+  .reply-mentions {
+    display: block;
+
+    span {
+      cursor: pointer;
+    }
+  }
+}

src/styles/components/search.scss

@@ -0,0 +1,44 @@
+.search {
+  position: relative;
+}
+
+.search__icon {
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus {
+    outline: 0 !important;
+  }
+
+  .svg-icon {
+    @apply right-4 rtl:left-4 rtl:right-auto text-gray-400;
+    @include font-size(16);
+    cursor: default;
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    width: 18px;
+    height: 18px;
+    opacity: 0;
+    pointer-events: none;
+
+    &.active {
+      pointer-events: auto;
+      opacity: 1;
+    }
+  }
+
+  .svg-icon--search.active {
+    pointer-events: none;
+  }
+
+  .svg-icon--backspace {
+    cursor: pointer;
+    width: 22px;
+    height: 22px;
+  }
+}

src/styles/components/status.scss

@@ -0,0 +1,146 @@
+.status {
+  @apply min-h-[54px] 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: 26px; // 10px + 16px
+  }
+
+  @keyframes fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  opacity: 1;
+  animation: fade 150ms linear;
+}
+
+[column-type='filled'] .status__wrapper,
+[column-type='filled'] .status-placeholder {
+  @apply bg-transparent dark:bg-transparent rounded-none shadow-none;
+}
+
+.status-check-box {
+  @apply flex items-center justify-between;
+
+  .status-check-box__status {
+    @apply py-2;
+
+    .media-gallery {
+      max-width: 250px;
+    }
+
+    .status__content {
+      @apply p-0 text-gray-700 dark:text-gray-500 text-sm whitespace-normal;
+    }
+
+    .video-player,
+    .audio-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;
+}
+
+.focusable:focus,
+.focusable-within:focus-within {
+  outline: 0; /* Required b/c HotKeys lib sets this outline */
+  @apply ring-2 ring-primary-300;
+}
+
+.status-card {
+  @apply flex text-sm border border-solid border-gray-200 dark:border-gray-800 rounded-lg text-gray-800 dark:text-gray-200 no-underline overflow-hidden;
+}
+
+a.status-card {
+  @apply cursor-pointer hover:bg-gray-100 dark:hover:bg-primary-800/30 hover:no-underline;
+}
+
+.status-card-video,
+.status-card-audio {
+  iframe {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+.status-card__image {
+  flex: 0 0 40%;
+  position: relative;
+  overflow: hidden;
+
+  & > .svg-icon {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    transform-origin: 50% 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    svg {
+      stroke-width: 1px;
+    }
+  }
+}
+
+.status-card.horizontal {
+  display: block;
+}
+
+.status-card.compact {
+  @apply border-gray-200 dark:border-gray-800;
+}
+
+.status-card__image-image {
+  @apply block w-full h-full object-cover bg-cover bg-center;
+}
+
+.status-card--link {
+  @apply flex flex-col md:flex-row;
+}
+
+.material-status {
+  padding-bottom: 10px;
+
+  &__status {
+    padding: 15px 0 10px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+  }
+
+  .status {
+    padding: 8px 10px;
+
+    &__content {
+      padding-top: 10px;
+    }
+  }
+}
+
+.attachment-thumbs {
+  position: relative;
+
+  &__clickable-region {
+    cursor: pointer;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}

src/styles/components/video-player.scss

@@ -0,0 +1,307 @@
+.detailed,
+.fullscreen {
+  .video-player__volume__current,
+  .video-player__volume::before {
+    bottom: 27px;
+  }
+
+  .video-player__volume__handle {
+    bottom: 23px;
+  }
+}
+
+.video-player {
+  @apply relative box-border max-w-full overflow-hidden rounded-[10px] bg-black text-white;
+  direction: ltr;
+
+  &.editable {
+    @apply rounded-none;
+    height: 100% !important;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  video {
+    display: block;
+    z-index: 1;
+    position: relative;
+  }
+
+  &.fullscreen {
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0;
+
+    video {
+      max-width: 100% !important;
+      max-height: 100% !important;
+      width: 100% !important;
+      height: 100% !important;
+      outline: 0;
+    }
+  }
+
+  &--inline {
+    video {
+      object-fit: contain;
+      max-height: 100%;
+    }
+  }
+
+  &__controls {
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    background: linear-gradient(0deg, #000000d9 0, #00000073 60%, transparent);
+    padding: 0 15px;
+    opacity: 0;
+    transition: opacity 0.1s ease;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  &__buttons-bar {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    margin: 0 -5px;
+
+    .video-player__download__icon {
+      color: inherit;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    flex: 0 1 auto;
+    min-width: 30px;
+    align-items: center;
+    font-size: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .player-button {
+      display: inline-block;
+      outline: 0;
+      flex: 0 0 auto;
+      background: transparent;
+      padding: 5px 6px;
+      font-size: 16px;
+      border: 0;
+      color: rgba(#fff, 0.75);
+
+      .svg-icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      &:active,
+      &:hover,
+      &:focus {
+        color: #fff;
+      }
+    }
+  }
+
+  &__time {
+    display: inline;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 5px;
+  }
+
+  &__time-sep,
+  &__time-total,
+  &__time-current {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__time-current {
+    color: #fff;
+  }
+
+  &__time-sep {
+    display: inline-block;
+    margin: 0 6px;
+  }
+
+  &__time-sep,
+  &__time-total {
+    color: #fff;
+  }
+
+  &__volume {
+    flex: 0 0 auto;
+    display: inline-flex;
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+    overflow: hidden;
+
+    .no-reduce-motion & {
+      transition: all 100ms linear;
+    }
+
+    &.active {
+      overflow: visible;
+      width: 50px;
+      margin-right: 16px;
+    }
+
+    &::before {
+      content: '';
+      width: 50px;
+      background: rgba(#fff, 0.35);
+      border-radius: 4px;
+      display: block;
+      position: absolute;
+      height: 4px;
+      left: 0;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+
+    &__current {
+      @apply bg-accent-500;
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 4px;
+      left: 0;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+
+    &__handle {
+      @apply bg-accent-500;
+      position: absolute;
+      z-index: 3;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      top: 50%;
+      left: 0;
+      margin-left: -6px;
+      transform: translate(0, -50%);
+      box-shadow: 1px 2px 6px #0003;
+      opacity: 0;
+
+      .no-reduce-motion & {
+        transition: opacity 100ms linear;
+      }
+    }
+
+    &.active &__handle {
+      opacity: 1;
+    }
+  }
+
+  &__link {
+    padding: 2px 10px;
+
+    a {
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 500;
+      color: #fff;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__seek {
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+
+    &::before {
+      content: '';
+      width: 100%;
+      background: rgba(#fff, 0.35);
+      border-radius: 4px;
+      display: block;
+      position: absolute;
+      height: 4px;
+      top: 14px;
+    }
+
+    &__progress,
+    &__buffer {
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 4px;
+      top: 14px;
+    }
+
+    &__progress {
+      @apply bg-accent-500;
+    }
+
+    &__buffer {
+      background: rgba(#fff, 0.2);
+    }
+
+    &__handle {
+      @apply bg-accent-500;
+      position: absolute;
+      z-index: 3;
+      opacity: 0;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      top: 10px;
+      margin-left: -6px;
+      box-shadow: 1px 2px 6px #0003;
+
+      .no-reduce-motion & {
+        transition: opacity 0.1s ease;
+      }
+
+      &.active {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .video-player__seek__handle {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.detailed,
+  &.fullscreen {
+    .video-player__buttons {
+      .player-button {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+  }
+}
+
+.media-spoiler-video {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  margin-top: 8px;
+  position: relative;
+  border: 0;
+  display: block;
+}