LCARStrek/browser/devtools/widgets.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 /* === BEGIN widgets.inc.css === */
   7
   8 /* Generic pane helpers */
   9
  10 .generic-toggled-side-pane {
  11   -moz-margin-start: 0px !important;
  12   /* Unfortunately, transitions don't work properly with locale-aware properties,
  13      so both the left and right margins are set via js, while the start margin
  14      is always overridden here. */
  15 }
  16
  17 .generic-toggled-side-pane[animated] {
  18   transition: margin 0.25s ease-in-out;
  19 }
  20
  21 /* BreacrumbsWidget */
  22
  23 .breadcrumbs-widget-container {
  24   -moz-margin-end: 3px;
  25   max-height: 25px; /* Set max-height for proper sizing on linux */
  26   height: 25px; /* Set height to prevent starting small waiting for content */
  27   /* A fake 1px-shadow is included in the border-images of the
  28      breadcrumbs-widget-items, to match toolbar-buttons style.
  29      This negative margin compensates the extra row of pixels created
  30      by the shadow.*/
  31 /*  margin: -1px 0;*/
  32 }
  33
  34 .scrollbutton-up,
  35 .scrollbutton-down {
  36   background: transparent;
  37   box-shadow: none;
  38   border: none;
  39   margin: 0;
  40   padding: 0;
  41 }
  42
  43 .scrollbutton-up {
  44   -moz-margin-end: 1px;
  45 }
  46
  47 .scrollbutton-down {
  48   -moz-margin-end: 0;
  49 }
  50
  51 .scrollbutton-up > .toolbarbutton-icon,
  52 .scrollbutton-down > .toolbarbutton-icon {
  53   /* margin: 0 5px; */
  54 }
  55
  56 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
  57 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
  58 }
  59
  60 .scrollbutton-up[disabled] > .toolbarbutton-icon,
  61 .scrollbutton-down[disabled] > .toolbarbutton-icon {
  62 }
  63
  64 .scrollbutton-up:-moz-locale-dir(ltr) {
  65   border-top-right-radius: 0;
  66   border-bottom-right-radius: 0;
  67 }
  68
  69 .scrollbutton-down:-moz-locale-dir(ltr) {
  70   border-top-left-radius: 0;
  71   border-bottom-left-radius: 0;
  72 }
  73
  74 .scrollbutton-up:-moz-locale-dir(rtl) {
  75   border-top-left-radius: 0;
  76   border-bottom-left-radius: 0;
  77 }
  78
  79 .scrollbutton-down:-moz-locale-dir(rtl) {
  80   border-top-right-radius: 0;
  81   border-bottom-right-radius: 0;
  82 }
  83
  84 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
  85 /*
  86 .scrollbutton-up:-moz-locale-dir(ltr),
  87 .scrollbutton-down:-moz-locale-dir(rtl) {
  88   border-right: solid 1px rgba(255, 255, 255, .1);
  89   border-left: solid 1px transparent;
  90   box-shadow: 3px 0px 3px -3px #181d20;
  91 }
  92
  93 .scrollbutton-down:-moz-locale-dir(ltr),
  94 .scrollbutton-up:-moz-locale-dir(rtl) {
  95   border-right: solid 1px transparent;
  96   border-left: solid 1px rgba(255, 255, 255, .1);
  97   box-shadow: -3px 0px 3px -3px #181d20;
  98 }
  99
 100 .scrollbutton-up[disabled],
 101 .scrollbutton-down[disabled] {
 102   box-shadow: none;
 103   border-color: transparent;
 104 }
 105 */
 106
 107 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
 108 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
 109 /*  transform: scaleX(-1); */
 110 }
 111
 112 /* The breadcrumb separator elements are used as background images with
 113  * -moz-element, so we position them offscreen since we don't care about
 114  * seeing the original elements.
 115  */
 116 .breadcrumb-separator-container {
 117   position: fixed;
 118   top: -1000px;
 119   left: -1000px;
 120 }
 121
 122 #breadcrumb-separator-before,
 123 #breadcrumb-separator-after,
 124 #breadcrumb-separator-normal {
 125   width: 12px;
 126   height: 25px;
 127   overflow: hidden;
 128 }
 129
 130 #breadcrumb-separator-before,
 131 #breadcrumb-separator-after:after {
 132   background: #9C9CFF; /* Select Highlight Blue */
 133 }
 134
 135 #breadcrumb-separator-after,
 136 #breadcrumb-separator-before:after {
 137   background: #9C9CFF; /* Toolbars */
 138 }
 139
 140 /* This chevron arrow cannot be replicated easily in CSS, so we are using
 141  * a background image for it (still keeping it in a separate element so
 142  * we can handle RTL support with a CSS transform).
 143  */
 144 #breadcrumb-separator-normal {
 145   background: url("breadcrumbs-divider@2x.png") no-repeat center right;
 146   background-size: 12px 24px;
 147 }
 148
 149 /* Fake a triangle by rotating a rectangle inside the elements */
 150 #breadcrumb-separator-before:after,
 151 #breadcrumb-separator-after:after {
 152   content: "";
 153   display: block;
 154   width: 25px;
 155   height: 25px;
 156   transform: translateX(-18px) rotate(45deg);
 157   -moz-box-sizing: border-box;
 158 }
 159
 160 .breadcrumbs-widget-item {
 161   background-color: #000000;
 162   min-height: 25px;
 163   min-width: 65px;
 164   margin: 0;
 165   padding: 0 8px 0 20px;
 166   border: none;
 167   outline: none;
 168   color: #FF9F00;
 169 }
 170
 171 .breadcrumbs-widget-item:hover {
 172   background-color: #FFCF00;
 173   color: #000000;
 174 }
 175
 176 .breadcrumbs-widget-item[checked]:not(:hover) {
 177   background-color: #008484;
 178   color: #000000;
 179 }
 180
 181 .breadcrumbs-widget-item[siblings-menu-open],
 182 .breadcrumbs-widget-item:active {
 183   background-color: #FF9F00;
 184   color: #000000;
 185 }
 186
 187 .breadcrumbs-widget-item:not([checked]) {
 188   background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
 189  }
 190
 191 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
 192   background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
 193 }
 194
 195 .breadcrumbs-widget-item[checked] {
 196   background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
 197   background-color: #008484; /* Select Highlight Blue */
 198 }
 199
 200 .breadcrumbs-widget-item:first-child {
 201   background-image: none;
 202 }
 203
 204 /* RTL support: move the images that were on the left to the right,
 205  * and move images that were on the right to the left.
 206  */
 207 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
 208   padding: 0 20px 0 8px;
 209 }
 210
 211 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
 212 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
 213   background-position: center right;
 214 }
 215
 216 #breadcrumb-separator-before:-moz-locale-dir(rtl),
 217 #breadcrumb-separator-after:-moz-locale-dir(rtl),
 218 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
 219   transform: scaleX(-1);
 220 }
 221
 222 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
 223 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
 224   transform: translateX(-5px) rotate(45deg);
 225 }
 226
 227 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
 228 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
 229 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
 230 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
 231   color: #FF9F00; /* Foreground (Text) - Light */
 232 }
 233
 234 .theme-dark .breadcrumbs-widget-item-id {
 235   color: #A09090; /* Foreground (Text) - Grey */
 236 }
 237
 238 .breadcrumbs-widget-item-pseudo-classes {
 239   color: #FFCF00; /* Light Orange */
 240 }
 241
 242 /* SimpleListWidget */
 243
 244 .simple-list-widget-item:not(.selected):hover {
 245   background: #FFCF00;
 246   color: #FFCF00;
 247 }
 248
 249 .simple-list-widget-item.selected {
 250   background: #008484;
 251   color: #FFCF00;
 252 }
 253
 254 .simple-list-widget-perma-text,
 255 .simple-list-widget-empty-text {
 256   color: #8050B0;
 257   padding: 4px 8px;
 258 }
 259
 260 /* FastListWidget */
 261
 262 .fast-list-widget-container {
 263   /* Hack: force hardware acceleration */
 264   transform: translateZ(1px);
 265 }
 266
 267 /* dark/light theme */
 268 .fast-list-widget-empty-text {
 269   padding: 12px;
 270   font-weight: 600;
 271   color: #8050B0;
 272 }
 273
 274 /* SideMenuWidget */
 275
 276 /* SideMenuWidget container */
 277
 278 .side-menu-widget-container {
 279   /* Hack: force hardware acceleration */
 280   transform: translateZ(1px);
 281
 282   background-color: #000000;
 283   color: #FF9F00;
 284 }
 285
 286 .side-menu-widget-container:-moz-locale-dir(ltr),
 287 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
 288 }
 289
 290 .side-menu-widget-container:-moz-locale-dir(rtl),
 291 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
 292 }
 293
 294 .side-menu-widget-group {
 295   /* To allow visibility of the dark margin shadow. */
 296 /*  -moz-margin-end: 1px; */
 297 }
 298
 299 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
 300   /* To compensate for the arrow image's dark margin. */
 301 /*  -moz-margin-end: -1px; */
 302 }
 303
 304 /* SideMenuWidget groups */
 305
 306 .side-menu-widget-group-title {
 307   padding: 4px;
 308
 309   background-color: #A09090;
 310   color: #000000;
 311 }
 312
 313 /* SideMenuWidget items */
 314
 315 .side-menu-widget-item {
 316   border-top: 1px solid #9C9CFF;
 317   /* To compensate for the top and bottom borders */
 318   margin-top: -1px;
 319   margin-bottom: -1px;
 320   background-clip: padding-box;
 321 }
 322
 323 .side-menu-widget-item:last-of-type {
 324   border-bottom: 1px solid #9C9CFF;
 325 }
 326
 327 .side-menu-widget-item.selected {
 328   background-color: #008484 !important;
 329   color: #000000;
 330 }
 331
 332 .side-menu-widget-item-arrow {
 333   -moz-margin-start: -7px;
 334   width: 7px; /* The image's width is 7 pixels */
 335   /* Cover the border of the side-menu-widget-item */
 336   margin-top: -1px;
 337   margin-bottom: -1px;
 338 }
 339
 340 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
 341   background-size: auto, 1px 100%;
 342   background-repeat: no-repeat;
 343 }
 344
 345 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 346   background-position: center right;
 347 }
 348
 349 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 350   background-position: center left;
 351 }
 352
 353 .theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 354   background-image: url("itemArrow-ltr.svg");
 355 }
 356
 357 .theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 358   background-image: url("itemArrow-rtl.svg");
 359 }
 360
 361 /* SideMenuWidget items contents */
 362
 363 .side-menu-widget-item-contents {
 364   padding: 4px;
 365   /* To avoid having content overlapping the arrow image. */
 366   -moz-padding-end: 8px;
 367 }
 368
 369 .side-menu-widget-item-other {
 370   /* To avoid having content overlapping the arrow image. */
 371   -moz-padding-end: 8px;
 372   /* To compensate for the .side-menu-widget-item-contents padding. */
 373   -moz-margin-start: -4px;
 374   -moz-margin-end: -8px;
 375
 376   background-color: #000000;
 377 }
 378
 379 .side-menu-widget-item-other.selected {
 380   background-color: #008484;
 381   color: #000000;
 382 }
 383
 384 .side-menu-widget-item-other:first-of-type {
 385   margin-top: 4px;
 386 /*  border-top-left-radius: 4px; */
 387 }
 388
 389 .side-menu-widget-item-other:last-of-type {
 390   margin-bottom: -4px;
 391 }
 392
 393 .side-menu-widget-item-other:not(.selected) > label {
 394   color: #9C9CFF;
 395 }
 396
 397 /* SideMenuWidget checkboxes */
 398
 399 .side-menu-widget-group-checkbox {
 400   margin: 0;
 401   -moz-margin-end: 4px;
 402 }
 403
 404 .side-menu-widget-item-checkbox {
 405   margin: 0;
 406   -moz-margin-start: 4px;
 407   -moz-margin-end: -4px;
 408 }
 409
 410 /* SideMenuWidget misc */
 411
 412 .side-menu-widget-empty-text {
 413   padding: 12px;
 414
 415   background-color: #000000;
 416   font-weight: 600;
 417   color: #A09090;
 418 }
 419
 420 /* VariablesView */
 421
 422 .variables-view-container:not([empty]) {
 423   /* Hack: force hardware acceleration */
 424   transform: translateZ(1px);
 425 }
 426
 427 .variables-view-empty-notice {
 428   color: #A09090;
 429   padding: 2px;
 430 }
 431
 432 .variables-view-scope > .title {
 433   background-color: #A09090;
 434   color: #000000;
 435 }
 436
 437 /* Generic variables traits */
 438
 439 .variables-view-variable:not(:last-child) {
 440   border-bottom: 1px solid #A09090;
 441 }
 442
 443 .variables-view-variable > .title > .name {
 444   font-weight: 600;
 445 }
 446
 447 /* Generic variables *and* properties traits */
 448
 449 .variable-or-property:focus > .title > label {
 450   color: inherit !important;
 451 }
 452
 453 .variable-or-property > .title > .value {
 454   -moz-box-flex: 1;
 455 }
 456
 457 .variable-or-property > .title > .arrow {
 458   -moz-margin-start: 3px;
 459 }
 460
 461 .variable-or-property:not([untitled]) > .variables-view-element-details {
 462   -moz-margin-start: 7px;
 463 }
 464
 465 /* Traits applied when variables or properties are changed or overridden */
 466
 467 .variable-or-property:not([overridden]) {
 468   transition: background 1s ease-in-out, color 1s ease-in-out;
 469 }
 470
 471 .variable-or-property:not([overridden])[changed] {
 472   color: #000000;
 473   transition-duration: .4s;
 474 }
 475
 476 .variable-or-property[overridden] {
 477   background: rgba(160,144,144,0.0.5);
 478 }
 479
 480 .variable-or-property[overridden] .title > label {
 481   /* Cross out the title for this variable and all child properties. */
 482   font-style: italic;
 483   text-decoration: line-through;
 484   border-bottom: none !important;
 485   color: #A09090;
 486   opacity: 0.7;
 487 }
 488
 489 /* Traits applied when variables or properties are editable */
 490
 491 .variable-or-property[editable] > .title > .value {
 492   cursor: text;
 493 }
 494
 495 .variable-or-property[overridden] .title > .value {
 496   /* Disallow editing this variable and all child properties. */
 497   pointer-events: none;
 498 }
 499
 500 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
 501  * variables and properties */
 502
 503 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
 504   opacity: 0.6;
 505 }
 506
 507 .variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name {
 508   border-bottom: 1px dashed #9C9CFF;
 509 }
 510
 511 .variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
 512   border-bottom: 1px dashed #FF0000;
 513 }
 514
 515 .variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
 516   border-bottom: 1px dashed #A09090;
 517 }
 518
 519 .variable-or-property-non-writable-icon {
 520   background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
 521   width: 16px;
 522   height: 16px;
 523   opacity: 0.5;
 524 }
 525
 526 @media (min-resolution: 2dppx) {
 527   .variable-or-property-non-writable-icon > .title:after {
 528     background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
 529     background-size: 32px;
 530   }
 531 }
 532
 533 .variable-or-property-frozen-label,
 534 .variable-or-property-sealed-label,
 535 .variable-or-property-non-extensible-label {
 536   -moz-padding-end: 4px;
 537 }
 538
 539 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
 540 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
 541 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
 542   color: #A09090;
 543 }
 544
 545 /* Aligned values */
 546
 547 .variables-view-container[aligned-values] .title > .separator {
 548   -moz-box-flex: 1;
 549 }
 550
 551 .variables-view-container[aligned-values] .title > .value {
 552   -moz-box-flex: 0;
 553   width: 70vw;
 554 }
 555
 556 .variables-view-container[aligned-values] .title > .element-value-input {
 557   width: calc(70vw - 10px);
 558 }
 559
 560 /* Actions first */
 561
 562 .variables-view-container[actions-first] .variables-view-delete,
 563 .variables-view-container[actions-first] .variables-view-add-property {
 564   -moz-box-ordinal-group: 0;
 565 }
 566
 567 .variables-view-container[actions-first] [invisible] {
 568   visibility: hidden;
 569 }
 570
 571 /* Variables and properties tooltips */
 572
 573 .variable-or-property > tooltip > label {
 574   margin: 0 2px 0 2px;
 575 }
 576
 577 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
 578 .variable-or-property[non-configurable] > tooltip > label.configurable,
 579 .variable-or-property[non-writable] > tooltip > label.writable
 580 .variable-or-property[non-extensible] > tooltip > label.extensible {
 581   color: #A09090;
 582   text-decoration: line-through;
 583 }
 584
 585 .variable-or-property[overridden] > tooltip > label.overridden {
 586   -moz-padding-start: 4px;
 587   -moz-border-start: 1px dotted #9C9CFF;
 588 }
 589
 590 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
 591   -moz-padding-start: 4px;
 592   -moz-border-start: 1px dotted #9C9CFF;
 593   color: #008484;
 594 }
 595
 596 /* Variables and properties editing */
 597
 598 .variables-view-delete {
 599   list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
 600   -moz-image-region: rect(0, 16px, 16px, 0);
 601 }
 602
 603 .variables-view-delete:hover {
 604   -moz-image-region: rect(0, 32px, 16px, 16px);
 605 }
 606
 607 .variables-view-delete:active {
 608   -moz-image-region: rect(0, 48px, 16px, 32px);
 609 }
 610
 611 .variables-view-edit {
 612   background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
 613   width: 20px;
 614   height: 16px;
 615   cursor: pointer;
 616 }
 617
 618 .variables-view-throbber {
 619   background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
 620   width: 16px;
 621   height: 16px;
 622 }
 623
 624 .element-value-input {
 625   -moz-margin-start: -2px !important;
 626   -moz-margin-end: 2px !important;
 627 }
 628
 629 .element-name-input {
 630   -moz-margin-start: -2px !important;
 631   -moz-margin-end: 2px !important;
 632   font-weight: 600;
 633 }
 634
 635 .element-value-input,
 636 .element-name-input {
 637   border: 1px solid #008484 !important;
 638   color: inherit;
 639 }
 640
 641 /* Variables and properties searching */
 642
 643 .variables-view-searchinput {
 644   min-height: 24px;
 645 }
 646
 647 .variable-or-property[unmatched] {
 648   border: none;
 649   margin: 0;
 650 }
 651
 652 /* Expand/collapse arrow */
 653
 654 .arrow {
 655   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
 656   width: 9px;
 657   height: 16px;
 658   -moz-margin-start: 5px;
 659   -moz-margin-end: 5px;
 660 }
 661
 662 .variables-view-scope > .title > .arrow {
 663   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
 664 }
 665
 666 .arrow[open] {
 667   background-image: url("chrome://global/skin/tree/twisty-open.gif");
 668 }
 669
 670 .variables-view-scope > .title > .arrow[open] {
 671   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
 672 }
 673
 674 .arrow[invisible] {
 675   visibility: hidden;
 676 }
 677
 678 /* === BEGIN manifest-editor.inc.css === */
 679
 680 /* Manifest Editor overrides */
 681
 682 .variables-view-container.manifest-editor {
 683   background-color: #000000;
 684   padding: 20px 2px;
 685 }
 686
 687 .manifest-editor .variable-or-property:focus > .title {
 688 /*  background-color: #EDEDED;
 689   color: #000; */
 690   border-radius: 4px;
 691 }
 692
 693 .manifest-editor .variables-view-property > .title > .name {
 694 /*  color: #27406A; */
 695 }
 696
 697 .manifest-editor .variable-or-property > .title > label,
 698 .manifest-editor textbox {
 699   font-family: monospace;
 700 }
 701
 702 .manifest-editor .variable-or-property > .title > .token-string {
 703 /*  color: #54BC6A; */
 704   font-weight: bold;
 705 }
 706
 707 .manifest-editor .variable-or-property > .title > .token-boolean,
 708 .manifest-editor .variable-or-property > .title > .token-number {
 709 /*  color: #009BD4; */
 710   font-weight: bold;
 711 }
 712
 713 .manifest-editor .variable-or-property > .title > .token-undefined {
 714 /*  color: #bbb; */
 715 }
 716
 717 .manifest-editor .variable-or-property > .title > .token-null {
 718 /*  color: #999; */
 719 }
 720
 721 .manifest-editor .variable-or-property > .title > .token-other {
 722 /*  color: #333; */
 723 }
 724
 725 .manifest-editor .variables-view-variable {
 726   border-bottom: none;
 727 }
 728
 729 .manifest-editor .variables-view-delete,
 730 .manifest-editor .variables-view-delete:hover,
 731 .manifest-editor .variables-view-delete:active,
 732 .manifest-editor .variables-view-add-property:hover,
 733 .manifest-editor .variables-view-add-property:active {
 734   list-style-image: none;
 735   -moz-image-region: initial;
 736 }
 737
 738 .manifest-editor .variables-view-delete::before,
 739 .manifest-editor .variables-view-add-property::before {
 740   width: 11px;
 741   height: 11px;
 742   content: "";
 743   display: inline-block;
 744   background-size: 11px auto;
 745 }
 746
 747 .manifest-editor .variables-view-delete::before {
 748   background-image: url("app-manager/remove.svg");
 749   background-size: 12px auto;
 750 }
 751
 752 .manifest-editor .variables-view-add-property::before {
 753   background-image: url("app-manager/add.svg");
 754   -moz-margin-end: 2px;
 755 }
 756
 757 /* === END manifest-editor.inc.css === */
 758
 759 /* === END widgets.inc.css === */