Scope attachment selectors in media views to avoid interfering with attachment pages on front-end.

props valendesigns.
fixes #30878.

git-svn-id: https://develop.svn.wordpress.org/trunk@31174 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -761,7 +761,7 @@
 /**
  * Attachments
  */
-.attachments {
+.wp-core-ui .attachments {
 	margin: 0;
 	-webkit-overflow-scrolling: touch;
 }
@@ -769,7 +769,7 @@
 /**
  * Attachment
  */
-.attachment {
+.wp-core-ui .attachment {
 	position: relative;
 	float: left;
 	padding: 8px;
@@ -788,9 +788,9 @@
 	box-sizing: border-box;
 }
 
-.attachment:focus,
-.selected.attachment:focus,
-.attachment.details:focus {
+.wp-core-ui .attachment:focus,
+.wp-core-ui .selected.attachment:focus,
+.wp-core-ui .attachment.details:focus {
 	-webkit-box-shadow:
 		inset 0 0 2px 3px #fff,
 		inset 0 0 0 7px #5b9dd9;
@@ -800,7 +800,7 @@
 	outline: none;
 }
 
-.selected.attachment {
+.wp-core-ui .selected.attachment {
 	-webkit-box-shadow:
 		inset 0 0 0 5px #fff,
 		inset 0 0 0 7px #ccc;
@@ -809,7 +809,7 @@
 		inset 0 0 0 7px #ccc;
 }
 
-.attachment.details {
+.wp-core-ui .attachment.details {
 	-webkit-box-shadow:
 		inset 0 0 0 3px #fff,
 		inset 0 0 0 7px #1e8cbe;
@@ -818,7 +818,7 @@
 		inset 0 0 0 7px #1e8cbe;
 }
 
-.attachment-preview {
+.wp-core-ui .attachment-preview {
 	position: relative;
 	-webkit-box-shadow:
 		inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
@@ -830,18 +830,18 @@
 	cursor: pointer;
 }
 
-.attachment-preview:before {
+.wp-core-ui .attachment-preview:before {
 	content: '';
 	display: block;
 	padding-top: 100%;
 }
 
-.attachment .icon {
+.wp-core-ui .attachment .icon {
 	margin: 0 auto;
 	overflow: hidden;
 }
 
-.attachment .thumbnail {
+.wp-core-ui .attachment .thumbnail {
 	overflow: hidden;
 	position: absolute;
 	top: 0;
@@ -853,15 +853,15 @@
 	transition: opacity .1s;
 }
 
-.attachment .portrait img {
+.wp-core-ui .attachment .portrait img {
 	max-width: 100%;
 }
 
-.attachment .landscape img {
+.wp-core-ui .attachment .landscape img {
 	max-height: 100%;
 }
 
-.attachment .thumbnail:after {
+.wp-core-ui .attachment .thumbnail:after {
 	content: '';
 	display: block;
 	position: absolute;
@@ -875,13 +875,13 @@
 }
 
 /* @noflip */
-.attachment .thumbnail img {
+.wp-core-ui .attachment .thumbnail img {
 	top: 0;
 	left: 0;
 }
 
 /* @noflip */
-.attachment .thumbnail .centered {
+.wp-core-ui .attachment .thumbnail .centered {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -892,24 +892,24 @@
 	transform: translate( 50%, 50% );
 }
 
-.attachment .thumbnail .centered img {
+.wp-core-ui .attachment .thumbnail .centered img {
 	-webkit-transform: translate( -50%, -50% );
 	-ms-transform: translate(-50%,-50%);
 	transform: translate( -50%, -50% );
 }
 
-.attachment .thumbnail .centered img.icon {
+.wp-core-ui .attachment .thumbnail .centered img.icon {
 	-webkit-transform: translate( -50%, -70% );
 	-ms-transform: translate(-50%,-70%);
 	transform: translate( -50%, -70% );
 }
 
-.ie8 .attachment img.icon {
+.ie8 .wp-core-ui .attachment img.icon {
 	top: 20%;
 	position: relative;
 }
 
-.attachment .filename {
+.wp-core-ui .attachment .filename {
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -924,15 +924,15 @@
 	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
 }
 
-.attachment .filename div {
+.wp-core-ui .attachment .filename div {
 	padding: 5px 10px;
 }
 
-.attachment .thumbnail img {
+.wp-core-ui .attachment .thumbnail img {
 	position: absolute;
 }
 
-.attachment .close {
+.wp-core-ui .attachment .close {
 	display: block;
 	position: absolute;
 	top: 5px;
@@ -958,15 +958,15 @@
 	transition-property: none;
 }
 
-.attachment a.close:hover,
-.attachment a.close:focus {
+.wp-core-ui .attachment a.close:hover,
+.wp-core-ui .attachment a.close:focus {
 	-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
 	background-position: -36px 4px;
 
 }
 
-.attachment .check {
+.wp-core-ui .attachment .check {
 	display: none;
 	height: 24px;
 	width: 24px;
@@ -980,24 +980,24 @@
 	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
 }
 
-.attachment .check div {
+.wp-core-ui .attachment .check div {
 	background-position: -1px 0;
 	height: 15px;
 	width: 15px;
 	margin: 5px;
 }
 
-.attachment .check:hover div {
+.wp-core-ui .attachment .check:hover div {
 	background-position: -40px 0;
 }
 
-.attachment.selected .check {
+.wp-core-ui .attachment.selected .check {
 	display: block;
 }
 
-.attachment.details .check,
-.attachment.selected .check:focus,
-.media-frame.mode-grid .attachment.selected .check {
+.wp-core-ui .attachment.details .check,
+.wp-core-ui .attachment.selected .check:focus,
+.wp-core-ui .media-frame.mode-grid .attachment.selected .check {
 	background-color: #1e8cbe;
 	-webkit-box-shadow:
 		0 0 0 1px #fff,
@@ -1007,18 +1007,18 @@
 		0 0 0 2px #1e8cbe;
 }
 
-.attachment.details .check div,
-.media-frame.mode-grid .attachment.selected .check div {
+.wp-core-ui .attachment.details .check div,
+.wp-core-ui .media-frame.mode-grid .attachment.selected .check div {
 	background-position: -21px 0;
 }
 
-.attachment.details .check:hover div,
-.attachment.selected .check:focus div,
-.media-frame.mode-grid .attachment.selected .check:hover div {
+.wp-core-ui .attachment.details .check:hover div,
+.wp-core-ui .attachment.selected .check:focus div,
+.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover div {
 	background-position: -60px 0;
 }
 
-.media-frame .attachment .describe {
+.wp-core-ui .media-frame .attachment .describe {
 	position: relative;
 	display: block;
 	width: 100%;