Improve scss refactor 1

4 files changed, 497 insertions, 615 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/glitch.scss b/app/javascript/flavours/glitch/styles/components/glitch.scss
index cad93821e..b30f26cd8 100644
--- a/app/javascript/flavours/glitch/styles/components/glitch.scss
+++ b/app/javascript/flavours/glitch/styles/components/glitch.scss
@@ -427,31 +427,6 @@
   @include fullwidth-gallery;
 }
 
-.sensitive-info {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  z-index: 100;
-}
-
-.sensitive-marker {
-  margin: 0 3px;
-  border-radius: 2px;
-  padding: 2px 6px;
-  color: rgba($primary-text-color, 0.8);
-  background: rgba($base-overlay-background, 0.5);
-  font-size: 12px;
-  line-height: 15px;
-  text-transform: uppercase;
-  opacity: .9;
-  transition: opacity .1s ease;
-
-  .media-gallery:hover & { opacity: 1 }
-}
-
 .boost-modal,
 .favourite-modal,
 .confirmation-modal,
@@ -528,129 +503,3 @@
     font-weight: 500;
   }
 }
-
-.media-gallery {
-  box-sizing: border-box;
-  margin-top: 8px;
-  overflow: hidden;
-  position: relative;
-  background: $base-shadow-color;
-  width: 100%;
-
-  .detailed-status & {
-    margin-left: -12px;
-    width: calc(100% + 24px);
-    height: 250px;
-  }
-
-  @include fullwidth-gallery;
-}
-
-.media-gallery__item-thumbnail {
-  cursor: zoom-in;
-  display: block;
-  text-decoration: none;
-  height: 100%;
-  line-height: 0;
-
-  &,
-  img {
-    //reset
-    height: initial;
-    object-fit: initial;
-    //glitch
-    width: 100%;
-    object-fit: contain;
-
-    &:not(.letterbox) {
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-}
-
-.media-gallery__gifv {
-  display: flex;
-  justify-content: center;
-}
-
-.media-gallery__item-gifv-thumbnail {
-  //reset
-  object-fit: initial;
-  top: initial;
-  transform: initial;
-  width: initial;
-  z-index: initial;
-  //glitch
-  cursor: zoom-in;
-  height: 100%;
-  width: 100%;
-  position: relative;
-  z-index: 1;
-  object-fit: contain;
-
-  &:not(.letterbox) {
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.status__video-player {
-  //reset
-  background: initial;
-  //glitch
-  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 {
-  position: relative;
-  width: 100%;
-  z-index: 1;
-
-  &:not(.letterbox) {
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.video-player {
-  //reset
-  border-radius: initial;
-  //glitch
-  .detailed-status & {
-    margin-left: -12px;
-    width: calc(100% + 24px);
-    height: 250px;
-  }
-
-  @include fullwidth-gallery;
-
-  video {
-    object-fit: cover;
-    position: relative;
-  }
-}
-
-.media-spoiler-video {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer;
-  margin-top: 8px;
-  position: relative;
-  width: 100%;
-
-  @include fullwidth-gallery;
-
-  border: 0;
-  display: block;
-}
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index d35dd7e07..b7190c7ad 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -2536,46 +2536,6 @@
   100% { opacity: 0.25; }
 }
 
-.video-error-cover {
-  align-items: center;
-  background: $base-overlay-background;
-  color: $primary-text-color;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;
-  margin-top: 8px;
-  position: relative;
-  text-align: center;
-  z-index: 100;
-}
-
-.media-spoiler {
-  background: $base-overlay-background;
-  color: $ui-primary-color;
-  border: 0;
-  width: 100%;
-  height: 100%;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: lighten($ui-primary-color, 8%);
-  }
-}
-
-.media-spoiler__warning {
-  display: block;
-  font-size: 14px;
-}
-
-.media-spoiler__trigger {
-  display: block;
-  font-size: 11px;
-  font-weight: 500;
-}
-
 .spoiler-button {
   display: none;
   left: 4px;
@@ -3789,37 +3749,6 @@
   left: 0;
 }
 
-.media-gallery__gifv__label {
-  display: block;
-  position: absolute;
-  color: $primary-text-color;
-  background: rgba($base-overlay-background, 0.5);
-  bottom: 6px;
-  left: 6px;
-  padding: 2px 6px;
-  border-radius: 2px;
-  font-size: 11px;
-  font-weight: 600;
-  z-index: 1;
-  pointer-events: none;
-  opacity: 0.9;
-  transition: opacity 0.1s ease;
-}
-
-.media-gallery__gifv {
-  &.autoplay {
-    .media-gallery__gifv__label {
-      display: none;
-    }
-  }
-
-  &:hover {
-    .media-gallery__gifv__label {
-      opacity: 1;
-    }
-  }
-}
-
 .attachment-list {
   display: flex;
   font-size: 14px;
@@ -3870,368 +3799,6 @@
   }
 }
 
-/* Media Gallery */
-.media-gallery {
-  box-sizing: border-box;
-  margin-top: 8px;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-}
-
-.media-gallery__item {
-  border: none;
-  box-sizing: border-box;
-  display: block;
-  float: left;
-  position: relative;
-
-  &.standalone {
-    .media-gallery__item-gifv-thumbnail {
-      transform: none;
-    }
-  }
-}
-
-.media-gallery__item-thumbnail {
-  cursor: zoom-in;
-  display: block;
-  text-decoration: none;
-  height: 100%;
-  line-height: 0;
-
-  &,
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.media-gallery__gifv {
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-}
-
-.media-gallery__item-gifv-thumbnail {
-  cursor: zoom-in;
-  height: 100%;
-  object-fit: cover;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
-  z-index: 1;
-}
-
-.media-gallery__item-thumbnail-label {
-  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  position: absolute;
-}
-/* End Media Gallery */
-
-/* Status Video Player */
-.status__video-player {
-  background: $base-overlay-background;
-  box-sizing: border-box;
-  cursor: default; /* May not be needed */
-  margin-top: 8px;
-  overflow: hidden;
-  position: relative;
-}
-
-.status__video-player-video {
-  height: 100%;
-  object-fit: cover;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
-  z-index: 1;
-}
-
-.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;
-}
-
-.video-player {
-  overflow: hidden;
-  position: relative;
-  background: $base-shadow-color;
-  max-width: 100%;
-  border-radius: 4px;
-
-  video {
-    height: 100%;
-    width: 100%;
-    z-index: 1;
-  }
-
-  &.fullscreen {
-    width: 100% !important;
-    height: 100% !important;
-    margin: 0;
-
-    video {
-      max-width: 100% !important;
-      max-height: 100% !important;
-    }
-  }
-
-  &.inline {
-    video {
-      object-fit: cover;
-      position: relative;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-  }
-
-  &__controls {
-    position: absolute;
-    z-index: 2;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    box-sizing: border-box;
-    background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
-    padding: 0 15px;
-    opacity: 0;
-    transition: opacity .1s ease;
-
-    &.active {
-      opacity: 1;
-    }
-  }
-
-  &.inactive {
-    video,
-    .video-player__controls {
-      visibility: hidden;
-    }
-  }
-
-  &__spoiler {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 4;
-    border: 0;
-    background: $base-shadow-color;
-    color: $ui-primary-color;
-    transition: none;
-    pointer-events: none;
-
-    &.active {
-      display: block;
-      pointer-events: auto;
-
-      &:hover,
-      &:active,
-      &:focus {
-        color: lighten($ui-primary-color, 8%);
-      }
-    }
-
-    &__title {
-      display: block;
-      font-size: 14px;
-    }
-
-    &__subtitle {
-      display: block;
-      font-size: 11px;
-      font-weight: 500;
-    }
-  }
-
-  &__buttons-bar {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 10px;
-  }
-
-  &__buttons {
-    font-size: 16px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.left {
-      button {
-        padding-left: 0;
-      }
-    }
-
-    &.right {
-      button {
-        padding-right: 0;
-      }
-    }
-
-    button {
-      background: transparent;
-      padding: 2px 10px;
-      font-size: 16px;
-      border: 0;
-      color: rgba($white, 0.75);
-
-      &:active,
-      &:hover,
-      &:focus {
-        color: $white;
-      }
-    }
-  }
-
-  &__time-sep,
-  &__time-total,
-  &__time-current {
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  &__time-current {
-    color: $white;
-    margin-left: 10px;
-  }
-
-  &__time-sep {
-    display: inline-block;
-    margin: 0 6px;
-  }
-
-  &__time-sep,
-  &__time-total {
-    color: $white;
-  }
-
-  &__seek {
-    cursor: pointer;
-    height: 24px;
-    position: relative;
-
-    &::before {
-      content: "";
-      width: 100%;
-      background: rgba($white, 0.35);
-      border-radius: 4px;
-      display: block;
-      position: absolute;
-      height: 4px;
-      top: 10px;
-    }
-
-    &__progress,
-    &__buffer {
-      display: block;
-      position: absolute;
-      height: 4px;
-      border-radius: 4px;
-      top: 10px;
-      background: lighten($ui-highlight-color, 8%);
-    }
-
-    &__buffer {
-      background: rgba($white, 0.2);
-    }
-
-    &__handle {
-      position: absolute;
-      z-index: 3;
-      opacity: 0;
-      border-radius: 50%;
-      width: 12px;
-      height: 12px;
-      top: 6px;
-      margin-left: -6px;
-      transition: opacity .1s ease;
-      background: lighten($ui-highlight-color, 8%);
-      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-      pointer-events: none;
-
-      &.active {
-        opacity: 1;
-      }
-    }
-
-    &:hover {
-      .video-player__seek__handle {
-        opacity: 1;
-      }
-    }
-  }
-
-&.detailed,
-&.fullscreen {
-  .video-player__buttons {
-    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;
-}
-
-.media-spoiler-video-play-icon {
-  border-radius: 100px;
-  color: rgba($primary-text-color, 0.8);
-  font-size: 36px;
-  left: 50%;
-  padding: 5px;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-/* End Video Player */
-
 .account-gallery__container {
   margin: -2px;
   padding: 4px;
@@ -4298,37 +3865,6 @@
   border-radius: 0;
 }
 
-.search-popout {
-  background: $simple-background-color;
-  border-radius: 4px;
-  padding: 10px 14px;
-  padding-bottom: 14px;
-  margin-top: 10px;
-  color: $ui-primary-color;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-
-  h4 {
-    text-transform: uppercase;
-    color: $ui-primary-color;
-    font-size: 13px;
-    font-weight: 500;
-    margin-bottom: 10px;
-  }
-
-  li {
-    padding: 4px 0;
-  }
-
-  ul {
-    margin-bottom: 10px;
-  }
-
-  em {
-    font-weight: 500;
-    color: $ui-base-color;
-  }
-}
-
 noscript {
   text-align: center;
 
@@ -4580,5 +4116,7 @@ noscript {
 @import 'composer';
 @import 'doodle';
 @import 'drawer';
+@import 'media';
+@import 'sensitive';
 @import 'emoji_picker';
 @import 'local_settings';
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
new file mode 100644
index 000000000..048b6bf28
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -0,0 +1,471 @@
+.video-error-cover {
+  align-items: center;
+  background: $base-overlay-background;
+  color: $primary-text-color;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  margin-top: 8px;
+  position: relative;
+  text-align: center;
+  z-index: 100;
+}
+
+.media-spoiler {
+  background: $base-overlay-background;
+  color: $ui-primary-color;
+  border: 0;
+  width: 100%;
+  height: 100%;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: lighten($ui-primary-color, 8%);
+  }
+
+  .status__content > & {
+    margin-top: 15px; // Add margin when used bare for NSFW video player
+  }
+  @include fullwidth-gallery;
+}
+
+.media-spoiler__warning {
+  display: block;
+  font-size: 14px;
+}
+
+.media-spoiler__trigger {
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.media-gallery__gifv__label {
+  display: block;
+  position: absolute;
+  color: $primary-text-color;
+  background: rgba($base-overlay-background, 0.5);
+  bottom: 6px;
+  left: 6px;
+  padding: 2px 6px;
+  border-radius: 2px;
+  font-size: 11px;
+  font-weight: 600;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0.9;
+  transition: opacity 0.1s ease;
+}
+
+.media-gallery__gifv {
+  &.autoplay {
+    .media-gallery__gifv__label {
+      display: none;
+    }
+  }
+
+  &:hover {
+    .media-gallery__gifv__label {
+      opacity: 1;
+    }
+  }
+}
+
+.media-gallery {
+  box-sizing: border-box;
+  margin-top: 8px;
+  overflow: hidden;
+  position: relative;
+  background: $base-shadow-color;
+  width: 100%;
+  height: 100%;
+
+  .detailed-status & {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include fullwidth-gallery;
+}
+
+.media-gallery__item {
+  border: none;
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  position: relative;
+
+  &.standalone {
+    .media-gallery__item-gifv-thumbnail {
+      transform: none;
+    }
+  }
+}
+
+.media-gallery__item-thumbnail {
+  cursor: zoom-in;
+  display: block;
+  text-decoration: none;
+  height: 100%;
+  line-height: 0;
+
+  &,
+  img {
+    width: 100%;
+    object-fit: contain;
+
+    &:not(.letterbox) {
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+
+.media-gallery__gifv {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.media-gallery__item-gifv-thumbnail {
+  cursor: zoom-in;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  object-fit: contain;
+
+  &:not(.letterbox) {
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.media-gallery__item-thumbnail-label {
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  position: absolute;
+}
+
+.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: cover;
+  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;
+}
+
+.video-player {
+  overflow: hidden;
+  position: relative;
+  background: $base-shadow-color;
+  max-width: 100%;
+
+  .detailed-status & {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include fullwidth-gallery;
+
+  video {
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    object-fit: cover;
+    position: relative;
+  }
+
+  &.fullscreen {
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0;
+
+    video {
+      max-width: 100% !important;
+      max-height: 100% !important;
+    }
+  }
+
+  &.inline {
+    video {
+      object-fit: cover;
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &__controls {
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
+    padding: 0 15px;
+    opacity: 0;
+    transition: opacity .1s ease;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  &.inactive {
+    video,
+    .video-player__controls {
+      visibility: hidden;
+    }
+  }
+
+  &__spoiler {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 4;
+    border: 0;
+    background: $base-shadow-color;
+    color: $ui-primary-color;
+    transition: none;
+    pointer-events: none;
+
+    &.active {
+      display: block;
+      pointer-events: auto;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: lighten($ui-primary-color, 8%);
+      }
+    }
+
+    &__title {
+      display: block;
+      font-size: 14px;
+    }
+
+    &__subtitle {
+      display: block;
+      font-size: 11px;
+      font-weight: 500;
+    }
+  }
+
+  &__buttons-bar {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 10px;
+  }
+
+  &__buttons {
+    font-size: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.left {
+      button {
+        padding-left: 0;
+      }
+    }
+
+    &.right {
+      button {
+        padding-right: 0;
+      }
+    }
+
+    button {
+      background: transparent;
+      padding: 2px 10px;
+      font-size: 16px;
+      border: 0;
+      color: rgba($white, 0.75);
+
+      &:active,
+      &:hover,
+      &:focus {
+        color: $white;
+      }
+    }
+  }
+
+  &__time-sep,
+  &__time-total,
+  &__time-current {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__time-current {
+    color: $white;
+    margin-left: 10px;
+  }
+
+  &__time-sep {
+    display: inline-block;
+    margin: 0 6px;
+  }
+
+  &__time-sep,
+  &__time-total {
+    color: $white;
+  }
+
+  &__seek {
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+
+    &::before {
+      content: "";
+      width: 100%;
+      background: rgba($white, 0.35);
+      border-radius: 4px;
+      display: block;
+      position: absolute;
+      height: 4px;
+      top: 10px;
+    }
+
+    &__progress,
+    &__buffer {
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 4px;
+      top: 10px;
+      background: lighten($ui-highlight-color, 8%);
+    }
+
+    &__buffer {
+      background: rgba($white, 0.2);
+    }
+
+    &__handle {
+      position: absolute;
+      z-index: 3;
+      opacity: 0;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      top: 6px;
+      margin-left: -6px;
+      transition: opacity .1s ease;
+      background: lighten($ui-highlight-color, 8%);
+      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+      pointer-events: none;
+
+      &.active {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .video-player__seek__handle {
+        opacity: 1;
+      }
+    }
+  }
+
+&.detailed,
+&.fullscreen {
+  .video-player__buttons {
+    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;
+
+  @include fullwidth-gallery;
+
+  border: 0;
+  display: block;
+}
+
+.media-spoiler-video-play-icon {
+  border-radius: 100px;
+  color: rgba($primary-text-color, 0.8);
+  font-size: 36px;
+  left: 50%;
+  padding: 5px;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/app/javascript/flavours/glitch/styles/components/sensitive.scss b/app/javascript/flavours/glitch/styles/components/sensitive.scss
new file mode 100644
index 000000000..b0a7dfe03
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/sensitive.scss
@@ -0,0 +1,24 @@
+.sensitive-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  z-index: 100;
+}
+
+.sensitive-marker {
+  margin: 0 3px;
+  border-radius: 2px;
+  padding: 2px 6px;
+  color: rgba($primary-text-color, 0.8);
+  background: rgba($base-overlay-background, 0.5);
+  font-size: 12px;
+  line-height: 15px;
+  text-transform: uppercase;
+  opacity: .9;
+  transition: opacity .1s ease;
+
+  .media-gallery:hover & { opacity: 1 }
+}