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 /* BreacrumbsWidget */
  22
  23 .breadcrumbs-widget-container {
  24   -moz-margin-start: 2px;
  25   -moz-margin-start: 2px;
  26   max-height: 25px; /* Set max-height for proper sizing on linux */
  27   height: 25px; /* Set height to prevent starting small waiting for content */
  28   /* A fake 1px-shadow is included in the border-images of the
  29      breadcrumbs-widget-items, to match toolbar-buttons style.
  30      This negative margin compensates the extra row of pixels created
  31      by the shadow.*/
  32 /*  margin: -1px 0;*/
  33 }
  34
  35 .scrollbutton-up,
  36 .scrollbutton-down {
  37   background: transparent;
  38   box-shadow: none;
  39   border: none;
  40   margin: 0;
  41   padding: 0;
  42 }
  43
  44 .scrollbutton-up {
  45   -moz-margin-end: 1px;
  46 }
  47
  48 .scrollbutton-down {
  49   -moz-margin-end: 0;
  50 }
  51
  52 .scrollbutton-up > .toolbarbutton-icon,
  53 .scrollbutton-down > .toolbarbutton-icon {
  54   /* margin: 0 5px; */
  55 }
  56
  57 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
  58 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
  59 }
  60
  61 .scrollbutton-up[disabled] > .toolbarbutton-icon,
  62 .scrollbutton-down[disabled] > .toolbarbutton-icon {
  63 }
  64
  65 .scrollbutton-up:-moz-locale-dir(ltr) {
  66   border-top-right-radius: 0;
  67   border-bottom-right-radius: 0;
  68 }
  69
  70 .scrollbutton-down:-moz-locale-dir(ltr) {
  71   border-top-left-radius: 0;
  72   border-bottom-left-radius: 0;
  73 }
  74
  75 .scrollbutton-up:-moz-locale-dir(rtl) {
  76   border-top-left-radius: 0;
  77   border-bottom-left-radius: 0;
  78 }
  79
  80 .scrollbutton-down:-moz-locale-dir(rtl) {
  81   border-top-right-radius: 0;
  82   border-bottom-right-radius: 0;
  83 }
  84
  85 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
  86 /*
  87 .scrollbutton-up:-moz-locale-dir(ltr),
  88 .scrollbutton-down:-moz-locale-dir(rtl) {
  89   border-right: solid 1px rgba(255, 255, 255, .1);
  90   border-left: solid 1px transparent;
  91   box-shadow: 3px 0px 3px -3px #181d20;
  92 }
  93
  94 .scrollbutton-down:-moz-locale-dir(ltr),
  95 .scrollbutton-up:-moz-locale-dir(rtl) {
  96   border-right: solid 1px transparent;
  97   border-left: solid 1px rgba(255, 255, 255, .1);
  98   box-shadow: -3px 0px 3px -3px #181d20;
  99 }
 100
 101 .scrollbutton-up[disabled],
 102 .scrollbutton-down[disabled] {
 103   box-shadow: none;
 104   border-color: transparent;
 105 }
 106 */
 107
 108 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
 109 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
 110 /*  transform: scaleX(-1); */
 111 }
 112
 113 /* The breadcrumb separator elements are used as background images with
 114  * -moz-element, so we position them offscreen since we don't care about
 115  * seeing the original elements.
 116  */
 117 .breadcrumb-separator-container {
 118   position: fixed;
 119   top: -1000px;
 120   left: -1000px;
 121 }
 122
 123 #breadcrumb-separator-before,
 124 #breadcrumb-separator-after,
 125 #breadcrumb-separator-normal {
 126   width: 12px;
 127   height: 25px;
 128   overflow: hidden;
 129 }
 130
 131 #breadcrumb-separator-before,
 132 #breadcrumb-separator-after:after {
 133   background: #008484; /* Select Highlight Blue */
 134 }
 135
 136 #breadcrumb-separator-after,
 137 #breadcrumb-separator-before:after {
 138   background: #000000; /* Toolbars */
 139 }
 140
 141 /* This chevron arrow cannot be replicated easily in CSS, so we are using
 142  * a background image for it (still keeping it in a separate element so
 143  * we can handle RTL support with a CSS transform).
 144  */
 145 #breadcrumb-separator-normal {
 146   background: url("breadcrumbs-divider@2x.png") no-repeat center right;
 147   background-size: 12px 24px;
 148 }
 149
 150 /* Fake a triangle by rotating a rectangle inside the elements */
 151 #breadcrumb-separator-before:after,
 152 #breadcrumb-separator-after:after {
 153   content: "";
 154   display: block;
 155   width: 25px;
 156   height: 25px;
 157   transform: translateX(-18px) rotate(45deg);
 158   box-sizing: border-box;
 159 }
 160
 161 .breadcrumbs-widget-item {
 162   background-color: #000000;
 163   min-height: 25px;
 164   min-width: 65px;
 165   margin: 0;
 166   padding: 0 8px 0 20px;
 167   border: none;
 168   border-radius: 0;
 169   outline: none;
 170   color: #FF9F00;
 171 }
 172
 173 .breadcrumbs-widget-item:hover {
 174   background-color: #FFCF00;
 175   color: #000000;
 176 }
 177
 178 .breadcrumbs-widget-item[checked]:not(:hover) {
 179   background-color: #008484;
 180   color: #000000;
 181 }
 182
 183 .breadcrumbs-widget-item[siblings-menu-open],
 184 .breadcrumbs-widget-item:active {
 185   background-color: #FF9F00;
 186   color: #000000;
 187 }
 188
 189 .breadcrumbs-widget-item:not([checked]) {
 190   background-image: -moz-element(#breadcrumb-separator-normal);
 191   background-repeat: no-repeat;
 192   background-position: center left;
 193 }
 194
 195 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
 196   background-image: -moz-element(#breadcrumb-separator-after);
 197   background-repeat: no-repeat;
 198   background-position: 0 0;
 199 }
 200
 201 .breadcrumbs-widget-item[checked] {
 202   background-image: -moz-element(#breadcrumb-separator-before);
 203   background-repeat: no-repeat;
 204   background-position: 0 0;
 205   background-color: #008484; /* Select Highlight Blue */
 206 }
 207
 208 .breadcrumbs-widget-item:first-child {
 209   background-image: none;
 210 }
 211
 212 /* RTL support: move the images that were on the left to the right,
 213  * and move images that were on the right to the left.
 214  */
 215 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
 216   padding: 0 20px 0 8px;
 217 }
 218
 219 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
 220 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
 221   background-position: center right;
 222 }
 223
 224 #breadcrumb-separator-before:-moz-locale-dir(rtl),
 225 #breadcrumb-separator-after:-moz-locale-dir(rtl),
 226 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
 227   transform: scaleX(-1);
 228 }
 229
 230 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
 231 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
 232   transform: translateX(-5px) rotate(45deg);
 233 }
 234
 235 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
 236 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
 237 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
 238 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
 239   color: #FF9F00; /* Foreground (Text) - Light */
 240 }
 241
 242 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
 243 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
 244 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
 245 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
 246   color: #000000 !important;
 247 }
 248
 249 .breadcrumbs-widget-item {
 250   color: #FFCF00; /* Foreground (Text) - Light */
 251 }
 252
 253 .breadcrumbs-widget-item-id {
 254   color: #A09090; /* Foreground (Text) - Grey */
 255 }
 256
 257 .breadcrumbs-widget-item-classes {
 258   color: #FF9F00; /* Content (Text) - Light */
 259 }
 260
 261 .breadcrumbs-widget-item-pseudo-classes {
 262   color: #FFCF00; /* Light Orange */
 263 }
 264
 265 /* SimpleListWidget */
 266
 267 .simple-list-widget-container {
 268   /* Hack: force hardware acceleration */
 269   transform: translateZ(1px);
 270 }
 271
 272 .simple-list-widget-item.selected {
 273   background-color: #008484; /* Select Highlight Blue */
 274   color: #FFCF00; /* Light foreground text */
 275 }
 276
 277 .simple-list-widget-item:not(.selected):hover {
 278   background-color: #FFCF00;
 279   color: #FFCF00;
 280 }
 281
 282 .simple-list-widget-perma-text,
 283 .simple-list-widget-empty-text {
 284   color: #8050B0;
 285   padding: 4px 8px;
 286 }
 287
 288 /* FastListWidget */
 289
 290 .fast-list-widget-container {
 291   /* Hack: force hardware acceleration */
 292   transform: translateZ(1px);
 293 }
 294
 295 /* dark/light theme */
 296 .fast-list-widget-empty-text {
 297   padding: 12px;
 298   font-weight: 600;
 299   color: #8050B0;
 300 }
 301
 302 /* SideMenuWidget */
 303
 304 /* SideMenuWidget container */
 305
 306 .side-menu-widget-container {
 307   /* Hack: force hardware acceleration */
 308   transform: translateZ(1px);
 309
 310   background-color: #000000;
 311   color: #FF9F00;
 312 }
 313
 314 .side-menu-widget-container:-moz-locale-dir(ltr),
 315 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
 316 }
 317
 318 .side-menu-widget-container:-moz-locale-dir(rtl),
 319 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
 320 }
 321
 322 .side-menu-widget-group {
 323   /* To allow visibility of the dark margin shadow. */
 324 /*  -moz-margin-end: 1px; */
 325 }
 326
 327 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
 328   /* To compensate for the arrow image's dark margin. */
 329 /*  -moz-margin-end: -1px; */
 330 }
 331
 332 /* SideMenuWidget groups */
 333
 334 .side-menu-widget-group-title {
 335   padding: 4px;
 336
 337   background-color: #A09090;
 338   color: #000000;
 339 }
 340
 341 /* SideMenuWidget items */
 342
 343 .side-menu-widget-item {
 344   border-top: 1px solid #9C9CFF;
 345   /* To compensate for the top and bottom borders */
 346   margin-top: -1px;
 347   margin-bottom: -1px;
 348   background-clip: padding-box;
 349 }
 350
 351 .side-menu-widget-item:last-of-type {
 352   border-bottom: 1px solid #9C9CFF;
 353 }
 354
 355 .side-menu-widget-item.selected {
 356   background-color: #008484 !important;
 357   color: #000000;
 358 }
 359
 360 .side-menu-widget-item-arrow {
 361   -moz-margin-start: -7px;
 362   width: 7px; /* The image's width is 7 pixels */
 363   /* Cover the border of the side-menu-widget-item */
 364   margin-top: -1px;
 365   margin-bottom: -1px;
 366 }
 367
 368 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
 369   background-size: auto, 1px 100%;
 370   background-repeat: no-repeat;
 371 }
 372
 373 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 374   background-position: center right;
 375 }
 376
 377 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 378   background-position: center left;
 379 }
 380
 381 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
 382   background-image: url("itemArrow-ltr.svg");
 383 }
 384
 385 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
 386   background-image: url("itemArrow-rtl.svg");
 387 }
 388
 389 /* SideMenuWidget items contents */
 390
 391 .side-menu-widget-item-contents {
 392   padding: 4px;
 393   /* To avoid having content overlapping the arrow image. */
 394   -moz-padding-end: 8px;
 395 }
 396
 397 .side-menu-widget-item-other {
 398   /* To avoid having content overlapping the arrow image. */
 399   -moz-padding-end: 8px;
 400   /* To compensate for the .side-menu-widget-item-contents padding. */
 401   -moz-margin-start: -4px;
 402   -moz-margin-end: -8px;
 403
 404   background-color: #000000;
 405 }
 406
 407 .side-menu-widget-item-other.selected {
 408   background-color: #008484;
 409   color: #000000;
 410 }
 411
 412 .side-menu-widget-item-other:first-of-type {
 413   margin-top: 4px;
 414 /*  border-top-left-radius: 4px; */
 415 }
 416
 417 .side-menu-widget-item-other:last-of-type {
 418   margin-bottom: -4px;
 419 }
 420
 421 .side-menu-widget-item-other:not(.selected) > label {
 422   color: #9C9CFF;
 423 }
 424
 425 /* SideMenuWidget checkboxes */
 426
 427 .side-menu-widget-group-checkbox {
 428   margin: 0;
 429   -moz-margin-end: 4px;
 430 }
 431
 432 .side-menu-widget-item-checkbox {
 433   margin: 0;
 434   -moz-margin-start: 4px;
 435   -moz-margin-end: -4px;
 436 }
 437
 438 /* SideMenuWidget misc */
 439
 440 .side-menu-widget-empty-text {
 441   padding: 12px;
 442
 443   background-color: #000000;
 444   font-weight: 600;
 445   color: #A09090;
 446 }
 447
 448 /* VariablesView */
 449
 450 .variables-view-container:not([empty]) {
 451   /* Hack: force hardware acceleration */
 452   transform: translateZ(1px);
 453 }
 454
 455 .variables-view-empty-notice {
 456   color: #A09090;
 457   padding: 2px;
 458 }
 459
 460 .variables-view-scope > .title {
 461   background-color: #A09090;
 462   color: #000000;
 463 }
 464
 465 /* Generic variables traits */
 466
 467 .variables-view-variable:not(:last-child) {
 468   border-bottom: 1px solid #A09090;
 469 }
 470
 471 .variables-view-variable > .title > .name {
 472   font-weight: 600;
 473 }
 474
 475 /* Generic variables *and* properties traits */
 476
 477 .variable-or-property:focus > .title > label {
 478   color: inherit !important;
 479 }
 480
 481 .variable-or-property > .title > .value {
 482   -moz-box-flex: 1;
 483 }
 484
 485 .variable-or-property > .title > .arrow {
 486   -moz-margin-start: 3px;
 487 }
 488
 489 .variable-or-property:not([untitled]) > .variables-view-element-details {
 490   -moz-margin-start: 7px;
 491 }
 492
 493 /* Traits applied when variables or properties are changed or overridden */
 494
 495 .variable-or-property:not([overridden]) {
 496   transition: background 1s ease-in-out, color 1s ease-in-out;
 497 }
 498
 499 .variable-or-property:not([overridden])[changed] {
 500   color: #000000;
 501   transition-duration: .4s;
 502 }
 503
 504 .variable-or-property[overridden] {
 505   background: rgba(160,144,144,0.0.5);
 506 }
 507
 508 .variable-or-property[overridden] .title > label {
 509   /* Cross out the title for this variable and all child properties. */
 510   font-style: italic;
 511   text-decoration: line-through;
 512   border-bottom: none !important;
 513   color: #A09090;
 514   opacity: 0.7;
 515 }
 516
 517 /* Traits applied when variables or properties are editable */
 518
 519 .variable-or-property[editable] > .title > .value {
 520   cursor: text;
 521 }
 522
 523 .variable-or-property[overridden] .title > .value {
 524   /* Disallow editing this variable and all child properties. */
 525   pointer-events: none;
 526 }
 527
 528 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
 529  * variables and properties */
 530
 531 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
 532   opacity: 0.6;
 533 }
 534
 535 .variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name {
 536   border-bottom: 1px dashed #9C9CFF;
 537 }
 538
 539 .variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
 540   border-bottom: 1px dashed #FF0000;
 541 }
 542
 543 .variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
 544   border-bottom: 1px dashed #A09090;
 545 }
 546
 547 .variable-or-property-non-writable-icon {
 548   background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
 549   width: 16px;
 550   height: 16px;
 551   opacity: 0.5;
 552 }
 553
 554 @media (min-resolution: 2dppx) {
 555   .variable-or-property-non-writable-icon > .title:after {
 556     background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
 557     background-size: 32px;
 558   }
 559 }
 560
 561 .variable-or-property-frozen-label,
 562 .variable-or-property-sealed-label,
 563 .variable-or-property-non-extensible-label {
 564   -moz-padding-end: 4px;
 565 }
 566
 567 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
 568 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
 569 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
 570   color: #A09090;
 571 }
 572
 573 /* Aligned values */
 574
 575 .variables-view-container[aligned-values] .title > .separator {
 576   -moz-box-flex: 1;
 577 }
 578
 579 .variables-view-container[aligned-values] .title > .value {
 580   -moz-box-flex: 0;
 581   width: 70vw;
 582 }
 583
 584 .variables-view-container[aligned-values] .title > .element-value-input {
 585   width: calc(70vw - 10px);
 586 }
 587
 588 /* Actions first */
 589
 590 .variables-view-container[actions-first] .variables-view-delete,
 591 .variables-view-container[actions-first] .variables-view-open-inspector,
 592 .variables-view-container[actions-first] .variables-view-add-property {
 593   -moz-box-ordinal-group: 0;
 594 }
 595
 596 .variables-view-container[actions-first] [invisible] {
 597   visibility: hidden;
 598 }
 599
 600 /* Variables and properties tooltips */
 601
 602 .variable-or-property > tooltip > label {
 603   margin: 0 2px 0 2px;
 604 }
 605
 606 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
 607 .variable-or-property[non-configurable] > tooltip > label.configurable,
 608 .variable-or-property[non-writable] > tooltip > label.writable
 609 .variable-or-property[non-extensible] > tooltip > label.extensible {
 610   color: #A09090;
 611   text-decoration: line-through;
 612 }
 613
 614 .variable-or-property[overridden] > tooltip > label.overridden {
 615   -moz-padding-start: 4px;
 616   -moz-border-start: 1px dotted #9C9CFF;
 617 }
 618
 619 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
 620   -moz-padding-start: 4px;
 621   -moz-border-start: 1px dotted #9C9CFF;
 622   color: #008484;
 623 }
 624
 625 /* Variables and properties editing */
 626
 627 .variables-view-delete {
 628   list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
 629   -moz-image-region: rect(0,16px,16px,0);
 630 }
 631
 632 .variables-view-delete:hover {
 633   -moz-image-region: rect(0,48px,16px,32px);
 634 }
 635
 636 .variables-view-delete:active {
 637   -moz-image-region: rect(0,32px,16px,16px);
 638 }
 639
 640 .variable-or-property:focus .variables-view-delete {
 641 /*  -moz-image-region: rect(0,16px,16px,0); */
 642 }
 643
 644 .variables-view-edit {
 645   list-style-image: url("chrome://browser/skin/devtools/vview-edit.png");
 646   -moz-image-region: rect(0,16px,16px,0);
 647   cursor: pointer;
 648   padding-left: 2px;
 649 }
 650
 651 .variables-view-edit:hover {
 652  -moz-image-region: rect(0,48px,16px,32px);
 653 }
 654
 655 .variables-view-edit:active {
 656   -moz-image-region: rect(0,32px,16px,16px);
 657 }
 658
 659 .variable-or-property:focus .variables-view-edit {
 660 /*  -moz-image-region: rect(0,16px,16px,0); */
 661 }
 662
 663 .variables-view-open-inspector {
 664   list-style-image: url("chrome://browser/skin/devtools/vview-open-inspector.png");
 665   -moz-image-region: rect(0,16px,16px,0);
 666   cursor: pointer;
 667 }
 668
 669 .variables-view-open-inspector:hover {
 670   -moz-image-region: rect(0,48px,16px,32px);
 671 }
 672
 673 .variables-view-open-inspector:active {
 674   -moz-image-region: rect(0,32px,16px,16px);
 675 }
 676
 677 .variable-or-property:focus .variables-view-open-inspector {
 678 /*  -moz-image-region: rect(0,16px,16px,0); */
 679 }
 680
 681 .variables-view-throbber {
 682   background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
 683   width: 16px;
 684   height: 16px;
 685 }
 686
 687 .element-value-input {
 688   -moz-margin-start: -2px !important;
 689   -moz-margin-end: 2px !important;
 690 }
 691
 692 .element-name-input {
 693   -moz-margin-start: -2px !important;
 694   -moz-margin-end: 2px !important;
 695   font-weight: 600;
 696 }
 697
 698 .element-value-input,
 699 .element-name-input {
 700   border: 1px solid #008484 !important;
 701   color: inherit;
 702 }
 703
 704 /* Variables and properties searching */
 705
 706 .variables-view-searchinput {
 707   min-height: 24px;
 708 }
 709
 710 .variable-or-property[unmatched] {
 711   border: none;
 712   margin: 0;
 713 }
 714
 715 /* Expand/collapse arrow */
 716
 717 .arrow {
 718   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
 719   width: 9px;
 720   height: 16px;
 721   -moz-margin-start: 5px;
 722   -moz-margin-end: 5px;
 723 }
 724
 725 .variables-view-scope > .title > .arrow {
 726   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
 727 }
 728
 729 .arrow[open] {
 730   background-image: url("chrome://global/skin/tree/twisty-open.gif");
 731 }
 732
 733 .variables-view-scope > .title > .arrow[open] {
 734   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
 735 }
 736
 737 .arrow[invisible] {
 738   visibility: hidden;
 739 }
 740
 741 /* Charts */
 742
 743 .generic-chart-container {
 744   /* Hack: force hardware acceleration */
 745   transform: translateZ(1px);
 746 }
 747
 748 .generic-chart-container {
 749   color: #A09090; /* Light foreground text */
 750 }
 751
 752 .chart-colored-blob {
 753   fill: #9C9CFF; /* Light content text */
 754   background: #9C9CFF;
 755 }
 756
 757 /* Charts: Pie */
 758
 759 .pie-chart-slice {
 760   stroke-width: 1px;
 761   cursor: pointer;
 762 }
 763
 764 .pie-chart-slice {
 765   stroke: #A09090;
 766 }
 767
 768 .pie-chart-slice[largest] {
 769   stroke-width: 2px;
 770   stroke: #9C9CFF;
 771 }
 772
 773 .pie-chart-label {
 774   text-anchor: middle;
 775   dominant-baseline: middle;
 776   pointer-events: none;
 777 }
 778
 779 .pie-chart-label {
 780   fill: #000;
 781 }
 782
 783 .pie-chart-container[slices="1"] > .pie-chart-slice {
 784   stroke-width: 0px;
 785 }
 786
 787 .pie-chart-slice,
 788 .pie-chart-label {
 789   transition: all 0.1s ease-out;
 790 }
 791
 792 .pie-chart-slice:not(:hover):not([focused]),
 793 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
 794   transform: none !important;
 795 }
 796
 797 /* Charts: Table */
 798
 799 .table-chart-title {
 800   padding-bottom: 10px;
 801   font-size: 120%;
 802   font-weight: 600;
 803 }
 804
 805 .table-chart-row {
 806   margin-top: 1px;
 807   cursor: pointer;
 808 }
 809
 810 .table-chart-grid:hover > .table-chart-row {
 811   transition: opacity 0.1s ease-in-out;
 812 }
 813
 814 .table-chart-grid:not(:hover) > .table-chart-row {
 815   transition: opacity 0.2s ease-in-out;
 816 }
 817
 818 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
 819 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
 820   opacity: 0.4;
 821 }
 822
 823 .table-chart-row-box {
 824   width: 8px;
 825   height: 1.5em;
 826   -moz-margin-end: 10px;
 827 }
 828
 829 .table-chart-row-label {
 830   width: 8em;
 831   -moz-padding-end: 6px;
 832   cursor: inherit;
 833 }
 834
 835 .table-chart-totals {
 836   margin-top: 8px;
 837   padding-top: 6px;
 838 }
 839
 840 .table-chart-totals {
 841   border-top: 1px solid #A09090; /* Grey foreground text */
 842 }
 843
 844 .table-chart-summary-label {
 845   font-weight: 600;
 846   padding: 1px 0px;
 847 }
 848
 849 .table-chart-summary-label {
 850   color: #A09090; /* Light foreground text */
 851 }
 852
 853 /* === BEGIN manifest-editor.inc.css === */
 854
 855 /* Manifest Editor overrides */
 856
 857 .variables-view-container.manifest-editor {
 858   background-color: #000000;
 859   padding: 20px 2px;
 860 }
 861
 862 .manifest-editor .variable-or-property:focus > .title {
 863 /*  background-color: #EDEDED;
 864   color: #000; */
 865   border-radius: 4px;
 866 }
 867
 868 .manifest-editor .variables-view-property > .title > .name {
 869 /*  color: #27406A; */
 870 }
 871
 872 .manifest-editor .variable-or-property > .title > label,
 873 .manifest-editor textbox {
 874   font-family: monospace;
 875 }
 876
 877 .manifest-editor .variable-or-property > .title > .token-string {
 878 /*  color: #54BC6A; */
 879   font-weight: bold;
 880 }
 881
 882 .manifest-editor .variable-or-property > .title > .token-boolean,
 883 .manifest-editor .variable-or-property > .title > .token-number {
 884 /*  color: #009BD4; */
 885   font-weight: bold;
 886 }
 887
 888 .manifest-editor .variable-or-property > .title > .token-undefined {
 889 /*  color: #bbb; */
 890 }
 891
 892 .manifest-editor .variable-or-property > .title > .token-null {
 893 /*  color: #999; */
 894 }
 895
 896 .manifest-editor .variable-or-property > .title > .token-other {
 897 /*  color: #333; */
 898 }
 899
 900 .manifest-editor .variables-view-variable {
 901   border-bottom: none;
 902 }
 903
 904 .manifest-editor .variables-view-delete,
 905 .manifest-editor .variables-view-delete:hover,
 906 .manifest-editor .variables-view-delete:active,
 907 .manifest-editor .variable-or-property:focus .variables-view-delete,
 908 .manifest-editor .variables-view-add-property:hover,
 909 .manifest-editor .variables-view-add-property:active,
 910 .manifest-editor .variable-or-property:focus .variables-view-add-property {
 911   list-style-image: none;
 912   -moz-image-region: initial;
 913 }
 914
 915 .manifest-editor .variables-view-delete::before,
 916 .manifest-editor .variables-view-add-property::before {
 917   width: 11px;
 918   height: 11px;
 919   content: "";
 920   display: inline-block;
 921   background-size: 11px auto;
 922 }
 923
 924 .manifest-editor .variables-view-delete::before {
 925   background-image: url("app-manager/remove.svg");
 926   background-size: 12px auto;
 927 }
 928
 929 .manifest-editor .variables-view-add-property::before {
 930   background-image: url("app-manager/add.svg");
 931   -moz-margin-end: 2px;
 932 }
 933
 934 /* === END manifest-editor.inc.css === */
 935
 936 /* === END widgets.inc.css === */