issue #44 uploader css fix

lib/scripts/fileuploaderextended.js

@@ -78,13 +78,13 @@ qq.FileUploaderExtended = function(o){
                 '<div class="qq-upload-button">Upload a file</div>' +
                 '<ul class="qq-upload-list"></ul>' +
                 '<label class="check" for="dw__ow"><input id="dw__ow" type="checkbox" value="1" name="ow"><span>Overwrite existing file</span></label>' +
-                '<input class="button" type="submit" value="Upload" id="mediamanager__upload_button">' +
+                '<div><input class="button" type="submit" value="Upload" id="mediamanager__upload_button"></div>' +
              '</div>',
 
         // template for one item in file list
         fileTemplate: '<li>' +
                 '<span class="qq-upload-file"></span>' +
-                '<label><span>Upload as (optional):</span><input class="qq-upload-name-input" type="text"></label>' +
+                '<label>Upload as (optional): <input class="qq-upload-name-input" type="text"></label>' +
                 '<span class="qq-upload-spinner-hidden"></span>' +
                 '<span class="qq-upload-size"></span>' +
                 '<a class="qq-upload-cancel" href="#">Cancel</a>' +

lib/tpl/default/fileuploader.css

@@ -1,31 +1,95 @@
-.qq-uploader { position:relative; width: 100%;}
+.qq-uploader {
+    position:relative;
+    width: 100%;
+}
 
 .qq-upload-button {
     display:block; /* or inline-block */
-    width: 105px; padding: 7px 0; text-align:center;
-    background:#880000; border-bottom:1px solid #ddd;color:#fff;
+    width: 105px;
+    padding: 7px 0;
+    text-align:center;
+    background:#880000;
+    border-bottom:1px solid #ddd;
+    color:#fff;
+}
+
+.qq-upload-button-hover {
+    background:#cc0000;
+}
+
+.qq-upload-button-focus {
+    outline:1px dotted black;
 }
-.qq-upload-button-hover {background:#cc0000;}
-.qq-upload-button-focus {outline:1px dotted black;}
 
 .qq-upload-drop-area {
-    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
-    background:#FF9797; text-align:center;
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    min-height: 70px;
+    z-index:2;
+    background:#FF9797;
+    text-align:center;
 }
+
 .qq-upload-drop-area span {
-    display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
+    display:block;
+    position:absolute;
+    top: 50%;
+    width:100%;
+    margin-top:-8px;
+    font-size:16px;
+}
+
+.qq-upload-drop-area-active {
+    background:#FF7171;
+}
+
+.qq-upload-list {
+    margin: 15px 35px !important;
+    padding: 0;
+    list-style: disc;
+    margin-top: 10px !important;
+}
+
+.qq-upload-list li {
+    margin: 0;
+    padding: 0;
+    line-height: 15px;
+    font-size: 12px;
+    margin-bottom: 5px;
 }
-.qq-upload-drop-area-active {background:#FF7171;}
 
-.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
-.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;}
 .qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
     margin-right: 7px;
 }
 
-.qq-upload-file {}
-.qq-upload-spinner {display:inline-block; background: url("../../images/throbber.gif"); width:15px; height:15px; vertical-align:text-bottom;}
-.qq-upload-size,.qq-upload-cancel {font-size:11px;}
+.qq-upload-spinner {
+    display: inline-block;
+    background: url("../../images/throbber.gif");
+    width: 15px;
+    height: 15px;
+    vertical-align: text-bottom;
+}
+
+.qq-upload-size,.qq-upload-cancel {
+    font-size:11px;
+}
+
+.qq-upload-failed-text {
+    display:none;
+}
+
+.qq-upload-fail .qq-upload-failed-text {
+    display:inline;
+}
+
+.qq-upload-list li .qq-upload-file {
+    display: block;
+    font-weight: bold;
+}
 
-.qq-upload-failed-text {display:none;}
-.qq-upload-fail .qq-upload-failed-text {display:inline;}
+.qq-upload-list li .qq-upload-cancel {
+    padding-left: 10px;
+}