toolkit/themes/linux/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
michael@0 8 /*** global warnings ***/
michael@0 9
michael@0 10 .global-warning-container {
michael@0 11 overflow-x: hidden;
michael@0 12 }
michael@0 13
michael@0 14 .global-warning {
michael@0 15 -moz-box-align: center;
michael@0 16 padding: 0 8px;
michael@0 17 font-weight: bold;
michael@0 18 }
michael@0 19
michael@0 20 .global-warning-text {
michael@0 21 color: -moz-FieldText;
michael@0 22 }
michael@0 23
michael@0 24 #addons-page[warning] .global-warning-container {
michael@0 25 background-color: rgba(255, 255, 0, 0.1);
michael@0 26 background-image: url("chrome://mozapps/skin/extensions/stripes-warning.png");
michael@0 27 background-repeat: repeat-x;
michael@0 28 }
michael@0 29
michael@0 30 #detail-view .global-warning {
michael@0 31 padding: 4px 12px;
michael@0 32 border-bottom: 1px solid ThreeDShadow;
michael@0 33 min-height: 41px;
michael@0 34 }
michael@0 35
michael@0 36 @media (max-width: 600px) {
michael@0 37 .global-warning-text {
michael@0 38 display: none;
michael@0 39 }
michael@0 40 }
michael@0 41
michael@0 42 /* Plugins aren't yet disabled by safemode (bug 342333),
michael@0 43 so don't show that warning when viewing plugins. */
michael@0 44 #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
michael@0 45 #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
michael@0 46 background-color: inherit;
michael@0 47 background-image: none;
michael@0 48 }
michael@0 49
michael@0 50
michael@0 51 /*** notification icons ***/
michael@0 52
michael@0 53 .warning-icon {
michael@0 54 list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=menu");
michael@0 55 width: 16px;
michael@0 56 height: 16px;
michael@0 57 margin: 3px 0;
michael@0 58 }
michael@0 59
michael@0 60 .error-icon {
michael@0 61 list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu");
michael@0 62 width: 16px;
michael@0 63 height: 16px;
michael@0 64 margin: 3px 0;
michael@0 65 }
michael@0 66
michael@0 67 .pending-icon,
michael@0 68 .info-icon {
michael@0 69 list-style-image: url("moz-icon://stock/gtk-dialog-info?size=menu");
michael@0 70 width: 16px;
michael@0 71 height: 16px;
michael@0 72 margin: 3px 0;
michael@0 73 }
michael@0 74
michael@0 75 /*** view alert boxes ***/
michael@0 76
michael@0 77 .alert-container {
michael@0 78 -moz-box-align: center;
michael@0 79 }
michael@0 80
michael@0 81 .alert-spacer-before {
michael@0 82 -moz-box-flex: 1;
michael@0 83 }
michael@0 84
michael@0 85 .alert-spacer-after {
michael@0 86 -moz-box-flex: 3;
michael@0 87 }
michael@0 88
michael@0 89 .alert {
michael@0 90 -moz-box-align: center;
michael@0 91 padding: 10px;
michael@0 92 font-size: 12px;
michael@0 93 border: 1px solid ThreeDShadow;
michael@0 94 border-radius: 8px;
michael@0 95 color: WindowText;
michael@0 96 background-color: Window;
michael@0 97 background-clip: padding-box;
michael@0 98 }
michael@0 99
michael@0 100 .alert .alert-title {
michael@0 101 font-weight: bold;
michael@0 102 font-size: 200%;
michael@0 103 margin-bottom: 15px;
michael@0 104 }
michael@0 105
michael@0 106 .alert button {
michael@0 107 margin: 1em 2em;
michael@0 108 }
michael@0 109
michael@0 110 .loading {
michael@0 111 list-style-image: url("chrome://global/skin/icons/loading_16.png");
michael@0 112 padding-left: 20px;
michael@0 113 padding-right: 20px;
michael@0 114 }
michael@0 115
michael@0 116 /*** category selector ***/
michael@0 117
michael@0 118 #categories {
michael@0 119 -moz-appearance: none;
michael@0 120 border: none;
michael@0 121 -moz-margin-end: -1px;
michael@0 122 background-color: transparent;
michael@0 123 position: relative;
michael@0 124 margin-top: 41px;
michael@0 125 }
michael@0 126
michael@0 127 .category {
michael@0 128 -moz-appearance: none;
michael@0 129 border-width: 1px;
michael@0 130 -moz-border-end-width: 0;
michael@0 131 border-style: solid;
michael@0 132 border-color: transparent;
michael@0 133 padding: 10px 4px;
michael@0 134 -moz-box-align: center;
michael@0 135 overflow: hidden;
michael@0 136 min-height: 0;
michael@0 137 color: WindowText;
michael@0 138 }
michael@0 139
michael@0 140 .category:-moz-locale-dir(ltr) {
michael@0 141 border-top-left-radius: 5px;
michael@0 142 border-bottom-left-radius: 5px;
michael@0 143 }
michael@0 144
michael@0 145 .category:-moz-locale-dir(rtl) {
michael@0 146 border-top-right-radius: 5px;
michael@0 147 border-bottom-right-radius: 5px;
michael@0 148 }
michael@0 149
michael@0 150 .category[disabled] {
michael@0 151 border-top: 0;
michael@0 152 border-bottom: 0;
michael@0 153 height: 0;
michael@0 154 opacity: 0;
michael@0 155 transition-property: height, opacity;
michael@0 156 transition-duration: 1s, 0.8s;
michael@0 157 }
michael@0 158
michael@0 159 .category:not([disabled]) {
michael@0 160 height: 52px;
michael@0 161 transition-property: height, opacity;
michael@0 162 transition-duration: 1s, 0.8s;
michael@0 163 }
michael@0 164
michael@0 165 .category[selected] {
michael@0 166 background-color: -moz-Field;
michael@0 167 color: -moz-FieldText;
michael@0 168 border-color: ThreeDShadow;
michael@0 169 }
michael@0 170
michael@0 171 .category-name {
michael@0 172 font-size: 150%;
michael@0 173 }
michael@0 174
michael@0 175 /* Maximize the size of the viewport when the window is small */
michael@0 176 @media (max-width: 800px) {
michael@0 177 .category-name {
michael@0 178 display: none;
michael@0 179 }
michael@0 180 }
michael@0 181
michael@0 182 .category-badge {
michael@0 183 background-color: Highlight;
michael@0 184 padding: 2px 8px;
michael@0 185 margin: 6px 0;
michael@0 186 border-radius: 10000px;
michael@0 187 color: HighlightText;
michael@0 188 font-weight: bold;
michael@0 189 text-align: center;
michael@0 190 }
michael@0 191
michael@0 192 .category-badge[value="0"] {
michael@0 193 visibility: hidden;
michael@0 194 }
michael@0 195
michael@0 196 .category-icon {
michael@0 197 width: 32px;
michael@0 198 height: 32px;
michael@0 199 -moz-margin-start: 6px;
michael@0 200 }
michael@0 201
michael@0 202 #category-search > .category-icon {
michael@0 203 list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
michael@0 204 }
michael@0 205 #category-discover > .category-icon {
michael@0 206 list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
michael@0 207 }
michael@0 208 #category-locale > .category-icon {
michael@0 209 list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
michael@0 210 }
michael@0 211 #category-searchengine > .category-icon {
michael@0 212 list-style-image: url("chrome://mozapps/skin/extensions/category-searchengines.png");
michael@0 213 }
michael@0 214 #category-extension > .category-icon {
michael@0 215 list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png");
michael@0 216 }
michael@0 217 #category-service > .category-icon {
michael@0 218 list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
michael@0 219 }
michael@0 220 #category-theme > .category-icon {
michael@0 221 list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
michael@0 222 }
michael@0 223 #category-plugin > .category-icon {
michael@0 224 list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
michael@0 225 }
michael@0 226 #category-dictionary > .category-icon {
michael@0 227 list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
michael@0 228 }
michael@0 229 #category-experiment > .category-icon {
michael@0 230 list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
michael@0 231 }
michael@0 232 #category-availableUpdates > .category-icon {
michael@0 233 list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
michael@0 234 }
michael@0 235 #category-recentUpdates > .category-icon {
michael@0 236 list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
michael@0 237 }
michael@0 238
michael@0 239
michael@0 240 /*** header ***/
michael@0 241
michael@0 242 #header {
michael@0 243 margin-bottom: 18px;
michael@0 244 }
michael@0 245
michael@0 246 .nav-button {
michael@0 247 min-width: 0;
michael@0 248 }
michael@0 249
michael@0 250 #back-btn:-moz-locale-dir(ltr) {
michael@0 251 list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=toolbar");
michael@0 252 }
michael@0 253
michael@0 254 #forward-btn:-moz-locale-dir(ltr) {
michael@0 255 list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=toolbar");
michael@0 256 }
michael@0 257
michael@0 258 #back-btn:-moz-locale-dir(rtl) {
michael@0 259 list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=toolbar");
michael@0 260 }
michael@0 261
michael@0 262 #forward-btn:-moz-locale-dir(rtl) {
michael@0 263 list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=toolbar");
michael@0 264 }
michael@0 265
michael@0 266 #back-btn[disabled="true"]:-moz-locale-dir(ltr) {
michael@0 267 list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=toolbar&state=disabled");
michael@0 268 }
michael@0 269
michael@0 270 #forward-btn[disabled="true"]:-moz-locale-dir(ltr) {
michael@0 271 list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=toolbar&state=disabled");
michael@0 272 }
michael@0 273
michael@0 274 #back-btn[disabled="true"]:-moz-locale-dir(rtl) {
michael@0 275 list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=toolbar&state=disabled");
michael@0 276 }
michael@0 277
michael@0 278 #forward-btn[disabled="true"]:-moz-locale-dir(rtl) {
michael@0 279 list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=toolbar&state=disabled");
michael@0 280 }
michael@0 281
michael@0 282 #header-utils-btn {
michael@0 283 min-width: 4.5em;
michael@0 284 }
michael@0 285
michael@0 286 #header-utils-btn .toolbarbutton-icon {
michael@0 287 list-style-image: url("moz-icon://stock/gtk-preferences?size=toolbar");
michael@0 288 }
michael@0 289
michael@0 290 #header-utils-btn:-moz-focusring > .button-box {
michael@0 291 border: none;
michael@0 292 }
michael@0 293
michael@0 294 #header-search {
michael@0 295 margin: 0;
michael@0 296 }
michael@0 297
michael@0 298 @media (max-width: 600px) {
michael@0 299 #header-search {
michael@0 300 width: 12em;
michael@0 301 }
michael@0 302 }
michael@0 303
michael@0 304 .view-header {
michael@0 305 padding: 4px;
michael@0 306 margin: 0;
michael@0 307 min-height: 41px;
michael@0 308 background-color: ThreeDHighlight;
michael@0 309 border-bottom: 1px solid ThreeDShadow;
michael@0 310 }
michael@0 311
michael@0 312
michael@0 313 /*** sorters ***/
michael@0 314
michael@0 315 .sort-controls {
michael@0 316 -moz-appearance: none;
michael@0 317 }
michael@0 318
michael@0 319 .sorter[checkState="1"] .button-icon {
michael@0 320 display: -moz-box;
michael@0 321 list-style-image: url("moz-icon://stock/gtk-sort-descending?size=16");
michael@0 322 }
michael@0 323
michael@0 324 .sorter[checkState="2"] .button-icon {
michael@0 325 display: -moz-box;
michael@0 326 list-style-image: url("moz-icon://stock/gtk-sort-ascending?size=16");
michael@0 327 }
michael@0 328
michael@0 329
michael@0 330 /*** discover view ***/
michael@0 331
michael@0 332 .discover-spacer-before,
michael@0 333 .discover-spacer-after {
michael@0 334 -moz-box-flex: 1;
michael@0 335 }
michael@0 336
michael@0 337 #discover-error .alert {
michael@0 338 max-width: 45em;
michael@0 339 -moz-box-flex: 1;
michael@0 340 }
michael@0 341
michael@0 342 .discover-logo {
michael@0 343 list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
michael@0 344 -moz-margin-end: 15px;
michael@0 345 }
michael@0 346
michael@0 347 .discover-title {
michael@0 348 font-weight: bold;
michael@0 349 font-size: 24px;
michael@0 350 font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif;
michael@0 351 margin: 0 0 15px 0;
michael@0 352 }
michael@0 353
michael@0 354 .discover-description {
michael@0 355 text-align: justify;
michael@0 356 margin: 0 0 15px 0;
michael@0 357 }
michael@0 358
michael@0 359 .discover-footer {
michael@0 360 text-align: justify;
michael@0 361 }
michael@0 362
michael@0 363
michael@0 364 /*** list ***/
michael@0 365
michael@0 366 .list {
michael@0 367 -moz-appearance: none;
michael@0 368 margin: 0;
michael@0 369 border: none;
michael@0 370 background-color: transparent;
michael@0 371 }
michael@0 372
michael@0 373 .addon {
michael@0 374 border-bottom: 1px solid ThreeDLightShadow;
michael@0 375 padding: 5px;
michael@0 376 }
michael@0 377
michael@0 378 .addon[selected] .text-link,
michael@0 379 .addon[selected] .button-link {
michael@0 380 color: inherit;
michael@0 381 }
michael@0 382
michael@0 383 .details {
michael@0 384 cursor: pointer;
michael@0 385 margin: 0;
michael@0 386 -moz-margin-start: 10px;
michael@0 387 }
michael@0 388
michael@0 389 .icon-container {
michael@0 390 width: 48px;
michael@0 391 height: 48px;
michael@0 392 margin: 3px 7px;
michael@0 393 -moz-box-align: center;
michael@0 394 -moz-box-pack: center;
michael@0 395 }
michael@0 396
michael@0 397 .icon {
michael@0 398 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
michael@0 399 max-width: 48px;
michael@0 400 max-height: 48px;
michael@0 401 }
michael@0 402
michael@0 403 .addon[active="false"] .icon {
michael@0 404 filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
michael@0 405 }
michael@0 406
michael@0 407 .addon-view[type="theme"] .icon {
michael@0 408 list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
michael@0 409 }
michael@0 410
michael@0 411 .addon-view[type="locale"] .icon {
michael@0 412 list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
michael@0 413 }
michael@0 414
michael@0 415 .addon-view[type="plugin"] .icon {
michael@0 416 list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
michael@0 417 }
michael@0 418
michael@0 419 .addon-view[type="dictionary"] .icon {
michael@0 420 list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
michael@0 421 }
michael@0 422
michael@0 423 .addon-view[type="experiment"] .icon {
michael@0 424 list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
michael@0 425 }
michael@0 426
michael@0 427 .name-container {
michael@0 428 font-size: 150%;
michael@0 429 margin-bottom: 0;
michael@0 430 font-weight: bold;
michael@0 431 -moz-box-align: end;
michael@0 432 -moz-box-flex: 1;
michael@0 433 }
michael@0 434
michael@0 435 .creator {
michael@0 436 font-weight: bold;
michael@0 437 }
michael@0 438
michael@0 439 .addon-view[active="false"]:not([selected]) {
michael@0 440 color: GrayText;
michael@0 441 }
michael@0 442
michael@0 443 .description-container {
michael@0 444 -moz-margin-start: 6px;
michael@0 445 -moz-box-align: center;
michael@0 446 }
michael@0 447
michael@0 448 .description {
michael@0 449 margin: 0;
michael@0 450 }
michael@0 451
michael@0 452 .warning,
michael@0 453 .pending,
michael@0 454 .error {
michael@0 455 -moz-margin-start: 48px;
michael@0 456 -moz-box-align: center;
michael@0 457 }
michael@0 458
michael@0 459 .content-container,
michael@0 460 .basicinfo-container {
michael@0 461 -moz-box-align: start;
michael@0 462 }
michael@0 463
michael@0 464 .addon[status="installing"] > .content-container {
michael@0 465 -moz-box-align: stretch;
michael@0 466 }
michael@0 467
michael@0 468 .advancedinfo-container,
michael@0 469 .update-info-container {
michael@0 470 -moz-box-align: center;
michael@0 471 }
michael@0 472
michael@0 473 .update-available {
michael@0 474 -moz-box-align: end;
michael@0 475 }
michael@0 476
michael@0 477 .install-status-container {
michael@0 478 -moz-box-pack: end;
michael@0 479 -moz-box-align: end;
michael@0 480 }
michael@0 481
michael@0 482 .name-outer-container {
michael@0 483 -moz-box-pack: center;
michael@0 484 }
michael@0 485
michael@0 486 .relnotes-toggle-container,
michael@0 487 .icon-outer-container {
michael@0 488 -moz-box-pack: start;
michael@0 489 }
michael@0 490
michael@0 491 .status-container,
michael@0 492 .control-container {
michael@0 493 -moz-box-pack: end;
michael@0 494 }
michael@0 495
michael@0 496 .addon-view:not([selected]) .warning {
michael@0 497 color: #90792E;
michael@0 498 }
michael@0 499
michael@0 500 .addon-view:not([selected]) .error {
michael@0 501 color: #7C322B;
michael@0 502 }
michael@0 503
michael@0 504 .addon-view:not([selected]) .pending {
michael@0 505 color: #4F7939;
michael@0 506 }
michael@0 507
michael@0 508 .addon[active="false"] {
michael@0 509 background-image: linear-gradient(rgba(135, 135, 135, 0.2),
michael@0 510 rgba(135, 135, 135, 0.1));
michael@0 511 }
michael@0 512
michael@0 513 .addon-view[notification="warning"] {
michael@0 514 background-image: url("chrome://mozapps/skin/extensions/stripes-warning.png"),
michael@0 515 linear-gradient(rgba(255, 255, 0, 0.04),
michael@0 516 rgba(255, 255, 0, 0));
michael@0 517 background-repeat: repeat-x;
michael@0 518 }
michael@0 519
michael@0 520 .addon-view[notification="error"] {
michael@0 521 background-image: url("chrome://mozapps/skin/extensions/stripes-error.png"),
michael@0 522 linear-gradient(rgba(255, 0, 0, 0.04),
michael@0 523 rgba(255, 0, 0, 0));
michael@0 524 background-repeat: repeat-x;
michael@0 525 }
michael@0 526
michael@0 527 .addon-view[pending="enable"],
michael@0 528 .addon-view[pending="upgrade"],
michael@0 529 .addon-view[pending="install"] {
michael@0 530 background-image: url("chrome://mozapps/skin/extensions/stripes-info-positive.png"),
michael@0 531 linear-gradient(rgba(0, 255, 0, 0.04),
michael@0 532 rgba(0, 255, 0, 0));
michael@0 533 background-repeat: repeat-x;
michael@0 534 }
michael@0 535
michael@0 536 .addon-view[pending="disable"],
michael@0 537 .addon-view[pending="uninstall"] {
michael@0 538 background-image: url("chrome://mozapps/skin/extensions/stripes-info-negative.png"),
michael@0 539 linear-gradient(rgba(128, 128, 128, 0.04),
michael@0 540 rgba(128, 128, 128, 0));
michael@0 541 background-repeat: repeat-x;
michael@0 542 }
michael@0 543
michael@0 544 .addon .relnotes-container {
michael@0 545 -moz-box-align: start;
michael@0 546 height: 0;
michael@0 547 overflow: hidden;
michael@0 548 opacity: 0;
michael@0 549 transition-property: height, opacity;
michael@0 550 transition-duration: 0.5s, 0.5s;
michael@0 551 }
michael@0 552
michael@0 553 .addon[show-relnotes] .relnotes-container {
michael@0 554 opacity: 1;
michael@0 555 transition-property: height, opacity;
michael@0 556 transition-duration: 0.5s, 0.5s;
michael@0 557 }
michael@0 558
michael@0 559 .addon .relnotes-header {
michael@0 560 font-weight: bold;
michael@0 561 margin: 10px 0;
michael@0 562 }
michael@0 563
michael@0 564 .addon .relnotes-toggle {
michael@0 565 -moz-appearance: none;
michael@0 566 border: none;
michael@0 567 background: transparent;
michael@0 568 font-weight: bold;
michael@0 569 cursor: pointer;
michael@0 570 list-style-image: url("moz-icon://stock/gtk-go-down?size=16");
michael@0 571 }
michael@0 572
michael@0 573 .addon .relnotes-toggle > .button-box > .button-icon {
michael@0 574 display: -moz-box;
michael@0 575 }
michael@0 576
michael@0 577 .addon[show-relnotes] .relnotes-toggle {
michael@0 578 list-style-image: url("moz-icon://stock/gtk-go-up?size=16");
michael@0 579 }
michael@0 580
michael@0 581
michael@0 582 /*** search view ***/
michael@0 583
michael@0 584 #search-filter {
michael@0 585 padding: 5px 20px;
michael@0 586 font-size: 120%;
michael@0 587 overflow-x: hidden;
michael@0 588 border-bottom: 1px solid ThreeDShadow;
michael@0 589 }
michael@0 590
michael@0 591 #search-filter-label {
michael@0 592 font-weight: bold;
michael@0 593 }
michael@0 594
michael@0 595 #search-allresults-link {
michael@0 596 margin-top: 1em;
michael@0 597 margin-bottom: 2em;
michael@0 598 }
michael@0 599
michael@0 600 /*** detail view ***/
michael@0 601
michael@0 602 #detail-view[active="false"] .fade {
michael@0 603 opacity: 0.6;
michael@0 604 }
michael@0 605
michael@0 606 #detail-view .loading {
michael@0 607 opacity: 0;
michael@0 608 }
michael@0 609
michael@0 610 #detail-view[loading-extended] .loading {
michael@0 611 -moz-box-align: center;
michael@0 612 -moz-box-pack: center;
michael@0 613 opacity: 1;
michael@0 614 transition-property: opacity;
michael@0 615 transition-duration: 1s;
michael@0 616 }
michael@0 617
michael@0 618 .detail-view-container {
michael@0 619 padding: 0 2em 2em 2em;
michael@0 620 font-size: 110%;
michael@0 621 }
michael@0 622
michael@0 623 #detail-notifications {
michael@0 624 margin-top: 1em;
michael@0 625 margin-bottom: 2em;
michael@0 626 }
michael@0 627
michael@0 628 #detail-notifications .warning,
michael@0 629 #detail-notifications .pending,
michael@0 630 #detail-notifications .error {
michael@0 631 -moz-margin-start: 0;
michael@0 632 }
michael@0 633
michael@0 634 #detail-icon-container {
michael@0 635 width: 64px;
michael@0 636 -moz-margin-end: 10px;
michael@0 637 }
michael@0 638
michael@0 639 #detail-icon {
michael@0 640 max-width: 64px;
michael@0 641 max-height: 64px;
michael@0 642 }
michael@0 643
michael@0 644 #detail-summary {
michael@0 645 margin-bottom: 2em;
michael@0 646 }
michael@0 647
michael@0 648 #detail-name-container {
michael@0 649 font-size: 200%;
michael@0 650 }
michael@0 651
michael@0 652 #detail-screenshot {
michael@0 653 -moz-margin-end: 2em;
michael@0 654 max-width: 300px;
michael@0 655 max-height: 300px;
michael@0 656 }
michael@0 657
michael@0 658 #detail-screenshot[loading] {
michael@0 659 background-image: url("chrome://global/skin/icons/loading_16.png");
michael@0 660 background-position: 50% 50%;
michael@0 661 background-repeat: no-repeat;
michael@0 662 border: 1px threedshadow solid;
michael@0 663 border-radius: 5px;
michael@0 664 box-sizing: border-box;
michael@0 665 }
michael@0 666
michael@0 667 #detail-screenshot[loading="error"] {
michael@0 668 background-image: url("chrome://global/skin/media/error.png");
michael@0 669 }
michael@0 670
michael@0 671 #detail-desc-container {
michael@0 672 margin-bottom: 2em;
michael@0 673 }
michael@0 674
michael@0 675 #detail-desc, #detail-fulldesc {
michael@0 676 -moz-margin-start: 6px;
michael@0 677 /* This is necessary to fix layout issues with multi-line descriptions, see
michael@0 678 bug 592712*/
michael@0 679 outline: solid transparent;
michael@0 680 white-space: pre-wrap;
michael@0 681 min-width: 10em;
michael@0 682 }
michael@0 683
michael@0 684 #detail-fulldesc {
michael@0 685 margin-top: 1em;
michael@0 686 }
michael@0 687
michael@0 688 #detail-contributions {
michael@0 689 border-radius: 5px;
michael@0 690 border: 1px solid ThreeDShadow;
michael@0 691 margin-bottom: 2em;
michael@0 692 padding: 1em;
michael@0 693 background: ThreeDHighlight;
michael@0 694 }
michael@0 695
michael@0 696 #detail-contrib-description {
michael@0 697 font-style: italic;
michael@0 698 margin-bottom: 1em;
michael@0 699 }
michael@0 700
michael@0 701 #detail-contrib-suggested {
michael@0 702 color: GrayText;
michael@0 703 }
michael@0 704
michael@0 705 #detail-grid {
michael@0 706 margin-bottom: 2em;
michael@0 707 }
michael@0 708
michael@0 709 #detail-grid > columns > column:first-child {
michael@0 710 min-width: 15em;
michael@0 711 max-width: 25em;
michael@0 712 }
michael@0 713
michael@0 714 .detail-row[first-row="true"],
michael@0 715 .detail-row-complex[first-row="true"],
michael@0 716 setting[first-row="true"] {
michael@0 717 border-top: none;
michael@0 718 }
michael@0 719
michael@0 720 .detail-row,
michael@0 721 .detail-row-complex,
michael@0 722 setting {
michael@0 723 border-top: 1px solid ThreeDShadow;
michael@0 724 -moz-box-align: center;
michael@0 725 min-height: 32px;
michael@0 726 }
michael@0 727
michael@0 728 #detail-controls {
michael@0 729 margin-bottom: 1em;
michael@0 730 }
michael@0 731
michael@0 732 #detail-view[active="false"]:not([pending]):not([notification]) {
michael@0 733 background-image: linear-gradient(rgba(135, 135, 135, 0.1),
michael@0 734 rgba(135, 135, 135, 0));
michael@0 735 }
michael@0 736
michael@0 737 setting[first-row="true"] {
michael@0 738 margin-top: 2em;
michael@0 739 }
michael@0 740
michael@0 741 setting {
michael@0 742 -moz-box-align: start;
michael@0 743 }
michael@0 744
michael@0 745 .preferences-alignment {
michael@0 746 min-height: 32px;
michael@0 747 -moz-box-align: center;
michael@0 748 }
michael@0 749
michael@0 750 .preferences-description {
michael@0 751 font-size: 90.9%;
michael@0 752 color: graytext;
michael@0 753 margin-top: -2px;
michael@0 754 -moz-margin-start: 2em;
michael@0 755 white-space: pre-wrap;
michael@0 756 }
michael@0 757
michael@0 758 .preferences-description:empty {
michael@0 759 display: none;
michael@0 760 }
michael@0 761
michael@0 762 menulist { /* Fixes some styling inconsistencies */
michael@0 763 font-size: 100%;
michael@0 764 margin: 1px 5px 2px 5px;
michael@0 765 }
michael@0 766
michael@0 767 colorpicker[type="button"] { /* Fixes some styling inconsistencies */
michael@0 768 height: 29px;
michael@0 769 margin: 1px 5px 2px 5px;
michael@0 770 }
michael@0 771
michael@0 772 setting[type="radio"] > radiogroup {
michael@0 773 -moz-box-orient: horizontal;
michael@0 774 }
michael@0 775
michael@0 776 /*** creator ***/
michael@0 777
michael@0 778 .creator > label {
michael@0 779 -moz-margin-start: 0;
michael@0 780 -moz-margin-end: 0;
michael@0 781 }
michael@0 782
michael@0 783 .creator > .text-link {
michael@0 784 margin-top: 1px;
michael@0 785 margin-bottom: 1px;
michael@0 786 }
michael@0 787
michael@0 788
michael@0 789 /*** rating ***/
michael@0 790
michael@0 791 .meta-rating {
michael@0 792 -moz-margin-end: 0;
michael@0 793 vertical-align: text-top;
michael@0 794 }
michael@0 795
michael@0 796 .meta-rating[showrating="average"] > .star {
michael@0 797 list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
michael@0 798 padding: 0 1px;
michael@0 799 }
michael@0 800
michael@0 801 .meta-rating[showrating="user"] > .star {
michael@0 802 list-style-image: url("chrome://mozapps/skin/extensions/rating-unrated.png");
michael@0 803 padding: 2px 3px;
michael@0 804 }
michael@0 805
michael@0 806 .meta-rating > .star[on="true"],
michael@0 807 .meta-rating[showrating="user"] > .star[hover] {
michael@0 808 list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
michael@0 809 padding: 0 1px;
michael@0 810 }
michael@0 811
michael@0 812
michael@0 813 /*** download progress ***/
michael@0 814
michael@0 815 .download-progress {
michael@0 816 width: 200px;
michael@0 817 }
michael@0 818
michael@0 819 .download-progress .start-cap,
michael@0 820 .download-progress .end-cap {
michael@0 821 display: none;
michael@0 822 }
michael@0 823
michael@0 824 .download-progress .progress {
michael@0 825 padding: 0;
michael@0 826 margin: 0;
michael@0 827 border: none;
michael@0 828 }
michael@0 829
michael@0 830 .download-progress .cancel {
michael@0 831 -moz-appearance: none;
michael@0 832 background-color: ButtonFace;
michael@0 833 padding-bottom: 1px;
michael@0 834 -moz-padding-start: 2px;
michael@0 835 border-width: 1px;
michael@0 836 border-style: solid;
michael@0 837 border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
michael@0 838 border-radius: 10000px;
michael@0 839 min-width: 16px;
michael@0 840 width: 16px;
michael@0 841 height: 16px;
michael@0 842 margin: 3px;
michael@0 843 }
michael@0 844
michael@0 845 .download-progress .cancel:hover {
michael@0 846 background-color: -moz-ButtonHoverFace;
michael@0 847 }
michael@0 848
michael@0 849 .download-progress .cancel {
michael@0 850 list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
michael@0 851 }
michael@0 852
michael@0 853 .download-progress .status-container {
michael@0 854 -moz-box-align: center;
michael@0 855 }
michael@0 856
michael@0 857
michael@0 858 /*** install status ***/
michael@0 859
michael@0 860 .install-status {
michael@0 861 -moz-box-align: center;
michael@0 862 }
michael@0 863
michael@0 864
michael@0 865 /*** check for updates ***/
michael@0 866
michael@0 867 #updates-container {
michael@0 868 -moz-box-align: center;
michael@0 869 }
michael@0 870
michael@0 871 #updates-installed,
michael@0 872 #updates-downloaded {
michael@0 873 font-weight: bold;
michael@0 874 }
michael@0 875
michael@0 876 #update-selected {
michael@0 877 margin: 12px;
michael@0 878 }
michael@0 879
michael@0 880
michael@0 881 /*** buttons ***/
michael@0 882
michael@0 883 .addon-control[disabled="true"] {
michael@0 884 display: none;
michael@0 885 }
michael@0 886
michael@0 887 .addon-control.enable {
michael@0 888 list-style-image: url("moz-icon://stock/gtk-yes?size=button");
michael@0 889 }
michael@0 890
michael@0 891 .addon-control.disable {
michael@0 892 list-style-image: url("moz-icon://stock/gtk-no?size=button");
michael@0 893 }
michael@0 894
michael@0 895 .addon-control.remove {
michael@0 896 list-style-image: url("moz-icon://stock/gtk-remove?size=button");
michael@0 897 }
michael@0 898
michael@0 899 .addon-control.preferences {
michael@0 900 list-style-image: url("moz-icon://stock/gtk-preferences?size=button");
michael@0 901 }
michael@0 902
michael@0 903 .addon-control.install,
michael@0 904 .addon-control.update {
michael@0 905 list-style-image: url("moz-icon://stock/gtk-save?size=button");
michael@0 906 }
michael@0 907
michael@0 908 .button-link {
michael@0 909 -moz-appearance: none;
michael@0 910 background: transparent;
michael@0 911 border: none;
michael@0 912 text-decoration: underline;
michael@0 913 color: -moz-nativehyperlinktext;
michael@0 914 cursor: pointer;
michael@0 915 min-width: 0;
michael@0 916 margin: 0 6px;
michael@0 917 }
michael@0 918
michael@0 919 .button-link:active {
michael@0 920 color: -moz-activehyperlinktext;
michael@0 921 }
michael@0 922
michael@0 923 .header-button .toolbarbutton-text {
michael@0 924 display: none;
michael@0 925 }
michael@0 926
michael@0 927 /*** telemetry experiments ***/
michael@0 928
michael@0 929 #detail-experiment-container {
michael@0 930 font-size: 80%;
michael@0 931 margin-bottom: 1em;
michael@0 932 }
michael@0 933
michael@0 934 #detail-experiment-bullet-container,
michael@0 935 #detail-experiment-state,
michael@0 936 #detail-experiment-time,
michael@0 937 .experiment-bullet-container,
michael@0 938 .experiment-state,
michael@0 939 .experiment-time {
michael@0 940 vertical-align: middle;
michael@0 941 display: inline-block;
michael@0 942 }
michael@0 943
michael@0 944 .addon .experiment-bullet,
michael@0 945 #detail-experiment-bullet {
michael@0 946 fill: rgb(158, 158, 158);
michael@0 947 }
michael@0 948
michael@0 949 .addon[active="true"] .experiment-bullet,
michael@0 950 #detail-view[active="true"] #detail-experiment-bullet {
michael@0 951 fill: rgb(106, 201, 20);
michael@0 952 }

mercurial