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