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 /* Responsive container */
  22
  23 .devtools-responsive-container {
  24   -moz-box-orient: horizontal;
  25 }
  26
  27 @media (max-width: 700px) {
  28   .devtools-responsive-container {
  29     -moz-box-orient: vertical;
  30   }
  31
  32   .devtools-responsive-container > .devtools-side-splitter {
  33     border: 0;
  34     margin: 0;
  35     min-height: 3px;
  36     height: 3px;
  37     margin-bottom: -3px;
  38     /* In some edge case the cursor is not changed to n-resize */
  39     cursor: n-resize;
  40   }
  41
  42   .devtools-responsive-container > .devtools-sidebar-tabs {
  43     min-height: 35vh;
  44     max-height: 75vh;
  45   }
  46 }
  47
  48 /* BreacrumbsWidget */
  49
  50 .breadcrumbs-widget-container {
  51   -moz-margin-start: 2px;
  52   -moz-margin-start: 2px;
  53   max-height: 25px; /* Set max-height for proper sizing on linux */
  54   height: 25px; /* Set height to prevent starting small waiting for content */
  55   /* A fake 1px-shadow is included in the border-images of the
  56      breadcrumbs-widget-items, to match toolbar-buttons style.
  57      This negative margin compensates the extra row of pixels created
  58      by the shadow.*/
  59 /*  margin: -1px 0;*/
  60 }
  61
  62 .scrollbutton-up,
  63 .scrollbutton-down {
  64   background: transparent;
  65   box-shadow: none;
  66   border: none;
  67   margin: 0;
  68   padding: 0;
  69 }
  70
  71 .scrollbutton-up {
  72   -moz-margin-end: 1px;
  73 }
  74
  75 .scrollbutton-down {
  76   -moz-margin-end: 0;
  77 }
  78
  79 .scrollbutton-up > .toolbarbutton-icon,
  80 .scrollbutton-down > .toolbarbutton-icon {
  81   /* margin: 0 5px; */
  82 }
  83
  84 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
  85 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
  86 }
  87
  88 .scrollbutton-up[disabled] > .toolbarbutton-icon,
  89 .scrollbutton-down[disabled] > .toolbarbutton-icon {
  90 }
  91
  92 .scrollbutton-up:-moz-locale-dir(ltr) {
  93   border-top-right-radius: 0;
  94   border-bottom-right-radius: 0;
  95 }
  96
  97 .scrollbutton-down:-moz-locale-dir(ltr) {
  98   border-top-left-radius: 0;
  99   border-bottom-left-radius: 0;
 100 }
 101
 102 .scrollbutton-up:-moz-locale-dir(rtl) {
 103   border-top-left-radius: 0;
 104   border-bottom-left-radius: 0;
 105 }
 106
 107 .scrollbutton-down:-moz-locale-dir(rtl) {
 108   border-top-right-radius: 0;
 109   border-bottom-right-radius: 0;
 110 }
 111
 112 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
 113 /*
 114 .scrollbutton-up:-moz-locale-dir(ltr),
 115 .scrollbutton-down:-moz-locale-dir(rtl) {
 116   border-right: solid 1px rgba(255, 255, 255, .1);
 117   border-left: solid 1px transparent;
 118   box-shadow: 3px 0px 3px -3px #181d20;
 119 }
 120
 121 .scrollbutton-down:-moz-locale-dir(ltr),
 122 .scrollbutton-up:-moz-locale-dir(rtl) {
 123   border-right: solid 1px transparent;
 124   border-left: solid 1px rgba(255, 255, 255, .1);
 125   box-shadow: -3px 0px 3px -3px #181d20;
 126 }
 127
 128 .scrollbutton-up[disabled],
 129 .scrollbutton-down[disabled] {
 130   box-shadow: none;
 131   border-color: transparent;
 132 }
 133 */
 134
 135 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
 136 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
 137 /*  transform: scaleX(-1); */
 138 }
 139
 140 /* The breadcrumb separator elements are used as background images with
 141  * -moz-element, so we position them offscreen since we don't care about
 142  * seeing the original elements.
 143  */
 144 .breadcrumb-separator-container {
 145   position: fixed;
 146   top: -1000px;
 147   left: -1000px;
 148 }
 149
 150 #breadcrumb-separator-before,
 151 #breadcrumb-separator-after,
 152 #breadcrumb-separator-normal {
 153   width: 12px;
 154   height: 25px;
 155   overflow: hidden;
 156 }
 157
 158 #breadcrumb-separator-before,
 159 #breadcrumb-separator-after:after {
 160   background: #008484; /* Select Highlight Blue */
 161 }
 162
 163 #breadcrumb-separator-after,
 164 #breadcrumb-separator-before:after {
 165   background: #000000; /* Toolbars */
 166 }
 167
 168 /* This chevron arrow cannot be replicated easily in CSS, so we are using
 169  * a background image for it (still keeping it in a separate element so
 170  * we can handle RTL support with a CSS transform).
 171  */
 172 #breadcrumb-separator-normal {
 173   background: url("breadcrumbs-divider@2x.png") no-repeat center right;
 174   background-size: 12px 24px;
 175 }
 176
 177 /* Fake a triangle by rotating a rectangle inside the elements */
 178 #breadcrumb-separator-before:after,
 179 #breadcrumb-separator-after:after {
 180   content: "";
 181   display: block;
 182   width: 25px;
 183   height: 25px;
 184   transform: translateX(-18px) rotate(45deg);
 185   box-sizing: border-box;
 186 }
 187
 188 .breadcrumbs-widget-item {
 189   background-color: #000000;
 190   min-height: 25px;
 191   min-width: 65px;
 192   margin: 0;
 193   padding: 0 8px 0 20px;
 194   border: none;
 195   border-radius: 0;
 196   outline: none;
 197   color: #FF9F00;
 198 }
 199
 200 .breadcrumbs-widget-item:hover {
 201   background-color: #FFCF00;
 202   color: #000000;
 203 }
 204
 205 .breadcrumbs-widget-item[checked]:not(:hover) {
 206   background-color: #008484;
 207   color: #000000;
 208 }
 209
 210 .breadcrumbs-widget-item[siblings-menu-open],
 211 .breadcrumbs-widget-item:active {
 212   background-color: #FF9F00;
 213   color: #000000;
 214 }
 215
 216 .breadcrumbs-widget-item:not([checked]) {
 217   background-image: -moz-element(#breadcrumb-separator-normal);
 218   background-repeat: no-repeat;
 219   background-position: center left;
 220 }
 221
 222 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
 223   background-image: -moz-element(#breadcrumb-separator-after);
 224   background-repeat: no-repeat;
 225   background-position: 0 0;
 226 }
 227
 228 .breadcrumbs-widget-item[checked] {
 229   background-image: -moz-element(#breadcrumb-separator-before);
 230   background-repeat: no-repeat;
 231   background-position: 0 0;
 232   background-color: #008484; /* Select Highlight Blue */
 233 }
 234
 235 .breadcrumbs-widget-item:first-child {
 236   background-image: none;
 237 }
 238
 239 /* RTL support: move the images that were on the left to the right,
 240  * and move images that were on the right to the left.
 241  */
 242 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
 243   padding: 0 20px 0 8px;
 244 }
 245
 246 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
 247 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
 248   background-position: center right;
 249 }
 250
 251 #breadcrumb-separator-before:-moz-locale-dir(rtl),
 252 #breadcrumb-separator-after:-moz-locale-dir(rtl),
 253 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
 254   transform: scaleX(-1);
 255 }
 256
 257 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
 258 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
 259   transform: translateX(-5px) rotate(45deg);
 260 }
 261
 262 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
 263 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
 264 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
 265 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
 266   color: #FF9F00; /* Foreground (Text) - Light */
 267 }
 268
 269 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
 270 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
 271 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
 272 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
 273   color: #000000 !important;
 274 }
 275
 276 .breadcrumbs-widget-item {
 277   color: #FFCF00; /* Foreground (Text) - Light */
 278 }
 279
 280 .breadcrumbs-widget-item-id {
 281   color: #A09090; /* Foreground (Text) - Grey */
 282 }
 283
 284 .breadcrumbs-widget-item-classes {
 285   color: #FF9F00; /* Content (Text) - Light */
 286 }
 287
 288 .breadcrumbs-widget-item-pseudo-classes {
 289   color: #FFCF00; /* Light Orange */
 290 }
 291
 292 /* SimpleListWidget */
 293
 294 .simple-list-widget-container {
 295   /* Hack: force hardware acceleration */
 296   transform: translateZ(1px);
 297 }
 298
 299 .simple-list-widget-item.selected {
 300   background-color: #008484; /* Select Highlight Blue */
 301   color: #FFCF00; /* Light foreground text */
 302 }
 303
 304 .simple-list-widget-item:not(.selected):hover {
 305   background-color: #FFCF00;
 306   color: #FFCF00;
 307 }
 308
 309 .simple-list-widget-perma-text,
 310 .simple-list-widget-empty-text {
 311   color: #8050B0;
 312   padding: 4px 8px;
 313 }
 314
 315 /* FastListWidget */
 316
 317 .fast-list-widget-container {
 318   /* Hack: force hardware acceleration */
 319   transform: translateZ(1px);
 320 }
 321
 322 /* dark/light theme */
 323 .fast-list-widget-empty-text {
 324   padding: 12px;
 325   font-weight: 600;
 326   color: #8050B0;
 327 }
 328
 329 /* SideMenuWidget */
 330
 331 /* SideMenuWidget container */
 332
 333 .side-menu-widget-container {
 334   /* Hack: force hardware acceleration */
 335   transform: translateZ(1px);
 336
 337   background-color: #000000;
 338   color: #FF9F00;
 339 }
 340
 341 .side-menu-widget-container:-moz-locale-dir(ltr),
 342 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
 343 }
 344
 345 .side-menu-widget-container:-moz-locale-dir(rtl),
 346 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
 347 }
 348
 349 .side-menu-widget-group {
 350   /* To allow visibility of the dark margin shadow. */
 351 /*  -moz-margin-end: 1px; */
 352 }
 353
 354 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
 355   /* To compensate for the arrow image's dark margin. */
 356 /*  -moz-margin-end: -1px; */
 357 }
 358
 359 /* SideMenuWidget groups */
 360
 361 .side-menu-widget-group-title {
 362   padding: 4px;
 363
 364   background-color: #A09090;
 365   color: #000000;
 366 }
 367
 368 /* SideMenuWidget items */
 369
 370 .side-menu-widget-item {
 371   border-top: 1px solid #9C9CFF;
 372   /* To compensate for the top and bottom borders */
 373   margin-top: -1px;
 374   margin-bottom: -1px;
 375   background-clip: padding-box;
 376 }
 377
 378 .side-menu-widget-item:last-of-type {
 379   border-bottom: 1px solid #9C9CFF;
 380 }
 381
 382 .side-menu-widget-item.selected {
 383   background-color: #008484 !important;
 384   color: #000000;
 385 }
 386
 387 .side-menu-widget-item-arrow {
 388   -moz-margin-start: -7px;
 389   width: 7px; /* The image's width is 7 pixels */
 390   /* Cover the border of the side-menu-widget-item */
 391   margin-top: -1px;
 392   margin-bottom: -1px;
 393 }
 394
 395 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
 396   background-size: auto, 1px 100%;
 397   background-repeat: no-repeat;
 398 }
 399
 400 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 401   background-position: center right;
 402 }
 403
 404 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 405   background-position: center left;
 406 }
 407
 408 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 409   background-image: url("itemArrow-ltr.svg");
 410 }
 411
 412 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 413   background-image: url("itemArrow-rtl.svg");
 414 }
 415
 416 /* SideMenuWidget items contents */
 417
 418 .side-menu-widget-item-contents {
 419   padding: 4px;
 420   /* To avoid having content overlapping the arrow image. */
 421   -moz-padding-end: 8px;
 422 }
 423
 424 .side-menu-widget-item-other {
 425   /* To avoid having content overlapping the arrow image. */
 426   -moz-padding-end: 8px;
 427   /* To compensate for the .side-menu-widget-item-contents padding. */
 428   -moz-margin-start: -4px;
 429   -moz-margin-end: -8px;
 430
 431   background-color: #000000;
 432 }
 433
 434 .side-menu-widget-item-other.selected {
 435   background-color: #008484;
 436   color: #000000;
 437 }
 438
 439 .side-menu-widget-item-other:first-of-type {
 440   margin-top: 4px;
 441 /*  border-top-left-radius: 4px; */
 442 }
 443
 444 .side-menu-widget-item-other:last-of-type {
 445   margin-bottom: -4px;
 446 }
 447
 448 .side-menu-widget-item-other:not(.selected) > label {
 449   color: #9C9CFF;
 450 }
 451
 452 /* SideMenuWidget checkboxes */
 453
 454 .side-menu-widget-group-checkbox {
 455   margin: 0;
 456   -moz-margin-end: 4px;
 457 }
 458
 459 .side-menu-widget-item-checkbox {
 460   margin: 0;
 461   -moz-margin-start: 4px;
 462   -moz-margin-end: -4px;
 463 }
 464
 465 /* SideMenuWidget misc */
 466
 467 .side-menu-widget-empty-text {
 468   padding: 12px;
 469
 470   background-color: #000000;
 471   font-weight: 600;
 472   color: #A09090;
 473 }
 474
 475 /* VariablesView */
 476
 477 .variables-view-container:not([empty]) {
 478   /* Hack: force hardware acceleration */
 479   transform: translateZ(1px);
 480 }
 481
 482 .variables-view-empty-notice {
 483   color: #A09090;
 484   padding: 2px;
 485 }
 486
 487 .variables-view-scope:focus > .title,
 488 .theme-dark .variable-or-property:focus > .title {
 489   background-color: #008484; /* Selection colors */
 490   color: #FFCF00;
 491 }
 492
 493 .variables-view-scope > .title {
 494   background-color: #A09090;
 495   color: #000000;
 496 }
 497
 498 /* Generic variables traits */
 499
 500 .variables-view-variable:not(:last-child) {
 501   border-bottom: 1px solid #A09090;
 502 }
 503
 504 .variables-view-variable > .title > .name {
 505   font-weight: 600;
 506 }
 507
 508 /* Generic variables *and* properties traits */
 509
 510 .variable-or-property:focus > .title > label {
 511   color: inherit !important;
 512 }
 513
 514 .variable-or-property > .title > .arrow {
 515   -moz-margin-start: 3px;
 516 }
 517
 518 .variable-or-property:not([untitled]) > .variables-view-element-details {
 519   -moz-margin-start: 7px;
 520 }
 521
 522 /* Traits applied when variables or properties are changed or overridden */
 523
 524 .variable-or-property:not([overridden]) {
 525   transition: background 1s ease-in-out, color 1s ease-in-out;
 526 }
 527
 528 .variable-or-property:not([overridden])[changed] {
 529   color: #000000;
 530   transition-duration: .4s;
 531 }
 532
 533 .variable-or-property[overridden] {
 534   background: rgba(160,144,144,0.0.5);
 535 }
 536
 537 .variable-or-property[overridden] .title > label {
 538   /* Cross out the title for this variable and all child properties. */
 539   font-style: italic;
 540   text-decoration: line-through;
 541   border-bottom: none !important;
 542   color: #A09090;
 543   opacity: 0.7;
 544 }
 545
 546 /* Traits applied when variables or properties are editable */
 547
 548 .variable-or-property[editable] > .title > .value {
 549   cursor: text;
 550 }
 551
 552 .variable-or-property[overridden] .title > .value {
 553   /* Disallow editing this variable and all child properties. */
 554   pointer-events: none;
 555 }
 556
 557 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
 558  * variables and properties */
 559
 560 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
 561   opacity: 0.6;
 562 }
 563
 564 .variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name {
 565   border-bottom: 1px dashed #9C9CFF;
 566 }
 567
 568 .variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
 569   border-bottom: 1px dashed #FF0000;
 570 }
 571
 572 .variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
 573   border-bottom: 1px dashed #A09090;
 574 }
 575
 576 .variable-or-property-non-writable-icon {
 577   background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
 578   width: 16px;
 579   height: 16px;
 580   opacity: 0.5;
 581 }
 582
 583 @media (min-resolution: 2dppx) {
 584   .variable-or-property-non-writable-icon > .title:after {
 585     background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
 586     background-size: 32px;
 587   }
 588 }
 589
 590 .variable-or-property-frozen-label,
 591 .variable-or-property-sealed-label,
 592 .variable-or-property-non-extensible-label {
 593   -moz-padding-end: 4px;
 594 }
 595
 596 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
 597 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
 598 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
 599   color: #A09090;
 600 }
 601
 602 /* Aligned values */
 603
 604 .variables-view-container[aligned-values] .title > .separator {
 605   -moz-box-flex: 1;
 606 }
 607
 608 .variables-view-container[aligned-values] .title > .value {
 609   -moz-box-flex: 0;
 610   width: 70vw;
 611 }
 612
 613 .variables-view-container[aligned-values] .title > .element-value-input {
 614   width: calc(70vw - 10px);
 615 }
 616
 617 /* Actions first */
 618
 619 .variables-view-container[actions-first] .variables-view-delete,
 620 .variables-view-container[actions-first] .variables-view-open-inspector,
 621 .variables-view-container[actions-first] .variables-view-add-property {
 622   -moz-box-ordinal-group: 0;
 623 }
 624
 625 .variables-view-container[actions-first] [invisible] {
 626   visibility: hidden;
 627 }
 628
 629 /* Variables and properties tooltips */
 630
 631 .variable-or-property > tooltip > label {
 632   margin: 0 2px 0 2px;
 633 }
 634
 635 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
 636 .variable-or-property[non-configurable] > tooltip > label.configurable,
 637 .variable-or-property[non-writable] > tooltip > label.writable
 638 .variable-or-property[non-extensible] > tooltip > label.extensible {
 639   color: #A09090;
 640   text-decoration: line-through;
 641 }
 642
 643 .variable-or-property[overridden] > tooltip > label.overridden {
 644   -moz-padding-start: 4px;
 645   -moz-border-start: 1px dotted #9C9CFF;
 646 }
 647
 648 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
 649   -moz-padding-start: 4px;
 650   -moz-border-start: 1px dotted #9C9CFF;
 651   color: #008484;
 652 }
 653
 654 /* Variables and properties editing */
 655
 656 .variables-view-delete {
 657   list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
 658   -moz-image-region: rect(0,16px,16px,0);
 659 }
 660
 661 .variables-view-delete:hover {
 662   -moz-image-region: rect(0,48px,16px,32px);
 663 }
 664
 665 .variables-view-delete:active {
 666   -moz-image-region: rect(0,32px,16px,16px);
 667 }
 668
 669 .variable-or-property:focus .variables-view-delete {
 670 /*  -moz-image-region: rect(0,16px,16px,0); */
 671 }
 672
 673 .variables-view-edit {
 674   list-style-image: url("chrome://browser/skin/devtools/vview-edit.png");
 675   -moz-image-region: rect(0,16px,16px,0);
 676   cursor: pointer;
 677   padding-left: 2px;
 678 }
 679
 680 .variables-view-edit:hover {
 681  -moz-image-region: rect(0,48px,16px,32px);
 682 }
 683
 684 .variables-view-edit:active {
 685   -moz-image-region: rect(0,32px,16px,16px);
 686 }
 687
 688 .variable-or-property:focus .variables-view-edit {
 689 /*  -moz-image-region: rect(0,16px,16px,0); */
 690 }
 691
 692 .variables-view-open-inspector {
 693   list-style-image: url("chrome://browser/skin/devtools/vview-open-inspector.png");
 694   -moz-image-region: rect(0,16px,16px,0);
 695   cursor: pointer;
 696 }
 697
 698 .variables-view-open-inspector:hover {
 699   -moz-image-region: rect(0,48px,16px,32px);
 700 }
 701
 702 .variables-view-open-inspector:active {
 703   -moz-image-region: rect(0,32px,16px,16px);
 704 }
 705
 706 .variable-or-property:focus .variables-view-open-inspector {
 707 /*  -moz-image-region: rect(0,16px,16px,0); */
 708 }
 709
 710 .variables-view-throbber {
 711   background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
 712   width: 16px;
 713   height: 16px;
 714 }
 715
 716 .element-value-input {
 717   -moz-margin-start: -2px !important;
 718   -moz-margin-end: 2px !important;
 719 }
 720
 721 .element-name-input {
 722   -moz-margin-start: -2px !important;
 723   -moz-margin-end: 2px !important;
 724   font-weight: 600;
 725 }
 726
 727 .element-value-input,
 728 .element-name-input {
 729   border: 1px solid #008484 !important;
 730   color: inherit;
 731 }
 732
 733 /* Variables and properties searching */
 734
 735 .variables-view-searchinput {
 736   min-height: 24px;
 737 }
 738
 739 .variable-or-property[unmatched] {
 740   border: none;
 741   margin: 0;
 742 }
 743
 744 /* Expand/collapse arrow */
 745
 746 .arrow {
 747   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
 748   width: 9px;
 749   height: 16px;
 750   -moz-margin-start: 5px;
 751   -moz-margin-end: 5px;
 752 }
 753
 754 .variables-view-scope > .title > .arrow {
 755   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
 756 }
 757
 758 .arrow[open] {
 759   background-image: url("chrome://global/skin/tree/twisty-open.gif");
 760 }
 761
 762 .variables-view-scope > .title > .arrow[open] {
 763   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
 764 }
 765
 766 .arrow[invisible] {
 767   visibility: hidden;
 768 }
 769
 770 /* Charts */
 771
 772 .generic-chart-container {
 773   /* Hack: force hardware acceleration */
 774   transform: translateZ(1px);
 775 }
 776
 777 .generic-chart-container {
 778   color: #A09090; /* Light foreground text */
 779 }
 780
 781 .chart-colored-blob {
 782   fill: #9C9CFF; /* Light content text */
 783   background: #9C9CFF;
 784 }
 785
 786 /* Charts: Pie */
 787
 788 .pie-chart-slice {
 789   stroke-width: 1px;
 790   cursor: pointer;
 791 }
 792
 793 .pie-chart-slice {
 794   stroke: #A09090;
 795 }
 796
 797 .pie-chart-slice[largest] {
 798   stroke-width: 2px;
 799   stroke: #9C9CFF;
 800 }
 801
 802 .pie-chart-label {
 803   text-anchor: middle;
 804   dominant-baseline: middle;
 805   pointer-events: none;
 806 }
 807
 808 .pie-chart-label {
 809   fill: #000;
 810 }
 811
 812 .pie-chart-container[slices="1"] > .pie-chart-slice {
 813   stroke-width: 0px;
 814 }
 815
 816 .pie-chart-slice,
 817 .pie-chart-label {
 818   transition: all 0.1s ease-out;
 819 }
 820
 821 .pie-chart-slice:not(:hover):not([focused]),
 822 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
 823   transform: none !important;
 824 }
 825
 826 /* Charts: Table */
 827
 828 .table-chart-title {
 829   padding-bottom: 10px;
 830   font-size: 120%;
 831   font-weight: 600;
 832 }
 833
 834 .table-chart-row {
 835   margin-top: 1px;
 836   cursor: pointer;
 837 }
 838
 839 .table-chart-grid:hover > .table-chart-row {
 840   transition: opacity 0.1s ease-in-out;
 841 }
 842
 843 .table-chart-grid:not(:hover) > .table-chart-row {
 844   transition: opacity 0.2s ease-in-out;
 845 }
 846
 847 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
 848 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
 849   opacity: 0.4;
 850 }
 851
 852 .table-chart-row-box {
 853   width: 8px;
 854   height: 1.5em;
 855   -moz-margin-end: 10px;
 856 }
 857
 858 .table-chart-row-label {
 859   width: 8em;
 860   -moz-padding-end: 6px;
 861   cursor: inherit;
 862 }
 863
 864 .table-chart-totals {
 865   margin-top: 8px;
 866   padding-top: 6px;
 867 }
 868
 869 .table-chart-totals {
 870   border-top: 1px solid #A09090; /* Grey foreground text */
 871 }
 872
 873 .table-chart-summary-label {
 874   font-weight: 600;
 875   padding: 1px 0px;
 876 }
 877
 878 .table-chart-summary-label {
 879   color: #A09090; /* Light foreground text */
 880 }
 881
 882 /* === BEGIN manifest-editor.inc.css === */
 883
 884 /* Manifest Editor overrides */
 885
 886 .variables-view-container.manifest-editor {
 887   background-color: #000000;
 888   padding: 20px 2px;
 889 }
 890
 891 .manifest-editor .variable-or-property:focus > .title {
 892 /*  background-color: #EDEDED;
 893   color: #000; */
 894   border-radius: 4px;
 895 }
 896
 897 .manifest-editor .variables-view-property > .title > .name {
 898 /*  color: #27406A; */
 899 }
 900
 901 .manifest-editor .variable-or-property > .title > label,
 902 .manifest-editor textbox {
 903   font-family: monospace;
 904 }
 905
 906 .manifest-editor .variable-or-property > .title > .token-string {
 907 /*  color: #54BC6A; */
 908   font-weight: bold;
 909 }
 910
 911 .manifest-editor .variable-or-property > .title > .token-boolean,
 912 .manifest-editor .variable-or-property > .title > .token-number {
 913 /*  color: #009BD4; */
 914   font-weight: bold;
 915 }
 916
 917 .manifest-editor .variable-or-property > .title > .token-undefined {
 918 /*  color: #bbb; */
 919 }
 920
 921 .manifest-editor .variable-or-property > .title > .token-null {
 922 /*  color: #999; */
 923 }
 924
 925 .manifest-editor .variable-or-property > .title > .token-other {
 926 /*  color: #333; */
 927 }
 928
 929 .manifest-editor .variables-view-variable {
 930   border-bottom: none;
 931 }
 932
 933 .manifest-editor .variables-view-delete,
 934 .manifest-editor .variables-view-delete:hover,
 935 .manifest-editor .variables-view-delete:active,
 936 .manifest-editor .variable-or-property:focus .variables-view-delete,
 937 .manifest-editor .variables-view-add-property,
 938 .manifest-editor .variables-view-add-property:hover,
 939 .manifest-editor .variables-view-add-property:active,
 940 .manifest-editor .variable-or-property:focus .variables-view-add-property {
 941   list-style-image: none;
 942   -moz-image-region: initial;
 943 }
 944
 945 .manifest-editor .variables-view-delete::before,
 946 .manifest-editor .variables-view-add-property::before {
 947   width: 11px;
 948   height: 11px;
 949   content: "";
 950   display: inline-block;
 951   background-size: 11px auto;
 952 }
 953
 954 .manifest-editor .variables-view-delete::before {
 955   background-image: url("app-manager/remove.svg");
 956   background-size: 12px auto;
 957 }
 958
 959 .manifest-editor .variables-view-add-property::before {
 960   background-image: url("app-manager/add.svg");
 961   -moz-margin-end: 2px;
 962 }
 963
 964 /* === END manifest-editor.inc.css === */
 965
 966 /* === END widgets.inc.css === */