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