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