forked from zluca/Sidebar
-
Notifications
You must be signed in to change notification settings - Fork 0
/
sidebar-downloads.css
120 lines (119 loc) · 2.54 KB
/
sidebar-downloads.css
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
.download {
position: relative;
}
.download.complete:hover {
cursor: pointer;
}
.download:hover,
.download.deleted:hover {
cursor: default;
}
.download.in_progress {
padding-bottom: 1.4rem;
}
.download::before {
content: '';
width: .9rem;
height: .9rem;
position: absolute;
left: 0;
top: 0.05rem;
background-size: 100% 100%;
background-color: var(--font-color);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
-webkit-mask-mode: alpha;
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-mode: alpha;
}
.download.in_progress::before {
top: .9rem;
}
.download.complete::before {
-webkit-mask-image: url(icons/folder.svg);
mask-image: url(icons/folder.svg);
}
.download.deleted::before {
-webkit-mask-image: url("icons/close.svg");
mask-image: url("icons/close.svg");
}
.download.in_progress::before {
-webkit-mask-image: url("icons/start.svg");
mask-image: url("icons/start.svg");
}
.download.interrupted::before {
-webkit-mask-image: url("icons/attention.svg");
mask-image: url("icons/attention.svg");
}
.download.in_progress.paused::before {
-webkit-mask-image: url("icons/pause.svg");
mask-image: url("icons/pause.svg");
}
.download.deleted,
.download.interrupted {
text-decoration: line-through;
}
.download>.status {
display: none;
}
.download.in_progress>.status {
display: block;
}
.download>.status>.progress-bar {
position: absolute;
width: 100%;
height: .2rem;
border-width: .1rem;
border-color: var(--border-color);
border-style: solid;
display: none;
margin: 0 .2rem;
bottom: .8rem;
left: 0;
margin-left: 1.4rem;
}
.download>.status>.recived {
display: none;
width: 100%;
overflow: hidden;
font-size: .7rem;
margin: 0 .2rem;
position: absolute;
left: 0;
bottom: 0rem;
padding-left: 1.4rem;
}
.download>.status>.progress-bar>span {
display: block;
height: 100%;
background-color: green;
}
.download>.status>.file-size {
display: none;
padding-top: .4rem;
overflow: hidden;
}
.download.in_progress>.status>.progress-bar,
.download.in_progress>.status>.recived,
.download.interrupted>.status>.progress-bar,
.download.interrupted>.status>.recived {
display: block;
}
.download.interrupted>.status>.progress-bar>span {
background-color: red;
}
.download.complete>.status>.file-size {
display: block;
}
#downloads-delete,
.download.interrupted #downloads-reload,
.download.complete #downloads-reload,
.download.in_progress #downloads-pause,
.download.in_progress #downloads-cancel,
.download.in_progress.paused #downloads-resume {
display: inline-block;
}
.download.in_progress.paused #downloads-pause {
display: none;
}