kalugin66/webtorrent-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Torrent list styling

Browse Source 
* Download button is a lot easier to read: white down arrow when off, animated and pulsating green down arrow when downloading, solid green up arrow when seeding

* Play button shows a spinner if you click play before a torrent is ready, then an exclamation point if the torrent still isn't ready after 10 seconds

* Drop target shows up always, not just when the torrent list is empty. Lights up when you drag something

* Fixed alignment, the Xs to delete torrents are now aligned with the + to add a new torrent
This commit is contained in:
DC
2016-03-08 03:48:47 -08:00
parent 4c03e98a19
commit ff56d818f6
4 changed files with 71 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
renderer/index.css
View File

@@ -215,17 +215,6 @@ a:not(.disabled):hover, i:not(.disabled):hover {
flex: 1 1 auto;
}
body.drag::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255, 0, 0, 0.3);
border: 5px #f00 dashed;
}
/*
* PLAYER
*/
@@ -256,15 +245,21 @@ body.drag::before {
padding-top: 37px;
}
.get-started {
opacity: .5;
padding: 24px;
margin: 6px;
.drop-target {
padding: 20px;
margin: 10px;
text-align: center;
border: 5px #444 dashed;
color: #666;
font-size: 16px;
flex: 1 1 auto;
}
body.drag .drop-target {
border-color: #def;
color: #def;
}
.torrent {
height: 120px;
background: linear-gradient(to bottom right, #4B79A1, #283E51);
@@ -305,8 +300,8 @@ body.drag::before {
display: flex;
}
.torrent .buttons > :not(:first-child) {
margin-left: 10px; /* space buttons by 10px */
.torrent .buttons > * {
margin-right: 6px; /* space buttons apart, align the Xs under the + */
}
.torrent .buttons .download {
@@ -316,6 +311,7 @@ body.drag::before {
border-radius: 14px;
font-size: 18px;
padding-top: 6px;
margin-right: 10px; /* download and play btns need more space to look good */
}
.torrent .buttons .download.downloading {
@@ -326,8 +322,14 @@ body.drag::before {
}
@keyframes greenpulse {
0% { color: #ffffff }
100% { color: #44dd44 }
0% {
color: #ffffff;
padding-top: 4px;
}
100% {
color: #44dd44;
padding-top: 6px;
}
}
.torrent .buttons .download.seeding {
@@ -339,6 +341,25 @@ body.drag::before {
background-color: #F44336;
}
.torrent.requested .play {
border-top: 6px solid rgba(255, 255, 255, 0.2);
border-right: 6px solid rgba(255, 255, 255, 0.2);
border-bottom: 6px solid rgba(255, 255, 255, 0.2);
border-left: 6px solid #ffffff;
border-radius: 50%;
color: transparent;
animation: load8 1.1s infinite linear;
}
@keyframes load8 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.torrent .buttons .delete {
opacity: 0.5;
}