-
Notifications
You must be signed in to change notification settings - Fork 70
Expand file tree
/
Copy pathPageFiles.css
More file actions
165 lines (146 loc) · 10.6 KB
/
PageFiles.css
File metadata and controls
165 lines (146 loc) · 10.6 KB
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
/* Dashboard */
#PageFilesDashboard { margin-right: 1.5%; margin-top: -20px; float: right; position: relative; }
.totalbar-title {
font-size: 13px; padding-bottom: 7px; text-transform: uppercase;
font-weight: bold; letter-spacing: 1px; transform: scaleX(0.8); transform-origin: left; display: inline-block; text-decoration: none; color: white;
}
.totalbar-title .icon-arrow-down { opacity: 0.5; transition: all 0.3s }
.totalbar-title:hover .icon-arrow-down { opacity: 1; transition: none }
.totalbar { height: 2px; width: 320px; background-color: rgba(255, 255, 255, 0.1); }
.totalbar div { transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) }
.totalbar-used { height: 100%; width: 20%; background-color: #6696FB; background: linear-gradient(90deg, #6696FB, #8668CB); }
.totalbar-limitbar { height: 100%; width: 26%; background-color: #6696FB; background: rgba(255, 255, 255, 0.1); margin-top: -2px }
.totalbar-limit {
height: 12px; margin-left: 26%; border-left: 1px solid #5F5879;
margin-top: -2px; font-size: 10px; padding-top: 6px; padding-left: 5px; color: rgba(255,255,255, 0.5);
}
.totalbar-hddfree {
height: 12px; margin-top: -18px; text-transform: uppercase; line-height: 13px;
font-size: 10px; padding-top: 6px; color: rgba(255,255,255, 0.5); text-align: right;
}
.totalbar .arrow { display: inline-block; overflow: hidden; vertical-align: -3px; padding-left: 5px; }
#PageFilesDashboard .menu { left: 0px; margin-left: 220px; width: 220px; margin-top: 24px; }
/* Edit limit */
#PageFilesDashboard.editing .totalbar-edit { width: 300px; opacity: 1; visibility: visible; transform: translateY(0px); }
.totalbar-edit {
position: absolute; margin-top: -7px; z-index: 999; background-color: #302b58; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px;
transition: all 0.3s; white-space: nowrap; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-10px);
}
.totalbar-edit input {
width: 50px; padding: 5px; margin-left: 10px; margin-right: 10px; text-align: center;
background-color: rgb(255, 255, 255); color: #8984c2; border: 0px solid #555478; font-weight: bold; font-family: Roboto; vertical-align: -1px;
}
.totalbar-edit input:focus { outline: none }
.totalbar-edit .set { padding: 5px 10px; background-color: #51438c; color: white; text-decoration: none; border-radius: 1px; border-bottom: 1px solid black; transition: all 0.3s }
.totalbar-edit .set:hover { background-color: #6654b1; transition: none }
.totalbar-edit .set:focus { text-decoration: underline }
.totalbar-edit .cancel { color: white; opacity: 0.5; margin-left: 10px; font-size: 11px; text-decoration: none; transition: all 0.3s }
.totalbar-edit .cancel:hover { opacity: 1; transition: none }
.totalbar-edit .cancel:focus { text-decoration: underline }
#PageFiles .empty { text-align: center; margin-top: 36vh; font-size: 22px; text-transform: uppercase; letter-spacing: 1px; width: 100%; position: absolute; }
#PageFiles .empty small { font-size: 50%; opacity: 0.5; }
/* Table*/
#PageFiles .files .tr { white-space: nowrap }
#PageFiles .files .td { display: inline-block; width: 60px }
#PageFiles .files .tbody .td { line-height: 18px; vertical-align: bottom; }
#PageFiles .files .td.inner_path { min-width: 300px }
#PageFiles .files .td.size { width: 90px; text-align: right; }
#PageFiles .files .td.status { text-align: right; }
#PageFiles .files .td.peer { width: 60px }
#PageFiles .files .td.uploaded { width: 130px; text-align: right; }
#PageFiles .files .td.added { width: 90px }
#PageFiles .files .orderby { color: inherit; text-decoration: none; transition: all 0.3s; outline: 5px solid transparent }
#PageFiles .files .orderby:hover { text-decoration: underline }
#PageFiles .files .orderby .icon-arrow-down { opacity: 0; transition: all 0.3s ease-in-out }
#PageFiles .files .orderby.selected .icon-arrow-down { opacity: 0.3; transition: }
#PageFiles .files .orderby:active { background-color: rgba(133, 239, 255, 0.09); outline: 5px solid rgba(133, 239, 255, 0.09); transition: none }
#PageFiles .files .orderby:hover .icon-arrow-down { opacity: 0.5 }
#PageFiles .files .orderby:not(.desc) .icon-arrow-down { transform: rotateZ(180deg) }
#PageFiles .files .tr.selected .td { background-color: #fffbdb; border-top-color: #ece8c2 }
#PageFiles .site + .site .files { transition-delay: 0.1s }
#PageFiles > .site { clear: both; }
#PageFiles > .site > .title { padding-left: 40px; }
#PageFiles .files {
width: 97%; margin: auto; box-sizing: border-box; color: #555; position: relative; z-index: 1;
border-collapse: collapse; font-size: 14px; box-shadow: 0px 9px 60px -15px black;
}
#PageFiles .files .thead .td {
padding: 15px 20px; border-top: none; color: #8984c2;
font-size: 12px; text-transform: uppercase; background-color: rgba(146, 119, 209, 0.13);
}
#PageFiles .files .td { padding: 15px 20px; background-color: rgb(255, 255, 255); border-top: 1px solid #EEE; font-size: 14px; white-space: nowrap; }
#PageFiles .files .td.pre { width: 20px; color: transparent; padding-left: 0px; }
#PageFiles .files .td.pre .checkbox-outer { opacity: 0.3; }
#PageFiles .files .td.site { width: 70px }
#PageFiles .files .td.site .link { color: inherit; text-decoration: none }
#PageFiles .files .td.status .percent { transition: all 1s ease-in-out; display: inline-block; width: 80px; background-color: #EEE; font-size: 10px; height: 15px; line-height: 15px; text-align: center; margin-right: 20px; }
#PageFiles .files .td.inner_path { padding-left: 10px; width: calc(100% - 600px); max-height: 18px; }
#PageFiles .files.files-bigfiles .td.inner_path { padding-left: 15px; width: calc(100% - 810px); }
#PageFiles .files.files-result .td.inner_path { padding-left: 15px; width: calc(100% - 715px); }
#PageFiles .files .td.inner_path .title { color: inherit; text-decoration: none }
#PageFiles .files .td.inner_path .link { display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: -4px; max-width: 100%; }
#PageFiles .files .pinned .td.inner_path .link { max-width: calc(100% - 40px); }
#PageFiles .files .thead .td.uploaded { text-align: left }
#PageFiles .files .thead .td.uploaded .title { padding-left: 7px; }
#PageFiles .files .peer .icon-profile { background: currentColor; color: #47d094; font-size: 10px; top: 1px; margin-right: 13px }
#PageFiles .files .peer .icon-profile:before { background: currentColor }
#PageFiles .files .peer .num { color: #969696; }
#PageFiles .files .uploaded .uploaded-text { display: inline-block; text-align: right; }
#PageFiles .files .uploaded .dots-container { display: inline-block; width: 0px; padding-right: 65px;; }
#PageFiles .files .checkbox-outer { padding: 15px; padding-left: 20px; }
#PageFiles .files .checkbox {
display: inline-block; width: 12px; height: 12px; border: 2px solid #BBB;
border-radius: 3px; vertical-align: -3px; margin-right: 10px;
}
#PageFiles .files .selected .checkbox { border-color: #dedede }
#PageFiles .files .selected .checkbox:after {
background-color: #dedede; content: ""; text-decoration: none; display: block; width: 10px; height: 10px; margin-left: 1px; margin-top: 1px;
}
#PageFiles .files .tbody .td.size { font-size: 16px }
#PageFiles .files .tbody .td.added, #PageFiles .files .td.access { font-size: 12px; color: #999 }
#PageFiles .more-container { text-align: center; border-top: 8px solid rgba(146, 119, 209, 0.4); width: 96%; margin: auto; position: relative; }
#PageFiles .more {
display: inline-block; padding: 10px 20px; text-decoration: none; color: white; text-transform: uppercase; opacity: 0.5; letter-spacing: 0.5px;
font-size: 10px; font-weight: bold; margin-top: 13px; border: 1px solid rgba(92, 107, 160, 1); border-radius: 30px; transition: all 0.3s;
}
#PageFiles .more:hover { opacity: 1; transition: none }
/* Title */
#PageFiles h3 { padding-top: 50px; padding-bottom: 10px; display: inline-block; margin-right: 10px }
#PageFiles .title .size {
display: inline-block; margin-left: 10px; margin-right: 10px; font-size: 18px;
color: #24ff7d; line-height: 21px; vertical-align: 5px; font-weight: lighter;
}
#PageFiles .title .size-optional { color: #ffd224 }
#PageFiles .title .size-optional .bar-active { border-bottom-color: #ffd224 }
#PageFiles .title .size-title { font-size: 11px; text-transform: uppercase; color: white; letter-spacing: 1px; line-height: 14px; margin-left: 5px; opacity: 0.5; }
#PageFiles .title .plus { display: inline-block; vertical-align: 4px; opacity: 0.5; font-weight: lighter; font-size: 18px; }
#PageFiles .title .helps { color: #ffd224; text-decoration: none; vertical-align: 3px; display: inline-block; position: relative; }
#PageFiles .title .helps .icon-share { margin-right: 9px; vertical-align: -3px; }
#PageFiles .title .helps .icon-arrow-down { margin-left: 9px; opacity: 0.4; vertical-align: -1px; transition: all 0.3s }
#PageFiles .title .helps .menu { white-space: nowrap; margin-top: 25px; }
#PageFiles .title .helps:hover .icon-arrow-down { opacity: 1; transition: none }
#PageFiles .title .transfers { display: inline-block; font-size: 11px; font-weight: lighter; line-height: 13px; margin-left: 7px; letter-spacing: 0.5px; }
#PageFiles .title .transfers .up { color: #8aff83; }
#PageFiles .title .transfers .down { color: #fcff83; }
#PageFiles .inner_path .pinned { background-color: #eee; padding: 5px; margin-left: 10px; font-size: 10px; text-transform: uppercase; line-height: 14px; letter-spacing: 0.5px; }
/* Bar */
#PageFiles .bar { width: 100%; height: 1px; border-bottom: 1px solid #3b509c; }
#PageFiles .bar .bar-active { border-bottom: 1px solid lime; margin-bottom: 8px; height: 1px; }
/* Circle */
.circle { display: inline-block; margin-left: 17px; vertical-align: -5px; }
.circle-svg { transform: rotate(90deg) }
.circle-bg { stroke: #3b509c; stroke-width: 1.4px; }
.circle-fg { stroke: #83efff; stroke-width: 1.4px; stroke-dashoffset: -137; stroke-dasharray: 75px; }
.circle-value { margin-left: -30px; width: 30px; text-align: center; display: inline-block; vertical-align: 6px; font-size: 10px; color: #83efff; }
.circle-value.negative { color: #f3b883 }
/* Dots */
#PageFiles .dots { font-size: 27px; vertical-align: 0px; line-height: 11px; margin-left: 8px; color: rgb(236, 236, 236); display: inline-block; overflow: hidden; width: 45px; }
#PageFiles .dots-fg { margin-left: -45px; color: #47d094;; width: 32px; }
/* Filter */
#PageFiles .filter { text-align: center; padding-top: 45px; }
#PageFiles .filter .title { float: left; margin-left: 15px; position: absolute; margin-top: 15px; opacity: 0.5; }
#PageFiles .filter input {
width: 97%; box-sizing: border-box; background-color: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2);
padding: 15px 15px; color: white; font-size: 16px;
}
#PageFiles .filter input:focus { border-color: #6c7884; outline: none }