LCARStrek/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: #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 .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   padding-inline-start: .5em;
 372   padding-inline-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   padding-inline-start: calc(.5em + 1px);
 384   padding-inline-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   padding-inline-start: .5em;
 520   padding-inline-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   padding-inline-start: calc(.5em + 1px);
 533   padding-inline-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 */