fix wrong img bottom padding on load

qjebbs · Jun 3, 2020 · 1093eda · 1093eda
1 parent 4c2ff69
commit 1093eda
Showing 1 changed file with 39 additions and 25 deletions.
diff --git a/templates/css/preview.css b/templates/css/preview.css
@@ -138,7 +138,7 @@ body.vscode-light {
 }
 
 #ctrl-container {
-    display: none;
+    opacity: 0;
     width: 100%;
     height: 3rem;
     position: fixed;
@@ -147,7 +147,7 @@ body.vscode-light {
 }
 
 body:hover #ctrl-container {
-    display: inherit;
+    opacity: inherit;
 }
 
 #controls {
@@ -250,11 +250,13 @@ body:hover #ctrl-container {
 }
 
 @keyframes stretchdelay {
+
     0%,
     40%,
     100% {
         transform: scaleY(0.4);
     }
+
     20% {
         transform: scaleY(1.0);
     }
@@ -281,11 +283,13 @@ body:hover #ctrl-container {
 }
 
 @keyframes scaledelay {
+
     0%,
     40%,
     100% {
         transform: scale(0.4);
     }
+
     20% {
         transform: scale(1.0);
     }
@@ -305,38 +309,48 @@ img[src=""] {
 
 /* The Modal (background) */
 .modal {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 1; /* Sit on top */
+    display: none;
+    /* Hidden by default */
+    position: fixed;
+    /* Stay in place */
+    z-index: 1;
+    /* Sit on top */
     left: 0;
     top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
-  }
-
-  /* Modal Content/Box */
-  .modal-content {
+    width: 100%;
+    /* Full width */
+    height: 100%;
+    /* Full height */
+    overflow: auto;
+    /* Enable scroll if needed */
+    background-color: rgb(0, 0, 0);
+    /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.75);
+    /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modal-content {
     background-color: #fefefe;
     color: black;
-    margin: 15% auto; /* 15% from the top and centered */
+    margin: 15% auto;
+    /* 15% from the top and centered */
     padding: 20px;
     border-radius: 5px;
-    width: 80%; /* Could be more or less, depending on screen size */
-  }
-
-  /* The Close Button */
-  .close {
+    width: 80%;
+    /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
     color: #777;
     float: right;
     font-weight: bold;
-  }
-  
-  .close:hover,
-  .close:focus {
+}
+
+.close:hover,
+.close:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
-  }
+}