zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-06-06 20:12:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add icons for torrent overview details

Browse Source
This commit is contained in:
John Furrow
2016-03-26 23:20:45 -07:00
parent bd38c66428
commit 56ce8888f6
14 changed files with 277 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/source/sass/components/_progress-bar.scss
+13 -3
View File
@@ -72,7 +72,7 @@ $progress-bar--fill--error: #e95779;
.has-error & {
background: $progress-bar--fill--error;
}
.is-selected & {
background: $progress-bar--fill--selected;
}
@@ -82,23 +82,33 @@ $progress-bar--fill--error: #e95779;
position: relative;
&:after {
background: $progress-bar--background;
background: $progress-bar--fill;
content: '';
height: 1px;
left: 0;
opacity: 0.5;
position: absolute;
z-index: 0;
top: 50%;
transform: translateY(-50%);
transition: background 0.25s;
transition: background 0.25s, opacity 0.25s;
width: 100%;
.is-stopped & {
background: $progress-bar--fill--stopped;
}
.has-error & {
background: $progress-bar--fill--error;
}
.is-selected & {
background: $progress-bar--background--selected;
}
.is-selected.is-stopped & {
background: $progress-bar--background--selected--stopped;
opacity: 1;
}
}
}
client/source/sass/components/_torrents.scss
+91 -7
View File
@@ -2,6 +2,7 @@ $torrent-list--background: #fff;
$torrent-list--border: rgba($background, 0.15);
$torrent--primary--foreground: #5b6d7c;
$torrent--primary--foreground--error: #e95779;
$torrent--primary--foreground--stopped: rgba(#333332, 0.5);
$torrent--primary--foreground--selected: #fff;
$torrent--primary--foreground--selected--stopped: rgba($torrent--primary--foreground--selected, 0.6);
@@ -149,6 +150,10 @@ $torrent--background--error: #e95779;
color: $torrent--primary--foreground--stopped;
}
.has-error & {
color: $torrent--primary--foreground--error;
}
.is-selected & {
color: $torrent--primary--foreground--selected;
}
@@ -161,16 +166,26 @@ $torrent--background--error: #e95779;
&--secondary {
align-items: flex-end;
color: $torrent--secondary--foreground;
flex: 1;
flex: 0 0 245px;
font-size: 0.75em;
min-width: 200px;
min-width: 255px;
text-align: right;
white-space: nowrap;
vertical-align: baseline;
li {
flex: 1 1 auto;
min-width: 15%;
display: inline-block;
font-weight: 500;
margin-right: 5px;
text-align: left;
white-space: nowrap;
&.torrent__details--ratio {
max-width: 30px;
.unit {
font-weight: 400;
}
&:last-child {
margin-right: 0;
}
}
@@ -195,7 +210,8 @@ $torrent--background--error: #e95779;
li {
display: inline-block;
margin-right: 1em;
margin-right: 15px;
white-space: nowrap;
&:last-child {
margin-right: 0;
@@ -219,6 +235,74 @@ $torrent--background--error: #e95779;
margin-right: 0.5em;
opacity: 0.5;
}
&__icon {
display: inline-block;
padding-right: 5px;
transform: translateY(1px);
vertical-align: baseline;
.icon {
display: block;
fill: currentColor;
height: 12px;
opacity: 0.66;
width: 12px;
}
}
&--completed {
width: 100px;
}
&--uploaded {
width: 60px;
}
&--size {
width: 60px;
}
&--peers {
width: 60px;
}
&--seeds {
width: 60px;
}
&--added {
width: 90px;
}
&--eta {
width: 70px;
}
&--speed {
width: 60px;
&--download,
&--upload {
transition: color 0.25s;
.is-selected & {
color: #fff;
}
}
&--download {
color: $green;
}
&--upload {
color: $blue;
}
}
&--ratio {
width: 50px;
}
}
}