💄 Site > Preview > Add style

site/src/components/file/style.styl

@@ -5,7 +5,6 @@
     left 315px
     right 0
     height 100%
-    background rgba(0, 255, 0, 0.3)
 
 header
     position absolute
@@ -111,3 +110,26 @@ header
 
         .directory
             opacity 0.3
+
+.preview
+    position absolute
+    top 50px
+    right 0
+    bottom 0
+    left 0
+    background #2d2d49
+    text-align center
+
+    .inner
+        display flex
+        align-items center
+        justify-content center
+        position absolute
+        top 50px
+        right 50px
+        bottom 50px
+        left 50px
+
+    img
+        max-width 100%
+        max-height 100%

site/src/components/file/template.html

@@ -35,8 +35,10 @@
 
     <!-- Preview -->
     <div class="preview" v-if="isImage">
+        <div class="inner">
             <img :src="downloadUrl">
         </div>
+    </div>
 
     <!-- Can't read -->
     <div class="cant-read" v-if="!isCode && !isImage">