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