Added CSS for upload videos queue

Signed-off-by: Felix Paul Kühne <fkuehne@videolan.org>

Resources/web/index.html

@@ -44,13 +44,36 @@
         <div class="bar" style="width: 50%;"></div>
       </div>
       
-      
-      
       <div id="uploads" style="display: none;">
         <p>So far you have uploaded:</p>
         <ul></ul>
       </div>
 
+      <section class="uploads">
+        <ul>
+          <li>
+            <div class="filename">Game of Thrones S02E01 720p HDTV.DD5.1 x264-EbP.mkv</div>
+            <div class="progress">
+              <div class="bar" style="width: 2%"></div>
+            </div>
+          </li>
+          <li>
+            <div class="filename">Game of Thrones S02E01 720p HDTV.DD5.1 x264-EbP.mkv</div>
+            <div class="progress">
+              <div class="bar" style="width: 80%"></div>
+            </div>
+          </li>
+        </ul>
+      </section>
+
+      <section class="message">
+        <h1>Drop files</h1>
+        <p>
+          Drop files in the window to add them to your iOS device. <br>
+          Or click on the "Upload file" button to use the file dialog window.
+        </p>
+      </section>
+
       <footer>
         <p>VLC for iOS is free, open-source software published by <a href="http://www.videolan.org" target="_blank">VideoLAN</a>. <br />Modification and redistribution is subject to both the <a href="http://opensource.org/licenses/GPL-2.0" target="_blank">GPLv2 (or later)</a> and the <a href="http://opensource.org/licenses/MPL-2.0" target="_blank">MPLv2</a> as well as further rights reserved by the VideoLAN association.<br />You can find the sources to this application <a href="http://git.videolan.org/?p=vlc-ports/ios2.git;a=summary" target="_blank">online</a> and more information about licensing in the About dialog included within the app.</p>
       </footer>

Resources/web/style.css

@@ -20,10 +20,11 @@ body {
   color: white;
   -webkit-font-smoothing: antialiased;
   position: relative;
+  background-image: url(padLibBg@2x.png);
+  background-position: 0 88px;
 }
 
 div.main {
-  background-image: url(padLibBg@2x.png);
   border: 2px solid inherit;
   position: absolute;
   top: 88px;
@@ -76,7 +77,7 @@ nav {
 
   text-align: center;
   text-shadow: 2px 2px 0px #783704;
-  
+  padding: 0 12px;  
   height: 58px;
   cursor: pointer;  
 }
@@ -98,11 +99,10 @@ nav {
 .linkBtn .icon {
   height: 60px;
   background-image: url(menuCone@2x.png);
-  background-position: 22px 6px;
+  background-position: 8px 6px;
   background-repeat: no-repeat;
 }
 .uploadBtn {
-  width: 200px;
   float: right;
   position: relative;
   overflow: hidden;
@@ -145,12 +145,67 @@ nav {
 
 form,#uploads {}
 
+.message {
+  margin: 100px 0px;
+}
+.message h1 {
+  font-size: 30px;
+  font-weight: bold;
+  text-align: center;
+  text-shadow: 1px 1px 2px black;
+  line-height: 60px;
+}
+.message p {
+  text-align: center;
+  text-shadow: 1px 1px 2px black;
+}
+
+.uploads {
+  
+}
+.uploads li {
+  height: 80px;
+  padding: 0 20px;
+}
+.uploads li:nth-child(2n) {
+  background-color: rgba(0,0,0,0.2);
+}
+.uploads .filename {
+  font-size: 20px;
+  line-height: 50px;
+}
+.uploads .progress {
+  height: 14px;
+  background-color: rgb(40,40,40);
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+  
+  box-shadow: inset 0px -3px 10px 0px rgba(255,255,255,0.1);
+
+}
+.uploads .progress .bar {
+  background-color: #c95a07;
+  position: absolute;
+  top:0;
+  left:0;
+  bottom:0;
+  border-radius: 20px;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d87306), to(#ba6100));
+  background-image: -webkit-linear-gradient(top, #d87306, #ba6100);
+  background-image: -moz-linear-gradient(top, #d87306, #ba6100);
+  background-image: -ms-linear-gradient(top, #d87306, #ba6100);
+  background-image: -o-linear-gradient(top, #d87306, #ba6100);
+  background-image: linear-gradient(top, #d87306, #ba6100);
+  
+  box-shadow: inset 0px 3px 0px -1px #e09d54, 0px 3px 0px -1px rgba(255,255,255,0.1);
+}
+
 footer {
   font-size: .9em;
   line-height: 1.3em;
+  padding-bottom: 8px; 
   text-align: center;
-  padding: 100px 0 10px 0;
-  
   color: rgb(120, 120, 120);
   text-shadow: 1px 1px 2px black;
 }