LCARStrek/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   -moz-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: #FF9F00;
  23   background-color: #000000;
  24   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  25   overflow: hidden;
  26 }
  27
  28 body:not(.connected) button.device-action {
  29   display: none;
  30 }
  31
  32 strong {
  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
 346 /********* PROJECT BUTTONS ***********/
 347
 348
 349
 350 .project-buttons {
 351   display: flex;
 352   margin-left: 20px;
 353   color: #FF9F00;
 354 }
 355
 356 .project-buttons > button {
 357   margin: 0;
 358   font-size: 11px;
 359   border-left-width: 0;
 360   padding-top: 1px;
 361   padding-bottom: 2px;
 362   -moz-padding-start: .5em;
 363   -moz-padding-end: calc(.5em + 1px);
 364   border: none;
 365   border-radius: 300px;
 366   cursor: pointer;
 367   background-color: #C09070;
 368   text-transform: uppercase;
 369 }
 370
 371 .project-buttons > button:hover:active {
 372   padding-top: 2px;
 373   padding-bottom: 1px;
 374   -moz-padding-start: calc(.5em + 1px);
 375   -moz-padding-end: .5em;
 376 }
 377
 378 .project-buttons > button:not([disabled]):hover {
 379   background-color: #FFCF00;
 380   color: #000000;
 381 }
 382
 383 .project-buttons > button[disabled] {
 384   background-color: #402858;
 385   color: #000000;
 386   pointer-events: none;
 387 }
 388
 389 .project-buttons > button:first-child {
 390   border-left-width: 1px;
 391 }
 392 /*
 393 .project-button-debug {
 394   color: #3498DB;
 395 }
 396
 397 .project-button-debug:hover {
 398   background-color: #3498DB;
 399   color: #FFF;
 400 }
 401
 402 .project-button-debug[disabled] {
 403   color: #3498DB;
 404 }
 405
 406 .project-button-update {
 407   color: #777;
 408 }
 409
 410 .project-button-update:hover {
 411   background-color: #777;
 412   color: #FFF;
 413 }
 414
 415 .project-button-update[disabled] {
 416   color: #777;
 417 }
 418 */
 419
 420
 421 /********* ERRORS AND WARNINGS ***********/
 422
 423 .project-warnings,
 424 .project-errors,
 425 .project-item-warnings,
 426 .project-item-errors {
 427   display: none;
 428 }
 429
 430 [status~="warning"] .project-item-warnings,
 431 [status~="error"] .project-item-errors {
 432   display: inline-block;
 433 }
 434
 435 [status~="warning"] > .project-warnings,
 436 [status~="error"] > .project-errors {
 437   display: block;
 438 }
 439
 440 .project-warnings,
 441 .project-errors {
 442   margin: 20px 20px 0;
 443   padding: 10px 10px;
 444   font-family: monospace;
 445 }
 446
 447 .project-warnings {
 448   border-left: 3px solid #9C9CFF;
 449   background-color: #FF9F00;
 450 }
 451
 452 .project-errors {
 453   border-left: 3px solid #9C9CFF;
 454   background-color: #FF0000;
 455 }
 456
 457 .project-item-warnings {
 458   background-image: url('warning.svg');
 459   color: #FFCF00;
 460 }
 461
 462 .project-item-errors {
 463   background-image: url('error.svg');
 464   color: #FF0000;
 465 }
 466
 467 .project-item-warnings,
 468 .project-item-errors {
 469   background-repeat: no-repeat;
 470   background-size: 12px;
 471   background-position: left center;
 472   margin-top: 6px;
 473 }
 474
 475 .project-item-warnings > span,
 476 .project-item-errors > span {
 477   font-size: 11px;
 478   padding-left: 16px;
 479   font-weight: bold;
 480 }
 481
 482
 483 /********* MANIFEST EDITOR ***********/
 484
 485 .manifest-editor {
 486   display: flex;
 487   flex-direction: column;
 488   flex-grow: 1;
 489   background-color: #000000;
 490 }
 491
 492 .manifest-header {
 493   display: flex;
 494   flex-direction: row;
 495 }
 496
 497 .manifest-header > h2 {
 498   font-size: 18px;
 499   margin: 1em 15px 1em 30px;
 500   display: none;
 501 }
 502
 503 .manifest-header > button {
 504   margin: 18px 0;
 505   font-size: 11px;
 506   border-right-width: 0;
 507   padding-top: 1px;
 508   padding-bottom: 2px;
 509   -moz-padding-start: .5em;
 510   -moz-padding-end: calc(.5em + 1px);
 511   border: none;
 512   border-radius: 300px;
 513   cursor: pointer;
 514   background-color: #C09070;
 515   text-transform: uppercase;
 516   display: none;
 517 }
 518
 519 .manifest-header > button:hover:active {
 520   padding-top: 2px;
 521   padding-bottom: 1px;
 522   -moz-padding-start: calc(.5em + 1px);
 523   -moz-padding-end: .5em;
 524 }
 525
 526 .manifest-header > button:not([disabled]):hover {
 527   background-color: #FFCF00;
 528   color: #000000;
 529 }
 530
 531 .manifest-header > button[disabled] {
 532   background-color: #402858;
 533   color: #000000;
 534   pointer-events: none;
 535 }
 536
 537 .manifest-header > button:last-child {
 538   border-right-width: 1px;
 539 }
 540
 541 [type="packaged"] > .editable {
 542   display: block;
 543 }
 544
 545 [type="hosted"] > .viewable {
 546   display: block;
 547 }
 548 /*
 549 .manifest-button-save {
 550   color: #777;
 551 }
 552
 553 .manifest-button-save:hover {
 554   background-color: #777;
 555   color: #FFF;
 556 }
 557
 558 .manifest-button-save[disabled] {
 559   color: #777;
 560 }
 561 */
 562 .variables-view {
 563   flex-grow: 1;
 564   border: 0;
 565   border-top: 5px solid #9C9CFF;
 566 }
 567
 568 /* Bug 925921: Remove when the manifest editor is always on */
 569
 570 .manifest-editor {
 571   display: none;
 572 }
 573
 574 .project-details {
 575   flex-grow: 1;
 576 }
 577
 578 #lense[manifest-editable] .manifest-editor {
 579   display: flex;
 580 }
 581
 582 #lense[manifest-editable] .project-details {
 583   flex-grow: 0;
 584 }
 585
 586 /* End blocks to remove */