Refactor scss (#6913)

* Refactoring scss

introduce scss variables for the media modal
fix css block structure corresponding to react components
fix flex layouts
remove background image of the loaded image on the media modal

* Fix typo

app/javascript/styles/mastodon/components.scss

@@ -1435,14 +1435,19 @@
   position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  &.image-loader--loading {
+  .image-loader__preview-canvas {
-    display: flex;
+    max-width: $media-modal-media-max-width;
-    align-content: center;
+    max-height: $media-modal-media-max-height;
+    background: url('../images/void.png') repeat;
+    object-fit: contain;
+  }
 
-    .image-loader__preview-canvas {
+  &.image-loader--loading .image-loader__preview-canvas {
-      filter: blur(2px);
+    filter: blur(2px);
-    }
   }
 
   &.image-loader--amorphous .image-loader__preview-canvas {
@@ -1455,7 +1460,16 @@
   width: 100%;
   height: 100%;
   display: flex;
-  align-content: center;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+  }
 }
 
 .navigation-bar {
@@ -3422,27 +3436,6 @@ a.status-card {
   width: 100%;
   height: 100%;
   position: relative;
-
-  img,
-  canvas,
-  video {
-    max-width: 100%;
-    /*
-    put margins on top and bottom of image to avoid the screen coverd by
-    image.
-     */
-    max-height: 80%;
-    width: auto;
-    height: auto;
-    margin: auto;
-  }
-
-  img,
-  canvas {
-    display: block;
-    background: url('../images/void.png') repeat;
-    object-fit: contain;
-  }
 }
 
 .media-modal__closer {

app/javascript/styles/mastodon/variables.scss

@@ -30,3 +30,8 @@ $ui-highlight-color: $classic-highlight-color !default;        // Vibrant
 
 // Language codes that uses CJK fonts
 $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;