Modification du style de la dropzone et de la barre d'actions

view/adminhtml/templates/importer_productimages_index.phtml

@@ -18,7 +18,7 @@ use \NicolasBejean\Importer\Block\Adminhtml\ProductImages\Index;
         </div>
         <span><?php echo __('OR') ?></span>
         <div class="fileinput-button">
-            <label for="file"><?php echo __('Select files') ?></label>
+            <label for="file" class="action-default"><?php echo __('Select files') ?></label>
             <input type="file" name="files[]" id="file" />
         </div>
         <p><?php echo __('File size limit : 10 MB') ?></p>

view/adminhtml/web/css/dropzone.css

+/**
+ * Définition de la dropZone
+ */
 .importer .dropzoneWrapper {
     width: 80%;
     margin: 0 auto;
@@ -5,62 +8,63 @@
 }
 
 .importer .dropWrapper {
-    background: radial-gradient(ellipse at center, #EB6A5A 0, #c9402f 100%);
     padding: 2em 0 3em 0;
     margin-bottom: 3em;
-    border: 5px dashed white;
-    color: white;
-    transition: all 0.3s ease-out;
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 .25em 0 rgba(0, 0, 0, .25);
 }
 
 .importer .dropWrapper .cloud_upload {
     font-size: 10em;
 }
 
-.importer .dropzoneWrapper .fileinput-button {
-    height: 50px;
-    margin: 20px auto;
-    position: relative;
-    width: 200px;
-}
-
+/**
+ * Définition du bouton file
+ */
 .importer .dropzoneWrapper label, .dropzoneWrapper input {
     cursor: pointer;
     display: block;
     height: 50px;
-    left: 0;
-    position: absolute;
-    top: 0;
     width: 100%;
-    border-radius: 5px;
 }
 
 .importer .dropzoneWrapper label {
-    background: #fff;
-    color:#EB6A5A;
-    display: inline-block;
     font-size: 1.2em;
     line-height: 50px;
-    padding: 0;
-    text-align: center;
-    white-space: nowrap;
     text-transform: uppercase;
-    font-weight: 400;
-    box-shadow: 0 1px 1px gray;
+    padding: 0;
 }
 
 .importer .dropzoneWrapper input[type=file] {
     opacity: 0;
 }
 
+.importer .dropzoneWrapper .fileinput-button {
+    height: 50px;
+    margin: 20px auto;
+    position: relative;
+    width: 200px;
+}
+
+/**
+ * Détails de la dropzone
+ */
+.importer .dropWrapper {
+    border: 1px solid #adadad;
+    background-color: #efefef;
+    transition: all 0.3s ease-out;
+    border-radius: 6px;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
+}
+
 .importer .dropWrapper.dz-drag-hover {
-    color: #EB6A5A;
-    background: #fff;
-    border: 5px solid #EB6A5A;
+    color: #41362f;
+    border-color: #41362f;
+    background-color: #dfdfdf;
     transition: all 0.3s ease-out;
 }
 
+/**
+ * Détails de la preview
+ */
 .importer .previewWrapper {
     width: 80%;
     margin: 3em auto 0 auto;
@@ -89,25 +93,6 @@
     border: 0;
 }
 
-.importer .actions {
-    text-align: right;
-    width: 80%;
-}
-
-.importer .actions .btn {
-    margin-left: 10px;
-}
-
-.importer .actions .btn.start {
-    background-color: #EB6A5A;
-    color: #fff;
-    font-weight: 300;
-}
-
-.importer .actions .btn.start:hover {
-    background-color: #c9402f;
-}
-
 .importer .material-card {
     position: relative;
     height: 0;
@@ -238,4 +223,17 @@
 
 .importer .material-card.Pink .mc-btn-action:hover {
     background-color: #EB6A5A;
-}
\ No newline at end of file
+}
+
+/**
+ * Définition de barre actions
+ */
+.importer .actions {
+    text-align: right;
+    width: 80%;
+    margin: 0 auto 2vh auto;
+}
+
+.importer .actions .btn {
+    margin-left: 10px;
+}