sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

git-svn-id: https://develop.svn.wordpress.org/trunk@22887 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith 2012-11-28 01:51:15 +00:00
parent c5c74b7a39
commit 2422ab4b83
1 changed files with 100 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
wp-includes/css/media-views.css
View File

@ -15,7 +15,6 @@
.media-frame select,
.wp-admin .media-frame select {
height: 28px;
line-height: 28px;
margin-top: 3px;
}
@ -464,6 +463,7 @@ a.media-modal-close {
font-size: 13px;
color: #464646;
font-family: sans-serif;
-webkit-appearance: none;
}
.media-toolbar-secondary .search {
@ -1335,3 +1335,102 @@ a.media-modal-close {
max-width: 400px;
margin: 1px 0;
}
/**
* Responsive layout
*/
@media only screen and (max-width: 900px) {
.media-modal {
bottom: 30px;
left: 30px;
right: 30px;
top: 50px;
}
.media-menu {
width: 119px;
}
.media-menu li {
padding: 4px 10px;
}
.media-frame .region-content,
.media-frame-toolbar > .media-toolbar {
left: 120px;
}
.media-sidebar {
width: 147px;
}
.attachments-browser .attachments,
.attachments-browser .media-toolbar {
right: 180px;
}
.media-sidebar .setting {
width: 125px;
}
.media-sidebar .setting input,
.media-sidebar .setting textarea,
.media-sidebar .setting span,
.compat-item label span {
float: none;
}
.media-sidebar .setting span,
.compat-item label span {
text-align: inherit;
display: inline-block;
min-height: 16px;
padding: 8px 2px 0;
width: 95%;
}
.media-sidebar .setting input,
.media-sidebar .setting textarea,
.media-sidebar .setting select {
width: 100%;
max-width: none;
}
.media-sidebar .setting select.columns {
width: auto;
}
.media-frame-content .media-toolbar-primary,
.media-frame-content .media-toolbar-secondary {
display: inline;
float: none;
}
.media-frame-content .media-toolbar-primary .search,
.media-frame-content .media-toolbar-secondary select {
max-width: 45%;
}
.media-frame input,
.media-frame textarea,
.media-frame .search {
padding: 3px 6px;
}
.media-frame-content .attachment .icon {
top: 40%;
}
}
/* Use the same min-width as in the admin */
@media only screen and (max-width: 600px) {
.media-modal {
width: 540px;
position: absolute;
}
.media-modal-backdrop {
width: 600px;
position: absolute;
}
}