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 var(--theme-body-color-alt); /* 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: var(--theme-content-color2);
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   background: var(--theme-sidebar-background);
1096 }
1097
1098 .table-widget-body:-moz-locale-dir(ltr) {
1099 /*  box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1100 }
1101
1102 .table-widget-body:-moz-locale-dir(rtl) {
1103 /*  box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1104 }
1105
1106 .table-widget-body:-moz-locale-dir(ltr) {
1107 /*  box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1108 }
1109
1110 .table-widget-body:-moz-locale-dir(rtl) {
1111 /*  box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1112 }
1113
1114 /* Column Headers */
1115
1116 .table-widget-column-header,
1117 .table-widget-cell {
1118   -moz-border-end: 1px solid #A09090;
1119 }
1120
1121 /* Table widget column header colors are taken from netmonitor.inc.css to match
1122    the look of both the tables. This needs to be updated along with netmonitor
1123    header colors in bug 951714 */
1124
1125 .table-widget-column-header {
1126   background: rgba(0,0,0,0);
1127   position: sticky;
1128   top: 0;
1129   min-height: 32px;
1130   width: 100%;
1131   border: none;
1132   padding: 8px 0 0 !important;
1133   color: inherit;
1134   text-align: center;
1135   font-weight: inherit !important;
1136   transition: background-color 0.1s ease-in-out;
1137 }
1138
1139 .table-widget-column-header:hover {
1140   background: #FFCF00;
1141 }
1142
1143 .table-widget-column-header:hover:active {
1144   background: #FF9F00;
1145 }
1146
1147 .table-widget-column-header:not(:active)[sorted] {
1148   background: #008484;
1149 }
1150
1151 .table-widget-column-header:not(:active)[sorted=ascending] {
1152   background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1153   background-size: 100% 1px;
1154   background-repeat: no-repeat;
1155 }
1156
1157 .table-widget-column-header:not(:active)[sorted=descending] {
1158   background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1159   background-size: 100% 1px;
1160   background-repeat: no-repeat;
1161   background-position: bottom;
1162 }
1163
1164 /* Cells */
1165
1166 .table-widget-cell {
1167   width: 100%;
1168   margin: -1px 0 !important;
1169   padding: 3px 4px;
1170   background-clip: padding-box;
1171   min-width: 100px;
1172   -moz-user-focus: normal;
1173 }
1174
1175 .table-widget-cell {
1176   border-top: 1px solid #A09090;
1177   border-bottom: 1px solid #A09090;
1178   color: var(--theme-body-color);
1179 }
1180
1181 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1182 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1183 .table-widget-cell:not(.theme-selected)[odd] {
1184   background: #404000;
1185 }
1186
1187 .table-widget-cell:last-of-type {
1188 /*  box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1189 }
1190
1191 .table-widget-cell.flash-out {
1192   animation: flash-out 0.5s ease-in;
1193 }
1194
1195 @keyframes flash-out {
1196   to {
1197     background: var(--theme-contrast-background2);
1198   }
1199 }
1200
1201 /* Empty text and initial text */
1202
1203 .table-widget-empty-text {
1204   display: none;
1205   text-align: center;
1206   font-size: large;
1207   margin-top: -20px !important;
1208 }
1209
1210 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1211 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1212   display: block;
1213 }
1214
1215 /* Tree Widget */
1216
1217 .tree-widget-container {
1218   padding: 0;
1219   margin: 0;
1220   width: 100%;
1221   height: 100%;
1222   list-style: none;
1223   overflow: hidden;
1224   -moz-margin-end: 40px;
1225 }
1226
1227 .tree-widget-container:-moz-focusring,
1228 .tree-widget-container *:-moz-focusring {
1229   outline-style: none;
1230 }
1231
1232 .tree-widget-empty-text {
1233   padding: 10px 20px;
1234   font-size: medium;
1235   background: transparent;
1236   pointer-events: none;
1237 }
1238
1239 /* Tree Item */
1240
1241 .tree-widget-container .tree-widget-item {
1242   padding: 2px 0px 4px;
1243   /* OSX has line-height 14px by default, which causes weird alignment issues
1244    * because of 20px high icons. thus making line-height consistent with that of
1245    * windows.
1246    */
1247   line-height: 17px !important;
1248   display: inline-block;
1249   width: 100%;
1250   word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1251                            breaking in multiple lines */
1252 }
1253
1254 .tree-widget-container .tree-widget-children {
1255   margin: 0;
1256   padding: 0;
1257   list-style: none;
1258 }
1259
1260 .tree-widget-item[level="1"] {
1261   font-weight: 800;
1262 }
1263
1264 /* Twisties */
1265 .tree-widget-item:before {
1266   content: "";
1267   width: 14px;
1268   height: 14px;
1269   float: left;
1270   margin: 3px 2px -3px;
1271   background-repeat: no-repeat;
1272   background-image: url("chrome://browser/skin/devtools/controls.png");
1273   background-size: 56px 28px;
1274   cursor: pointer;
1275   background-position: -28px -14px;
1276 }
1277
1278 .tree-widget-item:-moz-locale-dir(rtl):before {
1279   float: right;
1280   transform: scaleX(-1);
1281 }
1282
1283 .theme-light .tree-widget-item:before {
1284   background-position: 0 -14px;
1285 }
1286
1287 .tree-widget-item[empty]:before {
1288   background: transparent;
1289 }
1290
1291 .tree-widget-item[expanded]:before {
1292   background-position: -42px -14px;
1293 }
1294
1295 .theme-light .tree-widget-item[expanded]:before {
1296   background-position: -14px -14px;
1297 }
1298
1299 .tree-widget-item + ul {
1300   overflow: hidden;
1301   animation: collapse-tree-item 0.2s;
1302   max-height: 0;
1303 }
1304
1305 .tree-widget-item[expanded] + ul {
1306   animation: expand-tree-item 0.3s;
1307   max-height: unset;
1308 }
1309
1310 @keyframes collapse-tree-item {
1311   from {
1312     max-height: 300px;
1313   }
1314   to {
1315     max-height: 0;
1316   }
1317 }
1318
1319 @keyframes expand-tree-item {
1320   from {
1321     max-height: 0;
1322   }
1323   to {
1324     max-height: 500px;
1325   }
1326 }
1327
1328 @media (min-resolution: 2dppx) {
1329   .tree-widget-item:before {
1330     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1331   }
1332 }
1333
1334 /* Indentation of child items in the tree */
1335
1336 /* For level > 6 */
1337 .tree-widget-item[level] + ul > li > .tree-widget-item {
1338   -moz-padding-start: 98px;
1339 }
1340
1341 /* First level */
1342 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1343   -moz-padding-start: 14px;
1344 }
1345
1346 /* Second level */
1347 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1348   -moz-padding-start: 28px;
1349 }
1350
1351 /* Third level */
1352 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1353   -moz-padding-start: 42px;
1354 }
1355
1356 /* Fourth level */
1357 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1358   -moz-padding-start: 56px;
1359 }
1360
1361 /* Fifth level */
1362 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1363   -moz-padding-start: 70px;
1364 }
1365
1366 /* Sixth level */
1367 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1368   -moz-padding-start: 84px;
1369 }
1370
1371 /* Custom icons for certain tree items indicating the type of the item */
1372
1373 .tree-widget-item[type]:after {
1374   content: "";
1375   float: left;
1376   width: 16px;
1377   height: 17px;
1378   -moz-margin-end: 4px;
1379   background-repeat: no-repeat;
1380   background-size: 20px auto;
1381   filter: url('filters.svg#invert');
1382   background-position: 0 0;
1383   background-size: auto 20px;
1384 }
1385
1386 .tree-widget-item:-moz-locale-dir(rtl):after {
1387   float: right;
1388 }
1389
1390 .theme-dark .tree-widget-item[type]:after {
1391   filter: url('filters.svg#invert-white');
1392 }
1393
1394 .tree-widget-item[type="dir"]:after {
1395   background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1396   background-position: 2px 0;
1397   background-size: auto 16px;
1398   width: 20px;
1399 }
1400
1401 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1402   background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1403 }
1404
1405 .tree-widget-item[type="url"]:after {
1406   background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1407   background-size: auto 18px;
1408   width: 18px;
1409 }
1410
1411 /* === BEGIN manifest-editor.inc.css === */
1412
1413 /* Manifest Editor overrides */
1414
1415 .variables-view-container.manifest-editor {
1416   background-color: #000000;
1417   padding: 20px 2px;
1418 }
1419
1420 .manifest-editor .variable-or-property:focus > .title {
1421 /*  background-color: #EDEDED;
1422   color: #000; */
1423   border-radius: 4px;
1424 }
1425
1426 .manifest-editor .variables-view-property > .title > .name {
1427 /*  color: #27406A; */
1428 }
1429
1430 .manifest-editor .variable-or-property > .title > label,
1431 .manifest-editor textbox {
1432   font-family: monospace;
1433 }
1434
1435 .manifest-editor .variable-or-property > .title > .token-string {
1436 /*  color: #54BC6A; */
1437   font-weight: bold;
1438 }
1439
1440 .manifest-editor .variable-or-property > .title > .token-boolean,
1441 .manifest-editor .variable-or-property > .title > .token-number {
1442 /*  color: #009BD4; */
1443   font-weight: bold;
1444 }
1445
1446 .manifest-editor .variable-or-property > .title > .token-undefined {
1447 /*  color: #bbb; */
1448 }
1449
1450 .manifest-editor .variable-or-property > .title > .token-null {
1451 /*  color: #999; */
1452 }
1453
1454 .manifest-editor .variable-or-property > .title > .token-other {
1455 /*  color: #333; */
1456 }
1457
1458 .manifest-editor .variables-view-variable {
1459   border-bottom: none;
1460 }
1461
1462 .manifest-editor .variables-view-delete,
1463 .manifest-editor .variables-view-delete:hover,
1464 .manifest-editor .variables-view-delete:active,
1465 .manifest-editor .variable-or-property:focus .variables-view-delete,
1466 .manifest-editor .variables-view-add-property,
1467 .manifest-editor .variables-view-add-property:hover,
1468 .manifest-editor .variables-view-add-property:active,
1469 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1470   list-style-image: none;
1471   -moz-image-region: initial;
1472 }
1473
1474 .manifest-editor .variables-view-delete::before,
1475 .manifest-editor .variables-view-add-property::before {
1476   width: 11px;
1477   height: 11px;
1478   content: "";
1479   display: inline-block;
1480   background-size: 11px auto;
1481 }
1482
1483 .manifest-editor .variables-view-delete::before {
1484   background-image: url("app-manager/remove.svg");
1485   background-size: 12px auto;
1486 }
1487
1488 .manifest-editor .variables-view-add-property::before {
1489   background-image: url("app-manager/add.svg");
1490   -moz-margin-end: 2px;
1491 }
1492
1493 /* === END manifest-editor.inc.css === */
1494
1495 /* === END widgets.inc.css === */