Commit e8c21e9c authored by Jr Prévost's avatar Jr Prévost Committed by Felix Paul Kühne

Added CSS for upload videos queue

Signed-off-by: Felix Paul Kühne's avatarFelix Paul Kühne <fkuehne@videolan.org>
parent 53650e8d
......@@ -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>
......
......@@ -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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment