Dropzone style

[pixel-calc.git] / public_html / index.php
diff --git a/public_html/index.php b/public_html/index.php

index 4e90b7b..1c204dd 100644 (file)
--- a/public_html/index.php
+++ b/public_html/index.php
@@ -161,6 +161,43 @@
                  text-decoration: none;
                  color: #333;
              }
+            
+            #dropzone {
+                text-align:center;
+            }
+            
+            .dz-image img{
+                height:100%;
+                width: 100%;
+                margin: 0 auto;
+                image-rendering: pixelated;
+                object-fit: contain;
+            }
+            
+            .dropzone .dz-preview.dz-image-preview {
+                background: none;
+            }
+            
+            .dropzone .dz-preview {
+                width: 200px;
+                height: 200px;
+            }
+            
+            .dropzone .dz-preview .dz-image {
+                width: auto;
+                height: auto;
+                overflow: visible;
+            }
+            
+            .dropzone .dz-preview:hover .dz-image img {
+                -webkit-transform: scale(1.05, 1.05);
+                -moz-transform: scale(1.05, 1.05);
+                -ms-transform: scale(1.05, 1.05);
+                -o-transform: scale(1.05, 1.05);
+                transform: scale(1.05, 1.05);
+                -webkit-filter: blur(0px);
+                filter: blur(0px);
+            }
          </style>
      </head>
      <body>
@@ -258,7 +295,7 @@
          <script>
              Dropzone.options.dropzone = {
                  url: "upload.php",
-                thumbnailHeight: 120,
+                thumbnailHeight: 200,
                  init: function() {
                      this.on("success", function(file, response) {
                          $("#sprite").append('<img src="uploads/' + response + '.png"><input type="hidden" name="hash" value="' + response + '"></input> <input id="spritename" name="spritename" class="form-control" type="text" placeholder="Name" autocomplete="off"></input>');