wp-includes/css/media-views-rtl.css

   1 /**
   2  * Base Styles
   3  */
   4 .media-modal,
   5 .media-frame {
   6         font-family: "Open Sans", sans-serif;
   7         font-size: 12px;
   8 }
   9
  10 .media-frame input,
  11 .media-frame textarea {
  12         padding: 6px 8px;
  13         line-height: 16px;
  14 }
  15
  16 .media-frame select,
  17 .wp-admin .media-frame select {
  18         line-height: 28px;
  19         margin-top: 3px;
  20 }
  21
  22 .media-frame a {
  23         border-bottom: none;
  24         color: #21759b;
  25 }
  26
  27 .media-frame a:hover {
  28         color: #d54e21;
  29 }
  30
  31 .media-frame a.button {
  32         color: #333;
  33 }
  34
  35 .media-frame a.button:hover {
  36         color: #222;
  37 }
  38
  39 .media-frame a.button-primary,
  40 .media-frame a.button-primary:hover {
  41         color: #fff;
  42 }
  43
  44 .media-frame input[type="text"],
  45 .media-frame input[type="password"],
  46 .media-frame input[type="number"],
  47 .media-frame input[type="search"],
  48 .media-frame input[type="email"],
  49 .media-frame input[type="url"],
  50 .media-frame textarea,
  51 .media-frame select {
  52         font-family: "Open Sans", sans-serif;
  53         font-size: 12px;
  54         -moz-box-sizing: border-box;
  55         -webkit-box-sizing: border-box;
  56         -ms-box-sizing: border-box; /* ie8 only */
  57         box-sizing: border-box;
  58         border-width: 1px;
  59         border-style: solid;
  60         border-color: #dfdfdf;
  61 }
  62
  63 .media-frame select {
  64         height: 24px;
  65         padding: 2px;
  66 }
  67
  68 .media-frame input:disabled,
  69 .media-frame textarea:disabled,
  70 .media-frame input[readonly],
  71 .media-frame textarea[readonly] {
  72         background-color: #eee;
  73 }
  74
  75 .media-frame input[type="search"] {
  76         -webkit-appearance: textfield;
  77 }
  78
  79 .media-frame :-moz-placeholder {
  80    color: #a9a9a9;
  81 }
  82
  83 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
  84 .ui-sortable,
  85 .ui-draggable {
  86         -ms-touch-action: none;
  87         touch-action:     none;
  88 }
  89
  90 .meta-box-sortables.ui-sortable {
  91         -ms-touch-action: auto;
  92         touch-action:     auto;
  93 }
  94
  95 .meta-box-sortables.ui-sortable .hndle {
  96         -ms-touch-action: none;
  97         touch-action:     none;
  98 }
  99
 100 /**
 101  * Modal
 102  */
 103 .media-modal {
 104         position: fixed;
 105         top: 30px;
 106         right: 30px;
 107         left: 30px;
 108         bottom: 30px;
 109         z-index: 160000;
 110 }
 111
 112 .wp-customizer .media-modal {
 113         z-index: 560000;
 114 }
 115
 116 .media-modal-backdrop {
 117         position: fixed;
 118         top: 0;
 119         right: 0;
 120         left: 0;
 121         bottom: 0;
 122         min-height: 360px;
 123         background: #000;
 124         opacity: 0.7;
 125         z-index: 159900;
 126 }
 127
 128 .wp-customizer .media-modal-backdrop {
 129         z-index: 559900;
 130 }
 131
 132 .media-modal-close {
 133         position: absolute;
 134         text-decoration: none;
 135         top: 5px;
 136         left: 10px;
 137         width: 30px;
 138         height: 30px;
 139         z-index: 1000;
 140 }
 141
 142 .media-modal-close span.media-modal-icon {
 143         display: block;
 144         margin: 8px auto 0;
 145         width: 15px;
 146         height: 15px;
 147         background-image: none;
 148 }
 149
 150 .media-modal-close .media-modal-icon:before {
 151         content: '\f158';
 152         font: normal 20px/1 'dashicons';
 153         speak: none;
 154         vertical-align: middle;
 155         -webkit-font-smoothing: antialiased;
 156         -moz-osx-font-smoothing: grayscale;
 157         color: #666;
 158 }
 159
 160 .media-modal-close:hover .media-modal-icon:before {
 161         color: #2ea2cc;
 162 }
 163
 164 .media-modal-close:active {
 165         outline: 0;
 166 }
 167
 168 .media-modal-content {
 169         position: absolute;
 170         top: 0;
 171         right: 0;
 172         left: 0;
 173         bottom: 0;
 174         overflow: auto;
 175         min-height: 300px;
 176         background: #fff;
 177         -webkit-font-smoothing: subpixel-antialiased;
 178 }
 179
 180 .media-modal-icon {
 181         background-image: url(../images/uploader-icons.png);
 182         background-repeat: no-repeat;
 183 }
 184
 185 /**
 186  * Toolbar
 187  */
 188 .media-toolbar {
 189         position: absolute;
 190         top: 0;
 191         right: 0;
 192         left: 0;
 193         z-index: 100;
 194         height: 60px;
 195         padding: 0 16px;
 196         border: 0 solid #dfdfdf;
 197         overflow: hidden;
 198 }
 199
 200 .media-toolbar-primary {
 201         float: left;
 202         height: 100%;
 203 }
 204
 205 .media-toolbar-secondary {
 206         float: right;
 207         height: 100%;
 208 }
 209
 210 .media-toolbar-primary > .media-button,
 211 .media-toolbar-primary > .media-button-group {
 212         margin-right: 10px;
 213         float: right;
 214         margin-top: 15px;
 215 }
 216
 217 .media-toolbar-secondary > .media-button,
 218 .media-toolbar-secondary > .media-button-group {
 219         margin-left: 10px;
 220         float: right;
 221         margin-top: 15px;
 222 }
 223
 224 /**
 225  * Sidebar
 226  */
 227 .media-sidebar {
 228         position: absolute;
 229         top: 0;
 230         left: 0;
 231         bottom: 0;
 232         width: 267px;
 233         padding: 0 16px 24px;
 234         z-index: 75;
 235         background: #f5f5f5;
 236         border-right: 1px solid #dfdfdf;
 237         overflow: auto;
 238         -webkit-overflow-scrolling: touch;
 239 }
 240
 241 .hide-toolbar .media-sidebar {
 242         bottom: 0;
 243 }
 244
 245 .media-sidebar .sidebar-title {
 246         font-size: 20px;
 247         margin: 0;
 248         padding: 12px 10px 10px;
 249         line-height: 28px;
 250 }
 251
 252 .media-sidebar .sidebar-content {
 253         padding: 0 10px;
 254         margin-bottom: 130px;
 255 }
 256
 257 .media-sidebar .search {
 258         display: block;
 259         width: 100%;
 260 }
 261
 262 .media-sidebar h3 {
 263         position: relative;
 264         font-weight: bold;
 265         text-transform: uppercase;
 266         font-size: 12px;
 267         color: #666;
 268         margin: 24px 0 8px;
 269 }
 270
 271 .media-sidebar .setting {
 272         display: block;
 273         float: right;
 274         width: 100%;
 275         margin: 1px 0;
 276 }
 277
 278 .media-sidebar .setting label {
 279         display: block;
 280 }
 281
 282 .media-sidebar .setting .link-to-custom {
 283         margin: 3px 0;
 284 }
 285
 286 .media-sidebar .setting span {
 287         min-width: 30%;
 288         margin-left: 4%;
 289         font-size: 12px;
 290 }
 291
 292 .media-sidebar .setting select {
 293         max-width: 65%;
 294 }
 295
 296 .media-sidebar .setting input[type="checkbox"],
 297 .media-sidebar .field input[type="checkbox"] {
 298         width: 16px;
 299         float: none;
 300         margin: 8px 3px 0;
 301         padding: 0;
 302 }
 303
 304 .media-sidebar .setting span,
 305 .compat-item label span {
 306         float: right;
 307         min-height: 22px;
 308         padding-top: 8px;
 309         line-height: 16px;
 310         text-align: left;
 311         font-weight: normal;
 312         color: #666;
 313 }
 314
 315 .media-sidebar .setting input,
 316 .media-sidebar .setting textarea {
 317         margin: 1px;
 318         width: 65%;
 319         float: left;
 320 }
 321
 322 .media-sidebar .setting textarea,
 323 .compat-item .field textarea {
 324         height: 62px;
 325         resize: vertical;
 326 }
 327
 328 .media-sidebar select {
 329         margin-top: 3px;
 330 }
 331
 332 .compat-item {
 333         float: right;
 334         width: 100%;
 335         overflow: hidden;
 336 }
 337
 338 .compat-item table {
 339         width: 100%;
 340         table-layout: fixed;
 341         border-spacing: 0;
 342         border: 0;
 343 }
 344
 345 .compat-item tr {
 346         padding: 2px 0;
 347         display: block;
 348         overflow: hidden;
 349 }
 350
 351 .compat-item .label,
 352 .compat-item .field {
 353         display: block;
 354         margin: 0;
 355         padding: 0;
 356 }
 357
 358 .compat-item .label {
 359         min-width: 30%;
 360         margin-left: 4%;
 361         float: right;
 362         text-align: left;
 363 }
 364
 365 .compat-item .label span {
 366         display: block;
 367         width: 100%;
 368 }
 369
 370 .compat-item .field {
 371         float: left;
 372         width: 66%;
 373 }
 374
 375 .compat-item .field input {
 376         width: 100%;
 377         margin: 0;
 378 }
 379
 380
 381 /**
 382  * Menu
 383  */
 384 .media-menu {
 385         position: absolute;
 386         top: 0;
 387         right: 0;
 388         left: 0;
 389         bottom: 0;
 390         margin: 0;
 391         padding: 16px 0;
 392         border-left-width: 1px;
 393         border-left-style: solid;
 394         -webkit-user-select: none;
 395         -moz-user-select: none;
 396         -ms-user-select: none;
 397         user-select: none;
 398 }
 399
 400 .media-menu > a {
 401         display: block;
 402         position: relative;
 403         padding: 8px 20px;
 404         margin: 0;
 405         line-height: 18px;
 406         font-size: 14px;
 407         color: #21759B;
 408         text-decoration: none;
 409 }
 410
 411 .media-menu > a:hover {
 412         color: #21759B;
 413         background: rgba( 0, 0, 0, 0.04 );
 414 }
 415
 416 .media-menu > a:active {
 417         outline: none;
 418 }
 419
 420 .media-menu .active,
 421 .media-menu .active:hover {
 422         color: #333;
 423         font-weight: bold;
 424 }
 425
 426 .media-menu .separator {
 427         height: 0;
 428         margin: 12px 20px;
 429         padding: 0;
 430         border-top: 1px solid #dfdfdf;
 431         border-bottom: 1px solid #fff;
 432 }
 433
 434 /**
 435  * Menu
 436  */
 437 .media-router {
 438         position: relative;
 439         padding: 0 6px;
 440         margin: 0;
 441         clear: both;
 442         -webkit-user-select: none;
 443         -moz-user-select: none;
 444         -ms-user-select: none;
 445         user-select: none;
 446 }
 447
 448 .media-router > a {
 449         position: relative;
 450         float: right;
 451         padding: 8px 10px 9px;
 452         margin: 0;
 453         height: 18px;
 454         line-height: 18px;
 455         font-size: 14px;
 456         text-decoration: none;
 457 }
 458
 459 .media-router > a:last-child {
 460         border-left: 0;
 461 }
 462
 463 .media-router > a:active,
 464 .media-router > a:focus {
 465         outline: none;
 466 }
 467
 468 .media-router .active,
 469 .media-router .active:hover {
 470         color: #333;
 471 }
 472
 473 .media-router .active,
 474 .media-router > a.active:last-child {
 475         margin: -1px -1px 0;
 476 }
 477
 478 .media-router .active:after {
 479         display: none;
 480 }
 481
 482 /**
 483  * Frame
 484  */
 485 .media-frame {
 486         overflow: hidden;
 487         position: absolute;
 488         top: 0;
 489         right: 0;
 490         left: 0;
 491         bottom: 0;
 492 }
 493
 494 .media-frame-menu {
 495         position: absolute;
 496         top: 0;
 497         right: 0;
 498         bottom: 0;
 499         width: 199px;
 500         z-index: 150;
 501 }
 502
 503 .media-frame-title {
 504         position: absolute;
 505         top: 0;
 506         right: 200px;
 507         left: 0;
 508         height: 56px;
 509         z-index: 200;
 510 }
 511
 512 .media-frame-router {
 513         position: absolute;
 514         top: 56px;
 515         right: 200px;
 516         left: 0;
 517         height: 36px;
 518         z-index: 200;
 519 }
 520
 521 .media-frame-content {
 522         position: absolute;
 523         top: 90px;
 524         right: 200px;
 525         left: 0;
 526         bottom: 61px;
 527         height: auto;
 528         width: auto;
 529         margin: 0;
 530         overflow: auto;
 531         border-top-width: 1px;
 532         border-top-style: solid;
 533         border-bottom-width: 1px;
 534         border-bottom-style: solid;
 535 }
 536
 537 .media-frame-toolbar {
 538         position: absolute;
 539         right: 200px;
 540         left: 0;
 541         bottom: 0;
 542         height: 60px;
 543         z-index: 100;
 544 }
 545
 546 .media-frame.hide-menu .media-frame-title,
 547 .media-frame.hide-menu .media-frame-router,
 548 .media-frame.hide-menu .media-frame-toolbar,
 549 .media-frame.hide-menu .media-frame-content {
 550         right: 0;
 551 }
 552
 553 .media-frame.hide-menu .media-frame-menu {
 554         right: -200px;
 555 }
 556
 557 .media-frame.hide-toolbar .media-frame-content {
 558         bottom: 0;
 559 }
 560
 561 .media-frame.hide-toolbar .media-frame-toolbar {
 562         bottom: -61px;
 563 }
 564
 565 .media-frame.hide-router .media-frame-content {
 566         top: 56px;
 567 }
 568
 569 .media-frame.hide-router .media-frame-router {
 570         display: none;
 571 }
 572
 573 .media-frame.hide-router .media-frame-title {
 574         border-bottom: 1px solid #dfdfdf;
 575         box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
 576 }
 577
 578 .media-frame .media-toolbar .add-to-gallery {
 579         display: none;
 580 }
 581
 582 .media-frame-title h1 {
 583         padding: 0 16px;
 584         font-size: 22px;
 585         line-height: 60px;
 586         margin: 0;
 587 }
 588
 589 /**
 590  * Iframes
 591  */
 592 .media-frame .media-iframe {
 593         overflow: hidden;
 594 }
 595
 596 .media-frame .media-iframe,
 597 .media-frame .media-iframe iframe {
 598         height: 100%;
 599         width: 100%;
 600         border: 0;
 601 }
 602
 603 /**
 604  * Attachment Browser Filters
 605  */
 606 .media-frame select.attachment-filters {
 607         margin-top: 11px;
 608         margin-left: 10px;
 609 }
 610
 611 /**
 612  * Search
 613  */
 614 .media-frame .search {
 615         margin-top: 11px;
 616         padding: 4px;
 617         line-height: 18px;
 618         font-size: 13px;
 619         color: #464646;
 620         font-family: "Open Sans", sans-serif;
 621         -webkit-appearance: none;
 622 }
 623
 624 .media-toolbar-secondary .search {
 625         margin-left: 16px;
 626 }
 627
 628 /**
 629  * Attachments
 630  */
 631 .attachments {
 632         margin: 0;
 633         padding-left: 16px;
 634         -webkit-overflow-scrolling: touch;
 635 }
 636
 637 /**
 638  * Attachment
 639  */
 640 .attachment {
 641         position: relative;
 642         float: right;
 643
 644         padding: 0;
 645         margin: 0 10px 20px;
 646         color: #464646;
 647         list-style: none;
 648         text-align: center;
 649
 650         -webkit-user-select: none;
 651         -moz-user-select:    none;
 652         -ms-user-select:     none;
 653         -o-user-select:      none;
 654         user-select:         none;
 655 }
 656
 657 .selected.attachment {
 658         box-shadow:
 659                 0 0 0 1px #fff,
 660                 0 0 0 3px #ccc;
 661 }
 662
 663 .attachment-preview {
 664         position: relative;
 665         width: 199px;
 666         height: 199px;
 667         box-shadow:
 668                 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
 669                 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
 670         background: #eee;
 671         cursor: pointer;
 672 }
 673
 674 .attachment .icon {
 675         margin: 0 auto;
 676         overflow: hidden;
 677         padding-top: 20%;
 678 }
 679
 680 .attachment .thumbnail {
 681         display: block;
 682         position: absolute;
 683         top: 0;
 684         right: 0;
 685         margin: 0 auto;
 686         overflow: hidden;
 687         max-width: 100%;
 688         max-height: 100%;
 689 }
 690
 691 .attachment-preview .thumbnail:after {
 692         content: '';
 693         display: block;
 694         position: absolute;
 695         top: 0;
 696         right: 0;
 697         left: 0;
 698         bottom: 0;
 699         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
 700         overflow: hidden;
 701 }
 702
 703 /* @noflip */
 704 .attachment .thumbnail img {
 705         top: 0;
 706         left: 0;
 707 }
 708
 709 /* @noflip */
 710 .attachment .thumbnail .centered {
 711         position: absolute;
 712         top: 0;
 713         left: 0;
 714         width: 100%;
 715         height: 100%;
 716         -webkit-transform: translate( 50%, 50% );
 717         -moz-transform:    translate( 50%, 50% );
 718         -ms-transform:     translate( 50%, 50% );
 719         -o-transform:      translate( 50%, 50% );
 720         transform:         translate( 50%, 50% );
 721 }
 722
 723 .attachment .thumbnail .centered img {
 724         -webkit-transform: translate( -50%, -50% );
 725         -moz-transform:    translate( -50%, -50% );
 726         -ms-transform:     translate( -50%, -50% );
 727         -o-transform:      translate( -50%, -50% );
 728         transform:         translate( -50%, -50% );
 729 }
 730
 731 .attachment .filename {
 732         position: absolute;
 733         right: 0;
 734         left: 0;
 735         bottom: 0;
 736         overflow: hidden;
 737         max-height: 100%;
 738
 739         word-wrap: break-word;
 740         text-align: center;
 741         font-weight: bold;
 742         background: rgba( 255, 255, 255, 0.8 );
 743         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
 744 }
 745
 746 .attachment .filename div {
 747         padding: 5px 10px;
 748 }
 749
 750 .attachment-preview .thumbnail {
 751         width: 199px;
 752         height: 199px;
 753 }
 754
 755 .attachment .thumbnail img {
 756         position: absolute;
 757 }
 758
 759 .attachment .close {
 760         display: none;
 761         position: absolute;
 762         top: 5px;
 763         left: 5px;
 764         height: 22px;
 765         width: 22px;
 766         padding: 0;
 767         font-size: 20px;
 768         line-height: 20px;
 769         text-align: center;
 770         text-decoration: none;
 771         color: #464646;
 772         background-color: #fff;
 773         background-position: -96px 4px;
 774         border-width: 0;
 775         border-radius: 3px;
 776         box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
 777 }
 778
 779 .attachment .close:hover {
 780         box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
 781 }
 782
 783 .attachment:hover .close {
 784         display: block;
 785 }
 786
 787 .attachment .check {
 788         display: none;
 789         height: 24px;
 790         width: 24px;
 791         position: absolute;
 792         top: -6px;
 793         left: -6px;
 794         outline: none;
 795 }
 796
 797 .attachment .check div {
 798         background-position: -1px 0;
 799         height: 15px;
 800         width: 15px;
 801         margin: 5px;
 802 }
 803
 804 .attachment .check:hover div {
 805         background-position: -40px 0;
 806 }
 807
 808 .attachment.selected .check {
 809         display: block;
 810 }
 811
 812 .attachment.details .check div {
 813         background-position: -21px 0;
 814 }
 815
 816 .attachment.details .check:hover div {
 817         background-position: -60px 0;
 818 }
 819
 820 .media-frame .attachment .describe {
 821         position: relative;
 822         display: block;
 823         width: 100%;
 824         margin: -1px 0 0;
 825         padding: 8px;
 826         font-size: 12px;
 827         border-radius: 0;
 828 }
 829
 830 /**
 831  * Attachments Browser
 832  */
 833 .media-frame .attachments-browser {
 834         position: relative;
 835         width: 100%;
 836         height: 100%;
 837         overflow: hidden;
 838 }
 839
 840 .attachments-browser .media-toolbar {
 841         left: 300px;
 842         height: 50px;
 843 }
 844
 845 .attachments-browser .media-toolbar-primary > .media-button,
 846 .attachments-browser .media-toolbar-primary > .media-button-group,
 847 .attachments-browser .media-toolbar-secondary > .media-button,
 848 .attachments-browser .media-toolbar-secondary > .media-button-group {
 849         margin-top: 10px;
 850 }
 851
 852 .attachments-browser .attachments,
 853 .attachments-browser .uploader-inline {
 854         position: absolute;
 855         top: 50px;
 856         right: 0;
 857         left: 300px;
 858         bottom: 0;
 859         overflow: auto;
 860 }
 861
 862 .attachments-browser .instructions {
 863         display: inline-block;
 864         margin-top: 16px;
 865         line-height: 18px;
 866         font-size: 13px;
 867         color: #666;
 868 }
 869
 870 /**
 871  * Progress Bar
 872  */
 873 .media-progress-bar {
 874         position: relative;
 875         height: 10px;
 876         width: 70%;
 877         margin: 10px auto;
 878         border-radius: 10px;
 879         background: #dfdfdf;
 880         background: rgba( 0, 0, 0, 0.1 );
 881 }
 882
 883 .media-progress-bar div {
 884         height: 10px;
 885         min-width: 20px;
 886         width: 0;
 887         background: #1e8cbe;
 888         border-radius: 10px;
 889         -webkit-transition: width 300ms;
 890         -moz-transition:    width 300ms;
 891         -ms-transition:     width 300ms;
 892         -o-transition:      width 300ms;
 893         transition:         width 300ms;
 894 }
 895
 896 .media-uploader-status .media-progress-bar {
 897         display: none;
 898         width: 100%;
 899 }
 900
 901 .uploading.media-uploader-status .media-progress-bar {
 902         display: block;
 903 }
 904
 905 .attachment-preview .media-progress-bar {
 906         position: absolute;
 907         top: 50%;
 908         right: 15%;
 909         width: 70%;
 910         margin: -5px 0 0 0;
 911 }
 912
 913 .media-uploader-status {
 914         position: relative;
 915         margin: 0 auto;
 916         padding-bottom: 10px;
 917         max-width: 400px;
 918 }
 919
 920 .media-sidebar .media-uploader-status {
 921         border-bottom: 1px solid #dfdfdf;
 922         box-shadow: 0 1px 0 #fff;
 923 }
 924
 925 .uploader-inline .media-uploader-status h3 {
 926         display: none;
 927 }
 928
 929 .media-uploader-status .upload-details {
 930         display: none;
 931         font-size: 12px;
 932         color: #666;
 933 }
 934
 935 .uploading.media-uploader-status .upload-details {
 936         display: block;
 937 }
 938
 939 .media-uploader-status .upload-detail-separator {
 940         padding: 0 4px;
 941 }
 942
 943 .media-uploader-status .upload-count {
 944         color: #464646;
 945 }
 946
 947 .media-uploader-status .upload-dismiss-errors,
 948 .media-uploader-status .upload-errors {
 949         display: none;
 950 }
 951
 952 .errors.media-uploader-status .upload-dismiss-errors,
 953 .errors.media-uploader-status .upload-errors {
 954         display: block;
 955 }
 956
 957 .media-uploader-status .upload-dismiss-errors {
 958         text-decoration: none;
 959 }
 960
 961 .media-sidebar .media-uploader-status .upload-dismiss-errors {
 962         position: absolute;
 963         top: 0;
 964         left: 0;
 965 }
 966
 967 .upload-errors .upload-error {
 968         margin: 8px auto 0 auto;
 969         padding: 8px;
 970         border: 1px #c00 solid;
 971         background: #ffebe8;
 972         border-radius: 3px;
 973 }
 974
 975 .upload-errors .upload-error-label {
 976         padding: 2px 4px;
 977         margin-left: 8px;
 978         font-weight: bold;
 979         color: #fff;
 980         background: #e00;
 981         background-image: -webkit-gradient(linear, right top, right bottom, from(#e00), to(#a00));
 982         background-image: -webkit-linear-gradient(top, #e00, #a00);
 983         background-image:    -moz-linear-gradient(top, #e00, #a00);
 984         background-image:      -o-linear-gradient(top, #e00, #a00);
 985         background-image:   linear-gradient(to bottom, #e00, #a00);
 986         border-radius: 3px;
 987 }
 988
 989 .upload-errors .upload-error-message {
 990         display: block;
 991         padding-top: 8px;
 992         color: #b44;
 993         word-wrap: break-word;
 994 }
 995
 996 .uploader-window {
 997         position: fixed;
 998         top: 0;
 999         right: 0;
1000         left: 0;
1001         bottom: 0;
1002         background: rgba( 0, 86, 132, 0.9 );
1003
1004         z-index: 250000;
1005         display: none;
1006         text-align: center;
1007         opacity: 0;
1008
1009         -webkit-transition: opacity 250ms;
1010         -moz-transition:    opacity 250ms;
1011         -ms-transition:     opacity 250ms;
1012         -o-transition:      opacity 250ms;
1013         transition:         opacity 250ms;
1014 }
1015
1016 .uploader-window-content {
1017         position: absolute;
1018         top: 10px;
1019         right: 10px;
1020         left: 10px;
1021         bottom: 10px;
1022         border: 1px dashed #fff;
1023 }
1024
1025 .uploader-window h3 {
1026         margin: -0.5em 0 0;
1027         position: absolute;
1028         top: 50%;
1029         right: 0;
1030         left: 0;
1031         -webkit-transform: translateY( -50% );
1032         -moz-transform:    translateY( -50% );
1033         -ms-transform:     translateY( -50% );
1034         -o-transform:      translateY( -50% );
1035         transform:         translateY( -50% );
1036
1037         font-size: 40px;
1038         color: #fff;
1039         padding: 0;
1040 }
1041
1042 .uploader-window .media-progress-bar {
1043         margin-top: 20px;
1044         max-width: 300px;
1045         background: transparent;
1046         border-color: #fff;
1047         display: none;
1048 }
1049
1050 .uploader-window .media-progress-bar div {
1051         background: #fff;
1052 }
1053
1054 .uploading .uploader-window .media-progress-bar {
1055         display: block;
1056 }
1057
1058 .media-frame .uploader-inline {
1059         margin: 20px;
1060         padding: 20px;
1061         text-align: center;
1062 }
1063
1064 .uploader-inline-content {
1065         position: absolute;
1066         top: 30%;
1067         right: 0;
1068         left: 0;
1069 }
1070
1071 .uploader-inline-content .upload-ui {
1072         margin: 4em 0;
1073 }
1074
1075 .uploader-inline-content .post-upload-ui {
1076         margin-bottom: 2em;
1077 }
1078
1079 .uploader-inline .has-upload-message .upload-ui {
1080         margin: 0 0 4em;
1081 }
1082
1083 .uploader-inline h3 {
1084         font-size: 20px;
1085         line-height: 28px;
1086         font-weight: 400;
1087         margin-bottom: 1.6em;
1088 }
1089
1090 .uploader-inline .has-upload-message .upload-instructions {
1091         font-size: 14px;
1092         color: #464646;
1093         font-weight: normal;
1094 }
1095
1096 .uploader-inline .drop-instructions {
1097         display: none;
1098 }
1099
1100 .supports-drag-drop .uploader-inline .drop-instructions {
1101         display: block;
1102 }
1103
1104 .uploader-inline p {
1105         font-size: 12px;
1106 }
1107
1108 .uploader-inline .media-progress-bar {
1109         display: none;
1110 }
1111
1112 .uploading.uploader-inline .media-progress-bar {
1113         display: block;
1114 }
1115
1116 .uploader-inline .browser {
1117         display: inline-block !important;
1118 }
1119
1120 /**
1121  * Selection
1122  */
1123 .media-selection {
1124         position: absolute;
1125         top: 0;
1126         right: 0;
1127         left: 350px;
1128         height: 60px;
1129         padding: 0 16px 0 0;
1130         overflow: hidden;
1131         white-space: nowrap;
1132 }
1133
1134 .media-selection .selection-info {
1135         display: inline-block;
1136         font-size: 12px;
1137         height: 60px;
1138         margin-left: 10px;
1139         vertical-align: top;
1140 }
1141
1142 .media-selection.empty,
1143 .media-selection.editing {
1144         display: none;
1145 }
1146
1147 .media-selection.one .edit-selection {
1148         display: none;
1149 }
1150
1151 .media-selection .count {
1152         display: block;
1153         padding-top: 12px;
1154         font-size: 14px;
1155         line-height: 20px;
1156         font-weight: bold;
1157 }
1158
1159 .media-selection .selection-info a {
1160         display: block;
1161         float: right;
1162         padding: 1px 8px;
1163         margin: 1px -8px 1px 8px;
1164         line-height: 16px;
1165         text-decoration: none;
1166         border-left: 1px solid #dfdfdf;
1167         color: #21759B;
1168 }
1169
1170 .media-selection .selection-info a:hover {
1171         background: #21759B;
1172         color: #fff;
1173         border-color: transparent;
1174 }
1175
1176 .media-selection .selection-info a:last-child {
1177         border-left: 0;
1178         margin-left: 0;
1179 }
1180
1181 .media-selection .selection-info .clear-selection {
1182         color: red;
1183 }
1184
1185 .media-selection .selection-info .clear-selection:hover {
1186         background: red;
1187 }
1188
1189 .media-selection .selection-view {
1190         display: inline-block;
1191         vertical-align: top;
1192 }
1193
1194 .media-selection .attachments {
1195         display: inline-block;
1196         height: 48px;
1197         margin-top: 5px;
1198         overflow: hidden;
1199         vertical-align: top;
1200 }
1201
1202 .media-selection .attachment .icon {
1203         width: 50%;
1204 }
1205
1206 .attachment.selection.selected {
1207         box-shadow: none;
1208 }
1209
1210 .attachment.selection.details {
1211         box-shadow:
1212                 0 0 0 1px #fff,
1213                 0 0 0 4px #1e8cbe;
1214 }
1215
1216 .media-selection .attachment.selection.details {
1217         box-shadow:
1218                 0 0 0 1px #fff,
1219                 0 0 0 3px #1e8cbe;
1220 }
1221
1222 .media-selection:after {
1223         content: '';
1224         display: block;
1225         position: absolute;
1226         top: 0;
1227         left: 0;
1228         bottom: 0;
1229         width: 25px;
1230         background-image: -webkit-gradient(linear, left top, right top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
1231         background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1232         background-image:    -moz-linear-gradient(left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1233         background-image:      -o-linear-gradient(left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1234         background-image:   linear-gradient(to right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1235 }
1236
1237 .media-selection .attachment .filename {
1238         display: none;
1239 }
1240
1241 /**
1242  * Spinner
1243  */
1244
1245 .media-frame .spinner {
1246         background: url('../images/spinner.gif') no-repeat;
1247         background-size: 20px 20px;
1248         display: none;
1249         opacity: 0.7;
1250         filter: alpha(opacity=70);
1251         width: 20px;
1252         height: 20px;
1253         margin: 0;
1254 }
1255
1256 .media-sidebar .settings-save-status {
1257         background: #f5f5f5;
1258         float: left;
1259         text-transform: none;
1260         z-index: 10;
1261 }
1262
1263 .media-sidebar .settings-save-status .spinner {
1264         margin: 0 5px 0;
1265 }
1266
1267 .media-sidebar .settings-save-status .saved {
1268         float: left;
1269         display: none;
1270 }
1271
1272 .media-sidebar .save-waiting .settings-save-status .spinner,
1273 .media-sidebar .save-complete .settings-save-status .saved {
1274         display: block;
1275 }
1276
1277 /**
1278  * Attachment Details
1279  */
1280 .attachment-details {
1281         position: relative;
1282         overflow: auto;
1283 }
1284
1285 .attachment-info {
1286         overflow: hidden;
1287         min-height: 60px;
1288         margin-bottom: 16px;
1289         line-height: 18px;
1290         color: #666;
1291         border-bottom: 1px solid #e5e5e5;
1292         box-shadow: 0 1px 0 #fff;
1293         padding-bottom: 11px;
1294 }
1295
1296 .attachment-info .filename {
1297         font-weight: bold;
1298         color: #464646;
1299         word-wrap: break-word;
1300 }
1301
1302 .attachment-info .thumbnail {
1303         position: relative;
1304         float: right;
1305         max-width: 120px;
1306         max-height: 120px;
1307         margin-top: 5px;
1308         margin-left: 10px;
1309         margin-bottom: 5px;
1310 }
1311
1312 .uploading .attachment-info .thumbnail {
1313         width: 120px;
1314         height: 80px;
1315         box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1316 }
1317
1318 .uploading .attachment-info .media-progress-bar {
1319         margin-top: 35px;
1320 }
1321
1322 .attachment-info .thumbnail:after {
1323         content: '';
1324         display: block;
1325         position: absolute;
1326         top: 0;
1327         right: 0;
1328         left: 0;
1329         bottom: 0;
1330         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1331         overflow: hidden;
1332 }
1333
1334 .attachment-info .thumbnail img {
1335         display: block;
1336         max-width: 120px;
1337         max-height: 120px;
1338         margin: 0 auto;
1339 }
1340
1341 .attachment-info .details {
1342         float: right;
1343         font-size: 12px;
1344         max-width: 100%;
1345 }
1346
1347 .attachment-info .edit-attachment,
1348 .attachment-info .refresh-attachment,
1349 .attachment-info .delete-attachment {
1350         display: block;
1351         text-decoration: none;
1352         white-space: nowrap;
1353 }
1354
1355 .attachment-info .refresh-attachment,
1356 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1357         display: none;
1358 }
1359
1360 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1361 .attachment-info .edit-attachment {
1362         display: block;
1363 }
1364
1365 .attachment-info .delete-attachment {
1366         color: #bc0b0b;
1367 }
1368
1369 .attachment-info .delete-attachment:hover {
1370         color: red;
1371 }
1372
1373 /**
1374  * Attachment Display Settings
1375  */
1376 .attachment-display-settings {
1377         width: 100%;
1378         float: right;
1379         overflow: hidden;
1380 }
1381
1382 .attachment-display-settings h4 {
1383         margin: 1.4em 0 0.4em;
1384 }
1385
1386 .gallery-settings {
1387         overflow: hidden;
1388 }
1389
1390 /**
1391  * Embed from URL
1392  */
1393 .embed-url {
1394         display: block;
1395         position: relative;
1396         padding: 16px;
1397         margin: 0;
1398         z-index: 250;
1399         background: #fff;
1400         font-size: 18px;
1401 }
1402
1403 .media-frame .embed-url input {
1404         font-size: 18px;
1405         padding: 12px 14px;
1406         width: 100%;
1407         min-width: 200px;
1408         box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1409 }
1410
1411 .media-frame .embed-url .spinner {
1412         position: absolute;
1413         top: 16px;
1414         left: 26px;
1415 }
1416
1417 .media-frame .embed-loading .embed-url .spinner {
1418         display: block;
1419 }
1420
1421 .embed-link-settings,
1422 .embed-image-settings {
1423         position: absolute;
1424         top: 60px;
1425         right: 0;
1426         left: 0;
1427         bottom: 0;
1428         padding: 16px 16px 32px;
1429         overflow: auto;
1430 }
1431
1432 .media-embed .thumbnail {
1433         max-width: 100%;
1434         max-height: 200px;
1435         position: relative;
1436         float: right;
1437 }
1438
1439 .media-embed .thumbnail img {
1440         max-height: 200px;
1441         display: block;
1442 }
1443
1444 .media-embed .thumbnail:after {
1445         content: '';
1446         display: block;
1447         position: absolute;
1448         top: 0;
1449         right: 0;
1450         left: 0;
1451         bottom: 0;
1452         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1453         overflow: hidden;
1454 }
1455
1456 .media-embed .setting {
1457         width: 100%;
1458         margin-top: 10px;
1459         float: right;
1460         display: block;
1461         clear: both;
1462 }
1463
1464 .media-embed .setting span {
1465         display: block;
1466         width: 200px;
1467         font-size: 13px;
1468         line-height: 24px;
1469         color: #666;
1470 }
1471
1472 .media-embed .setting .button-group {
1473         margin: 2px 0;
1474 }
1475
1476 .media-embed .setting input,
1477 .media-embed .setting textarea {
1478         display: block;
1479         width: 100%;
1480         max-width: 400px;
1481         margin: 1px 0;
1482 }
1483
1484 /**
1485  * IE7 Fixes
1486  */
1487 .ie7 .media-frame .attachments-browser {
1488         position: static;
1489 }
1490
1491 .ie7 .media-frame .embed-url input {
1492         margin-top: 4px;
1493         width: 90%;
1494 }
1495
1496 .ie7 .compat-item {
1497         width: 99%;
1498 }
1499
1500 .ie7 .attachment-display-settings {
1501         width: auto;
1502 }
1503
1504 .ie7 .attachment-preview,
1505 .ie7 .attachment-preview .thumbnail {
1506         width: 120px;
1507         height: 120px;
1508 }
1509
1510 .ie7 .media-frame .attachment .describe {
1511         width: 102px;
1512 }
1513
1514 .ie7 .media-sidebar .setting select {
1515         max-width: 55%;
1516 }
1517
1518 .ie7 .media-sidebar .setting input,
1519 .ie7 .media-sidebar .setting textarea {
1520         width: 55%;
1521 }
1522
1523 .ie7 .media-sidebar .setting .link-to-custom {
1524         float: right;
1525 }
1526
1527 /**
1528  * Localization
1529  */
1530 .rtl .media-modal,
1531 .rtl .media-frame,
1532 .rtl .media-frame .search,
1533 .rtl .media-frame input[type="text"],
1534 .rtl .media-frame input[type="password"],
1535 .rtl .media-frame input[type="number"],
1536 .rtl .media-frame input[type="search"],
1537 .rtl .media-frame input[type="email"],
1538 .rtl .media-frame input[type="url"],
1539 .rtl .media-frame textarea,
1540 .rtl .media-frame select {
1541         font-family: Tahoma, sans-serif;
1542 }
1543
1544 :lang(he-il) .rtl .media-modal,
1545 :lang(he-il) .rtl .media-frame,
1546 :lang(he-il) .rtl .media-frame .search,
1547 :lang(he-il) .rtl .media-frame input[type="text"],
1548 :lang(he-il) .rtl .media-frame input[type="password"],
1549 :lang(he-il) .rtl .media-frame input[type="number"],
1550 :lang(he-il) .rtl .media-frame input[type="search"],
1551 :lang(he-il) .rtl .media-frame input[type="email"],
1552 :lang(he-il) .rtl .media-frame input[type="url"],
1553 :lang(he-il) .rtl .media-frame textarea,
1554 :lang(he-il) .rtl .media-frame select {
1555         font-family: Arial, sans-serif;
1556 }
1557
1558
1559
1560
1561 @media only screen and (max-width: 960px) {
1562         .media-frame-content .media-toolbar-primary .search,
1563         .media-frame-content .media-toolbar-secondary .attachment-filters {
1564                 max-width: 120px;
1565         }
1566 }
1567
1568 /**
1569  * Responsive layout
1570  */
1571 @media only screen and (max-width: 900px) {
1572         .media-frame-menu {
1573                 width: 139px;
1574         }
1575
1576         .media-menu > a {
1577                 padding: 4px 5px;
1578         }
1579
1580         .media-frame-title,
1581         .media-frame-router,
1582         .media-frame-content,
1583         .media-frame-toolbar {
1584                 right: 140px;
1585         }
1586
1587         .media-sidebar {
1588                 width: 159px;
1589                 padding: 0 10px 24px;
1590         }
1591
1592         .attachments-browser .attachments,
1593         .attachments-browser .uploader-inline,
1594         .attachments-browser .media-toolbar {
1595                 left: 180px;
1596         }
1597
1598         .media-sidebar .setting input,
1599         .media-sidebar .setting textarea,
1600         .media-sidebar .setting span,
1601         .compat-item label span {
1602                 float: none;
1603         }
1604
1605         .media-sidebar .setting span,
1606         .compat-item label span {
1607                 text-align: inherit;
1608                 display: block;
1609                 min-height: 16px;
1610                 margin: 0;
1611                 padding: 8px 2px 0;
1612         }
1613
1614         .media-sidebar .setting input,
1615         .media-sidebar .setting textarea,
1616         .media-sidebar .setting select {
1617                 width: 98%;
1618                 max-width: none;
1619         }
1620
1621         .media-sidebar .setting select.columns {
1622                 width: auto;
1623         }
1624
1625         .media-frame input,
1626         .media-frame textarea,
1627         .media-frame .search {
1628                 padding: 3px 6px;
1629         }
1630
1631         .media-frame-content .attachment .icon {
1632                 top: 40%;
1633         }
1634
1635         .media-selection {
1636                 min-width: 120px;
1637         }
1638
1639         .media-selection:after {
1640                 background: none;
1641         }
1642
1643         .media-selection .attachments {
1644                 display: none;
1645         }
1646
1647         .media-menu .separator {
1648                 margin: 12px 10px;
1649         }
1650
1651         .media-modal-close {
1652                 left: 10px;
1653         }
1654
1655         /* Text inputs need to be 16px, or they force zooming on iOS */
1656         .media-frame input[type="text"],
1657         .media-frame input[type="password"],
1658         .media-frame input[type="number"],
1659         .media-frame input[type="search"],
1660         .media-frame input[type="email"],
1661         .media-frame input[type="url"],
1662         .media-frame textarea,
1663         .media-frame select {
1664                 font-size: 16px;
1665         }
1666 }
1667
1668 /* Responsive on portrait and landscape */
1669 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1670
1671         /* Media tabs on the top */
1672         .media-frame-content .media-toolbar .instructions {
1673                 display: none;
1674         }
1675
1676         .media-frame-menu {
1677                 width: auto;
1678                 bottom: auto;
1679                 left: 0;
1680                 height: 60px;
1681         }
1682
1683         .media-menu {
1684                 border-left: none;
1685                 position: relative;
1686                 border-bottom: 1px solid #dddddd;
1687                 overflow: hidden;
1688                 padding: 10px 10px 10px 0;
1689         }
1690
1691         .media-menu a {
1692                 float: right;
1693                 width: 42%;
1694                 white-space: nowrap;
1695                 text-overflow: ellipsis;
1696                 overflow: hidden;
1697         }
1698
1699         .media-frame-title {
1700                 display: none;
1701         }
1702
1703         .media-frame-toolbar {
1704                 position: absolute;
1705                 bottom: 0px;
1706                 right: 0;
1707                 left: 0;
1708                 background: #FFF;
1709                 border-top: 1px solid #DEDEDE;
1710         }
1711
1712         .media-toolbar {
1713                 position: relative;
1714         }
1715
1716         .media-frame {
1717                 overflow: hidden;
1718         }
1719
1720         .attachments-browser .attachments {
1721                 top: 42px;
1722         }
1723
1724         .attachment-details h3 {
1725                 margin-top: 45px;
1726         }
1727
1728         /* Shorten right-side links so they don't overlap the close button */
1729         .media-menu a:nth-child(2),
1730         .media-menu a:last-child {
1731                 width: 40%;
1732         }
1733
1734         .media-menu .separator {
1735                 display: none;
1736         }
1737
1738         .media-frame-title {
1739                 top: 72px;
1740                 right: auto;
1741                 height: auto;
1742         }
1743
1744         .media-frame-title h1 {
1745                 line-height: 3;
1746                 font-size: 18px;
1747         }
1748
1749         .media-frame-router {
1750                 top: 84px;
1751                 right: 0;
1752         }
1753
1754         .media-frame-content {
1755                 right: 0;
1756                 top: 118px;
1757         }
1758
1759         .media-frame .attachments-browser {
1760                 padding-bottom: 300px;
1761         }
1762
1763         .media-sidebar {
1764                 border-bottom: 1px solid #dddddd;
1765         }
1766
1767         .media-modal {
1768                 width: auto;
1769         }
1770
1771         .media-toolbar-primary, .media-toolbar-secondary {
1772                 height: auto;
1773         }
1774
1775         .uploader-inline h3 {
1776                 margin: 0 0 .8em 0;
1777         }
1778
1779         .uploader-inline-content {
1780                 top: auto;
1781         }
1782
1783         .uploader-inline-content .upload-ui {
1784                 margin: 0;
1785         }
1786
1787         .attachments-browser .attachments, .attachments-browser .uploader-inline {
1788                 position: relative;
1789                 margin-left: 180px;
1790         }
1791
1792         /* Full-bleed modal */
1793         .media-modal {
1794                 position: fixed;
1795                 top: 0;
1796                 right: 0;
1797                 left: 0;
1798                 bottom: 0;
1799         }
1800
1801         .media-modal-backdrop {
1802                 position: fixed;
1803         }
1804
1805         .attachments-browser .attachment,
1806         .attachments-browser .attachment-preview {
1807                 max-width: 100%;
1808         }
1809
1810         .attachments-browser .media-toolbar-primary input.search {
1811                 max-width: 150px;
1812         }
1813
1814         .uploader-inline-content {
1815                 position: relative;
1816         }
1817
1818         .media-sidebar .setting input[type="checkbox"],
1819         .media-sidebar .field input[type="checkbox"] {
1820                 width: 25px;
1821         }
1822
1823         /* Image From Link */
1824         .embed-link-settings,
1825         .embed-image-settings {
1826                 padding-bottom: 52px;
1827         }
1828
1829         /* Gallery */
1830         .media-frame.hide-router .media-frame-content {
1831                 top: 73px;
1832                 border-top: none;
1833         }
1834
1835         .gallery-settings h3 {
1836                 margin-top: 45px;
1837         }
1838
1839 }
1840
1841 /* Landscape specific header override */
1842 @media screen and (max-height: 400px) {
1843         .media-menu {
1844                 padding: 0 10px 0 0;
1845         }
1846
1847         .media-menu a {
1848                 float: right;
1849                 width: 21%;
1850                 white-space: nowrap;
1851                 text-overflow: ellipsis;
1852                 overflow: hidden;
1853                 padding: 10px inherit;
1854         }
1855
1856         .media-menu a:nth-child(2),
1857         .media-menu a:last-child {
1858                 width: 21%;
1859         }
1860
1861         .media-modal-close {
1862                 top: 2px;
1863         }
1864
1865         .media-frame-router {
1866                 top: 44px;
1867         }
1868
1869         .media-frame-content {
1870                 top: 78px;
1871         }
1872
1873         .attachments-browser .attachments {
1874                 top: 2px;
1875         }
1876
1877         /* Prevent unnecessary scrolling on title input */
1878         .embed-link-settings {
1879                 overflow: visible;
1880         }
1881 }
1882
1883 @media only screen and (max-width: 680px) {
1884         .media-frame-content .media-toolbar .search,
1885         .media-frame-content .media-toolbar .attachment-filters {
1886                 max-width: 85px;
1887         }
1888 }
1889
1890 /**
1891  * HiDPI Displays
1892  */
1893 @media print,
1894   (-o-min-device-pixel-ratio: 5/4),
1895   (-webkit-min-device-pixel-ratio: 1.25),
1896   (min-resolution: 120dpi) {
1897
1898         .media-modal-icon {
1899                 background-image: url(../images/uploader-icons-2x.png);
1900                 background-size: 134px 15px;
1901         }
1902
1903         .media-frame .spinner {
1904                 background-image: url('../images/spinner-2x.gif');
1905         }
1906 }