5 -webkit-box-sizing: content-box;
6 -moz-box-sizing: content-box;
7 box-sizing: content-box;
12 .media-frame 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 {
41 .media-frame a:hover {
45 .media-frame a.button {
49 .media-frame a.button:hover {
53 .media-frame a.button-primary,
54 .media-frame a.button-primary:hover {
58 .media-frame input[type="text"],
59 .media-frame input[type="password"],
60 .media-frame input[type="number"],
61 .media-frame input[type="search"],
62 .media-frame input[type="email"],
63 .media-frame input[type="url"],
64 .media-frame textarea,
66 font-family: "Open Sans", sans-serif;
70 border-color: #dfdfdf;
73 .media-frame input[type="text"]:focus,
74 .media-frame input[type="password"]:focus,
75 .media-frame input[type="number"]:focus,
76 .media-frame input[type="search"]:focus,
77 .media-frame input[type="email"]:focus,
78 .media-frame input[type="url"]:focus,
79 .media-frame textarea:focus,
80 .media-frame select:focus {
81 border-color: #5b9dd9;
89 .media-frame input:disabled,
90 .media-frame textarea:disabled,
91 .media-frame input[readonly],
92 .media-frame textarea[readonly] {
93 background-color: #eee;
96 .media-frame input[type="search"] {
97 -webkit-appearance: textfield;
100 .media-frame :-moz-placeholder {
104 .media-frame .hidden {
109 * jQuery UI Draggable/Sortable 1.11.4
110 * http://jqueryui.com
112 * Copyright jQuery Foundation and other contributors
113 * Released under the MIT license.
114 * http://jquery.org/license
116 .ui-draggable-handle,
117 .ui-sortable-handle {
118 -ms-touch-action: none;
134 .wp-customizer .media-modal {
138 .media-modal-backdrop {
150 .wp-customizer .media-modal-backdrop {
162 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
163 transition: color .1s ease-in-out, background .1s ease-in-out;
166 .media-modal-close:active {
167 -webkit-box-shadow: none;
171 .media-modal-close span.media-modal-icon {
172 background-image: none;
175 .media-modal-close .media-modal-icon:before {
177 font: normal 20px/1 'dashicons';
179 vertical-align: middle;
180 -webkit-font-smoothing: antialiased;
181 -moz-osx-font-smoothing: grayscale;
185 .media-modal-close:hover .media-modal-icon:before {
189 .media-modal-close:active {
193 .media-modal-content {
201 -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
202 box-shadow: 0 5px 15px rgba(0,0,0,0.7);
204 -webkit-font-smoothing: subpixel-antialiased;
207 /* higher specificity */
208 .wp-core-ui .media-modal-icon {
209 background-image: url(../images/uploader-icons.png);
210 background-repeat: no-repeat;
224 border: 0 solid #dfdfdf;
228 .media-toolbar-primary {
233 .media-toolbar-secondary {
238 .media-toolbar-primary > .media-button,
239 .media-toolbar-primary > .media-button-group {
245 .media-toolbar-secondary > .media-button,
246 .media-toolbar-secondary > .media-button-group {
260 padding: 0 16px 24px;
263 border-right: 1px solid #ddd;
265 -webkit-overflow-scrolling: touch;
268 .hide-toolbar .media-sidebar {
272 .media-sidebar .sidebar-title {
275 padding: 12px 10px 10px;
279 .media-sidebar .sidebar-content {
281 margin-bottom: 130px;
284 .media-sidebar .search {
293 text-transform: uppercase;
299 .media-sidebar .setting,
300 .attachment-details .setting {
307 .media-sidebar .setting label,
308 .attachment-details .setting label {
312 .media-sidebar .setting .link-to-custom,
313 .attachment-details .setting .link-to-custom {
317 .media-sidebar .setting span,
318 .attachment-details .setting span {
323 word-wrap: break-word;
326 .media-sidebar .setting .name {
330 .media-sidebar .setting select,
331 .attachment-details .setting select {
335 .media-sidebar .setting input[type="checkbox"],
336 .media-sidebar .field input[type="checkbox"],
337 .media-sidebar .setting input[type="radio"],
338 .media-sidebar .field input[type="radio"],
339 .attachment-details .setting input[type="checkbox"],
340 .attachment-details .field input[type="checkbox"],
341 .attachment-details .setting input[type="radio"],
342 .attachment-details .field input[type="radio"] {
348 .media-sidebar .setting span,
349 .attachment-details .setting span,
350 .compat-item label span {
359 .compat-item label span {
363 .media-sidebar .setting input[type="text"],
364 .media-sidebar .setting input[type="password"],
365 .media-sidebar .setting input[type="email"],
366 .media-sidebar .setting input[type="number"],
367 .media-sidebar .setting input[type="search"],
368 .media-sidebar .setting input[type="tel"],
369 .media-sidebar .setting input[type="url"],
370 .media-sidebar .setting textarea,
371 .media-sidebar .setting .value,
372 .attachment-details .setting input[type="text"],
373 .attachment-details .setting input[type="password"],
374 .attachment-details .setting input[type="email"],
375 .attachment-details .setting input[type="number"],
376 .attachment-details .setting input[type="search"],
377 .attachment-details .setting input[type="tel"],
378 .attachment-details .setting input[type="url"],
379 .attachment-details .setting textarea,
380 .attachment-details .setting .value {
381 -webkit-box-sizing: border-box;
382 -moz-box-sizing: border-box;
383 box-sizing: border-box;
389 .media-sidebar .setting .value,
390 .attachment-details .setting .value {
395 .media-sidebar .setting textarea,
396 .attachment-details .setting textarea,
397 .compat-item .field textarea {
402 .media-sidebar select,
403 .attachment-details select {
427 .compat-item .field {
433 .compat-item .label {
440 .compat-item .label span {
445 .compat-item .field {
451 .compat-item .field input[type="text"],
452 .compat-item .field input[type="password"],
453 .compat-item .field input[type="email"],
454 .compat-item .field input[type="number"],
455 .compat-item .field input[type="search"],
456 .compat-item .field input[type="tel"],
457 .compat-item .field input[type="url"],
458 .compat-item .field textarea {
461 -webkit-box-sizing: border-box;
462 -moz-box-sizing: border-box;
463 box-sizing: border-box;
466 .sidebar-for-errors .attachment-details,
467 .sidebar-for-errors .compat-item,
468 .sidebar-for-errors .media-sidebar .media-progress-bar,
469 .sidebar-for-errors .upload-details {
470 display: none !important;
485 border-left-width: 1px;
486 border-left-style: solid;
487 border-left-color: #ccc;
488 -webkit-user-select: none;
489 -moz-user-select: none;
490 -ms-user-select: none;
502 text-decoration: none;
505 .media-menu > a:hover {
507 background: rgba( 0, 0, 0, 0.04 );
510 .media-menu > a:active {
515 .media-menu .active:hover {
520 .media-menu .separator {
524 border-top: 1px solid #ddd;
535 -webkit-user-select: none;
536 -moz-user-select: none;
537 -ms-user-select: none;
542 -webkit-transition: none;
549 padding: 8px 10px 9px;
554 text-decoration: none;
557 .media-router > a:last-child {
561 .media-router > a:active {
565 .media-router .active,
566 .media-router .active:hover {
570 .media-router .active,
571 .media-router > a.active:last-child {
574 border: 1px solid #ddd;
578 .media-router .active:after {
612 .media-frame-router {
621 .media-frame-content {
632 border-top: 1px solid #ddd;
633 border-bottom: 1px solid #ddd;
636 .media-frame-toolbar {
645 .media-frame.hide-menu .media-frame-title,
646 .media-frame.hide-menu .media-frame-router,
647 .media-frame.hide-menu .media-frame-toolbar,
648 .media-frame.hide-menu .media-frame-content {
652 .media-frame.hide-menu .media-frame-menu {
656 .media-frame.hide-toolbar .media-frame-content {
660 .media-frame.hide-toolbar .media-frame-toolbar {
664 .media-frame.hide-router .media-frame-content {
668 .media-frame.hide-router .media-frame-router {
672 .media-frame.hide-router .media-frame-title {
673 border-bottom: 1px solid #dfdfdf;
674 -webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
675 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
678 .media-frame-title .dashicons {
682 .media-frame-title h1 {
689 .media-frame-title .suggested-dimensions {
695 .media-frame-content .crop-content {
699 .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
703 .media-frame-content .crop-content .crop-image {
710 .media-frame-content .crop-content .upload-errors
716 margin-right: -150px;
724 .media-frame .media-iframe {
728 .media-frame .media-iframe,
729 .media-frame .media-iframe iframe {
736 * Attachment Browser Filters
738 .media-frame select.attachment-filters {
742 max-width: -webkit-calc(48% - 12px);
743 max-width: calc(48% - 12px);
746 .media-frame select.attachment-filters:last-of-type {
753 .media-frame .search {
758 font-family: "Open Sans", sans-serif;
759 -webkit-appearance: none;
762 .media-toolbar-primary .search {
769 .wp-core-ui .attachments {
771 -webkit-overflow-scrolling: touch;
777 .wp-core-ui .attachment {
786 -webkit-user-select: none;
787 -moz-user-select: none;
788 -ms-user-select: none;
791 -webkit-box-sizing: border-box;
792 -moz-box-sizing: border-box;
793 box-sizing: border-box;
796 .wp-core-ui .attachment:focus,
797 .wp-core-ui .selected.attachment:focus,
798 .wp-core-ui .attachment.details:focus {
800 inset 0 0 2px 3px #fff,
801 inset 0 0 0 7px #5b9dd9;
803 inset 0 0 2px 3px #fff,
804 inset 0 0 0 7px #5b9dd9;
808 .wp-core-ui .selected.attachment {
810 inset 0 0 0 5px #fff,
811 inset 0 0 0 7px #ccc;
813 inset 0 0 0 5px #fff,
814 inset 0 0 0 7px #ccc;
817 .wp-core-ui .attachment.details {
819 inset 0 0 0 3px #fff,
820 inset 0 0 0 7px #1e8cbe;
822 inset 0 0 0 3px #fff,
823 inset 0 0 0 7px #1e8cbe;
826 .wp-core-ui .attachment-preview {
829 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
830 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
832 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
833 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
838 .wp-core-ui .attachment-preview:before {
844 .wp-core-ui .attachment .icon {
849 .wp-core-ui .attachment .thumbnail {
857 -webkit-transition: opacity .1s;
858 transition: opacity .1s;
861 .wp-core-ui .attachment .portrait img {
865 .wp-core-ui .attachment .landscape img {
869 .wp-core-ui .attachment .thumbnail:after {
877 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
878 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
882 .wp-core-ui .attachment .thumbnail img {
887 .wp-core-ui .attachment .thumbnail .centered {
893 -webkit-transform: translate( -50%, 50% );
894 -ms-transform: translate(-50%,50%); /* Fails with spaces?? Weird! */
895 transform: translate( -50%, 50% );
898 .wp-core-ui .attachment .thumbnail .centered img {
899 -webkit-transform: translate( 50%, -50% );
900 -ms-transform: translate(50%,-50%);
901 transform: translate( 50%, -50% );
904 .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
905 -webkit-transform: translate( 50%, -70% );
906 -ms-transform: translate(50%,-70%);
907 transform: translate( 50%, -70% );
910 .ie8 .wp-core-ui .attachment img.icon {
915 .wp-core-ui .attachment .filename {
922 word-wrap: break-word;
925 background: rgba( 255, 255, 255, 0.8 );
926 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
927 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
930 .wp-core-ui .attachment .filename div {
934 .wp-core-ui .attachment .thumbnail img {
938 .wp-core-ui .attachment-close {
946 background-color: #fff;
947 background-position: -96px 4px;
948 -webkit-border-radius: 3px;
950 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
951 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
954 .wp-core-ui .attachment-close:hover,
955 .wp-core-ui .attachment-close:focus {
956 background-position: -36px 4px;
959 .wp-core-ui .attachment .check {
970 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
971 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
974 .wp-core-ui .attachment .check .media-modal-icon {
976 background-position: -1px 0;
982 .wp-core-ui .attachment .check:hover .media-modal-icon {
983 background-position: -40px 0;
986 .wp-core-ui .attachment.selected .check {
990 .wp-core-ui .attachment.details .check,
991 .wp-core-ui .attachment.selected .check:focus,
992 .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
993 background-color: #1e8cbe;
1002 .wp-core-ui .attachment.details .check .media-modal-icon,
1003 .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
1004 background-position: -21px 0;
1007 .wp-core-ui .attachment.details .check:hover .media-modal-icon,
1008 .wp-core-ui .attachment.selected .check:focus .media-modal-icon,
1009 .wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
1010 background-position: -60px 0;
1013 .wp-core-ui .media-frame .attachment .describe {
1020 -webkit-border-radius: 0;
1025 * Attachments Browser
1027 .media-frame .attachments-browser {
1034 .attachments-browser .media-toolbar {
1039 .attachments-browser.hide-sidebar .media-toolbar {
1043 .attachments-browser .media-toolbar-primary > .media-button,
1044 .attachments-browser .media-toolbar-primary > .media-button-group,
1045 .attachments-browser .media-toolbar-secondary > .media-button,
1046 .attachments-browser .media-toolbar-secondary > .media-button-group {
1050 .attachments-browser .attachments {
1051 padding: 2px 8px 8px;
1054 .attachments-browser .attachments,
1055 .attachments-browser .uploader-inline {
1065 .attachments-browser .uploader-inline.hidden {
1069 .attachments-browser .media-toolbar-primary {
1073 .attachments-browser .media-toolbar-secondary {
1077 .uploader-inline .close {
1078 background-color: transparent;
1090 .uploader-inline .close:before {
1091 font: normal 30px/50px 'dashicons' !important;
1093 display: inline-block;
1098 .attachments-browser.hide-sidebar .attachments,
1099 .attachments-browser.hide-sidebar .uploader-inline {
1104 .attachments-browser .instructions {
1105 display: inline-block;
1113 .attachments-browser .no-media {
1114 padding: 2em 2em 0 0;
1120 .media-progress-bar {
1125 -webkit-border-radius: 10px;
1126 border-radius: 10px;
1127 background: #dfdfdf;
1128 background: rgba( 0, 0, 0, 0.1 );
1131 .media-progress-bar div {
1135 background: #1e8cbe;
1136 -webkit-border-radius: 10px;
1137 border-radius: 10px;
1138 -webkit-transition: width 300ms;
1139 transition: width 300ms;
1142 .media-uploader-status .media-progress-bar {
1147 .uploading.media-uploader-status .media-progress-bar {
1151 .attachment-preview .media-progress-bar {
1159 .media-uploader-status {
1162 padding-bottom: 10px;
1166 .uploader-inline .media-uploader-status h3 {
1170 .media-uploader-status .upload-details {
1176 .uploading.media-uploader-status .upload-details {
1180 .media-uploader-status .upload-detail-separator {
1184 .media-uploader-status .upload-count {
1188 .media-uploader-status .upload-dismiss-errors,
1189 .media-uploader-status .upload-errors {
1193 .errors.media-uploader-status .upload-dismiss-errors,
1194 .errors.media-uploader-status .upload-errors {
1198 .media-uploader-status .upload-dismiss-errors {
1199 text-decoration: none;
1202 .media-sidebar .media-uploader-status .upload-dismiss-errors {
1208 .upload-errors .upload-error {
1210 margin-bottom: 12px;
1212 border-right: 4px solid #dd3d36;
1213 -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1214 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1217 .upload-errors .upload-error-filename {
1221 .upload-errors .upload-error-message {
1224 word-wrap: break-word;
1233 background: rgba( 0, 86, 132, 0.9 );
1238 -webkit-transition: opacity 250ms;
1239 transition: opacity 250ms;
1242 .uploader-window-content {
1248 border: 1px dashed #fff;
1251 .uploader-window h3 {
1257 -webkit-transform: translateY( -50% );
1258 -ms-transform: translateY(-50%);
1259 transform: translateY( -50% );
1265 .uploader-window .media-progress-bar {
1268 background: transparent;
1273 .uploader-window .media-progress-bar div {
1277 .uploading .uploader-window .media-progress-bar {
1281 .media-frame .uploader-inline {
1282 margin-bottom: 20px;
1287 .uploader-inline-content {
1294 .uploader-inline-content .upload-ui {
1298 .uploader-inline-content .post-upload-ui {
1302 .uploader-inline .has-upload-message .upload-ui {
1306 .uploader-inline h3 {
1313 .uploader-inline .has-upload-message .upload-instructions {
1316 font-weight: normal;
1319 .uploader-inline .drop-instructions {
1323 .supports-drag-drop .uploader-inline .drop-instructions {
1327 .uploader-inline p {
1332 .uploader-inline .media-progress-bar {
1336 .uploading.uploader-inline .media-progress-bar {
1340 .uploader-inline .browser {
1341 display: inline-block !important;
1353 padding: 0 16px 0 0;
1355 white-space: nowrap;
1358 .media-selection .selection-info {
1359 display: inline-block;
1363 vertical-align: top;
1366 .media-selection.empty,
1367 .media-selection.editing {
1371 .media-selection.one .edit-selection {
1375 .media-selection .count {
1383 .media-selection .button-link {
1386 margin: 1px -8px 1px 8px;
1388 border-left: 1px solid #dfdfdf;
1392 .media-selection .button-link:hover,
1393 .media-selection .button-link:focus {
1394 background: #21759B;
1396 border-color: transparent;
1399 .media-selection .button-link:last-child {
1404 .selection-info .clear-selection {
1408 .selection-info .clear-selection:hover,
1409 .selection-info .clear-selection:focus {
1414 .media-selection .selection-view {
1415 display: inline-block;
1416 vertical-align: top;
1419 .media-selection .attachments {
1420 display: inline-block;
1425 vertical-align: top;
1428 .media-selection .attachment {
1434 .media-selection .attachment .thumbnail {
1441 .media-selection .attachment .icon {
1445 .media-selection .attachment-preview {
1446 -webkit-box-shadow: none;
1451 .wp-core-ui .media-selection .attachment:focus,
1452 .wp-core-ui .media-selection .selected.attachment:focus,
1453 .wp-core-ui .media-selection .attachment.details:focus {
1456 0 0 2px 3px #5b9dd9;
1459 0 0 2px 3px #5b9dd9;
1462 .wp-core-ui .media-selection .selected.attachment {
1463 -webkit-box-shadow: none;
1467 .wp-core-ui .media-selection .attachment.details {
1476 .media-selection:after {
1484 background-image: -webkit-gradient(linear, left top, right top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
1485 background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1486 background-image: linear-gradient(to right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1489 .media-selection .attachment .filename {
1496 .media-frame .spinner {
1497 background: url(../images/spinner.gif) no-repeat;
1498 -webkit-background-size: 20px 20px;
1499 background-size: 20px 20px;
1501 display: inline-block;
1504 filter: alpha(opacity=70);
1508 vertical-align: middle;
1511 .media-frame .spinner.is-active {
1512 visibility: visible;
1515 .media-toolbar .spinner {
1520 * Attachment Details
1522 .attachment-details {
1527 .attachment-details .settings-save-status {
1529 text-transform: none;
1533 .attachment-details .settings-save-status .spinner {
1537 .attachment-details .settings-save-status .saved {
1542 .attachment-details.save-waiting .settings-save-status .spinner {
1543 visibility: visible;
1546 .attachment-details.save-complete .settings-save-status .saved {
1553 margin-bottom: 16px;
1556 border-bottom: 1px solid #ddd;
1557 padding-bottom: 11px;
1560 .attachment-info .filename {
1563 word-wrap: break-word;
1566 .attachment-info .thumbnail {
1576 .uploading .attachment-info .thumbnail {
1579 -webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1580 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1583 .uploading .attachment-info .media-progress-bar {
1587 .attachment-info .thumbnail-image:after {
1595 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1596 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1600 .attachment-info .thumbnail img {
1607 .attachment-info .details {
1613 .attachment-info .edit-attachment,
1614 .attachment-info .delete-attachment,
1615 .attachment-info .trash-attachment,
1616 .attachment-info .untrash-attachment {
1618 text-decoration: none;
1619 white-space: nowrap;
1622 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1626 .attachment-info .edit-attachment {
1630 .media-modal .delete-attachment,
1631 .media-modal .trash-attachment,
1632 .media-modal .untrash-attachment {
1638 .media-modal .delete-attachment:hover,
1639 .media-modal .delete-attachment:focus,
1640 .media-modal .trash-attachment:hover,
1641 .media-modal .trash-attachment:focus,
1642 .media-modal .untrash-attachment:hover,
1643 .media-modal .untrash-attachment:focus {
1648 * Attachment Display Settings
1650 .attachment-display-settings {
1656 .attachment-display-settings h4 {
1657 margin: 1.4em 0 0.4em;
1660 .collection-settings {
1664 .collection-settings .setting input[type="checkbox"] {
1669 .collection-settings .setting span {
1676 .media-modal .imgedit-wrap {
1680 .media-modal .imgedit-wait {
1681 height: auto !important;
1687 .media-modal .imgedit-wrap .imgedit-panel-content {
1697 .media-modal .imgedit-wrap .imgedit-settings {
1698 background: #f3f3f3;
1699 border-right: 1px solid #ddd;
1700 padding: 0 16px 16px;
1709 .media-modal .imgedit-group {
1712 border-bottom: 1px solid #ddd;
1713 -webkit-box-shadow: none;
1716 margin-bottom: 16px;
1718 padding-bottom: 16px;
1719 position: relative; /* RTL fix, #WP29352 */
1722 .media-modal .imgedit-group:last-of-type {
1728 .media-modal .imgedit-group-top h3 {
1729 text-transform: uppercase;
1736 .media-modal .imgedit-group-top h3 a {
1737 text-decoration: none;
1741 .media-modal .imgedit-help-toggle {
1747 .media-modal .imgedit-help-toggled span.dashicons:before {
1751 .media-modal .imgedit-group img {
1755 .media-modal .imgedit-wrap div.updated {
1757 margin-bottom: 16px;
1762 * Embed from URL and Image Details
1774 .media-frame .embed-url input {
1779 -webkit-box-shadow: inset -2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1780 box-shadow: inset -2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1783 .media-frame .embed-url .spinner {
1789 .media-frame .embed-loading .embed-url .spinner {
1790 visibility: visible;
1793 .embed-link-settings,
1794 .embed-media-settings {
1800 padding: 16px 16px 32px;
1804 .media-embed .embed-link-settings {
1805 /* avoid Firefox to give focus to the embed preview container parent */
1810 .embed-preview iframe,
1811 .embed-preview embed,
1812 .mejs-container video {
1814 vertical-align: middle;
1818 display: inline-block;
1821 .embed-preview img {
1826 .mejs-container:focus {
1827 outline: 1px solid #5b9dd9;
1828 -webkit-box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8);
1829 box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8);
1832 .image-details .media-modal {
1837 .image-details .media-frame-title,
1838 .image-details .media-frame-content,
1839 .image-details .media-frame-router {
1843 .image-details .embed-media-settings {
1849 .image-details .embed-media-settings,
1850 .image-details .embed-media-settings div {
1851 -webkit-box-sizing: border-box;
1852 -moz-box-sizing: border-box;
1853 box-sizing: border-box;
1856 .image-details .column-settings {
1857 background: #f3f3f3;
1858 border-left: 1px solid #ddd;
1866 .image-details .column-settings h3 {
1869 border-top: 1px solid #ddd;
1872 .image-details .column-image {
1879 .image-details .image {
1883 .image-details .image img {
1888 .image-details .advanced-toggle {
1891 text-transform: uppercase;
1894 .image-details .advanced-toggle:after {
1895 font: normal 20px/1 'dashicons';
1897 vertical-align: top;
1898 -webkit-font-smoothing: antialiased;
1899 -moz-osx-font-smoothing: grayscale;
1901 display: inline-block;
1905 .image-details .advanced-visible .advanced-toggle:after {
1909 .image-details .embed-media-settings .size {
1913 .image-details .custom-size span {
1917 .image-details .custom-size label {
1922 .image-details .custom-size span small {
1927 .image-details .custom-size input {
1931 .image-details .custom-size .sep {
1933 margin: 26px 6px 0 6px;
1936 .image-details .custom-size:after {
1942 .media-embed .thumbnail {
1949 .media-embed .thumbnail img {
1954 .media-embed .thumbnail:after {
1962 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1963 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1967 .media-embed .setting {
1975 .image-details .embed-media-settings .setting {
1980 .image-details .actions {
1984 .image-details .hidden {
1988 .media-embed .setting input[type="text"],
1989 .media-embed .setting textarea {
1996 .image-details .embed-media-settings .setting input[type="text"],
1997 .image-details .embed-media-settings .setting textarea {
2002 .image-details .embed-media-settings .setting input.link-to-custom,
2003 .image-details .embed-media-settings .link-target,
2004 .image-details .embed-media-settings .custom-size {
2009 .image-details .embed-media-settings .link-target {
2013 .media-embed .setting input.hidden,
2014 .media-embed .setting textarea.hidden {
2018 .media-embed .setting span {
2026 .image-details .embed-media-settings .setting span {
2030 margin: 8px 1% 0 1%;
2034 .media-embed .setting .button-group {
2038 .media-embed-sidebar {
2049 /* Drag & drop on the editor upload */
2050 .wp-editor-wrap .uploader-editor {
2051 background: rgba( 150, 150, 150, 0.9 );
2057 z-index: 99998; /* under the toolbar */
2062 .wp-editor-wrap .uploader-editor-content {
2063 border: 1px dashed #fff;
2071 .wp-editor-wrap .uploader-editor .uploader-editor-title {
2076 -webkit-transform: translateY( -50% );
2077 -ms-transform: translateY(-50%);
2078 transform: translateY( -50% );
2088 .wp-editor-wrap .uploader-editor.droppable {
2089 background: rgba( 0, 86, 132, 0.9 );
2092 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
2099 .ie7 .media-frame .attachments-browser {
2103 .ie7 .media-frame .embed-url input {
2112 .ie7 .attachment-display-settings {
2116 .ie7 .attachment-preview,
2117 .ie7 .attachment-preview .thumbnail {
2122 .ie7 .media-frame .attachment .describe {
2126 .ie7 .media-sidebar .setting select {
2130 .ie7 .media-sidebar .setting input[type="text"],
2131 .ie7 .media-sidebar .setting input[type="password"],
2132 .ie7 .media-sidebar .setting input[type="email"],
2133 .ie7 .media-sidebar .setting input[type="number"],
2134 .ie7 .media-sidebar .setting input[type="search"],
2135 .ie7 .media-sidebar .setting input[type="tel"],
2136 .ie7 .media-sidebar .setting input[type="url"],
2137 .ie7 .media-sidebar .setting textarea {
2141 .ie7 .media-sidebar .setting .link-to-custom {
2150 .rtl .media-frame .search,
2151 .rtl .media-frame input[type="text"],
2152 .rtl .media-frame input[type="password"],
2153 .rtl .media-frame input[type="number"],
2154 .rtl .media-frame input[type="search"],
2155 .rtl .media-frame input[type="email"],
2156 .rtl .media-frame input[type="url"],
2157 .rtl .media-frame input[type="tel"],
2158 .rtl .media-frame textarea,
2159 .rtl .media-frame select {
2160 font-family: Tahoma, sans-serif;
2163 :lang(he-il) .rtl .media-modal,
2164 :lang(he-il) .rtl .media-frame,
2165 :lang(he-il) .rtl .media-frame .search,
2166 :lang(he-il) .rtl .media-frame input[type="text"],
2167 :lang(he-il) .rtl .media-frame input[type="password"],
2168 :lang(he-il) .rtl .media-frame input[type="number"],
2169 :lang(he-il) .rtl .media-frame input[type="search"],
2170 :lang(he-il) .rtl .media-frame input[type="email"],
2171 :lang(he-il) .rtl .media-frame input[type="url"],
2172 :lang(he-il) .rtl .media-frame textarea,
2173 :lang(he-il) .rtl .media-frame select {
2174 font-family: Arial, sans-serif;
2180 @media only screen and (max-width: 900px) {
2182 /* Drop-down menu */
2183 .media-frame:not(.hide-menu) .media-frame-title,
2184 .media-frame:not(.hide-menu) .media-frame-router,
2185 .media-frame:not(.hide-menu) .media-frame-content,
2186 .media-frame:not(.hide-menu) .media-frame-toolbar {
2190 .media-frame:not(.hide-menu) .media-frame-menu {
2195 .media-frame:not(.hide-menu) .media-menu {
2205 border: 1px solid #ccc;
2208 .media-frame:not(.hide-menu) .media-menu.visible {
2212 .media-frame:not(.hide-menu) .media-menu > a {
2217 .media-frame:not(.hide-menu) .media-menu > a.active {
2221 .media-frame:not(.hide-menu) .media-menu .separator {
2225 .media-frame:not(.hide-menu) .media-frame-title {
2230 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2231 display: inline-block;
2235 .media-frame:not(.hide-menu) .media-frame-title h1 {
2241 /* End drop-down menu */
2247 .attachments-browser .attachments,
2248 .attachments-browser .uploader-inline,
2249 .attachments-browser .media-toolbar {
2253 .media-sidebar .setting,
2254 .attachment-details .setting {
2258 .media-sidebar .setting input,
2259 .media-sidebar .setting textarea,
2260 .media-sidebar .setting span,
2261 .attachment-details .setting input,
2262 .attachment-details .setting textarea,
2263 .attachment-details .setting span,
2264 .compat-item label span {
2268 .media-sidebar .setting span,
2269 .attachment-details .setting span,
2270 .compat-item label span {
2271 text-align: inherit;
2277 .media-sidebar .setting .value,
2278 .attachment-details .setting .value {
2283 .media-sidebar .setting input[type="text"],
2284 .media-sidebar .setting input[type="password"],
2285 .media-sidebar .setting input[type="email"],
2286 .media-sidebar .setting input[type="number"],
2287 .media-sidebar .setting input[type="search"],
2288 .media-sidebar .setting input[type="tel"],
2289 .media-sidebar .setting input[type="url"],
2290 .media-sidebar .setting textarea,
2291 .media-sidebar .setting select,
2292 .attachment-details .setting input[type="text"],
2293 .attachment-details .setting input[type="password"],
2294 .attachment-details .setting input[type="email"],
2295 .attachment-details .setting input[type="number"],
2296 .attachment-details .setting input[type="search"],
2297 .attachment-details .setting input[type="tel"],
2298 .attachment-details .setting input[type="url"],
2299 .attachment-details .setting textarea,
2300 .attachment-details .setting select {
2307 .media-sidebar .setting select.columns,
2308 .attachment-details .setting select.columns {
2313 .media-frame textarea,
2314 .media-frame .search {
2318 .image-details .column-image {
2323 .image-details .column-settings {
2327 .image-details .media-modal {
2332 .image-details .embed-media-settings .setting {
2336 .image-details .embed-media-settings .setting span {
2343 .image-details .embed-media-settings .setting input.link-to-custom,
2344 .image-details .embed-media-settings .setting input[type="text"],
2345 .image-details .embed-media-settings .setting textarea {
2350 .image-details .embed-media-settings .custom-size {
2354 .collection-settings .setting input[type="checkbox"] {
2362 .media-selection:after {
2366 .media-selection .attachments {
2370 .media-modal .attachments-browser .media-toolbar .search {
2376 .media-modal .attachments-browser .media-toolbar .attachment-filters {
2380 .media-modal .attachments-browser .media-toolbar .spinner {
2384 /* Text inputs need to be 16px, or they force zooming on iOS */
2385 .media-frame input[type="text"],
2386 .media-frame input[type="password"],
2387 .media-frame input[type="number"],
2388 .media-frame input[type="search"],
2389 .media-frame input[type="email"],
2390 .media-frame input[type="url"],
2391 .media-frame textarea,
2392 .media-frame select {
2397 /* Responsive on portrait and landscape */
2398 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2399 /* Full-bleed modal */
2401 .image-details .media-modal {
2409 .media-modal-backdrop {
2417 -webkit-box-sizing: border-box;
2418 -moz-box-sizing: border-box;
2419 box-sizing: border-box;
2423 .media-sidebar.visible {
2427 .attachments-browser .attachments,
2428 .attachments-browser .uploader-inline,
2429 .attachments-browser .media-toolbar {
2433 .image-details .media-frame-title {
2439 .image-details .column-image,
2440 .image-details .column-settings {
2446 .image-details .column-settings {
2450 /* Media tabs on the top */
2451 .media-frame-content .media-toolbar .instructions {
2456 /* Landscape specific header override */
2457 @media screen and (max-height: 400px) {
2462 .media-frame-router {
2466 .media-frame-content {
2470 .attachments-browser .attachments {
2474 /* Prevent unnecessary scrolling on title input */
2475 .embed-link-settings {
2480 @media only screen and (max-width: 480px) {
2481 .media-modal-close {
2485 .media-modal .media-frame-title {
2489 .wp-core-ui.wp-customizer .media-button {
2493 .media-modal .media-frame-title h1,
2494 .media-frame:not(.hide-menu) .media-frame-title h1 {
2499 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2503 .media-frame-router,
2504 .media-frame:not(.hide-menu) .media-menu {
2508 .media-frame-content {
2512 .media-frame.hide-router .media-frame-content {
2521 (-webkit-min-device-pixel-ratio: 1.25),
2522 (min-resolution: 120dpi) {
2525 background-image: url(../images/uploader-icons-2x.png);
2526 -webkit-background-size: 134px 15px;
2527 background-size: 134px 15px;
2530 .media-frame .spinner {
2531 background-image: url(../images/spinner-2x.gif);
2535 .media-frame-content[data-columns="1"] .attachment {
2539 .media-frame-content[data-columns="2"] .attachment {
2543 .media-frame-content[data-columns="3"] .attachment {
2547 .media-frame-content[data-columns="4"] .attachment {
2551 .media-frame-content[data-columns="5"] .attachment {
2555 .media-frame-content[data-columns="6"] .attachment {
2559 .media-frame-content[data-columns="7"] .attachment {
2563 .media-frame-content[data-columns="8"] .attachment {
2567 .media-frame-content[data-columns="9"] .attachment {
2571 .media-frame-content[data-columns="10"] .attachment {
2575 .media-frame-content[data-columns="11"] .attachment {
2579 .media-frame-content[data-columns="12"] .attachment {