LCARStrek/mozapps/extensions/extensions.css

   1 /* ***** BEGIN LICENSE BLOCK *****
   2  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
   3  *
   4  * The contents of this file are subject to the Mozilla Public License Version
   5  * 1.1 (the "License"); you may not use this file except in compliance with
   6  * the License. You may obtain a copy of the License at
   7  * http://www.mozilla.org/MPL/
   8  *
   9  * Software distributed under the License is distributed on an "AS IS" basis,
  10  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  11  * for the specific language governing rights and limitations under the
  12  * License.
  13  *
  14  * The Original Code is the Extension Manager UI.
  15  *
  16  * The Initial Developer of the Original Code is
  17  * the Mozilla Foundation.
  18  * Portions created by the Initial Developer are Copyright (C) 2010
  19  * the Initial Developer. All Rights Reserved.
  20  *
  21  * Contributor(s):
  22  *   Blair McBride <bmcbride@mozilla.com>
  23  *
  24  * Alternatively, the contents of this file may be used under the terms of
  25  * either the GNU General Public License Version 2 or later (the "GPL"), or
  26  * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  27  * in which case the provisions of the GPL or the LGPL are applicable instead
  28  * of those above. If you wish to allow use of your version of this file only
  29  * under the terms of either the GPL or the LGPL, and not to allow others to
  30  * use your version of this file under the terms of the MPL, indicate your
  31  * decision by deleting the provisions above and replace them with the notice
  32  * and other provisions required by the GPL or the LGPL. If you do not delete
  33  * the provisions above, a recipient may use your version of this file under
  34  * the terms of any one of the MPL, the GPL or the LGPL.
  35  *
  36  * ***** END LICENSE BLOCK ***** */
  37
  38 #addons-page {
  39   background-color: #000000;
  40   margin: 20px;
  41 }
  42
  43 #view-port {
  44   border: 1px solid #9C9CFF;
  45   -moz-border-radius: 5px;
  46 }
  47
  48
  49 /*** category selector ***/
  50
  51 #categories {
  52   -moz-appearance: none;
  53   border: none;
  54   -moz-margin-end: -1px;
  55   background-color: transparent;
  56   position: relative;
  57 }
  58
  59 .category {
  60   border-width: 1px;
  61   -moz-border-end-width: 0;
  62   border-style: solid;
  63   border-color: transparent;
  64   padding: 10px 4px;
  65   -moz-box-align: center;
  66   overflow: hidden;
  67   min-height: 0px;
  68 }
  69
  70 .category:-moz-locale-dir(ltr) {
  71   -moz-border-radius-topleft: 5px;
  72   -moz-border-radius-bottomleft: 5px;
  73 }
  74
  75 .category:-moz-locale-dir(rtl) {
  76   -moz-border-radius-topright: 5px;
  77   -moz-border-radius-bottomright: 5px;
  78 }
  79
  80 .category[disabled] {
  81   height: 0px;
  82   opacity: 0;
  83   -moz-transition-property: height, opacity;
  84   -moz-transition-duration: 1s, 0.8s;
  85 }
  86
  87 .category:not([disabled]) {
  88   height: 52px;
  89   -moz-transition-property: height, opacity;
  90   -moz-transition-duration: 1s, 0.8s;
  91 }
  92
  93 .category[selected] {
  94   color: FFCF00;
  95   border-color: #9C9CFF;
  96 }
  97
  98 .category-name {
  99   font-size: 150%;
 100 }
 101
 102 .category-badge {
 103   background-color: #E7ADE7;
 104   padding: 2px 8px;
 105   margin: 6px 0px;
 106   -moz-border-radius: 100%;
 107   color: #000000;
 108   font-weight: bold;
 109   text-align: center;
 110 }
 111
 112 .category-badge[value="0"] {
 113   visibility: hidden;
 114 }
 115
 116 .category-icon {
 117   width: 32px;
 118   height: 32px;
 119   -moz-margin-start: 6px;
 120 }
 121
 122 #category-search > .category-icon {
 123   list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
 124 }
 125 #category-discover > .category-icon {
 126   list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
 127 }
 128 #category-languages > .category-icon {
 129   list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
 130 }
 131 #category-searchengines > .category-icon {
 132   list-style-image: url("chrome://mozapps/skin/extensions/category-searchengines.png");
 133 }
 134 #category-extensions > .category-icon {
 135   list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
 136 }
 137 #category-themes > .category-icon {
 138   list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
 139 }
 140 #category-plugins > .category-icon {
 141   list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
 142 }
 143
 144
 145 /*** header ***/
 146
 147 #header {
 148   margin-bottom: 20px;
 149   height: 2em;
 150 }
 151
 152 #header-name, #header-link {
 153   color: #000000;
 154 }
 155
 156 #header-name {
 157   font-size: 180%;
 158 }
 159
 160 #header-link {
 161   -moz-appearance: none;
 162   border: none;
 163   background: transparent;
 164   font-size: 120%;
 165   cursor: pointer;
 166   list-style-image: url("chrome://mozapps/skin/extensions/go-back.png");
 167 }
 168
 169 #header-link .button-icon {
 170   -moz-margin-end: 6px;
 171 }
 172
 173 #header-searching {
 174   list-style-image: url("chrome://global/skin/icons/loading.gif");
 175 }
 176
 177 .view-header {
 178   -moz-border-radius: 8px;
 179   padding: 0px 4em;
 180   margin: 3px;
 181 }
 182
 183
 184 /*** sorters ***/
 185
 186 .sort-controls {
 187   -moz-appearance: none;
 188 }
 189
 190 .sorter {
 191   -moz-appearance: none;
 192   border: none;
 193   border-left: 3px solid #000000;
 194   border-right: 3px solid #000000;
 195   background-color: transparent;
 196   -moz-border-radius: 0;
 197   padding: 0px 6px;
 198   margin: 0px 6px;
 199   min-width: 12px !important;
 200   -moz-box-direction: reverse;
 201 }
 202
 203
 204 .sorter[checkState="1"],
 205 .sorter[checkState="2"] {
 206   background-color: #008484;
 207   color: #FFCF00;
 208 }
 209
 210 .sorter[checkState="1"] {
 211   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
 212 }
 213
 214 .sorter[checkState="2"] {
 215   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 216 }
 217
 218 .sorter .button-icon {
 219   -moz-margin-start: 4px;
 220 }
 221
 222
 223 /*** empty list notification ***/
 224
 225 .empty-list-notice {
 226   -moz-box-align: center;
 227 }
 228
 229 .empty-list-notice > button {
 230   margin: 20px;
 231 }
 232
 233
 234 /*** list ***/
 235
 236 .list {
 237   margin: 0px;
 238   border: none;
 239   background-color: transparent;
 240 }
 241
 242 .addon {
 243   border-bottom: 1px solid #9C9CFF;
 244   padding: 5px;
 245 }
 246
 247 .addon[status="installing"] {
 248   -moz-box-align: center;
 249 }
 250
 251 .details {
 252   cursor: pointer;
 253   margin: 0;
 254   -moz-margin-start: 10px;
 255 }
 256
 257 .icon-container {
 258   width: 48px;
 259   height: 48px;
 260   margin: 7px;
 261 }
 262
 263 .icon {
 264   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
 265   max-width: 48px;
 266   max-height: 48px;
 267 }
 268
 269 .addon[type="theme"] .icon {
 270   list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
 271 }
 272
 273 .addon[type="locale"] .icon {
 274   list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
 275 }
 276
 277 .addon[type="plugin"] .icon {
 278   list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
 279 }
 280
 281 .name,
 282 .version,
 283 .update-postfix {
 284   font-size: 150%;
 285   margin-bottom: 0px;
 286 }
 287
 288 .disabled-postfix {
 289   font-size: 130%;
 290 }
 291
 292 .description-container {
 293   margin-top: 8px;
 294   -moz-margin-start: 6px;
 295 }
 296
 297 .description {
 298   margin: 0;
 299 }
 300
 301 .warning, .pending, .error, .info {
 302   -moz-margin-start: 48px;
 303 }
 304
 305 .addon:not([selected]) .warning {
 306   color: #FFCF00;
 307 }
 308
 309 .addon:not([selected]) .error {
 310   color: #FF0000;
 311 }
 312
 313 .addon:not([selected]) .pending {
 314   color: #008484;
 315 }
 316
 317 .addon .warning-icon {
 318   list-style-image: url("chrome://global/skin/icons/warning-16.png");
 319   width: 16px;
 320   height: 16px;
 321   margin: 0;
 322 }
 323
 324 .addon .error-icon {
 325   list-style-image: url("chrome://global/skin/icons/error-16.png");
 326   width: 16px;
 327   height: 16px;
 328   margin: 0;
 329 }
 330
 331 .addon .pending-icon,
 332 .addon .info-icon {
 333   list-style-image: url("chrome://global/skin/icons/information-16.png");
 334   width: 16px;
 335   height: 16px;
 336   margin: 0;
 337 }
 338
 339 .addon[notification="warning"] {
 340   background-color : #FFCF00;
 341   color: #000000;
 342 }
 343
 344 .addon[notification="error"] {
 345   background-color: #FF0000;
 346   color: #000000;
 347 }
 348
 349 .addon[notification="info"] {
 350   background-color: #9C9CFF;
 351   color: #000000;
 352 }
 353
 354 .addon[pending="enable"],
 355 .addon[pending="upgrade"],
 356 .addon[pending="install"] {
 357   background-color: #008484;
 358 }
 359
 360 .addon[pending="disable"],
 361 .addon[pending="uninstall"] {
 362   color: #8050B0;
 363 }
 364
 365
 366 .remove-container {
 367   width: 16px;
 368 }
 369
 370 /*** item - uninstalled ***/
 371
 372 .addon[status="uninstalled"] {
 373   border: none;
 374 }
 375
 376 .addon[status="uninstalled"] > .container {
 377   -moz-box-align: center;
 378   padding: 4px 20px;
 379   background-color: #8050B0;
 380   -moz-border-radius: 8px;
 381   font-size: 120%;
 382 }
 383
 384 .addon[status="uninstalled"][selected] {
 385   background-color: transparent;
 386 }
 387
 388
 389
 390 /*** search view ***/
 391
 392 #search-filter {
 393   padding: 5px 20px;
 394   -moz-box-align: center;
 395   background-color: #000000;
 396   font-size: 120%;
 397 }
 398
 399 #search-filter-label {
 400   font-weight: bold;
 401   color: #FFCF00;
 402 }
 403
 404 .search-filter-radio {
 405   padding: 0px 6px;
 406   margin: 0px 3px;
 407   -moz-border-radius: 100%;
 408 }
 409
 410 .search-filter-radio[selected] {
 411   background-color: #008484;
 412   color: #000000;
 413 }
 414
 415 .search-filter-radio .radio-check-box1 {
 416   display: none;
 417 }
 418
 419 .search-filter-radio .radio-icon {
 420   display: none;
 421 }
 422
 423 /*** detail view ***/
 424
 425 #detail-view[active="false"] .fade {
 426   opacity: 0.5;
 427 }
 428
 429 #detail-view > .loading {
 430   opacity: 0;
 431 }
 432
 433 #detail-view:not([loading]) > .loading {
 434   visibility: collapse;
 435 }
 436
 437 #detail-view[loading-extended] > .loading {
 438   -moz-box-align: center;
 439   -moz-box-pack: center;
 440   opacity: 1;
 441   -moz-transition-property: opacity;
 442   -moz-transition-duration: 1s;
 443 }
 444
 445 #detail-view > .loading > image {
 446   list-style-image: url("chrome://global/skin/icons/loading.gif");
 447 }
 448
 449 .detail-view-container {
 450   overflow: auto;
 451   padding: 10px 20px;
 452 }
 453
 454 .detail-basicinfo {
 455   padding: 10px 0px;
 456   -moz-box-align: center;
 457 }
 458
 459 .detail-extra {
 460   margin-top: 20px;
 461 }
 462
 463 #detail-desc {
 464   min-height: 40px;
 465   margin-bottom: 20px;
 466 }
 467
 468 #detail-icon {
 469   width: 32px;
 470   height: 32px;
 471   -moz-margin-end: 10px;
 472   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
 473 }
 474
 475 #detail-view[type="theme"] #detail-icon {
 476   list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
 477 }
 478
 479 #detail-view[type="locale"] #detail-icon {
 480   list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
 481 }
 482
 483 #detail-view[type="plugin"] #detail-icon {
 484   list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
 485 }
 486
 487 #detail-name {
 488   font-size: 200%;
 489 }
 490
 491 #detail-screenshot {
 492   width: 140px;
 493   height: 140px;
 494   background-color: #9C9CFF;
 495   margin: 0px 10px 0px 0px;
 496 }
 497
 498 .detail-prefs {
 499   -moz-box-align: start;
 500 }
 501
 502 .meta-label {
 503   font-weight: bold;
 504 }
 505
 506 #detail-notification {
 507   -moz-box-align: center;
 508   -moz-box-pack: center;
 509   margin: 0px 50px;
 510   padding: 4px 20px;
 511   background-color: #FFCF00;
 512   -moz-border-radius: 8px;
 513   font-size: 120%;
 514 }
 515
 516
 517 /*** creator ***/
 518
 519 .creator > label {
 520   -moz-margin-start: 0px;
 521   -moz-margin-end: 0px;
 522 }
 523
 524 .creator > .text-link {
 525   margin-top: 1px;
 526   margin-bottom: 1px;
 527 }
 528
 529
 530 /*** rating ***/
 531
 532 .meta-rating {
 533   -moz-margin-start: 0px;
 534   -moz-margin-end: 0px;
 535   vertical-align: text-top;
 536 }
 537
 538 .meta-rating[showrating="average"] > .star {
 539   list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
 540   padding: 0px 1px;
 541 }
 542
 543 .meta-rating[showrating="user"] > .star {
 544   list-style-image: url("chrome://mozapps/skin/extensions/rating-unrated.png");
 545   padding: 2px 3px;
 546 }
 547
 548 .meta-rating > .star[on="true"],
 549 .meta-rating[showrating="user"] > .star[hover] {
 550   list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
 551   padding: 0px 1px;
 552 }
 553
 554
 555 /*** download progress ***/
 556
 557 .download-progress {
 558   background-color: #000000;
 559   -moz-border-radius: 100%;
 560   border: 1px solid #FF9F00;
 561   width: 200px;
 562   height: 24px;
 563   margin: 0px 8px;
 564 }
 565
 566 .download-progress .start-cap,
 567 .download-progress[complete] .end-cap,
 568 .download-progress .progress .progress-bar {
 569   background-color: #008484;
 570 }
 571
 572 .download-progress .progress {
 573   background-color: transparent;
 574 }
 575
 576 .download-progress .start-cap, .download-progress .end-cap {
 577   width: 12px;
 578 }
 579
 580 .download-progress .start-cap:-moz-locale-dir(ltr),
 581 .download-progress .end-cap:-moz-locale-dir(rtl) {
 582   -moz-border-radius: 100% 0 0 100%;
 583 }
 584
 585 .download-progress .end-cap:-moz-locale-dir(ltr),
 586 .download-progress .start-cap:-moz-locale-dir(rtl) {
 587   -moz-border-radius: 0 100% 100% 0;
 588 }
 589
 590 .download-progress .progress {
 591   -moz-appearance: none;
 592   padding: 0px;
 593   margin: 0px;
 594   border: none;
 595 }
 596
 597 .download-progress .pause, .download-progress .cancel {
 598   -moz-appearance: none;
 599   background-color: #8050B0;
 600   border-width: 1px 0px 0px 1px;
 601   padding-right: 1px;
 602   border-style: solid;
 603   -moz-border-radius: 100%;
 604   min-width: 16px;
 605   width: 16px;
 606   height: 16px;
 607   margin: 3px;
 608 }
 609
 610 .download-progress .pause {
 611   list-style-image: url('chrome://mozapps/skin/extensions/pause.png');
 612 }
 613
 614 .download-progress .cancel {
 615   list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
 616 }
 617
 618 .download-progress .status-container {
 619   -moz-box-align: center;
 620 }
 621
 622
 623 /*** install status ***/
 624
 625 .install-status {
 626   -moz-box-align: center;
 627 }
 628
 629
 630 /*** check for updates ***/
 631
 632 #updates-container {
 633   -moz-box-align: center;
 634 }
 635
 636 #updates-installed, #updates-downloaded {
 637   color: #008484;
 638   font-weight: bold;
 639 }
 640
 641
 642 /*** buttons ***/
 643
 644 .remove-button {
 645   padding: 0;
 646   margin: 0;
 647   list-style-image: url("chrome://global/skin/icons/delete.png");
 648   -moz-image-region: rect(0, 16px, 16px, 0px);
 649 }
 650
 651 .remove-button:hover, .remove-button:active {
 652   -moz-image-region: rect(0, 32px, 16px, 16px);
 653 }
 654
 655 .remove-button .button-text {
 656   display: none;
 657 }
 658
 659 .contribute {
 660   -moz-padding-start: 20px;
 661   -moz-padding-end: 4px;
 662 }
 663
 664 .button-link {
 665   background: transparent;
 666   border: none;
 667   text-decoration: underline;
 668   color: blue;
 669   cursor: pointer;
 670   min-width: 0;
 671   margin: 0 6px;
 672 }