← Back to branch summary

~wasta-linux/wasta-core-wily/master

« back to all changes in this revision

Viewing changes to install-files/firefox-addons/extensions/{8a01dfcc-450f-11e5-909b-fb581d5d46b0}/chrome/browser/devtools/app-manager/projects.css

  • Committer: Rik Shaw
  • Date: 2015-11-01 13:28:40 UTC
  • Revision ID: git-v1:59c62c9b2e4f4f1cf62db1f5dc1cf630feb99933
initial 15.10 commit

Show diffs side-by-side

added added

removed removed

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