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;
26 .media-frame textarea {
31 .wp-admin .media-frame select {
42 .media-frame a:active {
46 .media-frame a:focus {
49 0 0 2px 1px rgba(30, 140, 190, .8);
52 0 0 2px 1px rgba(30, 140, 190, .8);
57 .media-frame a.button {
61 .media-frame a.button:hover {
65 .media-frame a.button-primary,
66 .media-frame a.button-primary:hover {
70 .media-frame input[type="text"],
71 .media-frame input[type="password"],
72 .media-frame input[type="number"],
73 .media-frame input[type="search"],
74 .media-frame input[type="email"],
75 .media-frame input[type="url"],
76 .media-frame textarea,
78 font-family: "Open Sans", sans-serif;
82 border-color: #dfdfdf;
85 .media-frame input[type="text"]:focus,
86 .media-frame input[type="password"]:focus,
87 .media-frame input[type="number"]:focus,
88 .media-frame input[type="search"]:focus,
89 .media-frame input[type="email"]:focus,
90 .media-frame input[type="url"]:focus,
91 .media-frame textarea:focus,
92 .media-frame select:focus {
93 border-color: #5b9dd9;
101 .media-frame input:disabled,
102 .media-frame textarea:disabled,
103 .media-frame input[readonly],
104 .media-frame textarea[readonly] {
105 background-color: #eee;
108 .media-frame input[type="search"] {
109 -webkit-appearance: textfield;
112 .media-frame :-moz-placeholder {
116 .media-frame .hidden {
121 * jQuery UI Draggable/Sortable 1.11.4
122 * http://jqueryui.com
124 * Copyright jQuery Foundation and other contributors
125 * Released under the MIT license.
126 * http://jquery.org/license
128 .ui-draggable-handle,
129 .ui-sortable-handle {
130 -ms-touch-action: none;
146 .wp-customizer .media-modal {
150 .media-modal-backdrop {
162 .wp-customizer .media-modal-backdrop {
174 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
175 transition: color .1s ease-in-out, background .1s ease-in-out;
178 .media-modal-close:active {
179 -webkit-box-shadow: none;
183 .media-modal-close span.media-modal-icon {
184 background-image: none;
187 .media-modal-close .media-modal-icon:before {
189 font: normal 20px/1 dashicons;
191 vertical-align: middle;
192 -webkit-font-smoothing: antialiased;
193 -moz-osx-font-smoothing: grayscale;
197 .media-modal-close:hover .media-modal-icon:before {
201 .media-modal-close:active {
205 .media-modal-content {
213 -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
214 box-shadow: 0 5px 15px rgba(0,0,0,0.7);
216 -webkit-font-smoothing: subpixel-antialiased;
219 .media-modal-content .media-frame select.attachment-filters {
223 width: -webkit-calc(48% - 12px);
224 width: calc(48% - 12px);
227 .media-modal-content .attachments-browser .media-toolbar-secondary {
231 .media-modal-content .media-toolbar-primary.search-form {
235 .media-modal-content .media-toolbar-primary .media-button {
239 .media-modal-content .attachments-browser .search {
243 /* higher specificity */
244 .wp-core-ui .media-modal-icon {
245 background-image: url(../images/uploader-icons.png);
246 background-repeat: no-repeat;
260 border: 0 solid #dfdfdf;
264 .media-toolbar-primary {
269 .media-toolbar-secondary {
274 .media-toolbar-primary > .media-button,
275 .media-toolbar-primary > .media-button-group {
281 .media-toolbar-secondary > .media-button,
282 .media-toolbar-secondary > .media-button-group {
296 padding: 0 16px 24px;
299 border-left: 1px solid #ddd;
301 -webkit-overflow-scrolling: touch;
304 .hide-toolbar .media-sidebar {
308 .media-sidebar .sidebar-title {
311 padding: 12px 10px 10px;
315 .media-sidebar .sidebar-content {
317 margin-bottom: 130px;
320 .media-sidebar .search {
325 .media-sidebar h3, /* Back-compat for pre-4.4 */
326 .image-details h3, /* Back-compat for pre-4.4 */
331 text-transform: uppercase;
337 .media-sidebar .setting,
338 .attachment-details .setting {
345 .media-sidebar .setting label,
346 .attachment-details .setting label {
350 .media-sidebar .setting .link-to-custom,
351 .attachment-details .setting .link-to-custom {
355 .media-sidebar .setting span,
356 .attachment-details .setting span {
361 word-wrap: break-word;
364 .media-sidebar .setting .name {
368 .media-sidebar .setting select,
369 .attachment-details .setting select {
373 .media-sidebar .setting input[type="checkbox"],
374 .media-sidebar .field input[type="checkbox"],
375 .media-sidebar .setting input[type="radio"],
376 .media-sidebar .field input[type="radio"],
377 .attachment-details .setting input[type="checkbox"],
378 .attachment-details .field input[type="checkbox"],
379 .attachment-details .setting input[type="radio"],
380 .attachment-details .field input[type="radio"] {
386 .media-sidebar .setting span,
387 .attachment-details .setting span,
388 .compat-item label span {
397 .compat-item label span {
401 .media-sidebar .setting input[type="text"],
402 .media-sidebar .setting input[type="password"],
403 .media-sidebar .setting input[type="email"],
404 .media-sidebar .setting input[type="number"],
405 .media-sidebar .setting input[type="search"],
406 .media-sidebar .setting input[type="tel"],
407 .media-sidebar .setting input[type="url"],
408 .media-sidebar .setting textarea,
409 .media-sidebar .setting .value,
410 .attachment-details .setting input[type="text"],
411 .attachment-details .setting input[type="password"],
412 .attachment-details .setting input[type="email"],
413 .attachment-details .setting input[type="number"],
414 .attachment-details .setting input[type="search"],
415 .attachment-details .setting input[type="tel"],
416 .attachment-details .setting input[type="url"],
417 .attachment-details .setting textarea,
418 .attachment-details .setting .value {
419 -webkit-box-sizing: border-box;
420 -moz-box-sizing: border-box;
421 box-sizing: border-box;
427 .media-sidebar .setting .value,
428 .attachment-details .setting .value {
433 .media-sidebar .setting textarea,
434 .attachment-details .setting textarea,
435 .compat-item .field textarea {
440 .media-sidebar select,
441 .attachment-details select {
465 .compat-item .field {
471 .compat-item .label {
478 .compat-item .label span {
483 .compat-item .field {
489 .compat-item .field input[type="text"],
490 .compat-item .field input[type="password"],
491 .compat-item .field input[type="email"],
492 .compat-item .field input[type="number"],
493 .compat-item .field input[type="search"],
494 .compat-item .field input[type="tel"],
495 .compat-item .field input[type="url"],
496 .compat-item .field textarea {
499 -webkit-box-sizing: border-box;
500 -moz-box-sizing: border-box;
501 box-sizing: border-box;
504 .sidebar-for-errors .attachment-details,
505 .sidebar-for-errors .compat-item,
506 .sidebar-for-errors .media-sidebar .media-progress-bar,
507 .sidebar-for-errors .upload-details {
508 display: none !important;
523 border-right-width: 1px;
524 border-right-style: solid;
525 border-right-color: #ccc;
526 -webkit-user-select: none;
527 -moz-user-select: none;
528 -ms-user-select: none;
540 text-decoration: none;
543 .media-menu > a:hover {
545 background: rgba( 0, 0, 0, 0.04 );
548 .media-menu > a:active {
553 .media-menu .active:hover {
558 .media-menu .separator {
562 border-top: 1px solid #ddd;
573 -webkit-user-select: none;
574 -moz-user-select: none;
575 -ms-user-select: none;
580 -webkit-transition: none;
587 padding: 8px 10px 9px;
592 text-decoration: none;
595 .media-router > a:last-child {
599 .media-router > a:active {
603 .media-router .active,
604 .media-router .active:hover {
608 .media-router .active,
609 .media-router > a.active:last-child {
612 border: 1px solid #ddd;
616 .media-router .active:after {
650 .media-frame-router {
659 .media-frame-content {
670 border-top: 1px solid #ddd;
671 border-bottom: 1px solid #ddd;
674 .media-frame-toolbar {
683 .media-frame.hide-menu .media-frame-title,
684 .media-frame.hide-menu .media-frame-router,
685 .media-frame.hide-menu .media-frame-toolbar,
686 .media-frame.hide-menu .media-frame-content {
690 .media-frame.hide-menu .media-frame-menu {
694 .media-frame.hide-toolbar .media-frame-content {
698 .media-frame.hide-toolbar .media-frame-toolbar {
702 .media-frame.hide-router .media-frame-content {
706 .media-frame.hide-router .media-frame-router {
710 .media-frame.hide-router .media-frame-title {
711 border-bottom: 1px solid #dfdfdf;
712 -webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
713 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
716 .media-frame-title .dashicons {
720 .media-frame-title h1 {
727 .media-frame-title .suggested-dimensions {
733 .media-frame-content .crop-content {
737 .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
741 .media-frame-content .crop-content .crop-image {
748 .media-frame-content .crop-content .upload-errors
755 margin-right: -150px;
762 .media-frame .media-iframe {
766 .media-frame .media-iframe,
767 .media-frame .media-iframe iframe {
774 * Attachment Browser Filters
776 .media-frame select.attachment-filters {
780 max-width: -webkit-calc(48% - 12px);
781 max-width: calc(48% - 12px);
784 .media-frame select.attachment-filters:last-of-type {
791 .media-frame .search {
796 font-family: "Open Sans", sans-serif;
797 -webkit-appearance: none;
800 .media-toolbar-primary .search {
807 .wp-core-ui .attachments {
809 -webkit-overflow-scrolling: touch;
815 .wp-core-ui .attachment {
824 -webkit-user-select: none;
825 -moz-user-select: none;
826 -ms-user-select: none;
829 -webkit-box-sizing: border-box;
830 -moz-box-sizing: border-box;
831 box-sizing: border-box;
834 .wp-core-ui .attachment:focus,
835 .wp-core-ui .selected.attachment:focus,
836 .wp-core-ui .attachment.details:focus {
838 inset 0 0 2px 3px #fff,
839 inset 0 0 0 7px #5b9dd9;
841 inset 0 0 2px 3px #fff,
842 inset 0 0 0 7px #5b9dd9;
846 .wp-core-ui .selected.attachment {
848 inset 0 0 0 5px #fff,
849 inset 0 0 0 7px #ccc;
851 inset 0 0 0 5px #fff,
852 inset 0 0 0 7px #ccc;
855 .wp-core-ui .attachment.details {
857 inset 0 0 0 3px #fff,
858 inset 0 0 0 7px #0073aa;
860 inset 0 0 0 3px #fff,
861 inset 0 0 0 7px #0073aa;
864 .wp-core-ui .attachment-preview {
867 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
868 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
870 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
871 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
876 .wp-core-ui .attachment-preview:before {
882 .wp-core-ui .attachment .icon {
887 .wp-core-ui .attachment .thumbnail {
895 -webkit-transition: opacity .1s;
896 transition: opacity .1s;
899 .wp-core-ui .attachment .portrait img {
903 .wp-core-ui .attachment .landscape img {
907 .wp-core-ui .attachment .thumbnail:after {
915 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
916 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
920 .wp-core-ui .attachment .thumbnail img {
925 .wp-core-ui .attachment .thumbnail .centered {
931 -webkit-transform: translate( 50%, 50% );
932 -ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
933 transform: translate( 50%, 50% );
936 .wp-core-ui .attachment .thumbnail .centered img {
937 -webkit-transform: translate( -50%, -50% );
938 -ms-transform: translate(-50%,-50%);
939 transform: translate( -50%, -50% );
942 .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
943 -webkit-transform: translate( -50%, -70% );
944 -ms-transform: translate(-50%,-70%);
945 transform: translate( -50%, -70% );
948 .ie8 .wp-core-ui .attachment img.icon {
953 .wp-core-ui .attachment .filename {
960 word-wrap: break-word;
963 background: rgba( 255, 255, 255, 0.8 );
964 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
965 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
968 .wp-core-ui .attachment .filename div {
972 .wp-core-ui .attachment .thumbnail img {
976 .wp-core-ui .attachment-close {
984 background-color: #fff;
985 background-position: -96px 4px;
986 -webkit-border-radius: 3px;
988 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
989 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
992 .wp-core-ui .attachment-close:hover,
993 .wp-core-ui .attachment-close:focus {
994 background-position: -36px 4px;
997 .wp-core-ui .attachment .check {
1008 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
1009 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
1012 .wp-core-ui .attachment .check .media-modal-icon {
1014 background-position: -1px 0;
1020 .wp-core-ui .attachment .check:hover .media-modal-icon {
1021 background-position: -40px 0;
1024 .wp-core-ui .attachment.selected .check {
1028 .wp-core-ui .attachment.details .check,
1029 .wp-core-ui .attachment.selected .check:focus,
1030 .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
1031 background-color: #0073aa;
1040 .wp-core-ui .attachment.details .check .media-modal-icon,
1041 .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
1042 background-position: -21px 0;
1045 .wp-core-ui .attachment.details .check:hover .media-modal-icon,
1046 .wp-core-ui .attachment.selected .check:focus .media-modal-icon,
1047 .wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
1048 background-position: -60px 0;
1051 .wp-core-ui .media-frame .attachment .describe {
1058 -webkit-border-radius: 0;
1063 * Attachments Browser
1065 .media-frame .attachments-browser {
1072 .attachments-browser .media-toolbar {
1077 .attachments-browser.hide-sidebar .media-toolbar {
1081 .attachments-browser .media-toolbar-primary > .media-button,
1082 .attachments-browser .media-toolbar-primary > .media-button-group,
1083 .attachments-browser .media-toolbar-secondary > .media-button,
1084 .attachments-browser .media-toolbar-secondary > .media-button-group {
1088 .attachments-browser .attachments {
1089 padding: 2px 8px 8px;
1092 .attachments-browser .attachments,
1093 .attachments-browser .uploader-inline {
1103 .attachments-browser .uploader-inline.hidden {
1107 .attachments-browser .media-toolbar-primary {
1111 .attachments-browser .media-toolbar-secondary {
1115 .uploader-inline .close {
1116 background-color: transparent;
1128 .uploader-inline .close:before {
1129 font: normal 30px/50px dashicons !important;
1131 display: inline-block;
1136 .attachments-browser.hide-sidebar .attachments,
1137 .attachments-browser.hide-sidebar .uploader-inline {
1142 .attachments-browser .instructions {
1143 display: inline-block;
1148 margin-right: 0.5em;
1151 .attachments-browser .no-media {
1152 padding: 2em 0 0 2em;
1158 .media-progress-bar {
1163 -webkit-border-radius: 10px;
1164 border-radius: 10px;
1165 background: #dfdfdf;
1166 background: rgba( 0, 0, 0, 0.1 );
1169 .media-progress-bar div {
1173 background: #0073aa;
1174 -webkit-border-radius: 10px;
1175 border-radius: 10px;
1176 -webkit-transition: width 300ms;
1177 transition: width 300ms;
1180 .media-uploader-status .media-progress-bar {
1185 .uploading.media-uploader-status .media-progress-bar {
1189 .attachment-preview .media-progress-bar {
1197 .media-uploader-status {
1200 padding-bottom: 10px;
1204 .uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
1205 .uploader-inline .media-uploader-status h2 {
1209 .media-uploader-status .upload-details {
1215 .uploading.media-uploader-status .upload-details {
1219 .media-uploader-status .upload-detail-separator {
1223 .media-uploader-status .upload-count {
1227 .media-uploader-status .upload-dismiss-errors,
1228 .media-uploader-status .upload-errors {
1232 .errors.media-uploader-status .upload-dismiss-errors,
1233 .errors.media-uploader-status .upload-errors {
1237 .media-uploader-status .upload-dismiss-errors {
1238 text-decoration: none;
1241 .media-sidebar .media-uploader-status .upload-dismiss-errors {
1247 .upload-errors .upload-error {
1249 margin-bottom: 12px;
1251 border-left: 4px solid #dc3232;
1252 -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1253 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1256 .uploader-inline .upload-errors .upload-error {
1257 background-color: #fbeaea;
1258 -webkit-box-shadow: none;
1262 .upload-errors .upload-error-filename {
1266 .upload-errors .upload-error-message {
1269 word-wrap: break-word;
1278 background: rgba( 0, 86, 132, 0.9 );
1283 -webkit-transition: opacity 250ms;
1284 transition: opacity 250ms;
1287 .uploader-window-content {
1293 border: 1px dashed #fff;
1296 .uploader-window h3, /* Back-compat for pre-4.4 */
1297 .uploader-window h1 {
1303 -webkit-transform: translateY( -50% );
1304 -ms-transform: translateY(-50%);
1305 transform: translateY( -50% );
1311 .uploader-window .media-progress-bar {
1314 background: transparent;
1319 .uploader-window .media-progress-bar div {
1323 .uploading .uploader-window .media-progress-bar {
1327 .media-frame .uploader-inline {
1328 margin-bottom: 20px;
1333 .uploader-inline-content {
1340 .uploader-inline-content .upload-ui {
1344 .uploader-inline-content .post-upload-ui {
1348 .uploader-inline .has-upload-message .upload-ui {
1352 .uploader-inline h3, /* Back-compat for pre-4.4 */
1353 .uploader-inline h2 {
1360 .uploader-inline .has-upload-message .upload-instructions {
1363 font-weight: normal;
1366 .uploader-inline .drop-instructions {
1370 .supports-drag-drop .uploader-inline .drop-instructions {
1374 .uploader-inline p {
1379 .uploader-inline .media-progress-bar {
1383 .uploading.uploader-inline .media-progress-bar {
1387 .uploader-inline .browser {
1388 display: inline-block !important;
1400 padding: 0 0 0 16px;
1402 white-space: nowrap;
1405 .media-selection .selection-info {
1406 display: inline-block;
1410 vertical-align: top;
1413 .media-selection.empty,
1414 .media-selection.editing {
1418 .media-selection.one .edit-selection {
1422 .media-selection .count {
1430 .media-selection .button-link {
1433 margin: 1px 8px 1px -8px;
1435 border-right: 1px solid #dfdfdf;
1439 .media-selection .button-link:hover,
1440 .media-selection .button-link:focus {
1444 .media-selection .button-link:last-child {
1449 .selection-info .clear-selection {
1453 .selection-info .clear-selection:hover,
1454 .selection-info .clear-selection:focus {
1458 .media-selection .selection-view {
1459 display: inline-block;
1460 vertical-align: top;
1463 .media-selection .attachments {
1464 display: inline-block;
1469 vertical-align: top;
1472 .media-selection .attachment {
1478 .media-selection .attachment .thumbnail {
1485 .media-selection .attachment .icon {
1489 .media-selection .attachment-preview {
1490 -webkit-box-shadow: none;
1495 .wp-core-ui .media-selection .attachment:focus,
1496 .wp-core-ui .media-selection .selected.attachment:focus,
1497 .wp-core-ui .media-selection .attachment.details:focus {
1500 0 0 2px 3px #5b9dd9;
1503 0 0 2px 3px #5b9dd9;
1506 .wp-core-ui .media-selection .selected.attachment {
1507 -webkit-box-shadow: none;
1511 .wp-core-ui .media-selection .attachment.details {
1520 .media-selection:after {
1528 background-image: -webkit-gradient(linear, right top, left top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
1529 background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1530 background-image: linear-gradient(to left, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1533 .media-selection .attachment .filename {
1540 .media-frame .spinner {
1541 background: url(../images/spinner.gif) no-repeat;
1542 -webkit-background-size: 20px 20px;
1543 background-size: 20px 20px;
1545 display: inline-block;
1548 filter: alpha(opacity=70);
1552 vertical-align: middle;
1555 .media-frame .spinner.is-active {
1556 visibility: visible;
1559 .media-toolbar .spinner {
1564 * Attachment Details
1566 .attachment-details {
1571 .attachment-details .settings-save-status {
1573 text-transform: none;
1577 .attachment-details .settings-save-status .spinner {
1581 .attachment-details .settings-save-status .saved {
1586 .attachment-details.save-waiting .settings-save-status .spinner {
1587 visibility: visible;
1590 .attachment-details.save-complete .settings-save-status .saved {
1597 margin-bottom: 16px;
1600 border-bottom: 1px solid #ddd;
1601 padding-bottom: 11px;
1604 .attachment-info .filename {
1607 word-wrap: break-word;
1610 .attachment-info .thumbnail {
1620 .uploading .attachment-info .thumbnail {
1623 -webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1624 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1627 .uploading .attachment-info .media-progress-bar {
1631 .attachment-info .thumbnail-image:after {
1639 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1640 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1644 .attachment-info .thumbnail img {
1651 .attachment-info .details {
1657 .attachment-info .edit-attachment,
1658 .attachment-info .delete-attachment,
1659 .attachment-info .trash-attachment,
1660 .attachment-info .untrash-attachment {
1662 text-decoration: none;
1663 white-space: nowrap;
1666 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1670 .attachment-info .edit-attachment {
1674 .media-modal .delete-attachment,
1675 .media-modal .trash-attachment,
1676 .media-modal .untrash-attachment {
1682 .media-modal .delete-attachment:hover,
1683 .media-modal .delete-attachment:focus,
1684 .media-modal .trash-attachment:hover,
1685 .media-modal .trash-attachment:focus,
1686 .media-modal .untrash-attachment:hover,
1687 .media-modal .untrash-attachment:focus {
1692 * Attachment Display Settings
1694 .attachment-display-settings {
1700 .attachment-display-settings h4 {
1701 margin: 1.4em 0 0.4em;
1704 .collection-settings {
1708 .collection-settings .setting input[type="checkbox"] {
1713 .collection-settings .setting span {
1720 .media-modal .imgedit-wrap {
1724 .media-modal .imgedit-wait {
1725 height: auto !important;
1731 .media-modal .imgedit-wrap .imgedit-panel-content {
1741 .media-modal .imgedit-wrap .imgedit-settings {
1742 background: #f3f3f3;
1743 border-left: 1px solid #ddd;
1744 padding: 0 16px 16px;
1753 .media-modal .imgedit-group {
1756 border-bottom: 1px solid #ddd;
1757 -webkit-box-shadow: none;
1760 margin-bottom: 16px;
1762 padding-bottom: 16px;
1763 position: relative; /* RTL fix, #WP29352 */
1766 .media-modal .imgedit-group:last-of-type {
1772 .media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
1773 .media-modal .imgedit-group-top h2 {
1774 text-transform: uppercase;
1781 .media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
1782 .media-modal .imgedit-group-top h2 a {
1783 text-decoration: none;
1787 .media-modal .imgedit-help-toggle {
1793 .media-modal .imgedit-help-toggled span.dashicons:before {
1797 .media-modal .imgedit-group img {
1801 .media-modal .imgedit-wrap div.updated {
1803 margin-bottom: 16px;
1808 * Embed from URL and Image Details
1820 .media-frame .embed-url input {
1825 -webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1826 box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1829 .media-frame .embed-url .spinner {
1835 .media-frame .embed-loading .embed-url .spinner {
1836 visibility: visible;
1839 .embed-link-settings,
1840 .embed-media-settings {
1846 padding: 16px 16px 32px;
1850 .media-embed .embed-link-settings {
1851 /* avoid Firefox to give focus to the embed preview container parent */
1856 .embed-preview iframe,
1857 .embed-preview embed,
1858 .mejs-container video {
1860 vertical-align: middle;
1864 display: inline-block;
1867 .embed-preview img {
1872 .mejs-container:focus {
1873 outline: 1px solid #5b9dd9;
1874 -webkit-box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8);
1875 box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8);
1878 .image-details .media-modal {
1883 .image-details .media-frame-title,
1884 .image-details .media-frame-content,
1885 .image-details .media-frame-router {
1889 .image-details .embed-media-settings {
1895 .image-details .embed-media-settings,
1896 .image-details .embed-media-settings div {
1897 -webkit-box-sizing: border-box;
1898 -moz-box-sizing: border-box;
1899 box-sizing: border-box;
1902 .image-details .column-settings {
1903 background: #f3f3f3;
1904 border-right: 1px solid #ddd;
1912 .image-details .column-settings h3, /* Back-compat for pre-4.4 */
1913 .image-details .column-settings h2 {
1916 border-top: 1px solid #ddd;
1920 .image-details .column-image {
1927 .image-details .image {
1931 .image-details .image img {
1936 .image-details .advanced-toggle {
1939 text-transform: uppercase;
1942 .image-details .advanced-toggle:after {
1943 font: normal 20px/1 dashicons;
1945 vertical-align: top;
1946 -webkit-font-smoothing: antialiased;
1947 -moz-osx-font-smoothing: grayscale;
1949 display: inline-block;
1953 .image-details .advanced-visible .advanced-toggle:after {
1957 .image-details .embed-media-settings .size {
1961 .image-details .custom-size span {
1965 .image-details .custom-size label {
1970 .image-details .custom-size span small {
1975 .image-details .custom-size input {
1979 .image-details .custom-size .sep {
1981 margin: 26px 6px 0 6px;
1984 .image-details .custom-size:after {
1990 .media-embed .thumbnail {
1997 .media-embed .thumbnail img {
2002 .media-embed .thumbnail:after {
2010 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
2011 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
2015 .media-embed .setting {
2023 .image-details .embed-media-settings .setting {
2028 .image-details .actions {
2032 .image-details .hidden {
2036 .media-embed .setting input[type="text"],
2037 .media-embed .setting textarea {
2044 .image-details .embed-media-settings .setting input[type="text"],
2045 .image-details .embed-media-settings .setting textarea {
2050 .image-details .embed-media-settings .setting input.link-to-custom,
2051 .image-details .embed-media-settings .link-target,
2052 .image-details .embed-media-settings .custom-size {
2057 .image-details .embed-media-settings .link-target {
2061 .media-embed .setting input.hidden,
2062 .media-embed .setting textarea.hidden {
2066 .media-embed .setting span {
2074 .image-details .embed-media-settings .setting span {
2078 margin: 8px 1% 0 1%;
2082 .media-embed .setting .button-group {
2086 .media-embed-sidebar {
2097 /* Drag & drop on the editor upload */
2098 .wp-editor-wrap .uploader-editor {
2099 background: rgba( 150, 150, 150, 0.9 );
2105 z-index: 99998; /* under the toolbar */
2110 .wp-editor-wrap .uploader-editor-content {
2111 border: 1px dashed #fff;
2119 .wp-editor-wrap .uploader-editor .uploader-editor-title {
2124 -webkit-transform: translateY( -50% );
2125 -ms-transform: translateY(-50%);
2126 transform: translateY( -50% );
2136 .wp-editor-wrap .uploader-editor.droppable {
2137 background: rgba( 0, 86, 132, 0.9 );
2140 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
2147 .ie7 .media-frame .attachments-browser {
2151 .ie7 .media-frame .embed-url input {
2160 .ie7 .attachment-display-settings {
2164 .ie7 .attachment-preview,
2165 .ie7 .attachment-preview .thumbnail {
2170 .ie7 .media-frame .attachment .describe {
2174 .ie7 .media-sidebar .setting select {
2178 .ie7 .media-sidebar .setting input[type="text"],
2179 .ie7 .media-sidebar .setting input[type="password"],
2180 .ie7 .media-sidebar .setting input[type="email"],
2181 .ie7 .media-sidebar .setting input[type="number"],
2182 .ie7 .media-sidebar .setting input[type="search"],
2183 .ie7 .media-sidebar .setting input[type="tel"],
2184 .ie7 .media-sidebar .setting input[type="url"],
2185 .ie7 .media-sidebar .setting textarea {
2189 .ie7 .media-sidebar .setting .link-to-custom {
2198 .rtl .media-frame .search,
2199 .rtl .media-frame input[type="text"],
2200 .rtl .media-frame input[type="password"],
2201 .rtl .media-frame input[type="number"],
2202 .rtl .media-frame input[type="search"],
2203 .rtl .media-frame input[type="email"],
2204 .rtl .media-frame input[type="url"],
2205 .rtl .media-frame input[type="tel"],
2206 .rtl .media-frame textarea,
2207 .rtl .media-frame select {
2208 font-family: Tahoma, sans-serif;
2211 :lang(he-il) .rtl .media-modal,
2212 :lang(he-il) .rtl .media-frame,
2213 :lang(he-il) .rtl .media-frame .search,
2214 :lang(he-il) .rtl .media-frame input[type="text"],
2215 :lang(he-il) .rtl .media-frame input[type="password"],
2216 :lang(he-il) .rtl .media-frame input[type="number"],
2217 :lang(he-il) .rtl .media-frame input[type="search"],
2218 :lang(he-il) .rtl .media-frame input[type="email"],
2219 :lang(he-il) .rtl .media-frame input[type="url"],
2220 :lang(he-il) .rtl .media-frame textarea,
2221 :lang(he-il) .rtl .media-frame select {
2222 font-family: Arial, sans-serif;
2228 @media only screen and (max-width: 900px) {
2230 /* Drop-down menu */
2231 .media-frame:not(.hide-menu) .media-frame-title,
2232 .media-frame:not(.hide-menu) .media-frame-router,
2233 .media-frame:not(.hide-menu) .media-frame-content,
2234 .media-frame:not(.hide-menu) .media-frame-toolbar {
2238 .media-frame:not(.hide-menu) .media-frame-menu {
2243 .media-frame:not(.hide-menu) .media-menu {
2253 border: 1px solid #ccc;
2256 .media-frame:not(.hide-menu) .media-menu.visible {
2260 .media-frame:not(.hide-menu) .media-menu > a {
2265 .media-frame:not(.hide-menu) .media-menu > a.active {
2269 .media-frame:not(.hide-menu) .media-menu .separator {
2273 .media-frame:not(.hide-menu) .media-frame-title {
2277 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2278 display: inline-block;
2282 .media-frame:not(.hide-menu) .media-frame-title h1 {
2289 /* End drop-down menu */
2295 .attachments-browser .attachments,
2296 .attachments-browser .uploader-inline,
2297 .attachments-browser .media-toolbar {
2301 .media-sidebar .setting,
2302 .attachment-details .setting {
2306 .media-sidebar .setting input,
2307 .media-sidebar .setting textarea,
2308 .media-sidebar .setting span,
2309 .attachment-details .setting input,
2310 .attachment-details .setting textarea,
2311 .attachment-details .setting span,
2312 .compat-item label span {
2316 .media-sidebar .setting span,
2317 .attachment-details .setting span,
2318 .compat-item label span {
2319 text-align: inherit;
2325 .media-sidebar .setting .value,
2326 .attachment-details .setting .value {
2331 .media-sidebar .setting input[type="text"],
2332 .media-sidebar .setting input[type="password"],
2333 .media-sidebar .setting input[type="email"],
2334 .media-sidebar .setting input[type="number"],
2335 .media-sidebar .setting input[type="search"],
2336 .media-sidebar .setting input[type="tel"],
2337 .media-sidebar .setting input[type="url"],
2338 .media-sidebar .setting textarea,
2339 .media-sidebar .setting select,
2340 .attachment-details .setting input[type="text"],
2341 .attachment-details .setting input[type="password"],
2342 .attachment-details .setting input[type="email"],
2343 .attachment-details .setting input[type="number"],
2344 .attachment-details .setting input[type="search"],
2345 .attachment-details .setting input[type="tel"],
2346 .attachment-details .setting input[type="url"],
2347 .attachment-details .setting textarea,
2348 .attachment-details .setting select {
2355 .media-sidebar .setting select.columns,
2356 .attachment-details .setting select.columns {
2361 .media-frame textarea,
2362 .media-frame .search {
2366 .image-details .column-image {
2371 .image-details .column-settings {
2375 .image-details .media-modal {
2380 .image-details .embed-media-settings .setting {
2384 .image-details .embed-media-settings .setting span {
2391 .image-details .embed-media-settings .setting input.link-to-custom,
2392 .image-details .embed-media-settings .setting input[type="text"],
2393 .image-details .embed-media-settings .setting textarea {
2398 .image-details .embed-media-settings .custom-size {
2402 .collection-settings .setting input[type="checkbox"] {
2410 .media-selection:after {
2414 .media-selection .attachments {
2418 .media-modal .attachments-browser .media-toolbar .search {
2424 .media-modal .attachments-browser .media-toolbar .attachment-filters {
2428 .media-modal .attachments-browser .media-toolbar .spinner {
2432 /* Text inputs need to be 16px, or they force zooming on iOS */
2433 .media-frame input[type="text"],
2434 .media-frame input[type="password"],
2435 .media-frame input[type="number"],
2436 .media-frame input[type="search"],
2437 .media-frame input[type="email"],
2438 .media-frame input[type="url"],
2439 .media-frame textarea,
2440 .media-frame select {
2445 /* Responsive on portrait and landscape */
2446 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2447 /* Full-bleed modal */
2449 .image-details .media-modal {
2457 .media-modal-backdrop {
2465 -webkit-box-sizing: border-box;
2466 -moz-box-sizing: border-box;
2467 box-sizing: border-box;
2471 .media-sidebar.visible {
2475 .attachments-browser .attachments,
2476 .attachments-browser .uploader-inline,
2477 .attachments-browser .media-toolbar {
2481 .image-details .media-frame-title {
2487 .image-details .column-image,
2488 .image-details .column-settings {
2494 .image-details .column-settings {
2498 /* Media tabs on the top */
2499 .media-frame-content .media-toolbar .instructions {
2504 /* Landscape specific header override */
2505 @media screen and (max-height: 400px) {
2510 .media-frame-router {
2514 .media-frame-content {
2518 .attachments-browser .attachments {
2522 /* Prevent unnecessary scrolling on title input */
2523 .embed-link-settings {
2528 @media only screen and (max-width: 480px) {
2529 .media-modal-close {
2533 .media-modal .media-frame-title {
2537 .wp-core-ui.wp-customizer .media-button {
2541 .media-modal .media-frame-title h1,
2542 .media-frame:not(.hide-menu) .media-frame-title h1 {
2547 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2551 .media-frame-router,
2552 .media-frame:not(.hide-menu) .media-menu {
2556 .media-frame-content {
2560 .media-frame.hide-router .media-frame-content {
2569 (-webkit-min-device-pixel-ratio: 1.25),
2570 (min-resolution: 120dpi) {
2573 background-image: url(../images/uploader-icons-2x.png);
2574 -webkit-background-size: 134px 15px;
2575 background-size: 134px 15px;
2578 .media-frame .spinner {
2579 background-image: url(../images/spinner-2x.gif);
2583 .media-frame-content[data-columns="1"] .attachment {
2587 .media-frame-content[data-columns="2"] .attachment {
2591 .media-frame-content[data-columns="3"] .attachment {
2595 .media-frame-content[data-columns="4"] .attachment {
2599 .media-frame-content[data-columns="5"] .attachment {
2603 .media-frame-content[data-columns="6"] .attachment {
2607 .media-frame-content[data-columns="7"] .attachment {
2611 .media-frame-content[data-columns="8"] .attachment {
2615 .media-frame-content[data-columns="9"] .attachment {
2619 .media-frame-content[data-columns="10"] .attachment {
2623 .media-frame-content[data-columns="11"] .attachment {
2627 .media-frame-content[data-columns="12"] .attachment {