Media display improvements

 - built in fullwidth styling
 - letterbox settings toggle
 - media no longer counts towards height when making toot-collapsing
measurements

2 files changed, 34 insertions, 120 deletions

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 145854697..304a056b3 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -3640,10 +3640,17 @@ button.icon-button.active i.fa-retweet {
 /* Media Gallery */
 .media-gallery {
   box-sizing: border-box;
-  margin-top: 8px;
+  margin-top: 15px;
+  margin-left: -68px;
   overflow: hidden;
   position: relative;
-  width: 100%;
+  width: calc(100% + 80px);
+  background: $base-shadow-color;
+
+  .detailed-status & {
+    margin-left:-10px;
+    width: calc(100% + 22px);
+  }
 }
 
 .media-gallery__item {
@@ -3655,18 +3662,20 @@ button.icon-button.active i.fa-retweet {
 }
 
 .media-gallery__item-thumbnail {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
   cursor: zoom-in;
   display: flex;
   align-items: center;
   text-decoration: none;
+  width: 100%;
   height: 100%;
 
-  &,
   img {
     width: 100%;
+
+    &:not(.letterbox) {
+      height: 100%;
+      object-fit: cover;
+    }
   }
 }
 
@@ -3680,12 +3689,13 @@ button.icon-button.active i.fa-retweet {
 .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;
+
+  &:not(.letterbox) {
+    height: 100%;
+    object-fit: cover;
+  }
 }
 
 .media-gallery__item-thumbnail-label {
@@ -3698,22 +3708,27 @@ button.icon-button.active i.fa-retweet {
 
 /* Status Video Player */
 .status__video-player {
-  background: $base-overlay-background;
+  display: flex;
+  align-items: center;
+  background: $base-shadow-color;
   box-sizing: border-box;
   cursor: default; /* May not be needed */
-  margin-top: 8px;
+  margin-top: 15px;
+  margin-left:-68px;
+  width: calc(100% + 80px);
   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;
+
+  &:not(.letterbox) {
+    height: 100%;
+    object-fit: cover;
+  }
 }
 
 .status__video-player-expand,
@@ -3754,7 +3769,9 @@ button.icon-button.active i.fa-retweet {
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
-  margin-top: 8px;
+  margin-top: 15px;
+  margin-left:-68px;
+  width: calc(100% + 80px);
   position: relative;
 }
 
diff --git a/app/javascript/styles/custom.scss b/app/javascript/styles/custom.scss
index 6a18fd628..97a981243 100644
--- a/app/javascript/styles/custom.scss
+++ b/app/javascript/styles/custom.scss
@@ -1,104 +1 @@
 @import 'application';
-
-.muted {
-  .status__content p, .status__content a {
-    color: lighten($ui-base-color, 35%);
-  }
-
-  .status__display-name strong {
-    color: lighten($ui-base-color, 35%);
-  }
-}
-
-.status time:after,
-.detailed-status__datetime span:after {
-  font: normal normal normal 14px/1 FontAwesome;
-  content: "\00a0\00a0\f08e";
-}
-
-.compose-form__buttons button.active:last-child {
-  color:$ui-secondary-color;
-  background-color: $ui-highlight-color;
-  border-radius:3px;
-}
-
-.about-body .mascot {
-  display:none;
-}
-
-.screenshot-with-signup {
-  min-height:300px;
-}
-
-.screenshot-with-signup .closed-registrations-message,
-.screenshot-with-signup form {
-  background-color: rgba(0,0,0,0.7);
-  margin:auto;
-}
-
-.screenshot-with-signup .closed-registrations-message .clock {
-  font-size:150%;
-}
-
-.drawer .drawer__inner {
-  overflow: visible;
-}
-
-.column {
-  // trying to fix @mdhughes safari problem
-  max-height:100vh;
-}
-
-
-
-.media-gallery {
-  height:auto !important;
-  max-height:250px;
-  position:relative;
-  margin-top:20px;
-  margin-left:-68px;
-  width: calc(100% + 80px);
-}
-
-.media-gallery:before{
-  content: "";
-  display: block;
-  padding-top: 100%;
-}
-
-.media-gallery__item,
-.media-gallery .media-spoiler{
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0 !important;
-  position:absolute;
-}
-
-.media-spoiler-video:before {
-  content:"";
-  display:block;
-  padding-top:100%;
-}
-
-.media-spoiler-video,
-.status__video-player,
-.detailed-status > .media-spoiler,
-.status > .media-spoiler {
-  height:auto !important;
-  max-height:250px;
-  position:relative;
-  margin-top:20px;
-  margin-left:-68px;
-  width: calc(100% + 80px) !important;
-}
-
-.status__video-player-video {
-  transform:unset;
-}
-
-.detailed-status > .media-spoiler,
-.status > .media-spoiler {
-  height:250px !important;
-  vertical-align:middle;
-}