toolkit/themes/osx/mozapps/extensions/extensions.css

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

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

mercurial