-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
/
main.styl
222 lines (195 loc) · 4.32 KB
/
main.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
@import 'nib'
@import 'util'
FONT_COLOR = #444
LIGHT_FONT_COLOR = #777
NO_METADATA_COLOR = #bc330d
NO_METADATA_GLOW_COLOR = #e33100
DOWNLOAD_COLOR_1 = #09c
DOWNLOAD_COLOR_2 = #0BF
SEED_COLOR = #85AE06
SEED_GLOW_COLOR = #91bd09
ellipsis()
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
*, *:before, *:after
box-sizing: border-box
a, input, button
-webkit-app-region: no-drag !important
color: FONT_COLOR
body
color: FONT_COLOR
font-size: 11px
margin: 0
header, .overall-stats, footer
-webkit-app-region: drag
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5)
text-shadow: 0 0 1px rgba(255, 255, 255, 0.75)
width: 100%
header
background: linear-gradient(top, 20% #F0F0F0, #B0B0B0)
height: 60px
.system
left: 0
position: absolute
top: 0
padding: 5px
z-index: 20
i
-webkit-app-region: no-drag
margin-left: 4px
:not(.fa-circle)
display: none
&:hover
.fa-circle
display: none
:not(.fa-circle)
display: inline-block
.close
color: rgb(195, 0, 4)
.minimize
color: rgb(241, 175, 68)
.maximize
color: rgb(67, 142, 12)
.title
font-size: 13px
left: 0
position: absolute
right: 0
text-align: center
top: 3px
z-index: 10
.buttons
padding-top: 30px
toolbar()
background: linear-gradient(top, 20% #D0D0D0, #A2A2A2)
border-top: 1px solid #666
height: 24px
padding: 4px 12px
.overall-stats
toolbar()
border-bottom: 1px solid #666
i
margin-right: 6px
position: relative
top: 1px
vertical-align: baseline
.ratio
float: left
.upload, .download
float: right
margin-left: 20px
footer
toolbar()
position: absolute
bottom: 0
.numTransfers
left: 0
position: absolute
right: 0
text-align: center
z-index: 10
.issue
position: absolute
right: 12px
z-index: 20
i
margin-right: 4px
main
height: 100%
.torrent
height: 65px
padding: 4px 10px 4px 5px
width: 100%
&:nth-child(odd)
background-color: #FFF
&:nth-child(even)
background-color: #E5F0FA
.left
float: left
height: 57px
margin-right: 5px
position: relative
width: 50px
img
bottom: 0
left: 0
margin: auto
position: absolute
right: 0
top: 0
max-width: 50px
max-height: 40px
.right
margin-left: 55px
.name
ellipsis()
color: #000
font-size: 13px
.stats, .stats2
ellipsis()
font-size: 9px
color: LIGHT_FONT_COLOR
&.has-metadata
.if-no-metadata
display: none
&:not(.has-metadata)
.if-metadata
display: none
&.is-seeding
.if-not-seeding
display: none
&:not(.is-seeding)
.if-seeding
display: none
@keyframes animate-stripes
100%
background-position: -40px 0
@keyframes green-pulse
from
background-color: SEED_COLOR
box-shadow: 0 0 0 SEED_GLOW_COLOR
50%
background-color: SEED_GLOW_COLOR
box-shadow: 0 0 18px SEED_GLOW_COLOR
to
background-color: SEED_COLOR
box-shadow: 0 0 0 SEED_GLOW_COLOR
@keyframes red-pulse
from
background-color: NO_METADATA_COLOR
box-shadow: 0 0 0 NO_METADATA_GLOW_COLOR
50%
background-color: NO_METADATA_GLOW_COLOR
box-shadow: 0 0 18px NO_METADATA_GLOW_COLOR
to
background-color: NO_METADATA_COLOR
box-shadow: 0 0 0 NO_METADATA_GLOW_COLOR
progress
appearance: none
border-radius: 3px
border: none
height: 15px
margin: 2px 0
position: relative
width: 100%
progress::-webkit-progress-bar
background-color: #DDD
border-radius: 3px
box-shadow: 0 1px 2px rgba(0,0,0,.5) inset
progress::-webkit-progress-value
border-radius: 3px
.torrent:not(.has-metadata)
progress::-webkit-progress-bar
animation: red-pulse 1s infinite
.torrent.is-seeding
progress::-webkit-progress-bar
animation: green-pulse 3s infinite
.torrent.has-metadata:not(.is-seeding)
progress::-webkit-progress-value
animation: animate-stripes 2s linear infinite
background-image: linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0.2)),
linear-gradient(left, DOWNLOAD_COLOR_1, DOWNLOAD_COLOR_2)
background-size: 40px 15px, 100% 100%, 100% 100%
position: relative