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