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 .legacy-warning {
 509   background-color: #FFCF00;
 510   color: #000000;
 511   padding: 4px 5px 3px;
 512   font-size: 0.9rem;
 513   font-weight: 600;
 514   -moz-user-focus: ignore;
 515 }
 516
 517 .legacy-warning:hover {
 518   background-color: #FF9F00;
 519   color: #000000;
 520   text-decoration: none;
 521 }
 522
 523 #detail-view .legacy-warning {
 524   margin-top: 0.78rem;
 525 }
 526
 527 .creator {
 528   font-weight: bold;
 529 }
 530
 531 .description-container {
 532   margin-inline-start: 6px;
 533   -moz-box-align: center;
 534   font-size: 1.25rem;
 535 }
 536
 537 .description {
 538   margin: 0;
 539 }
 540
 541 .warning,
 542 .pending,
 543 .error,
 544 .info {
 545   margin-inline-start: 48px;
 546   font-weight: bold;
 547   -moz-box-align: center;
 548 }
 549
 550 .content-container,
 551 .basicinfo-container {
 552   -moz-box-align: start;
 553 }
 554
 555 .addon[status="installing"] > .content-container {
 556   -moz-box-align: stretch;
 557 }
 558
 559 .update-info-container {
 560   -moz-box-align: center;
 561 }
 562
 563 .update-available {
 564   -moz-box-align: end;
 565 }
 566
 567 .install-status-container {
 568   -moz-box-pack: end;
 569   -moz-box-align: end;
 570 }
 571
 572 .name-outer-container {
 573   -moz-box-pack: center;
 574 }
 575
 576 .relnotes-toggle-container,
 577 .icon-outer-container {
 578   -moz-box-pack: start;
 579 }
 580
 581 .status-container,
 582 .control-container {
 583   -moz-box-pack: end;
 584 }
 585
 586 .addon-view .warning {
 587   color: #FFCF00;
 588 }
 589
 590 .addon-view .error {
 591   color: #FF0000;
 592 }
 593
 594 .addon-view .pending {
 595   color: #008484;
 596 }
 597
 598 .addon-view[pending="disable"] .pending,
 599 .addon-view[pending="uninstall"] .pending {
 600   color: #FF9C00;
 601 }
 602
 603 .addon .relnotes-container {
 604   -moz-box-align: start;
 605   margin-inline-start: 6px;
 606   height: 0;
 607   overflow: hidden;
 608   opacity: 0;
 609   transition-property: height, opacity;
 610   transition-duration: 0.5s, 0.5s;
 611 }
 612
 613 .addon[show-relnotes] .relnotes-container {
 614   opacity: 1;
 615   transition-property: height, opacity;
 616   transition-duration: 0.5s, 0.5s;
 617 }
 618
 619 .addon .relnotes-header {
 620   font-weight: bold;
 621   margin: 10px 0;
 622 }
 623
 624 .addon .relnotes-toggle {
 625   border: none;
 626   background: transparent;
 627   font-weight: bold;
 628   -moz-box-direction: reverse;
 629   cursor: pointer;
 630   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
 631 }
 632
 633 .addon .relnotes-toggle > .button-box > .button-icon {
 634   padding-inline-start: 4px;
 635 }
 636
 637 .addon[show-relnotes] .relnotes-toggle {
 638   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 639 }
 640
 641 .addon-view[notification],
 642 .addon-view[pending] {
 643   --view-highlight-color: transparent;
 644   /*
 645   background-image: radial-gradient(at 50% 0%,
 646                                     var(--view-highlight-color) 0%,
 647                                     transparent 75%);
 648   */
 649   background-color: var(--view-highlight-color);
 650 }
 651
 652 .addon-view[notification="warning"] {
 653   --view-highlight-color: #FFCF00;
 654   color: #000000;
 655 }
 656
 657 .addon-view[notification="warning"] .warning {
 658   color: #000000;
 659 }
 660
 661 .addon-view[notification="warning"] .name-container {
 662   color: #000000;
 663 }
 664
 665 .addon-view[notification="warning"] .text-link:hover {
 666   color: #000000;
 667 }
 668
 669 .addon-view[notification="error"] {
 670   --view-highlight-color: #FF0000;
 671   color: #000000;
 672 }
 673
 674 .addon-view[notification="error"] .error {
 675   color: #000000;
 676 }
 677
 678 .addon-view[notification="info"] {
 679   --view-highlight-color: #9C9CFF;
 680   color: #000000;
 681 }
 682
 683 .addon-view[pending="enable"],
 684 .addon-view[pending="upgrade"],
 685 .addon-view[pending="install"] {
 686   --view-highlight-color: #008484;
 687 }
 688
 689 .addon-view[pending="enable"] .pending,
 690 .addon-view[pending="upgrade"] .pending,
 691 .addon-view[pending="install"] .pending {
 692   color: #000000;
 693 }
 694
 695 .addon-view[pending="disable"],
 696 .addon-view[pending="uninstall"] {
 697   color: #8050B0;
 698 }
 699
 700
 701 /*** item - uninstalled ***/
 702
 703 .addon[status="uninstalled"] {
 704   border: none;
 705 }
 706
 707 .addon[status="uninstalled"] > .container {
 708   -moz-box-align: center;
 709   padding: 4px 20px;
 710   background-color: #8050B0;
 711   border-radius: 8px;
 712   font-size: 120%;
 713 }
 714
 715 .addon[status="uninstalled"][selected] {
 716   background-color: transparent;
 717 }
 718
 719 .addon[selected] {
 720   background-color: #008484;
 721   color: #FF9F00;
 722 }
 723
 724 .addon[selected] .name-container {
 725   color: #FFCF00;
 726 }
 727
 728 .addon[active="false"] {
 729   background-color: #8050B0;
 730   color: #E7ADE7;
 731 }
 732
 733 .addon-view[active="false"] .name-container {
 734   color: #E7ADE7;
 735   color: #000000;
 736 }
 737
 738 .addon[active="false"][selected] {
 739   color: #E7ADE7;
 740 }
 741
 742 .addon[active="false"][selected] .name-container {
 743   color: #E7ADE7;
 744 }
 745
 746
 747 /*** search view ***/
 748
 749 #search-filter {
 750   padding: 5px 20px;
 751 /*  margin-right: 48px;
 752   margin-left: 48px;*/
 753   -moz-box-align: center;
 754   background-color: #000000;
 755   font-size: 120%;
 756   border-bottom: 1px solid #9C9CFF;
 757   overflow-x: hidden;
 758 }
 759
 760 #search-filter-label {
 761   font-weight: bold;
 762   color: #FFCF00;
 763   margin-inline-end: 10px;
 764 }
 765
 766 #search-allresults-link {
 767   margin-top: 1em;
 768   margin-bottom: 2em;
 769 }
 770
 771 /*** detail view ***/
 772
 773 #detail-view .loading {
 774   opacity: 0;
 775 }
 776
 777 #detail-view[loading-extended] .loading {
 778   opacity: 1;
 779   transition-property: opacity;
 780   transition-duration: 1s;
 781 }
 782
 783 .detail-view-container {
 784   padding: 0 2em 2em 2em;
 785   font-size: 1.25rem;
 786 }
 787
 788 #detail-notifications {
 789   margin-top: 1em;
 790   margin-bottom: 2em;
 791 }
 792
 793 #detail-notifications .warning,
 794 #detail-notifications .pending,
 795 #detail-notifications .error {
 796   margin-inline-start: 0;
 797 }
 798
 799 #detail-icon-container {
 800   width: 64px;
 801   margin-inline-end: 10px;
 802   margin-top: 6px;
 803 }
 804
 805 #detail-icon {
 806   max-width: 64px;
 807   max-height: 64px;
 808 }
 809
 810 #detail-summary {
 811   margin-bottom: 2em;
 812 }
 813
 814 #detail-name-container {
 815   font-size: 2.5rem;
 816   font-weight: normal;
 817 }
 818
 819 #detail-screenshot-box {
 820   margin-inline-end: 2em;
 821 /*  background-color: white;*/
 822 }
 823
 824
 825 #detail-screenshot {
 826   max-width: 300px;
 827   max-height: 300px;
 828 }
 829
 830 #detail-screenshot[loading] {
 831   background-image: url("chrome://global/skin/icons/loading.png");
 832   background-position: 50% 50%;
 833   background-repeat: no-repeat;
 834 }
 835
 836 @media (min-resolution: 1.1dppx) {
 837   #detail-screenshot[loading] {
 838     background-image: url("chrome://global/skin/icons/loading@2x.png");
 839     background-size: 16px;
 840   }
 841 }
 842
 843 #detail-screenshot[loading="error"] {
 844   background-image: url("chrome://global/skin/icons/alert-error.gif");
 845 }
 846
 847 #detail-desc-container {
 848   margin-bottom: 2em;
 849 }
 850
 851 #detail-desc, #detail-fulldesc {
 852   margin-inline-start: 6px;
 853   white-space: pre-wrap;
 854   /* This is necessary to fix layout issues with multi-line descriptions, see
 855      bug 592712*/
 856   outline: solid transparent;
 857   min-width: 8em;
 858 }
 859
 860 #detail-fulldesc {
 861   margin-top: 1em;
 862 }
 863
 864 #detail-contributions {
 865   border-radius: 5px;
 866   border: 1px solid #9C9CFF;
 867   margin-bottom: 2em;
 868   padding: 1em;
 869   background-color: #FFCF00;
 870 }
 871
 872 #detail-contrib-description {
 873   font-style: italic;
 874   margin-bottom: 1em;
 875   color: #000000;
 876 }
 877
 878 #detail-contrib-suggested {
 879   color: #8050B0;
 880   font-weight: bold;
 881 }
 882
 883 #detail-contrib-btn {
 884   list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
 885 }
 886
 887 #detail-contrib-btn .button-icon {
 888   margin-inline-end: 3px;
 889 }
 890
 891 #detail-grid {
 892   min-width: 15em;
 893   margin-bottom: 2em;
 894 }
 895
 896 #detail-grid > columns > column:first-child {
 897   max-width: 25em;
 898 }
 899
 900 .detail-row[first-row="true"],
 901 .detail-row-complex[first-row="true"],
 902 setting[first-row="true"] {
 903   border-top: none;
 904 }
 905
 906 .detail-row,
 907 .detail-row-complex,
 908 setting {
 909   border-top: 1px solid #9C9CFF;
 910   -moz-box-align: center;
 911   min-height: 35px;
 912   line-height: 20px;
 913 }
 914
 915 #detail-controls {
 916   margin-bottom: 1em;
 917 }
 918
 919 .inline-options-browser,
 920 setting[first-row="true"] {
 921   margin-top: 2em;
 922 }
 923
 924 setting {
 925   -moz-box-align: start;
 926 }
 927
 928 .preferences-alignment {
 929   min-height: 30px;
 930   -moz-box-align: center;
 931 }
 932
 933 .preferences-description {
 934   font-size: 90.9%;
 935   color: #808080;
 936   margin-top: -2px;
 937   margin-inline-start: 2em;
 938   white-space: pre-wrap;
 939 }
 940
 941 .preferences-description:empty {
 942   display: none;
 943 }
 944
 945 setting[type="radio"] > radiogroup {
 946   -moz-box-orient: horizontal;
 947 }
 948
 949 /*** creator ***/
 950
 951 .creator > label {
 952   margin-inline-end: 0;
 953 }
 954
 955 .creator > .text-link {
 956   margin-top: 1px;
 957   margin-bottom: 1px;
 958 }
 959
 960
 961 /*** rating ***/
 962
 963 .meta-rating {
 964   margin-inline-end: 0;
 965   padding-top: 2px;
 966 }
 967
 968 .meta-rating > .star {
 969   list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
 970   padding: 0 1px;
 971 }
 972
 973 .meta-rating > .star[on="true"] {
 974   list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
 975 }
 976
 977
 978 /*** download progress ***/
 979
 980 .download-progress {
 981   background-color: #000000;
 982   border-radius: 2px;
 983   border: 1px solid #FF9F00;
 984   width: 200px;
 985   height: 30px;
 986   margin: 2px 4px;
 987 }
 988
 989 .download-progress[mode="undetermined"] {
 990   border-color: #A09090;
 991 }
 992
 993 .download-progress .start-cap,
 994 .download-progress[complete] .end-cap,
 995 .download-progress[mode="undetermined"] .end-cap,
 996 .download-progress .progress .progress-bar {
 997   background-color: #008484;
 998 }
 999
1000 .download-progress .progress .progress-bar  {
1001   border-left-width: 0;
1002   border-right-width: 0;
1003   min-height: 21px;
1004 }
1005
1006 .download-progress .progress {
1007   background-color: transparent;
1008   padding: 0;
1009   margin: 0;
1010   border: none;
1011 }
1012
1013 .download-progress .start-cap, .download-progress .end-cap {
1014   width: 12px;
1015 }
1016
1017 .download-progress .start-cap:-moz-locale-dir(ltr),
1018 .download-progress .end-cap:-moz-locale-dir(rtl) {
1019   border-radius: 1px 0 0 1px;
1020 }
1021
1022 .download-progress .end-cap:-moz-locale-dir(ltr),
1023 .download-progress .start-cap:-moz-locale-dir(rtl) {
1024   border-radius: 0 1px 1px 0;
1025 }
1026
1027 .download-progress .cancel {
1028   -moz-appearance: none;
1029   background-color: #8050B0;
1030   border: 1px solid #9C9CFF;
1031   padding: 3px;
1032   min-width: 0;
1033   width: 20px;
1034   height: 20px;
1035   margin: 3px;
1036 }
1037
1038 .download-progress .cancel .button-box {
1039   padding: 0;
1040   border: none;
1041 }
1042
1043 .download-progress .cancel .button-text {
1044   display: none;
1045 }
1046
1047 .download-progress .cancel .button-icon {
1048   margin-inline-start: 0;
1049 }
1050
1051 .download-progress .cancel {
1052   list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
1053 }
1054
1055 .download-progress .status-container {
1056   -moz-box-align: center;
1057 }
1058
1059 .download-progress .status {
1060 /*  text-shadow: #FFF 0 0 2px; */
1061 }
1062
1063 /*** install status ***/
1064
1065 .install-status {
1066   -moz-box-align: center;
1067 }
1068
1069
1070 /*** check for updates ***/
1071
1072 #updates-container {
1073   -moz-box-align: center;
1074 }
1075
1076 #updates-container .button-link {
1077   font-weight: bold;
1078 }
1079
1080 #updates-installed,
1081 #updates-downloaded {
1082   color: #008484;
1083   font-weight: bold;
1084 }
1085
1086 #update-selected {
1087   margin: 12px;
1088 }
1089
1090 /*** buttons ***/
1091
1092 .addon-control[disabled="true"]:not(.no-auto-hide) {
1093   display: none;
1094 }
1095
1096 .no-auto-hide .addon-control {
1097   display: block !important;
1098 }
1099
1100 button.button-link {
1101   background: transparent;
1102   border: none;
1103   text-decoration: underline;
1104   color: #3333FF;
1105   cursor: pointer;
1106   min-width: 0;
1107   margin: 0 6px;
1108 }
1109
1110 /* Needed to override normal button style from inContent.css */
1111 button.button-link:not([disabled="true"]):active:hover {
1112 }
1113
1114 /*** telemetry experiments ***/
1115
1116 #detail-experiment-container {
1117   font-size: 80%;
1118   margin-bottom: 1em;
1119 }
1120
1121 #detail-experiment-bullet-container,
1122 #detail-experiment-state,
1123 #detail-experiment-time,
1124 .experiment-bullet-container,
1125 .experiment-state,
1126 .experiment-time {
1127   vertical-align: middle;
1128   display: inline-block;
1129 }
1130
1131 .addon .experiment-bullet,
1132 #detail-experiment-bullet {
1133   fill: #8050B0;
1134 }
1135
1136 .addon[active="true"] .experiment-bullet,
1137 #detail-view[active="true"] #detail-experiment-bullet {
1138   fill: #FFCF00;
1139 }
1140
1141 /*** info UI for add-ons that have been disabled for being unsigned ***/
1142
1143 #show-disabled-unsigned-extensions:not(:hover) {
1144   background-color: #FF0000;
1145 }
1146
1147 #disabled-unsigned-addons-info {
1148   margin-bottom: 2em;
1149   margin-right: 48px;
1150   margin-left: 48px;
1151 }
1152
1153 #disabled-unsigned-addons-heading {
1154   font-size: 1.4em;
1155   font-weight: bold;
1156   margin-bottom: .5em;
1157 }
1158
1159 #signing-dev-info {
1160   font-style: italic;
1161 }