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