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