correct case of changed filename
[themes.git] / LCARStrek / browser / devtools / app-manager / projects.css
... / ...
CommitLineData
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* {
6 margin: 0;
7 padding: 0;
8 box-sizing: border-box;
9 font-size: 0.9rem;
10}
11
12html, body {
13 height: 100%;
14}
15
16template {
17 display: none;
18}
19
20body {
21 display: flex;
22 color: #FF9F00;
23 background-color: #000000;
24 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
25 overflow: hidden;
26}
27
28body:not(.connected) button.device-action {
29 display: none;
30}
31
32strong {
33 color: #FFCF00;
34}
35
36
37/********* SIDEBAR ***********/
38
39
40
41#sidebar {
42 display: flex;
43 flex-direction: column;
44 flex: 0 0 350px;
45 overflow: hidden;
46 z-index: 100;
47 background-color: #000000;
48 position: relative;
49 border-right: 1px solid #9C9CFF;
50}
51
52#project-list {
53 height: 100%;
54 overflow: auto;
55}
56
57#project-list:not([projects-count="0"]) > #no-project {
58 display: none;
59}
60
61#no-project {
62 padding: 100px 20px 0;
63 font-weight: bold;
64 color: #A09090;
65 font-size: 22px;
66}
67
68
69/********* PROJECT MENU ***********/
70
71
72.project-item {
73 padding: 10px 0;
74 background-color: #000000;
75 border-top: 1px solid #9C9CFF;
76 color: #FF9F00;
77 line-height: 120%;
78 cursor: pointer;
79 display: flex;
80 position: relative;
81}
82
83.project-item:hover {
84 background-color: #FFCF00;
85 color: #000000;
86}
87
88.project-item:hover strong,
89.project-item:hover p,
90.project-item:hover span {
91 color: #000000;
92}
93
94.project-item > * {
95 flex-shrink: 0;
96}
97
98.project-item.selected {
99 background-color: #008484;
100}
101
102.project-item.selected strong {
103 color: #FFCF00;
104}
105
106.project-item.selected p,
107.project-item.selected span {
108 color: #000000;
109}
110
111.button-remove {
112 background-image: url('remove.svg');
113 background-size: 20px;
114 width: 20px;
115 height: 20px;
116 position: absolute;
117 right: 5px;
118 bottom: 5px;
119 visibility: hidden;
120}
121
122.project-item:hover .button-remove {
123 visibility: visible;
124}
125
126.project-item-status {
127 width: 6px;
128 margin: -10px 0;
129 border-right: 1px solid #9C9CFF;
130}
131
132.project-item-status[status="valid"] {
133 background-color: #008484;
134}
135
136.project-item-status[status~="warning"] {
137 background-color: #FFCF00;
138}
139
140.project-item-status[status~="error"] {
141 background-color: #FF0000;
142}
143
144.project-item-icon {
145 width: 32px;
146 height: 32px;
147 margin: 0 10px;
148}
149
150.project-item-meta {
151 flex-grow: 1;
152 flex-shrink: 1 !important;
153}
154
155.project-item-type {
156 font-size: 10px;
157 line-height: 20px;
158 float: right;
159 padding-right: 10px;
160 color: #9C9CFF;
161 text-transform: uppercase;
162}
163
164.project-item-description {
165 color: #A09090;
166 font-size: 90%;
167}
168
169/********* ADD PROJECT ***********/
170
171#new-packaged-project {
172 background-position: calc(100% - 10px) 10px;
173}
174
175#new-packaged-project,
176#new-hosted-project {
177 background-color: #000000;
178 border: none;
179 border-top: 1px solid #9C9CFF;
180 padding: 10px;
181 font-weight: bold;
182}
183
184#new-packaged-project:hover,
185#new-hosted-project:hover {
186 background-color: #FFCF00;
187 color: #000000;
188}
189
190#new-hosted-project-wrapper {
191 display: flex;
192 align-items: center;
193}
194
195#new-packaged-project,
196#new-hosted-project-click {
197 background-image: url('plus.svg');
198 background-size: 20px;
199 background-repeat: no-repeat;
200 cursor: pointer;
201}
202
203#new-hosted-project-click {
204 background-position: top right;
205 width: 20px;
206 height: 20px;
207 margin-left: 5px;
208}
209
210#url-input {
211 flex-grow: 1;
212 width: 90%;
213 box-shadow: none;
214 border-radius: 3px;
215 border: 1px solid #9C9CFF;
216 padding: 4px;
217 margin-top: 4px;
218}
219
220
221/********* LENSE ***********/
222
223
224#lense {
225 height: 100%;
226 flex-grow: 1;
227 display: flex;
228 z-index: 1;
229 overflow: hidden;
230 background-color: #000000;
231 background-image: url('rocket.svg');
232 background-repeat: no-repeat, repeat;
233 background-size: 35%, auto;
234 background-position: center center, top left;
235}
236
237#lense > div {
238 display: flex;
239 flex-grow: 1;
240 flex-direction: column;
241}
242
243
244/********* PROJECT ***********/
245
246
247.project-details {
248 background-color: #000000;
249 padding: 10px;
250 line-height: 160%;
251 display: flex;
252 flex-direction: column;
253}
254
255.project-metadata {
256 flex-grow: 1;
257}
258
259.project-status {
260 display: flex;
261}
262
263.project-title {
264 flex-direction: row;
265 display: flex;
266 align-items: flex-start;
267 padding-bottom: 10px;
268 border-bottom: 1px solid #A09090;
269 margin-bottom: 10px;
270}
271
272.project-title > h1 {
273 flex-grow: 1;
274 font-size: 24px;
275}
276
277.project-location {
278 color: gray;
279 font-size: 10px;
280 cursor: pointer;
281 font-family: monospace;
282}
283
284.project-location:hover {
285 text-decoration: underline;
286}
287
288.project-header {
289 display: flex;
290 border-bottom: 1px solid #A09090;
291 margin: 10px 20px 10px 20px;
292 padding-bottom: 10px;
293}
294
295.project-icon {
296 flex-shrink: 0;
297 width: 64px;
298 height: 64px;
299 margin-right: 10px;
300}
301
302.project-location {
303 font-size: 11px;
304 color: #9C9CFF;
305}
306
307.project-description {
308 font-style: italic;
309 color: #A09090;
310}
311
312.project-status > p {
313 text-transform: uppercase;
314 font-size: 10px;
315 padding: 2px 10px;
316 border-radius: 2px;
317 margin-top: 6px;
318 line-height: 10px;
319}
320
321.project-validation {
322 color: #000000;
323 display: none;
324 margin-left: 10px;
325}
326
327.project-validation.valid {
328 background-color: #008484;
329}
330
331.project-validation.warning {
332 background-color: #FF9F00;
333}
334
335.project-validation.error {
336 background-color: #FF0000;
337}
338
339[status="valid"] > .project-validation.valid,
340[status~="warning"] > .project-validation.warning,
341[status~="error"] > .project-validation.error {
342 display: inline;
343}
344
345.project-type {
346 display: none;
347 margin-left: 10px;
348}
349[type="hosted"] > .project-type.hosted,
350[type="packaged"] > .project-type.packaged {
351 display: inline;
352}
353
354
355/********* PROJECT BUTTONS ***********/
356
357
358
359.project-buttons {
360 display: flex;
361 margin-left: 20px;
362 color: #FF9F00;
363}
364
365.project-buttons > button {
366 margin: 0;
367 font-size: 11px;
368 border-left-width: 0;
369 padding-top: 1px;
370 padding-bottom: 2px;
371 -moz-padding-start: .5em;
372 -moz-padding-end: calc(.5em + 1px);
373 border: none;
374 border-radius: 300px;
375 cursor: pointer;
376 background-color: #C09070;
377 text-transform: uppercase;
378}
379
380.project-buttons > button:hover:active {
381 padding-top: 2px;
382 padding-bottom: 1px;
383 -moz-padding-start: calc(.5em + 1px);
384 -moz-padding-end: .5em;
385}
386
387.project-buttons > button:not([disabled]):hover {
388 background-color: #FFCF00;
389 color: #000000;
390}
391
392.project-buttons > button[disabled] {
393 background-color: #402858;
394 color: #000000;
395 pointer-events: none;
396}
397
398.project-buttons > button:first-child {
399 border-left-width: 1px;
400}
401/*
402.project-button-debug {
403 color: #3498DB;
404}
405
406.project-button-debug:hover {
407 background-color: #3498DB;
408 color: #FFF;
409}
410
411.project-button-debug[disabled] {
412 color: #3498DB;
413}
414
415.project-button-update {
416 color: #777;
417}
418
419.project-button-update:hover {
420 background-color: #777;
421 color: #FFF;
422}
423
424.project-button-update[disabled] {
425 color: #777;
426}
427*/
428
429
430/********* ERRORS AND WARNINGS ***********/
431
432.project-warnings,
433.project-errors,
434.project-item-warnings,
435.project-item-errors {
436 display: none;
437}
438
439[status~="warning"] .project-item-warnings,
440[status~="error"] .project-item-errors {
441 display: inline-block;
442}
443
444[status~="warning"] > .project-warnings,
445[status~="error"] > .project-errors {
446 display: block;
447}
448
449.project-warnings,
450.project-errors {
451 margin: 20px 20px 0;
452 padding: 10px 10px;
453 font-family: monospace;
454 color: #000000;
455}
456
457.project-warnings {
458 border-left: 3px solid #9C9CFF;
459 background-color: #FF9F00;
460}
461
462.project-errors {
463 border-left: 3px solid #9C9CFF;
464 background-color: #FF0000;
465}
466
467.project-item-warnings {
468 background-image: url('warning.svg');
469 color: #FFCF00;
470}
471
472.project-item-errors {
473 background-image: url('error.svg');
474 color: #FF0000;
475}
476
477.project-item-warnings,
478.project-item-errors {
479 background-repeat: no-repeat;
480 background-size: 12px;
481 background-position: left center;
482 margin-top: 6px;
483}
484
485.project-item-warnings > span,
486.project-item-errors > span {
487 font-size: 11px;
488 padding-left: 16px;
489 font-weight: bold;
490}
491
492
493/********* MANIFEST EDITOR ***********/
494
495.manifest-editor {
496 display: flex;
497 flex-direction: column;
498 flex-grow: 1;
499 background-color: #000000;
500}
501
502.manifest-header {
503 display: flex;
504 flex-direction: row;
505}
506
507.manifest-header > h2 {
508 font-size: 18px;
509 margin: 1em 15px 1em 30px;
510 display: none;
511}
512
513.manifest-header > button {
514 margin: 18px 0;
515 font-size: 11px;
516 border-right-width: 0;
517 padding-top: 1px;
518 padding-bottom: 2px;
519 -moz-padding-start: .5em;
520 -moz-padding-end: calc(.5em + 1px);
521 border: none;
522 border-radius: 300px;
523 cursor: pointer;
524 background-color: #C09070;
525 text-transform: uppercase;
526 display: none;
527}
528
529.manifest-header > button:hover:active {
530 padding-top: 2px;
531 padding-bottom: 1px;
532 -moz-padding-start: calc(.5em + 1px);
533 -moz-padding-end: .5em;
534}
535
536.manifest-header > button:not([disabled]):hover {
537 background-color: #FFCF00;
538 color: #000000;
539}
540
541.manifest-header > button[disabled] {
542 background-color: #402858;
543 color: #000000;
544 pointer-events: none;
545}
546
547.manifest-header > button:last-child {
548 border-right-width: 1px;
549}
550
551[type="packaged"] > .editable {
552 display: block;
553}
554
555[type="hosted"] > .viewable {
556 display: block;
557}
558/*
559.manifest-button-save {
560 color: #777;
561}
562
563.manifest-button-save:hover {
564 background-color: #777;
565 color: #FFF;
566}
567
568.manifest-button-save[disabled] {
569 color: #777;
570}
571*/
572.variables-view {
573 flex-grow: 1;
574 border: 0;
575 border-top: 5px solid #9C9CFF;
576}
577
578/* Bug 925921: Remove when the manifest editor is always on */
579
580.manifest-editor {
581 display: none;
582}
583
584.project-details {
585 flex-grow: 1;
586}
587
588#lense[manifest-editable] .manifest-editor {
589 display: flex;
590}
591
592#lense[manifest-editable] .project-details {
593 flex-grow: 0;
594}
595
596/* End blocks to remove */