toolkit/themes/windows/mozapps/extensions/extensions.css

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

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

mercurial