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 var(--theme-sidebar-background);
 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 var(--theme-sidebar-background);
 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: var(--theme-selection-background);
 166 }
 167
 168 #breadcrumb-separator-after,
 169 #breadcrumb-separator-before:after {
 170   background: var(--theme-toolbar-background);
 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: var(--theme-toolbar-background);
 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: var(--theme-content-color1);
 203 }
 204
 205 .breadcrumbs-widget-item:hover {
 206   background-color: var(--theme-hover-background);
 207   color: var(--theme-hover-color);
 208 }
 209
 210 .breadcrumbs-widget-item[checked]:not(:hover) {
 211   background-color: var(--theme-selection-background);
 212   color: var(--theme-selection-color);
 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: var(--theme-highlight-lightorange);
 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: var(--theme-hover-color) !important;
 285 }
 286
 287 .breadcrumbs-widget-item {
 288   color: var(--theme-highlight-lightorange);
 289 }
 290
 291 .breadcrumbs-widget-item-id {
 292   color: var(--theme-body-color-alt);
 293 }
 294
 295 .breadcrumbs-widget-item-classes {
 296   color: var(--theme-content-color1);
 297 }
 298
 299 .breadcrumbs-widget-item-pseudo-classes {
 300   color: var(--theme-highlight-lightorange);
 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: var(--theme-selection-background);
 312   color: var(--theme-selection-color);
 313 }
 314
 315 .simple-list-widget-item:not(.selected):hover {
 316   background-color: var(--theme-hover-background);
 317   color: var(--theme-hover-color);
 318 }
 319
 320 .simple-list-widget-perma-text,
 321 .simple-list-widget-empty-text {
 322   color: var(--theme-body-color-alt);
 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: var(--theme-body-color-alt);
 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
 349 .side-menu-widget-container:-moz-locale-dir(ltr),
 350 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
 351 }
 352
 353 .side-menu-widget-container:-moz-locale-dir(rtl),
 354 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
 355 }
 356
 357 .side-menu-widget-group {
 358   /* To allow visibility of the dark margin shadow. */
 359 /*  -moz-margin-end: 1px; */
 360 }
 361
 362 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
 363   /* To compensate for the arrow image's dark margin. */
 364 /*  -moz-margin-end: -1px; */
 365 }
 366
 367 /* SideMenuWidget groups */
 368
 369 .side-menu-widget-group-title {
 370   padding: 4px;
 371   background-color: var(--theme-contrastsidebar-background);
 372   color: var(--theme-contrastsidebar-color);
 373 }
 374
 375 /* SideMenuWidget items */
 376
 377 .side-menu-widget-item {
 378   border-top: 1px solid #9C9CFF;
 379   /* To compensate for the top and bottom borders */
 380   margin-top: -1px;
 381   margin-bottom: -1px;
 382   background-clip: padding-box;
 383 }
 384
 385 .side-menu-widget-item:last-of-type {
 386   border-bottom: 1px solid #9C9CFF;
 387 }
 388
 389 .side-menu-widget-item.selected {
 390   background-color: var(--theme-selection-background);
 391   color: var(--theme-selection-color);
 392 }
 393
 394 .side-menu-widget-item-arrow {
 395   -moz-margin-start: -7px;
 396   width: 7px; /* The image's width is 7 pixels */
 397   /* Cover the border of the side-menu-widget-item */
 398   margin-top: -1px;
 399   margin-bottom: -1px;
 400 }
 401
 402 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
 403   background-size: auto, 1px 100%;
 404   background-repeat: no-repeat;
 405 }
 406
 407 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 408   background-position: center right;
 409 }
 410
 411 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 412   background-position: center left;
 413 }
 414
 415 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 416   background-image: url("itemArrow-ltr.svg");
 417 }
 418
 419 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 420   background-image: url("itemArrow-rtl.svg");
 421 }
 422
 423 /* SideMenuWidget items contents */
 424
 425 .side-menu-widget-item-contents {
 426   padding: 4px;
 427   /* To avoid having content overlapping the arrow image. */
 428   -moz-padding-end: 8px;
 429 }
 430
 431 .side-menu-widget-item-other {
 432   /* To avoid having content overlapping the arrow image. */
 433   -moz-padding-end: 8px;
 434   /* To compensate for the .side-menu-widget-item-contents padding. */
 435   -moz-margin-start: -4px;
 436   -moz-margin-end: -8px;
 437   color: var(--theme-selection-color);
 438 }
 439
 440 .side-menu-widget-item-other.selected {
 441   background-color: var(--theme-selection-background);
 442   color: var(--theme-selection-color);
 443 }
 444
 445 .side-menu-widget-item-other:first-of-type {
 446   margin-top: 4px;
 447 /*  border-top-left-radius: 4px; */
 448 }
 449
 450 .side-menu-widget-item-other:last-of-type {
 451   margin-bottom: -4px;
 452 }
 453
 454 .side-menu-widget-item-other:not(.selected) > label {
 455   color: #9C9CFF;
 456 }
 457
 458 /* SideMenuWidget checkboxes */
 459
 460 .side-menu-widget-group-checkbox {
 461   margin: 0;
 462   -moz-margin-end: 4px;
 463 }
 464
 465 .side-menu-widget-item-checkbox {
 466   margin: 0;
 467   -moz-margin-start: 4px;
 468   -moz-margin-end: -4px;
 469 }
 470
 471 /* SideMenuWidget misc */
 472
 473 .theme-dark .side-menu-widget-container,
 474 .theme-dark .side-menu-widget-empty-text {
 475   background-color: var(--theme-toolbar-background);
 476 }
 477
 478 .side-menu-widget-empty-text {
 479   padding: 12px;
 480 }
 481
 482 /* VariablesView */
 483
 484 .variables-view-container:not([empty]) {
 485   /* Hack: force hardware acceleration */
 486   transform: translateZ(1px);
 487 }
 488
 489 .variables-view-empty-notice {
 490   color: var(--theme-body-color-alt);
 491   padding: 2px;
 492 }
 493
 494 .variables-view-scope:focus > .title,
 495 .theme-dark .variable-or-property:focus > .title {
 496   background-color: var(--theme-selection-background);
 497   color: var(--theme-selection-color);
 498 }
 499
 500 .variables-view-scope > .title {
 501   background-color: #A09090;
 502   color: #000000;
 503 }
 504
 505 /* Generic variables traits */
 506
 507 .variables-view-variable:not(:last-child) {
 508   border-bottom: 1px solid #A09090;
 509 }
 510
 511 .variables-view-variable > .title > .name {
 512   font-weight: 600;
 513 }
 514
 515 /* Generic variables *and* properties traits */
 516
 517 .variable-or-property:focus > .title > label {
 518   color: inherit !important;
 519 }
 520
 521 .variables-view-container .theme-twisty {
 522   margin: 2px;
 523 }
 524
 525 .variable-or-property > .title > .theme-twisty {
 526   -moz-margin-start: 5px;
 527 }
 528
 529 .variable-or-property:not([untitled]) > .variables-view-element-details {
 530   -moz-margin-start: 7px;
 531 }
 532
 533 /* Traits applied when variables or properties are changed or overridden */
 534
 535 .variable-or-property:not([overridden]) {
 536   transition: background 1s ease-in-out, color 1s ease-in-out;
 537 }
 538
 539 .variable-or-property:not([overridden])[changed] {
 540   color: #000000;
 541   transition-duration: .4s;
 542 }
 543
 544 .variable-or-property[overridden] {
 545   background: rgba(160,144,144,0.0.5);
 546 }
 547
 548 .variable-or-property[overridden] .title > label {
 549   /* Cross out the title for this variable and all child properties. */
 550   font-style: italic;
 551   text-decoration: line-through;
 552   border-bottom: none !important;
 553   color: #A09090;
 554   opacity: 0.7;
 555 }
 556
 557 /* Traits applied when variables or properties are editable */
 558
 559 .variable-or-property[editable] > .title > .value {
 560   cursor: text;
 561 }
 562
 563 .variable-or-property[overridden] .title > .value {
 564   /* Disallow editing this variable and all child properties. */
 565   pointer-events: none;
 566 }
 567
 568 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
 569  * variables and properties */
 570
 571 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
 572   opacity: 0.6;
 573 }
 574
 575 .variable-or-property-non-writable-icon {
 576   background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
 577   background-size: cover;
 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   }
 587 }
 588
 589 .variable-or-property-frozen-label,
 590 .variable-or-property-sealed-label,
 591 .variable-or-property-non-extensible-label {
 592   height: 16px;
 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-open-inspector {
 620   -moz-box-ordinal-group: 1;
 621 }
 622
 623 .variables-view-edit,
 624 .variables-view-add-property {
 625   -moz-box-ordinal-group: 2;
 626 }
 627
 628 .variable-or-property-frozen-label,
 629 .variable-or-property-sealed-label,
 630 .variable-or-property-non-extensible-label,
 631 .variable-or-property-non-writable-icon {
 632   -moz-box-ordinal-group: 3;
 633 }
 634
 635 .variables-view-delete {
 636   -moz-box-ordinal-group: 4;
 637 }
 638
 639 .variables-view-container[actions-first] .variables-view-delete,
 640 .variables-view-container[actions-first] .variables-view-add-property,
 641 .variables-view-container[actions-first] .variables-view-open-inspector {
 642   -moz-box-ordinal-group: 0;
 643 }
 644
 645 .variables-view-container[actions-first] [invisible] {
 646   visibility: hidden;
 647 }
 648
 649 /* Variables and properties tooltips */
 650
 651 .variable-or-property > tooltip > label {
 652   margin: 0 2px 0 2px;
 653 }
 654
 655 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
 656 .variable-or-property[non-configurable] > tooltip > label.configurable,
 657 .variable-or-property[non-writable] > tooltip > label.writable
 658 .variable-or-property[non-extensible] > tooltip > label.extensible {
 659   color: #A09090;
 660   text-decoration: line-through;
 661 }
 662
 663 .variable-or-property[overridden] > tooltip > label.overridden {
 664   -moz-padding-start: 4px;
 665   -moz-border-start: 1px dotted #9C9CFF;
 666 }
 667
 668 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
 669   -moz-padding-start: 4px;
 670   -moz-border-start: 1px dotted #9C9CFF;
 671   color: #008484;
 672 }
 673
 674 /* Variables and properties editing */
 675
 676 .variables-view-delete {
 677   background: url("chrome://browser/skin/devtools/vview-delete.png");
 678   background-size: cover;
 679   width: 16px;
 680   height: 16px;
 681 }
 682
 683 @media (min-resolution: 2dppx) {
 684   .variables-view-delete {
 685     background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
 686   }
 687 }
 688
 689 .variables-view-delete:hover {
 690   background-position: 32px;
 691 }
 692
 693 .variables-view-delete:active {
 694   background-position: 16px;
 695 }
 696
 697 .variable-or-property:focus > .title > .variables-view-delete {
 698 /*  background-position: 0px; */
 699 }
 700
 701 .variables-view-edit {
 702   background: url("chrome://browser/skin/devtools/vview-edit.png");
 703   background-size: cover;
 704   width: 16px;
 705   height: 16px;
 706   cursor: pointer;
 707 }
 708
 709 @media (min-resolution: 2dppx) {
 710   .variables-view-edit {
 711     background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
 712   }
 713 }
 714
 715 .variables-view-edit:hover {
 716   background-position: 32px;
 717 }
 718
 719 .variables-view-edit:active {
 720   background-position: 16px;
 721 }
 722
 723 .variable-or-property:focus > .title > .variables-view-edit {
 724 /*  background-position: 0px; */
 725 }
 726
 727 .variables-view-open-inspector {
 728   background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
 729   background-size: cover;
 730   width: 16px;
 731   height: 16px;
 732   cursor: pointer;
 733 }
 734
 735 .variables-view-open-inspector:hover {
 736   background-position: 32px;
 737 }
 738
 739 .variables-view-open-inspector:active {
 740   background-position: 16px;
 741 }
 742
 743 .variable-or-property:focus > .title > .variables-view-open-inspector {
 744 /*  background-position: 0px; */
 745 }
 746
 747 /* Variables and properties input boxes */
 748
 749 .variable-or-property > .title > .separator + .element-value-input {
 750   -moz-margin-start: -2px !important;
 751   -moz-margin-end: 2px !important;
 752 }
 753
 754 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
 755   -moz-margin-start: 4px !important;
 756   -moz-margin-end: 2px !important;
 757 }
 758
 759 .element-name-input {
 760   -moz-margin-start: -2px !important;
 761   -moz-margin-end: 2px !important;
 762   font-weight: 600;
 763 }
 764
 765 .element-value-input,
 766 .element-name-input {
 767   border: 1px solid #008484 !important;
 768   color: inherit;
 769 }
 770
 771 /* Variables and properties searching */
 772
 773 .variable-or-property[unmatched] {
 774   border: none;
 775   margin: 0;
 776 }
 777
 778 /* Canvas graphs */
 779
 780 .graph-widget-container {
 781   position: relative;
 782 }
 783
 784 .graph-widget-canvas {
 785   width: 100%;
 786   height: 100%;
 787 }
 788
 789 .graph-widget-canvas[input=hovering-background] {
 790   cursor: text;
 791 }
 792
 793 .graph-widget-canvas[input=hovering-region] {
 794   cursor: pointer;
 795 }
 796
 797 .graph-widget-canvas[input=hovering-selection-start-boundary],
 798 .graph-widget-canvas[input=hovering-selection-end-boundary],
 799 .graph-widget-canvas[input=adjusting-selection-boundary] {
 800   cursor: col-resize;
 801 }
 802
 803 .graph-widget-canvas[input=hovering-selection-contents] {
 804   cursor: grab;
 805 }
 806
 807 .graph-widget-canvas[input=dragging-selection-contents] {
 808   cursor: grabbing;
 809 }
 810
 811 /* Line graph widget */
 812
 813 .line-graph-widget-gutter {
 814   position: absolute;
 815   background: #000000;
 816   width: 10px;
 817   height: 100%;
 818   top: 0;
 819   left: 0;
 820   border-right: 1px solid #9C9CFF;
 821   pointer-events: none;
 822 }
 823
 824 .line-graph-widget-gutter-line {
 825   position: absolute;
 826   width: 100%;
 827   border-top: 1px solid;
 828 }
 829
 830 .line-graph-widget-gutter-line[type=maximum] {
 831   border-color: #008484;
 832 }
 833
 834 .line-graph-widget-gutter-line[type=minimum] {
 835   border-color: #FF0000;
 836 }
 837
 838 .line-graph-widget-gutter-line[type=average] {
 839   border-color: #FF9F00;
 840 }
 841
 842 .line-graph-widget-tooltip {
 843   position: absolute;
 844   background: #404000;
 845   border-radius: 2px;
 846   line-height: 15px;
 847   -moz-padding-start: 6px;
 848   -moz-padding-end: 6px;
 849   transform: translateY(-50%);
 850   font-size: 80%;
 851   z-index: 1;
 852   pointer-events: none;
 853 }
 854
 855 .line-graph-widget-tooltip[with-arrows=true]::before {
 856   content: "";
 857   position: absolute;
 858   border-top: 3px solid transparent;
 859   border-bottom: 3px solid transparent;
 860   top: calc(50% - 3px);
 861 }
 862
 863 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
 864   -moz-border-end: 3px solid #9C9CFF;
 865   left: -3px;
 866 }
 867
 868 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
 869   -moz-border-start: 3px solid #9C9CFF;
 870   right: -3px;
 871 }
 872
 873 .line-graph-widget-tooltip[type=maximum] {
 874   left: -1px;
 875 }
 876
 877 .line-graph-widget-tooltip[type=minimum] {
 878   left: -1px;
 879 }
 880
 881 .line-graph-widget-tooltip[type=average] {
 882   right: -1px;
 883 }
 884
 885 .line-graph-widget-tooltip[type=maximum][with-arrows=true] {
 886   left: 14px;
 887 }
 888
 889 .line-graph-widget-tooltip[type=minimum][with-arrows=true] {
 890   left: 14px;
 891 }
 892
 893 .line-graph-widget-tooltip[type=average][with-arrows=true] {
 894   right: 4px;
 895 }
 896
 897 .line-graph-widget-tooltip > [text=info] {
 898   color: #A09090;
 899 }
 900
 901 .line-graph-widget-tooltip > [text=value] {
 902   -moz-margin-start: 3px;
 903 }
 904
 905 .line-graph-widget-tooltip > [text=metric] {
 906   -moz-margin-start: 1px;
 907   color: #9C9CFF;
 908 }
 909
 910 .line-graph-widget-tooltip > [text=value],
 911 .line-graph-widget-tooltip > [text=metric] {
 912 /*  text-shadow: 1px  0px rgba(255,255,255,0.6),
 913               -1px  0px rgba(255,255,255,0.6),
 914                0px -1px rgba(255,255,255,0.6),
 915                0px  1px rgba(255,255,255,0.6);*/
 916 }
 917
 918 .line-graph-widget-tooltip[type=maximum] > [text=value] {
 919   color: #008484;
 920 }
 921
 922 .line-graph-widget-tooltip[type=minimum] > [text=value] {
 923   color: #FF0000;
 924 }
 925
 926 .line-graph-widget-tooltip[type=average] > [text=value] {
 927   color: #FF9F00;
 928 }
 929
 930 /* Bar graph widget */
 931
 932 .bar-graph-widget-canvas {
 933   background: #000000;
 934 }
 935
 936 .bar-graph-widget-legend {
 937   position: absolute;
 938   top: 4px;
 939   left: 8px;
 940   color: #A09090;
 941   font-size: 80%;
 942   pointer-events: none;
 943 }
 944
 945 .bar-graph-widget-legend-item {
 946   float: left;
 947  -moz-margin-end: 8px;
 948 }
 949
 950 .bar-graph-widget-legend-item > [view="color"],
 951 .bar-graph-widget-legend-item > [view="label"] {
 952   vertical-align: middle;
 953 }
 954
 955 .bar-graph-widget-legend-item > [view="color"] {
 956   display: inline-block;
 957   width: 8px;
 958   height: 8px;
 959   border: 1px solid #9C9CFF;
 960   border-radius: 1px;
 961   -moz-margin-end: 4px;
 962   pointer-events: none;
 963 }
 964
 965 .bar-graph-widget-legend-item > [view="label"] {
 966 /*  text-shadow: 1px  0px rgba(255,255,255,0.8),
 967               -1px  0px rgba(255,255,255,0.8),
 968                0px -1px rgba(255,255,255,0.8),
 969                0px  1px rgba(255,255,255,0.8);*/
 970 }
 971
 972 /* Charts */
 973
 974 .generic-chart-container {
 975   /* Hack: force hardware acceleration */
 976   transform: translateZ(1px);
 977 }
 978
 979 .generic-chart-container {
 980   color: var(--theme-body-color-alt);
 981 }
 982
 983 .chart-colored-blob {
 984   fill: var(--theme-highlight-blue);
 985   background: var(--theme-highlight-blue);
 986 }
 987
 988 /* Charts: Pie */
 989
 990 .pie-chart-slice {
 991   stroke-width: 1px;
 992   cursor: pointer;
 993 }
 994
 995 .pie-chart-slice {
 996   stroke: #A09090;
 997 }
 998
 999 .pie-chart-slice[largest] {
1000   stroke-width: 2px;
1001   stroke: #9C9CFF;
1002 }
1003
1004 .pie-chart-label {
1005   text-anchor: middle;
1006   dominant-baseline: middle;
1007   pointer-events: none;
1008 }
1009
1010 .pie-chart-label {
1011   fill: #000;
1012 }
1013
1014 .pie-chart-container[slices="1"] > .pie-chart-slice {
1015   stroke-width: 0px;
1016 }
1017
1018 .pie-chart-slice,
1019 .pie-chart-label {
1020   transition: all 0.1s ease-out;
1021 }
1022
1023 .pie-chart-slice:not(:hover):not([focused]),
1024 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1025   transform: none !important;
1026 }
1027
1028 /* Charts: Table */
1029
1030 .table-chart-title {
1031   padding-bottom: 10px;
1032   font-size: 120%;
1033   font-weight: 600;
1034 }
1035
1036 .table-chart-row {
1037   margin-top: 1px;
1038   cursor: pointer;
1039 }
1040
1041 .table-chart-grid:hover > .table-chart-row {
1042   transition: opacity 0.1s ease-in-out;
1043 }
1044
1045 .table-chart-grid:not(:hover) > .table-chart-row {
1046   transition: opacity 0.2s ease-in-out;
1047 }
1048
1049 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1050 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1051   opacity: 0.4;
1052 }
1053
1054 .table-chart-row-box {
1055   width: 8px;
1056   height: 1.5em;
1057   -moz-margin-end: 10px;
1058 }
1059
1060 .table-chart-row-label {
1061   width: 8em;
1062   -moz-padding-end: 6px;
1063   cursor: inherit;
1064 }
1065
1066 .table-chart-totals {
1067   margin-top: 8px;
1068   padding-top: 6px;
1069 }
1070
1071 .table-chart-totals {
1072   border-top: 1px solid #A09090; /* Grey foreground text */
1073 }
1074
1075 .table-chart-summary-label {
1076   font-weight: 600;
1077   padding: 1px 0px;
1078 }
1079
1080 .table-chart-summary-label {
1081   color: #A09090; /* Light foreground text */
1082 }
1083
1084 /* Table Widget */
1085
1086 /* Table body */
1087
1088 .table-widget-body > .devtools-side-splitter {
1089   border: none;
1090 }
1091
1092 .table-widget-body {
1093   overflow: auto;
1094 }
1095
1096 .table-widget-body {
1097   background: #000000; /* Background-Sidebar */
1098 }
1099
1100 .table-widget-body:-moz-locale-dir(ltr) {
1101 /*  box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1102 }
1103
1104 .table-widget-body:-moz-locale-dir(rtl) {
1105 /*  box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1106 }
1107
1108 .table-widget-body:-moz-locale-dir(ltr) {
1109 /*  box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1110 }
1111
1112 .table-widget-body:-moz-locale-dir(rtl) {
1113 /*  box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1114 }
1115
1116 /* Column Headers */
1117
1118 .table-widget-column-header,
1119 .table-widget-cell {
1120   -moz-border-end: 1px solid #A09090;
1121 }
1122
1123 /* Table widget column header colors are taken from netmonitor.inc.css to match
1124    the look of both the tables. This needs to be updated along with netmonitor
1125    header colors in bug 951714 */
1126
1127 .table-widget-column-header {
1128   background: rgba(0,0,0,0);
1129   position: sticky;
1130   top: 0;
1131   min-height: 32px;
1132   width: 100%;
1133   border: none;
1134   padding: 8px 0 0 !important;
1135   color: inherit;
1136   text-align: center;
1137   font-weight: inherit !important;
1138   transition: background-color 0.1s ease-in-out;
1139 }
1140
1141 .table-widget-column-header:hover {
1142   background: #FFCF00;
1143 }
1144
1145 .table-widget-column-header:hover:active {
1146   background: #FF9F00;
1147 }
1148
1149 .table-widget-column-header:not(:active)[sorted] {
1150   background: #008484;
1151 }
1152
1153 .table-widget-column-header:not(:active)[sorted=ascending] {
1154   background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1155   background-size: 100% 1px;
1156   background-repeat: no-repeat;
1157 }
1158
1159 .table-widget-column-header:not(:active)[sorted=descending] {
1160   background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1161   background-size: 100% 1px;
1162   background-repeat: no-repeat;
1163   background-position: bottom;
1164 }
1165
1166 /* Cells */
1167
1168 .table-widget-cell {
1169   width: 100%;
1170   margin: -1px 0 !important;
1171   padding: 3px 4px;
1172   background-clip: padding-box;
1173   min-width: 100px;
1174   -moz-user-focus: normal;
1175 }
1176
1177 .table-widget-cell {
1178   border-top: 1px solid #A09090;
1179   border-bottom: 1px solid #A09090;
1180   color: #FF9F00; /* Light foreground text */
1181 }
1182
1183 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1184 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1185 .table-widget-cell:not(.theme-selected)[odd] {
1186   background: #404000;
1187 }
1188
1189 .table-widget-cell:last-of-type {
1190 /*  box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1191 }
1192
1193 .table-widget-cell.flash-out {
1194   animation: flash-out 0.5s ease-in;
1195 }
1196
1197 @keyframes flash-out {
1198   to {
1199     background: #795900;
1200   }
1201 }
1202
1203 /* Empty text and initial text */
1204
1205 .table-widget-empty-text {
1206   display: none;
1207   text-align: center;
1208   font-size: large;
1209   margin-top: -20px !important;
1210 }
1211
1212 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1213 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1214   display: block;
1215 }
1216
1217 /* Tree Widget */
1218
1219 .tree-widget-container {
1220   padding: 0;
1221   margin: 0;
1222   width: 100%;
1223   height: 100%;
1224   list-style: none;
1225   overflow: hidden;
1226   -moz-margin-end: 40px;
1227 }
1228
1229 .tree-widget-container:-moz-focusring,
1230 .tree-widget-container *:-moz-focusring {
1231   outline-style: none;
1232 }
1233
1234 .tree-widget-empty-text {
1235   padding: 10px 20px;
1236   font-size: medium;
1237   background: transparent;
1238   pointer-events: none;
1239 }
1240
1241 /* Tree Item */
1242
1243 .tree-widget-container .tree-widget-item {
1244   padding: 2px 0px 4px;
1245   /* OSX has line-height 14px by default, which causes weird alignment issues
1246    * because of 20px high icons. thus making line-height consistent with that of
1247    * windows.
1248    */
1249   line-height: 17px !important;
1250   display: inline-block;
1251   width: 100%;
1252   word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1253                            breaking in multiple lines */
1254 }
1255
1256 .tree-widget-container .tree-widget-children {
1257   margin: 0;
1258   padding: 0;
1259   list-style: none;
1260 }
1261
1262 .tree-widget-item[level="1"] {
1263   font-weight: 800;
1264 }
1265
1266 /* Twisties */
1267 .tree-widget-item:before {
1268   content: "";
1269   width: 14px;
1270   height: 14px;
1271   float: left;
1272   margin: 3px 2px -3px;
1273   background-repeat: no-repeat;
1274   background-image: url("chrome://browser/skin/devtools/controls.png");
1275   background-size: 56px 28px;
1276   cursor: pointer;
1277   background-position: -28px -14px;
1278 }
1279
1280 .tree-widget-item:-moz-locale-dir(rtl):before {
1281   float: right;
1282   transform: scaleX(-1);
1283 }
1284
1285 .theme-light .tree-widget-item:before {
1286   background-position: 0 -14px;
1287 }
1288
1289 .tree-widget-item[empty]:before {
1290   background: transparent;
1291 }
1292
1293 .tree-widget-item[expanded]:before {
1294   background-position: -42px -14px;
1295 }
1296
1297 .theme-light .tree-widget-item[expanded]:before {
1298   background-position: -14px -14px;
1299 }
1300
1301 .tree-widget-item + ul {
1302   overflow: hidden;
1303   animation: collapse-tree-item 0.2s;
1304   max-height: 0;
1305 }
1306
1307 .tree-widget-item[expanded] + ul {
1308   animation: expand-tree-item 0.3s;
1309   max-height: unset;
1310 }
1311
1312 @keyframes collapse-tree-item {
1313   from {
1314     max-height: 300px;
1315   }
1316   to {
1317     max-height: 0;
1318   }
1319 }
1320
1321 @keyframes expand-tree-item {
1322   from {
1323     max-height: 0;
1324   }
1325   to {
1326     max-height: 500px;
1327   }
1328 }
1329
1330 @media (min-resolution: 2dppx) {
1331   .tree-widget-item:before {
1332     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1333   }
1334 }
1335
1336 /* Indentation of child items in the tree */
1337
1338 /* For level > 6 */
1339 .tree-widget-item[level] + ul > li > .tree-widget-item {
1340   -moz-padding-start: 98px;
1341 }
1342
1343 /* First level */
1344 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1345   -moz-padding-start: 14px;
1346 }
1347
1348 /* Second level */
1349 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1350   -moz-padding-start: 28px;
1351 }
1352
1353 /* Third level */
1354 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1355   -moz-padding-start: 42px;
1356 }
1357
1358 /* Fourth level */
1359 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1360   -moz-padding-start: 56px;
1361 }
1362
1363 /* Fifth level */
1364 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1365   -moz-padding-start: 70px;
1366 }
1367
1368 /* Sixth level */
1369 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1370   -moz-padding-start: 84px;
1371 }
1372
1373 /* Custom icons for certain tree items indicating the type of the item */
1374
1375 .tree-widget-item[type]:after {
1376   content: "";
1377   float: left;
1378   width: 16px;
1379   height: 17px;
1380   -moz-margin-end: 4px;
1381   background-repeat: no-repeat;
1382   background-size: 20px auto;
1383   filter: url('filters.svg#invert');
1384   background-position: 0 0;
1385   background-size: auto 20px;
1386 }
1387
1388 .tree-widget-item:-moz-locale-dir(rtl):after {
1389   float: right;
1390 }
1391
1392 .theme-dark .tree-widget-item[type]:after {
1393   filter: url('filters.svg#invert-white');
1394 }
1395
1396 .tree-widget-item[type="dir"]:after {
1397   background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1398   background-position: 2px 0;
1399   background-size: auto 16px;
1400   width: 20px;
1401 }
1402
1403 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1404   background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1405 }
1406
1407 .tree-widget-item[type="url"]:after {
1408   background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1409   background-size: auto 18px;
1410   width: 18px;
1411 }
1412
1413 /* === BEGIN manifest-editor.inc.css === */
1414
1415 /* Manifest Editor overrides */
1416
1417 .variables-view-container.manifest-editor {
1418   background-color: #000000;
1419   padding: 20px 2px;
1420 }
1421
1422 .manifest-editor .variable-or-property:focus > .title {
1423 /*  background-color: #EDEDED;
1424   color: #000; */
1425   border-radius: 4px;
1426 }
1427
1428 .manifest-editor .variables-view-property > .title > .name {
1429 /*  color: #27406A; */
1430 }
1431
1432 .manifest-editor .variable-or-property > .title > label,
1433 .manifest-editor textbox {
1434   font-family: monospace;
1435 }
1436
1437 .manifest-editor .variable-or-property > .title > .token-string {
1438 /*  color: #54BC6A; */
1439   font-weight: bold;
1440 }
1441
1442 .manifest-editor .variable-or-property > .title > .token-boolean,
1443 .manifest-editor .variable-or-property > .title > .token-number {
1444 /*  color: #009BD4; */
1445   font-weight: bold;
1446 }
1447
1448 .manifest-editor .variable-or-property > .title > .token-undefined {
1449 /*  color: #bbb; */
1450 }
1451
1452 .manifest-editor .variable-or-property > .title > .token-null {
1453 /*  color: #999; */
1454 }
1455
1456 .manifest-editor .variable-or-property > .title > .token-other {
1457 /*  color: #333; */
1458 }
1459
1460 .manifest-editor .variables-view-variable {
1461   border-bottom: none;
1462 }
1463
1464 .manifest-editor .variables-view-delete,
1465 .manifest-editor .variables-view-delete:hover,
1466 .manifest-editor .variables-view-delete:active,
1467 .manifest-editor .variable-or-property:focus .variables-view-delete,
1468 .manifest-editor .variables-view-add-property,
1469 .manifest-editor .variables-view-add-property:hover,
1470 .manifest-editor .variables-view-add-property:active,
1471 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1472   list-style-image: none;
1473   -moz-image-region: initial;
1474 }
1475
1476 .manifest-editor .variables-view-delete::before,
1477 .manifest-editor .variables-view-add-property::before {
1478   width: 11px;
1479   height: 11px;
1480   content: "";
1481   display: inline-block;
1482   background-size: 11px auto;
1483 }
1484
1485 .manifest-editor .variables-view-delete::before {
1486   background-image: url("app-manager/remove.svg");
1487   background-size: 12px auto;
1488 }
1489
1490 .manifest-editor .variables-view-add-property::before {
1491   background-image: url("app-manager/add.svg");
1492   -moz-margin-end: 2px;
1493 }
1494
1495 /* === END manifest-editor.inc.css === */
1496
1497 /* === END widgets.inc.css === */