WordPress.org
Get WordPress

Make WordPress Core

Changeset 29598


Ignore:
Timestamp:
08/25/2014 04:50:36 PM (12 years ago)
Author:
helen
Message:

Media Grid: Move CSS into an admin-only file.

media-views.css can be loaded on the front, which does not need this extra CSS.

fixes #29340.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/media.css

    r29355 r29598  
    433433}
    434434
     435/**
     436 * Media Library grid view
     437 */
     438
     439.media-frame.mode-grid,
     440.media-frame.mode-grid .media-frame-content,
     441.media-frame.mode-grid .attachments-browser .attachments,
     442.media-frame.mode-grid .uploader-inline-content {
     443        position: static;
     444}
     445
     446/* Regions we don't use at all */
     447.media-frame.mode-grid .media-frame-title,
     448.media-frame.mode-grid .media-frame-router,
     449.media-frame.mode-grid .media-frame-menu {
     450        display: none;
     451}
     452
     453.media-frame.mode-grid .media-frame-content {
     454        background-color: transparent;
     455        border: none;
     456}
     457
     458.upload-php .mode-grid .media-sidebar {
     459        z-index: 1900;
     460        top: 102px;
     461        bottom: auto;
     462        background: #fff;
     463        border-left: none;
     464        padding: 16px;
     465        -webkit-box-shadow: -1px 0 1px rgba(0,0,0,.3);
     466        box-shadow: -1px 0 1px rgba(0,0,0,.3);
     467}
     468
     469.upload-php .mode-grid .hide-sidebar .media-sidebar {
     470        display: none;
     471}
     472
     473.upload-php .mode-grid .media-sidebar .media-uploader-status {
     474        border-bottom: none;
     475        padding-bottom: 0;
     476}
     477
     478.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
     479        font-size: 0;
     480        top: -20px;
     481        right:  -14px;
     482}
     483
     484.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
     485        content: "\f158";
     486        font: normal 20px/1 dashicons;
     487        color: #666;
     488}
     489
     490.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
     491.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
     492        color: #2ea2cc;
     493}
     494
     495.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 {
     496        display: none;
     497}
     498
     499.media-frame.mode-grid .uploader-inline {
     500        position: relative;
     501        top: auto;
     502        right: auto;
     503        left: auto;
     504        bottom: auto;
     505        padding-top: 0;
     506        margin-top: 0;
     507        border: 4px dashed #bbb;
     508}
     509
     510.media-frame.mode-grid .media-toolbar select {
     511        margin-top: 1px;
     512        font-size: inherit;
     513}
     514
     515.media-frame.mode-grid .attachments-browser .bulk-select {
     516        display: inline-block;
     517        margin: 0 10px 0 0;
     518}
     519
     520.media-frame.mode-grid .attachments,
     521.media-frame.mode-select .attachments {
     522        padding: 2px;
     523}
     524
     525.media-frame.mode-select .attachments-browser.fixed .attachments {
     526        position: relative;
     527        top: 80px; /* prevent jumping up when the toolbar becomes fixed */
     528        padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */
     529}
     530
     531.media-frame.mode-grid .attachment:focus {
     532        -webkit-box-shadow:
     533                inset 0 0 0 5px #f1f1f1,
     534                inset 0 0 1px 7px #5b9dd9;
     535        box-shadow:
     536                inset 0 0 0 5px #f1f1f1,
     537                inset 0 0 1px 7px #5b9dd9;
     538}
     539
     540.media-frame.mode-grid .selected.attachment {
     541        -webkit-box-shadow:
     542                inset 0 0 0 5px #f1f1f1,
     543                inset 0 0 0 7px #ccc;
     544        box-shadow:
     545                inset 0 0 0 5px #f1f1f1,
     546                inset 0 0 0 7px #ccc;
     547}
     548
     549.media-frame.mode-grid .selected.attachment:focus {
     550        -webkit-box-shadow:
     551                inset 0 0 0 3px #f1f1f1,
     552                inset 0 0 0 7px #1e8cbe;
     553        box-shadow:
     554                inset 0 0 0 3px #f1f1f1,
     555                inset 0 0 0 7px #1e8cbe;
     556}
     557
     558.media-frame.mode-grid.mode-select .attachment .thumbnail {
     559        opacity: 0.65;
     560}
     561
     562.media-frame.mode-select .attachment.selected .thumbnail {
     563        opacity: 1;
     564}
     565
     566/**
     567 * Copied styles from the Add theme toolbar.
     568 *
     569 * This should be OOCSS'd so both use a shared selector.
     570 */
     571.media-frame.mode-grid .attachments-browser .media-toolbar {
     572        background: #fff;
     573        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     574        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     575        -webkit-box-sizing: border-box;
     576        -moz-box-sizing: border-box;
     577        box-sizing: border-box;
     578        color: #555;
     579        display: inline-block;
     580        font-size: 13px;
     581        margin: 20px 0;
     582        padding: 0 20px;
     583        position: relative;
     584        width: 100%;
     585        height: auto;
     586        border: none;
     587}
     588
     589.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
     590        position: fixed;
     591        top: 32px;
     592        left: auto;
     593        right: 20px;
     594        margin-top: 0;
     595}
     596
     597.media-frame.mode-grid input[type="search"] {
     598        margin: 1px;
     599        padding: 3px 5px;
     600        position: absolute;
     601        right: 10px;
     602        top: 9px;
     603        font-size: 16px;
     604        font-weight: 300;
     605        line-height: 1.5;
     606        width: 280px;
     607}
     608
     609.media-frame.mode-grid .view-switch {
     610        display: inline-block;
     611        float: none;
     612        vertical-align: middle;
     613        padding: 15px 0;
     614        margin: 0 20px 0 0;
     615}
     616
     617.media-frame.mode-grid select {
     618        margin: 0 10px 0 0;
     619}
     620
     621.media-frame.mode-grid .spinner {
     622        margin-top: 15px;
     623}
     624
     625.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button {
     626        margin-right: 10px;
     627}
     628
     629.media-frame.mode-grid .attachments-browser {
     630        padding: 0;
     631}
     632
     633.media-frame.mode-grid .attachments-browser .no-media {
     634        color: #999;
     635        font-size: 18px;
     636        font-style: normal;
     637        margin: 0;
     638        padding: 100px 0 0;
     639        text-align: center;
     640}
     641
     642/**
     643 * Attachment details modal
     644 */
     645
     646.edit-attachment-frame {
     647        display: block;
     648        height: 100%;
     649        width: 100%;
     650}
     651
     652.edit-attachment-frame .edit-media-header {
     653        overflow: hidden;
     654}
     655
     656.upload-php .media-modal-close .media-modal-icon:before {
     657        content: '\f335';
     658        font-size: 22px;
     659}
     660
     661.upload-php .media-modal-close .media-modal-icon {
     662        margin: 14px;
     663        width: 22px;
     664}
     665
     666.upload-php .media-modal-close,
     667.edit-attachment-frame .edit-media-header .left,
     668.edit-attachment-frame .edit-media-header .right {
     669        cursor: pointer;
     670        color: #777;
     671        background-color: transparent;
     672        height: 50px;
     673        width: 50px;
     674        padding: 0;
     675        position: absolute;
     676        text-align: center;
     677        border: 0;
     678        border-left: 1px solid #ddd;
     679        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
     680    transition: color .1s ease-in-out, background .1s ease-in-out;
     681}
     682
     683.upload-php .media-modal-close {
     684        top: 0;
     685        right: 0;
     686}
     687
     688.edit-attachment-frame .edit-media-header .left {
     689        right: 102px;
     690}
     691
     692.edit-attachment-frame .edit-media-header .right {
     693        right: 51px;
     694}
     695
     696.edit-attachment-frame .media-frame-title {
     697        left: 0;
     698        right: 150px; /* leave space for prev/next/close */
     699}
     700
     701.edit-attachment-frame .edit-media-header .right:before,
     702.edit-attachment-frame .edit-media-header .left:before {
     703        font: normal 20px/50px 'dashicons' !important;
     704        display: inline;
     705        font-weight: 300;
     706}
     707
     708.edit-attachment-frame .edit-media-header .left:hover,
     709.edit-attachment-frame .edit-media-header .right:hover,
     710.edit-attachment-frame .edit-media-header .left:focus,
     711.edit-attachment-frame .edit-media-header .right:focus {
     712        color: #2ea2cc;
     713}
     714
     715.edit-attachment-frame .edit-media-header .left:before,
     716.rtl .edit-attachment-frame .edit-media-header .right:before {
     717        content: '\f341';
     718}
     719
     720.edit-attachment-frame .edit-media-header .right:before,
     721.rtl .edit-attachment-frame .edit-media-header .left:before {
     722        content: '\f345';
     723}
     724
     725.edit-attachment-frame .edit-media-header .left.disabled,
     726.edit-attachment-frame .edit-media-header .right.disabled,
     727.edit-attachment-frame .edit-media-header .left.disabled:hover,
     728.edit-attachment-frame .edit-media-header .right.disabled:hover {
     729        color: #ccc;
     730        background: inherit;
     731        cursor: default;
     732}
     733
     734.edit-attachment-frame .media-frame-content,
     735.edit-attachment-frame .media-frame-router {
     736        left: 0;
     737}
     738
     739.edit-attachment-frame .media-frame-content {
     740        border-bottom: none;
     741        bottom: 0;
     742        top: 50px;
     743}
     744
     745.edit-attachment-frame .attachment-details {
     746        position: absolute;
     747        overflow: auto;
     748        top: 0;
     749        bottom: 0;
     750        right: 0;
     751        left: 0;
     752        -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
     753        box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
     754}
     755
     756.edit-attachment-frame .attachment-media-view {
     757        float: left;
     758        width: 65%;
     759        height: 100%;
     760}
     761
     762.edit-attachment-frame .attachment-media-view .thumbnail {
     763        -webkit-box-sizing: border-box;
     764        -moz-box-sizing: border-box;
     765        box-sizing: border-box;
     766        padding: 16px;
     767        height: 100%;
     768}
     769
     770.edit-attachment-frame .attachment-media-view .details-image {
     771        display: block;
     772        margin-bottom: 16px;
     773        max-width: 100%;
     774        max-height: 90%;
     775        max-height: -webkit-calc( 100% - 42px );
     776        max-height: calc( 100% - 42px ); /* leave space for actions underneath */
     777}
     778
     779.edit-attachment-frame .wp-media-wrapper {
     780        margin-bottom: 12px;
     781}
     782
     783.edit-attachment-frame input,
     784.edit-attachment-frame textarea {
     785        padding: 6px 8px;
     786        line-height: 16px;
     787}
     788
     789.edit-attachment-frame .attachment-info {
     790        overflow: auto;
     791        -webkit-box-sizing: border-box;
     792        -moz-box-sizing: border-box;
     793        box-sizing: border-box;
     794        margin-bottom: 0;
     795        padding: 12px 16px 0;
     796        width: 35%;
     797        height: 100%;
     798        -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
     799        box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
     800        border-bottom: 0;
     801        border-left: 1px solid #ddd;
     802        background: #f3f3f3;
     803}
     804
     805.edit-attachment-frame .attachment-info .details,
     806.edit-attachment-frame .attachment-info .settings {
     807        overflow: hidden;
     808        float: none;
     809        margin-bottom: 15px;
     810        padding-bottom: 15px;
     811        border-bottom: 1px solid #ddd;
     812}
     813
     814.edit-attachment-frame .attachment-info .filename {
     815        font-weight: normal;
     816        color: #666;
     817}
     818
     819.edit-attachment-frame .attachment-info .thumbnail {
     820        margin-bottom: 12px;
     821}
     822
     823.attachment-info .actions {
     824        margin-bottom: 16px;
     825}
     826
     827.attachment-info .actions a {
     828        display: inline;
     829        text-decoration: none;
     830}
     831
    435832
    436833/*------------------------------------------------------------------------------
    … …  
    7371134        }
    7381135}
     1136
     1137/**
     1138 * Media queries for media grid.
     1139 */
     1140
     1141@media only screen and (max-width: 1120px) {
     1142        .media-frame.mode-grid .attachments-browser .media-toolbar-primary,
     1143        .media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
     1144                float: none;
     1145        }
     1146
     1147        .media-frame.mode-grid input[type="search"] {
     1148                margin: 20px 0;
     1149                position: static;
     1150                width: 100%;
     1151                max-width: 280px;
     1152        }
     1153}
     1154
     1155@media only screen and ( max-width: 782px ) {
     1156        .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
     1157                top: 46px;
     1158                right: 10px;
     1159        }
     1160}
     1161
     1162@media only screen and (max-width: 600px) {
     1163        .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
     1164                top: 0;
     1165        }
     1166}
     1167
     1168@media only screen and (max-width: 480px) {
     1169        .edit-attachment-frame .attachment-media-view {
     1170                float: none;
     1171                max-height: 70%;
     1172                height: auto;
     1173                width: 100%;
     1174        }
     1175
     1176        .edit-attachment-frame .attachment-media-view.portrait {
     1177                height: 70%;
     1178        }
     1179
     1180        .edit-attachment-frame .attachment-info {
     1181                height: auto;
     1182                width: 100%;
     1183        }
     1184}

  • trunk/src/wp-includes/css/media-views.css

    r29579 r29598  
    254254        overflow: auto;
    255255        -webkit-overflow-scrolling: touch;
    256 }
    257 
    258 .upload-php .mode-grid .media-sidebar {
    259         z-index: 1900;
    260         top: 102px;
    261         bottom: auto;
    262         background: #fff;
    263         border-left: none;
    264         padding: 16px;
    265         -webkit-box-shadow: -1px 0 1px rgba(0,0,0,.3);
    266         box-shadow: -1px 0 1px rgba(0,0,0,.3);
    267 }
    268 
    269 .upload-php .mode-grid .hide-sidebar .media-sidebar {
    270         display: none;
    271 }
    272 
    273 .upload-php .mode-grid .media-sidebar .media-uploader-status {
    274         border-bottom: none;
    275         padding-bottom: 0;
    276 }
    277 
    278 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
    279         font-size: 0;
    280         top: -20px;
    281         right:  -14px;
    282 }
    283 
    284 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
    285         content: "\f158";
    286         font: normal 20px/1 dashicons;
    287         color: #666;
    288 }
    289 
    290 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
    291 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
    292         color: #2ea2cc;
    293 }
    294 
    295 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 {
    296         display: none;
    297256}
    298257
    … …  
    815774}
    816775
    817 .media-frame.mode-grid .attachment:focus {
    818         -webkit-box-shadow:
    819                 inset 0 0 0 5px #f1f1f1,
    820                 inset 0 0 1px 7px #5b9dd9;
    821         box-shadow:
    822                 inset 0 0 0 5px #f1f1f1,
    823                 inset 0 0 1px 7px #5b9dd9;
    824 }
    825 
    826776.selected.attachment {
    827777        -webkit-box-shadow:
    … …  
    830780        box-shadow:
    831781                inset 0 0 0 5px #fff,
    832                 inset 0 0 0 7px #ccc;
    833 }
    834 
    835 .media-frame.mode-grid .selected.attachment {
    836         -webkit-box-shadow:
    837                 inset 0 0 0 5px #f1f1f1,
    838                 inset 0 0 0 7px #ccc;
    839         box-shadow:
    840                 inset 0 0 0 5px #f1f1f1,
    841782                inset 0 0 0 7px #ccc;
    842783}
    … …  
    875816        -webkit-transition: opacity .1s;
    876817        transition: opacity .1s;
    877 }
    878 
    879 .media-frame.mode-grid.mode-select .attachment .thumbnail {
    880         opacity: 0.65;
    881 }
    882 
    883 .media-frame.mode-select .attachment.selected .thumbnail {
    884         opacity: 1;
    885818}
    886819
    … …  
    1034967}
    1035968
    1036 .media-frame.mode-grid .selected.attachment:focus {
    1037         -webkit-box-shadow:
    1038                 inset 0 0 0 3px #f1f1f1,
    1039                 inset 0 0 0 7px #1e8cbe;
    1040         box-shadow:
    1041                 inset 0 0 0 3px #f1f1f1,
    1042                 inset 0 0 0 7px #1e8cbe;
    1043 }
    1044 
    1045969.attachment.details .check,
    1046970.attachment.selected .check:focus,
    … …  
    11121036        overflow: auto;
    11131037        outline: none;
    1114 }
    1115 
    1116 .media-frame.mode-grid .uploader-inline {
    1117         border: 4px dashed #bbb;
    11181038}
    11191039
    … …  
    16181538}
    16191539
    1620 .edit-attachment-frame .attachment-info .filename {
    1621         font-weight: normal;
    1622         color: #666;
    1623 }
    1624 
    16251540.attachment-info .thumbnail {
    16261541        position: relative;
    … …  
    16311546        margin-right: 10px;
    16321547        margin-bottom: 5px;
    1633 }
    1634 
    1635 .edit-attachment-frame .attachment-info .thumbnail {
    1636         margin-bottom: 12px;
    16371548}
    16381549
    … …  
    25672478}
    25682479
    2569 
    2570 /**
    2571  * Media Grid
    2572  */
    2573 .media-frame.mode-grid,
    2574 .media-frame.mode-grid .media-frame-content,
    2575 .media-frame.mode-grid .attachments-browser .attachments,
    2576 .media-frame.mode-grid .uploader-inline-content {
    2577         position: static;
    2578 }
    2579 
    2580 /* Regions we don't use at all */
    2581 .media-frame.mode-grid .media-frame-title,
    2582 .media-frame.mode-grid .media-frame-router,
    2583 .media-frame.mode-grid .media-frame-menu {
    2584         display: none;
    2585 }
    2586 
    2587 .media-frame.mode-grid .media-frame-content {
    2588         background-color: transparent;
    2589         border: none;
    2590 }
    2591 
    2592 .media-frame.mode-grid .uploader-inline {
    2593         position: relative;
    2594         top: auto;
    2595         right: auto;
    2596         left: auto;
    2597         bottom: auto;
    2598         padding-top: 0;
    2599         margin-top: 0;
    2600 }
    2601 
    2602 .media-frame.mode-grid .media-toolbar select {
    2603         margin-top: 1px;
    2604         font-size: inherit;
    2605 }
    2606 
    2607 .media-frame.mode-grid .attachments-browser .bulk-select {
    2608         display: inline-block;
    2609         margin: 0 10px 0 0;
    2610 }
    2611 
    2612 .media-frame.mode-grid .attachments {
    2613         padding: 2px;
    2614 }
    2615 
    2616 .media-frame.mode-select .attachments {
    2617         padding: 2px;
    2618 }
    2619 
    2620 .media-frame.mode-select .attachments-browser.fixed .attachments {
    2621         position: relative;
    2622         top: 80px; /* prevent jumping up when the toolbar becomes fixed */
    2623         padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */
    2624 }
    2625 
    2626 /**
    2627  * Copied styles from the Add theme toolbar.
    2628  *
    2629  * This should be OOCSS'd so both use a shared selector.
    2630  */
    2631 .media-frame.mode-grid .attachments-browser .media-toolbar {
    2632         background: #fff;
    2633         -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    2634         box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    2635         -webkit-box-sizing: border-box;
    2636         -moz-box-sizing: border-box;
    2637         box-sizing: border-box;
    2638         color: #555;
    2639         display: inline-block;
    2640         font-size: 13px;
    2641         margin: 20px 0;
    2642         padding: 0 20px;
    2643         position: relative;
    2644         width: 100%;
    2645         height: auto;
    2646         border: none;
    2647 }
    2648 
    2649 .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
    2650         position: fixed;
    2651         top: 32px;
    2652         left: auto;
    2653         right: 20px;
    2654         margin-top: 0;
    2655 }
    2656 
    2657 @media only screen and ( max-width: 782px ) {
    2658         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
    2659                 top: 46px;
    2660                 right: 10px;
    2661         }
    2662 }
    2663 
    2664 @media only screen and (max-width: 600px) {
    2665         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
    2666                 top: 0;
    2667         }
    2668 }
    2669 
    2670 
    2671 .media-frame.mode-grid input[type="search"] {
    2672         margin: 1px;
    2673         padding: 3px 5px;
    2674         position: absolute;
    2675         right: 10px;
    2676         top: 9px;
    2677         font-size: 16px;
    2678         font-weight: 300;
    2679         line-height: 1.5;
    2680         width: 280px;
    2681 }
    2682 
    2683 .media-frame.mode-grid .view-switch {
    2684         display: inline-block;
    2685         float: none;
    2686         vertical-align: middle;
    2687         padding: 15px 0;
    2688         margin: 0 20px 0 0;
    2689 }
    2690 
    2691 .media-frame.mode-grid select {
    2692         margin: 0 10px 0 0;
    2693 }
    2694 
    2695 .media-frame.mode-grid .spinner {
    2696         margin-top: 15px;
    2697 }
    2698 
    2699 .attachments-browser .media-toolbar-secondary > .select-mode-toggle-button {
    2700         margin-right: 10px;
    2701 }
    2702 
    2703 .media-frame.mode-grid .attachments-browser {
    2704         padding: 0;
    2705 }
    2706 
    2707 .media-frame.mode-grid .attachments-browser .no-media {
    2708         color: #999;
    2709         font-size: 18px;
    2710         font-style: normal;
    2711         margin: 0;
    2712         padding: 100px 0 0;
    2713         text-align: center;
    2714 }
    2715 
    2716 /**
    2717  * The left and right buttons are copied from the expanded theme details modal.
    2718  *
    2719  * This should be OOCSS'd so both use a shared selector.
    2720  */
    2721 .edit-attachment-frame {
    2722         display: block;
    2723         height: 100%;
    2724         width: 100%;
    2725 }
    2726 
    2727 .edit-attachment-frame .edit-media-header {
    2728         overflow: hidden;
    2729 }
    2730 
    2731 .upload-php .media-modal-close .media-modal-icon:before {
    2732         content: '\f335';
    2733         font-size: 22px;
    2734 }
    2735 
    2736 .upload-php .media-modal-close .media-modal-icon {
    2737         margin: 14px;
    2738         width: 22px;
    2739 }
    2740 
    2741 .upload-php .media-modal-close,
    2742 .edit-attachment-frame .edit-media-header .left,
    2743 .edit-attachment-frame .edit-media-header .right {
    2744         cursor: pointer;
    2745         color: #777;
    2746         background-color: transparent;
    2747         height: 50px;
    2748         width: 50px;
    2749         padding: 0;
    2750         position: absolute;
    2751         text-align: center;
    2752         border: 0;
    2753         border-left: 1px solid #ddd;
    2754         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    2755     transition: color .1s ease-in-out, background .1s ease-in-out;
    2756 }
    2757 
    2758 .upload-php .media-modal-close {
    2759         top: 0;
    2760         right: 0;
    2761 }
    2762 
    2763 .edit-attachment-frame .edit-media-header .left {
    2764         right: 102px;
    2765 }
    2766 
    2767 .edit-attachment-frame .edit-media-header .right {
    2768         right: 51px;
    2769 }
    2770 
    2771 .edit-attachment-frame .media-frame-title {
    2772         left: 0;
    2773         right: 150px; /* leave space for prev/next/close */
    2774 }
    2775 
    2776 .edit-attachment-frame .edit-media-header .right:before,
    2777 .edit-attachment-frame .edit-media-header .left:before {
    2778         font: normal 20px/50px 'dashicons' !important;
    2779         display: inline;
    2780         font-weight: 300;
    2781 }
    2782 
    2783 .edit-attachment-frame .edit-media-header .left:hover,
    2784 .edit-attachment-frame .edit-media-header .right:hover,
    2785 .edit-attachment-frame .edit-media-header .left:focus,
    2786 .edit-attachment-frame .edit-media-header .right:focus {
    2787         color: #2ea2cc;
    2788 }
    2789 
    2790 .edit-attachment-frame .edit-media-header .left:before,
    2791 .rtl .edit-attachment-frame .edit-media-header .right:before {
    2792         content: '\f341';
    2793 }
    2794 
    2795 .edit-attachment-frame .edit-media-header .right:before,
    2796 .rtl .edit-attachment-frame .edit-media-header .left:before {
    2797         content: '\f345';
    2798 }
    2799 
    2800 .edit-attachment-frame .edit-media-header .left.disabled,
    2801 .edit-attachment-frame .edit-media-header .right.disabled,
    2802 .edit-attachment-frame .edit-media-header .left.disabled:hover,
    2803 .edit-attachment-frame .edit-media-header .right.disabled:hover {
    2804         color: #ccc;
    2805         background: inherit;
    2806         cursor: default;
    2807 }
    2808 
    2809 .edit-attachment-frame .media-frame-content,
    2810 .edit-attachment-frame .media-frame-router {
    2811         left: 0;
    2812 }
    2813 
    2814 .edit-attachment-frame .media-frame-content {
    2815         border-bottom: none;
    2816         bottom: 0;
    2817         top: 50px;
    2818 }
    2819 
    2820 .edit-attachment-frame .attachment-details {
    2821         position: absolute;
    2822         overflow: auto;
    2823         top: 0;
    2824         bottom: 0;
    2825         right: 0;
    2826         left: 0;
    2827         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    2828         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    2829 }
    2830 .edit-attachment-frame .attachment-media-view {
    2831         float: left;
    2832         width: 65%;
    2833         height: 100%;
    2834 }
    2835 
    2836 .edit-attachment-frame .attachment-media-view .thumbnail {
    2837         -webkit-box-sizing: border-box;
    2838         -moz-box-sizing: border-box;
    2839         box-sizing: border-box;
    2840         padding: 16px;
    2841         height: 100%;
    2842 }
    2843 
    2844 .edit-attachment-frame .attachment-media-view .details-image {
    2845         display: block;
    2846         margin-bottom: 16px;
    2847         max-width: 100%;
    2848         max-height: 90%;
    2849         max-height: -webkit-calc( 100% - 42px );
    2850         max-height: calc( 100% - 42px ); /* leave space for actions underneath */
    2851 }
    2852 
    2853 .edit-attachment-frame .wp-media-wrapper {
    2854         margin-bottom: 12px;
    2855 }
    2856 
    2857 .edit-attachment-frame .attachment-info {
    2858         overflow: auto;
    2859         -webkit-box-sizing: border-box;
    2860         -moz-box-sizing: border-box;
    2861         box-sizing: border-box;
    2862         margin-bottom: 0;
    2863         padding: 12px 16px 0;
    2864         width: 35%;
    2865         height: 100%;
    2866         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    2867         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    2868         border-bottom: 0;
    2869         border-left: 1px solid #ddd;
    2870         background: #f3f3f3;
    2871 }
    2872 
    2873 .edit-attachment-frame .attachment-info .details,
    2874 .edit-attachment-frame .attachment-info .settings {
    2875         overflow: hidden;
    2876         float: none;
    2877         margin-bottom: 15px;
    2878         padding-bottom: 15px;
    2879         border-bottom: 1px solid #ddd;
    2880 }
    2881 
    2882 .attachment-info .actions {
    2883         margin-bottom: 16px;
    2884 }
    2885 
    2886 .attachment-info .actions a {
    2887         display: inline;
    2888         text-decoration: none;
    2889 }
    2890 
    2891 .edit-attachment-frame input,
    2892 .edit-attachment-frame textarea {
    2893         padding: 6px 8px;
    2894         line-height: 16px;
    2895 }
    2896 
    2897 /**
    2898  * Media queries for media grid.
    2899  */
    2900 
    2901 @media only screen and (max-width: 1120px) {
    2902         .media-frame.mode-grid .attachments-browser .media-toolbar-primary,
    2903         .media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
    2904                 float: none;
    2905         }
    2906 
    2907         .media-frame.mode-grid input[type="search"] {
    2908                 margin: 20px 0;
    2909                 position: static;
    2910                 width: 100%;
    2911                 max-width: 280px;
    2912         }
    2913 }
    2914 
    2915 @media only screen and (max-width: 480px) {
    2916         .edit-attachment-frame .attachment-media-view {
    2917                 float: none;
    2918                 max-height: 70%;
    2919                 height: auto;
    2920                 width: 100%;
    2921         }
    2922 
    2923         .edit-attachment-frame .attachment-media-view.portrait {
    2924                 height: 70%;
    2925         }
    2926 
    2927         .edit-attachment-frame .attachment-info {
    2928                 height: auto;
    2929                 width: 100%;
    2930         }
    2931 }
    2932 
    29332480.attachments[data-columns="1"] .attachment {
    29342481        width: 100%;
Note: See TracChangeset for help on using the changeset viewer.