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 .devtools-main-content {
  28   min-width: 50px;
  29 }
  30
  31 .devtools-main-content,
  32 .devtools-sidebar-tabs {
  33   /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
  34   position: relative;
  35 }
  36
  37 @media (max-width: 700px) {
  38   .devtools-responsive-container {
  39     -moz-box-orient: vertical;
  40   }
  41
  42   .devtools-responsive-container > .devtools-side-splitter {
  43     border: 0;
  44     margin: 0;
  45     min-height: 3px;
  46     height: 3px;
  47     margin-bottom: -3px;
  48     /* In some edge case the cursor is not changed to n-resize */
  49     cursor: n-resize;
  50   }
  51
  52   .devtools-responsive-container > .devtools-sidebar-tabs {
  53     min-height: 35vh;
  54     max-height: 75vh;
  55   }
  56 }
  57
  58 /* BreacrumbsWidget */
  59
  60 .breadcrumbs-widget-container {
  61   -moz-margin-start: 2px;
  62   -moz-margin-start: 2px;
  63   max-height: 24px; /* Set max-height for proper sizing on linux */
  64   height: 24px; /* Set height to prevent starting small waiting for content */
  65 }
  66
  67 .scrollbutton-up,
  68 .scrollbutton-down {
  69   background: transparent;
  70   box-shadow: none;
  71   border: none;
  72   margin: 0;
  73   padding: 0;
  74 }
  75
  76 .scrollbutton-up {
  77   -moz-margin-end: 1px;
  78 }
  79
  80 .scrollbutton-down {
  81   -moz-margin-end: 0;
  82 }
  83
  84 .scrollbutton-up > .toolbarbutton-icon,
  85 .scrollbutton-down > .toolbarbutton-icon {
  86   /* margin: 0 5px; */
  87 }
  88
  89 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
  90 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
  91 }
  92
  93 .scrollbutton-up[disabled] > .toolbarbutton-icon,
  94 .scrollbutton-down[disabled] > .toolbarbutton-icon {
  95 }
  96
  97 .scrollbutton-up:-moz-locale-dir(ltr) {
  98   border-top-right-radius: 0;
  99   border-bottom-right-radius: 0;
 100 }
 101
 102 .scrollbutton-down:-moz-locale-dir(ltr) {
 103   border-top-left-radius: 0;
 104   border-bottom-left-radius: 0;
 105 }
 106
 107 .scrollbutton-up:-moz-locale-dir(rtl) {
 108   border-top-left-radius: 0;
 109   border-bottom-left-radius: 0;
 110 }
 111
 112 .scrollbutton-down:-moz-locale-dir(rtl) {
 113   border-top-right-radius: 0;
 114   border-bottom-right-radius: 0;
 115 }
 116
 117 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
 118 /*
 119 .scrollbutton-up:-moz-locale-dir(ltr),
 120 .scrollbutton-down:-moz-locale-dir(rtl) {
 121   border-right: solid 1px rgba(255, 255, 255, .1);
 122   border-left: solid 1px transparent;
 123   box-shadow: 3px 0px 3px -3px #181d20;
 124 }
 125
 126 .scrollbutton-down:-moz-locale-dir(ltr),
 127 .scrollbutton-up:-moz-locale-dir(rtl) {
 128   border-right: solid 1px transparent;
 129   border-left: solid 1px rgba(255, 255, 255, .1);
 130   box-shadow: -3px 0px 3px -3px #181d20;
 131 }
 132
 133 .scrollbutton-up[disabled],
 134 .scrollbutton-down[disabled] {
 135   box-shadow: none;
 136   border-color: transparent;
 137 }
 138 */
 139
 140 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
 141 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
 142 /*  transform: scaleX(-1); */
 143 }
 144
 145 /* The breadcrumb separator elements are used as background images with
 146  * -moz-element, so we position them offscreen since we don't care about
 147  * seeing the original elements.
 148  */
 149 .breadcrumb-separator-container {
 150   position: fixed;
 151   top: -1000px;
 152   left: -1000px;
 153 }
 154
 155 #breadcrumb-separator-before,
 156 #breadcrumb-separator-after,
 157 #breadcrumb-separator-normal {
 158   width: 12px;
 159   height: 24px;
 160   overflow: hidden;
 161 }
 162
 163 #breadcrumb-separator-before,
 164 #breadcrumb-separator-after:after {
 165   background: #008484; /* Select Highlight Blue */
 166 }
 167
 168 #breadcrumb-separator-after,
 169 #breadcrumb-separator-before:after {
 170   background: #000000; /* Toolbars */
 171 }
 172
 173 /* This chevron arrow cannot be replicated easily in CSS, so we are using
 174  * a background image for it (still keeping it in a separate element so
 175  * we can handle RTL support with a CSS transform).
 176  */
 177 #breadcrumb-separator-normal {
 178   background: url("breadcrumbs-divider@2x.png") no-repeat center right;
 179   background-size: 12px 24px;
 180 }
 181
 182 /* Fake a triangle by rotating a rectangle inside the elements */
 183 #breadcrumb-separator-before:after,
 184 #breadcrumb-separator-after:after {
 185   content: "";
 186   display: block;
 187   width: 25px;
 188   height: 24px;
 189   transform: translateX(-18px) rotate(45deg);
 190   box-sizing: border-box;
 191 }
 192
 193 .breadcrumbs-widget-item {
 194   background-color: #000000;
 195   min-height: 24px;
 196   min-width: 65px;
 197   margin: 0;
 198   padding: 0 8px 0 20px;
 199   border: none;
 200   border-radius: 0;
 201   outline: none;
 202   color: #FF9F00;
 203 }
 204
 205 .breadcrumbs-widget-item:hover {
 206   background-color: #FFCF00;
 207   color: #000000;
 208 }
 209
 210 .breadcrumbs-widget-item[checked]:not(:hover) {
 211   background-color: #008484;
 212   color: #000000;
 213 }
 214
 215 .breadcrumbs-widget-item[siblings-menu-open],
 216 .breadcrumbs-widget-item:active {
 217   background-color: #FF9F00;
 218   color: #000000;
 219 }
 220
 221 .breadcrumbs-widget-item > .button-box {
 222   border: none;
 223   padding-top: 0;
 224   padding-bottom: 0;
 225 }
 226
 227 .breadcrumbs-widget-item:not([checked]) {
 228   background-image: -moz-element(#breadcrumb-separator-normal);
 229   background-repeat: no-repeat;
 230   background-position: center left;
 231 }
 232
 233 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
 234   background-image: -moz-element(#breadcrumb-separator-after);
 235   background-repeat: no-repeat;
 236   background-position: 0 0;
 237 }
 238
 239 .breadcrumbs-widget-item[checked] {
 240   background-image: -moz-element(#breadcrumb-separator-before);
 241   background-repeat: no-repeat;
 242   background-position: 0 0;
 243   background-color: #008484; /* Select Highlight Blue */
 244 }
 245
 246 .breadcrumbs-widget-item:first-child {
 247   background-image: none;
 248 }
 249
 250 /* RTL support: move the images that were on the left to the right,
 251  * and move images that were on the right to the left.
 252  */
 253 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
 254   padding: 0 20px 0 8px;
 255 }
 256
 257 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
 258 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
 259   background-position: center right;
 260 }
 261
 262 #breadcrumb-separator-before:-moz-locale-dir(rtl),
 263 #breadcrumb-separator-after:-moz-locale-dir(rtl),
 264 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
 265   transform: scaleX(-1);
 266 }
 267
 268 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
 269 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
 270   transform: translateX(-5px) rotate(45deg);
 271 }
 272
 273 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
 274 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
 275 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
 276 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
 277   color: #FF9F00; /* Foreground (Text) - Light */
 278 }
 279
 280 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
 281 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
 282 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
 283 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
 284   color: #000000 !important;
 285 }
 286
 287 .breadcrumbs-widget-item {
 288   color: #FFCF00; /* Foreground (Text) - Light */
 289 }
 290
 291 .breadcrumbs-widget-item-id {
 292   color: #A09090; /* Foreground (Text) - Grey */
 293 }
 294
 295 .breadcrumbs-widget-item-classes {
 296   color: #FF9F00; /* Content (Text) - Light */
 297 }
 298
 299 .breadcrumbs-widget-item-pseudo-classes {
 300   color: #FFCF00; /* Light Orange */
 301 }
 302
 303 /* SimpleListWidget */
 304
 305 .simple-list-widget-container {
 306   /* Hack: force hardware acceleration */
 307   transform: translateZ(1px);
 308 }
 309
 310 .simple-list-widget-item.selected {
 311   background-color: #008484; /* Select Highlight Blue */
 312   color: #FFCF00; /* Light foreground text */
 313 }
 314
 315 .simple-list-widget-item:not(.selected):hover {
 316   background-color: #FFCF00;
 317   color: #FFCF00;
 318 }
 319
 320 .simple-list-widget-perma-text,
 321 .simple-list-widget-empty-text {
 322   color: #8050B0;
 323   padding: 4px 8px;
 324 }
 325
 326 /* FastListWidget */
 327
 328 .fast-list-widget-container {
 329   /* Hack: force hardware acceleration */
 330   transform: translateZ(1px);
 331 }
 332
 333 /* dark/light theme */
 334 .fast-list-widget-empty-text {
 335   padding: 12px;
 336   font-weight: 600;
 337   color: #8050B0;
 338 }
 339
 340 /* SideMenuWidget */
 341
 342 /* SideMenuWidget container */
 343
 344 .side-menu-widget-container {
 345   /* Hack: force hardware acceleration */
 346   transform: translateZ(1px);
 347
 348   background-color: #000000;
 349   color: #FF9F00;
 350 }
 351
 352 .side-menu-widget-container:-moz-locale-dir(ltr),
 353 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
 354 }
 355
 356 .side-menu-widget-container:-moz-locale-dir(rtl),
 357 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
 358 }
 359
 360 .side-menu-widget-group {
 361   /* To allow visibility of the dark margin shadow. */
 362 /*  -moz-margin-end: 1px; */
 363 }
 364
 365 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
 366   /* To compensate for the arrow image's dark margin. */
 367 /*  -moz-margin-end: -1px; */
 368 }
 369
 370 /* SideMenuWidget groups */
 371
 372 .side-menu-widget-group-title {
 373   padding: 4px;
 374
 375   background-color: #A09090;
 376   color: #000000;
 377 }
 378
 379 /* SideMenuWidget items */
 380
 381 .side-menu-widget-item {
 382   border-top: 1px solid #9C9CFF;
 383   /* To compensate for the top and bottom borders */
 384   margin-top: -1px;
 385   margin-bottom: -1px;
 386   background-clip: padding-box;
 387 }
 388
 389 .side-menu-widget-item:last-of-type {
 390   border-bottom: 1px solid #9C9CFF;
 391 }
 392
 393 .side-menu-widget-item.selected {
 394   background-color: #008484 !important;
 395   color: #000000;
 396 }
 397
 398 .side-menu-widget-item-arrow {
 399   -moz-margin-start: -7px;
 400   width: 7px; /* The image's width is 7 pixels */
 401   /* Cover the border of the side-menu-widget-item */
 402   margin-top: -1px;
 403   margin-bottom: -1px;
 404 }
 405
 406 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
 407   background-size: auto, 1px 100%;
 408   background-repeat: no-repeat;
 409 }
 410
 411 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 412   background-position: center right;
 413 }
 414
 415 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 416   background-position: center left;
 417 }
 418
 419 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 420   background-image: url("itemArrow-ltr.svg");
 421 }
 422
 423 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 424   background-image: url("itemArrow-rtl.svg");
 425 }
 426
 427 /* SideMenuWidget items contents */
 428
 429 .side-menu-widget-item-contents {
 430   padding: 4px;
 431   /* To avoid having content overlapping the arrow image. */
 432   -moz-padding-end: 8px;
 433 }
 434
 435 .side-menu-widget-item-other {
 436   /* To avoid having content overlapping the arrow image. */
 437   -moz-padding-end: 8px;
 438   /* To compensate for the .side-menu-widget-item-contents padding. */
 439   -moz-margin-start: -4px;
 440   -moz-margin-end: -8px;
 441
 442   background-color: #000000;
 443 }
 444
 445 .side-menu-widget-item-other.selected {
 446   background-color: #008484;
 447   color: #000000;
 448 }
 449
 450 .side-menu-widget-item-other:first-of-type {
 451   margin-top: 4px;
 452 /*  border-top-left-radius: 4px; */
 453 }
 454
 455 .side-menu-widget-item-other:last-of-type {
 456   margin-bottom: -4px;
 457 }
 458
 459 .side-menu-widget-item-other:not(.selected) > label {
 460   color: #9C9CFF;
 461 }
 462
 463 /* SideMenuWidget checkboxes */
 464
 465 .side-menu-widget-group-checkbox {
 466   margin: 0;
 467   -moz-margin-end: 4px;
 468 }
 469
 470 .side-menu-widget-item-checkbox {
 471   margin: 0;
 472   -moz-margin-start: 4px;
 473   -moz-margin-end: -4px;
 474 }
 475
 476 /* SideMenuWidget misc */
 477
 478 .side-menu-widget-empty-text {
 479   padding: 12px;
 480
 481   background-color: #000000;
 482   font-weight: 600;
 483   color: #A09090;
 484 }
 485
 486 /* VariablesView */
 487
 488 .variables-view-container:not([empty]) {
 489   /* Hack: force hardware acceleration */
 490   transform: translateZ(1px);
 491 }
 492
 493 .variables-view-empty-notice {
 494   color: #A09090;
 495   padding: 2px;
 496 }
 497
 498 .variables-view-scope:focus > .title,
 499 .theme-dark .variable-or-property:focus > .title {
 500   background-color: #008484; /* Selection colors */
 501   color: #FFCF00;
 502 }
 503
 504 .variables-view-scope > .title {
 505   background-color: #A09090;
 506   color: #000000;
 507 }
 508
 509 /* Generic variables traits */
 510
 511 .variables-view-variable:not(:last-child) {
 512   border-bottom: 1px solid #A09090;
 513 }
 514
 515 .variables-view-variable > .title > .name {
 516   font-weight: 600;
 517 }
 518
 519 /* Generic variables *and* properties traits */
 520
 521 .variable-or-property:focus > .title > label {
 522   color: inherit !important;
 523 }
 524
 525 .variables-view-container .theme-twisty {
 526   margin: 2px;
 527 }
 528
 529 .variable-or-property > .title > .theme-twisty {
 530   -moz-margin-start: 5px;
 531 }
 532
 533 .variable-or-property:not([untitled]) > .variables-view-element-details {
 534   -moz-margin-start: 7px;
 535 }
 536
 537 /* Traits applied when variables or properties are changed or overridden */
 538
 539 .variable-or-property:not([overridden]) {
 540   transition: background 1s ease-in-out, color 1s ease-in-out;
 541 }
 542
 543 .variable-or-property:not([overridden])[changed] {
 544   color: #000000;
 545   transition-duration: .4s;
 546 }
 547
 548 .variable-or-property[overridden] {
 549   background: rgba(160,144,144,0.0.5);
 550 }
 551
 552 .variable-or-property[overridden] .title > label {
 553   /* Cross out the title for this variable and all child properties. */
 554   font-style: italic;
 555   text-decoration: line-through;
 556   border-bottom: none !important;
 557   color: #A09090;
 558   opacity: 0.7;
 559 }
 560
 561 /* Traits applied when variables or properties are editable */
 562
 563 .variable-or-property[editable] > .title > .value {
 564   cursor: text;
 565 }
 566
 567 .variable-or-property[overridden] .title > .value {
 568   /* Disallow editing this variable and all child properties. */
 569   pointer-events: none;
 570 }
 571
 572 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
 573  * variables and properties */
 574
 575 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
 576   opacity: 0.6;
 577 }
 578
 579 .variable-or-property-non-writable-icon {
 580   background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
 581   background-size: cover;
 582   width: 16px;
 583   height: 16px;
 584   opacity: 0.5;
 585 }
 586
 587 @media (min-resolution: 2dppx) {
 588   .variable-or-property-non-writable-icon > .title:after {
 589     background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
 590   }
 591 }
 592
 593 .variable-or-property-frozen-label,
 594 .variable-or-property-sealed-label,
 595 .variable-or-property-non-extensible-label {
 596   height: 16px;
 597   -moz-padding-end: 4px;
 598 }
 599
 600 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
 601 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
 602 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
 603   color: #A09090;
 604 }
 605
 606 /* Aligned values */
 607
 608 .variables-view-container[aligned-values] .title > .separator {
 609   -moz-box-flex: 1;
 610 }
 611
 612 .variables-view-container[aligned-values] .title > .value {
 613   -moz-box-flex: 0;
 614   width: 70vw;
 615 }
 616
 617 .variables-view-container[aligned-values] .title > .element-value-input {
 618   width: calc(70vw - 10px);
 619 }
 620
 621 /* Actions first */
 622
 623 .variables-view-open-inspector {
 624   -moz-box-ordinal-group: 1;
 625 }
 626
 627 .variables-view-edit,
 628 .variables-view-add-property {
 629   -moz-box-ordinal-group: 2;
 630 }
 631
 632 .variable-or-property-frozen-label,
 633 .variable-or-property-sealed-label,
 634 .variable-or-property-non-extensible-label,
 635 .variable-or-property-non-writable-icon {
 636   -moz-box-ordinal-group: 3;
 637 }
 638
 639 .variables-view-delete {
 640   -moz-box-ordinal-group: 4;
 641 }
 642
 643 .variables-view-container[actions-first] .variables-view-delete,
 644 .variables-view-container[actions-first] .variables-view-add-property,
 645 .variables-view-container[actions-first] .variables-view-open-inspector {
 646   -moz-box-ordinal-group: 0;
 647 }
 648
 649 .variables-view-container[actions-first] [invisible] {
 650   visibility: hidden;
 651 }
 652
 653 /* Variables and properties tooltips */
 654
 655 .variable-or-property > tooltip > label {
 656   margin: 0 2px 0 2px;
 657 }
 658
 659 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
 660 .variable-or-property[non-configurable] > tooltip > label.configurable,
 661 .variable-or-property[non-writable] > tooltip > label.writable
 662 .variable-or-property[non-extensible] > tooltip > label.extensible {
 663   color: #A09090;
 664   text-decoration: line-through;
 665 }
 666
 667 .variable-or-property[overridden] > tooltip > label.overridden {
 668   -moz-padding-start: 4px;
 669   -moz-border-start: 1px dotted #9C9CFF;
 670 }
 671
 672 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
 673   -moz-padding-start: 4px;
 674   -moz-border-start: 1px dotted #9C9CFF;
 675   color: #008484;
 676 }
 677
 678 /* Variables and properties editing */
 679
 680 .variables-view-delete {
 681   background: url("chrome://browser/skin/devtools/vview-delete.png");
 682   background-size: cover;
 683   width: 16px;
 684   height: 16px;
 685 }
 686
 687 @media (min-resolution: 2dppx) {
 688   .variables-view-delete {
 689     background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
 690   }
 691 }
 692
 693 .variables-view-delete:hover {
 694   background-position: 32px;
 695 }
 696
 697 .variables-view-delete:active {
 698   background-position: 16px;
 699 }
 700
 701 .variable-or-property:focus > .title > .variables-view-delete {
 702 /*  background-position: 0px; */
 703 }
 704
 705 .variables-view-edit {
 706   background: url("chrome://browser/skin/devtools/vview-edit.png");
 707   background-size: cover;
 708   width: 16px;
 709   height: 16px;
 710   cursor: pointer;
 711 }
 712
 713 @media (min-resolution: 2dppx) {
 714   .variables-view-edit {
 715     background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
 716   }
 717 }
 718
 719 .variables-view-edit:hover {
 720   background-position: 32px;
 721 }
 722
 723 .variables-view-edit:active {
 724   background-position: 16px;
 725 }
 726
 727 .variable-or-property:focus > .title > .variables-view-edit {
 728 /*  background-position: 0px; */
 729 }
 730
 731 .variables-view-open-inspector {
 732   background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
 733   background-size: cover;
 734   width: 16px;
 735   height: 16px;
 736   cursor: pointer;
 737 }
 738
 739 .variables-view-open-inspector:hover {
 740   background-position: 32px;
 741 }
 742
 743 .variables-view-open-inspector:active {
 744   background-position: 16px;
 745 }
 746
 747 .variable-or-property:focus > .title > .variables-view-open-inspector {
 748 /*  background-position: 0px; */
 749 }
 750
 751 /* Variables and properties input boxes */
 752
 753 .variable-or-property > .title > .separator + .element-value-input {
 754   -moz-margin-start: -2px !important;
 755   -moz-margin-end: 2px !important;
 756 }
 757
 758 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
 759   -moz-margin-start: 4px !important;
 760   -moz-margin-end: 2px !important;
 761 }
 762
 763 .element-name-input {
 764   -moz-margin-start: -2px !important;
 765   -moz-margin-end: 2px !important;
 766   font-weight: 600;
 767 }
 768
 769 .element-value-input,
 770 .element-name-input {
 771   border: 1px solid #008484 !important;
 772   color: inherit;
 773 }
 774
 775 /* Variables and properties searching */
 776
 777 .variable-or-property[unmatched] {
 778   border: none;
 779   margin: 0;
 780 }
 781
 782 /* Canvas graphs */
 783
 784 .graph-widget-container {
 785   position: relative;
 786 }
 787
 788 .graph-widget-canvas {
 789   width: 100%;
 790   height: 100%;
 791 }
 792
 793 .graph-widget-canvas[input=hovering-background] {
 794   cursor: text;
 795 }
 796
 797 .graph-widget-canvas[input=hovering-region] {
 798   cursor: pointer;
 799 }
 800
 801 .graph-widget-canvas[input=hovering-selection-start-boundary],
 802 .graph-widget-canvas[input=hovering-selection-end-boundary],
 803 .graph-widget-canvas[input=adjusting-selection-boundary] {
 804   cursor: col-resize;
 805 }
 806
 807 .graph-widget-canvas[input=hovering-selection-contents] {
 808   cursor: grab;
 809 }
 810
 811 .graph-widget-canvas[input=dragging-selection-contents] {
 812   cursor: grabbing;
 813 }
 814
 815 /* Line graph widget */
 816
 817 .line-graph-widget-gutter {
 818   position: absolute;
 819   background: #000000;
 820   width: 10px;
 821   height: 100%;
 822   top: 0;
 823   left: 0;
 824   border-right: 1px solid #9C9CFF;
 825   pointer-events: none;
 826 }
 827
 828 .line-graph-widget-gutter-line {
 829   position: absolute;
 830   width: 100%;
 831   border-top: 1px solid;
 832 }
 833
 834 .line-graph-widget-gutter-line[type=maximum] {
 835   border-color: #008484;
 836 }
 837
 838 .line-graph-widget-gutter-line[type=minimum] {
 839   border-color: #FF0000;
 840 }
 841
 842 .line-graph-widget-gutter-line[type=average] {
 843   border-color: #FF9F00;
 844 }
 845
 846 .line-graph-widget-tooltip {
 847   position: absolute;
 848   background: #404000;
 849   border-radius: 2px;
 850   line-height: 15px;
 851   -moz-padding-start: 6px;
 852   -moz-padding-end: 6px;
 853   transform: translateY(-50%);
 854   font-size: 80%;
 855   z-index: 1;
 856   pointer-events: none;
 857 }
 858
 859 .line-graph-widget-tooltip[with-arrows=true]::before {
 860   content: "";
 861   position: absolute;
 862   border-top: 3px solid transparent;
 863   border-bottom: 3px solid transparent;
 864   top: calc(50% - 3px);
 865 }
 866
 867 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
 868   -moz-border-end: 3px solid #9C9CFF;
 869   left: -3px;
 870 }
 871
 872 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
 873   -moz-border-start: 3px solid #9C9CFF;
 874   right: -3px;
 875 }
 876
 877 .line-graph-widget-tooltip[type=maximum] {
 878   left: -1px;
 879 }
 880
 881 .line-graph-widget-tooltip[type=minimum] {
 882   left: -1px;
 883 }
 884
 885 .line-graph-widget-tooltip[type=average] {
 886   right: -1px;
 887 }
 888
 889 .line-graph-widget-tooltip[type=maximum][with-arrows=true] {
 890   left: 14px;
 891 }
 892
 893 .line-graph-widget-tooltip[type=minimum][with-arrows=true] {
 894   left: 14px;
 895 }
 896
 897 .line-graph-widget-tooltip[type=average][with-arrows=true] {
 898   right: 4px;
 899 }
 900
 901 .line-graph-widget-tooltip > [text=info] {
 902   color: #A09090;
 903 }
 904
 905 .line-graph-widget-tooltip > [text=value] {
 906   -moz-margin-start: 3px;
 907 }
 908
 909 .line-graph-widget-tooltip > [text=metric] {
 910   -moz-margin-start: 1px;
 911   color: #9C9CFF;
 912 }
 913
 914 .line-graph-widget-tooltip > [text=value],
 915 .line-graph-widget-tooltip > [text=metric] {
 916 /*  text-shadow: 1px  0px rgba(255,255,255,0.6),
 917               -1px  0px rgba(255,255,255,0.6),
 918                0px -1px rgba(255,255,255,0.6),
 919                0px  1px rgba(255,255,255,0.6);*/
 920 }
 921
 922 .line-graph-widget-tooltip[type=maximum] > [text=value] {
 923   color: #008484;
 924 }
 925
 926 .line-graph-widget-tooltip[type=minimum] > [text=value] {
 927   color: #FF0000;
 928 }
 929
 930 .line-graph-widget-tooltip[type=average] > [text=value] {
 931   color: #FF9F00;
 932 }
 933
 934 /* Bar graph widget */
 935
 936 .bar-graph-widget-canvas {
 937   background: #000000;
 938 }
 939
 940 .bar-graph-widget-legend {
 941   position: absolute;
 942   top: 4px;
 943   left: 8px;
 944   color: #A09090;
 945   font-size: 80%;
 946   pointer-events: none;
 947 }
 948
 949 .bar-graph-widget-legend-item {
 950   float: left;
 951  -moz-margin-end: 8px;
 952 }
 953
 954 .bar-graph-widget-legend-item > [view="color"],
 955 .bar-graph-widget-legend-item > [view="label"] {
 956   vertical-align: middle;
 957 }
 958
 959 .bar-graph-widget-legend-item > [view="color"] {
 960   display: inline-block;
 961   width: 8px;
 962   height: 8px;
 963   border: 1px solid #9C9CFF;
 964   border-radius: 1px;
 965   -moz-margin-end: 4px;
 966   pointer-events: none;
 967 }
 968
 969 .bar-graph-widget-legend-item > [view="label"] {
 970 /*  text-shadow: 1px  0px rgba(255,255,255,0.8),
 971               -1px  0px rgba(255,255,255,0.8),
 972                0px -1px rgba(255,255,255,0.8),
 973                0px  1px rgba(255,255,255,0.8);*/
 974 }
 975
 976 /* Charts */
 977
 978 .generic-chart-container {
 979   /* Hack: force hardware acceleration */
 980   transform: translateZ(1px);
 981 }
 982
 983 .generic-chart-container {
 984   color: #A09090; /* Light foreground text */
 985 }
 986
 987 .chart-colored-blob {
 988   fill: #9C9CFF; /* Light content text */
 989   background: #9C9CFF;
 990 }
 991
 992 /* Charts: Pie */
 993
 994 .pie-chart-slice {
 995   stroke-width: 1px;
 996   cursor: pointer;
 997 }
 998
 999 .pie-chart-slice {
1000   stroke: #A09090;
1001 }
1002
1003 .pie-chart-slice[largest] {
1004   stroke-width: 2px;
1005   stroke: #9C9CFF;
1006 }
1007
1008 .pie-chart-label {
1009   text-anchor: middle;
1010   dominant-baseline: middle;
1011   pointer-events: none;
1012 }
1013
1014 .pie-chart-label {
1015   fill: #000;
1016 }
1017
1018 .pie-chart-container[slices="1"] > .pie-chart-slice {
1019   stroke-width: 0px;
1020 }
1021
1022 .pie-chart-slice,
1023 .pie-chart-label {
1024   transition: all 0.1s ease-out;
1025 }
1026
1027 .pie-chart-slice:not(:hover):not([focused]),
1028 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1029   transform: none !important;
1030 }
1031
1032 /* Charts: Table */
1033
1034 .table-chart-title {
1035   padding-bottom: 10px;
1036   font-size: 120%;
1037   font-weight: 600;
1038 }
1039
1040 .table-chart-row {
1041   margin-top: 1px;
1042   cursor: pointer;
1043 }
1044
1045 .table-chart-grid:hover > .table-chart-row {
1046   transition: opacity 0.1s ease-in-out;
1047 }
1048
1049 .table-chart-grid:not(:hover) > .table-chart-row {
1050   transition: opacity 0.2s ease-in-out;
1051 }
1052
1053 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1054 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1055   opacity: 0.4;
1056 }
1057
1058 .table-chart-row-box {
1059   width: 8px;
1060   height: 1.5em;
1061   -moz-margin-end: 10px;
1062 }
1063
1064 .table-chart-row-label {
1065   width: 8em;
1066   -moz-padding-end: 6px;
1067   cursor: inherit;
1068 }
1069
1070 .table-chart-totals {
1071   margin-top: 8px;
1072   padding-top: 6px;
1073 }
1074
1075 .table-chart-totals {
1076   border-top: 1px solid #A09090; /* Grey foreground text */
1077 }
1078
1079 .table-chart-summary-label {
1080   font-weight: 600;
1081   padding: 1px 0px;
1082 }
1083
1084 .table-chart-summary-label {
1085   color: #A09090; /* Light foreground text */
1086 }
1087
1088 /* Table Widget */
1089
1090 /* Table body */
1091
1092 .table-widget-body > .devtools-side-splitter {
1093   border: none;
1094 }
1095
1096 .table-widget-body {
1097   overflow: auto;
1098 }
1099
1100 .table-widget-body {
1101   background: #000000; /* Background-Sidebar */
1102 }
1103
1104 .table-widget-body:-moz-locale-dir(ltr) {
1105 /*  box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1106 }
1107
1108 .table-widget-body:-moz-locale-dir(rtl) {
1109 /*  box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1110 }
1111
1112 .table-widget-body:-moz-locale-dir(ltr) {
1113 /*  box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1114 }
1115
1116 .table-widget-body:-moz-locale-dir(rtl) {
1117 /*  box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1118 }
1119
1120 /* Column Headers */
1121
1122 .table-widget-column-header,
1123 .table-widget-cell {
1124   -moz-border-end: 1px solid #A09090;
1125 }
1126
1127 /* Table widget column header colors are taken from netmonitor.inc.css to match
1128    the look of both the tables. This needs to be updated along with netmonitor
1129    header colors in bug 951714 */
1130
1131 .table-widget-column-header {
1132   background: rgba(0,0,0,0);
1133   position: sticky;
1134   top: 0;
1135   min-height: 32px;
1136   width: 100%;
1137   border: none;
1138   padding: 8px 0 0 !important;
1139   color: inherit;
1140   text-align: center;
1141   font-weight: inherit !important;
1142   transition: background-color 0.1s ease-in-out;
1143 }
1144
1145 .table-widget-column-header:hover {
1146   background: #FFCF00;
1147 }
1148
1149 .table-widget-column-header:hover:active {
1150   background: #FF9F00;
1151 }
1152
1153 .table-widget-column-header:not(:active)[sorted] {
1154   background: #008484;
1155 }
1156
1157 .table-widget-column-header:not(:active)[sorted=ascending] {
1158   background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1159   background-size: 100% 1px;
1160   background-repeat: no-repeat;
1161 }
1162
1163 .table-widget-column-header:not(:active)[sorted=descending] {
1164   background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1165   background-size: 100% 1px;
1166   background-repeat: no-repeat;
1167   background-position: bottom;
1168 }
1169
1170 /* Cells */
1171
1172 .table-widget-cell {
1173   width: 100%;
1174   margin: -1px 0 !important;
1175   padding: 3px 4px;
1176   background-clip: padding-box;
1177   min-width: 100px;
1178   -moz-user-focus: normal;
1179 }
1180
1181 .table-widget-cell {
1182   border-top: 1px solid #A09090;
1183   border-bottom: 1px solid #A09090;
1184   color: #FF9F00; /* Light foreground text */
1185 }
1186
1187 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1188 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1189 .table-widget-cell:not(.theme-selected)[odd] {
1190   background: #404000;
1191 }
1192
1193 .table-widget-cell:last-of-type {
1194 /*  box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1195 }
1196
1197 .table-widget-cell.flash-out {
1198   animation: flash-out 0.5s ease-in;
1199 }
1200
1201 @keyframes flash-out {
1202   to {
1203     background: #795900;
1204   }
1205 }
1206
1207 /* Empty text and initial text */
1208
1209 .table-widget-empty-text {
1210   display: none;
1211   text-align: center;
1212   font-size: large;
1213   margin-top: -20px !important;
1214 }
1215
1216 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1217 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1218   display: block;
1219 }
1220
1221 /* Tree Widget */
1222
1223 .tree-widget-container {
1224   padding: 0;
1225   margin: 0;
1226   width: 100%;
1227   height: 100%;
1228   list-style: none;
1229   overflow: hidden;
1230   -moz-margin-end: 40px;
1231 }
1232
1233 .tree-widget-container:-moz-focusring,
1234 .tree-widget-container *:-moz-focusring {
1235   outline-style: none;
1236 }
1237
1238 .tree-widget-empty-text {
1239   padding: 10px 20px;
1240   font-size: medium;
1241   background: transparent;
1242   pointer-events: none;
1243 }
1244
1245 /* Tree Item */
1246
1247 .tree-widget-container .tree-widget-item {
1248   padding: 2px 0px 4px;
1249   /* OSX has line-height 14px by default, which causes weird alignment issues
1250    * because of 20px high icons. thus making line-height consistent with that of
1251    * windows.
1252    */
1253   line-height: 17px !important;
1254   display: inline-block;
1255   width: 100%;
1256   word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1257                            breaking in multiple lines */
1258 }
1259
1260 .tree-widget-container .tree-widget-children {
1261   margin: 0;
1262   padding: 0;
1263   list-style: none;
1264 }
1265
1266 .tree-widget-item[level="1"] {
1267   font-weight: 800;
1268 }
1269
1270 /* Twisties */
1271 .tree-widget-item:before {
1272   content: "";
1273   width: 14px;
1274   height: 14px;
1275   float: left;
1276   margin: 3px 2px -3px;
1277   background-repeat: no-repeat;
1278   background-image: url("chrome://browser/skin/devtools/controls.png");
1279   background-size: 56px 28px;
1280   cursor: pointer;
1281   background-position: -28px -14px;
1282 }
1283
1284 .tree-widget-item:-moz-locale-dir(rtl):before {
1285   float: right;
1286   transform: scaleX(-1);
1287 }
1288
1289 .theme-light .tree-widget-item:before {
1290   background-position: 0 -14px;
1291 }
1292
1293 .tree-widget-item[empty]:before {
1294   background: transparent;
1295 }
1296
1297 .tree-widget-item[expanded]:before {
1298   background-position: -42px -14px;
1299 }
1300
1301 .theme-light .tree-widget-item[expanded]:before {
1302   background-position: -14px -14px;
1303 }
1304
1305 .tree-widget-item + ul {
1306   overflow: hidden;
1307   animation: collapse-tree-item 0.2s;
1308   max-height: 0;
1309 }
1310
1311 .tree-widget-item[expanded] + ul {
1312   animation: expand-tree-item 0.3s;
1313   max-height: unset;
1314 }
1315
1316 @keyframes collapse-tree-item {
1317   from {
1318     max-height: 300px;
1319   }
1320   to {
1321     max-height: 0;
1322   }
1323 }
1324
1325 @keyframes expand-tree-item {
1326   from {
1327     max-height: 0;
1328   }
1329   to {
1330     max-height: 500px;
1331   }
1332 }
1333
1334 @media (min-resolution: 2dppx) {
1335   .tree-widget-item:before {
1336     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1337   }
1338 }
1339
1340 /* Indentation of child items in the tree */
1341
1342 /* For level > 6 */
1343 .tree-widget-item[level] + ul > li > .tree-widget-item {
1344   -moz-padding-start: 98px;
1345 }
1346
1347 /* First level */
1348 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1349   -moz-padding-start: 14px;
1350 }
1351
1352 /* Second level */
1353 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1354   -moz-padding-start: 28px;
1355 }
1356
1357 /* Third level */
1358 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1359   -moz-padding-start: 42px;
1360 }
1361
1362 /* Fourth level */
1363 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1364   -moz-padding-start: 56px;
1365 }
1366
1367 /* Fifth level */
1368 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1369   -moz-padding-start: 70px;
1370 }
1371
1372 /* Sixth level */
1373 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1374   -moz-padding-start: 84px;
1375 }
1376
1377 /* Custom icons for certain tree items indicating the type of the item */
1378
1379 .tree-widget-item[type]:after {
1380   content: "";
1381   float: left;
1382   width: 16px;
1383   height: 17px;
1384   -moz-margin-end: 4px;
1385   background-repeat: no-repeat;
1386   background-size: 20px auto;
1387   filter: url('filters.svg#invert');
1388   background-position: 0 0;
1389   background-size: auto 20px;
1390 }
1391
1392 .tree-widget-item:-moz-locale-dir(rtl):after {
1393   float: right;
1394 }
1395
1396 .theme-dark .tree-widget-item[type]:after {
1397   filter: url('filters.svg#invert-white');
1398 }
1399
1400 .tree-widget-item[type="dir"]:after {
1401   background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1402   background-position: 2px 0;
1403   background-size: auto 16px;
1404   width: 20px;
1405 }
1406
1407 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1408   background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1409 }
1410
1411 .tree-widget-item[type="url"]:after {
1412   background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1413   background-size: auto 18px;
1414   width: 18px;
1415 }
1416
1417 /* === BEGIN manifest-editor.inc.css === */
1418
1419 /* Manifest Editor overrides */
1420
1421 .variables-view-container.manifest-editor {
1422   background-color: #000000;
1423   padding: 20px 2px;
1424 }
1425
1426 .manifest-editor .variable-or-property:focus > .title {
1427 /*  background-color: #EDEDED;
1428   color: #000; */
1429   border-radius: 4px;
1430 }
1431
1432 .manifest-editor .variables-view-property > .title > .name {
1433 /*  color: #27406A; */
1434 }
1435
1436 .manifest-editor .variable-or-property > .title > label,
1437 .manifest-editor textbox {
1438   font-family: monospace;
1439 }
1440
1441 .manifest-editor .variable-or-property > .title > .token-string {
1442 /*  color: #54BC6A; */
1443   font-weight: bold;
1444 }
1445
1446 .manifest-editor .variable-or-property > .title > .token-boolean,
1447 .manifest-editor .variable-or-property > .title > .token-number {
1448 /*  color: #009BD4; */
1449   font-weight: bold;
1450 }
1451
1452 .manifest-editor .variable-or-property > .title > .token-undefined {
1453 /*  color: #bbb; */
1454 }
1455
1456 .manifest-editor .variable-or-property > .title > .token-null {
1457 /*  color: #999; */
1458 }
1459
1460 .manifest-editor .variable-or-property > .title > .token-other {
1461 /*  color: #333; */
1462 }
1463
1464 .manifest-editor .variables-view-variable {
1465   border-bottom: none;
1466 }
1467
1468 .manifest-editor .variables-view-delete,
1469 .manifest-editor .variables-view-delete:hover,
1470 .manifest-editor .variables-view-delete:active,
1471 .manifest-editor .variable-or-property:focus .variables-view-delete,
1472 .manifest-editor .variables-view-add-property,
1473 .manifest-editor .variables-view-add-property:hover,
1474 .manifest-editor .variables-view-add-property:active,
1475 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1476   list-style-image: none;
1477   -moz-image-region: initial;
1478 }
1479
1480 .manifest-editor .variables-view-delete::before,
1481 .manifest-editor .variables-view-add-property::before {
1482   width: 11px;
1483   height: 11px;
1484   content: "";
1485   display: inline-block;
1486   background-size: 11px auto;
1487 }
1488
1489 .manifest-editor .variables-view-delete::before {
1490   background-image: url("app-manager/remove.svg");
1491   background-size: 12px auto;
1492 }
1493
1494 .manifest-editor .variables-view-add-property::before {
1495   background-image: url("app-manager/add.svg");
1496   -moz-margin-end: 2px;
1497 }
1498
1499 /* === END manifest-editor.inc.css === */
1500
1501 /* === END widgets.inc.css === */