wp/wp-admin/css/media.css
changeset 7 cf61fcea0001
parent 5 5e2f62d02dcd
child 9 177826044cd9
equal deleted inserted replaced
6:490d5cc509ed 7:cf61fcea0001
     3 ------------------------------------------------------------------------------*/
     3 ------------------------------------------------------------------------------*/
     4 
     4 
     5 .media-item .describe {
     5 .media-item .describe {
     6 	border-collapse: collapse;
     6 	border-collapse: collapse;
     7 	width: 100%;
     7 	width: 100%;
     8 	border-top: 1px solid #dfdfdf;
     8 	border-top: 1px solid #ddd;
     9 	clear: both;
     9 	clear: both;
    10 	cursor: default;
    10 	cursor: default;
    11 }
    11 }
    12 
    12 
    13 .media-item.media-blank .describe {
    13 .media-item.media-blank .describe {
   122 	background: #fff;
   122 	background: #fff;
   123 }
   123 }
   124 
   124 
   125 .media-upload-form .media-item,
   125 .media-upload-form .media-item,
   126 .media-upload-form .media-item .error {
   126 .media-upload-form .media-item .error {
   127 	-webkit-box-shadow: 0 1px 0 #dfdfdf;
   127 	box-shadow: 0 1px 0 #ddd;
   128 	box-shadow: 0 1px 0 #dfdfdf;
       
   129 }
   128 }
   130 
   129 
   131 #media-items:empty {
   130 #media-items:empty {
   132 	border: 0 none;
   131 	border: 0 none;
   133 }
   132 }
   161 	margin: 7px 6px;
   160 	margin: 7px 6px;
   162 	width: 200px;
   161 	width: 200px;
   163 	line-height: 2em;
   162 	line-height: 2em;
   164 	padding: 0;
   163 	padding: 0;
   165 	overflow: hidden;
   164 	overflow: hidden;
   166 	-webkit-border-radius: 22px;
       
   167 	border-radius: 22px;
   165 	border-radius: 22px;
   168 	background: #ddd;
   166 	background: #ddd;
   169 	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
       
   170 	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   167 	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   171 }
   168 }
   172 
   169 
   173 .media-item .bar {
   170 .media-item .bar {
   174 	z-index: 9;
   171 	z-index: 9;
   175 	width: 0;
   172 	width: 0;
   176 	height: 100%;
   173 	height: 100%;
   177 	margin-top: -22px;
   174 	margin-top: -22px;
   178 	-webkit-border-radius: 22px;
       
   179 	border-radius: 22px;
   175 	border-radius: 22px;
   180 	background-color: #0073aa;
   176 	background-color: #0073aa;
   181 	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
       
   182 	box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
   177 	box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
   183 }
   178 }
   184 
   179 
   185 .media-item .progress .percent {
   180 .media-item .progress .percent {
   186 	z-index: 10;
   181 	z-index: 10;
   226   14.1 - Media Library
   221   14.1 - Media Library
   227 ------------------------------------------------------------------------------*/
   222 ------------------------------------------------------------------------------*/
   228 
   223 
   229 .find-box {
   224 .find-box {
   230 	background-color: #fff;
   225 	background-color: #fff;
   231 	-webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
       
   232 	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
   226 	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
   233 	width: 600px;
   227 	width: 600px;
   234 	overflow: hidden;
   228 	overflow: hidden;
   235 	margin-left: -300px;
   229 	margin-left: -300px;
   236 	position: fixed;
   230 	position: fixed;
   240 	z-index: 100105;
   234 	z-index: 100105;
   241 }
   235 }
   242 
   236 
   243 .find-box-head {
   237 .find-box-head {
   244 	background: #fcfcfc;
   238 	background: #fcfcfc;
   245 	border-bottom: 1px solid #dfdfdf;
   239 	border-bottom: 1px solid #ddd;
   246 	height: 36px;
   240 	height: 36px;
   247 	font-size: 18px;
   241 	font-size: 18px;
   248 	font-weight: 600;
   242 	font-weight: 600;
   249 	line-height: 36px;
   243 	line-height: 36px;
   250 	padding: 0 36px 0 16px;
   244 	padding: 0 36px 0 16px;
   261 	position: absolute;
   255 	position: absolute;
   262 	top: 37px;
   256 	top: 37px;
   263 	bottom: 45px;
   257 	bottom: 45px;
   264 	overflow-y: scroll;
   258 	overflow-y: scroll;
   265 	width: 100%;
   259 	width: 100%;
   266 	-webkit-box-sizing: border-box;
       
   267 	-moz-box-sizing: border-box;
       
   268 	box-sizing: border-box;
   260 	box-sizing: border-box;
   269 }
   261 }
   270 
   262 
   271 .find-box-search {
   263 .find-box-search {
   272 	padding-bottom: 16px;
   264 	padding-bottom: 16px;
   300 }
   292 }
   301 
   293 
   302 #find-posts-close {
   294 #find-posts-close {
   303 	width: 36px;
   295 	width: 36px;
   304 	height: 36px;
   296 	height: 36px;
       
   297 	border: none;
       
   298 	padding: 0;
   305 	position: absolute;
   299 	position: absolute;
   306 	top: 0;
   300 	top: 0;
   307 	right: 0;
   301 	right: 0;
   308 	cursor: pointer;
   302 	cursor: pointer;
   309 	text-align: center;
   303 	text-align: center;
       
   304 	background: none;
   310 	color: #666;
   305 	color: #666;
   311 }
   306 }
   312 
   307 
   313 #find-posts-close:hover {
   308 #find-posts-close:hover,
       
   309 #find-posts-close:focus {
   314 	color: #00a0d2;
   310 	color: #00a0d2;
   315 }
   311 }
   316 
   312 
       
   313 #find-posts-close:focus {
       
   314 	outline: none;
       
   315 	box-shadow:
       
   316 		0 0 0 1px #5b9dd9,
       
   317 		0 0 2px 1px rgba(30, 140, 190, .8);
       
   318 }
       
   319 
   317 #find-posts-close:before {
   320 #find-posts-close:before {
   318 	font: normal 20px/36px 'dashicons';
   321 	font: normal 20px/36px dashicons;
   319 	vertical-align: top;
   322 	vertical-align: top;
   320 	speak: none;
   323 	speak: none;
   321 	-webkit-font-smoothing: antialiased;
   324 	-webkit-font-smoothing: antialiased;
   322 	-moz-osx-font-smoothing: grayscale;
   325 	-moz-osx-font-smoothing: grayscale;
   323 	content: '\f158';
   326 	content: "\f158";
   324 }
   327 }
   325 
   328 
   326 .find-box-buttons {
   329 .find-box-buttons {
   327 	padding: 8px 16px;
   330 	padding: 8px 16px;
   328 	background: #fcfcfc;
   331 	background: #fcfcfc;
   329 	border-top: 1px solid #dfdfdf;
   332 	border-top: 1px solid #ddd;
   330 	position: absolute;
   333 	position: absolute;
   331 	bottom: 0;
   334 	bottom: 0;
   332 	left: 0;
   335 	left: 0;
   333 	right: 0;
   336 	right: 0;
   334 }
   337 }
   382 	margin: 5px 0 10px;
   385 	margin: 5px 0 10px;
   383 	padding: 8px;
   386 	padding: 8px;
   384 	border: 1px solid #ddd;
   387 	border: 1px solid #ddd;
   385 	line-height: 1.8em;
   388 	line-height: 1.8em;
   386 	word-spacing: 3px;
   389 	word-spacing: 3px;
   387 	-webkit-border-radius: 6px;
       
   388 	border-radius: 6px;
       
   389 }
   390 }
   390 
   391 
   391 .drag-drop #drag-drop-area {
   392 .drag-drop #drag-drop-area {
   392 	border: 4px dashed #b4b9be;
   393 	border: 4px dashed #b4b9be;
   393 	height: 200px;
   394 	height: 200px;
   455 }
   456 }
   456 
   457 
   457 .upload-php .mode-grid .media-sidebar {
   458 .upload-php .mode-grid .media-sidebar {
   458 	position: relative;
   459 	position: relative;
   459 	width: auto;
   460 	width: auto;
   460 	margin-bottom: 16px;
   461 	margin-top: 12px;
   461 	padding: 0 16px;
   462 	padding: 0 16px;
   462 	border: 1px solid #c00;
   463 	border-left: 4px solid #dd3d36;
   463 	background-color: #feebe8;
   464  	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
       
   465 	background-color: #fff;
   464 }
   466 }
   465 
   467 
   466 .upload-php .mode-grid .hide-sidebar .media-sidebar {
   468 .upload-php .mode-grid .hide-sidebar .media-sidebar {
   467 	display: none;
   469 	display: none;
   468 }
   470 }
   472 	padding-bottom: 0;
   474 	padding-bottom: 0;
   473 	max-width: 100%;
   475 	max-width: 100%;
   474 }
   476 }
   475 
   477 
   476 .upload-php .mode-grid .media-sidebar .upload-error {
   478 .upload-php .mode-grid .media-sidebar .upload-error {
   477 	margin: 20px 0;
   479 	margin: 12px 0;
   478 	padding: 0;
   480 	padding: 4px 0 0;
   479 	border: none;
   481 	border: none;
       
   482 	box-shadow: none;
   480 	background: none;
   483 	background: none;
   481 }
   484 }
   482 
   485 
   483 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
   486 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
   484 	font-size: 0;
   487 	top: -10px;
   485 	top: -12px;
   488 	right: -14px;
   486 	right: -10px;
   489 	padding: 10px;
   487 }
   490 }
   488 
   491 
   489 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
   492 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
   490 	content: "\f158";
   493 	content: "\f153";
   491 	font: normal 20px/1 dashicons;
   494 	display: block;
   492 	color: #666;
   495 	font: normal 16px/1 dashicons;
       
   496 	color: #72777c;
   493 }
   497 }
   494 
   498 
   495 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
   499 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
   496 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
   500 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
   497 	color: #00a0d2;
   501 	color: #c00;
   498 }
   502 }
   499 
   503 
   500 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 {
   504 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
       
   505 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
   501 	display: none;
   506 	display: none;
   502 }
   507 }
   503 
   508 
   504 .media-frame.mode-grid .uploader-inline {
   509 .media-frame.mode-grid .uploader-inline {
   505 	position: relative;
   510 	position: relative;
   506 	top: auto;
   511 	top: auto;
   507 	right: auto;
   512 	right: auto;
   508 	left: auto;
   513 	left: auto;
   509 	bottom: auto;
   514 	bottom: auto;
   510 	padding-top: 0;
   515 	padding-top: 0;
   511 	margin-top: 0;
   516 	margin-top: 20px;
   512 	border: 4px dashed #b4b9be;
   517 	border: 4px dashed #b4b9be;
   513 }
   518 }
   514 
   519 
   515 .media-frame.mode-select .attachments-browser.fixed .attachments {
   520 .media-frame.mode-select .attachments-browser.fixed .attachments {
   516 	position: relative;
   521 	position: relative;
   519 }
   524 }
   520 
   525 
   521 .media-frame.mode-grid .attachment:focus,
   526 .media-frame.mode-grid .attachment:focus,
   522 .media-frame.mode-grid .selected.attachment:focus,
   527 .media-frame.mode-grid .selected.attachment:focus,
   523 .media-frame.mode-grid .attachment.details:focus {
   528 .media-frame.mode-grid .attachment.details:focus {
   524 	-webkit-box-shadow:
       
   525 		inset 0 0 2px 3px #f1f1f1,
       
   526 		inset 0 0 0 7px #5b9dd9;
       
   527 	box-shadow:
   529 	box-shadow:
   528 		inset 0 0 2px 3px #f1f1f1,
   530 		inset 0 0 2px 3px #f1f1f1,
   529 		inset 0 0 0 7px #5b9dd9;
   531 		inset 0 0 0 7px #5b9dd9;
   530 	outline: none;
   532 	outline: none;
   531 }
   533 }
   532 
   534 
   533 .media-frame.mode-grid .selected.attachment {
   535 .media-frame.mode-grid .selected.attachment {
   534 	-webkit-box-shadow:
       
   535 		inset 0 0 0 5px #f1f1f1,
       
   536 		inset 0 0 0 7px #ccc;
       
   537 	box-shadow:
   536 	box-shadow:
   538 		inset 0 0 0 5px #f1f1f1,
   537 		inset 0 0 0 5px #f1f1f1,
   539 		inset 0 0 0 7px #ccc;
   538 		inset 0 0 0 7px #ccc;
   540 }
   539 }
   541 
   540 
   542 .media-frame.mode-grid .attachment.details {
   541 .media-frame.mode-grid .attachment.details {
   543 	-webkit-box-shadow:
       
   544 		inset 0 0 0 3px #f1f1f1,
       
   545 		inset 0 0 0 7px #1e8cbe;
       
   546 	box-shadow:
   542 	box-shadow:
   547 		inset 0 0 0 3px #f1f1f1,
   543 		inset 0 0 0 3px #f1f1f1,
   548 		inset 0 0 0 7px #1e8cbe;
   544 		inset 0 0 0 7px #1e8cbe;
   549 }
   545 }
   550 
   546 
   564 .media-frame.mode-grid .media-toolbar select {
   560 .media-frame.mode-grid .media-toolbar select {
   565 	margin: 0 10px 0 0;
   561 	margin: 0 10px 0 0;
   566 	font-size: 14px;
   562 	font-size: 14px;
   567 }
   563 }
   568 
   564 
   569 .media-frame.mode-grid .media-toolbar-secondary > .media-button {
   565 .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
   570 	margin-top: 10px;
   566 	margin: 0 8px 0 0;
   571 	margin-bottom: 10px;
   567 	vertical-align: middle;
   572 }
   568 }
   573 
   569 
   574 .media-frame.mode-grid .attachments-browser .bulk-select {
   570 .media-frame.mode-grid .attachments-browser .bulk-select {
   575 	display: inline-block;
   571 	display: inline-block;
   576 	margin: 0 10px 0 0;
   572 	margin: 0 10px 0 0;
   579 .media-frame.mode-grid .search {
   575 .media-frame.mode-grid .search {
   580 	margin-top: 0;
   576 	margin-top: 0;
   581 }
   577 }
   582 
   578 
   583 .media-frame.mode-grid .spinner {
   579 .media-frame.mode-grid .spinner {
   584 	margin-top: 15px;
   580 	margin-top: 16px;
   585 }
   581 }
   586 
   582 
   587 .attachments-browser .media-toolbar-secondary > .media-button {
   583 .attachments-browser .media-toolbar-secondary > .media-button {
   588 	margin-right: 10px;
   584 	margin-right: 10px;
   589 }
   585 }
   603 .media-frame.mode-grid .attachments-browser .attachments {
   599 .media-frame.mode-grid .attachments-browser .attachments {
   604 	padding: 2px;
   600 	padding: 2px;
   605 }
   601 }
   606 
   602 
   607 .media-frame.mode-grid .attachments-browser .no-media {
   603 .media-frame.mode-grid .attachments-browser .no-media {
   608 	color: #999;
   604 	color: #666; /* same as no plugins and no themes */
   609 	font-size: 18px;
   605 	font-size: 18px;
   610 	font-style: normal;
   606 	font-style: normal;
   611 	margin: 0;
   607 	margin: 0;
   612 	padding: 100px 0 0;
   608 	padding: 100px 0 0;
   613 	text-align: center;
   609 	text-align: center;
   626 .edit-attachment-frame .edit-media-header {
   622 .edit-attachment-frame .edit-media-header {
   627 	overflow: hidden;
   623 	overflow: hidden;
   628 }
   624 }
   629 
   625 
   630 .upload-php .media-modal-close .media-modal-icon:before {
   626 .upload-php .media-modal-close .media-modal-icon:before {
   631 	content: '\f335';
   627 	content: "\f335";
   632 	font-size: 22px;
   628 	font-size: 22px;
   633 }
       
   634 
       
   635 .upload-php .media-modal-close .media-modal-icon {
       
   636 	margin: 14px;
       
   637 	width: 22px;
       
   638 }
   629 }
   639 
   630 
   640 .upload-php .media-modal-close,
   631 .upload-php .media-modal-close,
   641 .edit-attachment-frame .edit-media-header .left,
   632 .edit-attachment-frame .edit-media-header .left,
   642 .edit-attachment-frame .edit-media-header .right {
   633 .edit-attachment-frame .edit-media-header .right {
   643 	cursor: pointer;
   634 	cursor: pointer;
   644 	color: #777;
   635 	color: #72777c;
   645 	background-color: transparent;
   636 	background-color: transparent;
   646 	height: 50px;
   637 	height: 50px;
   647 	width: 50px;
   638 	width: 50px;
   648 	padding: 0;
   639 	padding: 0;
   649 	position: absolute;
   640 	position: absolute;
   650 	text-align: center;
   641 	text-align: center;
   651 	border: 0;
   642 	border: 0;
   652 	border-left: 1px solid #ddd;
   643 	border-left: 1px solid #ddd;
   653 	-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
   644 	transition: color .1s ease-in-out, background .1s ease-in-out;
   654     transition: color .1s ease-in-out, background .1s ease-in-out;
       
   655 }
   645 }
   656 
   646 
   657 .upload-php .media-modal-close {
   647 .upload-php .media-modal-close {
   658 	top: 0;
   648 	top: 0;
   659 	right: 0;
   649 	right: 0;
   672 	right: 150px; /* leave space for prev/next/close */
   662 	right: 150px; /* leave space for prev/next/close */
   673 }
   663 }
   674 
   664 
   675 .edit-attachment-frame .edit-media-header .right:before,
   665 .edit-attachment-frame .edit-media-header .right:before,
   676 .edit-attachment-frame .edit-media-header .left:before {
   666 .edit-attachment-frame .edit-media-header .left:before {
   677 	font: normal 20px/50px 'dashicons' !important;
   667 	font: normal 20px/50px dashicons !important;
   678 	display: inline;
   668 	display: inline;
   679 	font-weight: 300;
   669 	font-weight: 300;
   680 }
   670 }
   681 
   671 
   682 .upload-php .media-modal-close:hover,
   672 .upload-php .media-modal-close:hover,
   687 .edit-attachment-frame .edit-media-header .right:focus {
   677 .edit-attachment-frame .edit-media-header .right:focus {
   688 	background: #ddd;
   678 	background: #ddd;
   689 	border-color: #ccc;
   679 	border-color: #ccc;
   690 	color: #000;
   680 	color: #000;
   691 	outline: none;
   681 	outline: none;
       
   682 	box-shadow: none;
   692 }
   683 }
   693 
   684 
   694 .upload-php .media-modal-close:focus .media-modal-icon:before,
   685 .upload-php .media-modal-close:focus .media-modal-icon:before,
   695 .upload-php .media-modal-close:hover .media-modal-icon:before {
   686 .upload-php .media-modal-close:hover .media-modal-icon:before {
   696 	color: #000;
   687 	color: #000;
   697 }
   688 }
   698 
   689 
   699 .edit-attachment-frame .edit-media-header .left:before,
   690 .edit-attachment-frame .edit-media-header .left:before,
   700 .rtl .edit-attachment-frame .edit-media-header .right:before {
   691 .rtl .edit-attachment-frame .edit-media-header .right:before {
   701 	content: '\f341';
   692 	content: "\f341";
   702 }
   693 }
   703 
   694 
   704 .edit-attachment-frame .edit-media-header .right:before,
   695 .edit-attachment-frame .edit-media-header .right:before,
   705 .rtl .edit-attachment-frame .edit-media-header .left:before {
   696 .rtl .edit-attachment-frame .edit-media-header .left:before {
   706 	content: '\f345';
   697 	content: "\f345";
   707 }
   698 }
   708 
   699 
   709 .edit-attachment-frame .edit-media-header .left.disabled,
   700 .edit-attachment-frame .edit-media-header .left.disabled,
   710 .edit-attachment-frame .edit-media-header .right.disabled,
   701 .edit-attachment-frame .edit-media-header .right.disabled,
   711 .edit-attachment-frame .edit-media-header .left.disabled:hover,
   702 .edit-attachment-frame .edit-media-header .left.disabled:hover,
   732 	overflow: auto;
   723 	overflow: auto;
   733 	top: 0;
   724 	top: 0;
   734 	bottom: 0;
   725 	bottom: 0;
   735 	right: 0;
   726 	right: 0;
   736 	left: 0;
   727 	left: 0;
   737 	-webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
       
   738 	box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
   728 	box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
   739 }
   729 }
   740 
   730 
   741 .edit-attachment-frame .attachment-media-view {
   731 .edit-attachment-frame .attachment-media-view {
   742 	float: left;
   732 	float: left;
   743 	width: 65%;
   733 	width: 65%;
   744 	height: 100%;
   734 	height: 100%;
   745 }
   735 }
   746 
   736 
   747 .edit-attachment-frame .attachment-media-view .thumbnail {
   737 .edit-attachment-frame .attachment-media-view .thumbnail {
   748 	-webkit-box-sizing: border-box;
       
   749 	-moz-box-sizing: border-box;
       
   750 	box-sizing: border-box;
   738 	box-sizing: border-box;
   751 	padding: 16px;
   739 	padding: 16px;
   752 	height: 100%;
   740 	height: 100%;
   753 }
   741 }
   754 
   742 
   755 .edit-attachment-frame .attachment-media-view .details-image {
   743 .edit-attachment-frame .attachment-media-view .details-image {
   756 	display: block;
   744 	display: block;
   757 	margin-bottom: 16px;
   745 	margin: 0 auto 16px;
   758 	max-width: 100%;
   746 	max-width: 100%;
   759 	max-height: 90%;
   747 	max-height: 90%;
   760 	max-height: -webkit-calc( 100% - 42px );
       
   761 	max-height: calc( 100% - 42px ); /* leave space for actions underneath */
   748 	max-height: calc( 100% - 42px ); /* leave space for actions underneath */
       
   749 	background-image: linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4), linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4);
       
   750 	background-position: 0 0, 10px 10px;
       
   751 	background-size: 20px 20px;
       
   752 }
       
   753 
       
   754 .edit-attachment-frame .attachment-media-view .attachment-actions {
       
   755 	text-align: center;
   762 }
   756 }
   763 
   757 
   764 .edit-attachment-frame .wp-media-wrapper {
   758 .edit-attachment-frame .wp-media-wrapper {
   765 	margin-bottom: 12px;
   759 	margin-bottom: 12px;
   766 }
   760 }
   771 	line-height: 16px;
   765 	line-height: 16px;
   772 }
   766 }
   773 
   767 
   774 .edit-attachment-frame .attachment-info {
   768 .edit-attachment-frame .attachment-info {
   775 	overflow: auto;
   769 	overflow: auto;
   776 	-webkit-box-sizing: border-box;
       
   777 	-moz-box-sizing: border-box;
       
   778 	box-sizing: border-box;
   770 	box-sizing: border-box;
   779 	margin-bottom: 0;
   771 	margin-bottom: 0;
   780 	padding: 12px 16px 0;
   772 	padding: 12px 16px 0;
   781 	width: 35%;
   773 	width: 35%;
   782 	height: 100%;
   774 	height: 100%;
   783 	-webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
       
   784 	box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
   775 	box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
   785 	border-bottom: 0;
   776 	border-bottom: 0;
   786 	border-left: 1px solid #ddd;
   777 	border-left: 1px solid #ddd;
   787 	background: #f3f3f3;
   778 	background: #f3f3f3;
   788 }
   779 }
   796 	padding-bottom: 15px;
   787 	padding-bottom: 15px;
   797 	border-bottom: 1px solid #ddd;
   788 	border-bottom: 1px solid #ddd;
   798 }
   789 }
   799 
   790 
   800 .edit-attachment-frame .attachment-info .filename {
   791 .edit-attachment-frame .attachment-info .filename {
   801 	font-weight: normal;
   792 	font-weight: 400;
   802 	color: #666;
   793 	color: #666;
   803 }
   794 }
   804 
   795 
   805 .edit-attachment-frame .attachment-info .thumbnail {
   796 .edit-attachment-frame .attachment-info .thumbnail {
   806 	margin-bottom: 12px;
   797 	margin-bottom: 12px;
   834 	vertical-align: top;
   825 	vertical-align: top;
   835 }
   826 }
   836 
   827 
   837 .imgedit-wrap {
   828 .imgedit-wrap {
   838 	position: relative;
   829 	position: relative;
   839 }
   830 	padding-top: 10px;
   840 
   831 }
   841 .imgedit-settings p {
   832 
   842 	margin: 8px 0 0;
   833 .imgedit-settings p,
       
   834 .imgedit-settings fieldset {
       
   835 	margin: 8px 0;
       
   836 }
       
   837 
       
   838 .imgedit-settings legend {
       
   839 	margin-bottom: 5px;
   843 }
   840 }
   844 
   841 
   845 .describe .imgedit-wrap .imgedit-settings {
   842 .describe .imgedit-wrap .imgedit-settings {
   846 	padding: 0 5px;
   843 	padding: 0 5px;
   847 }
   844 }
   850 	margin-top: 0;
   847 	margin-top: 0;
   851 }
   848 }
   852 
   849 
   853 .wp_attachment_holder .imgedit-wrap > div {
   850 .wp_attachment_holder .imgedit-wrap > div {
   854 	height: auto;
   851 	height: auto;
   855 	overflow: hidden;
       
   856 }
   852 }
   857 
   853 
   858 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
   854 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
   859 	padding-right: 16px;
   855 	padding: 3px 16px 0 0;
   860 	width: auto;
   856 	float: left;
   861 	overflow: hidden;
       
   862 }
   857 }
   863 
   858 
   864 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
   859 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
   865 	float: right;
   860 	float: right;
   866 	width: 250px;
   861 	width: 250px;
   872 }
   867 }
   873 
   868 
   874 .imgedit-wait {
   869 .imgedit-wait {
   875 	position: absolute;
   870 	position: absolute;
   876 	top: 0;
   871 	top: 0;
   877 	background: #fff url(../images/spinner.gif) no-repeat center;
   872 	bottom: 0;
   878 	-webkit-background-size: 20px 20px;
   873 	width: 100%;
   879 	background-size: 20px 20px;
   874 	background: #fff;
   880 	opacity: 0.7;
   875 	opacity: 0.7;
   881 	filter: alpha(opacity=70);
   876 	filter: alpha(opacity=70);
   882 	width: 100%;
       
   883 	height: 500px;
       
   884 	display: none;
   877 	display: none;
       
   878 }
       
   879 
       
   880 .imgedit-wait:before {
       
   881 	content: "";
       
   882 	display: block;
       
   883 	width: 20px;
       
   884 	height: 20px;
       
   885 	position: absolute;
       
   886 	left: 50%;
       
   887 	top: 50%;
       
   888 	margin: -10px 0 0 -10px;
       
   889 	background: transparent url(../images/spinner.gif) no-repeat center;
       
   890 	background-size: 20px 20px;
       
   891 	-webkit-transform: translateZ(0);
       
   892 	transform: translateZ(0);
   885 }
   893 }
   886 
   894 
   887 .no-float {
   895 .no-float {
   888 	float: none;
   896 	float: none;
   889 }
   897 }
   890 
   898 
   891 .media-disabled,
   899 .media-disabled,
   892 .imgedit-settings .disabled {
   900 .imgedit-settings .disabled {
   893 	color: grey;
   901 	/* WCAG 1.4.3 Text or images of text that are part of an inactive user
   894 }
   902 	   interface component ... have no contrast requirement. */
   895 
   903 	color: #a0a5aa;
   896 .wp_attachment_image,
   904 }
       
   905 
   897 .A1B1 {
   906 .A1B1 {
   898 	overflow: hidden;
   907 	overflow: hidden;
   899 }
   908 }
   900 
   909 
   901 .wp_attachment_image .button,
   910 .wp_attachment_image .button,
   911 .A1B1 .spinner {
   920 .A1B1 .spinner {
   912 	float: left;
   921 	float: left;
   913 }
   922 }
   914 
   923 
   915 .imgedit-menu {
   924 .imgedit-menu {
       
   925 	min-width: 300px;
   916 	margin: 0 0 12px;
   926 	margin: 0 0 12px;
   917 	min-width: 300px;
   927 }
   918 }
   928 
   919 
   929 .imgedit-menu .note-no-rotate {
   920 .imgedit-menu div {
   930 	clear: both;
       
   931 	margin: 0;
       
   932 	padding: 1em 0 0;
       
   933 }
       
   934 
       
   935 .image-editor .imgedit-menu .button {
   921 	float: left;
   936 	float: left;
   922 	width: 32px;
   937 	width: 32px;
   923 	border: 1px solid #d5d5d5;
   938 	height: 32px;
       
   939 	margin: 0 8px 0 0;
       
   940 	padding: 0;
   924 	background: #f1f1f1;
   941 	background: #f1f1f1;
   925 	margin: 0 8px 0 0;
       
   926 	height: 32px;
       
   927 	-webkit-font-smoothing: antialiased;
   942 	-webkit-font-smoothing: antialiased;
   928 	-moz-osx-font-smoothing: grayscale;
   943 	-moz-osx-font-smoothing: grayscale;
   929 	text-align: center;
   944 	line-height: 16px;
   930 	line-height: 28px;
   945 	color: #72777c;
   931 	color: #777;
   946 }
   932 	cursor: pointer;
   947 
   933 }
   948 .imgedit-menu .button:before {
   934 
   949 	font: normal 20px/1 dashicons;
   935 .imgedit-menu div:before {
       
   936 	font: normal 20px/1 'dashicons';
       
   937 	speak: none;
   950 	speak: none;
   938 	vertical-align: middle;
   951 	vertical-align: middle;
   939 }
   952 }
   940 
   953 
   941 .imgedit-menu div:hover {
   954 .imgedit-menu .button.disabled {
   942 	border-color: #c1c1c1;
       
   943 	background-color: #eaeaea;
       
   944 	color: #32373c;
       
   945 }
       
   946 
       
   947 .imgedit-menu div.disabled {
       
   948 	border-color: #ccc;
   955 	border-color: #ccc;
   949 	background-color: #ddd;
   956 	background-color: #ddd;
   950 	color: #777;
   957 	color: #72777c;
   951 	filter: alpha(opacity=50);
   958 	filter: alpha(opacity=50);
   952 	opacity: 0.5;
   959 	opacity: 0.5;
   953 	cursor: default;
   960 	cursor: default;
   954 }
   961 }
   955 
   962 
   956 .imgedit-crop:before {
   963 .imgedit-crop:before {
   957 	content:'\f165';
   964 	content: "\f165";
   958 }
   965 }
   959 
   966 
   960 .imgedit-rleft:before {
   967 .imgedit-rleft:before {
   961 	content:'\f166';
   968 	content: "\f166";
   962 }
   969 }
   963 
   970 
   964 .imgedit-rright:before {
   971 .imgedit-rright:before {
   965 	content:'\f167';
   972 	content: "\f167";
   966 }
   973 }
   967 
   974 
   968 .imgedit-flipv:before {
   975 .imgedit-flipv:before {
   969 	content:'\f168';
   976 	content: "\f168";
   970 }
   977 }
   971 
   978 
   972 .imgedit-fliph:before {
   979 .imgedit-fliph:before {
   973 	content:'\f169';
   980 	content: "\f169";
   974 }
   981 }
   975 
   982 
   976 .imgedit-undo:before {
   983 .imgedit-undo:before {
   977 	content:'\f171';
   984 	content: "\f171";
   978 }
   985 }
   979 
   986 
   980 .imgedit-redo:before {
   987 .imgedit-redo:before {
   981 	content:'\f172';
   988 	content: "\f172";
   982 }
   989 }
   983 
   990 
   984 .imgedit-crop-wrap {
   991 .imgedit-crop-wrap {
   985 	position: relative;
   992 	position: relative;
   986 }
   993 }
   987 
   994 
       
   995 .imgedit-crop-wrap img {
       
   996 	background-image: linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4), linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4);
       
   997 	background-position: 0 0, 10px 10px;
       
   998 	background-size: 20px 20px;
       
   999 }
       
  1000 
   988 .imgedit-crop {
  1001 .imgedit-crop {
   989 	margin: 0 8px 0 0;
  1002 	margin: 0 8px 0 0;
   990 }
  1003 }
   991 
  1004 
   992 .imgedit-rleft {
  1005 .imgedit-rleft {
  1011 
  1024 
  1012 .imgedit-redo {
  1025 .imgedit-redo {
  1013 	margin: 0 8px 0 3px;
  1026 	margin: 0 8px 0 3px;
  1014 }
  1027 }
  1015 
  1028 
  1016 .imgedit-applyto img {
  1029 .imgedit-thumbnail-preview {
  1017 	margin: 0 8px 0 0;
  1030 	margin: 10px 8px 0 0;
  1018 }
  1031 }
  1019 
  1032 
  1020 .imgedit-group-top {
  1033 .imgedit-thumbnail-preview-caption {
  1021 	margin: 5px 0;
  1034 	display: block;
  1022 }
  1035 }
  1023 
  1036 
  1024 #poststuff .imgedit-group-top h3 {
  1037 #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
       
  1038 #poststuff .imgedit-group-top h2 {
       
  1039 	display: inline-block;
       
  1040 	margin: 0;
  1025 	padding: 0;
  1041 	padding: 0;
  1026 }
  1042 	font-size: 14px;
  1027 
  1043 	line-height: 1.4;
  1028 .imgedit-group-top h3 a {
  1044 }
       
  1045 
       
  1046 #poststuff .imgedit-group-top .button-link {
  1029 	text-decoration: none;
  1047 	text-decoration: none;
       
  1048 	color: #23282d;
  1030 }
  1049 }
  1031 
  1050 
  1032 .imgedit-applyto .imgedit-label {
  1051 .imgedit-applyto .imgedit-label {
  1033 	padding: 2px 0 0;
       
  1034 	display: block;
  1052 	display: block;
       
  1053 	padding: .5em 0 0;
  1035 }
  1054 }
  1036 
  1055 
  1037 .imgedit-help {
  1056 .imgedit-help {
  1038 	display: none;
  1057 	display: none;
  1039 	font-style: italic;
  1058 	font-style: italic;
  1040 }
  1059 }
  1041 
  1060 
  1042 a.imgedit-help-toggle {
  1061 /* higher specificity than buttons */
  1043 	text-decoration: none;
  1062 .image-editor .imgedit-settings .imgedit-help-toggle,
       
  1063 .image-editor .imgedit-settings .imgedit-help-toggle:hover,
       
  1064 .image-editor .imgedit-settings .imgedit-help-toggle:active {
       
  1065 	border: 1px solid transparent;
       
  1066 	margin: -1px 0 0 -1px;
       
  1067 	padding: 0;
       
  1068 	background: transparent;
       
  1069 	color: #0074a2;
       
  1070 	font-size: 20px;
       
  1071 	line-height: 1;
       
  1072 	cursor: pointer;
       
  1073 	box-sizing: content-box;
       
  1074 	box-shadow: none;
       
  1075 }
       
  1076 
       
  1077 .image-editor .imgedit-settings .imgedit-help-toggle:focus {
       
  1078 	color: #0074a2;
       
  1079 	border-color: #5b9dd9;
       
  1080 	outline: none;
       
  1081 	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
  1044 }
  1082 }
  1045 
  1083 
  1046 .form-table td.imgedit-response {
  1084 .form-table td.imgedit-response {
  1047 	padding: 0;
  1085 	padding: 0;
  1048 }
  1086 }
  1049 
  1087 
  1050 .imgedit-submit {
  1088 .imgedit-submit {
  1051 	margin: 8px 0;
  1089 	margin: 8px 0 0;
  1052 }
  1090 }
  1053 
  1091 
  1054 .imgedit-submit-btn {
  1092 .imgedit-submit-btn {
  1055 	margin-left: 20px;
  1093 	margin-left: 20px;
  1056 }
  1094 }
  1057 
  1095 
  1058 .imgedit-wrap .nowrap {
  1096 .imgedit-wrap .nowrap {
  1059 	white-space: nowrap;
  1097 	white-space: nowrap;
       
  1098 	font-size: 12px;
       
  1099 	line-height: inherit;
  1060 }
  1100 }
  1061 
  1101 
  1062 span.imgedit-scale-warn {
  1102 span.imgedit-scale-warn {
  1063 	color: red;
  1103 	color: #dc3232;
  1064 	font-size: 20px;
  1104 	font-size: 20px;
  1065 	font-style: normal;
  1105 	font-style: normal;
  1066 	visibility: hidden;
  1106 	visibility: hidden;
  1067 	vertical-align: middle;
  1107 	vertical-align: middle;
  1068 }
  1108 }
  1069 
  1109 
       
  1110 .imgedit-save-target {
       
  1111 	margin: 8px 0;
       
  1112 }
       
  1113 
  1070 .imgedit-group {
  1114 .imgedit-group {
  1071 	margin-bottom: 8px;
  1115 	margin-bottom: 8px;
  1072 	padding: 2px 10px;
  1116 	padding: 10px;
       
  1117 }
       
  1118 
       
  1119 .imgedit-settings .imgedit-scale input[type="text"],
       
  1120 .imgedit-settings .imgedit-crop-ratio input[type="text"],
       
  1121 .imgedit-settings .imgedit-crop-sel input[type="text"] {
       
  1122 	width: 50px;
       
  1123 	font-size: 14px;
       
  1124 	padding: 5px 8px;
       
  1125 }
       
  1126 
       
  1127 .imgedit-separator {
       
  1128 	display: inline-block;
       
  1129 	width: 7px;
       
  1130 	text-align: center;
       
  1131 	vertical-align: middle;
       
  1132 	font-size: 13px;
       
  1133 	color: #444;
       
  1134 }
       
  1135 
       
  1136 .imgedit-settings .imgedit-scale .button {
       
  1137 	margin-bottom: 0;
  1073 }
  1138 }
  1074 
  1139 
  1075 audio, video {
  1140 audio, video {
  1076 	display: inline-block;
  1141 	display: inline-block;
  1077 	max-width: 100%;
  1142 	max-width: 100%;
  1089  * HiDPI Displays
  1154  * HiDPI Displays
  1090  */
  1155  */
  1091 @media print,
  1156 @media print,
  1092   (-webkit-min-device-pixel-ratio: 1.25),
  1157   (-webkit-min-device-pixel-ratio: 1.25),
  1093   (min-resolution: 120dpi) {
  1158   (min-resolution: 120dpi) {
  1094 	.imgedit-wait {
  1159 	.imgedit-wait:before {
  1095 		background-image: url(../images/spinner-2x.gif);
  1160 		background-image: url(../images/spinner-2x.gif);
  1096 	}
  1161 	}
  1097 }
  1162 }
  1098 
  1163 
  1099 @media screen and ( max-width: 782px ) {
  1164 @media screen and ( max-width: 782px ) {
  1112 		padding: 1px 10px;
  1177 		padding: 1px 10px;
  1113 	}
  1178 	}
  1114 
  1179 
  1115 	.media-upload-form .media-item .error {
  1180 	.media-upload-form .media-item .error {
  1116 		padding: 10px 0 10px 12px;
  1181 		padding: 10px 0 10px 12px;
       
  1182 	}
       
  1183 
       
  1184 	.imgedit-settings .imgedit-scale input[type="text"],
       
  1185 	.imgedit-settings .imgedit-crop-ratio input[type="text"],
       
  1186 	.imgedit-settings .imgedit-crop-sel input[type="text"] {
       
  1187 		width: 60px;
       
  1188 		font-size: 16px;
       
  1189 		padding: 6px 10px;
       
  1190 	}
       
  1191 
       
  1192 	.imgedit-applyto .imgedit-label {
       
  1193 		vertical-align: middle;
  1117 	}
  1194 	}
  1118 }
  1195 }
  1119 
  1196 
  1120 /**
  1197 /**
  1121  * Media queries for media grid.
  1198  * Media queries for media grid.