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