WordPress.org

Make WordPress Core

Changeset 22887


Ignore:
Timestamp:
11/28/2012 01:51:15 AM (5 years 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.