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