Ticket #25966: 25966.2.patch
| File 25966.2.patch, 15.9 KB (added by , 12 years ago) |
|---|
-
src/wp-admin/css/theme.css
2 2 clear: both; 3 3 padding: 0 0 100px; 4 4 } 5 5 6 .themes-php .wrap h2 { 6 7 float: left; 7 8 margin-bottom: 15px; 8 9 } 10 9 11 .themes-php .wrap h2 .button { 10 12 margin-left: 20px; 11 13 } 14 12 15 .themes-php .theme-count { 13 16 color: #fff; 14 17 border-radius: 30px; … … 19 22 margin-left: 5px; 20 23 margin-right: 20px; 21 24 position: relative; 22 top: -3px;25 top: -3px; 23 26 } 27 24 28 /* Position admin messages */ 25 29 .themes-php div.updated { 26 30 margin: 0 0 20px 0; 27 31 clear: both; 28 32 } 33 29 34 .themes-php div.updated a { 30 35 text-decoration: underline; 31 36 } … … 42 47 width: 30%; 43 48 44 49 border: 1px solid #dedede; 45 -webkit-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.1); 46 box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.1); 47 -moz-box-sizing: border-box; 48 box-sizing: border-box; 50 -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); 51 box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); 52 -webkit-box-sizing: border-box; 53 -moz-box-sizing: border-box; 54 box-sizing: border-box; 49 55 } 56 50 57 .theme:nth-child(3n) { 51 58 margin-right: 0; 52 59 } … … 61 68 font-weight: 600; 62 69 margin: 0; 63 70 padding: 15px; 64 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 71 -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 72 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 65 73 overflow: hidden; 66 74 white-space: nowrap; 67 75 text-overflow: ellipsis; 68 76 } 77 69 78 .theme-name { 70 79 background: #fff; 71 80 background: rgba(255,255,255,0.65); … … 75 84 /* Activate and Customize buttons, shown on hover */ 76 85 .theme .theme-actions { 77 86 opacity: 0; 78 transition: opacity 0.1s ease-in-out; 87 -webkit-transition: opacity 0.1s ease-in-out; 88 transition: opacity 0.1s ease-in-out; 79 89 position: absolute; 80 bottom: 0px;81 right: 0px;90 bottom: 0; 91 right: 0; 82 92 height: 38px; 83 93 padding: 9px 10px 0 10px; 84 94 background: rgba(244, 244, 244, 0.7); 85 95 border-left: 1px solid rgba(0,0,0,0.05); 86 96 } 97 87 98 .theme:hover .theme-actions { 88 99 opacity: 1; 89 100 } 101 90 102 .theme .theme-actions .button-primary { 91 103 margin-right: 3px; 92 104 } 105 93 106 .theme .theme-actions .button-secondary { 94 107 float: none; 95 108 margin-left: 3px; … … 105 118 display: block; 106 119 overflow: hidden; 107 120 position: relative; 108 transition: opacity 0.2s ease-in-out; 121 -webkit-transition: opacity 0.2s ease-in-out; 122 transition: opacity 0.2s ease-in-out; 109 123 } 124 110 125 .theme .theme-screenshot:after { 111 126 content: ''; 112 127 display: block; 113 128 padding-top: 66%; /* using a 3/2 aspect ratio */ 114 129 } 130 115 131 .theme .theme-screenshot img { 116 132 height: auto; 117 133 position: absolute; 118 left: 0;119 top: 0;134 left: 0; 135 top: 0; 120 136 width: 100%; 121 137 -webkit-transform: translateZ( 0 ); /* Prevents rendering bugs in Chrome */ 122 transition: opacity 0.2s ease-in-out; 138 -webkit-transition: opacity 0.2s ease-in-out; 139 transition: opacity 0.2s ease-in-out; 123 140 } 124 141 125 142 .theme:after { … … 137 154 right: 0; 138 155 padding-top: 24%; 139 156 text-shadow: 0 1px 20px rgba(255,255,255,0.9); 140 transition: opacity 0.2s ease-in-out; 157 -webkit-transition: opacity 0.2s ease-in-out; 158 transition: opacity 0.2s ease-in-out; 141 159 } 160 142 161 .theme:hover:after { 143 162 opacity: 0.6; 144 163 } … … 146 165 .theme:hover .theme-screenshot { 147 166 background: #fff; 148 167 } 168 149 169 .theme:hover .theme-screenshot img { 150 170 opacity: 0.4; 151 171 } 172 152 173 /* 153 174 * Displays a theme update notice 154 175 * when an update is available … … 164 185 line-height: 48px; 165 186 padding: 0 10px; 166 187 position: absolute; 167 top: 0;168 right: 0;169 left: 0;188 top: 0; 189 right: 0; 190 left: 0; 170 191 border-bottom: 1px solid rgba(0,0,0,0.25); 171 192 overflow: hidden; 172 193 } 194 173 195 .theme .theme-update:before { 174 196 content: '\f113'; 175 197 display: inline-block; … … 177 199 margin: 0 6px 0 0; 178 200 opacity: 0.8; 179 201 position: relative; 180 top: 5px;202 top: 5px; 181 203 speak: none; 182 204 -webkit-font-smoothing: antialiased; 183 205 } … … 190 212 */ 191 213 .theme.active { 192 214 } 215 193 216 .theme.active .theme-screenshot { 194 217 } 218 195 219 .theme.active .theme-name { 196 220 background: #0074a2; 197 221 color: #fff; 198 box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); 222 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); 223 box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); 199 224 } 225 200 226 .theme.active .theme-actions { 201 227 top: 0; 202 228 left: 0; … … 207 233 padding: 0 10px; 208 234 z-index: 1; 209 235 } 236 210 237 .theme.active .theme-actions .button { 211 238 float: right; 212 239 margin-top: 10px; 213 240 } 241 214 242 .theme.active .current-label { 215 243 font-size: 13px; 216 244 font-weight: 400; 217 245 color: #ccc; 218 246 margin-left: 5px; 219 247 } 220 .theme.active .current-label:before { 221 color: #7ad03a; 222 content: '\f147'; 223 display: inline-block; 224 display: none; 225 font: normal 24px/1 'dashicons'; 226 margin: 0 4px 0 0; 227 position: relative; 228 top: 6px; 229 speak: none; 230 -webkit-font-smoothing: antialiased; 231 } 248 232 249 .theme.active .theme-update { 233 250 top: 48px; 234 251 } … … 241 258 margin: 0 10px; 242 259 padding: 5px 10px; 243 260 position: absolute; 244 bottom: 56px;261 bottom: 56px; 245 262 } 263 246 264 .theme.display-author .theme-author { 247 265 display: block; 248 266 } 267 249 268 .theme.display-author .theme-author a { 250 269 color: inherit; 251 270 text-decoration: none; … … 266 285 border: none; 267 286 box-shadow: none; 268 287 } 288 269 289 .theme-browser .add-new-theme a { 270 290 color: #999; 271 291 text-decoration: none; … … 273 293 position: relative; 274 294 z-index: 1; 275 295 } 296 276 297 .theme-browser .add-new-theme:after { 277 298 display: block; 278 299 content: ''; … … 285 306 bottom: 0; 286 307 padding: 10% 0 0 0; 287 308 text-shadow: none; 288 transition: opacity 0.2s ease-in-out;289 309 border: 5px dashed rgba(0, 0, 0, 0.1); 290 box-sizing: border-box; 310 -webkit-transition: opacity 0.2s ease-in-out; 311 transition: opacity 0.2s ease-in-out; 312 -webkit-box-sizing: border-box; 313 -moz-box-sizing: border-box; 314 box-sizing: border-box; 291 315 } 316 292 317 .theme-browser .add-new-theme span:after { 293 318 background: rgba(153, 153, 153, 0.1); 294 319 border-radius: 50%; … … 310 335 text-shadow: none; 311 336 z-index:4; 312 337 } 338 313 339 .theme-browser .add-new-theme:hover .theme-screenshot { 314 340 background: none; 315 341 } 342 316 343 .theme-browser .add-new-theme:hover span:after { 317 344 background: #fff; 318 345 color: #0074a2; … … 332 359 position: relative; 333 360 top: -50px; 334 361 } 362 335 363 .theme-browser .add-new-theme:hover .theme-name { 336 364 color: #fff; 337 365 z-index: 2; … … 342 370 */ 343 371 .themes-php .theme-search { 344 372 position: relative; 345 top: -2px;346 left: 20px;373 top: -2px; 374 left: 20px; 347 375 font-size: 16px; 348 376 font-weight: 300; 349 377 line-height: 1.5; … … 355 383 */ 356 384 .theme-overlay .theme-backdrop { 357 385 position: absolute; 358 left: -20px;359 right: 0;360 top: 0;361 bottom: 0;386 left: -20px; 387 right: 0; 388 top: 0; 389 bottom: 0; 362 390 background: rgba( 238, 238, 238, 0.9 ); 363 /* background: rgba(0,0,0,0.7); */364 391 z-index: 10; 365 392 } 393 366 394 body.theme-overlay-open { 367 395 overflow: hidden; 368 396 } 369 397 370 398 .theme-overlay .theme-utility { 371 399 position: absolute; 372 top: 0;373 left: 0;374 right: 0;400 top: 0; 401 left: 0; 402 right: 0; 375 403 border-bottom: 1px solid #eee; 376 404 } 405 377 406 .theme-overlay .back { 378 407 cursor: pointer; 379 408 height: 48px; … … 382 411 float: right; 383 412 border-left: 1px solid #eee; 384 413 } 414 385 415 .theme-overlay .back:hover { 386 416 background: #333; 387 417 } 418 388 419 .theme-overlay .back:hover:before { 389 420 color: #fff; 390 421 } 422 391 423 .theme-overlay .back:before { 392 424 font: normal 30px/48px 'dashicons' !important; 393 425 color: #bbb; … … 395 427 content: '\f335'; 396 428 font-weight: 300; 397 429 } 430 398 431 /* Left and right navigation */ 399 432 .theme-overlay .right, 400 433 .theme-overlay .left { 401 434 cursor: pointer; 402 -webkit-user-select: none;403 -moz-user-select: none;404 user-select: none;405 cursor: pointer;406 435 height: 48px; 407 436 width: 54px; 408 437 float: left; 409 438 text-align: center; 410 439 border-right: 1px solid #eee; 440 -webkit-user-select: none; 441 -moz-user-select: none; 442 -ms-user-select: none; 443 user-select: none; 411 444 } 445 412 446 .theme-overlay .right:hover, 413 447 .theme-overlay .left:hover { 414 448 background: #333; 415 449 } 416 .theme-overlay .right:hover:before, 417 .theme-overlay .left:hover:before { 418 color: #fff; 419 } 450 451 .theme-overlay .right:hover:before, 452 .theme-overlay .left:hover:before { 453 color: #fff; 454 } 455 420 456 .theme-overlay .left:before { 421 457 content: '\f341'; 422 458 } 459 423 460 .theme-overlay .right:before { 424 461 content: '\f345'; 425 462 } 463 426 464 .theme-overlay .right:before, 427 465 .theme-overlay .left:before { 428 466 font: normal 16px/54px 'dashicons' !important; 429 467 display: inline; 430 468 font-weight: 300; 431 469 } 432 .theme-overlay .left:before {}433 470 434 471 .theme-overlay .theme-wrap { 435 472 clear: both; 436 473 position: fixed; 437 top: 120px;438 left: 190px;439 right: 40px;440 bottom: 80px;474 top: 120px; 475 left: 190px; 476 right: 40px; 477 bottom: 80px; 441 478 overflow: auto; 442 479 background: #fff; 443 480 padding: 88px 40px 110px 40px; 444 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.1); 481 -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.1); 482 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.1); 445 483 z-index: 20; 446 484 } 485 447 486 .theme-overlay .theme-wrap:after { 448 487 content: "."; 449 488 display: block; … … 463 502 border-top: 1px solid rgba(0,0,0,0.1); 464 503 z-index: 30; 465 504 } 505 466 506 .theme-overlay.active .theme-actions { 507 } 467 508 468 }469 509 .theme-overlay .theme-actions a { 470 510 margin-right: 5px; 471 511 margin-bottom: 0; … … 474 514 height: 37px; 475 515 padding: 0 20px 1px 20px; 476 516 } 517 477 518 .theme-overlay .theme-actions .delete-theme { 478 519 border-radius: 2px; 479 520 color: #a00; 480 521 font-size: 14px; 481 522 padding: 0 10px; 482 523 position: absolute; 483 right: 10px;484 bottom: 20px;524 right: 10px; 525 bottom: 20px; 485 526 text-decoration: none; 486 527 } 528 487 529 .theme-overlay .theme-actions .delete-theme:hover { 488 530 background: #d54e21; 489 531 color: #fff; … … 493 535 .theme-overlay.active .theme-actions .inactive-theme { 494 536 display: none; 495 537 } 538 496 539 .theme-overlay .theme-actions .inactive-theme, 497 540 .theme-overlay.active .theme-actions .active-theme { 498 541 display: block; 499 542 } 543 500 544 /* 501 545 * Theme Screenshots gallery 502 546 */ … … 506 550 width: 55%; 507 551 text-align: center; 508 552 } 553 509 554 /* First screenshot, shown big */ 510 555 .theme-overlay .screenshot { 511 556 border: 1px solid #fff; 512 -moz-box-sizing: border-box;513 557 -webkit-box-sizing: border-box; 514 box-sizing: border-box; 558 -moz-box-sizing: border-box; 559 box-sizing: border-box; 515 560 overflow: hidden; 516 561 position: relative; 517 box-shadow: 0 0 0 1px rgba(0,0,0,0.2); 562 -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2); 563 box-shadow: 0 0 0 1px rgba(0,0,0,0.2); 518 564 } 565 519 566 .theme-overlay .screenshot:after { 520 567 content: ''; 521 568 display: block; 522 569 padding-top: 66.66666%; /* using a 3/2 aspect ratio */ 523 570 } 571 524 572 .theme-overlay .screenshot img { 525 573 cursor: pointer; 526 574 height: auto; 527 575 position: absolute; 528 left: 0;529 top: 0;576 left: 0; 577 top: 0; 530 578 width: 100%; 531 579 } 580 532 581 /* Other screenshots, shown small and square */ 533 582 .theme-overlay .screenshot.thumb { 534 583 background: #ccc; … … 539 588 width: 140px; 540 589 height: 80px; 541 590 } 591 542 592 .theme-overlay .screenshot.thumb:after { 543 593 content: ''; 544 594 display: block; 545 595 padding-top: 100%; /* using a 1/1 aspect ratio */ 546 596 } 597 547 598 .theme-overlay .screenshot.thumb img { 548 599 cursor: pointer; 549 600 height: auto; 550 601 position: absolute; 551 left: 0;552 top: 0;602 left: 0; 603 top: 0; 553 604 width: 100%; 554 605 height: auto; 555 606 } 607 556 608 .theme-overlay .screenshot.selected { 557 609 background: transparent; 558 610 border: 2px solid #2ea2cc; 559 611 } 612 560 613 .theme-overlay .screenshot.selected img { 561 614 opacity: 0.8; 562 615 } 563 616 564 617 /* No screenshot placeholder */ 565 618 .theme .theme-screenshot.blank, 566 .theme-overlay .screenshot.blank { 567 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=); 619 .theme-overlay .screenshot.blank { 620 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=); 568 621 } 569 622 570 623 /* … … 574 627 width: 40%; 575 628 float: left; 576 629 } 630 577 631 .theme-overlay .current-label { 578 632 background: #333; 579 633 color: #fff; … … 583 637 border-radius: 2px; 584 638 margin: 0 0 -10px; 585 639 -webkit-user-select: none; 586 user-select: none; 640 -moz-user-select: none; 641 -ms-user-select: none; 642 user-select: none; 587 643 } 644 588 645 .theme-overlay .theme-name { 589 646 color: #222; 590 647 font-size: 32px; … … 592 649 margin: 10px 0 0; 593 650 line-height: 1.3; 594 651 } 652 595 653 .theme-overlay .theme-version { 596 654 color: #999; 597 655 font-size: 13px; … … 600 658 display: inline-block; 601 659 margin-left: 10px; 602 660 -webkit-user-select: none; 603 user-select: none; 661 -moz-user-select: none; 662 -ms-user-select: none; 663 user-select: none; 604 664 } 665 605 666 .theme-overlay .theme-author { 606 667 color: #686868; 607 668 font-size: 16px; 608 669 font-weight: 400; 609 670 margin: 15px 0 25px; 610 671 } 672 611 673 .theme-overlay .theme-author a { 612 674 color: inherit; 613 675 text-decoration: none; 614 676 } 677 615 678 .theme-overlay .theme-description { 616 679 color: #555; 617 680 font-size: 15px; … … 619 682 line-height: 1.5; 620 683 margin: 30px 0 0 0; 621 684 } 685 622 686 .theme-overlay .theme-tags { 623 687 border-top: 3px solid #eee; 624 688 color: #888; … … 628 692 padding-top: 20px; 629 693 text-transform: capitalize; 630 694 } 695 631 696 .theme-overlay .theme-tags span { 632 697 color: #444; 633 698 font-weight: bold; 634 699 margin-right: 5px; 635 700 } 701 636 702 .theme-overlay .theme-actions { 637 703 } 704 638 705 /* Theme Updates info */ 639 706 .theme-overlay .theme-update-message { 640 707 background: #fefaf7; … … 643 710 border-radius: 3px; 644 711 padding: 5px 20px 10px; 645 712 } 713 646 714 .theme-overlay .theme-update { 647 715 color: #222; 648 716 font-size: 18px; … … 650 718 line-height: 40px; 651 719 margin: 0; 652 720 } 721 653 722 .theme-overlay .parent-theme { 654 723 background: #f7fcfe; 655 724 border: 1px solid #eee; … … 659 728 margin-top: 30px; 660 729 padding: 10px 10px 10px 20px; 661 730 } 731 662 732 .theme-overlay .parent-theme strong { 663 733 font-weight: 700; 664 734 } … … 669 739 * Shuffles theme columns around based on screen width 670 740 */ 671 741 672 @media ( min-width: 1700px) {742 @media only screen and (min-width: 1700px) { 673 743 .theme { 674 744 width: 22.7%; 675 745 margin: 0 3% 3% 0; 676 746 } 747 677 748 .theme:nth-child(3n) { 678 749 margin-right: 3%; 679 750 } 751 680 752 .theme:nth-child(4n) { 681 753 margin-right: 0; 682 754 } 755 683 756 .theme-overlay .theme-wrap, 684 757 .theme-overlay .theme-actions { 685 758 right: 15%; 686 759 left: 22%; 687 760 } 688 761 } 689 @media ( max-width: 1200px ) { 762 763 @media only screen and (max-width: 1200px) { 690 764 .theme { 691 765 width: 47.5%; 692 766 margin-right: 0; 693 767 } 768 694 769 .theme:nth-child(even) { 695 770 margin-right: 0; 696 771 } 772 697 773 .theme:nth-child(odd) { 698 774 margin-right: 5%; 699 775 } 700 776 } 701 /* Mini-sidebar in MP6 */ 702 @media ( max-width: 900px ) { 777 778 /* Admin menu is folded */ 779 @media only screen and (max-width: 900px) { 703 780 .theme-overlay .theme-wrap, 704 781 .theme-overlay .theme-actions { 705 782 left: 76px; 706 783 } 707 784 } 708 @media ( max-width: 780px ) { 785 786 @media only screen and (max-width: 780px) { 709 787 .theme.active .theme-actions .button { 710 788 margin-top: 6px; 711 789 margin-right: -3px 712 790 } 791 713 792 .theme-overlay .theme-wrap { 714 793 top: 45px; 715 right: 0 px;716 bottom: 0 px;717 left: 0 px;794 right: 0; 795 bottom: 0; 796 left: 0; 718 797 padding: 70px 20px 100px; 719 798 } 799 720 800 .theme-overlay .theme-actions { 721 right: 0 px;722 bottom: 0 px;723 left: 0 px;801 right: 0; 802 bottom: 0; 803 left: 0; 724 804 text-align: left; 725 805 padding: 10px; 726 806 } 807 727 808 .theme-overlay .theme-screenshots { 728 809 width: 40%; 729 810 } 811 730 812 .theme-overlay .theme-info { 731 813 width: 50%; 732 814 } 815 733 816 .theme-overlay .theme-actions .delete-theme { 734 817 bottom: 10px; 735 818 } 736 819 } 737 @media ( max-width: 650px ) { 820 821 @media only screen and (max-width: 650px) { 738 822 .theme { 739 823 width: 100%; 740 824 margin-right: 0; 741 825 } 826 742 827 .theme:hover .theme-actions { 743 828 display: none; 744 829 } 830 745 831 .theme:nth-child(2n), 746 832 .theme:nth-child(3n) { 747 833 margin-right: 0; 748 834 } 835 749 836 .theme-overlay .theme-update, 750 837 .theme-overlay .theme-description { 751 838 margin-left: 0; 752 839 } 840 753 841 .theme-overlay.active .theme-actions .active-theme .button:nth-child(3n) { 754 842 display: none; 755 843 } 844 756 845 .theme.active .theme-actions .button { 757 846 margin-top: 6px; 758 847 margin-right: 0; 759 848 } 849 760 850 .theme-overlay .theme-screenshots { 761 851 width: 100%; 762 852 float: none; 763 853 } 854 764 855 .theme-overlay .theme-info { 765 856 width: 100%; 766 857 } 858 767 859 .theme-overlay .theme-author { 768 860 margin: 5px 0 15px 0; 769 861 } 862 770 863 .theme-overlay .theme-version { 771 864 margin-left: 0; 772 865 position: absolute; 773 866 top: 18px; 774 867 left: 130px; 775 868 } 869 776 870 .theme-overlay .current-label { 777 871 margin-top: 10px; 778 872 font-size: 13px; 779 873 } 874 780 875 /* 781 876 * Search form 782 877 */ 783 878 .themes-php .wrap h2 { 784 879 width: 100%; 785 880 } 881 786 882 .themes-php .theme-search { 787 883 float: none; 788 884 clear: both; … … 792 888 margin: 10px 0; 793 889 width: 100%; 794 890 } 795 } 796 No newline at end of file 891 }