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