[TASK] Cleanup DragUploader CSS 55/39555/2
authorBenjamin Kott <benjamin.kott@outlook.com>
Thu, 14 May 2015 20:44:51 +0000 (22:44 +0200)
committerAndreas Fernandez <typo3@scripting-base.de>
Fri, 15 May 2015 06:37:39 +0000 (08:37 +0200)
Releases: master
Resolves: #66963
Change-Id: If2c346be8c19da2585a4758a8ee5dc6f4d7266ec
Reviewed-on: http://review.typo3.org/39555
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
typo3/sysext/backend/Classes/Form/Container/InlineControlContainer.php
typo3/sysext/backend/Resources/Public/JavaScript/DragUploader.js
typo3/sysext/filelist/Resources/Private/Templates/file_list.html
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_draguploader.less [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_module_file_list.less
typo3/sysext/t3skin/Resources/Private/Styles/t3skin.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index ca102e5..277cfad 100644 (file)
@@ -541,7 +541,7 @@ class InlineControlContainer extends AbstractContainer {
                                && $folder->checkActionPermission('add')
                        ) {
                                $maxFileSize = GeneralUtility::getMaxUploadFileSize() * 1024;
-                               $item .= ' <a href="#" class="btn btn-default t3-drag-uploader"
+                               $item .= ' <a href="#" class="btn btn-default t3js-drag-uploader"
                                        style="display:none"
                                        data-dropzone-target="#' . htmlspecialchars($this->inlineStackProcessor->getCurrentStructureDomObjectIdPrefix($this->globalOptions['inlineFirstPid'])) . '"
                                        data-insert-dropzone-before="1"
index 7c81ce2..62758f3 100644 (file)
@@ -27,7 +27,7 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                me.$body = $('body');
                me.$element = $(element);
                me.$trigger = $(me.$element.data('dropzone-trigger'));
-               me.$dropzone = $('<div />').addClass('t3-dropzone').hide();
+               me.$dropzone = $('<div />').addClass('dropzone').hide();
                if (me.$element.data('file-irre-object') && me.$element.nextAll(me.$element.data('dropzone-target')).length !== 0) {
                        me.dropZoneInsertBefore = true;
                        me.$dropzone.insertBefore(me.$element.data('dropzone-target'));
@@ -35,8 +35,8 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                        me.dropZoneInsertBefore = false;
                        me.$dropzone.insertAfter(me.$element.data('dropzone-target'));
                }
-               me.$dropzoneMask = $('<div />').addClass('t3-dropzone-mask').appendTo(me.$dropzone);
-               me.$fileInput = $('<input type="file" multiple name="files[]" />').addClass('t3-upload-file-picker').appendTo(me.$body);
+               me.$dropzoneMask = $('<div />').addClass('dropzone-mask').appendTo(me.$dropzone);
+               me.$fileInput = $('<input type="file" multiple name="files[]" />').addClass('upload-file-picker').appendTo(me.$body);
                me.$fileList = $(me.$element.data('progress-container'));
                me.fileListColumnCount = $('thead tr:first th', me.$fileList).length;
                me.filesExtensionsAllowed = me.$element.data('file-allowed');
@@ -64,7 +64,7 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                me.dragFileIntoDocument = function(event) {
                        event.stopPropagation();
                        event.preventDefault();
-                       me.$body.addClass('t3-drop-in-progress');
+                       me.$body.addClass('drop-in-progress');
                        me.showDropzone();
                        return false;
                };
@@ -72,7 +72,7 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                me.dragAborted = function(event) {
                        event.stopPropagation();
                        event.preventDefault();
-                       me.$body.removeClass('t3-drop-in-progress');
+                       me.$body.removeClass('drop-in-progress');
                        return false;
                };
 
@@ -87,7 +87,7 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                me.handleDrop = function (event) {
                        me.ignoreDrop(event);
                        me.processFiles(event.originalEvent.dataTransfer.files);
-                       me.$dropzone.removeClass('t3-dropzone-drop-ok');
+                       me.$dropzone.removeClass('drop-status-ok');
                };
 
                me.processFiles = function (files) {
@@ -106,11 +106,11 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                };
 
                me.fileInDropzone = function(event) {
-                       me.$dropzone.addClass('t3-dropzone-drop-ok');
+                       me.$dropzone.addClass('drop-status-ok');
                };
 
                me.fileOutOfDropzone = function(event) {
-                       me.$dropzone.removeClass('t3-dropzone-drop-ok');
+                       me.$dropzone.removeClass('drop-status-ok');
                };
 
                // bind file picker to default upload button
@@ -133,13 +133,26 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                        me.$dropzoneMask.on('dragleave', me.fileOutOfDropzone);
                        me.$dropzoneMask.on('drop', me.handleDrop);
 
-                       me.$dropzone.prepend('<h4>' + TYPO3.lang['file_upload.dropzonehint.title'] + '</h4><p>' + TYPO3.lang['file_upload.dropzonehint.message'] + '</p>')
+                       me.$dropzone.prepend('' +
+                                       '<div class="dropzone-hint">' +
+                                               '<div class="dropzone-hint-media">' +
+                                                       '<div class="dropzone-hint-icon"></div>' +
+                                               '</div>' +
+                                               '<div class="dropzone-hint-body">' +
+                                                       '<h3 class="dropzone-hint-title">' +
+                                                               TYPO3.lang['file_upload.dropzonehint.title'] +
+                                                       '</h3>' +
+                                                       '<p class="dropzone-hint-message">' +
+                                                               TYPO3.lang['file_upload.dropzonehint.message'] +
+                                                       '</p>' +
+                                               '</div>' +
+                                       '</div>')
                                .click(function(){me.$fileInput.click()});
-                       $('<span />').addClass('t3-icon t3-icon-actions t3-icon-actions-close t3-dropzone-close').html('&nbsp;').click(me.hideDropzone).appendTo(me.$dropzone);
+                       $('<span />').addClass('dropzone-close').click(me.hideDropzone).appendTo(me.$dropzone);
 
                        // no filelist then create own progress table
                        if (me.$fileList.length === 0) {
-                               me.$fileList = $('<table />').attr('id', 'typo3-filelist').addClass('table table-striped table-hover t3-upload-queue').html('<tbody></tbody>').hide();
+                               me.$fileList = $('<table />').attr('id', 'typo3-filelist').addClass('table table-striped table-hover upload-queue').html('<tbody></tbody>').hide();
                                if (me.dropZoneInsertBefore) {
                                        me.$fileList.insertAfter(me.$dropzone);
                                } else {
@@ -183,15 +196,14 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                me.file = file;
                me.override = override;
 
-               me.$row = $('<tr />').addClass('t3-upload-queue-item uploading');
+               me.$row = $('<tr />').addClass('upload-queue-item uploading');
                me.$iconCol = $('<td />').addClass('col-icon').appendTo(me.$row);
                me.$fileName = $('<td />').text(file.name).appendTo(me.$row);
-               me.$progress = $('<td />').addClass('t3-upload-queue-progress')
-                                                                 .attr('colspan', me.dragUploader.fileListColumnCount-2).appendTo(me.$row);
-               me.$progressContainer = $('<div />').addClass('t3-upload-queue-progress').appendTo(me.$progress);
-               me.$progressBar = $('<div />').addClass('t3-upload-queue-progress-bar').appendTo(me.$progressContainer);
-               me.$progressPercentage = $('<span />').addClass('t3-upload-queue-progress-percentage').appendTo(me.$progressContainer);
-               me.$progressMessage = $('<span />').addClass('t3-upload-queue-progress-message').appendTo(me.$progressContainer);
+               me.$progress = $('<td />').attr('colspan', me.dragUploader.fileListColumnCount-2).appendTo(me.$row);
+               me.$progressContainer = $('<div />').addClass('upload-queue-progress').appendTo(me.$progress);
+               me.$progressBar = $('<div />').addClass('upload-queue-progress-bar').appendTo(me.$progressContainer);
+               me.$progressPercentage = $('<span />').addClass('upload-queue-progress-percentage').appendTo(me.$progressContainer);
+               me.$progressMessage = $('<span />').addClass('upload-queue-progress-message').appendTo(me.$progressContainer);
 
                me.updateMessage = function(message) {
                        me.$progressMessage.text(message);
@@ -224,7 +236,7 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
 
                me.updateProgress = function(event) {
                        var percentage = Math.round((event.loaded / event.total) * 100) + '%'
-                       me.$progressBar.width(percentage);
+                       me.$progressBar.outerWidth(percentage);
                        me.$progressPercentage.text(percentage);
                        me.dragUploader.$trigger.trigger('updateProgress', [me, percentage, event]);
                };
@@ -236,7 +248,7 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                                me.$fileName.text(data.result.upload[0].name);
                                me.$progressPercentage.text('');
                                me.$progressMessage.text('100%');
-                               me.$progressBar.width('100%');
+                               me.$progressBar.outerWidth('100%');
 
                                // replace file icon
                                if (data.result.upload[0].iconClasses) {
@@ -279,10 +291,10 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                        $('<td />').text(me.fileSizeAsString(fileInfo.size)).appendTo(me.$row);
                        var permissions = '';
                        if (fileInfo.permissions.read) {
-                               permissions += '<span class="typo3-red"><strong>R</strong></span>';
+                               permissions += '<strong class="text-danger">R</strong>';
                        }
                        if (fileInfo.permissions.write) {
-                               permissions += '<span class="typo3-red"><strong>W</strong></span>';
+                               permissions += '<strong class="text-danger">W</strong>';
                        }
                        $('<td />').html(permissions).appendTo(me.$row);
                        $('<td />').text('-').appendTo(me.$row);
@@ -313,11 +325,11 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                };
 
                // position queue item in file list
-               if ($('tbody tr.t3-upload-queue-item', me.dragUploader.$fileList).length === 0) {
+               if ($('tbody tr.upload-queue-item', me.dragUploader.$fileList).length === 0) {
                        me.$row.prependTo($('tbody', me.dragUploader.$fileList));
                        me.$row.addClass('last');
                } else {
-                       me.$row.insertBefore($('tbody tr.t3-upload-queue-item:first', me.dragUploader.$fileList));
+                       me.$row.insertBefore($('tbody tr.upload-queue-item:first', me.dragUploader.$fileList));
                }
 
                // set dummy file icon
@@ -404,7 +416,7 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'TYPO3/CMS/Lang/Lang'], func
                        })
                };
 
-               $('.t3-drag-uploader').dragUploader();
+               $('.t3js-drag-uploader').dragUploader();
 
        };
 
index 4d1ce46..f70bfc3 100644 (file)
@@ -1,5 +1,5 @@
 <!-- ###FULLDOC### begin -->
-<div class="typo3-fullDoc t3-drag-uploader" data-target-folder="###FOLDER_IDENTIFIER###" data-progress-container="#typo3-filelist"
+<div class="typo3-fullDoc t3js-drag-uploader" data-target-folder="###FOLDER_IDENTIFIER###" data-progress-container="#typo3-filelist"
         data-dropzone-trigger="#button-upload" data-dropzone-target="#typo3-inner-docbody h1:first"
         data-file-deny-pattern="###FILEDENYPATERN###" data-max-file-size="###MAXFILESIZE###">
        <div id="typo3-docheader">
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_draguploader.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_draguploader.less
new file mode 100644 (file)
index 0000000..3e2438b
--- /dev/null
@@ -0,0 +1,225 @@
+//
+// Dropzone Variables
+//
+@dropzone-text: #333333;
+@dropzone-border: #cccccc;
+@dropzone-margin: 15px 0;
+@dropzone-hover-border:  #999999;
+
+@dropzone-hint-title-size: 12px;
+@dropzone-hint-title-weight: bold;
+
+@dropzone-close-height: 26px;
+@dropzone-close-width: 26px;
+@dropzone-close-size: 14px;
+@dropzone-close-bg: #eaeaea;
+@dropzone-close-text: @dropzone-text;
+@dropzone-close-hover-bg: @brand-danger;
+@dropzone-close-hover-text: #ffffff;
+
+@dropzone-icon-size: 16px;
+@dropzone-icon-height: 40px;
+@dropzone-icon-width: 40px;
+@dropzone-icon-radius: 50%;
+@dropzone-icon-bg: #eeeeee;
+
+@dropzone-icon-ok-text: #ffffff;
+@dropzone-icon-ok-bg: @brand-success;
+
+
+//
+// Dropzone
+//
+.dropzone {
+       position: relative;
+       cursor: pointer;
+       margin: @dropzone-margin;
+       padding: 1.25em;
+       padding-right: @dropzone-close-width + 20px;
+       color: @dropzone-text;
+       border: 1px dashed @dropzone-border;
+       .transition(all 0.3s ease-in-out);
+       &:hover {
+               border-color: @dropzone-hover-border;
+       }
+}
+.dropzone-mask {
+       position: absolute;
+       left: 0;
+       right: 0;
+       bottom: 0;
+       top: 0;
+}
+
+
+//
+// Dropzone Close
+//
+.dropzone-close {
+       cursor: pointer;
+       position: absolute;
+       top: 5px;
+       right: 5px;
+       height: @dropzone-close-height;
+       width: @dropzone-close-width;
+       font-family: FontAwesome;
+       font-size: @dropzone-close-size;
+       line-height: @dropzone-close-height;
+       text-align: center;
+       text-rendering: auto;
+       -webkit-font-smoothing: antialiased;
+       -moz-osx-font-smoothing: grayscale;
+       transform: translate(0, 0);
+       overflow: hidden;
+       background-color: @dropzone-close-bg;
+       color: @dropzone-close-text;
+       &:hover {
+               color: @dropzone-close-hover-text;
+               background-color: @dropzone-close-hover-bg;
+       }
+       &:before {
+               content: "\f00d";
+       }
+}
+
+
+//
+// Dropzone Hint
+//
+// Markup:
+// <div class="dropzone-hint">
+//   <div class="dropzone-hint-media">
+//     <span class="dropzone-hint-icon"></span>
+//   </div>
+//   <div class="dropzone-hint-body">
+//     <h3 class="dropzone-hint-title">Title</h3>
+//     <p class="dropzone-hint-message">Message</h3>
+//   </div>
+// </div>
+//
+.dropzone-hint {
+       display: table;
+}
+.dropzone-hint-media,
+.dropzone-hint-body {
+       display: table-cell;
+       vertical-align: middle;
+}
+.dropzone-hint-body {
+       *:first-child {
+               margin-top: 0;
+       }
+       *:last-child {
+               margin-bottom: 0;
+       }
+}
+.dropzone-hint-media {
+       padding-right: 1em;
+}
+.dropzone-hint-icon {
+       height: @dropzone-icon-height;
+       width: @dropzone-icon-width;
+       text-align: center;
+       line-height: @dropzone-icon-height;
+       font-size: @dropzone-icon-size;
+       background-color: @dropzone-icon-bg;
+       border-radius: @dropzone-icon-radius;
+       font-family: FontAwesome;
+       text-rendering: auto;
+       -webkit-font-smoothing: antialiased;
+       -moz-osx-font-smoothing: grayscale;
+       transform: translate(0, 0);
+       &:before {
+               content: "\f093";
+       }
+}
+.dropzone-hint-title {
+       font-size: @dropzone-hint-title-size;
+       font-weight: @dropzone-hint-title-weight;
+       margin-bottom: 0.25em;
+}
+
+
+//
+// Drop progress
+//
+.drop-status-ok {
+       .dropzone-hint-icon {
+               color: @dropzone-icon-ok-text;
+               background: @dropzone-icon-ok-bg;
+       }
+}
+.drop-in-progress {
+       .dropzone-hint-icon {
+               &:before {
+                       content: "\f063";
+               }
+       }
+}
+
+
+//
+// Upload Variables
+//
+@upload-queue-margin: @dropzone-margin;
+@upload-queue-progress-bg: @brand-success;
+@upload-queue-progress-uploading-bg: @brand-info;
+@upload-queue-progress-error-bg: @brand-danger;
+
+
+//
+// Upload queue
+//
+.upload-queue {
+       margin: @upload-queue-margin;
+}
+.upload-queue-progress {
+       position: relative;
+       padding: 5px;
+       color: #ffffff;
+       background-color: #999999;
+       border: 1px solid rgba(0,0,0,0.15);
+       text-align: right;
+}
+.upload-queue-progress-bar {
+       position: absolute;
+       z-index: 1;
+       top: 0;
+       left: 0;
+       bottom: 0;
+       background-color: @upload-queue-progress-bg;
+}
+.upload-queue-progress-percentage,
+.upload-queue-progress-message {
+       display: inline;
+       position: relative;
+       z-index: 2;
+}
+
+
+//
+// Upload filepicker
+//
+.upload-file-picker {
+       position: fixed;
+       bottom: 0;
+       right: 0;
+       height: 1px;
+       width: 1px;
+       visibility: hidden;
+}
+
+
+//
+// Upload status
+//
+.uploading {
+       .upload-queue-progress-bar {
+               background-color: @upload-queue-progress-uploading-bg;
+       }
+}
+.error {
+       .upload-queue-progress-bar {
+               background-color: @upload-queue-progress-error-bg;
+       }
+}
\ No newline at end of file
index b261c7b..beb8290 100644 (file)
@@ -9,101 +9,4 @@ table#typo3-filelist tr td div.typo3-editCtrl {
 
 #typo3-inner-docbody {
        transition:border 0.2s ease;
-}
-.t3-dropzone {
-       border:1px dashed #666666;
-       background:#DEDEDE;
-       text-align: center;
-       color: #616161;
-       margin-bottom: 1px;
-       position: relative;
-       cursor: pointer;
-       margin-top: 10px;
-}
-.t3-dropzone .t3-dropzone-close {
-       position: absolute;
-       top: 2px;
-       right: 2px;
-       cursor: pointer;
-       font-size: 20px;
-}
-.t3-drop-in-progress .t3-dropzone {
-       box-shadow: 0 0 10px 0 #888;
-       color: #000;
-}
-.t3-drop-in-progress .t3-dropzone .t3-dropzone-mask {
-       position: absolute;
-       left: 0;
-       right: 0;
-       bottom: 0;
-       top: 0;
-}
-.t3-dropzone.t3-dropzone-drop-ok {
-       background: #EBEBEB;
-}
-.t3-upload-file-picker {
-       position: fixed;
-       bottom: 0;
-       right: 0;
-       height: 1px;
-       width: 1px;
-       visibility: hidden;
-}
-table.t3-upload-queue {
-       margin: 10px 0;
-}
-table#typo3-filelist tr.t3-upload-queue-item.last td {
-       border-bottom: 1px solid #666666;
-}
-table#typo3-filelist.t3-upload-queue tr.t3-upload-queue-item.last td {
-       border-bottom: 1px solid #D7D7D7;
-}
-table#typo3-filelist tr.t3-upload-queue-item.uploading td {
-       color: #9D9D9D;
-}
-table#typo3-filelist tr.t3-upload-queue-item.error td {
-       color: #BF383F;
-}
-table#typo3-filelist tr.t3-upload-queue-item td.t3-upload-queue-progress {
-       color: #FFF;
-       padding: 0;
-}
-table#typo3-filelist tr.t3-upload-queue-item.uploading td.t3-upload-queue-progress {
-       background-color: #F2CEB0;
-       color: #000;
-}
-table#typo3-filelist tr.t3-upload-queue-item.error td.t3-upload-queue-progress {
-       background-color: #E5B6B9;
-       color: #F7F7F7;
-}
-div.t3-upload-queue-progress {
-       position: relative;
-       text-align: right;
-       padding: 5px 3px;
-       border:1px solid #C6C6C6;
-}
-.t3-upload-queue-progress-percentage,
-.t3-upload-queue-progress-message {
-       display: inline;
-       position: relative;
-       z-index: 2;
-       margin-right: 4px;
-}
-.t3-upload-queue-progress-message {
-       font-weight: bold;
-}
-.t3-upload-queue-progress-bar {
-       position: absolute;
-       z-index: 1;
-       top: 0;
-       left: -2px;
-       bottom:0;
-       background-color: #6EA757;
-       border: 1px solid #FFF;
-}
-.uploading .t3-upload-queue-progress-bar {
-       background-color: #F38B36;
-}
-.error .t3-upload-queue-progress-bar {
-       background-color: #BF383F;
-}
+}
\ No newline at end of file
index af9ecd8..36581b1 100644 (file)
 @import "TYPO3/_element_label.less";
 @import "TYPO3/_element_badges.less";
 @import "TYPO3/_element_buttons.less";
+@import "TYPO3/_element_draguploader.less";
 @import "TYPO3/_fonts.less";
 @import "TYPO3/_icons.less";
 @import "TYPO3/_login_screen.less";
index c660704..6e1a617 100644 (file)
@@ -10652,6 +10652,139 @@ a.badge-danger:hover {
 .btn-checkbox input[type=checkbox]:checked + .fa:before {
   content: "\f00c";
 }
+.dropzone {
+  position: relative;
+  cursor: pointer;
+  margin: 15px 0;
+  padding: 1.25em;
+  padding-right: 46px;
+  color: #333333;
+  border: 1px dashed #cccccc;
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.dropzone:hover {
+  border-color: #999999;
+}
+.dropzone-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+}
+.dropzone-close {
+  cursor: pointer;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  height: 26px;
+  width: 26px;
+  font-family: FontAwesome;
+  font-size: 14px;
+  line-height: 26px;
+  text-align: center;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transform: translate(0, 0);
+  overflow: hidden;
+  background-color: #eaeaea;
+  color: #333333;
+}
+.dropzone-close:hover {
+  color: #ffffff;
+  background-color: #c83c3c;
+}
+.dropzone-close:before {
+  content: "\f00d";
+}
+.dropzone-hint {
+  display: table;
+}
+.dropzone-hint-media,
+.dropzone-hint-body {
+  display: table-cell;
+  vertical-align: middle;
+}
+.dropzone-hint-body *:first-child {
+  margin-top: 0;
+}
+.dropzone-hint-body *:last-child {
+  margin-bottom: 0;
+}
+.dropzone-hint-media {
+  padding-right: 1em;
+}
+.dropzone-hint-icon {
+  height: 40px;
+  width: 40px;
+  text-align: center;
+  line-height: 40px;
+  font-size: 16px;
+  background-color: #eeeeee;
+  border-radius: 50%;
+  font-family: FontAwesome;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transform: translate(0, 0);
+}
+.dropzone-hint-icon:before {
+  content: "\f093";
+}
+.dropzone-hint-title {
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 0.25em;
+}
+.drop-status-ok .dropzone-hint-icon {
+  color: #ffffff;
+  background: #79a548;
+}
+.drop-in-progress .dropzone-hint-icon:before {
+  content: "\f063";
+}
+.upload-queue {
+  margin: 15px 0;
+}
+.upload-queue-progress {
+  position: relative;
+  padding: 5px;
+  color: #ffffff;
+  background-color: #999999;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  text-align: right;
+}
+.upload-queue-progress-bar {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: #79a548;
+}
+.upload-queue-progress-percentage,
+.upload-queue-progress-message {
+  display: inline;
+  position: relative;
+  z-index: 2;
+}
+.upload-file-picker {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  width: 1px;
+  visibility: hidden;
+}
+.uploading .upload-queue-progress-bar {
+  background-color: #6daae0;
+}
+.error .upload-queue-progress-bar {
+  background-color: #c83c3c;
+}
 @font-face {
   font-family: 'Share';
   src: url('../../Fonts/share-bold-webfont.eot');
@@ -13301,103 +13434,6 @@ table#typo3-filelist tr td div.typo3-editCtrl {
 #typo3-inner-docbody {
   transition: border 0.2s ease;
 }
-.t3-dropzone {
-  border: 1px dashed #666666;
-  background: #DEDEDE;
-  text-align: center;
-  color: #616161;
-  margin-bottom: 1px;
-  position: relative;
-  cursor: pointer;
-  margin-top: 10px;
-}
-.t3-dropzone .t3-dropzone-close {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  cursor: pointer;
-  font-size: 20px;
-}
-.t3-drop-in-progress .t3-dropzone {
-  box-shadow: 0 0 10px 0 #888;
-  color: #000;
-}
-.t3-drop-in-progress .t3-dropzone .t3-dropzone-mask {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-}
-.t3-dropzone.t3-dropzone-drop-ok {
-  background: #EBEBEB;
-}
-.t3-upload-file-picker {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  height: 1px;
-  width: 1px;
-  visibility: hidden;
-}
-table.t3-upload-queue {
-  margin: 10px 0;
-}
-table#typo3-filelist tr.t3-upload-queue-item.last td {
-  border-bottom: 1px solid #666666;
-}
-table#typo3-filelist.t3-upload-queue tr.t3-upload-queue-item.last td {
-  border-bottom: 1px solid #D7D7D7;
-}
-table#typo3-filelist tr.t3-upload-queue-item.uploading td {
-  color: #9D9D9D;
-}
-table#typo3-filelist tr.t3-upload-queue-item.error td {
-  color: #BF383F;
-}
-table#typo3-filelist tr.t3-upload-queue-item td.t3-upload-queue-progress {
-  color: #FFF;
-  padding: 0;
-}
-table#typo3-filelist tr.t3-upload-queue-item.uploading td.t3-upload-queue-progress {
-  background-color: #F2CEB0;
-  color: #000;
-}
-table#typo3-filelist tr.t3-upload-queue-item.error td.t3-upload-queue-progress {
-  background-color: #E5B6B9;
-  color: #F7F7F7;
-}
-div.t3-upload-queue-progress {
-  position: relative;
-  text-align: right;
-  padding: 5px 3px;
-  border: 1px solid #C6C6C6;
-}
-.t3-upload-queue-progress-percentage,
-.t3-upload-queue-progress-message {
-  display: inline;
-  position: relative;
-  z-index: 2;
-  margin-right: 4px;
-}
-.t3-upload-queue-progress-message {
-  font-weight: bold;
-}
-.t3-upload-queue-progress-bar {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: -2px;
-  bottom: 0;
-  background-color: #6EA757;
-  border: 1px solid #FFF;
-}
-.uploading .t3-upload-queue-progress-bar {
-  background-color: #F38B36;
-}
-.error .t3-upload-queue-progress-bar {
-  background-color: #BF383F;
-}
 .t3icon-ext-upload {
   background: url('../../../../icons/gfx/upload.gif') 1px 1px no-repeat !important;
 }