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-legend {
 934   position: absolute;
 935   top: 4px;
 936   left: 8px;
 937   color: #A09090;
 938   font-size: 0.8rem !important;
 939   pointer-events: none;
 940 }
 941
 942 .bar-graph-widget-legend-item {
 943   float: left;
 944  -moz-margin-end: 8px;
 945 }
 946
 947 .bar-graph-widget-legend-item > [view="color"],
 948 .bar-graph-widget-legend-item > [view="label"] {
 949   vertical-align: middle;
 950 }
 951
 952 .bar-graph-widget-legend-item > [view="color"] {
 953   display: inline-block;
 954   width: 8px;
 955   height: 8px;
 956   border: 1px solid #9C9CFF;
 957   border-radius: 1px;
 958   -moz-margin-end: 4px;
 959   pointer-events: none;
 960 }
 961
 962 .bar-graph-widget-legend-item > [view="label"] {
 963 /*  text-shadow: 1px  0px rgba(255,255,255,0.8),
 964               -1px  0px rgba(255,255,255,0.8),
 965                0px -1px rgba(255,255,255,0.8),
 966                0px  1px rgba(255,255,255,0.8);*/
 967 }
 968
 969 /* Charts */
 970
 971 .generic-chart-container {
 972   /* Hack: force hardware acceleration */
 973   transform: translateZ(1px);
 974 }
 975
 976 .generic-chart-container {
 977   color: var(--theme-body-color-alt);
 978 }
 979
 980 .chart-colored-blob {
 981   fill: var(--theme-highlight-blue);
 982   background: var(--theme-highlight-blue);
 983 }
 984
 985 /* Charts: Pie */
 986
 987 .pie-chart-slice {
 988   stroke-width: 1px;
 989   cursor: pointer;
 990 }
 991
 992 .pie-chart-slice {
 993   stroke: #A09090;
 994 }
 995
 996 .pie-chart-slice[largest] {
 997   stroke-width: 2px;
 998   stroke: #9C9CFF;
 999 }
1000
1001 .pie-chart-label {
1002   text-anchor: middle;
1003   dominant-baseline: middle;
1004   pointer-events: none;
1005 }
1006
1007 .pie-chart-label {
1008   fill: #000;
1009 }
1010
1011 .pie-chart-container[slices="1"] > .pie-chart-slice {
1012   stroke-width: 0px;
1013 }
1014
1015 .pie-chart-slice,
1016 .pie-chart-label {
1017   transition: all 0.1s ease-out;
1018 }
1019
1020 .pie-chart-slice:not(:hover):not([focused]),
1021 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1022   transform: none !important;
1023 }
1024
1025 /* Charts: Table */
1026
1027 .table-chart-title {
1028   padding-bottom: 10px;
1029   font-size: 120%;
1030   font-weight: 600;
1031 }
1032
1033 .table-chart-row {
1034   margin-top: 1px;
1035   cursor: pointer;
1036 }
1037
1038 .table-chart-grid:hover > .table-chart-row {
1039   transition: opacity 0.1s ease-in-out;
1040 }
1041
1042 .table-chart-grid:not(:hover) > .table-chart-row {
1043   transition: opacity 0.2s ease-in-out;
1044 }
1045
1046 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1047 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1048   opacity: 0.4;
1049 }
1050
1051 .table-chart-row-box {
1052   width: 8px;
1053   height: 1.5em;
1054   -moz-margin-end: 10px;
1055 }
1056
1057 .table-chart-row-label {
1058   width: 8em;
1059   -moz-padding-end: 6px;
1060   cursor: inherit;
1061 }
1062
1063 .table-chart-totals {
1064   margin-top: 8px;
1065   padding-top: 6px;
1066 }
1067
1068 .table-chart-totals {
1069   border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
1070 }
1071
1072 .table-chart-summary-label {
1073   font-weight: 600;
1074   padding: 1px 0px;
1075 }
1076
1077 .table-chart-summary-label {
1078   color: var(--theme-content-color2);
1079 }
1080
1081 /* Table Widget */
1082
1083 /* Table body */
1084
1085 .table-widget-body > .devtools-side-splitter {
1086   border: none;
1087 }
1088
1089 .table-widget-body {
1090   overflow: auto;
1091
1092   background: var(--theme-sidebar-background);
1093 }
1094
1095 .table-widget-body:-moz-locale-dir(ltr) {
1096 /*  box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1097 }
1098
1099 .table-widget-body:-moz-locale-dir(rtl) {
1100 /*  box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1101 }
1102
1103 .table-widget-body:-moz-locale-dir(ltr) {
1104 /*  box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1105 }
1106
1107 .table-widget-body:-moz-locale-dir(rtl) {
1108 /*  box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1109 }
1110
1111 /* Column Headers */
1112
1113 .table-widget-column-header,
1114 .table-widget-cell {
1115   -moz-border-end: 1px solid #A09090;
1116 }
1117
1118 /* Table widget column header colors are taken from netmonitor.inc.css to match
1119    the look of both the tables. This needs to be updated along with netmonitor
1120    header colors in bug 951714 */
1121
1122 .table-widget-column-header {
1123   background: rgba(0,0,0,0);
1124   position: sticky;
1125   top: 0;
1126   min-height: 32px;
1127   width: 100%;
1128   border: none;
1129   padding: 8px 0 0 !important;
1130   color: inherit;
1131   text-align: center;
1132   font-weight: inherit !important;
1133   transition: background-color 0.1s ease-in-out;
1134 }
1135
1136 .table-widget-column-header:hover {
1137   background: #FFCF00;
1138 }
1139
1140 .table-widget-column-header:hover:active {
1141   background: #FF9F00;
1142 }
1143
1144 .table-widget-column-header:not(:active)[sorted] {
1145   background: #008484;
1146 }
1147
1148 .table-widget-column-header:not(:active)[sorted=ascending] {
1149   background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1150   background-size: 100% 1px;
1151   background-repeat: no-repeat;
1152 }
1153
1154 .table-widget-column-header:not(:active)[sorted=descending] {
1155   background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1156   background-size: 100% 1px;
1157   background-repeat: no-repeat;
1158   background-position: bottom;
1159 }
1160
1161 /* Cells */
1162
1163 .table-widget-cell {
1164   width: 100%;
1165   margin: -1px 0 !important;
1166   padding: 3px 4px;
1167   background-clip: padding-box;
1168   min-width: 100px;
1169   -moz-user-focus: normal;
1170 }
1171
1172 .table-widget-cell {
1173   border-top: 1px solid #A09090;
1174   border-bottom: 1px solid #A09090;
1175   color: var(--theme-body-color);
1176 }
1177
1178 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1179 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1180 .table-widget-cell:not(.theme-selected)[odd] {
1181   background: #404000;
1182 }
1183
1184 .table-widget-cell:last-of-type {
1185 /*  box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1186 }
1187
1188 .table-widget-cell.flash-out {
1189   animation: flash-out 0.5s ease-in;
1190 }
1191
1192 @keyframes flash-out {
1193   to {
1194     background: var(--theme-contrast-background2);
1195   }
1196 }
1197
1198 /* Empty text and initial text */
1199
1200 .table-widget-empty-text {
1201   display: none;
1202   text-align: center;
1203   font-size: large;
1204   margin-top: -20px !important;
1205 }
1206
1207 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1208 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1209   display: block;
1210 }
1211
1212 /* Tree Widget */
1213
1214 .tree-widget-container {
1215   padding: 0;
1216   margin: 0;
1217   width: 100%;
1218   height: 100%;
1219   list-style: none;
1220   overflow: hidden;
1221   -moz-margin-end: 40px;
1222 }
1223
1224 .tree-widget-container:-moz-focusring,
1225 .tree-widget-container *:-moz-focusring {
1226   outline-style: none;
1227 }
1228
1229 .tree-widget-empty-text {
1230   padding: 10px 20px;
1231   font-size: medium;
1232   background: transparent;
1233   pointer-events: none;
1234 }
1235
1236 /* Tree Item */
1237
1238 .tree-widget-container .tree-widget-item {
1239   padding: 2px 0px 4px;
1240   /* OSX has line-height 14px by default, which causes weird alignment issues
1241    * because of 20px high icons. thus making line-height consistent with that of
1242    * windows.
1243    */
1244   line-height: 17px !important;
1245   display: inline-block;
1246   width: 100%;
1247   word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1248                            breaking in multiple lines */
1249 }
1250
1251 .tree-widget-container .tree-widget-children {
1252   margin: 0;
1253   padding: 0;
1254   list-style: none;
1255 }
1256
1257 .tree-widget-item[level="1"] {
1258   font-weight: 800;
1259 }
1260
1261 /* Twisties */
1262 .tree-widget-item:before {
1263   content: "";
1264   width: 14px;
1265   height: 14px;
1266   float: left;
1267   margin: 3px 2px -3px;
1268   background-repeat: no-repeat;
1269   background-image: url("chrome://browser/skin/devtools/controls.png");
1270   background-size: 56px 28px;
1271   cursor: pointer;
1272   background-position: -28px -14px;
1273 }
1274
1275 .tree-widget-item:-moz-locale-dir(rtl):before {
1276   float: right;
1277   transform: scaleX(-1);
1278 }
1279
1280 .theme-light .tree-widget-item:before {
1281   background-position: 0 -14px;
1282 }
1283
1284 .tree-widget-item[empty]:before {
1285   background: transparent;
1286 }
1287
1288 .tree-widget-item[expanded]:before {
1289   background-position: -42px -14px;
1290 }
1291
1292 .theme-light .tree-widget-item[expanded]:before {
1293   background-position: -14px -14px;
1294 }
1295
1296 .tree-widget-item + ul {
1297   overflow: hidden;
1298   animation: collapse-tree-item 0.2s;
1299   max-height: 0;
1300 }
1301
1302 .tree-widget-item[expanded] + ul {
1303   animation: expand-tree-item 0.3s;
1304   max-height: unset;
1305 }
1306
1307 @keyframes collapse-tree-item {
1308   from {
1309     max-height: 300px;
1310   }
1311   to {
1312     max-height: 0;
1313   }
1314 }
1315
1316 @keyframes expand-tree-item {
1317   from {
1318     max-height: 0;
1319   }
1320   to {
1321     max-height: 500px;
1322   }
1323 }
1324
1325 @media (min-resolution: 1.25dppx) {
1326   .tree-widget-item:before {
1327     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1328   }
1329 }
1330
1331 /* Indentation of child items in the tree */
1332
1333 /* For level > 6 */
1334 .tree-widget-item[level] + ul > li > .tree-widget-item {
1335   -moz-padding-start: 98px;
1336 }
1337
1338 /* First level */
1339 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1340   -moz-padding-start: 14px;
1341 }
1342
1343 /* Second level */
1344 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1345   -moz-padding-start: 28px;
1346 }
1347
1348 /* Third level */
1349 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1350   -moz-padding-start: 42px;
1351 }
1352
1353 /* Fourth level */
1354 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1355   -moz-padding-start: 56px;
1356 }
1357
1358 /* Fifth level */
1359 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1360   -moz-padding-start: 70px;
1361 }
1362
1363 /* Sixth level */
1364 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1365   -moz-padding-start: 84px;
1366 }
1367
1368 /* Custom icons for certain tree items indicating the type of the item */
1369
1370 .tree-widget-item[type]:after {
1371   content: "";
1372   float: left;
1373   width: 16px;
1374   height: 17px;
1375   -moz-margin-end: 4px;
1376   background-repeat: no-repeat;
1377   background-size: 20px auto;
1378   filter: url('filters.svg#invert');
1379   background-position: 0 0;
1380   background-size: auto 20px;
1381 }
1382
1383 .tree-widget-item:-moz-locale-dir(rtl):after {
1384   float: right;
1385 }
1386
1387 .theme-dark .tree-widget-item[type]:after {
1388   filter: url('filters.svg#invert-white');
1389 }
1390
1391 .tree-widget-item[type="dir"]:after {
1392   background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1393   background-position: 2px 0;
1394   background-size: auto 16px;
1395   width: 20px;
1396 }
1397
1398 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1399   background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1400 }
1401
1402 .tree-widget-item[type="url"]:after {
1403   background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1404   background-size: auto 18px;
1405   width: 18px;
1406 }
1407
1408 /* === BEGIN manifest-editor.inc.css === */
1409
1410 /* Manifest Editor overrides */
1411
1412 .variables-view-container.manifest-editor {
1413   background-color: #000000;
1414   padding: 20px 2px;
1415 }
1416
1417 .manifest-editor .variable-or-property:focus > .title {
1418 /*  background-color: #EDEDED;
1419   color: #000; */
1420   border-radius: 4px;
1421 }
1422
1423 .manifest-editor .variables-view-property > .title > .name {
1424 /*  color: #27406A; */
1425 }
1426
1427 .manifest-editor .variable-or-property > .title > label,
1428 .manifest-editor textbox {
1429   font-family: monospace;
1430 }
1431
1432 .manifest-editor .variable-or-property > .title > .token-string {
1433 /*  color: #54BC6A; */
1434   font-weight: bold;
1435 }
1436
1437 .manifest-editor .variable-or-property > .title > .token-boolean,
1438 .manifest-editor .variable-or-property > .title > .token-number {
1439 /*  color: #009BD4; */
1440   font-weight: bold;
1441 }
1442
1443 .manifest-editor .variable-or-property > .title > .token-undefined {
1444 /*  color: #bbb; */
1445 }
1446
1447 .manifest-editor .variable-or-property > .title > .token-null {
1448 /*  color: #999; */
1449 }
1450
1451 .manifest-editor .variable-or-property > .title > .token-other {
1452 /*  color: #333; */
1453 }
1454
1455 .manifest-editor .variables-view-variable {
1456   border-bottom: none;
1457 }
1458
1459 .manifest-editor .variables-view-delete,
1460 .manifest-editor .variables-view-delete:hover,
1461 .manifest-editor .variables-view-delete:active,
1462 .manifest-editor .variable-or-property:focus .variables-view-delete,
1463 .manifest-editor .variables-view-add-property,
1464 .manifest-editor .variables-view-add-property:hover,
1465 .manifest-editor .variables-view-add-property:active,
1466 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1467   list-style-image: none;
1468   -moz-image-region: initial;
1469 }
1470
1471 .manifest-editor .variables-view-delete::before,
1472 .manifest-editor .variables-view-add-property::before {
1473   width: 11px;
1474   height: 11px;
1475   content: "";
1476   display: inline-block;
1477   background-size: 11px auto;
1478 }
1479
1480 .manifest-editor .variables-view-delete::before {
1481   background-image: url("app-manager/remove.svg");
1482   background-size: 12px auto;
1483 }
1484
1485 .manifest-editor .variables-view-add-property::before {
1486   background-image: url("app-manager/add.svg");
1487   -moz-margin-end: 2px;
1488 }
1489
1490 /* === END manifest-editor.inc.css === */
1491
1492 /* === END widgets.inc.css === */