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