Responsive and RTL css improvements or the media modal.

Props ocean90, koopersmith
see #22615


git-svn-id: http://core.svn.wordpress.org/trunk@22960 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -293,7 +293,7 @@
 	.media-frame .region-content,
 	.media-frame-toolbar > .media-toolbar {
 		left: 0;
-		right: 120px;
+		right: 140px;
 	}
 
 	.attachments-browser .attachments,

wp-includes/css/media-views.css

@@ -94,7 +94,8 @@
 	z-index: 159900;
 }
 
-.media-modal-backdrop div {
+.media-modal-backdrop div,
+.uploader-window-content {
 	position: absolute;
 	top: 10px;
 	left: 10px;
@@ -103,15 +104,11 @@
 	border: 1px dashed rgba( 255, 255, 255, 0.5 );
 }
 
-.media-modal-title,
-.media-modal-close {
-	position: absolute;
-	height: 40px;
-}
-
 .media-modal-title {
+	position: absolute;
 	top: -40px;
 	left: 0;
+	height: 40px;
 	padding: 0;
 	margin: 0;
 
@@ -123,8 +120,10 @@
 }
 
 .media-modal-close {
+	position: absolute;
 	top: -27px;
 	right: 0;
+	height: 15px;
 	width: 15px;
 	background-position: -80px 0;
 }
@@ -399,10 +398,6 @@
 	border-bottom: 1px solid #fff;
 }
 
-.media-menu > a.button {
-	margin: 0 20px;
-}
-
 /**
  * Frame
  */
@@ -895,12 +890,7 @@
 }
 
 .uploader-window-content {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	right: 10px;
-	bottom: 10px;
-	border: 1px dashed #fff;
+	border-color: #fff;
 }
 
 .uploader-window h3 {
@@ -1354,14 +1344,32 @@
  */
 @media only screen and (max-width: 900px) {
 	.media-modal {
-		bottom: 30px;
-		left: 30px;
-		right: 30px;
-		top: 50px;
+		bottom: 20px;
+		left: 20px;
+		right: 20px;
+		top: 40px;
+	}
+
+	.media-modal-title {
+		height: 30px;
+		line-height: 30px;
+		top: -30px;
+	}
+
+	.media-modal-close {
+		top: -23px;
+	}
+
+	.media-modal-backdrop div,
+	.uploader-window-content {
+		top: 5px;
+		left: 5px;
+		right: 5px;
+		bottom: 5px;
 	}
 
 	.media-menu {
-		width: 119px;
+		width: 139px;
 	}
 
 	.media-menu li {
@@ -1370,11 +1378,12 @@
 
 	.media-frame .region-content,
 	.media-frame-toolbar > .media-toolbar {
-		left: 120px;
+		left: 140px;
 	}
 
 	.media-sidebar {
-		width: 147px;
+		width: 159px;
+		padding: 0 10px 24px;
 	}
 
 	.attachments-browser .attachments,
@@ -1383,10 +1392,6 @@
 		right: 180px;
 	}
 
-	.media-sidebar .setting {
-		width: 125px;
-	}
-
 	.media-sidebar .setting input,
 	.media-sidebar .setting textarea,
 	.media-sidebar .setting span,
@@ -1397,16 +1402,16 @@
 	.media-sidebar .setting span,
 	.compat-item label span {
 		text-align: inherit;
-		display: inline-block;
+		display: block;
 		min-height: 16px;
+		margin: 0;
 		padding: 8px 2px 0;
-		width: 95%;
 	}
 
 	.media-sidebar .setting input,
 	.media-sidebar .setting textarea,
 	.media-sidebar .setting select {
-		width: 100%;
+		width: 98%;
 		max-width: none;
 	}
 
@@ -1434,6 +1439,22 @@
 	.media-frame-content .attachment .icon {
 		top: 40%;
 	}
+
+	.media-selection {
+		min-width: 120px;
+	}
+
+	.media-selection:after {
+		background: none;
+	}
+
+	.media-selection .attachments {
+		display: none;
+	}
+
+	.media-menu .separator {
+		margin: 12px 10px;
+	}
 }
 
 /* Use the same min-width as in the admin */