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