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