LCARStrek/mozapps/extensions/extensions.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @import url("chrome://global/skin/in-content/common.css");
   6
   7 #addons-page {
   8   padding: 3px;
   9   margin: 0;
  10 }
  11
  12 .main-content {
  13   padding: 0;
  14 }
  15
  16 #nav-header {
  17   min-height: 39px;
  18 }
  19
  20 .view-pane > .list > scrollbox {
  21   border-radius: 1em 0 0 0;
  22 /*  padding-right: 48px;
  23   padding-left: 48px; */
  24 }
  25
  26 #search-list > scrollbox {
  27   border-radius: 0;
  28 }
  29
  30 /*** global warnings ***/
  31
  32 .global-warning-container {
  33   overflow-x: hidden;
  34 }
  35
  36 .global-warning {
  37   -moz-box-align: center;
  38   padding: 0 8px;
  39   color: #000000;
  40   font-weight: bold;
  41 }
  42
  43 #addons-page[warning] .global-warning-container {
  44   background-color: #FFCF00;
  45 }
  46
  47 #detail-view .global-warning {
  48   padding: 4px 12px;
  49   border-bottom: 3px solid #000000;
  50 }
  51
  52 @media (max-width: 600px) {
  53   .global-warning-text {
  54     display: none;
  55   }
  56
  57   .global-warning .warning-icon {
  58     /* background-color: #FFF;
  59     box-shadow: 0px 0px 2px 5px #FFF;
  60     border-radius: 10px; */
  61   }
  62 }
  63
  64 /*** global informations ***/
  65
  66 /* Plugins aren't yet disabled by safemode (bug 342333),
  67    so don't show that warning when viewing plugins. */
  68 #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
  69 #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
  70   background-color: inherit;
  71   background-image: none;
  72 }
  73
  74 /*** notification icons ***/
  75
  76 .warning-icon,
  77 .error-icon,
  78 .pending-icon,
  79 .info-icon {
  80   width: 16px;
  81   height: 16px;
  82   margin: 1px 0;
  83 }
  84
  85 .warning-icon {
  86   list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
  87 }
  88
  89 .error-icon {
  90   list-style-image: url("chrome://mozapps/skin/extensions/alerticon-error.svg");
  91 }
  92
  93 .pending-icon,
  94 .info-icon {
  95   list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-positive.svg");
  96 }
  97
  98 .addon-view[pending="disable"] .pending-icon,
  99 .addon-view[pending="uninstall"] .pending-icon {
 100   list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
 101 }
 102
 103 /*** view alert boxes ***/
 104
 105 .alert-container {
 106   -moz-box-align: center;
 107   margin-right: 48px;
 108   margin-left: 48px;
 109   padding-top: .5em;
 110 }
 111
 112 .alert-spacer-before {
 113   -moz-box-flex: 1;
 114 }
 115
 116 .alert-spacer-after {
 117   -moz-box-flex: 3;
 118 }
 119
 120 .alert {
 121   -moz-box-align: center;
 122   padding: 10px;
 123   color: #FF9F00;
 124   border: 1px solid #9C9CFF;
 125   border-radius: 8px;
 126   background-color: #000000;
 127   background-clip: padding-box;
 128 }
 129
 130 .alert .alert-title {
 131   font-weight: bold;
 132   font-size: 200%;
 133   margin-bottom: 15px;
 134 }
 135
 136 .alert button {
 137   margin: 1em 2em;
 138 }
 139
 140 .loading {
 141   list-style-image: url("chrome://global/skin/icons/loading.png");
 142   padding-left: 20px;
 143   padding-right: 20px;
 144 }
 145
 146 @media (min-resolution: 1.1dppx) {
 147   .loading > image {
 148     width: 16px;
 149     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
 150   }
 151 }
 152
 153 button.warning {
 154   list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
 155 }
 156
 157 /*** category selector ***/
 158
 159 #categories {
 160   padding-top: 0;/*31px;*/
 161 }
 162
 163 .category[disabled] {
 164   min-height: 0;
 165   opacity: 0;
 166   transition-property: min-height, opacity;
 167   transition-duration: 1s, 0.8s;
 168 }
 169
 170 .category:not([disabled]) {
 171   min-height: 40px;
 172   transition-property: min-height, opacity;
 173   transition-duration: 1s, 0.8s;
 174 }
 175
 176 /* Maximize the size of the viewport when the window is small */
 177 @media (max-width: 800px) {
 178   .category-name {
 179     display: none;
 180   }
 181 }
 182
 183 .category-badge {
 184   background-color: #E7ADE7;
 185   padding: 2px 8px;
 186   margin: 6px 0;
 187   margin-inline-start: 6px;
 188   border-radius: 100%;
 189   color: #000000;
 190   font-weight: bold;
 191   text-align: center;
 192 }
 193
 194 .category-badge[value="0"] {
 195   display: none;
 196 }
 197
 198 #category-search > .category-icon {
 199   list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
 200 }
 201 #category-discover > .category-icon {
 202   list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
 203 }
 204 #category-locale > .category-icon {
 205   list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
 206 }
 207 #category-extension > .category-icon {
 208   list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
 209 }
 210 #category-service > .category-icon {
 211   list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
 212 }
 213 #category-theme > .category-icon {
 214   list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
 215 }
 216 #category-plugin > .category-icon {
 217   list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
 218 }
 219 #category-dictionary > .category-icon {
 220   list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
 221 }
 222 #category-experiment > .category-icon {
 223   list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
 224 }
 225 #category-legacy > .category-icon {
 226   list-style-image: url("chrome://mozapps/skin/extensions/category-legacy.svg");
 227 }
 228 #category-availableUpdates > .category-icon {
 229   list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
 230 }
 231 #category-recentUpdates > .category-icon {
 232   list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
 233 }
 234
 235 /*** main content ***/
 236
 237 #addons-page > hbox {
 238   /* This applies to the box surrounding all content. */
 239   background-color: #A09090;
 240   border-radius: 1em 0 0 0;
 241 }
 242
 243 .main-content {
 244   border: none;
 245   padding-bottom: 0;
 246 }
 247
 248 #view-port {
 249 }
 250
 251 #headered-views-content {
 252   border-radius: 1em 0 0 0;
 253   background-color: #000000;
 254 }
 255
 256 /*** header ***/
 257
 258 #header {
 259   height: 2em;
 260   padding: 3px;
 261   background-color: #A09090;
 262 }
 263
 264 @media (max-width: 600px) {
 265   #header-search {
 266     width: 12em;
 267   }
 268 }
 269
 270 #header-utils-btn {
 271   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
 272   -moz-context-properties: fill;
 273   fill: #FF9F00;
 274   margin-inline-end: 16px;
 275 }
 276
 277 #header-utils-btn:hover,
 278 #header-utils-btn:hover:active,
 279 #header-utils-btn[open="true"] {
 280   fill: #000000;
 281 }
 282
 283 #header-utils-btn > .button-box > .button-menu-dropmarker {
 284   border: none;
 285   background: transparent;
 286 }
 287
 288 #header-utils-btn:hover > .button-box > .button-menu-dropmarker {
 289   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
 290 }
 291
 292 .view-header {
 293   margin: 0 48px;
 294   background-color: #9C9CFF;
 295   color: #000000;
 296   border-radius: 8px;
 297   padding: 0px 1em;
 298   margin: 3px;
 299 }
 300
 301 .header-button {
 302 }
 303
 304 .header-button[disabled="true"] > .toolbarbutton-icon {
 305 }
 306
 307 .header-button:not([disabled="true"]):hover,
 308 #header-utils-btn:not([disabled="true"]):hover {
 309   cursor: pointer;
 310 }
 311
 312 .header-button > .toolbarbutton-text {
 313   display: none;
 314 }
 315
 316 .nav-button {
 317   list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png");
 318 }
 319
 320 #forward-btn {
 321   border-inline-start: none;
 322 }
 323
 324 #back-btn:-moz-locale-dir(ltr),
 325 #forward-btn:-moz-locale-dir(rtl) {
 326   -moz-image-region: rect(42px 25px 63px 0px);
 327 }
 328
 329 #back-btn[disabled="true"]:-moz-locale-dir(ltr),
 330 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
 331   -moz-image-region: rect(42px 50px 63px 25px);
 332 }
 333
 334 #back-btn:-moz-locale-dir(rtl),
 335 #forward-btn:-moz-locale-dir(ltr) {
 336   -moz-image-region: rect(63px 25px 84px 0px);
 337 }
 338
 339 #back-btn[disabled="true"]:-moz-locale-dir(rtl),
 340 #forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
 341   -moz-image-region: rect(63px 50px 84px 25px);
 342 }
 343
 344 /*** sorters ***/
 345
 346 .sort-controls {
 347   border-right: 3px solid #000000;
 348 }
 349
 350 .sorter {
 351   border: none;
 352   border-left: 3px solid #000000;
 353   background-color: transparent;
 354   color: #000000;
 355   border-radius: 0;
 356   margin: 0;
 357   min-width: 12px !important;
 358   -moz-box-direction: reverse;
 359 }
 360 .sorter:hover {
 361   background-color: #FFCF00;
 362   color: #000000;
 363 }
 364
 365 .sorter .button-box {
 366   padding-top: 0;
 367   padding-bottom: 0;
 368 }
 369
 370 .sorter[checkState="1"],
 371 .sorter[checkState="2"] {
 372   background-color: #008484;
 373   color: #FFCF00;
 374 }
 375
 376 .sorter[checkState="1"] {
 377   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
 378 }
 379
 380 .sorter[checkState="2"] {
 381   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 382 }
 383
 384 .sorter .button-icon {
 385   margin-inline-start: 6px;
 386 }
 387
 388
 389 /*** discover view ***/
 390
 391 #discover-view {
 392   background-image: linear-gradient(#A09090 28px, #000000 28px, #000000 100%);
 393 }
 394
 395 .discover-spacer-before,
 396 .discover-spacer-after {
 397   -moz-box-flex: 1;
 398 }
 399
 400 #discover-error .alert {
 401   max-width: 45em;
 402   -moz-box-flex: 1;
 403 }
 404
 405 .discover-logo {
 406   list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
 407   margin-inline-end: 15px;
 408 }
 409
 410 .discover-title {
 411   font-weight: bold;
 412   font-size: 24px;
 413   /* font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; */
 414   margin: 0 0 15px 0;
 415 }
 416
 417 .discover-description {
 418   text-align: justify;
 419   margin: 0 0 15px 0;
 420 }
 421
 422 .discover-footer {
 423   text-align: justify;
 424 }
 425
 426 #discover-browser {
 427   border-radius: 1em 0px 0px;
 428 }
 429
 430 /*** list ***/
 431
 432 .list {
 433   margin: 0;
 434   border-width: 0 !important;
 435   background-color: transparent;
 436 }
 437
 438 .list > scrollbox > .scrollbox-innerbox {
 439   border: 1px dotted transparent;
 440 }
 441
 442 .list:-moz-focusring > scrollbox > .scrollbox-innerbox {
 443   border-color: #008484;
 444 }
 445
 446 .addon {
 447   border-bottom: 1px solid #9C9CFF;
 448   padding: 5px;
 449   background-origin: border-box;
 450 }
 451
 452 .addon:not(:only-child):last-child {
 453   border-bottom-width: 0;
 454 }
 455
 456 .details {
 457   cursor: pointer;
 458   margin: 0;
 459   margin-inline-start: 10px;
 460 }
 461
 462 .icon-container {
 463   width: 48px;
 464   height: 48px;
 465   margin: 3px 7px;
 466   -moz-box-align: center;
 467   -moz-box-pack: center;
 468 }
 469
 470 .icon {
 471   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
 472   max-width: 48px;
 473   max-height: 48px;
 474 }
 475
 476 .content-inner-container {
 477   margin-inline-end: 5px;
 478 }
 479
 480 .addon[active="false"] .icon {
 481   filter: grayscale(1);
 482 }
 483
 484 .addon-view[type="theme"] .icon {
 485   list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
 486 }
 487
 488 .addon-view[type="locale"] .icon {
 489   list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
 490 }
 491
 492 .addon-view[type="plugin"] .icon {
 493   list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
 494 }
 495
 496 .addon-view[type="dictionary"] .icon {
 497   list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
 498 }
 499
 500 .addon-view[type="experiment"] .icon {
 501   list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
 502 }
 503
 504 .name-container {
 505   font-size: 1.3rem;
 506   font-weight: bold;
 507   color: #9C9CFF;
 508   margin-bottom: 0;
 509   -moz-box-align: end;
 510   -moz-box-flex: 1;
 511 }
 512
 513 .legacy-warning {
 514   background-color: #FFCF00;
 515   color: #000000;
 516   padding: 4px 5px 3px;
 517   font-size: 0.9rem;
 518   font-weight: 600;
 519   -moz-user-focus: ignore;
 520 }
 521
 522 .legacy-warning:hover {
 523   background-color: #FF9F00;
 524   color: #000000;
 525   text-decoration: none;
 526 }
 527
 528 #detail-view .legacy-warning {
 529   margin-top: 0.78rem;
 530 }
 531
 532 .creator {
 533   font-weight: bold;
 534 }
 535
 536 .description-container {
 537   margin-inline-start: 6px;
 538   -moz-box-align: center;
 539   font-size: 1.25rem;
 540 }
 541
 542 .description {
 543   margin: 0;
 544 }
 545
 546 .warning,
 547 .pending,
 548 .error,
 549 .info {
 550   margin-inline-start: 48px;
 551   font-weight: bold;
 552   -moz-box-align: center;
 553 }
 554
 555 .content-container,
 556 .basicinfo-container {
 557   -moz-box-align: start;
 558 }
 559
 560 .addon[status="installing"] > .content-container {
 561   -moz-box-align: stretch;
 562 }
 563
 564 .update-info-container {
 565   -moz-box-align: center;
 566 }
 567
 568 .update-available {
 569   -moz-box-align: end;
 570 }
 571
 572 .install-status-container {
 573   -moz-box-pack: end;
 574   -moz-box-align: end;
 575 }
 576
 577 .name-outer-container {
 578   -moz-box-pack: center;
 579 }
 580
 581 .relnotes-toggle-container,
 582 .icon-outer-container {
 583   -moz-box-pack: start;
 584 }
 585
 586 .status-container,
 587 .control-container {
 588   -moz-box-pack: end;
 589 }
 590
 591 .addon-view .warning {
 592   color: #FFCF00;
 593 }
 594
 595 .addon-view .error {
 596   color: #FF0000;
 597 }
 598
 599 .addon-view .pending {
 600   color: #008484;
 601 }
 602
 603 .addon-view[pending="disable"] .pending,
 604 .addon-view[pending="uninstall"] .pending {
 605   color: #FF9C00;
 606 }
 607
 608 .addon .relnotes-container {
 609   -moz-box-align: start;
 610   margin-inline-start: 6px;
 611   height: 0;
 612   overflow: hidden;
 613   opacity: 0;
 614   transition-property: height, opacity;
 615   transition-duration: 0.5s, 0.5s;
 616 }
 617
 618 .addon[show-relnotes] .relnotes-container {
 619   opacity: 1;
 620   transition-property: height, opacity;
 621   transition-duration: 0.5s, 0.5s;
 622 }
 623
 624 .addon .relnotes-header {
 625   font-weight: bold;
 626   margin: 10px 0;
 627 }
 628
 629 .addon .relnotes-toggle {
 630   border: none;
 631   background: transparent;
 632   font-weight: bold;
 633   -moz-box-direction: reverse;
 634   cursor: pointer;
 635   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
 636 }
 637
 638 .addon .relnotes-toggle > .button-box > .button-icon {
 639   padding-inline-start: 4px;
 640 }
 641
 642 .addon[show-relnotes] .relnotes-toggle {
 643   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 644 }
 645
 646 .addon-view[notification],
 647 .addon-view[pending] {
 648   --view-highlight-color: transparent;
 649   /*
 650   background-image: radial-gradient(at 50% 0%,
 651                                     var(--view-highlight-color) 0%,
 652                                     transparent 75%);
 653   */
 654   background-color: var(--view-highlight-color);
 655 }
 656
 657 .addon-view[notification="warning"] {
 658   --view-highlight-color: #FFCF00;
 659   color: #000000;
 660 }
 661
 662 .addon-view[notification="warning"] .warning {
 663   color: #000000;
 664 }
 665
 666 .addon-view[notification="warning"] .name-container {
 667   color: #000000;
 668 }
 669
 670 .addon-view[notification="warning"] .text-link:hover {
 671   color: #000000;
 672 }
 673
 674 .addon-view[notification="error"] {
 675   --view-highlight-color: #FF0000;
 676   color: #000000;
 677 }
 678
 679 .addon-view[notification="error"] .error {
 680   color: #000000;
 681 }
 682
 683 .addon-view[notification="info"] {
 684   --view-highlight-color: #9C9CFF;
 685   color: #000000;
 686 }
 687
 688 .addon-view[pending="enable"],
 689 .addon-view[pending="upgrade"],
 690 .addon-view[pending="install"] {
 691   --view-highlight-color: #008484;
 692 }
 693
 694 .addon-view[pending="enable"] .pending,
 695 .addon-view[pending="upgrade"] .pending,
 696 .addon-view[pending="install"] .pending {
 697   color: #000000;
 698 }
 699
 700 .addon-view[pending="disable"],
 701 .addon-view[pending="uninstall"] {
 702   color: #8050B0;
 703 }
 704
 705
 706 /*** item - uninstalled ***/
 707
 708 .addon[status="uninstalled"] {
 709   border: none;
 710 }
 711
 712 .addon[status="uninstalled"] > .container {
 713   -moz-box-align: center;
 714   padding: 4px 20px;
 715   background-color: #8050B0;
 716   border-radius: 8px;
 717   font-size: 120%;
 718 }
 719
 720 .addon[status="uninstalled"][selected] {
 721   background-color: transparent;
 722 }
 723
 724 .addon[selected] {
 725   background-color: #008484;
 726   color: #FF9F00;
 727 }
 728
 729 .addon[selected] .name-container {
 730   color: #FFCF00;
 731 }
 732
 733 .addon[active="false"] {
 734   background-color: #8050B0;
 735   color: #E7ADE7;
 736 }
 737
 738 .addon-view[active="false"] .name-container {
 739   color: #E7ADE7;
 740   color: #000000;
 741 }
 742
 743 .addon[active="false"][selected] {
 744   color: #E7ADE7;
 745 }
 746
 747 .addon[active="false"][selected] .name-container {
 748   color: #E7ADE7;
 749 }
 750
 751
 752 /*** search view ***/
 753
 754 #search-filter {
 755   padding: 5px 20px;
 756 /*  margin-right: 48px;
 757   margin-left: 48px;*/
 758   -moz-box-align: center;
 759   background-color: #000000;
 760   font-size: 120%;
 761   border-bottom: 1px solid #9C9CFF;
 762   overflow-x: hidden;
 763 }
 764
 765 #search-filter-label {
 766   font-weight: bold;
 767   color: #FFCF00;
 768   margin-inline-end: 10px;
 769 }
 770
 771 #search-allresults-link {
 772   margin-top: 1em;
 773   margin-bottom: 2em;
 774 }
 775
 776 /*** detail view ***/
 777
 778 #detail-view .loading {
 779   opacity: 0;
 780 }
 781
 782 #detail-view[loading-extended] .loading {
 783   opacity: 1;
 784   transition-property: opacity;
 785   transition-duration: 1s;
 786 }
 787
 788 .detail-view-container {
 789   padding: 0 2em 2em 2em;
 790   font-size: 1.25rem;
 791 }
 792
 793 #detail-notifications {
 794   margin-top: 1em;
 795   margin-bottom: 2em;
 796 }
 797
 798 #detail-notifications .warning,
 799 #detail-notifications .pending,
 800 #detail-notifications .error {
 801   margin-inline-start: 0;
 802 }
 803
 804 #detail-icon-container {
 805   width: 64px;
 806   margin-inline-end: 10px;
 807   margin-top: 6px;
 808 }
 809
 810 #detail-icon {
 811   max-width: 64px;
 812   max-height: 64px;
 813 }
 814
 815 #detail-summary {
 816   margin-bottom: 2em;
 817 }
 818
 819 #detail-name-container {
 820   font-size: 2.5rem;
 821   font-weight: normal;
 822 }
 823
 824 #detail-screenshot-box {
 825   margin-inline-end: 2em;
 826 /*  background-color: white;*/
 827 }
 828
 829
 830 #detail-screenshot {
 831   max-width: 300px;
 832   max-height: 300px;
 833 }
 834
 835 #detail-screenshot[loading] {
 836   background-image: url("chrome://global/skin/icons/loading.png");
 837   background-position: 50% 50%;
 838   background-repeat: no-repeat;
 839 }
 840
 841 @media (min-resolution: 1.1dppx) {
 842   #detail-screenshot[loading] {
 843     background-image: url("chrome://global/skin/icons/loading@2x.png");
 844     background-size: 16px;
 845   }
 846 }
 847
 848 #detail-screenshot[loading="error"] {
 849   background-image: url("chrome://global/skin/icons/alert-error.gif");
 850 }
 851
 852 #detail-desc-container {
 853   margin-bottom: 2em;
 854 }
 855
 856 #detail-desc, #detail-fulldesc {
 857   margin-inline-start: 6px;
 858   white-space: pre-wrap;
 859   /* This is necessary to fix layout issues with multi-line descriptions, see
 860      bug 592712*/
 861   outline: solid transparent;
 862   min-width: 8em;
 863 }
 864
 865 #detail-fulldesc {
 866   margin-top: 1em;
 867 }
 868
 869 #detail-contributions {
 870   border-radius: 5px;
 871   border: 1px solid #9C9CFF;
 872   margin-bottom: 2em;
 873   padding: 1em;
 874   background-color: #FFCF00;
 875 }
 876
 877 #detail-contrib-description {
 878   font-style: italic;
 879   margin-bottom: 1em;
 880   color: #000000;
 881 }
 882
 883 #detail-contrib-suggested {
 884   color: #8050B0;
 885   font-weight: bold;
 886 }
 887
 888 #detail-contrib-btn {
 889   list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
 890 }
 891
 892 #detail-contrib-btn .button-icon {
 893   margin-inline-end: 3px;
 894 }
 895
 896 #detail-grid {
 897   min-width: 15em;
 898   margin-bottom: 2em;
 899 }
 900
 901 #detail-grid > columns > column:first-child {
 902   max-width: 25em;
 903 }
 904
 905 .detail-row[first-row="true"],
 906 .detail-row-complex[first-row="true"],
 907 setting[first-row="true"] {
 908   border-top: none;
 909 }
 910
 911 .detail-row,
 912 .detail-row-complex,
 913 setting {
 914   border-top: 1px solid #9C9CFF;
 915   -moz-box-align: center;
 916   min-height: 35px;
 917   line-height: 20px;
 918 }
 919
 920 #detail-controls {
 921   margin-bottom: 1em;
 922 }
 923
 924 .inline-options-browser,
 925 setting[first-row="true"] {
 926   margin-top: 2em;
 927 }
 928
 929 setting {
 930   -moz-box-align: start;
 931 }
 932
 933 .preferences-alignment {
 934   min-height: 30px;
 935   -moz-box-align: center;
 936 }
 937
 938 .preferences-description {
 939   font-size: 90.9%;
 940   color: #808080;
 941   margin-top: -2px;
 942   margin-inline-start: 2em;
 943   white-space: pre-wrap;
 944 }
 945
 946 .preferences-description:empty {
 947   display: none;
 948 }
 949
 950 setting[type="radio"] > radiogroup {
 951   -moz-box-orient: horizontal;
 952 }
 953
 954 /*** creator ***/
 955
 956 .creator > label {
 957   margin-inline-end: 0;
 958 }
 959
 960 .creator > .text-link {
 961   margin-top: 1px;
 962   margin-bottom: 1px;
 963 }
 964
 965
 966 /*** rating ***/
 967
 968 .meta-rating {
 969   margin-inline-end: 0;
 970   padding-top: 2px;
 971 }
 972
 973 .meta-rating > .star {
 974   list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
 975   padding: 0 1px;
 976 }
 977
 978 .meta-rating > .star[on="true"] {
 979   list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
 980 }
 981
 982
 983 /*** download progress ***/
 984
 985 .download-progress {
 986   background-color: #000000;
 987   border-radius: 2px;
 988   border: 1px solid #FF9F00;
 989   width: 200px;
 990   height: 30px;
 991   margin: 2px 4px;
 992 }
 993
 994 .download-progress[mode="undetermined"] {
 995   border-color: #A09090;
 996 }
 997
 998 .download-progress .start-cap,
 999 .download-progress[complete] .end-cap,
1000 .download-progress[mode="undetermined"] .end-cap,
1001 .download-progress .progress .progress-bar {
1002   background-color: #008484;
1003 }
1004
1005 .download-progress .progress .progress-bar  {
1006   border-left-width: 0;
1007   border-right-width: 0;
1008   min-height: 21px;
1009 }
1010
1011 .download-progress .progress {
1012   background-color: transparent;
1013   padding: 0;
1014   margin: 0;
1015   border: none;
1016 }
1017
1018 .download-progress .start-cap, .download-progress .end-cap {
1019   width: 12px;
1020 }
1021
1022 .download-progress .start-cap:-moz-locale-dir(ltr),
1023 .download-progress .end-cap:-moz-locale-dir(rtl) {
1024   border-radius: 1px 0 0 1px;
1025 }
1026
1027 .download-progress .end-cap:-moz-locale-dir(ltr),
1028 .download-progress .start-cap:-moz-locale-dir(rtl) {
1029   border-radius: 0 1px 1px 0;
1030 }
1031
1032 .download-progress .cancel {
1033   -moz-appearance: none;
1034   background-color: #8050B0;
1035   border: 1px solid #9C9CFF;
1036   padding: 3px;
1037   min-width: 0;
1038   width: 20px;
1039   height: 20px;
1040   margin: 3px;
1041 }
1042
1043 .download-progress .cancel .button-box {
1044   padding: 0;
1045   border: none;
1046 }
1047
1048 .download-progress .cancel .button-text {
1049   display: none;
1050 }
1051
1052 .download-progress .cancel .button-icon {
1053   margin-inline-start: 0;
1054 }
1055
1056 .download-progress .cancel {
1057   list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1058 }
1059
1060 .download-progress .status-container {
1061   -moz-box-align: center;
1062 }
1063
1064 .download-progress .status {
1065 /*  text-shadow: #FFF 0 0 2px; */
1066 }
1067
1068 /*** install status ***/
1069
1070 .install-status {
1071   -moz-box-align: center;
1072 }
1073
1074
1075 /*** check for updates ***/
1076
1077 #updates-container {
1078   -moz-box-align: center;
1079 }
1080
1081 #updates-container .button-link {
1082   font-weight: bold;
1083 }
1084
1085 #updates-installed,
1086 #updates-downloaded {
1087   color: #008484;
1088   font-weight: bold;
1089 }
1090
1091 #update-selected {
1092   margin: 12px;
1093 }
1094
1095 /*** buttons ***/
1096
1097 .addon-control[disabled="true"]:not(.no-auto-hide) {
1098   display: none;
1099 }
1100
1101 .no-auto-hide .addon-control {
1102   display: block !important;
1103 }
1104
1105 button.button-link {
1106   background: transparent;
1107   border: none;
1108   text-decoration: underline;
1109   color: #3333FF;
1110   cursor: pointer;
1111   min-width: 0;
1112   margin: 0 6px;
1113 }
1114
1115 /* Needed to override normal button style from inContent.css */
1116 button.button-link:not([disabled="true"]):active:hover {
1117 }
1118
1119 .addon-control.replacement {
1120   background-color: #008484;
1121   color: #000000;
1122 }
1123
1124 /*** telemetry experiments ***/
1125
1126 #detail-experiment-container {
1127   font-size: 80%;
1128   margin-bottom: 1em;
1129 }
1130
1131 #detail-experiment-bullet-container,
1132 #detail-experiment-state,
1133 #detail-experiment-time,
1134 .experiment-bullet-container,
1135 .experiment-state,
1136 .experiment-time {
1137   vertical-align: middle;
1138   display: inline-block;
1139 }
1140
1141 .addon .experiment-bullet,
1142 #detail-experiment-bullet {
1143   fill: #8050B0;
1144 }
1145
1146 .addon[active="true"] .experiment-bullet,
1147 #detail-view[active="true"] #detail-experiment-bullet {
1148   fill: #FFCF00;
1149 }
1150
1151 /*** info UI for add-ons that have been disabled for being unsigned ***/
1152
1153 #show-disabled-unsigned-extensions:not(:hover) {
1154   background-color: #FF0000;
1155 }
1156
1157 #disabled-unsigned-addons-info {
1158   margin-bottom: 2em;
1159   margin-right: 48px;
1160   margin-left: 48px;
1161 }
1162
1163 #disabled-unsigned-addons-heading,
1164 #legacy-extensions-heading {
1165   font-size: 1.4em;
1166   font-weight: bold;
1167   margin-bottom: .5em;
1168 }
1169
1170 #signing-dev-info {
1171   font-style: italic;
1172 }
1173
1174 #detail-findUpdates-btn[hidden] {
1175   display: -moz-box;
1176   visibility: hidden;
1177 }