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