Commit | Line | Data |
---|---|---|
6b94b4db RK |
1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
4 | ||
5 | /***************** GENERAL *****************/ | |
6 | ||
7 | * { | |
8 | margin: 0; | |
9 | padding: 0; | |
10 | -moz-box-sizing: border-box; | |
11 | } | |
12 | ||
13 | html, body { | |
14 | height: 100%; | |
15 | } | |
16 | ||
17 | body { | |
18 | font-size: 0.9rem; | |
19 | color: #FF9F00; | |
20 | background-color: #000000; | |
21 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
22 | display: flex; | |
23 | flex-direction: column; | |
24 | } | |
25 | ||
26 | template { | |
27 | display: none; | |
28 | } | |
29 | ||
30 | h1 { | |
31 | font-size: 20px; | |
32 | } | |
33 | ||
34 | #content { | |
35 | display: flex; | |
36 | flex-direction: row; | |
37 | height: 100%; | |
38 | overflow: hidden; | |
39 | } | |
40 | ||
41 | #detail { | |
42 | display: flex; | |
43 | flex-grow: 1; | |
44 | z-index: 1; | |
45 | overflow: hidden; | |
46 | } | |
47 | ||
48 | #meta { | |
49 | background-size: 100%; | |
50 | padding-top: 50px; | |
51 | } | |
52 | ||
53 | #connection-footer { | |
54 | border-width: 0; | |
55 | height: 50px; | |
56 | min-height: 50px; | |
57 | } | |
58 | ||
59 | ||
60 | ||
61 | /***************** APP BUTTONS *****************/ | |
62 | ||
63 | ||
64 | ||
65 | .app-buttons { | |
66 | display: block; | |
67 | margin-left: 20px; | |
68 | color: #FF9F00; | |
69 | } | |
70 | ||
71 | button { | |
72 | margin: 0; | |
73 | font-size: 11px; | |
74 | padding: 5px 15px; | |
75 | cursor: pointer; | |
76 | background-color: #C09070; | |
77 | text-transform: uppercase; | |
78 | border-radius: 300px; | |
79 | border-width: 1px; | |
80 | } | |
81 | ||
82 | .app-buttons > button { | |
83 | display: none; | |
84 | } | |
85 | ||
86 | .app-buttons > button:not([disabled]):hover { | |
87 | background-color: #FFCF00; | |
88 | color: #000000; | |
89 | } | |
90 | ||
91 | .app-buttons > button[disabled] { | |
92 | background-color: #402858; | |
93 | color: #000000; | |
94 | pointer-events: none; | |
95 | } | |
96 | ||
97 | .app[running="false"] > .app-buttons > .button-start, | |
98 | .app[running="true"] > .app-buttons > .button-stop, | |
99 | .app[running="true"] > .app-buttons > .button-debug { | |
100 | display: inline-block; | |
101 | } | |
102 | /* | |
103 | .button-debug { | |
104 | color: #3498DB; | |
105 | } | |
106 | ||
107 | .button-debug:hover { | |
108 | background-color: #3498DB; | |
109 | color: #FFF; | |
110 | } | |
111 | ||
112 | .button-debug[disabled] { | |
113 | color: #3498DB; | |
114 | } | |
115 | ||
116 | .button-start { | |
117 | color: #18BC9C | |
118 | } | |
119 | ||
120 | .button-start:hover { | |
121 | background-color: #18BC9C; | |
122 | color: #FFF; | |
123 | } | |
124 | ||
125 | .button-start[disabled] { | |
126 | color: #18BC9C | |
127 | } | |
128 | ||
129 | .button-stop { | |
130 | color: #E74C3C; | |
131 | } | |
132 | ||
133 | .button-stop:hover { | |
134 | background-color: #E74C3C; | |
135 | color: #FFF; | |
136 | } | |
137 | ||
138 | .button-stop[disabled] { | |
139 | color: #E74C3C; | |
140 | } | |
141 | */ | |
142 | ||
143 | ||
144 | /***************** PERMISSIONS *****************/ | |
145 | ||
146 | ||
147 | ||
148 | ||
149 | .permission-table { | |
150 | display: flex; | |
151 | flex-direction: column; | |
152 | height: 100%; | |
153 | } | |
154 | ||
155 | .permission-table-body { | |
156 | overflow: auto; | |
157 | display: flex; | |
158 | flex-grow: 1; | |
159 | flex-direction: column; | |
160 | } | |
161 | ||
162 | .permission-table-header, | |
163 | .permission-table-footer { | |
164 | display: flex; | |
165 | background: #000000; | |
166 | border-top: 1px solid #9C9CFF; | |
167 | z-index: 2; | |
168 | flex-shrink: 0; | |
169 | } | |
170 | ||
171 | .permission-table-header > div, | |
172 | .permission-table-footer > div { | |
173 | z-index: 2; | |
174 | flex-grow: 1; | |
175 | background-color: #000000; | |
176 | color: #FF9F00; | |
177 | border: 0; | |
178 | margin: auto 0; | |
179 | padding: 5px; | |
180 | text-align: center; | |
181 | background: transparent; | |
182 | box-shadow: none; | |
183 | text-shadow: none; | |
184 | } | |
185 | ||
186 | .permission-table-header > div { | |
187 | flex-basis: 20%; | |
188 | } | |
189 | ||
190 | .permission-table-header > div:first-child { | |
191 | text-align: left; | |
192 | padding-left: 10px; | |
193 | flex-basis: 30%; | |
194 | } | |
195 | ||
196 | .permission-table-header { | |
197 | border: 0; | |
198 | border-bottom: 1px solid #9C9CFF; | |
199 | /* box-shadow: 0 1px 4px rgba(0,0,0,0.3);*/ | |
200 | } | |
201 | ||
202 | .permission-table-footer { | |
203 | /* box-shadow: 0 -1px 4px rgba(0,0,0,0.3);*/ | |
204 | } | |
205 | ||
206 | .permission { | |
207 | display: flex; | |
208 | flex-grow: 1; | |
209 | } | |
210 | ||
211 | .permission:nth-child(odd) { | |
212 | background-color: #404000; | |
213 | } | |
214 | ||
215 | .permission:hover { | |
216 | background-color: #FFCF00; | |
217 | color: #000000; | |
218 | } | |
219 | ||
220 | .permission > div { | |
221 | flex-grow: 1; | |
222 | flex-basis: 20%; | |
223 | text-align: center; | |
224 | padding: 3px; | |
225 | border-right: 1px solid #9C9CFF; | |
226 | border-bottom: 1px solid #9C9CFF; | |
227 | } | |
228 | ||
229 | .permission > div:first-child { | |
230 | text-align: left; | |
231 | padding: 3px 10px; | |
232 | flex-basis: 30%; | |
233 | font-weight: bold; | |
234 | } | |
235 | ||
236 | .permission > div[permission="1"]:before, .allow-label:after { | |
237 | color: #008484; | |
238 | content: ' \2713'; | |
239 | } | |
240 | ||
241 | .permission > div[permission="2"]:before, .deny-label:after { | |
242 | color: #FF0000; | |
243 | content: ' \2715'; | |
244 | } | |
245 | ||
246 | .permission > div[permission="3"]:before, .prompt-label:after { | |
247 | color: #9C9CFF; | |
248 | content: ' !'; | |
249 | } | |
250 | ||
251 | ||
252 | ||
253 | ||
254 | /***************** SIDEBAR *****************/ | |
255 | ||
256 | ||
257 | ||
258 | ||
259 | #sidebar { | |
260 | background: #000000; | |
261 | position: relative; | |
262 | display: flex; | |
263 | flex-direction: column; | |
264 | flex: 0 0 350px; | |
265 | overflow: hidden; | |
266 | z-index: 100; | |
267 | } | |
268 | ||
269 | .sidebar-item { | |
270 | background-color: #000000; | |
271 | color: #FF9F00; | |
272 | line-height: 120%; | |
273 | cursor: pointer; | |
274 | display: flex; | |
275 | padding: 15px 10px; | |
276 | display: block; | |
277 | text-align: left; | |
278 | flex-grow: 1; | |
279 | } | |
280 | ||
281 | .sidebar-item > * { | |
282 | flex-shrink: 0; | |
283 | } | |
284 | ||
285 | .sidebar-item:hover, | |
286 | .sidebar-item.selected:hover { | |
287 | background-color: #FFCF00; | |
288 | color: #000000 | |
289 | } | |
290 | ||
291 | .sidebar-item.selected { | |
292 | background-color: #008484; | |
293 | color: #000000; | |
294 | } | |
295 | ||
296 | .help { | |
297 | float: right; | |
298 | padding: 0 5px; | |
299 | } | |
300 | ||
301 | /***************** HEADER *****************/ | |
302 | ||
303 | header { | |
304 | padding-top: 140px; | |
305 | color: #9C9CFF; | |
306 | padding: 10px; | |
307 | } | |
308 | ||
309 | ||
310 | ||
311 | /***************** APPS *****************/ | |
312 | ||
313 | ||
314 | ||
315 | ||
316 | .apps { | |
317 | display: flex; | |
318 | flex-direction: column; | |
319 | overflow: auto; | |
320 | } | |
321 | ||
322 | .app { | |
323 | display: flex; | |
324 | align-items: center; | |
325 | order: 1; | |
326 | } | |
327 | ||
328 | .app-name { | |
329 | flex-grow: 1; | |
330 | font-weight: bold; | |
331 | } | |
332 | ||
333 | .app { | |
334 | padding: 10px 20px; | |
335 | border-bottom: 1px solid #9C9CFF; | |
336 | } | |
337 | ||
338 | .app:hover { | |
339 | background-color: #404000 | |
340 | } | |
341 | ||
342 | .app-icon { | |
343 | width: 32px; | |
344 | height: 32px; | |
345 | margin-right: 10px; | |
346 | } | |
347 | ||
348 | ||
349 | ||
350 | /***************** NOT CONNECTED *****************/ | |
351 | ||
352 | ||
353 | ||
354 | body:not(.notconnected) > #notConnectedMessage, | |
355 | body.notconnected > #content { | |
356 | display: none; | |
357 | } | |
358 | ||
359 | #notConnectedMessage { | |
360 | flex-grow: 1; | |
361 | flex-direction: column; | |
362 | margin: 50px auto; | |
363 | } | |
364 | ||
365 | #notConnectedMessage > span { | |
366 | padding: 20px; | |
367 | border: 1px solid #9C9CFF; | |
368 | border-radius: 5px; | |
369 | } | |
370 | ||
371 | #notConnectedMessage > span:before { | |
372 | content: ''; | |
373 | background: url('error.svg') no-repeat; | |
374 | background-size: 18px; | |
375 | height: 24px; | |
376 | width: 24px; | |
377 | position: relative; | |
378 | top: 10px; | |
379 | display: inline-block; | |
380 | } | |
381 | ||
382 | ||
383 | ||
384 | /***************** TABS *****************/ | |
385 | ||
386 | #tabs { | |
387 | flex-grow: 1; | |
388 | overflow: auto; | |
389 | } | |
390 | ||
391 | .tabpanel:not(.selected) { | |
392 | display: none; | |
393 | } | |
394 | ||
395 | #tabs-headers { | |
396 | flex-shrink: 0; | |
397 | display: flex; | |
398 | flex-direction: column; | |
399 | } |