1
+ * {
2
+ box-sizing : border-box;
3
+ }
4
+
1
5
body {
2
- height : 100vh ;
6
+ min- height: 100vh ;
3
7
font-family : sans-serif;
4
8
color : white;
5
9
background : linear-gradient (to bottom, # 041727 0% , # 062b3f 100% );
6
10
pointer-events : auto;
7
- }
8
-
9
- .dragover-popup {
10
- position : absolute;
11
- top : 10px ; right : 10px ; bottom : 10px ; left : 10px ;
12
- background-color : rgba (0 , 0 , 0 , 0.5 );
13
- text-align : center;
14
- padding-top : 30% ;
15
- display : none;
16
- pointer-events : none;
17
- }
18
-
19
- .wrapper {
20
- width : 900px ;
21
- margin : 0 auto;
22
- /* filter: blur(5px); */
23
- }
24
-
25
- .header {
26
- text-align : center;
27
- /* filter: blur(5px); */
28
- }
29
-
30
- # filesStatus {
31
- padding : 10px ;
11
+ padding : 0 ;
12
+ margin : 0 ;
32
13
}
33
14
34
15
h1 , h2 , h3 {
35
- margin : 0 px ;
16
+ margin : 0 ;
36
17
}
37
18
38
19
h1 {
50
31
font-weight : 700 ;
51
32
}
52
33
53
-
54
- .header h1 {
55
- margin-top : 20px ;
56
- margin-bottom : 20px ;
34
+ main ,
35
+ header {
36
+ filter : none;
57
37
}
58
38
59
- .hidden {
39
+ .dragover-popup {
40
+ position : fixed;
41
+ top : 0.5em ;
42
+ left : 0.5em ;
43
+ width : calc (100% - 1em );
44
+ height : calc (100% - 1em );
45
+ background-color : rgba (0 , 0 , 0 , 0.5 );
60
46
display : none;
47
+ pointer-events : none;
61
48
}
62
49
63
- .visible {
64
- display : inherit;
65
- font-size : 0.8em ;
50
+ .dragover-popup h1 {
51
+ position : fixed;
52
+ top : 50% ;
53
+ left : 50% ;
54
+ transform : translate (-50% , -50% )
66
55
}
67
56
68
- . error {
69
- font-style : italic;
70
- color : red ;
57
+ body . dragging main ,
58
+ body . dragging header {
59
+ filter : blur ( 5 px ) ;
71
60
}
72
61
73
- .ipfs {
74
- padding-bottom : 50px ;
75
- border-radius : 1px ;
76
- box-sizing : border-box;
62
+ body .dragging .dragover-popup {
63
+ display : block;
77
64
}
78
65
79
- # details {
80
- padding : 10px ;
81
- width : 100% ;
82
- box-sizing : border-box;
66
+ header {
67
+ text-align : center;
68
+ display : flex;
69
+ justify-content : center;
70
+ align-items : center;
71
+ padding : 3em 0 ;
83
72
}
84
73
85
74
ul {
86
- margin : 0px ; padding : 0px ;
75
+ margin : 0 ;
76
+ padding : 0 ;
87
77
list-style : none;
88
- font-size : 11px ;
89
78
}
90
79
91
80
ul li {
92
- margin-top : 10 px ;
93
- margin-bottom : 10 px ;
94
- font-size : 9 px ;
81
+ margin : 1 em 0 ;
82
+ font-size : 0.7 em ;
83
+ font-family : monospace ;
95
84
word-wrap : break-word;
96
85
}
97
86
98
87
button {
99
88
background-color : rgba (0 , 0 , 0 , 0.2 );
100
89
color : # 6acad1 ;
101
90
border : 2px solid # 6acad1 ;
102
- font-size : 15px ;
103
- padding : 10px 25px 10px 25px ;
104
- border-radius : 2px ;
105
- margin : 5px ;
106
- }
107
-
108
- .multihash-wrapper input {
109
- width : 80% ;
110
- float : left;
111
- height : 40px ;
112
- margin-left : 1% ;
113
- font-size : 16px ;
114
- box-sizing : border-box;
91
+ font-size : 1em ;
92
+ padding : 0.625em 1.5em ;
93
+ border-radius : 0.125em ;
94
+ margin : .5em 0 ;
115
95
}
116
96
117
- .multihash-wrapper button {
118
- width : 17% ;
119
- float : left;
120
- height : 40px ;
121
- margin : 0px ;
122
- margin-left : 1% ;
123
- }
124
-
125
- .file-list {
126
- display : block;
127
- margin : 10px ;
128
- }
129
-
130
- .file-list a {
131
- font-size : 16px ;
132
- color : white;
133
- display : block;
134
- }
135
-
136
- button .connect-peer {
137
- margin : 0px ;
138
- margin-top : 2px ;
97
+ button .full {
98
+ margin-right : 0 ;
99
+ margin-left : 0 ;
139
100
width : 100% ;
140
101
}
141
102
@@ -149,101 +110,138 @@ button:hover {
149
110
font-family : monospace
150
111
}
151
112
113
+ .disabled * ,
114
+ input : disabled ,
152
115
button : disabled {
153
116
opacity : 0.2 ;
154
117
}
155
- input : disabled {
156
- opacity : 0.2 ;
157
- }
158
- .disabled {
159
- opacity : 0.2 ;
160
- }
161
118
162
119
input {
163
120
width : 100% ;
164
- border : 2px solid # 444 ;
121
+ border : 2px solid rgba ( 0 , 0 , 0 , 0.2 ) ;
165
122
color : black;
166
- padding : 7 px ;
123
+ padding : 0.7 em ;
167
124
border-radius : 2px ;
168
- font-size : 9px ;
169
- box-sizing : border-box;
170
125
}
171
126
172
- textarea , input , button {
127
+ input : hover , input : focus , input : active {
128
+ border-color : # 6acad1 ;
129
+ }
130
+
131
+ input , button {
173
132
outline : none;
174
133
}
175
134
176
- button : focus , input : focus {
177
- outline : 3px solid # 6acad1 ;
135
+ main {
136
+ width : 90% ;
137
+ margin : 0 auto;
178
138
}
179
139
180
- .picture {
181
- margin-top : 1em ;
182
- width : 100% ;
183
- background-color : rgba (196 , 196 , 196 , 0.1 );
184
- /*padding: 0.25em;*/
185
- /*font-size: 1.2em;*/
140
+ .buttons ,
141
+ .columns {
142
+ display : flex;
143
+ flex-direction : row;
144
+ justify-content : space-between;
186
145
}
187
146
188
- .settings {
189
- padding : 15px ;
147
+ .buttons > button ,
148
+ .columns > div {
149
+ width : calc (50% - 0.5em );
190
150
}
191
151
192
- .left {
193
- box-sizing : border-box;
194
- /* background-color: red; */
152
+ .buttons > button {
153
+ margin : 0 0 1em ;
195
154
}
196
155
197
- .right {
198
- /* background-color: green; */
156
+ .box {
157
+ background-color : rgba (255 , 255 , 255 , 0.05 );
158
+ padding : 1em ;
159
+ margin-bottom : 1em ;
199
160
}
200
161
201
- .setting-item {
202
- margin-top : 20px ;
162
+ .box > h2 {
163
+ display : block;
164
+ border-bottom : 2px solid rgba (255 , 255 , 255 , 0.1 );
165
+ border-right : 0 ;
166
+ border-left : 0 ;
167
+ text-align : center;
168
+ padding-bottom : 0.5em ;
169
+ margin-bottom : 1em ;
203
170
}
204
171
205
- .left , .right {
206
- width : 48% ;
207
- float : left;
208
- background-color : rgba (255 , 255 , 255 , 0.05 );
209
- box-sizing : border-box;
210
- margin : 1% ;
211
- padding : 10px ;
172
+ # peers i {
173
+ display : none;
174
+ margin-top : 5px ;
175
+ margin-bottom : 5px ;
176
+ font-size : 14px ;
177
+ }
178
+
179
+ # peers .waiting i {
180
+ display : block;
181
+ }
182
+
183
+ # errors {
184
+ grid-area : errors;
185
+ color : red;
186
+ font-style : italic;
187
+ font-size : 1.125em ;
188
+ display : block;
189
+ margin : 0 0 1em ;
212
190
}
213
191
192
+ # errors .hidden {
193
+ display : none;
194
+ }
214
195
196
+ # note {
197
+ position : absolute;
198
+ top : 1em ;
199
+ right : 1em ;
200
+ font-size : 0.625em ;
201
+ }
215
202
216
- # files {
217
- padding-top : 10px ;
218
- background-color : rgba (255 , 255 , 255 , 0.05 );
219
- margin : 1% ;
203
+ # file-status {
204
+ font-style : italic;
205
+ color : cyan;
206
+ font-size : 0.8em ;
207
+ margin : 1em 0 ;
220
208
}
221
209
222
- .left .centered {
223
- float : none;
224
- margin : 0px auto;
225
- text-align : center;
210
+ table {
211
+ width : 100% ;
212
+ margin : 1em 0 ;
213
+ word-break : break-all;
214
+ border-collapse : collapse;
226
215
}
227
216
228
- .clear {
229
- clear : both;
217
+ table thead {
218
+ background-color : rgba (255 , 255 , 255 , 0.1 );
219
+ font-weight : normal
230
220
}
231
221
232
- .note {
233
- position : absolute;
234
- top : 10px ;
235
- right : 10px ;
236
- font-size : 10px ;
237
- font-size : 10px ;
222
+ table th , table td {
223
+ padding : 0.5em 0 ;
238
224
}
239
225
240
- # peers i {
241
- display : block;
242
- margin-top : 5px ;
243
- margin-bottom : 5px ;
244
- font-size : 14px ;
226
+ table td : last-child ,
227
+ table th : last-child {
228
+ width : 20% ;
229
+ text-align : center;
245
230
}
246
231
247
- . error {
248
- font-size : 18 px ;
232
+ table td : first-child {
233
+ width : 45 % ;
249
234
}
235
+
236
+ table td : nth-child (2 ) {
237
+ width : 35% ;
238
+ font-family : monospace;
239
+ }
240
+
241
+ table tr : hover {
242
+ background-color : rgba (0 , 0 , 0 , 0.2 )
243
+ }
244
+
245
+ table a {
246
+ color : inherit;
247
+ }
0 commit comments