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