5 -webkit-box-sizing: content-box;
6 -moz-box-sizing: content-box;
7 box-sizing: content-box;
12 .media-modal textarea {
13 -webkit-box-sizing: border-box;
14 -moz-box-sizing: border-box;
15 box-sizing: border-box;
20 font-family: "Open Sans", sans-serif;
22 -webkit-overflow-scrolling: touch;
31 .media-frame textarea {
36 .wp-admin .media-frame select {
47 .media-frame a:active {
51 .media-frame a:focus {
54 0 0 2px 1px rgba(30, 140, 190, .8);
57 0 0 2px 1px rgba(30, 140, 190, .8);
62 .media-frame a.button {
66 .media-frame a.button:hover {
70 .media-frame a.button-primary,
71 .media-frame a.button-primary:hover {
75 .media-frame input[type="text"],
76 .media-frame input[type="password"],
77 .media-frame input[type="number"],
78 .media-frame input[type="search"],
79 .media-frame input[type="email"],
80 .media-frame input[type="url"],
81 .media-frame textarea,
83 font-family: "Open Sans", sans-serif;
90 .media-frame input[type="text"]:focus,
91 .media-frame input[type="password"]:focus,
92 .media-frame input[type="number"]:focus,
93 .media-frame input[type="search"]:focus,
94 .media-frame input[type="email"]:focus,
95 .media-frame input[type="url"]:focus,
96 .media-frame textarea:focus,
97 .media-frame select:focus {
98 border-color: #5b9dd9;
101 .media-frame select {
106 .media-frame input:disabled,
107 .media-frame textarea:disabled,
108 .media-frame input[readonly],
109 .media-frame textarea[readonly] {
110 background-color: #eee;
113 .media-frame input[type="search"] {
114 -webkit-appearance: textfield;
117 .media-frame ::-webkit-input-placeholder {
121 .media-frame ::-moz-placeholder {
126 .media-frame :-ms-input-placeholder {
130 .media-frame .hidden {
135 * jQuery UI Draggable/Sortable 1.11.4
136 * http://jqueryui.com
138 * Copyright jQuery Foundation and other contributors
139 * Released under the MIT license.
140 * http://jquery.org/license
142 .ui-draggable-handle,
143 .ui-sortable-handle {
144 -ms-touch-action: none;
160 .wp-customizer .media-modal {
164 .media-modal-backdrop {
176 .wp-customizer .media-modal-backdrop {
188 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
189 transition: color .1s ease-in-out, background .1s ease-in-out;
192 .media-modal-close:active {
193 -webkit-box-shadow: none;
197 .media-modal-close span.media-modal-icon {
198 background-image: none;
201 .media-modal-close .media-modal-icon:before {
203 font: normal 20px/1 dashicons;
205 vertical-align: middle;
206 -webkit-font-smoothing: antialiased;
207 -moz-osx-font-smoothing: grayscale;
211 .media-modal-close:hover .media-modal-icon:before {
215 .media-modal-close:active {
219 .media-modal-content {
227 -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
228 box-shadow: 0 5px 15px rgba(0,0,0,0.7);
230 -webkit-font-smoothing: subpixel-antialiased;
233 .media-modal-content .media-frame select.attachment-filters {
237 width: -webkit-calc(48% - 12px);
238 width: calc(48% - 12px);
241 .media-modal-content .attachments-browser .media-toolbar-secondary {
245 .media-modal-content .media-toolbar-primary.search-form {
249 .media-modal-content .media-toolbar-primary .media-button {
253 .media-modal-content .attachments-browser .search {
257 /* higher specificity */
258 .wp-core-ui .media-modal-icon {
259 background-image: url(../images/uploader-icons.png);
260 background-repeat: no-repeat;
274 border: 0 solid #ddd;
278 .media-toolbar-primary {
283 .media-toolbar-secondary {
288 .media-toolbar-primary > .media-button,
289 .media-toolbar-primary > .media-button-group {
295 .media-toolbar-secondary > .media-button,
296 .media-toolbar-secondary > .media-button-group {
310 padding: 0 16px 24px;
313 border-right: 1px solid #ddd;
315 -webkit-overflow-scrolling: touch;
318 .hide-toolbar .media-sidebar {
322 .media-sidebar .sidebar-title {
325 padding: 12px 10px 10px;
329 .media-sidebar .sidebar-content {
331 margin-bottom: 130px;
334 .media-sidebar .search {
339 .media-sidebar h3, /* Back-compat for pre-4.4 */
340 .image-details h3, /* Back-compat for pre-4.4 */
345 text-transform: uppercase;
351 .media-sidebar .setting,
352 .attachment-details .setting {
359 .media-sidebar .setting label,
360 .attachment-details .setting label {
364 .media-sidebar .setting .link-to-custom,
365 .attachment-details .setting .link-to-custom {
369 .media-sidebar .setting span,
370 .attachment-details .setting span {
375 word-wrap: break-word;
378 .media-sidebar .setting .name {
382 .media-sidebar .setting select,
383 .attachment-details .setting select {
387 .media-sidebar .setting input[type="checkbox"],
388 .media-sidebar .field input[type="checkbox"],
389 .media-sidebar .setting input[type="radio"],
390 .media-sidebar .field input[type="radio"],
391 .attachment-details .setting input[type="checkbox"],
392 .attachment-details .field input[type="checkbox"],
393 .attachment-details .setting input[type="radio"],
394 .attachment-details .field input[type="radio"] {
400 .media-sidebar .setting span,
401 .attachment-details .setting span,
402 .compat-item label span {
411 .compat-item label span {
415 .media-sidebar .setting input[type="text"],
416 .media-sidebar .setting input[type="password"],
417 .media-sidebar .setting input[type="email"],
418 .media-sidebar .setting input[type="number"],
419 .media-sidebar .setting input[type="search"],
420 .media-sidebar .setting input[type="tel"],
421 .media-sidebar .setting input[type="url"],
422 .media-sidebar .setting textarea,
423 .media-sidebar .setting .value,
424 .attachment-details .setting input[type="text"],
425 .attachment-details .setting input[type="password"],
426 .attachment-details .setting input[type="email"],
427 .attachment-details .setting input[type="number"],
428 .attachment-details .setting input[type="search"],
429 .attachment-details .setting input[type="tel"],
430 .attachment-details .setting input[type="url"],
431 .attachment-details .setting textarea,
432 .attachment-details .setting .value {
433 -webkit-box-sizing: border-box;
434 -moz-box-sizing: border-box;
435 box-sizing: border-box;
441 .media-sidebar .setting .value,
442 .attachment-details .setting .value {
447 .media-sidebar .setting textarea,
448 .attachment-details .setting textarea,
449 .compat-item .field textarea {
454 .media-sidebar select,
455 .attachment-details select {
479 .compat-item .field {
485 .compat-item .label {
492 .compat-item .label span {
497 .compat-item .field {
503 .compat-item .field input[type="text"],
504 .compat-item .field input[type="password"],
505 .compat-item .field input[type="email"],
506 .compat-item .field input[type="number"],
507 .compat-item .field input[type="search"],
508 .compat-item .field input[type="tel"],
509 .compat-item .field input[type="url"],
510 .compat-item .field textarea {
513 -webkit-box-sizing: border-box;
514 -moz-box-sizing: border-box;
515 box-sizing: border-box;
518 .sidebar-for-errors .attachment-details,
519 .sidebar-for-errors .compat-item,
520 .sidebar-for-errors .media-sidebar .media-progress-bar,
521 .sidebar-for-errors .upload-details {
522 display: none !important;
537 border-left-width: 1px;
538 border-left-style: solid;
539 border-left-color: #ccc;
540 -webkit-user-select: none;
541 -moz-user-select: none;
542 -ms-user-select: none;
554 text-decoration: none;
557 .media-menu > a:hover {
559 background: rgba( 0, 0, 0, 0.04 );
562 .media-menu > a:active {
567 .media-menu .active:hover {
572 .media-menu .separator {
576 border-top: 1px solid #ddd;
587 -webkit-user-select: none;
588 -moz-user-select: none;
589 -ms-user-select: none;
594 -webkit-transition: none;
601 padding: 8px 10px 9px;
606 text-decoration: none;
609 .media-router > a:last-child {
613 .media-router > a:active {
617 .media-router .active,
618 .media-router .active:hover {
622 .media-router .active,
623 .media-router > a.active:last-child {
626 border: 1px solid #ddd;
630 .media-router .active:after {
664 .media-frame-router {
673 .media-frame-content {
684 border-top: 1px solid #ddd;
685 border-bottom: 1px solid #ddd;
688 .media-frame-toolbar {
697 .media-frame.hide-menu .media-frame-title,
698 .media-frame.hide-menu .media-frame-router,
699 .media-frame.hide-menu .media-frame-toolbar,
700 .media-frame.hide-menu .media-frame-content {
704 .media-frame.hide-menu .media-frame-menu {
708 .media-frame.hide-toolbar .media-frame-content {
712 .media-frame.hide-toolbar .media-frame-toolbar {
716 .media-frame.hide-router .media-frame-content {
720 .media-frame.hide-router .media-frame-router {
724 .media-frame.hide-router .media-frame-title {
725 border-bottom: 1px solid #ddd;
726 -webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
727 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
730 .media-frame-title .dashicons {
734 .media-frame-title h1 {
741 .media-frame-title .suggested-dimensions {
747 .media-frame-content .crop-content {
751 .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
755 .media-frame-content .crop-content .crop-image {
762 .media-frame-content .crop-content .upload-errors
768 margin-right: -150px;
776 .media-frame .media-iframe {
780 .media-frame .media-iframe,
781 .media-frame .media-iframe iframe {
788 * Attachment Browser Filters
790 .media-frame select.attachment-filters {
794 max-width: -webkit-calc(48% - 12px);
795 max-width: calc(48% - 12px);
798 .media-frame select.attachment-filters:last-of-type {
805 .media-frame .search {
810 font-family: "Open Sans", sans-serif;
811 -webkit-appearance: none;
814 .media-toolbar-primary .search {
821 .wp-core-ui .attachments {
823 -webkit-overflow-scrolling: touch;
829 .wp-core-ui .attachment {
838 -webkit-user-select: none;
839 -moz-user-select: none;
840 -ms-user-select: none;
843 -webkit-box-sizing: border-box;
844 -moz-box-sizing: border-box;
845 box-sizing: border-box;
848 .wp-core-ui .attachment:focus,
849 .wp-core-ui .selected.attachment:focus,
850 .wp-core-ui .attachment.details:focus {
852 inset 0 0 2px 3px #fff,
853 inset 0 0 0 7px #5b9dd9;
855 inset 0 0 2px 3px #fff,
856 inset 0 0 0 7px #5b9dd9;
860 .wp-core-ui .selected.attachment {
862 inset 0 0 0 5px #fff,
863 inset 0 0 0 7px #ccc;
865 inset 0 0 0 5px #fff,
866 inset 0 0 0 7px #ccc;
869 .wp-core-ui .attachment.details {
871 inset 0 0 0 3px #fff,
872 inset 0 0 0 7px #0073aa;
874 inset 0 0 0 3px #fff,
875 inset 0 0 0 7px #0073aa;
878 .wp-core-ui .attachment-preview {
881 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
882 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
884 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
885 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
890 .wp-core-ui .attachment-preview:before {
896 .wp-core-ui .attachment .icon {
901 .wp-core-ui .attachment .thumbnail {
909 -webkit-transition: opacity .1s;
910 transition: opacity .1s;
913 .wp-core-ui .attachment .portrait img {
917 .wp-core-ui .attachment .landscape img {
921 .wp-core-ui .attachment .thumbnail:after {
929 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
930 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
934 .wp-core-ui .attachment .thumbnail img {
939 .wp-core-ui .attachment .thumbnail .centered {
945 -webkit-transform: translate( -50%, 50% );
946 -ms-transform: translate(-50%,50%); /* Fails with spaces?? Weird! */
947 transform: translate( -50%, 50% );
950 .wp-core-ui .attachment .thumbnail .centered img {
951 -webkit-transform: translate( 50%, -50% );
952 -ms-transform: translate(50%,-50%);
953 transform: translate( 50%, -50% );
956 .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
957 -webkit-transform: translate( 50%, -70% );
958 -ms-transform: translate(50%,-70%);
959 transform: translate( 50%, -70% );
962 .ie8 .wp-core-ui .attachment img.icon {
967 .wp-core-ui .attachment .filename {
974 word-wrap: break-word;
977 background: rgba( 255, 255, 255, 0.8 );
978 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
979 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
982 .wp-core-ui .attachment .filename div {
986 .wp-core-ui .attachment .thumbnail img {
990 .wp-core-ui .attachment-close {
998 background-color: #fff;
999 background-position: -96px 4px;
1000 -webkit-border-radius: 3px;
1002 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
1003 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
1006 .wp-core-ui .attachment-close:hover,
1007 .wp-core-ui .attachment-close:focus {
1008 background-position: -36px 4px;
1011 .wp-core-ui .attachment .check {
1022 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
1023 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
1026 .wp-core-ui .attachment .check .media-modal-icon {
1028 background-position: -1px 0;
1034 .wp-core-ui .attachment .check:hover .media-modal-icon {
1035 background-position: -40px 0;
1038 .wp-core-ui .attachment.selected .check {
1042 .wp-core-ui .attachment.details .check,
1043 .wp-core-ui .attachment.selected .check:focus,
1044 .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
1045 background-color: #0073aa;
1054 .wp-core-ui .attachment.details .check .media-modal-icon,
1055 .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
1056 background-position: -21px 0;
1059 .wp-core-ui .attachment.details .check:hover .media-modal-icon,
1060 .wp-core-ui .attachment.selected .check:focus .media-modal-icon,
1061 .wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
1062 background-position: -60px 0;
1065 .wp-core-ui .media-frame .attachment .describe {
1072 -webkit-border-radius: 0;
1077 * Attachments Browser
1079 .media-frame .attachments-browser {
1086 .attachments-browser .media-toolbar {
1091 .attachments-browser.hide-sidebar .media-toolbar {
1095 .attachments-browser .media-toolbar-primary > .media-button,
1096 .attachments-browser .media-toolbar-primary > .media-button-group,
1097 .attachments-browser .media-toolbar-secondary > .media-button,
1098 .attachments-browser .media-toolbar-secondary > .media-button-group {
1102 .attachments-browser .attachments {
1103 padding: 2px 8px 8px;
1106 .attachments-browser .attachments,
1107 .attachments-browser .uploader-inline {
1117 .attachments-browser .uploader-inline.hidden {
1121 .attachments-browser .media-toolbar-primary {
1125 .attachments-browser .media-toolbar-secondary {
1129 .uploader-inline .close {
1130 background-color: transparent;
1142 .uploader-inline .close:before {
1143 font: normal 30px/50px dashicons !important;
1145 display: inline-block;
1150 .attachments-browser.hide-sidebar .attachments,
1151 .attachments-browser.hide-sidebar .uploader-inline {
1156 .attachments-browser .instructions {
1157 display: inline-block;
1165 .attachments-browser .no-media {
1166 padding: 2em 2em 0 0;
1172 .media-progress-bar {
1177 -webkit-border-radius: 10px;
1178 border-radius: 10px;
1180 background: rgba( 0, 0, 0, 0.1 );
1183 .media-progress-bar div {
1187 background: #0073aa;
1188 -webkit-border-radius: 10px;
1189 border-radius: 10px;
1190 -webkit-transition: width 300ms;
1191 transition: width 300ms;
1194 .media-uploader-status .media-progress-bar {
1199 .uploading.media-uploader-status .media-progress-bar {
1203 .attachment-preview .media-progress-bar {
1211 .media-uploader-status {
1214 padding-bottom: 10px;
1218 .uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
1219 .uploader-inline .media-uploader-status h2 {
1223 .media-uploader-status .upload-details {
1229 .uploading.media-uploader-status .upload-details {
1233 .media-uploader-status .upload-detail-separator {
1237 .media-uploader-status .upload-count {
1241 .media-uploader-status .upload-dismiss-errors,
1242 .media-uploader-status .upload-errors {
1246 .errors.media-uploader-status .upload-dismiss-errors,
1247 .errors.media-uploader-status .upload-errors {
1251 .media-uploader-status .upload-dismiss-errors {
1252 text-decoration: none;
1255 .media-sidebar .media-uploader-status .upload-dismiss-errors {
1261 .upload-errors .upload-error {
1263 margin-bottom: 12px;
1265 border-right: 4px solid #dc3232;
1266 -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1267 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1270 .uploader-inline .upload-errors .upload-error {
1271 background-color: #fbeaea;
1272 -webkit-box-shadow: none;
1276 .upload-errors .upload-error-filename {
1280 .upload-errors .upload-error-message {
1283 word-wrap: break-word;
1292 background: rgba( 0, 86, 132, 0.9 );
1297 -webkit-transition: opacity 250ms;
1298 transition: opacity 250ms;
1301 .uploader-window-content {
1307 border: 1px dashed #fff;
1310 .uploader-window h3, /* Back-compat for pre-4.4 */
1311 .uploader-window h1 {
1317 -webkit-transform: translateY( -50% );
1318 -ms-transform: translateY(-50%);
1319 transform: translateY( -50% );
1325 .uploader-window .media-progress-bar {
1328 background: transparent;
1333 .uploader-window .media-progress-bar div {
1337 .uploading .uploader-window .media-progress-bar {
1341 .media-frame .uploader-inline {
1342 margin-bottom: 20px;
1347 .uploader-inline-content {
1354 .uploader-inline-content .upload-ui {
1358 .uploader-inline-content .post-upload-ui {
1362 .uploader-inline .has-upload-message .upload-ui {
1366 .uploader-inline h3, /* Back-compat for pre-4.4 */
1367 .uploader-inline h2 {
1374 .uploader-inline .has-upload-message .upload-instructions {
1377 font-weight: normal;
1380 .uploader-inline .drop-instructions {
1384 .supports-drag-drop .uploader-inline .drop-instructions {
1388 .uploader-inline p {
1393 .uploader-inline .media-progress-bar {
1397 .uploading.uploader-inline .media-progress-bar {
1401 .uploader-inline .browser {
1402 display: inline-block !important;
1414 padding: 0 16px 0 0;
1416 white-space: nowrap;
1419 .media-selection .selection-info {
1420 display: inline-block;
1424 vertical-align: top;
1427 .media-selection.empty,
1428 .media-selection.editing {
1432 .media-selection.one .edit-selection {
1436 .media-selection .count {
1444 .media-selection .button-link {
1447 margin: 1px -8px 1px 8px;
1449 border-left: 1px solid #ddd;
1453 .media-selection .button-link:hover,
1454 .media-selection .button-link:focus {
1458 .media-selection .button-link:last-child {
1463 .selection-info .clear-selection {
1467 .selection-info .clear-selection:hover,
1468 .selection-info .clear-selection:focus {
1472 .media-selection .selection-view {
1473 display: inline-block;
1474 vertical-align: top;
1477 .media-selection .attachments {
1478 display: inline-block;
1483 vertical-align: top;
1486 .media-selection .attachment {
1492 .media-selection .attachment .thumbnail {
1499 .media-selection .attachment .icon {
1503 .media-selection .attachment-preview {
1504 -webkit-box-shadow: none;
1509 .wp-core-ui .media-selection .attachment:focus,
1510 .wp-core-ui .media-selection .selected.attachment:focus,
1511 .wp-core-ui .media-selection .attachment.details:focus {
1514 0 0 2px 3px #5b9dd9;
1517 0 0 2px 3px #5b9dd9;
1520 .wp-core-ui .media-selection .selected.attachment {
1521 -webkit-box-shadow: none;
1525 .wp-core-ui .media-selection .attachment.details {
1534 .media-selection:after {
1542 background-image: -webkit-gradient(linear, left top, right top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
1543 background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1544 background-image: linear-gradient(to right, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1547 .media-selection .attachment .filename {
1554 .media-frame .spinner {
1555 background: url(../images/spinner.gif) no-repeat;
1556 -webkit-background-size: 20px 20px;
1557 background-size: 20px 20px;
1559 display: inline-block;
1562 filter: alpha(opacity=70);
1566 vertical-align: middle;
1569 .media-frame .spinner.is-active {
1570 visibility: visible;
1573 .media-toolbar .spinner {
1578 * Attachment Details
1580 .attachment-details {
1585 .attachment-details .settings-save-status {
1587 text-transform: none;
1591 .attachment-details .settings-save-status .spinner {
1595 .attachment-details .settings-save-status .saved {
1600 .attachment-details.save-waiting .settings-save-status .spinner {
1601 visibility: visible;
1604 .attachment-details.save-complete .settings-save-status .saved {
1611 margin-bottom: 16px;
1614 border-bottom: 1px solid #ddd;
1615 padding-bottom: 11px;
1618 .attachment-info .filename {
1621 word-wrap: break-word;
1624 .attachment-info .thumbnail {
1634 .uploading .attachment-info .thumbnail {
1637 -webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1638 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1641 .uploading .attachment-info .media-progress-bar {
1645 .attachment-info .thumbnail-image:after {
1653 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1654 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1658 .attachment-info .thumbnail img {
1665 .attachment-info .details {
1671 .attachment-info .edit-attachment,
1672 .attachment-info .delete-attachment,
1673 .attachment-info .trash-attachment,
1674 .attachment-info .untrash-attachment {
1676 text-decoration: none;
1677 white-space: nowrap;
1680 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1684 .attachment-info .edit-attachment {
1688 .media-modal .delete-attachment,
1689 .media-modal .trash-attachment,
1690 .media-modal .untrash-attachment {
1696 .media-modal .delete-attachment:hover,
1697 .media-modal .delete-attachment:focus,
1698 .media-modal .trash-attachment:hover,
1699 .media-modal .trash-attachment:focus,
1700 .media-modal .untrash-attachment:hover,
1701 .media-modal .untrash-attachment:focus {
1706 * Attachment Display Settings
1708 .attachment-display-settings {
1714 .attachment-display-settings h4 {
1715 margin: 1.4em 0 0.4em;
1718 .collection-settings {
1722 .collection-settings .setting input[type="checkbox"] {
1727 .collection-settings .setting span {
1734 .media-modal .imgedit-wrap {
1738 .media-modal .imgedit-wrap .imgedit-panel-content {
1748 .media-modal .imgedit-wrap .imgedit-settings {
1749 background: #f3f3f3;
1750 border-right: 1px solid #ddd;
1751 padding: 20px 16px 16px;
1760 .media-modal .imgedit-group {
1763 border-bottom: 1px solid #ddd;
1764 -webkit-box-shadow: none;
1767 margin-bottom: 16px;
1769 padding-bottom: 16px;
1770 position: relative; /* RTL fix, #WP29352 */
1773 .media-modal .imgedit-group:last-of-type {
1779 .media-modal .imgedit-group-top {
1783 .media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
1784 .media-modal .imgedit-group-top h2,
1785 .media-modal .imgedit-group-top h2 .button-link {
1786 display: inline-block;
1787 text-transform: uppercase;
1794 .media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
1795 .media-modal .imgedit-group-top h2 a,
1796 .media-modal .imgedit-group-top h2 .button-link {
1797 text-decoration: none;
1801 /* higher specificity than media.css */
1802 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
1803 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
1804 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
1805 border: 1px solid transparent;
1808 background: transparent;
1813 -webkit-box-sizing: content-box;
1814 -moz-box-sizing: content-box;
1815 box-sizing: content-box;
1816 -webkit-box-shadow: none;
1820 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
1822 border-color: #5b9dd9;
1824 -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
1825 box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
1828 .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
1832 .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
1836 .media-modal .imgedit-help-toggled span.dashicons:before {
1840 .media-modal .imgedit-thumbnail-preview {
1841 margin: 10px 0 0 8px;
1844 .imgedit-thumbnail-preview-caption {
1848 .media-modal .imgedit-wrap div.updated {
1850 margin-bottom: 16px;
1855 * Embed from URL and Image Details
1867 .media-frame .embed-url input {
1872 -webkit-box-shadow: inset -2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1873 box-shadow: inset -2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1876 .media-frame .embed-url .spinner {
1882 .media-frame .embed-loading .embed-url .spinner {
1883 visibility: visible;
1886 .embed-link-settings,
1887 .embed-media-settings {
1893 padding: 16px 16px 32px;
1897 .media-embed .embed-link-settings {
1898 /* avoid Firefox to give focus to the embed preview container parent */
1903 .embed-preview iframe,
1904 .embed-preview embed,
1905 .mejs-container video {
1907 vertical-align: middle;
1911 display: inline-block;
1914 .embed-preview img {
1919 .mejs-container:focus {
1920 outline: 1px solid #5b9dd9;
1921 -webkit-box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8);
1922 box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8);
1925 .image-details .media-modal {
1930 .image-details .media-frame-title,
1931 .image-details .media-frame-content,
1932 .image-details .media-frame-router {
1936 .image-details .embed-media-settings {
1942 .image-details .embed-media-settings,
1943 .image-details .embed-media-settings div {
1944 -webkit-box-sizing: border-box;
1945 -moz-box-sizing: border-box;
1946 box-sizing: border-box;
1949 .image-details .column-settings {
1950 background: #f3f3f3;
1951 border-left: 1px solid #ddd;
1959 .image-details .column-settings h3, /* Back-compat for pre-4.4 */
1960 .image-details .column-settings h2 {
1963 border-top: 1px solid #ddd;
1967 .image-details .column-image {
1974 .image-details .image {
1978 .image-details .image img {
1983 .image-details .advanced-toggle {
1986 text-transform: uppercase;
1989 .image-details .advanced-toggle:after {
1990 font: normal 20px/1 dashicons;
1992 vertical-align: top;
1993 -webkit-font-smoothing: antialiased;
1994 -moz-osx-font-smoothing: grayscale;
1996 display: inline-block;
2000 .image-details .advanced-visible .advanced-toggle:after {
2004 .image-details .embed-media-settings .size {
2008 .image-details .custom-size span {
2012 .image-details .custom-size label {
2017 .image-details .custom-size span small {
2018 color: #555d66; /* #f3f3f3 background */
2022 .image-details .custom-size input {
2026 .image-details .custom-size .sep {
2028 margin: 26px 6px 0 6px;
2031 .image-details .custom-size:after {
2037 .media-embed .thumbnail {
2044 .media-embed .thumbnail img {
2049 .media-embed .thumbnail:after {
2057 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
2058 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
2062 .media-embed .setting {
2070 .image-details .embed-media-settings .setting {
2075 .image-details .actions {
2079 .image-details .hidden {
2083 .media-embed .setting input[type="text"],
2084 .media-embed .setting textarea {
2091 .image-details .embed-media-settings .setting input[type="text"],
2092 .image-details .embed-media-settings .setting textarea {
2097 .image-details .embed-media-settings .setting input.link-to-custom,
2098 .image-details .embed-media-settings .link-target,
2099 .image-details .embed-media-settings .custom-size {
2104 .image-details .embed-media-settings .link-target {
2108 .media-embed .setting input.hidden,
2109 .media-embed .setting textarea.hidden {
2113 .media-embed .setting span {
2121 .image-details .embed-media-settings .setting span {
2125 margin: 8px 1% 0 1%;
2129 .media-embed .setting .button-group {
2133 .media-embed-sidebar {
2144 /* Drag & drop on the editor upload */
2145 .wp-editor-wrap .uploader-editor {
2146 background: rgba( 150, 150, 150, 0.9 );
2152 z-index: 99998; /* under the toolbar */
2157 .wp-editor-wrap .uploader-editor-content {
2158 border: 1px dashed #fff;
2166 .wp-editor-wrap .uploader-editor .uploader-editor-title {
2171 -webkit-transform: translateY( -50% );
2172 -ms-transform: translateY(-50%);
2173 transform: translateY( -50% );
2183 .wp-editor-wrap .uploader-editor.droppable {
2184 background: rgba( 0, 86, 132, 0.9 );
2187 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
2194 .ie7 .media-frame .attachments-browser {
2198 .ie7 .media-frame .embed-url input {
2207 .ie7 .attachment-display-settings {
2211 .ie7 .attachment-preview,
2212 .ie7 .attachment-preview .thumbnail {
2217 .ie7 .media-frame .attachment .describe {
2221 .ie7 .media-sidebar .setting select {
2225 .ie7 .media-sidebar .setting input[type="text"],
2226 .ie7 .media-sidebar .setting input[type="password"],
2227 .ie7 .media-sidebar .setting input[type="email"],
2228 .ie7 .media-sidebar .setting input[type="number"],
2229 .ie7 .media-sidebar .setting input[type="search"],
2230 .ie7 .media-sidebar .setting input[type="tel"],
2231 .ie7 .media-sidebar .setting input[type="url"],
2232 .ie7 .media-sidebar .setting textarea {
2236 .ie7 .media-sidebar .setting .link-to-custom {
2245 .rtl .media-frame .search,
2246 .rtl .media-frame input[type="text"],
2247 .rtl .media-frame input[type="password"],
2248 .rtl .media-frame input[type="number"],
2249 .rtl .media-frame input[type="search"],
2250 .rtl .media-frame input[type="email"],
2251 .rtl .media-frame input[type="url"],
2252 .rtl .media-frame input[type="tel"],
2253 .rtl .media-frame textarea,
2254 .rtl .media-frame select {
2255 font-family: Tahoma, sans-serif;
2258 :lang(he-il) .rtl .media-modal,
2259 :lang(he-il) .rtl .media-frame,
2260 :lang(he-il) .rtl .media-frame .search,
2261 :lang(he-il) .rtl .media-frame input[type="text"],
2262 :lang(he-il) .rtl .media-frame input[type="password"],
2263 :lang(he-il) .rtl .media-frame input[type="number"],
2264 :lang(he-il) .rtl .media-frame input[type="search"],
2265 :lang(he-il) .rtl .media-frame input[type="email"],
2266 :lang(he-il) .rtl .media-frame input[type="url"],
2267 :lang(he-il) .rtl .media-frame textarea,
2268 :lang(he-il) .rtl .media-frame select {
2269 font-family: Arial, sans-serif;
2275 @media only screen and (max-width: 900px) {
2277 /* Drop-down menu */
2278 .media-frame:not(.hide-menu) .media-frame-title,
2279 .media-frame:not(.hide-menu) .media-frame-router,
2280 .media-frame:not(.hide-menu) .media-frame-content,
2281 .media-frame:not(.hide-menu) .media-frame-toolbar {
2285 .media-frame:not(.hide-menu) .media-frame-menu {
2290 .media-frame:not(.hide-menu) .media-menu {
2300 border: 1px solid #ccc;
2303 .media-frame:not(.hide-menu) .media-menu.visible {
2307 .media-frame:not(.hide-menu) .media-menu > a {
2312 .media-frame:not(.hide-menu) .media-menu > a.active {
2316 .media-frame:not(.hide-menu) .media-menu .separator {
2320 .media-frame:not(.hide-menu) .media-frame-title {
2324 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2325 display: inline-block;
2329 .media-frame:not(.hide-menu) .media-frame-title h1 {
2336 /* End drop-down menu */
2342 .attachments-browser .attachments,
2343 .attachments-browser .uploader-inline,
2344 .attachments-browser .media-toolbar {
2348 .media-sidebar .setting,
2349 .attachment-details .setting {
2353 .media-sidebar .setting input,
2354 .media-sidebar .setting textarea,
2355 .media-sidebar .setting span,
2356 .attachment-details .setting input,
2357 .attachment-details .setting textarea,
2358 .attachment-details .setting span,
2359 .compat-item label span {
2363 .media-sidebar .setting span,
2364 .attachment-details .setting span,
2365 .compat-item label span {
2366 text-align: inherit;
2372 .media-sidebar .setting .value,
2373 .attachment-details .setting .value {
2378 .media-sidebar .setting input[type="text"],
2379 .media-sidebar .setting input[type="password"],
2380 .media-sidebar .setting input[type="email"],
2381 .media-sidebar .setting input[type="number"],
2382 .media-sidebar .setting input[type="search"],
2383 .media-sidebar .setting input[type="tel"],
2384 .media-sidebar .setting input[type="url"],
2385 .media-sidebar .setting textarea,
2386 .media-sidebar .setting select,
2387 .attachment-details .setting input[type="text"],
2388 .attachment-details .setting input[type="password"],
2389 .attachment-details .setting input[type="email"],
2390 .attachment-details .setting input[type="number"],
2391 .attachment-details .setting input[type="search"],
2392 .attachment-details .setting input[type="tel"],
2393 .attachment-details .setting input[type="url"],
2394 .attachment-details .setting textarea,
2395 .attachment-details .setting select {
2402 .media-sidebar .setting select.columns,
2403 .attachment-details .setting select.columns {
2408 .media-frame textarea,
2409 .media-frame .search {
2413 .image-details .column-image {
2418 .image-details .column-settings {
2422 .image-details .media-modal {
2427 .image-details .embed-media-settings .setting {
2431 .image-details .embed-media-settings .setting span {
2438 .image-details .embed-media-settings .setting input.link-to-custom,
2439 .image-details .embed-media-settings .setting input[type="text"],
2440 .image-details .embed-media-settings .setting textarea {
2445 .image-details .embed-media-settings .custom-size {
2449 .collection-settings .setting input[type="checkbox"] {
2457 .media-selection:after {
2461 .media-selection .attachments {
2465 .media-modal .attachments-browser .media-toolbar .search {
2471 .media-modal .attachments-browser .media-toolbar .attachment-filters {
2475 .media-modal .attachments-browser .media-toolbar .spinner {
2479 /* Text inputs need to be 16px, or they force zooming on iOS */
2480 .media-frame input[type="text"],
2481 .media-frame input[type="password"],
2482 .media-frame input[type="number"],
2483 .media-frame input[type="search"],
2484 .media-frame input[type="email"],
2485 .media-frame input[type="url"],
2486 .media-frame textarea,
2487 .media-frame select {
2492 /* Responsive on portrait and landscape */
2493 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2494 /* Full-bleed modal */
2496 .image-details .media-modal {
2504 .media-modal-backdrop {
2512 -webkit-box-sizing: border-box;
2513 -moz-box-sizing: border-box;
2514 box-sizing: border-box;
2518 .media-sidebar.visible {
2522 .attachments-browser .attachments,
2523 .attachments-browser .uploader-inline,
2524 .attachments-browser .media-toolbar {
2528 .image-details .media-frame-title {
2534 .image-details .column-image,
2535 .image-details .column-settings {
2541 .image-details .column-settings {
2545 /* Media tabs on the top */
2546 .media-frame-content .media-toolbar .instructions {
2551 /* Landscape specific header override */
2552 @media screen and (max-height: 400px) {
2557 .media-frame-router {
2561 .media-frame-content {
2565 .attachments-browser .attachments {
2569 /* Prevent unnecessary scrolling on title input */
2570 .embed-link-settings {
2575 @media only screen and (max-width: 480px) {
2576 .media-modal-close {
2580 .media-modal .media-frame-title {
2584 .wp-core-ui.wp-customizer .media-button {
2588 .media-modal .media-frame-title h1,
2589 .media-frame:not(.hide-menu) .media-frame-title h1 {
2594 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2598 .media-frame-router,
2599 .media-frame:not(.hide-menu) .media-menu {
2603 .media-frame-content {
2607 .media-frame.hide-router .media-frame-content {
2616 (-webkit-min-device-pixel-ratio: 1.25),
2617 (min-resolution: 120dpi) {
2619 .wp-core-ui .media-modal-icon {
2620 background-image: url(../images/uploader-icons-2x.png);
2621 -webkit-background-size: 134px 15px;
2622 background-size: 134px 15px;
2625 .media-frame .spinner {
2626 background-image: url(../images/spinner-2x.gif);
2630 .media-frame-content[data-columns="1"] .attachment {
2634 .media-frame-content[data-columns="2"] .attachment {
2638 .media-frame-content[data-columns="3"] .attachment {
2642 .media-frame-content[data-columns="4"] .attachment {
2646 .media-frame-content[data-columns="5"] .attachment {
2650 .media-frame-content[data-columns="6"] .attachment {
2654 .media-frame-content[data-columns="7"] .attachment {
2658 .media-frame-content[data-columns="8"] .attachment {
2662 .media-frame-content[data-columns="9"] .attachment {
2666 .media-frame-content[data-columns="10"] .attachment {
2670 .media-frame-content[data-columns="11"] .attachment {
2674 .media-frame-content[data-columns="12"] .attachment {