WordPress.org

Make WordPress Core

Changeset 22887


Ignore:
Timestamp:
11/28/12 01:51:15 (17 months ago)
Author:
koopersmith
Message:

Responsive CSS for the media modal. props azaozz. see #22615, #21390.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/css/media-views.css

    r22886 r22887  
    1616.media-frame select, 
    1717.wp-admin .media-frame select { 
    18     height: 28px; 
    1918    line-height: 28px; 
    2019    margin-top: 3px; 
     
    465464    color: #464646; 
    466465    font-family: sans-serif; 
     466    -webkit-appearance: none; 
    467467} 
    468468 
     
    13361336    margin: 1px 0; 
    13371337} 
     1338 
     1339/** 
     1340 * Responsive layout 
     1341 */ 
     1342@media only screen and (max-width: 900px) { 
     1343    .media-modal { 
     1344        bottom: 30px; 
     1345        left: 30px; 
     1346        right: 30px; 
     1347        top: 50px; 
     1348    } 
     1349 
     1350    .media-menu { 
     1351        width: 119px; 
     1352    } 
     1353 
     1354    .media-menu li { 
     1355        padding: 4px 10px; 
     1356    } 
     1357 
     1358    .media-frame .region-content, 
     1359    .media-frame-toolbar > .media-toolbar { 
     1360        left: 120px; 
     1361    } 
     1362 
     1363    .media-sidebar { 
     1364        width: 147px; 
     1365    } 
     1366 
     1367    .attachments-browser .attachments, 
     1368    .attachments-browser .media-toolbar { 
     1369        right: 180px; 
     1370    } 
     1371 
     1372    .media-sidebar .setting { 
     1373        width: 125px; 
     1374    } 
     1375 
     1376    .media-sidebar .setting input, 
     1377    .media-sidebar .setting textarea, 
     1378    .media-sidebar .setting span, 
     1379    .compat-item label span { 
     1380        float: none; 
     1381    } 
     1382 
     1383    .media-sidebar .setting span, 
     1384    .compat-item label span { 
     1385        text-align: inherit; 
     1386        display: inline-block; 
     1387        min-height: 16px; 
     1388        padding: 8px 2px 0; 
     1389        width: 95%; 
     1390    } 
     1391 
     1392    .media-sidebar .setting input, 
     1393    .media-sidebar .setting textarea, 
     1394    .media-sidebar .setting select { 
     1395        width: 100%; 
     1396        max-width: none; 
     1397    } 
     1398 
     1399    .media-sidebar .setting select.columns { 
     1400        width: auto; 
     1401    } 
     1402 
     1403    .media-frame-content .media-toolbar-primary, 
     1404    .media-frame-content .media-toolbar-secondary { 
     1405        display: inline; 
     1406        float: none; 
     1407    } 
     1408 
     1409    .media-frame-content .media-toolbar-primary .search, 
     1410    .media-frame-content .media-toolbar-secondary select { 
     1411        max-width: 45%; 
     1412    } 
     1413 
     1414    .media-frame input, 
     1415    .media-frame textarea, 
     1416    .media-frame .search { 
     1417        padding: 3px 6px; 
     1418    } 
     1419 
     1420    .media-frame-content .attachment .icon { 
     1421        top: 40%; 
     1422    } 
     1423} 
     1424 
     1425/* Use the same min-width as in the admin */ 
     1426@media only screen and (max-width: 600px) { 
     1427    .media-modal { 
     1428        width: 540px; 
     1429        position: absolute; 
     1430    } 
     1431 
     1432    .media-modal-backdrop { 
     1433        width: 600px; 
     1434        position: absolute; 
     1435    } 
     1436} 
Note: See TracChangeset for help on using the changeset viewer.